@tangle-network/agent-app 0.45.28 → 0.45.29

package/dist/{chunk-NC2V63EL.js → chunk-FNM7JYME.js}

@@ -448,8 +448,8 @@ function PagesStrip({
                 },
                 className: [
                   "group relative flex shrink-0 flex-col items-center gap-1 rounded p-1 transition",
-                  isActive ? "ring-2 ring-[var(--brand-primary)]" : "hover:bg-[var(--border-default)]/40",
-                  dragOverIndex === index ? "ring-1 ring-[var(--brand-primary)]/60" : ""
+                  isActive ? "ring-2 ring-[var(--brand-primary)]" : "hover:bg-[color-mix(in_srgb,var(--border-default)_40%,transparent)]",
+                  dragOverIndex === index ? "ring-1 ring-[color-mix(in_srgb,var(--brand-primary)_60%,transparent)]" : ""
                 ].join(" "),
                 children: [
                   /* @__PURE__ */ jsxs3(
@@ -568,7 +568,8 @@ function Rulers({ pageWidth, pageHeight, zoom, scrollLeft, scrollTop, showRulers
         guides,
         onGuidesChange
       }
-    )
+    ),
+    /* @__PURE__ */ jsx6(GuidesCanvasOverlay, { guides, zoom, scrollLeft, scrollTop })
   ] });
 }
 function HorizontalRuler({ pageWidth, zoom, scrollLeft, guides, onGuidesChange }) {
@@ -657,7 +658,23 @@ function HorizontalRuler({ pageWidth, zoom, scrollLeft, guides, onGuidesChange }
             tick.position
           );
         }),
-        pointerX !== null ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]/60", style: { left: pointerX } }) : null,
+        guides.vertical.map((position, index) => /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-guide-marker": "vertical",
+            "aria-hidden": true,
+            className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]",
+            style: { left: position * zoom - scrollLeft * zoom }
+          },
+          `guide-${index}`
+        )),
+        pointerX !== null ? /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[color-mix(in_srgb,var(--brand-primary)_60%,transparent)]",
+            style: { left: pointerX }
+          }
+        ) : null,
         dragGuideX !== null ? /* @__PURE__ */ jsx6(
           "div",
           {
@@ -758,7 +775,23 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
             tick.position
           );
         }),
-        pointerY !== null ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]/60", style: { top: pointerY } }) : null,
+        guides.horizontal.map((position, index) => /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-guide-marker": "horizontal",
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]",
+            style: { top: position * zoom - scrollTop * zoom }
+          },
+          `guide-${index}`
+        )),
+        pointerY !== null ? /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "pointer-events-none absolute left-0 right-0 h-px bg-[color-mix(in_srgb,var(--brand-primary)_60%,transparent)]",
+            style: { top: pointerY }
+          }
+        ) : null,
         dragGuideY !== null ? /* @__PURE__ */ jsx6(
           "div",
           {
@@ -770,6 +803,37 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
     }
   );
 }
+function GuidesCanvasOverlay({ guides, zoom, scrollLeft, scrollTop }) {
+  if (guides.vertical.length === 0 && guides.horizontal.length === 0) return null;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute right-0 bottom-0 z-10 overflow-hidden",
+      style: { left: RULER_SIZE_PX, top: RULER_SIZE_PX },
+      children: [
+        guides.vertical.map((position, index) => /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-guide-line": "vertical",
+            className: "absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]",
+            style: { left: position * zoom - scrollLeft * zoom }
+          },
+          `v-${index}`
+        )),
+        guides.horizontal.map((position, index) => /* @__PURE__ */ jsx6(
+          "div",
+          {
+            "data-guide-line": "horizontal",
+            className: "absolute left-0 right-0 h-px bg-[var(--brand-primary)]",
+            style: { top: position * zoom - scrollTop * zoom }
+          },
+          `h-${index}`
+        ))
+      ]
+    }
+  );
+}
 
 // src/design-canvas-react/components/Toolbar.tsx
 import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
@@ -894,7 +958,7 @@ function SelectControl({
               onChange(opt.value);
               setOpen(false);
             },
-            className: `px-3 py-1 text-left text-[12px] hover:bg-[var(--brand-primary)]/10 ${opt.value === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
+            className: `px-3 py-1 text-left text-[12px] hover:bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)] ${opt.value === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
             children: opt.label
           },
           opt.value
@@ -963,7 +1027,7 @@ function FontPicker({
                 setQuery("");
               },
               style: { fontFamily: family },
-              className: `block w-full px-3 py-1 text-left text-[13px] hover:bg-[var(--brand-primary)]/10 ${family === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
+              className: `block w-full px-3 py-1 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)] ${family === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
               children: family
             },
             family
@@ -973,7 +1037,7 @@ function FontPicker({
     )
   ] });
 }
