pixelize-design-library 2.4.2-beta.60 → 2.4.2-beta.62

package/dist/Components/Header/HeaderActions.js

@@ -23,10 +23,10 @@ const HeaderActions = ({ select, edit, create, surface, }) => {
         elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

package/dist/Components/Header/components/mobileMenu.js

@@ -25,7 +25,7 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, sur
                                     ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
                                     : color, bg: item.children.some((subItem) => isActive(subItem.href))
                                     ? activeBg
-                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 700, children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                         var _a;
                                         return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => {
                                                 var _a;

package/dist/Components/IconButton/IconButton.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentWithAs } from "@chakra-ui/react";
+import type { IconButtonProps } from "./IconButtonProps";
+export declare const UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+declare const _default: ComponentWithAs<"button", IconButtonProps>;
+export default _default;

package/dist/Components/IconButton/IconButton.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNNAMED_ICON_BUTTON_WARNING = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+// NOTE: Chakra omits a missing aria-label at runtime; only its type insists on one.
+const UnlabelledChakraIconButton = react_2.IconButton;
+exports.UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(exports.UNNAMED_ICON_BUTTON_WARNING);
+    }, [isUnnamed]);
+};
+const IconButton = (0, react_1.forwardRef)(function IconButton(props, ref) {
+    var _a, _b;
+    useUnnamedWarning(!((_a = props["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = props["aria-labelledby"]) === null || _b === void 0 ? void 0 : _b.trim()));
+    return (0, jsx_runtime_1.jsx)(UnlabelledChakraIconButton, { ref: ref, ...props });
+});
+exports.default = (0, react_1.memo)(IconButton);

package/dist/Components/IconButton/IconButtonProps.d.ts

@@ -0,0 +1,10 @@
+import type { IconButtonProps as ChakraIconButtonProps } from "@chakra-ui/react";
+/** Every Chakra `IconButtonProps` prop, with the same theme `Button` look; only `aria-label` is relaxed to optional. */
+export interface IconButtonProps extends Omit<ChakraIconButtonProps, "aria-label"> {
+    /** The button's accessible name. Optional in the type, but dev builds warn once per mount when it and `aria-labelledby` are both missing. */
+    "aria-label"?: string;
+    /** Swaps the icon for a spinner inside the same box, and disables the button until it clears. */
+    isLoading?: boolean;
+    /** A square on Button's own scale: xs 24 · sm 32 (default) · md 40 · lg 48 · xl 56, with no padding. */
+    size?: ChakraIconButtonProps["size"];
+}

package/dist/Components/IconButton/IconButtonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Input/PhoneNumberInput.js

@@ -33,6 +33,20 @@ const PhoneNumberInput = (0, react_1.forwardRef)(function PhoneNumberInput({ siz
     const [number, setNumber] = (0, react_1.useState)(value);
     const [selectedCountry, setSelectedCountry] = (0, react_1.useState)(country);
     const [countryCode, setCountryCode] = (0, react_1.useState)(country);
+    const countryCodeRef = (0, react_1.useRef)(countryCode);
+    countryCodeRef.current = countryCode;
+    const firstValue = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (firstValue.current) {
+            firstValue.current = false;
+            return;
+        }
+        if (value === undefined)
+            return;
+        const dial = countryCodeRef.current;
+        const digits = dial && value.startsWith(`${dial} `) ? value.slice(dial.length + 1) : value;
+        setNumber(digits);
+    }, [value]);
     (0, react_1.useEffect)(() => {
         if (country) {
             const code = getCountryTelCode(country);

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -12,6 +12,7 @@ export type PhoneNumberInputProps = {
     id?: string;
     /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px. Defaults to "sm", like TextInput, so it lines up in a form. */
     size?: string;
+    /** The number shown in the field; a later change to it updates the field. A leading dial code (the `onChange` shape) is stripped, so echoing `onChange` back is safe. */
     value?: string;
     codeValueReturn?: boolean;
     country?: string;

package/dist/Components/KanbanBoard/AccountCard.js

@@ -44,6 +44,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
@@ -58,11 +59,11 @@ const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpande
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: "none" }), _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: (0, motion_2.reducedMotionSx)(), children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: {
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "xs", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: (0, motion_2.reducedMotionSx)(), children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: {
                                             bg: colors.primary[50],
                                             color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));

package/dist/Components/KanbanBoard/AccountRow.js

@@ -7,6 +7,6 @@ const functions_1 = require("../../Utils/functions");
 /** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 const AccountRow = ({ label, value }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "xs", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "xs", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "xs", children: value }) })] }));
 };
 exports.default = AccountRow;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -45,6 +45,7 @@ const react_window_1 = require("react-window");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const usePreferences_1 = require("../../Hooks/usePreferences");
@@ -54,6 +55,7 @@ const MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
 const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const boardStore_1 = require("./boardStore");
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 const CARD_LABEL_EXCLUDE = ["id", "details"];
@@ -71,21 +73,31 @@ const MIN_LIST_HEIGHT = 120;
 const KANBAN_VIRTUALIZE_THRESHOLD = 30;
 const COLUMN_TRANSITION = `${(0, motion_1.transitionFor)(["background-color", "border-color"])}, ${(0, motion_1.transitionFor)(["width"], "base")}`;
 const SKELETON_ROWS = [3, 4, 3];
-const CardSkeleton = ({ colors, rows }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, minH: "5rem", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 2.5, children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, w: "30%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, flex: "1", maxW: i % 2 ? "40%" : "55%", borderRadius: "sm" })] }, i))) }) }));
+const CardSkeleton = ({ colors, rows }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, minH: "5rem", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 2.5, children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, w: "30%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, flex: "1", maxW: i % 2 ? "40%" : "55%", borderRadius: "sm" })] }, i))) }) }));
 // Top buffer above the first card so its border + hover lift aren't clipped by the
 // scroll/virtualized list's top edge.
 const KANBAN_LIST_TOP_PAD = 6;
+const KanbanCardBody = ({ account, index, colId, canDelete, onDelete, onOpen, expandedStore, toggleExpand, }) => {
+    const isExpanded = (0, boardStore_1.useBoardStore)(expandedStore, (expanded) => expanded[account.id]);
+    const onToggleExpand = (0, react_1.useCallback)(() => toggleExpand(account.id, colId, index), [toggleExpand, account.id, colId, index]);
+    if (account.customNode)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: account.customNode() });
+    return ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: isExpanded, onToggleExpand: onToggleExpand, isDeletable: canDelete }));
+};
+const ColumnDeleteAll = ({ colId, title, hoveredColumn, colors, onDelete }) => {
+    const isHovered = (0, boardStore_1.useBoardStore)(hoveredColumn, (hovered) => hovered === colId);
+    if (!isHovered)
+        return (0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 });
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Delete all cards in ${title}`, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: 4, borderRadius: "sm", cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => onDelete(colId), transition: (0, motion_1.transitionFor)(["color"]), sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) }));
+};
 const KanbanRow = react_1.default.memo(({ index, style, data }) => {
     const { colors: rowColors } = (0, useCustomTheme_1.useCustomTheme)();
-    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const { items, colId, canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
     const account = items[index];
     if (!account) {
         return (0, jsx_runtime_1.jsx)("div", { style: style });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
-                        var _a;
-                        return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(rowColors), children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
-                    } }, account.id) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(rowColors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, account.id) }) }) }));
 });
 const NoItemsTemplate = react_1.default.memo(({ column, noItems, colors }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], textAlign: "center", mt: 4, children: (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column" }), !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs", children: (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item" }))] }) })));
 function reorderColumnEntries(entries, startIndex, endIndex) {
@@ -135,20 +147,21 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
     const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
     const [columns, setColumns] = (0, react_1.useState)(mergedColumns);
+    const [adoptedColumns, setAdoptedColumns] = (0, react_1.useState)(mergedColumns);
     const [viewportHeight, setViewportHeight] = (0, react_1.useState)(600);
     const [measuredHeight, setMeasuredHeight] = (0, react_1.useState)(0);
-    const [hoveredColumn, setHoveredColumn] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+    const [hoveredColumn] = (0, react_1.useState)(() => (0, boardStore_1.createBoardStore)(null));
+    if (adoptedColumns !== mergedColumns) {
+        setAdoptedColumns(mergedColumns);
         setColumns(mergedColumns);
-    }, [mergedColumns]);
+    }
     // Responsive column width
     const columnWidth = (0, react_2.useBreakpointValue)({
         base: "16rem",
         md: "17.5rem",
         lg: "19rem",
     });
-    // track expanded cards
-    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [expandedStore] = (0, react_1.useState)(() => (0, boardStore_1.createBoardStore)({}));
     /** When true, column id maps to collapsed (body hidden). */
     const [collapsedColumns, setCollapsedColumns] = (0, react_1.useState)(() => ({ ...defaultCollapsedColumns }));
     const hasHydratedCollapsedFromPrefs = (0, react_1.useRef)(false);
@@ -329,14 +342,12 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
     // every render (which would re-render every virtualized row).
     const toggleExpand = (0, react_1.useCallback)((id, colId, index) => {
-        setExpanded((prev) => {
-            const newExpanded = { ...prev, [id]: !prev[id] };
-            if (listRefs.current[colId]) {
-                listRefs.current[colId].resetAfterIndex(index);
-            }
-            return newExpanded;
-        });
-    }, []);
+        const expanded = expandedStore.get();
+        expandedStore.set({ ...expanded, [id]: !expanded[id] });
+        if (listRefs.current[colId]) {
+            listRefs.current[colId].resetAfterIndex(index);
+        }
+    }, [expandedStore]);
     // drag handler
     const onDragEnd = (0, react_1.useCallback)((result) => {
         const { source, destination, type } = result;
@@ -403,15 +414,14 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     }, [columns, onColumnDelete]);
     const rowBaseProps = (0, react_1.useMemo)(() => ({
         canDrag,
-        expanded,
+        expandedStore,
         onDelete,
         onOpen,
         canDelete,
         setSize,
         toggleExpand,
-    }), [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
-    // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
-    // don't change the reference react-window hands to every row → no row re-renders.
+    }), [canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    // Stable per-column itemData, so unrelated board re-renders don't re-render every virtualized row.
     const itemDataByCol = (0, react_1.useMemo)(() => {
         const map = {};
         for (const [colId, column] of Object.entries(columns)) {
@@ -422,28 +432,25 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => {
         const shouldVirtualize = virtualization !== null && virtualization !== void 0 ? virtualization : column.items.length > KANBAN_VIRTUALIZE_THRESHOLD;
         return ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: shouldVirtualize ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
-                var _a;
                 const item = column.items[rubric.source.index];
                 return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": item ? getCardAccessibleName(item) : undefined, style: {
                         ...provided.draggableProps.style,
                         width: columnWidth,
                         paddingBottom: KANBAN_CARD_GAP,
-                    }, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: () => toggleExpand(item.id, colId, rubric.source.index), isDeletable: canDelete }, item.id)) }));
+                    }, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: item, index: rubric.source.index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) }));
             }, children: (provided, snapshot) => {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", background: snapshot.isDraggingOver
                         ? colors.primary[50]
-                        : colors.background[100], border: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                        : colors.background[100], border: `${borderWidths_1.BORDER_WIDTHS.hairline} ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
                         ? colors.primary[300]
-                        : colors.boxborder[200]}`, transition: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: (0, motion_2.reducedMotionSx)(), onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), onFocus: () => setHoveredColumn(colId), onBlur: (e) => {
+                        : colors.boxborder[200]}`, transition: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: (0, motion_2.reducedMotionSx)(), onMouseEnter: () => hoveredColumn.set(colId), onMouseLeave: () => hoveredColumn.set(null), onFocus: () => hoveredColumn.set(colId), onBlur: (e) => {
                         if (!e.currentTarget.contains(e.relatedTarget))
-                            setHoveredColumn(null);
-                    }, children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: colors.text[700], sx: {
+                            hoveredColumn.set(null);
+                    }, children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "xs", color: colors.text[700], sx: {
                                                 writingMode: "vertical-rl",
                                                 textOrientation: "mixed",
-                                            }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 5, h: 5, borderRadius: "full", border: "0.063rem solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "xs", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 2.5, borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 6, h: 6, px: 2, borderRadius: "full", backgroundColor: colors.backgroundColor.subtle, display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[500], fontWeight: 600, fontSize: "xs", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
-                                            hoveredColumn === colId &&
-                                            column.items.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Delete all cards in ${column.title}`, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: 4, borderRadius: "sm", cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: (0, motion_1.transitionFor)(["color"]), sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 }))] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                                            }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 5, h: 5, borderRadius: "full", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "xs", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 2.5, borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "sm", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 6, h: 6, px: 2, borderRadius: "full", backgroundColor: colors.backgroundColor.subtle, display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[500], fontWeight: 600, fontSize: "xs", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete && column.items.length > 0 ? ((0, jsx_runtime_1.jsx)(ColumnDeleteAll, { colId: colId, title: column.title, hoveredColumn: hoveredColumn, colors: colors, onDelete: handleColumnDelete })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 }))] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
                                 ...(0, scrollbar_1.scrollbarStyles)(colors),
                                 overflowY: "auto",
                                 overflowX: "hidden",
