@estiva-app/ui 0.23.0 → 0.24.0

package/dist/eslint/no-restyled-part.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAGzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,6FAA6F;AAC7F,eAAO,MAAM,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAUxD,CAAA;AASD,oGAAoG;AACpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAajF;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIlD;AAOD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAgCpD,CAAA;AAOD,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAwBD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA8UD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,EAAE,KAAK,UAAQ,EAAE,IAAI,YAAkB,GAAG,MAAM,EAAE,CAqDtJ;AAOD,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,UAwEjC,CAAA"}
+{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAGzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,6FAA6F;AAC7F,eAAO,MAAM,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAUxD,CAAA;AASD,oGAAoG;AACpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAajF;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIlD;AAOD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAiCpD,CAAA;AAOD,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAwBD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA8UD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,EAAE,KAAK,UAAQ,EAAE,IAAI,YAAkB,GAAG,MAAM,EAAE,CAqDtJ;AAOD,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,UAwEjC,CAAA"}

package/dist/index.js

@@ -91,25 +91,30 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav, children }) {
   const bar = /* @__PURE__ */ jsx3(TopBar, { variant, menu, logo, search, right: identity });
   if (variant === "floating") {
-    return /* @__PURE__ */ jsxs3("div", { className: "relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
-      bar,
-      /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
-        nav,
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            className: cn(
-              "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
-              "signal:border signal:border-border-subtle signal:shadow-highlight-inset"
-            ),
-            children: [
-              banner,
-              /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
-            ]
-          }
-        )
+    return (
+      // `signal-canvas`: in the Signal theme, the preset draws the control-room dot
+      // grid behind everything in the frame (Peek's, moved here with the frame:
+      // UIG-14, Katerina, 19 September — the canvas is the theme's, not an app's).
+      /* @__PURE__ */ jsxs3("div", { className: "signal-canvas relative h-full min-h-0 overflow-hidden bg-bg-base", children: [
+        bar,
+        /* @__PURE__ */ jsxs3("div", { className: "flex h-full pb-4 pr-4 pt-[52px]", children: [
+          nav,
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-bg-surface",
+                "signal:border signal:border-border-subtle signal:shadow-highlight-inset"
+              ),
+              children: [
+                banner,
+                /* @__PURE__ */ jsx3("main", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children })
+              ]
+            }
+          )
+        ] })
       ] })
-    ] });
+    );
   }
   return (
     /* `relative overflow-hidden` is the seal the floating manner already has
@@ -283,8 +288,8 @@ 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 h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg", className), ...props, children: [
-    /* @__PURE__ */ jsx7("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }),
+  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: [
+    /* @__PURE__ */ jsx7("span", { className: "min-w-0 text-caption text-text-primary break-words", children: label }),
     shortcut && /* @__PURE__ */ jsx7(Kbd, { children: shortcut })
   ] });
 }
@@ -316,9 +321,10 @@ function TooltipSurface({ label, shortcut, placement }) {
     }
   ) });
 }
