docs-i18n 0.10.0 → 0.11.0

package/admin/server/services/d1-status.ts

@@ -0,0 +1,282 @@
+/**
+ * D1-backed status service for CF Workers deployment.
+ *
+ * Queries the same sources/source_files/translations tables as the local
+ * TranslationCache, but via D1 instead of better-sqlite3.
+ *
+ * This is read-only — the admin dashboard on CF Workers can view
+ * translation status but cannot run translate jobs or modify the cache.
+ */
+
+function getD1(): D1Database | null {
+  try {
+    return (globalThis as any).__D1_DB ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function requireD1(): D1Database {
+  const db = getD1();
+  if (!db) throw new Error('D1 database not available');
+  return db;
+}
+
+export async function d1GetVersions(): Promise<string[]> {
+  const db = requireD1();
+  const result = await db
+    .prepare('SELECT DISTINCT version FROM source_files ORDER BY version')
+    .all<{ version: string }>();
+  return result.results.map((r) => r.version);
+}
+
+export async function d1GetLangs(): Promise<string[]> {
+  const db = requireD1();
+  const result = await db
+    .prepare('SELECT DISTINCT lang FROM translations ORDER BY lang')
+    .all<{ lang: string }>();
+  return result.results.map((r) => r.lang);
+}
+
+export async function d1SectionStats(
+  version: string,
+  lang: string,
+): Promise<
+  {
+    section: string;
+    totalFiles: number;
+    translatedFiles: number;
+    totalNodes: number;
+    translatedNodes: number;
+  }[]
+> {
+  const db = requireD1();
+  const result = await db
+    .prepare(
+      `
+      WITH file_coverage AS (
+        SELECT
+          sf.file,
+          CASE
+            WHEN sf.file LIKE 'docs/%' THEN 'docs'
+            WHEN sf.file LIKE 'blog/%' THEN 'blog'
+            WHEN sf.file LIKE 'learn/%' THEN 'learn'
+            ELSE 'other'
+          END as section,
+          COUNT(DISTINCT sf.key) as total_nodes,
+          COUNT(DISTINCT t.key) as translated_nodes
+        FROM source_files sf
+        LEFT JOIN translations t ON t.key = sf.key AND t.lang = ?
+        WHERE sf.version = ?
+        GROUP BY sf.file
+      )
+      SELECT
+        section,
+        COUNT(*) as totalFiles,
+        SUM(CASE WHEN translated_nodes = total_nodes THEN 1 ELSE 0 END) as translatedFiles,
+        SUM(total_nodes) as totalNodes,
+        SUM(translated_nodes) as translatedNodes
+      FROM file_coverage
+      GROUP BY section
+      ORDER BY section
+    `,
+    )
+    .bind(lang, version)
+    .all<{
+      section: string;
+      totalFiles: number;
+      translatedFiles: number;
+      totalNodes: number;
+      translatedNodes: number;
+    }>();
+  return result.results;
+}
+
+export async function d1SourceCount(version: string): Promise<number> {
+  const db = requireD1();
+  const result = await db
+    .prepare(
+      'SELECT COUNT(DISTINCT key) as count FROM source_files WHERE version = ?',
+    )
+    .bind(version)
+    .first<{ count: number }>();
+  return result?.count ?? 0;
+}
+
+export async function d1FileCoverage(
+  version: string,
+  lang: string,
+): Promise<{ file: string; total: number; translated: number }[]> {
+  const db = requireD1();
+  const result = await db
+    .prepare(
+      `
+      SELECT
+        sf.file,
+        COUNT(DISTINCT sf.key) as total,
+        COUNT(DISTINCT t.key) as translated
+      FROM source_files sf
+      LEFT JOIN translations t ON t.key = sf.key AND t.lang = ?
+      WHERE sf.version = ?
+      GROUP BY sf.file
+      ORDER BY sf.file
+    `,
+    )
+    .bind(lang, version)
+    .all<{ file: string; total: number; translated: number }>();
+  return result.results;
+}
+
+export async function d1FileDetail(
+  version: string,
+  lang: string,
+  file: string,
+): Promise<
+  {
+    key: string;
+    source: string;
+    type: string;
+    translation: string | null;
+    line: number;
+  }[]
+> {
+  const db = requireD1();
+  const result = await db
+    .prepare(
+      `
+      SELECT
+        s.key,
+        s.text as source,
+        s.type,
+        t.value as translation,
+        sf.line
+      FROM source_files sf
+      JOIN sources s ON s.key = sf.key
+      LEFT JOIN translations t ON t.key = sf.key AND t.lang = ?
+      WHERE sf.version = ? AND sf.file = ?
+      ORDER BY sf.line
+    `,
+    )
+    .bind(lang, version, file)
+    .all<{
+      key: string;
+      source: string;
+      type: string;
+      translation: string | null;
+      line: number;
+    }>();
+  return result.results;
+}
+
+export async function d1GetTranslation(
+  lang: string,
+  key: string,
+): Promise<string | null> {
+  const db = requireD1();
+  const result = await db
+    .prepare('SELECT value FROM translations WHERE lang = ? AND key = ?')
+    .bind(lang, key)
+    .first<{ value: string }>();
+  return result?.value ?? null;
+}
+
+export async function d1DeleteTranslation(
+  lang: string,
+  key: string,
+): Promise<boolean> {
+  const db = requireD1();
+  const result = await db
+    .prepare('DELETE FROM translations WHERE lang = ? AND key = ?')
+    .bind(lang, key)
+    .run();
+  return (result.meta?.changes ?? 0) > 0;
+}
+
+export async function d1GetOverview(
+  versions: string[],
+  langs: string[],
+): Promise<
+  Record<
+    string,
+    {
+      enFileCount: number;
+      langs: Record<
+        string,
+        {
+          sections: Record<string, any>;
+          totalFiles: number;
+          translatedFiles: number;
+          totalNodes: number;
+          translatedNodes: number;
+        }
+      >;
+    }
+  >
+> {
+  const db = requireD1();
+  const result: Record<string, any> = {};
+
+  for (const version of versions) {
+    // Count unique files for this version
+    const fileCountResult = await db
+      .prepare(
+        'SELECT COUNT(DISTINCT file) as count FROM source_files WHERE version = ?',
+      )
+      .bind(version)
+      .first<{ count: number }>();
+    const enFileCount = fileCountResult?.count ?? 0;
+
+    const langStats: Record<string, any> = {};
+    for (const lang of langs) {
+      const sections = await d1SectionStats(version, lang);
+      let totalFiles = 0,
+        translatedFiles = 0,
+        totalNodes = 0,
+        translatedNodes = 0;
+      const sectionMap: Record<string, any> = {};
+      for (const s of sections) {
+        sectionMap[s.section] = s;
+        totalFiles += s.totalFiles;
+        translatedFiles += s.translatedFiles;
+        totalNodes += s.totalNodes;
+        translatedNodes += s.translatedNodes;
+      }
+      langStats[lang] = {
+        sections: sectionMap,
+        totalFiles,
+        translatedFiles,
+        totalNodes,
+        translatedNodes,
+      };
+    }
+    result[version] = { enFileCount, langs: langStats };
+  }
+
+  return result;
+}
+
+/**
+ * Get file blocks from D1 — returns source nodes with their translations,
+ * in line order. Note: without filesystem access, we can only return
+ * translatable blocks (no gap/whitespace blocks between them).
+ */
+export async function d1GetFileBlocks(
+  version: string,
+  lang: string,
+  file: string,
+): Promise<
+  {
+    md5: string | null;
+    type: string;
+    source: string;
+    translation: string | null;
+  }[]
+> {
+  const detail = await d1FileDetail(version, lang, file);
+  return detail.map((row) => ({
+    md5: row.key,
+    type: row.type,
+    source: row.source,
+    translation: row.translation,
+  }));
+}

package/admin/vite.config.ts

@@ -3,24 +3,38 @@ import { defineConfig } from 'vite';
 import { tanstackStart } from '@tanstack/react-start/plugin/vite';
 import react from '@vitejs/plugin-react';
 
+// CF Workers deploy mode: DOCS_I18N_CF=1 enables @cloudflare/vite-plugin
+const isCfBuild = process.env.DOCS_I18N_CF === '1';
+
+const plugins: any[] = [
+  tanstackStart({
+    srcDirectory: 'app',
+  }),
+  react(),
+];
+
+// Add Cloudflare plugin for CF Workers builds
+if (isCfBuild) {
+  const { cloudflare } = await import('@cloudflare/vite-plugin');
+  plugins.unshift(cloudflare({ viteEnvironment: { name: 'ssr' } }));
+}
+
 export default defineConfig({
-  plugins: [
-    tanstackStart({
-      srcDirectory: 'app',
-    }),
-    react(),
-  ],
+  plugins,
   // Bundle all deps into server build so it can run without node_modules
-  environments: {
-    ssr: {
-      build: {
-        rollupOptions: {
-          external: ['node:*'],
+  // (Only for non-CF builds; CF plugin manages its own SSR environment)
+  ...(!isCfBuild && {
+    environments: {
+      ssr: {
+        build: {
+          rollupOptions: {
+            external: [/^node:/, 'better-sqlite3'],
+          },
+        },
+        resolve: {
+          noExternal: true,
         },
-      },
-      resolve: {
-        noExternal: true,
       },
     },
-  },
+  }),
 });

package/admin/wrangler.jsonc

@@ -0,0 +1,16 @@
+{
+  "name": "docs-i18n-admin",
+  "compatibility_date": "2025-01-01",
+  "compatibility_flags": ["nodejs_compat_v2"],
+  "main": "./app/worker.ts",
+  "assets": {
+    "directory": "dist/client"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "docs-i18n-db",
+      "database_id": "597ff8e0-36fd-4bd5-a3fd-8f9e5bd14662"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs-i18n",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Universal documentation translation engine — parse, translate, cache, assemble, manage.",
   "type": "module",
   "bin": {

package/template/content/docs-i18n/en/cli.md

@@ -226,7 +226,7 @@ docs-i18n site [subcommand] [options]
 
 | Subcommand | Description |
 | --- | --- |
-| `dev` (default) | Start the Vite dev server with hot reload |
+| `dev` (default) | Start the site server (pre-built or Vite dev) |
 | `build` | Build the site for production |
 | `upload` | Upload content and translations to Cloudflare D1 |
 | `deploy` | Deploy to Cloudflare Workers |
@@ -236,16 +236,20 @@ docs-i18n site [subcommand] [options]
 | Flag | Default | Description |
 | --- | --- | --- |
 | `--port <n>` | 3000 | Port for the dev server |
+| `--custom` | false | Force Vite dev mode (skip pre-built server) |
 | `--db <name>` | `docs-i18n-db` | D1 database name (for `upload`) |
 
 **Examples:**
 
 ```bash
-# Start dev server
+# Start site (uses pre-built server for instant startup)
 docs-i18n site
 
 # Start on custom port
-docs-i18n site dev --port 4000
+docs-i18n site --port 4000
+
+# Force Vite dev mode (HMR, custom components)
+docs-i18n site --custom
 
 # Build for production
 docs-i18n site build
@@ -259,9 +263,9 @@ docs-i18n site deploy
 
 **How it works:**
 
-The `site` command does not require a `docs-i18n.config.ts`. It reads the `site.config.ts` file from your project root to configure the documentation site (project names, colors, locales, etc.).
+The `site` command reads `site.config.ts` from your project root to configure the documentation site (project names, colors, locales, etc.).
 
-On first run, the template's dependencies are automatically installed. The dev server uses Vite with the consumer's `site.config.ts` aliased into the template for customization.
+By default, the site starts instantly using the pre-built Node.js server (no `npm install` needed). The pre-built server uses `jiti` to load your `site.config.ts` at runtime. Use `--custom` to fall back to Vite dev mode with hot reload when you need custom React components or live editing.
 
 For non-English languages, the site automatically loads translations from the `.cache/translations.db` SQLite cache and assembles them at runtime.
 

package/template/content/docs-i18n/en/deployment.md

@@ -107,22 +107,31 @@ jobs:
 │  Development (local)                                      │
 │                                                          │
 │  docs-i18n admin ──→ Pre-built Node.js server (port 3456)│
-│  docs-i18n site  ──→ Vite dev server (port 3000)         │
+│  docs-i18n site  ──→ Pre-built Node.js server (port 3000)│
+│  docs-i18n site --custom ──→ Vite dev server (port 3000) │
 │                      ↕ reads content/ + .cache/           │
 └──────────────────────────────────────────────────────────┘
 
 ┌──────────────────────────────────────────────────────────┐
 │  Production (Cloudflare Workers)                          │
 │                                                          │
-│  docs-i18n site build ──→ .output/                       │
-│  docs-i18n site upload ──→ D1 (translations)             │
-│  docs-i18n site deploy ──→ CF Workers (SSR)              │
+│  docs-i18n site upload ──→ D1 (content + translations)   │
+│  DOCS_I18N_CF=1 vite build ──→ CF Workers bundle         │
+│  wrangler deploy ──→ CF Workers (SSR + D1)               │
 │                                                          │
-│  Request → Worker → fetch EN content → D1 translate      │
-│                   → SSR render → response                │
+│  Request → Worker → D1 content → SSR render → response   │
+│                     CF Assets serves static files         │
 └──────────────────────────────────────────────────────────┘
 ```
 
+### Site startup modes
+
+| Mode | Command | Speed | Use case |
+| --- | --- | --- | --- |
+| Pre-built | `docs-i18n site` | Instant (<1s) | Default for local dev, reads filesystem |
+| Custom/dev | `docs-i18n site --custom` | ~3s | When you need Vite HMR or custom components |
+| CF Workers | `DOCS_I18N_CF=1 vite build` + `wrangler deploy` | Production | SSR on the edge with D1 |
+
 ## Admin Dashboard
 
 The admin dashboard is pre-built and requires no additional dependencies. It runs as a local Node.js server.
@@ -135,88 +144,96 @@ npx docs-i18n admin --port 4000
 
 It reads your `docs-i18n.config.ts` to discover projects, versions, and languages.
 
-## Runtime Translation with D1
+## Deploying to Cloudflare Workers
 
-For SSR sites that fetch markdown at runtime (e.g., TanStack Start on Cloudflare Workers), docs-i18n provides a lightweight runtime translator that queries Cloudflare D1 for cached translations.
+The documentation site can be deployed to Cloudflare Workers for production SSR with edge performance. Content is served from D1, static assets from CF Assets.
 
-### How it works
+### Step-by-step deployment
 
-The `createTranslator` function from `docs-i18n/serve` creates a translator instance. When `translate()` is called:
+#### 1. Create a D1 database
 
-1. The markdown is parsed into AST nodes using the same parser as the CLI.
-2. Translatable nodes' MD5 keys are collected.
-3. A batch query is sent to D1 to look up all translations for the given language.
-4. The content is reassembled: translated nodes use the D1 cache value, untranslated nodes fall back to the original English text.
-
-### Setup
+```bash
+wrangler d1 create docs-i18n-db
+```
 
-#### 1. Export translations to D1
+Note the `database_id` from the output.
+
+#### 2. Create `wrangler.jsonc` in your project root
+
+```jsonc
+{
+  "name": "my-docs-site",
+  "compatibility_date": "2025-01-01",
+  "compatibility_flags": ["nodejs_compat_v2"],
+  "main": "./app/worker.ts",
+  "assets": {
+    "directory": "dist/client"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "docs-i18n-db",
+      "database_id": "your-database-id-here"
+    }
+  ]
+}
+```
 
-First, translate your content using the CLI as normal. Then export the SQLite cache to D1. You can use Wrangler to create a D1 database and import the translations:
+#### 3. Upload content to D1
 
 ```bash
-# Create a D1 database
-wrangler d1 create docs-translations
+docs-i18n site upload --db docs-i18n-db
+```
 
-# Export the translations table from your local SQLite
-sqlite3 .cache/translations.db ".dump translations" > translations.sql
+This walks your `content/` directory and inserts all markdown files + config into the D1 database.
 
-# Import into D1
-wrangler d1 execute docs-translations --file=translations.sql
+#### 4. Build for CF Workers
+
+```bash
+DOCS_I18N_CF=1 docs-i18n site build
 ```
 
-Make sure the D1 database has the same `translations` table schema:
-
-```sql
-CREATE TABLE IF NOT EXISTS translations (
-  lang       TEXT NOT NULL,
-  key        TEXT NOT NULL,
-  value      TEXT NOT NULL,
-  created_at INTEGER NOT NULL DEFAULT (unixepoch()),
-  updated_at INTEGER NOT NULL DEFAULT (unixepoch()),
-  PRIMARY KEY (lang, key)
-);
+The `DOCS_I18N_CF=1` flag enables the `@cloudflare/vite-plugin`, producing a CF Workers-compatible bundle instead of a Node.js one.
+
+#### 5. Deploy
+
+```bash
+wrangler deploy
 ```
 
-#### 2. Use the translator in your Worker
+Your site is now live on `https://your-worker.workers.dev`.
 
-```ts
-import { createTranslator } from 'docs-i18n/serve';
+### How it works
 
-const translator = createTranslator();
+- **Worker entry** (`app/worker.ts`): Receives requests, injects the D1 binding into `globalThis.__D1_DB`, then delegates to TanStack Start's server entry for SSR.
+- **Content loading**: The server auto-detects D1 via `globalThis.__D1_DB`. When available, it uses `createD1Loader` instead of the filesystem loader.
+- **Static assets**: CSS, JS, fonts, and images are served directly by CF Assets from `dist/client/`.
+- **SSR**: Full server-side rendering with streamed HTML responses. The markdown rendering uses `dangerouslySetInnerHTML` as a fallback on CF Workers (since `html-react-parser`'s DOM-based parser isn't available), with full client-side hydration.
 
-// In your request handler (e.g., TanStack Start server function):
-export async function getTranslatedDoc(
-  repo: string,
-  branch: string,
-  filePath: string,
-  lang: string,
-  env: { DB: D1Database },
-) {
-  // Fetch the English markdown from GitHub
-  const enMarkdown = await fetchFromGitHub(repo, branch, filePath);
+### Performance
 
-  // If the requested language is English, return as-is
-  if (lang === 'en') return enMarkdown;
+- D1 content queries typically complete in <10ms.
+- Worker startup time is ~15-20ms (cold start).
+- Static assets are served from CF's edge CDN with long cache headers.
+- SSR responses include full HTML content for SEO and fast initial render.
 
-  // Translate using D1 cache
-  const translated = await translator.translate(enMarkdown, lang, env.DB);
-  return translated;
-}
-```
+## Runtime Translation with D1
 
-#### 3. Bind D1 in wrangler.toml
+For non-English content, docs-i18n provides runtime translation assembly. The site loads English source from D1, then assembles translated content by looking up cached translations.
 
-```toml
-[[d1_databases]]
-binding = "DB"
-database_name = "docs-translations"
-database_id = "your-database-id"
-```
+### How it works
+
+1. The English markdown is loaded from the D1 `content` table.
+2. For non-English requests, the `assemble()` function from `docs-i18n` parses the markdown into nodes and looks up translations by MD5 key in the `translations` table.
+3. Translated nodes use the cached value; untranslated nodes fall back to the original English text.
+4. The assembled content is rendered via SSR.
+
+### Uploading translations
 
-### Performance considerations
+After running `docs-i18n translate` locally, upload the translation cache to D1:
+
+```bash
+docs-i18n site upload --db docs-i18n-db
+```
 
-- The translator uses a single batch query to D1, so latency scales with the number of translatable nodes (typically under 50ms for a standard documentation page).
-- English content (`lang === 'en'`) short-circuits immediately without parsing or querying.
-- The parser runs on every request since the English source is fetched at runtime. For heavy traffic, consider caching the translated output at the edge.
-- Untranslated nodes gracefully fall back to English, so partial translations work without errors.
+This uploads both content files and the translation cache (sources + translations tables).

package/template/dist/client/assets/{Doc-CbmLeLjl.js → Doc-BKO69_nz.js}

@@ -1 +1 @@
-import{z as C,o as E,j as e,r as l,s as W,t as A}from"./main-Csj9i19C.js";import{u as S,a as L,b as T}from"./DocsLayout-ERG7nrAc.js";import{B as O,r as U,F as $,M as V,a as _}from"./MarkdownHeadingContext-6I862CKH.js";const G=C("FoldHorizontal",[["path",{d:"M2 12h6",key:"1wqiqv"}],["path",{d:"M22 12h-6",key:"1eg9hc"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 9-3 3 3 3",key:"12ol22"}],["path",{d:"m5 15 3-3-3-3",key:"1kdhjc"}]]);const J=C("UnfoldHorizontal",[["path",{d:"M16 12h6",key:"15xry1"}],["path",{d:"M8 12H2",key:"1jqql6"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 15 3-3-3-3",key:"wjy7rq"}],["path",{d:"m5 9-3 3 3 3",key:"j64kie"}]]);function K(i,n){for(const t of i.sections){for(const r of t.children)if(r.to===n)return t.label;if(t.frameworks){for(const r of t.frameworks)for(const o of r.children)if(o.to===n)return t.label}}return null}function P({config:i,headings:n}){const{_splat:t,framework:r}=E({strict:!1}),o=r?`framework/${r}/${t}`:t,h=o?K(i,o):null;return h?e.jsx(O,{section:h,headings:n,tocHiddenBreakpoint:"lg"}):null}function ee({title:i,content:n,repo:t,branch:r,filePath:o,shouldRenderToc:h=!0,colorFrom:H,colorTo:N,textColor:q,config:w,footer:B,framework:g,isFallback:D=!1,locale:y}){const{headings:u,markup:R}=l.useMemo(()=>U(n),[n]),{framework:v}=E({strict:!1}),j=S(),M=l.useMemo(()=>{const s=g||v||j.currentFramework||"react";return typeof s=="string"?s.toLowerCase():s},[g,v,j.currentFramework]),f=h&&u.length>1,b=l.useRef(null),[z,I]=l.useState([]),m=l.useRef({});let c=!1,k;try{const s=L();c=s.isFullWidth,k=s.setIsFullWidth}catch{}return l.useEffect(()=>{const s=x=>{m.current=x.reduce((a,d)=>(a[d.target.id]=d,a),m.current);const p=[];Object.keys(m.current).forEach(a=>{const d=m.current[a];d.isIntersecting&&p.push(d)}),p.length>=1&&I(p.map(a=>a.target.id))},F=new IntersectionObserver(s,{rootMargin:"0px",threshold:.2});return Array.from(b.current?.querySelectorAll("h2[id], h3[id], h4[id], h5[id], h6[id]")??[]).forEach(x=>F.observe(x)),()=>F.disconnect()},[u]),e.jsxs("div",{className:"flex-1 min-h-0 flex flex-col pt-4 lg:pt-6 xl:pt-8",children:[D&&y&&e.jsx($,{locale:y}),e.jsxs("div",{className:A("w-full flex mx-auto max-w-[768px]",(f||c)&&"max-w-full"),children:[e.jsxs("div",{className:"flex flex-col w-full min-w-0",children:[w&&e.jsx("div",{className:"mb-3",children:e.jsx(P,{config:w,headings:f?u:void 0})}),e.jsx(V,{title:i,repo:t,branch:r,filePath:o,htmlMarkup:R,containerRef:b,currentFramework:M,customComponents:W.components,titleBarActions:k?e.jsx("button",{onClick:()=>k(!c),className:"p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1535px)]:inline-flex",title:c?"Constrain width":"Expand width",children:c?e.jsx(G,{className:"w-4 h-4"}):e.jsx(J,{className:"w-4 h-4"})}):null}),B??e.jsx(T,{})]}),f&&e.jsx("div",{className:"pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden lg:block transition-all",children:e.jsx(_,{headings:u,activeHeadings:z,colorFrom:H,colorTo:N,textColor:q,currentFramework:M})})]})]})}export{ee as D};
+import{z as C,o as E,j as e,r as l,s as W,t as A}from"./main-DqZtiCro.js";import{u as S,a as L,b as T}from"./DocsLayout-BGugXxEQ.js";import{B as O,r as U,F as $,M as V,a as _}from"./MarkdownHeadingContext-CdvUDZFU.js";const G=C("FoldHorizontal",[["path",{d:"M2 12h6",key:"1wqiqv"}],["path",{d:"M22 12h-6",key:"1eg9hc"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 9-3 3 3 3",key:"12ol22"}],["path",{d:"m5 15 3-3-3-3",key:"1kdhjc"}]]);const J=C("UnfoldHorizontal",[["path",{d:"M16 12h6",key:"15xry1"}],["path",{d:"M8 12H2",key:"1jqql6"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 8v2",key:"1woqiv"}],["path",{d:"M12 14v2",key:"8jcxud"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m19 15 3-3-3-3",key:"wjy7rq"}],["path",{d:"m5 9-3 3 3 3",key:"j64kie"}]]);function K(i,n){for(const t of i.sections){for(const r of t.children)if(r.to===n)return t.label;if(t.frameworks){for(const r of t.frameworks)for(const o of r.children)if(o.to===n)return t.label}}return null}function P({config:i,headings:n}){const{_splat:t,framework:r}=E({strict:!1}),o=r?`framework/${r}/${t}`:t,h=o?K(i,o):null;return h?e.jsx(O,{section:h,headings:n,tocHiddenBreakpoint:"lg"}):null}function ee({title:i,content:n,repo:t,branch:r,filePath:o,shouldRenderToc:h=!0,colorFrom:H,colorTo:N,textColor:q,config:w,footer:B,framework:g,isFallback:D=!1,locale:y}){const{headings:u,markup:R}=l.useMemo(()=>U(n),[n]),{framework:v}=E({strict:!1}),j=S(),M=l.useMemo(()=>{const s=g||v||j.currentFramework||"react";return typeof s=="string"?s.toLowerCase():s},[g,v,j.currentFramework]),f=h&&u.length>1,b=l.useRef(null),[z,I]=l.useState([]),m=l.useRef({});let c=!1,k;try{const s=L();c=s.isFullWidth,k=s.setIsFullWidth}catch{}return l.useEffect(()=>{const s=x=>{m.current=x.reduce((a,d)=>(a[d.target.id]=d,a),m.current);const p=[];Object.keys(m.current).forEach(a=>{const d=m.current[a];d.isIntersecting&&p.push(d)}),p.length>=1&&I(p.map(a=>a.target.id))},F=new IntersectionObserver(s,{rootMargin:"0px",threshold:.2});return Array.from(b.current?.querySelectorAll("h2[id], h3[id], h4[id], h5[id], h6[id]")??[]).forEach(x=>F.observe(x)),()=>F.disconnect()},[u]),e.jsxs("div",{className:"flex-1 min-h-0 flex flex-col pt-4 lg:pt-6 xl:pt-8",children:[D&&y&&e.jsx($,{locale:y}),e.jsxs("div",{className:A("w-full flex mx-auto max-w-[768px]",(f||c)&&"max-w-full"),children:[e.jsxs("div",{className:"flex flex-col w-full min-w-0",children:[w&&e.jsx("div",{className:"mb-3",children:e.jsx(P,{config:w,headings:f?u:void 0})}),e.jsx(V,{title:i,repo:t,branch:r,filePath:o,htmlMarkup:R,containerRef:b,currentFramework:M,customComponents:W.components,titleBarActions:k?e.jsx("button",{onClick:()=>k(!c),className:"p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1535px)]:inline-flex",title:c?"Constrain width":"Expand width",children:c?e.jsx(G,{className:"w-4 h-4"}):e.jsx(J,{className:"w-4 h-4"})}):null}),B??e.jsx(T,{})]}),f&&e.jsx("div",{className:"pl-4 w-32 lg:w-36 xl:w-44 2xl:w-56 3xl:w-64 shrink-0 hidden lg:block transition-all",children:e.jsx(_,{headings:u,activeHeadings:z,colorFrom:H,colorTo:N,textColor:q,currentFramework:M})})]})]})}export{ee as D};