@lark-apaas/coding-registry-buildless 0.1.2-alpha.0 → 0.1.2-beta.0

package/components/design-canvas.jsx

@@ -25,7 +25,7 @@
 /* END USAGE */
 
 const DC = {
-  bg: '#FFFFFF',
+  bg: '#FCFCFC',
   label: '#8F959E',
   title: '#1F2329',
   subtitle: '#646A73',
@@ -51,6 +51,11 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
     '.dc-card{isolation:isolate;transition:box-shadow .15s,transform .15s}',
     '.dc-card *{scrollbar-width:none}',
     '.dc-card *::-webkit-scrollbar{display:none}',
+    // Focus-overlay content isn't inside .dc-card, so the scrollbar-hiding
+    // rules above don't reach it — re-hide scrollbars for the scaled,
+    // scrollable content shown in DCFocusOverlay.
+    '.dc-focus-content *{scrollbar-width:none}',
+    '.dc-focus-content *::-webkit-scrollbar{display:none}',
     // Per-artboard header: grip + label on the left, delete/expand on the
     // right. Single flex row; when the artboard's on-screen width is too
     // narrow for both the label yields (ellipsis, then hidden entirely below
@@ -77,6 +82,11 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
     '.dc-btns{flex:0 0 auto;margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s}',
     '[data-dc-slot]:hover .dc-header,[data-dc-slot]:hover .dc-header .dc-editable{color:#646A73!important}',
     '[data-dc-slot]:hover .dc-btns,.dc-btns:has(.dc-menu){opacity:1}',
+    // On touch devices (no hover) the per-artboard action bar (kebab + expand)
+    // can't be reveal-on-hover and tends to stick visible after a tap — hide it
+    // entirely on mobile. The grip + label stay for per-screen context.
+    '@media (hover: none){.dc-btns{display:none}}',
+    '[data-dc-slot]:hover .dc-card.chromeless>*,  [data-dc-slot]:hover .dc-card:not(.chromeless){box-shadow:0 4px 8px -8px rgba(0, 0, 0, 0.06), 0 6px 12px 0 rgba(0, 0, 0, 0.04), 0 8px 24px 8px rgba(0, 0, 0, 0.04)}',
     '.dc-expand,.dc-kebab{width:22px;height:22px;border-radius:6px;border:none;cursor:pointer;padding:0;',
     '  background:transparent;color:#646A73;display:flex;align-items:center;justify-content:center;',
     '  font:inherit;transition:background .12s,color .12s}',
@@ -110,7 +120,7 @@ if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
     // constant-screen-size title would overflow into the (shrinking) world-
     // space gap and overlap the artboard headers at low zoom.
     '.dc-header{width:calc((100% + 4px) / var(--dc-inv-zoom,1));',
-    '  transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom left}',
+    '  transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom left;will-change:transform}',
     '.dc-sectionhead{zoom:var(--dc-inv-zoom,1)}',
     // On-canvas zoom control (bottom-right pill). Stays screen-fixed because
     // it renders outside worldRef. z-index 50 keeps it above world content but
@@ -153,12 +163,22 @@ function dcFlatten(children) {
 // .design-canvas.state.json
 // sidecar next to the HTML. Reads go via plain fetch() so the saved
 // arrangement is visible anywhere the HTML + sidecar are served together
-// (miaoda preview, direct link, downloaded zip). Writes go through the
-// host's window.miaoda bridge — editing requires the miaoda runtime.
+// (miaoda preview, direct link, downloaded zip). Writes post the sidecar
+// content up to the miaoda host via postMessage — editing requires the miaoda runtime.
 // Focus is ephemeral.
 // ─────────────────────────────────────────────────────────────
 const DC_STATE_FILE = '.design-canvas.state.json';
 
+// Persist a sidecar file back to the host.
+function miaodaWriteFile(path, content) {
+  try {
+    window.parent.postMessage({ type: 'miaoda:bridge:write-file', path: path, content: content }, '*');
+  } catch (e) {
+    /* no parent — ignore */
+  }
+  return Promise.resolve();
+}
+
 function DesignCanvas({ children, minScale, maxScale, style }) {
   const [state, setState] = React.useState({ sections: {}, focus: null });
   // Hold rendering until the sidecar read settles so the saved order/titles
@@ -189,7 +209,7 @@ function DesignCanvas({ children, minScale, maxScale, style }) {
     if (!didRead.current) return;
     if (skipNextWrite.current) { skipNextWrite.current = false; return; }
     const t = setTimeout(() => {
-      window.miaoda?.writeFile(DC_STATE_FILE, JSON.stringify({ sections: state.sections })).catch(() => {});
+      miaodaWriteFile(DC_STATE_FILE, JSON.stringify({ sections: state.sections })).catch(() => {});
     }, 250);
     return () => clearTimeout(t);
   }, [state.sections]);
@@ -364,10 +384,10 @@ function DCZoomControl({ scalePct, minScale, maxScale, onZoomTo }) {
 // DCViewport — transform-based pan/zoom (internal)
 //
 // Input mapping (Figma-style):
-//   • trackpad pinch  → zoom   (ctrlKey wheel; Safari gesture* events)
-//   • trackpad scroll → pan    (two-finger)
-//   • mouse wheel     → zoom   (notched; distinguished from trackpad scroll)
-//   • middle-drag / primary-drag-on-bg → pan
+//   • trackpad pinch                     → zoom  (ctrlKey wheel; Safari gesture* events)
+//   • Ctrl/⌘ + wheel                     → zoom
+//   • trackpad two-finger / mouse wheel  → pan
+//   • middle-drag / primary-drag-on-bg   → pan
 //
 // Transform state lives in a ref and is written straight to the DOM
 // (translate3d + will-change) so wheel ticks don't go through React —
@@ -376,8 +396,9 @@ function DCZoomControl({ scalePct, minScale, maxScale, onZoomTo }) {
 function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
   const vpRef = React.useRef(null);
   const worldRef = React.useRef(null);
-  // Default to 50% so a fresh canvas opens zoomed-out enough to see the
-  // overall layout; localStorage restore (below) overrides this on revisits.
+  // Pre-fit fallback scale. A fresh canvas is reframed by the first-visit fit
+  // (below) once content mounts; localStorage restore overrides this on
+  // revisits. This 50% only shows in the gap before either runs.
   const tf = React.useRef({ x: 0, y: 0, scale: 0.5 });
   // Persist viewport across reloads so the user lands back where they were
   // after an agent edit or browser refresh. The sandbox origin is already
@@ -425,6 +446,11 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     }, 200);
   }, [tfKey]);
 
