@adia-ai/web-components 0.0.1

package/styles/fonts.css

@@ -0,0 +1,99 @@
+/* ── Supply (variable) ── */
+/*
+@font-face {
+  font-family: "Supply Mono";
+  src: url("/pp-supply/pp-supply-mono-variable.ttf") format("truetype");
+  font-weight: 300 700;
+  font-style: normal;
+  font-stretch: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Supply Sans";
+  src: url("/pp-supply/pp-supply-sans-variable.ttf") format("truetype");
+  font-weight: 300 700;
+  font-style: normal;
+  font-stretch: normal;
+  font-display: swap;
+}
+*/
+
+/* ── GT Standard (variable) ── */
+/*
+@font-face {
+  font-family: "GT Standard";
+  src: url("/gt/gt-standard-vf.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal oblique 0deg;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GT Standard Mono";
+  src: url("/gt/gt-standard-mono-vf.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal oblique 0deg;
+  font-display: swap;
+}
+*/
+
+/*
+@font-face {
+  font-family: "GT Standard Minisite";
+  src: url("/gt/gt-standard-minisite-vf.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GT Standard Loading";
+  src: url("/gt/gt-standard-loading-vf.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "GT Standard Icons";
+  src: url("/gt/gt-standard-icons.woff2") format("woff2");
+  font-style: normal;
+  font-display: swap;
+}
+*/
+
+/* ── Neue Montreal (variable) ── */
+
+/*
+@font-face {
+  font-family: "Neue Montreal Mono";
+  src: url("/pp/pp-neue-montreal-variable.woff2") format("woff2");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Neue Montreal Sans";
+  src: url("/pp/pp-neue-montreal-sans-variable.woff2") format("woff2");
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}
+*/
+
+:root {
+  --a-font-sans-fallback: system-ui, -apple-system, sans-serif;
+  --a-font-mono-fallback: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  --a-font-serif-fallback: Georgia, "Times New Roman", Times, serif;
+  --a-font-neu-montreal-sans: "Neue Montreal Sans", var(--a-font-sans-fallback);
+  --a-font-neu-montreal-mono: "Neue Montreal Mono", var(--a-font-mono-fallback);
+  --a-font-gt-standard: "GT Standard", var(--a-font-sans-fallback);
+  --a-font-gt-standard-mono: "GT Standard Mono", var(--a-font-mono-fallback);
+  --a-font-supply-sans: "Supply Sans", var(--a-font-sans-fallback);
+  --a-font-supply-mono: "Supply Mono", var(--a-font-mono-fallback);
+  --a-font-family-sans: var(--a-font-sans-fallback);
+  --a-font-family-mono: var(--a-font-mono-fallback);
+  --a-font-family-serif: var(--a-font-serif-fallback);
+}

package/styles/layouts/admin.css

@@ -0,0 +1,7 @@
+/* Backward-compatible shim — the app shell CSS now lives in patterns/.
+   This file re-exports it so existing <link> tags in admin.html keep working.
+   New pages should import patterns/app-shell/app-shell.css directly. */
+@import "../../patterns/app-shell/app-shell.css";
+@import "../../patterns/app-nav/app-nav.css";
+@import "../../patterns/app-nav-group/app-nav-group.css";
+@import "../../patterns/app-nav-item/app-nav-item.css";

package/styles/prose.css

