@almadar/ui 2.16.0 → 2.17.0

package/dist/avl/index.cjs

@@ -1055,6 +1055,16 @@ AvlBindingRef.displayName = "AvlBindingRef";
 
 // components/molecules/avl/avl-layout.ts
 function ringPositions(cx, cy, r, count, startAngle = -Math.PI / 2) {
+  if (count === 0) return [];
+  if (count === 1) {
+    return [{ x: cx, y: cy, angle: 0 }];
+  }
+  if (count === 2) {
+    return [
+      { x: cx - r * 0.7, y: cy, angle: Math.PI },
+      { x: cx + r * 0.7, y: cy, angle: 0 }
+    ];
+  }
   return Array.from({ length: count }, (_, i) => {
     const angle = startAngle + Math.PI * 2 * i / count;
     return {
@@ -1152,6 +1162,43 @@ var AvlStateMachine = ({
         ` }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: r + 30, fill: `url(#${ids.grad})` }),
     transitions.map((tr, i) => {
+      if (tr.from !== tr.to) return null;
+      const idx = stateIndex.get(tr.from);
+      if (idx === void 0) return null;
+      const pos = positions[idx];
+      const loopR = 20;
+      const loopY = pos.y - stateHeight / 2 - 4;
+      const d = `M${pos.x - 14},${loopY} C${pos.x - 14},${loopY - loopR * 2} ${pos.x + 14},${loopY - loopR * 2} ${pos.x + 14},${loopY}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            opacity: 0.7,
+            markerEnd: `url(#${ids.grad})`
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: pos.x,
+            y: loopY - loopR * 2 + 4,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: 9,
+            fontFamily: "inherit",
+            fontWeight: "bold",
+            opacity: 0.8,
+            children: tr.event
+          }
+        )
+      ] }, `self-${i}`);
+    }),
+    transitions.map((tr, i) => {
+      if (tr.from === tr.to) return null;
       const fromIdx = stateIndex.get(tr.from);
       const toIdx = stateIndex.get(tr.to);
       if (fromIdx === void 0 || toIdx === void 0) return null;
@@ -1611,6 +1658,42 @@ var AvlEmitListen = ({
   ] });
 };
 AvlEmitListen.displayName = "AvlEmitListen";
+var SLOT_PRESETS = {
+  header: { x: 10, y: 5, width: 340, height: 35 },
+  main: { x: 120, y: 50, width: 230, height: 195 },
+  sidebar: { x: 10, y: 50, width: 100, height: 195 },
+  modal: { x: 80, y: 60, width: 200, height: 140 },
+  drawer: { x: 220, y: 50, width: 130, height: 195 },
+  toast: { x: 220, y: 210, width: 130, height: 35 },
+  footer: { x: 10, y: 220, width: 340, height: 30 },
+  center: { x: 60, y: 50, width: 240, height: 195 },
+  "hud-top": { x: 10, y: 5, width: 340, height: 30 },
+  "hud-bottom": { x: 10, y: 220, width: 340, height: 30 }
+};
+function resolveSlot(slot, fallbackIdx) {
+  if (slot.x !== void 0 && slot.y !== void 0 && slot.width !== void 0 && slot.height !== void 0) {
+    return slot;
+  }
+  const preset = SLOT_PRESETS[slot.name];
+  if (preset) {
+    return {
+      name: slot.name,
+      x: slot.x ?? preset.x,
+      y: slot.y ?? preset.y,
+      width: slot.width ?? preset.width,
+      height: slot.height ?? preset.height
+    };
+  }
+  const col = fallbackIdx % 2;
+  const row = Math.floor(fallbackIdx / 2);
+  return {
+    name: slot.name,
+    x: 10 + col * 175,
+    y: 50 + row * 100,
+    width: 165,
+    height: 90
+  };
+}
 var AvlSlotMap = ({
   slots,
   pageWidth = 360,
@@ -1621,6 +1704,13 @@ var AvlSlotMap = ({
 }) => {
   const ox = (600 - pageWidth) / 2;
   const oy = (400 - pageHeight) / 2;
+  let unknownIdx = 0;
+  const resolvedSlots = slots.map((slot) => {
+    const isUnknown = !SLOT_PRESETS[slot.name] && (slot.x === void 0 || slot.y === void 0);
+    const resolved = resolveSlot(slot, isUnknown ? unknownIdx : 0);
+    if (isUnknown) unknownIdx++;
+    return resolved;
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
     animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
@@ -1665,7 +1755,7 @@ var AvlSlotMap = ({
         children: "Page Layout"
       }
     ),
-    slots.map((slot) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    resolvedSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
         {

package/dist/avl/index.d.cts

@@ -249,10 +249,11 @@ declare const AvlEmitListen: React.FC<AvlEmitListenProps>;
 
 interface AvlSlotMapSlot {
     name: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    /** Manual position overrides. Omit for auto-layout. */
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
 }
 interface AvlSlotMapProps {
     slots: AvlSlotMapSlot[];
@@ -280,7 +281,8 @@ declare const AvlExprTree: React.FC<AvlExprTreeProps>;
 /**
  * AVL layout utilities for positioning atoms in composed diagrams.
  */
-/** Distribute N points evenly around a ring. */
+/** Distribute N points evenly around a ring.
+ *  Handles edge cases: 1 state (centered), 2 states (horizontal). */
 declare function ringPositions(cx: number, cy: number, r: number, count: number, startAngle?: number): Array<{
     x: number;
     y: number;

package/dist/avl/index.js

@@ -1049,6 +1049,16 @@ AvlBindingRef.displayName = "AvlBindingRef";
 
 // components/molecules/avl/avl-layout.ts
 function ringPositions(cx, cy, r, count, startAngle = -Math.PI / 2) {
+  if (count === 0) return [];
+  if (count === 1) {
+    return [{ x: cx, y: cy, angle: 0 }];
+  }
+  if (count === 2) {
+    return [
+      { x: cx - r * 0.7, y: cy, angle: Math.PI },
+      { x: cx + r * 0.7, y: cy, angle: 0 }
+    ];
+  }
   return Array.from({ length: count }, (_, i) => {
     const angle = startAngle + Math.PI * 2 * i / count;
     return {
@@ -1146,6 +1156,43 @@ var AvlStateMachine = ({
         ` }),
     /* @__PURE__ */ jsx("circle", { cx, cy, r: r + 30, fill: `url(#${ids.grad})` }),
     transitions.map((tr, i) => {
+      if (tr.from !== tr.to) return null;
+      const idx = stateIndex.get(tr.from);
+      if (idx === void 0) return null;
+      const pos = positions[idx];
+      const loopR = 20;
+      const loopY = pos.y - stateHeight / 2 - 4;
+      const d = `M${pos.x - 14},${loopY} C${pos.x - 14},${loopY - loopR * 2} ${pos.x + 14},${loopY - loopR * 2} ${pos.x + 14},${loopY}`;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            opacity: 0.7,
+            markerEnd: `url(#${ids.grad})`
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: pos.x,
+            y: loopY - loopR * 2 + 4,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: 9,
+            fontFamily: "inherit",
+            fontWeight: "bold",
+            opacity: 0.8,
+            children: tr.event
+          }
+        )
+      ] }, `self-${i}`);
+    }),
+    transitions.map((tr, i) => {
+      if (tr.from === tr.to) return null;
       const fromIdx = stateIndex.get(tr.from);
       const toIdx = stateIndex.get(tr.to);
       if (fromIdx === void 0 || toIdx === void 0) return null;
@@ -1605,6 +1652,42 @@ var AvlEmitListen = ({
   ] });
 };
 AvlEmitListen.displayName = "AvlEmitListen";
+var SLOT_PRESETS = {
+  header: { x: 10, y: 5, width: 340, height: 35 },
+  main: { x: 120, y: 50, width: 230, height: 195 },
+  sidebar: { x: 10, y: 50, width: 100, height: 195 },
+  modal: { x: 80, y: 60, width: 200, height: 140 },
+  drawer: { x: 220, y: 50, width: 130, height: 195 },
+  toast: { x: 220, y: 210, width: 130, height: 35 },
+  footer: { x: 10, y: 220, width: 340, height: 30 },
+  center: { x: 60, y: 50, width: 240, height: 195 },
+  "hud-top": { x: 10, y: 5, width: 340, height: 30 },
+  "hud-bottom": { x: 10, y: 220, width: 340, height: 30 }
+};
+function resolveSlot(slot, fallbackIdx) {
+  if (slot.x !== void 0 && slot.y !== void 0 && slot.width !== void 0 && slot.height !== void 0) {
+    return slot;
+  }
+  const preset = SLOT_PRESETS[slot.name];
+  if (preset) {
+    return {
+      name: slot.name,
+      x: slot.x ?? preset.x,
+      y: slot.y ?? preset.y,
+      width: slot.width ?? preset.width,
+      height: slot.height ?? preset.height
+    };
+  }
+  const col = fallbackIdx % 2;
+  const row = Math.floor(fallbackIdx / 2);
+  return {
+    name: slot.name,
+    x: 10 + col * 175,
+    y: 50 + row * 100,
+    width: 165,
+    height: 90
+  };
+}
 var AvlSlotMap = ({
   slots,
   pageWidth = 360,
@@ -1615,6 +1698,13 @@ var AvlSlotMap = ({
 }) => {
   const ox = (600 - pageWidth) / 2;
   const oy = (400 - pageHeight) / 2;
+  let unknownIdx = 0;
+  const resolvedSlots = slots.map((slot) => {
+    const isUnknown = !SLOT_PRESETS[slot.name] && (slot.x === void 0 || slot.y === void 0);
+    const resolved = resolveSlot(slot, isUnknown ? unknownIdx : 0);
+    if (isUnknown) unknownIdx++;
+    return resolved;
+  });
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
     animated && /* @__PURE__ */ jsx("style", { children: `
           @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
@@ -1659,7 +1749,7 @@ var AvlSlotMap = ({
         children: "Page Layout"
       }
     ),
-    slots.map((slot) => /* @__PURE__ */ jsxs("g", { children: [
+    resolvedSlots.map((slot) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "rect",
         {