@adia-ai/web-components 0.0.1

package/patterns/adia-chat/css/adia-chat.markdown.css

@@ -0,0 +1,74 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-chat-ui — Markdown prose inside bubbles
+   ═══════════════════════════════════════════════════════════════ */
+
+adia-chat-ui [data-bubble] [data-content] {
+  white-space: normal;
+}
+
+adia-chat-ui [data-bubble] [data-content] p {
+  margin: 0 0 0.5em;
+}
+
+adia-chat-ui [data-bubble] [data-content] p:last-child {
+  margin-bottom: 0;
+}
+
+adia-chat-ui [data-bubble] [data-content] strong {
+  font-weight: var(--chat-weight-semibold);
+}
+
+adia-chat-ui [data-bubble] [data-content] code {
+  background: var(--chat-code-bg);
+  padding: 0.1em 0.15em;
+  border-radius: var(--chat-code-inline-radius);
+  font-family: var(--chat-code-inline-family);
+  font-size: 0.875em;
+}
+
+adia-chat-ui [data-bubble] [data-content] pre {
+  background: var(--chat-code-bg);
+  border-radius: var(--chat-code-radius);
+  padding: var(--chat-code-block-px);
+  overflow-x: auto;
+  margin: var(--chat-code-block-my) 0;
+  font-size: var(--chat-code-block-font);
+  line-height: 1.5;
+}
+
+adia-chat-ui [data-bubble] [data-content] pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+adia-chat-ui [data-bubble] [data-content] ul,
+adia-chat-ui [data-bubble] [data-content] ol {
+  margin: 0.25em 0;
+  padding-inline-start: 1.25em;
+}
+
+adia-chat-ui [data-bubble] [data-content] li {
+  margin-bottom: 0.15em;
+}
+
+adia-chat-ui [data-bubble] [data-content] a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+adia-chat-ui [data-bubble] [data-content] h1,
+adia-chat-ui [data-bubble] [data-content] h2,
+adia-chat-ui [data-bubble] [data-content] h3,
+adia-chat-ui [data-bubble] [data-content] h4 {
+  font-weight: var(--chat-weight-semibold);
+  margin: 0.75em 0 0.25em;
+}
+
+adia-chat-ui [data-bubble] [data-content] h1:first-child,
+adia-chat-ui [data-bubble] [data-content] h2:first-child,
+adia-chat-ui [data-bubble] [data-content] h3:first-child {
+  margin-top: 0;
+}

package/patterns/adia-chat/css/adia-chat.messages.css

