@glyphjs/components 0.8.0 → 0.9.1

package/dist/index.d.cts

@@ -551,7 +551,7 @@ interface RatingItem$1 {
     label: string;
     value: number;
     max?: number;
-    description?: string;
+    description?: string | InlineNode[];
 }
 type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem$1;
 interface InfographicSection {
@@ -748,6 +748,42 @@ declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<A
 
 declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
 
-declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>];
+interface ColumnsData {
+    children: string[];
+    ratio?: number[];
+    gap?: string;
+}
+declare function Columns({ data, block, layout, container, }: GlyphComponentProps<ColumnsData>): ReactElement;
+
+declare const columnsDefinition: GlyphComponentDefinition<ColumnsData>;
+
+interface RowsData {
+    children: string[];
+    ratio?: number[];
+    gap?: string;
+}
+/**
+ * Stacks children vertically in a CSS grid.
+ *
+ * When used as a cell inside a ui:columns layout, the grid cell stretches
+ * to the full column height, and ratio fr units distribute that height
+ * between children. Without an explicit height constraint (e.g. standalone
+ * usage), children are auto-sized and ratio has no visual effect.
+ */
+declare function Rows({ data, block, layout, container, }: GlyphComponentProps<RowsData>): ReactElement;
+
+declare const rowsDefinition: GlyphComponentDefinition<RowsData>;
+
+type PanelStyle = 'card' | 'bordered' | 'elevated' | 'ghost';
+interface PanelData {
+    child: string;
+    style?: PanelStyle;
+    padding?: string;
+}
+declare function Panel({ data, block, layout, container, }: GlyphComponentProps<PanelData>): ReactElement;
+
+declare const panelDefinition: GlyphComponentDefinition<PanelData>;
+
+declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>, _glyphjs_types.GlyphComponentDefinition<ColumnsData>, _glyphjs_types.GlyphComponentDefinition<RowsData>, _glyphjs_types.GlyphComponentDefinition<PanelData>];
 
-export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, 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, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Columns, type ColumnsData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, Panel, type PanelData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Rows, type RowsData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, columnsDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, panelDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, rowsDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };

package/dist/index.d.ts

