@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/canvas-edit.ts

@@ -68,6 +68,8 @@ function computeId(componentName: string, idx: number): string {
 
 interface OpeningHit {
   opening: AnyNode;
+  /** The full JSXElement node — `editText` needs `.children` (JSXText), not just the opening tag. */
+  element: AnyNode;
 }
 
 /**
@@ -108,7 +110,7 @@ function findOpening(program: AnyNode, targetId: string): OpeningHit | null {
       frame.jsxIndex += 1;
       const id = computeId(frame.componentName, idx);
       if (id === targetId) {
-        hit = { opening: node.openingElement };
+        hit = { opening: node.openingElement, element: node };
       }
       if (!hit) {
         if (node.openingElement) visit(node.openingElement.attributes);
@@ -200,6 +202,111 @@ export async function editAttribute(
   });
 }
 
+/**
+ * Remove an attribute (or one inline-style property) from the element with the
+ * given `data-cd-id` — the "reset to original" path (Phase 12.3). `attr` follows
+ * the same shape as `editAttribute`: `style.<camelOrKebab>` removes one inline
+ * style key (dropping the whole `style={{}}` when it was the last key); any other
+ * name removes that plain JSX attribute. A missing key/attribute is a no-op
+ * (delta 0), never an error. Same atomic write + per-file lock as `editAttribute`.
+ */
+export async function removeAttribute(
+  canvasAbsPath: string,
+  id: string,
+  attr: string
+): Promise<EditResult> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id,
+      });
+    }
+    const source = await file.text();
+    const next = applyRemove(canvasAbsPath, source, id, attr);
+    if (next.source === source) return { source, delta: 0 };
+    const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
+    await Bun.write(tmp, next.source);
+    const { rename } = await import('node:fs/promises');
+    await rename(tmp, canvasAbsPath);
+    return next;
+  });
+}
+
+/** Pure variant of `removeAttribute` — exposed for tests. */
+export function applyRemove(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  attr: string
+): EditResult {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    const first = parsed.errors[0];
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${first?.message ?? 'unknown'}`,
+      {
+        canvas: canvasAbsPath,
+        id,
+      }
+    );
+  }
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const s = new MagicString(source);
+  if (attr.startsWith('style.')) {
+    removeStyleProp(s, hit.opening, attr.slice('style.'.length), source);
+  } else if (attr === 'data-cd-id') {
+    throw new CanvasEditError('data-cd-id is owned by the pipeline; cannot be removed', {
+      canvas: canvasAbsPath,
+      id,
+    });
+  } else {
+    removeStringAttr(s, hit.opening, attr, source);
+  }
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
+/**
+ * Apply an inline TEXT-content edit to the JSX element with the given
+ * `data-cd-id`. Leaf-text only: the element's children must be exactly one
+ * `JSXText` node (whitespace-only siblings are ignored). Mixed/expression
+ * children (`<b>x</b>`, `{count}`) throw `CanvasEditError` — the caller should
+ * surface a "use /design:edit" refusal rather than guess. The text is
+ * JSX-escaped before it touches source. Same atomic write + per-file lock as
+ * `editAttribute`. See DDR-103.
+ */
+export async function editText(
+  canvasAbsPath: string,
+  id: string,
+  text: string
+): Promise<EditResult> {
+  return withLock(canvasAbsPath, async () => {
+    const file = Bun.file(canvasAbsPath);
+    if (!(await file.exists())) {
+      throw new CanvasEditError(`Canvas not found: ${canvasAbsPath}`, {
+        canvas: canvasAbsPath,
+        id,
+      });
+    }
+    const source = await file.text();
+    const next = applyTextEdit(canvasAbsPath, source, id, text);
+    if (next.source === source) return { source, delta: 0 };
+    const tmp = `${canvasAbsPath}.tmp.${Math.random().toString(36).slice(2, 10)}`;
+    await Bun.write(tmp, next.source);
+    const { rename } = await import('node:fs/promises');
+    await rename(tmp, canvasAbsPath);
+    return next;
+  });
+}
+
 /**
  * Pure variant — exposed for tests + in-memory pipelines. Caller owns
  * persistence. Throws CanvasEditError if the ID isn't found or the edit shape
@@ -245,6 +352,68 @@ export function applyEdit(
   return { source: out, delta: out.length - source.length };
 }
 
+/**
+ * Pure variant of `editText` — parse, locate the JSXText child, overwrite its
+ * source span (preserving the original leading/trailing whitespace so JSX
+ * indentation survives), escaping the new text. Throws `CanvasEditError` for a
+ * missing id, no text content, or mixed/expression children.
+ */
+export function applyTextEdit(
+  canvasAbsPath: string,
+  source: string,
+  id: string,
+  text: string
+): EditResult {
+  const parsed = parseSync(canvasAbsPath, source, { sourceType: 'module' });
+  if (parsed.errors && parsed.errors.length > 0) {
+    const first = parsed.errors[0];
+    throw new CanvasEditError(
+      `oxc-parser failed on ${canvasAbsPath}: ${first?.message ?? 'unknown'}`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  const hit = findOpening(parsed.program, id);
+  if (!hit) {
+    throw new CanvasEditError(`data-cd-id "${id}" not found in ${canvasAbsPath}`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+
+  const children: AnyNode[] = Array.isArray(hit.element?.children) ? hit.element.children : [];
+  // Ignore whitespace-only JSXText siblings (`<button>\n  Save\n</button>` parses
+  // as one JSXText; `<a>\n  <b/>\n</a>` parses as ws + element + ws — the ws is
+  // noise). What's left is the "real" content.
+  const meaningful = children.filter(
+    (c) => !(c?.type === 'JSXText' && typeof c.value === 'string' && c.value.trim() === '')
+  );
+  if (meaningful.length === 0) {
+    throw new CanvasEditError(`element "${id}" has no editable text content`, {
+      canvas: canvasAbsPath,
+      id,
+    });
+  }
+  const only = meaningful[0];
+  if (meaningful.length > 1 || only?.type !== 'JSXText') {
+    throw new CanvasEditError(
+      `element "${id}" has mixed or expression content — edit it via /design:edit`,
+      { canvas: canvasAbsPath, id }
+    );
+  }
+
+  const start = only.start as number;
+  const end = only.end as number;
+  const raw = source.slice(start, end);
+  // Preserve the original indentation/newline framing; swap only the visible text.
+  const lead = /^\s*/.exec(raw)?.[0] ?? '';
+  const trail = /\s*$/.exec(raw)?.[0] ?? '';
+  const s = new MagicString(source);
+  s.overwrite(start, end, `${lead}${escapeJsxText(text)}${trail}`);
+  const out = s.toString();
+  return { source: out, delta: out.length - source.length };
+}
+
 // ---------------------------------------------------------------------------
 // Edit shapes.
 
@@ -263,14 +432,20 @@ function editStringAttr(s: MagicString, opening: AnyNode, name: string, value: s
       return;
     }
     if (v.type === 'Literal' || v.type === 'StringLiteral') {
-      // Replace just the value text, keeping surrounding quotes.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // Replace the whole `"value"` (quotes included) so we control the escaping.
+      // The value lands in a JSX *attribute*, where `"` must become `&quot;` and
+      // `<`/`>` their entities — NOT JS backslash escaping. `JSON.stringify` would
+      // emit `\"`, which is invalid in a JSX attribute and corrupts the source on
+      // any value containing a double quote. Use the same `escapeAttr` as the two
+      // insert branches so all four paths agree. See DDR-103 / DDR-105.
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     if (v.type === 'JSXExpressionContainer') {
       // Replace the whole `{...}` with a plain quoted literal — keeps the
-      // resulting JSX readable, no escaping gymnastics.
-      s.overwrite(v.start, v.end, JSON.stringify(value));
+      // resulting JSX readable. Same JSX-attribute escaping as above (NOT
+      // `JSON.stringify`, which would JS-escape a `"` and corrupt the source).
+      s.overwrite(v.start, v.end, `"${escapeAttr(value)}"`);
       return;
     }
     // Unknown shape — refuse rather than corrupt.
@@ -289,6 +464,24 @@ function escapeAttr(value: string): string {
   return value.replace(/"/g, '&quot;').replace(/[<>]/g, (c) => (c === '<' ? '&lt;' : '&gt;'));
 }
 
+/**
+ * Escape JSX-significant characters so user-typed text lands in source `.tsx`
+ * as inert TEXT, never as markup or an expression. The text is written between
+ * an element's tags (`<button>HERE</button>`), where `<`/`>` would start a tag
+ * and `{`/`}` would open a JSX expression — so all four (plus a bare `&`, which
+ * begins an entity) are encoded. This is the load-bearing guard that keeps the
+ * inline text editor (Phase 12) from being a source-injection vector. See
+ * DDR-103.
+ */
+function escapeJsxText(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;');
+}
+
 function editStyleProp(
   s: MagicString,
   opening: AnyNode,
@@ -308,14 +501,14 @@ function editStyleProp(
     return;
   }
   const v = attr.value;
-  if (!v || v.type !== 'JSXExpressionContainer') {
+  if (v?.type !== 'JSXExpressionContainer') {
     throw new CanvasEditError(
       `style attribute on ${id} is not a {{...}} expression — refusing to edit`,
       { canvas: canvasAbsPath, id }
     );
   }
   const obj = v.expression;
-  if (!obj || obj.type !== 'ObjectExpression') {
+  if (obj?.type !== 'ObjectExpression') {
     throw new CanvasEditError(
       `style={...} on ${id} is not an inline ObjectExpression — refusing to edit`,
       { canvas: canvasAbsPath, id }
@@ -349,6 +542,63 @@ function editStyleProp(
   void tail;
 }
 
+/**
+ * Remove a single inline-style property (the "reset to original" path — DDR-104
+ * Phase 12.3). No-op when the style attribute or the key is absent. When the key
+ * was the object's ONLY property, the whole `style={{…}}` attribute is removed so
+ * we don't leave an empty `style={{}}` behind.
+ */
+function removeStyleProp(s: MagicString, opening: AnyNode, prop: string, source: string): boolean {
+  const attr = findAttribute(opening, 'style');
+  if (!attr) return false;
+  const v = attr.value;
+  if (v?.type !== 'JSXExpressionContainer') return false;
+  const obj = v.expression;
+  if (obj?.type !== 'ObjectExpression') return false;
+  const props = (obj.properties as AnyNode[]).filter(
+    (p) => p?.type === 'Property' || p?.type === 'ObjectProperty'
+  );
+  const propCamel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  const idx = props.findIndex((p) => {
+    const k = p.key;
+    const kname =
+      k?.type === 'Identifier' ? k.name : k?.type === 'Literal' ? String(k.value) : null;
+    return kname === prop || kname === propCamel;
+  });
+  if (idx === -1) return false;
+
+  // Only property → drop the whole `style={{…}}` attribute (plus the leading space).
+  if (props.length === 1) {
+    const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+    s.remove(start, attr.end);
+    return true;
+  }
+  // Otherwise remove the one property + one adjacent comma/whitespace run so the
+  // remaining object stays well-formed: consume forward to the next prop's start
+  // (eats the trailing `, `), or — for the last prop — backward from the previous
+  // prop's end (eats the leading `, `).
+  const target = props[idx];
+  if (idx < props.length - 1) {
+    s.remove(target.start as number, props[idx + 1].start as number);
+  } else {
+    s.remove(props[idx - 1].end as number, target.end as number);
+  }
+  return true;
+}
+
+/**
+ * Remove a plain JSX attribute (the custom-attribute "reset" path). No-op when
+ * absent. Refuses `data-cd-id` / `style` (pipeline-owned / wrong endpoint).
+ */
+function removeStringAttr(s: MagicString, opening: AnyNode, name: string, source: string): boolean {
+  if (name === 'data-cd-id' || name === 'style') return false;
+  const attr = findAttribute(opening, name);
+  if (!attr) return false;
+  const start = source[attr.start - 1] === ' ' ? attr.start - 1 : attr.start;
+  s.remove(start, attr.end);
+  return true;
+}
+
 /**
  * Render a JS object key — bare identifier when the prop is camelCase + valid
  * JS id, quoted otherwise. Mirrors how authors write JSX styles.

package/apps/studio/canvas-icons.tsx

@@ -473,6 +473,8 @@ export const TOOL_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   rect: IconRect,
   ellipse: IconEllipse,
   sticky: IconSticky,
+  // FigJam v3 — labelled organizing container.
+  section: IconSection,
   arrow: IconArrow,
   text: IconText,
   eraser: IconEraser,
@@ -487,3 +489,106 @@ export const SHAPE_KIND_ICONS: Record<string, (p: IconProps) => JSX.Element> = {
   triangle: IconTriangle,
   'triangle-down': IconTriangleDown,
 };
+
+// ── FigJam v3 — multi-select manipulation icons ──────────────────────────────
+// Object align (an edge line + two boxes), distribute (rails + a box), and
+// group/ungroup. Same 24×24 stroke language as the rest of the set.
+
+export function IconObjAlignLeft(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18" />
+      <rect x="7" y="6" width="11" height="4" rx="1" />
+      <rect x="7" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignHCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M12 3v2M12 19v2" />
+      <rect x="6" y="6" width="12" height="4" rx="1" />
+      <rect x="8" y="14" width="8" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignRight(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M20 3v18" />
+      <rect x="6" y="6" width="11" height="4" rx="1" />
+      <rect x="11" y="14" width="6" height="4" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignTop(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18" />
+      <rect x="6" y="7" width="4" height="11" rx="1" />
+      <rect x="14" y="7" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignVCenter(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 12h2M19 12h2" />
+      <rect x="6" y="6" width="4" height="12" rx="1" />
+      <rect x="14" y="8" width="4" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconObjAlignBottom(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 20h18" />
+      <rect x="6" y="6" width="4" height="11" rx="1" />
+      <rect x="14" y="11" width="4" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeH(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M4 3v18M20 3v18" />
+      <rect x="9" y="8" width="6" height="8" rx="1" />
+    </Svg>
+  );
+}
+export function IconDistributeV(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 4h18M3 20h18" />
+      <rect x="8" y="9" width="8" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconGroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <path d="M3 7V4a1 1 0 011-1h3M17 3h3a1 1 0 011 1v3M21 17v3a1 1 0 01-1 1h-3M7 21H4a1 1 0 01-1-1v-3" />
+      <rect x="7" y="7" width="6" height="6" rx="1" />
+      <rect x="11" y="11" width="6" height="6" rx="1" />
+    </Svg>
+  );
+}
+export function IconUngroup(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="4" width="7" height="7" rx="1" />
+      <rect x="13" y="13" width="7" height="7" rx="1" />
+      <path d="M15 6l3 3M6 15l3 3" />
+    </Svg>
+  );
+}
+
+/** FigJam v3 — section tool: a region with its name chip docked top-left. */
+export function IconSection(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="8" width="16" height="12" rx="2" />
+      <path d="M4 4h7" />
+    </Svg>
+  );
+}