@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.0

package/dist/web/primitives/narrow-pinned-footer.js

@@ -0,0 +1,153 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { MoreHorizontal } from "lucide-react";
+import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+function asFooterElement(node) {
+    return isValidElement(node) ? node : undefined;
+}
+function backAccessibleName(node) {
+    const { children, ariaLabel } = node.props;
+    return typeof children === "string" ? children : ariaLabel;
+}
+// Back collapses to an icon, so it needs a name that survives losing its children;
+// without one it stays a regular overflow action.
+function isIconizableBackNode(node) {
+    const element = asFooterElement(node);
+    return (element?.props[FOOTER_ACTION_ROLE_PROP] === "back" && backAccessibleName(element) !== undefined);
+}
+function isExplicitPrimaryNode(node) {
+    return asFooterElement(node)?.props[FOOTER_ACTION_ROLE_PROP] === "primary";
+}
+function isSubmitNode(node) {
+    return asFooterElement(node)?.props.type === "submit";
+}
+function isPrimaryNode(node) {
+    return isExplicitPrimaryNode(node) || isSubmitNode(node);
+}
+function isStickyMarkedNode(node) {
+    return asFooterElement(node)?.props[STICKY_PRIMARY_ACTION_PROP] === true;
+}
+function lastOf(items) {
+    return items[items.length - 1];
+}
+function splitNarrowFooterNodes(nodes) {
+    const back = nodes.find(isIconizableBackNode);
+    const primary = nodes.find(isExplicitPrimaryNode) ??
+        lastOf(nodes.filter(isSubmitNode)) ??
+        lastOf(nodes.filter(isStickyMarkedNode));
+    return {
+        back,
+        primary,
+        overflow: nodes.filter((node) => node !== back && node !== primary),
+    };
+}
+function BackIconButton({ node }) {
+    return cloneElement(node, {
+        size: "icon",
+        ariaLabel: backAccessibleName(node),
+        children: null,
+    });
+}
+// Stands in for the unsaved text and the overflow badge while the "…" trigger is not visible.
+function UnsavedIndicator({ status, testId, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-testid": testId, className: "absolute top-1 right-1 size-2 rounded-full bg-status-active" }), _jsx("span", { className: "sr-only", children: status })] }));
+}
+function PrimaryButton({ node, unsavedStatus, indicatorTestId, }) {
+    const indicator = unsavedStatus !== undefined ? (_jsx(UnsavedIndicator, { status: unsavedStatus, testId: indicatorTestId })) : null;
+    const element = asFooterElement(node);
+    if (element === undefined || !isPrimaryNode(node)) {
+        return (_jsxs("div", { className: "relative min-w-0 flex-1 [&>button]:w-full", children: [node, indicator] }));
+    }
+    const narrowLabel = element.props[NARROW_LABEL_PROP];
+    return cloneElement(element, {
+        className: "relative min-w-0 flex-1",
+        children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: narrowLabel ?? element.props.children }), indicator] })),
+    });
+}
+// Overflow nodes are arbitrary (slot mounts may render nothing, buttons may be disabled),
+// so "has something to offer" is read from the mounted DOM, not from the elements.
+const ENABLED_ACTION_SELECTOR = "button:not(:disabled):not([aria-disabled='true']), a[href]:not([aria-disabled='true'])";
+function useContainsEnabledAction(container) {
+    const [containsEnabledAction, setContainsEnabledAction] = useState(false);
+    useLayoutEffect(() => {
+        if (container === null)
+            return;
+        const update = () => setContainsEnabledAction(container.querySelector(ENABLED_ACTION_SELECTOR) !== null);
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(container, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["disabled", "aria-disabled", "href"],
+        });
+        return () => observer.disconnect();
+    }, [container]);
+    return containsEnabledAction;
+}
+function createOverflowHolder() {
+    const holder = document.createElement("div");
+    holder.style.display = "contents";
+    return holder;
+}
+// The overflow nodes are rendered once into a detached holder element that is moved into the
+// popover content while open and back into an always-mounted hidden host while closed. That keeps
+// dialogs owned by overflow actions mounted, without keeping the popover's DismissableLayer and
+// FocusScope (Escape handling, focus trap) alive while it is closed.
+function OverflowPopover({ nodes, holder, label, unsavedCount, testId, hasEnabledAction, }) {
+    const [open, setOpen] = useState(false);
+    const hostRef = useRef(null);
+    const isDirty = unsavedCount !== undefined && unsavedCount > 0;
+    const setHost = useCallback((element) => {
+        hostRef.current = element;
+        if (element !== null && holder !== null)
+            element.appendChild(holder);
+    }, [holder]);
+    // Radix recomposes its content ref now and then, calling this with null in between; reacting to
+    // that would move the holder out and drop the focus the popover just placed on its first action.
+    const setContent = useCallback((element) => {
+        if (element !== null && holder !== null && holder.parentElement !== element) {
+            element.appendChild(holder);
+        }
+    }, [holder]);
+    // Closes the popover once an action was picked. Native listener: the holder moves between DOM
+    // parents, and no React ancestor of its content is an interactive element to hang onClick on.
+    useEffect(() => {
+        if (holder === null)
+            return;
+        const closeOnAction = (event) => {
+            if (event.target instanceof Element && event.target.closest("button") !== null) {
+                setOpen(false);
+            }
+        };
+        holder.addEventListener("click", closeOnAction);
+        return () => holder.removeEventListener("click", closeOnAction);
+    }, [holder]);
+    const popoverShown = open && hasEnabledAction;
+    useLayoutEffect(() => {
+        if (!popoverShown && holder !== null && hostRef.current !== null) {
+            hostRef.current.appendChild(holder);
+        }
+    }, [popoverShown, holder]);
+    return (_jsxs(PopoverPrimitive.Root, { open: popoverShown, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs(UiButton, { type: "button", variant: "outline", size: "icon", className: cn("relative shrink-0 border-input hover:bg-muted", !hasEnabledAction && "hidden"), "aria-label": label, "data-testid": testId !== undefined ? `${testId}-overflow` : undefined, children: [_jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }), isDirty && (_jsx("span", { "aria-hidden": "true", "data-testid": testId !== undefined ? `${testId}-overflow-badge` : undefined, className: "absolute top-1 right-1 size-2 rounded-full bg-status-active" }))] }) }), _jsx("div", { ref: setHost, className: "hidden", children: holder !== null && createPortal(nodes, holder) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: setContent, side: "top", align: "center", sideOffset: 8, className: cn("z-50 flex w-[calc(100vw-2rem)] flex-col gap-1 rounded-md border border-border bg-card p-1 shadow-md", "[&_button]:w-full [&_button]:justify-start [&_button]:text-left") }) })] }));
+}
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, unsavedStatus, testId, keyboardInset, }) {
+    const { back, primary, overflow } = splitNarrowFooterNodes(nodes);
+    const backElement = asFooterElement(back);
+    const [holder] = useState(() => typeof document === "undefined" ? null : createOverflowHolder());
+    const hasEnabledAction = useContainsEnabledAction(holder);
+    const overflowTriggerVisible = overflow.length > 0 && hasEnabledAction;
+    const isDirty = unsavedCount !== undefined && unsavedCount > 0;
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "flex h-14 shrink-0 items-center gap-2 border-t border-border bg-card px-4", 
+        // iOS ignores interactive-widget=resizes-content, so the in-flow footer would stay behind the keyboard.
+        style: keyboardInset > 0
+            ? { transform: `translateY(-${keyboardInset}px)`, position: "relative", zIndex: 10 }
+            : undefined, children: [backElement !== undefined && _jsx(BackIconButton, { node: backElement }), overflow.length > 0 && (_jsx(OverflowPopover, { nodes: overflow, holder: holder, label: overflowLabel, unsavedCount: unsavedCount, testId: testId, hasEnabledAction: hasEnabledAction })), primary !== undefined && (_jsx(PrimaryButton, { node: primary, unsavedStatus: isDirty && !overflowTriggerVisible ? unsavedStatus : undefined, indicatorTestId: testId !== undefined ? `${testId}-primary-badge` : undefined }))] }));
+}

