ui-lab-registry 0.3.44 → 0.3.46

package/src/elements/foundation/Sidebar/index.tsx

@@ -50,7 +50,4 @@ export function getPreview(): React.ReactNode {
 export const metadata = baseMetadata;
 export default elementMetadata;
 
-export { BasicSidebar } from './variations/index.js';
-export type { SidebarVariations } from './variations/index.js';
 
-export { DEMO_MAP, variationComponentMap } from './variations/index.js';

package/src/elements/foundation/TestStructure/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { ElementMetadata } from '../../../types.js';
+import variationsData from './variations.json' with { type: 'json' };
+
+const baseMetadata = {
+  id: 'test-structure',
+  name: 'Test Structure',
+  description: 'Nested multi-file layout fixture used to verify the workshop file tree panel.',
+  category: 'layout' as const,
+  tags: ['test', 'nested', 'layout', 'tree'],
+  layout: {
+    layoutClass: 'test-structure',
+    columnSpan: 3,
+    rowSpan: 6,
+  },
+  componentDependencies: [],
+};
+
+const elementMetadata: ElementMetadata = {
+  ...baseMetadata,
+  variants: Object.entries(variationsData).map(([_key, variation]: any) => ({
+    name: variation.name,
+    description: variation.description,
+    demoPath: variation.demoPath,
+    files: variation.files,
+  })),
+};
+
+export function getPreview(): React.ReactNode {
+  return (
+    <div className="flex flex-col gap-3 w-full rounded-sm border border-background-700 bg-background-950 p-3">
+      <div className="h-8 rounded-sm border border-background-700 bg-background-900" />
+      <div className="grid grid-cols-[14rem_1fr] gap-3">
+        <div className="space-y-2 rounded-sm border border-background-700 bg-background-900 p-2">
+          <div className="h-3 w-3/4 rounded-sm bg-background-700" />
+          <div className="h-3 w-5/6 rounded-sm bg-background-700/80" />
+          <div className="h-3 w-2/3 rounded-sm bg-background-700/70" />
+        </div>
+        <div className="space-y-3 rounded-sm border border-background-700 bg-background-900 p-3">
+          <div className="h-3 w-32 rounded-sm bg-background-700" />
+          <div className="grid grid-cols-2 gap-2">
+            <div className="h-16 rounded-sm bg-background-800" />
+            <div className="h-16 rounded-sm bg-background-800" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const metadata = baseMetadata;
+export default elementMetadata;
+
+

package/src/elements/foundation/TestStructure/manifest.ts

@@ -0,0 +1,9 @@
+// AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
+// Generated by: scripts/generate-manifest.ts
+// To regenerate: pnpm generate
+
+export const DEMO_PATH_MAP = {
+  'teststructure-nested-structure': { variationKey: '01-nested-structure', exportName: 'NestedTestStructure' },
+} as const;
+
+export type DemoPaths = keyof typeof DEMO_PATH_MAP;

package/src/elements/foundation/TestStructure/metadata.json

@@ -0,0 +1,7 @@
+{
+  "id": "test-structure",
+  "name": "Test Structure",
+  "description": "Nested multi-file layout fixture used to verify the workshop file tree panel.",
+  "category": "layout",
+  "tags": ["test", "nested", "layout", "tree"]
+}

package/src/elements/foundation/TestStructure/variations.json

@@ -0,0 +1,16 @@
+{
+  "01-nested-structure": {
+    "name": "Nested Test Structure",
+    "description": "Nested Test Structure variation",
+    "demoPath": "teststructure-nested-structure",
+    "exportName": "NestedTestStructure",
+    "files": [
+      {
+        "filename": "index.tsx",
+        "language": "typescript",
+        "code": "\"use client\";\n\nimport React from 'react';\nimport { AppShell } from './shell/AppShell.js';\n\nexport function NestedTestStructure() {\n  return <AppShell />;\n}\n",
+        "isEntryPoint": true
+      }
+    ]
+  }
+}

package/src/elements/foundation/index.ts

@@ -1,26 +1,10 @@
 import headerElement from './Header/index.js';
 import sidebarElement from './Sidebar/index.js';
 import pageElement from './Page/index.js';
+import testStructureElement from './TestStructure/index.js';
+
+export { headerElement, sidebarElement, pageElement, testStructureElement };
 
-export { headerElement, sidebarElement, pageElement };
 
-export {
-  BasicHeader,
-  type HeaderVariations,
-  DEMO_MAP as HeaderDemoMap,
-  variationComponentMap as headerVariationComponentMap,
-} from './Header/index.js';
 
-export {
-  BasicSidebar,
-  type SidebarVariations,
-  DEMO_MAP as SidebarDemoMap,
-  variationComponentMap as sidebarVariationComponentMap,
-} from './Sidebar/index.js';
 
-export {
-  BasicPage,
-  type PageVariations,
-  DEMO_MAP as PageDemoMap,
-  variationComponentMap as pageVariationComponentMap,
-} from './Page/index.js';

package/src/elements/index.ts

@@ -25,6 +25,7 @@ import treeviewElement from './Elements/TreeView/index.js';
 import headerElement from './foundation/Header/index.js';
 import pageElement from './foundation/Page/index.js';
 import sidebarElement from './foundation/Sidebar/index.js';
+import teststructureElement from './foundation/TestStructure/index.js';
 
 // Type exports (preserved)
 export type { ElementMetadata, ElementVariant, ElementPackageMetadata } from '../types.js';
@@ -65,6 +66,7 @@ export const elementRegistry: ElementRegistry = {
   [headerElement.id]: headerElement,
   [pageElement.id]: pageElement,
   [sidebarElement.id]: sidebarElement,
+  [teststructureElement.id]: teststructureElement,
 };
 
 // Helper functions (preserved)

package/src/elements/packages.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FaBrain, FaBook, FaBox } from 'react-icons/fa6';
+import { FaBox } from 'react-icons/fa6';
 import type { ElementPackageRegistry } from '../types.js';
 
 function FoundationLogo({ className }: { className?: string }) {
@@ -18,18 +18,6 @@ function FoundationLogo({ className }: { className?: string }) {
   }));
 }
 
