atomicuilibrary 0.0.1

package/dist/cjs/ui-input-pair.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.js');
+
+const inputPairCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:auto;min-width:0;--pair-radius:10px}:host.full-width{width:100%}.pair-main-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--label-color, var(--text-secondary, #64748b));margin-bottom:8px}.pair-container{display:flex;align-items:flex-end;width:100%}.pair-container .input-item{flex:1;min-width:0}.pair-container{}.pair-container .input-item.left ui-input::part(container),.pair-container .input-item.right ui-input::part(container){border-radius:var(--pair-radius);border-width:1.5px}.pair-container.is-connected .input-item.left ui-input::part(container){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0.75px}.pair-container.is-connected .input-item.right ui-input::part(container){border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0.75px}`;
+
+const InputPair = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Left input label */
+    labelLeft = '';
+    /** Right input label */
+    labelRight = '';
+    /** Shared main label (optional) */
+    label;
+    /** Left input value */
+    valueLeft = '';
+    /** Right input value */
+    valueRight = '';
+    /** Left input placeholder */
+    placeholderLeft = '';
+    /** Right input placeholder */
+    placeholderRight = '';
+    /** Shared type for both inputs */
+    type = 'text';
+    /** Shared variant */
+    variant = 'outlined';
+    /** Shared size */
+    size = 'md';
+    /** Gap between inputs (set to 0 for connected) */
+    gap = '0';
+    /** Full width behavior */
+    fullWidth = false;
+    render() {
+        return (index.h(index.Host, { key: 'fdf7f4502e0ae69ee732870df215948f6dd343d4', class: { 'full-width': this.fullWidth } }, this.label && index.h("div", { key: 'fab76ee80e86ffb845930a8b2ce26d210da9e72c', class: "pair-main-label" }, this.label), index.h("div", { key: 'cb95a4fda33d88723248c58d57e526f9ab7fc1c6', class: {
+                'pair-container': true,
+                'is-connected': this.gap === '0'
+            }, style: { gap: this.gap !== '0' ? this.gap : undefined } }, index.h("div", { key: '562af03d33b4c7ec4f55ffa805dbbda5fa0e2c95', class: "input-item left" }, index.h("ui-input", { key: 'c75ac1faec6b8b0903d578064ba60529a923d4eb', label: this.labelLeft, placeholder: this.placeholderLeft, value: this.valueLeft, type: this.type, variant: this.variant, size: this.size, "full-width": true })), index.h("div", { key: '2740efa73d5758bf88c58f2853cba1da3f43a420', class: "input-item right" }, index.h("ui-input", { key: '4e110393af0e26ace0de9a68f12a9cb54b90d935', label: this.labelRight, placeholder: this.placeholderRight, value: this.valueRight, type: this.type, variant: this.variant, size: this.size, "full-width": true })))));
+    }
+};
+InputPair.style = inputPairCss();
+
+exports.ui_input_pair = InputPair;

package/dist/cjs/ui-knob.cjs.entry.js

