canvu-react 0.4.13 → 0.4.15

package/dist/native.js

@@ -1,8 +1,8 @@
 import getStroke from 'perfect-freehand';
-import { Group, RoundedRect, Circle, Line, vec, Path, matchFont, Text, Canvas, Rect, Oval, useImage, Image } from '@shopify/react-native-skia';
+import { Group, RoundedRect, Circle, Line, vec, Path, matchFont, Text, Canvas, Rect, Oval, DashPathEffect, useImage, Image } from '@shopify/react-native-skia';
 import { memo, forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { StyleSheet, PanResponder, View, ScrollView, Pressable, Text as Text$1 } from 'react-native';
+import { StyleSheet, PanResponder, View, Pressable, Text as Text$1, ScrollView } from 'react-native';
 
 // src/scene/shape-builders.ts
 
@@ -1816,13 +1816,52 @@ function NativeShapeRenderer({ item }) {
   }
   return null;
 }
+
+// src/native/native-overlay-style.ts
+var ERASER_TINT = "#cbd5e1";
+var ERASER_TINT_OPACITY = 0.95;
+var LASER_TINT = "#f43f5e";
+var LASER_TINT_OPACITY = 0.9;
+var ERASER_TRAIL_MAX_AGE_MS = 150;
+var LASER_TRAIL_MAX_AGE_MS = 650;
+function colorWithOpacity(hex, alpha) {
+  if (alpha == null || alpha >= 1) return hex;
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return hex;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function freshTimedTrailPoints(points, now, maxAgeMs) {
+  return points.filter((point) => now - point.t <= maxAgeMs);
+}
+function timedTrailHeadOpacity(point, now, maxAgeMs) {
+  if (!point) return 0;
+  return Math.max(0, 1 - (now - point.t) / maxAgeMs);
+}
+function resolveNativeStrokePreviewStyle(tool, previewStrokeStyle) {
+  const isLaser = tool === "laser";
+  return {
+    stroke: isLaser ? LASER_TINT : previewStrokeStyle?.stroke ?? "#64748b",
+    strokeWidth: isLaser ? 4 : previewStrokeStyle?.strokeWidth ?? (tool === "marker" ? 16 : 3),
+    ...previewStrokeStyle?.strokeOpacity != null && !isLaser ? { strokeOpacity: previewStrokeStyle.strokeOpacity } : {},
+    ...previewStrokeStyle?.strokeDash != null && !isLaser ? { strokeDash: previewStrokeStyle.strokeDash } : {}
+  };
+}
 var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_PREVIEW_OPACITY = 0.3;
+var OVERLAY_STROKE_PX = 1.25;
+var MARQUEE_DASH_PX = 4;
 function pointsToSmoothPathD(points) {
   if (points.length < 2) return null;
   const d = smoothFreehandPointsToPathD(points);
   return d || null;
 }
+function dashIntervalsFromStrokeDasharray(strokeDasharray) {
+  if (!strokeDasharray) return null;
+  const intervals = strokeDasharray.split(/\s+/).map((part) => Number(part)).filter((part) => Number.isFinite(part) && part > 0);
+  return intervals.length > 0 ? intervals : null;
+}
 function NativeInteractionOverlay({
   camera,
   width,
@@ -1832,13 +1871,18 @@ function NativeInteractionOverlay({
   placementPreview,
   eraserTrail,
   laserTrail,
-  eraserPreviewItems = []
+  eraserPreviewItems = [],
+  previewStrokeStyle
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
   const handleR = 5 / z;
-  const overlayStrokePx = 1.25;
+  const overlayStrokeWorld = OVERLAY_STROKE_PX / z;
+  const marqueeDashWorld = MARQUEE_DASH_PX / z;
   const rotateOffsetWorld = 24 / z;
+  const rotateIconWorld = 16 / z;
+  const rotateIconScale = rotateIconWorld / 24;
+  const rotateIconStroke = OVERLAY_STROKE_PX / (z * rotateIconScale);
   const selectionElements = useMemo(() => {
     if (selectedItems.length === 0) return null;
     const single = selectedItems.length === 1 ? selectedItems[0] : void 0;
@@ -1860,7 +1904,7 @@ function NativeInteractionOverlay({
             height: b.height,
             color: "#3b82f6",
             style: "stroke",
-            strokeWidth: overlayStrokePx,
+            strokeWidth: overlayStrokeWorld,
             antiAlias: true
           }
         ) }, it.id);
@@ -1868,83 +1912,167 @@ function NativeInteractionOverlay({
       showResizeHandles && bSingle && single && /* @__PURE__ */ jsxs(Fragment, { children: [
         HANDLE_ORDER.map((hid) => {
           const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
-          return /* @__PURE__ */ jsx(
-            Circle,
-            {
-              cx: p.x,
-              cy: p.y,
-              r: handleR,
-              color: "#ffffff",
-              style: "fill",
-              antiAlias: true
-            },
-            hid
-          );
+          return /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(
+              Circle,
+              {
+                cx: p.x,
+                cy: p.y,
+                r: handleR,
+                color: "#ffffff",
+                style: "fill",
+                antiAlias: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Circle,
+              {
+                cx: p.x,
+                cy: p.y,
+                r: handleR,
+                color: "#3b82f6",
+                style: "stroke",
+                strokeWidth: overlayStrokeWorld,
+                antiAlias: true
+              }
+            )
+          ] }, hid);
         }),
-        rotHandlePos && /* @__PURE__ */ jsx(
-          Circle,
+        rotHandlePos && /* @__PURE__ */ jsxs(
+          Group,
           {
-            cx: rotHandlePos.x,
-            cy: rotHandlePos.y,
-            r: handleR * 1.5,
-            color: "#3b82f6",
-            style: "stroke",
-            strokeWidth: overlayStrokePx * 1.2,
-            antiAlias: true
+            transform: [
+              { translateX: rotHandlePos.x },
+              { translateY: rotHandlePos.y },
+              { rotate: rotSingle },
+              { translateX: -rotateIconWorld / 2 },
+              { translateY: -rotateIconWorld / 2 },
+              { scale: rotateIconScale }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Path,
+                {
+                  path: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",
+                  color: "#3b82f6",
+                  style: "stroke",
+                  strokeWidth: rotateIconStroke,
+                  strokeCap: "round",
+                  strokeJoin: "round",
+                  antiAlias: true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Path,
+                {
+                  path: "M21 3v5h-5",
+                  color: "#3b82f6",
+                  style: "stroke",
+                  strokeWidth: rotateIconStroke,
+                  strokeCap: "round",
+                  strokeJoin: "round",
+                  antiAlias: true
+                }
+              )
+            ]
           }
         )
       ] })
     ] });
-  }, [selectedItems, showResizeHandles, rotateOffsetWorld, handleR]);
+  }, [
+    selectedItems,
+    showResizeHandles,
+    rotateOffsetWorld,
+    handleR,
+    overlayStrokeWorld,
+    rotateIconWorld,
+    rotateIconScale,
+    rotateIconStroke
+  ]);
   const previewElements = useMemo(() => {
     if (!placementPreview) return null;
     const p = placementPreview;
+    const shapeStroke = previewStrokeStyle?.stroke ?? "#1d1d1d";
+    const shapeWidth = previewStrokeStyle?.strokeWidth ?? 2;
+    const shapeColor = colorWithOpacity(
+      shapeStroke,
+      previewStrokeStyle?.strokeOpacity
+    );
     if (p.kind === "rect" || p.kind === "ellipse" || p.kind === "architectural-cloud") {
       const r = normalizeRect(p.rect);
-      return p.kind === "rect" || p.kind === "architectural-cloud" ? /* @__PURE__ */ jsx(
-        Rect,
+      return p.kind === "rect" ? /* @__PURE__ */ jsx(
+        RoundedRect,
         {
           x: r.x,
           y: r.y,
           width: r.width,
           height: r.height,
-          color: "#64748b",
+          r: 4,
+          color: shapeColor,
           style: "stroke",
-          strokeWidth: overlayStrokePx,
+          strokeWidth: shapeWidth,
           antiAlias: true
         }
-      ) : /* @__PURE__ */ jsx(
-        Circle,
-        {
-          cx: r.x + r.width / 2,
-          cy: r.y + r.height / 2,
-          r: Math.max(0, r.width / 2),
-          color: "#64748b",
-          style: "stroke",
-          strokeWidth: overlayStrokePx,
-          antiAlias: true
-        }
-      );
-    }
-    if (p.kind === "marquee") {
-      const r = normalizeRect(p.rect);
-      return /* @__PURE__ */ jsx(
-        Rect,
+      ) : p.kind === "ellipse" ? /* @__PURE__ */ jsx(
+        Oval,
         {
           x: r.x,
           y: r.y,
           width: r.width,
           height: r.height,
-          color: "rgba(59, 130, 246, 0.12)",
-          style: "fill",
+          color: shapeColor,
+          style: "stroke",
+          strokeWidth: shapeWidth,
           antiAlias: true
         }
-      );
+      ) : /* @__PURE__ */ jsx(Group, { transform: [{ translateX: r.x }, { translateY: r.y }], children: /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: buildArchitecturalCloudPathD(r.width, r.height, shapeWidth),
+          color: shapeColor,
+          style: "stroke",
+          strokeWidth: shapeWidth,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true
+        }
+      ) });
+    }
+    if (p.kind === "marquee") {
+      const r = normalizeRect(p.rect);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Rect,
+          {
+            x: r.x,
+            y: r.y,
+            width: r.width,
+            height: r.height,
+            color: "rgba(59, 130, 246, 0.12)",
+            style: "fill",
+            antiAlias: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Rect,
+          {
+            x: r.x,
+            y: r.y,
+            width: r.width,
+            height: r.height,
+            color: "#3b82f6",
+            style: "stroke",
+            strokeWidth: overlayStrokeWorld,
+            antiAlias: true,
+            children: /* @__PURE__ */ jsx(DashPathEffect, { intervals: [marqueeDashWorld, marqueeDashWorld] })
+          }
+        )
+      ] });
     }
     if (p.kind === "line" || p.kind === "arrow") {
       const geometry = p.kind === "arrow" ? computeStraightArrowGeometry(
         { x1: p.start.x, y1: p.start.y, x2: p.end.x, y2: p.end.y },
-        overlayStrokePx
+        shapeWidth
       ) : null;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -1952,9 +2080,9 @@ function NativeInteractionOverlay({
           {
             p1: vec(p.start.x, p.start.y),
             p2: vec(geometry?.shaftEndX ?? p.end.x, geometry?.shaftEndY ?? p.end.y),
-            color: "#64748b",
+            color: shapeColor,
             style: "stroke",
-            strokeWidth: overlayStrokePx,
+            strokeWidth: shapeWidth,
             strokeCap: "round",
             antiAlias: true
           }
@@ -1963,9 +2091,9 @@ function NativeInteractionOverlay({
           Path,
           {
             path: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
-            color: "#64748b",
+            color: shapeColor,
             style: "stroke",
-            strokeWidth: overlayStrokePx,
+            strokeWidth: shapeWidth,
             strokeCap: "round",
             strokeJoin: "round",
             antiAlias: true
@@ -1974,10 +2102,15 @@ function NativeInteractionOverlay({
       ] });
     }
     if (p.kind === "stroke" && p.points.length >= 1) {
+      const isLaser = p.tool === "laser";
+      const style = resolveNativeStrokePreviewStyle(
+        p.tool,
+        p.style ?? previewStrokeStyle
+      );
       const payload = computeFreehandSvgPayload(
         p.points,
-        { stroke: "#64748b", strokeWidth: 3 },
-        "draw",
+        style,
+        isLaser ? "draw" : p.tool,
         p.points.length === 2
       );
       if (!payload) return null;
@@ -1988,33 +2121,47 @@ function NativeInteractionOverlay({
             cx: payload.cx,
             cy: payload.cy,
             r: payload.r,
-            color: payload.fill,
+            color: colorWithOpacity(payload.fill, payload.fillOpacity),
             style: "fill",
             antiAlias: true
           }
         );
       }
       if (payload.kind === "fillPath") {
-        return /* @__PURE__ */ jsx(Path, { path: payload.d, color: payload.fill, style: "fill", antiAlias: true });
+        return /* @__PURE__ */ jsx(
+          Path,
+          {
+            path: payload.d,
+            color: colorWithOpacity(payload.fill, payload.fillOpacity),
+            style: "fill",
+            fillType: "winding",
+            antiAlias: true
+          }
+        );
       }
       if (payload.kind === "strokePath") {
+        const intervals = dashIntervalsFromStrokeDasharray(payload.strokeDasharray);
         return /* @__PURE__ */ jsx(
           Path,
           {
             path: payload.d,
-            color: "#64748b",
+            color: colorWithOpacity(
+              payload.stroke,
+              isLaser ? 0.85 : payload.strokeOpacity
+            ),
             style: "stroke",
-            strokeWidth: 3,
+            strokeWidth: payload.strokeWidth,
             strokeCap: "round",
             strokeJoin: "round",
-            antiAlias: true
+            antiAlias: true,
+            children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
           }
         );
       }
       return null;
     }
     return null;
-  }, [placementPreview]);
+  }, [placementPreview, previewStrokeStyle, overlayStrokeWorld, marqueeDashWorld]);
   const eraserPreviewElements = useMemo(() => {
     if (eraserPreviewItems.length === 0) return null;
     return /* @__PURE__ */ jsx(Fragment, { children: eraserPreviewItems.map((it) => {
@@ -2035,59 +2182,71 @@ function NativeInteractionOverlay({
   }, [eraserPreviewItems]);
   const eraserTrailElements = useMemo(() => {
     if (!eraserTrail || eraserTrail.length < 1) return null;
-    const d = pointsToSmoothPathD(eraserTrail);
-    if (!d)
-      return eraserTrail[0] ? /* @__PURE__ */ jsx(
+    const now = Date.now();
+    const alive = freshTimedTrailPoints(eraserTrail, now, ERASER_TRAIL_MAX_AGE_MS);
+    if (alive.length === 0) return null;
+    const d = pointsToSmoothPathD(alive);
+    const newest = alive[alive.length - 1];
+    const headOpacity = timedTrailHeadOpacity(newest, now, ERASER_TRAIL_MAX_AGE_MS);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      alive.length >= 2 && d ? /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: d,
+          color: colorWithOpacity(ERASER_TINT, ERASER_TINT_OPACITY),
+          style: "stroke",
+          strokeWidth: Math.max(3.5, OVERLAY_STROKE_PX) / z,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
         Circle,
         {
-          cx: eraserTrail[0].x,
-          cy: eraserTrail[0].y,
+          cx: newest?.x ?? alive[0]?.x ?? 0,
+          cy: newest?.y ?? alive[0]?.y ?? 0,
           r: Math.max(5 / z, 3),
-          color: "#cbd5e1",
+          color: colorWithOpacity(ERASER_TINT, headOpacity),
           style: "fill",
           antiAlias: true
         }
-      ) : null;
-    return /* @__PURE__ */ jsx(
-      Path,
-      {
-        path: d,
-        color: "#cbd5e1",
-        style: "stroke",
-        strokeWidth: Math.max(3.5 / z, overlayStrokePx),
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    );
+      )
+    ] });
   }, [eraserTrail, z]);
   const laserTrailElements = useMemo(() => {
     if (!laserTrail || laserTrail.length < 1) return null;
-    const d = pointsToSmoothPathD(laserTrail);
-    if (!d)
-      return laserTrail[0] ? /* @__PURE__ */ jsx(
+    const now = Date.now();
+    const alive = freshTimedTrailPoints(laserTrail, now, LASER_TRAIL_MAX_AGE_MS);
+    if (alive.length === 0) return null;
+    const d = pointsToSmoothPathD(alive);
+    const newest = alive[alive.length - 1];
+    const headOpacity = timedTrailHeadOpacity(newest, now, LASER_TRAIL_MAX_AGE_MS);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      alive.length >= 2 && d ? /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: d,
+          color: colorWithOpacity(LASER_TINT, LASER_TINT_OPACITY),
+          style: "stroke",
+          strokeWidth: Math.max(4, OVERLAY_STROKE_PX) / z,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
         Circle,
         {
-          cx: laserTrail[0].x,
-          cy: laserTrail[0].y,
+          cx: newest?.x ?? alive[0]?.x ?? 0,
+          cy: newest?.y ?? alive[0]?.y ?? 0,
           r: Math.max(5 / z, 3),
-          color: "#f43f5e",
+          color: colorWithOpacity(LASER_TINT, headOpacity),
           style: "fill",
           antiAlias: true
         }
-      ) : null;
-    return /* @__PURE__ */ jsx(
-      Path,
-      {
-        path: d,
-        color: "#f43f5e",
-        style: "stroke",
-        strokeWidth: Math.max(4 / z, overlayStrokePx),
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    );
+      )
+    ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsx(
@@ -2233,6 +2392,383 @@ function NativeSceneRenderer({
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsx(Canvas, { style: { width, height }, children: /* @__PURE__ */ jsx(Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsx(MemoShape, { item }, item.id)) }) });
 }
+
+// src/native/native-style-inspector-values.ts
+var NATIVE_STYLE_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 normalizeNativeStyleHex(stroke) {
+  if (stroke && /^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
+  return "#1d1d1d";
+}
+function nativeStyleColorWithOpacity(hex, opacity) {
+  const alpha = opacity ?? 1;
+  if (alpha >= 1) return hex;
+  const r = Number.parseInt(hex.slice(1, 3), 16);
+  const g = Number.parseInt(hex.slice(3, 5), 16);
+  const b = Number.parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function hexesEqual(a, b) {
+  return a.toLowerCase() === b.toLowerCase();
+}
+function DashPreview({
+  color,
+  width,
+  dashed = false
+}) {
+  const strokeHeight = Math.max(3, Math.min(6, width));
+  return /* @__PURE__ */ jsxs(View, { style: styles.dashPreviewTrack, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.dashPreviewStroke,
+          {
+            width: dashed ? 11 : 26,
+            height: strokeHeight,
+            borderRadius: strokeHeight / 2,
+            backgroundColor: color
+          }
+        ]
+      }
+    ),
+    dashed ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.dashPreviewStroke,
+          {
+            width: 11,
+            height: strokeHeight,
+            borderRadius: strokeHeight / 2,
+            backgroundColor: color
+          }
+        ]
+      }
+    ) : null
+  ] });
+}
+function clampValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function RangeControl({
+  value,
+  min,
+  max,
+  onChange,
+  valueLabel
+}) {
+  const [trackWidth, setTrackWidth] = useState(1);
+  const normalized = (clampValue(value, min, max) - min) / (max - min);
+  const updateFromX = useCallback(
+    (x) => {
+      const next = min + clampValue(x / trackWidth, 0, 1) * (max - min);
+      onChange(Math.round(next));
+    },
+    [max, min, onChange, trackWidth]
+  );
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderGrant: (event) => {
+        updateFromX(event.nativeEvent.locationX);
+      },
+      onPanResponderMove: (event) => {
+        updateFromX(event.nativeEvent.locationX);
+      }
+    }),
+    [updateFromX]
+  );
+  return /* @__PURE__ */ jsxs(View, { style: styles.rangeRow, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: styles.rangeTrack,
+        onLayout: (event) => setTrackWidth(event.nativeEvent.layout.width),
+        ...panResponder.panHandlers,
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles.rangeBase }),
+          /* @__PURE__ */ jsx(View, { style: [styles.rangeFill, { width: `${normalized * 100}%` }] }),
+          /* @__PURE__ */ jsx(View, { style: [styles.rangeThumb, { left: `${normalized * 100}%` }] })
+        ]
+      }
+    ),
+    valueLabel ? /* @__PURE__ */ jsx(Text$1, { style: styles.rangeValue, children: valueLabel }) : null
+  ] });
+}
+function InspectorSection({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+    /* @__PURE__ */ jsx(Text$1, { style: styles.sectionLabel, children: label }),
+    children
+  ] });
+}
+function SegmentControl({
+  segments,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(View, { style: styles.segmentGroup, children: segments.map((segment) => {
+    const selected = segment.value === value;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityState: { selected },
+        accessibilityLabel: segment.label,
+        onPress: () => onChange(segment.value),
+        style: [styles.segment, selected ? styles.segmentSelected : null],
+        children: [
+          segment.preview,
+          /* @__PURE__ */ jsx(
+            Text$1,
+            {
+              style: [
+                styles.segmentLabel,
+                selected ? styles.segmentLabelSelected : null
+              ],
+              children: segment.label
+            }
+          )
+        ]
+      },
+      String(segment.value)
+    );
+  }) });
+}
+function NativeVectorStyleInspector({
+  toolId,
+  value,
+  onChange,
+  style
+}) {
+  const hex = normalizeNativeStyleHex(value.stroke);
+  const opacity = toolId === "marker" ? value.strokeOpacity ?? 0.5 : void 0;
+  const dashSegments = [
+    {
+      value: "solid",
+      label: "Cont\xEDnuo",
+      preview: /* @__PURE__ */ jsx(DashPreview, { color: "#18181b", width: 4 })
+    },
+    {
+      value: "dashed",
+      label: "Tracejado",
+      preview: /* @__PURE__ */ jsx(DashPreview, { color: "#18181b", width: 4, dashed: true })
+    }
+  ];
+  const opacityPercent = Math.round((opacity ?? 1) * 100);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      pointerEvents: "auto",
+      style: [styles.shell, style],
+      accessibilityRole: "summary",
+      accessibilityLabel: toolId === "marker" ? "Configura\xE7\xF5es do marcador" : "Configura\xE7\xF5es da caneta",
+      children: [
+        /* @__PURE__ */ jsx(InspectorSection, { label: "Cor", children: /* @__PURE__ */ jsx(View, { style: styles.palette, children: NATIVE_STYLE_PALETTE.map((color) => {
+          const selected = hexesEqual(color.hex, hex);
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { selected },
+              accessibilityLabel: color.name,
+              onPress: () => onChange({ stroke: color.hex }),
+              style: [
+                styles.swatch,
+                {
+                  backgroundColor: color.hex,
+                  borderWidth: selected ? 2 : 1,
+                  transform: [{ scale: selected ? 1.08 : 1 }],
+                  shadowOpacity: selected ? 0.08 : 0
+                }
+              ]
+            },
+            color.name
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx(InspectorSection, { label: "Grossura", children: /* @__PURE__ */ jsx(
+          RangeControl,
+          {
+            value: value.strokeWidth,
+            min: 1,
+            max: 48,
+            onChange: (strokeWidth) => onChange({ strokeWidth })
+          }
+        ) }),
+        toolId === "draw" ? /* @__PURE__ */ jsx(InspectorSection, { label: "Tra\xE7o", children: /* @__PURE__ */ jsx(
+          SegmentControl,
+          {
+            segments: dashSegments,
+            value: value.strokeDash === "dashed" ? "dashed" : "solid",
+            onChange: (strokeDash) => onChange({ strokeDash })
+          }
+        ) }) : /* @__PURE__ */ jsx(InspectorSection, { label: "Opacidade", children: /* @__PURE__ */ jsx(
+          RangeControl,
+          {
+            value: opacityPercent,
+            min: 10,
+            max: 100,
+            valueLabel: `${opacityPercent}%`,
+            onChange: (nextOpacity) => onChange({ strokeOpacity: nextOpacity / 100 })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  shell: {
+    minWidth: 240,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.1)",
+    backgroundColor: "rgba(255,255,255,0.97)",
+    shadowColor: "#000000",
+    shadowOpacity: 0.06,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 4 },
+    gap: 10
+  },
+  section: {
+    gap: 6
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#52525b",
+    textTransform: "uppercase",
+    letterSpacing: 0.22
+  },
+  palette: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: 6,
+    rowGap: 6,
+    maxWidth: 174
+  },
+  swatch: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderColor: "rgba(0,0,0,0.12)",
+    shadowColor: "#000000",
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 }
+  },
+  rangeRow: {
+    minHeight: 28,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  rangeTrack: {
+    position: "relative",
+    flex: 1,
+    height: 28,
+    justifyContent: "center"
+  },
+  rangeBase: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: "rgba(24,24,27,0.12)"
+  },
+  rangeFill: {
+    position: "absolute",
+    left: 0,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: "#18181b"
+  },
+  rangeThumb: {
+    position: "absolute",
+    width: 18,
+    height: 18,
+    marginLeft: -9,
+    borderRadius: 9,
+    borderWidth: 2,
+    borderColor: "#18181b",
+    backgroundColor: "#ffffff",
+    shadowColor: "#000000",
+    shadowOpacity: 0.12,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 }
+  },
+  rangeValue: {
+    minWidth: 34,
+    textAlign: "right",
+    fontSize: 11,
+    fontWeight: "500",
+    color: "#71717a"
+  },
+  segmentGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    padding: 3,
+    borderRadius: 8,
+    backgroundColor: "rgba(24,24,27,0.06)"
+  },
+  segment: {
+    flex: 1,
+    minWidth: 96,
+    minHeight: 32,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 6
+  },
+  segmentSelected: {
+    backgroundColor: "#ffffff",
+    shadowColor: "#000000",
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    shadowOffset: { width: 0, height: 1 }
+  },
+  segmentLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#71717a",
+    flexShrink: 0
+  },
+  segmentLabelSelected: {
+    color: "#18181b"
+  },
+  dashPreviewTrack: {
+    width: 26,
+    height: 6,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3
+  },
+  dashPreviewStroke: {
+    flexShrink: 0
+  }
+});
 var DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = [
   "rect",
   "ellipse",
@@ -2364,7 +2900,7 @@ function NativeVectorToolbar({
     View,
     {
       accessibilityLabel,
-      style: [styles.shell, style],
+      style: [styles2.shell, style],
       pointerEvents: "box-none",
       children: [
         /* @__PURE__ */ jsxs(
@@ -2373,8 +2909,8 @@ function NativeVectorToolbar({
             horizontal: true,
             showsHorizontalScrollIndicator: false,
             contentContainerStyle: [
-              styles.content,
-              density === "comfortable" ? styles.comfortableContent : void 0,
+              styles2.content,
+              density === "comfortable" ? styles2.comfortableContent : void 0,
               contentContainerStyle
             ],
             children: [
@@ -2391,21 +2927,21 @@ function NativeVectorToolbar({
                     disabled: toolLockDisabled,
                     onPress: toggleToolLock,
                     style: ({ pressed }) => [
-                      styles.toolButton,
-                      density === "comfortable" ? styles.comfortableToolButton : void 0,
-                      toolLocked ? styles.activeToolButton : void 0,
-                      pressed && !toolLockDisabled ? styles.pressedToolButton : void 0,
-                      toolLockDisabled ? styles.disabledToolButton : void 0
+                      styles2.toolButton,
+                      density === "comfortable" ? styles2.comfortableToolButton : void 0,
+                      toolLocked ? styles2.activeToolButton : void 0,
+                      pressed && !toolLockDisabled ? styles2.pressedToolButton : void 0,
+                      toolLockDisabled ? styles2.disabledToolButton : void 0
                     ],
                     children: renderToolLockIcon?.({
                       locked: toolLocked,
                       disabled: toolLockDisabled,
                       foregroundColor: "#18181b",
                       onToggle: toggleToolLock
-                    }) ?? /* @__PURE__ */ jsx(Text$1, { style: styles.lockGlyph, children: toolLocked ? "L" : "U" })
+                    }) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.lockGlyph, children: toolLocked ? "L" : "U" })
                   }
                 ),
-                /* @__PURE__ */ jsx(View, { style: styles.toolLockDivider })
+                /* @__PURE__ */ jsx(View, { style: styles2.toolLockDivider })
               ] }) : null,
               toolbarTools.map(
                 (tool) => renderNativeToolButton({
@@ -2423,7 +2959,7 @@ function NativeVectorToolbar({
                   renderToolButton
                 })
               ),
-              showOverflowMenu ? /* @__PURE__ */ jsx(View, { style: styles.overflowSpacer }) : null,
+              showOverflowMenu ? /* @__PURE__ */ jsx(View, { style: styles2.overflowSpacer }) : null,
               showOverflowMenu ? /* @__PURE__ */ jsxs(
                 Pressable,
                 {
@@ -2437,27 +2973,27 @@ function NativeVectorToolbar({
                   disabled,
                   onPress: toggleOverflow,
                   style: ({ pressed }) => [
-                    styles.overflowTrigger,
-                    overflowOpen || activeOverflowTool ? styles.activeToolButton : void 0,
-                    pressed && !disabled ? styles.pressedToolButton : void 0,
-                    disabled ? styles.disabledToolButton : void 0
+                    styles2.overflowTrigger,
+                    overflowOpen || activeOverflowTool ? styles2.activeToolButton : void 0,
+                    pressed && !disabled ? styles2.pressedToolButton : void 0,
+                    disabled ? styles2.disabledToolButton : void 0
                   ],
                   children: [
-                    /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: activeOverflowTool ? renderToolIcon?.({
+                    /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: activeOverflowTool ? renderToolIcon?.({
                       tool: activeOverflowTool,
                       selected: true,
                       disabled,
                       foregroundColor: "#18181b",
                       onSelect: () => onChange(activeOverflowTool.id)
-                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles.shapesGlyph, children: "S" }) }),
-                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles.chevronGlyph, children: overflowOpen ? "^" : "v" })
+                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.shapesGlyph, children: "S" }) }),
+                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.chevronGlyph, children: overflowOpen ? "^" : "v" })
                   ]
                 }
               ) : null
             ]
           }
         ),
