@desktalk/ui 0.1.0-alpha.1

package/dist/dt-table-view.d.ts

@@ -0,0 +1,119 @@
+export type DtTableViewAlign = 'left' | 'center' | 'right';
+export type DtTableViewSortDirection = 'asc' | 'desc';
+export interface DtTableViewSortDetail {
+    field: string;
+    direction: DtTableViewSortDirection;
+}
+export interface DtTableViewRowClickDetail<T = unknown> {
+    row: T;
+    index: number;
+}
+export declare class DtColumn extends HTMLElement {
+    static get observedAttributes(): string[];
+    get field(): string;
+    get header(): string;
+    get width(): string;
+    get minWidth(): string;
+    get align(): DtTableViewAlign;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+/**
+ * `<dt-table-view>` — virtualized data table for structured row/column data.
+ *
+ * Columns are declared with child `<dt-column>` elements. Rows are provided via
+ * the JS-only `rows` property. Sorting is event-driven: the component updates
+ * header state and emits `dt-sort`, while the consumer is responsible for
+ * reordering and reassigning `rows`.
+ *
+ * ## Attributes
+ * - `row-height` — fixed row height in px
+ * - `sortable` — when present, enables sortable header cells
+ * - `striped` — when present, alternates row backgrounds
+ * - `bordered` — when present, shows cell borders
+ * - `empty-text` — text shown when there are no rows or no columns
+ *
+ * ## Properties
+ * - `rows` — array of row objects to render
+ *
+ * ## `<dt-column>` attributes
+ * - `field` — row field key
+ * - `header` — header label; defaults to `field`
+ * - `width` — column width in px or `auto`
+ * - `min-width` — minimum column width
+ * - `align` — `left`, `center`, or `right`
+ *
+ * If a `<dt-column>` contains a child `<template>`, that template is cloned for
+ * each cell in the column. Template bindings work the same way as in
+ * `<dt-list-view>`:
+ * - `data-field="status"` sets text content from `row.status`
+ * - `data-field-variant="statusVariant"` sets the `variant` attribute from `row.statusVariant`
+ *
+ * ## Events
+ * - `dt-sort` — fired with `{ field, direction }` when a header is activated
+ * - `dt-row-click` — fired with `{ row, index }` when a body row is clicked
+ *
+ * ## Usage
+ * ```html
+ * <dt-table-view id="processes" row-height="40" sortable striped>
+ *   <dt-column field="name" header="Process" width="220"></dt-column>
+ *   <dt-column field="cpu" header="CPU %" width="100" align="right"></dt-column>
+ *   <dt-column field="status" header="Status" width="140">
+ *     <template>
+ *       <dt-badge data-field="status" data-field-variant="statusVariant"></dt-badge>
+ *     </template>
+ *   </dt-column>
+ * </dt-table-view>
+ * <script>
+ *   const table = document.getElementById('processes');
+ *   const rows = [
+ *     { name: 'node', cpu: '12.4', status: 'running', statusVariant: 'success' },
+ *     { name: 'cron', cpu: '1.2', status: 'idle', statusVariant: 'neutral' },
+ *   ];
+ *   table.rows = rows;
+ *   table.addEventListener('dt-sort', (event) => {
+ *     const { field, direction } = event.detail;
+ *     table.rows = [...rows].sort((a, b) =>
+ *       direction === 'asc'
+ *         ? String(a[field]).localeCompare(String(b[field]), undefined, { numeric: true })
+ *         : String(b[field]).localeCompare(String(a[field]), undefined, { numeric: true }),
+ *     );
+ *   });
+ * </script>
+ * ```
+ */
+export declare class DtTableView extends HTMLElement {
+    private _rows;
+    private _columns;
+    private readonly _virtualizer;
+    private readonly _root;
+    private readonly _scroll;
+    private readonly _header;
+    private readonly _body;
+    private readonly _canvas;
+    private readonly _emptyState;
+    private _resizeObserver;
+    private _mutationObserver;
+    private _sortField;
+    private _sortDirection;
+    static get observedAttributes(): string[];
+    get rows(): unknown[];
+    set rows(value: unknown[]);
+    get rowHeight(): number;
+    set rowHeight(value: number);
+    get sortable(): boolean;
+    get emptyText(): string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private _onScroll;
+    private _syncColumns;
+    private _render;
+    private _renderHeader;
+    private _renderBody;
+    private _renderRow;
+    private _requestSort;
+    private _toGridColumn;
+}
+//# sourceMappingURL=dt-table-view.d.ts.map

package/dist/dt-table-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-table-view.d.ts","sourceRoot":"","sources":["../src/dt-table-view.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,wBAAwB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,wBAAwB,CAAC;CACrC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,OAAO;IACpD,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,KAAK,IAAI,gBAAgB,CAE5B;IAED,iBAAiB,IAAI,IAAI;IAIzB,wBAAwB,IAAI,IAAI;CAGjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBAAa,WAAY,SAAQ,WAAW;IAC1C,OAAO,CAAC,KAAK,CAAiB;IAC9B,OAAO,CAAC,QAAQ,CAA6B;IAC7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAI1B;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;IACvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;IACvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,cAAc,CAAmC;IAEzD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,OAAO,EAAE,CAEpB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,EAIxB;IAED,IAAI,SAAS,IAAI,MAAM,CAGtB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;;IAmCD,iBAAiB,IAAI,IAAI;IAkCzB,oBAAoB,IAAI,IAAI;IAQ5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ5C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAiBf,OAAO,CAAC,aAAa;IA4CrB,OAAO,CAAC,WAAW;IA4BnB,OAAO,CAAC,UAAU;IAwClB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,aAAa;CAStB"}

package/dist/dt-table-view.stories.d.ts

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+type TableViewStoryArgs = {
+    rowHeight: number;
+    sortable: boolean;
+    striped: boolean;
+    bordered: boolean;
+    count: number;
+};
+declare function createTableView(args: TableViewStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        rowHeight: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        count: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        rowHeight: number;
+        sortable: true;
+        striped: true;
+        bordered: false;
+        count: number;
+    };
+    render: typeof createTableView;
+};
+export default meta;
+type Story = StoryObj<TableViewStoryArgs>;
+export declare const Playground: Story;
+export declare const Bordered: Story;
+export declare const DenseRows: Story;
+//# sourceMappingURL=dt-table-view.stories.d.ts.map

