@f-ewald/components 0.1.0

package/dist/roman-numeral.js

@@ -0,0 +1,54 @@
+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, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const ROMAN_NUMERALS = {
+    M: 1000,
+    CM: 900,
+    D: 500,
+    CD: 400,
+    C: 100,
+    XC: 90,
+    L: 50,
+    XL: 40,
+    X: 10,
+    IX: 9,
+    V: 5,
+    IV: 4,
+    I: 1,
+};
+/**
+ * Converts an integer to a roman numeral inline.
+ *
+ * @element roman-numeral
+ */
+let RomanNumeral = class RomanNumeral extends LitElement {
+    render() {
+        return html `${this._convertToRoman(this.value)}`;
+    }
+    _convertToRoman(num) {
+        if (!num) {
+            return "NaN";
+        }
+        let remaining = num;
+        let str = "";
+        for (const symbol of Object.keys(ROMAN_NUMERALS)) {
+            const count = Math.floor(remaining / ROMAN_NUMERALS[symbol]);
+            remaining -= count * ROMAN_NUMERALS[symbol];
+            str += symbol.repeat(count);
+        }
+        return str;
+    }
+};
+__decorate([
+    property({ type: Number })
+], RomanNumeral.prototype, "value", void 0);
+RomanNumeral = __decorate([
+    customElement("roman-numeral")
+], RomanNumeral);
+export { RomanNumeral };
+//# sourceMappingURL=roman-numeral.js.map

package/dist/roman-numeral.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roman-numeral.js","sourceRoot":"","sources":["../src/roman-numeral.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,MAAM,cAAc,GAA2B;IAC7C,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,CAAC,EAAE,CAAC;CACL,CAAC;AAEF;;;;GAIG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAKvB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IACnD,CAAC;IAEO,eAAe,CAAC,GAAY;QAClC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,SAAS,GAAG,GAAG,CAAC;QACpB,IAAI,GAAG,GAAG,EAAE,CAAC;QAEb,KAAK,MAAM,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;YAC7D,SAAS,IAAI,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAC5C,GAAG,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,CAAC;IACb,CAAC;CACF,CAAA;AAtBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAHJ,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAyBxB","sourcesContent":["import { LitElement, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nconst ROMAN_NUMERALS: Record<string, number> = {\n  M: 1000,\n  CM: 900,\n  D: 500,\n  CD: 400,\n  C: 100,\n  XC: 90,\n  L: 50,\n  XL: 40,\n  X: 10,\n  IX: 9,\n  V: 5,\n  IV: 4,\n  I: 1,\n};\n\n/**\n * Converts an integer to a roman numeral inline.\n *\n * @element roman-numeral\n */\n@customElement(\"roman-numeral\")\nexport class RomanNumeral extends LitElement {\n  /** Integer value to render as a roman numeral. */\n  @property({ type: Number })\n  value?: number;\n\n  protected override render() {\n    return html`${this._convertToRoman(this.value)}`;\n  }\n\n  private _convertToRoman(num?: number): string {\n    if (!num) {\n      return \"NaN\";\n    }\n\n    let remaining = num;\n    let str = \"\";\n\n    for (const symbol of Object.keys(ROMAN_NUMERALS)) {\n      const count = Math.floor(remaining / ROMAN_NUMERALS[symbol]);\n      remaining -= count * ROMAN_NUMERALS[symbol];\n      str += symbol.repeat(count);\n    }\n\n    return str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"roman-numeral\": RomanNumeral;\n  }\n}\n"]}

package/dist/slide-panel.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+/**
+ * Generic sliding panel shell. Handles positioning, open/close animation,
+ * header chrome, and a close button. Body content is provided via the
+ * default slot; the consumer controls its own padding and overflow.
+ *
+ * Desktop: 300 px fixed right-side panel that slides from the right.
+ * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+ *
+ * @element slide-panel
+ * @fires panel-close - User clicked the close (✕) button.
+ */
+export declare class SlidePanel extends LitElement {
+    /** Whether the panel is currently visible. */
+    open: boolean;
+    /** Title text shown in the panel header (overridable via slot="title"). */
+    heading: string;
+    static styles: import("lit").CSSResult[];
+    private _close;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "slide-panel": SlidePanel;
+    }
+}
+//# sourceMappingURL=slide-panel.d.ts.map

