@almadar/ui 5.78.0 → 5.79.1

package/dist/components/core/molecules/RichBlockEditor.d.ts

@@ -1,43 +0,0 @@
-/**
- * RichBlockEditor Organism Component
- *
- * Notion / Lexical-style block authoring editor. Internal state owns the
- * block tree; contentEditable spans flow updates back through onInput.
- *
- * TODO(phase-11): collaboration / undo-redo / markdown export are out of
- * scope for the Phase 10 scaffold.
- */
-import React from "react";
-import type { EntityRow, EventEmit, EventPayloadValue } from '@almadar/core';
-export type BlockType = "paragraph" | "heading-1" | "heading-2" | "heading-3" | "bullet-list" | "numbered-list" | "quote" | "code" | "divider" | "image";
-export interface RichBlock {
-    id: string;
-    type: BlockType;
-    content?: string;
-    metadata?: Record<string, string | number | boolean>;
-    children?: RichBlock[];
-    [key: string]: EventPayloadValue;
-}
-export interface RichBlockEditorProps {
-    /**
-     * Initial block payload — the rows that orb-bound traits emit. Items missing
-     * id/type are normalized into paragraph blocks at mount.
-     */
-    initialBlocks?: readonly EntityRow[];
-    onChange?: (blocks: RichBlock[]) => void;
-    changeEvent?: EventEmit<{
-        blocks: RichBlock[];
-    }>;
-    readOnly?: boolean;
-    placeholder?: string;
-    /**
-     * Opt-in to the Notion-style block authoring chrome (insert toolbar, per-row
-     * +/menu gutter, turn-into menu). Off by default: the editor renders as a
-     * plain rich text surface that edits block content inline without any
-     * add-block affordances.
-     */
-    enableBlocks?: boolean;
-    showToolbar?: boolean;
-    className?: string;
-}
-export declare const RichBlockEditor: React.FC<RichBlockEditorProps>;

package/dist/components/core/molecules/ScaledDiagram.d.ts

@@ -1,20 +0,0 @@
-/**
- * ScaledDiagram Molecule
- *
- * Wraps a fixed-size diagram (like JazariStateMachine / StateMachineView)
- * and CSS-scales it to fit the parent container width.
- *
- * The diagram renders at its natural (large) size. We observe the content
- * element and once the diagram is measured we apply transform:scale() with
- * a corrected container height so surrounding layout flows correctly.
- *
- * Event Contract:
- * - No events emitted (layout-only wrapper)
- * - entityAware: false
- */
-import React from 'react';
-export interface ScaledDiagramProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare const ScaledDiagram: React.FC<ScaledDiagramProps>;

package/dist/components/core/molecules/SearchInput.d.ts

@@ -1,60 +0,0 @@
-/**
- * SearchInput Molecule Component
- *
- * A search input component with icon, clear button, and loading state.
- * Uses Input, Icon, Button, and Spinner atoms.
- *
- * Supports Query Singleton pattern via `query` prop for std/Search behavior.
- */
-import React from 'react';
-export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * Search value (controlled mode)
-     */
-    value?: string;
-    /**
-     * Callback when search value changes
-     */
-    onSearch?: (value: string) => void;
-    /**
-     * Debounce delay in milliseconds
-     * @default 300
-     */
-    debounceMs?: number;
-    /**
-     * Show loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Placeholder text
-     * @default 'Search...'
-     */
-    placeholder?: string;
-    /**
-     * Show clear button
-     * @default true
-     */
-    clearable?: boolean;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Event name to dispatch on search (schema metadata, wired by trait)
-     * This is metadata used by the trait generator, not by the component.
-     */
-    event?: string;
-    /**
-     * Entity type for context-aware search.
-     * When provided, search events include entity context.
-     */
-    entity?: string;
-    /**
-     * Query singleton binding for state management.
-     * When provided, syncs search state with the query singleton.
-     * Example: "@TaskQuery"
-     */
-    query?: string;
-}
-export declare const SearchInput: React.FC<SearchInputProps>;

package/dist/components/core/molecules/Section.d.ts

