@ripple-ui/svelte 0.0.0-stage → 0.9.0-next.0

package/dist/widgets/composite/booking.js

@@ -0,0 +1,210 @@
+// widgets/composite/booking.ts — the booking widget's data rules, free of
+// Svelte so they test directly: reading store data as the store sends it
+// (services, days of slots, a service's own days), the slot nearest the visitor's ask, and the
+// request the widget emits, validated the way the host re-validates it.
+//
+// Every reader takes model or server output and never throws: a missing
+// array is [], a half-streamed slot is dropped or unavailable, a junk value
+// is ignored. Only `available === true` makes a slot bookable.
+//
+// Times: a slot's `start` is ISO with the store's offset, so its digits are
+// already store-local time. The widget reads "HH:MM" out of the string and
+// never parses a date, so the browser's clock and timezone cannot move a slot.
+// Day labels come from the store's `date_label`; ISO dates only compare as
+// strings.
+import { dateLabel, finite, plain } from '../data-kit/format.js';
+export const LIMITS = { name: 80, notes: 500, email: 254 };
+const str = (v) => (typeof v === 'string' ? v : typeof v === 'number' && Number.isFinite(v) ? String(v) : '');
+const rec = (v) => v !== null && typeof v === 'object' && !Array.isArray(v) ? v : undefined;
+const list = (v) => (Array.isArray(v) ? v : []);
+const int = (v) => {
+    const n = finite(v);
+    return n === undefined ? undefined : Math.trunc(n);
+};
+export function readBounds(v) {
+    const b = rec(v);
+    const min = Math.max(int(b?.min) ?? 1, 1);
+    const max = int(b?.max);
+    return b && max !== undefined && max >= min ? { min, max } : undefined;
+}
+export function readServices(v) {
+    return list(v).flatMap((raw) => {
+        const s = rec(raw);
+        if (!s)
+            return [];
+        return [
+            {
+                id: str(s.id),
+                name: plain(s.name),
+                kind: str(s.kind) || undefined,
+                duration_min: finite(s.duration_min),
+                price: finite(s.price),
+                image: str(s.image) || undefined,
+                party: readBounds(s.party),
+                days: Array.isArray(s.days) ? readDays(s.days) : undefined
+            }
+        ];
+    });
+}
+export function readDays(v) {
+    return list(v).flatMap((raw) => {
+        const d = rec(raw);
+        if (!d)
+            return [];
+        const date = str(d.date);
+        const slots = list(d.slots).flatMap((x) => {
+            const s = rec(x);
+            const start = str(s?.start);
+            if (!s || !start)
+                return [];
+            return [{ start, label: plain(s.label) || clockLabel(start), available: s.available === true }];
+        });
+        // The store writes `date_label`; the design doc's `label` is read too.
+        return [{ date, date_label: plain(d.date_label) || plain(d.label) || dateLabel(date), slots }];
+    });
+}
+export function readNotice(v) {
+    const n = rec(v);
+    const text = plain(n?.text) || plain(n?.message);
+    if (!n || !text)
+        return undefined;
+    return { kind: n.kind === 'info' ? 'info' : 'error', text, code: str(n.code) || undefined, start: str(n.start) || undefined };
+}
+export function readConfirmed(v) {
+    const c = rec(v);
+    const booking_id = plain(c?.booking_id);
+    if (!c || !booking_id)
+        return undefined;
+    return {
+        booking_id,
+        label: plain(c.label) || undefined,
+        date_label: plain(c.date_label) || undefined,
+        service_name: plain(c.service_name) || undefined,
+        party: int(c.party)
+    };
+}
+export function readSelection(v) {
+    const s = rec(v);
+    const c = rec(s?.customer);
+    return {
+        service_id: str(s?.service_id) || undefined,
+        start: str(s?.start) || undefined,
+        party: int(s?.party),
+        customer: { name: str(c?.name), email: str(c?.email), phone: str(c?.phone) },
+        notes: str(s?.notes)
+    };
+}
+/** A host notice that says the slot just went: `code: 'slot_taken'`, or text that says "taken". */
+export function isSlotTaken(n) {
+    return !!n && n.kind === 'error' && (n.code === 'slot_taken' || (!n.code && /\btaken\b/i.test(n.text)));
+}
+/** Minutes after midnight from "HH:MM" (or the time part of an ISO string), store-local. */
+export function clock(v) {
+    const m = /(?:^|T)(\d{1,2}):(\d{2})/.exec(str(v));
+    if (!m)
+        return undefined;
+    const h = Number(m[1]);
+    const min = Number(m[2]);
+    return h < 24 && min < 60 ? h * 60 + min : undefined;
+}
+function clockLabel(start) {
+    const m = clock(start);
+    if (m === undefined)
+        return start;
+    const h = Math.floor(m / 60);
+    return `${h % 12 || 12}:${String(m % 60).padStart(2, '0')} ${h < 12 ? 'AM' : 'PM'}`;
+}
+export const isOpen = (s, taken) => s.available && !taken.has(s.start);
+/**
+ * The open slot nearest the visitor's ask: the first day on or after
+ * `preferred.date` with an open slot, then the slot closest to
+ * `preferred.after` there (a tie goes to the later slot, since the ask says
+ * "after"). Undefined without an ask, or when nothing is open from that day on.
+ */
+export function nearest(days, pref, taken) {
+    const date = str(pref?.date);
+    const want = clock(pref?.after);
+    if (!date && want === undefined)
+        return undefined;
+    const from = date ? days.findIndex((d) => d.date >= date) : 0;
+    if (from < 0)
+        return undefined;
+    for (const day of days.slice(from)) {
+        const open = day.slots.filter((s) => isOpen(s, taken));
+        if (open.length === 0)
+            continue;
+        let best = open[0];
+        if (want !== undefined) {
+            let gap = Infinity;
+            for (const s of open) {
+                const m = clock(s.start);
+                if (m === undefined)
+                    continue;
+                const g = m >= want ? m - want : want - m + 0.5;
+                if (g < gap)
+                    [best, gap] = [s, g];
+            }
+        }
+        return { date: day.date, start: best.start };
+    }
+    return undefined;
+}
+/** Slots grouped by part of the day, store-local; keeps each slot's index for keys. */
+export function partsOfDay(slots) {
+    const groups = [];
+    slots.forEach((slot, i) => {
+        const m = clock(slot.start);
+        const name = m === undefined ? '' : m < 720 ? 'Morning' : m < 1020 ? 'Afternoon' : 'Evening';
+        const last = groups.at(-1);
+        if (last?.name === name)
+            last.slots.push({ slot, i });
+        else
+            groups.push({ name, slots: [{ slot, i }] });
+    });
+    return groups;
+}
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+const PHONE = /^\+?[\d\s().-]+$/;
+/** The visitor's details, checked the way the host re-checks them. */
+/** `contact` false: only the notes are checked (a booking that asks for no contact details). */
+export function checkDetails(sel, contact = true) {
+    const name = sel.customer?.name?.trim() ?? '';
+    const email = sel.customer?.email?.trim() ?? '';
+    const phone = sel.customer?.phone?.trim() ?? '';
+    const digits = phone.replace(/\D/g, '').length;
+    const e = {};
+    if ((sel.notes?.length ?? 0) > LIMITS.notes)
+        e.notes = `Notes can be up to ${LIMITS.notes} characters.`;
+    if (!contact)
+        return e;
+    if (!name)
+        e.name = 'Add the name for the booking.';
+    else if (name.length > LIMITS.name)
+        e.name = `Keep the name under ${LIMITS.name} characters.`;
+    if (!email && !phone)
+        e.contact = 'Add an email or a phone number.';
+    if (email && (email.length > LIMITS.email || !EMAIL.test(email)))
+        e.email = 'That email looks incomplete.';
+    if (phone && (!PHONE.test(phone) || digits < 7 || digits > 15))
+        e.phone = 'That phone number looks incomplete.';
+    return e;
+}
+/** The request to emit, or undefined while anything is missing or invalid. */
+export function toRequest(sel, service, contact = true) {
+    if (!service?.id || !sel.start || Object.keys(checkDetails(sel, contact)).length > 0)
+        return undefined;
+    const b = service.party;
+    if (b && (sel.party === undefined || sel.party < b.min || sel.party > b.max))
+        return undefined;
+    const c = sel.customer ?? {};
+    const email = c.email?.trim();
+    const phone = c.phone?.trim();
+    const notes = sel.notes?.trim();
+    return {
+        service_id: service.id,
+        start: sel.start,
+        ...(b && { party: sel.party }),
+        ...(contact && { customer: { name: c.name?.trim() ?? '', ...(email && { email }), ...(phone && { phone }) } }),
+        ...(notes && { notes })
+    };
+}

