@ripple-ui/svelte 0.8.2 → 0.9.0-next.0

package/dist/discover/item.d.ts

@@ -11,8 +11,22 @@ export declare function remixLabel(count: number): string;
 /** Studio listings count recipe opens, not copies. */
 export declare function usedLabel(count: number): string;
 export declare const usageLabel: (item: DiscoverItem) => string;
+/** False at zero, so a card can drop "No remixes yet" instead of printing it. */
+export declare const showUsage: (item: DiscoverItem) => boolean;
 export declare function mediaFor(item: DiscoverItem): {
     kind: DiscoverMediaKind;
     url: string;
 } | null;
 export declare function primaryFor(item: DiscoverItem): DiscoverPrimary | null;
+/** How the detail view shows an item: the studio player, the live page in a
+ *  frame, or the picture. Unknown kinds and items with nothing to play get the art. */
+export type DiscoverRenderer = 'media' | 'frame' | 'art';
+export declare function rendererFor(item: DiscoverItem): DiscoverRenderer;
+/** "Oct 22, 2026" for an ISO timestamp, the same on every machine; null when absent or unparseable. */
+export declare function formatDiscoverDate(iso: string | null | undefined): string | null;
+/** When the item was first published: `createdAt`, else the last publish. */
+export declare const publishedDate: (item: DiscoverItem) => string | null;
+/** The update date, only when it is more than a day after the first publish. */
+export declare function updatedDate(item: DiscoverItem): string | null;
+/** Up to two initials for an avatar fallback: "Asha Rao" -> "AR", "asha" -> "A". */
+export declare function creatorInitials(name: string): string;

package/dist/discover/item.js

@@ -1,5 +1,6 @@
-// discover/item.ts — what a tile or row derives from a DiscoverItem: the studio
-// flag, the usage line, the playable media, and the primary action. Pure
+// discover/item.ts — what a tile, a row or the detail view derives from a
+// DiscoverItem: the studio flag, the usage line (and whether to show it), the
+// playable media, the primary action, and which renderer the detail uses. Pure
 // functions, so the components stay props-in markup-out and the rules are
 // testable without a DOM. Only http(s) urls survive into an href or a src.
 export const isStudioKind = (kind) => kind === 'image' || kind === 'video' || kind === 'music';
@@ -29,6 +30,8 @@ export function usedLabel(count) {
     return `${compact.format(count).toLowerCase()} used`;
 }
 export const usageLabel = (item) => isStudioKind(item.kind) ? usedLabel(item.remixCount) : remixLabel(item.remixCount);
+/** False at zero, so a card can drop "No remixes yet" instead of printing it. */
+export const showUsage = (item) => Number.isFinite(item.remixCount) && item.remixCount > 0;
 export function mediaFor(item) {
     const url = isStudioKind(item.kind) ? httpUrl(item.mediaUrl) : null;
     return url && item.mediaKind ? { kind: item.mediaKind, url } : null;
@@ -43,3 +46,39 @@ export function primaryFor(item) {
         return null;
     return { label: item.kind === 'game' ? 'Play' : 'Use', href, needsAccount: false };
 }
+export function rendererFor(item) {
+    if (isStudioKind(item.kind))
+        return mediaFor(item) ? 'media' : 'art';
+    if (item.kind === 'site' || item.kind === 'game' || item.kind === 'tool')
+        return httpUrl(item.liveUrl) ? 'frame' : 'art';
+    return 'art';
+}
+const dateFormat = new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+function toTime(iso) {
+    if (!iso)
+        return null;
+    const t = Date.parse(iso);
+    return Number.isFinite(t) ? t : null;
+}
+/** "Oct 22, 2026" for an ISO timestamp, the same on every machine; null when absent or unparseable. */
+export function formatDiscoverDate(iso) {
+    const t = toTime(iso);
+    return t === null ? null : dateFormat.format(t);
+}
+const DAY_MS = 24 * 60 * 60 * 1000;
+/** When the item was first published: `createdAt`, else the last publish. */
+export const publishedDate = (item) => formatDiscoverDate(item.createdAt ?? item.updatedAt);
+/** The update date, only when it is more than a day after the first publish. */
+export function updatedDate(item) {
+    const created = toTime(item.createdAt);
+    const updated = toTime(item.updatedAt);
+    if (created === null || updated === null || updated - created <= DAY_MS)
+        return null;
+    return formatDiscoverDate(item.updatedAt);
+}
+/** Up to two initials for an avatar fallback: "Asha Rao" -> "AR", "asha" -> "A". */
+export function creatorInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    const letters = parts.length > 1 ? [parts[0], parts[parts.length - 1]] : parts;
+    return letters.map((p) => Array.from(p)[0]?.toUpperCase() ?? '').join('');
+}

