@umituz/web-canvas 1.1.1 → 1.2.1

package/dist/presentation/index.mjs

@@ -3,8 +3,8 @@ import {
   useFreehandCanvas,
   useReportExport,
   useScreenshotStudio
-} from "../chunk-YKXOSUMF.mjs";
-import "../chunk-DNKRSL6D.mjs";
+} from "../chunk-7YLVULSN.mjs";
+import "../chunk-P6RJ75US.mjs";
 import "../chunk-UOGTEMIJ.mjs";
 import "../chunk-Z6IB4BQV.mjs";
 import "../chunk-MC6PNV2F.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-canvas",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Comprehensive canvas and screenshot generation library with device frames, patterns, and PDF export",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -77,7 +77,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/umituz/web-canvas"
+    "url": "git+https://github.com/umituz/web-canvas.git"
   },
   "bugs": {
     "url": "https://github.com/umituz/web-canvas/issues"
@@ -97,7 +97,6 @@
   "dependencies": {
     "html2canvas": "^1.4.1",
     "jspdf": "^4.2.1",
-    "jszip": "^3.10.1",
-    "xlsx": "^0.18.5"
+    "jszip": "^3.10.1"
   }
-}
+}

package/src/application/services/ReportService.ts

@@ -5,6 +5,20 @@
 
 import type { ReportData } from '../../domain/types/report.types';
 import type { PDFExportOptions, ExcelExportOptions } from '../../domain/types/report.types';
+import { writeXlsxBlob } from '../../infrastructure/services/minimalXlsx';
+import type { XlsxSheet } from '../../infrastructure/services/minimalXlsx';
+
+/** Flat records → header + value rows, matching json_to_sheet's shape. */
+function recordsToSheet(
+  name: string,
+  records: Record<string, string | number | boolean | null | undefined>[]
+): XlsxSheet {
+  const headers = [...new Set(records.flatMap((record) => Object.keys(record)))];
+  return {
+    name,
+    rows: [headers, ...records.map((record) => headers.map((header) => record[header]))],
+  };
+}
 
 export class ReportService {
   private static instance: ReportService;
@@ -71,8 +85,7 @@ export class ReportService {
     data: ReportData,
     options: ExcelExportOptions = {}
   ): Promise<void> {
-    const XLSX = await import('xlsx');
-    const wb = XLSX.utils.book_new();
+    const JSZip = (await import('jszip')).default;
 
     // Group items by type
     const apps = data.items
@@ -85,26 +98,15 @@ export class ReportService {
       .filter((i) => i.type === 'post')
       .map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
 
+    const sheets: XlsxSheet[] = [];
     if (apps.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(apps),
-        options.sheetName || 'Apps'
-      );
+      sheets.push(recordsToSheet(options.sheetName || 'Apps', apps));
     }
     if (campaigns.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(campaigns),
-        'Campaigns'
-      );
+      sheets.push(recordsToSheet('Campaigns', campaigns));
     }
     if (posts.length > 0) {
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(posts),
-        'Posts'
-      );
+      sheets.push(recordsToSheet('Posts', posts));
     }
 
     // Summary sheet
@@ -124,14 +126,20 @@ export class ReportService {
           Value: new Date().toLocaleDateString(),
         },
       ];
-      XLSX.utils.book_append_sheet(
-        wb,
-        XLSX.utils.json_to_sheet(summary),
-        'Summary'
-      );
+      sheets.push(recordsToSheet('Summary', summary));
+    }
+
+    if (sheets.length === 0) {
+      sheets.push({ name: options.sheetName || 'Sheet1', rows: [] });
     }
 
-    XLSX.writeFile(wb, options.filename || 'report.xlsx');
+    const blob = await writeXlsxBlob(sheets, JSZip);
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = options.filename || 'report.xlsx';
+    link.click();
+    URL.revokeObjectURL(url);
   }
 
   /**

package/src/domain/types/freehand.types.ts

@@ -1,42 +1,21 @@
-/**
- * Freehand Types
- * Types for pointer-based freehand drawing on a canvas
- */
-
-/**
- * A single sampled point along a stroke, in CSS pixels relative to the canvas
- */
 export interface FreehandPoint {
   x: number;
   y: number;
-  /** Normalized stylus pressure (0–1). ~0.5 for mouse/touch when unsupported. */
   pressure: number;
 }
 
-/**
- * A completed (or in-progress) freehand stroke
- */
 export interface FreehandStroke {
-  /** Base brush size in CSS pixels. */
   size: number;
-  /** CSS color of the stroke. */
   color: string;
-  /** True when the stroke should vary width with per-point pressure. */
   dynamic: boolean;
-  /** Ordered points from pointer-down to pointer-up. */
   points: FreehandPoint[];
 }
 
