@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/internal/components/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
+      },
+      size: {
+        default:
+          "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/internal/components/tooltip.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "../lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-koharu-ui-layer=""
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/internal/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/internal/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/internal/styles/globals.css

@@ -0,0 +1,73 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+@source '../../components/**/*.{ts,tsx}';
+@source '../**/*.{ts,tsx}';
+
+/* Translate the Koharu-internal primitive class vocabulary to host M3 roles. */
+@theme inline {
+  --radius-sm: var(--md-sys-shape-corner-extra-small);
+  --radius-md: var(--md-sys-shape-corner-small);
+  --radius-lg: var(--md-sys-shape-corner-medium);
+  --radius-xl: var(--md-sys-shape-corner-large);
+  --radius-2xl: var(--md-sys-shape-corner-extra-large);
+  --radius-3xl: var(--md-sys-shape-corner-extra-large-increased);
+  --radius-4xl: var(--md-sys-shape-corner-extra-extra-large);
+
+  --color-background: var(--md-sys-color-surface);
+  --color-foreground: var(--md-sys-color-on-surface);
+  --color-card: var(--md-sys-color-surface-container-low);
+  --color-card-foreground: var(--md-sys-color-on-surface);
+  --color-popover: var(--md-sys-color-surface-container-high);
+  --color-popover-foreground: var(--md-sys-color-on-surface);
+  --color-primary: var(--md-sys-color-primary);
+  --color-primary-foreground: var(--md-sys-color-on-primary);
+  --color-secondary: var(--md-sys-color-secondary-container);
+  --color-secondary-foreground: var(--md-sys-color-on-secondary-container);
+  --color-muted: var(--md-sys-color-surface-container-highest);
+  --color-muted-foreground: var(--md-sys-color-on-surface-variant);
+  --color-accent: var(--md-sys-color-tertiary-container);
+  --color-accent-foreground: var(--md-sys-color-on-tertiary-container);
+  --color-destructive: var(--md-sys-color-error);
+  --color-border: var(--md-sys-color-outline-variant);
+  --color-input: var(--md-sys-color-outline);
+  --color-ring: var(--md-sys-color-primary);
+  --color-chart-1: var(--md-sys-color-primary);
+  --color-chart-2: var(--md-sys-color-secondary);
+  --color-chart-3: var(--md-sys-color-tertiary);
+  --color-chart-4: var(--md-sys-color-error);
+  --color-chart-5: var(--md-sys-color-inverse-primary);
+  --color-sidebar: var(--md-sys-color-surface-container);
+  --color-sidebar-foreground: var(--md-sys-color-on-surface);
+  --color-sidebar-primary: var(--md-sys-color-primary);
+  --color-sidebar-primary-foreground: var(--md-sys-color-on-primary);
+  --color-sidebar-accent: var(--md-sys-color-secondary-container);
+  --color-sidebar-accent-foreground: var(--md-sys-color-on-secondary-container);
+  --color-sidebar-border: var(--md-sys-color-outline-variant);
+  --color-sidebar-ring: var(--md-sys-color-primary);
+
+  --shadow-sm: var(--md-sys-elevation-level1);
+  --shadow-md: var(--md-sys-elevation-level2);
+  --shadow-lg: var(--md-sys-elevation-level3);
+  --shadow-xl: var(--md-sys-elevation-level4);
+  --shadow-2xl: var(--md-sys-elevation-level5);
+}
+
+@layer base {
+  :is([data-koharu-ui], [data-koharu-ui-layer]) *,
+  [data-koharu-ui-layer] {
+    border-color: var(--md-sys-color-outline-variant);
+  }
+
+  [data-koharu-ui] {
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface);
+    font-size: 18px;
+    line-height: 1.2;
+  }
+
+  [data-koharu-ui-layer] {
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface);
+    font-size: 18px;
+    line-height: 1.2;
+  }
+}

package/src/lib/backend.ts

