@1agh/maude 1.4.6 → 1.5.1

package/apps/studio/annotations/constants.ts

@@ -0,0 +1,58 @@
+/**
+ * @file       annotations/constants.ts — defaults of the annotations-v2 model
+ * @scope      apps/studio/annotations/constants.ts
+ * @purpose    Values baked into the canonical form (a field equal to its default
+ *             is omitted on disk, so these MUST NOT change once shipped — changing
+ *             one silently restyles every element that relied on it). They match
+ *             the v1 model (`annotations-model.ts`) value for value so migrated
+ *             boards look identical.
+ */
+
+export const DEFAULT_INK = '#1f1f1f';
+export const DEFAULT_STICKY_FILL = '#fce8a6';
+export const DEFAULT_SECTION_COLOR = '#8b8b94';
+export const DEFAULT_FONT_SIZE = 14;
+export const DEFAULT_STROKE_WIDTH = 2;
+export const STICKY_RADIUS = 8;
+export const STICKY_MIN_SIZE = 40;
+export const STICKY_MAX_GROWN_H = 8000;
+export const SHAPE_MIN_SIZE = 4;
+export const SECTION_MIN_SIZE = 64;
+export const SECTION_LABEL_FONT = 12;
+export const SECTION_LABEL_H = 20;
+export const IMAGE_MIN_SIZE = 16;
+export const TEXT_LINE_HEIGHT = 1.25;
+
+/** Hard caps (untrusted input, DDR-054 §2d). */
+export const MAX_PEN_POINTS = 20_000;
+export const MAX_TEXT_CHARS = 20_000;
+export const MAX_GROUPS_PER_ELEMENT = 16;
+export const MAX_NESTING_DEPTH = 8;
+export const MAX_ELEMENTS = 20_000;
+/** Serialized bytes of one element record. */
+export const MAX_ELEMENT_BYTES = 256 * 1024;
+/** Serialized bytes of a whole board file. */
+export const MAX_BOARD_BYTES = 4 * 1024 * 1024;
+/** A legacy v1 `.annotations.svg` (v1 capped boards at 1 MB) — larger input is refused unparsed. */
+export const MAX_LEGACY_SVG_BYTES = 2 * 1024 * 1024;
+
+/** Arrow head vocabulary — mirrors `canvas-arrowheads.ts` ARROW_HEADS. */
+export const ARROW_HEADS = [
+  'none',
+  'line',
+  'triangle',
+  'triangle-outline',
+  'circle',
+  'diamond',
+] as const;
+export const ARROW_LINES = ['straight', 'curved', 'elbow'] as const;
+export const SHAPE_KINDS = ['rect', 'ellipse', 'diamond', 'triangle', 'triangle-down'] as const;
+export type ShapeKind = (typeof SHAPE_KINDS)[number];
+
+/** Relative `assets/<name>.<ext>` raster path — the only href an image keeps (DDR-054, Phase 23). */
+export const ASSET_IMAGE_HREF_RE = /^assets\/[A-Za-z0-9._-]+\.(?:png|jpe?g|webp|gif)$/;
+/** Relative `assets/<name>.<ext>` video/audio path — the only src a media chip keeps (DDR-150 P4). */
+export const ASSET_MEDIA_SRC_RE =
+  /^assets\/[A-Za-z0-9._-]+\.(?:mp4|webm|mov|m4v|mp3|wav|m4a|aac|ogg)$/;
+/** Link cards open http(s) only. */
+export const LINK_URL_RE = /^https?:\/\/[^\s]+$/i;

package/apps/studio/annotations/elements/_shared.ts

