@dodlhuat/basix 1.3.4 → 1.4.0

package/js/color-picker.js

@@ -0,0 +1,291 @@
+class ColorPicker {
+    container;
+    onChange;
+    canvas;
+    ctx;
+    cursor;
+    hueSlider;
+    hexInput;
+    rInput;
+    gInput;
+    bInput;
+    preview;
+    hue = 0;
+    saturation = 100;
+    brightness = 100;
+    isDragging = false;
+    abortController = new AbortController();
+    ro;
+    constructor(elementOrSelector, options = {}) {
+        const el = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!el)
+            throw new Error(`ColorPicker: element not found for "${elementOrSelector}"`);
+        this.container = el;
+        this.onChange = options.onChange;
+        this.build();
+        this.bindEvents();
+        this.ro = new ResizeObserver(() => this.resizeCanvas());
+        this.ro.observe(this.canvas.parentElement);
+        this.resizeCanvas();
+        if (options.value) {
+            this.setValue(options.value);
+        }
+        else {
+            this.updateFromHSB();
+        }
+    }
+    build() {
+        this.container.classList.add('color-picker');
+        this.container.innerHTML = `
+            <div class="color-picker__field">
+                <canvas class="color-picker__canvas"></canvas>
+                <div class="color-picker__cursor" aria-hidden="true"></div>
+            </div>
+            <div class="color-picker__controls">
+                <div class="color-picker__hue-track">
+                    <input type="range" class="color-picker__hue-slider" min="0" max="360" value="0" aria-label="Hue">
+                </div>
+                <div class="color-picker__preview" aria-hidden="true"></div>
+            </div>
+            <div class="color-picker__inputs">
+                <div class="color-picker__input-group color-picker__input-group--hex">
+                    <label>HEX</label>
+                    <input type="text" class="color-picker__hex" value="#FF0000" spellcheck="false" autocomplete="off" maxlength="7">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>R</label>
+                    <input type="number" class="color-picker__r" min="0" max="255" value="255">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>G</label>
+                    <input type="number" class="color-picker__g" min="0" max="255" value="0">
+                </div>
+                <div class="color-picker__input-group">
+                    <label>B</label>
+                    <input type="number" class="color-picker__b" min="0" max="255" value="0">
+                </div>
+            </div>
+        `;
+        const canvas = this.container.querySelector('.color-picker__canvas');
+        const ctx = canvas?.getContext('2d');
+        if (!canvas || !ctx)
+            throw new Error('ColorPicker: canvas context unavailable');
+        this.canvas = canvas;
+        this.ctx = ctx;
+        this.cursor = this.container.querySelector('.color-picker__cursor');
+        this.hueSlider = this.container.querySelector('.color-picker__hue-slider');
+        this.hexInput = this.container.querySelector('.color-picker__hex');
+        this.rInput = this.container.querySelector('.color-picker__r');
+        this.gInput = this.container.querySelector('.color-picker__g');
+        this.bInput = this.container.querySelector('.color-picker__b');
+        this.preview = this.container.querySelector('.color-picker__preview');
+    }
+    bindEvents() {
+        const sig = { signal: this.abortController.signal };
+        this.canvas.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            this.canvas.setPointerCapture(e.pointerId);
+            this.isDragging = true;
+            this.handleFieldInteraction(e);
+        }, sig);
+        this.canvas.addEventListener('pointermove', (e) => {
+            if (!this.isDragging)
+                return;
+            this.handleFieldInteraction(e);
+        }, sig);
+        this.canvas.addEventListener('pointerup', () => {
+            this.isDragging = false;
+        }, sig);
+        this.canvas.addEventListener('pointercancel', () => {
+            this.isDragging = false;
+        }, sig);
+        this.hueSlider.addEventListener('input', () => {
+            this.hue = +this.hueSlider.value;
+            this.drawField();
+            this.updateFromHSB();
+        }, sig);
+        this.hexInput.addEventListener('change', () => this.handleHexInput(), sig);
+        this.rInput.addEventListener('change', () => this.handleRGBInput(), sig);
+        this.gInput.addEventListener('change', () => this.handleRGBInput(), sig);
+        this.bInput.addEventListener('change', () => this.handleRGBInput(), sig);
+    }
+    resizeCanvas() {
+        const w = this.canvas.offsetWidth;
+        const h = this.canvas.offsetHeight;
+        if (w === 0 || h === 0)
+            return;
+        if (this.canvas.width === w && this.canvas.height === h)
+            return;
+        this.canvas.width = w;
+        this.canvas.height = h;
+        this.drawField();
+        this.updateCursor();
+    }
+    drawField() {
+        const { width, height } = this.canvas;
+        if (width === 0 || height === 0)
+            return;
+        const gradH = this.ctx.createLinearGradient(0, 0, width, 0);
+        gradH.addColorStop(0, '#fff');
+        gradH.addColorStop(1, `hsl(${this.hue}, 100%, 50%)`);
+        this.ctx.fillStyle = gradH;
+        this.ctx.fillRect(0, 0, width, height);
+        const gradV = this.ctx.createLinearGradient(0, 0, 0, height);
+        gradV.addColorStop(0, 'rgba(0,0,0,0)');
+        gradV.addColorStop(1, '#000');
+        this.ctx.fillStyle = gradV;
+        this.ctx.fillRect(0, 0, width, height);
+    }
+    handleFieldInteraction(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+        const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
+        this.saturation = (x / rect.width) * 100;
+        this.brightness = 100 - (y / rect.height) * 100;
+        this.updateCursor();
+        this.updateFromHSB();
+    }
+    updateCursor() {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (this.saturation / 100) * rect.width;
+        const y = (1 - this.brightness / 100) * rect.height;
+        this.cursor.style.left = `${x}px`;
+        this.cursor.style.top = `${y}px`;
+        this.cursor.classList.toggle('color-picker__cursor--dark', this.brightness > 50 && this.saturation < 80);
+    }
+    updateFromHSB() {
+        const rgb = this.hsbToRgb(this.hue, this.saturation, this.brightness);
+        const hex = this.rgbToHex(rgb);
+        this.syncInputs(rgb, hex);
+        this.syncPreview(rgb);
+        this.onChange?.(hex, rgb);
+    }
+    syncInputs(rgb, hex) {
+        this.hexInput.value = hex;
+        this.rInput.value = String(rgb.r);
+        this.gInput.value = String(rgb.g);
+        this.bInput.value = String(rgb.b);
+    }
+    syncPreview(rgb) {
+        this.preview.style.backgroundColor = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+    }
+    handleHexInput() {
+        const hex = this.hexInput.value.trim();
+        if (/^#[0-9a-f]{6}$/i.test(hex)) {
+            this.setFromRGB(this.hexToRgb(hex));
+        }
+        else {
+            this.hexInput.value = this.rgbToHex(this.hsbToRgb(this.hue, this.saturation, this.brightness));
+        }
+    }
+    handleRGBInput() {
+        const clamp = (v) => Math.max(0, Math.min(255, isNaN(v) ? 0 : v));
+        this.setFromRGB({
+            r: clamp(+this.rInput.value),
+            g: clamp(+this.gInput.value),
+            b: clamp(+this.bInput.value),
+        });
+    }
+    setFromRGB(rgb) {
+        const { h, s, v } = this.rgbToHsb(rgb);
+        this.hue = h;
+        this.saturation = s;
+        this.brightness = v;
+        this.hueSlider.value = String(this.hue);
+        this.drawField();
+        this.updateCursor();
+        this.updateFromHSB();
+    }
+    getValue() {
+        return this.rgbToHex(this.hsbToRgb(this.hue, this.saturation, this.brightness));
+    }
+    setValue(hex) {
+        if (!/^#[0-9a-f]{6}$/i.test(hex))
+            return;
+        this.setFromRGB(this.hexToRgb(hex));
+    }
+    destroy() {
+        this.abortController.abort();
+        this.ro.disconnect();
+        this.container.classList.remove('color-picker');
+        this.container.innerHTML = '';
+    }
+    hsbToRgb(h, s, v) {
+        s /= 100;
+        v /= 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHsb({ r, g, b }) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === r)
+                h = ((g - b) / d) % 6;
+            else if (max === g)
+                h = (b - r) / d + 2;
+            else
+                h = (r - g) / d + 4;
+        }
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        return {
+            h,
+            s: max === 0 ? 0 : Math.round((d / max) * 100),
+            v: Math.round(max * 100),
+        };
+    }
+    rgbToHex({ r, g, b }) {
+        return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+    }
+    hexToRgb(hex) {
+        const m = hex.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+        return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) };
+    }
+}
+export { ColorPicker };

