@erclx/canon 5.26.0 → 5.27.0

package/src/canvas/client/shell.css

@@ -237,14 +237,32 @@ code {
   right: 0;
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
-  padding-bottom: var(--space-sm);
-  font-size: 1.5rem;
+  /*
+   * Sized against the zoom, so the label reads at one screen size at any zoom.
+   * A row too short for all three parts wraps the theme switch and then the
+   * size onto lines the clip hides, so the name keeps the row longest.
+   */
+  flex-wrap: wrap;
+  align-content: flex-start;
+  column-gap: calc(6px * var(--outline-scale, 1));
+  row-gap: calc(40px * var(--outline-scale, 1));
+  height: calc(25px * var(--outline-scale, 1));
+  overflow: clip;
+  overflow-clip-margin: calc(4px * var(--outline-scale, 1));
+  padding-bottom: calc(6px * var(--outline-scale, 1));
+  font-size: calc(11px * var(--outline-scale, 1));
+  line-height: 1.3;
   color: var(--color-text-secondary);
   white-space: nowrap;
 }
 
+/* A theme switch focused on a hidden line shows rather than staying hidden. */
+.frame-label:focus-within {
+  overflow: visible;
+}
+
 .frame-name {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--color-text);
@@ -257,8 +275,9 @@ code {
 
 .frame-theme {
   margin-left: auto;
-  padding: 2px var(--space-sm);
-  border: 1px solid var(--color-border);
+  padding: calc(1px * var(--outline-scale, 1))
+    calc(6px * var(--outline-scale, 1));
+  border: calc(1px * var(--outline-scale, 1)) solid var(--color-border);
   border-radius: var(--radius-pill);
   background: var(--color-surface);
   color: var(--color-text-secondary);
@@ -301,18 +320,91 @@ code {
   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;
+/* A selected frame names itself in the accent, and a picked element does not. */
+.frame[data-selected='true']:not([data-picked]) .frame-name {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+/*
+ * The selected frame's or element's outline, handles, and size chip. Every
+ * length multiplies by the outline scale, so each holds one screen size.
+ */
+.selection {
+  --handle: calc(8px * var(--outline-scale, 1));
+  --handle-hit: calc(24px * var(--outline-scale, 1));
+  position: absolute;
+  pointer-events: none;
+  outline: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
+}
+
+/* Inset by the iframe border, so the box lines up with the element it marks. */
+.selection[data-selection='element'] {
+  translate: 1px 1px;
+}
+
+/* A 24 pixel hit area around an 8 pixel square, per the target size minimum. */
+.selection-handle {
+  position: absolute;
+  width: var(--handle-hit);
+  height: var(--handle-hit);
+  margin: calc(var(--handle-hit) / -2);
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.selection-handle::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--handle-hit) - var(--handle)) / 2);
+  border: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
+  background: var(--color-background);
+}
+
+.selection-handle[data-handle='nw'] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.selection-handle[data-handle='ne'] {
+  top: 0;
+  left: 100%;
+  cursor: nesw-resize;
+}
+
+.selection-handle[data-handle='sw'] {
+  top: 100%;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.selection-handle[data-handle='se'] {
+  top: 100%;
+  left: 100%;
+  cursor: nwse-resize;
+}
+
+.selection-chip {
+  position: absolute;
+  top: calc(100% + 8px * var(--outline-scale, 1));
+  left: 50%;
+  translate: -50% 0;
+  padding: calc(2px * var(--outline-scale, 1))
+    calc(5px * var(--outline-scale, 1));
+  border-radius: calc(3px * var(--outline-scale, 1));
+  background: var(--color-accent);
+  color: var(--color-background);
+  font-family: var(--type-code-family);
+  font-size: calc(11px * var(--outline-scale, 1));
+  line-height: 1.3;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .frame:focus-visible {

package/src/canvas/client/state.ts

@@ -1,6 +1,6 @@
 import { computed, signal } from '@preact/signals'
 import type { ElementAddress } from '@/canvas/address'
-import type { Frame, Page } from '@/canvas/content'
+import type { Box, Frame, Page } from '@/canvas/content'
 import type { TokenGroup } from '@/canvas/tokens'
 
 /**
@@ -320,7 +320,8 @@ const EDIT_NOTICES: Readonly<Record<string, string | undefined>> = {
 /**
  * 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.
+ * that moved under it. Resolves to what the write answered, or undefined when
+ * nothing was written.
  */
 export async function editElement(
   ref: FrameRef,
@@ -329,7 +330,7 @@ export async function editElement(
   property: string,
   value: string,
   fetchImpl: typeof fetch = fetch,
-): Promise<void> {
+): Promise<{ readonly hash?: string } | undefined> {
   const hash = editedHashes.value.get(key) ?? address.hash
   pendingEdit.value = { key, index: address.index, property }
   try {
@@ -358,7 +359,7 @@ export async function editElement(
           : `Could not save (status ${response.status}). Check canon canvas serve is still running.`)
       reloadFrame(key)
       await loadPages(fetchImpl)
-      return
+      return undefined
     }
     editRefusal.value = undefined
     const saved = pendingEdit.value
@@ -366,18 +367,51 @@ export async function editElement(
     setTimeout(() => {
       if (savedEdit.value === saved) savedEdit.value = undefined
     }, SAVED_MS)
-    if (typeof record.hash === 'string') {
-      const hashes = new Map(editedHashes.value)
-      hashes.set(key, record.hash)
-      editedHashes.value = hashes
-    }
+    if (typeof record.hash !== 'string') return {}
+    const hashes = new Map(editedHashes.value)
+    hashes.set(key, record.hash)
+    editedHashes.value = hashes
+    return { hash: record.hash }
   } catch (error) {
     editRefusal.value = `Could not save (${error instanceof Error ? error.message : 'unknown'}). Check canon canvas serve is still running.`
+    return undefined
   } finally {
     pendingEdit.value = undefined
   }
 }
 
+/**
+ * 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.
+ */
+export async function resizeElement(
+  ref: FrameRef,
+  key: string,
+  address: ElementAddress,
+  width: number | undefined,
+  height: number | undefined,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  let current = address
+  if (width !== undefined) {
+    const written = await editElement(
+      ref,
+      key,
+      current,
+      'width',
+      `${width}px`,
+      fetchImpl,
+    )
+    if (!written) return
+    if (written.hash) current = { ...current, hash: written.hash }
+  }
+  if (height !== undefined) {
+    await editElement(ref, key, current, 'height', `${height}px`, 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.
@@ -406,6 +440,32 @@ export async function moveFrameTo(
   await write('/api/frames/move', { ...ref, x, y }, fetchImpl)
 }
 
+/** Resizes a frame on the surface without writing, as a handle drag does. */
+export function previewResize(ref: FrameRef, box: Box): void {
+  pages.value = pages.value.map((candidate) =>
+    candidate.name === ref.page
+      ? {
+          ...candidate,
+          frames: candidate.frames.map((frame) =>
+            frame.name === ref.frame
+              ? { ...frame, ...box, placed: true }
+              : frame,
+          ),
+        }
+      : candidate,
+  )
+}
+
+/** Shows the new box and writes it through the server's shared layout writer. */
+export async function resizeFrameTo(
+  ref: FrameRef,
+  box: Box,
+  fetchImpl: typeof fetch = fetch,
+): Promise<void> {
+  previewResize(ref, box)
+  await write('/api/frames/resize', { ...ref, ...box }, fetchImpl)
+}
+
 export function clampZoom(zoom: number): number {
   return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom))
 }

package/src/canvas/client/surface.tsx

@@ -16,7 +16,10 @@ import {
   moveFrameTo,
   panBy,
   previewMove,
+  previewResize,
   registerFrameDocument,
+  resizeElement,
+  resizeFrameTo,
   selectElement,
   selectFrame,
   selection,
@@ -25,13 +28,16 @@ import {
   view,
   zoomAt,
 } from '@/canvas/client/state'
+import {
+  DRAG_THRESHOLD,
+  HoverOutline,
+  type OverlayBox,
+  SelectionOverlay,
+} from '@/canvas/client/selection'
 
 /** One wheel notch or one button press. */
 const ZOOM_STEP = 1.2
 
-/** Screen pixels a press travels before it reads as a drag and not a click. */
-const DRAG_THRESHOLD = 3
-
 /** Surface units one arrow press moves a frame, and one with Shift held. */
 const NUDGE = 10
 const NUDGE_LARGE = 50
@@ -76,25 +82,111 @@ function asElement(target: EventTarget | null): Element | undefined {
   return node?.nodeType === 1 ? (node as Element) : undefined
 }
 
-function ElementOutline({
-  element,
-  kind,
+/** A computed length in pixels, or the fallback for one that is not. */
+function pixels(value: string, fallback: number): number {
+  const parsed = Number.parseFloat(value)
+  return value.endsWith('px') && Number.isFinite(parsed) ? parsed : fallback
+}
+
+/**
+ * The selected element's overlay. A handle drag previews the size as inline
+ * style on the element and writes it once on release, the way the inspector's
+ * scrub does. The drag measures the border box while `width` and `height` set
+ * whatever box the element sizes by, so the delta is added to the computed
+ * value rather than written as the box itself.
+ */
+function ElementSelection({
+  node,
+  doc,
+  frameRef,
+  docKey,
 }: {
-  readonly element: Element
-  readonly kind: 'hover' | 'selected'
+  readonly node: Element
+  readonly doc: Document
+  readonly frameRef: FrameRef
+  readonly docKey: string
 }): JSX.Element {
-  const rect = element.getBoundingClientRect()
+  const start = useRef<
+    | {
+        readonly width: number
+        readonly height: number
+        readonly inlineWidth: string
+        readonly inlineHeight: string
+      }
+    | undefined
+  >(undefined)
+  const style = (node as HTMLElement).style
+
+  const measure = () => {
+    const rect = node.getBoundingClientRect()
+    return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+  }
+
+  const cssSize = (box: OverlayBox, origin: OverlayBox) => {
+    const from = start.current
+    return {
+      width: Math.round(
+        (from?.width ?? origin.width) + box.width - origin.width,
+      ),
+      height: Math.round(
+        (from?.height ?? origin.height) + box.height - origin.height,
+      ),
+    }
+  }
+
+  const handleStart = () => {
+    const computed = doc.defaultView?.getComputedStyle(node)
+    const rect = node.getBoundingClientRect()
+    start.current = {
+      width: pixels(computed?.width ?? '', rect.width),
+      height: pixels(computed?.height ?? '', rect.height),
+      inlineWidth: style.getPropertyValue('width'),
+      inlineHeight: style.getPropertyValue('height'),
+    }
+  }
+
+  const handlePreview = (box: OverlayBox, from: OverlayBox) => {
+    const size = cssSize(box, from)
+    style.setProperty('width', `${size.width}px`)
+    style.setProperty('height', `${size.height}px`)
+  }
+
+  const restore = () => {
+    const from = start.current
+    if (!from) return
+    style.setProperty('width', from.inlineWidth)
+    style.setProperty('height', from.inlineHeight)
+  }
+
+  const handleCommit = (box: OverlayBox, from: OverlayBox) => {
+    const size = cssSize(box, from)
+    const address = addressOf(doc, node)
+    const isUnchanged = box.width === from.width && box.height === from.height
+    if (!address || isUnchanged) {
+      restore()
+      return
+    }
+    void resizeElement(
+      frameRef,
+      docKey,
+      address,
+      box.width === from.width ? undefined : size.width,
+      box.height === from.height ? undefined : size.height,
+    )
+  }
+
+  const handleCancel = restore
+
   return (
-    <div
-      class="element-outline"
-      data-outline={kind}
-      aria-hidden="true"
-      style={{
-        left: `${rect.left}px`,
-        top: `${rect.top}px`,
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
-      }}
+    <SelectionOverlay
+      kind="element"
+      measure={measure}
+      hasChip
+      isMeasuredWhileDragging
+      onStart={handleStart}
+      onPreview={handlePreview}
+      onCommit={handleCommit}
+      onCancel={handleCancel}
     />
   )
 }
@@ -263,15 +355,33 @@ function FrameView({
     const delta = ARROWS[event.key]
     if (!delta || !isSelected) return
     event.preventDefault()
+    /* The keyboard path for a handle drag: right and down grow the frame. */
+    if (event.ctrlKey || event.metaKey) {
+      void resizeFrameTo(ref, {
+        x: frame.x,
+        y: frame.y,
+        width: Math.max(1, frame.width + delta.x * step),
+        height: Math.max(1, frame.height + delta.y * step),
+      })
+      return
+    }
     void moveFrameTo(ref, frame.x + delta.x * step, frame.y + delta.y * step)
   }
 
+  const frameBox = (): OverlayBox => ({
+    x: frame.x,
+    y: frame.y,
+    width: frame.width,
+    height: frame.height,
+  })
+
   const next = value === 'dark' ? 'light' : 'dark'
   return (
     <figure
       class="frame"
       data-frame={frame.name}
       data-selected={isSelected ? 'true' : undefined}
+      data-picked={picked ? 'true' : undefined}
       data-dragging={draggingFrame.value === frame.name ? 'true' : undefined}
       tabIndex={0}
       aria-label={`${frame.name}, ${frame.width} by ${frame.height}`}
@@ -318,10 +428,25 @@ function FrameView({
           onLoad={handleLoad}
         />
         {hoveredNode && hoveredNode !== selectedNode ? (
-          <ElementOutline element={hoveredNode} kind="hover" />
+          <HoverOutline element={hoveredNode} />
+        ) : null}
+        {isSelected && !picked ? (
+          <SelectionOverlay
+            kind="frame"
+            measure={frameBox}
+            offset={{ x: frame.x, y: frame.y }}
+            onPreview={(box) => previewResize(ref, box)}
+            onCommit={(box) => void resizeFrameTo(ref, box)}
+            onCancel={(origin) => previewResize(ref, origin)}
+          />
         ) : null}
-        {selectedNode ? (
-          <ElementOutline element={selectedNode} kind="selected" />
+        {doc && selectedNode ? (
+          <ElementSelection
+            node={selectedNode}
+            doc={doc}
+            frameRef={ref}
+            docKey={key}
+          />
         ) : null}
       </div>
     </figure>

package/src/canvas/content.ts

@@ -129,7 +129,7 @@ function refuse(reason: ContentRefusal, detail: string): ContentRefused {
   return { ok: false, reason, detail }
 }
 
-function isValidName(name: string): boolean {
+export function isValidName(name: string): boolean {
   return NAME_PATTERN.test(name) && !name.includes('..')
 }
 
@@ -464,6 +464,55 @@ export function moveFrame(
   })
 }
 
+/**
+ * Writes one frame's whole box. A handle on the top or left edge moves the
+ * frame as it resizes it, so position and size land in one locked write rather
+ * than a move and a resize another writer could land between.
+ */
+export function resizeFrame(
+  root: string,
+  page: string,
+  frame: string,
+  box: Box,
+): FrameOutcome {
+  if (!isValidName(page)) {
+    return refuse('invalid-name', `${page} is not a valid page name`)
+  }
+  if (!isValidName(frame)) {
+    return refuse('invalid-name', `${frame} is not a valid frame name`)
+  }
+  if (!Number.isFinite(box.x) || !Number.isFinite(box.y)) {
+    return refuse('invalid-position', 'x and y must be numbers')
+  }
+  const isPositive = (value: number) => Number.isFinite(value) && value > 0
+  if (!isPositive(box.width) || !isPositive(box.height)) {
+    return refuse('invalid-size', 'width and height must be positive numbers')
+  }
+
+  const dir = pagePath(root, page)
+  if (!isDirectory(dir)) return refuse('no-page', `page ${page} does not exist`)
+  const file = `${frame}${FRAME_EXTENSION}`
+  if (!existsSync(join(dir, file))) {
+    return refuse('no-frame', `frame ${frame} does not exist on ${page}`)
+  }
+
+  return withLayoutLock(dir, () => {
+    const { boxes, malformed } = readLayout(dir)
+    if (malformed) {
+      return refuse('malformed-layout', `${page}/${LAYOUT_FILE} does not parse`)
+    }
+    const written: Box = {
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+    }
+
+    writeLayout(dir, new Map([...boxes, [frame, written]]))
+    return { ok: true, page, frame, file, box: written }
+  })
+}
+
 export interface Selection {
   readonly page: string
   readonly frame: string

package/src/canvas/edit.ts

@@ -31,11 +31,38 @@ export const STYLE_PROPERTIES = [
   'height',
   'padding',
   'gap',
+  'display',
   'flex-direction',
+  'justify-content',
+  'align-items',
+  'flex-wrap',
+  'opacity',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-right-radius',
+  'border-bottom-left-radius',
 ] as const
 
 export type StyleProperty = (typeof STYLE_PROPERTIES)[number]
 
+/**
+ * The longhands a shorthand write drops, so a later longhand in the attribute
+ * does not keep overriding the value just set. A longhand write leaves its
+ * shorthand alone, since the longhand comes later and already wins.
+ */
+const SHORTHAND_LONGHANDS: Readonly<
+  Partial<Record<StyleProperty, readonly string[]>>
+> = {
+  'border-radius': [
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-right-radius',
+    'border-bottom-left-radius',
+  ],
+  padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
+}
+
 export type EditProperty = StyleProperty | 'text'
 
 export interface EditChange {
@@ -139,15 +166,18 @@ function propertyOf(segment: string): string {
 /**
  * Sets one property in a style attribute, or drops it on an empty value. The
  * first declaration of it is replaced in place and any later one dropped, so
- * nothing further in the attribute overrides the edit. Undefined means no
- * style is left.
+ * nothing further in the attribute overrides the edit. A shorthand also drops
+ * its longhands. Undefined means no style is left.
  */
 export function setDeclaration(
   style: string,
   property: StyleProperty,
   value: string,
 ): string | undefined {
-  const segments = declarations(style)
+  const longhands = SHORTHAND_LONGHANDS[property] ?? []
+  const segments = declarations(style).filter(
+    (segment) => !longhands.includes(propertyOf(segment)),
+  )
   const matches = segments.filter((segment) => propertyOf(segment) === property)
   const declaration = `${property}: ${value.trim()}`
 
@@ -164,7 +194,10 @@ export function setDeclaration(
       return [`${lead}${declaration}`]
     })
   } else {
-    const kept = style.replace(/[\s;]*$/, '')
+    const kept = segments
+      .join(';')
+      .replace(/^[\s;]+/, '')
+      .replace(/[\s;]*$/, '')
     return kept === '' ? declaration : `${kept}; ${declaration}`
   }