atomicuilibrary 0.0.1

package/dist/collection/components/timer/timer.js

@@ -0,0 +1,1292 @@
+import { h, Host } from "@stencil/core";
+export class Timer {
+    el;
+    /** Steps definition */
+    steps = [];
+    normalizedSteps = [];
+    isNarrow = false;
+    /** Flow type */
+    flow = 'linear';
+    /** Timer mode */
+    mode = 'countdown';
+    /** Current active step index */
+    activeStep = 0;
+    /** Theme variables */
+    theme;
+    /** Whether to auto-start the timer */
+    autoStart = false;
+    /** Loop back to start on completion */
+    loop = false;
+    /** Precision mode */
+    precision = 'seconds';
+    /** Display variant */
+    variant = 'full';
+    /** Percentage threshold for alert (countdown only) */
+    alertThreshold = 10;
+    /** Target date for countdown (ISO string or date string) */
+    targetDate;
+    /** Whether to persist the timer state in local storage */
+    persist; // key for storage
+    /** Progress visualization type */
+    progressType = 'circular';
+    /** Time formatting style */
+    format = 'default';
+    /** Toggle the outer drop-shadow effect (true by default) */
+    useShadow = true;
+    /** Automatically switch to the compact layout when the container becomes narrow */
+    collapse = false;
+    /** Whether to enable browser notifications */
+    enableNotifications = false;
+    /** Whether to enable sound alerts */
+    enableSound = false;
+    /** Template for notification title when a phase completes. Use {{label}} placeholder. */
+    notificationTitle = 'Timer Complete';
+    /** Template for notification body when a phase completes. Use {{label}} placeholder. */
+    notificationBody = '{{label}} phase finished.';
+    /** Duration in seconds for simple countdown/stopwatch */
+    duration = 0;
+    /** State */
+    currentTime = 0; // in milliseconds if precision is milliseconds, else seconds
+    isRunning = false;
+    totalDuration = 0;
+    laps = [];
+    isAlerting = false;
+    activeStepColor;
+    normalizedTheme = {};
+    timerInterval;
+    collapseBreakpoint = 640;
+    /** Events */
+    timerTick;
+    timerStart;
+    timerPause;
+    timerComplete;
+    timerAllComplete;
+    timerLap;
+    timerNext;
+    timerPrev;
+    timerGoTo;
+    normalizeSteps(newSteps) {
+        if (typeof newSteps === 'string') {
+            try {
+                this.normalizedSteps = JSON.parse(newSteps);
+            }
+            catch {
+                this.normalizedSteps = [];
+            }
+        }
+        else {
+            this.normalizedSteps = newSteps || [];
+        }
+        this.initStep();
+    }
+    watchDuration(newVal) {
+        if (this.normalizedSteps.length === 0) {
+            this.totalDuration = newVal;
+            this.currentTime = this.precision === 'milliseconds' ? newVal * 1000 : newVal;
+        }
+    }
+    normalizeTheme(newTheme) {
+        if (typeof newTheme === 'string') {
+            try {
+                this.normalizedTheme = JSON.parse(newTheme);
+            }
+            catch {
+                this.normalizedTheme = {};
+            }
+        }
+        else {
+            this.normalizedTheme = newTheme || {};
+        }
+    }
+    componentWillLoad() {
+        this.normalizeSteps(this.steps);
+        this.normalizeTheme(this.theme);
+        this.loadPersistedState();
+        this.initTargetDate();
+        this.initNotifications();
+        this.updateResponsiveState();
+        // Support simple duration if no steps provided
+        if (this.duration > 0 && this.normalizedSteps.length === 0) {
+            this.totalDuration = this.duration;
+            this.currentTime = this.precision === 'milliseconds' ? this.duration * 1000 : this.duration;
+        }
+    }
+    handleWindowResize() {
+        this.updateResponsiveState();
+    }
+    updateResponsiveState() {
+        if (typeof window === 'undefined')
+            return;
+        this.isNarrow = window.innerWidth <= this.collapseBreakpoint;
+    }
+    initNotifications() {
+        if (this.enableNotifications && 'Notification' in window) {
+            Notification.requestPermission();
+        }
+    }
+    initTargetDate() {
+        if (this.targetDate) {
+            const target = new Date(this.targetDate).getTime();
+            const now = Date.now();
+            const diff = Math.max(0, Math.floor((target - now) / 1000));
+            this.mode = 'countdown';
+            this.normalizedSteps = [{ label: 'Countdown', duration: diff }];
+            this.initStep();
+            this.start();
+        }
+    }
+    loadPersistedState() {
+        if (!this.persist)
+            return;
+        const data = localStorage.getItem(`ui-timer-${this.persist}`);
+        if (data) {
+            try {
+                const state = JSON.parse(data);
+                this.activeStep = state.activeStep;
+                this.currentTime = state.currentTime;
+                if (state.wasRunning)
+                    this.start();
+            }
+            catch (e) {
+                console.warn('Failed to load persisted timer state');
+            }
+        }
+    }
+    savePersistedState() {
+        if (!this.persist)
+            return;
+        localStorage.setItem(`ui-timer-${this.persist}`, JSON.stringify({
+            activeStep: this.activeStep,
+            currentTime: this.currentTime,
+            wasRunning: this.isRunning,
+            timestamp: Date.now()
+        }));
+    }
+    componentDidLoad() {
+        if (this.autoStart) {
+            this.start();
+        }
+    }
+    disconnectedCallback() {
+        this.isRunning = false;
+        this.stopInterval();
+    }
+    initStep() {
+        const step = this.normalizedSteps[this.activeStep];
+        const duration = step?.duration || 0;
+        this.totalDuration = duration;
+        this.laps = [];
+        this.isAlerting = false;
+        this.activeStepColor = step?.color;
+        if (this.mode === 'stopwatch') {
+            this.currentTime = 0;
+        }
+        else {
+            this.currentTime = this.precision === 'milliseconds' ? duration * 1000 : duration;
+        }
+    }
+    playSound(type) {
+        if (!this.enableSound)
+            return;
+        try {
+            const ctx = new (window.AudioContext || window.webkitAudioContext)();
+            const osc = ctx.createOscillator();
+            const gain = ctx.createGain();
+            osc.connect(gain);
+            gain.connect(ctx.destination);
+            if (type === 'tick') {
+                osc.frequency.setValueAtTime(800, ctx.currentTime);
+                gain.gain.setValueAtTime(0.1, ctx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
+                osc.start();
+                osc.stop(ctx.currentTime + 0.1);
+            }
+            else {
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(440, ctx.currentTime);
+                osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.2);
+                gain.gain.setValueAtTime(0.2, ctx.currentTime);
+                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
+                osc.start();
+                osc.stop(ctx.currentTime + 0.5);
+            }
+        }
+        catch (e) {
+            console.warn('Audio feedback failed');
+        }
+    }
+    notify(title, body, label) {
+        if (this.enableNotifications && 'Notification' in window && Notification.permission === 'granted') {
+            const t = title.replace('{{label}}', label);
+            const b = body.replace('{{label}}', label);
+            new Notification(t, { body: b });
+        }
+    }
+    stopInterval() {
+        if (this.timerInterval) {
+            clearTimeout(this.timerInterval);
+            this.timerInterval = null;
+        }
+    }
+    emitStepEvent(type, index) {
+        const step = this.normalizedSteps[index];
+        if (!step)
+            return;
+        const payload = { index, step };
+        if (type === 'next') {
+            this.timerNext.emit(payload);
+        }
+        else if (type === 'prev') {
+            this.timerPrev.emit(payload);
+        }
+        else {
+            this.timerGoTo.emit(payload);
+        }
+    }
+    async start() {
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        this.timerStart.emit({ stepIndex: this.activeStep });
+        const intervalMs = this.precision === 'milliseconds' ? 10 : 1000;
+        const stepValue = this.precision === 'milliseconds' ? 10 : 1;
+        let expected = performance.now() + intervalMs;
+        const tick = () => {
+            if (!this.isRunning)
+                return;
+            const now = performance.now();
+            const drift = now - expected;
+            if (this.mode === 'countdown') {
+                if (this.currentTime > 0) {
+                    this.currentTime -= stepValue;
+                    this.checkAlert();
+                    this.timerTick.emit({ remaining: this.currentTime, stepIndex: this.activeStep, mode: this.mode });
+                    this.savePersistedState();
+                    if (this.currentTime > 0 && this.currentTime <= 3 && this.precision === 'seconds') {
+                        this.playSound('tick');
+                    }
+                }
+                else {
+                    this.playSound('complete');
+                    this.handleStepComplete();
+                    return;
+                }
+            }
+            else {
+                this.currentTime += stepValue;
+                this.timerTick.emit({ remaining: this.currentTime, stepIndex: this.activeStep, mode: this.mode });
+                this.savePersistedState();
+                const target = this.precision === 'milliseconds' ? this.totalDuration * 1000 : this.totalDuration;
+                if (target > 0 && this.currentTime >= target) {
+                    this.handleStepComplete();
+                    return;
+                }
+            }
+            expected += intervalMs;
+            this.timerInterval = setTimeout(tick, Math.max(0, intervalMs - drift));
+        };
+        this.timerInterval = setTimeout(tick, intervalMs);
+    }
+    async pause() {
+        this.isRunning = false;
+        if (this.timerInterval)
+            clearTimeout(this.timerInterval);
+        this.timerInterval = null;
+        this.timerPause.emit({ stepIndex: this.activeStep });
+    }
+    async reset() {
+        this.pause();
+        this.initStep();
+    }
+    async next() {
+        if (this.activeStep >= this.normalizedSteps.length - 1) {
+            return;
+        }
+        this.pause();
+        this.activeStep++;
+        this.initStep();
+        if (this.autoStart) {
+            await this.start();
+        }
+        this.emitStepEvent('next', this.activeStep);
+    }
+    async prev() {
+        if (this.activeStep <= 0) {
+            return;
+        }
+        this.pause();
+        this.activeStep--;
+        this.initStep();
+        if (this.autoStart) {
+            await this.start();
+        }
+        this.emitStepEvent('prev', this.activeStep);
+    }
+    async goTo(index) {
+        if (index < 0 || index >= this.normalizedSteps.length || index === this.activeStep) {
+            return;
+        }
+        this.pause();
+        this.activeStep = index;
+        this.initStep();
+        if (this.autoStart) {
+            await this.start();
+        }
+        this.emitStepEvent('goto', this.activeStep);
+    }
+    async lap() {
+        if (this.mode !== 'stopwatch')
+            return;
+        this.laps = [...this.laps, this.currentTime];
+        this.timerLap.emit({ time: this.currentTime, lapIndex: this.laps.length - 1 });
+    }
+    handleKeyDown(ev) {
+        if (document.activeElement !== this.el)
+            return;
+        if (ev.code === 'Space') {
+            ev.preventDefault();
+            this.isRunning ? this.pause() : this.start();
+        }
+        else if (ev.code === 'KeyR') {
+            this.reset();
+        }
+        else if (ev.code === 'KeyL') {
+            this.lap();
+        }
+        else if (ev.code === 'KeyN') {
+            this.next();
+        }
+        else if (ev.code === 'KeyP') {
+            this.prev();
+        }
+    }
+    checkAlert() {
+        if (this.mode !== 'countdown' || this.totalDuration === 0) {
+            this.isAlerting = false;
+            return;
+        }
+        const currentSeconds = this.precision === 'milliseconds' ? this.currentTime / 1000 : this.currentTime;
+        const percentage = (currentSeconds / this.totalDuration) * 100;
+        this.isAlerting = percentage <= this.alertThreshold;
+    }
+    handleStepComplete() {
+        this.stopInterval();
+        this.isRunning = false;
+        this.timerComplete.emit({ stepIndex: this.activeStep });
+        const label = this.normalizedSteps[this.activeStep]?.label || 'Timer';
+        this.notify(this.notificationTitle, this.notificationBody, label);
+        if (this.activeStep < this.normalizedSteps.length - 1) {
+            this.activeStep++;
+            this.initStep();
+            this.start();
+            this.emitStepEvent('next', this.activeStep);
+        }
+        else {
+            this.timerAllComplete.emit();
+            if (this.loop) {
+                this.activeStep = 0;
+                this.initStep();
+                this.start();
+                this.emitStepEvent('next', this.activeStep);
+            }
+        }
+    }
+    calculateOffset() {
+        const circumference = 283; // 2 * PI * 45
+        if (this.totalDuration === 0) {
+            return this.mode === 'stopwatch' ? 0 : circumference;
+        }
+        const currentSeconds = this.precision === 'milliseconds' ? this.currentTime / 1000 : this.currentTime;
+        let progress = 0;
+        if (this.mode === 'countdown') {
+            progress = (this.totalDuration - currentSeconds) / this.totalDuration;
+        }
+        else {
+            progress = currentSeconds / this.totalDuration;
+        }
+        progress = Math.max(0, Math.min(1, progress));
+        return circumference - (circumference * progress);
+    }
+    formatTime(time) {
+        const isMs = this.precision === 'milliseconds';
+        let totalSeconds = isMs ? Math.floor(time / 1000) : time;
+        let ms = isMs ? Math.floor((time % 1000) / 10) : 0;
+        if (this.format === 'human') {
+            const m = Math.floor(totalSeconds / 60);
+            const s = totalSeconds % 60;
+            if (m > 0)
+                return `${m}m ${s}s`;
+            return `${s}s`;
+        }
+        if (this.format === 'simple') {
+            return totalSeconds.toString();
+        }
+        const days = Math.floor(totalSeconds / 86400);
+        const hArr = Math.floor((totalSeconds % 86400) / 3600);
+        const mArr = Math.floor((totalSeconds % 3600) / 60);
+        const sArr = totalSeconds % 60;
+        let timeStr = '';
+        if (days > 0) {
+            timeStr = `${days}d ${hArr}:${mArr < 10 ? '0' : ''}${mArr}:${sArr < 10 ? '0' : ''}${sArr}`;
+        }
+        else if (hArr > 0) {
+            timeStr = `${hArr}:${mArr < 10 ? '0' : ''}${mArr}:${sArr < 10 ? '0' : ''}${sArr}`;
+        }
+        else {
+            timeStr = `${mArr}:${sArr < 10 ? '0' : ''}${sArr}`;
+        }
+        if (isMs) {
+            timeStr += `.${ms < 10 ? '0' : ''}${ms}`;
+        }
+        return timeStr;
+    }
+    render() {
+        const showCompact = this.variant === 'compact' || (this.collapse && this.isNarrow);
+        return (h(Host, { key: '1d8f1a154864e347f0458302b6684857981d54d0', class: {
+                'timer-has-shadow': this.useShadow,
+                'timer-no-shadow': !this.useShadow,
+                'timer-collapsed': this.collapse && this.isNarrow
+            } }, showCompact ? this.renderCompact() : this.renderFull()));
+    }
+    renderFull() {
+        const stepOverrides = this.activeStepColor ? { '--timer-primary-color': this.activeStepColor } : {};
+        const themeMerged = { ...this.normalizedTheme, ...stepOverrides };
+        return (h("div", { class: {
+                'timer-container': true,
+                'timer-alert': this.isAlerting
+            }, style: themeMerged }, h("div", { class: "timer-steps" }, this.normalizedSteps.map((step, i) => (h("div", { class: {
+                'timer-step': true,
+                'timer-step-active': i === this.activeStep,
+                'timer-step-completed': i < this.activeStep
+            } }, h("div", { class: "timer-step-header" }, h("span", { class: "timer-step-index" }, i + 1), h("span", { class: "timer-step-label" }, step.label)))))), h("div", { class: "timer-display" }, this.progressType === 'circular' ? (h("svg", { class: "timer-progress-svg", viewBox: "0 0 100 100" }, h("circle", { class: "timer-progress-bg", cx: "50", cy: "50", r: "45" }), h("circle", { class: "timer-progress-bar", cx: "50", cy: "50", r: "45", style: {
+                'stroke-dashoffset': `${this.calculateOffset()}`
+            } }))) : (h("div", { class: "timer-progress-linear" }, h("div", { class: "timer-progress-linear-bg" }), h("div", { class: "timer-progress-linear-bar", style: { width: `${(1 - (this.calculateOffset() / 283)) * 100}%` } }))), h("div", { class: "timer-time-text" }, h("slot", { name: "content" }, this.formatTime(this.currentTime)))), h("div", { class: "timer-controls" }, h("ui-button", { variant: "primary", onClick: () => this.isRunning ? this.pause() : this.start(), label: this.isRunning ? 'Pause' : 'Start' }), this.mode === 'stopwatch' && (h("ui-button", { variant: "secondary", onClick: () => this.lap(), label: "Lap" })), h("ui-button", { variant: "secondary", onClick: () => this.reset(), label: "Reset" }), h("ui-button", { variant: "outline", onClick: () => this.next(), label: "Skip" })), this.laps.length > 0 && (h("div", { class: "timer-laps" }, h("div", { class: "timer-laps-title" }, "Laps"), h("div", { class: "timer-laps-list" }, this.laps.map((lapTime, i) => (h("div", { class: "timer-lap-item" }, h("span", null, "Lap ", i + 1), h("span", { class: "timer-lap-time" }, this.formatTime(lapTime))))))))));
+    }
+    renderCompact() {
+        return (h("div", { class: {
+                'timer-container-compact': true,
+                'timer-alert': this.isAlerting
+            }, style: this.normalizedTheme }, h("div", { class: "timer-time-text-compact" }, this.formatTime(this.currentTime)), h("div", { class: "timer-controls-compact" }, h("ui-button", { variant: "ghost", iconOnly: true, size: "sm", onClick: () => this.isRunning ? this.pause() : this.start(), icon: this.isRunning ? 'pause' : 'play', iconLibrary: "lucide", iconSize: "1.2em", ariaLabel: this.isRunning ? 'Pause' : 'Start' }), h("ui-button", { variant: "ghost", iconOnly: true, size: "sm", onClick: () => this.reset(), icon: "rotate-cw", iconLibrary: "lucide", iconSize: "1.2em", ariaLabel: "Reset" }), this.mode === 'stopwatch' && (h("ui-button", { variant: "ghost", iconOnly: true, size: "sm", onClick: () => this.lap(), icon: "flag", iconLibrary: "lucide", iconSize: "1.2em", ariaLabel: "Lap" })))));
+    }
+    static get is() { return "ui-timer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["timer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["timer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerStep[] | string",
+                    "resolved": "TimerStep[] | string",
+                    "references": {
+                        "TimerStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerStep",
+                            "referenceLocation": "TimerStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Steps definition"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            },
+            "flow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerFlow",
+                    "resolved": "\"linear\" | \"non-linear\"",
+                    "references": {
+                        "TimerFlow": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerFlow",
+                            "referenceLocation": "TimerFlow"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flow type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow",
+                "defaultValue": "'linear'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerMode",
+                    "resolved": "\"countdown\" | \"stopwatch\"",
+                    "references": {
+                        "TimerMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerMode",
+                            "referenceLocation": "TimerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timer mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'countdown'"
+            },
+            "activeStep": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active step index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-step",
+                "defaultValue": "0"
+            },
+            "theme": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerTheme",
+                    "resolved": "TimerTheme",
+                    "references": {
+                        "TimerTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerTheme",
+                            "referenceLocation": "TimerTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme variables"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "autoStart": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to auto-start the timer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-start",
+                "defaultValue": "false"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loop back to start on completion"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "precision": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerPrecision",
+                    "resolved": "\"milliseconds\" | \"seconds\"",
+                    "references": {
+                        "TimerPrecision": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerPrecision",
+                            "referenceLocation": "TimerPrecision"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Precision mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision",
+                "defaultValue": "'seconds'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerVariant",
+                    "resolved": "\"compact\" | \"full\"",
+                    "references": {
+                        "TimerVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerVariant",
+                            "referenceLocation": "TimerVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'full'"
+            },
+            "alertThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Percentage threshold for alert (countdown only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-threshold",
+                "defaultValue": "10"
+            },
+            "targetDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target date for countdown (ISO string or date string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-date"
+            },
+            "persist": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to persist the timer state in local storage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "persist"
+            },
+            "progressType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerProgressType",
+                    "resolved": "\"circular\" | \"linear\"",
+                    "references": {
+                        "TimerProgressType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerProgressType",
+                            "referenceLocation": "TimerProgressType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress visualization type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-type",
+                "defaultValue": "'circular'"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimerFormat",
+                    "resolved": "\"default\" | \"human\" | \"simple\"",
+                    "references": {
+                        "TimerFormat": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerFormat",
+                            "referenceLocation": "TimerFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Time formatting style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'default'"
+            },
+            "useShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle the outer drop-shadow effect (true by default)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "use-shadow",
+                "defaultValue": "true"
+            },
+            "collapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Automatically switch to the compact layout when the container becomes narrow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapse",
+                "defaultValue": "false"
+            },
+            "enableNotifications": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable browser notifications"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-notifications",
+                "defaultValue": "false"
+            },
+            "enableSound": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable sound alerts"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-sound",
+                "defaultValue": "false"
+            },
+            "notificationTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template for notification title when a phase completes. Use {{label}} placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notification-title",
+                "defaultValue": "'Timer Complete'"
+            },
+            "notificationBody": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template for notification body when a phase completes. Use {{label}} placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notification-body",
+                "defaultValue": "'{{label}} phase finished.'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds for simple countdown/stopwatch"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "normalizedSteps": {},
+            "isNarrow": {},
+            "currentTime": {},
+            "isRunning": {},
+            "totalDuration": {},
+            "laps": {},
+            "isAlerting": {},
+            "activeStepColor": {},
+            "normalizedTheme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timerTick",
+                "name": "timerTick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Events"
+                },
+                "complexType": {
+                    "original": "{ remaining: number, stepIndex: number, mode: TimerMode }",
+                    "resolved": "{ remaining: number; stepIndex: number; mode: TimerMode; }",
+                    "references": {
+                        "TimerMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerMode",
+                            "referenceLocation": "TimerMode"
+                        }
+                    }
+                }
+            }, {
+                "method": "timerStart",
+                "name": "timerStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ stepIndex: number }",
+                    "resolved": "{ stepIndex: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "timerPause",
+                "name": "timerPause",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ stepIndex: number }",
+                    "resolved": "{ stepIndex: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "timerComplete",
+                "name": "timerComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ stepIndex: number }",
+                    "resolved": "{ stepIndex: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "timerAllComplete",
+                "name": "timerAllComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "timerLap",
+                "name": "timerLap",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ time: number, lapIndex: number }",
+                    "resolved": "{ time: number; lapIndex: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "timerNext",
+                "name": "timerNext",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: TimerStep }",
+                    "resolved": "{ index: number; step: TimerStep; }",
+                    "references": {
+                        "TimerStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerStep",
+                            "referenceLocation": "TimerStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "timerPrev",
+                "name": "timerPrev",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: TimerStep }",
+                    "resolved": "{ index: number; step: TimerStep; }",
+                    "references": {
+                        "TimerStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerStep",
+                            "referenceLocation": "TimerStep"
+                        }
+                    }
+                }
+            }, {
+                "method": "timerGoTo",
+                "name": "timerGoTo",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number, step: TimerStep }",
+                    "resolved": "{ index: number; step: TimerStep; }",
+                    "references": {
+                        "TimerStep": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/timer/types.ts::TimerStep",
+                            "referenceLocation": "TimerStep"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "start": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "pause": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "lap": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "steps",
+                "methodName": "normalizeSteps"
+            }, {
+                "propName": "duration",
+                "methodName": "watchDuration"
+            }, {
+                "propName": "theme",
+                "methodName": "normalizeTheme"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}