@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/components/LayoutHelpers/LayoutHelpers.d.ts

@@ -0,0 +1,134 @@
+/**
+ * LayoutHelpers - Helper components for design systems lacking native layout components
+ * These provide consistent layout primitives across different design systems
+ */
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+interface BaseLayoutProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+interface SpacingProps {
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+}
+interface FlexStyleProps {
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    gap?: string | number;
+    flex?: string | number;
+}
+interface GridProps {
+    columns?: number | string;
+    rows?: number | string;
+    gap?: string | number;
+    columnGap?: string | number;
+    rowGap?: string | number;
+    areas?: string;
+    autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+}
+/**
+ * Box - Basic container with spacing utilities
+ */
+export interface BoxProps extends BaseLayoutProps, SpacingProps {
+    display?: CSSProperties['display'];
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    maxWidth?: string | number;
+    maxHeight?: string | number;
+    overflow?: CSSProperties['overflow'];
+    position?: CSSProperties['position'];
+    background?: string;
+    border?: string;
+    borderRadius?: string | number;
+    boxShadow?: string;
+}
+export declare const Box: React.FC<BoxProps>;
+/**
+ * Flex - Flexbox container
+ */
+export interface FlexProps extends BaseLayoutProps, SpacingProps, FlexStyleProps {
+}
+export declare const Flex: React.FC<FlexProps>;
+/**
+ * Stack - Vertical flex container
+ */
+export interface StackProps extends Omit<FlexProps, 'direction'> {
+    spacing?: string | number;
+}
+export declare const Stack: React.FC<StackProps>;
+/**
+ * HStack - Horizontal flex container
+ */
+export interface HStackProps extends Omit<FlexProps, 'direction'> {
+    spacing?: string | number;
+}
+export declare const HStack: React.FC<HStackProps>;
+/**
+ * Grid - CSS Grid container
+ */
+export interface GridContainerProps extends BaseLayoutProps, SpacingProps, GridProps {
+}
+export declare const Grid: React.FC<GridContainerProps>;
+/**
+ * Center - Centers content both horizontally and vertically
+ */
+export interface CenterProps extends BaseLayoutProps, SpacingProps {
+    inline?: boolean;
+}
+export declare const Center: React.FC<CenterProps>;
+/**
+ * Container - Centered container with max width
+ */
+export interface ContainerProps extends BaseLayoutProps, SpacingProps {
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string | number;
+    centerContent?: boolean;
+}
+export declare const Container: React.FC<ContainerProps>;
+/**
+ * Spacer - Creates space between elements
+ */
+export interface SpacerProps {
+    size?: string | number;
+    axis?: 'horizontal' | 'vertical';
+    flex?: boolean;
+}
+export declare const Spacer: React.FC<SpacerProps>;
+/**
+ * Divider - Visual separator
+ */
+export interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    color?: string;
+    thickness?: string | number;
+    spacing?: string | number;
+    style?: CSSProperties;
+}
+export declare const Divider: React.FC<DividerProps>;
+/**
+ * AspectRatio - Maintains aspect ratio for content
+ */
+export interface AspectRatioProps extends BaseLayoutProps {
+    ratio?: number | string;
+}
+export declare const AspectRatio: React.FC<AspectRatioProps>;
+export {};
+//# sourceMappingURL=LayoutHelpers.d.ts.map

package/dist/playground/components/LayoutHelpers/LayoutHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutHelpers.d.ts","sourceRoot":"","sources":["../../../../playground/components/LayoutHelpers/LayoutHelpers.tsx"],"names":[],"mappings":"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"}

package/dist/playground/components/LayoutHelpers/LayoutHelpers.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LayoutHelpers - Helper components for design systems lacking native layout components
+ * These provide consistent layout primitives across different design systems
+ */
+import React from 'react';
+// Utility to convert spacing props to CSS
+const getSpacingStyles = (props) => {
+    const styles = {};
+    // Padding
+    if (props.p !== undefined)
+        styles.padding = props.p;
+    if (props.pt !== undefined)
+        styles.paddingTop = props.pt;
+    if (props.pr !== undefined)
+        styles.paddingRight = props.pr;
+    if (props.pb !== undefined)
+        styles.paddingBottom = props.pb;
+    if (props.pl !== undefined)
+        styles.paddingLeft = props.pl;
+    if (props.px !== undefined) {
+        styles.paddingLeft = props.px;
+        styles.paddingRight = props.px;
+    }
+    if (props.py !== undefined) {
+        styles.paddingTop = props.py;
+        styles.paddingBottom = props.py;
+    }
+    // Margin
+    if (props.m !== undefined)
+        styles.margin = props.m;
+    if (props.mt !== undefined)
+        styles.marginTop = props.mt;
+    if (props.mr !== undefined)
+        styles.marginRight = props.mr;
+    if (props.mb !== undefined)
+        styles.marginBottom = props.mb;
+    if (props.ml !== undefined)
+        styles.marginLeft = props.ml;
+    if (props.mx !== undefined) {
+        styles.marginLeft = props.mx;
+        styles.marginRight = props.mx;
+    }
+    if (props.my !== undefined) {
+        styles.marginTop = props.my;
+        styles.marginBottom = props.my;
+    }
+    return styles;
+};
+// Utility to convert flex props to CSS
+const getFlexStyles = (props) => {
+    const styles = {
+        display: 'flex'
+    };
+    if (props.direction)
+        styles.flexDirection = props.direction;
+    if (props.gap)
+        styles.gap = props.gap;
+    if (props.wrap)
+        styles.flexWrap = props.wrap;
+    if (props.flex)
+        styles.flex = props.flex;
+    // Map justify values
+    if (props.justify) {
+        const justifyMap = {
+            'start': 'flex-start',
+            'end': 'flex-end',
+            'center': 'center',
+            'between': 'space-between',
+            'around': 'space-around',
+            'evenly': 'space-evenly'
+        };
+        styles.justifyContent = justifyMap[props.justify];
+    }
+    // Map align values
+    if (props.align) {
+        const alignMap = {
+            'start': 'flex-start',
+            'end': 'flex-end',
+            'center': 'center',
+            'stretch': 'stretch',
+            'baseline': 'baseline'
+        };
+        styles.alignItems = alignMap[props.align];
+    }
+    return styles;
+};
+// Utility to convert grid props to CSS
+const getGridStyles = (props) => {
+    const styles = {
+        display: 'grid'
+    };
+    if (props.columns) {
+        styles.gridTemplateColumns = typeof props.columns === 'number'
+            ? `repeat(${props.columns}, 1fr)`
+            : props.columns;
+    }
+    if (props.rows) {
+        styles.gridTemplateRows = typeof props.rows === 'number'
+            ? `repeat(${props.rows}, 1fr)`
+            : props.rows;
+    }
+    if (props.gap)
+        styles.gap = props.gap;
+    if (props.columnGap)
+        styles.columnGap = props.columnGap;
+    if (props.rowGap)
+        styles.rowGap = props.rowGap;
+    if (props.areas)
+        styles.gridTemplateAreas = props.areas;
+    if (props.autoFlow)
+        styles.gridAutoFlow = props.autoFlow;
+    return styles;
+};
+export const Box = ({ children, className, style, as: Component = 'div', display, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, position, background, border, borderRadius, boxShadow, ...spacingProps }) => {
+    const computedStyles = {
+        ...getSpacingStyles(spacingProps),
+        display,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        overflow,
+        position,
+        background,
+        border,
+        borderRadius,
+        boxShadow,
+        ...style
+    };
+    return React.createElement(Component, {
+        className,
+        style: computedStyles,
+        'data-helper': 'Box'
+    }, children);
+};
+export const Flex = ({ children, className, style, as: Component = 'div', ...props }) => {
+    const { direction, justify, align, wrap, gap, flex, ...spacingProps } = props;
+    const computedStyles = {
+        ...getSpacingStyles(spacingProps),
+        ...getFlexStyles({ direction, justify, align, wrap, gap, flex }),
+        ...style
+    };
+    return React.createElement(Component, {
+        className,
+        style: computedStyles,
+        'data-helper': 'Flex'
+    }, children);
+};
+export const Stack = ({ spacing, gap = spacing, ...props }) => {
+    return _jsx(Flex, { ...props, direction: "column", gap: gap, "data-helper": "Stack" });
+};
+export const HStack = ({ spacing, gap = spacing, ...props }) => {
+    return _jsx(Flex, { ...props, direction: "row", gap: gap, "data-helper": "HStack" });
+};
+export const Grid = ({ children, className, style, as: Component = 'div', columns, rows, gap, columnGap, rowGap, areas, autoFlow, ...spacingProps }) => {
+    const computedStyles = {
+        ...getSpacingStyles(spacingProps),
+        ...getGridStyles({ columns, rows, gap, columnGap, rowGap, areas, autoFlow }),
+        ...style
+    };
+    return React.createElement(Component, {
+        className,
+        style: computedStyles,
+        'data-helper': 'Grid'
+    }, children);
+};
+export const Center = ({ children, className, style, inline, ...spacingProps }) => {
+    const computedStyles = {
+        ...getSpacingStyles(spacingProps),
+        display: inline ? 'inline-flex' : 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style
+    };
+    return (_jsx("div", { className: className, style: computedStyles, "data-helper": "Center", children: children }));
+};
+export const Container = ({ children, className, style, maxWidth = 'lg', centerContent, ...spacingProps }) => {
+    const maxWidthMap = {
+        'sm': '640px',
+        'md': '768px',
+        'lg': '1024px',
+        'xl': '1280px',
+        '2xl': '1536px'
+    };
+    const computedMaxWidth = typeof maxWidth === 'string' && maxWidth in maxWidthMap
+        ? maxWidthMap[maxWidth]
+        : maxWidth;
+    const computedStyles = {
+        ...getSpacingStyles(spacingProps),
+        width: '100%',
+        maxWidth: computedMaxWidth,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        ...(centerContent && {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }),
+        ...style
+    };
+    return (_jsx("div", { className: className, style: computedStyles, "data-helper": "Container", children: children }));
+};
+export const Spacer = ({ size = '1rem', axis = 'vertical', flex }) => {
+    const style = flex
+        ? { flex: 1 }
+        : axis === 'horizontal'
+            ? { width: size }
+            : { height: size };
+    return _jsx("div", { style: style, "data-helper": "Spacer", "aria-hidden": "true" });
+};
+export const Divider = ({ orientation = 'horizontal', color = '#e5e7eb', thickness = '1px', spacing = '1rem', style }) => {
+    const computedStyles = {
+        backgroundColor: color,
+        ...(orientation === 'horizontal' ? {
+            width: '100%',
+            height: thickness,
+            marginTop: spacing,
+            marginBottom: spacing
+        } : {
+            width: thickness,
+            height: '100%',
+            marginLeft: spacing,
+            marginRight: spacing
+        }),
+        ...style
+    };
+    return _jsx("div", { style: computedStyles, "data-helper": "Divider", "aria-hidden": "true" });
+};
+export const AspectRatio = ({ children, className, style, ratio = 1 }) => {
+    // Parse ratio string if needed
+    const numericRatio = typeof ratio === 'string'
+        ? ratio.includes(':')
+            ? parseFloat(ratio.split(':')[0]) / parseFloat(ratio.split(':')[1])
+            : parseFloat(ratio)
+        : ratio;
+    const paddingBottom = `${(1 / numericRatio) * 100}%`;
+    return (_jsx("div", { className: className, style: {
+            position: 'relative',
+            width: '100%',
+            paddingBottom,
+            ...style
+        }, "data-helper": "AspectRatio", children: _jsx("div", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0
+            }, children: children }) }));
+};
+//# sourceMappingURL=LayoutHelpers.js.map

