@f-ewald/components 0.1.0

package/dist/percent-bar-chart.js

@@ -0,0 +1,92 @@
+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, svg } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { scaleLinear } from "d3-scale";
+import { tokens } from "./tokens.js";
+const ROW_H = 20;
+const LABEL_W = 56;
+const PCT_W = 36;
+const PAD = { top: 4, right: 4, bottom: 4, left: 4 };
+/**
+ * Horizontal bar chart for labeled percentage rows, using D3's linear scale.
+ * Each group gets its own labeled row; bars are proportional to percentage of 100.
+ *
+ * @element percent-bar-chart
+ */
+let PercentBarChart = class PercentBarChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Rows to render, one per group. */
+        this.groups = [];
+        this._width = 0;
+        this._ro = null;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+      svg {
+        display: block;
+        overflow: visible;
+      }
+    `,
+    ]; }
+    firstUpdated() {
+        this._ro = new ResizeObserver((entries) => {
+            const w = Math.floor(entries[0].contentRect.width);
+            if (w > 0 && w !== this._width)
+                this._width = w;
+        });
+        this._ro.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._ro?.disconnect();
+        this._ro = null;
+    }
+    render() {
+        if (this._width === 0 || this.groups.length === 0)
+            return html ``;
+        const innerW = this._width - PAD.left - PAD.right;
+        const barMaxW = innerW - LABEL_W - PCT_W;
+        const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;
+        const xScale = scaleLinear().domain([0, 100]).range([0, barMaxW]);
+        const rows = this.groups.map((g, i) => {
+            const cy = PAD.top + i * ROW_H + ROW_H / 2;
+            const bw = Math.max(0, xScale(g.pct));
+            return svg `
+        <text x=${PAD.left} y=${cy} font-size="10" fill="#64748b"
+              text-anchor="start" dominant-baseline="middle">${g.label}</text>
+        <rect x=${PAD.left + LABEL_W} y=${cy - 5}
+              width=${bw} height="10" rx="2"
+              fill=${g.color} fill-opacity="0.82" />
+        <text x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size="10" fill="#64748b"
+              text-anchor="start" dominant-baseline="middle">${g.pct.toFixed(1)}%</text>
+      `;
+        });
+        return html `
+      <svg viewBox="0 0 ${this._width} ${svgH}" width=${this._width} height=${svgH}>
+        ${rows}
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], PercentBarChart.prototype, "groups", void 0);
+__decorate([
+    state()
+], PercentBarChart.prototype, "_width", void 0);
+PercentBarChart = __decorate([
+    customElement("percent-bar-chart")
+], PercentBarChart);
+export { PercentBarChart };
+//# sourceMappingURL=percent-bar-chart.js.map

package/dist/percent-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percent-bar-chart.js","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { scaleLinear } from \"d3-scale\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface PercentBarGroup {\n  key: string;\n  label: string;\n  pct: number;\n  color: string;\n}\n\nconst ROW_H = 20;\nconst LABEL_W = 56;\nconst PCT_W = 36;\nconst PAD = { top: 4, right: 4, bottom: 4, left: 4 };\n\n/**\n * Horizontal bar chart for labeled percentage rows, using D3's linear scale.\n * Each group gets its own labeled row; bars are proportional to percentage of 100.\n *\n * @element percent-bar-chart\n */\n@customElement(\"percent-bar-chart\")\nexport class PercentBarChart extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      svg {\n        display: block;\n        overflow: visible;\n      }\n    `,\n  ];\n\n  /** Rows to render, one per group. */\n  @property({ attribute: false }) groups: PercentBarGroup[] = [];\n  @state() private _width = 0;\n\n  private _ro: ResizeObserver | null = null;\n\n  override firstUpdated() {\n    this._ro = new ResizeObserver((entries) => {\n      const w = Math.floor(entries[0].contentRect.width);\n      if (w > 0 && w !== this._width) this._width = w;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  override render() {\n    if (this._width === 0 || this.groups.length === 0) return html``;\n\n    const innerW = this._width - PAD.left - PAD.right;\n    const barMaxW = innerW - LABEL_W - PCT_W;\n    const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;\n\n    const xScale = scaleLinear().domain([0, 100]).range([0, barMaxW]);\n\n    const rows = this.groups.map((g, i) => {\n      const cy = PAD.top + i * ROW_H + ROW_H / 2;\n      const bw = Math.max(0, xScale(g.pct));\n      return svg`\n        <text x=${PAD.left} y=${cy} font-size=\"10\" fill=\"#64748b\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${g.label}</text>\n        <rect x=${PAD.left + LABEL_W} y=${cy - 5}\n              width=${bw} height=\"10\" rx=\"2\"\n              fill=${g.color} fill-opacity=\"0.82\" />\n        <text x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size=\"10\" fill=\"#64748b\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${g.pct.toFixed(1)}%</text>\n      `;\n    });\n\n    return html`\n      <svg viewBox=\"0 0 ${this._width} ${svgH}\" width=${this._width} height=${svgH}>\n        ${rows}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"percent-bar-chart\": PercentBarChart;\n  }\n}\n"]}

package/dist/price-history-chart.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from "lit";
+export interface PricePoint {
+    date: string | null;
+    price: number | null;
+    eventType: string;
+    source?: string | null;
+}
+/**
+ * D3-powered SVG line chart for property price history.
+ *
+ * Uses scaleTime (X) + scaleLinear (Y) from d3-scale and line/area path
+ * generators from d3-shape. Adapts to container width via ResizeObserver.
+ *
+ * @element price-history-chart
+ * @prop history - Array of price points (points with null price/date are skipped).
+ * @prop yLabels - "auto" (default) | "always" | "never"
+ * @prop maxXLabels - Max X-axis date ticks (default 3).
+ */
+export declare class PriceHistoryChart extends LitElement {
+    history: PricePoint[];
+    yLabels: "auto" | "always" | "never";
+    maxXLabels: number;
+    private _width;
+    private _hoveredIdx;
+    private _ro;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get validPoints();
+    private get showY();
+    static styles: import("lit").CSSResult[];
+    private computeLayout;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "price-history-chart": PriceHistoryChart;
+    }
+}
+//# sourceMappingURL=price-history-chart.d.ts.map

package/dist/price-history-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-history-chart.d.ts","sourceRoot":"","sources":["../src/price-history-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOjD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAiBD;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACpB,OAAO,EAAE,UAAU,EAAE,CAAM;IACjB,OAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAU;IAC5B,UAAU,SAAK;IAE7D,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,WAAW,CAAuB;IAEnD,OAAO,CAAC,GAAG,CAA+B;IAEjC,iBAAiB,SAOzB;IAEQ,oBAAoB,SAI5B;IAED,OAAO,KAAK,WAAW,GAItB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAgB,MAAM,4BAgBpB;IAEF,OAAO,CAAC,aAAa;IA8CZ,MAAM,yCAgFd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/price-history-chart.js