package/dist/discover/layout.d.ts

@@ -7,7 +7,7 @@ export interface DiscoverOption {
     label: string;
     href?: string;
 }
-export declare const GRID_CLASS = "grid grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))] gap-x-5 gap-y-8";
+export declare const GRID_CLASS = "grid grid-cols-[repeat(auto-fill,minmax(min(240px,calc((100%-1.25rem)/2)),1fr))] gap-x-5 gap-y-8";
 export declare const LIST_CLASS = "flex flex-col divide-y divide-border rounded-xl border border-border";
 /** Bleeds into the page's px-6 gutter (-mx-6 px-6), so the parent must pad px-6. */
 export declare const SHELF_CLASS = "-mx-6 flex snap-x snap-mandatory scroll-px-6 gap-5 overflow-x-auto px-6 pb-3 [scrollbar-width:thin] *:w-64 *:shrink-0 *:snap-start";

package/dist/discover/layout.js

@@ -3,7 +3,7 @@
 // and the grid and list container classes the sections and the skeleton share.
 // The classes are paw-enterprise's /discover markup, copied verbatim.
 export const DISCOVER_VIEWS = ['grid', 'shelves', 'list'];
-export const GRID_CLASS = 'grid grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))] gap-x-5 gap-y-8';
+export const GRID_CLASS = 'grid grid-cols-[repeat(auto-fill,minmax(min(240px,calc((100%-1.25rem)/2)),1fr))] gap-x-5 gap-y-8';
 export const LIST_CLASS = 'flex flex-col divide-y divide-border rounded-xl border border-border';
 /** Bleeds into the page's px-6 gutter (-mx-6 px-6), so the parent must pad px-6. */
 export const SHELF_CLASS = '-mx-6 flex snap-x snap-mandatory scroll-px-6 gap-5 overflow-x-auto px-6 pb-3 [scrollbar-width:thin] *:w-64 *:shrink-0 *:snap-start';

package/dist/discover/sections.d.ts

@@ -0,0 +1,39 @@
+import type { DiscoverKind } from './types.js';
+export type DiscoverSectionKey = 'picks' | 'studio' | 'shop' | 'design' | 'everyone' | 'play' | 'site' | 'more';
+export type DiscoverAudience = 'shop' | 'design' | 'everyone' | 'fun';
+export interface DiscoverSectionCopy {
+    title: string;
+    blurb: string;
+    /** The "see all" label. */
+    more: string;
+}
+/** The type tabs, in display order. 'all' clears the kind filter. */
+export declare const DISCOVER_TYPES: readonly {
+    value: DiscoverKind | 'all';
+    label: string;
+}[];
+/** Who an item is for: the audience chips and the publish fields share these labels. */
+export declare const DISCOVER_AUDIENCES: readonly {
+    value: DiscoverAudience;
+    label: string;
+}[];
+/** Section copy with the product's name injected: "Paw" in the app, "Paw OS" on the website. */
+export declare function discoverSections(brand: string): Record<DiscoverSectionKey, DiscoverSectionCopy>;
+/** The minimum an item needs to be grouped. The app's and the website's item types both fit. */
+export interface GroupableItem {
+    featured: boolean;
+    kind: string;
+    audiences?: readonly string[];
+}
+/** Each item lands in its FIRST matching section, in input order; empty sections are dropped. */
+export declare function groupSections<T extends GroupableItem>(items: readonly T[]): {
+    key: DiscoverSectionKey;
+    items: T[];
+}[];
+/** The filter a section's "All …" link sets, or null when no filter shows exactly that section. */
+export declare function sectionFilter(key: DiscoverSectionKey): {
+    kind?: DiscoverKind;
+    audience?: DiscoverAudience;
+} | null;
+/** The heading over an item page's related items. Unknown kinds read "More like this". */
+export declare const relatedHeading: (kind: string) => string;