@@ -0,0 +1,186 @@
+/* ═══════════════════════════════════════════════════════════════
+   PROSE — content context via [prose] attribute.
+
+   Shifts the entire spatial + typographic context to
+   content-optimized values. Overrides the sm/md/lg tier tokens
+   so the standard [size] selector in tokens.css still works.
+
+     <section prose>...</section>            — md (default)
+     <article prose size="sm">...</article>  — compact prose
+     <div prose size="lg">...</div>          — spacious prose
+   ═══════════════════════════════════════════════════════════════ */
+
+[prose] {
+  /* ── Radius — larger bases than UI ── */
+  --a-radius-max:  1.125rem;
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.50), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.625), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.75), var(--a-radius-max));
+  --a-radius:      var(--a-radius-md);
+
+  /* ── Inset — shifted up the space scale ── */
+  --a-inset-sm:    var(--a-space-6);
+  --a-inset-md:    var(--a-space-8);
+  --a-inset-lg:    var(--a-space-10);
+  --a-inset:       var(--a-inset-md);
+
+  /* ── Gaps — shifted up the space scale ── */
+  --a-gap-sm:      var(--a-space-4);
+  --a-gap-md:      var(--a-space-5);
+  --a-gap-lg:      var(--a-space-6);
+  --a-gap:         var(--a-gap-md);
+
+  /* ── Sizing — larger controls ── */
+  --a-size-sm:     calc(var(--a-density) * 1.75rem);
+  --a-size-md:     calc(var(--a-density) * 2.25rem);
+  --a-size-lg:     calc(var(--a-density) * 2.75rem);
+  --a-size:        var(--a-size-md);
+
+  /* ── Typography — override sm/md/lg tiers with prose sizes
+     Also set --a-*-size to -md (base typography defaults to -sm) ── */
+
+  /* display */
+  --a-display-sm:      clamp(24px, 20px + 1.5vw, 36px);
+  --a-display-md:      clamp(32px, 24px + 3vw, 56px);
+  --a-display-lg:      clamp(40px, 32px + 4vw, 80px);
+  --a-display-size:    var(--a-display-md);
+
+  /* title */
+  --a-title-sm:        clamp(18px, 16px + 0.75vw, 24px);
+  --a-title-md:        clamp(24px, 20px + 1.5vw, 36px);
+  --a-title-lg:        clamp(28px, 24px + 2vw, 48px);
+  --a-title-size:      var(--a-title-md);
+
+  /* heading */
+  --a-heading-sm:      16px;
+  --a-heading-md:      20px;
+  --a-heading-lg:      24px;
+  --a-heading-size:    var(--a-heading-md);
+
+  /* section */
+  --a-section-sm:      14px;
+  --a-section-md:      17px;
+  --a-section-lg:      20px;
+  --a-section-size:    var(--a-section-md);
+
+  /* subsection */
+  --a-subsection-sm:   13px;
+  --a-subsection-md:   15px;
+  --a-subsection-lg:   17px;
+  --a-subsection-size: var(--a-subsection-md);
+
+  /* body */
+  --a-body-sm:         14px;
+  --a-body-md:         15px;
+  --a-body-lg:         16px;
+  --a-body-size:       var(--a-body-md);
+
+  /* deck */
+  --a-deck-sm:         15px;
+  --a-deck-md:         18px;
+  --a-deck-lg:         20px;
+  --a-deck-size:       var(--a-deck-md);
+
+  /* caption */
+  --a-caption-sm:      14px;
+  --a-caption-md:      15px;
+  --a-caption-lg:      16px;
+  --a-caption-size:    var(--a-caption-md);
+
+  /* kicker */
+  --a-kicker-sm:       14px;
+  --a-kicker-md:       15px;
+  --a-kicker-lg:       16px;
+  --a-kicker-size:     var(--a-kicker-md);
+
+  /* label */
+  --a-label-sm:        12px;
+  --a-label-md:        13px;
+  --a-label-lg:        14px;
+  --a-label-size:      var(--a-label-md);
+
+  /* metric */
+  --a-metric-sm:       clamp(20px, 16px + 1.5vw, 32px);
+  --a-metric-md:       clamp(28px, 24px + 2vw, 48px);
+  --a-metric-lg:       clamp(40px, 32px + 4vw, 72px);
+  --a-metric-size:     var(--a-metric-md);
+
+  /* code */
+  --a-code-sm:         14px;
+  --a-code-md:         15px;
+  --a-code-lg:         16px;
+  --a-code-size:       var(--a-code-md);
+
+  /* ── UI — scale up for content context ── */
+  --a-ui-px:           var(--a-space-3);
+  --a-ui-py:           var(--a-space-2);
+  --a-ui-sm: 14px;
+  --a-ui-md: 15px;
+  --a-ui-lg: 16px;
+  --a-ui-size:    var(--a-ui-md);
+
+  --prose-max-width-sm: 55ch;
+  --prose-max-width-md: 65ch;
+  --prose-max-width-lg: 75ch;
+  --prose-max-width:    var(--prose-max-width-md);
+}
+
+[prose][size="lg"], [prose] [size="lg"] {
+  --a-inset: var(--a-inset-lg);
+  --a-gap: var(--a-gap-lg);
+  --a-size: var(--a-size-lg);
+  --a-radius: var(--a-radius-lg);
+}
+[prose][size="sm"], [prose] [size="sm"] {
+  --a-inset: var(--a-inset-sm);
+  --a-gap: var(--a-gap-sm);
+  --a-size: var(--a-size-sm);
+  --a-radius: var(--a-radius-sm);
+}
+
+/* Max-width constraint on flow content */
+[prose] > :is(p, ul, ol, blockquote, pre, table, dl) {
+  max-width: var(--prose-max-width);
+}
+
+/* ── Prose-enhanced native elements ── */
+
+[prose] :is(ul, ol) {
+  padding-inline-start: 1.75em;
+  margin-block: 0.75em;
+}
+
+[prose] li + li {
+  margin-block-start: 0.375em;
+}
+
+[prose] blockquote {
+  padding: var(--a-space-4) var(--a-space-6);
+  border-inline-start-width: 4px;
+  font-size: var(--a-body-size);
+}
+
+[prose] hr {
+  margin-block: var(--a-space-6);
+}
+
+[prose] table {
+  margin-block: var(--a-space-4);
+  border: 1px solid var(--a-border-subtle);
+  border-radius: var(--a-radius-md);
+  overflow: hidden;
+}
+
+[prose] th {
+  background: var(--a-bg-muted);
+}
+
+[prose] pre {
+  padding: var(--a-space-5);
+  margin-block: var(--a-space-4);
+}
+
+[prose] img {
+  border-radius: var(--a-radius-lg);
+  margin-block: var(--a-space-3);
+}