@@ -0,0 +1,217 @@
+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, svg } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { scaleTime, scaleLinear } from "d3-scale";
+import { line, area } from "d3-shape";
+import { min, max } from "d3-array";
+import { tokens } from "./tokens.js";
+function fmtMoney(n) {
+    return `$${n.toLocaleString("en-US")}`;
+}
+function fmtMoneyShort(n) {
+    if (n >= 1_000_000)
+        return `$${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000)
+        return `$${Math.round(n / 1_000)}K`;
+    return `$${n.toLocaleString("en-US")}`;
+}
+/**
+ * D3-powered SVG line chart for property price history.
+ *
+ * Uses scaleTime (X) + scaleLinear (Y) from d3-scale and line/area path
+ * generators from d3-shape. Adapts to container width via ResizeObserver.
+ *
+ * @element price-history-chart
+ * @prop history - Array of price points (points with null price/date are skipped).
+ * @prop yLabels - "auto" (default) | "always" | "never"
+ * @prop maxXLabels - Max X-axis date ticks (default 3).
+ */
+let PriceHistoryChart = class PriceHistoryChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.history = [];
+        this.yLabels = "auto";
+        this.maxXLabels = 3;
+        this._width = 0;
+        this._hoveredIdx = null;
+        this._ro = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._ro = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                this._width = entry.contentRect.width;
+        });
+        this._ro.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._ro?.disconnect();
+        this._ro = null;
+    }
+    get validPoints() {
+        return this.history
+            .filter((h) => h.price != null && h.date != null)
+            .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    }
+    get showY() {
+        return this.yLabels === "always" || (this.yLabels === "auto" && this._width >= 260);
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+      .wrap {
+        position: relative;
+        width: 100%;
+      }
+      svg {
+        display: block;
+        overflow: visible;
+      }
+    `,
+    ]; }
+    computeLayout() {
+        if (this._width < 10)
+            return null;
+        const points = this.validPoints;
+        if (points.length < 2)
+            return null;
+        const H = 180;
+        const MT = 20;
+        const MB = 30;
+        const MR = 12;
+        const ML = this.showY ? 56 : 12;
+        const plotW = Math.max(this._width - ML - MR, 1);
+        const plotH = Math.max(H - MT - MB, 1);
+        const bottomY = MT + plotH;
+        const prices = points.map((p) => p.price);
+        const dates = points.map((p) => new Date(p.date));
+        const minPrice = min(prices);
+        const maxPrice = max(prices);
+        const pad = (maxPrice - minPrice) * 0.05 || maxPrice * 0.05;
+        const xScale = scaleTime()
+            .domain([min(dates), max(dates)])
+            .range([ML, ML + plotW]);
+        const yScale = scaleLinear()
+            .domain([minPrice - pad, maxPrice + pad])
+            .range([bottomY, MT]);
+        const lineFn = line()
+            .x((p) => xScale(new Date(p.date)))
+            .y((p) => yScale(p.price));
+        const areaFn = area()
+            .x((p) => xScale(new Date(p.date)))
+            .y0(bottomY)
+            .y1((p) => yScale(p.price));
+        const plotted = points.map((p) => ({
+            ...p,
+            x: xScale(new Date(p.date)),
+            y: yScale(p.price),
+        }));
+        return { points, plotted, H, MT, ML, MR, plotW, plotH, bottomY, minPrice, maxPrice, xScale, yScale, lineFn, areaFn };
+    }
+    render() {
+        const layout = this.computeLayout();
+        if (!layout)
+            return html ``;
+        const { points, plotted, H, MT, ML, MR, plotW, plotH, xScale, yScale, lineFn, areaFn } = layout;
+        const lineD = lineFn(points) ?? "";
+        const areaD = areaFn(points) ?? "";
+        const hIdx = this._hoveredIdx;
+        const hovPt = hIdx !== null ? plotted[hIdx] : null;
+        const tooltipEl = hovPt ? (() => {
+            const tipText = `${fmtMoney(hovPt.price)} · ${hovPt.date ? new Date(hovPt.date).toLocaleDateString("en-US", { month: "short", year: "numeric" }) : ""} · ${hovPt.eventType}`;
+            const tipW = Math.min(tipText.length * 6.5 + 16, this._width - ML - MR);
+            const tipH = 24;
+            const tipGap = 8;
+            const above = hovPt.y > plotH / 2 + MT;
+            const tipRectY = above ? hovPt.y - tipGap - tipH : hovPt.y + tipGap;
+            const tipX = Math.min(Math.max(hovPt.x - tipW / 2, ML), this._width - MR - tipW);
+            return svg `
+        <g pointer-events="none">
+          <rect x="${tipX}" y="${tipRectY}" width="${tipW}" height="${tipH}"
+                rx="4" fill="rgba(15,23,42,0.88)" />
+          <text x="${tipX + tipW / 2}" y="${tipRectY + 15.5}"
+                text-anchor="middle" fill="white" font-size="11"
+                font-family="ui-sans-serif,system-ui,sans-serif">${tipText}</text>
+        </g>
+      `;
+        })() : "";
+        const xTicks = xScale.ticks(this.maxXLabels).map((d, i, arr) => {
+            const x = xScale(d);
+            const label = d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+            const anchor = i === 0 ? "start" : i === arr.length - 1 ? "end" : "middle";
+            return svg `
+        <text x="${x}" y="${H - 6}" text-anchor="${anchor}" font-size="10" fill="#64748b"
+              font-family="ui-sans-serif,system-ui,sans-serif">${label}</text>
+      `;
+        });
+        const yTicks = this.showY ? yScale.ticks(3).map((v, i, arr) => {
+            const y = yScale(v);
+            const isFirst = i === 0;
+            const isLast = i === arr.length - 1;
+            return svg `
+        <line x1="${ML - 4}" y1="${y}" x2="${ML + plotW}" y2="${y}"
+              stroke="#e2e8f0" stroke-width="1" />
+        ${isFirst || isLast ? svg `
+          <text x="${ML - 6}" y="${y + 4}" text-anchor="end" font-size="10" fill="#64748b"
+                font-family="ui-sans-serif,system-ui,sans-serif">${fmtMoneyShort(v)}</text>
+        ` : ""}
+      `;
+        }) : [];
+        return html `
+      <div class="wrap">
+        <svg width="${this._width}" height="${H}">
+          <defs>
+            <linearGradient id="phg" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.25" />
+              <stop offset="100%" stop-color="#4f46e5" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          ${yTicks}
+          <path d="${areaD}" fill="url(#phg)" />
+          <path d="${lineD}" fill="none" stroke="#4f46e5" stroke-width="2.5"
+                stroke-linejoin="round" stroke-linecap="round" />
+          ${plotted.map((p, i) => svg `
+            <circle cx="${p.x}" cy="${p.y}" r="${i === hIdx ? 7 : 5}"
+                    fill="#4f46e5" stroke="#fff" stroke-width="2"
+                    style="cursor:pointer"
+                    @pointerenter=${() => { this._hoveredIdx = i; }}
+                    @pointerleave=${() => { this._hoveredIdx = null; }} />
+          `)}
+          ${xTicks}
+          ${tooltipEl}
+        </svg>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], PriceHistoryChart.prototype, "history", void 0);
+__decorate([
+    property({ attribute: "y-labels" })
+], PriceHistoryChart.prototype, "yLabels", void 0);
+__decorate([
+    property({ type: Number, attribute: "max-x-labels" })
+], PriceHistoryChart.prototype, "maxXLabels", void 0);
+__decorate([
+    state()
+], PriceHistoryChart.prototype, "_width", void 0);
+__decorate([
+    state()
+], PriceHistoryChart.prototype, "_hoveredIdx", void 0);
+PriceHistoryChart = __decorate([
+    customElement("price-history-chart")
+], PriceHistoryChart);
+export { PriceHistoryChart };
+//# sourceMappingURL=price-history-chart.js.map

package/dist/price-history-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-history-chart.js","sourceRoot":"","sources":["../src/price-history-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { scaleTime, scaleLinear } from \"d3-scale\";\nimport { line, area } from \"d3-shape\";\nimport { min, max } from \"d3-array\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface PricePoint {\n  date: string | null;\n  price: number | null;\n  eventType: string;\n  source?: string | null;\n}\n\ninterface PlottedPoint extends PricePoint {\n  x: number;\n  y: number;\n}\n\nfunction fmtMoney(n: number): string {\n  return `$${n.toLocaleString(\"en-US\")}`;\n}\n\nfunction fmtMoneyShort(n: number): string {\n  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `$${Math.round(n / 1_000)}K`;\n  return `$${n.toLocaleString(\"en-US\")}`;\n}\n\n/**\n * D3-powered SVG line chart for property price history.\n *\n * Uses scaleTime (X) + scaleLinear (Y) from d3-scale and line/area path\n * generators from d3-shape. Adapts to container width via ResizeObserver.\n *\n * @element price-history-chart\n * @prop history - Array of price points (points with null price/date are skipped).\n * @prop yLabels - \"auto\" (default) | \"always\" | \"never\"\n * @prop maxXLabels - Max X-axis date ticks (default 3).\n */\n@customElement(\"price-history-chart\")\nexport class PriceHistoryChart extends LitElement {\n  @property({ type: Array }) history: PricePoint[] = [];\n  @property({ attribute: \"y-labels\" }) yLabels: \"auto\" | \"always\" | \"never\" = \"auto\";\n  @property({ type: Number, attribute: \"max-x-labels\" }) maxXLabels = 3;\n\n  @state() private _width = 0;\n  @state() private _hoveredIdx: number | null = null;\n\n  private _ro: ResizeObserver | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._ro = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) this._width = entry.contentRect.width;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  private get validPoints(): PricePoint[] {\n    return this.history\n      .filter((h) => h.price != null && h.date != null)\n      .sort((a, b) => new Date(a.date!).getTime() - new Date(b.date!).getTime());\n  }\n\n  private get showY(): boolean {\n    return this.yLabels === \"always\" || (this.yLabels === \"auto\" && this._width >= 260);\n  }\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      .wrap {\n        position: relative;\n        width: 100%;\n      }\n      svg {\n        display: block;\n        overflow: visible;\n      }\n    `,\n  ];\n\n  private computeLayout() {\n    if (this._width < 10) return null;\n    const points = this.validPoints;\n    if (points.length < 2) return null;\n\n    const H = 180;\n    const MT = 20;\n    const MB = 30;\n    const MR = 12;\n    const ML = this.showY ? 56 : 12;\n    const plotW = Math.max(this._width - ML - MR, 1);\n    const plotH = Math.max(H - MT - MB, 1);\n    const bottomY = MT + plotH;\n\n    const prices = points.map((p) => p.price!);\n    const dates = points.map((p) => new Date(p.date!));\n    const minPrice = min(prices)!;\n    const maxPrice = max(prices)!;\n    const pad = (maxPrice - minPrice) * 0.05 || maxPrice * 0.05;\n\n    const xScale = scaleTime()\n      .domain([min(dates)!, max(dates)!])\n      .range([ML, ML + plotW]);\n\n    const yScale = scaleLinear()\n      .domain([minPrice - pad, maxPrice + pad])\n      .range([bottomY, MT]);\n\n    const lineFn = line<PricePoint>()\n      .x((p) => xScale(new Date(p.date!)))\n      .y((p) => yScale(p.price!));\n\n    const areaFn = area<PricePoint>()\n      .x((p) => xScale(new Date(p.date!)))\n      .y0(bottomY)\n      .y1((p) => yScale(p.price!));\n\n    const plotted: PlottedPoint[] = points.map((p) => ({\n      ...p,\n      x: xScale(new Date(p.date!)),\n      y: yScale(p.price!),\n    }));\n\n    return { points, plotted, H, MT, ML, MR, plotW, plotH, bottomY, minPrice, maxPrice, xScale, yScale, lineFn, areaFn };\n  }\n\n  override render() {\n    const layout = this.computeLayout();\n    if (!layout) return html``;\n\n    const { points, plotted, H, MT, ML, MR, plotW, plotH, xScale, yScale, lineFn, areaFn } = layout;\n\n    const lineD = lineFn(points) ?? \"\";\n    const areaD = areaFn(points) ?? \"\";\n\n    const hIdx = this._hoveredIdx;\n    const hovPt = hIdx !== null ? plotted[hIdx] : null;\n\n    const tooltipEl = hovPt ? (() => {\n      const tipText = `${fmtMoney(hovPt.price!)} · ${hovPt.date ? new Date(hovPt.date).toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }) : \"\"} · ${hovPt.eventType}`;\n      const tipW = Math.min(tipText.length * 6.5 + 16, this._width - ML - MR);\n      const tipH = 24;\n      const tipGap = 8;\n      const above = hovPt.y > plotH / 2 + MT;\n      const tipRectY = above ? hovPt.y - tipGap - tipH : hovPt.y + tipGap;\n      const tipX = Math.min(Math.max(hovPt.x - tipW / 2, ML), this._width - MR - tipW);\n      return svg`\n        <g pointer-events=\"none\">\n          <rect x=\"${tipX}\" y=\"${tipRectY}\" width=\"${tipW}\" height=\"${tipH}\"\n                rx=\"4\" fill=\"rgba(15,23,42,0.88)\" />\n          <text x=\"${tipX + tipW / 2}\" y=\"${tipRectY + 15.5}\"\n                text-anchor=\"middle\" fill=\"white\" font-size=\"11\"\n                font-family=\"ui-sans-serif,system-ui,sans-serif\">${tipText}</text>\n        </g>\n      `;\n    })() : \"\";\n\n    const xTicks = xScale.ticks(this.maxXLabels).map((d, i, arr) => {\n      const x = xScale(d);\n      const label = d.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" });\n      const anchor = i === 0 ? \"start\" : i === arr.length - 1 ? \"end\" : \"middle\";\n      return svg`\n        <text x=\"${x}\" y=\"${H - 6}\" text-anchor=\"${anchor}\" font-size=\"10\" fill=\"#64748b\"\n              font-family=\"ui-sans-serif,system-ui,sans-serif\">${label}</text>\n      `;\n    });\n\n    const yTicks = this.showY ? yScale.ticks(3).map((v, i, arr) => {\n      const y = yScale(v);\n      const isFirst = i === 0;\n      const isLast = i === arr.length - 1;\n      return svg`\n        <line x1=\"${ML - 4}\" y1=\"${y}\" x2=\"${ML + plotW}\" y2=\"${y}\"\n              stroke=\"#e2e8f0\" stroke-width=\"1\" />\n        ${isFirst || isLast ? svg`\n          <text x=\"${ML - 6}\" y=\"${y + 4}\" text-anchor=\"end\" font-size=\"10\" fill=\"#64748b\"\n                font-family=\"ui-sans-serif,system-ui,sans-serif\">${fmtMoneyShort(v)}</text>\n        ` : \"\"}\n      `;\n    }) : [];\n\n    return html`\n      <div class=\"wrap\">\n        <svg width=\"${this._width}\" height=\"${H}\">\n          <defs>\n            <linearGradient id=\"phg\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"#4f46e5\" stop-opacity=\"0.25\" />\n              <stop offset=\"100%\" stop-color=\"#4f46e5\" stop-opacity=\"0\" />\n            </linearGradient>\n          </defs>\n          ${yTicks}\n          <path d=\"${areaD}\" fill=\"url(#phg)\" />\n          <path d=\"${lineD}\" fill=\"none\" stroke=\"#4f46e5\" stroke-width=\"2.5\"\n                stroke-linejoin=\"round\" stroke-linecap=\"round\" />\n          ${plotted.map((p, i) => svg`\n            <circle cx=\"${p.x}\" cy=\"${p.y}\" r=\"${i === hIdx ? 7 : 5}\"\n                    fill=\"#4f46e5\" stroke=\"#fff\" stroke-width=\"2\"\n                    style=\"cursor:pointer\"\n                    @pointerenter=${() => { this._hoveredIdx = i; }}\n                    @pointerleave=${() => { this._hoveredIdx = null; }} />\n          `)}\n          ${xTicks}\n          ${tooltipEl}\n        </svg>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"price-history-chart\": PriceHistoryChart;\n  }\n}\n"]}

package/dist/relative-time.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+/**
+ * Inline relative-time display (e.g. "3 hours ago"). Accepts either a
+ * standard ISO 8601 string or a SQLite `datetime('now')` string
+ * ("YYYY-MM-DD HH:MM:SS", UTC, no zone marker) via `datetime`. Shows the
+ * full date/time in the viewer's local timezone as a hover tooltip, and
+ * re-renders on an interval so the text stays current while visible.
+ *
+ * @element relative-time
+ */
+export declare class RelativeTime extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Timestamp to render, relative to now. */
+    datetime: string | null;
+    private _now;
+    private _timer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "relative-time": RelativeTime;
+    }
+}
+//# sourceMappingURL=relative-time.d.ts.map

