@dmitryvim/form-builder 0.3.3 → 0.4.0

package/dist/esm/index.js

@@ -465,20 +465,60 @@ function ensureThemingHooks(doc) {
   color: #ffffff;
   border-color: var(--fb-primary-color);
 }
+/* \u2500\u2500\u2500 Row layout: flex-wrap container with per-child width tokens \u2500\u2500\u2500
+   Replaces the older Tailwind \`space-y-2\` class. Children without
+   data-fb-width (or width="full") take 100% basis \u2192 forced wrap \u2192 behaves
+   like a vertical stack. Mixed widths sit side-by-side in the same row. */
+.fb-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fb-row-gap, 0.25rem);
+  align-items: flex-start;
+}
+.fb-row > [data-fb-width="full"],
+.fb-row > :not([data-fb-width]) { flex: 0 0 100%; min-width: 0; }
+.fb-row > [data-fb-width="1/2"] { flex: 0 0 calc(50% - var(--fb-row-gap, 0.25rem) / 2); min-width: 0; }
+.fb-row > [data-fb-width="1/3"] { flex: 0 0 calc(33.333% - var(--fb-row-gap, 0.25rem) * 2 / 3); min-width: 0; }
+.fb-row > [data-fb-width="2/3"] { flex: 0 0 calc(66.666% - var(--fb-row-gap, 0.25rem) / 3); min-width: 0; }
+/* \u2500\u2500\u2500 Density tokens: re-bind --fb-input-padding-* and --fb-font-size at
+   the wrapper level so every component that reads those vars (text, textarea,
+   select, number, colour, switcher, file) picks the size up via cascade. md
+   uses the defaults set in theme.ts (2px / 8px / 14px). The scale primarily
+   varies font-size; vertical padding stays close to md so an "lg" heading
+   field does not visually break the form's row rhythm \u2014 only the typography
+   announces "this is bigger". Picaz theme overrides padding directly for
+   its own density, independent of this scale. */
+/* size-token side-effects on file tiles: --fb-file-wide-min controls the
+   single-file empty dropzone height, --fb-file-zone-min controls the inner
+   upload/library zones. Both read in src/components/file/styles.ts. */
+.fb-size-xs { --fb-input-padding-y: 1px;  --fb-input-padding-x: 6px;  --fb-font-size: 12px; --fb-font-size-small: 10px; --fb-line-height: 1.25; --fb-file-wide-min: 64px; --fb-file-zone-min: 48px; --fb-file-zone-padding: 6px; }
+.fb-size-sm { --fb-input-padding-y: 2px;  --fb-input-padding-x: 6px;  --fb-font-size: 13px; --fb-font-size-small: 11px; --fb-line-height: 1.35; --fb-file-wide-min: 80px; --fb-file-zone-min: 60px; --fb-file-zone-padding: 7px; }
+/* .fb-size-md uses defaults \u2014 no override needed */
+.fb-size-lg { --fb-input-padding-y: 2px;  --fb-input-padding-x: 8px;  --fb-font-size: 16px; --fb-font-size-small: 13px; --fb-file-wide-min: 128px; --fb-file-zone-min: 96px; --fb-file-zone-padding: 12px; }
+.fb-size-xl { --fb-input-padding-y: 3px;  --fb-input-padding-x: 8px;  --fb-font-size: 18px; --fb-font-size-small: 14px; --fb-file-wide-min: 160px; --fb-file-zone-min: 120px; --fb-file-zone-padding: 14px; }
 `;
   doc.head.appendChild(style);
 }
-function applyAutoExpand(textarea) {
+function applyAutoExpand(textarea, options = {}) {
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
+  const minRows = Math.max(1, options.minRows ?? 1);
   const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
-  textarea.rows = Math.max(1, lineCount);
+  textarea.rows = Math.max(minRows, lineCount);
   const resize = () => {
     if (!textarea.isConnected) return;
-    textarea.style.height = "0";
+    textarea.style.height = "";
     const cs = getComputedStyle(textarea);
     const borderY = parseFloat(cs.borderTopWidth || "0") + parseFloat(cs.borderBottomWidth || "0");
-    textarea.style.height = `${textarea.scrollHeight + borderY}px`;
+    const lineHeight = parseFloat(cs.lineHeight || "0") || parseFloat(cs.fontSize || "0") * 1.5 || 20;
+    const padY = parseFloat(cs.paddingTop || "0") + parseFloat(cs.paddingBottom || "0");
+    const minHeight = lineHeight * minRows + padY + borderY;
+    if (textarea.value === "") {
+      textarea.style.height = `${minHeight}px`;
+      return;
+    }
+    const contentHeight = textarea.scrollHeight + borderY;
+    textarea.style.height = `${Math.max(contentHeight, minHeight)}px`;
   };
   textarea.addEventListener("input", resize);
   setTimeout(() => {
@@ -530,8 +570,8 @@ function createAddItemRow(classNameSuffix, onClick, options = {}) {
   const label = options.label ?? "";
   const showCounter = options.showCounter !== false;
   const row = document.createElement("div");
-  row.className = "fb-add-row mt-2";
-  row.style.cssText = "display:flex;align-items:stretch;width:100%;";
+  row.className = "fb-add-row";
+  row.style.cssText = "display:flex;align-items:stretch;width:100%;margin-top:4px;";
   const button = document.createElement("button");
   button.type = "button";
   button.className = `add-${classNameSuffix}-btn`;
@@ -540,8 +580,8 @@ function createAddItemRow(classNameSuffix, onClick, options = {}) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
-    padding: 6px 10px;
+    gap: 4px;
+    padding: 3px 10px;
     border: 1px dashed var(--fb-primary-color);
     border-radius: var(--fb-border-radius);
     background: transparent;
@@ -686,12 +726,12 @@ function ensureChipStyles(doc) {
   const style = doc.createElement("style");
   style.setAttribute("data-fb-chip-styles", "");
   style.textContent = `
