@estiva-app/ui 0.33.0 → 0.34.0

package/dist/index.js

@@ -248,7 +248,10 @@ function Card({
       /* @__PURE__ */ jsx5(Link, { href, variant: "plain", ref, className: classes, ...anchorProps, children })
     );
   }
-  return /* @__PURE__ */ jsx5("div", { className: classes, ...props, children });
+  return (
+    // @estiva-escape: N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
+    /* @__PURE__ */ jsx5("div", { className: classes, ...props, children })
+  );
 }
 
 // src/IconButton.tsx
@@ -281,6 +284,20 @@ function Kbd({ children, className }) {
   );
 }
 
+// src/looks.ts
+var FIELD_BOX_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg";
+var FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
+var FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled";
+var FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
+var FIELD_SIZE_CLASSES = {
+  default: "px-3 py-2 text-input-value",
+  small: "h-6 min-h-6 px-2 text-caption"
+};
+var FIELD_SHELL_CLASSES = "bg-bg-inset border border-border-default hover:border-border-strong rounded-lg transition-colors";
+var FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
+var CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums";
+var BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
+
 // src/Tooltip.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_DELAY = 300;
@@ -288,7 +305,7 @@ function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children })
   return /* @__PURE__ */ jsx7(BaseTooltip.Provider, { delay, closeDelay, timeout, children });
 }
 function Tooltip({ label, shortcut, className, ...props }) {
-  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1 shadow-lg", className), ...props, children: [
+  return /* @__PURE__ */ jsxs4("div", { role: "tooltip", className: cn(FLOATING_SURFACE_CLASSES, "min-h-[30px] max-w-80 flex items-center justify-center gap-1.5 px-2 py-1", className), ...props, children: [
     /* @__PURE__ */ jsx7("span", { className: "min-w-0 text-caption text-text-primary break-words", children: label }),
     shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
   ] });
@@ -635,7 +652,8 @@ function AttachmentCard({
                 }
               )
             ] }),
