@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/ThemeSelector/ThemeSelector.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import Select from '../Select/Select.svelte';
-
-  const options = [
-    { label: 'Auto (System)', value: 'auto' },
-    { label: 'Light', value: 'light' },
-    { label: 'Dark', value: 'dark' }
-  ];
-
-  const themeClasses = {
-    'light': 'theme-light',
-    'dark': 'theme-dark'
-  };
-
-  let selectedTheme = $state('auto');
-  
-  // Load saved theme on mount
-  $effect(() => {
-    if (typeof window !== 'undefined') {
-      const savedTheme = localStorage.getItem('svelte-ui-theme');
-      if (savedTheme && options.some(opt => opt.value === savedTheme)) {
-        selectedTheme = savedTheme;
-      }
-    }
-  });
-  
-  // Apply theme to document body
-  function applyTheme(themeValue: string) {
-    const body = document.body;
-    const html = document.documentElement;
-    
-    // Remove all existing theme classes from both body and html
-    Object.values(themeClasses).forEach(className => {
-      body.classList.remove(className);
-      html.classList.remove(className);
-    });
-    
-    // Add the selected theme class to body
-    const themeClass = themeClasses[themeValue as keyof typeof themeClasses];
-    if (themeClass) {
-      body.classList.add(themeClass);
-    }
-    
-    // Save theme to localStorage
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('svelte-ui-theme', themeValue);
-    }
-  }
-
-  // Apply theme when selection changes
-  $effect(() => {
-    applyTheme(selectedTheme);
-  });
-</script>
-
-<div class="flex items-center gap-2">
-  <label for="theme-selector" class="text-sm font-medium text-[var(--color-text)]">Theme:</label>
-  <Select
-    bind:value={selectedTheme}
-    {options}
-    placeholder="Select theme..."
-    class="w-40"
-  />
-</div>

package/dist/components/ThemeSelector/ThemeSelector.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ThemeSelector: import("svelte").Component<Record<string, never>, {}, "">;
-type ThemeSelector = ReturnType<typeof ThemeSelector>;
-export default ThemeSelector;

package/dist/components/ThemeSelector/index.d.ts

@@ -1 +0,0 @@
-export { default } from './ThemeSelector.svelte';

package/dist/components/ThemeSelector/index.js

@@ -1 +0,0 @@
-export { default } from './ThemeSelector.svelte';

package/dist/components/TooltipHandler/TooltipHandler.svelte

