@lar-works/design-system 0.2.1 → 0.3.0

package/README.md

@@ -22,7 +22,11 @@ import { PlusIcon } from '@lar-works/design-system/icons';
 ```
 
 A website that uses the marketing showcase (`Hero`, device frames, `ServerUnit`…) imports
-`@lar-works/design-system/showcase.css` instead of `styles.css`.
+`@lar-works/design-system/showcase.css` instead of `styles.css`, and Lar Factory's board, which composes the `board`
+components (its title bar, counters, desk, loading screen…), imports `@lar-works/design-system/board.css`.
+
+Icons come from `@lar-works/design-system/icons`, and lucide's `DynamicIcon`, which draws an icon by its name and loads
+lucide's name map lazily, from `@lar-works/design-system/icons/dynamic`.
 
 Apps compose these components and never style anything themselves; `@lar-works/config`'s lint rules enforce it.
 `@lar-works/design-system/testing` has helpers for apps' jsdom test setup.

package/dist/actions/Button.d.ts

@@ -1,10 +1,12 @@
 import { ButtonProps } from "@ninna-ui/primitives";
 declare const recipes: {
-  readonly primary: 'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]';
+  readonly primary: "border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]";
   readonly secondary: "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
   readonly quiet: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700";
   readonly row: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700 h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100";
   readonly subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400';
+  /** The primary colour tinted on the card, with no border or shadow, deeper on hover and while its popup is open. */
+  readonly tinted: 'border-transparent bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-base-100))] text-primary shadow-none not-disabled:not-aria-disabled:hover:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] data-[state=open]:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] [&_[data-slot=icon]]:text-current';
   readonly destructive: 'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none';
   readonly 'destructive-quiet': 'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current';
   readonly choice: "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
@@ -16,10 +18,46 @@ declare const recipes: {
 type ButtonProps$1 = Omit<ButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
   variant?: keyof typeof recipes;
   selected?: boolean;
+  /** The dense 28px control with 12px text, as Lar Factory's board draws every button. */
+  compact?: boolean;
+  /** Lets a long label wrap, anywhere in a long word if it must, growing the button, which never grows past its
+   *  container, where it would otherwise clip. */
+  wrap?: boolean;
+  /** A square button showing its `leftIcon` alone, named by its `aria-label`. */
+  iconOnly?: boolean;
+  /** Lets the button shrink in a crowded row: its label truncates, while its `mark` (a trailing character, such as ▾
+   *  or ✓) stays. */
+  shrinks?: boolean;
+  mark?: string;
+  /** Its action is in flight: a spinner, turning even under reduced motion, takes its left icon's place, and it reads
+   *  as busy. `false` leaves out the busy state altogether. */
+  busy?: boolean;
+  /** Draws the button as waiting, with the progress cursor at 70%, while `aria-disabled` holds it for an action in
+   *  flight; `'disabled'` draws it as a disabled button instead, while it keeps its focus (a save with nothing to
+   *  save, say). */
+  pendingLook?: boolean | 'disabled';
 };
 declare const Button$1: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "color" | "radius" | "size" | "variant"> & {
   variant?: keyof typeof recipes;
   selected?: boolean;
+  /** The dense 28px control with 12px text, as Lar Factory's board draws every button. */
+  compact?: boolean;
+  /** Lets a long label wrap, anywhere in a long word if it must, growing the button, which never grows past its
+   *  container, where it would otherwise clip. */
+  wrap?: boolean;
+  /** A square button showing its `leftIcon` alone, named by its `aria-label`. */
+  iconOnly?: boolean;
+  /** Lets the button shrink in a crowded row: its label truncates, while its `mark` (a trailing character, such as ▾
+   *  or ✓) stays. */
+  shrinks?: boolean;
+  mark?: string;
+  /** Its action is in flight: a spinner, turning even under reduced motion, takes its left icon's place, and it reads
+   *  as busy. `false` leaves out the busy state altogether. */
+  busy?: boolean;
+  /** Draws the button as waiting, with the progress cursor at 70%, while `aria-disabled` holds it for an action in
+   *  flight; `'disabled'` draws it as a disabled button instead, while it keeps its focus (a save with nothing to
+   *  save, say). */
+  pendingLook?: boolean | 'disabled';
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export { Button$1 as Button, ButtonProps$1 as ButtonProps };
 //# sourceMappingURL=Button.d.ts.map

package/dist/actions/Button.js

@@ -1,19 +1,33 @@
+import { SpinnerIcon } from "../feedback/Loading.js";
 import { tabbable } from "../foundations/KeyboardFocus.js";
+import { ghostRecipe, outlineRecipe, primaryRecipe } from "./ButtonRecipes.js";
 import { Button } from "@ninna-ui/primitives";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/actions/Button.tsx
 /** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to
 *  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */
-const base = "h-9 gap-2 rounded-md border px-[11px] text-sm font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 sm:h-8 [&_[data-slot=icon]>svg]:size-4";
-const outline = "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
-const ghost = "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700";
+const base = "gap-2 rounded-md border px-[11px] font-medium transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 [&_[data-slot=icon]>svg]:size-4";
+/** The default 36px (32px with a pointer) control, and the compact 28px one with 12px text that dense tools use. */
+const sizes = {
+	default: "h-9 text-sm sm:h-8",
+	compact: "h-7 text-xs sm:h-7"
+};
+/** A label that would clip on a narrow surface wraps instead, growing the button past its height. */
+const wrapping = {
+	nowrap: "whitespace-nowrap",
+	wrap: "h-auto min-h-7 max-w-full min-w-0 py-1 whitespace-normal wrap-anywhere sm:h-auto"
+};
+const outline = outlineRecipe;
+const ghost = ghostRecipe;
 const recipes = {
-	primary: "border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]",
+	primary: primaryRecipe,
 	secondary: outline,
 	quiet: ghost,
 	row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,
 	subtle: "border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400",
+	/** The primary colour tinted on the card, with no border or shadow, deeper on hover and while its popup is open. */
+	tinted: "border-transparent bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-base-100))] text-primary shadow-none not-disabled:not-aria-disabled:hover:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] data-[state=open]:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] [&_[data-slot=icon]]:text-current",
 	destructive: "border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none",
 	"destructive-quiet": "border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current",
 	choice: outline,
@@ -22,8 +36,15 @@ const recipes = {
 	avatar: "size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7",
 	status: "h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0"
 };
+/** An icon-only button is as wide as it is tall, with no padding. */
+const square = {
+	default: "size-9 px-0 sm:size-8",
+	compact: "w-7 px-0"
+};
+const pending = "aria-disabled:cursor-progress aria-disabled:opacity-70";
+const heldDisabled = "aria-disabled:opacity-64";
 const selectedChoice = "border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20";
-const Button$1 = forwardRef(({ variant = "primary", selected, className = "", children, leftIcon, rightIcon, ...props }, ref) => {
+const Button$1 = forwardRef(({ variant = "primary", selected, compact = false, wrap = false, iconOnly = false, shrinks = false, mark, busy, pendingLook = false, className = "", children, leftIcon, rightIcon, ...props }, ref) => {
 	const context = variant === "context";
 	return /* @__PURE__ */ jsx(Button, {
 		ref,
@@ -34,8 +55,14 @@ const Button$1 = forwardRef(({ variant = "primary", selected, className = "", ch
 		variant: "ghost",
 		color: "neutral",
 		"aria-pressed": selected ?? props["aria-pressed"],
-		className: `${base} ${variant === "choice" && selected ? selectedChoice : recipes[variant]} ${selected && variant !== "choice" ? "bg-base-200" : ""} ${className}`,
-		leftIcon: context ? /* @__PURE__ */ jsx("span", {
+		...busy === void 0 ? {} : { "aria-busy": busy || void 0 },
+		"data-wrap": wrap || void 0,
+		...iconOnly ? { "data-icon-only": "" } : {},
+		className: `${base} ${sizes[compact ? "compact" : "default"]} ${wrapping[wrap ? "wrap" : "nowrap"]} ${variant === "choice" && selected ? selectedChoice : recipes[variant]} ${selected && variant !== "choice" ? "bg-base-200" : ""} ${iconOnly ? square[compact ? "compact" : "default"] : ""} ${shrinks ? "max-w-full min-w-0 shrink" : ""} ${pendingLook === "disabled" ? heldDisabled : pendingLook ? pending : ""} ${className}`,
+		leftIcon: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {
+			motion: "always",
+			className: "size-4"
+		}) : context ? /* @__PURE__ */ jsx("span", {
 			className: "text-(--color-header-icon) [&>svg]:size-4",
 			children: leftIcon
 		}) : leftIcon,
@@ -46,7 +73,10 @@ const Button$1 = forwardRef(({ variant = "primary", selected, className = "", ch
 		children: context ? /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children
-		}) : children
+		}) : shrinks ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		}), mark !== void 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", mark] })] }) : children
 	});
 });
 Button$1.displayName = "Button";

package/dist/actions/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","NinnaButton"],"sources":["../../src/actions/Button.tsx"],"sourcesContent":["import { Button as NinnaButton, type ButtonProps as NinnaButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n/** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to\n *  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */\nconst base =\n    'h-9 gap-2 rounded-md border px-[11px] text-sm font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 sm:h-8 [&_[data-slot=icon]>svg]:size-4';\n\nconst outline =\n    'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700';\nconst ghost =\n    'border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700';\n\nconst recipes = {\n    primary:\n        'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]',\n    secondary: outline,\n    quiet: ghost,\n    row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,\n    subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400',\n    destructive:\n        'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none',\n    'destructive-quiet':\n        'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current',\n    choice: outline,\n    context: `${ghost} h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8`,\n    summary: `${ghost} h-7 min-w-0 px-1.5 sm:h-7`,\n    avatar: 'size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7',\n    status: 'h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0',\n} as const;\n\nconst selectedChoice =\n    'border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20';\n\nexport type ButtonProps = Omit<NinnaButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: keyof typeof recipes;\n    selected?: boolean;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n    ({ variant = 'primary', selected, className = '', children, leftIcon, rightIcon, ...props }, ref) => {\n        const context = variant === 'context';\n\n        return (\n            <NinnaButton\n                ref={ref}\n                {...tabbable}\n                {...props}\n                size=\"sm\"\n                radius=\"lg\"\n                variant=\"ghost\"\n                color=\"neutral\"\n                aria-pressed={selected ?? props['aria-pressed']}\n                className={`${base} ${variant === 'choice' && selected ? selectedChoice : recipes[variant]} ${selected && variant !== 'choice' ? 'bg-base-200' : ''} ${className}`}\n                leftIcon={\n                    context ? <span className=\"text-(--color-header-icon) [&>svg]:size-4\">{leftIcon}</span> : leftIcon\n                }\n                rightIcon={context ? <span className=\"text-base-700 [&>svg]:size-3.5\">{rightIcon}</span> : rightIcon}\n            >\n                {context ? <span className=\"truncate\">{children}</span> : children}\n            </NinnaButton>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;AAOA,MAAM,OACF;AAEJ,MAAM,UACF;AACJ,MAAM,QACF;AAEJ,MAAM,UAAU;CACZ,SACI;CACJ,WAAW;CACX,OAAO;CACP,KAAK,GAAG,MAAM;CACd,QAAQ;CACR,aACI;CACJ,qBACI;CACJ,QAAQ;CACR,SAAS,GAAG,MAAM;CAClB,SAAS,GAAG,MAAM;CAClB,QAAQ;CACR,QAAQ;AACZ;AAEA,MAAM,iBACF;AAOJ,MAAaA,WAAS,YACjB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CACjG,MAAM,UAAU,YAAY;CAE5B,OACI,oBAACC,QAAD;EACS;EACL,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,gBAAc,YAAY,MAAM;EAChC,WAAW,GAAG,KAAK,GAAG,YAAY,YAAY,WAAW,iBAAiB,QAAQ,SAAS,GAAG,YAAY,YAAY,WAAW,gBAAgB,GAAG,GAAG;EACvJ,UACI,UAAU,oBAAC,QAAD;GAAM,WAAU;GAA6C,UAAA;EAAe,CAAA,IAAI;EAE9F,WAAW,UAAU,oBAAC,QAAD;GAAM,WAAU;GAAkC,UAAA;EAAgB,CAAA,IAAI;EAE1F,UAAA,UAAU,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,IAAI;CACjD,CAAA;AAErB,CACJ;AAEA,SAAO,cAAc"}
+{"version":3,"file":"Button.js","names":["Button","NinnaButton"],"sources":["../../src/actions/Button.tsx"],"sourcesContent":["import { Button as NinnaButton, type ButtonProps as NinnaButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { SpinnerIcon } from '../feedback/Loading';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { ghostRecipe, outlineRecipe, primaryRecipe } from './ButtonRecipes';\n\n/** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to\n *  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */\nconst base =\n    'gap-2 rounded-md border px-[11px] font-medium transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 [&_[data-slot=icon]>svg]:size-4';\n/** The default 36px (32px with a pointer) control, and the compact 28px one with 12px text that dense tools use. */\nconst sizes = { default: 'h-9 text-sm sm:h-8', compact: 'h-7 text-xs sm:h-7' } as const;\n/** A label that would clip on a narrow surface wraps instead, growing the button past its height. */\nconst wrapping = {\n    nowrap: 'whitespace-nowrap',\n    wrap: 'h-auto min-h-7 max-w-full min-w-0 py-1 whitespace-normal wrap-anywhere sm:h-auto',\n} as const;\n\nconst outline = outlineRecipe;\nconst ghost = ghostRecipe;\n\nconst recipes = {\n    primary: primaryRecipe,\n    secondary: outline,\n    quiet: ghost,\n    row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,\n    subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400',\n    /** The primary colour tinted on the card, with no border or shadow, deeper on hover and while its popup is open. */\n    tinted: 'border-transparent bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-base-100))] text-primary shadow-none not-disabled:not-aria-disabled:hover:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] data-[state=open]:bg-[color-mix(in_srgb,var(--color-primary)_18%,var(--color-base-100))] [&_[data-slot=icon]]:text-current',\n    destructive:\n        'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none',\n    'destructive-quiet':\n        'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current',\n    choice: outline,\n    context: `${ghost} h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8`,\n    summary: `${ghost} h-7 min-w-0 px-1.5 sm:h-7`,\n    avatar: 'size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7',\n    status: 'h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0',\n} as const;\n\n/** An icon-only button is as wide as it is tall, with no padding. */\nconst square = { default: 'size-9 px-0 sm:size-8', compact: 'w-7 px-0' } as const;\nconst pending = 'aria-disabled:cursor-progress aria-disabled:opacity-70';\nconst heldDisabled = 'aria-disabled:opacity-64';\n\nconst selectedChoice =\n    'border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20';\n\nexport type ButtonProps = Omit<NinnaButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: keyof typeof recipes;\n    selected?: boolean;\n    /** The dense 28px control with 12px text, as Lar Factory's board draws every button. */\n    compact?: boolean;\n    /** Lets a long label wrap, anywhere in a long word if it must, growing the button, which never grows past its\n     *  container, where it would otherwise clip. */\n    wrap?: boolean;\n    /** A square button showing its `leftIcon` alone, named by its `aria-label`. */\n    iconOnly?: boolean;\n    /** Lets the button shrink in a crowded row: its label truncates, while its `mark` (a trailing character, such as ▾\n     *  or ✓) stays. */\n    shrinks?: boolean;\n    mark?: string;\n    /** Its action is in flight: a spinner, turning even under reduced motion, takes its left icon's place, and it reads\n     *  as busy. `false` leaves out the busy state altogether. */\n    busy?: boolean;\n    /** Draws the button as waiting, with the progress cursor at 70%, while `aria-disabled` holds it for an action in\n     *  flight; `'disabled'` draws it as a disabled button instead, while it keeps its focus (a save with nothing to\n     *  save, say). */\n    pendingLook?: boolean | 'disabled';\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n    (\n        {\n            variant = 'primary',\n            selected,\n            compact = false,\n            wrap = false,\n            iconOnly = false,\n            shrinks = false,\n            mark,\n            busy,\n            pendingLook = false,\n            className = '',\n            children,\n            leftIcon,\n            rightIcon,\n            ...props\n        },\n        ref,\n    ) => {\n        const context = variant === 'context';\n\n        return (\n            <NinnaButton\n                ref={ref}\n                {...tabbable}\n                {...props}\n                size=\"sm\"\n                radius=\"lg\"\n                variant=\"ghost\"\n                color=\"neutral\"\n                aria-pressed={selected ?? props['aria-pressed']}\n                {...(busy === undefined ? {} : { 'aria-busy': busy || undefined })}\n                data-wrap={wrap || undefined}\n                {...(iconOnly ? { 'data-icon-only': '' } : {})}\n                className={`${base} ${sizes[compact ? 'compact' : 'default']} ${wrapping[wrap ? 'wrap' : 'nowrap']} ${variant === 'choice' && selected ? selectedChoice : recipes[variant]} ${selected && variant !== 'choice' ? 'bg-base-200' : ''} ${iconOnly ? square[compact ? 'compact' : 'default'] : ''} ${shrinks ? 'max-w-full min-w-0 shrink' : ''} ${pendingLook === 'disabled' ? heldDisabled : pendingLook ? pending : ''} ${className}`}\n                leftIcon={\n                    busy ? (\n                        <SpinnerIcon motion=\"always\" className=\"size-4\" />\n                    ) : context ? (\n                        <span className=\"text-(--color-header-icon) [&>svg]:size-4\">{leftIcon}</span>\n                    ) : (\n                        leftIcon\n                    )\n                }\n                rightIcon={context ? <span className=\"text-base-700 [&>svg]:size-3.5\">{rightIcon}</span> : rightIcon}\n            >\n                {context ? (\n                    <span className=\"truncate\">{children}</span>\n                ) : shrinks ? (\n                    <>\n                        <span className=\"truncate\">{children}</span>\n                        {mark !== undefined && <> {mark}</>}\n                    </>\n                ) : (\n                    children\n                )}\n            </NinnaButton>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;AASA,MAAM,OACF;;AAEJ,MAAM,QAAQ;CAAE,SAAS;CAAsB,SAAS;AAAqB;;AAE7E,MAAM,WAAW;CACb,QAAQ;CACR,MAAM;AACV;AAEA,MAAM,UAAU;AAChB,MAAM,QAAQ;AAEd,MAAM,UAAU;CACZ,SAAS;CACT,WAAW;CACX,OAAO;CACP,KAAK,GAAG,MAAM;CACd,QAAQ;;CAER,QAAQ;CACR,aACI;CACJ,qBACI;CACJ,QAAQ;CACR,SAAS,GAAG,MAAM;CAClB,SAAS,GAAG,MAAM;CAClB,QAAQ;CACR,QAAQ;AACZ;;AAGA,MAAM,SAAS;CAAE,SAAS;CAAyB,SAAS;AAAW;AACvE,MAAM,UAAU;AAChB,MAAM,eAAe;AAErB,MAAM,iBACF;AAyBJ,MAAaA,WAAS,YAEd,EACI,UAAU,WACV,UACA,UAAU,OACV,OAAO,OACP,WAAW,OACX,UAAU,OACV,MACA,MACA,cAAc,OACd,YAAY,IACZ,UACA,UACA,WACA,GAAG,SAEP,QACC;CACD,MAAM,UAAU,YAAY;CAE5B,OACI,oBAACC,QAAD;EACS;EACL,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,gBAAc,YAAY,MAAM;EAChC,GAAK,SAAS,KAAA,IAAY,CAAC,IAAI,EAAE,aAAa,QAAQ,KAAA,EAAU;EAChE,aAAW,QAAQ,KAAA;EACnB,GAAK,WAAW,EAAE,kBAAkB,GAAG,IAAI,CAAC;EAC5C,WAAW,GAAG,KAAK,GAAG,MAAM,UAAU,YAAY,WAAW,GAAG,SAAS,OAAO,SAAS,UAAU,GAAG,YAAY,YAAY,WAAW,iBAAiB,QAAQ,SAAS,GAAG,YAAY,YAAY,WAAW,gBAAgB,GAAG,GAAG,WAAW,OAAO,UAAU,YAAY,aAAa,GAAG,GAAG,UAAU,8BAA8B,GAAG,GAAG,gBAAgB,aAAa,eAAe,cAAc,UAAU,GAAG,GAAG;EAC1Z,UACI,OACI,oBAAC,aAAD;GAAa,QAAO;GAAS,WAAU;EAAU,CAAA,IACjD,UACA,oBAAC,QAAD;GAAM,WAAU;GAA6C,UAAA;EAAe,CAAA,IAE5E;EAGR,WAAW,UAAU,oBAAC,QAAD;GAAM,WAAU;GAAkC,UAAA;EAAgB,CAAA,IAAI;EAE1F,UAAA,UACG,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,IAC3C,UACA,qBAAA,YAAA,EAAA,UAAA,CACI,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,GAC1C,SAAS,KAAA,KAAa,qBAAA,YAAA,EAAA,UAAA,CAAE,KAAE,IAAO,EAAA,CAAA,CACpC,EAAA,CAAA,IAEF;CAEK,CAAA;AAErB,CACJ;AAEA,SAAO,cAAc"}

package/dist/actions/ButtonLink.d.ts

@@ -15,7 +15,11 @@ export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
   arrow?: boolean;
   external?: boolean;
   onNavigate?: (href: string) => void;
+  /** The app Button's compact 28px look in place of the marketing one, its `icon` leading it. */
+  compact?: boolean;
+  /** With `compact`, a square link showing its icon alone, named by its `aria-label`. */
+  iconOnly?: boolean;
 }
-export declare function ButtonLink({ variant, size, icon, arrow, external, onNavigate, onClick, children, href, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, size, icon, arrow, external, onNavigate, onClick, compact, iconOnly, children, href, ...props }: ButtonLinkProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ButtonLink.d.ts.map

package/dist/actions/ButtonLink.js

@@ -1,6 +1,7 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ghostRecipe, outlineRecipe, primaryRecipe } from "./ButtonRecipes.js";
 import { ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/actions/ButtonLink.tsx
 /** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */
 const recipes = {
@@ -9,7 +10,32 @@ const recipes = {
 	inverse: "border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]",
 	quiet: "border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]"
 };
-function ButtonLink({ variant = "primary", size = "lg", icon, arrow, external, onNavigate, onClick, children, href, ...props }) {
+/** A compact link is the app Button's compact 28px control with 12px text, in the Button's own recipes, for an action
+*  that opens a page from a dense tool (such as Lar Factory's board). */
+const compactBase = "relative isolate inline-flex h-7 items-center justify-center gap-2 rounded-md border px-[11px] text-xs font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:outline-none [&_[data-slot=icon]>svg]:size-4";
+const compactRecipes = {
+	primary: primaryRecipe,
+	secondary: outlineRecipe,
+	inverse: recipes.inverse,
+	quiet: ghostRecipe
+};
+function ButtonLink({ variant = "primary", size = "lg", icon, arrow, external, onNavigate, onClick, compact = false, iconOnly = false, children, href, ...props }) {
+	if (compact) return /* @__PURE__ */ jsxs("a", {
+		...props,
+		href,
+		...external ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick,
+		"data-slot": "button",
+		...iconOnly ? { "data-icon-only": "" } : {},
+		className: `${compactBase} ${compactRecipes[variant]} ${iconOnly ? "w-7 px-0" : ""}`,
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			"data-slot": "icon",
+			children: icon
+		}), children]
+	});
 	return /* @__PURE__ */ jsxs("a", {
 		...tabbable,
 		...props,

package/dist/actions/ButtonLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.js","names":[],"sources":["../../src/actions/ButtonLink.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */\nconst recipes = {\n    primary:\n        'border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none',\n    secondary:\n        'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50',\n    inverse:\n        'border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]',\n    quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]',\n} as const;\n\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {\n    href: string;\n    variant?: keyof typeof recipes;\n    size?: 'md' | 'lg';\n    icon?: ReactNode;\n    /** Shows an arrow that nudges forward on hover. */\n    arrow?: boolean;\n    external?: boolean;\n    onNavigate?: (href: string) => void;\n}\n\nexport function ButtonLink({\n    variant = 'primary',\n    size = 'lg',\n    icon,\n    arrow,\n    external,\n    onNavigate,\n    onClick,\n    children,\n    href,\n    ...props\n}: ButtonLinkProps) {\n    return (\n        <a\n            {...tabbable}\n            {...props}\n            href={href}\n            {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}\n            onClick={(event) => {\n                onClick?.(event);\n\n                if (\n                    !onNavigate ||\n                    external ||\n                    event.defaultPrevented ||\n                    event.button !== 0 ||\n                    event.metaKey ||\n                    event.ctrlKey ||\n                    event.shiftKey ||\n                    event.altKey\n                )\n                    return;\n\n                event.preventDefault();\n                onNavigate(href);\n            }}\n            className={`group/button focus-visible:outline-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-[0.625rem] border font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] [&_svg]:size-4 [&_svg]:shrink-0 ${size === 'lg' ? 'h-11 text-[15px]' : 'h-9 text-sm'} ${variant === 'quiet' ? 'px-0' : size === 'lg' ? 'px-[1.125rem]' : 'px-3.5'} ${recipes[variant]}`}\n        >\n            {icon}\n            {children}\n            {arrow ? (\n                <span className=\"-mr-0.5 inline-flex transition-transform duration-200 group-hover/button:translate-x-0.5\">\n                    <ArrowRightIcon />\n                </span>\n            ) : null}\n        </a>\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,UAAU;CACZ,SACI;CACJ,WACI;CACJ,SACI;CACJ,OAAO;AACX;AAaA,SAAgB,WAAW,EACvB,UAAU,WACV,OAAO,MACP,MACA,OACA,UACA,YACA,SACA,UACA,MACA,GAAG,SACa;CAChB,OACI,qBAAC,KAAD;EACI,GAAI;EACJ,GAAI;EACE;EACN,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAa,IAAI,CAAC;EAC3D,UAAU,UAAU;GAChB,UAAU,KAAK;GAEf,IACI,CAAC,cACD,YACA,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QAEN;GAEJ,MAAM,eAAe;GACrB,WAAW,IAAI;EACnB;EACA,WAAW,sVAAsV,SAAS,OAAO,qBAAqB,cAAc,GAAG,YAAY,UAAU,SAAS,SAAS,OAAO,kBAAkB,SAAS,GAAG,QAAQ;EAvBhf,UAAA;GAyBK;GACA;GACA,QACG,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;GACf,CAAA,IACN;EACL;;AAEX"}
+{"version":3,"file":"ButtonLink.js","names":[],"sources":["../../src/actions/ButtonLink.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { ghostRecipe, outlineRecipe, primaryRecipe } from './ButtonRecipes';\n\n/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */\nconst recipes = {\n    primary:\n        'border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none',\n    secondary:\n        'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50',\n    inverse:\n        'border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]',\n    quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]',\n} as const;\n\n/** A compact link is the app Button's compact 28px control with 12px text, in the Button's own recipes, for an action\n *  that opens a page from a dense tool (such as Lar Factory's board). */\nconst compactBase =\n    'relative isolate inline-flex h-7 items-center justify-center gap-2 rounded-md border px-[11px] text-xs font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:outline-none [&_[data-slot=icon]>svg]:size-4';\nconst compactRecipes = {\n    primary: primaryRecipe,\n    secondary: outlineRecipe,\n    inverse: recipes.inverse,\n    quiet: ghostRecipe,\n} as const;\n\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {\n    href: string;\n    variant?: keyof typeof recipes;\n    size?: 'md' | 'lg';\n    icon?: ReactNode;\n    /** Shows an arrow that nudges forward on hover. */\n    arrow?: boolean;\n    external?: boolean;\n    onNavigate?: (href: string) => void;\n    /** The app Button's compact 28px look in place of the marketing one, its `icon` leading it. */\n    compact?: boolean;\n    /** With `compact`, a square link showing its icon alone, named by its `aria-label`. */\n    iconOnly?: boolean;\n}\n\nexport function ButtonLink({\n    variant = 'primary',\n    size = 'lg',\n    icon,\n    arrow,\n    external,\n    onNavigate,\n    onClick,\n    compact = false,\n    iconOnly = false,\n    children,\n    href,\n    ...props\n}: ButtonLinkProps) {\n    if (compact)\n        return (\n            <a\n                {...props}\n                href={href}\n                {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}\n                onClick={onClick}\n                data-slot=\"button\"\n                {...(iconOnly ? { 'data-icon-only': '' } : {})}\n                className={`${compactBase} ${compactRecipes[variant]} ${iconOnly ? 'w-7 px-0' : ''}`}\n            >\n                {icon && <span data-slot=\"icon\">{icon}</span>}\n                {children}\n            </a>\n        );\n\n    return (\n        <a\n            {...tabbable}\n            {...props}\n            href={href}\n            {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}\n            onClick={(event) => {\n                onClick?.(event);\n\n                if (\n                    !onNavigate ||\n                    external ||\n                    event.defaultPrevented ||\n                    event.button !== 0 ||\n                    event.metaKey ||\n                    event.ctrlKey ||\n                    event.shiftKey ||\n                    event.altKey\n                )\n                    return;\n\n                event.preventDefault();\n                onNavigate(href);\n            }}\n            className={`group/button focus-visible:outline-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-[0.625rem] border font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] [&_svg]:size-4 [&_svg]:shrink-0 ${size === 'lg' ? 'h-11 text-[15px]' : 'h-9 text-sm'} ${variant === 'quiet' ? 'px-0' : size === 'lg' ? 'px-[1.125rem]' : 'px-3.5'} ${recipes[variant]}`}\n        >\n            {icon}\n            {children}\n            {arrow ? (\n                <span className=\"-mr-0.5 inline-flex transition-transform duration-200 group-hover/button:translate-x-0.5\">\n                    <ArrowRightIcon />\n                </span>\n            ) : null}\n        </a>\n    );\n}\n"],"mappings":";;;;;;AAOA,MAAM,UAAU;CACZ,SACI;CACJ,WACI;CACJ,SACI;CACJ,OAAO;AACX;;;AAIA,MAAM,cACF;AACJ,MAAM,iBAAiB;CACnB,SAAS;CACT,WAAW;CACX,SAAS,QAAQ;CACjB,OAAO;AACX;AAiBA,SAAgB,WAAW,EACvB,UAAU,WACV,OAAO,MACP,MACA,OACA,UACA,YACA,SACA,UAAU,OACV,WAAW,OACX,UACA,MACA,GAAG,SACa;CAChB,IAAI,SACA,OACI,qBAAC,KAAD;EACI,GAAI;EACE;EACN,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAa,IAAI,CAAC;EAClD;EACT,aAAU;EACV,GAAK,WAAW,EAAE,kBAAkB,GAAG,IAAI,CAAC;EAC5C,WAAW,GAAG,YAAY,GAAG,eAAe,SAAS,GAAG,WAAW,aAAa;EAPpF,UAAA,CASK,QAAQ,oBAAC,QAAD;GAAM,aAAU;GAAQ,UAAA;EAAW,CAAA,GAC3C,QACF;;CAGX,OACI,qBAAC,KAAD;EACI,GAAI;EACJ,GAAI;EACE;EACN,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAa,IAAI,CAAC;EAC3D,UAAU,UAAU;GAChB,UAAU,KAAK;GAEf,IACI,CAAC,cACD,YACA,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QAEN;GAEJ,MAAM,eAAe;GACrB,WAAW,IAAI;EACnB;EACA,WAAW,sVAAsV,SAAS,OAAO,qBAAqB,cAAc,GAAG,YAAY,UAAU,SAAS,SAAS,OAAO,kBAAkB,SAAS,GAAG,QAAQ;EAvBhf,UAAA;GAyBK;GACA;GACA,QACG,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;GACf,CAAA,IACN;EACL;;AAEX"}

package/dist/actions/ButtonRecipes.js

@@ -0,0 +1,7 @@
+// src/actions/ButtonRecipes.ts
+const primaryRecipe = "border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]";
+const outlineRecipe = "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
+const ghostRecipe = "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700";
+export { ghostRecipe, outlineRecipe, primaryRecipe };
+
+//# sourceMappingURL=ButtonRecipes.js.map

package/dist/actions/ButtonRecipes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRecipes.js","names":[],"sources":["../../src/actions/ButtonRecipes.ts"],"sourcesContent":["// The app Button's filled and outlined recipes, which ButtonLink's compact links draw too.\n\nexport const primaryRecipe =\n    'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]';\n\nexport const outlineRecipe =\n    'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700';\n\nexport const ghostRecipe =\n    'border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700';\n"],"mappings":";AAEA,MAAa,gBACT;AAEJ,MAAa,gBACT;AAEJ,MAAa,cACT"}

package/dist/actions/IconButton.d.ts

@@ -1,12 +1,12 @@
 import { StatusTone } from "../feedback/StatusIndicator.js";
 import { IconButtonProps } from "@ninna-ui/primitives";
 type IconButtonProps$1 = Omit<IconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
-  variant?: 'header' | 'quiet' | 'title-bar';
+  variant?: 'header' | 'quiet' | 'title-bar' | 'inline';
   tone?: StatusTone | 'accent';
   notification?: string;
 };
 declare const IconButton$1: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "color" | "radius" | "size" | "variant"> & {
-  variant?: 'header' | 'quiet' | 'title-bar';
+  variant?: 'header' | 'quiet' | 'title-bar' | 'inline';
   tone?: StatusTone | 'accent';
   notification?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/actions/IconButton.js

@@ -21,7 +21,7 @@ const IconButton$1 = forwardRef(({ variant = "quiet", tone = "neutral", classNam
 	color: tone === "accent" ? "primary" : tone,
 	size: "sm",
 	radius: "lg",
-	className: (variant === "header" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] " : variant === "title-bar" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 " : tone === "neutral" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md " : "rounded-md ") + "transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full " + className
+	className: (variant === "header" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] " : variant === "title-bar" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 " : variant === "inline" ? "text-base-700 hover:bg-base-200 grid size-5 place-items-center rounded p-0 disabled:opacity-50 disabled:hover:bg-transparent **:data-[slot=icon]:size-3 " : tone === "neutral" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md " : "rounded-md ") + "transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full " + className
 }));
 IconButton$1.displayName = "IconButton";
 export { IconButton$1 as IconButton };

package/dist/actions/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["IconButton","NinnaIconButton"],"sources":["../../src/actions/IconButton.tsx"],"sourcesContent":["import { IconButton as NinnaIconButton, type IconButtonProps as NinnaIconButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type IconButtonProps = Omit<NinnaIconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: 'header' | 'quiet' | 'title-bar';\n    tone?: StatusTone | 'accent';\n    notification?: string;\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n    ({ variant = 'quiet', tone = 'neutral', className = '', notification, icon, ...props }, ref) => (\n        <NinnaIconButton\n            ref={ref}\n            {...tabbable}\n            aria-description={notification}\n            {...props}\n            icon={\n                notification ? (\n                    <span className=\"relative block size-full\">\n                        {icon}\n                        <StatusIndicator\n                            tone=\"warning\"\n                            size=\"sm\"\n                            className=\"ring-base-100 absolute -top-0.5 -right-0.5 ring-2\"\n                        />\n                    </span>\n                ) : (\n                    icon\n                )\n            }\n            variant=\"ghost\"\n            color={tone === 'accent' ? 'primary' : tone}\n            size=\"sm\"\n            radius=\"lg\"\n            className={\n                // T3 Code's ghost icon button: muted until hovered, on an accent fill.\n                (variant === 'header'\n                    ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] '\n                    : variant === 'title-bar'\n                      ? // The title bar's 28px row of controls, with 16px icons.\n                        'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 '\n                      : tone === 'neutral'\n                        ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md '\n                        : 'rounded-md ') +\n                'transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full ' +\n                className\n            }\n        />\n    ),\n);\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;AAYA,MAAaA,eAAa,YACrB,EAAE,UAAU,SAAS,OAAO,WAAW,YAAY,IAAI,cAAc,MAAM,GAAG,SAAS,QACpF,oBAACC,YAAD;CACS;CACL,GAAI;CACJ,oBAAkB;CAClB,GAAI;CACJ,MACI,eACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACK,MACD,oBAAC,iBAAD;GACI,MAAK;GACL,MAAK;GACL,WAAU;EACb,CAAA,CACC;CAEN,CAAA,IAAA;CAGR,SAAQ;CACR,OAAO,SAAS,WAAW,YAAY;CACvC,MAAK;CACL,QAAO;CACP,YAEK,YAAY,WACP,qMACA,YAAY,cAEV,kMACA,SAAS,YACP,sGACA,iBACV,qFACA;AAEP,CAAA,CAET;AAEA,aAAW,cAAc"}
+{"version":3,"file":"IconButton.js","names":["IconButton","NinnaIconButton"],"sources":["../../src/actions/IconButton.tsx"],"sourcesContent":["import { IconButton as NinnaIconButton, type IconButtonProps as NinnaIconButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type IconButtonProps = Omit<NinnaIconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: 'header' | 'quiet' | 'title-bar' | 'inline';\n    tone?: StatusTone | 'accent';\n    notification?: string;\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n    ({ variant = 'quiet', tone = 'neutral', className = '', notification, icon, ...props }, ref) => (\n        <NinnaIconButton\n            ref={ref}\n            {...tabbable}\n            aria-description={notification}\n            {...props}\n            icon={\n                notification ? (\n                    <span className=\"relative block size-full\">\n                        {icon}\n                        <StatusIndicator\n                            tone=\"warning\"\n                            size=\"sm\"\n                            className=\"ring-base-100 absolute -top-0.5 -right-0.5 ring-2\"\n                        />\n                    </span>\n                ) : (\n                    icon\n                )\n            }\n            variant=\"ghost\"\n            color={tone === 'accent' ? 'primary' : tone}\n            size=\"sm\"\n            radius=\"lg\"\n            className={\n                // T3 Code's ghost icon button: muted until hovered, on an accent fill.\n                (variant === 'header'\n                    ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] '\n                    : variant === 'title-bar'\n                      ? // The title bar's 28px row of controls, with 16px icons.\n                        'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 '\n                      : variant === 'inline'\n                        ? // A 20px control inside a line of text, such as the pencil beside a list of labels, with a 12px icon.\n                          'text-base-700 hover:bg-base-200 grid size-5 place-items-center rounded p-0 disabled:opacity-50 disabled:hover:bg-transparent **:data-[slot=icon]:size-3 '\n                        : tone === 'neutral'\n                          ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md '\n                          : 'rounded-md ') +\n                'transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full ' +\n                className\n            }\n        />\n    ),\n);\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;AAYA,MAAaA,eAAa,YACrB,EAAE,UAAU,SAAS,OAAO,WAAW,YAAY,IAAI,cAAc,MAAM,GAAG,SAAS,QACpF,oBAACC,YAAD;CACS;CACL,GAAI;CACJ,oBAAkB;CAClB,GAAI;CACJ,MACI,eACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACK,MACD,oBAAC,iBAAD;GACI,MAAK;GACL,MAAK;GACL,WAAU;EACb,CAAA,CACC;CAEN,CAAA,IAAA;CAGR,SAAQ;CACR,OAAO,SAAS,WAAW,YAAY;CACvC,MAAK;CACL,QAAO;CACP,YAEK,YAAY,WACP,qMACA,YAAY,cAEV,kMACA,YAAY,WAEV,6JACA,SAAS,YACP,sGACA,iBACZ,qFACA;AAEP,CAAA,CAET;AAEA,aAAW,cAAc"}

package/dist/actions/ThemeSwitch.js

@@ -1,7 +1,7 @@
 import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
 import { tabbable } from "../foundations/KeyboardFocus.js";
-import { jsx } from "react/jsx-runtime";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 // src/actions/ThemeSwitch.tsx
 const choices = [
 	{

package/dist/board/ActivityLine.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+/** What a thread's activity line says it is doing. */
+export type ActivityState = 'working' | 'quiet' | 'waiting' | 'stopped' | 'unavailable';
+/**
+ * A thread's activity: its state's mark, its `action`, then its `age` and how many `agents` work, each after a dot. With
+ * `agentList`, the line takes focus and its tooltip lists the agents at work.
+ */
+export declare function ActivityLine({ state, action, age, agents, agentList }: {
+  state: ActivityState;
+  action: ReactNode;
+  age?: string | undefined;
+  agents?: string | undefined;
+  agentList?: ReactNode;
+}): import("react").JSX.Element;
+/** The agents at work, one AgentRow each. */
+export declare function AgentList({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** An agent at work: its title, any `model` after it, its action's `age` at the right, and its `action` under it. */
+export declare function AgentRow({ title, model, age, action }: {
+  title: string;
+  model?: string | undefined;
+  age?: ReactNode;
+  action?: string | undefined;
+}): import("react").JSX.Element;
+/** An agent's action's age, in AgentRow. */
+export declare function AgentAge({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** The agents at work in the item dialog, under `heading`; or, with `unavailable`, why they can't be listed. */
+export declare function WorkingAgents({ heading, unavailable, children }: {
+  heading: string;
+  unavailable?: string | undefined;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ActivityLine.d.ts.map

package/dist/board/ActivityLine.js

@@ -0,0 +1,144 @@
+import { Badge } from "../display/Badge.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../overlays/Tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/board/ActivityLine.tsx
+/** Quiet is hollow and stopped is square, so each reads apart from working without its colour. */
+const MARK = {
+	working: "rounded-full bg-(--st-now)",
+	quiet: "rounded-full border-[1.5px] border-(--warning-foreground)",
+	waiting: "rounded-full bg-(--st-amber)",
+	stopped: "rounded-[1px] bg-(--st-idle)",
+	unavailable: "rounded-full border-[1.5px] border-(--st-idle)"
+};
+/** The line's words for its state, which `data-action` marks. */
+function Words({ state, children }) {
+	switch (state) {
+		case "working": return /* @__PURE__ */ jsx("span", {
+			"data-action": true,
+			className: "min-w-0 truncate text-(--foreground)",
+			children
+		});
+		case "quiet": return /* @__PURE__ */ jsx("span", {
+			"data-action": true,
+			className: "min-w-0 truncate font-medium text-(--warning-foreground) tabular-nums",
+			children
+		});
+		case "waiting": return /* @__PURE__ */ jsx(Badge, {
+			"data-action": true,
+			"data-activity-badge": true,
+			tone: "warning",
+			className: "shrink-0",
+			children
+		});
+		case "stopped": return /* @__PURE__ */ jsx(Badge, {
+			"data-action": true,
+			"data-activity-badge": true,
+			className: "shrink-0",
+			children
+		});
+		case "unavailable": return /* @__PURE__ */ jsx("span", {
+			"data-action": true,
+			className: "min-w-0 truncate",
+			children
+		});
+	}
+}
+/**
+* A thread's activity: its state's mark, its `action`, then its `age` and how many `agents` work, each after a dot. With
+* `agentList`, the line takes focus and its tooltip lists the agents at work.
+*/
+function ActivityLine({ state, action, age, agents, agentList }) {
+	const shown = /* @__PURE__ */ jsxs("span", {
+		"data-activity": state,
+		tabIndex: agentList ? 0 : void 0,
+		className: "flex min-w-0 items-center gap-1.5 rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--primary)",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-mark": true,
+				className: `inline-block size-2 shrink-0 ${MARK[state]}`
+			}),
+			/* @__PURE__ */ jsx(Words, {
+				state,
+				children: action
+			}),
+			age !== void 0 && /* @__PURE__ */ jsxs("span", {
+				"data-age": true,
+				className: "shrink-0 tabular-nums",
+				children: ["· ", age]
+			}),
+			agents && /* @__PURE__ */ jsxs("span", {
+				"data-agents": true,
+				className: "shrink-0 tabular-nums",
+				children: ["· ", agents]
+			})
+		]
+	});
+	if (!agentList) return shown;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: shown
+	}), /* @__PURE__ */ jsx(TooltipPopup, {
+		side: "bottom",
+		align: "start",
+		className: "max-w-md",
+		children: agentList
+	})] });
+}
+/** The agents at work, one AgentRow each. */
+function AgentList({ children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-agent-list": true,
+		className: "m-0 grid min-w-0 list-none gap-1 p-0 text-left",
+		children
+	});
+}
+/** An agent at work: its title, any `model` after it, its action's `age` at the right, and its `action` under it. */
+function AgentRow({ title, model, age, action }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-x-1.5",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: `inline-block size-2 self-center ${MARK.working}` }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-medium",
+					children: title
+				}), model && /* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 opacity-70",
+					children: ["· ", model]
+				})]
+			}),
+			age || /* @__PURE__ */ jsx("span", {}),
+			action && /* @__PURE__ */ jsx("span", {
+				title: action,
+				className: "col-span-2 col-start-2 truncate opacity-70",
+				children: action
+			})
+		]
+	});
+}
+/** An agent's action's age, in AgentRow. */
+function AgentAge({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-agent-age": true,
+		className: "shrink-0 tabular-nums opacity-70",
+		children
+	});
+}
+/** The agents at work in the item dialog, under `heading`; or, with `unavailable`, why they can't be listed. */
+function WorkingAgents({ heading, unavailable, children }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-working-agents": true,
+		className: "grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2 text-xs",
+		children: unavailable ? /* @__PURE__ */ jsx("p", {
+			className: "m-0 text-(--muted-foreground)",
+			children: unavailable
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+			className: "m-0 font-medium",
+			children: heading
+		}), children] })
+	});
+}
+export { ActivityLine, AgentAge, AgentList, AgentRow, WorkingAgents };
+
+//# sourceMappingURL=ActivityLine.js.map

package/dist/board/ActivityLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityLine.js","names":[],"sources":["../../src/board/ActivityLine.tsx"],"sourcesContent":["// What a row says its T3 thread is doing, in its second line's text slot: a status mark, then the newest action, its\n// age and the agents at work; and the list of agents at work, in its tooltip and the item dialog.\n\nimport type { ReactNode } from 'react';\n\nimport { Badge } from '../display/Badge';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';\n\n/** What a thread's activity line says it is doing. */\nexport type ActivityState = 'working' | 'quiet' | 'waiting' | 'stopped' | 'unavailable';\n\n/** Quiet is hollow and stopped is square, so each reads apart from working without its colour. */\nconst MARK: Record<ActivityState, string> = {\n    working: 'rounded-full bg-(--st-now)',\n    quiet: 'rounded-full border-[1.5px] border-(--warning-foreground)',\n    waiting: 'rounded-full bg-(--st-amber)',\n    stopped: 'rounded-[1px] bg-(--st-idle)',\n    unavailable: 'rounded-full border-[1.5px] border-(--st-idle)',\n};\n\n/** The line's words for its state, which `data-action` marks. */\nfunction Words({ state, children }: { state: ActivityState; children: ReactNode }) {\n    switch (state) {\n        case 'working':\n            return (\n                <span data-action className=\"min-w-0 truncate text-(--foreground)\">\n                    {children}\n                </span>\n            );\n        case 'quiet':\n            return (\n                <span data-action className=\"min-w-0 truncate font-medium text-(--warning-foreground) tabular-nums\">\n                    {children}\n                </span>\n            );\n        case 'waiting':\n            return (\n                <Badge data-action data-activity-badge tone=\"warning\" className=\"shrink-0\">\n                    {children}\n                </Badge>\n            );\n        case 'stopped':\n            return (\n                <Badge data-action data-activity-badge className=\"shrink-0\">\n                    {children}\n                </Badge>\n            );\n        case 'unavailable':\n            return (\n                <span data-action className=\"min-w-0 truncate\">\n                    {children}\n                </span>\n            );\n    }\n}\n\n/**\n * A thread's activity: its state's mark, its `action`, then its `age` and how many `agents` work, each after a dot. With\n * `agentList`, the line takes focus and its tooltip lists the agents at work.\n */\nexport function ActivityLine({\n    state,\n    action,\n    age,\n    agents,\n    agentList,\n}: {\n    state: ActivityState;\n    action: ReactNode;\n    age?: string | undefined;\n    agents?: string | undefined;\n    agentList?: ReactNode;\n}) {\n    const shown = (\n        <span\n            data-activity={state}\n            tabIndex={agentList ? 0 : undefined}\n            className=\"flex min-w-0 items-center gap-1.5 rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--primary)\"\n        >\n            <span data-mark className={`inline-block size-2 shrink-0 ${MARK[state]}`} />\n            <Words state={state}>{action}</Words>\n            {age !== undefined && (\n                <span data-age className=\"shrink-0 tabular-nums\">\n                    · {age}\n                </span>\n            )}\n            {agents && (\n                <span data-agents className=\"shrink-0 tabular-nums\">\n                    · {agents}\n                </span>\n            )}\n        </span>\n    );\n\n    if (!agentList) return shown;\n\n    return (\n        <Tooltip>\n            <TooltipTrigger asChild>{shown}</TooltipTrigger>\n            <TooltipPopup side=\"bottom\" align=\"start\" className=\"max-w-md\">\n                {agentList}\n            </TooltipPopup>\n        </Tooltip>\n    );\n}\n\n/** The agents at work, one AgentRow each. */\nexport function AgentList({ children }: { children: ReactNode }) {\n    return (\n        <ul data-agent-list className=\"m-0 grid min-w-0 list-none gap-1 p-0 text-left\">\n            {children}\n        </ul>\n    );\n}\n\n/** An agent at work: its title, any `model` after it, its action's `age` at the right, and its `action` under it. */\nexport function AgentRow({\n    title,\n    model,\n    age,\n    action,\n}: {\n    title: string;\n    model?: string | undefined;\n    age?: ReactNode;\n    action?: string | undefined;\n}) {\n    return (\n        <li className=\"grid grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-x-1.5\">\n            <span className={`inline-block size-2 self-center ${MARK.working}`} />\n            <span className=\"flex min-w-0 gap-1.5\">\n                <span className=\"min-w-0 truncate font-medium\">{title}</span>\n                {model && <span className=\"shrink-0 opacity-70\">· {model}</span>}\n            </span>\n            {age || <span />}\n            {action && (\n                <span title={action} className=\"col-span-2 col-start-2 truncate opacity-70\">\n                    {action}\n                </span>\n            )}\n        </li>\n    );\n}\n\n/** An agent's action's age, in AgentRow. */\nexport function AgentAge({ children }: { children: ReactNode }) {\n    return (\n        <span data-agent-age className=\"shrink-0 tabular-nums opacity-70\">\n            {children}\n        </span>\n    );\n}\n\n/** The agents at work in the item dialog, under `heading`; or, with `unavailable`, why they can't be listed. */\nexport function WorkingAgents({\n    heading,\n    unavailable,\n    children,\n}: {\n    heading: string;\n    unavailable?: string | undefined;\n    children?: ReactNode;\n}) {\n    return (\n        <section data-working-agents className=\"grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2 text-xs\">\n            {unavailable ? (\n                <p className=\"m-0 text-(--muted-foreground)\">{unavailable}</p>\n            ) : (\n                <>\n                    <p className=\"m-0 font-medium\">{heading}</p>\n                    {children}\n                </>\n            )}\n        </section>\n    );\n}\n"],"mappings":";;;;;AAYA,MAAM,OAAsC;CACxC,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,aAAa;AACjB;;AAGA,SAAS,MAAM,EAAE,OAAO,YAA2D;CAC/E,QAAQ,OAAR;EACI,KAAK,WACD,OACI,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GACvB;EACC,CAAA;EAEd,KAAK,SACD,OACI,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GACvB;EACC,CAAA;EAEd,KAAK,WACD,OACI,oBAAC,OAAD;GAAO,eAAA;GAAY,uBAAA;GAAoB,MAAK;GAAU,WAAU;GAC3D;EACE,CAAA;EAEf,KAAK,WACD,OACI,oBAAC,OAAD;GAAO,eAAA;GAAY,uBAAA;GAAoB,WAAU;GAC5C;EACE,CAAA;EAEf,KAAK,eACD,OACI,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GACvB;EACC,CAAA;CAElB;AACJ;;;;;AAMA,SAAgB,aAAa,EACzB,OACA,QACA,KACA,QACA,aAOD;CACC,MAAM,QACF,qBAAC,QAAD;EACI,iBAAe;EACf,UAAU,YAAY,IAAI,KAAA;EAC1B,WAAU;EAHd,UAAA;GAKI,oBAAC,QAAD;IAAM,aAAA;IAAU,WAAW,gCAAgC,KAAK;GAAW,CAAA;GAC3E,oBAAC,OAAD;IAAc;IAAQ,UAAA;GAAc,CAAA;GACnC,QAAQ,KAAA,KACL,qBAAC,QAAD;IAAM,YAAA;IAAS,WAAU;IAAzB,UAAA,CAAiD,MAC1C,GACD;;GAET,UACG,qBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IAA5B,UAAA,CAAoD,MAC7C,MACD;;EAER;;CAGV,IAAI,CAAC,WAAW,OAAO;CAEvB,OACI,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,gBAAD;EAAgB,SAAA;EAAS,UAAA;CAAsB,CAAA,GAC/C,oBAAC,cAAD;EAAc,MAAK;EAAS,OAAM;EAAQ,WAAU;EAC/C,UAAA;CACS,CAAA,CACT,EAAA,CAAA;AAEjB;;AAGA,SAAgB,UAAU,EAAE,YAAqC;CAC7D,OACI,oBAAC,MAAD;EAAI,mBAAA;EAAgB,WAAU;EACzB;CACD,CAAA;AAEZ;;AAGA,SAAgB,SAAS,EACrB,OACA,OACA,KACA,UAMD;CACC,OACI,qBAAC,MAAD;EAAI,WAAU;EAAd,UAAA;GACI,oBAAC,QAAD,EAAM,WAAW,mCAAmC,KAAK,UAAY,CAAA;GACrE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA,GAC3D,SAAS,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAsC,MAAG,KAAY;IAC7D,CAAA,CAAA;;GACL,OAAO,oBAAC,QAAD,CAAO,CAAA;GACd,UACG,oBAAC,QAAD;IAAM,OAAO;IAAQ,WAAU;IAC1B,UAAA;GACC,CAAA;EAEV;;AAEZ;;AAGA,SAAgB,SAAS,EAAE,YAAqC;CAC5D,OACI,oBAAC,QAAD;EAAM,kBAAA;EAAe,WAAU;EAC1B;CACC,CAAA;AAEd;;AAGA,SAAgB,cAAc,EAC1B,SACA,aACA,YAKD;CACC,OACI,oBAAC,WAAD;EAAS,uBAAA;EAAoB,WAAU;EAClC,UAAA,cACG,oBAAC,KAAD;GAAG,WAAU;GAAiC,UAAA;EAAe,CAAA,IAE7D,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,KAAD;GAAG,WAAU;GAAmB,UAAA;EAAW,CAAA,GAC1C,QACH,EAAA,CAAA;CAED,CAAA;AAEjB"}

package/dist/board/ActivityTrack.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+/** A thin track named by `label`, swept by a bar while `running`. */
+export declare function ActivityTrack({ label, running }: {
+  label: string;
+  running: boolean;
+}): import("react").JSX.Element;
+/** The activity's words alone, in one small muted line. */
+export declare function ActivityLabel({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ActivityTrack.d.ts.map

package/dist/board/ActivityTrack.js

@@ -0,0 +1,25 @@
+import { ambientMotion } from "../foundations/AmbientMotion.js";
+import { jsx } from "react/jsx-runtime";
+// src/board/ActivityTrack.tsx
+/** A thin track named by `label`, swept by a bar while `running`. */
+function ActivityTrack({ label, running }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": label,
+		className: "activity-track h-1.5 overflow-hidden rounded-full bg-(--soft)",
+		children: running && /* @__PURE__ */ jsx("span", {
+			ref: ambientMotion,
+			className: "activity-sweep block h-1.5 w-1/3 rounded-full bg-(--st-now)"
+		})
+	});
+}
+/** The activity's words alone, in one small muted line. */
+function ActivityLabel({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "block h-4 text-[11px] leading-4 whitespace-nowrap text-(--muted-foreground)",
+		children
+	});
+}
+export { ActivityLabel, ActivityTrack };
+
+//# sourceMappingURL=ActivityTrack.js.map

package/dist/board/ActivityTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityTrack.js","names":[],"sources":["../../src/board/ActivityTrack.tsx"],"sourcesContent":["// A piece of work's activity as the board reads it from T3: the track that sweeps while it runs, and its label.\n\nimport type { ReactNode } from 'react';\n\nimport { ambientMotion } from '../foundations/AmbientMotion';\n\n/** A thin track named by `label`, swept by a bar while `running`. */\nexport function ActivityTrack({ label, running }: { label: string; running: boolean }) {\n    return (\n        <div role=\"img\" aria-label={label} className=\"activity-track h-1.5 overflow-hidden rounded-full bg-(--soft)\">\n            {running && (\n                <span ref={ambientMotion} className=\"activity-sweep block h-1.5 w-1/3 rounded-full bg-(--st-now)\" />\n            )}\n        </div>\n    );\n}\n\n/** The activity's words alone, in one small muted line. */\nexport function ActivityLabel({ children }: { children: ReactNode }) {\n    return (\n        <span className=\"block h-4 text-[11px] leading-4 whitespace-nowrap text-(--muted-foreground)\">{children}</span>\n    );\n}\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,OAAO,WAAgD;CACnF,OACI,oBAAC,OAAD;EAAK,MAAK;EAAM,cAAY;EAAO,WAAU;EACxC,UAAA,WACG,oBAAC,QAAD;GAAM,KAAK;GAAe,WAAU;EAA+D,CAAA;CAEtG,CAAA;AAEb;;AAGA,SAAgB,cAAc,EAAE,YAAqC;CACjE,OACI,oBAAC,QAAD;EAAM,WAAU;EAA+E;CAAe,CAAA;AAEtH"}