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

package/dist/discover/LiveFrame.svelte

@@ -0,0 +1,162 @@
+<!-- discover/LiveFrame.svelte — a Discover item's live page (a site, a game, a
+     tool) inside the detail view. By default it starts as the poster (ItemArt)
+     and loads nothing: the iframe is created only when the visitor presses
+     "Load site", "Play" or "Open tool", so a grid, overlay or sheet never
+     pulls in a stranger's page on view. `autoload` (the item's own page)
+     renders the iframe straight away, in the server HTML too, so it loads
+     with JS off. `tall` sizes the frame for that page, min(72vh, 760px) high,
+     instead of 16:9. Sites get a Desktop / Phone width toggle once loaded
+     (phone is a 390px centred frame). "Open full screen" always links to the
+     page. Only an http(s) url is framed or linked; anything else leaves the
+     poster.
+
+     Server-safe: nothing touches window. The load button is drawn after
+     mount, so with JS off (and no autoload) the poster and the "Open full
+     screen" link are what shows, and the link works.
+
+     Sandbox (frameSandbox in frame.ts): allow-scripts allow-forms
+     allow-popups allow-pointer-lock, plus allow-same-origin only for an https
+     page on a subdomain of LIVE_FRAME_TRUSTED_HOST_SUFFIX
+     (.pawsites.workers.dev). Scripts plus same-origin only escape the sandbox
+     when the page shares the host's origin; each published site is its own
+     subdomain on a registrable domain apart from the website and the app, so
+     it keeps its own origin and storage (games save scores). Any other host
+     runs opaque, where storage throws; it still works through "Open full
+     screen". The link is user-submitted content, so it carries
+     rel="nofollow ugc noopener noreferrer". -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { onMount } from 'svelte';
+  import ExternalLink from '@lucide/svelte/icons/external-link';
+  import Monitor from '@lucide/svelte/icons/monitor';
+  import Play from '@lucide/svelte/icons/play';
+  import Smartphone from '@lucide/svelte/icons/smartphone';
+  import { Button } from '../components/ui/button/index.js';
+  import { cn } from '../utils.js';
+  import ItemArt from './ItemArt.svelte';
+  import { frameSandbox } from './frame.js';
+  import { httpUrl } from './item.js';
+  import type { DiscoverKind } from './types.js';
+
+  let {
+    url,
+    title,
+    kind,
+    poster = null,
+    tint,
+    initial,
+    autoload = false,
+    tall = false,
+    class: className,
+  }: {
+    /** The live page. Only http(s) is framed. */
+    url: string;
+    /** The item's title: the iframe's accessible name and the poster's alt. */
+    title: string;
+    kind: DiscoverKind;
+    /** The preview picture shown until the page loads. */
+    poster?: string | null;
+    /** The placeholder's tint and glyph when there is no poster (tintFor / initialFor). */
+    tint: string;
+    initial: string;
+    /** Render the iframe at once, server HTML included (the item's own page). */
+    autoload?: boolean;
+    /** The page's tall frame instead of a 16:9 strip. */
+    tall?: boolean;
+    class?: string;
+  } = $props();
+
+  const LOAD_LABEL: Partial<Record<DiscoverKind, string>> = { site: 'Load site', game: 'Play', tool: 'Open tool' };
+
+  const src = $derived(httpUrl(url));
+  // From the url, never a prop: see the header.
+  const sandbox = $derived(frameSandbox(src));
+  const loadLabel = $derived(LOAD_LABEL[kind] ?? 'Load');
+  let ready = $state(false);
+  let pressed = $state(false);
+  const loaded = $derived(autoload || pressed);
+  const TALL = 'h-[min(72vh,760px)] min-h-80';
+  let phone = $state(false);
+
+  onMount(() => {
+    ready = true;
+  });
+</script>
+
+<div class={cn('flex flex-col gap-2', className)} data-testid="discover-live-frame">
+  {#if loaded && src}
+    <div
+      class={cn(
+        'overflow-hidden rounded-[10px] border border-border bg-background',
+        phone
+          ? tall
+            ? cn(TALL, 'mx-auto aspect-[390/844] w-auto max-w-full')
+            : 'mx-auto aspect-[390/844] max-h-[75vh] w-[390px] max-w-full'
+          : tall
+            ? cn(TALL, 'w-full')
+            : 'aspect-video w-full',
+      )}
+    >
+      <iframe
+        class="block h-full w-full border-0"
+        src={safeUrl(src, { kind: 'resource' })}
+        {title}
+        {sandbox}
+        allow="fullscreen; gamepad; autoplay"
+        loading={autoload ? 'eager' : 'lazy'}
+        referrerpolicy="no-referrer"
+        data-testid="discover-live-iframe"
+      ></iframe>
+    </div>
+  {:else}
+    <div class="relative">
+      <ItemArt imageUrl={poster} {title} {tint} {initial} class={tall ? cn(TALL, 'aspect-auto') : undefined} />
+      {#if ready && src}
+        <div class="absolute inset-0 grid place-items-center">
+          <Button size="lg" class="rounded-full px-5 shadow-md" aria-label={`${loadLabel}: ${title}`} onclick={() => (pressed = true)}>
+            <Play class="size-4" aria-hidden="true" />{loadLabel}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if src}
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      {#if kind === 'site' && loaded}
+        <div class="inline-flex rounded-lg border border-border p-0.5" role="group" aria-label="Preview width">
+          <Button
+            size="xs"
+            variant={phone ? 'ghost' : 'secondary'}
+            class={phone ? 'text-muted-foreground' : 'text-foreground'}
+            aria-pressed={!phone}
+            onclick={() => (phone = false)}
+          >
+            <Monitor aria-hidden="true" />Desktop
+          </Button>
+          <Button
+            size="xs"
+            variant={phone ? 'secondary' : 'ghost'}
+            class={phone ? 'text-foreground' : 'text-muted-foreground'}
+            aria-pressed={phone}
+            onclick={() => (phone = true)}
+          >
+            <Smartphone aria-hidden="true" />Phone
+          </Button>
+        </div>
+      {:else}
+        <span></span>
+      {/if}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="text-foreground"
+        href={safeUrl(src)}
+        target="_blank"
+        rel="nofollow ugc noopener noreferrer"
+        aria-label={`Open ${title} full screen (opens in a new tab)`}
+      >
+        <ExternalLink aria-hidden="true" />Open full screen
+      </Button>
+    </div>
+  {/if}
+</div>

package/dist/discover/LiveFrame.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { DiscoverKind } from './types.js';
+type $$ComponentProps = {
+    /** The live page. Only http(s) is framed. */
+    url: string;
+    /** The item's title: the iframe's accessible name and the poster's alt. */
+    title: string;
+    kind: DiscoverKind;
+    /** The preview picture shown until the page loads. */
+    poster?: string | null;
+    /** The placeholder's tint and glyph when there is no poster (tintFor / initialFor). */
+    tint: string;
+    initial: string;
+    /** Render the iframe at once, server HTML included (the item's own page). */
+    autoload?: boolean;
+    /** The page's tall frame instead of a 16:9 strip. */
+    tall?: boolean;
+    class?: string;
+};
+declare const LiveFrame: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiveFrame = ReturnType<typeof LiveFrame>;
+export default LiveFrame;

package/dist/discover/WhatsAppQrCard.svelte

@@ -0,0 +1,302 @@
+<!-- discover/WhatsAppQrCard.svelte — the Discover hero's "Try one · no sign-up" widget:
+     a working WhatsApp QR card for a shop counter. The app's /discover and the public
+     Discover page both mount this one component (in DiscoverHeader's `aside`).
+
+     The shop name, a calling code (Select; default from the browser's languages, read
+     on mount, else India) and the number build a wa.me link with an optional
+     pre-filled message; a pasted "+44 7700 900123" picks the country itself. Until the
+     number is valid the preview shows a placeholder and every export is disabled, so
+     no QR ever points at a wrong number; the reason shows under the field (aria-live)
+     once the field is left. The preview is the printed card as it downloads: white
+     paper and dark ink in every theme (white/neutral classes, since paper is not
+     themed), tilted like a card on a counter (flat with reduced motion).
+
+     Server render: India and the example "Sharma Sweets" / "98765 43210", so a page
+     with JS off shows a real example card and link. On mount the number is cleared
+     and the country follows the browser. All logic is in ./whatsapp-card; exports in
+     ./whatsapp-card-export (PNG 300 dpi, SVG in mm, Print one 148 × 105 mm page).
+     Host hooks: `oncopy`, `onopenlink`, `ondownload` replace the browser defaults
+     (clipboard, a target=_blank link, an anchor download); the "Make a full menu or
+     site" action renders only with `onmake` or `makeHref` (painted text-primary, the
+     host's own accent, so it reads on a host whose ripple tokens are the light set);
+     `brand` names the product.
+
+     Collapsed on narrow: the card is a <details> whose summary is a one-line
+     teaser ("Make a WhatsApp QR card for your shop" and a chevron). It sizes
+     off its own box (container `qr-card`): under 30rem (a phone) the details
+     start closed and the teaser opens them; from 30rem the teaser hides and
+     the content shows with the details still closed, through
+     ::details-content, so the server markup is the same at every width and
+     hydration never jumps. Works with JS off. A browser without
+     ::details-content keeps the teaser at every width; on mount, a wide one
+     opens the details instead. -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { safeUrl } from '@ripple-ui/core';
+  import Check from '@lucide/svelte/icons/check';
+  import ChevronDown from '@lucide/svelte/icons/chevron-down';
+  import Copy from '@lucide/svelte/icons/copy';
+  import Download from '@lucide/svelte/icons/download';
+  import ExternalLink from '@lucide/svelte/icons/external-link';
+  import Printer from '@lucide/svelte/icons/printer';
+  import QrCode from '@lucide/svelte/icons/qr-code';
+  import { cn } from '../utils.js';
+  import { Badge } from '../components/ui/badge/index.js';
+  import { Button } from '../components/ui/button/index.js';
+  import { Input } from '../components/ui/input/index.js';
+  import { Label } from '../components/ui/label/index.js';
+  import * as Select from '../components/ui/select/index.js';
+  import {
+    DEFAULT_BRAND,
+    DEFAULT_DIAL_ISO,
+    DEFAULT_MESSAGE,
+    DEFAULT_SHOP,
+    DIAL_CODES,
+    EXAMPLE_PHONE,
+    MESSAGE_MAX,
+    SHOP_MAX,
+    cardFilename,
+    cardFooter,
+    cardLayout,
+    checkPhone,
+    defaultDialIso,
+    dialCodeFor,
+    splitInternational,
+    waLink,
+  } from './whatsapp-card.js';
+  import { cardPng, cardSvgBlob, downloadBlob, printCard } from './whatsapp-card-export.js';
+
+  let {
+    brand = DEFAULT_BRAND,
+    oncopy,
+    onopenlink,
+    ondownload,
+    onmake,
+    makeHref,
+    class: className,
+  }: {
+    /** The product named in "Make a full menu or site with …" and on the card's foot. */
+    brand?: string;
+    /** Copy the wa.me link. Default: the clipboard API. */
+    oncopy?: (text: string) => Promise<void> | void;
+    /** Open the wa.me link ("Test it"). Default: a plain target=_blank link. */
+    onopenlink?: (url: string) => void;
+    /** Save a PNG or SVG. Default: an anchor download of a blob URL. */
+    ondownload?: (blob: Blob, filename: string) => void;
+    /** "Make a full menu or site", with the typed shop name. */
+    onmake?: (shop: string) => void;
+    /** The same action as a link, for a host without a callback. */
+    makeHref?: string;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+
+  let shop = $state(DEFAULT_SHOP);
+  let iso = $state(DEFAULT_DIAL_ISO);
+  let phone = $state(EXAMPLE_PHONE);
+  let message = $state(DEFAULT_MESSAGE);
+  let touched = $state(false);
+  let copied = $state(false);
+  let note = $state<string | null>(null);
+  let details = $state<HTMLDetailsElement>();
+
+  /** Width (px) of the card's own box from which it shows in full: 30rem. */
+  const FULL_FROM = 480;
+
+  onMount(() => {
+    iso = defaultDialIso(navigator.languages);
+    phone = '';
+    // Without ::details-content the CSS cannot show a closed card's body, so a
+    // wide card opens itself. Browsers that have it never change state here.
+    const box = details?.parentElement;
+    if (details && box && !CSS.supports?.('selector(::details-content)') && box.clientWidth >= FULL_FROM) details.open = true;
+  });
+
+  const dial = $derived(dialCodeFor(iso));
+  const check = $derived(checkPhone(dial.code, phone));
+  const link = $derived(check.ok ? waLink(check.digits, message) : null);
+  const layout = $derived(check.ok && link ? cardLayout({ shop, line: check.line, link, brand }) : null);
+  const error = $derived(!check.ok && touched ? check.error : null);
+
+  /** A pasted or typed international number picks its country. */
+  function onPhoneInput(e: Event & { currentTarget: HTMLInputElement }) {
+    const split = splitInternational(e.currentTarget.value, iso);
+    if (!split) return;
+    iso = split.iso;
+    phone = split.national;
+  }
+
+  const save = (blob: Blob, filename: string) => (ondownload ?? downloadBlob)(blob, filename);
+
+  async function savePng() {
+    if (!layout) return;
+    note = null;
+    try {
+      save(await cardPng(layout), cardFilename(shop, 'png'));
+    } catch {
+      note = "Couldn't make the PNG. Try the SVG or Print.";
+    }
+  }
+  function saveSvg() {
+    if (layout) save(cardSvgBlob(layout), cardFilename(shop, 'svg'));
+  }
+  function print() {
+    if (layout) printCard(layout, `${shop.trim() || 'Shop'} WhatsApp QR card`);
+  }
+  async function copy(text: string) {
+    note = null;
+    try {
+      await (oncopy ?? ((t: string) => navigator.clipboard.writeText(t)))(text);
+      copied = true;
+      setTimeout(() => (copied = false), 1500);
+    } catch {
+      note = "Couldn't copy the link.";
+    }
+  }
+</script>
+
+<div class={cn('@container/qr-card w-full min-w-0 justify-self-center', className)} data-testid="discover-qr-card">
+<details class="qr-details group/qr mx-auto w-full max-w-[440px]" bind:this={details} data-testid="discover-qr-details">
+  <summary
+    class="qr-teaser flex cursor-pointer list-none items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 text-card-foreground shadow-sm select-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none group-open/qr:mb-3 [&::-webkit-details-marker]:hidden"
+    data-testid="discover-qr-teaser"
+  >
+    <span class="grid size-8 shrink-0 place-items-center rounded-lg bg-muted text-foreground" aria-hidden="true"><QrCode class="size-4" /></span>
+    <span class="min-w-0 flex-1 text-callout font-medium text-foreground">Make a WhatsApp QR card for your shop</span>
+    <ChevronDown
+      class="size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-open/qr:rotate-180 motion-reduce:transition-none"
+      aria-hidden="true"
+    />
+  </summary>
+<div class="relative w-full pt-3">
+  <Badge class="absolute top-0 left-6 z-10 uppercase">Try one · no sign-up</Badge>
+  <div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-5 text-card-foreground shadow-sm">
+    <div>
+      <h2 class="text-title-3 font-semibold text-foreground">WhatsApp QR card</h2>
+      <p class="text-subheadline text-muted-foreground">Customers scan it and land in your WhatsApp chat.</p>
+    </div>
+
+    <div class="grid items-start gap-3 sm:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+      <div class="flex min-w-0 flex-col gap-1.5">
+        <Label for="{uid}-shop">Shop name</Label>
+        <Input id="{uid}-shop" bind:value={shop} maxlength={SHOP_MAX} placeholder="Your shop name" />
+      </div>
+      <div class="flex min-w-0 flex-col gap-1.5">
+        <Label for="{uid}-phone">WhatsApp number</Label>
+        <div class="flex gap-1.5">
+          <Select.Root type="single" value={iso} onValueChange={(v) => (iso = v)}>
+            <Select.Trigger class="w-[5.5rem] shrink-0 tabular-nums" aria-label={`Country code, ${dial.name}`} data-testid="discover-qr-country">
+              {dial.iso} +{dial.code}
+            </Select.Trigger>
+            <Select.Content class="max-h-72">
+              {#each DIAL_CODES as d (d.iso)}
+                <Select.Item value={d.iso} label={`${d.name} +${d.code}`}>{d.name} <span class="text-muted-foreground tabular-nums">+{d.code}</span></Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Root>
+          <Input
+            id="{uid}-phone"
+            class="min-w-0 tabular-nums"
+            bind:value={phone}
+            oninput={onPhoneInput}
+            onblur={() => (touched = true)}
+            inputmode="tel"
+            autocomplete="tel-national"
+            maxlength={24}
+            placeholder={EXAMPLE_PHONE}
+            aria-invalid={error ? true : undefined}
+            aria-describedby="{uid}-phone-note"
+          />
+        </div>
+        <p id="{uid}-phone-note" class={cn(error ? 'text-footnote text-ripple-error-text' : 'sr-only')} aria-live="polite">{error ?? ''}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5">
+      <Label for="{uid}-message">First message <span class="font-normal text-muted-foreground">optional</span></Label>
+      <Input id="{uid}-message" bind:value={message} maxlength={MESSAGE_MAX} placeholder="What customers send when they scan" />
+    </div>
+
+    <div
+      class="relative mx-auto grid aspect-[1.75/1] w-full -rotate-1 grid-cols-[1fr_auto] items-center gap-3.5 rounded-md border border-neutral-200 bg-white px-5 pt-4 pb-7 text-neutral-900 shadow-md transition-transform duration-150 hover:rotate-0 motion-reduce:rotate-0 motion-reduce:transition-none sm:w-[88%]"
+      aria-live="polite"
+      data-testid="discover-qr-preview"
+    >
+      <div class="min-w-0">
+        <div class="text-title-3 font-bold! break-words sm:text-title-2" data-testid="discover-qr-shop">{shop.trim() || 'Your shop'}</div>
+        <div class="mt-1.5 text-callout text-neutral-800 tabular-nums" data-testid="discover-qr-line">
+          {check.ok ? check.line : 'Add your WhatsApp number'}
+        </div>
+        <div class="mt-3 text-footnote font-bold text-neutral-900">Scan to order on WhatsApp →</div>
+      </div>
+      {#if layout}
+        <svg
+          class="size-20 bg-white text-neutral-900 sm:size-24"
+          viewBox="0 0 {layout.qr.path.size} {layout.qr.path.size}"
+          shape-rendering="crispEdges"
+          role="img"
+          aria-label={`QR code that opens a WhatsApp chat with ${check.ok ? check.line : ''}`}
+          data-testid="discover-qr-code"
+        >
+          <path d={layout.qr.path.d} fill="currentColor" />
+        </svg>
+      {:else}
+        <div
+          class="grid size-20 place-items-center rounded-sm border-2 border-dashed border-neutral-300 bg-neutral-50 px-1 text-center text-caption-1 text-neutral-600 sm:size-24"
+          data-testid="discover-qr-placeholder"
+        >
+          QR appears when the number is complete
+        </div>
+      {/if}
+      <div class="absolute bottom-1.5 left-5 text-caption-1 text-neutral-500">{cardFooter(brand)}</div>
+    </div>
+
+    <div class="flex flex-wrap gap-2">
+      <Button disabled={!layout} onclick={() => void savePng()} data-testid="discover-qr-png"><Download />Download PNG</Button>
+      <Button variant="outline" disabled={!layout} onclick={saveSvg} data-testid="discover-qr-svg">SVG</Button>
+      <Button variant="outline" disabled={!layout} onclick={print} data-testid="discover-qr-print"><Printer />Print</Button>
+    </div>
+    {#if note}<p class="text-footnote text-ripple-error-text" role="status">{note}</p>{/if}
+
+    {#if link}
+      <div class="flex min-w-0 items-center gap-1 rounded-lg bg-muted px-2.5 py-1 text-footnote">
+        <span class="min-w-0 flex-1 truncate text-muted-foreground" title={link} data-testid="discover-qr-link">{link}</span>
+        <Button variant="ghost" size="icon-xs" aria-label="Copy the WhatsApp link" onclick={() => void copy(link)}>
+          {#if copied}<Check />{:else}<Copy />{/if}
+        </Button>
+        {#if onopenlink}
+          <Button variant="ghost" size="xs" onclick={() => onopenlink(link)}><ExternalLink />Test it</Button>
+        {:else}
+          <Button variant="ghost" size="xs" href={safeUrl(link)} target="_blank" rel="noopener noreferrer"><ExternalLink />Test it</Button>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-footnote text-muted-foreground">
+      <span>Free · runs in your browser</span>
+      {#if onmake}
+        <Button variant="link" size="xs" class="h-auto px-0 text-primary" onclick={() => onmake(shop)}>Make a full menu or site with {brand}</Button>
+      {:else if makeHref}
+        <Button variant="link" size="xs" class="h-auto px-0 text-primary" href={safeUrl(makeHref)}>Make a full menu or site with {brand}</Button>
+      {/if}
+    </div>
+  </div>
+</div>
+</details>
+</div>
+
+<style>
+  /* From 30rem of the card's own box: no teaser, the body shows while the
+     details stay closed (so the server markup never changes with width). */
+  @container qr-card (min-width: 30rem) {
+    @supports selector(::details-content) {
+      .qr-details > summary {
+        display: none;
+      }
+      .qr-details::details-content {
+        content-visibility: visible;
+      }
+    }
+  }
+</style>

package/dist/discover/WhatsAppQrCard.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    /** The product named in "Make a full menu or site with …" and on the card's foot. */
+    brand?: string;
+    /** Copy the wa.me link. Default: the clipboard API. */
+    oncopy?: (text: string) => Promise<void> | void;
+    /** Open the wa.me link ("Test it"). Default: a plain target=_blank link. */
+    onopenlink?: (url: string) => void;
+    /** Save a PNG or SVG. Default: an anchor download of a blob URL. */
+    ondownload?: (blob: Blob, filename: string) => void;
+    /** "Make a full menu or site", with the typed shop name. */
+    onmake?: (shop: string) => void;
+    /** The same action as a link, for a host without a callback. */
+    makeHref?: string;
+    class?: string;
+};
+declare const WhatsAppQrCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type WhatsAppQrCard = ReturnType<typeof WhatsAppQrCard>;
+export default WhatsAppQrCard;

package/dist/discover/frame.d.ts

@@ -0,0 +1,7 @@
+/** Hostname suffix whose pages keep their own origin in the frame. The leading dot
+ *  makes it a subdomain match: the bare domain and look-alikes do not qualify. */
+export declare const LIVE_FRAME_TRUSTED_HOST_SUFFIX = ".pawsites.workers.dev";
+/** True when `url` is https on a subdomain of the trusted suffix. */
+export declare function isTrustedFrameHost(url: string | null | undefined): boolean;
+/** The iframe sandbox for a live page at `url`. */
+export declare const frameSandbox: (url: string | null | undefined) => string;

package/dist/discover/frame.js

@@ -0,0 +1,27 @@
+// discover/frame.ts — the sandbox LiveFrame puts on a live page. Every page
+// gets allow-scripts allow-forms allow-popups allow-pointer-lock. A page on a
+// trusted host (https, hostname ending in LIVE_FRAME_TRUSTED_HOST_SUFFIX) also
+// gets allow-same-origin, so it keeps its own storage: games save scores in
+// localStorage. Scripts plus same-origin only escape the sandbox when the
+// framed page shares the embedder's origin; each published site is its own
+// subdomain of pawsites.workers.dev, a registrable domain apart from
+// pocketpaw.xyz and the app, so its origin is never the host's. Any other
+// host stays opaque.
+/** Hostname suffix whose pages keep their own origin in the frame. The leading dot
+ *  makes it a subdomain match: the bare domain and look-alikes do not qualify. */
+export const LIVE_FRAME_TRUSTED_HOST_SUFFIX = '.pawsites.workers.dev';
+const BASE_SANDBOX = 'allow-scripts allow-forms allow-popups allow-pointer-lock';
+/** True when `url` is https on a subdomain of the trusted suffix. */
+export function isTrustedFrameHost(url) {
+    if (!url)
+        return false;
+    try {
+        const u = new URL(url);
+        return u.protocol === 'https:' && u.hostname.endsWith(LIVE_FRAME_TRUSTED_HOST_SUFFIX);
+    }
+    catch {
+        return false;
+    }
+}
+/** The iframe sandbox for a live page at `url`. */
+export const frameSandbox = (url) => isTrustedFrameHost(url) ? `${BASE_SANDBOX} allow-same-origin` : BASE_SANDBOX;

package/dist/discover/href.d.ts

@@ -1,2 +1,8 @@
 import type { DiscoverKind } from './types.js';
-export declare function itemHref(kind: DiscoverKind, idOrSlug: string): string;
+/** Where items of each kind used to live, before every kind moved to /discover/. */
+export declare const LEGACY_ITEM_PREFIXES: Readonly<Partial<Record<DiscoverKind, string>>>;
+/** The item's page. `kind` is kept so call sites read the same as before; every kind routes alike. */
+export declare function itemHref(_kind: DiscoverKind, idOrSlug: string): string;
+/** A plain primary-button click with no modifier: the one a card may take over to
+ *  open an overlay. Ctrl/cmd/shift/alt-clicks and middle clicks keep the link. */
+export declare function isPlainClick(e: Pick<MouseEvent, 'button' | 'metaKey' | 'ctrlKey' | 'shiftKey' | 'altKey' | 'defaultPrevented'>): boolean;

package/dist/discover/href.js

@@ -1,10 +1,20 @@
-// discover/href.ts — the public route for one Discover item, by kind. Tools live
-// under /free-tools/ because the docs site owns /tools/*.
-const PREFIX = {
+// discover/href.ts — the public route for one Discover item: /discover/<slug>
+// for every kind, so the website and the app agree on one URL per item. The
+// old per-kind folders are kept as LEGACY_ITEM_PREFIXES for the website's
+// redirects from the routes it used to serve. isPlainClick decides when a card
+// link may be taken over to open an overlay instead.
+/** Where items of each kind used to live, before every kind moved to /discover/. */
+export const LEGACY_ITEM_PREFIXES = Object.freeze({
     tool: '/free-tools/',
     game: '/play/',
     site: '/templates/',
-};
-export function itemHref(kind, idOrSlug) {
-    return `${PREFIX[kind] ?? '/discover/'}${encodeURIComponent(idOrSlug)}`;
+});
+/** The item's page. `kind` is kept so call sites read the same as before; every kind routes alike. */
+export function itemHref(_kind, idOrSlug) {
+    return `/discover/${encodeURIComponent(idOrSlug)}`;
+}
+/** A plain primary-button click with no modifier: the one a card may take over to
+ *  open an overlay. Ctrl/cmd/shift/alt-clicks and middle clicks keep the link. */
+export function isPlainClick(e) {
+    return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.defaultPrevented;
 }

package/dist/discover/index.d.ts

@@ -2,6 +2,8 @@ export { default as DiscoverTile } from './DiscoverTile.svelte';
 export { default as DiscoverRow } from './DiscoverRow.svelte';
 export { default as ItemArt } from './ItemArt.svelte';
 export { default as DetailMedia } from './DetailMedia.svelte';
+export { default as ItemDetail } from './ItemDetail.svelte';
+export { default as LiveFrame } from './LiveFrame.svelte';
 export { default as DiscoverHeader } from './DiscoverHeader.svelte';
 export { default as DiscoverSearch } from './DiscoverSearch.svelte';
 export { default as DiscoverChips } from './DiscoverChips.svelte';
@@ -11,8 +13,11 @@ export { default as DiscoverGrid } from './DiscoverGrid.svelte';
 export { default as DiscoverSkeleton } from './DiscoverSkeleton.svelte';
 export { default as DiscoverEmpty } from './DiscoverEmpty.svelte';
 export { default as DiscoverPublish } from './DiscoverPublish.svelte';
-export { itemHref } from './href.js';
+export { default as WhatsAppQrCard } from './WhatsAppQrCard.svelte';
+export { itemHref, isPlainClick, LEGACY_ITEM_PREFIXES } from './href.js';
 export { tintFor, initialFor, CARD_PALETTE } from './art.js';
-export { isStudioKind, primaryFor, mediaFor, usageLabel, remixLabel, usedLabel, type DiscoverPrimary } from './item.js';
+export { isStudioKind, httpUrl, primaryFor, mediaFor, rendererFor, usageLabel, showUsage, remixLabel, usedLabel, formatDiscoverDate, publishedDate, updatedDate, creatorInitials, type DiscoverPrimary, type DiscoverRenderer, } from './item.js';
+export { DISCOVER_TYPES, DISCOVER_AUDIENCES, discoverSections, groupSections, sectionFilter, relatedHeading, type DiscoverSectionKey, type DiscoverAudience, type DiscoverSectionCopy, type GroupableItem, } from './sections.js';
+export { LIVE_FRAME_TRUSTED_HOST_SUFFIX, frameSandbox, isTrustedFrameHost } from './frame.js';
 export { DISCOVER_VIEWS, type DiscoverView, type DiscoverOption } from './layout.js';
 export type { DiscoverItem, DiscoverKind, DiscoverMediaKind, StudioKind } from './types.js';

package/dist/discover/index.js

@@ -1,13 +1,18 @@
 // discover/index.ts — the `./discover` export subpath: a server-renderable
-// Discover page for a public catalogue. The cards (tile, row, art, detail
-// media), the page layout around them (header, search, chips, type bar,
-// sections, skeleton, empty state, publish band), the item type they render,
-// and the route helper for an item's own page. Pure components: props in,
-// markup out; every control works by callback or as a plain link.
+// Discover library for a public catalogue. The cards (tile, row, art), the
+// item view (ItemDetail with its live frame and media player), the page
+// layout around them (header, search, chips, type bar, sections, skeleton,
+// empty state, publish band), the hero's WhatsApp QR card (WhatsAppQrCard,
+// the one stateful widget: a form, rendering an example card on the server),
+// the shared catalogue copy and grouping, the item type they render, and the
+// route helper for an item's own page. Pure components: props in, markup out;
+// every control works by callback or as a plain link.
 export { default as DiscoverTile } from './DiscoverTile.svelte';
 export { default as DiscoverRow } from './DiscoverRow.svelte';
 export { default as ItemArt } from './ItemArt.svelte';
 export { default as DetailMedia } from './DetailMedia.svelte';
+export { default as ItemDetail } from './ItemDetail.svelte';
+export { default as LiveFrame } from './LiveFrame.svelte';
 export { default as DiscoverHeader } from './DiscoverHeader.svelte';
 export { default as DiscoverSearch } from './DiscoverSearch.svelte';
 export { default as DiscoverChips } from './DiscoverChips.svelte';
@@ -17,7 +22,10 @@ export { default as DiscoverGrid } from './DiscoverGrid.svelte';
 export { default as DiscoverSkeleton } from './DiscoverSkeleton.svelte';
 export { default as DiscoverEmpty } from './DiscoverEmpty.svelte';
 export { default as DiscoverPublish } from './DiscoverPublish.svelte';
-export { itemHref } from './href.js';
+export { default as WhatsAppQrCard } from './WhatsAppQrCard.svelte';
+export { itemHref, isPlainClick, LEGACY_ITEM_PREFIXES } from './href.js';
 export { tintFor, initialFor, CARD_PALETTE } from './art.js';
-export { isStudioKind, primaryFor, mediaFor, usageLabel, remixLabel, usedLabel } from './item.js';
+export { isStudioKind, httpUrl, primaryFor, mediaFor, rendererFor, usageLabel, showUsage, remixLabel, usedLabel, formatDiscoverDate, publishedDate, updatedDate, creatorInitials, } from './item.js';
+export { DISCOVER_TYPES, DISCOVER_AUDIENCES, discoverSections, groupSections, sectionFilter, relatedHeading, } from './sections.js';
+export { LIVE_FRAME_TRUSTED_HOST_SUFFIX, frameSandbox, isTrustedFrameHost } from './frame.js';
 export { DISCOVER_VIEWS } from './layout.js';