@glyphjs/components 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,546 @@
+import { GlyphComponentProps, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
+import { ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CalloutData {
+    type: 'info' | 'warning' | 'error' | 'tip';
+    title?: string;
+    content: string;
+}
+/**
+ * Renders a styled callout box with variant-specific icon, optional title,
+ * and content text.  Styling is driven by `--glyph-callout-{type}-bg` and
+ * `--glyph-callout-{type}-border` CSS custom properties so consumers can
+ * re-theme via the Glyph theme system.
+ */
+declare function Callout({ data }: GlyphComponentProps<CalloutData>): ReactElement;
+
+declare const calloutDefinition: GlyphComponentDefinition<CalloutData>;
+
+/** Matches z.infer<typeof chartSchema> without importing zod. */
+interface ChartData {
+    type: 'line' | 'bar' | 'area' | 'ohlc';
+    series: {
+        name: string;
+        data: DataRecord[];
+    }[];
+    xAxis?: {
+        key: string;
+        label?: string;
+    };
+    yAxis?: {
+        key: string;
+        label?: string;
+    };
+    legend?: boolean;
+}
+type DataRecord = Record<string, number | string>;
+
+/**
+ * Renders a D3-powered chart supporting line, bar, area, and OHLC types.
+ * Uses CSS variables for theming and includes accessibility features.
+ */
+declare function Chart({ data, container: containerCtx, }: GlyphComponentProps<ChartData>): ReactElement;
+
+declare const chartDefinition: GlyphComponentDefinition;
+
+interface StepItem {
+    title: string;
+    status?: 'pending' | 'active' | 'completed';
+    content: string;
+}
+interface StepsData {
+    steps: StepItem[];
+}
+/**
+ * Renders a vertical list of steps with status indicators.
+ * Each step displays a circle (pending), highlighted circle (active),
+ * or a checkmark (completed).
+ *
+ * Theming is driven by CSS custom properties:
+ *  - `--glyph-steps-pending-color`
+ *  - `--glyph-steps-active-color`
+ *  - `--glyph-steps-completed-color`
+ *  - `--glyph-steps-connector-color`
+ */
+declare function Steps({ data }: GlyphComponentProps<StepsData>): ReactElement;
+
+declare const stepsDefinition: GlyphComponentDefinition<StepsData>;
+
+interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    type?: 'string' | 'number' | 'date' | 'boolean';
+}
+interface TableAggregation {
+    column: string;
+    function: 'sum' | 'avg' | 'count' | 'min' | 'max';
+}
+interface TableData {
+    columns: TableColumn[];
+    rows: Record<string, unknown>[];
+    aggregation?: TableAggregation[];
+}
+/**
+ * Renders an interactive data table with optional sorting, filtering,
+ * and aggregation.  Styling is driven by `--glyph-table-*` CSS custom
+ * properties so consumers can re-theme via the Glyph theme system.
+ */
+declare function Table({ data, container }: GlyphComponentProps<TableData>): ReactElement;
+
+declare const tableDefinition: GlyphComponentDefinition<TableData>;
+
+/** Shape of the validated `data` for a `ui:tabs` block. */
+interface TabsData {
+    tabs: {
+        label: string;
+        content: string;
+    }[];
+}
+/**
+ * `ui:tabs` component.
+ *
+ * Renders a tabbed interface following the WAI-ARIA Tabs pattern.
+ * - Tab navigation via click.
+ * - Keyboard: ArrowLeft / ArrowRight to cycle tabs, Home / End for first / last.
+ * - ARIA roles: tablist, tab, tabpanel with proper aria-selected, aria-controls,
+ *   and aria-labelledby attributes.
+ */
+declare function Tabs({ data, block }: GlyphComponentProps<TabsData>): react_jsx_runtime.JSX.Element;
+
+declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
+
+interface TimelineEvent {
+    date: string;
+    title: string;
+    description?: string;
+    type?: string;
+}
+interface TimelineData {
+    events: TimelineEvent[];
+    orientation?: 'vertical' | 'horizontal';
+}
+/**
+ * Renders an interactive timeline visualization using D3 for positioning.
+ *
+ * Events are placed along a central axis using a D3 time scale derived
+ * from parsed event dates.  In vertical orientation events alternate
+ * left / right; in horizontal orientation they flow left to right.
+ *
+ * Theming is controlled via CSS custom properties prefixed with
+ * `--glyph-timeline-*`.
+ */
+declare function Timeline({ data }: GlyphComponentProps<TimelineData>): ReactElement;
+
+declare const timelineDefinition: GlyphComponentDefinition<TimelineData>;
+
+interface GraphNodeData {
+    id: string;
+    label: string;
+    type?: string;
+    style?: Record<string, string>;
+    group?: string;
+}
+interface GraphEdgeData {
+    from: string;
+    to: string;
+    label?: string;
+    type?: string;
+    style?: Record<string, string>;
+}
+interface GraphData {
+    type: 'dag' | 'flowchart' | 'mindmap' | 'force';
+    nodes: GraphNodeData[];
+    edges: GraphEdgeData[];
+    layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
+}
+declare function Graph({ data, outgoingRefs, onNavigate, container, }: GlyphComponentProps<GraphData>): ReactElement;
+
+interface PositionedNode extends GraphNode {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface PositionedEdge extends GraphEdge {
+    points: {
+        x: number;
+        y: number;
+    }[];
+}
+interface LayoutResult {
+    nodes: PositionedNode[];
+    edges: PositionedEdge[];
+    width: number;
+    height: number;
+}
+type LayoutDirection = 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
+/**
+ * Uses dagre to compute hierarchical layout positions for nodes and edges.
+ * Supports top-down, left-right, bottom-up, and radial directions.
+ * The radial direction uses top-down dagre as a base.
+ */
+declare function computeDagreLayout(nodes: GraphNode[], edges: GraphEdge[], direction?: LayoutDirection): LayoutResult;
+/**
+ * Uses D3 force simulation to compute physics-based layout positions.
+ * Runs the simulation synchronously for a fixed number of ticks.
+ */
+declare function computeForceLayout(nodes: GraphNode[], edges: GraphEdge[]): LayoutResult;
+
+declare const graphDefinition: GlyphComponentDefinition<GraphData>;
+
+interface Attribute {
+    name: string;
+    type: string;
+    primaryKey?: boolean;
+}
+interface Entity {
+    id: string;
+    label: string;
+    attributes?: Attribute[];
+}
+interface Relationship {
+    from: string;
+    to: string;
+    label?: string;
+    cardinality: '1:1' | '1:N' | 'N:1' | 'N:M';
+}
+interface RelationData {
+    entities: Entity[];
+    relationships: Relationship[];
+    layout?: 'top-down' | 'left-right';
+}
+declare function Relation({ data }: GlyphComponentProps<RelationData>): ReactElement;
+
+declare const relationDefinition: GlyphComponentDefinition<RelationData>;
+
+interface KpiMetric {
+    label: string;
+    value: string;
+    delta?: string;
+    trend?: 'up' | 'down' | 'flat';
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    unit?: string;
+}
+interface KpiData {
+    title?: string;
+    metrics: KpiMetric[];
+    columns?: number;
+}
+declare function Kpi({ data, block, container }: GlyphComponentProps<KpiData>): ReactElement;
+
+declare const kpiDefinition: GlyphComponentDefinition<KpiData>;
+
+interface AccordionSection {
+    title: string;
+    content: string;
+}
+interface AccordionData {
+    title?: string;
+    sections: AccordionSection[];
+    defaultOpen?: number[];
+    multiple?: boolean;
+}
+declare function Accordion({ data, block }: GlyphComponentProps<AccordionData>): ReactElement;
+
+declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
+
+interface ComparisonOption {
+    name: string;
+    description?: string;
+}
+interface ComparisonFeature {
+    name: string;
+    values: string[];
+}
+interface ComparisonData {
+    title?: string;
+    options: ComparisonOption[];
+    features: ComparisonFeature[];
+}
+declare function Comparison({ data, block, container, }: GlyphComponentProps<ComparisonData>): ReactElement;
+
+declare const comparisonDefinition: GlyphComponentDefinition<ComparisonData>;
+
+interface CodeDiffData {
+    language?: string;
+    before: string;
+    after: string;
+    beforeLabel?: string;
+    afterLabel?: string;
+}
+declare function CodeDiff({ data, block }: GlyphComponentProps<CodeDiffData>): ReactElement;
+
+type DiffLineKind = 'add' | 'del' | 'eq';
+interface DiffLine {
+    kind: DiffLineKind;
+    text: string;
+    oldLineNo?: number;
+    newLineNo?: number;
+}
+/**
+ * Computes a line-based diff between two strings.
+ * Uses a longest common subsequence (LCS) approach via dynamic programming.
+ * Returns a minimal edit script as an array of DiffLine entries.
+ */
+declare function computeDiff(before: string, after: string): DiffLine[];
+
+declare const codeDiffDefinition: GlyphComponentDefinition<CodeDiffData>;
+
+type FlowchartNodeType = 'start' | 'end' | 'process' | 'decision';
+interface FlowchartNodeData {
+    id: string;
+    type: FlowchartNodeType;
+    label: string;
+}
+interface FlowchartEdgeData {
+    from: string;
+    to: string;
+    label?: string;
+}
+interface FlowchartData {
+    title?: string;
+    nodes: FlowchartNodeData[];
+    edges: FlowchartEdgeData[];
+    direction: 'top-down' | 'left-right';
+}
+declare function Flowchart({ data, container }: GlyphComponentProps<FlowchartData>): ReactElement;
+
+declare const flowchartDefinition: GlyphComponentDefinition<FlowchartData>;
+
+interface FileNode {
+    name: string;
+    annotation?: string;
+    children?: FileNode[];
+}
+interface FileTreeData {
+    root?: string;
+    tree: FileNode[];
+    defaultExpanded: boolean;
+}
+declare function FileTree({ data }: GlyphComponentProps<FileTreeData>): ReactElement;
+
+declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
+
+type MessageType = 'message' | 'reply' | 'self';
+interface Actor {
+    id: string;
+    label: string;
+}
+interface Message {
+    from: string;
+    to: string;
+    label: string;
+    type: MessageType;
+}
+interface SequenceData {
+    title?: string;
+    actors: Actor[];
+    messages: Message[];
+}
+declare function Sequence({ data, container }: GlyphComponentProps<SequenceData>): ReactElement;
+
+declare const sequenceDefinition: GlyphComponentDefinition<SequenceData>;
+
+interface ArchitectureNode {
+    id: string;
+    label: string;
+    icon?: string;
+    type?: 'zone';
+    children?: ArchitectureNode[];
+    style?: Record<string, string>;
+}
+interface ArchitectureEdge {
+    from: string;
+    to: string;
+    label?: string;
+    type?: 'sync' | 'async' | 'data';
+    style?: Record<string, string>;
+}
+interface ArchitectureData {
+    title?: string;
+    children: ArchitectureNode[];
+    edges: ArchitectureEdge[];
+    layout?: 'top-down' | 'left-right' | 'bottom-up';
+}
+interface PositionedArchNode {
+    id: string;
+    label: string;
+    icon?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zoneId?: string;
+}
+interface PositionedZone {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+}
+interface PositionedArchEdge {
+    from: string;
+    to: string;
+    label?: string;
+    type?: 'sync' | 'async' | 'data';
+    style?: Record<string, string>;
+    points: {
+        x: number;
+        y: number;
+    }[];
+}
+interface ArchitectureLayout {
+    nodes: PositionedArchNode[];
+    zones: PositionedZone[];
+    edges: PositionedArchEdge[];
+    width: number;
+    height: number;
+}
+declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
+
+declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+
+declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
+
+interface MindMapNode {
+    label: string;
+    children?: MindMapNode[];
+}
+interface MindMapData {
+    root: string;
+    children: MindMapNode[];
+    layout: 'radial' | 'tree';
+}
+declare function MindMap({ data, container }: GlyphComponentProps<MindMapData>): ReactElement;
+
+declare const mindMapDefinition: GlyphComponentDefinition<MindMapData>;
+
+interface EquationStep {
+    expression: string;
+    annotation?: string;
+}
+interface EquationData {
+    expression?: string;
+    label?: string;
+    steps?: EquationStep[];
+}
+declare function Equation({ data }: GlyphComponentProps<EquationData>): ReactElement;
+
+declare const equationDefinition: GlyphComponentDefinition<EquationData>;
+
+interface QuizMultipleChoice {
+    type: 'multiple-choice';
+    question: string;
+    options: string[];
+    answer: number;
+    explanation?: string;
+}
+interface QuizTrueFalse {
+    type: 'true-false';
+    question: string;
+    answer: boolean;
+    explanation?: string;
+}
+interface QuizMultiSelect {
+    type: 'multi-select';
+    question: string;
+    options: string[];
+    answer: number[];
+    explanation?: string;
+}
+type QuizQuestion = QuizMultipleChoice | QuizTrueFalse | QuizMultiSelect;
+interface QuizData {
+    questions: QuizQuestion[];
+    showScore?: boolean;
+    title?: string;
+}
+declare function Quiz({ data, block }: GlyphComponentProps<QuizData>): ReactElement;
+
+declare const quizDefinition: GlyphComponentDefinition<QuizData>;
+
+interface CardAction {
+    label: string;
+    url: string;
+}
+interface CardItem {
+    title: string;
+    subtitle?: string;
+    image?: string;
+    icon?: string;
+    body?: string;
+    actions?: CardAction[];
+}
+interface CardData {
+    title?: string;
+    cards: CardItem[];
+    variant?: 'default' | 'outlined' | 'elevated';
+    columns?: number;
+}
+declare function Card({ data, block, container }: GlyphComponentProps<CardData>): ReactElement;
+
+declare const cardDefinition: GlyphComponentDefinition<CardData>;
+
+interface StatItem {
+    type: 'stat';
+    label: string;
+    value: string;
+    description?: string;
+}
+interface FactItem {
+    type: 'fact';
+    icon?: string;
+    text: string;
+}
+interface ProgressItem {
+    type: 'progress';
+    label: string;
+    value: number;
+    color?: string;
+}
+interface TextItem {
+    type: 'text';
+    content: string;
+}
+interface PieSlice {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface PieItem {
+    type: 'pie';
+    label?: string;
+    slices: PieSlice[];
+    donut?: boolean;
+    size?: number;
+}
+interface DividerItem {
+    type: 'divider';
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+interface RatingItem {
+    type: 'rating';
+    label: string;
+    value: number;
+    max?: number;
+    description?: string;
+}
+type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem;
+interface InfographicSection {
+    heading?: string;
+    items: InfographicItem[];
+}
+interface InfographicData {
+    title?: string;
+    sections: InfographicSection[];
+}
+declare function Infographic({ data, block, container, }: GlyphComponentProps<InfographicData>): ReactElement;
+
+declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
+
+export { Accordion, type AccordionData, type AccordionSection, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kpi, type KpiData, type KpiMetric, type LayoutResult, MindMap, type MindMapData, type PieItem, type PieSlice, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, type RatingItem, Relation, type RelationData, Sequence, type SequenceData, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, graphDefinition, infographicDefinition, kpiDefinition, mindMapDefinition, quizDefinition, relationDefinition, sequenceDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };