@vectoriox/iox-builder 7.0.1 → 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,7 +10674,7 @@ 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. */