@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/internal/form-submit.js

@@ -1,8 +1,37 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../components/button.js";
-import { PendingLabel } from "../components/pending-label.js";
+const TRIMMED_INPUT_TYPES = new Set(["text", "email", "url", "search", "tel"]);
+function isTextField(field) {
+    return (field instanceof HTMLTextAreaElement ||
+        (field instanceof HTMLInputElement && TRIMMED_INPUT_TYPES.has(field.type)));
+}
+function replaceValue(field, value) {
+    const prototype = field instanceof HTMLTextAreaElement
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(prototype, "value")?.set?.call(field, value);
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+ * "Trim leading and trailing whitespace before submit so ` example.com` and `example.com` resolve
+ * to one value." (https://vercel.com/geist/input) "Trim leading and trailing whitespace on submit
+ * so empty newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: a
+ * controlled field is told through its own `input` event; passwords and other types keep every
+ * character.
+ */
+function trimTextFields(form) {
+    if (!form)
+        return;
+    for (const field of form.elements) {
+        if (!isTextField(field) || field.readOnly || field.disabled)
+            continue;
+        const trimmed = field.value.trim();
+        if (trimmed !== field.value)
+            replaceValue(field, trimmed);
+    }
+}
 export function FormSubmitButton({ submit }) {
     const pending = submit.pending === true;
-    return (_jsx(Button, { "aria-busy": pending || undefined, "aria-describedby": submit.describedBy, disabled: pending || submit.disabled, type: "submit", children: _jsx(PendingLabel, { pending: pending, pendingLabel: submit.pendingLabel ?? submit.label, children: submit.label }) }));
+    return (_jsx(Button, { "aria-describedby": submit.describedBy, disabled: submit.disabled, loading: pending, loadingLabel: submit.pendingLabel ?? submit.label, onClick: (event) => trimTextFields(event.currentTarget.form), type: "submit", children: submit.label }));
 }

package/dist/internal/input-box.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type FieldSize = "sm" | "default" | "lg";
+/**
+ * The edge of every field-shaped box: a 1px ring drawn outside the box with a shadow, so the box
+ * keeps its size, and a 4px halo that is clear until focus or an error fills it. The states below
+ * only move the two colours.
+ */
+export declare const fieldRing = "[--field-edge:var(--color-border)] [--field-halo:transparent] shadow-[0_0_0_1px_var(--field-edge),0_0_0_4px_var(--field-halo)] transition-shadow";
+/** The states of a box that is itself the control: an input, a textarea, a select, a trigger. */
+export declare const fieldStates: string;
+/** A trigger whose list is open keeps the hover edge. */
+export declare const fieldOpen = "data-popup-open:not-aria-invalid:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]";
+/** A trigger that keeps the page's outline for keyboard focus, as a button does: no halo. */
+export declare const fieldTriggerStates: string;
+/** The same states for a box that holds the control, so the ring wraps its prefix and suffix. */
+export declare const fieldGroupStates: string;
+/** The same states for a box of chips, whose ring wraps the chips and the input among them. */
+export declare const fieldWithinStates: string;
+/** A disabled box steps down in fill and text, never in opacity. */
+export declare const fieldDisabled = "disabled:cursor-not-allowed disabled:bg-accent disabled:text-placeholder";
+export type InputBoxProps = Omit<React.ComponentProps<"input">, "size"> & {
+    size?: FieldSize;
+};
+/** The bare box of `Input` and `InputGroupControl`, so the group can wrap it without a cycle. */
+export declare function InputBox({ className, size, type, ...props }: InputBoxProps): React.JSX.Element;
+//# sourceMappingURL=input-box.d.ts.map

package/dist/internal/input-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-box.d.ts","sourceRoot":"","sources":["../../src/internal/input-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,SAAS,qJAC8H,CAAC;AAErJ,iGAAiG;AACjG,eAAO,MAAM,WAAW,QAIb,CAAC;AAEZ,yDAAyD;AACzD,eAAO,MAAM,SAAS,0GACmF,CAAC;AAE1G,6FAA6F;AAC7F,eAAO,MAAM,kBAAkB,QAIpB,CAAC;AAEZ,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,QAKlB,CAAC;AAEZ,+FAA+F;AAC/F,eAAO,MAAM,iBAAiB,QAKnB,CAAC;AAEZ,oEAAoE;AACpE,eAAO,MAAM,aAAa,6EACkD,CAAC;AAqB7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,iGAAiG;AACjG,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAWtF"}

package/dist/internal/input-box.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+/**
+ * The edge of every field-shaped box: a 1px ring drawn outside the box with a shadow, so the box
+ * keeps its size, and a 4px halo that is clear until focus or an error fills it. The states below
+ * only move the two colours.
+ */
+export const fieldRing = "[--field-edge:var(--color-border)] [--field-halo:transparent] shadow-[0_0_0_1px_var(--field-edge),0_0_0_4px_var(--field-halo)] transition-shadow";
+/** The states of a box that is itself the control: an input, a textarea, a select, a trigger. */
+export const fieldStates = [
+    "enabled:not-focus-visible:not-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "focus-visible:outline-none focus-visible:[--field-edge:var(--color-ring)] focus-visible:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "aria-invalid:outline-none aria-invalid:[--field-edge:var(--color-destructive)] aria-invalid:[--field-halo:var(--nc-rosso-300)] aria-invalid:enabled:not-focus-visible:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** A trigger whose list is open keeps the hover edge. */
+export const fieldOpen = "data-popup-open:not-aria-invalid:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]";
+/** A trigger that keeps the page's outline for keyboard focus, as a button does: no halo. */
+export const fieldTriggerStates = [
+    "enabled:not-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    fieldOpen,
+    "aria-invalid:outline-none aria-invalid:[--field-edge:var(--color-destructive)] aria-invalid:[--field-halo:var(--nc-rosso-300)] aria-invalid:enabled:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** The same states for a box that holds the control, so the ring wraps its prefix and suffix. */
+export const fieldGroupStates = [
+    "not-has-[[data-slot=input-group-control]:disabled]:not-has-[[data-slot=input-group-control]:focus-visible]:not-has-[[data-slot][aria-invalid=true]]:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "has-[[data-slot=input-group-control]:focus-visible]:[--field-edge:var(--color-ring)] has-[[data-slot=input-group-control]:focus-visible]:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "has-[[data-slot][aria-invalid=true]]:[--field-edge:var(--color-destructive)] has-[[data-slot][aria-invalid=true]]:[--field-halo:var(--nc-rosso-300)]",
+    "has-[[data-slot][aria-invalid=true]]:not-has-[[data-slot=input-group-control]:disabled]:not-has-[[data-slot=input-group-control]:focus-visible]:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** The same states for a box of chips, whose ring wraps the chips and the input among them. */
+export const fieldWithinStates = [
+    "not-focus-within:not-has-aria-invalid:hover:[--field-edge:color-mix(in_oklab,var(--color-ring)_70%,transparent)]",
+    "focus-within:[--field-edge:var(--color-ring)] focus-within:[--field-halo:color-mix(in_oklab,var(--color-ring)_16%,transparent)]",
+    "has-aria-invalid:[--field-edge:var(--color-destructive)] has-aria-invalid:[--field-halo:var(--nc-rosso-300)]",
+    "has-aria-invalid:not-focus-within:hover:[--field-halo:var(--nc-rosso-500)]",
+].join(" ");
+/** A disabled box steps down in fill and text, never in opacity. */
+export const fieldDisabled = "disabled:cursor-not-allowed disabled:bg-accent disabled:text-placeholder";
+const inputBoxVariants = cva([
+    "min-h-touch-target w-full min-w-0 bg-(--nc-field,var(--background)) px-control-padding-inline py-0 text-base file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-placeholder [@media(hover:hover)_and_(pointer:fine)]:min-h-0",
+    fieldRing,
+    fieldStates,
+    fieldDisabled,
+], {
+    variants: {
+        size: {
+            sm: "h-nadicode-control-height-sm rounded-sm md:text-sm",
+            default: "h-control-height rounded-sm md:text-sm",
+            lg: "h-nadicode-control-height-lg rounded-md",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
+/** The bare box of `Input` and `InputGroupControl`, so the group can wrap it without a cycle. */
+export function InputBox({ className, size = "default", type, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", "data-size": size, "data-field-frame": "", className: cn(inputBoxVariants({ size }), className), ...props }));
+}

package/dist/internal/menu-surface.d.ts

@@ -1,6 +1,13 @@
 /**
- * A dropdown and a context menu carry the same commands over the same dense rows, so both take this solid floating
- * surface; DESIGN.md ("Elevation & Depth") keeps glass for chrome over content that scrolls or moves under it.
+ * A dropdown and a context menu carry the same commands, so both take this floating glass surface (DESIGN.md
+ * "Elevation & Depth"): the content under an open menu stays in view, saturated, behind its rows.
  */
-export declare const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(14rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+export declare const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+/**
+ * Every row of a menu, whatever it holds, so the parts of one menu never differ in height. A row that can be
+ * chosen shows the pointer cursor; one that cannot turns its text muted, never dimmed, keeps the default cursor
+ * and takes no highlight from the keyboard. The highlight is the row's fill alone: no text inside the row changes
+ * colour with it.
+ */
+export declare const menuRow = "relative flex min-h-touch-target cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:gap-2 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:focus:bg-transparent [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 //# sourceMappingURL=menu-surface.d.ts.map

package/dist/internal/menu-surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,gSACuQ,CAAC"}
+{"version":3,"file":"menu-surface.d.ts","sourceRoot":"","sources":["../../src/internal/menu-surface.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,uRAC8P,CAAC;AAEvR;;;;;GAKG;AACH,eAAO,MAAM,OAAO,8iBACyhB,CAAC"}

package/dist/internal/menu-surface.js

@@ -1,5 +1,12 @@
 /**
- * A dropdown and a context menu carry the same commands over the same dense rows, so both take this solid floating
- * surface; DESIGN.md ("Elevation & Depth") keeps glass for chrome over content that scrolls or moves under it.
+ * A dropdown and a context menu carry the same commands, so both take this floating glass surface (DESIGN.md
+ * "Elevation & Depth"): the content under an open menu stays in view, saturated, behind its rows.
  */
-export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(14rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 bg-popover p-nadicode-xxs text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+export const menuSurface = "group/menu z-50 max-h-(--available-height) w-max min-w-[min(12.5rem,var(--available-width))] max-w-(--available-width) overflow-x-hidden overflow-y-auto rounded-lg border-0 nc-glass p-1.5 text-popover-foreground nc-elevation-floating outline-none data-closed:overflow-hidden";
+/**
+ * Every row of a menu, whatever it holds, so the parts of one menu never differ in height. A row that can be
+ * chosen shows the pointer cursor; one that cannot turns its text muted, never dimmed, keeps the default cursor
+ * and takes no highlight from the keyboard. The highlight is the row's fill alone: no text inside the row changes
+ * colour with it.
+ */
+export const menuRow = "relative flex min-h-touch-target cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 group-data-[density=comfortable]/menu:gap-2 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-2 text-sm outline-hidden select-none focus:bg-accent data-inset:pl-7 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:text-muted-foreground data-disabled:focus:bg-transparent [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";

package/dist/internal/notice.d.ts

@@ -0,0 +1,25 @@
+import { type LucideIcon } from "lucide-react";
+import { type PageCommand } from "../components/page-actions.js";
+export type NoticeTone = "neutral" | "info" | "warning" | "destructive";
+/** The hue of a notice's edge: a light step of its text colour, neutral for the plain tone. */
+export declare const NOTICE_EDGE: Record<NoticeTone, string>;
+/** The mark a tone draws: Info for neutral and info, the triangle for warning and destructive. */
+export declare function NoticeMark({ icon, tone }: {
+    icon?: LucideIcon | undefined;
+    tone: NoticeTone;
+}): import("react").JSX.Element;
+/**
+ * A notice's one fix, drawn as an underlined 14 px link with no padding. In a `strip` it takes the
+ * darkest step of the strip's own hue (neutral takes the foreground) and returns to the strip's
+ * text on hover; `inline` it follows the sentence in the sentence's own colour.
+ */
+export declare function NoticeLink({ className, command, ...place }: {
+    className?: string;
+    command: PageCommand;
+} & ({
+    place: "inline";
+} | {
+    place: "strip";
+    tone: NoticeTone;
+})): import("react").JSX.Element;
+//# sourceMappingURL=notice.d.ts.map

package/dist/internal/notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../src/internal/notice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAiB,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,2BAA2B,CAAC;AAGhF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;AAExE,+FAA+F;AAC/F,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKlD,CAAC;AAEF,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,+BAG7F;AAgBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;CACtB,GAAG,CAAC;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,+BAc/D"}

package/dist/internal/notice.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Info, TriangleAlert } from "lucide-react";
+import { PageCommandButton } from "../components/page-actions.js";
+import { cn } from "../lib/utils.js";
+/** The hue of a notice's edge: a light step of its text colour, neutral for the plain tone. */
+export const NOTICE_EDGE = {
+    neutral: "border-border",
+    info: "border-info-soft-foreground/25",
+    warning: "border-warning-soft-foreground/25",
+    destructive: "border-destructive-soft-foreground/25",
+};
+/** The mark a tone draws: Info for neutral and info, the triangle for warning and destructive. */
+export function NoticeMark({ icon, tone }) {
+    const Mark = icon ?? (tone === "warning" || tone === "destructive" ? TriangleAlert : Info);
+    return _jsx(Mark, { "aria-hidden": "true" });
+}
+const LINK_LOOK = "[&_[data-slot=button]]:gap-0.5 [&_[data-slot=button]]:px-0! [&_[data-slot=button]]:text-body-sm [&_[data-slot=button]]:underline [&_[data-slot=button]_svg]:size-4!";
+const STRIP_LINK = "[&_[data-slot=button]]:h-6 [&_[data-slot=button]]:hover:text-inherit";
+const STRIP_LINK_TONE = {
+    neutral: "[&_[data-slot=button]]:text-foreground",
+    info: "[&_[data-slot=button]]:text-(--nc-cobalto-1000)",
+    warning: "[&_[data-slot=button]]:text-(--nc-giallo-1000)",
+    destructive: "[&_[data-slot=button]]:text-(--nc-rosso-1000)",
+};
+const INLINE_LINK = "align-bottom [&_[data-slot=button]]:h-5 [&_[data-slot=button]]:text-current";
+/**
+ * A notice's one fix, drawn as an underlined 14 px link with no padding. In a `strip` it takes the
+ * darkest step of the strip's own hue (neutral takes the foreground) and returns to the strip's
+ * text on hover; `inline` it follows the sentence in the sentence's own colour.
+ */
+export function NoticeLink({ className, command, ...place }) {
+    return (_jsx("span", { className: cn("inline-flex", LINK_LOOK, place.place === "strip" ? [STRIP_LINK, STRIP_LINK_TONE[place.tone]] : INLINE_LINK, className), "data-notice-action": true, children: _jsx(PageCommandButton, { command: command, size: "xs", variant: "link" }) }));
+}

package/dist/internal/overlay-stem.d.ts

@@ -0,0 +1,5 @@
+export declare const overlayStem = "z-50 flex h-1.5 w-3.5 data-[side=bottom]:bottom-full data-[side=bottom]:rotate-180 data-[side=inline-end]:top-1/2! data-[side=inline-end]:left-full data-[side=inline-end]:-translate-x-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:-rotate-90 data-[side=inline-start]:top-1/2! data-[side=inline-start]:right-full data-[side=inline-start]:translate-x-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:rotate-90 data-[side=left]:top-1/2! data-[side=left]:left-full data-[side=left]:-translate-x-1 data-[side=left]:-translate-y-1/2 data-[side=left]:-rotate-90 data-[side=right]:top-1/2! data-[side=right]:right-full data-[side=right]:translate-x-1 data-[side=right]:-translate-y-1/2 data-[side=right]:rotate-90 data-[side=top]:top-full";
+export declare function OverlayStemShape({ outlined }: {
+    outlined?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=overlay-stem.d.ts.map

package/dist/internal/overlay-stem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-stem.d.ts","sourceRoot":"","sources":["../../src/internal/overlay-stem.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,qwBAC4uB,CAAC;AAOrwB,wBAAgB,gBAAgB,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAO5E"}

package/dist/internal/overlay-stem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const overlayStem = "z-50 flex h-1.5 w-3.5 data-[side=bottom]:bottom-full data-[side=bottom]:rotate-180 data-[side=inline-end]:top-1/2! data-[side=inline-end]:left-full data-[side=inline-end]:-translate-x-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:-rotate-90 data-[side=inline-start]:top-1/2! data-[side=inline-start]:right-full data-[side=inline-start]:translate-x-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:rotate-90 data-[side=left]:top-1/2! data-[side=left]:left-full data-[side=left]:-translate-x-1 data-[side=left]:-translate-y-1/2 data-[side=left]:-rotate-90 data-[side=right]:top-1/2! data-[side=right]:right-full data-[side=right]:translate-x-1 data-[side=right]:-translate-y-1/2 data-[side=right]:rotate-90 data-[side=top]:top-full";
+const STEM_SHAPE = "M13.8284 0H0.17157C0.702003 0 1.21071 0.210714 1.58578 0.585787L5.58578 4.58579C6.36683 5.36684 7.63316 5.36683 8.41421 4.58579L12.4142 0.585786C12.7893 0.210714 13.298 0 13.8284 0Z";
+const STEM_EDGE = "M0.17157 0C0.702003 0 1.21071 0.210714 1.58578 0.585787L5.58578 4.58579C6.36683 5.36684 7.63316 5.36683 8.41421 4.58579L12.4142 0.585786C12.7893 0.210714 13.298 0 13.8284 0";
+export function OverlayStemShape({ outlined = false }) {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "overflow-visible", height: "6", viewBox: "0 0 14 6", width: "14", children: [_jsx("path", { className: "fill-popover", d: STEM_SHAPE }), outlined ? _jsx("path", { className: "stroke-border", d: STEM_EDGE, fill: "none" }) : null] }));
+}

package/dist/internal/phone-sheet.d.ts

@@ -0,0 +1,4 @@
+export type PhoneLayout = "sheet" | "centred";
+/** A centred modal popup docked to the bottom edge, full width, under 640 px. */
+export declare const phoneSheetLayout = "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none";
+//# sourceMappingURL=phone-sheet.d.ts.map

package/dist/internal/phone-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-sheet.d.ts","sourceRoot":"","sources":["../../src/internal/phone-sheet.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9C,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,oIACsG,CAAC"}

package/dist/internal/phone-sheet.js

@@ -0,0 +1,2 @@
+/** A centred modal popup docked to the bottom edge, full width, under 640 px. */
+export const phoneSheetLayout = "max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:max-w-none max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none";

package/dist/internal/present-content.d.ts

@@ -0,0 +1,3 @@
+/** Content that exists: not `null`, `undefined` or a boolean, so a required slot cannot be filled with nothing. */
+export type PresentContent = Exclude<React.ReactNode, boolean | null | undefined>;
+//# sourceMappingURL=present-content.d.ts.map

package/dist/internal/present-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"present-content.d.ts","sourceRoot":"","sources":["../../src/internal/present-content.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC"}

package/dist/internal/present-content.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/record-menu-items.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { MenuCommand, RecordMenu } from "../components/action-menu.js";
-import type { PageCommandAction } from "../components/page-actions.js";
+import type { PageCommand, PageCommandAction } from "../components/page-actions.js";
 export declare function menuItemAction(action: PageCommandAction): {
     render: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     nativeButton: boolean;
@@ -10,10 +10,11 @@ export declare function menuItemAction(action: PageCommandAction): {
     render?: undefined;
     nativeButton?: undefined;
 };
-export declare function MenuCommandRow({ command, value }: {
+export declare function MenuCommandRow({ command, iconEnd, value, }: {
     command: MenuCommand;
+    iconEnd?: boolean;
     value?: ReactNode;
 }): import("react").JSX.Element;
-export declare function soleMenuButton(commands: readonly MenuCommand[]): MenuCommand | undefined;
+export declare function soleMenuButton(commands: readonly MenuCommand[]): PageCommand | undefined;
 export declare function RecordMenuItems({ record, commands }: Omit<RecordMenu, "label">): import("react").JSX.Element;
 //# sourceMappingURL=record-menu-items.d.ts.map

package/dist/internal/record-menu-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-menu-items.d.ts","sourceRoot":"","sources":["../../src/internal/record-menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;;;;;;;;EAIvD;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAqB7F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,GAAG,SAAS,CAGxF;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,+BAe9E"}
+{"version":3,"file":"record-menu-items.d.ts","sourceRoot":"","sources":["../../src/internal/record-menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQxE,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEhF,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;;;;;;;;EAMvD;AAYD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAe,EACf,KAAK,GACN,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAuBA;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,GAAG,WAAW,GAAG,SAAS,CAKxF;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,+BAe9E"}

package/dist/internal/record-menu-items.js

@@ -2,16 +2,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DropdownMenuCommand, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, } from "../components/dropdown-menu.js";
 export function menuItemAction(action) {
-    return action.render
-        ? { render: action.render, nativeButton: action.render.type === "button" }
-        : { onClick: action.onClick };
+    if (action.link)
+        return { render: action.link, nativeButton: false };
+    if (action.render) {
+        return { render: action.render, nativeButton: action.render.type === "button" };
+    }
+    return { onClick: action.onClick };
 }
-export function MenuCommandRow({ command, value }) {
-    return (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, disabled: command.disabled, icon: command.icon, detail: command.detail, reason: command.reason, variant: command.destructive ? "destructive" : "default", ...menuItemAction(command), children: value === undefined ? (command.label) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: command.label }), " ", _jsx(DropdownMenuShortcut, { children: value })] })) }));
+function commandAction(command) {
+    return command.link ? { link: command.link } : menuItemAction(command);
+}
+function commandState(command) {
+    return command.locked
+        ? { locked: true, reason: command.reason }
+        : { disabledReason: command.disabledReason };
+}
+export function MenuCommandRow({ command, iconEnd = false, value, }) {
+    return (_jsx(DropdownMenuCommand, { "aria-label": command.accessibleName, icon: command.icon, iconEnd: iconEnd, detail: command.detail, variant: command.destructive ? "destructive" : "default", ...commandState(command), loading: command.pending === true, loadingLabel: command.pendingLabel ?? command.label, ...commandAction(command), children: value === undefined ? (command.label) : (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1", children: command.label }), " ", _jsx(DropdownMenuShortcut, { children: value })] })) }));
 }
 export function soleMenuButton(commands) {
     const [only] = commands;
-    return commands.length === 1 && only && !only.destructive ? only : undefined;
+    if (commands.length !== 1 || !only || only.destructive)
+        return undefined;
+    if (only.locked === true || only.disabledReason !== undefined)
+        return undefined;
+    return only;
 }
 export function RecordMenuItems({ record, commands }) {
     const kept = commands.filter((command) => !command.destructive);

package/dist/internal/settings-save.d.ts

@@ -6,13 +6,20 @@ export type SettingsSaveFailure = {
     field?: string;
 };
 export type SettingsSave = {
-    /** Saves the section's fields; resolves to null once saved. */
+    /**
+     * Saves the section's fields; resolves to null once saved. A state change after its await goes in
+     * `startTransition`, or React renders it while Save still says Saving; what the page shows once saved goes in
+     * `saved`.
+     */
     action: (formData: FormData) => Promise<SettingsSaveFailure | null>;
     /** "Save" */
     label: string;
     /** "Saving" */
     pendingLabel: string;
-    /** Called once a save resolves null: the product announces it through its own toast. */
+    /**
+     * Called once a save resolves null, in the transition that ends the save: the product announces it through its
+     * own toast, and a state change made here renders with Save ready again.
+     */
     saved: () => void;
     /** What is specific to this card, on the footer's left: a limit, what a value is for, a plan it needs, a link. Absent: nothing. */
     hint?: ReactNode;

package/dist/internal/settings-save.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mIAAmI;IACnI,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgGF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}
+{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAMf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mIAAmI;IACnI,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4FF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAsFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}

package/dist/internal/settings-save.js

@@ -1,11 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, use, useCallback, useEffect, useRef, useState, } from "react";
+import { createContext, startTransition, use, useCallback, useEffect, useRef, useState, } from "react";
 import { useFormStatus } from "react-dom";
 import { Button } from "../components/button.js";
 import { FieldError } from "../components/field.js";
 import { MessageNotice } from "../components/message-notice.js";
-import { PendingLabel } from "../components/pending-label.js";
 import { messageSentences } from "../components/product-message.js";
 import { CardContent } from "../components/card.js";
 import { WaitingLine } from "../components/waiting-line.js";
@@ -55,7 +54,7 @@ function editableValues(form) {
 }
 function SaveFooter({ save, changed }) {
     const { pending } = useFormStatus();
-    return (_jsxs(FooterStrip, { hint: save.hint, hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { "aria-busy": save.cancel.pending || undefined, disabled: pending || save.cancel.pending, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: _jsx(PendingLabel, { pending: save.cancel.pending ?? false, pendingLabel: save.cancel.pendingLabel ?? save.cancel.label, children: save.cancel.label }) })) : null, _jsx(FormSubmitButton, { submit: {
+    return (_jsxs(FooterStrip, { hint: save.hint, hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { disabled: pending, loading: save.cancel.pending ?? false, loadingLabel: save.cancel.pendingLabel ?? save.cancel.label, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: save.cancel.label })) : null, _jsx(FormSubmitButton, { submit: {
                     label: save.label,
                     pendingLabel: save.pendingLabel,
                     pending,
@@ -100,9 +99,13 @@ export function SettingsSaveForm({ save, titleId, children, }) {
     return (_jsx(SettingsSaveContext, { value: { failure, claim }, children: _jsxs("form", { ref: form, "aria-labelledby": titleId, className: "contents", "data-slot": "settings-section-form", action: async (formData) => {
                 const result = await save.action(formData);
                 keepValuesOnReset.current = result !== null;
-                setFailure(result);
-                if (result === null)
-                    save.saved();
+                // React leaves an update after an await out of the action, so it would render while Save still says
+                // Saving; inside a transition it renders with the end of the save.
+                startTransition(() => {
+                    setFailure(result);
+                    if (result === null)
+                        save.saved();
+                });
             }, onChange: (event) => {
                 const edited = event.target;
                 if (edited instanceof Element &&

package/dist/internal/table-compact-line.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type TableCompactLayout } from "../components/table-layouts.js";
+export type TableDetailFact = {
+    id: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** The value is prose a reader needs whole, such as why a check failed: the line wraps instead of ending in an ellipsis. */
+    wraps?: boolean;
+};
+export declare function DetailFacts({ facts, leadingSeparator, }: {
+    facts: readonly TableDetailFact[];
+    leadingSeparator?: boolean;
+}): React.JSX.Element[];
+type TableCompactLineValue = {
+    layout: TableCompactLayout;
+    facts: readonly TableDetailFact[];
+};
+/**
+ * The facts an entity row moves onto the line under its name on a card narrower than its
+ * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
+ * draws them after its own line.
+ */
+export declare function TableCompactLine({ children, ...value }: TableCompactLineValue & {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
+export declare function TableCompactFacts(): React.JSX.Element | null;
+/**
+ * Whether the entity rows around it are laid out compact now, read from the layout the browser
+ * drew: a row's cells move what does not fit beside the name under it instead.
+ */
+export declare function TableLaidOutCompact({ compact, children, }: {
+    compact: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useTableLaidOutCompact(): boolean;
+export {};
+//# sourceMappingURL=table-compact-line.d.ts.map

package/dist/internal/table-compact-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-compact-line.d.ts","sourceRoot":"","sources":["../../src/internal/table-compact-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAG1F,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,gBAAwB,GACzB,EAAE;IACD,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,uBAQA;AAED,KAAK,qBAAqB,GAAG;IAAE,MAAM,EAAE,kBAAkB,CAAC;IAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,CAAC;AAI/F;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAEvD;AAED,4IAA4I;AAC5I,wBAAgB,iBAAiB,6BAehC;AAID;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAED,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD"}

package/dist/internal/table-compact-line.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { tableCompactLayouts } from "../components/table-layouts.js";
+import { cn } from "../lib/utils.js";
+export function DetailFacts({ facts, leadingSeparator = false, }) {
+    return facts.map((fact, index) => (_jsxs("span", { children: [index > 0 || leadingSeparator ? _jsx("span", { "aria-hidden": "true", children: " \u00B7 " }) : null, _jsxs("span", { className: "sr-only", children: [fact.label, ": "] }), fact.value] }, fact.id)));
+}
+const TableCompactLineContext = React.createContext(null);
+/**
+ * The facts an entity row moves onto the line under its name on a card narrower than its
+ * columns, so the record stays one 72 px row: the name over one muted line. `RecordIdentity`
+ * draws them after its own line.
+ */
+export function TableCompactLine({ children, ...value }) {
+    return _jsx(TableCompactLineContext, { value: value, children: children });
+}
+/** The compact facts of the row this stands in, after a middle dot; nothing outside such a row or on a card wide enough for the columns. */
+export function TableCompactFacts() {
+    const line = React.useContext(TableCompactLineContext);
+    if (!line || line.facts.length === 0)
+        return null;
+    return (_jsx("span", { className: cn("[&_[data-slot=tag]]:contents [&>span>:is(div,p,.block,.grid,.flex)]:inline", tableCompactLayouts[line.layout].details), "data-slot": "table-detail-line", "data-wraps": line.facts.some((fact) => fact.wraps) || undefined, children: _jsx(DetailFacts, { facts: line.facts, leadingSeparator: true }) }));
+}
+const TableLaidOutCompactContext = React.createContext(false);
+/**
+ * Whether the entity rows around it are laid out compact now, read from the layout the browser
+ * drew: a row's cells move what does not fit beside the name under it instead.
+ */
+export function TableLaidOutCompact({ compact, children, }) {
+    return _jsx(TableLaidOutCompactContext, { value: compact, children: children });
+}
+export function useTableLaidOutCompact() {
+    return React.useContext(TableLaidOutCompactContext);
+}

package/dist/internal/title-when-cut.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+/**
+ * Names an element whole in its title while some of its text is cut by an ellipsis and no title
+ * inside it reads that text whole, such as the line under a name whose own title holds only the
+ * name, and drops the title once everything fits.
+ */
+export declare function titleWhenCut(event: React.SyntheticEvent<HTMLElement>): void;
+//# sourceMappingURL=title-when-cut.d.ts.map

package/dist/internal/title-when-cut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-when-cut.d.ts","sourceRoot":"","sources":["../../src/internal/title-when-cut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,QAiBpE"}

package/dist/internal/title-when-cut.js

@@ -0,0 +1,22 @@
+const read = (text) => (text ?? "").replace(/\s+/g, " ").trim();
+/**
+ * Names an element whole in its title while some of its text is cut by an ellipsis and no title
+ * inside it reads that text whole, such as the line under a name whose own title holds only the
+ * name, and drops the title once everything fits.
+ */
+export function titleWhenCut(event) {
+    const element = event.currentTarget;
+    const readWholeInside = (node) => {
+        const titled = node.closest("[title]");
+        return (titled !== null &&
+            titled !== element &&
+            element.contains(titled) &&
+            read(titled.title).includes(read(node.textContent)));
+    };
+    const cut = [element, ...element.querySelectorAll("*")].some((node) => node.scrollWidth > node.clientWidth && !readWholeInside(node));
+    const text = read(element.textContent);
+    if (cut && text)
+        element.title = text;
+    else
+        element.removeAttribute("title");
+}

package/dist/internal/unsaved-guard.d.ts

@@ -0,0 +1,18 @@
+import type { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+/** Input a person typed that closing the surface would lose. */
+export type UnsavedGuard = {
+    dirty: boolean;
+    /** Runs when a dismissal was held back, so the caller can ask what to do. */
+    onDismissBlocked: () => void;
+};
+/** What a surface's `onOpenChange` is told about why it closes; the Drawer's reasons are a superset of the Dialog's. */
+export type DismissDetails = Pick<DrawerPrimitive.Root.ChangeEventDetails, "reason" | "cancel">;
+/**
+ * Escape, a press outside, a swipe and the system back gesture are accidents, so with unsaved
+ * input they are held back (the close is cancelled) and reported; Close and Cancel are deliberate
+ * and always go through. Returns whether the close was held back.
+ */
+export declare function holdBackUnsavedDismissal(open: boolean, details: DismissDetails, unsaved?: UnsavedGuard): boolean;
+/** The `onOpenChange` of a form surface that reports only whether it is open. */
+export declare function guardUnsaved(onOpenChange: (open: boolean) => void, unsaved?: UnsavedGuard): (open: boolean, details: DismissDetails) => void;
+//# sourceMappingURL=unsaved-guard.d.ts.map

package/dist/internal/unsaved-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unsaved-guard.d.ts","sourceRoot":"","sources":["../../src/internal/unsaved-guard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEvE,gEAAgE;AAChE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,6EAA6E;IAC7E,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B,CAAC;AAEF,wHAAwH;AACxH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAchG;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAc,EACvB,OAAO,CAAC,EAAE,YAAY,GACrB,OAAO,CAKT;AAED,iFAAiF;AACjF,wBAAgB,YAAY,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,IAChF,MAAM,OAAO,EAAE,SAAS,cAAc,UAI/C"}

package/dist/internal/unsaved-guard.js

@@ -0,0 +1,31 @@
+const HELD_BACK_WHEN_DIRTY = {
+    "escape-key": true,
+    "outside-press": true,
+    swipe: true,
+    "close-watcher": true,
+    "trigger-press": false,
+    "close-press": false,
+    "focus-out": false,
+    "imperative-action": false,
+    none: false,
+};
+/**
+ * Escape, a press outside, a swipe and the system back gesture are accidents, so with unsaved
+ * input they are held back (the close is cancelled) and reported; Close and Cancel are deliberate
+ * and always go through. Returns whether the close was held back.
+ */
+export function holdBackUnsavedDismissal(open, details, unsaved) {
+    if (open || !unsaved?.dirty || !HELD_BACK_WHEN_DIRTY[details.reason])
+        return false;
+    details.cancel();
+    unsaved.onDismissBlocked();
+    return true;
+}
+/** The `onOpenChange` of a form surface that reports only whether it is open. */
+export function guardUnsaved(onOpenChange, unsaved) {
+    return (open, details) => {
+        if (holdBackUnsavedDismissal(open, details, unsaved))
+            return;
+        onOpenChange(open);
+    };
+}