docs: theme diagrams and make shared content SDK-aware

docs/app/components/diagrams/arch-stack.tsx

@@ -1,12 +1,14 @@
 import { type CSSProperties, Fragment, type ReactNode } from "react";
+import { SdkBinding, SdkName, SdkSwap } from "@/components/sdk-text";
 
 // Layered architecture stack — exact port of the prototype's `.archstack` HTML
-// (semantic layers + PyO3/store boundaries as direct children).
+// (semantic layers + binding/store boundaries as direct children). The
+// user-facing layer adapts to the active SDK via the SDK-text atoms.
 
 type Kind = "py" | "rust" | "store" | "";
 
 interface Layer {
-  tag: string;
+  tag: ReactNode;
   /** Pill colour: `.ltag t-*`. */
   tagKind?: Kind;
   /** `.layer` modifier; defaults to `tagKind`. The prototype sometimes pairs a
@@ -68,13 +70,25 @@ export function ArchitectureStack() {
       }
       layers={[
         {
-          tag: "Python",
+          tag: <SdkName />,
           tagKind: "py",
           title: "User-facing API",
           body: (
             <>
-              <code>Queue</code>, <code>@task</code>, <code>.delay()</code>,
-              results, workflows, resources — the surface you write against.
+              <code>Queue</code>,{" "}
+              <SdkSwap
+                python={
+                  <>
+                    <code>@task</code>, <code>.delay()</code>
+                  </>
+                }
+                node={
+                  <>
+                    <code>.task()</code>, <code>.enqueue()</code>
+                  </>
+                }
+              />
+              , results, workflows, resources — the surface you write against.
             </>
           ),
           role: "what you write",
@@ -83,7 +97,12 @@ export function ArchitectureStack() {
           tag: "Rust",
           tagKind: "rust",
           title: "Engine",
-          body: "Scheduler, dispatcher, worker pool, rate limiter — Tokio runtime, OS-thread pool, near-zero Python overhead.",
+          body: (
+            <>
+              Scheduler, dispatcher, worker pool, rate limiter — Tokio runtime,
+              OS-thread pool, near-zero <SdkName /> overhead.
+            </>
+          ),
           role: "where the work runs",
         },
         {
@@ -97,7 +116,9 @@ export function ArchitectureStack() {
       bounds={[
         <>
           <span className="bdir">↓</span>
-          <span className="pyo3">PyO3 boundary</span>
+          <span className="pyo3">
+            <SdkBinding /> boundary
+          </span>
           <span className="bdir">↑</span>
         </>,
         <>
@@ -135,8 +156,19 @@ export function ResourcePipeline() {
             <>
               <code>ResourceRuntime</code> initializes resources at worker
               startup in topological order, then injects requested ones (via{" "}
-              <code>inject=</code> or <code>Inject["name"]</code>) as kwargs.
-              Task-scoped resources come from a semaphore pool.
+              <SdkSwap
+                python={
+                  <>
+                    <code>inject=</code> or <code>Inject["name"]</code>
+                  </>
+                }
+                node={
+                  <>
+                    <code>inject:</code> or <code>useResource()</code>
+                  </>
+                }
+              />
+              ). Task-scoped resources come from a semaphore pool.
             </>
           ),
         },

docs/app/components/diagrams/worker-fork.tsx

@@ -1,6 +1,8 @@
+import { SdkSwap } from "@/components/sdk-text";
+
 // Worker pool — exact port of the prototype's `.archstack` + `.fork-route` +
 // `.archfork` (scheduler routes by task type; sync OS-thread pool vs async pool).
-// `architecture/worker-pool.mdx`.
+// The per-runtime details adapt to the active SDK. `architecture/worker-pool.mdx`.
 export function WorkerDispatch() {
   return (
     <div className="archstack">
@@ -11,12 +13,18 @@ export function WorkerDispatch() {
           <div className="ld">
             Dequeues a job, applies rate limits, then routes it{" "}
             <b>by task type</b> — sync functions to the thread pool,{" "}
-            <code>async def</code> functions to the async runtime.
+            <SdkSwap
+              python={<code>async def</code>}
+              node={<code>async</code>}
+            />{" "}
+            functions to the async runtime.
           </div>
         </div>
         <span className="lrole">routes by task type</span>
       </div>
-      <div className="fork-route">sync def &nbsp;·&nbsp; async def</div>
+      <div className="fork-route">
+        <SdkSwap python="sync def · async def" node="sync · async" />
+      </div>
       <div className="archfork">
         <div className="forkcol">
           <div className="forktag">bounded mpsc · workers × 2</div>
@@ -25,9 +33,23 @@ export function WorkerDispatch() {
             <div className="lbody">
               <div className="lt">OS-thread workers</div>
               <div className="ld">
-                Each sync worker is a Rust <code>std::thread</code>. The GIL is
-                acquired per task via <code>Python::with_gil()</code> —
-                independent across workers.
+                <SdkSwap
+                  python={
+                    <>
+                      Each sync worker is a Rust <code>std::thread</code>. The
+                      GIL is acquired per task via{" "}
+                      <code>Python::with_gil()</code> — independent across
+                      workers.
+                    </>
+                  }
+                  node={
+                    <>
+                      Sync handlers run on an OS-thread pool owned by the Rust
+                      core — independent across workers, with no event loop to
+                      block.
+                    </>
+                  }
+                />
               </div>
             </div>
           </div>
@@ -37,11 +59,26 @@ export function WorkerDispatch() {
           <div className="layer py">
             <span className="ltag t-py">Async pool</span>
             <div className="lbody">
-              <div className="lt">NativeAsyncPool</div>
+              <div className="lt">
+                <SdkSwap python="NativeAsyncPool" node="Native async pool" />
+              </div>
               <div className="ld">
-                <code>async def</code> tasks are dispatched to an{" "}
-                <code>AsyncTaskExecutor</code> on a Python daemon thread;{" "}
-                <code>PyResultSender</code> bridges results back.
+                <SdkSwap
+                  python={
+                    <>
+                      <code>async def</code> tasks are dispatched to an{" "}
+                      <code>AsyncTaskExecutor</code> on a Python daemon thread;{" "}
+                      <code>PyResultSender</code> bridges results back.
+                    </>
+                  }
+                  node={
+                    <>
+                      <code>async</code> handlers run on a native async pool —
+                      no thread per job; each runs on your Node event loop and
+                      its promise is awaited back into the core.
+                    </>
+                  }
+                />
               </div>
             </div>
           </div>

docs/app/components/docs/sidebar.tsx

@@ -6,6 +6,7 @@ import {
   type NavNode,
   navForSdk,
   type Sdk,
+  sdkLabels,
   sdkSwitchTarget,
 } from "@/lib";
 
@@ -16,10 +17,9 @@ function containsHref(node: NavNode, current: string): boolean {
   );
 }
 
-const SDK_LABELS: { id: Sdk; label: string }[] = [
-  { id: "python", label: "Python" },
-  { id: "node", label: "Node.js" },
-];
+// Switcher options come from the SDK registry, so a new language appears here
+// automatically.
+const SDK_LABELS = sdkLabels();
 
 /** Global SDK toggle. Sets the shared store (flips inline variants + this nav);
  *  on an SDK-specific page it also navigates to the counterpart page, on a shared

docs/app/components/landing/footer.tsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router";
 import { useActiveSdk } from "@/hooks";
+import { VERSION } from "@/lib/version";
 
 type FootLink = {
   label: string;
@@ -95,7 +96,7 @@ export function Footer() {
       </div>
       <div className="foot-bottom">
         <span>© 2026 ByteVeda · taskito</span>
-        <span>MIT License · v0.16</span>
+        <span>MIT License · v{VERSION}</span>
       </div>
     </footer>
   );

docs/app/components/landing/hero.tsx

@@ -2,10 +2,9 @@ import { useState } from "react";
 import { Link } from "react-router";
 import { RawHtml } from "@/components/ui";
 import { useSdk } from "@/hooks";
+import { sdkProfile } from "@/lib";
 import { highlightPython, highlightTs } from "@/lib/highlight-lite";
-import { HERO_PANES } from "@/lib/landing-content";
-
-type Lang = "py" | "ts";
+import { HERO_COMING_SOON, HERO_PANES } from "@/lib/landing-content";
 
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
@@ -26,27 +25,26 @@ function CopyButton({ text }: { text: string }) {
 
 export function Hero() {
   const { sdk, setSdk } = useSdk();
-  // py/ts mirror the global SDK so the hero tab and the docs sidebar switch stay in sync.
-  const isNode = sdk === "node";
-  const lang: Lang = isNode ? "ts" : "py";
-  const active = HERO_PANES.find((p) => p.id === lang) ?? HERO_PANES[0];
+  // The selected snippet IS the global SDK — clicking a tab sets it, so the hero
+  // copy, the install/quickstart links, and the docs sidebar switch all follow.
+  const active = HERO_PANES.find((p) => p.sdk === sdk) ?? HERO_PANES[0];
+  const label = sdkProfile(active.sdk).label;
   const codeHtml =
-    lang === "ts" ? highlightTs(active.code) : highlightPython(active.code);
+    active.lang === "ts"
+      ? highlightTs(active.code)
+      : highlightPython(active.code);
 
   return (
     <section className="hero">
       <div className="left">
         <h1>
           One queue.
-          <span className="grad">
-            Built for {isNode ? "Node.js." : "Python."}
-          </span>
+          <span className="grad">Built for {label}.</span>
         </h1>
         <p className="sub">
-          A Rust-powered task queue with a first-class{" "}
-          <b>{isNode ? "Node.js" : "Python"}</b> SDK over one core and one store
-          — no broker. Start on <code>SQLite</code>, scale to{" "}
-          <code>Postgres</code>.
+          A Rust-powered task queue with a first-class <b>{label}</b> SDK over
+          one core and one store — no broker. Start on <code>SQLite</code>,
+          scale to <code>Postgres</code>.
         </p>
         <div className="btns">
           <Link className="btn pri" to={active.docHref}>
@@ -62,7 +60,7 @@ export function Hero() {
         <div className="metarow">
           <span>Brokerless</span>
           <span>Rust core</span>
-          <span>{isNode ? "Node.js SDK" : "Python SDK"}</span>
+          <span>{label} SDK</span>
           <span>DAG workflows</span>
         </div>
       </div>
@@ -86,18 +84,21 @@ export function Hero() {
           <div className="langtabs">
             {HERO_PANES.map((p) => (
               <button
-                key={p.id}
+                key={p.sdk}
                 type="button"
-                className={`langtab ${p.id === lang ? "active" : ""}`.trim()}
-                onClick={() => setSdk(p.id === "ts" ? "node" : "python")}
+                aria-pressed={p.sdk === sdk}
+                className={`langtab ${p.sdk === sdk ? "active" : ""}`.trim()}
+                onClick={() => setSdk(p.sdk)}
               >
-                {p.label}
+                {sdkProfile(p.sdk).label}
+              </button>
+            ))}
+            {HERO_COMING_SOON.map((name) => (
+              <button key={name} type="button" className="langtab" disabled>
+                {name}
+                <span className="tag soon">Soon</span>
               </button>
             ))}
-            <button type="button" className="langtab" disabled>
-              Java
-              <span className="tag soon">Soon</span>
-            </button>
             <CopyButton text={active.code} />
           </div>
           <div id="hero-panes">
@@ -119,15 +120,11 @@ export function Hero() {
         </div>
 
         <div className="hero-doclinks">
-          <Link
-            className="hero-doclink"
-            to="/python/getting-started/quickstart"
-          >
-            Read the Python quickstart →
-          </Link>
-          <Link className="hero-doclink" to="/node/getting-started/quickstart">
-            Read the Node.js quickstart →
-          </Link>
+          {HERO_PANES.map((p) => (
+            <Link key={p.sdk} className="hero-doclink" to={p.docHref}>
+              {p.docLabel} →
+            </Link>
+          ))}
         </div>
       </div>
     </section>

docs/app/components/landing/sections.tsx

@@ -154,7 +154,6 @@ export function HowItWorks() {
             ))}
           </div>
           <div className="returnlane">
-            <span className="rspark" />
             <span className="rlabel">result written back to the store</span>
           </div>
         </div>
@@ -397,6 +396,7 @@ function InstallPill({ cmd }: { cmd: string }) {
 }
 
 export function CTA() {
+  const sdk = useActiveSdk();
   return (
     <section className="section">
       <div className="cta-wrap reveal">
@@ -414,7 +414,7 @@ export function CTA() {
           <InstallPill cmd="pnpm add @byteveda/taskito" />
         </div>
         <div className="btns">
-          <Link className="btn pri" to="/python/getting-started/quickstart">
+          <Link className="btn pri" to={`/${sdk}/getting-started/quickstart`}>
             Start the quickstart →
           </Link>
           <Link className="btn sec" to="/resources/comparison">

docs/app/components/mdx/index.tsx

@@ -2,6 +2,7 @@ import type { MDXComponents } from "mdx/types";
 import type { ComponentProps } from "react";
 import { Link } from "react-router";
 import * as Diagrams from "@/components/diagrams";
+import { SdkBinding, SdkLang, SdkName, SdkSwap } from "@/components/sdk-text";
 import { Callout } from "./callout";
 import { Card, Cards } from "./card";
 import { CodeBlock } from "./code-block";
@@ -43,6 +44,10 @@ export const mdxComponents: MDXComponents = {
   CodeTabs,
   SdkOnly,
   SdkLink,
+  SdkName,
+  SdkLang,
+  SdkBinding,
+  SdkSwap,
   Card,
   Cards,
   ...Diagrams,

docs/app/components/mdx/sdk.tsx

@@ -9,8 +9,7 @@ import {
 } from "react";
 import { Link } from "react-router";
 import { type Sdk, useSdk } from "@/hooks";
-
-const LABELS: Record<Sdk, string> = { python: "Python", node: "Node.js" };
+import { SDK_PROFILES } from "@/lib";
 
 /** Show children only under one SDK. All variants ship in the HTML; the inactive
  *  one is hidden by CSS off `<html data-sdk>` — no flash, no hydration mismatch. */
@@ -87,7 +86,7 @@ export function CodeTabs({ children }: { children: ReactNode }) {
               onClick={() => setSdk(variant)}
               onKeyDown={(e) => onKeyDown(e, index)}
             >
-              {LABELS[variant]}
+              {SDK_PROFILES[variant].label}
             </button>
           );
         })}