@monster-orange/den 0.2.7 → 0.3.0

package/src/ui/server/theme-runtime.ts

@@ -0,0 +1,407 @@
+/**
+ * The theme runtime: which theme the web UI draws with, and that theme as CSS.
+ *
+ * Themes come from three places (see src/ui/cli/theme-command.ts):
+ *   built-in  <engineRoot>/themes/den/          Den's own, always present
+ *   locked    <distRoot>/plugins/<id>/ + lock   vendored by `theme add`
+ *   local     <distRoot>/plugins/<id>/, no lock the distribution's own
+ *
+ * The active theme is the user's choice (user.yml `appearance.theme`), else
+ * the distribution's (org config `brand.theme`), else den. A choice that is not
+ * installed or fails validation falls through to the next, ending at den,
+ * with one warning in the server log per bad choice. Only a validated
+ * manifest is ever rendered: its values passed the schema's CSS-value rule
+ * (no ; { } < > \ url() @import), so writing them into custom properties
+ * cannot break out of the declaration.
+ */
+import * as fs from "fs";
+import * as path from "path";
+import {
+  installedThemeIds,
+  readLock,
+  themeDirFor,
+  validationSummary,
+} from "../cli/theme-command.js";
+import {
+  themeDirIn,
+  validatePluginDir,
+} from "../../shared/plugins/manifest.js";
+import {
+  markImage,
+  themeFiles,
+  validateThemeDir,
+  type ColorToken,
+  type ThemeManifest,
+  type ThemeMode,
+} from "../../shared/theme/contract.js";
+
+export const BUILTIN_THEME = "den";
+
+export type ThemeOrigin = "built-in" | "locked" | "local";
+
+export interface ThemeRoots {
+  distRoot: string;
+  engineRoot: string;
+}
+
+export interface InstalledTheme {
+  id: string;
+  name: string;
+  version: string;
+  source: ThemeOrigin;
+  /** Validates under this Den: only then is it rendered or served. */
+  ok: boolean;
+  /** Why it is not ok. */
+  problem?: string;
+  dir: string;
+  theme?: ThemeManifest;
+}
+
+export const COLOR_TOKENS: readonly ColorToken[] = [
+  "bg",
+  "surface",
+  "raised",
+  "sunken",
+  "text",
+  "muted",
+  "faint",
+  "border",
+  "border-strong",
+  "accent",
+  "accent-text",
+  "accent-fill",
+  "on-accent",
+  "ok",
+  "warn",
+  "bad",
+  "remote",
+];
+
+export function builtinThemeDir(engineRoot: string): string {
+  return path.join(engineRoot, "themes", BUILTIN_THEME);
+}
+
+function inspect(
+  id: string,
+  dir: string,
+  source: ThemeOrigin,
+  expectId?: string,
+  pluginDir?: string,
+): InstalledTheme {
+  // The theme itself, to render; the verdict is `validate`'s for the whole
+  // plugin (author/maintainer, `den` range, README, capabilities), so what
+  // fails validate never loads and is never offered (PL-SPEC d4).
+  const v = validateThemeDir(dir, expectId ? { expectId } : {});
+  const verdict = validatePluginDir(
+    pluginDir ?? dir,
+    expectId ? { expectId } : {},
+  );
+  const ok = v.ok && verdict.ok;
+  return {
+    id,
+    name: v.theme?.name ?? id,
+    version: v.theme?.version ?? "?",
+    source,
+    ok,
+    ...(ok ? {} : { problem: validationSummary(verdict.ok ? v : verdict) }),
+    dir,
+    ...(v.theme ? { theme: v.theme } : {}),
+  };
+}
+
+/**
+ * Where plugin `id`'s theme is: plugins/<id>/ for a den-theme.json plugin,
+ * else the directory its den-plugin.json theme entry names.
+ */
+function pluginThemeDir(distRoot: string, id: string): string {
+  const dir = themeDirFor(distRoot, id);
+  return themeDirIn(dir) ?? dir;
+}
+
+/** Every theme this distribution can use: den first, then plugins/<id>/ sorted. */
+export function listThemes(roots: ThemeRoots): InstalledTheme[] {
+  let lock: ReturnType<typeof readLock> = {};
+  try {
+    lock = readLock(roots.distRoot);
+  } catch {
+    /* an unreadable lock: every theme is then local; `theme list` reports it */
+  }
+  const out = [
+    inspect(BUILTIN_THEME, builtinThemeDir(roots.engineRoot), "built-in"),
+  ];
+  for (const id of installedThemeIds(roots.distRoot)) {
+    if (id === BUILTIN_THEME) continue; // the built-in one is never shadowed
+    out.push(
+      inspect(
+        id,
+        pluginThemeDir(roots.distRoot, id),
+        lock[id]?.kinds?.includes("theme") ? "locked" : "local",
+        id,
+        themeDirFor(roots.distRoot, id),
+      ),
+    );
+  }
+  return out;
+}
+
+/** One theme by id, or null when no such theme is installed. */
+export function findTheme(
+  roots: ThemeRoots,
+  id: string,
+): InstalledTheme | null {
+  if (id === BUILTIN_THEME)
+    return inspect(id, builtinThemeDir(roots.engineRoot), "built-in");
+  if (!/^[a-z][a-z0-9-]{1,39}$/.test(id)) return null;
+  if (!installedThemeIds(roots.distRoot).includes(id)) return null;
+  let locked = false;
+  try {
+    locked = !!readLock(roots.distRoot)[id]?.kinds?.includes("theme");
+  } catch {
+    /* see listThemes */
+  }
+  return inspect(
+    id,
+    pluginThemeDir(roots.distRoot, id),
+    locked ? "locked" : "local",
+    id,
+    themeDirFor(roots.distRoot, id),
+  );
+}
+
+export interface ThemeChoice {
+  /** user.yml `appearance.theme`. */
+  user?: string | null;
+  /** The org config's `brand.theme`. */
+  distribution?: string | null;
+}
+
+export interface ActiveTheme {
+  id: string;
+  theme: ThemeManifest;
+  dir: string;
+  source: ThemeOrigin;
+  /** Which choice won. */
+  chosenBy: "user" | "distribution" | "default";
+}
+
+const warned = new Set<string>();
+
+/** Forget which warnings were logged (tests). */
+export function resetThemeWarnings(): void {
+  warned.clear();
+}
+
+/**
+ * The theme to draw with. Never throws: a bad choice is warned about once
+ * and skipped. Null only if Den's own theme is unusable (a broken install).
+ */
+export function resolveActiveTheme(
+  roots: ThemeRoots,
+  choice: ThemeChoice,
+  warn: (line: string) => void = (l) => console.warn(l),
+): ActiveTheme | null {
+  const candidates: [string, ActiveTheme["chosenBy"], string][] = [];
+  if (choice.user) candidates.push([choice.user, "user", "your appearance"]);
+  if (choice.distribution)
+    candidates.push([
+      choice.distribution,
+      "distribution",
+      "the distribution's `brand.theme`",
+    ]);
+  candidates.push([BUILTIN_THEME, "default", "the default"]);
+  for (const [id, chosenBy, label] of candidates) {
+    let t: InstalledTheme | null = null;
+    try {
+      t = findTheme(roots, String(id));
+    } catch (e) {
+      t = null;
+      warnOnce(
+        warn,
+        `${id}:error`,
+        () =>
+          `theme "${id}" (${label}) could not be read: ${(e as Error).message}`,
+      );
+    }
+    if (t?.ok && t.theme)
+      return {
+        id: t.id,
+        theme: t.theme,
+        dir: t.dir,
+        source: t.source,
+        chosenBy,
+      };
+    if (id === BUILTIN_THEME && chosenBy === "default") {
+      warnOnce(
+        warn,
+        "den:broken",
+        () =>
+          `the built-in theme is not valid (${t?.problem ?? "missing"}); the UI has no theme`,
+      );
+      return null;
+    }
+    warnOnce(warn, `${id}:${t ? "invalid" : "missing"}`, () =>
+      t
+        ? `theme "${id}" (${label}) is not valid under this Den: ${t.problem}; using the next choice`
+        : `theme "${id}" (${label}) is not installed; using the next choice`,
+    );
+  }
+  return null;
+}
+
+function warnOnce(
+  warn: (line: string) => void,
+  key: string,
+  line: () => string,
+): void {
+  if (warned.has(key)) return;
+  warned.add(key);
+  warn(`[theme] ${line()}`);
+}
+
+/** URL of a file in a theme, as /theme/<id>/<file> serves it. */
+export function themeAssetUrl(id: string, rel: string): string {
+  return `/theme/${id}/${rel.split("/").map(encodeURIComponent).join("/")}`;
+}
+
+const DEFAULT_TYPE = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  ja: '"Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif',
+};
+
+/** A generic family ends a stack that can always resolve. */
+const GENERIC_FAMILY =
+  /(?:^|,)\s*(?:sans-serif|serif|monospace|cursive|fantasy|system-ui|ui-sans-serif|ui-serif|ui-monospace|ui-rounded|math|emoji)\s*$/i;
+
+/**
+ * A theme's font stack, made safe to use alone: one that does not end in a
+ * generic family gets Den's stack after it, so a missing font never drops
+ * the UI to the browser's default serif. The pages use only var(--sans),
+ * var(--mono), var(--display); the fallbacks live here, nowhere else.
+ */
+export function fontStack(stack: string | undefined, fallback: string): string {
+  if (!stack?.trim()) return fallback;
+  return GENERIC_FAMILY.test(stack) ? stack : `${stack}, ${fallback}`;
+}
+
+/**
+ * Den's base rules, the same under every theme. A link in body content is
+ * underlined (subtly, in a tint of its own color), so it never reads by
+ * color alone: a theme whose accent text is red would otherwise make links
+ * look like errors next to --bad. Nav links, buttons and pills are not
+ * body content. :where() keeps the rule at zero specificity, so any page
+ * style that draws a link differently wins.
+ */
+const BASE_CSS = [
+  "/* Den base (every theme) */",
+  ':where(a[href]:not(nav a, header a, .topbar a, [role="button"], [class*="btn"], [class*="pill"], [class*="tab"])) {',
+  "  text-decoration-line: underline;",
+  "  text-decoration-thickness: 1px;",
+  "  text-underline-offset: 0.2em;",
+  "  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);",
+  "}",
+  ':where(a[href]:not(nav a, header a, .topbar a, [role="button"], [class*="btn"], [class*="pill"], [class*="tab"])):hover {',
+  "  text-decoration-color: currentColor;",
+  "}",
+];
+
+/**
+ * The theme as CSS: @font-face for its fonts, type and shape on :root, and
+ * one block of color tokens per mode, selected by <html data-mode>. The
+ * theme's default mode also applies when data-mode is unset. Then Den's
+ * base rules (BASE_CSS).
+ */
+export function renderThemeCss(id: string, theme: ThemeManifest): string {
+  const lines: string[] = [
+    `/* ${theme.name} ${theme.version} (${id}, den.theme/v1). Generated by Den from den-theme.json. */`,
+  ];
+  for (const f of theme.fonts ?? [])
+    for (const file of f.files) {
+      const [lo, hi] = (file.weight ?? "400").split(" ");
+      lines.push(
+        `@font-face { font-family: "${f.family}"; src: url("${themeAssetUrl(id, file.path)}") format("woff2"); font-weight: ${hi ? `${lo} ${hi}` : lo}; font-style: ${file.style ?? "normal"}; font-display: swap; }`,
+      );
+    }
+  const type = theme.type ?? {};
+  const shape = theme.shape ?? {};
+  const sans = fontStack(type.sans, DEFAULT_TYPE.sans);
+  lines.push(
+    ":root {",
+    `  --sans: ${sans};`,
+    `  --mono: ${fontStack(type.mono, DEFAULT_TYPE.mono)};`,
+    `  --display: ${fontStack(type.display, sans)};`,
+    `  --ja: ${fontStack(type.ja, DEFAULT_TYPE.ja)};`,
+    `  --radius: ${shape.radius ?? "8px"};`,
+    `  --radius-button: ${shape["radius-button"] ?? "6px"};`,
+    `  --density: ${shape.density === "compact" ? "0.85" : "1"};`,
+    "}",
+  );
+  const def: ThemeMode = theme.default_mode ?? "dark";
+  for (const mode of [def, def === "dark" ? "light" : "dark"] as ThemeMode[]) {
+    const c = theme.modes[mode];
+    const sel =
+      mode === def
+        ? `:root,\n:root[data-mode="${mode}"]`
+        : `:root[data-mode="${mode}"]`;
+    lines.push(`${sel} {`, `  color-scheme: ${mode};`);
+    for (const t of COLOR_TOKENS) lines.push(`  --${t}: ${c[t]};`);
+    lines.push(
+      `  --shadow: ${c.shadow ?? (mode === "dark" ? "0 12px 30px rgb(0 0 0 / 0.5)" : "0 8px 24px rgb(0 0 0 / 0.14)")};`,
+      `  --bar: ${c.bar ?? "none"};`,
+      "}",
+    );
+  }
+  lines.push(...BASE_CSS);
+  return `${lines.join("\n")}\n`;
+}
+
+const ASSET_TYPES: Record<string, string> = {
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff2": "font/woff2",
+};
+
+/**
+ * The theme's browser-tab icon in a mode, relative to its directory: its
+ * `favicon` (both modes), else its mark's image (the dark variant in dark
+ * mode, if it has one), else null (a text mark: Den's own icon).
+ */
+export function faviconFile(
+  theme: ThemeManifest,
+  mode: ThemeMode,
+): string | null {
+  return theme.favicon ?? markImage(theme.mark, mode)?.file ?? null;
+}
+
+/**
+ * The file /theme/<id>/<rel> may serve, or null: only a file the validated
+ * manifest names (its mark, its favicon, its fonts), only .svg, .png,
+ * .webp, .ico or .woff2, only inside the theme's directory. `rel` is the
+ * decoded remainder of the URL path.
+ */
+export function themeAsset(
+  roots: ThemeRoots,
+  id: string,
+  rel: string,
+): { file: string; type: string } | null {
+  const type = ASSET_TYPES[path.extname(rel).toLowerCase()];
+  if (!type) return null;
+  const t = findTheme(roots, id);
+  if (!t?.ok || !t.theme) return null;
+  if (!themeFiles(t.theme).includes(rel)) return null;
+  const root = path.resolve(t.dir);
+  const file = path.resolve(root, rel);
+  if (!file.startsWith(root + path.sep)) return null;
+  try {
+    // Resolve links too: the real file must still be inside the theme.
+    const real = fs.realpathSync(file);
+    const realRoot = fs.realpathSync(root);
+    if (!real.startsWith(realRoot + path.sep) || !fs.statSync(real).isFile())
+      return null;
+    return { file: real, type };
+  } catch {
+    return null;
+  }
+}

