deskforge 1.0.0

package/packages/ui/dist/typography/Heading.js

@@ -0,0 +1,39 @@
+"use strict";
+// Heading.ts
+// Semantic heading component.
+// Maps to h1 through h6 hierarchy.
+// Font size scales automatically with level.
+// Uses heading font from active theme.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = Heading;
+const core_1 = require("@deskforge/core/");
+// Font sizes for each heading level
+// Resolved from theme typography tokens
+const HEADING_SIZES = {
+    1: '4xl', // 48px
+    2: '3xl', // 32px
+    3: '2xl', // 24px
+    4: 'xl', // 20px
+    5: 'lg', // 16px
+    6: 'md', // 14px
+};
+// Creates a semantic heading node
+// value — heading text content
+// props — heading configuration
+function Heading(value, props = {}) {
+    const level = props.level ?? 1;
+    return (0, core_1.createNode)('Heading', {
+        value: value,
+        level: level,
+        size: HEADING_SIZES[level],
+        weight: 'bold',
+        color: props.color ?? 'text',
+        align: props.align ?? 'left',
+        selectable: props.selectable ?? false,
+        opacity: props.opacity ?? 1,
+        flex: props.flex,
+        // Heading font from theme
+        fontFamily: 'heading',
+    }, []);
+}
+//# sourceMappingURL=Heading.js.map

package/packages/ui/dist/typography/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.ts"],"names":[],"mappings":";AAAA,aAAa;AACb,8BAA8B;AAC9B,mCAAmC;AACnC,6CAA6C;AAC7C,uCAAuC;;AAiE9B,0BAAO;AA/DhB,2CAA6C;AAM7C,oCAAoC;AACpC,wCAAwC;AACxC,MAAM,aAAa,GAAiC;IAClD,CAAC,EAAE,KAAK,EAAG,OAAO;IAClB,CAAC,EAAE,KAAK,EAAG,OAAO;IAClB,CAAC,EAAE,KAAK,EAAG,OAAO;IAClB,CAAC,EAAE,IAAI,EAAI,OAAO;IAClB,CAAC,EAAE,IAAI,EAAI,OAAO;IAClB,CAAC,EAAE,IAAI,EAAI,OAAO;CACnB,CAAA;AAuBD,kCAAkC;AAClC,+BAA+B;AAC/B,gCAAgC;AAChC,SAAS,OAAO,CACd,KAAa,EACb,QAAsB,EAAE;IAExB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAA;IAE9B,OAAO,IAAA,iBAAU,EAAC,SAAS,EAAE;QAC3B,KAAK,EAAO,KAAK;QACjB,KAAK,EAAO,KAAK;QACjB,IAAI,EAAQ,aAAa,CAAC,KAAK,CAAC;QAChC,MAAM,EAAM,MAAM;QAClB,KAAK,EAAO,KAAK,CAAC,KAAK,IAAQ,MAAM;QACrC,KAAK,EAAO,KAAK,CAAC,KAAK,IAAQ,MAAM;QACrC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK;QACrC,OAAO,EAAK,KAAK,CAAC,OAAO,IAAO,CAAC;QACjC,IAAI,EAAQ,KAAK,CAAC,IAAI;QACtB,0BAA0B;QAC1B,UAAU,EAAE,SAAS;KACK,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC"}

package/packages/ui/dist/typography/Markdown.d.ts

@@ -0,0 +1,14 @@
+import type { DFNode } from '@deskforge/core/';
+interface MarkdownProps {
+    color?: string;
+    size?: number | string;
+    links?: boolean;
+    highlight?: boolean;
+    maxWidth?: number | string;
+    padding?: number | string;
+    onLink?: (url: string) => void;
+}
+declare function Markdown(src: string, props?: MarkdownProps): DFNode;
+export type { MarkdownProps };
+export { Markdown };
+//# sourceMappingURL=Markdown.d.ts.map

