flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/README.md

@@ -1,34 +1,40 @@
 # Flikkui
 
-A modern React component library built with TypeScript, Tailwind CSS v4, and optional Framer Motion animations. Follows the shadcn philosophy where users can override any styling using className props while getting sensible defaults out of the box.
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion animations. Follows the shadcn philosophy where users can override any styling using className props while getting sensible defaults out of the box.
+
+**✨ Features:**
+- 🎨 100+ production-ready components
+- 🌳 Optimized tree-shaking (60-85% bundle size reduction)
+- 🎭 CSS variables for easy theming
+- ⚡ Built with Tailwind CSS v4
+- 🔥 TypeScript-first with excellent DX
+- ♿ Accessibility-first (WCAG 2.1 AA)
 
 ## 🚀 Quick Start
 
 ### 1. Install the package
 
 ```bash
-npm install flikkui@beta motion
-# or
-yarn add flikkui@beta motion
+npm install flikkui @heroicons/react clsx motion tailwind-merge
 ```
 
-### 2. Download the theme file
-
-Download the theme file from [flikkui.dev/theme](https://flikkui.dev/theme) and save it as `flikkui-theme.css` in your project root.
-
-Alternatively, you can copy this file: [flikkui-theme.css](./flikkui-theme.css)
+**Or with yarn:**
+```bash
+yarn add flikkui @heroicons/react clsx motion tailwind-merge
+```
 
-### 3. Import the theme in your app
+### 2. Import styles in your app
 
 ```tsx
 // In your main App.tsx, index.tsx, or _app.tsx
-import './flikkui-theme.css'  // Import the downloaded theme file
-import App from './App'
+import 'flikkui/styles.css'
 
-// Your app code...
+function App() {
+  return <YourApp />
+}
 ```
 
-### 4. Start using components
+### 3. Start using components
 
 ```tsx
 import { Button } from 'flikkui'
@@ -42,114 +48,196 @@ export function MyComponent() {
 }
 ```
 
-## 🎨 Customization
+## 🌳 Tree-Shaking & Optimized Imports
 
-Edit the `flikkui-theme.css` file to customize your design system:
+Flikkui is optimized for tree-shaking. For the best bundle size, import components from category subpaths:
 
-```css
-/* flikkui-theme.css */
-@theme {
-  /* Change primary color */
-  --color-primary-base: oklch(0.666 0.223 48.717); /* Orange */
-  --color-primary-600: oklch(0.666 0.223 48.717);
-  --color-primary-700: oklch(0.555 0.192 47.355);
-  
-  /* Larger buttons */
-  --button-min-h-md: 3rem;
-  --button-px-md: 1.25rem;
-  
-  /* More rounded design */
-  --form-rounded: 1rem;
-}
+```tsx
+// ✅ Recommended: Category imports (best tree-shaking)
+import { Button } from 'flikkui/core'
+import { Input, Select } from 'flikkui/forms'
+import { BarChart } from 'flikkui/charts'
+import { GlassEffect } from 'flikkui/effects'
+
+// ✅ Also works: Main import (backward compatible)
+import { Button, Input, BarChart } from 'flikkui'
 ```
 
-You can also override styles using className props (shadcn approach):
+### Bundle Size Comparison
+
+| Import Method | Components Used | Bundle Size | Savings |
+|--------------|----------------|-------------|---------|
+| Category imports | 1-3 components | ~50-100KB | 85-90% |
+| Category imports | 10-20 components | ~250-400KB | 67-79% |
+| Main import | Any | Works, but larger | - |
+
+**Categories available:**
+- `flikkui/core` - Button, Modal, Dropdown, Tooltip, etc.
+- `flikkui/forms` - Input, Select, Checkbox, Radio, etc.
+- `flikkui/charts` - AreaChart, BarChart, LineChart, etc.
+- `flikkui/effects` - GlassEffect, visual effects
+
+## 🎨 Customization
+
+### Using className Overrides (Recommended)
+
+Override styles using className props - the shadcn approach:
 
 ```tsx
 <Button className="bg-purple-600 hover:bg-purple-700 rounded-full">
   Custom Button
 </Button>
+
+<Input className="border-blue-500 focus:ring-blue-500" />
+
+<Badge className="bg-gradient-to-r from-purple-500 to-pink-500">
+  Gradient Badge
+</Badge>
 ```
 
+### Using CSS Variables
+
+Customize your design system globally by overriding CSS variables:
+
+```css
+/* In your global CSS file */
+@layer base {
+  :root {
+    /* Change primary color */
+    --color-primary-600: #7c3aed; /* Purple */
+    --color-primary-700: #6d28d9;
+
+    /* Larger buttons */
+    --button-min-h-md: 3rem;
+    --button-px-md: 1.25rem;
+
+    /* More rounded design */
+    --form-rounded: 1rem;
+    --button-rounded: 0.75rem;
+  }
+}
+```
+
+**Available CSS variables:**
+- Colors: `--color-primary-*`, `--color-danger-*`, `--color-success-*`, `--color-warning-*`
+- Text: `--color-text-primary`, `--color-text-secondary`, `--color-text-muted`
+- Backgrounds: `--color-background`, `--color-background-secondary`
+- Component-specific: `--button-*`, `--form-*`, `--modal-*`, etc.
+
 ## 📚 Components
 
-### Core Components
-- **Button** - Multiple variants, states, optional animations
-- **Avatar** - Image handling, fallbacks, status indicators
-- **AvatarGroup** - Overlapping avatars with compound component pattern  
-- **Badge** - Variants, sizes, content flexibility
-- **Accordion** - Compound component with animations
-- **Modal** - Compound component with header, body, footer
-- **Drawer** - Slide-out panels from edges
-- **Popover** - Compound with portal rendering
-- **Tooltip** - Positioning, animations, accessibility
-- **Tabs** - Horizontal tabbed interface
-
-### Form Components  
-- **Input** - Multiple types, masking, validation
-- **Select** - Searchable, compound pattern
-- **Checkbox** - Custom styling, controlled/uncontrolled
-- **Radio** - Group management
-- **Switch** - Toggle functionality
-- **Textarea** - Resizable, validation
-
-### Data Display
-- **Table** - Dual API, sorting, filtering, selection
-- **Spinner** - Loading states, sizes
-
-### Charts
-- **AreaChart** - Stacked, curved, null value handling
-- **BarChart** - Horizontal/vertical, grouped, stacked  
-- **LineChart** - Multiple series, curved lines
-- **DonutChart** - Progress, animations, gradients
-- **Heatmap** - Interactive, customizable intensity
-
-## 🔄 Migration from v0.1.0-beta.3
-
-If you were using the previous version, update your imports:
+Flikkui includes 100+ production-ready components across 5 categories:
 
-```tsx
-// Old (v0.1.0-beta.3)
-import 'flikkui/styles.css'
+### Core Components (45+)
+Button, Avatar, AvatarGroup, Badge, Accordion, Modal, Drawer, Popover, Dropdown, Tooltip, Tabs, Card, Stepper, Segmented, Pagination, Breadcrumbs, Link, Divider, Skeleton, Loader, Calendar, Tree, CommandPalette, ContextMenu, Sidebar, NavItem, and more.
+
+### Form Components (22+)
+Input, Select, Checkbox, Radio, Switch, Textarea, DatePicker, TimePicker, ColorPicker, RichTextEditor, FileUpload, Slider, Rating, PasswordInput, PinInput, and more.
+
+### Chart Components (18+)
+AreaChart, BarChart, LineChart, DonutChart, Heatmap, FunnelChart, ScatterPlot, ActivityRings, ComboChart, and more.
+
+### Effect Components
+GlassEffect, CustomCursor, Overlay, and visual effects.
+
+### AI Components
+Message (chat messages with typewriter effect), PromptInput (AI prompt interface).
+
+**All components include:**
+- ✅ TypeScript types
+- ✅ Compound patterns where appropriate
+- ✅ Accessibility built-in
+- ✅ Responsive design
+- ✅ Dark mode support (via CSS variables)
+- ✅ Animation support (optional)
+
+## 🔄 Migration Guide
+
+### From v0.1.0-beta.11 to v0.1.0-beta.12
+
+**What changed:**
+- Dependencies moved to peerDependencies
+- Tree-shaking optimizations added
+- Category imports available
+
+**What you need to do:**
+
+1. **Install new peer dependencies:**
+```bash
+npm install @heroicons/react clsx motion tailwind-merge
+```
 
-// New (v0.1.0-beta.4+)
-import './flikkui-theme.css'  // Download this file first
+2. **Your code keeps working!** No breaking changes:
+```tsx
+import { Button } from 'flikkui' // ✅ Still works
+import 'flikkui/styles.css'      // ✅ Still works
 ```
 
-This change gives you:
-- ✅ 100% predictable styling
-- ✅ Full control over your design system  
-- ✅ No more CSS cascade conflicts
-- ✅ Easy theme customization
+3. **Optional: Use category imports for smaller bundles:**
+```tsx
+import { Button } from 'flikkui/core'  // Better tree-shaking
+```
 
 ## 💡 Philosophy
 
 Flikkui follows the **shadcn approach**:
-- Components provide sensible defaults
-- **className overrides always take precedence**
-- Full TypeScript support with excellent DX
-- Copy-paste friendly - customize anything
-- CSS variables for consistent theming
+- ✅ Components provide sensible defaults
+- ✅ **className overrides always take precedence**
+- ✅ Full TypeScript support with excellent DX
+- ✅ Copy-paste friendly - customize anything
+- ✅ CSS variables for consistent theming
+- ✅ Tree-shaking optimized - only bundle what you use
 
 ## 🛠️ Tech Stack
 
-- **React 18** with TypeScript (strict mode)
+- **React 18+** with TypeScript (strict mode)
 - **Tailwind CSS v4** with CSS variables
-- **Framer Motion** (optional, for enhanced components)
+- **Framer Motion 12+** for smooth animations
+- **Heroicons** for consistent iconography
 - **Accessibility-first** - WCAG 2.1 AA compliance built-in
+- **Optimized build** - Rollup with ESM output and preserveModules
+
+## ⚡ Performance
+
+Flikkui is optimized for production:
+
+- **Tree-shaking ready** - Only bundle components you use
+- **Small package size** - ~800KB unpacked (no bundled dependencies)
+- **Zero runtime overhead** - CSS variables, no theme providers
+- **Optimized animations** - Framer Motion with reduced motion support
+- **Code splitting** - Category-level exports for granular imports
+
+**Real-world bundle sizes (production build, gzipped):**
+- Single component (Button): ~15-20KB
+- Small app (5 components): ~40-60KB
+- Medium app (20 components): ~100-150KB
+
+## 🎯 Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+**Note:** Requires browsers with CSS custom properties support.
 
 ## 📖 Documentation
 
 Visit [flikkui.dev](https://flikkui.dev) for:
 - Component API documentation
-- Interactive examples
+- Interactive examples in Storybook
 - Theme customization guide
 - Migration guides
+- Best practices
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
 
 ## 📄 License
 
-MIT
+MIT License - feel free to use in personal and commercial projects.
 
 ---
 
-Made with ❤️ by [Espranza Innovations](https://espranza.net)
+Built with ❤️ by [Espranza Innovations](https://espranza.net)

package/dist/components/ai/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ApprovalCardProps } from "./ApprovalCard.types";
+export declare const ApprovalCard: React.FC<ApprovalCardProps>;

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,43 @@
+import React__default from 'react';
+import { ExclamationTriangleIcon, ShieldCheckIcon, CheckCircleIcon } from '@heroicons/react/16/solid';
+import { approvalCardTheme } from './ApprovalCard.theme.js';
+import { Card } from '../../core/Card/Card.js';
+import { Badge } from '../../core/Badge/Badge.js';
+import { Button } from '../../core/Button/Button.js';
+import { AlertDialog } from '../../core/AlertDialog/AlertDialog.js';
+import { cn } from '../../../utils/cn.js';
+
+var ApprovalCard = function (_a) {
+    var title = _a.title, description = _a.description, _b = _a.riskLevel, riskLevel = _b === void 0 ? "medium" : _b, _c = _a.mode, mode = _c === void 0 ? "inline" : _c, onApprove = _a.onApprove, onDeny = _a.onDeny, children = _a.children, _d = _a.isApproving, isApproving = _d === void 0 ? false : _d, className = _a.className;
+    // --- MODAL MODE ---
+    if (mode === "modal") {
+        return (React__default.createElement(AlertDialog, { trigger: React__default.createElement(Button, { variant: "outline", color: "neutral" }, "Review Approval"), title: title, icon: riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" })) : (React__default.createElement(ShieldCheckIcon, { className: "size-6 text-[var(--color-primary)]" })), description: description, footer: function (close) { return (React__default.createElement("div", { className: "flex gap-2 justify-end w-full" },
+                React__default.createElement(Button, { variant: "outline", color: "neutral", onClick: function () {
+                        onDeny();
+                        close();
+                    } }, "Deny"),
+                React__default.createElement(Button, { color: riskLevel === "critical" ? "danger" : "primary", state: isApproving ? "loading" : "default", onClick: function () {
+                        onApprove();
+                        close();
+                    } }, "Approve"))); } }));
+    }
+    // --- INLINE MODE ---
+    var riskColor = approvalCardTheme.badgeColors[riskLevel];
+    var riskIcon = riskLevel === "critical" || riskLevel === "high" ? (React__default.createElement(ExclamationTriangleIcon, { className: "" })) : (React__default.createElement(CheckCircleIcon, { className: "" }));
+    return (React__default.createElement(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.riskStyles[riskLevel], className) },
+        React__default.createElement(Card.Header, null,
+            React__default.createElement("div", { className: "flex flex-col items-start" },
+                React__default.createElement(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow" },
+                    riskLevel.toUpperCase(),
+                    " RISK"))),
+        React__default.createElement(Card.Content, { className: "space-y-3" },
+            React__default.createElement("div", { className: "space-y-1" },
+                React__default.createElement(Card.Title, { className: "text-base" }, title),
+                description && (React__default.createElement("p", { className: "text-sm text-[var(--color-text-secondary)]" }, description))),
+            children && (React__default.createElement("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-xs font-mono border border-[var(--color-border)] overflow-x-auto" }, children))),
+        React__default.createElement(Card.Footer, { className: "justify-end gap-2 mt-3" },
+            React__default.createElement(Button, { variant: "filled", color: "neutral", size: "sm", onClick: onDeny }, "Deny"),
+            React__default.createElement(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove }, "Approve"))));
+};
+
+export { ApprovalCard };

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const approvalCardTheme: {
+    baseStyle: string;
+    riskStyles: {
+        low: string;
+        medium: string;
+        high: string;
+        critical: string;
+    };
+    badgeColors: {
+        readonly low: "success";
+        readonly medium: "warning";
+        readonly high: "danger";
+        readonly critical: "danger";
+    };
+};

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.js

