canvu-react 0.3.29 → 0.3.31

package/dist/{shape-builders-DFudWDFI.d.cts → shape-builders-CsSXKCcs.d.ts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-CB0TZZuk.cjs';
+import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-Bnq2HtHQ.js';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -120,6 +120,28 @@ declare const DEFAULT_STROKE_STYLE: StrokeStyle;
 declare function resolveStrokeStyle(item: VectorSceneItem): StrokeStyle;
 declare function buildRectSvg(width: number, height: number, style?: StrokeStyle): string;
 declare function buildEllipseSvg(width: number, height: number, style?: StrokeStyle): string;
+/**
+ * Returns the local SVG path for a scalable architectural revision cloud.
+ *
+ * Use this low-level helper when you need to preview or inspect the shape without
+ * creating a full scene item. Prefer {@link createArchitecturalCloudItem} when
+ * adding a cloud to a `VectorSceneItem[]`, because it keeps `toolKind`, bounds,
+ * stroke fields, and `childrenSvg` synchronized for editing.
+ *
+ * @example
+ * ```ts
+ * const d = buildArchitecturalCloudPathD(180, 90);
+ * ```
+ */
+declare function buildArchitecturalCloudPathD(width: number, height: number, strokeWidth?: number): string;
+/**
+ * Builds an SVG fragment for an architectural revision cloud outline.
+ *
+ * This is the renderer-level primitive behind the built-in `"architectural-cloud"`
+ * tool. Prefer {@link createArchitecturalCloudItem} for app code that inserts a
+ * normal editable scene item.
+ */
+declare function buildArchitecturalCloudSvg(width: number, height: number, style?: StrokeStyle): string;
 declare function buildLineSvg(line: LineEndpointsLocal, style?: StrokeStyle): string;
 declare function buildArrowSvg(itemId: string, line: LineEndpointsLocal, style?: StrokeStyle): string;
 declare function buildDrawDotSvg(r: number, style?: StrokeStyle): string;
@@ -181,6 +203,25 @@ declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<Ve
 declare function createRectangleItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an ellipse shape. */
 declare function createEllipseItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
+/**
+ * Creates an architectural revision cloud shape.
+ *
+ * Use this high-level builder when adding the built-in cloud shape from code or
+ * from custom integrations. It creates an editable `VectorSceneItem` with
+ * `toolKind: "architectural-cloud"`, so resize, stroke styling, selection, and
+ * serialization continue to work like the built-in rectangle and ellipse tools.
+ *
+ * @example
+ * ```ts
+ * const cloud = createArchitecturalCloudItem(createShapeId(), {
+ *   x: 40,
+ *   y: 30,
+ *   width: 180,
+ *   height: 90,
+ * });
+ * ```
+ */
+declare function createArchitecturalCloudItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates a straight line or arrow; `line` is usually from {@link lineEndpointsToLocal}. */
 declare function createLineItem(id: string, bounds: Rect, line: LineEndpointsLocal, toolKind: "line" | "arrow", style?: Partial<StrokeStyle>, arrowBind?: ArrowBindings): VectorSceneItem;
 /** “Draw dot” tool: a small filled circle at (`worldX`, `worldY`). */
@@ -200,4 +241,4 @@ declare function createImageFromVectorTrace(id: string, bounds: Rect, imageVecto
     height: number;
 }): VectorSceneItem;
 