package/src/ui/server/ui-assets.ts

@@ -1,6 +1,8 @@
 /**
  * Static assets the graph needs beyond the pages themselves:
- *   - the graph's own modules in public/ (UI_MODULES), served like header.js;
+ *   - the UI's own modules in public/ (UI_MODULES: the graph, the appearance
+ *     controls, the version label, the top bar's chips and overlays),
+ *     served like header.js;
  *   - browser libraries the UI loads, served by Den's own server from
  * node_modules (never a CDN), so the UI works offline. Each is a pinned
  * dependency in package.json. npm hoists Den's dependencies into a
@@ -19,7 +21,20 @@ export const UI_MODULES: readonly string[] = [
   "/graph-model.js",
   "/panel.js",
   "/graph.css",
+  "/appearance.js",
+  "/version-label.js",
   "/changelog-view.js",
+  "/health-fit.js",
+  "/health-rollup.js",
+  "/shell.js",
+  "/settings-registry.js",
+  "/settings-page.js",
+  "/topbar.js",
+  "/edge-page.js",
+  "/error-page.js",
+  // The UI's catalogs other than English (R19; en is in shell.js).
+  "/i18n/ja.js",
+  "/i18n/es.js",
 ];
 
 /** URL path → file inside node_modules. */

package/src/ui/server/ui-language.ts

@@ -0,0 +1,50 @@
+/**
+ * The web UI's language (R19, 0.3.0-dev.39): a user pref, stored as
+ * `language:` in config/local/user.yml and served by /api/settings, like
+ * `editor`. Absent means English.
+ *
+ * The catalogs are public/shell.js's MESSAGES (en, the fallback) and one
+ * classic script per other language, public/i18n/<lang>.js, which adds its
+ * table to window.denMessages before shell.js runs. A page served in a
+ * language other than English gets that script and `<html lang>` from
+ * localizePage, so the first paint is already in that language. An English
+ * page is served exactly as it is on disk.
+ *
+ * Only Den's own words are translated: names (services, workspaces, repos,
+ * themes, languages), logs and command output never are.
+ */
+
+/** Every language the UI ships a catalog for; the first is the fallback. */
+export const UI_LANGUAGES = ["en", "ja", "es"] as const;
+export type UiLanguage = (typeof UI_LANGUAGES)[number];
+export const DEFAULT_UI_LANGUAGE: UiLanguage = "en";
+
+export function isUiLanguage(v: unknown): v is UiLanguage {
+  return (
+    typeof v === "string" && (UI_LANGUAGES as readonly string[]).includes(v)
+  );
+}
+
+/** The stored value, normalised: an unknown or missing one is English. */
+export function uiLanguage(stored: unknown): UiLanguage {
+  return isUiLanguage(stored) ? stored : DEFAULT_UI_LANGUAGE;
+}
+
+/** The catalog script a language's pages load before shell.js (none for en). */
+export function catalogPath(lang: UiLanguage): string | null {
+  return lang === DEFAULT_UI_LANGUAGE ? null : `/i18n/${lang}.js`;
+}
+
+/**
+ * A page in `lang`: `<html lang>` set, and the language's catalog loaded
+ * just before shell.js, so the shell draws in it from the first paint.
+ * English, or a page without the shell, comes back unchanged.
+ */
+export function localizePage(html: string, lang: UiLanguage): string {
+  const src = catalogPath(lang);
+  const shell = '<script src="/shell.js"></script>';
+  if (!src || !html.includes(shell)) return html;
+  return html
+    .replace(/<html lang="[^"]*"/, () => `<html lang="${lang}"`)
+    .replace(shell, () => `<script src="${src}"></script>${shell}`);
+}