@@ -453,10 +460,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
                                         if (el)
                                             listRefs.current[colId] = el;
                                     }, height: Math.max(MIN_LIST_HEIGHT, containerHeight - 150), itemCount: column.items.length +
-                                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
-                                                    var _a;
-                                                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete })) }));
-                                                } }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
+                                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
             } }, colId));
     };
     if (!canView)
@@ -464,7 +468,20 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
     const hasAnyColumns = Object.keys(columns).length > 0;
     const flexScrollSx = (0, scrollbar_1.scrollbarStyles)(colors);
-    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
+    const addColumn = () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); };
+    const addColumnKeyboard = {
+        role: "button",
+        tabIndex: 0,
+        sx: (0, focusRing_styles_1.focusVisibleStyles)(colors),
+        onClick: addColumn,
+        onKeyDown: (e) => {
+            if (e.key !== "Enter" && e.key !== " ")
+                return;
+            e.preventDefault();
+            addColumn();
+        },
+    };
+    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
     const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {
         const isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
         if (enableColumnReorder) {
@@ -475,7 +492,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    const loadingSkeletonRow = Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-hidden": true, width: columnWidth, borderRadius: "xl", bg: colors.background[100], border: `0.063rem solid ${colors.boxborder[200]}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "2.5" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 3, w: "40%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 6, w: 6, ml: "auto", borderRadius: "full" })] }), (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, px: 2, pt: 1.5, pb: 3, children: SKELETON_ROWS.slice(0, 3 - (idx % 2)).map((rows, i) => ((0, jsx_runtime_1.jsx)(CardSkeleton, { colors: colors, rows: rows }, i))) })] }, idx)));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, "data-testid": "kanban-board", "aria-busy": isBoardLoading || undefined, bg: colors.backgroundColor.main, h: height !== null && height !== void 0 ? height : `${viewportHeight}px`, maxH: maxH, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading board", gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
+    const loadingSkeletonRow = Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-hidden": true, width: columnWidth, borderRadius: "xl", bg: colors.background[100], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "2.5" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 3, w: "40%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 6, w: 6, ml: "auto", borderRadius: "full" })] }), (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, px: 2, pt: 1.5, pb: 3, children: SKELETON_ROWS.slice(0, 3 - (idx % 2)).map((rows, i) => ((0, jsx_runtime_1.jsx)(CardSkeleton, { colors: colors, rows: rows }, i))) })] }, idx)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, "data-testid": "kanban-board", "aria-busy": isBoardLoading || undefined, bg: colors.backgroundColor.main, h: height !== null && height !== void 0 ? height : `${viewportHeight}px`, maxH: maxH, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading board", gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
 };
 exports.default = KanbanBoard;

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
 /** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 const MeasuredItem = ({ index, setSize, children, }) => {
     const ref = (0, react_1.useRef)(null);
@@ -26,23 +27,14 @@ const MeasuredItem = ({ index, setSize, children, }) => {
         measure();
         // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
         const raf = requestAnimationFrame(measure);
-        let ro;
-        if (typeof ResizeObserver !== "undefined" && element) {
-            ro = new ResizeObserver(() => {
-                measure();
-            });
-            ro.observe(element);
-        }
-        else {
+        const unobserve = typeof ResizeObserver !== "undefined" && element ? (0, sharedResizeObserver_1.observeResize)(element, measure) : undefined;
+        if (!unobserve)
             window.addEventListener("resize", measure);
-        }
         return () => {
             cancelAnimationFrame(raf);
-            // disconnect, not unobserve — the observer itself has to be released, or a board that
-            // remounts cards as it scrolls leaves one behind per card.
-            if (ro)
-                ro.disconnect();
-            if (!ro)
+            if (unobserve)
+                unobserve();
+            else
                 window.removeEventListener("resize", measure);
         };
     }, []);

package/dist/Components/KanbanBoard/boardStore.d.ts

@@ -0,0 +1,8 @@
+export type BoardStore<T> = {
+    get: () => T;
+    set: (next: T) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+/** Board-local state that only the components selecting a changed slice re-render for. */
+export declare const createBoardStore: <T>(initial: T) => BoardStore<T>;
+export declare const useBoardStore: <T, S>(store: BoardStore<T>, select: (value: T) => S) => S;