package/dist/web/primitives/number-input.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export type NumberInputProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly value: number | "";
+    readonly onChange: (v: number | undefined) => void;
+    readonly locale?: string;
+    readonly grouping?: boolean;
+    readonly integer?: boolean;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    readonly placeholder?: string;
+    readonly testId?: string;
+    readonly className?: string;
+    readonly ariaDescribedBy?: string;
+};
+export declare function NumberInput({ id, name, value, onChange, locale, grouping, integer, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }: NumberInputProps): ReactNode;

package/dist/web/primitives/number-input.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// NumberInput — type=text with a focus-aware locale format, so a blurred
+// value shows thousands separators ("28.000") while editing shows the raw
+// locale string ("28000"). Not type=number: browsers reject formatted
+// strings and locale decimal commas there. The parent value is updated while
+// typing (every parseable draft), so submit shortcuts that skip blur still
+// see the typed value; blur only normalizes the display. A draft that does
+// not parse clears the value, so the parent never holds a stale prefix.
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Input as UiInput } from "../ui/input.js";
+import { parseLocaleNumber, resolveSafeLocale } from "./locale-number.js";
+// 20 is the Intl maximum: the display must never round a stored value.
+const MAX_FRACTION_DIGITS = 20;
+export function NumberInput({ id, name, value, onChange, locale, grouping = true, integer = false, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }) {
+    const resolvedLocale = resolveSafeLocale(locale);
+    const [focused, setFocused] = useState(false);
+    const [draft, setDraft] = useState("");
+    const inputRef = useRef(null);
+    // Focus swaps the displayed value ("10.000" → "10000") and the browser then
+    // collapses the cursor to the end, so typing or Playwright's fill() would
+    // append instead of replace. Select-all-on-focus matches MoneyInput; a click
+    // therefore does not place the caret.
+    useLayoutEffect(() => {
+        if (focused)
+            inputRef.current?.select();
+    }, [focused]);
+    const format = (useGrouping) => value === ""
+        ? ""
+        : new Intl.NumberFormat(resolvedLocale, {
+            maximumFractionDigits: MAX_FRACTION_DIGITS,
+            useGrouping,
+        }).format(value);
+    const handleChange = (raw) => {
+        setDraft(raw);
+        if (raw.trim() === "") {
+            onChange(undefined);
+            return;
+        }
+        const parsed = parseLocaleNumber(raw, resolvedLocale);
+        // An unparseable draft clears the value instead of leaving the last
+        // parseable prefix behind ("12abc" must not keep submitting 12).
+        if (Number.isNaN(parsed) || (integer && !Number.isInteger(parsed))) {
+            onChange(undefined);
+            return;
+        }
+        onChange(parsed);
+    };
+    return (_jsx(UiInput, { ref: inputRef, type: "text", inputMode: integer ? "numeric" : "decimal", autoComplete: "off", id: id, name: name, disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-describedby": ariaDescribedBy, "data-testid": testId, value: focused ? draft : format(grouping), onFocus: () => {
+            setDraft(format(false));
+            setFocused(true);
+        }, onBlur: () => setFocused(false), onChange: (e) => handleChange(e.target.value), ...(placeholder !== undefined && { placeholder }), className: cn("text-left tabular-nums", className) }));
+}