package/dist/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../src/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAIpB;IAEF,4CAA4C;IAChC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAElC,OAAO,CAAC,IAAI,CAAc;IAEnC,OAAO,CAAC,MAAM,CAA+C;IAEpD,iBAAiB,SAKzB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCAKd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/relative-time.js

@@ -0,0 +1,64 @@
+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 } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { parseTimestamp, formatRelativeTime } from "./utils/time.js";
+const REFRESH_INTERVAL_MS = 60_000;
+/**
+ * Inline relative-time display (e.g. "3 hours ago"). Accepts either a
+ * standard ISO 8601 string or a SQLite `datetime('now')` string
+ * ("YYYY-MM-DD HH:MM:SS", UTC, no zone marker) via `datetime`. Shows the
+ * full date/time in the viewer's local timezone as a hover tooltip, and
+ * re-renders on an interval so the text stays current while visible.
+ *
+ * @element relative-time
+ */
+let RelativeTime = class RelativeTime extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Timestamp to render, relative to now. */
+        this.datetime = null;
+        this._now = Date.now();
+        this._timer = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._timer = setInterval(() => {
+            this._now = Date.now();
+        }, REFRESH_INTERVAL_MS);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._timer != null)
+            clearInterval(this._timer);
+        this._timer = null;
+    }
+    render() {
+        if (!this.datetime)
+            return html ``;
+        const date = parseTimestamp(this.datetime);
+        if (Number.isNaN(date.getTime()))
+            return html `${this.datetime}`;
+        return html `<span title=${date.toLocaleString()}>${formatRelativeTime(date, this._now)}</span>`;
+    }
+};
+__decorate([
+    property()
+], RelativeTime.prototype, "datetime", void 0);
+__decorate([
+    state()
+], RelativeTime.prototype, "_now", void 0);
+RelativeTime = __decorate([
+    customElement("relative-time")
+], RelativeTime);
+export { RelativeTime };
+//# sourceMappingURL=relative-time.js.map

