@widgetic/design-system 0.3.89 → 0.5.8

package/dist/components/ui/table/table.svelte.d.ts

@@ -3,13 +3,13 @@ export type TableProps = WithElementRef<HTMLTableAttributes>;
 import type { HTMLTableAttributes } from "svelte/elements";
 import type { WithElementRef } from "bits-ui";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TableProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TableProps_ = typeof __propDef.props;
+type TableProps_ = TableProps;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponentTyped<TableProps_, TableEvents, TableSlots> {

package/dist/components/ui/tabs/tabs-content.svelte

@@ -17,7 +17,7 @@
 <TabsPrimitive.Content
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Tabs as TabsPrimitive } from "bits-ui";
 export type TabsContentProps = TabsPrimitive.ContentProps;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TabsContentProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TabsContentProps_ = typeof __propDef.props;
+type TabsContentProps_ = TabsContentProps;
 export type TabsContentEvents = typeof __propDef.events;
 export type TabsContentSlots = typeof __propDef.slots;
 export default class TabsContent extends SvelteComponentTyped<TabsContentProps_, TabsContentEvents, TabsContentSlots> {

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Tabs as TabsPrimitive } from "bits-ui";
 export type TabsListProps = TabsPrimitive.ListProps;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TabsListProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TabsListProps_ = typeof __propDef.props;
+type TabsListProps_ = TabsListProps;
 export type TabsListEvents = typeof __propDef.events;
 export type TabsListSlots = typeof __propDef.slots;
 export default class TabsList extends SvelteComponentTyped<TabsListProps_, TabsListEvents, TabsListSlots> {

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -17,7 +17,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Tabs as TabsPrimitive } from "bits-ui";
 export type TabsTriggerProps = TabsPrimitive.TriggerProps;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TabsTriggerProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TabsTriggerProps_ = typeof __propDef.props;
