@actioneer/ads 0.8.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/DESIGN.md CHANGED
@@ -35,10 +35,10 @@ colors:
35
35
  accent-foreground: "#20201e"
36
36
  on-white-primary: "#20201e"
37
37
  on-white-secondary: "#4b4b47"
38
- on-white-tertiary: "#686863"
38
+ on-white-tertiary: "#777771"
39
39
  on-warm-grey-primary: "#20201e"
40
40
  on-warm-grey-secondary: "#4b4b47"
41
- on-warm-grey-tertiary: "#686863"
41
+ on-warm-grey-tertiary: "#777771"
42
42
  primary: "#20201e"
43
43
  secondary: "#4b4b47"
44
44
  tertiary: "color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))"
@@ -54,47 +54,47 @@ colors:
54
54
  specimen-stroke: "#ececea"
55
55
  table-shell: "#ffffff"
56
56
  table-stroke: "#ececea"
57
- table-header-foreground: "#4b4b47"
57
+ table-header-foreground: "color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))"
58
58
  artifact-canvas: "color-mix(in srgb, var(--color-brand-mark) 7%, var(--color-white))"
59
59
  ring: "color-mix(in srgb, var(--color-wg12) 50%, transparent)"
60
60
  overlay: "color-mix(in srgb, var(--color-wg12) 50%, transparent)"
61
61
  typography:
62
62
  display:
63
63
  fontFamily: "\"Aribau Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
64
- fontSize: "31px"
64
+ fontSize: "24px"
65
65
  fontWeight: 500
66
- lineHeight: "38px"
66
+ lineHeight: "32px"
67
67
  title:
68
68
  fontFamily: "\"Aribau Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
69
- fontSize: "25px"
69
+ fontSize: "18px"
70
70
  fontWeight: 500
71
- lineHeight: "32px"
71
+ lineHeight: "24px"
72
72
  headline:
73
73
  fontFamily: "\"Aribau Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
74
- fontSize: "19px"
74
+ fontSize: "16px"
75
75
  fontWeight: 500
76
- lineHeight: "26px"
76
+ lineHeight: "22px"
77
77
  body:
78
78
  fontFamily: "\"Aribau Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
79
- fontSize: "15px"
79
+ fontSize: "14px"
80
80
  fontWeight: 400
81
- lineHeight: "22px"
81
+ lineHeight: "20px"
82
82
  label:
83
83
  fontFamily: "\"Aribau Grotesk\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
84
- fontSize: "13px"
84
+ fontSize: "12px"
85
85
  fontWeight: 400
86
- lineHeight: "18px"
86
+ lineHeight: "16px"
87
87
  mono:
88
88
  fontFamily: "\"JetBrains Mono Variable\", ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
89
- fontSize: "13px"
89
+ fontSize: "12px"
90
90
  fontWeight: 400
91
- lineHeight: "18px"
91
+ lineHeight: "16px"
92
92
  rounded:
93
93
  xs: "2px"
94
94
  sm: "4px"
95
95
  md: "6px"
96
96
  lg: "8px"
97
- xl: "12px"
97
+ xl: "8px"
98
98
  full: "9999px"
99
99
  spacing:
100
100
  xs: "4px"
@@ -179,16 +179,16 @@ components:
179
179
 
180
180
  TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
181
181
 
182
- ADS 0.8.0 is a library first and a look second. 322 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
182
+ ADS 1.0.0 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
183
183
 
184
184
  The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio green CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the green and runs every action on ink.
185
185
 
186
186
  **Key characteristics:**
187
187
  - Warm-grey canvas, white sheet, quiet tiles. Every surface belongs to exactly one plane
188
- - One typeface at two real weights on a 5-step ladder (31px / 25px / 19px / 15px / 13px), with mono reserved for literal code
188
+ - One typeface at two real weights on a 5-step ladder (24px / 18px / 16px / 14px / 12px), with mono reserved for literal code
189
189
  - Fills and elevation separate surfaces roughly 75/25 against strokes
190
190
  - Every surface defaults to `shadow-0`; elevation means "you can act on this"
191
- - Radius runs 2px / 4px / 6px / 8px / 12px, with a pill reserved for chips and avatars
191
+ - Radius runs 2px / 4px / 6px / 8px / 8px, with a pill reserved for chips and avatars
192
192
 
193
193
  ## Colors
194
194
 
@@ -278,10 +278,10 @@ The warm-grey ground everything else stands on.
278
278
 