package/dist/web/primitives/option-groups.d.ts

@@ -0,0 +1,11 @@
+export type GroupableOption = {
+    readonly group?: string;
+};
+export type OptionGroup<T extends GroupableOption> = {
+    readonly heading: string | undefined;
+    readonly options: readonly T[];
+};
+export declare function groupOptions<T extends GroupableOption>(options: readonly T[]): readonly OptionGroup<T>[];
+export declare function hasDescriptionOrGroup(options: readonly (GroupableOption & {
+    readonly description?: string;
+})[]): boolean;

package/dist/web/primitives/option-groups.js

@@ -0,0 +1,27 @@
+function isGrouped(option) {
+    return option.group !== undefined && option.group !== "";
+}
+// Ungrouped options come first (original order), then one section per `group`
+// in order of its first occurrence. An empty-string group counts as ungrouped.
+export function groupOptions(options) {
+    const ungrouped = [];
+    const byHeading = new Map();
+    for (const option of options) {
+        if (!isGrouped(option)) {
+            ungrouped.push(option);
+            continue;
+        }
+        const bucket = byHeading.get(option.group);
+        if (bucket === undefined)
+            byHeading.set(option.group, [option]);
+        else
+            bucket.push(option);
+    }
+    return [
+        ...(ungrouped.length > 0 ? [{ heading: undefined, options: ungrouped }] : []),
+        ...[...byHeading].map(([heading, grouped]) => ({ heading, options: grouped })),
+    ];
+}
+export function hasDescriptionOrGroup(options) {
+    return options.some((option) => option.description !== undefined || isGrouped(option));
+}

