@leavepulse/ui 0.69.0 → 0.70.0

package/dist/components/RevealToggle.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /** Glyph size in px. The button's own size comes from the caller's class. */
+    iconSize: number;
+    /** What the button says while the value is hidden, and while it is shown. */
+    showLabel: string;
+    hideLabel: string;
+    disabled?: boolean;
+    /** Id of the element whose content this reveals. */
+    controls?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/RevealToggle.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/RevealToggle-C-KzaQGJ.js";
+export {
+  _sfc_main as default
+};

package/dist/components/StepConnector.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    filled: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** The fill's colour class: what the travelled part says (passed, skipped, done). */
+    fill?: string;
+    flowing?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    filled: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** The fill's colour class: what the travelled part says (passed, skipped, done). */
+    fill?: string;
+    flowing?: boolean;
+}> & Readonly<{}>, {
+    fill: string;
+    orientation: "horizontal" | "vertical";
+    flowing: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/StepConnector.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/StepConnector-37OgEOXA.js";
+export {
+  _sfc_main as default
+};

package/dist/components/TourCard.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/TourCard-BKI7X9-r.js";
+import { _ as _sfc_main } from "../chunks/TourCard-BXuVHsfn.js";
 export {
   _sfc_main as default
 };

package/dist/components/badge.d.ts

@@ -0,0 +1 @@
+export declare const BADGE_REMOVE = "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring";

package/dist/components/badge.js

@@ -0,0 +1,4 @@
+const BADGE_REMOVE = "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring";
+export {
+  BADGE_REMOVE
+};

package/dist/components/chart.d.ts

@@ -218,6 +218,10 @@ elbow: number,
 run: number, 
 /** Minimum vertical gap between two labels on the same side. */
 spacing: number, height: number) => CalloutLabel[];
-/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k. */
+/**
+ * Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k.
+ * One argument on purpose: it is handed around as a formatter, and an index
+ * passed by `map` must not land in an options slot.
+ */
 export declare const formatTick: (v: number) => string;
 export {};

package/dist/components/chart.js

@@ -1,3 +1,4 @@
+import { compactNumber } from "./format.js";
 const markerIndex = (at, labels, count) => {
   if (typeof at === "number") return Number.isInteger(at) && at >= 0 && at < count ? at : -1;
   return labels.indexOf(at);
@@ -359,27 +360,7 @@ const calloutLabels = (angles, cx, cy, radius, elbow, run, spacing, height) => {
   }
   return out;
 };
