@backbay/glia 0.2.0-alpha.1

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

@@ -0,0 +1,268 @@
+/**
+ * Layout Primitive Manifests
+ * Core layout building blocks for workspace composition
+ */
+export const splitPanelManifest = {
+    id: "split-panel",
+    name: "SplitPanel",
+    version: "1.0.0",
+    category: "layouts",
+    purpose: ["container", "grid-layout"],
+    description: "Resizable split panel layout. Divides space into two resizable sections.",
+    bestFor: [
+        "IDE-style layouts",
+        "Editor + preview layouts",
+        "Sidebar + content layouts",
+        "Comparison views",
+    ],
+    avoid: [
+        "Mobile layouts (not resizable)",
+        "Simple content (overkill)",
+        "More than 2 sections (nest instead)",
+    ],
+    props: {
+        direction: {
+            type: "enum",
+            description: "Split direction",
+            enum: ["horizontal", "vertical"],
+            default: "horizontal",
+        },
+        defaultSize: {
+            type: "number",
+            description: "Default first panel size (percentage)",
+            default: 50,
+        },
+        minSize: {
+            type: "number",
+            description: "Minimum panel size (percentage)",
+            default: 10,
+        },
+        maxSize: {
+            type: "number",
+            description: "Maximum panel size (percentage)",
+            default: 90,
+        },
+        onResize: {
+            type: "function",
+            description: "Resize callback with new size",
+        },
+        children: {
+            type: "array",
+            description: "Exactly 2 children for each panel",
+            required: true,
+        },
+    },
+    slots: [
+        {
+            name: "first",
+            description: "First panel content",
+            accepts: ["*"],
+            required: true,
+        },
+        {
+            name: "second",
+            description: "Second panel content",
+            accepts: ["*"],
+            required: true,
+        },
+    ],
+    validParents: ["workspace-root", "split-panel"],
+    validChildren: ["*"],
+    styles: ["minimal"],
+    supportsTheme: true,
+    cssVariables: ["--split-handle-color", "--split-handle-width"],
+    interactions: ["drag", "resize"],
+    a11y: ["keyboard-nav"],
+    examples: [
+        {
+            name: "Sidebar Layout",
+            description: "Sidebar + main content",
+            props: { direction: "horizontal", defaultSize: 25 },
+            context: "Dashboard layouts, file explorers",
+        },
+        {
+            name: "Editor Preview",
+            description: "Code editor + live preview",
+            props: { direction: "horizontal", defaultSize: 50 },
+            context: "Code playgrounds, markdown editors",
+        },
+    ],
+    source: "components/layouts/SplitPanel.tsx",
+    storybook: "layouts-splitpanel",
+    tags: ["layout", "split", "resize", "panel", "container"],
+};
+export const tabsPanelManifest = {
+    id: "tabs-panel",
+    name: "TabsPanel",
+    version: "1.0.0",
+    category: "layouts",
+    purpose: ["navigation", "container"],
+    description: "Tabbed content panel. Switches between multiple content areas with tab navigation.",
+    bestFor: [
+        "Settings pages",
+        "Multi-section content",
+        "Code/preview toggles",
+        "Category navigation",
+    ],
+    avoid: [
+        "Many tabs (>6 becomes unwieldy)",
+        "Deep navigation (use routing)",
+        "Frequent switching content",
+    ],
+    props: {
+        tabs: {
+            type: "array",
+            description: "Tab definitions",
+            required: true,
+            items: {
+                type: "object",
+                description: "Tab definition",
+                properties: {
+                    id: { type: "string", description: "Tab ID", required: true },
+                    label: { type: "string", description: "Tab label", required: true },
+                    icon: { type: "ReactNode", description: "Tab icon" },
+                    disabled: { type: "boolean", description: "Disable tab" },
+                },
+            },
+        },
+        activeTab: {
+            type: "string",
+            description: "Controlled active tab ID",
+        },
+        defaultTab: {
+            type: "string",
+            description: "Default active tab ID",
+        },
+        onTabChange: {
+            type: "function",
+            description: "Tab change handler",
+        },
+        children: {
+            type: "ReactNode",
+            description: "Tab content (keyed by tab ID)",
+            required: true,
+        },
+        orientation: {
+            type: "enum",
+            description: "Tab orientation",
+            enum: ["horizontal", "vertical"],
+            default: "horizontal",
+        },
+    },
+    slots: [],
+    validParents: ["split-panel", "workspace-root"],
+    validChildren: ["*"],
+    styles: ["minimal", "glassmorphism"],
+    supportsTheme: true,
+    cssVariables: ["--tab-active-color", "--tab-hover-color"],
+    interactions: ["click", "keyboard"],
+    a11y: ["keyboard-nav", "aria-labels", "focus-visible"],
+    examples: [
+        {
+            name: "Settings Tabs",
+            description: "Settings page with tabs",
+            props: {
+                tabs: [
+                    { id: "general", label: "General" },
+                    { id: "account", label: "Account" },
+                    { id: "appearance", label: "Appearance" },
+                ],
+                defaultTab: "general",
+            },
+            context: "Settings pages, preferences",
+        },
+    ],
+    source: "components/layouts/TabsPanel.tsx",
+    storybook: "layouts-tabspanel",
+    tags: ["tabs", "navigation", "panel", "container", "switch"],
+};
+export const stackLayoutManifest = {
+    id: "stack-layout",
+    name: "StackLayout",
+    version: "1.0.0",
+    category: "layouts",
+    purpose: ["container", "grid-layout"],
+    description: "Flexible stack layout (horizontal or vertical). CSS flexbox abstraction.",
+    bestFor: [
+        "Button groups",
+        "Form layouts",
+        "Card lists",
+        "Toolbar layouts",
+    ],
+    avoid: [
+        "Complex grid layouts (use BentoGrid)",
+        "Overlapping content",
+    ],
+    props: {
+        direction: {
+            type: "enum",
+            description: "Stack direction",
+            enum: ["row", "column"],
+            default: "column",
+        },
+        gap: {
+            type: "number",
+            description: "Gap between items (px)",
+            default: 8,
+        },
+        align: {
+            type: "enum",
+            description: "Cross-axis alignment",
+            enum: ["start", "center", "end", "stretch"],
+            default: "stretch",
+        },
+        justify: {
+            type: "enum",
+            description: "Main-axis alignment",
+            enum: ["start", "center", "end", "between", "around"],
+            default: "start",
+        },
+        wrap: {
+            type: "boolean",
+            description: "Allow wrapping",
+            default: false,
+        },
+        children: {
+            type: "ReactNode",
+            description: "Stack items",
+            required: true,
+        },
+    },
+    slots: [
+        {
+            name: "default",
+            description: "Stack items",
+            accepts: ["*"],
+            required: true,
+            multiple: true,
+        },
+    ],
+    validParents: ["*"],
+    validChildren: ["*"],
+    styles: ["minimal"],
+    supportsTheme: true,
+    interactions: [],
+    a11y: [],
+    examples: [
+        {
+            name: "Button Group",
+            description: "Horizontal button group",
+            props: { direction: "row", gap: 8, align: "center" },
+            context: "Action bars, toolbars",
+        },
+        {
+            name: "Form Layout",
+            description: "Vertical form fields",
+            props: { direction: "column", gap: 16 },
+            context: "Form layouts, settings",
+        },
+    ],
+    source: "components/layouts/StackLayout.tsx",
+    storybook: "layouts-stacklayout",
+    tags: ["layout", "stack", "flex", "row", "column"],
+};
+export const layoutManifests = [
+    splitPanelManifest,
+    tabsPanelManifest,
+    stackLayoutManifest,
+];

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