package/dist/slide-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-panel.d.ts","sourceRoot":"","sources":["../src/slide-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,8CAA8C;IACjB,IAAI,UAAS;IAC1C,2EAA2E;IAC/D,OAAO,SAAM;IAEzB,OAAgB,MAAM,4BA0FpB;IAEF,OAAO,CAAC,MAAM;IAIL,MAAM,yCAad;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/slide-panel.js

@@ -0,0 +1,149 @@
+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 { iconX } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * Generic sliding panel shell. Handles positioning, open/close animation,
+ * header chrome, and a close button. Body content is provided via the
+ * default slot; the consumer controls its own padding and overflow.
+ *
+ * Desktop: 300 px fixed right-side panel that slides from the right.
+ * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+ *
+ * @element slide-panel
+ * @fires panel-close - User clicked the close (✕) button.
+ */
+let SlidePanel = class SlidePanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the panel is currently visible. */
+        this.open = false;
+        /** Title text shown in the panel header (overridable via slot="title"). */
+        this.heading = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .panel {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 300px;
+        z-index: 20;
+        background: var(--ui-surface, #fff);
+        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));
+        transform: translateX(110%);
+        transition: transform 0.25s ease;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .panel.open {
+        transform: translateX(0);
+      }
+      .panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.625rem;
+        border-bottom: 1px solid var(--ui-border, #e2e8f0);
+        flex: 0 0 auto;
+      }
+      .panel-title {
+        font-weight: 600;
+        font-size: var(--ui-font-size, 0.875rem);
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        color: var(--ui-text, #0f172a);
+        flex: 1 1 auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 0.5rem;
+      }
+      .close-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        color: var(--ui-text-muted, #64748b);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .close-btn:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .handle {
+        display: none;
+      }
+      @media (max-width: 768px) {
+        .panel {
+          top: auto;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          width: auto;
+          height: 60vh;
+          border-radius: 14px 14px 0 0;
+          box-shadow: 0 -3px 20px rgb(0 0 0 / 0.18);
+          transform: translateY(110%);
+        }
+        .panel.open {
+          transform: translateY(0);
+        }
+        .handle {
+          display: block;
+          width: 36px;
+          height: 4px;
+          background: var(--ui-border, #e2e8f0);
+          border-radius: 2px;
+          margin: 10px auto 0;
+          flex: 0 0 auto;
+        }
+        .panel-header {
+          padding: 4px 10px 8px;
+        }
+      }
+    `,
+    ]; }
+    _close() {
+        this.dispatchEvent(new CustomEvent("panel-close", { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <div class="panel ${this.open ? "open" : ""}">
+        <div class="handle"></div>
+        <div class="panel-header">
+          <slot name="title">
+            ${this.heading ? html `<span class="panel-title">${this.heading}</span>` : null}
+          </slot>
+          <button class="close-btn" aria-label="Close panel" @click=${this._close}>${iconX(18)}</button>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], SlidePanel.prototype, "open", void 0);
+__decorate([
+    property()
+], SlidePanel.prototype, "heading", void 0);
+SlidePanel = __decorate([
+    customElement("slide-panel")
+], SlidePanel);
+export { SlidePanel };
+//# sourceMappingURL=slide-panel.js.map

package/dist/slide-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-panel.js","sourceRoot":"","sources":["../src/slide-panel.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,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACL,8CAA8C;QACjB,SAAI,GAAG,KAAK,CAAC;QAC1C,2EAA2E;QAC/D,YAAO,GAAG,EAAE,CAAC;IAgH3B,CAAC;aA9GiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFF;KACF,AA1FqB,CA0FpB;IAEM,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;;;cAInC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI;;sEAEpB,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;;;;KAIzF,CAAC;IACJ,CAAC;CACF,CAAA;AAlH8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAc;AAE9B;IAAX,QAAQ,EAAE;2CAAc;AAJd,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoHtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Generic sliding panel shell. Handles positioning, open/close animation,\n * header chrome, and a close button. Body content is provided via the\n * default slot; the consumer controls its own padding and overflow.\n *\n * Desktop: 300 px fixed right-side panel that slides from the right.\n * Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.\n *\n * @element slide-panel\n * @fires panel-close - User clicked the close (✕) button.\n */\n@customElement(\"slide-panel\")\nexport class SlidePanel extends LitElement {\n  /** Whether the panel is currently visible. */\n  @property({ type: Boolean }) open = false;\n  /** Title text shown in the panel header (overridable via slot=\"title\"). */\n  @property() heading = \"\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .panel {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        width: 300px;\n        z-index: 20;\n        background: var(--ui-surface, #fff);\n        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));\n        transform: translateX(110%);\n        transition: transform 0.25s ease;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n      .panel.open {\n        transform: translateX(0);\n      }\n      .panel-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem 0.625rem;\n        border-bottom: 1px solid var(--ui-border, #e2e8f0);\n        flex: 0 0 auto;\n      }\n      .panel-title {\n        font-weight: 600;\n        font-size: var(--ui-font-size, 0.875rem);\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        color: var(--ui-text, #0f172a);\n        flex: 1 1 auto;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        padding-right: 0.5rem;\n      }\n      .close-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 0.25rem 0.5rem;\n        color: var(--ui-text-muted, #64748b);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .close-btn:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .handle {\n        display: none;\n      }\n      @media (max-width: 768px) {\n        .panel {\n          top: auto;\n          right: 0;\n          bottom: 0;\n          left: 0;\n          width: auto;\n          height: 60vh;\n          border-radius: 14px 14px 0 0;\n          box-shadow: 0 -3px 20px rgb(0 0 0 / 0.18);\n          transform: translateY(110%);\n        }\n        .panel.open {\n          transform: translateY(0);\n        }\n        .handle {\n          display: block;\n          width: 36px;\n          height: 4px;\n          background: var(--ui-border, #e2e8f0);\n          border-radius: 2px;\n          margin: 10px auto 0;\n          flex: 0 0 auto;\n        }\n        .panel-header {\n          padding: 4px 10px 8px;\n        }\n      }\n    `,\n  ];\n\n  private _close() {\n    this.dispatchEvent(new CustomEvent(\"panel-close\", { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel ${this.open ? \"open\" : \"\"}\">\n        <div class=\"handle\"></div>\n        <div class=\"panel-header\">\n          <slot name=\"title\">\n            ${this.heading ? html`<span class=\"panel-title\">${this.heading}</span>` : null}\n          </slot>\n          <button class=\"close-btn\" aria-label=\"Close panel\" @click=${this._close}>${iconX(18)}</button>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"slide-panel\": SlidePanel;\n  }\n}\n"]}

package/dist/toast-notification.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, nothing } from "lit";
+export type ToastVariant = "error" | "info" | "success";
+interface ToastOptions {
+    /** Visual style; also selects the accent color. Defaults to "info". */
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms. Pass 0 to require a manual close. Defaults to 5000. */
+    duration?: number;
+}
+/**
+ * Fixed-position stack of dismissible notifications, anchored top-right
+ * (top-full-width on mobile). Not wired to any app state yet — callers add
+ * toasts imperatively via the `show()` method on a live element reference,
+ * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
+ * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
+ * exported from this file. Each toast auto-dismisses after `duration` ms and
+ * can also be dismissed via its ✕ button. Appears/disappears instantly — no
+ * slide/fade transitions.
+ *
+ * @element toast-notification
+ */
+export declare class ToastNotification extends LitElement {
+    private _toasts;
+    private _nextId;
+    private _timers;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Queues a toast for display.
+     * @param message Text to show.
+     * @param options Variant + auto-dismiss duration (see {@link ToastOptions}).
+     * @returns The toast's id — pass to `dismiss()` to remove it early.
+     */
+    show(message: string, options?: ToastOptions): number;
+    /**
+     * Removes a toast immediately, cancelling its pending auto-dismiss timer if any.
+     * @param id The id returned by `show()`.
+     */
+    dismiss(id: number): void;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "toast-notification": ToastNotification;
+    }
+}
+/** Shows an error toast. Use for connection/network failures, not validation errors. */
+export declare function notifyError(message: string): void;
+/** Shows a success toast. */
+export declare function notifySuccess(message: string): void;
+/** Shows an info toast. */
+export declare function notifyInfo(message: string): void;
+export {};
+//# sourceMappingURL=toast-notification.d.ts.map