package/packages/ui/dist/typography/Markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../src/typography/Markdown.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAG9C,UAAU,aAAa;IAErB,KAAK,CAAC,EAAO,MAAM,CAAA;IAGnB,IAAI,CAAC,EAAQ,MAAM,GAAG,MAAM,CAAA;IAG5B,KAAK,CAAC,EAAO,OAAO,CAAA;IAGpB,SAAS,CAAC,EAAG,OAAO,CAAA;IAGpB,QAAQ,CAAC,EAAI,MAAM,GAAG,MAAM,CAAA;IAG5B,OAAO,CAAC,EAAK,MAAM,GAAG,MAAM,CAAA;IAG5B,MAAM,CAAC,EAAM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAOD,iBAAS,QAAQ,CACf,GAAG,EAAI,MAAM,EACb,KAAK,GAAE,aAAkB,GACxB,MAAM,CAWR;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/packages/ui/dist/typography/Markdown.js

@@ -0,0 +1,27 @@
+"use strict";
+// Markdown.ts
+// Renders markdown content as styled DFNodes.
+// Parses headings, bold, italic, lists, code blocks.
+// No external markdown library needed.
+// Built-in parser converts markdown to DFNode tree.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Markdown = Markdown;
+const core_1 = require("@deskforge/core/");
+// Creates a markdown rendering node
+// The renderer parses the markdown string
+// and converts it to a DFNode tree at render time
+// src — markdown string to render
+// props — markdown display configuration
+function Markdown(src, props = {}) {
+    return (0, core_1.createNode)('Markdown', {
+        src: src,
+        color: props.color ?? 'text',
+        size: props.size ?? 'md',
+        links: props.links ?? true,
+        highlight: props.highlight ?? true,
+        maxWidth: props.maxWidth,
+        padding: props.padding ?? 0,
+        onLink: props.onLink,
+    }, []);
+}
+//# sourceMappingURL=Markdown.js.map

package/packages/ui/dist/typography/Markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../src/typography/Markdown.ts"],"names":[],"mappings":";AAAA,cAAc;AACd,8CAA8C;AAC9C,qDAAqD;AACrD,uCAAuC;AACvC,oDAAoD;;AAmD3C,4BAAQ;AAjDjB,2CAA6C;AA2B7C,oCAAoC;AACpC,0CAA0C;AAC1C,kDAAkD;AAClD,kCAAkC;AAClC,yCAAyC;AACzC,SAAS,QAAQ,CACf,GAAa,EACb,QAAuB,EAAE;IAEzB,OAAO,IAAA,iBAAU,EAAC,UAAU,EAAE;QAC5B,GAAG,EAAQ,GAAG;QACd,KAAK,EAAM,KAAK,CAAC,KAAK,IAAQ,MAAM;QACpC,IAAI,EAAO,KAAK,CAAC,IAAI,IAAS,IAAI;QAClC,KAAK,EAAM,KAAK,CAAC,KAAK,IAAQ,IAAI;QAClC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,IAAI;QAClC,QAAQ,EAAG,KAAK,CAAC,QAAQ;QACzB,OAAO,EAAI,KAAK,CAAC,OAAO,IAAM,CAAC;QAC/B,MAAM,EAAK,KAAK,CAAC,MAAM;KACG,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC"}

package/packages/ui/dist/typography/Text.d.ts

@@ -0,0 +1,25 @@
+import type { DFNode } from '@deskforge/core/';
+type TextStyle = 'heading' | 'subheading' | 'body' | 'caption' | 'label' | 'mono' | 'overline';
+type TextOverflow = 'clip' | 'ellipsis' | 'fade';
+type TextAlign = 'left' | 'center' | 'right' | 'justify';
+interface TextProps {
+    style?: TextStyle;
+    size?: number | string;
+    weight?: number | string;
+    color?: string;
+    align?: TextAlign;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    lineHeight?: number;
+    letterSpacing?: number;
+    maxLines?: number;
+    overflow?: TextOverflow;
+    selectable?: boolean;
+    flex?: number;
+    opacity?: number;
+}
+declare function Text(value: string | number, props?: TextProps): DFNode;
+export type { TextStyle, TextOverflow, TextAlign, TextProps };
+export { Text };
+//# sourceMappingURL=Text.d.ts.map

