@almadar/ui 5.79.1 → 5.79.2

package/dist/components/core/organisms/StateMachineView.d.ts

@@ -0,0 +1,45 @@
+/**
+ * StateMachineView - Reusable State Machine Visualizer
+ *
+ * A hybrid DOM/SVG component for visualizing state machines.
+ * Uses SVG for arrow paths, DOM for tooltips.
+ *
+ * Moved from projects/builder to @almadar/ui for reuse across projects.
+ *
+ * BUNDLING: When multiple transitions exist between the same states (same direction),
+ * they are bundled into a single arrow with a badge showing the count.
+ * Hovering shows all events and their effects in a detailed tooltip.
+ *
+ * Events Emitted:
+ * - UI:STATE_CLICK - When a state node is clicked
+ * - UI:TRANSITION_CLICK - When a transition bundle is clicked
+ */
+import React from 'react';
+import type { DomLayoutData, DomStateNode, DomTransitionLabel, VisualizerConfig } from '../../../lib/visualizer/index.js';
+import type { UiError } from '../atoms/types';
+/** Bundled transitions between same from→to states */
+export type TransitionBundle = {
+    id: string;
+    from: string;
+    to: string;
+    labels: DomTransitionLabel[];
+    isBidirectional: boolean;
+    isReverse: boolean;
+};
+export interface StateMachineViewProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: UiError | null;
+    /** Pre-computed visualizer layout. Optional: when absent the view renders
+     *  nothing (an author wires real layout via config; the generic factory
+     *  can't synthesize a `DomLayoutData`). */
+    layoutData?: DomLayoutData;
+    /** Custom state node renderer — when provided, replaces the default circle nodes */
+    renderStateNode?: (state: DomStateNode, config: VisualizerConfig) => React.ReactNode;
+}
+export declare const StateMachineView: React.FC<StateMachineViewProps>;
+export { StateMachineView as DomStateMachineVisualizer };
+export { StateMachineView as OrbitalStateMachineView };

package/dist/components/core/organisms/SubagentTracePanel.d.ts

@@ -0,0 +1,50 @@
+/**
+ * SubagentTracePanel — contextual side panel that surfaces subagent activity.
+ *
+ * Density adapts to disclosure level:
+ *   - L1/L2 (builder/designer): compact mode — name + role badge + last message
+ *   - L3/L4 (architect): full mode — rich per-subagent activity streams
+ *
+ * Atomic design: composes Box / VStack / HStack / Typography / Badge / Icon /
+ * Button / Modal / Accordion / CodeBlock / MarkdownContent from this package.
+ * It reads the agent-trace view-model from `@almadar/core` (Trace* types) and
+ * owns no transport — the consumer feeds it already-mapped view-model props.
+ */
+import React from 'react';
+import type { DisplayStateProps } from './types';
+import type { TraceActivity, TraceSubagent, TraceChatMessage } from '@almadar/core';
+/** Disclosure level driving panel density (builder=1 … architect=4). */
+export type TraceDisclosureLevel = 1 | 2 | 3 | 4;
+export interface SubagentTracePanelProps extends DisplayStateProps {
+    /** All known subagents from the runner. */
+    subagents: TraceSubagent[];
+    /** Current canvas focus orbital — only used by overlay mode. Tab mode ignores this. */
+    focusedOrbital?: string;
+    /** Drives density: 1-2 → compact, 3-4 → full activity embed (when mode='overlay'). */
+    disclosureLevel: TraceDisclosureLevel;
+    /** Whether the panel is visible. Typically auto-opens during generation in overlay mode. */
+    open: boolean;
+    /** Optional dismiss handler. */
+    onClose?: () => void;
+    /** Full coordinator activities (tool calls, results, messages, errors). */
+    coordinatorActivities?: TraceActivity[];
+    /**
+     * Canonical Coordinator conversation — same shape live and on reload. When
+     * present, takes precedence over `coordinatorActivities` for the Coordinator
+     * section.
+     */
+    coordinatorMessages?: readonly TraceChatMessage[];
+    /**
+     * Rendering mode.
+     * - `'overlay'` (default): floating side panel positioned absolutely over the
+     *   canvas. Density follows `disclosureLevel` (compact L1/L2, rich L3+). The
+     *   `open` flag actually hides the panel when false.
+     * - `'tab'`: full-width content for a dedicated 'trace' supplemental tab.
+     *   Always renders rich (regardless of disclosure level), always visible (the
+     *   `open` flag is ignored), and includes an empty state when no subagents
+     *   are present so users see the surface even before generation starts.
+     */
+    mode?: 'overlay' | 'tab';
+}
+export declare const SubagentTracePanel: React.FC<SubagentTracePanelProps>;
+export default SubagentTracePanel;