@@ -1,593 +0,0 @@
-<!--
-/**
- * TooltipHandler - Automatic tooltip handling using elements from ElementManager
- * 
- * Receives elements from an external ElementManager and creates tooltips for any element
- * with data-tooltip attributes. Supports both text content and custom snippets.
- * 
- * @example Basic Usage
- * ```svelte
- * <script>
- *   import { ElementManager, TooltipHandler } from 'svelte-ui';
- *   let tooltipElements = $state(new Map());
- * </script>
- * 
- * <ElementManager 
- *   selector="[data-tooltip], [data-tooltip-text]" 
- *   bind:elements={tooltipElements} 
- * >
- *   <TooltipHandler elements={tooltipElements}>
- *     <button data-tooltip-text="Hello World!">Hover me</button>
- *   </TooltipHandler>
- * </ElementManager>
- * ```
- * 
- * @example With Custom Snippets
- * ```svelte
- * <ElementManager 
- *   selector="[data-tooltip], [data-tooltip-text]" 
- *   bind:elements={tooltipElements} 
- * >
- *   <TooltipHandler 
- *     elements={tooltipElements}
- *     warning={warningSnippet}
- *     info={infoSnippet}
- *   >
- *     {#snippet warningSnippet()}
- *       <div class="text-center">
- *         <div class="font-semibold text-yellow-300">⚠️ Warning</div>
- *         <div class="text-xs mt-1">Action cannot be undone!</div>
- *       </div>
- *     {/snippet}
- *     
- *     <button data-tooltip="warning">Delete</button>
- *     <button data-tooltip-text="Simple text">Save</button>
- *   </TooltipHandler>
- * </ElementManager>
- * ```
- */
--->
-<script lang="ts">
-  import { tick } from 'svelte';
-  import type { Snippet } from 'svelte';
-  import type { HandlerComponentProps } from '../../types/ManagerTypes.js';
-  
-  interface Props extends HandlerComponentProps {
-    /** Container for tooltip positioning bounds. Can be HTMLElement or CSS selector. Default: viewport */
-    container?: HTMLElement | string;
-    /** Named snippets for tooltip content */
-    [key: string]: any;
-  }
-
-  let { elements = new Map(), children, container, ...snippets }: Props = $props();
-  
-  // Set CSS custom property for tooltip max-width when in browser
-  $effect(() => {
-    if (typeof window !== 'undefined') {
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      const maxWidth = window.innerWidth - scrollbarWidth - 16; // viewport width - margins
-      document.documentElement.style.setProperty('--tooltip-max-width', `${maxWidth}px`);
-    }
-  });
-  
-  // Filter out non-snippet props to get only actual snippets
-  const snippetProps = $derived(Object.fromEntries(
-    Object.entries(snippets).filter(([_, value]) => 
-      typeof value === 'function'
-    )
-  ));
-
-  interface TooltipState {
-    element: HTMLElement;
-    text?: string;
-    snippet?: Snippet;
-    side: 'top' | 'left' | 'right' | 'bottom';
-    wait: number;
-    isVisible: boolean;
-    tooltipElement?: HTMLDivElement;
-    hoverTimeout?: ReturnType<typeof setTimeout>;
-    tooltipStyle: string;
-    arrowStyle: string;
-    effectiveSide: 'top' | 'left' | 'right' | 'bottom';
-    showArrow: boolean;
-    originalTitle?: string;
-  }
-
-  let tooltipStates = $state<TooltipState[]>([]);
-
-  function updatePosition(state: TooltipState) {
-    if (!state.tooltipElement || !state.element) {
-      return;
-    }
-
-    const targetRect = state.element.getBoundingClientRect();
-    
-    // Get tooltip dimensions - ensure they're fully calculated
-    const tooltipRect = state.tooltipElement.getBoundingClientRect();
-    const actualWidth = tooltipRect.width;
-    const actualHeight = tooltipRect.height;
-    
-    // If dimensions are not yet available, wait for next frame
-    if (actualWidth === 0 || actualHeight === 0) {
-      requestAnimationFrame(() => updatePosition(state));
-      return;
-    }
-    
-    
-    // Determine boundary constraints
-    let boundaryRect: DOMRect;
-    let viewportWidth: number;
-    let viewportHeight: number;
-    
-    if (container) {
-      // Resolve container from prop (HTMLElement or CSS selector)
-      let containerElement: HTMLElement;
-      
-      if (typeof container === 'string') {
-        // Query selector
-        const found = document.querySelector(container);
-        if (found instanceof HTMLElement) {
-          containerElement = found;
-        } else {
-          containerElement = document.body;
-        }
-      } else {
-        // Direct element reference
-        containerElement = container;
-      }
-      
-      boundaryRect = containerElement.getBoundingClientRect();
-      viewportWidth = boundaryRect.width;
-      viewportHeight = boundaryRect.height;
-    } else {
-      // Use viewport bounds (default) - account for scrollbars
-      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      const scrollbarHeight = window.innerHeight - document.documentElement.clientHeight;
-      
-      boundaryRect = new DOMRect(0, 0, 
-        window.innerWidth - scrollbarWidth, 
-        window.innerHeight - scrollbarHeight
-      );
-      viewportWidth = window.innerWidth - scrollbarWidth;
-      viewportHeight = window.innerHeight - scrollbarHeight;
-    }
-    
-    const offset = 16; // 1rem offset
-    const margin = 8; // minimum margin from boundary edges
-
-    // Helper function to check if a side has enough room
-    function hasRoomForSide(side: 'top' | 'right' | 'bottom' | 'left'): boolean {
-      switch (side) {
-        case 'top':
-          return targetRect.top - actualHeight - offset >= boundaryRect.top + margin;
-        case 'bottom':
-          return targetRect.bottom + actualHeight + offset <= boundaryRect.bottom - margin;
-        case 'left':
-          return targetRect.left - actualWidth - offset >= boundaryRect.left + margin;
-        case 'right':
-          return targetRect.right + actualWidth + offset <= boundaryRect.right - margin;
-      }
-    }
-
-    // Helper function to get opposite side
-    function getOppositeSide(side: 'top' | 'right' | 'bottom' | 'left'): 'top' | 'right' | 'bottom' | 'left' {
-      const opposites = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' } as const;
-      return opposites[side];
-    }
-
-    // Smart positioning logic
-    let useSide = state.side;
-    let showArrow = true;
-
-
-    // 1. Check if requested side has room
-    if (!hasRoomForSide(state.side)) {
-      // 2. Try opposite side first
-      const oppositeSide = getOppositeSide(state.side);
-      if (hasRoomForSide(oppositeSide)) {
-        useSide = oppositeSide;
-      } else {
-        // 3. Try all sides in order: top, right, bottom, left
-        const fallbackOrder: Array<'top' | 'right' | 'bottom' | 'left'> = ['top', 'right', 'bottom', 'left'];
-        let foundSide = false;
-        
-        for (const side of fallbackOrder) {
-          if (hasRoomForSide(side)) {
-            useSide = side;
-            foundSide = true;
-            break;
-          }
-        }
-        
-        // 4. If no side fits, center the tooltip and hide arrow
-        if (!foundSide) {
-          useSide = 'top'; // fallback, but we'll position it centered
-          showArrow = false;
-        }
-      }
-    }
-    
-    state.effectiveSide = useSide;
-
-    let x = 0;
-    let y = 0;
-
-    if (!showArrow) {
-      // Center the tooltip on the target element
-      x = targetRect.left + targetRect.width / 2 - actualWidth / 2;
-      y = targetRect.top + targetRect.height / 2 - actualHeight / 2;
-      
-      // Ensure it stays within boundary bounds
-      if (x < boundaryRect.left + margin) x = boundaryRect.left + margin;
-      if (x + actualWidth > boundaryRect.right - margin) x = boundaryRect.right - actualWidth - margin;
-      if (y < boundaryRect.top + margin) y = boundaryRect.top + margin;
-      if (y + actualHeight > boundaryRect.bottom - margin) y = boundaryRect.bottom - actualHeight - margin;
-    } else {
-      // Position according to the chosen side
-      switch (useSide) {
-        case 'top':
-          x = targetRect.left + targetRect.width / 2 - actualWidth / 2;
-          y = targetRect.top - actualHeight - offset;
-          break;
-        
-        case 'bottom':
-          x = targetRect.left + targetRect.width / 2 - actualWidth / 2;
-          y = targetRect.bottom + offset;
-          break;
-        
-        case 'left':
-          x = targetRect.left - actualWidth - offset;
-          y = targetRect.top + targetRect.height / 2 - actualHeight / 2;
-          break;
-        
-        case 'right':
-          x = targetRect.right + offset;
-          y = targetRect.top + targetRect.height / 2 - actualHeight / 2;
-          break;
-      }
-
-      // Store original calculated position for triangle adjustment
-      const originalX = x;
-      const originalY = y;
-      
-      // Boundary collision detection with special handling for oversized tooltips
-      const availableWidth = boundaryRect.width - (2 * margin);
-      const availableHeight = boundaryRect.height - (2 * margin);
-      
-      // Handle horizontal positioning
-      if (actualWidth > availableWidth) {
-        // Tooltip wider than available space - center it within bounds
-        x = boundaryRect.left + boundaryRect.width / 2 - actualWidth / 2;
-      } else {
-        // Normal collision detection for width
-        if (x < boundaryRect.left + margin) {
-          x = boundaryRect.left + margin;
-        } else if (x + actualWidth > boundaryRect.right - margin) {
-          x = boundaryRect.right - actualWidth - margin;
-        }
-      }
-      
-      // Handle vertical positioning  
-      if (actualHeight > availableHeight) {
-        // Tooltip taller than available space - center it within margin bounds
-        y = boundaryRect.top + margin + availableHeight / 2 - actualHeight / 2;
-      } else {
-        // Normal collision detection for height
-        if (y < boundaryRect.top + margin) {
-          y = boundaryRect.top + margin;
-        } else if (y + actualHeight > boundaryRect.bottom - margin) {
-          y = boundaryRect.bottom - actualHeight - margin;
-        }
-      }
-
-      // Calculate arrow offset based on position adjustments
-      let arrowOffsetX = 0;
-      let arrowOffsetY = 0;
-      
-      if (useSide === 'top' || useSide === 'bottom') {
-        // For top/bottom tooltips, adjust triangle horizontal position
-        arrowOffsetX = originalX - x;
-      } else if (useSide === 'left' || useSide === 'right') {
-        // For left/right tooltips, adjust triangle vertical position
-        arrowOffsetY = originalY - y;
-      }
-
-      // Update arrow position if needed
-      if (arrowOffsetX !== 0 || arrowOffsetY !== 0) {
-        if (useSide === 'top' || useSide === 'bottom') {
-          state.arrowStyle = `transform: translateX(calc(-50% + ${arrowOffsetX}px));`;
-        } else {
-          state.arrowStyle = `transform: translateY(calc(-50% + ${arrowOffsetY}px));`;
-        }
-      } else {
-        state.arrowStyle = '';
-      }
-    }
-
-    // Apply tooltip position and arrow visibility
-    state.tooltipStyle = `left: ${x}px; top: ${y}px;`;
-    state.showArrow = showArrow;
-    
-    // Trigger reactivity
-    tooltipStates = tooltipStates;
-  }
-  
-  function handleMouseEnter(state: TooltipState) {
-    if (state.hoverTimeout) clearTimeout(state.hoverTimeout);
-    
-    state.hoverTimeout = setTimeout(() => {
-      // Force reactivity by creating a new array with new objects
-      tooltipStates = tooltipStates.map(s => {
-        if (s.element === state.element) {
-          return { ...s, isVisible: true };
-        }
-        return s;
-      });
-      // Update position after making visible - use multiple timing strategies
-      tick().then(() => {
-        const currentState = tooltipStates.find(s => s.element === state.element);
-        if (currentState) {
-          // Try positioning immediately
-          updatePosition(currentState);
-          // Also try again after a short delay to handle timing issues
-          setTimeout(() => {
-            updatePosition(currentState);
-          }, 1);
-        }
-      });
-    }, state.wait);
-  }
-  
-  function handleMouseLeave(state: TooltipState) {
-    if (state.hoverTimeout) clearTimeout(state.hoverTimeout);
-    // Force reactivity by creating a new array with new objects
-    tooltipStates = tooltipStates.map(s => {
-      if (s.element === state.element) {
-        return { ...s, isVisible: false };
-      }
-      return s;
-    });
-  }
-  
-  function handleFocus(state: TooltipState) {
-    tooltipStates = tooltipStates.map(s => {
-      if (s.element === state.element) {
-        return { ...s, isVisible: true };
-      }
-      return s;
-    });
-    tick().then(() => {
-      const currentState = tooltipStates.find(s => s.element === state.element);
-      if (currentState) {
-        updatePosition(currentState);
-      }
-    });
-  }
-  
-  function handleBlur(state: TooltipState) {
-    tooltipStates = tooltipStates.map(s => {
-      if (s.element === state.element) {
-        return { ...s, isVisible: false };
-      }
-      return s;
-    });
-  }
-  
-  function handleScroll() {
-    tooltipStates.forEach((state) => {
-      if (state.isVisible && state.tooltipElement) {
-        updatePosition(state);
-      }
-    });
-  }
-  
-  function setupTooltip(element: HTMLElement, data: any) {
-    // Skip if already set up
-    if (data.tooltipState) {
-      return;
-    }
-    
-    // Determine tooltip content (text or snippet)
-    let text: string | undefined;
-    let snippet: Snippet | undefined;
-    
-    // Check for data-tooltip-text first
-    if (element.dataset.tooltipText) {
-      text = element.dataset.tooltipText;
-    }
-    // Check for data-tooltip (could be text or snippet name)
-    else if (element.dataset.tooltip !== undefined) {
-      const value = element.dataset.tooltip;
-      if (!value) {
-        // No value - use title attribute
-        text = element.getAttribute('title') || '';
-      } else if (snippetProps[value]) {
-        // Value is a snippet name
-        snippet = snippetProps[value];
-      } else {
-        // Value is plain text
-        text = value;
-      }
-    }
-    
-    // Skip if no content
-    if (!text && !snippet) {
-      return;
-    }
-    
-    const state: TooltipState = {
-      element,
-      text,
-      snippet,
-      side: (element.dataset.tooltipSide as any) || 'top',
-      wait: element.dataset.tooltipWait ? parseInt(element.dataset.tooltipWait) : 500,
-      isVisible: false,
-      tooltipStyle: 'left: 0px; top: 0px;', // Start with basic positioning
-      arrowStyle: '',
-      effectiveSide: (element.dataset.tooltipSide as any) || 'top',
-      showArrow: true // Will be updated during positioning
-    };
-    
-    // Store and remove original title to prevent native tooltip
-    const originalTitle = element.getAttribute('title');
-    if (originalTitle) {
-      state.originalTitle = originalTitle;
-      element.removeAttribute('title');
-    }
-    
-    // Create event handlers
-    const enterHandler = () => handleMouseEnter(state);
-    const leaveHandler = () => handleMouseLeave(state);
-    const focusHandler = () => handleFocus(state);
-    const blurHandler = () => handleBlur(state);
-    
-    element.addEventListener('mouseenter', enterHandler);
-    element.addEventListener('mouseleave', leaveHandler);
-    element.addEventListener('focus', focusHandler);
-    element.addEventListener('blur', blurHandler);
-    
-    // Store cleanup function on the data object
-    data.cleanup = () => {
-      element.removeEventListener('mouseenter', enterHandler);
-      element.removeEventListener('mouseleave', leaveHandler);
-      element.removeEventListener('focus', focusHandler);
-      element.removeEventListener('blur', blurHandler);
-      
-      if (state.hoverTimeout) clearTimeout(state.hoverTimeout);
-      if (state.originalTitle) element.setAttribute('title', state.originalTitle);
-      
-      // Remove from tooltipStates array
-      const index = tooltipStates.indexOf(state);
-      if (index > -1) {
-        tooltipStates.splice(index, 1);
-        tooltipStates = tooltipStates;
-      }
-    };
-    
-    // Store state on the data object and add to array
-    data.tooltipState = state;
-    tooltipStates.push(state);
-    tooltipStates = tooltipStates;
-  }
-  
-  // React to changes in elements Map from ElementManager
-  $effect(() => {
-    // Process all elements in the current Map
-    elements.forEach((data, element) => {
-      setupTooltip(element, data);
-    });
-  });
-  
-  // Global scroll/resize listeners
-  $effect(() => {
-    function handleWindowEvents() {
-      handleScroll();
-    }
-    
-    window.addEventListener('scroll', handleWindowEvents, { passive: true });
-    window.addEventListener('resize', handleWindowEvents, { passive: true });
-    
-    return () => {
-      window.removeEventListener('scroll', handleWindowEvents);
-      window.removeEventListener('resize', handleWindowEvents);
-    };
-  });
-  
-  // Action to attach tooltip element reference
-  function tooltipRef(node: HTMLDivElement, state: TooltipState) {
-    state.tooltipElement = node;
-    
-    // Update position immediately if tooltip is visible
-    if (state.isVisible) {
-      updatePosition(state);
-    }
-    
-    return {
-      destroy() {
-        // Clean up reference
-      }
-    };
-  }
-</script>
-
-{#if children}
-  {@render children()}
-{/if}
-
-<!-- Render tooltips -->
-{#each tooltipStates as state (state.element)}
-  <div
-    use:tooltipRef={state}
-    class="tooltip fixed z-[10000] px-3 py-2 text-sm rounded-md shadow-lg pointer-events-none transition-opacity duration-200 ease-out"
-    style="{state.tooltipStyle}; background-color: var(--color-text); color: var(--color-background); opacity: {state.isVisible ? '1' : '0'};"
-    role="tooltip"
-    aria-hidden={!state.isVisible}
-  >
-    {#if state.snippet}
-      {@render state.snippet()}
-    {:else if state.text}
-      {state.text}
-    {/if}
-    
-    <!-- Triangle connector (only show if showArrow is true) -->
-    {#if state.showArrow}
-      <div 
-        class="tooltip-arrow absolute" 
-        class:top={state.effectiveSide === 'bottom'} 
-        class:bottom={state.effectiveSide === 'top'} 
-        class:left={state.effectiveSide === 'right'} 
-        class:right={state.effectiveSide === 'left'} 
-        style={state.arrowStyle}
-      ></div>
-    {/if}
-  </div>
-{/each}
-
-<style>
-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .tooltip-arrow.top {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid var(--color-text);
-  }
-
-  .tooltip-arrow.bottom {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 6px solid var(--color-text);
-  }
-
-  .tooltip-arrow.left {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-right: 6px solid var(--color-text);
-  }
-
-  .tooltip-arrow.right {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-left: 6px solid var(--color-text);
-  }
-
-  .tooltip {
-    max-width: var(--tooltip-max-width, calc(100vw - 1rem));
-  }
-</style>

package/dist/components/TooltipHandler/TooltipHandler.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { HandlerComponentProps } from '../../types/ManagerTypes.js';
-interface Props extends HandlerComponentProps {
-    /** Container for tooltip positioning bounds. Can be HTMLElement or CSS selector. Default: viewport */
-    container?: HTMLElement | string;
-    /** Named snippets for tooltip content */
-    [key: string]: any;
-}
-declare const TooltipHandler: import("svelte").Component<Props, {}, "">;
-type TooltipHandler = ReturnType<typeof TooltipHandler>;
-export default TooltipHandler;

package/dist/components/TooltipHandler/index.d.ts

@@ -1 +0,0 @@
-export { default } from './TooltipHandler.svelte';

package/dist/components/TooltipHandler/index.js

@@ -1 +0,0 @@
-export { default } from './TooltipHandler.svelte';