package/packages/ui/dist/typography/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/typography/Text.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAI9C,KAAK,SAAS,GACV,SAAS,GACT,YAAY,GACZ,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,GACN,UAAU,CAAA;AAGd,KAAK,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;AAGhD,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAGxD,UAAU,SAAS;IAEjB,KAAK,CAAC,EAAU,SAAS,CAAA;IAGzB,IAAI,CAAC,EAAW,MAAM,GAAG,MAAM,CAAA;IAG/B,MAAM,CAAC,EAAS,MAAM,GAAG,MAAM,CAAA;IAG/B,KAAK,CAAC,EAAU,MAAM,CAAA;IAGtB,KAAK,CAAC,EAAU,SAAS,CAAA;IAGzB,MAAM,CAAC,EAAS,OAAO,CAAA;IAGvB,SAAS,CAAC,EAAM,OAAO,CAAA;IAGvB,aAAa,CAAC,EAAE,OAAO,CAAA;IAGvB,UAAU,CAAC,EAAK,MAAM,CAAA;IAGtB,aAAa,CAAC,EAAE,MAAM,CAAA;IAGtB,QAAQ,CAAC,EAAO,MAAM,CAAA;IAGtB,QAAQ,CAAC,EAAO,YAAY,CAAA;IAG5B,UAAU,CAAC,EAAK,OAAO,CAAA;IAGvB,IAAI,CAAC,EAAW,MAAM,CAAA;IAGtB,OAAO,CAAC,EAAQ,MAAM,CAAA;CACvB;AAKD,iBAAS,IAAI,CACX,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,KAAK,GAAE,SAAc,GACpB,MAAM,CAmBR;AAED,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC7D,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/packages/ui/dist/typography/Text.js

@@ -0,0 +1,34 @@
+"use strict";
+// Text.ts
+// The primary text rendering component.
+// Handles all text display needs.
+// Style tokens resolve from the active theme.
+// Rendered by Skia with full font support
+// including subpixel hinting and emoji.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = Text;
+const core_1 = require("@deskforge/core/");
+// Creates a text rendering node
+// value — the string to display
+// props — text styling configuration
+function Text(value, props = {}) {
+    return (0, core_1.createNode)('Text', {
+        value: String(value),
+        style: props.style,
+        size: props.size,
+        weight: props.weight,
+        color: props.color,
+        align: props.align ?? 'left',
+        italic: props.italic ?? false,
+        underline: props.underline ?? false,
+        strikethrough: props.strikethrough ?? false,
+        lineHeight: props.lineHeight,
+        letterSpacing: props.letterSpacing,
+        maxLines: props.maxLines,
+        overflow: props.overflow ?? 'ellipsis',
+        selectable: props.selectable ?? false,
+        flex: props.flex,
+        opacity: props.opacity ?? 1,
+    }, []);
+}
+//# sourceMappingURL=Text.js.map

package/packages/ui/dist/typography/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/typography/Text.ts"],"names":[],"mappings":";AAAA,UAAU;AACV,wCAAwC;AACxC,kCAAkC;AAClC,8CAA8C;AAC9C,0CAA0C;AAC1C,wCAAwC;;AAkG/B,oBAAI;AAhGb,2CAA6C;AAoE7C,gCAAgC;AAChC,gCAAgC;AAChC,qCAAqC;AACrC,SAAS,IAAI,CACX,KAAsB,EACtB,QAAmB,EAAE;IAErB,OAAO,IAAA,iBAAU,EAAC,MAAM,EAAE;QACxB,KAAK,EAAW,MAAM,CAAC,KAAK,CAAC;QAC7B,KAAK,EAAW,KAAK,CAAC,KAAK;QAC3B,IAAI,EAAY,KAAK,CAAC,IAAI;QAC1B,MAAM,EAAU,KAAK,CAAC,MAAM;QAC5B,KAAK,EAAW,KAAK,CAAC,KAAK;QAC3B,KAAK,EAAW,KAAK,CAAC,KAAK,IAAY,MAAM;QAC7C,MAAM,EAAU,KAAK,CAAC,MAAM,IAAW,KAAK;QAC5C,SAAS,EAAO,KAAK,CAAC,SAAS,IAAQ,KAAK;QAC5C,aAAa,EAAG,KAAK,CAAC,aAAa,IAAI,KAAK;QAC5C,UAAU,EAAM,KAAK,CAAC,UAAU;QAChC,aAAa,EAAG,KAAK,CAAC,aAAa;QACnC,QAAQ,EAAQ,KAAK,CAAC,QAAQ;QAC9B,QAAQ,EAAQ,KAAK,CAAC,QAAQ,IAAS,UAAU;QACjD,UAAU,EAAM,KAAK,CAAC,UAAU,IAAO,KAAK;QAC5C,IAAI,EAAY,KAAK,CAAC,IAAI;QAC1B,OAAO,EAAS,KAAK,CAAC,OAAO,IAAU,CAAC;KACd,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC"}