package/dist/toast-notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.d.ts","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExD,UAAU,YAAY;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAUD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACtC,OAAO,CAAC,OAAO,CAAe;IAEvC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAgB,MAAM,4BAsEpB;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAYxD;IAED;;;OAGG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,QAOjB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,0DAcd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;AAMD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAE1C;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAE5C;AAED,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,QAEzC"}

package/dist/toast-notification.js

@@ -0,0 +1,173 @@
+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, state } from "lit/decorators.js";
+import { iconX } from "./icons.js";
+import { tokens } from "./tokens.js";
+const DEFAULT_DURATION_MS = 5000;
+/**
+ * Fixed-position stack of dismissible notifications, anchored top-right
+ * (top-full-width on mobile). Not wired to any app state yet — callers add
+ * toasts imperatively via the `show()` method on a live element reference,
+ * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
+ * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
+ * exported from this file. Each toast auto-dismisses after `duration` ms and
+ * can also be dismissed via its ✕ button. Appears/disappears instantly — no
+ * slide/fade transitions.
+ *
+ * @element toast-notification
+ */
+let ToastNotification = class ToastNotification extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._toasts = [];
+        this._nextId = 0;
+        this._timers = new Map();
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        z-index: 200;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        max-width: 360px;
+        pointer-events: none;
+      }
+      .toast {
+        pointer-events: auto;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.5rem;
+        border-radius: var(--ui-radius, 0.5rem);
+        padding: 0.625rem 0.75rem;
+        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)
+        );
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size, 0.875rem);
+        line-height: 1.4;
+        color: #fff;
+        background: var(--ui-text, #0f172a);
+      }
+      .toast.error {
+        background: var(--ui-danger, #dc2626);
+      }
+      .toast.success {
+        background: var(--ui-success, #16a34a);
+      }
+      .toast.info {
+        background: var(--ui-primary, #4f46e5);
+      }
+      .message {
+        flex: 1 1 auto;
+        word-break: break-word;
+      }
+      .close {
+        flex: 0 0 auto;
+        background: none;
+        border: none;
+        padding: 2px;
+        margin: -2px -2px -2px 0;
+        color: inherit;
+        opacity: 0.8;
+        cursor: pointer;
+        line-height: 0;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+      }
+      .close:hover {
+        opacity: 1;
+        background: rgb(255 255 255 / 0.15);
+      }
+      @media (max-width: 768px) {
+        :host {
+          top: 0.75rem;
+          right: 0.75rem;
+          left: 0.75rem;
+          max-width: none;
+        }
+      }
+    `,
+    ]; }
+    /**
+     * Queues a toast for display.
+     * @param message Text to show.
+     * @param options Variant + auto-dismiss duration (see {@link ToastOptions}).
+     * @returns The toast's id — pass to `dismiss()` to remove it early.
+     */
+    show(message, options = {}) {
+        const id = this._nextId++;
+        const variant = options.variant ?? "info";
+        const duration = options.duration ?? DEFAULT_DURATION_MS;
+        this._toasts = [...this._toasts, { id, message, variant }];
+        if (duration > 0) {
+            this._timers.set(id, setTimeout(() => this.dismiss(id), duration));
+        }
+        return id;
+    }
+    /**
+     * Removes a toast immediately, cancelling its pending auto-dismiss timer if any.
+     * @param id The id returned by `show()`.
+     */
+    dismiss(id) {
+        const timer = this._timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this._timers.delete(id);
+        }
+        this._toasts = this._toasts.filter((t) => t.id !== id);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        for (const timer of this._timers.values())
+            clearTimeout(timer);
+        this._timers.clear();
+    }
+    render() {
+        if (this._toasts.length === 0)
+            return nothing;
+        return html `
+      ${this._toasts.map((t) => html `
+          <div class="toast ${t.variant}" role="status">
+            <span class="message">${t.message}</span>
+            <button class="close" aria-label="Dismiss notification" @click=${() => this.dismiss(t.id)}>
+              ${iconX(14)}
+            </button>
+          </div>
+        `)}
+    `;
+    }
+};
+__decorate([
+    state()
+], ToastNotification.prototype, "_toasts", void 0);
+ToastNotification = __decorate([
+    customElement("toast-notification")
+], ToastNotification);
+export { ToastNotification };
+function getToast() {
+    return document.querySelector("toast-notification");
+}
+/** Shows an error toast. Use for connection/network failures, not validation errors. */
+export function notifyError(message) {
+    getToast()?.show(message, { variant: "error" });
+}
+/** Shows a success toast. */
+export function notifySuccess(message) {
+    getToast()?.show(message, { variant: "success" });
+}
+/** Shows an info toast. */
+export function notifyInfo(message) {
+    getToast()?.show(message, { variant: "info" });
+}
+//# sourceMappingURL=toast-notification.js.map

package/dist/toast-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.js","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { iconX } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ToastVariant = \"error\" | \"info\" | \"success\";\n\ninterface ToastOptions {\n  /** Visual style; also selects the accent color. Defaults to \"info\". */\n  variant?: ToastVariant;\n  /** Auto-dismiss delay in ms. Pass 0 to require a manual close. Defaults to 5000. */\n  duration?: number;\n}\n\ninterface Toast {\n  id: number;\n  message: string;\n  variant: ToastVariant;\n}\n\nconst DEFAULT_DURATION_MS = 5000;\n\n/**\n * Fixed-position stack of dismissible notifications, anchored top-right\n * (top-full-width on mobile). Not wired to any app state yet — callers add\n * toasts imperatively via the `show()` method on a live element reference,\n * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,\n * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers\n * exported from this file. Each toast auto-dismisses after `duration` ms and\n * can also be dismissed via its ✕ button. Appears/disappears instantly — no\n * slide/fade transitions.\n *\n * @element toast-notification\n */\n@customElement(\"toast-notification\")\nexport class ToastNotification extends LitElement {\n  @state() private _toasts: Toast[] = [];\n\n  private _nextId = 0;\n  private _timers = new Map<number, ReturnType<typeof setTimeout>>();\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        position: fixed;\n        top: 1rem;\n        right: 1rem;\n        z-index: 200;\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n        max-width: 360px;\n        pointer-events: none;\n      }\n      .toast {\n        pointer-events: auto;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.5rem;\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.625rem 0.75rem;\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        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.4;\n        color: #fff;\n        background: var(--ui-text, #0f172a);\n      }\n      .toast.error {\n        background: var(--ui-danger, #dc2626);\n      }\n      .toast.success {\n        background: var(--ui-success, #16a34a);\n      }\n      .toast.info {\n        background: var(--ui-primary, #4f46e5);\n      }\n      .message {\n        flex: 1 1 auto;\n        word-break: break-word;\n      }\n      .close {\n        flex: 0 0 auto;\n        background: none;\n        border: none;\n        padding: 2px;\n        margin: -2px -2px -2px 0;\n        color: inherit;\n        opacity: 0.8;\n        cursor: pointer;\n        line-height: 0;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n      }\n      .close:hover {\n        opacity: 1;\n        background: rgb(255 255 255 / 0.15);\n      }\n      @media (max-width: 768px) {\n        :host {\n          top: 0.75rem;\n          right: 0.75rem;\n          left: 0.75rem;\n          max-width: none;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Queues a toast for display.\n   * @param message Text to show.\n   * @param options Variant + auto-dismiss duration (see {@link ToastOptions}).\n   * @returns The toast's id — pass to `dismiss()` to remove it early.\n   */\n  show(message: string, options: ToastOptions = {}): number {\n    const id = this._nextId++;\n    const variant = options.variant ?? \"info\";\n    const duration = options.duration ?? DEFAULT_DURATION_MS;\n    this._toasts = [...this._toasts, { id, message, variant }];\n    if (duration > 0) {\n      this._timers.set(\n        id,\n        setTimeout(() => this.dismiss(id), duration),\n      );\n    }\n    return id;\n  }\n\n  /**\n   * Removes a toast immediately, cancelling its pending auto-dismiss timer if any.\n   * @param id The id returned by `show()`.\n   */\n  dismiss(id: number) {\n    const timer = this._timers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      this._timers.delete(id);\n    }\n    this._toasts = this._toasts.filter((t) => t.id !== id);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    for (const timer of this._timers.values()) clearTimeout(timer);\n    this._timers.clear();\n  }\n\n  override render() {\n    if (this._toasts.length === 0) return nothing;\n    return html`\n      ${this._toasts.map(\n        (t) => html`\n          <div class=\"toast ${t.variant}\" role=\"status\">\n            <span class=\"message\">${t.message}</span>\n            <button class=\"close\" aria-label=\"Dismiss notification\" @click=${() => this.dismiss(t.id)}>\n              ${iconX(14)}\n            </button>\n          </div>\n        `,\n      )}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"toast-notification\": ToastNotification;\n  }\n}\n\nfunction getToast(): ToastNotification | null {\n  return document.querySelector(\"toast-notification\");\n}\n\n/** Shows an error toast. Use for connection/network failures, not validation errors. */\nexport function notifyError(message: string) {\n  getToast()?.show(message, { variant: \"error\" });\n}\n\n/** Shows a success toast. */\nexport function notifySuccess(message: string) {\n  getToast()?.show(message, { variant: \"success\" });\n}\n\n/** Shows an info toast. */\nexport function notifyInfo(message: string) {\n  getToast()?.show(message, { variant: \"info\" });\n}\n"]}

package/dist/tokens.css

@@ -0,0 +1,21 @@
+:root {
+  --ui-primary: #4f46e5;
+  --ui-primary-hover: #4338ca;
+  --ui-danger: #dc2626;
+  --ui-danger-hover: #b91c1c;
+  --ui-success: #16a34a;
+  --ui-text: #0f172a;
+  --ui-text-muted: #64748b;
+  --ui-border: #e2e8f0;
+  --ui-surface: #ffffff;
+  --ui-surface-muted: #f8fafc;
+  --ui-overlay: rgb(15 23 42 / 0.45);
+  --ui-radius: 0.5rem;
+  --ui-radius-sm: 0.25rem;
+  --ui-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ui-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --ui-focus-ring: 0 0 0 3px rgb(79 70 229 / 0.35);
+  --ui-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ui-font-size: 0.875rem;
+  --ui-font-size-sm: 0.75rem;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Design token values, sourced from Tailwind v4's default theme palette.
+ * Each entry maps a `--ui-*` custom property name to its default value.
+ * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks
+ * throughout component styles, so components render correctly with zero
+ * external CSS. Consumers may override any of these by setting the custom
+ * property on `:root` or an ancestor element (see `tokens.css`).
+ */
+export declare const tokenValues: Record<string, string>;
+/**
+ * A shared `:host` stylesheet that establishes the token custom properties
+ * with their fallback values. Import and include this in every component's
+ * `static styles` array alongside its component-specific `css` block.
+ */
+export declare const tokens: import("lit").CSSResult;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA4B9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,yBAuClB,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,79 @@
+import { css } from "lit";
+/**
+ * Design token values, sourced from Tailwind v4's default theme palette.
+ * Each entry maps a `--ui-*` custom property name to its default value.
+ * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks
+ * throughout component styles, so components render correctly with zero
+ * external CSS. Consumers may override any of these by setting the custom
+ * property on `:root` or an ancestor element (see `tokens.css`).
+ */
+export const tokenValues = {
+    // Colors
+    "--ui-primary": "#4f46e5", // indigo-600
+    "--ui-primary-hover": "#4338ca", // indigo-700
+    "--ui-danger": "#dc2626", // red-600
+    "--ui-danger-hover": "#b91c1c", // red-700
+    "--ui-success": "#16a34a", // green-600
+    "--ui-text": "#0f172a", // slate-900
+    "--ui-text-muted": "#64748b", // slate-500
+    "--ui-border": "#e2e8f0", // slate-200
+    "--ui-surface": "#ffffff", // white
+    "--ui-surface-muted": "#f8fafc", // slate-50
+    "--ui-overlay": "rgb(15 23 42 / 0.45)", // slate-900 / 45%
+    // Shape / depth
+    "--ui-radius": "0.5rem", // rounded-lg
+    "--ui-radius-sm": "0.25rem", // rounded
+    "--ui-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", // shadow-md
+    "--ui-shadow-lg": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", // shadow-xl
+    "--ui-focus-ring": "0 0 0 3px rgb(79 70 229 / 0.35)",
+    // Type
+    "--ui-font": 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    "--ui-font-size": "0.875rem",
+    "--ui-font-size-sm": "0.75rem",
+};
+/**
+ * A shared `:host` stylesheet that establishes the token custom properties
+ * with their fallback values. Import and include this in every component's
+ * `static styles` array alongside its component-specific `css` block.
+ */
+export const tokens = css `
+  :host {
+    --ui-primary: var(--ui-primary, #4f46e5);
+    --ui-primary-hover: var(--ui-primary-hover, #4338ca);
+    --ui-danger: var(--ui-danger, #dc2626);
+    --ui-danger-hover: var(--ui-danger-hover, #b91c1c);
+    --ui-success: var(--ui-success, #16a34a);
+    --ui-text: var(--ui-text, #0f172a);
+    --ui-text-muted: var(--ui-text-muted, #64748b);
+    --ui-border: var(--ui-border, #e2e8f0);
+    --ui-surface: var(--ui-surface, #ffffff);
+    --ui-surface-muted: var(--ui-surface-muted, #f8fafc);
+    --ui-overlay: var(--ui-overlay, rgb(15 23 42 / 0.45));
+    --ui-radius: var(--ui-radius, 0.5rem);
+    --ui-radius-sm: var(--ui-radius-sm, 0.25rem);
+    --ui-shadow: var(
+      --ui-shadow,
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1)
+    );
+    --ui-shadow-lg: var(
+      --ui-shadow-lg,
+      0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1)
+    );
+    --ui-focus-ring: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+    --ui-font: var(
+      --ui-font,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
+    );
+    --ui-font-size: var(--ui-font-size, 0.875rem);
+    --ui-font-size-sm: var(--ui-font-size-sm, 0.75rem);
+  }
+`;
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,QAAQ;IACnC,oBAAoB,EAAE,SAAS,EAAE,WAAW;IAC5C,cAAc,EAAE,sBAAsB,EAAE,kBAAkB;IAE1D,gBAAgB;IAChB,aAAa,EAAE,QAAQ,EAAE,aAAa;IACtC,gBAAgB,EAAE,SAAS,EAAE,UAAU;IACvC,aAAa,EACX,kEAAkE,EAAE,YAAY;IAClF,gBAAgB,EACd,qEAAqE,EAAE,YAAY;IACrF,iBAAiB,EAAE,iCAAiC;IAEpD,OAAO;IACP,WAAW,EACT,oHAAoH;IACtH,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;CAC/B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC","sourcesContent":["import { css } from \"lit\";\n\n/**\n * Design token values, sourced from Tailwind v4's default theme palette.\n * Each entry maps a `--ui-*` custom property name to its default value.\n * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks\n * throughout component styles, so components render correctly with zero\n * external CSS. Consumers may override any of these by setting the custom\n * property on `:root` or an ancestor element (see `tokens.css`).\n */\nexport const tokenValues: Record<string, string> = {\n  // Colors\n  \"--ui-primary\": \"#4f46e5\", // indigo-600\n  \"--ui-primary-hover\": \"#4338ca\", // indigo-700\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-text\": \"#0f172a\", // slate-900\n  \"--ui-text-muted\": \"#64748b\", // slate-500\n  \"--ui-border\": \"#e2e8f0\", // slate-200\n  \"--ui-surface\": \"#ffffff\", // white\n  \"--ui-surface-muted\": \"#f8fafc\", // slate-50\n  \"--ui-overlay\": \"rgb(15 23 42 / 0.45)\", // slate-900 / 45%\n\n  // Shape / depth\n  \"--ui-radius\": \"0.5rem\", // rounded-lg\n  \"--ui-radius-sm\": \"0.25rem\", // rounded\n  \"--ui-shadow\":\n    \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\", // shadow-md\n  \"--ui-shadow-lg\":\n    \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\", // shadow-xl\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(79 70 229 / 0.35)\",\n\n  // Type\n  \"--ui-font\":\n    'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n};\n\n/**\n * A shared `:host` stylesheet that establishes the token custom properties\n * with their fallback values. Import and include this in every component's\n * `static styles` array alongside its component-specific `css` block.\n */\nexport const tokens = css`\n  :host {\n    --ui-primary: var(--ui-primary, #4f46e5);\n    --ui-primary-hover: var(--ui-primary-hover, #4338ca);\n    --ui-danger: var(--ui-danger, #dc2626);\n    --ui-danger-hover: var(--ui-danger-hover, #b91c1c);\n    --ui-success: var(--ui-success, #16a34a);\n    --ui-text: var(--ui-text, #0f172a);\n    --ui-text-muted: var(--ui-text-muted, #64748b);\n    --ui-border: var(--ui-border, #e2e8f0);\n    --ui-surface: var(--ui-surface, #ffffff);\n    --ui-surface-muted: var(--ui-surface-muted, #f8fafc);\n    --ui-overlay: var(--ui-overlay, rgb(15 23 42 / 0.45));\n    --ui-radius: var(--ui-radius, 0.5rem);\n    --ui-radius-sm: var(--ui-radius-sm, 0.25rem);\n    --ui-shadow: var(\n      --ui-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    --ui-shadow-lg: 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    --ui-focus-ring: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n    --ui-font: var(\n      --ui-font,\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      \"Apple Color Emoji\",\n      \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\",\n      \"Noto Color Emoji\"\n    );\n    --ui-font-size: var(--ui-font-size, 0.875rem);\n    --ui-font-size-sm: var(--ui-font-size-sm, 0.75rem);\n  }\n`;\n"]}

package/dist/utils/distance.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Formats a distance in miles, switching to feet below 0.25 mi.
+ * At ≥10 mi precision drops to whole miles.
+ */
+export declare function formatMiles(miles: number): string;
+/**
+ * Formats a distance in kilometers, switching to meters below 0.5 km.
+ * At ≥10 km precision drops to whole kilometers. (Future use.)
+ */
+export declare function formatKm(km: number): string;
+//# sourceMappingURL=distance.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"distance.d.ts","sourceRoot":"","sources":["../../src/utils/distance.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAM3C"}