@moldable-ai/ui 0.2.8 → 0.2.10

package/dist/components/rich-media-player.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { FastForward, Pause, Play, Rewind, Volume2, VolumeX, } from 'lucide-react';
+import { cn } from '../lib/utils';
+const PLAYBACK_RATES = [0.75, 1, 1.25, 1.5, 2];
+function formatTime(value) {
+    if (!Number.isFinite(value) || value < 0)
+        return '0:00';
+    const totalSeconds = Math.floor(value);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) {
+        return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    }
+    return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+function safeDuration(duration) {
+    return Number.isFinite(duration) && duration > 0 ? duration : 0;
+}
+export function RichMediaPlayer({ className, kind, src, title, }) {
+    const mediaRef = useRef(null);
+    const containerRef = useRef(null);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isMuted, setIsMuted] = useState(false);
+    const [volume, setVolume] = useState(1);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const durationValue = safeDuration(duration);
+    const canSeek = durationValue > 0;
+    const isAudio = kind === 'audio';
+    const mediaTitle = useMemo(() => {
+        if (title)
+            return title;
+        try {
+            return decodeURIComponent(src.split('/').pop()?.split('?')[0] ?? src);
+        }
+        catch {
+            return src;
+        }
+    }, [src, title]);
+    const setMediaElement = useCallback((element) => {
+        mediaRef.current = element;
+    }, []);
+    const togglePlayback = () => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        if (media.paused) {
+            void media.play();
+        }
+        else {
+            media.pause();
+        }
+    };
+    const seekBy = (offset) => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        media.currentTime = Math.max(0, Math.min(durationValue, media.currentTime + offset));
+    };
+    const seekTo = (value) => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        media.currentTime = value;
+        setCurrentTime(value);
+    };
+    const changeVolume = (value) => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        media.volume = value;
+        media.muted = value === 0;
+        setVolume(value);
+        setIsMuted(value === 0);
+    };
+    const toggleMuted = () => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        const nextMuted = !media.muted;
+        media.muted = nextMuted;
+        setIsMuted(nextMuted);
+    };
+    const cyclePlaybackRate = () => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        const currentIndex = PLAYBACK_RATES.findIndex((rate) => rate === playbackRate);
+        const nextRate = PLAYBACK_RATES[(currentIndex + 1) % PLAYBACK_RATES.length] ?? 1;
+        media.playbackRate = nextRate;
+        setPlaybackRate(nextRate);
+    };
+    const controls = (_jsxs("div", { className: cn('flex flex-col gap-2 text-white', isAudio ? 'p-3' : 'bg-gradient-to-b from-transparent via-black/65 to-neutral-950 px-3 pt-10 pb-3'), children: [_jsx("input", { "aria-label": "Seek", className: "h-2 w-full cursor-pointer accent-white disabled:cursor-default disabled:opacity-50", disabled: !canSeek, max: durationValue, min: 0, onChange: (event) => seekTo(Number(event.currentTarget.value)), step: 0.1, type: "range", value: Math.min(currentTime, durationValue) }), _jsxs("div", { className: "flex h-10 items-center gap-3 px-1", children: [_jsx("button", { "aria-label": isPlaying ? 'Pause' : 'Play', className: "cursor-pointer rounded-full p-1 text-white transition-colors hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: togglePlayback, type: "button", children: isPlaying ? _jsx(Pause, { className: "size-6" }) : _jsx(Play, { className: "size-6" }) }), _jsx("button", { "aria-label": "Rewind 10 seconds", className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: () => seekBy(-10), type: "button", children: _jsx(Rewind, { className: "size-5" }) }), _jsx("button", { "aria-label": "Forward 10 seconds", className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: () => seekBy(10), type: "button", children: _jsx(FastForward, { className: "size-5" }) }), _jsxs("div", { className: "group/volume flex items-center gap-2", children: [_jsx("button", { "aria-label": isMuted ? 'Unmute' : 'Mute', className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: toggleMuted, type: "button", children: isMuted || volume === 0 ? (_jsx(VolumeX, { className: "size-5" })) : (_jsx(Volume2, { className: "size-5" })) }), _jsx("input", { "aria-label": "Volume", className: "h-2 w-0 cursor-pointer accent-white opacity-0 transition-all group-hover/volume:w-20 group-hover/volume:opacity-100 focus:w-20 focus:opacity-100", max: 1, min: 0, onChange: (event) => changeVolume(Number(event.currentTarget.value)), step: 0.05, type: "range", value: isMuted ? 0 : volume })] }), _jsxs("span", { className: "ml-auto min-w-28 text-right font-mono text-xs text-white/80", children: [formatTime(currentTime), " / ", formatTime(durationValue)] }), _jsxs("button", { "aria-label": "Change playback speed", className: "cursor-pointer rounded px-2 py-1 font-mono text-xs text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: cyclePlaybackRate, type: "button", children: [playbackRate, "x"] })] })] }));
+    return (_jsx("div", { className: cn('not-prose overflow-hidden rounded-lg border border-black/5 bg-neutral-950 text-white shadow-sm dark:border-white/10', className), ref: containerRef, children: _jsxs("div", { className: cn('group/mediaplayer relative w-full overflow-hidden', !isAudio && 'bg-black'), children: [isAudio ? (_jsx("audio", { "aria-label": mediaTitle, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), preload: "metadata", ref: setMediaElement, src: src })) : (_jsx("video", { className: "h-auto max-h-[600px] min-h-[225px] w-full bg-black object-contain", onClick: togglePlayback, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), playsInline: true, preload: "metadata", ref: setMediaElement, src: src })), _jsx("div", { className: cn(isAudio ? 'bg-neutral-950' : 'absolute right-0 bottom-0 left-0 transition-transform duration-300', !isAudio && isPlaying && 'translate-y-[calc(100%-36px)] group-hover/mediaplayer:translate-y-0'), children: controls })] }) }));
+}

