@widgetic/canvas 0.5.4

package/dist/components/input-controls/ColorIC.svelte

@@ -0,0 +1,388 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    
+    let className = '';
+    export { className as class };
+    export let style = '';
+    
+    // Current color value
+    export let value: string = '#000000';
+    
+    // Label for the color picker
+    export let label: string = 'Color';
+    
+    // Callback when color changes
+    export let onChange: (color: string) => void = () => {};
+
+    // Optional fixed palette — overrides default presets with a custom list
+    export let presets: string[] | null = null;
+    
+    // Hide the color picker swatch + hex input row (show only label + presets)
+    export let showPicker: boolean = true;
+    
+    // Storage key for custom presets (shared across all instances)
+    const PRESETS_STORAGE_KEY = 'fabric-canvas-color-presets';
+    
+    // Default color presets (cannot be deleted)
+    const defaultPresets = [
+        '#000000', '#FFFFFF', '#EF4444', '#F97316', '#EAB308',
+        '#22C55E', '#3B82F6', '#A855F7', '#EC4899', '#6B7280',
+        '#1F2937', '#DC2626', '#EA580C', '#CA8A04', '#16A34A'
+    ];
+    
+    // Custom presets (loaded from storage + added during session)
+    let customPresets: string[] = [];
+    
+    // Combined presets: fixed palette overrides default + custom
+    $: allPresets = presets
+        ? presets
+        : [...defaultPresets, ...customPresets.filter(c => !defaultPresets.includes(c.toUpperCase()))];
+    
+    // Local hex input value
+    let hexInput = value;
+    $: hexInput = normalizeToHex(value) || '#000000';
+    
+    // Convert any color format to HEX
+    function normalizeToHex(color: string | null | undefined): string {
+        if (!color) return '#000000';
+        
+        // Already HEX
+        if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+            return color.toUpperCase();
+        }
+        
+        // HSL format: hsl(h, s%, l%) or hsla(h, s%, l%, a)
+        const hslMatch = color.match(/hsla?\(([^)]+)\)/i);
+        if (hslMatch) {
+            const parts = hslMatch[1].split(',').map(s => parseFloat(s.trim()));
+            if (parts.length >= 3) {
+                const [h, s, l] = parts;
+                return hslToHex(h, s, l);
+            }
+        }
+        
+        // RGB format: rgb(r, g, b) or rgba(r, g, b, a)
+        const rgbMatch = color.match(/rgba?\(([^)]+)\)/i);
+        if (rgbMatch) {
+            const parts = rgbMatch[1].split(',').map(s => parseInt(s.trim()));
+            if (parts.length >= 3) {
+                const [r, g, b] = parts;
+                return rgbToHex(r, g, b);
+            }
+        }
+        
+        // Try as-is (browser might normalize it)
+        return color.toUpperCase();
+    }
+    
+    // Convert HSL to HEX
+    function hslToHex(h: number, s: number, l: number): string {
+        s /= 100;
+        l /= 100;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n: number) => {
+            const k = (n + h / 30) % 12;
+            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+            return Math.round(255 * color).toString(16).padStart(2, '0');
+        };
+        return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+    }
+    
+    // Convert RGB to HEX
+    function rgbToHex(r: number, g: number, b: number): string {
+        const toHex = (n: number) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+    }
+    
+    // Load custom presets from localStorage on mount
+    onMount(() => {
+        try {
+            const stored = localStorage.getItem(PRESETS_STORAGE_KEY);
+            if (stored) {
+                customPresets = JSON.parse(stored);
+            }
+        } catch (e) {
+            console.warn('ColorPicker: Failed to load custom presets', e);
+        }
+    });
+    
+    // Save custom presets to localStorage
+    function saveCustomPresets() {
+        try {
+            localStorage.setItem(PRESETS_STORAGE_KEY, JSON.stringify(customPresets));
+        } catch (e) {
+            console.warn('ColorPicker: Failed to save custom presets', e);
+        }
+    }
+    
+    // Add color to custom presets if not already present
+    function addToCustomPresets(color: string) {
+        const normalizedColor = normalizeToHex(color);
+        if (!defaultPresets.includes(normalizedColor) && !customPresets.includes(normalizedColor)) {
+            customPresets = [...customPresets, normalizedColor];
+            saveCustomPresets();
+        }
+    }
+    
+    // Remove color from custom presets
+    function removeFromCustomPresets(color: string) {
+        const normalizedColor = color.toUpperCase();
+        customPresets = customPresets.filter(c => c.toUpperCase() !== normalizedColor);
+        saveCustomPresets();
+    }
+    
+    // Check if color is a custom preset (can be deleted)
+    function isCustomPreset(color: string): boolean {
+        return !defaultPresets.includes(color.toUpperCase()) && customPresets.includes(color.toUpperCase());
+    }
+    
+    // Handle color picker input (while dragging) - only update UI, don't save
+    function handleColorPickerInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newColor = input.value.toUpperCase();
+        hexInput = newColor;
+        onChange(newColor);
+        // Don't add to presets while dragging
+    }
+    
+    // Handle color picker change (on release) - save to presets
+    function handleColorPickerChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newColor = input.value.toUpperCase();
+        hexInput = newColor;
+        onChange(newColor);
+        addToCustomPresets(newColor);
+    }
+    
+    // Handle hex input change
+    function handleHexInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        let newValue = input.value.toUpperCase();
+        
+        // Add # if missing
+        if (!newValue.startsWith('#')) {
+            newValue = '#' + newValue;
+        }
+        
+        // Validate hex format
+        if (/^#[0-9A-F]{6}$/i.test(newValue)) {
+            hexInput = newValue;
+            onChange(newValue);
+        } else {
+            hexInput = newValue; // Still update input for typing
+        }
+    }
+    
+    // Handle hex input blur - validate, reset if invalid, and add to presets
+    function handleHexBlur() {
+        if (/^#[0-9A-F]{6}$/i.test(hexInput)) {
+            addToCustomPresets(hexInput);
+        } else {
+            hexInput = normalizeToHex(value) || '#000000';
+        }
+    }
+    
+    // Handle preset click
+    function handlePresetClick(color: string) {
+        const normalized = color.toUpperCase();
+        hexInput = normalized;
+        onChange(normalized);
+    }
+    
+    // Handle delete preset click
+    function handleDeletePreset(e: Event, color: string) {
+        e.stopPropagation();
+        removeFromCustomPresets(color);
+    }
+</script>
+
+<div class="{className ? className + ' ' : ''}color-picker-component" style={style}>
+    <span class="prop-label">{label}</span>
+    
+    {#if showPicker}
+    <div class="color-input-row">
+        <input 
+            type="color" 
+            value={normalizeToHex(value) || '#000000'}
+            oninput={handleColorPickerInput}
+            onchange={handleColorPickerChange}
+            class="color-swatch"
+            title="Open color picker"
+        />
+        <input 
+            type="text" 
+            value={hexInput}
+            oninput={handleHexInput}
+            onblur={handleHexBlur}
+            class="hex-input"
+            maxlength="7"
+            placeholder="#000000"
+        />
+    </div>
+    {/if}
+    
+    <div class="presets-container overflow-x-hidden p-2 border border-gray-300 rounded-md {presets ? 'fixed-palette' : ''}"
+         style={presets ? `grid-template-columns: repeat(${Math.min(presets.length, 8)}, 1fr); max-height: none;` : ''}>
+        {#each allPresets as color}
+            <div class="preset-wrapper">
+                <button 
+                    class="preset-btn"
+                    class:active={normalizeToHex(value) === color.toUpperCase()}
+                    style="background-color: {color}"
+                    title={color}
+                    onclick={() => handlePresetClick(color)}
+                ></button>
+                {#if !presets && isCustomPreset(color)}
+                    <button 
+                        class="delete-btn"
+                        title="Remove color"
+                        onclick={(e) => handleDeletePreset(e, color)}
+                    >×</button>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .color-picker-component {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    
+    .prop-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .color-input-row {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+    }
+    
+    .color-swatch {
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+    
+    .color-swatch::-webkit-color-swatch-wrapper {
+        padding: 2px;
+    }
+    
+    .color-swatch::-webkit-color-swatch {
+        border-radius: 2px;
+        border: none;
+    }
+    
+    .hex-input {
+        flex: 1;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: monospace;
+        text-transform: uppercase;
+    }
+    
+    .hex-input:focus {
+        outline: none;
+        border-color: var(--accent, #314F2F);
+    }
+    
+    .presets-container {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 6px;
+        /* Height for exactly 3 rows without scroll:
+           - 3 rows of ~30px buttons = 90px
+           - 2 vertical gaps of 6px = 12px  
+           - padding top + bottom = 12px
+           - Total = ~114px, add some buffer for borders = 120px */
+        max-height: 142px;
+        overflow-y: auto;
+        padding: 6px;
+    }
+    
+    /* Transparent scrollbar */
+    .presets-container::-webkit-scrollbar {
+        width: 6px;
+    }
+    
+    .presets-container::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    
+    .presets-container::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+    }
+    
+    .presets-container::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    
+    .preset-wrapper {
+        position: relative;
+    }
+    
+    .preset-btn {
+        width: 100%;
+        aspect-ratio: 1;
+        min-height: 26px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        cursor: pointer;
+        /* Use outline-based hover — no layout change, no scrollbar flash */
+        transition: box-shadow 0.1s ease;
+    }
+    
+    .preset-btn:hover {
+        /* Ring highlight: doesn't affect layout or cause overflow unlike transform: scale() */
+        box-shadow: 0 0 0 2px #6b7280;
+        z-index: 1;
+    }
+    
+    .preset-btn.active {
+        box-shadow: 0 0 0 2px var(--accent, #314F2F);
+    }
+    
+    .delete-btn {
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: #ef4444;
+        color: white;
+        font-size: 10px;
+        line-height: 1;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .preset-wrapper:hover .delete-btn {
+        opacity: 1;
+    }
+    
+    .delete-btn:hover {
+        background: #dc2626;
+    }
+</style>

package/dist/components/input-controls/ColorIC.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        value?: string;
+        label?: string;
+        onChange?: (color: string) => void;
+        presets?: string[] | null;
+        showPicker?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorICProps = typeof __propDef.props;
+export type ColorICEvents = typeof __propDef.events;
+export type ColorICSlots = typeof __propDef.slots;
+export default class ColorIC extends SvelteComponentTyped<ColorICProps, ColorICEvents, ColorICSlots> {
+}
+export {};

package/dist/components/input-controls/FontSelectorIC.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    // Font Selector Input Controller - Reusable component
+    export let value: string = 'Arial';
+    export let onChange: (family: string) => void = () => {};
+    
+    const fonts = [
+        'Arial',
+        'Helvetica',
+        'Times New Roman',
+        'Georgia',
+        'Verdana',
+        'Comic Sans MS',
+        'Courier New',
+        'Impact'
+    ];
+</script>
+
+<div class="font-selector-ic">
+    <span class="label">Font Family</span>
+    <select 
+        class="font-select"
+        {value}
+        onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
+    >
+        {#each fonts as font}
+            <option value={font} style="font-family: {font}">{font}</option>
+        {/each}
+    </select>
+</div>
+
+<style>
+    .font-selector-ic {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    
+    .label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .font-select {
+        padding: 8px 12px;
+        border: 2px solid #e5e7eb;
+        border-radius: 6px;
+        font-size: 14px;
+        background: white;
+        cursor: pointer;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 12px center;
+        padding-right: 32px;
+    }
+    
+    .font-select:hover {
+        border-color: #3b82f6;
+    }
+    
+    .font-select:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+</style>

package/dist/components/input-controls/FontSelectorIC.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string;
+        onChange?: (family: string) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FontSelectorICProps = typeof __propDef.props;
+export type FontSelectorICEvents = typeof __propDef.events;
+export type FontSelectorICSlots = typeof __propDef.slots;
+export default class FontSelectorIC extends SvelteComponentTyped<FontSelectorICProps, FontSelectorICEvents, FontSelectorICSlots> {
+}
+export {};

package/dist/components/input-controls/SliderUnitIC.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+    let className = '';
+    export { className as class };
+    export let style = '';
+    
+    // Current value
+    export let value: number = 0;
+    
+    // Label for the slider
+    export let label: string = 'Value';
+    
+    // Min/max/step for the slider
+    export let min: number = 0;
+    export let max: number = 100;
+    export let step: number = 1;
+    
+    // Unit to display (%, px, etc.)
+    export let unit: string = '%';
+    
+    // Callback when value changes
+    export let onChange: (value: number) => void = () => {};
+    
+    // Local input value for editing
+    let inputValue = value.toString();
+    $: inputValue = value.toString();
+    
+    // Handle slider change
+    function handleSliderChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newValue = parseFloat(input.value);
+        inputValue = newValue.toString();
+        onChange(newValue);
+    }
+    
+    // Handle text input change
+    function handleInputChange(e: Event) {
+        const input = e.target as HTMLInputElement;
+        inputValue = input.value;
+        
+        const newValue = parseFloat(input.value);
+        if (!isNaN(newValue)) {
+            // Clamp value to min/max
+            const clampedValue = Math.min(max, Math.max(min, newValue));
+            onChange(clampedValue);
+        }
+    }
+    
+    // Handle input blur - validate and reset if invalid
+    function handleInputBlur() {
+        const newValue = parseFloat(inputValue);
+        if (isNaN(newValue)) {
+            inputValue = value.toString();
+        } else {
+            // Clamp and update
+            const clampedValue = Math.min(max, Math.max(min, newValue));
+            inputValue = clampedValue.toString();
+            if (clampedValue !== value) {
+                onChange(clampedValue);
+            }
+        }
+    }
+    
+    // Handle Enter key
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            handleInputBlur();
+            (e.target as HTMLInputElement).blur();
+        }
+    }
+
+    // Progress percentage for the filled portion of the track
+    $: progressPercent = max !== min ? ((value - min) / (max - min)) * 100 : 0;
+</script>
+
+<div class="{className ? className + ' ' : ''}slider-input-component" style={style}>
+    <span class="prop-label">{label}</span>
+    
+    <div class="slider-row">
+        <input 
+            type="range" 
+            {min}
+            {max}
+            {step}
+            value={value}
+            oninput={handleSliderChange}
+            class="slider"
+            style="--progress: {progressPercent}%"
+        />
+        <div class="value-input-wrapper">
+            <input 
+                type="text" 
+                value={inputValue}
+                oninput={handleInputChange}
+                onblur={handleInputBlur}
+                onkeydown={handleKeydown}
+                class="value-input"
+            />
+            <span class="unit">{unit}</span>
+        </div>
+    </div>
+</div>
+
+<style>
+    .slider-input-component {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+    
+    .prop-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .slider-row {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+    }
+    
+    .slider {
+        flex: 1;
+        cursor: pointer;
+        height: 8px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        /* Increase hit zone above and below the thin track line */
+        padding: 9px 0;
+        box-sizing: content-box;
+        margin: 0;
+    }
+
+    /* Track with rounded ends and progress fill */
+    .slider::-webkit-slider-runnable-track {
+        height: 8px;
+        border-radius: 4px;
+        background: linear-gradient(
+            to right,
+            var(--accent, #314F2F) 0%,
+            var(--accent, #314F2F) var(--progress, 0%),
+            #e5e7eb var(--progress, 0%),
+            #e5e7eb 100%
+        );
+    }
+
+    .slider::-moz-range-track {
+        height: 8px;
+        border-radius: 4px;
+        background: #e5e7eb;
+        border: none;
+    }
+
+    /* Firefox progress fill */
+    .slider::-moz-range-progress {
+        height: 8px;
+        border-radius: 4px 0 0 4px;
+        background: var(--accent, #314F2F);
+    }
+    
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 14px;
+        height: 14px;
+        background: var(--accent, #314F2F);
+        border-radius: 50%;
+        cursor: pointer;
+        margin-top: -3px;
+    }
+    
+    .slider::-moz-range-thumb {
+        width: 14px;
+        height: 14px;
+        background: var(--accent, #314F2F);
+        border-radius: 50%;
+        cursor: pointer;
+        border: none;
+    }
+    
+    .value-input-wrapper {
+        display: flex;
+        align-items: center;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        overflow: hidden;
+        min-width: 60px;
+    }
+    
+    .value-input {
+        width: 35px;
+        padding: 4px 6px;
+        border: none;
+        font-size: 12px;
+        text-align: right;
+        outline: none;
+    }
+    
+    .value-input:focus {
+        background: transparent;
+    }
+
+    .value-input-wrapper:focus-within {
+        border-color: var(--accent, #314F2F);
+    }
+    
+    .unit {
+        padding: 4px 6px 4px 0;
+        font-size: 11px;
+        color: #6b7280;
+        background: white;
+    }
+</style>