+  // Whether the mount-time restore found a saved viewport — when it did, the
+  // first-visit fit below is skipped so revisits keep the user's own view.
+  const restoredView = React.useRef(false);
+  const didFit = React.useRef(false);
+
   React.useLayoutEffect(() => {
     const flush = () => {
       clearTimeout(saveT.current);
@@ -434,10 +460,12 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
       const s = JSON.parse(localStorage.getItem(tfKey) || 'null');
       if (s && Number.isFinite(s.x) && Number.isFinite(s.y) && Number.isFinite(s.scale)) {
         tf.current = { x: s.x, y: s.y, scale: Math.min(maxScale, Math.max(minScale, s.scale)) };
+        restoredView.current = true;
       }
     } catch {}
     // Apply before first paint whether we restored or fell back to the default
-    // (scale 0.5), so the canvas never flashes 100% before snapping to 50%.
+    // (scale 0.5) so the canvas never flashes at the wrong zoom. On a fresh
+    // canvas the first-visit fit (below) reframes once content mounts.
     apply();
     // Flush on pagehide and unmount so a reload within the 200ms debounce
     // window doesn't drop the last pan/zoom.
@@ -445,6 +473,73 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
     return () => { window.removeEventListener('pagehide', flush); flush(); };
   }, []);
 
