@widgetic/editor 3.11.4 → 4.0.2

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

@@ -0,0 +1,47 @@
+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 FontInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * @prop {string} label - Display label for the font selector
+       * @prop {string} value - Currently selected font family
+       * @prop {Function} onChange - Callback when font selection changes
+       * @prop {InputControllerConfig} config - Configuration options
+       * @prop {string} description - Optional help text
+       * @prop {string} controllerId - Unique identifier for this controller
+       * @prop {any} openDropdowns - Store tracking open dropdown states
+       * @prop {Function} toggleDropdown - Function to toggle dropdown state
+       * @prop {Function} onFocus - Optional focus handler
+       */ label: string;
+    value?: {
+        family: string;
+        weight: string;
+        category: string;
+    } | string | null;
+    onChange?: ((newValue: {
+        family: string;
+        weight: string;
+        category: string;
+    }) => void) | undefined;
+    description?: string | undefined;
+    controllerId: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    hideRecentFromList?: boolean;
+    hideTrashIcon?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FontInputController = InstanceType<typeof FontInputController>;
+export default FontInputController;

package/dist/components/ic/InputControllerHeader.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+// Svelte imports
+import { onDestroy, onMount } from 'svelte';
+
+// Shadcn UI Components from design-system
+import { Tooltip, Portal } from '@widgetic/design-system/components';
+// console.log("InputControllerHeader - Tooltip:", Tooltip);
+
+// Lucide Icons from design-system
+import { Info } from '@widgetic/design-system/icons';
+
+// Component props
+let className = '';
+export { className as class };
+export let style = '';
+//
+export let label: string;
+export let helpText: string | undefined = undefined;
+
+let showHelp = false;
+let showInfoIcon = false;
+let isScrolling = false;
+let isHovering = false;
+let tooltipTimeout: ReturnType<typeof setTimeout>;
+
+// Global scroll handler
+function handleScroll() {
+  showHelp = false;
+  isScrolling = true;
+  clearTimeout(scrollTimeout);
+  clearTimeout(tooltipTimeout);
+  scrollTimeout = setTimeout(() => {
+    isScrolling = false;
+    // If we're still hovering when scroll stops, show the tooltip
+    if (isHovering) {
+      showHelp = true;
+    }
+  }, 150);
+}
+
+let scrollTimeout: ReturnType<typeof setTimeout>;
+
+function handleMouseEnter() {
+  isHovering = true;
+  clearTimeout(tooltipTimeout);
+  
+  // Add buffer time for tooltip only
+  tooltipTimeout = setTimeout(() => {
+    if (isHovering && !isScrolling) {
+      showHelp = true;
+    }
+  }, 500); // 500ms delay for tooltip
+}
+
+function handleMouseLeave() {
+  isHovering = false;
+  showHelp = false;
+  clearTimeout(tooltipTimeout);
+}
+
+onMount(() => {
+  // Add listeners to both window and all scrollable parents
+  window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+  document.addEventListener('wheel', handleScroll, { capture: true, passive: true });
+  document.addEventListener('touchmove', handleScroll, { capture: true, passive: true });
+});
+
+onDestroy(() => {
+  window.removeEventListener('scroll', handleScroll, { capture: true });
+  document.removeEventListener('wheel', handleScroll, { capture: true });
+  document.removeEventListener('touchmove', handleScroll, { capture: true });
+  clearTimeout(scrollTimeout);
+  clearTimeout(tooltipTimeout);
+});
+</script>
+
+<div class="input-controller-header widgetic-colors {className ? className + ' ' : ''}flex group" {style}>
+  <div class="header-label-ct flex-1 min-w-0 flex items-center h-full">
+    <div class="tooltip-group flex items-center max-w-full" style="gap: 8px;">
+      <span class="subtext cursor-default select-none truncate !text-base" style="color: hsl(var(--grey5));">
+        {label}
+      </span>
+      {#if helpText}
+        <Tooltip.Provider>
+          <Tooltip.Root open={showHelp && !isScrolling}>
+            <Tooltip.Trigger 
+              tabindex={-1}
+              class="focus:outline-none select-none w-5 cursor-default flex items-center"
+            >
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <span 
+                class="inline-flex items-center transition-opacity duration-500"
+                class:opacity-0={!isHovering}
+                class:opacity-100={isHovering}
+                class:cursor-help={!isScrolling}
+                onmouseenter={handleMouseEnter}
+                onmouseleave={handleMouseLeave}
+              >
+                <Info class="w-5 h-5 transition-colors" style="color: hsl(var(--sage-green));" />
+              </span>
+            </Tooltip.Trigger>
+
+            {#if showHelp && !isScrolling}
+              <Portal target="editor-tooltips">
+                <Tooltip.Content 
+                  side="right"
+                  sideOffset={5}
+                  align="center"
+                  alignOffset={-1}
+                  class="widgetic-colors tooltip-content fixed rounded-md px-3 py-1.5 shadow-md select-none whitespace-nowrap"
+                  style="background: hsl(var(--dark)); color: white; z-index: 99999;"
+                >
+                  <p class="caption text-white">{helpText}</p>
+                </Tooltip.Content>
+              </Portal>
+            {/if}
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Ensure consistent height and alignment */
+  :global(.input-controller-header) {
+    min-height: 48px !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  :global(.input-controller-header:focus-within), :global(.info-bt:focus-within) {
+    outline: none !important;
+  }
+  .tooltip-group:hover :global(.opacity-0) {
+    opacity: 1 !important;
+  }
+
+  /* Simplified tooltip styles */
+  :global(.tooltip-content) {
+    background-color: hsl(var(--dark));
+    color: white;
+    pointer-events: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+</style>
+

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

@@ -0,0 +1,23 @@
+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 InputControllerHeader: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    label: string;
+    helpText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputControllerHeader = InstanceType<typeof InputControllerHeader>;
+export default InputControllerHeader;

package/dist/components/ic/NumberControls.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Button, Input } from '@widgetic/design-system/components';
+  import { IconMinus, IconPlus } from '@widgetic/design-system/icons';
+
+  export let value: number;
+  export let onChange: (newValue: number) => void;
+  export let min: number;
+  export let max: number;
+  export let step: number = 1;
+  export let isLocked: boolean = false;
+  export let onFocus: () => void = () => {};
+  export let customInputClass: string = "";
+  export let wrapAround: boolean = false; // For angle input to wrap 0-360
+  export let suffix: string = ""; // For adding units like degrees (°)
+  export let width: string = "185px"; // Customizable width
+
+  let inputValue = String(value); // Add this to track input value separately
+  let isEditing = false;
+  let isPressed = false;
+  let disabledOpacity = 60;
+
+  // Fix TypeScript errors by properly typing the timers
+  let autoRepeatTimer: number | null = null;
+  let autoRepeatInterval: number | null = null;
+
+  const HOLD_DELAY = 400;
+  const REPEAT_INTERVAL = 80;
+
+  // Add unique ID generation
+  const inputId = `number-input-${Math.random().toString(36).substr(2, 9)}`;
+
+  $: isAtMin = !wrapAround && value <= min;
+  $: isAtMax = !wrapAround && value >= max;
+
+  // Update inputValue when value prop changes and we're not editing
+  $: if (!isEditing) {
+    inputValue = String(value);
+  }
+
+  function handleValueChange(adjustment: number) {
+    try {
+      let newValue = value + adjustment;
+      
+      if (wrapAround) {
+        if (newValue >= 360) newValue -= 360;
+        if (newValue < 0) newValue += 360;
+      } else {
+        if (min !== undefined && newValue < min) {
+          newValue = min;
+        }
+        if (max !== undefined && newValue > max) {
+          newValue = max;
+        }
+      }
+
+      value = newValue;
+      onChange(newValue);
+    } catch (error) {
+      console.error('Error in handleValueChange:', error);
+    }
+  }
+
+  function handleInput(e: Event) {
+    const input = e.currentTarget as HTMLInputElement;
+    inputValue = input.value;
+
+    if (inputValue === '') {
+      isEditing = true;
+      return;
+    }
+
+    // Handle special cases
+    if (inputValue === '-0') {
+      inputValue = '0';
+      input.value = '0';
+      value = 0;
+      onChange(0);
+      return;
+    }
+
+    // If starts with 0 and has more digits, remove the leading 0
+    if (inputValue.startsWith('0') && inputValue.length > 1 && !inputValue.startsWith('-')) {
+      inputValue = inputValue.substring(1);
+      input.value = inputValue;
+    }
+
+    // Don't allow minus sign if:
+    // 1. min >= 0
+    // 2. there's already a minus sign
+    // 3. there are numbers before it
+    if (inputValue.includes('-')) {
+      if (min >= 0 || inputValue.indexOf('-') > 0 || inputValue.split('-').length > 2) {
+        // Remove all minus signs or keep only the first one if allowed
+        inputValue = min >= 0 
+          ? inputValue.replace(/-/g, '') 
+          : '-' + inputValue.replace(/-/g, '');
+        input.value = inputValue;
+      }
+    }
+
+    // Update regex to prevent minus sign if min >= 0
+    // Only allow minus at the start of the string
+    const validNumberRegex = min >= 0 ? /^\d*$/ : /^-?\d*$/;
+    if (!validNumberRegex.test(inputValue)) {
+      // Remove any invalid characters
+      input.value = inputValue.replace(min >= 0 ? /[^\d]/g : /[^\d-]/g, '');
+      // If there's a minus, ensure it's at the start
+      if (input.value.includes('-') && input.value.indexOf('-') > 0) {
+        input.value = input.value.replace(/-/g, '');
+      }
+      inputValue = input.value;
+      return;
+    }
+
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      isEditing = true;
+      
+      // Validate both min and max during typing
+      if (wrapAround && max === 360) {
+        if (numValue >= 360) {
+          inputValue = '359';
+          value = 359;
+          onChange(359);
+          return;
+        }
+      } else if (!wrapAround) {
+        if (numValue > max) {
+          inputValue = String(max);
+          value = max;
+          onChange(max);
+          return;
+        }
+        if (numValue < min) {
+          inputValue = String(min);
+          value = min;
+          onChange(min);
+          return;
+        }
+      }
+      
+      // Value is within range
+      value = numValue;
+      onChange(numValue);
+    }
+  }
+
+  function handleBlur() {
+    isEditing = false;
+    const finalValue = parseFloat(inputValue);
+
+    if (isNaN(finalValue) || inputValue === '' || inputValue === '-') {
+      value = min;
+      inputValue = String(min);
+      onChange(min);
+      return;
+    }
+
+    // Apply validation on blur
+    let validatedValue = finalValue;
+    if (!wrapAround) {
+      if (finalValue < min) {
+        validatedValue = min;
+      }
+      if (finalValue > max) {
+        validatedValue = max;
+      }
+    } else if (wrapAround) {
+      validatedValue = ((finalValue % 360) + 360) % 360;
+    }
+
+    value = validatedValue;
+    inputValue = String(validatedValue);
+    onChange(validatedValue);
+  }
+
+  function startAutoRepeat(operation: 'increment' | 'decrement', event: MouseEvent) {
+    event.preventDefault();
+    stopAutoRepeat();
+    
+    const adjustment = operation === 'increment' ? step : -step;
+    isPressed = true;
+    handleValueChange(adjustment);
+    
+    autoRepeatTimer = window.setTimeout(() => {
+      if (isPressed) {
+        autoRepeatInterval = window.setInterval(() => {
+          if (isPressed) {
+            handleValueChange(adjustment);
+          }
+        }, REPEAT_INTERVAL);
+      }
+    }, HOLD_DELAY);
+  }
+
+  function stopAutoRepeat(event?: MouseEvent | FocusEvent) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    
+    if (autoRepeatTimer !== null) {
+      window.clearTimeout(autoRepeatTimer);
+      autoRepeatTimer = null;
+    }
+    if (autoRepeatInterval !== null) {
+      window.clearInterval(autoRepeatInterval);
+      autoRepeatInterval = null;
+    }
+    
+    isPressed = false;
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    // ... rest of the function
+  }
+
+  onDestroy(() => {
+    stopAutoRepeat();
+  });
+</script>
+
+<div class="h-[48px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green" style="width: {width}">
+  <div class="flex-1 relative flex items-center">
+    <div class="flex items-center flex-1">
+      <Input
+        id={inputId}
+        type="text"
+        value={inputValue}
+        onfocus={onFocus}
+        oninput={handleInput}
+        onblur={handleBlur}
+        readonly={isLocked}
+        class="w-full h-full border-0 bg-transparent subtext text-grey7 placeholder:text-grey3 focus-visible:ring-0 focus-visible:ring-offset-0 pl-4 {customInputClass}"
+      />
+      {#if suffix}
+        <span class="subtext text-grey7 pointer-events-none -ml-1">
+          {suffix}
+        </span>
+      {/if}
+    </div>
+  </div>
+  
+  <div class="flex items-center gap-2 px-2">
+    <Button
+      variant="outline"
+      size="icon"
+      class="widgetic-colors h-6 w-6 rounded-lg bg-white border border-grey2 transition-colors group active:scale-95"
+      disabled={isLocked || isAtMin}
+      onmousedown={(e: MouseEvent) => startAutoRepeat('decrement', e)}
+      onmouseup={stopAutoRepeat}
+      onmouseleave={stopAutoRepeat}
+      style="opacity: {isLocked || isAtMin ? disabledOpacity : 100}%"
+    >
+      <IconMinus 
+        class="!text-grey5 group-hover:!text-grey7"
+        style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+      />
+    </Button>
+    
+    <Button
+      variant="outline"
+      size="icon"
+      class="widgetic-colors h-6 w-6 rounded-lg bg-white border border-grey2 transition-colors group active:scale-95"
+      disabled={isLocked || isAtMax}
+      onmousedown={(e: MouseEvent) => startAutoRepeat('increment', e)}
+      onmouseup={stopAutoRepeat}
+      onmouseleave={stopAutoRepeat}
+      style="opacity: {isLocked || isAtMax ? disabledOpacity : 100}%"
+    >
+      <IconPlus 
+        class="!text-grey5 group-hover:!text-grey7"
+        style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+      />
+    </Button>
+  </div>
+</div>
+
+<style>
+  :global([id^="number-input-"]) {
+    text-align: left;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    padding-right: 0 !important;
+  }
+  
+  :global([id^="number-input-"]::-webkit-outer-spin-button),
+  :global([id^="number-input-"]::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+
+  :global(.number-input-button:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+</style> 

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

@@ -0,0 +1,30 @@
+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 NumberControls: $$__sveltets_2_IsomorphicComponent<{
+    value: number;
+    onChange: (newValue: number) => void;
+    min: number;
+    max: number;
+    step?: number;
+    isLocked?: boolean;
+    onFocus?: () => void;
+    customInputClass?: string;
+    wrapAround?: boolean;
+    suffix?: string;
+    width?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumberControls = InstanceType<typeof NumberControls>;
+export default NumberControls;