steveandClaude Opus 4.8
451a4b00cc
Turns the canvas foundation into the real editor, loading a garden from the server and editing it with optimistic sync. Completes Phase 3. - lib/objects.ts: react-query over GET /gardens/:id/full + optimistic create/update/delete. Update applies to the cache up front and PATCHes with the row version; a 409 adopts the server's `current` row and toasts "updated elsewhere". One PATCH per gesture. - editor/store.ts: adds liveObject (in-gesture geometry, rendered instantly), armedKind (palette tap-to-place), and objectDragging (so the pan gesture stands down while an object drag owns the pointer). - editor/Palette.tsx + kinds.ts: the seven kinds with icons + default sizes; tap a kind, tap the canvas to place (works desktop + touch). - editor/SelectionOverlay.tsx: move (drag body), resize (corner handles, opposite corner fixed via the object-local frame so rotation is honored), rotate (knob, snaps to 15°, free with Shift). Each updates liveObject and fires one PATCH on release. - editor/Inspector.tsx: name, dimensions/position (unit-aware), rotation, color override (+ clear), plantable, notes, two-step delete. Commits per field; re-syncs from the object unless a field is focused. - GardenCanvas: placement, live-drag merge, z-ordered render, selection overlay, and ?focus=<id> frames an object on load. GardenEditorPage loads /full and lays out palette | canvas | inspector (bottom sheet on mobile). - components/ui/toast.tsx + Toaster in AppShell. Verified in a real browser against the embedded binary: place a bed → move, resize, rotate (rotate snapped to 60°) → set its name in the inspector → reload, all persisted; each gesture was exactly one PATCH (version 1→2→3→4→5); an out-of-band edit made the next drag 409 → rollback to the server's value + toast. tsc + 17 vitest tests green. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { cn } from '@/lib/cn'
|
|
import { OBJECT_KINDS, kindDef } from './kinds'
|
|
import { useEditorStore } from './store'
|
|
|
|
/**
|
|
* The object-kind palette. Tap a kind to arm it, then tap the canvas to place
|
|
* (works on desktop and touch). Tapping the armed kind again disarms it.
|
|
*/
|
|
export function Palette() {
|
|
const armedKind = useEditorStore((s) => s.armedKind)
|
|
const setArmedKind = useEditorStore((s) => s.setArmedKind)
|
|
const select = useEditorStore((s) => s.select)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex flex-wrap gap-1.5 md:flex-col">
|
|
{OBJECT_KINDS.map((k) => {
|
|
const active = armedKind === k.kind
|
|
return (
|
|
<button
|
|
key={k.kind}
|
|
type="button"
|
|
onClick={() => {
|
|
select(null)
|
|
setArmedKind(active ? null : k.kind)
|
|
}}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm font-medium outline-none transition-colors',
|
|
'focus-visible:ring-2 focus-visible:ring-accent/40',
|
|
active
|
|
? 'border-accent bg-accent/10 text-accent-strong'
|
|
: 'border-border bg-surface text-fg hover:bg-border/50',
|
|
)}
|
|
aria-pressed={active}
|
|
>
|
|
<span aria-hidden className="text-base leading-none">
|
|
{k.icon}
|
|
</span>
|
|
<span>{k.label}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
{armedKind && (
|
|
<p className="text-xs text-muted">Tap the canvas to place a {kindDef(armedKind)?.label ?? 'object'}.</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|