+  // First-visit framing: once the (ready-gated) content mounts, scale + centre
+  // the whole canvas so every artboard fits with a ≥64px safe margin on all
+  // sides. Skipped when a saved viewport was restored. Runs as a layout effect
+  // on the commit that first paints content, so there's no un-framed flash.
+  React.useLayoutEffect(() => {
+    if (didFit.current || restoredView.current) return;
+    const vp = vpRef.current, world = worldRef.current;
+    if (!vp || !world) return;
+    const slots = world.querySelectorAll('[data-dc-slot]');
+    if (!slots.length) return; // content not mounted yet — wait for the ready commit
+    const heads = world.querySelectorAll('.dc-sectionhead');
+    const PAD = 64;
+
+    // Content bounding box in WORLD space at the currently applied transform.
+    // X extent from cards only (section-head blocks are full width and would
+    // over-report); Y from cards + titles so the top heading is kept in frame.
+    const measure = () => {
+      const vpr = vp.getBoundingClientRect();
+      const t = tf.current;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      slots.forEach((el) => {
+        const r = el.getBoundingClientRect();
+        minX = Math.min(minX, (r.left - vpr.left - t.x) / t.scale);
+        maxX = Math.max(maxX, (r.right - vpr.left - t.x) / t.scale);
+        minY = Math.min(minY, (r.top - vpr.top - t.y) / t.scale);
+        maxY = Math.max(maxY, (r.bottom - vpr.top - t.y) / t.scale);
+      });
+      heads.forEach((el) => {
+        const r = el.getBoundingClientRect();
+        minY = Math.min(minY, (r.top - vpr.top - t.y) / t.scale);
+        maxY = Math.max(maxY, (r.bottom - vpr.top - t.y) / t.scale);
+      });
+      return { vpr, minX, minY, w: maxX - minX, h: maxY - minY };
+    };
+
+    // Content SCREEN width is linear in scale (screenW = s·Wworld) and SCREEN
+    // height is affine (screenH = s·P + Q): titles and inter-section gaps
+    // counter-scale with zoom, so they hold a constant screen size while cards
+    // scale. Sample two scales to solve the coefficients, then pick the largest
+    // scale that keeps both axes within the viewport minus a PAD margin — exact,
+    // no iterate-to-converge.
+    const s1 = tf.current.scale;
+    const m1 = measure();
+    if (!(m1.w > 0) || !(m1.h > 0)) { didFit.current = true; return; }
+    const s2 = s1 * 0.7;
+    tf.current.scale = s2; apply();
+    const m2 = measure();
+
+    const { vpr } = m1;
+    const avW = vpr.width - PAD * 2, avH = vpr.height - PAD * 2;
+    const Wworld = m1.w;                              // screenW / s, scale-invariant
+    const P = (s1 * m1.h - s2 * m2.h) / (s1 - s2);    // d(screenH)/d(scale)
+    const Q = s1 * m1.h - s1 * P;                     // constant screen-space part
+    const fitW = avW / Wworld;
+    const fitH = P > 0 ? (avH - Q) / P : Infinity;
+    const next = Math.max(minScale, Math.min(maxScale, Math.min(fitW, fitH)));
+
+    // Apply the solved scale, then centre using the extent measured AT that
+    // scale so margins come out symmetric (exactly PAD on the binding axis).
+    tf.current.scale = next; apply();
+    const mf = measure();
+    tf.current.x = (vpr.width - mf.w * next) / 2 - mf.minX * next;
+    tf.current.y = (vpr.height - mf.h * next) / 2 - mf.minY * next;
+    apply();
+    didFit.current = true;
+  });
+
   React.useEffect(() => {
     const vp = vpRef.current;
     if (!vp) return;
@@ -490,29 +585,36 @@ function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
       zoomAt(r.left + r.width / 2, r.top + r.height / 2, clamped / tf.current.scale);
     };
 
-    // Mouse-wheel vs trackpad-scroll heuristic. A physical wheel sends
-    // line-mode deltas (Firefox) or large integer pixel deltas with no X
-    // component (Chrome/Safari, typically multiples of 100/120). Trackpad
-    // two-finger scroll sends small/fractional pixel deltas, often with
-    // non-zero deltaX. ctrlKey is set by the browser for trackpad pinch.
-    const isMouseWheel = (e) =>
+    // Zoom is gated behind a modifier only: the browser sets ctrlKey for a
+    // trackpad pinch, and Ctrl/⌘ + wheel is the explicit mouse-zoom gesture.
+    // Every unmodified scroll — trackpad two-finger OR mouse wheel — pans.
+    // This is Figma's mapping, and it sidesteps a classification that can't be
+    // done reliably: a fast vertical trackpad flick's peak frame is identical
+    // to a mouse-wheel notch (deltaMode 0, deltaX 0, large integer deltaY), so
+    // routing pan-vs-zoom from a single wheel event misfires — a quick two-
+    // finger swipe used to jump into zoom. Keying off the modifier removes the
+    // ambiguity at the source.
+    //
+    // isNotchedWheel now only picks the zoom *step size* inside the zoom
+    // branch (fixed ratio for discrete wheels / Firefox line-mode, continuous
+    // exp for a smooth pinch) — misjudging it is a harmless granularity
+    // difference, never a pan↔zoom flip.
+    const isNotchedWheel = (e) =>
       e.deltaMode !== 0 ||
       (e.deltaX === 0 && Number.isInteger(e.deltaY) && Math.abs(e.deltaY) >= 40);
 
     const onWheel = (e) => {
       e.preventDefault();
       if (isGesturing) return; // Safari: gesture* owns the pinch — discard concurrent wheels
-      if ((e.ctrlKey || e.metaKey) && !isMouseWheel(e)) {
-        // trackpad pinch, or ctrl/cmd + smooth-scroll mouse. Notched
-        // wheels fall through to the fixed-step branch below.
-        zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.01));
-      } else if (isMouseWheel(e)) {
-        // notched mouse wheel — fixed-ratio step per click
-        zoomAt(e.clientX, e.clientY, Math.exp(-Math.sign(e.deltaY) * 0.18));
+      if (e.ctrlKey || e.metaKey) {
+        zoomAt(e.clientX, e.clientY,
+          isNotchedWheel(e) ? Math.exp(-Math.sign(e.deltaY) * 0.18) : Math.exp(-e.deltaY * 0.01));
       } else {
-        // trackpad two-finger scroll — pan
-        tf.current.x -= e.deltaX;
-        tf.current.y -= e.deltaY;
+        // Unmodified scroll pans. Normalize line/page deltas so a notched
+        // wheel moves a sensible distance instead of a few pixels per notch.
+        const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? vp.clientHeight : 1;
+        tf.current.x -= e.deltaX * unit;
+        tf.current.y -= e.deltaY * unit;
         apply();
       }
     };