-/**
- * Options for the useFreehandCanvas hook
- */
 export interface UseFreehandCanvasOptions {
-  /** Base brush size in CSS pixels. Default: 3 */
   brushSize?: number;
-  /** Stroke color. Default: '#1a1a1a' */
   color?: string;
-  /** Vary stroke width with stylus pressure (mouse/touch stay constant). Default: true */
   pressureEnabled?: boolean;
-  /** Called after each completed stroke (pointer-up). */
+  keyboard?: boolean;
+  keyboardStep?: number;
   onStrokeEnd?: (stroke: FreehandStroke) => void;
 }

package/src/infrastructure/services/minimalXlsx.ts

@@ -0,0 +1,122 @@
+/**
+ * Minimal XLSX writer — replaces the unmaintained npm `xlsx` (SheetJS)
+ * dependency, whose registry build carries open prototype-pollution and
+ * ReDoS advisories with no registry fix. The report export only ever
+ * writes flat tables (header row + primitive cells), so a hand-rolled
+ * SpreadsheetML package on top of jszip covers the need: inline-string
+ * and numeric cells, multiple sheets, Excel/LibreOffice/Sheets-compatible.
+ */
+
+export interface XlsxSheet {
+  name: string;
+  /** Rows of primitive cells; the first row is the header. */
+  rows: (string | number | boolean | null | undefined)[][];
+}
+
+const XML_HEADER = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+
+function escapeXml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+/** Excel sheet names: max 31 chars, no : \ / ? * [ ]. */
+function safeSheetName(name: string, index: number): string {
+  const cleaned = name.replace(/[:\\/?*[\]]/g, ' ').slice(0, 31).trim();
+  return cleaned.length > 0 ? cleaned : `Sheet${index + 1}`;
+}
+
+function columnName(index: number): string {
+  let name = '';
+  let n = index;
+  while (n >= 0) {
+    name = String.fromCharCode(65 + (n % 26)) + name;
+    n = Math.floor(n / 26) - 1;
+  }
+  return name;
+}
+
+function cellXml(value: string | number | boolean | null | undefined, row: number, column: number): string {
+  const ref = `${columnName(column)}${row}`;
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return `<c r="${ref}"><v>${value}</v></c>`;
+  }
+  const text =
+    value === null || value === undefined
+      ? ''
+      : typeof value === 'boolean'
+        ? value
+          ? 'TRUE'
+          : 'FALSE'
+        : String(value);
+  return `<c r="${ref}" t="inlineStr"><is><t xml:space="preserve">${escapeXml(text)}</t></is></c>`;
+}
+
+function sheetXml(rows: XlsxSheet['rows']): string {
+  const body = rows
+    .map((row, rowIndex) => {
+      const cells = row.map((value, columnIndex) => cellXml(value, rowIndex + 1, columnIndex)).join('');
+      return `<row r="${rowIndex + 1}">${cells}</row>`;
+    })
+    .join('');
+  return `${XML_HEADER}<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${body}</sheetData></worksheet>`;
+}
+
+/** Assembles the sheets into a .xlsx zip blob using jszip. */
+export async function writeXlsxBlob(sheets: XlsxSheet[], JSZip: typeof import('jszip')): Promise<Blob> {
+  const zip = new JSZip();
+  const safeNames = sheets.map((sheet, index) => safeSheetName(sheet.name, index));
+
+  zip.file(
+    '[Content_Types].xml',
+    `${XML_HEADER}<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">` +
+      '<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>' +
+      '<Default Extension="xml" ContentType="application/xml"/>' +
+      '<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>' +
+      safeNames
+        .map(
+          (_, index) =>
+            `<Override PartName="/xl/worksheets/sheet${index + 1}.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>`,
+        )
+        .join('') +
+      '</Types>',
+  );
+
+  zip.file(
+    '_rels/.rels',
+    `${XML_HEADER}<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
+      '<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>' +
+      '</Relationships>',
+  );
+
+  zip.file(
+    'xl/workbook.xml',
+    `${XML_HEADER}<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets>` +
+      safeNames
+        .map((name, index) => `<sheet name="${escapeXml(name)}" sheetId="${index + 1}" r:id="rId${index + 1}"/>`)
+        .join('') +
+      '</sheets></workbook>',
+  );
+
+  zip.file(
+    'xl/_rels/workbook.xml.rels',
+    `${XML_HEADER}<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">` +
+      safeNames
+        .map(
+          (_, index) =>
+            `<Relationship Id="rId${index + 1}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet${index + 1}.xml"/>`,
+        )
+        .join('') +
+      '</Relationships>',
+  );
+
+  sheets.forEach((sheet, index) => {
+    zip.file(`xl/worksheets/sheet${index + 1}.xml`, sheetXml(sheet.rows));
+  });
+
+  return zip.generateAsync({ type: 'blob' });
+}

package/src/presentation/hooks/useFreehandCanvas.ts

@@ -1,8 +1,3 @@
-/**
- * useFreehandCanvas Hook
- * React hook for pointer-based freehand drawing on a canvas
- */
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   FreehandPoint,
@@ -12,64 +7,53 @@ import type {
 
 const DEFAULT_BRUSH_SIZE = 3;
 const DEFAULT_COLOR = '#1a1a1a';
+const DEFAULT_KEYBOARD_STEP = 4;
+const KEYBOARD_FAST_FACTOR = 4;
 
-/**
- * Width for a point: constant for mouse/touch, pressure-scaled for pens
- */
 function widthFor(stroke: FreehandStroke, point: FreehandPoint): number {
   if (!stroke.dynamic) return stroke.size;
-  // pressure is 0 (some mice) – 1 (hard press); clamp the visual range
   return stroke.size * (0.5 + Math.min(1, Math.max(0, point.pressure)));
 }
 
-/**
- * Return value of the useFreehandCanvas hook
- */
 export interface UseFreehandCanvasReturn {
-  /** Ref to attach to the <canvas> element that captures drawing. */
   canvasRef: React.RefObject<HTMLCanvasElement | null>;
-  /** Remove the most recent stroke. */
   undo: () => void;
-  /** Remove all strokes. */
   clear: () => void;
-  /** Number of committed strokes. */
   strokeCount: number;
-  /** True when no strokes are committed. */
   isEmpty: boolean;
-  /** Snapshot of committed strokes (safe to serialize). */
   getStrokes: () => FreehandStroke[];
 }
 
-/**
- * useFreehandCanvas hook
- *
- * Attaches pointer-event drawing to a canvas element. The canvas is sized to
- * its CSS box at device-pixel resolution (and re-rendered on resize), strokes
- * are replayed from captured points so undo/clear are lossless, and stylus
- * pressure modulates line width when the pointer reports it.
- *
- * The canvas gets `touch-action: none` applied so drawing works on touch
- * screens without scrolling the page. Consumers typically layer the canvas
- * over their own guide content (e.g. a faint glyph to trace).
- */
+interface KeyboardPen {
+  x: number;
+  y: number;
+  down: boolean;
+  engaged: boolean;
+}
+
 export function useFreehandCanvas(
   options: UseFreehandCanvasOptions = {}
 ): UseFreehandCanvasReturn {
-  const { brushSize = DEFAULT_BRUSH_SIZE, color = DEFAULT_COLOR, pressureEnabled = true } = options;
+  const {
+    brushSize = DEFAULT_BRUSH_SIZE,
+    color = DEFAULT_COLOR,
+    pressureEnabled = true,
+    keyboard = false,
+    keyboardStep = DEFAULT_KEYBOARD_STEP,
+  } = options;
 
-  // Latest option values for event handlers, without re-binding listeners.
-  const optionsRef = useRef({ brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd });
-  optionsRef.current = { brushSize, color, pressureEnabled, onStrokeEnd: options.onStrokeEnd };
+  const optionsRef = useRef({ brushSize, color, pressureEnabled, keyboardStep, onStrokeEnd: options.onStrokeEnd });
+  optionsRef.current = { brushSize, color, pressureEnabled, keyboardStep, onStrokeEnd: options.onStrokeEnd };
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const strokesRef = useRef<FreehandStroke[]>([]);
   const activeStrokeRef = useRef<FreehandStroke | null>(null);
   const activePointerIdRef = useRef<number | null>(null);
   const dprRef = useRef(1);
+  const penRef = useRef<KeyboardPen | null>(null);
 
   const [strokeCount, setStrokeCount] = useState(0);
 
-  /** Replay every committed stroke (and the active one) at current DPR. */
   const redraw = useCallback(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
@@ -103,9 +87,20 @@ export function useFreehandCanvas(
         ctx.stroke();
       }
     }
+    const pen = penRef.current;
+    if (pen?.engaged && !pen.down) {
+      const reach = 5;
+      ctx.strokeStyle = 'rgba(35, 37, 43, 0.55)';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(pen.x - reach, pen.y);
+      ctx.lineTo(pen.x + reach, pen.y);
+      ctx.moveTo(pen.x, pen.y - reach);
+      ctx.lineTo(pen.x, pen.y + reach);
+      ctx.stroke();
+    }
   }, []);
 
