@erclx/canon 5.28.0 → 5.30.0

package/src/canvas/client/state.ts

@@ -63,6 +63,13 @@ export interface PagesRecord {
   readonly selection?: SelectionRef | null
   /** The live marks, which a server older than the mark leaves out. */
   readonly editing?: readonly EditingRef[]
+  /** Whether the server holds an edit to undo or redo, absent before undo shipped. */
+  readonly history?: HistoryFlags
+}
+
+export interface HistoryFlags {
+  readonly canUndo: boolean
+  readonly canRedo: boolean
 }
 
 export interface ChangeEvent {
@@ -128,6 +135,60 @@ export const writeError = signal<string | undefined>(undefined)
 
 export const leftTab = signal<LeftTab>('pages')
 
+/** Whether the operator hid both side panels to see the whole surface. */
+export const panelsHidden = signal(false)
+
+export function togglePanels(): void {
+  panelsHidden.value = !panelsHidden.value
+}
+
+export type PanelSide = 'left' | 'right'
+
+export interface PanelWidths {
+  readonly left: number
+  readonly right: number
+}
+
+/** The 15rem and 16rem columns the shell opened at before panels resized. */
+export const DEFAULT_PANEL_WIDTHS: PanelWidths = { left: 240, right: 256 }
+export const MIN_PANEL_WIDTH = 180
+export const MAX_PANEL_WIDTH = 480
+/** What a panel never squeezes the surface below, the reflow floor. */
+export const MIN_SURFACE_WIDTH = 320
+
+export const panelWidths = signal<PanelWidths>(DEFAULT_PANEL_WIDTHS)
+
+/**
+ * Holds one panel between the floor and the ceiling, and under whatever keeps
+ * the surface at its own floor beside the other panel. The floor wins on a
+ * window too narrow for both.
+ */
+export function clampPanelWidth(
+  side: PanelSide,
+  width: number,
+  windowWidth: number,
+  widths: PanelWidths = panelWidths.value,
+): number {
+  const other = side === 'left' ? widths.right : widths.left
+  const ceiling = Math.min(
+    MAX_PANEL_WIDTH,
+    windowWidth - other - MIN_SURFACE_WIDTH,
+  )
+  const fallback = DEFAULT_PANEL_WIDTHS[side]
+  const wanted = Number.isFinite(width) ? width : fallback
+  return Math.round(Math.max(MIN_PANEL_WIDTH, Math.min(ceiling, wanted)))
+}
+
+export function setPanelWidth(
+  side: PanelSide,
+  width: number,
+  windowWidth: number,
+): void {
+  const next = clampPanelWidth(side, width, windowWidth)
+  if (panelWidths.value[side] === next) return
+  panelWidths.value = { ...panelWidths.value, [side]: next }
+}
+
 /** The tool the strip has lit, which a Space pan overrides while held. */
 export const activeTool = signal<Tool>('move')
 
@@ -149,6 +210,14 @@ const SAVED_MS = 2500
 /** Why the last edit wrote nothing, until the next one lands. */
 export const editRefusal = signal<string | undefined>(undefined)
 
+const NO_HISTORY: HistoryFlags = { canUndo: false, canRedo: false }
+
+/** What the server's history holds, as the last page record reported it. */
+export const history = signal<HistoryFlags>(NO_HISTORY)
+
+/** Why the last undo or redo wrote nothing, until the next one runs. */
+export const historyNotice = signal<string | undefined>(undefined)
+
 /**
  * The hash an edit answered by frame key, until that frame reloads. A second
  * edit sent before the reload is made from the file the first one wrote, not
@@ -275,6 +344,7 @@ export function applyRecord(record: PagesRecord): void {
   tokens.value = record.tokens
   selection.value = record.selection ?? undefined
   applyEditing(record.pages, record.editing ?? [])
+  history.value = record.history ?? NO_HISTORY
   loadError.value = undefined
   isLoaded.value = true
 }
@@ -395,11 +465,22 @@ const EDIT_NOTICES: Readonly<Record<string, string | undefined>> = {
     'Could not save the text, since this element holds other elements.',
 }
 
+let stepCount = 0
+
+/**
+ * A token the edits of one gesture share, so the server merges them into one
+ * undo. The time keeps it apart from a token an earlier shell load sent.
+ */
+export function newStep(): string {
+  stepCount += 1
+  return `${Date.now().toString(36)}-${stepCount}`
+}
+
 /**
  * Posts one property change to the element the address names. A refusal
  * says why and reloads the frame, so a pending value never sits over a file
  * that moved under it. Resolves to what the write answered, or undefined when
- * nothing was written.
+ * nothing was written. Edits carrying one step undo as one.
  */
 export async function editElement(
   ref: FrameRef,
@@ -407,6 +488,7 @@ export async function editElement(
   address: ElementAddress,
   property: string,
   value: string,
+  step?: string,
   fetchImpl: typeof fetch = fetch,
 ): Promise<{ readonly hash?: string } | undefined> {
   const hash = editedHashes.value.get(key) ?? address.hash
@@ -420,6 +502,7 @@ export async function editElement(
         element: { ...address, hash },
         property,
         value,
+        ...(step !== undefined && { step }),
       }),
     })
     const body: unknown = await response.json().catch(() => undefined)
