@almadar/ui 2.22.1 → 2.23.0

package/dist/components/atoms/avl/AvlEffect.d.ts

@@ -4,5 +4,7 @@ export interface AvlEffectProps extends AvlBaseProps {
     effectType: AvlEffectType;
     size?: number;
     label?: string;
+    /** V2: Render a category-colored background circle behind the icon. */
+    showBackground?: boolean;
 }
 export declare const AvlEffect: React.FC<AvlEffectProps>;

package/dist/components/atoms/avl/AvlState.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import type { AvlBaseProps } from './types';
+import { type StateRole } from './types';
 export interface AvlStateProps extends AvlBaseProps {
     name?: string;
     isInitial?: boolean;
     isTerminal?: boolean;
     width?: number;
     height?: number;
+    /** V2: Role-based fill color. When set, overrides monochrome rendering. */
+    role?: StateRole;
+    /** V2: Number of transitions touching this state. Drives proportional width. */
+    transitionCount?: number;
 }
 export declare const AvlState: React.FC<AvlStateProps>;

package/dist/components/atoms/avl/index.d.ts

@@ -1,5 +1,7 @@
 export type { AvlBaseProps, AvlEffectType, AvlFieldTypeKind, AvlPersistenceKind, AvlOperatorNamespace, } from './types';
 export { AVL_OPERATOR_COLORS, AVL_FIELD_TYPE_SHAPES } from './types';
+export type { StateRole, EffectCategory } from './types';
+export { STATE_COLORS, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, CONNECTION_COLORS, getStateRole } from './types';
 export { AvlOrbital, type AvlOrbitalProps } from './AvlOrbital';
 export { AvlEntity, type AvlEntityProps } from './AvlEntity';
 export { AvlTrait, type AvlTraitProps } from './AvlTrait';

package/dist/components/atoms/avl/types.d.ts

@@ -17,3 +17,37 @@ export type AvlPersistenceKind = 'persistent' | 'runtime' | 'singleton' | 'insta
 export type AvlOperatorNamespace = 'arithmetic' | 'comparison' | 'logic' | 'string' | 'collection' | 'time' | 'control' | 'async';
 export declare const AVL_OPERATOR_COLORS: Record<AvlOperatorNamespace, string>;
 export declare const AVL_FIELD_TYPE_SHAPES: Record<AvlFieldTypeKind, string>;
+export type StateRole = 'initial' | 'terminal' | 'hub' | 'error' | 'default';
+export declare const STATE_COLORS: Record<StateRole, {
+    fill: string;
+    border: string;
+}>;
+export type EffectCategory = 'ui' | 'data' | 'communication' | 'lifecycle' | 'control';
+export declare const EFFECT_CATEGORY_COLORS: Record<EffectCategory, {
+    color: string;
+    bg: string;
+}>;
+export declare const EFFECT_TYPE_TO_CATEGORY: Record<AvlEffectType, EffectCategory>;
+export declare const CONNECTION_COLORS: {
+    readonly forward: {
+        readonly color: "#1E293B";
+        readonly width: 2;
+        readonly dash: "none";
+    };
+    readonly backward: {
+        readonly color: "#94A3B8";
+        readonly width: 1.5;
+        readonly dash: "6 3";
+    };
+    readonly selfLoop: {
+        readonly color: "#CBD5E1";
+        readonly width: 1;
+        readonly dash: "3 2";
+    };
+    readonly emitListen: {
+        readonly color: "#F97316";
+        readonly width: 1.5;
+        readonly dash: "4 3";
+    };
+};
+export declare function getStateRole(name: string, isInitial?: boolean, isTerminal?: boolean, transitionCount?: number, maxTransitionCount?: number): StateRole;

package/dist/components/index.cjs

@@ -15393,7 +15393,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/dist/components/index.js

@@ -15363,7 +15363,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/dist/components/molecules/avl/AvlSwimLane.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface AvlSwimLaneProps {
+    listenedEvents: string[];
+    emittedEvents: string[];
+    centerWidth: number;
+    height: number;
+    color?: string;
+    children: React.ReactNode;
+}
+export declare const AvlSwimLane: React.FC<AvlSwimLaneProps>;

package/dist/components/molecules/avl/AvlTransitionLane.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type AvlEffectType } from '../../atoms/avl/types';
+export interface AvlTransitionLaneEffect {
+    type: AvlEffectType | string;
+}
+export interface AvlTransitionLaneProps {
+    event: string;
+    guard?: string;
+    effects: AvlTransitionLaneEffect[];
+    width: number;
+    x?: number;
+    y?: number;
+    isBackward?: boolean;
+    isSelfLoop?: boolean;
+    color?: string;
+    onTransitionClick?: () => void;
+}
+export declare const AvlTransitionLane: React.FC<AvlTransitionLaneProps>;

