feat(docs): framework picker for per-framework snippets

.agents/skills/create-adapter/SKILL.md

@@ -158,7 +158,7 @@ Adapter docs live in three categories under `apps/docs/content/4.integrate/adapt
 
 Create `{NN}.{name}.md` in the right category with the next available number. Use the Loki page (`hybrid/01.loki.md`) as a reference for frontmatter, tone, and sections. Key sections: intro, quick setup, configuration (env vars table + priority), advanced usage, querying in the target service, troubleshooting, direct API usage, next steps.
 
-**Important: multi-framework examples.** The Quick Start section must include a `::code-group` with tabs for the supported frameworks (Nuxt/Nitro, Hono, Express, Fastify, Elysia, NestJS, Standalone). Do not only show Nitro examples.
+**Important: multi-framework examples.** The Quick Start section must include a `::framework-tabs` group with one fence per supported framework (Nuxt, Nitro, Next.js, SvelteKit, TanStack Start, React Router, Hono, Express, Fastify, Elysia, NestJS, oRPC, Cloudflare Workers, Standalone), the framework in the bracket label. Copy the Axiom page's group and swap the drain factory. Do not only show Nitro examples, and put nothing but fences inside the group.
 
 ## Step 7: Update Adapters Overview Page
 

.agents/skills/write-evlog-content/references/rules/docs.md

@@ -103,7 +103,7 @@ Why: a reader who does not know evlog decides on the first screen whether the pa
 
 **D-14 · One path in the core, every knob in one place** · `standard`
 
-Rule: the quick start is one sequence of steps. Where a step differs by framework, it is one `::code-group` with every supported framework as an equal tab, in a stable order (Nuxt / Nitro, Next.js, Hono, Express, Standalone); no framework is the lead and none is folded away. Options, defaults, counters and env vars live on one reference page per feature, tabbed by object with `::tabs`, and the prose pages link to it once instead of carrying their own option tables.
+Rule: the quick start is one sequence of steps. Where a step differs by framework, it is one `::framework-tabs` with every supported framework as an equal tab, in a stable order (Nuxt, Nitro, Next.js, SvelteKit, TanStack Start, React Router, Hono, Express, Fastify, Elysia, NestJS, oRPC, Cloudflare Workers, Standalone); no framework is the lead and none is folded away. Options, defaults, counters and env vars live on one reference page per feature, tabbed by object with `::tabs`, and the prose pages link to it once instead of carrying their own option tables.
 Why: evlog does not know which framework a reader runs, so a page that leads with one tells the others the feature is not for them. A table repeated across three pages drifts across three pages.
 
 ---

.agents/skills/write-evlog-content/references/surfaces/docs.md

@@ -48,7 +48,7 @@ The contract follows how the integration is built, so check the tier before flag
 ## Code blocks
 
 - Label the file: ` ```typescript [server/api/checkout.post.ts] `
-- `::code-group` when the same task differs by framework or runtime.
+- `::framework-tabs` when the same task differs by framework: one fence per framework, the framework in the bracket label, the file path after the brackets as fence meta (```` ```ts [Hono] src/index.ts ````), never as a body comment. `::code-group` for everything else (package managers, input/output, before/after).
 - Imports are exact and public: `evlog`, `evlog/toolkit`, `evlog/http`. Never `evlog/shared`, never `evlog/browser`.
 - The sample runs. If you cannot verify it, verify it against `packages/evlog/src` or `examples/` before shipping the page.
 

apps/docs/AGENTS.md

@@ -11,6 +11,14 @@ Nuxt UI ships the components this site renders inside markdown. Use them as the
 - **Style a component through its own `ui` prop or `app.config.ts`**, never by wrapping it in a bordered box. An accordion already draws its dividers; a parent that adds a border and a background is fighting the theme and will drift from it.
 - **A component carries meaning, not texture.** An accordion holds answers the reader chooses between. Do not fold prose that already reads fine into a component, and never restate on a page something the same page says a few paragraphs above.
 
+## Framework tabs
+
+A group of snippets keyed by framework uses `::framework-tabs`, not `::code-group`. Same body: one fence per framework, the framework in the bracket label, the file path after the brackets as fence meta: ```` ```ts [Nuxt] server/plugins/evlog-drain.ts ````. The path renders top-left of the header with its file-type icon, exactly like a plain fence header; the picker sits at the right edge. Never repeat the path as a `// path` comment inside the body. A path with `[` or `{` in it (`routes/[id].ts`) breaks MDC's fence parser, so leave it out of the meta and name the file in the prose. Nuxt and Nitro are two fences, and their bodies differ: Nuxt keeps Nitro v2's auto-imports (`defineNitroPlugin`, `defineEventHandler`, `useLogger` from `evlog`); a `[Nitro]` tab is Nitro v3 (`definePlugin` from `nitro`, `defineHandler` from `nitro/h3`, `useLogger` from `evlog/nitro/v3`). `test/framework-tabs.test.ts` fails a Nitro tab written the v2 way. The component (`app/components/content/FrameworkTabs.vue`) renders a single picker, not a tab strip, so a group can hold every integration without wrapping. It resolves each label through `app/utils/frameworks.ts` for the colour logo. Every tab is in the prerendered HTML; the reader's choice is a cookie (`useFramework`) that `plugins/framework-choice.ts` stamps on `<html data-framework>` before first paint, and CSS generated from the registry shows the matching tab, header and trigger. Vue state only drives the menu after mount, so hydration never sees markup that depends on the cookie. Pages are static (`x-vercel-cache: HIT`); never make server rendering depend on a cookie here. A label naming no framework still renders, without a logo, and viewing it does not change the site-wide choice. A single fence headed by a framework name (`[Nuxt (auto-imported)]`) goes through the same registry in `app/components/prose/Pre.vue`. New integration: add it to the registry with its `logos:` mark, or a colour SVG in `app/assets/icons/` when the collection lacks one. Never tint a monochrome icon to fake a brand colour.
+
+Nothing else goes inside the group. A `::callout` between two fences closes the group at its own `::` and the fences after it fall out as loose blocks.
+
+`::code-group` stays for everything else: package managers, input/output pairs, before/after.
+
 ## Structured data
 
 JSON-LD carries the facts that are **not** already in the page text: the license, the price, the application category. Never restate the page's own prose in it. Copy is crawlable where it is written, so a second copy in a `.vue` file buys nothing and drifts.

apps/docs/app/app.config.ts

@@ -74,18 +74,6 @@ export default defineAppConfig({
           base: 'whitespace-pre wrap-normal',
         },
       },
-      codeIcon: {
-        'nuxt': 'i-vscode-icons-file-type-nuxt',
-        'nuxt / nitro': 'i-vscode-icons-file-type-nuxt',
-        'next.js': 'i-simple-icons-nextdotjs',
-        'express': 'i-simple-icons-express',
-        'hono': 'i-simple-icons-hono',
-        'fastify': 'i-simple-icons-fastify',
-        'elysia': 'i-custom:elysia',
-        'nestjs': 'i-simple-icons-nestjs',
-        'standalone': 'i-lucide-box',
-        'nitro': 'i-custom:nitro',
-      },
     },
     button: {
       slots: {