@lar-works/design-system 0.2.0 → 0.3.0

package/dist/typography/Typography.d.ts

@@ -10,6 +10,9 @@ declare const textStyles: {
   readonly lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty';
   /** Running copy on marketing pages. */
   readonly prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty';
+  /** The surrounding text's size and, unless a `tone` is given, its colour: a message inside a note or a form that
+   *  sets its own type. */
+  readonly inherit: '';
 };
 /** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
 declare const headingStyles: {
@@ -42,8 +45,23 @@ interface TypographyProps extends HTMLAttributes<HTMLElement> {
 export interface TextProps extends TypographyProps {
   as?: 'p' | 'span' | 'div';
   variant?: keyof typeof textStyles;
+  /** Keeps the text on one line, such as a date that shouldn't break. */
+  nowrap?: boolean;
+  /** Lines its figures up as a table's. */
+  numeric?: boolean;
+  /** Lets a long word, such as a path, break anywhere. */
+  breaks?: boolean;
+  /** Takes a line of its own in a wrapping row. */
+  ownLine?: boolean;
+  /** Shows it only in a container under 40rem (`narrow`) or, on one line, in one 40rem or wider (`wide`), where the
+   *  same words show elsewhere in the other. */
+  only?: keyof typeof containers | undefined;
 }
-export declare function Text({ as: Tag, variant, tone, truncate, loading, className, children, ...props }: TextProps): import("react").JSX.Element;
+declare const containers: {
+  readonly narrow: '@min-[40rem]:hidden';
+  readonly wide: 'whitespace-nowrap @max-[40rem]:hidden';
+};
+export declare function Text({ as: Tag, variant, tone, truncate, nowrap, numeric, breaks, ownLine, only, loading, className, children, ...props }: TextProps): import("react").JSX.Element;
 export interface HeadingProps extends TypographyProps {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   variant?: keyof typeof headingStyles;

package/dist/typography/Typography.js

@@ -11,7 +11,10 @@ const textStyles = {
 	/** The paragraph under a hero or section title. */
 	lead: "text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty",
 	/** Running copy on marketing pages. */
-	prose: "text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty"
+	prose: "text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty",
+	/** The surrounding text's size and, unless a `tone` is given, its colour: a message inside a note or a form that
+	*  sets its own type. */
+	inherit: ""
 };
 /** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
 const headingStyles = {
@@ -36,10 +39,15 @@ const tones = {
 	warning: "text-warning",
 	success: "text-success"
 };
-function Text({ as: Tag = "p", variant = "body", tone = "default", truncate, loading, className = "", children, ...props }) {
+const containers = {
+	narrow: "@min-[40rem]:hidden",
+	wide: "whitespace-nowrap @max-[40rem]:hidden"
+};
+function Text({ as: Tag = "p", variant = "body", tone = variant === "inherit" ? void 0 : "default", truncate, nowrap = false, numeric = false, breaks = false, ownLine = false, only, loading, className = "", children, ...props }) {
+	const layout = `${numeric ? " tabular-nums" : ""}${breaks ? " wrap-anywhere" : ""}${ownLine ? " w-full" : ""}${only ? ` ${containers[only]}` : ""}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		...props,
-		className: `${textStyles[variant]} ${tones[tone]} ${tone === "muted" && (variant === "lead" || variant === "prose") ? "dark:text-[#a3a3aa]" : ""} ${truncate ? "truncate" : ""} ${loading ? `relative ${Tag === "span" ? "inline-block w-full" : ""}` : ""} ${className}`,
+		className: `${textStyles[variant]} ${tone ? tones[tone] : ""} ${tone === "muted" && (variant === "lead" || variant === "prose") ? "dark:text-[#a3a3aa]" : ""} ${truncate ? "truncate" : ""} ${nowrap ? "whitespace-nowrap" : ""} ${loading ? `relative ${Tag === "span" ? "inline-block w-full" : ""}` : ""} ${className}${layout}`,
 		children: loading ? /* @__PURE__ */ jsx(LoadingText, {}) : children
 	});
 }

