@ciridae/ui 1.0.3 → 1.0.5

package/dist/components/drawer.js

@@ -9,55 +9,51 @@ import { HotkeyLayer } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { Eyebrow, heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
-const backdrop = css({
-    position: "fixed",
-    inset: "none",
-    zIndex: "drawer",
-    background: "bg.backdrop",
-    transitionProperty: "opacity",
-    transitionDuration: "fast",
-    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
-    _motionReduce: { transitionDuration: "0ms" },
-});
 const viewport = css({ position: "fixed", inset: "none", zIndex: "drawer", pointerEvents: "none" });
+/*
+ * A drawer sits beside the page, which stays usable: no scrim, docked to the window's right edge
+ * at full height, a glass shell holding the sheet. The shell's padding is what keeps the sheet off
+ * the window's edges, level with the main panel; a phone takes the sheet to the edges.
+ */
 const popup = cva({
     base: {
         position: "absolute",
-        // Inset from the window by the shell's gap and rounded like the main panel, so a sheet reads
-        // as the docked agent sheet does; a phone takes it to the edges, where rounding is a gap.
-        insetBlock: "panel.compact",
-        insetInlineEnd: "panel.compact",
+        insetBlock: "none",
+        insetInlineEnd: "none",
         display: "flex",
-        overflow: "hidden",
+        padding: "panel.compact",
         pointerEvents: "auto",
         outline: "none",
         textStyle: "body",
-        background: "bg.surface",
-        border: "1px solid token(colors.border.control)",
-        borderRadius: "action",
-        boxShadow: "card",
-        _phone: { insetBlock: "none", insetInlineEnd: "none", border: "0", borderRadius: "0" },
+        border: "1px solid token(colors.border.divider)",
+        borderRadius: "shell",
+        background: "bg.drawerShell",
+        backdropFilter: "blur(token(blurs.drawerShell))",
+        boxShadow: "drawerShell",
+        _phone: { padding: "none", border: "0", borderRadius: "0" },
         // Base UI drives live swipe drag through this custom property; the resting
         // transform must reference it or dragging won't visually track the pointer.
         transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
         transitionProperty: "transform",
         transitionDuration: "default",
         "&[data-starting-style], &[data-ending-style]": {
-            transform: "translateX(calc(100% + token(spacing.panel.compact)))",
-            _rtl: { transform: "translateX(calc(-100% - token(spacing.panel.compact)))" },
+            transform: "translateX(100%)",
+            _rtl: { transform: "translateX(-100%)" },
         },
         "&[data-swiping]": { transitionDuration: "0ms" },
         _motionReduce: { transitionDuration: "0ms" },
     },
+    // The sheet's width, plus the shell's padding and its 1px edge on each side.
     variants: {
         size: {
-            // A conversation or a short form, such as the agent sheet.
+            // The assistant and a preview.
             narrow: {
-                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheetNarrow))",
+                width: "min(100vw, calc(token(sizes.overlay.sheetNarrow) + token(spacing.panel.compact) * 2 + 2px))",
                 _phone: { width: "100vw" },
             },
+            // Create, edit and act.
             regular: {
-                width: "min(calc(100vw - token(spacing.panel.compact) * 2), token(sizes.overlay.sheet))",
+                width: "min(100vw, calc(token(sizes.overlay.sheet) + token(spacing.panel.compact) * 2 + 2px))",
                 _phone: { width: "100vw" },
             },
             // Near the full viewport, for content such as logs that needs the room.
@@ -72,26 +68,51 @@ const panel = css({
     minWidth: "0",
     minHeight: "0",
     flexDirection: "column",
+    overflow: "hidden",
+    border: "1px solid token(colors.border.divider)",
+    borderRadius: "action",
+    background: "bg.drawerSheet",
+    boxShadow: "soft",
     color: "fg.primary",
+    _phone: { border: "0", borderRadius: "0" },
 });
-// At least the app header's height, so on a desktop the sheet's header rule lines up with the main
-// panel's beside it: both start one shell gap from the window's top.
-const header = css({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    gap: "layout.contentGap",
-    minHeight: "shell.header",
-    paddingBlock: "layout.tightGap",
-    paddingInlineStart: "panel.comfortable",
-    paddingInlineEnd: "panel.default",
-    borderBottom: "1px solid token(colors.border.control)",
+// At least the app header's height, so on a desktop a title-only sheet's header rule lines up with
+// the main panel's beside it: both start one shell gap from the window's top. Under a subtitle it
+// takes the design's even 16px padding, its close button at the top. The narrow sheet's header is
+// one line exactly the app header's height, its 34px round buttons centred in it.
+const header = cva({
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: "layout.contentGap",
+        minHeight: "shell.header",
+        paddingBlock: "panel.default",
+        paddingInlineStart: "panel.comfortable",
+        paddingInlineEnd: "panel.default",
+        borderBottom: "1px solid token(colors.border.divider)",
+        "&:has([data-sheet-subtitle])": {
+            paddingBlock: "panel.comfortable",
+            "& > [data-header-line]": { alignItems: "flex-start" },
+        },
+    },
+    // The narrow header is the Ask Ciridae drawer's one line: 8px between its title and actions.
+    variants: {
+        size: {
+            narrow: { gap: "layout.controlGap", height: "shell.header", paddingBlock: "none" },
+            regular: { paddingInlineEnd: "panel.comfortable" },
+            large: { paddingInlineEnd: "panel.comfortable" },
+        },
+    },
 });
-const headerLine = css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "layout.contentGap",
+const headerLine = cva({
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "layout.contentGap",
+    },
+    variants: { size: { narrow: { gap: "layout.controlGap" }, regular: {}, large: {} } },
 });
 const titleBlock = css({
     display: "flex",
@@ -107,12 +128,21 @@ const titleLine = css({
     gap: "layout.contentGap",
     minWidth: "0",
 });
-const titleStyle = cx(heading(), css({ minWidth: "0", lineHeight: "tight" }));
-// The sheet's mark before its title, muted like the agent sheet's sparkle.
+const titleStyle = css({ minWidth: "0", lineHeight: "tight" });
+const subtitleStyle = css({
+    margin: "none",
+    color: "fg.label",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+// The sheet's mark before its title, muted like the agent sheet's sparkle. A flex row of its own,
+// so the heading stays the title's line high rather than an inline box's.
 const titleMark = css({
-    display: "inline-flex",
+    display: "flex",
     alignItems: "center",
-    gap: "control.iconGap",
+    gap: "layout.controlGap",
     minWidth: "0",
     "& > svg": { flexShrink: "0", color: "fg.muted" },
 });
@@ -154,10 +184,9 @@ const footer = css({
     alignItems: "center",
     justifyContent: "flex-end",
     flexWrap: "wrap",
-    gap: "layout.controlGap",
+    gap: "layout.tightGap",
     padding: "panel.comfortable",
-    borderTop: "1px solid token(colors.border.control)",
-    background: "bg.card",
+    borderTop: "1px solid token(colors.border.divider)",
 });
 const footerNote = css({
     flex: "1",
@@ -166,12 +195,20 @@ const footerNote = css({
     fontWeight: "medium",
     letterSpacing: "compact",
 });
-const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
+/**
+ * A sheet docked at the window's right edge beside the page, which stays usable: it is not modal
+ * and a click outside leaves it open, so Escape or its close button closes it. Pass `modal` or
+ * `disablePointerDismissal` to change either.
+ */
 export function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size = "regular", children, ...rootProps }) {
     const { labels, dir } = useCiridaeLocale();
-    const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost", size: "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
+    // The narrow sheet's title is body size, as the app header's is, beside a 34px close.
+    const narrow = size === "narrow";
+    const titleClassName = cx(heading({ size: narrow ? "small" : "medium" }), titleStyle);
+    const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, size: narrow ? "medium" : "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
     const titleContent = titleIcon ? (_jsxs("span", { className: titleMark, children: [titleIcon, title] })) : (title);
-    return (_jsx(BaseDrawer.Root, { ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(BaseDrawer.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header, children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine, children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleStyle, children: titleContent })), subtitle && _jsx(Eyebrow, { as: "p", children: subtitle })] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) })] }) }) }));
+    return (_jsx(BaseDrawer.Root, { modal: false, disablePointerDismissal: true, ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header({ size }), children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine({ size }), "data-header-line": "", children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent })), subtitle && (_jsx("p", { className: subtitleStyle, "data-sheet-subtitle": "", children: subtitle }))] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) }) }) }) }));
 }
 export function DrawerBody({ flush = false, className, ...props }) {
     return (_jsx(BaseDrawer.Content, { ...props, className: cx(body({ flush }), className), "data-ciridae-ui": "" }));
@@ -186,7 +223,7 @@ export function DrawerFooter({ note, className, children, ...props }) {
 const field = css({
     display: "flex",
     flexDirection: "column",
-    gap: "control.iconGap",
+    gap: "layout.controlGap",
     minWidth: "0",
 });
 const fieldLabelRow = css({
@@ -198,7 +235,7 @@ const fieldLabelRow = css({
     letterSpacing: "compact",
     lineHeight: "tight",
 });
-const fieldHint = css({ color: "fg.muted" });
+const fieldHint = css({ color: "fg.subtle" });
 const fieldError = css({
     margin: "none",
     color: "accent.red",

package/dist/components/editable-field.d.ts

@@ -65,16 +65,28 @@ export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
     badge?: ReactNode;
     /** Under the value while the row is idle. */
     note?: ReactNode;
-    /** The field needs the reader: the row lifts and this button sits at its end. */
+    /**
+     * The field needs the reader: the row lifts on the selected glass and this button sits at its
+     * end. With `emphasis="highlighted"` the row keeps the yellow band, as the kit's Highlighted field
+     * does with its action.
+     */
     action?: {
         label: ReactNode;
         onClick: () => void;
         disabled?: boolean;
     };
+    /** `bottom` by default; `none` for the last row of a list whose container draws its own edge. */
+    divider?: "bottom" | "none";
+    /**
+     * `selected` washes the row with the selected glass, such as the field a side panel is
+     * showing; `inset` sets it into the list between hairlines, such as a field set apart;
+     * `highlighted` is the yellow band while the agent points at the field.
+     */
+    emphasis?: "selected" | "inset" | "highlighted";
     edit?: FieldEdit;
     labels?: Partial<CiridaeLabels["editableField"]>;
 };
-export declare function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }: EditableFieldProps): import("react").JSX.Element;
+export declare function EditableField({ label, value, provenance, badge, note, action, divider, emphasis, edit, labels: ownLabels, className, ...props }: EditableFieldProps): import("react").JSX.Element;
 export type ConflictingSource = {
     id: string;
     label: ReactNode;
@@ -92,8 +104,10 @@ export type SourceConflictProps = Omit<ComponentProps<"div">, "children"> & {
     };
     /** At the effective row's end, such as a Resolve button. */
     action?: ReactNode;
+    /** `highlighted` while the agent points at the field; `neutral` by default. */
+    tone?: "highlighted" | "neutral";
     labels?: Partial<{
         effectiveValue: string;
     }>;
 };
-export declare function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }: SourceConflictProps): import("react").JSX.Element;
+export declare function SourceConflict({ sources, effective, action, tone, labels: ownLabels, className, ...props }: SourceConflictProps): import("react").JSX.Element;

package/dist/components/editable-field.js

@@ -10,6 +10,7 @@ import { useEffect, useId, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
+import { glassMenuSurface } from "./glass-menu.js";
 import { useHotkey } from "./hotkeys.js";
 import { icon, Spinner } from "./icon.js";
 import { Input } from "./input.js";
@@ -18,24 +19,48 @@ import { Tooltip } from "./overlays.js";
 import { Combobox } from "./select.js";
 /* The row stacks its label over the value in a narrow box, so each field is its own container. */
 const fieldBox = css({ containerType: "inline-size" });
+/*
+ * The kit's Detail field: 12 · 16 padding, a hairline under it. A field that needs the reader
+ * (the inline edit's Needs confirm) and an inset row wear the selected glass between the selected
+ * edge's hairlines; a selected row wears the glass alone; a highlighted row, while the agent points
+ * at it, is the flat yellow band between hairlines.
+ */
 const fieldRow = css({
     position: "relative",
     display: "grid",
     gridTemplateColumns: "150px minmax(0, 1fr) auto",
-    alignItems: "center",
+    // The label sits on the value's first line, as the kit's does; the trailing control centres.
+    alignItems: "baseline",
     gap: "layout.contentGap",
     paddingBlock: "panel.default",
     paddingInline: "panel.comfortable",
-    borderBottom: "1px solid token(colors.border.panel)",
+    borderBottom: "1px solid token(colors.border.divider)",
     fontSize: "caption",
     letterSpacing: "compact",
+    "& > :last-child": { alignSelf: "center" },
     "&[data-needs]": {
-        background: "bg.raised",
-        borderBlock: "1px solid token(colors.border.glass)",
+        background: "token(gradients.selected)",
+        borderBlock: "1px solid",
+        borderImage: "token(gradients.border.selected) 1",
+    },
+    // After the band's hairlines, so a last highlighted row keeps only its top one, as the kit's.
+    "&[data-divider=none]": { borderBottom: "0" },
+    "&[data-emphasis=selected]": { background: "token(gradients.selected)" },
+    "&[data-emphasis=inset]": {
+        background: "token(gradients.selected)",
+        borderBlock: "1px solid",
+        borderImage: "token(gradients.border.selected) 1",
+    },
+    // The kit's Highlighted detail field: the yellow band while the agent points at the field.
+    "&[data-emphasis=highlighted]": {
+        background: "bg.warningTint",
+        borderBlock: "1px solid token(colors.border.divider)",
+    },
+    "&[data-editable]": {
+        cursor: "pointer",
+        _hover: { background: "token(gradients.card)", _light: { background: "bg.rowHover" } },
     },
-    "&[data-editable]": { cursor: "pointer", _hover: { background: "bg.rowHover" } },
     "&[data-editable]:is(:hover, :focus-within) [data-affordance], &[data-editing] [data-affordance]": { opacity: "1" },
-    "&[data-editable]:hover > [data-label]": { color: "fg.secondary" },
     "@container (max-width: 520px)": {
         gridTemplateColumns: "minmax(0, 1fr) auto",
         rowGap: "layout.tightGap",
@@ -43,10 +68,10 @@ const fieldRow = css({
     },
 });
 const fieldLabel = css({
-    color: "fg.muted",
+    color: "fg.secondary",
     fontSize: "code",
     fontWeight: "medium",
-    "[data-needs] > &": { color: "fg.secondary" },
+    lineHeight: "tight",
 });
 const fieldValue = css({
     display: "flex",
@@ -101,9 +126,10 @@ const provenanceLine = css({
     gap: "layout.contentGap",
     marginTop: "control.iconGap",
     minHeight: "control.knob",
-    color: "fg.muted",
+    color: "fg.label",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "tight",
     "& > span, & > button, & > a": {
         display: "inline-flex",
         alignItems: "center",
@@ -133,31 +159,29 @@ const fieldNote = css({
     color: "fg.secondary",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "tight",
 });
-const editor = css({ width: "200px", maxWidth: "100%", fontSize: "body" });
+const editor = css({ width: "200px", maxWidth: "100%" });
 const editorValue = css({ position: "relative", display: "flex", alignItems: "center" });
 const tooltipTitle = css({ display: "block", fontWeight: "medium" });
 const tooltipDetail = css({ display: "block", fontSize: "code", opacity: "0.8" });
 const trailingActions = css({ display: "inline-flex", gap: "layout.tightGap" });
-/* The calendar opens above the date editor. */
-const calendarPicker = css({
+/* The calendar opens above the date editor, on the menus' glass sheet. */
+const calendarPicker = css(glassMenuSurface, {
     position: "absolute",
     bottom: "calc(100% + token(spacing.control.iconGap))",
     insetInlineStart: "0",
     zIndex: "popover",
     cursor: "default",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "inset",
-    background: "bg.card",
-    boxShadow: "card",
-    "& > section": { border: "0", background: "transparent" },
 });
+// Under the days, inset as the calendar is, such as the value it had before.
 const calendarFooter = css({
-    paddingInline: "panel.default",
+    paddingInline: "panel.compact",
     paddingBottom: "panel.compact",
     color: "fg.muted",
     fontSize: "code",
     fontWeight: "medium",
+    lineHeight: "body",
 });
 /** An editor opens with its text selected, so typing replaces the value. */
 function selectTyped(event) {
@@ -167,7 +191,7 @@ function selectTyped(event) {
 function localMidnight(date) {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
 }
-export function EditableField({ label, value, provenance, badge, note, action, edit, labels: ownLabels, className, ...props }) {
+export function EditableField({ label, value, provenance, badge, note, action, divider = "bottom", emphasis, edit, labels: ownLabels, className, ...props }) {
     const locale = useCiridaeLocale();
     const labels = { ...locale.labels.editableField, ...ownLabels };
     const formatDate = (timestamp) => locale.formatDate(timestamp);
@@ -307,7 +331,7 @@ export function EditableField({ label, value, provenance, badge, note, action, e
                                 cancel();
                         } }) }) }));
         }
-        return (_jsxs("span", { className: editorValue, onFocus: selectTyped, children: [_jsx(Input, { ref: inputRef, className: editor, "aria-labelledby": labelId, "aria-invalid": status.mode === "error" || undefined, value: draft, onChange: (event) => {
+        return (_jsxs("span", { className: editorValue, onFocus: selectTyped, children: [_jsx(Input, { ref: inputRef, size: "inline", className: editor, "aria-labelledby": labelId, "aria-invalid": status.mode === "error" || undefined, value: draft, onChange: (event) => {
                         setDraft(event.target.value);
                         if (status.mode === "error")
                             setStatus({ mode: "editing" });
@@ -364,18 +388,24 @@ export function EditableField({ label, value, provenance, badge, note, action, e
         }
         return _jsx("span", {});
     };
-    return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing ? "" : undefined, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
+    return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing && emphasis !== "highlighted" ? "" : undefined, "data-divider": divider, "data-emphasis": emphasis, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
 }
-/* Source conflict: each source's value under a disputed field, then the value in effect. */
+/*
+ * Source conflict: each source's value under a disputed field, then the value in effect. The
+ * kit's Contested sources: flat and square between hairlines, the yellow band while the agent
+ * points at the field, the panel's face otherwise (the grey well in light).
+ */
 const conflictBlock = css({
     display: "grid",
     gap: "layout.controlGap",
     paddingBlock: "panel.default",
     paddingInline: "panel.comfortable",
-    borderBottom: "1px solid token(colors.border.panel)",
-    background: "bg.panel",
+    borderBlock: "1px solid token(colors.border.divider)",
     letterSpacing: "compact",
+    lineHeight: "tight",
     containerType: "inline-size",
+    "&[data-tone=neutral]": { background: "bg.panel", _light: { background: "bg.field" } },
+    "&[data-tone=highlighted]": { background: "bg.warningTint" },
 });
 const conflictRow = css({
     display: "grid",
@@ -406,7 +436,7 @@ const sourceMeta = css({
 });
 const effectiveRow = css({
     paddingTop: "panel.default",
-    borderTop: "1px solid token(colors.border.panel)",
+    borderTop: "1px solid token(colors.border.divider)",
 });
 const effectiveLabel = css({ fontSize: "code", fontWeight: "medium" });
 const effectiveNote = css({
@@ -416,7 +446,7 @@ const effectiveNote = css({
     fontSize: "code",
     fontWeight: "medium",
 });
-export function SourceConflict({ sources, effective, action, labels: ownLabels, className, ...props }) {
+export function SourceConflict({ sources, effective, action, tone = "neutral", labels: ownLabels, className, ...props }) {
     const labels = { ...useCiridaeLocale().labels.editableField, ...ownLabels };
-    return (_jsxs("div", { ...props, className: cx(conflictBlock, className), "data-ciridae-ui": "", children: [sources.map((source) => (_jsxs("div", { className: conflictRow, children: [_jsxs("span", { className: sourceName, children: [source.icon, source.label] }), _jsx("span", { className: sourceValue, children: source.value }), _jsx("span", { className: sourceMeta, children: source.meta })] }, source.id))), _jsxs("div", { className: cx(conflictRow, effectiveRow), children: [_jsx("span", { className: effectiveLabel, children: labels.effectiveValue }), _jsxs("span", { children: [_jsx("span", { className: sourceValue, children: effective.value }), effective.note !== undefined && _jsx("span", { className: effectiveNote, children: effective.note })] }), action ?? _jsx("span", {})] })] }));
+    return (_jsxs("div", { ...props, className: cx(conflictBlock, className), "data-ciridae-ui": "", "data-tone": tone, children: [sources.map((source) => (_jsxs("div", { className: conflictRow, children: [_jsxs("span", { className: sourceName, children: [source.icon, source.label] }), _jsx("span", { className: sourceValue, children: source.value }), _jsx("span", { className: sourceMeta, children: source.meta })] }, source.id))), _jsxs("div", { className: cx(conflictRow, effectiveRow), children: [_jsx("span", { className: effectiveLabel, children: labels.effectiveValue }), _jsxs("span", { children: [_jsx("span", { className: sourceValue, children: effective.value }), effective.note !== undefined && _jsx("span", { className: effectiveNote, children: effective.note })] }), action ?? _jsx("span", {})] })] }));
 }

package/dist/components/email-input.js

@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css, cx } from "#primitives/css";
 import { Chip } from "./chip.js";
 import { useFieldControl } from "./field-context.js";
+// The field face `Input` wears, holding chips that wrap onto more lines as they fill it.
 const emailField = css({
     display: "flex",
     flexWrap: "wrap",
     alignItems: "center",
     gap: "layout.tightGap",
     padding: "control.compactBlock",
-    minHeight: "control.compact",
+    minHeight: "control.default",
     border: "1px solid token(colors.border.control)",
-    borderRadius: "field",
-    background: "bg.control",
+    borderRadius: "control",
+    background: "bg.formField",
     _focusWithin: { focusRing: "outer" },
-    "&[data-invalid]": { borderColor: "accent.red" },
+    "&[data-invalid]": { borderColor: "border.error" },
     "&[data-disabled]": { opacity: "disabled" },
 });
 const draftInput = css({
@@ -28,7 +29,7 @@ const draftInput = css({
     height: "control.shortcut",
     paddingInline: "control.compactInline",
     outline: "none",
-    _placeholder: { color: "fg.muted" },
+    _placeholder: { color: "fg.subtle" },
     _focusVisible: { outline: "none", boxShadow: "none" },
 });
 /** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */

package/dist/components/environment-frame.d.ts

@@ -9,5 +9,5 @@ export type EnvironmentFrameProps = ComponentProps<"div"> & {
     /** The strip's tint: `warning` for a staging build, `info` for dev. */
     tone?: SiteBannerProps["tone"];
 };
-/** A persistent environment strip and an inset AppShell viewport. */
+/** An environment strip, which the reader can dismiss for the session, and an inset AppShell viewport. */
 export declare function EnvironmentFrame({ label, tone, children, className, ...props }: EnvironmentFrameProps): import("react").JSX.Element;

package/dist/components/environment-frame.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { css, cx } from "#primitives/css";
 import { useCiridaeLocale } from "./locale.js";
 import { SiteBanner } from "./site-banner.js";
@@ -17,26 +18,56 @@ const viewport = css({
     flex: "1",
     minHeight: "0",
     overflow: "hidden",
-    background: "bg.canvas",
+    background: "token(gradients.canvas)",
     // Only under the environment strip does the app read as inset below it.
     "&[data-under-banner]": {
         borderTopRadius: "field",
         boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.18)",
     },
-    // Keep the shell and its phone layout within the space below the site banner.
+    // Keep the shell and its phone layout within the space below the site banner. On a desktop the
+    // shell's row sizes the main panel inside its block margins, so a full height would push it past
+    // them; a phone's main panel is a full window tall, so there it takes the space under the strip.
     "& > [data-ciridae-ui]": { height: "100%", background: "transparent" },
     "& > [data-ciridae-ui] > main": {
-        height: "100%",
         borderRadius: "inset",
-        _phone: { borderRadius: "0" },
+        _phone: { borderRadius: "0", height: "100%" },
     },
     "& > [data-ciridae-ui] > main > header": {
         paddingInlineStart: "page.inline",
         _phone: { paddingInlineStart: "panel.default" },
     },
 });
-/** A persistent environment strip and an inset AppShell viewport. */
+/*
+ * Dismissing the strip hides it for the rest of the browser tab's session. Where the browser blocks
+ * storage, such as a sandboxed frame or site data turned off, even reading `sessionStorage` throws;
+ * the strip then shows on each load and a dismissal lasts until the page reloads.
+ */
+const dismissedStorageKey = "ciridae-ui-environment-banner-dismissed";
+function readDismissedForSession() {
+    try {
+        return sessionStorage.getItem(dismissedStorageKey) === "1";
+    }
+    catch (error) {
+        console.warn(`Showing the environment strip: could not read ${dismissedStorageKey}`, error);
+        return false;
+    }
+}
+function rememberDismissedForSession() {
+    try {
+        sessionStorage.setItem(dismissedStorageKey, "1");
+    }
+    catch (error) {
+        console.warn(`Could not save ${dismissedStorageKey}; the strip stays hidden until the page reloads`, error);
+    }
+}
+/** An environment strip, which the reader can dismiss for the session, and an inset AppShell viewport. */
 export function EnvironmentFrame({ label, tone = "info", children, className, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs("div", { ...props, className: cx(frame, className), children: [label !== undefined && (_jsx(SiteBanner, { className: environmentBanner, tone: tone, children: typeof label === "string" ? labels.shell.environment(label) : label })), _jsx("div", { className: viewport, "data-under-banner": label !== undefined || undefined, children: children })] }));
+    const [dismissed, setDismissed] = useState(readDismissedForSession);
+    const shown = label !== undefined && !dismissed;
+    const dismiss = () => {
+        rememberDismissedForSession();
+        setDismissed(true);
+    };
+    return (_jsxs("div", { ...props, className: cx(frame, className), children: [shown && (_jsx(SiteBanner, { className: environmentBanner, tone: tone, onDismiss: dismiss, children: typeof label === "string" ? labels.shell.environment(label) : label })), _jsx("div", { className: viewport, "data-under-banner": shown || undefined, children: children })] }));
 }