package/dist/playground/components/LayoutHelpers/LayoutHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutHelpers.js","sourceRoot":"","sources":["../../../../playground/components/LayoutHelpers/LayoutHelpers.tsx"],"names":[],"mappings":"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"}

package/dist/playground/components/LayoutHelpers/index.d.ts

@@ -0,0 +1,3 @@
+export { Box, Flex, Stack, HStack, Grid, Center, Container, Spacer, Divider, AspectRatio } from './LayoutHelpers';
+export type { BoxProps, FlexProps, StackProps, HStackProps, GridContainerProps, CenterProps, ContainerProps, SpacerProps, DividerProps, AspectRatioProps } from './LayoutHelpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/playground/components/LayoutHelpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../playground/components/LayoutHelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EACV,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,gBAAgB,EACjB,MAAM,iBAAiB,CAAC"}

package/dist/playground/components/LayoutHelpers/index.js

@@ -0,0 +1,2 @@
+export { Box, Flex, Stack, HStack, Grid, Center, Container, Spacer, Divider, AspectRatio } from './LayoutHelpers';
+//# sourceMappingURL=index.js.map

package/dist/playground/components/LayoutHelpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../playground/components/LayoutHelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,WAAW,EACZ,MAAM,iBAAiB,CAAC"}

package/dist/playground/components/Playground/Playground.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Playground - Main component that orchestrates the visual builder
+ */
+import React from 'react';
+export interface PlaygroundProps {
+    initialMode?: 'ai' | 'edit' | 'code' | 'preview';
+    onReady?: () => void;
+}
+export declare const Playground: React.FC<PlaygroundProps>;
+//# sourceMappingURL=Playground.d.ts.map