package/dist/components/core/organisms/Timeline.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Timeline Organism Component
+ *
+ * A vertical timeline component for displaying chronological events.
+ * Composes atoms and molecules for layout, uses CSS variables for theming.
+ *
+ * Orbital Component Interface Compliance:
+ * - Entity binding with auto-fetch when entity is a string
+ * - Event emission via useEventBus (UI:* events)
+ * - isLoading and error state props
+ * - className for external styling
+ */
+import React from "react";
+import type { EventKey } from "@almadar/core";
+import type { EntityRow } from "@almadar/core";
+import type { IconInput } from "../atoms/Icon";
+import type { UiError } from '../atoms/types';
+export type TimelineItemStatus = "complete" | "active" | "pending" | "error";
+/**
+ * Layer 2 visual treatment for the timeline pattern — orthogonal to the
+ * semantic status conveyed by per-item style.
+ */
+export type TimelineLook = "vertical-compact" | "vertical-spacious" | "horizontal" | "swimlane";
+export interface TimelineItem {
+    /** Unique identifier */
+    id: string;
+    /** Item title */
+    title: string;
+    /** Item description */
+    description?: string;
+    /** Timestamp string */
+    date?: string;
+    /** Status indicator */
+    status?: TimelineItemStatus;
+    /** Icon override */
+    icon?: IconInput;
+    /** Additional metadata tags */
+    tags?: readonly string[];
+}
+export interface TimelineAction {
+    label: string;
+    event?: EventKey;
+    navigatesTo?: string;
+    variant?: "primary" | "secondary" | "ghost";
+}
+export interface TimelineProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: UiError | null;
+    /**
+     * Schema entity data typed against @almadar/core's EntityRow. Items from
+     * `entity` are normalised into `items` when `items` is omitted. UI-specific
+     * TimelineItem fields (`icon`, callbacks) cannot round-trip through the
+     * event bus, so decorative stories that need them pass `items` directly.
+     */
+    entity?: readonly EntityRow[];
+    /** Timeline title */
+    title?: string;
+    /** Timeline items */
+    items?: readonly TimelineItem[];
+    /** Fields to display */
+    fields: readonly string[];
+    /** Actions per item */
+    itemActions?: readonly TimelineAction[];
+    /** Layer 2 visual treatment. */
+    look?: TimelineLook;
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/core/organisms/ToastSlot.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ToastSlot Component
+ *
+ * Wraps toast slot content in a proper Toast component with positioning.
+ * Used by trait-driven pages to display toast UI from render_ui effects.
+ *
+ * Handles:
+ * - Auto-show when content is present
+ * - Dispatches DISMISS event when dismissed
+ * - Fixed positioning in corner of screen
+ */
+import React from 'react';
+import { ToastVariant } from '../molecules/Toast';
+import type { UiError } from '../atoms/types';
+export interface ToastSlotProps {
+    /** Content to display in the toast (message or ReactNode) */
+    children?: React.ReactNode;
+    /** Toast variant */
+    variant?: ToastVariant;
+    /** Toast title */
+    title?: string;
+    /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Custom class name */
+    className?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: UiError | null;
+    /** Entity name for schema-driven auto-fetch */
+    entity?: string;
+}
+/**
+ * ToastSlot - Wrapper for toast slot content
+ *
+ * Automatically shows toast when children are present,
+ * and dispatches dismiss events when toast is dismissed.
+ */
+export declare const ToastSlot: React.FC<ToastSlotProps>;

package/dist/components/core/organisms/UISlotRenderer.d.ts