package/dist/discover/sections.js

@@ -0,0 +1,84 @@
+// discover/sections.ts — the catalogue copy and grouping every Discover page
+// shares: the type tabs, the audience chips, the section titles and blurbs
+// (with the product name passed in: the app says "Paw", the website "Paw OS"),
+// which section each item lands in, which filter a section's "All …" link
+// sets, and the heading over an item page's related items. Pure, so the app
+// and the website render the same sections in the same order without copying
+// the rules.
+import { isStudioKind } from './item.js';
+/** The type tabs, in display order. 'all' clears the kind filter. */
+export const DISCOVER_TYPES = [
+    { value: 'all', label: 'All' },
+    { value: 'tool', label: 'Tools' },
+    { value: 'game', label: 'Games' },
+    { value: 'site', label: 'Sites' },
+    { value: 'image', label: 'Images' },
+    { value: 'video', label: 'Videos' },
+    { value: 'music', label: 'Music' },
+];
+/** Who an item is for: the audience chips and the publish fields share these labels. */
+export const DISCOVER_AUDIENCES = [
+    { value: 'shop', label: 'For my shop' },
+    { value: 'design', label: 'For designers' },
+    { value: 'everyone', label: 'Everyday tools' },
+    { value: 'fun', label: 'Just for fun' },
+];
+/** Section copy with the product's name injected: "Paw" in the app, "Paw OS" on the website. */
+export function discoverSections(brand) {
+    return {
+        picks: { title: 'Staff picks', blurb: `Picked by us from what people make with ${brand}.`, more: 'All staff picks' },
+        studio: { title: 'Made in Paw Studio', blurb: 'Images, videos and songs. Open one with its recipe and make your own.', more: 'All Paw Studio work' },
+        shop: { title: 'For your shop', blurb: 'Print it, share it, put it on the counter.', more: 'All shop tools' },
+        design: { title: 'For designers', blurb: 'Small helpers for people who make things.', more: 'All design tools' },
+        everyone: { title: 'Everyday tools', blurb: 'Quick answers, no sign-up.', more: 'All everyday tools' },
+        play: { title: 'Play', blurb: `Small games, each made with ${brand} in an afternoon.`, more: 'All games' },
+        site: { title: 'Start from a site', blurb: "Live websites with a helper that answers customers. Claim one and it's yours.", more: 'All sites' },
+        more: { title: 'More to try', blurb: `Everything else made with ${brand}.`, more: 'See everything' },
+    };
+}
+const hasAudience = (it, a) => it.audiences?.includes(a) ?? false;
+const SECTION_RULES = [
+    { key: 'picks', match: (it) => it.featured },
+    // Before the audience rules, so a studio item never lands in a tools section.
+    { key: 'studio', match: (it) => isStudioKind(it.kind) },
+    { key: 'shop', match: (it) => it.kind === 'tool' && hasAudience(it, 'shop') },
+    { key: 'design', match: (it) => hasAudience(it, 'design') },
+    { key: 'everyone', match: (it) => hasAudience(it, 'everyone') },
+    { key: 'play', match: (it) => it.kind === 'game' },
+    { key: 'site', match: (it) => it.kind === 'site' },
+    // A tool aimed only at 'fun' (or no one) would otherwise vanish.
+    { key: 'more', match: () => true },
+];
+/** Each item lands in its FIRST matching section, in input order; empty sections are dropped. */
+export function groupSections(items) {
+    const out = SECTION_RULES.map((r) => ({ key: r.key, items: [] }));
+    for (const it of items)
+        out[SECTION_RULES.findIndex((r) => r.match(it))].items.push(it);
+    return out.filter((s) => s.items.length > 0);
+}
+/** The filter a section's "All …" link sets, or null when no filter shows exactly that section. */
+export function sectionFilter(key) {
+    switch (key) {
+        case 'shop':
+            return { kind: 'tool', audience: 'shop' };
+        case 'design':
+        case 'everyone':
+            return { audience: key };
+        case 'play':
+            return { kind: 'game' };
+        case 'site':
+            return { kind: 'site' };
+        default:
+            return null;
+    }
+}
+const RELATED = {
+    site: 'More sites',
+    game: 'More games',
+    tool: 'More tools',
+    image: 'More images',
+    video: 'More videos',
+    music: 'More music',
+};
+/** The heading over an item page's related items. Unknown kinds read "More like this". */
+export const relatedHeading = (kind) => (Object.hasOwn(RELATED, kind) ? RELATED[kind] : 'More like this');

