@aphrody/koharu-ui 0.0.0-stage → 0.1.0

package/src/components/editor/ResourceMonitor.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { Cpu, Gauge, HardDrive, MemoryStick } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import { useKoharuStore } from '@aphrody/koharu-ui/lib/store'
+import {
+  Popover,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from '../../internal/components/popover'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../internal/components/tooltip'
+
+/** Native telemetry for the Koharu process and the accelerator used by models. */
+export function ResourceMonitor() {
+  const { t } = useTranslation()
+  const resources = useKoharuStore((state) => state.resources)
+  if (!resources) return null
+
+  const device =
+    resources.devices.find((candidate) => candidate.selected) ?? resources.devices[0] ?? null
+  const cpu = percent(resources.process_cpu)
+  const ram = percentOf(resources.process_memory, resources.system_memory)
+  const ramUsed = bytes(resources.process_memory)
+  const ramTotal = bytes(resources.system_memory)
+  const gpu = device?.utilization == null ? null : percent(device.utilization)
+  const vram =
+    device?.memory_used != null && device.memory_budget != null
+      ? memory(device.memory_used, device.memory_budget)
+      : null
+
+  return (
+    <div className='ml-auto shrink-0'>
+      <Popover>
+        <Tooltip>
+          <PopoverTrigger
+            render={
+              <TooltipTrigger
+                render={
+                  <button
+                    type='button'
+                    aria-label={t('resources.summary', { ram, cpu })}
+                    className='flex items-center gap-1 text-[10px] text-muted-foreground tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-ring/25'
+                  />
+                }
+              >
+                <span className='flex h-7 w-14 items-center justify-between rounded-lg bg-primary/[0.07] px-1.5 hover:bg-primary/[0.1] hover:text-foreground'>
+                  <MemoryStick className='size-3.5 shrink-0' />
+                  {ram}
+                </span>
+                <span className='flex h-7 w-14 items-center justify-between rounded-lg bg-primary/[0.07] px-1.5 hover:bg-primary/[0.1] hover:text-foreground'>
+                  <Cpu className='size-3.5 shrink-0' />
+                  {cpu}
+                </span>
+              </TooltipTrigger>
+            }
+          />
+          <TooltipContent side='top'>
+            {t('resources.tooltip', { ramUsed, ramTotal, cpu })}
+          </TooltipContent>
+        </Tooltip>
+        <PopoverContent
+          align='end'
+          side='top'
+          className='w-72 gap-0 overflow-hidden rounded-xl border-0 bg-[var(--surface-floating)] p-0 shadow-[var(--shadow-panel)] ring-1 ring-foreground/[0.06]'
+        >
+          <PopoverHeader className='border-b border-border/50 px-3 py-2'>
+            <PopoverTitle className='flex items-center gap-2 text-[11px]'>
+              <Gauge className='size-3.5 text-primary' />
+              {t('resources.title')}
+            </PopoverTitle>
+          </PopoverHeader>
+          <div className='divide-y divide-border/50 px-1.5 py-1 text-[11px]'>
+            <ResourceRow
+              icon={Cpu}
+              label={t('resources.cpu')}
+              value={cpu}
+              detail={t('resources.processUtilization')}
+            />
+            <ResourceRow
+              icon={MemoryStick}
+              label={t('resources.ram')}
+              value={ram}
+              detail={t('resources.usedOfTotal', { used: ramUsed, total: ramTotal })}
+            />
+            {device && (
+              <ResourceRow
+                icon={HardDrive}
+                label={device.name}
+                value={gpu ?? '—'}
+                detail={
+                  vram ? t('resources.vramValue', { value: vram }) : t('resources.vramUnavailable')
+                }
+              />
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+function ResourceRow({
+  icon: Icon,
+  label,
+  value,
+  detail,
+}: {
+  icon: typeof Cpu
+  label: string
+  value: string
+  detail: string
+}) {
+  return (
+    <div className='grid grid-cols-[16px_minmax(0,1fr)_auto] items-center gap-x-2.5 px-2 py-2'>
+      <Icon className='size-3.5 shrink-0 text-muted-foreground' />
+      <Tooltip>
+        <TooltipTrigger render={<span className='min-w-0' />}>
+          <span className='block truncate text-foreground'>{label}</span>
+          <span className='block truncate text-[9px] text-muted-foreground'>{detail}</span>
+        </TooltipTrigger>
+        <TooltipContent side='left'>
+          {label}: {detail}
+        </TooltipContent>
+      </Tooltip>
+      <span className='text-right font-medium text-foreground tabular-nums'>{value}</span>
+    </div>
+  )
+}
+
+function memory(used: number, total: number): string {
+  const unit = total >= 1024 ** 3 ? 1024 ** 3 : 1024 ** 2
+  return `${(used / unit).toFixed(1)}/${(total / unit).toFixed(1)} ${unit === 1024 ** 3 ? 'GB' : 'MB'}`
+}
+
+function percent(value: number): string {
+  return `${Math.min(Math.max(0, value), 100).toFixed(0)}%`
+}
+
+function percentOf(used: number, total: number): string {
+  if (total <= 0) return '—'
+  return percent(Math.min((used / total) * 100, 100))
+}
+
+function bytes(value: number): string {
+  if (value >= 1024 ** 3) return `${(value / 1024 ** 3).toFixed(1)} GB`
+  if (value >= 1024 ** 2) return `${(value / 1024 ** 2).toFixed(1)} MB`
+  return `${Math.round(value / 1024)} KB`
+}

package/src/components/editor/RightSidebar.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { invoke, isTauri } from '@aphrody/api/core'
+
+import { AgentPanel } from '@aphrody/koharu-ui/components/editor/AgentPanel'
+import { ShenronExportPanel } from '@aphrody/koharu-ui/components/ShenronExportPanel'
+import { Inspector } from '@aphrody/koharu-ui/components/editor/Inspector'
+import { rightSidebarPanels, type RightSidebarPanel } from '@aphrody/koharu-ui/navigation'
+import { Button } from '../../internal/components/button'
+
+const shenronHost = {
+  isTauri,
+  invoke: <T,>(command: string, args: Record<string, unknown>) => invoke<T>(command, args),
+}
+
+export function RightSidebar() {
+  const { t } = useTranslation()
+  const [panel, setPanel] = useState<RightSidebarPanel>('properties')
+
+  return (
+    <aside className='flex h-full min-h-0 flex-col bg-[var(--surface-panel)]'>
+      <div className='flex h-10 shrink-0 items-center gap-1 border-b border-border/80 px-2.5'>
+        {rightSidebarPanels.map(({ id, icon: Icon, label }) => (
+          <Button
+            key={id}
+            variant={panel === id ? 'secondary' : 'ghost'}
+            size='sm'
+            className='h-7 flex-1 text-[10px]'
+            onClick={() => setPanel(id)}
+          >
+            <Icon className='size-3' /> {t(label)}
+          </Button>
+        ))}
+      </div>
+      <div className={panel === 'agent' ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+        <AgentPanel />
+      </div>
+      <div className={panel === 'properties' ? 'min-h-0 flex-1' : 'hidden'}>
+        <Inspector />
+      </div>
+      {panel === 'shenron' && (
+        <div className='flex min-h-0 flex-1 flex-col'>
+          <ShenronExportPanel host={shenronHost} />
+        </div>
+      )}
+    </aside>
+  )
+}

package/src/components/editor/SelectionControls.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useRef, type PointerEvent as ReactPointerEvent, type RefObject } from 'react'
+
+import {
+  cssFrame,
+  pagePoint,
+  resizeFrame,
+  rotateFrame,
+  type Camera,
+  type ResizeHandle,
+} from '@aphrody/koharu-ui/lib/geometry'
+import type { EntityId, Frame, Point, TransformFrame } from '@aphrody/koharu-bridge/protocol'
+
+interface SelectionControlsProps {
+  container: RefObject<HTMLDivElement | null>
+  element: EntityId
+  frame: Frame
+  camera: Camera
+  edgesOnly: boolean
+  onTransformStart: (elements: TransformFrame[]) => void
+  onTransformFrame: (elements: TransformFrame[]) => void
+  onTransformEnd: () => void
+}
+
+type ControlGesture =
+  | { kind: 'resize'; pointer: number; original: Frame; handle: ResizeHandle }
+  | { kind: 'rotate'; pointer: number; original: Frame; start: Point }
+
+const handles: Array<{
+  handle: ResizeHandle
+  left: string
+  top: string
+  cursor: string
+}> = [
+  { handle: 'nw', left: '0%', top: '0%', cursor: 'nwse-resize' },
+  { handle: 'n', left: '50%', top: '0%', cursor: 'ns-resize' },
+  { handle: 'ne', left: '100%', top: '0%', cursor: 'nesw-resize' },
+  { handle: 'e', left: '100%', top: '50%', cursor: 'ew-resize' },
+  { handle: 'se', left: '100%', top: '100%', cursor: 'nwse-resize' },
+  { handle: 's', left: '50%', top: '100%', cursor: 'ns-resize' },
+  { handle: 'sw', left: '0%', top: '100%', cursor: 'nesw-resize' },
+  { handle: 'w', left: '0%', top: '50%', cursor: 'ew-resize' },
+]
+
+export function SelectionControls({
+  container,
+  element,
+  frame,
+  camera,
+  edgesOnly,
+  onTransformStart,
+  onTransformFrame,
+  onTransformEnd,
+}: SelectionControlsProps) {
+  const gesture = useRef<ControlGesture | null>(null)
+  const position = cssFrame(frame, camera)
+
+  const eventPoint = (event: ReactPointerEvent<HTMLDivElement>): Point | null => {
+    const bounds = container.current?.getBoundingClientRect()
+    return bounds ? pagePoint(event.clientX, event.clientY, bounds, camera) : null
+  }
+
+  const capture = (event: ReactPointerEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    event.currentTarget.setPointerCapture(event.pointerId)
+  }
+
+  const startResize = (handle: ResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || gesture.current) return
+    capture(event)
+    gesture.current = { kind: 'resize', pointer: event.pointerId, original: frame, handle }
+    onTransformStart([{ element, frame }])
+  }
+
+  const startRotate = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || gesture.current) return
+    const start = eventPoint(event)
+    if (!start) return
+    capture(event)
+    gesture.current = { kind: 'rotate', pointer: event.pointerId, original: frame, start }
+    onTransformStart([{ element, frame }])
+  }
+
+  const update = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const current = gesture.current
+    if (!current || current.pointer !== event.pointerId) return
+    event.preventDefault()
+    event.stopPropagation()
+    const point = eventPoint(event)
+    if (!point) return
+    const next =
+      current.kind === 'resize'
+        ? resizeFrame(
+            current.original,
+            current.handle,
+            point,
+            window.devicePixelRatio / camera.zoom,
+          )
+        : rotateFrame(current.original, current.start, point)
+    onTransformFrame([{ element, frame: next }])
+  }
+
+  const finish = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const current = gesture.current
+    if (!current || current.pointer !== event.pointerId) return
+    event.preventDefault()
+    event.stopPropagation()
+    gesture.current = null
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId)
+    }
+    onTransformEnd()
+  }
+
+  const lostCapture = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const current = gesture.current
+    if (!current || current.pointer !== event.pointerId) return
+    gesture.current = null
+    onTransformEnd()
+  }
+
+  const pointerEvents = {
+    onPointerMove: update,
+    onPointerUp: finish,
+    onPointerCancel: finish,
+    onLostPointerCapture: lostCapture,
+  }
+
+  return (
+    <div
+      data-testid='selection-controls'
+      className='pointer-events-none absolute box-border border border-[var(--canvas-selection)]'
+      style={{
+        left: position.left,
+        top: position.top,
+        width: position.width,
+        height: position.height,
+        transform: `rotate(${position.angle}deg)`,
+        transformOrigin: '50% 50%',
+      }}
+    >
+      {handles.map(({ handle, left, top, cursor }) => (
+        <div
+          key={handle}
+          data-canvas-control
+          data-resize-handle={handle}
+          className='pointer-events-auto absolute grid size-3.5 -translate-x-1/2 -translate-y-1/2 touch-none place-items-center'
+          style={{
+            left,
+            top,
+            cursor,
+            width:
+              edgesOnly && (handle === 'n' || handle === 's')
+                ? 'max(14px, calc(100% - 14px))'
+                : undefined,
+            height:
+              edgesOnly && (handle === 'e' || handle === 'w')
+                ? 'max(14px, calc(100% - 14px))'
+                : undefined,
+          }}
+          onPointerDown={startResize(handle)}
+          {...pointerEvents}
+        >
+          {!edgesOnly && (
+            <span className='size-1.5 rounded-[1px] border border-primary-foreground bg-[var(--canvas-selection)] shadow-[0_0_0_1px_rgb(0_0_0/0.12)]' />
+          )}
+        </div>
+      ))}
+
+      <span className='pointer-events-none absolute top-0 left-1/2 h-2 w-px -translate-x-1/2 -translate-y-full bg-[var(--canvas-selection)]' />
+      <div
+        data-canvas-control
+        data-rotate-handle
+        className='pointer-events-auto absolute top-[-16px] left-1/2 grid size-3.5 -translate-x-1/2 -translate-y-1/2 cursor-alias touch-none place-items-center'
+        onPointerDown={startRotate}
+        {...pointerEvents}
+      >
+        <span className='size-1.5 rounded-[1px] border border-primary-foreground bg-[var(--canvas-selection)] shadow-[0_0_0_1px_rgb(0_0_0/0.12)]' />
+      </div>
+    </div>
+  )
+}

