@erclx/canon 5.15.0 → 5.17.0

package/src/canvas/client/shell.css

@@ -119,7 +119,8 @@ code {
   background: var(--color-border);
 }
 
-.row[aria-current='page'] {
+.row[aria-current='page'],
+.row[aria-current='true'] {
   background: var(--color-surface);
   color: var(--color-text);
   box-shadow: inset 2px 0 0 var(--color-accent);
@@ -275,6 +276,73 @@ code {
   border-radius: 2px;
 }
 
+/* The frame's handle, since a press inside the frame picks an element. */
+.frame-label {
+  cursor: move;
+  touch-action: none;
+}
+
+.frame[data-dragging='true'] .frame-label {
+  cursor: grabbing;
+}
+
+.frame-body {
+  position: relative;
+}
+
+/* Inset by the iframe border, so a box lines up with the element it marks. */
+.element-outline {
+  position: absolute;
+  translate: 1px 1px;
+  pointer-events: none;
+}
+
+.element-outline[data-outline='hover'] {
+  outline: calc(1px * var(--outline-scale, 1)) dashed var(--color-accent);
+}
+
+.element-outline[data-outline='selected'] {
+  outline: calc(2px * var(--outline-scale, 1)) solid var(--color-accent);
+}
+
+/* Above its neighbors, so a frame dragged over another stays whole. */
+.frame[data-selected='true'] {
+  z-index: 1;
+}
+
+.frame[data-selected='true'] iframe {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.frame:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 6px;
+}
+
+.box {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xs) var(--space-md);
+  margin: var(--space-xs) 0 0;
+}
+
+.box-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
+
+.box dt {
+  color: var(--color-muted);
+}
+
+.box dd {
+  margin: 0;
+  color: var(--color-text);
+  font-variant-numeric: tabular-nums;
+}
+
 .toolbar {
   position: absolute;
   right: var(--space-md);
@@ -317,3 +385,65 @@ code {
     border-bottom: 1px solid var(--color-border);
   }
 }
+
+.frame-row {
+  display: flex;
+  align-items: center;
+}
+
+.frame-row .row {
+  flex: 1;
+  min-width: 0;
+}
+
+.disclosure {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-action);
+  background: none;
+  color: var(--color-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.disclosure:hover {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.layers {
+  margin: 0;
+  padding: 0 0 0 var(--space-sm);
+  list-style: none;
+}
+
+.layers-root {
+  padding-left: var(--space-lg);
+}
+
+.layer {
+  min-height: 24px;
+}
+
+.row-meta.layer-text {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* One property a row, since a computed color or font stack outgrows a half. */
+.styles {
+  grid-template-columns: 1fr;
+}
+
+.styles dd {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/canvas/client/state.ts

@@ -1,9 +1,12 @@
 import { computed, signal } from '@preact/signals'
+import type { ElementAddress } from '@/canvas/address'
 import type { Frame, Page } from '@/canvas/content'
 
 /**
  * Everything the panels read. Type imports only from outside `client/`, since
  * this runs in the browser and a Node or Bun module would not bundle there.
+ * `@/canvas/address` is the one exception the client imports for values, since
+ * it imports nothing itself.
  */
 
 export type Theme = 'light' | 'dark'
@@ -14,9 +17,27 @@ export interface TokenSource {
   readonly notice?: string
 }
 
+export interface FrameRef {
+  readonly page: string
+  readonly frame: string
+}
+
+export interface ElementRef {
+  readonly index: number
+  readonly tag: string
+  /** Set by the server once the frame file changed since the pick. */
+  readonly stale?: boolean
+}
+
+export interface SelectionRef extends FrameRef {
+  readonly element?: ElementRef
+}
+
 export interface PagesRecord {
   readonly pages: readonly Page[]
   readonly tokens: TokenSource
+  /** Absent when nothing is selected or the selected frame is gone. */
+  readonly selection?: SelectionRef | null
 }
 
 export interface ChangeEvent {
@@ -54,11 +75,51 @@ export const frameVersions = signal<ReadonlyMap<string, number>>(new Map())
 
 export const view = signal<View>({ x: 0, y: 0, zoom: 0.5 })
 
+/**
+ * The one frame, or element in it, the operator pointed at, which Claude reads
+ * as "this one".
+ */
+export const selection = signal<SelectionRef | undefined>(undefined)
+
+/** Each loaded frame's document by frame key, replaced on every reload. */
+export const frameDocuments = signal<ReadonlyMap<string, Document>>(new Map())
+
+/** The element under the pointer, in a frame or in the layers tree. */
+export const hoveredElement = signal<
+  { readonly key: string; readonly index: number } | undefined
+>(undefined)
+
+/** Frame keys whose layers are open in the pages panel. */
+export const expandedFrames = signal<ReadonlySet<string>>(new Set())
+
+/** Set while a frame follows the pointer, so the surface can style it. */
+export const draggingFrame = signal<string | undefined>(undefined)
+
+/** Why the last write to the canvas failed, until the next one succeeds. */
+export const writeError = signal<string | undefined>(undefined)
+
 export const currentPage = computed<Page | undefined>(() => {
   const all = pages.value
   return all.find((page) => page.name === selectedPage.value) ?? all[0]
 })
 
+/** The selected frame when it is on the page being shown. */
+export const selectedFrame = computed<Frame | undefined>(() => {
+  const page = currentPage.value
+  const chosen = selection.value
+  if (!page || chosen?.page !== page.name) return undefined
+  return page.frames.find((frame) => frame.name === chosen.frame)
+})
+
+/** The selected element when its frame is on the page being shown. */
+export const selectedElement = computed<
+  { readonly frame: Frame; readonly element: ElementRef } | undefined
+>(() => {
+  const frame = selectedFrame.value
+  const element = selection.value?.element
+  return frame && element ? { frame, element } : undefined
+})
+
 export function frameKey(page: string, frame: Pick<Frame, 'file'>): string {
   return `${page}/${frame.file}`
 }
@@ -77,9 +138,22 @@ export function toggleFrameTheme(key: string): void {
   frameThemes.value = next
 }
 
+export function registerFrameDocument(key: string, doc: Document): void {
+  const next = new Map(frameDocuments.value)
+  next.set(key, doc)
+  frameDocuments.value = next
+}
+
+export function toggleLayers(key: string): void {
+  const next = new Set(expandedFrames.value)
+  if (!next.delete(key)) next.add(key)
+  expandedFrames.value = next
+}
+
 export function applyRecord(record: PagesRecord): void {
   pages.value = record.pages
   tokens.value = record.tokens
+  selection.value = record.selection ?? undefined
   loadError.value = undefined
   isLoaded.value = true
 }
@@ -115,6 +189,112 @@ export async function applyChange(
   await loadPages(fetchImpl)
 }
 
+/** What a refused element pick tells the operator, by the server's reason. */
+const PICK_NOTICES: Readonly<Record<string, string | undefined>> = {
+  'address-mismatch':
+    'Could not select that element, since the browser and the file count the elements of this frame differently, as when the browser builds an element the file does not state.',
+  'stale-address':
+    'Could not select that element, since the frame changed before the pick arrived. Pick it again once the frame reloads.',
+}
+
+async function refusalReason(response: Response): Promise<string | undefined> {
+  try {
+    const body: unknown = await response.json()
+    return typeof body === 'object' && body !== null && 'reason' in body
+      ? String(body.reason)
+      : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Posts one write and reports a refusal in the panel rather than failing
+ * silently. A refusal also rereads the page list, so a position the server
+ * would not take does not stay on the surface.
+ */
+async function write(
+  path: string,
+  body: unknown,
+  fetchImpl: typeof fetch,
+): Promise<void> {
+  try {
+    const response = await fetchImpl(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    if (!response.ok) {
+      const reason = await refusalReason(response)
+      writeError.value =
+        (reason && PICK_NOTICES[reason]) ??
+        `Could not save (status ${response.status}). Check canon canvas serve is still running.`
+      await loadPages(fetchImpl)
+      return
+    }
+    writeError.value = undefined
+  } catch (error) {
+    writeError.value = `Could not save (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+    await loadPages(fetchImpl)
+  }
+}
+
+/** Selects a frame here at once and records it where Claude reads it. */
+export async function selectFrame(
+  ref: FrameRef | undefined,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  selection.value = ref
+  await write('/api/selection', ref ?? {}, fetchImpl)
+}
+
+/**
+ * Selects one element of a frame, opens that frame's layers so the tree shows
+ * the pick, and records it where Claude reads it. The server checks the
+ * address against the file and refuses one it cannot match.
+ */
+export async function selectElement(
+  ref: FrameRef,
+  key: string,
+  address: ElementAddress,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  selection.value = {
+    ...ref,
+    element: { index: address.index, tag: address.tag },
+  }
+  if (!expandedFrames.value.has(key)) toggleLayers(key)
+  await write('/api/selection', { ...ref, element: address }, fetchImpl)
+}
+
+/**
+ * Moves a frame on the surface without writing, which a drag calls on every
+ * pointer move. The next reread replaces it with what the layout holds.
+ */
+export function previewMove(ref: FrameRef, x: number, y: number): void {
+  pages.value = pages.value.map((candidate) =>
+    candidate.name === ref.page
+      ? {
+          ...candidate,
+          frames: candidate.frames.map((frame) =>
+            frame.name === ref.frame ? { ...frame, x, y, placed: true } : frame,
+          ),
+        }
+      : candidate,
+  )
+}
+
+/** Shows the move and writes it through the server's shared layout writer. */
+export async function moveFrameTo(
+  ref: FrameRef,
+  x: number,
+  y: number,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  previewMove(ref, x, y)
+  await write('/api/frames/move', { ...ref, x, y }, fetchImpl)
+}
+
 export function clampZoom(zoom: number): number {
   return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom))
 }
@@ -183,4 +363,10 @@ export function resetState(): void {
   frameThemes.value = new Map()
   frameVersions.value = new Map()
   view.value = { x: 0, y: 0, zoom: 0.5 }
+  selection.value = undefined
+  frameDocuments.value = new Map()
+  hoveredElement.value = undefined
+  expandedFrames.value = new Set()
+  draggingFrame.value = undefined
+  writeError.value = undefined
 }