@widgetic/design-system 0.5.10 → 0.5.11

package/dist/components/modals/RenameDialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // Svelte imports
-  import { createEventDispatcher, onMount, tick } from 'svelte';
+  import { createEventDispatcher, tick } from 'svelte';
 
   // Local imports
   import { Button } from '../ui/button';
@@ -33,7 +33,6 @@
 
   let inputValue = '';
   let inputElement: HTMLInputElement;
-  let preventFocusSteal = false;
   let hasAttemptedSubmit = false; // Track if user has attempted to submit
   let isValid = false; // Track if input is valid
 
@@ -67,19 +66,11 @@
     
     if (!inputElement) return;
     
-    // Set flag to prevent focus stealing
-    preventFocusSteal = true;
-    
     // Focus the input
     inputElement.focus();
     
     // Select all text
     inputElement.setSelectionRange(0, inputElement.value.length);
-    
-    // Keep the flag active for a while to prevent focus stealing
-    setTimeout(() => {
-      preventFocusSteal = false;
-    }, 1000);
   }
 
   // Simple function to handle input initialization
@@ -96,35 +87,6 @@
     setTimeout(focusAndSelectInput, 50);
   }
 
-  // Use onMount to set up event listeners to prevent focus stealing
-  onMount(() => {
-    // Create a function to handle mousedown events
-    const handleMouseDown = (e: MouseEvent) => {
-      // If we're trying to prevent focus stealing and the click is outside our input
-      if (preventFocusSteal && inputElement && !inputElement.contains(e.target as Node)) {
-        // Prevent the default action (focus change)
-        e.preventDefault();
-        e.stopPropagation();
-        
-        // Refocus our input
-        inputElement.focus();
-        
-        // Reselect the text
-        inputElement.setSelectionRange(0, inputElement.value.length);
-        
-        return false;
-      }
-    };
-    
-    // Add the event listener to the document
-    document.addEventListener('mousedown', handleMouseDown, true);
-    
-    // Clean up when the component is destroyed
-    return () => {
-      document.removeEventListener('mousedown', handleMouseDown, true);
-    };
-  });
-
   const dispatch = createEventDispatcher();
 
   async function handleRename() {
@@ -147,11 +109,11 @@
         return;
       }
 
-      console.log('Attempting rename:', {
-        from: itemName,
-        to: inputValue,
-        itemId
-      });
+      // console.log('Attempting rename:', {
+      //   from: itemName,
+      //   to: inputValue,
+      //   itemId
+      // });
 
       // If parent component handles rename, dispatch event
       if (shouldUseCustomRenameFunction) {
@@ -247,18 +209,6 @@
           }, 0);
         }}
         onblur={(e) => {
-          // Only allow blur if we're not preventing focus stealing
-          if (preventFocusSteal) {
-            // Refocus immediately
-            setTimeout(() => {
-              if (inputElement) {
-                inputElement.focus();
-                inputElement.setSelectionRange(0, inputElement.value.length);
-              }
-            }, 0);
-            return;
-          }
-          
           const target = e.target as HTMLInputElement;
           target.placeholder = computedPlaceholder;
         }}

package/dist/components/modals/RenameDialog.svelte.d.ts