@@ -0,0 +1,17 @@
+var approvalCardTheme = {
+    baseStyle: "glass-effect ",
+    riskStyles: {
+        low: "bg-[var(--color-success-50)]/40 border-[var(--color-border)]",
+        medium: "bg-[var(--color-warning-50)]/40 border-[var(--color-border)]",
+        high: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+        critical: "bg-[var(--color-danger-50)]/40 border-[var(--color-border)]",
+    },
+    badgeColors: {
+        low: "success",
+        medium: "warning",
+        high: "danger",
+        critical: "danger",
+    },
+};
+
+export { approvalCardTheme };

package/dist/components/ai/ApprovalCard/ApprovalCard.types.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+export type ApprovalRiskLevel = "low" | "medium" | "high" | "critical";
+export type ApprovalMode = "inline" | "modal";
+export interface ApprovalCardProps {
+    /**
+     * Title of the approval request
+     */
+    title: string;
+    /**
+     * Description or context for the user
+     */
+    description?: string;
+    /**
+     * Risk level determining visual severity
+     * @default "medium"
+     */
+    riskLevel?: ApprovalRiskLevel;
+    /**
+     * Display mode: Inline card or Modal dialog
+     * @default "inline"
+     */
+    mode?: ApprovalMode;
+    /**
+     * Callback when user approves the action
+     */
+    onApprove: () => void;
+    /**
+     * Callback when user denies/cancels the action
+     */
+    onDeny: () => void;
+    /**
+     * Optional payload to display (e.g. code snippet, JSON)
+     */
+    children?: ReactNode;
+    /**
+     * Loading state for the approve button
+     */
+    isApproving?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}