@@ -0,0 +1,116 @@
+/**
+ * UISlotRenderer Component
+ *
+ * Renders all UI slots. This is the central component that displays
+ * content rendered by traits via render_ui effects.
+ *
+ * Slots are rendered as:
+ * - Layout slots: Inline in the page flow (main, sidebar)
+ * - Portal slots: Rendered via portals (modal, drawer, toast, etc.)
+ * - HUD slots: Fixed position overlays (hud-top, hud-bottom)
+ *
+ * @packageDocumentation
+ */
+import React from "react";
+import { type UISlot, type SlotContent } from "../../../providers/UISlotContext";
+export interface SuspenseConfig {
+    /** Enable Suspense boundaries around slot content */
+    enabled: boolean;
+    /** Custom fallback per slot, overrides default Skeleton variant */
+    slotFallbacks?: Partial<Record<UISlot, React.ReactNode>>;
+}
+/**
+ * Provider for Suspense configuration.
+ * When enabled, each UI slot is wrapped in `<ErrorBoundary><Suspense>`.
+ */
+export declare function SuspenseConfigProvider({ config, children, }: {
+    config: SuspenseConfig;
+    children: React.ReactNode;
+}): React.FunctionComponentElement<React.ProviderProps<SuspenseConfig>>;
+export declare namespace SuspenseConfigProvider {
+    var displayName: string;
+}
+import type { UiError } from '../atoms/types';
+interface UISlotComponentProps {
+    slot: UISlot;
+    portal?: boolean;
+    position?: "left" | "right" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    className?: string;
+    draggable?: boolean;
+    isLoading?: boolean;
+    error?: UiError | null;
+    entity?: string;
+    /** Compiled mode: render children directly instead of resolving from context */
+    children?: React.ReactNode;
+    /** Pattern type for data-pattern attribute (compiled mode) */
+    pattern?: string;
+    /** Source trait name for data-source-trait attribute (compiled mode) */
+    sourceTrait?: string;
+}
+/**
+ * Individual slot renderer.
+ *
+ * Handles different slot types with appropriate wrappers.
+ */
+declare function UISlotComponent({ slot, portal, position, className, children, pattern, sourceTrait, }: UISlotComponentProps): React.ReactElement | null;
+interface SlotContentRendererProps {
+    content: SlotContent;
+    onDismiss: () => void;
+    className?: string;
+    isLoading?: boolean;
+    error?: UiError | null;
+    entity?: string;
+    /** Schema-compatible path for WYSIWYG drop targeting (e.g., "root.children.0"). */
+    patternPath?: string;
+}
+/**
+ * Renders the actual content of a slot.
+ *
+ * Dynamically renders pattern components from the registry.
+ * For layout patterns with `hasChildren`, recursively renders nested patterns.
+ * For all patterns, named props containing pattern configs are also rendered.
+ */
+declare function SlotContentRenderer({ content, onDismiss, patternPath, }: SlotContentRendererProps): React.ReactElement;
+export interface UISlotRendererProps {
+    /** Include HUD slots */
+    includeHud?: boolean;
+    /** HUD positioning mode: 'fixed' (default, viewport-relative) or 'inline' (container-relative, uses sticky) */
+    hudMode?: 'fixed' | 'inline';
+    /** Include floating slot */
+    includeFloating?: boolean;
+    /** Additional class name for the container */
+    className?: string;
+    /** Loading state indicator */
+    isLoading?: boolean;
+    /** Error state */
+    error?: UiError | null;
+    /** Entity name for schema-driven auto-fetch */
+    entity?: string;
+    /**
+     * Enable Suspense boundaries around each slot.
+     * When true, each inline slot is wrapped in `<ErrorBoundary><Suspense>` with
+     * Skeleton fallbacks. Opt-in — existing isLoading prop pattern still works.
+     */
+    suspense?: boolean | SuspenseConfig;
+}
+/**
+ * Main UI Slot Renderer component.
+ *
+ * Renders all slot containers. Place this in your page/layout component.
+ *
+ * @example
+ * ```tsx
+ * function PageLayout() {
+ *   return (
+ *     <div className="page-layout">
+ *       <UISlotRenderer />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function UISlotRenderer({ includeHud, hudMode, includeFloating, className, suspense, }: UISlotRendererProps): React.ReactElement;
+export declare namespace UISlotRenderer {
+    var displayName: string;
+}
+export { UISlotComponent, SlotContentRenderer };

package/dist/components/core/organisms/book/index.d.ts

@@ -0,0 +1,7 @@
+export { BookViewer, type BookViewerProps } from '../../../marketing/organisms/book/BookViewer';
+export { BookChapterView, type BookChapterViewProps } from '../../../marketing/organisms/book/BookChapterView';
+export { BookCoverPage, type BookCoverPageProps } from '../../../marketing/organisms/book/BookCoverPage';
+export { BookTableOfContents, type BookTableOfContentsProps } from '../../../marketing/organisms/book/BookTableOfContents';
+export { BookNavBar, type BookNavBarProps } from '../../../marketing/organisms/book/BookNavBar';
+export type { BookFieldMap } from './types';
+export { mapBookData, resolveFieldMap, IDENTITY_BOOK_FIELDS, AR_BOOK_FIELDS } from './types';

package/dist/components/core/organisms/book/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * BookViewer shared types + field-map normalisation.
+ *
+ * The BookViewer's entity boundary is `EntityRow` (raw schema data bound from
+ * `@payload.data`). Books may use non-English field names (e.g. Arabic `.orb`
+ * schemas), so `mapBookData()` normalises a raw record into canonical English
+ * field names while keeping every value as `EntityRow` — no private entity
+ * content-model types.
+ *
+ * The embedded orbital-diagram (`OrbitalSchema`) is richer than `FieldValue`
+ * and therefore CANNOT live on an `EntityRow`. It is lifted OFF the entity
+ * boundary into a separate `schemaByChapterId` lookup; consumers fetch a
+ * chapter's schema by id and pass it as its own non-entity prop.
+ */
+import type { EntityRow, OrbitalSchema } from '@almadar/core';
+/** A normalised book: cover fields + part rows + a chapter→schema side-table. */
+export interface NormalizedBook {
+    /** Cover-level fields (title/subtitle/author/coverImageUrl/direction). */
+    cover: EntityRow;
+    /** Reading direction resolved from the cover record. */
+    direction: 'rtl' | 'ltr';
+    /** Parts, each an `EntityRow` carrying `title` + a `chapters: EntityRow[]`. */
+    parts: readonly EntityRow[];
+    /** Flattened chapter rows in reading order (each carries id/title/content). */
+    chapters: readonly EntityRow[];
+    /** Orbital diagram schemas keyed by chapter id — kept OFF the entity rows. */
+    schemaByChapterId: Record<string, OrbitalSchema>;
+}
+/**
+ * Maps raw entity field names to canonical BookData field names.
+ * Each key is a canonical field, each value is the entity field name.
+ */
+export interface BookFieldMap {
+    title: string;
+    subtitle: string;
+    author: string;
+    coverImageUrl: string;
+    direction: string;
+    parts: string;
+    partTitle: string;
+    chapters: string;
+    chapterId: string;
+    chapterTitle: string;
+    chapterContent: string;
+    chapterOrbitalSchema: string;
+}
+/** Identity map — entity already uses canonical English field names */
+export declare const IDENTITY_BOOK_FIELDS: BookFieldMap;
+/** Arabic field map for الأمة_الرقمية schema */
+export declare const AR_BOOK_FIELDS: BookFieldMap;
+/**
+ * Resolves a fieldMap prop to a BookFieldMap object.
+ * Accepts a BookFieldMap object directly, a locale string key ("ar"),
+ * or undefined (defaults to identity/English).
+ */
+export declare function resolveFieldMap(fieldMap: BookFieldMap | string | undefined): BookFieldMap;
+/**
+ * Maps a raw entity record to a `NormalizedBook` using a field map. Cover and
+ * chapter data come back as `EntityRow`s; the per-chapter `OrbitalSchema` is
+ * lifted off into `schemaByChapterId`.
+ */
+export declare function mapBookData(raw: EntityRow, fields?: BookFieldMap): NormalizedBook;