-export { DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArrowSvg as b, buildDrawDotSvg as c, buildEllipseSvg as d, buildFreehandPathSvg as e, buildLineSvg as f, buildRectSvg as g, computeFreehandSvgPayload as h, createDrawDotItem as i, createEllipseItem as j, createFreehandStrokeItem as k, createImageFromVectorTrace as l, createImageItem as m, createLineItem as n, createRectangleItem as o, createShapeId as p, createTextItem as q, lineEndpointsToLocal as r, rebuildItemSvg as s, resolveStrokeStyle as t, type VectorViewportAssetStore as u, type VectorViewportAssetHydrationRequest as v, type VectorViewportAssetResolveRequest as w, type VectorViewportAssetResolveResult as x, type VectorViewportAssetUploadRequest as y, type VectorViewportAssetUploadResult as z };
+export { type VectorViewportAssetResolveResult as A, type VectorViewportAssetUploadRequest as B, type VectorViewportAssetUploadResult as C, DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArchitecturalCloudPathD as b, buildArchitecturalCloudSvg as c, buildArrowSvg as d, buildDrawDotSvg as e, buildEllipseSvg as f, buildFreehandPathSvg as g, buildLineSvg as h, buildRectSvg as i, computeFreehandSvgPayload as j, createArchitecturalCloudItem as k, createDrawDotItem as l, createEllipseItem as m, createFreehandStrokeItem as n, createImageFromVectorTrace as o, createImageItem as p, createLineItem as q, createRectangleItem as r, createShapeId as s, createTextItem as t, lineEndpointsToLocal as u, rebuildItemSvg as v, resolveStrokeStyle as w, type VectorViewportAssetStore as x, type VectorViewportAssetHydrationRequest as y, type VectorViewportAssetResolveRequest as z };