package/src/ui/server/workspace-routes.ts

@@ -19,6 +19,7 @@ import type { ResolvedService } from "../../shared/types/index.js";
 import type { EditorManager } from "./editor-manager.js";
 import type { GitHubService } from "./github-service.js";
 import { JETBRAINS_EDITORS } from "./editor-manager.js";
+import { stackNamespaceRows } from "../../shared/stacks/namespace.js";
 import {
   readWorkspacesFile,
   writeWorkspacesFile,
@@ -44,6 +45,7 @@ import {
 import {
   checkServiceHealth,
   claimHealthyService,
+  settledDaemonRecord,
   runServiceCommand,
   prepareServiceSecretEnv,
   resolveService,
@@ -86,10 +88,12 @@ import { depService } from "../../shared/manifest/deps.js";
 import { waitForReady } from "../../shared/environment-manager/readiness.js";
 import {
   readCatalog,
-  resolveRepoGhSlug,
+  needsGhRepair,
+  resolveRepoCloneSource,
   upsertCatalogEntry,
 } from "../../shared/environment-manager/catalog.js";
 import { getReposRoot, readUserConfig } from "../../shared/den-config.js";
+import { redactRemote } from "../../shared/environment-manager/git-remote.js";
 import { getDistRoot } from "../../shared/paths.js";
 import { recordRemovedFromWorkspace } from "../../shared/environment-manager/default-workspace.js";
 import { getSudoEnv, prewarmSudo } from "./sudo-store.js";
@@ -320,7 +324,7 @@ async function buildAvailableRepos(wsOverride: string | null) {
       hasManifest: false,
       alreadyAdded,
       source: "catalog",
-      gh: entry.gh,
+      gh: entry.gh ?? null,
     });
   }
 
@@ -550,7 +554,21 @@ export async function handleWorkspaceRoutes(
       syncJetBrainsWorkspaceSymlinks(wsFile);
     }
 
-    return sendJson(res, { ...wsFile, resolvedDirs, codeWorkspacePaths });
+    // Each workspace's stack namespace, resolved, with where it came from
+    // (workspace, blueprint or default) and whether it differs from the
+    // default suffix: the page's "stacks: <ns>" chip.
+    const stackNamespaces = Object.fromEntries(
+      stackNamespaceRows(Object.keys(wsFile.workspaces)).map((r) => [
+        r.workspace,
+        r,
+      ]),
+    );
+    return sendJson(res, {
+      ...wsFile,
+      resolvedDirs,
+      codeWorkspacePaths,
+      stackNamespaces,
+    });
   }
 
   // ── API: rename workspace ─────────────────────────────────────────────────