package/dist/components/molecules/avl/index.d.ts

@@ -4,6 +4,8 @@ export { AvlClosedCircuit, type AvlClosedCircuitProps, type AvlClosedCircuitStat
 export { AvlEmitListen, type AvlEmitListenProps } from './AvlEmitListen';
 export { AvlSlotMap, type AvlSlotMapProps, type AvlSlotMapSlot } from './AvlSlotMap';
 export { AvlExprTree, type AvlExprTreeProps, type AvlExprTreeNode } from './AvlExprTree';
+export { AvlTransitionLane, type AvlTransitionLaneProps, type AvlTransitionLaneEffect } from './AvlTransitionLane';
+export { AvlSwimLane, type AvlSwimLaneProps } from './AvlSwimLane';
 export { ringPositions, arcPath, radialPositions, gridPositions, curveControlPoint } from './avl-layout';
 export { Avl3DOrbitalNode, type Avl3DOrbitalNodeProps } from './Avl3DOrbitalNode';
 export { Avl3DCrossWire, type Avl3DCrossWireProps } from './Avl3DCrossWire';

package/dist/components/organisms/avl/AvlTraitScene.d.ts

@@ -1,8 +1,8 @@
 /**
- * AvlTraitScene - Zoom Level 3
+ * AvlTraitScene V2 - Zoom Level 3
  *
- * Shows a trait's state machine using ELK (elkjs) for automatic
- * node and edge label placement. No label overlap.
+ * Left-to-right horizontal flow with color-coded states,
+ * transition lanes, and swim lanes for emit/listen events.
  */
 import React from 'react';
 import type { TraitLevelData } from './avl-schema-parser';

package/dist/components/organisms/avl/AvlTransitionScene.d.ts

@@ -1,11 +1,8 @@
 /**
- * AvlTransitionScene - Zoom Level 4
+ * AvlTransitionScene V2 - Zoom Level 4
  *
- * Shows a single transition in detail as a vertical flow:
- * FromState -> Event card -> Guard -> Effects -> ToState
- *
- * Labels are placed in cards between arrow segments,
- * never overlapping the lines.
+ * Card layout replacing vertical waterfall.
+ * Reads like a spec card: from → to, trigger, guard, effects.
  */
 import React from 'react';
 import type { TransitionLevelData } from './avl-schema-parser';

package/dist/illustrations/index.cjs

@@ -2952,6 +2952,35 @@ var AVL_OPERATOR_COLORS = {
   control: "#E74C3C",
   async: "#E91E8F"
 };
+var STATE_COLORS = {
+  initial: { fill: "#22C55E1F", border: "#16A34A" },
+  terminal: { fill: "#EF44441F", border: "#DC2626" },
+  hub: { fill: "#3B82F61F", border: "#2563EB" },
+  error: { fill: "#F59E0B1F", border: "#D97706" },
+  default: { fill: "#6B72801F", border: "#4B5563" }
+};
+var EFFECT_CATEGORY_COLORS = {
+  ui: { color: "#8B5CF6", bg: "#8B5CF614" },
+  data: { color: "#3B82F6", bg: "#3B82F614" },
+  communication: { color: "#F97316", bg: "#F9731614" },
+  lifecycle: { color: "#10B981", bg: "#10B98114" },
+  control: { color: "#6B7280", bg: "#6B728014" }
+};
+var EFFECT_TYPE_TO_CATEGORY = {
+  "render-ui": "ui",
+  "navigate": "ui",
+  "set": "data",
+  "persist": "data",
+  "fetch": "data",
+  "emit": "communication",
+  "notify": "communication",
+  "call-service": "communication",
+  "spawn": "lifecycle",
+  "despawn": "lifecycle",
+  "do": "control",
+  "if": "control",
+  "log": "control"
+};
 var AvlOrbital = ({
   cx = 0,
   cy = 0,
@@ -3223,19 +3252,33 @@ var AvlApplication = ({
   ] });
 };
 AvlApplication.displayName = "AvlApplication";
+function computeWidth(explicit, transitionCount) {
+  if (explicit != null) return explicit;
+  if (transitionCount == null) return 100;
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 100;
+}
 var AvlState = ({
   x = 0,
   y = 0,
   name,
   isInitial = false,
   isTerminal = false,
-  width = 100,
+  width: explicitWidth,
   height = 40,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  role,
+  transitionCount
 }) => {
+  const width = computeWidth(explicitWidth, transitionCount);
   const rx = height / 2;
+  const roleColors = role ? STATE_COLORS[role] : null;
+  const fillColor = roleColors ? roleColors.fill : "none";
+  const strokeColor = roleColors ? roleColors.border : color;
+  const textColor = roleColors ? roleColors.border : color;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
     isInitial && /* @__PURE__ */ jsxRuntime.jsx(
       "circle",
@@ -3243,7 +3286,7 @@ var AvlState = ({
         cx: -16,
         cy: height / 2,
         r: 6,
-        fill: color
+        fill: strokeColor
       }
     ),
     isTerminal && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3256,7 +3299,7 @@ var AvlState = ({
         rx: rx + 4,
         ry: rx + 4,
         fill: "none",
-        stroke: color,
+        stroke: strokeColor,
         strokeWidth: 1,
         opacity: 0.5
       }
@@ -3270,8 +3313,8 @@ var AvlState = ({
         height,
         rx,
         ry: rx,
-        fill: "none",
-        stroke: color,
+        fill: fillColor,
+        stroke: strokeColor,
         strokeWidth: 2
       }
     ),
@@ -3282,8 +3325,9 @@ var AvlState = ({
         y: height / 2,
         textAnchor: "middle",
         dominantBaseline: "central",
-        fill: color,
-        fontSize: 11,
+        fill: textColor,
+        fontSize: role ? 14 : 11,
+        fontWeight: role ? 600 : 400,
         fontFamily: "inherit",
         children: name
       }
@@ -3552,18 +3596,27 @@ var AvlEffect = ({
   label,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  showBackground = false
 }) => {
+  const category = EFFECT_TYPE_TO_CATEGORY[effectType];
+  const catColors = EFFECT_CATEGORY_COLORS[category];
+  const iconColor = showBackground ? catColors.color : color;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
-    effectIcon(effectType, x, y, size, color),
+    showBackground && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: catColors.bg }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: "none", stroke: catColors.color, strokeWidth: 0.5, opacity: 0.3 })
+    ] }),
+    effectIcon(effectType, x, y, size, iconColor),
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
         x,
         y: y + size + 10,
         textAnchor: "middle",
