@dmitryvim/form-builder 0.3.3 → 0.4.0

package/dist/cjs/index.cjs

@@ -473,20 +473,61 @@ 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 = {}) {
+  var _a;
   textarea.style.overflow = "hidden";
   textarea.style.resize = "none";
+  const minRows = Math.max(1, (_a = options.minRows) != null ? _a : 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(() => {
@@ -495,13 +536,13 @@ function applyAutoExpand(textarea) {
   if (typeof ResizeObserver === "undefined") return;
   let lastWidth = -1;
   const ro = new ResizeObserver((entries) => {
-    var _a, _b, _c, _d, _e;
+    var _a2, _b, _c, _d, _e;
     if (!textarea.isConnected) {
       ro.disconnect();
       return;
     }
     const entry = entries[0];
-    const w = (_e = (_d = (_b = (_a = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _d : (_c = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _c.width) != null ? _e : 0;
+    const w = (_e = (_d = (_b = (_a2 = entry == null ? void 0 : entry.contentBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b.inlineSize) != null ? _d : (_c = entry == null ? void 0 : entry.contentRect) == null ? void 0 : _c.width) != null ? _e : 0;
     if (w === lastWidth) return;
     lastWidth = w;
     resize();
@@ -541,8 +582,8 @@ function createAddItemRow(classNameSuffix, onClick, options = {}) {
   const label = (_a = options.label) != null ? _a : "";
   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`;
@@ -551,8 +592,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;
@@ -698,12 +739,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;
@@ -729,7 +770,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); }
@@ -788,6 +835,7 @@ function createCharCounter(element, input) {
   return counter;
 }
 function renderTextElement(element, ctx, wrapper, pathKey) {
+  var _a;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
@@ -814,7 +862,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 = (_a = element.placeholder) != null ? _a : "\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);
@@ -861,7 +909,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
     values.push(element.default || "");
@@ -888,8 +936,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);
@@ -905,6 +953,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";
@@ -1050,7 +1100,7 @@ function validateTextElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 1;
+      const minCount = (_a = element.minCount) != null ? _a : 0;
       const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
       const filteredValues = rawValues.filter((v) => v.trim() !== "");
       if (element.required && filteredValues.length === 0) {
@@ -1119,6 +1169,7 @@ function updateTextField(element, fieldPath, value, context) {
 
 // src/components/textarea.ts
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
+  var _a, _b;
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const textareaWrapper = document.createElement("div");
@@ -1126,13 +1177,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 = (_a = element.placeholder) != null ? _a : "\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) {
@@ -1143,9 +1194,7 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  if (element.autoExpand || readonly) {
-    applyAutoExpand(textareaInput);
-  }
+  applyAutoExpand(textareaInput, { minRows: (_b = element.rows) != null ? _b : 1 });
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput);
@@ -1159,13 +1208,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : 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");
@@ -1177,6 +1226,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     });
   }
   function addTextareaItem(value = "", index = -1) {
+    var _a2;
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-textarea-item";
     const textareaContainer = document.createElement("div");
@@ -1184,12 +1234,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) {
@@ -1200,9 +1250,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    if (element.autoExpand || readonly) {
-      applyAutoExpand(textareaInput);
-    }
+    applyAutoExpand(textareaInput, { minRows: (_a2 = element.rows) != null ? _a2 : 1 });
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput);
@@ -1278,9 +1326,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}["]`
@@ -1472,13 +1518,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : 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");
@@ -1645,7 +1691,7 @@ function validateNumberElement(element, key, context) {
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
-      `[name^="${key}["]`
+      `[name^="${key}\\["]`
     );
     const values = [];
     inputs.forEach((input, index) => {
@@ -1670,7 +1716,7 @@ function validateNumberElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 1;
+      const minCount = (_a = element.minCount) != null ? _a : 0;
       const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
       const filteredValues = values.filter((v) => v !== null);
       if (element.required && filteredValues.length === 0) {
@@ -1790,13 +1836,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
     values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.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");
@@ -1946,7 +1992,7 @@ function validateSelectElement(element, key, context) {
     if (skipValidation) return;
     const { state } = context;
     const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? (_a2 = element2.minCount) != null ? _a2 : 1 : 1;
+    const minCount = "minCount" in element2 ? (_a2 = element2.minCount) != null ? _a2 : 0 : 0;
     const maxCount = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : Infinity : Infinity;
     if (element2.required && filteredValues.length === 0) {
       errors.push(`${key2}: ${t("required", state)}`);
@@ -2226,14 +2272,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   while (values.length < minCount) {
     values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.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");
@@ -2390,7 +2436,7 @@ function validateSwitcherElement(element, key, context) {
     if (skipValidation) return;
     const { state } = context;
     const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? (_a2 = el.minCount) != null ? _a2 : 1 : 1;
+    const minCount = "minCount" in el ? (_a2 = el.minCount) != null ? _a2 : 0 : 0;
     const maxCount = "maxCount" in el ? (_b = el.maxCount) != null ? _b : Infinity : Infinity;
     if (el.required && filteredValues.length === 0) {
       errors.push(`${fieldKey}: ${t("required", state)}`);
@@ -2818,7 +2864,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;
 }
@@ -2837,14 +2885,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;
@@ -2864,14 +2913,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;
@@ -4148,7 +4199,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
+    });
   }
 }
 
@@ -5106,7 +5159,7 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   var _a, _b;
   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";
@@ -5257,7 +5310,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   var _a, _b;
   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";
@@ -5933,13 +5986,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : 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");
@@ -6122,7 +6175,7 @@ function validateColourElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 1;
+      const minCount = (_a = element.minCount) != null ? _a : 0;
       const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
       const filteredValues = values.filter((v) => v !== "");
       if (element.required && filteredValues.length === 0) {
@@ -6400,7 +6453,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 = (_a = element.minCount) != null ? _a : 1;
+  const minCount = (_a = element.minCount) != null ? _a : element.required ? 1 : 0;
   const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
   const defaultValue = element.default !== void 0 ? element.default : (element.min + element.max) / 2;
   while (values.length < minCount) {
@@ -6616,7 +6669,7 @@ function validateSliderElement(element, key, context) {
     });
     if (!skipValidation) {
       const { state } = context;
-      const minCount = (_b = element.minCount) != null ? _b : 1;
+      const minCount = (_b = element.minCount) != null ? _b : 0;
       const maxCount = (_c = element.maxCount) != null ? _c : Infinity;
       const filteredValues = values.filter((v) => v !== null);
       if (element.required && filteredValues.length === 0) {
@@ -6805,7 +6858,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`;
   }
@@ -6845,10 +6898,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");
@@ -6896,7 +6949,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);
@@ -6999,11 +7052,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`;
         }
@@ -7047,11 +7100,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`;
         }
@@ -8637,7 +8690,7 @@ function validateTableElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let value = null;
+  let value;
   try {
     value = JSON.parse(hiddenInput.value);
   } catch {
@@ -10004,7 +10057,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)) {
@@ -10651,7 +10704,8 @@ function setupEnableIfListeners(wrapper, element, ctx) {
 function createFieldLabel(element) {
   var _a, _b;
   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 = (_b = (_a = element.label) != null ? _a : element.key) != null ? _b : "";
   if (element.required) {
     const req = document.createElement("span");
@@ -10682,7 +10736,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);
@@ -10793,11 +10848,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";
@@ -10809,8 +10865,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 == null ? void 0 : ops.ownsLabel)) {
     const label = createLabelContainer(element);
@@ -11132,9 +11189,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",
@@ -11172,13 +11229,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 };
@@ -11724,7 +11788,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);
@@ -11732,7 +11796,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`;
     }