@nadicodeai/ui 12.1.128 → 12.1.130

package/dist/components/status-badge.d.ts

@@ -1,56 +1,51 @@
 import type { ComponentProps } from "react";
-import { type BadgeSize } from "./badge.js";
 type StatusBadgeTone = "success" | "warning" | "danger" | "info" | "neutral";
-type StatusBadgeEmphasis = "subtle" | "solid";
+type StatusBadgeSize = "sm" | "md" | "lg";
 type StatusBadgeProps = Omit<ComponentProps<"span">, "children" | "onClick"> & {
     tone: StatusBadgeTone;
     label: string;
-    size?: BadgeSize;
-    /** `subtle` in rows, tables, lists and menus; `solid` where the status stands on its own. */
-    emphasis?: StatusBadgeEmphasis;
+    size?: StatusBadgeSize;
     /** How long the status has held, set after the word in tabular figures. */
     since?: string;
 };
 /**
- * A record's state: a mark and a word in one of five tones.
+ * A record's state: a shape of dots and a word, in one of five tones.
  *
  * @family Status
  * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
  * Ours: a record's state, when it sets the row apart: failed, waiting on a person, a step in
  * motion, paused, connected. Gray is the default and every terminal state that needs no action;
  * green is healthy or complete; red is unusable or failed; amber is waiting on a person's
- * decision; blue is a step in motion.
+ * decision; blue is a step in motion. Each tone has its own shape: green a circle, blue a diamond,
+ * amber a triangle, red a square, gray an empty ring.
  * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
  * Ours: success is green, danger red, warning amber, info blue, neutral gray, whatever the state's
  * name, in our colour values. The tone and the word are required, and the type asks for both.
  * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
  * Ours: that `Badge` is `StatusBadge`. For a category (an installation, a partner) use `Tag`. For
  * plain metadata (a role, a plan) use `Badge`. For a control reporting its own action use
- * `ActionStatus`. A state beside its name still uses this badge; status dots are not used.
+ * `ActionStatus`. A state beside its name still uses this component.
  * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
  * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
- * Ours: a status never moves and is never a button.
- * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
- * Ours: `subtle`, the default, is for rows, tables, lists and menus: it fills the pill with the
- * tone's soft ground and sets the mark and the word in its strong shade; gray takes the foreground
- * colour, never a muted one. `solid` is for a status that stands on its own, such as an object's
- * page header or a card title: it fills the pill with the tone's strong colour and sets the mark
- * and the word on it. No border and no ring either way. The `subtle` pairs are the tone's soft
- * ground with its deep shade (gray: `canvas-soft-2` with the foreground colour).
- * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
- * Ours: it always draws its tone's mark, even for success and error: the mark repeats the tone as a
- * shape so a status reads without colour. Each app keeps one value-to-tone map in one module;
- * nothing else picks a status colour. A healthy record shows no badge, except the
- * operational-state and run-outcome columns defined by DESIGN.md's Status rule.
+ * Ours: a status never moves and is never a button. It is the tone's shape and the word, with no
+ * pill, no fill and no border, as Vercel's deployment list sets a state beside its time. The shape
+ * is filled with dots on a honeycomb grid, the material of the Agent orbs: an outline of evenly
+ * spaced dots and a field of dots inside it; gray's ring stays empty, the quiet tone. The dots
+ * take the tone's colour and the word the foreground colour; amber's outline takes its deep step
+ * so the triangle holds on white. `size`
+ * follows the type beside it: `sm` (a 14 px shape, 12 px word) in a small line such as an Agent's
+ * state line, `md` (16 px, 13 px) in a row, `lg` (20 px, 14 px) beside an object's name.
  * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
  * Ours: a state, not a verb (*Failed*, *Waiting for you*), in sentence case, one to three words, no
  * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
  * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
  * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
  * @access "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
- * Ours: the word is the name; the mark is `aria-hidden`, so colour never carries the state alone.
- * Not focusable.
+ * Ours: the word is the name; the shape is `aria-hidden`, so colour never carries the state alone.
+ * Not focusable. Each app keeps one value-to-tone map in one module; nothing else picks a status
+ * colour. A healthy record shows no status, except the operational-state and run-outcome columns
+ * defined by DESIGN.md's Status rule.
  */
-declare function StatusBadge({ tone, label, since, className, size, emphasis, ...props }: StatusBadgeProps): import("react").JSX.Element;
-export { StatusBadge, type StatusBadgeEmphasis, type StatusBadgeProps, type StatusBadgeTone };
+declare function StatusBadge({ tone, label, since, className, size, ...props }: StatusBadgeProps): import("react").JSX.Element;
+export { StatusBadge, type StatusBadgeProps, type StatusBadgeTone };
 //# sourceMappingURL=status-badge.d.ts.map

package/dist/components/status-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG3D,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,KAAK,mBAAmB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAgD9C,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC7E,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAW,EACX,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAqBlB;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../src/components/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,KAAK,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAsD1C,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAC7E,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BA4B9F;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/components/status-badge.js

@@ -1,93 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleCheck, CircleDot, CirclePause, CircleX, Clock } from "lucide-react";
-import { Badge } from "./badge.js";
+import { STATUS_MARK_DOT_RADIUS, STATUS_MARK_PATHS, } from "../internal/status-mark.js";
 import { cn } from "../lib/utils.js";
-const FILL_BY_TONE = {
-    success: {
-        name: "green",
-        subtle: "bg-success-soft text-success-soft-foreground",
-        solid: "bg-success text-success-foreground",
-    },
+// One shape per tone, always the same one: the tone said again as a shape, so a
+// status reads without colour. Amber's edge takes the deep step, because giallo
+// alone does not hold a shape on white.
+const TONE = {
+    success: { name: "green", shape: "circle", ink: "text-success" },
     warning: {
         name: "amber",
-        subtle: "bg-warning-soft text-warning-soft-foreground",
-        solid: "bg-warning text-warning-foreground",
-    },
-    danger: {
-        name: "red",
-        subtle: "bg-destructive-soft text-destructive-soft-foreground",
-        solid: "bg-destructive text-destructive-foreground",
-    },
-    info: {
-        name: "blue",
-        subtle: "bg-info-soft text-info-soft-foreground",
-        solid: "bg-info text-info-foreground",
+        shape: "triangle",
+        ink: "text-warning",
+        edge: "text-warning-soft-foreground",
     },
-    neutral: {
-        name: "gray",
-        subtle: "bg-accent text-foreground",
-        solid: "bg-muted-foreground text-background",
-    },
-};
-// One mark per tone, always the same one: the tone said again as a shape, so a
-// status reads without colour. The info dot is filled and still.
-const MARK_BY_TONE = {
-    success: CircleCheck,
-    warning: Clock,
-    danger: CircleX,
-    info: CircleDot,
-    neutral: CirclePause,
+    danger: { name: "red", shape: "square", ink: "text-destructive" },
+    info: { name: "blue", shape: "diamond", ink: "text-info" },
+    neutral: { name: "gray", shape: "ring", ink: "text-muted-foreground" },
 };
-// Every mark is a circle, which has less air round it than a square glyph, so
-// it sits closer to the pill's edge.
-const CIRCLE_MARK_INSET = {
-    sm: "has-data-[icon=inline-start]:pl-1",
-    md: "has-data-[icon=inline-start]:pl-1.25",
-    lg: "has-data-[icon=inline-start]:pl-2",
+const SIZE = {
+    sm: { text: "text-caption gap-1", mark: "size-3.5" },
+    md: { text: "text-label-sm gap-1.5", mark: "size-4" },
+    lg: { text: "text-label gap-2", mark: "size-5" },
 };
+function StatusMark({ shape, className, edge, }) {
+    const paths = STATUS_MARK_PATHS[shape];
+    return (_jsxs("svg", { "aria-hidden": "true", className: cn("shrink-0", className), "data-slot": "status-badge-mark", "data-mark": shape, fill: "none", stroke: "currentColor", strokeLinecap: "round", viewBox: "-10 -10 20 20", children: [_jsx("path", { d: paths.inner, strokeOpacity: 0.92, strokeWidth: 2 * STATUS_MARK_DOT_RADIUS.inner }), _jsx("path", { className: edge, d: paths.edge, strokeWidth: 2 * STATUS_MARK_DOT_RADIUS.edge })] }));
+}
 /**
- * A record's state: a mark and a word in one of five tones.
+ * A record's state: a shape of dots and a word, in one of five tones.
  *
  * @family Status
  * @when "Use Badge for short, scannable metadata that sits next to the thing it describes: status, plan tier, environment, or role." (https://vercel.com/geist/badge)
  * Ours: a record's state, when it sets the row apart: failed, waiting on a person, a step in
  * motion, paused, connected. Gray is the default and every terminal state that needs no action;
  * green is healthy or complete; red is unusable or failed; amber is waiting on a person's
- * decision; blue is a step in motion.
+ * decision; blue is a step in motion. Each tone has its own shape: green a circle, blue a diamond,
+ * amber a triangle, red a square, gray an empty ring.
  * "Map meaning to color: `green` for healthy, `red` for error, `amber` for warning, `blue` for informational or production, `gray` for neutral." (https://vercel.com/geist/badge)
  * Ours: success is green, danger red, warning amber, info blue, neutral gray, whatever the state's
  * name, in our colour values. The tone and the word are required, and the type asks for both.
  * @instead "For non-deployment statuses (Workflow runs, Queue messages, Sandbox, Cron jobs), use a `Badge` with the canonical state vocabulary instead of repurposing the dot." (https://vercel.com/geist/status-dot)
  * Ours: that `Badge` is `StatusBadge`. For a category (an installation, a partner) use `Tag`. For
  * plain metadata (a role, a plan) use `Badge`. For a control reporting its own action use
- * `ActionStatus`. A state beside its name still uses this badge; status dots are not used.
+ * `ActionStatus`. A state beside its name still uses this component.
  * @behaviour "Badges are static labels." (https://vercel.com/geist/badge)
  * "Don’t wire `onClick` onto them; promote to a Button or link if the user can act on the value." (https://vercel.com/geist/badge)
- * Ours: a status never moves and is never a button.
- * "The `-subtle` suffix tones any of them down on dense surfaces." (https://vercel.com/geist/badge)
- * Ours: `subtle`, the default, is for rows, tables, lists and menus: it fills the pill with the
- * tone's soft ground and sets the mark and the word in its strong shade; gray takes the foreground
- * colour, never a muted one. `solid` is for a status that stands on its own, such as an object's
- * page header or a card title: it fills the pill with the tone's strong colour and sets the mark
- * and the word on it. No border and no ring either way. The `subtle` pairs are the tone's soft
- * ground with its deep shade (gray: `canvas-soft-2` with the foreground colour).
- * "Don’t add a checkmark icon for success states or an X for errors; the variant carries that signal." (https://vercel.com/geist/badge)
- * Ours: it always draws its tone's mark, even for success and error: the mark repeats the tone as a
- * shape so a status reads without colour. Each app keeps one value-to-tone map in one module;
- * nothing else picks a status colour. A healthy record shows no badge, except the
- * operational-state and run-outcome columns defined by DESIGN.md's Status rule.
+ * Ours: a status never moves and is never a button. It is the tone's shape and the word, with no
+ * pill, no fill and no border, as Vercel's deployment list sets a state beside its time. The shape
+ * is filled with dots on a honeycomb grid, the material of the Agent orbs: an outline of evenly
+ * spaced dots and a field of dots inside it; gray's ring stays empty, the quiet tone. The dots
+ * take the tone's colour and the word the foreground colour; amber's outline takes its deep step
+ * so the triangle holds on white. `size`
+ * follows the type beside it: `sm` (a 14 px shape, 12 px word) in a small line such as an Agent's
+ * state line, `md` (16 px, 13 px) in a row, `lg` (20 px, 14 px) beside an object's name.
  * @words "Title Case, one word when possible, two max: `Active`, `Pending`, `Pro`, `Enterprise Trial`." (https://vercel.com/geist/badge)
  * Ours: a state, not a verb (*Failed*, *Waiting for you*), in sentence case, one to three words, no
  * trailing ellipsis. Italian runs a third longer: *In attesa di te*.
  * "Match the canonical API or log term: `Production` not `Prod`, `Deployed` not `Live`, `Canceled` not `Cancelled` (the Vercel API uses one L)." (https://vercel.com/geist/badge)
  * "Skip stuffing sentences inside (`Currently Active`, `You are on Pro`); the surrounding row supplies the context." (https://vercel.com/geist/badge)
  * @access "Don’t rely on color alone; the text has to be readable without it." (https://vercel.com/geist/badge)
- * Ours: the word is the name; the mark is `aria-hidden`, so colour never carries the state alone.
- * Not focusable.
+ * Ours: the word is the name; the shape is `aria-hidden`, so colour never carries the state alone.
+ * Not focusable. Each app keeps one value-to-tone map in one module; nothing else picks a status
+ * colour. A healthy record shows no status, except the operational-state and run-outcome columns
+ * defined by DESIGN.md's Status rule.
  */
-function StatusBadge({ tone, label, since, className, size = "md", emphasis = "subtle", ...props }) {
-    const Mark = MARK_BY_TONE[tone];
-    const fill = FILL_BY_TONE[tone];
-    return (_jsxs(Badge, { className: cn(fill[emphasis], CIRCLE_MARK_INSET[size], className), "data-emphasis": emphasis, "data-variant": fill.name, icon: _jsx(Mark, { "aria-hidden": "true" }), size: size, ...props, children: [label, since ? (_jsx("span", { className: "tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
+function StatusBadge({ tone, label, since, className, size = "md", ...props }) {
+    const { name, shape, ink, edge } = TONE[tone];
+    const { text, mark } = SIZE[size];
+    return (_jsxs("span", { className: cn("inline-flex w-fit max-w-full shrink-0 items-center font-medium whitespace-nowrap text-foreground", text, className), "data-size": size, "data-slot": "status-badge", "data-variant": name, ...props, children: [_jsx(StatusMark, { className: cn(mark, ink), edge: edge, shape: shape }), label, since ? (_jsx("span", { className: "font-normal text-muted-foreground tabular-nums", "data-slot": "status-badge-since", children: since })) : null] }));
 }
 export { StatusBadge };

package/dist/internal/status-mark.d.ts

@@ -0,0 +1,16 @@
+export type StatusMarkShape = "circle" | "diamond" | "triangle" | "square" | "ring";
+export type StatusMarkDot = {
+    x: number;
+    y: number;
+    edge: boolean;
+};
+export declare const STATUS_MARK_DOTS: Record<StatusMarkShape, readonly StatusMarkDot[]>;
+export declare const STATUS_MARK_DOT_RADIUS: {
+    readonly inner: 0.7;
+    readonly edge: 0.76;
+};
+export declare const STATUS_MARK_PATHS: Record<StatusMarkShape, {
+    inner: string;
+    edge: string;
+}>;
+//# sourceMappingURL=status-mark.d.ts.map

package/dist/internal/status-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-mark.d.ts","sourceRoot":"","sources":["../../src/internal/status-mark.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpF,MAAM,MAAM,aAAa,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AA+GpE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE,SAAS,aAAa,EAAE,CAM9E,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;CAAsC,CAAC;AAgB1E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAMtF,CAAC"}

package/dist/internal/status-mark.js

@@ -0,0 +1,128 @@
+/*
+ * The five status marks: a shape filled with dots on a honeycomb grid, the
+ * material of the Agent orbs' dotted forms. Every coordinate is on a 20-unit
+ * square centred on 0, the size the marks are tuned at; a row of evenly spaced
+ * edge dots draws the outline and the inner dots keep clear of it, so the
+ * shape reads before the texture. The dots are computed once, at load.
+ */
+const PITCH = 1.9;
+// Sized by eye so the five carry the same weight beside a word; the triangle
+// sits low because its weight is in its base.
+const MARKS = {
+    circle: { outline: { kind: "circle", r: 6.7 } },
+    diamond: {
+        outline: {
+            kind: "polygon",
+            corners: [
+                [0, -7.8],
+                [7.8, 0],
+                [0, 7.8],
+                [-7.8, 0],
+            ],
+        },
+    },
+    triangle: {
+        outline: {
+            kind: "polygon",
+            corners: [
+                [0, -6.9],
+                [7.9, 6.6],
+                [-7.9, 6.6],
+            ],
+        },
+    },
+    square: {
+        outline: {
+            kind: "polygon",
+            corners: [
+                [-5.8, -5.8],
+                [5.8, -5.8],
+                [5.8, 5.8],
+                [-5.8, 5.8],
+            ],
+        },
+    },
+    ring: { outline: { kind: "circle", r: 6.7 }, hollow: true },
+};
+function sides(corners) {
+    return corners.map((start, index) => [start, corners[(index + 1) % corners.length]]);
+}
+function contains(outline, [x, y]) {
+    if (outline.kind === "circle")
+        return Math.hypot(x, y) <= outline.r;
+    let inside = false;
+    for (const [[ax, ay], [bx, by]] of sides(outline.corners)) {
+        if (ay > y !== by > y && x < ((bx - ax) * (y - ay)) / (by - ay) + ax)
+            inside = !inside;
+    }
+    return inside;
+}
+function distanceToEdge(outline, [x, y]) {
+    if (outline.kind === "circle")
+        return outline.r - Math.hypot(x, y);
+    return Math.min(...sides(outline.corners).map(([[ax, ay], [bx, by]]) => {
+        const dx = bx - ax;
+        const dy = by - ay;
+        const t = Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / (dx * dx + dy * dy)));
+        return Math.hypot(x - ax - t * dx, y - ay - t * dy);
+    }));
+}
+// A dot on every corner, then evenly spaced along each side.
+function edgeDots(outline) {
+    if (outline.kind === "circle") {
+        const count = Math.round((2 * Math.PI * outline.r) / PITCH);
+        return Array.from({ length: count }, (_, index) => {
+            const angle = -Math.PI / 2 + (index / count) * 2 * Math.PI;
+            return [Math.cos(angle) * outline.r, Math.sin(angle) * outline.r];
+        });
+    }
+    return sides(outline.corners).flatMap(([[ax, ay], [bx, by]]) => {
+        const count = Math.max(1, Math.round(Math.hypot(bx - ax, by - ay) / PITCH));
+        return Array.from({ length: count }, (_, step) => [ax + ((bx - ax) * step) / count, ay + ((by - ay) * step) / count]);
+    });
+}
+function innerDots(outline) {
+    const rowHeight = (PITCH * Math.sqrt(3)) / 2;
+    const dots = [];
+    for (let row = -6; row <= 6; row++) {
+        for (let column = -6; column <= 6; column++) {
+            const dot = [column * PITCH + (row % 2 === 0 ? 0 : PITCH / 2), row * rowHeight];
+            if (contains(outline, dot) && distanceToEdge(outline, dot) >= PITCH * 0.85)
+                dots.push(dot);
+        }
+    }
+    return dots;
+}
+function dotsOf(shape) {
+    const { outline, hollow } = MARKS[shape];
+    return [
+        ...(hollow ? [] : innerDots(outline)).map(([x, y]) => ({ x, y, edge: false })),
+        ...edgeDots(outline).map(([x, y]) => ({ x, y, edge: true })),
+    ];
+}
+export const STATUS_MARK_DOTS = {
+    circle: dotsOf("circle"),
+    diamond: dotsOf("diamond"),
+    triangle: dotsOf("triangle"),
+    square: dotsOf("square"),
+    ring: dotsOf("ring"),
+};
+export const STATUS_MARK_DOT_RADIUS = { inner: 0.7, edge: 0.76 };
+// Each layer of dots as one path of zero-length strokes: drawn with round caps
+// at twice the dot's radius, every `M x y h0` is one dot, so a mark is two
+// nodes however many dots it has.
+const pathOf = (dots) => dots.map(({ x, y }) => `M${x.toFixed(2)} ${y.toFixed(2)}h0`).join("");
+function pathsOf(shape) {
+    const dots = STATUS_MARK_DOTS[shape];
+    return {
+        inner: pathOf(dots.filter((dot) => !dot.edge)),
+        edge: pathOf(dots.filter((dot) => dot.edge)),
+    };
+}
+export const STATUS_MARK_PATHS = {
+    circle: pathsOf("circle"),
+    diamond: pathsOf("diamond"),
+    triangle: pathsOf("triangle"),
+    square: pathsOf("square"),
+    ring: pathsOf("ring"),
+};

package/dist/internal/table-compact-line.d.ts

@@ -6,6 +6,8 @@ export type TableDetailFact = {
     value: React.ReactNode;
     /** The value is prose a reader needs whole, such as why a check failed: the line wraps instead of ending in an ellipsis. */
     wraps?: boolean;
+    /** The value stands beside the record's name instead, which ends in an ellipsis before it: a status. */
+    besideName?: boolean;
 };
 export declare function DetailFacts({ facts, leadingSeparator, }: {
     facts: readonly TableDetailFact[];
@@ -25,6 +27,8 @@ export declare function TableCompactLine({ children, ...value }: TableCompactLin
 }): React.JSX.Element;
 /** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
 export declare function TableCompactFacts(): React.JSX.Element | null;
+/** The compact facts that stand beside the name of the row this stands in, which no ellipsis cuts; nothing outside such a row or on a card wide enough for the columns. */
+export declare function TableCompactNameFacts(): React.JSX.Element | null;
 /**
  * Whether the entity rows around it are laid out compact now, read from the layout the browser
  * drew: a row's cells move what does not fit beside the name under it instead.

package/dist/internal/table-compact-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAehC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}
+{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wGAAwG;IACxG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAiBhC;AAED,2KAA2K;AAC3K,wBAAgB,qBAAqB,6BAkBpC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}

package/dist/internal/table-compact-line.js

@@ -18,9 +18,22 @@ export function TableCompactLine({ children, ...value }) {
 /** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
 export function TableCompactFacts() {
     const line = React.useContext(TableCompactLineContext);
-    if (!line || line.facts.length === 0)
+    if (!line)
         return null;
-    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", "data-wraps": line.facts.some((fact) => fact.wraps) || undefined, children: _jsx(DetailFacts, { facts: line.facts, leadingSeparator: true }) }));
+    const facts = line.facts.filter((fact) => !fact.besideName);
+    if (facts.length === 0)
+        return null;
+    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", "data-wraps": facts.some((fact) => fact.wraps) || undefined, children: _jsx(DetailFacts, { facts: facts, leadingSeparator: true }) }));
+}
+/** The compact facts that stand beside the name of the row this stands in, which no ellipsis cuts; nothing outside such a row or on a card wide enough for the columns. */
+export function TableCompactNameFacts() {
+    const line = React.useContext(TableCompactLineContext);
+    if (!line)
+        return null;
+    const facts = line.facts.filter((fact) => fact.besideName);
+    if (facts.length === 0)
+        return null;
+    return (_jsx("span", { className: cn("flex shrink-0 items-center gap-2", tableCompactLayouts[line.layout].details), "data-slot": "table-name-facts", children: facts.map((fact) => (_jsxs("span", { className: "flex items-center", children: [_jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id))) }));
 }
 const TableLaidOutCompactContext = React.createContext(false);
 /**