@@ -0,0 +1,125 @@
+/**
+ * @file       annotations/elements/_shared.ts — helpers shared by element definitions
+ * @scope      apps/studio/annotations/elements/_shared.ts
+ * @purpose    Box fields, text-style fields and the rotation-aware box
+ *             hit-test most element types reuse. A new element type composes
+ *             these; it never re-implements them.
+ */
+
+import { bool, type FieldSpecMap, fieldValue, num, oneOf } from '../fields.ts';
+import type { AnnotationElement, Box } from '../types.ts';
+
+export const ALIGNS = ['left', 'center', 'right'] as const;
+export const LISTS = ['bullet', 'number'] as const;
+
+/** Geometry of every box-shaped element. `w`/`h` are always normalized (≥ 0). */
+export const BOX_FIELDS: FieldSpecMap = {
+  x: num({ required: true }),
+  y: num({ required: true }),
+  w: num({ min: 0, required: true }),
+  h: num({ min: 0, required: true }),
+};
+
+export const ROT_FIELD: FieldSpecMap = { rot: num({ min: -180, max: 180, dp: 1, def: 0 }) };
+
+/** Whole-element text formatting (DDR-091: list markers are render-only). */
+export function textStyleFields(defAlign: (typeof ALIGNS)[number]): FieldSpecMap {
+  return {
+    bold: bool(),
+    italic: bool(),
+    strike: bool(),
+    underline: bool(),
+    list: oneOf(LISTS),
+    align: oneOf(ALIGNS, defAlign),
+  };
+}
+
+export function n(el: AnnotationElement, key: string): number {
+  const v = el[key];
+  return typeof v === 'number' ? v : 0;
+}
+
+export function boxOf(el: AnnotationElement): Box {
+  return { x: n(el, 'x'), y: n(el, 'y'), w: n(el, 'w'), h: n(el, 'h') };
+}
+
+export function rotOf(el: AnnotationElement): number {
+  return n(el, 'rot');
+}
+
+/** Rotate (px, py) around (cx, cy) by `deg` clockwise. */
+export function rotatePoint(
+  px: number,
+  py: number,
+  cx: number,
+  cy: number,
+  deg: number
+): [number, number] {
+  if (deg === 0) return [px, py];
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const dx = px - cx;
+  const dy = py - cy;
+  return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+}
+
+/** Inverse-rotate a probe into the element's local (unrotated) frame. */
+export function toLocal(el: AnnotationElement, box: Box, px: number, py: number): [number, number] {
+  const rot = rotOf(el);
+  if (rot === 0) return [px, py];
+  return rotatePoint(px, py, box.x + box.w / 2, box.y + box.h / 2, -rot);
+}
+
+export function inBox(b: Box, px: number, py: number, tol: number): boolean {
+  return px >= b.x - tol && px <= b.x + b.w + tol && py >= b.y - tol && py <= b.y + b.h + tol;
+}
+
+export function pointSegmentDist(
+  px: number,
+  py: number,
+  ax: number,
+  ay: number,
+  bx: number,
+  by: number
+): number {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const len2 = dx * dx + dy * dy;
+  if (len2 === 0) return Math.hypot(px - ax, py - ay);
+  const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2));
+  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
+
+/** Minimum grab tolerance of solid cards (v1 parity: cards have no stroke width, so 2). */
+export const CARD_MIN_TOL = 2;
+
+/** Solid card: the whole (rotated) box is hittable, with at least `minTol` slack. */
+export function solidBoxHit(
+  el: AnnotationElement,
+  px: number,
+  py: number,
+  tol: number,
+  minTol = CARD_MIN_TOL
+): boolean {
+  const b = boxOf(el);
+  const [lx, ly] = toLocal(el, b, px, py);
+  return inBox(b, lx, ly, Math.max(tol, minTol));
+}
+
+export function translateBox(
+  el: AnnotationElement,
+  dx: number,
+  dy: number
+): Record<string, unknown> {
+  return { x: n(el, 'x') + dx, y: n(el, 'y') + dy };
+}
+
+export function resizeBox(_el: AnnotationElement, box: Box): Record<string, unknown> {
+  return { x: box.x, y: box.y, w: box.w, h: box.h };
+}
+
+/** Read a field with its spec default applied. */
+export function get<T>(spec: FieldSpecMap, el: AnnotationElement, key: string): T {
+  return fieldValue(spec, el, key) as T;
+}

package/apps/studio/annotations/elements/arrow.model.ts

