@f-ewald/components 0.1.0

package/dist/confirm-dialog.js

@@ -0,0 +1,191 @@
+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 { iconArrowPath } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * 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.
+ *
+ * @element confirm-dialog
+ * @fires confirm - User clicked the confirm button.
+ * @fires cancel - User clicked the cancel button.
+ */
+let ConfirmDialog = class ConfirmDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dialog is visible. */
+        this.open = false;
+        /** Label for the confirm button. */
+        this.confirmLabel = "Delete";
+        /** Label for the cancel button. */
+        this.cancelLabel = "Cancel";
+        /** Danger (red) vs. primary (indigo) styling for the confirm button. */
+        this.danger = true;
+        /** Shows a spinner and disables both buttons while a request is in flight. */
+        this.busy = false;
+        /** Inline error line shown below the body, or null for none. */
+        this.error = null;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      .overlay {
+        position: fixed;
+        inset: 0;
+        background: var(--ui-overlay, rgb(15 23 42 / 0.45));
+        z-index: 50;
+        display: none;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 10vh 20px 20px;
+        box-sizing: border-box;
+      }
+      .overlay.open {
+        display: flex;
+      }
+      .dialog {
+        background: var(--ui-surface, #fff);
+        border-radius: var(--ui-radius, 0.5rem);
+        box-shadow: var(
+          --ui-shadow-lg,
+          0 20px 25px -5px rgb(0 0 0 / 0.1),
+          0 8px 10px -6px rgb(0 0 0 / 0.1)
+        );
+        width: 100%;
+        max-width: 420px;
+        padding: 1.25rem;
+        box-sizing: border-box;
+      }
+      .dialog-text {
+        margin: 0 0 1rem;
+        color: var(--ui-text, #0f172a);
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size, 0.875rem);
+        line-height: 1.45;
+      }
+      .dialog-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.6rem;
+      }
+      .btn-cancel {
+        background: none;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        color: var(--ui-text, #0f172a);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.5rem 0.9rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        cursor: pointer;
+        font-family: inherit;
+      }
+      .btn-cancel:hover:not(:disabled) {
+        border-color: var(--ui-text-muted, #64748b);
+      }
+      .btn-danger,
+      .btn-primary {
+        border: none;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.5rem 0.9rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: 500;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        font-family: inherit;
+      }
+      .btn-danger {
+        background: var(--ui-danger, #dc2626);
+        color: #fff;
+      }
+      .btn-danger:hover:not(:disabled) {
+        background: var(--ui-danger-hover, #b91c1c);
+      }
+      .btn-primary {
+        background: var(--ui-primary, #4f46e5);
+        color: #fff;
+      }
+      .btn-primary:hover:not(:disabled) {
+        background: var(--ui-primary-hover, #4338ca);
+      }
+      button:disabled {
+        opacity: 0.6;
+        cursor: default;
+      }
+      .error-text {
+        color: var(--ui-danger, #dc2626);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        margin: 0.4rem 0 0.8rem;
+      }
+      .spin {
+        display: inline-flex;
+        animation: spin 0.8s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @media (max-width: 768px) {
+        .overlay {
+          padding: 12px;
+          overflow-y: auto;
+        }
+      }
+    `,
+    ]; }
+    _confirm() {
+        this.dispatchEvent(new CustomEvent("confirm", { bubbles: true, composed: true }));
+    }
+    _cancel() {
+        this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="overlay ${this.open ? "open" : ""}">
+        <div class="dialog">
+          <p class="dialog-text"><slot></slot></p>
+          ${this.error ? html `<p class="error-text">${this.error}</p>` : nothing}
+          <div class="dialog-actions">
+            <button class="btn-cancel" ?disabled=${this.busy} @click=${this._cancel}>${this.cancelLabel}</button>
+            <button class=${this.danger ? "btn-danger" : "btn-primary"} ?disabled=${this.busy} @click=${this._confirm}>
+              ${this.busy ? html `<span class="spin">${iconArrowPath(14)}</span>` : nothing} ${this.confirmLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ConfirmDialog.prototype, "open", void 0);
+__decorate([
+    property({ attribute: "confirm-label" })
+], ConfirmDialog.prototype, "confirmLabel", void 0);
+__decorate([
+    property({ attribute: "cancel-label" })
+], ConfirmDialog.prototype, "cancelLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], ConfirmDialog.prototype, "danger", void 0);
+__decorate([
+    property({ type: Boolean })
+], ConfirmDialog.prototype, "busy", void 0);
+__decorate([
+    property()
+], ConfirmDialog.prototype, "error", void 0);
+ConfirmDialog = __decorate([
+    customElement("confirm-dialog")
+], ConfirmDialog);
+export { ConfirmDialog };
+//# sourceMappingURL=confirm-dialog.js.map

package/dist/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QA8GL,qCAAqC;QACR,SAAI,GAAG,KAAK,CAAC;QAC1C,oCAAoC;QACM,iBAAY,GAAG,QAAQ,CAAC;QAClE,mCAAmC;QACM,gBAAW,GAAG,QAAQ,CAAC;QAChE,wEAAwE;QAC3C,WAAM,GAAG,IAAI,CAAC;QAC3C,8EAA8E;QACjD,SAAI,GAAG,KAAK,CAAC;QAC1C,gEAAgE;QACpD,UAAK,GAAkB,IAAI,CAAC;IA0B1C,CAAC;aAlJiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwGF;KACF,AA3GqB,CA2GpB;IAeM,QAAQ;QACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACpF,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACnF,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;YAGvC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO;;mDAE7B,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;4BAC3E,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,cAAc,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,QAAQ;gBACrG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY;;;;;KAK1G,CAAC;IACJ,CAAC;CACF,CAAA;AApC8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAc;AAEA;IAAzC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDAAyB;AAEzB;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kDAAwB;AAEnC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAe;AAEd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAc;AAE9B;IAAX,QAAQ,EAAE;4CAA6B;AAzH7B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAmJzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Reusable confirmation dialog: overlay + centered card with a slotted body,\n * an optional error line, and Cancel/Confirm actions. Instant `display:none`\n * → `display:flex` toggle (no transitions). Fires `confirm`/`cancel`\n * (bubbling, composed) instead of owning any deletion logic itself —\n * callers stay in charge of the request.\n *\n * @element confirm-dialog\n * @fires confirm - User clicked the confirm button.\n * @fires cancel - User clicked the cancel button.\n */\n@customElement(\"confirm-dialog\")\nexport class ConfirmDialog extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      .overlay {\n        position: fixed;\n        inset: 0;\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        z-index: 50;\n        display: none;\n        align-items: flex-start;\n        justify-content: center;\n        padding: 10vh 20px 20px;\n        box-sizing: border-box;\n      }\n      .overlay.open {\n        display: flex;\n      }\n      .dialog {\n        background: var(--ui-surface, #fff);\n        border-radius: var(--ui-radius, 0.5rem);\n        box-shadow: var(\n          --ui-shadow-lg,\n          0 20px 25px -5px rgb(0 0 0 / 0.1),\n          0 8px 10px -6px rgb(0 0 0 / 0.1)\n        );\n        width: 100%;\n        max-width: 420px;\n        padding: 1.25rem;\n        box-sizing: border-box;\n      }\n      .dialog-text {\n        margin: 0 0 1rem;\n        color: var(--ui-text, #0f172a);\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: 1.45;\n      }\n      .dialog-actions {\n        display: flex;\n        justify-content: flex-end;\n        gap: 0.6rem;\n      }\n      .btn-cancel {\n        background: none;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        cursor: pointer;\n        font-family: inherit;\n      }\n      .btn-cancel:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn-danger,\n      .btn-primary {\n        border: none;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        font-family: inherit;\n      }\n      .btn-danger {\n        background: var(--ui-danger, #dc2626);\n        color: #fff;\n      }\n      .btn-danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn-primary {\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n      }\n      .btn-primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button:disabled {\n        opacity: 0.6;\n        cursor: default;\n      }\n      .error-text {\n        color: var(--ui-danger, #dc2626);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        margin: 0.4rem 0 0.8rem;\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      @media (max-width: 768px) {\n        .overlay {\n          padding: 12px;\n          overflow-y: auto;\n        }\n      }\n    `,\n  ];\n\n  /** Whether the dialog is visible. */\n  @property({ type: Boolean }) open = false;\n  /** Label for the confirm button. */\n  @property({ attribute: \"confirm-label\" }) confirmLabel = \"Delete\";\n  /** Label for the cancel button. */\n  @property({ attribute: \"cancel-label\" }) cancelLabel = \"Cancel\";\n  /** Danger (red) vs. primary (indigo) styling for the confirm button. */\n  @property({ type: Boolean }) danger = true;\n  /** Shows a spinner and disables both buttons while a request is in flight. */\n  @property({ type: Boolean }) busy = false;\n  /** Inline error line shown below the body, or null for none. */\n  @property() error: string | null = null;\n\n  private _confirm() {\n    this.dispatchEvent(new CustomEvent(\"confirm\", { bubbles: true, composed: true }));\n  }\n\n  private _cancel() {\n    this.dispatchEvent(new CustomEvent(\"cancel\", { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"overlay ${this.open ? \"open\" : \"\"}\">\n        <div class=\"dialog\">\n          <p class=\"dialog-text\"><slot></slot></p>\n          ${this.error ? html`<p class=\"error-text\">${this.error}</p>` : nothing}\n          <div class=\"dialog-actions\">\n            <button class=\"btn-cancel\" ?disabled=${this.busy} @click=${this._cancel}>${this.cancelLabel}</button>\n            <button class=${this.danger ? \"btn-danger\" : \"btn-primary\"} ?disabled=${this.busy} @click=${this._confirm}>\n              ${this.busy ? html`<span class=\"spin\">${iconArrowPath(14)}</span>` : nothing} ${this.confirmLabel}\n            </button>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"confirm-dialog\": ConfirmDialog;\n  }\n}\n"]}

package/dist/copy-link-button.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+/**
+ * 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.
+ *
+ * @element copy-link-button
+ * @fires copy-success - The value was copied to the clipboard.
+ * @fires copy-error - Copying to the clipboard failed.
+ */
+export declare class CopyLinkButton extends LitElement {
+    /** Text to copy. Defaults to `window.location.href` at click time. */
+    value: string;
+    /** Accessible label / tooltip text. */
+    label: string;
+    static styles: import("lit").CSSResult[];
+    private _onClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "copy-link-button": CopyLinkButton;
+    }
+}
+//# sourceMappingURL=copy-link-button.d.ts.map

package/dist/copy-link-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-link-button.d.ts","sourceRoot":"","sources":["../src/copy-link-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C;;;;;;;;;;GAUG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,sEAAsE;IAC1D,KAAK,SAAM;IACvB,uCAAuC;IAC3B,KAAK,SAAe;IAEhC,OAAgB,MAAM,4BAsBpB;YAEY,QAAQ;IAYb,MAAM,yCAMd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/copy-link-button.js

@@ -0,0 +1,84 @@
+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 { iconLink } from "./icons.js";
+import { notifyError, notifySuccess } from "./toast-notification.js";
+import { tokens } from "./tokens.js";
+/**
+ * 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.
+ *
+ * @element copy-link-button
+ * @fires copy-success - The value was copied to the clipboard.
+ * @fires copy-error - Copying to the clipboard failed.
+ */
+let CopyLinkButton = class CopyLinkButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Text to copy. Defaults to `window.location.href` at click time. */
+        this.value = "";
+        /** Accessible label / tooltip text. */
+        this.label = "Copy link";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-flex;
+      }
+      button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        color: var(--ui-text-muted, #64748b);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      button:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+        color: var(--ui-text, #0f172a);
+      }
+    `,
+    ]; }
+    async _onClick() {
+        const text = this.value || window.location.href;
+        try {
+            await navigator.clipboard.writeText(text);
+            notifySuccess("Link copied to clipboard");
+            this.dispatchEvent(new CustomEvent("copy-success", { bubbles: true, composed: true }));
+        }
+        catch {
+            notifyError("Couldn't copy the link");
+            this.dispatchEvent(new CustomEvent("copy-error", { bubbles: true, composed: true }));
+        }
+    }
+    render() {
+        return html `
+      <button type="button" aria-label=${this.label} title=${this.label} @click=${this._onClick}>
+        ${iconLink(16)}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property()
+], CopyLinkButton.prototype, "value", void 0);
+__decorate([
+    property()
+], CopyLinkButton.prototype, "label", void 0);
+CopyLinkButton = __decorate([
+    customElement("copy-link-button")
+], CopyLinkButton);
+export { CopyLinkButton };
+//# sourceMappingURL=copy-link-button.js.map

package/dist/copy-link-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-link-button.js","sourceRoot":"","sources":["../src/copy-link-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,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QACL,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;QACvB,uCAAuC;QAC3B,UAAK,GAAG,WAAW,CAAC;IA6ClC,CAAC;aA3CiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;KACF,AAtBqB,CAsBpB;IAEM,KAAK,CAAC,QAAQ;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAChD,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC1C,aAAa,CAAC,0BAA0B,CAAC,CAAC;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACzF,CAAC;QAAC,MAAM,CAAC;YACP,WAAW,CAAC,wBAAwB,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvF,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,KAAK,UAAU,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,QAAQ;UACrF,QAAQ,CAAC,EAAE,CAAC;;KAEjB,CAAC;IACJ,CAAC;CACF,CAAA;AA/Ca;IAAX,QAAQ,EAAE;6CAAY;AAEX;IAAX,QAAQ,EAAE;6CAAqB;AAJrB,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAiD1B","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconLink } from \"./icons.js\";\nimport { notifyError, notifySuccess } from \"./toast-notification.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Small icon button that copies `value` to the clipboard and shows a toast\n * on success/failure (if a `<toast-notification>` element is present), and\n * always dispatches a `copy-success`/`copy-error` CustomEvent so consumers\n * without a toast element can react. Defaults to the current page URL if\n * `value` is unset.\n *\n * @element copy-link-button\n * @fires copy-success - The value was copied to the clipboard.\n * @fires copy-error - Copying to the clipboard failed.\n */\n@customElement(\"copy-link-button\")\nexport class CopyLinkButton extends LitElement {\n  /** Text to copy. Defaults to `window.location.href` at click time. */\n  @property() value = \"\";\n  /** Accessible label / tooltip text. */\n  @property() label = \"Copy link\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      button {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 4px;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      button:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n        color: var(--ui-text, #0f172a);\n      }\n    `,\n  ];\n\n  private async _onClick() {\n    const text = this.value || window.location.href;\n    try {\n      await navigator.clipboard.writeText(text);\n      notifySuccess(\"Link copied to clipboard\");\n      this.dispatchEvent(new CustomEvent(\"copy-success\", { bubbles: true, composed: true }));\n    } catch {\n      notifyError(\"Couldn't copy the link\");\n      this.dispatchEvent(new CustomEvent(\"copy-error\", { bubbles: true, composed: true }));\n    }\n  }\n\n  override render() {\n    return html`\n      <button type=\"button\" aria-label=${this.label} title=${this.label} @click=${this._onClick}>\n        ${iconLink(16)}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"copy-link-button\": CopyLinkButton;\n  }\n}\n"]}

package/dist/distance-value.d.ts

@@ -0,0 +1,24 @@
+import { LitElement, nothing } from "lit";
+/**
+ * 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.
+ *
+ * @element distance-value
+ */
+export declare class DistanceValue extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Distance in miles (imperial). Switches to feet below 0.25 mi. */
+    miles: number | null;
+    /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */
+    km: number | null;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "distance-value": DistanceValue;
+    }
+}
+//# sourceMappingURL=distance-value.d.ts.map

