@master/internal-site 0.0.0-stage → 0.1.0

package/src/docs-shell/utils/slot-text.ts

@@ -0,0 +1,15 @@
+const entities: Record<string, string> = { '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#39;': "'", '&#x27;': "'" }
+
+interface Slots {
+  has(name: string): boolean
+  render(name: string): Promise<string>
+}
+
+/**
+ * The text an Astro component received as a slot, such as the source in
+ * `<Code lang="html">{`<div>`}</Code>`. Astro escapes text children; this restores them.
+ */
+export async function slotText(slots: Slots, name = 'default') {
+  if (!slots.has(name)) return undefined
+  return (await slots.render(name)).replace(/&(?:amp|lt|gt|quot|#39|#x27);/g, (entity) => entities[entity])
+}

package/src/docs-shell/utils/snackbar.ts

@@ -0,0 +1,39 @@
+let lastSnackbarClose: (() => void) | null
+
+export async function snackbar(text: string, { placement }: any = {}) {
+  if (lastSnackbarClose) {
+    lastSnackbarClose()
+    lastSnackbarClose = null
+  }
+  // A floating `ui-sheet`; placement is inline so a message never needs a utility class the page has not generated.
+  const element = document.createElement('div')
+  element.className = 'ui-sheet'
+  element.dataset.elevation = '3'
+  element.setAttribute('role', 'status')
+  Object.assign(element.style, {
+    position: 'fixed', left: '0', right: '0', [placement === 'top' ? 'top' : 'bottom']: '20px', zIndex: '1060',
+    width: 'fit-content', maxWidth: 'calc(100vw - 2rem)', margin: 'auto', padding: '.625rem 1rem', overflowWrap: 'anywhere',
+    color: 'var(--ui-text-strong)', fontSize: '.75rem', lineHeight: '1.5', cursor: 'pointer'
+  })
+  element.innerHTML = text
+  document.body.appendChild(element)
+  let closed = false
+  const close = lastSnackbarClose = async () => {
+    if (closed) return
+    closed = true
+    await element.animate([
+      { opacity: 1 },
+      { opacity: 0 }
+    ], { duration: 100 }).finished
+    element.remove()
+  }
+  element.onclick = close
+  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) await element.animate([
+    { transform: 'translateY(100%) scale(0)', opacity: 0 },
+    { transform: 'translateY(0%) scale(1)', opacity: 1 }
+  ], {
+    duration: 200,
+    easing: 'ease'
+  }).finished
+  setTimeout(close, 3000)
+}

package/src/docs-shell/utils/syntax-theme.ts

@@ -0,0 +1,53 @@
+import type { ThemeRegistration } from 'shiki/core'
+
+/** Presentation only: native grammars and the Master CSS adapter share these scopes. */
+const syntaxTheme = {
+  name: 'master-site',
+  type: 'dark',
+  colors: {
+    'editor.foreground': 'var(--ui-code-text)',
+    'editor.background': 'var(--ui-surface-code)'
+  },
+  tokenColors: [
+    { scope: ['variable', 'meta.embedded'], settings: { foreground: 'var(--ui-code-text)' } },
+    { scope: ['keyword', 'storage'], settings: { foreground: 'var(--ui-code-keyword)' } },
+    { scope: ['punctuation', 'meta.brace', 'keyword.operator'], settings: { foreground: 'var(--ui-code-punctuation)' } },
+    {
+      // Word operators read as keywords, not symbols.
+      scope: ['keyword.operator.new', 'keyword.operator.expression', 'keyword.operator.word', 'keyword.operator.logical.feature', 'keyword.operator.logical.and.media', 'keyword.operator.logical.not.media', 'keyword.operator.logical.only.media', 'keyword.operator.logical.to'],
+      settings: { foreground: 'var(--ui-code-keyword)' }
+    },
+    {
+      scope: ['entity.name', 'support.function', 'support.type', 'support.class', 'entity.other.inherited-class'],
+      settings: { foreground: 'var(--ui-code-function)' }
+    },
+    {
+      scope: ['entity.other.attribute-name', 'support.type.property-name', 'support.variable.property', 'variable.other.property', 'variable.object.property', 'variable.other.key', 'meta.object-literal.key', 'meta.mapping.key'],
+      settings: { foreground: 'var(--ui-code-property)' }
+    },
+    {
+      scope: ['string', 'punctuation.definition.string', 'support.constant.property-value', 'support.constant.font-name', 'support.constant.color', 'support.constant.media', 'constant.other.color'],
+      settings: { foreground: 'var(--ui-code-string)' }
+    },
+    {
+      scope: ['constant.numeric', 'constant.language', 'constant.character', 'keyword.other.unit', 'entity.other.keyframe-offset.percentage'],
+      settings: { foreground: 'var(--ui-code-number)' }
+    },
+    {
+      scope: ['entity.other.attribute-name.class', 'entity.other.attribute-name.id'],
+      settings: { foreground: 'var(--ui-code-function)' }
+    },
+    {
+      scope: ['entity.other.attribute-name.pseudo-class', 'entity.other.attribute-name.pseudo-element', 'entity.other.keyframe-offset', 'keyword.other.important', 'keyword.operator.important', 'punctuation.definition.keyword'],
+      settings: { foreground: 'var(--ui-code-keyword)' }
+    },
+    { scope: ['comment', 'punctuation.definition.comment', 'string.quoted.docstring.multi'], settings: { foreground: 'var(--ui-code-comment)' } },
+    { scope: ['markup.heading', 'markup.bold'], settings: { foreground: 'var(--ui-code-function)' } },
+    { scope: ['markup.inline', 'markup.raw', 'markup.underline.link'], settings: { foreground: 'var(--ui-code-string)' } },
+    { scope: 'markup.inserted', settings: { foreground: 'var(--ui-status-success)' } },
+    // Grammar `invalid` scopes flag valid docs code such as custom elements and `<hash>` placeholders; they keep their host role.
+    { scope: 'markup.deleted', settings: { foreground: 'var(--ui-status-danger)' } }
+  ]
+} satisfies ThemeRegistration
+
+export default syntaxTheme

package/src/docs-shell/utils/transformer-notation-word-mark.ts

@@ -0,0 +1,146 @@
+import type { Element, ElementContent, Text } from 'hast'
+import type { ShikiTransformer } from 'shiki/core'
+
+/** `@MARK` wraps words in a plain `<mark>`; `@WARN` and `@ERROR` add a diagnostic tone (`ui-code` styles both). */
+const controlTones = {
+  MARK: undefined,
+  WARN: 'warning',
+  ERROR: 'danger'
+} as const
+
+type ControlKind = keyof typeof controlTones
+type Tone = typeof controlTones[ControlKind]
+
+export default function transformerNotationWordMark(): ShikiTransformer {
+  return {
+    name: 'word-mark',
+    code(ast) {
+      let lines = ast.children.filter((i) => i.type === 'element')
+      let toRemove = new Set<ElementContent>()
+      let toHighlight = new Map<string, Tone>()
+
+      for (let line of lines) {
+        let highlights = parseHighlightDirectives(line)
+        if (highlights.length) {
+          toRemove.add(line)
+          for (let highlight of highlights) {
+            for (let mark of highlight.marks) {
+              toHighlight.set(mark, highlight.tone)
+            }
+          }
+          continue
+        }
+
+        if (toHighlight.size === 0) continue
+
+        for (let [mark, tone] of toHighlight) {
+          applyCrossChildMarkHighlight(line, mark, tone)
+        }
+      }
+
+      ast.children = ast.children.filter((i) => !toRemove.has(i))
+    },
+  }
+}
+
+function applyCrossChildMarkHighlight(line: Element, mark: string, tone: Tone) {
+  let textFragments: { el: Element; text: string; index: number; start: number; end: number }[] = []
+  let currentPos = 0
+  line.children.forEach((child, index) => {
+    if (child.type === 'element' && (child.tagName === 'div' || child.tagName === 'span')) {
+      const text = getTextContent(child)
+      textFragments.push({ el: child, text, index, start: currentPos, end: currentPos + text.length })
+      currentPos += text.length
+    }
+  })
+
+  const combinedText = textFragments.map((f) => f.text).join('')
+  const startIndex = combinedText.indexOf(mark)
+  if (startIndex === -1) return
+
+  const markEnd = startIndex + mark.length
+  const replacements = new Map<number, { before?: Element, marked: Element, after?: Element }>()
+  for (const fragment of textFragments) {
+    const overlapStart = Math.max(startIndex, fragment.start)
+    const overlapEnd = Math.min(markEnd, fragment.end)
+    if (overlapStart >= overlapEnd) continue
+    const start = overlapStart - fragment.start
+    const end = overlapEnd - fragment.start
+    replacements.set(fragment.index, {
+      before: start > 0 ? cloneElementWithText(fragment.el, fragment.text.slice(0, start)) : undefined,
+      marked: cloneElementWithText(fragment.el, fragment.text.slice(start, end)),
+      after: end < fragment.text.length ? cloneElementWithText(fragment.el, fragment.text.slice(end)) : undefined
+    })
+  }
+
+  if (replacements.size === 0) return
+
+  // The marked pieces of every token the words span share one <mark>, so it reads as one highlight.
+  const markElement: Element = { type: 'element', tagName: 'mark', properties: tone ? { dataTone: tone } : {}, children: [] }
+  const children: ElementContent[] = []
+  line.children.forEach((child, index) => {
+    const replacement = replacements.get(index)
+    if (!replacement) return void children.push(child)
+    if (replacement.before) children.push(replacement.before)
+    if (!markElement.children.length) children.push(markElement)
+    markElement.children.push(replacement.marked)
+    if (replacement.after) children.push(replacement.after)
+  })
+  line.children = children
+}
+
+function cloneElementWithText(el: Element, text: string): Element {
+  const properties = { ...el.properties }
+  if (Array.isArray(properties.class)) properties.class = [...properties.class]
+  return { ...el, properties, children: [{ type: 'text', value: text } as Text] }
+}
+
+const commentBash = /^\s*\#\s*(.*)$/
+const commentHTML = /^\s*<!--\s*(.*)\s*-->$/
+const commentLine = /^\s*\/\/\s*(.*)$/
+const commentBlock = /^\s*\/\*\s*(.*?)\s*\*\/$/
+const marksControlPattern = /@(?<kind>MARK|WARN|ERROR)\s+(?<marks>.+?)(?=\s*(?:-->|$))/g
+
+interface Highlight {
+  marks: string[];
+  tone: Tone;
+}
+
+function parseHighlightDirectives(el: Element): Highlight[] {
+  let comment = getControlComment(el)
+  if (!comment) return []
+
+  let highlights: Highlight[] = []
+  let match: RegExpExecArray | null
+  marksControlPattern.lastIndex = 0
+  while ((match = marksControlPattern.exec(comment))) {
+    const kind = match.groups?.kind as ControlKind | undefined
+    const rawMarks = match.groups?.marks
+    if (!kind || !rawMarks) continue
+    let marks = rawMarks.split(/\s+/).filter(Boolean)
+    if (marks.length === 0) continue
+
+    highlights.push({ marks, tone: controlTones[kind] })
+  }
+
+  return highlights
+}
+
+function getControlComment(el: Element): string | null {
+  let text = getTextContent(el)
+  if (text === '') return null
+  let match = text.match(commentHTML) || text.match(commentLine) || text.match(commentBlock)
+  if (match) return match[1]
+
+  return null
+}
+
+export function getTextContent(element: ElementContent): string {
+  if (element.type === 'text') {
+    return element.value
+  }
+  if (element.type === 'element' && (element.tagName === 'div' || element.tagName === 'span' || element.tagName === 'mark')) {
+    return element.children.map(getTextContent).join('')
+  }
+  return ''
+}

package/src/docs-shell/utils/unique-id.ts

@@ -0,0 +1,11 @@
+const counters = new WeakMap<Request, number>()
+
+/**
+ * A page-unique, deterministic id for an Astro component, like React's `useId`:
+ * `const id = uniqueId(Astro, 'code-tabs')`. Svelte components use `$props.id()`.
+ */
+export function uniqueId(astro: { request: Request }, prefix = 'id') {
+  const index = counters.get(astro.request) ?? 0
+  counters.set(astro.request, index + 1)
+  return `${prefix}-${index}`
+}

package/src/examples/article-transitions/page.astro

@@ -0,0 +1,7 @@
+---
+import '@master/internal-site/examples/scene.css'
+import '@master/internal-site/examples/article-transitions/transitions.css'
+import ArticleTransitionScene from '@master/internal-site/examples/components/ArticleTransitionScene.svelte'
+---
+
+<ArticleTransitionScene client:load />

package/src/examples/article-transitions/transitions.css

@@ -0,0 +1,10 @@
+@layer components {
+  .article-capture {
+    view-transition-class: article;
+  }
+
+  ::view-transition-group(.article) {
+    animation-duration: .5s;
+    animation-timing-function: ease-in-out;
+  }
+}

package/src/examples/components/ArticleTransitionScene.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import Image from '@master/internal-site/components/Image.svelte'
+  import IconArrowLeft from '@tabler/icons-svelte-runes/icons/arrow-left'
+  import IconArrowUpRight from '@tabler/icons-svelte-runes/icons/arrow-up-right'
+  import DemoLabel from '@master/internal-site/demo/DemoLabel.svelte'
+  import DemoSurface from '@master/internal-site/demo/DemoSurface.svelte'
+  import { useDemoViewTransition } from '@master/internal-site/demo/useDemoViewTransition.svelte.ts'
+  import articleAuroraImage from '@master/internal-site/examples/images/article-aurora.jpg'
+  import articleStudioImage from '@master/internal-site/examples/images/article-studio.jpg'
+
+  const articles = [
+    {
+      id: 'aurora',
+      title: 'Designing transitions that preserve context',
+      date: 'May 12, 2026',
+      description: 'A practical pattern for moving readers from a dense article feed into a focused story view.',
+      image: articleAuroraImage,
+      imageAlt: 'Green mountain ridge with a winding road',
+    },
+    {
+      id: 'studio',
+      title: 'Building quieter detail pages',
+      date: 'May 9, 2026',
+      description: 'How shared element motion helps a page change feel intentional without adding visual noise.',
+      image: articleStudioImage,
+      imageAlt: 'Snowy mountain valley with yellow tents',
+    },
+  ]
+
+  let selectedId = $state<string>()
+  const selected = $derived(articles.find(article => article.id === selectedId))
+  let heading = $state<HTMLHeadingElement>()
+  const buttons = new Map<string, HTMLButtonElement>()
+  const transition = useDemoViewTransition()
+
+  /** Keep each card's button so focus can return to it from the detail view. */
+  function cardButton(id: string) {
+    return (element: HTMLButtonElement) => {
+      buttons.set(id, element)
+      return () => { buttons.delete(id) }
+    }
+  }
+</script>
+
+<main class="container-inline p-md bg-surface-base fg-text-body">
+  <div class="flex flex-wrap items-baseline justify-between gap-xs mb-md">
+    <DemoLabel>Field notes / Collection 01</DemoLabel>
+    <span class="text-xs fg-text-muted" role="status">{selected ? 'Article detail' : '2 articles'} · {transition.mode}</span>
+  </div>
+  {#if selected}
+    <article data-article-detail class="overflow-hidden ui-sheet" data-elevation="1">
+      <Image alt={selected.imageAlt} src={selected.image} loading="eager" sizes="(max-width: 600px) 100vw, 600px"
+        style={`view-transition-name:article-${selected.id}-image`} class="block h-auto w-full (aspect-ratio:16/9) object-cover article-capture" />
+      <div class="p-lg">
+        <time datetime={selected.id === 'aurora' ? '2026-05-12' : '2026-05-09'} style={`view-transition-name:article-${selected.id}-date`} class="text-xs fg-text-muted article-capture">{selected.date}</time>
+        <h1 bind:this={heading} tabindex="-1" style={`view-transition-name:article-${selected.id}-title`} class="mb(0) mt-sm text-2xl font-regular outline-solid:focus-visible outline(2):focus-visible outline-text-link:focus-visible outline-offset-4xs:focus-visible article-capture">{selected.title}</h1>
+        <p class="mb(0) mt-md text-sm fg-text-muted">{selected.description} The image, title and date keep their names in both views. Each snapshot can move to its new bounds while surrounding content fades.</p>
+        <button type="button" class="mt-lg ui-button" onclick={() => { const id = selected.id; transition.run(() => { selectedId = undefined }, () => buttons.get(id) ?? null) }}>
+          <IconArrowLeft aria-hidden="true" />Back to collection
+        </button>
+      </div>
+    </article>
+  {:else}
+    <div class="grid-cols(1) grid gap-md grid-cols(2)@container(width>=28rem)">
+      {#each articles as article (article.id)}
+        <DemoSurface elevation="raised" class="flex overflow-hidden flex-col">
+          <Image alt={article.imageAlt} src={article.image} loading="eager" sizes="(max-width: 600px) 100vw, 600px"
+            style={`view-transition-name:article-${article.id}-image`} class="block h-auto w-full (aspect-ratio:16/10) object-cover article-capture" />
+          <article class="flex flex-col (flex:1) p-md">
+            <time datetime={article.id === 'aurora' ? '2026-05-12' : '2026-05-09'} style={`view-transition-name:article-${article.id}-date`} class="text-xs fg-text-muted article-capture">{article.date}</time>
+            <h2 style={`view-transition-name:article-${article.id}-title`} class="mb(0) mt-xs text-lg font-regular article-capture">{article.title}</h2>
+            <p class="mb-md mt-sm text-sm fg-text-muted">{article.description}</p>
+            <button {@attach cardButton(article.id)}
+              type="button" class="self-start mt-auto ui-button" aria-label={`Read ${article.title}`}
+              onclick={() => transition.run(() => { selectedId = article.id }, () => heading ?? null)}>
+              Read article<IconArrowUpRight aria-hidden="true" />
+            </button>
+          </article>
+        </DemoSurface>
+      {/each}
+    </div>
+  {/if}
+</main>

package/src/examples/components/ViewTransitionScene.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import DemoControls from '@master/internal-site/demo/DemoControls.svelte'
+  import DemoLabel from '@master/internal-site/demo/DemoLabel.svelte'
+  import DemoSurface from '@master/internal-site/demo/DemoSurface.svelte'
+  import { useDemoViewTransition } from '@master/internal-site/demo/useDemoViewTransition.svelte.ts'
+
+  const views = [
+    { id: 'overview', title: 'Overview', label: 'Workspace / 01', body: 'A shared workspace for the next release. Keep the plan, the work and the details together.' },
+    { id: 'product', title: 'Product detail', label: 'Workspace / 02', body: 'The same panel and heading move into the next visual state. Their snapshot names remain stable.' },
+    { id: 'settings', title: 'Settings', label: 'Workspace / 03', body: 'Update the view in place. The interface stays usable when animation is unavailable or motion is reduced.' },
+  ]
+
+  let activeId = $state('overview')
+  const active = $derived(views.find(view => view.id === activeId)!)
+  const transition = useDemoViewTransition()
+</script>
+
+<main class="wrap-anywhere p-md bg-surface-base fg-text-body">
+  <DemoControls label="Choose a view" variant="segmented">
+    {#each views as view (view.id)}
+      <button type="button" aria-pressed={activeId === view.id}
+        onclick={() => { if (view.id !== activeId) transition.run(() => { activeId = view.id }) }}>{view.title}</button>
+    {/each}
+  </DemoControls>
+  <DemoSurface elevation="raised" class="mt-md p-lg view-panel">
+    <DemoLabel>{active.label}</DemoLabel>
+    <h1 class="mb(0) mt-sm text-2xl font-semibold view-heading">{active.title}</h1>
+    <p class="mb(0) mt-md text-sm fg-text-muted">{active.body}</p>
+  </DemoSurface>
+  <p class="mb(0) mt-sm text-xs fg-text-muted" role="status">{active.title} · {transition.mode}</p>
+</main>

package/src/examples/layout-system/page.astro

@@ -0,0 +1,59 @@
+---
+// Bare examples import the system parts they render: sheets and specimens.
+import '@master/internal-site/styles/system/surfaces.css'
+import '@master/internal-site/styles/system/specimens.css'
+import DemoItem from '@master/internal-site/demo/DemoItem.svelte'
+import DemoLabel from '@master/internal-site/demo/DemoLabel.svelte'
+import DemoSurface from '@master/internal-site/demo/DemoSurface.svelte'
+
+const bars = [
+  ['Mon', 80, '(height:35%)'], ['Tue', 130, '(height:56%)'], ['Wed', 100, '(height:43%)'],
+  ['Thu', 160, '(height:69%)'], ['Fri', 120, '(height:52%)'], ['Sat', 190, '(height:82%)'],
+] as const
+const tasks = [['Audit onboarding', 'Today'], ['Review campaign', 'Thu'], ['Ship billing panel', 'Fri']]
+const metrics = [['Revenue', '$128.4k', '+12.8% from last month'], ['Activation', '64.2%', '+4.1 percentage points']]
+---
+
+<main class="(min-height:100dvh) p-md bg-surface-base fg-text-body">
+  <section data-workspace class="grid-cols(4) gap-sm w-full max-w-3xl mx-auto grid-cols(8)@2xs gap-md@2xs">
+    <header id="overview" class="flex flex-wrap grid-col-span(4) items-end justify-between gap-sm grid-col-span(8)@2xs">
+      <div><DemoLabel>Sample workspace / 024</DemoLabel><h1 class="mb(0) mx(0) mt-2xs text-xl font-regular fg-text-strong">Project overview</h1></div>
+      <DemoLabel>September 2026</DemoLabel>
+    </header>
+    <nav aria-label="Workspace sections" class="flex grid-col-span(4) gap-lg bb-solid bb(1) bb-line-divider grid-col-span(8)@2xs">
+      <a href="#metrics" class="py-xs text-sm (text-decoration:none) fg-text-muted fg-text-strong:hover">Metrics</a>
+      <a href="#demand" class="py-xs text-sm (text-decoration:none) fg-text-muted fg-text-strong:hover">Demand</a>
+      <a href="#launch-tasks" class="py-xs text-sm (text-decoration:none) fg-text-muted fg-text-strong:hover">Tasks</a>
+    </nav>
+    {metrics.map(([name, value, change], index) => <DemoSurface elevation="raised" id={index ? undefined : 'metrics'} class="grid-col-span(4) p-md grid-col-span(4)@2xs">
+      <DemoLabel>{name}</DemoLabel>
+      <div class="mt-xs text-2xl font-regular (font-variant-numeric:tabular-nums) fg-text-strong">{value}</div>
+      <div class="mt-2xs text-xs fg-text-muted">{change}</div>
+    </DemoSurface>)}
+    <DemoSurface elevation="raised" id="demand" class="flex flex-col grid-col-span(4) min-w(0) p-md grid-col-span(5)@2xs">
+      <figure class="flex flex-col grow(1) m(0)">
+        <figcaption class="text-sm font-regular fg-text-strong">Weekly demand</figcaption>
+        <p class="mb(0) mx(0) mt-3xs text-xs fg-text-muted">Sample requests per day</p>
+        <div class="grid-cols(6) grow(1) gap-xs min-h(160) mt-md">
+          {bars.map(([day, value, height]) => <div class="flex flex-col gap-2xs min-w(0) text-center">
+            <div class="flex flex-col grow(1) items-center justify-end gap-2xs bb-solid bb(1) bb-line-divider">
+              <span class="text-xs (font-variant-numeric:tabular-nums) fg-text-muted">{value}</span>
+              <DemoItem variant="solid" class={`${height} (width:56%) min-h(0) p(0) rtl-xs rtr-xs rbr(0) rbl(0)`} aria-hidden="true" />
+            </div>
+            <span class="text-xs fg-text-muted">{day}</span>
+          </div>)}
+        </div>
+      </figure>
+    </DemoSurface>
+    <DemoSurface elevation="raised" id="launch-tasks" class="grid-col-span(4) min-w(0) p-md grid-col-span(3)@2xs">
+      <h2 class="m(0) text-sm font-regular fg-text-strong">Launch tasks</h2>
+      <p class="mb(0) mx(0) mt-3xs text-xs fg-text-muted">Check off a task to try the controls.</p>
+      <div class="mt-sm">
+        {tasks.map(([task, date]) => <label class="flex items-start gap-xs py-sm bt-solid:not(:first-child) bt(1):not(:first-child) bt-line-divider:not(:first-child)">
+          <input type="checkbox" class="shrink(0) mt(4) accent-text-strong" />
+          <span class="(flex:1) min-w(0) text-sm font-regular">{task}<span class="block mt-3xs text-xs fg-text-muted">{date}</span></span>
+        </label>)}
+      </div>
+    </DemoSurface>
+  </section>
+</main>

package/src/examples/scene.css

@@ -0,0 +1,3 @@
+/* The view transition scenes render system sheets and controls; bare examples load them without the site shell. */
+@import '@master/internal-site/styles/system/surfaces.css';
+@import '@master/internal-site/styles/system/controls.css';

package/src/examples/view-transitions/page.astro

@@ -0,0 +1,7 @@
+---
+import '@master/internal-site/examples/scene.css'
+import '@master/internal-site/examples/view-transitions/transitions.css'
+import ViewTransitionScene from '@master/internal-site/examples/components/ViewTransitionScene.svelte'
+---
+
+<ViewTransitionScene client:load />

package/src/examples/view-transitions/transitions.css

@@ -0,0 +1,9 @@
+@layer components {
+  .view-panel { view-transition-name: demo-panel; }
+  .view-heading { view-transition-name: demo-heading; }
+
+  ::view-transition-group(demo-panel),
+  ::view-transition-group(demo-heading) {
+    animation-duration: var(--duration-slow);
+  }
+}