package/dist/playground/components/Playground/Playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Playground.d.ts","sourceRoot":"","sources":["../../../../playground/components/Playground/Playground.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AA+BxE,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwShD,CAAC"}

package/dist/playground/components/Playground/Playground.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Playground - Main component that orchestrates the visual builder
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { DndContext, DragOverlay, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, } from '@dnd-kit/sortable';
+import { Canvas } from '../Canvas/Canvas';
+import { AIAssistant } from '../AIAssistant/AIAssistant';
+import { ComponentPalette } from '../ComponentPalette/ComponentPalette';
+import { PropertiesPanel } from '../PropertiesPanel/PropertiesPanel';
+import { TreeView } from '../TreeView/TreeView';
+import { CodeView } from '../CodeView/CodeView';
+import { ExportDialog } from '../ExportDialog/ExportDialog';
+import { ComponentRenderer } from '../Canvas/ComponentRenderer';
+import { DragDropManager } from '../../services/DragDropManager';
+import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts';
+import styles from './Playground.module.css';
+import { usePlaygroundStore } from '../../store/playgroundStore';
+export const Playground = ({ initialMode = 'ai', onReady }) => {
+    const dragDropManagerRef = useRef(null);
+    const [exportDialogOpen, setExportDialogOpen] = useState(false);
+    const store = usePlaygroundStore();
+    const { mode, sidebarTab, setSidebarTab, propertiesPanelOpen, togglePropertiesPanel, canvasZoom, setCanvasZoom, selectedIds, components, draggedItem, selectComponent } = store;
+    // Initialize DragDropManager
+    useEffect(() => {
+        if (!dragDropManagerRef.current) {
+            dragDropManagerRef.current = new DragDropManager(store);
+        }
+    }, [store]);
+    // Configure drag sensors
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    // Handle drag start
+    const handleDragStart = useCallback((event) => {
+        const { active } = event;
+        // Create dragged item based on what's being dragged
+        let draggedItem;
+        if (active.data.current?.type === 'component') {
+            // Dragging from palette
+            draggedItem = {
+                type: 'new-component',
+                componentType: active.data.current.componentType,
+                source: 'palette'
+            };
+        }
+        else if (active.data.current?.type === 'canvas-component') {
+            // Dragging existing component
+            const component = components.get(active.id);
+            if (component) {
+                draggedItem = {
+                    id: component.id,
+                    type: 'move-component',
+                    component,
+                    source: 'canvas'
+                };
+            }
+            else {
+                return;
+            }
+        }
+        else {
+            return;
+        }
+        dragDropManagerRef.current?.startDrag(draggedItem);
+    }, [components]);
+    // Handle drag move
+    const handleDragMove = useCallback((event) => {
+        const { delta, activatorEvent } = event;
+        // dnd-kit supplies the original pointer event on activatorEvent for PointerSensor
+        const pointerEvent = activatorEvent?.nativeEvent;
+        if (pointerEvent && dragDropManagerRef.current) {
+            // Forward to DragDropManager for hit testing
+            dragDropManagerRef.current.updateDrag(pointerEvent);
+        }
+    }, []);
+    // Handle drag end
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (over && dragDropManagerRef.current) {
+            // Perform the drop
+            const result = dragDropManagerRef.current.endDrag(over.id);
+            if (result?.success) {
+                // Select the dropped component
+                if (result.componentId) {
+                    selectComponent(result.componentId);
+                }
+                else if (active.data.current?.type === 'canvas-component') {
+                    // Existing component was moved, keep it selected
+                    selectComponent(active.id);
+                }
+            }
+        }
+        else {
+            // Cancelled drop
+            dragDropManagerRef.current?.cancelDrag();
+        }
+    }, [selectComponent]);
+    // Handle drag cancel
+    const handleDragCancel = useCallback((event) => {
+        dragDropManagerRef.current?.cancelDrag();
+    }, []);
+    // Enable keyboard shortcuts
+    useKeyboardShortcuts();
+    // Get selected component
+    const selectedComponent = selectedIds.size === 1
+        ? components.get(Array.from(selectedIds)[0])
+        : null;
+    // Render dragged component overlay
+    const renderDragOverlay = () => {
+        if (!draggedItem)
+            return null;
+        if (draggedItem.type === 'move-component' && draggedItem.component) {
+            return (_jsx("div", { className: styles.dragGhost, children: _jsx(ComponentRenderer, { component: draggedItem.component, isSelected: false, isHovered: false }) }));
+        }
+        if (draggedItem.type === 'new-component') {
+            return (_jsx("div", { className: styles.dragGhost, children: _jsx("div", { className: styles.newComponentGhost, children: draggedItem.componentType }) }));
+        }
+        return null;
+    };
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsxs("div", { className: styles.playground, children: [_jsxs("header", { className: styles.header, children: [_jsx("div", { className: styles.headerLeft, children: _jsx("h1", { className: styles.logo, children: "StoryUI Playground" }) }), _jsx("div", { className: styles.headerCenter, children: _jsxs("div", { className: styles.modeToggle, children: [_jsx("button", { className: `${styles.modeButton} ${mode === 'edit' ? styles.active : ''}`, onClick: () => usePlaygroundStore.getState().setMode('edit'), children: "\u270F\uFE0F Edit" }), _jsx("button", { className: `${styles.modeButton} ${mode === 'preview' ? styles.active : ''}`, onClick: () => usePlaygroundStore.getState().setMode('preview'), children: "\uD83D\uDC41 Preview" }), _jsxs("button", { className: `${styles.modeButton} ${mode === 'code' ? styles.active : ''}`, onClick: () => usePlaygroundStore.getState().setMode('code'), children: ['<>', " Code"] })] }) }), _jsxs("div", { className: styles.headerRight, children: [_jsx("button", { className: styles.exportButton, onClick: () => setExportDialogOpen(true), children: "\uD83D\uDCBE Export" }), _jsxs("div", { className: styles.zoomControls, children: [_jsx("button", { className: styles.zoomButton, onClick: () => setCanvasZoom(canvasZoom - 0.1), disabled: canvasZoom <= 0.25, children: "\u2212" }), _jsxs("span", { className: styles.zoomValue, children: [Math.round(canvasZoom * 100), "%"] }), _jsx("button", { className: styles.zoomButton, onClick: () => setCanvasZoom(canvasZoom + 0.1), disabled: canvasZoom >= 4, children: "+" })] })] })] }), _jsxs("div", { className: styles.main, children: [_jsxs("aside", { className: styles.sidebar, children: [_jsxs("div", { className: styles.sidebarTabs, children: [_jsx("button", { className: `${styles.tab} ${sidebarTab === 'ai' ? styles.activeTab : ''}`, onClick: () => setSidebarTab('ai'), children: "\u2728 AI" }), _jsx("button", { className: `${styles.tab} ${sidebarTab === 'components' ? styles.activeTab : ''}`, onClick: () => setSidebarTab('components'), children: "\uD83E\uDDE9 Components" }), _jsx("button", { className: `${styles.tab} ${sidebarTab === 'structure' ? styles.activeTab : ''}`, onClick: () => setSidebarTab('structure'), children: "\uD83C\uDF33 Structure" })] }), _jsxs("div", { className: styles.sidebarContent, children: [sidebarTab === 'ai' && _jsx(AIAssistant, {}), sidebarTab === 'components' && _jsx(ComponentPalette, {}), sidebarTab === 'structure' && _jsx(TreeView, {})] })] }), _jsx("div", { className: styles.canvasContainer, children: mode === 'code' ? (_jsx(CodeView, { storyName: "PlaygroundStory" })) : (_jsx(Canvas, { onReady: onReady })) }), propertiesPanelOpen && (_jsx("aside", { className: styles.propertiesPanel, children: _jsx(PropertiesPanel, { onClose: togglePropertiesPanel }) }))] }), _jsxs("footer", { className: styles.statusBar, children: [_jsxs("div", { className: styles.statusItem, children: ["\uD83D\uDCE6 ", components.size, " components"] }), _jsxs("div", { className: styles.statusItem, children: ["\u2705 ", selectedIds.size, " selected"] }), _jsxs("div", { className: styles.statusItem, children: ["Mode: ", mode] })] }), _jsx(ExportDialog, { isOpen: exportDialogOpen, onClose: () => setExportDialogOpen(false) })] }), _jsx(DragOverlay, { children: renderDragOverlay() })] }));
+};
+//# sourceMappingURL=Playground.js.map

package/dist/playground/components/Playground/Playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Playground.js","sourceRoot":"","sources":["../../../../playground/components/Playground/Playground.tsx"],"names":[],"mappings":"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"}