@@ -0,0 +1,196 @@
+/**
+ * Arrow / connector (DDR-242). Stores its two ENDS only — never its computed
+ * endpoints. An end is either free (`{x, y}`, parent space) or bound to an
+ * element: `{el}` = auto (re-faces the other end as things move, FigJam
+ * connector behaviour), `{el, nx, ny}` = pinned to a magnet on the host's box.
+ * Moving a host therefore writes only the host; every reader derives the
+ * endpoints through `arrowEnds`.
+ */
+
+import { ARROW_HEADS, ARROW_LINES, DEFAULT_INK } from '../constants.ts';
+import { bool, color, type FieldSpec, id, num, oneOf, round } from '../fields.ts';
+import type { AnnotationElement, ArrowEnd, Box, ElementDef, GeomCtx } from '../types.ts';
+import { get, pointSegmentDist, rotatePoint } from './_shared.ts';
+
+const MAGNETS = [0, 0.5, 1] as const;
+
+/** Snap a normalized coordinate to the nearest {0, ½, 1} magnet. */
+export function snapMagnet(v: number): number {
+  let best: number = MAGNETS[0];
+  for (const m of MAGNETS) if (Math.abs(v - m) < Math.abs(v - best)) best = m;
+  return best;
+}
+
+const elId = id(true);
+const coord = num({ required: true });
+const unit = num({ min: 0, max: 1, dp: 3 });
+
+/** An arrow end: `{el}` | `{el, nx, ny}` | `{x, y}`. Half-specified magnets collapse to auto. */
+export function arrowEnd(): FieldSpec<ArrowEnd> {
+  return {
+    required: true,
+    eq: (a, b) => JSON.stringify(a) === JSON.stringify(b),
+    parse(raw) {
+      if (raw === null || typeof raw !== 'object' || Array.isArray(raw)) return undefined;
+      const r = raw as Record<string, unknown>;
+      if (r.el !== undefined) {
+        const el = elId.parse(r.el);
+        if (el === undefined) return undefined;
+        const nx = unit.parse(r.nx);
+        const ny = unit.parse(r.ny);
+        return nx !== undefined && ny !== undefined ? { el, nx, ny } : { el };
+      }
+      const x = coord.parse(r.x);
+      const y = coord.parse(r.y);
+      return x !== undefined && y !== undefined ? { x, y } : undefined;
+    },
+  };
+}
+
+const FIELDS = {
+  start: arrowEnd(),
+  end: arrowEnd(),
+  color: color(DEFAULT_INK),
+  width: num({ min: 0.5, max: 64, dp: 1, def: 2 }),
+  startHead: oneOf(ARROW_HEADS, 'none'),
+  endHead: oneOf(ARROW_HEADS, 'triangle'),
+  dashed: bool(),
+  line: oneOf(ARROW_LINES, 'straight'),
+};
+
+export interface ResolvedArrow {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  /** The magnet each bound end actually attaches to (auto ends: the facing side). */
+  startAnchor?: { el: string; nx: number; ny: number };
+  endAnchor?: { el: string; nx: number; ny: number };
+}
+
+/** Side magnet of `box` facing the world point (tx, ty) — FigJam auto-routing. */
+export function facingAnchor(box: Box, tx: number, ty: number): { nx: number; ny: number } {
+  const dx = tx - (box.x + box.w / 2);
+  const dy = ty - (box.y + box.h / 2);
+  const rx = Math.abs(dx) / Math.max(1, box.w / 2);
+  const ry = Math.abs(dy) / Math.max(1, box.h / 2);
+  return rx >= ry ? { nx: dx >= 0 ? 1 : 0, ny: 0.5 } : { nx: 0.5, ny: dy >= 0 ? 1 : 0 };
+}
+
+/** World point of a normalized anchor on a (possibly rotated) box. */
+export function anchorPoint(box: Box, rot: number, nx: number, ny: number): [number, number] {
+  return rotatePoint(
+    box.x + nx * box.w,
+    box.y + ny * box.h,
+    box.x + box.w / 2,
+    box.y + box.h / 2,
+    rot
+  );
+}
+
+/**
+ * Resolve both endpoints in PARENT space. A bound end whose host is missing or
+ * no longer bindable resolves to null (the op layer freezes such ends into free
+ * points at delete time — see ops.ts `unbindFrom`).
+ */
+export function arrowEnds(el: AnnotationElement, ctx: GeomCtx): ResolvedArrow | null {
+  const start = el.start as ArrowEnd | undefined;
+  const end = el.end as ArrowEnd | undefined;
+  if (!start || !end) return null;
+  const host = (e: ArrowEnd) => ('el' in e ? ctx.resolve(e.el) : null);
+  const sHost = host(start);
+  const eHost = host(end);
+  if (('el' in start && !sHost?.bindable) || ('el' in end && !eHost?.bindable)) return null;
+  const world = (e: ArrowEnd): [number, number] | null =>
+    'el' in e ? null : [e.x + ctx.origin.x, e.y + ctx.origin.y];
+  const center = (h: { box: Box } | null): [number, number] | null =>
+    h ? [h.box.x + h.box.w / 2, h.box.y + h.box.h / 2] : null;
+  // Auto ends face the OTHER end: its host's center, else its free point.
+  const startRef = center(eHost) ?? world(end) ?? [0, 0];
+  const endRef = center(sHost) ?? world(start) ?? [0, 0];
+  const out: Partial<ResolvedArrow> = {};
+  const place = (e: ArrowEnd, h: typeof sHost, ref: [number, number], which: 'start' | 'end') => {
+    let p: [number, number];
+    if ('el' in e && h) {
+      const mag =
+        e.nx !== undefined && e.ny !== undefined
+          ? { nx: e.nx, ny: e.ny }
+          : facingAnchor(h.box, ref[0], ref[1]);
+      p = anchorPoint(h.box, h.rot, mag.nx, mag.ny);
+      out[which === 'start' ? 'startAnchor' : 'endAnchor'] = { el: e.el, ...mag };
+    } else {
+      p = world(e) as [number, number];
+    }
+    const x = round(p[0] - ctx.origin.x, 2);
+    const y = round(p[1] - ctx.origin.y, 2);
+    if (which === 'start') {
+      out.x1 = x;
+      out.y1 = y;
+    } else {
+      out.x2 = x;
+      out.y2 = y;
+    }
+  };
+  place(start, sHost, startRef, 'start');
+  place(end, eHost, endRef, 'end');
+  return out as ResolvedArrow;
+}
+
+export const arrow: ElementDef = {
+  type: 'arrow',
+  fields: FIELDS,
+  caps: {
+    box: false,
+    rotatable: false,
+    resizable: true,
+    bindable: false,
+    container: false,
+    textSlot: null,
+  },
+  bounds(el, ctx) {
+    const r = arrowEnds(el, ctx);
+    if (!r) return null;
+    return {
+      x: Math.min(r.x1, r.x2),
+      y: Math.min(r.y1, r.y2),
+      w: Math.abs(r.x2 - r.x1),
+      h: Math.abs(r.y2 - r.y1),
+    };
+  },
+  hitTest(el, px, py, tol, ctx) {
+    const r = arrowEnds(el, ctx);
+    if (!r) return false;
+    const t = Math.max(tol, get<number>(FIELDS, el, 'width'));
+    return pointSegmentDist(px, py, r.x1, r.y1, r.x2, r.y2) <= t;
+  },
+  // Only FREE ends move; bound ends follow their hosts.
+  translate(el, dx, dy) {
+    const patch: Record<string, unknown> = {};
+    for (const k of ['start', 'end'] as const) {
+      const e = el[k] as ArrowEnd | undefined;
+      if (e && !('el' in e)) patch[k] = { x: e.x + dx, y: e.y + dy };
+    }
+    return patch;
+  },
+  resize(el, box, ctx) {
+    const r = arrowEnds(el, ctx);
+    const cur = arrow.bounds(el, ctx);
+    if (!r || !cur) return {};
+    const sx = cur.w > 0 ? box.w / cur.w : 1;
+    const sy = cur.h > 0 ? box.h / cur.h : 1;
+    const patch: Record<string, unknown> = {};
+    for (const k of ['start', 'end'] as const) {
+      const e = el[k] as ArrowEnd | undefined;
+      if (!e || 'el' in e) continue;
+      patch[k] = { x: box.x + (e.x - cur.x) * sx, y: box.y + (e.y - cur.y) * sy };
+    }
+    return patch;
+  },
+  meaningful(el) {
+    const s = el.start as ArrowEnd | undefined;
+    const e = el.end as ArrowEnd | undefined;
+    if (!s || !e) return false;
+    if ('el' in s || 'el' in e) return !('el' in s && 'el' in e && s.el === e.el);
+    return Math.hypot(e.x - s.x, e.y - s.y) >= 4;
+  },
+};