package/dist/distance-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distance-value.d.ts","sourceRoot":"","sources":["../src/distance-value.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAIpB;IAEF,oEAAoE;IACxC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExD,gFAAgF;IACpD,EAAE,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5C,MAAM,0DAId;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/distance-value.js

@@ -0,0 +1,50 @@
+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 { formatMiles, formatKm } from "./utils/distance.js";
+/**
+ * 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.
+ *
+ * @element distance-value
+ */
+let DistanceValue = class DistanceValue extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Distance in miles (imperial). Switches to feet below 0.25 mi. */
+        this.miles = null;
+        /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */
+        this.km = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline;
+    }
+  `; }
+    render() {
+        if (this.km != null)
+            return html `${formatKm(this.km)}`;
+        if (this.miles != null)
+            return html `${formatMiles(this.miles)}`;
+        return nothing;
+    }
+};
+__decorate([
+    property({ type: Number })
+], DistanceValue.prototype, "miles", void 0);
+__decorate([
+    property({ type: Number })
+], DistanceValue.prototype, "km", void 0);
+DistanceValue = __decorate([
+    customElement("distance-value")
+], DistanceValue);
+export { DistanceValue };
+//# sourceMappingURL=distance-value.js.map

package/dist/distance-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distance-value.js","sourceRoot":"","sources":["../src/distance-value.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,WAAW,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;;;;;;GAQG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOL,oEAAoE;QACxC,UAAK,GAAkB,IAAI,CAAC;QAExD,gFAAgF;QACpD,OAAE,GAAkB,IAAI,CAAC;IAOvD,CAAC;aAjBiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAQO,MAAM;QACb,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI;YAAE,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QACvD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI;YAAE,OAAO,IAAI,CAAA,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAChE,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAA;AAV6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA6B;AAG5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAA0B;AAX1C,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAkBzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { formatMiles, formatKm } from \"./utils/distance.js\";\n\n/**\n * Inline distance display. Renders miles/feet or km/m, switching units at\n * sensible thresholds (< 0.25 mi → ft; < 0.5 km → m).\n *\n * Supply exactly one of `miles` or `km`; the other stays null.\n * km support is present but reserved for future use.\n *\n * @element distance-value\n */\n@customElement(\"distance-value\")\nexport class DistanceValue extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline;\n    }\n  `;\n\n  /** Distance in miles (imperial). Switches to feet below 0.25 mi. */\n  @property({ type: Number }) miles: number | null = null;\n\n  /** Distance in kilometers (metric, future). Switches to meters below 0.5 km. */\n  @property({ type: Number }) km: number | null = null;\n\n  override render() {\n    if (this.km != null) return html`${formatKm(this.km)}`;\n    if (this.miles != null) return html`${formatMiles(this.miles)}`;\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"distance-value\": DistanceValue;\n  }\n}\n"]}

