@f-ewald/components 0.1.0

package/dist/utils/distance.js

@@ -0,0 +1,25 @@
+/**
+ * Formats a distance in miles, switching to feet below 0.25 mi.
+ * At ≥10 mi precision drops to whole miles.
+ */
+export function formatMiles(miles) {
+    if (miles < 0.25) {
+        return `${Math.round(miles * 5280).toLocaleString("en-US")} ft`;
+    }
+    if (miles >= 10)
+        return `${Math.round(miles).toLocaleString("en-US")} mi`;
+    return `${miles.toFixed(1)} mi`;
+}
+/**
+ * Formats a distance in kilometers, switching to meters below 0.5 km.
+ * At ≥10 km precision drops to whole kilometers. (Future use.)
+ */
+export function formatKm(km) {
+    if (km < 0.5) {
+        return `${Math.round(km * 1000).toLocaleString("en-US")} m`;
+    }
+    if (km >= 10)
+        return `${Math.round(km).toLocaleString("en-US")} km`;
+    return `${km.toFixed(1)} km`;
+}
+//# sourceMappingURL=distance.js.map

package/dist/utils/distance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distance.js","sourceRoot":"","sources":["../../src/utils/distance.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,IAAI,KAAK,GAAG,IAAI,EAAE,CAAC;QACjB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;IAClE,CAAC;IACD,IAAI,KAAK,IAAI,EAAE;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;IAC1E,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AAClC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAU;IACjC,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC;QACb,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC;IAC9D,CAAC;IACD,IAAI,EAAE,IAAI,EAAE;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;IACpE,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AAC/B,CAAC","sourcesContent":["/**\n * Formats a distance in miles, switching to feet below 0.25 mi.\n * At ≥10 mi precision drops to whole miles.\n */\nexport function formatMiles(miles: number): string {\n  if (miles < 0.25) {\n    return `${Math.round(miles * 5280).toLocaleString(\"en-US\")} ft`;\n  }\n  if (miles >= 10) return `${Math.round(miles).toLocaleString(\"en-US\")} mi`;\n  return `${miles.toFixed(1)} mi`;\n}\n\n/**\n * Formats a distance in kilometers, switching to meters below 0.5 km.\n * At ≥10 km precision drops to whole kilometers. (Future use.)\n */\nexport function formatKm(km: number): string {\n  if (km < 0.5) {\n    return `${Math.round(km * 1000).toLocaleString(\"en-US\")} m`;\n  }\n  if (km >= 10) return `${Math.round(km).toLocaleString(\"en-US\")} km`;\n  return `${km.toFixed(1)} km`;\n}\n"]}

package/dist/utils/time.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Parses a timestamp from either SQLite's `datetime('now')` (a space-separated
+ * UTC string with no zone marker, e.g. "2026-07-15 10:23:00") or a standard
+ * ISO 8601 string. JS's `Date` parser treats the space-separated form as
+ * local time, so it's coerced to `T...Z` first to anchor it to UTC.
+ */
+export declare function parseTimestamp(s: string): Date;
+/** Formats `date` relative to `now` (e.g. "3 hours ago", "in 2 days"). */
+export declare function formatRelativeTime(date: Date, now?: number): string;
+//# sourceMappingURL=time.d.ts.map

package/dist/utils/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAG9C;AAaD,0EAA0E;AAC1E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,GAAE,MAAmB,GAAG,MAAM,CAU/E"}

package/dist/utils/time.js

