@almadar/ui 5.111.0 → 5.113.0

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

@@ -1,39 +0,0 @@
-import React from "react";
-import type { DisplayStateProps } from "../organisms/types";
-export interface FormSectionProps extends DisplayStateProps {
-    /** Section title */
-    title?: string;
-    /** Section description */
-    description?: string;
-    /** Form fields */
-    children: React.ReactNode;
-    /** Collapsible */
-    collapsible?: boolean;
-    /** Default collapsed state */
-    defaultCollapsed?: boolean;
-    /** Use card wrapper */
-    card?: boolean;
-    /** Grid columns for fields */
-    columns?: 1 | 2 | 3;
-}
-export declare const FormSection: React.FC<FormSectionProps>;
-/**
- * Form layout with multiple sections
- */
-export interface FormLayoutProps extends DisplayStateProps {
-    children: React.ReactNode;
-    /** Show section dividers */
-    dividers?: boolean;
-}
-export declare const FormLayout: React.FC<FormLayoutProps>;
-/**
- * Form actions bar (submit/cancel buttons)
- */
-export interface FormActionsProps extends DisplayStateProps {
-    children: React.ReactNode;
-    /** Sticky at bottom */
-    sticky?: boolean;
-    /** Alignment */
-    align?: "left" | "right" | "between" | "center";
-}
-export declare const FormActions: React.FC<FormActionsProps>;

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