@@ -0,0 +1,85 @@
+'use client'
+
+import { commands } from '@aphrody/koharu-bridge/protocol'
+import type {
+  PipelineConfig,
+  Preferences,
+  ProviderPreferences,
+  TypesettingConfig,
+} from '@aphrody/koharu-bridge/protocol'
+
+import { receiveError, receivePreferences, receiveTranslationModels } from './store'
+
+type Command<Args extends unknown[], Result> = (...args: Args) => Promise<Result>
+
+let translationModelsRequest: Promise<void> | null = null
+let translationModelsGeneration = 0
+let preferencesWriteGeneration = 0
+let preferencesWriteQueue: Promise<void> = Promise.resolve()
+
+export async function call<Args extends unknown[], Result>(
+  command: Command<Args, Result>,
+  ...args: Args
+): Promise<Result> {
+  try {
+    return await command(...args)
+  } catch (error) {
+    throw report(error)
+  }
+}
+
+export function dispatch<Args extends unknown[], Result>(
+  command: Command<Args, Result>,
+  ...args: Args
+): void {
+  void call(command, ...args).catch(() => undefined)
+}
+
+export async function refreshPreferences(): Promise<void> {
+  const generation = preferencesWriteGeneration
+  await preferencesWriteQueue
+  const preferences = await call(commands.getPreferences)
+  if (generation === preferencesWriteGeneration) receivePreferences(preferences)
+}
+
+export function savePreferences(
+  pipeline: PipelineConfig,
+  providers: ProviderPreferences,
+  typesetting: TypesettingConfig,
+): Promise<Preferences> {
+  preferencesWriteGeneration += 1
+  const pending = preferencesWriteQueue
+    .catch(() => undefined)
+    .then(() => call(commands.savePreferences, pipeline, providers, typesetting))
+  preferencesWriteQueue = pending.then(
+    () => undefined,
+    () => undefined,
+  )
+  return pending
+}
+
+export function refreshTranslationModels(force = false): Promise<void> {
+  if (!force && translationModelsRequest) return translationModelsRequest
+
+  const generation = ++translationModelsGeneration
+  const request = call(commands.getTranslationModels)
+    .then((models) => {
+      if (generation === translationModelsGeneration) receiveTranslationModels(models)
+    })
+    .finally(() => {
+      if (translationModelsRequest === request) translationModelsRequest = null
+    })
+  translationModelsRequest = request
+  return request
+}
+
+function report(error: unknown): Error {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === 'string'
+        ? error
+        : 'The native application returned an unknown error.'
+  receiveError(message)
+  return error instanceof Error ? error : new Error(message)
+}

package/src/lib/document.ts

@@ -0,0 +1,46 @@
+import type { Layer } from '@aphrody/koharu-bridge/protocol'
+
+export function isTextLayer(layer: Layer): layer is Extract<Layer, { type: 'text' }> {
+  return layer.type === 'text'
+}
+
+export function isGroupLayer(layer: Layer): layer is Extract<Layer, { type: 'group' }> {
+  return layer.type === 'group'
+}
+
+export function isLockedLayer(layer: Layer): boolean {
+  return layer.type === 'artwork'
+}
+
+export function layerChildren(layers: Layer[], parent: string): Layer[] {
+  return layers.filter((layer) => layer.parent === parent)
+}
+
+export function expandLayerSelection(layers: Layer[], selected: string[]): string[] {
+  const result: string[] = []
+  const visit = (id: string) => {
+    const layer = layers.find((candidate) => candidate.id === id)
+    if (!layer) return
+    if (isGroupLayer(layer)) {
+      for (const child of layerChildren(layers, id)) visit(child.id)
+    } else if (!result.includes(id)) {
+      result.push(id)
+    }
+  }
+  for (const id of selected) visit(id)
+  return result
+}
+
+export function effectiveLayerVisibility(layers: Layer[], layer: Layer) {
+  let visible = layer.visibility.visible
+  let opacity = layer.visibility.opacity
+  let parent = layer.parent
+  while (parent) {
+    const group = layers.find((candidate) => candidate.id === parent)
+    if (!group || !isGroupLayer(group)) break
+    visible &&= group.visibility.visible
+    opacity *= group.visibility.opacity
+    parent = group.parent
+  }
+  return { visible, opacity }
+}

package/src/lib/geometry.ts

