web-annotation-renderer 0.6.1 → 0.6.2

package/dist/index19.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index19.cjs","sources":["../src/pen/StrokeDrawer.js"],"sourcesContent":["/**\n * StrokeDrawer - Low-level canvas stroke drawing utilities\n *\n * Handles the actual drawing of strokes on canvas with support for:\n * - Progressive stroke reveal (partial drawing based on progress)\n * - Normalized to pixel coordinate conversion\n * - Variable width based on pressure data\n * - Smooth line rendering with round caps/joins\n */\nclass StrokeDrawer {\n  /**\n   * Creates a new StrokeDrawer instance\n   *\n   * @param {CanvasRenderingContext2D} ctx - Canvas 2D rendering context\n   * @param {Object} viewport - Viewport dimensions for coordinate conversion\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   */\n  constructor(ctx, viewport) {\n    this.ctx = ctx;\n    this.viewport = viewport;\n  }\n\n  /**\n   * Updates the viewport dimensions\n   *\n   * @param {Object} viewport - New viewport dimensions\n   */\n  setViewport(viewport) {\n    this.viewport = viewport;\n  }\n\n  /**\n   * Draws a stroke with optional progress for progressive reveal\n   *\n   * @param {Object} stroke - Stroke command object\n   * @param {Array} stroke.points - Array of [x, y] normalized coordinates\n   * @param {string} stroke.color - Stroke color (CSS color string)\n   * @param {number} stroke.width - Base stroke width in pixels\n   * @param {Array} [stroke.pressures] - Optional pressure values for variable width\n   * @param {number} [progress=1.0] - Progress from 0 to 1 (for progressive reveal)\n   */\n  drawStroke(stroke, progress = 1.0) {\n    const { points, color, width, pressures } = stroke;\n\n    if (!points || points.length < 2) return;\n\n    // Calculate how many points to draw based on progress\n    const pointCount = Math.max(2, Math.floor(points.length * progress));\n    const visiblePoints = points.slice(0, pointCount);\n\n    // Configure stroke style\n    this.ctx.strokeStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.lineCap = 'round';\n    this.ctx.lineJoin = 'round';\n\n    // Draw with variable width if pressures provided\n    if (pressures && pressures.length >= visiblePoints.length) {\n      this._drawVariableWidthStroke(visiblePoints, width, pressures.slice(0, pointCount));\n    } else {\n      this._drawConstantWidthStroke(visiblePoints, width);\n    }\n  }\n\n  /**\n   * Draws a stroke with constant width\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} width - Stroke width in pixels\n   */\n  _drawConstantWidthStroke(points, width) {\n    this.ctx.lineWidth = width || 2;\n    this.ctx.beginPath();\n\n    for (let i = 0; i < points.length; i++) {\n      const [px, py] = this._normalizedToPixel(points[i]);\n\n      if (i === 0) {\n        this.ctx.moveTo(px, py);\n      } else {\n        this.ctx.lineTo(px, py);\n      }\n    }\n\n    this.ctx.stroke();\n  }\n\n  /**\n   * Draws a stroke with variable width based on pressure\n   *\n   * Uses multiple line segments with varying widths for natural pen feel.\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} baseWidth - Base stroke width in pixels\n   * @param {Array} pressures - Pressure values (0-1) for each point\n   */\n  _drawVariableWidthStroke(points, baseWidth, pressures) {\n    for (let i = 1; i < points.length; i++) {\n      const [x1, y1] = this._normalizedToPixel(points[i - 1]);\n      const [x2, y2] = this._normalizedToPixel(points[i]);\n\n      // Average pressure between two points\n      const p1 = pressures[i - 1] || 1;\n      const p2 = pressures[i] || 1;\n      const avgPressure = (p1 + p2) / 2;\n\n      // Apply pressure to width (min 0.5, max 2x base width)\n      const width = Math.max(0.5, baseWidth * avgPressure);\n\n      this.ctx.lineWidth = width;\n      this.ctx.beginPath();\n      this.ctx.moveTo(x1, y1);\n      this.ctx.lineTo(x2, y2);\n      this.ctx.stroke();\n    }\n  }\n\n  /**\n   * Draws a single point (dot)\n   *\n   * Useful for single-point strokes or debugging.\n   *\n   * @param {number} x - Normalized x coordinate (0-1)\n   * @param {number} y - Normalized y coordinate (0-1)\n   * @param {number} radius - Dot radius in pixels\n   * @param {string} color - Fill color\n   */\n  drawPoint(x, y, radius, color) {\n    const [px, py] = this._normalizedToPixel([x, y]);\n\n    this.ctx.fillStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.beginPath();\n    this.ctx.arc(px, py, radius, 0, Math.PI * 2);\n    this.ctx.fill();\n  }\n\n  /**\n   * Clears the entire canvas\n   */\n  clear() {\n    const dpr = window.devicePixelRatio || 1;\n    this.ctx.clearRect(0, 0, this.viewport.width * dpr, this.viewport.height * dpr);\n  }\n\n  /**\n   * Converts normalized coordinates (0-1) to pixel coordinates\n   *\n   * @private\n   * @param {Array} point - [x, y] normalized coordinates\n   * @returns {Array} [x, y] pixel coordinates\n   */\n  _normalizedToPixel(point) {\n    const [normX, normY] = point;\n    return [\n      normX * this.viewport.width,\n      normY * this.viewport.height\n    ];\n  }\n}\n\nexport default StrokeDrawer;\n"],"names":["StrokeDrawer","ctx","viewport","stroke","progress","points","color","width","pressures","pointCount","visiblePoints","px","py","baseWidth","i","x1","y1","x2","y2","p1","p2","avgPressure","x","y","radius","dpr","point","normX","normY"],"mappings":"4GASA,MAAMA,CAAa,CASjB,YAAYC,EAAKC,EAAU,CACzB,KAAK,IAAMD,EACX,KAAK,SAAWC,CAClB,CAOA,YAAYA,EAAU,CACpB,KAAK,SAAWA,CAClB,CAYA,WAAWC,EAAQC,EAAW,EAAK,CACjC,KAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAS,EAAKL,EAE5C,GAAI,CAACE,GAAUA,EAAO,OAAS,EAAG,OAGlC,MAAMI,EAAa,KAAK,IAAI,EAAG,KAAK,MAAMJ,EAAO,OAASD,CAAQ,CAAC,EAC7DM,EAAgBL,EAAO,MAAM,EAAGI,CAAU,EAGhD,KAAK,IAAI,YAAcH,GAAS,qBAChC,KAAK,IAAI,QAAU,QACnB,KAAK,IAAI,SAAW,QAGhBE,GAAaA,EAAU,QAAUE,EAAc,OACjD,KAAK,yBAAyBA,EAAeH,EAAOC,EAAU,MAAM,EAAGC,CAAU,CAAC,EAElF,KAAK,yBAAyBC,EAAeH,CAAK,CAEtD,CASA,yBAAyBF,EAAQE,EAAO,CACtC,KAAK,IAAI,UAAYA,GAAS,EAC9B,KAAK,IAAI,UAAS,EAElB,QAAS,EAAI,EAAG,EAAIF,EAAO,OAAQ,IAAK,CACtC,KAAM,CAACM,EAAIC,CAAE,EAAI,KAAK,mBAAmBP,EAAO,CAAC,CAAC,EAE9C,IAAM,EACR,KAAK,IAAI,OAAOM,EAAIC,CAAE,EAEtB,KAAK,IAAI,OAAOD,EAAIC,CAAE,CAE1B,CAEA,KAAK,IAAI,OAAM,CACjB,CAYA,yBAAyBP,EAAQQ,EAAWL,EAAW,CACrD,QAASM,EAAI,EAAGA,EAAIT,EAAO,OAAQS,IAAK,CACtC,KAAM,CAACC,EAAIC,CAAE,EAAI,KAAK,mBAAmBX,EAAOS,EAAI,CAAC,CAAC,EAChD,CAACG,EAAIC,CAAE,EAAI,KAAK,mBAAmBb,EAAOS,CAAC,CAAC,EAG5CK,EAAKX,EAAUM,EAAI,CAAC,GAAK,EACzBM,EAAKZ,EAAUM,CAAC,GAAK,EACrBO,GAAeF,EAAKC,GAAM,EAG1Bb,EAAQ,KAAK,IAAI,GAAKM,EAAYQ,CAAW,EAEnD,KAAK,IAAI,UAAYd,EACrB,KAAK,IAAI,UAAS,EAClB,KAAK,IAAI,OAAOQ,EAAIC,CAAE,EACtB,KAAK,IAAI,OAAOC,EAAIC,CAAE,EACtB,KAAK,IAAI,OAAM,CACjB,CACF,CAYA,UAAUI,EAAGC,EAAGC,EAAQlB,EAAO,CAC7B,KAAM,CAACK,EAAIC,CAAE,EAAI,KAAK,mBAAmB,CAACU,EAAGC,CAAC,CAAC,EAE/C,KAAK,IAAI,UAAYjB,GAAS,qBAC9B,KAAK,IAAI,UAAS,EAClB,KAAK,IAAI,IAAIK,EAAIC,EAAIY,EAAQ,EAAG,KAAK,GAAK,CAAC,EAC3C,KAAK,IAAI,KAAI,CACf,CAKA,OAAQ,CACN,MAAMC,EAAM,OAAO,kBAAoB,EACvC,KAAK,IAAI,UAAU,EAAG,EAAG,KAAK,SAAS,MAAQA,EAAK,KAAK,SAAS,OAASA,CAAG,CAChF,CASA,mBAAmBC,EAAO,CACxB,KAAM,CAACC,EAAOC,CAAK,EAAIF,EACvB,MAAO,CACLC,EAAQ,KAAK,SAAS,MACtBC,EAAQ,KAAK,SAAS,MAC5B,CACE,CACF"}
+{"version":3,"file":"index19.cjs","sources":["../src/pen/GradualRenderer.js"],"sourcesContent":["import StrokeDrawer from './StrokeDrawer.js';\n\n/**\n * GradualRenderer - Progressive stroke rendering synced to timeline\n *\n * Renders stroke commands with progressive reveal based on current\n * audio/video timeline position.\n *\n * Features:\n * - Progressive stroke reveal synced to audio timeline\n * - High-DPI canvas support for crisp rendering\n * - Efficient single-pass render per timeline update\n * - Accepts timing in seconds (start/end fields)\n *\n * @example\n * const renderer = new GradualRenderer(canvas, { width: 800, height: 600 });\n * renderer.setStrokeCommands(commands);\n * renderer.setTime(1.5);  // seconds\n * renderer.render();\n */\nclass GradualRenderer {\n  /**\n   * Creates a new GradualRenderer instance\n   *\n   * @param {HTMLCanvasElement} canvas - Canvas element for rendering\n   * @param {Object} pdfDimensions - PDF page dimensions\n   * @param {number} pdfDimensions.width - Page width in pixels\n   * @param {number} pdfDimensions.height - Page height in pixels\n   */\n  constructor(canvas, pdfDimensions) {\n    this.canvas = canvas;\n    this.dimensions = { ...pdfDimensions };\n    this.ctx = null;\n    this.strokeDrawer = null;\n    this.strokeCommands = [];\n    this.currentTime = 0; // seconds\n    this.isDestroyed = false;\n\n    this._setupCanvas();\n  }\n\n  /**\n   * Configures canvas for high-DPI rendering\n   *\n   * @private\n   */\n  _setupCanvas() {\n    const dpr = window.devicePixelRatio || 1;\n    const { width, height } = this.dimensions;\n\n    // Set canvas buffer resolution (high-res)\n    this.canvas.width = Math.round(width * dpr);\n    this.canvas.height = Math.round(height * dpr);\n\n    // Set canvas display size (CSS)\n    this.canvas.style.width = `${width}px`;\n    this.canvas.style.height = `${height}px`;\n\n    // Get context and scale for DPR\n    this.ctx = this.canvas.getContext('2d');\n    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n    // Create stroke drawer\n    this.strokeDrawer = new StrokeDrawer(this.ctx, this.dimensions);\n  }\n\n  /**\n   * Sets the stroke commands to render\n   *\n   * @param {Array} commands - Array of stroke command objects\n   * @param {string} commands[].id - Unique stroke identifier\n   * @param {Array} commands[].points - [[x, y], ...] normalized coordinates\n   * @param {string} commands[].color - Stroke color\n   * @param {number} commands[].width - Stroke width in pixels\n   * @param {number} commands[].start - Start time in seconds\n   * @param {number} commands[].end - End time in seconds\n   */\n  setStrokeCommands(commands) {\n    if (this.isDestroyed) return;\n\n    this.strokeCommands = commands || [];\n\n    // Sort by start time for efficient rendering\n    this.strokeCommands.sort((a, b) => {\n      const startA = a.start ?? 0;\n      const startB = b.start ?? 0;\n      return startA - startB;\n    });\n  }\n\n  /**\n   * Sets the current timeline position\n   *\n   * @param {number} time - Current time in seconds\n   */\n  setTime(time) {\n    if (this.isDestroyed) return;\n    this.currentTime = time;\n  }\n\n  /**\n   * Updates dimensions when viewport changes\n   *\n   * @param {Object} dimensions - New dimensions\n   * @param {number} dimensions.width - Width in pixels\n   * @param {number} dimensions.height - Height in pixels\n   */\n  setDimensions(dimensions) {\n    if (this.isDestroyed) return;\n\n    this.dimensions = { ...dimensions };\n    this._setupCanvas();\n  }\n\n  /**\n   * Renders all visible strokes at current timeline position\n   *\n   * Called once per timeline update. Clears canvas and redraws\n   * all strokes with appropriate progress.\n   */\n  render() {\n    if (this.isDestroyed || !this.ctx) return;\n\n    // Clear canvas\n    this.strokeDrawer.clear();\n\n    // Draw each stroke based on timing\n    for (const stroke of this.strokeCommands) {\n      const start = stroke.start ?? 0;\n      const end = stroke.end ?? start + 1;\n\n      // Skip strokes that haven't started\n      if (this.currentTime < start) {\n        continue;\n      }\n\n      // Calculate progress\n      const progress = this._calculateProgress(start, end);\n\n      // Draw stroke with progress\n      this.strokeDrawer.drawStroke(stroke, progress);\n    }\n  }\n\n  /**\n   * Calculates stroke progress based on timing\n   *\n   * @private\n   * @param {number} start - Stroke start time in seconds\n   * @param {number} end - Stroke end time in seconds\n   * @returns {number} Progress from 0 to 1\n   */\n  _calculateProgress(start, end) {\n    if (this.currentTime >= end) {\n      return 1.0;  // Fully visible\n    }\n\n    const duration = end - start;\n    if (duration <= 0) return 1.0;\n\n    const elapsed = this.currentTime - start;\n    return Math.max(0, Math.min(1, elapsed / duration));\n  }\n\n  /**\n   * Clears the canvas\n   */\n  clear() {\n    if (this.isDestroyed || !this.strokeDrawer) return;\n    this.strokeDrawer.clear();\n  }\n\n  /**\n   * Gets visible stroke count at current time\n   *\n   * @returns {number} Number of visible strokes\n   */\n  getVisibleStrokeCount() {\n    let count = 0;\n    for (const stroke of this.strokeCommands) {\n      const start = stroke.start ?? 0;\n      if (this.currentTime >= start) {\n        count++;\n      }\n    }\n    return count;\n  }\n\n  /**\n   * Destroys the renderer and releases resources\n   */\n  destroy() {\n    if (this.isDestroyed) return;\n\n    this.strokeCommands = [];\n    this.strokeDrawer = null;\n    this.ctx = null;\n    this.canvas = null;\n    this.isDestroyed = true;\n  }\n}\n\nexport default GradualRenderer;\n"],"names":["GradualRenderer","canvas","pdfDimensions","dpr","width","height","StrokeDrawer","commands","a","b","startA","startB","time","dimensions","stroke","start","end","progress","duration","elapsed","count"],"mappings":"6IAoBA,MAAMA,CAAgB,CASpB,YAAYC,EAAQC,EAAe,CACjC,KAAK,OAASD,EACd,KAAK,WAAa,CAAE,GAAGC,CAAa,EACpC,KAAK,IAAM,KACX,KAAK,aAAe,KACpB,KAAK,eAAiB,CAAA,EACtB,KAAK,YAAc,EACnB,KAAK,YAAc,GAEnB,KAAK,aAAY,CACnB,CAOA,cAAe,CACb,MAAMC,EAAM,OAAO,kBAAoB,EACjC,CAAE,MAAAC,EAAO,OAAAC,CAAM,EAAK,KAAK,WAG/B,KAAK,OAAO,MAAQ,KAAK,MAAMD,EAAQD,CAAG,EAC1C,KAAK,OAAO,OAAS,KAAK,MAAME,EAASF,CAAG,EAG5C,KAAK,OAAO,MAAM,MAAQ,GAAGC,CAAK,KAClC,KAAK,OAAO,MAAM,OAAS,GAAGC,CAAM,KAGpC,KAAK,IAAM,KAAK,OAAO,WAAW,IAAI,EACtC,KAAK,IAAI,aAAaF,EAAK,EAAG,EAAGA,EAAK,EAAG,CAAC,EAG1C,KAAK,aAAe,IAAIG,EAAAA,QAAa,KAAK,IAAK,KAAK,UAAU,CAChE,CAaA,kBAAkBC,EAAU,CACtB,KAAK,cAET,KAAK,eAAiBA,GAAY,CAAA,EAGlC,KAAK,eAAe,KAAK,CAACC,EAAGC,IAAM,CACjC,MAAMC,EAASF,EAAE,OAAS,EACpBG,EAASF,EAAE,OAAS,EAC1B,OAAOC,EAASC,CAClB,CAAC,EACH,CAOA,QAAQC,EAAM,CACR,KAAK,cACT,KAAK,YAAcA,EACrB,CASA,cAAcC,EAAY,CACpB,KAAK,cAET,KAAK,WAAa,CAAE,GAAGA,CAAU,EACjC,KAAK,aAAY,EACnB,CAQA,QAAS,CACP,GAAI,OAAK,aAAe,CAAC,KAAK,KAG9B,MAAK,aAAa,MAAK,EAGvB,UAAWC,KAAU,KAAK,eAAgB,CACxC,MAAMC,EAAQD,EAAO,OAAS,EACxBE,EAAMF,EAAO,KAAOC,EAAQ,EAGlC,GAAI,KAAK,YAAcA,EACrB,SAIF,MAAME,EAAW,KAAK,mBAAmBF,EAAOC,CAAG,EAGnD,KAAK,aAAa,WAAWF,EAAQG,CAAQ,CAC/C,EACF,CAUA,mBAAmBF,EAAOC,EAAK,CAC7B,GAAI,KAAK,aAAeA,EACtB,MAAO,GAGT,MAAME,EAAWF,EAAMD,EACvB,GAAIG,GAAY,EAAG,MAAO,GAE1B,MAAMC,EAAU,KAAK,YAAcJ,EACnC,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGI,EAAUD,CAAQ,CAAC,CACpD,CAKA,OAAQ,CACF,KAAK,aAAe,CAAC,KAAK,cAC9B,KAAK,aAAa,MAAK,CACzB,CAOA,uBAAwB,CACtB,IAAIE,EAAQ,EACZ,UAAWN,KAAU,KAAK,eAAgB,CACxC,MAAMC,EAAQD,EAAO,OAAS,EAC1B,KAAK,aAAeC,GACtBK,GAEJ,CACA,OAAOA,CACT,CAKA,SAAU,CACJ,KAAK,cAET,KAAK,eAAiB,CAAA,EACtB,KAAK,aAAe,KACpB,KAAK,IAAM,KACX,KAAK,OAAS,KACd,KAAK,YAAc,GACrB,CACF"}

package/dist/index19.js

@@ -1,107 +1,121 @@
-class w {
+import n from "./index20.js";
+class h {
   /**
-   * Creates a new StrokeDrawer instance
+   * Creates a new GradualRenderer instance
    *
-   * @param {CanvasRenderingContext2D} ctx - Canvas 2D rendering context
-   * @param {Object} viewport - Viewport dimensions for coordinate conversion
-   * @param {number} viewport.width - Viewport width in pixels
-   * @param {number} viewport.height - Viewport height in pixels
+   * @param {HTMLCanvasElement} canvas - Canvas element for rendering
+   * @param {Object} pdfDimensions - PDF page dimensions
+   * @param {number} pdfDimensions.width - Page width in pixels
+   * @param {number} pdfDimensions.height - Page height in pixels
    */
-  constructor(t, o) {
-    this.ctx = t, this.viewport = o;
+  constructor(t, s) {
+    this.canvas = t, this.dimensions = { ...s }, this.ctx = null, this.strokeDrawer = null, this.strokeCommands = [], this.currentTime = 0, this.isDestroyed = !1, this._setupCanvas();
   }
   /**
-   * Updates the viewport dimensions
+   * Configures canvas for high-DPI rendering
    *
-   * @param {Object} viewport - New viewport dimensions
+   * @private
    */
-  setViewport(t) {
-    this.viewport = t;
+  _setupCanvas() {
+    const t = window.devicePixelRatio || 1, { width: s, height: e } = this.dimensions;
+    this.canvas.width = Math.round(s * t), this.canvas.height = Math.round(e * t), this.canvas.style.width = `${s}px`, this.canvas.style.height = `${e}px`, this.ctx = this.canvas.getContext("2d"), this.ctx.setTransform(t, 0, 0, t, 0, 0), this.strokeDrawer = new n(this.ctx, this.dimensions);
   }
   /**
-   * Draws a stroke with optional progress for progressive reveal
+   * Sets the stroke commands to render
    *
-   * @param {Object} stroke - Stroke command object
-   * @param {Array} stroke.points - Array of [x, y] normalized coordinates
-   * @param {string} stroke.color - Stroke color (CSS color string)
-   * @param {number} stroke.width - Base stroke width in pixels
-   * @param {Array} [stroke.pressures] - Optional pressure values for variable width
-   * @param {number} [progress=1.0] - Progress from 0 to 1 (for progressive reveal)
+   * @param {Array} commands - Array of stroke command objects
+   * @param {string} commands[].id - Unique stroke identifier
+   * @param {Array} commands[].points - [[x, y], ...] normalized coordinates
+   * @param {string} commands[].color - Stroke color
+   * @param {number} commands[].width - Stroke width in pixels
+   * @param {number} commands[].start - Start time in seconds
+   * @param {number} commands[].end - End time in seconds
    */
-  drawStroke(t, o = 1) {
-    const { points: i, color: e, width: s, pressures: h } = t;
-    if (!i || i.length < 2) return;
-    const n = Math.max(2, Math.floor(i.length * o)), r = i.slice(0, n);
-    this.ctx.strokeStyle = e || "rgba(0, 0, 0, 0.5)", this.ctx.lineCap = "round", this.ctx.lineJoin = "round", h && h.length >= r.length ? this._drawVariableWidthStroke(r, s, h.slice(0, n)) : this._drawConstantWidthStroke(r, s);
+  setStrokeCommands(t) {
+    this.isDestroyed || (this.strokeCommands = t || [], this.strokeCommands.sort((s, e) => {
+      const r = s.start ?? 0, i = e.start ?? 0;
+      return r - i;
+    }));
   }
   /**
-   * Draws a stroke with constant width
+   * Sets the current timeline position
    *
-   * @private
-   * @param {Array} points - Array of [x, y] normalized coordinates
-   * @param {number} width - Stroke width in pixels
+   * @param {number} time - Current time in seconds
    */
-  _drawConstantWidthStroke(t, o) {
-    this.ctx.lineWidth = o || 2, this.ctx.beginPath();
-    for (let i = 0; i < t.length; i++) {
-      const [e, s] = this._normalizedToPixel(t[i]);
-      i === 0 ? this.ctx.moveTo(e, s) : this.ctx.lineTo(e, s);
-    }
-    this.ctx.stroke();
+  setTime(t) {
+    this.isDestroyed || (this.currentTime = t);
   }
   /**
-   * Draws a stroke with variable width based on pressure
+   * Updates dimensions when viewport changes
    *
-   * Uses multiple line segments with varying widths for natural pen feel.
+   * @param {Object} dimensions - New dimensions
+   * @param {number} dimensions.width - Width in pixels
+   * @param {number} dimensions.height - Height in pixels
+   */
+  setDimensions(t) {
+    this.isDestroyed || (this.dimensions = { ...t }, this._setupCanvas());
+  }
+  /**
+   * Renders all visible strokes at current timeline position
    *
-   * @private
-   * @param {Array} points - Array of [x, y] normalized coordinates
-   * @param {number} baseWidth - Base stroke width in pixels
-   * @param {Array} pressures - Pressure values (0-1) for each point
+   * Called once per timeline update. Clears canvas and redraws
+   * all strokes with appropriate progress.
    */
-  _drawVariableWidthStroke(t, o, i) {
-    for (let e = 1; e < t.length; e++) {
-      const [s, h] = this._normalizedToPixel(t[e - 1]), [n, r] = this._normalizedToPixel(t[e]), l = i[e - 1] || 1, c = i[e] || 1, a = (l + c) / 2, x = Math.max(0.5, o * a);
-      this.ctx.lineWidth = x, this.ctx.beginPath(), this.ctx.moveTo(s, h), this.ctx.lineTo(n, r), this.ctx.stroke();
+  render() {
+    if (!(this.isDestroyed || !this.ctx)) {
+      this.strokeDrawer.clear();
+      for (const t of this.strokeCommands) {
+        const s = t.start ?? 0, e = t.end ?? s + 1;
+        if (this.currentTime < s)
+          continue;
+        const r = this._calculateProgress(s, e);
+        this.strokeDrawer.drawStroke(t, r);
+      }
     }
   }
   /**
-   * Draws a single point (dot)
+   * Calculates stroke progress based on timing
    *
-   * Useful for single-point strokes or debugging.
-   *
-   * @param {number} x - Normalized x coordinate (0-1)
-   * @param {number} y - Normalized y coordinate (0-1)
-   * @param {number} radius - Dot radius in pixels
-   * @param {string} color - Fill color
+   * @private
+   * @param {number} start - Stroke start time in seconds
+   * @param {number} end - Stroke end time in seconds
+   * @returns {number} Progress from 0 to 1
    */
-  drawPoint(t, o, i, e) {
-    const [s, h] = this._normalizedToPixel([t, o]);
-    this.ctx.fillStyle = e || "rgba(0, 0, 0, 0.5)", this.ctx.beginPath(), this.ctx.arc(s, h, i, 0, Math.PI * 2), this.ctx.fill();
+  _calculateProgress(t, s) {
+    if (this.currentTime >= s)
+      return 1;
+    const e = s - t;
+    if (e <= 0) return 1;
+    const r = this.currentTime - t;
+    return Math.max(0, Math.min(1, r / e));
   }
   /**
-   * Clears the entire canvas
+   * Clears the canvas
    */
   clear() {
-    const t = window.devicePixelRatio || 1;
-    this.ctx.clearRect(0, 0, this.viewport.width * t, this.viewport.height * t);
+    this.isDestroyed || !this.strokeDrawer || this.strokeDrawer.clear();
   }
   /**
-   * Converts normalized coordinates (0-1) to pixel coordinates
+   * Gets visible stroke count at current time
    *
-   * @private
-   * @param {Array} point - [x, y] normalized coordinates
-   * @returns {Array} [x, y] pixel coordinates
+   * @returns {number} Number of visible strokes
+   */
+  getVisibleStrokeCount() {
+    let t = 0;
+    for (const s of this.strokeCommands) {
+      const e = s.start ?? 0;
+      this.currentTime >= e && t++;
+    }
+    return t;
+  }
+  /**
+   * Destroys the renderer and releases resources
    */
-  _normalizedToPixel(t) {
-    const [o, i] = t;
-    return [
-      o * this.viewport.width,
-      i * this.viewport.height
-    ];
+  destroy() {
+    this.isDestroyed || (this.strokeCommands = [], this.strokeDrawer = null, this.ctx = null, this.canvas = null, this.isDestroyed = !0);
   }
 }
 export {
-  w as default
+  h as default
 };
 //# sourceMappingURL=index19.js.map

package/dist/index19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index19.js","sources":["../src/pen/StrokeDrawer.js"],"sourcesContent":["/**\n * StrokeDrawer - Low-level canvas stroke drawing utilities\n *\n * Handles the actual drawing of strokes on canvas with support for:\n * - Progressive stroke reveal (partial drawing based on progress)\n * - Normalized to pixel coordinate conversion\n * - Variable width based on pressure data\n * - Smooth line rendering with round caps/joins\n */\nclass StrokeDrawer {\n  /**\n   * Creates a new StrokeDrawer instance\n   *\n   * @param {CanvasRenderingContext2D} ctx - Canvas 2D rendering context\n   * @param {Object} viewport - Viewport dimensions for coordinate conversion\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   */\n  constructor(ctx, viewport) {\n    this.ctx = ctx;\n    this.viewport = viewport;\n  }\n\n  /**\n   * Updates the viewport dimensions\n   *\n   * @param {Object} viewport - New viewport dimensions\n   */\n  setViewport(viewport) {\n    this.viewport = viewport;\n  }\n\n  /**\n   * Draws a stroke with optional progress for progressive reveal\n   *\n   * @param {Object} stroke - Stroke command object\n   * @param {Array} stroke.points - Array of [x, y] normalized coordinates\n   * @param {string} stroke.color - Stroke color (CSS color string)\n   * @param {number} stroke.width - Base stroke width in pixels\n   * @param {Array} [stroke.pressures] - Optional pressure values for variable width\n   * @param {number} [progress=1.0] - Progress from 0 to 1 (for progressive reveal)\n   */\n  drawStroke(stroke, progress = 1.0) {\n    const { points, color, width, pressures } = stroke;\n\n    if (!points || points.length < 2) return;\n\n    // Calculate how many points to draw based on progress\n    const pointCount = Math.max(2, Math.floor(points.length * progress));\n    const visiblePoints = points.slice(0, pointCount);\n\n    // Configure stroke style\n    this.ctx.strokeStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.lineCap = 'round';\n    this.ctx.lineJoin = 'round';\n\n    // Draw with variable width if pressures provided\n    if (pressures && pressures.length >= visiblePoints.length) {\n      this._drawVariableWidthStroke(visiblePoints, width, pressures.slice(0, pointCount));\n    } else {\n      this._drawConstantWidthStroke(visiblePoints, width);\n    }\n  }\n\n  /**\n   * Draws a stroke with constant width\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} width - Stroke width in pixels\n   */\n  _drawConstantWidthStroke(points, width) {\n    this.ctx.lineWidth = width || 2;\n    this.ctx.beginPath();\n\n    for (let i = 0; i < points.length; i++) {\n      const [px, py] = this._normalizedToPixel(points[i]);\n\n      if (i === 0) {\n        this.ctx.moveTo(px, py);\n      } else {\n        this.ctx.lineTo(px, py);\n      }\n    }\n\n    this.ctx.stroke();\n  }\n\n  /**\n   * Draws a stroke with variable width based on pressure\n   *\n   * Uses multiple line segments with varying widths for natural pen feel.\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} baseWidth - Base stroke width in pixels\n   * @param {Array} pressures - Pressure values (0-1) for each point\n   */\n  _drawVariableWidthStroke(points, baseWidth, pressures) {\n    for (let i = 1; i < points.length; i++) {\n      const [x1, y1] = this._normalizedToPixel(points[i - 1]);\n      const [x2, y2] = this._normalizedToPixel(points[i]);\n\n      // Average pressure between two points\n      const p1 = pressures[i - 1] || 1;\n      const p2 = pressures[i] || 1;\n      const avgPressure = (p1 + p2) / 2;\n\n      // Apply pressure to width (min 0.5, max 2x base width)\n      const width = Math.max(0.5, baseWidth * avgPressure);\n\n      this.ctx.lineWidth = width;\n      this.ctx.beginPath();\n      this.ctx.moveTo(x1, y1);\n      this.ctx.lineTo(x2, y2);\n      this.ctx.stroke();\n    }\n  }\n\n  /**\n   * Draws a single point (dot)\n   *\n   * Useful for single-point strokes or debugging.\n   *\n   * @param {number} x - Normalized x coordinate (0-1)\n   * @param {number} y - Normalized y coordinate (0-1)\n   * @param {number} radius - Dot radius in pixels\n   * @param {string} color - Fill color\n   */\n  drawPoint(x, y, radius, color) {\n    const [px, py] = this._normalizedToPixel([x, y]);\n\n    this.ctx.fillStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.beginPath();\n    this.ctx.arc(px, py, radius, 0, Math.PI * 2);\n    this.ctx.fill();\n  }\n\n  /**\n   * Clears the entire canvas\n   */\n  clear() {\n    const dpr = window.devicePixelRatio || 1;\n    this.ctx.clearRect(0, 0, this.viewport.width * dpr, this.viewport.height * dpr);\n  }\n\n  /**\n   * Converts normalized coordinates (0-1) to pixel coordinates\n   *\n   * @private\n   * @param {Array} point - [x, y] normalized coordinates\n   * @returns {Array} [x, y] pixel coordinates\n   */\n  _normalizedToPixel(point) {\n    const [normX, normY] = point;\n    return [\n      normX * this.viewport.width,\n      normY * this.viewport.height\n    ];\n  }\n}\n\nexport default StrokeDrawer;\n"],"names":["StrokeDrawer","ctx","viewport","stroke","progress","points","color","width","pressures","pointCount","visiblePoints","px","py","baseWidth","i","x1","y1","x2","y2","p1","p2","avgPressure","x","y","radius","dpr","point","normX","normY"],"mappings":"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"}
+{"version":3,"file":"index19.js","sources":["../src/pen/GradualRenderer.js"],"sourcesContent":["import StrokeDrawer from './StrokeDrawer.js';\n\n/**\n * GradualRenderer - Progressive stroke rendering synced to timeline\n *\n * Renders stroke commands with progressive reveal based on current\n * audio/video timeline position.\n *\n * Features:\n * - Progressive stroke reveal synced to audio timeline\n * - High-DPI canvas support for crisp rendering\n * - Efficient single-pass render per timeline update\n * - Accepts timing in seconds (start/end fields)\n *\n * @example\n * const renderer = new GradualRenderer(canvas, { width: 800, height: 600 });\n * renderer.setStrokeCommands(commands);\n * renderer.setTime(1.5);  // seconds\n * renderer.render();\n */\nclass GradualRenderer {\n  /**\n   * Creates a new GradualRenderer instance\n   *\n   * @param {HTMLCanvasElement} canvas - Canvas element for rendering\n   * @param {Object} pdfDimensions - PDF page dimensions\n   * @param {number} pdfDimensions.width - Page width in pixels\n   * @param {number} pdfDimensions.height - Page height in pixels\n   */\n  constructor(canvas, pdfDimensions) {\n    this.canvas = canvas;\n    this.dimensions = { ...pdfDimensions };\n    this.ctx = null;\n    this.strokeDrawer = null;\n    this.strokeCommands = [];\n    this.currentTime = 0; // seconds\n    this.isDestroyed = false;\n\n    this._setupCanvas();\n  }\n\n  /**\n   * Configures canvas for high-DPI rendering\n   *\n   * @private\n   */\n  _setupCanvas() {\n    const dpr = window.devicePixelRatio || 1;\n    const { width, height } = this.dimensions;\n\n    // Set canvas buffer resolution (high-res)\n    this.canvas.width = Math.round(width * dpr);\n    this.canvas.height = Math.round(height * dpr);\n\n    // Set canvas display size (CSS)\n    this.canvas.style.width = `${width}px`;\n    this.canvas.style.height = `${height}px`;\n\n    // Get context and scale for DPR\n    this.ctx = this.canvas.getContext('2d');\n    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n    // Create stroke drawer\n    this.strokeDrawer = new StrokeDrawer(this.ctx, this.dimensions);\n  }\n\n  /**\n   * Sets the stroke commands to render\n   *\n   * @param {Array} commands - Array of stroke command objects\n   * @param {string} commands[].id - Unique stroke identifier\n   * @param {Array} commands[].points - [[x, y], ...] normalized coordinates\n   * @param {string} commands[].color - Stroke color\n   * @param {number} commands[].width - Stroke width in pixels\n   * @param {number} commands[].start - Start time in seconds\n   * @param {number} commands[].end - End time in seconds\n   */\n  setStrokeCommands(commands) {\n    if (this.isDestroyed) return;\n\n    this.strokeCommands = commands || [];\n\n    // Sort by start time for efficient rendering\n    this.strokeCommands.sort((a, b) => {\n      const startA = a.start ?? 0;\n      const startB = b.start ?? 0;\n      return startA - startB;\n    });\n  }\n\n  /**\n   * Sets the current timeline position\n   *\n   * @param {number} time - Current time in seconds\n   */\n  setTime(time) {\n    if (this.isDestroyed) return;\n    this.currentTime = time;\n  }\n\n  /**\n   * Updates dimensions when viewport changes\n   *\n   * @param {Object} dimensions - New dimensions\n   * @param {number} dimensions.width - Width in pixels\n   * @param {number} dimensions.height - Height in pixels\n   */\n  setDimensions(dimensions) {\n    if (this.isDestroyed) return;\n\n    this.dimensions = { ...dimensions };\n    this._setupCanvas();\n  }\n\n  /**\n   * Renders all visible strokes at current timeline position\n   *\n   * Called once per timeline update. Clears canvas and redraws\n   * all strokes with appropriate progress.\n   */\n  render() {\n    if (this.isDestroyed || !this.ctx) return;\n\n    // Clear canvas\n    this.strokeDrawer.clear();\n\n    // Draw each stroke based on timing\n    for (const stroke of this.strokeCommands) {\n      const start = stroke.start ?? 0;\n      const end = stroke.end ?? start + 1;\n\n      // Skip strokes that haven't started\n      if (this.currentTime < start) {\n        continue;\n      }\n\n      // Calculate progress\n      const progress = this._calculateProgress(start, end);\n\n      // Draw stroke with progress\n      this.strokeDrawer.drawStroke(stroke, progress);\n    }\n  }\n\n  /**\n   * Calculates stroke progress based on timing\n   *\n   * @private\n   * @param {number} start - Stroke start time in seconds\n   * @param {number} end - Stroke end time in seconds\n   * @returns {number} Progress from 0 to 1\n   */\n  _calculateProgress(start, end) {\n    if (this.currentTime >= end) {\n      return 1.0;  // Fully visible\n    }\n\n    const duration = end - start;\n    if (duration <= 0) return 1.0;\n\n    const elapsed = this.currentTime - start;\n    return Math.max(0, Math.min(1, elapsed / duration));\n  }\n\n  /**\n   * Clears the canvas\n   */\n  clear() {\n    if (this.isDestroyed || !this.strokeDrawer) return;\n    this.strokeDrawer.clear();\n  }\n\n  /**\n   * Gets visible stroke count at current time\n   *\n   * @returns {number} Number of visible strokes\n   */\n  getVisibleStrokeCount() {\n    let count = 0;\n    for (const stroke of this.strokeCommands) {\n      const start = stroke.start ?? 0;\n      if (this.currentTime >= start) {\n        count++;\n      }\n    }\n    return count;\n  }\n\n  /**\n   * Destroys the renderer and releases resources\n   */\n  destroy() {\n    if (this.isDestroyed) return;\n\n    this.strokeCommands = [];\n    this.strokeDrawer = null;\n    this.ctx = null;\n    this.canvas = null;\n    this.isDestroyed = true;\n  }\n}\n\nexport default GradualRenderer;\n"],"names":["GradualRenderer","canvas","pdfDimensions","dpr","width","height","StrokeDrawer","commands","a","b","startA","startB","time","dimensions","stroke","start","end","progress","duration","elapsed","count"],"mappings":"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"}

package/dist/index20.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={highlight:{color:"rgba(255, 255, 0, 0.3)",width:24},text:{color:"rgba(220, 20, 60, 1.0)",width:2},underline:{color:"rgba(0, 80, 255, 1.0)",width:2},arrow:{color:"rgba(220, 30, 30, 1.0)",width:2},circle:{color:"rgba(255, 140, 0, 1.0)",width:3}},e={highlight:{color:"rgba(100, 149, 237, 0.35)",width:24},text:{color:"rgba(30, 64, 175, 1.0)",width:2},underline:{color:"rgba(30, 64, 175, 1.0)",width:2},arrow:{color:"rgba(30, 64, 175, 1.0)",width:2},circle:{color:"rgba(30, 64, 175, 1.0)",width:3}},o={highlight:{color:"rgba(156, 163, 175, 0.25)",width:20},text:{color:"rgba(75, 85, 99, 1.0)",width:1.5},underline:{color:"rgba(75, 85, 99, 1.0)",width:1.5},arrow:{color:"rgba(75, 85, 99, 1.0)",width:1.5},circle:{color:"rgba(75, 85, 99, 1.0)",width:2}},r={default:t,blue:e,minimal:o};function l(i){return r[i]||r.default}function c(){return Object.keys(r)}exports.BLUE_PRESET=e;exports.DEFAULT_PRESET=t;exports.MINIMAL_PRESET=o;exports.default=r;exports.getPreset=l;exports.getPresetNames=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class d{constructor(t,o){this.ctx=t,this.viewport=o}setViewport(t){this.viewport=t}drawStroke(t,o=1){const{points:i,color:e,width:s,pressures:h}=t;if(!i||i.length<2)return;const n=Math.max(2,Math.floor(i.length*o)),r=i.slice(0,n);this.ctx.strokeStyle=e||"rgba(0, 0, 0, 0.5)",this.ctx.lineCap="round",this.ctx.lineJoin="round",h&&h.length>=r.length?this._drawVariableWidthStroke(r,s,h.slice(0,n)):this._drawConstantWidthStroke(r,s)}_drawConstantWidthStroke(t,o){this.ctx.lineWidth=o||2,this.ctx.beginPath();for(let i=0;i<t.length;i++){const[e,s]=this._normalizedToPixel(t[i]);i===0?this.ctx.moveTo(e,s):this.ctx.lineTo(e,s)}this.ctx.stroke()}_drawVariableWidthStroke(t,o,i){for(let e=1;e<t.length;e++){const[s,h]=this._normalizedToPixel(t[e-1]),[n,r]=this._normalizedToPixel(t[e]),l=i[e-1]||1,c=i[e]||1,a=(l+c)/2,x=Math.max(.5,o*a);this.ctx.lineWidth=x,this.ctx.beginPath(),this.ctx.moveTo(s,h),this.ctx.lineTo(n,r),this.ctx.stroke()}}drawPoint(t,o,i,e){const[s,h]=this._normalizedToPixel([t,o]);this.ctx.fillStyle=e||"rgba(0, 0, 0, 0.5)",this.ctx.beginPath(),this.ctx.arc(s,h,i,0,Math.PI*2),this.ctx.fill()}clear(){const t=window.devicePixelRatio||1;this.ctx.clearRect(0,0,this.viewport.width*t,this.viewport.height*t)}_normalizedToPixel(t){const[o,i]=t;return[o*this.viewport.width,i*this.viewport.height]}}exports.default=d;
 //# sourceMappingURL=index20.cjs.map

package/dist/index20.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index20.cjs","sources":["../src/pen/presets.js"],"sourcesContent":["/**\n * Client-side style presets for Digital Pen\n *\n * These presets use the same format as StrokeRenderer.setConfig().\n * Keys match annotation types: highlight, text, underline, arrow, circle.\n */\n\n/**\n * Default preset - Yellow highlights, crimson text\n */\nexport const DEFAULT_PRESET = {\n  highlight: {\n    color: 'rgba(255, 255, 0, 0.3)',\n    width: 24\n  },\n  text: {\n    color: 'rgba(220, 20, 60, 1.0)',\n    width: 2\n  },\n  underline: {\n    color: 'rgba(0, 80, 255, 1.0)',\n    width: 2\n  },\n  arrow: {\n    color: 'rgba(220, 30, 30, 1.0)',\n    width: 2\n  },\n  circle: {\n    color: 'rgba(255, 140, 0, 1.0)',\n    width: 3\n  }\n};\n\n/**\n * Blue preset - Blue theme\n */\nexport const BLUE_PRESET = {\n  highlight: {\n    color: 'rgba(100, 149, 237, 0.35)',\n    width: 24\n  },\n  text: {\n    color: 'rgba(30, 64, 175, 1.0)',\n    width: 2\n  },\n  underline: {\n    color: 'rgba(30, 64, 175, 1.0)',\n    width: 2\n  },\n  arrow: {\n    color: 'rgba(30, 64, 175, 1.0)',\n    width: 2\n  },\n  circle: {\n    color: 'rgba(30, 64, 175, 1.0)',\n    width: 3\n  }\n};\n\n/**\n * Minimal preset - Subtle gray\n */\nexport const MINIMAL_PRESET = {\n  highlight: {\n    color: 'rgba(156, 163, 175, 0.25)',\n    width: 20\n  },\n  text: {\n    color: 'rgba(75, 85, 99, 1.0)',\n    width: 1.5\n  },\n  underline: {\n    color: 'rgba(75, 85, 99, 1.0)',\n    width: 1.5\n  },\n  arrow: {\n    color: 'rgba(75, 85, 99, 1.0)',\n    width: 1.5\n  },\n  circle: {\n    color: 'rgba(75, 85, 99, 1.0)',\n    width: 2\n  }\n};\n\n/**\n * Preset registry\n */\nconst PRESETS = {\n  default: DEFAULT_PRESET,\n  blue: BLUE_PRESET,\n  minimal: MINIMAL_PRESET\n};\n\n/**\n * Get a preset by name\n *\n * @param {string} name - Preset name\n * @returns {Object} Preset configuration\n */\nexport function getPreset(name) {\n  return PRESETS[name] || PRESETS.default;\n}\n\n/**\n * Get all available preset names\n *\n * @returns {string[]} Array of preset names\n */\nexport function getPresetNames() {\n  return Object.keys(PRESETS);\n}\n\nexport default PRESETS;\n"],"names":["DEFAULT_PRESET","BLUE_PRESET","MINIMAL_PRESET","PRESETS","getPreset","name","getPresetNames"],"mappings":"4GAUY,MAACA,EAAiB,CAC5B,UAAW,CACT,MAAO,yBACP,MAAO,EACX,EACE,KAAM,CACJ,MAAO,yBACP,MAAO,CACX,EACE,UAAW,CACT,MAAO,wBACP,MAAO,CACX,EACE,MAAO,CACL,MAAO,yBACP,MAAO,CACX,EACE,OAAQ,CACN,MAAO,yBACP,MAAO,CACX,CACA,EAKaC,EAAc,CACzB,UAAW,CACT,MAAO,4BACP,MAAO,EACX,EACE,KAAM,CACJ,MAAO,yBACP,MAAO,CACX,EACE,UAAW,CACT,MAAO,yBACP,MAAO,CACX,EACE,MAAO,CACL,MAAO,yBACP,MAAO,CACX,EACE,OAAQ,CACN,MAAO,yBACP,MAAO,CACX,CACA,EAKaC,EAAiB,CAC5B,UAAW,CACT,MAAO,4BACP,MAAO,EACX,EACE,KAAM,CACJ,MAAO,wBACP,MAAO,GACX,EACE,UAAW,CACT,MAAO,wBACP,MAAO,GACX,EACE,MAAO,CACL,MAAO,wBACP,MAAO,GACX,EACE,OAAQ,CACN,MAAO,wBACP,MAAO,CACX,CACA,EAKMC,EAAU,CACd,QAASH,EACT,KAAMC,EACN,QAASC,CACX,EAQO,SAASE,EAAUC,EAAM,CAC9B,OAAOF,EAAQE,CAAI,GAAKF,EAAQ,OAClC,CAOO,SAASG,GAAiB,CAC/B,OAAO,OAAO,KAAKH,CAAO,CAC5B"}
+{"version":3,"file":"index20.cjs","sources":["../src/pen/StrokeDrawer.js"],"sourcesContent":["/**\n * StrokeDrawer - Low-level canvas stroke drawing utilities\n *\n * Handles the actual drawing of strokes on canvas with support for:\n * - Progressive stroke reveal (partial drawing based on progress)\n * - Normalized to pixel coordinate conversion\n * - Variable width based on pressure data\n * - Smooth line rendering with round caps/joins\n */\nclass StrokeDrawer {\n  /**\n   * Creates a new StrokeDrawer instance\n   *\n   * @param {CanvasRenderingContext2D} ctx - Canvas 2D rendering context\n   * @param {Object} viewport - Viewport dimensions for coordinate conversion\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   */\n  constructor(ctx, viewport) {\n    this.ctx = ctx;\n    this.viewport = viewport;\n  }\n\n  /**\n   * Updates the viewport dimensions\n   *\n   * @param {Object} viewport - New viewport dimensions\n   */\n  setViewport(viewport) {\n    this.viewport = viewport;\n  }\n\n  /**\n   * Draws a stroke with optional progress for progressive reveal\n   *\n   * @param {Object} stroke - Stroke command object\n   * @param {Array} stroke.points - Array of [x, y] normalized coordinates\n   * @param {string} stroke.color - Stroke color (CSS color string)\n   * @param {number} stroke.width - Base stroke width in pixels\n   * @param {Array} [stroke.pressures] - Optional pressure values for variable width\n   * @param {number} [progress=1.0] - Progress from 0 to 1 (for progressive reveal)\n   */\n  drawStroke(stroke, progress = 1.0) {\n    const { points, color, width, pressures } = stroke;\n\n    if (!points || points.length < 2) return;\n\n    // Calculate how many points to draw based on progress\n    const pointCount = Math.max(2, Math.floor(points.length * progress));\n    const visiblePoints = points.slice(0, pointCount);\n\n    // Configure stroke style\n    this.ctx.strokeStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.lineCap = 'round';\n    this.ctx.lineJoin = 'round';\n\n    // Draw with variable width if pressures provided\n    if (pressures && pressures.length >= visiblePoints.length) {\n      this._drawVariableWidthStroke(visiblePoints, width, pressures.slice(0, pointCount));\n    } else {\n      this._drawConstantWidthStroke(visiblePoints, width);\n    }\n  }\n\n  /**\n   * Draws a stroke with constant width\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} width - Stroke width in pixels\n   */\n  _drawConstantWidthStroke(points, width) {\n    this.ctx.lineWidth = width || 2;\n    this.ctx.beginPath();\n\n    for (let i = 0; i < points.length; i++) {\n      const [px, py] = this._normalizedToPixel(points[i]);\n\n      if (i === 0) {\n        this.ctx.moveTo(px, py);\n      } else {\n        this.ctx.lineTo(px, py);\n      }\n    }\n\n    this.ctx.stroke();\n  }\n\n  /**\n   * Draws a stroke with variable width based on pressure\n   *\n   * Uses multiple line segments with varying widths for natural pen feel.\n   *\n   * @private\n   * @param {Array} points - Array of [x, y] normalized coordinates\n   * @param {number} baseWidth - Base stroke width in pixels\n   * @param {Array} pressures - Pressure values (0-1) for each point\n   */\n  _drawVariableWidthStroke(points, baseWidth, pressures) {\n    for (let i = 1; i < points.length; i++) {\n      const [x1, y1] = this._normalizedToPixel(points[i - 1]);\n      const [x2, y2] = this._normalizedToPixel(points[i]);\n\n      // Average pressure between two points\n      const p1 = pressures[i - 1] || 1;\n      const p2 = pressures[i] || 1;\n      const avgPressure = (p1 + p2) / 2;\n\n      // Apply pressure to width (min 0.5, max 2x base width)\n      const width = Math.max(0.5, baseWidth * avgPressure);\n\n      this.ctx.lineWidth = width;\n      this.ctx.beginPath();\n      this.ctx.moveTo(x1, y1);\n      this.ctx.lineTo(x2, y2);\n      this.ctx.stroke();\n    }\n  }\n\n  /**\n   * Draws a single point (dot)\n   *\n   * Useful for single-point strokes or debugging.\n   *\n   * @param {number} x - Normalized x coordinate (0-1)\n   * @param {number} y - Normalized y coordinate (0-1)\n   * @param {number} radius - Dot radius in pixels\n   * @param {string} color - Fill color\n   */\n  drawPoint(x, y, radius, color) {\n    const [px, py] = this._normalizedToPixel([x, y]);\n\n    this.ctx.fillStyle = color || 'rgba(0, 0, 0, 0.5)';\n    this.ctx.beginPath();\n    this.ctx.arc(px, py, radius, 0, Math.PI * 2);\n    this.ctx.fill();\n  }\n\n  /**\n   * Clears the entire canvas\n   */\n  clear() {\n    const dpr = window.devicePixelRatio || 1;\n    this.ctx.clearRect(0, 0, this.viewport.width * dpr, this.viewport.height * dpr);\n  }\n\n  /**\n   * Converts normalized coordinates (0-1) to pixel coordinates\n   *\n   * @private\n   * @param {Array} point - [x, y] normalized coordinates\n   * @returns {Array} [x, y] pixel coordinates\n   */\n  _normalizedToPixel(point) {\n    const [normX, normY] = point;\n    return [\n      normX * this.viewport.width,\n      normY * this.viewport.height\n    ];\n  }\n}\n\nexport default StrokeDrawer;\n"],"names":["StrokeDrawer","ctx","viewport","stroke","progress","points","color","width","pressures","pointCount","visiblePoints","px","py","baseWidth","i","x1","y1","x2","y2","p1","p2","avgPressure","x","y","radius","dpr","point","normX","normY"],"mappings":"4GASA,MAAMA,CAAa,CASjB,YAAYC,EAAKC,EAAU,CACzB,KAAK,IAAMD,EACX,KAAK,SAAWC,CAClB,CAOA,YAAYA,EAAU,CACpB,KAAK,SAAWA,CAClB,CAYA,WAAWC,EAAQC,EAAW,EAAK,CACjC,KAAM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAS,EAAKL,EAE5C,GAAI,CAACE,GAAUA,EAAO,OAAS,EAAG,OAGlC,MAAMI,EAAa,KAAK,IAAI,EAAG,KAAK,MAAMJ,EAAO,OAASD,CAAQ,CAAC,EAC7DM,EAAgBL,EAAO,MAAM,EAAGI,CAAU,EAGhD,KAAK,IAAI,YAAcH,GAAS,qBAChC,KAAK,IAAI,QAAU,QACnB,KAAK,IAAI,SAAW,QAGhBE,GAAaA,EAAU,QAAUE,EAAc,OACjD,KAAK,yBAAyBA,EAAeH,EAAOC,EAAU,MAAM,EAAGC,CAAU,CAAC,EAElF,KAAK,yBAAyBC,EAAeH,CAAK,CAEtD,CASA,yBAAyBF,EAAQE,EAAO,CACtC,KAAK,IAAI,UAAYA,GAAS,EAC9B,KAAK,IAAI,UAAS,EAElB,QAAS,EAAI,EAAG,EAAIF,EAAO,OAAQ,IAAK,CACtC,KAAM,CAACM,EAAIC,CAAE,EAAI,KAAK,mBAAmBP,EAAO,CAAC,CAAC,EAE9C,IAAM,EACR,KAAK,IAAI,OAAOM,EAAIC,CAAE,EAEtB,KAAK,IAAI,OAAOD,EAAIC,CAAE,CAE1B,CAEA,KAAK,IAAI,OAAM,CACjB,CAYA,yBAAyBP,EAAQQ,EAAWL,EAAW,CACrD,QAASM,EAAI,EAAGA,EAAIT,EAAO,OAAQS,IAAK,CACtC,KAAM,CAACC,EAAIC,CAAE,EAAI,KAAK,mBAAmBX,EAAOS,EAAI,CAAC,CAAC,EAChD,CAACG,EAAIC,CAAE,EAAI,KAAK,mBAAmBb,EAAOS,CAAC,CAAC,EAG5CK,EAAKX,EAAUM,EAAI,CAAC,GAAK,EACzBM,EAAKZ,EAAUM,CAAC,GAAK,EACrBO,GAAeF,EAAKC,GAAM,EAG1Bb,EAAQ,KAAK,IAAI,GAAKM,EAAYQ,CAAW,EAEnD,KAAK,IAAI,UAAYd,EACrB,KAAK,IAAI,UAAS,EAClB,KAAK,IAAI,OAAOQ,EAAIC,CAAE,EACtB,KAAK,IAAI,OAAOC,EAAIC,CAAE,EACtB,KAAK,IAAI,OAAM,CACjB,CACF,CAYA,UAAUI,EAAGC,EAAGC,EAAQlB,EAAO,CAC7B,KAAM,CAACK,EAAIC,CAAE,EAAI,KAAK,mBAAmB,CAACU,EAAGC,CAAC,CAAC,EAE/C,KAAK,IAAI,UAAYjB,GAAS,qBAC9B,KAAK,IAAI,UAAS,EAClB,KAAK,IAAI,IAAIK,EAAIC,EAAIY,EAAQ,EAAG,KAAK,GAAK,CAAC,EAC3C,KAAK,IAAI,KAAI,CACf,CAKA,OAAQ,CACN,MAAMC,EAAM,OAAO,kBAAoB,EACvC,KAAK,IAAI,UAAU,EAAG,EAAG,KAAK,SAAS,MAAQA,EAAK,KAAK,SAAS,OAASA,CAAG,CAChF,CASA,mBAAmBC,EAAO,CACxB,KAAM,CAACC,EAAOC,CAAK,EAAIF,EACvB,MAAO,CACLC,EAAQ,KAAK,SAAS,MACtBC,EAAQ,KAAK,SAAS,MAC5B,CACE,CACF"}

package/dist/index20.js

@@ -1,83 +1,107 @@
-const o = {
-  highlight: {
-    color: "rgba(255, 255, 0, 0.3)",
-    width: 24
-  },
-  text: {
-    color: "rgba(220, 20, 60, 1.0)",
-    width: 2
-  },
-  underline: {
-    color: "rgba(0, 80, 255, 1.0)",
-    width: 2
-  },
-  arrow: {
-    color: "rgba(220, 30, 30, 1.0)",
-    width: 2
-  },
-  circle: {
-    color: "rgba(255, 140, 0, 1.0)",
-    width: 3
+class w {
+  /**
+   * Creates a new StrokeDrawer instance
+   *
+   * @param {CanvasRenderingContext2D} ctx - Canvas 2D rendering context
+   * @param {Object} viewport - Viewport dimensions for coordinate conversion
+   * @param {number} viewport.width - Viewport width in pixels
+   * @param {number} viewport.height - Viewport height in pixels
+   */
+  constructor(t, o) {
+    this.ctx = t, this.viewport = o;
   }
-}, i = {
-  highlight: {
-    color: "rgba(100, 149, 237, 0.35)",
-    width: 24
-  },
-  text: {
-    color: "rgba(30, 64, 175, 1.0)",
-    width: 2
-  },
-  underline: {
-    color: "rgba(30, 64, 175, 1.0)",
-    width: 2
-  },
-  arrow: {
-    color: "rgba(30, 64, 175, 1.0)",
-    width: 2
-  },
-  circle: {
-    color: "rgba(30, 64, 175, 1.0)",
-    width: 3
+  /**
+   * Updates the viewport dimensions
+   *
+   * @param {Object} viewport - New viewport dimensions
+   */
+  setViewport(t) {
+    this.viewport = t;
   }
-}, l = {
-  highlight: {
-    color: "rgba(156, 163, 175, 0.25)",
-    width: 20
-  },
-  text: {
-    color: "rgba(75, 85, 99, 1.0)",
-    width: 1.5
-  },
-  underline: {
-    color: "rgba(75, 85, 99, 1.0)",
-    width: 1.5
-  },
-  arrow: {
-    color: "rgba(75, 85, 99, 1.0)",
-    width: 1.5
-  },
-  circle: {
-    color: "rgba(75, 85, 99, 1.0)",
-    width: 2
+  /**
+   * Draws a stroke with optional progress for progressive reveal
+   *
+   * @param {Object} stroke - Stroke command object
+   * @param {Array} stroke.points - Array of [x, y] normalized coordinates
+   * @param {string} stroke.color - Stroke color (CSS color string)
+   * @param {number} stroke.width - Base stroke width in pixels
+   * @param {Array} [stroke.pressures] - Optional pressure values for variable width
+   * @param {number} [progress=1.0] - Progress from 0 to 1 (for progressive reveal)
+   */
+  drawStroke(t, o = 1) {
+    const { points: i, color: e, width: s, pressures: h } = t;
+    if (!i || i.length < 2) return;
+    const n = Math.max(2, Math.floor(i.length * o)), r = i.slice(0, n);
+    this.ctx.strokeStyle = e || "rgba(0, 0, 0, 0.5)", this.ctx.lineCap = "round", this.ctx.lineJoin = "round", h && h.length >= r.length ? this._drawVariableWidthStroke(r, s, h.slice(0, n)) : this._drawConstantWidthStroke(r, s);
+  }
+  /**
+   * Draws a stroke with constant width
+   *
+   * @private
+   * @param {Array} points - Array of [x, y] normalized coordinates
+   * @param {number} width - Stroke width in pixels
+   */
+  _drawConstantWidthStroke(t, o) {
+    this.ctx.lineWidth = o || 2, this.ctx.beginPath();
+    for (let i = 0; i < t.length; i++) {
+      const [e, s] = this._normalizedToPixel(t[i]);
+      i === 0 ? this.ctx.moveTo(e, s) : this.ctx.lineTo(e, s);
+    }
+    this.ctx.stroke();
+  }
+  /**
+   * Draws a stroke with variable width based on pressure
+   *
+   * Uses multiple line segments with varying widths for natural pen feel.
+   *
+   * @private
+   * @param {Array} points - Array of [x, y] normalized coordinates
+   * @param {number} baseWidth - Base stroke width in pixels
+   * @param {Array} pressures - Pressure values (0-1) for each point
+   */
+  _drawVariableWidthStroke(t, o, i) {
+    for (let e = 1; e < t.length; e++) {
+      const [s, h] = this._normalizedToPixel(t[e - 1]), [n, r] = this._normalizedToPixel(t[e]), l = i[e - 1] || 1, c = i[e] || 1, a = (l + c) / 2, x = Math.max(0.5, o * a);
+      this.ctx.lineWidth = x, this.ctx.beginPath(), this.ctx.moveTo(s, h), this.ctx.lineTo(n, r), this.ctx.stroke();
+    }
+  }
+  /**
+   * Draws a single point (dot)
+   *
+   * Useful for single-point strokes or debugging.
+   *
+   * @param {number} x - Normalized x coordinate (0-1)
+   * @param {number} y - Normalized y coordinate (0-1)
+   * @param {number} radius - Dot radius in pixels
+   * @param {string} color - Fill color
+   */
+  drawPoint(t, o, i, e) {
+    const [s, h] = this._normalizedToPixel([t, o]);
+    this.ctx.fillStyle = e || "rgba(0, 0, 0, 0.5)", this.ctx.beginPath(), this.ctx.arc(s, h, i, 0, Math.PI * 2), this.ctx.fill();
+  }
+  /**
+   * Clears the entire canvas
+   */
+  clear() {
+    const t = window.devicePixelRatio || 1;
+    this.ctx.clearRect(0, 0, this.viewport.width * t, this.viewport.height * t);
+  }
+  /**
+   * Converts normalized coordinates (0-1) to pixel coordinates
+   *
+   * @private
+   * @param {Array} point - [x, y] normalized coordinates
+   * @returns {Array} [x, y] pixel coordinates
+   */
+  _normalizedToPixel(t) {
+    const [o, i] = t;
+    return [
+      o * this.viewport.width,
+      i * this.viewport.height
+    ];
   }
-}, r = {
-  default: o,
-  blue: i,
-  minimal: l
-};
-function c(t) {
-  return r[t] || r.default;
-}
-function e() {
-  return Object.keys(r);
 }
 export {
-  i as BLUE_PRESET,
-  o as DEFAULT_PRESET,
-  l as MINIMAL_PRESET,
-  r as default,
-  c as getPreset,
-  e as getPresetNames
+  w as default
 };
 //# sourceMappingURL=index20.js.map