package/dist/typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","names":[],"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\n\nconst textStyles = {\n    body: 'text-sm leading-5',\n    description: 'text-[15px] leading-6',\n    caption: 'text-xs leading-4',\n    label: 'text-sm font-medium leading-5',\n    overline: 'text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]',\n    metric: 'text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums',\n    /** The paragraph under a hero or section title. */\n    lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty',\n    /** Running copy on marketing pages. */\n    prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty',\n} as const;\n\n/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */\nconst headingStyles = {\n    page: 'text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]',\n    section: 'text-base font-semibold leading-6 tracking-[-0.01em]',\n    subsection: 'text-[15px] font-semibold leading-6 tracking-[-0.005em]',\n    title: 'text-sm font-semibold leading-5',\n    label: 'text-sm font-semibold leading-5',\n    hero: 'text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]',\n    /** A page's one big statement. */\n    display:\n        'text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]',\n    /** A marketing section's title. */\n    headline:\n        'text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]',\n    /** A feature's title inside a section. */\n    feature: 'text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8',\n} as const;\n\nconst tones = {\n    default: 'text-base-content',\n    muted: 'text-base-700',\n    soft: 'text-base-800',\n    danger: 'text-danger',\n    warning: 'text-warning',\n    success: 'text-success',\n} as const;\n\ninterface TypographyProps extends HTMLAttributes<HTMLElement> {\n    loading?: boolean;\n    tone?: keyof typeof tones;\n    truncate?: boolean;\n}\n\nexport interface TextProps extends TypographyProps {\n    as?: 'p' | 'span' | 'div';\n    variant?: keyof typeof textStyles;\n}\n\nexport function Text({\n    as: Tag = 'p',\n    variant = 'body',\n    tone = 'default',\n    truncate,\n    loading,\n    className = '',\n    children,\n    ...props\n}: TextProps) {\n    return (\n        <Tag\n            {...props}\n            className={`${textStyles[variant]} ${tones[tone]} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}`}\n        >\n            {loading ? <LoadingText /> : children}\n        </Tag>\n    );\n}\n\nexport interface HeadingProps extends TypographyProps {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    variant?: keyof typeof headingStyles;\n}\n\nexport function Heading({\n    as: Tag = 'h2',\n    variant = 'section',\n    tone = 'default',\n    truncate,\n    loading,\n    className = '',\n    children,\n    ...props\n}: HeadingProps) {\n    return (\n        <Tag\n            {...props}\n            className={`${headingStyles[variant]} ${tones[tone]} ${truncate ? 'truncate' : ''} ${loading ? 'relative' : ''} ${className}`}\n        >\n            {loading ? <LoadingText heading={variant === 'hero'} /> : children}\n        </Tag>\n    );\n}\n\n/** An invisible glyph retains the font's line box, including cap-height trimming. */\nfunction LoadingText({ heading = false }: { heading?: boolean }) {\n    return (\n        <>\n            <span aria-hidden=\"true\" className=\"invisible\">\n                &nbsp;\n            </span>\n            <span aria-hidden=\"true\" className=\"absolute inset-0 flex items-center\">\n                <SkeletonLoader.Shape presentation={heading ? 'heading' : 'line'} />\n            </span>\n        </>\n    );\n}\n"],"mappings":";;;AAIA,MAAM,aAAa;CACf,MAAM;CACN,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,QAAQ;;CAER,MAAM;;CAEN,OAAO;AACX;;AAGA,MAAM,gBAAgB;CAClB,MAAM;CACN,SAAS;CACT,YAAY;CACZ,OAAO;CACP,OAAO;CACP,MAAM;;CAEN,SACI;;CAEJ,UACI;;CAEJ,SAAS;AACb;AAEA,MAAM,QAAQ;CACV,SAAS;CACT,OAAO;CACP,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;AACb;AAaA,SAAgB,KAAK,EACjB,IAAI,MAAM,KACV,UAAU,QACV,OAAO,WACP,UACA,SACA,YAAY,IACZ,UACA,GAAG,SACO;CACV,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS,GAAG,MAAM,MAAM,GAAG,SAAS,YAAY,YAAY,UAAU,YAAY,WAAW,wBAAwB,GAAG,GAAG,WAAW,aAAa,GAAG,GAAG,UAAU,YAAY,QAAQ,SAAS,wBAAwB,OAAO,GAAG,GAAG;EAE7P,UAAA,UAAU,oBAAC,aAAD,CAAc,CAAA,IAAI;CAC5B,CAAA;AAEb;AAOA,SAAgB,QAAQ,EACpB,IAAI,MAAM,MACV,UAAU,WACV,OAAO,WACP,UACA,SACA,YAAY,IACZ,UACA,GAAG,SACU;CACb,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,cAAc,SAAS,GAAG,MAAM,MAAM,GAAG,WAAW,aAAa,GAAG,GAAG,UAAU,aAAa,GAAG,GAAG;EAEjH,UAAA,UAAU,oBAAC,aAAD,EAAa,SAAS,YAAY,OAAS,CAAA,IAAI;CACzD,CAAA;AAEb;;AAGA,SAAS,YAAY,EAAE,UAAU,SAAgC;CAC7D,OACI,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAY,UAAA;CAEzC,CAAA,GACN,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAC/B,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAc,UAAU,YAAY,OAAS,CAAA;CACjE,CAAA,CACR,EAAA,CAAA;AAEV"}
+{"version":3,"file":"Typography.js","names":[],"sources":["../../src/typography/Typography.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\n\nconst textStyles = {\n    body: 'text-sm leading-5',\n    description: 'text-[15px] leading-6',\n    caption: 'text-xs leading-4',\n    label: 'text-sm font-medium leading-5',\n    overline: 'text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]',\n    metric: 'text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums',\n    /** The paragraph under a hero or section title. */\n    lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty',\n    /** Running copy on marketing pages. */\n    prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty',\n    /** The surrounding text's size and, unless a `tone` is given, its colour: a message inside a note or a form that\n     *  sets its own type. */\n    inherit: '',\n} as const;\n\n/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */\nconst headingStyles = {\n    page: 'text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]',\n    section: 'text-base font-semibold leading-6 tracking-[-0.01em]',\n    subsection: 'text-[15px] font-semibold leading-6 tracking-[-0.005em]',\n    title: 'text-sm font-semibold leading-5',\n    label: 'text-sm font-semibold leading-5',\n    hero: 'text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]',\n    /** A page's one big statement. */\n    display:\n        'text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]',\n    /** A marketing section's title. */\n    headline:\n        'text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]',\n    /** A feature's title inside a section. */\n    feature: 'text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8',\n} as const;\n\nconst tones = {\n    default: 'text-base-content',\n    muted: 'text-base-700',\n    soft: 'text-base-800',\n    danger: 'text-danger',\n    warning: 'text-warning',\n    success: 'text-success',\n} as const;\n\ninterface TypographyProps extends HTMLAttributes<HTMLElement> {\n    loading?: boolean;\n    tone?: keyof typeof tones;\n    truncate?: boolean;\n}\n\nexport interface TextProps extends TypographyProps {\n    as?: 'p' | 'span' | 'div';\n    variant?: keyof typeof textStyles;\n    /** Keeps the text on one line, such as a date that shouldn't break. */\n    nowrap?: boolean;\n    /** Lines its figures up as a table's. */\n    numeric?: boolean;\n    /** Lets a long word, such as a path, break anywhere. */\n    breaks?: boolean;\n    /** Takes a line of its own in a wrapping row. */\n    ownLine?: boolean;\n    /** Shows it only in a container under 40rem (`narrow`) or, on one line, in one 40rem or wider (`wide`), where the\n     *  same words show elsewhere in the other. */\n    only?: keyof typeof containers | undefined;\n}\n\nconst containers = { narrow: '@min-[40rem]:hidden', wide: 'whitespace-nowrap @max-[40rem]:hidden' } as const;\n\nexport function Text({\n    as: Tag = 'p',\n    variant = 'body',\n    tone = variant === 'inherit' ? undefined : 'default',\n    truncate,\n    nowrap = false,\n    numeric = false,\n    breaks = false,\n    ownLine = false,\n    only,\n    loading,\n    className = '',\n    children,\n    ...props\n}: TextProps) {\n    const layout = `${numeric ? ' tabular-nums' : ''}${breaks ? ' wrap-anywhere' : ''}${ownLine ? ' w-full' : ''}${only ? ` ${containers[only]}` : ''}`;\n\n    return (\n        <Tag\n            {...props}\n            className={`${textStyles[variant]} ${tone ? tones[tone] : ''} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${nowrap ? 'whitespace-nowrap' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}${layout}`}\n        >\n            {loading ? <LoadingText /> : children}\n        </Tag>\n    );\n}\n\nexport interface HeadingProps extends TypographyProps {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    variant?: keyof typeof headingStyles;\n}\n\nexport function Heading({\n    as: Tag = 'h2',\n    variant = 'section',\n    tone = 'default',\n    truncate,\n    loading,\n    className = '',\n    children,\n    ...props\n}: HeadingProps) {\n    return (\n        <Tag\n            {...props}\n            className={`${headingStyles[variant]} ${tones[tone]} ${truncate ? 'truncate' : ''} ${loading ? 'relative' : ''} ${className}`}\n        >\n            {loading ? <LoadingText heading={variant === 'hero'} /> : children}\n        </Tag>\n    );\n}\n\n/** An invisible glyph retains the font's line box, including cap-height trimming. */\nfunction LoadingText({ heading = false }: { heading?: boolean }) {\n    return (\n        <>\n            <span aria-hidden=\"true\" className=\"invisible\">\n                &nbsp;\n            </span>\n            <span aria-hidden=\"true\" className=\"absolute inset-0 flex items-center\">\n                <SkeletonLoader.Shape presentation={heading ? 'heading' : 'line'} />\n            </span>\n        </>\n    );\n}\n"],"mappings":";;;AAIA,MAAM,aAAa;CACf,MAAM;CACN,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,QAAQ;;CAER,MAAM;;CAEN,OAAO;;;CAGP,SAAS;AACb;;AAGA,MAAM,gBAAgB;CAClB,MAAM;CACN,SAAS;CACT,YAAY;CACZ,OAAO;CACP,OAAO;CACP,MAAM;;CAEN,SACI;;CAEJ,UACI;;CAEJ,SAAS;AACb;AAEA,MAAM,QAAQ;CACV,SAAS;CACT,OAAO;CACP,MAAM;CACN,QAAQ;CACR,SAAS;CACT,SAAS;AACb;AAwBA,MAAM,aAAa;CAAE,QAAQ;CAAuB,MAAM;AAAwC;AAElG,SAAgB,KAAK,EACjB,IAAI,MAAM,KACV,UAAU,QACV,OAAO,YAAY,YAAY,KAAA,IAAY,WAC3C,UACA,SAAS,OACT,UAAU,OACV,SAAS,OACT,UAAU,OACV,MACA,SACA,YAAY,IACZ,UACA,GAAG,SACO;CACV,MAAM,SAAS,GAAG,UAAU,kBAAkB,KAAK,SAAS,mBAAmB,KAAK,UAAU,YAAY,KAAK,OAAO,IAAI,WAAW,UAAU;CAE/I,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,WAAW,SAAS,GAAG,OAAO,MAAM,QAAQ,GAAG,GAAG,SAAS,YAAY,YAAY,UAAU,YAAY,WAAW,wBAAwB,GAAG,GAAG,WAAW,aAAa,GAAG,GAAG,SAAS,sBAAsB,GAAG,GAAG,UAAU,YAAY,QAAQ,SAAS,wBAAwB,OAAO,GAAG,GAAG,YAAY;EAE1T,UAAA,UAAU,oBAAC,aAAD,CAAc,CAAA,IAAI;CAC5B,CAAA;AAEb;AAOA,SAAgB,QAAQ,EACpB,IAAI,MAAM,MACV,UAAU,WACV,OAAO,WACP,UACA,SACA,YAAY,IACZ,UACA,GAAG,SACU;CACb,OACI,oBAAC,KAAD;EACI,GAAI;EACJ,WAAW,GAAG,cAAc,SAAS,GAAG,MAAM,MAAM,GAAG,WAAW,aAAa,GAAG,GAAG,UAAU,aAAa,GAAG,GAAG;EAEjH,UAAA,UAAU,oBAAC,aAAD,EAAa,SAAS,YAAY,OAAS,CAAA,IAAI;CACzD,CAAA;AAEb;;AAGA,SAAS,YAAY,EAAE,UAAU,SAAgC;CAC7D,OACI,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAAY,UAAA;CAEzC,CAAA,GACN,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAC/B,UAAA,oBAAC,eAAe,OAAhB,EAAsB,cAAc,UAAU,YAAY,OAAS,CAAA;CACjE,CAAA,CACR,EAAA,CAAA;AAEV"}