@@ -0,0 +1,33 @@
+/**
+ * Parses a timestamp from either SQLite's `datetime('now')` (a space-separated
+ * UTC string with no zone marker, e.g. "2026-07-15 10:23:00") or a standard
+ * ISO 8601 string. JS's `Date` parser treats the space-separated form as
+ * local time, so it's coerced to `T...Z` first to anchor it to UTC.
+ */
+export function parseTimestamp(s) {
+    const iso = s.includes(" ") && !s.includes("T") ? `${s.replace(" ", "T")}Z` : s;
+    return new Date(iso);
+}
+const RELATIVE_UNITS = [
+    ["year", 365 * 24 * 60 * 60],
+    ["month", 30 * 24 * 60 * 60],
+    ["week", 7 * 24 * 60 * 60],
+    ["day", 24 * 60 * 60],
+    ["hour", 60 * 60],
+    ["minute", 60],
+];
+const relativeFormatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+/** Formats `date` relative to `now` (e.g. "3 hours ago", "in 2 days"). */
+export function formatRelativeTime(date, now = Date.now()) {
+    const diffSeconds = (date.getTime() - now) / 1000;
+    const absSeconds = Math.abs(diffSeconds);
+    if (absSeconds < 60)
+        return "just now";
+    for (const [unit, secondsInUnit] of RELATIVE_UNITS) {
+        if (absSeconds >= secondsInUnit) {
+            return relativeFormatter.format(Math.round(diffSeconds / secondsInUnit), unit);
+        }
+    }
+    return relativeFormatter.format(Math.round(diffSeconds / 60), "minute");
+}
+//# sourceMappingURL=time.js.map

package/dist/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,CAAS;IACtC,MAAM,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,cAAc,GAAiD;IACnE,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5B,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5B,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC1B,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACrB,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC;IACjB,CAAC,QAAQ,EAAE,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,iBAAiB,GAAG,IAAI,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;AAEtF,0EAA0E;AAC1E,MAAM,UAAU,kBAAkB,CAAC,IAAU,EAAE,GAAG,GAAW,IAAI,CAAC,GAAG,EAAE;IACrE,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACzC,IAAI,UAAU,GAAG,EAAE;QAAE,OAAO,UAAU,CAAC;IACvC,KAAK,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,cAAc,EAAE,CAAC;QACnD,IAAI,UAAU,IAAI,aAAa,EAAE,CAAC;YAChC,OAAO,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC,EAAE,IAAI,CAAC,CAAC;QACjF,CAAC;IACH,CAAC;IACD,OAAO,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["/**\n * Parses a timestamp from either SQLite's `datetime('now')` (a space-separated\n * UTC string with no zone marker, e.g. \"2026-07-15 10:23:00\") or a standard\n * ISO 8601 string. JS's `Date` parser treats the space-separated form as\n * local time, so it's coerced to `T...Z` first to anchor it to UTC.\n */\nexport function parseTimestamp(s: string): Date {\n  const iso = s.includes(\" \") && !s.includes(\"T\") ? `${s.replace(\" \", \"T\")}Z` : s;\n  return new Date(iso);\n}\n\nconst RELATIVE_UNITS: Array<[Intl.RelativeTimeFormatUnit, number]> = [\n  [\"year\", 365 * 24 * 60 * 60],\n  [\"month\", 30 * 24 * 60 * 60],\n  [\"week\", 7 * 24 * 60 * 60],\n  [\"day\", 24 * 60 * 60],\n  [\"hour\", 60 * 60],\n  [\"minute\", 60],\n];\n\nconst relativeFormatter = new Intl.RelativeTimeFormat(undefined, { numeric: \"auto\" });\n\n/** Formats `date` relative to `now` (e.g. \"3 hours ago\", \"in 2 days\"). */\nexport function formatRelativeTime(date: Date, now: number = Date.now()): string {\n  const diffSeconds = (date.getTime() - now) / 1000;\n  const absSeconds = Math.abs(diffSeconds);\n  if (absSeconds < 60) return \"just now\";\n  for (const [unit, secondsInUnit] of RELATIVE_UNITS) {\n    if (absSeconds >= secondsInUnit) {\n      return relativeFormatter.format(Math.round(diffSeconds / secondsInUnit), unit);\n    }\n  }\n  return relativeFormatter.format(Math.round(diffSeconds / 60), \"minute\");\n}\n"]}

