create-ampless 0.2.0-alpha.0

package/dist/templates/corporate/tokens.css

@@ -0,0 +1,47 @@
+/* Corporate theme tokens — slate / navy on near-white. Conservative
+ * palette intended for company / institutional sites. Same scoped-
+ * selector pattern as the other themes. */
+
+[data-theme='corporate'] {
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0.18 0.02 250);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.02 250);
+  --primary: oklch(0.4 0.13 250);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.95 0.01 250);
+  --secondary-foreground: oklch(0.25 0.05 250);
+  --muted: oklch(0.96 0.005 250);
+  --muted-foreground: oklch(0.5 0.02 250);
+  --accent: oklch(0.95 0.02 250);
+  --accent-foreground: oklch(0.3 0.08 250);
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.99 0 0);
+  --border: oklch(0.9 0.005 250);
+  --input: oklch(0.9 0.005 250);
+  --ring: oklch(0.4 0.13 250);
+  --radius: 0.25rem;
+  --ampless-body-font: system-ui, -apple-system, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-theme='corporate'] {
+    --background: oklch(0.16 0.02 250);
+    --foreground: oklch(0.96 0.005 250);
+    --card: oklch(0.22 0.02 250);
+    --card-foreground: oklch(0.96 0.005 250);
+    --primary: oklch(0.7 0.14 250);
+    --primary-foreground: oklch(0.16 0.02 250);
+    --secondary: oklch(0.28 0.03 250);
+    --secondary-foreground: oklch(0.96 0.005 250);
+    --muted: oklch(0.26 0.02 250);
+    --muted-foreground: oklch(0.7 0.02 250);
+    --accent: oklch(0.32 0.05 250);
+    --accent-foreground: oklch(0.96 0.005 250);
+    --destructive: oklch(0.55 0.22 25);
+    --destructive-foreground: oklch(0.99 0 0);
+    --border: oklch(0.32 0.02 250);
+    --input: oklch(0.32 0.02 250);
+    --ring: oklch(0.7 0.14 250);
+  }
+}

package/dist/templates/dads/README.md

