@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

package/dist/components/generative/validate.js

@@ -0,0 +1,259 @@
+import { GENERATIVE_SCHEMA } from './schema.generated.js';
+
+/** Props that are NEVER accepted from a spec, regardless of schema. */
+const BLOCKED_PROPS = new Set(["className", "style", "ref", "key", "theme", "dangerouslySetInnerHTML"]);
+const isHandler = (key) => /^on[A-Z]/.test(key);
+/**
+ * Validate + repair a model-emitted spec against the generated schema.
+ * Never throws; never mutates the input. Every repair is recorded in `issues`.
+ * Unknown components are kept (GenerativeView renders its safe placeholder)
+ * but their props/children are stripped.
+ */
+function validate(spec, options = {}) {
+    var _a;
+    const schema = (_a = options.schema) !== null && _a !== void 0 ? _a : GENERATIVE_SCHEMA;
+    const issues = [];
+    if (Array.isArray(spec)) {
+        return { spec: spec.map((n, i) => validateNode(n, schema, `$[${i}]`, issues)), issues };
+    }
+    return { spec: validateNode(spec, schema, "$", issues), issues };
+}
+function validateNode(node, schema, path, issues) {
+    if (!node || typeof node !== "object" || typeof node.component !== "string") {
+        issues.push({ path, code: "invalid-node", severity: "error", message: "Node is not an object with a string `component`" });
+        return { component: "__invalid__" };
+    }
+    const raw = node;
+    const comp = schema.components[raw.component];
+    if (!comp) {
+        issues.push({
+            path,
+            code: "unknown-component",
+            severity: "error",
+            message: `Unknown component "${raw.component}" — props/children stripped; renders as placeholder`,
+        });
+        return { component: raw.component, ...(raw.id ? { id: raw.id } : {}) };
+    }
+    const props = sanitizeProps(raw.props, comp, schema, path, issues);
+    // Fill required props that have a schema default; flag the rest.
+    for (const [name, ps] of Object.entries(comp.props)) {
+        if (!ps.required || props[name] !== undefined)
+            continue;
+        if (ps.default !== undefined) {
+            props[name] = ps.default;
+            issues.push({
+                path: `${path}.props.${name}`,
+                code: "applied-default",
+                severity: "warning",
+                message: `Required prop "${name}" missing — applied default ${JSON.stringify(ps.default)}`,
+            });
+        }
+        else {
+            issues.push({
+                path: `${path}.props.${name}`,
+                code: "missing-required",
+                severity: "error",
+                message: `Required prop "${name}" is missing`,
+            });
+        }
+    }
+    let children;
+    if (Array.isArray(raw.children) && raw.children.length) {
+        if (comp.role !== "container") {
+            issues.push({
+                path: `${path}.children`,
+                code: "children-ignored",
+                severity: "warning",
+                message: `"${raw.component}" is not a container — children removed`,
+            });
+        }
+        else {
+            children = raw.children.map((c, i) => validateNode(c, schema, `${path}.children[${i}]`, issues));
+        }
+    }
+    let actions;
+    if (raw.actions && typeof raw.actions === "object") {
+        for (const [key, descriptor] of Object.entries(raw.actions)) {
+            if (descriptor && typeof descriptor === "object" && typeof descriptor.type === "string") {
+                (actions !== null && actions !== void 0 ? actions : (actions = {}))[key] = {
+                    type: descriptor.type,
+                    ...(descriptor.payload !== undefined ? { payload: descriptor.payload } : {}),
+                };
+            }
+            else {
+                issues.push({
+                    path: `${path}.actions.${key}`,
+                    code: "invalid-action",
+                    severity: "warning",
+                    message: `Action "${key}" must be { type: string, payload? } — removed`,
+                });
+            }
+        }
+    }
+    return {
+        component: raw.component,
+        ...(raw.id ? { id: raw.id } : {}),
+        ...(raw.sizeHint ? { sizeHint: raw.sizeHint } : {}),
+        ...(Object.keys(props).length ? { props } : {}),
+        ...(children ? { children } : {}),
+        ...(actions ? { actions } : {}),
+    };
+}
+function sanitizeProps(rawProps, comp, schema, path, issues) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawProps !== null && rawProps !== void 0 ? rawProps : {})) {
+        const propPath = `${path}.props.${key}`;
+        if (BLOCKED_PROPS.has(key) || isHandler(key)) {
+            issues.push({
+                path: propPath,
+                code: "blocked-prop",
+                severity: "warning",
+                message: `"${key}" is not accepted from a spec (injection guard) — removed`,
+            });
+            continue;
+        }
+        const ps = comp.props[key];
+        if (!ps) {
+            issues.push({
+                path: propPath,
+                code: "unknown-prop",
+                severity: "warning",
+                message: `"${key}" is not in the contract — removed (allow-list)`,
+            });
+            continue;
+        }
+        const checked = checkValue(key, value, ps, schema, propPath, issues);
+        if (checked !== undefined)
+            out[key] = checked;
+    }
+    return out;
+}
+function checkValue(key, value, ps, schema, path, issues) {
+    var _a, _b;
+    const drop = (message, code = "invalid-value") => {
+        if (ps.default !== undefined) {
+            issues.push({ path, code, severity: "warning", message: `${message} — replaced with default ${JSON.stringify(ps.default)}` });
+            return ps.default;
+        }
+        issues.push({ path, code, severity: "warning", message: `${message} — removed` });
+        return undefined;
+    };
+    switch (ps.kind) {
+        case "enum": {
+            const options = (_a = ps.options) !== null && _a !== void 0 ? _a : [];
+            if (options.includes(value))
+                return value;
+            if (typeof value === "string") {
+                const ci = options.find((o) => typeof o === "string" && o.toLowerCase() === value.toLowerCase());
+                if (ci !== undefined) {
+                    issues.push({ path, code: "coerced-value", severity: "warning", message: `"${value}" coerced to "${ci}"` });
+                    return ci;
+                }
+                const num = Number(value);
+                if (!Number.isNaN(num) && options.includes(num)) {
+                    issues.push({ path, code: "coerced-value", severity: "warning", message: `"${value}" coerced to ${num}` });
+                    return num;
+                }
+            }
+            return drop(`${JSON.stringify(value)} is not one of ${JSON.stringify(options)}`, "invalid-enum");
+        }
+        case "boolean": {
+            if (typeof value === "boolean")
+                return value;
+            if (value === "true" || value === "false") {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `"${value}" coerced to boolean` });
+                return value === "true";
+            }
+            return drop(`Expected boolean, got ${JSON.stringify(value)}`);
+        }
+        case "number": {
+            if (typeof value === "number")
+                return value;
+            if (typeof value === "string" && value.trim() !== "" && !Number.isNaN(Number(value))) {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `"${value}" coerced to number` });
+                return Number(value);
+            }
+            return drop(`Expected number, got ${JSON.stringify(value)}`);
+        }
+        case "string":
+        case "text": {
+            if (typeof value === "string")
+                return value;
+            if (typeof value === "number" || typeof value === "boolean") {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `${JSON.stringify(value)} coerced to string` });
+                return String(value);
+            }
+            return drop(`Expected string, got ${JSON.stringify(value)}`);
+        }
+        case "union": {
+            const types = (_b = ps.types) !== null && _b !== void 0 ? _b : [];
+            if (types.includes(typeof value))
+                return value;
+            if (types.includes("number") && typeof value === "string" && value.trim() !== "" && !Number.isNaN(Number(value))) {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `"${value}" coerced to number` });
+                return Number(value);
+            }
+            if (types.includes("string") && (typeof value === "number" || typeof value === "boolean")) {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `${JSON.stringify(value)} coerced to string` });
+                return String(value);
+            }
+            return drop(`Expected ${types.join(" | ")}, got ${JSON.stringify(value)}`);
+        }
+        case "icon": {
+            if (typeof value !== "string")
+                return drop(`Icon must be a NAME string, got ${JSON.stringify(value)}`);
+            if (schema.icons.includes(value))
+                return value;
+            const ci = schema.icons.find((n) => n.toLowerCase() === value.toLowerCase());
+            if (ci) {
+                issues.push({ path, code: "coerced-value", severity: "warning", message: `Icon "${value}" coerced to "${ci}"` });
+                return ci;
+            }
+            return drop(`Unknown icon "${value}" (closed set of ${schema.icons.length})`, "invalid-enum");
+        }
+        case "shape": {
+            if (ps.shape === "gridCols") {
+                if (typeof value === "number" || (value !== null && typeof value === "object" && !Array.isArray(value)))
+                    return value;
+                return drop(`Expected a number or breakpoint map, got ${JSON.stringify(value)}`, "invalid-shape");
+            }
+            if (ps.shape === "chartConfig" || ps.shape === "donutColors") {
+                if (value !== null && typeof value === "object" && !Array.isArray(value))
+                    return value;
+                return drop(`Expected an object, got ${JSON.stringify(value)}`, "invalid-shape");
+            }
+            // every other shape is an array of objects
+            if (!Array.isArray(value))
+                return drop(`Expected an array, got ${JSON.stringify(value)}`, "invalid-shape");
+            const cleaned = value.filter((item) => item !== null && typeof item === "object" && !Array.isArray(item));
+            if (cleaned.length !== value.length) {
+                issues.push({
+                    path,
+                    code: "invalid-shape",
+                    severity: "warning",
+                    message: `${value.length - cleaned.length} non-object item(s) removed from "${key}"`,
+                });
+            }
+            // strip blocked/handler keys inside structured items (injection guard at depth)
+            return cleaned.map((item) => {
+                const obj = item;
+                const next = {};
+                for (const [k, v] of Object.entries(obj)) {
+                    if (BLOCKED_PROPS.has(k) || isHandler(k)) {
+                        issues.push({
+                            path: `${path}.${k}`,
+                            code: "blocked-prop",
+                            severity: "warning",
+                            message: `"${k}" inside "${key}" removed (injection guard)`,
+                        });
+                        continue;
+                    }
+                    next[k] = v;
+                }
+                return next;
+            });
+        }
+    }
+}
+
+export { validate };

package/dist/components/layout/AppShell/AppShell.theme.js

@@ -4,14 +4,14 @@ const appShellTheme = {
     shell: "flex flex-1 min-h-0 min-w-0",
     mainColumn: "flex flex-col flex-1 min-h-0 min-w-0",
     topbar: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
-    sidebar: "flex flex-col shrink-0 overflow-hidden border-r border-[var(--color-border)] bg-[var(--color-background)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/85",
+    sidebar: "flex flex-col shrink-0 overflow-hidden",
     sidebarScroll: "min-h-0 flex-1",
     sidebarCollapsed: "hidden lg:flex",
     header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
     main: "flex flex-col flex-1 min-h-0 min-w-0",
     mainScroll: "min-h-0 flex-1",
     mainInner: "mx-auto w-full",
-    rightPanel: "flex flex-col shrink-0 overflow-hidden border-l border-[var(--color-border)] bg-[var(--color-background)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/85",
+    rightPanel: "flex flex-col shrink-0 overflow-hidden border-l border-[var(--color-border)]",
     rightPanelScroll: "min-h-0 flex-1",
     footer: "shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)]/90 backdrop-blur supports-[backdrop-filter]:bg-[var(--color-background)]/75",
     contentPadding: {

package/dist/components/layout/FormLayout/FormLayout.js

@@ -1,99 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
-import '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import { Separator } from '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/DotSeparator/DotSeparator.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Popover/PopoverBody.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsBody.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.js';
-import '../../core/Sidebar/SidebarSearch.js';
-import '../../core/Sidebar/SidebarCard.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { formLayoutTheme } from './FormLayout.theme.js';
 import { FormLayoutSection } from './FormLayoutSection.js';
 import { FormLayoutFooter } from './FormLayoutFooter.js';
+import { Separator } from '../../core/Separator/Separator.js';
 
 const isFooter = (child) => React__default.isValidElement(child) && child.type === FormLayoutFooter;
 const FormLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {

package/dist/components/layout/Grid/Grid.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { GridProps } from "./Grid.types";
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Grid/Grid.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { gridTheme } from './Grid.theme.js';
+
+const clampCols = (n) => Math.min(12, Math.max(1, Math.round(n)));
+/** Turn a `cols` value into a space-separated literal class string. */
+function resolveCols(cols, theme) {
+    var _a;
+    if (typeof cols === "number") {
+        return (_a = theme.colsRamp[clampCols(cols)]) !== null && _a !== void 0 ? _a : theme.colsRamp[1];
+    }
+    const parts = [];
+    Object.keys(cols).forEach((bp) => {
+        var _a;
+        const n = cols[bp];
+        if (typeof n === "number") {
+            const cls = (_a = theme.cols[bp]) === null || _a === void 0 ? void 0 : _a[clampCols(n)];
+            if (cls)
+                parts.push(cls);
+        }
+    });
+    return parts.join(" ");
+}
+const Grid = React__default.forwardRef(({ cols = 1, gap = 4, flow, align, justify, className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        return ({
+            ...gridTheme,
+            ...customTheme,
+            colsRamp: { ...gridTheme.colsRamp, ...customTheme.colsRamp },
+            cols: {
+                base: { ...gridTheme.cols.base, ...(_a = customTheme.cols) === null || _a === void 0 ? void 0 : _a.base },
+                sm: { ...gridTheme.cols.sm, ...(_b = customTheme.cols) === null || _b === void 0 ? void 0 : _b.sm },
+                md: { ...gridTheme.cols.md, ...(_c = customTheme.cols) === null || _c === void 0 ? void 0 : _c.md },
+                lg: { ...gridTheme.cols.lg, ...(_d = customTheme.cols) === null || _d === void 0 ? void 0 : _d.lg },
+                xl: { ...gridTheme.cols.xl, ...(_e = customTheme.cols) === null || _e === void 0 ? void 0 : _e.xl },
+                "2xl": { ...gridTheme.cols["2xl"], ...(_f = customTheme.cols) === null || _f === void 0 ? void 0 : _f["2xl"] },
+            },
+            gaps: { ...gridTheme.gaps, ...customTheme.gaps },
+            flow: { ...gridTheme.flow, ...customTheme.flow },
+            align: { ...gridTheme.align, ...customTheme.align },
+            justify: { ...gridTheme.justify, ...customTheme.justify },
+        });
+    }, [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, resolveCols(cols, theme), theme.gaps[gap], flow && theme.flow[flow], align && theme.align[align], justify && theme.justify[justify], className), ...props }));
+});
+Grid.displayName = "Grid";
+
+export { Grid };

