@adia-ai/web-components 0.0.28 → 0.0.33

package/patterns/app-shell/css/app-shell.sidebar.css

@@ -1,161 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Sidebar
-
-   Resizable side panels with header/section/footer structure.
-   Acts as a CSS container query provider (container-name: sidebar)
-   so children can adapt to collapsed width via @container.
-   ═══════════════════════════════════════════════════════════════ */
-
-[data-sidebar] {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  min-width: var(--page-sidebar-min-width);
-  max-width: var(--page-sidebar-max-width);
-  min-height: 0;
-  font-size: var(--page-sidebar-font);
-  position: relative;
-  container-type: inline-size;
-  container-name: sidebar;
-  transition: width var(--page-duration) var(--page-easing);
-}
-
-/* ── Resize handle ──
-   6px invisible hit area straddling the sidebar edge.
-   Accent color on hover/drag. */
-[data-sidebar] > [data-resize] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 6px;
-  cursor: col-resize;
-  background: transparent;
-  transition: background var(--page-duration-fast) var(--page-easing);
-  z-index: 2;
-}
-
-[data-sidebar="leading"] > [data-resize] { right: -3px; }
-[data-sidebar="trailing"] > [data-resize] { left: -3px; }
-
-[data-sidebar] > [data-resize]:hover {
-  background: var(--page-sidebar-resize-accent);
-}
-
-[data-sidebar][data-resizing] > [data-resize] {
-  background: var(--page-sidebar-resize-accent);
-}
-
-/* During drag: disable transition + text selection */
-[data-sidebar][data-resizing] {
-  user-select: none;
-  transition: none;
-}
-
-/* ── Sidebar widths ── */
-[data-sidebar="leading"] {
-  width: var(--page-sidebar-width-leading);
-}
-
-[data-sidebar="trailing"] {
-  width: var(--page-sidebar-width-trailing);
-}
-
-/* ── Sidebar header / footer ──
-   Share the same slot contract as > main > header/footer (see
-   app-shell.main.css top-of-file comment): icon / heading /
-   description / action. Sidebar chromes are typically single-child
-   (a workspace-select or user-select) so the slot rules rarely come
-   into play — but they stay consistent for authors that compose
-   richer sidebar chromes. */
-[data-sidebar] > header,
-[data-sidebar] > footer {
-  display: flex;
-  align-items: center;
-  gap: var(--page-sidebar-gap);
-  padding: var(--page-sidebar-px);
-  flex-shrink: 0;
-  overflow: hidden;
-  min-width: 0;
-}
-
-[data-sidebar] > header {
-  min-height: var(--page-header-height);
-  border-bottom: var(--page-border);
-}
-
-[data-sidebar] > footer {
-  min-height: var(--page-header-height);
-  margin-top: auto;
-  border-top: var(--page-border);
-}
-
-[data-sidebar] > header > [slot="icon"],
-[data-sidebar] > footer > [slot="icon"] {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  color: var(--page-header-fg-muted);
-}
-[data-sidebar] > header > [slot="heading"],
-[data-sidebar] > footer > [slot="heading"] {
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg);
-}
-[data-sidebar] > header > [slot="description"],
-[data-sidebar] > footer > [slot="description"] {
-  color: var(--page-header-fg-muted);
-  font-size: var(--a-ui-sm);
-}
-[data-sidebar] > header > [slot="action"],
-[data-sidebar] > footer > [slot="action"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-[data-sidebar] > header > [slot="action"] ~ [slot="action"],
-[data-sidebar] > footer > [slot="action"] ~ [slot="action"] {
-  margin-inline-start: 0;
-}
-/* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
-[data-sidebar] > header > [slot="action-leading"],
-[data-sidebar] > footer > [slot="action-leading"] {
-  display: flex;
-  align-items: center;
-  gap: var(--page-actions-gap);
-  flex-shrink: 0;
-  margin-inline-end: auto;
-}
-
-/* ── Sidebar section (scrollable body) ── */
-[data-sidebar] > section {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--page-sidebar-px);
-  min-height: 0;
-  scrollbar-width: none;
-}
-
-[data-sidebar] > section::-webkit-scrollbar { display: none; }
-
-/* span[slot="pad"] — opt-in padding wrapper for sidebar content
-   that needs inset (e.g. trailing sidebar inspector fields) */
-[data-sidebar] span[slot="pad"] {
-  display: block;
-  padding: var(--page-sidebar-px);
-}
-
-/* Reset app-nav-ui border/padding inside sidebars */
-[data-sidebar] app-nav-ui {
-  border: none;
-  padding: 0;
-}
-
-/* Sidebar-level divider (outside app-nav-ui scope) */
-[data-sidebar] > section > hr[data-nav-divider] {
-  border: none;
-  height: 1px;
-  background: var(--page-sidebar-divider-bg);
-  margin: var(--page-sidebar-gap) var(--page-sidebar-px);
-}

