pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/esm/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { CircleAlert, Ruler } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import OptionChip from "../OptionChip/OptionChip.js";
+import { LOW_STOCK_THRESHOLD, findVariant, isOptionAvailable, remainingStock, } from "../Commerce/commerceVariants.js";
+import { isSoldOutEverywhere, sameSelection, selectValue } from "./variantSelection.js";
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const statusId = `${uid}-status`;
+    const cells = useRef(new Map());
+    const [inner, setInner] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = useState(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = useCallback((next) => {
+        if (sameSelection(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, findVariant(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if (isSoldOutEverywhere(variants, axisId, valueId))
+            return;
+        commit(selectValue(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = remainingStock(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if (isOptionAvailable(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: scrollbarStyles(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => isOptionAvailable(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return (_jsxs(Box, { children: [_jsxs(Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [_jsxs(Flex, { align: "baseline", gap: 2, minW: 0, children: [_jsx(Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? (_jsx(Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? (_jsxs(Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: focusVisibleStyles(colors), children: [_jsx(Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), _jsx(Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => (_jsx(OptionChip, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), _jsx(Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? (_jsxs(Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: error })] })) : null })] }));
+};
+export default VariantSelector;

package/dist/esm/Components/VariantSelector/VariantSelectorProps.js

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

package/dist/esm/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,19 @@
+import { isOptionAvailable } from "../Commerce/commerceVariants.js";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export const selectValue = (axes, variants, selection, axisId, valueId) => {
+    const next = { ...selection, [axisId]: valueId };
+    for (const axis of axes) {
+        const pick = next[axis.id];
+        if (axis.id === axisId || pick === undefined)
+            continue;
+        if (!isOptionAvailable(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export const isSoldOutEverywhere = (variants, axisId, valueId) => !isOptionAvailable(variants, {}, axisId, valueId);
+export const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};

package/dist/esm/Components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,18 @@
+import { chakra } from "@chakra-ui/react";
+// NOTE: fixed, not Chakra's absolute: an absolute 1px box can extend a scrolled page.
+export const visuallyHiddenStyle = {
+    border: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    width: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    position: "fixed",
+    top: "0",
+    left: "0",
+};
+const VisuallyHidden = chakra("span", { baseStyle: visuallyHiddenStyle });
+VisuallyHidden.displayName = "VisuallyHidden";
+export default VisuallyHidden;

package/dist/esm/Components/VisuallyHidden/VisuallyHiddenProps.js

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

package/dist/esm/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Heart } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = keyframes `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+`;
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, size = "md", variant = "soft", label, isDisabled = false, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const [inner, setInner] = useState(defaultSelected);
+    const [popKey, setPopKey] = useState(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = BUTTON_SIZES[size];
+    const hit = HIT_PX[size];
+    const icon = spec.iconSize + 2;
+    const popping = on && popKey > 0 && !reduced;
+    const toggle = () => {
+        const next = !on;
+        if (selected === undefined)
+            setInner(next);
+        if (next)
+            setPopKey((k) => k + 1);
+        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(next);
+    };
+    const saved = resolveFilledSurface(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: overlayScrim(colors), hoverBg: overlayScrim(colors), color: colors.white };
+        }
+        const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
+        return {
+            bg: variant === "soft" ? colors.background[100] : colors.transparent,
+            hoverBg: variant === "soft" ? tonalHover(colors) : tonalHover(colors, colors.background[50], colors.background[100]),
+            color: ink,
+        };
+    })();
+    return (_jsx(Box, { as: "button", type: "button", "aria-pressed": on, "aria-label": label !== null && label !== void 0 ? label : (on ? "Remove from wishlist" : "Add to wishlist"), disabled: isDisabled, onClick: toggle, "data-testid": testId, "data-selected": on || undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${hit}px`, flexShrink: 0, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, sx: {
+            outline: "none",
+            "&:focus-visible > [data-disc]": focusVisibleRing(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: _jsx(Box, { as: "span", "data-disc": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: spec.height, borderRadius: "full", bg: look.bg, color: look.color, transition: transitionFor(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...reducedMotionSx(),
+            }, children: _jsx(Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${MOTION_EASE}` : undefined, children: _jsx(Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+export default WishlistToggle;

package/dist/esm/Components/WishlistToggle/WishlistToggleProps.js

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

package/dist/esm/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import Button from "../Button/Button.js";
+import StageProgress from "../StageProgress/StageProgress.js";
+import DescriptionList from "../DescriptionList/DescriptionList.js";
+import { useWizardFlow } from "./useWizardFlow.js";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps.js";
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = useCustomTheme();
+    const headingRef = useRef(null);
+    const previousStep = useRef(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    useEffect(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [_jsx(StageProgress, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), _jsx(Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? (_jsxs(Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: labels.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: flow.errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, _jsx(Box, { children: flow.step.content }), flow.isLast && reviewed.length ? (_jsxs(Box, { "data-testid": "wizard-review", children: [_jsx(Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), _jsx(DescriptionList, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlockedReason, onCancel, }) => {
+    const { colors } = useCustomTheme();
+    const reasonId = useId();
+    const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
+    return (_jsxs(Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? (_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : (_jsx("span", {})), _jsxs(Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? (_jsx(Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, loadingText: labels.finish, "data-testid": "wizard-finish" })) : (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+};
+const WizardInlineFrame = ({ title, subtitle, testId, footer, children }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { direction: "column", gap: 4, "data-testid": testId, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), subtitle ? (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })) : null] }), children, _jsx(Box, { position: "sticky", bottom: 0, pt: 3, borderTopWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, children: footer })] }));
+};
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
+export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", chrome = "modal", labels, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    const body = (_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }));
+    const footer = (_jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }));
+    if (chrome === "inline") {
+        if (!isOpen)
+            return null;
+        return (_jsx(WizardInlineFrame, { title: title, subtitle: subtitle, testId: testId ? `${testId}-inline` : "wizard-inline", footer: footer, children: body }));
+    }
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [_jsx(ModalBody, { children: body }), _jsx(ModalFooter, { children: footer })] }));
+};
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export const Wizard = ({ steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: onCancel })] }));
+};
+export default WizardDialog;

package/dist/esm/Components/WizardDialog/WizardDialogProps.js

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

package/dist/esm/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from "react";
+import { INITIAL_WIZARD_STATE, firstInvalidStep, wizardTransition, } from "./wizardSteps.js";
+export function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = useState(INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    useEffect(() => {
+        if (resetWhen)
+            setState(INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = useCallback((action) => {
+        const base = { ...state, index, furthest };
+        const next = wizardTransition(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = useCallback(() => {
+        const invalid = firstInvalidStep(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}

package/dist/esm/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,35 @@
+export const INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export function wizardTransition(state, action, validators) {
+    var _a, _b;
+    const last = validators.length - 1;
+    switch (action.type) {
+        case "next": {
+            const errors = (_b = (_a = validators[state.index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+            if (errors.length)
+                return { ...state, errors };
+            const index = Math.min(state.index + 1, last);
+            return { index, furthest: Math.max(state.furthest, index), errors: [] };
+        }
+        case "back":
+            return { ...state, index: Math.max(state.index - 1, 0), errors: [] };
+        case "goto":
+            if (action.index < 0 || action.index > state.furthest)
+                return state;
+            return { ...state, index: action.index, errors: [] };
+        case "fail":
+            return { ...state, index: action.index, errors: action.errors };
+        case "reset":
+            return INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+export function firstInvalidStep(validators) {
+    var _a, _b;
+    for (let index = 0; index < validators.length; index += 1) {
+        const errors = (_b = (_a = validators[index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+        if (errors.length)
+            return { index, errors };
+    }
+    return null;
+}

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+const PLACEMENT_STYLE = {
+    "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
+    "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
+    "bottom-end": { top: "100%", right: 0, marginTop: "6px" },
+    "bottom-start": { top: "100%", left: 0, marginTop: "6px" },
+};
+/** Hover and focus preview card with open delay, close grace and Escape dismissal. */
+export default function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
+    const theme = useCustomTheme();
+    const cardId = useId();
+    const [open, setOpen] = useState(false);
+    const openTimer = useRef(null);
+    const closeTimer = useRef(null);
+    const openRef = useRef(false);
+    const setOpenState = useCallback((next) => {
+        if (openRef.current === next)
+            return;
+        openRef.current = next;
+        setOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const clearOpenTimer = useCallback(() => {
+        if (openTimer.current) {
+            clearTimeout(openTimer.current);
+            openTimer.current = null;
+        }
+    }, []);
+    const clearCloseTimer = useCallback(() => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    }, []);
+    const scheduleOpen = useCallback(() => {
+        if (!enabled)
+            return;
+        clearCloseTimer();
+        if (open || openTimer.current)
+            return;
+        openTimer.current = setTimeout(() => {
+            openTimer.current = null;
+            setOpenState(true);
+        }, openDelayMs);
+    }, [enabled, clearCloseTimer, open, openDelayMs, setOpenState]);
+    const scheduleClose = useCallback(() => {
+        clearOpenTimer();
+        if (closeTimer.current)
+            return;
+        closeTimer.current = setTimeout(() => {
+            closeTimer.current = null;
+            setOpenState(false);
+        }, closeDelayMs);
+    }, [clearOpenTimer, closeDelayMs, setOpenState]);
+    const closeNow = useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        setOpenState(false);
+    }, [clearOpenTimer, clearCloseTimer, setOpenState]);
+    useEffect(() => () => {
+        clearOpenTimer();
+        clearCloseTimer();
+    }, [clearOpenTimer, clearCloseTimer]);
+    return (_jsxs(Box, { position: "relative", onMouseEnter: scheduleOpen, onMouseLeave: scheduleClose, onFocus: scheduleOpen, onBlur: scheduleClose, onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                e.stopPropagation();
+                closeNow();
+            }
+        }, children: [typeof children === "function"
+                ? children({
+                    triggerProps: {
+                        "aria-expanded": open,
+                        "aria-controls": open ? cardId : undefined,
+                        "aria-describedby": open ? cardId : undefined,
+                    },
+                })
+                : children, open && (_jsx(Box, { id: cardId, position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: raisedRule(theme.colors), borderRadius: "lg", boxShadow: "xl", zIndex: zIndices.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", "data-testid": testId, children: typeof preview === "function"
+                    ? preview({ close: closeNow })
+                    : preview }))] }));
+}

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Portal, Text, useModalContext, } from "@chakra-ui/react";
+import { Fragment, useEffect } from "react";
+import { ExternalLink, Minus, X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+// NOTE: no maximize/restore toggle (removed by product decision); onMedium/onMaximize stay as deprecated no-ops.
+const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
+const WindowTitle = ({ testId, color, children }) => {
+    const { headerId, setHeaderMounted } = useModalContext();
+    useEffect(() => {
+        setHeaderMounted(true);
+        return () => setHeaderMounted(false);
+    }, [setHeaderMounted]);
+    return (_jsx(Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
+};
+/** Floating Jira-style workspace window; headless, so the parent owns its `state`. */
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
+    var _a, _b, _c;
+    // Must run before the early return: a minimized render would otherwise skip the hook
+    // and change hook order when the window reopens.
+    const theme = useCustomTheme();
+    if (state === "minimized")
+        return null;
+    const size = WINDOW_SIZE;
+    return (_jsxs(Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
+        // Don't discard unsaved work on an accidental overlay click / Esc — the
+        // parent decides via the explicit Close control.
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, children: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+                // NOTE: size="full" blocks Chakra's own closeOnOverlayClick — detect the outside click ourselves instead.
+                onMouseDown: (e) => {
+                    if (e.target === e.currentTarget)
+                        onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
+                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: raisedRule(theme.colors), bg: bandOn(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+}
+const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/** Row of minimized-window pills, portalled above modals. */
+// Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.
+export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
+    var _a, _b;
+    const theme = useCustomTheme();
+    if (!items.length)
+        return null;
+    const atEnd = placement === "bottom-end";
+    const inset = {
+        bottom: cssLength((_a = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _a !== void 0 ? _a : "1rem"),
+        [atEnd ? "right" : "left"]: cssLength((_b = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _b !== void 0 ? _b : "1rem"),
+    };
+    const ink = accentTextOnCanvas(theme.colors.primary, theme.colors.primary[100]);
+    return (_jsx(Portal, { children: _jsx(Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices.modal + 1, direction: atEnd ? "row-reverse" : "row", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+                const api = {
+                    restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                    close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+                };
+                const pill = (_jsxs(HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? (_jsx(Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, _jsxs(Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [item.title, item.subtitle ? (_jsx(Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? (_jsx(IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: _jsx(X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }));
+                if (renderItem) {
+                    return _jsx(Box, { children: renderItem(item, api, pill) }, item.id);
+                }
+                return _jsx(Fragment, { children: pill }, item.id);
+            }) }) }));
+}

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindowProps.js

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

package/dist/esm/Constants/Sidebar.js

@@ -0,0 +1,25 @@
+import { SCROLLBAR_WIDTH } from "../Theme/tokens/builders/scrollbar.js";
+export const HEADER_HEIGHT = "4.3rem";
+export const cssForScrollBar = (theme) => ({
+    "&::-webkit-scrollbar": {
+        width: SCROLLBAR_WIDTH,
+    },
+    "&::-webkit-scrollbar-track": {
+        background: theme.colors.sidebar.background[500],
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        borderRadius: "0.5rem",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: theme.colors.sidebar.mutedIcon,
+    },
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: theme.colors.sidebar.mutedLabel,
+    },
+    scrollbarWidth: "none",
+    "&:hover": {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme.colors.sidebar.mutedIcon} ${theme.colors.sidebar.background[500]}`,
+    },
+});

package/dist/esm/Hooks/exclusiveOverlay.js

@@ -0,0 +1,16 @@
+let active = null;
+export const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+export const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+/** Test-only reset — not exported from the package root. */
+export const resetExclusiveOverlay = () => {
+    active = null;
+};