@adia-ai/web-components 0.0.1

package/components/input/input.yaml

@@ -0,0 +1,496 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaInput
+tag: input-ui
+component: Input
+category: input
+version: 1
+description: Text input field with contenteditable or native input. Supports prefix/suffix icons,
+  label, and form participation.
+props:
+  name:
+    description: Form control name for form data submission
+    type: string
+    default: ""
+  icon:
+    description: Leading Phosphor icon name (shortcut for setting `prefix` to an icon tag).
+    type: string
+    default: ""
+  multiline:
+    description: Render a multiline textarea-like surface. Prefer TextArea; kept for back-compat.
+    type: boolean
+    default: false
+  rows:
+    description: Visible row count when multiline is true. Ignored otherwise.
+    type: number
+    default: 3
+  type:
+    description: Input type hint. Password type applies disc masking via -webkit-text-security.
+    type: string
+    default: text
+    enum:
+      - text
+      - email
+      - password
+      - number
+      - tel
+      - url
+      - search
+      - date
+      - datetime-local
+      - time
+      - month
+      - week
+      - color
+  required:
+    description: Marks the field as required for form validation. Sets aria-required.
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction, removes contenteditable, and dims the control
+    type: boolean
+    default: false
+    reflect: true
+  error:
+    description: Validation error message. Set automatically by constraint validation or manually via
+      setInvalid().
+    type: string
+    default: ""
+  label:
+    description: Label text rendered above the input field
+    type: string
+    default: ""
+  maxlength:
+    description: Maximum character length for validation
+    type: number
+    default: null
+  minlength:
+    description: Minimum character length for validation
+    type: number
+    default: null
+  pattern:
+    description: Regex pattern for validation. Tested as ^(?:pattern)$ against the value.
+    type: string
+    default: ""
+  placeholder:
+    description: Placeholder text shown when the input is empty, via ::before content
+    type: string
+    default: ""
+  prefix:
+    description: Prefix text or icon rendered before the text surface (e.g., unit label, search icon)
+    type: string
+    default: ""
+  raw:
+    description: Strips visual chrome (border, background) from the input
+    type: boolean
+    default: false
+    reflect: true
+  readonly:
+    description: Prevents editing while keeping the field focusable. Sets contenteditable=false.
+    type: boolean
+    default: false
+    reflect: true
+  suffix:
+    description: Suffix text rendered after the text surface (e.g., unit like 'kg')
+    type: string
+    default: ""
+  value:
+    description: Current input value, synced with contenteditable text surface
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired on blur after the value has changed (bubbles)
+  input:
+    description: Fired on each keystroke as the user types (bubbles)
+  submit:
+    description: "Fired when the form is submitted."
+slots:
+  leading:
+    description: Leading icon slot, sized to --content-height. Collapses text inline padding when present.
+  text:
+    description: Contenteditable text surface for user input
+  trailing:
+    description: Trailing icon slot, sized to --content-height. Collapses text inline padding when present.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+  - name: focused
+    description: Keyboard focus ring.
+    selector: :focus-visible
+traits:
+  - focusable
+tokens:
+  --density:
+    description: Inherited multiplier for padding
+  --input-background:
+    description: Override default background color
+  --input-border-color:
+    description: Override default border color
+  --input-border-width:
+    description: Override border width
+  --input-content-height:
+    description: Override icon slot and text surface height
+  --input-disabled-opacity:
+    description: Override disabled state opacity
+  --input-error-border-color:
+    description: Override error state border color
+  --input-focus-border-color:
+    description: Override focus state border color
+  --input-focus-ring:
+    description: Override focus ring color
+  --input-font-family:
+    description: Override font family
+  --input-font-size:
+    description: Override font size
+  --input-font-weight:
+    description: Override font weight
+  --input-foreground:
+    description: Override default text color
+  --input-hover-border-color:
+    description: Override hover state border color
+  --input-line-height:
+    description: Override line height
+  --input-padding:
+    description: Override base padding (density-scaled)
+  --input-placeholder-color:
+    description: Override placeholder text color
+  --input-radius:
+    description: Override border radius
+  --input-transition:
+    description: Override transition timing
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chat-interface
+    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Chat"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "messages"
+          ]
+        },
+        {
+          "id": "messages",
+          "component": "Column",
+          "gap": "3",
+          "children": [
+            "msg1",
+            "msg2",
+            "msg3",
+            "msg4"
+          ]
+        },
+        {
+          "id": "msg1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a1",
+            "t1"
+          ]
+        },
+        {
+          "id": "a1",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t1",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Hello! Can you help me with something?"
+        },
+        {
+          "id": "msg2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a2",
+            "t2"
+          ]
+        },
+        {
+          "id": "a2",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t2",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Of course! I'd be happy to help. What do you need?"
+        },
+        {
+          "id": "msg3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a3",
+            "t3"
+          ]
+        },
+        {
+          "id": "a3",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t3",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "I need to build a dashboard layout."
+        },
+        {
+          "id": "msg4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a4",
+            "t4"
+          ]
+        },
+        {
+          "id": "a4",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t4",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Great choice! Let me suggest some patterns for that."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "input-row"
+          ]
+        },
+        {
+          "id": "input-row",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "chat-input",
+            "send-btn"
+          ]
+        },
+        {
+          "id": "chat-input",
+          "component": "Input",
+          "placeholder": "Type a message..."
+        },
+        {
+          "id": "send-btn",
+          "component": "Button",
+          "text": "Send",
+          "icon": "send",
+          "variant": "primary"
+        }
+      ]
+  - name: command-palette
+    description: Command palette card with search input and a list of command options.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "search"
+          ]
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Type a command or search...",
+          "icon": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "opt1",
+            "opt2",
+            "opt3",
+            "opt4",
+            "opt5"
+          ]
+        },
+        {
+          "id": "opt1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i1",
+            "l1"
+          ]
+        },
+        {
+          "id": "i1",
+          "component": "Icon",
+          "name": "file"
+        },
+        {
+          "id": "l1",
+          "component": "Text",
+          "textContent": "Open File"
+        },
+        {
+          "id": "opt2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i2",
+            "l2"
+          ]
+        },
+        {
+          "id": "i2",
+          "component": "Icon",
+          "name": "gear"
+        },
+        {
+          "id": "l2",
+          "component": "Text",
+          "textContent": "Settings"
+        },
+        {
+          "id": "opt3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i3",
+            "l3"
+          ]
+        },
+        {
+          "id": "i3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "l3",
+          "component": "Text",
+          "textContent": "Change Theme"
+        },
+        {
+          "id": "opt4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i4",
+            "l4"
+          ]
+        },
+        {
+          "id": "i4",
+          "component": "Icon",
+          "name": "users"
+        },
+        {
+          "id": "l4",
+          "component": "Text",
+          "textContent": "Manage Users"
+        },
+        {
+          "id": "opt5",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i5",
+            "l5"
+          ]
+        },
+        {
+          "id": "i5",
+          "component": "Icon",
+          "name": "sign-out"
+        },
+        {
+          "id": "l5",
+          "component": "Text",
+          "textContent": "Sign Out"
+        }
+      ]
+keywords:
+  - input
+  - field
+  - chip
+  - tag
+synonyms:
+  tag:
+    - tag
+    - input
+    - badge
+  chip:
+    - badge
+    - tag
+    - input
+  field:
+    - form
+    - create
+    - input
+  input:
+    - form
+    - create
+    - tag
+    - input
+related:
+  - avatar
+  - button
+  - table
+  - pagination
+  - check-box

