@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/client/panels/SetupChecklist.jsx

@@ -0,0 +1,223 @@
+// SetupChecklist — DDR-166 plan, Phase 2 (T7/T8). Design-setup progress surface
+// (project / design system / first canvas / brand assets), mirroring
+// ReadinessList.jsx's shape but backed by GET /_api/setup-readiness instead of
+// /_api/preflight. Pure detect-and-guide: never installs or mutates anything.
+//
+// "Bring my existing brand" (T8) now opens the real in-app ingestion panel
+// (T12, DDR-173) — `onBringBrand` is threaded down the same way `onStartTour`
+// already is; when absent (an older mount site not yet updated), falls back
+// to the public docs link this used to be a stub for.
+
+import { useCallback, useEffect, useState } from 'react';
+
+/** Fetch + cache the design-setup readiness report. `refresh()` re-probes. */
+export function useSetupReadiness(enabled = true) {
+  const [report, setReport] = useState(null); // { ready, items } | null
+  const [loading, setLoading] = useState(enabled);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    return fetch('/_api/setup-readiness')
+      .then((r) => r.json())
+      .then((d) => {
+        setReport(d && Array.isArray(d.items) ? d : null);
+        setLoading(false);
+        return d;
+      })
+      .catch(() => {
+        setReport(null);
+        setLoading(false);
+        return null;
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    let alive = true;
+    fetch('/_api/setup-readiness')
+      .then((r) => r.json())
+      .then((d) => alive && (setReport(d && Array.isArray(d.items) ? d : null), setLoading(false)))
+      .catch(() => alive && (setReport(null), setLoading(false)));
+    return () => {
+      alive = false;
+    };
+  }, [enabled]);
+
+  return { report, loading, refresh };
+}
+
+function StatusIcon({ present }) {
+  if (present)
+    return (
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <polyline points="3 8.4 6.4 11.8 13 4.4" />
+      </svg>
+    );
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="8" cy="8" r="5.5" />
+    </svg>
+  );
+}
+
+export function SetupChecklist({ report, loading, refresh, onStartTour, onBringBrand }) {
+  return (
+    <div className="setup-cl">
+      <ul className="setup-cl-list">
+        {report?.items?.map((it) => (
+          <li
+            key={it.id}
+            className={`setup-cl-row setup-cl-row--${it.status}`}
+            data-testid={`setup-cl-row-${it.id}`}
+          >
+            <span className="setup-cl-ic" aria-hidden="true">
+              <StatusIcon present={it.status === 'present'} />
+            </span>
+            <span className="setup-cl-tx">
+              <span className="setup-cl-label">{it.label}</span>
+              <span className="setup-cl-detail">{it.detail}</span>
+            </span>
+          </li>
+        ))}
+      </ul>
+      <div className="setup-cl-foot">
+        {onStartTour && (
+          <button
+            type="button"
+            data-testid="setup-cl-start-tour"
+            className="btn btn--primary btn--sm"
+            onClick={onStartTour}
+          >
+            Start guided setup
+          </button>
+        )}
+        {onBringBrand ? (
+          <button
+            type="button"
+            data-testid="onboarding-bring-brand"
+            className="btn btn--ghost btn--sm setup-cl-brand"
+            onClick={onBringBrand}
+          >
+            Bring my existing brand
+          </button>
+        ) : (
+          <a
+            href="https://maude.sh/docs/getting-started"
+            target="_blank"
+            rel="noreferrer noopener"
+            data-testid="onboarding-bring-brand"
+            className="btn btn--ghost btn--sm setup-cl-brand"
+          >
+            Bring my existing brand
+          </a>
+        )}
+        {refresh && (
+          <button
+            type="button"
+            className="btn btn--ghost btn--sm setup-cl-recheck"
+            onClick={refresh}
+            disabled={loading}
+          >
+            {loading ? 'Checking…' : 'Re-check'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Standalone modal, reachable from Help ▸ Quick setup… — reuses the shared
+// help-modal chrome (backdrop + header + body), same shape as ReadinessDialog.
+export default function SetupChecklistDialog({ open, onClose, onStartTour, onBringBrand }) {
+  const { report, loading, refresh } = useSetupReadiness(open);
+  useEffect(() => {
+    if (!open) return undefined;
+    const onKey = (e) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="help-modal setup-cl-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="setup-cl-modal-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="setup-cl-modal-title">
+            Quick setup
+          </span>
+          <button
+            type="button"
+            className="help-modal-close"
+            aria-label="Close (Esc)"
+            onClick={onClose}
+          >
+            ×
+          </button>
+        </header>
+        <div className="help-modal-body">
+          <p className="setup-cl-note">
+            Empty → design system → first canvas → your first AI edit. Ask the Assistant to build
+            each step, or take the guided tour to see where everything lives.
+          </p>
+          {report ? (
+            <SetupChecklist
+              report={report}
+              loading={loading}
+              refresh={refresh}
+              onStartTour={
+                onStartTour
+                  ? () => {
+                      onClose();
+                      onStartTour();
+                    }
+                  : undefined
+              }
+              onBringBrand={
+                onBringBrand
+                  ? () => {
+                      onClose();
+                      onBringBrand();
+                    }
+                  : undefined
+              }
+            />
+          ) : (
+            <p className="setup-cl-note">
+              {loading ? 'Checking…' : "Couldn't reach the setup probe."}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/panels/StickerPicker.jsx

@@ -0,0 +1,160 @@
+// StickerPicker.jsx — feature-whiteboard-annotation-improvements, Phase 4.
+//
+// Searchable, pack-grouped picker for MAUDE's bundled whiteboard sticker packs
+// (GET /_api/stickers — main-origin only, DDR-054/DDR-088; mirrors AssetPicker's
+// shell/scrim treatment in app.jsx). Triggered from the canvas-side tool
+// palette's Stickers button via `postMessage({dgn:'open-sticker-picker'})`;
+// `onPick(sticker)` hands the caller `{ file, keywords, url }` — app.jsx
+// re-uploads the picked PNG's bytes through the existing /_api/asset lane
+// (content-addressed, canvas-origin-allowlisted) and relays the resulting
+// project path down to the canvas, exactly like the replace-annotation-media
+// flow already does for AssetPicker.
+
+import { useEffect, useMemo, useState } from 'react';
+
+function StIcon({ name, size = 15 }) {
+  if (name === 'x') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path
+          d="M4 4l8 8M12 4l-8 8"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
+  return null;
+}
+
+export default function StickerPicker({ onPick, onClose }) {
+  const [packs, setPacks] = useState(null); // null = loading
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    fetch('/_api/stickers')
+      .then((r) => r.json())
+      .then((j) => alive && setPacks(j.ok ? j.packs : []))
+      .catch(() => alive && setPacks([]));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [onClose]);
+
+  const filteredPacks = useMemo(() => {
+    if (!packs) return [];
+    const q = query.trim().toLowerCase();
+    if (!q) return packs;
+    return packs
+      .map((pack) => ({
+        ...pack,
+        stickers: pack.stickers.filter(
+          (s) =>
+            s.file.toLowerCase().includes(q) ||
+            (s.keywords || []).some((k) => k.toLowerCase().includes(q))
+        ),
+      }))
+      .filter((pack) => pack.stickers.length > 0);
+  }, [packs, query]);
+
+  const totalShown = filteredPacks.reduce((n, p) => n + p.stickers.length, 0);
+
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="st-dialog st-sticker-picker"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Stickers"
+      >
+        <div className="st-dialog-hd">
+          <span className="st-dialog-title">Stickers</span>
+          <button type="button" className="st-iconbtn" aria-label="Close" onClick={onClose}>
+            <StIcon name="x" size={15} />
+          </button>
+        </div>
+        <div className="st-dialog-bd">
+          <input
+            className="input"
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search stickers…"
+            aria-label="Search stickers"
+            autoFocus
+          />
+          <div className="st-sp-body">
+            {packs == null ? (
+              <div className="st-sp-empty">Loading…</div>
+            ) : totalShown === 0 ? (
+              <div className="st-sp-empty">
+                {query.trim() ? `No stickers match "${query.trim()}"` : 'No stickers bundled'}
+              </div>
+            ) : (
+              filteredPacks.map((pack) => (
+                <div key={pack.slug}>
+                  <div className="st-sp-pack-hd">
+                    <span className="st-sp-pack-name">{pack.name}</span>
+                    {pack.author && <span className="st-sp-pack-author">by {pack.author}</span>}
+                  </div>
+                  <div className="st-sp-grid">
+                    {pack.stickers.map((s) => (
+                      <button
+                        type="button"
+                        key={s.file}
+                        className="st-sp-cell"
+                        title={s.keywords?.[0] || s.file}
+                        onClick={() => onPick(s)}
+                      >
+                        <img className="st-sp-thumb" src={s.url} alt={s.keywords?.[0] || s.file} loading="lazy" />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+        {packs && packs.length > 0 && (
+          <div className="st-sp-ft">
+            {packs.map((pack) => (
+              <span key={pack.slug}>
+                {pack.name}
+                {pack.author ? ` — ${pack.author}` : ''}
+                {pack.attributionUrl ? (
+                  <>
+                    {' '}
+                    (
+                    <a href={pack.attributionUrl} target="_blank" rel="noreferrer">
+                      source
+                    </a>
+                    )
+                  </>
+                ) : null}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/panels/TimelinePanel.jsx

@@ -112,7 +112,7 @@ export default function TimelinePanel({
   total = 0,
   frame = 0,
   playing = false,
-  loop = true,
+  loop = false,
   onSeek,
   onPlay,
   onPause,
@@ -145,6 +145,17 @@ export default function TimelinePanel({
   const clamped = clamp(Math.round(frame), 0, totalFrames - 1);
   const trackRef = useRef(null);
   const draggingRef = useRef(false);
+  const rootRef = useRef(null);
+  // Focus the dock the moment it opens. The transport shortcuts (Space play,
+  // arrow frame-step) live on the SHELL window, so they only fire when focus is
+  // in the shell — but opening the Timeline via ⌘⇧T while focus sat in the
+  // canvas iframe (the common case after any text/element interaction) used to
+  // leave focus stuck in the iframe, so Space/arrows silently did nothing.
+  // Pulling focus here on mount (mount === open, the panel is conditionally
+  // rendered) hands the transport keys a shell focus target immediately.
+  useEffect(() => {
+    rootRef.current?.focus();
+  }, []);
   // Drag-to-retime a sequence's duration: { index, startX, startDur, rowW, curDur }.
   const [retimeDrag, setRetimeDrag] = useState(null);
   // Drag the block body to move a clip's `from`: { index, startX, startFrom, rowW, curFrom }.
@@ -337,8 +348,10 @@ export default function TimelinePanel({
 
   return (
     <aside
+      ref={rootRef}
+      tabIndex={-1}
       className={`tl-panel${resizing ? ' is-resizing' : ''}${dropActive ? ' is-drop' : ''}`}
-      style={height ? { height } : undefined}
+      style={{ ...(height ? { height } : {}), outline: 'none' }}
       onDragOver={(e) => {
         if (!onDropMedia || !hasFiles(e.dataTransfer)) return;
         e.preventDefault();