@clarify-labs/renderer 0.7.1 → 0.8.0

package/output/renderer.css

@@ -1278,6 +1278,10 @@
     flex: none;
     margin-top: .45rem;
   }
+
+  .prose thead th, .prose :not(pre) > code {
+    white-space: nowrap;
+  }
 }
 
 @layer utilities {
@@ -1353,6 +1357,10 @@
     top: 50%;
   }
 
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
+
   .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
@@ -1369,6 +1377,10 @@
     right: 0;
   }
 
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -1381,6 +1393,10 @@
     bottom: 0;
   }
 
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -1732,7 +1748,6 @@
   .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     table-layout: auto;
     text-align: left;
-    width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
     line-height: 1.5rem;
@@ -1798,6 +1813,10 @@
     color: inherit;
   }
 
+  .prose :where(:is(tbody, tfoot) td code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    white-space: normal;
+  }
+
   .prose :where(:is(h1, h2, h3) + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0;
   }
@@ -2126,6 +2145,10 @@
     min-height: 100vh;
   }
 
+  .\!w-full {
+    width: 100% !important;
+  }
+
   .w-\(--clarify-schema-row-nested-width\) {
     width: var(--clarify-schema-row-nested-width);
   }
@@ -2190,6 +2213,10 @@
     width: calc(var(--spacing) * 6);
   }
 
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -2346,6 +2373,10 @@
     flex-shrink: 0;
   }
 
+  .grow {
+    flex-grow: 1;
+  }
+
   .origin-top {
     transform-origin: top;
   }
@@ -2399,6 +2430,10 @@
     animation: var(--animate-spin);
   }
 
+  .\!cursor-grab {
+    cursor: grab !important;
+  }
+
   .cursor-default {
     cursor: default;
   }
@@ -2537,12 +2572,6 @@
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  :where(.space-y-6 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-  }
-
   :where(.space-y-8 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
@@ -2605,10 +2634,6 @@
     }
   }
 
-  .self-end {
-    align-self: flex-end;
-  }
-
   .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2879,7 +2904,17 @@
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
+  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
+    background-color: var(--clarify-theme-tokens-colors-surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
+      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
+    }
+  }
+
+  .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
@@ -3295,8 +3330,8 @@
     padding-top: calc(var(--spacing) * 16);
   }
 
-  .pt-\[6\.5rem\] {
-    padding-top: 6.5rem;
+  .pt-26 {
+    padding-top: calc(var(--spacing) * 26);
   }
 
   .pr-3 {
@@ -3335,6 +3370,10 @@
     padding-bottom: calc(var(--spacing) * 12);
   }
 
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+
   .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -3504,14 +3543,14 @@
     letter-spacing: var(--tracking-widest);
   }
 
-  .break-words {
-    overflow-wrap: break-word;
-  }
-
   .wrap-anywhere {
     overflow-wrap: anywhere;
   }
 
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
+
   .whitespace-normal {
     white-space: normal;
   }
@@ -4077,6 +4116,10 @@
     display: none;
   }
 
+  .focus-within\:opacity-100:focus-within {
+    opacity: 1;
+  }
+
   @media (hover: hover) {
     .hover\:scale-105:hover {
       --tw-scale-x: 105%;
@@ -4208,6 +4251,10 @@
     outline-style: none;
   }
 
+  .active\:\!cursor-grabbing:active {
+    cursor: grabbing !important;
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4480,6 +4527,10 @@
       top: calc(var(--spacing) * 14);
     }
 
+    .lg\:top-26 {
+      top: calc(var(--spacing) * 26);
+    }
+
     .lg\:top-28 {
       top: calc(var(--spacing) * 28);
     }
@@ -4488,10 +4539,6 @@
       top: calc(var(--spacing) * 40);
     }
 
-    .lg\:top-\[6\.5rem\] {
-      top: 6.5rem;
-    }
-
     .lg\:z-30 {
       z-index: 30;
     }
@@ -4594,8 +4641,8 @@
       position: sticky;
     }
 