@@ -1,43 +0,0 @@
-/**
- * Section Component
- *
- * A semantic section wrapper with optional title, description, and action.
- * Perfect for grouping related content with consistent spacing.
- */
-import React from 'react';
-import type { UiError } from '../atoms/types';
-export type SectionPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-export type SectionVariant = 'default' | 'card' | 'bordered' | 'filled';
-export interface SectionProps {
-    /** Section title */
-    title?: string;
-    /** Section subtitle/description */
-    description?: string;
-    /** Action element (e.g., button, link) */
-    action?: React.ReactNode;
-    /** Padding amount */
-    padding?: SectionPadding;
-    /** Visual variant */
-    variant?: SectionVariant;
-    /** Show divider below header */
-    divider?: boolean;
-    /** Custom class name */
-    className?: string;
-    /** Children elements */
-    children: React.ReactNode;
-    /** Header custom class name */
-    headerClassName?: string;
-    /** Content custom class name */
-    contentClassName?: string;
-    /** HTML element to render as */
-    as?: React.ElementType;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-}
-/**
- * Section - Semantic content grouping with header
- */
-export declare const Section: React.FC<SectionProps>;
-export default Section;

package/dist/components/core/molecules/SidePanel.d.ts

@@ -1,53 +0,0 @@
-/**
- * SidePanel — fixed side panel for contextual detail on top of the page layout.
- * Distinct from Drawer: Drawer is driven by the UI Slot system (render_ui drawer)
- * and is generic. SidePanel is a direct-render component with its own close event
- * API, used where the panel is always present in the component tree.
- */
-import React from "react";
-import type { EventEmit } from "@almadar/core";
-export interface SidePanelProps {
-    /**
-     * Panel title
-     */
-    title: string;
-    /**
-     * Panel content
-     */
-    children: React.ReactNode;
-    /**
-     * Is panel open
-     */
-    isOpen: boolean;
-    /**
-     * On close handler
-     */
-    onClose: () => void;
-    /**
-     * Panel width as Tailwind class string. Default fills the viewport on
-     * mobile and snaps to `w-96` (384 px) at `sm:` and above so phones
-     * don't lose content to a fixed 384 px column. Consumers passing a
-     * custom value should include a `w-full` mobile fallback in the same
-     * string (e.g. `"w-full sm:w-[480px]"`) — Tailwind's JIT can't see
-     * dynamically-concatenated class names.
-     * @default 'w-full sm:w-96'
-     */
-    width?: string;
-    /**
-     * Panel position
-     * @default 'right'
-     */
-    position?: "left" | "right";
-    /**
-     * Show overlay on mobile
-     * @default true
-     */
-    showOverlay?: boolean;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /** Declarative close event — emits UI:{closeEvent} via eventBus when panel should close */
-    closeEvent?: EventEmit<Record<string, never>>;
-}
-export declare const SidePanel: React.FC<SidePanelProps>;

package/dist/components/core/molecules/Sidebar.d.ts

@@ -1,72 +0,0 @@
-/**
- * Sidebar Organism Component
- *
- * A sidebar component with logo, navigation items, user section, and collapse/expand.
- * Styled to match the main Layout component with theme-aware CSS variables.
- *
- * Events:
- * - collapseChangeEvent — emitted when sidebar collapse state changes, payload: { collapsed: boolean }
- * - closeEvent — emitted when close button clicked (mobile)
- * - logoClickEvent — emitted when logo/brand area clicked
- */
-import React from 'react';
-import type { AssetUrl, EventEmit } from '@almadar/core';
-import type { IconInput } from '../atoms/index';
-import type { UiError } from '../atoms/types';
-export interface SidebarItem {
-    /** Item ID */
-    id: string;
-    /** Item label */
-    label: string;
-    /** Item icon — Lucide icon name or component */
-    icon?: IconInput;
-    /** Item badge */
-    badge?: string | number;
-    /** Item href */
-    href?: string;
-    /** Item click handler */
-    onClick?: () => void;
-    /** Is active */
-    active?: boolean;
-    /** @deprecated Use `active` instead */
-    isActive?: boolean;
-    /** Sub-items (for nested navigation) */
-    subItems?: SidebarItem[];
-}
-export interface SidebarProps {
-    /** Additional CSS classes */
-    className?: string;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-    /** Logo/Brand content - can be a ReactNode or logo config */
-    logo?: React.ReactNode;
-    /** Logo image source */
-    logoSrc?: AssetUrl;
-    /** Brand/App name */
-    brandName?: string;
-    /** Navigation items */
-    items: SidebarItem[];
-    /** User section content */
-    userSection?: React.ReactNode;
-    /** Footer content (e.g., theme toggle) */
-    footerContent?: React.ReactNode;
-    /** Collapsed state (controlled) */
-    collapsed?: boolean;
-    /** Default collapsed state */
-    defaultCollapsed?: boolean;
-    /** Event emitted when collapse state changes, payload: { collapsed: boolean } */
-    collapseChangeEvent?: EventEmit<{
-        collapsed: boolean;
-    }>;
-    /** Hide the collapse/expand button */
-    hideCollapseButton?: boolean;
-    /** Show a close button (for mobile) */
-    showCloseButton?: boolean;
-    /** Event emitted when close button is clicked */
-    closeEvent?: EventEmit<Record<string, never>>;
-    /** Event emitted when logo/brand is clicked */
-    logoClickEvent?: EventEmit<Record<string, never>>;
-}
-export declare const Sidebar: React.FC<SidebarProps>;