-  /** Match the backing store to the CSS box; returns true when it changed. */
   const syncDimensions = useCallback((): boolean => {
     const canvas = canvasRef.current;
     if (!canvas) return false;
@@ -125,8 +120,9 @@ export function useFreehandCanvas(
 
     const el: HTMLCanvasElement = canvas;
 
-    // Touch screens must draw, not scroll, while the pointer is down.
     el.style.touchAction = 'none';
+    if (keyboard && !el.hasAttribute('tabindex')) el.tabIndex = 0;
+    if (!penRef.current) penRef.current = { x: el.clientWidth / 2, y: el.clientHeight / 2, down: false, engaged: false };
 
     syncDimensions();
     redraw();
@@ -169,8 +165,6 @@ export function useFreehandCanvas(
 
     function onPointerDown(event: PointerEvent): void {
       if (event.button !== 0 && event.pointerType === 'mouse') return;
-      // Only one stroke at a time: a resting palm or second finger touching
-      // mid-stroke must not hijack or corrupt the active stroke.
       if (activeStrokeRef.current != null) return;
       event.preventDefault();
       el.setPointerCapture(event.pointerId);
@@ -183,6 +177,7 @@ export function useFreehandCanvas(
         points: [pointFrom(event)],
       };
       activeStrokeRef.current = stroke;
+      penRef.current = { x: stroke.points[0].x, y: stroke.points[0].y, down: false, engaged: false };
       drawDot(stroke, stroke.points[0]);
     }
 
@@ -209,10 +204,76 @@ export function useFreehandCanvas(
       optionsRef.current.onStrokeEnd?.(stroke);
     }
 
+    function clampPen(pen: KeyboardPen): void {
+      pen.x = Math.min(Math.max(pen.x, 0), Math.max(0, el.clientWidth - 1));
+      pen.y = Math.min(Math.max(pen.y, 0), Math.max(0, el.clientHeight - 1));
+    }
+
+    function startKeyboardStroke(pen: KeyboardPen): void {
+      const { brushSize: size, color: ink } = optionsRef.current;
+      const stroke: FreehandStroke = {
+        size,
+        color: ink,
+        dynamic: false,
+        points: [{ x: pen.x, y: pen.y, pressure: 0.5 }],
+      };
+      activeStrokeRef.current = stroke;
+      pen.down = true;
+      drawDot(stroke, stroke.points[0]);
+    }
+
+    function commitKeyboardStroke(pen: KeyboardPen): void {
+      const stroke = activeStrokeRef.current;
+      if (!stroke) return;
+      activeStrokeRef.current = null;
+      pen.down = false;
+      strokesRef.current = [...strokesRef.current, stroke];
+      setStrokeCount(strokesRef.current.length);
+      optionsRef.current.onStrokeEnd?.(stroke);
+      redraw();
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+      const pen = penRef.current;
+      if (!pen) return;
+      const fast = event.shiftKey ? KEYBOARD_FAST_FACTOR : 1;
+      const step = optionsRef.current.keyboardStep * fast;
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        pen.engaged = true;
+        pen.x += event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;
+        pen.y += event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
+        clampPen(pen);
+        const stroke = activeStrokeRef.current;
+        if (pen.down && stroke) {
+          const point: FreehandPoint = { x: pen.x, y: pen.y, pressure: 0.5 };
+          const previous = stroke.points[stroke.points.length - 1];
+          stroke.points.push(point);
+          drawSegment(stroke, previous, point);
+        } else {
+          redraw();
+        }
+        return;
+      }
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        pen.engaged = true;
+        if (pen.down) commitKeyboardStroke(pen);
+        else startKeyboardStroke(pen);
+        return;
+      }
+      if (event.key === 'Escape' && pen.down) {
+        activeStrokeRef.current = null;
+        pen.down = false;
+        redraw();
+      }
+    }
+
     el.addEventListener('pointerdown', onPointerDown);
     el.addEventListener('pointermove', onPointerMove);
     el.addEventListener('pointerup', commit);
     el.addEventListener('pointercancel', commit);
+    if (keyboard) el.addEventListener('keydown', onKeyDown);
 
     return () => {
       observer.disconnect();
@@ -220,8 +281,9 @@ export function useFreehandCanvas(
       el.removeEventListener('pointermove', onPointerMove);
       el.removeEventListener('pointerup', commit);
       el.removeEventListener('pointercancel', commit);
+      el.removeEventListener('keydown', onKeyDown);
     };
-  }, [redraw, syncDimensions]);
+  }, [redraw, syncDimensions, keyboard]);
 
   const undo = useCallback(() => {
     if (strokesRef.current.length === 0) return;