@lark-apaas/coding-registry-buildless 0.1.2 → 0.1.3

package/components/design-canvas.jsx

@@ -17,7 +17,13 @@
 //
 // Artboards are static design frames, not scroll regions — never use
 // height: 100% + overflow: auto/scroll on inner elements; size each artboard
-// to fit its content (explicit pixel height, or let it grow).
+// to fit its content. Height behavior:
+//   • omit height  → the card grows to fit its content (no vertical clipping);
+//                    this is the right default for full pages / long screens.
+//   • height={N}   → a fixed N-px frame that CLIPS overflow (overflow:hidden) —
+//                    use only for deliberately cropped thumbnails (e.g. A/B tiles).
+// width is always a fixed frame width (default 260); content wider than it is
+// clipped, so set width to the real design width for full pages.
 //
 // When placing a device frame inside a DCArtboard, pass chromeless to
 // suppress the card chrome and let the artboard size to its content:
@@ -930,7 +936,12 @@ async function dcExport(node, w, h, name, kind) {
 }
 
 function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorder, onFocus, onDelete }) {
-  const { id: rawId, label: rawLabel, width = 260, height = 480, chromeless = false, children, style = {} } = artboard.props;
+  // Read height off the raw props (not a destructure default) so an *absent*
+  // height can opt into auto-grow while an explicit height={N} — even 480 —
+  // still means a fixed, content-clipping frame (thumbnail semantics).
+  const { id: rawId, label: rawLabel, width = 260, chromeless = false, children, style = {} } = artboard.props;
+  const hasHeight = artboard.props.height != null;
+  const height = hasHeight ? artboard.props.height : undefined;
   const id = rawId ?? rawLabel;
   const ref = React.useRef(null);
   const cardRef = React.useRef(null);
@@ -1056,8 +1067,17 @@ function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorde
         </div>
       </div>
       <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>}
+        style={{ ...(chromeless ? {} : {
+          width,
+          // explicit height → fixed frame (overflow:hidden clips a tall page);
+          // no height → the box grows to its content height. overflow:hidden
+          // stays either way so the rounded corners clip and content wider than
+          // the frame is trimmed to `width`; with auto height nothing is clipped
+          // vertically because the box is exactly the content height.
+          ...(hasHeight ? { height } : {}),
+          borderRadius: 4, border: '1px solid #DEE0E3', overflow: 'hidden', background: '#fff',
+        }), ...style }}>
+        {children || <div style={{ minHeight: 160, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb', fontSize: 13, fontFamily: DC.font }}>{id}</div>}
       </div>
     </div>
   );
@@ -1112,27 +1132,29 @@ function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
     return () => document.removeEventListener('keydown', k);
   });
 
-  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 { width = 260, chromeless = false, children } = artboard.props;
+  const hasHeight = artboard.props.height != null;
+  const height = hasHeight ? artboard.props.height : undefined;
+  // A fixed-frame card (non-chromeless WITH an explicit height) uses width/
+  // height directly. Otherwise the card has NO fixed height and its rendered
+  // size describes the content, not a frame — either a chromeless artboard
+  // (device frame / auto layout, both axes intrinsic) or a non-chromeless
+  // artboard that omitted height and grows to its content (frame `width`, auto
+  // height). Fitting such content to a default height would wrap it in an
+  // undersized clip box and magnify the clipped slice — so measure the real
+  // rendered size first and fit-scale to that, mirroring the canvas card.
+  const autoSize = chromeless || !hasHeight;
   const measureRef = React.useRef(null);
   const [nat, setNat] = React.useState(null); // { aid, w, h } measured natural size
   React.useLayoutEffect(() => {
-    if (!chromeless) return;
+    if (!autoSize) 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;
+  }, [aid, autoSize]);
+  const useMeasured = autoSize && nat && nat.aid === aid && nat.w > 0;
+  const needsMeasure = autoSize && !useMeasured;
   const cw = useMeasured ? nat.w : width;
-  const ch = useMeasured ? nat.h : height;
+  const ch = useMeasured ? nat.h : (height ?? 480);
 
   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); }, []);
@@ -1180,20 +1202,21 @@ function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
           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
+          // hidden until the auto-size 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. */}
+        {/* Auto-size cards render a hidden measure pass first, then re-render
+            scaled. Chromeless measures both axes (inline-block → intrinsic
+            size); a non-chromeless auto card keeps its frame `width` and lets
+            height run natural. Card chrome (bg / radius / shadow / overflow:auto)
+            is added only for a non-chromeless box — matching the canvas card —
+            giving it a scroll viewport for anything it still clips; 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' }
+          ? (chromeless ? { display: 'inline-block' } : { width })
           : { 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>}
+          {children || <div style={{ minHeight: 160, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb' }}>{aid}</div>}
         </div>
       </div>
 

package/package.json

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