@f-ewald/components 0.5.0 → 0.7.0

package/dist/chat-message.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+import "./relative-time.js";
+export type ChatMessageRole = "user" | "agent" | "system";
+export type ChatMessageVariant = "normal" | "tool" | "thinking";
+/**
+ * One conversation entry in a chat-style activity feed. Tool calls and
+ * "thinking" traces are variants of this component rather than separate
+ * ones — they share the same header, collapse behavior, and body card as a
+ * normal message, just dimmed and collapsible with an always-visible summary.
+ *
+ * @element chat-message
+ * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).
+ * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.
+ */
+export declare class ChatMessage extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Whose message this is; drives the card background/border. */
+    role: ChatMessageRole;
+    /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */
+    variant: ChatMessageVariant;
+    /** Header label, e.g. "Freddy" or "Architect". */
+    author: string;
+    /** ISO-8601 timestamp, rendered via `relative-time` in the header. */
+    timestamp: string | null;
+    /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */
+    summary: string;
+    /** Whether clicking the header/summary toggles the body slot. */
+    collapsible: boolean;
+    /** Current collapse state (reflected as an attribute). */
+    collapsed: boolean;
+    private _toggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "chat-message": ChatMessage;
+    }
+}
+//# sourceMappingURL=chat-message.d.ts.map

package/dist/chat-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,oBAAoB,CAAC;AAG5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEhE;;;;;;;;;GASG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiEpB;IAEF,gEAAgE;IAC1B,IAAI,EAAE,eAAe,CAAW;IACtE,6FAA6F;IAChE,OAAO,EAAE,kBAAkB,CAAY;IACpE,kDAAkD;IACtC,MAAM,SAAM;IACxB,sEAAsE;IAC1D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC5C,+FAA+F;IACnF,OAAO,SAAM;IACzB,iEAAiE;IACpC,WAAW,UAAS;IACjD,0DAA0D;IACd,SAAS,UAAS;IAE9D,OAAO,CAAC,OAAO;IAMN,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/chat-message.js