@@ -0,0 +1,272 @@
+import type { EntityId, Frame, Layer, Point, TransformFrame } from '@aphrody/koharu-bridge/protocol'
+
+import { effectiveLayerVisibility, isTextLayer } from './document'
+
+const minimumFrameSize = 1e-6
+
+export interface Camera {
+  zoom: number
+  translation: [number, number]
+}
+
+export interface CssFrame {
+  left: number
+  top: number
+  width: number
+  height: number
+  angle: number
+}
+
+export type ResizeHandle = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
+
+const resizeDirections: Record<ResizeHandle, Point> = {
+  nw: { x: -1, y: -1 },
+  n: { x: 0, y: -1 },
+  ne: { x: 1, y: -1 },
+  e: { x: 1, y: 0 },
+  se: { x: 1, y: 1 },
+  s: { x: 0, y: 1 },
+  sw: { x: -1, y: 1 },
+  w: { x: -1, y: 0 },
+}
+
+export function physicalPoint(clientX: number, clientY: number, bounds: DOMRect): Point {
+  const dpr = window.devicePixelRatio
+  return { x: (clientX - bounds.x) * dpr, y: (clientY - bounds.y) * dpr }
+}
+
+export function pagePoint(
+  clientX: number,
+  clientY: number,
+  bounds: DOMRect,
+  camera: Camera,
+): Point {
+  const point = physicalPoint(clientX, clientY, bounds)
+  return {
+    x: (point.x - camera.translation[0]) / camera.zoom,
+    y: (point.y - camera.translation[1]) / camera.zoom,
+  }
+}
+
+export function draftFrame(start: Point, end: Point): Frame {
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width: Math.max(1, Math.abs(end.x - start.x)),
+    height: Math.max(1, Math.abs(end.y - start.y)),
+    angle_degrees: 0,
+  }
+}
+
+export function selectableLayer(layer: Layer): boolean {
+  return layer.type === 'text' || layer.type === 'image'
+}
+
+export function layerFrame(layer: Layer): Frame | null {
+  const points =
+    layer.type === 'text' || layer.type === 'image' || layer.type === 'artwork'
+      ? layer.geometry?.points
+      : null
+  if (!points?.length || points.some((point) => !finite(point.x, point.y))) return null
+  if (layer.type === 'text' && layer.angle_degrees !== null) {
+    if (!finite(layer.angle_degrees)) return null
+    const angle = (layer.angle_degrees * Math.PI) / 180
+    const cos = Math.cos(angle)
+    const sin = Math.sin(angle)
+    const xs = points.map((point) => point.x * cos + point.y * sin)
+    const ys = points.map((point) => -point.x * sin + point.y * cos)
+    const left = Math.min(...xs)
+    const top = Math.min(...ys)
+    const right = Math.max(...xs)
+    const bottom = Math.max(...ys)
+    const width = right - left
+    const height = bottom - top
+    const centerX = (left + right) / 2
+    const centerY = (top + bottom) / 2
+    return width > minimumFrameSize && height > minimumFrameSize
+      ? {
+          x: centerX * cos - centerY * sin - width / 2,
+          y: centerX * sin + centerY * cos - height / 2,
+          width,
+          height,
+          angle_degrees: layer.angle_degrees,
+        }
+      : null
+  }
+  if (points.length === 4) {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points
+    const top: [number, number] = [topRight.x - topLeft.x, topRight.y - topLeft.y]
+    const right: [number, number] = [bottomRight.x - topRight.x, bottomRight.y - topRight.y]
+    const bottom: [number, number] = [bottomLeft.x - bottomRight.x, bottomLeft.y - bottomRight.y]
+    const left: [number, number] = [topLeft.x - bottomLeft.x, topLeft.y - bottomLeft.y]
+    const width = Math.hypot(...top)
+    const height = Math.hypot(...right)
+    if (width > minimumFrameSize && height > minimumFrameSize) {
+      const scale = Math.max(width, height, 1)
+      const oppositeLengthsMatch =
+        Math.abs(Math.hypot(...bottom) - width) <= scale * 1e-6 &&
+        Math.abs(Math.hypot(...left) - height) <= scale * 1e-6
+      const perpendicular = Math.abs(top[0] * right[0] + top[1] * right[1]) <= width * height * 1e-6
+      const diagonalsBisect =
+        Math.abs(topLeft.x + bottomRight.x - topRight.x - bottomLeft.x) <= scale * 1e-6 &&
+        Math.abs(topLeft.y + bottomRight.y - topRight.y - bottomLeft.y) <= scale * 1e-6
+      if (oppositeLengthsMatch && perpendicular && diagonalsBisect) {
+        const centerX = points.reduce((sum, point) => sum + point.x, 0) * 0.25
+        const centerY = points.reduce((sum, point) => sum + point.y, 0) * 0.25
+        return {
+          x: centerX - width * 0.5,
+          y: centerY - height * 0.5,
+          width,
+          height,
+          angle_degrees: (Math.atan2(top[1], top[0]) * 180) / Math.PI,
+        }
+      }
+    }
+  }
+
+  const xs = points.map((point) => point.x)
+  const ys = points.map((point) => point.y)
+  const x = Math.min(...xs)
+  const y = Math.min(...ys)
+  const width = Math.max(...xs) - x
+  const height = Math.max(...ys) - y
+  return width > minimumFrameSize && height > minimumFrameSize
+    ? { x, y, width, height, angle_degrees: 0 }
+    : null
+}
+
+export function controlFrame(
+  layer: Layer,
+  frames: Readonly<Record<EntityId, Frame>>,
+): Frame | null {
+  const frame = isTextLayer(layer) ? frames[layer.id] : undefined
+  return frame && validFrame(frame) ? frame : layerFrame(layer)
+}
+
+export function hitTestLayers(
+  layers: Layer[],
+  point: Point,
+  frames: Readonly<Record<EntityId, Frame>>,
+): Layer | null {
+  for (let index = layers.length - 1; index >= 0; index -= 1) {
+    const layer = layers[index]
+    const visibility = effectiveLayerVisibility(layers, layer)
+    if (!selectableLayer(layer) || !visibility.visible || visibility.opacity <= 0) continue
+    const frame = controlFrame(layer, frames)
+    if (frame && frameContains(frame, point)) return layer
+  }
+  return null
+}
+
+export function frameContains(frame: Frame, point: Point): boolean {
+  const centerX = frame.x + frame.width * 0.5
+  const centerY = frame.y + frame.height * 0.5
+  const angle = (-frame.angle_degrees * Math.PI) / 180
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const x = point.x - centerX
+  const y = point.y - centerY
+  const localX = x * cos - y * sin
+  const localY = x * sin + y * cos
+  return Math.abs(localX) <= frame.width * 0.5 && Math.abs(localY) <= frame.height * 0.5
+}
+
+export function cssFrame(frame: Frame, camera: Camera): CssFrame {
+  const dpr = window.devicePixelRatio
+  const scale = camera.zoom / dpr
+  return {
+    left: (frame.x * camera.zoom + camera.translation[0]) / dpr,
+    top: (frame.y * camera.zoom + camera.translation[1]) / dpr,
+    width: frame.width * scale,
+    height: frame.height * scale,
+    angle: frame.angle_degrees,
+  }
+}
+
+export function resizeFrame(
+  frame: Frame,
+  handle: ResizeHandle,
+  point: Point,
+  minimumSize: number,
+): Frame {
+  const direction = resizeDirections[handle]
+  const angle = (frame.angle_degrees * Math.PI) / 180
+  const widthAxis = { x: Math.cos(angle), y: Math.sin(angle) }
+  const heightAxis = { x: -widthAxis.y, y: widthAxis.x }
+  const center = { x: frame.x + frame.width * 0.5, y: frame.y + frame.height * 0.5 }
+  const anchor = {
+    x:
+      center.x -
+      widthAxis.x * direction.x * frame.width * 0.5 -
+      heightAxis.x * direction.y * frame.height * 0.5,
+    y:
+      center.y -
+      widthAxis.y * direction.x * frame.width * 0.5 -
+      heightAxis.y * direction.y * frame.height * 0.5,
+  }
+  const delta = { x: point.x - anchor.x, y: point.y - anchor.y }
+  const width = direction.x
+    ? Math.max(minimumSize, direction.x * dot(delta, widthAxis))
+    : frame.width
+  const height = direction.y
+    ? Math.max(minimumSize, direction.y * dot(delta, heightAxis))
+    : frame.height
+  const nextCenter = {
+    x:
+      anchor.x +
+      widthAxis.x * direction.x * width * 0.5 +
+      heightAxis.x * direction.y * height * 0.5,
+    y:
+      anchor.y +
+      widthAxis.y * direction.x * width * 0.5 +
+      heightAxis.y * direction.y * height * 0.5,
+  }
+  return {
+    ...frame,
+    x: nextCenter.x - width * 0.5,
+    y: nextCenter.y - height * 0.5,
+    width,
+    height,
+  }
+}
+
+export function rotateFrame(frame: Frame, start: Point, point: Point): Frame {
+  const center = { x: frame.x + frame.width * 0.5, y: frame.y + frame.height * 0.5 }
+  const from = { x: start.x - center.x, y: start.y - center.y }
+  const to = { x: point.x - center.x, y: point.y - center.y }
+  if (
+    Math.hypot(from.x, from.y) <= minimumFrameSize ||
+    Math.hypot(to.x, to.y) <= minimumFrameSize
+  ) {
+    return frame
+  }
+  const delta = (Math.atan2(from.x * to.y - from.y * to.x, dot(from, to)) * 180) / Math.PI
+  return { ...frame, angle_degrees: normalizeDegrees(frame.angle_degrees + delta) }
+}
+
+export function translateFrames(originals: TransformFrame[], delta: Point): TransformFrame[] {
+  return originals.map(({ element, frame }) => ({
+    element,
+    frame: { ...frame, x: frame.x + delta.x, y: frame.y + delta.y },
+  }))
+}
+
+function finite(...values: number[]): boolean {
+  return values.every(Number.isFinite)
+}
+
+function dot(left: Point, right: Point): number {
+  return left.x * right.x + left.y * right.y
+}
+
+function normalizeDegrees(value: number): number {
+  return ((((value + 180) % 360) + 360) % 360) - 180
+}
+
+function validFrame(frame: Frame): boolean {
+  return (
+    finite(frame.x, frame.y, frame.width, frame.height, frame.angle_degrees) &&
+    frame.width > minimumFrameSize &&
+    frame.height > minimumFrameSize
+  )
+}

