@adea-ai/ui 0.134.0 → 0.136.0

package/dist/components/composites/stat/stat.d.ts

@@ -24,8 +24,20 @@ export type StatProps = ComponentProps<'div'> & {
     accent?: boolean;
 };
 export declare function Stat(props: StatProps): JSX.Element;
-/** A row of stats that shares one gap and wraps as the window narrows. */
-export declare function StatGroup(props: ComponentProps<'div'>): JSX.Element;
+/**
+ * A row of stats that shares one gap and wraps as the window narrows.
+ *
+ * By default the column count steps with the *viewport* (two from `sm`, four from
+ * `lg`), which is right for a group that spans the page. A group inside a pane
+ * whose width is not the window's (a docked panel, a resizable column, a view
+ * beside a sidebar) gets the wrong count from a viewport breakpoint. `fit` sizes
+ * from the group's own width instead: as many tiles per row as fit at the
+ * minimum tile width, each growing to share the remainder, however many stats
+ * there are.
+ */
+export declare function StatGroup(props: ComponentProps<'div'> & {
+    fit?: boolean;
+}): JSX.Element;
 /**
  * PropertyList.
  *

package/dist/components/composites/stat/stat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/stat/stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8EAA8E;IAC9E,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;IACrC,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAmDpC;AAED,0EAA0E;AAC1E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,eASrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASvD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASxD;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,eAa1E"}
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/stat/stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAMnD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8EAA8E;IAC9E,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;IACrC,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAmDpC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,eAiBzE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASvD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASvD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,eASxD;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,eAa1E"}

package/dist/components/composites/stat/stat.js

@@ -83,13 +83,23 @@ function Stat(props) {
 		return _el$;
 	})();
 }
-/** A row of stats that shares one gap and wraps as the window narrows. */
+/**
+* A row of stats that shares one gap and wraps as the window narrows.
+*
+* By default the column count steps with the *viewport* (two from `sm`, four from
+* `lg`), which is right for a group that spans the page. A group inside a pane
+* whose width is not the window's (a docked panel, a resizable column, a view
+* beside a sidebar) gets the wrong count from a viewport breakpoint. `fit` sizes
+* from the group's own width instead: as many tiles per row as fit at the
+* minimum tile width, each growing to share the remainder, however many stats
+* there are.
+*/
 function StatGroup(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "fit"]);
 	return (() => {
 		var _el$6 = _tmpl$3();
 		spread(_el$6, mergeProps({ get ["class"]() {
-			return cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-4", local.class);
+			return cn("grid gap-3", local.fit ? "grid-cols-[repeat(auto-fill,minmax(9.375rem,1fr))]" : "sm:grid-cols-2 lg:grid-cols-4", local.class);
 		} }, rest), false, false);
 		return _el$6;
 	})();

