@ciridae/ui 1.0.2 → 1.0.4

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

@@ -65,16 +65,23 @@ 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. */
     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.
+     */
+    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("@types/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 +99,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("@types/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 ? "" : 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.d.ts

@@ -9,4 +9,4 @@ export type EmailInputProps = Omit<InputProps, "value" | "defaultValue" | "onCha
     invalidEmails?: readonly string[];
 };
 /** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */
-export declare function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails, disabled, className, onKeyDown, onBlur, onPaste, ...props }: EmailInputProps): import("@types/react").JSX.Element;
+export declare function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails, disabled, className, onKeyDown, onBlur, onPaste, ...props }: EmailInputProps): import("react").JSX.Element;

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. */
-export declare function EnvironmentFrame({ label, tone, children, className, ...props }: EnvironmentFrameProps): import("@types/react").JSX.Element;
+/** 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 })] }));
 }

package/dist/components/expandable-text.d.ts

@@ -6,4 +6,4 @@ import { type ReactNode } from "react";
 export declare function ExpandableText({ children, className, }: {
     children: ReactNode;
     className?: string;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/feedback-screenshot.d.ts

@@ -16,4 +16,4 @@ export declare function FeedbackScreenshot({ src, pointers, onPointersChange, di
     pointers: readonly PlacedScreenshotPointer[];
     onPointersChange: (pointers: readonly PlacedScreenshotPointer[]) => void;
     disabled?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/feedback-sheet.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type FeedbackItem, type FeedbackSummary } from "../feedback/contract.js";
+import { type FeedbackTriageStatus, type OperatorFeedbackItem, type OperatorFeedbackSummary } from "../feedback/operator-contract.js";
 import { type FeedbackScreenshotPointer } from "./feedback-screenshot.js";
 import { type CiridaeLabels } from "./locale.js";
 export type FeedbackKind = "wrong" | "idea" | "question";
@@ -42,7 +43,7 @@ export type FeedbackFormProps = {
     onClose: () => void;
 };
 /** The sheet's form, body and footer, for a `Drawer` that holds more than the form. */
-export declare function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }: FeedbackFormProps): import("@types/react").JSX.Element;
+export declare function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }: FeedbackFormProps): import("react").JSX.Element;
 /** Something the caller loads for the sheet: in flight, failed with a way to try again, or here. */
 export type FeedbackLoadState<Data> = {
     status: "loading";
@@ -66,15 +67,29 @@ export type FeedbackSentProps = {
     /** Resolves once `item` is withdrawn. */
     onWithdraw: (feedbackId: string) => Promise<void>;
 };
+/** The All tab, for the people who answer feedback: everyone's items, triaged and replied to. */
+export type FeedbackOperatorProps = {
+    /** Every reporter's feedback, in any order; the tab lists the latest change first. */
+    items: FeedbackLoadState<readonly OperatorFeedbackSummary[]>;
+    /** Loads the item into `item`; the sheet shows it once the ids match. */
+    onOpenItem: (feedbackId: string) => void;
+    item?: FeedbackLoadState<OperatorFeedbackItem>;
+    /** Resolves once `item` carries the reply; rejecting keeps the reply in the composer. */
+    onReply: (feedbackId: string, body: string) => Promise<void>;
+    /** Resolves once `item` carries the status; withdrawing stays the reporter's. */
+    onStatusChange: (feedbackId: string, status: FeedbackTriageStatus) => Promise<void>;
+};
 export type FeedbackSheetProps = Omit<FeedbackFormProps, "onClose"> & {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** Controls in the sheet's header, before the close button. */
     actions?: ReactNode;
-    /** The Sent tab; without it the sheet is the form alone. */
+    /** The person's own tickets; without it or `operator` the sheet is the form alone. */
     sent?: FeedbackSentProps;
+    /** For an operator, the Tickets tab lists everyone's, with a filter for their own (`sent`). */
+    operator?: FeedbackOperatorProps;
     /** Rewords the sheet's labels over the locale's. */
     labels?: Partial<FeedbackLabels>;
 };
 /** The floating feedback sheet. Closing it drops the draft and the open item. */
-export declare function FeedbackSheet({ labels, ...props }: FeedbackSheetProps): import("@types/react").JSX.Element;
+export declare function FeedbackSheet({ labels, ...props }: FeedbackSheetProps): import("react").JSX.Element;