package/dist/discover/types.d.ts

@@ -20,4 +20,21 @@ export interface DiscoverItem {
     /** Copies made; for a studio listing, times its recipe was opened. */
     remixCount: number;
     featured: boolean;
+    /** Who made it, when they opted in at publish. */
+    creator?: {
+        name: string;
+        handle?: string | null;
+        avatarUrl?: string | null;
+    } | null;
+    /** Free-form topic tags, drawn as chips on the detail view. */
+    tags?: string[];
+    /** ISO timestamp of the first publish. */
+    createdAt?: string | null;
+    /** ISO timestamp of the last publish. */
+    updatedAt?: string | null;
+    /** The listing this one was remixed from, by slug. */
+    remixedFrom?: {
+        slug: string;
+        title: string;
+    } | null;
 }

package/dist/discover/types.js

@@ -1,6 +1,9 @@
 // discover/types.ts — the item shape the Discover card set renders. A flattened
 // view of one public catalogue listing: enough to draw a tile, a row, or the
-// detail media on the server, with no fetch and no store. Consumers map their
+// detail view on the server, with no fetch and no store. Consumers map their
 // wire format onto this; the components derive everything else (labels, the
-// primary action, the studio flag) from these fields.
+// primary action, the studio flag, the renderer) from these fields. The
+// creator (with an optional avatar), tags, publish and update times and the
+// remix source are optional: older listings and older consumers leave them
+// out, and a card simply draws less.
 export {};

package/dist/discover/whatsapp-card-export.d.ts

@@ -0,0 +1,9 @@
+import { type CardLayout } from './whatsapp-card.js';
+/** Paint the card at 300 dpi. Text that would run into the QR is narrowed to fit. */
+export declare function paintCard(ctx: CanvasRenderingContext2D, layout: CardLayout): void;
+export declare function cardPng(layout: CardLayout): Promise<Blob>;
+export declare const cardSvgBlob: (layout: CardLayout) => Blob;
+/** The default save: an anchor download of a blob URL. */
+export declare function downloadBlob(blob: Blob, filename: string): void;
+/** Print just the card, from a hidden iframe removed once printing is done. */
+export declare function printCard(layout: CardLayout, title: string): void;

package/dist/discover/whatsapp-card-export.js

