pixelize-design-library 2.3.16 → 2.3.19

package/.cursor/modules/inputs-date-file/MODULE.md

@@ -12,6 +12,7 @@ ThemeDatePicker (Single/Range/Time variants), FileUpload, FileUploader, Editor (
 ## Key rules
 
 - DatePicker themed for brand tokens
+- Masked-input blur must not discard a valid value. `isMaskComplete()` only recognises numeric/`a` tokens, so text month formats (e.g. `MMM d, yyyy`) never look "complete" — `handleInputBlur`/`handleInputFocus` therefore keep any value that `parseValidatedValue()` can parse to a valid date, and only `requestClose(null)` (clear) on empty/unparseable input. The Clear button and emptied-mask paths remain the explicit ways to clear. Regression: `SingleDatePicker.blur.test.tsx`.
 
 ## Migration notes
 

package/.cursor/modules/layout-navigation/MODULE.md

@@ -28,6 +28,8 @@ layout flow, so content stays full-width — not shrunk):
 - NavigationBar hamburger now shows below `lg` (was `< md`); its panel icon is
   state-aware (`PanelLeftClose` open / `PanelRightClose` closed).
 - The overlay panel has **square edges** (no border radius).
+- Overlay panel width = `OVERLAY_WIDTH` (**14.7rem** / 235px — a touch wider than the
+  inline expanded 13rem for touch), capped by `maxW: 88vw` on very small screens.
 
 Breakpoint, scrim/slide, and z-index are Chakra responsive props (no JS flash) when
 `mobileNav` is off; the breakpoint is read once via `useBreakpointValue({ base: true, lg: false })`.
@@ -50,9 +52,52 @@ a close: toggling never hides the navigation.
 - Selecting a **leaf** menu item in overlay mode auto-closes the overlay (content returns
   to full-screen); submenu **parents** only expand and do not close it.
 
+## Persisting sidebar choices — `useSidebarPrefs`
+
+Opt-in hook (`src/Hooks/useSidebarPrefs.ts`, exported from `index.ts`) that persists the
+user's **explicit** layout choices to `localStorage` so they survive reload/restart —
+without it, `mobileNav`/collapse reset to desktop default on every mount.
+
+- Persists `{ mobileNav, collapsed, mobileOpen }` so the sidebar restores to **exactly**
+  the same state on refresh / new session (mode, mini-rail, and whether the drawer is
+  open). It deliberately does **not** persist the `lg` breakpoint (viewport-driven, must
+  stay live).
+- SSR-safe (`typeof window` guards); corrupt/invalid stored values fall back to defaults
+  per field; `setItem` failures (private mode / quota) no-op without throwing.
+- API: state `{ mobileNav, collapsed, mobileOpen }`; setters `setMobileNav / setCollapsed
+  / setMobileOpen`; toggles `toggleMobileNav / toggleCollapsed / toggleMobileOpen`; plus
+  **composed handlers** `onToggleMobileNav` (flips navbar mode **and** syncs the drawer)
+  and `closeMobile`. Options: `storageKey` (default `pixelize:sidebar-prefs:v1`, versioned)
+  and `defaults`.
+- **Consumer adoption** — map the returned values straight onto `SideBar` + `NavBar`; the
+  composed handlers mean apps don't re-implement the navbar-mode/drawer behavior:
+
+  ```tsx
+  const sb = useSidebarPrefs();
+  <SideBar
+    toggle={sb.collapsed} changeToggle={sb.toggleCollapsed}
+    mobileNav={sb.mobileNav} onToggleMobileNav={sb.onToggleMobileNav}
+    mobileOpen={sb.mobileOpen} onMobileClose={sb.closeMobile}
+    /* ...menus, user, etc. */
+  />
+  <NavBar
+    sideBarToggole={sb.mobileOpen} onSideBarToggole={sb.toggleMobileOpen}
+    forceSideBarToggle={sb.mobileNav} /* ...nav props */
+  />
+  ```
+
+  Per-app override: pass `storageKey` if an app needs a separate persisted namespace.
+  See `App.tsx` for the live reference wiring.
+
 ### Known gaps
 
 - `SecondaryBar` keeps its current side-by-side stacking inside the overlay — revisit if
   it feels cramped on very narrow screens.
 - Consumer apps (crm/account/…) must pass `mobileOpen`/`onMobileClose` to adopt overlay
