fimo 2.2.0-staging.10 → 2.2.0-staging.11

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

@@ -0,0 +1,68 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { ArrowLeft } from 'lucide-react';
+import { Link, useParams } from 'react-router';
+
+import ArticleContent from '@/schemas/Article';
+
+import '../font.css';
+
+const ArticleDetail = () => {
+  const { slug = '' } = useParams();
+  const { data: article, isLoading } = ArticleContent.useGetBySlug(slug);
+
+  if (!article) {
+    return (
+      <main className="fimo-starter-font min-h-screen bg-zinc-100 px-3 py-3 text-zinc-950 sm:px-6 sm:py-8">
+        <div className="mx-auto max-w-4xl px-6 py-24 text-center sm:px-12">
+          <p className="text-zinc-600">{isLoading ? 'Loading article…' : 'This article does not exist.'}</p>
+          {!isLoading && (
+            <Link
+              to="/"
+              className="mt-6 inline-flex cursor-pointer items-center gap-2 rounded-[8px] font-semibold text-orange-700 hover:text-orange-800"
+            >
+              <ArrowLeft className="size-4" aria-hidden />
+              Back to the tutorial
+            </Link>
+          )}
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="fimo-starter-font min-h-screen bg-zinc-100 px-3 py-3 text-zinc-950 sm:px-6 sm:py-8">
+      <article className="mx-auto max-w-4xl">
+        <header className="border-b border-zinc-300 px-6 py-6 sm:px-12">
+          <Link
+            to="/"
+            className="inline-flex cursor-pointer items-center gap-2 rounded-[8px] text-sm font-semibold text-orange-700 hover:text-orange-800"
+          >
+            <ArrowLeft className="size-4" aria-hidden />
+            Back to the tutorial
+          </Link>
+        </header>
+        <div className="px-6 py-12 sm:px-12 sm:py-16">
+          <p className="text-xs font-semibold tracking-[0.18em] text-orange-700 uppercase">Fimo tutorial</p>
+          <Text
+            value={article.title}
+            as="h1"
+            className="mt-5 max-w-3xl text-4xl font-bold tracking-[-0.04em] sm:text-6xl"
+          />
+          <Text value={article.summary} as="p" className="mt-6 max-w-2xl text-lg leading-8 text-zinc-600" />
+          <Image
+            value={article.cover}
+            className="mt-10 aspect-[48/25] w-full rounded-[8px] border border-zinc-950 object-cover"
+            loading="eager"
+            fetchPriority="high"
+          />
+          <RichText
+            value={article.body}
+            className="mx-auto mt-12 max-w-2xl text-lg leading-8 text-zinc-700 [&_a]:cursor-pointer [&_a]:font-semibold [&_a]:text-orange-700 [&_a]:underline [&_a]:underline-offset-4 [&_h2]:mt-12 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-[-0.02em] [&_h2]:text-zinc-950 [&_h2+p]:mt-4 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-zinc-950 [&_li+li]:mt-2 [&_p+p]:mt-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-[8px] [&_pre]:bg-zinc-950 [&_pre]:p-5 [&_pre]:text-[15px] [&_pre]:leading-7 [&_pre]:whitespace-pre-wrap [&_pre]:text-zinc-100 [&_pre+p]:mt-6 [&_ul]:mt-6 [&_ul]:list-disc [&_ul]:pl-6 [&_ul+p]:mt-6"
+          />
+        </div>
+      </article>
+    </main>
+  );
+};
+
+export default ArticleDetail;

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

@@ -0,0 +1,32 @@
+import ArticleContent from '@/schemas/Article';
+import HomePageContent from '@/schemas/HomePage';
+
+import '../font.css';
+import { FALLBACK_ARTICLES, FALLBACK_PAGE } from './fallback-content';
+import { ContentFallback, TutorialPage } from './SiteContent';
+
+const Index = () => {
+  const { data: page, isLoading, isError } = HomePageContent.useGet();
+  const { data: articles = [], isLoading: articlesLoading, isError: articlesError } = ArticleContent.useGet();
+
+  // While loading, the page renders the seed copy through the same
+  // components, so the live values reconcile in place with no visible
+  // change and no layout shift. Keeping one JSX position avoids a remount
+  // on the fallback-to-live switch. Errors keep the seed copy up too —
+  // the query refetches on focus/reconnect, so an unreachable backend
+  // self-heals; the empty message is reserved for genuinely absent content.
+  const showTutorial = Boolean(page) || isLoading || articlesLoading || isError || articlesError;
+  const resolvedArticles = articles.length > 0 ? articles : articlesLoading ? FALLBACK_ARTICLES : articles;
+
+  return (
+    <div className="fimo-starter-font min-h-screen bg-white text-zinc-950">
+      {showTutorial ? (
+        <TutorialPage page={page ?? FALLBACK_PAGE} articles={page ? resolvedArticles : FALLBACK_ARTICLES} />
+      ) : (
+        <ContentFallback />
+      )}
+    </div>
+  );
+};
+
+export default Index;

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

@@ -0,0 +1,413 @@
+import { Image, RichText, Text } from 'fimo-react';
+import { Bot, Check, Copy, Database, GitBranch, MousePointerClick } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router';
+
+import type { Article } from '@/schemas/Article';
+import type { HomePage } from '@/schemas/HomePage';
+
+interface TutorialPageProps {
+  page: HomePage;
+  articles: Article[];
+}
+
+const COMPLETED_ACTIONS_KEY = 'fimo-welcome-completed-actions-v2';
+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) {
+  return (
+    <main className="min-h-screen bg-white px-4 py-10 text-zinc-950 sm:px-6">
+      <article className="relative mx-auto max-w-6xl border-x border-t border-zinc-200">
+        <Hero page={page} />
+        <Tutorial page={page} />
+        <div className="relative h-14 border-b border-zinc-200" />
+        <Articles articles={articles} />
+        <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} />
+        <div className="relative">
+          <GridDot edgeX="left" edgeY="top" />
+          <GridDot x="50%" edgeY="top" />
+          <GridDot edgeX="right" edgeY="top" />
+        </div>
+      </article>
+    </main>
+  );
+}
+
+// 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}
+    />
+  );
+}
+
+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 }: { page: HomePage }) {
+  const [completedActions, setCompletedActions] = useState<string[]>(readCompletedActions);
+  const currentStepIndex = page.steps.findIndex((step) => !completedActions.includes(String(step.action)));
+
+  const completeAction = useCallback((action: string) => {
+    setCompletedActions((current) => {
+      if (current.includes(action)) {
+        return current;
+      }
+
+      const next = [...current, action];
+      window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const [editActive, setEditActive] = useState(false);
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'mode/change') {
+        return;
+      }
+      const isEdit = event.data?.payload?.mode === 'edit';
+      setEditActive(isEdit);
+      if (isEdit) {
+        completeAction('toggleEditMode');
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [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={() => {
+                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>{formatInstruction(explanation)}</p> : null}
+      {instructions.length > 0 ? (
+        <div className={explanation ? 'mt-2.5' : ''}>
+          <span className="fimo-mono text-[10px] font-medium text-orange-600">ACTION</span>
+          <ul className="mt-1 space-y-1.5">
+            {instructions.map((instruction) => (
+              <li key={instruction} className="font-medium text-zinc-800">
+                {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} />;
+}
+
+function ActionButton({
+  label,
+  primary,
+  onClick,
+  className = '',
+}: {
+  label: HomePage['steps'][number]['actionLabel'];
+  primary: boolean;
+  onClick: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      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>
+  );
+}
+
+function Articles({ articles }: { articles: Article[] }) {
+  return (
+    <section className="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">
+      {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}</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" />
+            <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 }: { page: HomePage }) {
+  return (
+    <section className="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">
+      <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>
+  );
+}

package/templates/welcome/template/src/pages/fallback-content.ts

@@ -0,0 +1,133 @@
+import type { Article } from '@/schemas/Article';
+import type { HomePage } from '@/schemas/HomePage';
+
+// Generated from the starter seed (../../manifest.json): the loading
+// fallback renders the real TutorialPage with this data so the live CMS
+// values swap in without any visible change. Regenerate when the seed
+// copy changes — a drifted fallback flashes different text on load.
+// Rich-text values carry { content: <tiptap doc> } like FimoRichText;
+// the missing source symbol simply disables inline editing until the
+// live values arrive.
+
+export const FALLBACK_PAGE = {
+  title: 'This site is yours to change.',
+  intro: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Four actions, five minutes. Every change is safe to make in this tutorial project.',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  startLabel: 'Start the 5-minute tour',
+  tourTitle: 'Try the essentials in five minutes',
+  tourIntro: 'Follow these steps in order. Every change is safe to make in this tutorial project.',
+  steps: [
+    {
+      _key: 'fallback-step-1',
+      number: '1',
+      title: 'Edit this page',
+      body: 'Edit mode lets you change text and images directly on the website.\n- Select the big title and replace it with “Welcome, [your name]”.',
+      actionLabel: 'Activate Edit mode',
+      action: 'toggleEditMode',
+    },
+    {
+      _key: 'fallback-step-2',
+      number: '2',
+      title: 'Open the CMS',
+      body: 'The website content also lives in the CMS, as structured data.\n- Change “Title” and watch the site update.',
+      actionLabel: 'Jump to the Home page',
+      action: 'openHomePage',
+    },
+    {
+      _key: 'fallback-step-3',
+      number: '3',
+      title: 'Explore branches',
+      body: 'Branches let people and agents work without touching the live site.\n- Try a change on “tutorial/first-change”.',
+      actionLabel: 'Show the branch menu',
+      action: 'openBranches',
+    },
+    {
+      _key: 'fallback-step-4',
+      number: '4',
+      title: 'Meet your agent',
+      body: 'Your agent maintains this website on a schedule.\n- Click “Run now” and review the result and cost.',
+      actionLabel: 'Meet Welcome Guide',
+      action: 'openAgents',
+    },
+  ],
+  articlesTitle: 'Continue learning in the CMS',
+  articlesIntro:
+    'These are real entries in the Articles collection. Open Content to edit their titles, summaries, bodies, and cover images.',
+  migrationTitle: 'Migrate my existing website',
+  migrationBody: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Open your existing local project with Codex, Claude Code, Cursor, or another coding agent. Copy the prompt below so the agent connects the website you already trust to Fimo, with a recoverable backup first.',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  migrationPrompt:
+    'Before changing anything, create a recoverable backup of this website. If it uses Git, create a branch and commit the current state. If it does not use Git, duplicate the entire project folder and confirm the copy opens. Then inspect the existing codebase and migrate this website to Fimo in place. Preserve every route, visible piece of content, media asset, form, SEO field, redirect, and locale. Connect the existing implementation to Fimo rather than generating a new empty site. Report any item you cannot migrate safely before changing it.',
+  buildTitle: 'Create my website',
+  buildBody: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Use your Codex, Claude Code, Cursor, or other coding-agent subscription to design and build the first version in a local repository. Connect it to Fimo when the foundation is ready. Fimo starts where the first build ends: content, visual editing, environments, agents, and hosting.',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  closingTitle: 'Fimo keeps finished websites autonomous',
+  closingBody:
+    'Fimo Credits are designed for the agents that maintain your website and for teammates who use Studio chat without a local coding tool.',
+} as unknown as HomePage;
+
+// Covers are omitted: the card's image box keeps its own aspect ratio, so
+// the live images arrive without shifting the layout.
+export const FALLBACK_ARTICLES = [
+  {
+    id: 'fallback-article-1',
+    slug: 'create-your-first-agent',
+    title: 'Create your first agent',
+    summary:
+      'Build a weekly SEO agent with one prompt: full audit, safe fixes applied to the CMS, and a report you can trust.',
+  },
+  {
+    id: 'fallback-article-2',
+    slug: 'branches-and-environments',
+    title: 'How branches and environments work',
+    summary: 'Branches isolate changes. Environments group related branches under shared deployment configuration.',
+  },
+  {
+    id: 'fallback-article-3',
+    slug: 'discover-the-analytics',
+    title: 'Discover the analytics',
+    summary: 'See who visits your website: pageviews, top pages, sources, devices, and countries.',
+  },
+] as unknown as Article[];

package/templates/welcome/template/src/routes.ts

@@ -0,0 +1,9 @@
+import type { RouteConfig } from '@react-router/dev/routes';
+import { layout, route } from '@react-router/dev/routes';
+
+export default [
+  layout('./pages/LocaleLayout.tsx', [
+    route(':locale?', './pages/Index.tsx', { id: 'home' }),
+    route(':locale?/articles/:slug', './pages/ArticleDetail.tsx', { id: 'article' }),
+  ]),
+] satisfies RouteConfig;

package/templates/welcome/template/src/schemas/Article.json

@@ -0,0 +1,12 @@
+{
+  "uid": "Article",
+  "name": "Articles",
+  "isSingleton": false,
+  "i18n": { "enabled": false },
+  "fields": {
+    "title": { "type": "string", "required": true },
+    "summary": { "type": "text", "required": true },
+    "body": { "type": "richtext", "required": true },
+    "cover": { "type": "media", "required": true }
+  }
+}