@@ -0,0 +1,155 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { iconChevronRight } from "./icons.js";
+import "./relative-time.js";
+import { tokens } from "./tokens.js";
+/**
+ * One conversation entry in a chat-style activity feed. Tool calls and
+ * "thinking" traces are variants of this component rather than separate
+ * ones — they share the same header, collapse behavior, and body card as a
+ * normal message, just dimmed and collapsible with an always-visible summary.
+ *
+ * @element chat-message
+ * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).
+ * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.
+ */
+let ChatMessage = class ChatMessage extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whose message this is; drives the card background/border. */
+        this.role = "agent";
+        /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */
+        this.variant = "normal";
+        /** Header label, e.g. "Freddy" or "Architect". */
+        this.author = "";
+        /** ISO-8601 timestamp, rendered via `relative-time` in the header. */
+        this.timestamp = null;
+        /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */
+        this.summary = "";
+        /** Whether clicking the header/summary toggles the body slot. */
+        this.collapsible = false;
+        /** Current collapse state (reflected as an attribute). */
+        this.collapsed = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size, 0.875rem);
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-size: 0.75rem;
+        color: var(--ui-text-muted, #64748b);
+        margin-bottom: 0.3rem;
+      }
+      .header.clickable {
+        cursor: pointer;
+      }
+      .chevron {
+        display: inline-flex;
+        transition: transform 0.15s ease;
+      }
+      .chevron.expanded {
+        transform: rotate(90deg);
+      }
+      .author {
+        font-weight: 600;
+        color: var(--ui-text, #0f172a);
+      }
+      .summary {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .body-card {
+        border-radius: var(--ui-radius, 0.5rem);
+        padding: 0.6rem 0.8rem;
+        color: var(--ui-text, #0f172a);
+        line-height: 1.5;
+      }
+      .body-card[hidden] {
+        display: none;
+      }
+      :host([role="user"]) .body-card {
+        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #fff));
+      }
+      :host([role="agent"]) .body-card {
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+      }
+      :host([role="system"]) .body-card {
+        padding: 0 0 0 1.1rem;
+        font-size: 0.8rem;
+        color: var(--ui-text-muted, #64748b);
+      }
+      :host([variant="tool"]) .body-card,
+      :host([variant="thinking"]) .body-card {
+        opacity: 0.7;
+        font-size: 0.8rem;
+      }
+      :host([variant="tool"]) .body-card {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+    `,
+    ]; }
+    _toggle() {
+        if (!this.collapsible)
+            return;
+        this.collapsed = !this.collapsed;
+        this.dispatchEvent(new CustomEvent("toggle", { detail: { collapsed: this.collapsed } }));
+    }
+    render() {
+        return html `
+      <div class="header ${this.collapsible ? "clickable" : ""}" @click=${this._toggle}>
+        ${this.collapsible
+            ? html `<span class="chevron ${this.collapsed ? "" : "expanded"}"
+              >${iconChevronRight(12)}</span
+            >`
+            : nothing}
+        ${this.author ? html `<span class="author">${this.author}</span>` : nothing}
+        ${this.timestamp ? html `<relative-time datetime=${this.timestamp}></relative-time>` : nothing}
+        ${this.summary ? html `<span class="summary">${this.summary}</span>` : nothing}
+      </div>
+      <div class="body-card" ?hidden=${this.collapsible && this.collapsed}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], ChatMessage.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], ChatMessage.prototype, "variant", void 0);
+__decorate([
+    property()
+], ChatMessage.prototype, "author", void 0);
+__decorate([
+    property()
+], ChatMessage.prototype, "timestamp", void 0);
+__decorate([
+    property()
+], ChatMessage.prototype, "summary", void 0);
+__decorate([
+    property({ type: Boolean })
+], ChatMessage.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ChatMessage.prototype, "collapsed", void 0);
+ChatMessage = __decorate([
+    customElement("chat-message")
+], ChatMessage);
+export { ChatMessage };
+//# sourceMappingURL=chat-message.js.map

package/dist/chat-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.js","sourceRoot":"","sources":["../src/chat-message.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC;;;;;;;;;GASG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoEL,gEAAgE;QAC1B,SAAI,GAAoB,OAAO,CAAC;QACtE,6FAA6F;QAChE,YAAO,GAAuB,QAAQ,CAAC;QACpE,kDAAkD;QACtC,WAAM,GAAG,EAAE,CAAC;QACxB,sEAAsE;QAC1D,cAAS,GAAkB,IAAI,CAAC;QAC5C,+FAA+F;QACnF,YAAO,GAAG,EAAE,CAAC;QACzB,iEAAiE;QACpC,gBAAW,GAAG,KAAK,CAAC;QACjD,0DAA0D;QACd,cAAS,GAAG,KAAK,CAAC;IAyBhE,CAAC;aAzGiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;KACF,AAjEqB,CAiEpB;IAiBM,OAAO;QACb,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,IAAI,CAAC,OAAO;UAC5E,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iBACvD,gBAAgB,CAAC,EAAE,CAAC;cACvB;YACJ,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,OAAO;UACxE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,OAAO;UAC3F,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,OAAO;;uCAE9C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS;;;KAGpE,CAAC;IACJ,CAAC;CACF,CAAA;AArCuC;IAArC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0C;AAEzC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAwC;AAExD;IAAX,QAAQ,EAAE;2CAAa;AAEZ;IAAX,QAAQ,EAAE;8CAAiC;AAEhC;IAAX,QAAQ,EAAE;4CAAc;AAEI;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAqB;AAEL;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAmB;AAjFnD,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA0GvB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ChatMessageRole = \"user\" | \"agent\" | \"system\";\nexport type ChatMessageVariant = \"normal\" | \"tool\" | \"thinking\";\n\n/**\n * One conversation entry in a chat-style activity feed. Tool calls and\n * \"thinking\" traces are variants of this component rather than separate\n * ones — they share the same header, collapse behavior, and body card as a\n * normal message, just dimmed and collapsible with an always-visible summary.\n *\n * @element chat-message\n * @slot - Message body (consumers slot in already-rendered content, e.g. sanitized markdown HTML).\n * @fires toggle - Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode.\n */\n@customElement(\"chat-message\")\nexport class ChatMessage extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n        font-size: 0.75rem;\n        color: var(--ui-text-muted, #64748b);\n        margin-bottom: 0.3rem;\n      }\n      .header.clickable {\n        cursor: pointer;\n      }\n      .chevron {\n        display: inline-flex;\n        transition: transform 0.15s ease;\n      }\n      .chevron.expanded {\n        transform: rotate(90deg);\n      }\n      .author {\n        font-weight: 600;\n        color: var(--ui-text, #0f172a);\n      }\n      .summary {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .body-card {\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.6rem 0.8rem;\n        color: var(--ui-text, #0f172a);\n        line-height: 1.5;\n      }\n      .body-card[hidden] {\n        display: none;\n      }\n      :host([role=\"user\"]) .body-card {\n        background: color-mix(in srgb, var(--ui-primary, #4f46e5) 8%, var(--ui-surface, #fff));\n      }\n      :host([role=\"agent\"]) .body-card {\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n      }\n      :host([role=\"system\"]) .body-card {\n        padding: 0 0 0 1.1rem;\n        font-size: 0.8rem;\n        color: var(--ui-text-muted, #64748b);\n      }\n      :host([variant=\"tool\"]) .body-card,\n      :host([variant=\"thinking\"]) .body-card {\n        opacity: 0.7;\n        font-size: 0.8rem;\n      }\n      :host([variant=\"tool\"]) .body-card {\n        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      }\n    `,\n  ];\n\n  /** Whose message this is; drives the card background/border. */\n  @property({ reflect: true }) override role: ChatMessageRole = \"agent\";\n  /** `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. */\n  @property({ reflect: true }) variant: ChatMessageVariant = \"normal\";\n  /** Header label, e.g. \"Freddy\" or \"Architect\". */\n  @property() author = \"\";\n  /** ISO-8601 timestamp, rendered via `relative-time` in the header. */\n  @property() timestamp: string | null = null;\n  /** Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). */\n  @property() summary = \"\";\n  /** Whether clicking the header/summary toggles the body slot. */\n  @property({ type: Boolean }) collapsible = false;\n  /** Current collapse state (reflected as an attribute). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  private _toggle() {\n    if (!this.collapsible) return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent(\"toggle\", { detail: { collapsed: this.collapsed } }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"header ${this.collapsible ? \"clickable\" : \"\"}\" @click=${this._toggle}>\n        ${this.collapsible\n          ? html`<span class=\"chevron ${this.collapsed ? \"\" : \"expanded\"}\"\n              >${iconChevronRight(12)}</span\n            >`\n          : nothing}\n        ${this.author ? html`<span class=\"author\">${this.author}</span>` : nothing}\n        ${this.timestamp ? html`<relative-time datetime=${this.timestamp}></relative-time>` : nothing}\n        ${this.summary ? html`<span class=\"summary\">${this.summary}</span>` : nothing}\n      </div>\n      <div class=\"body-card\" ?hidden=${this.collapsible && this.collapsed}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"chat-message\": ChatMessage;\n  }\n}\n"]}

package/dist/data-table.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+/** One column header: `key` is looked up via `renderCell`/`getCellValue`, `label` is the header text. */
+export interface DataTableColumn {
+    key: string;
+    label: string;
+}
+/**
+ * A generic, presentational table shell: renders a `<thead>` from `columns`
+ * and one `<tr>` per entry in `rows`, with each cell's content produced by
+ * `renderCell` (default: plain property lookup on the row object). Knows
+ * nothing about what a "row" means — callers own the data shape entirely.
+ *
+ * Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),
+ * without hijacking clicks on nested interactive elements (links/buttons) a
+ * cell's rendered content might contain.
+ *
+ * @element data-table
+ */
+export declare class DataTable extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Column headers, in display order. */
+    columns: DataTableColumn[];
+    /** Row data; opaque to this component beyond what `renderCell` does with it. */
+    rows: unknown[];
+    /** Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. */
+    rowKey: (row: unknown, index: number) => string | number;
+    /** Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. */
+    renderCell: (row: unknown, key: string) => unknown;
+    /** When set, clicking a row (outside any nested link/button) navigates to this hash. */
+    rowHref: ((row: unknown) => string | null) | null;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "data-table": DataTable;
+    }
+}
+//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,yGAAyG;AACzG,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,UAAU;;IACvC,OAAgB,MAAM,4BA+BpB;IAEF,wCAAwC;IACR,OAAO,EAAE,eAAe,EAAE,CAAM;IAChE,gFAAgF;IAChD,IAAI,EAAE,OAAO,EAAE,CAAM;IACrD,oGAAoG;IACpE,MAAM,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAG7E;IACX,sFAAsF;IACtD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAGvC;IAC3C,wFAAwF;IACxD,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAQ;IAShF,MAAM,yCAwBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/data-table.js