@@ -848,7 +950,10 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
   const doExport = (kind) => {
     setMenuOpen(false);
     if (!cardRef.current) return;
-    const name = String(label || id || 'artboard').replace(/[^\w\s.-]+/g, '_');
+    // Unicode-aware sanitize: keep letters (incl. CJK/accented), digits,
+    // whitespace, dot/underscore/hyphen; collapse everything else to '_'.
+    // ASCII-only \w would strip Chinese labels down to a bare '_'.
+    const name = String(label || id || 'artboard').replace(/[^\p{L}\p{N}\s._-]+/gu, '_');
     const ew = cardRef.current.offsetWidth || width;
     const eh = cardRef.current.offsetHeight || height;
     dcExport(cardRef.current, ew, eh, name, kind)
@@ -926,7 +1031,7 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
           </div>
           <div className="dc-labeltext" onClick={onFocus} title="Click to focus">
             <DCEditable value={label} onChange={onRename} onClick={(e) => e.stopPropagation()}
-              style={{ fontSize: 14, fontWeight: 400, color: DC.label, lineHeight: '22px' }} />
+              style={{ fontSize: 14, fontWeight: 300, color: DC.label, lineHeight: '22px' }} />
           </div>
         </div>
         <div className="dc-btns">
@@ -950,8 +1055,8 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
           </button>
         </div>
       </div>
-      <div ref={cardRef} className="dc-card"
-        style={{ ...(chromeless ? {} : { width, height, borderRadius: 4, boxShadow: '0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06)', overflow: 'hidden', background: '#fff' }), ...style }}>
+      <div ref={cardRef} className={"dc-card" + (chromeless ? ' chromeless' : '')}
+        style={{ ...(chromeless ? {} : { width, height, borderRadius: 4, border: '1px solid #DEE0E3', overflow: 'hidden', background: '#fff' }), ...style }}>
         {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb', fontSize: 13, fontFamily: DC.font }}>{id}</div>}
       </div>
     </div>
@@ -978,7 +1083,6 @@ function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
 function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
   const ctx = React.useContext(DCCtx);
   const { sectionId, artboard } = entry;
-  const sec = ctx.section(sectionId);
   const meta = sectionMeta[sectionId];
   const peers = meta.slotIds;
   const aid = artboard.props.id ?? artboard.props.label;
@@ -1008,22 +1112,55 @@ function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
     return () => document.removeEventListener('keydown', k);
   });
 