package/dist/components/core/organisms/component-registry.generated.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Maps component names to actual React components.
+ * Generated from @almadar/patterns component-mapping.json.
+ *
+ * Pattern wrappers (ButtonPattern, VStackPattern, etc.) adapt the raw component
+ * API to the render-ui config format. Direct components are used when no wrapper exists.
+ */
+export declare const COMPONENT_REGISTRY: Record<string, React.ComponentType<any>>;

package/dist/components/core/organisms/debug/RuntimeDebugger.d.ts

@@ -0,0 +1,29 @@
+/**
+ * RuntimeDebugger - Main debug panel for KFlow applications
+ *
+ * Press backtick (`) to toggle. Displays traits, ticks, entities, events,
+ * guards, verification checks, transition timeline, and server bridge health.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import type { OrbitalSchema } from '@almadar/core';
+import './RuntimeDebugger.css';
+export interface RuntimeDebuggerProps {
+    /** Initial position */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Initial collapsed state */
+    defaultCollapsed?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Display mode: floating (fixed overlay), inline (block element), or verify (always-visible compact overlay for verification runs) */
+    mode?: 'floating' | 'inline' | 'verify';
+    /** Default active tab id */
+    defaultTab?: string;
+    /** Raw schema for EventDispatcherTab payload extraction */
+    schema?: OrbitalSchema;
+}
+export declare function RuntimeDebugger({ position, defaultCollapsed, className, mode, defaultTab, schema, }: RuntimeDebuggerProps): React.JSX.Element | null;
+export declare namespace RuntimeDebugger {
+    var displayName: string;
+}