package/src/components/editor/StatusBar.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+
+import { usePage } from '@aphrody/koharu-ui/lib/queries'
+import { useKoharuStore } from '@aphrody/koharu-ui/lib/store'
+import { Slider } from '../../internal/components/slider'
+
+interface StatusBarProps {
+  onZoomChange: (zoom: number) => void
+}
+
+export function StatusBar({ onZoomChange }: StatusBarProps) {
+  const { t } = useTranslation()
+  const page = usePage().data
+  const camera = useKoharuStore((state) => state.camera)
+  const zoom = Math.round(camera.zoom * 100)
+
+  return (
+    <footer className='flex h-7 shrink-0 items-center gap-3 border-t border-border/80 bg-[var(--surface-toolbar)] px-2.5 text-[10px] text-muted-foreground'>
+      <div className='flex w-36 shrink-0 items-center gap-2'>
+        <Slider
+          aria-label={t('status.zoom')}
+          min={10}
+          max={800}
+          step={5}
+          value={Math.min(800, Math.max(10, zoom))}
+          className='w-24 shrink-0 [&_[data-slot=slider-thumb]]:size-2'
+          onValueChange={(value) => onZoomChange(value / 100)}
+        />
+        <span className='w-9 shrink-0 text-right text-foreground tabular-nums'>{zoom}%</span>
+      </div>
+      <div className='flex-1' />
+      {page && (
+        <span className='tabular-nums'>
+          {page.size.width} × {page.size.height} px
+        </span>
+      )}
+    </footer>
+  )
+}