@@ -551,7 +551,7 @@ interface RatingItem$1 {
     label: string;
     value: number;
     max?: number;
-    description?: string;
+    description?: string | InlineNode[];
 }
 type InfographicItem = StatItem | FactItem | ProgressItem | TextItem | PieItem | DividerItem | RatingItem$1;
 interface InfographicSection {
@@ -748,6 +748,42 @@ declare function Annotate({ data, block, onInteraction, }: GlyphComponentProps<A
 
 declare const annotateDefinition: GlyphComponentDefinition<AnnotateData>;
 
-declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>];
+interface ColumnsData {
+    children: string[];
+    ratio?: number[];
+    gap?: string;
+}
+declare function Columns({ data, block, layout, container, }: GlyphComponentProps<ColumnsData>): ReactElement;
+
+declare const columnsDefinition: GlyphComponentDefinition<ColumnsData>;
+
+interface RowsData {
+    children: string[];
+    ratio?: number[];
+    gap?: string;
+}
+/**
+ * Stacks children vertically in a CSS grid.
+ *
+ * When used as a cell inside a ui:columns layout, the grid cell stretches
+ * to the full column height, and ratio fr units distribute that height
+ * between children. Without an explicit height constraint (e.g. standalone
+ * usage), children are auto-sized and ratio has no visual effect.
+ */
+declare function Rows({ data, block, layout, container, }: GlyphComponentProps<RowsData>): ReactElement;
+
+declare const rowsDefinition: GlyphComponentDefinition<RowsData>;
+
+type PanelStyle = 'card' | 'bordered' | 'elevated' | 'ghost';
+interface PanelData {
+    child: string;
+    style?: PanelStyle;
+    padding?: string;
+}
+declare function Panel({ data, block, layout, container, }: GlyphComponentProps<PanelData>): ReactElement;
+
+declare const panelDefinition: GlyphComponentDefinition<PanelData>;
+
+declare const allComponentDefinitions: readonly [_glyphjs_types.GlyphComponentDefinition<CalloutData>, _glyphjs_types.GlyphComponentDefinition<unknown>, _glyphjs_types.GlyphComponentDefinition<StepsData>, _glyphjs_types.GlyphComponentDefinition<TableData>, _glyphjs_types.GlyphComponentDefinition<TabsData>, _glyphjs_types.GlyphComponentDefinition<TimelineData>, _glyphjs_types.GlyphComponentDefinition<GraphData>, _glyphjs_types.GlyphComponentDefinition<RelationData>, _glyphjs_types.GlyphComponentDefinition<KpiData>, _glyphjs_types.GlyphComponentDefinition<AccordionData>, _glyphjs_types.GlyphComponentDefinition<ComparisonData>, _glyphjs_types.GlyphComponentDefinition<CodeDiffData>, _glyphjs_types.GlyphComponentDefinition<FlowchartData>, _glyphjs_types.GlyphComponentDefinition<FileTreeData>, _glyphjs_types.GlyphComponentDefinition<SequenceData>, _glyphjs_types.GlyphComponentDefinition<ArchitectureData>, _glyphjs_types.GlyphComponentDefinition<MindMapData>, _glyphjs_types.GlyphComponentDefinition<EquationData>, _glyphjs_types.GlyphComponentDefinition<QuizData>, _glyphjs_types.GlyphComponentDefinition<CardData>, _glyphjs_types.GlyphComponentDefinition<InfographicData>, _glyphjs_types.GlyphComponentDefinition<PollData>, _glyphjs_types.GlyphComponentDefinition<RatingData>, _glyphjs_types.GlyphComponentDefinition<RankerData>, _glyphjs_types.GlyphComponentDefinition<SliderData>, _glyphjs_types.GlyphComponentDefinition<MatrixData>, _glyphjs_types.GlyphComponentDefinition<FormData>, _glyphjs_types.GlyphComponentDefinition<KanbanData>, _glyphjs_types.GlyphComponentDefinition<AnnotateData>, _glyphjs_types.GlyphComponentDefinition<ColumnsData>, _glyphjs_types.GlyphComponentDefinition<RowsData>, _glyphjs_types.GlyphComponentDefinition<PanelData>];
 
-export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, 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, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+export { Accordion, type AccordionData, type AccordionSection, Annotate, type AnnotateData, type AnnotateLabel, type Annotation, Architecture, type ArchitectureData, type ArchitectureLayout, Callout, type CalloutData, Card, type CardAction, type CardData, type CardItem, Chart, CodeDiff, type CodeDiffData, Columns, type ColumnsData, Comparison, type ComparisonData, type ComparisonFeature, type ComparisonOption, type DiffLine, type DiffLineKind, type DividerItem, Equation, type EquationData, type EquationStep, FileTree, type FileTreeData, Flowchart, type FlowchartData, Form, type FormData, type FormField, Graph, type GraphData, Infographic, type InfographicData, type InfographicItem, type InfographicSection, Kanban, type KanbanCard, type KanbanColumn, type KanbanData, Kpi, type KpiData, type KpiMetric, type LayoutResult, Matrix, type MatrixColumn, type MatrixData, type MatrixRow, MindMap, type MindMapData, Panel, type PanelData, type PieItem, type PieSlice, Poll, type PollData, type PositionedArchEdge, type PositionedArchNode, type PositionedEdge, type PositionedNode, type PositionedZone, Quiz, type QuizData, type QuizQuestion, Ranker, type RankerData, type RankerItemData, Rating, type RatingData, type RatingItem$1 as RatingItem, type RatingItem as RatingScaleItem, Relation, type RelationData, Rows, type RowsData, Sequence, type SequenceData, Slider, type SliderData, type SliderParameter, Steps, type StepsData, Table, type TableData, Tabs, type TabsData, Timeline, type TimelineData, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, columnsDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, panelDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, rowsDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { accordionSchema, calloutSchema, chartSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema, graphSchema, relationSchema, kpiSchema, comparisonSchema, codediffSchema, flowchartSchema, filetreeSchema, sequenceSchema, architectureSchema, mindmapSchema, equationSchema, quizSchema, cardSchema, infographicSchema, pollSchema, ratingSchema, rankerSchema, sliderSchema, matrixSchema, formSchema, kanbanSchema, annotateSchema } from '@glyphjs/schemas';
-import { RichText } from '@glyphjs/runtime';
+import { accordionSchema, calloutSchema, chartSchema, stepsSchema, tableSchema, tabsSchema, timelineSchema, graphSchema, relationSchema, kpiSchema, comparisonSchema, codediffSchema, flowchartSchema, filetreeSchema, sequenceSchema, architectureSchema, mindmapSchema, equationSchema, quizSchema, cardSchema, infographicSchema, pollSchema, ratingSchema, rankerSchema, sliderSchema, matrixSchema, formSchema, kanbanSchema, annotateSchema, columnsSchema, rowsSchema, panelSchema } from '@glyphjs/schemas';
+import { RichText, BlockRenderer } from '@glyphjs/runtime';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import * as d32 from 'd3';
@@ -5584,7 +5584,7 @@ function renderRatingGroup(items, keyPrefix) {
                   marginTop: "var(--glyph-spacing-xs, 0.25rem)",
                   fontStyle: "italic"
                 },
-                children: item.description
+                children: /* @__PURE__ */ jsx(RichText, { content: item.description })
               }
             )
           ] })
@@ -7455,6 +7455,129 @@ var annotateDefinition = {
   schema: annotateSchema,
   render: Annotate
 };
