@widgetic/design-system 0.3.89 → 0.5.7

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

@@ -6,6 +6,6 @@ import Trigger from "./select-trigger.svelte";
 import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
 declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
 export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton };

package/dist/components/ui/select/select-item.svelte

@@ -22,7 +22,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -19,7 +19,7 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/slider/slider.svelte

@@ -32,7 +32,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

package/dist/components/ui/switch/switch.svelte

@@ -19,7 +19,7 @@
 	bind:ref
 	bind:checked
 	class={cn(
-		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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-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/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/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

@@ -10,7 +10,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         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<{
+}, 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-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", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;
@@ -50,7 +50,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         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<{
+}, 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-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", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;

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/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/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';

package/dist/styles/fonts.css

@@ -1,3 +1,6 @@
+/* Tailwind config */
+/* @config "../../../tailwind.config.ts"; */
+
 /*** GLOBAL STYLE FONTS ***/
 
   /* BL MELODY FAMILY: rules and classes */
@@ -6,7 +9,8 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-Medium.woff2') format('woff2');
+    /* Absolute /fonts/… so consumer Vite builds (site) resolve from static/, not _app/immutable/assets/ */
+    src: url('/fonts/BLMelody/BLMelody-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
@@ -14,7 +18,7 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-SemiBold.woff2') format('woff2');
+    src: url('/fonts/BLMelody/BLMelody-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
@@ -22,53 +26,54 @@
 
   @font-face {
     font-family: 'BL Melody';
-    src: url('@widgetic/design-system/fonts/BLMelody/BLMelody-Bold.woff2') format('woff2');
+    src: url('/fonts/BLMelody/BLMelody-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
 
-  .h1 {
+/* Convert classes to utilities */
+@utility h1 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 144px;
     line-height: 0.85;
-  }
+}
 
-  .h2 {
+@utility h2 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 72px;
     line-height: 0.96;
-  }
+}
 
-  .h3 {
+@utility h3 {
     font-family: 'BL Melody';
     font-weight: 700;
     font-size: 56px;
     line-height: 1;
-  }
+}
 
-  .h4 {
+@utility h4 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 32px;
     line-height: 1.1;
-  }
+}
 
-  .h5 {
+@utility h5 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 24px;
     line-height: 1.2;
-  }
+}
 
-  .h6 {
+@utility h6 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 14px;
     line-height: 1;
-  }
+}
 
 
 
@@ -76,7 +81,7 @@
   /* Riegla Regular */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Regular.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -85,7 +90,7 @@
   /* Riegla Italic */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Italic.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Italic.otf') format('opentype');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
@@ -94,7 +99,7 @@
   /* Riegla Bold */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Bold.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Bold.otf') format('opentype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -103,7 +108,7 @@
   /* Riegla Bold Italic */
   @font-face {
     font-family: 'Riegla Regular';
-    src: url('@widgetic/design-system/fonts/Riegla/Riegla-Bold Italic.otf') format('opentype');
+    src: url('/fonts/Riegla/Riegla-Bold Italic.otf') format('opentype');
     font-weight: 700;
     font-style: italic;
     font-display: swap;
@@ -112,61 +117,68 @@
   /* Riegla Medium */
   @font-face {
     font-family: 'Riegla Medium';
-    src: url('@widgetic/design-system/fonts/Riegla/RieglaMedium-Regular.otf') format('opentype');
+    src: url('/fonts/Riegla/RieglaMedium-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
 
-  .subtitle1 {
+@utility subtitle1 {
     font-family: 'Riegla Regular';
     font-size: 32px;
     line-height: 1.2;
-  }
+}
 
-  .subtitle2 {
+@utility subtitle2 {
     font-family: 'Riegla Regular';
     font-size: 24px;
     line-height: 1.3;
-  }
+}
 
-  .body-medium {
-    font-family: 'Riegla Medium' !important;
-    font-size: 18px !important;
-    font-weight: 400 !important;
-    line-height: 1.4 !important;
-  }
+@utility body-medium {
+    font-family: 'Riegla Medium';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+}
 
-  .body {
-    font-family: 'Riegla Regular' !important;
-    font-size: 18px !important;
-    line-height: 1.4 !important;
-  }
+@utility body {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+}
 
-  .subtext {
-    font-family: 'Riegla Regular' !important;
-    font-size: 16px !important;
-    line-height: 1.4 !important;
-  }
+@utility body-bold {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+    font-weight: 700;
+}
 
-  .caption {
+@utility subtext {
+    font-family: 'Riegla Regular';
+    font-size: 16px;
+    line-height: 1.4;
+}
+
+@utility caption {
     font-family: 'Riegla Medium';
-    font-weight: 400 !important;
+    font-weight: 400;
     font-size: 14px;
     line-height: 1.2;
-  }
+}
 
-  .link {
+@utility link {
     font-family: 'Riegla Medium';
     font-size: 14px;
     line-height: 1;
     text-decoration: underline;
-  }
+}
 
-  .tag {
+@utility tag {
     font-family: 'Riegla Medium';
     font-size: 11px;
     line-height: 16px;
     text-transform: uppercase;
-  }
+}