package/dist/distribution-chart.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, nothing } from "lit";
+export interface DistributionValue {
+    /** Short label shown on the chart marker, e.g. 'A'. Empty string = show raw value instead. */
+    label: string;
+    value: number;
+}
+/**
+ * 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.
+ *
+ * @element distribution-chart
+ */
+export declare class DistributionChart extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Metric name, fetched from `/api/distribution/<metric>` on change. */
+    metric: string;
+    /** One or more values to mark on the distribution curve. */
+    values: DistributionValue[];
+    /** Colors assigned to markers in order. Defaults to indigo/amber/teal/rose 600s. */
+    markerColors: string[];
+    /** Target font size in CSS pixels (default 11). Always renders at this size regardless of container width. */
+    fontSize: number;
+    private _data;
+    private _loading;
+    private _error;
+    /** Measured element width in CSS pixels. 0 until ResizeObserver fires. */
+    private _width;
+    /** Inner x coordinate (px) of the current hover position, or null when not hovering. */
+    private _hoverX;
+    private _fetchedFor;
+    private _ro;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _maybeFetch;
+    private _renderSvg;
+    private _renderLegend;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "distribution-chart": DistributionChart;
+    }
+}
+//# sourceMappingURL=distribution-chart.d.ts.map

package/dist/distribution-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"distribution-chart.d.ts","sourceRoot":"","sources":["../src/distribution-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAO,MAAM,KAAK,CAAC;AAqB1D,MAAM,WAAW,iBAAiB;IAChC,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAgEpB;IAEF,wEAAwE;IAC5D,MAAM,SAAM;IACxB,4DAA4D;IAC5B,MAAM,EAAE,iBAAiB,EAAE,CAAM;IACjE,oFAAoF;IACpD,YAAY,EAAE,MAAM,EAAE,CAAyB;IAC/E,8GAA8G;IAC1D,QAAQ,SAAM;IAEzD,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAuB;IAC9C,0EAA0E;IACjE,OAAO,CAAC,MAAM,CAAK;IAC5B,wFAAwF;IAC/E,OAAO,CAAC,OAAO,CAAuB;IAE/C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,GAAG,CAA+B;IAEjC,iBAAiB,SAGzB;IAEQ,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE7C;IAED,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,UAAU;IAuFlB,OAAO,CAAC,aAAa;IAmBZ,MAAM,0DAUd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}