package/dist/web/primitives/page-header.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import type { PageHeaderProps } from "../../index.ts";
+export declare function DefaultPageHeader({ title, recordTitle, status, actions, overflowItems, hideBreadcrumb, breadcrumbScreenId, }: PageHeaderProps): ReactNode;

package/dist/web/primitives/page-header.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { usePageHeaderSlot } from "../layout/page-header-slot.js";
+export function DefaultPageHeader({ title, recordTitle, status, actions, overflowItems, hideBreadcrumb, breadcrumbScreenId, }) {
+    const slot = usePageHeaderSlot();
+    const setOverflowItems = slot?.setOverflowItems;
+    const setTitle = slot?.setTitle;
+    const setRecordTitle = slot?.setRecordTitle;
+    const setBreadcrumbHidden = slot?.setBreadcrumbHidden;
+    const setBreadcrumbScreenId = slot?.setBreadcrumbScreenId;
+    useEffect(() => {
+        if (setBreadcrumbHidden === undefined || hideBreadcrumb !== true)
+            return;
+        setBreadcrumbHidden(true);
+        return () => setBreadcrumbHidden(false);
+    }, [setBreadcrumbHidden, hideBreadcrumb]);
+    useEffect(() => {
+        if (setBreadcrumbScreenId === undefined || breadcrumbScreenId === undefined)
+            return;
+        setBreadcrumbScreenId(breadcrumbScreenId);
+        return () => setBreadcrumbScreenId(undefined);
+    }, [setBreadcrumbScreenId, breadcrumbScreenId]);
+    useEffect(() => {
+        if (setRecordTitle === undefined || recordTitle === undefined)
+            return;
+        setRecordTitle(recordTitle);
+        return () => setRecordTitle(undefined);
+    }, [setRecordTitle, recordTitle]);
+    useEffect(() => {
+        if (setTitle === undefined || title === undefined)
+            return;
+        setTitle(title);
+        return () => setTitle(undefined);
+    }, [setTitle, title]);
+    // Without a slot no caller passes overflowItems: screens only render a
+    // PageHeader below a shell that offers one.
+    useEffect(() => {
+        if (setOverflowItems === undefined || overflowItems === undefined)
+            return;
+        setOverflowItems(overflowItems);
+        return () => setOverflowItems(undefined);
+    }, [setOverflowItems, overflowItems]);
+    if (slot === null) {
+        return (_jsxs("div", { "data-kumiko-layout": "page-header-inline", className: "flex items-center gap-2 px-4 py-2", children: [status, _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] }));
+    }
+    return (_jsxs(_Fragment, { children: [status !== undefined &&
+                slot.statusElement !== null &&
+                createPortal(status, slot.statusElement), actions !== undefined &&
+                slot.actionsElement !== null &&
+                createPortal(actions, slot.actionsElement)] }));
+}

package/dist/web/primitives/promo-panel.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { PromoPanelProps } from "../../index.ts";
+export declare function PromoPanel({ title, eyebrow, children, action, testId, }: PromoPanelProps): ReactNode;