-  const { width = 260, height = 480, children } = artboard.props;
+  const { width = 260, height = 480, chromeless = false, children } = artboard.props;
+  // width/height describe a fixed-frame (non-chromeless) card and are used
+  // directly for it. A chromeless artboard has NO fixed frame — its canvas
+  // card sizes to the content (a device frame, an auto-sized layout), so
+  // width/height fall back to 260×480 here and DON'T describe the content.
+  // Fitting to those defaults would wrap the real content (e.g. a 402×874
+  // device) in a 260×480 clip box and magnify the clipped slice. So for a
+  // chromeless artboard, measure the content's real rendered size first
+  // (unscaled, no clip) and fit-scale to that instead — mirroring how
+  // DCArtboardFrame lets a chromeless card size to its content.
+  const measureRef = React.useRef(null);
+  const [nat, setNat] = React.useState(null); // { aid, w, h } measured natural size
+  React.useLayoutEffect(() => {
+    if (!chromeless) return;
+    const el = measureRef.current;
+    if (el) setNat({ aid, w: el.offsetWidth, h: el.offsetHeight });
+  }, [aid, chromeless]);
+  const useMeasured = chromeless && nat && nat.aid === aid && nat.w > 0;
+  const needsMeasure = chromeless && !useMeasured;
+  const cw = useMeasured ? nat.w : width;
+  const ch = useMeasured ? nat.h : height;
+
   const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight });
   React.useEffect(() => { const r = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }, []);
