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

package/dist/discover/DiscoverTile.svelte

@@ -0,0 +1,110 @@
+<!-- discover/DiscoverTile.svelte — one Discover item in a grid or shelf: the
+     picture as a borderless rounded tile, then title, one line, the creator
+     line (avatar and "by <name>", only when the listing has a creator) and a
+     quiet meta line (usage, left out at zero, and the published date), with
+     the actions beside them.
+
+     The tile sizes off its own width (container `tile`), since the same tile
+     sits in a two-column phone grid, a shelf and a related row. Under 15rem it
+     goes compact: the title clamps to two lines, the line and the meta line
+     hide, and the actions drop under the text as a small primary button and
+     the ⋯ menu (the Remix icon hides there; Remix is in ⋯). The type scale (text-headline,
+     text-footnote, text-caption-1), the 10px picture radius and the hover lift
+     match paw-enterprise's TemplateTile, the app's own tile. The usage line is
+     left out at zero. With `href`, the art and the title are links; the art
+     link is decorative (the title carries the name). `target` and `rel` pass
+     through to both, for consumers whose item pages are off-site. With
+     `onopen` too, a plain click on either opens the item in place (an
+     overlay) and a modified click still follows the link. Renders fully on
+     the server. -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import GitFork from '@lucide/svelte/icons/git-fork';
+  import Chip from '../widgets/display/Chip.svelte';
+  import { cn } from '../utils.js';
+  import ItemActions from './ItemActions.svelte';
+  import ItemArt from './ItemArt.svelte';
+  import { initialFor, tintFor } from './art.js';
+  import { isPlainClick } from './href.js';
+  import { publishedDate, showUsage, usageLabel } from './item.js';
+  import CreatorLine from './CreatorLine.svelte';
+  import type { DiscoverItem } from './types.js';
+
+  let {
+    item,
+    href,
+    target,
+    rel,
+    remixHref,
+    onremix,
+    onreport,
+    onopen,
+    oncopylink,
+    busy = false,
+    class: className,
+  }: {
+    item: DiscoverItem;
+    /** The item's own page. When set, the art and title link to it. */
+    href?: string;
+    /** Passed to both links. Off-site consumers pass target="_blank" rel="noopener". */
+    target?: string;
+    rel?: string;
+    /** Claim / Use this recipe and Remix as links (the website, to the app). Wins over `onremix`. */
+    remixHref?: string;
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    /** Opens the item in place. With `href`, a plain click on the art or title calls
+     *  it instead of following the link; modified clicks and JS-off still navigate.
+     *  For studio items it also drives the Play / View button. */
+    onopen?: (item: DiscoverItem) => void;
+    /** Copy link in the ⋯ menu, shown with `href`. Gets the item and that href. */
+    oncopylink?: (item: DiscoverItem, href: string) => void;
+    busy?: boolean;
+    class?: string;
+  } = $props();
+
+  const published = $derived(publishedDate(item));
+
+  function openInPlace(e: MouseEvent) {
+    if (!onopen || !isPlainClick(e)) return;
+    e.preventDefault();
+    onopen(item);
+  }
+</script>
+
+<article class={cn('group/tile @container/tile flex min-w-0 flex-col gap-3 @max-[15rem]/tile:gap-2', className)} data-testid={`discover-item-${item.id}`}>
+  <div
+    class="relative overflow-hidden rounded-2xl transition-transform duration-150 ease-out group-focus-within/tile:-translate-y-px group-hover/tile:-translate-y-px motion-reduce:transition-none motion-reduce:group-focus-within/tile:translate-y-0 motion-reduce:group-hover/tile:translate-y-0"
+  >
+    {#snippet art()}
+      <ItemArt imageUrl={item.imageUrl} title={item.title} mediaKind={item.mediaKind} tint={tintFor(item.id)} initial={initialFor(item.title)} />
+    {/snippet}
+    {#if href}
+      <a href={safeUrl(href)} {target} {rel} onclick={openInPlace} tabindex="-1" aria-hidden="true" class="block">{@render art()}</a>
+    {:else}
+      {@render art()}
+    {/if}
+    {#if item.featured}
+      <Chip size="sm" variant="warning" label="Staff pick" class="absolute top-2 left-2" />
+    {/if}
+  </div>
+  <div class="flex items-start gap-3 @max-[15rem]/tile:flex-col @max-[15rem]/tile:items-stretch @max-[15rem]/tile:gap-2">
+    <div class="flex min-w-0 flex-1 flex-col">
+      <h3 class="m-0 truncate text-headline text-foreground @max-[15rem]/tile:line-clamp-2 @max-[15rem]/tile:whitespace-normal">
+        {#if href}<a href={safeUrl(href)} {target} {rel} onclick={openInPlace} class="hover:underline">{item.title}</a>{:else}{item.title}{/if}
+      </h3>
+      {#if item.desc}
+        <p class="m-0 truncate text-footnote text-muted-foreground @max-[15rem]/tile:hidden">{item.desc}</p>
+      {/if}
+      <CreatorLine creator={item.creator} class="mt-1" />
+      {#if showUsage(item) || published}
+        <p class="m-0 mt-1 flex flex-wrap items-center gap-x-1.5 text-caption-1 text-muted-foreground tabular-nums @max-[15rem]/tile:hidden" data-testid="discover-meta">
+          {#if showUsage(item)}<span class="inline-flex items-center gap-1.5 whitespace-nowrap"><GitFork class="size-3" aria-hidden="true" />{usageLabel(item)}</span>{/if}
+          {#if showUsage(item) && published}<span aria-hidden="true">·</span>{/if}
+          {#if published}<span class="whitespace-nowrap">{published}</span>{/if}
+        </p>
+      {/if}
+    </div>
+    <ItemActions {item} pageHref={href} {remixHref} {onremix} {onreport} {onopen} {oncopylink} {busy} class="@max-[15rem]/tile:justify-between" />
+  </div>
+</article>

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

@@ -0,0 +1,24 @@
+import type { DiscoverItem } from './types.js';
+type $$ComponentProps = {
+    item: DiscoverItem;
+    /** The item's own page. When set, the art and title link to it. */
+    href?: string;
+    /** Passed to both links. Off-site consumers pass target="_blank" rel="noopener". */
+    target?: string;
+    rel?: string;
+    /** Claim / Use this recipe and Remix as links (the website, to the app). Wins over `onremix`. */
+    remixHref?: string;
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    /** Opens the item in place. With `href`, a plain click on the art or title calls
+     *  it instead of following the link; modified clicks and JS-off still navigate.
+     *  For studio items it also drives the Play / View button. */
+    onopen?: (item: DiscoverItem) => void;
+    /** Copy link in the ⋯ menu, shown with `href`. Gets the item and that href. */
+    oncopylink?: (item: DiscoverItem, href: string) => void;
+    busy?: boolean;
+    class?: string;
+};
+declare const DiscoverTile: import("svelte").Component<$$ComponentProps, {}, "">;
+type DiscoverTile = ReturnType<typeof DiscoverTile>;
+export default DiscoverTile;

package/dist/discover/ItemActions.svelte

@@ -0,0 +1,88 @@
+<!-- discover/ItemActions.svelte — the action cluster a tile and a row share: the
+     primary pill (a link when the item has a live page, a button otherwise),
+     Play / View for studio media, a Remix icon for tools and games, then a ⋯
+     overflow holding Remix (tools and games, with `remixHref` or `onremix`),
+     Copy link (with a `pageHref` and `oncopylink`) and Report. With
+     `remixHref` (the website, sending people to the app), Claim / Use this
+     recipe, the Remix icon and the Remix menu item are links to it; it wins
+     over `onremix`. In a compact tile (under 15rem, the tile's container
+     query) the Remix icon hides, the ⋯ copy covers it, and the primary pill
+     narrows.
+     Site cards get no Remix icon: their primary, Claim, already copies. Each
+     control renders only when its callback is passed, so a static page gets
+     just the links. The live link points at user-submitted content, so it
+     carries rel="nofollow ugc noopener noreferrer": no rank, no window handle,
+     no catalogue url in the Referer. Item-page links (the href prop on the
+     tile and row) carry whatever rel the consumer passes. -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import GitFork from '@lucide/svelte/icons/git-fork';
+  import Maximize2 from '@lucide/svelte/icons/maximize-2';
+  import Play from '@lucide/svelte/icons/play';
+  import { Button } from '../components/ui/button/index.js';
+  import { cn } from '../utils.js';
+  import ItemMenu from './ItemMenu.svelte';
+  import { isStudioKind, mediaFor, primaryFor } from './item.js';
+  import type { DiscoverItem } from './types.js';
+
+  let {
+    item,
+    pageHref,
+    remixHref,
+    onremix,
+    onreport,
+    onopen,
+    oncopylink,
+    busy = false,
+    class: className,
+  }: {
+    item: DiscoverItem;
+    /** The item's own page; Copy link shows only with this and `oncopylink`. */
+    pageHref?: string;
+    /** Remix as a link (Claim / Use this recipe, the Remix icon and menu item). Wins over `onremix`. */
+    remixHref?: string;
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    onopen?: (item: DiscoverItem) => void;
+    oncopylink?: (item: DiscoverItem, href: string) => void;
+    busy?: boolean;
+    class?: string;
+  } = $props();
+
+  const primary = $derived(primaryFor(item));
+  const media = $derived(mediaFor(item));
+  const remixIcon = $derived(!isStudioKind(item.kind) && item.kind !== 'site');
+  const hasRemixLink = $derived(Boolean(remixHref && safeUrl(remixHref)));
+</script>
+
+<div class={cn('flex shrink-0 items-center gap-0.5', className)}>
+  {#if primary?.href}
+    <Button size="sm" class="rounded-full px-4 @max-[15rem]/tile:px-3" href={safeUrl(primary.href)} target="_blank" rel="nofollow ugc noopener noreferrer" aria-label={`${primary.label} ${item.title} (opens in a new tab)`}>{primary.label}</Button>
+  {:else if primary && hasRemixLink}
+    <Button size="sm" class="rounded-full px-4 @max-[15rem]/tile:px-3" href={safeUrl(remixHref)}>{primary.label}</Button>
+  {:else if primary && onremix}
+    <Button size="sm" class="rounded-full px-4 @max-[15rem]/tile:px-3" disabled={busy} onclick={() => onremix(item)}>{primary.label}</Button>
+  {/if}
+  {#if media && onopen}
+    {@const playable = media.kind !== 'image'}
+    <Button size="icon-sm" variant="ghost" aria-label={`${playable ? 'Play' : 'View'} ${item.title}`} title={playable ? 'Play' : 'View'} onclick={() => onopen(item)}>
+      {#if playable}<Play class="size-4" />{:else}<Maximize2 class="size-4" />{/if}
+    </Button>
+  {/if}
+  {#if remixIcon && hasRemixLink}
+    <Button size="icon-sm" variant="ghost" class="@max-[15rem]/tile:hidden" aria-label={`Remix ${item.title}`} title="Remix" href={safeUrl(remixHref)}>
+      <GitFork class="size-4" />
+    </Button>
+  {:else if remixIcon && onremix}
+    <Button size="icon-sm" variant="ghost" class="@max-[15rem]/tile:hidden" aria-label={`Remix ${item.title}`} title="Remix" disabled={busy} onclick={() => onremix(item)}>
+      <GitFork class="size-4" />
+    </Button>
+  {/if}
+  <ItemMenu
+    title={item.title}
+    remixHref={remixIcon && hasRemixLink ? remixHref : undefined}
+    onremix={remixIcon && !hasRemixLink && onremix && !busy ? () => onremix(item) : undefined}
+    oncopy={pageHref && oncopylink ? () => oncopylink(item, pageHref) : undefined}
+    onreport={onreport ? () => onreport(item) : undefined}
+  />
+</div>

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

@@ -0,0 +1,17 @@
+import type { DiscoverItem } from './types.js';
+type $$ComponentProps = {
+    item: DiscoverItem;
+    /** The item's own page; Copy link shows only with this and `oncopylink`. */
+    pageHref?: string;
+    /** Remix as a link (Claim / Use this recipe, the Remix icon and menu item). Wins over `onremix`. */
+    remixHref?: string;
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    onopen?: (item: DiscoverItem) => void;
+    oncopylink?: (item: DiscoverItem, href: string) => void;
+    busy?: boolean;
+    class?: string;
+};
+declare const ItemActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemActions = ReturnType<typeof ItemActions>;
+export default ItemActions;

package/dist/discover/ItemArt.svelte

@@ -0,0 +1,83 @@
+<!-- discover/ItemArt.svelte — the 16:9 picture for one Discover item: the image
+     when there is one, a tinted placeholder with the title's initial when there
+     is not, a music cover for a song with no picture, and a play badge on every
+     video, poster or not. Props in, markup out: the <img> is in the server HTML.
+     Only an http(s) imageUrl reaches src; a picture that fails to load drops
+     to the placeholder after hydration, and the server frame is unchanged.
+     The labels are derived here from the title, so the placeholder never
+     claims a poster that is not there. -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import Music from '@lucide/svelte/icons/music';
+  import Play from '@lucide/svelte/icons/play';
+  import { cn } from '../utils.js';
+  import { httpUrl } from './item.js';
+  import type { DiscoverMediaKind } from './types.js';
+
+  let {
+    imageUrl,
+    title,
+    mediaKind = null,
+    tint,
+    initial,
+    class: className,
+  }: {
+    imageUrl: string | null;
+    /** The item's title; the alt text and placeholder label are built from it. */
+    title: string;
+    mediaKind?: DiscoverMediaKind | null;
+    /** The placeholder's colour, from tintFor(). A CSS colour or var(). */
+    tint: string;
+    /** The placeholder's glyph, from initialFor(). */
+    initial: string;
+    class?: string;
+  } = $props();
+
+  const src = $derived(httpUrl(imageUrl));
+  // Keyed on the url, so a new picture gets its own try without an effect.
+  let failedSrc = $state<string | null>(null);
+  const showImage = $derived(src !== null && failedSrc !== src);
+  const imgAlt = $derived(mediaKind === 'video' ? `Video poster for ${title}` : mediaKind === 'audio' ? `Song cover for ${title}` : `Preview of ${title}`);
+
+  const frameClass = 'aspect-video w-full overflow-hidden rounded-[10px] border border-border bg-muted';
+  // Two washes mixed off the tint, anchored top-left so it reads as artwork.
+  const blankWash =
+    'background-image: radial-gradient(118% 118% at 18% 0%, color-mix(in srgb, var(--art-tint) 30%, transparent), transparent 62%), linear-gradient(158deg, color-mix(in srgb, var(--art-tint) 14%, transparent), transparent 70%)';
+</script>
+
+{#snippet badge()}
+  {#if mediaKind === 'video'}
+    <span
+      class="absolute right-2 bottom-2 grid size-7 place-items-center rounded-full bg-background/80 text-foreground"
+      aria-hidden="true"
+      data-testid="discover-video-badge"
+    >
+      <Play class="size-3.5" />
+    </span>
+  {/if}
+{/snippet}
+
+{#if mediaKind === 'audio' && !showImage}
+  <div
+    class={cn(frameClass, 'grid place-items-center bg-linear-to-br from-primary/25 via-muted to-muted', className)}
+    role="img"
+    aria-label={`Song cover for ${title}`}
+    data-testid="discover-music-cover"
+  >
+    <Music class="size-8 text-primary" aria-hidden="true" />
+  </div>
+{:else if showImage}
+  <div class={cn(frameClass, 'relative', className)}>
+    <img class="block h-full w-full object-cover object-top" src={safeUrl(src, { kind: 'resource' })} alt={imgAlt} loading="lazy" decoding="async" onerror={() => (failedSrc = src)} />
+    {@render badge()}
+  </div>
+{:else}
+  <div class={cn(frameClass, 'relative grid place-items-center', className)} style={`--art-tint: ${tint}; ${blankWash}`} role="img" aria-label={`Preview of ${title}`}>
+    <span
+      class="text-4xl leading-none font-semibold tracking-tight opacity-90 select-none"
+      style="color: color-mix(in srgb, var(--art-tint) 55%, var(--foreground))"
+      aria-hidden="true">{initial}</span
+    >
+    {@render badge()}
+  </div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { DiscoverMediaKind } from './types.js';
+type $$ComponentProps = {
+    imageUrl: string | null;
+    /** The item's title; the alt text and placeholder label are built from it. */
+    title: string;
+    mediaKind?: DiscoverMediaKind | null;
+    /** The placeholder's colour, from tintFor(). A CSS colour or var(). */
+    tint: string;
+    /** The placeholder's glyph, from initialFor(). */
+    initial: string;
+    class?: string;
+};
+declare const ItemArt: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemArt = ReturnType<typeof ItemArt>;
+export default ItemArt;

package/dist/discover/ItemDetail.svelte

@@ -0,0 +1,280 @@
+<!-- discover/ItemDetail.svelte — one Discover item in full: the renderer picked
+     by rendererFor (the studio player, the live page in a LiveFrame, or the
+     picture), the title and line, the creator row (avatar, name, "Published
+     <date>" and "· Updated <date>" when it changed more than a day later;
+     dates are fixed-locale UTC so hydration never rewrites them), the usage
+     line (left out at zero), the `madeWith` line, what it was remixed from,
+     its tags (links with `tagHref`, plain chips otherwise) and the actions.
+
+     Two layouts. layout="page" is the item's own route: one bordered card
+     (container `item-page`) with the preview large on the left (a site, game
+     or tool autoloads in a tall LiveFrame) and a sticky info panel on the
+     right (title, actions, then the metadata) from 56rem of container;
+     narrower, the panel stacks under the preview. h1. layout="overlay" is the
+     body of a consumer's Dialog or Sheet: one column, no side padding, h2, a
+     top inset that keeps the media clear of the close button, click-to-load
+     frames, actions last. It never draws the Dialog or Sheet itself.
+     `compact` is the narrow overlay: a framed item shows its picture instead
+     of loading the frame; media still plays. `pageHref` (overlay only) adds
+     "See full page", a link to the item's page; `onpage` takes a plain click
+     on it so a consumer can close its overlay and navigate (modified clicks
+     follow the link).
+
+     Actions: the primary (Use / Play link to the live page; Claim / Use this
+     recipe as `remixHref` link or `onremix` button), a "Remix in Paw OS" for
+     tools and games only (a studio or site primary already is the remix), and
+     a ⋯ menu with Copy link (`href` or `oncopylink`) and Report (`onreport`).
+     Without `oncopylink`, Copy link writes `href` resolved against the page to
+     the clipboard. Renders fully on the server. -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import GitFork from '@lucide/svelte/icons/git-fork';
+  import Maximize2 from '@lucide/svelte/icons/maximize-2';
+  import Chip from '../widgets/display/Chip.svelte';
+  import { Button } from '../components/ui/button/index.js';
+  import { cn } from '../utils.js';
+  import CreatorAvatar from './CreatorAvatar.svelte';
+  import DetailMedia from './DetailMedia.svelte';
+  import ItemArt from './ItemArt.svelte';
+  import ItemMenu from './ItemMenu.svelte';
+  import LiveFrame from './LiveFrame.svelte';
+  import { initialFor, tintFor } from './art.js';
+  import { isPlainClick, itemHref } from './href.js';
+  import { httpUrl, isStudioKind, primaryFor, publishedDate, rendererFor, showUsage, updatedDate, usageLabel } from './item.js';
+  import type { DiscoverItem } from './types.js';
+
+  let {
+    item,
+    layout,
+    compact = false,
+    href,
+    remixHref,
+    onremix,
+    onreport,
+    oncopylink,
+    busy = false,
+    headingLevel,
+    madeWith,
+    tagHref,
+    pageHref,
+    onpage,
+    class: className,
+  }: {
+    item: DiscoverItem;
+    /** 'page': the item's own route, two columns. 'overlay': inside a consumer's Dialog or Sheet. */
+    layout: 'page' | 'overlay';
+    /** Narrow overlay: framed items show the picture, not the live frame. */
+    compact?: boolean;
+    /** The item's own page (Copy link; the compact Open when there is no `pageHref`). */
+    href?: string;
+    /** Remix as a link (the website, to the app). Wins over `onremix`. */
+    remixHref?: string;
+    /** Remix as a callback (the app). */
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    /** Replaces the built-in clipboard copy of `href`. */
+    oncopylink?: (item: DiscoverItem) => void;
+    busy?: boolean;
+    /** Defaults to h1 for a page, h2 for an overlay. */
+    headingLevel?: 'h1' | 'h2';
+    /** A line naming the tool it was made with, e.g. "Made with Paw Sites". */
+    madeWith?: string;
+    /** Makes each tag a link to this address (a filtered Discover page). */
+    tagHref?: (tag: string) => string;
+    /** Overlay only: draws "See full page", a link to the item's own page. */
+    pageHref?: string;
+    /** Takes a plain click on "See full page" (the link's default is prevented). */
+    onpage?: (item: DiscoverItem) => void;
+    class?: string;
+  } = $props();
+
+  const renderer = $derived(rendererFor(item));
+  const primary = $derived(primaryFor(item));
+  const isPage = $derived(layout === 'page');
+  const heading = $derived(headingLevel ?? (isPage ? 'h1' : 'h2'));
+  const tint = $derived(tintFor(item.id));
+  const initial = $derived(initialFor(item.title));
+  const liveUrl = $derived(httpUrl(item.liveUrl));
+  // A studio or site primary is already the remix; a second button would repeat it.
+  const remixButton = $derived(!isStudioKind(item.kind) && item.kind !== 'site' && Boolean(remixHref || onremix));
+  const canCopy = $derived(Boolean(href || oncopylink));
+  const creator = $derived(item.creator?.name ? item.creator : null);
+  const published = $derived(publishedDate(item));
+  const updated = $derived(updatedDate(item));
+  const pageLink = $derived(!isPage && pageHref ? pageHref : undefined);
+  // The compact sheet's Open predates pageHref; with pageHref, See full page leads instead.
+  const compactOpen = $derived(compact && renderer === 'frame' && Boolean(href) && !pageLink);
+  const leadsWithPage = $derived(compact && Boolean(pageLink));
+  const primaryVariant = $derived(compactOpen || leadsWithPage ? 'outline' : 'default');
+  // The page panel has room for callout-size metadata; the overlay keeps it small.
+  const metaText = $derived(isPage ? 'text-callout' : 'text-footnote');
+  let copied = $state(false);
+
+  async function copyLink() {
+    if (oncopylink) return oncopylink(item);
+    if (!href) return;
+    try {
+      await navigator.clipboard.writeText(new URL(href, location.href).href);
+      copied = true;
+      setTimeout(() => (copied = false), 2000);
+    } catch {
+      // No clipboard (insecure context, denied): nothing to undo.
+    }
+  }
+
+  function openPage(e: MouseEvent) {
+    if (!onpage || !isPlainClick(e)) return;
+    e.preventDefault();
+    onpage(item);
+  }
+</script>
+
+{#snippet preview()}
+  {#if renderer === 'media'}
+    <DetailMedia {item} />
+  {:else if renderer === 'frame' && liveUrl && !compact}
+    <LiveFrame
+      url={liveUrl}
+      title={item.title}
+      kind={item.kind}
+      poster={safeUrl(item.imageUrl ?? undefined, { kind: 'resource' })}
+      {tint}
+      {initial}
+      autoload={isPage}
+      tall={isPage}
+    />
+  {:else}
+    <ItemArt imageUrl={item.imageUrl} title={item.title} mediaKind={item.mediaKind} {tint} {initial} />
+  {/if}
+{/snippet}
+
+{#snippet titleBlock()}
+  <div class="flex flex-col gap-1.5">
+    <svelte:element this={heading} class={cn('m-0 text-foreground', isPage ? 'text-title-1' : 'text-title-2')}>{item.title}</svelte:element>
+    {#if item.desc}<p class="m-0 text-body text-muted-foreground">{item.desc}</p>{/if}
+  </div>
+{/snippet}
+
+{#snippet meta()}
+  {#if creator || published}
+    <div class="flex min-w-0 items-center gap-3" data-testid="discover-detail-creator">
+      {#if creator}<CreatorAvatar name={creator.name} avatarUrl={creator.avatarUrl} size="lg" />{/if}
+      <div class="flex min-w-0 flex-col">
+        {#if creator}<span class="truncate text-callout font-medium text-foreground">By {creator.name}</span>{/if}
+        {#if published}
+          <span class={cn(metaText, 'text-muted-foreground tabular-nums')} data-testid="discover-detail-dates"
+            >Published {published}{#if updated}{' '}· Updated {updated}{/if}</span
+          >
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  {#if showUsage(item) || item.remixedFrom || madeWith}
+    <div class={cn('flex flex-col', isPage ? 'gap-1.5' : 'gap-1')}>
+      {#if showUsage(item)}
+        <p class={cn('m-0 flex items-center gap-1.5 text-muted-foreground tabular-nums', isPage ? 'text-callout' : 'text-caption-1')}>
+          <GitFork class={isPage ? 'size-3.5' : 'size-3'} aria-hidden="true" />{usageLabel(item)}
+        </p>
+      {/if}
+      {#if item.remixedFrom}
+        <p class={cn('m-0 text-muted-foreground', metaText)} data-testid="discover-detail-remixed-from">
+          Remixed from <a class="text-foreground hover:underline" href={safeUrl(itemHref(item.kind, item.remixedFrom.slug))}>{item.remixedFrom.title}</a>
+        </p>
+      {/if}
+      {#if madeWith}<p class={cn('m-0 text-muted-foreground', metaText)} data-testid="discover-detail-made-with">{madeWith}</p>{/if}
+    </div>
+  {/if}
+
+  {#if item.tags?.length}
+    <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0" aria-label="Tags">
+      {#each item.tags as tag (tag)}
+        <li>
+          {#if tagHref}
+            <a class="rounded-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none underline-offset-2 hover:underline" href={safeUrl(tagHref(tag))}><Chip size="sm" label={tag} /></a>
+          {:else}
+            <Chip size="sm" label={tag} />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+{/snippet}
+
+{#snippet pageButton(variant: 'default' | 'outline')}
+  <Button {variant} class="rounded-full px-5" href={safeUrl(pageLink)} onclick={openPage} data-testid="discover-detail-page-link"
+    ><Maximize2 aria-hidden="true" />See full page</Button
+  >
+{/snippet}
+
+{#snippet actions()}
+  <div class="flex flex-wrap items-center gap-2" data-testid="discover-detail-actions">
+    {#if compactOpen && href}
+      <Button class="rounded-full px-5" href={safeUrl(href)}>Open</Button>
+    {/if}
+    {#if leadsWithPage}{@render pageButton('default')}{/if}
+    {#if primary?.href}
+      <Button
+        variant={primaryVariant}
+        class="rounded-full px-5"
+        href={safeUrl(primary.href)}
+        target="_blank"
+        rel="nofollow ugc noopener noreferrer"
+        aria-label={`${primary.label} ${item.title} (opens in a new tab)`}>{primary.label}</Button
+      >
+    {:else if primary && remixHref}
+      <Button variant={primaryVariant} class="rounded-full px-5" href={safeUrl(remixHref)}>{primary.label}</Button>
+    {:else if primary && onremix}
+      <Button variant={primaryVariant} class="rounded-full px-5" disabled={busy} onclick={() => onremix(item)}>{primary.label}</Button>
+    {/if}
+    {#if remixButton}
+      {#if remixHref}
+        <Button variant="outline" class="rounded-full px-5" href={safeUrl(remixHref)}><GitFork aria-hidden="true" />Remix in Paw OS</Button>
+      {:else if onremix}
+        <Button variant="outline" class="rounded-full px-5" disabled={busy} onclick={() => onremix(item)}><GitFork aria-hidden="true" />Remix in Paw OS</Button>
+      {/if}
+    {/if}
+    {#if pageLink && !leadsWithPage}{@render pageButton('outline')}{/if}
+    <ItemMenu title={item.title} oncopy={canCopy ? copyLink : undefined} onreport={onreport ? () => onreport(item) : undefined} />
+    <span class="text-caption-1 text-muted-foreground" aria-live="polite">{copied ? 'Link copied' : ''}</span>
+  </div>
+{/snippet}
+
+{#if isPage}
+  <article
+    class={cn('@container/item-page mx-auto w-full max-w-7xl min-w-0', className)}
+    data-testid={`discover-detail-${item.id}`}
+    data-renderer={renderer}
+    data-layout="page"
+  >
+    <div
+      class="grid grid-cols-1 items-start rounded-2xl border border-border bg-card @4xl/item-page:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)]"
+      data-testid="discover-page-card"
+    >
+      <div
+        class="min-w-0 rounded-t-2xl border-b border-border bg-muted/40 p-3 @lg/item-page:p-4 @4xl/item-page:rounded-tr-none @4xl/item-page:rounded-bl-2xl @4xl/item-page:border-r @4xl/item-page:border-b-0"
+        data-testid="discover-page-preview"
+      >
+        {@render preview()}
+      </div>
+      <aside
+        class="flex min-w-0 flex-col gap-5 p-5 @lg/item-page:p-6 @4xl/item-page:sticky @4xl/item-page:top-4"
+        aria-label="About this item"
+        data-testid="discover-page-info"
+      >
+        {@render titleBlock()}
+        {@render actions()}
+        <div class="flex flex-col gap-4 border-t border-border pt-5">{@render meta()}</div>
+      </aside>
+    </div>
+  </article>
+{:else}
+  <article class={cn('flex min-w-0 flex-col gap-4 pt-8', className)} data-testid={`discover-detail-${item.id}`} data-renderer={renderer} data-layout="overlay">
+    {@render preview()}
+    <div class="flex flex-col gap-4">
+      {@render titleBlock()}
+      {@render meta()}
+      {@render actions()}
+    </div>
+  </article>
+{/if}

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

@@ -0,0 +1,32 @@
+import type { DiscoverItem } from './types.js';
+type $$ComponentProps = {
+    item: DiscoverItem;
+    /** 'page': the item's own route, two columns. 'overlay': inside a consumer's Dialog or Sheet. */
+    layout: 'page' | 'overlay';
+    /** Narrow overlay: framed items show the picture, not the live frame. */
+    compact?: boolean;
+    /** The item's own page (Copy link; the compact Open when there is no `pageHref`). */
+    href?: string;
+    /** Remix as a link (the website, to the app). Wins over `onremix`. */
+    remixHref?: string;
+    /** Remix as a callback (the app). */
+    onremix?: (item: DiscoverItem) => void;
+    onreport?: (item: DiscoverItem) => void;
+    /** Replaces the built-in clipboard copy of `href`. */
+    oncopylink?: (item: DiscoverItem) => void;
+    busy?: boolean;
+    /** Defaults to h1 for a page, h2 for an overlay. */
+    headingLevel?: 'h1' | 'h2';
+    /** A line naming the tool it was made with, e.g. "Made with Paw Sites". */
+    madeWith?: string;
+    /** Makes each tag a link to this address (a filtered Discover page). */
+    tagHref?: (tag: string) => string;
+    /** Overlay only: draws "See full page", a link to the item's own page. */
+    pageHref?: string;
+    /** Takes a plain click on "See full page" (the link's default is prevented). */
+    onpage?: (item: DiscoverItem) => void;
+    class?: string;
+};
+declare const ItemDetail: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemDetail = ReturnType<typeof ItemDetail>;
+export default ItemDetail;