package/apps/studio/annotations/elements/media.model.ts

@@ -0,0 +1,79 @@
+/**
+ * The three media cards (DDR-242): `image` (a dropped raster), `link` (a URL
+ * preview chip — no server fetch, DDR-054/060) and `mediaref` (a pointer to an
+ * `assets/` video/audio clip, DDR-150 P4). All are solid rect cards whose only
+ * external references are validated relative `assets/` paths or http(s) URLs.
+ */
+
+import {
+  ASSET_IMAGE_HREF_RE,
+  ASSET_MEDIA_SRC_RE,
+  IMAGE_MIN_SIZE,
+  LINK_URL_RE,
+} from '../constants.ts';
+import { oneOf, str } from '../fields.ts';
+import type { ElementDef } from '../types.ts';
+import { BOX_FIELDS, boxOf, ROT_FIELD, resizeBox, solidBoxHit, translateBox } from './_shared.ts';
+
+const CARD_CAPS = {
+  box: true,
+  rotatable: true,
+  resizable: true,
+  bindable: false,
+  container: false,
+  textSlot: null,
+} as const;
+
+function card(
+  type: string,
+  fields: ElementDef['fields'],
+  meaningful: ElementDef['meaningful']
+): ElementDef {
+  return {
+    type,
+    fields: { ...BOX_FIELDS, ...ROT_FIELD, ...fields },
+    caps: CARD_CAPS,
+    bounds: (el) => boxOf(el),
+    hitTest: (el, px, py, tol) => solidBoxHit(el, px, py, tol),
+    translate: translateBox,
+    resize: resizeBox,
+    meaningful,
+  };
+}
+
+export const image: ElementDef = {
+  ...card(
+    'image',
+    {
+      // A stripped/invalid href degrades to '' — an inert frame that fetches nothing.
+      href: str({ max: 256, re: ASSET_IMAGE_HREF_RE, def: '', allowEmpty: true }),
+      alt: str({ max: 500, plain: true, def: '', allowEmpty: true }),
+    },
+    (el) => {
+      const b = boxOf(el);
+      return b.w >= IMAGE_MIN_SIZE && b.h >= IMAGE_MIN_SIZE;
+    }
+  ),
+  // Images take arrow binds (v1 parity: isBindable included image).
+  caps: { ...CARD_CAPS, bindable: true },
+};
+
+export const link: ElementDef = card(
+  'link',
+  {
+    url: str({ max: 2048, re: LINK_URL_RE, required: true }),
+    title: str({ max: 300, plain: true, def: '', allowEmpty: true }),
+    domain: str({ max: 253, plain: true, def: '', allowEmpty: true }),
+  },
+  (el) => typeof el.url === 'string' && el.url.length > 0
+);
+
+export const mediaref: ElementDef = card(
+  'mediaref',
+  {
+    src: str({ max: 256, re: ASSET_MEDIA_SRC_RE, def: '', allowEmpty: true }),
+    media: oneOf(['video', 'audio'] as const, 'video'),
+    title: str({ max: 300, plain: true, def: '', allowEmpty: true }),
+  },
+  (el) => typeof el.src === 'string' && el.src.length > 0
+);