@@ -0,0 +1,35 @@
+# {{siteName}}
+
+DADS theme — built on the official **[Digital Agency Design System Tailwind plugin](https://github.com/digital-go-jp/tailwind-theme-plugin)** (`@digital-go-jp/tailwind-theme-plugin`, MIT). Color palette and typography conform to DADS specifications, suitable for Japanese government / public-sector / institutional sites.
+
+## What's plugin-backed
+
+- **Color palette** — `solidBlue` (`#0017c1`) as primary, plus the full DADS scale (light-blue, cyan, green, lime, yellow, orange, red, magenta) accessible as Tailwind classes (`bg-blue-900`, `text-blue-50`, etc.)
+- **Typography** — `fontFamily.sans` set to Noto Sans JP via the plugin; surfaced through `--ampless-body-font`
+- **Border radii** — `rounded-4` / `rounded-6` available
+
+`templates/dads/tokens.css` binds the plugin's CSS variables (`--color-blue-900` etc.) to ampless's standard theme variables (`--primary`, `--background`, ...) so all shared chrome (SiteHeader, SiteFooter, shadcn buttons, etc.) automatically renders in DADS colors.
+
+When DADS publishes a new palette version, bumping `@digital-go-jp/tailwind-theme-plugin` in `package.json` is enough — the theme picks it up.
+
+## Customizing
+
+In `/admin/sites/<siteId>/theme`:
+
+- **Logo image URL** — branding (organization mark)
+- **Primary color** — defaults to DADS solidBlue. Changing to a non-DADS color makes the site no longer DADS-conformant.
+- **Top story slug** — feature one published post between hero and news
+- **Header navigation / Footer links / Footer legend**
+
+## Notes
+
+- Dark mode uses an inverted approximation. DADS doesn't ship an official dark palette as of plugin 0.3.4; when one lands, update `templates/dads/tokens.css` to bind the dark variables.
+- The plugin only provides design tokens. For full DADS components (buttons, alerts, tabs, etc.), see [design-system-example-components](https://github.com/digital-go-jp/design-system-example-components) and adapt as needed.
+
+## Getting started
+
+```bash
+npm install
+npx ampx sandbox
+npm run dev
+```

package/dist/templates/dads/index.ts

@@ -0,0 +1,25 @@
+import { defineThemeModule } from 'ampless'
+import './tokens.css'
+import manifest from './manifest'
+import DadsHome from './pages/home'
+import DadsPost, { generatePostMetadata } from './pages/post'
+import DadsTag from './pages/tag'
+import { dadsFeedHandler } from './pages/feed'
+import { dadsSitemapHandler } from './pages/sitemap'
+
+export default defineThemeModule({
+  name: 'dads',
+  manifest,
+  components: {
+    Home: DadsHome,
+    Post: DadsPost,
+    Tag: DadsTag,
+  },
+  metadata: {
+    Post: generatePostMetadata,
+  },
+  routes: {
+    feed: dadsFeedHandler,
+    sitemap: dadsSitemapHandler,
+  },
+})

package/dist/templates/dads/manifest.ts

@@ -0,0 +1,84 @@
+import { defineTheme } from 'ampless'
+
+// DADS (Digital Agency Design System) — デジタル庁デザインシステム準拠
+// テーマ。政府 / 自治体 / 公共系サイト向け。視覚的特徴: 高コントラス
+// ト、明朝寄りの本文、控えめな装飾、日付や出典の明示、アクセシビリティ
+// 重視。
+//
+// カスタマイズ surface はあえて狭め。DADS は「色を自由に変えると準拠
+// しなくなる」性質のシステムなので、ユーザーがロゴ / ナビ / 簡素な
+// アクセント色程度を触れる範囲に限定。primary は solidBlue 系を
+// 強く推奨 (description に注意書き)。
+export default defineTheme({
+  name: 'dads',
+  label: { en: 'DADS', ja: 'デジタル庁デザインシステム' },
+  description: {
+    en: 'Government / public-sector layout following the Digital Agency Design System aesthetic. High contrast, accessibility-first, minimal decoration.',
+    ja: 'デジタル庁デザインシステム準拠のレイアウト。政府・自治体・公共系サイト向け。高コントラスト、アクセシビリティ重視、装飾控えめ。',
+  },
+  fields: [
+    {
+      key: 'logoUrl',
+      label: { en: 'Logo image URL', ja: 'ロゴ画像 URL' },
+      group: { en: 'Branding', ja: 'ブランディング' },
+      type: 'image',
+      default: '',
+      description: {
+        en: 'URL or media path. Empty falls back to the site name as text.',
+        ja: '画像 URL またはメディアパス。空欄ならサイト名がテキスト表示されます。',
+      },
+    },
+    {
+      key: 'primary',
+      label: { en: 'Primary color', ja: 'プライマリカラー' },
+      group: { en: 'Colors', ja: 'カラー' },
+      type: 'color',
+      default: 'oklch(0.34 0.18 264)',
+      cssVar: '--primary',
+      description: {
+        en: 'Defaults to DADS solidBlue (#0017c1 equivalent). Changing to a non-DADS color makes the site no longer DADS-compliant.',
+        ja: 'デフォルトは DADS solidBlue (#0017c1 相当)。DADS 仕様外の色に変更すると DADS 準拠ではなくなります。',
+      },
+    },
+    {
+      key: 'featuredSlug',
+      label: { en: 'Top story slug', ja: 'トップストーリーのスラッグ' },
+      group: { en: 'Hero', ja: 'ヒーロー' },
+      type: 'text',
+      default: '',
+      maxLength: 200,
+      description: {
+        en: 'Slug of a published post to feature between the hero and the news list. Empty disables.',
+        ja: 'ヒーローとニュース一覧の間に載せたい公開記事のスラッグ。空なら非表示。',
+      },
+    },
+    {
+      key: 'headerNav',
+      label: { en: 'Header navigation', ja: 'ヘッダーナビ' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'linkList',
+      default: [],
+      maxItems: 8,
+    },
+    {
+      key: 'footerLinks',
+      label: { en: 'Footer links', ja: 'フッターリンク' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'linkList',
+      default: [],
+      maxItems: 16,
+    },
+    {
+      key: 'footerLegend',
+      label: { en: 'Footer legend', ja: 'フッター注記' },
+      group: { en: 'Navigation', ja: 'ナビゲーション' },
+      type: 'text',
+      default: '',
+      maxLength: 300,
+      description: {
+        en: 'Organization name / address / responsibility statement shown below the footer links.',
+        ja: '組織名・所在地・責任者名など、フッター下部に表示する細字。',
+      },
+    },
+  ],
+})

package/dist/templates/dads/pages/feed.ts

@@ -0,0 +1,29 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+export async function dadsFeedHandler({ siteId }: Ctx): Promise<Response> {
+  const url = publicAssetUrl(`public/plugins/rss/${siteId}/feed.xml`)
+  const upstream = await fetch(url, { cache: 'no-store' })
+  if (!upstream.ok) {
+    return new Response(
+      `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0"><channel></channel></rss>\n`,
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/rss+xml; charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      }
+    )
+  }
+  return new Response(upstream.body, {
+    headers: {
+      'Content-Type': 'application/rss+xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=300',
+    },
+  })
+}

package/dist/templates/dads/pages/home.tsx

@@ -0,0 +1,126 @@
+import Link from 'next/link'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { listPublishedPosts, getPublishedPost } from '@/lib/posts-public'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { renderBody } from '@/lib/posts'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+
+// DADS home: hero band with strong title bar, optional featured post,
+// formal news list with prominent dates. Layout deliberately
+// understated — DADS leans on hierarchy and whitespace, not
+// decoration.
+export default async function DadsHome({ params }: ThemeRouteContext) {
+  const { siteId } = await params
+  const [settings, theme, postsResult] = await Promise.all([
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+    listPublishedPosts({ siteId, limit: 10 }),
+  ])
+
+  const featuredSlug = theme.values.featuredSlug?.trim()
+  const featured = featuredSlug
+    ? await getPublishedPost(featuredSlug, { siteId })
+    : null
+  const posts = featured
+    ? postsResult.items.filter((p) => p.slug !== featured.slug)
+    : postsResult.items
+
+  const footerLegend = theme.values.footerLegend?.trim()
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-base font-bold tracking-tight"
+        className="border-b-2 border-[var(--primary)]"
+      />
+
+      <main>
+        <section className="border-b bg-[var(--secondary)] px-6 py-12">
+          <div className="mx-auto max-w-4xl">
+            <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+              {settings.site.name}
+            </h1>
+            {settings.site.description && (
+              <p className="mt-3 max-w-2xl leading-relaxed">{settings.site.description}</p>
+            )}
+          </div>
+        </section>
+
+        {featured && (
+          <section className="border-b px-6 py-12">
+            <div className="mx-auto max-w-4xl">
+              <p className="mb-2 text-xs font-bold uppercase tracking-widest text-[var(--primary)]">
+                {featured.publishedAt ? (
+                  <time dateTime={featured.publishedAt}>
+                    {formatDate(featured.publishedAt, settings.dateFormat, settings.timezone)}
+                  </time>
+                ) : (
+                  '—'
+                )}
+              </p>
+              <h2 className="text-2xl font-bold tracking-tight">
+                <Link href={`/${featured.slug}`} className="underline-offset-4 hover:underline">
+                  {featured.title}
+                </Link>
+              </h2>
+              <div
+                className="prose prose-neutral dark:prose-invert mt-6 max-w-none"
+                dangerouslySetInnerHTML={{ __html: renderBody(featured) }}
+              />
+            </div>
+          </section>
+        )}
+
+        {posts.length > 0 && (
+          <section className="px-6 py-12">
+            <div className="mx-auto max-w-4xl">
+              <h2 className="mb-6 border-b-2 border-[var(--primary)] pb-2 text-lg font-bold">
+                お知らせ / News
+              </h2>
+              <ul className="divide-y">
+                {posts.map((post) => (
+                  <li key={post.postId} className="py-4">
+                    <Link
+                      href={`/${post.slug}`}
+                      className="group flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-6"
+                    >
+                      {post.publishedAt && (
+                        <time
+                          dateTime={post.publishedAt}
+                          className="font-mono text-xs tracking-wide text-[var(--muted-foreground)] sm:w-32 sm:shrink-0"
+                        >
+                          {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                        </time>
+                      )}
+                      <span className="flex-1 underline-offset-4 group-hover:underline">
+                        {post.title}
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        )}
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        className="bg-[var(--secondary)]"
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p className="whitespace-pre-line">{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/dads/pages/post.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { renderBody } from '@/lib/posts'
+import { LightboxBinder } from '@/components/lightbox-content'
+import { TagList } from '@/components/tag-list'
+import { postMetadata } from '@/lib/seo'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { getPublishedPost } from '@/lib/posts-public'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+import { t } from '@/lib/i18n'
+
+type PostCtx = ThemeRouteContext<{ slug: string }>
+
+export async function generatePostMetadata({ params }: PostCtx): Promise<Metadata> {
+  const { siteId, slug } = await params
+  const post = await getPublishedPost(slug, { siteId })
+  if (!post) return {}
+  return postMetadata(post, siteId)
+}
+
+export default async function DadsPost({ params }: PostCtx) {
+  const { siteId, slug } = await params
+  const [post, settings, theme] = await Promise.all([
+    getPublishedPost(slug, { siteId }),
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+  ])
+  if (!post) notFound()
+
+  const defaultLightbox = settings.media.imageDisplay === 'lightbox'
+  const maxWidth = settings.media.imageMaxWidth ?? '100%'
+  const proseStyle: React.CSSProperties = {
+    ['--ampless-img-max-width' as string]: maxWidth,
+  }
+  const footerLegend = theme.values.footerLegend?.trim()
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-base font-bold tracking-tight"
+        className="border-b-2 border-[var(--primary)]"
+      />
+
+      <main className="mx-auto max-w-3xl px-6 py-10">
+        <nav className="mb-8 text-sm">
+          <Link
+            href="/"
+            className="text-[var(--primary)] underline-offset-4 hover:underline"
+          >
+            {t('public.back')}
+          </Link>
+        </nav>
+
+        <article>
+          <header className="mb-10 border-b pb-6">
+            <h1 className="text-3xl font-bold leading-tight tracking-tight sm:text-4xl">
+              {post.title}
+            </h1>
+            {post.publishedAt && (
+              <p className="mt-3 text-sm text-[var(--muted-foreground)]">
+                <time dateTime={post.publishedAt}>
+                  {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                </time>
+              </p>
+            )}
+          </header>
+
+          <div
+            id="post-body"
+            className="prose prose-neutral dark:prose-invert max-w-none [&_a]:text-[var(--primary)] [&_a]:underline-offset-4 [&_img]:max-w-[var(--ampless-img-max-width)] [&_img]:mx-auto"
+            style={proseStyle}
+            dangerouslySetInnerHTML={{ __html: renderBody(post) }}
+          />
+
+          <TagList tags={post.tags} className="mt-10 border-t pt-6" />
+        </article>
+
+        <LightboxBinder scopeSelector="#post-body" defaultLightbox={defaultLightbox} />
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        className="bg-[var(--secondary)]"
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p className="whitespace-pre-line">{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/dads/pages/sitemap.ts

@@ -0,0 +1,28 @@
+import { publicAssetUrl } from '@/lib/storage'
+
+interface Ctx {
+  siteId: string
+  request: Request
+}
+
+export async function dadsSitemapHandler({ siteId }: Ctx): Promise<Response> {
+  const url = publicAssetUrl(`public/plugins/seo/${siteId}/sitemap.xml`)
+  const upstream = await fetch(url, { cache: 'no-store' })
+  if (!upstream.ok) {
+    return new Response(
+      `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"></urlset>\n`,
+      {
+        headers: {
+          'Content-Type': 'application/xml; charset=utf-8',
+          'Cache-Control': 'public, max-age=60',
+        },
+      }
+    )
+  }
+  return new Response(upstream.body, {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=300',
+    },
+  })
+}

package/dist/templates/dads/pages/tag.tsx

@@ -0,0 +1,86 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { formatDate, type ThemeRouteContext } from 'ampless'
+import { listPostsByTag } from '@/lib/posts-public'
+import { loadSiteSettings } from '@/lib/site-settings'
+import { loadThemeConfig } from '@/lib/theme-config'
+import { SiteHeader } from '@/components/site-chrome/site-header'
+import { SiteFooter } from '@/components/site-chrome/site-footer'
+import { t } from '@/lib/i18n'
+
+export default async function DadsTag({ params }: ThemeRouteContext<{ tag: string }>) {
+  const { siteId, tag } = await params
+  const decodedTag = decodeURIComponent(tag)
+  const [{ items: posts }, settings, theme] = await Promise.all([
+    listPostsByTag(decodedTag, { siteId, limit: 50 }),
+    loadSiteSettings(siteId),
+    loadThemeConfig(siteId),
+  ])
+  if (posts.length === 0) notFound()
+
+  const footerLegend = theme.values.footerLegend?.trim()
+
+  return (
+    <>
+      <SiteHeader
+        links={theme.values.headerNav}
+        logoUrl={theme.values.logoUrl}
+        siteName={settings.site.name}
+        brandClassName="text-base font-bold tracking-tight"
+        className="border-b-2 border-[var(--primary)]"
+      />
+
+      <main className="mx-auto max-w-4xl px-6 py-10">
+        <nav className="mb-8 text-sm">
+          <Link
+            href="/"
+            className="text-[var(--primary)] underline-offset-4 hover:underline"
+          >
+            {t('public.home')}
+          </Link>
+        </nav>
+
+        <header className="mb-10">
+          <p className="text-sm text-[var(--muted-foreground)]">{t('public.tagLabel')}</p>
+          <h1 className="text-3xl font-bold tracking-tight">#{decodedTag}</h1>
+        </header>
+
+        <ul className="divide-y border-y">
+          {posts.map((post) => (
+            <li key={post.postId} className="py-4">
+              <Link
+                href={`/${post.slug}`}
+                className="group flex flex-col gap-1 sm:flex-row sm:items-baseline sm:gap-6"
+              >
+                {post.publishedAt && (
+                  <time
+                    dateTime={post.publishedAt}
+                    className="font-mono text-xs tracking-wide text-[var(--muted-foreground)] sm:w-32 sm:shrink-0"
+                  >
+                    {formatDate(post.publishedAt, settings.dateFormat, settings.timezone)}
+                  </time>
+                )}
+                <span className="flex-1 underline-offset-4 group-hover:underline">
+                  {post.title}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </main>
+
+      <SiteFooter
+        links={theme.values.footerLinks}
+        className="bg-[var(--secondary)]"
+        legend={
+          <div className="space-y-1">
+            {footerLegend && <p className="whitespace-pre-line">{footerLegend}</p>}
+            <p>
+              © {new Date().getFullYear()} {settings.site.name}
+            </p>
+          </div>
+        }
+      />
+    </>
+  )
+}

package/dist/templates/dads/tokens.css

@@ -0,0 +1,67 @@
+/* DADS theme tokens — Digital Agency Design System準拠.
+ *
+ * Pulls colors from the official `@digital-go-jp/tailwind-theme-plugin`
+ * (loaded in `_shared/app/globals.css`). The plugin extends Tailwind
+ * v4's theme with the DADS palette, which Tailwind exposes as
+ * `--color-<name>-<step>` CSS variables on `:root`. We bind them to
+ * the same `--primary` / `--background` / etc. variable names every
+ * other ampless theme uses, so SiteHeader / SiteFooter / shadcn
+ * components all light up with DADS colors automatically.
+ *
+ * This is the canonical plugin-backed integration — when DADS
+ * publishes a new palette version, bumping the plugin version is
+ * enough; we don't hardcode hex values here. The fallbacks after
+ * each `var(...)` are the DADS values from version 0.3.4 in case
+ * the plugin isn't loaded for some reason.
+ */
+
+[data-theme='dads'] {
+  --background: #ffffff;
+  --foreground: #1a1a1c;
+  --card: #ffffff;
+  --card-foreground: #1a1a1c;
+  --primary: var(--color-blue-900, #0017c1);
+  --primary-foreground: #ffffff;
+  --secondary: var(--color-blue-50, #e8f1fe);
+  --secondary-foreground: var(--color-blue-900, #0017c1);
+  --muted: #f5f5f5;
+  --muted-foreground: #595959;
+  --accent: var(--color-blue-50, #e8f1fe);
+  --accent-foreground: var(--color-blue-900, #0017c1);
+  --destructive: var(--color-red-900, #ce0000);
+  --destructive-foreground: #ffffff;
+  --border: #d9d9d9;
+  --input: #d9d9d9;
+  --ring: var(--color-blue-900, #0017c1);
+  --radius: 0.25rem;
+  /* DADS recommends Noto Sans JP for body text. The plugin sets
+   * fontFamily.sans to it; we surface that through our usual
+   * --ampless-body-font hook so SiteHeader / footer / prose pick it
+   * up consistently. */
+  --ampless-body-font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-theme='dads'] {
+    /* DADS doesn't ship an official dark palette as of v0.3.4; this
+     * is an inverted approximation. When DADS adds a dark variant,
+     * bind these to the corresponding plugin variables. */
+    --background: #1a1a1c;
+    --foreground: #f0f0f0;
+    --card: #232327;
+    --card-foreground: #f0f0f0;
+    --primary: var(--color-blue-300, #9db7f9);
+    --primary-foreground: #1a1a1c;
+    --secondary: #2c2f3a;
+    --secondary-foreground: #f0f0f0;
+    --muted: #28282c;
+    --muted-foreground: #b3b3b3;
+    --accent: #2c2f3a;
+    --accent-foreground: #f0f0f0;
+    --destructive: var(--color-red-700, #fa0000);
+    --destructive-foreground: #ffffff;
+    --border: #3a3a3f;
+    --input: #3a3a3f;
+    --ring: var(--color-blue-300, #9db7f9);
+  }
+}

package/dist/templates/docs/README.md

@@ -0,0 +1,27 @@
+# {{siteName}}
+
+Docs theme: sidebar-led documentation layout. The sidebar combines plain links with **tag-driven sections** — entering a URL like `tag:guide` in the sidebar nav field auto-expands to a list of every published post tagged "guide". Lets writers organize content by tag and have it appear in nav automatically.
+
+## Customizing
+
+In `/admin/sites/<siteId>/theme`:
+
+- **Sidebar navigation** — each row is `Label` + `URL`. The URL can be:
+  - a path (`/getting-started`)
+  - an external URL (`https://...`)
+  - a tag reference (`tag:tutorials`) → renders as a heading + list of tagged posts
+- Header navigation (top-level links)
+- Code font (system mono / JetBrains Mono / etc.)
+- Primary color, corner radius
+
+## Authoring tip
+
+Tag a post `guide` (in the post editor) and add a sidebar row with URL `tag:guide`. The sidebar will list that post automatically — no manual link editing every time you publish.
+
+## Getting started
+
+```bash
+npm install
+npx ampx sandbox
+npm run dev
+```