package/dist/components/core/organisms/debug/WalkMinimap.d.ts

@@ -0,0 +1,17 @@
+/**
+ * WalkMinimap
+ *
+ * Visual minimap for orbital-verify state walks.
+ * Shows trait overview pills, state graph for active trait,
+ * and coverage progress. Replaces the text-based walk step indicator.
+ *
+ * Data comes from window.__orbitalWalkStep, window.__orbitalWalkTraits,
+ * and window.__orbitalCoveredEdges (broadcast by phase4-browser.ts).
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+export declare function WalkMinimap(): React.ReactElement | null;
+export declare namespace WalkMinimap {
+    var displayName: string;
+}

package/dist/components/core/organisms/debug/hooks/useDebugData.d.ts

@@ -0,0 +1,25 @@
+import { type TraitDebugInfo } from '../../../../../lib/traitRegistry';
+import { type TickExecution } from '../../../../../lib/tickRegistry';
+import { type GuardEvaluation } from '../../../../../lib/guardRegistry';
+import { type EntitySnapshot } from '../../../../../lib/entityDebug';
+import { type DebugEvent } from '../../../../../lib/debugRegistry';
+import { type VerificationCheck, type TransitionTrace, type BridgeHealth, type VerificationSummary } from '../../../../../lib/verificationRegistry';
+export interface DebugData {
+    traits: TraitDebugInfo[];
+    ticks: TickExecution[];
+    guards: GuardEvaluation[];
+    events: DebugEvent[];
+    entitySnapshot: EntitySnapshot | null;
+    verification: {
+        checks: VerificationCheck[];
+        transitions: TransitionTrace[];
+        bridge: BridgeHealth | null;
+        summary: VerificationSummary;
+    };
+    lastUpdate: number;
+}
+/**
+ * Hook that aggregates data from all debug registries.
+ * Subscribes to changes and polls entity snapshots.
+ */
+export declare function useDebugData(): DebugData;

package/dist/components/core/organisms/debug/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Debug Organism Components
+ *
+ * Runtime debugging and verification tools for KFlow applications.
+ *
+ * @packageDocumentation
+ */
+export { RuntimeDebugger, type RuntimeDebuggerProps } from './RuntimeDebugger';
+export { useDebugData, type DebugData } from './hooks/useDebugData';
+export { VerificationTab } from './tabs/VerificationTab';
+export { TransitionTimeline } from './tabs/TransitionTimeline';
+export { ServerBridgeTab } from './tabs/ServerBridgeTab';
+export { EventDispatcherTab } from './tabs/EventDispatcherTab';

package/dist/components/core/organisms/debug/tabs/EntitiesTab.d.ts

@@ -0,0 +1,14 @@
+/**
+ * EntitiesTab - Displays entity snapshots
+ * Uses existing component library atoms/molecules.
+ */
+import * as React from 'react';
+import type { EntitySnapshot } from '../../../../../lib/entityDebug';
+interface EntitiesTabProps {
+    snapshot: EntitySnapshot | null;
+}
+export declare function EntitiesTab({ snapshot }: EntitiesTabProps): React.JSX.Element;
+export declare namespace EntitiesTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/EventDispatcherTab.d.ts