-  mode; until then they get the unchanged inline sidebar.
+  mode, and adopt `useSidebarPrefs` to get persistence; until then they get the unchanged
+  inline sidebar with non-persisted state.
+- Persisted `collapsed` can be transiently overridden by SideBar's existing "auto-collapse
+  when a secondary panel is active" effect — pre-existing behavior, not regressed.
+- Persisting `mobileOpen` means a real phone (`belowLg`) that was left with the drawer open
+  reloads with it open (covering content until a leaf tap auto-closes it). Accepted to honor
+  "restore exactly the same state"; revisit with a `belowLg` gate if it proves annoying.

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAkFX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAiFX;AAED,eAAe,GAAG,CAAC"}

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,30 @@
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/DatePicker/SingleDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AA6BlG,OAAO,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AA2OtE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+7B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AA6BlG,OAAO,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AA2OtE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA09B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -435,7 +435,13 @@ const SingleDatePicker = (props) => {
         if (enableMask && isMaskActive) {
             setIsMaskActive(false);
             segmentInputBufferRef.current = "";
-            if (!value || !value.trim() || !isMaskComplete(value)) {
+            // isMaskComplete() can't recognise text month tokens (e.g. "MMM"), so a
+            // valid, externally-set value like "Jun 10, 2026" is judged "incomplete"
+            // and was being cleared on blur (data loss). Only clear when the value is
+            // empty or genuinely can't be parsed into a valid date; otherwise fall
+            // through and let the parse path below commit it.
+            const hasParsableDate = parseValidatedValue(value) !== null;
+            if (!value || !value.trim() || (!isMaskComplete(value) && !hasParsableDate)) {
                 setInputValue("");
                 setTempDate(null);
                 setIsTyping(false);
@@ -635,6 +641,24 @@ const SingleDatePicker = (props) => {
         }
         return finalDate;
     };
+    // Returns the validated Date for a fully-typed value, or null when the value
+    // is empty / not a parseable, in-range date. Used by blur handling so an
+    // already-valid value is never discarded just because the mask-completeness
+    // heuristic doesn't understand text month tokens.
+    const parseValidatedValue = (value) => {
+        if (!value || !value.trim())
+            return null;
+        try {
+            const parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                return computeFinalDate(parsed);
+            }
+        }
+        catch (error) {
+            console.error("Error parsing input:", error);
+        }
+        return null;
+    };
     const updateTempDateFromMask = (value) => {
         if (!isMaskComplete(value)) {
             return;
@@ -662,7 +686,11 @@ const SingleDatePicker = (props) => {
             return;
         setIsMaskActive(true);
         setIsTyping(true);
-        if (!inputValue || inputValue.length !== maskPlaceholder.length) {
+        // Never blank an already-valid value on focus. The mask placeholder is built
+        // with padded tokens (e.g. "MMM dd, yyyy"), so a valid but shorter value such
+        // as "Jun 5, 2026" would otherwise be replaced by the empty mask and lost.
+        const hasValidValue = parseValidatedValue(inputValue) !== null;
+        if (!hasValidValue && (!inputValue || inputValue.length !== maskPlaceholder.length)) {
             setInputValue(maskPlaceholder);
             maskInsertedRef.current = true;
         }

package/dist/Components/Input/textInputIconSize.test.d.ts

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

package/dist/Components/Input/textInputIconSize.test.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var textInputIconSize_1 = require("./textInputIconSize");
+describe("getTextInputIconSizePx", function () {
+    it("maps Chakra input sizes to increasing pixel values", function () {
+        var xs = (0, textInputIconSize_1.getTextInputIconSizePx)("xs");
+        var sm = (0, textInputIconSize_1.getTextInputIconSizePx)("sm");
+        var md = (0, textInputIconSize_1.getTextInputIconSizePx)("md");
+        var lg = (0, textInputIconSize_1.getTextInputIconSizePx)("lg");
+        expect(xs).toBeLessThan(sm);
+        expect(sm).toBeLessThan(md);
+        expect(md).toBeLessThan(lg);
+    });
+    it("defaults to md for missing or unknown size", function () {
+        expect((0, textInputIconSize_1.getTextInputIconSizePx)(undefined)).toBe(18);
+        expect((0, textInputIconSize_1.getTextInputIconSizePx)("nope")).toBe(18);
+    });
+});
+describe("getTextInputIconWrapperSx", function () {
+    it("includes the resolved pixel size in svg rules for xs", function () {
+        var sx = (0, textInputIconSize_1.getTextInputIconWrapperSx)("xs");
+        var svg = sx["& > svg, & > * svg, & svg"];
+        expect(svg).toBeDefined();
+        expect(svg === null || svg === void 0 ? void 0 : svg.width).toContain("14");
+        expect(svg === null || svg === void 0 ? void 0 : svg.height).toContain("14");
+    });
+});

package/dist/Components/KanbanBoard/AccountCard.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/AccountCard.test.js

@@ -0,0 +1,68 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var AccountCard_1 = __importDefault(require("./AccountCard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 50: "#fafafa", 100: "#f5f5f5", 500: "#fff" },
+            boxborder: { 300: "#e2e8f0" },
+            gray: { 200: "#eee", 700: "#333" },
+            primary: { 300: "#90cdf4", 500: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            blue: { 600: "#3182ce" },
+            text: {},
+        },
+    }); },
+}); });
+var mockAccount = {
+    id: "1",
+    name: "Test Account",
+    email: "test@example.com",
+};
+var defaultProps = {
+    account: mockAccount,
+    index: 0,
+    onDelete: jest.fn(),
+    onOpen: jest.fn(),
+};
+var renderCard = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("AccountCard – permissions", function () {
+    it("renders the delete icon when isDeletable is true (default)", function () {
+        renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps)));
+        expect(react_2.screen.getByLabelText("Delete")).toBeInTheDocument();
+    });
+    it("hides the delete icon when isDeletable is false", function () {
+        renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+    });
+    it("renders the open (ExternalLink) icon regardless of isDeletable", function () {
+        renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.getByLabelText("Open")).toBeInTheDocument();
+    });
+    it("calls onDelete when delete icon is clicked and isDeletable is true", function () {
+        var onDelete = jest.fn();
+        renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { onDelete: onDelete, isDeletable: true })));
+        react_2.fireEvent.click(react_2.screen.getByLabelText("Delete"));
+        expect(onDelete).toHaveBeenCalledWith(mockAccount);
+    });
+});

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.test.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var KanbanActions_1 = __importDefault(require("./KanbanActions"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            text: { 500: "#555" },
+            primary: { 500: "#3182ce" },
+        },
+    }); },
+}); });
+jest.mock("../../Select/Select", function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var placeholder = _a.placeholder;
+        return react_1.default.createElement("div", { "data-testid": "mock-select" }, placeholder);
+    },
+}); });
+jest.mock("../../Divider/Divider", function () { return ({
+    __esModule: true,
+    default: function () { return react_1.default.createElement("div", { "data-testid": "mock-divider" }); },
+}); });
+var options = [{ id: "1", label: "Open" }];
+var renderActions = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("KanbanActions", function () {
+    it("renders Edit Layout and Create New as buttons", function () {
+        renderActions(react_1.default.createElement(KanbanActions_1.default, { options: options, onEdit: jest.fn(), onCreate: jest.fn() }));
+        expect(react_2.screen.getByRole("button", { name: /edit layout/i })).toBeInTheDocument();
+        expect(react_2.screen.getByRole("button", { name: /create new/i })).toBeInTheDocument();
+    });
+    it("invokes onEdit and onCreate when buttons are clicked", function () {
+        var onEdit = jest.fn();
+        var onCreate = jest.fn();
+        renderActions(react_1.default.createElement(KanbanActions_1.default, { options: options, onEdit: onEdit, onCreate: onCreate }));
+        react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /edit layout/i }));
+        react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /create new/i }));
+        expect(onEdit).toHaveBeenCalledTimes(1);
+        expect(onCreate).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/KanbanBoard.test.js

