@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# @aphrody/koharu-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Koharu's React editor, project browser, settings, controls, localization, and
+browser interaction helpers are owned here. The application host supplies the
+Koharu command transport and canvas WASM through `@aphrody/koharu-bridge`.
+
+The package exports product components under `components/*`, editor state and
+hooks under `lib/*`, nine locale dictionaries under `locales/*`, and its M3 theme
+sheet as `styles.css`. The editor uses canonical `@aphrody/m3-primitives`
+where the component contract fits. Remaining Koharu-specific controls are
+internal until they can be ported without changing editor behavior.
+
+The shell in `apps/koharu/editor` consumes this package. The host imports
+its own Tailwind and M3 tokens before opting into `@aphrody/koharu-ui/styles.css`.
+That stylesheet scopes its UI rules to `[data-koharu-ui]` and portal rules to
+`[data-koharu-ui-layer]`. The package includes the full Noto Sans CJK variable
+font for Japanese, Korean and Chinese text. The font is under SIL OFL 1.1; see
+`src/assets/OFL.txt`.
+
+`./navigation` exports the settings tabs, editor side panels, and title menu
+sections used by the components. `./providers` exports the React state and
+query providers. Preferences, shortcuts, project navigation and editor controls
+are available from the corresponding component and `lib/*` subpaths.
+
+The extracted editor still depends on `@aphrody/koharu-bridge` and its original
+generated Koharu command contract. Its JavaScript API and opener/process
+plugins now use Tauri v2, matching the Aphrody desktop dependency family.
+It can be packed independently of the original
+Koharu checkout, but the unpublished bridge package must be supplied to a
+consumer from a local archive or a registry. Aphrody `app-ui` uses Tauri v2
+and does not mount the editor. Its Settings > Koharu section instead uses
+`@aphrody/koharu-sdk/settings` with the native `koharu_rpc` broker to read/save
+pipeline, translation, provider credentials and typography settings. The
+native broker does not implement every command used by the extracted editor.
+The standalone Koharu Rust host still has its own Tauri v3 alpha dependency;
+this frontend dependency alignment does not prove that host runs with the v2
+JavaScript packages.
+Generic Aphrody navigation and shell components remain owned by `@aphrody/app-ui`.

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@aphrody/koharu-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Koharu editor, controls, preferences, resources and canvas UI for Aphrody hosts",
+  "license": "MIT OR Apache-2.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./providers": "./src/providers.tsx",
+    "./navigation": "./src/navigation.ts",
+    "./components/editor/useCanvas": "./src/components/editor/useCanvas.ts",
+    "./components/preferences/models": "./src/components/preferences/models.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./lib/*": "./src/lib/*.ts",
+    "./locales/*": "./src/locales/*",
+    "./assets/NotoSansCJK-VF.otf": "./src/assets/NotoSansCJK-VF.otf",
+    "./assets/OFL.txt": "./src/assets/OFL.txt",
+    "./styles.css": "./src/styles.css",
+    "./components/preferences/KoharuSettings": "./src/components/preferences/KoharuSettings.tsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aphrody/api": "3.0.0-alpha.2",
+    "@aphrody/koharu-bridge": "0.1.0",
+    "@aphrody/koharu-sdk": "0.1.0",
+    "@aphrody/m3-primitives": "3.3.4",
+    "@aphrody/plugin-opener": "3.0.0-alpha.2",
+    "@base-ui/react": "^1.8.0",
+    "@shenron/pipeline": "0.1.0",
+    "@tanstack/react-query": "^5.104.0",
+    "@tanstack/react-virtual": "^3.14.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "i18next": "^26.4.2",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next-localstorage-backend": "^4.3.2",
+    "lucide-react": "^1.48.0",
+    "next-themes": "^0.4.6",
+    "react-colorful": "^5.8.1",
+    "react-i18next": "^17.0.15",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.14.1",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.7.0",
+    "zustand": "^5.0.15"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "engines": {
+    "bun": ">=1.4.2"
+  }
+}

package/src/assets/OFL.txt

@@ -0,0 +1,92 @@
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/components/ClientOnly.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+
+export function ClientOnly({
+  children,
+  fallback = null,
+}: {
+  children: ReactNode
+  fallback?: ReactNode
+}) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted ? <>{children}</> : <>{fallback}</>
+}
+
+export default ClientOnly

package/src/components/ShenronExportPanel.tsx