package/styles/styles.css

@@ -0,0 +1,193 @@
+/**
+ * Styles barrel — imports all component CSS + global reset.
+ * All components use Light DOM — styles target tag names directly.
+ */
+
+/* ── Components ── */
+@import "../components/icon/icon.css";
+@import "../components/button/button.css";
+@import "../components/input/input.css";
+@import "../components/textarea/textarea.css";
+@import "../components/check/check.css";
+@import "../components/radio/radio.css";
+@import "../components/switch/switch.css";
+@import "../components/slider/slider.css";
+@import "../components/select/select.css";
+@import "../components/segment/segment.css";
+@import "../components/segmented/segmented.css";
+@import "../components/range/range.css";
+@import "../components/tree/tree.css";
+@import "../components/pane/pane.css";
+@import "../components/chat/chat-input.css";
+@import "../components/chat/chat.css";
+@import "../components/drawer/drawer.css";
+@import "../components/modal/modal.css";
+@import "../components/toast/toast.css";
+@import "../components/tabs/tabs.css";
+@import "../components/tooltip/tooltip.css";
+@import "../components/badge/badge.css";
+@import "../components/breadcrumb/breadcrumb.css";
+@import "../components/command/command.css";
+@import "../components/color-picker/color-picker.css";
+@import "../components/noodles/noodles.css";
+@import "../components/table/table.css";
+@import "../components/timeline/timeline.css";
+@import "../components/upload/upload.css";
+@import "../components/card/card.css";
+@import "../components/avatar/avatar.css";
+@import "../components/progress/progress.css";
+@import "../components/skeleton/skeleton.css";
+@import "../components/alert/alert.css";
+@import "../components/kbd/kbd.css";
+@import "../components/tag/tag.css";
+@import "../components/col/col.css";
+@import "../components/row/row.css";
+@import "../components/grid/grid.css";
+@import "../components/stack/stack.css";
+@import "../components/chart/chart.css";
+@import "../components/popover/popover.css";
+@import "../components/accordion/accordion.css";
+@import "../components/divider/divider.css";
+@import "../components/pagination/pagination.css";
+@import "../components/code/code.css";
+@import "../components/list/list.css";
+@import "../components/menu/menu.css";
+@import "../components/toolbar/toolbar.css";
+@import "../components/otp-input/otp-input.css";
+@import "../components/image/image.css";
+@import "../components/search/search.css";
+@import "../components/stat/stat.css";
+@import "../components/progress-row/progress-row.css";
+@import "../components/action-list/action-list.css";
+@import "../components/empty-state/empty-state.css";
+@import "../components/calendar-picker/calendar-picker.css";
+@import "../components/embed/embed.css";
+@import "../components/block/block.css";
+@import "../components/text/text.css";
+@import "../components/toggle-group/toggle-group.css";
+@import "../components/richtext/richtext.css";
+@import "../components/stream/stream.css";
+@import "../components/canvas/canvas.css";
+@import "../components/inspector/inspector.css";
+@import "../components/pipeline-status/pipeline-status.css";
+@import "../components/rating/rating.css";
+@import "../components/description-list/description-list.css";
+@import "../components/heatmap/heatmap.css";
+@import "../components/swiper/swiper.css";
+@import "../components/stepper/stepper.css";
+@import "../components/agent-reasoning/agent-reasoning.css";
+@import "../components/agent-trace/agent-trace.css";
+@import "../components/agent-feedback-bar/agent-feedback-bar.css";
+@import "../components/agent-suggestions/agent-suggestions.css";
+@import "../components/agent-questions/agent-questions.css";
+@import "../components/agent-artifact/agent-artifact.css";
+@import "../patterns/gen-ui/gen-ui.css";
+
+/* ── Reset ── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* Kill default focus outline — components manage their own via --a-focus-ring */
+*:focus {
+  outline: none;
+}
+
+/* Prevent text selection on all interactive components */
+:is(button-ui, kbd-ui, tag-ui, input-ui, textarea-ui, select-ui, check-ui, radio-ui, switch-ui,
+    slider-ui, range-ui, segmented-ui, segment-ui) {
+  user-select: none;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  hanging-punctuation: first last;
+  color-scheme: light dark;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+
+  margin: 0;
+  font-family: var(--a-font-family);
+  font-size: var(--a-body-size);
+  font-style: normal;
+  font-variation-settings: 'slnt' 0, 'ital' 0;
+  line-height: 1.5;
+  color: var(--a-fg);
+  background: var(--a-bg);
+  min-block-size: 100dvb;
+}
+
+img,
+picture,
+svg,
+video,
+canvas {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
+/* ── Size-query provider utility ──────────────────────────────────
+   Opt any element into being a container-query size provider for
+   its descendants, without the nesting fragility of applying
+   container-type to every instance of a primitive. Use sparingly —
+   on panels, split-panes, cards that actually need responsive
+   children — and descendants query via bare `@container (width < Xrem)`
+   (matches nearest) or `@container container (...)` for clarity.
+
+   Why inline-size: block-direction height stays content-driven.
+   Why an attribute: explicit opt-in; avoids accidental containment
+   collapse when a primitive is composed inside another flex chain. */
+[provide-container-inline-size] {
+  container-type: inline-size;
+  container-name: container;
+}
+
+
+:focus-visible {
+  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--a-selection-bg);
+  color: var(--a-selection-text);
+  border-radius: var(--a-selection-radius);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  line-height: 1.1;
+}
+
+p,
+li,
+figcaption {
+  text-wrap: pretty;
+}
+
+a:not([class]) {
+  text-underline-offset: 0.12em;
+}

