@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/ic/NumberInputController.svelte

@@ -0,0 +1,397 @@
+<script lang="ts">
+  /**
+   * NumberInputController Component
+   * A specialized input controller for numeric values with increment/decrement buttons.
+   * Features:
+   * - Increment/decrement buttons with auto-repeat
+   * - Value validation and bounds checking
+   * - Support for negative numbers
+   * - Keyboard navigation and shortcuts
+   */
+
+  // Svelte imports
+  import { onDestroy } from 'svelte';
+
+  
+  // Component config
+  import type { InputControllerConfig } from './index';
+  import InputControllerHeader from './InputControllerHeader.svelte';
+  import NumberControls from './NumberControls.svelte';
+
+  /**
+   * Component Props
+   * External properties that configure the number input's behavior
+   */
+  export let label: string;                 // Display label
+  export let value: number = 0;             // Current numeric value
+  export let onChange: (newValue: number) => void;  // Value change callback
+  export let config: InputControllerConfig = {};    // Additional configuration
+  export let helpText: string | undefined = undefined; // Help text for the input
+  export let description: string | undefined = undefined;
+  export let onFocus: () => void = () => {};  // Focus callback
+
+  /**
+   * Configuration Options
+   * Derived from config prop with fallbacks.
+   * When both min and max are unspecified, the input is unbounded (not locked).
+   */
+  const bothBoundsUndefined = config.min === undefined && config.max === undefined;
+  $: min = config.min ?? 0;
+  $: max = bothBoundsUndefined ? Number.MAX_SAFE_INTEGER : (config.max ?? 0);
+  $: step = config.step || 1;
+  $: isLocked = !bothBoundsUndefined && min === max;
+  $: isAtMin = value <= min;
+  $: isAtMax = value >= max;
+
+  /**
+   * Reactive Statements
+   * Handle min/max validation and value constraints
+   */
+  $: {
+    if (min !== undefined && max !== undefined && min > max) {
+      [min, max] = [max, min];
+    }
+
+    const minValue = min ?? 0;
+    const maxValue = max ?? Number.MAX_SAFE_INTEGER;
+
+    if (!isEditing && !bothBoundsUndefined) {
+      if (value < minValue || value > maxValue) {
+        console.log('Value out of bounds, adjusting:', {
+          value, minValue, maxValue, isEditing
+        });
+        const clampedValue = Math.max(minValue, Math.min(maxValue, value));
+        value = clampedValue;
+        if (typeof onChange === 'function') {
+          setTimeout(() => onChange(clampedValue), 0);
+        }
+      }
+    }
+  }
+
+  /**
+   * Step Validation
+   * Ensures step value is always positive
+   */
+  $: {
+    if (step < 0) {
+      console.warn('Step value should be positive. Converting negative step to positive.');
+      step = Math.abs(step);
+    }
+  }
+
+  /**
+   * Internal State
+   * Manages component behavior and auto-repeat functionality
+   */
+  let autoRepeatTimer: ReturnType<typeof setTimeout> | undefined;
+  let autoRepeatInterval: ReturnType<typeof setInterval> | undefined;
+  let isPressed = false;
+  let isEditing = false; // Tracks if user is currently editing the input
+  let disabledOpacity = 60;
+  const HOLD_DELAY = 400;
+  const REPEAT_INTERVAL = 80;
+
+  /**
+   * Value Change Handler
+   * Processes increment/decrement operations with bounds checking
+   */
+  function handleValueChange(adjustment: number) {
+    try {
+      console.log('🔄 handleValueChange:', { currentValue: value, adjustment, min, max });
+      const newValue = value + adjustment;
+      
+      if (min !== undefined && newValue < min) {
+        console.log('⚠️ Value would go below min, clamping to:', min);
+        value = min;
+        if (onChange) onChange(min);
+        return;
+      }
+      
+      if (max !== undefined && newValue > max) {
+        console.log('⚠️ Value would exceed max, clamping to:', max);
+        value = max;
+        if (onChange) onChange(max);
+        return;
+      }
+      
+      console.log('✅ Setting new value:', newValue);
+      value = newValue;
+      if (onChange) onChange(newValue);
+    } catch (error) {
+      console.error('❌ Error in handleValueChange:', error);
+    }
+  }
+
+  /**
+   * Input Event Handler
+   * Manages direct user input with validation
+   */
+  function handleInput(e: Event) {
+    try {
+      const input = e.currentTarget as HTMLInputElement;
+      const inputValue = input.value;
+      
+      console.log('handleInput start:', {
+        inputValue,
+        isEditing,
+        currentValue: value,
+        min,
+        max
+      });
+
+      // Handle empty input
+      if (inputValue === '') {
+        console.log('Empty input detected - allowing editing');
+        isEditing = true;
+        return;
+      }
+
+      // Prevent multiple minus signs
+      if (inputValue.split('-').length > 2) {
+        console.log('Multiple minus signs detected, preventing');
+        input.value = inputValue.charAt(0) === '-' ? 
+          '-' + inputValue.replace(/-/g, '') : 
+          inputValue.replace(/-/g, '');
+        return;
+      }
+
+      // Allow single minus sign for negative numbers
+      if (inputValue === '-' && min! < 0) {
+        console.log('Single minus sign detected');
+        isEditing = true;
+        return;
+      }
+
+      // Validate numeric input
+      if (!/^-?\d*$/.test(inputValue)) {
+        console.log('Invalid character detected');
+        input.value = inputValue.replace(/[^\d-]/g, '');
+        return;
+      }
+
+      const numValue = parseFloat(inputValue);
+      if (!isNaN(numValue)) {
+        if (max !== undefined && numValue > max) {
+          console.log('Number exceeds max:', { numValue, max });
+          input.value = String(max);
+          value = max;
+          return;
+        }
+        value = numValue;
+      }
+    } catch (error) {
+      console.error('Error in handleInput:', error);
+    }
+  }
+
+  /**
+   * Blur Event Handler
+   * Validates and normalizes input when focus is lost
+   */
+  function handleBlur() {
+    console.log('handleBlur:', { value, isEditing, min, max });
+    
+    isEditing = false;
+    const input = document.getElementById('number-input') as HTMLInputElement;
+    
+    // Handle empty or invalid input
+    if (input.value === '' || input.value === '-') {
+      value = min!;
+      input.value = String(min!);
+      if (onChange) onChange(min!);
+      return;
+    }
+
+    // Validate and clamp final value
+    const finalValue = parseFloat(input.value);
+    if (isNaN(finalValue)) {
+      value = min!;
+      input.value = String(min!);
+      if (onChange) onChange(min!);
+    } else if (finalValue < min!) {
+      value = min!;
+      input.value = String(min!);
+      if (onChange) onChange(min!);
+    } else if (finalValue > max!) {
+      value = max!;
+      input.value = String(max!);
+      if (onChange) onChange(max!);
+    } else {
+      value = finalValue;
+      if (onChange) onChange(finalValue);
+    }
+  }
+
+  /**
+   * Auto-Repeat Functionality
+   * Handles continuous increment/decrement while button is held
+   */
+  function startAutoRepeat(operation: 'increment' | 'decrement', event: MouseEvent) {
+    console.log('🎯 startAutoRepeat called:', { operation });
+    event.preventDefault();
+    event.stopPropagation();
+    
+    // Clear any existing timers first
+    stopAutoRepeat();
+    
+    const adjustment = operation === 'increment' ? step : -step;
+    isPressed = true;
+    
+    // Handle initial click
+    console.log('👆 Initial click, applying adjustment:', adjustment);
+    handleValueChange(adjustment);
+    
+    // Set up auto-repeat
+    console.log('⏳ Setting up auto-repeat timer for', HOLD_DELAY, 'ms');
+    
+    // Start auto-repeat after hold delay
+    autoRepeatTimer = setTimeout(() => {
+      console.log('⌛ Hold delay completed, isPressed:', isPressed);
+      if (isPressed) {
+        console.log('🔄 Starting interval timer with delay:', REPEAT_INTERVAL);
+        autoRepeatInterval = setInterval(() => {
+          if (isPressed) {
+            console.log('⚡ Interval tick - applying adjustment:', adjustment);
+            handleValueChange(adjustment);
+          }
+        }, REPEAT_INTERVAL);
+      }
+    }, HOLD_DELAY);
+  }
+
+  /**
+   * Stop Auto-Repeat
+   * Cleans up auto-repeat timer and interval
+   */
+  function stopAutoRepeat(event?: MouseEvent | FocusEvent) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    
+    console.log('🛑 stopAutoRepeat called');
+    
+    if (autoRepeatTimer) {
+      console.log('🧹 Clearing auto-repeat timer');
+      clearTimeout(autoRepeatTimer);
+      autoRepeatTimer = undefined;
+    }
+    if (autoRepeatInterval) {
+      console.log('🧹 Clearing auto-repeat interval');
+      clearInterval(autoRepeatInterval);
+      autoRepeatInterval = undefined;
+    }
+    
+    isPressed = false;
+  }
+
+  /**
+   * Cleanup
+   * Ensures auto-repeat timer is cleared when component is destroyed
+   */
+  onDestroy(() => {
+    console.log('♻️ Component destroying, cleaning up timers');
+    stopAutoRepeat();
+  });
+
+  /**
+   * Input Validation
+   * Validates numeric input format
+   */
+  function isValidNumber(value: string): boolean {
+    // Allow empty string during typing
+    if (value === '') return true;
+    // Allow single minus sign during typing if negatives are allowed
+    if (value === '-' && (min === undefined || min < 0)) return true;
+    
+    // Strict number format validation
+    const numberRegex = /^-?\d*\.?\d*$/;
+    if (!numberRegex.test(value)) return false;
+    // Prevent multiple decimal points
+    if ((value.match(/\./g) || []).length > 1) return false;
+    // Prevent multiple minus signs
+    if ((value.match(/-/g) || []).length > 1) return false;
+    
+    return true;
+  }
+
+  /**
+   * Keyboard Event Handler
+   * Manages keyboard interactions and shortcuts
+   */
+  function handleKeyDown(e: KeyboardEvent) {
+    console.log('handleKeyDown:', {
+      key: e.key,
+      metaKey: e.metaKey,
+      ctrlKey: e.ctrlKey,
+      isEditing
+    });
+
+    // Handle selection shortcuts
+    if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+      console.log('CMD+A detected, setting editing mode');
+      isEditing = true;
+      return;
+    }
+
+    // Allow navigation keys
+    if (e.key === 'Backspace' || e.key === 'Delete' || 
+        e.key === 'ArrowLeft' || e.key === 'ArrowRight' || 
+        e.key === 'Tab') {
+      isEditing = true;
+      return;
+    }
+    
+    // Allow copy/paste operations
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
+  }
+</script>
+
+<!-- Number Input Container -->
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} helpText={helpText} />
+    </div>
+    
+    <div class="absolute right-0">
+      <NumberControls
+        {value}
+        {onChange}
+        {min}
+        {max}
+        {step}
+        {isLocked}
+        {onFocus}
+      />
+    </div>
+  </div>
+
+  {#if description}
+    <p class="subtext text-grey5">{description}</p>
+  {/if}
+</div>
+
+<style>
+  :global(#number-input) {
+    text-align: left;
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+  
+  :global(#number-input::-webkit-outer-spin-button),
+  :global(#number-input::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+
+  /* Remove focus ring from buttons */
+  :global(.number-input-button:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+</style>

package/dist/components/ic/NumberInputController.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { InputControllerConfig } from './index';
+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 NumberInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * External properties that configure the number input's behavior
+       */ label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    helpText?: string | undefined;
+    description?: string | undefined;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumberInputController = InstanceType<typeof NumberInputController>;
+export default NumberInputController;

package/dist/components/ic/PositionInputController.svelte

@@ -0,0 +1,252 @@
+<!-- 
+ * PositionInputController
+ * 
+ * A dual-axis position controller that provides an intuitive drag-and-drop interface
+ * for setting X and Y coordinates as percentages.
+ * 
+ * Key Features:
+ * - Interactive 2D position selection via joystick
+ * - Real-time position updates and visual feedback
+ * - Touch and mouse support
+ * - Dynamic indicator positioning
+ * 
+ * Edge Cases:
+ * - Handles coordinate boundary constraints (0-100%)
+ * - Manages concurrent touch/mouse events
+ * - Prevents text selection during dragging
+ * - Maintains consistent state across input methods
+-->
+
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+
+  // Component config
+  import type { InputControllerConfig } from './index';
+  
+  /**
+   * Core state and configuration props
+   * value: Current position coordinates
+   * onChange: Callback for position updates
+   * config: Additional configuration options
+   * onFocus: Focus event handler
+   * onDragStateChange: Callback for dragging state changes
+   */
+  export let value: { x: number; y: number } | undefined = undefined;
+  export let onChange: (newValue: { x: number; y: number }) => void;
+  export let onFocus: () => void = () => {};
+  export let maskThumb: boolean = true;
+  export let onDragStateChange: (isDragging: boolean) => void = () => {};
+
+  /**
+   * DOM references and state
+   * Used for position calculations and drag handling
+   */
+  let joystickContainer: HTMLDivElement;
+  let joystickHandle: HTMLDivElement;
+  let isDragging = false;
+  let isHovering = false;
+
+  /**
+   * Reactive position state
+   * Defaults to center (50,50) if no value provided
+   */
+  $: position = value || { x: 50, y: 50 };
+
+  /**
+   * Formatted display values with fixed precision
+   * Handles null/undefined gracefully
+   */
+  $: formattedX = (position?.x ?? 0).toFixed(0);
+  $: formattedY = (position?.y ?? 0).toFixed(0);
+
+  /**
+   * Reactive indicator position
+   * Moves indicators to top when thumb is in lower half
+   */
+  $: shouldShowAtTop = position.y > 50;
+
+  // Compute whether to mask the thumb based on interaction state
+  $: shouldMaskThumb = maskThumb && !isDragging && !isHovering;
+
+  /**
+   * Updates position based on cursor/touch coordinates
+   * Converts screen coordinates to percentage values
+   * Enforces boundaries (0-100%)
+   * @param clientX - Screen X coordinate
+   * @param clientY - Screen Y coordinate
+   */
+  function updatePosition(clientX: number, clientY: number) {
+    if (!joystickContainer) return;
+
+    const rect = joystickContainer.getBoundingClientRect();
+    
+    // Convert pixel coordinates to percentages
+    let x = ((clientX - rect.left) / rect.width) * 100;
+    let y = ((clientY - rect.top) / rect.height) * 100;
+    
+    // Clamp values to valid range
+    x = Math.max(0, Math.min(100, x));
+    y = Math.max(0, Math.min(100, y));
+    
+    position = { x, y };
+    onChange(position);
+  }
+
+  /**
+   * Mouse event handlers
+   * Manages dragging state and cursor appearance
+   * Prevents text selection during drag
+   */
+  function handleMouseEnter() {
+    isHovering = true;
+  }
+
+  function handleMouseLeave() {
+    isHovering = false;
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    isDragging = true;
+    onDragStateChange(true);
+    onFocus();
+    updatePosition(event.clientX, event.clientY);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'grabbing';
+    document.body.classList.add('position-dragging');
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (!isDragging) return;
+    updatePosition(event.clientX, event.clientY);
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    onDragStateChange(false);
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = '';
+    document.body.classList.remove('position-dragging');
+    document.body.style.userSelect = '';
+  }
+
+  /**
+   * Touch event handlers
+   * Provides touch support with similar behavior to mouse events
+   */
+  function handleTouchStart(event: TouchEvent) {
+    isDragging = true;
+    onDragStateChange(true);
+    onFocus();
+    updatePosition(event.touches[0].clientX, event.touches[0].clientY);
+  }
+
+  function handleTouchMove(event: TouchEvent) {
+    if (!isDragging) return;
+    updatePosition(event.touches[0].clientX, event.touches[0].clientY);
+  }
+
+  function handleTouchEnd() {
+    isDragging = false;
+    onDragStateChange(false);
+  }
+
+  /**
+   * Lifecycle hooks
+   * Setup and cleanup of event listeners
+   */
+  onMount(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
+
+  onDestroy(() => {
+    document.body.classList.remove('position-dragging');
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  });
+</script>
+
+<div class="position-input-controller widgetic-colors">
+  <!-- Joystick UI -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div 
+    bind:this={joystickContainer}
+    class="relative w-[185px] h-[185px] bg-grey1 rounded-large border border-grey2 joystick-container transition-colors duration-200 hover:border-forest-green"
+    class:overflow-hidden={shouldMaskThumb}
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+    on:mousedown={handleMouseDown}
+    on:touchstart={handleTouchStart}
+    on:touchmove={handleTouchMove}
+    on:touchend={handleTouchEnd}
+  >
+    <!-- Grid lines -->
+    <div class="absolute inset-0 grid-background"></div>
+
+    <!-- Position indicator thumb -->
+    <!-- svelte-ignore element_invalid_self_closing_tag -->
+    <div
+      bind:this={joystickHandle}
+      class="absolute w-[24px] h-[24px] bg-white rounded-full -translate-x-1/2 -translate-y-1/2 border-2 border-grey5 z-10 {isDragging ? 'border-grey7 scale-110' : 'hover:border-grey7 hover:scale-110 transition-all duration-150'}"
+      style="left: {position.x}%; top: {position.y}%"
+    />
+
+    <!-- Percentage display with dynamic positioning -->
+    <div 
+      class="absolute left-4 right-4 flex justify-between items-center transition-all duration-300 ease-in-out"
+      class:bottom-2={!shouldShowAtTop}
+      class:top-2={shouldShowAtTop}
+      style="opacity: {isDragging ? 0.5 : 1}"
+    >
+      <div class="flex items-center gap-2 w-[50px]">
+        <span class="caption text-grey7 w-[12px]">X:</span>
+        <span class="subtext text-grey7 w-[32px]">{formattedX}%</span>
+      </div>
+      <div class="flex items-center gap-2 w-[50px]">
+        <span class="caption text-grey7 w-[12px]">Y:</span>
+        <span class="subtext text-grey7 w-[32px]">{formattedY}%</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Make the selector more specific by targeting only elements within position-input-controller */
+  :global(body.position-dragging .position-input-controller *) {
+    cursor: grabbing !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+  }
+
+  /* Add pointer cursor for interactive areas */
+  .joystick-container {
+    cursor: grab !important;
+  }
+
+  .joystick-container:active {
+    cursor: grabbing !important;
+  }
+
+  /* Remove default focus outline */
+  .joystick-container:focus {
+    outline: none !important;
+  }
+
+  /* Grid background using gradients */
+  .grid-background {
+    background-image: 
+      linear-gradient(to right, transparent 24.99%, hsl(var(--forest-green) / 0.5) 25%, hsl(var(--forest-green) / 0.5) calc(25% + 1px), transparent calc(25% + 1px)),
+      linear-gradient(to right, transparent 49.99%, hsl(var(--forest-green) / 0.5) 50%, hsl(var(--forest-green) / 0.5) calc(50% + 1px), transparent calc(50% + 1px)),
+      linear-gradient(to right, transparent 74.99%, hsl(var(--forest-green) / 0.5) 75%, hsl(var(--forest-green) / 0.5) calc(75% + 1px), transparent calc(75% + 1px)),
+      linear-gradient(to bottom, transparent 24.99%, hsl(var(--forest-green) / 0.5) 25%, hsl(var(--forest-green) / 0.5) calc(25% + 1px), transparent calc(25% + 1px)),
+      linear-gradient(to bottom, transparent 49.99%, hsl(var(--forest-green) / 0.5) 50%, hsl(var(--forest-green) / 0.5) calc(50% + 1px), transparent calc(50% + 1px)),
+      linear-gradient(to bottom, transparent 74.99%, hsl(var(--forest-green) / 0.5) 75%, hsl(var(--forest-green) / 0.5) calc(75% + 1px), transparent calc(75% + 1px));
+  }
+</style>