package/dist/weight-bar-chart.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+export interface WeightBarItem {
+    id: string;
+    label: string;
+    /** Normalized fraction (fractions across all items sum to ~1). */
+    value: number;
+}
+/**
+ * Sorted horizontal bar chart of labeled weights (normalized fractions
+ * summing to ~1). Bars sort descending — the order IS the priority ranking.
+ * Widths scale relative to the largest weight (which fills its track); the
+ * percent labels carry the absolute values. Rows are keyed by item id
+ * (repeat directive) so a re-render with new weights moves the existing
+ * rows; bar widths animate via CSS, re-sorting is instant.
+ *
+ * @element weight-bar-chart
+ */
+export declare class WeightBarChart extends LitElement {
+    /** Items to render as weighted rows, sorted descending by value. */
+    items: WeightBarItem[];
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "weight-bar-chart": WeightBarChart;
+    }
+}
+//# sourceMappingURL=weight-bar-chart.d.ts.map

package/dist/weight-bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weight-bar-chart.d.ts","sourceRoot":"","sources":["../src/weight-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,oEAAoE;IACpC,KAAK,EAAE,aAAa,EAAE,CAAM;IAE5D,OAAgB,MAAM,4BAuCpB;IAEO,MAAM,gDAuBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/weight-bar-chart.js