@@ -0,0 +1,213 @@
+// SPDX-License-Identifier: Apache-2.0
+// Export native Koharu page results to Shenron as unreviewed manga candidates.
+import { useEffect, useState } from "react";
+import {
+  mapNativeKoharuPageResult,
+  toMangaReviewCandidateInput,
+  type KoharuMangaPageSource,
+  type MangaCandidateBinding,
+} from "@shenron/pipeline/koharu";
+
+export interface ShenronExportHost {
+  isTauri(): boolean;
+  invoke<T>(command: string, args: Record<string, unknown>): Promise<T | null>;
+}
+
+interface PageSummary {
+  id: string;
+  label: string;
+  size: { width: number; height: number };
+}
+
+interface Binding {
+  mangaPageId: string;
+  sourceSha256: string;
+  image: string;
+}
+
+type Status =
+  | { state: "idle" }
+  | { state: "busy" }
+  | { state: "done"; detail: string }
+  | { state: "error"; detail: string };
+
+const STORAGE_KEY = "aphrody.koharu.shenron-export";
+const fieldClass = "h-7 w-full rounded border border-border bg-transparent px-2 text-[11px]";
+
+function loadSettings(): { apiUrl: string; token: string } {
+  try {
+    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as { apiUrl?: unknown; token?: unknown };
+      return {
+        apiUrl: typeof parsed.apiUrl === "string" ? parsed.apiUrl : "",
+        token: typeof parsed.token === "string" ? parsed.token : "",
+      };
+    }
+  } catch {
+    // ignore unreadable storage
+  }
+  return { apiUrl: "", token: "" };
+}
+
+function mimeFor(image: string): KoharuMangaPageSource["mime"] {
+  if (/\.jpe?g$/i.test(image)) return "image/jpeg";
+  if (/\.png$/i.test(image)) return "image/png";
+  if (/\.webp$/i.test(image)) return "image/webp";
+  throw new Error("image path needs a .jpg, .png or .webp extension");
+}
+
+async function sha256Hex(bytes: Uint8Array): Promise<string> {
+  const digest = await crypto.subtle.digest("SHA-256", bytes as BufferSource);
+  return Array.from(new Uint8Array(digest), (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export function ShenronExportPanel({ host }: { host: ShenronExportHost }) {
+  const [settings, setSettings] = useState(loadSettings);
+  const [pages, setPages] = useState<PageSummary[]>([]);
+  const [bindings, setBindings] = useState<Record<string, Binding>>({});
+  const [statuses, setStatuses] = useState<Record<string, Status>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+
+  const rpc = async <T,>(method: string, params: Record<string, unknown>): Promise<T> => {
+    if (!host.isTauri()) throw new Error("L’export Shenron nécessite l’application Aphrody.");
+    const result = await host.invoke<T>("koharu_rpc", { method, params });
+    if (result === null) throw new Error("Le service natif Koharu est indisponible.");
+    return result;
+  };
+
+  const refresh = async () => {
+    setError(null);
+    try {
+      setPages(await rpc<PageSummary[]>("project.pages", {}));
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  };
+
+  useEffect(() => { void refresh(); }, []);
+
+  useEffect(() => {
+    try {
+      globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(settings));
+    } catch {
+      // ignore unwritable storage
+    }
+  }, [settings]);
+
+  const setBinding = (page: string, patch: Partial<Binding>) =>
+    setBindings((current) => ({
+      ...current,
+      [page]: { ...(current[page] ?? { mangaPageId: "", sourceSha256: "", image: "" }), ...patch },
+    }));
+
+  const exportPage = async (page: PageSummary, binding: Binding) => {
+    const result = await rpc<Record<string, unknown>>("page.result", { page: page.id });
+    const { sha256 } = await rpc<{ sha256: string }>("page.sourceSha256", { page: page.id });
+    const manifest: MangaCandidateBinding = {
+      id: binding.mangaPageId.trim(),
+      sourceSha256: binding.sourceSha256.trim().toLowerCase(),
+      imageSha256: sha256,
+      image: binding.image.trim(),
+    };
+    const source: KoharuMangaPageSource = {
+      kind: "manga",
+      pageId: manifest.id,
+      sourceSha256: manifest.sourceSha256,
+      imageSha256: manifest.imageSha256,
+      mime: mimeFor(manifest.image),
+      width: page.size.width,
+      height: page.size.height,
+    };
+    // The shared mapper hashes the cleanup layer with Bun.CryptoHasher, which the
+    // webview lacks; hash it here with WebCrypto and map the rest unchanged.
+    const cleanup = result.cleanup_layer_png;
+    const mapped = mapNativeKoharuPageResult({ result: { ...result, cleanup_layer_png: null }, sourceSha256: sha256 }, source);
+    if (Array.isArray(cleanup)) {
+      mapped.artifacts = { cleanupOverlaySha256: await sha256Hex(Uint8Array.from(cleanup as number[])) };
+    }
+    const candidate = toMangaReviewCandidateInput(mapped, manifest);
+    const base = settings.apiUrl.trim().replace(/\/+$/, "");
+    const response = await fetch(`${base}/api/manga/candidates`, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        ...(settings.token ? { authorization: `Bearer ${settings.token}` } : {}),
+      },
+      body: JSON.stringify(candidate),
+    });
+    const text = await response.text();
+    if (!response.ok) throw new Error(`HTTP ${response.status}: ${text.slice(0, 200)}`);
+    return `HTTP ${response.status}`;
+  };
+
+  const exportAll = async () => {
+    if (!settings.apiUrl.trim()) {
+      setError("SHENRON_API_URL manquant.");
+      return;
+    }
+    setRunning(true);
+    setError(null);
+    for (const page of pages) {
+      const binding = bindings[page.id];
+      if (!binding?.mangaPageId.trim()) continue;
+      setStatuses((s) => ({ ...s, [page.id]: { state: "busy" } }));
+      try {
+        const detail = await exportPage(page, binding);
+        setStatuses((s) => ({ ...s, [page.id]: { state: "done", detail } }));
+      } catch (cause) {
+        const detail = cause instanceof Error ? cause.message : String(cause);
+        setStatuses((s) => ({ ...s, [page.id]: { state: "error", detail } }));
+      }
+    }
+    setRunning(false);
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2.5 text-[11px]">
+      <label className="grid gap-1">
+        <span>SHENRON_API_URL</span>
+        <input className={fieldClass} type="url" value={settings.apiUrl}
+          onChange={(e) => setSettings({ ...settings, apiUrl: e.currentTarget.value })} />
+      </label>
+      <label className="grid gap-1">
+        <span>Jeton</span>
+        <input className={fieldClass} type="password" value={settings.token}
+          onChange={(e) => setSettings({ ...settings, token: e.currentTarget.value })} />
+      </label>
+      <div className="flex gap-1">
+        <button type="button" className="h-7 flex-1 rounded border border-border" onClick={() => void refresh()} disabled={running}>
+          Actualiser
+        </button>
+        <button type="button" className="h-7 flex-1 rounded bg-primary text-primary-foreground" onClick={() => void exportAll()} disabled={running || pages.length === 0}>
+          Exporter
+        </button>
+      </div>
+      {error && <p role="alert" className="text-destructive">{error}</p>}
+      <ul className="grid gap-2">
+        {pages.map((page) => {
+          const binding = bindings[page.id];
+          const status = statuses[page.id] ?? { state: "idle" };
+          return (
+            <li key={page.id} className="grid gap-1 rounded border border-border/80 p-2">
+              <div className="flex justify-between gap-2">
+                <span className="truncate font-medium">{page.label}</span>
+                <span data-state={status.state}>
+                  {status.state === "idle" ? "—" : status.state === "busy" ? "…" : status.state === "done" ? `OK ${status.detail}` : "Erreur"}
+                </span>
+              </div>
+              <input className={fieldClass} placeholder="ID page manga" value={binding?.mangaPageId ?? ""}
+                onChange={(e) => setBinding(page.id, { mangaPageId: e.currentTarget.value })} />
+              <input className={fieldClass} placeholder="sourceSha256 (manifeste)" value={binding?.sourceSha256 ?? ""}
+                onChange={(e) => setBinding(page.id, { sourceSha256: e.currentTarget.value })} />
+              <input className={fieldClass} placeholder="image (manifeste)" value={binding?.image ?? ""}
+                onChange={(e) => setBinding(page.id, { image: e.currentTarget.value })} />
+              {status.state === "error" && <p className="break-words text-destructive">{status.detail}</p>}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/components/app/AboutDialog.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { getVersion } from '@aphrody/api/app'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../internal/components/dialog'
+
+const author = 'Mayo Takanashi'
+
+export function AboutDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const { t } = useTranslation()
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!open || version) return
+    let active = true
+    void getVersion()
+      .then((current) => {
+        if (active) setVersion(current)
+      })
+      .catch(() => {
+        if (active) setVersion(t('about.unavailable'))
+      })
+    return () => {
+      active = false
+    }
+  }, [open, t, version])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='max-w-xs gap-4 p-5'>
+        <div className='flex items-center gap-3'>
+          <div className='grid size-12 shrink-0 place-items-center rounded-xl bg-primary/10'>
+            <img src='/icon.png' alt='' width={30} height={30} />
+          </div>
+          <DialogHeader className='min-w-0 gap-1'>
+            <DialogTitle className='text-[15px]'>Koharu</DialogTitle>
+            <DialogDescription className='text-[11px]'>{t('about.description')}</DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <dl className='grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 border-t border-border/70 pt-3 text-[11px]'>
+          <dt className='text-muted-foreground'>{t('about.version')}</dt>
+          <dd className='text-right font-medium'>{version ?? t('common.loading')}</dd>
+          <dt className='text-muted-foreground'>{t('about.author')}</dt>
+          <dd className='text-right font-medium'>{author}</dd>
+        </dl>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/app/KoharuApp.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { TitleBar } from '@aphrody/koharu-ui/components/app/TitleBar'
+import { Editor } from '@aphrody/koharu-ui/components/editor/Editor'
+import { SettingsPage } from '@aphrody/koharu-ui/components/preferences/SettingsPage'
+import { StartView } from '@aphrody/koharu-ui/components/start/StartView'
+import { useProject } from '@aphrody/koharu-ui/lib/queries'
+import { useKoharuStore } from '@aphrody/koharu-ui/lib/store'
+import { cn } from '../../internal/lib/utils'
+
+/** `embedded`: hosted inside another app (Aphrody Studio) — fills its container, no window controls. */
+export function KoharuApp({ embedded = false }: { embedded?: boolean } = {}) {
+  const { t } = useTranslation()
+  const project = useProject().data
+  const selectedPages = useKoharuStore((state) => state.selectedPages)
+  const selectPages = useKoharuStore((state) => state.selectPages)
+  const selectLayers = useKoharuStore((state) => state.selectLayers)
+  const projectLoaded = project !== undefined
+  const settingsOpen = useKoharuStore((state) => state.settingsOpen)
+  const activePage = project?.active_page
+  const editorOpen = project !== undefined && project !== null && !settingsOpen
+
+  useEffect(() => {
+    if (!projectLoaded || selectedPages.length > 0) return
+    selectPages(activePage ? [activePage] : [])
+    selectLayers([])
+  }, [activePage, projectLoaded, selectLayers, selectPages, selectedPages.length])
+
+  return (
+    <div
+      data-koharu-ui
+      className={cn(
+        'relative flex flex-col overflow-hidden text-foreground',
+        embedded ? 'h-full w-full' : 'h-screen w-screen',
+        editorOpen ? 'bg-transparent' : 'bg-[var(--surface-titlebar)]',
+      )}
+    >
+      <TitleBar windowControls={!embedded} />
+      {settingsOpen ? (
+        <SettingsPage />
+      ) : project === undefined ? (
+        <main className='grid min-h-0 flex-1 place-items-center bg-[var(--surface-canvas)]'>
+          <div className='flex items-center gap-3 text-[12px] text-muted-foreground'>
+            <span className='size-2 rounded-full bg-primary' />
+            {t('startup.opening')}
+          </div>
+        </main>
+      ) : project === null ? (
+        <StartView />
+      ) : (
+        <Editor />
+      )}
+    </div>
+  )
+}

package/src/components/app/StartupView.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { LoaderCircle } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import { useMacOS, WindowControls } from '@aphrody/koharu-ui/components/app/WindowChrome'
+
+export function StartupView() {
+  const { t } = useTranslation()
+  const macOS = useMacOS()
+
+  return (
+    <div className='relative flex h-screen w-screen flex-col overflow-hidden bg-[var(--surface-titlebar)] text-foreground'>
+      <header
+        data-tauri-drag-region='deep'
+        className='grid h-10 shrink-0 grid-cols-[132px_1fr_132px] items-center border-b border-border/80 bg-[var(--surface-titlebar)] shadow-[var(--shadow-titlebar)]'
+      >
+        <div className='flex h-full items-center'>
+          {!macOS && (
+            <div className='grid h-full w-10 place-items-center rounded-br-lg'>
+              <img
+                className='pointer-events-none'
+                src='/icon.png'
+                alt=''
+                width={17}
+                height={17}
+                draggable={false}
+              />
+            </div>
+          )}
+        </div>
+        <div className='grid h-full place-items-center text-[11px] text-muted-foreground select-none'>
+          Koharu
+        </div>
+        {!macOS && <WindowControls />}
+      </header>
+
+      <main className='relative grid min-h-0 flex-1 place-items-center overflow-hidden bg-[var(--surface-canvas)]'>
+        <section
+          className='w-full max-w-[620px] px-10 text-center'
+          role='status'
+          aria-live='polite'
+          aria-labelledby='startup-title'
+        >
+          <LoaderCircle
+            className='startup-spinner mx-auto size-11 text-primary'
+            aria-hidden='true'
+          />
+          <h1
+            id='startup-title'
+            className='mt-5 text-[24px] font-semibold tracking-[-0.025em] text-balance'
+          >
+            {t('startup.title')}
+          </h1>
+          <p className='mx-auto mt-2 max-w-[48ch] text-[13px] leading-5 text-muted-foreground'>
+            {t('startup.description')}
+          </p>
+
+          <div className='mx-auto mt-7 flex max-w-[480px] items-center justify-center gap-2.5 border-t border-border/80 pt-4 text-[12px] font-medium text-muted-foreground'>
+            <span className='size-2 rounded-full bg-primary' aria-hidden='true' />
+            {t('startup.status')}
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}