@@ -440,6 +523,7 @@ export async function editElement(
       return undefined
     }
     editRefusal.value = undefined
+    historyNotice.value = undefined
     const saved = pendingEdit.value
     savedEdit.value = saved
     setTimeout(() => {
@@ -459,10 +543,11 @@ export async function editElement(
 }
 
 /**
- * Writes an element's new size as one edit per changed axis, width first. The
- * second carries the hash the first answered, so a frame reloading between the
- * two cannot leave it holding the hash of a file already rewritten. A refused
- * first edit sends no second.
+ * Writes an element's new size as one edit per changed axis, width first,
+ * sharing one step so a single undo restores both. The second carries the
+ * hash the first answered, so a frame reloading between the two cannot leave
+ * it holding the hash of a file already rewritten. A refused first edit sends
+ * no second.
  */
 export async function resizeElement(
   ref: FrameRef,
@@ -472,6 +557,7 @@ export async function resizeElement(
   height: number | undefined,
   fetchImpl: typeof fetch = fetch,
 ): Promise<void> {
+  const step = newStep()
   let current = address
   if (width !== undefined) {
     const written = await editElement(
@@ -480,16 +566,79 @@ export async function resizeElement(
       current,
       'width',
       `${width}px`,
+      step,
       fetchImpl,
     )
     if (!written) return
     if (written.hash) current = { ...current, hash: written.hash }
   }
   if (height !== undefined) {
-    await editElement(ref, key, current, 'height', `${height}px`, fetchImpl)
+    await editElement(
+      ref,
+      key,
+      current,
+      'height',
+      `${height}px`,
+      step,
+      fetchImpl,
+    )
   }
 }
 
+const HISTORY_NOTICES = {
+  undo: 'Could not undo, since that element or frame changed after your edit. Nothing was written.',
+  redo: 'Could not redo, since that element or frame changed after the undo. Nothing was written.',
+} as const
+
+/**
+ * Asks the server to step its history and rereads the page list for the new
+ * flags. A written step clears every hash an edit answered, since the frame
+ * it named was just rewritten under it. The frame itself reloads on the
+ * change event the write raises.
+ */
+async function stepHistory(
+  direction: 'undo' | 'redo',
+  fetchImpl: typeof fetch,
+): Promise<void> {
+  try {
+    const response = await fetchImpl(`/api/history/${direction}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: '{}',
+    })
+    const body: unknown = await response.json().catch(() => undefined)
+    const outcome =
+      typeof body === 'object' && body !== null && 'outcome' in body
+        ? body.outcome
+        : undefined
+    if (!response.ok) {
+      historyNotice.value = `Could not ${direction} (status ${response.status}). Try again.`
+    } else if (outcome === 'dropped') {
+      historyNotice.value = HISTORY_NOTICES[direction]
+    } else if (outcome === 'applied') {
+      const done = direction === 'undo' ? 'Undone' : 'Redone'
+      historyNotice.value = done
+      setTimeout(() => {
+        if (historyNotice.value === done) historyNotice.value = undefined
+      }, SAVED_MS)
+    } else {
+      historyNotice.value = undefined
+    }
+    if (outcome === 'applied') editedHashes.value = new Map()
+  } catch (error) {
+    historyNotice.value = `Could not ${direction} (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+  }
+  await loadPages(fetchImpl)
+}
+
+export function undo(fetchImpl: typeof fetch = fetch): Promise<void> {
+  return stepHistory('undo', fetchImpl)
+}
+
+export function redo(fetchImpl: typeof fetch = fetch): Promise<void> {
+  return stepHistory('redo', 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.
@@ -636,4 +785,8 @@ export function resetState(): void {
   savedEdit.value = undefined
   editRefusal.value = undefined
   editedHashes.value = new Map()
+  history.value = NO_HISTORY
+  historyNotice.value = undefined
+  panelsHidden.value = false
+  panelWidths.value = DEFAULT_PANEL_WIDTHS
 }

package/src/canvas/client/surface.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import type { JSX, RefObject } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'
 import { addressOf, documentElements, elementAt } from '@/canvas/address'
 import type { Frame } from '@/canvas/content'
 import { type SurfaceAction, surfaceAction } from '@/canvas/client/keys'
@@ -15,11 +15,15 @@ import {
   frameKey,
   frameTheme,
   frameVersions,
+  historyNotice,
   hoveredElement,
   moveFrameTo,
   panBy,
+  panelsHidden,
+  panelWidths,
   previewMove,
   previewResize,
+  redo,
   registerFrameDocument,
   resizeElement,
   resizeFrameTo,
@@ -30,6 +34,8 @@ import {
   spacePan,
   type Theme,
   toggleFrameTheme,
+  togglePanels,
+  undo,
   view,
   zoomAt,
 } from '@/canvas/client/state'
@@ -596,6 +602,22 @@ export function Surface({ viewportRef }: SurfaceProps): JSX.Element {
     fitViewport(viewportRef)
   }, [page?.name])
 
+  /*
+   * A panel hiding, showing, or resizing moves the viewport's left edge, so
+   * the view shifts by as much the other way and the frames hold still on
+   * screen. Reading the flag subscribes this component to it.
+   */
+  const viewportLeft = useRef<number | undefined>(undefined)
+  const isHidden = panelsHidden.value
+  const leftWidth = panelWidths.value.left
+  useLayoutEffect(() => {
+    const left = viewportRef.current?.getBoundingClientRect().left
+    if (left === undefined) return
+    const before = viewportLeft.current
+    viewportLeft.current = left
+    if (before !== undefined && before !== left) panBy(before - left, 0)
+  }, [isHidden, leftWidth])
+
   const handleWheelTurn = (turn: WheelTurn) => {
     if (turn.isZoom) {
       const rect = viewportRef.current?.getBoundingClientRect()
@@ -656,6 +678,15 @@ export function Surface({ viewportRef }: SurfaceProps): JSX.Element {
         return
       case 'pan-release':
         spacePan.value = undefined
+        return
+      case 'undo':
+        void undo()
+        return
+      case 'redo':
+        void redo()
+        return
+      case 'panels-toggle':
+        togglePanels()
     }
   }
 
@@ -762,6 +793,11 @@ export function Surface({ viewportRef }: SurfaceProps): JSX.Element {
       </div>
       <ToolStrip />
       <Toolbar viewportRef={viewportRef} />
+      {historyNotice.value ? (
+        <p class="history-notice" role="status">
+          {historyNotice.value}
+        </p>
+      ) : null}
     </main>
   )
 }

package/src/canvas/client/tools.tsx

@@ -1,6 +1,15 @@
 /** @jsxImportSource preact */
 import type { JSX } from 'preact'
-import { activeTool, shownTool, type Tool } from '@/canvas/client/state'
+import {
+  activeTool,
+  history,
+  panelsHidden,
+  redo,
+  shownTool,
+  type Tool,
+  togglePanels,
+  undo,
+} from '@/canvas/client/state'
 
 interface ToolButton {
   readonly tool: Tool
@@ -32,9 +41,51 @@ const TOOLS: readonly ToolButton[] = [
   },
 ]
 
-/** The tool strip floating at the surface's left edge, one button a tool. */
+interface HistoryButton {
+  readonly name: 'Undo' | 'Redo'
+  readonly shortcut: string
+  readonly keys: string
+  readonly run: () => Promise<void>
+  readonly icon: JSX.Element
+}
+
+/** The modifier the platform names for undo, Cmd on macOS and Ctrl elsewhere. */
+const MOD = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '')
+  ? 'Cmd'
+  : 'Ctrl'
+
+const HISTORY_BUTTONS: readonly HistoryButton[] = [
+  {
+    name: 'Undo',
+    shortcut: `${MOD}+Z`,
+    keys: 'Control+Z Meta+Z',
+    run: () => undo(),
+    icon: (
+      <svg viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M5.5 3.5L2.5 6.5l3 3M2.5 6.5h7a4 4 0 0 1 0 8H7" />
+      </svg>
+    ),
+  },
+  {
+    name: 'Redo',
+    shortcut: `${MOD}+Shift+Z`,
+    keys: 'Control+Shift+Z Meta+Shift+Z Control+Y',
+    run: () => redo(),
+    icon: (
+      <svg viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M10.5 3.5l3 3-3 3M13.5 6.5h-7a4 4 0 0 0 0 8H9" />
+      </svg>
+    ),
+  },
+]
+
+/**
+ * The tool strip floating at the surface's left edge, one button a tool, then
+ * undo and redo, each disabled while the server holds nothing to step.
+ */
 export function ToolStrip(): JSX.Element {
   const shown = shownTool.value
+  const { canUndo, canRedo } = history.value
   return (
     <div
       class="tools"
@@ -59,6 +110,44 @@ export function ToolStrip(): JSX.Element {
           {icon}
         </button>
       ))}
+      <span class="tools-divider" aria-hidden="true" />
+      {HISTORY_BUTTONS.map(({ name, shortcut, keys, run, icon }) => (
+        <button
+          key={name}
+          type="button"
+          class="tool-button"
+          aria-label={`${name} (${shortcut})`}
+          aria-keyshortcuts={keys}
+          title={`${name} (${shortcut})`}
+          disabled={name === 'Undo' ? !canUndo : !canRedo}
+          onClick={() => void run()}
+        >
+          {icon}
+        </button>
+      ))}
+      <span class="tools-divider" aria-hidden="true" />
+      <PanelsButton />
     </div>
   )
 }
+
+/** Named by what a press does now, so the panels come back by mouse too. */
+function PanelsButton(): JSX.Element {
+  const name = panelsHidden.value ? 'Show panels' : 'Hide panels'
+  return (
+    <button
+      type="button"
+      class="tool-button"
+      aria-label={`${name} (\\)`}
+      aria-keyshortcuts="\\"
+      title={`${name} (\\)`}
+      data-panels={panelsHidden.value ? 'hidden' : 'shown'}
+      onClick={togglePanels}
+    >
+      <svg viewBox="0 0 16 16" aria-hidden="true">
+        <rect x="2" y="3" width="12" height="10" rx="1.5" />
+        {panelsHidden.value ? null : <path d="M5.5 3v10M10.5 3v10" />}
+      </svg>
+    </button>
+  )
+}

package/src/canvas/content.ts

@@ -419,6 +419,12 @@ export interface Position {
   readonly y: number
 }
 
+/**
+ * Hears the box a write replaced, undefined when the layout held none, and the
+ * box it wrote, apart from the returned record, which the CLI prints.
+ */
+export type BoxObserver = (replaced: Box | undefined, written: Box) => void
+
 /**
  * Moves one frame and keeps its size. A frame the layout never named takes the
  * default size it was already drawn at, so the move does not resize it.
@@ -428,6 +434,7 @@ export function moveFrame(
   page: string,
   frame: string,
   to: Position,
+  observe?: BoxObserver,
 ): FrameOutcome {
   if (!isValidName(page)) {
     return refuse('invalid-name', `${page} is not a valid page name`)
@@ -460,6 +467,7 @@ export function moveFrame(
     }
 
     writeLayout(dir, new Map([...boxes, [frame, box]]))
+    observe?.(boxes.get(frame), box)
     return { ok: true, page, frame, file, box }
   })
 }
@@ -474,6 +482,7 @@ export function resizeFrame(
   page: string,
   frame: string,
   box: Box,
+  observe?: BoxObserver,
 ): FrameOutcome {
   if (!isValidName(page)) {
     return refuse('invalid-name', `${page} is not a valid page name`)
@@ -509,10 +518,66 @@ export function resizeFrame(
     }
 
     writeLayout(dir, new Map([...boxes, [frame, written]]))
+    observe?.(boxes.get(frame), written)
     return { ok: true, page, frame, file, box: written }
   })
 }
 
+function isSameBox(a: Box | undefined, b: Box | undefined): boolean {
+  if (a === undefined || b === undefined) return a === b
+  return (
+    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+  )
+}
+
+export type BoxRestore =
+  | { readonly ok: true }
+  | ContentRefused
+  | {
+      readonly ok: false
+      readonly reason: 'changed'
+      readonly detail: string
+    }
+
+/**
+ * Writes a recorded box back under the layout lock, only while the layout
+ * still holds the box the record expects, where undefined expects none.
+ * Restoring to no box drops the frame's entry, so the reader places it in the
+ * default row again.
+ */
+export function restoreBox(
+  root: string,
+  page: string,
+  frame: string,
+  expected: Box | undefined,
+  to: Box | undefined,
+): BoxRestore {
+  const dir = pagePath(root, page)
+  if (!isDirectory(dir)) return refuse('no-page', `page ${page} does not exist`)
+  if (!existsSync(join(dir, `${frame}${FRAME_EXTENSION}`))) {
+    return refuse('no-frame', `frame ${frame} does not exist on ${page}`)
+  }
+
+  return withFileLock(join(dir, LAYOUT_FILE), (): BoxRestore => {
+    const { boxes, malformed } = readLayout(dir)
+    if (malformed) {
+      return refuse('malformed-layout', `${page}/${LAYOUT_FILE} does not parse`)
+    }
+    if (!isSameBox(boxes.get(frame), expected)) {
+      return {
+        ok: false,
+        reason: 'changed',
+        detail: `${page}/${frame} moved since this change, so nothing was written`,
+      }
+    }
+    const next = new Map(boxes)
+    if (to === undefined) next.delete(frame)
+    else next.set(frame, to)
+    writeLayout(dir, next)
+    return { ok: true }
+  })
+}
+
 export interface Selection {
   readonly page: string
   readonly frame: string