@adia-ai/web-modules 0.8.35 → 0.8.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.8.35",
+  "version": "0.8.37",
   "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {
@@ -231,6 +231,76 @@
       "types": "./css-module.d.ts",
       "default": "./agent-admin/*/*.css"
     },
+    "./billing": {
+      "types": "./billing/index.d.ts",
+      "import": "./billing/index.js",
+      "default": "./billing/index.js"
+    },
+    "./billing/*": {
+      "types": "./billing/*/*.d.ts",
+      "import": "./billing/*/*.js",
+      "default": "./billing/*/*.js"
+    },
+    "./billing/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./billing/*/*.css"
+    },
+    "./dashboard": {
+      "types": "./dashboard/index.d.ts",
+      "import": "./dashboard/index.js",
+      "default": "./dashboard/index.js"
+    },
+    "./dashboard/*": {
+      "types": "./dashboard/*/*.d.ts",
+      "import": "./dashboard/*/*.js",
+      "default": "./dashboard/*/*.js"
+    },
+    "./dashboard/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./dashboard/*/*.css"
+    },
+    "./feedback": {
+      "types": "./feedback/index.d.ts",
+      "import": "./feedback/index.js",
+      "default": "./feedback/index.js"
+    },
+    "./feedback/*": {
+      "types": "./feedback/*/*.d.ts",
+      "import": "./feedback/*/*.js",
+      "default": "./feedback/*/*.js"
+    },
+    "./feedback/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./feedback/*/*.css"
+    },
+    "./onboarding": {
+      "types": "./onboarding/index.d.ts",
+      "import": "./onboarding/index.js",
+      "default": "./onboarding/index.js"
+    },
+    "./onboarding/*": {
+      "types": "./onboarding/*/*.d.ts",
+      "import": "./onboarding/*/*.js",
+      "default": "./onboarding/*/*.js"
+    },
+    "./onboarding/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./onboarding/*/*.css"
+    },
+    "./settings": {
+      "types": "./settings/index.d.ts",
+      "import": "./settings/index.js",
+      "default": "./settings/index.js"
+    },
+    "./settings/*": {
+      "types": "./settings/*/*.d.ts",
+      "import": "./settings/*/*.js",
+      "default": "./settings/*/*.js"
+    },
+    "./settings/*.css": {
+      "types": "./css-module.d.ts",
+      "default": "./settings/*/*.css"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -271,6 +341,29 @@
     "!agent-admin/**/*.examples.html",
     "!agent-admin/**/*.examples.js",
     "!agent-admin/**/*.html",
+    "billing/",
+    "!billing/**/*.examples.html",
+    "!billing/**/*.examples.js",
+    "!billing/**/*.examples.md",
+    "!billing/**/*.html",
+    "dashboard/",
+    "!dashboard/**/*.examples.html",
+    "!dashboard/**/*.examples.js",
+    "!dashboard/**/*.examples.md",
+    "!dashboard/**/*.html",
+    "feedback/",
+    "!feedback/**/*.examples.html",
+    "!feedback/**/*.examples.js",
+    "!feedback/**/*.examples.md",
+    "!feedback/**/*.html",
+    "onboarding/",
+    "!onboarding/**/*.examples.html",
+    "!onboarding/**/*.examples.js",
+    "!onboarding/**/*.html",
+    "settings/",
+    "!settings/**/*.examples.html",
+    "!settings/**/*.examples.js",
+    "!settings/**/*.html",
     "!**/*.test.js",
     "index.js",
     "css-module.d.ts",
@@ -296,11 +389,11 @@
     "./simple/**/*.js"
   ],
   "peerDependencies": {
-    "@adia-ai/web-components": "0.8.35",
-    "@adia-ai/a2ui-runtime": "0.8.35",
-    "@adia-ai/llm": "0.8.35",
-    "@adia-ai/agent": "0.8.35",
-    "@adia-ai/persona": "0.8.35"
+    "@adia-ai/web-components": "0.8.37",
+    "@adia-ai/a2ui": "0.8.37",
+    "@adia-ai/llm": "0.8.37",
+    "@adia-ai/agent": "0.8.37",
+    "@adia-ai/persona": "0.8.37"
   },
   "publishConfig": {
     "access": "public",

package/runtime/a2ui-root/a2ui-root.js

@@ -25,8 +25,8 @@
  *   doc-replaced   — fired after a full doc reset + replay (author-driven mode)
  */
 
-import { defineIfFree } from '../../../web-components/core/register.js';
-import { UIElement } from '../../../web-components/core/element.js';
+import { defineIfFree } from '@adia-ai/web-components/core/register';
+import { UIElement } from '@adia-ai/web-components/core/element';
 import {
   A2UIRenderer,
   registry,
@@ -34,7 +34,7 @@ import {
   wsStream,
   jsonlStream,
   mcpStream,
-} from '@adia-ai/a2ui-runtime';
+} from '@adia-ai/a2ui';
 
 class A2UIRoot extends UIElement {
   static properties = {

package/runtime/gen-root/gen-root.js

@@ -1,8 +1,8 @@
-import { defineIfFree } from '../../../web-components/core/register.js';
-import { UIElement } from '../../../web-components/core/element.js';
-import '../../../web-components/components/chat-thread/chat-thread.js';
-import '../../../web-components/components/canvas/canvas.js';
-import '../../../web-components/components/inspector/inspector.js';
+import { defineIfFree } from '@adia-ai/web-components/core/register';
+import { UIElement } from '@adia-ai/web-components/core/element';
+import '@adia-ai/web-components/components/chat-thread';
+import '@adia-ai/web-components/components/canvas';
+import '@adia-ai/web-components/components/inspector';
 
 /**
  * <gen-root> — Composition shell for chat + canvas generative UI.

package/settings/index.js

@@ -0,0 +1,12 @@
+/**
+ * @adia-ai/web-modules/settings — cluster barrel.
+ *
+ * Settings-tier composites consumed by the settings shell. Each
+ * composite is a data-driven page-level surface that replaces a
+ * hand-rolled HTML template in the consuming app.
+ *
+ * SPEC-063 — integrations-page-ui (searchable integration-card grid).
+ * SPEC-064 — notification-preferences-ui (notification × channels matrix).
+ */
+export { UIIntegrationsPage } from './integrations-page/integrations-page.js';
+export { UINotificationPreferences } from './notification-preferences/notification-preferences.js';

package/settings/integrations-page/integrations-page.a2ui.json

@@ -0,0 +1,274 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/IntegrationsPage.json",
+  "title": "IntegrationsPage",
+  "description": "Module-tier Settings page composite — a searchable, category-grouped\ngrid of <integration-card-ui> tiles (SPEC-062). Owns the\n`integrations` array, the search-filter state, the category /\nstatus grouping, the responsive grid breakpoints, and the empty-state\ncopy. Card-level events (`connect` / `configure` / `disconnect` /\n`retry`) bubble up unchanged with `provider` in detail; the page also\nemits `search` (debounced) and a top-bar `filter-change` when the\nuser picks a status chip.\n\nLives in `packages/web-modules/settings/integrations-page/` per the\nthree-tier architecture — composes multiple primitives, holds layout\nresponsibility, consumed by the settings shell. Replaces the\nhand-rolled `settings/integrations` HTML template per consumer.\n\nSpec: .claude/docs/specs/implementation-ready/SPEC-063-integrations-page.md\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "IntegrationsPage"
+    },
+    "group-by": {
+      "description": "How to bucket cards into sections. `category` groups by the per-item\n`category` key; `status` groups by connection state; `none` renders\na single ungrouped grid.\n",
+      "type": "string",
+      "enum": [
+        "category",
+        "status",
+        "none"
+      ],
+      "default": "category"
+    },
+    "integrations": {
+      "description": "Array of integration descriptors — each item conforms to the\nSPEC-062 <integration-card-ui> prop shape:\n`{ provider, name, logo?, description?, status, category?,\nerror-message? }`. Empty array renders the empty-state slot.\n",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
+    "loading": {
+      "description": "Renders a skeleton grid (6 tiles) instead of cards. Driven by the\nconsumer while the integrations payload is in flight.\n",
+      "$ref": "common_types.json#/$defs/DynamicBoolean"
+    },
+    "search-placeholder": {
+      "description": "Placeholder copy for the built-in search input. Defaults to\n\"Search integrations\".\n",
+      "type": "string",
+      "default": "Search integrations"
+    },
+    "status-filter": {
+      "description": "Optional status filter — restricts the visible cards to one status.\n`all` (default) shows everything; the rest restrict to that status\nbucket. Reflects so consumers can deep-link.\n",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component",
+    "integrations"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"IntegrationsPage\", \"integrations\": [\n  {\"provider\": \"slack\", \"name\": \"Slack\", \"status\": \"available\"}\n]}\n",
+        "why": "Slotted cards are ignored — the page generates cards from the\n`integrations` prop. The page renders empty.\n",
+        "wrong": "{\"component\": \"IntegrationsPage\", \"children\": [\n  {\"component\": \"IntegrationCard\", \"provider\": \"slack\", \"name\": \"Slack\"}\n]}\n"
+      },
+      {
+        "fix": "{\"component\": \"IntegrationsPage\", \"integrations\": [\n  {\"provider\": \"slack\", \"name\": \"Slack\", \"status\": \"available\"}\n]}\n",
+        "why": "Re-implements the page composite with primitives. Loses search,\ngrouping, and empty-state semantics.\n",
+        "wrong": "{\"component\": \"Page\", \"children\": [\n  {\"component\": \"Grid\", \"children\": [\n    {\"component\": \"IntegrationCard\", \"provider\": \"slack\", \"name\": \"Slack\"}\n  ]}\n]}\n"
+      }
+    ],
+    "category": "container",
+    "composes": [
+      "integration-card-ui",
+      "grid-ui",
+      "search-ui",
+      "segmented-ui",
+      "segment-ui",
+      "text-ui"
+    ],
+    "events": {
+      "configure": {
+        "description": "Bubbled from a child <integration-card-ui> while `status=\"connected\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key of the card that fired.",
+            "type": "string"
+          }
+        }
+      },
+      "connect": {
+        "description": "Bubbled from a child <integration-card-ui> when its primary button is pressed while `status=\"available\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key of the card that fired.",
+            "type": "string"
+          }
+        }
+      },
+      "disconnect": {
+        "description": "Bubbled from a child card's overflow menu disconnect item.",
+        "detail": {
+          "provider": {
+            "description": "The provider key of the card that fired.",
+            "type": "string"
+          }
+        }
+      },
+      "filter-change": {
+        "description": "User clicked a status filter chip in the top bar.",
+        "detail": {
+          "status": {
+            "description": "The newly-selected status filter (`all` resets).",
+            "type": "string"
+          }
+        }
+      },
+      "retry": {
+        "description": "Bubbled from a child <integration-card-ui> while `status=\"error\"`.",
+        "detail": {
+          "provider": {
+            "description": "The provider key of the card that fired.",
+            "type": "string"
+          }
+        }
+      },
+      "search": {
+        "description": "Debounced search input change.",
+        "detail": {
+          "query": {
+            "description": "The current search query (lower-cased, trimmed).",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Full integrations page grouped by category (default).",
+        "a2ui": "[\n  {\n    \"id\": \"page\",\n    \"component\": \"IntegrationsPage\",\n    \"group-by\": \"category\",\n    \"integrations\": [\n      {\"provider\": \"slack\",  \"name\": \"Slack\",  \"logo\": \"/integrations/slack.svg\",\n       \"description\": \"Notifications and replies in channels.\",\n       \"status\": \"connected\", \"category\": \"Communication\"},\n      {\"provider\": \"github\", \"name\": \"GitHub\", \"logo\": \"/integrations/github.svg\",\n       \"description\": \"Sync issues and pull requests.\",\n       \"status\": \"available\", \"category\": \"Developer Tools\"},\n      {\"provider\": \"stripe\", \"name\": \"Stripe\", \"logo\": \"/integrations/stripe.svg\",\n       \"description\": \"Charge customers and reconcile invoices.\",\n       \"status\": \"error\", \"category\": \"Payments\",\n       \"error-message\": \"Token expired — re-authenticate.\"}\n    ]\n  }\n]\n",
+        "name": "category-grouped"
+      },
+      {
+        "description": "Loading state — 6 skeleton tiles, no cards.",
+        "a2ui": "[{\"id\": \"page\", \"component\": \"IntegrationsPage\", \"loading\": true}]\n",
+        "name": "loading-skeleton"
+      },
+      {
+        "description": "Empty state — no integrations available.",
+        "a2ui": "[{\"id\": \"page\", \"component\": \"IntegrationsPage\", \"integrations\": []}]\n",
+        "name": "empty-data"
+      }
+    ],
+    "keywords": [
+      "integrations",
+      "integration",
+      "settings",
+      "settings-page",
+      "connections",
+      "third-party",
+      "oauth",
+      "providers",
+      "app-directory",
+      "marketplace"
+    ],
+    "name": "UIIntegrationsPage",
+    "related": [
+      "IntegrationCard",
+      "Grid",
+      "Search",
+      "Segmented",
+      "Page"
+    ],
+    "slots": {
+      "empty": {
+        "description": "Optional override for the empty-state copy. When supplied, replaces\nthe built-in \"No integrations match\" / \"No integrations available\"\nmessages.\n"
+      },
+      "header": {
+        "description": "Optional page header (kicker / title / subtitle). Overrides the\ndefault rendering — when supplied the composite stamps no\nbuilt-in heading.\n"
+      }
+    },
+    "states": [
+      {
+        "description": "Default; renders all groups matching the current filter.",
+        "name": "idle"
+      },
+      {
+        "description": "Skeleton grid; cards hidden.",
+        "attribute": "loading",
+        "name": "loading"
+      },
+      {
+        "description": "Search query yields zero cards.",
+        "attribute": "data-empty-search",
+        "name": "empty-search"
+      },
+      {
+        "description": "`integrations` array is empty.",
+        "attribute": "data-empty-data",
+        "name": "empty-data"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "integrations": [
+        "integration",
+        "connections",
+        "apps",
+        "providers"
+      ],
+      "marketplace": [
+        "integrations",
+        "app-directory",
+        "apps"
+      ],
+      "oauth": [
+        "integration",
+        "connection",
+        "auth"
+      ],
+      "settings": [
+        "settings",
+        "account",
+        "admin"
+      ]
+    },
+    "tag": "integrations-page-ui",
+    "tokens": {
+      "--integrations-page-bg": {
+        "description": "Page background. Defaults to `var(--a-bg)`.",
+        "default": "var(--a-bg)"
+      },
+      "--integrations-page-card-gap": {
+        "description": "Gap inside the grid between cards.",
+        "default": "var(--a-space-4)"
+      },
+      "--integrations-page-fg": {
+        "description": "Primary foreground. Defaults to `var(--a-fg)`.",
+        "default": "var(--a-fg)"
+      },
+      "--integrations-page-fg-muted": {
+        "description": "Secondary foreground for empty-state copy + section meta.",
+        "default": "var(--a-fg-muted)"
+      },
+      "--integrations-page-gap": {
+        "description": "Vertical gap between toolbar / sections / empty-state.",
+        "default": "var(--a-space-5)"
+      },
+      "--integrations-page-grid-min": {
+        "description": "Minimum card width for the auto-fill grid track.",
+        "default": "var(--a-space-12)"
+      },
+      "--integrations-page-px": {
+        "description": "Horizontal padding around the page.",
+        "default": "var(--a-space-5)"
+      },
+      "--integrations-page-py": {
+        "description": "Vertical padding around the page.",
+        "default": "var(--a-space-5)"
+      },
+      "--integrations-page-section-gap": {
+        "description": "Vertical gap between sibling category sections.",
+        "default": "var(--a-space-6)"
+      },
+      "--integrations-page-section-heading-fg": {
+        "description": "Section heading color.",
+        "default": "var(--a-fg-strong)"
+      },
+      "--integrations-page-section-heading-size": {
+        "description": "Section heading font size.",
+        "default": "var(--a-ui-sm)"
+      },
+      "--integrations-page-section-heading-weight": {
+        "description": "Section heading font weight.",
+        "default": "var(--a-weight-medium)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/settings/integrations-page/integrations-page.css

@@ -0,0 +1,177 @@
+/* ═══════════════════════════════════════════════════════════════
+   integrations-page-ui — Module CSS
+
+   Two-block @scope:
+     Block 1 — TOKENS  (:where(:scope))
+     Block 2 — BASE    (:scope + descendant rules)
+
+   Tokens consumed (substrate):
+     --a-bg, --a-fg, --a-fg-muted, --a-fg-strong,
+     --a-border-subtle, --a-bg-muted, --a-radius-md,
+     --a-space-1, --a-space-2, --a-space-3, --a-space-4,
+     --a-space-5, --a-space-6, --a-space-7, --a-space-12,
+     --a-ui-sm, --a-text-lg, --a-weight-medium
+
+   Composition note: layout + spacing only; child primitives
+   (search-ui, segmented-ui, grid-ui, integration-card-ui, text-ui)
+   carry their own chrome via their own scoped stylesheets.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (integrations-page-ui) {
+
+  /* ── Block 1: TOKENS ────────────────────────────────────────── */
+
+  :where(:scope) {
+    --integrations-page-bg:                       var(--md-sys-color-neutral-background);
+    --integrations-page-fg:                       var(--md-sys-color-neutral-on-surface);
+    --integrations-page-fg-muted:                 var(--a-fg-muted);
+    --integrations-page-px:                       var(--a-space-5);
+    --integrations-page-py:                       var(--a-space-5);
+    --integrations-page-gap:                      var(--a-space-5);
+    --integrations-page-section-gap:              var(--a-space-6);
+    --integrations-page-card-gap:                 var(--a-space-4);
+    --integrations-page-grid-min:                 var(--a-space-12);
+    --integrations-page-section-heading-fg:       var(--a-fg-strong);
+    --integrations-page-section-heading-size:     var(--a-ui-sm);
+    --integrations-page-section-heading-weight:   var(--a-weight-medium);
+  }
+
+  /* ── Block 2: BASE ──────────────────────────────────────────── */
+
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    gap: var(--integrations-page-gap);
+    padding:
+      var(--integrations-page-py)
+      var(--integrations-page-px);
+    background: var(--integrations-page-bg);
+    color: var(--integrations-page-fg);
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* ── Header ─────────────────────────────────────────────────── */
+  :scope > [data-part="header"] {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--a-space-3);
+    flex-wrap: wrap;
+  }
+
+  :scope > [data-part="header"] > [data-part="title"] {
+    margin: 0;
+    font-size: var(--a-text-lg);
+    font-weight: var(--a-weight-medium);
+    color: var(--integrations-page-section-heading-fg);
+  }
+
+  /* ── Toolbar (search + status filter) ───────────────────────── */
+  :scope > [data-part="toolbar"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--a-space-3);
+    flex-wrap: wrap;
+  }
+
+  :scope > [data-part="toolbar"] > [data-part="search"] {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  :scope > [data-part="toolbar"] > [data-part="filter"] {
+    flex: 0 0 auto;
+  }
+
+  /* ── Sections wrapper ──────────────────────────────────────── */
+  /* Descendant (not child) combinator: the conditional render branch
+     (sections / skeleton / empty) is wrapped by the template engine in a
+     <span style="display:contents">, so `:scope > [data-part]` never matches
+     (display:contents doesn't collapse the parent→child relationship for
+     selector matching). The static header/toolbar above stay `:scope >`. */
+  :scope [data-part="sections"] {
+    display: grid;
+    gap: var(--integrations-page-section-gap);
+  }
+
+  :scope [data-part="section"] {
+    display: grid;
+    gap: var(--integrations-page-card-gap);
+  }
+
+  :scope [data-part="section-heading"] {
+    color: var(--integrations-page-section-heading-fg);
+    font-size: var(--integrations-page-section-heading-size);
+    font-weight: var(--integrations-page-section-heading-weight);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  /* group-by="none" — single ungrouped grid, no heading slot needed */
+  :scope[group-by="none"] [data-part="section-heading"] {
+    display: none;
+  }
+
+  /* ── Skeleton tiles (loading state) ─────────────────────────── */
+  :scope [data-part="skeleton"] {
+    display: block;
+  }
+
+  :scope [data-part="skeleton-tile"] {
+    display: block;
+    min-height: var(--a-space-12);
+    border: 1px solid var(--md-sys-color-neutral-outline-variant);
+    border-radius: var(--a-radius-md);
+    background: linear-gradient(
+      90deg,
+      var(--a-bg-muted) 0%,
+      var(--md-sys-color-neutral-background) 50%,
+      var(--a-bg-muted) 100%
+    );
+    background-size: 200% 100%;
+    animation: integrations-page-shimmer 1.4s ease-in-out infinite;
+  }
+
+  @keyframes integrations-page-shimmer {
+    0%   { background-position: 100% 0; }
+    100% { background-position: -100% 0; }
+  }
+
+  /* Cards in skeleton state dim further to communicate "not ready" */
+  :scope[loading] integration-card-ui {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* ── Empty state ───────────────────────────────────────────── */
+  :scope [data-part="empty"] {
+    display: grid;
+    gap: var(--a-space-2);
+    place-items: center;
+    text-align: center;
+    padding: var(--a-space-6) var(--a-space-4);
+    border: 1px dashed var(--md-sys-color-neutral-outline-variant);
+    border-radius: var(--a-radius-md);
+    background: var(--a-bg-muted);
+    color: var(--integrations-page-fg-muted);
+  }
+
+  :scope [data-part="empty"] [data-part="empty-heading"] {
+    color: var(--integrations-page-fg);
+  }
+
+  /* ── Responsive — single column at narrow viewports ─────────── */
+  @media (max-width: 480px) {
+    :scope > [data-part="toolbar"] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :scope > [data-part="toolbar"] > [data-part="filter"] {
+      width: 100%;
+      overflow-x: auto;
+    }
+  }
+}