@@ -0,0 +1,10 @@
+/**
+ * Molecule Component Manifests
+ * Composite components built from atoms
+ */
+import type { ComponentManifest } from "../types";
+export declare const kpiStatManifest: ComponentManifest;
+export declare const neonToastManifest: ComponentManifest;
+export declare const threeDCardManifest: ComponentManifest;
+export declare const moleculeManifests: ComponentManifest[];
+//# sourceMappingURL=molecules.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"molecules.d.ts","sourceRoot":"","sources":["../../../../src/workspace/registry/manifests/molecules.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,iBAuG7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAmG/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAsFhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,EAIhD,CAAC"}

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

@@ -0,0 +1,276 @@
+/**
+ * Molecule Component Manifests
+ * Composite components built from atoms
+ */
+export const kpiStatManifest = {
+    id: "kpi-stat",
+    name: "KPIStat",
+    version: "1.0.0",
+    category: "molecules",
+    purpose: ["data-display", "status-indicator"],
+    description: "Key Performance Indicator display with label, value, trend indicator, and optional sparkline.",
+    bestFor: [
+        "Dashboard metrics",
+        "Analytics displays",
+        "Summary statistics",
+        "Real-time counters",
+    ],
+    avoid: [
+        "Long text content",
+        "Non-numeric data",
+        "Dense data tables (too large)",
+    ],
+    props: {
+        label: {
+            type: "string",
+            description: "Metric label",
+            required: true,
+        },
+        value: {
+            type: "string",
+            description: "Display value (formatted)",
+            required: true,
+        },
+        trend: {
+            type: "enum",
+            description: "Trend direction",
+            enum: ["up", "down", "neutral"],
+        },
+        trendValue: {
+            type: "string",
+            description: "Trend percentage or delta",
+        },
+        icon: {
+            type: "ReactNode",
+            description: "Optional icon",
+        },
+        sparkline: {
+            type: "array",
+            description: "Data points for mini sparkline chart",
+            items: { type: "number", description: "Data point" },
+        },
+        variant: {
+            type: "enum",
+            description: "Visual variant",
+            enum: ["default", "compact", "large"],
+            default: "default",
+        },
+    },
+    slots: [
+        {
+            name: "icon",
+            description: "Icon slot",
+            accepts: ["*"],
+            required: false,
+        },
+    ],
+    validParents: ["bento-grid", "glass-panel"],
+    validChildren: [],
+    styles: ["minimal", "glassmorphism"],
+    supportsTheme: true,
+    cssVariables: ["--kpi-trend-up-color", "--kpi-trend-down-color"],
+    interactions: ["hover"],
+    a11y: ["aria-labels", "screen-reader"],
+    examples: [
+        {
+            name: "Revenue Metric",
+            description: "Revenue with positive trend",
+            props: {
+                label: "Revenue",
+                value: "$42,500",
+                trend: "up",
+                trendValue: "+12.5%",
+            },
+            context: "Financial dashboards",
+        },
+        {
+            name: "User Count",
+            description: "Active users with sparkline",
+            props: {
+                label: "Active Users",
+                value: "1,234",
+                sparkline: [10, 25, 18, 30, 45, 38, 52],
+            },
+            context: "Analytics dashboards",
+        },
+    ],
+    source: "components/molecules/KPIStat/KPIStat.tsx",
+    storybook: "molecules-kpistat",
+    tags: ["kpi", "stat", "metric", "dashboard", "analytics", "trend"],
+};
+export const neonToastManifest = {
+    id: "neon-toast",
+    name: "NeonToast",
+    version: "1.0.0",
+    category: "molecules",
+    purpose: ["notification", "status-indicator"],
+    description: "Notification toast with neon glow effect. Supports multiple severity levels.",
+    bestFor: [
+        "Success notifications",
+        "Error messages",
+        "Warnings",
+        "Info alerts",
+    ],
+    avoid: [
+        "Critical errors requiring user action (use modal)",
+        "Long-form content",
+        "Permanent displays",
+    ],
+    props: {
+        title: {
+            type: "string",
+            description: "Toast title",
+            required: true,
+        },
+        description: {
+            type: "string",
+            description: "Toast description/message",
+        },
+        variant: {
+            type: "enum",
+            description: "Severity/type variant",
+            enum: ["success", "error", "warning", "info"],
+            default: "info",
+        },
+        duration: {
+            type: "number",
+            description: "Auto-dismiss duration in ms (0 = persistent)",
+            default: 5000,
+        },
+        action: {
+            type: "object",
+            description: "Optional action button config",
+            properties: {
+                label: { type: "string", description: "Button label", required: true },
+                onClick: { type: "function", description: "Click handler" },
+            },
+        },
+        onDismiss: {
+            type: "function",
+            description: "Callback when toast is dismissed",
+        },
+    },
+    slots: [],
+    validParents: [],
+    validChildren: [],
+    styles: ["neon", "glassmorphism", "animated"],
+    supportsTheme: true,
+    cssVariables: [
+        "--toast-success-color",
+        "--toast-error-color",
+        "--toast-warning-color",
+        "--toast-info-color",
+    ],
+    interactions: ["click", "hover"],
+    a11y: ["aria-labels", "screen-reader", "focus-visible"],
+    examples: [
+        {
+            name: "Success",
+            description: "Operation completed successfully",
+            props: {
+                title: "Saved",
+                description: "Your changes have been saved",
+                variant: "success",
+            },
+            context: "Form submissions, save operations",
+        },
+        {
+            name: "Error with Action",
+            description: "Error with retry action",
+            props: {
+                title: "Upload Failed",
+                description: "Network error occurred",
+                variant: "error",
+                action: { label: "Retry" },
+            },
+            context: "Network errors, failed operations",
+        },
+    ],
+    source: "components/molecules/NeonToast/NeonToast.tsx",
+    storybook: "molecules-neontoast",
+    tags: ["toast", "notification", "alert", "neon", "message"],
+};
+export const threeDCardManifest = {
+    id: "three-d-card",
+    name: "ThreeDCard",
+    version: "1.0.0",
+    category: "molecules",
+    purpose: ["container", "data-display"],
+    description: "Card with 3D perspective effect on hover. Creates depth and interactivity.",
+    bestFor: [
+        "Feature showcases",
+        "Product cards",
+        "Team member cards",
+        "Portfolio items",
+    ],
+    avoid: [
+        "Dense grids (too much motion)",
+        "Mobile-first designs (requires hover)",
+        "Accessibility-critical contexts",
+    ],
+    props: {
+        children: {
+            type: "ReactNode",
+            description: "Card content",
+            required: true,
+        },
+        className: {
+            type: "string",
+            description: "Additional CSS classes",
+        },
+        containerClassName: {
+            type: "string",
+            description: "Container wrapper classes",
+        },
+        rotationIntensity: {
+            type: "number",
+            description: "Max rotation degrees",
+            default: 10,
+        },
+        glareEnabled: {
+            type: "boolean",
+            description: "Enable glare effect on hover",
+            default: true,
+        },
+        glareMaxOpacity: {
+            type: "number",
+            description: "Max glare opacity (0-1)",
+            default: 0.2,
+        },
+    },
+    slots: [
+        {
+            name: "default",
+            description: "Card content",
+            accepts: ["*"],
+            required: true,
+            multiple: true,
+        },
+    ],
+    validParents: ["bento-grid"],
+    validChildren: ["*"],
+    styles: ["3d", "animated", "glassmorphism"],
+    supportsTheme: true,
+    interactions: ["hover"],
+    a11y: ["reduced-motion"],
+    examples: [
+        {
+            name: "Feature Card",
+            description: "Feature showcase card",
+            props: { rotationIntensity: 15, glareEnabled: true },
+            context: "Feature sections, product showcases",
+            code: `<ThreeDCard>
+  <h3>Feature Title</h3>
+  <p>Feature description here</p>
+</ThreeDCard>`,
+        },
+    ],
+    source: "components/molecules/ThreeDCard/ThreeDCard.tsx",
+    storybook: "molecules-threedcard",
+    tags: ["card", "3d", "perspective", "hover", "interactive"],
+};
+export const moleculeManifests = [
+    kpiStatManifest,
+    neonToastManifest,
+    threeDCardManifest,
+];

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

@@ -0,0 +1,10 @@
+/**
+ * Organism Component Manifests
+ * Complex, composite components
+ */
+import type { ComponentManifest } from "../types";
+export declare const commandPaletteManifest: ComponentManifest;
+export declare const glassPanelManifest: ComponentManifest;
+export declare const bentoGridManifest: ComponentManifest;
+export declare const organismManifests: ComponentManifest[];
+//# sourceMappingURL=organisms.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"organisms.d.ts","sourceRoot":"","sources":["../../../../src/workspace/registry/manifests/organisms.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,sBAAsB,EAAE,iBA2FpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,iBAuGhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAqF/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,EAIhD,CAAC"}