@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/lib/queries.ts

@@ -0,0 +1,110 @@
+'use client'
+
+import {
+  QueryClient,
+  type QueryKey,
+  queryOptions,
+  useIsMutating,
+  useMutation,
+  useQuery,
+} from '@tanstack/react-query'
+
+import { commands, type FontFamily } from '@aphrody/koharu-bridge/protocol'
+
+import { call } from './backend'
+
+export const projectKey = ['project'] as const
+export const pagesKey = ['pages'] as const
+export const pageKey = ['page'] as const
+export const preparedPageKey = (page: string) => ['prepared-page', page] as const
+export const fontsKey = ['fonts'] as const
+
+const projectQuery = queryOptions({
+  queryKey: projectKey,
+  queryFn: () => call(commands.getProject),
+})
+
+const pagesQuery = queryOptions({
+  queryKey: pagesKey,
+  queryFn: () => call(commands.getPages),
+})
+
+const pageQuery = queryOptions({
+  queryKey: pageKey,
+  queryFn: () => call(commands.getPage),
+})
+
+const fontsQuery = queryOptions({
+  queryKey: fontsKey,
+  queryFn: () => call(commands.getFonts),
+})
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Number.POSITIVE_INFINITY,
+      retry: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+export function useProject(enabled = true) {
+  return useQuery({ ...projectQuery, enabled })
+}
+
+export function usePages(enabled = true) {
+  return useQuery({ ...pagesQuery, enabled })
+}
+
+export function usePage(enabled = true) {
+  return useQuery({ ...pageQuery, enabled })
+}
+
+export function useFonts(enabled = true) {
+  return useQuery({ ...fontsQuery, enabled })
+}
+
+export function useFontPreview(font: FontFamily | undefined, enabled = true) {
+  return useQuery({
+    queryKey: ['font-preview', font?.name],
+    queryFn: async () => {
+      if (!font) return null
+      try {
+        return new Uint8Array(await commands.getFontPreview(font.name))
+      } catch {
+        return null
+      }
+    },
+    enabled: enabled && font !== undefined,
+    gcTime: 5 * 60 * 1000,
+  })
+}
+
+export function useCommand<Args extends unknown[], Result>(
+  key: QueryKey,
+  command: (...args: Args) => Promise<Result>,
+  label: string,
+  onSuccess?: () => Promise<void>,
+) {
+  const busy = useIsMutating({ mutationKey: key }) > 0
+  const mutation = useMutation({
+    mutationKey: key,
+    mutationFn: (args: Args) => call(command, ...args),
+    meta: { activity: label },
+    onSuccess,
+  })
+  return { run: (...args: Args) => mutation.mutate(args), busy }
+}
+
+export function useImportPages() {
+  const { run, busy } = useCommand(['import-pages'], commands.import, 'navigator.importing', () =>
+    refresh(projectKey, pagesKey, pageKey),
+  )
+  return { importPages: run, importing: busy }
+}
+
+export async function refresh(...keys: QueryKey[]): Promise<void> {
+  await Promise.all(keys.map((queryKey) => queryClient.invalidateQueries({ queryKey })))
+}

package/src/lib/store.ts

@@ -0,0 +1,191 @@
+'use client'
+
+import { create } from 'zustand'
+
+import type {
+  CanvasState,
+  Download,
+  EntityId,
+  Job,
+  Model,
+  Frame,
+  Preferences,
+  Stage,
+  StartupState,
+  ModelResources,
+} from '@aphrody/koharu-bridge/protocol'
+import { toast } from '../internal/components/toast'
+
+export type CanvasTool = 'select' | 'text' | 'draw' | 'eraser' | 'color_picker' | 'remove' | 'pan'
+export const MIN_BRUSH_DIAMETER = 1
+export const MAX_BRUSH_DIAMETER = 128
+
+export function isBrushTool(tool: CanvasTool): boolean {
+  return tool === 'draw' || tool === 'eraser' || tool === 'remove'
+}
+
+export interface CanvasBrush {
+  diameter: number
+  color: string
+}
+export type InspectorSection = 'copy' | 'type' | 'layers'
+export type ShortcutAction = CanvasTool | 'fit'
+export type Shortcuts = Record<ShortcutAction, string>
+export type PipelineScope = 'page' | 'selected-pages' | 'project'
+export const pipelineStages: readonly Stage[] = ['detection', 'ocr', 'translation', 'inpainting']
+
+interface KoharuStore {
+  initialized: boolean
+  preferences: Preferences | null
+  translationModels: Model[]
+  resources: ModelResources | null
+  jobs: Record<string, Job>
+  downloads: Record<string, Download>
+  camera: { zoom: number; translation: [number, number]; fitted: boolean }
+  canvasPage: EntityId | null
+  canvasRevision: number | null
+  canvasGeneration: number
+  canvasSize: [number, number]
+  fitCanvasRequest: number
+  layerFrames: Record<EntityId, Frame>
+  selectedLayers: EntityId[]
+  selectedPages: EntityId[]
+  tool: CanvasTool
+  brush: CanvasBrush
+  inspector: InspectorSection
+  processingScope: PipelineScope
+  processingStages: Stage[]
+  settingsOpen: boolean
+  shortcuts: Shortcuts
+  selectPages: (pages: EntityId[]) => void
+  showInspector: (section: InspectorSection) => void
+  setProcessingScope: (scope: PipelineScope) => void
+  setProcessingStages: (stages: Stage[]) => void
+  setSettingsOpen: (open: boolean) => void
+  selectLayers: (layers: EntityId[]) => void
+  setTool: (tool: CanvasTool) => void
+  setBrush: (brush: CanvasBrush) => void
+  setShortcut: (action: ShortcutAction, key: string) => void
+  requestCanvasFit: () => void
+  dismissJob: (id: string) => void
+  dismissDownload: (id: number) => void
+}
+
+export const defaultShortcuts: Shortcuts = {
+  select: 'v',
+  text: 't',
+  draw: 'b',
+  eraser: 'e',
+  color_picker: 'i',
+  remove: 'j',
+  pan: 'h',
+  fit: '0',
+}
+
+export const useKoharuStore = create<KoharuStore>()((set) => ({
+  initialized: false,
+  preferences: null,
+  translationModels: [],
+  resources: null,
+  jobs: {},
+  downloads: {},
+  camera: { zoom: 1, translation: [0, 0], fitted: true },
+  canvasPage: null,
+  canvasRevision: null,
+  canvasGeneration: 0,
+  canvasSize: [0, 0],
+  fitCanvasRequest: 0,
+  layerFrames: {},
+  selectedLayers: [],
+  selectedPages: [],
+  tool: 'select',
+  brush: { diameter: 48, color: '#FFFFFF' },
+  inspector: 'copy',
+  processingScope: 'selected-pages',
+  processingStages: [...pipelineStages],
+  settingsOpen: false,
+  shortcuts: defaultShortcuts,
+  selectPages: (selectedPages) => set({ selectedPages: [...new Set(selectedPages)] }),
+  showInspector: (inspector) => set({ inspector }),
+  setProcessingScope: (processingScope) => set({ processingScope }),
+  setProcessingStages: (processingStages) => set({ processingStages }),
+  setSettingsOpen: (settingsOpen) => set({ settingsOpen }),
+  selectLayers: (selectedLayers) => set({ selectedLayers: [...new Set(selectedLayers)] }),
+  setTool: (tool) => set({ tool }),
+  setBrush: (brush) => set({ brush }),
+  setShortcut: (action, key) =>
+    set((state) => ({
+      shortcuts: { ...state.shortcuts, [action]: key.toLowerCase().slice(0, 1) },
+    })),
+  requestCanvasFit: () => set((state) => ({ fitCanvasRequest: state.fitCanvasRequest + 1 })),
+  dismissJob: (id) =>
+    set((state) => {
+      const jobs = { ...state.jobs }
+      delete jobs[id]
+      return { jobs }
+    }),
+  dismissDownload: (id) =>
+    set((state) => {
+      const downloads = { ...state.downloads }
+      delete downloads[String(id)]
+      return { downloads }
+    }),
+}))
+
+export function receiveStartupState(state: StartupState): void {
+  useKoharuStore.setState({
+    initialized: true,
+    preferences: state.preferences,
+    jobs: byId(state.jobs),
+    ...canvasSnapshot(state.canvas),
+  })
+}
+
+export function receiveCanvas(canvas: CanvasState): void {
+  useKoharuStore.setState(canvasSnapshot(canvas))
+}
+
+export function receiveJob(job: Job): void {
+  useKoharuStore.setState((state) => ({ jobs: { ...state.jobs, [job.id]: job } }))
+}
+
+export function receiveDownload(download: Download): void {
+  useKoharuStore.setState((state) => {
+    const downloads = { ...state.downloads }
+    if (download.state === 'finished') delete downloads[String(download.id)]
+    else downloads[String(download.id)] = download
+    return { downloads }
+  })
+}
+
+export function receivePreferences(preferences: Preferences): void {
+  useKoharuStore.setState({ preferences })
+}
+
+export function receiveTranslationModels(translationModels: Model[]): void {
+  useKoharuStore.setState({ translationModels })
+}
+
+export function receiveResources(resources: ModelResources): void {
+  useKoharuStore.setState({ resources })
+}
+
+export function receiveError(message: string): void {
+  toast.add({ type: 'error', title: 'Could not complete that action', description: message })
+}
+
+function canvasSnapshot(canvas: CanvasState) {
+  return {
+    canvasPage: canvas.page,
+    canvasRevision: canvas.revision,
+    canvasGeneration: canvas.generation,
+    canvasSize: canvas.size,
+    layerFrames: Object.fromEntries(
+      canvas.element_frames.map(({ element, frame }) => [element, frame]),
+    ),
+  }
+}
+
+function byId<T extends { id: string | number }>(items: T[]): Record<string, T> {
+  return Object.fromEntries(items.map((item) => [String(item.id), item]))
+}

package/src/lib/translation.ts

@@ -0,0 +1,35 @@
+import type {
+  LanguageChoice,
+  Model,
+  ModelSelection,
+  Provider,
+  ProviderPreference,
+} from '@aphrody/koharu-bridge/protocol'
+
+export function providerName(entries: ProviderPreference[], provider: Provider): string {
+  return entries.find((entry) => entry.config.provider === provider)?.name ?? provider
+}
+
+export function modelKey(model: Model | ModelSelection): string {
+  return `${model.provider}:${model.model ?? ''}`
+}
+
+export function modelSelection(model: Model, quantization: string | null): ModelSelection {
+  return {
+    provider: model.provider,
+    model: model.model,
+    quantization,
+    vision: model.vision,
+    reasoning: model.reasoning,
+  }
+}
+
+export function orderedLanguageChoices(
+  languages: readonly LanguageChoice[],
+): Array<{ tag: string; name: string }> {
+  return languages
+    .map((language) => ({ tag: language.tag, name: language.name }))
+    .toSorted((left, right) =>
+      left.name.localeCompare(right.name, undefined, { numeric: true, sensitivity: 'base' }),
+    )
+}