@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/app/TitleBar.tsx

@@ -0,0 +1,322 @@
+'use client'
+
+import { openUrl } from '@aphrody/plugin-opener'
+import { FilePlus2, FolderOpen, LoaderCircle, Settings } from 'lucide-react'
+import { useState, type ComponentProps } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { AboutDialog } from '@aphrody/koharu-ui/components/app/AboutDialog'
+import { useMacOS, WindowControls } from '@aphrody/koharu-ui/components/app/WindowChrome'
+import { call } from '@aphrody/koharu-ui/lib/backend'
+import { selectableLayer } from '@aphrody/koharu-ui/lib/geometry'
+import {
+  pageKey,
+  pagesKey,
+  projectKey,
+  refresh,
+  useCommand,
+  useImportPages,
+  usePage,
+  usePages,
+  useProject,
+} from '@aphrody/koharu-ui/lib/queries'
+import { useKoharuStore } from '@aphrody/koharu-ui/lib/store'
+import { titleBarMenuSections } from '@aphrody/koharu-ui/navigation'
+import { commands, type Operation, type Scope, type Stage } from '@aphrody/koharu-bridge/protocol'
+import {
+  Menubar,
+  MenubarContent as UiMenubarContent,
+  MenubarItem as UiMenubarItem,
+  MenubarMenu,
+  MenubarSeparator as UiMenubarSeparator,
+  MenubarShortcut as UiMenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger as UiMenubarTrigger,
+} from '../../internal/components/menubar'
+import { cn } from '../../internal/lib/utils'
+
+export function TitleBar({ windowControls = true }: { windowControls?: boolean } = {}) {
+  const { t } = useTranslation()
+  const [aboutOpen, setAboutOpen] = useState(false)
+  const macOS = useMacOS()
+  const project = useProject().data
+  const pagesQuery = usePages(Boolean(project))
+  const pageQuery = usePage(Boolean(project))
+  const pages = project ? (pagesQuery.data ?? []) : []
+  const page = project ? (pageQuery.data ?? null) : null
+  const selectedPages = useKoharuStore((state) => state.selectedPages)
+  const selectedLayers = useKoharuStore((state) => state.selectedLayers)
+  const selectLayers = useKoharuStore((state) => state.selectLayers)
+  const setSettingsOpen = useKoharuStore((state) => state.setSettingsOpen)
+  const requestCanvasFit = useKoharuStore((state) => state.requestCanvasFit)
+  const { importPages, importing } = useImportPages()
+  const { run: exportProject, busy: exporting } = useCommand(
+    ['export-project'],
+    commands.export,
+    'menu.export',
+  )
+
+  const run = (scope: Scope, operation: Operation = { operation: 'full' }) =>
+    void call(commands.process, scope, operation).catch(() => undefined)
+
+  const closeProject = () => void call(commands.closeProject).catch(() => undefined)
+
+  return (
+    <>
+      <header
+        data-tauri-drag-region='deep'
+        className='relative flex h-10 shrink-0 items-center bg-[var(--surface-titlebar)] text-[12px]'
+      >
+        {macOS ? (
+          <div className='w-[84px] shrink-0' />
+        ) : (
+          <div className='relative z-10 flex h-full w-10 shrink-0 items-center justify-center rounded-br-lg'>
+            <img
+              className='pointer-events-none'
+              src='/icon.png'
+              alt='Koharu'
+              width={17}
+              height={17}
+              draggable={false}
+            />
+          </div>
+        )}
+        <Menubar className='relative z-10 h-full shrink-0 gap-0 border-0 bg-transparent p-0 shadow-none'>
+          <MenubarMenu>
+            <MenubarTrigger>{t(titleBarMenuSections.file)}</MenubarTrigger>
+            <MenubarContent>
+              <MenubarSub>
+                <MenubarSubTrigger
+                  disabled={!project || importing}
+                  aria-busy={importing}
+                  className='min-h-8 gap-1.5 px-2 py-1 text-xs'
+                >
+                  {importing && <LoaderCircle className='animate-spin' aria-hidden='true' />}
+                  {importing ? t('navigator.importing') : t('menu.import')}
+                </MenubarSubTrigger>
+                <MenubarSubContent className='min-w-40 p-1'>
+                  <MenubarItem disabled={importing} onClick={() => importPages('files')}>
+                    <FilePlus2 />
+                    {t('navigator.importFiles')}
+                  </MenubarItem>
+                  <MenubarItem disabled={importing} onClick={() => importPages('folder')}>
+                    <FolderOpen />
+                    {t('navigator.importFolder')}
+                  </MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSub>
+                <MenubarSubTrigger
+                  disabled={!project || pages.length === 0 || exporting}
+                  aria-busy={exporting}
+                  className='min-h-8 gap-1.5 px-2 py-1 text-xs'
+                >
+                  {exporting && <LoaderCircle className='animate-spin' aria-hidden='true' />}
+                  {t('menu.export')}
+                </MenubarSubTrigger>
+                <MenubarSubContent className='min-w-40 p-1'>
+                  {(['png', 'psd', 'cbz'] as const).map((format) => (
+                    <MenubarItem
+                      key={format}
+                      disabled={exporting}
+                      onClick={() => exportProject(format)}
+                    >
+                      {format.toUpperCase()}…
+                    </MenubarItem>
+                  ))}
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSeparator />
+              <MenubarItem disabled={!project} onClick={closeProject}>
+                {t('menu.closeProject')}
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem onClick={() => setSettingsOpen(true)}>
+                <Settings />
+                {t('menu.settings')}
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>{t(titleBarMenuSections.edit)}</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem
+                disabled={!project?.can_undo}
+                onClick={() =>
+                  void call(commands.undo)
+                    .then(() => refresh(projectKey, pagesKey, pageKey))
+                    .catch(() => undefined)
+                }
+              >
+                {t('menu.undo')}
+                <MenubarShortcut>Ctrl+Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem
+                disabled={!project?.can_redo}
+                onClick={() =>
+                  void call(commands.redo)
+                    .then(() => refresh(projectKey, pagesKey, pageKey))
+                    .catch(() => undefined)
+                }
+              >
+                {t('menu.redo')}
+                <MenubarShortcut>Ctrl+Shift+Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem
+                disabled={!page}
+                onClick={() =>
+                  selectLayers(page?.layers.filter(selectableLayer).map((layer) => layer.id) ?? [])
+                }
+              >
+                {t('menu.selectAllLayers')}
+                <MenubarShortcut>Ctrl+A</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem
+                disabled={selectedLayers.length === 0}
+                variant='destructive'
+                onClick={() =>
+                  void call(commands.deleteLayers, selectedLayers)
+                    .then(() => refresh(projectKey, pagesKey, pageKey))
+                    .catch(() => undefined)
+                }
+              >
+                {t('menu.delete')}
+                <MenubarShortcut>Del</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>{t(titleBarMenuSections.process)}</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem
+                disabled={!project || pages.length === 0}
+                onClick={() => run({ scope: 'project' })}
+              >
+                {t('menu.processProject')}
+              </MenubarItem>
+              <MenubarItem
+                disabled={selectedPages.length === 0}
+                onClick={() => run({ scope: 'pages', value: selectedPages })}
+              >
+                {t('menu.processPages')}
+              </MenubarItem>
+              <MenubarItem
+                disabled={selectedLayers.length === 0}
+                onClick={() =>
+                  run(
+                    { scope: 'entities', value: selectedLayers },
+                    { operation: 'stages', stages: ['ocr', 'translation'] },
+                  )
+                }
+              >
+                {t('menu.processLayers')}
+              </MenubarItem>
+              <MenubarSeparator />
+              {(['detection', 'ocr', 'translation', 'inpainting'] as Stage[]).map((stage) => (
+                <MenubarItem
+                  key={stage}
+                  disabled={!project || pages.length === 0}
+                  onClick={() => run({ scope: 'project' }, { operation: 'through', stage })}
+                >
+                  {t('menu.runPhase', {
+                    phase: t(`phase.${stage}`),
+                  })}
+                </MenubarItem>
+              ))}
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>{t(titleBarMenuSections.view)}</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem disabled={!page} onClick={requestCanvasFit}>
+                {t('menu.fit')}
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+
+          <MenubarMenu>
+            <MenubarTrigger>{t(titleBarMenuSections.help)}</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem
+                onClick={() => void openUrl('https://discord.gg/mHvHkxGnUY').catch(() => undefined)}
+              >
+                {t('menu.discord')}
+              </MenubarItem>
+              <MenubarItem
+                onClick={() =>
+                  void openUrl('https://github.com/koharu-rs/koharu').catch(() => undefined)
+                }
+              >
+                {t('menu.github')}
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem onClick={() => setAboutOpen(true)}>{t('menu.about')}</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+
+        <div className='min-w-0 flex-1' />
+        <div className='pointer-events-none absolute inset-y-0 left-1/2 flex max-w-[40vw] min-w-16 -translate-x-1/2 items-center justify-center px-3 text-[11px] text-muted-foreground select-none'>
+          {project ? (
+            <span className='truncate'>
+              <span className='font-medium text-foreground'>{project.name}</span>
+              {page && (
+                <>
+                  <span className='mx-2'>/</span>
+                  <span>{page.label}</span>
+                </>
+              )}
+            </span>
+          ) : (
+            <span>Koharu</span>
+          )}
+        </div>
+
+        {windowControls && !macOS && <WindowControls />}
+      </header>
+      <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
+    </>
+  )
+}
+
+function MenubarTrigger({ className, ...props }: ComponentProps<typeof UiMenubarTrigger>) {
+  return (
+    <UiMenubarTrigger
+      className={cn(
+        'h-6 px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-primary/10 hover:text-muted-foreground aria-expanded:bg-primary/10 aria-expanded:text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({ className, ...props }: ComponentProps<typeof UiMenubarContent>) {
+  return <UiMenubarContent className={cn('min-w-44 p-1', className)} {...props} />
+}
+
+function MenubarItem({ className, ...props }: ComponentProps<typeof UiMenubarItem>) {
+  return (
+    <UiMenubarItem
+      className={cn(
+        "min-h-8 gap-1.5 px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({ className, ...props }: ComponentProps<typeof UiMenubarShortcut>) {
+  return <UiMenubarShortcut className={cn('text-[11px]', className)} {...props} />
+}
+
+function MenubarSeparator({ className, ...props }: ComponentProps<typeof UiMenubarSeparator>) {
+  return <UiMenubarSeparator className={cn('my-0.5', className)} {...props} />
+}

package/src/components/app/Updater.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { Download, RefreshCw } from 'lucide-react'
+import { Trans, useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from '../../internal/components/alert-dialog'
+import { Progress } from '../../internal/components/progress'
+import { ScrollArea } from '../../internal/components/scroll-area'
+
+export interface UpdateInfo {
+  version: string
+  body?: string | null
+}
+
+export type UpdateState =
+  | { kind: 'available'; update: UpdateInfo }
+  | { kind: 'downloading'; update: UpdateInfo; downloaded: number; total: number | null }
+  | { kind: 'error'; update: UpdateInfo; message: string }
+
+export function Updater({
+  state,
+  onDismiss,
+  onInstall,
+}: {
+  state: UpdateState | null
+  onDismiss(): void
+  onInstall(update: UpdateInfo): void
+}) {
+  const { t } = useTranslation()
+
+  if (!state) return null
+
+  const downloading = state.kind === 'downloading'
+  const percent =
+    downloading && state.total ? Math.min(100, (state.downloaded / state.total) * 100) : null
+
+  return (
+    <AlertDialog
+      open
+      onOpenChange={(open) => {
+        if (!open && !downloading) {
+          onDismiss()
+        }
+      }}
+    >
+      <AlertDialogContent className='flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden'>
+        <AlertDialogHeader className='flex shrink-0 flex-row items-start gap-4 text-left'>
+          <AlertDialogMedia className='mb-0 shrink-0'>
+            {state.kind === 'error' ? (
+              <RefreshCw className='size-5' />
+            ) : (
+              <Download className='size-5' />
+            )}
+          </AlertDialogMedia>
+          <div className='min-w-0 space-y-1.5'>
+            <AlertDialogTitle>
+              {state.kind === 'available'
+                ? t('updater.available.title')
+                : state.kind === 'downloading'
+                  ? t('updater.downloading.title')
+                  : t('updater.error.title')}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {state.kind === 'available' ? (
+                <Trans
+                  i18nKey='updater.available.description'
+                  values={{ version: state.update.version }}
+                  components={{ strong: <strong className='font-medium text-foreground' /> }}
+                />
+              ) : state.kind === 'downloading' ? (
+                t('updater.downloading.subtitle', { version: state.update.version })
+              ) : (
+                t('updater.error.description')
+              )}
+            </AlertDialogDescription>
+          </div>
+        </AlertDialogHeader>
+
+        {state.kind === 'available' && (
+          <ScrollArea
+            className='h-64 max-h-[40dvh] min-h-0 rounded-lg bg-muted/45'
+            viewportClassName='p-3'
+          >
+            {state.update.body ? (
+              <div className='min-w-0 text-xs leading-5 break-words text-muted-foreground [&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:break-all [&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h1]:text-foreground [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:text-foreground [&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:font-semibold [&_h3]:text-foreground [&_hr]:my-3 [&_hr]:border-border [&_img]:h-auto [&_img]:max-w-full [&_li]:my-0.5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-2 [&_pre]:my-2 [&_pre]:max-w-full [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-2 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:break-normal [&_table]:my-2 [&_table]:w-full [&_table]:table-fixed [&_td]:border [&_td]:border-border [&_td]:p-1.5 [&_th]:border [&_th]:border-border [&_th]:p-1.5 [&_th]:text-left [&_th]:font-medium [&_th]:text-foreground [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0'>
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    a({ href, children }) {
+                      return <a href={href} target='_blank' rel='noopener noreferrer'>{children}</a>
+                    },
+                  }}
+                >
+                  {state.update.body}
+                </ReactMarkdown>
+              </div>
+            ) : (
+              <p className='text-xs leading-5 text-muted-foreground'>{t('updater.noNotes')}</p>
+            )}
+          </ScrollArea>
+        )}
+        {state.kind === 'downloading' && (
+          <Progress value={percent} aria-label={t('updater.downloading.title')}>
+            <span className='ml-auto text-xs text-muted-foreground tabular-nums'>
+              {percent === null ? '…' : `${Math.round(percent)}%`}
+            </span>
+          </Progress>
+        )}
+        {state.kind === 'error' && (
+          <ScrollArea
+            className='max-h-28'
+            viewportClassName='text-xs leading-5 text-muted-foreground'
+          >
+            <p>{state.message}</p>
+          </ScrollArea>
+        )}
+
+        {!downloading && (
+          <AlertDialogFooter className='shrink-0'>
+            <AlertDialogCancel>
+              {state.kind === 'available' ? t('updater.later') : t('updater.close')}
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={() => onInstall(state.update)}>
+              {state.kind === 'available' ? t('updater.update') : t('updater.retry')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/src/components/app/WindowChrome.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { getCurrentWindow } from '@aphrody/api/window'
+import { Copy, Minus, Square, X } from 'lucide-react'
+import { useEffect, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const resizeHandles = [
+  { direction: 'North', className: 'top-0 right-2 left-2 h-1 cursor-n-resize' },
+  { direction: 'South', className: 'right-2 bottom-0 left-2 h-1 cursor-s-resize' },
+  { direction: 'East', className: 'top-2 right-0 bottom-2 w-1 cursor-e-resize' },
+  { direction: 'West', className: 'top-2 bottom-2 left-0 w-1 cursor-w-resize' },
+  { direction: 'NorthEast', className: 'top-0 right-0 size-2 cursor-ne-resize' },
+  { direction: 'NorthWest', className: 'top-0 left-0 size-2 cursor-nw-resize' },
+  { direction: 'SouthEast', className: 'right-0 bottom-0 size-2 cursor-se-resize' },
+  { direction: 'SouthWest', className: 'bottom-0 left-0 size-2 cursor-sw-resize' },
+] as const
+
+export function useMacOS() {
+  const [macOS, setMacOS] = useState(false)
+
+  useEffect(() => {
+    setMacOS(
+      navigator.userAgent.includes('Macintosh') ||
+        navigator.platform.toLowerCase().startsWith('mac'),
+    )
+  }, [])
+
+  return macOS
+}
+
+export function WindowControls() {
+  const { t } = useTranslation()
+  const [maximized, setMaximized] = useState(false)
+
+  useEffect(() => {
+    const window = getCurrentWindow()
+    let disposed = false
+    let unlisten: (() => void) | undefined
+    const synchronize = () => {
+      void window.isMaximized().then((value) => {
+        if (!disposed) setMaximized(value)
+      })
+    }
+    synchronize()
+    queueMicrotask(() => {
+      if (disposed) return
+      void window.onResized(synchronize).then((stop) => {
+        if (disposed) void Promise.resolve(stop()).catch(() => undefined)
+        else unlisten = stop
+      })
+    })
+    return () => {
+      disposed = true
+      if (unlisten) void Promise.resolve(unlisten()).catch(() => undefined)
+    }
+  }, [])
+
+  const toggleMaximize = async () => {
+    const window = getCurrentWindow()
+    await window.toggleMaximize()
+    setMaximized(await window.isMaximized())
+  }
+
+  return (
+    <>
+      {!maximized && <WindowResizeHandles />}
+      <div className='flex h-full shrink-0'>
+        <WindowButton
+          label={t('window.minimize')}
+          onClick={() => void getCurrentWindow().minimize()}
+        >
+          <Minus />
+        </WindowButton>
+        <WindowButton
+          label={t(maximized ? 'window.restore' : 'window.maximize')}
+          onClick={() => void toggleMaximize()}
+        >
+          {maximized ? <Copy /> : <Square />}
+        </WindowButton>
+        <WindowButton
+          label={t('window.close')}
+          className='hover:text-destructive-foreground hover:bg-destructive'
+          onClick={() => void getCurrentWindow().close()}
+        >
+          <X />
+        </WindowButton>
+      </div>
+    </>
+  )
+}
+
+function WindowResizeHandles() {
+  const startResize =
+    (direction: (typeof resizeHandles)[number]['direction']) =>
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.button !== 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      void getCurrentWindow()
+        .startResizeDragging(direction)
+        .catch(() => undefined)
+    }
+
+  return resizeHandles.map(({ direction, className }) => (
+    <div
+      key={direction}
+      aria-hidden='true'
+      data-window-resize-handle={direction}
+      className={`window-resize-handle fixed z-50 ${className}`}
+      onPointerDown={startResize(direction)}
+    />
+  ))
+}
+
+function WindowButton({
+  label,
+  className = '',
+  children,
+  onClick,
+}: {
+  label: string
+  className?: string
+  children: ReactNode
+  onClick: () => void
+}) {
+  return (
+    <button
+      type='button'
+      aria-label={label}
+      className={`grid h-full w-11 place-items-center text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground [&_svg]:size-3.5 ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/controls/ColorSampling.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+
+import { useKoharuStore, type CanvasTool } from '@aphrody/koharu-ui/lib/store'
+
+type ApplyColor = (color: string) => void
+
+export interface ColorSampling {
+  request: (apply: ApplyColor) => void
+  complete: (color: string) => boolean
+  cancel: () => void
+}
+
+const ColorSamplingContext = createContext<ColorSampling | null>(null)
+
+export function ColorSamplingProvider({ children }: { children: ReactNode }) {
+  const pending = useRef<ApplyColor | null>(null)
+  const previousTool = useRef<CanvasTool>('select')
+  const tool = useKoharuStore((state) => state.tool)
+  const setTool = useKoharuStore((state) => state.setTool)
+
+  const request = useCallback(
+    (apply: ApplyColor) => {
+      if (!pending.current) previousTool.current = useKoharuStore.getState().tool
+      pending.current = apply
+      setTool('color_picker')
+    },
+    [setTool],
+  )
+
+  const cancel = useCallback(() => {
+    const active = pending.current !== null
+    pending.current = null
+    if (active && useKoharuStore.getState().tool === 'color_picker') {
+      setTool(previousTool.current)
+    }
+  }, [setTool])
+
+  const complete = useCallback(
+    (color: string) => {
+      const apply = pending.current
+      if (!apply) return false
+      pending.current = null
+      apply(color)
+      if (useKoharuStore.getState().tool === 'color_picker') setTool(previousTool.current)
+      return true
+    },
+    [setTool],
+  )
+
+  useEffect(() => {
+    if (tool !== 'color_picker') cancel()
+  }, [cancel, tool])
+
+  const value = useMemo(() => ({ request, complete, cancel }), [cancel, complete, request])
+  return <ColorSamplingContext.Provider value={value}>{children}</ColorSamplingContext.Provider>
+}
+
+export function useColorSampling(): ColorSampling | null {
+  return useContext(ColorSamplingContext)
+}