package/dist/web/primitives/promo-panel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PROMO_ACTION_CLASS = "inline-flex min-h-13 w-full items-center justify-center rounded-full bg-promo-accent px-6 text-base font-semibold text-promo-accent-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-promo-accent focus-visible:ring-offset-2 focus-visible:ring-offset-promo";
+function PromoActionControl({ action }) {
+    if ("href" in action) {
+        return (_jsx("a", { href: action.href, "data-testid": action.testId, className: PROMO_ACTION_CLASS, children: action.label }));
+    }
+    return (_jsx("button", { type: "button", onClick: action.onClick, "data-testid": action.testId, className: PROMO_ACTION_CLASS, children: action.label }));
+}
+export function PromoPanel({ title, eyebrow, children, action, testId, }) {
+    return (_jsxs("section", { "data-testid": testId, className: "flex flex-col gap-4 rounded-(--card-radius) bg-promo p-6 text-promo-foreground", children: [eyebrow !== undefined && (_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-promo-accent", children: eyebrow })), _jsx("h2", { className: "font-heading text-2xl font-bold leading-tight", children: title }), children !== undefined && (_jsx("div", { className: "flex flex-col gap-3 text-sm text-promo-foreground/85", children: children })), action !== undefined && _jsx(PromoActionControl, { action: action })] }));
+}

package/dist/web/primitives/segmented-select.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export declare function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, }: {
+    readonly id: string;
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly options: readonly {
+        readonly value: string;
+        readonly label: string;
+        readonly disabled?: boolean;
+    }[];
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    /** Accessible name: `aria-labelledby` into a Field label, or a plain `aria-label`. */
+    readonly labelProps: {
+        "aria-labelledby": string;
+    } | {
+        "aria-label": string;
+    };
+}): ReactNode;

package/dist/web/primitives/segmented-select.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../lib/cn.js";
+// WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
+// arrow keys move focus AND selection in the same step, only the checked
+// segment (or the first when none is checked) sits in the tab order.
+export function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, }) {
+    const buttonRefs = useRef([]);
+    // An unknown/legacy value checks no segment; the first one must still be tabbable.
+    const selectedIndex = options.findIndex((opt) => opt.value === value);
+    const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+    const selectAt = (index) => {
+        const target = options[index];
+        if (target === undefined)
+            return;
+        onChange(target.value);
+        buttonRefs.current[index]?.focus();
+    };
+    // Arrow keys skip disabled segments; with none enabled they stay put.
+    const nextEnabledIndex = (from, step) => {
+        for (let hop = 1; hop <= options.length; hop++) {
+            const candidate = (from + step * hop + options.length * hop) % options.length;
+            if (options[candidate]?.disabled !== true)
+                return candidate;
+        }
+        return from;
+    };
+    const handleKeyDown = (e, index) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+            e.preventDefault();
+            selectAt(nextEnabledIndex(index, 1));
+        }
+        else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            selectAt(nextEnabledIndex(index, -1));
+        }
+    };
+    return (_jsxs("div", { role: "radiogroup", ...labelProps, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `segmented-${id}`, className: cn("inline-flex min-h-9 w-fit flex-wrap overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
+                const checked = opt.value === value;
+                return (_jsx("button", { ref: (node) => {
+                        buttonRefs.current[index] = node;
+                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled === true || opt.disabled === true, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
+                    // Per-segment top/left border instead of the container's
+                    // `divide-x`: divide-x only draws verticals between siblings
+                    // in source order, which misplaces borders the moment a
+                    // segment wraps to a new row (stray left border on the first
+                    // item of row 2, no line between the rows). The -1px margin
+                    // collapses each segment's own border onto its neighbour's —
+                    // for row/column edges it overlaps the container's border
+                    // instead, clipped by the container's `overflow-hidden`.
+                    //
+                    // `grow` lets segments share leftover space on a wrapped row
+                    // so every row spans the container's full (widest-row) width —
+                    // without it, a shorter last row left its right edge borderless
+                    // and the next row's top border cut a notch into the row above.
+                    // Harmless on a single-row layout: there's no leftover space to
+                    // grow into, so `w-fit` on the container still holds.
+                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", checked
+                        ? "bg-primary/10 font-semibold text-primary"
+                        : "bg-transparent font-medium text-foreground hover:bg-accent"), children: opt.label }, opt.value));
+            })] }));
+}

package/dist/web/primitives/share-actions.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { CopyButtonProps, ShareButtonProps } from "../../index.ts";
+export declare function CopyButton({ text, label, copiedLabel, variant, className, testId, }: CopyButtonProps): ReactNode;
+export declare function ShareButton(props: ShareButtonProps): ReactNode;

