@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/providers.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { QueryClientProvider } from '@tanstack/react-query'
+import { Channel } from '@aphrody/api/core'
+import { useEffect, useRef, type ReactNode } from 'react'
+import { I18nextProvider } from 'react-i18next'
+
+import { StartupView } from '@aphrody/koharu-ui/components/app/StartupView'
+import ClientOnly from '@aphrody/koharu-ui/components/ClientOnly'
+import { refreshTranslationModels } from '@aphrody/koharu-ui/lib/backend'
+import i18n from '@aphrody/koharu-ui/lib/i18n'
+import { pageKey, pagesKey, projectKey, queryClient, refresh } from '@aphrody/koharu-ui/lib/queries'
+import {
+  receiveCanvas,
+  receiveDownload,
+  receiveStartupState,
+  receiveJob,
+  receiveResources,
+  useKoharuStore,
+} from '@aphrody/koharu-ui/lib/store'
+import {
+  commands,
+  type CanvasState,
+  type Download,
+  type Job,
+  type ModelResources,
+  type ProjectInfo,
+} from '@aphrody/koharu-bridge/protocol'
+import { Toaster } from '@aphrody/m3-primitives'
+import { TooltipProvider } from '@aphrody/m3-primitives'
+
+export function Providers({ children }: { children: ReactNode }) {
+  const runtime = useRef({ active: false, bound: false })
+
+  useEffect(() => {
+    const lifecycle = runtime.current
+    lifecycle.active = true
+    if (!lifecycle.bound) {
+      lifecycle.bound = true
+      const completed = new Map<string, number>()
+      const channel = <T,>(receive: (value: T) => void) =>
+        new Channel<T>((value) => {
+          if (lifecycle.active) receive(value)
+        })
+
+      void refreshTranslationModels().catch(() => undefined)
+
+      void commands
+        .subscribe(
+          channel<CanvasState>(receiveCanvas),
+          channel<Job>((job) => {
+            const previous = completed.get(job.id) ?? 0
+            completed.set(job.id, job.completed)
+            receiveJob(job)
+            if (job.completed > previous || job.state !== 'running') {
+              void refresh(projectKey, pagesKey, pageKey).catch(() => undefined)
+            }
+          }),
+          channel<Download>(receiveDownload),
+          channel<ModelResources>(receiveResources),
+          channel<ProjectInfo | null>((project) => {
+            const previous = queryClient.getQueryData<ProjectInfo | null>(projectKey)
+            queryClient.setQueryData(projectKey, project)
+            if (previous?.name !== project?.name) {
+              const store = useKoharuStore.getState()
+              store.selectPages(project?.active_page ? [project.active_page] : [])
+              store.selectLayers([])
+            }
+            if (project) {
+              void refresh(pagesKey, pageKey).catch(() => undefined)
+            } else {
+              queryClient.setQueryData(pagesKey, [])
+              queryClient.setQueryData(pageKey, null)
+            }
+          }),
+        )
+        .then((state) => {
+          if (lifecycle.active) receiveStartupState(state)
+        })
+        .catch(() => undefined)
+    }
+
+    return () => {
+      lifecycle.active = false
+    }
+  }, [])
+
+  useEffect(() => {
+    const setLanguage = (language: string) => {
+      document.documentElement.lang = language
+    }
+    setLanguage(i18n.language)
+    i18n.on('languageChanged', setLanguage)
+    return () => i18n.off('languageChanged', setLanguage)
+  }, [])
+
+  useEffect(() => {
+    // Prevent the host webview from applying browser zoom; keep Ctrl+wheel for app handlers.
+    const preventViewportScaling = (event: WheelEvent) => {
+      if (event.ctrlKey) event.preventDefault()
+    }
+
+    window.addEventListener('wheel', preventViewportScaling, { capture: true, passive: false })
+    return () => window.removeEventListener('wheel', preventViewportScaling, { capture: true })
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={i18n}>
+        <TooltipProvider delay={0}>
+          <ClientOnly>
+            <StartupBoundary>{children}</StartupBoundary>
+            <Toaster />
+          </ClientOnly>
+        </TooltipProvider>
+      </I18nextProvider>
+    </QueryClientProvider>
+  )
+}
+
+function StartupBoundary({ children }: { children: ReactNode }) {
+  const initialized = useKoharuStore((state) => state.initialized)
+  return initialized ? (
+    <>
+      {children}
+    </>
+  ) : (
+    <StartupView />
+  )
+}
+
+export default Providers

package/src/shenron-pipeline-env.d.ts

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: Apache-2.0
+// @shenron/pipeline/koharu references Bun.CryptoHasher in one branch that the
+// webview never reaches (ShenronExportPanel hashes the cleanup layer itself).
+// koharu-ui does not load bun types, so declare only what that module names.
+
+
+declare global {
+  var Bun: {
+    [member: string]: any;
+    CryptoHasher: new (algorithm: string) => {
+      update(data: Uint8Array): { digest(encoding: "hex"): string };
+    };
+  };
+}

package/src/styles.css

@@ -0,0 +1,246 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+@import './internal/styles/globals.css';
+
+@font-face {
+  font-family: 'Koharu Noto Sans CJK';
+  src: url('./assets/NotoSansCJK-VF.otf') format('opentype');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+/* Koharu-specific surfaces are semantic aliases of the host's M3 scheme. */
+[data-koharu-ui],
+[data-koharu-ui-layer] {
+  --radius: var(--md-sys-shape-corner-medium);
+  --background: var(--md-sys-color-surface);
+  --foreground: var(--md-sys-color-on-surface);
+  --card: var(--md-sys-color-surface-container-low);
+  --card-foreground: var(--md-sys-color-on-surface);
+  --popover: var(--md-sys-color-surface-container-high);
+  --popover-foreground: var(--md-sys-color-on-surface);
+  --primary: var(--md-sys-color-primary);
+  --primary-foreground: var(--md-sys-color-on-primary);
+  --secondary: var(--md-sys-color-secondary-container);
+  --secondary-foreground: var(--md-sys-color-on-secondary-container);
+  --muted: var(--md-sys-color-surface-container-highest);
+  --muted-foreground: var(--md-sys-color-on-surface-variant);
+  --accent: var(--md-sys-color-tertiary-container);
+  --accent-foreground: var(--md-sys-color-on-tertiary-container);
+  --destructive: var(--md-sys-color-error);
+  --border: var(--md-sys-color-outline-variant);
+  --input: var(--md-sys-color-outline);
+  --ring: var(--md-sys-color-primary);
+  --canvas-selection: var(--md-sys-color-primary);
+  --canvas-region-contrast: var(--md-sys-color-inverse-on-surface);
+  --canvas-region-stroke: var(--md-sys-color-inverse-surface);
+  --surface-titlebar: var(--md-sys-color-surface-container-low);
+  --surface-toolbar: var(--md-sys-color-surface);
+  --surface-sidebar: var(--md-sys-color-surface-container);
+  --surface-panel: var(--md-sys-color-surface-container-low);
+  --surface-floating: var(--md-sys-color-surface-container-high);
+  --surface-well: var(--md-sys-color-surface-container-highest);
+  --surface-canvas: var(--md-sys-color-surface);
+  --shadow-titlebar: var(--md-sys-elevation-level1);
+  --shadow-panel: var(--md-sys-elevation-level2);
+  --shadow-content: var(--md-sys-elevation-level1);
+  --shadow-toolrail: var(--md-sys-elevation-level2);
+  --shadow-floating: var(--md-sys-elevation-level3);
+}
+
+@layer base {
+  [data-koharu-ui] {
+    min-height: 100%;
+    font-size: 18px;
+    line-height: 1.2;
+    font-family: var(--aphrody-font-brand, 'Koharu Noto Sans CJK', system-ui, sans-serif);
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface);
+    scrollbar-color: var(--md-sys-color-outline) var(--md-sys-color-surface-container);
+    scrollbar-width: auto;
+  }
+
+  [data-koharu-ui-layer] {
+    font-size: 18px;
+    line-height: 1.2;
+    font-family: var(--aphrody-font-brand, 'Koharu Noto Sans CJK', system-ui, sans-serif);
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :focus-visible,
+  [data-koharu-ui-layer]:focus-visible {
+    outline: 3px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+    transition: none !important;
+  }
+
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :is(button, [role='button'], input, select, textarea, [role='slider']) {
+    min-height: 48px;
+  }
+
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :is(input, textarea) {
+    user-select: text;
+  }
+
+  [data-koharu-ui] [data-tauri-drag-region] {
+    app-region: drag;
+  }
+
+  [data-koharu-ui] [data-tauri-drag-region] :is(button, a, input, select, textarea, [role='button']) {
+    app-region: no-drag;
+  }
+
+  [data-koharu-ui] ::selection {
+    color: var(--md-sys-color-on-primary-container);
+    background: var(--md-sys-color-primary-container);
+  }
+}
+
+/* Keep dense legacy utility classes readable while preserving larger display text. */
+@layer utilities {
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :where(
+    .text-xs,
+    .text-sm,
+    .text-base,
+    [class~='text-[8px]'],
+    [class~='text-[9px]'],
+    [class~='text-[10px]'],
+    [class~='text-[11px]'],
+    [class~='text-[12px]'],
+    [class~='text-[13px]'],
+    [class~='text-[15px]']
+  ) {
+    font-size: 18px !important;
+    line-height: 1.2 !important;
+  }
+
+  [data-koharu-ui-layer]:where(
+    .text-xs,
+    .text-sm,
+    .text-base,
+    [class~='text-[8px]'],
+    [class~='text-[9px]'],
+    [class~='text-[10px]'],
+    [class~='text-[11px]'],
+    [class~='text-[12px]'],
+    [class~='text-[13px]'],
+    [class~='text-[15px]']
+  ) {
+    font-size: 18px !important;
+    line-height: 1.2 !important;
+  }
+}
+
+[data-koharu-ui] .workspace-corner-mask {
+  --workspace-corner-radius: var(--md-sys-shape-corner-extra-large);
+  overflow: visible !important;
+}
+
+[data-koharu-ui] .workspace-corner-mask::before {
+  position: absolute;
+  z-index: 50;
+  top: 0;
+  left: 0;
+  width: var(--workspace-corner-radius);
+  height: var(--workspace-corner-radius);
+  pointer-events: none;
+  content: '';
+  background: radial-gradient(
+    circle at bottom right,
+    transparent 0 calc(var(--workspace-corner-radius) - 1px),
+    var(--surface-sidebar) var(--workspace-corner-radius)
+  );
+}
+
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='button']:not(.rounded-none),
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='input'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='textarea'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='select-trigger'],
+[data-koharu-ui-layer][data-slot='button']:not(.rounded-none),
+[data-koharu-ui-layer][data-slot='input'],
+[data-koharu-ui-layer][data-slot='textarea'],
+[data-koharu-ui-layer][data-slot='select-trigger'] {
+  border-radius: var(--md-sys-shape-corner-small);
+  box-shadow: none;
+}
+
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='popover-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='dropdown-menu-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='select-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='dialog-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='alert-dialog-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='sheet-content'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='drawer-popup'],
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='toast'],
+[data-koharu-ui-layer][data-slot='combobox-content'],
+[data-koharu-ui-layer][data-slot='context-menu-content'],
+[data-koharu-ui-layer][data-slot='popover-content'],
+[data-koharu-ui-layer][data-slot='hover-card-content'],
+[data-koharu-ui-layer][data-slot='dropdown-menu-content'],
+[data-koharu-ui-layer][data-slot='navigation-menu-content'],
+[data-koharu-ui-layer][data-slot='menubar-content'],
+[data-koharu-ui-layer][data-slot='select-content'],
+[data-koharu-ui-layer][data-slot='dialog-content'],
+[data-koharu-ui-layer][data-slot='alert-dialog-content'],
+[data-koharu-ui-layer][data-slot='sheet-content'],
+[data-koharu-ui-layer][data-slot='drawer-popup'],
+[data-koharu-ui-layer][data-slot='toast'] {
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-large);
+  box-shadow: var(--md-sys-elevation-level3);
+}
+
+:is([data-koharu-ui], [data-koharu-ui-layer]) [data-slot='tabs-trigger'],
+[data-koharu-ui-layer][data-slot='tabs-trigger'] {
+  min-height: 48px;
+  border-radius: var(--md-sys-shape-corner-small);
+}
+
+[data-koharu-ui] .react-colorful {
+  width: 100%;
+  min-height: 164px;
+}
+
+[data-koharu-ui] .react-colorful__saturation,
+[data-koharu-ui] .react-colorful__last-control {
+  border-radius: var(--md-sys-shape-corner-small);
+}
+
+@media (prefers-contrast: more) {
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :focus-visible,
+  [data-koharu-ui-layer]:focus-visible {
+    outline-color: var(--md-sys-color-on-surface);
+    outline-width: 4px;
+  }
+
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :is(button, [role='button'], input, select, textarea, [role='slider']) {
+    border-color: var(--md-sys-color-outline);
+  }
+}
+
+@media (forced-colors: active) {
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :focus-visible,
+  [data-koharu-ui-layer]:focus-visible {
+    outline-color: Highlight;
+  }
+
+  :is([data-koharu-ui], [data-koharu-ui-layer]) :is(button, [role='button'], input, select, textarea) {
+    border: 1px solid ButtonText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-koharu-ui],
+  [data-koharu-ui-layer],
+  [data-koharu-ui] *,
+  [data-koharu-ui-layer] *,
+  [data-koharu-ui] *::before,
+  [data-koharu-ui] *::after,
+  [data-koharu-ui-layer] *::before,
+  [data-koharu-ui-layer] *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "types": ["node"],
+    "noImplicitAny": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@aphrody/koharu-ui/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}