-        fill: color,
-        fontSize: 8,
+        fill: iconColor,
+        fontSize: 11,
+        fontWeight: 500,
         fontFamily: "inherit",
         opacity: 0.7,
         children: label

package/dist/illustrations/index.d.cts

@@ -275,6 +275,7 @@ type AvlEffectType = 'render-ui' | 'set' | 'persist' | 'fetch' | 'emit' | 'navig
 type AvlFieldTypeKind = 'string' | 'number' | 'boolean' | 'date' | 'enum' | 'object' | 'array';
 type AvlPersistenceKind = 'persistent' | 'runtime' | 'singleton' | 'instance';
 type AvlOperatorNamespace = 'arithmetic' | 'comparison' | 'logic' | 'string' | 'collection' | 'time' | 'control' | 'async';
+type StateRole = 'initial' | 'terminal' | 'hub' | 'error' | 'default';
 
 interface AvlOrbitalProps {
     cx?: number;
@@ -327,6 +328,10 @@ interface AvlStateProps extends AvlBaseProps {
     isTerminal?: boolean;
     width?: number;
     height?: number;
+    /** V2: Role-based fill color. When set, overrides monochrome rendering. */
+    role?: StateRole;
+    /** V2: Number of transitions touching this state. Drives proportional width. */
+    transitionCount?: number;
 }
 declare const AvlState: React.FC<AvlStateProps>;
 
@@ -364,6 +369,8 @@ interface AvlEffectProps extends AvlBaseProps {
     effectType: AvlEffectType;
     size?: number;
     label?: string;
+    /** V2: Render a category-colored background circle behind the icon. */
+    showBackground?: boolean;
 }
 declare const AvlEffect: React.FC<AvlEffectProps>;
 

package/dist/illustrations/index.js

@@ -2946,6 +2946,35 @@ var AVL_OPERATOR_COLORS = {
   control: "#E74C3C",
   async: "#E91E8F"
 };
+var STATE_COLORS = {
+  initial: { fill: "#22C55E1F", border: "#16A34A" },
+  terminal: { fill: "#EF44441F", border: "#DC2626" },
+  hub: { fill: "#3B82F61F", border: "#2563EB" },
+  error: { fill: "#F59E0B1F", border: "#D97706" },
+  default: { fill: "#6B72801F", border: "#4B5563" }
+};
+var EFFECT_CATEGORY_COLORS = {
+  ui: { color: "#8B5CF6", bg: "#8B5CF614" },
+  data: { color: "#3B82F6", bg: "#3B82F614" },
+  communication: { color: "#F97316", bg: "#F9731614" },
+  lifecycle: { color: "#10B981", bg: "#10B98114" },
+  control: { color: "#6B7280", bg: "#6B728014" }
+};
+var EFFECT_TYPE_TO_CATEGORY = {
+  "render-ui": "ui",
+  "navigate": "ui",
+  "set": "data",
+  "persist": "data",
+  "fetch": "data",
+  "emit": "communication",
+  "notify": "communication",
+  "call-service": "communication",
+  "spawn": "lifecycle",
+  "despawn": "lifecycle",
+  "do": "control",
+  "if": "control",
+  "log": "control"
+};
 var AvlOrbital = ({
   cx = 0,
   cy = 0,
@@ -3217,19 +3246,33 @@ var AvlApplication = ({
   ] });
 };
 AvlApplication.displayName = "AvlApplication";
+function computeWidth(explicit, transitionCount) {
+  if (explicit != null) return explicit;
+  if (transitionCount == null) return 100;
+  if (transitionCount >= 5) return 160;
+  if (transitionCount >= 3) return 130;
+  return 100;
+}
 var AvlState = ({
   x = 0,
   y = 0,
   name,
   isInitial = false,
   isTerminal = false,
-  width = 100,
+  width: explicitWidth,
   height = 40,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  role,
+  transitionCount
 }) => {
+  const width = computeWidth(explicitWidth, transitionCount);
   const rx = height / 2;
+  const roleColors = role ? STATE_COLORS[role] : null;
+  const fillColor = roleColors ? roleColors.fill : "none";
+  const strokeColor = roleColors ? roleColors.border : color;
+  const textColor = roleColors ? roleColors.border : color;
   return /* @__PURE__ */ jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
     isInitial && /* @__PURE__ */ jsx(
       "circle",
@@ -3237,7 +3280,7 @@ var AvlState = ({
         cx: -16,
         cy: height / 2,
         r: 6,
-        fill: color
+        fill: strokeColor
       }
     ),
     isTerminal && /* @__PURE__ */ jsx(
@@ -3250,7 +3293,7 @@ var AvlState = ({
         rx: rx + 4,
         ry: rx + 4,
         fill: "none",
-        stroke: color,
+        stroke: strokeColor,
         strokeWidth: 1,
         opacity: 0.5
       }
@@ -3264,8 +3307,8 @@ var AvlState = ({
         height,
         rx,
         ry: rx,
-        fill: "none",
-        stroke: color,
+        fill: fillColor,
+        stroke: strokeColor,
         strokeWidth: 2
       }
     ),
@@ -3276,8 +3319,9 @@ var AvlState = ({
         y: height / 2,
         textAnchor: "middle",
         dominantBaseline: "central",
-        fill: color,
-        fontSize: 11,
+        fill: textColor,
+        fontSize: role ? 14 : 11,
+        fontWeight: role ? 600 : 400,
         fontFamily: "inherit",
         children: name
       }
@@ -3546,18 +3590,27 @@ var AvlEffect = ({
   label,
   color = "var(--color-primary)",
   opacity = 1,
-  className
+  className,
+  showBackground = false
 }) => {
+  const category = EFFECT_TYPE_TO_CATEGORY[effectType];
+  const catColors = EFFECT_CATEGORY_COLORS[category];
+  const iconColor = showBackground ? catColors.color : color;
   return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-    effectIcon(effectType, x, y, size, color),
+    showBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: catColors.bg }),
+      /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: size * 1.2, fill: "none", stroke: catColors.color, strokeWidth: 0.5, opacity: 0.3 })
+    ] }),
+    effectIcon(effectType, x, y, size, iconColor),
     label && /* @__PURE__ */ jsx(
       "text",
       {
         x,
         y: y + size + 10,
         textAnchor: "middle",
-        fill: color,
-        fontSize: 8,
+        fill: iconColor,
+        fontSize: 11,
+        fontWeight: 500,
         fontFamily: "inherit",
         opacity: 0.7,
         children: label

package/dist/marketing/index.cjs

@@ -4039,7 +4039,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/dist/marketing/index.js

@@ -4015,7 +4015,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.22.1",
+  "version": "2.23.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",