canvu-react 0.3.39 → 0.4.0

package/dist/{shape-builders-Dedcl6tw.d.cts → shape-builders-BAWu-PxX.d.cts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-Bnq2HtHQ.cjs';
+import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-BCCvY6ie.cjs';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -148,11 +148,14 @@ declare const DEFAULT_LINK_CARD_SIZE: {
     readonly height: 132;
 };
 
+/** Stroke dash pattern for freehand drawings. `solid` = perfect-freehand fill; `dashed` = centerline stroke with dashes. */
+type StrokeDash = "solid" | "dashed";
 /** Resolved stroke for SVG generation. */
 type StrokeStyle = {
     stroke: string;
     strokeWidth: number;
     strokeOpacity?: number;
+    strokeDash?: StrokeDash;
 };
 declare const DEFAULT_STROKE_STYLE: StrokeStyle;
 declare function resolveStrokeStyle(item: VectorSceneItem): StrokeStyle;
@@ -202,6 +205,7 @@ type FreehandSvgPayload = {
     stroke: string;
     strokeWidth: number;
     strokeOpacity?: number;
+    strokeDasharray?: string;
 };
 /**
  * Computes freehand geometry (perfect-freehand + fallback). Used by {@link buildFreehandPathSvg}
@@ -236,7 +240,7 @@ declare function lineEndpointsToLocal(bounds: Rect, worldEndA: {
  */
 declare function rebuildItemSvg(item: VectorSceneItem): VectorSceneItem;
 /** Updates stroke color / width / opacity and refreshes the item’s SVG. */
-declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<VectorSceneItem, "stroke" | "strokeWidth" | "strokeOpacity">>): VectorSceneItem;
+declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<VectorSceneItem, "stroke" | "strokeWidth" | "strokeOpacity" | "strokeDash" | "textFontSize">>): VectorSceneItem;
 /** Creates a rectangle shape ready to append to your scene `items` array. */
 declare function createRectangleItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an ellipse shape. */
@@ -265,7 +269,7 @@ declare function createLineItem(id: string, bounds: Rect, line: LineEndpointsLoc
 /** “Draw dot” tool: a small filled circle at (`worldX`, `worldY`). */
 declare function createDrawDotItem(id: string, worldX: number, worldY: number, radius: number, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an editable text box (`stroke` is used as text fill). */
-declare function createTextItem(id: string, bounds: Rect, text?: string, style?: Partial<StrokeStyle>): VectorSceneItem;
+declare function createTextItem(id: string, bounds: Rect, text?: string, style?: Partial<StrokeStyle>, textFontSize?: number): VectorSceneItem;
 /** Freehand stroke from world-space points (main pen or marker highlight). */
 declare function createFreehandStrokeItem(id: string, pointsWorld: readonly VectorPathPoint[], toolKind: "draw" | "marker", style?: Partial<StrokeStyle>): VectorSceneItem | null;
 /** Places a bitmap (e.g. `data:image/png;base64,...`) inside `bounds`. */

package/dist/{shape-builders-C7bxJBGR.d.ts → shape-builders-ClKv9tz9.d.ts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-Bnq2HtHQ.js';
+import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-BCCvY6ie.js';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -148,11 +148,14 @@ declare const DEFAULT_LINK_CARD_SIZE: {
     readonly height: 132;
 };
 
+/** Stroke dash pattern for freehand drawings. `solid` = perfect-freehand fill; `dashed` = centerline stroke with dashes. */
+type StrokeDash = "solid" | "dashed";
 /** Resolved stroke for SVG generation. */
 type StrokeStyle = {
     stroke: string;
     strokeWidth: number;
     strokeOpacity?: number;
+    strokeDash?: StrokeDash;
 };
 declare const DEFAULT_STROKE_STYLE: StrokeStyle;
 declare function resolveStrokeStyle(item: VectorSceneItem): StrokeStyle;
@@ -202,6 +205,7 @@ type FreehandSvgPayload = {
     stroke: string;
     strokeWidth: number;
     strokeOpacity?: number;
+    strokeDasharray?: string;
 };
 /**
  * Computes freehand geometry (perfect-freehand + fallback). Used by {@link buildFreehandPathSvg}
@@ -236,7 +240,7 @@ declare function lineEndpointsToLocal(bounds: Rect, worldEndA: {
  */
 declare function rebuildItemSvg(item: VectorSceneItem): VectorSceneItem;
 /** Updates stroke color / width / opacity and refreshes the item’s SVG. */
-declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<VectorSceneItem, "stroke" | "strokeWidth" | "strokeOpacity">>): VectorSceneItem;
+declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<VectorSceneItem, "stroke" | "strokeWidth" | "strokeOpacity" | "strokeDash" | "textFontSize">>): VectorSceneItem;
 /** Creates a rectangle shape ready to append to your scene `items` array. */
 declare function createRectangleItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an ellipse shape. */