package/dist/widgets/composite/cover-art.d.ts

@@ -0,0 +1,17 @@
+import { PALETTE } from './MusicPlayer.svelte';
+export { PALETTE };
+export declare function hashOf(s: string): number;
+/** A palette name the model chose, else a stable pick from the seed. */
+export declare function paletteFor(color: unknown, seed: string): [string, string];
+export declare const grad: (p: [string, string]) => string;
+export declare const initials: (s: string) => string;
+export declare const text: (v: unknown, max: number) => string;
+/** A number within [min, max], else undefined. */
+export declare function within(v: unknown, min: number, max: number): number | undefined;
+/** Plain short strings from a model list, deduped, capped. */
+export declare function words(v: unknown, max?: number, len?: number): string[];
+/** Model rows: objects only, capped, each with a unique key (its id, or its index). */
+export declare function rows<T extends Record<string, unknown>>(v: unknown, cap: number): (T & {
+    key: string;
+})[];
+export declare const compact: (n: number) => string;

package/dist/widgets/composite/cover-art.js

@@ -0,0 +1,63 @@
+// widgets/composite/cover-art.ts: shared reading and cover art for the catalog
+// widgets (place-results, product-grid, media-grid). Covers are generated (a
+// gradient from music-player's palette, picked by `color` or by a hash of the
+// name) so a card looks finished with no image: public cards may not load
+// arbitrary image hosts. Pure functions, no DOM.
+import { finite, plain } from '../data-kit/index.js';
+import { PALETTE } from './MusicPlayer.svelte';
+export { PALETTE };
+const NAMES = Object.keys(PALETTE);
+export function hashOf(s) {
+    let h = 0;
+    for (const c of s)
+        h = (h * 31 + c.charCodeAt(0)) | 0;
+    return Math.abs(h);
+}
+/** A palette name the model chose, else a stable pick from the seed. */
+export function paletteFor(color, seed) {
+    const named = typeof color === 'string' ? PALETTE[color.toLowerCase()] : undefined;
+    return named ?? PALETTE[NAMES[hashOf(seed) % NAMES.length]];
+}
+export const grad = (p) => `linear-gradient(135deg, ${p[0]}, ${p[1]})`;
+export const initials = (s) => s
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => String.fromCodePoint(w.codePointAt(0) ?? 32))
+    .join('')
+    .toUpperCase();
+export const text = (v, max) => plain(v).trim().slice(0, max);
+/** A number within [min, max], else undefined. */
+export function within(v, min, max) {
+    const n = finite(v);
+    return n !== undefined && n >= min && n <= max ? n : undefined;
+}
+/** Plain short strings from a model list, deduped, capped. */
+export function words(v, max = 6, len = 24) {
+    if (!Array.isArray(v))
+        return [];
+    const out = new Set();
+    for (const w of v) {
+        const t = text(w, len);
+        if (t)
+            out.add(t);
+    }
+    return [...out].slice(0, max);
+}
+/** Model rows: objects only, capped, each with a unique key (its id, or its index). */
+export function rows(v, cap) {
+    if (!Array.isArray(v))
+        return [];
+    const seen = new Set();
+    const out = [];
+    v.forEach((r, i) => {
+        if (!r || typeof r !== 'object' || Array.isArray(r) || out.length >= cap)
+            return;
+        const raw = typeof r.id === 'string' && r.id ? String(r.id) : `r${i}`;
+        const key = seen.has(raw) ? `${raw}-${i}` : raw;
+        seen.add(key);
+        out.push({ ...r, key });
+    });
+    return out;
+}
+export const compact = (n) => new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(n);

