@widgetic/design-system 0.3.68

package/dist/components/modals/Portal.svelte

@@ -0,0 +1,104 @@
+<!-- Portal component for mounting elements outside their normal DOM hierarchy -->
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+
+    /**
+     * Component props
+     */
+    let defaultTarget: string = 'portal-element';
+    export let target: string | HTMLElement | undefined = defaultTarget;
+    export let clickThrough = false; // Whether to allow click events to pass through
+    // Class
+    let className = '';
+    export { className as class };
+    // Style prop
+    export let style = '';
+    export let clientWidth = 0;
+    export let clientHeight = 0;
+
+    /**
+     * Local Variables
+     */
+    let host: HTMLElement; // host(target) container of the portal: parent target of the portal
+    let portal: HTMLElement; // root portal element
+    // show logs
+    let showLogs = false;
+
+    onMount(() => {
+        if(showLogs) console.log('DS Portal target:', target);
+        // If target is an HTML element, use it directly
+        if (target instanceof HTMLElement) {
+            if(showLogs) console.log('DS Portal target is an HTML element:', target);
+            host = target;
+        } else {
+            // Make sure target is not empty, use default if it is
+            const targetSelector = `.${target || defaultTarget}`;
+            
+            // find host container in the DOM
+            host = document.querySelector(targetSelector) as HTMLElement;
+            if(showLogs) console.log('DS Portal host:', host, 'target:', target, 'targetSelector:', targetSelector);
+
+            // Create host container if it doesn't exist
+            if (!host) {
+                // Create host container in the root of the document
+                host = document.createElement('div');
+
+                // add the class to the host
+                host.classList.add(target || defaultTarget);
+                // host.dataset.portal = target;
+
+                // append the host to the document's body
+                document.body.appendChild(host);
+            }
+        }
+
+        if(showLogs) console.log('DS Portal target:', target, 'host:', host, 'portal:', portal);
+
+        // Move the portal content to the host
+        if (portal) host.appendChild(portal);
+    });
+
+    onDestroy(() => {
+        // Additional cleanup on component destroy
+        if (portal && host && host.contains(portal)) {
+            host.removeChild(portal);
+        }
+        // Remove host if empty
+        if (host && host.childNodes.length === 0) {
+            host.remove();
+        }
+    });
+</script>
+
+<!-- Portal Container -->
+<div bind:this={portal} 
+    class="{className ? `${className} ` : ''}portal-contents{clickThrough ? ' click-through' : ''}" 
+    style={style}
+    bind:clientWidth
+    bind:clientHeight
+>
+    <slot />
+</div>
+
+<style>
+    /* Use contents to prevent extra DOM nesting */
+    .portal-contents {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 99999999;
+        pointer-events: none;
+    }
+
+    :global(.portal-contents > *) {
+        pointer-events: auto;
+    }
+
+    /* Click through styles */
+    :global(.portal-contents.click-through),
+    :global(.portal-contents.click-through *) {
+        pointer-events: none !important;
+    }
+</style>

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

@@ -0,0 +1,34 @@
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    target?: string | HTMLElement | undefined;
+    clickThrough?: boolean;
+    class?: string;
+    style?: string;
+    clientWidth?: number;
+    clientHeight?: number;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Portal = InstanceType<typeof Portal>;
+export default Portal;

package/dist/components/modals/README.md

@@ -0,0 +1,99 @@
+# Modal Components
+
+## ActionModal Component
+
+The `ActionModal` component is a reusable confirmation modal that can be used across different parts of the project for confirming deletion actions.
+
+### Features
+
+- Independent of any specific store or state management system
+- Customizable title, message, and button labels
+- Works with any type of items to be deleted
+- Dispatches events for both confirmation and cancellation
+- Maintains backwards compatibility with the FileBrowser implementation
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | boolean | `false` | Controls the visibility of the modal |
+| `items` | array | `[]` | Array of items to be deleted |
+| `title` | string | `''` | Custom title for the modal (autogenerated if empty) |
+| `message` | string | `''` | Custom message for the modal (autogenerated if empty) |
+| `confirmLabel` | string | `'Confirm'` | Label for the confirm button |
+| `cancelLabel` | string | `'Cancel'` | Label for the cancel button |
+| `width` | string | `'410px'` | Width of the modal |
+| `height` | string | `'168px'` | Height of the modal |
+| `modalId` | string | `'delete-confirmation-modal'` | ID for targeting the modal |
+| `modalType` | string | `'deleteConfirmation'` | Type for the modal (for backwards compatibility) |
+| `modalData` | any | `null` | Data for the modal (for backwards compatibility) |
+
+### Events
+
+- `delete` - Dispatched when the user confirms deletion, with `items` in the event detail
+- `cancel` - Dispatched when the user cancels deletion
+
+### Usage Example
+
+```svelte
+<script>
+  import { ActionModal } from '$lib/components/modals';
+  
+  let showDeleteConfirmation = false;
+  let itemsToDelete = [
+    { name: 'Document.pdf', type: 'file' },
+    { name: 'Images', type: 'folder' }
+  ];
+  
+  function handleDelete(event) {
+    const { items } = event.detail;
+    console.log('Deleting items:', items);
+    // Perform deletion logic here
+  }
+</script>
+
+<button on:click={() => showDeleteConfirmation = true}>
+  Delete Items
+</button>
+
+<ActionModal
+  bind:isOpen={showDeleteConfirmation}
+  items={itemsToDelete}
+  on:confirm={handleDelete}
+  on:cancel={() => console.log('Deletion cancelled')}
+/>
+```
+
+### FileBrowser Integration
+
+When using the component in the FileBrowser, make sure to:
+
+1. Handle clearing selections from the persistentSelectStore in the parent component
+2. Provide the correct modalId for the FileBrowser context
+
+```svelte
+<ActionModal 
+  bind:isOpen={showDeleteConfirmation}
+  items={selectedItems}
+  target="file-browser-module"
+  on:confirm={handleDelete}
+  on:cancel={() => {
+    showDeleteConfirmation = false;
+  }}
+/>
+```
+
+### Custom Title and Message Example
+
+You can provide custom title and message for specific contexts:
+
+```svelte
+<ActionModal 
+  bind:isOpen={showDeleteConfirmation}
+  items={selectedItems}
+  title="Delete Assets"
+  message="These assets will be permanently deleted. This action cannot be undone."
+  confirmLabel="Delete Permanently"
+  on:confirm={handleDelete}
+/>
+``` 