package/packages/ui/dist/typography/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Text';
+export * from './Heading';
+export * from './Code';
+export * from './Markdown';
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/dist/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAGA,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}

package/packages/ui/dist/typography/index.js

@@ -0,0 +1,23 @@
+"use strict";
+// index.ts
+// Public door into the typography components.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Text"), exports);
+__exportStar(require("./Heading"), exports);
+__exportStar(require("./Code"), exports);
+__exportStar(require("./Markdown"), exports);
+//# sourceMappingURL=index.js.map

package/packages/ui/dist/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":";AAAA,WAAW;AACX,8CAA8C;;;;;;;;;;;;;;;;AAE9C,yCAAsB;AACtB,4CAAyB;AACzB,yCAAsB;AACtB,6CAA0B"}

package/packages/ui/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@deskforge/ui",
+  "version": "1.0.0",
+  "description": "DeskForge built-in UI component library",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "check": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "@deskforge/core": "1.0.0",
+    "@deskforge/theme": "1.0.0",
+    "@deskforge/state": "1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deskforge/deskforge.git"
+  },
+  "bugs": {
+    "url": "https://github.com/deskforge/deskforge/issues"
+  },
+  "homepage": "https://github.com/deskforge/deskforge#readme"
+}

package/packages/ui/src/charts/BarChart.ts

@@ -0,0 +1,86 @@
+// BarChart.ts
+// Vertical bar chart rendered by Skia.
+// Supports grouped bars for comparison.
+// Bars animate up on load automatically.
+// Tap a bar to get its value and index.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+import type { ChartSeries } from './LineChart'
+
+// Props for the BarChart component
+interface BarChartProps {
+  // Single series data — shorthand
+  data?:        number[]
+
+  // Multiple series for grouped bars
+  series?:      ChartSeries[]
+
+  // X axis category labels
+  labels?:      string[]
+
+  // Primary color for single series
+  color?:       string
+
+  // Whether bars are horizontal instead of vertical
+  horizontal?:  boolean
+
+  // Corner radius on top of bars
+  radius?:      number
+
+  // Gap between bar groups
+  groupGap?:    number
+
+  // Gap between bars in a group
+  barGap?:      number
+
+  // Whether to show grid lines
+  showGrid?:    boolean
+
+  // Whether to show value labels on bars
+  showValues?:  boolean
+
+  // Whether to show legend
+  showLegend?:  boolean
+
+  // Chart height
+  height?:      number
+
+  // Chart width
+  width?:       number | string
+
+  // Whether chart animates on load
+  animate?:     boolean
+
+  // Called when a bar is tapped
+  onBarTap?:    (index: number, value: number) => void
+}
+
+// Creates a bar chart node
+// props — chart configuration
+function BarChart(props: BarChartProps): DFNode {
+  const series: ChartSeries[] = props.series ?? [{
+    label: 'Data',
+    data:  props.data  ?? [],
+    color: props.color ?? 'primary',
+  }]
+
+  return createNode('BarChart', {
+    series,
+    labels:     props.labels     ?? [],
+    horizontal: props.horizontal ?? false,
+    radius:     props.radius     ?? 4,
+    groupGap:   props.groupGap   ?? 8,
+    barGap:     props.barGap     ?? 2,
+    showGrid:   props.showGrid   ?? true,
+    showValues: props.showValues ?? false,
+    showLegend: props.showLegend ?? series.length > 1,
+    height:     props.height     ?? 240,
+    width:      props.width      ?? '100%',
+    animate:    props.animate    ?? true,
+    onBarTap:   props.onBarTap,
+  } as Record<string, unknown>, [])
+}
+
+export type { BarChartProps }
+export { BarChart }

package/packages/ui/src/charts/LineChart.ts