@@ -0,0 +1,447 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.js');
+
+const knobCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.knob-container{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;touch-action:none;transition:transform 0.1s ease}.knob-container:hover:not(.disabled):not(.readonly){transform:scale(1.02)}.knob-container.dragging{cursor:grabbing;transform:scale(1.05)}.knob-container.disabled,.knob-container.readonly{cursor:not-allowed;opacity:0.5}.knob-svg{display:block;overflow:visible}.value-arc{filter:drop-shadow(0 2px 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3));transition:stroke 0.2s ease}.knob-container:hover:not(.disabled):not(.readonly) .value-arc{filter:drop-shadow(0 3px 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.center-dot{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))}.indicator{transition:all 0.1s ease;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))}.value-label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:baseline;gap:2px;pointer-events:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.value-number{font-size:calc(var(--knob-size, 120px) * 0.2);font-weight:700;color:var(--text-primary, #1e293b);line-height:1}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.12);font-weight:600;color:var(--text-muted, #64748b);line-height:1}.min-max-labels{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--text-muted, #64748b);font-weight:500;padding:0 8px}.min-label,.max-label{white-space:nowrap}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.8}}.knob-container.dragging .value-label{animation:pulse 0.3s ease-in-out}.knob-container:active:not(.disabled):not(.readonly){transform:scale(1.05)}.knob-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:4px;border-radius:50%}@media (max-width: 640px){.value-number{font-size:calc(var(--knob-size, 120px) * 0.18)}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.11)}.min-max-labels{font-size:11px}}`;
+
+const Knob = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.knobChange = index.createEvent(this, "knobChange");
+        this.knobInput = index.createEvent(this, "knobInput");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /**
+     * Name of the form control
+     */
+    name;
+    /**
+     * Current value
+     */
+    value = 0;
+    /**
+     * Minimum value
+     */
+    min = 0;
+    /**
+     * Maximum value
+     */
+    max = 100;
+    /**
+     * Step increment
+     */
+    step = 1;
+    /**
+     * Size of the knob
+     */
+    size = 120;
+    /**
+     * Stroke width
+     */
+    strokeWidth = 8;
+    /**
+     * Color of the active arc (string or {from: string, to: string})
+     */
+    color = '#3bf673';
+    /**
+     * Color of the track
+     */
+    trackColor = '#e2e8f0';
+    /**
+     * Enable gradient for the active arc
+     */
+    gradient = false;
+    /**
+     * Show value label
+     */
+    showValue = true;
+    /**
+     * Custom value suffix (e.g., '%', '°', 'dB')
+     */
+    valueSuffix = '';
+    /**
+     * Show min/max labels
+     */
+    showMinMax = false;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Read-only state
+     */
+    readonly = false;
+    /**
+     * Start angle in degrees (0 = top, 90 = right)
+     */
+    startAngle = 135;
+    /**
+     * End angle in degrees
+     */
+    endAngle = 405;
+    /**
+     * Enable mouse wheel rotation control
+     */
+    enableWheel = true;
+    /**
+     * Show tick marks along the arc (useful for speedometer-like gauges)
+     */
+    showTicks = false;
+    /**
+     * Number of tick marks to render along the arc
+     */
+    tickCount = 10;
+    /**
+     * Tick color
+     */
+    tickColor = '#94a3b8';
+    /**
+     * Tick length factor relative to radius (0-1)
+     */
+    tickLength = 0.1;
+    /**
+     * Show numeric labels around the knob
+     */
+    showLabels = false;
+    /**
+     * Snap to step intervals
+     */
+    snap = false;
+    /**
+     * Allow double-click to edit value manually
+     */
+    allowInput = false;
+    /**
+     * Event emitted when value changes
+     */
+    knobChange;
+    /**
+     * Event emitted while dragging
+     */
+    knobInput;
+    isDragging = false;
+    angle = 0;
+    isEditing = false; // For manual input
+    gradientId = `ui-knob-gradient-${Math.random().toString(36).substr(2, 9)}`;
+    knobRef;
+    valueChanged(newValue) {
+        this.updateAngle(newValue);
+        this.internals.setFormValue(newValue.toString());
+    }
+    colorChanged() {
+        this.normalizeProps();
+    }
+    propsChanged() {
+        this.normalizeProps();
+    }
+    componentWillLoad() {
+        this.normalizeProps();
+        this.updateAngle(this.value);
+        this.internals.setFormValue(this.value.toString());
+    }
+    normalizeProps() {
+        try {
+            if (typeof this.color === 'string' && this.color.startsWith('{')) {
+                this.color = JSON.parse(this.color);
+            }
+        }
+        catch (e) {
+            console.warn('Failed to parse knob color prop', e);
+        }
+    }
+    updateAngle(value) {
+        const percentage = (value - this.min) / (this.max - this.min);
+        const totalAngle = this.endAngle - this.startAngle;
+        this.angle = this.startAngle + totalAngle * percentage;
+    }
+    handleMouseDown = (event) => {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.updateValueFromEvent(event);
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    };
+    handleMouseMove = (event) => {
+        if (!this.isDragging)
+            return;
+        this.updateValueFromEvent(event);
+        this.knobInput.emit(this.value);
+    };
+    handleMouseUp = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.knobChange.emit(this.value);
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    };
+    handleTouchStart = (event) => {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.updateValueFromTouch(event);
+    };
+    handleTouchMove = (event) => {
+        if (!this.isDragging)
+            return;
+        event.preventDefault();
+        this.updateValueFromTouch(event);
+        this.knobInput.emit(this.value);
+    };
+    handleTouchEnd = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.knobChange.emit(this.value);
+    };
+    handleWheel = (event) => {
+        if (!this.enableWheel || this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        const direction = Math.sign(event.deltaY); // 1 = down, -1 = up
+        const stepDelta = direction * this.step;
+        let newValue = this.value - stepDelta; // wheel up increases, down decreases
+        newValue = Math.max(this.min, Math.min(this.max, newValue));
+        this.value = newValue;
+        this.updateAngle(newValue);
+        this.knobInput.emit(this.value);
+        // Debounced change emit
+        clearTimeout(this._wheelTimeout);
+        this._wheelTimeout = setTimeout(() => this.knobChange.emit(this.value), 100);
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled || this.readonly)
+            return;
+        let newValue = this.value;
+        const lgStep = this.step * 10;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                newValue = Math.min(this.max, this.value + this.step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                newValue = Math.max(this.min, this.value - this.step);
+                break;
+            case 'PageUp':
+                newValue = Math.min(this.max, this.value + lgStep);
+                break;
+            case 'PageDown':
+                newValue = Math.max(this.min, this.value - lgStep);
+                break;
+            case 'Home':
+                newValue = this.min;
+                break;
+            case 'End':
+                newValue = this.max;
+                break;
+            default:
+                return;
+        }
+        if (newValue !== this.value) {
+            event.preventDefault();
+            this.value = newValue;
+            this.updateAngle(newValue);
+            this.knobInput.emit(this.value);
+            this.knobChange.emit(this.value);
+        }
+    };
+    updateValueFromEvent(event) {
+        if (!this.knobRef)
+            return;
+        const rect = this.knobRef.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = event.clientX - centerX;
+        const deltaY = event.clientY - centerY;
+        this.calculateValueFromAngle(deltaX, deltaY);
+    }
+    updateValueFromTouch(event) {
+        if (!this.knobRef || event.touches.length === 0)
+            return;
+        const rect = this.knobRef.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const touch = event.touches[0];
+        const deltaX = touch.clientX - centerX;
+        const deltaY = touch.clientY - centerY;
+        this.calculateValueFromAngle(deltaX, deltaY);
+    }
+    calculateValueFromAngle(deltaX, deltaY) {
+        let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 90;
+        if (angle < 0)
+            angle += 360;
+        // Constrain angle to start/end range
+        const totalAngle = this.endAngle - this.startAngle;
+        if (angle < this.startAngle) {
+            angle = angle + 360 >= this.startAngle ? angle + 360 : this.startAngle;
+        }
+        if (angle > this.endAngle && angle < this.startAngle + 360) {
+            const distToStart = Math.abs(angle - this.startAngle);
+            const distToEnd = Math.abs(angle - this.endAngle);
+            angle = distToStart < distToEnd ? this.startAngle : this.endAngle;
+        }
+        angle = Math.max(this.startAngle, Math.min(this.endAngle, angle));
+        const percentage = (angle - this.startAngle) / totalAngle;
+        let newValue = this.min + percentage * (this.max - this.min);
+        // Apply step
+        let steppedValue = newValue;
+        if (this.snap) { // If snap is true, we strictly snap to step
+            steppedValue = Math.round(newValue / this.step) * this.step;
+        }
+        else {
+            // Just rounding for cleaner numbers, but mostly fluid
+            steppedValue = Math.round(newValue * 100) / 100;
+        }
+        newValue = Math.max(this.min, Math.min(this.max, steppedValue));
+        this.value = newValue;
+        this.angle = angle;
+    }
+    polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+        const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+        return {
+            x: centerX + radius * Math.cos(angleInRadians),
+            y: centerY + radius * Math.sin(angleInRadians),
+        };
+    }
+    describeArc(centerX, centerY, radius, startAngle, endAngle) {
+        const start = this.polarToCartesian(centerX, centerY, radius, endAngle);
+        const end = this.polarToCartesian(centerX, centerY, radius, startAngle);
+        const lgArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+        return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${lgArcFlag} 0 ${end.x} ${end.y}`;
+    }
+    componentDidLoad() {
+        if (this.knobRef) {
+            this.knobRef.addEventListener('wheel', this.handleWheel, { passive: false });
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        if (this.knobRef) {
+            this.knobRef.removeEventListener('wheel', this.handleWheel);
+        }
+    }
+    startEditing = () => {
+        if (this.allowInput && !this.disabled && !this.readonly) {
+            this.isEditing = true;
+        }
+    };
+    handleInputBlur = (e) => {
+        const input = e.target;
+        const val = parseFloat(input.value);
+        if (!isNaN(val)) {
+            let clamped = Math.max(this.min, Math.min(this.max, val));
+            if (clamped !== this.value) {
+                this.value = clamped;
+                this.knobChange.emit(this.value);
+            }
+        }
+        this.isEditing = false;
+    };
+    handleInputChange = (e) => {
+        const val = parseFloat(e.target.value);
+        if (!isNaN(val)) {
+            let clamped = Math.max(this.min, Math.min(this.max, val));
+            this.value = clamped;
+            this.knobChange.emit(this.value);
+        }
+        this.isEditing = false;
+    };
+    handleInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.target.blur();
+        }
+    };
+    render() {
+        const center = this.size / 2;
+        const radius = (this.size - this.strokeWidth) / 2;
+        const trackPath = this.describeArc(center, center, radius, this.startAngle, this.endAngle);
+        const valuePath = this.describeArc(center, center, radius, this.startAngle, this.angle);
+        const knobClasses = {
+            'knob-container': true,
+            'disabled': this.disabled,
+            'readonly': this.readonly,
+            'dragging': this.isDragging,
+        };
+        return (index.h("div", { key: '1f7d0dbe9a1ba355b03c809bbcfcf41f8e7f4908', class: "knob-wrapper" }, index.h("div", { key: '6db0b4bf73beef4a8762a6ab4ace921849a625a9', class: knobClasses, ref: (el) => (this.knobRef = el), style: { width: `${this.size}px`, height: `${this.size}px` }, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onKeyDown: this.handleKeyDown, tabIndex: this.disabled || this.readonly ? -1 : 0, role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-disabled": this.disabled, "aria-readonly": this.readonly }, index.h("svg", { key: 'b2cc5cb4755f3bf0ad12e1d248332813bd371b3c', width: this.size, height: this.size, class: "knob-svg" }, (() => {
+            const isGradientProp = typeof this.color === 'object' && this.color !== null;
+            const hasGradient = this.gradient || isGradientProp;
+            if (!hasGradient)
+                return null;
+            const fromColor = isGradientProp ? (this.color['from'] || (typeof this.color === 'string' ? this.color : '#3bf673')) : (typeof this.color === 'string' ? this.color : '#3bf673');
+            const toColor = isGradientProp ? (this.color['to'] || '#10b981') : '#10b981';
+            return (index.h("defs", null, index.h("linearGradient", { id: this.gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, index.h("stop", { offset: "0%", "stop-color": fromColor }), index.h("stop", { offset: "100%", "stop-color": toColor }))));
+        })(), index.h("path", { key: 'c55188f1c67342a3813960c4cfd0427b65338308', d: trackPath, fill: "none", stroke: this.trackColor, "stroke-width": this.strokeWidth, "stroke-linecap": "round" }), this.showTicks && (() => {
+            const total = Math.max(2, this.tickCount);
+            const ticks = [];
+            const totalAngle = this.endAngle - this.startAngle;
+            for (let i = 0; i <= total; i++) {
+                const a = this.startAngle + (totalAngle * i) / total;
+                const inner = this.polarToCartesian(center, center, radius * (1 - this.tickLength), a);
+                const outer = this.polarToCartesian(center, center, radius, a);
+                const isMajor = i % Math.max(1, Math.floor(total / 5)) === 0;
+                ticks.push(index.h("line", { x1: inner.x, y1: inner.y, x2: outer.x, y2: outer.y, stroke: this.tickColor, "stroke-width": isMajor ? this.strokeWidth / 2 : this.strokeWidth / 3, "stroke-linecap": "round" }));
+            }
+            return ticks;
+        })(), this.showLabels && (() => {
+            const labels = [];
+            const count = 5; // Fixed number of main labels
+            const totalAngle = this.endAngle - this.startAngle;
+            const labelRadius = radius - 25; // Push inside track
+            for (let i = 0; i <= count; i++) {
+                const pct = i / count;
+                const val = this.min + (this.max - this.min) * pct;
+                const a = this.startAngle + (totalAngle * pct);
+                const pos = this.polarToCartesian(center, center, labelRadius, a);
+                labels.push(index.h("text", { x: pos.x, y: pos.y, "text-anchor": "middle", "dominant-baseline": "middle", class: "scale-label", fill: "#64748b", "font-size": "10px" }, Math.round(val)));
+            }
+            return labels;
+        })(), index.h("path", { key: 'de24763cf753ca6dbb0451ea3552a2df7fa26b08', d: valuePath, fill: "none", stroke: (() => {
+                const isGradientProp = typeof this.color === 'object' && this.color !== null;
+                return (this.gradient || isGradientProp) ? `url(#${this.gradientId})` : this.color;
+            })(), "stroke-width": this.strokeWidth, "stroke-linecap": "round", class: "value-arc" }), index.h("circle", { key: '3f0bba24738381e1be1bb06284d22af9c732a8be', cx: center, cy: center, r: this.strokeWidth / 2, fill: (() => {
+                const isGradientProp = typeof this.color === 'object' && this.color !== null;
+                return (this.gradient || isGradientProp) ? `url(#${this.gradientId})` : this.color;
+            })(), class: "center-dot" }), (() => {
+            const indicatorStart = this.polarToCartesian(center, center, radius * 0.3, this.angle);
+            const indicatorEnd = this.polarToCartesian(center, center, radius * 0.85, this.angle);
+            return (index.h("line", { x1: indicatorStart.x, y1: indicatorStart.y, x2: indicatorEnd.x, y2: indicatorEnd.y, stroke: (() => {
+                    const isGradientProp = typeof this.color === 'object' && this.color !== null;
+                    return (this.gradient || isGradientProp) ? `url(#${this.gradientId})` : this.color;
+                })(), "stroke-width": this.strokeWidth / 2, "stroke-linecap": "round", class: "indicator" }));
+        })()), index.h("div", { key: '6cc71ee2d411ec36b5faedfe9818c0d6e4ca34ec', class: "value-label", onDblClick: this.startEditing }, this.isEditing ? (index.h("ui-input", { type: "number", value: this.value.toString(), onInputBlur: this.handleInputBlur, onInputChange: (e) => this.handleInputChange(e), onInputKeydown: (e) => this.handleInputKeyDown(e.detail), autoFocus: true, customClass: "knob-input", variant: "plain", size: "sm" })) : (this.showValue ? (index.h("span", null, index.h("span", { class: "value-number" }, this.value), this.valueSuffix && index.h("span", { class: "value-suffix" }, this.valueSuffix))) : (index.h("slot", null))))), this.showMinMax && (index.h("div", { key: '6e7327c12d9cd9cba02822c8bc8bf9ffcc421c5c', class: "min-max-labels" }, index.h("span", { key: 'bb01be7b35e752c30a9f19d62c5b31fe5b354292', class: "min-label" }, this.min, this.valueSuffix), index.h("span", { key: '23aa1769d555a0b4aa4ac1b0dd2e90f4be599a2e', class: "max-label" }, this.max, this.valueSuffix)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "color": [{
+                "colorChanged": 0
+            }],
+        "tickCount": [{
+                "propsChanged": 0
+            }],
+        "tickLength": [{
+                "propsChanged": 0
+            }],
+        "showTicks": [{
+                "propsChanged": 0
+            }]
+    }; }
+};
+Knob.style = knobCss();
+
+exports.ui_knob = Knob;