package/dist/components/modals/RenameDialog.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+  // Svelte imports
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+
+  // Local imports
+  import { Button } from '../ui/button';
+  // import { toast } from '../ui/sonner';
+  import { showToast } from '../toast';
+  import BaseModal from './BaseModal.svelte';
+
+  // Props
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  //
+  export let isOpen = false;
+  export let itemName = '';
+  export let itemType = 'item'; // 'item', 'folder', 'file', 'key', etc.
+  export let itemId = '';
+  export let title = '';
+  export let placeholder = '';
+  export let confirmLabel = 'Rename';
+  export let cancelLabel = 'Cancel';
+  export let width = '410px';
+  export let height = '168px';
+  export let target: string = 'rename-dialog'; // target for Portal
+  export let maxLength = 200;
+  export let shouldUseCustomRenameFunction = false; // If true, parent component handles the rename
+
+  // For backwards compatibility with specific implementations
+  export let modalType: string = 'rename';
+  export let modalData: any = null;
+
+  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
+
+  // Initialize modalData with our current props if not provided externally
+  $: if (modalData === null) {
+    modalData = {
+      itemName,
+      itemType,
+      itemId,
+      title,
+      placeholder,
+      confirmLabel,
+      cancelLabel
+    };
+  }
+
+  // Update validation state whenever inputValue changes
+  $: {
+    isValid = inputValue.trim().length > 0 && 
+              inputValue.length <= maxLength && 
+              inputValue !== itemName;
+  }
+
+  // Computed placeholder based on itemType
+  $: computedPlaceholder = placeholder || `${itemType} name...`;
+
+  // Function to focus and select the input text
+  async function focusAndSelectInput() {
+    // Wait for the DOM to update
+    await tick();
+    
+    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
+  function handleInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    inputValue = input.value.slice(0, maxLength);
+  }
+
+  // When the modal opens, set the input value and focus the input
+  $: if (isOpen) {
+    inputValue = itemName;
+    hasAttemptedSubmit = false; // Reset submission state
+    // Schedule focus after a short delay
+    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() {
+    hasAttemptedSubmit = true;
+    
+    try {
+      // Validate input
+      if (!inputValue.trim() || inputValue.length < 1) {
+        showToast('error', 'Invalid name', { description: 'Name must be at least 1 character long' });
+        return;
+      }
+
+      if (inputValue.length > maxLength) {
+        showToast('error', 'Invalid name', { description: `Name must be ${maxLength} characters or less` });
+        return;
+      }
+
+      if (inputValue === itemName) {
+        showToast('error', 'Invalid name', { description: 'Please enter a different name' });
+        return;
+      }
+
+      console.log('Attempting rename:', {
+        from: itemName,
+        to: inputValue,
+        itemId
+      });
+
+      // If parent component handles rename, dispatch event
+      if (shouldUseCustomRenameFunction) {
+        dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
+        isOpen = false;
+      } else {
+        // For file browser compatibility - in a real implementation, this would be replaced
+        // with a more generic approach
+        try {
+          // Simulate success
+          showToast('success', `Successfully renamed to ${inputValue}`);
+          dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
+          isOpen = false;
+        } catch (error) {
+          console.error('Error during rename:', error);
+          showToast('error', 'Failed to rename item');
+        }
+      }
+    } catch (error) {
+      console.error('Error during rename:', error);
+      showToast('error', 'Failed to rename item');
+    }
+  }
+
+  function handleClose() {
+    isOpen = false;
+    hasAttemptedSubmit = false;
+    dispatch('cancel');
+  }
+
+  // Support for restoring modal state
+  function handleRestore(event: CustomEvent) {
+    if (event.detail) {
+      itemName = event.detail.itemName || '';
+      itemType = event.detail.itemType || 'item';
+      itemId = event.detail.itemId || '';
+      if (event.detail.title) title = event.detail.title;
+      if (event.detail.placeholder) placeholder = event.detail.placeholder;
+      if (event.detail.confirmLabel) confirmLabel = event.detail.confirmLabel;
+      if (event.detail.cancelLabel) cancelLabel = event.detail.cancelLabel;
+      
+      // Reset input value on restore
+      inputValue = itemName;
+      
+      // Focus and select text when modal is restored
+      setTimeout(focusAndSelectInput, 50);
+    }
+  }
+</script>
+
+<BaseModal 
+  bind:open={isOpen} 
+  on:close={handleClose}
+  {target}
+  title={title || undefined}
+  width={width}
+  height={height}
+  titlePadding="small"
+  {modalType}
+  {modalData}
+  on:restore={handleRestore}
+>
+  <div class="{className ? `${className} ` : ''}rename-dialog-container h-full flex flex-col gap-4 min-h-[136px] justify-between" style={style}>
+
+    <!-- Input Container -->
+    <div class="input-container flex flex-col items-center pt-6">
+      <!-- Simple native input with minimal event handlers -->
+      <input 
+        type="text"
+        bind:value={inputValue}
+        bind:this={inputElement}
+        oninput={handleInput}
+        onkeydown={(e) => {
+          if (e.key === 'Escape') {
+            handleClose();
+          } else {
+            e.stopPropagation(); // Stop all keyboard events except Escape from bubbling up
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleRename();
+            }
+          }
+        }}
+        onfocus={(e) => {
+          const target = e.target as HTMLInputElement;
+          target.placeholder = "";
+          
+          // Select all text
+          setTimeout(() => {
+            if (target) {
+              target.setSelectionRange(0, target.value.length);
+            }
+          }, 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;
+        }}
+        required
+        class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
+               bg-transparent border-none focus:outline-none focus:ring-0
+               placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
+               {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
+        maxlength={maxLength}
+        data-min-length="1"
+        placeholder={computedPlaceholder}
+      />
+      {#if !isValid && hasAttemptedSubmit}
+        <div class="text-xs text-[hsl(var(--error))] mt-1">
+          {inputValue.trim().length === 0 ? 'Please enter a name' : 
+           inputValue === itemName ? 'Please enter a different name' : 
+           'Please enter a valid name'}
+        </div>
+      {/if}
+    </div>
+
+    <!-- Buttons Container -->
+    <div class="buttons-container flex justify-center gap-4">
+      <Button 
+        type="button" 
+        variant="secondary"
+        class="modal-btn-secondary !h-[34px]" 
+        onclick={handleClose}
+      >
+        {cancelLabel}
+      </Button>
+      <Button 
+        type="submit" 
+        class="modal-btn-primary !h-[34px]"
+        onclick={handleRename}
+        disabled={!isValid}
+      >
+        {confirmLabel}
+      </Button>
+    </div>
+  </div>
+</BaseModal>
+
+<style>
+  :global(.input-error) {
+    animation: shake 0.4s ease-in-out;
+    border-bottom: 1px solid hsl(var(--error)) !important;
+  }
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+  }
+</style> 

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

@@ -0,0 +1,39 @@
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+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.d.ts

@@ -0,0 +1,10 @@
+interface ModalState {
+    isOpen: boolean;
+    modalType?: string;
+    data?: any;
+}
+export declare const modalState: import("svelte/store").Writable<ModalState>;
+export declare const isModalOpen: import("svelte/store").Writable<boolean>;
+export declare function openModal(modalType?: string, data?: any): void;
+export declare function closeModal(): void;
+export {};

package/dist/components/modals/modalStore.js

@@ -0,0 +1,45 @@
+import { writable } from 'svelte/store';
+// import { browser } from '$app/environment';
+const browser = typeof window !== 'undefined';
+let showLogs = false;
+// Get initial state from localStorage if available
+const getInitialState = () => {
+    if (browser) {
+        const stored = localStorage.getItem('modal-state');
+        if (stored) {
+            const parsedState = JSON.parse(stored);
+            if (showLogs)
+                console.log('Restored modal state:', parsedState);
+            return parsedState;
+        }
+    }
+    return { isOpen: false };
+};
+// Create a store to track modal state
+export const modalState = writable(getInitialState());
+// Derived store for backward compatibility
+export const isModalOpen = writable(getInitialState().isOpen);
+// Subscribe to changes and update localStorage
+if (browser) {
+    modalState.subscribe(state => {
+        if (showLogs)
+            console.log('Saving modal state:', state);
+        localStorage.setItem('modal-state', JSON.stringify(state));
+        isModalOpen.set(state.isOpen);
+    });
+}
+// Helper functions to manage modal state
+export function openModal(modalType, data) {
+    if (showLogs)
+        console.log('Opening modal:', { modalType, data });
+    modalState.set({
+        isOpen: true,
+        modalType,
+        data
+    });
+}
+export function closeModal() {
+    if (showLogs)
+        console.log('Closing modal');
+    modalState.set({ isOpen: false });
+}