package/dist/Components/KanbanBoard/boardStore.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardStore = exports.createBoardStore = void 0;
+const react_1 = require("react");
+/** Board-local state that only the components selecting a changed slice re-render for. */
+const createBoardStore = (initial) => {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: () => value,
+        set: (next) => {
+            if (Object.is(next, value))
+                return;
+            value = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+exports.createBoardStore = createBoardStore;
+const useBoardStore = (store, select) => (0, react_1.useSyncExternalStore)(store.subscribe, () => select(store.get()));
+exports.useBoardStore = useBoardStore;

package/dist/Components/Kbd/Kbd.js

@@ -20,7 +20,7 @@ exports.detectApple = detectApple;
 /** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
 const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "xs-minus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
 };
 const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
     const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -27,6 +27,6 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     // Header banner uses the brand gradient so it reads correctly across all 9 brands.
     const gradient = (0, gradientInk_1.resolveGradient)(colors.gradient, colors.white, colors.black);
     const ink = gradient.ink;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { color: "inherit", borderBottomWidth: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { color: "inherit", borderBottomWidth: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: 700, children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
 };
 exports.default = LimitReachedModal;

package/dist/Components/Loading/Loading.js

@@ -25,5 +25,5 @@ function Loading({ text, isLoading, onlytext, container, variant = "frosted", al
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...(0, overlay_styles_1.overlayScrimStyles)(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: (0, motion_1.reducedMotionSx)(), children: text })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...(0, overlay_styles_1.overlayScrimStyles)(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: (0, motion_1.reducedMotionSx)(), children: text })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: text })] })) }));
 }

package/dist/Components/MediaGallery/MediaGallery.js

@@ -179,7 +179,7 @@ const MediaGallery = ({ media, layout = "auto", aspectRatio = "4/5", zoom = "lig
     const thumbRing = { gap: colors.background[50], ink: colors.header[900] };
     const thumbs = (width, height) => frames.map((frame, position) => ((0, jsx_runtime_1.jsx)(MediaThumb_1.default, { media: frame, label: labels.frame(position + 1, count, frame.alt), selected: position === current, onSelect: () => commit(position), width: width, height: height, ring: thumbRing }, frame.id)));
     const glassDots = (0, glass_1.glassStyles)(colors);
-    const focusInset = { outline: "2px solid transparent", boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}` };
+    const focusInset = { outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors) };
     const well = ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", flex: 1, minW: 0, overflow: "hidden", isolation: "isolate", borderRadius: radius, bg: colors.background[100], sx: { aspectRatio: ratio }, "data-testid": "media-gallery-well", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
                     settling.current = null;
                 }, outline: "none", _focusVisible: focusInset, sx: {

package/dist/Components/MediaGallery/MediaLightbox.js

@@ -47,6 +47,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrim_1 = require("../../Theme/tokens/builders/scrim");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const motion_1 = require("../../Theme/chakra/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const MediaFrame_1 = __importDefault(require("./MediaFrame"));
 const MediaThumb_1 = __importDefault(require("./MediaThumb"));
 const motion_2 = require("./motion");
@@ -109,7 +110,7 @@ const MediaLightbox = ({ isOpen, onClose, items, index, defaultIndex = 0, onInde
         return null;
     const alt = (_a = item.alt) !== null && _a !== void 0 ? _a : labels.image(current + 1, total);
     const bar = { bg: (0, scrim_1.overlayScrim)(colors), color: chrome.ink };
-    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: (0, scrim_1.overlayScrim)(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: { fontVariantNumeric: "tabular-nums" }, children: labels.counter(current + 1, total) }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: (0, scrim_1.overlayScrim)(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: typography_1.NUMERIC_TEXT, children: labels.counter(current + 1, total) }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
                         touchStartX.current = event.touches.length === 1 ? event.touches[0].clientX : null;
                     }, onTouchEnd: onTouchEnd, "data-testid": "media-lightbox-stage", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: { base: 0, md: 6 }, animation: (0, motion_2.fadeIn)(), sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(MediaFrame_1.default, { media: item, alt: alt, fit: "contain", autoPlay: true, surface: "transparent", playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }) }, item.id), total > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, "aria-hidden": true }), onClick: () => go(current - 1), isDisabled: current === 0, round: true, testId: "media-lightbox-prev" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", right: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 24, "aria-hidden": true }), onClick: () => go(current + 1), isDisabled: current === total - 1, round: true, testId: "media-lightbox-next" }) })] }))] }), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": labels.thumbnails, ...bar, py: 3, px: 4, justify: "center", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: stripRef, gap: 3, p: "4px", maxW: "100%", overflowX: "auto", onKeyDown: onKeyDown, "data-testid": "media-lightbox-thumbs", children: items.map((frame, position) => ((0, jsx_runtime_1.jsx)(MediaThumb_1.default, { media: frame, label: labels.frame(position + 1, total, frame.alt), selected: position === current, onSelect: () => go(position), width: 56, height: 70, ring: { gap: chrome.stage, ink: chrome.ink }, surface: chrome.raised }, frame.id))) }) }))] }) }));
 };