package/dist/widgets/composite/exec-dashboard.d.ts

@@ -0,0 +1,117 @@
+export type Row = Record<string, unknown>;
+export type Format = 'money' | 'number' | 'percent';
+export type Agg = 'sum' | 'avg' | 'count';
+export type Measure = {
+    key?: string;
+    label: string;
+    format: Format;
+    agg: Agg;
+    good: 'up' | 'down';
+};
+export type Dimension = {
+    key: string;
+    label: string;
+};
+export type Filters = Record<string, string>;
+export type Bucket = {
+    key: string;
+    label: string;
+};
+export type Trend = {
+    dir: 'up' | 'down' | 'flat';
+    text: string;
+    good: 'up' | 'down';
+};
+export type Column = {
+    key: string;
+    label: string;
+    align?: 'left' | 'right' | 'center';
+};
+/** Plain-object rows only; anything else is dropped. */
+export declare function readRows(v: unknown): Row[];
+/** Measures as written; a measure with neither key nor count agg is dropped. */
+export declare function readMeasures(v: unknown): Measure[];
+export declare function readDimensions(v: unknown): Dimension[];
+/** `{ region: 'West' }`; non-string values and empty strings mean "all". */
+export declare function readFilters(v: unknown): Filters;
+export declare function filterRows(rows: Row[], filters: Filters): Row[];
+/** sum and avg skip non-finite values; avg of nothing is undefined; count counts rows. */
+export declare function aggregate(rows: Row[], m: Measure): number | undefined;
+/** Distinct values of a column in first-seen order. */
+export declare function distinct(rows: Row[], key: string): string[];
+/** At most 5 categorical slots (--chart-1..5). Past 5 values the tail folds into "Other". */
+export declare const MAX_SLOTS = 5;
+export declare const OTHER = "Other";
+/**
+ * Series keys for a split column, fixed from the unfiltered rows: most rows
+ * first (ties in first-seen order), so the biggest series takes slot 1 and the
+ * baseline, and the rarest fold into Other.
+ */
+export declare function splitKeys(allRows: Row[], key: string | undefined): string[];
+/** The series a row belongs to, given the fixed keys. */
+export declare function seriesOf(row: Row, key: string, keys: string[]): string | undefined;
+/** `unit` names the bucket for a chart title: 'day', 'month', or the x column's own name. */
+export type Bucketer = {
+    buckets: Bucket[];
+    keyOf: (row: Row) => string | undefined;
+    unit: string;
+};
+/**
+ * The x axis. When every x value is an ISO day, rows bucket by day for a span
+ * of 31 days or less and by month beyond that, sorted by date. Otherwise rows
+ * group by the label as written, in first-seen order.
+ */
+export declare function bucketer(allRows: Row[], x: string | undefined): Bucketer;
+export type SeriesPoint = {
+    key: string;
+    label: string;
+    total: number;
+    parts: Record<string, number>;
+};
+/** One point per bucket: the measure over the bucket's rows, split by series when given. */
+export declare function series(rows: Row[], b: Bucketer, m: Measure, split?: {
+    key: string;
+    keys: string[];
+}): SeriesPoint[];
+export type Slice = {
+    label: string;
+    value: number;
+    share: number;
+};
+/** The measure per value of a column, largest first; past `max` the tail folds into Other. */
+export declare function breakdown(rows: Row[], key: string, m: Measure, max?: number): Slice[];
+/** Change from `prev` to `cur`; undefined when either is missing or prev is 0. */
+export declare function trend(cur: number | undefined, prev: number | undefined, good: 'up' | 'down', label: string): Trend | undefined;
+export type Kpi = {
+    label: string;
+    value: number | undefined;
+    shown: string;
+    trend?: Trend;
+};
+/**
+ * One KPI per measure over the filtered rows. The trend compares against the
+ * filtered `compare` rows when there are any; otherwise, when the x axis has
+ * two or more buckets, the last bucket against the one before it.
+ */
+export declare function kpis(rows: Row[], measures: Measure[], opts?: {
+    compare?: Row[];
+    compareLabel?: string;
+    bucketer?: Bucketer;
+    currency?: string;
+}): Kpi[];
+/** Table columns: the x column, dimensions, the split, then each measured column once. */
+export declare function defaultColumns(x: string | undefined, dims: Dimension[], split: string | undefined, measures: Measure[], xLabel?: string): Column[];
+export declare const title: (k: string) => string;
+/** The measure that formats a column, preferring a summed one. */
+export declare function measureFor(key: string, measures: Measure[]): Measure | undefined;
+/** Column totals for the filtered rows: summed measure columns only. */
+export declare function totals(rows: Row[], cols: Column[], measures: Measure[]): Record<string, number>;
+/**
+ * A value for display. Percent values are 0 to 100 as written (12.5 is
+ * "12.5%"). Modes: 'auto' (KPIs, readouts) drops cents at 100 and above;
+ * 'exact' (table cells, so a column lines up) always shows cents; 'compact'
+ * is for axis ticks and cap labels ("$12K"). Non-finite is "n/a".
+ */
+export declare function fmt(v: unknown, format: Format, currency?: string, mode?: 'auto' | 'exact' | 'compact'): string;
+/** Clean y-axis ticks from 0 to a nice ceiling over `max` (four to six steps). */
+export declare function ticks(max: number): number[];