package/components/inspector/inspector.a2ui.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Inspector.json",
+  "title": "Inspector",
+  "description": "Developer tools pane for inspecting A2UI state.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active": {
+      "description": "Active tab (alias for `value`, accepts same enum).",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Inspector"
+    },
+    "value": {
+      "description": "Active tab. One of 'catalog', 'surface', 'messages', 'code'.",
+      "type": "string",
+      "default": "surface"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {},
+    "examples": [
+      {
+        "description": "Basic Inspector 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\": \"Inspector\"\n  }\n]",
+        "name": "basic-inspector"
+      }
+    ],
+    "keywords": [
+      "inspector"
+    ],
+    "name": "AdiaInspector",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "inspector-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/inspector/inspector.css

@@ -0,0 +1,31 @@
+@scope (inspector-ui) {
+  :where(:scope) {
+    --inspector-pane-font-size: var(--a-ui-tiny);
+    --inspector-border:         1px solid var(--a-border-subtle);
+    --inspector-radius:         var(--a-radius);
+  }
+
+  :scope {
+    display:        flex;
+    flex-direction: column;
+    overflow:       hidden;
+    border:         var(--inspector-border);
+    border-radius:  var(--inspector-radius);
+    min-width:      0;
+  }
+
+  /* Inner tabs-ui fills the host */
+  :scope > tabs-ui {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Tab panes: code-ui children get a scrolling region and tiny UI font */
+  :scope tab-ui > code-ui {
+    display: block;
+    overflow: auto;
+    font-size: var(--inspector-pane-font-size);
+  }
+}