@@ -1,31 +0,0 @@
-/**
- * FormSectionHeader
- *
- * Header component for collapsible form sections.
- * Provides consistent styling and interaction for section headers.
- */
-import React from "react";
-import type { IconInput } from "../atoms/index";
-export interface FormSectionHeaderProps {
-    /** Section title */
-    title: string;
-    /** Section subtitle */
-    subtitle?: string;
-    /** Whether section is collapsed */
-    isCollapsed?: boolean;
-    /** Toggle collapse handler (makes header clickable) */
-    onToggle?: () => void;
-    /** Badge text (e.g., "3 fields", "Required", "Complete") */
-    badge?: string;
-    /** Badge variant */
-    badgeVariant?: "default" | "primary" | "success" | "warning" | "danger";
-    /** Lucide icon name or component to show before title */
-    icon?: IconInput;
-    /** Whether section has validation errors */
-    hasErrors?: boolean;
-    /** Whether section is complete */
-    isComplete?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const FormSectionHeader: React.FC<FormSectionHeaderProps>;

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

@@ -1,15 +0,0 @@
-/**
- * GradientDivider Molecule Component
- *
- * A horizontal line that fades from transparent at edges to primary color at center.
- * Used between major sections for visual separation without hard background-color breaks.
- */
-import React from 'react';
-import type { ColorToken } from '../atoms/types';
-export interface GradientDividerProps {
-    /** Semantic palette token or a raw CSS color value. Defaults to 'primary'. */
-    color?: ColorToken | string;
-    /** Additional class names */
-    className?: string;
-}
-export declare const GradientDivider: React.FC<GradientDividerProps>;

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

@@ -1,83 +0,0 @@
-/**
- * GraphCanvas Organism Component
- *
- * A force-directed graph visualization component for node-link data.
- * Uses canvas (necessary for performant graph rendering) with atom wrappers.
- *
- * 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 { EventEmit, EventPayload } from "@almadar/core";
-import type { UiError } from '../atoms/types';
-export type GraphNode = EventPayload & {
-    id: string;
-    label?: string;
-    group?: string;
-    color?: string;
-    size?: number;
-    /** Position (optional, computed if missing) */
-    x?: number;
-    y?: number;
-};
-export interface GraphEdge {
-    source: string;
-    target: string;
-    label?: string;
-    weight?: number;
-    color?: string;
-}
-export interface GraphAction {
-    label: string;
-    event?: string;
-    navigatesTo?: string;
-    variant?: "primary" | "secondary" | "ghost";
-}
-export interface GraphCanvasProps {
-    /** Graph title */
-    title?: string;
-    /** Graph nodes */
-    nodes?: readonly GraphNode[];
-    /** Graph edges */
-    edges?: readonly GraphEdge[];
-    /** Canvas height */
-    height?: number;
-    /** Show node labels */
-    showLabels?: boolean;
-    /** Enable zoom/pan */
-    interactive?: boolean;
-    /** Enable node dragging */
-    draggable?: boolean;
-    /** Actions */
-    actions?: readonly GraphAction[];
-    /** On node click */
-    onNodeClick?: (node: GraphNode) => void;
-    /** On node double-click (e.g. to drill in) */
-    onNodeDoubleClick?: (node: GraphNode) => void;
-    /** Node click event */
-    nodeClickEvent?: EventEmit<{
-        id: string;
-    }>;
-    /** Currently selected node id (rendered emphasized) */
-    selectedNodeId?: string;
-    /** Force-sim repulsion strength between nodes (larger ⇒ more spread out) */
-    repulsion?: number;
-    /** Force-sim target edge length (larger ⇒ more spread out) */
-    linkDistance?: number;
-    /** Minimum empty gap (px) enforced between node edges so nodes never overlap. */
-    nodeSpacing?: number;
-    /** Base opacity for links when nothing is hovered (kept faint so dense graphs stay readable; incident links brighten on hover). */
-    linkOpacity?: number;
-    /** Layout algorithm */
-    layout?: "force" | "circular" | "grid";
-    /** Loading state */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const GraphCanvas: React.FC<GraphCanvasProps>;

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

@@ -1,45 +0,0 @@
-/**
- * GraphView Molecule Component
- *
- * Pure presentational force-directed graph visualization using SVG.
- * Entity-less, no event bus, no translations. Accepts raw nodes and edges.
- *
- * Uses a simple force simulation (repulsion + attraction + centering)
- * to lay out nodes, then renders via SVG circles and lines.
- */
-import React from 'react';
-export type GraphViewNode = {
-    id: string;
-    label?: string;
-    color?: string;
-    size?: number;
-    group?: string;
-};
-export interface GraphViewEdge {
-    source: string;
-    target: string;
-    color?: string;
-    label?: string;
-}
-export interface GraphViewProps {
-    /** Graph nodes */
-    nodes: GraphViewNode[];
-    /** Graph edges */
-    edges: GraphViewEdge[];
-    /** Callback when a node is clicked */
-    onNodeClick?: (node: GraphViewNode) => void;
-    /** Callback when a node is hovered (null on leave) */
-    onNodeHover?: (node: GraphViewNode | null) => void;
-    /** Width in pixels */
-    width?: number;
-    /** Height in pixels */
-    height?: number;
-    /** Additional CSS classes */
-    className?: string;
-    /** Show node labels (default true) */
-    showLabels?: boolean;
-    /** Auto zoom-to-fit after layout settles (default true) */
-    zoomToFit?: boolean;
-}
-export declare const GraphView: React.FC<GraphViewProps>;
-export default GraphView;

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

@@ -1,54 +0,0 @@
-/**
- * Grid Component
- *
- * A CSS Grid wrapper with responsive column support.
- * Useful for creating multi-column layouts.
- */
-import React from 'react';
-export type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
-export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-export type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-export type GridJustify = 'start' | 'center' | 'end' | 'stretch';
-export interface ResponsiveGridCols {
-    /** Base/mobile columns */
-    base?: GridCols;
-    /** Small screens (640px+) */
-    sm?: GridCols;
-    /** Medium screens (768px+) */
-    md?: GridCols;
-    /** Large screens (1024px+) */
-    lg?: GridCols;
-    /** Extra large screens (1280px+) */
-    xl?: GridCols;
-}
-export interface GridProps {
-    /** Number of columns (can be responsive object) */
-    cols?: GridCols | ResponsiveGridCols;
-    /** Number of rows */
-    rows?: number;
-    /** Gap between items */
-    gap?: GridGap;
-    /** Row gap (overrides gap for rows) */
-    rowGap?: GridGap;
-    /** Column gap (overrides gap for columns) */
-    colGap?: GridGap;
-    /** Align items on block axis */
-    alignItems?: GridAlign;
-    /** Justify items on inline axis */
-    justifyItems?: GridJustify;
-    /** Auto-flow direction */
-    flow?: 'row' | 'col' | 'row-dense' | 'col-dense';
-    /** Custom class name */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
-    /** Children elements */
-    children: React.ReactNode;
-    /** HTML element to render as */
-    as?: React.ElementType;
-}
-/**
- * Grid - CSS Grid layout wrapper
- */
-export declare const Grid: React.FC<GridProps>;
-export default Grid;

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

@@ -1,44 +0,0 @@
-/**
- * GridPicker Molecule Component
- *
- * Reusable emoji-picker-style chooser: a search box, a row of category filter
- * chips, and a scrollable CSS-grid of fixed-size cells. Pure presentational —
- * the host owns the item list and the selected value; the molecule just filters,
- * highlights, and reports clicks via `onChange`.
- */
-import React from 'react';
-/**
- * Presentational item shape for a single grid cell. This is a UI-presentation
- * type, intentionally local — it is NOT a domain/asset type from @almadar/core.
- */
-export interface PickerItem {
-    /** Stable identity; emitted via `onChange`. */
-    id: string;
-    /** Human label — search term, cell title, and aria-label. */
-    label: string;
-    /** Category key used by the filter chips. */
-    category: string;
-}
-export type GridPickerCellSize = 16 | 32 | 48;
-export interface GridPickerProps {
-    /** Items to render as grid cells. */
-    items: PickerItem[];
-    /** Currently selected item id (controlled highlight). */
-    value?: string;
-    /** Fired with the clicked/selected item's id. */
-    onChange: (value: string) => void;
-    /**
-     * Category keys for the filter chip row. When omitted, the categories are
-     * derived from the items. An "All" chip is always prepended.
-     */
-    categories?: string[];
-    /** Placeholder for the search input. */
-    searchPlaceholder?: string;
-    /** Renders the visual content of a cell (e.g. an emoji glyph or an image). */
-    renderThumbnail: (item: PickerItem) => React.ReactNode;
-    /** Cell edge length in px. */
-    cellSize?: GridPickerCellSize;
-    /** Additional CSS classes applied to the root. */
-    className?: string;
-}
-export declare const GridPicker: React.FC<GridPickerProps>;

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

@@ -1,113 +0,0 @@
-/**
- * Header Organism Component
- *
- * A header component for mobile/responsive layouts with menu toggle, brand, and user avatar.
- * Styled to match the main Layout component's mobile header.
- */
-import React from "react";
-import type { AssetUrl } from "@almadar/core";
-import type { IconInput } from "../atoms/index";
-import type { UiError } from '../atoms/types';
-export type HeaderLook = "hero" | "compact-bar" | "breadcrumb" | "contextual" | "editorial-banner";
-export interface HeaderNavigationItem {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    icon?: IconInput;
-    badge?: string | number;
-    active?: boolean;
-}
-export interface HeaderUserAvatar {
-    src?: AssetUrl;
-    alt?: string;
-    initials?: string;
-}
-export interface HeaderProps {
-    /**
-     * Logo/Brand content
-     */
-    logo?: React.ReactNode;
-    /**
-     * Logo image source
-     */
-    logoSrc?: AssetUrl;
-    /**
-     * Brand/App name
-     */
-    brandName?: string;
-    /**
-     * Navigation items (for desktop header variant)
-     */
-    navigationItems?: HeaderNavigationItem[];
-    /**
-     * Show menu toggle button
-     * @default true
-     */
-    showMenuToggle?: boolean;
-    /**
-     * Is menu open (for toggle icon)
-     */
-    isMenuOpen?: boolean;
-    /**
-     * Menu toggle callback
-     */
-    onMenuToggle?: () => void;
-    /**
-     * Show search input
-     * @default false
-     */
-    showSearch?: boolean;
-    /**
-     * Search placeholder
-     */
-    searchPlaceholder?: string;
-    /**
-     * Search callback
-     */
-    onSearch?: (value: string) => void;
-    /**
-     * User avatar configuration
-     */
-    userAvatar?: HeaderUserAvatar;
-    /**
-     * User name (display name or email)
-     */
-    userName?: string;
-    /**
-     * Callback when user avatar is clicked
-     */
-    onUserClick?: () => void;
-    /**
-     * Action buttons (right side)
-     */
-    actions?: React.ReactNode;
-    /**
-     * Sticky header
-     * @default true
-     */
-    sticky?: boolean;
-    /**
-     * Variant - mobile shows menu toggle, desktop shows full nav
-     * @default 'mobile'
-     */
-    variant?: "mobile" | "desktop";
-    /** Layer 2 visual treatment — orthogonal to the structural variant (which currently flips mobile vs desktop). */
-    look?: HeaderLook;
-    /**
-     * Callback when logo/brand is clicked
-     */
-    onLogoClick?: () => void;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-    /**
-     * Loading state indicator (closed circuit)
-     */
-    isLoading?: boolean;
-    /**
-     * Error state (closed circuit)
-     */
-    error?: UiError | null;
-}
-export declare const Header: React.FC<HeaderProps>;

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

@@ -1,18 +0,0 @@
-/**
- * IconPicker Molecule Component
- *
- * Searchable grid of every lucide icon, built on `GridPicker`. The item set is
- * enumerated once at module scope from the lucide-react exports and kebab-cased
- * to match the canonical names `Icon` resolves, so each cell renders its real
- * glyph via the family-aware `Icon` atom.
- */
-import React from 'react';
-export interface IconPickerProps {
-    /** Currently selected icon name (kebab-case). */
-    value?: string;
-    /** Fired with the chosen icon's kebab-case name. */
-    onChange: (name: string) => void;
-    /** Additional CSS classes applied to the root. */
-    className?: string;
-}
-export declare const IconPicker: React.FC<IconPickerProps>;

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

@@ -1,24 +0,0 @@
-/**
- * InputGroup Molecule Component
- *
- * A component for grouping input with addons (icons, buttons, text).
- * Uses Input, Button, Icon, and Typography atoms.
- */
-import React from "react";
-import type { LucideIcon } from "lucide-react";
-import { InputProps } from "../atoms/Input";
-export interface InputGroupProps extends Omit<InputProps, "icon" | "iconRight"> {
-    /**
-     * Left addon (icon, button, or text)
-     */
-    leftAddon?: React.ReactNode | LucideIcon;
-    /**
-     * Right addon (icon, button, or text)
-     */
-    rightAddon?: React.ReactNode | LucideIcon;
-    /**
-     * Additional CSS classes
-     */
-    className?: string;
-}
-export declare const InputGroup: React.FC<InputGroupProps>;

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

@@ -1,34 +0,0 @@
-/**
- * JazariStateMachine — Al-Jazari themed state machine diagram.
- *
- * Thin wrapper around StateMachineView that:
- * 1. Extracts a state machine from an orbital schema (or accepts a trait directly)
- * 2. Converts it to DomLayoutData via the visualizer lib
- * 3. Applies Al-Jazari brass/gold/lapis color theme
- * 4. Renders gear-shaped state nodes via the renderStateNode prop
- */
-import React from 'react';
-import type { OrbitalSchema, Trait as CoreTrait } from '@almadar/core';
-import type { UiError } from '../atoms/types';
-type SmTrait = CoreTrait;
-type SmSchema = OrbitalSchema;
-export interface JazariStateMachineProps {
-    /** Additional CSS classes */
-    className?: string;
-    /** Loading state indicator */
-    isLoading?: boolean;
-    /** Error state */
-    error?: UiError | null;
-    /** Full schema — extracts first trait's state machine */
-    schema?: SmSchema;
-    /** Or pass a single trait directly */
-    trait?: SmTrait;
-    /** Which trait to visualize (default: 0) */
-    traitIndex?: number;
-    /** Override entity field labels */
-    entityFields?: string[];
-    /** Text direction (default: 'ltr') */
-    direction?: 'ltr' | 'rtl';
-}
-export declare const JazariStateMachine: React.FC<JazariStateMachineProps>;
-export {};

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { TraitConfigValue } from '@almadar/core';
-export interface JsonTreeEditorProps {
-    /** Current value (object / array / scalar). */
-    value: TraitConfigValue;
-    /** Fired with the next value on any edit. Unused in readonly mode. */
-    onChange: (next: TraitConfigValue) => void;
-    /** Additional CSS classes. */
-    className?: string;
-    /** Suppresses all edit controls — renders a read-only viewer. */
-    readonly?: boolean;
-}
-export declare const JsonTreeEditor: React.FC<JsonTreeEditorProps>;

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

@@ -1,26 +0,0 @@
-import React from "react";
-import type { AssetUrl } from "@almadar/core";
-export interface LightboxImage {
-    src?: AssetUrl;
-    alt?: string;
-    caption?: string;
-}
-export interface LightboxProps {
-    /** Array of images to display */
-    images: LightboxImage[];
-    /** Current image index */
-    currentIndex?: number;
-    /** Whether the lightbox is open */
-    isOpen?: boolean;
-    /** Show image counter (e.g., "3 of 12") */
-    showCounter?: boolean;
-    /** Declarative close event name */
-    closeAction?: string;
-    /** Direct onClose callback */
-    onClose?: () => void;
-    /** Direct onIndexChange callback */
-    onIndexChange?: (index: number) => void;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const Lightbox: React.FC<LightboxProps>;

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

@@ -1,34 +0,0 @@
-import React from "react";
-import type { EventEmit } from "@almadar/core";
-export type LikertScaleSize = "sm" | "md" | "lg";
-export type LikertScaleVariant = "radios" | "buttons";
-export interface LikertOption {
-    /** Underlying value bound to the option */
-    value: number | string;
-    /** Visible label below (radios) or inside (buttons) the control */
-    label: string;
-}
-export interface LikertScaleProps {
-    /** Optional row prompt above the scale */
-    question?: string;
-    /** Scale points (defaults to a 5-point agree/disagree set) */
-    options?: LikertOption[];
-    /** Selected value (controlled) */
-    value?: number | string | null;
-    /** Change callback */
-    onChange?: (value: number | string) => void;
-    /** Event name dispatched via event bus on change. Payload: { value: number | string } */
-    changeEvent?: EventEmit<{
-        value: number | string;
-    }>;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Size variant */
-    size?: LikertScaleSize;
-    /** Visual variant: classic radios or pill segmented buttons */
-    variant?: LikertScaleVariant;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const DEFAULT_LIKERT_OPTIONS: LikertOption[];
-export declare const LikertScale: React.ForwardRefExoticComponent<LikertScaleProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,35 +0,0 @@
-/**
- * LineChart Molecule Component
- *
- * SVG-based line/area chart for time-series data.
- * Pure UI molecule with no entity binding.
- */
-import React from 'react';
-export interface ChartDataPoint {
-    /** Optional: chronological x-axis. Absent for a categorical line chart
-     * (label-as-x), which plots points in author order. */
-    date?: string | Date;
-    value: number;
-    label?: string;
-}
-export interface LineChartProps {
-    /** Data points to plot */
-    data: ChartDataPoint[];
-    /** SVG viewBox width */
-    width?: number;
-    /** SVG viewBox height */
-    height?: number;
-    /** Show horizontal grid lines at 25/50/75% */
-    showGrid?: boolean;
-    /** Show value labels near data points */
-    showValues?: boolean;
-    /** Fill area under line with gradient */
-    showArea?: boolean;
-    /** Line stroke color */
-    lineColor?: string;
-    /** Area fill color (used for gradient) */
-    areaColor?: string;
-    /** Additional CSS classes */
-    className?: string;
-}
-export declare const LineChart: React.FC<LineChartProps>;

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

@@ -1,7 +0,0 @@
-import React from "react";
-export interface LoadingStateProps {
-    title?: string;
-    message?: string;
-    className?: string;
-}
-export declare const LoadingState: React.FC<LoadingStateProps>;