-            onRemove && /* @__PURE__ */ jsx10(
+            onRemove && // @estiva-escape: N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
+            /* @__PURE__ */ jsx10(
               BaseButton2,
               {
                 type: "button",
@@ -858,6 +876,7 @@ function Button({
         size === "default" && (hasLeadingIcon ? "pl-2 pr-3" : "px-2"),
         size === "small" && (hasLeadingIcon ? "pl-1.5 pr-2" : "px-1.5"),
         !state.disabled && (variant === "primary" || variant === "resolve") && "bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold",
+        // @estiva-escape: W2 (Katerina, 24 September: leave alone): an outlined button shares four words with Reaction's pill by coincidence
         !state.disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer",
         !state.disabled && variant === "muted" && "hover:bg-bg-hover text-text-primary cursor-pointer",
         !state.disabled && variant === "destructive" && "hover:bg-error-muted text-error-default cursor-pointer",
@@ -981,7 +1000,7 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
     // the screenshot diff caught every descender cut off. `clip` is the
     // one overflow that leaves the other axis visible. A chip with no cap
     // draws exactly as before.
-    /* @__PURE__ */ jsx16("span", { className: "min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap text-chip signal:font-mono signal:text-small signal:font-semibold signal:tracking-wide signal:tabular-nums", children: label }),
+    /* @__PURE__ */ jsx16("span", { className: cn("min-w-0 overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide", CHIP_TEXT_CLASSES), children: label }),
     trailingIcon && /* @__PURE__ */ jsx16("span", { className: "flex size-3 shrink-0 items-center justify-center", children: trailingIcon })
   ] });
 }
@@ -1051,13 +1070,19 @@ function triggerDisabled(trigger) {
 
 // src/SectionLabel.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-function SectionLabel({ children, tone = "primary", className }) {
+function SectionLabel({
+  children,
+  tone = "primary",
+  truncate = false,
+  className
+}) {
   return /* @__PURE__ */ jsx18(
     "span",
     {
       className: cn(
         "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
-        tone === "secondary" ? "text-text-secondary" : "text-text-primary",
+        tone === "secondary" ? "text-text-secondary" : tone === "muted" ? "text-text-muted" : "text-text-primary",
+        truncate && "min-w-0 truncate",
         className
       ),
       children
@@ -1073,7 +1098,8 @@ function MenuPanel({ children, className, ...props }) {
     "div",
     {
       className: cn(
-        "flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg",
+        "flex flex-col p-2",
+        FLOATING_SURFACE_CLASSES,
         /*
          * A divider in a menu runs the width of the rows it separates.
          *
@@ -1374,7 +1400,7 @@ function ChipInput({
       filter,
       itemToStringLabel: (option) => option.label,
       children: [
-        /* @__PURE__ */ jsxs14(Combobox.Chips, { ref: setBox, className: "bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring", children: [
+        /* @__PURE__ */ jsxs14(Combobox.Chips, { ref: setBox, className: cn(FIELD_SHELL_CLASSES, "focus-within:border-border-focus focus-within:hover:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring"), children: [
           value.map((option) => /* @__PURE__ */ jsxs14(Combobox.Chip, { className: cn(CHIP_BOX, chipPadding(!!chipLeading, true)), children: [
             chipLeading && /* @__PURE__ */ jsx20("span", { className: "flex shrink-0 items-center", children: chipLeading(option) }),
             /* @__PURE__ */ jsx20("span", { className: CHIP_LABEL, children: option.label }),
@@ -1388,7 +1414,7 @@ function ChipInput({
               "aria-required": aria["aria-required"],
               ...naming,
               onKeyDown: onInputKeyDown,
-              className: "flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
+              className: cn("flex-1 min-w-[120px] text-body-2 border-none", BARE_INPUT_CLASSES)
             }
           )
         ] }),
@@ -1943,28 +1969,31 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
       }
     );
   }
-  return /* @__PURE__ */ jsxs21(
-    BaseButton5,
-    {
-      type: "button",
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      className: cn(
-        "flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
-        open && "bg-bg-hover",
-        // Under a `Menu` the open state is Base UI's, not a prop: the trigger
-        // carries `data-popup-open` while its menu is up, and sets its own
-        // `aria-expanded`. Both spellings hold the fill, so this works whether
-        // the caller drives it or the menu does.
-        "data-[popup-open]:bg-bg-hover",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx28(Person, { name, picture, fallback, size: size ?? 22 }),
-        /* @__PURE__ */ jsx28(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
-      ]
-    }
+  return (
+    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
+    /* @__PURE__ */ jsxs21(
+      BaseButton5,
+      {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        className: cn(
+          "flex h-8 min-h-8 cursor-pointer items-center gap-1.5 rounded-md pl-1.5 pr-1.5 text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
+          open && "bg-bg-hover",
+          // Under a `Menu` the open state is Base UI's, not a prop: the trigger
+          // carries `data-popup-open` while its menu is up, and sets its own
+          // `aria-expanded`. Both spellings hold the fill, so this works whether
+          // the caller drives it or the menu does.
+          "data-[popup-open]:bg-bg-hover",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx28(Person, { name, picture, fallback, size: size ?? 22 }),
+          /* @__PURE__ */ jsx28(IconChevronDown, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
+        ]
+      }
+    )
   );
 }
 
@@ -2089,48 +2118,51 @@ var VIEWPORT_PAD4 = 8;
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, disabledReason, className, ...aria }) {
   const selected = options.find((o) => o.value === value);
   const held = Boolean(disabledReason);
-  const trigger = /* @__PURE__ */ jsxs23(
-    BaseSelect.Trigger,
-    {
-      "aria-label": ariaLabel,
-      "aria-required": aria["aria-required"],
-      "aria-disabled": held || void 0,
-      className: cn(
-        /*
-         * `min-w-0 max-w-full`: a trigger must never outgrow its container
-         * (Katerina, 2026-09-01 — a long label stretched the files panel's
-         * Lead row past its card). In a flex row the default min-width:auto
-         * forbids shrinking below the label's width, which is what kept
-         * `truncate` from ever engaging; in a block container max-w-full is
-         * the cap. Full-width callers are unaffected.
-         */
-        "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
-        "border-border-default text-text-primary outline-none transition-colors",
-        // The focused border survives a hover: hover alone strengthens the
-        // hairline, but hover while focused must not grey the focus colour —
-        // the stacked variant outranks plain hover by specificity.
-        !held && "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus",
-        "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
-        held && "cursor-not-allowed bg-bg-disabled text-text-disabled",
-        "focus-visible:border-border-focus aria-expanded:border-border-focus",
-        "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
-        size === "default" && "px-3 py-2 text-input-value",
-        size === "small" && "h-6 min-h-6 px-2 text-caption",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs23("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-          selected?.leading && /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-          /* @__PURE__ */ jsx31(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
-        ] }),
-        /* @__PURE__ */ jsx31(
-          BaseSelect.Icon,
-          {
-            render: /* @__PURE__ */ jsx31(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-          }
-        )
-      ]
-    }
+  const trigger = (
+    // @estiva-escape: N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
+    /* @__PURE__ */ jsxs23(
+      BaseSelect.Trigger,
+      {
+        "aria-label": ariaLabel,
+        "aria-required": aria["aria-required"],
+        "aria-disabled": held || void 0,
+        className: cn(
+          /*
+           * `min-w-0 max-w-full`: a trigger must never outgrow its container
+           * (Katerina, 2026-09-01 — a long label stretched the files panel's
+           * Lead row past its card). In a flex row the default min-width:auto
+           * forbids shrinking below the label's width, which is what kept
+           * `truncate` from ever engaging; in a block container max-w-full is
+           * the cap. Full-width callers are unaffected.
+           */
+          "flex w-full min-w-0 max-w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left",
+          "border-border-default outline-none transition-colors",
+          FIELD_TEXT_CLASSES,
+          // The focused border survives a hover: hover alone strengthens the
+          // hairline, but hover while focused must not grey the focus colour —
+          // the stacked variant outranks plain hover by specificity.
+          !held && "hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus",
+          FIELD_DISABLED_CLASSES,
+          held && "cursor-not-allowed bg-bg-disabled text-text-disabled",
+          "focus-visible:border-border-focus aria-expanded:border-border-focus",
+          "signal:transition-shadow signal:focus-visible:shadow-focus-ring",
+          FIELD_SIZE_CLASSES[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs23("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+            selected?.leading && /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+            /* @__PURE__ */ jsx31(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+          ] }),
+          /* @__PURE__ */ jsx31(
+            BaseSelect.Icon,
+            {
+              render: /* @__PURE__ */ jsx31(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+            }
+          )
+        ]
+      }
+    )
   );
   return /* @__PURE__ */ jsxs23(
     BaseSelect.Root,
@@ -2202,14 +2234,13 @@ var TextInput = forwardRef2(function TextInput2({ className, type = "text", size
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
         // Tailwind's order, so a focused field keeps the focus border under the pointer.
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg",
+        FIELD_BOX_CLASSES,
         // The small size is the small Select's trigger, class for class.
-        size === "default" && "px-3 py-2 text-input-value",
-        size === "small" && "h-6 min-h-6 px-2 text-caption",
-        "text-text-primary placeholder:text-text-muted",
+        FIELD_SIZE_CLASSES[size],
+        FIELD_TEXT_CLASSES,
         "outline-none transition-colors",
-        "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
-        "signal:transition-shadow signal:focus:shadow-focus-ring",
+        FIELD_DISABLED_CLASSES,
+        FIELD_FOCUS_RING_CLASSES,
         className
       ),
       ...props
@@ -2231,11 +2262,12 @@ var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
         // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
         // "aren't there hover states in text input and text area?"). Focus comes after hover in
         // Tailwind's order, so a focused field keeps the focus border under the pointer.
-        "bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg px-3 py-2",
-        "text-input-value text-text-primary placeholder:text-text-muted",
+        FIELD_BOX_CLASSES,
+        FIELD_SIZE_CLASSES.default,
+        FIELD_TEXT_CLASSES,
         "resize-none outline-none transition-colors",
-        "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled",
-        "signal:transition-shadow signal:focus:shadow-focus-ring",
+        FIELD_DISABLED_CLASSES,
+        FIELD_FOCUS_RING_CLASSES,
         className
       ),
       ...props
@@ -2579,26 +2611,29 @@ function Breadcrumb({ items, className }) {
 // src/NavItem.tsx
 import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs28(
-    "a",
-    {
-      href,
-      "aria-current": active ? "page" : void 0,
-      className: cn(
-        // shrink-0: the row keeps its 32px inside an overflowing flex column
-        // — without it the list compresses instead of scrolling (the missing-
-        // shrink-0 family; Katerina, 2026-09-02).
-        "flex h-8 min-w-0 shrink-0 items-center gap-2 rounded-md px-2 text-body-2 transition-colors",
-        active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx41("span", { className: "flex shrink-0 items-center", children: icon }),
-        /* @__PURE__ */ jsx41("span", { className: "flex-1 truncate", children: label }),
-        count ? /* @__PURE__ */ jsx41(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx41("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
-      ]
-    }
+  return (
+    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
+    /* @__PURE__ */ jsxs28(
+      "a",
+      {
+        href,
+        "aria-current": active ? "page" : void 0,
+        className: cn(
+          // shrink-0: the row keeps its 32px inside an overflowing flex column
+          // — without it the list compresses instead of scrolling (the missing-
+          // shrink-0 family; Katerina, 2026-09-02).
+          "flex h-8 min-w-0 shrink-0 items-center gap-2 rounded-md px-2 text-body-2 transition-colors",
+          active ? "bg-bg-active text-text-primary" : "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx41("span", { className: "flex shrink-0 items-center", children: icon }),
+          /* @__PURE__ */ jsx41("span", { className: "flex-1 truncate", children: label }),
+          count ? /* @__PURE__ */ jsx41(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx41("span", { className: "min-w-4 shrink-0 text-center font-mono text-caption tabular-nums text-text-muted", children: count }) }) : null
+        ]
+      }
+    )
   );
 }
 
@@ -2847,32 +2882,35 @@ function Property({ label, layout = "row", children, className }) {
 import { Toggle } from "@base-ui/react/toggle";
 import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function Reaction({ emoji, count, pressed = false, className, ...props }) {
-  return /* @__PURE__ */ jsxs33(
-    Toggle,
-    {
-      pressed,
-      className: cn(
-        // Chip's pill at a control's height, so a reaction and a status chip
-        // read as the same family — 24px matches Button `small`.
-        "inline-flex h-6 min-h-6 items-center justify-center gap-1.5 rounded-full px-2",
-        "border transition-colors",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        pressed ? (
-          /* In the ship theme the accent on its own wash measures 2.70:1
-             (Finding 4), and the count was the thing that vanished
-             (Katerina, 2026-09-08). The number reads in the text colour
-             there; the accent keeps the edge and the fill. Signal keeps
-             Peek's blue-on-wash, which reads. */
-          "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary"
-        ) : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
-        /* @__PURE__ */ jsx50("span", { className: "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums", children: count })
-      ]
-    }
+  return (
+    // @estiva-escape: W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
+    /* @__PURE__ */ jsxs33(
+      Toggle,
+      {
+        pressed,
+        className: cn(
+          // Chip's pill at a control's height, so a reaction and a status chip
+          // read as the same family — 24px matches Button `small`.
+          "inline-flex h-6 min-h-6 items-center justify-center gap-1.5 rounded-full px-2",
+          "border transition-colors",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          pressed ? (
+            /* In the ship theme the accent on its own wash measures 2.70:1
+               (Finding 4), and the count was the thing that vanished
+               (Katerina, 2026-09-08). The number reads in the text colour
+               there; the accent keeps the edge and the fill. Signal keeps
+               Peek's blue-on-wash, which reads. */
+            "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary"
+          ) : "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
+          /* @__PURE__ */ jsx50("span", { className: CHIP_TEXT_CLASSES, children: count })
+        ]
+      }
+    )
   );
 }
 
@@ -2885,18 +2923,18 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
     "div",
     {
       className: cn(
-        "flex gap-2 items-center px-3 py-2 rounded-lg",
-        "bg-bg-inset border border-border-default",
+        "flex gap-2 items-center px-3 py-2",
+        FIELD_SHELL_CLASSES,
         // Hover strengthens the border as it does on every other field (16 September). Here that
         // is also the focus look, which was the stronger border before hover existed.
-        "hover:border-border-strong focus-within:border-border-strong transition-colors",
+        "focus-within:border-border-strong",
         className
       ),
       children: [
         /* @__PURE__ */ jsx51(
           Input3,
           {
-            className: "flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none",
+            className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
             placeholder,
             ...props
           }