package/dist/components/ui/resizable.d.ts

@@ -1,6 +1,9 @@
 import { type GroupProps, type PanelProps, type SeparatorProps } from 'react-resizable-panels';
 declare function ResizablePanelGroup({ className, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
-declare function ResizablePanel({ ...props }: PanelProps): import("react/jsx-runtime").JSX.Element;
+type ResizablePanelProps = PanelProps & {
+    groupResizeBehavior?: string;
+};
+declare function ResizablePanel({ groupResizeBehavior: _groupResizeBehavior, ...props }: ResizablePanelProps): import("react/jsx-runtime").JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: SeparatorProps & {
     withHandle?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,UAAU,EAEf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAA;AAG/B,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAW/D;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAE/C;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,UAAU,EAEf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAA;AAG/B,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAW/D;AAED,KAAK,mBAAmB,GAAG,UAAU,GAAG;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAErB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/resizable.js

@@ -6,7 +6,7 @@ import { cn } from '../../lib/utils';
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(Group, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
 }
-function ResizablePanel({ ...props }) {
+function ResizablePanel({ groupResizeBehavior: _groupResizeBehavior, ...props }) {
     return _jsx(Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({ withHandle, className, ...props }) {

package/dist/index.d.ts

@@ -5,7 +5,9 @@ export { useMoldableCommands, useMoldableCommand, useMoldableAppCommands, isInMo
 export * from './components/ui';
 export { useIsMobile } from './hooks/use-mobile';
 export { Markdown } from './components/markdown';
+export { RichMediaPlayer, type RichMediaPlayerProps, } from './components/rich-media-player';
 export { CodeBlock } from './components/code-block';
 export { WidgetLayout } from './components/widget-layout';
+export { AppErrorBoundary } from './components/app-error-boundary';
 export * from './components/chat';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AAG9E,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAA;AAGvB,cAAc,iBAAiB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAGhC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AAG9E,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAA;AAGvB,cAAc,iBAAiB,CAAA;AAG/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAGzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAGlE,cAAc,mBAAmB,CAAA"}

package/dist/index.js

@@ -12,9 +12,12 @@ export * from './components/ui';
 export { useIsMobile } from './hooks/use-mobile';
 // Export Markdown
 export { Markdown } from './components/markdown';
+export { RichMediaPlayer, } from './components/rich-media-player';
 // Export CodeBlock
 export { CodeBlock } from './components/code-block';
 // Export WidgetLayout
 export { WidgetLayout } from './components/widget-layout';
+// Export app error boundary
+export { AppErrorBoundary } from './components/app-error-boundary';
 // Export chat components
 export * from './components/chat';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Shared UI components for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",
@@ -43,6 +43,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",

package/src/styles/index.css

@@ -68,6 +68,31 @@
   --chat-safe-padding: var(--chat-safe-padding);
 }
 
+@keyframes moldable-chat-shimmer {
+  0% {
+    background-position: 140% 50%;
+  }
+  100% {
+    background-position: -40% 50%;
+  }
+}
+
+.moldable-chat-shimmer {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklch, var(--muted-foreground) 72%, transparent) 0%,
+    color-mix(in oklch, var(--foreground) 92%, white 8%) 42%,
+    color-mix(in oklch, var(--foreground) 100%, white 16%) 50%,
+    color-mix(in oklch, var(--foreground) 92%, white 8%) 58%,
+    color-mix(in oklch, var(--muted-foreground) 72%, transparent) 100%
+  );
+  background-size: 240% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: moldable-chat-shimmer 1.8s ease-in-out infinite;
+}
+
 :root {
   --radius: 0.65rem;
   --background: oklch(1 0 0);

package/dist/lib/commands.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=commands.test.d.ts.map

package/dist/lib/commands.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"commands.test.d.ts","sourceRoot":"","sources":["../../src/lib/commands.test.ts"],"names":[],"mappings":""}

package/dist/lib/commands.test.js

@@ -1,111 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-// Re-implement isInMoldable for testing (since it accesses window)
-function isInMoldable() {
-    if (typeof window === 'undefined')
-        return false;
-    return window.parent !== window;
-}
-describe('commands utilities', () => {
-    describe('isInMoldable', () => {
-        const originalWindow = global.window;
-        afterEach(() => {
-            // Restore original window
-            if (originalWindow) {
-                global.window = originalWindow;
-            }
-        });
-        it('returns false when window is undefined (SSR)', () => {
-            // @ts-expect-error - intentionally setting to undefined
-            global.window = undefined;
-            // Re-evaluate with undefined window
-            const result = typeof window === 'undefined' ? false : window.parent !== window;
-            expect(result).toBe(false);
-        });
-        it('returns false when parent equals window (not in iframe)', () => {
-            // jsdom default: window.parent === window
-            expect(isInMoldable()).toBe(false);
-        });
-        it('returns true when parent differs from window (in iframe)', () => {
-            // Mock the iframe scenario
-            const mockParent = {};
-            const originalParent = window.parent;
-            Object.defineProperty(window, 'parent', {
-                value: mockParent,
-                writable: true,
-                configurable: true,
-            });
-            expect(isInMoldable()).toBe(true);
-            // Restore
-            Object.defineProperty(window, 'parent', {
-                value: originalParent,
-                writable: true,
-                configurable: true,
-            });
-        });
-    });
-    describe('CommandAction types', () => {
-        it('navigate action has path', () => {
-            const action = { type: 'navigate', path: '/settings' };
-            expect(action.type).toBe('navigate');
-            expect(action.path).toBe('/settings');
-        });
-        it('message action has payload', () => {
-            const action = { type: 'message', payload: { foo: 'bar' } };
-            expect(action.type).toBe('message');
-            expect(action.payload).toEqual({ foo: 'bar' });
-        });
-        it('focus action has target', () => {
-            const action = { type: 'focus', target: 'input-field' };
-            expect(action.type).toBe('focus');
-            expect(action.target).toBe('input-field');
-        });
-    });
-    describe('AppCommand structure', () => {
-        it('accepts valid command definition', () => {
-            const command = {
-                id: 'add-todo',
-                label: 'Add Todo',
-                shortcut: 'a',
-                icon: '➕',
-                group: 'Tasks',
-                action: { type: 'message', payload: {} },
-            };
-            expect(command.id).toBe('add-todo');
-            expect(command.label).toBe('Add Todo');
-            expect(command.shortcut).toBe('a');
-            expect(command.icon).toBe('➕');
-            expect(command.group).toBe('Tasks');
-        });
-        it('works with minimal required fields', () => {
-            const command = {
-                id: 'test',
-                label: 'Test Command',
-                action: { type: 'navigate', path: '/' },
-            };
-            expect(command.id).toBeDefined();
-            expect(command.label).toBeDefined();
-            expect(command.action).toBeDefined();
-        });
-    });
-    describe('CommandMessage structure', () => {
-        it('has correct type marker', () => {
-            const message = {
-                type: 'moldable:command',
-                command: 'add-todo',
-                payload: { text: 'Buy milk' },
-            };
-            expect(message.type).toBe('moldable:command');
-            expect(message.command).toBe('add-todo');
-            expect(message.payload).toEqual({ text: 'Buy milk' });
-        });
-        it('works without payload', () => {
-            const message = {
-                type: 'moldable:command',
-                command: 'refresh',
-            };
-            expect(message.type).toBe('moldable:command');
-            expect(message.command).toBe('refresh');
-            expect(message.payload).toBeUndefined();
-        });
-    });
-});