-    .xl\:top-24 {
-      top: calc(var(--spacing) * 24);
+    .xl\:top-\[calc\(var\(--clarify-header-offset\,3\.5rem\)\+1\.5rem\)\] {
+      top: calc(var(--clarify-header-offset, 3.5rem) + 1.5rem);
     }
 
     .xl\:max-w-none {
@@ -4614,6 +4661,10 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .xl\:self-start {
+      align-self: flex-start;
+    }
+
     .xl\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -5223,6 +5274,14 @@
     }
   }
 
+  .\[\&_svg\]\:h-auto svg {
+    height: auto;
+  }
+
+  .\[\&_svg\]\:max-w-full svg {
+    max-width: 100%;
+  }
+
   .\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
     display: none;
   }

package/output/runtime/ClarifyShell.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { Config, NavigationTree, RouteItem } from '../core/types';
+import { OpenAPISpec } from '../openapi/lib/utils';
+import { RuntimeSlots } from '../slots';
+export type ClarifyShellProps = {
+    config: Config;
+    routes: RouteItem[];
+    navigation?: NavigationTree;
+    openApis: Record<string, OpenAPISpec>;
+    runtimeSlots?: RuntimeSlots;
+    themeEditor?: boolean;
+    children?: ReactNode;
+};
+/**
+ * Shared provider chain used by both client-side render and server-side
+ * renderToHTML.  Wraps AppShell with ConfigContext → OpenApisContext →
+ * ThemeProvider → ThemeRoot.
+ *
+ * The outer Router (BrowserRouter / StaticRouter) is left to the caller
+ * so each entry point can supply the correct router variant.
+ */
+export declare function ClarifyShell(props: ClarifyShellProps): import("react").JSX.Element;

package/output/server.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_PageActions = require("./PageActions-1RDCHcUY.cjs");
-const require_ThemeRoot = require("./ThemeRoot-DYS-lcK-.cjs");
+const require_PageActions = require("./PageActions-yycPlNyL.cjs");
+const require_ClarifyShell = require("./ClarifyShell-DNN5erFD.cjs");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -12,27 +12,18 @@ let react_dom_server = require("react-dom/server");
 * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。
 */
 function renderToHTML(options) {
-	const { config, routes, navigation, openApis = {}, bannerComponent, footerComponent, url, themeEditor = false } = options;
+	const { config, routes, navigation, openApis = {}, runtimeSlots, url, themeEditor = false } = options;
 	const location = require_PageActions.prefixHref(url, config.routePrefix);
 	return (0, react_dom_server.renderToString)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.StrictMode, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.StaticRouter, {
 		basename: config.routePrefix,
 		location,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.ConfigContext.Provider, {
-			value: config,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.OpenApisContext.Provider, {
-				value: openApis,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageActions.ThemeProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeRoot.ThemeRoot, {
-					theme: config.theme,
-					themeEditor,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThemeRoot.AppShell, {
-						config,
-						routes,
-						navigation: navigation ?? [],
-						bannerComponent,
-						footerComponent
-					})
-				}) })
-			})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ClarifyShell.ClarifyShell, {
+			config,
+			routes,
+			navigation,
+			openApis,
+			runtimeSlots,
+			themeEditor
 		})
 	}) }));
 }