package/dist/components/core/molecules/SignaturePad.d.ts

@@ -1,46 +0,0 @@
-/**
- * SignaturePad Organism Component
- *
- * A canvas-based signature capture pad.
- * Uses a minimal canvas wrapper (necessary for drawing) but composes all
- * surrounding UI with atoms and molecules.
- *
- * Orbital Component Interface Compliance:
- * - Event emission via useEventBus (UI:* events)
- * - isLoading and error state props
- * - className for external styling
- */
-import React from "react";
-import type { EventEmit } from "@almadar/core";
-import type { UiError } from '../atoms/types';
-export interface SignaturePadProps {
-    /** Label above the pad */
-    label?: string;
-    /** Helper text */
-    helperText?: string;
-    /** Stroke color */
-    strokeColor?: string;
-    /** Stroke width */
-    strokeWidth?: number;
-    /** Pad height */
-    height?: number;
-    /** Whether the pad is read-only */
-    readOnly?: boolean;
-    /** Existing signature image URL */
-    value?: string;
-    /** Callback when signature changes */
-    onChange?: (dataUrl: string | null) => void;
-    /** Event to emit on sign */
-    signEvent?: EventEmit<{
-        signature: string;
-    }>;
-    /** Event to emit on clear */
-    clearEvent?: EventEmit<Record<string, never>>;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const SignaturePad: React.FC<SignaturePadProps>;

package/dist/components/core/molecules/SimpleGrid.d.ts

@@ -1,27 +0,0 @@
-/**
- * SimpleGrid Component
- *
- * A simplified grid that automatically adjusts columns based on available space.
- * Perfect for card layouts and item collections.
- */
-import React from 'react';
-export type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export interface SimpleGridProps {
-    /** Minimum width of each child (e.g., 200, "200px", "15rem") */
-    minChildWidth?: number | string;
-    /** Maximum number of columns */
-    maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Exact number of columns (disables auto-fit) */
-    cols?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** Gap between items */
-    gap?: SimpleGridGap;
-    /** Custom class name */
-    className?: string;
-    /** Children elements */
-    children: React.ReactNode;
-}
-/**
- * SimpleGrid - Auto-responsive grid layout
- */
-export declare const SimpleGrid: React.FC<SimpleGridProps>;
-export default SimpleGrid;

package/dist/components/core/molecules/Skeleton.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-export type SkeletonVariant = 'header' | 'table' | 'form' | 'card' | 'text';
-export interface SkeletonProps {
-    /** The skeleton variant to render */
-    variant?: SkeletonVariant;
-    /** Number of rows for table/text variants */
-    rows?: number;
-    /** Number of columns for table variant */
-    columns?: number;
-    /** Number of fields for form variant */
-    fields?: number;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Skeleton — loading placeholder with 5 variants for Suspense fallbacks.
- *
- * Variants: `header`, `table`, `form`, `card`, `text`.
- * Used as fallback content inside `<Suspense>` boundaries.
- *
- * @example
- * ```tsx
- * <Suspense fallback={<Skeleton variant="table" rows={8} columns={5} />}>
- *   <DataTable entity="Task" />
- * </Suspense>
- *
- * <Suspense fallback={<Skeleton variant="form" fields={6} />}>
- *   <Form entity="Task" />
- * </Suspense>
- * ```
- */
-export declare function Skeleton({ variant, rows, columns, fields, className, }: SkeletonProps): React.ReactElement;
-export declare namespace Skeleton {
-    var displayName: string;
-}

package/dist/components/core/molecules/SocialProof.d.ts

@@ -1,25 +0,0 @@
-/**
- * SocialProof Molecule Component
- *
- * Displays social proof in three variants: company logos, customer quotes,
- * or technology badges. Composes HStack, SimpleGrid, Card, Badge,
- * Box, and Typography atoms.
- */
-import React from 'react';
-export interface SocialProofItem {
-    /** Optional logo URL */
-    logo?: string;
-    /** Company or person name */
-    name: string;
-    /** Optional quote or testimonial text */
-    quote?: string;
-}
-export interface SocialProofProps {
-    /** List of social proof items */
-    items: SocialProofItem[];
-    /** Display variant */
-    variant?: 'logos' | 'quotes' | 'badges';
-    /** Additional class names */
-    className?: string;
-}
-export declare const SocialProof: React.FC<SocialProofProps>;

package/dist/components/core/molecules/SortableList.d.ts

@@ -1,19 +0,0 @@
-/**
- * SortableList — drag-to-reorder list (distinct from DataList).
- * DataList is a read/action list with no drag. SortableList owns drag
- * handles and emits a REORDER event with fromIndex/toIndex/item — use it
- * when item ordering is user-controlled.
- */
-import React from 'react';
-import type { EntityRow, EventKey, EventPayload } from "@almadar/core";
-export interface SortableListProps {
-    items: readonly EntityRow[];
-    renderItem: (item: EntityRow, index: number) => React.ReactNode;
-    reorderEvent: EventKey;
-    reorderPayload?: EventPayload;
-    dragHandlePosition?: 'left' | 'right';
-    className?: string;
-}
-declare function SortableListInner({ items: initialItemsProp, renderItem, reorderEvent, reorderPayload, dragHandlePosition, className, }: SortableListProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableList: typeof SortableListInner;
-export {};

package/dist/components/core/molecules/Split.d.ts

@@ -1,41 +0,0 @@
-/**
- * Split Component
- *
- * A two-column layout with configurable ratios.
- * Perfect for sidebar/content layouts or side-by-side comparisons.
- */
-import React from 'react';
-import type { UiError } from '../atoms/types';
-export type SplitRatio = '1:1' | '1:2' | '2:1' | '1:3' | '3:1' | '1:4' | '4:1' | '2:3' | '3:2';
-export type SplitGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-export interface SplitProps {
-    /** Size ratio between left and right panels */
-    ratio?: SplitRatio;
-    /** Gap between panels */
-    gap?: SplitGap;
-    /** Reverse the order (right first) */
-    reverse?: boolean;
-    /** Stack vertically on mobile */
-    stackOnMobile?: boolean;
-    /** Breakpoint to switch from stacked to side-by-side */
-    stackBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
-    /** Align items vertically */
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    /** Custom class name */
-    className?: string;
-    /** Left/first panel class name */
-    leftClassName?: string;
-    /** Right/second panel class name */
-    rightClassName?: string;
-    /** Exactly two children: [left, right] */
-    children: [React.ReactNode, React.ReactNode];
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-}
-/**
- * Split - Two-column layout with flexible ratios
- */
-export declare const Split: React.FC<SplitProps>;
-export default Split;

package/dist/components/core/molecules/StarRating.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-import type { EventKey, EventPayload } from "@almadar/core";
-export type StarRatingSize = "sm" | "md" | "lg";
-export type StarRatingPrecision = "full" | "half";
-export interface StarRatingProps {
-    /** Current rating value */
-    value?: number;
-    /** Maximum number of stars */
-    max?: number;
-    /** Read-only display mode */
-    readOnly?: boolean;
-    /** Full or half-star precision */
-    precision?: StarRatingPrecision;
-    /** Star size */
-    size?: StarRatingSize;
-    /** Declarative event name for rating changes */
-    action?: EventKey;
-    /** Payload to include with the action event */
-    actionPayload?: EventPayload;
-    /** Direct onChange callback */
-    onChange?: (value: number) => void;
-    /** Additional CSS classes */
-    className?: string;
-    /** Accessible label */
-    label?: string;
-}
-export declare const StarRating: React.FC<StarRatingProps>;

package/dist/components/core/molecules/StatDisplay.d.ts

@@ -1,58 +0,0 @@
-/**
- * StatDisplay Molecule
- *
- * A compact stat display: label + value + optional icon.
- * Molecule-level replacement for the stats (StatCard) organism in behavior schemas.
- * No entity prop, no data fetching, no hooks beyond icon resolution.
- */
-import React from 'react';
-import type { IconInput } from '../atoms/index';
-import type { UiError } from '../atoms/types';
-export type StatDisplayLook = 'elevated' | 'flat' | 'progress-backed' | 'gauge' | 'sparkline';
-export interface StatDisplayProps {
-    /** Display label (e.g., "Total", "Remaining") */
-    label: string;
-    /** Primary value (number or formatted string) */
-    value: number | string;
-    /** Optional denominator. >0 renders "value / max"; 0 or omitted hides the divider. */
-    max?: number;
-    /** Optional progress target. >0 renders a progress bar at value/target. */
-    target?: number;
-    /** Signed delta vs previous period. >0 renders ↑ green, <0 renders ↓ red, 0 hides. Polarity reversal via `trendPolarity`. */
-    trend?: number;
-    /** Controls whether `trend > 0` is "good" (default) or "bad". `lower-is-better` inverts the color logic. */
-    trendPolarity?: 'higher-is-better' | 'lower-is-better';
-    /** When `'percent'`, renders trend with a `%` suffix (e.g. `↓ 3.3%`); default is `'absolute'`. */
-    trendFormat?: 'absolute' | 'percent';
-    /** Optional inline sparkline data appended to the trend row. Length < 2 renders nothing. */
-    sparklineData?: readonly number[];
-    /** Event name emitted as `UI:{clickEvent}` with `{ metricLabel }` when the card is clicked. */
-    clickEvent?: string;
-    /** Prefix prepended to the formatted value (e.g. "≈ "). */
-    prefix?: string;
-    /** Suffix appended to the formatted value (e.g. " /mo", " ms"). */
-    suffix?: string;
-    /** Lucide icon name or component */
-    icon?: IconInput;
-    /** Icon background color class */
-    iconBg?: string;
-    /** Icon color class */
-    iconColor?: string;
-    /** Display format: "number", "currency", "percent" */
-    format?: string;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Color variant */
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
-    /** Compact mode (inline, no card wrapper) */
-    compact?: boolean;
-    /** Layer 2 visual treatment. */
-    look?: StatDisplayLook;
-    /** Additional CSS classes */
-    className?: string;
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-}
-export declare const StatDisplay: React.FC<StatDisplayProps>;

package/dist/components/core/molecules/SwipeableRow.d.ts

@@ -1,26 +0,0 @@
-/**
- * SwipeableRow Molecule
- *
- * Wraps a list item to reveal action buttons on horizontal swipe.
- * Swipe left to reveal right actions, swipe right to reveal left actions.
- * Uses useSwipeGesture for gesture detection and useEventBus for event emission.
- */
-import React from 'react';
-import type { EventKey, EventPayload } from "@almadar/core";
-import type { IconInput } from '../atoms/index';
-export interface SwipeAction {
-    label: string;
-    icon?: IconInput;
-    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-    event: EventKey;
-    eventPayload?: EventPayload;
-}
-export interface SwipeableRowProps {
-    leftActions?: SwipeAction[];
-    rightActions?: SwipeAction[];
-    threshold?: number;
-    children: React.ReactNode;
-    itemData?: EventPayload;
-    className?: string;
-}
-export declare const SwipeableRow: React.FC<SwipeableRowProps>;