fimo 2.2.0-staging.9 → 2.2.0

package/templates/welcome/template/src/pages/SiteContent.tsx

@@ -0,0 +1,674 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { Bot, Check, Copy, Database, GitBranch, MousePointerClick, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+
+import type { ArticleResult } from '@/schemas/Article';
+import type { HomePage } from '@/schemas/HomePage';
+
+import { FALLBACK_PAGE } from './fallback-content';
+
+/**
+ * Every article read in this site resolves its two references, so the cards
+ * and the detail page can name the author and the category. `populate` is
+ * depth-one: without it both fields come back as bare `{ id }`.
+ */
+export const ARTICLE_POPULATE = ['author', 'category'] as const;
+export type TutorialArticle = ArticleResult<undefined, typeof ARTICLE_POPULATE>;
+
+interface TutorialPageProps {
+  page: HomePage;
+  articles: TutorialArticle[];
+}
+
+const COMPLETED_ACTIONS_KEY = 'fimo-welcome-completed-actions-v2';
+const DISMISSED_KEY = 'fimo-welcome-dismissed';
+const ARTICLE_COVER_CLASS = 'aspect-[48/25] w-full border-b border-zinc-200 bg-white';
+const OUTLINE_BUTTON_CLASS =
+  'mt-4 w-full cursor-pointer rounded-md border border-orange-600/40 py-2 text-[13px] font-semibold text-orange-700 transition-colors hover:border-orange-600 hover:bg-orange-50';
+
+export function TutorialPage({ page, articles }: TutorialPageProps) {
+  useStudioScrollRelay();
+
+  const [completedActions, setCompletedActions] = useState<string[]>(readCompletedActions);
+  const allDone = page.steps.length > 0 && page.steps.every((step) => completedActions.includes(String(step.action)));
+  const [dismissed, dismiss] = useOnboardingDismissed();
+  const showNudge = allDone && !dismissed;
+
+  return (
+    <main className="min-h-screen bg-white px-4 py-10 text-zinc-950 sm:px-6">
+      <img src="/fimo-logo-black.svg" alt="Fimo" className="mx-auto mb-8 h-7 w-auto" />
+      <article className="relative mx-auto max-w-6xl border-x border-t border-zinc-200">
+        <Hero page={page} />
+        <Tutorial page={page} completedActions={completedActions} setCompletedActions={setCompletedActions} />
+        <DeveloperCallout />
+        <Articles articles={articles} showNudge={showNudge} onDismiss={dismiss} />
+        <div className="relative h-14 border-b border-zinc-200">
+          <GridDot edgeX="left" edgeY="top" />
+          <GridDot x="33.333%" edgeY="top" />
+          <GridDot x="66.666%" edgeY="top" />
+          <GridDot edgeX="right" edgeY="top" />
+          <GridDot edgeX="left" edgeY="bottom" />
+          <GridDot x="50%" edgeY="bottom" />
+          <GridDot edgeX="right" edgeY="bottom" />
+        </div>
+        <WhatComesNext page={page} showNudge={showNudge} onDismiss={dismiss} />
+        <div className="relative">
+          <GridDot edgeX="left" edgeY="top" />
+          <GridDot x="50%" edgeY="top" />
+          <GridDot edgeX="right" edgeY="top" />
+        </div>
+        <footer className="relative border-b border-zinc-200 px-8 py-6 text-center">
+          <Text value={page.footerNote} className="text-[12px] leading-5 text-zinc-500" />
+        </footer>
+      </article>
+    </main>
+  );
+}
+
+// The one tinted band in the grid: a quiet orange wash that reads as an
+// aside for developers without breaking the page's white sobriety.
+function DeveloperCallout() {
+  return (
+    <div className="flex items-center gap-3 border-b border-zinc-200 bg-orange-50/80 px-6 py-7">
+      <span className="fimo-mono text-[12px] text-orange-600">{'</>'}</span>
+      <span className="text-[14px] font-bold text-zinc-950">
+        You are a developer?{' '}
+        <a
+          href="https://fimo.ai/docs"
+          target="_blank"
+          rel="noreferrer"
+          className="cursor-pointer font-medium text-orange-600 underline underline-offset-4 transition-colors hover:text-orange-700"
+        >
+          Use our CLI & start from the terminal here.
+        </a>
+      </span>
+    </div>
+  );
+}
+
+// Fimo grid intersection marker, light theme. The edge clip mirrors the
+// website's GridDot: it stops the halo from spilling outside the column.
+function GridDot({ x, edgeX, edgeY }: { x?: string; edgeX?: 'left' | 'right'; edgeY: 'top' | 'bottom' }) {
+  const style: React.CSSProperties = {};
+  if (x) {
+    style.left = x;
+    style.marginLeft = -2;
+  }
+  if (edgeX === 'left') {
+    style.left = 0;
+    style.marginLeft = -2;
+    style.clipPath = 'inset(-6px -6px -6px 0)';
+  }
+  if (edgeX === 'right') {
+    style.right = 0;
+    style.marginRight = -1;
+    style.clipPath = 'inset(-6px 0 -6px -6px)';
+  }
+  if (edgeY === 'top') {
+    style.top = -2;
+  } else {
+    style.bottom = -2;
+  }
+
+  return (
+    <span
+      aria-hidden
+      className="absolute z-10 size-[3px] rounded-full bg-zinc-200 shadow-[0_0_0_5px_#ffffff]"
+      style={style}
+    />
+  );
+}
+
+/**
+ * Closing a hint closes that hint, here and now. Whether it also ends the
+ * tour is the Studio's call — it counts closes across both surfaces and asks
+ * before stopping — so the close is reported upwards and the page adopts
+ * whatever comes back, which is also how the decision reaches the other
+ * preview origins (each has its own storage).
+ */
+function useOnboardingDismissed(): [boolean, () => void] {
+  const [dismissed, setDismissed] = useState(() => window.sessionStorage.getItem(DISMISSED_KEY) === '1');
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'fimo:welcome:steps-sync' || event.data.dismissed !== true) {
+        return;
+      }
+      window.sessionStorage.setItem(DISMISSED_KEY, '1');
+      setDismissed(true);
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  const dismiss = useCallback(() => {
+    // Local, so the bubble goes away on the click that asked for it; the
+    // Studio decides whether the tour itself is over.
+    setDismissed(true);
+    window.parent.postMessage({ type: 'fimo:welcome:dismiss' }, '*');
+  }, []);
+
+  return [dismissed, dismiss];
+}
+
+// The finished tour hands over to the rest of the page with the same orange
+// voice the Studio bubbles use.
+function SectionNudge({ text, onDismiss }: { text: string; onDismiss: () => void }) {
+  return (
+    <span className="absolute -top-5 left-8 z-10 inline-flex max-w-72 rounded-lg bg-orange-600 py-3 pr-10 pl-4 text-sm leading-5 font-semibold text-white shadow-xl shadow-orange-600/30">
+      {text}
+      <button
+        type="button"
+        aria-label="Dismiss the onboarding"
+        onClick={onDismiss}
+        className="absolute top-2 right-2 cursor-pointer rounded p-0.5 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
+      >
+        <X className="size-3.5" aria-hidden />
+      </button>
+      <span className="absolute top-full left-8 border-[6px] border-transparent border-t-orange-600" aria-hidden />
+    </span>
+  );
+}
+
+// The Studio paints a static snapshot of this page first and swaps in the
+// dev server mid-read. Both documents are cross-origin to the Studio, so
+// the page itself reports its scroll position up, and restores the one the
+// Studio hands back after the swap (retrying briefly: late images can
+// still be growing the page when the position arrives).
+export function useStudioScrollRelay() {
+  useEffect(() => {
+    if (window.parent === window) {
+      return;
+    }
+
+    let reportFrame = 0;
+    const report = () => {
+      cancelAnimationFrame(reportFrame);
+      reportFrame = requestAnimationFrame(() => {
+        window.parent.postMessage({ type: 'fimo:welcome:scroll', y: window.scrollY }, '*');
+      });
+    };
+
+    let restoreTimer = 0;
+    const cancelRestore = () => window.clearInterval(restoreTimer);
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'fimo:welcome:restore-scroll' || typeof event.data.y !== 'number') {
+        return;
+      }
+
+      const y = event.data.y;
+      const deadline = Date.now() + 2000;
+      cancelRestore();
+      const attempt = () => {
+        window.scrollTo(0, y);
+        if (Math.abs(window.scrollY - y) < 2 || Date.now() > deadline) {
+          cancelRestore();
+        }
+      };
+      attempt();
+      restoreTimer = window.setInterval(attempt, 100);
+    };
+
+    window.addEventListener('scroll', report, { passive: true });
+    window.addEventListener('wheel', cancelRestore, { passive: true });
+    window.addEventListener('touchmove', cancelRestore, { passive: true });
+    window.addEventListener('message', onMessage);
+    return () => {
+      cancelAnimationFrame(reportFrame);
+      cancelRestore();
+      window.removeEventListener('scroll', report);
+      window.removeEventListener('wheel', cancelRestore);
+      window.removeEventListener('touchmove', cancelRestore);
+      window.removeEventListener('message', onMessage);
+    };
+  }, []);
+}
+
+function Hero({ page }: { page: HomePage }) {
+  return (
+    <section className="relative border-b border-zinc-200 px-6 py-10 text-center">
+      <GridDot edgeX="left" edgeY="top" />
+      <GridDot edgeX="right" edgeY="top" />
+      <Text value={page.title} as="h1" className="text-[32px] font-extrabold tracking-[-0.04em] sm:text-4xl" />
+      <RichText value={page.intro} className="mx-auto mt-2 max-w-xl text-[15px] leading-6 text-zinc-600" />
+      <GridDot edgeX="left" edgeY="bottom" />
+      <GridDot x="25%" edgeY="bottom" />
+      <GridDot x="50%" edgeY="bottom" />
+      <GridDot x="75%" edgeY="bottom" />
+      <GridDot edgeX="right" edgeY="bottom" />
+    </section>
+  );
+}
+
+function Tutorial({
+  page,
+  completedActions,
+  setCompletedActions,
+}: {
+  page: HomePage;
+  completedActions: string[];
+  setCompletedActions: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
+  const currentStepIndex = page.steps.findIndex((step) => !completedActions.includes(String(step.action)));
+
+  const completeAction = useCallback(
+    (action: string) => {
+      // Persisted and announced synchronously: a step CTA can navigate the
+      // Studio away and tear this document down before React flushes, and a
+      // completion living only in a pending state update dies with it.
+      const current = readCompletedActions();
+      if (!current.includes(action)) {
+        const next = [...current, action];
+        window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(next));
+        window.parent.postMessage({ type: 'fimo:welcome:steps', steps: next }, '*');
+      }
+      setCompletedActions((state) => (state.includes(action) ? state : [...state, action]));
+    },
+    [setCompletedActions]
+  );
+
+  const [editActive, setEditActive] = useState(false);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'mode/change') {
+        setEditActive(event.data?.payload?.mode === 'edit');
+        return;
+      }
+      // The Studio owns step completion per project: every preview origin
+      // (snapshot, main dev, each branch dev) has isolated storage, so the
+      // local record alone would restart the tour on each of them.
+      if (event.data?.type === 'fimo:welcome:steps-sync' && Array.isArray(event.data.steps)) {
+        const incoming = event.data.steps.filter((step: unknown): step is string => typeof step === 'string');
+        setCompletedActions((current) => {
+          const merged = [...new Set([...current, ...incoming])];
+          if (merged.length === current.length) {
+            return current;
+          }
+          window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(merged));
+          return merged;
+        });
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  // Announces on load (the Studio answers with the merged set) and reports
+  // every completion so other preview documents inherit it.
+  useEffect(() => {
+    window.parent.postMessage({ type: 'fimo:welcome:steps', steps: completedActions }, '*');
+  }, [completedActions]);
+
+  // Step 1 is the edit, not the doorway: activating Edit mode proves
+  // nothing, so the step only completes once the title differs from the
+  // seed copy — whichever surface the change came from.
+  const titleChanged = String(page.title) !== String(FALLBACK_PAGE.title);
+  useEffect(() => {
+    if (titleChanged) {
+      completeAction('toggleEditMode');
+    }
+  }, [titleChanged, completeAction]);
+
+  // Step 4 is the accepted proposal, not the visit: once the welcome
+  // guide's footer change has been merged into this env, the footer no
+  // longer matches the seed copy.
+  const footerChanged = String(page.footerNote) !== String(FALLBACK_PAGE.footerNote);
+  useEffect(() => {
+    if (footerChanged) {
+      completeAction('openAgents');
+    }
+  }, [footerChanged, completeAction]);
+
+  return (
+    <section
+      id="tour"
+      className="grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 sm:max-lg:grid-cols-2 lg:grid-cols-4 lg:divide-x lg:divide-zinc-200"
+    >
+      {page.steps.map((step, index) => {
+        const action = String(step.action);
+        const completed = completedActions.includes(action);
+        const current = !completed && index === currentStepIndex;
+
+        return (
+          <div key={step._key} className="step-cell flex flex-col p-6">
+            <div className="flex items-center justify-between">
+              <span className="flex items-center gap-2.5">
+                <span
+                  aria-label={completed ? `Step ${index + 1} completed` : `Step ${index + 1}`}
+                  className={`flex size-9 items-center justify-center rounded-full text-[16px] font-extrabold transition-colors duration-300 ${
+                    completed
+                      ? 'bg-emerald-500 text-white'
+                      : current
+                        ? 'bg-orange-600 text-white'
+                        : 'border-2 border-zinc-200 text-zinc-400'
+                  }`}
+                >
+                  {completed ? <Check className="size-5" aria-hidden /> : <Text value={step.number} />}
+                </span>
+                {current && index === 0 ? (
+                  <span className="fimo-mono text-[10px] font-medium text-orange-600">START HERE</span>
+                ) : null}
+              </span>
+              <StepIcon action={action} />
+            </div>
+            <Text value={step.title} as="h2" className="mt-4 text-[15px] font-bold" />
+            <Text value={step.body} as="div" className="mt-1 flex-1 text-[13px] leading-5 text-zinc-600">
+              {(value) => <InstructionText value={value} />}
+            </Text>
+            <TutorialAction
+              action={action}
+              label={step.actionLabel}
+              editActive={editActive}
+              primary={current}
+              onClick={() => {
+                // Steps 1 and 4 complete on their real outcome (the title
+                // edit, the accepted merge — the Studio reports both), not
+                // on opening the door.
+                if (action !== 'toggleEditMode' && action !== 'openAgents') {
+                  completeAction(action);
+                }
+                postShortcut(action);
+              }}
+            />
+          </div>
+        );
+      })}
+    </section>
+  );
+}
+
+function StepIcon({ action }: { action: string }) {
+  const ActionIcon =
+    action === 'toggleEditMode'
+      ? MousePointerClick
+      : action === 'openHomePage'
+        ? Database
+        : action === 'openBranches'
+          ? GitBranch
+          : Bot;
+
+  return <ActionIcon className="step-icon size-[17px] text-zinc-950" strokeWidth={1.8} aria-hidden />;
+}
+
+function InstructionText({ value }: { value: string }) {
+  const lines = value
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const instructions = lines.filter((line) => /^-\s/.test(line));
+  const explanation = lines.filter((line) => !/^-\s/.test(line)).join(' ');
+
+  return (
+    <>
+      {explanation ? <p className="font-medium">{formatInstruction(explanation)}</p> : null}
+      {instructions.length > 0 ? (
+        <div className={explanation ? 'mt-2.5' : ''}>
+          <span className="text-[11px] font-extrabold tracking-[0.05em] text-black uppercase">Action</span>
+          <ul className="mt-1 space-y-1.5">
+            {instructions.map((instruction) => (
+              <li key={instruction} className="font-semibold text-zinc-900">
+                {formatInstruction(instruction.replace(/^-\s*/, ''))}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function formatInstruction(value: string) {
+  return value.split(/(“[^”]+”)/g).map((part, index) => {
+    if (part.startsWith('“') && part.endsWith('”')) {
+      return (
+        <mark
+          key={`${part}-${index}`}
+          className="rounded border border-zinc-200 bg-zinc-100 px-1 py-px font-semibold text-zinc-900"
+        >
+          {part.slice(1, -1)}
+        </mark>
+      );
+    }
+
+    return part;
+  });
+}
+
+// The Studio paints the static snapshot build first and swaps in the dev
+// server a few seconds later; Edit mode only works after that swap. The
+// snapshot is the one context that is a production build inside an iframe,
+// which is how the page knows to explain the wait on hover.
+const isStaticStudioSnapshot = () => !import.meta.env.DEV && typeof window !== 'undefined' && window.parent !== window;
+
+function TutorialAction({
+  action,
+  label,
+  editActive,
+  primary,
+  onClick,
+}: {
+  action: string;
+  label: HomePage['steps'][number]['actionLabel'];
+  editActive: boolean;
+  primary: boolean;
+  onClick: () => void;
+}) {
+  // While Edit mode is active, preview.js captures page clicks for element
+  // selection, so an in-page button cannot receive them. The Studio shows
+  // the exit guidance anchored on its own Edit mode toggle instead.
+  if (action === 'toggleEditMode' && editActive) {
+    return null;
+  }
+  if (action === 'toggleEditMode' && isStaticStudioSnapshot()) {
+    // The snapshot is replaced by the dev document the moment the dev
+    // server can serve Edit mode, so this loading state flips to the real
+    // button exactly when the feature becomes available.
+    return (
+      <span className="group relative mt-4 inline-flex w-full">
+        <span
+          role="tooltip"
+          className="pointer-events-none absolute bottom-full left-0 mb-2 w-max max-w-64 rounded-md bg-zinc-950 px-3 py-2 text-xs font-medium text-white opacity-0 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
+        >
+          Edit mode is not available yet. It activates in a few seconds.
+        </span>
+        <span
+          aria-busy="true"
+          className="flex w-full cursor-default items-center justify-center rounded-md bg-orange-600/70 py-2 text-[13px] font-semibold text-white"
+        >
+          Loading edit mode, wait
+          <span className="fimo-dots ml-0.5" aria-hidden>
+            <span>.</span>
+            <span>.</span>
+            <span>.</span>
+          </span>
+        </span>
+      </span>
+    );
+  }
+
+  return <ActionButton label={label} primary={primary} onClick={onClick} shortcut={action} />;
+}
+
+function ActionButton({
+  label,
+  primary,
+  onClick,
+  className = '',
+  shortcut,
+}: {
+  label: HomePage['steps'][number]['actionLabel'];
+  primary: boolean;
+  onClick: () => void;
+  className?: string;
+  /** Names the Studio shortcut this button fires, so the generated static
+   * snapshot can rewire it without matching on button copy. */
+  shortcut?: string;
+}) {
+  return (
+    <button
+      type="button"
+      data-shortcut={shortcut}
+      onClick={onClick}
+      className={`${
+        primary
+          ? 'mt-4 w-full cursor-pointer rounded-md bg-orange-600 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-orange-700'
+          : OUTLINE_BUTTON_CLASS
+      } ${className}`}
+    >
+      <Text value={label} />
+    </button>
+  );
+}
+
+/**
+ * The byline shared by the article cards and the article page. Both fields
+ * come from the linked Author entry, so editing that one entry renames the
+ * author everywhere it appears — the point of a reference.
+ */
+export function AuthorLine({
+  author,
+  className = '',
+}: {
+  author: NonNullable<TutorialArticle['author']>;
+  className?: string;
+}) {
+  return (
+    <p className={`text-[12px] leading-5 text-zinc-500 ${className}`}>
+      By <Text value={author.name} as="span" className="font-semibold text-zinc-700" />
+      {/* `FimoString` is a String object, so a cleared role is truthy — the
+          raw value is what decides whether the separator earns its place. */}
+      {String(author.role) ? (
+        <>
+          {' · '}
+          <Text value={author.role} as="span" />
+        </>
+      ) : null}
+    </p>
+  );
+}
+
+function Articles({
+  articles,
+  showNudge,
+  onDismiss,
+}: {
+  articles: TutorialArticle[];
+  showNudge: boolean;
+  onDismiss: () => void;
+}) {
+  return (
+    <section className="relative grid border-b border-zinc-200 max-md:divide-y max-md:divide-zinc-200 md:grid-cols-3 md:divide-x md:divide-zinc-200">
+      {showNudge && (
+        <SectionNudge
+          text="Tour done! Each concept has a short guide here — worth five more minutes."
+          onDismiss={onDismiss}
+        />
+      )}
+      {articles.map((article, index) => (
+        <Link
+          key={article.id}
+          to={`/articles/${String(article.slug)}`}
+          className="group cursor-pointer transition-colors hover:bg-zinc-50 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-orange-600"
+        >
+          {article.cover ? (
+            <Image value={article.cover} className={`${ARTICLE_COVER_CLASS} !object-cover`} loading="lazy" />
+          ) : (
+            <div className={ARTICLE_COVER_CLASS} aria-hidden />
+          )}
+          <div className="p-6 pt-5">
+            <p className="fimo-mono text-[11px] text-zinc-400">
+              ARTICLES / 0{index + 1}
+              {article.category ? (
+                <>
+                  {' / '}
+                  <Text value={article.category.name} as="span" className="text-orange-600 uppercase" />
+                </>
+              ) : null}
+            </p>
+            <Text value={article.title} as="h3" className="mt-2 line-clamp-2 text-[15px] font-bold" />
+            <Text value={article.summary} as="p" className="mt-1.5 line-clamp-2 text-[13px] leading-5 text-zinc-600" />
+            {article.author ? <AuthorLine author={article.author} className="mt-3" /> : null}
+            <span className="mt-4 inline-block text-[13px] font-bold text-orange-600 group-hover:text-orange-700">
+              Read in the CMS →
+            </span>
+          </div>
+        </Link>
+      ))}
+    </section>
+  );
+}
+
+function WhatComesNext({ page, showNudge, onDismiss }: { page: HomePage; showNudge: boolean; onDismiss: () => void }) {
+  return (
+    <section className="relative grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 lg:grid-cols-2 lg:divide-x lg:divide-zinc-200">
+      {showNudge && (
+        <SectionNudge
+          text="You are ready. Migrate or create your own website, and enjoy Fimo on a real project!"
+          onDismiss={onDismiss}
+        />
+      )}
+      <div className="p-6 sm:p-8">
+        <p className="fimo-mono text-[11px] font-medium text-orange-600">WHAT COMES NEXT</p>
+        <Text value={page.migrationTitle} as="h3" className="mt-2 text-xl font-bold tracking-[-0.02em]" />
+        <RichText value={page.migrationBody} className="mt-1.5 max-w-md text-[13px] leading-5 text-zinc-600" />
+        <CopyPrompt value={page.migrationPrompt} />
+      </div>
+      <div className="p-6 sm:p-8">
+        <p className="fimo-mono text-[11px] font-medium text-zinc-400">OR START FRESH</p>
+        <Text value={page.buildTitle} as="h3" className="mt-2 text-xl font-bold tracking-[-0.02em]" />
+        <RichText value={page.buildBody} className="mt-1.5 max-w-md text-[13px] leading-5 text-zinc-600" />
+      </div>
+    </section>
+  );
+}
+
+function CopyPrompt({ value }: { value: HomePage['migrationPrompt'] }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(String(value));
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="mt-4 inline-flex cursor-pointer items-center gap-2 rounded-md bg-orange-600 px-4 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-orange-700"
+    >
+      {copied ? <Check className="size-4" aria-hidden /> : <Copy className="size-4" aria-hidden />}
+      {copied ? 'Copied' : 'Copy migration prompt'}
+    </button>
+  );
+}
+
+function readCompletedActions(): string[] {
+  if (typeof window === 'undefined') {
+    return [];
+  }
+
+  try {
+    const value = JSON.parse(window.sessionStorage.getItem(COMPLETED_ACTIONS_KEY) ?? '[]');
+    return Array.isArray(value) ? value.filter((item): item is string => typeof item === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function postShortcut(event: string) {
+  window.parent.postMessage({ type: 'shortcut', payload: { event } }, '*');
+}
+
+export function ContentFallback() {
+  return (
+    <div className="bg-white px-3 py-3 sm:px-6 sm:py-8">
+      <div className="mx-auto min-h-screen max-w-2xl px-6 py-16 sm:px-12">
+        <p className="text-center text-zinc-600">Tutorial content is not available yet.</p>
+      </div>
+    </div>
+  );
+}