-  const scale = Math.max(0.1, Math.min((vp.w - 200) / width, (vp.h - 260) / height, 2));
-
-  const [ddOpen, setDd] = React.useState(false);
+  // Fill the viewport leaving a safe margin — 70px left/right, 32px top/bottom.
+  // Take the smaller of the width-fit / height-fit ratios so the whole artboard
+  // stays fully visible; no upper cap, so small frames still fill the screen.
+  const MARGIN_X = 70;
+  const MARGIN_Y = 32;
+  const scale = Math.max(0.05, Math.min((vp.w - MARGIN_X * 2) / cw, (vp.h - MARGIN_Y * 2) / ch));
+
+  // Chrome (arrows / close / dots) is hidden until the cursor sits on the
+  // dark backdrop (anywhere that isn't the interactive content). Hiding also
+  // sets pointer-events:none so hidden controls are click-through and never
+  // block content interaction or a backdrop-click exit.
+  const [chromeVisible, setChromeVisible] = React.useState(false);
+  const contentRef = React.useRef(null);
+  const chromeStyle = { opacity: chromeVisible ? 1 : 0, pointerEvents: chromeVisible ? 'auto' : 'none' };
   const Arrow = ({ dir, onClick }) => (
     <button onClick={(e) => { e.stopPropagation(); onClick(); }}
-      style={{ position: 'absolute', top: '50%', [dir]: 28, transform: 'translateY(-50%)',
-        border: 'none', background: 'rgba(255,255,255,.08)', color: 'rgba(255,255,255,.9)',
-        width: 44, height: 44, borderRadius: 22, fontSize: 18, cursor: 'pointer',
-        display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background .15s' }}
+      style={{ position: 'absolute', top: '50%', [dir]: 20, transform: 'translateY(-50%)',
+        border: 'none', background: 'rgba(255,255,255,.08)', color: 'rgb(255,255,255)',
+        width: 36, height: 36, borderRadius: 22, fontSize: 16, cursor: 'pointer',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background .15s, opacity .18s ease', ...chromeStyle }}
       onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.18)')}
       onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.08)')}>
-      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-        <path d={dir === 'left' ? 'M11 3L5 9l6 6' : 'M7 3l6 6-6 6'} /></svg>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d={dir === 'left' ? 'M10.8619 1.52925C11.1223 1.7896 11.1223 2.21171 10.8619 2.47206L5.33333 8.00065L10.8619 13.5292C11.1223 13.7896 11.1223 14.2117 10.8619 14.4721C10.6016 14.7324 10.1795 14.7324 9.91912 14.4721L4.39052 8.94346C3.86983 8.42276 3.86982 7.57854 4.39052 7.05784L9.91912 1.52925C10.1795 1.2689 10.6016 1.2689 10.8619 1.52925Z' : 'M5.13765 14.4721C4.8773 14.2117 4.8773 13.7896 5.13765 13.5292L10.6662 8.00065L5.13765 2.47206C4.8773 2.21171 4.8773 1.7896 5.13764 1.52925C5.39799 1.2689 5.8201 1.2689 6.08045 1.52925L11.609 7.05784C12.1297 7.57854 12.1298 8.42276 11.6091 8.94346L6.08045 14.4721C5.82011 14.7324 5.398 14.7324 5.13765 14.4721Z'} fill="currentColor" /></svg>
     </button>
   );
 
@@ -1031,68 +1168,55 @@ function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
   // transform on DesignCanvas's ancestors (including the canvas zoom itself).
   return ReactDOM.createPortal(
     <div onClick={() => ctx.setFocus(null)}
-      onWheel={(e) => e.preventDefault()}
-      style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(24,20,16,.6)', backdropFilter: 'blur(14px)',
-        fontFamily: DC.font, color: '#fff' }}>
-
-      {/* top bar: section dropdown (left) · close (right) */}
-      <div onClick={(e) => e.stopPropagation()}
-        style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, display: 'flex', alignItems: 'flex-start', padding: '16px 20px 0', gap: 16 }}>
-        <div style={{ position: 'relative' }}>
-          <button onClick={() => setDd((o) => !o)}
-            style={{ border: 'none', background: 'transparent', color: '#fff', cursor: 'pointer', padding: '6px 8px',
-              borderRadius: 6, textAlign: 'left', fontFamily: 'inherit' }}>
-            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }}>{meta.title}</span>
-              <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{ opacity: .7 }}><path d="M2 4l3.5 3.5L9 4"/></svg>
-            </span>
-            {meta.subtitle && <span style={{ display: 'block', fontSize: 13, opacity: .6, fontWeight: 400, marginTop: 2 }}>{meta.subtitle}</span>}
-          </button>
-          {ddOpen && (
-            <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, background: '#2a251f', borderRadius: 8,
-              boxShadow: '0 8px 32px rgba(0,0,0,.4)', padding: 4, minWidth: 200, zIndex: 10 }}>
-              {sectionOrder.filter((sid) => sectionMeta[sid].slotIds.length).map((sid) => (
-                <button key={sid} onClick={() => { setDd(false); const f = sectionMeta[sid].slotIds[0]; if (f) ctx.setFocus(`${sid}/${f}`); }}
-                  style={{ display: 'block', width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
-                    background: sid === sectionId ? 'rgba(255,255,255,.1)' : 'transparent', color: '#fff',
-                    padding: '8px 12px', borderRadius: 5, fontSize: 14, fontWeight: sid === sectionId ? 600 : 400, fontFamily: 'inherit' }}>
-                  {sectionMeta[sid].title}
-                </button>
-              ))}
-            </div>
-          )}
+      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(); }}
+      style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(0,0,0,.8)', backdropFilter: 'blur(4px)',
+        fontFamily: DC.font, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+
+      {/* content fills the viewport to its safe margin (70px left/right, 32px
+          top/bottom), centered — interactive & scrollable. Only the content
+          stops propagation, so any backdrop click (the dark margin around it)
+          exits focus. */}
+      <div ref={contentRef} className="dc-focus-content" onClick={(e) => e.stopPropagation()}
+        style={{ width: cw * scale, height: ch * scale, position: 'relative',
+          // hidden until the (chromeless) measure pass below reports the real size
+          visibility: needsMeasure ? 'hidden' : 'visible' }}>
+        {/* Chromeless renders a hidden measure pass first (inline-block →
+            natural size for offsetWidth/Height), then re-renders scaled. Card
+            chrome (bg / radius / shadow / overflow:auto) is added only for a
+            fixed-frame box — matching the canvas card — and gives that box a
+            scroll viewport so content it clips (taller/wider than the frame) is
+            reachable; scrollbars are hidden by the .dc-focus-content CSS. A
+            chromeless box carries none of it, so its content owns its look. */}
+        <div ref={measureRef} style={needsMeasure
+          ? { display: 'inline-block' }
+          : { width: cw, height: ch, transform: `scale(${scale})`, transformOrigin: 'top left',
+            ...(chromeless ? {} : { background: '#fff', borderRadius: 2, overflow: 'auto', boxShadow: '0 20px 80px rgba(0,0,0,.4)' }) }}>
+          {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb' }}>{aid}</div>}
         </div>
-        <div style={{ flex: 1 }} />
-        <button onClick={() => ctx.setFocus(null)}
-          onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.12)')}
-          onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
-          style={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,.7)', width: 32, height: 32,
-            borderRadius: 16, fontSize: 20, cursor: 'pointer', lineHeight: 1, transition: 'background .12s' }}>×</button>
       </div>
 