package/dist/components/composites/stat/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":["ArrowDownRight","ArrowUpRight","ComponentProps","JSX","Show","splitProps","Dynamic","cn","Heading","Text","StatProps","label","value","Element","unit","delta","deltaTone","accent","Stat","props","local","rest","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","numeric","children","when","variant","tone","_el$4","_tmpl$","_el$5","component","StatGroup","_el$6","_tmpl$3","PropertyList","_el$7","_tmpl$4","PropertyTerm","_el$8","_tmpl$5","PropertyValue","_el$9","_tmpl$6","PropertyRow","term","_el$0","_tmpl$7","_el$1","_el$10","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/composites/stat/stat.tsx"],"sourcesContent":["import { ArrowDownRight, ArrowUpRight } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cn } from '#lib/utils'\nimport { Heading, Text } from '../../ui/typography'\n\n/**\n * Stat.\n *\n * A single measured number with its label and, optionally, its change. The\n * whole component is a decision about honesty: a value shown without its\n * comparison is not information, so `delta` carries the direction, the amount\n * and — through `deltaTone` — whether the direction is *good*. A rising number\n * is not always a rising outcome, and only the caller knows which way is which.\n *\n * `tabular-nums` on the value is what lets two stats in a row be compared\n * without the digits shifting under the reader.\n */\nexport type StatProps = ComponentProps<'div'> & {\n  label: string\n  value: JSX.Element\n  /** A unit or qualifier after the value, e.g. \"ms\", \"of 10\". */\n  unit?: string\n  /** The change, e.g. \"+12% from last week\". */\n  delta?: string\n  /** Whether the change is an improvement. Decides the arrow and the colour. */\n  deltaTone?: 'up' | 'down' | 'neutral'\n  /** Draws the leading accent rule used for a row of headline numbers. */\n  accent?: boolean\n}\n\nexport function Stat(props: StatProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'value',\n    'unit',\n    'delta',\n    'deltaTone',\n    'accent',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"stat\"\n      class={cn(\n        'flex min-w-0 flex-col gap-1 rounded-lg border border-border bg-card p-3',\n        { 'border-t-2 border-t-primary': local.accent },\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"text-muted-foreground truncate text-xs font-medium\">{local.label}</div>\n      <div class=\"flex items-baseline gap-1\">\n        <Heading as=\"span\" size=\"page\" numeric>\n          {local.value}\n        </Heading>\n        <Show when={local.unit}>\n          <Text variant=\"caption\" tone=\"muted\">\n            {local.unit}\n          </Text>\n        </Show>\n      </div>\n      <Show when={local.delta}>\n        <div class=\"text-foreground flex items-center gap-1 text-xs\">\n          <Show when={local.deltaTone === 'up' || local.deltaTone === 'down'}>\n            <Dynamic\n              component={local.deltaTone === 'down' ? ArrowDownRight : ArrowUpRight}\n              aria-hidden=\"true\"\n              class={cn('size-3', {\n                'text-success': local.deltaTone === 'up',\n                'text-destructive': local.deltaTone === 'down',\n              })}\n            />\n          </Show>\n          <span class=\"tabular-nums\">{local.delta}</span>\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  )\n}\n\n/** A row of stats that shares one gap and wraps as the window narrows. */\nexport function StatGroup(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"stat-group\"\n      class={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * PropertyList.\n *\n * A definition list for read-only metadata: the details of a file, a session, a\n * build. This is a `<dl>`, not a table and not a grid of divs, because the\n * relationship being expressed is term-and-definition and the platform has an\n * element for exactly that.\n *\n * Values are selectable by default. Metadata is the thing users copy most and\n * get the least often: a commit hash behind a drag-to-select gesture is a small\n * daily failure.\n */\nexport function PropertyList(props: ComponentProps<'dl'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dl\n      data-slot=\"property-list\"\n      class={cn('grid grid-cols-[auto_1fr] items-baseline gap-x-4 gap-y-2 text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PropertyTerm(props: ComponentProps<'dt'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dt\n      data-slot=\"property-term\"\n      class={cn('text-muted-foreground whitespace-nowrap', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PropertyValue(props: ComponentProps<'dd'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dd\n      data-slot=\"property-value\"\n      class={cn('min-w-0 break-words select-text', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A single term/value pair, for a list built one row at a time. */\nexport function PropertyRow(props: ComponentProps<'div'> & { term: string }) {\n  const [local, rest] = splitProps(props, ['class', 'term', 'children'])\n\n  return (\n    <div\n      data-slot=\"property-row\"\n      class={cn('flex items-baseline justify-between gap-4 text-sm', local.class)}\n      {...rest}\n    >\n      <span class=\"text-muted-foreground shrink-0\">{local.term}</span>\n      <span class=\"min-w-0 truncate text-end select-text\">{local.children}</span>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"stat.js","names":["ArrowDownRight","ArrowUpRight","ComponentProps","JSX","Show","splitProps","Dynamic","cn","Heading","Text","StatProps","label","value","Element","unit","delta","deltaTone","accent","Stat","props","local","rest","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$createComponent","as","size","numeric","children","when","variant","tone","_el$4","_tmpl$","_el$5","component","StatGroup","fit","_el$6","_tmpl$3","PropertyList","_el$7","_tmpl$4","PropertyTerm","_el$8","_tmpl$5","PropertyValue","_el$9","_tmpl$6","PropertyRow","term","_el$0","_tmpl$7","_el$1","_el$10","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/composites/stat/stat.tsx"],"sourcesContent":["import { ArrowDownRight, ArrowUpRight } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { cn } from '#lib/utils'\nimport { Heading, Text } from '../../ui/typography'\n\n/**\n * Stat.\n *\n * A single measured number with its label and, optionally, its change. The\n * whole component is a decision about honesty: a value shown without its\n * comparison is not information, so `delta` carries the direction, the amount\n * and — through `deltaTone` — whether the direction is *good*. A rising number\n * is not always a rising outcome, and only the caller knows which way is which.\n *\n * `tabular-nums` on the value is what lets two stats in a row be compared\n * without the digits shifting under the reader.\n */\nexport type StatProps = ComponentProps<'div'> & {\n  label: string\n  value: JSX.Element\n  /** A unit or qualifier after the value, e.g. \"ms\", \"of 10\". */\n  unit?: string\n  /** The change, e.g. \"+12% from last week\". */\n  delta?: string\n  /** Whether the change is an improvement. Decides the arrow and the colour. */\n  deltaTone?: 'up' | 'down' | 'neutral'\n  /** Draws the leading accent rule used for a row of headline numbers. */\n  accent?: boolean\n}\n\nexport function Stat(props: StatProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'label',\n    'value',\n    'unit',\n    'delta',\n    'deltaTone',\n    'accent',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"stat\"\n      class={cn(\n        'flex min-w-0 flex-col gap-1 rounded-lg border border-border bg-card p-3',\n        { 'border-t-2 border-t-primary': local.accent },\n        local.class\n      )}\n      {...rest}\n    >\n      <div class=\"text-muted-foreground truncate text-xs font-medium\">{local.label}</div>\n      <div class=\"flex items-baseline gap-1\">\n        <Heading as=\"span\" size=\"page\" numeric>\n          {local.value}\n        </Heading>\n        <Show when={local.unit}>\n          <Text variant=\"caption\" tone=\"muted\">\n            {local.unit}\n          </Text>\n        </Show>\n      </div>\n      <Show when={local.delta}>\n        <div class=\"text-foreground flex items-center gap-1 text-xs\">\n          <Show when={local.deltaTone === 'up' || local.deltaTone === 'down'}>\n            <Dynamic\n              component={local.deltaTone === 'down' ? ArrowDownRight : ArrowUpRight}\n              aria-hidden=\"true\"\n              class={cn('size-3', {\n                'text-success': local.deltaTone === 'up',\n                'text-destructive': local.deltaTone === 'down',\n              })}\n            />\n          </Show>\n          <span class=\"tabular-nums\">{local.delta}</span>\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  )\n}\n\n/**\n * A row of stats that shares one gap and wraps as the window narrows.\n *\n * By default the column count steps with the *viewport* (two from `sm`, four from\n * `lg`), which is right for a group that spans the page. A group inside a pane\n * whose width is not the window's (a docked panel, a resizable column, a view\n * beside a sidebar) gets the wrong count from a viewport breakpoint. `fit` sizes\n * from the group's own width instead: as many tiles per row as fit at the\n * minimum tile width, each growing to share the remainder, however many stats\n * there are.\n */\nexport function StatGroup(props: ComponentProps<'div'> & { fit?: boolean }) {\n  const [local, rest] = splitProps(props, ['class', 'fit'])\n  return (\n    <div\n      data-slot=\"stat-group\"\n      class={cn(\n        'grid gap-3',\n        // 9.375rem is 150px at the default root size: room for a label of about\n        // twenty characters and a six-digit value before the tile truncates.\n        local.fit\n          ? 'grid-cols-[repeat(auto-fill,minmax(9.375rem,1fr))]'\n          : 'sm:grid-cols-2 lg:grid-cols-4',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * PropertyList.\n *\n * A definition list for read-only metadata: the details of a file, a session, a\n * build. This is a `<dl>`, not a table and not a grid of divs, because the\n * relationship being expressed is term-and-definition and the platform has an\n * element for exactly that.\n *\n * Values are selectable by default. Metadata is the thing users copy most and\n * get the least often: a commit hash behind a drag-to-select gesture is a small\n * daily failure.\n */\nexport function PropertyList(props: ComponentProps<'dl'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dl\n      data-slot=\"property-list\"\n      class={cn('grid grid-cols-[auto_1fr] items-baseline gap-x-4 gap-y-2 text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PropertyTerm(props: ComponentProps<'dt'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dt\n      data-slot=\"property-term\"\n      class={cn('text-muted-foreground whitespace-nowrap', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function PropertyValue(props: ComponentProps<'dd'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <dd\n      data-slot=\"property-value\"\n      class={cn('min-w-0 break-words select-text', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A single term/value pair, for a list built one row at a time. */\nexport function PropertyRow(props: ComponentProps<'div'> & { term: string }) {\n  const [local, rest] = splitProps(props, ['class', 'term', 'children'])\n\n  return (\n    <div\n      data-slot=\"property-row\"\n      class={cn('flex items-baseline justify-between gap-4 text-sm', local.class)}\n      {...rest}\n    >\n      <span class=\"text-muted-foreground shrink-0\">{local.term}</span>\n      <span class=\"min-w-0 truncate text-end select-text\">{local.children}</span>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/callout/callout.d.ts

@@ -0,0 +1,72 @@
+import type { ComponentProps } from 'solid-js';
+import { type VariantProps } from '#lib/variants';
+/**
+ * Callout.
+ *
+ * A quiet aside that belongs to the content around it: the summary at the top of
+ * an answer, a note in documentation, a remembered fact beside the reply that
+ * used it. It is a card-coloured block with one rule on its start edge, and
+ * nothing about it interrupts the reader.
+ *
+ * That is the difference from `Alert`. An `Alert` is a message about the state of
+ * the surface it sits in — a failed sync, a validation summary — so it is always
+ * `role="alert"`, a live announcement, with a tone glyph and a tinted status
+ * surface. A callout is static page content: a plain `div` with `role="note"`, no
+ * live region, no icon, and no tint. A caller whose note really is a status
+ * message uses `Alert`; one whose note needs a different landmark role passes
+ * `role`. Reach for `Card` when the block is a self-contained object with its own
+ * header, content and footer; a callout has no parts beyond an optional
+ * `CalloutTitle`.
+ *
+ * The rule is the only thing that varies by `variant`: `default` is the accent
+ * (`--primary`), and the four status hues use the same tokens `Alert` does. The
+ * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
+ * stay square because a rounded box would curve the rule into a crescent.
+ *
+ * `size` is the padding rung and the rule's weight together, so a caller never
+ * sets `p-*` or a border width to make one denser. The rungs are Cortana's three
+ * answer-view callouts, expressed in the Tailwind spacing scale:
+ *
+ * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
+ * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
+ * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
+ *
+ * Type size and colour are inherited rather than set (only the card foreground is
+ * applied), so a callout in a dense panel and one in an article both read at the
+ * size of the text around them.
+ *
+ * Text that has no break opportunity (a 200-character token, a URL, a file path)
+ * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
+ * and not `break-word`, because only `anywhere` lowers the box's min-content width:
+ * a callout that is a flex or grid item (auto minimum size) then shrinks to its
+ * track instead of stretching it. The callout's own padding, rule and width are
+ * untouched, so none of its sizing differs from Cortana's.
+ *
+ * The block is deliberately not a flex or grid container: its children are inline
+ * text, links and code, and a flex root would turn each of those into a separate
+ * item and break the line.
+ */
+export declare const calloutVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>;
+export declare function Callout(props: CalloutProps): import("solid-js").JSX.Element;
+/**
+ * An optional heading line for the callout. It is a styled `div`, not a heading
+ * element: a callout sits inside someone else's outline, and a fixed heading
+ * level would break it. Pass `role="heading"` with `aria-level` where the
+ * content does belong in the outline.
+ *
+ * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
+ * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
+ * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
+ * bare text, the most common body. The unconditional margin is the less
+ * surprising failure: it is never missing where text follows. The price is the
+ * title-only callout, which would end 4px taller than its padding says. Pass
+ * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
+ * shows it.
+ */
+export declare function CalloutTitle(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
+//# sourceMappingURL=callout.d.ts.map

package/dist/components/ui/callout/callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/callout/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,eAAe;;;8EAsB3B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAEvF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,kCAU1C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD"}

package/dist/components/ui/callout/callout.js

@@ -0,0 +1,123 @@
+import { cn } from "../../../lib/utils.js";
+import { cva } from "../../../lib/variants.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/ui/callout/callout.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=callout role=note>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=callout-title>`);
+/**
+* Callout.
+*
+* A quiet aside that belongs to the content around it: the summary at the top of
+* an answer, a note in documentation, a remembered fact beside the reply that
+* used it. It is a card-coloured block with one rule on its start edge, and
+* nothing about it interrupts the reader.
+*
+* That is the difference from `Alert`. An `Alert` is a message about the state of
+* the surface it sits in — a failed sync, a validation summary — so it is always
+* `role="alert"`, a live announcement, with a tone glyph and a tinted status
+* surface. A callout is static page content: a plain `div` with `role="note"`, no
+* live region, no icon, and no tint. A caller whose note really is a status
+* message uses `Alert`; one whose note needs a different landmark role passes
+* `role`. Reach for `Card` when the block is a self-contained object with its own
+* header, content and footer; a callout has no parts beyond an optional
+* `CalloutTitle`.
+*
+* The rule is the only thing that varies by `variant`: `default` is the accent
+* (`--primary`), and the four status hues use the same tokens `Alert` does. The
+* rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
+* stay square because a rounded box would curve the rule into a crescent.
+*
+* `size` is the padding rung and the rule's weight together, so a caller never
+* sets `p-*` or a border width to make one denser. The rungs are Cortana's three
+* answer-view callouts, expressed in the Tailwind spacing scale:
+*
+* - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
+* - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
+* - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
+*
+* Type size and colour are inherited rather than set (only the card foreground is
+* applied), so a callout in a dense panel and one in an article both read at the
+* size of the text around them.
+*
+* Text that has no break opportunity (a 200-character token, a URL, a file path)
+* wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
+* and not `break-word`, because only `anywhere` lowers the box's min-content width:
+* a callout that is a flex or grid item (auto minimum size) then shrinks to its
+* track instead of stretching it. The callout's own padding, rule and width are
+* untouched, so none of its sizing differs from Cortana's.
+*
+* The block is deliberately not a flex or grid container: its children are inline
+* text, links and code, and a flex root would turn each of those into a separate
+* item and break the line.
+*/
+var calloutVariants = cva("bg-card text-card-foreground block rounded-none wrap-anywhere", {
+	variants: {
+		variant: {
+			default: "border-s-primary",
+			destructive: "border-s-destructive",
+			success: "border-s-success",
+			warning: "border-s-warning",
+			info: "border-s-info"
+		},
+		size: {
+			/** 12px block / 14px inline padding, 2px rule: a short inline note. */
+			sm: "border-s-2 px-3.5 py-3",
+			/** 18px block / 20px inline padding, 3px rule: a supporting aside. */
+			md: "border-s-3 px-5 py-4.5",
+			/** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
+			lg: "border-s-3 px-6 py-5.5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+function Callout(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"variant",
+		"size"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return cn(calloutVariants({
+				variant: local.variant,
+				size: local.size
+			}), local.class);
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+/**
+* An optional heading line for the callout. It is a styled `div`, not a heading
+* element: a callout sits inside someone else's outline, and a fixed heading
+* level would break it. Pass `role="heading"` with `aria-level` where the
+* content does belong in the outline.
+*
+* The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+* paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
+* as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
+* from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
+* bare text, the most common body. The unconditional margin is the less
+* surprising failure: it is never missing where text follows. The price is the
+* title-only callout, which would end 4px taller than its padding says. Pass
+* `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
+* shows it.
+*/
+function CalloutTitle(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return cn("mb-1 font-medium tracking-tight", local.class);
+		} }, rest), false, false);
+		return _el$2;
+	})();
+}
+//#endregion
+export { Callout, CalloutTitle, calloutVariants };
+
+//# sourceMappingURL=callout.js.map

package/dist/components/ui/callout/callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","Callout","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n  'bg-card text-card-foreground block rounded-none wrap-anywhere',\n  {\n    variants: {\n      variant: {\n        default: 'border-s-primary',\n        destructive: 'border-s-destructive',\n        success: 'border-s-success',\n        warning: 'border-s-warning',\n        info: 'border-s-info',\n      },\n      size: {\n        /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n        sm: 'border-s-2 px-3.5 py-3',\n        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n        md: 'border-s-3 px-5 py-4.5',\n        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n        lg: 'border-s-3 px-6 py-5.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nexport function Callout(props: CalloutProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])\n  return (\n    <div\n      data-slot=\"callout\"\n      role=\"note\"\n      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. The unconditional margin is the less\n * surprising failure: it is never missing where text follows. The price is the\n * title-only callout, which would end 4px taller than its padding says. Pass\n * `class=\"mb-0\"` there (`cn` lets the caller's margin win); the `WithTitle` story\n * shows it.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"callout-title\"\n      class={cn('mb-1 font-medium tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaK,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBM,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO;EAAC;EAAS;EAAW;CAAM,CAAC;CACpE,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWtB,GAAGC,gBAAgB;IAAEE,SAASc,MAAMd;IAASM,MAAMQ,MAAMR;GAAK,CAAC,GAAGQ,MAAMM,KAAK;EAAC,EAAA,GACjFL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;;;;;;;;;;;;;;;;AAkBA,SAAgBK,aAAaR,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWtB,GAAG,mCAAmCiB,MAAMM,KAAK;EAAC,EAAA,GACrDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/callout/index.d.ts

@@ -0,0 +1,2 @@
+export { Callout, CalloutTitle, calloutVariants, type CalloutProps } from './callout';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/callout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/callout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/ui/callout/index.js

@@ -0,0 +1,2 @@
+import { Callout, CalloutTitle, calloutVariants } from "./callout.js";
+export { Callout, CalloutTitle, calloutVariants };

package/dist/components/ui/card/card.d.ts

@@ -24,6 +24,15 @@ export declare const cardVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants>;
 export declare function Card(props: CardProps): import("solid-js").JSX.Element;
+/**
+ * The header is a grid so that `CardAction` has tracks to be placed in: the
+ * action is a direct child that takes a second column spanning the title and
+ * description rows. A flex column gives `col-start-2` nothing to land on and
+ * the action would simply stack under the copy. The extra column exists only
+ * for a direct-child action: a wrapper around it is then the header's single
+ * grid item, so it keeps the full width. A header without an action lays out as
+ * it always did (one full-width column, 4px between its children).
+ */
 export declare function CardHeader(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
 export declare function CardTitle(props: ComponentProps<'div'>): import("solid-js").JSX.Element;
 export declare function CardDescription(props: ComponentProps<'div'>): import("solid-js").JSX.Element;

package/dist/components/ui/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAItD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY;;8EAexB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEjF,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,kCAKpC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAKtD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASrD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS3D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAStD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAGvD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAGtD"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAItD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY;;8EAexB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEjF,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,kCAKpC;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAYtD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASrD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS3D;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAStD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAGvD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAGtD"}

package/dist/components/ui/card/card.js

@@ -51,12 +51,21 @@ function Card(props) {
 		return _el$;
 	})();
 }
+/**
+* The header is a grid so that `CardAction` has tracks to be placed in: the
+* action is a direct child that takes a second column spanning the title and
+* description rows. A flex column gives `col-start-2` nothing to land on and
+* the action would simply stack under the copy. The extra column exists only
+* for a direct-child action: a wrapper around it is then the header's single
+* grid item, so it keeps the full width. A header without an action lays out as
+* it always did (one full-width column, 4px between its children).
+*/
 function CardHeader(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return (() => {
 		var _el$2 = _tmpl$2();
 		spread(_el$2, mergeProps({ get ["class"]() {
-			return cn("flex flex-col gap-1 px-4", local.class);
+			return cn("grid grid-cols-1 auto-rows-min gap-x-4 gap-y-1 px-4 has-[>[data-slot=card-action]]:grid-cols-[minmax(0,1fr)_auto]", local.class);
 		} }, rest), false, false);
 		return _el$2;
 	})();

package/dist/components/ui/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","headingVariants","cardVariants","variants","size","default","sm","flush","defaultVariants","CardProps","Card","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CardHeader","_el$2","_tmpl$2","CardTitle","_el$3","_tmpl$3","leading","CardDescription","_el$4","_tmpl$4","CardAction","_el$5","_tmpl$5","CardContent","_el$6","_tmpl$6","CardFooter","_el$7","_tmpl$7","_$mergeProps"],"sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { headingVariants } from '../typography'\n\n/**\n * Card.\n *\n * A surface that sits on the canvas. Every card carries its own edge — a\n * border — because in the light theme `--card` is one faint step off a white\n * `--background`, and a borderless card there all but disappears. Making the border\n * structural rather than optional is what stops one app's cards from reading\n * as floating panels and another's as nothing at all.\n *\n * The parts are separate components rather than a template because a card's\n * header, content and footer have different padding on purpose: the header and\n * footer are tight, the content breathes.\n *\n * `size` is the card's padding rung, so a caller never sets `p-*` or `gap-*` on\n * a card to make it denser. `sm` tightens the card and its header, content and\n * footer together (the parts' inline padding follows the card, so they stay\n * aligned with each other); `flush` removes the block padding and gap for a\n * card whose body is a list of rows or a scroll area that runs edge to edge.\n */\nexport const cardVariants = cva(\n  'bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-xs',\n  {\n    variants: {\n      size: {\n        /** 16px block padding and gap; the parts carry 16px inline padding. */\n        default: 'gap-4 py-4',\n        /** 12px everywhere: a dense settings or status card. */\n        sm: 'gap-3 py-3 *:data-[slot=card-content]:px-3 *:data-[slot=card-footer]:px-3 *:data-[slot=card-header]:px-3',\n        /** No block padding or gap: the card hosts a row list or a scroller. */\n        flush: 'gap-0 py-0',\n      },\n    },\n    defaultVariants: { size: 'default' },\n  }\n)\n\nexport type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants>\n\nexport function Card(props: CardProps) {\n  const [local, rest] = splitProps(props, ['class', 'size'])\n  return (\n    <div data-slot=\"card\" class={cn(cardVariants({ size: local.size }), local.class)} {...rest} />\n  )\n}\n\nexport function CardHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div data-slot=\"card-header\" class={cn('flex flex-col gap-1 px-4', local.class)} {...rest} />\n  )\n}\n\nexport function CardTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-title\"\n      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-description\"\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardAction(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-action\"\n      class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"card-content\" class={cn('px-4', local.class)} {...rest} />\n}\n\nexport function CardFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"card-footer\" class={cn('flex items-center px-4', local.class)} {...rest} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAaM,eAAeJ,IAC1B,wFACA;CACEK,UAAU,EACRC,MAAM;;EAEJC,SAAS;;EAETC,IAAI;;EAEJC,OAAO;CACT,EACF;CACAC,iBAAiB,EAAEJ,MAAM,UAAU;AACrC,CACF;AAIA,SAAgBM,KAAKC,OAAkB;CACrC,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,SAAS,MAAM,CAAC;CACzD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAC+BjB,GAAGE,aAAa,EAAEE,MAAMQ,MAAMR,KAAK,CAAC,GAAGQ,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAE9F;AAEA,SAAgBK,WAAWR,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OACsCjB,GAAG,4BAA4BY,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAE7F;AAEA,SAAgBE,UAAUX,OAA8B;CACtD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAY,QAAAC,QAAA;EAAAR,OAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjB,GAAGC,gBAAgB;IAAEG,MAAM;IAAQqB,SAAS;GAAO,CAAC,GAAGb,MAAMM,KAAK;EAAC,EAAA,GACtEL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAU;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBG,gBAAgBf,OAA8B;CAC5D,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAgB,QAAAC,QAAA;EAAAZ,OAAAW,OAAAV,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjB,GAAG,iCAAiCY,MAAMM,KAAK;EAAC,EAAA,GACnDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAc;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,WAAWlB,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAmB,QAAAC,QAAA;EAAAf,OAAAc,OAAAb,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjB,GAAG,kEAAkEY,MAAMM,KAAK;EAAC,EAAA,GACpFL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAiB;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBE,YAAYrB,OAA8B;CACxD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAsB,QAAAC,QAAA;EAAAlB,OAAAiB,OAAAhB,WAAA,EAAA,KAAA,WAAA;GAAA,OAA4CjB,GAAG,QAAQY,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAoB;CAAA,EAAA,CAAA;AAC/E;AAEA,SAAgBE,WAAWxB,OAA8B;CACvD,MAAM,CAACC,OAAOC,QAAQhB,WAAWc,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAyB,QAAAC,QAAA;EAAArB,OAAAoB,OAAAnB,WAAA,EAAA,KAAA,WAAA;GAAA,OAA2CjB,GAAG,0BAA0BY,MAAMM,KAAK;EAAC,EAAA,GAAML,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAuB;CAAA,EAAA,CAAA;AAChG"}
+{"version":3,"file":"card.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","headingVariants","cardVariants","variants","size","default","sm","flush","defaultVariants","CardProps","Card","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CardHeader","_el$2","_tmpl$2","CardTitle","_el$3","_tmpl$3","leading","CardDescription","_el$4","_tmpl$4","CardAction","_el$5","_tmpl$5","CardContent","_el$6","_tmpl$6","CardFooter","_el$7","_tmpl$7","_$mergeProps"],"sources":["../../../../src/components/ui/card/card.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { headingVariants } from '../typography'\n\n/**\n * Card.\n *\n * A surface that sits on the canvas. Every card carries its own edge — a\n * border — because in the light theme `--card` is one faint step off a white\n * `--background`, and a borderless card there all but disappears. Making the border\n * structural rather than optional is what stops one app's cards from reading\n * as floating panels and another's as nothing at all.\n *\n * The parts are separate components rather than a template because a card's\n * header, content and footer have different padding on purpose: the header and\n * footer are tight, the content breathes.\n *\n * `size` is the card's padding rung, so a caller never sets `p-*` or `gap-*` on\n * a card to make it denser. `sm` tightens the card and its header, content and\n * footer together (the parts' inline padding follows the card, so they stay\n * aligned with each other); `flush` removes the block padding and gap for a\n * card whose body is a list of rows or a scroll area that runs edge to edge.\n */\nexport const cardVariants = cva(\n  'bg-card text-card-foreground flex flex-col rounded-xl border border-border shadow-xs',\n  {\n    variants: {\n      size: {\n        /** 16px block padding and gap; the parts carry 16px inline padding. */\n        default: 'gap-4 py-4',\n        /** 12px everywhere: a dense settings or status card. */\n        sm: 'gap-3 py-3 *:data-[slot=card-content]:px-3 *:data-[slot=card-footer]:px-3 *:data-[slot=card-header]:px-3',\n        /** No block padding or gap: the card hosts a row list or a scroller. */\n        flush: 'gap-0 py-0',\n      },\n    },\n    defaultVariants: { size: 'default' },\n  }\n)\n\nexport type CardProps = ComponentProps<'div'> & VariantProps<typeof cardVariants>\n\nexport function Card(props: CardProps) {\n  const [local, rest] = splitProps(props, ['class', 'size'])\n  return (\n    <div data-slot=\"card\" class={cn(cardVariants({ size: local.size }), local.class)} {...rest} />\n  )\n}\n\n/**\n * The header is a grid so that `CardAction` has tracks to be placed in: the\n * action is a direct child that takes a second column spanning the title and\n * description rows. A flex column gives `col-start-2` nothing to land on and\n * the action would simply stack under the copy. The extra column exists only\n * for a direct-child action: a wrapper around it is then the header's single\n * grid item, so it keeps the full width. A header without an action lays out as\n * it always did (one full-width column, 4px between its children).\n */\nexport function CardHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-header\"\n      class={cn(\n        'grid grid-cols-1 auto-rows-min gap-x-4 gap-y-1 px-4 has-[>[data-slot=card-action]]:grid-cols-[minmax(0,1fr)_auto]',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CardTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-title\"\n      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-description\"\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardAction(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"card-action\"\n      class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CardContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"card-content\" class={cn('px-4', local.class)} {...rest} />\n}\n\nexport function CardFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"card-footer\" class={cn('flex items-center px-4', local.class)} {...rest} />\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/ui/breadcrumb';
 export * from './components/ui/button';
 export * from './components/ui/button-group';
 export * from './components/ui/calendar';
+export * from './components/ui/callout';
 export * from './components/ui/card';
 export * from './components/ui/checkbox';
 export * from './components/ui/collapsible';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -14,6 +14,7 @@ import { Button, buttonVariants } from "./components/ui/button/button.js";
 import { Separator } from "./components/ui/separator/separator.js";
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "./components/ui/button-group/button-group.js";
 import { CalendarSurface, DatePicker } from "./components/ui/calendar/calendar.js";
+import { Callout, CalloutTitle, calloutVariants } from "./components/ui/callout/callout.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/ui/card/card.js";
 import { Checkbox, CheckboxDescription, CheckboxLabel } from "./components/ui/checkbox/checkbox.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible/collapsible.js";
@@ -145,4 +146,4 @@ import { AboutDialog } from "./components/composites/about-dialog/about-dialog.j
 import { HelpCenter } from "./components/composites/help-center/help-center.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { writeClipboardText } from "./lib/clipboard.js";
-export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, CommandStatus, ComposerAttachmentButton, ComposerHint, ComposerMenu, ComposerMenuItem, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualSidebar, ConversationAvatar, ConversationPane, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, REDUCED_TRANSPARENCY_QUERY, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, TreeRowActions, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, cardVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, createVersionedPersistence, cva, defaultDarkThemeId, defaultLightThemeId, defaultPreferenceStorage, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, editorPaletteFor, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, fontZoomShortcut, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isCustomAccent, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, localStoragePersistence, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeCustomAccent, normalizeLayout, normalizeSurface, paintAccentRoles, parseDiff, plainTextFromMarkdown, platformModifierKey, pruneBlocks, quarantineRecord, radiusTokens, readLegacyValue, readVersionedRecord, recollapsePastes, recoveryEnvelope, recoveryKeyFor, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveAccentRoles, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolveSurface, resolveSurfaceState, resolveVariant, resolvedDensity, searchShortcutKeyshortcuts, searchShortcutLabel, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stepAppearanceFontSizes, stripTrailingBlankLines, surfaceAlpha, surfaceInteractive, swapPanes, terminalCssVariables, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themeSurfaces, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, tokensAsHex, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useOptionalTheme, useSideRail, useTheme, validateTheme, validateThemeRegistry, variantFromRecord, withAccent, writeClipboardText, writeVersionedRecord, zIndexTokens };
+export { APPEARANCE_EDITOR_FONT_AXES, APPEARANCE_EDITOR_FONT_SIZE_MAX, APPEARANCE_EDITOR_FONT_SIZE_MIN, AboutDialog, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnnotationSurface, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearanceEditorActions, AppearanceFontSettingsGroup, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Callout, CalloutTitle, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandHint, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, CommandStatus, ComposerAttachmentButton, ComposerHint, ComposerMenu, ComposerMenuItem, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualSidebar, ConversationAvatar, ConversationPane, ConversationSurface, DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, Heading, HelpCenter, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdChord, KbdGroup, Label, ListGroup, ListRow, ListRowControl, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, PixelResizeHandle, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, REDUCED_TRANSPARENCY_QUERY, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, SceneControls, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavLabel, SidebarNavResizeHandle, SidebarNavRow, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, Tree, TreeRow, TreeRowActions, UpdateChannelControl, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, appearancePreviewThemes, applyAppearanceFontSettings, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, calloutVariants, cardVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createAppMenuItems, createLayoutState, createVersionedPersistence, cva, defaultDarkThemeId, defaultLightThemeId, defaultPreferenceStorage, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, editorPaletteFor, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, fontSettingsBootstrapScript, fontZoomShortcut, formatBytes, formatReleaseDate, formatToken, headingElement, headingVariants, initialsFrom, inlineScriptLiteral, isCustomAccent, isPasteBlock, isThemeAccentId, itemVariants, kbdChordKeys, kbdGroupVariants, kbdVariants, keyedRows, layoutDepth, listLeaves, localStoragePersistence, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeAppearanceEditorFontSettings, normalizeAppearanceEditorFontSize, normalizeCustomAccent, normalizeLayout, normalizeSurface, paintAccentRoles, parseDiff, plainTextFromMarkdown, platformModifierKey, pruneBlocks, quarantineRecord, radiusTokens, readLegacyValue, readVersionedRecord, recollapsePastes, recoveryEnvelope, recoveryKeyFor, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveAccentPreset, resolveAccentRoles, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolveSurface, resolveSurfaceState, resolveVariant, resolvedDensity, searchShortcutKeyshortcuts, searchShortcutLabel, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, splitPaneBalanced, statusDotVariants, stepAppearanceFontSizes, stripTrailingBlankLines, surfaceAlpha, surfaceInteractive, swapPanes, terminalCssVariables, textElement, textVariants, textareaVariants, themeAccentsFor, themeById, themeCssVariables, themeFamilies, themeRecordById, themeRecords, themeScript, themeSurfaces, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, tokensAsHex, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useOptionalTheme, useSideRail, useTheme, validateTheme, validateThemeRegistry, variantFromRecord, withAccent, writeClipboardText, writeVersionedRecord, zIndexTokens };

package/dist/r/callout.json

@@ -0,0 +1,22 @@
+{
+  "name": "callout",
+  "type": "registry:ui",
+  "title": "Callout",
+  "description": "",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/callout/callout.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/callout/callout.tsx"
+    },
+    {
+      "path": "src/components/ui/callout/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/callout/index.ts"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -297,6 +297,28 @@
         }
       ]
     },
+    {
+      "name": "callout",
+      "type": "registry:ui",
+      "title": "Callout",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/callout/callout.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/callout/callout.tsx"
+        },
+        {
+          "path": "src/components/ui/callout/index.ts",
+          "type": "registry:ui",
+          "target": "components/ui/callout/index.ts"
+        }
+      ]
+    },
     {
       "name": "card",
       "type": "registry:ui",

package/dist/r/src/components/composites/stat/stat.tsx

@@ -83,13 +83,31 @@ export function Stat(props: StatProps) {
   )
 }
 
