@olwiba/ui 0.1.9 → 0.1.10

package/dist/index.d.ts

@@ -1066,7 +1066,7 @@ interface FlowBracketProps {
      * Defaults to 22.
      */
     extent?: number;
-    /** Show open-chevron arrowhead at the top (destination) end. Default: true. */
+    /** Show open-chevron arrowhead at the destination end. Default: true. */
     arrow?: boolean;
     /** CSS color for both bracket lines and animated dots. Defaults to muted slate. */
     color?: string;
@@ -1098,8 +1098,9 @@ interface FlowBracketProps {
  * left and/or right outside edges — connecting the top of the first child down
  * to the bottom of the last child (e.g. docs → SYNC direction).
  *
- * Bracket lines use `overflow: visible` on the SVG to draw into the parent's padding.
- * Ensure the parent section/container has enough horizontal padding for `extent`.
+ * Arrowheads are rendered as absolutely-positioned SVGs (not SVG markers) so
+ * they render at a consistent pixel size regardless of the bracket SVG's aspect
+ * ratio (which spans the full section height with preserveAspectRatio="none").
  */
 declare function FlowBracket({ anchorTop, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -3092,8 +3092,6 @@ function FlowConnector({
     }
   );
 }
-var MARKER_L = "fb-ml";
-var MARKER_R = "fb-mr";
 function FlowBracket({
   anchorTop = 8,
   anchorBottom = 92,
@@ -3152,6 +3150,20 @@ function FlowBracket({
     pointerEvents: "none",
     opacity: 0
   };
+  const chevronProps = {
+    fill: "none",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  const arrowBase = {
+    position: "absolute",
+    width: 10,
+    height: 8,
+    overflow: "visible",
+    pointerEvents: "none",
+    transform: "translate(-50%, -50%)"
+  };
   return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", ...style }, children: [
     animate && /* @__PURE__ */ jsx("style", { children: dotKeyframes }),
     /* @__PURE__ */ jsxs(
@@ -3163,20 +3175,15 @@ function FlowBracket({
         className: "pointer-events-none absolute inset-0",
         style: { width: "100%", height: "100%", overflow: "visible" },
         children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            /* @__PURE__ */ jsx("marker", { id: MARKER_L, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cl, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            /* @__PURE__ */ jsx("marker", { id: MARKER_R, markerWidth: "10", markerHeight: "8", refX: "8", refY: "4", orient: "auto", children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", fill: "none", stroke: cr, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-          ] }),
           left && /* @__PURE__ */ jsx(
             "path",
             {
               d: leftD,
               fill: "none",
-              stroke: cl,
+              style: { stroke: cl },
               strokeWidth: 1.5,
               strokeDasharray: "5,4",
-              vectorEffect: "non-scaling-stroke",
-              ...arrow ? { markerEnd: `url(#${MARKER_L})` } : {}
+              vectorEffect: "non-scaling-stroke"
             }
           ),
           right && /* @__PURE__ */ jsx(
@@ -3184,16 +3191,37 @@ function FlowBracket({
             {
               d: rightD,
               fill: "none",
-              stroke: cr,
+              style: { stroke: cr },
               strokeWidth: 1.5,
               strokeDasharray: "5,4",
-              vectorEffect: "non-scaling-stroke",
-              ...arrow ? { markerEnd: `url(#${MARKER_R})` } : {}
+              vectorEffect: "non-scaling-stroke"
             }
           )
         ]
       }
     ),
+    arrow && left && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 10 8",
+        style: { ...arrowBase, top: `${anchorTop}%`, left: 0 },
+        children: /* @__PURE__ */ jsx("polyline", { points: "1,1 8,4 1,7", style: { stroke: cl }, ...chevronProps })
+      }
+    ),
+    arrow && right && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 10 8",
+        style: {
+          ...arrowBase,
+          top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+          left: "100%"
+        },
+        children: /* @__PURE__ */ jsx("polyline", { points: "9,1 2,4 9,7", style: { stroke: cr }, ...chevronProps })
+      }
+    ),
     children,
     animate && left && /* @__PURE__ */ jsx(
       "div",