-const formatTick = (v) => {
-  if (!Number.isFinite(v)) return String(v);
-  const units = [
-    [1e3, "k"],
-    [1e6, "M"],
-    [1e9, "B"],
-    [1e12, "T"]
-  ];
-  const abs = Math.abs(v);
-  let i = units.length - 1;
-  while (i >= 0 && abs < units[i][0]) i--;
-  if (i < 0) {
-    const plain = Number(v.toFixed(2));
-    return Math.abs(plain) >= 1e3 ? formatTick(Math.sign(v) * 1e3) : String(plain);
-  }
-  const scaled = Number((v / units[i][0]).toFixed(1));
-  if (Math.abs(scaled) >= 1e3 && i < units.length - 1) {
-    return `${Number((v / units[i + 1][0]).toFixed(1))}${units[i + 1][1]}`;
-  }
-  return `${scaled}${units[i][1]}`;
-};
+const formatTick = (v) => compactNumber(v);
 export {
   CHART_PALETTE,
   arcPath,

package/dist/components/dateRange.d.ts

@@ -65,3 +65,14 @@ export interface DayRules {
  * a lie.
  */
 export declare function dayAllowed(iso: string, rules?: DayRules): boolean;
+export interface RangeRules extends DayRules {
+    /** Longest range, in days, counting both ends. */
+    maximumDays?: number;
+}
+/**
+ * A preset's range under the same rules as one picked on the calendar: trimmed
+ * to min/max, then refused if either end is a disabled day, it is longer than
+ * maximumDays, or a day inside it is unavailable. A preset that breaks them is
+ * shown disabled instead of writing a range the calendar would never allow.
+ */
+export declare function allowedRange(range: DateRange, rules?: RangeRules): DateRange | undefined;

package/dist/components/dateRange.js

@@ -81,7 +81,19 @@ function dayAllowed(iso, rules = {}) {
   if (rules.isDisabled?.(value)) return false;
   return !rules.isDateUnavailable?.(value);
 }
+function allowedRange(range, rules = {}) {
+  const trimmed = clampRange(range, rules.min, rules.max);
+  if (!trimmed) return void 0;
+  const end = (iso) => !rules.isDisabled?.(iso);
+  if (!end(trimmed.start)) return void 0;
+  return reshapeRange(trimmed.start, trimmed.end, {
+    allowed: end,
+    unavailable: rules.isDateUnavailable,
+    maximumDays: rules.maximumDays
+  }) ?? void 0;
+}
 export {
+  allowedRange,
   clampRange,
   dayAllowed,
   defaultDatePresets,

package/dist/components/dock.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Size of an item whose centre is `distance` px from the pointer.
+ *
+ * A raised cosine: full size right under the pointer, falling smoothly to the
+ * resting size at `radius` and flat beyond it. A linear falloff has a corner
+ * at the peak, which shows as the hovered icon "ticking" between sizes while
+ * the pointer crosses it.
+ */
+export declare function dockSize(base: number, max: number, distance: number, radius: number): number;
+/**
+ * Offset of a magnetic element toward a pointer at (`dx`, `dy`) px from its
+ * centre (LpMagnetic). Zero beyond `reach`; inside it the pull is a fraction
+ * of the distance that fades out toward the edge of the field, so the element
+ * lets go gradually instead of snapping back at an invisible line.
+ */
+export declare function magneticOffset(dx: number, dy: number, reach: number, strength: number): {
+    x: number;
+    y: number;
+};

package/dist/components/dock.js

@@ -0,0 +1,16 @@
+function dockSize(base, max, distance, radius) {
+  const d = Math.abs(distance);
+  if (radius <= 0 || d >= radius) return base;
+  return base + (max - base) * ((Math.cos(Math.PI * d / radius) + 1) / 2);
+}
+function magneticOffset(dx, dy, reach, strength) {
+  const distance = Math.hypot(dx, dy);
+  if (reach <= 0 || distance >= reach) return { x: 0, y: 0 };
+  const falloff = 1 - distance / reach;
+  const pull = Math.max(0, strength) * falloff;
+  return { x: dx * pull, y: dy * pull };
+}
+export {
+  dockSize,
+  magneticOffset
+};

package/dist/components/dropdown.d.ts

@@ -18,9 +18,18 @@ export declare const POPOVER_PANEL: string;
  * A selectable option row: layout, highlight state, and the staggered cascade.
  * Cascades downward by default and upward when the panel is flipped above the
  * trigger (group-data-[side=top]). Pair with an inline animationDelay for the
- * stagger. `flex` + gap are included; add justify/extra layout if needed.
+ * stagger (optionStagger). `flex` + gap are included; add justify/extra layout if needed.
  */
 export declare const OPTION_ITEM: string;
+/**
+ * The cascade's delay for the option at `index`, as an inline style for the
+ * row: 22 ms apart, and from the 12th on every option arrives together, so a
+ * long list still lands at once. Select, Autocomplete, PhoneInput and
+ * TagsInput each had this formula written out.
+ */
+export declare const optionStagger: (index: number) => {
+    animationDelay: string;
+};
 /**
  * Micro-animation for a close / clear "✕" icon: a quarter-turn on hover and a
  * dip on press. Put on the <LpIcon>, with `group` on its button. Shared by

package/dist/components/dropdown.js

@@ -1,8 +1,12 @@
+import { staggerDelay } from "./reveal.js";
 const POPOVER_ANIM = "data-[state=open]:animate-[popover-in_140ms_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_120ms_ease] data-[side=top]:data-[state=open]:animate-[popover-in-up_140ms_var(--ease-emphasized)] data-[side=top]:data-[state=closed]:animate-[popover-out-up_120ms_ease]";
 const TOOLTIP_ANIM = "data-[state=delayed-open]:animate-[popover-in_120ms_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_100ms_ease] data-[side=top]:data-[state=delayed-open]:animate-[popover-in-up_120ms_var(--ease-emphasized)] data-[side=top]:data-[state=closed]:animate-[popover-out-up_100ms_ease]";
 const PANEL_SURFACE = "group rounded-control border border-line bg-surface-overlay shadow-panel backdrop-blur";
 const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM;
-const OPTION_ITEM = "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none animate-[option-in_180ms_var(--ease-emphasized)_both] group-data-[side=top]:animate-[option-in-up_180ms_var(--ease-emphasized)_both] data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand";
+const OPTION_ITEM = "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none animate-[rise-in_180ms_var(--ease-emphasized)_both] [--rise:-6px] group-data-[side=top]:[--rise:6px] data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand";
+const optionStagger = (index) => ({
+  animationDelay: `${staggerDelay(index, 0, 22, 12)}ms`
+});
 const CLOSE_ICON = "transition-transform duration-medium ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0";
 export {
   CLOSE_ICON,
@@ -10,5 +14,6 @@ export {
   PANEL_SURFACE,
   POPOVER_ANIM,
   POPOVER_PANEL,
-  TOOLTIP_ANIM
+  TOOLTIP_ANIM,
+  optionStagger
 };

package/dist/components/fieldText.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Splits a code into the groups a person reads it in.
+ *
+ * `groups` is either one size for every group ("4" → `ABCD EFGH IJ`) or the
+ * exact sizes in order (`[3, 3]` → `123 456`), the latter for formats whose
+ * groups differ (a licence key `5-5-5-5`, a card `4-6-5`). Characters past
+ * the listed sizes form one last group rather than being dropped: a code is
+ * never shown shorter than it is. Without `groups`, short codes read best in
+ * threes (6 → 3+3, 8 → 4+4) and longer ones in fours.
+ */
+export declare function groupCode(code: string, groups?: number | number[]): string[];
+/** Strips what people and copy-paste add to a code: spaces, dashes, dots. */
+export declare function normalizeCode(code: string): string;
+/**
+ * A remaining time the way a countdown shows it: `0:42`, `4:05`, `1:02:03`.
+ * Rounded UP to the second, so "0:00" only ever appears once time is out.
+ *
+ * @deprecated LpCountdown's own formatting, kept for apps that imported it:
+ * use `formatTime(ceilToSecond(ms), "clock")` from the time-span helpers.
+ */
+export declare function formatRemaining(ms: number): string;
+/**
+ * The longest `start…end` cut of `text` that `fits`, keeping both ends.
+ *
+ * For identifiers whose meaning sits at both ends: a path's root and file
+ * name, a hash's first and last characters people compare, a server id's
+ * prefix and number. An ellipsis at the end would throw away exactly the part
+ * that tells two of them apart.
+ *
+ * `tail` pins how many characters the end keeps (an extension, the last
+ * digits); without it both ends shrink evenly. `fits` is the measurement —
+ * the component passes a canvas measure of its own font — so the search
+ * itself stays a pure binary search over how many characters survive.
+ */
+export declare function middleTruncate(text: string, fits: (candidate: string) => boolean, options?: {
+    tail?: number;
+    ellipsis?: string;
+}): string;

package/dist/components/fieldText.js

@@ -0,0 +1,53 @@
+import { formatTime, ceilToSecond } from "./timeSpan.js";
+function groupCode(code, groups) {
+  const chars = Array.from(code);
+  if (!chars.length) return [];
+  const sizes = Array.isArray(groups) ? groups.filter((n) => n > 0) : [groups && groups > 0 ? groups : autoGroup(chars.length)];
+  const out = [];
+  let at = 0;
+  let i = 0;
+  while (at < chars.length) {
+    const size = Array.isArray(groups) ? sizes[i] ?? chars.length - at : sizes[0];
+    out.push(chars.slice(at, at + size).join(""));
+    at += size;
+    i++;
+  }
+  return out;
+}
+function autoGroup(length) {
+  if (length <= 4) return length;
+  if (length === 6 || length === 9) return 3;
+  if (length % 4 === 0) return 4;
+  if (length % 3 === 0) return 3;
+  return 4;
+}
+function normalizeCode(code) {
+  return code.replace(/[\s\-_.·]/g, "");
+}
+function formatRemaining(ms) {
+  return formatTime(ceilToSecond(ms), "clock");
+}
+function middleTruncate(text, fits, options = {}) {
+  const ellipsis = options.ellipsis ?? "…";
+  const chars = Array.from(text);
+  if (fits(text)) return text;
+  const cut = (keep) => {
+    const tail = options.tail !== void 0 ? Math.min(options.tail, keep) : Math.floor(keep / 2);
+    const head = keep - tail;
+    return chars.slice(0, head).join("") + ellipsis + (tail ? chars.slice(chars.length - tail).join("") : "");
+  };
+  let lo = 0;
+  let hi = chars.length - 1;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (fits(cut(mid))) lo = mid;
+    else hi = mid - 1;
+  }
+  return cut(lo);
+}
+export {
+  formatRemaining,
+  groupCode,
+  middleTruncate,
+  normalizeCode
+};

package/dist/components/fileTree.d.ts

@@ -28,10 +28,14 @@ export interface FileNode {
 export declare function fileIcon(node: FileNode, expanded?: boolean): string;
 /** Directories first, then case-insensitive by name — the file-manager order. */
 export declare function sortNodes(nodes: FileNode[]): FileNode[];
-/** Human-readable byte size — binary units, matching what file managers show. */
-export declare function formatSize(bytes: number): string;
+/**
+ * Human-readable byte size for the size column (`formatBytes`, binary units,
+ * matching what file managers show). The decimal is kept even when it is zero
+ * ("1.0 MB") so the column holds one shape from row to row.
+ */
+export declare function formatSize(bytes: number, locale?: string): string;
 /** Short local date-time for the modified column; passes strings through. */
-export declare function formatModified(value: Date | number | string): string;
+export declare function formatModified(value: Date | number | string, locale?: string): string;
 /**
  * Total size of a subtree: a directory's own `size` when the caller computed one
  * (the common case for a server-side listing), otherwise the sum of its loaded

package/dist/components/fileTree.js

@@ -1,3 +1,4 @@
+import { formatBytes } from "./format.js";
 const EXT_ICONS = {
   json: "lucide:file-json",
   jsonc: "lucide:file-json",
@@ -69,28 +70,21 @@ function sortNodes(nodes) {
     return NAME_COLLATOR.compare(a.name, b.name);
   });
 }
-function formatSize(bytes) {
-  if (!Number.isFinite(bytes) || bytes < 0) return "—";
-  if (bytes < 1024) return `${bytes} B`;
-  const units = ["KB", "MB", "GB", "TB", "PB"];
-  let value = bytes / 1024;
-  let i = 0;
-  while (Math.round(value) >= 1024 && i < units.length - 1) {
-    value /= 1024;
-    i++;
-  }
-  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
+function formatSize(bytes, locale) {
+  return formatBytes(bytes, locale, { fixed: true });
 }
-function formatModified(value) {
+const modifiedFormats = /* @__PURE__ */ new Map();
+function formatModified(value, locale) {
   if (typeof value === "string") return value;
   const date = value instanceof Date ? value : new Date(value);
   if (Number.isNaN(date.getTime())) return "—";
-  return date.toLocaleString(void 0, {
-    day: "2-digit",
-    month: "short",
-    hour: "2-digit",
-    minute: "2-digit"
-  });
+  const key = locale ?? "";
+  let format = modifiedFormats.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" });
+    modifiedFormats.set(key, format);
+  }
+  return format.format(date);
 }
 function subtreeSize(node) {
   if (node.kind === "file") return node.size;

package/dist/components/format.d.ts

@@ -0,0 +1,41 @@
+export interface FormatBytesOptions {
+    /**
+     * Keep the decimal place a value under 10 gets even when it is zero
+     * ("1.0 MB" rather than "1 MB"), so a column of sizes keeps one shape.
+     */
+    fixed?: boolean;
+}
+/**
+ * A byte count in the largest unit that keeps it readable: 1 536 → "1.5 kB".
+ * Binary steps, the way file managers and storage limits show sizes. Unit
+ * names come from Intl, so a Russian app reads "1,5 МБ" without a table of
+ * its own. One decimal under 10 (2.4 MB), none above (240 MB). Negative or
+ * non-finite input is "—": there is no size to show.
+ */
+export declare function formatBytes(bytes: number, locale?: string, options?: FormatBytesOptions): string;
+export interface CompactNumberOptions {
+    /**
+     * Writes the decimal separator the locale's way ("1,2k" in Russian). The
+     * k/M/B/T suffixes stay: Intl's own compact notation changes the shape of
+     * the figure per locale ("1,2 тыс."), which a tick label or a rolling
+     * counter cannot absorb. Unset keeps a plain "." whatever the browser says.
+     */
+    locale?: string;
+    /** Places for a figure below a thousand (12.25). Default 2. */
+    plainDecimals?: number;
+    /** Places once a unit is in play (1.2k). Default 1. */
+    decimals?: number;
+    /**
+     * Keep trailing zeros ("5.0M", "1.0k") so the figure's shape only changes
+     * at a rollover. Off, they are dropped ("5M"), the way a label is written.
+     */
+    fixed?: boolean;
+}
+/**
+ * A figure shortened with k/M/B/T: 1 200 → "1.2k", 3 400 000 → "3.4M".
+ *
+ * The unit is picked by what will PRINT, not by the raw size: 999 950 at one
+ * place rounds to "1000k", which reads as the next unit up, so it becomes
+ * "1M"; 999.999 with two places would be "1000", so it becomes "1k".
+ */
+export declare function compactNumber(value: number, options?: CompactNumberOptions): string;

package/dist/components/format.js

@@ -0,0 +1,67 @@
+const numberFormats = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+  const key = `${locale ?? ""}|${JSON.stringify(options)}`;
+  let format = numberFormats.get(key);
+  if (!format) {
+    format = new Intl.NumberFormat(locale, options);
+    numberFormats.set(key, format);
+  }
+  return format;
+}
+const BYTE_UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
+function formatBytes(bytes, locale, options = {}) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "—";
+  let scaled = bytes;
+  let step = 0;
+  while (Math.round(scaled) >= 1024 && step < BYTE_UNITS.length - 1) {
+    scaled /= 1024;
+    step += 1;
+  }
+  const places = step > 0 && Number(scaled.toFixed(1)) < 10 ? 1 : 0;
+  const parts = numberFormat(locale, {
+    style: "unit",
+    unit: BYTE_UNITS[step],
+    unitDisplay: "narrow",
+    // A figure here never passes 1023 below petabytes, and "1,023 kB" reads as
+    // a decimal in half the world.
+    useGrouping: false,
+    minimumFractionDigits: options.fixed ? places : 0,
+    maximumFractionDigits: places
+  }).formatToParts(scaled);
+  const unit = parts.filter((p) => p.type === "unit").map((p) => p.value).join("");
+  const figure = parts.filter((p) => p.type !== "unit" && p.type !== "literal").map((p) => p.value).join("");
+  return unit ? `${figure} ${unit}` : figure;
+}
+const COMPACT_UNITS = [
+  [1, ""],
+  [1e3, "k"],
+  [1e6, "M"],
+  [1e9, "B"],
+  [1e12, "T"]
+];
+function compactNumber(value, options = {}) {
+  if (!Number.isFinite(value)) return String(value);
+  const { locale, plainDecimals = 2, decimals = 1, fixed = false } = options;
+  const abs = Math.abs(value);
+  let i = COMPACT_UNITS.length - 1;
+  while (i > 0 && abs < COMPACT_UNITS[i][0]) i--;
+  const placesAt = (at) => at === 0 ? plainDecimals : decimals;
+  const roundAt = (at) => Number((value / COMPACT_UNITS[at][0]).toFixed(placesAt(at)));
+  let scaled = roundAt(i);
+  if (Math.abs(scaled) >= 1e3 && i < COMPACT_UNITS.length - 1) {
+    i++;
+    scaled = roundAt(i);
+  }
+  const places = placesAt(i);
+  if (scaled === 0) scaled = 0;
+  const number = locale === void 0 ? fixed ? scaled.toFixed(places) : String(scaled) : numberFormat(locale, {
+    minimumFractionDigits: fixed ? places : 0,
+    maximumFractionDigits: places,
+    useGrouping: false
+  }).format(scaled);
+  return `${number}${COMPACT_UNITS[i][1]}`;
+}
+export {
+  compactNumber,
+  formatBytes
+};

package/dist/components/identicon.d.ts

@@ -0,0 +1,38 @@
+export interface IdenticonOptions {
+    /** Cells per side. 5 is the familiar look; more cells, busier shapes. */
+    grid?: number;
+    /** Saturation range, percent. Kept in the middle so the colour holds on any theme. */
+    saturation?: readonly [number, number];
+    /** Lightness range, percent: dark enough for a light theme, light enough for a dark one. */
+    lightness?: readonly [number, number];
+}
+export interface Identicon {
+    /** Rows of cells, `true` filled. Mirrored left to right. */
+    cells: boolean[][];
+    /** The hue the seed picked, 0–360. */
+    hue: number;
+    /** The shape's colour as a CSS `hsl()`. */
+    color: string;
+}
+export declare function hashString(seed: string): number;
+/** The grid and colour for a seed. */
+export declare function identicon(seed: string, options?: IdenticonOptions): Identicon;
+/** The filled cells as rectangles, merged along each row: fewer nodes than one per cell. */
+export declare function identiconRects(cells: boolean[][]): {
+    x: number;
+    y: number;
+    w: number;
+}[];
+export interface IdenticonSvgOptions extends IdenticonOptions {
+    /** Pixel size of the square image. */
+    size?: number;
+    /** Fill behind the pattern, any CSS colour; transparent when unset. */
+    background?: string;
+    /** Empty margin around the grid, as a share of the side. */
+    padding?: number;
+}
+/**
+ * The identicon as standalone SVG markup, for places a component cannot go:
+ * a favicon, a canvas, a notification icon (`data:image/svg+xml,…`).
+ */
+export declare function identiconSvg(seed: string, options?: IdenticonSvgOptions): string;

package/dist/components/identicon.js

@@ -0,0 +1,85 @@
+function hashString(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function generator(seed) {
+  let a = seed;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function identicon(seed, options = {}) {
+  const size = Math.max(3, Math.min(12, Math.round(options.grid ?? 5)));
+  const [sMin, sMax] = options.saturation ?? [55, 72];
+  const [lMin, lMax] = options.lightness ?? [48, 60];
+  const next = generator(hashString(seed));
+  const hue = Math.floor(next() * 360);
+  const saturation = Math.round(sMin + next() * (sMax - sMin));
+  const lightness = Math.round(lMin + next() * (lMax - lMin));
+  const half = Math.ceil(size / 2);
+  const cells = [];
+  let filled = 0;
+  for (let y = 0; y < size; y++) {
+    const row = new Array(size).fill(false);
+    for (let x = 0; x < half; x++) {
+      const on = next() < 0.5;
+      row[x] = on;
+      row[size - 1 - x] = on;
+      if (on) filled++;
+    }
+    cells.push(row);
+  }
+  const total = half * size;
+  const low = Math.ceil(total / 3);
+  const high = Math.floor(total * 2 / 3);
+  while (filled < low || filled > high) {
+    const y = Math.floor(next() * size);
+    const x = Math.floor(next() * half);
+    const on = cells[y][x];
+    if (filled < low && on || filled > high && !on) continue;
+    cells[y][x] = !on;
+    cells[y][size - 1 - x] = !on;
+    filled += on ? -1 : 1;
+  }
+  return { cells, hue, color: `hsl(${hue} ${saturation}% ${lightness}%)` };
+}
+function identiconRects(cells) {
+  const rects = [];
+  cells.forEach((row, y) => {
+    let x = 0;
+    while (x < row.length) {
+      if (!row[x]) {
+        x++;
+        continue;
+      }
+      let w = 1;
+      while (x + w < row.length && row[x + w]) w++;
+      rects.push({ x, y, w });
+      x += w;
+    }
+  });
+  return rects;
+}
+function identiconSvg(seed, options = {}) {
+  const { cells, color } = identicon(seed, options);
+  const n = cells.length;
+  const pad = n * Math.max(0, Math.min(0.4, options.padding ?? 0.12));
+  const view = n + pad * 2;
+  const px = options.size ?? 64;
+  const bg = options.background ? `<rect width="${view}" height="${view}" fill="${options.background}"/>` : "";
+  const shapes = identiconRects(cells).map((r) => `<rect x="${r.x + pad}" y="${r.y + pad}" width="${r.w}" height="1"/>`).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${px}" height="${px}" viewBox="0 0 ${view} ${view}" shape-rendering="crispEdges">${bg}<g fill="${color}">${shapes}</g></svg>`;
+}
+export {
+  hashString,
+  identicon,
+  identiconRects,
+  identiconSvg
+};

package/dist/components/masonry.d.ts

@@ -0,0 +1,32 @@
+export interface MasonryColumns {
+    /**
+     * Fixed count, or a table of minimum container widths to counts
+     * (`{ 0: 1, 480: 2, 900: 3 }`). Omit to derive the count from `minColumnWidth`.
+     */
+    columns?: number | Record<number, number>;
+    /** Narrowest a column may get when the count is derived. */
+    minColumnWidth: number;
+    /** Upper bound for a derived count, so a wide screen does not shred cards into slivers. */
+    maxColumns?: number;
+    gap: number;
+}
+/** How many columns fit a container `width` px wide. Always at least one. */
+export declare function masonryColumnCount(width: number, options: MasonryColumns): number;
+export interface MasonryPlacement {
+    /** Left edge of each item, in px, in input order. */
+    x: number[];
+    /** Top edge of each item, in px, in input order. */
+    y: number[];
+    /** Column each item went to. */
+    column: number[];
+    /** Width every item is laid out at. */
+    columnWidth: number;
+    /** Height of the tallest column: the container's height. */
+    height: number;
+}
+/**
+ * Places items in order, each into the column that is currently shortest
+ * (leftmost on a tie). In order, so the first items stay at the top and an
+ * item added at the end never reshuffles the ones before it.
+ */
+export declare function placeMasonry(heights: number[], count: number, width: number, gap: number): MasonryPlacement;