-.fb-chip-list { display: flex; flex-direction: column; gap: 4px; }
+.fb-chip-list { display: flex; flex-direction: column; gap: 2px; }
 .fb-chip {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 5px 6px 5px 10px;
+  gap: 6px;
+  padding: 3px 6px 3px 8px;
   background: var(--fb-chip-bg, var(--fb-background-color, #fff));
   border: 1px solid var(--fb-chip-border, var(--fb-border-color, #e2e8f0));
   border-radius: 6px;
@@ -717,7 +757,13 @@ function ensureChipStyles(doc) {
   color: var(--fb-chip-text, var(--fb-text-color, inherit));
   font-size: var(--fb-font-size, 14px);
   font-family: var(--fb-font-family, inherit);
-  line-height: 1.4;
+  line-height: var(--fb-line-height, 1.4);
+  /* Soft-wrap support (v0.4.0): chip-input is now a <textarea rows=1> that
+     grows vertically when content overflows the chip width. */
+  resize: none;
+  overflow: hidden;
+  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 .fb-chip-input::placeholder { color: var(--fb-text-placeholder-color, #94a3b8); }
 .fb-chip-input:read-only { color: var(--fb-text-secondary-color, #475569); }
@@ -802,7 +848,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
-  textInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
+  textInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textInput.value = ctx.prefill[element.key] || element.default || "";
   textInput.readOnly = readonly;
   applySingleLineMode(textInput);
@@ -848,7 +894,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || "");
@@ -875,8 +921,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     dot.className = "fb-chip-dot";
     dot.setAttribute("aria-hidden", "true");
     chip.appendChild(dot);
-    const input = document.createElement("input");
-    input.type = "text";
+    const input = document.createElement("textarea");
+    input.rows = 1;
     input.className = "fb-chip-input";
     input.value = value;
     input.placeholder = element.placeholder || t("placeholderText", state);
@@ -892,6 +938,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       input.addEventListener("blur", handleChange);
       input.addEventListener("input", handleChange);
     }
+    applySingleLineMode(input);
+    applyAutoExpand(input);
     if (!readonly) {
       const rem = document.createElement("button");
       rem.type = "button";
@@ -1034,7 +1082,7 @@ function validateTextElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = element.minCount ?? 1;
+      const minCount = element.minCount ?? 0;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = rawValues.filter((v) => v.trim() !== "");
       if (element.required && filteredValues.length === 0) {
@@ -1110,13 +1158,13 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const textareaInput = document.createElement("textarea");
   textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
   textareaInput.style.cssText = `
-    padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
     font-size: var(--fb-font-size);
     font-family: var(--fb-font-family);
+    line-height: var(--fb-line-height, 1.5);
   `;
   textareaInput.name = pathKey;
-  textareaInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
-  textareaInput.rows = element.rows || 4;
+  textareaInput.placeholder = element.placeholder ?? "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textareaInput.value = ctx.prefill[element.key] || element.default || "";
   textareaInput.readOnly = readonly;
   if (!readonly && ctx.instance) {
@@ -1127,9 +1175,7 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  if (element.autoExpand || readonly) {
-    applyAutoExpand(textareaInput);
-  }
+  applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1142,13 +1188,13 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || "");
   }
   const container = document.createElement("div");
-  container.className = "space-y-2";
+  container.className = "fb-row";
   wrapper.appendChild(container);
   function updateIndices() {
     const items = container.querySelectorAll(".multiple-textarea-item");
@@ -1167,12 +1213,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     const textareaInput = document.createElement("textarea");
     textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
     textareaInput.style.cssText = `
-      padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
       font-size: var(--fb-font-size);
       font-family: var(--fb-font-family);
+      line-height: var(--fb-line-height, 1.5);
     `;
     textareaInput.placeholder = element.placeholder || t("placeholderText", state);
-    textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
     textareaInput.readOnly = readonly;
     if (!readonly && ctx.instance) {
@@ -1183,9 +1229,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    if (element.autoExpand || readonly) {
-      applyAutoExpand(textareaInput);
-    }
+    applyAutoExpand(textareaInput, { minRows: element.rows ?? 1 });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1261,9 +1305,7 @@ function validateTextareaElement(element, key, context) {
 }
 function updateTextareaField(element, fieldPath, value, context) {
   updateTextField(element, fieldPath, value, context);
-  const { scopeRoot, state } = context;
-  const shouldAutoExpand = element.autoExpand || isElementReadonly(element, state);
-  if (!shouldAutoExpand) return;
+  const { scopeRoot } = context;
   if (element.multiple) {
     const textareas = scopeRoot.querySelectorAll(
       `textarea[name^="${fieldPath}["]`
@@ -1452,13 +1494,13 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || "");
   }
   const container = document.createElement("div");
-  container.className = "space-y-2";
+  container.className = "fb-row";
   wrapper.appendChild(container);
   function updateIndices() {
     const items = container.querySelectorAll(".multiple-number-item");
@@ -1623,7 +1665,7 @@ function validateNumberElement(element, key, context) {
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
-      `[name^="${key}["]`
+      `[name^="${key}\\["]`
     );
     const values = [];
     inputs.forEach((input, index) => {
@@ -1647,7 +1689,7 @@ function validateNumberElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = element.minCount ?? 1;
+      const minCount = element.minCount ?? 0;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = values.filter((v) => v !== null);
       if (element.required && filteredValues.length === 0) {
@@ -1766,13 +1808,13 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || element.options?.[0]?.value || "");
   }
   const container = document.createElement("div");
-  container.className = "space-y-2";
+  container.className = "fb-row";
   wrapper.appendChild(container);
   function updateIndices() {
     const items = container.querySelectorAll(".multiple-select-item");
@@ -1918,7 +1960,7 @@ function validateSelectElement(element, key, context) {
     if (skipValidation) return;
     const { state } = context;
     const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? element2.minCount ?? 1 : 1;
+    const minCount = "minCount" in element2 ? element2.minCount ?? 0 : 0;
     const maxCount = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
     if (element2.required && filteredValues.length === 0) {
       errors.push(`${key2}: ${t("required", state)}`);
@@ -2195,14 +2237,14 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || element.options?.[0]?.value || "");
   }
   const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
-  container.className = "space-y-2";
+  container.className = "fb-row";
   wrapper.appendChild(container);
   function updateIndices() {
     const items = container.querySelectorAll(".multiple-switcher-item");
@@ -2355,7 +2397,7 @@ function validateSwitcherElement(element, key, context) {
     if (skipValidation) return;
     const { state } = context;
     const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? el.minCount ?? 1 : 1;
+    const minCount = "minCount" in el ? el.minCount ?? 0 : 0;
     const maxCount = "maxCount" in el ? el.maxCount ?? Infinity : Infinity;
     if (el.required && filteredValues.length === 0) {
       errors.push(`${fieldKey}: ${t("required", state)}`);
@@ -2774,7 +2816,9 @@ function ensureFileStyles() {
   align-items: stretch;
   gap: 0;
   overflow: hidden;
-  min-height: 180px;
+  /* min-height driven by --fb-file-wide-min so size-tokens (.fb-size-{xs|sm|lg|xl})
+     can override per-field. Default 96px matches v0.4.0 compact density. */
+  min-height: var(--fb-file-wide-min, 96px);
   transition: border-color 150ms, background 150ms, box-shadow 150ms;
   cursor: pointer;
 }
@@ -2793,14 +2837,15 @@ function ensureFileStyles() {
    upload + library on one row (~220 + 176), library wraps below. */
 .fb-wide-tile-upload {
   flex: 1 1 220px;
-  min-height: 140px;
+  /* min-height theme-driven; default 72px matches v0.4.0 compact density. */
+  min-height: var(--fb-file-zone-min, 72px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 4px;
   color: #2563eb;
-  padding: 16px;
+  padding: var(--fb-file-zone-padding, 8px);
   transition: background 150ms;
   cursor: pointer;
   background: transparent;
@@ -2820,14 +2865,16 @@ function ensureFileStyles() {
    visual hierarchy "upload > library" in both layouts. */
 .fb-wide-tile-library {
   flex: 0 0 176px;
-  min-height: 120px;
+  /* Shares --fb-file-zone-min with the upload zone so size-tokens scale both
+     uniformly. Default 72px matches v0.4.0 compact density. */
+  min-height: var(--fb-file-zone-min, 72px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 4px;
   color: #2563eb;
-  padding: 12px;
+  padding: var(--fb-file-zone-padding, 8px);
   transition: background 150ms;
   cursor: pointer;
   background: transparent;
@@ -4088,7 +4135,9 @@ function downloadBlob(blob, fileName) {
       URL.revokeObjectURL(blobUrl);
     }, 100);
   } catch (error) {
-    throw new Error(`Blob download failed: ${error.message}`);
+    throw new Error(`Blob download failed: ${error.message}`, {
+      cause: error
+    });
   }
 }
 
@@ -5028,7 +5077,7 @@ function renderResourcePills(opts) {
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const fileWrapper = document.createElement("div");
-  fileWrapper.className = "space-y-2";
+  fileWrapper.className = "fb-row";
   fileWrapper.dataset.filesWrapper = pathKey;
   const picker = document.createElement("input");
   picker.type = "file";
@@ -5176,7 +5225,7 @@ function buildAcceptAttribute(accept) {
 function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   const state = ctx.state;
   const filesWrapper = document.createElement("div");
-  filesWrapper.className = "space-y-2";
+  filesWrapper.className = "fb-row";
   filesWrapper.dataset.filesWrapper = pathKey;
   const filesPicker = document.createElement("input");
   filesPicker.type = "file";
@@ -5842,13 +5891,13 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     values.push(element.default || "#000000");
   }
   const container = document.createElement("div");
-  container.className = "space-y-2";
+  container.className = "fb-row";
   wrapper.appendChild(container);
   function updateIndices() {
     const items = container.querySelectorAll(".multiple-colour-item");
@@ -6028,7 +6077,7 @@ function validateColourElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = element.minCount ?? 1;
+      const minCount = element.minCount ?? 0;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = values.filter((v) => v !== "");
       if (element.required && filteredValues.length === 0) {
@@ -6303,7 +6352,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const minCount = element.minCount ?? 1;
+  const minCount = element.minCount ?? (element.required ? 1 : 0);
   const maxCount = element.maxCount ?? Infinity;
   const defaultValue = element.default !== void 0 ? element.default : (element.min + element.max) / 2;
   while (values.length < minCount) {
@@ -6517,7 +6566,7 @@ function validateSliderElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = element.minCount ?? 1;
+      const minCount = element.minCount ?? 0;
       const maxCount = element.maxCount ?? Infinity;
       const filteredValues = values.filter((v) => v !== null);
       if (element.required && filteredValues.length === 0) {
@@ -6704,7 +6753,7 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const itemsWrap = document.createElement("div");
   const columns = element.columns || 1;
   if (columns === 1) {
-    itemsWrap.className = "space-y-2";
+    itemsWrap.className = "fb-row";
   } else {
     itemsWrap.className = `grid grid-cols-${columns} gap-2`;
   }
@@ -6743,10 +6792,10 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
 }
 function getChildWrapperClass(isSlides, columns) {
   if (isSlides) {
-    return "space-y-2";
+    return "fb-row";
   }
   const cols = columns || 1;
-  return cols === 1 ? "space-y-2" : `grid grid-cols-${cols} gap-2`;
+  return cols === 1 ? "fb-row" : `grid grid-cols-${cols} gap-2`;
 }
 function mountRemoveButton(item, onRemove, state) {
   const rem = document.createElement("button");
@@ -6793,7 +6842,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     const gridTemplateColumns = typeof slideCols === "number" && slideCols > 0 ? `repeat(${slideCols}, 1fr)` : "repeat(auto-fit, minmax(280px, 1fr))";
     itemsWrap.style.cssText = `display:grid;grid-template-columns:${gridTemplateColumns};gap:var(--fb-slides-gap, 14px);align-items:start;`;
   } else {
-    itemsWrap.className = "space-y-2";
+    itemsWrap.className = "fb-row";
   }
   if (!containerIsReadonly) {
     const hintsElement = createPrefillHints(element, element.key);
@@ -6894,11 +6943,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       }
       const childWrapper = document.createElement("div");
       if (isSlides) {
-        childWrapper.className = "space-y-2";
+        childWrapper.className = "fb-row";
       } else {
         const columns = element.columns || 1;
         if (columns === 1) {
-          childWrapper.className = "space-y-2";
+          childWrapper.className = "fb-row";
         } else {
           childWrapper.className = `grid grid-cols-${columns} gap-2`;
         }
@@ -6941,11 +6990,11 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       }
       const childWrapper = document.createElement("div");
       if (isSlides) {
-        childWrapper.className = "space-y-2";
+        childWrapper.className = "fb-row";
       } else {
         const columns = element.columns || 1;
         if (columns === 1) {
-          childWrapper.className = "space-y-2";
+          childWrapper.className = "fb-row";
         } else {
           childWrapper.className = `grid grid-cols-${columns} gap-2`;
         }
@@ -8499,7 +8548,7 @@ function validateTableElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let value = null;
+  let value;
   try {
     value = JSON.parse(hiddenInput.value);
   } catch {
@@ -9824,7 +9873,7 @@ function validateRichInputElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let rawValue = {};
+  let rawValue;
   try {
     const parsed = JSON.parse(hiddenInput.value);
     if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
@@ -10463,7 +10512,8 @@ function setupEnableIfListeners(wrapper, element, ctx) {
 }
 function createFieldLabel(element) {
   const title = document.createElement("label");
-  title.className = "text-sm font-medium text-gray-900";
+  title.className = "font-medium text-gray-900";
+  title.style.cssText = "font-size: var(--fb-label-font-size, 0.75rem); line-height: var(--fb-label-line-height, 1.2);";
   title.textContent = element.label ?? element.key ?? "";
   if (element.required) {
     const req = document.createElement("span");
@@ -10494,7 +10544,8 @@ function createInfoButton(element) {
 }
 function createLabelContainer(element) {
   const label = document.createElement("div");
-  label.className = "flex items-center mb-1";
+  label.className = "flex items-center";
+  label.style.marginBottom = "var(--fb-label-margin-bottom, 2px)";
   label.dataset.fbLabelRow = "";
   const title = createFieldLabel(element);
   label.appendChild(title);
@@ -10605,11 +10656,12 @@ function renderElement2(element, ctx) {
     }
     const initiallyDisabled2 = shouldDisableElement(element, ctx);
     const outerWrapper = document.createElement("div");
-    outerWrapper.className = "mb-2 fb-field-wrapper fb-markdown-wrapper";
+    outerWrapper.className = `fb-field-wrapper fb-markdown-wrapper fb-size-${element.size || "md"}`;
     outerWrapper.setAttribute(
       "data-field-key",
       getElementLookupKey(element, ctx.state)
     );
+    outerWrapper.setAttribute("data-fb-width", element.width || "full");
     renderMarkdown(element, ctx, outerWrapper);
     if (initiallyDisabled2) {
       outerWrapper.style.display = "none";
@@ -10621,8 +10673,9 @@ function renderElement2(element, ctx) {
   }
   const initiallyDisabled = shouldDisableElement(element, ctx);
   const wrapper = document.createElement("div");
-  wrapper.className = "mb-2 fb-field-wrapper";
+  wrapper.className = `fb-field-wrapper fb-size-${element.size || "md"}`;
   wrapper.setAttribute("data-field-key", element.key);
+  wrapper.setAttribute("data-fb-width", element.width || "full");
   const ops = getComponentOperations(element.type);
   if (!ops?.ownsLabel) {
     const label = createLabelContainer(element);
@@ -10944,9 +10997,9 @@ var defaultTheme = {
   // blue-500
   // Spacing
   inputPaddingX: "0.5rem",
-  // 8px (compact density v2)
-  inputPaddingY: "0.25rem",
-  // 4px (compact density v2)
+  // 8px (compact density v3 — v0.4.0)
+  inputPaddingY: "0.125rem",
+  // 2px (compact density v3 — v0.4.0)
   borderRadius: "0.5rem",
   // rounded-lg (8px)
   borderRadiusSmall: "0.375rem",
@@ -10984,13 +11037,20 @@ var defaultTheme = {
   slideCardRadius: "0.5rem",
   // matches borderRadius
   slideCardMinHeight: "0",
-  slideCardPadding: "12px",
+  slideCardPadding: "8px",
   // Section-label defaults — same look as the regular field label. Themes
   // that want the "ПРЕИМУЩЕСТВА" caps style override these three vars.
   labelSectionFontSize: "0.875rem",
   // matches fontSize
   labelSectionLetterSpacing: "normal",
-  labelSectionTextTransform: "none"
+  labelSectionTextTransform: "none",
+  // Per-field label defaults — compact density: 12px @ 1.2 line-height with
+  // a 2px gap to the input. Themes that prefer roomier labels (Picaz, klein)
+  // can bump these via their override block.
+  labelFontSize: "0.75rem",
+  // 12px
+  labelLineHeight: "1.2",
+  labelMarginBottom: "2px"
 };
 function generateCSSVariables(theme) {
   const mergedTheme = { ...defaultTheme, ...theme };
@@ -11536,7 +11596,7 @@ var FormBuilderInstance = class {
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
     const rootContainer = document.createElement("div");
-    rootContainer.className = "space-y-2";
+    rootContainer.className = "fb-row";
     if (schema.prefillHints && !this.state.config.readonly) {
       const hintsContainer = this.createRootPrefillHints(schema.prefillHints);
       rootContainer.appendChild(hintsContainer);
@@ -11544,7 +11604,7 @@ var FormBuilderInstance = class {
     const fieldsWrapper = document.createElement("div");
     const columns = schema.columns || 1;
     if (columns === 1) {
-      fieldsWrapper.className = "space-y-2";
+      fieldsWrapper.className = "fb-row";
     } else {
       fieldsWrapper.className = `grid grid-cols-${columns} gap-2`;
     }