package/dist/typography/index.d.ts

@@ -1,4 +1,4 @@
-import { InlineLink, Link as Link$1, LinkBox as LinkBox$1, LinkOverlay as LinkOverlay$1, LinkOverlayProps as LinkOverlayProps$1, LinkProps as LinkProps$1 } from "./Link.js";
+import { Code, CodeProps } from "./Code.js";
+import { InlineLink, Link, LinkBox, LinkOverlay, LinkOverlayProps, LinkProps } from "./Link.js";
 import { Heading, HeadingProps, Text, TextProps } from "./Typography.js";
-import { Code as Code$1 } from "@ninna-ui/primitives";
-export { Code$1 as Code, Heading, type HeadingProps, InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, type LinkOverlayProps$1 as LinkOverlayProps, type LinkProps$1 as LinkProps, Text, type TextProps };
+export { Code, type CodeProps, Heading, type HeadingProps, InlineLink, Link, LinkBox, LinkOverlay, type LinkOverlayProps, type LinkProps, Text, type TextProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lar-works/design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Lar's design system: tokens, base styles and every visual component the Lar web apps use.",
   "license": "MIT",
   "repository": {
@@ -21,20 +21,34 @@
       "types": "./dist/icons.d.ts",
       "default": "./dist/icons.js"
     },
+    "./icons/dynamic": {
+      "types": "./dist/icons/dynamic.d.ts",
+      "default": "./dist/icons/dynamic.js"
+    },
     "./testing": {
       "types": "./dist/testing.d.ts",
       "default": "./dist/testing.js"
     },
     "./styles.css": "./src/styles.css",
-    "./showcase.css": "./src/showcase.css"
+    "./showcase.css": "./src/showcase.css",
+    "./board.css": "./src/board.css"
   },
   "files": [
     "dist",
     "src",
+    "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/**/*.stories.tsx"
   ],
   "dependencies": {
+    "@lexical/code": "0.52.0",
+    "@lexical/html": "0.52.0",
+    "@lexical/link": "0.52.0",
+    "@lexical/list": "0.52.0",
+    "@lexical/markdown": "0.52.0",
+    "@lexical/react": "0.52.0",
+    "@lexical/rich-text": "0.52.0",
+    "@lexical/selection": "0.52.0",
     "@ninna-ui/core": "^0.6.0",
     "@ninna-ui/feedback": "^0.6.0",
     "@ninna-ui/forms": "^0.6.0",
@@ -43,8 +57,16 @@
     "@ninna-ui/primitives": "^0.6.0",
     "@ninna-ui/react-internal": "^0.6.0",
     "@tanstack/react-virtual": "^3.14.26",
+    "hast-util-to-jsx-runtime": "^2.3.7",
+    "lexical": "0.52.0",
     "lucide-react": "^1.70.0",
-    "qrcode-generator": "^2.0.4"
+    "qrcode-generator": "^2.0.4",
+    "react-markdown": "^10.1.0",
+    "rehype-parse": "^9.0.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "unified": "^11.0.5"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -61,6 +83,7 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",
+    "@types/hast": "^3.0.5",
     "@types/node": "^24.19.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/actions/Button.tsx

@@ -1,25 +1,33 @@
 import { Button as NinnaButton, type ButtonProps as NinnaButtonProps } from '@ninna-ui/primitives';
 import { forwardRef } from 'react';
 
+import { SpinnerIcon } from '../feedback/Loading';
 import { tabbable } from '../foundations/KeyboardFocus';
+import { ghostRecipe, outlineRecipe, primaryRecipe } from './ButtonRecipes';
 
 /** 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';
+    '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' } as const;
+/** 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',
+} as const;
 
-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 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':
@@ -31,16 +39,57 @@ const recipes = {
     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',
 } as const;
 
+/** 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' } as const;
+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';
 
 export type ButtonProps = Omit<NinnaButtonProps, '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';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ variant = 'primary', selected, className = '', children, leftIcon, rightIcon, ...props }, ref) => {
+    (
+        {
+            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 (
@@ -53,13 +102,31 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 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}`}
+                {...(busy === undefined ? {} : { 'aria-busy': busy || undefined })}
+                data-wrap={wrap || undefined}
+                {...(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={
-                    context ? <span className="text-(--color-header-icon) [&>svg]:size-4">{leftIcon}</span> : leftIcon
+                    busy ? (
+                        <SpinnerIcon motion="always" className="size-4" />
+                    ) : context ? (
+                        <span className="text-(--color-header-icon) [&>svg]:size-4">{leftIcon}</span>
+                    ) : (
+                        leftIcon
+                    )
                 }
                 rightIcon={context ? <span className="text-base-700 [&>svg]:size-3.5">{rightIcon}</span> : rightIcon}
             >
-                {context ? <span className="truncate">{children}</span> : children}
+                {context ? (
+                    <span className="truncate">{children}</span>
+                ) : shrinks ? (
+                    <>
+                        <span className="truncate">{children}</span>
+                        {mark !== undefined && <> {mark}</>}
+                    </>
+                ) : (
+                    children
+                )}
             </NinnaButton>
         );
     },

package/src/actions/ButtonLink.tsx

@@ -2,6 +2,7 @@ import { ArrowRightIcon } from 'lucide-react';
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
 
 import { tabbable } from '../foundations/KeyboardFocus';
+import { ghostRecipe, outlineRecipe, primaryRecipe } from './ButtonRecipes';
 
 /** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */
 const recipes = {
@@ -14,6 +15,17 @@ const recipes = {
     quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]',
 } as const;
 
+/** 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,
+} as const;
+
 export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {
     href: string;
     variant?: keyof typeof recipes;
@@ -23,6 +35,10 @@ 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 function ButtonLink({
@@ -33,10 +49,28 @@ export function ButtonLink({
     external,
     onNavigate,
     onClick,
+    compact = false,
+    iconOnly = false,
     children,
     href,
     ...props
 }: ButtonLinkProps) {
+    if (compact)
+        return (
+            <a
+                {...props}
+                href={href}
+                {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}
+                onClick={onClick}
+                data-slot="button"
+                {...(iconOnly ? { 'data-icon-only': '' } : {})}
+                className={`${compactBase} ${compactRecipes[variant]} ${iconOnly ? 'w-7 px-0' : ''}`}
+            >
+                {icon && <span data-slot="icon">{icon}</span>}
+                {children}
+            </a>
+        );
+
     return (
         <a
             {...tabbable}

package/src/actions/ButtonRecipes.ts

@@ -0,0 +1,10 @@
+// The app Button's filled and outlined recipes, which ButtonLink's compact links draw too.
+
+export 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%)]';
+
+export 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';
+
+export const ghostRecipe =
+    'border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700';

package/src/actions/IconButton.tsx

@@ -5,7 +5,7 @@ import { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';
 import { tabbable } from '../foundations/KeyboardFocus';
 
 export type IconButtonProps = Omit<NinnaIconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
-    variant?: 'header' | 'quiet' | 'title-bar';
+    variant?: 'header' | 'quiet' | 'title-bar' | 'inline';
     tone?: StatusTone | 'accent';
     notification?: string;
 };
@@ -42,9 +42,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
                     : variant === 'title-bar'
                       ? // The title bar's 28px row of controls, with 16px icons.
                         '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 ') +
+                      : variant === 'inline'
+                        ? // A 20px control inside a line of text, such as the pencil beside a list of labels, with a 12px icon.
+                          '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
             }

package/src/board/ActivityLine.tsx

@@ -0,0 +1,176 @@
+// What a row says its T3 thread is doing, in its second line's text slot: a status mark, then the newest action, its
+// age and the agents at work; and the list of agents at work, in its tooltip and the item dialog.
+
+import type { ReactNode } from 'react';
+
+import { Badge } from '../display/Badge';
+import { Tooltip, TooltipPopup, TooltipTrigger } from '../overlays/Tooltip';
+
+/** What a thread's activity line says it is doing. */
+export type ActivityState = 'working' | 'quiet' | 'waiting' | 'stopped' | 'unavailable';
+
+/** Quiet is hollow and stopped is square, so each reads apart from working without its colour. */
+const MARK: Record<ActivityState, string> = {
+    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 }: { state: ActivityState; children: ReactNode }) {
+    switch (state) {
+        case 'working':
+            return (
+                <span data-action className="min-w-0 truncate text-(--foreground)">
+                    {children}
+                </span>
+            );
+        case 'quiet':
+            return (
+                <span data-action className="min-w-0 truncate font-medium text-(--warning-foreground) tabular-nums">
+                    {children}
+                </span>
+            );
+        case 'waiting':
+            return (
+                <Badge data-action data-activity-badge tone="warning" className="shrink-0">
+                    {children}
+                </Badge>
+            );
+        case 'stopped':
+            return (
+                <Badge data-action data-activity-badge className="shrink-0">
+                    {children}
+                </Badge>
+            );
+        case 'unavailable':
+            return (
+                <span data-action className="min-w-0 truncate">
+                    {children}
+                </span>
+            );
+    }
+}
+
+/**
+ * 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 function ActivityLine({
+    state,
+    action,
+    age,
+    agents,
+    agentList,
+}: {
+    state: ActivityState;
+    action: ReactNode;
+    age?: string | undefined;
+    agents?: string | undefined;
+    agentList?: ReactNode;
+}) {
+    const shown = (
+        <span
+            data-activity={state}
+            tabIndex={agentList ? 0 : undefined}
+            className="flex min-w-0 items-center gap-1.5 rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--primary)"
+        >
+            <span data-mark className={`inline-block size-2 shrink-0 ${MARK[state]}`} />
+            <Words state={state}>{action}</Words>
+            {age !== undefined && (
+                <span data-age className="shrink-0 tabular-nums">
+                    · {age}
+                </span>
+            )}
+            {agents && (
+                <span data-agents className="shrink-0 tabular-nums">
+                    · {agents}
+                </span>
+            )}
+        </span>
+    );
+
+    if (!agentList) return shown;
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>{shown}</TooltipTrigger>
+            <TooltipPopup side="bottom" align="start" className="max-w-md">
+                {agentList}
+            </TooltipPopup>
+        </Tooltip>
+    );
+}
+
+/** The agents at work, one AgentRow each. */
+export function AgentList({ children }: { children: ReactNode }) {
+    return (
+        <ul data-agent-list className="m-0 grid min-w-0 list-none gap-1 p-0 text-left">
+            {children}
+        </ul>
+    );
+}
+
+/** An agent at work: its title, any `model` after it, its action's `age` at the right, and its `action` under it. */
+export function AgentRow({
+    title,
+    model,
+    age,
+    action,
+}: {
+    title: string;
+    model?: string | undefined;
+    age?: ReactNode;
+    action?: string | undefined;
+}) {
+    return (
+        <li className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-x-1.5">
+            <span className={`inline-block size-2 self-center ${MARK.working}`} />
+            <span className="flex min-w-0 gap-1.5">
+                <span className="min-w-0 truncate font-medium">{title}</span>
+                {model && <span className="shrink-0 opacity-70">· {model}</span>}
+            </span>
+            {age || <span />}
+            {action && (
+                <span title={action} className="col-span-2 col-start-2 truncate opacity-70">
+                    {action}
+                </span>
+            )}
+        </li>
+    );
+}
+
+/** An agent's action's age, in AgentRow. */
+export function AgentAge({ children }: { children: ReactNode }) {
+    return (
+        <span data-agent-age className="shrink-0 tabular-nums opacity-70">
+            {children}
+        </span>
+    );
+}
+
+/** The agents at work in the item dialog, under `heading`; or, with `unavailable`, why they can't be listed. */
+export function WorkingAgents({
+    heading,
+    unavailable,
+    children,
+}: {
+    heading: string;
+    unavailable?: string | undefined;
+    children?: ReactNode;
+}) {
+    return (
+        <section data-working-agents className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2 text-xs">
+            {unavailable ? (
+                <p className="m-0 text-(--muted-foreground)">{unavailable}</p>
+            ) : (
+                <>
+                    <p className="m-0 font-medium">{heading}</p>
+                    {children}
+                </>
+            )}
+        </section>
+    );
+}

package/src/board/ActivityTrack.tsx

@@ -0,0 +1,23 @@
+// A piece of work's activity as the board reads it from T3: the track that sweeps while it runs, and its label.
+
+import type { ReactNode } from 'react';
+
+import { ambientMotion } from '../foundations/AmbientMotion';
+
+/** A thin track named by `label`, swept by a bar while `running`. */
+export function ActivityTrack({ label, running }: { label: string; running: boolean }) {
+    return (
+        <div role="img" aria-label={label} className="activity-track h-1.5 overflow-hidden rounded-full bg-(--soft)">
+            {running && (
+                <span ref={ambientMotion} className="activity-sweep block h-1.5 w-1/3 rounded-full bg-(--st-now)" />
+            )}
+        </div>
+    );
+}
+
+/** The activity's words alone, in one small muted line. */
+export function ActivityLabel({ children }: { children: ReactNode }) {
+    return (
+        <span className="block h-4 text-[11px] leading-4 whitespace-nowrap text-(--muted-foreground)">{children}</span>
+    );
+}