-      {/* card centered, label + index below — only the card itself stops
-          propagation so any backdrop click (including the margins around
-          the card) exits focus */}
-      <div
-        style={{ position: 'absolute', top: 64, bottom: 56, left: 100, right: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
-        <div onClick={(e) => e.stopPropagation()} style={{ width: width * scale, height: height * scale, position: 'relative' }}>
-          <div style={{ width, height, transform: `scale(${scale})`, transformOrigin: 'top left', background: '#fff', borderRadius: 2, overflow: 'hidden',
-            boxShadow: '0 20px 80px rgba(0,0,0,.4)' }}>
-            {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb' }}>{aid}</div>}
-          </div>
-        </div>
-        <div onClick={(e) => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 500, opacity: .85, textAlign: 'center' }}>
-          {(sec.labels || {})[aid] ?? artboard.props.label}
-          <span style={{ opacity: .5, marginLeft: 10, fontVariantNumeric: 'tabular-nums' }}>{idx + 1} / {peers.length}</span>
-        </div>
-      </div>
+      {/* close — top-right, revealed on backdrop hover */}
+      <button onClick={() => ctx.setFocus(null)}
+        onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.18)')}
+        onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.08)')}
+        style={{ position: 'absolute', top: 20, right: 24, border: 'none', background: 'rgba(255,255,255,.08)', color: 'rgb(255,255,255)',
+          width: 36, height: 36, borderRadius: 22, fontSize: 16, cursor: 'pointer', lineHeight: 1,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          transition: 'background .12s, opacity .18s ease', ...chromeStyle }}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.4713 13.4722C13.7301 13.2134 13.732 12.7957 13.4732 12.5369L8.93693 8.00064L13.4731 3.46444C13.7319 3.20562 13.7301 2.78788 13.4713 2.52907C13.2125 2.27026 12.7947 2.26838 12.5359 2.5272C12.2771 2.78601 7.99969 7.0634 7.99969 7.0634L3.46345 2.52716C3.20464 2.26835 2.7869 2.27022 2.52809 2.52903C2.26928 2.78784 2.2674 3.20558 2.52621 3.4644L7.06246 8.00064L2.52618 12.5369C2.26737 12.7957 2.26924 13.2135 2.52806 13.4723C2.78687 13.7311 3.20461 13.733 3.46342 13.4742L7.99969 8.93788L12.5359 13.4741C12.7947 13.7329 13.2125 13.731 13.4713 13.4722Z" fill="currentColor"/>
+          </svg>
+        </button>
 
       <Arrow dir="left" onClick={() => go(-1)} />
       <Arrow dir="right" onClick={() => go(1)} />
 
