@almadar/ui 2.27.3 → 2.27.4

package/dist/components/atoms/flow/FlowLabel.d.ts

@@ -0,0 +1,23 @@
+/**
+ * FlowLabel Component
+ *
+ * A pill-shaped label used on flow wires (edges) to annotate transitions,
+ * events, or guards. Supports truncation with a native title tooltip and
+ * semantic color variants.
+ */
+import React from 'react';
+export type FlowLabelVariant = 'default' | 'primary' | 'warning' | 'error';
+export interface FlowLabelProps {
+    /** Text content of the label. */
+    text: string;
+    /** Max visible character count before truncation. Omit to show full text. */
+    truncate?: number;
+    /** Color variant mapping to Badge semantics. */
+    variant?: FlowLabelVariant;
+    className?: string;
+}
+/**
+ * Badge-based pill label for annotating wires in a flow graph.
+ * Long text is truncated with an ellipsis and full text appears on hover via title.
+ */
+export declare const FlowLabel: React.FC<FlowLabelProps>;

package/dist/components/atoms/flow/FlowMinimap.d.ts

@@ -0,0 +1,28 @@
+/**
+ * FlowMinimap Component
+ *
+ * A styled container that wraps a React Flow MiniMap at the organism level.
+ * Since atoms must not depend on React Flow, this component only provides the
+ * card-styled wrapper box and exports a color config object that organisms pass
+ * through to the MiniMap props.
+ */
+import React from 'react';
+export interface FlowMinimapProps {
+    /** Additional class names applied to the wrapper. */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Color tokens for the React Flow MiniMap component.
+ * Organisms import this and spread it onto `<MiniMap {...MINIMAP_COLORS} />`.
+ */
+export declare const MINIMAP_COLORS: {
+    readonly nodeColor: "var(--color-primary, #3B82F6)";
+    readonly maskColor: "var(--color-background, #ffffff80)";
+    readonly nodeStrokeColor: "var(--color-border, #E5E7EB)";
+};
+/**
+ * Card-styled wrapper for the React Flow MiniMap.
+ * Render the actual `<MiniMap>` component as children at the organism level.
+ */
+export declare const FlowMinimap: React.FC<FlowMinimapProps>;

package/dist/components/atoms/flow/FlowNodeShell.d.ts

@@ -0,0 +1,25 @@
+/**
+ * FlowNodeShell Component
+ *
+ * Outer container for a graph node. Provides the card-like wrapper with a
+ * thin colored header bar, optional node-type label, and selection / warning
+ * ring states. Children are rendered in the body area below the header.
+ */
+import React from 'react';
+export interface FlowNodeShellProps {
+    /** Whether this node is currently selected on the canvas. */
+    selected?: boolean;
+    /** Whether this node has a validation warning. */
+    warning?: boolean;
+    /** Semantic node type label shown in the header (e.g. "Entity", "Trait"). */
+    nodeType?: string;
+    /** Background color for the 8px header bar. Any valid CSS color. */
+    headerColor?: string;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Card-style wrapper for flow nodes with a colored header strip.
+ * Selection adds a solid primary ring; warnings show a dashed warning ring.
+ */
+export declare const FlowNodeShell: React.FC<FlowNodeShellProps>;

package/dist/components/atoms/flow/FlowPort.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FlowPort Component
+ *
+ * Connection point rendered on a graph node. Shows a small circle that
+ * indicates whether the port is connected or available for wiring.
+ * Direction determines label placement (left for inputs, right for outputs).
+ */
+import React from 'react';
+export interface FlowPortProps {
+    /** Whether this port receives or sends connections. */
+    direction: 'in' | 'out';
+    /** Semantic type of the port (e.g. "string", "event", "entity"). */
+    portType: string;
+    /** Human-readable label shown beside the circle. */
+    label?: string;
+    /** Whether the port currently has a wire attached. */
+    connected?: boolean;
+    /** Whether a dragged wire is compatible with this port. */
+    compatible?: boolean;
+    className?: string;
+}
+/**
+ * A 12px circle with optional label indicating a node connection point.
+ * Outlined when disconnected, filled primary when connected, green ring when compatible.
+ */
+export declare const FlowPort: React.FC<FlowPortProps>;

package/dist/components/atoms/flow/FlowWire.d.ts

@@ -0,0 +1,39 @@
+/**
+ * FlowWire Component
+ *
+ * Provides style objects and an SVG `<path>` wrapper for flow-graph edges.
+ * Wire colors come from the AVL CONNECTION_COLORS palette. The exported
+ * `getFlowWireStyle` helper can be used independently of the component
+ * (e.g. when integrating with React Flow edge renderers).
+ */
+import React from 'react';
+export type FlowWireType = 'transition' | 'event' | 'data' | 'guard';
+export type FlowWireStatus = 'valid' | 'invalid' | 'pending';
+export interface FlowWireProps {
+    /** Semantic wire category. Determines base color. */
+    wireType?: FlowWireType;
+    /** Validation or runtime status. 'invalid' overrides color to red. */
+    status?: FlowWireStatus;
+    /** Whether the wire shows a flowing dash animation. */
+    animated?: boolean;
+    /** SVG path data string (the "d" attribute). */
+    d?: string;
+    className?: string;
+}
+export interface FlowWireStyle {
+    stroke: string;
+    strokeWidth: number;
+    strokeDasharray?: string;
+    animation?: string;
+}
+/**
+ * Compute SVG path style props for a flow wire.
+ *
+ * @returns An object suitable for spreading onto an SVG `<path>` element's style.
+ */
+export declare function getFlowWireStyle(props: Pick<FlowWireProps, 'wireType' | 'status' | 'animated'>): FlowWireStyle;
+/**
+ * SVG path element styled as a flow wire.
+ * Pass the `d` prop with a path data string for rendering.
+ */
+export declare const FlowWire: React.FC<FlowWireProps>;

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

@@ -0,0 +1,13 @@
+/**
+ * Flow Atom Components
+ *
+ * Pure visual primitives for graph/flow editors. No React Flow dependency.
+ * These atoms provide styled elements that organisms compose with React Flow.
+ *
+ * @packageDocumentation
+ */
+export { FlowPort, type FlowPortProps } from './FlowPort';
+export { FlowNodeShell, type FlowNodeShellProps } from './FlowNodeShell';
+export { FlowLabel, type FlowLabelProps, type FlowLabelVariant } from './FlowLabel';
+export { FlowWire, getFlowWireStyle, type FlowWireProps, type FlowWireStyle, type FlowWireType, type FlowWireStatus, } from './FlowWire';
+export { FlowMinimap, MINIMAP_COLORS, type FlowMinimapProps } from './FlowMinimap';

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

@@ -41,3 +41,4 @@ export { PatternTile, getTileDimensions, type PatternTileProps, type PatternVari
 export { AnimatedReveal, type AnimatedRevealProps, type RevealTrigger, type RevealAnimation } from "./AnimatedReveal";
 export { AnimatedGraphic, type AnimatedGraphicProps, type GraphicAnimation } from "./AnimatedGraphic";
 export * from "./game";
+export * from "./flow";