@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/icon.js

@@ -29,7 +29,7 @@ export const icon = cva({
  * For an icon that points along the line, such as a caret or an arrow: mirrored under `dir=rtl`, so
  * "next" points the way the text reads. It sets `scale`, so a `transform` or `rotate` still applies.
  */
-export const directional = css({ _rtl: { scale: "-1 1" } });
+export const directional = css({ _rtl: { scale: "[-1 1]" } });
 /** Continuous rotation for in-progress icons such as `SpinnerGapIcon`. */
 export const spinning = css({
     animation: "spin 1s linear infinite",

package/dist/components/input.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input as BaseInput } from "@base-ui/react/input";
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import { useDebouncer } from "@tanstack/react-pacer";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { useFieldControl } from "./field-context.js";
 import { icon } from "./icon.js";
@@ -31,22 +31,19 @@ const fieldFace = {
     },
 };
 const field = cva({
-    base: { ...fieldFace, width: "100%", lineHeight: "tight" },
+    base: { ...fieldFace, width: "full", lineHeight: "tight" },
     variants: {
         size: {
-            /** The editor an inline-edit row opens in place of its value. */
             inline: {
                 height: "field.inline",
                 paddingInline: "menu.itemInline",
                 fontSize: "body",
             },
-            /** For a row of filters, beside compact selects and small buttons. */
             small: {
                 height: "control.compact",
                 paddingInline: "control.compactInline",
                 fontSize: "caption",
             },
-            /** The field: the height of the default button. */
             medium: {
                 height: "control.default",
                 paddingInline: "control.compactInline",
@@ -73,7 +70,7 @@ const search = cva({
         alignItems: "center",
         gap: "control.iconGap",
         height: "control.search",
-        width: "100%",
+        width: "full",
         border: "1px solid transparent",
         color: "fg.muted",
         _hover: { color: "fg.primary" },
@@ -115,7 +112,7 @@ const search = cva({
         width: {
             fill: {},
             // Grows with its toolbar from a name's width up to a search field's, leaving its filters room.
-            field: { flex: "1", minWidth: "0", flexBasis: "220px", maxWidth: "control.searchField" },
+            field: { flex: "1", minWidth: "0", flexBasis: "[220px]", maxWidth: "control.searchField" },
         },
         size: {
             regular: {},
@@ -133,11 +130,11 @@ const searchText = cva({
     base: {
         flex: "1",
         minWidth: "0",
-        height: "100%",
+        height: "full",
         padding: "none",
         border: "0",
         background: "transparent",
-        outline: "none",
+        outline: "0",
         color: "fg.primary",
         fontFamily: "sans",
         fontSize: "body",
@@ -164,8 +161,13 @@ export function SearchInput({ variant = "regular", size: ownSize, width = "fill"
         setDraft(value ?? "");
     }
     const committing = onValueCommit !== undefined;
-    const committed = value ?? defaultValue ?? "";
-    const commit = useDebouncer((next) => onValueCommit?.(next), { wait: debounceMs });
+    const lastCommittedText = useRef(defaultValue ?? "");
+    const committed = value ?? lastCommittedText.current;
+    const reportCommit = (next) => {
+        lastCommittedText.current = next;
+        onValueCommit?.(next);
+    };
+    const commit = useDebouncer(reportCommit, { wait: debounceMs });
     // A new `value` replaces the draft, and with it any commit still waiting.
     const cancelCommit = commit.cancel;
     useEffect(() => cancelCommit(), [cancelCommit, value]);
@@ -182,14 +184,13 @@ export function SearchInput({ variant = "regular", size: ownSize, width = "fill"
                 }, onKeyDown: (event) => {
                     if (committing && event.key === "Enter") {
                         commit.cancel();
-                        onValueCommit(event.currentTarget.value);
+                        reportCommit(event.currentTarget.value);
                     }
                     onKeyDown?.(event);
                 }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { boxed: true, hotkey: shortcut })] }));
 }
 /*
- * The Round 2 search field is an underline, not a box: an icon, the text, and a clear button on
- * one hairline. Hovered it takes the hover wash, and focused the ring, both on its own nearly
+ * Hovered it takes the hover wash, and focused the ring, both on its own nearly
  * square corners. Quiet, in a menu or popover, the hairline is the sheet's divider and nothing
  * else changes: the popup opens with the field focused, and its caret shows that.
  */
@@ -198,7 +199,7 @@ const underline = cva({
         display: "flex",
         alignItems: "center",
         gap: "control.iconGap",
-        width: "100%",
+        width: "full",
         paddingInline: "search.inline",
         borderBottom: "1px solid token(colors.border.control)",
         color: "fg.muted",
@@ -223,11 +224,11 @@ const underline = cva({
 const underlineText = css({
     flex: "1",
     minWidth: "0",
-    height: "100%",
+    height: "full",
     padding: "none",
     border: "0",
     background: "transparent",
-    outline: "none",
+    outline: "0",
     color: "fg.primary",
     fontFamily: "sans",
     fontSize: "body",

package/dist/components/keycap.d.ts

@@ -1,14 +1,10 @@
 import { type Hotkey } from "./hotkeys.js";
 import type { ComponentProps } from "react";
-/**
- * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
- * character, such as `Esc`, takes the wider word cap on its own.
- */
+/** A label of more than one character, such as `Esc`, takes the wider word cap on its own. */
 export declare function Keycap({ className, children, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
- * `Keycap`, 2px apart, as a menu row or a search field shows it.
+ * elsewhere, and a sequence's steps are spaced ("G I").
  */
 export declare function ShortcutHint({ hotkey, boxed, className, ...props }: ComponentProps<"kbd"> & {
     hotkey: Hotkey;

package/dist/components/keycap.js

@@ -1,10 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css, cva, cx } from "#primitives/css";
 import { detectPlatform, formatForDisplay } from "./hotkeys.js";
-/*
- * A key on the raised face: a glyph such as ⌘ or ↵ sits in a 22px square, and a word such as Esc
- * in a wider cap. The edge is the canvas hairline.
- */
 const keycap = cva({
     base: {
         display: "inline-grid",
@@ -15,7 +11,7 @@ const keycap = cva({
         paddingInline: "none",
         border: "1px solid token(colors.border.canvas)",
         borderRadius: "keycap",
-        background: "token(gradients.raised)",
+        background: "[token(gradients.raised)]",
         color: "fg.primary",
         fontFamily: "sans",
         fontSize: "code",
@@ -50,7 +46,7 @@ const shortcut = css({
     fontFamily: "sans",
     fontSize: "code",
     fontWeight: "medium",
-    letterSpacing: "tight",
+    letterSpacing: "compact",
     lineHeight: "tight",
     whiteSpace: "nowrap",
     _phone: { display: "none" },
@@ -59,18 +55,14 @@ const shortcut = css({
 const separatorToken = detectPlatform() === "mac" ? "" : undefined;
 // Between the keys of a boxed hint, split apart again so each takes its own cap.
 const keySeparator = "\n";
-/**
- * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
- * character, such as `Esc`, takes the wider word cap on its own.
- */
+/** A label of more than one character, such as `Esc`, takes the wider word cap on its own. */
 export function Keycap({ className, children, ...props }) {
     const holdsWord = typeof children === "string" && Array.from(children).length > 1;
     return (_jsx("kbd", { ...props, className: cx(keycap({ label: holdsWord ? "word" : "glyph" }), className), "data-ciridae-ui": "", children: children }));
 }
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
- * `Keycap`, 2px apart, as a menu row or a search field shows it.
+ * elsewhere, and a sequence's steps are spaced ("G I").
  */
 export function ShortcutHint({ hotkey, boxed = false, className, ...props }) {
     if (boxed) {

package/dist/components/layout.js

@@ -4,18 +4,19 @@ import { createContext, useContext } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { Checkbox } from "./form-controls.js";
 import { Skeleton } from "./skeleton.js";
-// Each name is its pixel gap; bare numbers would read as Panda's spacing scale, four times larger.
-// `section` is the gap between a page's sections, which tightens to the page gap on a phone.
+// Each name is its pixel gap, read from the `gap.*` scale rather than a role's token, so a role
+// that moves with the design never changes what a number means. `section` is the gap between a
+// page's sections, which tightens to the page gap on a phone.
 const layoutGap = cva({
     variants: {
         gap: {
-            "4": { gap: "layout.tightGap" },
-            "6": { gap: "menu.inset" },
-            "8": { gap: "layout.controlGap" },
-            "12": { gap: "layout.contentGap" },
-            "16": { gap: "layout.clusterGap" },
-            "20": { gap: "layout.pageGap" },
-            "24": { gap: "layout.sectionGap" },
+            "4": { gap: "gap.4" },
+            "6": { gap: "gap.6" },
+            "8": { gap: "gap.8" },
+            "12": { gap: "gap.12" },
+            "16": { gap: "gap.16" },
+            "20": { gap: "gap.20" },
+            "24": { gap: "gap.24" },
             section: { gap: "layout.sectionGap", _phone: { gap: "layout.pageGap" } },
         },
     },
@@ -208,7 +209,7 @@ const listRow = cva({
     defaultVariants: { flush: false },
 });
 const listRowLink = css({
-    color: "inherit",
+    color: "[inherit]",
     textDecoration: "none",
     cursor: "pointer",
     _hover: { background: "bg.rowHover" },

package/dist/components/lightbox.js

@@ -22,11 +22,11 @@ const popup = css({
     gridTemplateRows: "auto minmax(0, 1fr)",
     background: "bg.canvas",
     color: "fg.primary",
-    outline: "none",
-    transitionProperty: "opacity",
+    outline: "0",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    _motionReduce: { transition: "none" },
-    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
+    _motionReduce: { transition: "[none]" },
+    "&[data-starting-style], &[data-ending-style]": { opacity: "[0]" },
 });
 const bar = css({
     display: "flex",
@@ -51,11 +51,11 @@ const stage = css({
     minHeight: "0",
     paddingInline: "layout.pageGap",
     paddingBottom: "layout.pageGap",
-    "& > img": { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" },
+    "& > img": { maxWidth: "full", maxHeight: "full", objectFit: "contain" },
     "& > iframe": {
-        width: "100%",
+        width: "full",
         maxWidth: "overlay.dialogWide",
-        height: "100%",
+        height: "full",
         border: "0",
         borderRadius: "action",
         // Solid, so a document with no background of its own does not show the scrim through it.
@@ -64,7 +64,7 @@ const stage = css({
 });
 const step = css({
     position: "absolute",
-    top: "50%",
+    top: "[50%]",
     transform: "translateY(-50%)",
     "&[data-step=previous]": { insetInlineStart: "layout.controlGap" },
     "&[data-step=next]": { insetInlineEnd: "layout.controlGap" },

package/dist/components/link.js

@@ -15,7 +15,7 @@ const anchor = cva({
     variants: {
         tone: {
             /** Reads as body text; the underline on hover is the only affordance. */
-            inherit: { color: "inherit" },
+            inherit: { color: "[inherit]" },
             muted: { color: "fg.muted", fontSize: "caption" },
             accent: { color: "accent.brand" },
         },

package/dist/components/locale.d.ts

@@ -39,6 +39,8 @@ export declare const englishLabels: {
         copy: (what: string) => string;
         copyValue: (what: string, value: string) => string;
         copied: string;
+        /** A figure's name and its value, read together, such as a bar segment's. */
+        labelWithValue: (label: string, value: string) => string;
         copyAction: string;
         moreActions: string;
         moreTabs: string;
@@ -63,7 +65,6 @@ export declare const englishLabels: {
         label: string;
         previous: string;
         next: string;
-        /** The rows a page shows and the page size, from numbers already formatted. */
         summary: (first: string, last: string, total: string) => string;
         perPage: (count: string) => string;
     };
@@ -79,7 +80,6 @@ export declare const englishLabels: {
     };
     commandMenu: {
         title: string;
-        /** The footer's key hints beside the close key. */
         move: string;
         open: string;
     };
@@ -236,18 +236,28 @@ export declare const englishLabels: {
         sendMessage: string;
         stopped: string;
         failed: string;
-        /** The title of a failed reply's notice. */
         couldNotAnswer: string;
         notSent: string;
-        typing: string;
         resize: string;
+        /** The docked sheet's width, as its resize handle tells a screen reader. */
+        sheetWidth: (pixels: number) => string;
         openFullPage: string;
         dock: string;
         undock: string;
         attachFile: string;
         mentions: string;
         assistantName: string;
+        /** A finished reply as the thread announces it to a screen reader: who wrote it, then its text. */
+        replyAnnouncement: (authorName: string, text: string) => string;
         answered: (answers: string) => string;
+        /** A run of the agent's steps, folded: the first step's title and how many follow it. */
+        foldedSteps: (firstTitle: string, laterCount: number) => string;
+        /** How one of the agent's steps ended, read after its title to a screen reader. */
+        stepStatus: {
+            running: string;
+            completed: string;
+            failed: string;
+        };
         allow: string;
         deny: string;
         allowed: string;
@@ -305,6 +315,8 @@ export declare const englishLabels: {
         /** The bulk actions' group, which acts on the items shown. */
         bulkActions: string;
         selectedCount: (selected: number, total: number) => string;
+        /** A group heading's count of its selected items. */
+        groupSelectedCount: (selected: number, total: number) => string;
         noMatches: (search: string) => string;
     };
     filters: {
@@ -352,6 +364,13 @@ export declare const englishLabels: {
             after: string;
         };
         betweenValues: (from: string, to: string) => string;
+        /** A between filter with one end typed, as its chip reads it: the end itself matches. */
+        oneEndedRangeOperators: {
+            atLeast: string;
+            atMost: string;
+            onOrAfter: string;
+            onOrBefore: string;
+        };
     };
     dateRange: {
         label: string;
@@ -380,7 +399,6 @@ export declare const englishLabels: {
         runToGo: string;
         runDoneLabel: (count: number) => string;
         runToGoLabel: (count: number) => string;
-        /** The folded finished stages, with their count. */
         runDoneShort: (count: number) => string;
         checklistProgress: (done: number, total: number) => string;
     };
@@ -420,8 +438,6 @@ export declare const englishLabels: {
         signOut: string;
     };
     themeCustomizer: {
-        palette: string;
-        paletteName: (name: string) => string;
         colorTheme: string;
         system: string;
         light: string;

package/dist/components/locale.js

@@ -33,6 +33,8 @@ export const englishLabels = {
         copy: (what) => `Copy ${what}`,
         copyValue: (what, value) => `Copy ${what} ${value}`,
         copied: "Copied",
+        /** A figure's name and its value, read together, such as a bar segment's. */
+        labelWithValue: (label, value) => `${label}, ${value}`,
         copyAction: "Copy",
         moreActions: "More actions",
         moreTabs: "More tabs",
@@ -54,7 +56,6 @@ export const englishLabels = {
         label: "Pagination",
         previous: "Previous",
         next: "Next",
-        /** The rows a page shows and the page size, from numbers already formatted. */
         summary: (first, last, total) => `Showing ${first} to ${last} of ${total}`,
         perPage: (count) => `${count} per page`,
     },
@@ -67,7 +68,6 @@ export const englishLabels = {
     },
     commandMenu: {
         title: "Command menu",
-        /** The footer's key hints beside the close key. */
         move: "Move",
         open: "Open",
     },
@@ -218,18 +218,24 @@ export const englishLabels = {
         sendMessage: "Send message",
         stopped: "Stopped",
         failed: "Failed",
-        /** The title of a failed reply's notice. */
         couldNotAnswer: "Couldn't finish that answer",
         notSent: "Not sent",
-        typing: "Typing",
         resize: "Resize",
+        /** The docked sheet's width, as its resize handle tells a screen reader. */
+        sheetWidth: (pixels) => `${pixels} pixels wide`,
         openFullPage: "Open full page",
         dock: "Dock",
         undock: "Undock",
         attachFile: "Attach a file",
         mentions: "Mentions",
         assistantName: "Agent",
+        /** A finished reply as the thread announces it to a screen reader: who wrote it, then its text. */
+        replyAnnouncement: (authorName, text) => `${authorName}: ${text}`,
         answered: (answers) => `Answered ${answers}`,
+        /** A run of the agent's steps, folded: the first step's title and how many follow it. */
+        foldedSteps: (firstTitle, laterCount) => laterCount > 0 ? `${firstTitle} · +${laterCount}` : firstTitle,
+        /** How one of the agent's steps ended, read after its title to a screen reader. */
+        stepStatus: { running: "Running", completed: "Done", failed: "Failed" },
         allow: "Allow",
         deny: "Deny",
         allowed: "Allowed",
@@ -284,6 +290,8 @@ export const englishLabels = {
         /** The bulk actions' group, which acts on the items shown. */
         bulkActions: "Select or clear the shown items",
         selectedCount: (selected, total) => `${selected} of ${total} selected`,
+        /** A group heading's count of its selected items. */
+        groupSelectedCount: (selected, total) => `${selected}/${total}`,
         noMatches: (search) => `No matches for “${search}”`,
     },
     filters: {
@@ -331,6 +339,13 @@ export const englishLabels = {
             after: "is after",
         },
         betweenValues: (from, to) => `${from} and ${to}`,
+        /** A between filter with one end typed, as its chip reads it: the end itself matches. */
+        oneEndedRangeOperators: {
+            atLeast: "is at least",
+            atMost: "is at most",
+            onOrAfter: "is on or after",
+            onOrBefore: "is on or before",
+        },
     },
     dateRange: {
         label: "Date range",
@@ -356,7 +371,6 @@ export const englishLabels = {
         runToGo: "To go",
         runDoneLabel: (count) => `${count} stages done`,
         runToGoLabel: (count) => `${count} stages to go`,
-        /** The folded finished stages, with their count. */
         runDoneShort: (count) => `${count} done`,
         checklistProgress: (done, total) => `${done} of ${total}`,
     },
@@ -383,8 +397,6 @@ export const englishLabels = {
     appFrame: { status: "Status", localBuild: "local", updateAvailable: "Update available" },
     accountMenu: { menu: "Account menu", signOut: "Sign out" },
     themeCustomizer: {
-        palette: "Palette",
-        paletteName: (name) => name.charAt(0).toUpperCase() + name.slice(1),
         colorTheme: "Color theme",
         system: "System",
         light: "Light",

package/dist/components/log-entry.d.ts

@@ -2,39 +2,27 @@ import type { ComponentProps, ReactNode } from "react";
 export type LogEntryProps = Omit<ComponentProps<"div">, "children"> & {
     /** When it happened, epoch milliseconds, written as the time of day. */
     at: number;
-    /** Who did it: a person's avatar, or a system's or an agent's icon. */
     actor: ReactNode;
-    /** What happened, such as "The agent drafted remittance advice for INV-4799". */
     headline: ReactNode;
-    /** A line more about it, such as what it waits on. */
     detail?: ReactNode;
-    /** At the end of the row, such as a badge naming whether a person, a model or an agent did it. */
     badge?: ReactNode;
     /** `comfortable` for a page's log, `compact` for one line per entry, `panel` in a drawer. */
     density?: "comfortable" | "compact" | "panel";
     selected?: boolean;
-    /** A hairline under the row, between it and the next. */
     divider?: boolean;
-    /** Makes the row a button, such as one that opens the entry beside the log. */
     onSelect?: () => void;
 };
-/** One thing that happened, as a row of a log. */
 export declare function LogEntry({ at, actor, headline, detail, badge, density, selected, divider, onSelect, className, ...props }: LogEntryProps): import("react").JSX.Element;
 export type LogGroupHeaderProps = Omit<ComponentProps<"div">, "children"> & {
-    /** What the group is, such as "Today". */
     label: ReactNode;
-    /** Beside it, quieter, such as the date. */
     meta?: ReactNode;
+    density?: LogEntryProps["density"];
 };
-/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
-export declare function LogGroupHeader({ label, meta, className, ...props }: LogGroupHeaderProps): import("react").JSX.Element;
+export declare function LogGroupHeader({ label, meta, density, className, ...props }: LogGroupHeaderProps): import("react").JSX.Element;
 export type LogActorProps = {
     /** Who or what acted, read out in place of the mark. */
     name: string;
-    /** A person's photo; their initials stand in without one. */
     src?: string | null;
-    /** For an agent, a sync or a rule: its icon in place of a person's photo or initials. */
     icon?: ReactNode;
 };
-/** Who did a log entry's thing, as the mark for its `actor`. */
 export declare function LogActor({ name, src, icon }: LogActorProps): import("react").JSX.Element;

package/dist/components/log-entry.js

@@ -1,10 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * A record's activity as a log: a row per thing that happened, under a heading per day. A row is
- * the time, who did it, what happened and a line more about it, and a trailing badge such as
- * whether a person, a model or an agent did it. `comfortable` is a page's log, `compact` puts the
- * line more beside what happened, and `panel` is the log in a drawer or side panel.
- */
 import { css, cx } from "#primitives/css";
 import { Avatar } from "./data-display.js";
 import { useCiridaeLocale } from "./locale.js";
@@ -12,27 +6,25 @@ const entry = css({
     display: "flex",
     alignItems: "flex-start",
     gap: "layout.clusterGap",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     paddingBlock: "log.entryBlock",
     paddingInline: "log.entryInline",
     color: "fg.primary",
-    _hover: { background: "token(gradients.rowHover)" },
-    "&[data-selected], &[data-selected]:hover": { background: "token(gradients.selected)" },
+    _hover: { background: "[token(gradients.rowHover)]" },
+    "&[data-selected], &[data-selected]:hover": { background: "[token(gradients.selected)]" },
     "&[role=button]": { cursor: "pointer" },
     _focusVisible: { focusRing: "inset" },
     "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
     "&[data-density=compact]": { alignItems: "center", paddingBlock: "log.entryCompactBlock" },
     // A compact row's rule sits inside its padding, so it stays the kit's 40px with or without one.
     "&[data-density=compact][data-divider]": {
-        paddingBottom: "calc(token(spacing.log.entryCompactBlock) - token(sizes.border.hairline))",
+        paddingBottom: "[calc(token(spacing.log.entryCompactBlock) - token(sizes.border.hairline))]",
     },
     "&[data-density=panel]": {
         paddingBlock: "log.entryPanelBlock",
         paddingInline: "log.entryPanelInline",
     },
-    // The time, the actor and the badge each sit in a line as tall as the actor, level with the
-    // headline beside them.
     "& > [data-time], & > [data-actor], & > [data-badge]": {
         display: "flex",
         flexShrink: "0",
@@ -55,7 +47,6 @@ const entry = css({
         flex: "1",
         minWidth: "0",
     },
-    // One line as tall as the actor, ending in an ellipsis where the row is too narrow for it.
     "& [data-headline]": {
         display: "flex",
         alignItems: "center",
@@ -87,8 +78,7 @@ const entry = css({
         "& > [data-detail]": { flex: "1", lineHeight: "tight" },
     },
 });
-// The log's actor mark: a person's photo or initials, or an icon for an agent, a sync or a rule,
-// on the raised glass circle. The icon is the small icon's size at every density.
+// The icon is the small icon's size at every density.
 const actorIcon = css({
     display: "inline-grid",
     placeItems: "center",
@@ -96,7 +86,7 @@ const actorIcon = css({
     width: "avatar.menu",
     height: "avatar.menu",
     borderRadius: "round",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     color: "fg.label",
     "--edge": "token(gradients.border.raised)",
     "& > svg": { fontSize: "icon.small" },
@@ -104,20 +94,21 @@ const actorIcon = css({
 // Initials sit in the label grey here, where the avatar's own are the primary text colour; the
 // extra attribute outranks the avatar's kind rule.
 const actorPerson = css({ "&[data-ciridae-ui][data-kind=user]": { color: "fg.label" } });
+// It keeps its rows' side padding, so the day lines up with their time column.
 const groupHeader = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
     paddingTop: "panel.comfortable",
-    paddingInline: "panel.default",
+    paddingInline: "log.entryInline",
     paddingBottom: "layout.tightGap",
+    "&[data-density=panel]": { paddingInline: "log.entryPanelInline" },
     fontSize: "code",
     fontWeight: "medium",
     lineHeight: "tight",
     "& > [data-label]": { color: "fg.primary" },
     "& > [data-meta]": { color: "fg.subtle" },
 });
-/** One thing that happened, as a row of a log. */
 export function LogEntry({ at, actor, headline, detail, badge, density = "comfortable", selected = false, divider = true, onSelect, className, ...props }) {
     const { formatTime } = useCiridaeLocale();
     const selectOnKey = (event) => {
@@ -134,11 +125,9 @@ export function LogEntry({ at, actor, headline, detail, badge, density = "comfor
             onKeyDown: selectOnKey,
         }), className: cx(entry, className), "data-ciridae-ui": "", "data-density": density, "data-selected": selected || undefined, "data-divider": divider || undefined, children: [_jsx("time", { "data-time": "", dateTime: new Date(at).toISOString(), children: formatTime(at) }), _jsx("span", { "data-actor": "", children: actor }), _jsxs("div", { "data-body": "", children: [_jsx("span", { "data-headline": "", children: _jsx("span", { children: headline }) }), detail && _jsx("span", { "data-detail": "", children: detail })] }), badge && _jsx("span", { "data-badge": "", children: badge })] }));
 }
-/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
-export function LogGroupHeader({ label, meta, className, ...props }) {
-    return (_jsxs("div", { ...props, className: cx(groupHeader, className), "data-ciridae-ui": "", children: [_jsx("span", { "data-label": "", children: label }), meta && _jsx("span", { "data-meta": "", children: meta })] }));
+export function LogGroupHeader({ label, meta, density = "comfortable", className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(groupHeader, className), "data-ciridae-ui": "", "data-density": density, children: [_jsx("span", { "data-label": "", children: label }), meta && _jsx("span", { "data-meta": "", children: meta })] }));
 }
-/** Who did a log entry's thing, as the mark for its `actor`. */
 export function LogActor({ name, src, icon }) {
     if (icon)
         return (_jsx("span", { role: "img", "aria-label": name, className: actorIcon, "data-ciridae-ui": "", "data-edge": "gradient", children: icon }));

package/dist/components/log-list.js

@@ -21,7 +21,7 @@ const filledList = css({
     overflowX: "hidden",
     border: "1px solid token(colors.border.subtle)",
     background: "bg.panel",
-    _focusVisible: { outline: "2px solid token(colors.border.focus)", outlineOffset: "2px" },
+    _focusVisible: { outline: "2px solid token(colors.border.focus)", outlineOffset: "[2px]" },
 });
 const output = css({
     margin: "none",