@riebeckite/honox 0.0.18 → 0.0.20

package/README.md

@@ -84,6 +84,18 @@ imported from. Installed npm consumers do not need `workspaceRoot`.
 - Types: `RiebeckiteSsgOptions`, `ResolveHonoxApplicationOptions`,
   `ResolvedHonoxApplication`
 
+The plugin also provides the bootstrap modules a generated site imports:
+`virtual:riebeckite/config` (the resolved config) and
+`virtual:riebeckite/content` (a configured `ContentManager`). Sites therefore no
+longer need `app/config.ts`, `app/content.ts`, or `app/constants/paths.ts`.
+
+### `@riebeckite/honox/runtime`
+
+- `resolveHonoxConfig(config, appRoot)` — applies `appRoot` to a resolved
+  config (build/output directories and absolute `content.directory`). It is a
+  lightweight subpath, so scripts outside the Vite pipeline can resolve the same
+  values without loading the Vite plugin.
+
 ### `@riebeckite/honox/server`
 
 - `mountRiebeckiteEndpoints(app, { config, content })`
@@ -100,8 +112,8 @@ layout, islands, and CSS.
 
 ## See also
 
-- [HonoX Integration](../../../docs/docs/framework/honox-integration.en.md)
-- [CLI Reference](../../../docs/docs/reference/cli.en.md)
-- [Configuration](../../../docs/docs/reference/configuration.en.md)
-- [Plugin System](../../../docs/docs/reference/plugin-api.en.md) / [Theme System](../../../docs/docs/reference/theme-api.en.md)
+- [HonoX Integration](../../../docs/docs/framework/honox-integration.md)
+- [CLI Reference](../../../docs/docs/reference/cli.md)
+- [Configuration](../../../docs/docs/reference/configuration.md)
+- [Plugin System](../../../docs/docs/reference/plugin-api.md) / [Theme System](../../../docs/docs/reference/theme-api.md)
 

package/README_ja.md