package/dist/{shape-builders-ENwnK-zT.d.ts → shape-builders-CsbSRZnQ.d.cts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-CB0TZZuk.js';
+import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-Bnq2HtHQ.cjs';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -120,6 +120,28 @@ declare const DEFAULT_STROKE_STYLE: StrokeStyle;
 declare function resolveStrokeStyle(item: VectorSceneItem): StrokeStyle;
 declare function buildRectSvg(width: number, height: number, style?: StrokeStyle): string;
 declare function buildEllipseSvg(width: number, height: number, style?: StrokeStyle): string;
+/**
+ * Returns the local SVG path for a scalable architectural revision cloud.
+ *
+ * Use this low-level helper when you need to preview or inspect the shape without
+ * creating a full scene item. Prefer {@link createArchitecturalCloudItem} when
+ * adding a cloud to a `VectorSceneItem[]`, because it keeps `toolKind`, bounds,
+ * stroke fields, and `childrenSvg` synchronized for editing.
+ *
+ * @example
+ * ```ts
+ * const d = buildArchitecturalCloudPathD(180, 90);
+ * ```
+ */
+declare function buildArchitecturalCloudPathD(width: number, height: number, strokeWidth?: number): string;
+/**
+ * Builds an SVG fragment for an architectural revision cloud outline.
+ *
+ * This is the renderer-level primitive behind the built-in `"architectural-cloud"`
+ * tool. Prefer {@link createArchitecturalCloudItem} for app code that inserts a
+ * normal editable scene item.
+ */
+declare function buildArchitecturalCloudSvg(width: number, height: number, style?: StrokeStyle): string;
 declare function buildLineSvg(line: LineEndpointsLocal, style?: StrokeStyle): string;
 declare function buildArrowSvg(itemId: string, line: LineEndpointsLocal, style?: StrokeStyle): string;
 declare function buildDrawDotSvg(r: number, style?: StrokeStyle): string;
@@ -181,6 +203,25 @@ declare function applyStrokeToItem(item: VectorSceneItem, patch: Partial<Pick<Ve
 declare function createRectangleItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates an ellipse shape. */
 declare function createEllipseItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
+/**
+ * Creates an architectural revision cloud shape.
+ *
+ * Use this high-level builder when adding the built-in cloud shape from code or
+ * from custom integrations. It creates an editable `VectorSceneItem` with
+ * `toolKind: "architectural-cloud"`, so resize, stroke styling, selection, and
+ * serialization continue to work like the built-in rectangle and ellipse tools.
+ *
+ * @example
+ * ```ts
+ * const cloud = createArchitecturalCloudItem(createShapeId(), {
+ *   x: 40,
+ *   y: 30,
+ *   width: 180,
+ *   height: 90,
+ * });
+ * ```
+ */
+declare function createArchitecturalCloudItem(id: string, bounds: Rect, style?: Partial<StrokeStyle>): VectorSceneItem;
 /** Creates a straight line or arrow; `line` is usually from {@link lineEndpointsToLocal}. */
 declare function createLineItem(id: string, bounds: Rect, line: LineEndpointsLocal, toolKind: "line" | "arrow", style?: Partial<StrokeStyle>, arrowBind?: ArrowBindings): VectorSceneItem;
 /** “Draw dot” tool: a small filled circle at (`worldX`, `worldY`). */
@@ -200,4 +241,4 @@ declare function createImageFromVectorTrace(id: string, bounds: Rect, imageVecto
     height: number;
 }): VectorSceneItem;
 
-export { DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArrowSvg as b, buildDrawDotSvg as c, buildEllipseSvg as d, buildFreehandPathSvg as e, buildLineSvg as f, buildRectSvg as g, computeFreehandSvgPayload as h, createDrawDotItem as i, createEllipseItem as j, createFreehandStrokeItem as k, createImageFromVectorTrace as l, createImageItem as m, createLineItem as n, createRectangleItem as o, createShapeId as p, createTextItem as q, lineEndpointsToLocal as r, rebuildItemSvg as s, resolveStrokeStyle as t, type VectorViewportAssetStore as u, type VectorViewportAssetHydrationRequest as v, type VectorViewportAssetResolveRequest as w, type VectorViewportAssetResolveResult as x, type VectorViewportAssetUploadRequest as y, type VectorViewportAssetUploadResult as z };
+export { type VectorViewportAssetResolveResult as A, type VectorViewportAssetUploadRequest as B, type VectorViewportAssetUploadResult as C, DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArchitecturalCloudPathD as b, buildArchitecturalCloudSvg as c, buildArrowSvg as d, buildDrawDotSvg as e, buildEllipseSvg as f, buildFreehandPathSvg as g, buildLineSvg as h, buildRectSvg as i, computeFreehandSvgPayload as j, createArchitecturalCloudItem as k, createDrawDotItem as l, createEllipseItem as m, createFreehandStrokeItem as n, createImageFromVectorTrace as o, createImageItem as p, createLineItem as q, createRectangleItem as r, createShapeId as s, createTextItem as t, lineEndpointsToLocal as u, rebuildItemSvg as v, resolveStrokeStyle as w, type VectorViewportAssetStore as x, type VectorViewportAssetHydrationRequest as y, type VectorViewportAssetResolveRequest as z };

package/dist/tldraw.cjs

@@ -223,6 +223,22 @@ function resolveStrokeStyle(item) {
 function strokeOpacityAttr(style) {
   return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
 }
+function svgNumber(value) {
+  if (!Number.isFinite(value)) return "0";
+  const rounded = Math.round(value * 100) / 100;
+  return Number.isInteger(rounded) ? String(rounded) : String(rounded);
+}
+function approximateEllipsePerimeter(rx, ry) {
+  if (rx <= 0 || ry <= 0) return 0;
+  return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
+}
+function architecturalCloudScallopCount(rx, ry, amplitude) {
+  const perimeter = approximateEllipsePerimeter(rx, ry);
+  const targetScallopLength = Math.max(10, amplitude * 2);
+  let count = Math.max(12, Math.round(perimeter / targetScallopLength));
+  if (count % 2 === 1) count += 1;
+  return count;
+}
 function buildRectSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   return `<rect width="${width}" height="${height}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" rx="4"${strokeOpacityAttr(style)} />`;
 }
@@ -231,6 +247,49 @@ function buildEllipseSvg(width, height, style = DEFAULT_STROKE_STYLE) {
   const ry = height / 2;
   return `<ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
 }
+function buildArchitecturalCloudPathD(width, height, strokeWidth = DEFAULT_STROKE_STYLE.strokeWidth) {
+  const w = Math.max(0, width);
+  const h = Math.max(0, height);
+  if (w <= 0 || h <= 0) return "";
+  const inset = Math.max(0.5, strokeWidth / 2);
+  const outerRx = Math.max(0, w / 2 - inset);
+  const outerRy = Math.max(0, h / 2 - inset);
+  if (outerRx <= 0 || outerRy <= 0) return "";
+  const amplitude = Math.min(
+    outerRx * 0.45,
+    outerRy * 0.45,
+    Math.max(2, Math.min(8, Math.min(w, h) * 0.04))
+  );
+  const innerRx = Math.max(0, outerRx - amplitude);
+  const innerRy = Math.max(0, outerRy - amplitude);
+  const scallopCount = architecturalCloudScallopCount(innerRx, innerRy, amplitude);
+  const angleStep = Math.PI * 2 / scallopCount;
+  const cx = w / 2;
+  const cy = h / 2;
+  const startAngle = -Math.PI / 2;
+  const pointOnEllipse = (theta, radiusX, radiusY) => [
+    cx + Math.cos(theta) * radiusX,
+    cy + Math.sin(theta) * radiusY
+  ];
+  const [startX, startY] = pointOnEllipse(startAngle, innerRx, innerRy);
+  const segments = [`M${svgNumber(startX)} ${svgNumber(startY)}`];
+  for (let index = 0; index < scallopCount; index += 1) {
+    const segmentStart = startAngle + index * angleStep;
+    const segmentMid = segmentStart + angleStep / 2;
+    const segmentEnd = segmentStart + angleStep;
+    const [controlX, controlY] = pointOnEllipse(segmentMid, outerRx, outerRy);
+    const [endX, endY] = pointOnEllipse(segmentEnd, innerRx, innerRy);
+    segments.push(
+      `Q${svgNumber(controlX)} ${svgNumber(controlY)} ${svgNumber(endX)} ${svgNumber(endY)}`
+    );
+  }
+  segments.push("Z");
+  return segments.join(" ");
+}
+function buildArchitecturalCloudSvg(width, height, style = DEFAULT_STROKE_STYLE) {
+  const d = buildArchitecturalCloudPathD(width, height, style.strokeWidth);
+  return `<path d="${d}" fill="none" stroke="${style.stroke}" stroke-width="${style.strokeWidth}" stroke-linecap="round" stroke-linejoin="round"${strokeOpacityAttr(style)} />`;
+}
 function buildLineSvg(line, style = DEFAULT_STROKE_STYLE) {
   return `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${style.stroke}" stroke-width="${style.strokeWidth}"${strokeOpacityAttr(style)} />`;
 }
@@ -369,6 +428,13 @@ function rebuildItemSvg(item) {
       childrenSvg: buildEllipseSvg(b.width, b.height, style)
     };
   }
+  if (k === "architectural-cloud") {
+    const b = normalizeRect(item.bounds);
+    return {
+      ...item,
+      childrenSvg: buildArchitecturalCloudSvg(b.width, b.height, style)
+    };
+  }
   if ((k === "line" || k === "arrow") && item.line) {
     const line = item.line;
     const childrenSvg = k === "arrow" ? buildArrowSvg(item.id, line, style) : buildLineSvg(line, style);
@@ -1795,8 +1861,8 @@ function itemsToTldrawSnapshot(items) {
     if (item.strokeOpacity != null) {
       props.opacity = Math.round(item.strokeOpacity * 100);
     }
-    if (type === "rect" || type === "ellipse") {
-      props.geo = type === "ellipse" ? "ellipse" : "rectangle";
+    if (type === "rect" || type === "ellipse" || type === "architectural-cloud") {
+      props.geo = type === "ellipse" ? "ellipse" : type === "architectural-cloud" ? "cloud" : "rectangle";
       props.fill = "none";
     } else if (type === "draw" || type === "marker") {
       props.segments = [