Componenti UI Medio

Wiki — Command-K Instant Search Overlay

A Command-K instant-search palette for the fictional Aurora DB knowledge base. Pressing the keyboard shortcut or the search trigger opens a centered modal with a search field, live fuzzy-filtered results grouped into Pages, API, Recent and Actions, each with an icon, subtitle and type badge. The active row tracks the keyboard, arrows wrap top to bottom, enter opens with a toast, recent searches persist for the session, and a focus trap plus footer keyboard hints round it out. Inter, Source Serif 4 and vanilla JS only, fully responsive.

Apri in Lab

html css vanilla-js

Target: JS HTML

Codice

:root {
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --panel: #ffffff;
  --ink: #1a1a1f;
  --ink-2: #3a3a42;
  --muted: #6b7280;
  --line: rgba(20, 20, 30, 0.10);
  --line-2: rgba(20, 20, 30, 0.18);
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --accent: #2563eb;
  --note: #2563eb;
  --tip: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --code-bg: #f4f4f6;
  --kbd-bg: #eceef2;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-lg: 0 24px 60px -16px rgba(20, 22, 40, 0.32), 0 8px 24px -12px rgba(20, 22, 40, 0.20);
  --sidebar-w: 256px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ───────────────────────── Top bar ───────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-2); }
.nav-toggle { display: none; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-weight: 700;
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); font-size: 18px; }
.brand-name { font-size: 16px; letter-spacing: -0.01em; }
.brand-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  min-width: 280px;
  height: 38px;
  padding: 0 8px 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.search-trigger:hover {
  border-color: var(--line-2);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 22, 40, 0.05);
}
.search-trigger svg { color: var(--muted); flex: none; }
.search-trigger-label { flex: 1; text-align: left; }

.kbd-chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--kbd-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.kbd-chip .cmd { font-size: 12px; }

.topbar-links {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.topbar-links a {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.topbar-links a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }

/* ───────────────────────── Shell + sidebar ───────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 22px 16px 40px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.nav-group-label {
  margin: 18px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.nav-group-label:first-child { margin-top: 0; }
.sidebar-nav ul {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.sidebar-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.4;
}
.sidebar-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.sidebar-nav a.active {
  background: #eef3ff;
  color: var(--link-hover);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

.scrim {
  position: fixed;
  inset: 56px 0 0;
  background: rgba(15, 18, 30, 0.4);
  z-index: 35;
}

/* ───────────────────────── Article ───────────────────────── */
.main { min-height: calc(100vh - 56px); }
.article {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 28px 96px;
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); }

.article h1 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.article h2 {
  margin: 40px 0 12px;
  padding-top: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-top: 1px solid var(--line);
}
.lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}
.article p {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.article p.hint-row, .article p.breadcrumb { font-family: var(--sans); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--code-bg);
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: #b91c4c;
}
.code {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 18px 0;
}
.code code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: inherit;
}

blockquote {
  margin: 20px 0;
  padding: 12px 16px;
  background: #eef3ff;
  border-left: 3px solid var(--note);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-2);
}
blockquote strong { color: var(--note); }

.table-wrap { overflow-x: auto; margin: 18px 0; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--sans);
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-2);
}
td { color: var(--ink-2); }
tbody tr:hover td { background: var(--bg-2); }

kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--kbd-bg);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 1px 6px;
  line-height: 1.6;
}
.hint-row { color: var(--muted); font-size: 14px; }

/* ───────────────────────── Command palette ───────────────────────── */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 16px 16px;
  background: rgba(15, 18, 32, 0.42);
  backdrop-filter: blur(2px);
  animation: backdrop-in 0.14s ease;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.palette {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 78vh);
  animation: palette-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  height: 56px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.palette-search-icon { color: var(--muted); flex: none; }
.palette-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  padding: 0;
}
.palette-input::placeholder { color: var(--muted); }
.palette-esc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px 7px;
  flex: none;
}