package/dist/relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.js","sourceRoot":"","sources":["../src/relative-time.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEnC;;;;;;;;GAQG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAOL,4CAA4C;QAChC,aAAQ,GAAkB,IAAI,CAAC;QAE1B,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,WAAM,GAA0C,IAAI,CAAC;IAqB/D,CAAC;aAhCiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IASO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC1B,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI;YAAE,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAClC,MAAM,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChE,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,cAAc,EAAE,IAAI,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClG,CAAC;CACF,CAAA;AAzBa;IAAX,QAAQ,EAAE;8CAAgC;AAE1B;IAAhB,KAAK,EAAE;0CAA2B;AAVxB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAiCxB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { parseTimestamp, formatRelativeTime } from \"./utils/time.js\";\n\nconst REFRESH_INTERVAL_MS = 60_000;\n\n/**\n * Inline relative-time display (e.g. \"3 hours ago\"). Accepts either a\n * standard ISO 8601 string or a SQLite `datetime('now')` string\n * (\"YYYY-MM-DD HH:MM:SS\", UTC, no zone marker) via `datetime`. Shows the\n * full date/time in the viewer's local timezone as a hover tooltip, and\n * re-renders on an interval so the text stays current while visible.\n *\n * @element relative-time\n */\n@customElement(\"relative-time\")\nexport class RelativeTime extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline;\n    }\n  `;\n\n  /** Timestamp to render, relative to now. */\n  @property() datetime: string | null = null;\n\n  @state() private _now = Date.now();\n\n  private _timer: ReturnType<typeof setInterval> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._timer = setInterval(() => {\n      this._now = Date.now();\n    }, REFRESH_INTERVAL_MS);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._timer != null) clearInterval(this._timer);\n    this._timer = null;\n  }\n\n  override render() {\n    if (!this.datetime) return html``;\n    const date = parseTimestamp(this.datetime);\n    if (Number.isNaN(date.getTime())) return html`${this.datetime}`;\n    return html`<span title=${date.toLocaleString()}>${formatRelativeTime(date, this._now)}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"relative-time\": RelativeTime;\n  }\n}\n"]}