-function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, children }) {
+function WithTooltip({ label, shortcut, placement = "top", wrapperClassName, inline = false, children }) {
+  const Wrapper = inline ? "span" : "div";
   return /* @__PURE__ */ jsxs4(BaseTooltip.Root, { disableHoverablePopup: true, children: [
-    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7("div", { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
+    /* @__PURE__ */ jsx7(BaseTooltip.Trigger, { delay: OPEN_DELAY, render: /* @__PURE__ */ jsx7(Wrapper, { className: cn("inline-flex shrink-0", wrapperClassName) }), children }),
     /* @__PURE__ */ jsx7(TooltipSurface, { label, shortcut, placement })
   ] });
 }
@@ -343,48 +349,51 @@ function IconButton({
   tooltipShortcut,
   tooltipPlacement,
   type = "button",
+  href,
   ...props
 }) {
   const formBusy = useFormBusy();
-  const button = /* @__PURE__ */ jsx8(
+  const unusable = disabled || !!disabledReason || formBusy;
+  const look = (off) => cn(
+    // `shrink-0` stops a flex parent squashing the button; `self-center`
+    // stops one stretching it. Two different failures, and both have
+    // happened here: a row with no `items-*` drew this 24 wide and 228
+    // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
+    // is the size of its icon and its padding, whatever box it lands in.
+    //
+    // This is the one of the two that needs it: an IconButton states no
+    // height, so its cross size is `auto` and a stretching parent takes
+    // it. Measured in the same 260px row on 2026-09-12: 24px with this
+    // class, 226px without. `Button` states `h-8`/`h-6`, so it cannot be
+    // stretched and carries no `self-center` — see the note there.
+    "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer",
+    !off && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
+    !off && (variant === "muted" || variant === "resolve") && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+    !off && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
+    !off && variant === "current" && "hover:bg-bg-hover",
+    off && variant === "primary" && "bg-bg-disabled text-text-disabled",
+    off && (variant === "muted" || variant === "resolve") && "text-text-disabled",
+    off && variant === "outlined" && "border border-border-default text-text-disabled",
+    // Always, disabled too: the colour of where it sits, and Resolve's green.
+    variant === "current" && "text-current",
+    variant === "resolve" && "signal:hover:bg-success-muted signal:hover:text-success-default",
+    pressed && "bg-bg-active text-text-primary",
+    glow && "signal:shadow-glow-accent",
+    // `pointer-events-none` only where the button is truly out of reach:
+    // with a `disabledReason` the button IS the tooltip's trigger, and a
+    // trigger the pointer cannot land on never opens one. Base UI already
+    // swallows the click.
+    off && !disabledReason && "pointer-events-none",
+    off && "cursor-not-allowed",
+    className
+  );
+  const button = href && !unusable ? /* @__PURE__ */ jsx8("a", { href, className: look(false), ...props, children }) : /* @__PURE__ */ jsx8(
     BaseButton,
     {
       type,
-      disabled: disabled || !!disabledReason || formBusy,
+      disabled: unusable,
       focusableWhenDisabled: !!disabledReason,
-      className: (state) => cn(
-        // `shrink-0` stops a flex parent squashing the button; `self-center`
-        // stops one stretching it. Two different failures, and both have
-        // happened here: a row with no `items-*` drew this 24 wide and 228
-        // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
-        // is the size of its icon and its padding, whatever box it lands in.
-        //
-        // This is the one of the two that needs it: an IconButton states no
-        // height, so its cross size is `auto` and a stretching parent takes
-        // it. Measured in the same 260px row on 2026-09-12: 24px with this
-        // class, 226px without. `Button` states `h-8`/`h-6`, so it cannot be
-        // stretched and carries no `self-center` — see the note there.
-        "flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer",
-        !state.disabled && variant === "primary" && "bg-accent-primary hover:bg-accent-hover text-text-inverse",
-        !state.disabled && (variant === "muted" || variant === "resolve") && "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        !state.disabled && variant === "outlined" && "border border-border-default hover:bg-bg-hover text-text-secondary",
-        !state.disabled && variant === "current" && "hover:bg-bg-hover",
-        state.disabled && variant === "primary" && "bg-bg-disabled text-text-disabled",
-        state.disabled && (variant === "muted" || variant === "resolve") && "text-text-disabled",
-        state.disabled && variant === "outlined" && "border border-border-default text-text-disabled",
-        // Always, disabled too: the colour of where it sits, and Resolve's green.
-        variant === "current" && "text-current",
-        variant === "resolve" && "signal:hover:bg-success-muted signal:hover:text-success-default",
-        pressed && "bg-bg-active text-text-primary",
-        glow && "signal:shadow-glow-accent",
-        // `pointer-events-none` only where the button is truly out of reach:
-        // with a `disabledReason` the button IS the tooltip's trigger, and a
-        // trigger the pointer cannot land on never opens one. Base UI already
-        // swallows the click.
-        state.disabled && !disabledReason && "pointer-events-none",
-        state.disabled && "cursor-not-allowed",
-        className
-      ),
+      className: (state) => look(state.disabled),
       "aria-pressed": pressed,
       ...props,
       children
@@ -434,7 +443,7 @@ function TypeIcon({ name }) {
   const Icon = ICON_BY_EXTENSION[extensionOf(name)] ?? IconFile;
   return /* @__PURE__ */ jsx9(Icon, { size: 20, stroke: 1.5 });
 }
-function Truncating({ text, hint, className, wrapperClassName }) {
+function Truncating({ text, hint, className, wrapperClassName, placement }) {
   const ref = useRef(null);
   const [cut, setCut] = useState(false);
   useLayoutEffect(() => {
@@ -456,7 +465,7 @@ function Truncating({ text, hint, className, wrapperClassName }) {
   }, [text, cut]);
   const line = /* @__PURE__ */ jsx9("span", { ref, className, children: text });
   if (!hint && !cut) return line;
-  return /* @__PURE__ */ jsx9(WithTooltip, { label: hint ?? text, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
+  return /* @__PURE__ */ jsx9(WithTooltip, { label: hint ?? text, placement, wrapperClassName: cn("min-w-0 flex-col", wrapperClassName), children: line });
 }
 function AttachmentCard({
   name,
@@ -490,7 +499,7 @@ function AttachmentCard({
           children: [
             /* @__PURE__ */ jsx9("div", { className: cn(TILE_CLASSES, "overflow-hidden"), children: state === "uploading" ? /* @__PURE__ */ jsx9(IconLoader2, { size: 16, stroke: 1.5, className: "animate-spin" }) : failed ? /* @__PURE__ */ jsx9(IconAlertCircle, { size: 16, stroke: 1.5, className: "text-error-default" }) : warning ? /* @__PURE__ */ jsx9(IconAlertTriangle, { size: 16, stroke: 1.5, className: "text-warning-default" }) : image && src ? /* @__PURE__ */ jsx9("img", { src, alt: name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx9("span", { className: "text-menu font-semibold", children: typeLabelOf(name) }) }),
             /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[1px] min-w-0", children: [
-              /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES }),
+              /* @__PURE__ */ jsx9(Truncating, { text: name, className: NAME_CLASSES, placement: onRemove ? "bottom" : void 0 }),
               /* @__PURE__ */ jsx9(
                 Truncating,
                 {
@@ -505,7 +514,7 @@ function AttachmentCard({
               {
                 type: "button",
                 "aria-label": `Remove ${name}`,
-                className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 transition-opacity",
+                className: "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity",
                 onClick: (event) => {
                   event.stopPropagation();
                   onRemove();
@@ -1406,6 +1415,7 @@ function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, c
       },
       onKeyDown,
       onSubmit: (event) => {
+        if (event.target !== event.currentTarget) return;
         event.preventDefault();
         if (busyNow.current) return;
         void onSubmit();
@@ -1944,56 +1954,65 @@ import { Select as BaseSelect } from "@base-ui/react/select";
 import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var GAP4 = 4;
 var VIEWPORT_PAD4 = 8;
-function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className, ...aria }) {
+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) && !disabled;
+  const trigger = /* @__PURE__ */ jsxs22(
+    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 px-2 text-caption",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs22("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
+          selected?.leading && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: selected.leading }),
+          /* @__PURE__ */ jsx30(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
+        ] }),
+        /* @__PURE__ */ jsx30(
+          BaseSelect.Icon,
+          {
+            render: /* @__PURE__ */ jsx30(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs22(
     BaseSelect.Root,
     {
       value,
-      onValueChange: (next) => onChange(next),
+      onValueChange: (next) => {
+        if (!held) onChange(next);
+      },
+      ...held ? { open: false, onOpenChange: () => {
+      } } : {},
       disabled,
       modal: false,
       children: [
-        /* @__PURE__ */ jsxs22(
-          BaseSelect.Trigger,
-          {
-            "aria-label": ariaLabel,
-            "aria-required": aria["aria-required"],
-            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.
-              "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",
-              "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 px-2 text-caption",
-              className
-            ),
-            children: [
-              /* @__PURE__ */ jsxs22("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
-                selected?.leading && /* @__PURE__ */ jsx30("span", { className: "flex shrink-0 items-center", children: selected.leading }),
-                /* @__PURE__ */ jsx30(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
-              ] }),
-              /* @__PURE__ */ jsx30(
-                BaseSelect.Icon,
-                {
-                  render: /* @__PURE__ */ jsx30(IconChevronDown2, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
-                }
-              )
-            ]
-          }
-        ),
+        held ? /* @__PURE__ */ jsx30(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
         /* @__PURE__ */ jsx30(BaseSelect.Portal, { children: /* @__PURE__ */ jsx30(
           BaseSelect.Positioner,
           {
@@ -2521,7 +2540,7 @@ var GAP6 = 12;
 var VIEWPORT_PAD6 = 8;
 var OPEN_DELAY2 = 350;
 var CLOSE_DELAY = 200;
-function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, wrapperClassName }) {
+function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, contentClassName, wrapperClassName }) {
   return /* @__PURE__ */ jsxs28(BasePreviewCard.Root, { children: [
     /* @__PURE__ */ jsx42(
       BasePreviewCard.Trigger,
@@ -2543,9 +2562,9 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
         children: /* @__PURE__ */ jsx42(
           BasePreviewCard.Popup,
           {
-            className: cn("w-[360px] p-3 outline-none", className),
+            className: cn("w-[360px] p-0 outline-none", className),
             render: /* @__PURE__ */ jsx42(MenuPanel, {}),
-            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]", contentClassName: "flex flex-col gap-3", children: content })
+            children: /* @__PURE__ */ jsx42(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
           }
         )
       }
@@ -2697,7 +2716,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
-function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", render, className }) {
+function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = "hover", hover = "fill", render, className }) {
   const titleElement = useRender({
     render: render ?? (chevron ? /* @__PURE__ */ jsx49("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx49("span", {})),
     props: {
@@ -2726,7 +2745,7 @@ function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, tr
         // The fill says "this does something": a row with a toggle or actions
         // lights up, a fixed heading over rows does not (2026-09-09, the
         // Sidebar's fixed group).
-        (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
+        hover === "fill" && (chevron || actions && actions.length > 0) && "hover:bg-bg-hover",
         className
       ),
       children: [