snice 4.8.0 → 4.9.0

package/dist/components/camera-annotate/snice-camera-annotate.js

@@ -0,0 +1,663 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, styles, ready, dispose, render, watch, dispatch, css, html } from 'snice';
+
+var componentStyles = ":host{display:block;width:100%;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;--ca-bg:var(--snice-color-background, rgb(255 255 255));--ca-bg-element:var(--snice-color-background-element, rgb(252 251 249));--ca-text:var(--snice-color-text, rgb(23 23 23));--ca-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--ca-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--ca-border:var(--snice-color-border, rgb(226 226 226));--ca-primary:var(--snice-color-primary, rgb(37 99 235));--ca-danger:var(--snice-color-danger, rgb(220 38 38))}.ca-layout{display:flex;gap:var(--snice-spacing-md,1rem);width:100%}.ca-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.ca-canvas-area{position:relative;width:100%;background:rgb(0 0 0);border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden}.ca-canvas-area video{display:block;width:100%;height:auto}.ca-canvas-area video.mirror{transform:scaleX(-1)}.ca-canvas-area canvas{display:block;width:100%;height:auto;cursor:crosshair}.ca-canvas-area canvas.hidden,.ca-canvas-area video.hidden{display:none}.ca-toolbar{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);flex-wrap:wrap}.ca-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--ca-border);border-radius:var(--snice-border-radius-md,.25rem);background:var(--ca-bg);color:var(--ca-text);font-size:var(--snice-font-size-sm, .875rem);font-family:inherit;cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease;white-space:nowrap}.ca-btn:hover{background:var(--ca-bg-element)}.ca-btn:active{transform:scale(.97)}.ca-btn.primary{background:var(--ca-primary);color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--ca-primary)}.ca-btn.primary:hover{opacity:.9}.ca-btn.danger{color:var(--ca-danger);border-color:var(--ca-danger)}.ca-btn.danger:hover{background:var(--ca-danger);color:var(--snice-color-text-inverse,rgb(250 250 250))}.ca-btn.small{padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem)}.ca-btn.active{background:var(--ca-primary);color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--ca-primary)}.ca-btn svg{width:1rem;height:1rem;flex-shrink:0}.ca-separator{width:1px;height:1.5rem;background:var(--ca-border);margin:0 var(--snice-spacing-3xs,.125rem)}.ca-toolbar-group{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem)}.ca-stroke-width{width:3.5rem;padding:var(--snice-spacing-2xs,.25rem);border:1px solid var(--ca-border);border-radius:var(--snice-border-radius-md,.25rem);font-size:var(--snice-font-size-sm, .875rem);font-family:inherit;background:var(--ca-bg);color:var(--ca-text);text-align:center}.ca-sidebar{width:16rem;flex-shrink:0;display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem);border:1px solid var(--ca-border);border-radius:var(--snice-border-radius-lg,.5rem);padding:var(--snice-spacing-sm,.75rem);background:var(--ca-bg);max-height:32rem;overflow-y:auto}.ca-sidebar.hidden{display:none}.ca-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--snice-spacing-xs,.5rem);border-bottom:1px solid var(--ca-border)}.ca-sidebar-title{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--ca-text)}.ca-annotation-list{display:flex;flex-direction:column;gap:var(--snice-spacing-2xs,.25rem)}.ca-annotation-item{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,.25rem);border:1px solid transparent;cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.ca-annotation-item:hover{background:var(--ca-bg-element);border-color:var(--ca-border)}.ca-annotation-item.highlighted{background:var(--ca-bg-element);border-color:var(--ca-primary)}.ca-annotation-color{width:.75rem;height:.75rem;border-radius:50%;flex-shrink:0;border:1px solid var(--ca-border)}.ca-annotation-label{flex:1;min-width:0}.ca-annotation-label input{width:100%;border:none;background:0 0;font-size:var(--snice-font-size-sm, .875rem);font-family:inherit;color:var(--ca-text);padding:var(--snice-spacing-3xs,.125rem) 0;outline:0}.ca-annotation-label input:focus{border-bottom:1px solid var(--ca-primary)}.ca-annotation-label input::placeholder{color:var(--ca-text-tertiary)}.ca-annotation-actions{display:flex;align-items:center;gap:var(--snice-spacing-3xs,.125rem)}.ca-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:0 0;color:var(--ca-text-tertiary);cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);padding:0;transition:all var(--snice-transition-fast, 150ms) ease}.ca-icon-btn:hover{background:var(--ca-bg-element);color:var(--ca-text)}.ca-icon-btn svg{width:.875rem;height:.875rem}.ca-icon-btn.hidden-state{opacity:.4}.ca-color-section{display:flex;flex-direction:column;gap:var(--snice-spacing-2xs,.25rem)}.ca-color-palette{display:flex;flex-wrap:wrap;gap:var(--snice-spacing-3xs,.125rem);justify-content:center}.ca-color-swatch{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--snice-transition-fast, 150ms) ease}.ca-color-swatch:hover{transform:scale(1.2)}.ca-color-swatch.active{border-color:var(--ca-text);box-shadow:0 0 0 2px var(--ca-bg),0 0 0 3px var(--ca-text)}.ca-auto-rotate{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);color:var(--ca-text-secondary);cursor:pointer}.ca-auto-rotate input{margin:0;cursor:pointer}.ca-empty-state{text-align:center;padding:var(--snice-spacing-lg,1.5rem) var(--snice-spacing-sm,.75rem);color:var(--ca-text-tertiary);font-size:var(--snice-font-size-sm, .875rem)}";
+
+const PRESET_COLORS = [
+    '#f87171', '#fb923c', '#fbbf24', '#a3e635',
+    '#34d399', '#22d3ee', '#60a5fa', '#a78bfa',
+    '#f472b6', '#fb7185', '#e879f9', '#818cf8'
+];
+let SniceCameraAnnotate = (() => {
+    let _classDecorators = [element('snice-camera-annotate')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _mode_decorators;
+    let _mode_initializers = [];
+    let _mode_extraInitializers = [];
+    let _autoRotateColors_decorators;
+    let _autoRotateColors_initializers = [];
+    let _autoRotateColors_extraInitializers = [];
+    let _showLabelsPanel_decorators;
+    let _showLabelsPanel_initializers = [];
+    let _showLabelsPanel_extraInitializers = [];
+    let _videoEl_decorators;
+    let _videoEl_initializers = [];
+    let _videoEl_extraInitializers = [];
+    let _drawCanvas_decorators;
+    let _drawCanvas_initializers = [];
+    let _drawCanvas_extraInitializers = [];
+    let _componentStyles_decorators;
+    let _init_decorators;
+    let _cleanup_decorators;
+    let _template_decorators;
+    let _handleModeChange_decorators;
+    let _emitCapture_decorators;
+    let _emitAnnotate_decorators;
+    let _emitAnnotationChange_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.mode = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mode_initializers, 'camera'));
+            this.autoRotateColors = (__runInitializers(this, _mode_extraInitializers), __runInitializers(this, _autoRotateColors_initializers, true));
+            this.showLabelsPanel = (__runInitializers(this, _autoRotateColors_extraInitializers), __runInitializers(this, _showLabelsPanel_initializers, true));
+            this.videoEl = (__runInitializers(this, _showLabelsPanel_extraInitializers), __runInitializers(this, _videoEl_initializers, void 0));
+            this.drawCanvas = (__runInitializers(this, _videoEl_extraInitializers), __runInitializers(this, _drawCanvas_initializers, void 0));
+            this.stream = (__runInitializers(this, _drawCanvas_extraInitializers), null);
+            this.ctx = null;
+            this.capturedImageData = '';
+            this.capturedImage = null;
+            this.imageWidth = 0;
+            this.imageHeight = 0;
+            // Drawing state
+            this.isDrawing = false;
+            this.currentPoints = [];
+            this.strokes = [];
+            this.annotations = [];
+            this.activeColor = PRESET_COLORS[0];
+            this.colorIndex = 0;
+            this.strokeWidth = 3;
+            // Highlight state
+            this.highlightedAnnotationId = null;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _mode_decorators = [property()];
+            _autoRotateColors_decorators = [property({ type: Boolean, attribute: 'auto-rotate-colors' })];
+            _showLabelsPanel_decorators = [property({ type: Boolean, attribute: 'show-labels-panel' })];
+            _videoEl_decorators = [query('.ca-video')];
+            _drawCanvas_decorators = [query('.ca-draw-canvas')];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _template_decorators = [render()];
+            _handleModeChange_decorators = [watch('mode')];
+            _emitCapture_decorators = [dispatch('capture', { bubbles: true, composed: true })];
+            _emitAnnotate_decorators = [dispatch('annotate', { bubbles: true, composed: true })];
+            _emitAnnotationChange_decorators = [dispatch('annotation-change', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _template_decorators, { kind: "method", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleModeChange_decorators, { kind: "method", name: "handleModeChange", static: false, private: false, access: { has: obj => "handleModeChange" in obj, get: obj => obj.handleModeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitCapture_decorators, { kind: "method", name: "emitCapture", static: false, private: false, access: { has: obj => "emitCapture" in obj, get: obj => obj.emitCapture }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitAnnotate_decorators, { kind: "method", name: "emitAnnotate", static: false, private: false, access: { has: obj => "emitAnnotate" in obj, get: obj => obj.emitAnnotate }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitAnnotationChange_decorators, { kind: "method", name: "emitAnnotationChange", static: false, private: false, access: { has: obj => "emitAnnotationChange" in obj, get: obj => obj.emitAnnotationChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _mode_decorators, { kind: "field", name: "mode", static: false, private: false, access: { has: obj => "mode" in obj, get: obj => obj.mode, set: (obj, value) => { obj.mode = value; } }, metadata: _metadata }, _mode_initializers, _mode_extraInitializers);
+            __esDecorate(null, null, _autoRotateColors_decorators, { kind: "field", name: "autoRotateColors", static: false, private: false, access: { has: obj => "autoRotateColors" in obj, get: obj => obj.autoRotateColors, set: (obj, value) => { obj.autoRotateColors = value; } }, metadata: _metadata }, _autoRotateColors_initializers, _autoRotateColors_extraInitializers);
+            __esDecorate(null, null, _showLabelsPanel_decorators, { kind: "field", name: "showLabelsPanel", static: false, private: false, access: { has: obj => "showLabelsPanel" in obj, get: obj => obj.showLabelsPanel, set: (obj, value) => { obj.showLabelsPanel = value; } }, metadata: _metadata }, _showLabelsPanel_initializers, _showLabelsPanel_extraInitializers);
+            __esDecorate(null, null, _videoEl_decorators, { kind: "field", name: "videoEl", static: false, private: false, access: { has: obj => "videoEl" in obj, get: obj => obj.videoEl, set: (obj, value) => { obj.videoEl = value; } }, metadata: _metadata }, _videoEl_initializers, _videoEl_extraInitializers);
+            __esDecorate(null, null, _drawCanvas_decorators, { kind: "field", name: "drawCanvas", static: false, private: false, access: { has: obj => "drawCanvas" in obj, get: obj => obj.drawCanvas, set: (obj, value) => { obj.drawCanvas = value; } }, metadata: _metadata }, _drawCanvas_initializers, _drawCanvas_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        componentStyles() {
+            return css /*css*/ `${componentStyles}`;
+        }
+        async init() {
+            if (this.mode === 'camera') {
+                await this.startCamera();
+            }
+        }
+        cleanup() {
+            this.stopCamera();
+        }
+        template() {
+            return html `
+      <div class="ca-layout">
+        <div class="ca-main">
+          <div class="ca-canvas-area">
+            <video
+              class="ca-video mirror ${this.mode === 'annotate' ? 'hidden' : ''}"
+              autoplay
+              playsinline
+              muted>
+            </video>
+            <canvas
+              class="ca-draw-canvas ${this.mode === 'camera' ? 'hidden' : ''}"
+              @pointerdown=${this.handlePointerDown}
+              @pointermove=${this.handlePointerMove}
+              @pointerup=${this.handlePointerUp}>
+            </canvas>
+          </div>
+          ${this.renderToolbar()}
+        </div>
+        <div class="ca-sidebar ${this.showLabelsPanel ? '' : 'hidden'}">
+          ${this.renderSidebar()}
+        </div>
+      </div>
+    `;
+        }
+        renderToolbar() {
+            const inCamera = this.mode === 'camera';
+            return html `
+      <div class="ca-toolbar">
+        <button class="ca-btn primary" @click=${inCamera ? this.capture : this.retake}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            ${inCamera
+                ? html `<path d="M9 2L7 5H4C2.9 5 2 5.9 2 7V19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V7C22 5.9 21.1 5 20 5H17L15 2H9Z"/><circle cx="12" cy="13" r="3"/>`
+                : html `<path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>`}
+          </svg>
+          ${inCamera ? 'Capture' : 'Retake'}
+        </button>
+
+        <if value=${!inCamera}>
+          <div class="ca-separator"></div>
+          <div class="ca-toolbar-group">
+            <button class="ca-btn small" @click=${this.undoStroke} title="Undo">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+              </svg>
+            </button>
+            <button class="ca-btn small danger" @click=${this.clearAnnotations} title="Clear all">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+              </svg>
+            </button>
+          </div>
+          <div class="ca-separator"></div>
+          <label class="ca-toolbar-group" style="font-size:0.75rem;color:var(--ca-text-secondary);">
+            Width:
+            <input
+              type="number"
+              class="ca-stroke-width"
+              min="1"
+              max="20"
+              .value="${String(this.strokeWidth)}"
+              @change=${this.handleStrokeWidthChange}
+            />
+          </label>
+          <div class="ca-separator"></div>
+          <button class="ca-btn small" @click=${this.handleExportImage} title="Export image">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+            </svg>
+            Export
+          </button>
+        </if>
+      </div>
+    `;
+        }
+        renderSidebar() {
+            return html `
+      <div class="ca-sidebar-header">
+        <span class="ca-sidebar-title">Annotations</span>
+        <div class="ca-toolbar-group">
+          <button class="ca-icon-btn" @click=${this.toggleAllAnnotations} title="Toggle all">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="ca-color-section">
+        <div class="ca-color-palette">
+          ${PRESET_COLORS.map(color => html `
+            <div
+              class="ca-color-swatch ${this.activeColor === color ? 'active' : ''}"
+              style="background-color: ${color}"
+              @click=${() => this.selectColor(color)}
+              title="${color}">
+            </div>
+          `)}
+        </div>
+        <label class="ca-auto-rotate">
+          <input
+            type="checkbox"
+            ?checked=${this.autoRotateColors}
+            @change=${this.handleAutoRotateChange}
+          />
+          Auto Rotate Colors
+        </label>
+      </div>
+
+      <div class="ca-annotation-list">
+        ${this.annotations.length === 0
+                ? html `<div class="ca-empty-state">Draw on the image to create annotations</div>`
+                : this.annotations.map(ann => this.renderAnnotationItem(ann))}
+      </div>
+    `;
+        }
+        renderAnnotationItem(ann) {
+            const isHighlighted = this.highlightedAnnotationId === ann.id;
+            return html `
+      <div
+        class="ca-annotation-item ${isHighlighted ? 'highlighted' : ''}"
+        @mouseenter=${() => this.highlightAnnotation(ann.id)}
+        @mouseleave=${() => this.unhighlightAnnotation()}>
+        <div class="ca-annotation-color" style="background-color: ${ann.color}"></div>
+        <div class="ca-annotation-label">
+          <input
+            type="text"
+            placeholder="Add label..."
+            .value="${ann.label}"
+            @input=${(e) => this.updateAnnotationLabel(ann.id, e.target.value)}
+          />
+        </div>
+        <div class="ca-annotation-actions">
+          <button
+            class="ca-icon-btn ${ann.visible ? '' : 'hidden-state'}"
+            @click=${() => this.toggleAnnotationVisibility(ann.id)}
+            title="${ann.visible ? 'Hide' : 'Show'}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              ${ann.visible
+                ? html `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`
+                : html `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>`}
+            </svg>
+          </button>
+          <button
+            class="ca-icon-btn"
+            @click=${() => this.deleteAnnotation(ann.id)}
+            title="Delete">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+        }
+        // --- Camera ---
+        async startCamera() {
+            try {
+                this.stream = await navigator.mediaDevices.getUserMedia({
+                    audio: false,
+                    video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' }
+                });
+                if (this.videoEl) {
+                    this.videoEl.srcObject = this.stream;
+                    await this.videoEl.play();
+                }
+            }
+            catch (err) {
+                console.error('Camera access error:', err);
+            }
+        }
+        stopCamera() {
+            if (this.stream) {
+                this.stream.getTracks().forEach(t => t.stop());
+                this.stream = null;
+            }
+        }
+        // --- Capture ---
+        async capture() {
+            if (!this.videoEl)
+                return;
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = this.videoEl.videoWidth || 640;
+            tempCanvas.height = this.videoEl.videoHeight || 480;
+            const tempCtx = tempCanvas.getContext('2d');
+            if (!tempCtx)
+                return;
+            // Mirror for user-facing camera
+            tempCtx.scale(-1, 1);
+            tempCtx.drawImage(this.videoEl, -tempCanvas.width, 0, tempCanvas.width, tempCanvas.height);
+            this.capturedImageData = tempCanvas.toDataURL('image/jpeg', 0.92);
+            this.imageWidth = tempCanvas.width;
+            this.imageHeight = tempCanvas.height;
+            // Load as image for drawing
+            this.capturedImage = new Image();
+            this.capturedImage.src = this.capturedImageData;
+            await new Promise(resolve => {
+                this.capturedImage.onload = () => resolve();
+            });
+            this.stopCamera();
+            this.mode = 'annotate';
+            // Init canvas after mode switch renders it
+            requestAnimationFrame(() => {
+                this.initDrawCanvas();
+                this.emitCapture();
+            });
+        }
+        retake() {
+            this.strokes = [];
+            this.annotations = [];
+            this.capturedImageData = '';
+            this.capturedImage = null;
+            this.highlightedAnnotationId = null;
+            this.colorIndex = 0;
+            this.activeColor = PRESET_COLORS[0];
+            this.mode = 'camera';
+            requestAnimationFrame(() => this.startCamera());
+        }
+        // --- Drawing ---
+        initDrawCanvas() {
+            const canvas = this.drawCanvas;
+            if (!canvas || !this.capturedImage)
+                return;
+            canvas.width = this.imageWidth;
+            canvas.height = this.imageHeight;
+            this.ctx = canvas.getContext('2d');
+            this.redrawCanvas();
+        }
+        getCanvasPoint(e) {
+            const canvas = this.drawCanvas;
+            if (!canvas)
+                return { x: 0, y: 0 };
+            const rect = canvas.getBoundingClientRect();
+            return {
+                x: (e.clientX - rect.left) * (canvas.width / rect.width),
+                y: (e.clientY - rect.top) * (canvas.height / rect.height)
+            };
+        }
+        handlePointerDown(e) {
+            if (this.mode !== 'annotate')
+                return;
+            e.preventDefault();
+            this.isDrawing = true;
+            this.currentPoints = [this.getCanvasPoint(e)];
+            this.drawCanvas?.setPointerCapture(e.pointerId);
+        }
+        handlePointerMove(e) {
+            if (!this.isDrawing)
+                return;
+            e.preventDefault();
+            const point = this.getCanvasPoint(e);
+            this.currentPoints.push(point);
+            this.redrawCanvas();
+            this.drawCurrentStroke();
+        }
+        handlePointerUp(e) {
+            if (!this.isDrawing)
+                return;
+            e.preventDefault();
+            this.isDrawing = false;
+            this.drawCanvas?.releasePointerCapture(e.pointerId);
+            if (this.currentPoints.length < 2) {
+                this.currentPoints = [];
+                return;
+            }
+            const strokeId = `stroke-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            const stroke = {
+                id: strokeId,
+                color: this.activeColor,
+                width: this.strokeWidth,
+                points: [...this.currentPoints],
+                timestamp: Date.now()
+            };
+            this.strokes.push(stroke);
+            const annotation = {
+                id: `ann-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+                strokeId,
+                label: '',
+                color: this.activeColor,
+                visible: true,
+                timestamp: Date.now()
+            };
+            this.annotations.push(annotation);
+            this.currentPoints = [];
+            // Auto rotate color
+            if (this.autoRotateColors) {
+                this.colorIndex = (this.colorIndex + 1) % PRESET_COLORS.length;
+                this.activeColor = PRESET_COLORS[this.colorIndex];
+            }
+            this.redrawCanvas();
+            this.emitAnnotate(annotation);
+            this.emitAnnotationChange();
+        }
+        drawCurrentStroke() {
+            if (!this.ctx || this.currentPoints.length < 2)
+                return;
+            this.ctx.lineJoin = 'round';
+            this.ctx.lineCap = 'round';
+            this.ctx.strokeStyle = this.activeColor;
+            this.ctx.lineWidth = this.strokeWidth * 2;
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.currentPoints[0].x, this.currentPoints[0].y);
+            for (let i = 1; i < this.currentPoints.length; i++) {
+                const prev = this.currentPoints[i - 1];
+                const curr = this.currentPoints[i];
+                const midX = (prev.x + curr.x) / 2;
+                const midY = (prev.y + curr.y) / 2;
+                this.ctx.quadraticCurveTo(prev.x, prev.y, midX, midY);
+            }
+            const last = this.currentPoints[this.currentPoints.length - 1];
+            this.ctx.lineTo(last.x, last.y);
+            this.ctx.stroke();
+        }
+        redrawCanvas() {
+            if (!this.ctx || !this.capturedImage)
+                return;
+            this.ctx.clearRect(0, 0, this.imageWidth, this.imageHeight);
+            this.ctx.drawImage(this.capturedImage, 0, 0, this.imageWidth, this.imageHeight);
+            for (const stroke of this.strokes) {
+                const ann = this.annotations.find(a => a.strokeId === stroke.id);
+                if (ann && !ann.visible)
+                    continue;
+                this.ctx.save();
+                // Apply highlight/dim effect
+                if (this.highlightedAnnotationId !== null) {
+                    const isHighlighted = ann && ann.id === this.highlightedAnnotationId;
+                    if (!isHighlighted) {
+                        this.ctx.globalAlpha = 0.2;
+                        this.ctx.filter = 'grayscale(1)';
+                    }
+                }
+                this.drawStroke(stroke);
+                this.ctx.restore();
+            }
+        }
+        drawStroke(stroke) {
+            if (!this.ctx || stroke.points.length === 0)
+                return;
+            this.ctx.lineJoin = 'round';
+            this.ctx.lineCap = 'round';
+            this.ctx.strokeStyle = stroke.color;
+            this.ctx.lineWidth = stroke.width * 2;
+            if (stroke.points.length === 1) {
+                this.ctx.beginPath();
+                this.ctx.arc(stroke.points[0].x, stroke.points[0].y, stroke.width, 0, Math.PI * 2);
+                this.ctx.fillStyle = stroke.color;
+                this.ctx.fill();
+                return;
+            }
+            this.ctx.beginPath();
+            this.ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+            for (let i = 1; i < stroke.points.length; i++) {
+                const prev = stroke.points[i - 1];
+                const curr = stroke.points[i];
+                const midX = (prev.x + curr.x) / 2;
+                const midY = (prev.y + curr.y) / 2;
+                this.ctx.quadraticCurveTo(prev.x, prev.y, midX, midY);
+            }
+            const last = stroke.points[stroke.points.length - 1];
+            this.ctx.lineTo(last.x, last.y);
+            this.ctx.stroke();
+        }
+        // --- Annotation management ---
+        selectColor(color) {
+            this.activeColor = color;
+            this.colorIndex = PRESET_COLORS.indexOf(color);
+        }
+        handleAutoRotateChange(e) {
+            this.autoRotateColors = e.target.checked;
+        }
+        handleStrokeWidthChange(e) {
+            this.strokeWidth = Math.max(1, Math.min(20, parseInt(e.target.value) || 3));
+        }
+        updateAnnotationLabel(id, label) {
+            const ann = this.annotations.find(a => a.id === id);
+            if (ann) {
+                ann.label = label;
+                this.emitAnnotationChange();
+            }
+        }
+        toggleAnnotationVisibility(id) {
+            const ann = this.annotations.find(a => a.id === id);
+            if (ann) {
+                ann.visible = !ann.visible;
+                this.redrawCanvas();
+                this.emitAnnotationChange();
+            }
+        }
+        toggleAllAnnotations() {
+            const allVisible = this.annotations.every(a => a.visible);
+            this.annotations.forEach(a => a.visible = !allVisible);
+            this.redrawCanvas();
+            this.emitAnnotationChange();
+        }
+        deleteAnnotation(id) {
+            const ann = this.annotations.find(a => a.id === id);
+            if (!ann)
+                return;
+            this.strokes = this.strokes.filter(s => s.id !== ann.strokeId);
+            this.annotations = this.annotations.filter(a => a.id !== id);
+            this.redrawCanvas();
+            this.emitAnnotationChange();
+        }
+        highlightAnnotation(id) {
+            this.highlightedAnnotationId = id;
+            this.redrawCanvas();
+        }
+        unhighlightAnnotation() {
+            this.highlightedAnnotationId = null;
+            this.redrawCanvas();
+        }
+        undoStroke() {
+            if (this.strokes.length === 0)
+                return;
+            const lastStroke = this.strokes.pop();
+            this.annotations = this.annotations.filter(a => a.strokeId !== lastStroke.id);
+            this.redrawCanvas();
+            this.emitAnnotationChange();
+        }
+        handleExportImage() {
+            const dataURL = this.exportImage();
+            const a = document.createElement('a');
+            a.href = dataURL;
+            a.download = `annotated-${Date.now()}.png`;
+            a.click();
+        }
+        // --- Public API ---
+        exportImage(options) {
+            const canvas = document.createElement('canvas');
+            canvas.width = this.imageWidth;
+            canvas.height = this.imageHeight;
+            const ctx = canvas.getContext('2d');
+            // Draw base image
+            if (this.capturedImage) {
+                ctx.drawImage(this.capturedImage, 0, 0, this.imageWidth, this.imageHeight);
+            }
+            // Draw visible strokes
+            for (const stroke of this.strokes) {
+                const ann = this.annotations.find(a => a.strokeId === stroke.id);
+                if (ann && !ann.visible)
+                    continue;
+                this.drawStrokeOnCtx(ctx, stroke);
+            }
+            // Optionally draw labels
+            if (options?.includeLabels) {
+                for (const ann of this.annotations) {
+                    if (!ann.visible || !ann.label)
+                        continue;
+                    const stroke = this.strokes.find(s => s.id === ann.strokeId);
+                    if (!stroke || stroke.points.length === 0)
+                        continue;
+                    // Position label near stroke center
+                    let cx = 0, cy = 0;
+                    for (const p of stroke.points) {
+                        cx += p.x;
+                        cy += p.y;
+                    }
+                    cx /= stroke.points.length;
+                    cy /= stroke.points.length;
+                    ctx.font = `${Math.max(14, this.imageWidth / 60)}px sans-serif`;
+                    ctx.fillStyle = ann.color;
+                    ctx.strokeStyle = 'white';
+                    ctx.lineWidth = 3;
+                    ctx.strokeText(ann.label, cx, cy - 10);
+                    ctx.fillText(ann.label, cx, cy - 10);
+                }
+            }
+            return canvas.toDataURL('image/png');
+        }
+        drawStrokeOnCtx(ctx, stroke) {
+            if (stroke.points.length === 0)
+                return;
+            ctx.lineJoin = 'round';
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = stroke.color;
+            ctx.lineWidth = stroke.width * 2;
+            if (stroke.points.length === 1) {
+                ctx.beginPath();
+                ctx.arc(stroke.points[0].x, stroke.points[0].y, stroke.width, 0, Math.PI * 2);
+                ctx.fillStyle = stroke.color;
+                ctx.fill();
+                return;
+            }
+            ctx.beginPath();
+            ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+            for (let i = 1; i < stroke.points.length; i++) {
+                const prev = stroke.points[i - 1];
+                const curr = stroke.points[i];
+                const midX = (prev.x + curr.x) / 2;
+                const midY = (prev.y + curr.y) / 2;
+                ctx.quadraticCurveTo(prev.x, prev.y, midX, midY);
+            }
+            const last = stroke.points[stroke.points.length - 1];
+            ctx.lineTo(last.x, last.y);
+            ctx.stroke();
+        }
+        exportAnnotations() {
+            return {
+                annotations: this.annotations.map(a => ({ ...a })),
+                strokes: this.strokes.map(s => ({
+                    ...s,
+                    points: s.points.map(p => ({ ...p }))
+                })),
+                imageWidth: this.imageWidth,
+                imageHeight: this.imageHeight
+            };
+        }
+        importAnnotations(data) {
+            this.annotations = data.annotations.map(a => ({ ...a }));
+            this.strokes = data.strokes.map(s => ({
+                ...s,
+                points: s.points.map(p => ({ ...p }))
+            }));
+            this.imageWidth = data.imageWidth;
+            this.imageHeight = data.imageHeight;
+            this.redrawCanvas();
+            this.emitAnnotationChange();
+        }
+        clearAnnotations() {
+            this.strokes = [];
+            this.annotations = [];
+            this.highlightedAnnotationId = null;
+            this.colorIndex = 0;
+            this.activeColor = PRESET_COLORS[0];
+            this.redrawCanvas();
+            this.emitAnnotationChange();
+        }
+        handleModeChange() {
+            if (this.mode === 'annotate' && this.capturedImage) {
+                requestAnimationFrame(() => this.initDrawCanvas());
+            }
+        }
+        // --- Events ---
+        emitCapture() {
+            return {
+                dataURL: this.capturedImageData,
+                width: this.imageWidth,
+                height: this.imageHeight
+            };
+        }
+        emitAnnotate(annotation) {
+            return { annotation };
+        }
+        emitAnnotationChange() {
+            return { annotations: this.annotations.map(a => ({ ...a })) };
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceCameraAnnotate };
+//# sourceMappingURL=snice-camera-annotate.js.map