package/dist/web/primitives/share-actions.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, MessageCircle, Share2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { buildWhatsAppShareUrl } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { buttonVariants, Button as UiButton } from "../ui/button.js";
+const COPIED_FEEDBACK_MS = 2000;
+function uiVariantFor(variant) {
+    return variant === "primary" ? "default" : "outline";
+}
+export function CopyButton({ text, label, copiedLabel, variant, className, testId, }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    async function copyText() {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+        }
+        catch {
+            // Clipboard denied (insecure context, permission) — the label simply
+            // doesn't flip, so the user sees the copy did not happen.
+        }
+    }
+    return (_jsxs(UiButton, { type: "button", variant: uiVariantFor(variant), onClick: copyText, "data-testid": testId, "data-copied": copied ? "true" : undefined, className: cn("min-h-11", className), children: [copied ? (_jsx(Check, { "aria-hidden": "true", className: "text-status-ok" })) : (_jsx(Copy, { "aria-hidden": "true" })), _jsx("span", { "aria-live": "polite", children: copied ? copiedLabel : label })] }));
+}
+function hasSystemShareSheet() {
+    return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+export function ShareButton(props) {
+    const { text, label, variant, className, testId } = props;
+    const classes = cn(buttonVariants({ variant: uiVariantFor(variant) }), "min-h-11", className);
+    if (props.target === "whatsapp") {
+        return (_jsxs("a", { href: buildWhatsAppShareUrl(text, props.phone), target: "_blank", rel: "noopener noreferrer", "data-testid": testId, className: classes, children: [_jsx(MessageCircle, { "aria-hidden": "true" }), label] }));
+    }
+    if (!hasSystemShareSheet())
+        return null;
+    const { title, url } = props;
+    async function openShareSheet() {
+        try {
+            await navigator.share({
+                text,
+                ...(title !== undefined && { title }),
+                ...(url !== undefined && { url }),
+            });
+        }
+        catch {
+            // AbortError when the user closes the sheet — nothing to report.
+        }
+    }
+    return (_jsxs("button", { type: "button", onClick: openShareSheet, "data-testid": testId, className: classes, children: [_jsx(Share2, { "aria-hidden": "true" }), label] }));
+}

package/dist/web/primitives/status-badge.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+import type { StatusBadgeProps } from "../../index.ts";
+export declare function DefaultStatusBadge({ value, tone, testId }: StatusBadgeProps): ReactNode;

package/dist/web/primitives/status-badge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatusBadge } from "../widgets/status-badge.js";
+export function DefaultStatusBadge({ value, tone, testId }) {
+    return (_jsx(StatusBadge, { tone: tone ?? "muted", testId: testId, children: value }));
+}

package/dist/web/primitives/sticky-action-bar.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+import type { StickyActionBarProps } from "../../index.ts";
+export declare const STICKY_FOOTER_SAFE_AREA_CLASS = "max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]";
+export declare const STICKY_FOOTER_SPACER_CLASS = "max-sm:pb-[calc(6rem_+_env(safe-area-inset-bottom))]";
+export declare function StickyActionBar({ children, back, testId }: StickyActionBarProps): ReactNode;

package/dist/web/primitives/sticky-action-bar.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+import { useKeyboardInset } from "./use-keyboard-inset.js";
+// env(safe-area-inset-bottom) is 0 unless the page's viewport meta sets
+// viewport-fit=cover; with it, the home indicator would otherwise cover the bar.
+export const STICKY_FOOTER_SAFE_AREA_CLASS = "max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]";
+// Keeps the last content row reachable above the fixed bar (one 44px button
+// row plus the bar's own padding), grown by the same safe-area inset.
+export const STICKY_FOOTER_SPACER_CLASS = "max-sm:pb-[calc(6rem_+_env(safe-area-inset-bottom))]";
+export function StickyActionBar({ children, back, testId }) {
+    const keyboardInset = useKeyboardInset();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: cn("sm:hidden", STICKY_FOOTER_SPACER_CLASS) }), _jsxs("div", { "data-testid": testId, style: keyboardInset > 0 ? { bottom: keyboardInset } : undefined, className: cn("flex items-center gap-3", "max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:border-t max-sm:border-border max-sm:bg-background max-sm:px-4 max-sm:pt-3", STICKY_FOOTER_SAFE_AREA_CLASS), children: [back !== undefined && (_jsx(UiButton, { type: "button", variant: "outline", size: "icon", "aria-label": back.label, onClick: back.onBack, "data-testid": testId !== undefined ? `${testId}-back` : undefined, className: "size-13 shrink-0 rounded-full", children: _jsx(ArrowLeft, { "aria-hidden": "true", className: "size-5" }) })), _jsx("div", { className: "flex min-w-0 flex-1 gap-2 [&>*]:min-h-13 [&>*]:flex-1", children: children })] })] }));
+}

package/dist/web/primitives/tabs.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import type { TabsProps } from "../../index.ts";
+export declare function DefaultTabs({ items, activeId, onSelect, testId }: TabsProps): ReactNode;