@solidxai/core-ui 0.1.5-beta.8 → 0.1.6

package/dist/routes/pages/studio/StudioLandingPage.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSolidLayoutRegistry } from "../../SolidLayoutRegistry";
+import { ChatIcon } from "../../../components/layout/SolidAiStudioLayout";
+import { env } from "../../../adapters/env";
+// ── Icons ──────────────────────────────────────────────────────────────────────
+var ArrowIcon = function () { return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 7h9M8 3.5l3.5 3.5L8 10.5", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) })); };
+var LayoutPlaceholderIcon = function () { return (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1", y: "1", width: "16", height: "16", rx: "2.5", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("path", { d: "M1 6h16", stroke: "currentColor", strokeWidth: "1.1" }), _jsx("path", { d: "M6 6v11", stroke: "currentColor", strokeWidth: "1.1" })] })); };
+var NoLayoutIcon = function () { return (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "2", width: "28", height: "28", rx: "4", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.4", strokeDasharray: "4 3" }), _jsx("path", { d: "M11 16h10M16 11v10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", opacity: "0.5" })] })); };
+var GridViewIcon = function () { return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1", y: "1", width: "5.5", height: "5.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("rect", { x: "8.5", y: "1", width: "5.5", height: "5.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("rect", { x: "1", y: "8.5", width: "5.5", height: "5.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("rect", { x: "8.5", y: "8.5", width: "5.5", height: "5.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" })] })); };
+var ListViewIcon = function () { return (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "1", y: "2.5", width: "13", height: "2.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("rect", { x: "1", y: "6.25", width: "13", height: "2.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" }), _jsx("rect", { x: "1", y: "10", width: "13", height: "2.5", rx: "1.2", stroke: "currentColor", strokeWidth: "1.3" })] })); };
+// ── Per-card accent colours (cycles by index) ──────────────────────────────────
+var CARD_ACCENTS = [
+    { bg: "hsl(224 70% 54%)", cls: "solid-studio-home-card-icon--backend" },
+    { bg: "hsl(158 64% 42%)", cls: "solid-studio-home-card-icon--list" },
+    { bg: "hsl(32  95% 48%)", cls: "solid-studio-home-card-icon--kanban" },
+    { bg: "hsl(270 65% 58%)", cls: "solid-studio-home-card-icon--form" },
+    { bg: "hsl(199 89% 48%)", cls: "solid-studio-home-card-icon--tree" },
+    { bg: "hsl(215 25% 52%)", cls: "solid-studio-home-card-icon--settings" },
+];
+// ── Generic layout wireframe thumbnail ────────────────────────────────────────
+function LayoutThumb(_a) {
+    var accentColor = _a.accentColor, title = _a.title;
+    var initials = title
+        .split(/\s+/)
+        .slice(0, 2)
+        .map(function (w) { var _a, _b; return (_b = (_a = w[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ""; })
+        .join("");
+    return (_jsxs("svg", { className: "solid-studio-home-card-thumb", viewBox: "0 0 280 122", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { width: "280", height: "122", fill: "var(--sidebar-background)" }), _jsx("rect", { width: "40", height: "122", fill: "var(--border)", opacity: "0.7" }), _jsx("rect", { x: "7", y: "14", width: "26", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.45" }), _jsx("rect", { x: "7", y: "26", width: "26", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.28" }), _jsx("rect", { x: "7", y: "38", width: "26", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.28" }), _jsx("rect", { x: "7", y: "50", width: "26", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.28" }), _jsx("rect", { x: "40", y: "0", width: "240", height: "18", fill: "var(--border)", opacity: "0.5" }), _jsx("rect", { x: "48", y: "22", width: "224", height: "28", rx: "3", fill: accentColor, opacity: "0.12" }), _jsx("rect", { x: "56", y: "30", width: "80", height: "7", rx: "2", fill: accentColor, opacity: "0.45" }), _jsx("rect", { x: "56", y: "40", width: "50", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.3" }), _jsx("rect", { x: "48", y: "58", width: "70", height: "58", rx: "3", fill: "var(--card)", stroke: "var(--border)", strokeWidth: "0.8" }), _jsx("rect", { x: "126", y: "58", width: "70", height: "58", rx: "3", fill: "var(--card)", stroke: "var(--border)", strokeWidth: "0.8" }), _jsx("rect", { x: "204", y: "58", width: "68", height: "26", rx: "3", fill: "var(--card)", stroke: "var(--border)", strokeWidth: "0.8" }), _jsx("rect", { x: "204", y: "90", width: "68", height: "26", rx: "3", fill: "var(--card)", stroke: "var(--border)", strokeWidth: "0.8" }), _jsx("rect", { x: "54", y: "65", width: "48", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.28" }), _jsx("rect", { x: "54", y: "73", width: "36", height: "3", rx: "2", fill: "var(--muted)", opacity: "0.2" }), _jsx("rect", { x: "132", y: "65", width: "48", height: "4", rx: "2", fill: "var(--muted)", opacity: "0.28" }), _jsx("rect", { x: "132", y: "73", width: "36", height: "3", rx: "2", fill: "var(--muted)", opacity: "0.2" }), _jsx("circle", { cx: "60", cy: "98", r: "9", fill: accentColor, opacity: "0.18" }), _jsx("text", { x: "60", y: "102", textAnchor: "middle", fontSize: "7", fontWeight: "700", fill: accentColor, opacity: "0.8", fontFamily: "system-ui, sans-serif", children: initials })] }));
+}
+// ── Card Components (shadcn-inspired) ────────────────────────────────────────
+function Card(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return (_jsx("div", { className: "solid-studio-card ".concat(className), children: children }));
+}
+function CardHeader(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return _jsx("div", { className: "solid-studio-card-header ".concat(className), children: children });
+}
+function CardTitle(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return _jsx("h3", { className: "solid-studio-card-title ".concat(className), children: children });
+}
+function CardDescription(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return _jsx("p", { className: "solid-studio-card-description ".concat(className), children: children });
+}
+function CardContent(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return _jsx("div", { className: "solid-studio-card-content ".concat(className), children: children });
+}
+function CardFooter(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return _jsx("div", { className: "solid-studio-card-footer ".concat(className), children: children });
+}
+// ── Empty state ───────────────────────────────────────────────────────────────
+function EmptyState() {
+    return (_jsx("div", { className: "solid-studio-landing-empty-container", children: _jsxs(Card, { className: "solid-studio-landing-empty-card", children: [_jsxs(CardHeader, { className: "solid-studio-landing-empty-header", children: [_jsx("div", { className: "solid-studio-home-badge", style: { marginBottom: '12px' }, children: "Frontend Studio" }), _jsx(CardTitle, { children: "Frontend layout will appear here" }), _jsx(CardDescription, { children: "Register your app layouts to explore and customize them in the Studio." })] }), _jsxs(CardContent, { className: "solid-studio-landing-empty-body", children: [_jsxs("div", { className: "solid-studio-landing-empty-primary-action", children: [_jsxs("p", { children: ["To get started, use the ", _jsx("strong", { children: "SolidX AI Agent" }), " to add a new custom layout."] }), _jsxs("button", { type: "button", className: "solid-studio-empty-cta-button", onClick: function () {
+                                        var aiUrl = env("VITE_SOLIDX_AI_URL");
+                                        if (aiUrl)
+                                            window.open(aiUrl, "_blank");
+                                    }, children: [_jsx(ChatIcon, {}), _jsx("span", { children: "Open AI Chat" }), _jsx(ArrowIcon, {})] })] }), _jsx("div", { className: "solid-studio-landing-empty-divider" }), _jsxs("div", { className: "solid-studio-landing-empty-details", children: [_jsxs("p", { className: "solid-studio-landing-empty-instruction", children: ["Any route with a ", _jsx("code", { children: "path" }), " and ", _jsx("code", { children: "children" }), " passed to", " ", _jsx("code", { children: "getSolidRoutes()" }), " will automatically appear as a card."] }), _jsx("div", { className: "solid-studio-landing-snippet", children: _jsx("pre", { children: _jsx("code", { children: "// AppRoutes.tsx\nconst extraRoutes = [\n  {\n    path: \"/my-layout\",\n    element: <MyLayout />,\n    children: [{ index: true, element: <MyPage /> }],\n  },\n];\n\ngetSolidRoutes({ extraRoutes });" }) }) }), _jsxs("p", { className: "solid-studio-landing-hint", children: [_jsx("strong", { children: "Pro Tip:" }), " Add ", _jsxs("code", { children: ["handle: ", "{ title, description }"] }), " to a route to customize its appearance."] })] })] })] }) }));
+}
+// ── Card ──────────────────────────────────────────────────────────────────────
+function LayoutCard(_a) {
+    var entry = _a.entry, index = _a.index, listView = _a.listView;
+    var navigate = useNavigate();
+    var accent = CARD_ACCENTS[index % CARD_ACCENTS.length];
+    return (_jsxs("button", { type: "button", className: "solid-studio-home-card".concat(listView ? " solid-studio-home-card--list" : ""), onClick: function () { return navigate(entry.to); }, "aria-label": "Open ".concat(entry.title), children: [!listView && (_jsxs("div", { className: "solid-studio-home-card-image-wrap", children: [_jsx(LayoutThumb, { accentColor: accent.bg, title: entry.title }), _jsx("div", { className: "solid-studio-home-card-image-overlay" })] })), _jsxs("div", { className: "solid-studio-home-card-body", children: [_jsx("div", { className: "solid-studio-home-card-icon ".concat(accent.cls), children: _jsx(LayoutPlaceholderIcon, {}) }), _jsxs("div", { className: "solid-studio-home-card-content", children: [_jsx("span", { className: "solid-studio-home-card-title", children: entry.title }), entry.description && (_jsx("span", { className: "solid-studio-home-card-desc", children: entry.description })), _jsx("span", { className: "solid-studio-home-card-desc", style: { opacity: 0.6, fontSize: 11 }, children: entry.to })] }), _jsxs("div", { className: "solid-studio-home-card-cta", children: [_jsx("span", { children: "Open" }), _jsx(ArrowIcon, {})] })] })] }));
+}
+// ── Page ──────────────────────────────────────────────────────────────────────
+export function StudioLandingPage() {
+    var layouts = useSolidLayoutRegistry();
+    var _a = useState(false), listView = _a[0], setListView = _a[1];
+    return (_jsx("div", { className: "solid-studio-home solid-studio-home--top", children: _jsxs("div", { className: "solid-studio-home-inner solid-studio-home-inner--fluid", children: [_jsx("div", { className: "solid-studio-home-toolbar", children: layouts.length > 0 && (_jsxs("div", { className: "solid-studio-home-toolbar-right", children: [_jsx("button", { type: "button", className: "solid-studio-home-view-btn".concat(!listView ? " solid-studio-home-view-btn--active" : ""), onClick: function () { return setListView(false); }, "aria-label": "Grid view", title: "Grid view", children: _jsx(GridViewIcon, {}) }), _jsx("button", { type: "button", className: "solid-studio-home-view-btn".concat(listView ? " solid-studio-home-view-btn--active" : ""), onClick: function () { return setListView(true); }, "aria-label": "List view", title: "List view", children: _jsx(ListViewIcon, {}) })] })) }), layouts.length === 0 ? (_jsx(EmptyState, {})) : listView ? (_jsx("div", { className: "solid-studio-home-cards--list", children: layouts.map(function (entry, i) { return (_jsx(LayoutCard, { entry: entry, index: i, listView: true }, entry.path)); }) })) : (_jsx("div", { className: "solid-studio-home-cards solid-studio-home-cards--fluid", children: layouts.map(function (entry, i) { return (_jsx(LayoutCard, { entry: entry, index: i, listView: false }, entry.path)); }) }))] }) }));
+}
+//# sourceMappingURL=StudioLandingPage.js.map

package/dist/routes/pages/studio/StudioLandingPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioLandingPage.js","sourceRoot":"","sources":["../../../../src/routes/pages/studio/StudioLandingPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useSolidLayoutRegistry } from \"../../SolidLayoutRegistry\";\nimport type { SolidLayoutEntry } from \"../../SolidLayoutRegistry\";\nimport { ChatIcon } from \"@/components/layout/SolidAiStudioLayout\";\nimport { env } from \"../../../adapters/env\";\n\n// ── Icons ──────────────────────────────────────────────────────────────────────\n\nconst ArrowIcon = () => (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n    <path d=\"M2.5 7h9M8 3.5l3.5 3.5L8 10.5\" stroke=\"currentColor\" strokeWidth=\"1.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\nconst LayoutPlaceholderIcon = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n    <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"2.5\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <path d=\"M1 6h16\" stroke=\"currentColor\" strokeWidth=\"1.1\" />\n    <path d=\"M6 6v11\" stroke=\"currentColor\" strokeWidth=\"1.1\" />\n  </svg>\n);\n\nconst NoLayoutIcon = () => (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n    <rect x=\"2\" y=\"2\" width=\"28\" height=\"28\" rx=\"4\" stroke=\"currentColor\" strokeWidth=\"1.5\" opacity=\"0.4\" strokeDasharray=\"4 3\" />\n    <path d=\"M11 16h10M16 11v10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" opacity=\"0.5\" />\n  </svg>\n);\n\nconst GridViewIcon = () => (\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n    <rect x=\"1\" y=\"1\" width=\"5.5\" height=\"5.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <rect x=\"8.5\" y=\"1\" width=\"5.5\" height=\"5.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <rect x=\"1\" y=\"8.5\" width=\"5.5\" height=\"5.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <rect x=\"8.5\" y=\"8.5\" width=\"5.5\" height=\"5.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n  </svg>\n);\n\nconst ListViewIcon = () => (\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" aria-hidden=\"true\">\n    <rect x=\"1\" y=\"2.5\" width=\"13\" height=\"2.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <rect x=\"1\" y=\"6.25\" width=\"13\" height=\"2.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n    <rect x=\"1\" y=\"10\" width=\"13\" height=\"2.5\" rx=\"1.2\" stroke=\"currentColor\" strokeWidth=\"1.3\" />\n  </svg>\n);\n\n// ── Per-card accent colours (cycles by index) ──────────────────────────────────\n\nconst CARD_ACCENTS = [\n  { bg: \"hsl(224 70% 54%)\", cls: \"solid-studio-home-card-icon--backend\" },\n  { bg: \"hsl(158 64% 42%)\", cls: \"solid-studio-home-card-icon--list\" },\n  { bg: \"hsl(32  95% 48%)\", cls: \"solid-studio-home-card-icon--kanban\" },\n  { bg: \"hsl(270 65% 58%)\", cls: \"solid-studio-home-card-icon--form\" },\n  { bg: \"hsl(199 89% 48%)\", cls: \"solid-studio-home-card-icon--tree\" },\n  { bg: \"hsl(215 25% 52%)\", cls: \"solid-studio-home-card-icon--settings\" },\n];\n\n// ── Generic layout wireframe thumbnail ────────────────────────────────────────\n\nfunction LayoutThumb({ accentColor, title }: { accentColor: string; title: string }) {\n  const initials = title\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0]?.toUpperCase() ?? \"\")\n    .join(\"\");\n\n  return (\n    <svg\n      className=\"solid-studio-home-card-thumb\"\n      viewBox=\"0 0 280 122\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      {/* background */}\n      <rect width=\"280\" height=\"122\" fill=\"var(--sidebar-background)\" />\n\n      {/* sidebar */}\n      <rect width=\"40\" height=\"122\" fill=\"var(--border)\" opacity=\"0.7\" />\n      <rect x=\"7\" y=\"14\" width=\"26\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.45\" />\n      <rect x=\"7\" y=\"26\" width=\"26\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.28\" />\n      <rect x=\"7\" y=\"38\" width=\"26\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.28\" />\n      <rect x=\"7\" y=\"50\" width=\"26\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.28\" />\n\n      {/* top bar */}\n      <rect x=\"40\" y=\"0\" width=\"240\" height=\"18\" fill=\"var(--border)\" opacity=\"0.5\" />\n\n      {/* accent header band */}\n      <rect x=\"48\" y=\"22\" width=\"224\" height=\"28\" rx=\"3\" fill={accentColor} opacity=\"0.12\" />\n      <rect x=\"56\" y=\"30\" width=\"80\" height=\"7\" rx=\"2\" fill={accentColor} opacity=\"0.45\" />\n      <rect x=\"56\" y=\"40\" width=\"50\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.3\" />\n\n      {/* content blocks */}\n      <rect x=\"48\" y=\"58\" width=\"70\" height=\"58\" rx=\"3\" fill=\"var(--card)\" stroke=\"var(--border)\" strokeWidth=\"0.8\" />\n      <rect x=\"126\" y=\"58\" width=\"70\" height=\"58\" rx=\"3\" fill=\"var(--card)\" stroke=\"var(--border)\" strokeWidth=\"0.8\" />\n      <rect x=\"204\" y=\"58\" width=\"68\" height=\"26\" rx=\"3\" fill=\"var(--card)\" stroke=\"var(--border)\" strokeWidth=\"0.8\" />\n      <rect x=\"204\" y=\"90\" width=\"68\" height=\"26\" rx=\"3\" fill=\"var(--card)\" stroke=\"var(--border)\" strokeWidth=\"0.8\" />\n\n      {/* inner muted lines */}\n      <rect x=\"54\" y=\"65\" width=\"48\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.28\" />\n      <rect x=\"54\" y=\"73\" width=\"36\" height=\"3\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.2\" />\n      <rect x=\"132\" y=\"65\" width=\"48\" height=\"4\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.28\" />\n      <rect x=\"132\" y=\"73\" width=\"36\" height=\"3\" rx=\"2\" fill=\"var(--muted)\" opacity=\"0.2\" />\n\n      {/* initials badge */}\n      <circle cx=\"60\" cy=\"98\" r=\"9\" fill={accentColor} opacity=\"0.18\" />\n      <text\n        x=\"60\"\n        y=\"102\"\n        textAnchor=\"middle\"\n        fontSize=\"7\"\n        fontWeight=\"700\"\n        fill={accentColor}\n        opacity=\"0.8\"\n        fontFamily=\"system-ui, sans-serif\"\n      >\n        {initials}\n      </text>\n    </svg>\n  );\n}\n\n// ── Card Components (shadcn-inspired) ────────────────────────────────────────\n\nfunction Card({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return (\n    <div className={`solid-studio-card ${className}`}>\n      {children}\n    </div>\n  );\n}\n\nfunction CardHeader({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return <div className={`solid-studio-card-header ${className}`}>{children}</div>;\n}\n\nfunction CardTitle({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return <h3 className={`solid-studio-card-title ${className}`}>{children}</h3>;\n}\n\nfunction CardDescription({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return <p className={`solid-studio-card-description ${className}`}>{children}</p>;\n}\n\nfunction CardContent({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return <div className={`solid-studio-card-content ${className}`}>{children}</div>;\n}\n\nfunction CardFooter({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n  return <div className={`solid-studio-card-footer ${className}`}>{children}</div>;\n}\n\n// ── Empty state ───────────────────────────────────────────────────────────────\n\nfunction EmptyState() {\n  return (\n    <div className=\"solid-studio-landing-empty-container\">\n      <Card className=\"solid-studio-landing-empty-card\">\n        <CardHeader className=\"solid-studio-landing-empty-header\">\n          <div className=\"solid-studio-home-badge\" style={{ marginBottom: '12px' }}>Frontend Studio</div>\n          <CardTitle>Frontend layout will appear here</CardTitle>\n          <CardDescription>\n            Register your app layouts to explore and customize them in the Studio.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"solid-studio-landing-empty-body\">\n          <div className=\"solid-studio-landing-empty-primary-action\">\n            <p>To get started, use the <strong>SolidX AI Agent</strong> to add a new custom layout.</p>\n            <button\n              type=\"button\"\n              className=\"solid-studio-empty-cta-button\"\n              onClick={() => {\n                const aiUrl = env(\"VITE_SOLIDX_AI_URL\");\n                if (aiUrl) window.open(aiUrl, \"_blank\");\n              }}\n            >\n              <ChatIcon />\n              <span>Open AI Chat</span>\n              <ArrowIcon />\n            </button>\n          </div>\n\n          <div className=\"solid-studio-landing-empty-divider\" />\n\n          <div className=\"solid-studio-landing-empty-details\">\n            <p className=\"solid-studio-landing-empty-instruction\">\n              Any route with a <code>path</code> and <code>children</code> passed to{\" \"}\n              <code>getSolidRoutes()</code> will automatically appear as a card.\n            </p>\n            <div className=\"solid-studio-landing-snippet\">\n              <pre>\n                <code>{`// AppRoutes.tsx\\nconst extraRoutes = [\\n  {\\n    path: \"/my-layout\",\\n    element: <MyLayout />,\\n    children: [{ index: true, element: <MyPage /> }],\\n  },\\n];\\n\\ngetSolidRoutes({ extraRoutes });`}</code>\n              </pre>\n            </div>\n            <p className=\"solid-studio-landing-hint\">\n              <strong>Pro Tip:</strong> Add <code>handle: {`{ title, description }`}</code> to a route to customize its appearance.\n            </p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\n// ── Card ──────────────────────────────────────────────────────────────────────\n\nfunction LayoutCard({\n  entry,\n  index,\n  listView,\n}: {\n  entry: SolidLayoutEntry;\n  index: number;\n  listView: boolean;\n}) {\n  const navigate = useNavigate();\n  const accent = CARD_ACCENTS[index % CARD_ACCENTS.length];\n\n  return (\n    <button\n      type=\"button\"\n      className={`solid-studio-home-card${listView ? \" solid-studio-home-card--list\" : \"\"}`}\n      onClick={() => navigate(entry.to)}\n      aria-label={`Open ${entry.title}`}\n    >\n      {!listView && (\n        <div className=\"solid-studio-home-card-image-wrap\">\n          <LayoutThumb accentColor={accent.bg} title={entry.title} />\n          <div className=\"solid-studio-home-card-image-overlay\" />\n        </div>\n      )}\n      <div className=\"solid-studio-home-card-body\">\n        <div className={`solid-studio-home-card-icon ${accent.cls}`}>\n          <LayoutPlaceholderIcon />\n        </div>\n        <div className=\"solid-studio-home-card-content\">\n          <span className=\"solid-studio-home-card-title\">{entry.title}</span>\n          {entry.description && (\n            <span className=\"solid-studio-home-card-desc\">{entry.description}</span>\n          )}\n          <span className=\"solid-studio-home-card-desc\" style={{ opacity: 0.6, fontSize: 11 }}>\n            {entry.to}\n          </span>\n        </div>\n        <div className=\"solid-studio-home-card-cta\">\n          <span>Open</span>\n          <ArrowIcon />\n        </div>\n      </div>\n    </button>\n  );\n}\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\nexport function StudioLandingPage() {\n  const layouts = useSolidLayoutRegistry();\n  const [listView, setListView] = useState(false);\n\n  return (\n    <div className=\"solid-studio-home solid-studio-home--top\">\n      <div className=\"solid-studio-home-inner solid-studio-home-inner--fluid\">\n\n        {/* Toolbar: title left, view toggle right */}\n        <div className=\"solid-studio-home-toolbar\">\n          {/* <div className=\"solid-studio-home-toolbar-left\">\n            <div className=\"solid-studio-home-heading\">\n              <div className=\"solid-studio-home-badge\">Frontend Studio</div>\n              <h1>Frontend Layouts</h1>\n              <p>\n                {layouts.length > 0\n                  ? `${layouts.length} layout${layouts.length === 1 ? \"\" : \"s\"} registered in your app.`\n                  : \"Register your app layouts to explore them here.\"}\n              </p>\n            </div>\n          </div> */}\n          {layouts.length > 0 && (\n            <div className=\"solid-studio-home-toolbar-right\">\n              <button\n                type=\"button\"\n                className={`solid-studio-home-view-btn${!listView ? \" solid-studio-home-view-btn--active\" : \"\"}`}\n                onClick={() => setListView(false)}\n                aria-label=\"Grid view\"\n                title=\"Grid view\"\n              >\n                <GridViewIcon />\n              </button>\n              <button\n                type=\"button\"\n                className={`solid-studio-home-view-btn${listView ? \" solid-studio-home-view-btn--active\" : \"\"}`}\n                onClick={() => setListView(true)}\n                aria-label=\"List view\"\n                title=\"List view\"\n              >\n                <ListViewIcon />\n              </button>\n            </div>\n          )}\n        </div>\n\n        {layouts.length === 0 ? (\n          <EmptyState />\n        ) : listView ? (\n          <div className=\"solid-studio-home-cards--list\">\n            {layouts.map((entry, i) => (\n              <LayoutCard key={entry.path} entry={entry} index={i} listView />\n            ))}\n          </div>\n        ) : (\n          <div className=\"solid-studio-home-cards solid-studio-home-cards--fluid\">\n            {layouts.map((entry, i) => (\n              <LayoutCard key={entry.path} entry={entry} index={i} listView={false} />\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/routes/pages/studio/StudioLandingPage.tsx

@@ -0,0 +1,320 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSolidLayoutRegistry } from "../../SolidLayoutRegistry";
+import type { SolidLayoutEntry } from "../../SolidLayoutRegistry";
+import { ChatIcon } from "@/components/layout/SolidAiStudioLayout";
+import { env } from "../../../adapters/env";
+
+// ── Icons ──────────────────────────────────────────────────────────────────────
+
+const ArrowIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+    <path d="M2.5 7h9M8 3.5l3.5 3.5L8 10.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const LayoutPlaceholderIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+    <rect x="1" y="1" width="16" height="16" rx="2.5" stroke="currentColor" strokeWidth="1.3" />
+    <path d="M1 6h16" stroke="currentColor" strokeWidth="1.1" />
+    <path d="M6 6v11" stroke="currentColor" strokeWidth="1.1" />
+  </svg>
+);
+
+const NoLayoutIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+    <rect x="2" y="2" width="28" height="28" rx="4" stroke="currentColor" strokeWidth="1.5" opacity="0.4" strokeDasharray="4 3" />
+    <path d="M11 16h10M16 11v10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.5" />
+  </svg>
+);
+
+const GridViewIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+    <rect x="1" y="1" width="5.5" height="5.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="8.5" y="1" width="5.5" height="5.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="1" y="8.5" width="5.5" height="5.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="8.5" y="8.5" width="5.5" height="5.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+  </svg>
+);
+
+const ListViewIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+    <rect x="1" y="2.5" width="13" height="2.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="1" y="6.25" width="13" height="2.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+    <rect x="1" y="10" width="13" height="2.5" rx="1.2" stroke="currentColor" strokeWidth="1.3" />
+  </svg>
+);
+
+// ── Per-card accent colours (cycles by index) ──────────────────────────────────
+
+const CARD_ACCENTS = [
+  { bg: "hsl(224 70% 54%)", cls: "solid-studio-home-card-icon--backend" },
+  { bg: "hsl(158 64% 42%)", cls: "solid-studio-home-card-icon--list" },
+  { bg: "hsl(32  95% 48%)", cls: "solid-studio-home-card-icon--kanban" },
+  { bg: "hsl(270 65% 58%)", cls: "solid-studio-home-card-icon--form" },
+  { bg: "hsl(199 89% 48%)", cls: "solid-studio-home-card-icon--tree" },
+  { bg: "hsl(215 25% 52%)", cls: "solid-studio-home-card-icon--settings" },
+];
+
+// ── Generic layout wireframe thumbnail ────────────────────────────────────────
+
+function LayoutThumb({ accentColor, title }: { accentColor: string; title: string }) {
+  const initials = title
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() ?? "")
+    .join("");
+
+  return (
+    <svg
+      className="solid-studio-home-card-thumb"
+      viewBox="0 0 280 122"
+      fill="none"
+      aria-hidden="true"
+    >
+      {/* background */}
+      <rect width="280" height="122" fill="var(--sidebar-background)" />
+
+      {/* sidebar */}
+      <rect width="40" height="122" fill="var(--border)" opacity="0.7" />
+      <rect x="7" y="14" width="26" height="4" rx="2" fill="var(--muted)" opacity="0.45" />
+      <rect x="7" y="26" width="26" height="4" rx="2" fill="var(--muted)" opacity="0.28" />
+      <rect x="7" y="38" width="26" height="4" rx="2" fill="var(--muted)" opacity="0.28" />
+      <rect x="7" y="50" width="26" height="4" rx="2" fill="var(--muted)" opacity="0.28" />
+
+      {/* top bar */}
+      <rect x="40" y="0" width="240" height="18" fill="var(--border)" opacity="0.5" />
+
+      {/* accent header band */}
+      <rect x="48" y="22" width="224" height="28" rx="3" fill={accentColor} opacity="0.12" />
+      <rect x="56" y="30" width="80" height="7" rx="2" fill={accentColor} opacity="0.45" />
+      <rect x="56" y="40" width="50" height="4" rx="2" fill="var(--muted)" opacity="0.3" />
+
+      {/* content blocks */}
+      <rect x="48" y="58" width="70" height="58" rx="3" fill="var(--card)" stroke="var(--border)" strokeWidth="0.8" />
+      <rect x="126" y="58" width="70" height="58" rx="3" fill="var(--card)" stroke="var(--border)" strokeWidth="0.8" />
+      <rect x="204" y="58" width="68" height="26" rx="3" fill="var(--card)" stroke="var(--border)" strokeWidth="0.8" />
+      <rect x="204" y="90" width="68" height="26" rx="3" fill="var(--card)" stroke="var(--border)" strokeWidth="0.8" />
+
+      {/* inner muted lines */}
+      <rect x="54" y="65" width="48" height="4" rx="2" fill="var(--muted)" opacity="0.28" />
+      <rect x="54" y="73" width="36" height="3" rx="2" fill="var(--muted)" opacity="0.2" />
+      <rect x="132" y="65" width="48" height="4" rx="2" fill="var(--muted)" opacity="0.28" />
+      <rect x="132" y="73" width="36" height="3" rx="2" fill="var(--muted)" opacity="0.2" />
+
+      {/* initials badge */}
+      <circle cx="60" cy="98" r="9" fill={accentColor} opacity="0.18" />
+      <text
+        x="60"
+        y="102"
+        textAnchor="middle"
+        fontSize="7"
+        fontWeight="700"
+        fill={accentColor}
+        opacity="0.8"
+        fontFamily="system-ui, sans-serif"
+      >
+        {initials}
+      </text>
+    </svg>
+  );
+}
+
+// ── Card Components (shadcn-inspired) ────────────────────────────────────────
+
+function Card({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`solid-studio-card ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+function CardHeader({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <div className={`solid-studio-card-header ${className}`}>{children}</div>;
+}
+
+function CardTitle({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <h3 className={`solid-studio-card-title ${className}`}>{children}</h3>;
+}
+
+function CardDescription({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <p className={`solid-studio-card-description ${className}`}>{children}</p>;
+}
+
+function CardContent({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <div className={`solid-studio-card-content ${className}`}>{children}</div>;
+}
+
+function CardFooter({ children, className = "" }: { children: React.ReactNode; className?: string }) {
+  return <div className={`solid-studio-card-footer ${className}`}>{children}</div>;
+}
+
+// ── Empty state ───────────────────────────────────────────────────────────────
+
+function EmptyState() {
+  return (
+    <div className="solid-studio-landing-empty-container">
+      <Card className="solid-studio-landing-empty-card">
+        <CardHeader className="solid-studio-landing-empty-header">
+          <div className="solid-studio-home-badge" style={{ marginBottom: '12px' }}>Frontend Studio</div>
+          <CardTitle>Frontend layout will appear here</CardTitle>
+          <CardDescription>
+            Register your app layouts to explore and customize them in the Studio.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="solid-studio-landing-empty-body">
+          <div className="solid-studio-landing-empty-primary-action">
+            <p>To get started, use the <strong>SolidX AI Agent</strong> to add a new custom layout.</p>
+            <button
+              type="button"
+              className="solid-studio-empty-cta-button"
+              onClick={() => {
+                const aiUrl = env("VITE_SOLIDX_AI_URL");
+                if (aiUrl) window.open(aiUrl, "_blank");
+              }}
+            >
+              <ChatIcon />
+              <span>Open AI Chat</span>
+              <ArrowIcon />
+            </button>
+          </div>
+
+          <div className="solid-studio-landing-empty-divider" />
+
+          <div className="solid-studio-landing-empty-details">
+            <p className="solid-studio-landing-empty-instruction">
+              Any route with a <code>path</code> and <code>children</code> passed to{" "}
+              <code>getSolidRoutes()</code> will automatically appear as a card.
+            </p>
+            <div className="solid-studio-landing-snippet">
+              <pre>
+                <code>{`// AppRoutes.tsx\nconst extraRoutes = [\n  {\n    path: "/my-layout",\n    element: <MyLayout />,\n    children: [{ index: true, element: <MyPage /> }],\n  },\n];\n\ngetSolidRoutes({ extraRoutes });`}</code>
+              </pre>
+            </div>
+            <p className="solid-studio-landing-hint">
+              <strong>Pro Tip:</strong> Add <code>handle: {`{ title, description }`}</code> to a route to customize its appearance.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// ── Card ──────────────────────────────────────────────────────────────────────
+
+function LayoutCard({
+  entry,
+  index,
+  listView,
+}: {
+  entry: SolidLayoutEntry;
+  index: number;
+  listView: boolean;
+}) {
+  const navigate = useNavigate();
+  const accent = CARD_ACCENTS[index % CARD_ACCENTS.length];
+
+  return (
+    <button
+      type="button"
+      className={`solid-studio-home-card${listView ? " solid-studio-home-card--list" : ""}`}
+      onClick={() => navigate(entry.to)}
+      aria-label={`Open ${entry.title}`}
+    >
+      {!listView && (
+        <div className="solid-studio-home-card-image-wrap">
+          <LayoutThumb accentColor={accent.bg} title={entry.title} />
+          <div className="solid-studio-home-card-image-overlay" />
+        </div>
+      )}
+      <div className="solid-studio-home-card-body">
+        <div className={`solid-studio-home-card-icon ${accent.cls}`}>
+          <LayoutPlaceholderIcon />
+        </div>
+        <div className="solid-studio-home-card-content">
+          <span className="solid-studio-home-card-title">{entry.title}</span>
+          {entry.description && (
+            <span className="solid-studio-home-card-desc">{entry.description}</span>
+          )}
+          <span className="solid-studio-home-card-desc" style={{ opacity: 0.6, fontSize: 11 }}>
+            {entry.to}
+          </span>
+        </div>
+        <div className="solid-studio-home-card-cta">
+          <span>Open</span>
+          <ArrowIcon />
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ── Page ──────────────────────────────────────────────────────────────────────
+
+export function StudioLandingPage() {
+  const layouts = useSolidLayoutRegistry();
+  const [listView, setListView] = useState(false);
+
+  return (
+    <div className="solid-studio-home solid-studio-home--top">
+      <div className="solid-studio-home-inner solid-studio-home-inner--fluid">
+
+        {/* Toolbar: title left, view toggle right */}
+        <div className="solid-studio-home-toolbar">
+          {/* <div className="solid-studio-home-toolbar-left">
+            <div className="solid-studio-home-heading">
+              <div className="solid-studio-home-badge">Frontend Studio</div>
+              <h1>Frontend Layouts</h1>
+              <p>
+                {layouts.length > 0
+                  ? `${layouts.length} layout${layouts.length === 1 ? "" : "s"} registered in your app.`
+                  : "Register your app layouts to explore them here."}
+              </p>
+            </div>
+          </div> */}
+          {layouts.length > 0 && (
+            <div className="solid-studio-home-toolbar-right">
+              <button
+                type="button"
+                className={`solid-studio-home-view-btn${!listView ? " solid-studio-home-view-btn--active" : ""}`}
+                onClick={() => setListView(false)}
+                aria-label="Grid view"
+                title="Grid view"
+              >
+                <GridViewIcon />
+              </button>
+              <button
+                type="button"
+                className={`solid-studio-home-view-btn${listView ? " solid-studio-home-view-btn--active" : ""}`}
+                onClick={() => setListView(true)}
+                aria-label="List view"
+                title="List view"
+              >
+                <ListViewIcon />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {layouts.length === 0 ? (
+          <EmptyState />
+        ) : listView ? (
+          <div className="solid-studio-home-cards--list">
+            {layouts.map((entry, i) => (
+              <LayoutCard key={entry.path} entry={entry} index={i} listView />
+            ))}
+          </div>
+        ) : (
+          <div className="solid-studio-home-cards solid-studio-home-cards--fluid">
+            {layouts.map((entry, i) => (
+              <LayoutCard key={entry.path} entry={entry} index={i} listView={false} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidxai/core-ui",
-  "version": "0.1.5-beta.8",
+  "version": "0.1.6",
   "scripts": {
     "prebuild": "npm run copy-resources && npm run copy-styles",
     "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",