@glyphjs/components 0.4.0 → 0.6.0

package/dist/index.d.cts

@@ -22,18 +22,19 @@ declare const calloutDefinition: GlyphComponentDefinition<CalloutData>;
 interface ChartData {
     type: 'line' | 'bar' | 'area' | 'ohlc';
     series: {
-        name: string;
+        name: string | InlineNode[];
         data: DataRecord[];
     }[];
     xAxis?: {
         key: string;
-        label?: string;
+        label?: string | InlineNode[];
     };
     yAxis?: {
         key: string;
-        label?: string;
+        label?: string | InlineNode[];
     };
     legend?: boolean;
+    markdown?: boolean;
 }
 type DataRecord = Record<string, number | string>;
 
@@ -71,7 +72,7 @@ declare const stepsDefinition: GlyphComponentDefinition<StepsData>;
 
 interface TableColumn {
     key: string;
-    label: string;
+    label: string | InlineNode[];
     sortable?: boolean;
     filterable?: boolean;
     type?: 'string' | 'number' | 'date' | 'boolean';
@@ -84,6 +85,7 @@ interface TableData {
     columns: TableColumn[];
     rows: Record<string, unknown>[];
     aggregation?: TableAggregation[];
+    markdown?: boolean;
 }
 /**
  * Renders an interactive data table with optional sorting, filtering,
@@ -97,9 +99,10 @@ declare const tableDefinition: GlyphComponentDefinition<TableData>;
 /** Shape of the validated `data` for a `ui:tabs` block. */
 interface TabsData {
     tabs: {
-        label: string;
-        content: string;
+        label: string | InlineNode[];
+        content: string | InlineNode[];
     }[];
+    markdown?: boolean;
 }
 /**
  * `ui:tabs` component.
@@ -141,7 +144,7 @@ declare const timelineDefinition: GlyphComponentDefinition<TimelineData>;
 
 interface GraphNodeData {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     type?: string;
     style?: Record<string, string>;
     group?: string;
@@ -149,7 +152,7 @@ interface GraphNodeData {
 interface GraphEdgeData {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
     type?: string;
     style?: Record<string, string>;
 }
@@ -159,6 +162,7 @@ interface GraphData {
     edges: GraphEdgeData[];
     layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
 
@@ -196,19 +200,19 @@ declare function computeForceLayout(nodes: GraphNode[], edges: GraphEdge[]): Lay
 declare const graphDefinition: GlyphComponentDefinition<GraphData>;
 
 interface Attribute {
-    name: string;
+    name: string | InlineNode[];
     type: string;
     primaryKey?: boolean;
 }
 interface Entity {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     attributes?: Attribute[];
 }
 interface Relationship {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
     cardinality: '1:1' | '1:N' | 'N:1' | 'N:M';
 }
 interface RelationData {
@@ -216,6 +220,7 @@ interface RelationData {
     relationships: Relationship[];
     layout?: 'top-down' | 'left-right';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Relation({ data, block }: GlyphComponentProps<RelationData>): ReactElement;
 
@@ -276,8 +281,9 @@ interface CodeDiffData {
     language?: string;
     before: string;
     after: string;
-    beforeLabel?: string;
-    afterLabel?: string;
+    beforeLabel?: string | InlineNode[];
+    afterLabel?: string | InlineNode[];
+    markdown?: boolean;
 }
 declare function CodeDiff({ data, block }: GlyphComponentProps<CodeDiffData>): ReactElement;
 
@@ -301,19 +307,20 @@ type FlowchartNodeType = 'start' | 'end' | 'process' | 'decision';
 interface FlowchartNodeData {
     id: string;
     type: FlowchartNodeType;
-    label: string;
+    label: string | InlineNode[];
 }
 interface FlowchartEdgeData {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
 }
 interface FlowchartData {
-    title?: string;
+    title?: string | InlineNode[];
     nodes: FlowchartNodeData[];
     edges: FlowchartEdgeData[];
     direction: 'top-down' | 'left-right';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Flowchart({ data, block, container, }: GlyphComponentProps<FlowchartData>): ReactElement;
 
@@ -336,18 +343,19 @@ declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
 type MessageType = 'message' | 'reply' | 'self';
 interface Actor {
     id: string;
-    label: string;
+    label: string | InlineNode[];
 }
 interface Message {
     from: string;
     to: string;
-    label: string;
+    label: string | InlineNode[];
     type: MessageType;
 }
 interface SequenceData {
-    title?: string;
+    title?: string | InlineNode[];
     actors: Actor[];
     messages: Message[];
+    markdown?: boolean;
 }
 declare function Sequence({ data, container }: GlyphComponentProps<SequenceData>): ReactElement;
 
@@ -373,6 +381,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -413,7 +423,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 
@@ -432,12 +442,13 @@ declare const mindMapDefinition: GlyphComponentDefinition<MindMapData>;
 
 interface EquationStep {
     expression: string;
-    annotation?: string;
+    annotation?: string | InlineNode[];
 }
 interface EquationData {
     expression?: string;
-    label?: string;
+    label?: string | InlineNode[];
     steps?: EquationStep[];
+    markdown?: boolean;
 }
 declare function Equation({ data }: GlyphComponentProps<EquationData>): ReactElement;
 
@@ -695,8 +706,8 @@ declare const formDefinition: GlyphComponentDefinition<FormData>;
 
 interface KanbanCard {
     id: string;
-    title: string;
-    description?: string;
+    title: string | InlineNode[];
+    description?: string | InlineNode[];
     priority?: 'high' | 'medium' | 'low';
     tags?: string[];
 }
@@ -709,6 +720,7 @@ interface KanbanColumn {
 interface KanbanData {
     title?: string;
     columns: KanbanColumn[];
+    markdown?: boolean;
 }
 declare function Kanban({ data, block, onInteraction, }: GlyphComponentProps<KanbanData>): ReactElement;
 

package/dist/index.d.ts

@@ -22,18 +22,19 @@ declare const calloutDefinition: GlyphComponentDefinition<CalloutData>;
 interface ChartData {
     type: 'line' | 'bar' | 'area' | 'ohlc';
     series: {
-        name: string;
+        name: string | InlineNode[];
         data: DataRecord[];
     }[];
     xAxis?: {
         key: string;
-        label?: string;
+        label?: string | InlineNode[];
     };
     yAxis?: {
         key: string;
-        label?: string;
+        label?: string | InlineNode[];
     };
     legend?: boolean;
+    markdown?: boolean;
 }
 type DataRecord = Record<string, number | string>;
 
@@ -71,7 +72,7 @@ declare const stepsDefinition: GlyphComponentDefinition<StepsData>;
 
 interface TableColumn {
     key: string;
-    label: string;
+    label: string | InlineNode[];
     sortable?: boolean;
     filterable?: boolean;
     type?: 'string' | 'number' | 'date' | 'boolean';
@@ -84,6 +85,7 @@ interface TableData {
     columns: TableColumn[];
     rows: Record<string, unknown>[];
     aggregation?: TableAggregation[];
+    markdown?: boolean;
 }
 /**
  * Renders an interactive data table with optional sorting, filtering,
@@ -97,9 +99,10 @@ declare const tableDefinition: GlyphComponentDefinition<TableData>;
 /** Shape of the validated `data` for a `ui:tabs` block. */
 interface TabsData {
     tabs: {
-        label: string;
-        content: string;
+        label: string | InlineNode[];
+        content: string | InlineNode[];
     }[];
+    markdown?: boolean;
 }
 /**
  * `ui:tabs` component.
@@ -141,7 +144,7 @@ declare const timelineDefinition: GlyphComponentDefinition<TimelineData>;
 
 interface GraphNodeData {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     type?: string;
     style?: Record<string, string>;
     group?: string;
@@ -149,7 +152,7 @@ interface GraphNodeData {
 interface GraphEdgeData {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
     type?: string;
     style?: Record<string, string>;
 }
@@ -159,6 +162,7 @@ interface GraphData {
     edges: GraphEdgeData[];
     layout?: 'top-down' | 'left-right' | 'bottom-up' | 'radial' | 'force';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Graph({ data, block, outgoingRefs, onNavigate, onInteraction, container, }: GlyphComponentProps<GraphData>): ReactElement;
 
@@ -196,19 +200,19 @@ declare function computeForceLayout(nodes: GraphNode[], edges: GraphEdge[]): Lay
 declare const graphDefinition: GlyphComponentDefinition<GraphData>;
 
 interface Attribute {
-    name: string;
+    name: string | InlineNode[];
     type: string;
     primaryKey?: boolean;
 }
 interface Entity {
     id: string;
-    label: string;
+    label: string | InlineNode[];
     attributes?: Attribute[];
 }
 interface Relationship {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
     cardinality: '1:1' | '1:N' | 'N:1' | 'N:M';
 }
 interface RelationData {
@@ -216,6 +220,7 @@ interface RelationData {
     relationships: Relationship[];
     layout?: 'top-down' | 'left-right';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Relation({ data, block }: GlyphComponentProps<RelationData>): ReactElement;
 
@@ -276,8 +281,9 @@ interface CodeDiffData {
     language?: string;
     before: string;
     after: string;
-    beforeLabel?: string;
-    afterLabel?: string;
+    beforeLabel?: string | InlineNode[];
+    afterLabel?: string | InlineNode[];
+    markdown?: boolean;
 }
 declare function CodeDiff({ data, block }: GlyphComponentProps<CodeDiffData>): ReactElement;
 
@@ -301,19 +307,20 @@ type FlowchartNodeType = 'start' | 'end' | 'process' | 'decision';
 interface FlowchartNodeData {
     id: string;
     type: FlowchartNodeType;
-    label: string;
+    label: string | InlineNode[];
 }
 interface FlowchartEdgeData {
     from: string;
     to: string;
-    label?: string;
+    label?: string | InlineNode[];
 }
 interface FlowchartData {
-    title?: string;
+    title?: string | InlineNode[];
     nodes: FlowchartNodeData[];
     edges: FlowchartEdgeData[];
     direction: 'top-down' | 'left-right';
     interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    markdown?: boolean;
 }
 declare function Flowchart({ data, block, container, }: GlyphComponentProps<FlowchartData>): ReactElement;
 
@@ -336,18 +343,19 @@ declare const fileTreeDefinition: GlyphComponentDefinition<FileTreeData>;
 type MessageType = 'message' | 'reply' | 'self';
 interface Actor {
     id: string;
-    label: string;
+    label: string | InlineNode[];
 }
 interface Message {
     from: string;
     to: string;
-    label: string;
+    label: string | InlineNode[];
     type: MessageType;
 }
 interface SequenceData {
-    title?: string;
+    title?: string | InlineNode[];
     actors: Actor[];
     messages: Message[];
+    markdown?: boolean;
 }
 declare function Sequence({ data, container }: GlyphComponentProps<SequenceData>): ReactElement;
 
@@ -373,6 +381,8 @@ interface ArchitectureData {
     children: ArchitectureNode[];
     edges: ArchitectureEdge[];
     layout?: 'top-down' | 'left-right' | 'bottom-up';
+    interactionMode?: 'modifier-key' | 'click-to-activate' | 'always';
+    showZoomControls?: boolean;
 }
 interface PositionedArchNode {
     id: string;
@@ -413,7 +423,7 @@ interface ArchitectureLayout {
 }
 declare function computeArchitectureLayout(data: ArchitectureData): Promise<ArchitectureLayout>;
 
-declare function Architecture({ data, container, }: GlyphComponentProps<ArchitectureData>): ReactElement;
+declare function Architecture({ data, container, block, }: GlyphComponentProps<ArchitectureData>): ReactElement;
 
 declare const architectureDefinition: GlyphComponentDefinition<ArchitectureData>;
 
@@ -432,12 +442,13 @@ declare const mindMapDefinition: GlyphComponentDefinition<MindMapData>;
 
 interface EquationStep {
     expression: string;
-    annotation?: string;
+    annotation?: string | InlineNode[];
 }
 interface EquationData {
     expression?: string;
-    label?: string;
+    label?: string | InlineNode[];
     steps?: EquationStep[];
+    markdown?: boolean;
 }
 declare function Equation({ data }: GlyphComponentProps<EquationData>): ReactElement;
 
@@ -695,8 +706,8 @@ declare const formDefinition: GlyphComponentDefinition<FormData>;
 
 interface KanbanCard {
     id: string;
-    title: string;
-    description?: string;
+    title: string | InlineNode[];
+    description?: string | InlineNode[];
     priority?: 'high' | 'medium' | 'low';
     tags?: string[];
 }
@@ -709,6 +720,7 @@ interface KanbanColumn {
 interface KanbanData {
     title?: string;
     columns: KanbanColumn[];
+    markdown?: boolean;
 }
 declare function Kanban({ data, block, onInteraction, }: GlyphComponentProps<KanbanData>): ReactElement;