@adia-ai/web-components 0.0.1

package/components/command/command.a2ui.json

@@ -0,0 +1,221 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Command.json",
+  "title": "Command",
+  "description": "Searchable command palette with keyboard navigation.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Command"
+    },
+    "open": {
+      "description": "Whether the command palette is visible",
+      "type": "boolean",
+      "default": false
+    },
+    "placeholder": {
+      "description": "Placeholder text for the search input",
+      "type": "string",
+      "default": "Type a command..."
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "dismiss": {
+        "description": "Fired when Escape is pressed"
+      },
+      "select": {
+        "description": "Fired when an item is selected. Detail contains { value, label, item }."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Command usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Command\",\n    \"placeholder\": \"Enter command...\"\n  }\n]",
+        "name": "basic-command"
+      }
+    ],
+    "keywords": [
+      "command",
+      "assistant",
+      "copilot",
+      "ai",
+      "prompt",
+      "console",
+      "menu",
+      "terminal",
+      "search",
+      "find",
+      "lookup",
+      "autocomplete",
+      "typeahead",
+      "spotlight",
+      "omnibar",
+      "combobox",
+      "palette",
+      "shortcut",
+      "hotkey",
+      "keyboard",
+      "keybinding"
+    ],
+    "name": "AdiaCommand",
+    "related": [],
+    "slots": {
+      "empty": {
+        "description": "Empty state shown when no items match"
+      },
+      "footer": {
+        "description": "Keyboard hint bar"
+      },
+      "list": {
+        "description": "Container for command items and groups"
+      },
+      "search": {
+        "description": "Search input with combobox role"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "ai": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "assistant": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "autocomplete": [
+        "search",
+        "command",
+        "palette",
+        "tag"
+      ],
+      "combobox": [
+        "search",
+        "command",
+        "select"
+      ],
+      "command": [
+        "command",
+        "palette",
+        "kbd",
+        "shortcut"
+      ],
+      "console": [
+        "dashboard",
+        "table",
+        "data",
+        "sidebar",
+        "command"
+      ],
+      "copilot": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "find": [
+        "search",
+        "filter",
+        "command"
+      ],
+      "hotkey": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "keybinding": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "keyboard": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "lookup": [
+        "search",
+        "filter",
+        "command"
+      ],
+      "menu": [
+        "nav",
+        "sidebar",
+        "popover",
+        "menu",
+        "command"
+      ],
+      "omnibar": [
+        "command",
+        "palette",
+        "search"
+      ],
+      "palette": [
+        "color",
+        "picker",
+        "command",
+        "palette"
+      ],
+      "prompt": [
+        "chat",
+        "streaming",
+        "command",
+        "palette"
+      ],
+      "search": [
+        "search",
+        "filter",
+        "command",
+        "palette"
+      ],
+      "shortcut": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "spotlight": [
+        "command",
+        "palette",
+        "search"
+      ],
+      "terminal": [
+        "code",
+        "block",
+        "command"
+      ],
+      "typeahead": [
+        "search",
+        "command",
+        "palette"
+      ]
+    },
+    "tag": "command-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/command/command.css

@@ -0,0 +1,251 @@
+@scope (command-ui) {
+  :where(:scope) {
+    /* ── Layout ──
+       No default width or height — the host pattern (dialog, popover,
+       app-shell search slot, etc.) is responsible for sizing the palette.
+       This keeps the component composable across overlay and inline use. */
+    --command-radius:             var(--a-radius-lg);
+    --command-px:                 var(--a-space-3);
+    --command-py:                 var(--a-space-3);
+    --command-gap:                var(--a-space-2);
+    --command-list-px:            var(--a-space-1);
+    --command-list-py:            var(--a-space-1);
+    --command-group-gap:          var(--a-space-1);
+
+    /* ── Colors ── */
+    --command-bg:                 var(--a-bg-subtle);
+    --command-fg:                 var(--a-fg);
+    --command-fg-muted:           var(--a-fg-muted);
+    --command-border:             var(--a-border-subtle);
+
+    /* ── Elevation ── */
+    --command-shadow:             var(--a-shadow-lg);
+
+    /* ── Typography ── */
+    --command-font-size:          var(--a-ui-size);
+    --command-input-font-size:    var(--a-body-size);
+
+    /* ── Transition ── */
+    --command-duration:           var(--a-duration-fast);
+    --command-easing:             var(--a-easing);
+
+    /* ── Item ── */
+    --command-item-height:        var(--a-size);
+    --command-item-radius:        var(--a-radius-md);
+    --command-item-px:            var(--a-space-2);
+    --command-item-py:            var(--a-space-2);
+    --command-item-fg:            var(--a-fg-subtle);
+    --command-item-fg-hover:      var(--a-fg-hover);
+    --command-item-bg-hover:      var(--a-bg-hover);
+    --command-item-fg-disabled:   var(--a-ui-text-disabled);
+
+    /* ── Shortcut ── */
+    --command-shortcut-fg:        var(--a-fg-muted);
+    --command-shortcut-font-size: var(--a-ui-sm);
+
+    /* ── Group label ── */
+    --command-group-fg:           var(--a-fg-muted);
+    --command-group-font-size:    var(--a-ui-sm);
+    --command-group-font-weight:  var(--a-weight-medium);
+    --command-group-label-px:     var(--a-space-2);
+    --command-group-label-py:     var(--a-space-2);
+
+    /* ── Empty state ── */
+    --command-empty-fg:           var(--a-fg-muted);
+
+    /* ── Header ── */
+    --command-header-px:          var(--a-space-4);
+    --command-header-py:          var(--a-space-4);
+
+    /* ── Footer ── */
+    --command-footer-fg:          var(--a-fg-muted);
+    --command-footer-font-size:   var(--a-ui-sm);
+    --command-footer-px:          var(--command-px);
+    --command-footer-py:          var(--command-py);
+
+    /* ── Footer kbd ── */
+    --command-kbd-border:         var(--a-border-subtle);
+    --command-kbd-radius:         var(--a-radius-sm);
+    --command-kbd-bg:             var(--a-bg-muted);
+    --command-kbd-fg:             var(--a-fg-muted);
+
+    /* ── Hint ── */
+    --command-hint-gap:           var(--a-space-0-5);
+    --command-hint-kbd-px:        var(--a-space-0-5);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: var(--command-bg);
+    border: 1px solid var(--command-border);
+    border-radius: var(--command-radius);
+    box-shadow: var(--command-shadow);
+    font-size: var(--command-font-size);
+    overflow: hidden;
+  }
+
+  /* ── Search header ── */
+  > header {
+    display: flex;
+    align-items: center;
+    gap: var(--command-gap);
+    padding: var(--command-header-py) var(--command-header-px);
+    border-bottom: 1px solid var(--command-border);
+    flex-shrink: 0;
+  }
+
+  > header icon-ui {
+    flex-shrink: 0;
+    color: var(--command-fg-muted);
+    --a-icon-size: 1rem;
+  }
+
+  > header input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--command-fg);
+    font-family: inherit;
+    font-size: var(--command-input-font-size);
+    line-height: 1.4;
+    padding: 0;
+  }
+
+  > header input::placeholder {
+    color: var(--command-fg-muted);
+  }
+
+  /* Suppress focus ring on the input — the palette itself is the focused surface */
+  > header input:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+  > header:focus-within {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* ── List section ── */
+  [slot="list"] {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--command-list-py) var(--command-list-px);
+    scrollbar-width: none;
+  }
+
+  [slot="list"]::-webkit-scrollbar { display: none; }
+
+  /* ── Items ── */
+  [role="option"] {
+    display: flex;
+    align-items: center;
+    gap: var(--command-gap);
+    min-height: var(--command-item-height);
+    padding: 0 var(--command-item-px);
+    border-radius: var(--command-item-radius);
+    color: var(--command-item-fg);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      background var(--command-duration) var(--command-easing),
+      color var(--command-duration) var(--command-easing);
+  }
+
+  [role="option"] icon-ui {
+    --a-icon-size: var(--command-font-size);
+    flex-shrink: 0;
+    color: var(--command-fg-muted);
+  }
+
+  [role="option"] [data-text] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [role="option"] [data-shortcut] {
+    color: var(--command-shortcut-fg);
+    font-size: var(--command-shortcut-font-size);
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+
+  /* ── State: hover / active ── */
+  [role="option"]:not([aria-disabled]):hover,
+  [role="option"][data-active] {
+    background: var(--command-item-bg-hover);
+    color: var(--command-item-fg-hover);
+  }
+
+  [role="option"]:not([aria-disabled]):hover icon-ui,
+  [role="option"][data-active] icon-ui {
+    color: var(--command-item-fg-hover);
+  }
+
+  /* ── State: disabled ── */
+  [role="option"][aria-disabled] {
+    color: var(--command-item-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Groups ── */
+  [data-group] {
+    padding: var(--command-list-py) var(--command-list-px);
+  }
+
+  [data-group-label] {
+    padding: var(--command-group-label-py) var(--command-group-label-px);
+    font-size: var(--command-group-font-size);
+    font-weight: var(--command-group-font-weight);
+    color: var(--command-group-fg);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+  }
+
+  /* ── Empty state ── */
+  [data-empty] {
+    padding: var(--command-py) var(--command-px);
+    color: var(--command-empty-fg);
+    text-align: center;
+  }
+
+  /* ── Footer ── */
+  > footer {
+    display: flex;
+    align-items: center;
+    gap: var(--command-px);
+    padding: var(--command-footer-py) var(--command-footer-px);
+    border-top: 1px solid var(--command-border);
+    font-size: var(--command-footer-font-size);
+    color: var(--command-footer-fg);
+    flex-shrink: 0;
+  }
+
+  [data-hint] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--command-hint-gap);
+  }
+
+  [data-hint] kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25em;
+    padding: 0 var(--command-hint-kbd-px);
+    border: 1px solid var(--command-kbd-border);
+    border-radius: var(--command-kbd-radius);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.6;
+    color: var(--command-kbd-fg);
+    background: var(--command-kbd-bg);
+  }
+}