@almadar/ui 5.26.0 → 5.26.1

package/dist/runtime/index.js

@@ -2269,18 +2269,22 @@ var init_SvgBranch = __esm({
   "components/core/atoms/svg/SvgBranch.tsx"() {
     "use client";
     SvgBranch = ({
-      x,
-      y,
+      x = 5,
+      y = 50,
       variant = "fork",
       branches = 2,
       size = 1,
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
+      let inner;
       if (variant === "diamond") {
         const points = buildDiamondPoints(x, y, size);
-        return /* @__PURE__ */ jsx("g", { className, opacity, children: /* @__PURE__ */ jsx(
+        inner = /* @__PURE__ */ jsx("g", { className, opacity, children: /* @__PURE__ */ jsx(
           "polygon",
           {
             points,
@@ -2290,23 +2294,28 @@ var init_SvgBranch = __esm({
             strokeLinejoin: "round"
           }
         ) });
+      } else {
+        const paths = variant === "fork" ? buildForkPaths(x, y, branches, size) : buildMergePaths(x, y, branches, size);
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+          paths.map((d, i) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              d,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2,
+              strokeLinecap: "round"
+            },
+            i
+          )),
+          variant === "fork" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color }),
+          variant === "merge" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color })
+        ] });
       }
-      const paths = variant === "fork" ? buildForkPaths(x, y, branches, size) : buildMergePaths(x, y, branches, size);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-        paths.map((d, i) => /* @__PURE__ */ jsx(
-          "path",
-          {
-            d,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2,
-            strokeLinecap: "round"
-          },
-          i
-        )),
-        variant === "fork" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color }),
-        variant === "merge" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color })
-      ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: inner });
     };
     SvgBranch.displayName = "SvgBranch";
   }