@@ -0,0 +1,119 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+/**
+ * A generic, presentational table shell: renders a `<thead>` from `columns`
+ * and one `<tr>` per entry in `rows`, with each cell's content produced by
+ * `renderCell` (default: plain property lookup on the row object). Knows
+ * nothing about what a "row" means — callers own the data shape entirely.
+ *
+ * Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),
+ * without hijacking clicks on nested interactive elements (links/buttons) a
+ * cell's rendered content might contain.
+ *
+ * @element data-table
+ */
+let DataTable = class DataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Column headers, in display order. */
+        this.columns = [];
+        /** Row data; opaque to this component beyond what `renderCell` does with it. */
+        this.rows = [];
+        /** Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. */
+        this.rowKey = (_row, index) => index;
+        /** Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. */
+        this.renderCell = (row, key) => row[key];
+        /** When set, clicking a row (outside any nested link/button) navigates to this hash. */
+        this.rowHref = null;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      th {
+        text-align: left;
+        font-weight: 600;
+        color: var(--ui-text-muted, #64748b);
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+      }
+      td {
+        padding: 0.6rem 0.75rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+        color: var(--ui-text, #0f172a);
+      }
+      tbody tr.clickable {
+        cursor: pointer;
+      }
+      tbody tr.clickable:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+    `,
+    ]; }
+    #onRowClick(row, e) {
+        if (!this.rowHref)
+            return;
+        if (e.target.closest("a, button"))
+            return;
+        const href = this.rowHref(row);
+        if (href)
+            location.hash = href;
+    }
+    render() {
+        return html `
+      <table>
+        <thead>
+          <tr>
+            ${this.columns.map((c) => html `<th>${c.label}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${repeat(this.rows, (row, i) => this.rowKey(row, i), (row) => html `
+              <tr
+                class=${this.rowHref ? "clickable" : ""}
+                @click=${(e) => this.#onRowClick(row, e)}
+              >
+                ${this.columns.map((c) => html `<td>${this.renderCell(row, c.key) ?? nothing}</td>`)}
+              </tr>
+            `)}
+        </tbody>
+      </table>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], DataTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], DataTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], DataTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: false })
+], DataTable.prototype, "renderCell", void 0);
+__decorate([
+    property({ attribute: false })
+], DataTable.prototype, "rowHref", void 0);
+DataTable = __decorate([
+    customElement("data-table")
+], DataTable);
+export { DataTable };
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQrC;;;;;;;;;;;GAWG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkCL,wCAAwC;QACR,YAAO,GAAsB,EAAE,CAAC;QAChE,gFAAgF;QAChD,SAAI,GAAc,EAAE,CAAC;QACrD,oGAAoG;QACpE,WAAM,GAAqD,CACzF,IAAI,EACJ,KAAK,EACL,EAAE,CAAC,KAAK,CAAC;QACX,sFAAsF;QACtD,eAAU,GAA2C,CACnF,GAAG,EACH,GAAG,EACH,EAAE,CAAE,GAA+B,CAAC,GAAG,CAAC,CAAC;QAC3C,wFAAwF;QACxD,YAAO,GAA6C,IAAI,CAAC;IAkC3F,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;KACF,AA/BqB,CA+BpB;IAmBF,WAAW,CAAC,GAAY,EAAE,CAAa;QACrC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC;YAAE,OAAO;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,IAAI;YAAE,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC;;;;YAIpD,MAAM,CACN,IAAI,CAAC,IAAI,EACT,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,EAC/B,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;yBAC9B,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;;kBAElD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,OAAO,OAAO,CAAC;;aAEtF,CACF;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAhDiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAAiC;AAEhC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uCAAsB;AAErB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCAGpB;AAEqB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAGY;AAEX;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA0D;AAjD9E,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmFrB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** One column header: `key` is looked up via `renderCell`/`getCellValue`, `label` is the header text. */\nexport interface DataTableColumn {\n  key: string;\n  label: string;\n}\n\n/**\n * A generic, presentational table shell: renders a `<thead>` from `columns`\n * and one `<tr>` per entry in `rows`, with each cell's content produced by\n * `renderCell` (default: plain property lookup on the row object). Knows\n * nothing about what a \"row\" means — callers own the data shape entirely.\n *\n * Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),\n * without hijacking clicks on nested interactive elements (links/buttons) a\n * cell's rendered content might contain.\n *\n * @element data-table\n */\n@customElement(\"data-table\")\nexport class DataTable extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      table {\n        width: 100%;\n        border-collapse: collapse;\n      }\n      th {\n        text-align: left;\n        font-weight: 600;\n        color: var(--ui-text-muted, #64748b);\n        padding: 0.5rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n      }\n      td {\n        padding: 0.6rem 0.75rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      tbody tr.clickable {\n        cursor: pointer;\n      }\n      tbody tr.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** Column headers, in display order. */\n  @property({ attribute: false }) columns: DataTableColumn[] = [];\n  /** Row data; opaque to this component beyond what `renderCell` does with it. */\n  @property({ attribute: false }) rows: unknown[] = [];\n  /** Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. */\n  @property({ attribute: false }) rowKey: (row: unknown, index: number) => string | number = (\n    _row,\n    index,\n  ) => index;\n  /** Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. */\n  @property({ attribute: false }) renderCell: (row: unknown, key: string) => unknown = (\n    row,\n    key,\n  ) => (row as Record<string, unknown>)[key];\n  /** When set, clicking a row (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) rowHref: ((row: unknown) => string | null) | null = null;\n\n  #onRowClick(row: unknown, e: MouseEvent): void {\n    if (!this.rowHref) return;\n    if ((e.target as HTMLElement).closest(\"a, button\")) return;\n    const href = this.rowHref(row);\n    if (href) location.hash = href;\n  }\n\n  override render() {\n    return html`\n      <table>\n        <thead>\n          <tr>\n            ${this.columns.map((c) => html`<th>${c.label}</th>`)}\n          </tr>\n        </thead>\n        <tbody>\n          ${repeat(\n            this.rows,\n            (row, i) => this.rowKey(row, i),\n            (row) => html`\n              <tr\n                class=${this.rowHref ? \"clickable\" : \"\"}\n                @click=${(e: MouseEvent) => this.#onRowClick(row, e)}\n              >\n                ${this.columns.map((c) => html`<td>${this.renderCell(row, c.key) ?? nothing}</td>`)}\n              </tr>\n            `,\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"data-table\": DataTable;\n  }\n}\n"]}

package/dist/dropdown-button.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, type PropertyValues } from "lit";
+/** A single menu action. */
+export interface DropdownOption {
+    value: string;
+    label: string;
+}
+/**
+ * A primary-styled button with a label and chevron that opens an anchored
+ * menu of actions — essentially `form-select` minus "current value"
+ * semantics: a menu, not a select. Use for a set of mutually exclusive
+ * next-step actions (e.g. a failed task's Retry / Close / Backlog).
+ *
+ * @element dropdown-button
+ * @fires select - Fired with `{ value: string }` when a menu item is picked.
+ */
+export declare class DropdownButton extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** The trigger button's label. */
+    label: string;
+    /** The menu's actions. */
+    options: DropdownOption[];
+    /** Disables the trigger, preventing the menu from opening. */
+    disabled: boolean;
+    private _open;
+    private _activeIndex;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private renderMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "dropdown-button": DropdownButton;
+    }
+}
+//# sourceMappingURL=dropdown-button.d.ts.map

package/dist/dropdown-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,4BAA4B;AAC5B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;GAQG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAoEpB;IAEF,kCAAkC;IACtB,KAAK,SAAM;IACvB,0BAA0B;IACM,OAAO,EAAE,cAAc,EAAE,CAAM;IAC/D,8DAA8D;IACjC,QAAQ,UAAS;IAErC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAE1B,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IA4CD,OAAO,CAAC,UAAU;IAsBT,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/dropdown-button.js

@@ -0,0 +1,219 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconChevronRight } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * A primary-styled button with a label and chevron that opens an anchored
+ * menu of actions — essentially `form-select` minus "current value"
+ * semantics: a menu, not a select. Use for a set of mutually exclusive
+ * next-step actions (e.g. a failed task's Retry / Close / Backlog).
+ *
+ * @element dropdown-button
+ * @fires select - Fired with `{ value: string }` when a menu item is picked.
+ */
+let DropdownButton = class DropdownButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The trigger button's label. */
+        this.label = "";
+        /** The menu's actions. */
+        this.options = [];
+        /** Disables the trigger, preventing the menu from opening. */
+        this.disabled = false;
+        this._open = false;
+        this._activeIndex = -1;
+        this.#onWindowMousedown = (e) => {
+            if (!e.composedPath().includes(this))
+                this._open = false;
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+      }
+      button.trigger {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+        font: inherit;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: 500;
+        color: #fff;
+        background: var(--ui-primary, #4f46e5);
+        border: 1px solid transparent;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.5rem 0.9rem;
+        cursor: pointer;
+      }
+      button.trigger:hover:not(:disabled) {
+        background: var(--ui-primary-hover, #4338ca);
+      }
+      button.trigger:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      button.trigger:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .chevron {
+        display: flex;
+        transform: rotate(90deg);
+        transition: transform 0.1s ease;
+      }
+      :host([open]) .chevron {
+        transform: rotate(-90deg);
+      }
+      ul.options {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        z-index: 10;
+        min-width: 100%;
+        max-height: 40vh;
+        overflow-y: auto;
+        margin: 2px 0 0;
+        padding: 4px 0;
+        list-style: none;
+        white-space: nowrap;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+      }
+      li {
+        padding: 0.35rem 0.6rem;
+        cursor: pointer;
+        color: var(--ui-text, #0f172a);
+      }
+      li.active,
+      li:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+    `,
+    ]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+    }
+    updated(changed) {
+        if (!changed.has("_open"))
+            return;
+        this.toggleAttribute("open", this._open);
+        if (this._open) {
+            window.addEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+        else {
+            window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+    }
+    #onWindowMousedown;
+    #toggle() {
+        if (this.disabled)
+            return;
+        this._open = !this._open;
+        if (this._open)
+            this._activeIndex = 0;
+    }
+    #select(option) {
+        this._open = false;
+        this.dispatchEvent(new CustomEvent("select", { detail: { value: option.value } }));
+    }
+    #onTriggerKeydown(e) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (!this._open) {
+                this.#toggle();
+                return;
+            }
+            if (e.key === "ArrowDown")
+                this.#moveActive(1);
+            else if (e.key === "ArrowUp")
+                this.#moveActive(-1);
+            else
+                this.#confirmActive();
+        }
+        else if (e.key === "Escape" && this._open) {
+            e.preventDefault();
+            this._open = false;
+        }
+    }
+    #moveActive(delta) {
+        if (this.options.length === 0)
+            return;
+        const n = this.options.length;
+        this._activeIndex = (this._activeIndex + delta + n) % n;
+    }
+    #confirmActive() {
+        const option = this.options[this._activeIndex];
+        if (option)
+            this.#select(option);
+    }
+    renderMenu() {
+        if (!this._open)
+            return nothing;
+        return html `
+      <ul class="options" role="menu">
+        ${this.options.map((o, i) => html `
+            <li
+              role="menuitem"
+              class=${i === this._activeIndex ? "active" : ""}
+              @mousedown=${(e) => {
+            e.preventDefault();
+            this.#select(o);
+        }}
+            >
+              ${o.label}
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+    render() {
+        return html `
+      <button
+        type="button"
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded=${this._open}
+        ?disabled=${this.disabled}
+        @click=${() => this.#toggle()}
+        @keydown=${(e) => this.#onTriggerKeydown(e)}
+      >
+        <span>${this.label}</span>
+        <span class="chevron">${iconChevronRight(14)}</span>
+      </button>
+      ${this.renderMenu()}
+    `;
+    }
+};
+__decorate([
+    property()
+], DropdownButton.prototype, "label", void 0);
+__decorate([
+    property({ attribute: false })
+], DropdownButton.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], DropdownButton.prototype, "disabled", void 0);
+__decorate([
+    state()
+], DropdownButton.prototype, "_open", void 0);
+__decorate([
+    state()
+], DropdownButton.prototype, "_activeIndex", void 0);
+DropdownButton = __decorate([
+    customElement("dropdown-button")
+], DropdownButton);
+export { DropdownButton };
+//# sourceMappingURL=dropdown-button.js.map