package/js/context-menu.d.ts

@@ -1,4 +1,3 @@
-/** Definition for a single context menu item including optional submenu. */
 interface ContextMenuItemDef {
     label: string;
     icon?: string;
@@ -12,10 +11,8 @@ type ContextMenuInput = ContextMenuItemDef | 'separator' | {
     group: string;
 };
 interface ContextMenuOptions {
-    /** Path to the SVG sprite file, e.g. `'svg-icons/icons.svg'`. Required to render icons. */
     spritePath?: string;
 }
-/** Right-click context menu with keyboard navigation and nested submenu support. */
 declare class ContextMenu {
     private items;
     private targets;

package/js/context-menu.js

@@ -1,4 +1,3 @@
-/** Right-click context menu with keyboard navigation and nested submenu support. */
 class ContextMenu {
     items;
     targets;
@@ -148,8 +147,6 @@ class ContextMenu {
                 const rect = li.getBoundingClientRect();
                 return rect.right + submenuEl.offsetWidth > window.innerWidth;
             };
-            // Delay timer prevents the submenu closing when mouse travels from
-            // item → submenu (mouseleave fires before mouseenter on the submenu)
             let closeTimer = null;
             const openSub = () => {
                 if (closeTimer) {

package/js/datepicker.d.ts

@@ -1,9 +1,7 @@
-/** Localised day and month names for the DatePicker. */
 interface DatePickerLocales {
     days: string[];
     months: string[];
 }
-/** Configuration options for the DatePicker. */
 interface DatePickerOptions {
     mode?: 'single' | 'range';
     startDay?: number;
@@ -12,12 +10,10 @@ interface DatePickerOptions {
     format?: (date: Date) => string;
     onSelect?: (date: Date | DateRange) => void;
 }
-/** A date range with optional start and end dates. */
 interface DateRange {
     start: Date | null;
     end: Date | null;
 }
-/** Calendar-based date (or date-range) picker that attaches to an input element. */
 declare class DatePicker {
     private input;
     private options;

package/js/datepicker.js

@@ -1,5 +1,4 @@
 import { computePosition } from './position.js';
-/** Calendar-based date (or date-range) picker that attaches to an input element. */
 class DatePicker {
     input;
     options;

package/js/docs-nav.js

@@ -16,6 +16,7 @@ const NAV = [
         items: [
             { label: 'Inputs & Forms',   href: 'forms/inputs.html' },
             { label: 'Date Picker',      href: 'forms/datepicker.html' },
+            { label: 'Color Picker',     href: 'forms/color-picker.html' },
             { label: 'Range Slider',     href: 'forms/range-slider.html' },
             { label: 'File Uploader',    href: 'forms/file-uploader.html' },
         ],

package/js/dropdown.d.ts

@@ -1,14 +1,11 @@
-/** Configuration options for a Dropdown instance. */
 interface DropdownOptions {
     closeOnSelect?: boolean;
     allowMultipleOpen?: boolean;
 }
-/** Event detail payload for the `dropdown-select` custom event. */
 interface DropdownSelectDetail {
     text: string;
     element: HTMLElement;
 }
-/** Hierarchical dropdown menu with optional multi-open and close-on-select behaviour. */
 declare class Dropdown {
     private container;
     private trigger;
@@ -28,4 +25,4 @@ declare class Dropdown {
     private handleSelection;
     destroy(): void;
 }
-export { Dropdown, DropdownSelectDetail };
+export { Dropdown, type DropdownSelectDetail };

package/js/dropdown.js

@@ -1,5 +1,4 @@
 import { bestPlacement } from './position.js';
-/** Hierarchical dropdown menu with optional multi-open and close-on-select behaviour. */
 class Dropdown {
     container;
     trigger;

package/js/editor.d.ts

@@ -1,10 +1,9 @@
 interface EditorOptions {
-    /** Hides the entire side panel (code/preview) permanently. Safe to use
-     *  without #code, #preview, or #sidePanel in the DOM. */
     simple?: boolean;
+    root?: string | HTMLElement;
 }
-/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 declare class Editor {
+    private readonly root;
     private readonly editable;
     private readonly code;
     private readonly preview;
@@ -14,6 +13,8 @@ declare class Editor {
     private redoStack;
     private abortController;
     constructor(options?: EditorOptions);
+    private q;
+    private qAll;
     private bindToolbar;
     private bindActions;
     private bindKeyboard;

package/js/editor.js

@@ -1,6 +1,6 @@
 import { sanitizeHtml } from './utils.js';
-/** Rich-text editor built on contenteditable with undo/redo and code/preview panels. */
 class Editor {
+    root;
     editable;
     code;
     preview;
@@ -10,24 +10,35 @@ class Editor {
     redoStack = [];
     abortController = new AbortController();
     constructor(options = {}) {
-        const editable = document.getElementById('editable');
-        if (!editable) {
-            throw new Error('Editor: #editable element not found');
+        if (options.root instanceof HTMLElement) {
+            this.root = options.root;
         }
+        else if (typeof options.root === 'string') {
+            const el = document.querySelector(options.root);
+            if (!el)
+                throw new Error(`Editor: root "${options.root}" not found`);
+            this.root = el;
+        }
+        else {
+            this.root = document.body;
+        }
+        const editable = this.q('[data-editor="editable"]');
+        if (!editable)
+            throw new Error('Editor: [data-editor="editable"] element not found');
         this.editable = editable;
-        this.wordCount = document.getElementById('wordCount');
+        this.wordCount = this.q('[data-editor="wordcount"]');
         if (options.simple) {
             this.code = null;
             this.preview = null;
-            this.sidePanel = document.getElementById('sidePanel');
+            this.sidePanel = this.q('[data-editor="side-panel"]');
             this.sidePanel?.classList.add('hidden');
         }
         else {
-            const code = document.getElementById('code');
-            const preview = document.getElementById('preview');
-            const sidePanel = document.getElementById('sidePanel');
+            const code = this.q('[data-editor="code"]');
+            const preview = this.q('[data-editor="preview"]');
+            const sidePanel = this.q('[data-editor="side-panel"]');
             if (!code || !preview || !sidePanel) {
-                throw new Error('Editor: #code, #preview and #sidePanel are required unless simple: true');
+                throw new Error('Editor: [data-editor="code"], [data-editor="preview"] and [data-editor="side-panel"] are required unless simple: true');
             }
             this.code = code;
             this.preview = preview;
@@ -42,9 +53,15 @@ class Editor {
         this.syncViews();
         this.saveState();
     }
+    q(selector) {
+        return this.root.querySelector(selector);
+    }
+    qAll(selector) {
+        return this.root.querySelectorAll(selector);
+    }
     bindToolbar() {
         const sig = { signal: this.abortController.signal };
-        document.querySelectorAll('[data-cmd]').forEach(btn => {
+        this.qAll('[data-cmd]').forEach(btn => {
             btn.addEventListener('click', () => {
                 const cmd = btn.dataset.cmd;
                 const val = btn.dataset.value ?? null;
@@ -55,13 +72,13 @@ class Editor {
     }
     bindActions() {
         const sig = { signal: this.abortController.signal };
-        document.getElementById('linkBtn')?.addEventListener('click', () => {
+        this.q('[data-editor-action="link"]')?.addEventListener('click', () => {
             const url = prompt('Enter URL:', 'https://');
             if (url)
                 this.exec('createLink', url);
         }, sig);
-        const imageFile = document.getElementById('imageFile');
-        document.getElementById('imageBtn')?.addEventListener('click', () => imageFile.click(), sig);
+        const imageFile = this.q('[data-editor="image-file"]');
+        this.q('[data-editor-action="image"]')?.addEventListener('click', () => imageFile?.click(), sig);
         imageFile?.addEventListener('change', () => {
             const file = imageFile.files?.[0];
             if (!file)
@@ -75,7 +92,7 @@ class Editor {
             reader.readAsDataURL(file);
             imageFile.value = '';
         }, sig);
-        document.getElementById('cleanBtn')?.addEventListener('click', () => {
+        this.q('[data-editor-action="clean"]')?.addEventListener('click', () => {
             const sel = window.getSelection();
             if (!sel || sel.rangeCount === 0)
                 return;
@@ -85,35 +102,32 @@ class Editor {
             range.insertNode(document.createTextNode(text));
             this.onContentChange();
         }, sig);
-        document.getElementById('undoBtn')?.addEventListener('click', () => this.undo(), sig);
-        document.getElementById('redoBtn')?.addEventListener('click', () => this.redo(), sig);
-        document.getElementById('toggleCodeBtn')?.addEventListener('click', () => {
+        this.q('[data-editor-action="undo"]')?.addEventListener('click', () => this.undo(), sig);
+        this.q('[data-editor-action="redo"]')?.addEventListener('click', () => this.redo(), sig);
+        this.q('[data-editor-action="toggle-code"]')?.addEventListener('click', () => {
             this.sidePanel?.classList.toggle('hidden');
             this.syncViews();
         }, sig);
-        // Code action buttons — matched by position within .code-actions
         if (this.code) {
             const code = this.code;
-            const codeActions = document.querySelectorAll('.code-actions button');
-            codeActions[0]?.addEventListener('click', () => {
+            this.q('[data-editor-action="apply-code"]')?.addEventListener('click', () => {
                 this.editable.innerHTML = sanitizeHtml(code.value);
                 this.onContentChange();
             }, sig);
-            codeActions[1]?.addEventListener('click', () => {
+            this.q('[data-editor-action="sanitize-code"]')?.addEventListener('click', () => {
                 code.value = sanitizeHtml(code.value);
                 this.editable.innerHTML = code.value;
                 this.onContentChange();
             }, sig);
-            codeActions[2]?.addEventListener('click', () => {
+            this.q('[data-editor-action="minify-code"]')?.addEventListener('click', () => {
                 code.value = code.value
                     .replace(/\n/g, '')
                     .replace(/>\s+</g, '><')
                     .trim();
             }, sig);
         }
-        const saveBtn = document.getElementById('saveBtn');
-        saveBtn?.addEventListener('click', () => this.downloadHTML(), sig);
-        document.getElementById('clearBtn')?.addEventListener('click', () => {
+        this.q('[data-editor-action="save"]')?.addEventListener('click', () => this.downloadHTML(), sig);
+        this.q('[data-editor-action="clear"]')?.addEventListener('click', () => {
             if (confirm('Clear all content?')) {
                 this.editable.innerHTML = '';
                 this.onContentChange();
@@ -121,8 +135,9 @@ class Editor {
         }, sig);
     }
     bindKeyboard() {
-        const saveBtn = document.getElementById('saveBtn');
         window.addEventListener('keydown', (e) => {
+            if (!this.root.contains(document.activeElement))
+                return;
             const mod = e.ctrlKey || e.metaKey;
             if (!mod)
                 return;
@@ -147,7 +162,7 @@ class Editor {
             }
             else if (key === 's') {
                 e.preventDefault();
-                saveBtn?.click();
+                this.q('[data-editor-action="save"]')?.click();
             }
             else if (key === 'z' && !e.shiftKey) {
                 e.preventDefault();
@@ -172,13 +187,13 @@ class Editor {
     }
     bindTabs() {
         const sig = { signal: this.abortController.signal };
-        document.querySelectorAll('.side-tab[data-tab]').forEach(tab => {
+        this.qAll('.side-tab[data-tab]').forEach(tab => {
             tab.addEventListener('click', () => {
-                const targetId = tab.dataset.tab;
-                document.querySelectorAll('.side-tab').forEach(t => t.classList.remove('active'));
-                document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('active'));
+                const target = tab.dataset.tab;
+                this.qAll('.side-tab').forEach(t => t.classList.remove('active'));
+                this.qAll('.side-panel').forEach(p => p.classList.remove('active'));
                 tab.classList.add('active');
-                document.getElementById(targetId)?.classList.add('active');
+                this.q(`[data-editor="${target}"]`)?.classList.add('active');
             }, sig);
         });
     }
@@ -365,7 +380,7 @@ class Editor {
         const lines = text ? text.split('\n').filter(l => l.trim()) : [''];
         for (const line of lines) {
             const li = document.createElement('li');
-            li.textContent = line.trim() || '\u200B';
+            li.textContent = line.trim() || '​';
             list.appendChild(li);
         }
         range.deleteContents();
@@ -439,7 +454,7 @@ ${content}
         const element = container.nodeType === Node.TEXT_NODE
             ? container.parentElement
             : container;
-        document.querySelectorAll('[data-cmd]').forEach(btn => {
+        this.qAll('[data-cmd]').forEach(btn => {
             const cmd = btn.dataset.cmd;
             let active = false;
             let current = element;

package/js/file-uploader.d.ts

@@ -1,21 +1,17 @@
-/** Event detail payload for the `upload-completed` custom event. */
 interface UploadCompletedDetail {
     fileCount: number;
     files: File[];
     results: PromiseSettledResult<unknown>[];
 }
-/** Event detail payload for the `file-validation-error` custom event. */
 interface FileValidationErrorDetail {
     file: File;
     reason: 'size' | 'type';
 }
-/** Configuration options for the FileUploader. */
 interface FileUploaderConfig {
     uploadUrl?: string;
     maxFileSize?: number;
     allowedTypes?: string[];
 }
-/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 declare class FileUploader {
     private container;
     private dropZone;

package/js/file-uploader.js

@@ -1,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 class FileUploader {
     container;
     dropZone;

package/js/flyout-menu.d.ts

@@ -1,4 +1,3 @@
-/** Configuration options for the FlyoutMenu. */
 interface FlyoutMenuOptions {
     triggerSelector?: string;
     menuSelector?: string;
@@ -12,7 +11,6 @@ interface FlyoutMenuOptions {
     enableHeader?: boolean;
     enableFooter?: boolean;
 }
-/** Off-canvas flyout navigation with nested submenu support. */
 declare class FlyoutMenu {
     private options;
     private menuTrigger;

package/js/flyout-menu.js

@@ -1,4 +1,3 @@
-/** Off-canvas flyout navigation with nested submenu support. */
 class FlyoutMenu {
     options;
     menuTrigger;