{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "command-palette-und-ki-suche",
 "name": "Command-Palette (⌘K) und KI-Suche im Header",
 "name_en": "Command palette / Ask AI entry",
 "kurz": "Strg/⌘ K öffnet über dem Hotel-Header einen Dialog: Fuzzy-Suche über Zimmer, Seiten und Aktionen, Freitext-Fragen beantwortet das Haus mit Quellen.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "effizient",
  "modern"
 ],
 "technik": [
  "dialog",
  "vanilla-js",
  "react",
  "cmdk",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Im Header steht ein schmales Suchfeld oder ein Knopf mit dem Tastaturhinweis ⌘K bzw. „Ask AI“. ⌘K oder Strg+K (oft auch /) öffnet einen zentrierten Dialog mit Eingabefeld und gruppierter Ergebnisliste: Seiten, Aktionen, zuletzt besucht. Die Suche ist unscharf (fuzzy), Tastaturkürzel stehen rechts neben den Einträgen. Pfeiltasten bewegen die Auswahl, Enter führt aus, Escape schließt. Seit 2026 kommt die KI-Erweiterung dazu: Freitext-Fragen beantwortet eine KI und verweist auf die passenden Seiten. Der Dialog öffnet mit kurzer Skalierung von 0.96 auf 1 und Einblenden, der Hintergrund wird abgedunkelt.",
  "warum_es_wirkt": "Die Palette wächst mit der Inhaltsmenge mit, ohne dass die Navigation voller wird. Geübte Nutzer kommen mit zwei Tasten überall hin. Das wirkt kompetent und schnell. Die KI-Variante beantwortet Fragen, statt nur Seiten aufzulisten.",
  "wann_einsetzen": "Dokumentationen, Produktseiten, Design-Systeme, große Portfolios und Archive, Seiten für Entwickler. Auch bei Hotels oder Dienstleistern mit vielen wiederkehrenden Fragen (Anreise, Haustiere, Zeiten), wenn die Antworten gepflegt vorliegen.",
  "wann_nicht": "Kleine Seiten mit fünf Links. Zielgruppen ohne Tastaturgewohnheit, wenn die Palette der einzige Zugang ist. KI-Antworten nicht ohne gepflegte, aktuelle Quellen.",
  "varianten": [
   "Reine Suche über Seiten und Inhalte (cmdk-Stil)",
   "Ask-AI-Knopf im Header, der direkt Fragen annimmt (wie bei Vercel)",
   "Kombiniert: Suche, Aktionen (Sprache wechseln, Adresse kopieren) und KI-Frage in einer Liste",
   "Inline-Suchfeld im Header, das zum Dialog wird"
  ],
  "umsetzung": "<dialog> mit showModal() liefert Fokusfalle, Escape und ::backdrop. Das Eingabefeld ist eine role=combobox mit aria-controls auf eine role=listbox; die markierte Option meldet aria-activedescendant. Ein globaler keydown-Listener prüft (metaKey || ctrlKey) && key === 'k' und ruft preventDefault auf. Den Index aus Sitemap oder JSON bauen, Fuzzy-Matching mit Fuse.js oder einer eigenen Bewertung. In React gibt es die Bibliothek cmdk. Den Tastaturhinweis je Plattform anzeigen (⌘ oder Strg). Fallstrick: Strg+K ist in manchen Browsern die Suchleiste, deshalb nur abfangen, solange die Seite den Fokus hat. Für das Schließen eine Klasse mit Ausblend-Animation setzen und erst danach close() aufrufen; das cancel-Ereignis dafür abfangen. Die KI-Antwort kommt im echten Einsatz von einem Suchindex plus Sprachmodell über eine eigene Server-Route; Quellen immer mitliefern und anzeigen. KI-Hinweis als feste Zeile zwischen Eingabefeld und Ergebnissen (Kürzel „KI“ in der Hausfarbe, ein fetter Satz, ein Halbsatz zur Quelle), nur in den Varianten mit KI-Frage.",
  "mobil": "Als Vollbild-Blatt mit großem Eingabefeld (mindestens 16 px, sonst zoomt iOS). Einstieg über ein Such-Icon statt über das Kürzel, Tastaturhinweise ausblenden.",
  "reduzierte_bewegung": "Nur Einblenden oder sofort, ohne Skalierung. KI-Antworten vollständig zeigen statt Wort für Wort.",
  "barrierefreiheit": "Combobox-Pattern nach WAI-ARIA APG. Die Trefferzahl gesammelt per aria-live=polite ansagen, nicht bei jedem Tastendruck. Gestreamte Antworten mit aria-busy markieren, bis sie fertig sind. Beim Schließen den Fokus zum Auslöser zurückgeben. Kürzel per aria-keyshortcuts am Auslöser angeben; eigene Einzeltasten-Kürzel nur mit Modifikator. KI-Kennzeichnung (Art. 50 KI-VO, seit 02.08.2026): Beantwortet eine KI die Fragen, steht das direkt beim Öffnen der Palette sichtbar über den Ergebnissen, nicht erst in Impressum oder Datenschutz (IHK Halle: „direkt beim Start der Unterhaltung“), etwa „Fragen beantwortet ein KI-Assistent.“. Die Antwort trägt den Hinweis im Kopf („KI-Antwort“). Reine Suche ohne KI braucht ihn nicht. Wortlaut vom Kunden prüfen lassen."
 },
 "messwerte": {
  "easing": "cubic-bezier(.2,.8,.2,1) / ease-out",
  "dauer_ms": "Öffnen 150–200; Schließen 100–150",
  "stagger_ms": "",
  "distanz": "scale 0.96 → 1, translateY 8 px",
  "sonstiges": "Dialog-Breite 560–720 px, Ergebnisliste max. ca. 60vh",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.2,
   0.8,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.2, 0.8, 0.2, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Vercel",
   "url": "https://www.vercel.com",
   "auszeichnung": "",
   "beobachtung": "„Ask AI“-Control im Header neben Pricing, Log In, Sign Up.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "DEV: Cmd+K is the new hamburger menu",
   "url": "https://dev.to/thekitbase/cmdk-is-the-new-hamburger-menu-why-command-palettes-are-taking-over-saas-81d",
   "auszeichnung": "",
   "beobachtung": "Linear, Vercel, Raycast, Notion, Superhuman als Referenzen (Produkt-Apps).",
   "art": "artikel"
  },
  {
   "seite": "GetChatAds: Five ways to add an Ask AI button",
   "url": "https://www.getchatads.com/blog/five-ways-to-add-an-ask-ai-button-to-your-site/",
   "auszeichnung": "",
   "beobachtung": "Ask-AI-Buttons als aufkommendes Website-Element.",
   "art": "artikel"
  },
  {
   "seite": "Tailwind CSS",
   "url": "https://tailwindcss.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Suchknopf im Header mit <kbd>⌘K</kbd> (nur in .os-macos) bzw. <kbd>Ctrl K</kbd> auf anderen Systemen.",
   "art": "website"
  },
  {
   "seite": "Dub",
   "url": "https://dub.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (JS): SearchDialog mit hotKey metaKey||ctrlKey + \"k\", Anzeige \"⌘ K\".",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Build a Command Palette: Cmd+K like Linear and Vercel",
   "url": "https://www.techinterview.org/post/3233475212/build-command-palette-cmd-k/?format=md"
  },
  {
   "titel": "21st.dev: React command palette components",
   "url": "https://21st.dev/blog/react-command-palette-components"
  }
 ],
 "kombinierbar_mit": [
  "mega-menue-morphing-viewport",
  "mensch-maschine-umschalter",
  "schwebende-pill-navigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/command-palette-und-ki-suche/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei weitere Produktionsbelege neben Vercel."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Strg/⌘ K öffnet über dem Hotel-Header einen Dialog: Fuzzy-Suche über Zimmer, Seiten und Aktionen, Freitext-Fragen beantwortet das Haus mit Quellen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "oeffnen": "opacity 0 → 1, translateY(8px) scale(0.96) → none, 180 ms cubic-bezier(0.2, 0.8, 0.2, 1), transform-origin 50% 0",
   "schliessen": "dieselben Werte rückwärts, 120 ms cubic-bezier(0.2, 0.8, 0.2, 1), danach dialog.close()",
   "schleier": "rgba(46, 41, 37, .38) + backdrop-filter blur(2px), opacity 180 ms auf / 120 ms zu mit derselben Kurve; ::backdrop transparent",
   "dialog": "Breite 640 px (min(640px, 100% - 32px)), margin-top 12vh, Radius 10px, Liste max. 60vh, Kopfzeile 62 px, Eingabe 18 px",
   "markierung": "springt sofort (kein Gleiten), Hintergrund rgba(85, 104, 91, .12), 2 px Balken links im Hauston",
   "treffer": "Treffer fett mit 2 px Unterstreichung rgba(85, 104, 91, .35)",
   "suche": "eigene Bewertung: Titelanfang 100, Wortanfang 85, Teilstring 60, Schlagwort/Meta 40, verstreute Buchstabenfolge 20; Faltung ä/ö/ü/ß → a/o/u/ss mit Positionskarte; Frage-Erkennung über ?, Fragewort am Anfang oder ab 4 Wörtern",
   "ki_zeile": "Kombiniert: bei Fragen oben, sonst als letzte Zeile; KI-Frage: immer oben, darunter höchstens 3 passende Seiten",
   "antwort": "Wörter im Takt von 32 ms, je Wort opacity 0 → 1 in 240 ms; Quellen-Chips opacity 300 ms nach dem letzten Wort; aria-busy während des Aufbaus",
   "ansage": "Trefferzahl gesammelt nach 400 ms in aria-live=polite",
   "kuerzel": "(metaKey || ctrlKey) + K schaltet um, / öffnet außerhalb von Eingabefeldern; Anzeige ⌘K auf Apple-Geräten, sonst Strg K; Aktionen global mit ⇧ B/R/C/E",
   "meldung": "Toast unter dem Kopf, 180 ms auf / 120 ms zu, Standzeit 2400 ms",
   "mobil": "unter 640 px Vollbild-Blatt, translateY 24 px → 0 in 180 ms, zu in 120 ms; Eingabe 19 px, Abbrechen statt esc",
   "reduziert": "nur opacity 100 ms linear, Antwort erscheint ganz, keine Wort-Einblendung",
   "farben": "Grund #f3eee7, Creme #fef2e3 (Dialog, Buchungsleiste), Text #3e3a37, Linie #d5d1c8, Meta-Text #6b6d68, Icons #82847f, Hauston #55685b (Kupferpatina), Fensterlicht #f1d9ae",
   "schriften": "Newsreader (opsz 72, wght 330) für Marke, Headline, Fragen; Mona Sans wdth 100 für Text, wdth 118 versal 0.06em für Labels; Geist Mono nur in der Demo-Leiste",
   "vorfuehrung_runde_ms": "Kombiniert ca. 13 000, Suche ca. 12 000, KI-Frage ca. 14 000; Tippen 58–120 ms je Zeichen",
   "ki_hinweis": "Zeile zwischen Kopf und Ergebnissen (nur Kombiniert und KI-Frage): Kürzel „KI“ (Geist Mono 10 px, 600, #fef2e3 auf #55685b, Radius 4 px) + „Fragen beantwortet ein KI-Assistent.“ (600) + „Er antwortet nur aus den Hausinfos.“; 13 px (Telefon 12,5 px), Grund rgba(85, 104, 91, .12), Padding 9px 20px; Antwortkopf „KI-Antwort aus den Hausinfos“"
  },
  "ausloeser": "klick",
  "touch": "Unter 640 px ersetzt eine Lupe im Kopf die Suchknöpfe. Antippen öffnet die Palette als Vollbild-Blatt mit großem Eingabefeld und „Abbrechen“. Tastaturhinweise (Strg K, Pfeile, esc, ⇧-Kürzel) sind ausgeblendet. Ergebnisse und Antworten sind dieselben wie am Desktop.",
  "reduziert": "Dialog und Schleier blenden nur in 100 ms linear über, ohne Skalierung und Versatz. Die Antwort steht sofort vollständig da. Die Werte-Leiste zeigt den reduzierten Modus an.",
  "korrekturen": {
   "beschreibung": "Im Header steht ein schmales Suchfeld oder ein Knopf mit dem Tastaturhinweis ⌘K bzw. „Ask AI“. ⌘K oder Strg+K (oft auch /) öffnet einen zentrierten Dialog mit Eingabefeld und gruppierter Ergebnisliste: Seiten, Aktionen, zuletzt besucht. Die Suche ist unscharf (fuzzy), Tastaturkürzel stehen rechts neben den Einträgen. Pfeiltasten bewegen die Auswahl, Enter führt aus, Escape schließt. Seit 2026 kommt die KI-Erweiterung dazu: Freitext-Fragen beantwortet eine KI und verweist auf die passenden Seiten. Der Dialog öffnet mit kurzer Skalierung von 0.96 auf 1 und Einblenden, der Hintergrund wird abgedunkelt.",
   "warum_es_wirkt": "Die Palette wächst mit der Inhaltsmenge mit, ohne dass die Navigation voller wird. Geübte Nutzer kommen mit zwei Tasten überall hin. Das wirkt kompetent und schnell. Die KI-Variante beantwortet Fragen, statt nur Seiten aufzulisten.",
   "wann_einsetzen": "Dokumentationen, Produktseiten, Design-Systeme, große Portfolios und Archive, Seiten für Entwickler. Auch bei Hotels oder Dienstleistern mit vielen wiederkehrenden Fragen (Anreise, Haustiere, Zeiten), wenn die Antworten gepflegt vorliegen.",
   "wann_nicht": "Kleine Seiten mit fünf Links. Zielgruppen ohne Tastaturgewohnheit, wenn die Palette der einzige Zugang ist. KI-Antworten nicht ohne gepflegte, aktuelle Quellen.",
   "varianten": [
    "Reine Suche über Seiten und Inhalte (cmdk-Stil)",
    "Ask-AI-Knopf im Header, der direkt Fragen annimmt (wie bei Vercel)",
    "Kombiniert: Suche, Aktionen (Sprache wechseln, Adresse kopieren) und KI-Frage in einer Liste",
    "Inline-Suchfeld im Header, das zum Dialog wird"
   ],
   "umsetzung": "<dialog> mit showModal() liefert Fokusfalle, Escape und ::backdrop. Das Eingabefeld ist eine role=combobox mit aria-controls auf eine role=listbox; die markierte Option meldet aria-activedescendant. Ein globaler keydown-Listener prüft (metaKey || ctrlKey) && key === 'k' und ruft preventDefault auf. Den Index aus Sitemap oder JSON bauen, Fuzzy-Matching mit Fuse.js oder einer eigenen Bewertung. In React gibt es die Bibliothek cmdk. Den Tastaturhinweis je Plattform anzeigen (⌘ oder Strg). Fallstrick: Strg+K ist in manchen Browsern die Suchleiste, deshalb nur abfangen, solange die Seite den Fokus hat. Für das Schließen eine Klasse mit Ausblend-Animation setzen und erst danach close() aufrufen; das cancel-Ereignis dafür abfangen. Die KI-Antwort kommt im echten Einsatz von einem Suchindex plus Sprachmodell über eine eigene Server-Route; Quellen immer mitliefern und anzeigen. KI-Hinweis als feste Zeile zwischen Eingabefeld und Ergebnissen (Kürzel „KI“ in der Hausfarbe, ein fetter Satz, ein Halbsatz zur Quelle), nur in den Varianten mit KI-Frage.",
   "mobil": "Als Vollbild-Blatt mit großem Eingabefeld (mindestens 16 px, sonst zoomt iOS). Einstieg über ein Such-Icon statt über das Kürzel, Tastaturhinweise ausblenden.",
   "reduzierte_bewegung": "Nur Einblenden oder sofort, ohne Skalierung. KI-Antworten vollständig zeigen statt Wort für Wort.",
   "barrierefreiheit": "Combobox-Pattern nach WAI-ARIA APG. Die Trefferzahl gesammelt per aria-live=polite ansagen, nicht bei jedem Tastendruck. Gestreamte Antworten mit aria-busy markieren, bis sie fertig sind. Beim Schließen den Fokus zum Auslöser zurückgeben. Kürzel per aria-keyshortcuts am Auslöser angeben; eigene Einzeltasten-Kürzel nur mit Modifikator. KI-Kennzeichnung (Art. 50 KI-VO, seit 02.08.2026): Beantwortet eine KI die Fragen, steht das direkt beim Öffnen der Palette sichtbar über den Ergebnissen, nicht erst in Impressum oder Datenschutz (IHK Halle: „direkt beim Start der Unterhaltung“), etwa „Fragen beantwortet ein KI-Assistent.“. Die Antwort trägt den Hinweis im Kopf („KI-Antwort“). Reine Suche ohne KI braucht ihn nicht. Wortlaut vom Kunden prüfen lassen."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Gästehaus „Hallenhaus Neun“ in der Görlitzer Altstadt (Newsreader + Mona Sans, Sand/Creme, Hauston Kupferpatina, eigene SVG-Zeichnung im Rundbogen statt Fotos). Die Palette ist der digitale Concierge: Zimmer, Seiten und Aktionen durchsuchen, Fragen zu Hund, Parken, Frühstück, später Anreise oder Barrierefreiheit beantwortet das Haus mit Quellen-Chips. Drei Varianten per Umschalter: Suche (Inline-Feld), Kombiniert (Standard), KI-Frage (Ask-Knopf mit häufigen Fragen). Die KI-Antworten sind in der Demo fest hinterlegt und werden per Stichwort zugeordnet; echter Einsatz: Index plus Sprachmodell über Server-Route. Vorführung öffnet den Dialog ohne showModal (setAttribute open), damit die Galerie-Vorschau keinen Fokus stiehlt; eine gezeichnete Schreibmarke und eingeblendete Tasten zeigen die Eingaben. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Such- und Frage-Icons (svg.i in den Auslösern und in der Palette) mit aria-hidden; der Name kommt vom Knopf. Kontrastmodus: Knöpfe mit Rahmen ButtonText. Korrektur 02.11.2026: KI-Hinweis nach Art. 50 KI-VO (IHK Halle: „direkt beim Start der Unterhaltung“) als feste Zeile über den Ergebnissen in Kombiniert und KI-Frage, Antwortkopf „KI-Antwort aus den Hausinfos“, Fußzeile nennt den KI-Assistenten."
 }
}