-      {/* dots */}
+      {/* dots — revealed on backdrop hover */}
       <div onClick={(e) => e.stopPropagation()}
-        style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8 }}>
+        style={{ position: 'absolute', bottom: 13, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8,
+          transition: 'opacity .18s ease', ...chromeStyle }}>
         {peers.map((p, i) => (
           <button key={p} onClick={() => ctx.setFocus(`${sectionId}/${p}`)}
             style={{ border: 'none', padding: 0, cursor: 'pointer', width: 6, height: 6, borderRadius: 3,

package/components/ios-frame.jsx

@@ -12,10 +12,10 @@
 //   <IOSDevice dark keyboard>…</IOSDevice>
 //   <IOSDevice width={390} height={844}>…</IOSDevice>   // smaller device size
 //
-// Safe-area CSS variables available inside <IOSDevice>:
-//   --ios-safe-top    top inset (Dynamic Island + status bar)
-//   --ios-safe-bottom bottom inset (home indicator)
-// Content that doesn't account for these will overlap the device chrome.
+// Safe areas — REQUIRED on every screen. The status bar (top) and home
+// indicator (bottom) float OVER your content; inset it or it overlaps them.
+//   --ios-safe-top     top inset (Dynamic Island + status bar)
+//   --ios-safe-bottom  bottom inset (home indicator)
 /* END USAGE */
 
 // ─────────────────────────────────────────────────────────────
@@ -126,7 +126,7 @@ function IOSDevice({
     <div style={{
       width, height, borderRadius: 48, overflow: 'hidden',
       position: 'relative', background: dark ? '#000' : '#F2F2F7',
-      boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
+      border: '1px solid #DEE0E3',
       fontFamily: '-apple-system, system-ui, sans-serif',
       WebkitFontSmoothing: 'antialiased',
       '--ios-safe-top': '62px',

package/components/macos-window.jsx

@@ -176,7 +176,7 @@ function MacWindow({
     <div style={{
       width, height, borderRadius: 26, overflow: 'hidden',
       background: '#fff',
-      boxShadow: '0 0 0 1px rgba(0,0,0,0.23), 0 16px 48px rgba(0,0,0,0.35)',
+      border: '1px solid #DEE0E3',
       display: 'flex', position: 'relative',
       fontFamily: MAC_FONT,
     }}>

package/components/tweaks-panel.jsx

@@ -19,6 +19,13 @@
 //     "dark": false
 //   }/*EDITMODE-END*/;
 //
+//   TWEAK_DEFAULTS must live inline in the HTML file — in a <script type="text/babel"> block,
+//   not in a separate .jsx/.js loaded via <script src>. That in-HTML block is the region the
+//   host rewrites when the user adjusts a tweak, so keep it wrapped in the /*EDITMODE-BEGIN*/ …
+//   /*EDITMODE-END*/ markers and the object between them valid JSON — double-quoted keys, no
+//   trailing commas, no comments or expressions — even after you rename the keys. Move it out
+//   of the HTML, strip the markers, or use a non-JSON body and tweak edits silently stop persisting.
+//
 //   function App() {
 //     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
 //     return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-registry-buildless",
-  "version": "0.1.2-alpha.0",
+  "version": "0.1.2-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": [