@almadar/ui 2.27.2 → 2.27.4

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

@@ -0,0 +1,61 @@
+/**
+ * AvlBehaviorGlyph - Visual identity for a behavior.
+ *
+ * Generates a unique glyph from behavior properties:
+ * - Core shape = persistence type
+ * - Spokes = field count
+ * - Rings = state count
+ * - Markers = effect types used
+ * - Color = domain hue
+ * - Composition = child glyphs + event wiring (molecule/organism)
+ */
+import React from 'react';
+import type { AvlEffectType, AvlPersistenceKind } from '../../atoms/avl/types';
+export declare const DOMAIN_COLORS: Record<string, string>;
+export type BehaviorLevel = 'atom' | 'molecule' | 'organism';
+export type GlyphSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface BehaviorGlyphChild {
+    name: string;
+    fieldCount?: number;
+    stateCount?: number;
+    persistence?: AvlPersistenceKind;
+    effectTypes?: AvlEffectType[];
+}
+export interface BehaviorGlyphConnection {
+    from: string;
+    to: string;
+    event: string;
+}
+export interface AvlBehaviorGlyphProps {
+    /** Behavior name */
+    name: string;
+    /** Composition level */
+    level?: BehaviorLevel;
+    /** Domain for color coding */
+    domain?: string;
+    /** Override color (otherwise derived from domain) */
+    color?: string;
+    /** Entity field count (drives spoke count) */
+    fieldCount?: number;
+    /** State count (drives ring count) */
+    stateCount?: number;
+    /** Persistence type (drives core shape) */
+    persistence?: AvlPersistenceKind;
+    /** Effect types used (drives markers on rings) */
+    effectTypes?: AvlEffectType[];
+    /** Child behaviors for molecule/organism composition */
+    children?: BehaviorGlyphChild[];
+    /** Event connections between children (organism level) */
+    connections?: BehaviorGlyphConnection[];
+    /** Size preset */
+    size?: GlyphSize;
+    /** Show text labels */
+    showLabels?: boolean;
+    /** Animate orbital rings */
+    animated?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+export declare const AvlBehaviorGlyph: React.FC<AvlBehaviorGlyphProps>;

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

@@ -6,6 +6,7 @@ export { AvlSlotMap, type AvlSlotMapProps, type AvlSlotMapSlot } from './AvlSlot
 export { AvlExprTree, type AvlExprTreeProps, type AvlExprTreeNode } from './AvlExprTree';
 export { AvlTransitionLane, type AvlTransitionLaneProps, type AvlTransitionLaneEffect } from './AvlTransitionLane';
 export { AvlSwimLane, type AvlSwimLaneProps } from './AvlSwimLane';
+export { AvlBehaviorGlyph, type AvlBehaviorGlyphProps, type BehaviorLevel, type GlyphSize, type BehaviorGlyphChild, type BehaviorGlyphConnection, DOMAIN_COLORS } from './AvlBehaviorGlyph';
 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/flow/BehaviorNode.d.ts

@@ -0,0 +1,28 @@
+/**
+ * BehaviorNode Component
+ *
+ * Custom React Flow node for a standard behavior. Shows name,
+ * truncated description, state count, and per-event Handles for
+ * emit (source, right) and listen (target, left) wiring.
+ */
+import React from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+/** Data shape for behavior flow nodes, extending Record<string, unknown> for React Flow v12. */
+export interface BehaviorNodeData extends Record<string, unknown> {
+    /** Behavior name (e.g. "std-cart"). */
+    name: string;
+    /** Optional description, truncated after 60 chars. */
+    description?: string;
+    /** Number of states in this behavior. */
+    stateCount: number;
+    /** Events this behavior emits. */
+    emits: string[];
+    /** Events this behavior listens for. */
+    listens: string[];
+}
+/** React Flow node type for behavior nodes. */
+export type BehaviorFlowNode = Node<BehaviorNodeData, 'behavior'>;
+/**
+ * React Flow custom node for a standard behavior with event port handles.
+ */
+export declare const BehaviorNode: React.FC<NodeProps<BehaviorFlowNode>>;

package/dist/components/molecules/flow/EffectNode.d.ts

@@ -0,0 +1,26 @@
+/**
+ * EffectNode Component
+ *
+ * Custom React Flow node for an effect in a transition.
+ * Shows the effect type with a category-colored header and
+ * optional args caption. One target Handle (left) for input,
+ * one source Handle (right) for chain output.
+ */
+import React from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+import { type EffectCategory } from '../../atoms/avl/types';
+/** Data shape for effect flow nodes, extending Record<string, unknown> for React Flow v12. */
+export interface EffectNodeData extends Record<string, unknown> {
+    /** Effect type identifier (e.g. "render-ui", "set", "emit"). */
+    effectType: string;
+    /** Optional stringified args summary. */
+    args?: string;
+    /** Category override. Derived from effectType when omitted. */
+    category?: EffectCategory;
+}
+/** React Flow node type for effect nodes in transition chains. */
+export type EffectFlowNode = Node<EffectNodeData, 'effect'>;
+/**
+ * React Flow custom node for an effect in a transition chain.
+ */
+export declare const EffectNode: React.FC<NodeProps<EffectFlowNode>>;

package/dist/components/molecules/flow/EventWireEdge.d.ts

@@ -0,0 +1,23 @@
+/**
+ * EventWireEdge Component
+ *
+ * Custom React Flow edge for event wiring between orbitals/behaviors.
+ * Renders a dashed orange Bezier path (from CONNECTION_COLORS.emitListen)
+ * with a FlowLabel pill at the midpoint. Incompatible wires turn red.
+ */
+import React from 'react';
+import { type Edge, type EdgeProps } from '@xyflow/react';
+/** Data shape for event wire flow edges, extending Record<string, unknown> for React Flow v12. */
+export interface EventWireEdgeData extends Record<string, unknown> {
+    /** Event name being wired. */
+    event: string;
+    /** Whether emitter and listener schemas are compatible. */
+    compatible?: boolean;
+}
+/** React Flow edge type for emit/listen event wiring. */
+export type EventWireFlowEdge = Edge<EventWireEdgeData, 'eventWire'>;
+/**
+ * React Flow custom edge for emit/listen event wiring.
+ * Dashed orange when compatible, dashed red when incompatible.
+ */
+export declare const EventWireEdge: React.FC<EdgeProps<EventWireFlowEdge>>;

package/dist/components/molecules/flow/ExprNode.d.ts

@@ -0,0 +1,27 @@
+/**
+ * ExprNode Component
+ *
+ * Custom React Flow node for an S-expression operator.
+ * Shows the operator name in namespace-colored FlowNodeShell,
+ * with one target Handle per operand (left, staggered) and
+ * one source Handle for the result (right).
+ */
+import React from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+import { type AvlOperatorNamespace } from '../../atoms/avl/types';
+/** Data shape for expression flow nodes, extending Record<string, unknown> for React Flow v12. */
+export interface ExprNodeData extends Record<string, unknown> {
+    /** Operator name (e.g. "+", "concat", "if"). */
+    operator: string;
+    /** Operator namespace for color coding. */
+    namespace?: AvlOperatorNamespace;
+    /** Number of operand inputs. */
+    operandCount: number;
+}
+/** React Flow node type for S-expression operator nodes. */
+export type ExprFlowNode = Node<ExprNodeData, 'expr'>;
+/**
+ * React Flow custom node visualising an S-expression operator.
+ * Operand handles fan out vertically on the left; result exits right.
+ */
+export declare const ExprNode: React.FC<NodeProps<ExprFlowNode>>;

package/dist/components/molecules/flow/FlowStateNode.d.ts

@@ -0,0 +1,18 @@
+/**
+ * FlowStateNode Component
+ *
+ * Custom React Flow node for a state machine state.
+ * Renders a FlowNodeShell with role-based header color, state name,
+ * and initial/terminal badges. Handles are placed at top (target)
+ * and bottom (source) for vertical transition wiring.
+ */
+import React from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+import type { State } from '@almadar/core';
+/** React Flow node type for state machine states, backed by @almadar/core State. */
+export type StateFlowNode = Node<State & Record<string, unknown>, 'state'>;
+/**
+ * React Flow custom node that visualises a single state machine state.
+ * Uses STATE_COLORS for the header bar and shows role badges.
+ */
+export declare const FlowStateNode: React.FC<NodeProps<StateFlowNode>>;

package/dist/components/molecules/flow/NodePalette.d.ts

@@ -0,0 +1,36 @@
+/**
+ * NodePalette Component
+ *
+ * Draggable node type sidebar for a flow editor. Renders categories of
+ * tiles that can be dragged onto a React Flow canvas. Each tile sets
+ * `application/reactflow` data on the drag transfer so the canvas
+ * `onDrop` handler knows which node type to create.
+ *
+ * This is a pure HTML component with no React Flow imports.
+ */
+import React from 'react';
+export interface NodePaletteItem {
+    /** Node type identifier set on the drag transfer. */
+    type: string;
+    /** Human-readable label shown on the tile. */
+    label: string;
+    /** Lucide icon name for the tile. */
+    icon: string;
+}
+export interface NodePaletteCategory {
+    /** Category heading. */
+    name: string;
+    /** Draggable items in this category. */
+    items: NodePaletteItem[];
+}
+export interface NodePaletteProps {
+    /** Grouped node types available for dragging. */
+    categories: NodePaletteCategory[];
+    /** Additional CSS classes on the outer container. */
+    className?: string;
+}
+/**
+ * Sidebar palette of draggable node tiles grouped by category.
+ * Drag a tile onto a ReactFlow canvas to create that node type.
+ */
+export declare const NodePalette: React.FC<NodePaletteProps>;

package/dist/components/molecules/flow/OrbitalNode.d.ts

@@ -0,0 +1,31 @@
+/**
+ * OrbitalNode Component
+ *
+ * Custom React Flow node for an orbital unit. Displays entity name,
+ * trait/page counts, and per-event Handles for emit (source, right)
+ * and listen (target, left) wiring.
+ */
+import React from 'react';
+import { type Node, type NodeProps } from '@xyflow/react';
+/** Data shape for orbital flow nodes, extending Record<string, unknown> for React Flow v12. */
+export interface OrbitalNodeData extends Record<string, unknown> {
+    /** Orbital unit name. */
+    name: string;
+    /** Primary entity name. */
+    entityName: string;
+    /** Number of traits attached. */
+    traitCount: number;
+    /** Number of pages attached. */
+    pageCount: number;
+    /** Events this orbital emits. */
+    emits: string[];
+    /** Events this orbital listens for. */
+    listens: string[];
+}
+/** React Flow node type for orbital units. */
+export type OrbitalFlowNode = Node<OrbitalNodeData, 'orbital'>;
+/**
+ * React Flow custom node for an orbital unit showing entity info,
+ * trait/page stats, and per-event connection handles.
+ */
+export declare const OrbitalNode: React.FC<NodeProps<OrbitalFlowNode>>;

package/dist/components/molecules/flow/TransitionEdge.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TransitionEdge Component
+ *
+ * Custom React Flow edge for state machine transitions.
+ * Uses a Bezier path with a FlowLabel pill at the midpoint showing
+ * the event name. Guard (diamond) and effect indicators are shown
+ * as small inline icons beside the label.
+ */
+import React from 'react';
+import { type Edge, type EdgeProps } from '@xyflow/react';
+/** Data shape for transition flow edges, extending Record<string, unknown> for React Flow v12. */
+export interface TransitionEdgeData extends Record<string, unknown> {
+    /** Triggering event name. */
+    event: string;
+    /** Whether this transition has a guard condition. */
+    hasGuard?: boolean;
+    /** Whether this transition has effects attached. */
+    hasEffects?: boolean;
+}
+/** React Flow edge type for state machine transitions. */
+export type TransitionFlowEdge = Edge<TransitionEdgeData, 'transition'>;
+/**
+ * React Flow custom edge that renders a Bezier curve with an event label pill.
+ * Guard and effect presence are shown as small indicator icons.
+ */
+export declare const TransitionEdge: React.FC<EdgeProps<TransitionFlowEdge>>;

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

@@ -0,0 +1,8 @@
+export { FlowStateNode, type StateFlowNode } from './FlowStateNode';
+export { OrbitalNode, type OrbitalNodeData, type OrbitalFlowNode } from './OrbitalNode';
+export { BehaviorNode, type BehaviorNodeData, type BehaviorFlowNode } from './BehaviorNode';
+export { ExprNode, type ExprNodeData, type ExprFlowNode } from './ExprNode';
+export { EffectNode, type EffectNodeData, type EffectFlowNode } from './EffectNode';
+export { TransitionEdge, type TransitionEdgeData, type TransitionFlowEdge } from './TransitionEdge';
+export { EventWireEdge, type EventWireEdgeData, type EventWireFlowEdge } from './EventWireEdge';
+export { NodePalette, type NodePaletteProps, type NodePaletteCategory, type NodePaletteItem, } from './NodePalette';

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

@@ -78,3 +78,4 @@ 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';
+export * from './flow';

package/dist/docs/index.cjs

@@ -3055,7 +3055,7 @@ var variantStyles2 = {
   ghost: [
     "bg-transparent text-muted-foreground",
     "border border-transparent",
-    "hover:text-foreground hover:bg-muted hover:border-border",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [

package/dist/docs/index.js

@@ -3031,7 +3031,7 @@ var variantStyles2 = {
   ghost: [
     "bg-transparent text-muted-foreground",
     "border border-transparent",
-    "hover:text-foreground hover:bg-muted hover:border-border",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [