@1agh/maude 0.28.0 → 0.29.0

package/README.md

@@ -129,8 +129,8 @@ The repo is a **pnpm workspace monorepo** with one published npm package (`@1agh
 | --------- | ------- |
 | `.` (root) | The single npm publisher — CLI, dev-server entry, plugin templates that ship to npm. |
 | `site/` | Docs site — Fumadocs + Next.js, deployed to Vercel ([DDR-005](.ai/decisions/DDR-005-docs-site-stack-and-hosting.md)). |
-| `plugins/design/dev-server/` | Zero-dep Node dev server + browser client. Bundled output (`dist/`) is the only thing in the npm tarball. |
-| `plugins/design/hub/` | Reserved for the v1.1 federated hub (Phase 9). |
+| `apps/studio/` | Zero-dep Node dev server + browser client. Bundled output (`dist/`) is the only thing in the npm tarball. |
+| `apps/hub/` | Reserved for the v1.1 federated hub (Phase 9). |
 
 Common scripts at the root:
 

package/{plugins/design/dev-server → apps/studio}/ai-banner.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       ai-banner.tsx — yellow "Claude is editing this canvas" banner
- * @scope      plugins/design/dev-server/ai-banner.tsx
+ * @scope      apps/studio/ai-banner.tsx
  * @purpose    Mounted by canvas-shell. Subscribes to the inspector WS
  *             `ai-activity` event for the canvas's own file path; shows a
  *             non-modal yellow banner while AI work is in progress and clears

package/{plugins/design/dev-server → apps/studio}/annotations-context-toolbar.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       annotations-context-toolbar.tsx — Phase 5.1 per-selection toolbar
- * @scope      plugins/design/dev-server/annotations-context-toolbar.tsx
+ * @scope      apps/studio/annotations-context-toolbar.tsx
  * @purpose    FigJam-style floating chrome anchored above the currently
  *             selected annotation strokes. Reads `useAnnotationSelection` +
  *             `useStrokesStore`; mutations dispatch through the store so the
@@ -26,6 +26,7 @@ import {
   type ArrowHead,
   type ArrowLineType,
   FILL_PALETTE,
+  type ListType,
   STICKY_PALETTE,
   STROKE_PALETTE,
   type Stroke,
@@ -36,27 +37,33 @@ import {
   IconAlignCenter,
   IconAlignLeft,
   IconAlignRight,
-  IconArrowNone,
   IconArrowheadCircle,
   IconArrowheadDiamond,
   IconArrowheadLine,
   IconArrowheadTriangle,
   IconArrowheadTriangleOutline,
+  IconArrowNone,
   IconBold,
   IconChevronDown,
   IconCornerPill,
   IconCornerSoft,
   IconCornerSquare,
   IconDash,
+  IconItalic,
   IconLineCurved,
   IconLineElbow,
   IconLineStraight,
   IconLineThick,
   IconLineThin,
+  IconLink,
+  IconListBullet,
+  IconListOrdered,
   IconStrike,
   IconTrash,
+  IconUnderline,
 } from './canvas-icons.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
+import { isHttpUrl, linkDomain } from './use-canvas-media-drop.tsx';
 
 // Phase 24 — arrowhead + line-type option metadata (icon + label per value),
 // driving the per-end head dropdowns + the line-type dropdown.
@@ -253,6 +260,28 @@ const TOOLBAR_CSS = `
   background: color-mix(in oklab, #ff5a4d 26%, transparent);
   color: #ffffff;
 }
+/* Phase 23 — media (image alt / link url) inline text field inside the dark
+   property bar. */
+.dc-annot-ctx-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 2px;
+}
+.dc-annot-ctx-field label { color: rgba(255,255,255,0.6); font-size: 11px; }
+.dc-annot-ctx-input {
+  width: 220px;
+  max-width: 44vw;
+  padding: 4px 7px;
+  border: 1px solid rgba(255,255,255,0.18);
+  border-radius: 6px;
+  background: rgba(255,255,255,0.06);
+  color: #fff;
+  font: inherit;
+  font-size: 12px;
+}
+.dc-annot-ctx-input::placeholder { color: rgba(255,255,255,0.4); }
+.dc-annot-ctx-input:focus-visible { outline: 2px solid #ffffff; outline-offset: -1px; }
 /* Phase 24 — icon dropdown (arrowhead / line-type / text-align). The wrapper
    anchors the menu directly above the trigger. */
 .dc-annot-ctx-dd { position: relative; display: inline-flex; }
@@ -422,6 +451,11 @@ export function AnnotationContextToolbar() {
     // separately below.
     const allRect = selectedStrokes.every((s) => s.tool === 'rect');
     const allArrow = selectedStrokes.every((s) => s.tool === 'arrow');
+    // Dash now applies to arrows AND every outlined shape (rect / ellipse /
+    // polygon) — item 7. Heads + line-type (arrowDir) stay arrow-only.
+    const allDashable = selectedStrokes.every(
+      (s) => s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse' || s.tool === 'polygon'
+    );
     return {
       color: true,
       fill: allFillable,
@@ -429,7 +463,7 @@ export function AnnotationContextToolbar() {
       fontSize: fontSizeApplicable,
       cornerRadius: allRect,
       arrowDir: allArrow,
-      dash: allArrow,
+      dash: allDashable,
     };
   }, [selectedStrokes]);
 
@@ -545,6 +579,40 @@ export function AnnotationContextToolbar() {
     },
     [store, selectedStrokes]
   );
+  // Italic / underline / list (items 4b + 4c) — same text + sticky fan-out.
+  const setItalic = useCallback(
+    (italic: boolean) => {
+      if (!store) return;
+      for (const s of selectedStrokes) {
+        if (s.tool === 'text' || s.tool === 'sticky') {
+          store.updateStroke(s.id, { italic } as Partial<Stroke>);
+        }
+      }
+    },
+    [store, selectedStrokes]
+  );
+  const setUnderline = useCallback(
+    (underline: boolean) => {
+      if (!store) return;
+      for (const s of selectedStrokes) {
+        if (s.tool === 'text' || s.tool === 'sticky') {
+          store.updateStroke(s.id, { underline } as Partial<Stroke>);
+        }
+      }
+    },
+    [store, selectedStrokes]
+  );
+  const setListType = useCallback(
+    (listType: ListType | undefined) => {
+      if (!store) return;
+      for (const s of selectedStrokes) {
+        if (s.tool === 'text' || s.tool === 'sticky') {
+          store.updateStroke(s.id, { listType } as Partial<Stroke>);
+        }
+      }
+    },
+    [store, selectedStrokes]
+  );
   const setAlign = useCallback(
     (align: TextAlign) => {
       if (!store) return;
@@ -597,12 +665,17 @@ export function AnnotationContextToolbar() {
     },
     [store, selectedStrokes]
   );
-  // Phase 21 — arrow dash toggle.
+  // Dash toggle — arrow + rect / ellipse / polygon (item 7).
   const setDashed = useCallback(
     (dashed: boolean) => {
       if (!store) return;
       for (const s of selectedStrokes) {
-        if (s.tool === 'arrow') {
+        if (
+          s.tool === 'arrow' ||
+          s.tool === 'rect' ||
+          s.tool === 'ellipse' ||
+          s.tool === 'polygon'
+        ) {
           store.updateStroke(s.id, { dashed } as Partial<Stroke>);
         }
       }
@@ -617,6 +690,145 @@ export function AnnotationContextToolbar() {
 
   if (!annotSel || !store || selectedStrokes.length === 0) return null;
 
+  // ── Phase 23 — dedicated panel for a single image / link selection. ─────────
+  // Image / link carry no color / fill / thickness, so the generic swatch bar is
+  // meaningless for them; render a focused panel instead (image alt for a11y;
+  // link url/title + Open). Uncontrolled fields keyed by id commit ONCE on
+  // blur/Enter (no per-keystroke undo spam). Multi-select / mixed selections
+  // fall through to the generic bar below.
+  const soleMedia =
+    selectedStrokes.length === 1 &&
+    (selectedStrokes[0]?.tool === 'image' || selectedStrokes[0]?.tool === 'link')
+      ? selectedStrokes[0]
+      : null;
+  if (soleMedia?.tool === 'image') {
+    const img = soleMedia;
+    const commitAlt = (value: string) => {
+      const next = value.trim();
+      if ((img.alt ?? '') !== next) {
+        store.updateStroke(img.id, { alt: next || undefined } as Partial<Stroke>);
+      }
+    };
+    return (
+      <div
+        ref={ref}
+        className="dc-annot-ctx"
+        role="toolbar"
+        aria-label="Image properties"
+        style={{ display: 'flex', top: -9999, left: -9999 }}
+      >
+        <div className="dc-annot-ctx-field">
+          <label htmlFor="dc-img-alt">Alt</label>
+          <input
+            id="dc-img-alt"
+            key={img.id}
+            className="dc-annot-ctx-input"
+            type="text"
+            defaultValue={img.alt ?? ''}
+            placeholder="Describe this image (alt text)"
+            aria-label="Image alt text"
+            onBlur={(e) => commitAlt(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                e.currentTarget.blur();
+              }
+            }}
+          />
+        </div>
+        <div className="dc-annot-ctx-sep" />
+        <button
+          type="button"
+          className="dc-annot-ctx-ibtn dc-annot-ctx-ibtn--danger"
+          aria-label="Delete image"
+          title="Delete"
+          onClick={remove}
+        >
+          <IconTrash />
+        </button>
+      </div>
+    );
+  }
+  if (soleMedia?.tool === 'link') {
+    const link = soleMedia;
+    const commitUrl = (value: string) => {
+      const next = value.trim();
+      if (isHttpUrl(next) && next !== link.url) {
+        store.updateStroke(link.id, { url: next, domain: linkDomain(next) } as Partial<Stroke>);
+      }
+    };
+    const commitTitle = (value: string) => {
+      const next = value.trim();
+      if (next !== link.title) store.updateStroke(link.id, { title: next } as Partial<Stroke>);
+    };
+    const openLink = () => {
+      if (isHttpUrl(link.url)) window.open(link.url, '_blank', 'noopener,noreferrer');
+    };
+    return (
+      <div
+        ref={ref}
+        className="dc-annot-ctx"
+        role="toolbar"
+        aria-label="Link properties"
+        style={{ display: 'flex', top: -9999, left: -9999 }}
+      >
+        <button
+          type="button"
+          className="dc-annot-ctx-ibtn"
+          aria-label={`Open ${link.domain || 'link'} in a new tab`}
+          title="Open link"
+          onClick={openLink}
+        >
+          <IconLink />
+        </button>
+        <div className="dc-annot-ctx-sep" />
+        <div className="dc-annot-ctx-field">
+          <input
+            key={`${link.id}-url`}
+            className="dc-annot-ctx-input"
+            type="url"
+            inputMode="url"
+            defaultValue={link.url}
+            placeholder="https://…"
+            aria-label="Link URL"
+            onBlur={(e) => commitUrl(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                e.currentTarget.blur();
+              }
+            }}
+          />
+          <input
+            key={`${link.id}-title`}
+            className="dc-annot-ctx-input"
+            type="text"
+            defaultValue={link.title}
+            placeholder="Title"
+            aria-label="Link title"
+            onBlur={(e) => commitTitle(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                e.currentTarget.blur();
+              }
+            }}
+          />
+        </div>
+        <div className="dc-annot-ctx-sep" />
+        <button
+          type="button"
+          className="dc-annot-ctx-ibtn dc-annot-ctx-ibtn--danger"
+          aria-label="Delete link"
+          title="Delete"
+          onClick={remove}
+        >
+          <IconTrash />
+        </button>
+      </div>
+    );
+  }
+
   // Active values for swatch highlighting — when uniform across selection.
   const uniqColor = uniformValue(selectedStrokes.map((s) => s.color));
   const uniqFill = caps.fill
@@ -659,6 +871,29 @@ export function AnnotationContextToolbar() {
         )
       )
     : undefined;
+  const uniqItalic = caps.fontSize
+    ? uniformValue(
+        selectedStrokes.map((s) =>
+          s.tool === 'text' || s.tool === 'sticky' ? !!s.italic : undefined
+        )
+      )
+    : undefined;
+  const uniqUnderline = caps.fontSize
+    ? uniformValue(
+        selectedStrokes.map((s) =>
+          s.tool === 'text' || s.tool === 'sticky' ? !!s.underline : undefined
+        )
+      )
+    : undefined;
+  // List type — undefined when no list (the active-state for the two list
+  // toggles reads off this; both off ⇒ no list).
+  const uniqListType = caps.fontSize
+    ? uniformValue(
+        selectedStrokes.map((s) =>
+          s.tool === 'text' || s.tool === 'sticky' ? (s.listType ?? 'none') : undefined
+        )
+      )
+    : undefined;
   const uniqAlign = caps.fontSize
     ? uniformValue(
         selectedStrokes.map((s) => {
@@ -699,7 +934,11 @@ export function AnnotationContextToolbar() {
     : undefined;
   const uniqDashed = caps.dash
     ? uniformValue(
-        selectedStrokes.map((s) => (s.tool === 'arrow' ? (s.dashed ?? false) : undefined))
+        selectedStrokes.map((s) =>
+          s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse' || s.tool === 'polygon'
+            ? (s.dashed ?? false)
+            : undefined
+        )
       )
     : undefined;
 
@@ -817,6 +1056,16 @@ export function AnnotationContextToolbar() {
           >
             <IconBold />
           </button>
+          <button
+            type="button"
+            className="dc-annot-ctx-ibtn"
+            aria-label="Italic"
+            aria-pressed={uniqItalic === true}
+            title="Italic"
+            onClick={() => setItalic(!(uniqItalic === true))}
+          >
+            <IconItalic />
+          </button>
           <button
             type="button"
             className="dc-annot-ctx-ibtn"
@@ -827,6 +1076,16 @@ export function AnnotationContextToolbar() {
           >
             <IconStrike />
           </button>
+          <button
+            type="button"
+            className="dc-annot-ctx-ibtn"
+            aria-label="Underline"
+            aria-pressed={uniqUnderline === true}
+            title="Underline"
+            onClick={() => setUnderline(!(uniqUnderline === true))}
+          >
+            <IconUnderline />
+          </button>
           <IconDropdown
             ariaLabel="Text alignment"
             value={uniqAlign ?? 'left'}
@@ -837,6 +1096,27 @@ export function AnnotationContextToolbar() {
             }}
             onPick={(v) => setAlign(v as TextAlign)}
           />
+          {/* List style — two mutually-exclusive toggles; click-again clears. */}
+          <button
+            type="button"
+            className="dc-annot-ctx-ibtn"
+            aria-label="Bulleted list"
+            aria-pressed={uniqListType === 'bullet'}
+            title="Bulleted list"
+            onClick={() => setListType(uniqListType === 'bullet' ? undefined : 'bullet')}
+          >
+            <IconListBullet />
+          </button>
+          <button
+            type="button"
+            className="dc-annot-ctx-ibtn"
+            aria-label="Numbered list"
+            aria-pressed={uniqListType === 'number'}
+            title="Numbered list"
+            onClick={() => setListType(uniqListType === 'number' ? undefined : 'number')}
+          >
+            <IconListOrdered />
+          </button>
         </>
       ) : null}
       {caps.cornerRadius ? (