@@ -265,7 +269,7 @@ declare function createLineItem(id: string, bounds: Rect, line: LineEndpointsLoc
 /** “Draw dot” tool: a small filled circle at (`worldX`, `worldY`). */
 declare function createDrawDotItem(id: string, worldX: number, worldY: number, radius: number, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an editable text box (`stroke` is used as text fill). */
-declare function createTextItem(id: string, bounds: Rect, text?: string, style?: Partial<StrokeStyle>): VectorSceneItem;
+declare function createTextItem(id: string, bounds: Rect, text?: string, style?: Partial<StrokeStyle>, textFontSize?: number): VectorSceneItem;
 /** Freehand stroke from world-space points (main pen or marker highlight). */
 declare function createFreehandStrokeItem(id: string, pointsWorld: readonly VectorPathPoint[], toolKind: "draw" | "marker", style?: Partial<StrokeStyle>): VectorSceneItem | null;
 /** Places a bitmap (e.g. `data:image/png;base64,...`) inside `bounds`. */

package/dist/tldraw.cjs

@@ -123,11 +123,14 @@ function escapeHtmlText2(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 var DEFAULT_TEXT_FONT_SIZE = 18;
+var TEXT_FONT_FAMILY = "Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif";
 var LINE_HEIGHT_RATIO = 22 / 18;
-var FIRST_LINE_BASELINE_RATIO = 24 / 18;
+var FIRST_LINE_BASELINE_RATIO = 20 / 18;
+var EDIT_TOP_PAD_RATIO = 4 / 18;
+var BOTTOM_PAD_RATIO = 4 / 18;
 var PLACEHOLDER = "Tap to type";
 var MIN_TEXT_BOX_W = 40;
-var MIN_TEXT_BOX_H = 36;
+var MIN_TEXT_BOX_H = 26;
 var TEXT_PAD_X = 4;
 var MAX_TEXT_MEASURE_CACHE_ENTRIES = 2e3;
 var sharedMeasureContext;
@@ -173,7 +176,7 @@ function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   let maxInnerW = 0;
   const ctx = getSharedMeasureContext();
   if (ctx) {
-    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    ctx.font = `${fontSize}px ${TEXT_FONT_FAMILY}`;
     for (const line of lines) {
       const toMeasure = trimmed.length === 0 ? PLACEHOLDER : line.length === 0 ? " " : line;
       maxInnerW = Math.max(maxInnerW, ctx.measureText(toMeasure).width);
@@ -189,22 +192,22 @@ function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const width = Math.max(minW, TEXT_PAD_X * 2 + maxInnerW);
   const height = Math.max(
     MIN_TEXT_BOX_H,
-    baselineY + (lines.length - 1) * lh + Math.max(8, fontSize * 0.35)
+    baselineY + (lines.length - 1) * lh + Math.max(4, fontSize * BOTTOM_PAD_RATIO)
   );
   const measured = { width, height };
   cacheMeasuredBounds(cacheKey, measured);
   return measured;
 }
-function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+function buildTextSvg(content, _width, _height, fillColor = "#1d1d1d", fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const lh = lineHeightFor(fontSize);
   const y0 = firstLineBaselineY(fontSize);
   const trimmed = content.trim();
   if (trimmed.length === 0) {
-    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="#94a3b8" font-style="italic">${escapeSvgTextContent(PLACEHOLDER)}</text>`;
   }
   const lines = content.split("\n");
   if (lines.length === 1) {
-    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
+    return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="${fillColor}">${escapeSvgTextContent(lines[0] ?? "")}</text>`;
   }
   const parts = [];
   for (let i = 0; i < lines.length; i++) {
@@ -215,23 +218,24 @@ function buildTextSvg(content, _width, _height, fillColor = "#2563eb", fontSize
       parts.push(`<tspan x="4" dy="${lh}">${escapeSvgTextContent(line)}</tspan>`);
     }
   }
-  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="system-ui,sans-serif" fill="${fillColor}">${parts.join("")}</text>`;
+  return `<text x="4" y="${y0}" font-size="${fontSize}" font-family="${TEXT_FONT_FAMILY}" fill="${fillColor}">${parts.join("")}</text>`;
 }
-function buildTextFixedBoundsSvg(content, width, height, fillColor = "#2563eb", fontSize = DEFAULT_TEXT_FONT_SIZE) {
+function buildTextFixedBoundsSvg(content, width, height, fillColor = "#1d1d1d", fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const w = Math.max(1, width);
   const h = Math.max(1, height);
   const lh = lineHeightFor(fontSize);
   const trimmed = content.trim();
+  const padTop = EDIT_TOP_PAD_RATIO * fontSize;
   if (trimmed.length === 0) {
-    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText2(PLACEHOLDER)}</div></foreignObject>`;
+    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText2(PLACEHOLDER)}</div></foreignObject>`;
   }
   const body = escapeHtmlText2(content);
-  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
+  return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
 }
 
 // src/scene/shape-builders.ts
 var DEFAULT_STROKE_STYLE = {
-  stroke: "#2563eb",
+  stroke: "#1d1d1d",
   strokeWidth: 2
 };
 function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware = false) {
@@ -282,7 +286,8 @@ function resolveStrokeStyle(item) {
   return {
     stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
     strokeWidth: item.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
-    strokeOpacity: item.strokeOpacity
+    strokeOpacity: item.strokeOpacity,
+    strokeDash: item.strokeDash
   };
 }
 function strokeOpacityAttr(style) {
@@ -611,6 +616,30 @@ function buildDrawDotSvg(r, style = DEFAULT_STROKE_STYLE) {
   const op = style.strokeOpacity != null ? ` fill-opacity="${style.strokeOpacity}"` : "";
   return `<circle cx="${r}" cy="${r}" r="${r}" fill="${style.stroke}" shape-rendering="geometricPrecision"${op} />`;
 }
+function dashArrayForDrawStroke(strokeWidth) {
+  const dash = Math.max(strokeWidth * 1.8, 4);
+  const gap = Math.max(strokeWidth * 1.4, 3);
+  return `${dash} ${gap}`;
+}
+function buildSmoothedCenterlinePath(points) {
+  if (points.length < 2) return null;
+  const first = points[0];
+  if (!first) return null;
+  let d = `M ${first.x} ${first.y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const a = points[i];
+    const b = points[i + 1];
+    if (!a || !b) continue;
+    const midX = (a.x + b.x) / 2;
+    const midY = (a.y + b.y) / 2;
+    d += ` Q ${a.x} ${a.y} ${midX} ${midY}`;
+  }
+  const last = points[points.length - 1];
+  if (last) {
+    d += ` L ${last.x} ${last.y}`;
+  }
+  return d;
+}
 function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeComplete = true) {
   if (pathPointsLocal.length === 0) return null;
   if (pathPointsLocal.length === 1) {
@@ -625,6 +654,18 @@ function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeCompl
       fillOpacity: style.strokeOpacity
     };
   }
+  if (style.strokeDash === "dashed" && (toolKind === "draw" || toolKind === "pencil")) {
+    const d2 = buildSmoothedCenterlinePath(pathPointsLocal);
+    if (!d2) return null;
+    return {
+      kind: "strokePath",
+      d: d2,
+      stroke: style.stroke,
+      strokeWidth: style.strokeWidth,
+      strokeOpacity: style.strokeOpacity,
+      strokeDasharray: dashArrayForDrawStroke(style.strokeWidth)
+    };
+  }
   const hasPressure = pathPointsLocal.some(
     (p) => p.pressure != null && Number.isFinite(p.pressure)
   );
@@ -667,7 +708,8 @@ function freehandPayloadToSvgString(payload) {
     strokeWidth: payload.strokeWidth,
     strokeOpacity: payload.strokeOpacity
   });
-  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op} />`;
+  const dash = payload.strokeDasharray ? ` stroke-dasharray="${payload.strokeDasharray}"` : "";
+  return `<path d="${payload.d}" fill="none" stroke="${payload.stroke}" stroke-width="${payload.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" shape-rendering="geometricPrecision"${op}${dash} />`;
 }
 function buildFreehandPathSvg(pathPointsLocal, style, toolKind, strokeComplete = true) {
   const payload = computeFreehandSvgPayload(