-function ColorSwatch({ label, value, onCommit, disabled }) {
+function ColorSwatch({ label, value, onCommit, disabled, none = false }) {
   const [open, setOpen] = useState3(false);
   const normalized = value.startsWith("#") ? value : "#ffffff";
   return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-0.5", children: [
@@ -988,10 +1052,12 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
           {
             type: "button",
             disabled,
-            "aria-label": `${label} color`,
+            "aria-label": none ? `${label} color (none)` : `${label} color`,
+            title: none ? "None" : void 0,
             onClick: () => setOpen((v) => !v),
-            className: "h-6 w-10 rounded border border-[var(--border-default)] disabled:cursor-default disabled:opacity-40",
-            style: { backgroundColor: normalized }
+            className: "relative h-6 w-10 overflow-hidden rounded border border-[var(--border-default)] disabled:cursor-default disabled:opacity-40",
+            style: { backgroundColor: none ? "#ffffff" : normalized },
+            children: none ? /* @__PURE__ */ jsx7("svg", { className: "absolute inset-0 h-full w-full", viewBox: "0 0 40 24", preserveAspectRatio: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7("line", { x1: "1", y1: "23", x2: "39", y2: "1", stroke: "var(--text-danger)", strokeWidth: "1.5" }) }) : null
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-40 gap-2 p-2`, children: [
@@ -1228,7 +1294,7 @@ function SelectionControls({
                     onBindSlot(slotInput.trim() || null);
                     setSlotPopoverOpen(false);
                   },
-                  className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10",
+                  className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)]",
                   children: slotInput.trim() ? "Bind" : "Unbind"
                 }
               ),
@@ -1310,7 +1376,7 @@ function TextControls({ element, canWrite, onPatch }) {
 function ShapeControls({ element, canWrite, onPatch, showCornerRadius }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     /* @__PURE__ */ jsx7(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
-    /* @__PURE__ */ jsx7(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx7(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite, none: (element.strokeWidth ?? 0) === 0 }),
     /* @__PURE__ */ jsx7(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
     showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx7(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
   ] });
@@ -1376,7 +1442,7 @@ function ImageControls({ element, canWrite, onPatch }) {
                   onPatch({ src: swapUrl.trim() });
                   setSwapOpen(false);
                 },
-                className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10 disabled:cursor-default disabled:opacity-40",
+                className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)] disabled:cursor-default disabled:opacity-40",
                 children: "Replace"
               }
             ),
@@ -1432,7 +1498,8 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides, pa
           const preset = SIZE_PRESETS.find((p) => p.id === id);
           if (preset) onSetPageProps({ width: preset.width, height: preset.height });
         },
-        options: presetOptions
+        options: presetOptions,
+        buttonClassName: "w-44"
       }
     ),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
@@ -1627,7 +1694,7 @@ function ExportControl({ defaults, onExport, className }) {
             setOpen(false);
           }
         },
-        className: "flex h-8 items-center gap-1.5 rounded-md border border-[var(--border-default)] px-2.5 text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40",
+        className: "flex h-8 items-center gap-1.5 rounded-md border border-[var(--border-default)] px-2.5 text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[color-mix(in_srgb,var(--brand-primary)_40%,transparent)]",
         children: [
           /* @__PURE__ */ jsx9(ExportGlyph, { className: "h-3.5 w-3.5" }),
           "Export",
@@ -1681,7 +1748,7 @@ function ExportControl({ defaults, onExport, className }) {
               type: "button",
               "aria-label": "Export image",
               onClick: confirm,
-              className: "rounded border border-[var(--brand-primary)] px-2 py-1 text-[11px] font-medium text-[var(--brand-primary)] transition-colors hover:bg-[var(--brand-primary)]/10",
+              className: "rounded border border-[var(--brand-primary)] px-2 py-1 text-[11px] font-medium text-[var(--brand-primary)] transition-colors hover:bg-[color-mix(in_srgb,var(--brand-primary)_10%,transparent)]",
               children: "Export"
             }
           )
@@ -2062,7 +2129,7 @@ function DesignCanvas({
           /* @__PURE__ */ jsx10("p", { className: "text-xs leading-5 text-[var(--text-secondary)]", children: "The design canvas needs room to work. Open this on a tablet or desktop to edit pages, elements, and export." })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "relative hidden min-h-0 flex-1 sm:block", children: [
+      /* @__PURE__ */ jsxs8("div", { className: `relative hidden min-h-0 flex-1 sm:block ${editorState.showRulers ? "pl-[20px] pt-[20px]" : ""}`, children: [
         /* @__PURE__ */ jsx10(
           Rulers,
           {
@@ -2086,8 +2153,8 @@ function DesignCanvas({
               {
                 style: {
                   position: "absolute",
-                  left: editorState.panX,
-                  top: editorState.panY
+                  left: editorState.panX + (editorState.showRulers ? 20 : 0),
+                  top: editorState.panY + (editorState.showRulers ? 20 : 0)
                 },
                 children: /* @__PURE__ */ jsx10(
                   BleedTrimOverlay,
@@ -2192,4 +2259,4 @@ export {
   ExportControl,
   DesignCanvas
 };
-//# sourceMappingURL=chunk-NC2V63EL.js.map
+//# sourceMappingURL=chunk-FNM7JYME.js.map