@backbay/glia 0.2.0-alpha.1

package/dist/workspace/registry/manifests/organisms.js

@@ -0,0 +1,267 @@
+/**
+ * Organism Component Manifests
+ * Complex, composite components
+ */
+export const commandPaletteManifest = {
+    id: "command-palette",
+    name: "CommandPalette",
+    version: "1.0.0",
+    category: "organisms",
+    purpose: ["navigation", "selection"],
+    description: "Keyboard-driven command palette (cmd+k style) for quick actions and navigation. Built on cmdk.",
+    bestFor: [
+        "Application command menus",
+        "Quick navigation",
+        "Action shortcuts",
+        "Search interfaces",
+    ],
+    avoid: [
+        "Mobile-only interfaces (keyboard required)",
+        "Simple dropdowns (overkill)",
+        "Contexts without keyboard users",
+    ],
+    props: {
+        open: {
+            type: "boolean",
+            description: "Controlled open state",
+            required: true,
+        },
+        onOpenChange: {
+            type: "function",
+            description: "Open state change handler",
+            required: true,
+        },
+        commands: {
+            type: "array",
+            description: "List of available commands",
+            required: true,
+            items: {
+                type: "object",
+                description: "Command definition",
+                properties: {
+                    id: { type: "string", description: "Unique command ID", required: true },
+                    label: { type: "string", description: "Display label", required: true },
+                    icon: { type: "ReactNode", description: "Command icon" },
+                    shortcut: { type: "string", description: "Keyboard shortcut hint" },
+                    group: { type: "string", description: "Command group name" },
+                    onSelect: { type: "function", description: "Selection handler" },
+                },
+            },
+        },
+        placeholder: {
+            type: "string",
+            description: "Search input placeholder",
+            default: "Type a command or search...",
+        },
+        emptyMessage: {
+            type: "string",
+            description: "Message when no results",
+            default: "No results found.",
+        },
+    },
+    slots: [],
+    validParents: [],
+    validChildren: [],
+    styles: ["glassmorphism", "minimal"],
+    supportsTheme: true,
+    cssVariables: ["--command-bg", "--command-border"],
+    interactions: ["keyboard", "click", "focus"],
+    a11y: ["keyboard-nav", "aria-labels", "focus-visible", "screen-reader"],
+    examples: [
+        {
+            name: "App Commands",
+            description: "Application command palette",
+            props: {
+                placeholder: "Search commands...",
+                commands: [
+                    { id: "new", label: "New File", shortcut: "Cmd+N", group: "File" },
+                    { id: "save", label: "Save", shortcut: "Cmd+S", group: "File" },
+                    { id: "settings", label: "Settings", shortcut: "Cmd+,", group: "App" },
+                ],
+            },
+            context: "Desktop applications, power-user interfaces",
+        },
+    ],
+    source: "components/organisms/CommandPalette/CommandPalette.tsx",
+    storybook: "organisms-commandpalette",
+    tags: ["command", "palette", "search", "keyboard", "navigation", "cmdk"],
+};
+export const glassPanelManifest = {
+    id: "glass-panel",
+    name: "GlassPanel",
+    version: "1.0.0",
+    category: "organisms",
+    purpose: ["container", "overlay"],
+    description: "Glassmorphism container with backdrop blur, borders, and optional glow effects.",
+    bestFor: [
+        "Card containers",
+        "Modal overlays",
+        "Sidebar panels",
+        "Floating UI elements",
+    ],
+    avoid: [
+        "Dense content areas (blur is heavy)",
+        "Low-end device targets",
+        "Text-heavy content (readability)",
+    ],
+    props: {
+        children: {
+            type: "ReactNode",
+            description: "Panel content",
+            required: true,
+        },
+        variant: {
+            type: "enum",
+            description: "Glass intensity",
+            enum: ["light", "medium", "heavy"],
+            default: "medium",
+        },
+        blur: {
+            type: "number",
+            description: "Backdrop blur amount (px)",
+            default: 12,
+        },
+        border: {
+            type: "boolean",
+            description: "Show border",
+            default: true,
+        },
+        glow: {
+            type: "boolean",
+            description: "Enable glow effect",
+            default: false,
+        },
+        glowColor: {
+            type: "string",
+            description: "Glow color",
+        },
+        padding: {
+            type: "enum",
+            description: "Internal padding",
+            enum: ["none", "sm", "md", "lg"],
+            default: "md",
+        },
+        rounded: {
+            type: "enum",
+            description: "Border radius",
+            enum: ["none", "sm", "md", "lg", "full"],
+            default: "md",
+        },
+    },
+    slots: [
+        {
+            name: "default",
+            description: "Panel content",
+            accepts: ["*"],
+            required: true,
+            multiple: true,
+        },
+    ],
+    validParents: ["bento-grid"],
+    validChildren: ["*"],
+    styles: ["glassmorphism", "minimal"],
+    supportsTheme: true,
+    cssVariables: ["--glass-bg", "--glass-border", "--glass-blur"],
+    interactions: [],
+    a11y: ["high-contrast"],
+    examples: [
+        {
+            name: "Card Container",
+            description: "Standard glass card",
+            props: { variant: "medium", padding: "lg", rounded: "lg" },
+            context: "Card layouts, content containers",
+        },
+        {
+            name: "Glowing Panel",
+            description: "Panel with glow effect",
+            props: { glow: true, glowColor: "#00ff88", border: true },
+            context: "Feature highlights, CTAs",
+        },
+    ],
+    source: "components/organisms/Glass/GlassPanel.tsx",
+    storybook: "organisms-glasspanel",
+    tags: ["glass", "panel", "container", "blur", "glassmorphism"],
+};
+export const bentoGridManifest = {
+    id: "bento-grid",
+    name: "BentoGrid",
+    version: "1.0.0",
+    category: "organisms",
+    purpose: ["grid-layout", "container"],
+    description: "Responsive bento-style grid layout. Auto-places children in an asymmetric, visually interesting grid.",
+    bestFor: [
+        "Feature grids",
+        "Dashboard layouts",
+        "Portfolio displays",
+        "Landing page sections",
+    ],
+    avoid: [
+        "Simple linear content",
+        "Dense data tables",
+        "Uniform content sizes",
+    ],
+    props: {
+        children: {
+            type: "ReactNode",
+            description: "Grid items",
+            required: true,
+        },
+        columns: {
+            type: "number",
+            description: "Number of columns",
+            default: 4,
+        },
+        gap: {
+            type: "number",
+            description: "Gap between items (px)",
+            default: 16,
+        },
+        className: {
+            type: "string",
+            description: "Additional CSS classes",
+        },
+    },
+    slots: [
+        {
+            name: "default",
+            description: "Grid items",
+            accepts: ["glass-panel", "three-d-card", "kpi-stat"],
+            required: true,
+            multiple: true,
+        },
+    ],
+    validParents: [],
+    validChildren: ["glass-panel", "three-d-card", "kpi-stat"],
+    styles: ["minimal"],
+    supportsTheme: true,
+    cssVariables: ["--bento-gap"],
+    interactions: ["resize"],
+    a11y: [],
+    examples: [
+        {
+            name: "Feature Grid",
+            description: "4-column feature showcase",
+            props: { columns: 4, gap: 24 },
+            context: "Landing pages, feature sections",
+            code: `<BentoGrid columns={4}>
+  <GlassPanel>Feature 1</GlassPanel>
+  <GlassPanel>Feature 2</GlassPanel>
+  <GlassPanel>Feature 3</GlassPanel>
+</BentoGrid>`,
+        },
+        {
+            name: "Dashboard Grid",
+            description: "Dashboard widget layout",
+            props: { columns: 3, gap: 16 },
+            context: "Dashboards, admin panels",
+        },
+    ],
+    source: "components/organisms/BentoGrid/BentoGrid.tsx",
+    storybook: "organisms-bentogrid",
+    tags: ["grid", "bento", "layout", "responsive", "dashboard"],
+};
+export const organismManifests = [
+    commandPaletteManifest,
+    glassPanelManifest,
+    bentoGridManifest,
+];