@@ -0,0 +1,87 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-chat-ui — Message bubbles
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Message row */
+adia-chat-ui [data-role] {
+  display: flex;
+  gap: var(--chat-header-gap);
+  align-items: flex-end;
+  max-width: var(--chat-message-max-width);
+}
+
+adia-chat-ui [data-role="user"] {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+adia-chat-ui [data-role="assistant"] {
+  align-self: flex-start;
+}
+
+/* Avatar */
+adia-chat-ui [data-role] [data-avatar] {
+  width: var(--chat-avatar-size);
+  height: var(--chat-avatar-size);
+  border-radius: var(--chat-avatar-radius);
+  background: var(--chat-avatar-bg);
+  color: var(--chat-avatar-fg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--chat-avatar-font);
+  font-weight: var(--chat-avatar-weight);
+  flex-shrink: 0;
+}
+
+/* Bubble */
+adia-chat-ui [data-role] [data-bubble] {
+  padding: var(--chat-assistant-py) var(--chat-assistant-px);
+  border-radius: var(--chat-assistant-radius);
+  font-size: var(--chat-font-size);
+  line-height: var(--chat-line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+adia-chat-ui [data-role] [data-bubble] > :first-child { margin-block-start: 0; }
+adia-chat-ui [data-role] [data-bubble] > :last-child { margin-block-end: 0; }
+
+/* User bubble */
+adia-chat-ui [data-role="user"] [data-bubble] {
+  background: var(--chat-user-bg);
+  color: var(--chat-user-fg);
+  padding: var(--chat-user-py) var(--chat-user-px);
+  border-radius: var(--chat-user-radius);
+  border-bottom-right-radius: var(--chat-user-tail-radius);
+}
+
+/* Assistant bubble */
+adia-chat-ui [data-role="assistant"] [data-bubble] {
+  background: var(--chat-assistant-bg);
+  color: var(--chat-assistant-fg);
+  border-bottom-left-radius: var(--chat-assistant-tail-radius);
+}
+
+/* Error message */
+adia-chat-ui [data-role="error"] {
+  align-self: center;
+  max-width: none;
+  display: flex;
+  align-items: center;
+  gap: var(--chat-error-gap);
+  color: var(--chat-error-fg);
+  font-size: var(--chat-error-font);
+}
+
+/* Message actions (copy, regenerate) */
+adia-chat-ui [data-role] [data-actions] {
+  display: flex;
+  gap: var(--chat-actions-gap);
+  opacity: 0;
+  transition: opacity var(--chat-actions-duration) var(--chat-actions-easing);
+}
+
+adia-chat-ui [data-role]:hover [data-actions] {
+  opacity: 1;
+}

package/patterns/adia-chat/css/adia-chat.streaming.css

@@ -0,0 +1,30 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-chat-ui — Streaming states (cursor, thinking)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Blinking cursor during streaming */
+adia-chat-ui [data-cursor] {
+  display: inline-block;
+  width: var(--chat-cursor-width);
+  height: 1em;
+  background: var(--chat-cursor-color);
+  margin-inline-start: 1px;
+  vertical-align: text-bottom;
+  animation: adia-chat-n-blink var(--chat-cursor-speed) step-end infinite;
+}
+
+@keyframes adia-chat-n-blink {
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  adia-chat-ui [data-cursor] {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+/* Thinking indicator */
+adia-chat-ui [data-role="assistant"][data-thinking] [data-bubble] {
+  color: var(--chat-thinking-fg);
+}

package/patterns/adia-chat/css/adia-chat.tokens.css

@@ -0,0 +1,95 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-chat-ui — Design tokens
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(adia-chat-ui) {
+  /* Layout */
+  --chat-bg:                    var(--a-canvas-0);
+  --chat-border:                unset;
+  --chat-radius:                unset;
+
+  /* Header */
+  --chat-header-height:         48px;
+  --chat-header-px:             var(--a-space-4);
+  --chat-header-gap:            var(--a-space-2);
+  --chat-header-border:         1px solid var(--a-border-subtle);
+
+  /* Messages area */
+  --chat-messages-px:           var(--a-space-4);
+  --chat-messages-py:           var(--a-space-4);
+  --chat-messages-gap:          var(--a-space-3);
+  --chat-message-max-width:     85%;
+
+  /* User bubble */
+  --chat-user-bg:               var(--a-primary);
+  --chat-user-fg:               var(--a-primary-fg);
+  --chat-user-radius:           var(--a-radius-md);
+  --chat-user-tail-radius:      var(--a-radius-sm);
+  --chat-user-px:               var(--a-space-3);
+  --chat-user-py:               var(--a-space-1);
+
+  /* Assistant bubble */
+  --chat-assistant-bg:          var(--a-canvas-2);
+  --chat-assistant-fg:          var(--a-fg);
+  --chat-assistant-radius:      var(--a-radius-lg);
+  --chat-assistant-tail-radius: var(--a-radius-sm);
+  --chat-assistant-px:          var(--a-space-3);
+  --chat-assistant-py:          var(--a-space-1);
+
+  /* Avatar */
+  --chat-avatar-size:           1.75rem;
+  --chat-avatar-bg:             var(--chat-assistant-bg);
+  --chat-avatar-fg:             var(--chat-assistant-fg);
+  --chat-avatar-font:           var(--a-ui-sm);
+  --chat-avatar-weight:         var(--a-weight-semibold);
+
+  /* Streaming cursor */
+  --chat-cursor-width:          2px;
+  --chat-cursor-color:          currentColor;
+  --chat-cursor-speed:          0.8s;
+
+  /* Footer / input area */
+  --chat-footer-px:             var(--a-space-3);
+  --chat-footer-py:             var(--a-space-3);
+
+  /* Message actions */
+  --chat-actions-gap:           var(--a-space-1);
+
+  /* Code blocks inside messages */
+  --chat-code-bg:               var(--a-canvas-2);
+  --chat-code-radius:           var(--a-radius-md);
+
+  /* Typography */
+  --chat-font-size:             var(--a-ui-size);
+  --chat-line-height:           var(--a-leading-normal);
+  --chat-weight-semibold:       var(--a-weight-semibold);
+
+  /* Header typography */
+  --chat-header-name-font:      var(--a-ui-lg);
+  --chat-header-status-font:    var(--a-ui-md);
+  --chat-header-status-fg:      var(--a-fg-muted);
+
+  /* Error */
+  --chat-error-gap:             var(--a-space-2);
+  --chat-error-fg:              var(--a-danger-strong);
+  --chat-error-font:            var(--a-ui-sm);
+
+  /* Message actions */
+  --chat-actions-duration:      var(--a-duration-fast);
+  --chat-actions-easing:        var(--a-easing);
+
+  /* Avatar */
+  --chat-avatar-radius:         var(--a-radius-full);
+
+  /* Streaming — thinking */
+  --chat-thinking-fg:           var(--a-fg-muted);
+
+  /* Markdown — inline code */
+  --chat-code-inline-radius:    var(--a-radius-sm);
+  --chat-code-inline-family:    var(--a-font-family-code);
+
+  /* Markdown — pre blocks */
+  --chat-code-block-px:         var(--a-space-3);
+  --chat-code-block-my:         var(--a-space-2);
+  --chat-code-block-font:       var(--a-ui-sm);
+}

package/patterns/adia-chat/index.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AdiaUI — Chat</title>
+  <link rel="stylesheet" href="../../styles/tokens.css" />
+  <link rel="stylesheet" href="../../styles/styles.css" />
+  <link rel="stylesheet" href="adia-chat.css" />
+  <style>
+    body {
+      font-family: var(--a-font-family);
+      margin: 0;
+      height: 100dvh;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+
+<adia-chat-ui id="chat" proxy-url="/api/chat" model="claude-haiku-4-5-20251001"
+  style="flex:1; border:none; border-radius:0;">
+  <header>
+    <span data-chat-name>Factory Chat</span>
+    <span data-chat-status></span>
+  </header>
+  <section data-chat-messages>
+    <empty-state-ui data-chat-empty icon="chat-circle"
+      heading="AdiaUI Chat"
+      description="Type a message to start a conversation. Connects to LLM model via proxy if available.">
+    </empty-state-ui>
+  </section>
+  <footer>
+    <chat-input-ui data-chat-input placeholder="Message Claude..."></chat-input-ui>
+  </footer>
+</adia-chat-ui>
+
+<script type="module">
+  import '../../components/index.js';
+  import '../../patterns/index.js';
+
+  const chat = document.getElementById('chat');
+
+  // Wire the model picker inside chat-input-ui. Same list as
+  // /site/playground/gen-ui — extract to a shared constant when a third
+  // consumer appears.
+  customElements.whenDefined('chat-input-ui').then(() => {
+    const chatInput = chat.querySelector('[data-chat-input]');
+    if (!chatInput) return;
+    chatInput.models = [
+      { label: 'Anthropic', options: [
+        { value: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5' },
+        { value: 'claude-sonnet-4-6',          label: 'Sonnet 4.6' },
+      ]},
+      { label: 'OpenAI', options: [
+        { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
+      ]},
+      { label: 'Google', options: [
+        { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+      ]},
+    ];
+    chatInput.model = 'claude-haiku-4-5-20251001';
+    // Keep <adia-chat-ui>'s `model` attribute in lockstep with the chat-input
+    // picker so every send uses the user's current selection.
+    chatInput.addEventListener('change', () => {
+      if (chatInput.model) chat.setAttribute('model', chatInput.model);
+    });
+  });
+
+  // Test proxy availability — fallback to simulated if not running
+  fetch('/api/chat', { method: 'OPTIONS' }).catch(() => {
+    chat.removeAttribute('proxy-url');
+    const empty = chat.querySelector('[data-chat-empty]');
+    if (empty) empty.setAttribute('description', 'No API proxy detected. Run `node server.js` with API keys. Responses are simulated.');
+
+    chat.addEventListener('submit', async (e) => {
+      const { text } = e.detail;
+      chat.appendMessage({ role: 'user', content: text });
+      chat.appendMessage({ role: 'assistant', content: '' });
+      chat.startStreaming();
+
+      const response = `You said: "${text}"\n\nThis is a **simulated** response.\n\n\`\`\`js\nconsole.log("Hello from AdiaUI!");\n\`\`\`\n\nStart the proxy with \`node server.js\` for real LLM responses.`;
+      for (const char of response) {
+        await new Promise(r => setTimeout(r, 12));
+        chat.appendChunk(char);
+      }
+      chat.stopStreaming();
+    });
+  });
+</script>
+</body>
+</html>

package/patterns/adia-editor/adia-editor.a2ui.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Editor.json",
+  "title": "Editor",
+  "description": "Behavior-only editor shell for design-tool layouts. Author provides the\nstructural DOM — header (topbar), [data-editor-body] with pane-ui children\n([data-left], [data-right]), [data-canvas] for the central surface, and\na footer (statusbar). adia-editor wires select-ui[data-options] for\nJSON-parsed option lists.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Editor"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [],
+    "keywords": [
+      "adia-editor",
+      "editor",
+      "design-tool",
+      "canvas-shell"
+    ],
+    "name": "AdiaEditorElement",
+    "related": [
+      "Pane",
+      "Select",
+      "Toolbar"
+    ],
+    "slots": {
+      "default": {
+        "description": "Author provides header, [data-editor-body] wrapping pane-ui[data-left], [data-canvas], pane-ui[data-right], and an optional footer."
+      }
+    },
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "adia-editor-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/patterns/adia-editor/adia-editor.css

@@ -0,0 +1,6 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-editor — Pattern component CSS
+   ═══════════════════════════════════════════════════════════════ */
+
+@import "./css/adia-editor.tokens.css";
+@import "./css/adia-editor.layout.css";

package/patterns/adia-editor/adia-editor.js

@@ -0,0 +1,56 @@
+import { AdiaElement } from '@core/element.js';
+
+/**
+ * <adia-editor-ui> — Editor layout pattern.
+ *
+ * Behavior-only orchestrator for design tool UIs:
+ * topbar, navigator pane, center canvas, inspector pane, bottombar.
+ *
+ * Structure:
+ *   <adia-editor-ui>
+ *     <header>
+ *       <span data-title>Editor</span>
+ *       <span data-spacer></span>
+ *       <button-ui icon="gear" variant="ghost" size="sm"></button-ui>
+ *     </header>
+ *     <div data-editor-body>
+ *       <pane-ui data-left resizable>
+ *         <header>Navigator</header>
+ *         <section>...tree, layers...</section>
+ *       </pane-ui>
+ *       <div data-canvas>
+ *         ...canvas content...
+ *       </div>
+ *       <pane-ui data-right resizable>
+ *         <header>Inspector</header>
+ *         <section>...form fields...</section>
+ *         <footer>...actions...</footer>
+ *       </pane-ui>
+ *     </div>
+ *     <footer>
+ *       <span>Ready</span>
+ *       <span data-spacer></span>
+ *       <span>100%</span>
+ *     </footer>
+ *   </adia-editor-ui>
+ */
+class AdiaEditorElement extends AdiaElement {
+  static template = () => null;
+
+  connected() {
+    // Wire select options if present
+    this.#wireSelects();
+  }
+
+  #wireSelects() {
+    for (const sel of this.querySelectorAll('select-ui[data-options]')) {
+      try {
+        const opts = JSON.parse(sel.getAttribute('data-options'));
+        sel.options = opts;
+      } catch { /* skip invalid */ }
+    }
+  }
+}
+
+customElements.define('adia-editor-ui', AdiaEditorElement);
+export { AdiaEditorElement };

package/patterns/adia-editor/adia-editor.yaml

@@ -0,0 +1,36 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaEditorElement
+tag: adia-editor-ui
+component: Editor
+category: container
+version: 1
+description: |
+  Behavior-only editor shell for design-tool layouts. Author provides the
+  structural DOM — header (topbar), [data-editor-body] with pane-ui children
+  ([data-left], [data-right]), [data-canvas] for the central surface, and
+  a footer (statusbar). adia-editor wires select-ui[data-options] for
+  JSON-parsed option lists.
+
+props: {}   # Pure wrapper — no own props.
+
+events: {}   # Child interactions bubble through.
+
+slots:
+  default:
+    description: >-
+      Author provides header, [data-editor-body] wrapping pane-ui[data-left],
+      [data-canvas], pane-ui[data-right], and an optional footer.
+
+states:
+  - name: idle
+    description: Default.
+
+traits: []
+
+a2ui:
+  rules:
+    - adia-editor is a layout skeleton. Children must follow the documented
+      structural DOM; the element wires behavior, not content.
+
+keywords: [adia-editor, editor, design-tool, canvas-shell]
+related: [Pane, Select, Toolbar]

package/patterns/adia-editor/css/adia-editor.layout.css

@@ -0,0 +1,86 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-editor-ui — Layout
+
+   Structure:
+     adia-editor-ui
+       header                — topbar
+       [data-editor-body]    — flex row: pane | canvas | pane
+         pane-ui              — left navigator
+         [data-canvas]       — center canvas
+         pane-ui              — right inspector
+       footer                — bottombar
+   ═══════════════════════════════════════════════════════════════ */
+
+adia-editor-ui {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--editor-bg);
+}
+
+/* ── Top bar ── */
+adia-editor-ui > header {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  min-height: var(--editor-bar-height);
+  padding: 0 var(--editor-bar-px);
+  border-bottom: var(--editor-border);
+  font-size: var(--editor-bar-font);
+  color: var(--editor-bar-fg);
+  flex-shrink: 0;
+}
+
+adia-editor-ui > header [data-title] {
+  font-weight: var(--editor-title-weight);
+  color: var(--editor-bar-fg-strong);
+}
+
+/* ── Body: pane | canvas | pane ── */
+adia-editor-ui > [data-editor-body] {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ── Canvas ── */
+adia-editor-ui [data-canvas] {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--editor-canvas-bg);
+  color: var(--editor-canvas-fg);
+}
+
+/* ── Panes ── */
+adia-editor-ui pane-ui {
+  --pane-radius: 0;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+adia-editor-ui pane-ui[data-left] {
+  width: var(--editor-pane-width-left);
+}
+
+adia-editor-ui pane-ui[data-right] {
+  width: var(--editor-pane-width-right);
+}
+
+/* ── Bottom bar ── */
+adia-editor-ui > footer {
+  display: flex;
+  align-items: center;
+  gap: var(--editor-bar-gap);
+  min-height: var(--editor-bar-height);
+  padding: 0 var(--editor-bar-px);
+  border-top: var(--editor-border);
+  font-size: var(--editor-bar-font);
+  color: var(--editor-bar-fg);
+  flex-shrink: 0;
+}

package/patterns/adia-editor/css/adia-editor.tokens.css

@@ -0,0 +1,28 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-editor-ui — Design tokens
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(adia-editor-ui) {
+  /* Shell */
+  --editor-bg:              var(--a-canvas-0);
+  --editor-border:          1px solid var(--a-border-subtle);
+
+  /* Top/bottom bars */
+  --editor-bar-height:      36px;
+  --editor-bar-px:          var(--a-space-3);
+  --editor-bar-gap:         var(--a-space-2);
+  --editor-bar-font:        var(--a-ui-size);
+  --editor-bar-fg:          var(--a-fg-subtle);
+  --editor-bar-fg-strong:   var(--a-fg);
+
+  /* Canvas */
+  --editor-canvas-bg:       var(--a-bg);
+  --editor-canvas-fg:       var(--a-fg-muted);
+
+  /* Typography */
+  --editor-title-weight:     var(--a-weight-medium);
+
+  /* Panes */
+  --editor-pane-width-left:  240px;
+  --editor-pane-width-right: 280px;
+}