-function AILogo({ className }: { className?: string }) {
-  return React.createElement(FaBrain, {
-    className: className || 'w-6 h-6 text-foreground-200',
-  });
-}
-
-function DocumentationLogo({ className }: { className?: string }) {
-  return React.createElement(FaBook, {
-    className: className || 'w-6 h-6 text-foreground-200',
-  });
-}
-
 function ElementsLogo({ className }: { className?: string }) {
   return React.createElement(FaBox, {
     className: className || 'w-6 h-6 text-foreground-200',
@@ -81,54 +69,6 @@ export const elementPackages: ElementPackageRegistry = {
       }));
     },
   },
-  ai: {
-    id: 'ai',
-    name: 'AI',
-    description: 'Ship AI features fast. Chat interfaces, streaming responses, chain-of-thought displays.',
-    tags: ['ai', 'chat', 'interactive'],
-    elements: ['chat', 'chainofthought', 'aichatinput'],
-    layout: {
-      columnSpan: 1,
-      rowSpan: 1,
-    },
-    pricing: {
-      price: 59.99,
-      features: ['Full chat UI with message threading', 'Chain-of-thought visualization', 'Rich input with attachments', 'Built-in streaming support', 'Works with any LLM provider'],
-      gumroadProductId: 'ai-elements',
-    },
-    gumroadProductId: 'ai-elements',
-    getPreview: () => {
-      return () => React.createElement('div', {
-        className: 'flex items-center justify-center h-full w-full',
-      }, React.createElement(AILogo, {
-        className: 'w-10 h-10 text-foreground-200',
-      }));
-    },
-  },
-  documentation: {
-    id: 'documentation',
-    name: 'Documentation',
-    description: 'Build docs sites in hours. Auto-generated TOCs, copy buttons, article navigation.',
-    tags: ['documentation', 'reference', 'content'],
-    elements: ['toc', 'copypage', 'nextarticle'],
-    layout: {
-      columnSpan: 1,
-      rowSpan: 1,
-    },
-    pricing: {
-      price: 49.99,
-      features: ['Scroll-synced table of contents', 'One-click page copy', 'Prev/next article links', 'Syntax highlighting ready', 'MDX-friendly'],
-      gumroadProductId: 'documentation-elements',
-    },
-    gumroadProductId: 'documentation-elements',
-    getPreview: () => {
-      return () => React.createElement('div', {
-        className: 'flex items-center justify-center h-full w-full',
-      }, React.createElement(DocumentationLogo, {
-        className: 'w-10 h-10 text-foreground-200',
-      }));
-    },
-  },
 };
 
 export const getPackageById = (id: string) => elementPackages[id];