+function Columns({
+  data,
+  block,
+  layout,
+  container
+}) {
+  const childBlocks = block.children ?? [];
+  const ratio = data.ratio ?? childBlocks.map(() => 1);
+  const cols = ratio.map((r) => `${String(r)}fr`).join(" ");
+  const gap = data.gap ?? "1rem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: cols,
+        gap
+      },
+      children: childBlocks.map((child, i) => /* @__PURE__ */ jsx(
+        BlockRenderer,
+        {
+          block: child,
+          layout,
+          index: i,
+          container
+        },
+        child.id
+      ))
+    }
+  );
+}
+
+// src/columns/index.ts
+var columnsDefinition = {
+  type: "ui:columns",
+  schema: columnsSchema,
+  render: Columns
+};
+function Rows({
+  data,
+  block,
+  layout,
+  container
+}) {
+  const childBlocks = block.children ?? [];
+  const ratio = data.ratio ?? childBlocks.map(() => 1);
+  const rows = ratio.map((r) => `${String(r)}fr`).join(" ");
+  const gap = data.gap ?? "1rem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateRows: rows,
+        gap,
+        height: "100%"
+      },
+      children: childBlocks.map((child, i) => /* @__PURE__ */ jsx(
+        BlockRenderer,
+        {
+          block: child,
+          layout,
+          index: i,
+          container
+        },
+        child.id
+      ))
+    }
+  );
+}
+
+// src/rows/index.ts
+var rowsDefinition = {
+  type: "ui:rows",
+  schema: rowsSchema,
+  render: Rows
+};
+var PANEL_STYLES = {
+  card: {
+    backgroundColor: "var(--glyph-surface, #ffffff)",
+    borderRadius: "var(--glyph-radius-lg, 0.5rem)",
+    boxShadow: "var(--glyph-shadow-sm, 0 1px 3px rgba(0,0,0,0.1))",
+    border: "1px solid var(--glyph-border, rgba(0,0,0,0.08))"
+  },
+  bordered: {
+    border: "1px solid var(--glyph-border, rgba(0,0,0,0.2))",
+    borderRadius: "var(--glyph-radius-md, 0.25rem)"
+  },
+  elevated: {
+    backgroundColor: "var(--glyph-surface, #ffffff)",
+    borderRadius: "var(--glyph-radius-lg, 0.5rem)",
+    boxShadow: "var(--glyph-shadow-md, 0 4px 12px rgba(0,0,0,0.15))"
+  },
+  ghost: {}
+};
+function Panel({
+  data,
+  block,
+  layout,
+  container
+}) {
+  const childBlock = block.children?.[0];
+  const panelStyle = data.style ?? "card";
+  const padding = data.padding ?? "1rem";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...PANEL_STYLES[panelStyle],
+        padding,
+        overflow: "hidden"
+      },
+      children: childBlock && /* @__PURE__ */ jsx(BlockRenderer, { block: childBlock, layout, index: 0, container })
+    }
+  );
+}
+
+// src/panel/index.ts
+var panelDefinition = {
+  type: "ui:panel",
+  schema: panelSchema,
+  render: Panel
+};
 
 // src/index.ts
 var allComponentDefinitions = [
@@ -7486,9 +7609,12 @@ var allComponentDefinitions = [
   matrixDefinition,
   formDefinition,
   kanbanDefinition,
-  annotateDefinition
+  annotateDefinition,
+  columnsDefinition,
+  rowsDefinition,
+  panelDefinition
 ];
 
-export { Accordion, Annotate, Architecture, Callout, Card, Chart, CodeDiff, Comparison, Equation, FileTree, Flowchart, Form, Graph, Infographic, Kanban, Kpi, Matrix, MindMap, Poll, Quiz, Ranker, Rating, Relation, Sequence, Slider, Steps, Table, Tabs, Timeline, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
+export { Accordion, Annotate, Architecture, Callout, Card, Chart, CodeDiff, Columns, Comparison, Equation, FileTree, Flowchart, Form, Graph, Infographic, Kanban, Kpi, Matrix, MindMap, Panel, Poll, Quiz, Ranker, Rating, Relation, Rows, Sequence, Slider, Steps, Table, Tabs, Timeline, accordionDefinition, allComponentDefinitions, annotateDefinition, architectureDefinition, calloutDefinition, cardDefinition, chartDefinition, codeDiffDefinition, columnsDefinition, comparisonDefinition, computeArchitectureLayout, computeDagreLayout, computeDiff, computeForceLayout, equationDefinition, fileTreeDefinition, flowchartDefinition, formDefinition, graphDefinition, infographicDefinition, kanbanDefinition, kpiDefinition, matrixDefinition, mindMapDefinition, panelDefinition, pollDefinition, quizDefinition, rankerDefinition, ratingDefinition, relationDefinition, rowsDefinition, sequenceDefinition, sliderDefinition, stepsDefinition, tableDefinition, tabsDefinition, timelineDefinition };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map