package/dist/components/layout/Grid/Grid.theme.d.ts

@@ -0,0 +1,2 @@
+import { GridTheme } from "./Grid.types";
+export declare const gridTheme: GridTheme;

package/dist/components/layout/Grid/Grid.theme.js

@@ -0,0 +1,35 @@
+// ⚠️ PURGE-SAFETY: every class below MUST stay a verbatim literal string.
+// Tailwind v4 scans this file's source text to decide which classes to emit —
+// it cannot see runtime-built strings. Do NOT "simplify" these tables into a
+// generated/interpolated form (e.g. `${bp}grid-cols-${n}`): that drops the
+// literals from the scan and silently breaks the grid in production CSS.
+const COLS_BASE = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 5: "grid-cols-5", 6: "grid-cols-6", 7: "grid-cols-7", 8: "grid-cols-8", 9: "grid-cols-9", 10: "grid-cols-10", 11: "grid-cols-11", 12: "grid-cols-12" };
+const COLS_SM = { 1: "sm:grid-cols-1", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4", 5: "sm:grid-cols-5", 6: "sm:grid-cols-6", 7: "sm:grid-cols-7", 8: "sm:grid-cols-8", 9: "sm:grid-cols-9", 10: "sm:grid-cols-10", 11: "sm:grid-cols-11", 12: "sm:grid-cols-12" };
+const COLS_MD = { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4", 5: "md:grid-cols-5", 6: "md:grid-cols-6", 7: "md:grid-cols-7", 8: "md:grid-cols-8", 9: "md:grid-cols-9", 10: "md:grid-cols-10", 11: "md:grid-cols-11", 12: "md:grid-cols-12" };
+const COLS_LG = { 1: "lg:grid-cols-1", 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4", 5: "lg:grid-cols-5", 6: "lg:grid-cols-6", 7: "lg:grid-cols-7", 8: "lg:grid-cols-8", 9: "lg:grid-cols-9", 10: "lg:grid-cols-10", 11: "lg:grid-cols-11", 12: "lg:grid-cols-12" };
+const COLS_XL = { 1: "xl:grid-cols-1", 2: "xl:grid-cols-2", 3: "xl:grid-cols-3", 4: "xl:grid-cols-4", 5: "xl:grid-cols-5", 6: "xl:grid-cols-6", 7: "xl:grid-cols-7", 8: "xl:grid-cols-8", 9: "xl:grid-cols-9", 10: "xl:grid-cols-10", 11: "xl:grid-cols-11", 12: "xl:grid-cols-12" };
+const COLS_2XL = { 1: "2xl:grid-cols-1", 2: "2xl:grid-cols-2", 3: "2xl:grid-cols-3", 4: "2xl:grid-cols-4", 5: "2xl:grid-cols-5", 6: "2xl:grid-cols-6", 7: "2xl:grid-cols-7", 8: "2xl:grid-cols-8", 9: "2xl:grid-cols-9", 10: "2xl:grid-cols-10", 11: "2xl:grid-cols-11", 12: "2xl:grid-cols-12" };
+const gridTheme = {
+    baseStyle: "grid",
+    colsRamp: {
+        1: "grid-cols-1",
+        2: "grid-cols-1 sm:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+        6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+        7: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7",
+        8: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8",
+        9: "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-9",
+        10: "grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-10",
+        11: "grid-cols-3 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-11",
+        12: "grid-cols-3 sm:grid-cols-6 lg:grid-cols-6 xl:grid-cols-12",
+    },
+    cols: { base: COLS_BASE, sm: COLS_SM, md: COLS_MD, lg: COLS_LG, xl: COLS_XL, "2xl": COLS_2XL },
+    gaps: { 0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5", 6: "gap-6", 8: "gap-8", 10: "gap-10", 12: "gap-12" },
+    flow: { row: "grid-flow-row", col: "grid-flow-col", dense: "grid-flow-row-dense" },
+    align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" },
+    justify: { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" },
+};
+
+export { gridTheme };

package/dist/components/layout/Grid/Grid.types.d.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from "react";
+/** Tailwind v4 default breakpoints; "base" = unprefixed (mobile-first). */
+export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Tailwind spacing scale → gap-0 … gap-12. Use className for exotic values. */
+export type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type GridFlow = "row" | "col" | "dense";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export type GridJustify = "start" | "center" | "end" | "between";
+/** A single column count (mobile-safe auto-ramp) OR an explicit per-breakpoint map. */
+export type GridCols = number | Partial<Record<Breakpoint, number>>;
+export interface GridTheme {
+    baseStyle: string;
+    /** cols={n} → a full responsive class string (mobile-first ramp). */
+    colsRamp: Record<number, string>;
+    /** cols={{ md: 2 }} → per-breakpoint literal class tables. */
+    cols: Record<Breakpoint, Record<number, string>>;
+    gaps: Record<GridGap, string>;
+    flow: Record<GridFlow, string>;
+    align: Record<GridAlign, string>;
+    justify: Record<GridJustify, string>;
+}
+export interface GridThemeOverrides {
+    baseStyle?: string;
+    colsRamp?: Partial<Record<number, string>>;
+    cols?: Partial<Record<Breakpoint, Record<number, string>>>;
+    gaps?: Partial<Record<GridGap, string>>;
+    flow?: Partial<Record<GridFlow, string>>;
+    align?: Partial<Record<GridAlign, string>>;
+    justify?: Partial<Record<GridJustify, string>>;
+}
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Columns: a number (mobile-safe auto-ramp) or a per-breakpoint map.
+     *
+     * A number is NOT a literal column count on every screen — it expands through
+     * a mobile-first responsive ramp, e.g. `cols={3}` renders 1 column on mobile,
+     * 2 from `sm`, and 3 from `lg`. Use a per-breakpoint map
+     * (`cols={{ base: 3 }}` or `{ base: 1, md: 2, lg: 3 }`) for explicit control.
+     * @default 1
+     */
+    cols?: GridCols;
+    /**
+     * Gap between grid cells (Tailwind spacing scale → gap-N).
+     * @default 4
+     */
+    gap?: GridGap;
+    /** Grid auto-flow direction. */
+    flow?: GridFlow;
+    /** align-items within cells. */
+    align?: GridAlign;
+    /** justify-content of tracks. */
+    justify?: GridJustify;
+    /** Custom class name (always wins). */
+    className?: string;
+    /** Component-level theme overrides. */
+    theme?: GridThemeOverrides;
+}

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export { Grid } from "./Grid";
+export type { GridProps, GridTheme, GridThemeOverrides, GridCols, GridGap, GridFlow, GridAlign, GridJustify, Breakpoint, } from "./Grid.types";
+export { gridTheme } from "./Grid.theme";

package/dist/components/layout/Section/Section.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SectionProps } from "./Section.types";
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/Section/Section.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { sectionTheme } from './Section.theme.js';
+
+const Section = React__default.forwardRef(({ title, subtitle, actions, gap = 4, className, theme: customTheme = {}, children, ...props }, ref) => {
+    const headingId = React__default.useId();
+    const theme = useMemo(() => ({
+        ...sectionTheme,
+        ...customTheme,
+        bodyGaps: { ...sectionTheme.bodyGaps, ...customTheme.bodyGaps },
+    }), [customTheme]);
+    const hasHeader = Boolean(title || subtitle || actions);
+    return (jsxs("section", { ref: ref, className: cn(theme.baseStyle, className), "aria-labelledby": title ? headingId : undefined, ...props, children: [hasHeader && (jsxs("div", { className: theme.header, children: [jsxs("div", { children: [title && jsx("h2", { id: headingId, className: theme.title, children: title }), subtitle && jsx("p", { className: theme.subtitle, children: subtitle })] }), actions && jsx("div", { className: theme.actions, children: actions })] })), children != null && (jsx("div", { className: cn(hasHeader && theme.bodyGaps[gap]), children: children }))] }));
+});
+Section.displayName = "Section";
+
+export { Section };

package/dist/components/layout/Section/Section.theme.d.ts

@@ -0,0 +1,2 @@
+import { SectionTheme } from "./Section.types";
+export declare const sectionTheme: SectionTheme;

package/dist/components/layout/Section/Section.theme.js

@@ -0,0 +1,10 @@
+const sectionTheme = {
+    baseStyle: "block",
+    header: "flex items-start justify-between gap-4",
+    title: "text-base font-semibold text-[var(--color-text-primary)]",
+    subtitle: "mt-0.5 text-sm text-[var(--color-text-secondary)]",
+    actions: "flex shrink-0 items-center gap-2",
+    bodyGaps: { 0: "mt-0", 1: "mt-1", 2: "mt-2", 3: "mt-3", 4: "mt-4", 5: "mt-5", 6: "mt-6", 8: "mt-8", 10: "mt-10", 12: "mt-12" },
+};
+
+export { sectionTheme };

package/dist/components/layout/Section/Section.types.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { GridGap } from "../Grid/Grid.types";
+export interface SectionTheme {
+    baseStyle: string;
+    header: string;
+    title: string;
+    subtitle: string;
+    actions: string;
+    /** Spacing (margin-top) between the header and the body. */
+    bodyGaps: Record<GridGap, string>;
+}
+export interface SectionThemeOverrides {
+    baseStyle?: string;
+    header?: string;
+    title?: string;
+    subtitle?: string;
+    actions?: string;
+    bodyGaps?: Partial<Record<GridGap, string>>;
+}
+export interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Section heading. */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    /** Right-aligned actions in the header row. */
+    actions?: ReactNode;
+    /**
+     * Spacing between the header and the body (Tailwind spacing scale → mt-N).
+     * @default 4
+     */
+    gap?: GridGap;
+    className?: string;
+    theme?: SectionThemeOverrides;
+}

package/dist/components/layout/Section/index.d.ts

@@ -0,0 +1,3 @@
+export { Section } from "./Section";
+export type { SectionProps, SectionTheme, SectionThemeOverrides } from "./Section.types";
+export { sectionTheme } from "./Section.theme";

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { StackProps } from "./Stack.types";
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { stackTheme } from './Stack.theme.js';
+
+const Stack = React__default.forwardRef(({ direction = "col", gap = 4, align, justify, wrap = false, className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...stackTheme,
+        ...customTheme,
+        direction: { ...stackTheme.direction, ...customTheme.direction },
+        gaps: { ...stackTheme.gaps, ...customTheme.gaps },
+        align: { ...stackTheme.align, ...customTheme.align },
+        justify: { ...stackTheme.justify, ...customTheme.justify },
+    }), [customTheme]);
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, theme.direction[direction], theme.gaps[gap], align && theme.align[align], justify && theme.justify[justify], wrap && theme.wrap, className), ...props }));
+});
+Stack.displayName = "Stack";
+
+export { Stack };

package/dist/components/layout/Stack/Stack.theme.d.ts

@@ -0,0 +1,2 @@
+import { StackTheme } from "./Stack.types";
+export declare const stackTheme: StackTheme;