package/src/components/editor/ToolBar.tsx

@@ -0,0 +1,182 @@
+'use client'
+
+import {
+  Brush,
+  Eraser,
+  Hand,
+  Minus,
+  MousePointer2,
+  Pipette,
+  Plus,
+  Sparkles,
+  Type,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import { ColorWell } from '@aphrody/koharu-ui/components/controls/ColorWell'
+import { usePage } from '@aphrody/koharu-ui/lib/queries'
+import {
+  isBrushTool,
+  MAX_BRUSH_DIAMETER,
+  MIN_BRUSH_DIAMETER,
+  useKoharuStore,
+  type CanvasTool,
+} from '@aphrody/koharu-ui/lib/store'
+import { Button } from '../../internal/components/button'
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '../../internal/components/number-field'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger,
+} from '../../internal/components/popover'
+import { Slider } from '../../internal/components/slider'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../internal/components/tooltip'
+
+const tools = [
+  ['select', MousePointer2],
+  ['text', Type],
+  ['draw', Brush],
+  ['eraser', Eraser],
+  ['color_picker', Pipette],
+  ['remove', Sparkles],
+  ['pan', Hand],
+] as const satisfies ReadonlyArray<readonly [CanvasTool, typeof MousePointer2]>
+
+export function ToolBar() {
+  const { t } = useTranslation()
+  const page = usePage().data
+  const active = useKoharuStore((state) => state.tool)
+  const brush = useKoharuStore((state) => state.brush)
+  const setTool = useKoharuStore((state) => state.setTool)
+  const setBrush = useKoharuStore((state) => state.setBrush)
+  const shortcuts = useKoharuStore((state) => state.shortcuts)
+  const hasBrush = isBrushTool(active)
+
+  return (
+    <aside className='absolute top-3 left-3 z-20 flex w-11 flex-col rounded-2xl border border-border bg-[var(--surface-floating)] p-1 shadow-[var(--shadow-toolrail)]'>
+      <div className='flex flex-col items-center py-0.5'>
+        {tools.map(([tool, Icon], index) => (
+          <div key={tool} className='contents'>
+            {index === tools.length - 1 && <span className='my-1 h-px w-5 bg-border' />}
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    disabled={!page}
+                    aria-label={t(`tools.${tool}`)}
+                    data-active={active === tool}
+                    className='relative text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground disabled:opacity-30 data-[active=true]:bg-accent data-[active=true]:text-accent-foreground'
+                    onClick={() => setTool(tool)}
+                  />
+                }
+              >
+                <Icon className='size-4' />
+              </TooltipTrigger>
+              <TooltipContent side='right'>
+                {t(`tools.${tool}`)}
+                <span className='ml-2 opacity-60'>{shortcuts[tool].toUpperCase()}</span>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+
+      {hasBrush && (
+        <div className='flex flex-col items-center gap-1 border-t border-border/80 py-1.5'>
+          {active === 'draw' && (
+            <ColorWell value={brush.color} onChange={(color) => setBrush({ ...brush, color })} />
+          )}
+          <BrushSize
+            value={brush.diameter}
+            onChange={(diameter) => setBrush({ ...brush, diameter })}
+          />
+        </div>
+      )}
+    </aside>
+  )
+}
+
+function BrushSize({ value, onChange }: { value: number; onChange: (value: number) => void }) {
+  const { t } = useTranslation()
+  const roundedValue = Math.round(value)
+
+  return (
+    <Popover>
+      <Tooltip>
+        <PopoverTrigger
+          render={
+            <TooltipTrigger
+              render={
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  aria-label={t('tools.brushSizePixels', { size: roundedValue })}
+                  className='size-8 rounded-xl font-sans text-[11px] leading-none font-medium tracking-[-0.02em] text-muted-foreground tabular-nums hover:bg-foreground/[0.06] hover:text-foreground'
+                />
+              }
+            >
+              {roundedValue}
+            </TooltipTrigger>
+          }
+        />
+        <TooltipContent side='right'>
+          {t('tools.brushSizeShort', { size: roundedValue })}
+        </TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        side='right'
+        align='center'
+        sideOffset={8}
+        className='w-48 gap-2.5 rounded-xl p-2.5'
+      >
+        <div className='flex items-center justify-between gap-3'>
+          <PopoverTitle className='text-[11px]'>{t('tools.brushSize')}</PopoverTitle>
+          <NumberField
+            min={MIN_BRUSH_DIAMETER}
+            max={MAX_BRUSH_DIAMETER}
+            step={1}
+            value={roundedValue}
+            className='w-20'
+            onValueChange={(next) => {
+              if (next !== null) onChange(clamp(next, MIN_BRUSH_DIAMETER, MAX_BRUSH_DIAMETER))
+            }}
+          >
+            <NumberFieldGroup className='h-7'>
+              <NumberFieldDecrement aria-label={t('tools.decreaseBrushSize')}>
+                <Minus />
+              </NumberFieldDecrement>
+              <NumberFieldInput aria-label={t('tools.brushSizeInput')} />
+              <NumberFieldIncrement aria-label={t('tools.increaseBrushSize')}>
+                <Plus />
+              </NumberFieldIncrement>
+            </NumberFieldGroup>
+          </NumberField>
+        </div>
+        <Slider
+          aria-label={t('tools.brushSize')}
+          min={MIN_BRUSH_DIAMETER}
+          max={MAX_BRUSH_DIAMETER}
+          step={1}
+          value={value}
+          className='py-1 [&_[data-slot=slider-thumb]]:size-2.5'
+          onValueChange={onChange}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, Number.isFinite(value) ? value : min))
+}