@@ -0,0 +1,18 @@
+/**
+ * EventDispatcherTab - Fire events into the state machine from the debug panel
+ *
+ * Shows available transitions per trait based on current state,
+ * lets users click to fire events, and displays a compact transition log.
+ */
+import * as React from 'react';
+import type { OrbitalSchema } from '@almadar/core';
+import type { TraitDebugInfo } from '../../../../../lib/traitRegistry';
+interface EventDispatcherTabProps {
+    traits: TraitDebugInfo[];
+    schema?: OrbitalSchema;
+}
+export declare function EventDispatcherTab({ traits, schema }: EventDispatcherTabProps): React.JSX.Element;
+export declare namespace EventDispatcherTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/EventFlowTab.d.ts

@@ -0,0 +1,14 @@
+/**
+ * EventFlowTab - Displays event flow and debug messages
+ * Uses existing component library atoms/molecules.
+ */
+import * as React from 'react';
+import type { DebugEvent } from '../../../../../lib/debugRegistry';
+interface EventFlowTabProps {
+    events: DebugEvent[];
+}
+export declare function EventFlowTab({ events }: EventFlowTabProps): React.JSX.Element;
+export declare namespace EventFlowTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/GuardsPanel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * GuardsPanel - Displays guard evaluation history
+ * Uses existing component library atoms/molecules.
+ */
+import * as React from 'react';
+import type { GuardEvaluation } from '../../../../../lib/guardRegistry';
+interface GuardsPanelProps {
+    guards: GuardEvaluation[];
+}
+export declare function GuardsPanel({ guards }: GuardsPanelProps): React.JSX.Element;
+export declare namespace GuardsPanel {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/ServerBridgeTab.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ServerBridgeTab - Displays ServerBridge health and connectivity status
+ *
+ * Shows:
+ * - Connection status (connected/disconnected)
+ * - Events forwarded (client → server) count
+ * - Events received (server → client) count
+ * - Last error if any
+ * - Last heartbeat timestamp
+ */
+import * as React from 'react';
+import type { BridgeHealth } from '../../../../../lib/verificationRegistry';
+interface ServerBridgeTabProps {
+    bridge: BridgeHealth | null;
+}
+export declare function ServerBridgeTab({ bridge }: ServerBridgeTabProps): React.JSX.Element;
+export declare namespace ServerBridgeTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/TicksTab.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TicksTab - Displays tick execution timing and status
+ * Uses existing component library atoms/molecules.
+ */
+import * as React from 'react';
+import type { TickExecution } from '../../../../../lib/tickRegistry';
+interface TicksTabProps {
+    ticks: TickExecution[];
+}
+export declare function TicksTab({ ticks }: TicksTabProps): React.JSX.Element;
+export declare namespace TicksTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/TraitsTab.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TraitsTab - Displays active traits and their state machines
+ * Uses existing component library atoms/molecules.
+ */
+import * as React from 'react';
+import type { TraitDebugInfo } from '../../../../../lib/traitRegistry';
+interface TraitsTabProps {
+    traits: TraitDebugInfo[];
+}
+export declare function TraitsTab({ traits }: TraitsTabProps): React.JSX.Element;
+export declare namespace TraitsTab {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/TransitionTimeline.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TransitionTimeline - Visual timeline of state machine transitions
+ *
+ * Shows each transition with:
+ * - Trait name, from → to state, triggering event
+ * - Guard result (if any)
+ * - Effect execution results (green = executed, red = failed)
+ * - Timestamp
+ */
+import * as React from 'react';
+import type { TransitionTrace } from '../../../../../lib/verificationRegistry';
+interface TransitionTimelineProps {
+    transitions: TransitionTrace[];
+}
+export declare function TransitionTimeline({ transitions }: TransitionTimelineProps): React.JSX.Element;
+export declare namespace TransitionTimeline {
+    var displayName: string;
+}
+export {};

package/dist/components/core/organisms/debug/tabs/VerificationTab.d.ts

@@ -0,0 +1,17 @@
+/**
+ * VerificationTab - Displays pass/fail verification checklist
+ *
+ * Shows all registered checks with their status, grouped by category.
+ * Green = pass, Red = fail, Yellow = warn, Gray = pending.
+ */
+import * as React from 'react';
+import type { VerificationCheck, VerificationSummary } from '../../../../../lib/verificationRegistry';
+interface VerificationTabProps {
+    checks: VerificationCheck[];
+    summary: VerificationSummary;
+}
+export declare function VerificationTab({ checks, summary }: VerificationTabProps): React.JSX.Element;
+export declare namespace VerificationTab {
+    var displayName: string;
+}
+export {};