@@ -1773,10 +1791,31 @@ export async function handleWorkspaceRoutes(
           if (cmd === "up") {
             const health = await checkServiceHealth(resolved, "local");
             if (cancelled) return;
-            if (health.health === "ok") {
+            // `conflict`: a shared stack namespace runs another checkout's
+            // project; the real up refuses it, naming both.
+            const claim =
+              health.health === "ok"
+                ? claimHealthyService(resolved, ws.name, (text) =>
+                    emit({ type: "line", text }),
+                  )
+                : "untracked";
+            // Another process answers on its port (said above): nothing is
+            // claimed and nothing started on top of it (0.3.0-dev.39).
+            if (health.health === "ok" && claim === "busy") {
+              overallExit = 1;
+              emit({
+                type: "svc-done",
+                address,
+                exitCode: 1,
+                repoName: svcRepoName,
+                subsystem: svcSubsystem,
+              });
+              safeRunNext(i + 1);
+              return;
+            }
+            if (health.health === "ok" && claim !== "conflict") {
               // Skipping must not lose the refcount — this workspace is an
               // owner of what's running, whether den tracked it or not.
-              const claim = claimHealthyService(resolved, ws.name);
               emit({
                 type: "line",
                 text:
@@ -1799,6 +1838,11 @@ export async function handleWorkspaceRoutes(
               return;
             }
           } else {
+            // A pre-dev.37 record is settled before the skip decides
+            // (0.3.0-dev.39): adopted, it is running; stale, it is dropped.
+            settledDaemonRecord(resolved, ws.name, (text) =>
+              emit({ type: "line", text }),
+            );
             let running = hasRunningOpctlContainers(resolved);
             if (!running) {
               // Not opctl-visible but still responding (host-run process)?
@@ -2159,16 +2203,18 @@ export async function handleWorkspaceRoutes(
         // flow writes one), which used to read as "not in the catalog" and
         // skip the clone entirely. Derive the conventional slug instead, and
         // persist it so every other flow (CLI up/setup) stops hitting this.
-        const ghSlug = resolveRepoGhSlug(svc.repoName, readCatalog(), () =>
+        // ORG-1d: a repo with no source and a `remote:` clones from it.
+        const ghSlug = resolveRepoCloneSource(svc.repoName, readCatalog(), () =>
           githubOrgFor(ws.name),
         );
-        if (!readCatalog()[svc.repoName]?.gh) {
-          upsertCatalogEntry(svc.repoName, { gh: ghSlug });
+        const entry = readCatalog()[svc.repoName];
+        if (needsGhRepair(entry, ghSlug)) {
+          upsertCatalogEntry(svc.repoName, { ...entry, gh: ghSlug });
         }
         const branch = (svc as { branch?: string | null }).branch ?? "main";
         emit({
           type: "line",
-          text: `  ${svc.repoName}: cloning ${ghSlug} (${branch})…`,
+          text: `  ${svc.repoName}: cloning ${redactRemote(ghSlug)} (${branch})…`,
         });
         try {
           // Synchronous (same helper the workspace-add flow uses) — the server

package/themes/den/den-theme.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://raw.githubusercontent.com/Monster-Orange/den/main/schemas/den.theme.v1.json",
+  "schema": "den.theme/v1",
+  "id": "den",
+  "name": "Den",
+  "version": "2.0.0",
+  "description": "Den's default: a sheltered workspace in walnut and umber neutrals with a moss-green accent. System fonts.",
+  "author": "Monster Orange",
+  "license": "MIT",
+  "homepage": "https://github.com/Monster-Orange/den-themes/tree/main/themes/den",
+  "default_mode": "dark",
+  "type": {
+    "sans": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
+    "display": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif",
+    "ja": "\"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Noto Sans JP\", \"Yu Gothic\", Meiryo, sans-serif"
+  },
+  "shape": {
+    "radius": "8px",
+    "radius-button": "6px",
+    "density": "comfortable"
+  },
+  "mark": {
+    "svg": "mark.svg",
+    "shape": "rounded"
+  },
+  "favicon": "favicon.ico",
+  "modes": {
+    "light": {
+      "bg": "#f2eee8",
+      "surface": "#fbf9f6",
+      "raised": "#ffffff",
+      "sunken": "#e8e2d9",
+      "text": "#241e18",
+      "muted": "#5c5247",
+      "faint": "#6d6358",
+      "border": "#dcd3c7",
+      "border-strong": "#8d7f6d",
+      "accent": "#557a2a",
+      "accent-text": "#4a6b23",
+      "accent-fill": "#4a6b23",
+      "on-accent": "#ffffff",
+      "ok": "#2e7246",
+      "warn": "#8c5a10",
+      "bad": "#b0392a",
+      "remote": "#23677a",
+      "shadow": "0 8px 24px rgb(48 36 24 / 0.14)",
+      "bar": "linear-gradient(90deg, #557a2a 0%, #8a6a48 100%)"
+    },
+    "dark": {
+      "bg": "#1a1612",
+      "surface": "#221d18",
+      "raised": "#2b251f",
+      "sunken": "#14110e",
+      "text": "#ede6dc",
+      "muted": "#b5aa9b",
+      "faint": "#978b7e",
+      "border": "#3a322a",
+      "border-strong": "#7a6d5d",
+      "accent": "#9bbb63",
+      "accent-text": "#a8c672",
+      "accent-fill": "#9bbb63",
+      "on-accent": "#1a1612",
+      "ok": "#6fc28f",
+      "warn": "#e0a84e",
+      "bad": "#ef7f6a",
+      "remote": "#74b8c8",
+      "shadow": "0 12px 30px rgb(0 0 0 / 0.5)",
+      "bar": "linear-gradient(90deg, #9bbb63 0%, #a07c55 100%)"
+    }
+  }
+}