dev-centr · cursor · Sep 9, 2026 · Sep 9, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -96,6 +96,7 @@ jobs:
           test -f .output/public/stack-advisor/index.html
           test -f .output/public/toolchain-browser/index.html
           test -f .output/public/toolchain-advisor/index.html
+          test -f .output/public/themed-svg-studio/index.html
 
       - name: Verify agent skills artifact
         run: |

diff --git a/app.config.ts b/app.config.ts
@@ -65,6 +65,7 @@ export default defineConfig({
         "/stack-advisor",
         "/toolchain-browser",
         "/toolchain-advisor",
+        "/themed-svg-studio",
         "/skills",
         "/templates",
         "/news",

diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc
@@ -3,6 +3,7 @@
 ** xref:explanation/news-and-changelog.adoc[News & changelog pipeline]
 ** xref:explanation/theme-reveal.adoc[Theme reveal]
 ** xref:explanation/stack-advisor.adoc[Stack Advisor]
+** xref:explanation/themed-svg-studio.adoc[Themed SVG Studio]
 ** xref:explanation/bootstrap-templates.adoc[Agent skills]
 ** xref:how-to/local-development.adoc[Local development]
 ** xref:help-and-support-plans.adoc[Help & support plans]

diff --git a/docs/modules/ROOT/pages/changelog-details/2026-09-09 - themed-svg-studio-site.adoc b/docs/modules/ROOT/pages/changelog-details/2026-09-09 - themed-svg-studio-site.adoc
@@ -0,0 +1,25 @@
+= 2026-09-09 — Themed SVG Studio site concept
+:navtitle: 2026-09-09 Themed SVG Studio
+:page-audience: Developers evaluating themed SVG workflows
+:page-usage-context: Understanding the public product concept
+:page-orig-author: Auto on behalf of Ryan Johnson
+:page-last-author: Auto on behalf of Ryan Johnson
+
+== Product catalog
+
+The Products catalog now includes **Themed SVG Studio** with its approved light/dark path mark. The entry opens a public concept route and identifies the product as tooling for semantic SVG theming.
+
+== Interactive workflow
+
+The `/themed-svg-studio` route demonstrates the intended sequence without pretending to be the desktop editor: preview an existing sample SVG, define semantic light and dark values, review presentation-property bindings, compare host-controlled, adaptive, and fixed output modes, inspect diagnostics, and read an export artifact summary.
+
+The sample's geometry is deliberately fixed. Interactive controls affect theme values and output behavior only, and the page links to the canonical `dev-centr/themed-svg-studio` repository for product implementation.
+
+== Delivery
+
+The route includes page metadata, responsive and keyboard-accessible controls, reduced-motion-safe styling inherited from the site, and a generated GitHub Pages SPA fallback.
+
+== Documented
+
+* xref:explanation/themed-svg-studio.adoc[Themed SVG Studio] — workflow, preview modes, and relationship to `@dev-centr/themed-svg` site diagrams.
+* xref:explanation/site-architecture.adoc[Site architecture] — `/themed-svg-studio` route table entry.
diff --git a/docs/modules/ROOT/pages/changelog.adoc b/docs/modules/ROOT/pages/changelog.adoc
@@ -2,6 +2,13 @@
 
 Timeline of notable documentation and site changes in the devcentr.org repository.
 
+== 2026-09-09 — Themed SVG Studio site concept
+
+* Products lists **Themed SVG Studio** with its approved light/dark path mark and links to a public `/themed-svg-studio` concept demo.
+* The demo covers semantic light/dark tokens, presentation bindings, host/adaptive/fixed preview modes, diagnostics, and export summary while leaving SVG geometry unchanged.
+* Antora maintainer guide: xref:explanation/themed-svg-studio.adoc[Themed SVG Studio].
+* See xref:changelog-details/2026-09-09 - themed-svg-studio-site.adoc[Detailed changelog].
+
 == 2026-09-08 — Themed PlayTime news diagrams
 
 * All twelve PlayTime diagrams retain adaptive public image URLs, preserve former artwork as fixed assets, and progressively upgrade to sanitized host SVGs from Scriptbook `9753437`.

diff --git a/docs/modules/ROOT/pages/explanation/site-architecture.adoc b/docs/modules/ROOT/pages/explanation/site-architecture.adoc
@@ -47,6 +47,9 @@ devcentr.org is a **static** SolidStart (Vinxi) application.
 
 | `/resting-lanczos`
 | Image resampling comparison demo. Access trail is Apps / Products / resting-lanczos; “Tooling · Image pipeline” is a topic tag, not a crumb.
+
+| `/themed-svg-studio`
+| Themed SVG Studio concept demo — semantic tokens, presentation bindings, host/adaptive/fixed preview modes. Access trail is Apps / Products / Themed SVG Studio. See xref:explanation/themed-svg-studio.adoc[Themed SVG Studio].
 |===
 
 Catalogue and nested article pages (`PageTrail`) show the access path as `Section / Child / Current`. Topic tags stay *below* that trail, in the eyebrow style. Outbound links (repo, docs) sit after the intro, not in the trail.

diff --git a/docs/modules/ROOT/pages/explanation/themed-svg-studio.adoc b/docs/modules/ROOT/pages/explanation/themed-svg-studio.adoc
@@ -0,0 +1,67 @@
+= Themed SVG Studio
+:navtitle: Themed SVG Studio
+:description: Public concept demo for semantic SVG theming on devcentr.org — tokens, bindings, and host/adaptive/fixed preview modes.
+:page-audience: Developers evaluating themed SVG workflows
+:page-usage-context: Understanding the public product concept
+:page-orig-author: Auto on behalf of Ryan Johnson
+:page-last-author: Auto on behalf of Ryan Johnson
+
+`/themed-svg-studio` is a **concept demo** for the desktop product at https://github.com/dev-centr/themed-svg-studio[dev-centr/themed-svg-studio].
+It shows the intended authoring workflow without editing paths or geometry.
+Export and desktop editing are not implemented on this site.
+
+The Products catalog lists **Themed SVG Studio** with its approved light/dark path mark (`public/apps/logos/themed-svg-studio.svg`).
+Access trail: Apps / Products / Themed SVG Studio.
+Topic tag: Tooling · SVG · Theming.
+
+== Workflow
+
+The page walks four steps that mirror the planned desktop editor:
+
+. **Define** — five semantic tokens (`diagram.color.canvas`, `surface`, `ink`, `accent`, `edge`) each with light and dark hex values.
+. **Bind** — presentation properties on fixed sample geometry map fills and strokes to those roles (no path edits).
+. **Review** — diagnostics confirm bindings, palette completeness, and export constraints.
+. **Export** — artifact summary names the output file, theme source, binding count, and notes that geometry is unchanged.
+
+Interactive controls affect theme values and preview behavior only.
+The sample diagram geometry is fixed in `src/routes/themed-svg-studio.tsx`.
+
+== Preview modes
+
+[cols="1,2",options="header"]
+|===
+| Mode | Behavior
+
+| **Host**
+| Uses site CSS variables (`--background`, `--card`, `--foreground`, `--primary`, `--muted-foreground`).
+Exported artifacts would keep host variables unresolved.
+
+| **Adaptive**
+| Embeds separate light and dark palettes; `prefers-color-scheme` (via the site appearance toggle) selects which palette renders.
+
+| **Fixed**
+| Single portable palette using the light values shown in the token table.
+|===
+
+Host and Adaptive previews follow the site light/dark toggle (`@kobalte/core` color mode).
+Fixed mode ignores the toggle and always shows light values.
+
+== Relationship to site diagrams
+
+News and architecture diagrams on devcentr.org use `@dev-centr/themed-svg` for progressive host/adaptive delivery (see xref:changelog-details/2026-09-08 - themed-playtime-news-diagrams.adoc[2026-09-08 themed PlayTime diagrams]).
+Themed SVG Studio is the **authoring** surface for that class of artifact — binding existing SVG presentation properties to semantic tokens before export.
+
+== Build and deploy
+
+* Page: `src/routes/themed-svg-studio.tsx`
+* Catalog entry: `src/lib/apps-catalog.ts` (`themed-svg-studio` product)
+* SPA fallback: `scripts/spa-fallback.mjs` copies `index.html` to `.output/public/themed-svg-studio/` for GitHub Pages client routing
+* Prerender: `app.config.ts` includes `/themed-svg-studio` in the static route list
+
+No sibling-repo checkout is required; the demo is self-contained in this repository.
+
+== See also
+
+* Product repository: https://github.com/dev-centr/themed-svg-studio
+* xref:explanation/site-architecture.adoc[Site architecture] — route table and SPA fallback pipeline
+* xref:changelog-details/2026-09-09 - themed-svg-studio-site.adoc[2026-09-09 changelog entry]
diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc
@@ -16,7 +16,7 @@ https://devcentr.org
 * **News** (`/news`, SEO alias `/blog`) — Narrative AsciiDoc posts from `content/news/`.
 * **Changelog** (`/changelog`) — Mirror index of Antora changelogs from sibling repos (built at CI time).
 * **Community** — Help hub (`/help`), status probes (`/status`), and toolchain surfaces.
-* **Public tools** — Stack Advisor (`/stack-advisor`; `/toolchain-browser` and `/toolchain-advisor` redirect), agent skills (`/skills`), resting-lanczos demo (`/resting-lanczos`), and apps catalogue (`/apps`).
+* **Public tools** — Stack Advisor (`/stack-advisor`; `/toolchain-browser` and `/toolchain-advisor` redirect), agent skills (`/skills`), resting-lanczos demo (`/resting-lanczos`), Themed SVG Studio concept (`/themed-svg-studio`), and apps catalogue (`/apps`).
 
 == Documentation map
 
@@ -36,6 +36,9 @@ https://devcentr.org
 | SDL catalog sync and `/stack-advisor`
 | xref:explanation/stack-advisor.adoc[Stack Advisor]
 
+| Semantic SVG theming concept (`/themed-svg-studio`)
+| xref:explanation/themed-svg-studio.adoc[Themed SVG Studio]
+
 | Agent skills catalog (`/skills`; `/templates` redirects)
 | xref:explanation/bootstrap-templates.adoc[Agent skills]
 

diff --git a/public/apps/logos/themed-svg-studio.svg b/public/apps/logos/themed-svg-studio.svg
diff --git a/scripts/spa-fallback.mjs b/scripts/spa-fallback.mjs
@@ -18,6 +18,7 @@ function ensureSpa(dir) {
 ensureSpa(join(pub, "stack-advisor"));
 ensureSpa(join(pub, "toolchain-browser"));
 ensureSpa(join(pub, "toolchain-advisor"));
+ensureSpa(join(pub, "themed-svg-studio"));
 ensureSpa(join(pub, "skills"));
 ensureSpa(join(pub, "templates"));
 ensureSpa(join(pub, "news"));

diff --git a/src/lib/apps-catalog.ts b/src/lib/apps-catalog.ts
@@ -97,6 +97,15 @@ export const products: CatalogItem[] = [
     href: "/resting-lanczos",
     tags: "Tooling · Image pipeline",
   },
+  {
+    id: "themed-svg-studio",
+    name: "Themed SVG Studio",
+    summary:
+      "Desktop-editor concept for binding existing SVG presentation properties to semantic light, dark, and host-controlled theme tokens.",
+    href: "/themed-svg-studio",
+    logo: "/apps/logos/themed-svg-studio.svg",
+    tags: "Tooling · SVG · Theming",
+  },
   {
     id: "stack-advisor",
     name: "Stack Advisor",