@@ -1,35 +1,39 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        isOpen?: boolean;
-        itemName?: string;
-        itemType?: string;
-        itemId?: string;
-        title?: string;
-        placeholder?: string;
-        confirmLabel?: string;
-        cancelLabel?: string;
-        width?: string;
-        height?: string;
-        target?: string;
-        maxLength?: number;
-        shouldUseCustomRenameFunction?: boolean;
-        modalType?: string;
-        modalData?: any;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        rename: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RenameDialogProps = typeof __propDef.props;
-export type RenameDialogEvents = typeof __propDef.events;
-export type RenameDialogSlots = typeof __propDef.slots;
-export default class RenameDialog extends SvelteComponentTyped<RenameDialogProps, RenameDialogEvents, RenameDialogSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const RenameDialog: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    isOpen?: boolean;
+    itemName?: string;
+    itemType?: string;
+    itemId?: string;
+    title?: string;
+    placeholder?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    width?: string;
+    height?: string;
+    target?: string;
+    maxLength?: number;
+    shouldUseCustomRenameFunction?: boolean;
+    modalType?: string;
+    modalData?: any;
+}, {
+    rename: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RenameDialog = InstanceType<typeof RenameDialog>;
+export default RenameDialog;

package/dist/components/modals/modalStore.js

@@ -19,14 +19,12 @@ export const modalState = writable(getInitialState());
 export const isModalOpen = writable(getInitialState().isOpen);
 // Keep `isModalOpen` in sync (without persisting to localStorage)
 modalState.subscribe(state => {
-    if (showLogs)
-        console.log('Modal state updated:', state);
+    // if (showLogs) console.log('Modal state updated:', state);
     isModalOpen.set(state.isOpen);
 });
 // Helper functions to manage modal state
 export function openModal(modalType, data) {
-    if (showLogs)
-        console.log('Opening modal:', { modalType, data });
+    // if (showLogs) console.log('Opening modal:', { modalType, data });
     modalState.set({
         isOpen: true,
         modalType,
@@ -34,7 +32,6 @@ export function openModal(modalType, data) {
     });
 }
 export function closeModal() {
-    if (showLogs)
-        console.log('Closing modal');
+    // if (showLogs) console.log('Closing modal');
     modalState.set({ isOpen: false });
 }

package/dist/components/navigation/Breadcrumbs.svelte

@@ -73,14 +73,14 @@
 
   // Only log on mount and significant changes
   $: if (browser && (currentPath?.length)) {
-    if(showLogs) console.log('Breadcrumbs significant update:', {
-      currentPath,
-      currentPathNames,
-      shouldShowEllipsis,
-      availableWidth,
-      itemsToShow,
-      breadcrumbsPositioned
-    });
+    // if(showLogs) console.log('Breadcrumbs significant update:', {
+    //   currentPath,
+    //   currentPathNames,
+    //   shouldShowEllipsis,
+    //   availableWidth,
+    //   itemsToShow,
+    //   breadcrumbsPositioned
+    // });
   }
 
   /***
@@ -207,9 +207,13 @@
             </div>
           </Tooltip.Trigger>
           {#if showBackTooltip}
-            <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-              Back
-            </Tooltip.Content>
+            <!-- Portaled to <body>: the header row around this nav is overflow-hidden, which
+                 otherwise clips the tooltip at the header's bottom edge. -->
+            <Tooltip.Portal>
+              <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
+                Back
+              </Tooltip.Content>
+            </Tooltip.Portal>
           {/if}
         </Tooltip.Root>
 
@@ -233,9 +237,11 @@
             </div>
           </Tooltip.Trigger>
           {#if showForwardTooltip}
-            <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
-              Forward
-            </Tooltip.Content>
+            <Tooltip.Portal>
+              <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
+                Forward
+              </Tooltip.Content>
+            </Tooltip.Portal>
           {/if}
         </Tooltip.Root>
       </div>

package/dist/components/navigation/Breadcrumbs.svelte.d.ts

@@ -1,31 +1,35 @@
-import { SvelteComponentTyped } from "svelte";
 import type { BreadcrumbsProps } from './types.ts';
-declare const __propDef: {
-    props: {
-        /***
-           * COMPONENT PROPS
-           **/ class?: string;
-        style?: string;
-        clientHeight?: number;
-        currentPath?: BreadcrumbsProps["currentPath"];
-        currentPathNames?: BreadcrumbsProps["currentPathNames"];
-        isLoading?: BreadcrumbsProps["isLoading"];
-        showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
-        canGoBack?: BreadcrumbsProps["canGoBack"];
-        canGoForward?: BreadcrumbsProps["canGoForward"];
-        onNavigate?: BreadcrumbsProps["onNavigate"];
-        onBack?: BreadcrumbsProps["onBack"];
-        onForward?: BreadcrumbsProps["onForward"];
-        showDebugVisualizer?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type BreadcrumbsProps_ = typeof __propDef.props;
-export { BreadcrumbsProps_ as BreadcrumbsProps };
-export type BreadcrumbsEvents = typeof __propDef.events;
-export type BreadcrumbsSlots = typeof __propDef.slots;
-export default class Breadcrumbs extends SvelteComponentTyped<BreadcrumbsProps_, BreadcrumbsEvents, BreadcrumbsSlots> {
+    z_$$bindings?: Bindings;
 }
+declare const Breadcrumbs: $$__sveltets_2_IsomorphicComponent<{
+    /***
+       * COMPONENT PROPS
+       **/ class?: string;
+    style?: string;
+    clientHeight?: number;
+    currentPath?: BreadcrumbsProps["currentPath"];
+    currentPathNames?: BreadcrumbsProps["currentPathNames"];
+    isLoading?: BreadcrumbsProps["isLoading"];
+    showNavigationButtons?: BreadcrumbsProps["showNavigationButtons"];
+    canGoBack?: BreadcrumbsProps["canGoBack"];
+    canGoForward?: BreadcrumbsProps["canGoForward"];
+    onNavigate?: BreadcrumbsProps["onNavigate"];
+    onBack?: BreadcrumbsProps["onBack"];
+    onForward?: BreadcrumbsProps["onForward"];
+    showDebugVisualizer?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumbs = InstanceType<typeof Breadcrumbs>;
+export default Breadcrumbs;