+type TabsTriggerProps_ = TabsTriggerProps;
 export type TabsTriggerEvents = typeof __propDef.events;
 export type TabsTriggerSlots = typeof __propDef.slots;
 export default class TabsTrigger extends SvelteComponentTyped<TabsTriggerProps_, TabsTriggerEvents, TabsTriggerSlots> {

package/dist/components/ui/textarea/textarea.svelte

@@ -19,7 +19,7 @@
 <textarea
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -3,13 +3,13 @@ export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttribute
 import type { WithElementRef, WithoutChildren } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TextareaProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TextareaProps_ = typeof __propDef.props;
+type TextareaProps_ = TextareaProps;
 export type TextareaEvents = typeof __propDef.events;
 export type TextareaSlots = typeof __propDef.slots;
 export default class Textarea extends SvelteComponentTyped<TextareaProps_, TextareaEvents, TextareaSlots> {

package/dist/components/ui/toggle/toggle.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-transparent",

package/dist/components/ui/toggle/toggle.svelte.d.ts

@@ -1,89 +1,19 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Toggle as TogglePrimitive } from "bits-ui";
 import { SvelteComponentTyped } from "svelte";
-import { type VariantProps } from "tailwind-variants";
-export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
-export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
-export type ToggleVariants = VariantProps<typeof toggleVariants>;
+export type ToggleProps = TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	};
 declare const __propDef: {
-    props: Record<string, never>;
+    props: ToggleProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ToggleProps = typeof __propDef.props;
 export type ToggleEvents = typeof __propDef.events;
 export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+export default class extends SvelteComponentTyped<ToggleProps, typeof __propDef.events, typeof __propDef.slots> {
 }
 export {};

package/dist/components/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -3,13 +3,13 @@ import type { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 export type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
 import { type ToggleVariants } from "../toggle/index.js";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: ToggleGroupItemProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type ToggleGroupItemProps_ = typeof __propDef.props;
+type ToggleGroupItemProps_ = ToggleGroupItemProps;
 export type ToggleGroupItemEvents = typeof __propDef.events;
 export type ToggleGroupItemSlots = typeof __propDef.slots;
 export default class ToggleGroupItem extends SvelteComponentTyped<ToggleGroupItemProps_, ToggleGroupItemEvents, ToggleGroupItemSlots> {

package/dist/components/ui/toggle-group/toggle-group.svelte.d.ts

@@ -1,17 +1,16 @@
+import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
+import type { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 import { SvelteComponentTyped } from "svelte";
-import type { ToggleVariants } from "../toggle/index.js";
-export declare function setToggleGroupCtx(props: ToggleVariants): void;
-export declare function getToggleGroupCtx(): ToggleVariants;
+export type ToggleGroupProps = ToggleGroupPrimitive.RootProps & ToggleVariants;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: ToggleGroupProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ToggleGroupProps = typeof __propDef.props;
 export type ToggleGroupEvents = typeof __propDef.events;
 export type ToggleGroupSlots = typeof __propDef.slots;
-export default class ToggleGroup extends SvelteComponentTyped<ToggleGroupProps, ToggleGroupEvents, ToggleGroupSlots> {
+export default class extends SvelteComponentTyped<ToggleGroupProps, typeof __propDef.events, typeof __propDef.slots> {
 }
 export {};

package/dist/components/ui/tooltip/index.d.ts

@@ -1,6 +1,6 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
+import type { Component } from "svelte";
 import Content from "./tooltip-content.svelte";
-declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
-declare const Trigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
-declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+declare const Root: Component<any>;
+declare const Trigger: Component<any>;
+declare const Provider: Component<any>;
 export { Root, Trigger, Content, Provider, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };

package/dist/components/ui/tooltip/tooltip-content.svelte.d.ts

@@ -2,13 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Tooltip as TooltipPrimitive } from "bits-ui";
 export type TooltipContentProps = TooltipPrimitive.ContentProps;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: TooltipContentProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-type TooltipContentProps_ = typeof __propDef.props;
+type TooltipContentProps_ = TooltipContentProps;
 export type TooltipContentEvents = typeof __propDef.events;
 export type TooltipContentSlots = typeof __propDef.slots;
 export default class TooltipContent extends SvelteComponentTyped<TooltipContentProps_, TooltipContentEvents, TooltipContentSlots> {

package/dist/components/widget-system/Moveable.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
     import { onMount, createEventDispatcher } from 'svelte';
 
-    // Props
+    // COMPONENT PROPS
+    // Class & Style
+    let className = '';
+    export { className as class };
+    export let style: string = "";
+    // Dimensions
     export let width: string = "100%";
     export let height: string = "100%";
     export let minWidth: number = 50;
     export let minHeight: number = 50;
     export let enableResize: boolean = true;
-    export let className: string = "";  // New prop for additional CSS classes
+    export let alwaysShowControls: boolean = false;
     
 
     // Internal state
@@ -47,7 +52,11 @@
 
     // Track key states
     function handleKeyDown(e: KeyboardEvent) {
-        if (e.key === ' ') { // Space key
+        if ((isMac && e.key === 'Meta') || (!isMac && e.key === 'Control')) {
+            isCmdCtrlKeyDown = true;
+            updateContainerClasses();
+            console.log('[Moveable] Cmd/Ctrl key DOWN — drag mode enabled', { key: e.key, isMac });
+        } else if (e.key === ' ') { // Space key
             isSpaceKeyDown = true;
             updateContainerClasses();
             // Prevent page scrolling when space is pressed
@@ -102,10 +111,23 @@
         }
     }
 
+    // Reclaim focus from iframes so Cmd/Ctrl keydown reaches document listeners
+    let lastFocusReclaim = 0;
+    function reclaimFocusFromIframe() {
+        if (document.activeElement?.tagName === 'IFRAME') {
+            const now = Date.now();
+            if (now - lastFocusReclaim > 200) {
+                lastFocusReclaim = now;
+                window.focus();
+            }
+        }
+    }
+
     // Track hover state
     function handleMouseEnter() {
         if (isInitialized) {
             isHovering = true;
+            reclaimFocusFromIframe();
         }
     }
 
@@ -115,7 +137,21 @@
         }
     }
 
+    function handleHoverMouseMove() {
+        reclaimFocusFromIframe();
+    }
+
+
     onMount(() => {
+        // Detect if we're on a Mac (navigator.platform is deprecated, use userAgentData or fallback)
+        isMac = typeof navigator !== 'undefined' && (
+            // @ts-ignore — userAgentData is not yet in all TS typings
+            navigator.userAgentData?.platform === 'macOS' ||
+            navigator.platform?.toUpperCase().indexOf('MAC') >= 0 ||
+            /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+        );
+        console.log('[Moveable] isMac detected:', isMac, 'platform:', navigator.platform);
+
         // Initialize from props first if they are in px format
         const initialWidth = parseSize(width);
         const initialHeight = parseSize(height);
@@ -125,17 +161,17 @@
             currentHeight = initialHeight;
         }
 
-        // After first render, get actual container dimensions
-        setTimeout(() => {
+        // After layout, get actual container dimensions and center
+        requestAnimationFrame(() => {
             const rect = container.getBoundingClientRect();
             
-            // Only update if we couldn't parse from props
             if (currentWidth === 0) currentWidth = rect.width;
             if (currentHeight === 0) currentHeight = rect.height;
             
-            // Set initial position (centered in the parent container if possible)
-            if (container.parentElement) {
-                const parentRect = container.parentElement.getBoundingClientRect();
+            // Center in the canvas (hoverContainer's parent = editable-widget-container)
+            const boundsElement = hoverContainer?.parentElement;
+            if (boundsElement) {
+                const parentRect = boundsElement.getBoundingClientRect();
                 currentLeft = (parentRect.width - currentWidth) / 2;
                 currentTop = (parentRect.height - currentHeight) / 2;
             } else {
@@ -143,10 +179,15 @@
                 currentTop = 0;
             }
 
-            // console.log("Moveable component initialized", { currentWidth, currentHeight, currentLeft, currentTop });
-            // Set initialized to true only after component is fully set up
             isInitialized = true;
-        }, 0);
+        });
+
+        // Native event listeners for hover (reliable across Svelte 4/5 compilation)
+        if (hoverContainer) {
+            hoverContainer.addEventListener('mouseenter', handleMouseEnter);
+            hoverContainer.addEventListener('mouseleave', handleMouseLeave);
+            hoverContainer.addEventListener('mousemove', handleHoverMouseMove);
+        }
 
         // Add key event listeners
         document.addEventListener('keydown', handleKeyDown);
@@ -160,13 +201,23 @@
             document.removeEventListener('keydown', handleKeyDown);
             document.removeEventListener('keyup', handleKeyUp);
             window.removeEventListener('blur', cancelOperation);
+            if (hoverContainer) {
+                hoverContainer.removeEventListener('mouseenter', handleMouseEnter);
+                hoverContainer.removeEventListener('mouseleave', handleMouseLeave);
+                hoverContainer.removeEventListener('mousemove', handleHoverMouseMove);
+            }
         };
     });
 
     // Handle mouse events for drag
     function handleMouseDown(e: MouseEvent) {
-        // Only allow dragging when Space key is down
-        if (!isSpaceKeyDown || isResizing) return;
+        console.log('[Moveable] mousedown on container', {
+            isCmdCtrlKeyDown, isSpaceKeyDown, isResizing,
+            target: (e.target as HTMLElement).className,
+            tagName: (e.target as HTMLElement).tagName
+        });
+        // Only allow dragging when Command/Control key or Space key is down
+        if (!(isCmdCtrlKeyDown || isSpaceKeyDown) || isResizing) return;
         
         // Prevent starting a drag on resize handles
         if ((e.target as HTMLElement).classList.contains('resize-handle')) {
@@ -422,12 +473,17 @@
     }
 </script>
 
+<!-- Full-screen overlay during drag/resize to prevent iframe from swallowing mouseup -->
+{#if isDragging || isResizing}
+    <div class="interaction-overlay"></div>
+{/if}
+
 <!-- Hover area container with padding -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div 
     bind:this={hoverContainer}
-    class="hover-container {className}"
-    style="position: absolute; left: {currentLeft - 8}px; top: {currentTop - 8}px; width: {currentWidth + 16}px; height: {currentHeight + 16}px;"
+    class="{className ? className + ' ' : ''}moveable-root-ct hover-container"
+    style="{style ? style : ''}position: absolute; left: {currentLeft - 8}px; top: {currentTop - 8}px; width: {currentWidth + 16}px; height: {currentHeight + 16}px;"
     on:mouseenter={handleMouseEnter}
     on:mouseleave={handleMouseLeave}
 >
@@ -435,12 +491,18 @@
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div 
         bind:this={container}
-        class="moveable-container {isSpaceKeyDown ? 'drag-mode' : ''} {isShiftKeyDown && !isAltOptKeyDown ? 'proportional-mode' : ''} {isAltOptKeyDown && !isShiftKeyDown ? 'symmetrical-mode' : ''} {isShiftKeyDown && isAltOptKeyDown ? 'combined-mode' : ''} {isResizing ? 'resizing-mode' : ''}"
-        class:hovering={isHovering}
+        class="moveable-content-ct moveable-container {isCmdCtrlKeyDown || isSpaceKeyDown ? 'drag-mode' : ''} {isShiftKeyDown && !isAltOptKeyDown ? 'proportional-mode' : ''} {isAltOptKeyDown && !isShiftKeyDown ? 'symmetrical-mode' : ''} {isShiftKeyDown && isAltOptKeyDown ? 'combined-mode' : ''} {isResizing ? 'resizing-mode' : ''}"
+        class:hovering={isHovering || alwaysShowControls}
         style="position: absolute; left: 8px; top: 8px; width: {currentWidth}px; height: {currentHeight}px;"
         on:mousedown={handleMouseDown}
     >
         <slot></slot>
+
+        <!-- Drag overlay: real DOM element that sits above iframes to capture mouse events in drag mode -->
+        {#if isCmdCtrlKeyDown || isSpaceKeyDown}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="drag-overlay" on:mousedown={handleMouseDown}></div>
+        {/if}
         
         {#if enableResize}
             <!-- Resize handles for all corners -->
@@ -471,9 +533,9 @@
         {/if}
 
         <!-- Size information display -->
-        {#if (isResizing || showSizeInfo) && currentWidth > 0 && currentHeight > 0}
+        {#if (alwaysShowControls || isHovering || isResizing || isDragging) && currentWidth > 0 && currentHeight > 0}
             <div class="size-info">
-                {Math.round(currentWidth)} × {Math.round(currentHeight)}
+                {Math.round(currentWidth)}px × {Math.round(currentHeight)}px
             </div>
         {/if}
     </div>
@@ -487,6 +549,14 @@
 </div> -->
 
 <style>
+    /* Full-screen overlay to capture mouse events during drag/resize (prevents iframe from eating mouseup) */
+    .interaction-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        cursor: move;
+    }
+
     /* Color variables for mode styles */
     :root {
         /* Drag mode - Light Blue */
@@ -518,7 +588,7 @@
         box-sizing: border-box;
         cursor: default;
         border: 1px solid transparent;
-        z-index: 1; /* Lower z-index for the widget */
+        z-index: 1;
     }
 
     /* Move cursor only when hovering the container in drag mode */
@@ -542,7 +612,15 @@
         background-color: rgba(33, 150, 243, 0.15);
         background-color: color-mix(in srgb, var(--drag-color), transparent calc(100% - calc(var(--drag-opacity) * 100%)));
         border-color: var(--drag-color);
-        pointer-events: auto; /* Block pointer events when in drag mode */
+        pointer-events: none;
+    }
+
+    /* Real overlay that captures mouse events above iframes */
+    .drag-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        cursor: move;
     }
     
     /* Make sure resize handles maintain their cursors even in drag mode */
@@ -681,7 +759,6 @@
         border-radius: 4px;
         font-size: 12px;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-        width: -moz-fit-content;
         width: fit-content;
         z-index: 200; /* Highest z-index for info tooltip */
     }

package/dist/components/widget-system/Moveable.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        class?: string;
+        style?: string;
         width?: string;
         height?: string;
         minWidth?: number;
         minHeight?: number;
         enableResize?: boolean;
-        className?: string;
+        alwaysShowControls?: boolean;
         getDimensions?: () => {
             width: number;
             height: number;

package/dist/icons/CheckerBoardBackground.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+export type CheckerBoardBackgroundProps = any;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: CheckerBoardBackgroundProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type CheckerBoardBackgroundProps = typeof __propDef.props;
 export type CheckerBoardBackgroundEvents = typeof __propDef.events;
 export type CheckerBoardBackgroundSlots = typeof __propDef.slots;
-export default class CheckerBoardBackground extends SvelteComponentTyped<CheckerBoardBackgroundProps, CheckerBoardBackgroundEvents, CheckerBoardBackgroundSlots> {
+export default class extends SvelteComponentTyped<CheckerBoardBackgroundProps, typeof __propDef.events, typeof __propDef.slots> {
 }
 export {};

package/dist/icons/OpacitySliderArrows.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+export type OpacitySliderArrowsProps = any;
 declare const __propDef: {
-    props: Record<string, never>;
+    props: OpacitySliderArrowsProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type OpacitySliderArrowsProps = typeof __propDef.props;
 export type OpacitySliderArrowsEvents = typeof __propDef.events;
 export type OpacitySliderArrowsSlots = typeof __propDef.slots;
-export default class OpacitySliderArrows extends SvelteComponentTyped<OpacitySliderArrowsProps, OpacitySliderArrowsEvents, OpacitySliderArrowsSlots> {
+export default class extends SvelteComponentTyped<OpacitySliderArrowsProps, typeof __propDef.events, typeof __propDef.slots> {
 }
 export {};

package/dist/icons/eye-off.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /><path d="M3 3l18 18" /></svg>

package/dist/icons/eye.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>

package/dist/shad-editor/index.d.ts

@@ -0,0 +1 @@
+export { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from '../components/shad-editor';

package/dist/shad-editor/index.js

@@ -0,0 +1 @@
+export { ShadEditor } from '../components/shad-editor';