package/styles/themes.css

@@ -0,0 +1,155 @@
+/* ═══════════════════════════════════════════════════════════════
+   Themes — CSS-only presets via [data-theme] attribute.
+   Zero JavaScript. Apply to any container element.
+
+   Each theme overrides @property knobs: hues, chroma, radius, spacing.
+   Downstream tokens (primitives, surfaces, semantics) recompute automatically.
+
+   Usage:
+     <div data-theme="ocean">...ocean themed...</div>
+     <html data-theme="slate">...entire app...</html>
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Default (cool indigo, balanced) ── */
+
+[data-scheme="light"] {
+  color-scheme: light;
+}
+[data-scheme="dark"] {
+  color-scheme: dark;
+}
+[data-scheme="system"] {
+  color-scheme: light dark;
+}
+
+/* ── Default (cool indigo, balanced) ── */
+
+[data-theme="default"] {
+  --a-neutral-hue:   225;
+  --a-neutral-c-min: 0.010;
+  --a-brand-hue:     225;
+  --a-accent-hue:    225;
+  --a-success-hue:   145;
+  --a-warning-hue:   65;
+  --a-danger-hue:    25;
+  --a-info-hue:      200;
+  --a-radius-k:      1;
+  --a-density:       1;
+  --a-density:       1;
+  --a-shadow-intensity: 1;
+}
+
+/* ── Ocean (cool teal, vivid, rounded, relaxed) ── */
+[data-theme="ocean"] {
+  --a-neutral-hue:   210;
+  --a-neutral-c-min: 0.020;
+  --a-brand-hue:     200;
+  --a-accent-hue:    200;
+  --a-success-hue:   160;
+  --a-warning-hue:   55;
+  --a-danger-hue:    15;
+  --a-info-hue:      190;
+  --a-accent-c-max:  0.20;
+  --a-brand-c-max:   0.20;
+  --a-radius-k:      1.5;
+  --a-density:       1.1;
+}
+
+/* ── Forest (earthy green, muted, compact) ── */
+[data-theme="forest"] {
+  --a-neutral-hue:   150;
+  --a-neutral-c-min: 0.018;
+  --a-neutral-c-max: 0.030;
+  --a-brand-hue:     140;
+  --a-accent-hue:    140;
+  --a-success-hue:   145;
+  --a-warning-hue:   60;
+  --a-danger-hue:    20;
+  --a-info-hue:      180;
+  --a-accent-c-max:  0.14;
+  --a-brand-c-max:   0.14;
+  --a-radius-k:      0.5;
+  --a-density:       0.9;
+}
+
+/* ── Sunset (warm amber, vivid, sharp) ── */
+[data-theme="sunset"] {
+  --a-neutral-hue:   30;
+  --a-neutral-c-min: 0.022;
+  --a-brand-hue:     20;
+  --a-accent-hue:    20;
+  --a-success-hue:   145;
+  --a-warning-hue:   50;
+  --a-danger-hue:    10;
+  --a-info-hue:      200;
+  --a-accent-c-max:  0.22;
+  --a-brand-c-max:   0.22;
+  --a-radius-k:      0.25;
+  --a-density:       1.1;
+}
+
+/* ── Lavender (soft purple, low chroma, pill radius) ── */
+[data-theme="lavender"] {
+  --a-neutral-hue:   280;
+  --a-neutral-c-min: 0.018;
+  --a-brand-hue:     270;
+  --a-accent-hue:    270;
+  --a-success-hue:   145;
+  --a-warning-hue:   65;
+  --a-danger-hue:    25;
+  --a-info-hue:      220;
+  --a-accent-c-max:  0.15;
+  --a-brand-c-max:   0.15;
+  --a-radius-k:      2;
+  --a-density:       1.1;
+}
+
+/* ── Rose (warm pink, medium chroma) ── */
+[data-theme="rose"] {
+  --a-neutral-hue:   350;
+  --a-neutral-c-min: 0.016;
+  --a-brand-hue:     340;
+  --a-accent-hue:    340;
+  --a-success-hue:   145;
+  --a-warning-hue:   55;
+  --a-danger-hue:    15;
+  --a-info-hue:      200;
+  --a-accent-c-max:  0.17;
+  --a-brand-c-max:   0.17;
+  --a-radius-k:      0.75;
+  --a-density:       1;
+}
+
+/* ── Slate (desaturated grey-blue, sharp, tight) ── */
+[data-theme="slate"] {
+  --a-neutral-hue:   220;
+  --a-neutral-c-min: 0.008;
+  --a-neutral-c-max: 0.015;
+  --a-brand-hue:     220;
+  --a-accent-hue:    220;
+  --a-success-hue:   145;
+  --a-warning-hue:   65;
+  --a-danger-hue:    25;
+  --a-info-hue:      200;
+  --a-accent-c-max:  0.10;
+  --a-brand-c-max:   0.10;
+  --a-radius-k:      0.35;
+  --a-density:       0.85;
+  --a-shadow-intensity: 0.5;
+}
+
+/* ── Midnight (deep indigo, high chroma, rounded, spacious) ── */
+[data-theme="midnight"] {
+  --a-neutral-hue:   250;
+  --a-neutral-c-min: 0.020;
+  --a-brand-hue:     240;
+  --a-accent-hue:    240;
+  --a-success-hue:   150;
+  --a-warning-hue:   60;
+  --a-danger-hue:    20;
+  --a-info-hue:      210;
+  --a-accent-c-max:  0.22;
+  --a-brand-c-max:   0.22;
+  --a-radius-k:      1.25;
+  --a-density:       1.1;
+}