canvu-react 0.3.39 → 0.3.40

package/dist/react.cjs

@@ -91,6 +91,12 @@ function lineHeightFor(fontSize) {
 function firstLineBaselineY(fontSize) {
   return fontSize * FIRST_LINE_BASELINE_RATIO;
 }
+function textBaselineYFor(fontSize) {
+  return firstLineBaselineY(fontSize);
+}
+function textLineHeightFor(fontSize) {
+  return lineHeightFor(fontSize);
+}
 function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const cacheKey = textMeasureCacheKey(content, fontSize);
   const cached = textMeasureCache.get(cacheKey);
@@ -104,7 +110,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);
@@ -120,22 +126,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++) {
@@ -146,28 +152,32 @@ 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">${escapeHtmlText(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">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
   }
   const body = escapeHtmlText(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>`;
 }
-var DEFAULT_TEXT_FONT_SIZE, LINE_HEIGHT_RATIO, FIRST_LINE_BASELINE_RATIO, PLACEHOLDER, MIN_TEXT_BOX_W, MIN_TEXT_BOX_H, TEXT_PAD_X, MAX_TEXT_MEASURE_CACHE_ENTRIES, sharedMeasureContext, textMeasureCache;
+var DEFAULT_TEXT_FONT_SIZE, TEXT_FONT_FAMILY, LINE_HEIGHT_RATIO, FIRST_LINE_BASELINE_RATIO, EDIT_TOP_PAD_RATIO, BOTTOM_PAD_RATIO, PLACEHOLDER, MIN_TEXT_BOX_W, MIN_TEXT_BOX_H, TEXT_PAD_X, MAX_TEXT_MEASURE_CACHE_ENTRIES, sharedMeasureContext, textMeasureCache;
 var init_text_svg = __esm({
   "src/scene/text-svg.ts"() {
     DEFAULT_TEXT_FONT_SIZE = 18;
+    TEXT_FONT_FAMILY = "Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif";
     LINE_HEIGHT_RATIO = 22 / 18;
-    FIRST_LINE_BASELINE_RATIO = 24 / 18;
+    FIRST_LINE_BASELINE_RATIO = 20 / 18;
+    EDIT_TOP_PAD_RATIO = 4 / 18;
+    BOTTOM_PAD_RATIO = 4 / 18;
     PLACEHOLDER = "Tap to type";
     MIN_TEXT_BOX_W = 40;
-    MIN_TEXT_BOX_H = 36;
+    MIN_TEXT_BOX_H = 26;
     TEXT_PAD_X = 4;
     MAX_TEXT_MEASURE_CACHE_ENTRIES = 2e3;
     textMeasureCache = /* @__PURE__ */ new Map();
@@ -280,7 +290,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) {
@@ -603,6 +614,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) {
@@ -617,6 +652,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)
   );
@@ -659,7 +706,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(
@@ -871,7 +919,7 @@ function createDrawDotItem(id, worldX, worldY, radius, style) {
     childrenSvg: ""
   });
 }
-function createTextItem(id, bounds, text = "", style) {
+function createTextItem(id, bounds, text = "", style, textFontSize) {
   const r = normalizeRect(bounds);
   const s = { ...DEFAULT_STROKE_STYLE, ...style };
   return rebuildItemSvg({
@@ -884,6 +932,7 @@ function createTextItem(id, bounds, text = "", style) {
     stroke: s.stroke,
     strokeWidth: s.strokeWidth,
     ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...textFontSize != null ? { textFontSize } : {},
     childrenSvg: ""
   });
 }
@@ -920,6 +969,7 @@ function createFreehandStrokeItem(id, pointsWorld, toolKind, style) {
     stroke: merged.stroke,
     strokeWidth: merged.strokeWidth,
     ...merged.strokeOpacity != null ? { strokeOpacity: merged.strokeOpacity } : {},
+    ...merged.strokeDash != null ? { strokeDash: merged.strokeDash } : {},
     pathPointsLocal,
     childrenSvg: ""
   });
@@ -996,7 +1046,7 @@ var init_shape_builders = __esm({
     init_custom_shape();
     init_text_svg();
     DEFAULT_STROKE_STYLE = {
-      stroke: "#2563eb",
+      stroke: "#1d1d1d",
       strokeWidth: 2
     };
     TOOL_FREEHAND_DEFAULTS = {
@@ -3488,33 +3538,416 @@ var DEFAULT_VECTOR_TOOLS = [
     shortcutHint: "I"
   }
 ];
+
+// src/react/VectorSelectionInspector.tsx
+init_text_svg();
 var shellLook = {
   display: "flex",
   flexDirection: "column",
-  gap: 8,
-  minWidth: 160,
-  padding: "10px 12px",
-  borderRadius: 8,
-  border: "1px solid rgba(0,0,0,0.12)",
-  background: "rgba(255,255,255,0.96)",
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  gap: 10,
+  minWidth: 200,
+  padding: "12px 14px",
+  borderRadius: 10,
+  border: "1px solid rgba(0,0,0,0.1)",
+  background: "rgba(255,255,255,0.97)",
+  boxShadow: "0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08)",
   pointerEvents: "auto"
 };
-var labelStyle2 = {
+var sectionLabelStyle = {
   display: "flex",
   flexDirection: "column",
-  gap: 4,
+  gap: 6,
   fontSize: 11,
   fontWeight: 600,
-  color: "#52525b"
+  color: "#52525b",
+  letterSpacing: "0.02em",
+  textTransform: "uppercase"
 };
+var mixedHintStyle = {
+  fontWeight: 400,
+  color: "#a1a1aa",
+  textTransform: "none",
+  letterSpacing: 0
+};
+var TLDRAW_PALETTE = [
+  { name: "black", hex: "#1d1d1d" },
+  { name: "grey", hex: "#9fa8b2" },
+  { name: "light-violet", hex: "#e085f4" },
+  { name: "violet", hex: "#ae3ec9" },
+  { name: "blue", hex: "#4263eb" },
+  { name: "light-blue", hex: "#4dabf7" },
+  { name: "yellow", hex: "#ffc078" },
+  { name: "orange", hex: "#f76707" },
+  { name: "green", hex: "#099268" },
+  { name: "light-green", hex: "#40c057" },
+  { name: "light-red", hex: "#ff8787" },
+  { name: "red", hex: "#e03131" }
+];
 function normalizeHex(stroke) {
   if (/^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
-  return "#2563eb";
+  return "#1d1d1d";
+}
+function hexesEqual(a, b) {
+  return a.toLowerCase() === b.toLowerCase();
 }
 function isStylableKind(tk) {
   return tk === "rect" || tk === "ellipse" || tk === "architectural-cloud" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
 }
+var FONT_SIZE_PRESETS = [
+  { label: "S", size: 14 },
+  { label: "M", size: 18 },
+  { label: "L", size: 28 },
+  { label: "XL", size: 44 }
+];
+function ColorSwatch({ color, selected, onSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": color.name,
+      "aria-pressed": selected,
+      onClick: onSelect,
+      onPointerDown: (e) => {
+        if (e.pointerType === "mouse") e.preventDefault();
+      },
+      style: {
+        width: 24,
+        height: 24,
+        padding: 0,
+        borderRadius: "50%",
+        border: selected ? "2px solid #18181b" : "1px solid rgba(0,0,0,0.12)",
+        background: color.hex,
+        cursor: "pointer",
+        outline: "none",
+        boxShadow: selected ? "0 0 0 2px rgba(255,255,255,0.95) inset" : "none",
+        transition: "transform 0.08s ease",
+        transform: selected ? "scale(1.08)" : "scale(1)",
+        WebkitTapHighlightColor: "transparent"
+      }
+    }
+  );
+}
+function ColorPalette({ value, onChange }) {
+  const [showCustom, setShowCustom] = react.useState(false);
+  const normalized = normalizeHex(value);
+  const inPalette = TLDRAW_PALETTE.some((c) => hexesEqual(c.hex, normalized));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(6, 24px)",
+        gap: 6,
+        rowGap: 6,
+        alignItems: "center"
+      },
+      children: [
+        TLDRAW_PALETTE.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColorSwatch,
+          {
+            color: c,
+            selected: hexesEqual(c.hex, normalized),
+            onSelect: () => onChange(c.hex)
+          },
+          c.name
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Cor personalizada",
+            "aria-pressed": showCustom || !inPalette,
+            onClick: () => setShowCustom((v) => !v),
+            onPointerDown: (e) => {
+              if (e.pointerType === "mouse") e.preventDefault();
+            },
+            style: {
+              width: 24,
+              height: 24,
+              padding: 0,
+              borderRadius: "50%",
+              border: !inPalette || showCustom ? "2px solid #18181b" : "1px solid rgba(0,0,0,0.12)",
+              background: "conic-gradient(from 0deg, #ff5757, #ffbd59, #59ff7e, #59ddff, #b259ff, #ff59c1, #ff5757)",
+              cursor: "pointer",
+              outline: "none",
+              WebkitTapHighlightColor: "transparent"
+            }
+          }
+        ),
+        showCustom || !inPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 11,
+              fontWeight: 500,
+              color: "#71717a",
+              textTransform: "none",
+              letterSpacing: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  value: normalized,
+                  onChange: (e) => onChange(e.target.value),
+                  style: {
+                    width: 28,
+                    height: 28,
+                    padding: 0,
+                    border: "1px solid rgba(0,0,0,0.12)",
+                    borderRadius: 6,
+                    cursor: "pointer",
+                    background: "transparent"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: normalized.toUpperCase() })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DashTabs({ value, onChange }) {
+  const tabs = [
+    { id: "solid", label: "Cont\xEDnuo" },
+    { id: "dashed", label: "Tracejado" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Estilo do tra\xE7o",
+      style: {
+        display: "flex",
+        background: "rgba(24,24,27,0.06)",
+        borderRadius: 7,
+        padding: 2,
+        gap: 2
+      },
+      children: tabs.map((t) => {
+        const selected = value === t.id;
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: styled segmented control needs button, not input[type=radio]
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              onClick: () => onChange(t.id),
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              style: {
+                flex: 1,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "5px 8px",
+                fontSize: 11,
+                fontWeight: 600,
+                color: selected ? "#18181b" : "#71717a",
+                background: selected ? "#fff" : "transparent",
+                borderRadius: 5,
+                border: "none",
+                cursor: "pointer",
+                boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                outline: "none",
+                WebkitTapHighlightColor: "transparent"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(DashTabSwatch, { dashed: t.id === "dashed" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 6 }, children: t.label })
+              ]
+            },
+            t.id
+          )
+        );
+      })
+    }
+  );
+}
+function DashTabSwatch({ dashed }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 26,
+      height: 6,
+      "aria-hidden": true,
+      style: { flexShrink: 0, display: "block" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: dashed ? "dashed" : "solid" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 1,
+            y1: 3,
+            x2: 25,
+            y2: 3,
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeDasharray: dashed ? "4 3" : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+function FontSizeTabs({ value, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Tamanho do texto",
+      style: {
+        display: "flex",
+        background: "rgba(24,24,27,0.06)",
+        borderRadius: 7,
+        padding: 2,
+        gap: 2
+      },
+      children: FONT_SIZE_PRESETS.map((p) => {
+        const selected = Math.abs(value - p.size) < 0.5;
+        return (
+          // biome-ignore lint/a11y/useSemanticElements: styled segmented control needs button, not input[type=radio]
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": `${p.label} (${p.size}px)`,
+              onClick: () => onChange(p.size),
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              style: {
+                flex: 1,
+                padding: "5px 0",
+                fontSize: p.label === "XL" ? 14 : p.label === "L" ? 13 : 12,
+                fontWeight: 700,
+                color: selected ? "#18181b" : "#71717a",
+                background: selected ? "#fff" : "transparent",
+                borderRadius: 5,
+                border: "none",
+                cursor: "pointer",
+                boxShadow: selected ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
+                outline: "none",
+                WebkitTapHighlightColor: "transparent",
+                lineHeight: 1
+              },
+              children: p.label
+            },
+            p.label
+          )
+        );
+      })
+    }
+  );
+}
+function viewModelFromActiveTool(activeToolStyle) {
+  const hex = normalizeHex(activeToolStyle.stroke);
+  const strokeWidth = activeToolStyle.strokeWidth;
+  const strokeOpacity = activeToolStyle.strokeOpacity ?? 1;
+  const strokeDash = activeToolStyle.strokeDash === "dashed" ? "dashed" : "solid";
+  const textFontSize = activeToolStyle.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
+  const isText = activeToolStyle.toolKind === "text";
+  const isDraw = activeToolStyle.toolKind === "draw";
+  const isMarker = activeToolStyle.toolKind === "marker";
+  const current = {
+    stroke: hex,
+    strokeWidth,
+    ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {},
+    ...activeToolStyle.strokeDash != null ? { strokeDash: activeToolStyle.strokeDash } : {},
+    ...isText ? { textFontSize } : {}
+  };
+  return {
+    label: activeToolStyle.label ?? "Estilo da ferramenta",
+    count: 0,
+    hex,
+    strokeWidth,
+    strokeOpacity,
+    strokeDash,
+    textFontSize,
+    showStrokeWidth: !isText,
+    showDash: isDraw,
+    showFontSize: isText,
+    showMarkerOpacity: isMarker,
+    mixedStroke: false,
+    mixedWidth: false,
+    mixedDash: false,
+    mixedFontSize: false,
+    mixedOpacity: false,
+    current
+  };
+}
+function viewModelFromSelection(stylable) {
+  const first = stylable[0];
+  if (!first) return null;
+  const hex = normalizeHex(first.stroke ?? "#1d1d1d");
+  const strokeWidth = first.strokeWidth ?? 2;
+  const allSameStroke = stylable.every(
+    (it) => (it.stroke ?? "#1d1d1d") === (first.stroke ?? "#1d1d1d")
+  );
+  const allSameWidth = stylable.every(
+    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
+  );
+  const draws = stylable.filter(
+    (it) => it.toolKind === "draw" || it.toolKind === "pencil"
+  );
+  const showDash = draws.length > 0;
+  const firstDraw = draws[0];
+  const strokeDash = firstDraw?.strokeDash === "dashed" ? "dashed" : "solid";
+  const allSameDash = draws.length === 0 || draws.every((it) => (it.strokeDash ?? "solid") === strokeDash);
+  const markers = stylable.filter((it) => it.toolKind === "marker");
+  const showMarkerOpacity = markers.length > 0;
+  const firstMarker = markers[0];
+  const strokeOpacity = firstMarker?.strokeOpacity ?? 1;
+  const allSameOpacity = markers.length === 0 || markers.every(
+    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
+  );
+  const texts = stylable.filter((it) => it.toolKind === "text");
+  const showFontSize = texts.length > 0;
+  const firstText = texts[0];
+  const textFontSize = firstText?.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
+  const allSameFontSize = texts.length === 0 || texts.every(
+    (it) => (it.textFontSize ?? DEFAULT_TEXT_FONT_SIZE) === textFontSize
+  );
+  const current = {
+    stroke: hex,
+    strokeWidth,
+    ...showMarkerOpacity ? { strokeOpacity } : {},
+    ...showDash ? { strokeDash } : {},
+    ...showFontSize ? { textFontSize } : {}
+  };
+  return {
+    label: "Estilo da sele\xE7\xE3o",
+    count: stylable.length,
+    hex,
+    strokeWidth,
+    strokeOpacity,
+    strokeDash,
+    textFontSize,
+    showStrokeWidth: true,
+    showDash,
+    showFontSize,
+    showMarkerOpacity,
+    mixedStroke: !allSameStroke,
+    mixedWidth: !allSameWidth,
+    mixedDash: !allSameDash,
+    mixedFontSize: !allSameFontSize,
+    mixedOpacity: !allSameOpacity,
+    current
+  };
+}
 function VectorSelectionInspector({
   items: itemsProp,
   activeToolStyle: activeToolStyleProp,
@@ -3530,175 +3963,93 @@ function VectorSelectionInspector({
   const activeToolStyle = activeToolStyleProp === void 0 ? ctx?.activeToolStyle ?? null : activeToolStyleProp;
   const onChange = onChangeProp ?? ctx?.onSelectionStyleChange ?? null;
   if (!onChange) return null;
+  let vm = null;
+  if (activeToolStyle) {
+    vm = viewModelFromActiveTool(activeToolStyle);
+  } else {
+    const stylable = items.filter(
+      (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
+    );
+    if (stylable.length === 0) return null;
+    vm = viewModelFromSelection(stylable);
+  }
+  if (!vm) return null;
+  const apply = (changes) => onChange({ ...vm.current, ...changes });
   const shell = {
     ...getBoardPositionStyle(position, inset, zIndex),
     ...shellLook,
     ...style
   };
-  if (activeToolStyle) {
-    const stroke2 = activeToolStyle.stroke;
-    const strokeWidth2 = activeToolStyle.strokeWidth;
-    const hex2 = normalizeHex(stroke2);
-    const showMarkerOpacity2 = activeToolStyle.toolKind === "marker";
-    const opacityPct2 = Math.round((activeToolStyle.strokeOpacity ?? 1) * 100);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
-      {
-        "data-slot": "vector-selection-inspector",
-        "data-position": position,
-        className,
-        "aria-label": activeToolStyle.label ?? "Estilo da ferramenta",
-        style: shell,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
-            "Cor",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "color",
-                value: hex2,
-                onChange: (e) => onChange({
-                  stroke: e.target.value,
-                  strokeWidth: strokeWidth2,
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                }),
-                style: {
-                  width: "100%",
-                  height: 32,
-                  padding: 0,
-                  border: "none",
-                  cursor: "pointer",
-                  background: "transparent"
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
-            "Grossura",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 1,
-                max: 48,
-                value: strokeWidth2,
-                onChange: (e) => onChange({
-                  stroke: hex2,
-                  strokeWidth: Number(e.target.value),
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                })
-              }
-            )
-          ] }),
-          showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
-            "Opacidade (marcador)",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 10,
-                max: 100,
-                value: opacityPct2,
-                onChange: (e) => {
-                  const v = Number(e.target.value) / 100;
-                  onChange({
-                    stroke: hex2,
-                    strokeWidth: strokeWidth2,
-                    strokeOpacity: v
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              opacityPct2,
-              "%"
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-  const stylable = items.filter(
-    (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
-  );
-  if (stylable.length === 0) return null;
-  const first = stylable[0];
-  if (!first) return null;
-  const allSameStroke = stylable.every(
-    (it) => (it.stroke ?? "#2563eb") === (first.stroke ?? "#2563eb")
-  );
-  const allSameWidth = stylable.every(
-    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
-  );
-  const stroke = first.stroke ?? "#2563eb";
-  const strokeWidth = first.strokeWidth ?? 2;
-  const hex = normalizeHex(stroke);
-  const markers = stylable.filter((it) => it.toolKind === "marker");
-  const showMarkerOpacity = markers.length > 0;
-  const firstMarker = markers[0];
-  const allSameMarkerOpacity = markers.length > 0 && markers.every(
-    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
-  );
-  const opacityPct = firstMarker ? Math.round((firstMarker.strokeOpacity ?? 1) * 100) : 100;
+  const opacityPct = Math.round(vm.strokeOpacity * 100);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       "data-slot": "vector-selection-inspector",
       "data-position": position,
       className,
-      "aria-label": "Estilo da sele\xE7\xE3o",
+      "aria-label": vm.label,
       style: shell,
       children: [
-        stylable.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
-          stylable.length,
+        vm.count > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
+          vm.count,
           " objetos selecionados"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
-          "Cor",
-          !allSameStroke && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: [
-            " ",
-            "(valores misturados \u2014 novo valor aplica a todos)"
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Cor", style: sectionLabelStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Cor",
+            vm.mixedStroke ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (valores misturados)" }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "color",
-              value: hex,
-              onChange: (e) => onChange({
-                stroke: e.target.value,
-                strokeWidth
-              }),
-              style: {
-                width: "100%",
-                height: 32,
-                padding: 0,
-                border: "none",
-                cursor: "pointer",
-                background: "transparent"
-              }
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(ColorPalette, { value: vm.hex, onChange: (h) => apply({ stroke: h }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+        vm.showStrokeWidth ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: sectionLabelStyle, children: [
           "Grossura",
-          !allSameWidth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
+          vm.mixedWidth ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "range",
               min: 1,
               max: 48,
-              value: strokeWidth,
-              onChange: (e) => onChange({
-                stroke: hex,
-                strokeWidth: Number(e.target.value)
-              })
+              value: vm.strokeWidth,
+              onChange: (e) => apply({ strokeWidth: Number(e.target.value) })
             }
           )
-        ] }),
-        showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
-          "Opacidade (marcador)",
-          !allSameMarkerOpacity && markers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
+        ] }) : null,
+        vm.showDash ? (
+          // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Tra\xE7o", style: sectionLabelStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Tra\xE7o",
+              vm.mixedDash ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DashTabs,
+              {
+                value: vm.strokeDash,
+                onChange: (next) => apply({ strokeDash: next })
+              }
+            )
+          ] })
+        ) : null,
+        vm.showFontSize ? (
+          // biome-ignore lint/a11y/useSemanticElements: fieldset would impose default browser styling that breaks the inspector layout
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Tamanho", style: sectionLabelStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "Tamanho",
+              vm.mixedFontSize ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FontSizeTabs,
+              {
+                value: vm.textFontSize,
+                onChange: (size) => apply({ textFontSize: size })
+              }
+            )
+          ] })
+        ) : null,
+        vm.showMarkerOpacity ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: sectionLabelStyle, children: [
+          "Opacidade",
+          vm.mixedOpacity ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: mixedHintStyle, children: " (misturado)" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -3706,21 +4057,14 @@ function VectorSelectionInspector({
               min: 10,
               max: 100,
               value: opacityPct,
-              onChange: (e) => {
-                const v = Number(e.target.value) / 100;
-                onChange({
-                  stroke: hex,
-                  strokeWidth,
-                  strokeOpacity: v
-                });
-              }
+              onChange: (e) => apply({ strokeOpacity: Number(e.target.value) / 100 })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
             opacityPct,
             "%"
           ] })
-        ] })
+        ] }) : null
       ]
     }
   );
@@ -4199,6 +4543,24 @@ function splitToolbarTools(tools, overflowIds) {
   const overflow = overflowIds.map((id) => tools.find((t) => t.id === id)).filter((t) => Boolean(t));
   return { primary, overflow };
 }
+function usePromotedOverflowTool({
+  overflowTools,
+  selectedId,
+  initialPromotedId
+}) {
+  const [lastOverflowToolId, setLastOverflowToolId] = react.useState(() => {
+    if (initialPromotedId == null) return null;
+    return overflowTools.some((t) => t.id === initialPromotedId) ? initialPromotedId : null;
+  });
+  react.useEffect(() => {
+    if (overflowTools.some((t) => t.id === selectedId)) {
+      setLastOverflowToolId(selectedId);
+    }
+  }, [selectedId, overflowTools]);
+  const promotedTool = lastOverflowToolId ? overflowTools.find((t) => t.id === lastOverflowToolId) : void 0;
+  const remainingOverflowTools = promotedTool ? overflowTools.filter((t) => t.id !== promotedTool.id) : overflowTools;
+  return { promotedTool, remainingOverflowTools };
+}
 var icOverflow = { size: 18, strokeWidth: 2 };
 function useOverflowDropdown() {
   const [open, setOpen] = react.useState(false);
@@ -4733,6 +5095,15 @@ function VectorToolbarComponent({
   const pluginContext = react.useContext(CanvuPluginContext);
   const runtimeTools = pluginContext?.resolvedTools;
   const resolvedTools = tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS;
+  const { primary: primaryTools, overflow: overflowTools } = splitToolbarTools(
+    resolvedTools,
+    overflowToolIds
+  );
+  const { promotedTool, remainingOverflowTools } = usePromotedOverflowTool({
+    overflowTools,
+    selectedId: value,
+    initialPromotedId: overflowToolIds[0] ?? null
+  });
   if (typeof children === "function") {
     const ctx = {
       tools: resolvedTools,
@@ -4777,11 +5148,8 @@ function VectorToolbarComponent({
       )
     ] });
   }
-  const { primary: primaryTools, overflow: overflowTools } = splitToolbarTools(
-    resolvedTools,
-    overflowToolIds
-  );
   const showOverflowMenu = overflowTools.length > 0;
+  const showOverflowDropdown = remainingOverflowTools.length > 0;
   const inlineCtx = {
     selectedId: value,
     selectTool: onChange,
@@ -4832,6 +5200,7 @@ function VectorToolbarComponent({
             /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: toolLockDividerStyle })
           ] }) : null,
           primaryTools.map((tool) => renderInlineToolButton(tool, inlineCtx)),
+          promotedTool ? renderInlineToolButton(promotedTool, inlineCtx) : null,
           showOverflowMenu && orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -4840,10 +5209,10 @@ function VectorToolbarComponent({
               style: overflowSpacerStyle
             }
           ) : null,
-          showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(
+          showOverflowDropdown ? /* @__PURE__ */ jsxRuntime.jsx(
             ToolbarOverflowMenu,
             {
-              tools: overflowTools,
+              tools: remainingOverflowTools,
               selectedId: value,
               onSelect: onChange,
               density,
@@ -6494,6 +6863,7 @@ var VectorScene = class {
 
 // src/react/VectorViewport.tsx
 init_shape_builders();
+init_text_svg();
 
 // src/react/blob-url-lifecycle.ts
 var SVG_BLOB_HREF_PATTERN = /\b(?:href|xlink:href)=["'](blob:[^"']+)["']/g;
@@ -6699,6 +7069,9 @@ function InteractionOverlay({
       );
     } else if (placementPreview.kind === "rect" || placementPreview.kind === "ellipse" || placementPreview.kind === "architectural-cloud") {
       const r = normalizeRect(placementPreview.rect);
+      const shapeStroke = previewStrokeStyle?.stroke ?? "#1d1d1d";
+      const shapeWidth = previewStrokeStyle?.strokeWidth ?? 2;
+      const shapeOpacity = previewStrokeStyle?.strokeOpacity;
       preview = placementPreview.kind === "rect" ? /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {
@@ -6706,11 +7079,11 @@ function InteractionOverlay({
           y: r.y,
           width: r.width,
           height: r.height,
+          rx: 4,
           fill: "none",
-          stroke: "#64748b",
-          strokeWidth: overlayStrokePx,
-          strokeDasharray: dashPattern,
-          vectorEffect: "non-scaling-stroke"
+          stroke: shapeStroke,
+          strokeWidth: shapeWidth,
+          strokeOpacity: shapeOpacity
         }
       ) : placementPreview.kind === "ellipse" ? /* @__PURE__ */ jsxRuntime.jsx(
         "ellipse",
@@ -6720,29 +7093,30 @@ function InteractionOverlay({
           rx: r.width / 2,
           ry: r.height / 2,
           fill: "none",
-          stroke: "#64748b",
-          strokeWidth: overlayStrokePx,
-          strokeDasharray: dashPattern,
-          vectorEffect: "non-scaling-stroke"
+          stroke: shapeStroke,
+          strokeWidth: shapeWidth,
+          strokeOpacity: shapeOpacity
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${r.x}, ${r.y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          d: buildArchitecturalCloudPathD(r.width, r.height, overlayStrokePx),
+          d: buildArchitecturalCloudPathD(r.width, r.height, shapeWidth),
           fill: "none",
-          stroke: "#64748b",
-          strokeWidth: overlayStrokePx,
-          strokeDasharray: dashPattern,
+          stroke: shapeStroke,
+          strokeWidth: shapeWidth,
+          strokeOpacity: shapeOpacity,
           strokeLinecap: "round",
-          strokeLinejoin: "round",
-          vectorEffect: "non-scaling-stroke"
+          strokeLinejoin: "round"
         }
       ) });
     } else if (placementPreview.kind === "line" || placementPreview.kind === "arrow") {
       const { start, end } = placementPreview;
+      const shapeStroke = previewStrokeStyle?.stroke ?? "#1d1d1d";
+      const shapeWidth = previewStrokeStyle?.strokeWidth ?? 2;
+      const shapeOpacity = previewStrokeStyle?.strokeOpacity;
       const geometry = placementPreview.kind === "arrow" ? computeStraightArrowGeometry(
         { x1: start.x, y1: start.y, x2: end.x, y2: end.y },
-        overlayStrokePx
+        shapeWidth
       ) : null;
       preview = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -6752,11 +7126,10 @@ function InteractionOverlay({
             y1: start.y,
             x2: geometry?.shaftEndX ?? end.x,
             y2: geometry?.shaftEndY ?? end.y,
-            stroke: "#64748b",
-            strokeWidth: overlayStrokePx,
-            strokeDasharray: dashPattern,
-            strokeLinecap: "round",
-            vectorEffect: "non-scaling-stroke"
+            stroke: shapeStroke,
+            strokeWidth: shapeWidth,
+            strokeOpacity: shapeOpacity,
+            strokeLinecap: "round"
           }
         ),
         placementPreview.kind === "arrow" && geometry ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -6764,10 +7137,9 @@ function InteractionOverlay({
           {
             d: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
             fill: "none",
-            stroke: "#64748b",
-            strokeWidth: overlayStrokePx,
-            strokeOpacity: 0.9,
-            strokeDasharray: dashPattern,
+            stroke: shapeStroke,
+            strokeWidth: shapeWidth,
+            strokeOpacity: shapeOpacity,
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
@@ -6781,7 +7153,8 @@ function InteractionOverlay({
         const previewStyle = {
           stroke: isLaser ? "#f43f5e" : previewStrokeStyle?.stroke ?? "#64748b",
           strokeWidth: isLaser ? 4 : previewStrokeStyle?.strokeWidth ?? (tool === "marker" ? 16 : 3),
-          ...previewStrokeStyle?.strokeOpacity != null && !isLaser ? { strokeOpacity: previewStrokeStyle.strokeOpacity } : {}
+          ...previewStrokeStyle?.strokeOpacity != null && !isLaser ? { strokeOpacity: previewStrokeStyle.strokeOpacity } : {},
+          ...previewStrokeStyle?.strokeDash != null && !isLaser ? { strokeDash: previewStrokeStyle.strokeDash } : {}
         };
         const payload = computeFreehandSvgPayload(
           raw,
@@ -6825,6 +7198,7 @@ function InteractionOverlay({
                 strokeOpacity: isLaser ? 0.85 : payload.strokeOpacity,
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
+                strokeDasharray: payload.strokeDasharray,
                 shapeRendering: "geometricPrecision"
               }
             );
@@ -7230,6 +7604,9 @@ function TextEditOverlay({
   const fontSize = fsWorld * z;
   const lineHeight = fsWorld * (22 / 18) * z;
   const fixedBox = !!item.textFixedBounds;
+  const padTop = EDIT_TOP_PAD_RATIO * fsWorld * z;
+  const padX = 4 * z;
+  const textColor = item.stroke ?? "#1d1d1d";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -7260,14 +7637,14 @@ function TextEditOverlay({
             width: "100%",
             height: "100%",
             margin: 0,
-            padding: 2,
+            padding: `${padTop}px ${padX}px 0px ${padX}px`,
             border: "none",
             borderRadius: 0,
             resize: "none",
-            fontFamily: "system-ui, sans-serif",
+            fontFamily: TEXT_FONT_FAMILY,
             fontSize,
             lineHeight: `${lineHeight}px`,
-            color: "#0f172a",
+            color: textColor,
             background: "transparent",
             backgroundColor: "transparent",
             outline: "none",
@@ -7275,7 +7652,6 @@ function TextEditOverlay({
             appearance: "none",
             WebkitAppearance: "none",
             WebkitTapHighlightColor: "transparent",
-            /* Auto-sized text: no soft wrap / scrollbar; fixed box: wrap like the SVG. */
             whiteSpace: fixedBox ? "pre-wrap" : "pre",
             overflow: fixedBox ? "auto" : "hidden",
             overflowX: fixedBox ? "hidden" : "hidden",
@@ -7965,14 +8341,32 @@ var VectorViewport = react.forwardRef(
       imageStoreRef.current = new IndexedDbImageStore();
     }
     const rememberedImageBlobHrefsRef = react.useRef(/* @__PURE__ */ new Set());
-    const strokeStyleRef = react.useRef({ ...DEFAULT_STROKE_STYLE });
+    const strokeStyleRef = react.useRef({
+      ...DEFAULT_STROKE_STYLE,
+      textFontSize: DEFAULT_TEXT_FONT_SIZE
+    });
     const [strokeStyleState, setStrokeStyleState] = react.useState({
-      ...DEFAULT_STROKE_STYLE
+      ...DEFAULT_STROKE_STYLE,
+      textFontSize: DEFAULT_TEXT_FONT_SIZE
     });
     const setCurrentStrokeStyle = react.useCallback((next) => {
       strokeStyleRef.current = next;
       setStrokeStyleState(next);
     }, []);
+    const patchCurrentStrokeStyle = react.useCallback(
+      (patch) => {
+        const merged = { ...strokeStyleRef.current };
+        for (const key of Object.keys(patch)) {
+          const v = patch[key];
+          if (v !== void 0) {
+            merged[key] = v;
+          }
+        }
+        strokeStyleRef.current = merged;
+        setStrokeStyleState(merged);
+      },
+      []
+    );
     const progressiveQueueRef = react.useRef(/* @__PURE__ */ new Set());
     react.useEffect(() => {
       const store = imageStoreRef.current;
@@ -8121,10 +8515,11 @@ var VectorViewport = react.forwardRef(
           change(
             exists ? replaceItem(itemsRef.current, id, item) : [...itemsRef.current, item]
           );
-          setCurrentStrokeStyle({
+          patchCurrentStrokeStyle({
             stroke: item.stroke ?? DEFAULT_STROKE_STYLE.stroke,
             strokeWidth: item.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
-            ...item.strokeOpacity != null ? { strokeOpacity: item.strokeOpacity } : {}
+            strokeOpacity: item.strokeOpacity,
+            strokeDash: item.strokeDash
           });
         }
         if (!shouldKeepToolForContinuousPenInput(args.tool, args.pointerType)) {
@@ -8132,8 +8527,8 @@ var VectorViewport = react.forwardRef(
         }
       },
       [
+        patchCurrentStrokeStyle,
         requestAutoResetTool,
-        setCurrentStrokeStyle,
         shouldKeepToolForContinuousPenInput
       ]
     );
@@ -8869,24 +9264,28 @@ var VectorViewport = react.forwardRef(
       renderFrame();
     }, [renderFrame]);
     react.useEffect(() => {
+      const current = strokeStyleRef.current;
       if (toolId === "marker") {
         setCurrentStrokeStyle({
-          ...strokeStyleRef.current,
+          ...current,
           ...MARKER_TOOL_STYLE
         });
         return;
       }
-      const current = strokeStyleRef.current;
       if (isDefaultMarkerToolStyle(current)) {
         setCurrentStrokeStyle({
           stroke: DEFAULT_STROKE_STYLE.stroke,
-          strokeWidth: toolId === "draw" ? 10 : DEFAULT_STROKE_STYLE.strokeWidth
+          strokeWidth: toolId === "draw" ? 10 : DEFAULT_STROKE_STYLE.strokeWidth,
+          strokeDash: current.strokeDash,
+          textFontSize: current.textFontSize
         });
         return;
       }
       setCurrentStrokeStyle({
         stroke: current.stroke,
-        strokeWidth: toolId === "draw" ? 10 : current.strokeWidth
+        strokeWidth: toolId === "draw" ? 10 : current.strokeWidth,
+        strokeDash: current.strokeDash,
+        textFontSize: current.textFontSize
       });
     }, [setCurrentStrokeStyle, toolId]);
     react.useEffect(() => {
@@ -8895,15 +9294,14 @@ var VectorViewport = react.forwardRef(
       const it = items.find((i) => i.id === primaryId);
       if (!it || it.locked) return;
       if (it.toolKind === "image") return;
-      const next = {
+      patchCurrentStrokeStyle({
         stroke: it.stroke ?? DEFAULT_STROKE_STYLE.stroke,
-        strokeWidth: it.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth
-      };
-      if (it.strokeOpacity != null) {
-        next.strokeOpacity = it.strokeOpacity;
-      }
-      setCurrentStrokeStyle(next);
-    }, [effectiveSelectedIds, items, setCurrentStrokeStyle]);
+        strokeWidth: it.strokeWidth ?? DEFAULT_STROKE_STYLE.strokeWidth,
+        strokeOpacity: it.strokeOpacity,
+        strokeDash: it.strokeDash,
+        ...it.toolKind === "text" && it.textFontSize != null ? { textFontSize: it.textFontSize } : {}
+      });
+    }, [effectiveSelectedIds, items, patchCurrentStrokeStyle]);
     const handleSelectionStyleChange = react.useCallback(
       (patch) => {
         const change = onItemsChangeRef.current;
@@ -8919,25 +9317,15 @@ var VectorViewport = react.forwardRef(
           nextList = replaceItem(nextList, id, out);
         }
         change(nextList);
-        setCurrentStrokeStyle({
-          ...strokeStyleRef.current,
-          stroke: patch.stroke,
-          strokeWidth: patch.strokeWidth,
-          ...patch.strokeOpacity != null ? { strokeOpacity: patch.strokeOpacity } : {}
-        });
+        patchCurrentStrokeStyle(patch);
       },
-      [setCurrentStrokeStyle]
+      [patchCurrentStrokeStyle]
     );
     const handleActiveToolStyleChange = react.useCallback(
       (patch) => {
-        const current = strokeStyleRef.current;
-        setCurrentStrokeStyle({
-          stroke: patch.stroke,
-          strokeWidth: patch.strokeWidth,
-          ...patch.strokeOpacity != null ? { strokeOpacity: patch.strokeOpacity } : current.strokeOpacity != null ? { strokeOpacity: current.strokeOpacity } : {}
-        });
+        patchCurrentStrokeStyle(patch);
       },
-      [setCurrentStrokeStyle]
+      [patchCurrentStrokeStyle]
     );
     const commitTextEdit = react.useCallback(() => {
       const id = editingTextIdRef.current;
@@ -10070,16 +10458,21 @@ var VectorViewport = react.forwardRef(
           const id = createShapeId();
           const { x: worldX, y: worldY } = st.startWorld;
           if (st.tool === "text") {
+            const fs = strokeStyleRef.current.textFontSize;
+            const baseline = textBaselineYFor(fs);
+            const lh = textLineHeightFor(fs);
+            const minH = Math.max(26, baseline + Math.max(4, lh * 0.2));
             const newItem = createTextItem(
               id,
               {
                 x: worldX - 4,
-                y: worldY - 24,
+                y: worldY - baseline,
                 width: 160,
-                height: 36
+                height: minH
               },
               "",
-              strokeStyleRef.current
+              strokeStyleRef.current,
+              fs
             );
             editingTextSnapshotRef.current = {
               ...newItem,
@@ -10230,12 +10623,63 @@ var VectorViewport = react.forwardRef(
       return effectiveSelectedIds.map((id) => resolvedItems.find((i) => i.id === id)).filter((i) => i != null);
     }, [effectiveSelectedIds, resolvedItems]);
     const activeToolInspectorStyle = react.useMemo(() => {
-      if (toolId !== "draw") return void 0;
-      return {
-        toolKind: "draw",
-        label: "Estilo da ferramenta",
-        ...strokeStyleState
-      };
+      if (toolId === "draw") {
+        return {
+          toolKind: "draw",
+          label: "Caneta",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "marker") {
+        return {
+          toolKind: "marker",
+          label: "Marcador",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "text") {
+        return {
+          toolKind: "text",
+          label: "Texto",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "rect") {
+        return {
+          toolKind: "rect",
+          label: "Ret\xE2ngulo",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "ellipse") {
+        return {
+          toolKind: "ellipse",
+          label: "Elipse",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "architectural-cloud") {
+        return {
+          toolKind: "architectural-cloud",
+          label: "Nuvem",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "line") {
+        return {
+          toolKind: "line",
+          label: "Linha",
+          ...strokeStyleState
+        };
+      }
+      if (toolId === "arrow") {
+        return {
+          toolKind: "arrow",
+          label: "Seta",
+          ...strokeStyleState
+        };
+      }
+      return void 0;
     }, [strokeStyleState, toolId]);
     const eraserPreviewItemsForOverlay = react.useMemo(() => {
       return eraserPreviewIds.map((id) => resolvedItems.find((i) => i.id === id)).filter((i) => i != null);