package/dist/cjs/ui-library.cjs.entry.js

@@ -0,0 +1,134 @@
+'use strict';
+
+var index = require('./index-ClkOYpT8.js');
+
+const componentsData = [
+    // Foundation & Layout
+    { id: 'accordion', name: 'Accordion', description: 'Expandable/collapsible content', icon: '📑', category: 'Foundation & Layout', docs: '/docs/index.html?page=accordion' },
+    { id: 'aside-panel', name: 'Aside Panel', description: 'Side content panel', icon: '📱', category: 'Foundation & Layout', docs: '/docs/index.html?page=aside-panel' },
+    { id: 'card', name: 'Card', description: 'Content container', icon: '🃏', category: 'Foundation & Layout', docs: '/docs/index.html?page=card' },
+    { id: 'divider', name: 'Divider', description: 'Content separator', icon: '➖', category: 'Foundation & Layout', docs: '/docs/index.html?page=divider' },
+    { id: 'dock', name: 'Dock', description: 'Docking layout', icon: '🚢', category: 'Foundation & Layout', docs: '/docs/index.html?page=dock' },
+    { id: 'dock-host', name: 'Dock Host', description: 'Host for dockable components', icon: '🗂️', category: 'Foundation & Layout', docs: '/docs/index.html?page=dock-host' },
+    {
+        id: 'layout-manager',
+        name: 'Layout Manager',
+        description: 'Manage complex layouts',
+        icon: '🏗️',
+        category: 'Foundation & Layout',
+        docs: '/docs/index.html?page=layout-manager',
+    },
+    { id: 'panel', name: 'Panel', description: 'Content panel', icon: '📋', category: 'Foundation & Layout', docs: '/docs/index.html?page=panel' },
+    { id: 'stack', name: 'Stack', description: 'Vertical/Horizontal stack', icon: '📚', category: 'Foundation & Layout', docs: '/docs/index.html?page=stack' },
+    // Navigation
+    { id: 'anchor', name: 'Anchor', description: 'Anchor link navigation', icon: '⚓', category: 'Navigation', docs: '/docs/index.html?page=anchor' },
+    { id: 'breadcrumb', name: 'Breadcrumb', description: 'Indicate current page location', icon: '🍞', category: 'Navigation', docs: '/docs/index.html?page=breadcrumb' },
+    { id: 'context-menu', name: 'Context Menu', description: 'Right-click context menu', icon: '📋', category: 'Navigation', docs: '/docs/index.html?page=context-menu' },
+    { id: 'horizontal-nav', name: 'Horizontal Nav', description: 'Horizontal navigation menu', icon: '↔️', category: 'Navigation', docs: '/docs/index.html?page=horizontal-nav' },
+    { id: 'nav-bar', name: 'Nav Bar', description: 'Navigation bar', icon: '🧭', category: 'Navigation', docs: '/docs/index.html?page=nav-bar' },
+    { id: 'pagination', name: 'Pagination', description: 'Navigate through pages of data', icon: '📄', category: 'Navigation', docs: '/docs/index.html?page=pagination' },
+    { id: 'scroll-top', name: 'Scroll Top', description: 'Button to scroll to top', icon: '⬆️', category: 'Navigation', docs: '/docs/index.html?page=scroll-top' },
+    { id: 'smart-menu', name: 'Smart Menu', description: 'Intelligent menu component', icon: '🧠', category: 'Navigation', docs: '/docs/index.html?page=smart-menu' },
+    { id: 'smart-stepper', name: 'Smart Stepper', description: 'Intelligent stepper wizard', icon: '🧠', category: 'Navigation', docs: '/docs/index.html?page=smart-stepper' },
+    { id: 'speed-dial', name: 'Speed Dial', description: 'Floating action button speed dial', icon: '⚡', category: 'Navigation', docs: '/docs/index.html?page=speed-dial' },
+    { id: 'stepper', name: 'Stepper', description: 'Step-by-step wizard', icon: '👣', category: 'Navigation', docs: '/docs/index.html?page=stepper' },
+    { id: 'tabs', name: 'Tabs', description: 'Tabbed content navigation', icon: '📑', category: 'Navigation', docs: '/docs/index.html?page=tabs' },
+    { id: 'top-bar', name: 'Top Bar', description: 'Top navigation bar', icon: '📌', category: 'Navigation', docs: '/docs/index.html?page=top-bar' },
+    // Inputs & Forms
+    { id: 'button', name: 'Button', description: 'Clickable button element', icon: '🔘', category: 'Inputs & Forms', docs: '/docs/index.html?page=button' },
+    { id: 'button-group', name: 'Button Group', description: 'Layout container for buttons', icon: '🍱', category: 'Inputs & Forms', docs: '/docs/index.html?page=button-group' },
+    { id: 'cascade-select', name: 'Cascade Select', description: 'Hierarchical selection', icon: '🔽', category: 'Inputs & Forms', docs: '/docs/index.html?page=cascade-select' },
+    { id: 'dropdown', name: 'Dropdown', description: 'Select hidden items from a list', icon: '📋', category: 'Inputs & Forms', docs: '/docs/index.html?page=dropdown' },
+    { id: 'knob', name: 'Knob', description: 'Rotary control knob', icon: '🎛️', category: 'Inputs & Forms', docs: '/docs/index.html?page=knob' },
+    { id: 'pattern-input', name: 'Pattern Input', description: 'Input with pattern validation', icon: '🎯', category: 'Inputs & Forms', docs: '/docs/index.html?page=pattern-input' },
+    { id: 'picklist', name: 'Picklist', description: 'List for selecting multiple items', icon: '📋', category: 'Inputs & Forms', docs: '/docs/index.html?page=picklist' },
+    { id: 'range-slider', name: 'Range Slider', description: 'Slider for range selection', icon: '🎚️', category: 'Inputs & Forms', docs: '/docs/index.html?page=range-slider' },
+    { id: 'rating', name: 'Rating', description: 'Star rating control', icon: '⭐', category: 'Inputs & Forms', docs: '/docs/index.html?page=rating' },
+    { id: 'switch', name: 'Switch', description: 'Toggle switch control', icon: '🔘', category: 'Inputs & Forms', docs: '/docs/index.html?page=switch' },
+    { id: 'transfer-list', name: 'Transfer List', description: 'Move items between lists', icon: '⇄', category: 'Inputs & Forms', docs: '/docs/index.html?page=transfer-list' },
+    // Data Display
+    {
+        id: 'advanced-data-table',
+        name: 'Advanced Table',
+        description: 'Data table with advanced features',
+        icon: '📊',
+        category: 'Data Display',
+        docs: '/docs/index.html?page=advanced-data-table',
+    },
+    { id: 'avatar', name: 'Avatar', description: 'User profile image', icon: '👤', category: 'Data Display', docs: '/docs/index.html?page=avatar' },
+    { id: 'avatar-group', name: 'Avatar Group', description: 'Group of avatars', icon: '👥', category: 'Data Display', docs: '/docs/index.html?page=avatar-group' },
+    { id: 'badge', name: 'Badge', description: 'Notification badge', icon: '🔔', category: 'Data Display', docs: '/docs/index.html?page=badge' },
+    { id: 'bar-chart', name: 'Bar Chart', description: 'Bar chart visualization', icon: '📊', category: 'Data Display', docs: '/docs/index.html?page=bar-chart' },
+    { id: 'chart', name: 'Chart', description: 'General chart component', icon: '📈', category: 'Data Display', docs: '/docs/index.html?page=chart' },
+    { id: 'chip', name: 'Chip', description: 'Compact element for input, attribute, or action', icon: '🏷️', category: 'Data Display', docs: '/docs/index.html?page=chip' },
+    { id: 'meter-group', name: 'Meter', description: 'Visual meter display', icon: '📊', category: 'Data Display', docs: '/docs/index.html?page=meter-group' },
+    { id: 'pill', name: 'Pill', description: 'Rounded status indicator', icon: '💊', category: 'Data Display', docs: '/docs/index.html?page=pill' },
+    { id: 'speedometer', name: 'Speedometer', description: 'Speedometer gauge', icon: '🎯', category: 'Data Display', docs: '/docs/index.html?page=speedometer' },
+    { id: 'tag', name: 'Tag', description: 'Label for clear categorization', icon: '🏷', category: 'Data Display', docs: '/docs/index.html?page=tag' },
+    { id: 'timeline', name: 'Timeline', description: 'Events in chronological order', icon: '⏱️', category: 'Data Display', docs: '/docs/index.html?page=timeline' },
+    { id: 'tree-list', name: 'Tree List', description: 'Hierarchical tree view', icon: '🌳', category: 'Data Display', docs: '/docs/index.html?page=tree-list' },
+    // Feedback & Overlays
+    { id: 'dialog', name: 'Dialog', description: 'Modal dialog box', icon: '💬', category: 'Feedback & Overlays', docs: '/docs/index.html?page=dialog' },
+    { id: 'popover', name: 'Popover', description: 'Pop-up content', icon: '💭', category: 'Feedback & Overlays', docs: '/docs/index.html?page=popover' },
+    { id: 'skeleton', name: 'Skeleton', description: 'Loading state placeholder', icon: '💀', category: 'Feedback & Overlays', docs: '/docs/index.html?page=skeleton' },
+    { id: 'snackbar', name: 'Snackbar', description: 'Brief feedback message', icon: '🍞', category: 'Feedback & Overlays', docs: '/docs/index.html?page=snackbar' },
+    { id: 'loader', name: 'Loader', description: 'Advanced loading indicators', icon: '🔄', category: 'Feedback & Overlays', docs: '/docs/index.html?page=loader' },
+    { id: 'timer', name: 'Timer', description: 'Countdown or stopwatch', icon: '⏱️', category: 'Feedback & Overlays', docs: '/docs/index.html?page=timer' },
+];
+const categories = ['Foundation & Layout', 'Navigation', 'Inputs & Forms', 'Data Display', 'Feedback & Overlays'];
+
+const libraryCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--primary:#6366f1;--primary-light:#818cf8;--bg-dark:#0f172a;--bg-card:rgba(30, 41, 59, 0.6);--text-primary:#f1f5f9;--text-secondary:#94a3b8;--border:rgba(255, 255, 255, 0.08);--header-bg:rgba(15, 23, 42, 0.85);--input-bg:rgba(255, 255, 255, 0.05)}:host-context([data-theme=light]),:host-context(.light),html[data-theme=light] :host{--bg-dark:#f8fafc;--bg-card:#ffffff;--text-primary:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;--header-bg:rgba(255, 255, 255, 0.85);--input-bg:rgba(0, 0, 0, 0.04)}:host-context([data-theme=green]),:host-context(.green),html[data-theme=green] :host{--primary:#22c55e;--primary-light:#86efac;--bg-dark:#052e16;--bg-card:rgba(20, 83, 45, 0.6);--text-primary:#f0fdf4;--text-secondary:#86efac;--border:rgba(34, 197, 94, 0.2);--header-bg:rgba(5, 46, 22, 0.85);--input-bg:rgba(255, 255, 255, 0.1)}.library-container{min-height:100vh;background:linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);background-attachment:fixed;color:var(--text-primary)}.library-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 32px}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap}.logo-section{display:flex;align-items:center;gap:12px}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:2rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.logo-text{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg, #6366f1, #a855f7, #ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.version-badge{font-size:0.7rem;font-weight:600;padding:4px 10px;background:rgba(99, 102, 241, 0.2);color:#a5b4fc;border-radius:20px;border:1px solid rgba(99, 102, 241, 0.3)}.search-container{flex:1;max-width:500px;position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;padding:14px 48px;background:var(--input-bg);border:1px solid var(--border);border-radius:16px;color:var(--text-primary);font-size:1rem;font-family:inherit;transition:all 0.3s ease}.search-input::placeholder{color:var(--text-secondary)}.search-input:focus{outline:none;border-color:var(--primary);background:rgba(99, 102, 241, 0.08);box-shadow:0 0 0 4px rgba(99, 102, 241, 0.15)}.clear-search{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;color:var(--text-secondary);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:all 0.2s ease}.clear-search:hover{background:rgba(239, 68, 68, 0.3);color:#fca5a5}.header-stats{display:flex;gap:20px;flex-shrink:0;margin-left:auto}.stat{font-size:0.85rem;color:var(--text-secondary);padding:8px 16px;background:rgba(255, 255, 255, 0.03);border-radius:10px;white-space:nowrap}.category-nav{max-width:1400px;margin:0 auto;padding:24px 32px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.category-pill{padding:10px 20px;background:rgba(255, 255, 255, 0.05);border:1px solid var(--border);border-radius:30px;color:var(--text-secondary);font-size:0.9rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.3s ease;white-space:nowrap}.category-pill:hover{background:rgba(99, 102, 241, 0.15);border-color:rgba(99, 102, 241, 0.3);color:var(--text-primary);transform:translateY(-2px)}.category-pill.active{background:linear-gradient(135deg, #10b981 0%, #047857 100%);border-color:transparent;color:white;box-shadow:0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);font-weight:600}.category-pill.active:hover{transform:translateY(-2px)}.library-content{max-width:1400px;margin:0 auto;padding:0 32px 48px}.no-results{text-align:center;padding:80px 20px;color:var(--text-secondary)}.no-results-icon{font-size:4rem;display:block;margin-bottom:16px;opacity:0.5}.no-results h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0 0 8px 0}.no-results p{margin:0;font-size:1rem}.library-footer{max-width:1400px;margin:0 auto;padding:32px;text-align:center;border-top:1px solid var(--border)}.library-footer p{margin:0 0 16px 0;color:var(--text-secondary);font-size:0.9rem}.footer-links{display:flex;justify-content:center;gap:24px}.footer-link{color:var(--primary-light);text-decoration:none;font-size:0.9rem;font-weight:500;transition:color 0.2s ease}.footer-link:hover{color:#a5b4fc}@media (max-width: 768px){.library-header{padding:12px 16px}.header-content{flex-wrap:wrap;gap:16px}.logo-section{flex:1}.search-container{order:3;flex:100%;max-width:none}.header-stats{display:none}.category-nav{padding:16px;gap:8px}.category-pill{padding:8px 14px;font-size:0.8rem}.library-content{padding:0 16px 32px}}`;
+
+const Library = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    searchQuery = '';
+    selectedCategory = null;
+    mode = 'demo';
+    getCategoryIcon(category) {
+        const icons = {
+            'Foundation & Layout': '🏗️',
+            'Navigation': '🧭',
+            'Inputs & Forms': '🎮',
+            'Data Display': '📊',
+            'Feedback & Overlays': '💬',
+            'Settings': '⚙️',
+            'About': 'ℹ️',
+        };
+        return icons[category] || '📦';
+    }
+    getFilteredComponents() {
+        const filtered = {};
+        const query = this.searchQuery.toLowerCase();
+        for (const category of categories) {
+            if (this.selectedCategory && this.selectedCategory !== category) {
+                continue;
+            }
+            const categoryComponents = componentsData.filter(comp => {
+                if (comp.category !== category)
+                    return false;
+                if (!query)
+                    return true;
+                return (comp.name.toLowerCase().includes(query) ||
+                    comp.description.toLowerCase().includes(query) ||
+                    comp.id.toLowerCase().includes(query));
+            });
+            if (categoryComponents.length > 0) {
+                filtered[category] = categoryComponents;
+            }
+        }
+        return filtered;
+    }
+    handleCategoryClick = (category) => {
+        this.selectedCategory = this.selectedCategory === category ? null : category;
+    };
+    render() {
+        const filteredByCategory = this.getFilteredComponents();
+        const totalComponents = componentsData.length;
+        return (index.h(index.Host, { key: 'beac989569c0ca806ae655da242ec9904445d39f' }, index.h("div", { key: '959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7', class: "library-container" }, index.h("header", { key: '27e8009daad08c4b07d52e64881c29b87e3b9c40', class: "library-header" }, index.h("div", { key: 'b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a', class: "header-content" }, index.h("div", { key: 'da37733ca7ee6888845f17acc3636efa8119300c', class: "logo-section" }, index.h("div", { key: 'f621cc915750bcf3ede6518baa6aceb6ca8d39a5', class: "logo" }, index.h("span", { key: 'bd201dccfd00236e31789149190244b08d38a005', class: "logo-icon" }, "\uD83C\uDFA8"), index.h("span", { key: 'eb94d775fce9a5d47127b19eb5d512857cfb0de0', class: "logo-text" }, "App UI")), index.h("span", { key: '225b246368e5e6fe765387ed2d03fdb3722fe463', class: "version-badge" }, "v0.1.0")), index.h("div", { key: '961bed93bdb2e56ec60b1dae9a5389c1a75e067f', class: "search-container" }, index.h("ui-input", { key: 'feda70660a055323076630917b0e7a49afcb0a8a', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), index.h("div", { key: '592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c', class: "header-stats" }, index.h("span", { key: 'edfe4fe44fc73aa922883f30ee2c50abcd407aa0', class: "stat" }, totalComponents, " components"), index.h("span", { key: '1271653612b2d1e56327e4eb043ef1848be9e7ae', class: "stat" }, categories.length, " categories")))), index.h("nav", { key: 'd5e1be2e568e66c317362e85baa4f8b184b2ad05', class: "category-nav" }, index.h("ui-button", { key: 'a43178b8702bda6441c706d7b27d7d5268b1017e', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (index.h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), index.h("main", { key: '011117cd9c223602cc8dc11af1f8a058b8b25a5a', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (index.h("div", { class: "no-results" }, index.h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), index.h("h3", null, "No components found"), index.h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (index.h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), index.h("footer", { key: 'fd993854e47f108c29bda48371866c5ab43935a5', class: "library-footer" }, index.h("p", { key: '78fbe5d2283722f32297cc99446e37b8b366d045' }, "Built with \u2764\uFE0F using Stencil.js"), index.h("div", { key: '0be6641e6a4f57e02a0070311eceeab0fff6136a', class: "footer-links" }, index.h("a", { key: 'e166e252d8367239b62ab1904cddef9425dcb7c1', href: "#", class: "footer-link" }, "Documentation"), index.h("a", { key: 'fdcd853536091767eefcdc8d28a231972f573a51', href: "#", class: "footer-link" }, "GitHub"), index.h("a", { key: 'a8d34f3e11ed0aa47aa82f074530d774f6982635', href: "#", class: "footer-link" }, "Changelog"))))));
+    }
+};
+Library.style = libraryCss();
+
+exports.ui_library = Library;