@actioneer/ads 0.2.4 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [
@@ -38,9 +38,9 @@
     "@assistant-ui/react-markdown": "^0.14.5",
     "@hugeicons/core-free-icons": "^4.2.2",
     "@hugeicons/react": "^1.1.9",
-    "@openuidev/react-lang": "^0.2.8",
     "@paper-design/shaders": "^0.0.77",
     "@paper-design/shaders-react": "^0.0.77",
+    "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.42.2",

package/styles.css

@@ -34,28 +34,34 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* ---- Type scale ---- base = 14px (0.875rem). Root stays 16px so the
-     spacing grid is unaffected; only text sizes are anchored to 14px. */
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
+     spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
      Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
      missing, the answer is weight/color, not a new size. */
-  --text-xs: 0.75rem;      /* 12px — captions, secondary text, table cells, keycaps */
-  --text-xs--line-height: 1rem;
-  /* text-sm is aliased to text-xs (both 12px). The scale is intentionally
-     12 · 14 · 15 · 21 · 26 with no in-between tier — keeping the token
-     pointed at 12px stops any stray `text-sm` from falling back to
-     Tailwind's default 14px, which would silently read as base. */
-  --text-sm: 0.75rem;
-  --text-sm--line-height: 1rem;
-  --text-base: 0.875rem;   /* 14px — BASE body */
-  --text-base--line-height: 1.25rem;
-  --text-lg: 0.9375rem;    /* 15px — emphasized body, section headings */
-  --text-lg--line-height: 1.375rem;
+  --text-xs: 0.8125rem;    /* 13px — the FLOOR: captions, secondary text, table cells, keycaps */
+  --text-xs--line-height: 1.125rem;
+  /* text-sm is aliased to text-xs (both 13px). The scale is intentionally
+     13 · 15 · 17 · 21 · 26 with no in-between tier — keeping the token
+     pointed at 13px stops any stray `text-sm` from falling back to
+     Tailwind's default 14px, which would land off the scale. */
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.125rem;
+  --text-base: 0.9375rem;  /* 15px — BASE body */
+  --text-base--line-height: 1.375rem;
+  --text-lg: 1.0625rem;    /* 17px — emphasized body, section headings */
+  --text-lg--line-height: 1.5rem;
   --text-xl: 1.3125rem;    /* 21px — page titles */
   --text-xl--line-height: 1.75rem;
   --text-2xl: 1.625rem;    /* 26px — display */
@@ -138,13 +144,16 @@
      to these system-wide. JS mirror: src/lib/motion.ts — keep in sync. */
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entrances, exits, presses */
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement / morphs */
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer slide */
+  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
+  --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
@@ -166,6 +175,8 @@
   --sidebar-item: 2rem; /* 32px — collapsed rail hit target (square) */
   --sidebar-logo: 1.25rem; /* 20px — brand mark, centered in a --sidebar-item square */
   --sidebar-text-indent: 2.375rem; /* px-3 + icon size-4 + gap-2.5 — history rows align to nav-item text */
+  --sidebar-navigation-text-size: 0.8125rem; /* 13px — sidebar actions, items, history, and account text */
+  --sidebar-section-label-size: 0.8125rem; /* 13px — section and history labels */
   --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
   --aside-width: 20rem; /* 320px — right-hand panel column */
 
@@ -180,6 +191,7 @@
   --composer-bg: color-mix(in oklab, var(--muted) 30%, var(--background));
   --composer-radius: var(--radius-2xl);
   --composer-padding: 0.5rem;
+  --composer-placeholder-max-h: calc(var(--text-base--line-height) * 2); /* rotating placeholder clamp — two lines of the input's own rhythm, so it can never overlap the accessory row */
   --chat-texture-opacity: 0.06; /* welcome-state halftone wash */
 }
 
@@ -313,10 +325,11 @@
   display: none;
 }
 