package/output/server.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"server.cjs","names":[],"sources":["../source/runtime/server.tsx"],"sourcesContent":["import { StrictMode } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router-dom'\n\nimport { AppShell } from '../app/AppShell'\nimport { ConfigContext, OpenApisContext } from '../context'\nimport { ThemeProvider } from '../theme/ThemeProvider'\nimport { ThemeRoot } from '../theme/ThemeRoot'\nimport type { ServerRenderOptions } from '../types'\nimport { prefixHref } from '../utils/href'\n\n/**\n * Clarify 服务端渲染入口。\n * 由 @clarify-labs/cli 在构建时调用，为每条路由生成 React HTML 片段。\n * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。\n */\nexport function renderToHTML(options: ServerRenderOptions): string {\n  const { config, routes, navigation, openApis = {}, bannerComponent, footerComponent, url, themeEditor = false } = options\n  const location = prefixHref(url, config.routePrefix)\n\n  return renderToString(\n    <StrictMode>\n      <StaticRouter basename={config.routePrefix} location={location}>\n        <ConfigContext.Provider value={config}>\n          <OpenApisContext.Provider value={openApis}>\n            <ThemeProvider>\n              <ThemeRoot theme={config.theme} themeEditor={themeEditor}>\n                <AppShell config={config} routes={routes} navigation={navigation ?? []} bannerComponent={bannerComponent} footerComponent={footerComponent} />\n              </ThemeRoot>\n            </ThemeProvider>\n          </OpenApisContext.Provider>\n        </ConfigContext.Provider>\n      </StaticRouter>\n    </StrictMode>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAgB,aAAa,SAAsC;CACjE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,CAAC,GAAG,iBAAiB,iBAAiB,KAAK,cAAc,UAAU;CAClH,MAAM,WAAW,oBAAA,WAAW,KAAK,OAAO,WAAW;CAEnD,QAAA,GAAA,iBAAA,gBACE,iBAAA,GAAA,kBAAA,KAAC,MAAA,YAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,cAAD;EAAc,UAAU,OAAO;EAAuB;YACpD,iBAAA,GAAA,kBAAA,KAAC,oBAAA,cAAc,UAAf;GAAwB,OAAO;aAC7B,iBAAA,GAAA,kBAAA,KAAC,oBAAA,gBAAgB,UAAjB;IAA0B,OAAO;cAC/B,iBAAA,GAAA,kBAAA,KAAC,oBAAA,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,kBAAA,WAAD;KAAW,OAAO,OAAO;KAAoB;eAC3C,iBAAA,GAAA,kBAAA,KAAC,kBAAA,UAAD;MAAkB;MAAgB;MAAQ,YAAY,cAAc,CAAC;MAAoB;MAAkC;KAAkB,CAAA;IACpI,CAAA,EACE,CAAA;GACS,CAAA;EACJ,CAAA;CACZ,CAAA,EACJ,CAAA,CACd;AACF"}
+{"version":3,"file":"server.cjs","names":[],"sources":["../source/runtime/server.tsx"],"sourcesContent":["import { StrictMode } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router-dom'\n\nimport type { ServerRenderOptions } from '../types'\nimport { prefixHref } from '../utils/href'\n\nimport { ClarifyShell } from './ClarifyShell'\n\n/**\n * Clarify 服务端渲染入口。\n * 由 @clarify-labs/cli 在构建时调用，为每条路由生成 React HTML 片段。\n * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。\n */\nexport function renderToHTML(options: ServerRenderOptions): string {\n  const { config, routes, navigation, openApis = {}, runtimeSlots, url, themeEditor = false } = options\n  const location = prefixHref(url, config.routePrefix)\n\n  return renderToString(\n    <StrictMode>\n      <StaticRouter basename={config.routePrefix} location={location}>\n        <ClarifyShell\n          config={config}\n          routes={routes}\n          navigation={navigation}\n          openApis={openApis}\n          runtimeSlots={runtimeSlots}\n          themeEditor={themeEditor}\n        />\n      </StaticRouter>\n    </StrictMode>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,aAAa,SAAsC;CACjE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,CAAC,GAAG,cAAc,KAAK,cAAc,UAAU;CAC9F,MAAM,WAAW,oBAAA,WAAW,KAAK,OAAO,WAAW;CAEnD,QAAA,GAAA,iBAAA,gBACE,iBAAA,GAAA,kBAAA,KAAC,MAAA,YAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,cAAD;EAAc,UAAU,OAAO;EAAuB;YACpD,iBAAA,GAAA,kBAAA,KAAC,qBAAA,cAAD;GACU;GACA;GACI;GACF;GACI;GACD;EACd,CAAA;CACW,CAAA,EACJ,CAAA,CACd;AACF"}

package/output/server.js

@@ -1,5 +1,5 @@
-import { A as OpenApisContext, O as ConfigContext, T as prefixHref, m as ThemeProvider } from "./PageActions-yoDRjkq8.js";
-import { c as AppShell, t as ThemeRoot } from "./ThemeRoot-CLa0yvRQ.js";
+import { E as prefixHref } from "./PageActions-DR0asnKH.js";
+import { t as ClarifyShell } from "./ClarifyShell-BxB_6Uhd.js";
 import { StrictMode } from "react";
 import { StaticRouter } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";
@@ -11,27 +11,18 @@ import { renderToString } from "react-dom/server";
 * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。
 */
 function renderToHTML(options) {
-	const { config, routes, navigation, openApis = {}, bannerComponent, footerComponent, url, themeEditor = false } = options;
+	const { config, routes, navigation, openApis = {}, runtimeSlots, url, themeEditor = false } = options;
 	const location = prefixHref(url, config.routePrefix);
 	return renderToString(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(StaticRouter, {
 		basename: config.routePrefix,
 		location,
-		children: /* @__PURE__ */ jsx(ConfigContext.Provider, {
-			value: config,
-			children: /* @__PURE__ */ jsx(OpenApisContext.Provider, {
-				value: openApis,
-				children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeRoot, {
-					theme: config.theme,
-					themeEditor,
-					children: /* @__PURE__ */ jsx(AppShell, {
-						config,
-						routes,
-						navigation: navigation ?? [],
-						bannerComponent,
-						footerComponent
-					})
-				}) })
-			})
+		children: /* @__PURE__ */ jsx(ClarifyShell, {
+			config,
+			routes,
+			navigation,
+			openApis,
+			runtimeSlots,
+			themeEditor
 		})
 	}) }));
 }

package/output/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","names":[],"sources":["../source/runtime/server.tsx"],"sourcesContent":["import { StrictMode } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router-dom'\n\nimport { AppShell } from '../app/AppShell'\nimport { ConfigContext, OpenApisContext } from '../context'\nimport { ThemeProvider } from '../theme/ThemeProvider'\nimport { ThemeRoot } from '../theme/ThemeRoot'\nimport type { ServerRenderOptions } from '../types'\nimport { prefixHref } from '../utils/href'\n\n/**\n * Clarify 服务端渲染入口。\n * 由 @clarify-labs/cli 在构建时调用，为每条路由生成 React HTML 片段。\n * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。\n */\nexport function renderToHTML(options: ServerRenderOptions): string {\n  const { config, routes, navigation, openApis = {}, bannerComponent, footerComponent, url, themeEditor = false } = options\n  const location = prefixHref(url, config.routePrefix)\n\n  return renderToString(\n    <StrictMode>\n      <StaticRouter basename={config.routePrefix} location={location}>\n        <ConfigContext.Provider value={config}>\n          <OpenApisContext.Provider value={openApis}>\n            <ThemeProvider>\n              <ThemeRoot theme={config.theme} themeEditor={themeEditor}>\n                <AppShell config={config} routes={routes} navigation={navigation ?? []} bannerComponent={bannerComponent} footerComponent={footerComponent} />\n              </ThemeRoot>\n            </ThemeProvider>\n          </OpenApisContext.Provider>\n        </ConfigContext.Provider>\n      </StaticRouter>\n    </StrictMode>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,aAAa,SAAsC;CACjE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,CAAC,GAAG,iBAAiB,iBAAiB,KAAK,cAAc,UAAU;CAClH,MAAM,WAAW,WAAW,KAAK,OAAO,WAAW;CAEnD,OAAO,eACL,oBAAC,YAAD,EAAA,UACE,oBAAC,cAAD;EAAc,UAAU,OAAO;EAAuB;YACpD,oBAAC,cAAc,UAAf;GAAwB,OAAO;aAC7B,oBAAC,gBAAgB,UAAjB;IAA0B,OAAO;cAC/B,oBAAC,eAAD,EAAA,UACE,oBAAC,WAAD;KAAW,OAAO,OAAO;KAAoB;eAC3C,oBAAC,UAAD;MAAkB;MAAgB;MAAQ,YAAY,cAAc,CAAC;MAAoB;MAAkC;KAAkB,CAAA;IACpI,CAAA,EACE,CAAA;GACS,CAAA;EACJ,CAAA;CACZ,CAAA,EACJ,CAAA,CACd;AACF"}
+{"version":3,"file":"server.js","names":[],"sources":["../source/runtime/server.tsx"],"sourcesContent":["import { StrictMode } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { StaticRouter } from 'react-router-dom'\n\nimport type { ServerRenderOptions } from '../types'\nimport { prefixHref } from '../utils/href'\n\nimport { ClarifyShell } from './ClarifyShell'\n\n/**\n * Clarify 服务端渲染入口。\n * 由 @clarify-labs/cli 在构建时调用，为每条路由生成 React HTML 片段。\n * 返回 `div#root` 内部的 HTML，由 Clarify CLI 组装为完整的 HTML 文档。\n */\nexport function renderToHTML(options: ServerRenderOptions): string {\n  const { config, routes, navigation, openApis = {}, runtimeSlots, url, themeEditor = false } = options\n  const location = prefixHref(url, config.routePrefix)\n\n  return renderToString(\n    <StrictMode>\n      <StaticRouter basename={config.routePrefix} location={location}>\n        <ClarifyShell\n          config={config}\n          routes={routes}\n          navigation={navigation}\n          openApis={openApis}\n          runtimeSlots={runtimeSlots}\n          themeEditor={themeEditor}\n        />\n      </StaticRouter>\n    </StrictMode>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,aAAa,SAAsC;CACjE,MAAM,EAAE,QAAQ,QAAQ,YAAY,WAAW,CAAC,GAAG,cAAc,KAAK,cAAc,UAAU;CAC9F,MAAM,WAAW,WAAW,KAAK,OAAO,WAAW;CAEnD,OAAO,eACL,oBAAC,YAAD,EAAA,UACE,oBAAC,cAAD;EAAc,UAAU,OAAO;EAAuB;YACpD,oBAAC,cAAD;GACU;GACA;GACI;GACF;GACI;GACD;EACd,CAAA;CACW,CAAA,EACJ,CAAA,CACd;AACF"}

package/output/shell/search/pagefind.d.ts

@@ -1,5 +1,4 @@
 import { Pagefind } from './types';
 export declare function pagefindCacheKey(routePrefix: string, locale: string | undefined): string;
-export declare function logSearchDebug(message: string, data?: Record<string, unknown>): void;
 export declare function loadPagefind(routePrefix: string, locale: string | undefined): Promise<Pagefind | null>;
 export declare function normalizePagefindUrl(url: string, routePrefix: string): string;

package/output/slots/RuntimeSlot.d.ts

@@ -0,0 +1,58 @@
+import { ComponentType, ReactNode } from 'react';
+import { RouteItem } from '../core/types';
+import { UISlotName } from './types';
+/**
+ * One registered slot component, as compiled by the CLI into
+ * `virtual:clarify/slots`.
+ *
+ * `component` is a lazy import factory `() => import('path')`. On the client
+ * it is passed to `React.lazy`. During SSR the factory is pre-resolved and
+ * the resulting component is stored in `_resolved`, which the renderer uses
+ * directly (no Suspense needed for `renderToString`).
+ */
+export type RuntimeSlotEntry = {
+    /** Plugin that registered this component, used as a stable render key. */
+    plugin: string;
+    /** Lazy import factory — `() => import('path')`. Set by CLI virtual module. */
+    component: () => Promise<{
+        default: ComponentType;
+    }>;
+    /** @internal Pre-resolved component set by SSR before {@link renderToHTML}. */
+    _resolved?: ComponentType;
+};
+/** Registry keyed by slot name. */
+export type RuntimeSlots = Partial<Record<UISlotName, RuntimeSlotEntry[]>>;
+type RuntimeSlotsContextValue = {
+    slots: RuntimeSlots;
+    route?: RouteItem;
+};
+export declare const RuntimeSlotsContext: import('react').Context<RuntimeSlotsContextValue>;
+type RuntimeSlotsProviderProps = {
+    slots?: RuntimeSlots;
+    route?: RouteItem;
+    children: ReactNode;
+};
+/**
+ * Makes the compiled slot registry and the current route available to every
+ * {@link RuntimeSlot} in the tree. Mounted once near the top of `AppShell`.
+ */
+export declare function RuntimeSlotsProvider(arg0: RuntimeSlotsProviderProps): ReactNode;
+type RuntimeSlotProps = {
+    name: UISlotName;
+    /** Built-in default component for replacement slots. */
+    default?: ComponentType;
+};
+/**
+ * Renders plugin components registered for a slot, in registration order.
+ *
+ * For extension slots (*.before/*.after), renders all plugin components.
+ * For replacement slots (*.replace), renders only the last registered plugin
+ * component (if any), and passes the default component through context.
+ *
+ * Each component is loaded via the import factory. If `_resolved` is set
+ * (SSR pre-resolution), the component is rendered synchronously for
+ * compatibility with `renderToString`. Otherwise, `React.lazy` + `Suspense`
+ * is used for client-side code-splitting.
+ */
+export declare function RuntimeSlot(arg0: RuntimeSlotProps): ReactNode;
+export {};

package/output/slots/context.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { UISlotName, SlotContext } from './types';
+export type { UISlotName, SlotContext };
+type SlotProviderProps = {
+    value: SlotContext;
+    children: ReactNode;
+};
+/**
+ * Provides an isolated {@link SlotContext} for a single slot component.
+ * `RuntimeSlot` wraps every rendered slot component with this provider.
+ */
+export declare function SlotProvider(arg0: SlotProviderProps): ReactNode;
+/**
+ * Reads the current slot context.
+ *
+ * Must be called inside a slot component (or a descendant). Calling it outside a
+ * slot provider throws, which helps plugin authors notice that the component was
+ * not mounted through a Clarify slot.
+ */
+export declare function useSlot(): SlotContext;

package/output/slots/index.d.ts

@@ -0,0 +1,5 @@
+export { SlotProvider, useSlot } from './context';
+export type { SlotContext, UISlotName } from './context';
+export { RuntimeSlot, RuntimeSlotsProvider, RuntimeSlotsContext } from './RuntimeSlot';
+export type { RuntimeSlotEntry, RuntimeSlots } from './RuntimeSlot';
+export type { UISlotRegistration } from './types';

package/output/slots/types.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType } from 'react';
+import { RouteItem } from '../core/types';
+/**
+ * Stable runtime UI slot positions.
+ *
+ * The name is a dot-path `${scope}.${path}.${position}`:
+ * - `*.before`: Extension slot, plugin components render before default
+ * - `*.after`: Extension slot, plugin components render after default
+ * - `*.replace`: Replacement slot, plugin component replaces default
+ */
+export type UISlotName = 'page.footer.before' | 'page.banner.replace' | 'page.footer.replace';
+/**
+ * Context exposed to a slot component through the `useSlot` hook.
+ *
+ * Slot components never receive Clarify context through props. Instead they read
+ * everything they need from this hook, which keeps slot components as ordinary
+ * React components and lets the slot context grow without changing signatures.
+ */
+export type SlotContext = {
+    /** The slot the current component is mounted into. */
+    name: UISlotName;
+    /** Name of the plugin that registered the current slot component. */
+    plugin: string;
+    /** Current route, when a content route is active. */
+    route?: RouteItem;
+    /** Current locale, for example `zh-CN` or `en-US`. */
+    locale?: string;
+    /** Built-in default component for replacement slots. */
+    DefaultComponent?: ComponentType;
+};
+/**
+ * A runtime UI extension declared by a plugin. The CLI compiles every
+ * registration into `virtual:clarify/slots`.
+ */
+export type UISlotRegistration = {
+    /** Target slot position. */
+    name: UISlotName;
+    /**
+     * Module path of the React component to mount.
+     *
+     * Use `/` prefix to reference files relative to the project root, for
+     * example:
+     * ```
+     * component: '/source/plugins/custom-footer.tsx'
+     * ```
+     *
+     * The component is imported as a default export.
+     */
+    component: string;
+};

package/output/utils/localized-text.d.ts

@@ -0,0 +1,7 @@
+import { LocalizedText } from '../core/types';
+/**
+ * Resolve a localized text value for the given locale.
+ * Falls back to the fallback locale, then the first available value,
+ * then an empty string.
+ */
+export declare function resolveLocalizedText(text: LocalizedText, locale?: string, fallbackLocale?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarify-labs/renderer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "AGPL-3.0-only",
   "type": "module",
   "repository": {
@@ -54,7 +54,9 @@
     "build": "vite build",
     "lint": "eslint source/",
     "lint:fix": "eslint source/ --fix",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -72,7 +74,8 @@
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "vite": "^8.0.15",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.9"
   },
   "dependencies": {
     "@headlessui/react": "^2.2.10",
@@ -82,8 +85,10 @@
     "framer-motion": "^12.40.0",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.20.0",
+    "mermaid": "^11.4.0",
     "openapi-types": "^12.1.3",
     "react-markdown": "^10.1.0",
+    "react-zoom-pan-pinch": "^4.0.3",
     "remark-gfm": "^4.0.1",
     "zustand": "^5.0.14"
   }