@@ -2316,20 +2325,23 @@ var init_SvgConnection = __esm({
   "components/core/atoms/svg/SvgConnection.tsx"() {
     "use client";
     SvgConnection = ({
-      x1,
-      y1,
-      x2,
-      y2,
+      x1 = 10,
+      y1 = 50,
+      x2 = 90,
+      y2 = 50,
       variant = "solid",
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const dashProps = variant === "solid" ? {} : {
         strokeDasharray: "8 6"
       };
-      return /* @__PURE__ */ jsx(
+      const inner = /* @__PURE__ */ jsx(
         "line",
         {
           className: [
@@ -2347,22 +2359,30 @@ var init_SvgConnection = __esm({
           ...dashProps
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgConnection.displayName = "SvgConnection";
   }
 });
-var flowIdCounter, SvgFlow;
+var flowIdCounter, DEFAULT_POINTS, SvgFlow;
 var init_SvgFlow = __esm({
   "components/core/atoms/svg/SvgFlow.tsx"() {
     "use client";
     flowIdCounter = 0;
+    DEFAULT_POINTS = [[10, 50], [50, 20], [90, 50]];
     SvgFlow = ({
-      points,
+      points = DEFAULT_POINTS,
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       animated = false,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const markerId = React84__default.useMemo(() => {
         flowIdCounter += 1;
@@ -2372,7 +2392,7 @@ var init_SvgFlow = __esm({
         return null;
       }
       const pathData = points.map((pt, i) => `${i === 0 ? "M" : "L"}${pt[0]},${pt[1]}`).join(" ");
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
           "marker",
           {
@@ -2401,6 +2421,10 @@ var init_SvgFlow = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgFlow.displayName = "SvgFlow";
   }
@@ -2410,8 +2434,8 @@ var init_SvgGrid = __esm({
   "components/core/atoms/svg/SvgGrid.tsx"() {
     "use client";
     SvgGrid = ({
-      x,
-      y,
+      x = 10,
+      y = 10,
       cols = 4,
       rows: rows2 = 3,
       spacing = 20,
@@ -2419,10 +2443,13 @@ var init_SvgGrid = __esm({
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      highlights = []
+      highlights = [],
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const highlightSet = new Set(highlights);
-      return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: rows2 }).map(
+      const inner = /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: rows2 }).map(
         (_, row) => Array.from({ length: cols }).map((_2, col) => {
           const index = row * cols + col;
           const isHighlighted = highlightSet.has(index);
@@ -2441,6 +2468,10 @@ var init_SvgGrid = __esm({
           );
         })
       ) });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgGrid.displayName = "SvgGrid";
   }
@@ -2450,15 +2481,18 @@ var init_SvgLobe = __esm({
   "components/core/atoms/svg/SvgLobe.tsx"() {
     "use client";
     SvgLobe = ({
-      cx,
-      cy,
+      cx = 50,
+      cy = 50,
       rx = 14,
       ry = 20,
       rotation = 0,
       shells = 2,
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const clampedShells = Math.max(1, Math.min(3, shells));
       const renderShell = (shellIndex) => {
@@ -2493,7 +2527,7 @@ var init_SvgLobe = __esm({
           )
         ] }, shellIndex);
       };
-      return /* @__PURE__ */ jsx(
+      const inner = /* @__PURE__ */ jsx(
         "g",
         {
           className,
@@ -2502,6 +2536,10 @@ var init_SvgLobe = __esm({
           children: Array.from({ length: clampedShells }, (_, i) => renderShell(i))
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgLobe.displayName = "SvgLobe";
   }
@@ -2530,18 +2568,21 @@ var init_SvgMesh = __esm({
   "components/core/atoms/svg/SvgMesh.tsx"() {
     "use client";
     SvgMesh = ({
-      cx,
-      cy,
+      cx = 60,
+      cy = 60,
       nodes = 6,
       radius = 50,
       color = "var(--color-primary)",
       connectionDensity = 0.5,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 120,
+      height = 120
     }) => {
       const positions = getNodePositions(cx, cy, nodes, radius);
       const connections = getConnections(nodes, connectionDensity);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         connections.map(([a, b]) => /* @__PURE__ */ jsx(
           "line",
           {
@@ -2566,6 +2607,10 @@ var init_SvgMesh = __esm({
           i
         ))
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgMesh.displayName = "SvgMesh";
   }
@@ -2707,74 +2752,82 @@ var init_SvgMorph = __esm({
     };
     FlowArrow.displayName = "FlowArrow";
     SvgMorph = ({
-      x,
-      y,
+      x = 5,
+      y = 10,
       size = 1,
       variant = "generic",
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 130,
+      height = 50
     }) => {
       const gap = 40 * size;
       const midY = y + 10 * size;
+      let inner;
       if (variant === "text-to-code") {
         const leftEnd = x + 30 * size;
         const rightStart = leftEnd + gap;
-        return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
           /* @__PURE__ */ jsx(TextLines, { x, y, scale: size, color }),
           /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
           /* @__PURE__ */ jsx(CodeBrackets, { x: rightStart, y, scale: size, color })
         ] });
-      }
-      if (variant === "code-to-app") {
+      } else if (variant === "code-to-app") {
         const leftEnd = x + 26 * size;
         const rightStart = leftEnd + gap;
-        return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
           /* @__PURE__ */ jsx(CodeBrackets, { x, y, scale: size, color }),
           /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
           /* @__PURE__ */ jsx(AppRect, { x: rightStart, y, scale: size, color })
         ] });
+      } else {
+        const circleR = 10 * size;
+        const circleX = x + circleR;
+        const squareStart = x + circleR * 2 + gap;
+        const squareSize = circleR * 2;
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: circleX,
+              cy: midY,
+              r: circleR,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2 * size
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FlowArrow,
+            {
+              x1: circleX + circleR + 2 * size,
+              y: midY,
+              x2: squareStart,
+              scale: size,
+              color
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: squareStart,
+              y: midY - circleR,
+              width: squareSize,
+              height: squareSize,
+              rx: 3 * size,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2 * size
+            }
+          )
+        ] });
       }
-      const circleR = 10 * size;
-      const circleX = x + circleR;
-      const squareStart = x + circleR * 2 + gap;
-      const squareSize = circleR * 2;
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: circleX,
-            cy: midY,
-            r: circleR,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2 * size
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FlowArrow,
-          {
-            x1: circleX + circleR + 2 * size,
-            y: midY,
-            x2: squareStart,
-            scale: size,
-            color
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: squareStart,
-            y: midY - circleR,
-            width: squareSize,
-            height: squareSize,
-            rx: 3 * size,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2 * size
-          }
-        )
-      ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: inner });
     };
     SvgMorph.displayName = "SvgMorph";
   }
@@ -2784,16 +2837,19 @@ var init_SvgNode = __esm({
   "components/core/atoms/svg/SvgNode.tsx"() {
     "use client";
     SvgNode = ({
-      x,
-      y,
+      x = 50,
+      y = 50,
       r = 6,
       variant = "filled",
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      label
+      label,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         variant === "pulse" && /* @__PURE__ */ jsx(
           "circle",
           {
@@ -2831,6 +2887,10 @@ var init_SvgNode = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgNode.displayName = "SvgNode";
   }
@@ -2852,16 +2912,19 @@ var init_SvgPulse = __esm({
 }
 `;
     SvgPulse = ({
-      cx,
-      cy,
+      cx = 70,
+      cy = 70,
       rings = 3,
       maxRadius = 60,
       color = "var(--color-primary)",
       animated = true,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 140,
+      height = 140
     }) => {
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         animated && /* @__PURE__ */ jsx("style", { children: PULSE_KEYFRAMES }),
         Array.from({ length: rings }).map((_, i) => {
           const ringRadius = (i + 1) / rings * maxRadius;
@@ -2887,6 +2950,10 @@ var init_SvgPulse = __esm({
         }),
         /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color })
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgPulse.displayName = "SvgPulse";
   }
@@ -2897,21 +2964,24 @@ var init_SvgRing = __esm({
     "use client";
     ringIdCounter = 0;
     SvgRing = ({
-      cx,
-      cy,
+      cx = 50,
+      cy = 50,
       r = 40,
       variant = "solid",
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       opacity = 1,
       className,
-      label
+      label,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const gradientId = React84__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         variant === "glow" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [
             /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
@@ -2944,6 +3014,10 @@ var init_SvgRing = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgRing.displayName = "SvgRing";
   }
@@ -2955,15 +3029,18 @@ var init_SvgShield = __esm({
     SHIELD_PATH = "M15,2 C15,2 5,5 2,6 C2,6 2,18 5,24 C8,30 15,34 15,34 C15,34 22,30 25,24 C28,18 28,6 28,6 C25,5 15,2 15,2 Z";
     CHECK_PATH = "M10,18 L14,22 L21,13";
     SvgShield = ({
-      x,
-      y,
+      x = 50,
+      y = 50,
       size = 1,
       variant = "outline",
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      return /* @__PURE__ */ jsxs(
+      const inner = /* @__PURE__ */ jsxs(
         "g",
         {
           className,
@@ -2994,6 +3071,10 @@ var init_SvgShield = __esm({
           ]
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgShield.displayName = "SvgShield";
   }
@@ -3003,20 +3084,23 @@ var init_SvgStack = __esm({
   "components/core/atoms/svg/SvgStack.tsx"() {
     "use client";
     SvgStack = ({
-      x,
-      y,
+      x = 10,
+      y = 40,
       layers: rawLayers = 3,
       width = 60,
       height = 40,
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      labels
+      labels,
+      asRoot = true,
+      svgWidth = 90,
+      svgHeight = 80
     }) => {
       const layers = Math.max(2, Math.min(4, rawLayers));
       const verticalOffset = 8;
       const horizontalOffset = 4;
-      return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: layers }).map((_, i) => {
+      const inner = /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: layers }).map((_, i) => {
         const layerIndex = layers - 1 - i;
         const layerX = x + layerIndex * horizontalOffset;
         const layerY = y - layerIndex * verticalOffset;
@@ -3054,6 +3138,10 @@ var init_SvgStack = __esm({
           )
         ] }, layerIndex);
       }) });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${svgWidth} ${svgHeight}`, width: svgWidth, height: svgHeight, children: inner });
+      }
+      return inner;
     };
     SvgStack.displayName = "SvgStack";
   }
@@ -3890,10 +3978,11 @@ var init_ProgressBar = __esm({
       const effectiveColor = color ?? variant;
       const effectiveShowPercentage = showPercentage || showLabel;
       if (progressType === "linear") {
+        const showHeader = label || effectiveShowPercentage;
         return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground", children: label }),
-            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground font-medium", children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground", children: label }),
+            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: cn("text-sm text-foreground font-medium", !label && "ml-auto"), children: [
               Math.round(percentage),
               "%"
             ] })
@@ -3978,10 +4067,11 @@ var init_ProgressBar = __esm({
         const stepValue = max / steps;
         const activeSteps = Math.floor(value / stepValue);
         const partialStep = value % stepValue / stepValue;
+        const showStepHeader = label || effectiveShowPercentage;
         return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
-            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          showStepHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
+            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: cn("text-sm text-muted-foreground", !label && "ml-auto"), children: [
               Math.round(percentage),
               "%"
             ] })
@@ -10502,7 +10592,7 @@ var init_AuthLayout = __esm({
     init_Stack();
     init_Typography();
     AuthLayout = ({
-      appName = "{{APP_TITLE}}",
+      appName = "My App",
       logo,
       backgroundImage,
       showBranding = true,
@@ -14226,7 +14316,7 @@ var init_MarkdownContent = __esm({
     init_CodeBlock();
     init_cn();
     MarkdownContent = React84__default.memo(
-      ({ content, direction, className }) => {
+      ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
         return /* @__PURE__ */ jsx(
@@ -46212,6 +46302,7 @@ var init_component_registry_generated = __esm({
     init_StatDisplay();
     init_StateArchitectBoard();
     init_StateIndicator();
+    init_StateJsonView();
     init_StateMachineView();
     init_StateNode();
     init_StatsGrid();
@@ -46526,6 +46617,7 @@ var init_component_registry_generated = __esm({
       "StatDisplay": StatDisplay,
       "StateArchitectBoard": StateArchitectBoard,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": StateMachineView,
       "StateNode": StateNode2,
       "StatsGrid": StatsGrid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.26.0",
+  "version": "5.26.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [