@lyeve-labs/ui-kit 0.31.0 → 0.32.0

package/dist/internal/pricing.d.ts

@@ -0,0 +1,110 @@
+/**
+ * The cart's shape and the volume ladder, shared by every surface that sells.
+ *
+ * Two sites sold the same catalog from two components. One posted the
+ * selection to the server and rendered the price that came back, the other
+ * computed a total in the browser from a catalog it had fetched, with a
+ * hardcoded list behind it for when the fetch failed. They agreed by
+ * coincidence, and the second carried a comment recording how thin the
+ * coincidence was: the discount has to be truncated rather than rounded, or
+ * the quote is a cent deeper than the charge.
+ *
+ * So nothing here computes a price. The types describe what the sales API
+ * returns, and the functions are presentation over the ladder: which rung a
+ * selection stands on and how far the next one is. The total always comes
+ * from the server, on both sites, because a price computed twice is a price
+ * that will disagree once.
+ */
+/** One sellable capability, as the catalog endpoint reports it. */
+export interface CartPlugin {
+    sku: string;
+    name: string;
+    /** Integer cents, always. No float ever holds money here. */
+    price_cents: number;
+    category?: string;
+    blurb?: string;
+    /** `soon` is shown and cannot be bought. Anything else sells. */
+    status?: string;
+}
+/** One rung of the volume ladder. */
+export interface DiscountBracket {
+    plugins: number;
+    discount_pct: number;
+}
+/** The catalog endpoint's whole answer. */
+export interface CartCatalog {
+    plugins: CartPlugin[];
+    discount_brackets: DiscountBracket[];
+}
+/** One line of a priced cart. */
+export interface CartQuoteItem {
+    sku: string;
+    name: string;
+    unit_cents: number;
+    discounted_cents: number;
+}
+/**
+ * The server's price for one selection. Rendered, never recomputed.
+ *
+ * `count` and `items` are here so a consumer can tell whether the quote it
+ * holds still describes what the reader has selected. A stale total beside a
+ * changed cart is the one failure this component cannot show its way out of.
+ */
+export interface CartQuote {
+    items: CartQuoteItem[];
+    count: number;
+    subtotal_cents: number;
+    volume_discount_pct: number;
+    volume_discount_cents: number;
+    community_discount_pct: number;
+    community_discount_cents: number;
+    total_cents: number;
+    /** A year at ten months' price. Zero on a monthly quote. */
+    annual_total_cents?: number;
+}
+export type BillingPeriod = 'monthly' | 'annual';
+/** Where a selection stands on the ladder, and what the next rung is worth. */
+export interface LadderState {
+    /** The plugin count the ladder was read at. */
+    count: number;
+    /** The discount that count has reached. */
+    reachedPct: number;
+    /** The first rung above the count worth more than the one reached. */
+    next: {
+        plugins: number;
+        discount_pct: number;
+        more: number;
+    } | null;
+    /** Index of the rung the count stands on, ascending, or -1 below the first. */
+    active: number;
+}
+export declare function ladderState(brackets: DiscountBracket[], count: number): LadderState;
+/**
+ * How many capabilities the bill will carry.
+ *
+ * For a new cart that is what is selected. For a change to a live
+ * subscription it is what is held as well, because that is the count the
+ * server prices the change at. Reading the cart alone put a subscriber on the
+ * list-price rung beside a total that had already taken the discount.
+ */
+export declare function billedCount(opts: {
+    selected: Iterable<string>;
+    held?: Iterable<string>;
+    change?: boolean;
+    pricedSkus?: string[] | null;
+}): number;
+/** One row per rung, labeled by the range it covers. */
+export declare function ladderRows(brackets: DiscountBracket[]): {
+    from: number;
+    to: number | null;
+    discount_pct: number;
+}[];
+/**
+ * Money, for display.
+ *
+ * The locale is fixed for the reason `number.ts` states: a server and the
+ * browser that hydrates its output do not have to report the same one, and a
+ * figure that changes under the reader is worse than one that is not local to
+ * them.
+ */
+export declare function formatCents(cents: number, currency?: string): string;

package/dist/internal/pricing.js

@@ -0,0 +1,77 @@
+/**
+ * The cart's shape and the volume ladder, shared by every surface that sells.
+ *
+ * Two sites sold the same catalog from two components. One posted the
+ * selection to the server and rendered the price that came back, the other
+ * computed a total in the browser from a catalog it had fetched, with a
+ * hardcoded list behind it for when the fetch failed. They agreed by
+ * coincidence, and the second carried a comment recording how thin the
+ * coincidence was: the discount has to be truncated rather than rounded, or
+ * the quote is a cent deeper than the charge.
+ *
+ * So nothing here computes a price. The types describe what the sales API
+ * returns, and the functions are presentation over the ladder: which rung a
+ * selection stands on and how far the next one is. The total always comes
+ * from the server, on both sites, because a price computed twice is a price
+ * that will disagree once.
+ */
+export function ladderState(brackets, count) {
+    const sorted = [...brackets].sort((a, b) => a.plugins - b.plugins);
+    const reachedPct = sorted
+        .filter((b) => b.plugins <= count)
+        .reduce((m, b) => Math.max(m, b.discount_pct), 0);
+    const step = sorted.find((b) => b.plugins > count && b.discount_pct > reachedPct);
+    let active = -1;
+    sorted.forEach((b, i) => {
+        if (count >= b.plugins)
+            active = i;
+    });
+    return {
+        count,
+        reachedPct,
+        next: step
+            ? { plugins: step.plugins, discount_pct: step.discount_pct, more: step.plugins - count }
+            : null,
+        active,
+    };
+}
+/**
+ * How many capabilities the bill will carry.
+ *
+ * For a new cart that is what is selected. For a change to a live
+ * subscription it is what is held as well, because that is the count the
+ * server prices the change at. Reading the cart alone put a subscriber on the
+ * list-price rung beside a total that had already taken the discount.
+ */
+export function billedCount(opts) {
+    const added = new Set(opts.selected);
+    if (!opts.change)
+        return added.size;
+    if (opts.pricedSkus)
+        return new Set(opts.pricedSkus).size;
+    return new Set([...(opts.held ?? []), ...added]).size;
+}
+/** One row per rung, labeled by the range it covers. */
+export function ladderRows(brackets) {
+    const sorted = [...brackets].sort((a, b) => a.plugins - b.plugins);
+    return sorted.map((b, i) => {
+        const next = sorted[i + 1];
+        return { from: b.plugins, to: next ? next.plugins - 1 : null, discount_pct: b.discount_pct };
+    });
+}
+/**
+ * Money, for display.
+ *
+ * The locale is fixed for the reason `number.ts` states: a server and the
+ * browser that hydrates its output do not have to report the same one, and a
+ * figure that changes under the reader is worse than one that is not local to
+ * them.
+ */
+export function formatCents(cents, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(cents / 100);
+}

package/dist/internal/rollup.d.ts

@@ -1,15 +1,15 @@
 /**
  * The tri-state contract behind a permissions matrix and a checkable tree.
  *
- * A parent control does two jobs at once: it summarises the rows beneath it,
+ * A parent control does two jobs at once: it summarizes the rows beneath it,
  * and a click on it writes every one of them. Both surfaces folded that summary
  * with `rows.every(has)`, which is true over an empty array, so a group whose
  * rows were all filtered away or all disabled drew as fully granted and the
- * click that followed meant clear rather than fill. Summarising by count rather
+ * click that followed meant clear rather than fill. Summarizing by count rather
  * than by fold, and separating what may be written from what is counted, is the
  * whole reason this module exists.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** What a parent control shows: nothing granted, part granted, all granted. */
 export type TriState = 'none' | 'some' | 'all';

package/dist/internal/rollup.js

@@ -1,15 +1,15 @@
 /**
  * The tri-state contract behind a permissions matrix and a checkable tree.
  *
- * A parent control does two jobs at once: it summarises the rows beneath it,
+ * A parent control does two jobs at once: it summarizes the rows beneath it,
  * and a click on it writes every one of them. Both surfaces folded that summary
  * with `rows.every(has)`, which is true over an empty array, so a group whose
  * rows were all filtered away or all disabled drew as fully granted and the
- * click that followed meant clear rather than fill. Summarising by count rather
+ * click that followed meant clear rather than fill. Summarizing by count rather
  * than by fold, and separating what may be written from what is counted, is the
  * whole reason this module exists.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Rolls a set of rows up to one state.

package/dist/internal/scroll-edges.d.ts

@@ -6,13 +6,13 @@
  * the tab past the edge is otherwise unannounced. The arithmetic is the same
  * in both and lives here so a third scroller cannot get it subtly different.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 export interface ScrollEdges {
     before: boolean;
     after: boolean;
 }
-/** The three metrics the answer is read from; an element has all of them. */
+/** The three metrics the answer is read from. An element has all of them. */
 export interface ScrollMetrics {
     scrollWidth: number;
     clientWidth: number;
@@ -22,8 +22,8 @@ export declare function scrollEdges(el: ScrollMetrics): ScrollEdges;
 /**
  * The fade itself: a dark gradient on the edge, outside the scroll box so it
  * does not scroll away with the content it describes. Dark rather than a
- * palette colour, because the box sits on the page in one place and inside
- * a card in another and no surface token is the colour to fade to; the
+ * palette color, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the color to fade to. The
  * scrims use black at an alpha for the same reason and it reads in both
  * themes. The direction is logical, so a right-to-left page fades the other
  * way.

package/dist/internal/scroll-edges.js

@@ -6,7 +6,7 @@
  * the tab past the edge is otherwise unannounced. The arithmetic is the same
  * in both and lives here so a third scroller cannot get it subtly different.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 export function scrollEdges(el) {
     const slack = el.scrollWidth - el.clientWidth;
@@ -16,14 +16,14 @@ export function scrollEdges(el) {
         return { before: false, after: false };
     // A right-to-left box reports the offset as a negative number, and the two
     // edges are the same two edges either way round.
-    const travelled = Math.abs(el.scrollLeft);
-    return { before: travelled > 1, after: travelled < slack - 1 };
+    const traveled = Math.abs(el.scrollLeft);
+    return { before: traveled > 1, after: traveled < slack - 1 };
 }
 /**
  * The fade itself: a dark gradient on the edge, outside the scroll box so it
  * does not scroll away with the content it describes. Dark rather than a
- * palette colour, because the box sits on the page in one place and inside
- * a card in another and no surface token is the colour to fade to; the
+ * palette color, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the color to fade to. The
  * scrims use black at an alpha for the same reason and it reads in both
  * themes. The direction is logical, so a right-to-left page fades the other
  * way.

package/dist/internal/time.d.ts

@@ -16,7 +16,7 @@
  * rewrites a legal time, and a modulo that turns midnight into hour zero of a
  * clock with no hour zero.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** One time, already range checked. `mi` rather than `m` so it cannot read as months. */
 export interface TimeParts {
@@ -47,7 +47,7 @@ export declare function parseISOTime(s: string | undefined | null): TimeParts |
  */
 export declare function toISOTime(p: TimeParts, seconds: boolean): string;
 /**
- * Steps one segment without carrying into its neighbour. Stepping the minute
+ * Steps one segment without carrying into its neighbor. Stepping the minute
  * past 59 wraps to 0 and leaves the hour alone, because a spinner that changes
  * two fields at once is not what the arrow key promised.
  *
@@ -91,7 +91,7 @@ export declare function to12Hour(h: number): {
     meridiem: 'AM' | 'PM';
 };
 /**
- * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12; every other hour is
+ * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12. Every other hour is
  * itself in the morning and itself plus twelve in the afternoon.
  */
 export declare function from12Hour(hour: number, meridiem: 'AM' | 'PM'): number;

package/dist/internal/time.js

@@ -16,7 +16,7 @@
  * rewrites a legal time, and a modulo that turns midnight into hour zero of a
  * clock with no hour zero.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** Highest legal value plus one, per stepped segment. */
 const SEGMENT_SIZE = {
@@ -67,7 +67,7 @@ export function toISOTime(p, seconds) {
     return seconds ? `${base}:${pad2(p.s)}` : base;
 }
 /**
- * Steps one segment without carrying into its neighbour. Stepping the minute
+ * Steps one segment without carrying into its neighbor. Stepping the minute
  * past 59 wraps to 0 and leaves the hour alone, because a spinner that changes
  * two fields at once is not what the arrow key promised.
  *
@@ -149,7 +149,7 @@ export function to12Hour(h) {
     return { hour: wrapped === 0 ? 12 : wrapped, meridiem: h < 12 ? 'AM' : 'PM' };
 }
 /**
- * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12; every other hour is
+ * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12. Every other hour is
  * itself in the morning and itself plus twelve in the afternoon.
  */
 export function from12Hour(hour, meridiem) {

package/dist/internal/tone.d.ts

@@ -4,8 +4,8 @@
  * Alert, Banner and the toast store each named their neutral-informational tone
  * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
  * tone `brand`. A consumer building a status row had to remember which
- * component wanted which word for the same colour. `brand` is canonical because
- * it names the token the tone actually resolves to; `info` still works and maps
+ * component wanted which word for the same color. `brand` is canonical because
+ * it names the token the tone actually resolves to. `info` still works and maps
  * onto it, so nothing that already ships has to change.
  */
 /** Tones a status surface can carry. */
@@ -20,7 +20,7 @@ export declare function statusTone(tone: StatusToneInput): StatusTone;
  * The glyph each status tone draws, as SVG path data on a 24x24 grid.
  *
  * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
- * whatever the user's font does with them - the check and the cross landed at
+ * whatever the user's font does with them: the check and the cross landed at
  * different optical weights from every other icon in the library, all of which
  * are stroked SVG.
  */

package/dist/internal/tone.js

@@ -4,8 +4,8 @@
  * Alert, Banner and the toast store each named their neutral-informational tone
  * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
  * tone `brand`. A consumer building a status row had to remember which
- * component wanted which word for the same colour. `brand` is canonical because
- * it names the token the tone actually resolves to; `info` still works and maps
+ * component wanted which word for the same color. `brand` is canonical because
+ * it names the token the tone actually resolves to. `info` still works and maps
  * onto it, so nothing that already ships has to change.
  */
 /** Resolves the accepted spelling to the canonical one. */
@@ -16,7 +16,7 @@ export function statusTone(tone) {
  * The glyph each status tone draws, as SVG path data on a 24x24 grid.
  *
  * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
- * whatever the user's font does with them - the check and the cross landed at
+ * whatever the user's font does with them: the check and the cross landed at
  * different optical weights from every other icon in the library, all of which
  * are stroked SVG.
  */

package/dist/internal/touch.d.ts

@@ -7,7 +7,7 @@
  * value of `--spacing-control` and the `hit-area` utility all live beside the
  * palette so a consumer's build emits them.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * The control grows. For a control whose visual may take the finger's size:

package/dist/internal/touch.js

@@ -7,7 +7,7 @@
  * value of `--spacing-control` and the `hit-area` utility all live beside the
  * palette so a consumer's build emits them.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * The control grows. For a control whose visual may take the finger's size:

package/dist/internal/tree.d.ts

@@ -2,7 +2,7 @@
  * The shape of a data tree and the arithmetic a checkable one needs.
  *
  * A data tree is not a navigation menu. A menu shows where you can go and one
- * item is current; a tree shows a structure, and a branch in it summarises
+ * item is current. A tree shows a structure, and a branch in it summarizes
  * everything beneath it while a click on that branch writes every one of them.
  * Those two jobs are the reason this module exists: the summary and the write
  * have to be computed from the same list, or a branch reports a state its own
@@ -12,7 +12,7 @@
  * here. That module already holds the case a fold gets wrong, and a second
  * implementation of it would be a second chance to get it wrong.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 import type { Component } from 'svelte';
 import { type TriState } from './rollup.js';

package/dist/internal/tree.js

@@ -2,7 +2,7 @@
  * The shape of a data tree and the arithmetic a checkable one needs.
  *
  * A data tree is not a navigation menu. A menu shows where you can go and one
- * item is current; a tree shows a structure, and a branch in it summarises
+ * item is current. A tree shows a structure, and a branch in it summarizes
  * everything beneath it while a click on that branch writes every one of them.
  * Those two jobs are the reason this module exists: the summary and the write
  * have to be computed from the same list, or a branch reports a state its own
@@ -12,7 +12,7 @@
  * here. That module already holds the case a fold gets wrong, and a second
  * implementation of it would be a second chance to get it wrong.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 import { nextState, rollUp, setSubtree } from './rollup.js';
 /**

package/dist/motion.d.ts

@@ -18,7 +18,7 @@ export declare const FALLBACK: {
 };
 /**
  * What a preset hands Svelte. The function form is resolved once the element
- * is in the DOM, with the direction the animation is really playing in; under
+ * is in the DOM, with the direction the animation is really playing in. Under
  * `transition:` the directive itself only ever says `both`, so this is the
  * one way a single directive can tune its exit apart from its entrance.
  */
@@ -38,7 +38,7 @@ export declare function bezier(x1: number, y1: number, x2: number, y2: number):
 export declare function easing(curve: Curve): (x: number) => number;
 /** True when the document asked for no motion, or cannot play any. */
 export declare function still(node: Element): boolean;
-/** A centred dialog: rises a little and settles to full size. */
+/** A centered dialog: rises a little and settles to full size. */
 export declare const dialog: (node: Element) => Motion;
 /** The scrim behind a dialog or drawer, on the same clock as its surface. */
 export declare const scrim: (node: Element) => Motion;
@@ -55,7 +55,7 @@ export declare const popover: (node: Element) => Motion;
 export declare const toast: (node: Element) => Motion;
 /**
  * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
- * flip measures the move; the kit supplies the clock.
+ * flip measures the move. The kit supplies the clock.
  */
 export declare function reorder(node: Element, positions: {
     from: DOMRect;

package/dist/motion.js

@@ -6,7 +6,7 @@
  *     <li animate:motion.reorder>
  *
  * `|global` is not optional. A Svelte transition is local by default and
- * plays only when its own block toggles; a page that wraps a Modal in its own
+ * plays only when its own block toggles. A page that wraps a Modal in its own
  * `{#if}` to reset the form each time removes the whole component, and a
  * local exit never runs. Global plays it on any ancestor change.
  *
@@ -22,7 +22,7 @@
  * and a test holds them equal to the tokens.
  *
  * Two cases return no duration at all. A reader who asked for reduced motion
- * gets the state change and none of the travel; the reduced-motion block in
+ * gets the state change and none of the travel. The reduced-motion block in
  * theme.css cannot reach these, because Svelte drives them through the Web
  * Animations API and not through a stylesheet. And a document with no
  * `Element.animate`, which is every jsdom test, mounts and unmounts at once,
@@ -143,7 +143,7 @@ function surface(rung, css) {
         };
     };
 }
-/** A centred dialog: rises a little and settles to full size. */
+/** A centered dialog: rises a little and settles to full size. */
 export const dialog = surface('slow', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
 /** The scrim behind a dialog or drawer, on the same clock as its surface. */
 export const scrim = surface('slow', (t) => `opacity: ${t}`);
@@ -161,7 +161,7 @@ export const popover = surface('base', (t, u) => `opacity: ${t}; transform: tran
 export const toast = surface('base', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
 /**
  * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
- * flip measures the move; the kit supplies the clock.
+ * flip measures the move. The kit supplies the clock.
  */
 export function reorder(node, positions, _params) {
     if (still(node))

package/dist/stores/toast.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { StatusToneInput } from '../internal/tone.js';
 /**
  * A toast carries the same tone vocabulary as Alert and Banner. `brand` is the
- * canonical name; `info` is kept because `toast.info(...)` already ships.
+ * canonical name. `info` is kept because `toast.info(...)` already ships.
  */
 export type ToastTone = StatusToneInput;
 export interface Toast {