@almadar/ui 2.22.2 → 2.24.0

package/dist/components/molecules/EdgeDecoration.d.ts

@@ -0,0 +1,35 @@
+/**
+ * EdgeDecoration Molecule
+ *
+ * Standalone SVG decorative elements positioned on section edges.
+ * Unlike GeometricPattern (which tiles small units), these are large
+ * singular shapes placed at specific positions: left edge, right edge,
+ * or both.
+ *
+ * Variants:
+ *   arch       — Concentric pointed mihrab arches (half-circles opening inward)
+ *   vine       — Flowing arabesque scroll tendrils running vertically
+ *   lattice    — Fine curved diamond lattice mesh
+ *
+ * Each variant renders as an absolutely-positioned SVG on one or both
+ * sides of the parent container.
+ */
+import React from 'react';
+export type EdgeVariant = 'arch' | 'vine' | 'lattice';
+export type EdgeSide = 'left' | 'right' | 'both';
+export interface EdgeDecorationProps {
+    /** Which decorative element */
+    variant?: EdgeVariant;
+    /** Which side(s) to place the decoration */
+    side?: EdgeSide;
+    /** Overall opacity (default: 0.15) */
+    opacity?: number;
+    /** Stroke color */
+    color?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Width of the decoration area as percentage of container (default: 15) */
+    width?: number;
+    className?: string;
+}
+export declare const EdgeDecoration: React.FC<EdgeDecorationProps>;

package/dist/components/molecules/GeometricPattern.d.ts

@@ -0,0 +1,33 @@
+/**
+ * GeometricPattern Molecule
+ *
+ * Composes PatternTile into reusable layout modes for Islamic geometric
+ * background decoration. Supports four modes:
+ *
+ *   background — full tiling fill behind content
+ *   left/right — pattern fades from one side toward the other
+ *   frame      — thin decorative strips above and below content
+ *
+ * Uses SVG <pattern> for efficient tiling and <mask> for fade effects.
+ * All rendering is pure SVG (SSR-safe, no browser APIs).
+ */
+import React from 'react';
+import type { PatternVariant } from '../atoms/PatternTile';
+export interface GeometricPatternProps {
+    /** Which geometric tile design */
+    variant?: PatternVariant;
+    /** Layout mode */
+    mode?: 'background' | 'left' | 'right' | 'dual' | 'around' | 'frame';
+    /** Overall opacity (default: 0.06) */
+    opacity?: number;
+    /** Stroke color passed to PatternTile */
+    color?: string;
+    /** Tile scale multiplier (default: 1) */
+    scale?: number;
+    /** Stroke width passed to PatternTile */
+    strokeWidth?: number;
+    /** Content to wrap (used in frame mode) */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const GeometricPattern: React.FC<GeometricPatternProps>;

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/molecules/index.d.ts

@@ -76,3 +76,5 @@ export { TagCloud, type TagCloudProps, type TagCloudItem } from './TagCloud';
 export { CommunityLinks, type CommunityLinksProps } from './CommunityLinks';
 export { TeamCard, type TeamCardProps } from './TeamCard';
 export { ShowcaseCard, type ShowcaseCardProps } from './ShowcaseCard';
+export { GeometricPattern, type GeometricPatternProps } from './GeometricPattern';
+export { EdgeDecoration, type EdgeDecorationProps, type EdgeVariant, type EdgeSide } from './EdgeDecoration';

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/docs/index.cjs

@@ -3047,9 +3047,9 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-transparent text-[var(--color-accent)]",
+    "border-[length:var(--border-width)] border-[var(--color-accent)]",
+    "hover:bg-[var(--color-accent)] hover:text-white",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [

package/dist/docs/index.js

@@ -3023,9 +3023,9 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-transparent text-[var(--color-accent)]",
+    "border-[length:var(--border-width)] border-[var(--color-accent)]",
+    "hover:bg-[var(--color-accent)] hover:text-white",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [

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