@lark-apaas/coding-registry-buildless 0.1.25 → 0.1.26

package/components/animations.jsx

@@ -31,9 +31,9 @@
 // it). Inlined per script rather than shipped as its own registry file:
 // call sites use the global bare, so inlining is what guarantees
 // definition-before-use — a separate copy-in file would add a whole "SDK
-// copied but <script> tag missing" failure mode. Keep this block identical
-// across deck-stage.js / design-canvas.jsx / animations.jsx — same
-// convention as the mobile-UA regex. Two halves of
+// copied but <script> tag missing" failure mode. Keep every inlined copy
+// identical (find them by this block's heading) — same convention as the
+// mobile-UA regex. Two halves of
 // the 妙享 (Magic Share) mirror protocol:
 //   emit(msg, opts)   — stamps msg.__mirror so the host relay treats the
 //                       message as a broadcastable UI-state snapshot;

package/components/design-canvas.jsx

@@ -101,9 +101,9 @@ function dcFitTransformToBounds(bounds, vp, minScale, maxScale) {
 // it). Inlined per script rather than shipped as its own registry file:
 // call sites use the global bare, so inlining is what guarantees
 // definition-before-use — a separate copy-in file would add a whole "SDK
-// copied but <script> tag missing" failure mode. Keep this block identical
-// across deck-stage.js / design-canvas.jsx / animations.jsx — same
-// convention as the mobile-UA regex. Two halves of
+// copied but <script> tag missing" failure mode. Keep every inlined copy
+// identical (find them by this block's heading) — same convention as the
+// mobile-UA regex. Two halves of
 // the 妙享 (Magic Share) mirror protocol:
 //   emit(msg, opts)   — stamps msg.__mirror so the host relay treats the
 //                       message as a broadcastable UI-state snapshot;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "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/card-stage.js

@@ -80,6 +80,76 @@
 /* END USAGE */
 
 (() => {
+  // ── Mirror sync singleton ──────────────────────────────────────────────────
+  // Shared by every buildless script on the page (first one to load defines
+  // it). Inlined per script rather than shipped as its own registry file:
+  // call sites use the global bare, so inlining is what guarantees
+  // definition-before-use — a separate copy-in file would add a whole "SDK
+  // copied but <script> tag missing" failure mode. Keep every inlined copy
+  // identical (find them by this block's heading) — same convention as the
+  // mobile-UA regex. Two halves of
+  // the 妙享 (Magic Share) mirror protocol:
+  //   emit(msg, opts)   — stamps msg.__mirror so the host relay treats the
+  //                       message as a broadcastable UI-state snapshot;
+  //                       unstamped messages are never mirrored. opts.key is
+  //                       the sync channel (maps to the share SDK's
+  //                       actionType): late joiners receive only the LATEST
+  //                       snapshot per key, so states that overwrite each
+  //                       other must share one key. opts.throttle is the
+  //                       suggested host-side coalescing interval in ms —
+  //                       snapshots make dropped intermediate frames
+  //                       lossless, so hint it on any continuous gesture.
+  //   onApply(type, fn) — replay entry for a message type this script itself
+  //                       emits. The host sends {type:'miaoda:mirror:apply',
+  //                       uuid, message, latencyMs} and needs
+  //                       {type:'miaoda:mirror:apply-result', uuid, result}
+  //                       back to drive the SDK's retry: result.type
+  //                       'failed' means retry (use it for transient
+  //                       not-ready states), 'ignored' is terminal (not
+  //                       applicable / bad payload), 'applied' is success.
+  //                       Unregistered types stay silent on purpose —
+  //                       another script on the page may own them, and the
+  //                       host's timeout is the backstop.
+  if (!window.__miaodaMirror) {
+    const appliers = new Map(); // message.type -> Set<fn>
+    window.__miaodaMirror = {
+      emit(msg, opts) {
+        try { window.parent.postMessage(Object.assign({}, msg, { __mirror: Object.assign({ v: 1 }, opts) }), '*'); } catch (e) {}
+      },
+      onApply(type, fn) {
+        if (!appliers.has(type)) appliers.set(type, new Set());
+        appliers.get(type).add(fn);
+        return () => { const s = appliers.get(type); if (s) s.delete(fn); };
+      },
+    };
+    window.addEventListener('message', async (e) => {
+      // Replays are accepted from the host frame only — generated pages embed
+      // arbitrary third-party iframes, any of which could otherwise forge an
+      // apply and drive state (plus its persisted side effects).
+      if (e.source !== window.parent) return;
+      const d = e.data;
+      if (!d || d.type !== 'miaoda:mirror:apply' || !d.message || !d.message.type) return;
+      const fns = appliers.get(d.message.type);
+      if (!fns || !fns.size) return;
+      // Merge across handlers (multi-instance case): one success is enough.
+      // Instances share a channel, so a sibling that can't apply yet (a lazily
+      // slotted second deck returning 'failed') must not poison an applied
+      // result into an SDK retry storm of no-ops — 'failed' only stands when
+      // nobody applied. Every handler still runs (no short-circuit) so each
+      // sibling instance gets the state.
+      let result = { type: 'ignored', reason: 'no applier result' };
+      for (const fn of Array.from(fns)) {
+        let r;
+        try { r = await fn(d.message, { latencyMs: d.latencyMs, uuid: d.uuid }); }
+        catch (err) { r = { type: 'failed', reason: String((err && err.message) || err) }; }
+        if (!r) continue;
+        if (r.type === 'applied') result = r;
+        else if (result.type !== 'applied' && (r.type === 'failed' || result.type !== 'failed')) result = r;
+      }
+      try { window.parent.postMessage({ type: 'miaoda:mirror:apply-result', uuid: d.uuid, result }, '*'); } catch (e2) {}
+    });
+  }
+
   /** Shorthands for the common frames; anything else is computed by parseRatio — this is not an allowlist */
   const RATIOS = {
     '3:4': [1080, 1440],
@@ -414,13 +484,20 @@
        (paging / zoom / copy / download).
        overflow:auto is what lets you scroll a card that has been zoomed past the viewport,
        and the holder centres with margin:auto — flex centring clips the top once the content
-       outgrows its container. */
+       outgrows its container.
+       The enlarged card must stay commentable while everything around it must not: the host
+       exempts a whole event path once any ancestor carries the chrome mark (csChrome), so
+       the mark cannot sit on .cs-focus. The dark ground is a separate scrim sibling carrying the mark,
+       and the holder is exactly the card's size — every empty pixel then belongs to the
+       scrim. pointer-events cannot carve that out instead: comment mode forces
+       pointer-events:auto on every element. */
     .cs-focus {
       position: fixed; inset: 0; z-index: 100;
-      background: rgba(16,17,20,.92);
       display: grid; overflow: auto;
+      padding: 56px 24px 104px; box-sizing: border-box;
     }
-    .cs-focus .cs-holder { margin: auto; padding: 56px 24px 104px; }
+    .cs-focus-scrim { position: fixed; inset: 0; background: rgba(16,17,20,.92); }
+    .cs-focus .cs-holder { position: relative; margin: auto; }
     .cs-focus .cs-holder > section { outline: none !important; box-shadow: none !important; }
     .cs-focus-close {
       position: fixed; top: 20px; right: 24px; z-index: 2;
@@ -1239,6 +1316,9 @@
     connectedCallback() {
       if (this.dataset.ready) return;
       this.dataset.ready = '1';
+      // Before init, not after: a late joiner's replay can land while init still awaits the
+      // sidecar, and only a registered applier can answer 'failed' to make the SDK retry
+      this.wireMirror();
       // The script is usually loaded synchronously from <head>, at which point the child
       // <section>s are not parsed yet — wait for the document before initialising
       if (document.readyState === 'loading') {
@@ -1364,10 +1444,15 @@
         // themselves; the "fit" button and the 0 key do not count as framing, since following
         // the viewport is exactly what they ask for.
         addEventListener('resize', () => {
+          if (this._remoteBounds) { this.fitBounds(this._remoteBounds); return; }
           if (this.userFramed) { this.placeHeads(); return; }
           this.fit();
         });
       }
+      this._ready = true;
+      // Baseline for late joiners (the viewport baseline already went out through fit)
+      this.emitStructure();
+      this.emitFocus();
       ready();
       void this.reportOverflow();
     }
@@ -1572,6 +1657,7 @@
           section.dataset.label = label.textContent.trim();
           this._labelOverrides[section.dataset.cardKey] = section.dataset.label;
           this.saveState();
+          this.emitStructure();
         });
         label.addEventListener('keydown', (e) => {
           if (e.key === 'Enter') { e.preventDefault(); label.blur(); }
@@ -1679,20 +1765,27 @@
     deleteCard(n) {
       const section = this.cardAt(n);
       if (!section) return;
-      if (this.focusIndex === n) this.closeFocus();
       const key = section.dataset.cardKey;
+      this.dropCard(section);
+      if (key && !this._hiddenKeys.includes(key)) this._hiddenKeys.push(key);
+      this.saveState();
+      this.emitStructure();
+      this.toast('已删除');
+    }
+
+    /** Takes a card off the page — shared by a local delete and a replayed one, which must not persist */
+    dropCard(section) {
+      if (this.focusIndex === Number(section.dataset.cardIndex)) this.closeFocus();
       const head = this.headFor && this.headFor.get(section);
       if (head) head.remove();
       if (this.headFor) this.headFor.delete(section);
       section.remove();
-      if (key && !this._hiddenKeys.includes(key)) this._hiddenKeys.push(key);
-      this.saveState();
 
       const cards = this.cards();
       cards.forEach((s, i) => { s.dataset.cardIndex = String(i + 1); });
-      this.heads = cards.map((s) => this.headFor.get(s));
+      if (this.headFor) this.heads = cards.map((s) => this.headFor.get(s));
       this.placeHeads();
-      this.toast('已删除');
+      if (csIsMobile) this.goToPage(this.page, false);
     }
 
     /**
@@ -1811,10 +1904,18 @@
 
       // A click on a card opens focus mode (but not when the click lands on a link, button or
       // the label)
+      // Releasing a text-selection drag still dispatches a click on the card. Opening focus
+      // there would bury the selection under the overlay before the host's selection-comment
+      // toolbar can use it, so a press that moved or left a selection is not a click.
+      let downX = 0, downY = 0;
+      this.addEventListener('pointerdown', (e) => { downX = e.clientX; downY = e.clientY; });
       this.addEventListener('click', (e) => {
         const section = e.target.closest('card-stage > section');
         if (!section) return;
         if (e.target.closest('a, button, input, textarea, [contenteditable]')) return;
+        if (Math.hypot(e.clientX - downX, e.clientY - downY) > 4) return;
+        const sel = getSelection();
+        if (sel && !sel.isCollapsed && section.contains(sel.anchorNode)) return;
         this.openFocus(Number(section.dataset.cardIndex));
       });
 
@@ -1849,6 +1950,9 @@
       this.style.transform = `translate(${this.panX}px, ${this.panY}px) scale(${this.zoom})`;
       this.syncZoomBar();
       this.placeHeads();
+      // Any local framing takes the view back from the presenter, resize included
+      if (!this._applyingMirror) this._remoteBounds = null;
+      this.emitViewport();
     }
 
     zoomAt(cx, cy, factor) {
@@ -1938,6 +2042,7 @@
         this._slideTimer = setTimeout(() => { this.style.transition = 'none'; }, 300);
       }
       this.syncDots();
+      this.emitFocus();
     }
 
     wireSwipe() {
@@ -2250,6 +2355,9 @@
       this.focusZoom = this.focusFit;
       this._focusFrame = frame;
       this._focusClone = clone;
+      // Mirrored by key, not index: indices shift under deletes, and the two ends may have
+      // applied a different set of them when a snapshot crosses
+      this._focusKey = src.dataset.cardKey;
 
       const close = document.createElement('button');
       close.className = 'cs-focus-close';
@@ -2299,9 +2407,20 @@
       };
       bar.append(prev, counter, next, sep(), zoomOut, this._focusPct, zoomIn, sep(), copy, download);
 
-      overlay.append(holder, close, bar);
+      const scrim = document.createElement('div');
+      scrim.className = 'cs-focus-scrim';
+      // The scrim is fixed, so its containing block is the viewport and a wheel over it would
+      // chain to the document rather than the overlay — scrolling a zoomed-in card from the
+      // dark margin is forwarded by hand. Ctrl/⌘ is left to bubble to the zoom handler below.
+      scrim.addEventListener('wheel', (e) => {
+        if (e.ctrlKey || e.metaKey) return;
+        e.preventDefault();
+        overlay.scrollBy(e.deltaX, e.deltaY);
+      }, { passive: false });
+
+      overlay.append(csChrome(scrim), holder, csChrome(close), csChrome(bar));
       overlay.addEventListener('click', (e) => {
-        if (e.target === overlay || e.target === holder) this.closeFocus();
+        if (e.target === overlay || e.target === scrim) this.closeFocus();
       });
       // Focus mode's right-click shares the canvas menu
       clone.addEventListener('contextmenu', (e) => {
@@ -2315,7 +2434,9 @@
         this.setFocusZoom(this.focusZoom * Math.exp(-e.deltaY / 300));
       }, { passive: false });
 
-      document.body.appendChild(csChrome(overlay));
+      overlay.addEventListener('scroll', () => this.emitFocus(), { passive: true });
+
+      document.body.appendChild(overlay);
       this.overlay = overlay;
       this.applyFocusZoom();
     }
@@ -2331,16 +2452,188 @@
       this._focusFrame.style.height = this.H * this.focusZoom + 'px';
       this._focusClone.style.transform = `scale(${this.focusZoom})`;
       if (this._focusPct) this._focusPct.textContent = Math.round(this.focusZoom * 100) + '%';
+      this.emitFocus();
     }
 
     closeFocus() {
       this.closeContextMenu();
+      const wasOpen = !!this.overlay;
       if (this.overlay) this.overlay.remove();
       this.overlay = null;
       this.focusIndex = null;
+      this._focusKey = null;
       this._focusFrame = null;
       this._focusClone = null;
       this._focusPct = null;
+      if (wasOpen) this.emitFocus();
+    }
+
+    // —— Magic Share (妙享) ——
+    // Three keys, because a late joiner receives only the latest snapshot per key: canvas
+    // framing, the focused card, and deletes / renames never overwrite one another.
+    // Every applier answers 'failed' until init has laid the cards out — that is transient and
+    // only 'failed' makes the SDK retry.
+    wireMirror() {
+      // Capture iframes (?thumbnail= product screenshots, ?export=1) sit out in both directions
+      // — same rule as design-canvas's dcCaptureMode
+      if (/[?&](_snthumb|thumbnail)=|[?&]export=1(&|$)/.test(location.search || '')) return;
+      this._mirrorOn = true;
+      // The applier registry is page-global and outlives this element: once it is taken off the
+      // page it must not answer for (or draw overlays on behalf of) the stage that replaced it
+      const on = (type, fn) => window.__miaodaMirror.onApply(type, (m) =>
+        this.isConnected ? fn(m) : { type: 'ignored', reason: 'stage detached' });
+      on('miaoda:cards:viewport-changed', (m) => this.applyMirrorViewport(m));
+      on('miaoda:cards:focus-changed', (m) => this.applyMirrorFocus(m));
+      on('miaoda:cards:structure-changed', (m) => this.applyMirrorStructure(m));
+    }
+
+    /** Runs a replay so that the emits it triggers are not echoed back as this end's own */
+    asMirror(fn) {
+      this._applyingMirror = true;
+      try { fn(); } finally { this._applyingMirror = false; }
+    }
+
+    // The transform is local screen geometry and cannot be replayed on another window size, so
+    // the world rectangle in view is mirrored instead and each end fits it into its own window
+    // — same scheme as design-canvas's viewport v2.
+    emitViewport() {
+      if (!this._mirrorOn || this._applyingMirror || csIsMobile || this._viewportT) return;
+      // Trailing 120ms: applyTransform runs at pointer rate; reading at fire time loses nothing
+      this._viewportT = setTimeout(() => {
+        this._viewportT = 0;
+        if (!this.isConnected) return;
+        const z = this.zoom;
+        window.__miaodaMirror.emit(
+          { type: 'miaoda:cards:viewport-changed', bounds: { x: -this.panX / z, y: -this.panY / z, width: innerWidth / z, height: innerHeight / z } },
+          { key: 'cards:viewport', throttle: 60 },
+        );
+      }, 120);
+    }
+
+    applyMirrorViewport(m) {
+      // Mobile pages card by card; it follows cards:focus instead
+      if (csIsMobile) return { type: 'ignored', reason: 'mobile follows the focused card' };
+      if (!this._ready) return { type: 'failed', reason: 'not laid out yet' };
+      const b = m.bounds;
+      if (!b || ![b.x, b.y, b.width, b.height].every(Number.isFinite) || !(b.width > 0) || !(b.height > 0)) {
+        return { type: 'ignored', reason: 'bad bounds' };
+      }
+      // A timer armed by a local gesture would fire with the presenter's view and echo it back
+      clearTimeout(this._viewportT);
+      this._viewportT = 0;
+      this.fitBounds(b);
+      return { type: 'applied' };
+    }
+
+    fitBounds(b) {
+      const z = Math.min(MAX_PCT / 100, Math.max(MIN_PCT / 100, Math.min(innerWidth / b.width, innerHeight / b.height)));
+      this.asMirror(() => {
+        this.zoom = z;
+        this.panX = innerWidth / 2 - (b.x + b.width / 2) * z;
+        // Top-anchored: a contain fit's spare height would otherwise become a per-device offset
+        this.panY = -b.y * z;
+        this.applyTransform();
+      });
+      // Kept so a resize on this end refits the presenter's view rather than auto-fitting
+      this._remoteBounds = b;
+    }
+
+    focusSnapshot() {
+      const r3 = (v) => Math.round(v * 1000) / 1000;
+      if (csIsMobile) {
+        const s = this.cardAt(this.page);
+        return { key: s ? s.dataset.cardKey : null, zoom: null, sx: 0, sy: 0 };
+      }
+      const ov = this.overlay;
+      if (!ov || !this._focusKey) return { key: null, zoom: null, sx: 0, sy: 0 };
+      const frac = (pos, range) => (range > 0 ? r3(pos / range) : 0);
+      return {
+        key: this._focusKey,
+        // Relative to the entry fit, not the absolute %: the fit follows each end's window, and
+        // what has to match is how much of the card is in view
+        zoom: r3(this.focusZoom / this.focusFit),
+        sx: frac(ov.scrollLeft, ov.scrollWidth - ov.clientWidth),
+        sy: frac(ov.scrollTop, ov.scrollHeight - ov.clientHeight),
+      };
+    }
+
+    emitFocus() {
+      if (!this._mirrorOn || this._applyingMirror || this._focusT) return;
+      this._focusT = setTimeout(() => {
+        this._focusT = 0;
+        if (!this.isConnected) return;
+        const snap = this.focusSnapshot();
+        // Scroll events from a replay arrive after the replay returns, so the flag cannot catch
+        // them; an unchanged snapshot is that echo
+        const sig = JSON.stringify(snap);
+        if (sig === this._focusSig) return;
+        this._focusSig = sig;
+        window.__miaodaMirror.emit({ type: 'miaoda:cards:focus-changed', ...snap }, { key: 'cards:focus', throttle: 60 });
+      }, 120);
+    }
+
+    applyMirrorFocus(m) {
+      if (!this._ready) return { type: 'failed', reason: 'not laid out yet' };
+      if (m.key !== null && typeof m.key !== 'string') return { type: 'ignored', reason: 'bad key' };
+      const section = m.key === null ? null : this.cards().find((s) => s.dataset.cardKey === m.key);
+      if (m.key !== null && !section) return { type: 'ignored', reason: 'card not present' };
+      clearTimeout(this._focusT);
+      this._focusT = 0;
+      this.asMirror(() => {
+        const n = section ? Number(section.dataset.cardIndex) : null;
+        if (csIsMobile) {
+          if (n) this.goToPage(n);
+          return;
+        }
+        if (!n) { this.closeFocus(); return; }
+        if (this.focusIndex !== n) this.openFocus(n);
+        if (Number.isFinite(m.zoom) && m.zoom > 0) this.setFocusZoom(this.focusFit * m.zoom);
+        const ov = this.overlay;
+        if (Number.isFinite(m.sx)) ov.scrollLeft = m.sx * (ov.scrollWidth - ov.clientWidth);
+        if (Number.isFinite(m.sy)) ov.scrollTop = m.sy * (ov.scrollHeight - ov.clientHeight);
+      });
+      this._focusSig = JSON.stringify(this.focusSnapshot());
+      return { type: 'applied' };
+    }
+
+    emitStructure() {
+      if (!this._mirrorOn || this._applyingMirror) return;
+      window.__miaodaMirror.emit(
+        { type: 'miaoda:cards:structure-changed', srcKey: this.srcKey, hidden: this._hiddenKeys.slice(), labels: { ...this._labelOverrides } },
+        { key: 'cards:structure' },
+      );
+    }
+
+    applyMirrorStructure(m) {
+      if (!this._ready) return { type: 'failed', reason: 'not laid out yet' };
+      if (typeof m.srcKey !== 'string' || !Array.isArray(m.hidden) || !m.labels || typeof m.labels !== 'object') {
+        return { type: 'ignored', reason: 'malformed structure' };
+      }
+      // Built from another version of the source (an agent edit one end has not reloaded): card
+      // keys no longer line up, same rule the sidecar follows
+      if (m.srcKey !== this.srcKey) return { type: 'ignored', reason: 'source mismatch' };
+      // Replayed state is the presenter's, never persisted through this end's write bridge — but
+      // it is folded into this end's state, or this end's next emit (say, a rename) would carry
+      // the pre-replay hidden list and overwrite the latest snapshot late joiners receive.
+      // Hidden is a union: a dropped section cannot come back.
+      for (const key of m.hidden) {
+        if (typeof key === 'string' && !this._hiddenKeys.includes(key)) this._hiddenKeys.push(key);
+      }
+      for (const [key, label] of Object.entries(m.labels)) {
+        if (typeof label === 'string') this._labelOverrides[key] = label;
+      }
+      this.asMirror(() => {
+        for (const section of this.cards()) {
+          const key = section.dataset.cardKey;
+          if (this._hiddenKeys.includes(key)) { this.dropCard(section); continue; }
+          const label = m.labels[key];
+          if (typeof label !== 'string' || label === section.dataset.label) continue;
+          section.dataset.label = label;
+          const head = this.headFor && this.headFor.get(section);
+          if (head) head.querySelector('.cs-label').textContent = label;
+        }
+      });
+      return { type: 'applied' };
     }
 
   }

package/scripts/deck-stage.js

@@ -139,9 +139,9 @@
   // it). Inlined per script rather than shipped as its own registry file:
   // call sites use the global bare, so inlining is what guarantees
   // definition-before-use — a separate copy-in file would add a whole "SDK
-  // copied but <script> tag missing" failure mode. Keep this block identical
-  // across deck-stage.js / design-canvas.jsx / animations.jsx — same
-  // convention as the mobile-UA regex. Two halves of
+  // copied but <script> tag missing" failure mode. Keep every inlined copy
+  // identical (find them by this block's heading) — same convention as the
+  // mobile-UA regex. Two halves of
   // the 妙享 (Magic Share) mirror protocol:
   //   emit(msg, opts)   — stamps msg.__mirror so the host relay treats the
   //                       message as a broadcastable UI-state snapshot;