@@ -0,0 +1,185 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var KanbanBoard_1 = __importDefault(require("./KanbanBoard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 100: "#f9f9f9", 500: "#fff" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 700: "#333" },
+            primary: { 500: "#3182ce" },
+            blue: { 50: "#ebf8ff", 500: "#3182ce", 600: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            text: { 500: "#555", 600: "#444", 700: "#333" },
+            secondary: { 500: "#805ad5" },
+        },
+    }); },
+}); });
+jest.mock("@hello-pangea/dnd", function () { return ({
+    DragDropContext: function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement("div", null, children);
+    },
+    Droppable: function (_a) {
+        var children = _a.children;
+        return children({ innerRef: function () { }, droppableProps: {}, placeholder: null }, { isDraggingOver: false });
+    },
+    Draggable: function (_a) {
+        var children = _a.children, isDragDisabled = _a.isDragDisabled;
+        var provided = {
+            innerRef: function () { },
+            draggableProps: { "data-drag-disabled": isDragDisabled },
+            dragHandleProps: {},
+        };
+        return children(provided, { isDragging: false });
+    },
+}); });
+jest.mock("react-window", function () { return ({
+    VariableSizeList: function () { return null; },
+}); });
+beforeAll(function () {
+    global.ResizeObserver = /** @class */ (function () {
+        function class_1() {
+        }
+        class_1.prototype.observe = function () { };
+        class_1.prototype.unobserve = function () { };
+        class_1.prototype.disconnect = function () { };
+        return class_1;
+    }());
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+var sampleData = {
+    col1: {
+        id: "col1",
+        title: "To Do",
+        color: "#3182ce",
+        items: [
+            { id: "1", name: "Account A", email: "a@example.com" },
+            { id: "2", name: "Account B", email: "b@example.com" },
+        ],
+    },
+};
+describe("KanbanBoard – permissions", function () {
+    describe("isDeletable", function () {
+        it("shows card delete icons when permissions.isDeletable is true", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: true } }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+        it("hides card delete icons when permissions.isDeletable is false", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: false } }));
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+        });
+        it("shows card delete icons when permissions prop is omitted (default allow)", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+    });
+    describe("isCreatable", function () {
+        var kanbanCreate = { isCreatable: true, label: "Create New" };
+        it("shows the create button when permissions.isCreatable is true", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: true } }));
+            expect(react_2.screen.getByText("Create New")).toBeInTheDocument();
+        });
+        it("hides the create button when permissions.isCreatable is false", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: false } }));
+            expect(react_2.screen.queryByText("Create New")).not.toBeInTheDocument();
+        });
+    });
+    describe("isEditable", function () {
+        var kanbanEdit = { isEditable: true, label: "Edit Layout" };
+        it("shows the edit button when permissions.isEditable is true", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: true } }));
+            expect(react_2.screen.getByText("Edit Layout")).toBeInTheDocument();
+        });
+        it("hides the edit button when permissions.isEditable is false", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: false } }));
+            expect(react_2.screen.queryByText("Edit Layout")).not.toBeInTheDocument();
+        });
+        it("sets isDragDisabled on cards when permissions.isEditable is false", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isEditable: false } }));
+            var disabledDraggables = react_2.screen
+                .getAllByRole("generic")
+                .filter(function (el) { return el.getAttribute("data-drag-disabled") === "true"; });
+            expect(disabledDraggables.length).toBeGreaterThan(0);
+        });
+    });
+    describe("column collapse", function () {
+        it("shows a collapse control per column when enableColumnCollapse is true", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true }));
+            expect(react_2.screen.getAllByLabelText("Collapse column").length).toBeGreaterThan(0);
+        });
+        it("hides cards when a column is collapsed", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+            react_2.fireEvent.click(react_2.screen.getAllByLabelText("Collapse column")[0]);
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+            expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
+        });
+        it("still shows column customNode when horizontally collapsed", function () {
+            var dataWithCustom = {
+                col1: __assign(__assign({}, sampleData.col1), { customNode: function () { return react_1.default.createElement("span", null, "Column summary line"); } }),
+            };
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: dataWithCustom, enableColumnCollapse: true }));
+            expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
+            react_2.fireEvent.click(react_2.screen.getByLabelText("Collapse column"));
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+            expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
+        });
+        it("starts with columns collapsed when collapsedColumns is set", function () {
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true, collapsedColumns: { col1: true } }));
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+            expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
+        });
+        it("calls onColumnCollapseChange when collapsing and expanding", function () {
+            var onColumnCollapseChange = jest.fn();
+            renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true, onColumnCollapseChange: onColumnCollapseChange }));
+            react_2.fireEvent.click(react_2.screen.getAllByLabelText("Collapse column")[0]);
+            expect(onColumnCollapseChange).toHaveBeenCalledTimes(1);
+            expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
+                colId: "col1",
+                collapsed: true,
+                collapsedColumns: { col1: true },
+            });
+            react_2.fireEvent.click(react_2.screen.getByLabelText("Expand column"));
+            expect(onColumnCollapseChange).toHaveBeenCalledTimes(2);
+            expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
+                colId: "col1",
+                collapsed: false,
+                collapsedColumns: { col1: false },
+            });
+        });
+    });
+});

