@f-ewald/components 0.5.0 → 0.6.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/editable-text.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+/**
+ * Jira/GitHub-style click-to-edit text: a display span that turns into an
+ * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The
+ * input/textarea inherits the host's font, so a title wrapped in an `<h1>`
+ * edits at title size.
+ *
+ * @element editable-text
+ * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.
+ */
+export declare class EditableText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Current text. */
+    value: string;
+    /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */
+    multiline: boolean;
+    /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */
+    placeholder: string;
+    /** Disables entering edit mode. */
+    readonly: boolean;
+    /** `aria-label` applied to the input/textarea. */
+    label: string;
+    private _editing;
+    private _draft;
+    private _field?;
+    /** Enters edit mode, seeding the draft from the current value. */
+    private _startEdit;
+    /** Commits the draft (reverting an empty single-line commit) and exits edit mode.
+     *
+     * Guarded on `_editing`: removing the focused input/textarea from the DOM
+     * (which happens as soon as `_editing` flips to false) makes the browser
+     * fire a native `blur` on it, re-invoking this handler a second time after
+     * a cancel already ran — the guard makes that second call a no-op instead
+     * of re-committing the stale draft.
+     */
+    private _commit;
+    /** Discards the draft and exits edit mode without committing. */
+    private _cancel;
+    private _onInput;
+    private _onSingleLineKeydown;
+    private _onMultilineKeydown;
+    /** Grows the textarea's height to fit its content. */
+    private _resize;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "editable-text": EditableText;
+    }
+}
+//# sourceMappingURL=editable-text.d.ts.map

package/dist/editable-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuDpB;IAEF,oBAAoB;IACR,KAAK,SAAM;IACvB,yEAAyE;IAC5C,SAAS,UAAS;IAC/C,0FAA0F;IAC9E,WAAW,SAAM;IAC7B,mCAAmC;IACN,QAAQ,UAAS;IAC9C,kDAAkD;IACtC,KAAK,SAAM;IAEd,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAM;IAEH,OAAO,CAAC,MAAM,CAAC,CAAyC;IAElF,kEAAkE;IAClE,OAAO,CAAC,UAAU;IAMlB;;;;;;;OAOG;IACH,OAAO,CAAC,OAAO;IAUf,iEAAiE;IACjE,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAU3B,sDAAsD;IACtD,OAAO,CAAC,OAAO;IAOf,UAAmB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QASvD;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/editable-text.js

@@ -0,0 +1,224 @@
+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, query, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Jira/GitHub-style click-to-edit text: a display span that turns into an
+ * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The
+ * input/textarea inherits the host's font, so a title wrapped in an `<h1>`
+ * edits at title size.
+ *
+ * @element editable-text
+ * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.
+ */
+let EditableText = class EditableText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current text. */
+        this.value = "";
+        /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */
+        this.multiline = false;
+        /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */
+        this.placeholder = "";
+        /** Disables entering edit mode. */
+        this.readonly = false;
+        /** `aria-label` applied to the input/textarea. */
+        this.label = "";
+        this._editing = false;
+        this._draft = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+      .display {
+        cursor: text;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.1rem 0.3rem;
+        margin: -0.1rem -0.3rem;
+      }
+      .display.multiline {
+        white-space: pre-wrap;
+      }
+      .display:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .display.empty {
+        color: var(--ui-text-muted, #64748b);
+      }
+      .display.readonly {
+        cursor: inherit;
+      }
+      .display.readonly:hover {
+        background: none;
+      }
+      input,
+      textarea {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        font: inherit;
+        color: inherit;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.1rem 0.3rem;
+        margin: -0.1rem -0.3rem;
+        outline: none;
+      }
+      input:focus,
+      textarea:focus {
+        border-color: var(--ui-primary, #4f46e5);
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      textarea {
+        resize: none;
+        overflow: hidden;
+      }
+    `,
+    ]; }
+    /** Enters edit mode, seeding the draft from the current value. */
+    _startEdit() {
+        if (this.readonly)
+            return;
+        this._draft = this.value;
+        this._editing = true;
+    }
+    /** Commits the draft (reverting an empty single-line commit) and exits edit mode.
+     *
+     * Guarded on `_editing`: removing the focused input/textarea from the DOM
+     * (which happens as soon as `_editing` flips to false) makes the browser
+     * fire a native `blur` on it, re-invoking this handler a second time after
+     * a cancel already ran — the guard makes that second call a no-op instead
+     * of re-committing the stale draft.
+     */
+    _commit() {
+        if (!this._editing)
+            return;
+        const next = this._draft;
+        this._editing = false;
+        if (!this.multiline && next.trim() === "")
+            return;
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: next } }));
+    }
+    /** Discards the draft and exits edit mode without committing. */
+    _cancel() {
+        this._editing = false;
+    }
+    _onInput(e) {
+        this._draft = e.target.value;
+        if (this.multiline)
+            this._resize();
+    }
+    _onSingleLineKeydown(e) {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this._commit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            this._cancel();
+        }
+    }
+    _onMultilineKeydown(e) {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            this._cancel();
+        }
+        else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this._commit();
+        }
+    }
+    /** Grows the textarea's height to fit its content. */
+    _resize() {
+        const field = this._field;
+        if (!field)
+            return;
+        field.style.height = "auto";
+        field.style.height = `${field.scrollHeight}px`;
+    }
+    updated(changed) {
+        if (changed.has("_editing") && this._editing) {
+            const field = this._field;
+            if (!field)
+                return;
+            field.focus();
+            const end = field.value.length;
+            field.setSelectionRange(end, end);
+            if (this.multiline)
+                this._resize();
+        }
+    }
+    render() {
+        if (this._editing) {
+            return this.multiline
+                ? html `<textarea
+            rows="3"
+            .value=${this._draft}
+            placeholder=${this.placeholder}
+            aria-label=${this.label || nothing}
+            @input=${this._onInput}
+            @keydown=${this._onMultilineKeydown}
+            @blur=${this._commit}
+          ></textarea>`
+                : html `<input
+            type="text"
+            .value=${this._draft}
+            placeholder=${this.placeholder}
+            aria-label=${this.label || nothing}
+            @input=${this._onInput}
+            @keydown=${this._onSingleLineKeydown}
+            @blur=${this._commit}
+          />`;
+        }
+        const isEmpty = this.value.trim() === "";
+        const classes = `display ${this.multiline ? "multiline" : ""} ${isEmpty ? "empty" : ""} ${this.readonly ? "readonly" : ""}`;
+        return html `<span class=${classes} @click=${this._startEdit}
+      >${isEmpty ? this.placeholder : this.value}</span
+    >`;
+    }
+};
+__decorate([
+    property()
+], EditableText.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], EditableText.prototype, "multiline", void 0);
+__decorate([
+    property()
+], EditableText.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], EditableText.prototype, "readonly", void 0);
+__decorate([
+    property()
+], EditableText.prototype, "label", void 0);
+__decorate([
+    state()
+], EditableText.prototype, "_editing", void 0);
+__decorate([
+    state()
+], EditableText.prototype, "_draft", void 0);
+__decorate([
+    query("input, textarea")
+], EditableText.prototype, "_field", void 0);
+EditableText = __decorate([
+    customElement("editable-text")
+], EditableText);
+export { EditableText };
+//# sourceMappingURL=editable-text.js.map