279
279
  - **on-white-primary** (`--color-on-white-primary`, #20201e) `bg-on-white-primary`
280
280
  - **on-white-secondary** (`--color-on-white-secondary`, #4b4b47) `bg-on-white-secondary`
281
- - **on-white-tertiary** (`--color-on-white-tertiary`, #686863) `bg-on-white-tertiary`
281
+ - **on-white-tertiary** (`--color-on-white-tertiary`, #777771) `bg-on-white-tertiary`
282
282
  - **on-warm-grey-primary** (`--color-on-warm-grey-primary`, #20201e) `bg-on-warm-grey-primary`
283
283
  - **on-warm-grey-secondary** (`--color-on-warm-grey-secondary`, #4b4b47) `bg-on-warm-grey-secondary`
284
- - **on-warm-grey-tertiary** (`--color-on-warm-grey-tertiary`, #686863) `bg-on-warm-grey-tertiary`
284
+ - **on-warm-grey-tertiary** (`--color-on-warm-grey-tertiary`, #777771) `bg-on-warm-grey-tertiary`
285
285
 
286
286
  **Context-free compatibility aliases remain conservative.**
287
287
 
@@ -309,7 +309,7 @@ The warm-grey ground everything else stands on.
309
309
 
310
310
  - **table-shell** (`--color-table-shell`, #ffffff) `bg-table-shell`
311
311
  - **table-stroke** (`--color-table-stroke`, #ececea) `bg-table-stroke`
312
- - **table-header-foreground** (`--color-table-header-foreground`, #4b4b47) `text-table-header-foreground`
312
+ - **table-header-foreground** (`--color-table-header-foreground`, color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))) `text-table-header-foreground`
313
313
 
314
314
  **The artifact sheet: white warmed by a trace of the brand mark.**
315
315
 
@@ -334,18 +334,18 @@ The warm-grey ground everything else stands on.
334
334
 
335
335
  ### Hierarchy
336
336
 
337
- - **Display** (500, 31px / 38px): page-level moments only.
338
- - **Title** (500, 25px / 32px): page titles.
339
- - **Headline** (500, 19px / 26px): emphasized body and section headings.
340
- - **Body** (400, 15px / 22px): the default, all reading text and control labels.
341
- - **Label** (400, 13px / 18px): the floor: captions, secondary text, table cells.
342
- - **Mono** (400, 13px / 18px): literal source code, and nothing else.
337
+ - **Display** (500, 24px / 32px): page-level moments only.
338
+ - **Title** (500, 18px / 24px): page titles.
339
+ - **Headline** (500, 16px / 22px): emphasized body and section headings.
340
+ - **Body** (400, 14px / 20px): the default, all reading text and control labels.
341
+ - **Label** (400, 12px / 16px): the floor: captions, secondary text, table cells.
342
+ - **Mono** (400, 12px / 16px): literal source code, and nothing else.
343
343
 
344
344
  ### Named rules
345
345
 
346
346
  **The One Face Rule.** One face (Aribau Grotesk), two real weights, a five-step ladder.
347
347
 
348
- **The 13px Floor Rule.** Nothing renders below `--text-s` (13px). Density comes from spacing and layout, never from shrinking type.
348
+ **The 12px Floor Rule.** Nothing renders below `--text-s` (12px). Density comes from spacing and layout, never from shrinking type.
349
349
 
350
350
  ## Layout
351
351
 
@@ -382,7 +382,7 @@ Flat by default with tonal layering. Depth comes from the plane system, warm gre
382
382
 
383
383
  ## Shapes
384
384
 
385
- Soft geometry on a 5-step ladder: `xs` 2px, `sm` 4px, `md` 6px, `lg` 8px, `xl` 12px, plus a pill at `full` (9999px) for chips and avatars. Tailwind's larger aliases (`2xl`, `3xl`) collapse onto the top step, so a stray `rounded-3xl` cannot exceed it.
385
+ Soft geometry on a 5-step ladder: `xs` 2px, `sm` 4px, `md` 6px, `lg` 8px, `xl` 8px, plus a pill at `full` (9999px) for chips and avatars. Tailwind's larger aliases (`2xl`, `3xl`) collapse onto the top step, so a stray `rounded-3xl` cannot exceed it.
386
386
 
387
387
  ### Named rules
388
388
 
@@ -390,7 +390,7 @@ Soft geometry on a 5-step ladder: `xs` 2px, `sm` 4px, `md` 6px, `lg` 8px, `xl` 1
390
390
 
391
391
  ## Components
392
392
 
393
- The catalog is the contract: 322 components, 10 hooks and 98 utilities behind one barrel (`@actioneer/ads`). Import exact, unaliased names. Native elements are for semantic structure only: `<div>`, `<form>`, `<main>`, `<section>`. Never recreate a visual control.
393
+ The catalog is the contract: 323 components, 10 hooks and 98 utilities behind one barrel (`@actioneer/ads`). Import exact, unaliased names. Native elements are for semantic structure only: `<div>`, `<form>`, `<main>`, `<section>`. Never recreate a visual control.
394
394
 
395
395
  ### Sourcing a component
396
396
 
@@ -212,7 +212,7 @@ const V = (a) => {
212
212
  ),
213
213
  /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
214
214
  /* @__PURE__ */ e("div", { className: "truncate text-xs font-medium leading-tight text-foreground", children: /* @__PURE__ */ e(s.Name, {}) }),
215
- /* @__PURE__ */ e("div", { className: "truncate text-[11px] leading-tight text-muted-foreground", children: n ? "Upload failed" : r ? "Uploading…" : t })
215
+ /* @__PURE__ */ e("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: n ? "Upload failed" : r ? "Uploading…" : t })
216
216
  ] }),
217
217
  a && /* @__PURE__ */ e(x, { label: "Remove file" })
218
218
  ] }) }), ie = () => /* @__PURE__ */ e(s.Remove, { asChild: !0, children: /* @__PURE__ */ e(
@@ -26,6 +26,7 @@ import "react-dom";
26
26
  import "motion/react";
27
27
  import "../ripple.js";
28
28
  import "../input.js";
29
+ import "../search-disclosure.js";
29
30
  import "../input-field.js";
30
31
  import "../textarea.js";
31
32
  import "../checkbox.js";
@@ -126,7 +127,7 @@ const m = "application/x-actioneer-harness", S = [
126
127
  instructions: "Write a concise executive brief: lead with the decision or insight, use only decision-relevant evidence, and end with the recommended next action."
127
128
  }
128
129
  ];
129
- function xi() {
130
+ function wi() {
130
131
  const r = d(), t = u((i) => i.attachments), o = new Set(
131
132
  t.filter((i) => i.contentType === m).map((i) => i.name)
132
133
  ), s = (i) => {
@@ -169,7 +170,7 @@ function xi() {
169
170
  ] })
170
171
  ] });
171
172
  }
172
- class wi {
173
+ class Si {
173
174
  constructor() {
174
175
  p(this, "accept", m);
175
176
  }
@@ -202,7 +203,7 @@ ${o}
202
203
  }
203
204
  }
204
205
  export {
205
- xi as ComposerHarness,
206
+ wi as ComposerHarness,
206
207
  m as HARNESS_MIME,
207
- wi as HarnessAttachmentAdapter
208
+ Si as HarnessAttachmentAdapter
208
209
  };
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as r, Fragment as d, jsxs as p } from "react/jsx-runtime";
3
- import { memo as x } from "react";
4
- import { unstable_defaultDirectiveFormatter as v } from "@assistant-ui/react";
3
+ import { memo as v } from "react";
4
+ import { unstable_defaultDirectiveFormatter as x } from "@assistant-ui/react";
5
5
  import { Badge as u } from "./badge.js";