.palette-results {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
  scrollbar-width: thin;
}
.result-group-label {
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  scroll-margin: 8px;
}
.result-item:hover { background: var(--bg-2); }
.result-item.is-active { background: #eef3ff; }
.result-item.is-active .result-arrow { opacity: 1; transform: none; }

.result-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.result-item.is-active .result-icon {
  background: #fff;
  border-color: #cdd9f7;
  color: var(--accent);
}
.result-icon svg { width: 17px; height: 17px; }

.result-body { flex: 1; min-width: 0; }
.result-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-title mark {
  background: rgba(37, 99, 235, 0.16);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.result-sub {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-meta {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--mono);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.result-arrow {
  flex: none;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.palette-empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}
.palette-empty strong { color: var(--ink-2); display: block; margin-bottom: 4px; font-size: 15px; }

.palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  flex: none;
}
.foot-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}
.foot-hint kbd { font-size: 10.5px; padding: 0 5px; }
.foot-spacer { flex: 1; }
.foot-brand {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ───────────────────────── Toast ───────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 300;
  max-width: min(440px, calc(100vw - 32px));
  padding: 11px 16px;
  background: #15151b;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .toast-key { color: #8fb4ff; font-family: var(--mono); }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .topbar-links { display: none; }
  .search-trigger { min-width: 0; flex: 1; }
  .search-trigger-label { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 36;
    transform: translateX(-104%);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28);
  }
  .sidebar.open { transform: none; }
  .article { padding: 28px 20px 80px; }
  .article h1 { font-size: 28px; }
}