package/src/lib/i18n.ts

@@ -0,0 +1,54 @@
+'use client'
+
+import i18n, { type Resource } from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import LocalStorageBackend from 'i18next-localstorage-backend'
+import { initReactI18next } from 'react-i18next'
+
+import enUS from '@aphrody/koharu-ui/locales/en-US/translation.json'
+import esES from '@aphrody/koharu-ui/locales/es-ES/translation.json'
+import jaJP from '@aphrody/koharu-ui/locales/ja-JP/translation.json'
+import koKR from '@aphrody/koharu-ui/locales/ko-KR/translation.json'
+import ptBR from '@aphrody/koharu-ui/locales/pt-BR/translation.json'
+import ruRU from '@aphrody/koharu-ui/locales/ru-RU/translation.json'
+import trTR from '@aphrody/koharu-ui/locales/tr-TR/translation.json'
+import zhCN from '@aphrody/koharu-ui/locales/zh-CN/translation.json'
+import zhTW from '@aphrody/koharu-ui/locales/zh-TW/translation.json'
+
+export const resources = {
+  'en-US': { translation: enUS },
+  'zh-CN': { translation: zhCN },
+  'zh-TW': { translation: zhTW },
+  'ja-JP': { translation: jaJP },
+  'ru-RU': { translation: ruRU },
+  'es-ES': { translation: esES },
+  'tr-TR': { translation: trTR },
+  'ko-KR': { translation: koKR },
+  'pt-BR': { translation: ptBR },
+} satisfies Resource
+
+export type SupportedLanguage = keyof typeof resources
+
+export const supportedLanguages = Object.keys(resources) as SupportedLanguage[]
+
+i18n
+  .use(LocalStorageBackend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    supportedLngs: supportedLanguages,
+    fallbackLng: 'en-US',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+    },
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    react: {
+      useSuspense: false,
+    },
+  })
+
+export default i18n