@camstack/ui-library 1.2.277 → 1.2.279

package/dist/composites/config-form-builder.d.ts

@@ -20,5 +20,16 @@ interface FormBuilderProps {
 	*/
 	bare?: boolean;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+export declare function sectionGridClass(columns: 1 | 2 | 3 | 4 | undefined): string;
 export declare function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe, bare }: FormBuilderProps): JSX.Element;
 export {};

package/dist/index.cjs

@@ -10957,6 +10957,43 @@ var PasswordInput = (0, react$1.forwardRef)(({ value, onValueChange, shown, onTo
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion
+//#region src/primitives/select.tsx
+/**
+* A native `<select>` styled to match the rest of the field set.
+*
+* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+* makes it match — and it is also what USED to make a disabled one a lie. A
+* browser greys a disabled control by rendering its own background and text
+* colour; all three of those are overridden here, so a `disabled` dropdown
+* looked exactly like a live one and simply ignored the click. That is the
+* whole of the "the language selector does not open" report of 2026-08-15:
+* the AI section's switch was off, every control under it was correctly inert,
+* and nothing on screen said so.
+*
+* `disabled:` classes belong HERE and not on each call site: there are dozens
+* of `<Select disabled>` in this app and the one that gets forgotten is the one
+* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+*/
+var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+			ref,
+			disabled,
+			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			...props,
+			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
 //#region src/composites/config-secret-field.tsx
 /**
 * A keychain-stored secret in a settings form (D787, D789) — drawn as ONE
@@ -21313,43 +21350,6 @@ var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, re
 });
 Button.displayName = "Button";
 //#endregion
-//#region src/primitives/select.tsx
-/**
-* A native `<select>` styled to match the rest of the field set.
-*
-* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
-* makes it match — and it is also what USED to make a disabled one a lie. A
-* browser greys a disabled control by rendering its own background and text
-* colour; all three of those are overridden here, so a `disabled` dropdown
-* looked exactly like a live one and simply ignored the click. That is the
-* whole of the "the language selector does not open" report of 2026-08-15:
-* the AI section's switch was off, every control under it was correctly inert,
-* and nothing on screen said so.
-*
-* `disabled:` classes belong HERE and not on each call site: there are dozens
-* of `<Select disabled>` in this app and the one that gets forgotten is the one
-* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
-*/
-var Select = (0, react$1.forwardRef)(({ className, options, disabled, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative w-full",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-			ref,
-			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
-			...props,
-			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
-		})]
-	});
-});
-Select.displayName = "Select";
-//#endregion
 //#region src/primitives/skeleton.tsx
 var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -28322,7 +28322,7 @@ function TimezoneSelector({ value, onChange, disabled }) {
 var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 var LABEL_CLASS$1 = "block text-[11px] font-medium text-foreground mb-1 break-words";
 var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5 break-words";
-function FieldWrapper({ label, description, required, span, children, translationFn }) {
+function FieldWrapper({ label, description, required, span, htmlFor, children, translationFn }) {
 	const colSpanClass = span === 2 ? "col-span-1 @[480px]:col-span-2" : span === 3 ? "col-span-1 @[480px]:col-span-2 @[880px]:col-span-3" : span === 4 ? "col-span-1 @[480px]:col-span-2 @[1140px]:col-span-4" : "col-span-1";
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -28332,6 +28332,7 @@ function FieldWrapper({ label, description, required, span, children, translatio
 		children: [
 			hasLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: LABEL_CLASS$1,
+				...htmlFor !== void 0 ? { htmlFor } : {},
 				children: [resolvedLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "text-danger ml-0.5",
 					children: "*"
@@ -28500,24 +28501,27 @@ function BooleanField({ field, value, onChange, disabled, translationFn }) {
 }
 function SelectField({ field, value, onChange, disabled, translationFn }) {
 	const hasEmptyOption = field.options.some((o) => o.value === "");
+	const options = [...!field.required && !hasEmptyOption ? [{
+		value: "",
+		label: "— Select —"
+	}] : [], ...field.options.map((opt) => ({
+		value: opt.value,
+		label: opt.label
+	}))];
+	const controlId = `config-select-${field.key}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldWrapper, {
 		label: field.label,
 		description: field.description,
 		required: field.required,
 		span: field.span,
+		htmlFor: controlId,
 		translationFn,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-			className: INPUT_CLASS,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+			id: controlId,
+			options,
 			value: value === void 0 || value === null ? "" : String(value),
 			disabled: disabled || field.disabled,
-			onChange: (e) => onChange(e.target.value),
-			children: [!field.required && !hasEmptyOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: "",
-				children: "— Select —"
-			}), field.options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: opt.value,
-				children: opt.label
-			}, opt.value))]
+			onChange: (e) => onChange(e.target.value)
 		})
 	});
 }
@@ -30125,11 +30129,27 @@ function resolveLabel(value, t) {
 	if (t && isI18nKey(value)) return t(value);
 	return value;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+function sectionGridClass(columns) {
+	const cols = columns ?? 2;
+	if (cols === 1) return "grid-cols-1";
+	if (cols === 3) return "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3";
+	if (cols === 4) return "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4";
+	return "grid-cols-1 @[480px]:grid-cols-2";
+}
 function SectionCard$1({ section, values, onChange, disabled, translationFn, onTestField, probeResults }) {
 	const [collapsed, setCollapsed] = (0, react$1.useState)(section.defaultCollapsed ?? false);
 	const isAccordion = section.style === "accordion";
-	const columns = section.columns ?? 2;
-	const gridClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3" : columns === 4 ? "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4" : "grid-cols-1 @[480px]:grid-cols-2";
+	const gridClass = sectionGridClass(section.columns);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "@container rounded-lg border border-border bg-surface p-3",
 		style: { containerType: "inline-size" },
@@ -30169,16 +30189,23 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		onClearProbe?.(key);
 	};
 	if (bare) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "grid grid-cols-1 gap-y-2.5",
-		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
-			field,
-			values,
-			onChange: handleFieldChange,
-			disabled,
-			translationFn,
-			onTestField,
-			externalProbe: probeResults?.[field.key]
-		}, field.key)))
+		className: "space-y-4",
+		children: schema.sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "@container",
+			style: { containerType: "inline-size" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `grid ${sectionGridClass(section.columns)} gap-x-3 gap-y-2.5`,
+				children: section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
+					field,
+					values,
+					onChange: handleFieldChange,
+					disabled,
+					translationFn,
+					onTestField,
+					externalProbe: probeResults?.[field.key]
+				}, field.key))
+			})
+		}, section.id))
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "space-y-4",

package/dist/index.js

@@ -10933,6 +10933,43 @@ var PasswordInput = forwardRef(({ value, onValueChange, shown, onToggleShown, bu
 });
 PasswordInput.displayName = "PasswordInput";
 //#endregion
+//#region src/primitives/select.tsx
+/**
+* A native `<select>` styled to match the rest of the field set.
+*
+* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
+* makes it match — and it is also what USED to make a disabled one a lie. A
+* browser greys a disabled control by rendering its own background and text
+* colour; all three of those are overridden here, so a `disabled` dropdown
+* looked exactly like a live one and simply ignored the click. That is the
+* whole of the "the language selector does not open" report of 2026-08-15:
+* the AI section's switch was off, every control under it was correctly inert,
+* and nothing on screen said so.
+*
+* `disabled:` classes belong HERE and not on each call site: there are dozens
+* of `<Select disabled>` in this app and the one that gets forgotten is the one
+* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
+*/
+var Select = forwardRef(({ className, options, disabled, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsx("select", {
+			ref,
+			disabled,
+			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
+			...props,
+			children: options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
 //#region src/composites/config-secret-field.tsx
 /**
 * A keychain-stored secret in a settings form (D787, D789) — drawn as ONE
@@ -21289,43 +21326,6 @@ var Button = forwardRef(({ className, variant, size, ...props }, ref) => {
 });
 Button.displayName = "Button";
 //#endregion
-//#region src/primitives/select.tsx
-/**
-* A native `<select>` styled to match the rest of the field set.
-*
-* `appearance-none` plus an explicit `bg-surface` / `text-foreground` is what
-* makes it match — and it is also what USED to make a disabled one a lie. A
-* browser greys a disabled control by rendering its own background and text
-* colour; all three of those are overridden here, so a `disabled` dropdown
-* looked exactly like a live one and simply ignored the click. That is the
-* whole of the "the language selector does not open" report of 2026-08-15:
-* the AI section's switch was off, every control under it was correctly inert,
-* and nothing on screen said so.
-*
-* `disabled:` classes belong HERE and not on each call site: there are dozens
-* of `<Select disabled>` in this app and the one that gets forgotten is the one
-* that generates the ticket. Guarded by `disabled-affordance.test.tsx`.
-*/
-var Select = forwardRef(({ className, options, disabled, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
-		children: [/* @__PURE__ */ jsx("select", {
-			ref,
-			disabled,
-			className: cn("h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed", className),
-			...props,
-			children: options.map((option) => /* @__PURE__ */ jsx("option", {
-				value: option.value,
-				children: option.label
-			}, option.value))
-		}), /* @__PURE__ */ jsx("div", {
-			className: cn("absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", disabled === true ? "opacity-50" : ""),
-			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
-		})]
-	});
-});
-Select.displayName = "Select";
-//#endregion
 //#region src/primitives/skeleton.tsx
 var Skeleton = forwardRef(({ className, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -28298,7 +28298,7 @@ function TimezoneSelector({ value, onChange, disabled }) {
 var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
 var LABEL_CLASS$1 = "block text-[11px] font-medium text-foreground mb-1 break-words";
 var DESC_CLASS = "text-[10px] text-foreground-subtle mt-0.5 break-words";
-function FieldWrapper({ label, description, required, span, children, translationFn }) {
+function FieldWrapper({ label, description, required, span, htmlFor, children, translationFn }) {
 	const colSpanClass = span === 2 ? "col-span-1 @[480px]:col-span-2" : span === 3 ? "col-span-1 @[480px]:col-span-2 @[880px]:col-span-3" : span === 4 ? "col-span-1 @[480px]:col-span-2 @[1140px]:col-span-4" : "col-span-1";
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -28308,6 +28308,7 @@ function FieldWrapper({ label, description, required, span, children, translatio
 		children: [
 			hasLabel && /* @__PURE__ */ jsxs("label", {
 				className: LABEL_CLASS$1,
+				...htmlFor !== void 0 ? { htmlFor } : {},
 				children: [resolvedLabel, required && /* @__PURE__ */ jsx("span", {
 					className: "text-danger ml-0.5",
 					children: "*"
@@ -28476,24 +28477,27 @@ function BooleanField({ field, value, onChange, disabled, translationFn }) {
 }
 function SelectField({ field, value, onChange, disabled, translationFn }) {
 	const hasEmptyOption = field.options.some((o) => o.value === "");
+	const options = [...!field.required && !hasEmptyOption ? [{
+		value: "",
+		label: "— Select —"
+	}] : [], ...field.options.map((opt) => ({
+		value: opt.value,
+		label: opt.label
+	}))];
+	const controlId = `config-select-${field.key}`;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		label: field.label,
 		description: field.description,
 		required: field.required,
 		span: field.span,
+		htmlFor: controlId,
 		translationFn,
-		children: /* @__PURE__ */ jsxs("select", {
-			className: INPUT_CLASS,
+		children: /* @__PURE__ */ jsx(Select, {
+			id: controlId,
+			options,
 			value: value === void 0 || value === null ? "" : String(value),
 			disabled: disabled || field.disabled,
-			onChange: (e) => onChange(e.target.value),
-			children: [!field.required && !hasEmptyOption && /* @__PURE__ */ jsx("option", {
-				value: "",
-				children: "— Select —"
-			}), field.options.map((opt) => /* @__PURE__ */ jsx("option", {
-				value: opt.value,
-				children: opt.label
-			}, opt.value))]
+			onChange: (e) => onChange(e.target.value)
 		})
 	});
 }
@@ -30101,11 +30105,27 @@ function resolveLabel(value, t) {
 	if (t && isI18nKey(value)) return t(value);
 	return value;
 }
+/**
+* Container-query driven responsive grid. Each section is its own
+* `@container` so the column count adapts to the SECTION's width
+* (not the viewport) — important inside narrow hosts like the
+* device-detail right column / ItemFormDialog. Behavior:
+*   columns=1            → always 1 col
+*   columns=2 (default)  → 1 col below 480px container, 2 cols above
+*   columns=3            → 1 → 2 → 3 col at 480px / 880px
+*   columns=4            → 1 → 2 → 4 col at 480px / 1140px
+*/
+function sectionGridClass(columns) {
+	const cols = columns ?? 2;
+	if (cols === 1) return "grid-cols-1";
+	if (cols === 3) return "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3";
+	if (cols === 4) return "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4";
+	return "grid-cols-1 @[480px]:grid-cols-2";
+}
 function SectionCard$1({ section, values, onChange, disabled, translationFn, onTestField, probeResults }) {
 	const [collapsed, setCollapsed] = useState(section.defaultCollapsed ?? false);
 	const isAccordion = section.style === "accordion";
-	const columns = section.columns ?? 2;
-	const gridClass = columns === 1 ? "grid-cols-1" : columns === 3 ? "grid-cols-1 @[480px]:grid-cols-2 @[880px]:grid-cols-3" : columns === 4 ? "grid-cols-1 @[480px]:grid-cols-2 @[1140px]:grid-cols-4" : "grid-cols-1 @[480px]:grid-cols-2";
+	const gridClass = sectionGridClass(section.columns);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "@container rounded-lg border border-border bg-surface p-3",
 		style: { containerType: "inline-size" },
@@ -30145,16 +30165,23 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		onClearProbe?.(key);
 	};
 	if (bare) return /* @__PURE__ */ jsx("div", {
-		className: "grid grid-cols-1 gap-y-2.5",
-		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
-			field,
-			values,
-			onChange: handleFieldChange,
-			disabled,
-			translationFn,
-			onTestField,
-			externalProbe: probeResults?.[field.key]
-		}, field.key)))
+		className: "space-y-4",
+		children: schema.sections.map((section) => /* @__PURE__ */ jsx("div", {
+			className: "@container",
+			style: { containerType: "inline-size" },
+			children: /* @__PURE__ */ jsx("div", {
+				className: `grid ${sectionGridClass(section.columns)} gap-x-3 gap-y-2.5`,
+				children: section.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
+					field,
+					values,
+					onChange: handleFieldChange,
+					disabled,
+					translationFn,
+					onTestField,
+					externalProbe: probeResults?.[field.key]
+				}, field.key))
+			})
+		}, section.id))
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.277",
+  "version": "1.2.279",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",