package/apps/studio/annotations/elements/pen.model.ts

@@ -0,0 +1,82 @@
+/**
+ * Freehand pen / highlighter (DDR-242, DDR-090: the highlighter is a pen flag).
+ * Points are a flat `[x0, y0, x1, y1, …]` list in parent space.
+ */
+
+import { DEFAULT_INK, MAX_PEN_POINTS } from '../constants.ts';
+import { bool, color, num, points } from '../fields.ts';
+import type { AnnotationElement, Box, ElementDef } from '../types.ts';
+import { get, pointSegmentDist } from './_shared.ts';
+
+const FIELDS = {
+  points: points(MAX_PEN_POINTS),
+  color: color(DEFAULT_INK),
+  width: num({ min: 0.5, max: 128, dp: 1, def: 2 }),
+  highlighter: bool(),
+};
+
+function pts(el: AnnotationElement): number[] {
+  return Array.isArray(el.points) ? (el.points as number[]) : [];
+}
+
+export function penBounds(p: readonly number[]): Box | null {
+  if (p.length < 2) return null;
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i + 1 < p.length; i += 2) {
+    const x = p[i] as number;
+    const y = p[i + 1] as number;
+    if (x < xMin) xMin = x;
+    if (x > xMax) xMax = x;
+    if (y < yMin) yMin = y;
+    if (y > yMax) yMax = y;
+  }
+  return { x: xMin, y: yMin, w: xMax - xMin, h: yMax - yMin };
+}
+
+export const pen: ElementDef = {
+  type: 'pen',
+  fields: FIELDS,
+  caps: {
+    box: false,
+    rotatable: false,
+    resizable: true,
+    bindable: false,
+    container: false,
+    textSlot: null,
+  },
+  bounds: (el) => penBounds(pts(el)),
+  hitTest(el, px, py, tol) {
+    const p = pts(el);
+    const t = Math.max(tol, get<number>(FIELDS, el, 'width'));
+    if (p.length === 2) return Math.hypot(px - (p[0] as number), py - (p[1] as number)) <= t;
+    for (let i = 2; i + 1 < p.length; i += 2) {
+      const d = pointSegmentDist(
+        px,
+        py,
+        p[i - 2] as number,
+        p[i - 1] as number,
+        p[i] as number,
+        p[i + 1] as number
+      );
+      if (d <= t) return true;
+    }
+    return false;
+  },
+  translate(el, dx, dy) {
+    return { points: pts(el).map((v, i) => (i % 2 === 0 ? v + dx : v + dy)) };
+  },
+  resize(el, box) {
+    const p = pts(el);
+    const cur = penBounds(p);
+    if (!cur) return {};
+    const sx = cur.w > 0 ? box.w / cur.w : 1;
+    const sy = cur.h > 0 ? box.h / cur.h : 1;
+    return {
+      points: p.map((v, i) => (i % 2 === 0 ? box.x + (v - cur.x) * sx : box.y + (v - cur.y) * sy)),
+    };
+  },
+  meaningful: (el) => pts(el).length >= 4,
+};