package/dist/workspace/registry/manifests/three.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Three.js/WebGL Component Manifests
+ * 3D visualization components
+ */
+import type { ComponentManifest } from "../types";
+export declare const graph3DManifest: ComponentManifest;
+export declare const particleFieldManifest: ComponentManifest;
+export declare const threeManifests: ComponentManifest[];
+//# sourceMappingURL=three.d.ts.map

package/dist/workspace/registry/manifests/three.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"three.d.ts","sourceRoot":"","sources":["../../../../src/workspace/registry/manifests/three.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,iBA2H7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBA6FnC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAG7C,CAAC"}

package/dist/workspace/registry/manifests/three.js

@@ -0,0 +1,210 @@
+/**
+ * Three.js/WebGL Component Manifests
+ * 3D visualization components
+ */
+export const graph3DManifest = {
+    id: "graph-3d",
+    name: "Graph3D",
+    version: "1.0.0",
+    category: "three",
+    purpose: ["visualization", "data-display"],
+    description: "3D node-link graph visualization using Three.js. Force-directed layout with interactive navigation.",
+    bestFor: [
+        "Knowledge graphs",
+        "Network visualizations",
+        "Relationship mapping",
+        "Concept maps",
+    ],
+    avoid: [
+        "Simple hierarchies (use tree instead)",
+        "Mobile devices (performance)",
+        "Very large graphs (>1000 nodes)",
+    ],
+    props: {
+        nodes: {
+            type: "array",
+            description: "Graph nodes",
+            required: true,
+            items: {
+                type: "object",
+                description: "Node definition",
+                properties: {
+                    id: { type: "string", description: "Unique node ID", required: true },
+                    label: { type: "string", description: "Display label" },
+                    color: { type: "string", description: "Node color" },
+                    size: { type: "number", description: "Node size" },
+                    group: { type: "string", description: "Grouping category" },
+                },
+            },
+        },
+        edges: {
+            type: "array",
+            description: "Graph edges",
+            required: true,
+            items: {
+                type: "object",
+                description: "Edge definition",
+                properties: {
+                    source: { type: "string", description: "Source node ID", required: true },
+                    target: { type: "string", description: "Target node ID", required: true },
+                    label: { type: "string", description: "Edge label" },
+                    weight: { type: "number", description: "Edge weight" },
+                },
+            },
+        },
+        width: {
+            type: "number",
+            description: "Container width",
+        },
+        height: {
+            type: "number",
+            description: "Container height",
+        },
+        onNodeClick: {
+            type: "function",
+            description: "Node click handler",
+        },
+        onNodeHover: {
+            type: "function",
+            description: "Node hover handler",
+        },
+        cameraPosition: {
+            type: "object",
+            description: "Initial camera position",
+            properties: {
+                x: { type: "number", description: "X position" },
+                y: { type: "number", description: "Y position" },
+                z: { type: "number", description: "Z position" },
+            },
+        },
+        enableZoom: {
+            type: "boolean",
+            description: "Enable zoom controls",
+            default: true,
+        },
+        enableRotate: {
+            type: "boolean",
+            description: "Enable rotation controls",
+            default: true,
+        },
+    },
+    slots: [],
+    validParents: ["glass-panel"],
+    validChildren: [],
+    styles: ["3d", "animated"],
+    supportsTheme: true,
+    cssVariables: ["--graph-node-color", "--graph-edge-color"],
+    interactions: ["click", "hover", "drag", "scroll"],
+    a11y: ["keyboard-nav"],
+    examples: [
+        {
+            name: "Knowledge Graph",
+            description: "Concept relationship graph",
+            props: {
+                nodes: [
+                    { id: "1", label: "React", group: "frontend" },
+                    { id: "2", label: "TypeScript", group: "language" },
+                    { id: "3", label: "Node.js", group: "backend" },
+                ],
+                edges: [
+                    { source: "1", target: "2" },
+                    { source: "2", target: "3" },
+                ],
+            },
+            context: "Knowledge bases, learning paths",
+        },
+    ],
+    source: "components/three/Graph3D/Graph3D.tsx",
+    storybook: "three-graph3d",
+    tags: ["graph", "3d", "network", "visualization", "nodes", "edges"],
+};
+export const particleFieldManifest = {
+    id: "particle-field",
+    name: "ParticleField",
+    version: "1.0.0",
+    category: "three",
+    purpose: ["background", "decoration", "visualization"],
+    description: "Animated particle system background. Creates atmospheric, dynamic visual effects.",
+    bestFor: [
+        "Hero backgrounds",
+        "Loading screens",
+        "Ambient effects",
+        "Interactive visualizations",
+    ],
+    avoid: [
+        "Content-heavy areas (distracting)",
+        "Low-end devices (performance)",
+        "Print/static contexts",
+    ],
+    props: {
+        count: {
+            type: "number",
+            description: "Number of particles",
+            default: 1000,
+        },
+        size: {
+            type: "number",
+            description: "Particle size",
+            default: 0.02,
+        },
+        color: {
+            type: "string",
+            description: "Particle color",
+            default: "#ffffff",
+        },
+        speed: {
+            type: "number",
+            description: "Animation speed",
+            default: 1,
+        },
+        spread: {
+            type: "number",
+            description: "Particle spread radius",
+            default: 10,
+        },
+        interactive: {
+            type: "boolean",
+            description: "React to mouse movement",
+            default: false,
+        },
+        opacity: {
+            type: "number",
+            description: "Particle opacity (0-1)",
+            default: 0.8,
+        },
+        depth: {
+            type: "boolean",
+            description: "Enable depth variation",
+            default: true,
+        },
+    },
+    slots: [],
+    validParents: [],
+    validChildren: [],
+    styles: ["3d", "animated"],
+    supportsTheme: true,
+    cssVariables: ["--particle-color"],
+    interactions: ["hover"],
+    a11y: ["reduced-motion"],
+    examples: [
+        {
+            name: "Starfield",
+            description: "Star-like particle background",
+            props: { count: 2000, size: 0.01, color: "#ffffff", spread: 20 },
+            context: "Space themes, hero backgrounds",
+        },
+        {
+            name: "Interactive Dust",
+            description: "Mouse-reactive particles",
+            props: { count: 500, interactive: true, color: "#00ff88" },
+            context: "Landing pages, interactive experiences",
+        },
+    ],
+    source: "components/three/ParticleField/ParticleField.tsx",
+    storybook: "three-particlefield",
+    tags: ["particles", "3d", "background", "animation", "webgl"],
+};
+export const threeManifests = [
+    graph3DManifest,
+    particleFieldManifest,
+];

package/dist/workspace/registry/registry.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Component Registry Implementation
+ *
+ * Provides query and composition APIs for agents to discover
+ * and use UI components.
+ */
+import type { ComponentManifest, ComponentRegistry } from "./types";
+import { allManifests, manifestById, manifestsByCategory } from "./manifests";
+/**
+ * Get the component registry
+ */
+export declare function getRegistry(): ComponentRegistry;
+/**
+ * Create a registry with custom manifests
+ */
+export declare function createRegistry(manifests: ComponentManifest[]): ComponentRegistry;
+/**
+ * Export registry for direct use
+ */
+export declare const registry: ComponentRegistry;
+export { manifestById, manifestsByCategory, allManifests };
+//# sourceMappingURL=registry.d.ts.map

package/dist/workspace/registry/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/workspace/registry/registry.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAKlB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAyQ9E;;GAEG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAK/C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,iBAAiB,EAAE,GAC7B,iBAAiB,CAEnB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,mBAAgB,CAAC;AAGtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,CAAC"}