nucleus-core-ts 0.9.18 → 0.9.23

package/dist/fe/components/DesignSystem/components/ComponentCanvas.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentEntry } from "../types";
+type ComponentCanvasProps = {
+    registry: ComponentEntry[];
+};
+export declare function ComponentCanvas({ registry }: ComponentCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fe/components/DesignSystem/components/ComponentCanvas.js

@@ -0,0 +1,339 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { useDesignSystemStore } from "../store";
+import { designSystemTheme } from "../theme";
+const VIEWPORT_WIDTHS = {
+    "mobile-sm": "max-w-[320px]",
+    "mobile-lg": "max-w-[428px]",
+    "tablet-sm": "max-w-[768px]",
+    "tablet-lg": "max-w-[1024px]",
+    "desktop-sm": "max-w-[1280px]",
+    "desktop-lg": "max-w-full"
+};
+const VIEWPORT_LABELS = {
+    "mobile-sm": "320px",
+    "mobile-lg": "428px",
+    "tablet-sm": "768px",
+    "tablet-lg": "1024px",
+    "desktop-sm": "1280px",
+    "desktop-lg": "Full"
+};
+const VIEWPORT_OPTIONS = [
+    "mobile-sm",
+    "mobile-lg",
+    "tablet-sm",
+    "tablet-lg",
+    "desktop-sm",
+    "desktop-lg"
+];
+const VIEWPORT_ICONS = {
+    mobile: "M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 16h.01",
+    tablet: "M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm6 16h.01",
+    desktop: "M4 3h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2zm4 18h8m-4-4v4"
+};
+export function ComponentCanvas({ registry }) {
+    const store = useDesignSystemStore();
+    const t = designSystemTheme.canvas;
+    const activeEntry = registry.find((e)=>e.id === store.activeComponentId);
+    const resolvedProps = {};
+    if (activeEntry) {
+        for (const prop of activeEntry.props){
+            const storeVal = store.propValues[prop.name];
+            resolvedProps[prop.name] = storeVal !== undefined && storeVal !== null ? storeVal : prop.defaultValue ?? null;
+        }
+    }
+    const isDark = store.themeMode === "dark";
+    return /*#__PURE__*/ _jsxs("main", {
+        className: t.container,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: t.toolbar,
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        className: "p-2 lg:hidden rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800",
+                        onClick: ()=>store.toggleSidebar(),
+                        "aria-label": "Toggle sidebar",
+                        children: /*#__PURE__*/ _jsx("svg", {
+                            width: "18",
+                            height: "18",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("path", {
+                                d: "M3 12h18M3 6h18M3 18h18"
+                            })
+                        })
+                    }),
+                    VIEWPORT_OPTIONS.map((vp)=>{
+                        const deviceType = vp.split("-")[0] ?? "";
+                        const sizeLabel = vp.split("-")[1]?.toUpperCase() ?? "";
+                        return /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: ()=>store.setViewportSize(vp),
+                            className: store.viewportSize === vp ? t.toolbarButtonActive : t.toolbarButton,
+                            title: `${VIEWPORT_LABELS[vp]} — ${deviceType} ${sizeLabel}`,
+                            children: /*#__PURE__*/ _jsx("svg", {
+                                width: "14",
+                                height: "14",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                strokeWidth: "2",
+                                className: "inline",
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ _jsx("path", {
+                                    d: VIEWPORT_ICONS[deviceType] ?? ""
+                                })
+                            })
+                        }, vp);
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: t.toolbarDivider,
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>store.setThemeMode("light"),
+                        className: store.themeMode === "light" ? t.toolbarButtonActive : t.toolbarButton,
+                        title: "Light mode",
+                        children: /*#__PURE__*/ _jsxs("svg", {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("circle", {
+                                    cx: "12",
+                                    cy: "12",
+                                    r: "5"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>store.setThemeMode("dark"),
+                        className: store.themeMode === "dark" ? t.toolbarButtonActive : t.toolbarButton,
+                        title: "Dark mode",
+                        children: /*#__PURE__*/ _jsx("svg", {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("path", {
+                                d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: t.toolbarDivider,
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>store.togglePropsPanel(),
+                        className: store.propsPanelOpen ? t.toolbarButtonActive : t.toolbarButton,
+                        title: "Toggle props panel",
+                        children: /*#__PURE__*/ _jsxs("svg", {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+                                }),
+                                /*#__PURE__*/ _jsx("circle", {
+                                    cx: "12",
+                                    cy: "12",
+                                    r: "3"
+                                })
+                            ]
+                        })
+                    }),
+                    activeEntry && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: t.toolbarDivider,
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-xs font-semibold text-slate-900 dark:text-slate-100",
+                                children: activeEntry.name
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-[11px] text-slate-400 dark:text-slate-500 font-mono",
+                                children: VIEWPORT_LABELS[store.viewportSize]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("section", {
+                className: cn(t.viewportFrame, isDark ? "bg-slate-950" : "bg-slate-100/70"),
+                style: !isDark ? {
+                    backgroundImage: "radial-gradient(circle, #e2e8f0 1px, transparent 1px)",
+                    backgroundSize: "20px 20px"
+                } : {
+                    backgroundImage: "radial-gradient(circle, #1e293b 1px, transparent 1px)",
+                    backgroundSize: "20px 20px"
+                },
+                children: activeEntry ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("article", {
+                            className: cn(t.componentWrapper, VIEWPORT_WIDTHS[store.viewportSize], isDark ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200"),
+                            children: /*#__PURE__*/ _jsx("section", {
+                                className: isDark ? "dark" : "",
+                                children: /*#__PURE__*/ _jsx("section", {
+                                    className: cn("rounded-lg", isDark ? "bg-slate-900 text-white" : "bg-white text-slate-900"),
+                                    children: activeEntry.render(resolvedProps)
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(PropDocTable, {
+                            entry: activeEntry,
+                            isDark: isDark
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs("article", {
+                    className: t.emptyState,
+                    children: [
+                        /*#__PURE__*/ _jsxs("svg", {
+                            className: t.emptyIcon,
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            "aria-hidden": "true",
+                            children: [
+                                /*#__PURE__*/ _jsx("rect", {
+                                    x: "3",
+                                    y: "3",
+                                    width: "18",
+                                    height: "18",
+                                    rx: "2",
+                                    ry: "2"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M3 9h18M9 21V9"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: t.emptyText,
+                            children: "Select a component from the sidebar to preview"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function PropDocTable({ entry, isDark }) {
+    const t = designSystemTheme.propTable;
+    const borderColor = isDark ? "border-slate-800" : "border-slate-200";
+    const headerBg = isDark ? "bg-slate-800/80" : "bg-slate-50";
+    const headerText = isDark ? "text-slate-400" : "text-slate-500";
+    const rowHover = isDark ? "hover:bg-slate-800/40" : "hover:bg-slate-50";
+    const nameColor = isDark ? "text-sky-400" : "text-slate-900";
+    const typeColor = isDark ? "text-emerald-400" : "text-violet-700";
+    const defaultColor = isDark ? "text-slate-400" : "text-slate-500";
+    const descColor = isDark ? "text-slate-300" : "text-slate-600";
+    const tableBg = isDark ? "bg-slate-900" : "bg-white";
+    return /*#__PURE__*/ _jsxs("section", {
+        className: cn(t.container, borderColor, tableBg),
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: cn("px-5 py-4 border-b", borderColor),
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: cn("text-sm font-bold tracking-tight", isDark ? "text-slate-100" : "text-slate-900"),
+                        children: "Props Reference"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: cn("mt-1 text-xs font-mono", isDark ? "text-slate-500" : "text-slate-400"),
+                        children: entry.importPath
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("table", {
+                className: "w-full text-left",
+                children: [
+                    /*#__PURE__*/ _jsx("thead", {
+                        children: /*#__PURE__*/ _jsxs("tr", {
+                            className: headerBg,
+                            children: [
+                                /*#__PURE__*/ _jsx("th", {
+                                    className: cn(t.headerCell, headerText),
+                                    children: "Prop"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    className: cn(t.headerCell, headerText),
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    className: cn(t.headerCell, headerText),
+                                    children: "Default"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    className: cn(t.headerCell, headerText),
+                                    children: "Required"
+                                }),
+                                /*#__PURE__*/ _jsx("th", {
+                                    className: cn(t.headerCell, headerText),
+                                    children: "Description"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: entry.props.map((prop)=>/*#__PURE__*/ _jsxs("tr", {
+                                className: cn(t.row, borderColor, rowHover),
+                                children: [
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: cn(t.cell, t.propName, nameColor),
+                                        children: prop.name
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: cn(t.cell, t.propType, typeColor),
+                                        children: prop.type === "select" && prop.options ? prop.options.map((o)=>`'${o.value}'`).join(" | ") : prop.type === "boolean" ? "boolean" : prop.type === "number" ? "number" : "string"
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: cn(t.cell, t.propDefault, defaultColor),
+                                        children: prop.defaultValue === null ? "—" : typeof prop.defaultValue === "boolean" ? String(prop.defaultValue) : typeof prop.defaultValue === "string" ? `"${prop.defaultValue}"` : String(prop.defaultValue)
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: t.cell,
+                                        children: prop.required && /*#__PURE__*/ _jsx("span", {
+                                            className: t.propRequired,
+                                            children: "Required"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("td", {
+                                        className: cn(t.cell, t.propDescription, descColor),
+                                        children: prop.description
+                                    })
+                                ]
+                            }, prop.name))
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/DesignSystem/components/ComponentSidebar.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentEntry } from '../types';
+type ComponentSidebarProps = {
+    registry: ComponentEntry[];
+};
+export declare function ComponentSidebar({ registry }: ComponentSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fe/components/DesignSystem/components/ComponentSidebar.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { useDesignSystemStore } from '../store';
+import { designSystemTheme } from '../theme';
+const CATEGORY_LABELS = {
+    all: 'All',
+    inputs: 'Inputs',
+    display: 'Display',
+    feedback: 'Feedback',
+    navigation: 'Navigation',
+    layout: 'Layout',
+    data: 'Data'
+};
+const CATEGORY_ORDER = [
+    'all',
+    'inputs',
+    'data',
+    'display',
+    'feedback',
+    'navigation',
+    'layout'
+];
+export function ComponentSidebar({ registry }) {
+    const store = useDesignSystemStore();
+    const t = designSystemTheme.sidebar;
+    const filteredComponents = registry.filter((entry)=>{
+        const matchesCategory = store.activeCategory === 'all' || entry.category === store.activeCategory;
+        const matchesSearch = !store.searchQuery || entry.name.toLowerCase().includes(store.searchQuery.toLowerCase()) || entry.description.toLowerCase().includes(store.searchQuery.toLowerCase());
+        return matchesCategory && matchesSearch;
+    });
+    const categoriesWithCount = CATEGORY_ORDER.filter((cat)=>{
+        if (cat === 'all') return true;
+        return registry.some((e)=>e.category === cat);
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            store.sidebarOpen && /*#__PURE__*/ _jsx("section", {
+                className: t.overlay,
+                onClick: ()=>store.toggleSidebar(),
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ _jsxs("nav", {
+                className: cn(t.container, 'fixed lg:relative z-50 lg:z-auto transition-transform duration-300', store.sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'),
+                children: [
+                    /*#__PURE__*/ _jsxs("header", {
+                        className: t.header,
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: t.title,
+                                children: "Design System"
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400",
+                                children: [
+                                    registry.length,
+                                    " components"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                placeholder: "Search components...",
+                                value: store.searchQuery,
+                                onChange: (e)=>store.setSearchQuery(e.target.value),
+                                className: t.searchInput
+                            }),
+                            /*#__PURE__*/ _jsx("nav", {
+                                className: "flex flex-wrap gap-1 mt-3",
+                                "aria-label": "Categories",
+                                children: categoriesWithCount.map((cat)=>/*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>store.setActiveCategory(cat),
+                                        className: store.activeCategory === cat ? t.categoryButtonActive : t.categoryButton,
+                                        children: CATEGORY_LABELS[cat]
+                                    }, cat))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("section", {
+                        className: "flex-1 py-2",
+                        children: [
+                            filteredComponents.map((entry)=>/*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: ()=>store.setActiveComponent(entry.id),
+                                    className: cn(t.componentItem, 'w-full text-left', store.activeComponentId === entry.id ? t.componentItemActive : t.componentItemHover),
+                                    children: /*#__PURE__*/ _jsxs("span", {
+                                        className: "flex flex-col min-w-0",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: t.componentName,
+                                                children: entry.name
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: t.componentCategory,
+                                                children: CATEGORY_LABELS[entry.category]
+                                            })
+                                        ]
+                                    })
+                                }, entry.id)),
+                            filteredComponents.length === 0 && /*#__PURE__*/ _jsx("p", {
+                                className: "px-4 py-8 text-center text-xs text-zinc-400 dark:text-zinc-500",
+                                children: "No components found"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/DesignSystem/components/DesignSystemPage.d.ts

@@ -0,0 +1,2 @@
+import type { DesignSystemPageProps } from '../types';
+export declare function DesignSystemPage({ registry, className }: DesignSystemPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/DesignSystem/components/DesignSystemPage.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { useDesignSystemStore } from '../store';
+import { designSystemTheme } from '../theme';
+import { ComponentCanvas } from './ComponentCanvas';
+import { ComponentSidebar } from './ComponentSidebar';
+import { PropsPanel } from './PropsPanel';
+export function DesignSystemPage({ registry, className }) {
+    const store = useDesignSystemStore();
+    const t = designSystemTheme.layout;
+    return /*#__PURE__*/ _jsx("section", {
+        className: cn(t.container, className),
+        children: /*#__PURE__*/ _jsxs("section", {
+            className: t.wrapper,
+            children: [
+                /*#__PURE__*/ _jsx(ComponentSidebar, {
+                    registry: registry
+                }),
+                /*#__PURE__*/ _jsx(ComponentCanvas, {
+                    registry: registry
+                }),
+                store.propsPanelOpen && /*#__PURE__*/ _jsx(PropsPanel, {
+                    registry: registry
+                })
+            ]
+        })
+    });
+}

package/dist/fe/components/DesignSystem/components/PropsPanel.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentEntry } from '../types';
+type PropsPanelProps = {
+    registry: ComponentEntry[];
+};
+export declare function PropsPanel({ registry }: PropsPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};