@@ -0,0 +1,96 @@
+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 { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+/**
+ * Sorted horizontal bar chart of labeled weights (normalized fractions
+ * summing to ~1). Bars sort descending — the order IS the priority ranking.
+ * Widths scale relative to the largest weight (which fills its track); the
+ * percent labels carry the absolute values. Rows are keyed by item id
+ * (repeat directive) so a re-render with new weights moves the existing
+ * rows; bar widths animate via CSS, re-sorting is instant.
+ *
+ * @element weight-bar-chart
+ */
+let WeightBarChart = class WeightBarChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Items to render as weighted rows, sorted descending by value. */
+        this.items = [];
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 6px 0;
+      }
+      .label {
+        flex: 0 0 90px;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        color: var(--ui-text, #0f172a);
+      }
+      .track {
+        flex: 1 1 auto;
+        height: 12px;
+        background: var(--ui-surface-muted, #f8fafc);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        overflow: hidden;
+      }
+      .bar {
+        height: 100%;
+        background: var(--ui-primary, #4f46e5);
+        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;
+        transition: width 0.15s ease-out;
+      }
+      .pct {
+        flex: 0 0 40px;
+        text-align: right;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-variant-numeric: tabular-nums;
+        color: var(--ui-text-muted, #64748b);
+      }
+    `,
+    ]; }
+    render() {
+        if (this.items.length === 0)
+            return null;
+        // Stable sort: ties keep the incoming item order, so the chart never flickers.
+        const sorted = [...this.items].sort((a, b) => b.value - a.value);
+        const max = Math.max(0.01, ...sorted.map((item) => item.value));
+        const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(", ");
+        return html `
+      <div role="img" aria-label="Weights: ${summary}">
+        ${repeat(sorted, (item) => item.id, (item) => html `
+            <div class="row">
+              <span class="label">${item.label}</span>
+              <div class="track">
+                <div class="bar" style="width: ${(item.value / max) * 100}%"></div>
+              </div>
+              <span class="pct">${Math.round(item.value * 100)}%</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], WeightBarChart.prototype, "items", void 0);
+WeightBarChart = __decorate([
+    customElement("weight-bar-chart")
+], WeightBarChart);
+export { WeightBarChart };
+//# sourceMappingURL=weight-bar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"weight-bar-chart.js","sourceRoot":"","sources":["../src/weight-bar-chart.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,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AASrC;;;;;;;;;GASG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,oEAAoE;QACpC,UAAK,GAAoB,EAAE,CAAC;IAmE9D,CAAC;aAjEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCF;KACF,AAvCqB,CAuCpB;IAEO,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QACzC,+EAA+E;QAC/E,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,OAAO,IAAI,CAAA;6CAC8B,OAAO;UAC1C,MAAM,CACN,MAAM,EACN,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;oCAEY,IAAI,CAAC,KAAK;;iDAEG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;;kCAEvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;WAEnD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAnEiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA6B;AAFjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqE1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface WeightBarItem {\n  id: string;\n  label: string;\n  /** Normalized fraction (fractions across all items sum to ~1). */\n  value: number;\n}\n\n/**\n * Sorted horizontal bar chart of labeled weights (normalized fractions\n * summing to ~1). Bars sort descending — the order IS the priority ranking.\n * Widths scale relative to the largest weight (which fills its track); the\n * percent labels carry the absolute values. Rows are keyed by item id\n * (repeat directive) so a re-render with new weights moves the existing\n * rows; bar widths animate via CSS, re-sorting is instant.\n *\n * @element weight-bar-chart\n */\n@customElement(\"weight-bar-chart\")\nexport class WeightBarChart extends LitElement {\n  /** Items to render as weighted rows, sorted descending by value. */\n  @property({ attribute: false }) items: WeightBarItem[] = [];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin: 6px 0;\n      }\n      .label {\n        flex: 0 0 90px;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        color: var(--ui-text, #0f172a);\n      }\n      .track {\n        flex: 1 1 auto;\n        height: 12px;\n        background: var(--ui-surface-muted, #f8fafc);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        overflow: hidden;\n      }\n      .bar {\n        height: 100%;\n        background: var(--ui-primary, #4f46e5);\n        border-radius: 0 var(--ui-radius-sm, 0.25rem) var(--ui-radius-sm, 0.25rem) 0;\n        transition: width 0.15s ease-out;\n      }\n      .pct {\n        flex: 0 0 40px;\n        text-align: right;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-variant-numeric: tabular-nums;\n        color: var(--ui-text-muted, #64748b);\n      }\n    `,\n  ];\n\n  override render() {\n    if (this.items.length === 0) return null;\n    // Stable sort: ties keep the incoming item order, so the chart never flickers.\n    const sorted = [...this.items].sort((a, b) => b.value - a.value);\n    const max = Math.max(0.01, ...sorted.map((item) => item.value));\n    const summary = sorted.map((item) => `${item.label} ${Math.round(item.value * 100)}%`).join(\", \");\n    return html`\n      <div role=\"img\" aria-label=\"Weights: ${summary}\">\n        ${repeat(\n          sorted,\n          (item) => item.id,\n          (item) => html`\n            <div class=\"row\">\n              <span class=\"label\">${item.label}</span>\n              <div class=\"track\">\n                <div class=\"bar\" style=\"width: ${(item.value / max) * 100}%\"></div>\n              </div>\n              <span class=\"pct\">${Math.round(item.value * 100)}%</span>\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"weight-bar-chart\": WeightBarChart;\n  }\n}\n"]}

package/docs/address-autocomplete.md

@@ -0,0 +1,68 @@
+# `<address-autocomplete>`
+
+Form-associated text input with a suggestion dropdown. Works as a
+drop-in replacement for a plain `<input name="address">`: consumers keep
+reading `new FormData(form).get("address")` and calling `form.reset()`
+unchanged.
+
+Supports two suggestion sources:
+- **API** (default): fetches from `endpoint`, a Mapbox Geocoding v6-shaped
+  forward-geocode URL, debounced as the user types.
+- **Local array**: set `suggestions` to a fixed `AddressSuggestion[]` and
+  the component filters it client-side instead of making any network
+  request. Useful for small/fixed address lists, offline use, or tests.
+  Takes priority over `endpoint` whenever it's non-null.
+
+## Install
+
+```js
+import "@f-ewald/components/address-autocomplete.js";
+```
+
+## Usage
+
+```html
+<address-autocomplete
+  placeholder="Start typing an address…"
+  access-token="pk.your-mapbox-token"
+></address-autocomplete>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `string` | `""` | Current input value; also the form-associated value submitted with the form. |
+| `placeholder` | `placeholder` | `string` | `""` | Placeholder text shown when the input is empty. |
+| `required` | `required` | `boolean` | `false` | Marks the input as required for native form validation. |
+| `types` | `types` | `string` | `"address"` | Mapbox `types` param, e.g. "address" or "address,poi". |
+| `endpoint` | `endpoint` | `string` | `"https://api.mapbox.com/search/geocode/v6/forward"` | Geocoding endpoint URL. Defaults to the Mapbox Geocoding v6 forward URL. |
+| `accessToken` | `access-token` | `string` | `""` | Mapbox access token. Required for requests to succeed. |
+| `bbox` | `bbox` | `string` | `""` | Optional bounding box bias, comma-separated `west,south,east,north`. |
+| `proximity` | `proximity` | `string` | `""` | Optional proximity bias, comma-separated `lng,lat`. |
+| `debounce` | `debounce` | `number` | `300` | Debounce delay (ms) before firing a geocode request after typing. |
+| `minLength` | `min-length` | `number` | `3` | Minimum query length before suggestions are fetched. |
+| `suggestions` | _(JS property only)_ | `AddressSuggestion[] | null` | `null` | Fixed candidate list to filter locally instead of fetching from `endpoint`. When set (non-null), no network request is ever made — this takes priority over the API mode. |
+| `selectedSuggestion` | _(JS property only)_ | `AddressSuggestion | null` | `—` | Last-picked suggestion, or null once the input diverges from it. _(read-only)_ |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `address-select` | A suggestion was picked; detail: AddressSuggestion. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-radius-sm` |
+| `--ui-shadow` |
+| `--ui-surface` |
+| `--ui-surface-muted` |

package/docs/animate-confetti.md

@@ -0,0 +1,34 @@
+# `<animate-confetti>`
+
+Fullscreen confetti animation overlay, rendered on a fixed-position canvas.
+Starts automatically on first render and stops after `duration` ms.
+
+## Install
+
+```js
+import "@f-ewald/components/animate-confetti.js";
+```
+
+## Usage
+
+```html
+<animate-confetti duration="6000"></animate-confetti>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `duration` | `duration` | `number` | `6000` | How long the confetti streams before stopping, in ms. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/autocomplete-input.md

@@ -0,0 +1,79 @@
+# `<autocomplete-input>`
+
+Generic form-associated text input with a suggestion dropdown, for any
+"type to filter a list of `{key, value}` options" use case. Works as a
+drop-in replacement for a plain `<input>` inside a `<form>`: set `name` on
+the element itself and consumers keep reading
+`new FormData(form).get(name)` and calling `form.reset()` unchanged — the
+submitted value is the picked option's `value`, while `key` is available
+via the `option-select` event and the `selectedOption` getter for cases
+that need the underlying id rather than the display text.
+
+Supports two suggestion sources:
+- **API**: set `endpoint` to a URL that, given a `?<query-param>=<text>`
+  query string, responds with a JSON array of `{key, value}` objects.
+  Requests are debounced as the user types.
+- **Local array**: set `options` to a fixed `AutocompleteOption[]` and the
+  component filters it client-side instead of making any network
+  request. Useful for small/fixed lists, offline use, or tests. Takes
+  priority over `endpoint` whenever it's non-null.
+
+## Install
+
+```js
+import "@f-ewald/components/autocomplete-input.js";
+```
+
+## Usage
+
+```html
+<form>
+  <autocomplete-input name="language" placeholder="Start typing a language…"></autocomplete-input>
+</form>
+<script type="module">
+  // Local mode: filters client-side, no network request.
+  document.querySelector("autocomplete-input").options = [
+    { key: "ts", value: "TypeScript" },
+    { key: "py", value: "Python" },
+  ];
+
+  // API mode: omit `options` and set `endpoint` instead — it's queried as
+  // `${endpoint}?${queryParam}=<text>` and must respond with [{key, value}].
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `string` | `""` | Current input value; also the form-associated value submitted with the form. |
+| `placeholder` | `placeholder` | `string` | `""` | Placeholder text shown when the input is empty. |
+| `required` | `required` | `boolean` | `false` | Marks the input as required for native form validation. |
+| `endpoint` | `endpoint` | `string` | `""` | API endpoint queried in API mode. Ignored when `options` is set. |
+| `queryParam` | `query-param` | `string` | `"q"` | Query string parameter name the current input text is sent under. |
+| `debounce` | `debounce` | `number` | `300` | Debounce delay (ms) before firing a request/filter after typing. |
+| `minLength` | `min-length` | `number` | `3` | Minimum query length before suggestions are shown. |
+| `options` | _(JS property only)_ | `AutocompleteOption[] | null` | `null` | Fixed candidate list to filter locally instead of fetching from `endpoint`. When set (non-null), no network request is ever made — this takes priority over the API mode. |
+| `selectedOption` | _(JS property only)_ | `AutocompleteOption | null` | `—` | Last-picked option, or null once the input diverges from it. _(read-only)_ |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `option-select` | An option was picked; detail: AutocompleteOption. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-radius-sm` |
+| `--ui-shadow` |
+| `--ui-surface` |
+| `--ui-surface-muted` |

package/docs/confirm-dialog.md

@@ -0,0 +1,65 @@
+# `<confirm-dialog>`
+
+Reusable confirmation dialog: overlay + centered card with a slotted body,
+an optional error line, and Cancel/Confirm actions. Instant `display:none`
+→ `display:flex` toggle (no transitions). Fires `confirm`/`cancel`
+(bubbling, composed) instead of owning any deletion logic itself —
+callers stay in charge of the request.
+
+## Install
+
+```js
+import "@f-ewald/components/confirm-dialog.js";
+```
+
+## Usage
+
+```html
+<confirm-dialog open confirm-label="Delete" cancel-label="Cancel">
+  Are you sure you want to delete this item?
+</confirm-dialog>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `open` | `boolean` | `false` | Whether the dialog is visible. |
+| `confirmLabel` | `confirm-label` | `string` | `"Delete"` | Label for the confirm button. |
+| `cancelLabel` | `cancel-label` | `string` | `"Cancel"` | Label for the cancel button. |
+| `danger` | `danger` | `boolean` | `true` | Danger (red) vs. primary (indigo) styling for the confirm button. |
+| `busy` | `busy` | `boolean` | `false` | Shows a spinner and disables both buttons while a request is in flight. |
+| `error` | `error` | `string | null` | `null` | Inline error line shown below the body, or null for none. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `confirm` | User clicked the confirm button. |
+| `cancel` | User clicked the cancel button. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Dialog body content. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-danger` |
+| `--ui-danger-hover` |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-font-size-sm` |
+| `--ui-overlay` |
+| `--ui-primary` |
+| `--ui-primary-hover` |
+| `--ui-radius` |
+| `--ui-radius-sm` |
+| `--ui-shadow-lg` |
+| `--ui-surface` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/copy-link-button.md

@@ -0,0 +1,46 @@
+# `<copy-link-button>`
+
+Small icon button that copies `value` to the clipboard and shows a toast
+on success/failure (if a `<toast-notification>` element is present), and
+always dispatches a `copy-success`/`copy-error` CustomEvent so consumers
+without a toast element can react. Defaults to the current page URL if
+`value` is unset.
+
+## Install
+
+```js
+import "@f-ewald/components/copy-link-button.js";
+```
+
+## Usage
+
+```html
+<copy-link-button value="https://example.com/listing/42" label="Copy listing link"></copy-link-button>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `string` | `""` | Text to copy. Defaults to `window.location.href` at click time. |
+| `label` | `label` | `string` | `"Copy link"` | Accessible label / tooltip text. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `copy-success` | The value was copied to the clipboard. |
+| `copy-error` | Copying to the clipboard failed. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/distance-value.md

@@ -0,0 +1,38 @@
+# `<distance-value>`
+
+Inline distance display. Renders miles/feet or km/m, switching units at
+sensible thresholds (< 0.25 mi → ft; < 0.5 km → m).
+
+Supply exactly one of `miles` or `km`; the other stays null.
+km support is present but reserved for future use.
+
+## Install
+
+```js
+import "@f-ewald/components/distance-value.js";
+```
+
+## Usage
+
+```html
+<distance-value miles="5"></distance-value>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `miles` | `miles` | `number | null` | `null` | Distance in miles (imperial). Switches to feet below 0.25 mi. |
+| `km` | `km` | `number | null` | `null` | Distance in kilometers (metric, future). Switches to meters below 0.5 km. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/distribution-chart.md

@@ -0,0 +1,51 @@
+# `<distribution-chart>`
+
+Renders a KDE distribution curve for a named metric with one or more value
+markers. The SVG viewBox is kept in sync with the element's pixel width via
+ResizeObserver so that font sizes and stroke widths are always in real pixels
+regardless of container width.
+
+Pass `fontSize` to control all text size (default 11). Pass a single
+`{label:'', value}` for a single-value display or multiple
+`{label:'A'|'B'|...}` entries to compare several values.
+
+## Install
+
+```js
+import "@f-ewald/components/distribution-chart.js";
+```
+
+## Usage
+
+```html
+<distribution-chart metric="sqft"></distribution-chart>
+<script type="module">
+  document.querySelector("distribution-chart").values = [{ label: "", value: 1450 }];
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `metric` | `metric` | `string` | `""` | Metric name, fetched from `/api/distribution/<metric>` on change. |
+| `values` | _(JS property only)_ | `DistributionValue[]` | `[]` | One or more values to mark on the distribution curve. |
+| `markerColors` | _(JS property only)_ | `string[]` | `["#4f46e5", "#d97706", "#0d9488", "#e11d48"]` | Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. |
+| `fontSize` | `font-size` | `number` | `11` | Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-danger` |
+| `--ui-font-size-sm` |
+| `--ui-radius-sm` |
+| `--ui-text-muted` |

package/docs/mcp-evaluation.md

@@ -0,0 +1,31 @@
+# MCP server evaluation
+
+**Recommendation: do not build an MCP server for this package now.**
+
+## Rationale
+
+The component catalog is small (14 tags). `llms.txt` ships in the npm
+package and is fetchable directly from unpkg or GitHub raw, so any LLM or
+agent can load the full API surface — every component's attributes,
+properties, events, slots, tokens, and a usage example — in one small file,
+with no server, process, or additional versioning/packaging burden. An MCP
+server would duplicate that same data behind a stdio process that needs its
+own install, auth-free-but-still-a-process lifecycle, and release cadence
+kept in sync with the package — for zero functional gain at this scale.
+
+## When to revisit
+
+- The catalog grows past a size where `llms.txt` stops being comfortable to
+  load into a single context window (rule of thumb: ~30+ components).
+- Consumers want live search, fuzzy matching, or filtered/paginated results
+  instead of "load everything."
+- Consumers want examples or docs that go beyond what's derivable from
+  `custom-elements.json` (e.g. runnable playground snippets, live preview).
+
+## Upgrade path
+
+If/when it's warranted, a thin stdio MCP server exposing two tools —
+`list_components` and `get_component_docs(tag)` — backed by the same
+`custom-elements.json` this package already generates and ships. No new
+data source would be needed; the server would just be a different transport
+over data that already exists.