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

package/dist/discover/CreatorAvatar.svelte

@@ -0,0 +1,37 @@
+<!-- discover/CreatorAvatar.svelte — a creator's round avatar for the Discover
+     cards and the detail view: ripple's Avatar with the picture (only an
+     http(s) avatarUrl, through safeUrl) and the name's initials as the
+     fallback, which is what the server markup and a broken picture show.
+     Decorative: the name always sits beside it in text. Internal to the card
+     set (not exported). -->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import * as Avatar from '../components/ui/avatar/index.js';
+  import { cn } from '../utils.js';
+  import { creatorInitials, httpUrl } from './item.js';
+
+  let {
+    name,
+    avatarUrl,
+    size = 'sm',
+    class: className,
+  }: {
+    name: string;
+    avatarUrl?: string | null;
+    /** sm: 20px on cards; lg: 32px on the detail view. */
+    size?: 'sm' | 'lg';
+    class?: string;
+  } = $props();
+
+  const src = $derived(httpUrl(avatarUrl));
+</script>
+
+<Avatar.Root
+  size={size === 'lg' ? 'default' : 'sm'}
+  class={cn(size === 'sm' ? 'size-5 data-[size=sm]:size-5' : 'size-8', className)}
+  aria-hidden="true"
+  data-testid="discover-creator-avatar"
+>
+  {#if src}<Avatar.Image src={safeUrl(src, { kind: 'resource' })} alt="" />{/if}
+  <Avatar.Fallback class={cn('bg-secondary font-semibold text-secondary-foreground', size === 'sm' ? 'text-[9px]' : 'text-xs')}>{creatorInitials(name)}</Avatar.Fallback>
+</Avatar.Root>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    name: string;
+    avatarUrl?: string | null;
+    /** sm: 20px on cards; lg: 32px on the detail view. */
+    size?: 'sm' | 'lg';
+    class?: string;
+};
+declare const CreatorAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type CreatorAvatar = ReturnType<typeof CreatorAvatar>;
+export default CreatorAvatar;

package/dist/discover/CreatorLine.svelte

@@ -0,0 +1,18 @@
+<!-- discover/CreatorLine.svelte — "by <name>" with the creator's small avatar,
+     under a card's title (tile and row). Draws nothing without a creator name,
+     so a listing whose maker did not opt in leaves no gap or placeholder.
+     Internal to the card set (not exported). -->
+<script lang="ts">
+  import CreatorAvatar from './CreatorAvatar.svelte';
+  import type { DiscoverItem } from './types.js';
+
+  let { creator, class: className }: { creator: DiscoverItem['creator']; class?: string } = $props();
+</script>
+
+{#if creator?.name}
+  <!-- Not cn(): tailwind-merge reads text-footnote and text-muted-foreground as one group. -->
+  <p class={`m-0 flex min-w-0 items-center gap-1.5 text-footnote text-muted-foreground ${className ?? ''}`} data-testid="discover-creator">
+    <CreatorAvatar name={creator.name} avatarUrl={creator.avatarUrl} />
+    <span class="truncate">by {creator.name}</span>
+  </p>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { DiscoverItem } from './types.js';
+type $$ComponentProps = {
+    creator: DiscoverItem['creator'];
+    class?: string;
+};
+declare const CreatorLine: import("svelte").Component<$$ComponentProps, {}, "">;
+type CreatorLine = ReturnType<typeof CreatorLine>;
+export default CreatorLine;

package/dist/discover/DiscoverChips.svelte

@@ -4,7 +4,12 @@
      a server-rendered page; to make it toggle off, point the selected chip's href
      at the address without that filter. A chip without `href` is a button
      (aria-pressed) that calls `onchange` with its value; the consumer decides
-     what a second press means. -->
+     what a second press means.
+
+     The chips sit in ONE row that scrolls sideways (snap, no visible bar) with
+     a fade on the trailing edge; the end padding keeps the last chip clear of
+     the fade once scrolled to. Every chip is a real link or button, so Tab
+     reaches each one and the browser scrolls it into view. -->
 <script lang="ts">
   import { safeUrl } from '@ripple-ui/core';
   import { Button } from '../components/ui/button/index.js';
@@ -26,7 +31,15 @@
   } = $props();
 </script>
 