@@ -0,0 +1,98 @@
+// LineChart.ts
+// Line chart component rendered by Skia.
+// No external charting library needed.
+// Smooth curves with optional area fill.
+// Animated on data change automatically.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// A single data series for the chart
+interface ChartSeries {
+  // Series display name for legend
+  label:   string
+
+  // Data points
+  data:    number[]
+
+  // Line and point color
+  color?:  string
+
+  // Whether to fill area below line
+  filled?: boolean
+}
+
+// Props for the LineChart component
+interface LineChartProps {
+  // Single series data — shorthand for one series
+  data?:        number[]
+
+  // Multiple series — use for comparison charts
+  series?:      ChartSeries[]
+
+  // X axis labels
+  labels?:      string[]
+
+  // Chart title
+  title?:       string
+
+  // Primary color for single series
+  color?:       string
+
+  // Whether lines are smooth curves
+  smooth?:      boolean
+
+  // Whether to show data points
+  showPoints?:  boolean
+
+  // Whether to show grid lines
+  showGrid?:    boolean
+
+  // Whether to show legend
+  showLegend?:  boolean
+
+  // Whether to show axis labels
+  showLabels?:  boolean
+
+  // Chart height in pixels
+  height?:      number
+
+  // Chart width — defaults to full width
+  width?:       number | string
+
+  // Whether chart animates on load
+  animate?:     boolean
+
+  // Called when data point is tapped
+  onPointTap?:  (index: number, value: number) => void
+}
+
+// Creates a line chart node
+// Rendered entirely by Skia — no canvas element exposed
+// props — chart configuration
+function LineChart(props: LineChartProps): DFNode {
+  // Normalise to series format
+  const series: ChartSeries[] = props.series ?? [{
+    label:   props.title ?? 'Data',
+    data:    props.data  ?? [],
+    color:   props.color ?? 'primary',
+    filled:  false,
+  }]
+
+  return createNode('LineChart', {
+    series,
+    labels:     props.labels     ?? [],
+    smooth:     props.smooth     ?? true,
+    showPoints: props.showPoints ?? true,
+    showGrid:   props.showGrid   ?? true,
+    showLegend: props.showLegend ?? series.length > 1,
+    showLabels: props.showLabels ?? true,
+    height:     props.height     ?? 240,
+    width:      props.width      ?? '100%',
+    animate:    props.animate    ?? true,
+    onPointTap: props.onPointTap,
+  } as Record<string, unknown>, [])
+}
+
+export type { ChartSeries, LineChartProps }
+export { LineChart }

package/packages/ui/src/charts/index.ts

@@ -0,0 +1,5 @@
+// index.ts
+// Public door into the chart components.
+
+export * from './LineChart'
+export * from './BarChart'

package/packages/ui/src/conditional/If.ts

@@ -0,0 +1,30 @@
+// If.ts
+// Conditional rendering helper.
+// Renders truthy node when condition is true.
+// Renders falsy node when condition is false.
+// Cleaner than inline ternary for complex conditions.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Creates a conditional render node
+// condition — boolean that determines which node shows
+// truthy — rendered when condition is true
+// falsy — rendered when condition is false (optional)
+function If(
+  condition: boolean,
+  truthy:    DFNode,
+  falsy?:    DFNode
+): DFNode {
+  return createNode('If', {
+    condition,
+    // Pass both branches to renderer
+    // Renderer shows only the active branch
+    truthyId:  truthy.id,
+    falsyId:   falsy?.id ?? null,
+  } as Record<string, unknown>,
+  // Both nodes are children so renderer has access
+  falsy ? [truthy, falsy] : [truthy])
+}
+
+export { If }

package/packages/ui/src/data/List.ts