package/dist/components/ai/ApprovalCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ApprovalCard";
+export * from "./ApprovalCard.types";

package/dist/components/ai/ArtifactContainer/ArtifactContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ArtifactContainerProps, ArtifactContainerChatProps, ArtifactContainerCanvasProps } from "./ArtifactContainer.types";
+export declare const ArtifactContainer: React.FC<ArtifactContainerProps> & {
+    Chat: React.FC<ArtifactContainerChatProps>;
+    Canvas: React.FC<ArtifactContainerCanvasProps>;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.js

@@ -0,0 +1,136 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useRef, useState, useCallback, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { artifactContainerTheme, handleSizes } from './ArtifactContainer.theme.js';
+
+// Context for compound components
+var ArtifactContainerContext = createContext(undefined);
+var useArtifactContainerContext = function () {
+    var ctx = useContext(ArtifactContainerContext);
+    if (!ctx) {
+        throw new Error("ArtifactContainer compound components must be used within <ArtifactContainer>");
+    }
+    return ctx;
+};
+// Chat Pane Component
+var ArtifactContainerChat = function (_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    useArtifactContainerContext();
+    return (React__default.createElement("div", __assign({ className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.chatPaneStyle, className) }, props), children));
+};
+ArtifactContainerChat.displayName = "ArtifactContainer.Chat";
+// Canvas Pane Component
+var ArtifactContainerCanvas = function (_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    useArtifactContainerContext();
+    return (React__default.createElement("div", __assign({ className: cn(artifactContainerTheme.paneStyle, artifactContainerTheme.canvasPaneStyle, className) }, props), children));
+};
+ArtifactContainerCanvas.displayName = "ArtifactContainer.Canvas";
+var ArtifactContainerRoot = function (_a) {
+    var _b;
+    var _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.defaultSplit, defaultSplit = _d === void 0 ? 50 : _d, _e = _a.minPaneSize, minPaneSize = _e === void 0 ? 20 : _e, onSplitChange = _a.onSplitChange, className = _a.className, children = _a.children, props = __rest(_a, ["direction", "defaultSplit", "minPaneSize", "onSplitChange", "className", "children"]);
+    var containerRef = useRef(null);
+    var _f = useState(defaultSplit), split = _f[0], setSplit = _f[1];
+    var _g = useState(false), isDragging = _g[0], setIsDragging = _g[1];
+    var _h = useState(false), isHovered = _h[0], setIsHovered = _h[1];
+    // Calculate split from pointer position
+    var getSplitFromPosition = useCallback(function (clientX, clientY) {
+        if (!containerRef.current)
+            return split;
+        var rect = containerRef.current.getBoundingClientRect();
+        var percentage;
+        if (direction === "horizontal") {
+            percentage = ((clientX - rect.left) / rect.width) * 100;
+        }
+        else {
+            percentage = ((clientY - rect.top) / rect.height) * 100;
+        }
+        // Clamp to min/max
+        return Math.max(minPaneSize, Math.min(100 - minPaneSize, percentage));
+    }, [direction, minPaneSize, split]);
+    // Handle drag start
+    var handlePointerDown = useCallback(function (e) {
+        e.preventDefault();
+        setIsDragging(true);
+        // Capture cursor globally while dragging
+        document.body.style.cursor =
+            direction === "horizontal" ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        var handleMove = function (moveEvent) {
+            var newSplit = getSplitFromPosition(moveEvent.clientX, moveEvent.clientY);
+            setSplit(newSplit);
+            onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(newSplit);
+        };
+        var handleEnd = function () {
+            setIsDragging(false);
+            // Restore body styles
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [getSplitFromPosition, onSplitChange, direction]);
+    // Double-click to reset to 50%
+    var handleDoubleClick = useCallback(function () {
+        setSplit(50);
+        onSplitChange === null || onSplitChange === void 0 ? void 0 : onSplitChange(50);
+    }, [onSplitChange]);
+    // Context value
+    var contextValue = {
+        direction: direction,
+        split: split,
+    };
+    // Extract Chat and Canvas children
+    var childArray = React__default.Children.toArray(children);
+    var chatChild = childArray.find(function (child) {
+        return React__default.isValidElement(child) && child.type === ArtifactContainerChat;
+    });
+    var canvasChild = childArray.find(function (child) {
+        return React__default.isValidElement(child) && child.type === ArtifactContainerCanvas;
+    });
+    // Calculate pane styles
+    // We substract 1px for the border line between panes
+    var firstPaneStyle = direction === "horizontal"
+        ? { width: "".concat(split, "%") }
+        : { height: "".concat(split, "%") };
+    var secondPaneStyle = direction === "horizontal"
+        ? { width: "".concat(100 - split, "%") }
+        : { height: "".concat(100 - split, "%") };
+    return (React__default.createElement(ArtifactContainerContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: containerRef, className: cn(artifactContainerTheme.containerStyle, direction === "vertical" && "flex-col", className), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, props),
+            chatChild && (React__default.createElement("div", { style: firstPaneStyle, className: artifactContainerTheme.paneStyle },
+                chatChild,
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-border)] transition-opacity duration-300", direction === "horizontal"
+                        ? "top-0 right-0 w-[1px] h-full"
+                        : "bottom-0 left-0 w-full h-[1px]", isHovered || isDragging ? "opacity-100" : "opacity-60") }))),
+            React__default.createElement("div", { className: cn(artifactContainerTheme.handleStyle, handleSizes[direction], isDragging && artifactContainerTheme.handleActiveStyle), style: (_b = {},
+                    // Negative margin to center the handle over the border
+                    _b[direction === "horizontal" ? "marginLeft" : "marginTop"] = direction === "horizontal" ? "-8px" : "-8px",
+                    _b), onPointerDown: handlePointerDown, onDoubleClick: handleDoubleClick, role: "separator", "aria-orientation": direction, "aria-valuenow": Math.round(split), "aria-valuemin": minPaneSize, "aria-valuemax": 100 - minPaneSize, tabIndex: 0, "aria-label": "Resize handle" },
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-background)] border border-[var(--color-border)] shadow-sm flex items-center justify-center transition-all duration-200", 
+                    // Pill Shape
+                    direction === "horizontal"
+                        ? "w-4 h-8 rounded-full"
+                        : "w-8 h-4 rounded-full", 
+                    // State styles
+                    isHovered || isDragging
+                        ? "opacity-100 scale-100"
+                        : "opacity-0 scale-90", isDragging &&
+                        "ring-2 ring-[var(--color-primary-200)] border-[var(--color-primary)]") },
+                    React__default.createElement("div", { className: cn("flex gap-0.5", direction === "horizontal" ? "flex-col" : "flex-row") },
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }),
+                        React__default.createElement("div", { className: "w-0.5 h-0.5 rounded-full bg-[var(--color-text-tertiary)]" }))),
+                React__default.createElement("div", { className: cn("absolute bg-[var(--color-primary)] opacity-0 transition-opacity duration-200", direction === "horizontal" ? "w-[2px] h-full" : "h-[2px] w-full", isDragging && "opacity-100") })),
+            canvasChild && (React__default.createElement("div", { style: secondPaneStyle, className: artifactContainerTheme.paneStyle }, canvasChild)))));
+};
+ArtifactContainerRoot.displayName = "ArtifactContainer";
+// Attach compound components
+var ArtifactContainer = Object.assign(ArtifactContainerRoot, {
+    Chat: ArtifactContainerChat,
+    Canvas: ArtifactContainerCanvas,
+});
+
+export { ArtifactContainer };

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.d.ts