@@ -72,6 +72,12 @@ const app = createApp({
 - `resolveHonoxApplication`、`resolveHonoxApplicationRoot`、`buildHonoxApplication`、`startHonoxDevServer`
 - 型: `RiebeckiteSsgOptions`、`ResolveHonoxApplicationOptions`、`ResolvedHonoxApplication`
 
+Plugin は generated Site が import する bootstrap module も提供します。`virtual:riebeckite/config`（解決済み config）と `virtual:riebeckite/content`（構成済み `ContentManager`）です。そのため Site が `app/config.ts`、`app/content.ts`、`app/constants/paths.ts` を持つ必要はありません。
+
+### `@riebeckite/honox/runtime`
+
+- `resolveHonoxConfig(config, appRoot)` — 解決済み config に `appRoot` を適用します（build / output directory と絶対 `content.directory`）。Vite の外で動く script が Vite Plugin を読み込まずに同じ値を解決できる軽量な subpath です。
+
 ### `@riebeckite/honox/server`
 
 - `mountRiebeckiteEndpoints(app, { config, content })`
@@ -84,8 +90,8 @@ const app = createApp({
 
 ## 関連資料
 
-- [HonoX Integration](../../../docs/docs/framework/honox-integration.md)
-- [CLI Reference](../../../docs/docs/reference/cli.md)
-- [Configuration](../../../docs/docs/reference/configuration.md)
-- [Plugin System](../../../docs/docs/reference/plugin-api.md) / [Theme System](../../../docs/docs/reference/theme-api.md)
+- [HonoX Integration](../../../docs/docs/framework/honox-integration.ja.md)
+- [CLI Reference](../../../docs/docs/reference/cli.ja.md)
+- [Configuration](../../../docs/docs/reference/configuration.ja.md)
+- [Plugin System](../../../docs/docs/reference/plugin-api.ja.md) / [Theme System](../../../docs/docs/reference/theme-api.ja.md)
 

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/config_loader.ts
 import fs2 from "node:fs/promises";
-import path2 from "node:path";
+import path3 from "node:path";
 import { build as buildWithEsbuild } from "esbuild";
 
 // src/workspace_packages.ts
@@ -107,18 +107,32 @@ function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+// src/resolved_config.ts
+import path2 from "node:path";
+function resolveHonoxConfig(config, appRoot) {
+  return {
+    ...config,
+    buildDirectory: path2.join(appRoot, ".riebeckite"),
+    outputDirectory: path2.join(appRoot, "dist"),
+    content: {
+      ...config.content,
+      directory: path2.resolve(appRoot, config.content.directory)
+    }
+  };
+}
+
 // src/config_loader.ts
 async function loadRiebeckiteConfig(options) {
   const configFile = options.configFile ?? "riebeckite.config.ts";
   const temporaryDirectory = await fs2.mkdtemp(
-    path2.join(options.configRoot, ".riebeckite-config-")
+    path3.join(options.configRoot, ".riebeckite-config-")
   );
-  const outputFile = path2.join(temporaryDirectory, "config.mjs");
+  const outputFile = path3.join(temporaryDirectory, "config.mjs");
   try {
     await buildWithEsbuild({
       stdin: {
         contents: `
-          import rawConfig from ${JSON.stringify(path2.resolve(options.configRoot, configFile))};
+          import rawConfig from ${JSON.stringify(path3.resolve(options.configRoot, configFile))};
           import { resolveConfigModule } from "@riebeckite/core";
           export default resolveConfigModule(rawConfig);
         `,
@@ -140,24 +154,13 @@ async function loadRiebeckiteConfig(options) {
     await fs2.rm(temporaryDirectory, { recursive: true, force: true });
   }
 }
-function resolveHonoxConfig(config, appRoot) {
-  return {
-    ...config,
-    buildDirectory: path2.join(appRoot, ".riebeckite"),
-    outputDirectory: path2.join(appRoot, "dist"),
-    content: {
-      ...config.content,
-      directory: path2.resolve(appRoot, config.content.directory)
-    }
-  };
-}
 function pathToFileUrl(filePath) {
   return `file:///${filePath.replace(/\\/g, "/").replace(/^([A-Za-z]):/, "$1:")}`;
 }
 
 // src/honox_islands.ts
 import fs3 from "node:fs/promises";
-import path3 from "node:path";
+import path4 from "node:path";
 import { parse } from "@babel/parser";
 var honoxIslandDependencyPluginName = "inject-importing-islands";
 var importingIslandsExport = "__importing_islands";
@@ -184,8 +187,8 @@ function scopedIslandDependencyPlugin() {
   return {
     name: "riebeckite-inject-importing-islands",
     configResolved(config) {
-      appDirectory = path3.resolve(config.root, "app");
-      islandDirectory = path3.join(appDirectory, "islands");
+      appDirectory = path4.resolve(config.root, "app");
+      islandDirectory = path4.join(appDirectory, "islands");
     },
     async transform(sourceCode, id) {
       const modulePath = toFilePath(id);
@@ -248,8 +251,8 @@ function toFilePath(id) {
   return id.split("?", 1)[0] ?? id;
 }
 function isInDirectory(filePath, directory) {
-  const relativePath = path3.relative(directory, filePath);
-  return relativePath !== "" && !relativePath.startsWith(`..${path3.sep}`) && !path3.isAbsolute(relativePath);
+  const relativePath = path4.relative(directory, filePath);
+  return relativePath !== "" && !relativePath.startsWith(`..${path4.sep}`) && !path4.isAbsolute(relativePath);
 }
 function isJavaScriptModule(filePath) {
   return /\.[cm]?[jt]sx?$/.test(filePath);
@@ -275,7 +278,7 @@ import {
 
 // src/content_assets.ts
 import fs4 from "node:fs/promises";
-import path5 from "node:path";
+import path6 from "node:path";
 import {
   isIgnoredContentPath as isIgnoredContentPath2,
   isImagePath as isImagePath2,
@@ -283,13 +286,72 @@ import {
 } from "@riebeckite/core";
 
 // src/content_watch.ts
-import path4 from "node:path";
+import path5 from "node:path";
 import {
   isAttachmentPath,
   isIgnoredContentPath,
   isImagePath,
   normalizeContentPath
 } from "@riebeckite/core";
+
+// src/runtime_modules.ts
+var riebeckiteConfigModuleId = "virtual:riebeckite/config";
+var riebeckiteContentModuleId = "virtual:riebeckite/content";
+var runtimeModuleIds = [
+  riebeckiteConfigModuleId,
+  riebeckiteContentModuleId
+];
+var resolvedConfigModuleId = `\0${riebeckiteConfigModuleId}`;
+var resolvedContentModuleId = `\0${riebeckiteContentModuleId}`;
+function riebeckiteRuntimeModules(getApplication) {
+  return {
+    name: "riebeckite-runtime-modules",
+    resolveId(id) {
+      if (id === riebeckiteConfigModuleId) return resolvedConfigModuleId;
+      if (id === riebeckiteContentModuleId) return resolvedContentModuleId;
+      return null;
+    },
+    load(id) {
+      if (id === resolvedConfigModuleId) {
+        const { appRoot, configFile } = getApplication();
+        return createConfigModule(appRoot, configFile);
+      }
+      if (id === resolvedContentModuleId) return createContentModule();
+      return null;
+    }
+  };
+}
+function isRiebeckiteRuntimeModuleId(id) {
+  if (!id) return false;
+  return runtimeModuleIds.some(
+    (moduleId) => id === moduleId || id === `\0${moduleId}`
+  );
+}
+function createConfigModule(appRoot, configFile) {
+  const configSpecifier = configFile.replace(/\\/g, "/");
+  return `import * as rawConfigModule from ${JSON.stringify(configSpecifier)};
+import { resolveConfigModule } from "@riebeckite/core";
+import { resolveHonoxConfig } from "@riebeckite/honox/runtime";
+
+export const config = resolveHonoxConfig(
+  resolveConfigModule(rawConfigModule),
+  ${JSON.stringify(appRoot)},
+);
+`;
+}
+function createContentModule() {
+  return `import { ContentManager } from "@riebeckite/core";
+import { config } from ${JSON.stringify(riebeckiteConfigModuleId)};
+
+export const content = new ContentManager(
+  config.content.directory,
+  config.content.exclude,
+  { config, plugins: config.plugins },
+);
+`;
+}
+
+// src/content_watch.ts
 var CONTENT_RELOAD_DEBOUNCE_MS = 60;
 var configuredWatchers = /* @__PURE__ */ new WeakSet();
 function riebeckiteContentWatch(options) {
@@ -345,24 +407,27 @@ function isPathInsideDirectory(directory, file) {
 }
 function toLogicalPath(directory, file) {
   return normalizeContentPath(
-    path4.relative(normalizeContentPath(directory), normalizeContentPath(file))
+    path5.relative(normalizeContentPath(directory), normalizeContentPath(file))
   );
 }
 function invalidateApplicationRuntime(server, appRoot) {
   const moduleGraph = server.environments?.ssr?.moduleGraph;
   if (!moduleGraph) return 0;
-  const appDirectory = path4.join(appRoot, "app") + path4.sep;
+  const appDirectory = path5.join(appRoot, "app") + path5.sep;
   const seen = /* @__PURE__ */ new Set();
   const timestamp = Date.now();
   let invalidated = 0;
   for (const mod of moduleGraph.idToModuleMap.values()) {
-    const file = mod.file;
-    if (!file || !isPathInsideDirectory(appDirectory, file)) continue;
+    if (!isApplicationRuntimeModule(mod, appDirectory)) continue;
     moduleGraph.invalidateModule(mod, seen, timestamp);
     invalidated += 1;
   }
   return invalidated;
 }
+function isApplicationRuntimeModule(mod, appDirectory) {
+  if (mod.file && isPathInsideDirectory(appDirectory, mod.file)) return true;
+  return isRiebeckiteRuntimeModuleId(mod.id);
+}
 function suppressRestartOnContentEvents(server, isContentFile) {
   for (const event of ["add", "unlink"]) {
     const listeners = server.watcher.rawListeners(event).slice();
@@ -397,7 +462,7 @@ function riebeckiteContentAssets(options) {
     enforce: "pre",
     configureServer(server) {
       const contentRoot = options.contentRoot();
-      const entry = path5.join(options.appRoot(), "app", "server.ts");
+      const entry = path6.join(options.appRoot(), "app", "server.ts");
       const base = server.config.base;
       const publicDir = server.config.publicDir;
       let cachedManifest;
@@ -437,7 +502,7 @@ function riebeckiteContentAssets(options) {
             next();
             return;
           }
-          const file = path5.join(contentRoot, logicalPath);
+          const file = path6.join(contentRoot, logicalPath);
           if (!isPathInsideDirectory(contentRoot, file)) {
             next();
             return;
@@ -484,16 +549,16 @@ function collectPublicImagePaths(manifest) {
 async function collectSiteOwnedOutputPaths(publicDir) {
   const paths = /* @__PURE__ */ new Set();
   if (!publicDir) return paths;
-  const root = path5.resolve(publicDir);
+  const root = path6.resolve(publicDir);
   const walk = async (directory) => {
     const entries = await fs4.readdir(directory, { withFileTypes: true }).catch(() => void 0);
     if (!entries) return;
     for (const entry of entries) {
-      const full = path5.join(directory, entry.name);
+      const full = path6.join(directory, entry.name);
       if (entry.isDirectory()) {
         await walk(full);
       } else {
-        paths.add(path5.relative(root, full).replaceAll("\\", "/"));
+        paths.add(path6.relative(root, full).replaceAll("\\", "/"));
       }
     }
   };
@@ -528,7 +593,7 @@ function imageContentType(logicalPath) {
 }
 async function hasSiteOwnedFile(publicDir, logicalPath) {
   if (!publicDir) return false;
-  const file = path5.join(publicDir, logicalPath);
+  const file = path6.join(publicDir, logicalPath);
   try {
     return (await fs4.stat(file)).isFile();
   } catch {
@@ -737,7 +802,7 @@ function riebeckiteSsg(options = {}) {
               outputChangeSet.affected.filter((output) => output.kind === "generated").map((output) => output.path)
             ) : void 0,
             siteOwnedOutputPaths,
-            (path9) => shadowedOutputs.add(path9)
+            (path10) => shadowedOutputs.add(path10)
           )
         );
         if (!outputChangeSet)
@@ -745,21 +810,21 @@ function riebeckiteSsg(options = {}) {
         if (canUseIncremental) {
           await measure(timingsMs, "unchangedOutputReuse", async () => {
             for (const output of outputChangeSet.unchanged) {
-              const path9 = output.path;
-              if (siteOwnedOutputPaths.has(path9)) {
-                shadowedOutputs.add(path9);
+              const path10 = output.path;
+              if (siteOwnedOutputPaths.has(path10)) {
+                shadowedOutputs.add(path10);
                 continue;
               }
-              const cached = previousOutputCache.outputs[path9];
+              const cached = previousOutputCache.outputs[path10];
               if (!cached) continue;
               this.emitFile({
                 type: "asset",
-                fileName: path9,
+                fileName: path10,
                 source: decodeOutput(cached)
               });
               metrics.emittedOutputCount += 1;
               metrics.reusedOutputCount += 1;
-              nextOutputCache.outputs[path9] = cached;
+              nextOutputCache.outputs[path10] = cached;
             }
           });
         }
@@ -791,6 +856,9 @@ function riebeckiteSsg(options = {}) {
           );
         }
         await writeSsgOutputMetrics(metrics);
+        this.info(
+          `SSG outputs: ${metrics.renderedOutputCount} rendered · ${metrics.reusedOutputCount} reused · ${metrics.deletedOutputCount} removed`
+        );
         inspectGeneratedHtmlPages(module, generatedHtml, {
           warn: (message) => this.warn(message),
           info: (message) => this.info(message)
@@ -820,16 +888,16 @@ async function findOversizedAssets(directory, relativeDirectory = "") {
   );
   const nestedAssets = await Promise.all(
     entries.map(async (entry) => {
-      const path9 = join(directory, entry.name);
+      const path10 = join(directory, entry.name);
       const relativePath = join(relativeDirectory, entry.name).replaceAll(
         "\\",
         "/"
       );
       if (entry.isDirectory()) {
-        return findOversizedAssets(path9, relativePath);
+        return findOversizedAssets(path10, relativePath);
       }
       if (!entry.isFile()) return [];
-      const size = (await stat(path9)).size;
+      const size = (await stat(path10)).size;
       return size > cloudflareWorkerAssetLimit ? [{ path: relativePath, size }] : [];
     })
   );
@@ -846,8 +914,8 @@ function shouldApplyRiebeckiteSsg(_config, env) {
 }
 function findBuildOutputSiteCollisions(buildOutputPaths, siteOwnedOutputPaths) {
   const collisions = /* @__PURE__ */ new Set();
-  for (const path9 of buildOutputPaths) {
-    if (siteOwnedOutputPaths.has(path9)) collisions.add(path9);
+  for (const path10 of buildOutputPaths) {
+    if (siteOwnedOutputPaths.has(path10)) collisions.add(path10);
   }
   return [...collisions].sort();
 }
@@ -922,14 +990,14 @@ async function collectAppFiles(directory, files) {
     }
   }
 }
-async function loadOutputCache(path9, timingsMs, log = () => {
+async function loadOutputCache(path10, timingsMs, log = () => {
 }) {
   let raw;
   try {
     raw = await measure(
       timingsMs,
       "outputCacheRead",
-      () => readFile(path9, "utf8")
+      () => readFile(path10, "utf8")
     );
   } catch (error) {
     if (isNotFoundError(error)) return void 0;
@@ -966,10 +1034,10 @@ function isOutputCacheEntries(value) {
     (entry) => typeof entry === "object" && entry !== null && typeof entry.source === "string" && (entry.encoding === "utf8" || entry.encoding === "base64")
   );
 }
-async function saveOutputCache(path9, state, timingsMs) {
-  const directory = dirname(path9);
+async function saveOutputCache(path10, state, timingsMs) {
+  const directory = dirname(path10);
   await mkdir(directory, { recursive: true });
-  const temporaryPath = `${path9}.${randomUUID()}.tmp`;
+  const temporaryPath = `${path10}.${randomUUID()}.tmp`;
   const serialized = measureSync(
     timingsMs,
     "outputCacheSerialize",
@@ -985,7 +1053,7 @@ async function saveOutputCache(path9, state, timingsMs) {
     await measure(
       timingsMs,
       "outputCacheRename",
-      () => replaceFile(temporaryPath, path9)
+      () => replaceFile(temporaryPath, path10)
     );
   } catch (error) {
     await rm(temporaryPath, { force: true }).catch(() => void 0);
@@ -1088,16 +1156,23 @@ function createRiebeckiteSsg(options = {}) {
 }
 
 // src/vite_plugin.ts
-import path8 from "node:path";
+import path9 from "node:path";
 
 // src/asset_entries.ts
 import fs5 from "node:fs";
-import path6 from "node:path";
+import path7 from "node:path";
 import { uniqueStrings } from "@riebeckite/core";
 function writeRiebeckiteAssetEntries(config, paths) {
+  writeGeneratedFile(paths.frameworkStyles, createFrameworkStylesEntry());
   writeGeneratedFile(paths.pluginStyles, createPluginStylesEntry(config));
   writeGeneratedFile(paths.themeStyles, createThemeStylesEntry(config));
 }
+function createFrameworkStylesEntry() {
+  return createStylesheetEntry(
+    ["@riebeckite/honox/style.css"],
+    "Framework structural styles. Generated by @riebeckite/honox; do not edit. Import this before the plugin and theme stylesheets."
+  );
+}
 function createPluginStylesEntry(config) {
   return createStylesheetEntry(
     collectPluginStyleSpecifiers(config),
@@ -1126,7 +1201,7 @@ ${imports}
 }
 function writeGeneratedFile(filePath, contents) {
   if (readGeneratedFile(filePath) === contents) return;
-  fs5.mkdirSync(path6.dirname(filePath), { recursive: true });
+  fs5.mkdirSync(path7.dirname(filePath), { recursive: true });
   fs5.writeFileSync(filePath, contents);
 }
 function readGeneratedFile(filePath) {
@@ -1200,15 +1275,15 @@ ${initializers.map((initializer) => `  ${initializer};`).join("\n")}
 
 // src/vite_runner.ts
 import fs6 from "node:fs/promises";
-import path7 from "node:path";
+import path8 from "node:path";
 import { build, createServer as createServer2 } from "vite";
 var viteConfigFileNames = [
   "vite.config.ts",
   "vite.config.js",
   "vite.config.mjs"
 ];
-async function resolveHonoxApplicationRoot(configRoot) {
-  const roots = await findViteApplicationRoots(configRoot);
+async function resolveHonoxApplicationRoot(configRoot, startDirectory) {
+  const roots = await findViteApplicationRoots(configRoot, startDirectory);
   if (roots.length === 1) return roots[0];
   if (roots.length === 0) {
     throw new HonoxApplicationRootError(
@@ -1226,9 +1301,13 @@ var HonoxApplicationRootError = class extends Error {
   }
 };
 async function resolveHonoxApplication(options) {
-  const configRoot = path7.resolve(options.configRoot);
-  const appRoot = options.appRoot ? path7.resolve(options.appRoot) : await resolveHonoxApplicationRoot(configRoot);
+  const configRoot = path8.resolve(options.configRoot);
+  const appRoot = options.appRoot ? path8.resolve(options.appRoot) : await resolveHonoxApplicationRoot(configRoot, options.startDirectory);
   const workspaceRoot = options.workspaceRoot ?? await findWorkspaceRoot(configRoot);
+  const configFile = path8.resolve(
+    configRoot,
+    options.configFile ?? "riebeckite.config.ts"
+  );
   const rawConfig = await loadRiebeckiteConfig({
     configRoot,
     configFile: options.configFile,
@@ -1238,20 +1317,21 @@ async function resolveHonoxApplication(options) {
   return {
     config,
     configRoot,
+    configFile,
     appRoot,
     contentRoot: config.content.directory
   };
 }
 async function findWorkspaceRoot(configRoot) {
   try {
-    const workspaceConfig = path7.join(configRoot, "pnpm-workspace.yaml");
+    const workspaceConfig = path8.join(configRoot, "pnpm-workspace.yaml");
     return (await fs6.stat(workspaceConfig)).isFile() ? configRoot : void 0;
   } catch {
     return void 0;
   }
 }
 async function startHonoxDevServer(options) {
-  const root = path7.resolve(options.root);
+  const root = path8.resolve(options.root);
   await withWorkingDirectory(root, async () => {
     const server = await createServer2({ root });
     await server.listen();
@@ -1260,7 +1340,7 @@ async function startHonoxDevServer(options) {
   });
 }
 async function buildHonoxApplication(options) {
-  const root = path7.resolve(options.root);
+  const root = path8.resolve(options.root);
   await withWorkingDirectory(root, async () => {
     await runTraced(
       options.tracer,
@@ -1296,7 +1376,9 @@ async function waitForShutdown(server) {
     process.once("SIGTERM", close);
   });
 }
-async function findViteApplicationRoots(root) {
+async function findViteApplicationRoots(root, startDirectory) {
+  const applicationRoot = startDirectory ? await findViteApplicationRootFrom(startDirectory, root) : void 0;
+  if (applicationRoot) return [applicationRoot];
   const directories = [root];
   const applicationRoots = [];
   while (directories.length > 0) {
@@ -1308,15 +1390,29 @@ async function findViteApplicationRoots(root) {
       if (!entry.isDirectory() || entry.name === "node_modules" || entry.name === ".git" || entry.name === "tests") {
         continue;
       }
-      directories.push(path7.join(directory, entry.name));
+      directories.push(path8.join(directory, entry.name));
     }
   }
   return applicationRoots;
 }
+async function findViteApplicationRootFrom(startDirectory, configRoot) {
+  let directory = path8.resolve(startDirectory);
+  while (isWithin(configRoot, directory)) {
+    if (await hasViteConfig(directory)) return directory;
+    const parent = path8.dirname(directory);
+    if (parent === directory) return void 0;
+    directory = parent;
+  }
+  return void 0;
+}
+function isWithin(parent, target) {
+  const relative2 = path8.relative(parent, target);
+  return relative2 === "" || !relative2.startsWith("..") && !path8.isAbsolute(relative2);
+}
 async function hasViteConfig(directory) {
   for (const fileName of viteConfigFileNames) {
     try {
-      if ((await fs6.stat(path7.join(directory, fileName))).isFile()) return true;
+      if ((await fs6.stat(path8.join(directory, fileName))).isFile()) return true;
     } catch {
     }
   }
@@ -1336,7 +1432,7 @@ var defaultSsrExternals = [
 ];
 function riebeckite(options = {}) {
   let resolvedConfig;
-  let contentWatchRoots;
+  let application;
   const getConfig = () => {
     if (!resolvedConfig) {
       throw new Error("Riebeckite config has not been loaded yet.");
@@ -1347,19 +1443,23 @@ function riebeckite(options = {}) {
     {
       name: "riebeckite-host-integration",
       async config(userConfig) {
-        const root = userConfig.root ? path8.resolve(userConfig.root) : process.cwd();
+        const root = userConfig.root ? path9.resolve(userConfig.root) : process.cwd();
         const appRoot = options.appRoot ?? root;
-        const application = await resolveHonoxApplication({
+        const resolvedApplication = await resolveHonoxApplication({
           configRoot: options.configRoot ?? appRoot,
           configFile: options.configFile,
           appRoot,
           workspaceRoot: options.workspaceRoot
         });
-        resolvedConfig = application.config;
-        contentWatchRoots = application;
+        resolvedConfig = resolvedApplication.config;
+        application = resolvedApplication;
         writeRiebeckiteAssetEntries(resolvedConfig, {
-          pluginStyles: path8.join(appRoot, "app/.riebeckite/plugin-styles.css"),
-          themeStyles: path8.join(appRoot, "app/.riebeckite/theme-styles.css")
+          frameworkStyles: path9.join(
+            appRoot,
+            "app/.riebeckite/framework-styles.css"
+          ),
+          pluginStyles: path9.join(appRoot, "app/.riebeckite/plugin-styles.css"),
+          themeStyles: path9.join(appRoot, "app/.riebeckite/theme-styles.css")
         });
         return {
           define: {
@@ -1377,22 +1477,23 @@ function riebeckite(options = {}) {
       }
     },
     riebeckiteClientModule(getConfig),
+    riebeckiteRuntimeModules(() => requireApplication(application)),
     riebeckiteContentAssets({
-      appRoot: () => requireContentWatchRoots(contentWatchRoots).appRoot,
-      contentRoot: () => requireContentWatchRoots(contentWatchRoots).contentRoot
+      appRoot: () => requireApplication(application).appRoot,
+      contentRoot: () => requireApplication(application).contentRoot
     }),
     riebeckiteContentWatch({
-      appRoot: () => requireContentWatchRoots(contentWatchRoots).appRoot,
-      contentRoot: () => requireContentWatchRoots(contentWatchRoots).contentRoot,
+      appRoot: () => requireApplication(application).appRoot,
+      contentRoot: () => requireApplication(application).contentRoot,
       exclude: () => getConfig().content.exclude ?? []
     })
   ];
 }
-function requireContentWatchRoots(roots) {
-  if (!roots) {
+function requireApplication(application) {
+  if (!application) {
     throw new Error("Riebeckite application has not been resolved yet.");
   }
-  return roots;
+  return application;
 }
 function riebeckiteVite(options = {}) {
   const { ssg, ssrExternals, ...integration } = options;

package/dist/runtime.d.ts

@@ -0,0 +1 @@
+export { resolveHonoxConfig } from "./src/resolved_config.js";

package/dist/runtime.js

@@ -0,0 +1,16 @@
+// src/resolved_config.ts
+import path from "node:path";
+function resolveHonoxConfig(config, appRoot) {
+  return {
+    ...config,
+    buildDirectory: path.join(appRoot, ".riebeckite"),
+    outputDirectory: path.join(appRoot, "dist"),
+    content: {
+      ...config.content,
+      directory: path.resolve(appRoot, config.content.directory)
+    }
+  };
+}
+export {
+  resolveHonoxConfig
+};

package/dist/server.d.ts

@@ -1,3 +1,3 @@
-export type { ResolvedContentRoute, ResolvedRiebeckiteRoute, } from "./src/content_route.js";
-export { contentRouteSsgParams, pluginPageSsgParams, resolveContentRoute, resolveRiebeckiteRoute, riebeckiteSsgParams, ssgEnumerableHandler, } from "./src/content_route.js";
+export type { ResolvedContentRequest, ResolvedContentRoute, ResolvedRiebeckiteRoute, } from "./src/content_route.js";
+export { applyRiebeckiteRouteContext, contentRouteSsgParams, pluginPageSsgParams, resolveContentRoute, resolveRiebeckiteContentRequest, resolveRiebeckiteHomeRequest, resolveRiebeckiteRoute, riebeckiteSsgParams, ssgEnumerableHandler, } from "./src/content_route.js";
 export { mountRiebeckiteEndpoints } from "./src/endpoints.js";

package/dist/server.js

@@ -1,10 +1,54 @@
 // src/content_route.ts
-import { htmlOutputPath } from "@riebeckite/core";
+import { getEntryLanguage, htmlOutputPath } from "@riebeckite/core";
 async function resolveRiebeckiteRoute(content, pathname) {
   const page = await content.resolvePage(pathname);
   if (page) return { kind: "page", page };
   return resolveContentRoute(await content.getManifest(), pathname);
 }
+function applyRiebeckiteRouteContext(c, route) {
+  if (route.kind === "page") {
+    c.set("headTags", route.page.headTags ?? []);
+    c.set("htmlLanguage", route.page.language);
+    return;
+  }
+  if (route.kind === "content") {
+    c.set("headTags", route.entry.headTags ?? []);
+    c.set("htmlLanguage", getEntryLanguage(route.entry));
+  }
+}
+var contentExtensionPattern = /\.[a-zA-Z0-9]+$/;
+async function resolveRouteRequest(c, content) {
+  const route = await resolveRiebeckiteRoute(content, c.req.path);
+  if (!route) return { kind: "response", response: c.notFound() };
+  if (route.kind === "redirect") {
+    return {
+      kind: "response",
+      response: c.redirect(route.location, route.status)
+    };
+  }
+  applyRiebeckiteRouteContext(c, route);
+  if (route.kind === "page") return { kind: "page", page: route.page };
+  const post = await content.getProcessedContent(route.entry.slug);
+  return { kind: "content", entry: route.entry, post };
+}
+async function resolveRiebeckiteContentRequest(c, content, parameter = "slug") {
+  const requestedSlug = c.req.param(parameter);
+  if (!requestedSlug) return { kind: "response", response: c.notFound() };
+  if (contentExtensionPattern.test(requestedSlug)) {
+    return { kind: "response", response: c.notFound() };
+  }
+  return resolveRouteRequest(c, content);
+}
+async function resolveRiebeckiteHomeRequest(c, content) {
+  const indexEntry = (await content.getManifest()).bySlug.get("index");
+  if (indexEntry && indexEntry.permalink !== "/") {
+    return {
+      kind: "response",
+      response: c.redirect(indexEntry.permalink, 308)
+    };
+  }
+  return resolveRouteRequest(c, content);
+}
 async function pluginPageSsgParams(content, parameter = "slug") {
   const paths = await content.getPagePaths();
   return paths.filter((path) => path !== "/").map((path) => ({ [parameter]: path.replace(/^\/+/, "") }));
@@ -192,10 +236,13 @@ function findHeader(headers, name) {
   return key ? headers[key] : void 0;
 }
 export {
+  applyRiebeckiteRouteContext,
   contentRouteSsgParams,
   mountRiebeckiteEndpoints,
   pluginPageSsgParams,
   resolveContentRoute,
+  resolveRiebeckiteContentRequest,
+  resolveRiebeckiteHomeRequest,
   resolveRiebeckiteRoute,
   riebeckiteSsgParams,
   ssgEnumerableHandler

package/dist/src/asset_entries.d.ts

@@ -1,5 +1,6 @@
 import { type ResolvedRiebeckiteConfig } from "@riebeckite/core";
 export type GeneratedAssetPaths = {
+    frameworkStyles: string;
     pluginStyles: string;
     themeStyles: string;
 };

package/dist/src/config_loader.d.ts

@@ -5,4 +5,4 @@ export type RiebeckiteConfigLoaderOptions = {
     workspaceRoot?: string;
 };
 export declare function loadRiebeckiteConfig(options: RiebeckiteConfigLoaderOptions): Promise<ResolvedRiebeckiteConfig>;
-export declare function resolveHonoxConfig(config: ResolvedRiebeckiteConfig, appRoot: string): ResolvedRiebeckiteConfig;
+export { resolveHonoxConfig } from "./resolved_config.js";

package/dist/src/content_route.d.ts

@@ -1,4 +1,4 @@
-import type { ContentManager, ContentManifest, ContentManifestEntry, ResolvedPluginPage } from "@riebeckite/core";
+import type { ContentManager, ContentManifest, ContentManifestEntry, PostContent, ResolvedPluginPage } from "@riebeckite/core";
 import type { Context, Handler, MiddlewareHandler } from "hono";
 export type ResolvedContentRoute = {
     kind: "content";
@@ -18,6 +18,48 @@ export type ResolvedRiebeckiteRoute = Exclude<ResolvedContentRoute, null> | {
  * HonoX routes themselves.
  */
 export declare function resolveRiebeckiteRoute(content: Pick<ContentManager, "resolvePage" | "getManifest">, pathname: string): Promise<ResolvedRiebeckiteRoute>;
+/**
+ * The resolved route request a Site consumes from a catch-all content route.
+ *
+ * `content` carries everything the Site composition needs; `page` and
+ * `response` are framework mechanics the Site forwards without interpreting.
+ */
+export type ResolvedContentRequest = {
+    kind: "content";
+    entry: ContentManifestEntry;
+    post: PostContent;
+} | {
+    kind: "page";
+    page: ResolvedPluginPage;
+} | {
+    kind: "response";
+    response: Response | Promise<Response>;
+};
+/**
+ * Assigns the resolved route metadata to the request context.
+ *
+ * Plugins and primitives read `htmlLanguage` and `headTags` from the context,
+ * so the resolver owns their values instead of each route rebuilding them.
+ */
+export declare function applyRiebeckiteRouteContext(c: Context, route: Exclude<ResolvedRiebeckiteRoute, null>): void;
+type RouteContent = Pick<ContentManager, "resolvePage" | "getManifest" | "getProcessedContent">;
+/**
+ * Resolves a catch-all content request into what a Site should render.
+ *
+ * Owns the route mechanics a Site must not repeat: the wildcard and content
+ * extension guards, plugin page vs content resolution, redirect and not-found
+ * responses, context assignment, and loading the processed content.
+ */
+export declare function resolveRiebeckiteContentRequest(c: Context, content: RouteContent, parameter?: string): Promise<ResolvedContentRequest>;
+/**
+ * Resolves the `/` Homepage request into what a Site should render.
+ *
+ * Shares every catch-all mechanic with `resolveRiebeckiteContentRequest` but
+ * has no wildcard parameter to guard. It additionally owns the configured-index
+ * redirect: when the `index` content is permalinked away from `/`, the root
+ * forwards there instead of resolving another route.
+ */
+export declare function resolveRiebeckiteHomeRequest(c: Context, content: RouteContent): Promise<ResolvedContentRequest>;
 /** Returns catch-all parameters for every plugin page registered for SSG. */
 export declare function pluginPageSsgParams(content: Pick<ContentManager, "getPagePaths">, parameter?: string): Promise<Record<string, string>[]>;
 export declare function riebeckiteSsgParams(content: Pick<ContentManager, "getManifest" | "getOutputChangeSet" | "getPagePaths">, parameter?: string): Promise<Record<string, string>[]>;

package/dist/src/resolved_config.d.ts

@@ -0,0 +1,7 @@
+import type { ResolvedRiebeckiteConfig } from "@riebeckite/core";
+/**
+ * Applies the application root to a resolved Riebeckite configuration. The
+ * generated site bootstrap imports this through `@riebeckite/honox/runtime`
+ * so the resolved config and content runtime stay framework-owned.
+ */
+export declare function resolveHonoxConfig(config: ResolvedRiebeckiteConfig, appRoot: string): ResolvedRiebeckiteConfig;

package/dist/src/runtime_modules.d.ts

@@ -0,0 +1,11 @@
+import type { Plugin } from "vite";
+import type { ResolvedHonoxApplication } from "./vite_runner.js";
+export declare const riebeckiteConfigModuleId = "virtual:riebeckite/config";
+export declare const riebeckiteContentModuleId = "virtual:riebeckite/content";
+/**
+ * Provides the framework-owned bootstrap modules a generated site imports
+ * instead of keeping resolved-config and content-manager ceremony in
+ * `app/config.ts` and `app/content.ts`.
+ */
+export declare function riebeckiteRuntimeModules(getApplication: () => ResolvedHonoxApplication): Plugin;
+export declare function isRiebeckiteRuntimeModuleId(id: string | null | undefined): boolean;

package/dist/src/ui/primitives.d.ts

@@ -1,3 +1,4 @@
+import type { ContentBodySlot, ContentBodySlots, PluginHeadTag, ResolvedRiebeckiteConfig } from "@riebeckite/core";
 export type PrimitiveChildren = unknown;
 export type PrimitiveProps = {
     children?: PrimitiveChildren;
@@ -11,9 +12,7 @@ export type PrimitiveClassProps = {
 export type ArticleProps = PrimitiveProps & {
     "data-slot"?: string;
 };
-export type ArticleLayoutProps = PrimitiveProps & {
-    aside?: PrimitiveChildren;
-};
+export type ArticleLayoutProps = PrimitiveProps;
 export type ArticleHeaderProps = (PrimitiveClassProps & {
     dangerouslySetInnerHTML: {
         __html: string;
@@ -23,15 +22,10 @@ export type ArticleHeaderProps = (PrimitiveClassProps & {
     dangerouslySetInnerHTML?: never;
     children?: PrimitiveChildren;
 });
-export type ArticleContentProps = (PrimitiveClassProps & {
-    html: string;
-    children?: never;
-    "data-slot"?: string;
-}) | (PrimitiveClassProps & {
-    html?: never;
+export type ArticleContentProps = PrimitiveClassProps & {
     children?: PrimitiveChildren;
     "data-slot"?: string;
-});
+};
 export type ArticleMetaProps = PrimitiveProps & {
     label?: string;
 };
@@ -44,5 +38,88 @@ export declare function ArticleLayout(props: ArticleLayoutProps): import("hono/j
 export declare function ArticleHeader(props: ArticleHeaderProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
 export declare function ArticleMeta(props: ArticleMetaProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
 export declare function ArticleContent(props: ArticleContentProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export type ArticleBodyProps = PrimitiveClassProps & {
+    html: string;
+};
+export type ContentSlotProps = PrimitiveClassProps & {
+    slots?: ContentBodySlots;
+    name: ContentBodySlot;
+};
+/**
+ * Whether a body slot holds renderable content.
+ *
+ * A slot is absent when its source map is missing, the value is missing, or
+ * the value is whitespace-only. This is the same check `ContentSlot` uses.
+ */
+export declare function hasSlot(slots: ContentBodySlots | undefined, name: ContentBodySlot): boolean;
+/**
+ * Renders a Plugin-provided body slot fragment at the position the Site chose.
+ *
+ * The Site owns placement; this primitive owns the lookup, empty handling, and
+ * HTML injection. It renders nothing when the slot is absent or blank.
+ */
+export declare function ContentSlot(props: ContentSlotProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+/**
+ * Renders Markdown-produced HTML as the canonical article body.
+ *
+ * Owns the `.rb-article-content` Stable Hook so Sites never hand-write it.
+ */
+export declare function ArticleBody(props: ArticleBodyProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export type PageBodyProps = PrimitiveClassProps & {
+    html: string;
+};
+/**
+ * Renders framework-resolved Plugin Page HTML.
+ *
+ * Owns the raw injection of a `PluginPageType` body so Sites never hand-write
+ * `dangerouslySetInnerHTML` for a resolved page.
+ */
+export declare function PageBody(props: PageBodyProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
 export declare function ArticleFooter(props: ArticleFooterProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
 export declare function Sidebar(props: SidebarProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export type ThemeRootProps = {
+    theme: ResolvedRiebeckiteConfig["theme"];
+    lang?: string;
+    children?: PrimitiveChildren;
+};
+/**
+ * Derives the `<html>` attributes from a resolved theme.
+ *
+ * Combines the theme's custom `data-*` attributes with the reserved
+ * color-mode, name, typography, and article-layout attributes.
+ */
+export declare function themeRootAttributes(theme: ResolvedRiebeckiteConfig["theme"]): Record<string, string | undefined>;
+/**
+ * Root `<html>` element carrying the resolved theme's attributes.
+ *
+ * The Site keeps ownership of the document composition by rendering its own
+ * `<head>` and `<body>` as children.
+ */
+export declare function ThemeRoot(props: ThemeRootProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export type PluginHeadTagsProps = {
+    tags?: readonly PluginHeadTag[];
+};
+/**
+ * Renders Plugin-provided head tags as `meta` / `link` / `script` elements.
+ *
+ * The Site owns placement; this primitive owns the conversion and ordering.
+ */
+export declare function PluginHeadTags(props: PluginHeadTagsProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export type RiebeckiteHeadProps = {
+    title: string;
+    headTags?: readonly PluginHeadTag[];
+    faviconHref?: string | null;
+    colorModeScript?: boolean;
+    stylesheets?: readonly string[];
+    clientSrc?: string | null;
+    prod?: boolean;
+    children?: PrimitiveChildren;
+};
+/**
+ * Renders the standard Riebeckite `<head>` contents.
+ *
+ * Owns the charset, viewport, default title, favicon, color-mode bootstrap,
+ * stylesheet and client entries, and Plugin head tags. The Site keeps the
+ * surrounding `<head>` so it can add its own elements next to this primitive.
+ */
+export declare function RiebeckiteHead(props: RiebeckiteHeadProps): import("hono/jsx/jsx-dev-runtime").JSX.Element;

package/dist/src/ui/primitives.js

@@ -1,5 +1,8 @@
 // src/ui/primitives.tsx
-import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { ColorModeScript } from "@riebeckite/plugin-color-mode";
+import { Link, Script } from "honox/server";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createElement } from "hono/jsx";
 function Article(props) {
   return /* @__PURE__ */ jsx(
     "article",
@@ -11,14 +14,11 @@ function Article(props) {
   );
 }
 function ArticleLayout(props) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       class: joinClassNames("rb-article-layout", props.class, props.className),
-      children: [
-        props.children,
-        props.aside
-      ]
+      children: props.children
     }
   );
 }
@@ -56,18 +56,43 @@ function ArticleContent(props) {
     props.className
   );
   const dataSlot = props["data-slot"] ?? "article-body";
-  if (props.html !== void 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        class: className,
-        "data-slot": dataSlot,
-        dangerouslySetInnerHTML: { __html: props.html }
-      }
-    );
-  }
   return /* @__PURE__ */ jsx("div", { class: className, "data-slot": dataSlot, children: props.children });
 }
+function hasSlot(slots, name) {
+  return Boolean(slots?.[name]?.trim());
+}
+function ContentSlot(props) {
+  const html = props.slots?.[props.name];
+  if (!html?.trim()) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": props.name,
+      class: joinClassNames(props.class, props.className) || void 0,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+function ArticleBody(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: joinClassNames("rb-article-content", props.class, props.className),
+      dangerouslySetInnerHTML: { __html: props.html }
+    }
+  );
+}
+function PageBody(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: joinClassNames(props.class, props.className) || void 0,
+      dangerouslySetInnerHTML: { __html: props.html }
+    }
+  );
+}
 function ArticleFooter(props) {
   return /* @__PURE__ */ jsx(
     "footer",
@@ -87,15 +112,72 @@ function Sidebar(props) {
     }
   );
 }
+function themeRootAttributes(theme) {
+  return {
+    ...theme.attributes,
+    "data-theme": theme.colorMode === "system" ? void 0 : theme.colorMode,
+    "data-theme-name": theme.name,
+    "data-typography": theme.typography,
+    "data-article-layout": theme.articleLayout
+  };
+}
+function ThemeRoot(props) {
+  return /* @__PURE__ */ jsx("html", { lang: props.lang, ...themeRootAttributes(props.theme), children: props.children });
+}
+function PluginHeadTags(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.tags?.map(renderPluginHeadTag) });
+}
+function renderPluginHeadTag(tag, index) {
+  const key = `${tag.tag}-${index}`;
+  if (tag.tag === "meta") {
+    return /* @__PURE__ */ createElement("meta", { ...tag.attrs, key });
+  }
+  if (tag.tag === "link") {
+    return /* @__PURE__ */ createElement("link", { ...tag.attrs, key });
+  }
+  return /* @__PURE__ */ createElement(
+    "script",
+    {
+      ...tag.attrs,
+      key,
+      dangerouslySetInnerHTML: tag.children ? { __html: tag.children } : void 0
+    }
+  );
+}
+function RiebeckiteHead(props) {
+  const faviconHref = props.faviconHref === void 0 ? "/favicon.ico" : props.faviconHref;
+  const stylesheets = props.stylesheets ?? ["/app/style.css"];
+  const clientSrc = props.clientSrc === void 0 ? "/app/client.ts" : props.clientSrc;
+  const colorModeScript = props.colorModeScript ?? true;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("meta", { charset: "utf-8" }),
+    /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }),
+    /* @__PURE__ */ jsx("title", { children: props.title }),
+    faviconHref ? /* @__PURE__ */ jsx("link", { rel: "icon", href: faviconHref }) : null,
+    colorModeScript ? /* @__PURE__ */ jsx(ColorModeScript, {}) : null,
+    stylesheets.map((href) => /* @__PURE__ */ jsx(Link, { href, rel: "stylesheet", prod: props.prod }, href)),
+    /* @__PURE__ */ jsx(PluginHeadTags, { tags: props.headTags }),
+    clientSrc ? /* @__PURE__ */ jsx(Script, { src: clientSrc, async: true, prod: props.prod }) : null,
+    props.children
+  ] });
+}
 function joinClassNames(...classNames) {
   return classNames.filter(Boolean).join(" ");
 }
 export {
   Article,
+  ArticleBody,
   ArticleContent,
   ArticleFooter,
   ArticleHeader,
   ArticleLayout,
   ArticleMeta,
-  Sidebar
+  ContentSlot,
+  PageBody,
+  PluginHeadTags,
+  RiebeckiteHead,
+  Sidebar,
+  ThemeRoot,
+  hasSlot,
+  themeRootAttributes
 };

package/dist/src/vite_runner.d.ts

@@ -7,13 +7,15 @@ export type HonoxApplicationOptions = {
 export type ResolvedHonoxApplication = {
     config: ResolvedRiebeckiteConfig;
     configRoot: string;
+    configFile: string;
     appRoot: string;
     contentRoot: string;
 };
 export type ResolveHonoxApplicationOptions = RiebeckiteConfigLoaderOptions & {
     appRoot?: string;
+    startDirectory?: string;
 };
-export declare function resolveHonoxApplicationRoot(configRoot: string): Promise<string>;
+export declare function resolveHonoxApplicationRoot(configRoot: string, startDirectory?: string): Promise<string>;
 export declare class HonoxApplicationRootError extends Error {
     constructor(message: string);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/honox",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,23 +18,32 @@
       "source": "./server.ts",
       "default": "./dist/server.js"
     },
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js",
+      "source": "./runtime.ts",
+      "default": "./dist/runtime.js"
+    },
     "./ui": {
       "types": "./dist/src/ui/primitives.d.ts",
       "import": "./dist/src/ui/primitives.js",
       "source": "./src/ui/primitives.tsx",
       "default": "./dist/src/ui/primitives.js"
-    }
+    },
+    "./style.css": "./style.css"
   },
   "dependencies": {
     "@babel/parser": "^7.29.3",
     "esbuild": "^0.28.2",
     "hono": "^4.12.25",
+    "honox": "0.1.56",
     "vite": "^8.0.9",
-    "@riebeckite/core": "0.0.18"
+    "@riebeckite/core": "0.0.20",
+    "@riebeckite/plugin-color-mode": "0.0.20"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.18"
+    "@riebeckite/test": "0.0.20"
   },
   "publishConfig": {
     "access": "public"
@@ -43,7 +52,8 @@
     "LICENSE",
     "README.md",
     "README_ja.md",
-    "dist"
+    "dist",
+    "style.css"
   ],
   "repository": {
     "type": "git",
@@ -64,7 +74,9 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./style.css"
+  ],
   "scripts": {
     "build": "node ../../../scripts/build_package.mjs",
     "test": "node --import tsx --test \"test/*.test.ts\""

package/style.css

@@ -0,0 +1,55 @@
+@layer components {
+  .rb-article-layout {
+    display: grid;
+    grid-template-columns: minmax(0, var(--rb-layout-article-max, 48rem));
+    justify-content: center;
+    column-gap: var(--rb-layout-gap, 2rem);
+  }
+
+  .rb-article-body {
+    min-width: 0;
+  }
+
+  :is(:root, .rb-theme-root)[data-article-layout="full-width"]
+    .rb-article-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  @media (min-width: 88rem) {
+    :is(:root, .rb-theme-root)[data-article-layout="sidebar"]
+      .rb-article-layout {
+      grid-template-columns:
+        minmax(0, var(--rb-layout-article-max, 48rem))
+        var(--rb-layout-sidebar, 14rem);
+    }
+
+    :is(:root, .rb-theme-root)[data-article-layout="article"]
+      .rb-article-layout {
+      position: relative;
+    }
+
+    :is(:root, .rb-theme-root)[data-article-layout="article"] .rb-article-body,
+    :is(:root, .rb-theme-root)[data-article-layout="sidebar"] .rb-article-body {
+      grid-column: 1;
+      grid-row: 1;
+    }
+  }
+
+  .rb-skip-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    padding: var(--rb-space-2, 1rem) var(--rb-space-3, 1.5rem);
+    border: var(--rb-rule-width, 1px) solid var(--rb-color-border-strong);
+    border-radius: var(--rb-default-radius-sm, 0.25rem);
+    background: var(--rb-color-surface);
+    color: var(--rb-color-ink);
+    text-decoration: none;
+    transform: translateY(-200%);
+  }
+
+  .rb-skip-link:focus {
+    transform: translateY(0);
+  }
+}