package/dist/Components/SearchSelect/searchSelectSize.test.d.ts

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

package/dist/Components/SearchSelect/searchSelectSize.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var searchSelectSize_1 = require("./searchSelectSize");
+describe("getSearchSelectSizeStyles", function () {
+    it.each(["xs", "sm", "md", "lg"])("returns minH for %s", function (sz) {
+        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)(sz);
+        expect(t.minH).toMatch(/rem$/);
+        expect(t.insideSelectDefaultHeight).toMatch(/rem$/);
+    });
+    it("xs is more compact than lg", function () {
+        var xs = (0, searchSelectSize_1.getSearchSelectSizeStyles)("xs");
+        var lg = (0, searchSelectSize_1.getSearchSelectSizeStyles)("lg");
+        var parse = function (h) { return parseFloat(h); };
+        expect(parse(xs.minH)).toBeLessThan(parse(lg.minH));
+        expect(parse(xs.insideSelectDefaultHeight)).toBeLessThan(parse(lg.insideSelectDefaultHeight));
+    });
+    it("uses md as fallback for unknown size keys (runtime map lookup)", function () {
+        var t = (0, searchSelectSize_1.getSearchSelectSizeStyles)("unknown");
+        var md = (0, searchSelectSize_1.getSearchSelectSizeStyles)("md");
+        expect(t).toEqual(md);
+    });
+});

package/dist/Components/SideBar/SideBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAuZ3D,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,IAAI,EACJ,eAAuB,EACvB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,YAAY,EACZ,IAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,SAAiB,EACjB,iBAAiB,GAClB,EAAE,YAAY,2CAsRd"}
+{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAyZ3D,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,IAAI,EACJ,eAAuB,EACvB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,YAAY,EACZ,IAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,SAAiB,EACjB,iBAAiB,GAClB,EAAE,YAAY,2CAsRd"}

package/dist/Components/SideBar/SideBar.js

@@ -13,8 +13,10 @@ const lucide_react_1 = require("lucide-react");
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
 const Z_PANEL = 1400;
-// Width of the slide-in overlay panel (a touch wider than the inline 13rem for touch).
-const OVERLAY_WIDTH = "16rem";
+// Overlay/mobile panel width. ~14.7rem (235px): a touch wider than the inline
+// expanded 13rem for comfortable touch targets, but below the old 16rem that was
+// too wide on phones. Still capped by `maxW: 88vw` on very small screens.
+const OVERLAY_WIDTH = "14.7rem";
 const MenuItems_1 = __importDefault(require("./components/MenuItems"));
 const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));

package/dist/Components/SideBar/components/OtherApps.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";