@glyphjs/components 0.2.0 → 0.4.0

package/dist/index.d.cts

@@ -1,11 +1,12 @@
-import { GlyphComponentProps, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
+import { GlyphComponentProps, InlineNode, 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;
+    title?: string | InlineNode[];
+    content: string | InlineNode[];
+    markdown?: boolean;
 }
 /**
  * Renders a styled callout box with variant-specific icon, optional title,
@@ -47,10 +48,11 @@ declare const chartDefinition: GlyphComponentDefinition;
 interface StepItem {
     title: string;
     status?: 'pending' | 'active' | 'completed';
-    content: string;
+    content: string | InlineNode[];
 }
 interface StepsData {
     steps: StepItem[];
+    markdown?: boolean;
 }
 /**
  * Renders a vertical list of steps with status indicators.
@@ -114,13 +116,14 @@ declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
 
 interface TimelineEvent {
     date: string;
-    title: string;
-    description?: string;
+    title: string | InlineNode[];
+    description?: string | InlineNode[];
     type?: string;
 }
 interface TimelineData {
     events: TimelineEvent[];
     orientation?: 'vertical' | 'horizontal';
+    markdown?: boolean;
 }
 /**
  * Renders an interactive timeline visualization using D3 for positioning.
@@ -155,6 +158,7 @@ interface GraphData {
     nodes: GraphNodeData[];
     edges: GraphEdgeData[];
     layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
 declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
 
@@ -211,13 +215,14 @@ interface RelationData {
     entities: Entity[];
     relationships: Relationship[];
     layout?: 'top-down' | 'left-right';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
-declare function Relation({ data }: GlyphComponentProps<RelationData>): ReactElement;
+declare function Relation({ data, block }: GlyphComponentProps<RelationData>): ReactElement;
 
 declare const relationDefinition: GlyphComponentDefinition<RelationData>;
 
 interface KpiMetric {
-    label: string;
+    label: string | InlineNode[];
     value: string;
     delta?: string;
     trend?: 'up' | 'down' | 'flat';
@@ -228,6 +233,7 @@ interface KpiData {
     title?: string;
     metrics: KpiMetric[];
     columns?: number;
+    markdown?: boolean;
 }
 declare function Kpi({ data, block, container }: GlyphComponentProps<KpiData>): ReactElement;
 
@@ -235,13 +241,14 @@ declare const kpiDefinition: GlyphComponentDefinition<KpiData>;
 
 interface AccordionSection {
     title: string;
-    content: string;
+    content: string | InlineNode[];
 }
 interface AccordionData {
     title?: string;
     sections: AccordionSection[];
     defaultOpen?: number[];
     multiple?: boolean;
+    markdown?: boolean;
 }
 declare function Accordion({ data, block, onInteraction, }: GlyphComponentProps<AccordionData>): ReactElement;
 
@@ -249,16 +256,17 @@ declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
 
 interface ComparisonOption {
     name: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface ComparisonFeature {
     name: string;
-    values: string[];
+    values: (string | InlineNode[])[];
 }
 interface ComparisonData {
     title?: string;
     options: ComparisonOption[];
     features: ComparisonFeature[];
+    markdown?: boolean;
 }
 declare function Comparison({ data, block, container, onInteraction, }: GlyphComponentProps<ComparisonData>): ReactElement;
 
@@ -305,8 +313,9 @@ interface FlowchartData {
     nodes: FlowchartNodeData[];
     edges: FlowchartEdgeData[];
     direction: 'top-down' | 'left-right';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
-declare function Flowchart({ data, container }: GlyphComponentProps<FlowchartData>): ReactElement;
+declare function Flowchart({ data, block, container, }: GlyphComponentProps<FlowchartData>): ReactElement;
 
 declare const flowchartDefinition: GlyphComponentDefinition<FlowchartData>;
 
@@ -436,29 +445,30 @@ declare const equationDefinition: GlyphComponentDefinition<EquationData>;
 
 interface QuizMultipleChoice {
     type: 'multiple-choice';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizTrueFalse {
     type: 'true-false';
-    question: string;
+    question: string | InlineNode[];
     answer: boolean;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizMultiSelect {
     type: 'multi-select';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number[];
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 type QuizQuestion = QuizMultipleChoice | QuizTrueFalse | QuizMultiSelect;
 interface QuizData {
     questions: QuizQuestion[];
     showScore?: boolean;
     title?: string;
+    markdown?: boolean;
 }
 declare function Quiz({ data, block, onInteraction }: GlyphComponentProps<QuizData>): ReactElement;
 
@@ -470,10 +480,10 @@ interface CardAction {
 }
 interface CardItem {
     title: string;
-    subtitle?: string;
+    subtitle?: string | InlineNode[];
     image?: string;
     icon?: string;
-    body?: string;
+    body?: string | InlineNode[];
     actions?: CardAction[];
 }
 interface CardData {
@@ -481,6 +491,7 @@ interface CardData {
     cards: CardItem[];
     variant?: 'default' | 'outlined' | 'elevated';
     columns?: number;
+    markdown?: boolean;
 }
 declare function Card({ data, block, container }: GlyphComponentProps<CardData>): ReactElement;
 
@@ -490,12 +501,12 @@ interface StatItem {
     type: 'stat';
     label: string;
     value: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface FactItem {
     type: 'fact';
     icon?: string;
-    text: string;
+    text: string | InlineNode[];
 }
 interface ProgressItem {
     type: 'progress';
@@ -538,25 +549,27 @@ interface InfographicSection {
 interface InfographicData {
     title?: string;
     sections: InfographicSection[];
+    markdown?: boolean;
 }
 declare function Infographic({ data, block, container, }: GlyphComponentProps<InfographicData>): ReactElement;
 
 declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
 
 interface PollData {
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     multiple?: boolean;
     showResults?: boolean;
     title?: string;
+    markdown?: boolean;
 }
 declare function Poll({ data, block, onInteraction }: GlyphComponentProps<PollData>): ReactElement;
 
 declare const pollDefinition: GlyphComponentDefinition<PollData>;
 
 interface RatingItem {
-    label: string;
-    description?: string;
+    label: string | InlineNode[];
+    description?: string | InlineNode[];
 }
 interface RatingData {
     title?: string;
@@ -567,6 +580,7 @@ interface RatingData {
         high: string;
     };
     items: RatingItem[];
+    markdown?: boolean;
 }
 declare function Rating({ data, block, onInteraction, }: GlyphComponentProps<RatingData>): ReactElement;
 
@@ -574,12 +588,13 @@ declare const ratingDefinition: GlyphComponentDefinition<RatingData>;
 
 interface RankerItemData {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     description?: string;
 }
 interface RankerData {
     title?: string;
     items: RankerItemData[];
+    markdown?: boolean;
 }
 declare function Ranker({ data, block, onInteraction, }: GlyphComponentProps<RankerData>): ReactElement;
 
@@ -587,7 +602,7 @@ declare const rankerDefinition: GlyphComponentDefinition<RankerData>;
 
 interface SliderParameter {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     min?: number;
     max?: number;
     step?: number;
@@ -598,6 +613,7 @@ interface SliderData {
     title?: string;
     layout?: 'vertical' | 'horizontal';
     parameters: SliderParameter[];
+    markdown?: boolean;
 }
 declare function Slider({ data, block, onInteraction, }: GlyphComponentProps<SliderData>): ReactElement;
 
@@ -605,12 +621,12 @@ declare const sliderDefinition: GlyphComponentDefinition<SliderData>;
 
 interface MatrixColumn {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     weight?: number;
 }
 interface MatrixRow {
     id: string;
-    label: string;
+    label: string | InlineNode[];
 }
 interface MatrixData {
     title?: string;
@@ -618,6 +634,7 @@ interface MatrixData {
     showTotals?: boolean;
     columns: MatrixColumn[];
     rows: MatrixRow[];
+    markdown?: boolean;
 }
 declare function Matrix({ data, block, onInteraction, }: GlyphComponentProps<MatrixData>): ReactElement;
 
@@ -667,9 +684,10 @@ interface RangeField {
 type FormField = TextField | TextareaField | SelectField | CheckboxField | RangeField;
 interface FormData {
     title?: string;
-    description?: string;
+    description?: string | InlineNode[];
     submitLabel?: string;
     fields: FormField[];
+    markdown?: boolean;
 }
 declare function Form({ data, block, onInteraction }: GlyphComponentProps<FormData>): ReactElement;
 
@@ -709,8 +727,9 @@ interface Annotation {
 interface AnnotateData {
     title?: string;
     labels: AnnotateLabel[];
-    text: string;
+    text: string | InlineNode[];
     annotations?: Annotation[];
+    markdown?: boolean;
 }
 declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<AnnotateData>): ReactElement;
 

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import { GlyphComponentProps, GlyphComponentDefinition, GraphNode, GraphEdge } from '@glyphjs/types';
+import { GlyphComponentProps, InlineNode, 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;
+    title?: string | InlineNode[];
+    content: string | InlineNode[];
+    markdown?: boolean;
 }
 /**
  * Renders a styled callout box with variant-specific icon, optional title,
@@ -47,10 +48,11 @@ declare const chartDefinition: GlyphComponentDefinition;
 interface StepItem {
     title: string;
     status?: 'pending' | 'active' | 'completed';
-    content: string;
+    content: string | InlineNode[];
 }
 interface StepsData {
     steps: StepItem[];
+    markdown?: boolean;
 }
 /**
  * Renders a vertical list of steps with status indicators.
@@ -114,13 +116,14 @@ declare const tabsDefinition: GlyphComponentDefinition<TabsData>;
 
 interface TimelineEvent {
     date: string;
-    title: string;
-    description?: string;
+    title: string | InlineNode[];
+    description?: string | InlineNode[];
     type?: string;
 }
 interface TimelineData {
     events: TimelineEvent[];
     orientation?: 'vertical' | 'horizontal';
+    markdown?: boolean;
 }
 /**
  * Renders an interactive timeline visualization using D3 for positioning.
@@ -155,6 +158,7 @@ interface GraphData {
     nodes: GraphNodeData[];
     edges: GraphEdgeData[];
     layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
 declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
 
@@ -211,13 +215,14 @@ interface RelationData {
     entities: Entity[];
     relationships: Relationship[];
     layout?: 'top-down' | 'left-right';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
-declare function Relation({ data }: GlyphComponentProps<RelationData>): ReactElement;
+declare function Relation({ data, block }: GlyphComponentProps<RelationData>): ReactElement;
 
 declare const relationDefinition: GlyphComponentDefinition<RelationData>;
 
 interface KpiMetric {
-    label: string;
+    label: string | InlineNode[];
     value: string;
     delta?: string;
     trend?: 'up' | 'down' | 'flat';
@@ -228,6 +233,7 @@ interface KpiData {
     title?: string;
     metrics: KpiMetric[];
     columns?: number;
+    markdown?: boolean;
 }
 declare function Kpi({ data, block, container }: GlyphComponentProps<KpiData>): ReactElement;
 
@@ -235,13 +241,14 @@ declare const kpiDefinition: GlyphComponentDefinition<KpiData>;
 
 interface AccordionSection {
     title: string;
-    content: string;
+    content: string | InlineNode[];
 }
 interface AccordionData {
     title?: string;
     sections: AccordionSection[];
     defaultOpen?: number[];
     multiple?: boolean;
+    markdown?: boolean;
 }
 declare function Accordion({ data, block, onInteraction, }: GlyphComponentProps<AccordionData>): ReactElement;
 
@@ -249,16 +256,17 @@ declare const accordionDefinition: GlyphComponentDefinition<AccordionData>;
 
 interface ComparisonOption {
     name: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface ComparisonFeature {
     name: string;
-    values: string[];
+    values: (string | InlineNode[])[];
 }
 interface ComparisonData {
     title?: string;
     options: ComparisonOption[];
     features: ComparisonFeature[];
+    markdown?: boolean;
 }
 declare function Comparison({ data, block, container, onInteraction, }: GlyphComponentProps<ComparisonData>): ReactElement;
 
@@ -305,8 +313,9 @@ interface FlowchartData {
     nodes: FlowchartNodeData[];
     edges: FlowchartEdgeData[];
     direction: 'top-down' | 'left-right';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
 }
-declare function Flowchart({ data, container }: GlyphComponentProps<FlowchartData>): ReactElement;
+declare function Flowchart({ data, block, container, }: GlyphComponentProps<FlowchartData>): ReactElement;
 
 declare const flowchartDefinition: GlyphComponentDefinition<FlowchartData>;
 
@@ -436,29 +445,30 @@ declare const equationDefinition: GlyphComponentDefinition<EquationData>;
 
 interface QuizMultipleChoice {
     type: 'multiple-choice';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizTrueFalse {
     type: 'true-false';
-    question: string;
+    question: string | InlineNode[];
     answer: boolean;
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 interface QuizMultiSelect {
     type: 'multi-select';
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     answer: number[];
-    explanation?: string;
+    explanation?: string | InlineNode[];
 }
 type QuizQuestion = QuizMultipleChoice | QuizTrueFalse | QuizMultiSelect;
 interface QuizData {
     questions: QuizQuestion[];
     showScore?: boolean;
     title?: string;
+    markdown?: boolean;
 }
 declare function Quiz({ data, block, onInteraction }: GlyphComponentProps<QuizData>): ReactElement;
 
@@ -470,10 +480,10 @@ interface CardAction {
 }
 interface CardItem {
     title: string;
-    subtitle?: string;
+    subtitle?: string | InlineNode[];
     image?: string;
     icon?: string;
-    body?: string;
+    body?: string | InlineNode[];
     actions?: CardAction[];
 }
 interface CardData {
@@ -481,6 +491,7 @@ interface CardData {
     cards: CardItem[];
     variant?: 'default' | 'outlined' | 'elevated';
     columns?: number;
+    markdown?: boolean;
 }
 declare function Card({ data, block, container }: GlyphComponentProps<CardData>): ReactElement;
 
@@ -490,12 +501,12 @@ interface StatItem {
     type: 'stat';
     label: string;
     value: string;
-    description?: string;
+    description?: string | InlineNode[];
 }
 interface FactItem {
     type: 'fact';
     icon?: string;
-    text: string;
+    text: string | InlineNode[];
 }
 interface ProgressItem {
     type: 'progress';
@@ -538,25 +549,27 @@ interface InfographicSection {
 interface InfographicData {
     title?: string;
     sections: InfographicSection[];
+    markdown?: boolean;
 }
 declare function Infographic({ data, block, container, }: GlyphComponentProps<InfographicData>): ReactElement;
 
 declare const infographicDefinition: GlyphComponentDefinition<InfographicData>;
 
 interface PollData {
-    question: string;
-    options: string[];
+    question: string | InlineNode[];
+    options: (string | InlineNode[])[];
     multiple?: boolean;
     showResults?: boolean;
     title?: string;
+    markdown?: boolean;
 }
 declare function Poll({ data, block, onInteraction }: GlyphComponentProps<PollData>): ReactElement;
 
 declare const pollDefinition: GlyphComponentDefinition<PollData>;
 
 interface RatingItem {
-    label: string;
-    description?: string;
+    label: string | InlineNode[];
+    description?: string | InlineNode[];
 }
 interface RatingData {
     title?: string;
@@ -567,6 +580,7 @@ interface RatingData {
         high: string;
     };
     items: RatingItem[];
+    markdown?: boolean;
 }
 declare function Rating({ data, block, onInteraction, }: GlyphComponentProps<RatingData>): ReactElement;
 
@@ -574,12 +588,13 @@ declare const ratingDefinition: GlyphComponentDefinition<RatingData>;
 
 interface RankerItemData {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     description?: string;
 }
 interface RankerData {
     title?: string;
     items: RankerItemData[];
+    markdown?: boolean;
 }
 declare function Ranker({ data, block, onInteraction, }: GlyphComponentProps<RankerData>): ReactElement;
 
@@ -587,7 +602,7 @@ declare const rankerDefinition: GlyphComponentDefinition<RankerData>;
 
 interface SliderParameter {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     min?: number;
     max?: number;
     step?: number;
@@ -598,6 +613,7 @@ interface SliderData {
     title?: string;
     layout?: 'vertical' | 'horizontal';
     parameters: SliderParameter[];
+    markdown?: boolean;
 }
 declare function Slider({ data, block, onInteraction, }: GlyphComponentProps<SliderData>): ReactElement;
 
@@ -605,12 +621,12 @@ declare const sliderDefinition: GlyphComponentDefinition<SliderData>;
 
 interface MatrixColumn {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     weight?: number;
 }
 interface MatrixRow {
     id: string;
-    label: string;
+    label: string | InlineNode[];
 }
 interface MatrixData {
     title?: string;
@@ -618,6 +634,7 @@ interface MatrixData {
     showTotals?: boolean;
     columns: MatrixColumn[];
     rows: MatrixRow[];
+    markdown?: boolean;
 }
 declare function Matrix({ data, block, onInteraction, }: GlyphComponentProps<MatrixData>): ReactElement;
 
@@ -667,9 +684,10 @@ interface RangeField {
 type FormField = TextField | TextareaField | SelectField | CheckboxField | RangeField;
 interface FormData {
     title?: string;
-    description?: string;
+    description?: string | InlineNode[];
     submitLabel?: string;
     fields: FormField[];
+    markdown?: boolean;
 }
 declare function Form({ data, block, onInteraction }: GlyphComponentProps<FormData>): ReactElement;
 
@@ -709,8 +727,9 @@ interface Annotation {
 interface AnnotateData {
     title?: string;
     labels: AnnotateLabel[];
-    text: string;
+    text: string | InlineNode[];
     annotations?: Annotation[];
+    markdown?: boolean;
 }
 declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<AnnotateData>): ReactElement;