snice 4.8.0 → 4.9.0

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

@@ -0,0 +1,730 @@
+/*!
+ * snice v4.8.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-camera-annotate.min.js");}
+var SniceCameraAnnotate = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property()];
+              _autoRotateColors_decorators = [snice.property({ type: Boolean, attribute: 'auto-rotate-colors' })];
+              _showLabelsPanel_decorators = [snice.property({ type: Boolean, attribute: 'show-labels-panel' })];
+              _videoEl_decorators = [snice.query('.ca-video')];
+              _drawCanvas_decorators = [snice.query('.ca-draw-canvas')];
+              _componentStyles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _cleanup_decorators = [snice.dispose()];
+              _template_decorators = [snice.render()];
+              _handleModeChange_decorators = [snice.watch('mode')];
+              _emitCapture_decorators = [snice.dispatch('capture', { bubbles: true, composed: true })];
+              _emitAnnotate_decorators = [snice.dispatch('annotate', { bubbles: true, composed: true })];
+              _emitAnnotationChange_decorators = [snice.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 snice.css /*css*/ `${componentStyles}`;
+          }
+          async init() {
+              if (this.mode === 'camera') {
+                  await this.startCamera();
+              }
+          }
+          cleanup() {
+              this.stopCamera();
+          }
+          template() {
+              return snice.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 snice.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
+                ? snice.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"/>`
+                : snice.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 snice.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 => snice.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
+                ? snice.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 snice.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
+                ? snice.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"/>`
+                : snice.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;
+  })();
+
+  exports.SniceCameraAnnotate = SniceCameraAnnotate;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-camera-annotate.js.map