-<div class={cn('flex flex-wrap gap-2', className)} role="group" aria-label={label}>
+<div
+  class={cn(
+    '-m-1 flex snap-x scroll-px-1 flex-nowrap gap-2 overflow-x-auto p-1 pr-8 [mask-image:linear-gradient(to_right,black_calc(100%-2rem),transparent)] [scrollbar-width:none] *:shrink-0 *:snap-start [&::-webkit-scrollbar]:hidden',
+    className,
+  )}
+  role="group"
+  aria-label={label}
+  data-testid="discover-chips"
+>
   {#each options as o (o.value)}
     {@const on = value === o.value}
     {#if o.href}

package/dist/discover/DiscoverFilters.svelte

@@ -8,7 +8,13 @@
      icons up by name in the whole Lucide barrel (~800 KB a consumer cannot tree
      shake); the view icons here are imported one by one. The view toggle shows
      only with `onview` or `viewHref`. The bar paints bg-background; the app adds
-     its glass class through `class`. -->
+     its glass class through `class`.
+
+     The kind tabs scroll sideways in their own track (snap, trailing fade, no
+     visible bar); the selected segment paints its own surface, so any widths
+     line up and the server markup is final. The view toggle never shrinks and
+     goes icon-only (labels kept for screen readers) when the bar is under
+     36rem, so it stays on screen on a phone. -->
 <script lang="ts">
   import { safeUrl } from '@ripple-ui/core';
   import type { Component } from 'svelte';
@@ -48,59 +54,68 @@
     DISCOVER_VIEWS.map((v) => ({ value: v, label: VIEW_META[v].label, href: viewHref?.(v), Icon: VIEW_META[v].Icon })),
   );
 
+  /** On mount, slide the kind track so a selected tab past its edge is in view
+   *  (a link-mode page opened at ?kind=music). Horizontal only: the page never jumps. */
+  function revealSelected(track: HTMLElement) {
+    const on = track.querySelector<HTMLElement>('[aria-current="true"], [aria-checked="true"]');
+    if (!on) return;
+    const end = on.offsetLeft + on.offsetWidth;
+    if (end > track.scrollLeft + track.clientWidth - 24) track.scrollLeft = end - track.clientWidth + 24;
+  }
+
   function pickView(v: string) {
     const next = DISCOVER_VIEWS.find((x) => x === v);
     if (next) onview?.(next);
   }
 </script>
 
-<!-- Segmented's size="sm" track, thumb and segment classes. With `onpick` the
-     segments are radios (Segmented's own semantics); without it they are links. -->
-{#snippet pills(options: readonly (DiscoverOption & { Icon?: Component })[], selected: string, onpick?: (value: string) => void)}
-  {@const index = options.findIndex((o) => o.value === selected)}
-  <div class="flex flex-col gap-1.5">
-    <div
-      role={onpick ? 'radiogroup' : undefined}
-      class="relative inline-grid h-7 w-fit max-w-full overflow-x-auto rounded-full bg-ripple-border/60 p-0.5 text-[12px] select-none [scrollbar-width:none]"
-      style="grid-template-columns: repeat({Math.max(1, options.length)}, 1fr);"
-    >
-      {#if index >= 0}
-        <span
-          aria-hidden="true"
-          class="pointer-events-none absolute inset-y-0.5 left-0.5 rounded-full bg-ripple-surface ring-1 ring-ripple-border transition-transform duration-200 ease-ripple-out motion-reduce:transition-none"
-          style="width: calc((100% - 4px) / {Math.max(1, options.length)}); transform: translateX({index * 100}%);"
-        ></span>
+<!-- Segmented's size="sm" track and segment classes. With `onpick` the
+     segments are radios (Segmented's own semantics); without it they are links.
+     The selected segment paints its own surface (no sliding thumb), so the
+     server markup is already right and segments of any width line up. -->
+{#snippet pills(options: readonly (DiscoverOption & { Icon?: Component })[], selected: string, onpick?: (value: string) => void, iconOnly = false)}
+  <div
+    role={onpick ? 'radiogroup' : undefined}
+    class="inline-flex h-7 w-max items-stretch rounded-full bg-ripple-border/60 p-0.5 text-[12px] select-none"
+  >
+    {#each options as o (o.value)}
+      {@const on = o.value === selected}
+      {@const segment = cn(
+        'inline-flex shrink-0 snap-start items-center justify-center gap-1.5 rounded-full px-2.5 font-medium whitespace-nowrap transition-colors duration-150 ease-ripple-out focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none motion-reduce:transition-none',
+        on ? 'bg-ripple-surface text-ripple-surface-foreground ring-1 ring-ripple-border' : 'text-ripple-muted-foreground hover:text-ripple-surface-foreground',
+        iconOnly && o.Icon && 'px-2 @xl/discover-filters:px-2.5',
+      )}
+      {#snippet body()}
+        {#if o.Icon}<o.Icon size={14} aria-hidden="true" />{/if}
+        <span class={cn(iconOnly && o.Icon && 'sr-only @xl/discover-filters:not-sr-only')}>{o.label}</span>
+      {/snippet}
+      {#if onpick}
+        <button type="button" role="radio" aria-checked={on} class={segment} title={iconOnly ? o.label : undefined} onclick={() => onpick(o.value)}>
+          {@render body()}
+        </button>
+      {:else}
+        <a href={safeUrl(o.href)} aria-current={on ? 'true' : undefined} class={segment} title={iconOnly ? o.label : undefined}>
+          {@render body()}
+        </a>
       {/if}
-      {#each options as o (o.value)}
-        {@const on = o.value === selected}
-        {@const segment = cn(
-          'relative z-10 inline-flex items-center justify-center gap-1.5 rounded-full px-2.5 font-medium whitespace-nowrap transition-colors duration-150 ease-ripple-out',
-          on ? 'text-ripple-surface-foreground' : 'text-ripple-muted-foreground hover:text-ripple-surface-foreground',
-        )}
-        {#if onpick}
-          <button type="button" role="radio" aria-checked={on} class={segment} onclick={() => onpick(o.value)}>
-            {#if o.Icon}<o.Icon size={14} />{/if}
-            {o.label}
-          </button>
-        {:else}
-          <a href={safeUrl(o.href)} aria-current={on ? 'true' : undefined} class={segment}>
-            {#if o.Icon}<o.Icon size={14} />{/if}
-            {o.label}
-          </a>
-        {/if}
-      {/each}
-    </div>
+    {/each}
   </div>
 {/snippet}
 
-<div class={cn('sticky top-0 z-10 mt-6 border-b border-border bg-background', className)}>
-  <div class="mx-auto flex w-full max-w-[1280px] items-center gap-3 overflow-x-auto px-6 py-2.5">
-    <div role="group" aria-label="Filter by type">
+<div class={cn('@container/discover-filters sticky top-0 z-10 mt-6 border-b border-border bg-background', className)} data-testid="discover-filters">
+  <div class="mx-auto flex w-full max-w-[1280px] items-center gap-2 px-6 py-2.5 @xl/discover-filters:gap-3">
+    <div
+      class="relative -my-1 min-w-0 flex-1 snap-x scroll-px-1 overflow-x-auto py-1 pr-6 [mask-image:linear-gradient(to_right,black_calc(100%-1.5rem),transparent)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      role="group"
+      aria-label="Filter by type"
+      data-testid="discover-kinds"
+      use:revealSelected
+    >
       {@render pills(kinds, kind, kindLinks ? undefined : (v) => onkind?.(v))}
     </div>
     {#if viewHref || onview}
-      <div class="ml-auto shrink-0" role="group" aria-label="View">
-        {@render pills(viewOptions, view, viewHref ? undefined : pickView)}
+      <div class="shrink-0" role="group" aria-label="View">
+        {@render pills(viewOptions, view, viewHref ? undefined : pickView, true)}
       </div>
     {/if}
   </div>

package/dist/discover/DiscoverHeader.svelte

@@ -1,8 +1,17 @@
 <!-- discover/DiscoverHeader.svelte — the top of the Discover page: the pitch
      (a title whose `accent` half is painted in the primary colour, then a lead
      paragraph), the search and audience chips as children, and an optional
-     `aside` beside it on wide screens (the app's QR card). The heading is an h2
-     under an app page header; a page without one passes as="h1". -->
+     `aside` beside it on wide containers (the app's QR card). The heading is
+     an h2 under an app page header; a page without one passes as="h1".
+
+     It sizes off its own box (container `discover-header`), not the viewport,
+     because the app shell and the public page give it different widths. Narrow
+     (under 36rem): a title-2 heading, the lead hidden (it stays in the markup;
+     `narrowLead="full"` keeps it, for a landing hero whose lead is the pitch),
+     tighter gaps, and the aside stacked under the pitch; the QR card collapses
+     itself to a teaser row there. From 56rem the aside sits beside the pitch.
+     `class` lands on the inner grid (so `lg:items-start` and the like still
+     work); the container is a plain full-width wrapper around it. -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
@@ -12,6 +21,7 @@
     accent,
     lead,
     as = 'h2',
+    narrowLead = 'hide',
     class: className,
     children,
     aside,
@@ -19,8 +29,11 @@
     title: string;
     /** Drawn after the title in the primary colour. */
     accent?: string;
+    /** Shown on containers 36rem and wider; below that, see `narrowLead`. */
     lead?: string;
     as?: 'h1' | 'h2';
+    /** The lead under 36rem: 'hide' (default; Discover's search and chips come first) or 'full'. */
+    narrowLead?: 'hide' | 'full';
     class?: string;
     /** Search, chips: stacked under the lead. */
     children?: Snippet;
@@ -28,13 +41,23 @@
   } = $props();
 </script>
 
-<div class={cn('mx-auto grid w-full max-w-[1280px] items-center gap-9 px-6 pt-4 lg:grid-cols-[1.1fr_0.9fr]', className)}>
-  <div class="flex flex-col gap-4">
-    <svelte:element this={as} class="text-title-1 font-semibold tracking-tight text-foreground">
-      {title}{#if accent}{' '}<span class="text-primary">{accent}</span>{/if}
-    </svelte:element>
-    {#if lead}<p class="max-w-prose text-body text-muted-foreground">{lead}</p>{/if}
-    {@render children?.()}
+<div class="@container/discover-header w-full" data-testid="discover-header">
+  <div
+    class={cn(
+      'mx-auto grid w-full max-w-[1280px] items-center gap-4 px-6 pt-2 @xl/discover-header:gap-9 @xl/discover-header:pt-4 @4xl/discover-header:grid-cols-[1.1fr_0.9fr]',
+      className,
+    )}
+  >
+    <div class="flex min-w-0 flex-col gap-3 @xl/discover-header:gap-4">
+      <svelte:element this={as} class="text-title-2 font-semibold tracking-tight text-balance text-foreground @xl/discover-header:text-title-1">
+        {title}{#if accent}{' '}<span class="text-primary">{accent}</span>{/if}
+      </svelte:element>
+      {#if lead}
+        <!-- Not cn(): tailwind-merge reads text-body and text-muted-foreground as one group. -->
+        <p class={`max-w-prose text-body text-muted-foreground${narrowLead === 'hide' ? ' hidden @xl/discover-header:block' : ''}`}>{lead}</p>
+      {/if}
+      {@render children?.()}
+    </div>
+    {@render aside?.()}
   </div>
-  {@render aside?.()}
 </div>

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

@@ -3,8 +3,11 @@ type $$ComponentProps = {
     title: string;
     /** Drawn after the title in the primary colour. */
     accent?: string;
+    /** Shown on containers 36rem and wider; below that, see `narrowLead`. */
     lead?: string;
     as?: 'h1' | 'h2';
+    /** The lead under 36rem: 'hide' (default; Discover's search and chips come first) or 'full'. */
+    narrowLead?: 'hide' | 'full';
     class?: string;
     /** Search, chips: stacked under the lead. */
     children?: Snippet;

package/dist/discover/DiscoverRow.svelte

@@ -1,10 +1,13 @@
 <!-- discover/DiscoverRow.svelte — one Discover item in a list: a small copy of
-     the same picture, title and one line, the usage count, then the actions.
+     the same picture, title, one line and the creator line (only with a
+     creator), the usage count and published date, then the actions.
      Built for scanning many items at once. With `href`, the art and the title are
      links; the art link is decorative. `target` and `rel` pass through to
-     both, for consumers whose item pages are off-site. Renders fully on the
-     server. Type scale as in the app's own list rows: text-body title,
-     text-footnote line, text-caption-1 usage. -->
+     both, for consumers whose item pages are off-site; with `onopen` too, a
+     plain click opens the item in place. The meta column (usage, left out at
+     zero, over the published date) stays, empty if need be, so rows align. Renders fully on the server. Type scale as in the
+     app's own list rows: text-body title, text-footnote line, text-caption-1
+     usage. -->
 <script lang="ts">
   import { safeUrl } from '@ripple-ui/core';
   import GitFork from '@lucide/svelte/icons/git-fork';
@@ -13,7 +16,9 @@
   import ItemActions from './ItemActions.svelte';
   import ItemArt from './ItemArt.svelte';
   import { initialFor, tintFor } from './art.js';
-  import { usageLabel } from './item.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 {
@@ -21,9 +26,11 @@
     href,
     target,
     rel,
+    remixHref,
     onremix,
     onreport,
     onopen,
+    oncopylink,
     busy = false,
     class: className,
   }: {
@@ -33,12 +40,27 @@
     /** 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>
 
 <div class={cn('flex items-center gap-4 px-3 py-2.5', className)} role="listitem" data-testid={`discover-item-${item.id}`}>
@@ -47,7 +69,7 @@
       <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} tabindex="-1" class="block">{@render art()}</a>
+      <a href={safeUrl(href)} {target} {rel} onclick={openInPlace} tabindex="-1" class="block">{@render art()}</a>
     {:else}
       {@render art()}
     {/if}
@@ -55,16 +77,20 @@
   <div class="flex min-w-0 flex-1 flex-col">
     <span class="flex min-w-0 items-center gap-2">
       {#if href}
-        <a href={safeUrl(href)} {target} {rel} class="truncate text-body font-semibold text-foreground hover:underline">{item.title}</a>
+        <a href={safeUrl(href)} {target} {rel} onclick={openInPlace} class="truncate text-body font-semibold text-foreground hover:underline">{item.title}</a>
       {:else}
         <span class="truncate text-body font-semibold text-foreground">{item.title}</span>
       {/if}
       {#if item.featured}<Chip size="sm" variant="warning" label="Staff pick" />{/if}
     </span>
     <span class="truncate text-footnote text-muted-foreground">{item.desc}</span>
+    <CreatorLine creator={item.creator} class="mt-0.5" />
   </div>
-  <div class="hidden w-40 shrink-0 text-caption-1 text-muted-foreground md:flex">
-    <span class="inline-flex items-center gap-1 tabular-nums"><GitFork class="size-3" aria-hidden="true" />{usageLabel(item)}</span>
+  <div class="hidden w-40 shrink-0 flex-col gap-0.5 text-caption-1 text-muted-foreground md:flex" data-testid="discover-meta">
+    {#if showUsage(item)}
+      <span class="inline-flex items-center gap-1 tabular-nums"><GitFork class="size-3" aria-hidden="true" />{usageLabel(item)}</span>
+    {/if}
+    {#if published}<span class="tabular-nums">{published}</span>{/if}
   </div>
-  <ItemActions {item} {onremix} {onreport} {onopen} {busy} />
+  <ItemActions {item} pageHref={href} {remixHref} {onremix} {onreport} {onopen} {oncopylink} {busy} />
 </div>

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

@@ -6,9 +6,16 @@ type $$ComponentProps = {
     /** 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;
 };

package/dist/discover/DiscoverSection.svelte

@@ -2,7 +2,12 @@
      heading and its blurb, an optional "see all" link, then the items in a
      DiscoverGrid for the given view. Children are the tiles (or rows, for the
      list view). The "see all" control is a link with `moreHref` and a button
-     with `onmore`; with neither it is not drawn. Ids follow the app:
+     with `onmore`; with neither it is not drawn. It sits on the title's row,
+     right-aligned, and wraps under the title (still right-aligned) only when
+     the row is too narrow; the blurb runs under both. It paints text-primary,
+     the host's own accent, which reads on the app's and the public site's
+     surfaces alike (the link button's ripple accent token is the light set's
+     dark blue on a host that only defines its own tokens). Ids follow the app:
      discover-h-{id} on the heading, discover-section-{id} as the test id. -->
 <script lang="ts">
   import { safeUrl } from '@ripple-ui/core';
@@ -35,19 +40,22 @@
     class?: string;
     children: Snippet;
   } = $props();
+
+  // No side padding (the label lines up with the grid's edge), the host accent.
+  const moreClass = 'ml-auto h-auto px-0 text-primary';
 </script>
 
 <section class={cn('flex flex-col gap-4', className)} aria-labelledby={`discover-h-${id}`} data-testid={`discover-section-${id}`}>
-  <div class="flex flex-wrap items-end justify-between gap-2">
-    <div>
-      <h2 id={`discover-h-${id}`} class="text-title-3 font-semibold text-foreground">{title}</h2>
-      {#if blurb}<p class="text-subheadline text-muted-foreground">{blurb}</p>{/if}
+  <div class="flex flex-col gap-0.5">
+    <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+      <h2 id={`discover-h-${id}`} class="min-w-0 text-title-3 font-semibold text-foreground">{title}</h2>
+      {#if more && moreHref}
+        <Button variant="link" size="sm" class={moreClass} href={safeUrl(moreHref)} data-testid={`discover-more-${id}`}>{more} →</Button>
+      {:else if more && onmore}
+        <Button variant="link" size="sm" class={moreClass} onclick={onmore} data-testid={`discover-more-${id}`}>{more} →</Button>
+      {/if}
     </div>
-    {#if more && moreHref}
-      <Button variant="link" size="sm" href={safeUrl(moreHref)}>{more} →</Button>
-    {:else if more && onmore}
-      <Button variant="link" size="sm" onclick={onmore}>{more} →</Button>
-    {/if}
+    {#if blurb}<p class="m-0 text-subheadline text-muted-foreground">{blurb}</p>{/if}
   </div>
   <DiscoverGrid {view} label={title}>{@render children()}</DiscoverGrid>
 </section>

package/dist/discover/DiscoverSkeleton.svelte

@@ -1,7 +1,8 @@
 <!-- discover/DiscoverSkeleton.svelte — the Discover loading state in the exact
      geometry of what replaces it: skeleton rows in the bordered list for the list
      view, tile skeletons (16:9 picture, title bar, line bar) in the grid
-     otherwise. One role="status" wrapper carries the label; the shapes are
+     otherwise; under 15rem a tile skeleton takes the compact tile's shape
+     (title bar, then a small action pill instead of the line). One role="status" wrapper carries the label; the shapes are
      decorative. Classes are paw-enterprise's Skeleton and TemplateTileSkeleton. -->
 <script lang="ts">
   import { cn } from '../utils.js';
@@ -39,10 +40,11 @@
   {:else}
     <div class={GRID_CLASS}>
       {#each slots as i (i)}
-        <div class="flex flex-col gap-3" aria-hidden="true">
+        <div class="@container/tile flex flex-col gap-3 @max-[15rem]/tile:gap-2" aria-hidden="true">
           <div data-slot="skeleton" class={cn(bone, 'aspect-video w-full rounded-2xl')}></div>
           <div data-slot="skeleton" class={cn(bone, 'h-4 w-2/3 rounded-md')}></div>
-          <div data-slot="skeleton" class={cn(bone, 'h-3 w-full rounded-md')}></div>
+          <div data-slot="skeleton" class={cn(bone, 'h-3 w-full rounded-md @max-[15rem]/tile:hidden')}></div>
+          <div data-slot="skeleton" class={cn(bone, 'hidden h-7 w-16 rounded-full @max-[15rem]/tile:block')}></div>
         </div>
       {/each}
     </div>

package/dist/discover/DiscoverTile.svelte

@@ -1,11 +1,22 @@
 <!-- discover/DiscoverTile.svelte — one Discover item in a grid or shelf: the
-     picture as a borderless rounded tile, then title, one line and the usage
-     line, with the actions beside them. The type scale (text-headline,
+     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. 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. Renders fully on the server. -->
+     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';
@@ -14,7 +25,9 @@
   import ItemActions from './ItemActions.svelte';
   import ItemArt from './ItemArt.svelte';
   import { initialFor, tintFor } from './art.js';
-  import { usageLabel } from './item.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 {
@@ -22,9 +35,11 @@
     href,
     target,
     rel,
+    remixHref,
     onremix,
     onreport,
     onopen,
+    oncopylink,
     busy = false,
     class: className,
   }: {
@@ -34,15 +49,30 @@
     /** 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 flex min-w-0 flex-col gap-3', className)} data-testid={`discover-item-${item.id}`}>
+<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"
   >
@@ -50,7 +80,7 @@
       <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} tabindex="-1" aria-hidden="true" class="block">{@render art()}</a>
+      <a href={safeUrl(href)} {target} {rel} onclick={openInPlace} tabindex="-1" aria-hidden="true" class="block">{@render art()}</a>
     {:else}
       {@render art()}
     {/if}
@@ -58,18 +88,23 @@
       <Chip size="sm" variant="warning" label="Staff pick" class="absolute top-2 left-2" />
     {/if}
   </div>
-  <div class="flex items-start gap-3">
+  <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">
-        {#if href}<a href={safeUrl(href)} {target} {rel} class="hover:underline">{item.title}</a>{:else}{item.title}{/if}
+      <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">{item.desc}</p>
+        <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}
-      <p class="m-0 mt-1 flex items-center gap-1.5 text-caption-1 text-muted-foreground tabular-nums">
-        <GitFork class="size-3" aria-hidden="true" />{usageLabel(item)}
-      </p>
     </div>
-    <ItemActions {item} {onremix} {onreport} {onopen} {busy} />
+    <ItemActions {item} pageHref={href} {remixHref} {onremix} {onreport} {onopen} {oncopylink} {busy} class="@max-[15rem]/tile:justify-between" />
   </div>
 </article>