-/** A row of stats that shares one gap and wraps as the window narrows. */
-export function StatGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * A row of stats that shares one gap and wraps as the window narrows.
+ *
+ * By default the column count steps with the *viewport* (two from `sm`, four from
+ * `lg`), which is right for a group that spans the page. A group inside a pane
+ * whose width is not the window's (a docked panel, a resizable column, a view
+ * beside a sidebar) gets the wrong count from a viewport breakpoint. `fit` sizes
+ * from the group's own width instead: as many tiles per row as fit at the
+ * minimum tile width, each growing to share the remainder, however many stats
+ * there are.
+ */
+export function StatGroup(props: ComponentProps<'div'> & { fit?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'fit'])
   return (
     <div
       data-slot="stat-group"
-      class={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-4', local.class)}
+      class={cn(
+        'grid gap-3',
+        // 9.375rem is 150px at the default root size: room for a label of about
+        // twenty characters and a six-digit value before the tile truncates.
+        local.fit
+          ? 'grid-cols-[repeat(auto-fill,minmax(9.375rem,1fr))]'
+          : 'sm:grid-cols-2 lg:grid-cols-4',
+        local.class
+      )}
       {...rest}
     />
   )

package/dist/r/src/components/ui/callout/callout.tsx

@@ -0,0 +1,115 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from '../../../lib/variants'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Callout.
+ *
+ * A quiet aside that belongs to the content around it: the summary at the top of
+ * an answer, a note in documentation, a remembered fact beside the reply that
+ * used it. It is a card-coloured block with one rule on its start edge, and
+ * nothing about it interrupts the reader.
+ *
+ * That is the difference from `Alert`. An `Alert` is a message about the state of
+ * the surface it sits in — a failed sync, a validation summary — so it is always
+ * `role="alert"`, a live announcement, with a tone glyph and a tinted status
+ * surface. A callout is static page content: a plain `div` with `role="note"`, no
+ * live region, no icon, and no tint. A caller whose note really is a status
+ * message uses `Alert`; one whose note needs a different landmark role passes
+ * `role`. Reach for `Card` when the block is a self-contained object with its own
+ * header, content and footer; a callout has no parts beyond an optional
+ * `CalloutTitle`.
+ *
+ * The rule is the only thing that varies by `variant`: `default` is the accent
+ * (`--primary`), and the four status hues use the same tokens `Alert` does. The
+ * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
+ * stay square because a rounded box would curve the rule into a crescent.
+ *
+ * `size` is the padding rung and the rule's weight together, so a caller never
+ * sets `p-*` or a border width to make one denser. The rungs are Cortana's three
+ * answer-view callouts, expressed in the Tailwind spacing scale:
+ *
+ * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
+ * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
+ * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
+ *
+ * Type size and colour are inherited rather than set (only the card foreground is
+ * applied), so a callout in a dense panel and one in an article both read at the
+ * size of the text around them.
+ *
+ * Text that has no break opportunity (a 200-character token, a URL, a file path)
+ * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
+ * and not `break-word`, because only `anywhere` lowers the box's min-content width:
+ * a callout that is a flex or grid item (auto minimum size) then shrinks to its
+ * track instead of stretching it. The callout's own padding, rule and width are
+ * untouched, so none of its sizing differs from Cortana's.
+ *
+ * The block is deliberately not a flex or grid container: its children are inline
+ * text, links and code, and a flex root would turn each of those into a separate
+ * item and break the line.
+ */
+export const calloutVariants = cva(
+  'bg-card text-card-foreground block rounded-none wrap-anywhere',
+  {
+    variants: {
+      variant: {
+        default: 'border-s-primary',
+        destructive: 'border-s-destructive',
+        success: 'border-s-success',
+        warning: 'border-s-warning',
+        info: 'border-s-info',
+      },
+      size: {
+        /** 12px block / 14px inline padding, 2px rule: a short inline note. */
+        sm: 'border-s-2 px-3.5 py-3',
+        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */
+        md: 'border-s-3 px-5 py-4.5',
+        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
+        lg: 'border-s-3 px-6 py-5.5',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+)
+
+export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
+
+export function Callout(props: CalloutProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  return (
+    <div
+      data-slot="callout"
+      role="note"
+      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * An optional heading line for the callout. It is a styled `div`, not a heading
+ * element: a callout sits inside someone else's outline, and a fixed heading
+ * level would break it. Pass `role="heading"` with `aria-level` where the
+ * content does belong in the outline.
+ *
+ * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
+ * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
+ * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
+ * bare text, the most common body. The unconditional margin is the less
+ * surprising failure: it is never missing where text follows. The price is the
+ * title-only callout, which would end 4px taller than its padding says. Pass
+ * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
+ * shows it.
+ */
+export function CalloutTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="callout-title"
+      class={cn('mb-1 font-medium tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}

package/dist/r/src/components/ui/callout/index.ts

@@ -0,0 +1 @@
+export { Callout, CalloutTitle, calloutVariants, type CalloutProps } from './callout'

package/dist/r/src/components/ui/card/card.tsx

@@ -49,10 +49,26 @@ export function Card(props: CardProps) {
   )
 }
 
+/**
+ * The header is a grid so that `CardAction` has tracks to be placed in: the
+ * action is a direct child that takes a second column spanning the title and
+ * description rows. A flex column gives `col-start-2` nothing to land on and
+ * the action would simply stack under the copy. The extra column exists only
+ * for a direct-child action: a wrapper around it is then the header's single
+ * grid item, so it keeps the full width. A header without an action lays out as
+ * it always did (one full-width column, 4px between its children).
+ */
 export function CardHeader(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <div data-slot="card-header" class={cn('flex flex-col gap-1 px-4', local.class)} {...rest} />
+    <div
+      data-slot="card-header"
+      class={cn(
+        'grid grid-cols-1 auto-rows-min gap-x-4 gap-y-1 px-4 has-[>[data-slot=card-action]]:grid-cols-[minmax(0,1fr)_auto]',
+        local.class
+      )}
+      {...rest}
+    />
   )
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.134.0",
+  "version": "0.136.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -297,6 +297,28 @@
         }
       ]
     },
+    {
+      "name": "callout",
+      "type": "registry:ui",
+      "title": "Callout",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/callout/callout.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/callout/callout.tsx"
+        },
+        {
+          "path": "src/components/ui/callout/index.ts",
+          "type": "registry:ui",
+          "target": "components/ui/callout/index.ts"
+        }
+      ]
+    },
     {
       "name": "card",
       "type": "registry:ui",

package/src/components/composites/stat/stat.tsx

@@ -83,13 +83,31 @@ export function Stat(props: StatProps) {
   )
 }
 
-/** A row of stats that shares one gap and wraps as the window narrows. */
-export function StatGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+/**
+ * A row of stats that shares one gap and wraps as the window narrows.
+ *
+ * By default the column count steps with the *viewport* (two from `sm`, four from
+ * `lg`), which is right for a group that spans the page. A group inside a pane
+ * whose width is not the window's (a docked panel, a resizable column, a view
+ * beside a sidebar) gets the wrong count from a viewport breakpoint. `fit` sizes
+ * from the group's own width instead: as many tiles per row as fit at the
+ * minimum tile width, each growing to share the remainder, however many stats
+ * there are.
+ */
+export function StatGroup(props: ComponentProps<'div'> & { fit?: boolean }) {
+  const [local, rest] = splitProps(props, ['class', 'fit'])
   return (
     <div
       data-slot="stat-group"
-      class={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-4', local.class)}
+      class={cn(
+        'grid gap-3',
+        // 9.375rem is 150px at the default root size: room for a label of about
+        // twenty characters and a six-digit value before the tile truncates.
+        local.fit
+          ? 'grid-cols-[repeat(auto-fill,minmax(9.375rem,1fr))]'
+          : 'sm:grid-cols-2 lg:grid-cols-4',
+        local.class
+      )}
       {...rest}
     />
   )

package/src/components/ui/callout/callout.tsx

@@ -0,0 +1,115 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Callout.
+ *
+ * A quiet aside that belongs to the content around it: the summary at the top of
+ * an answer, a note in documentation, a remembered fact beside the reply that
+ * used it. It is a card-coloured block with one rule on its start edge, and
+ * nothing about it interrupts the reader.
+ *
+ * That is the difference from `Alert`. An `Alert` is a message about the state of
+ * the surface it sits in — a failed sync, a validation summary — so it is always
+ * `role="alert"`, a live announcement, with a tone glyph and a tinted status
+ * surface. A callout is static page content: a plain `div` with `role="note"`, no
+ * live region, no icon, and no tint. A caller whose note really is a status
+ * message uses `Alert`; one whose note needs a different landmark role passes
+ * `role`. Reach for `Card` when the block is a self-contained object with its own
+ * header, content and footer; a callout has no parts beyond an optional
+ * `CalloutTitle`.
+ *
+ * The rule is the only thing that varies by `variant`: `default` is the accent
+ * (`--primary`), and the four status hues use the same tokens `Alert` does. The
+ * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners
+ * stay square because a rounded box would curve the rule into a crescent.
+ *
+ * `size` is the padding rung and the rule's weight together, so a caller never
+ * sets `p-*` or a border width to make one denser. The rungs are Cortana's three
+ * answer-view callouts, expressed in the Tailwind spacing scale:
+ *
+ * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.
+ * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.
+ * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.
+ *
+ * Type size and colour are inherited rather than set (only the card foreground is
+ * applied), so a callout in a dense panel and one in an article both read at the
+ * size of the text around them.
+ *
+ * Text that has no break opportunity (a 200-character token, a URL, a file path)
+ * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`
+ * and not `break-word`, because only `anywhere` lowers the box's min-content width:
+ * a callout that is a flex or grid item (auto minimum size) then shrinks to its
+ * track instead of stretching it. The callout's own padding, rule and width are
+ * untouched, so none of its sizing differs from Cortana's.
+ *
+ * The block is deliberately not a flex or grid container: its children are inline
+ * text, links and code, and a flex root would turn each of those into a separate
+ * item and break the line.
+ */
+export const calloutVariants = cva(
+  'bg-card text-card-foreground block rounded-none wrap-anywhere',
+  {
+    variants: {
+      variant: {
+        default: 'border-s-primary',
+        destructive: 'border-s-destructive',
+        success: 'border-s-success',
+        warning: 'border-s-warning',
+        info: 'border-s-info',
+      },
+      size: {
+        /** 12px block / 14px inline padding, 2px rule: a short inline note. */
+        sm: 'border-s-2 px-3.5 py-3',
+        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */
+        md: 'border-s-3 px-5 py-4.5',
+        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */
+        lg: 'border-s-3 px-6 py-5.5',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+)
+
+export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
+
+export function Callout(props: CalloutProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  return (
+    <div
+      data-slot="callout"
+      role="note"
+      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * An optional heading line for the callout. It is a styled `div`, not a heading
+ * element: a callout sits inside someone else's outline, and a fixed heading
+ * level would break it. Pass `role="heading"` with `aria-level` where the
+ * content does belong in the outline.
+ *
+ * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
+ * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
+ * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
+ * bare text, the most common body. The unconditional margin is the less
+ * surprising failure: it is never missing where text follows. The price is the
+ * title-only callout, which would end 4px taller than its padding says. Pass
+ * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
+ * shows it.
+ */
+export function CalloutTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="callout-title"
+      class={cn('mb-1 font-medium tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/callout/index.ts

@@ -0,0 +1 @@
+export { Callout, CalloutTitle, calloutVariants, type CalloutProps } from './callout'

package/src/components/ui/card/card.tsx

@@ -49,10 +49,26 @@ export function Card(props: CardProps) {
   )
 }
 
+/**
+ * The header is a grid so that `CardAction` has tracks to be placed in: the
+ * action is a direct child that takes a second column spanning the title and
+ * description rows. A flex column gives `col-start-2` nothing to land on and
+ * the action would simply stack under the copy. The extra column exists only
+ * for a direct-child action: a wrapper around it is then the header's single
+ * grid item, so it keeps the full width. A header without an action lays out as
+ * it always did (one full-width column, 4px between its children).
+ */
 export function CardHeader(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <div data-slot="card-header" class={cn('flex flex-col gap-1 px-4', local.class)} {...rest} />
+    <div
+      data-slot="card-header"
+      class={cn(
+        'grid grid-cols-1 auto-rows-min gap-x-4 gap-y-1 px-4 has-[>[data-slot=card-action]]:grid-cols-[minmax(0,1fr)_auto]',
+        local.class
+      )}
+      {...rest}
+    />
   )
 }
 

package/src/index.ts

@@ -27,6 +27,7 @@ export * from './components/ui/breadcrumb'
 export * from './components/ui/button'
 export * from './components/ui/button-group'
 export * from './components/ui/calendar'
+export * from './components/ui/callout'
 export * from './components/ui/card'
 export * from './components/ui/checkbox'
 export * from './components/ui/collapsible'