@@ -0,0 +1,72 @@
+// discover/whatsapp-card-export.ts — getting the WhatsApp QR card out of the page,
+// browser only (call these from event handlers, never at render): a 300 dpi PNG
+// painted on a canvas from the same millimetre layout the SVG uses (./whatsapp-card
+// cardLayout; the QR through Path2D, so it is the same path), the SVG as a blob,
+// the default save (an anchor download of a blob URL, revoked a minute later since
+// WebKit may read the blob after click() returns), and Print, which prints just the
+// card on one 148 × 105 mm page from a hidden iframe so no host chrome or theme
+// reaches the paper. A host with its own save path passes `ondownload` to the card.
+import { CARD_EDGE, CARD_FONT, CARD_INK, CARD_PAPER, CARD_PX, PX_PER_MM, cardPrintHtml, cardSvg, } from './whatsapp-card.js';
+/** Paint the card at 300 dpi. Text that would run into the QR is narrowed to fit. */
+export function paintCard(ctx, layout) {
+    const s = PX_PER_MM;
+    ctx.fillStyle = CARD_PAPER;
+    ctx.fillRect(0, 0, CARD_PX.width, CARD_PX.height);
+    ctx.strokeStyle = CARD_EDGE;
+    ctx.lineWidth = 0.3 * s;
+    ctx.strokeRect(0.15 * s, 0.15 * s, (layout.width - 0.3) * s, (layout.height - 0.3) * s);
+    for (const t of layout.texts) {
+        ctx.font = `${t.weight} ${t.size * s}px ${CARD_FONT}`;
+        ctx.fillStyle = t.color;
+        ctx.textBaseline = 'alphabetic';
+        ctx.fillText(t.text, t.x * s, t.y * s, t.maxWidth * s);
+    }
+    const { qr } = layout;
+    ctx.save();
+    ctx.translate(qr.x * s, qr.y * s);
+    ctx.scale((qr.size * s) / qr.path.size, (qr.size * s) / qr.path.size);
+    ctx.fillStyle = CARD_INK;
+    ctx.fill(new Path2D(qr.path.d));
+    ctx.restore();
+}
+export async function cardPng(layout) {
+    const canvas = document.createElement('canvas');
+    canvas.width = CARD_PX.width;
+    canvas.height = CARD_PX.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('This browser cannot draw the card.');
+    paintCard(ctx, layout);
+    return new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('The card could not be saved.'))), 'image/png'));
+}
+export const cardSvgBlob = (layout) => new Blob([cardSvg(layout)], { type: 'image/svg+xml' });
+/** The default save: an anchor download of a blob URL. */
+export function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+/** Print just the card, from a hidden iframe removed once printing is done. */
+export function printCard(layout, title) {
+    const frame = document.createElement('iframe');
+    frame.setAttribute('aria-hidden', 'true');
+    frame.tabIndex = -1;
+    frame.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden';
+    frame.onload = () => {
+        const win = frame.contentWindow;
+        if (!win)
+            return frame.remove();
+        win.addEventListener('afterprint', () => frame.remove(), { once: true });
+        win.focus();
+        win.print();
+        // Some engines never fire afterprint; don't leave the frame behind for good.
+        setTimeout(() => frame.remove(), 60_000);
+    };
+    frame.srcdoc = cardPrintHtml(layout, title);
+    document.body.appendChild(frame);
+}

package/dist/discover/whatsapp-card.d.ts