package/dist/reveal-button.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+/**
+ * Button that reveals hidden slotted content when clicked.
+ *
+ * @element reveal-button
+ */
+export declare class RevealButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Label shown on the button before it's clicked. */
+    label: string;
+    private _reveal;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "reveal-button": RevealButton;
+    }
+}
+//# sourceMappingURL=reveal-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-button.d.ts","sourceRoot":"","sources":["../src/reveal-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAoBpB;IAEF,qDAAqD;IAErD,KAAK,EAAE,MAAM,CAA2B;IAExC,OAAO,CAAC,OAAO;IAOf,UAAmB,MAAM,yCAKxB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/reveal-button.js

@@ -0,0 +1,62 @@
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Button that reveals hidden slotted content when clicked.
+ *
+ * @element reveal-button
+ */
+let RevealButton = class RevealButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Label shown on the button before it's clicked. */
+        this.label = "Reveal hidden content";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      .hidden {
+        display: none;
+      }
+      button {
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size, 0.875rem);
+        background: var(--ui-primary, #4f46e5);
+        color: #fff;
+        border: none;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.5rem 0.9rem;
+        cursor: pointer;
+      }
+      button:hover {
+        background: var(--ui-primary-hover, #4338ca);
+      }
+    `,
+    ]; }
+    _reveal() {
+        const div = this.shadowRoot.querySelector("div");
+        const button = this.shadowRoot.querySelector("button");
+        div?.classList.toggle("hidden");
+        button?.classList.toggle("hidden");
+    }
+    render() {
+        return html `
+      <div class="hidden"><slot></slot></div>
+      <button @click="${this._reveal}">${this.label}</button>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], RevealButton.prototype, "label", void 0);
+RevealButton = __decorate([
+    customElement("reveal-button")
+], RevealButton);
+export { RevealButton };
+//# sourceMappingURL=reveal-button.js.map

