@vectoriox/iox-builder 7.0.0 → 7.0.2

package/fesm2022/vectoriox-iox-builder.mjs

@@ -5076,13 +5076,16 @@ class RenderDirective {
         // template node is selectable/editable. Skip overlay registration + interaction
         // wiring for them so they can't be hovered, selected, or edited on the canvas.
         const isPreviewClone = !!node.__previewClone;
+        // WRAPPER-COLLAPSE (opt-in via ioxDragSourceId): the HOST is the flex/grid item, so it carries
+        // `iox-outer-{id}` (margin, width, grid placement) IN ADDITION to `iox-node-{id}` (visual) — one
+        // element, like the engine. A display-only clone (a repeater row, a design specimen) is laid out
+        // the same way: it only skips drag and selection below. Without the class a clone lost every
+        // OUTER prop — its width, margin and grid placement — on the canvas alone.
+        if (nativeEl && this.ioxDragSourceId != null && cssId)
+            nativeEl.classList.add(`iox-outer-${cssId}`);
         if (nativeEl && !isPreviewClone) {
-            // WRAPPER-COLLAPSE (opt-in via ioxDragSourceId): the HOST is the flex/grid item, so it
-            // carries `iox-outer-{id}` (margin/width) IN ADDITION to `iox-node-{id}` (visual) — one
-            // element, like the engine — and drag is registered on it (the wrapper is gone). The
-            // StyleRegistry's split still works: both classes are on this one host.
+            // Drag is registered on the collapsed host (the wrapper is gone).
             if (this.ioxDragSourceId != null && cssId) {
-                nativeEl.classList.add(`iox-outer-${cssId}`);
                 const sourceId = this.ioxDragSourceId;
                 this.dragEngine.registerDraggable(nativeEl, () => ({
                     type: 'internal',
@@ -10634,12 +10637,18 @@ function wearing(node, styleId) {
     applyElementStyle(node, styleId);
     return node;
 }
+/** A Text node: a new Text wears `body` and the palette's 10px padding; a specimen's text sits flush. */
 function text(content, createConfig, styleId, styles = {}) {
     const node = textNode(content, createConfig);
     if (styleId)
         wearing(node, styleId);
-    return styled(node, styles);
+    return styled(node, { padding: '0', margin: '0', ...styles });
 }
+/** A button's label takes the BUTTON's type (the style's size, weight, case, tracking) — not body's. */
+const BUTTON_LABEL = {
+    color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit',
+    letterSpacing: 'inherit', textTransform: 'inherit',
+};
 function withChildren(node, children) {
     if (!node || children.some(c => !c))
         return null;
@@ -10665,10 +10674,18 @@ function button(styleId, label, createConfig, styles = {}) {
         return null;
     setTrait(btn, 'tag', 'button');
     styled(btn, styles);
-    return withChildren(btn, [text(label, createConfig, undefined, { color: 'inherit' })]);
+    return withChildren(btn, [text(label, createConfig, undefined, BUTTON_LABEL)]);
+}
+/** A Container sized by its content: the palette Container's 200px drop-zone min-height is canvas
+ *  furniture, and a specimen has no drop zone. */
+function box(createConfig, styleId) {
+    const node = createConfig('Container');
+    if (styleId)
+        wearing(node, styleId);
+    return styled(node, { minHeight: '0' });
 }
 function boxed(styleId, createConfig, children, styles) {
-    return withChildren(styled(wearing(createConfig('Container'), styleId), styles), children);
+    return withChildren(styled(box(createConfig, styleId), styles), children);
 }
 /**
  * The specimen for one element style (Board 6, Element styles tab). Null for an unknown id or a
@@ -10749,8 +10766,8 @@ function layoutSpecimen(id, createConfig, copy) {
  * so the tile wears whichever look's tokens its wrapper declares.
  */
 function buildFlavorSpecimen(name, createConfig, copy) {
-    const dots = styled(createConfig('Container'), { display: 'flex', gap: '4px', alignSelf: 'start', width: 'auto' });
-    const dotNodes = TILE_DOTS.map(token => styled(createConfig('Container'), {
+    const dots = styled(box(createConfig), { display: 'flex', gap: '4px', alignSelf: 'start', width: 'auto' });
+    const dotNodes = TILE_DOTS.map(token => styled(box(createConfig), {
         width: '14px', height: '14px', borderRadius: '50%', backgroundColor: `var(--iox-${token})`,
         borderWidth: '1px', borderStyle: 'solid', borderColor: 'rgba(127, 127, 127, 0.25)', flexShrink: '0',
     }));
@@ -10764,7 +10781,7 @@ function buildFlavorSpecimen(name, createConfig, copy) {
         gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         gap: '10px', padding: '7px 9px', width: 'auto',
     });
-    const root = styled(createConfig('Container'), {
+    const root = styled(box(createConfig), {
         display: 'grid', gridTemplateColumns: '1fr auto', gap: '6px', alignContent: 'space-between',
         height: '96px', padding: '10px', width: '100%',
     });