package/patterns/app-shell/css/app-shell.templates.css

@@ -1,214 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Page templates (headers, body layouts, form sections)
-
-   Structure:
-     <article data-content-root>
-       [data-content-header]   — sticky top band, border-bottom
-         <header>...</header>  — centered column (padding + max-width)
-       [data-content-body]     — scrollable flex column (size only)
-         <section>...</section> — centered column (padding + max-width + gap)
-       [data-content-footer]   — sticky bottom band, border-top
-         <footer>...</footer>  — centered column (padding + max-width)
-
-   The outer `[data-*]` wrapper owns full-width concerns (sticky
-   position, border, background, scroll sizing). The inner semantic
-   element (<header>/<section>/<footer>) owns the centered reading
-   column (max-width, gutter, rhythm). Full-bleed content (iframes,
-   split panes) can skip <section> and sit directly in
-   [data-content-body] to opt out of the column.
-   ═══════════════════════════════════════════════════════════════ */
-
-/* ── Content root ── */
-[data-content-root] {
-  position: relative;
-  isolation: isolate;
-  min-block-size: 100%;
-}
-
-/* Fill-mode: when the body contains only an iframe (or explicit opt-in),
-   make the root a flex column that stretches to the scroll section's
-   visible height, so [data-content-body] flex: 1 resolves against a real
-   size and the iframe's block-size: 100% can fill. Prose pages (natural
-   root height + section scroll) are unaffected. */
-[data-content-root]:has(> [data-content-body] > iframe:only-child),
-[data-content-root][data-fill] {
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
-  min-block-size: 0;
-}
-
-/* ── Scaffold content columns ─────────────────────────────────────
-   Max-width + centering + horizontal inset are properties of the
-   NAMED inner semantic elements, not the [data-*] wrappers.
-
-   Who owns what:
-     • [data-content-header] / [data-content-footer]
-         — own sticky position, border, background (full-width band).
-     • [data-content-body]
-         — owns flex sizing + scroll; no padding, no max-width.
-     • Inner <header> / <section> / <footer>
-         — own max-width, margin-inline: auto, padding (centered column).
-     • Cards / modals / drawers
-         — own margin/padding via their own CSS; never inherit this.
-   ─────────────────────────────────────────────────────────────── */
-[data-content-header] > header,
-[data-content-body] > section,
-[data-content-footer] > footer {
-  max-width: var(--page-content-max-width);
-  margin-inline: auto;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-[data-content-header] > header,
-[data-content-footer] > footer {
-  padding-inline: var(--page-content-inset);
-}
-
-/* Full-width escape hatch — stretch the centered column to 100%. */
-[data-content-full] [data-content-header] > header,
-[data-content-full] [data-content-body] > section,
-[data-content-full] [data-content-footer] > footer,
-[data-content-header][data-content-full] > header,
-[data-content-body][data-content-full] > section,
-[data-content-footer][data-content-full] > footer,
-[data-content-header] > header[data-content-full],
-[data-content-body] > section[data-content-full],
-[data-content-footer] > footer[data-content-full] {
-  max-width: 100%;
-}
-
-/* ── Content header — sticky top, border-bottom ── */
-[data-content-header] {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  border-bottom: var(--page-content-border);
-  background: var(--page-content-bg);
-}
-
-[data-content-header] > header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--page-header-gap);
-  padding-block: var(--page-content-inset) var(--page-header-gap);
-}
-
-/* When tabs are present, remove bottom padding so tabs sit flush against border */
-[data-content-header] > header:has(tabs-ui) {
-  padding-bottom: 0;
-}
-
-/* Variant: non-sticky, no border, transparent bg */
-[data-content-header]:has(> header[data-flush]) {
-  position: static;
-  border-bottom: none;
-  background: none;
-}
-
-/* Variant: compact padding (for dense headers) */
-[data-content-header] > header[data-compact] {
-  padding-block: var(--page-header-px);
-}
-
-/* Title row: h1 left, actions right */
-[data-content-header] > header > div:first-child {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--page-header-gap);
-}
-
-/* h1 + description — typography handled by [variant] attribute */
-[data-content-header] h1 { margin: 0; }
-[data-content-header] > header > p { margin: 0; }
-
-/* ── Content body ──
-   Wrapper: flex column that fills the scroll section. No padding,
-   no max-width — those live on the inner <section>. Non-section
-   children (iframes, split panes) go full-bleed. */
-[data-content-body] {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Inner <section> — the centered reading column. Owns gutter and
-   section-to-section rhythm. Stacks with flex gap so direct children
-   (<card-ui>, <grid-ui>, nested <section>, …) have zero wrapper margin. */
-[data-content-body] > section {
-  padding: var(--page-content-inset);
-  display: flex;
-  flex-direction: column;
-  gap: var(--page-section-gap, var(--a-space-8));
-}
-
-/* iframe-as-page-content: fill the body.
-   display: block kills the 4-5px inline-descender gap. */
-[data-content-body] > iframe {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-  border: 0;
-  flex: 1;
-}
-
-/* ── Content footer — sticky bottom, border-top ── */
-[data-content-footer] {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-  border-top: var(--page-content-border);
-  background: var(--page-content-bg);
-}
-
-[data-content-footer] > footer {
-  padding: var(--page-content-inset);
-}
-
-/* ── Tab content ──
-   Marker for the active tab's form sections. Gutter/padding is
-   owned by the <article> wrapper. */
-
-/* ── Form sections ──
-   Each section: kicker-styled h2 label, then [data-section] grid. */
-[data-tab-content] > section {
-  margin-bottom: var(--page-section-gap);
-}
-
-/* h2 — kicker role (small, uppercase, muted, letter-spaced) */
-[data-tab-content] > section > h2 {
-  font-size: var(--page-section-size);
-  font-weight: var(--page-section-weight);
-  line-height: var(--page-section-leading);
-  letter-spacing: var(--page-section-tracking);
-  text-transform: var(--page-section-case);
-  color: var(--page-section-color);
-  margin: 0 0 var(--page-section-mb);
-  padding-bottom: var(--page-section-pb);
-  border-bottom: var(--page-content-border);
-}
-
-/* Two-column settings layout: description left, controls right */
-[data-tab-content] > section > [data-section] {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: var(--page-section-gap) var(--page-header-gap);
-}
-
-/* h3 — subsection role */
-[data-tab-content] > section > [data-section] > aside > h3 {
-  font-size: var(--page-subsection-size);
-  font-weight: var(--page-subsection-weight);
-  color: var(--page-subsection-color);
-  margin: 0 0 var(--page-section-pb);
-}
-
-/* Aside description */
-[data-tab-content] > section > [data-section] > aside > p {
-  margin: 0;
-}

package/patterns/app-shell/css/app-shell.tokens.css

@@ -1,119 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — Design tokens
-
-   Declared on :where(app-shell-ui) for zero specificity.
-   All children (main + sidebars) inherit these.
-
-   Token groups:
-     --page-*          — shell, borders, backgrounds
-     --page-header-*   — topbar/footer bars
-     --page-sidebar-*  — sidebar geometry
-     --page-content-*  — scroll area, sticky header, typography
-     --page-section-*  — form section headings
-   ═══════════════════════════════════════════════════════════════ */
-
-:where(app-shell-ui) {
-  /* Shell — root backgrounds and border shorthand */
-  --page-bg:                var(--a-canvas-1);       /* chrome/sidebar bg */
-  --page-border:            1px solid var(--a-border-subtle); /* chrome borders (killed by "borderless") */
-  --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
-
-  /* Header / footer bars — shared by topbar + bottombar */
-  --page-header-height:     var(--a-chrome-app-header-height);
-  --page-header-px:         var(--a-space-3);
-  --page-header-gap:        var(--a-space-3);
-  --page-header-font:       var(--a-ui-size);
-  --page-header-fg-muted:   var(--a-fg-muted);         /* footer text, section labels */
-
-  /* Sidebar — geometry and constraints */
-  --page-sidebar-px:        var(--a-space-1);        /* inner padding for header/footer/section */
-  --page-sidebar-gap:       var(--a-space-1);        /* gap between sidebar header/footer items */
-  --page-sidebar-font:      var(--a-ui-size);
-  --page-sidebar-min-width: 48px;                    /* collapsed icon-only width */
-  --page-sidebar-max-width: 480px;                   /* drag resize upper bound */
-  --page-sidebar-resize-accent: var(--a-accent); /* resize handle color */
-  --page-sidebar-divider-bg: var(--a-border-subtle); /* hr divider inside sidebar */
-  --page-sidebar-width-leading:  clamp(var(--page-sidebar-min-width), 200px, 240px);
-  --page-sidebar-width-trailing: clamp(var(--page-sidebar-min-width), 200px, 240px);
-
-  /* Content area — scroll region inside main */
-  --page-content-bg:        var(--a-canvas-0);       /* content surface (lighter than chrome) */
-  --page-content-radius:    var(--a-radius-lg);      /* used by "rounded" mode */
-  --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
-  --page-content-max-width: 1540px;                   /* max-width for content children */
-  --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
-  --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
-
-  /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
-  --page-section-gap:             var(--a-space-6);
-  /* Within-section block rhythm (h2 / [data-note] / code-ui / artifact stack). */
-  --page-block-gap:               var(--a-space-4);
-  /* h2 → immediately-following deck/subtitle pair (auto-stamped <header>). */
-  --page-deck-gap:                var(--a-space-1);
-  --page-section-size:            var(--a-kicker-size);
-  --page-section-weight:          var(--a-kicker-weight);
-  --page-section-leading:         var(--a-kicker-leading);
-  --page-section-tracking:        var(--a-kicker-tracking);
-  --page-section-case:            var(--a-kicker-case);
-  --page-section-color:           var(--a-kicker-color);
-  --page-section-mb:              var(--a-space-3);
-  --page-section-pb:              var(--a-space-2);
-
-  /* Sub-section labels (e.g. "Details") — maps to "subsection" typography role */
-  --page-subsection-size:         var(--a-subsection-size);
-  --page-subsection-weight:       var(--a-subsection-weight);
-  --page-subsection-color:        var(--a-subsection-color);
-
-  /* Sidebar collapsed — icon/avatar sizes when sidebar is narrow */
-  --page-sidebar-collapsed-icon:   1.0625rem;   /* select leading icon */
-  --page-sidebar-collapsed-avatar: 1.5rem;      /* select leading avatar */
-
-  /* Helpers — layout utility spacing */
-  --page-actions-gap:       var(--a-space-2);    /* inline action group gap */
-  --page-grid-gap:          var(--a-space-3);    /* grid/col/row default gap */
-
-  /* Animation */
-  --page-duration:            var(--a-duration);
-  --page-duration-fast:       var(--a-duration-fast);
-  --page-easing:              var(--a-easing);
-
-  /* Shell typography */
-  --page-font-family:         var(--a-font-family);
-  --page-body-size:           var(--a-body-size);
-
-  /* Nav — root container tokens */
-  --nav-duration:             var(--a-duration);
-  --nav-duration-fast:        var(--a-duration-fast);
-  --nav-easing:               var(--a-easing);
-  --nav-label-px:             var(--a-space-2);
-  --nav-label-py:             var(--a-space-1);
-  --nav-label-font-size:      var(--a-kicker-sm);
-  --nav-label-weight:         var(--a-weight-medium);
-  --nav-label-fg:             var(--a-fg-muted);
-  --nav-divider-bg:           var(--a-border-subtle);
-  --nav-divider-my:           var(--a-space-1);
-
-  /* Nav — group tokens */
-  --nav-group-indent-rail-bg: var(--a-border-subtle);
-  --nav-group-icon-font-size: var(--a-ui-size);
-  --nav-group-text-weight:    var(--a-weight-medium);
-  --nav-group-badge-bg:       var(--a-bg-muted);
-  --nav-group-badge-px:       var(--a-space-1);
-  --nav-group-badge-radius:   var(--a-radius-full);
-
-  /* Nav — item tokens */
-  --nav-item-icon-font-size:  var(--a-ui-size);
-  --nav-item-selected-weight: var(--a-weight-medium);
-  --nav-item-badge-fg:        var(--a-fg-muted);
-  --nav-item-badge-bg:        var(--a-bg-muted);
-  --nav-item-badge-px:        var(--a-space-1);
-  --nav-item-badge-radius:    var(--a-radius-full);
-  --nav-item-trailing-font:   var(--a-ui-sm);
-  --nav-item-trailing-fg:     var(--a-fg-muted);
-  --nav-item-trailing-border: var(--a-border-subtle);
-  --nav-item-trailing-radius: var(--a-radius-sm);
-  --nav-item-trailing-px:     var(--a-space-0-5);
-
-  /* Global icon size bump */
-  --a-icon-size: 18px;
-}

package/patterns/gen-ui/gen-ui.a2ui.json

@@ -1,72 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/GenUI.json",
-  "title": "GenUI",
-  "description": "Composition shell for chat + canvas generative UI. Manages layout modes\n(chat-only / split / canvas-only) and delegates a unified API across\nchild chat-ui, canvas-ui, and inspector-ui elements.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "GenUI"
-    },
-    "inspector": {
-      "description": "Show the inspector pane (for debugging generated A2UI).",
-      "type": "boolean",
-      "default": false
-    },
-    "mode": {
-      "description": "Layout mode — chat-only, 50/50 split, or canvas-only.",
-      "type": "string",
-      "enum": [
-        "chat",
-        "split",
-        "canvas"
-      ],
-      "default": "chat"
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "layout",
-    "events": {},
-    "examples": [],
-    "keywords": [
-      "gen-ui",
-      "generative-ui",
-      "chat-canvas",
-      "agent-shell"
-    ],
-    "name": "AdiaGenUI",
-    "related": [
-      "AppShell",
-      "Chat"
-    ],
-    "slots": {
-      "default": {
-        "description": "Author supplies chat-ui, canvas-ui, and optional inspector-ui children."
-      }
-    },
-    "states": [
-      {
-        "description": "Default mode=chat.",
-        "name": "idle"
-      }
-    ],
-    "synonyms": {},
-    "tag": "gen-ui-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/gen-ui/gen-ui.css

@@ -1,83 +0,0 @@
-@scope (gen-ui-ui) {
-
-  /* ═══════════════════════════════════════════════════════
-     SHELL HOST — full bleed, no card chrome
-     ═══════════════════════════════════════════════════════ */
-
-  :scope {
-    box-sizing:          border-box;
-    display:             grid;
-    height:              100%;
-    min-height:          0;
-    background:          var(--chat-bg, var(--a-canvas-0));
-    font-family:         var(--a-font-family);
-    overflow:            hidden;
-
-    /* Default: chat mode — single column */
-    grid-template-columns: 1fr;
-  }
-
-  /* ═══════════════════════════════════════════════════════
-     MODE: CHAT (initial screen — thread only, full width)
-     ═══════════════════════════════════════════════════════ */
-
-  :scope[mode="chat"] {
-    grid-template-columns: 1fr;
-  }
-
-  :scope[mode="chat"] > canvas-ui {
-    display:             none;
-  }
-
-  /* ═══════════════════════════════════════════════════════
-     MODE: SPLIT (dialog left + canvas right)
-     ═══════════════════════════════════════════════════════ */
-
-  :scope[mode="split"] {
-    grid-template-columns: minmax(320px, 1fr) 1.5fr;
-  }
-
-  :scope[mode="split"] > chat-ui {
-    border-right:        var(--a-border-thin) solid var(--a-canvas-border-subtle);
-  }
-
-  /* ═══════════════════════════════════════════════════════
-     MODE: CANVAS (canvas only)
-     ═══════════════════════════════════════════════════════ */
-
-  :scope[mode="canvas"] {
-    grid-template-columns: 1fr;
-  }
-
-  :scope[mode="canvas"] > chat-ui {
-    display:             none;
-  }
-
-  /* ═══════════════════════════════════════════════════════
-     INSPECTOR
-     ═══════════════════════════════════════════════════════ */
-
-  :scope > inspector-ui {
-    display:             none;
-  }
-
-  :scope[inspector] > inspector-ui {
-    display:             flex;
-    border-left:         var(--a-border-thin) solid var(--a-canvas-border-subtle);
-  }
-
-  :scope[mode="split"][inspector] {
-    grid-template-columns: minmax(320px, 1fr) 1.5fr 1fr;
-  }
-
-  /* ═══════════════════════════════════════════════════════
-     CHILDREN — fill grid cells
-     ═══════════════════════════════════════════════════════ */
-
-  :scope > chat-ui,
-  :scope > canvas-ui,
-  :scope > inspector-ui {
-    min-height:          0;
-    min-width:           0;
-  }
-}