@@ -0,0 +1,106 @@
+import { type QrPath } from './whatsapp-qr.js';
+export interface DialCode {
+    /** ISO 3166-1 alpha-2. */
+    iso: string;
+    name: string;
+    /** Calling code digits, no '+'. */
+    code: string;
+}
+export declare const DIAL_CODES: readonly DialCode[];
+export declare const DEFAULT_DIAL_ISO = "IN";
+export declare const dialCodeFor: (iso: string) => DialCode;
+/** The first browser language with a region we list (en-GB → GB), else India. */
+export declare function defaultDialIso(languages: readonly string[] | undefined): string;
+/** The listed country an international number's digits start with, longest code
+ *  first; `current` wins among countries that share the matched code. */
+export declare function matchDialCode(digits: string, current?: string): DialCode | null;
+export declare const SHOP_MAX = 28;
+export declare const MESSAGE_MAX = 200;
+export declare const DEFAULT_SHOP = "Sharma Sweets";
+export declare const DEFAULT_MESSAGE = "Hi! I'd like to place an order.";
+/** The example number the server renders, so a page with JS off shows a real card. */
+export declare const EXAMPLE_PHONE = "98765 43210";
+/** E.164 allows at most 15 digits; below 8 no real number is complete. */
+export declare const E164_MIN = 8;
+export declare const E164_MAX = 15;
+/** The national part as digits: separators dropped, trunk zeros dropped. */
+export declare const nationalDigits: (raw: string) => string;
+/** A pasted international number ("+44 7700 900123", "0044 7700 900123") split into
+ *  the listed country it starts with and the rest. Null for a national number, or an
+ *  international one whose code we don't list. */
+export declare function splitInternational(raw: string, currentIso?: string): {
+    iso: string;
+    national: string;
+} | null;
+export type PhoneCheck = {
+    ok: true;
+    digits: string;
+    line: string;
+}
+/** `error` is null while the field is empty: nothing to complain about yet. */
+ | {
+    ok: false;
+    error: string | null;
+};
+/** "+91 98765 43210": ten-digit numbers split 5 + 5, others in fours from the end. */
+export declare function formatLine(code: string, national: string): string;
+export declare function checkPhone(code: string, raw: string): PhoneCheck;
+/** https://wa.me/<digits>, with ?text= when there is a message. */
+export declare function waLink(digits: string, message: string): string;
+/** `<shop>-whatsapp-qr.<ext>`, slugified; `whatsapp-qr.<ext>` for a name with no letters. */
+export declare function cardFilename(shop: string, ext: 'png' | 'svg'): string;
+export declare const CARD_MM: {
+    readonly width: 148;
+    readonly height: 105;
+};
+export declare const PNG_DPI = 300;
+/** Pixels per millimetre at the PNG's resolution. */
+export declare const PX_PER_MM: number;
+/** 148 × 105 mm at 300 dpi. */
+export declare const CARD_PX: {
+    readonly width: number;
+    readonly height: number;
+};
+export declare const CARD_INK = "#111111";
+export declare const CARD_PAPER = "#ffffff";
+export declare const CARD_MUTED = "#555555";
+export declare const CARD_EDGE = "#d4d4d4";
+export declare const CARD_FONT = "Helvetica, Arial, sans-serif";
+export declare const CARD_CTA = "Scan to order on WhatsApp \u2192";
+export declare const DEFAULT_BRAND = "Paw";
+/** The small print at the card's foot, naming the host's product. */
+export declare const cardFooter: (brand?: string) => string;
+export interface CardText {
+    text: string;
+    /** Left edge and baseline, in mm. */
+    x: number;
+    y: number;
+    /** Font size in mm. */
+    size: number;
+    weight: 400 | 700;
+    color: string;
+    /** Widest the text may run, in mm (the column beside the QR). */
+    maxWidth: number;
+}
+export interface CardLayout {
+    width: number;
+    height: number;
+    texts: CardText[];
+    /** QR square: top-left and side, in mm. */
+    qr: {
+        x: number;
+        y: number;
+        size: number;
+        path: QrPath;
+    };
+}
+export declare function cardLayout(input: {
+    shop: string;
+    line: string;
+    link: string;
+    brand?: string;
+}): CardLayout;
+/** The card as a standalone SVG document, sized in millimetres for print. */
+export declare function cardSvg(layout: CardLayout): string;
+/** The print document: one card on a 148 × 105 mm page, nothing else. */
+export declare function cardPrintHtml(layout: CardLayout, title: string): string;