@media (max-width: 520px) {
  .brand-sub { display: none; }
  .palette-backdrop { padding: 7vh 10px 10px; }
  .palette { max-height: 86vh; }
  .palette-footer { gap: 10px; flex-wrap: wrap; }
  .foot-brand { display: none; }
  .result-meta { display: none; }
  .article h1 { font-size: 25px; }
  .lede { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

(function () {
  "use strict";

  /* ───────────────────────── Icons ───────────────────────── */
  var ICONS = {
    page: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M5 21V5a2 2 0 0 1 2-2h7l5 5v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z"/><path d="M9 13h6M9 17h4"/></svg>',
    api: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-3 3 3 3M16 9l3 3-3 3M13 6l-2 12"/></svg>',
    recent: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
    action: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m13 2-9 11h7l-1 9 9-11h-7z"/></svg>',
    arrow: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>'
  };

  /* ───────────────────────── Searchable index ───────────────────────── */
  var INDEX = [
    { group: "Pages", icon: "page", title: "The Aurora DB storage engine", sub: "Core concepts", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Write path & write-ahead log", sub: "Core concepts", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Leveled compaction", sub: "Operations", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Replication & failover", sub: "Core concepts", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Consistency model", sub: "Core concepts", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Backups and point-in-time restore", sub: "Operations", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Quickstart in five minutes", sub: "Getting started", meta: "Guide" },
    { group: "Pages", icon: "page", title: "Monitoring & alerting", sub: "Operations", meta: "Guide" },

    { group: "API", icon: "api", title: "client.connect(uri, opts)", sub: "Connection pool", meta: "Method" },
    { group: "API", icon: "api", title: "table.insert(rows)", sub: "Write operations", meta: "Method" },
    { group: "API", icon: "api", title: "query.where(predicate)", sub: "Query builder", meta: "Method" },
    { group: "API", icon: "api", title: "engine.compact(level)", sub: "Maintenance", meta: "Method" },
    { group: "API", icon: "api", title: "snapshot.restore(id)", sub: "Backups", meta: "Method" },

    { group: "Actions", icon: "action", title: "Toggle dark mode", sub: "Appearance", meta: "Action", action: true },
    { group: "Actions", icon: "action", title: "Copy current page URL", sub: "Share", meta: "Action", action: true },
    { group: "Actions", icon: "action", title: "Open the changelog", sub: "Releases", meta: "Action", action: true },
    { group: "Actions", icon: "action", title: "Contact support", sub: "Help", meta: "Action", action: true }
  ];

  var GROUP_ORDER = ["Recent", "Pages", "API", "Actions"];
  var RECENT_KEY = "aurora-cmdk-recent";
  var MAX_RECENT = 4;

  /* ───────────────────────── DOM refs ───────────────────────── */
  var backdrop = document.getElementById("paletteBackdrop");
  var palette = document.getElementById("palette");
  var input = document.getElementById("paletteInput");
  var resultsEl = document.getElementById("paletteResults");
  var trigger = document.getElementById("searchTrigger");
  var toastEl = document.getElementById("toast");

  var flat = [];        // flattened active result list (in DOM order)
  var activeIndex = -1; // index into flat
  var lastFocused = null;

  /* ───────────────────────── Recent searches memory ───────────────────────── */
  function loadRecent() {
    try {
      var raw = sessionStorage.getItem(RECENT_KEY);
      return raw ? JSON.parse(raw) : [];
    } catch (e) { return []; }
  }
  function saveRecent(item) {
    var recent = loadRecent().filter(function (r) { return r.title !== item.title; });
    recent.unshift({ title: item.title, sub: item.sub, icon: item.icon, meta: item.meta, action: !!item.action });
    recent = recent.slice(0, MAX_RECENT);
    try { sessionStorage.setItem(RECENT_KEY, JSON.stringify(recent)); } catch (e) {}
  }

  /* ───────────────────────── Fuzzy-ish scoring ───────────────────────── */
  // Subsequence match; rewards contiguous runs and word-start hits.
  function fuzzy(query, text) {
    query = query.toLowerCase();
    var lower = text.toLowerCase();
    if (!query) return { score: 0, hits: [] };
    var qi = 0, score = 0, run = 0, hits = [];
    for (var i = 0; i < lower.length && qi < query.length; i++) {
      if (lower[i] === query[qi]) {
        hits.push(i);
        run++;
        score += run * 3;                       // contiguous run bonus
        if (i === 0 || lower[i - 1] === " ") score += 8; // word-start bonus
        qi++;
      } else {
        run = 0;
      }
    }
    if (qi < query.length) return null;          // not all chars matched
    if (lower.indexOf(query) !== -1) score += 30; // exact substring bonus
    return { score: score, hits: hits };
  }

  function highlight(text, hits) {
    if (!hits || !hits.length) return escapeHtml(text);
    var set = {};
    hits.forEach(function (h) { set[h] = true; });
    var out = "";
    for (var i = 0; i < text.length; i++) {
      var ch = escapeHtml(text[i]);
      out += set[i] ? "<mark>" + ch + "</mark>" : ch;
    }
    return out;
  }

  function escapeHtml(s) {
    return s.replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  /* ───────────────────────── Rendering ───────────────────────── */
  function buildList(query) {
    var groups = {};

    if (!query) {
      // Empty state: show Recent (if any) then default Pages/API/Actions.
      var recent = loadRecent();
      if (recent.length) {
        groups.Recent = recent.map(function (r) {
          return { item: { group: "Recent", icon: r.icon || "recent", title: r.title, sub: r.sub, meta: r.meta, action: r.action }, hits: [] };
        });
      }
      INDEX.forEach(function (item) {
        (groups[item.group] = groups[item.group] || []).push({ item: item, hits: [] });
      });
    } else {
      INDEX.forEach(function (item) {
        var m = fuzzy(query, item.title);
        var subM = fuzzy(query, item.sub);
        if (!m && !subM) return;
        var best = m || { score: 0, hits: [] };
        if (subM && (!m || subM.score > m.score + 6)) best = { score: subM.score - 5, hits: [] };
        (groups[item.group] = groups[item.group] || []).push({ item: item, hits: m ? m.hits : [], score: best.score });
      });
      Object.keys(groups).forEach(function (g) {
        groups[g].sort(function (a, b) { return (b.score || 0) - (a.score || 0); });
      });
    }
    return groups;
  }

  function render(query) {
    var groups = buildList(query);
    resultsEl.innerHTML = "";
    flat = [];

    var any = GROUP_ORDER.some(function (g) { return groups[g] && groups[g].length; });
    if (!any) {
      var empty = document.createElement("div");
      empty.className = "palette-empty";
      empty.innerHTML = "<strong>No matches for &ldquo;" + escapeHtml(query) + "&rdquo;</strong>" +
        "Try a page name, an API method, or an action.";
      resultsEl.appendChild(empty);
      activeIndex = -1;
      input.setAttribute("aria-activedescendant", "");
      return;
    }

    var idCounter = 0;
    GROUP_ORDER.forEach(function (g) {
      var entries = groups[g];
      if (!entries || !entries.length) return;

      var label = document.createElement("div");
      label.className = "result-group-label";
      label.textContent = g;
      label.setAttribute("role", "presentation");
      resultsEl.appendChild(label);

      entries.forEach(function (entry) {
        var item = entry.item;
        var row = document.createElement("div");
        row.className = "result-item";
        row.id = "cmdk-opt-" + (idCounter++);
        row.setAttribute("role", "option");
        row.setAttribute("aria-selected", "false");

        var iconName = item.icon in ICONS ? item.icon : "page";
        row.innerHTML =
          '<span class="result-icon">' + ICONS[iconName] + '</span>' +
          '<span class="result-body">' +
            '<span class="result-title">' + highlight(item.title, entry.hits) + '</span>' +
            '<span class="result-sub">' + escapeHtml(item.sub) + '</span>' +
          '</span>' +
          '<span class="result-meta">' + escapeHtml(item.meta) + '</span>' +
          '<span class="result-arrow">' + ICONS.arrow + '</span>';

        var myIndex = flat.length;
        row.addEventListener("mousemove", function () { setActive(myIndex); });
        row.addEventListener("click", function () { activate(myIndex); });

        resultsEl.appendChild(row);
        flat.push({ el: row, item: item });
      });
    });

    setActive(flat.length ? 0 : -1);
  }

  function setActive(i) {
    if (activeIndex >= 0 && flat[activeIndex]) {
      flat[activeIndex].el.classList.remove("is-active");
      flat[activeIndex].el.setAttribute("aria-selected", "false");
    }
    activeIndex = i;
    if (i >= 0 && flat[i]) {
      var el = flat[i].el;
      el.classList.add("is-active");
      el.setAttribute("aria-selected", "true");
      input.setAttribute("aria-activedescendant", el.id);
      el.scrollIntoView({ block: "nearest" });
    } else {
      input.setAttribute("aria-activedescendant", "");
    }
  }

  function move(delta) {
    if (!flat.length) return;
    var next = activeIndex + delta;
    if (next < 0) next = flat.length - 1;        // wrap to bottom
    if (next >= flat.length) next = 0;           // wrap to top
    setActive(next);
  }

  function activate(i) {
    if (i < 0 || !flat[i]) return;
    var item = flat[i].item;
    saveRecent(item);
    closePalette();
    if (item.action) {
      toast("Ran action <span class=\"toast-key\">" + escapeHtml(item.title) + "</span>");
    } else {
      toast("Opening <span class=\"toast-key\">" + escapeHtml(item.title) + "</span>…");
    }
  }

  /* ───────────────────────── Open / close + focus trap ───────────────────────── */
  function openPalette() {
    if (!backdrop.hidden) return;
    lastFocused = document.activeElement;
    backdrop.hidden = false;
    document.body.style.overflow = "hidden";
    input.value = "";
    render("");
    requestAnimationFrame(function () { input.focus(); });
  }

  function closePalette() {
    if (backdrop.hidden) return;
    backdrop.hidden = true;
    document.body.style.overflow = "";
    if (lastFocused && lastFocused.focus) lastFocused.focus();
  }

  function trapFocus(e) {
    if (e.key !== "Tab") return;
    var focusables = palette.querySelectorAll("input, [tabindex]:not([tabindex='-1'])");
    if (!focusables.length) { e.preventDefault(); return; }
    var first = focusables[0];
    var last = focusables[focusables.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  }

  /* ───────────────────────── Toast helper ───────────────────────── */
  var toastTimer = null;
  function toast(html) {
    toastEl.innerHTML = html;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { toastEl.classList.remove("show"); }, 2400);
  }

  /* ───────────────────────── Event wiring ───────────────────────── */
  trigger.addEventListener("click", openPalette);

  input.addEventListener("input", function () { render(input.value.trim()); });

  document.addEventListener("keydown", function (e) {
    var meta = e.metaKey || e.ctrlKey;
    if (meta && (e.key === "k" || e.key === "K")) {
      e.preventDefault();
      backdrop.hidden ? openPalette() : closePalette();
      return;
    }
    // "/" opens search when not typing in a field
    if (e.key === "/" && backdrop.hidden) {
      var tag = (document.activeElement && document.activeElement.tagName) || "";
      if (tag !== "INPUT" && tag !== "TEXTAREA") {
        e.preventDefault();
        openPalette();
      }
    }
  });

  // Palette-scoped keys
  backdrop.addEventListener("keydown", function (e) {
    if (e.key === "Escape") { e.preventDefault(); closePalette(); return; }
    if (e.key === "ArrowDown") { e.preventDefault(); move(1); return; }
    if (e.key === "ArrowUp") { e.preventDefault(); move(-1); return; }
    if (e.key === "Enter") { e.preventDefault(); activate(activeIndex); return; }
    if (e.key === "Home") { e.preventDefault(); setActive(0); return; }
    if (e.key === "End") { e.preventDefault(); setActive(flat.length - 1); return; }
    trapFocus(e);
  });

  backdrop.addEventListener("mousedown", function (e) {
    if (e.target === backdrop) closePalette();
  });

  /* ───────────────────────── Sidebar drawer (mobile) ───────────────────────── */
  var navToggle = document.getElementById("navToggle");
  var sidebar = document.getElementById("sidebar");
  var scrim = document.getElementById("scrim");

  function toggleNav(open) {
    var isOpen = typeof open === "boolean" ? open : !sidebar.classList.contains("open");
    sidebar.classList.toggle("open", isOpen);
    scrim.hidden = !isOpen;
    navToggle.setAttribute("aria-expanded", String(isOpen));
  }
  navToggle.addEventListener("click", function () { toggleNav(); });
  scrim.addEventListener("click", function () { toggleNav(false); });
  sidebar.addEventListener("click", function (e) {
    if (e.target.closest("a")) toggleNav(false);
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aurora DB Docs — Command-K Instant Search</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,[email protected],400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <!-- ───────────────────────── Top bar ───────────────────────── -->
  <header class="topbar">
    <button class="icon-btn nav-toggle" id="navToggle" aria-label="Open navigation" aria-expanded="false" aria-controls="sidebar">
      <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
    </button>
    <a class="brand" href="#main">
      <span class="brand-mark" aria-hidden="true">◈</span>
      <span class="brand-name">Aurora DB</span>
      <span class="brand-sub">Docs</span>
    </a>

    <button class="search-trigger" id="searchTrigger" aria-haspopup="dialog" aria-label="Search docs">
      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="m21 21-4.3-4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
      <span class="search-trigger-label">Search docs…</span>
      <kbd class="kbd-chip"><span class="cmd">⌘</span>K</kbd>
    </button>

    <nav class="topbar-links" aria-label="Primary">
      <a href="#main">Guides</a>
      <a href="#main">API</a>
      <a href="#main">Changelog</a>
    </nav>
  </header>

  <div class="shell">
    <!-- ───────────────────────── Sidebar ───────────────────────── -->
    <aside class="sidebar" id="sidebar" aria-label="Documentation navigation">
      <nav class="sidebar-nav">
        <p class="nav-group-label">Getting started</p>
        <ul>
          <li><a href="#main" class="active">Introduction</a></li>
          <li><a href="#main">Installation</a></li>
          <li><a href="#main">Quickstart</a></li>
        </ul>
        <p class="nav-group-label">Core concepts</p>
        <ul>
          <li><a href="#main">Storage engine</a></li>
          <li><a href="#main">Write path</a></li>
          <li><a href="#main">Replication</a></li>
          <li><a href="#main">Consistency model</a></li>
        </ul>
        <p class="nav-group-label">Operations</p>
        <ul>
          <li><a href="#main">Backups</a></li>
          <li><a href="#main">Compaction</a></li>
          <li><a href="#main">Monitoring</a></li>
        </ul>
      </nav>
    </aside>
    <div class="scrim" id="scrim" hidden></div>

    <!-- ───────────────────────── Main ───────────────────────── -->
    <main class="main" id="main" tabindex="-1">
      <article class="article">
        <p class="breadcrumb"><a href="#main">Docs</a> <span aria-hidden="true">/</span> <a href="#main">Core concepts</a> <span aria-hidden="true">/</span> Storage engine</p>
        <h1>The Aurora DB storage engine</h1>
        <p class="lede">Aurora DB persists data through a log-structured merge tree tuned for write-heavy workloads.
          This page covers the on-disk layout, the write path, and how background compaction keeps read
          amplification bounded. Press <kbd>⌘K</kbd> at any time to jump anywhere in these docs.</p>

        <h2>How writes land</h2>
        <p>Every mutation is appended to a durable write-ahead log before it is acknowledged, then folded
          into an in-memory <code>memtable</code>. When the memtable crosses its flush threshold it is
          frozen and written out as an immutable sorted segment. Because segments never change after they
          are sealed, reads can be served lock-free and replicas can ship segments byte-for-byte.</p>

        <pre class="code"><code>CREATE TABLE orders (
  id        UUID PRIMARY KEY,
  customer  TEXT NOT NULL,
  total     NUMERIC,
  placed_at TIMESTAMPTZ DEFAULT now()
) WITH (engine = 'lsm', compaction = 'leveled');</code></pre>

        <blockquote>
          <strong>Note —</strong> The flush threshold defaults to 64&nbsp;MiB. Lower it for latency-sensitive
          tenants; raise it to reduce the number of segments a query must merge.
        </blockquote>

        <h2>Segment format</h2>
        <p>Each segment carries a sparse index, a bloom filter, and a footer with checksums. The bloom
          filter lets the engine skip segments that cannot contain a key, which is what keeps point reads
          fast even as the number of segments grows.</p>

        <div class="table-wrap">
          <table>
            <thead><tr><th>Region</th><th>Bytes</th><th>Purpose</th></tr></thead>
            <tbody>
              <tr><td>Header</td><td>32</td><td>Magic, version, flags</td></tr>
              <tr><td>Data blocks</td><td>variable</td><td>Sorted key/value pairs</td></tr>
              <tr><td>Bloom filter</td><td>~1.2/key</td><td>Negative-lookup skip</td></tr>
              <tr><td>Sparse index</td><td>variable</td><td>Block offsets by key</td></tr>
              <tr><td>Footer</td><td>48</td><td>Checksums, index offset</td></tr>
            </tbody>
          </table>
        </div>

        <h2>Compaction</h2>
        <p>Leveled compaction merges overlapping segments into a higher level, discarding tombstones and
          superseded versions along the way. This bounds the number of segments any read must consult,
          trading a steady background write cost for predictable read latency.</p>

        <p class="hint-row">Try the palette: open it with <kbd>⌘K</kbd>, move with <kbd>↑</kbd> <kbd>↓</kbd>,
          open a result with <kbd>↵</kbd>, and dismiss with <kbd>Esc</kbd>.</p>
      </article>
    </main>
  </div>

  <!-- ───────────────────────── Command palette ───────────────────────── -->
  <div class="palette-backdrop" id="paletteBackdrop" hidden>
    <div class="palette" id="palette" role="dialog" aria-modal="true" aria-label="Search documentation" aria-describedby="paletteFoot">
      <div class="palette-input-row">
        <svg class="palette-search-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="m21 21-4.3-4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        <input
          id="paletteInput"
          class="palette-input"
          type="text"
          role="combobox"
          aria-expanded="true"
          aria-controls="paletteResults"
          aria-activedescendant=""
          aria-autocomplete="list"
          placeholder="Search pages, API, actions…"
          autocomplete="off"
          spellcheck="false"
        />
        <kbd class="palette-esc">Esc</kbd>
      </div>

      <div class="palette-results" id="paletteResults" role="listbox" aria-label="Search results"></div>

      <div class="palette-footer" id="paletteFoot">
        <span class="foot-hint"><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
        <span class="foot-hint"><kbd>↵</kbd> open</span>
        <span class="foot-hint"><kbd>Esc</kbd> close</span>
        <span class="foot-spacer"></span>
        <span class="foot-brand">Aurora DB Search</span>
      </div>
    </div>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="script.js"></script>
</body>
</html>

Command-K Instant Search Overlay

A clean knowledge-base reading view for Aurora DB, a fictional distributed database, fronted by a fast Command-K search palette. The page itself is a real docs layout — sticky top bar with a Search docs… ⌘K trigger, a persistent left sidebar, and a centered serif article on the storage engine. Pressing ⌘K (or Ctrl+K), clicking the trigger, or hitting / opens a centered modal over a dimmed backdrop.

Inside, a single input live-filters a small index with a lightweight fuzzy matcher that scores contiguous runs, word-start hits and exact substrings, then highlights the matched characters in each title. Results stay grouped into Recent, Pages, API and Actions, each row carrying an icon, a subtitle and a type badge. The active row follows the keyboard: ↑ and ↓ move and wrap around the ends, Home/End jump, ↵ opens the row with a toast, and Esc or a backdrop click dismisses the palette.

A focus trap keeps tabbing inside the dialog, focus is restored to whatever opened it, recent searches persist for the session via sessionStorage, and the footer spells out every shortcut. Everything is vanilla JS — no frameworks, no build step — and the layout collapses the sidebar into a drawer and shrinks the palette on narrow screens, respecting reduced-motion preferences throughout.

Illustrative UI only — fictional articles, products, and data.