package/apps/studio/annotations/elements/section.model.ts

@@ -0,0 +1,70 @@
+/**
+ * Section (DDR-242) — a labelled container. Children name it as `parent` and
+ * are positioned RELATIVE to its origin, so moving a section is one write and
+ * nudge / align / duplicate / delete act on it as a subtree. Its interior is
+ * click-through: only the border band and the title chip are hittable.
+ */
+
+import {
+  DEFAULT_SECTION_COLOR,
+  SECTION_LABEL_FONT,
+  SECTION_LABEL_H,
+  SECTION_MIN_SIZE,
+} from '../constants.ts';
+import { color, str } from '../fields.ts';
+import type { AnnotationElement, Box, ElementDef } from '../types.ts';
+import { BOX_FIELDS, boxOf, resizeBox, translateBox } from './_shared.ts';
+
+const FIELDS = {
+  ...BOX_FIELDS,
+  label: str({ max: 200, plain: true, def: 'Section', allowEmpty: true }),
+  color: color(DEFAULT_SECTION_COLOR),
+};
+
+/**
+ * The title chip's box in WORLD units, given the current zoom. The chip is
+ * drawn at a constant SCREEN size, so its world size is screen size / zoom —
+ * the ONE definition every hit-test, eraser and connector uses (v1 had three
+ * drifting copies, see the plan's Problem §5).
+ */
+export function sectionChipBox(el: AnnotationElement, zoom = 1): Box {
+  const b = boxOf(el);
+  const label = typeof el.label === 'string' ? el.label : 'Section';
+  const z = zoom > 0 ? zoom : 1;
+  const w = Math.max(56, label.length * SECTION_LABEL_FONT * 0.62 + 18) / z;
+  const h = (SECTION_LABEL_H + 6) / z;
+  return { x: b.x, y: b.y - h, w, h };
+}
+
+export const section: ElementDef = {
+  type: 'section',
+  fields: FIELDS,
+  caps: {
+    box: true,
+    rotatable: false,
+    resizable: true,
+    bindable: true,
+    container: true,
+    textSlot: 'title',
+  },
+  bounds: (el) => boxOf(el),
+  hitTest(el, px, py, tol) {
+    const b = boxOf(el);
+    const chip = sectionChipBox(el);
+    if (px >= chip.x && px <= chip.x + chip.w && py >= chip.y && py <= b.y) return true;
+    const t = Math.max(tol, 8);
+    if (px < b.x - t || px > b.x + b.w + t || py < b.y - t || py > b.y + b.h + t) return false;
+    return (
+      Math.abs(px - b.x) <= t ||
+      Math.abs(px - (b.x + b.w)) <= t ||
+      Math.abs(py - b.y) <= t ||
+      Math.abs(py - (b.y + b.h)) <= t
+    );
+  },
+  translate: translateBox,
+  resize: resizeBox,
+  meaningful: (el) => {
+    const b = boxOf(el);
+    return b.w >= SECTION_MIN_SIZE && b.h >= SECTION_MIN_SIZE;
+  },
+};