@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/data-table/data-table.svelte

@@ -0,0 +1,455 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts" generics="Row extends DataTableRow">
+import { tick, untrack } from 'svelte';
+import Checkbox from '../checkbox/checkbox.svelte';
+import TableBody from '../table-body/table-body.svelte';
+import TableCell from '../table-cell/table-cell.svelte';
+import TableHeaderCell from '../table-header-cell/table-header-cell.svelte';
+import TableHeader from '../table-header/table-header.svelte';
+import TableRow from '../table-row/table-row.svelte';
+import TableRoot from '../table/table.svelte';
+import { classNames } from '../../utilities/class-names.ts';
+import { getFixedVirtualWindow, parsePixelLength, resolveVirtualItemHeight, resolveVirtualOverscan, } from '../../utilities/fixed-virtual-window.ts';
+import { useResizeObserver } from '../../utilities/use-resize-observer.svelte.ts';
+let { columns, rows, caption, sort = $bindable(), selectable = 'none', selectedRowIds = $bindable([]), getRowId, isRowSelectionDisabled, selectAllLabel = 'Select all rows', rowSelectionLabel, stickyHeader = false, density = 'comfortable', scrollable = false, virtualized = false, rowHeight = 44, overscan = 5, height = '24rem', stickToBottom = false, onscroll: onScroll, class: className, ...rest } = $props();
+let wrapperElement = $state();
+let scrollOffset = $state(0);
+let measuredViewportHeight = $state(0);
+let captionHeight = $state(0);
+let headerHeight = $state(0);
+let activeRowIndex = $state(0);
+let previousRowCount = 0;
+let hasObservedRowCount = false;
+let shouldStickAfterAppend = false;
+let resetSyncTimeout;
+const initialSelectedRowIds = untrack(() => new Set(selectedRowIds));
+/**
+ * The key of the row-header column. Explicitly set via `column.rowHeader === true`,
+ * or falls back to the first column's key. Used to render `<th scope="row">` on
+ * the appropriate body cell.
+ */
+const rowHeaderKey = $derived((columns.find((column) => column.rowHeader === true) ?? columns[0])?.key);
+const selectionEnabled = $derived(selectable !== 'none');
+const selectedRowIdSet = $derived(new Set(selectedRowIds));
+const selectableRowIds = $derived(rows
+    .map((row, index) => ({
+    id: resolveRowId(row, index),
+    disabled: isRowSelectionDisabled?.(row, index) ?? false,
+}))
+    .filter((row) => !row.disabled)
+    .map((row) => row.id));
+const allRowsSelected = $derived(selectable === 'multiple' &&
+    selectableRowIds.length > 0 &&
+    selectableRowIds.every((id) => selectedRowIdSet.has(id)));
+const someRowsSelected = $derived(selectable === 'multiple' && selectableRowIds.some((id) => selectedRowIdSet.has(id)));
+const shouldVirtualizeRows = $derived(virtualized);
+const resolvedRowHeight = $derived(resolveVirtualItemHeight(rowHeight, 44));
+const resolvedOverscan = $derived(resolveVirtualOverscan(overscan));
+const viewportHeight = $derived(measuredViewportHeight || estimateViewportHeight(height, resolvedRowHeight));
+const virtualWindow = $derived(getFixedVirtualWindow({
+    itemCount: rows.length,
+    itemHeight: resolvedRowHeight,
+    scrollOffset,
+    viewportHeight,
+    overscan: resolvedOverscan,
+}));
+const virtualRows = $derived(shouldVirtualizeRows
+    ? virtualWindow.items.flatMap((virtualItem) => {
+        const row = rows[virtualItem.index];
+        return row === undefined ? [] : [{ ...virtualItem, row }];
+    })
+    : rows.map((row, index) => ({
+        row,
+        index,
+        key: index,
+        start: index * resolvedRowHeight,
+        size: resolvedRowHeight,
+    })));
+const tabbableRowIndex = $derived(getTabbableRowIndex());
+/**
+ * Map a DataTableColumn's `align` value to the value accepted by TableHeaderCell
+ * and TableCell (`'left' | 'center' | 'right'`).
+ */
+function mapAlign(align) {
+    if (align === 'start')
+        return 'left';
+    if (align === 'end')
+        return 'right';
+    if (align === 'center')
+        return 'center';
+    return undefined;
+}
+function resolveRowId(row, index) {
+    if (getRowId)
+        return getRowId(row, index);
+    const candidate = row['id'];
+    if (typeof candidate === 'string' || typeof candidate === 'number')
+        return String(candidate);
+    return String(index);
+}
+function readableRowLabel(row, index) {
+    const customLabel = rowSelectionLabel?.(row, index)?.trim();
+    if (customLabel)
+        return customLabel;
+    const rowHeaderValue = rowHeaderKey ? row[rowHeaderKey] : undefined;
+    if (typeof rowHeaderValue === 'string' || typeof rowHeaderValue === 'number') {
+        return `Select ${rowHeaderValue}`;
+    }
+    return `Select row ${index + 1}`;
+}
+function commitSelectedRowIds(nextSelectedRowIds) {
+    selectedRowIds =
+        selectedRowIds instanceof Set ? new Set(nextSelectedRowIds) : Array.from(nextSelectedRowIds);
+}
+function setRowSelected(row, index, nextSelected) {
+    if (!selectionEnabled || isRowSelectionDisabled?.(row, index))
+        return;
+    const rowId = resolveRowId(row, index);
+    const nextSelectedRowIds = new Set(selectedRowIdSet);
+    if (selectable === 'single') {
+        commitSelectedRowIds(nextSelected ? new Set([rowId]) : new Set());
+        return;
+    }
+    if (nextSelected)
+        nextSelectedRowIds.add(rowId);
+    else
+        nextSelectedRowIds.delete(rowId);
+    commitSelectedRowIds(nextSelectedRowIds);
+}
+function setAllRowsSelected(nextSelected) {
+    if (selectable !== 'multiple')
+        return;
+    const nextSelectedRowIds = new Set(selectedRowIdSet);
+    for (const rowId of selectableRowIds) {
+        if (nextSelected)
+            nextSelectedRowIds.add(rowId);
+        else
+            nextSelectedRowIds.delete(rowId);
+    }
+    commitSelectedRowIds(nextSelectedRowIds);
+}
+function syncSelectionAfterFormReset(event) {
+    if (resetSyncTimeout !== undefined)
+        clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+        resetSyncTimeout = undefined;
+        if (event.defaultPrevented)
+            return;
+        commitSelectedRowIds(initialSelectedRowIds);
+    }, 0);
+}
+$effect(() => {
+    const form = wrapperElement?.closest('form');
+    if (!form || !selectionEnabled)
+        return;
+    form.addEventListener('reset', syncSelectionAfterFormReset);
+    return () => {
+        form.removeEventListener('reset', syncSelectionAfterFormReset);
+        if (resetSyncTimeout !== undefined) {
+            clearTimeout(resetSyncTimeout);
+            resetSyncTimeout = undefined;
+        }
+    };
+});
+$effect(() => {
+    const element = wrapperElement;
+    if (!element || !shouldVirtualizeRows)
+        return;
+    syncScrollMetrics(element);
+});
+// Observe wrapper, caption, and header for size changes when virtualized.
+// The wrapper uses an attachment (see template); caption and header are inner
+// elements that can only be reached via querySelector after mount.
+const observeWrapperResize = useResizeObserver(() => {
+    if (wrapperElement && shouldVirtualizeRows)
+        syncScrollMetrics(wrapperElement);
+});
+$effect(() => {
+    const element = wrapperElement;
+    if (!element || !shouldVirtualizeRows || typeof ResizeObserver === 'undefined')
+        return;
+    const observer = new ResizeObserver(() => syncScrollMetrics(element));
+    const caption = element.querySelector('caption');
+    if (caption)
+        observer.observe(caption);
+    const header = element.querySelector('thead');
+    if (header)
+        observer.observe(header);
+    return () => observer.disconnect();
+});
+$effect.pre(() => {
+    const rowCount = rows.length;
+    const element = wrapperElement;
+    if (!hasObservedRowCount) {
+        previousRowCount = rowCount;
+        hasObservedRowCount = true;
+        shouldStickAfterAppend = false;
+        return;
+    }
+    shouldStickAfterAppend =
+        shouldVirtualizeRows &&
+            stickToBottom &&
+            element !== undefined &&
+            rowCount > previousRowCount &&
+            isAtBottom(element, previousRowCount * resolvedRowHeight, viewportHeight, getTableChromeHeight(captionHeight, headerHeight));
+    previousRowCount = rowCount;
+});
+$effect(() => {
+    const rowCount = rows.length;
+    const element = wrapperElement;
+    if (!shouldVirtualizeRows || !stickToBottom || !shouldStickAfterAppend || !element)
+        return;
+    void tick().then(() => {
+        element.scrollTop = maxScrollTop(rowCount * resolvedRowHeight, viewportHeight, getTableChromeHeight(captionHeight, headerHeight));
+        syncScrollMetrics(element);
+        shouldStickAfterAppend = false;
+    });
+});
+function estimateViewportHeight(value, fallbackRowHeight) {
+    return parsePixelLength(value) ?? fallbackRowHeight * 10;
+}
+function getCaptionHeight(element) {
+    const captionElement = element.querySelector('caption');
+    if (!captionElement)
+        return 0;
+    const rect = captionElement.getBoundingClientRect();
+    return rect.height || captionElement.offsetHeight || 0;
+}
+function getHeaderHeight(element) {
+    const header = element.querySelector('thead');
+    if (!header)
+        return 0;
+    const rect = header.getBoundingClientRect();
+    return rect.height || header.offsetHeight || 0;
+}
+function syncScrollMetrics(element) {
+    const rect = element.getBoundingClientRect();
+    const nextCaptionHeight = getCaptionHeight(element);
+    const nextHeaderHeight = getHeaderHeight(element);
+    measuredViewportHeight =
+        rect.height || element.clientHeight || parsePixelLength(height) || resolvedRowHeight * 10;
+    captionHeight = nextCaptionHeight;
+    headerHeight = nextHeaderHeight;
+    scrollOffset = Math.max(0, element.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight));
+}
+function handleWrapperScroll(event) {
+    if (typeof onScroll === 'function')
+        onScroll(event);
+    if (!shouldVirtualizeRows)
+        return;
+    syncScrollMetrics(event.currentTarget);
+}
+function maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) {
+    return Math.max(0, chromeBlockSize + totalBodyHeight - visibleHeight);
+}
+function getTableChromeHeight(captionBlockSize, headerBlockSize) {
+    return captionBlockSize + headerBlockSize;
+}
+function getBodyScrollOrigin(captionBlockSize, headerBlockSize) {
+    return stickyHeader
+        ? captionBlockSize
+        : getTableChromeHeight(captionBlockSize, headerBlockSize);
+}
+function getTabbableRowIndex() {
+    if (!shouldVirtualizeRows)
+        return activeRowIndex;
+    if (virtualRows.some((virtualRow) => virtualRow.index === activeRowIndex)) {
+        return activeRowIndex;
+    }
+    return virtualRows[0]?.index ?? activeRowIndex;
+}
+function isAtBottom(element, totalBodyHeight, visibleHeight, chromeBlockSize) {
+    return element.scrollTop >= maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) - 1;
+}
+function clampRowIndex(index) {
+    return Math.min(Math.max(0, index), Math.max(0, rows.length - 1));
+}
+function scrollToRow(index) {
+    const element = wrapperElement;
+    if (!element)
+        return;
+    const rowScrollTop = index === 0
+        ? 0
+        : getBodyScrollOrigin(captionHeight, headerHeight) + index * resolvedRowHeight;
+    element.scrollTop = Math.min(maxScrollTop(rows.length * resolvedRowHeight, viewportHeight, getTableChromeHeight(captionHeight, headerHeight)), rowScrollTop);
+    syncScrollMetrics(element);
+}
+function focusRow(index) {
+    const nextIndex = clampRowIndex(index);
+    activeRowIndex = nextIndex;
+    scrollToRow(nextIndex);
+    void tick().then(() => {
+        const row = wrapperElement?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
+        row?.focus({ preventScroll: true });
+    });
+}
+function handleRowFocus(index) {
+    activeRowIndex = clampRowIndex(index);
+}
+function handleRowKeydown(event, index) {
+    if (!shouldVirtualizeRows)
+        return;
+    if (event.key === ' ' && selectionEnabled) {
+        const row = rows[index];
+        if (!row || isRowSelectionDisabled?.(row, index))
+            return;
+        event.preventDefault();
+        setRowSelected(row, index, !selectedRowIdSet.has(resolveRowId(row, index)));
+        return;
+    }
+    if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        focusRow(index + 1);
+        return;
+    }
+    if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        focusRow(index - 1);
+        return;
+    }
+    if (event.key === 'Home') {
+        event.preventDefault();
+        focusRow(0);
+        return;
+    }
+    if (event.key === 'End') {
+        event.preventDefault();
+        focusRow(rows.length - 1);
+    }
+}
+</script>
+
+{#snippet table()}
+  <TableRoot
+    {...caption !== undefined ? { caption } : {}}
+    {...shouldVirtualizeRows ? { 'aria-rowcount': rows.length + 1 } : {}}
+    {stickyHeader}
+    {density}
+    bind:sort
+  >
+    <TableHeader>
+      <TableRow>
+        {#if selectionEnabled}
+          <th
+            scope="col"
+            class="cinder-table__header-cell cinder-table__header-cell--selection"
+            aria-label={selectable === 'single' ? 'Row selection' : undefined}
+          >
+            {#if selectable === 'multiple'}
+              <Checkbox
+                checked={allRowsSelected}
+                indeterminate={someRowsSelected && !allRowsSelected}
+                aria-label={selectAllLabel}
+                class="cinder-table__selection-checkbox"
+                onchange={(event) => {
+                  const input = event.currentTarget as HTMLInputElement;
+                  setAllRowsSelected(input.checked);
+                }}
+              />
+            {/if}
+          </th>
+        {/if}
+        {#each columns as column (column.key)}
+          <TableHeaderCell
+            {...column.sortable ? { column: column.key } : {}}
+            sortable={column.sortable ?? false}
+            align={mapAlign(column.align) ?? 'left'}
+          >
+            {column.label}
+          </TableHeaderCell>
+        {/each}
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <!-- Key by positional index, not the row-header value: row-header values
+           (names, labels, statuses) are display data and are NOT guaranteed
+           unique, so keying by them would corrupt row identity when two rows
+           share a value. DataTable does not reorder rows itself, so the index
+           is a stable identity for the consumer-owned ordering. -->
+      {#if shouldVirtualizeRows && virtualWindow.leadingSize > 0}
+        <tr class="cinder-data-table__virtual-spacer" aria-hidden="true">
+          <td
+            class="cinder-data-table__virtual-spacer-cell"
+            colspan={columns.length + (selectionEnabled ? 1 : 0)}
+            style:height={`${virtualWindow.leadingSize}px`}
+          ></td>
+        </tr>
+      {/if}
+      {#each virtualRows as virtualRow (virtualRow.key)}
+        <TableRow
+          {...shouldVirtualizeRows
+            ? {
+                'aria-rowindex': virtualRow.index + 2,
+                tabindex: tabbableRowIndex === virtualRow.index ? 0 : -1,
+                'data-cinder-virtual-row': 'true',
+                'data-cinder-data-table-row-index': virtualRow.index,
+                onfocus: () => handleRowFocus(virtualRow.index),
+                onkeydown: (event: KeyboardEvent) => handleRowKeydown(event, virtualRow.index),
+              }
+            : {}}
+        >
+          {#if selectionEnabled}
+            {@const rowSelectionDisabled =
+              isRowSelectionDisabled?.(virtualRow.row, virtualRow.index) ?? false}
+            {@const rowId = resolveRowId(virtualRow.row, virtualRow.index)}
+            <td
+              class="cinder-table__cell cinder-table__cell--selection"
+              data-cinder-selection-disabled={rowSelectionDisabled || undefined}
+            >
+              <Checkbox
+                checked={selectedRowIdSet.has(rowId)}
+                disabled={rowSelectionDisabled}
+                aria-label={readableRowLabel(virtualRow.row, virtualRow.index)}
+                class="cinder-table__selection-checkbox"
+                onchange={(event) => {
+                  const input = event.currentTarget as HTMLInputElement;
+                  setRowSelected(virtualRow.row, virtualRow.index, input.checked);
+                }}
+              />
+            </td>
+          {/if}
+          {#each columns as column (column.key)}
+            <TableCell
+              as={column.key === rowHeaderKey ? 'th' : 'td'}
+              align={mapAlign(column.align) ?? 'left'}
+            >
+              {virtualRow.row[column.key]}
+            </TableCell>
+          {/each}
+        </TableRow>
+      {/each}
+      {#if shouldVirtualizeRows && virtualWindow.trailingSize > 0}
+        <tr class="cinder-data-table__virtual-spacer" aria-hidden="true">
+          <td
+            class="cinder-data-table__virtual-spacer-cell"
+            colspan={columns.length + (selectionEnabled ? 1 : 0)}
+            style:height={`${virtualWindow.trailingSize}px`}
+          ></td>
+        </tr>
+      {/if}
+    </TableBody>
+  </TableRoot>
+{/snippet}
+
+<div
+  {...rest}
+  bind:this={wrapperElement}
+  {@attach observeWrapperResize}
+  class={classNames(
+    'cinder-data-table',
+    scrollable || shouldVirtualizeRows ? 'cinder-table-scroll' : undefined,
+    className,
+  )}
+  data-cinder-virtualized={shouldVirtualizeRows ? 'true' : undefined}
+  data-cinder-selectable={selectionEnabled || undefined}
+  style:--cinder-data-table-height={shouldVirtualizeRows ? height : undefined}
+  style:--_cinder-data-table-row-height={shouldVirtualizeRows
+    ? `${resolvedRowHeight}px`
+    : undefined}
+  onscroll={handleWrapperScroll}
+>
+  {@render table()}
+</div>

package/src/components/data-table/data-table.types.ts

@@ -0,0 +1,150 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+import type { TableDensity, TableSort } from '../table/table.types.ts';
+
+/**
+ * A generic record type representing a single data row.
+ * Keys are strings; values may be anything renderable.
+ */
+export type DataTableRow = Record<string, unknown>;
+
+/**
+ * Column descriptor for a DataTable.
+ *
+ * @template Row - The row record type. Defaults to `DataTableRow`.
+ */
+export type DataTableColumn<Row extends DataTableRow = DataTableRow> = {
+  /**
+   * The key used to read the cell value from each row object.
+   * Should be a key of `Row` when Row is a typed record.
+   */
+  key: keyof Row & string;
+  /** Human-readable column label rendered in the `<th scope="col">` header cell. */
+  label: string;
+  /**
+   * When true, the header cell renders a sort button and reports `aria-sort`.
+   * Sort state is controlled by the consumer via the `sort` bindable — DataTable
+   * never reorders rows itself.
+   */
+  sortable?: boolean;
+  /**
+   * Horizontal alignment for both the header and body cells of this column.
+   * - `'start'` maps to left-aligned text (default).
+   * - `'center'` maps to centered text.
+   * - `'end'` maps to right-aligned text with `font-variant-numeric: tabular-nums`.
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * When true, the body cells in this column render as `<th scope="row">` instead
+   * of `<td>`, identifying this column as the row-header for assistive technology.
+   *
+   * At most one column should set `rowHeader: true`. If no column sets it, the
+   * first column automatically acts as the row header.
+   */
+  rowHeader?: boolean;
+};
+
+/** Row-selection mode for DataTable. */
+export type DataTableSelectionMode = 'none' | 'single' | 'multiple';
+
+/**
+ * Props for the DataTable component.
+ *
+ * DataTable is a data-driven convenience wrapper over the compositional Table family.
+ * It accepts an array of column descriptors and row records and renders the correct
+ * semantic table markup automatically. For full compositional control, use Table,
+ * Table.Header, Table.Body, Table.Row, Table.HeaderCell, and Table.Cell directly.
+ *
+ * @template Row - The row record type. Defaults to `DataTableRow`.
+ */
+export type DataTableProps<Row extends DataTableRow = DataTableRow> = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'class'
+> & {
+  /** Column descriptors defining the headers and cell rendering for each column. */
+  columns: DataTableColumn<Row>[];
+  /** Row data. Each entry is read via `column.key` for each column. */
+  rows: Row[];
+  /** Visual caption rendered as a `<caption>` element above the table. */
+  caption?: string;
+  /**
+   * Bound sort state. When the user activates a sortable header cell, this prop
+   * is updated with the new `{ column, direction }`. The consumer is responsible
+   * for reordering `rows` in response — DataTable does not sort internally.
+   *
+   * Pass `undefined` initially when no column is sorted; the component will never
+   * write back `undefined` itself (sort always toggles to a column).
+   */
+  sort?: TableSort | undefined;
+  /**
+   * Enables checkbox-based row selection. `"none"` renders no selection controls,
+   * `"single"` allows one selected row id, and `"multiple"` allows any number.
+   * Selection state is exposed through row checkbox controls; native table rows
+   * do not emit `aria-selected`.
+   * Defaults to `"none"`.
+   */
+  selectable?: DataTableSelectionMode;
+  /**
+   * Bound selected row ids. Arrays stay arrays on update; Sets stay Sets.
+   * When omitted, DataTable starts with an empty array.
+   */
+  selectedRowIds?: string[] | Set<string>;
+  /**
+   * Resolves the stable row id used for selection. Defaults to `row.id` when it
+   * is a string or number, otherwise the row's current positional index.
+   */
+  getRowId?: (row: Row, index: number) => string;
+  /** Returns true when a row should render a disabled selection checkbox. */
+  isRowSelectionDisabled?: (row: Row, index: number) => boolean;
+  /** Accessible label for the multiple-selection header checkbox. */
+  selectAllLabel?: string;
+  /** Accessible label for an individual row selection checkbox. */
+  rowSelectionLabel?: (row: Row, index: number) => string;
+  /** When true, the header sticks to the top of the scrolling container. */
+  stickyHeader?: boolean;
+  /**
+   * Vertical padding density for header and body cells.
+   * Defaults to `'comfortable'`.
+   */
+  density?: TableDensity;
+  /**
+   * When true, wraps the table in a `.cinder-table-scroll` container that
+   * enables horizontal overflow scrolling on small viewports.
+   */
+  scrollable?: boolean;
+  /**
+   * When true, renders only the visible `<tbody>` row window plus spacer rows.
+   * Requires a fixed row height. This is intended for large, append-only tables
+   * such as live logs or event streams.
+   */
+  virtualized?: boolean;
+  /**
+   * Fixed body row height in pixels for virtualized mode.
+   * This must match the actual rendered body row height, including density
+   * padding and any wrapping introduced by the table content.
+   * Defaults to 44.
+   */
+  rowHeight?: number;
+  /**
+   * Extra body rows rendered before and after the visible virtualized window.
+   * Defaults to 5.
+   */
+  overscan?: number;
+  /**
+   * CSS block-size for the virtualized native scroll container.
+   * Defaults to `"24rem"` when `virtualized` is true.
+   */
+  height?: string;
+  /**
+   * When true in virtualized mode, appending rows while scrolled to the bottom
+   * keeps the newest row pinned in view. Appending while scrolled up does not
+   * change the viewport.
+   */
+  stickToBottom?: boolean;
+  /**
+   * Additional class names merged onto DataTable's root wrapper element (the
+   * `<div class="cinder-data-table">` that contains the table). To style the
+   * `<table>` itself, target `.cinder-data-table table` from this class.
+   */
+  class?: string;
+};

package/src/components/data-table/data-table.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = ['--cinder-data-table-height'];
+
+export default variables;

package/src/components/data-table/index.ts

@@ -0,0 +1,11 @@
+import './data-table.css';
+import DataTable from './data-table.svelte';
+
+export default DataTable;
+export type {
+  DataTableColumn,
+  DataTableProps,
+  DataTableRow,
+  DataTableSelectionMode,
+} from './data-table.types.ts';
+export { DataTable };

package/src/components/date-picker/date-picker.schema.ts

@@ -0,0 +1,65 @@
+import type { ComponentSchema } from '../../schema-types';
+
+const schema = {
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      description: 'Stable id for label/input/error wiring.',
+    },
+    placeholder: {
+      type: 'string',
+      description: 'Placeholder shown when empty.',
+    },
+    value: {
+      type: 'string',
+      description: 'Controlled value as local ISO string. Bindable.',
+    },
+    label: {
+      type: 'string',
+      description: 'Field label text.',
+    },
+    granularity: {
+      enum: ['day', 'hour', 'minute', 'second'],
+      description: 'Date-time precision. Defaults to day.',
+    },
+    min: {
+      type: 'string',
+      description: 'Minimum allowed value (same format as `value`).',
+    },
+    max: {
+      type: 'string',
+      description: 'Maximum allowed value (same format as `value`).',
+    },
+    description: {
+      type: 'string',
+      description: 'Optional helper text.',
+    },
+    error: {
+      type: 'string',
+      description: 'Optional validation error text.',
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Disable interaction.',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional classes for the root.',
+    },
+  },
+  additionalProperties: false,
+  required: ['id'],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: 'onchange',
+        reason: 'function-or-snippet',
+        description: 'Called when the value changes.',
+      },
+    ],
+  },
+} satisfies ComponentSchema;
+
+export default schema as ComponentSchema;