-/* Ask Actioneer texture entrance: a radial bloom — the halftone reveals from
-   the centre out to the corners (clip-path circle) while gently scaling up to
-   rest. `from{}`-only keyframe, so it settles into the element's own opacity. */
-@keyframes chat-texture-reveal {
+/* BrandTexture entrance (src/components/brand-texture.tsx): a radial bloom —
+   the halftone reveals from the centre out to the corners (clip-path circle)
+   while gently scaling up to rest. `from{}`-only keyframe, so it settles into
+   the element's own opacity. */
+@keyframes ads-texture-reveal {
   from {
     clip-path: circle(10% at 50% 50%);
     opacity: 0;
@@ -326,8 +339,8 @@
     clip-path: circle(102% at 50% 50%);
   }
 }
-.chat-texture-reveal {
-  animation: chat-texture-reveal var(--duration-bloom) var(--ease-out) both;
+.ads-texture-reveal {
+  animation: ads-texture-reveal var(--duration-bloom) var(--ease-out) both;
 }
 
 /* Paper's WebGL shader owns the halftone animation. The canvas is bounded to
@@ -371,7 +384,7 @@
   animation-direction: reverse;
 }
 @media (prefers-reduced-motion: reduce) {
-  .chat-texture-reveal {
+  .ads-texture-reveal {
     animation: none;
   }
   .voice-surface-drift {
@@ -379,13 +392,13 @@
   }
 }
 
-/* Ask Actioneer texture exit — cloud lift. When the conversation starts the
+/* BrandTexture exit — cloud lift. When the conversation starts the
    halftone dissolves from the BOTTOM upward (a soft mask band sweeps up
    through it) while the whole layer drifts up and fades — cloud cover
    breaking and rising, not a curtain covering it. The mask rests fully
    opaque (element aligned with the black end of an oversized gradient), and
    the lifted state slides the element to the transparent end. */
-.chat-texture-lift {
+.ads-texture-lift {
   mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
   -webkit-mask-image: linear-gradient(to top, transparent 0%, transparent 42%, black 58%, black 100%);
   mask-repeat: no-repeat;
@@ -400,16 +413,16 @@
     translate 1s var(--ease-out),
     opacity 1s var(--ease-out);
 }
-.chat-texture-lifted {
+.ads-texture-lifted {
   mask-position: 0% 100%;
   -webkit-mask-position: 0% 100%;
   translate: 0 -3.5rem;
 }
 @media (prefers-reduced-motion: reduce) {
-  .chat-texture-lift {
+  .ads-texture-lift {
     transition: opacity var(--duration-normal) var(--ease-out);
   }
-  .chat-texture-lifted {
+  .ads-texture-lifted {
     mask-position: 0% 0%;
     -webkit-mask-position: 0% 0%;
     translate: none;
@@ -470,7 +483,7 @@
     background-color: var(--background);
     color: var(--foreground);
     font-family: var(--font-sans);
-    font-size: var(--text-base); /* 14px base */
+    font-size: var(--text-base); /* 15px base */
     font-feature-settings: "cv01", "ss01";
     font-synthesis-weight: none;
   }
@@ -533,6 +546,44 @@
 @keyframes ads-shimmer {
   100% { transform: translateX(100%); }
 }
+
+/* Reveal — the "data draws itself" entrance (src/components/reveal.tsx).
+   The real layout lands instantly; content arrives in hierarchy — shells
+   rise, labels/values ink in, visualizations wipe left→right — each slot
+   delayed by --reveal-order × --reveal-step. The wipe runs longer than UI
+   chrome on purpose: data drawing is explanatory motion, not chrome. */
+@keyframes ads-reveal-ink {
+  from { opacity: 0; filter: blur(4px); }
+  to { opacity: 1; filter: blur(0); }
+}
+@keyframes ads-reveal-rise {
+  from { opacity: 0; transform: translate3d(0, 8px, 0); }
+  to { opacity: 1; transform: translate3d(0, 0, 0); }
+}
+@keyframes ads-reveal-wipe {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+@keyframes ads-reveal-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.ads-reveal {
+  animation: ads-reveal-rise var(--reveal-duration, 0.45s) var(--ease-out) both;
+  animation-delay: calc(var(--reveal-step, 70ms) * var(--reveal-order, 0));
+}
+.ads-reveal-ink { animation-name: ads-reveal-ink; }
+.ads-reveal-wipe {
+  animation-name: ads-reveal-wipe;
+  animation-duration: var(--reveal-duration-draw, 0.9s);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ads-reveal,
+  .ads-reveal-ink,
+  .ads-reveal-wipe {
+    animation-name: ads-reveal-fade;
+  }
+}
 @keyframes ads-indeterminate {
   0% { transform: translate3d(-100%, 0, 0); }
   60%, 100% { transform: translate3d(250%, 0, 0); }
@@ -649,5 +700,103 @@
     animation: none !important;
   }
 }
+
+/* Collapsible disclosure (CSS path) — opt-in via .ads-collapsible for simple
+   disclosures. ChainOfThoughtContent does NOT use this: it animates with
+   Motion so a toggle mid-flight reverses from the current height instead of
+   restarting, which CSS keyframes cannot do.
+
+   Height, opacity and a short rise in ONE animation.
+   Two separate `animation` declarations cannot coexist (the shorthand replaces,
+   it does not merge), so animating height alongside tw-animate-css's enter/exit
+   silently drops the fade and leaves a bare height shutter — which reads as
+   rigid no matter how it is timed. Radix publishes the measured height as
+   --radix-collapsible-content-height; exits run faster than enters.
+   Eased with --ease-disclosure. --ease-out front-loads ~60% of the travel into
+   the first third (pop, then settle); --ease-in-out holds ~150ms before moving
+   (lag, then rush). A height reveal needs to leave the mark immediately and
+   settle long, which is what this curve does. */
+@keyframes ads-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes ads-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+}
+.ads-collapsible[data-state="open"] {
+  animation: ads-collapsible-down var(--duration-disclosure) var(--ease-disclosure);
+}
+.ads-collapsible[data-state="closed"] {
+  animation: ads-collapsible-up var(--duration-normal) var(--ease-disclosure);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ads-collapsible[data-state="open"],
+  .ads-collapsible[data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* Tree connector — the rail that links a group of children back to their
+   parent, and the L-shaped elbow that reaches an individual child.
+
+   Two classes so a rail can pass THROUGH content that is not itself a branch:
+   `.ads-tree-rail` draws the vertical only, `.ads-tree-branch` adds the elbow.
+   Mixing them keeps the rail unbroken from the parent icon while only the
+   rows that are actual children get an elbow.
+
+   - --tree-rail-lead : how far the FIRST child's rail climbs to meet the
+                        parent row.
+   - --tree-elbow     : where the elbow meets the child — its icon centre. */
+.ads-tree-rail,
+.ads-tree-branch {
+  position: relative;
+  padding-inline-start: 1.25rem;
+}
+.ads-tree-rail::before,
+.ads-tree-branch::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  border-left: 1px solid var(--border);
+}
+.ads-tree-rail:first-child::before,
+.ads-tree-branch:first-child::before {
+  top: calc(-1 * var(--tree-rail-lead, 0px));
+}
+/* The last child needs no rail: its elbow (or the content's end) terminates
+   the branch, and a rail there pokes through the curve. */
+.ads-tree-rail:last-child::before,
+.ads-tree-branch:last-child::before {
+  display: none;
+}
+.ads-tree-branch::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: var(--tree-elbow, 1.125rem);
+  width: 1rem;
+  border-bottom: 1px solid var(--border);
+  border-left: 1px solid var(--border);
+  border-bottom-left-radius: 9px;
+}
 /* Let the consumer's Tailwind discover the classes ADS components use. */
 @source "./**/*.{js,mjs}";

package/theme.css

@@ -7,28 +7,34 @@
  */
 @theme {
   /* ---- Typography ----
-     One typeface only. No monospace font — numeric/code contexts use
-     Aribau Grotesk with `tabular-nums` for aligned figures. */
+     One brand typeface. Figures inside prose stay in Aribau Grotesk with
+     `tabular-nums`; only literal source code steps to the mono stack. */
   --font-sans: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system,
     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 
-  /* ---- Type scale ---- base = 14px (0.875rem). Root stays 16px so the
-     spacing grid is unaffected; only text sizes are anchored to 14px. */
+  /* Source code only (CodeBlock, inline Code). ADS ships no mono webfont —
+     this resolves to the reader's platform mono, which is what a developer
+     already reads code in. Never use it for UI copy or data. */
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* ---- Type scale ---- base = 15px (0.9375rem). Root stays 16px so the
+     spacing grid is unaffected; only text sizes are anchored to 15px. */
   /* SIX sizes only — a deliberately small ladder (captions → display).
      Don't reintroduce 2xs/3xl/4xl or in-between steps; if a size feels
      missing, the answer is weight/color, not a new size. */
-  --text-xs: 0.75rem;      /* 12px — captions, secondary text, table cells, keycaps */
-  --text-xs--line-height: 1rem;
-  /* text-sm is aliased to text-xs (both 12px). The scale is intentionally
-     12 · 14 · 15 · 21 · 26 with no in-between tier — keeping the token
-     pointed at 12px stops any stray `text-sm` from falling back to
-     Tailwind's default 14px, which would silently read as base. */
-  --text-sm: 0.75rem;
-  --text-sm--line-height: 1rem;
-  --text-base: 0.875rem;   /* 14px — BASE body */
-  --text-base--line-height: 1.25rem;
-  --text-lg: 0.9375rem;    /* 15px — emphasized body, section headings */
-  --text-lg--line-height: 1.375rem;
+  --text-xs: 0.8125rem;    /* 13px — the FLOOR: captions, secondary text, table cells, keycaps */
+  --text-xs--line-height: 1.125rem;
+  /* text-sm is aliased to text-xs (both 13px). The scale is intentionally
+     13 · 15 · 17 · 21 · 26 with no in-between tier — keeping the token
+     pointed at 13px stops any stray `text-sm` from falling back to
+     Tailwind's default 14px, which would land off the scale. */
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.125rem;
+  --text-base: 0.9375rem;  /* 15px — BASE body */
+  --text-base--line-height: 1.375rem;
+  --text-lg: 1.0625rem;    /* 17px — emphasized body, section headings */
+  --text-lg--line-height: 1.5rem;
   --text-xl: 1.3125rem;    /* 21px — page titles */
   --text-xl--line-height: 1.75rem;
   --text-2xl: 1.625rem;    /* 26px — display */
@@ -111,13 +117,16 @@
      to these system-wide. JS mirror: src/lib/motion.ts — keep in sync. */
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entrances, exits, presses */
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement / morphs */
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer slide */
+  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1); /* side-panel and drawer slide */
+  --ease-drawer: var(--ease-expo-out); /* backwards-compatible alias */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot (rare) */
+  --ease-disclosure: cubic-bezier(0.32, 0.72, 0, 1); /* height reveals — moves off the mark immediately, settles long */
 
   /* Durations — every animation/transition timing flows from these.
      UI animations stay under 300ms; exits run faster than enters. */
   --duration-fast: 0.15s; /* menu / popover / tooltip enter */
   --duration-normal: 0.2s; /* state transitions */
+  --duration-disclosure: 0.28s; /* collapsible open — travels a real distance */
   --duration-spin: 0.8s; /* rotation loops (spinner) */
   --duration-pulse: 1.5s; /* breathing / shimmer loops */
   --duration-bloom: 0.9s; /* ambient reveals (chat texture bloom, curtain wipe) */
@@ -139,6 +148,8 @@
   --sidebar-item: 2rem; /* 32px — collapsed rail hit target (square) */
   --sidebar-logo: 1.25rem; /* 20px — brand mark, centered in a --sidebar-item square */
   --sidebar-text-indent: 2.375rem; /* px-3 + icon size-4 + gap-2.5 — history rows align to nav-item text */
+  --sidebar-navigation-text-size: 0.8125rem; /* 13px — sidebar actions, items, history, and account text */
+  --sidebar-section-label-size: 0.8125rem; /* 13px — section and history labels */
   --panel-header-height: 2.75rem; /* 44px — Panel / toolbar header */
   --aside-width: 20rem; /* 320px — right-hand panel column */
 
@@ -153,6 +164,7 @@
   --composer-bg: color-mix(in oklab, var(--muted) 30%, var(--background));
   --composer-radius: var(--radius-2xl);
   --composer-padding: 0.5rem;
+  --composer-placeholder-max-h: calc(var(--text-base--line-height) * 2); /* rotating placeholder clamp — two lines of the input's own rhythm, so it can never overlap the accessory row */
   --chat-texture-opacity: 0.06; /* welcome-state halftone wash */
 }
 

package/components/assistant-ui/smart-message-text.d.ts

@@ -1,15 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Renderer } from '@openuidev/react-lang';
-/**
- * The OpenUI Lang library used to render fenced `openui-lang` answers. ADS
- * ships no default library — the host injects its own component registry via
- * {@link OpenUiLibraryProvider}. Absent a provider, structured answers fall
- * back to Markdown (see {@link SmartMessageText}).
- */
-type OpenUiLibrary = ComponentProps<typeof Renderer>["library"];
-export declare function OpenUiLibraryProvider({ library, children, }: {
-    library: OpenUiLibrary;
-    children: ReactNode;
-}): import("react").JSX.Element;
-export declare const SmartMessageText: import('react').MemoExoticComponent<() => import("react").JSX.Element>;
-export {};

package/components/assistant-ui/smart-message-text.js

@@ -1,29 +0,0 @@
-"use client";
-import { jsx as t } from "react/jsx-runtime";
-import { createContext as c, memo as p, useContext as m } from "react";
-import { useMessagePartText as u } from "@assistant-ui/react";
-import { Renderer as d } from "@openuidev/react-lang";
-import { MarkdownText as l } from "./markdown-text.js";
-const i = c(null);
-function M({
-  library: e,
-  children: r
-}) {
-  return /* @__PURE__ */ t(i.Provider, { value: e, children: r });
-}
-const x = /```openui-lang\r?\n([\s\S]*?)(?:\r?\n```|$)/;
-function f(e) {
-  const r = e.match(x);
-  return r ? r[1].replace(/```$/, "").trimEnd() : null;
-}
-const g = () => {
-  var o;
-  const e = u(), r = m(i), s = e.type === "text" ? e.text : "", n = f(s), a = e.status.type === "running";
-  return n && r ? /* @__PURE__ */ t("div", { className: "ads-openui my-1", children: /* @__PURE__ */ t(d, { response: n, library: r, isStreaming: a }) }) : (n && typeof process < "u" && ((o = process.env) == null ? void 0 : o.NODE_ENV) !== "production" && console.warn(
-    "[ADS] SmartMessageText got an openui-lang answer but no OpenUiLibraryProvider is present; falling back to Markdown. Wrap the Thread in <OpenUiLibraryProvider library={…}>."
-  ), /* @__PURE__ */ t(l, {}));
-}, P = p(g);
-export {
-  M as OpenUiLibraryProvider,
-  P as SmartMessageText
-};