package/dist/dt-table-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-table-view.stories.d.ts","sourceRoot":"","sources":["../src/dt-table-view.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AAEjB,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,iBAAS,eAAe,CAAC,IAAI,EAAE,kBAAkB,GAAG,WAAW,CAwD9D;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC"}

package/dist/dt-tooltip.d.ts

@@ -0,0 +1,47 @@
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * `<dt-tooltip>` — framework-agnostic tooltip web component.
+ *
+ * Uses Shadow DOM with a `<slot>` for the trigger element.  The tooltip popup
+ * is appended to `document.body` so it can escape overflow/clip ancestors.
+ *
+ * ## Attributes
+ * - `content`   — tooltip text (required)
+ * - `placement` — preferred side: top | bottom | left | right (default "top")
+ * - `delay`     — show delay in milliseconds (default 0)
+ * - `disabled`  — when present, tooltip is suppressed
+ *
+ * ## Usage
+ * ```html
+ * <dt-tooltip content="Save file" placement="top">
+ *   <button>Save</button>
+ * </dt-tooltip>
+ * ```
+ */
+export declare class DtTooltip extends HTMLElement {
+    private _popup;
+    private _showTimeout;
+    private _tooltipId;
+    private _visible;
+    static get observedAttributes(): string[];
+    get content(): string;
+    set content(val: string);
+    get placement(): Placement;
+    set placement(val: Placement);
+    get delay(): number;
+    set delay(val: number | string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _next: string | null): void;
+    private _onEnter;
+    private _onLeave;
+    private _createPopup;
+    private _hide;
+    private _getTrigger;
+    private _position;
+}
+export {};
+//# sourceMappingURL=dt-tooltip.d.ts.map

package/dist/dt-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-tooltip.d.ts","sourceRoot":"","sources":["../src/dt-tooltip.ts"],"names":[],"mappings":"AAIA,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAerD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,SAAU,SAAQ,WAAW;IAExC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,QAAQ,CAAS;IAGzB,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAGD,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,EAEtB;IAED,IAAI,SAAS,IAAI,SAAS,CAIzB;IACD,IAAI,SAAS,CAAC,GAAG,EAAE,SAAS,EAE3B;IAED,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAE7B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;;IAYD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAQ5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAWvF,OAAO,CAAC,QAAQ,CAgBd;IAEF,OAAO,CAAC,QAAQ,CAEd;IAIF,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,KAAK;IAkBb,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,SAAS;CAkDlB"}

package/dist/dt-tooltip.stories.d.ts

@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+type TooltipStoryArgs = {
+    content: string;
+    delay: number;
+    disabled: boolean;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    triggerLabel: string;
+};
+declare function createTooltip(args: TooltipStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        placement: {
+            control: "inline-radio";
+            options: string[];
+        };
+        delay: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        content: string;
+        delay: number;
+        disabled: false;
+        placement: "top";
+        triggerLabel: string;
+    };
+    render: typeof createTooltip;
+};
+export default meta;
+type Story = StoryObj<TooltipStoryArgs>;
+export declare const Playground: Story;
+export declare const PlacementMatrix: Story;
+//# sourceMappingURL=dt-tooltip.stories.d.ts.map

package/dist/dt-tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-tooltip.stories.d.ts","sourceRoot":"","sources":["../src/dt-tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AAEjB,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAoBF,iBAAS,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,WAAW,CAkB1D;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAyBwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,eAAe,EAAE,KA4C7B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @desktalk/ui — Framework-agnostic web components for the DeskTalk design system.
+ *
+ * Importing this module registers all custom elements.  The shell loads it once;
+ * every miniapp gets the elements for free because they share the same document.
+ */
+import { DtTooltip } from './dt-tooltip';
+import { DtCard } from './dt-card';
+import { DtSelect } from './dt-select';
+import { DtGrid } from './dt-grid';
+import { DtStack } from './dt-stack';
+import { DtStat } from './dt-stat';
+import { DtBadge } from './dt-badge';
+import { DtButton } from './dt-button';
+import { DtDivider } from './dt-divider';
+import { DtColumn, DtTableView } from './dt-table-view';
+import { DtListView } from './dt-list-view';
+import { DtChart } from './dt-chart';
+import { DtMarkdown } from './dt-markdown';
+import { DtMarkdownEditor } from './dt-markdown-editor';
+import './ui-elements';
+export { DtTooltip, DtCard, DtSelect, DtGrid, DtStack, DtStat, DtBadge, DtButton, DtDivider, DtListView, DtTableView, DtColumn, DtChart, DtMarkdown, DtMarkdownEditor, };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,eAAe,CAAC;AAEvB,OAAO,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,QAAQ,EACR,OAAO,EACP,UAAU,EACV,gBAAgB,GACjB,CAAC"}