canvu-react 0.3.29 → 0.3.30

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,41 @@ function resolveStrokeStyle(item) {
 function strokeOpacityAttr(style) {
   return style.strokeOpacity != null ? ` stroke-opacity="${style.strokeOpacity}"` : "";
 }
+function clampNumber(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function svgNumber(value) {
+  if (!Number.isFinite(value)) return "0";
+  return Number(value.toFixed(3)).toString();
+}
+function architecturalCloudScallopCount(length, depth) {
+  if (length <= 1e-6) return 0;
+  return Math.max(1, Math.round(length / Math.max(depth * 2.05, 8)));
+}
+function appendHorizontalScallops(segments, startX, endX, y, controlY, count) {
+  if (count <= 0) return;
+  const step = (endX - startX) / count;
+  for (let index = 1; index <= count; index += 1) {
+    const x0 = startX + step * (index - 1);
+    const x1 = index === count ? endX : startX + step * index;
+    const cx = (x0 + x1) / 2;
+    segments.push(
+      `Q${svgNumber(cx)} ${svgNumber(controlY)} ${svgNumber(x1)} ${svgNumber(y)}`
+    );
+  }
+}
+function appendVerticalScallops(segments, startY, endY, x, controlX, count) {
+  if (count <= 0) return;
+  const step = (endY - startY) / count;
+  for (let index = 1; index <= count; index += 1) {
+    const y0 = startY + step * (index - 1);
+    const y1 = index === count ? endY : startY + step * index;
+    const cy = (y0 + y1) / 2;
+    segments.push(
+      `Q${svgNumber(controlX)} ${svgNumber(cy)} ${svgNumber(x)} ${svgNumber(y1)}`
+    );
+  }
+}
 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 +266,63 @@ 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.min(w / 2, h / 2, Math.max(0.5, strokeWidth / 2));
+  const x0 = inset;
+  const y0 = inset;
+  const x1 = Math.max(x0, w - inset);
+  const y1 = Math.max(y0, h - inset);
+  const innerW = Math.max(0, x1 - x0);
+  const innerH = Math.max(0, y1 - y0);
+  if (innerW <= 0 || innerH <= 0) return "";
+  const maxDepth = Math.max(0.5, Math.min(innerW, innerH) * 0.18);
+  const depth = clampNumber(Math.min(w, h) * 0.08, 2, Math.min(12, maxDepth));
+  const corner = Math.min(depth * 1.2, innerW / 2, innerH / 2);
+  const topStart = x0 + corner;
+  const topEnd = x1 - corner;
+  const rightStart = y0 + corner;
+  const rightEnd = y1 - corner;
+  const bottomStart = x1 - corner;
+  const bottomEnd = x0 + corner;
+  const leftStart = y1 - corner;
+  const leftEnd = y0 + corner;
+  const topCount = architecturalCloudScallopCount(topEnd - topStart, depth);
+  const rightCount = architecturalCloudScallopCount(rightEnd - rightStart, depth);
+  const bottomCount = architecturalCloudScallopCount(bottomStart - bottomEnd, depth);
+  const leftCount = architecturalCloudScallopCount(leftStart - leftEnd, depth);
+  const segments = [`M${svgNumber(topStart)} ${svgNumber(y0)}`];
+  appendHorizontalScallops(segments, topStart, topEnd, y0, y0 + depth, topCount);
+  segments.push(
+    `Q${svgNumber(x1)} ${svgNumber(y0)} ${svgNumber(x1)} ${svgNumber(rightStart)}`
+  );
+  appendVerticalScallops(segments, rightStart, rightEnd, x1, x1 - depth, rightCount);
+  segments.push(
+    `Q${svgNumber(x1)} ${svgNumber(y1)} ${svgNumber(bottomStart)} ${svgNumber(y1)}`
+  );
+  appendHorizontalScallops(
+    segments,
+    bottomStart,
+    bottomEnd,
+    y1,
+    y1 - depth,
+    bottomCount
+  );
+  segments.push(
+    `Q${svgNumber(x0)} ${svgNumber(y1)} ${svgNumber(x0)} ${svgNumber(leftStart)}`
+  );
+  appendVerticalScallops(segments, leftStart, leftEnd, x0, x0 + depth, leftCount);
+  segments.push(
+    `Q${svgNumber(x0)} ${svgNumber(y0)} ${svgNumber(topStart)} ${svgNumber(y0)} 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 +461,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 +1894,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 = [