@@ -0,0 +1,72 @@
+// List.ts
+// Renders an array of items as a vertical list.
+// Each item is rendered by the provided render function.
+// Optimised — only re-renders items that changed.
+// For very large lists use VirtualList instead.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+import type { DFStyle } from '@deskforge/theme/'
+
+// Props for the List component
+interface ListProps<T> {
+  // Array of data items to render
+  items:       T[]
+
+  // Function that renders each item
+  // Receives item and index — returns DFNode
+  renderItem:  (item: T, index: number) => DFNode
+
+  // Key extractor for efficient diffing
+  // e.g. (item) => item.id
+  keyExtractor?: (item: T, index: number) => string
+
+  // Gap between list items
+  gap?:          number | string
+
+  // Padding around the list
+  padding?:      number | string
+
+  // Background color
+  background?:   string
+
+  // Full style override
+  style?:        DFStyle
+
+  // Shown when items array is empty
+  empty?:        DFNode
+
+  // Whether list scrolls vertically
+  scroll?:       boolean
+
+  // Max height before scrolling
+  maxHeight?:    number
+}
+
+// Creates a list of rendered items
+// items — data array to render
+// renderItem — function to render each item
+// props — list configuration
+function List<T>(
+  items:      T[],
+  renderItem: (item: T, index: number) => DFNode,
+  props:      Omit<ListProps<T>, 'items' | 'renderItem'> = {}
+): DFNode {
+  // Render all items into DFNodes
+  const renderedItems = items.map((item, index) =>
+    renderItem(item, index)
+  )
+
+  return createNode('List', {
+    gap:          props.gap          ?? 0,
+    padding:      props.padding      ?? 0,
+    background:   props.background   ?? 'transparent',
+    style:        props.style,
+    scroll:       props.scroll       ?? false,
+    maxHeight:    props.maxHeight,
+    itemCount:    items.length,
+  } as Record<string, unknown>, renderedItems)
+}
+
+export type { ListProps }
+export { List }

package/packages/ui/src/data/Table.ts

@@ -0,0 +1,5 @@
+// index.ts
+// Public door into the data components.
+
+export * from './List'
+export * from './Table'

package/packages/ui/src/data/index.ts

@@ -0,0 +1,111 @@
+// Table.ts
+// Data table component with sorting and selection.
+// Renders rows and columns from data arrays.
+// Column headers are sortable by default.
+// Row selection supported for bulk actions.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// A table column definition
+interface TableColumn<T = Record<string, unknown>> {
+  // Column identifier — matches key in row data
+  key:          string
+
+  // Column header label
+  label:        string
+
+  // Whether column is sortable
+  sortable?:    boolean
+
+  // Column width
+  width?:       number | string
+
+  // Custom render function for cell content
+  // If not provided — renders value as text
+  render?:      (value: unknown, row: T) => DFNode | string
+
+  // Text alignment in column
+  align?:       'left' | 'center' | 'right'
+}
+
+// Sort direction
+type SortDirection = 'asc' | 'desc'
+
+// Current sort state
+interface SortState {
+  column:    string
+  direction: SortDirection
+}
+
+// Props for the Table component
+interface TableProps<T = Record<string, unknown>> {
+  // Column definitions
+  columns:      TableColumn<T>[]
+
+  // Row data array
+  rows:         T[]
+
+  // Whether rows are selectable
+  selectable?:  boolean
+
+  // Currently selected row keys
+  selected?:    string[]
+
+  // Called when selection changes
+  onSelect?:    (keys: string[]) => void
+
+  // Key field name in row data
+  // Used to identify rows for selection
+  rowKey?:      string
+
+  // Initial sort state
+  defaultSort?: SortState
+
+  // Called when column header is clicked to sort
+  onSort?:      (sort: SortState) => void
+
+  // Whether table has sticky header
+  stickyHeader?: boolean
+
+  // Maximum height before vertical scroll
+  maxHeight?:   number
+
+  // Shown when rows array is empty
+  empty?:       DFNode
+
+  // Whether to show row borders
+  bordered?:    boolean
+
+  // Whether rows highlight on hover
+  hoverable?:   boolean
+
+  // Background color
+  background?:  string
+}
+
+// Creates a data table node
+// props — table configuration including columns and rows
+function Table<T = Record<string, unknown>>(
+  props: TableProps<T>
+): DFNode {
+  return createNode('Table', {
+    columns:      props.columns,
+    rows:         props.rows,
+    selectable:   props.selectable   ?? false,
+    selected:     props.selected     ?? [],
+    onSelect:     props.onSelect,
+    rowKey:       props.rowKey       ?? 'id',
+    defaultSort:  props.defaultSort,
+    onSort:       props.onSort,
+    stickyHeader: props.stickyHeader ?? true,
+    maxHeight:    props.maxHeight,
+    empty:        props.empty,
+    bordered:     props.bordered     ?? false,
+    hoverable:    props.hoverable    ?? true,
+    background:   props.background   ?? 'surface',
+  } as Record<string, unknown>, [])
+}
+
+export type { TableColumn, SortDirection, SortState, TableProps }
+export { Table }