package/dist/reveal-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal-button.js","sourceRoot":"","sources":["../src/reveal-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAuBL,qDAAqD;QAErD,UAAK,GAAW,uBAAuB,CAAC;IAe1C,CAAC;aAvCiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;KACF,AApBqB,CAoBpB;IAMM,OAAO;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;KAC9C,CAAC;IACJ,CAAC;CACF,CAAA;AAfC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACa;AAzB7B,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAwCxB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Button that reveals hidden slotted content when clicked.\n *\n * @element reveal-button\n */\n@customElement(\"reveal-button\")\nexport class RevealButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .hidden {\n        display: none;\n      }\n      button {\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        cursor: pointer;\n      }\n      button:hover {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n    `,\n  ];\n\n  /** Label shown on the button before it's clicked. */\n  @property({ type: String })\n  label: string = \"Reveal hidden content\";\n\n  private _reveal() {\n    const div = this.shadowRoot!.querySelector(\"div\");\n    const button = this.shadowRoot!.querySelector(\"button\");\n    div?.classList.toggle(\"hidden\");\n    button?.classList.toggle(\"hidden\");\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"hidden\"><slot></slot></div>\n      <button @click=\"${this._reveal}\">${this.label}</button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"reveal-button\": RevealButton;\n  }\n}\n"]}

package/dist/roman-numeral.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+/**
+ * Converts an integer to a roman numeral inline.
+ *
+ * @element roman-numeral
+ */
+export declare class RomanNumeral extends LitElement {
+    /** Integer value to render as a roman numeral. */
+    value?: number;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private _convertToRoman;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "roman-numeral": RomanNumeral;
+    }
+}
+//# sourceMappingURL=roman-numeral.d.ts.map

package/dist/roman-numeral.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roman-numeral.d.ts","sourceRoot":"","sources":["../src/roman-numeral.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAmBvC;;;;GAIG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,kDAAkD;IAElD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAmB,MAAM,yCAExB;IAED,OAAO,CAAC,eAAe;CAgBxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}