-        overflowOpen && showOverflowMenu ? /* @__PURE__ */ jsx(View, { style: [styles.overflowPanel, overflowPanelStyle], children: remainingOverflowTools.map(
+        overflowOpen && showOverflowMenu ? /* @__PURE__ */ jsx(View, { style: [styles2.overflowPanel, overflowPanelStyle], children: remainingOverflowTools.map(
           (tool) => renderNativeToolButton({
             tool,
             value,
@@ -2468,7 +3004,7 @@ function NativeVectorToolbar({
             disabled,
             disabledIds,
             density: "compact",
-            toolButtonStyle: styles.overflowToolButton,
+            toolButtonStyle: styles2.overflowToolButton,
             activeToolButtonStyle,
             toolLabelStyle,
             activeToolLabelStyle,
@@ -2509,22 +3045,22 @@ function renderNativeToolButton(input) {
       disabled: toolDisabled,
       onPress: onSelect,
       style: ({ pressed }) => [
-        styles.toolButton,
-        input.density === "comfortable" ? styles.comfortableToolButton : void 0,
+        styles2.toolButton,
+        input.density === "comfortable" ? styles2.comfortableToolButton : void 0,
         input.toolButtonStyle,
-        selected ? styles.activeToolButton : void 0,
+        selected ? styles2.activeToolButton : void 0,
         selected ? input.activeToolButtonStyle : void 0,
-        pressed && !toolDisabled ? styles.pressedToolButton : void 0,
-        toolDisabled ? styles.disabledToolButton : void 0
+        pressed && !toolDisabled ? styles2.pressedToolButton : void 0,
+        toolDisabled ? styles2.disabledToolButton : void 0
       ],
       children: [
-        /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: icon }),
+        /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: icon }),
         input.density === "comfortable" ? /* @__PURE__ */ jsx(
           Text$1,
           {
             numberOfLines: 1,
             style: [
-              styles.toolLabel,
+              styles2.toolLabel,
               { color: foregroundColor },
               input.toolLabelStyle,
               selected ? input.activeToolLabelStyle : void 0
@@ -2538,9 +3074,9 @@ function renderNativeToolButton(input) {
   );
 }
 function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
-  return /* @__PURE__ */ jsx(Text$1, { style: [styles.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsx(Text$1, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   shell: {
     borderRadius: 8,
     borderWidth: StyleSheet.hairlineWidth,
@@ -2865,9 +3401,27 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
 var MIN_PLACE_SIZE = 8;
 var MIN_ARROW_DRAG_PX = 8;
 var TAP_PX = 20;
+var MARKER_TOOL_STYLE = {
+  stroke: "#fde047",
+  strokeWidth: 16,
+  strokeOpacity: 0.5
+};
 function isPlacementTool(toolId) {
   return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
 }
+function isDefaultMarkerToolStyle(style) {
+  return style.stroke === MARKER_TOOL_STYLE.stroke && style.strokeWidth === MARKER_TOOL_STYLE.strokeWidth && style.strokeOpacity === MARKER_TOOL_STYLE.strokeOpacity;
+}
+function supportsNativeResizeHandles(item) {
+  const k = item?.toolKind;
+  if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
+    return true;
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    return true;
+  }
+  return k === "custom" && !!item?.customIntrinsicSize && !!item?.customInnerSvg;
+}
 function placementPreviewForTool(toolId, start, end) {
   if (toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud") {
     return { kind: toolId, rect: rectFromCorners(start, end) };
@@ -2930,7 +3484,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onCameraChange,
-  toolbar
+  toolbar,
+  showStyleInspector = false,
+  styleInspectorPlacement = "bottom"
 }, ref) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const cameraRef = useRef(null);
@@ -2957,6 +3513,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   const [eraserTrail, setEraserTrail] = useState([]);
   const [laserTrail, setLaserTrail] = useState([]);
   const laserClearTimerRef = useRef(null);
+  const strokeStyleRef = useRef({ ...DEFAULT_STROKE_STYLE });
+  const markerStrokeStyleRef = useRef({ ...MARKER_TOOL_STYLE });
+  const styleBeforeMarkerRef = useRef({ ...DEFAULT_STROKE_STYLE });
+  const lastToolIdRef = useRef(toolId);
+  const [strokeStyleState, setStrokeStyleState] = useState({
+    ...DEFAULT_STROKE_STYLE
+  });
   useEffect(
     () => () => {
       if (laserClearTimerRef.current) {
@@ -2965,6 +3528,60 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     },
     []
   );
+  useEffect(() => {
+    if (eraserTrail.length === 0 && laserTrail.length === 0) return;
+    const timer = setInterval(() => {
+      const now = Date.now();
+      setEraserTrail(
+        (prev) => freshTimedTrailPoints(prev, now, ERASER_TRAIL_MAX_AGE_MS)
+      );
+      setLaserTrail(
+        (prev) => freshTimedTrailPoints(prev, now, LASER_TRAIL_MAX_AGE_MS)
+      );
+    }, 50);
+    return () => clearInterval(timer);
+  }, [eraserTrail.length, laserTrail.length]);
+  useEffect(() => {
+    const previousToolId = lastToolIdRef.current;
+    const current = strokeStyleRef.current;
+    let next = current;
+    if (toolId === "marker") {
+      if (previousToolId !== "marker") {
+        styleBeforeMarkerRef.current = current;
+      }
+      next = markerStrokeStyleRef.current;
+    } else if (previousToolId === "marker") {
+      markerStrokeStyleRef.current = current;
+      const restored = styleBeforeMarkerRef.current;
+      next = {
+        stroke: restored.stroke,
+        strokeWidth: toolId === "draw" && restored.strokeWidth === DEFAULT_STROKE_STYLE.strokeWidth ? 10 : restored.strokeWidth,
+        ...restored.strokeDash != null ? { strokeDash: restored.strokeDash } : {}
+      };
+    } else if (toolId === "draw") {
+      next = {
+        ...current,
+        strokeWidth: current.strokeWidth === DEFAULT_STROKE_STYLE.strokeWidth ? 10 : current.strokeWidth
+      };
+    } else if (isDefaultMarkerToolStyle(current)) {
+      next = {
+        stroke: DEFAULT_STROKE_STYLE.stroke,
+        strokeWidth: DEFAULT_STROKE_STYLE.strokeWidth,
+        ...current.strokeDash != null ? { strokeDash: current.strokeDash } : {}
+      };
+    }
+    strokeStyleRef.current = next;
+    setStrokeStyleState(next);
+    lastToolIdRef.current = toolId;
+  }, [toolId]);
+  const patchCurrentStrokeStyle = useCallback((patch) => {
+    const next = { ...strokeStyleRef.current, ...patch };
+    strokeStyleRef.current = next;
+    if (toolIdRef.current === "marker") {
+      markerStrokeStyleRef.current = next;
+    }
+    setStrokeStyleState(next);
+  }, []);
   const [eraserPreviewIds, setEraserPreviewIds] = useState([]);
   const eraserPreviewIdSetRef = useRef(/* @__PURE__ */ new Set());
   const requestSelectToolAfterUse = useCallback(() => {
@@ -3002,7 +3619,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     const hidden = new Set(eraserPreviewIds);
     return items.filter((it) => !hidden.has(it.id));
   }, [items, eraserPreviewIds]);
-  const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked;
+  const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const lastPinchDist = useRef(null);
   const lastPanPoint = useRef(null);
   const panResponder = useMemo(
@@ -3077,7 +3694,14 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
               clearTimeout(laserClearTimerRef.current);
               laserClearTimerRef.current = null;
             }
-            setLaserTrail([{ x: worldX, y: worldY }]);
+            setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
+          } else {
+            setPlacementPreview({
+              kind: "stroke",
+              tool,
+              points: [{ x: worldX, y: worldY }],
+              style: { ...strokeStyleRef.current }
+            });
           }
           return;
         }
@@ -3085,7 +3709,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "erase" };
           eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
           setEraserPreviewIds([]);
-          setEraserTrail([{ x: worldX, y: worldY }]);
+          setEraserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
           const toErase = collectEraserTargetsAtWorldPoint(
             itemsRef.current,
             worldX,
@@ -3176,18 +3800,25 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           const last = pts[pts.length - 1];
           const dx = worldX - (last?.x ?? worldX);
           const dy = worldY - (last?.y ?? worldY);
-          if (Math.hypot(dx, dy) > 0.5 / cam.zoom) {
+          const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
+          if (shouldAppendPoint) {
             pts.push({ x: worldX, y: worldY });
           }
           if (st.tool === "laser") {
-            setLaserTrail([...pts]);
-          } else {
-            setPlacementPreview({
-              kind: "stroke",
-              tool: st.tool,
-              points: [...pts]
-            });
+            if (shouldAppendPoint) {
+              setLaserTrail((prev) => [
+                ...prev,
+                { x: worldX, y: worldY, t: Date.now() }
+              ]);
+            }
+            return;
           }
+          setPlacementPreview({
+            kind: "stroke",
+            tool: st.tool,
+            points: [...pts],
+            style: { ...strokeStyleRef.current }
+          });
           return;
         }
         if (st.kind === "move") {
@@ -3225,7 +3856,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           return;
         }
         if (st.kind === "erase") {
-          setEraserTrail((prev) => [...prev, { x: worldX, y: worldY }]);
+          setEraserTrail((prev) => [
+            ...prev,
+            { x: worldX, y: worldY, t: Date.now() }
+          ]);
           const toErase = collectEraserTargetsAtWorldPoint(
             itemsRef.current,
             worldX,
@@ -3270,7 +3904,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           const change = onItemsChangeRef.current;
           if (!change) return;
           const id = createShapeId();
-          const item = createFreehandStrokeItem(id, st.points, st.tool);
+          const item = createFreehandStrokeItem(
+            id,
+            st.points,
+            st.tool,
+            strokeStyleRef.current
+          );
           if (item) {
             change([...itemsRef.current, item]);
           }
@@ -3347,26 +3986,33 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             }
           }
           const id = createShapeId();
+          const style = strokeStyleRef.current;
           if (st.tool === "rect") {
-            change([...itemsRef.current, createRectangleItem(id, raw)]);
+            change([...itemsRef.current, createRectangleItem(id, raw, style)]);
             onSelectionChangeRef.current?.([id]);
             requestSelectToolAfterUse();
             return;
           }
           if (st.tool === "ellipse") {
-            change([...itemsRef.current, createEllipseItem(id, raw)]);
+            change([...itemsRef.current, createEllipseItem(id, raw, style)]);
             onSelectionChangeRef.current?.([id]);
             requestSelectToolAfterUse();
             return;
           }
           if (st.tool === "architectural-cloud") {
-            change([...itemsRef.current, createArchitecturalCloudItem(id, raw)]);
+            change([
+              ...itemsRef.current,
+              createArchitecturalCloudItem(id, raw, style)
+            ]);
             onSelectionChangeRef.current?.([id]);
             requestSelectToolAfterUse();
             return;
           }
           const line = lineEndpointsToLocal(br, lineStart, lineEnd);
-          change([...itemsRef.current, createLineItem(id, br, line, st.tool)]);
+          change([
+            ...itemsRef.current,
+            createLineItem(id, br, line, st.tool, style)
+          ]);
           onSelectionChangeRef.current?.([id]);
           requestSelectToolAfterUse();
           return;
@@ -3389,7 +4035,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 height: 26
               },
               "Text",
-              void 0,
+              strokeStyleRef.current,
               18
             );
             change([...itemsRef.current, item]);
@@ -3425,6 +4071,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         dragStateRef.current = { kind: "idle" };
         setPlacementPreview(null);
         setLaserTrail([]);
+        setEraserTrail([]);
+        setEraserPreviewIds([]);
+        eraserPreviewIdSetRef.current.clear();
       }
     }),
     [screenToWorld, requestRender, requestSelectToolAfterUse, interactive]
@@ -3450,6 +4099,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     }),
     [requestRender, size]
   );
+  const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
   return /* @__PURE__ */ jsx(
     View,
     {
@@ -3479,9 +4129,36 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             eraserTrail,
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
-            )
+            ),
+            previewStrokeStyle: strokeStyleState
           }
         ),
+        interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "box-none",
+            style: styleInspectorPlacement === "top-left" ? {
+              position: "absolute",
+              left: 16,
+              top: 104,
+              alignItems: "flex-start"
+            } : {
+              position: "absolute",
+              left: 16,
+              right: 16,
+              bottom: 84,
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx(
+              NativeVectorStyleInspector,
+              {
+                toolId: activeStyleToolId,
+                value: strokeStyleState,
+                onChange: patchCurrentStrokeStyle
+              }
+            )
+          }
+        ) : null,
         toolbar && /* @__PURE__ */ jsx(
           View,
           {
@@ -3503,6 +4180,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
 });
 
-export { DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createShapeId, parseSvgFragment };
+export { DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createShapeId, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map