@@ -0,0 +1,6 @@
+import { ArtifactContainerTheme } from "./ArtifactContainer.types";
+export declare const artifactContainerTheme: ArtifactContainerTheme;
+export declare const handleSizes: {
+    horizontal: string;
+    vertical: string;
+};

package/dist/components/ai/ArtifactContainer/ArtifactContainer.theme.js

@@ -0,0 +1,14 @@
+var artifactContainerTheme = {
+    containerStyle: "flex w-full h-full overflow-hidden bg-[var(--color-background)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-sm isolate",
+    paneStyle: "overflow-auto relative min-w-0 min-h-0",
+    chatPaneStyle: "flex flex-col bg-[var(--color-background)] z-0",
+    canvasPaneStyle: "flex flex-col bg-[var(--color-background-secondary)] z-0",
+    handleStyle: "flex-shrink-0 relative z-20 flex items-center justify-center transition-all duration-300 ease-out hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/5 dark:active:bg-white/10 group outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    handleActiveStyle: "bg-black/5 dark:bg-white/5",
+};
+var handleSizes = {
+    horizontal: "w-4 -ml-2 h-full cursor-col-resize",
+    vertical: "h-4 -mt-2 w-full cursor-row-resize",
+};
+
+export { artifactContainerTheme, handleSizes };