@lark-apaas/coding-registry-buildless 0.1.26 → 0.1.27-beta.0

package/components/design-canvas.jsx

@@ -315,6 +315,17 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
 }
 
 const DCCtx = React.createContext(null);
+const DC_EMPTY_SECTION = {};
+
+function dcSectionsInDOMOrder(sections) {
+  return [...sections].sort(([a], [b]) => {
+    const position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_DISCONNECTED) return 0;
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+    return 0;
+  });
+}
 
 // Recursively unwrap React.Fragment so <>…</> grouping doesn't hide
 // DCSection/DCArtboard children from the type-based walks below.
@@ -365,6 +376,23 @@ function miaodaWriteFile(path, content, writeContext) {
 
 function DesignCanvas({ children, minScale, maxScale, style }) {
   const [state, setState] = React.useState({ sections: {}, focus: null });
+  const [registeredSections, setRegisteredSections] = React.useState(() => new Map());
+  const registeredSectionsRef = React.useRef(registeredSections);
+  registeredSectionsRef.current = registeredSections;
+  const getSectionNavigation = React.useCallback(() =>
+    dcSectionsInDOMOrder(registeredSectionsRef.current).map(([, sec]) => ({
+      id: sec.id, slotIds: sec.slotIds,
+    })), []);
+  const registerSection = React.useCallback((node, snapshot) => {
+    setRegisteredSections((current) => new Map(current).set(node, snapshot));
+    return () => setRegisteredSections((current) => {
+      if (current.get(node) !== snapshot) return current;
+      const next = new Map(current);
+      next.delete(node);
+      return next;
+    });
+  }, []);
+
   // Hold rendering until the sidecar read settles so the saved order/titles
   // appear on first paint (no source-order flash). didRead gates writes until
   // the read settles so the empty initial state can't clobber a slow read;
@@ -480,51 +508,44 @@ function DesignCanvas({ children, minScale, maxScale, style }) {
     return () => offs.forEach((off) => off());
   }, []);
 
-  // Build registries synchronously from children so FocusOverlay can read
-  // them in the same render. Fragments are flattened; wrapping in other
-  // elements still opts out of focus/reorder.
+  // Sections register the same visible artboards they render, even when a
+  // custom component separates them from DesignCanvas in the JSX tree.
   const registry = {};     // slotId -> { sectionId, artboard }
-  const sectionMeta = {};  // sectionId -> { title, subtitle, slotIds[] }
-  const sectionOrder = [];
-  dcFlatten(children).forEach((sec) => {
-    if (!sec || sec.type !== DCSection) return;
-    const sid = sec.props.id ?? sec.props.title;
-    if (!sid) return;
-    sectionOrder.push(sid);
-    const persisted = state.sections[sid] || {};
-    const abs = [];
-    dcFlatten(sec.props.children).forEach((ab) => {
-      if (!ab || ab.type !== DCArtboard) return;
-      const aid = ab.props.id ?? ab.props.label;
-      if (aid) abs.push([aid, ab]);
-    });
-    // hidden is scoped to one source revision — when the agent regenerates
-    // (artboard-ID set changes), prior deletes don't apply to new content.
-    const srcKey = abs.map(([k]) => k).join('\x1f');
-    const hidden = persisted.srcKey === srcKey ? (persisted.hidden || []) : [];
-    const srcIds = [];
-    abs.forEach(([aid, ab]) => {
-      if (hidden.includes(aid)) return;
-      registry[`${sid}/${aid}`] = { sectionId: sid, artboard: ab };
-      srcIds.push(aid);
+  registeredSections.forEach((sec, node) => {
+    const sid = sec.id;
+    sec.slotIds.forEach((aid) => {
+      registry[`${sid}/${aid}`] = { sectionId: sid, artboard: sec.artboards[aid], node };
     });
-    const kept = (persisted.order || []).filter((k) => srcIds.includes(k));
-    sectionMeta[sid] = {
-      title: persisted.title ?? sec.props.title,
-      subtitle: sec.props.subtitle,
-      slotIds: [...kept, ...srcIds.filter((k) => !kept.includes(k))],
-    };
   });
 
+  const focusedEntry = registry[state.focus];
+  const focusedSection = focusedEntry && focusedEntry.node;
+  const displayedFocus = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (focusedEntry) displayedFocus.current = state.focus;
+    else if (state.focus && displayedFocus.current === state.focus) {
+      // Match the WC correction path: a removed target must not broadcast a
+      // focus:null that would close the presenter's overlay on another client.
+      skipNextFocusEmit.current = true;
+      focusRef.current = null;
+      setState((s) => s.focus === state.focus ? { ...s, focus: null } : s);
+    } else if (!state.focus) displayedFocus.current = null;
+    // A mirrored focus can precede section registration; only clear a target
+    // that was displayed here and has subsequently been removed.
+  }, [state.focus, focusedEntry]);
+
   const api = React.useMemo(() => ({
     state,
-    section: (id) => state.sections[id] || {},
+    registerSection,
+    getSectionNavigation,
+    focusedSection,
+    section: (id) => state.sections[id] || DC_EMPTY_SECTION,
     patchSection: (id, p) => setState((s) => ({
       ...s,
       sections: { ...s.sections, [id]: { ...s.sections[id], ...(typeof p === 'function' ? p(s.sections[id] || {}) : p) } },
     })),
     setFocus: (slotId) => setState((s) => ({ ...s, focus: slotId })),
-  }), [state]);
+  }), [state, registerSection, getSectionNavigation, focusedSection]);
 
   // Esc exits focus; any outside pointerdown commits an in-progress rename.
   React.useEffect(() => {
@@ -551,9 +572,6 @@ function DesignCanvas({ children, minScale, maxScale, style }) {
     <DCCtx.Provider value={api}>
       <DCViewport minScale={minScale} maxScale={maxScale} style={style}>{ready && worldChildren}</DCViewport>
       {ready && overlayChildren}
-      {state.focus && registry[state.focus] && (
-        <DCFocusOverlay entry={registry[state.focus]} sectionMeta={sectionMeta} sectionOrder={sectionOrder} />
-      )}
     </DCCtx.Provider>
   );
 }
@@ -1249,13 +1267,19 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
 // ─────────────────────────────────────────────────────────────
 function DCSection({ id, title, subtitle, children, gap = 48 }) {
   const ctx = React.useContext(DCCtx);
+  const sectionRef = React.useRef(null);
   const sid = id ?? title;
-  const all = React.Children.toArray(dcFlatten(children));
-  const artboards = all.filter((c) => c && c.type === DCArtboard);
-  const rest = all.filter((c) => !(c && c.type === DCArtboard));
-  const sec = (ctx && sid && ctx.section(sid)) || {};
-  // Must match DesignCanvas's srcKey computation exactly (it filters falsy
-  // IDs), or onDelete persists a srcKey that DesignCanvas never recognizes.
+  const { artboards, rest, byId } = React.useMemo(() => {
+    const all = React.Children.toArray(dcFlatten(children));
+    const artboards = all.filter((c) => c && c.type === DCArtboard);
+    return {
+      artboards,
+      rest: all.filter((c) => !(c && c.type === DCArtboard)),
+      byId: Object.fromEntries(artboards.map((a) => [a.props.id ?? a.props.label, a])),
+    };
+  }, [children]);
+  const sec = (ctx && sid && ctx.section(sid)) || DC_EMPTY_SECTION;
+  // Scope saved deletes to the current source revision.
   const allIds = artboards.map((a) => a.props.id ?? a.props.label).filter(Boolean);
   const srcKey = allIds.join('\x1f');
   const hidden = sec.srcKey === srcKey ? (sec.hidden || []) : [];
@@ -1266,7 +1290,17 @@ function DCSection({ id, title, subtitle, children, gap = 48 }) {
     return [...kept, ...srcOrder.filter((k) => !kept.includes(k))];
   }, [sec.order, srcOrder.join('|')]);
 
-  const byId = Object.fromEntries(artboards.map((a) => [a.props.id ?? a.props.label, a]));
+  const snapshot = React.useMemo(() => ({
+    id: sid, title: sec.title ?? title, subtitle, slotIds: order, artboards: byId,
+  }), [sid, sec.title, title, subtitle, order, byId]);
+  const registerSection = ctx && ctx.registerSection;
+  React.useLayoutEffect(() => {
+    if (!sid || !registerSection) return;
+    return registerSection(sectionRef.current, snapshot);
+  }, [sid, registerSection, snapshot]);
+
+  const focusedId = order.find((k) => ctx && ctx.state.focus === `${sid}/${k}`);
+  const focusedArtboard = focusedId === undefined ? null : byId[focusedId];
 
   // marginBottom counter-scales so the on-screen gap between sections stays
   // constant — otherwise at low zoom the (world-space) gap collapses while
@@ -1275,7 +1309,8 @@ function DCSection({ id, title, subtitle, children, gap = 48 }) {
   // the 24px artboard-header (abs-positioned above each card) plus ~8px, so
   // the title sits tight against its own row at every zoom.
   return (
-    <div data-dc-section={sid}
+    <>
+    <div ref={sectionRef} data-dc-section={sid}
       style={{ marginBottom: 'calc(80px * var(--dc-inv-zoom, 1))', position: 'relative' }}>
       <div style={{ padding: '0 60px' }}>
         <div className="dc-sectionhead" style={{ paddingBottom: 'calc(36px * var(--dc-inv-zoom, 1))' }}>
@@ -1305,6 +1340,13 @@ function DCSection({ id, title, subtitle, children, gap = 48 }) {
       </div>
       {rest}
     </div>
+    {/* Keep the portal in the section's React ancestry so content retains
+        its providers even though the overlay DOM lives under document.body. */}
+    {focusedArtboard && ctx.focusedSection === sectionRef.current && (
+      <DCFocusOverlay entry={{ sectionId: sid, artboard: focusedArtboard }}
+        peers={order} getSectionNavigation={ctx.getSectionNavigation} />
+    )}
+    </>
   );
 }
 
@@ -1605,24 +1647,24 @@ function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
 // Focus mode — overlay one artboard; ←/→ within section, ↑/↓ across
 // sections, Esc or backdrop click to exit.
 // ─────────────────────────────────────────────────────────────
-function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
+function DCFocusOverlay({ entry, peers, getSectionNavigation }) {
   const ctx = React.useContext(DCCtx);
   const { sectionId, artboard } = entry;
-  const meta = sectionMeta[sectionId];
-  const peers = meta.slotIds;
   const aid = artboard.props.id ?? artboard.props.label;
   const idx = peers.indexOf(aid);
-  const secIdx = sectionOrder.indexOf(sectionId);
 
   const go = (d) => { const n = peers[(idx + d + peers.length) % peers.length]; if (n) ctx.setFocus(`${sectionId}/${n}`); };
   const goSection = (d) => {
+    // Other sections can update independently while this portal stays mounted.
+    const sections = getSectionNavigation();
+    const secIdx = sections.findIndex((sec) => sec.id === sectionId);
     // Sections whose artboards are all deleted have slotIds:[] — step past
     // them to the next non-empty section so ↑/↓ doesn't dead-end.
-    const n = sectionOrder.length;
+    const n = sections.length;
     for (let i = 1; i < n; i++) {
-      const ns = sectionOrder[(((secIdx + d * i) % n) + n) % n];
-      const first = sectionMeta[ns] && sectionMeta[ns].slotIds[0];
-      if (first) { ctx.setFocus(`${ns}/${first}`); return; }
+      const next = sections[(((secIdx + d * i) % n) + n) % n];
+      const first = next.slotIds[0];
+      if (first) { ctx.setFocus(`${next.id}/${first}`); return; }
     }
   };
 
@@ -1694,7 +1736,7 @@ function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
   // Portal to body so position:fixed is the real viewport regardless of any
   // transform on DesignCanvas's ancestors (including the canvas zoom itself).
   return ReactDOM.createPortal(
-    <div onClick={() => ctx.setFocus(null)}
+    <div onClick={(e) => { e.stopPropagation(); ctx.setFocus(null); }}
       onMouseMove={(e) => setChromeVisible(!(contentRef.current && contentRef.current.contains(e.target)))}
       onMouseLeave={() => setChromeVisible(false)}
       onWheel={(e) => { if (!(contentRef.current && contentRef.current.contains(e.target))) e.preventDefault(); }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.26",
+  "version": "0.1.27-beta.0",
   "description": "Miaoda registry (buildless runtime) — shadcn-style copy-in SDKs (globals + CDN-pinned, browser Babel) for buildless static HTML stacks",
   "type": "module",
   "files": [

package/scripts/design-canvas.js

@@ -2196,7 +2196,8 @@
       this.registry = {};
       this.sectionMeta = {};
       this.sectionOrder = [];
-      for (const sec of this.querySelectorAll(':scope > dc-section')) {
+      for (const sec of this.querySelectorAll('dc-section')) {
+        if (sec.closest('design-canvas') !== this) continue;
         const sid = sec.sectionId;
         if (!sid) continue;
         this.sectionOrder.push(sid);
@@ -2223,8 +2224,7 @@
       // This is a LOCAL correction, not a user action, so it must not broadcast: in a
       // Magic Share session one follower whose content lacks the artboard would
       // otherwise push focus:null back and kick the presenter out of the overlay.
-      // The React version has no equivalent broadcast — it simply declines to render
-      // the overlay for an unknown id and leaves its own state alone.
+      // Keep this correction local in both the React and custom-element versions.
       if (this.state.focus && !this.registry[this.state.focus]) {
         this._skipNextFocusEmit = true;
         this.setFocus(null);