6
6
  function o(s, t) {
7
7
  const a = t == null ? void 0 : t.iconMap, f = t == null ? void 0 : t.fallbackIcon, c = ({ text: n }) => {
@@ -19,7 +19,7 @@ function o(s, t) {
19
19
  "data-directive-type": e.type,
20
20
  "data-directive-id": e.id,
21
21
  "aria-label": `${e.type}: ${e.label}`,
22
- className: "aui-directive-chip items-baseline text-[13px] leading-none [&_svg]:self-center",
22
+ className: "aui-directive-chip items-baseline text-s leading-none [&_svg]:self-center",
23
23
  children: [
24
24
  m && /* @__PURE__ */ r(m, {}),
25
25
  e.label
@@ -32,8 +32,8 @@ function o(s, t) {
32
32
  return c.displayName = "DirectiveText", c;
33
33
  }
34
34
  const h = o(
35
- v
36
- ), I = x(h);
35
+ x
36
+ ), I = v(h);
37
37
  export {
38
38
  I as DirectiveText,
39
39
  o as createDirectiveText
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
2
+ import { jsx as o, jsxs as d } from "react/jsx-runtime";
3
3
  import "@assistant-ui/react-markdown/styles/dot.css";
4
4
  import { unstable_memoizeMarkdownComponents as i, useIsMarkdownCodeBlock as n, MarkdownTextPrimitive as l } from "@assistant-ui/react-markdown";
5
5
  import u from "remark-gfm";
@@ -17,9 +17,9 @@ const h = () => /* @__PURE__ */ o(
17
17
  }
18
18
  ), q = c(h), g = ({ language: t, code: e }) => {
19
19
  const { isCopied: a, copyToClipboard: m } = N();
20
- return /* @__PURE__ */ s("div", { className: "aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-xl border border-b-0 px-3.5 py-1.5 text-xs", children: [
20
+ return /* @__PURE__ */ d("div", { className: "aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-xl border border-b-0 px-3.5 py-1.5 text-xs", children: [
21
21
  /* @__PURE__ */ o("span", { className: "aui-code-header-language text-muted-foreground font-medium lowercase", children: t }),
22
- /* @__PURE__ */ s(x, { tooltip: "Copy", onClick: () => {
22
+ /* @__PURE__ */ d(x, { tooltip: "Copy", onClick: () => {
23
23
  !e || a || m(e);
24
24
  }, children: [
25
25
  !a && /* @__PURE__ */ o(b, { className: "animate-in zoom-in-95 fade-in duration-150 ease-out motion-reduce:animate-none" }),
@@ -30,8 +30,8 @@ const h = () => /* @__PURE__ */ o(
30
30
  copiedDuration: t = 3e3
31
31
  } = {}) => {
32
32
  const [e, a] = p(!1);
33
- return { isCopied: e, copyToClipboard: (d) => {
34
- !d || typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(d).then(
33
+ return { isCopied: e, copyToClipboard: (s) => {
34
+ !s || typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(s).then(
35
35
  () => {
36
36
  a(!0), setTimeout(() => a(!1), t);
37
37
  },
@@ -216,7 +216,7 @@ const h = () => /* @__PURE__ */ o(
216
216
  "pre",
217
217
  {
218
218
  className: r(
219
- "aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-xl border border-t-0 p-3.5 text-[13px] leading-relaxed",
219
+ "aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-xl border border-t-0 p-3.5 text-s leading-relaxed",
220
220
  t
221
221
  ),
222
222
  ...e
@@ -228,7 +228,7 @@ const h = () => /* @__PURE__ */ o(
228
228
  "code",
229
229
  {
230
230
  className: r(
231
- !m && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-[0.85em]",
231
+ !m && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-s",
232
232
  e
233
233
  ),
234
234
  ...a
@@ -23,7 +23,7 @@ function d({
23
23
  {
24
24
  "data-slot": "source-icon-fallback",
25
25
  className: t(
26
- "bg-muted flex size-3 shrink-0 items-center justify-center rounded-sm text-[10px] font-medium",
26
+ "bg-muted flex size-3 shrink-0 items-center justify-center rounded-sm text-xs font-medium",
27
27
  o
28
28
  ),
29
29
  ...c,
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  declare const sizeClasses: {
3
- readonly xs: "size-5 text-[10px]";
3
+ readonly xs: "size-5 text-xs";
4
4
  readonly sm: "size-8 text-xs";
5
5
  readonly md: "size-10 text-xs";
6
6
  readonly lg: "size-12 text-base";
@@ -3,7 +3,7 @@ import { jsx as n, jsxs as b } from "react/jsx-runtime";
3
3
  import * as f from "react";
4
4
  import { cn as s } from "../lib/cn.js";
5
5
  const m = {
6
- xs: "size-5 text-[10px]",
6
+ xs: "size-5 text-xs",
7
7
  sm: "size-8 text-xs",
8
8
  md: "size-10 text-xs",
9
9
  lg: "size-12 text-base",
@@ -9,7 +9,7 @@ export interface BodyPageHeaderProps extends Omit<React.HTMLAttributes<HTMLEleme
9
9
  * Borderless header for a PageBody destination.
10
10
  *
11
11
  * The header owns a 24px inset on every side and keeps the page title at the
12
- * canonical 25px step. Destination icons and compact metadata belong in the
12
+ * canonical 24px title-1 step. Destination icons and compact metadata belong in the
13
13
  * sidebar or content, not beside the title.
14
14
  */
15
15
  export declare const BodyPageHeader: React.ForwardRefExoticComponent<BodyPageHeaderProps & React.RefAttributes<HTMLElement>>;
@@ -13,7 +13,7 @@ const l = d.forwardRef(({ className: a, title: t, actions: e, ...s }, m) => /* @
13
13
  ),
14
14
  ...s,
15
15
  children: [
16
- /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-xl font-medium text-on-warm-grey-primary", children: t }),
16
+ /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-2xl font-medium text-on-warm-grey-primary", children: t }),
17
17
  e ? /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-2", children: e }) : null
18
18
  ]
19
19
  }
@@ -986,7 +986,7 @@ const et = R.forwardRef(
986
986
  ue,
987
987
  {
988
988
  dataKey: n,
989
- tick: { fill: "var(--text-secondary)", fontSize: 11, fontWeight: 500 }
989
+ tick: { fill: "var(--text-secondary)", fontSize: "var(--text-s)", fontWeight: 500 }
990
990
  }
991
991
  ),
992
992
  /* @__PURE__ */ e(
@@ -20,6 +20,7 @@ export * from './resizable-panel';
20
20
  export * from './audio-waveform';
21
21
  export * from './tooltip';
22
22
  export * from './input';
23
+ export * from './search-disclosure';
23
24
  export * from './input-field';
24
25
  export * from './textarea';
25
26
  export * from './checkbox';