@open-mercato/core 0.8.1-develop.7296.1.2111d779db → 0.9.0

package/dist/modules/forms/backend/forms/[id]/studio/style/ColorControl.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
+import {
+  OM_HEX_COLOR
+} from "../../../../../schema/style-extensions.js";
+import { belowAaForPair } from "./contrast.js";
+const SWATCHES = [
+  { token: "surface", labelKey: "forms.studio.style.color.token.surface", fallbackLabel: "Surface", previewStyle: { background: "var(--card)" } },
+  { token: "surface-muted", labelKey: "forms.studio.style.color.token.surfaceMuted", fallbackLabel: "Surface muted", previewStyle: { background: "var(--muted)" } },
+  { token: "foreground", labelKey: "forms.studio.style.color.token.foreground", fallbackLabel: "Foreground", previewStyle: { background: "var(--foreground)" } },
+  { token: "muted-foreground", labelKey: "forms.studio.style.color.token.mutedForeground", fallbackLabel: "Muted text", previewStyle: { background: "var(--muted-foreground)" } },
+  { token: "accent", labelKey: "forms.studio.style.color.token.accent", fallbackLabel: "Accent", previewStyle: { background: "var(--primary)" } },
+  { token: "border", labelKey: "forms.studio.style.color.token.border", fallbackLabel: "Border", previewStyle: { background: "var(--border)" } },
+  { token: "transparent", labelKey: "forms.studio.style.color.token.transparent", fallbackLabel: "Transparent", previewStyle: { background: "transparent" } },
+  { token: "inherit", labelKey: "forms.studio.style.color.token.inherit", fallbackLabel: "Inherit", previewStyle: { background: "transparent" } }
+];
+function isHex(value) {
+  return OM_HEX_COLOR.test(value);
+}
+function toNativeHex(draft) {
+  const value = draft.trim();
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) return value;
+  if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+    return `#${value.slice(1).split("").map((char) => char + char).join("")}`;
+  }
+  return "#000000";
+}
+const TOKEN_NATIVE_HEX = {
+  surface: "#ffffff",
+  "surface-muted": "#f5f5f5",
+  foreground: "#0a0a0a",
+  "muted-foreground": "#737373",
+  accent: "#171717",
+  border: "#e5e5e5",
+  transparent: "#ffffff",
+  inherit: "#ffffff"
+};
+function ColorControl({
+  value,
+  onChange,
+  label,
+  allowTransparent = true,
+  contrastAgainst
+}) {
+  const t = useT();
+  const valueIsHex = typeof value === "string" && isHex(value);
+  const [hexDraft, setHexDraft] = React.useState(valueIsHex ? value : "");
+  const [hexError, setHexError] = React.useState(null);
+  React.useEffect(() => {
+    if (valueIsHex) setHexDraft(value);
+  }, [value, valueIsHex]);
+  const handleHexChange = React.useCallback(
+    (raw) => {
+      setHexDraft(raw);
+      const trimmed = raw.trim();
+      if (trimmed === "") {
+        setHexError(null);
+        onChange(void 0);
+        return;
+      }
+      if (isHex(trimmed)) {
+        setHexError(null);
+        onChange(trimmed);
+        return;
+      }
+      setHexError(t("forms.studio.style.color.hexError", "Use a hex value like #0f766e"));
+    },
+    [onChange, t]
+  );
+  const selectToken = React.useCallback(
+    (token) => {
+      setHexError(null);
+      onChange(token);
+    },
+    [onChange]
+  );
+  const aaWarning = React.useMemo(() => {
+    const ratio = belowAaForPair(value, contrastAgainst);
+    if (ratio === null) return null;
+    return t("forms.studio.style.color.aaWarning", "Low contrast \u2014 may be hard to read");
+  }, [value, contrastAgainst, t]);
+  const swatches = SWATCHES.filter((swatch) => allowTransparent || swatch.token !== "transparent");
+  const [tokenOpen, setTokenOpen] = React.useState(false);
+  const nativeColorValue = valueIsHex ? toNativeHex(hexDraft) : typeof value === "string" && value in TOKEN_NATIVE_HEX ? TOKEN_NATIVE_HEX[value] : "#ffffff";
+  const currentToken = !valueIsHex ? swatches.find((swatch) => swatch.token === value) : void 0;
+  const triggerChipStyle = valueIsHex ? { background: value } : currentToken?.previewStyle ?? { background: "transparent" };
+  const triggerCaption = valueIsHex ? value : currentToken ? t(currentToken.labelKey, currentToken.fallbackLabel) : t("forms.studio.style.color.tokenTrigger", "Choose a token");
+  return /* @__PURE__ */ jsxs("fieldset", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("legend", { className: "block text-xs font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Popover, { open: tokenOpen, onOpenChange: setTokenOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "2xs",
+            className: "h-7 w-7 shrink-0 justify-center p-0",
+            title: triggerCaption,
+            "aria-label": t("forms.studio.style.color.tokenPickerLabel", "Choose a color token"),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: triggerChipStyle,
+                className: "size-3.5 rounded-sm border border-border"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-56 p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": label, children: swatches.map((swatch) => {
+          const selected = value === swatch.token;
+          const swatchLabel = t(swatch.labelKey, swatch.fallbackLabel);
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "2xs",
+              "aria-pressed": selected,
+              title: swatchLabel,
+              onClick: () => {
+                selectToken(swatch.token);
+                setTokenOpen(false);
+              },
+              className: cn(selected ? "border-primary ring-1 ring-primary" : void 0),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: swatch.previewStyle,
+                    className: "size-3.5 shrink-0 rounded-sm border border-border"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: swatchLabel })
+              ]
+            },
+            swatch.token
+          );
+        }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: nativeColorValue,
+          "aria-label": t("forms.studio.style.color.pickerLabel", "Pick a custom color"),
+          title: t("forms.studio.style.color.pickerLabel", "Pick a custom color"),
+          className: "h-7 w-7 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5",
+          onChange: (event) => handleHexChange(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: hexDraft,
+          inputMode: "text",
+          spellCheck: false,
+          placeholder: t("forms.studio.style.color.hexPlaceholder", "#0f766e"),
+          "aria-label": t("forms.studio.style.color.hexLabel", "Custom hex color"),
+          "aria-invalid": hexError ? true : void 0,
+          className: "h-7 flex-1 font-mono text-xs",
+          onChange: (event) => handleHexChange(event.target.value)
+        }
+      )
+    ] }),
+    hexError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", role: "alert", children: hexError }) : null,
+    aaWarning ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-warning-text", role: "status", children: aaWarning }) : null
+  ] });
+}
+export {
+  ColorControl
+};
+//# sourceMappingURL=ColorControl.js.map

package/dist/modules/forms/backend/forms/[id]/studio/style/ColorControl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/style/ColorControl.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * Reusable, controlled color picker for the forms styling vocabulary (spec D3).\n *\n * A color is ONLY ever a curated DS-role token OR a strict hex literal \u2014 there\n * is no free-text CSS path. The hex `Input` validates every keystroke against\n * `OM_HEX_COLOR` and never propagates a non-matching value upstream; invalid\n * input surfaces an inline error but leaves the persisted value untouched\n * (R-CS-1). Token swatches are keyboard-focusable DS `Button`s (R-CS-4 a11y).\n * Reused at form/section/field level (Tasks E & F).\n */\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport {\n  OM_HEX_COLOR,\n  type OmColor,\n  type OmColorToken,\n} from '../../../../../schema/style-extensions'\nimport { belowAaForPair } from './contrast'\n\ntype SwatchSpec = {\n  token: OmColorToken\n  labelKey: string\n  fallbackLabel: string\n  /** Inline preview backed by a DS CSS var \u2014 never user data. */\n  previewStyle: React.CSSProperties\n}\n\nconst SWATCHES: ReadonlyArray<SwatchSpec> = [\n  { token: 'surface', labelKey: 'forms.studio.style.color.token.surface', fallbackLabel: 'Surface', previewStyle: { background: 'var(--card)' } },\n  { token: 'surface-muted', labelKey: 'forms.studio.style.color.token.surfaceMuted', fallbackLabel: 'Surface muted', previewStyle: { background: 'var(--muted)' } },\n  { token: 'foreground', labelKey: 'forms.studio.style.color.token.foreground', fallbackLabel: 'Foreground', previewStyle: { background: 'var(--foreground)' } },\n  { token: 'muted-foreground', labelKey: 'forms.studio.style.color.token.mutedForeground', fallbackLabel: 'Muted text', previewStyle: { background: 'var(--muted-foreground)' } },\n  { token: 'accent', labelKey: 'forms.studio.style.color.token.accent', fallbackLabel: 'Accent', previewStyle: { background: 'var(--primary)' } },\n  { token: 'border', labelKey: 'forms.studio.style.color.token.border', fallbackLabel: 'Border', previewStyle: { background: 'var(--border)' } },\n  { token: 'transparent', labelKey: 'forms.studio.style.color.token.transparent', fallbackLabel: 'Transparent', previewStyle: { background: 'transparent' } },\n  { token: 'inherit', labelKey: 'forms.studio.style.color.token.inherit', fallbackLabel: 'Inherit', previewStyle: { background: 'transparent' } },\n]\n\nfunction isHex(value: string): boolean {\n  return OM_HEX_COLOR.test(value)\n}\n\n/**\n * Coerce the current draft into the `#rrggbb` literal the native `<input\n * type=\"color\">` requires (it cannot represent `#rgb`, an 8-digit alpha hex, or\n * a DS token). 3-digit shorthand expands; anything else falls back to black so\n * the swatch always has a valid value. The picker only ever EMITS a 6-digit\n * lowercase hex, which passes `OM_HEX_COLOR` \u2014 so it stays inside the token-or-\n * hex security model (R-CS-1) with no free-text CSS path.\n */\nfunction toNativeHex(draft: string): string {\n  const value = draft.trim()\n  if (/^#[0-9a-fA-F]{6}$/.test(value)) return value\n  if (/^#[0-9a-fA-F]{3}$/.test(value)) {\n    return `#${value.slice(1).split('').map((char) => char + char).join('')}`\n  }\n  return '#000000'\n}\n\n/**\n * Concrete light-mode hex for each curated token, so the native color picker\n * reflects the *selected token's* color instead of a misleading black `#000000`\n * (`transparent` / `inherit` have no concrete color \u2192 neutral white). Display\n * only \u2014 never persisted; selecting a token still emits the token, not this hex.\n */\nconst TOKEN_NATIVE_HEX: Record<OmColorToken, string> = {\n  surface: '#ffffff',\n  'surface-muted': '#f5f5f5',\n  foreground: '#0a0a0a',\n  'muted-foreground': '#737373',\n  accent: '#171717',\n  border: '#e5e5e5',\n  transparent: '#ffffff',\n  inherit: '#ffffff',\n}\n\nexport type ColorControlProps = {\n  value?: OmColor\n  onChange: (next: OmColor | undefined) => void\n  label: string\n  /** When false, the `transparent` token swatch is hidden. */\n  allowTransparent?: boolean\n  /**\n   * Optional companion color for a foreground/background AA check (R-CS-4).\n   * Only evaluated when BOTH this value and the companion are custom hex\n   * literals; tokens are always treated as contrast-safe.\n   */\n  contrastAgainst?: OmColor\n}\n\nexport function ColorControl({\n  value,\n  onChange,\n  label,\n  allowTransparent = true,\n  contrastAgainst,\n}: ColorControlProps) {\n  const t = useT()\n  const valueIsHex = typeof value === 'string' && isHex(value)\n  const [hexDraft, setHexDraft] = React.useState(valueIsHex ? (value as string) : '')\n  const [hexError, setHexError] = React.useState<string | null>(null)\n\n  React.useEffect(() => {\n    if (valueIsHex) setHexDraft(value as string)\n  }, [value, valueIsHex])\n\n  const handleHexChange = React.useCallback(\n    (raw: string) => {\n      setHexDraft(raw)\n      const trimmed = raw.trim()\n      if (trimmed === '') {\n        setHexError(null)\n        onChange(undefined)\n        return\n      }\n      if (isHex(trimmed)) {\n        setHexError(null)\n        onChange(trimmed as OmColor)\n        return\n      }\n      // Invalid: surface an inline error and DO NOT propagate (R-CS-1).\n      setHexError(t('forms.studio.style.color.hexError', 'Use a hex value like #0f766e'))\n    },\n    [onChange, t],\n  )\n\n  const selectToken = React.useCallback(\n    (token: OmColorToken) => {\n      setHexError(null)\n      onChange(token)\n    },\n    [onChange],\n  )\n\n  // AA check: token-aware, fires whenever at least one side is a custom hex\n  // (the branded case the old hex-only check missed). Token-vs-token pairs are\n  // DS-curated and skipped to avoid false positives.\n  const aaWarning = React.useMemo(() => {\n    const ratio = belowAaForPair(value, contrastAgainst)\n    if (ratio === null) return null\n    return t('forms.studio.style.color.aaWarning', 'Low contrast \u2014 may be hard to read')\n  }, [value, contrastAgainst, t])\n\n  const swatches = SWATCHES.filter((swatch) => allowTransparent || swatch.token !== 'transparent')\n  const [tokenOpen, setTokenOpen] = React.useState(false)\n\n  // Native picker reflects the current value: the hex draft, or the concrete\n  // color of a selected token (instead of a misleading black square).\n  const nativeColorValue = valueIsHex\n    ? toNativeHex(hexDraft)\n    : typeof value === 'string' && value in TOKEN_NATIVE_HEX\n      ? TOKEN_NATIVE_HEX[value as OmColorToken]\n      : '#ffffff'\n\n  // Current selection summarized on the popover trigger (chip + caption) so the\n  // 8 token swatches collapse from a 3-row grid into one row (rail height).\n  const currentToken = !valueIsHex ? swatches.find((swatch) => swatch.token === value) : undefined\n  const triggerChipStyle: React.CSSProperties = valueIsHex\n    ? { background: value as string }\n    : currentToken?.previewStyle ?? { background: 'transparent' }\n  const triggerCaption = valueIsHex\n    ? (value as string)\n    : currentToken\n      ? t(currentToken.labelKey, currentToken.fallbackLabel)\n      : t('forms.studio.style.color.tokenTrigger', 'Choose a token')\n\n  return (\n    <fieldset className=\"space-y-1\">\n      <legend className=\"block text-xs font-medium text-foreground\">{label}</legend>\n      <div className=\"flex items-center gap-2\">\n        <Popover open={tokenOpen} onOpenChange={setTokenOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"2xs\"\n              className=\"h-7 w-7 shrink-0 justify-center p-0\"\n              title={triggerCaption}\n              aria-label={t('forms.studio.style.color.tokenPickerLabel', 'Choose a color token')}\n            >\n              <span\n                aria-hidden=\"true\"\n                style={triggerChipStyle}\n                className=\"size-3.5 rounded-sm border border-border\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-56 p-2\">\n            <div className=\"flex flex-wrap gap-2\" role=\"group\" aria-label={label}>\n              {swatches.map((swatch) => {\n                const selected = value === swatch.token\n                const swatchLabel = t(swatch.labelKey, swatch.fallbackLabel)\n                return (\n                  <Button\n                    key={swatch.token}\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"2xs\"\n                    aria-pressed={selected}\n                    title={swatchLabel}\n                    onClick={() => {\n                      selectToken(swatch.token)\n                      setTokenOpen(false)\n                    }}\n                    className={cn(selected ? 'border-primary ring-1 ring-primary' : undefined)}\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      style={swatch.previewStyle}\n                      className=\"size-3.5 shrink-0 rounded-sm border border-border\"\n                    />\n                    <span className=\"text-muted-foreground\">{swatchLabel}</span>\n                  </Button>\n                )\n              })}\n            </div>\n          </PopoverContent>\n        </Popover>\n        <input\n          type=\"color\"\n          value={nativeColorValue}\n          aria-label={t('forms.studio.style.color.pickerLabel', 'Pick a custom color')}\n          title={t('forms.studio.style.color.pickerLabel', 'Pick a custom color')}\n          className=\"h-7 w-7 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5\"\n          onChange={(event) => handleHexChange(event.target.value)}\n        />\n        <Input\n          value={hexDraft}\n          inputMode=\"text\"\n          spellCheck={false}\n          placeholder={t('forms.studio.style.color.hexPlaceholder', '#0f766e')}\n          aria-label={t('forms.studio.style.color.hexLabel', 'Custom hex color')}\n          aria-invalid={hexError ? true : undefined}\n          className=\"h-7 flex-1 font-mono text-xs\"\n          onChange={(event) => handleHexChange(event.target.value)}\n        />\n      </div>\n      {hexError ? (\n        <p className=\"text-xs text-status-error-text\" role=\"alert\">\n          {hexError}\n        </p>\n      ) : null}\n      {aaWarning ? (\n        <p className=\"text-xs text-status-warning-text\" role=\"status\">\n          {aaWarning}\n        </p>\n      ) : null}\n    </fieldset>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/style/contrast.js

@@ -0,0 +1,75 @@
+import { OM_HEX_COLOR } from "../../../../../schema/style-extensions.js";
+const TOKEN_LIGHT_HEX = {
+  surface: "#ffffff",
+  "surface-muted": "#f5f5f5",
+  foreground: "#0a0a0a",
+  "muted-foreground": "#737373",
+  accent: "#171717",
+  border: "#e5e5e5"
+};
+function expandShortHex(hex) {
+  if (hex.length === 4) {
+    const r = hex[1];
+    const g = hex[2];
+    const b = hex[3];
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return hex;
+}
+function parseHex(value) {
+  if (!OM_HEX_COLOR.test(value)) return null;
+  const expanded = expandShortHex(value);
+  const r = Number.parseInt(expanded.slice(1, 3), 16);
+  const g = Number.parseInt(expanded.slice(3, 5), 16);
+  const b = Number.parseInt(expanded.slice(5, 7), 16);
+  if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b)) return null;
+  return { r, g, b };
+}
+function channelLuminance(channel) {
+  const normalized = channel / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance({ r, g, b }) {
+  return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b);
+}
+function contrastRatio(hexA, hexB) {
+  const a = parseHex(hexA);
+  const b = parseHex(hexB);
+  if (!a || !b) return null;
+  const lumA = relativeLuminance(a);
+  const lumB = relativeLuminance(b);
+  const lighter = Math.max(lumA, lumB);
+  const darker = Math.min(lumA, lumB);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+const AA_CONTRAST_RATIO = 4.5;
+function meetsAA(ratio) {
+  return ratio >= AA_CONTRAST_RATIO;
+}
+function resolveColorToRgb(color) {
+  if (typeof color !== "string" || color.length === 0) return null;
+  if (OM_HEX_COLOR.test(color)) return parseHex(color);
+  const tokenHex = TOKEN_LIGHT_HEX[color];
+  return tokenHex ? parseHex(tokenHex) : null;
+}
+function belowAaForPair(a, b) {
+  const aIsHex = typeof a === "string" && OM_HEX_COLOR.test(a);
+  const bIsHex = typeof b === "string" && OM_HEX_COLOR.test(b);
+  if (!aIsHex && !bIsHex) return null;
+  const rgbA = resolveColorToRgb(a);
+  const rgbB = resolveColorToRgb(b);
+  if (!rgbA || !rgbB) return null;
+  const lighter = Math.max(relativeLuminance(rgbA), relativeLuminance(rgbB));
+  const darker = Math.min(relativeLuminance(rgbA), relativeLuminance(rgbB));
+  const ratio = (lighter + 0.05) / (darker + 0.05);
+  return meetsAA(ratio) ? null : ratio;
+}
+export {
+  AA_CONTRAST_RATIO,
+  belowAaForPair,
+  contrastRatio,
+  meetsAA,
+  parseHex,
+  resolveColorToRgb
+};
+//# sourceMappingURL=contrast.js.map

package/dist/modules/forms/backend/forms/[id]/studio/style/contrast.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/style/contrast.ts"],
+  "sourcesContent": ["/**\n * Pure WCAG contrast helpers for the studio color controls (spec R-CS-4).\n *\n * Only ever fed strict hex literals (`#rgb`, `#rrggbb`, `#rrggbbaa`) \u2014 the\n * curated DS-role tokens are always considered contrast-safe and skip this\n * path. No I/O, no DOM, no `any`. Used to surface a non-blocking AA warning\n * when an author pairs a custom foreground/background below 4.5:1.\n */\n\nimport { OM_HEX_COLOR, type OmColor } from '../../../../../schema/style-extensions'\n\ntype Rgb = { r: number; g: number; b: number }\n\n/**\n * Light-mode sRGB values of the curated DS-role tokens (the `:root` neutral\n * scale in `apps/mercato/src/app/globals.css`). Used so the AA check can compare\n * a custom hex against a token (the common branded case \u2014 e.g. custom text on\n * the default surface). `transparent` / `inherit` have no concrete color, so\n * they are intentionally absent and skip the check.\n */\nconst TOKEN_LIGHT_HEX: Partial<Record<OmColor, string>> = {\n  surface: '#ffffff',\n  'surface-muted': '#f5f5f5',\n  foreground: '#0a0a0a',\n  'muted-foreground': '#737373',\n  accent: '#171717',\n  border: '#e5e5e5',\n}\n\nfunction expandShortHex(hex: string): string {\n  if (hex.length === 4) {\n    const r = hex[1]\n    const g = hex[2]\n    const b = hex[3]\n    return `#${r}${r}${g}${g}${b}${b}`\n  }\n  return hex\n}\n\n/** Parses a strict hex literal into 0\u2013255 channels, or `null` when malformed. */\nexport function parseHex(value: string): Rgb | null {\n  if (!OM_HEX_COLOR.test(value)) return null\n  const expanded = expandShortHex(value)\n  const r = Number.parseInt(expanded.slice(1, 3), 16)\n  const g = Number.parseInt(expanded.slice(3, 5), 16)\n  const b = Number.parseInt(expanded.slice(5, 7), 16)\n  if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b)) return null\n  return { r, g, b }\n}\n\nfunction channelLuminance(channel: number): number {\n  const normalized = channel / 255\n  return normalized <= 0.03928\n    ? normalized / 12.92\n    : ((normalized + 0.055) / 1.055) ** 2.4\n}\n\nfunction relativeLuminance({ r, g, b }: Rgb): number {\n  return 0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b)\n}\n\n/**\n * WCAG 2.x contrast ratio between two hex colors (1..21). Returns `null` when\n * either value is not a parseable hex literal (callers skip the check for\n * tokens / absent colors).\n */\nexport function contrastRatio(hexA: string, hexB: string): number | null {\n  const a = parseHex(hexA)\n  const b = parseHex(hexB)\n  if (!a || !b) return null\n  const lumA = relativeLuminance(a)\n  const lumB = relativeLuminance(b)\n  const lighter = Math.max(lumA, lumB)\n  const darker = Math.min(lumA, lumB)\n  return (lighter + 0.05) / (darker + 0.05)\n}\n\n/** WCAG AA threshold for normal-size body text. */\nexport const AA_CONTRAST_RATIO = 4.5\n\nexport function meetsAA(ratio: number): boolean {\n  return ratio >= AA_CONTRAST_RATIO\n}\n\n/**\n * Resolve any `OmColor` (hex literal OR curated token) to sRGB for the AA check.\n * Tokens map to their light-mode DS value; `transparent`/`inherit` (no concrete\n * color) and malformed input return `null` so the caller skips the comparison.\n */\nexport function resolveColorToRgb(color: OmColor | undefined): Rgb | null {\n  if (typeof color !== 'string' || color.length === 0) return null\n  if (OM_HEX_COLOR.test(color)) return parseHex(color)\n  const tokenHex = TOKEN_LIGHT_HEX[color]\n  return tokenHex ? parseHex(tokenHex) : null\n}\n\n/**\n * AA contrast between two `OmColor`s when at least one side is a CUSTOM hex.\n * Token-vs-token pairs are DS-curated (always AA-safe) and return `null` to\n * avoid false positives. Returns the ratio when below AA (a warning is due),\n * or `null` when safe / not comparable.\n */\nexport function belowAaForPair(a: OmColor | undefined, b: OmColor | undefined): number | null {\n  const aIsHex = typeof a === 'string' && OM_HEX_COLOR.test(a)\n  const bIsHex = typeof b === 'string' && OM_HEX_COLOR.test(b)\n  if (!aIsHex && !bIsHex) return null\n  const rgbA = resolveColorToRgb(a)\n  const rgbB = resolveColorToRgb(b)\n  if (!rgbA || !rgbB) return null\n  const lighter = Math.max(relativeLuminance(rgbA), relativeLuminance(rgbB))\n  const darker = Math.min(relativeLuminance(rgbA), relativeLuminance(rgbB))\n  const ratio = (lighter + 0.05) / (darker + 0.05)\n  return meetsAA(ratio) ? null : ratio\n}\n"],
+  "mappings": "AASA,SAAS,oBAAkC;AAW3C,MAAM,kBAAoD;AAAA,EACxD,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,SAAS,eAAe,KAAqB;AAC3C,MAAI,IAAI,WAAW,GAAG;AACpB,UAAM,IAAI,IAAI,CAAC;AACf,UAAM,IAAI,IAAI,CAAC;AACf,UAAM,IAAI,IAAI,CAAC;AACf,WAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;AAAA,EAClC;AACA,SAAO;AACT;AAGO,SAAS,SAAS,OAA2B;AAClD,MAAI,CAAC,aAAa,KAAK,KAAK,EAAG,QAAO;AACtC,QAAM,WAAW,eAAe,KAAK;AACrC,QAAM,IAAI,OAAO,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAClD,QAAM,IAAI,OAAO,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAClD,QAAM,IAAI,OAAO,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAClD,MAAI,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,EAAG,QAAO;AAC9E,SAAO,EAAE,GAAG,GAAG,EAAE;AACnB;AAEA,SAAS,iBAAiB,SAAyB;AACjD,QAAM,aAAa,UAAU;AAC7B,SAAO,cAAc,UACjB,aAAa,UACX,aAAa,SAAS,UAAU;AACxC;AAEA,SAAS,kBAAkB,EAAE,GAAG,GAAG,EAAE,GAAgB;AACnD,SAAO,SAAS,iBAAiB,CAAC,IAAI,SAAS,iBAAiB,CAAC,IAAI,SAAS,iBAAiB,CAAC;AAClG;AAOO,SAAS,cAAc,MAAc,MAA6B;AACvE,QAAM,IAAI,SAAS,IAAI;AACvB,QAAM,IAAI,SAAS,IAAI;AACvB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,QAAM,OAAO,kBAAkB,CAAC;AAChC,QAAM,OAAO,kBAAkB,CAAC;AAChC,QAAM,UAAU,KAAK,IAAI,MAAM,IAAI;AACnC,QAAM,SAAS,KAAK,IAAI,MAAM,IAAI;AAClC,UAAQ,UAAU,SAAS,SAAS;AACtC;AAGO,MAAM,oBAAoB;AAE1B,SAAS,QAAQ,OAAwB;AAC9C,SAAO,SAAS;AAClB;AAOO,SAAS,kBAAkB,OAAwC;AACxE,MAAI,OAAO,UAAU,YAAY,MAAM,WAAW,EAAG,QAAO;AAC5D,MAAI,aAAa,KAAK,KAAK,EAAG,QAAO,SAAS,KAAK;AACnD,QAAM,WAAW,gBAAgB,KAAK;AACtC,SAAO,WAAW,SAAS,QAAQ,IAAI;AACzC;AAQO,SAAS,eAAe,GAAwB,GAAuC;AAC5F,QAAM,SAAS,OAAO,MAAM,YAAY,aAAa,KAAK,CAAC;AAC3D,QAAM,SAAS,OAAO,MAAM,YAAY,aAAa,KAAK,CAAC;AAC3D,MAAI,CAAC,UAAU,CAAC,OAAQ,QAAO;AAC/B,QAAM,OAAO,kBAAkB,CAAC;AAChC,QAAM,OAAO,kBAAkB,CAAC;AAChC,MAAI,CAAC,QAAQ,CAAC,KAAM,QAAO;AAC3B,QAAM,UAAU,KAAK,IAAI,kBAAkB,IAAI,GAAG,kBAAkB,IAAI,CAAC;AACzE,QAAM,SAAS,KAAK,IAAI,kBAAkB,IAAI,GAAG,kBAAkB,IAAI,CAAC;AACxE,QAAM,SAAS,UAAU,SAAS,SAAS;AAC3C,SAAO,QAAQ,KAAK,IAAI,OAAO;AACjC;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/style/presets.js

@@ -0,0 +1,91 @@
+const FORM_THEME_PRESETS = [
+  {
+    // App-DS preset — every color is a curated token, so the form renders
+    // identically to the unstyled default but the theme is *explicit* and can
+    // be tweaked field-by-field. Differs from Reset (which clears the theme)
+    // in that the preset card can highlight as active.
+    id: "default",
+    displayNameKey: "forms.studio.style.preset.default",
+    fallbackName: "Default",
+    theme: {
+      surface: "surface",
+      foreground: "foreground",
+      inputText: "foreground",
+      labelColor: "foreground",
+      labelWeight: "medium",
+      accent: "accent",
+      border: "border",
+      fontFamily: "sans",
+      fontScale: "md",
+      radius: "md",
+      contentWidth: "md"
+    }
+  },
+  {
+    id: "minimal",
+    displayNameKey: "forms.studio.style.preset.minimal",
+    fallbackName: "Minimal",
+    theme: {
+      surface: "surface",
+      foreground: "foreground",
+      accent: "accent",
+      border: "border",
+      fontFamily: "system",
+      fontScale: "md",
+      radius: "md",
+      contentWidth: "md"
+    }
+  },
+  {
+    id: "card",
+    displayNameKey: "forms.studio.style.preset.card",
+    fallbackName: "Card",
+    theme: {
+      background: { kind: "color", color: "surface-muted" },
+      surface: "surface",
+      foreground: "foreground",
+      accent: "accent",
+      border: "border",
+      fontFamily: "sans",
+      fontScale: "md",
+      radius: "lg",
+      contentWidth: "sm"
+    }
+  },
+  {
+    id: "branded",
+    displayNameKey: "forms.studio.style.preset.branded",
+    fallbackName: "Branded",
+    theme: {
+      background: { kind: "gradient", from: "#0f766e", to: "#115e59", angle: 135 },
+      surface: "#ffffff",
+      foreground: "#0f172a",
+      accent: "#0f766e",
+      border: "#cbd5e1",
+      fontFamily: "rounded",
+      fontScale: "md",
+      radius: "lg",
+      contentWidth: "md"
+    }
+  },
+  {
+    id: "dark-friendly",
+    displayNameKey: "forms.studio.style.preset.darkFriendly",
+    fallbackName: "Dark-friendly",
+    theme: {
+      background: { kind: "color", color: "#0f172a" },
+      surface: "#1e293b",
+      foreground: "#f1f5f9",
+      accent: "#38bdf8",
+      border: "#334155",
+      fontFamily: "sans",
+      fontScale: "md",
+      radius: "md",
+      contentWidth: "md"
+    }
+  }
+];
+export {
+  FORM_THEME_PRESETS
+};
+//# sourceMappingURL=presets.js.map

package/dist/modules/forms/backend/forms/[id]/studio/style/presets.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/style/presets.ts"],
+  "sourcesContent": ["/**\n * Static, AA-safe `OmTheme` presets for the studio Appearance panel (spec D10).\n *\n * Pure data \u2014 no server state, no I/O. Each preset uses curated DS-role tokens\n * (always contrast- and mode-safe) or AA-checked hex literals. The\n * `displayNameKey` is an i18n key resolved by the panel with a fallback.\n */\n\nimport type { OmTheme } from '../../../../../schema/style-extensions'\n\nexport type FormThemePreset = {\n  id: string\n  displayNameKey: string\n  fallbackName: string\n  theme: OmTheme\n}\n\nexport const FORM_THEME_PRESETS: ReadonlyArray<FormThemePreset> = [\n  {\n    // App-DS preset \u2014 every color is a curated token, so the form renders\n    // identically to the unstyled default but the theme is *explicit* and can\n    // be tweaked field-by-field. Differs from Reset (which clears the theme)\n    // in that the preset card can highlight as active.\n    id: 'default',\n    displayNameKey: 'forms.studio.style.preset.default',\n    fallbackName: 'Default',\n    theme: {\n      surface: 'surface',\n      foreground: 'foreground',\n      inputText: 'foreground',\n      labelColor: 'foreground',\n      labelWeight: 'medium',\n      accent: 'accent',\n      border: 'border',\n      fontFamily: 'sans',\n      fontScale: 'md',\n      radius: 'md',\n      contentWidth: 'md',\n    },\n  },\n  {\n    id: 'minimal',\n    displayNameKey: 'forms.studio.style.preset.minimal',\n    fallbackName: 'Minimal',\n    theme: {\n      surface: 'surface',\n      foreground: 'foreground',\n      accent: 'accent',\n      border: 'border',\n      fontFamily: 'system',\n      fontScale: 'md',\n      radius: 'md',\n      contentWidth: 'md',\n    },\n  },\n  {\n    id: 'card',\n    displayNameKey: 'forms.studio.style.preset.card',\n    fallbackName: 'Card',\n    theme: {\n      background: { kind: 'color', color: 'surface-muted' },\n      surface: 'surface',\n      foreground: 'foreground',\n      accent: 'accent',\n      border: 'border',\n      fontFamily: 'sans',\n      fontScale: 'md',\n      radius: 'lg',\n      contentWidth: 'sm',\n    },\n  },\n  {\n    id: 'branded',\n    displayNameKey: 'forms.studio.style.preset.branded',\n    fallbackName: 'Branded',\n    theme: {\n      background: { kind: 'gradient', from: '#0f766e', to: '#115e59', angle: 135 },\n      surface: '#ffffff',\n      foreground: '#0f172a',\n      accent: '#0f766e',\n      border: '#cbd5e1',\n      fontFamily: 'rounded',\n      fontScale: 'md',\n      radius: 'lg',\n      contentWidth: 'md',\n    },\n  },\n  {\n    id: 'dark-friendly',\n    displayNameKey: 'forms.studio.style.preset.darkFriendly',\n    fallbackName: 'Dark-friendly',\n    theme: {\n      background: { kind: 'color', color: '#0f172a' },\n      surface: '#1e293b',\n      foreground: '#f1f5f9',\n      accent: '#38bdf8',\n      border: '#334155',\n      fontFamily: 'sans',\n      fontScale: 'md',\n      radius: 'md',\n      contentWidth: 'md',\n    },\n  },\n]\n"],
+  "mappings": "AAiBO,MAAM,qBAAqD;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,YAAY,EAAE,MAAM,SAAS,OAAO,gBAAgB;AAAA,MACpD,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,YAAY,EAAE,MAAM,YAAY,MAAM,WAAW,IAAI,WAAW,OAAO,IAAI;AAAA,MAC3E,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,OAAO;AAAA,MACL,YAAY,EAAE,MAAM,SAAS,OAAO,UAAU;AAAA,MAC9C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,cAAc;AAAA,IAChB;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/type-label.js

@@ -0,0 +1,11 @@
+import { defaultFieldTypeRegistry } from "../../../../schema/field-type-registry.js";
+function resolveTypeLabel(typeKey, t) {
+  const key = typeKey || "text";
+  const spec = defaultFieldTypeRegistry.get(key);
+  if (spec?.displayNameKey) return t(spec.displayNameKey);
+  return key.split("_").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+export {
+  resolveTypeLabel
+};
+//# sourceMappingURL=type-label.js.map

package/dist/modules/forms/backend/forms/[id]/studio/type-label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/type-label.ts"],
+  "sourcesContent": ["import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport { defaultFieldTypeRegistry } from '../../../../schema/field-type-registry'\n\nexport function resolveTypeLabel(typeKey: string | undefined, t: TranslateFn): string {\n  const key = typeKey || 'text'\n  const spec = defaultFieldTypeRegistry.get(key)\n  if (spec?.displayNameKey) return t(spec.displayNameKey)\n  return key\n    .split('_')\n    .filter(Boolean)\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join(' ')\n}\n"],
+  "mappings": "AACA,SAAS,gCAAgC;AAElC,SAAS,iBAAiB,SAA6B,GAAwB;AACpF,QAAM,MAAM,WAAW;AACvB,QAAM,OAAO,yBAAyB,IAAI,GAAG;AAC7C,MAAI,MAAM,eAAgB,QAAO,EAAE,KAAK,cAAc;AACtD,SAAO,IACJ,MAAM,GAAG,EACT,OAAO,OAAO,EACd,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC,CAAC,EAC1D,KAAK,GAAG;AACb;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/modules/forms/backend/forms/[id]/studio/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/undo-controller.js

@@ -0,0 +1,43 @@
+function cloneSnapshot(snapshot) {
+  return JSON.parse(JSON.stringify(snapshot));
+}
+function createUndoController({ capacity }) {
+  const undoStack = [];
+  const redoStack = [];
+  const max = Math.max(1, capacity);
+  return {
+    push(snapshot) {
+      undoStack.push(cloneSnapshot(snapshot));
+      if (undoStack.length > max) undoStack.shift();
+      redoStack.length = 0;
+    },
+    undo(current) {
+      const previous = undoStack.pop();
+      if (!previous) return null;
+      redoStack.push(cloneSnapshot(current));
+      if (redoStack.length > max) redoStack.shift();
+      return cloneSnapshot(previous);
+    },
+    redo(current) {
+      const next = redoStack.pop();
+      if (!next) return null;
+      undoStack.push(cloneSnapshot(current));
+      if (undoStack.length > max) undoStack.shift();
+      return cloneSnapshot(next);
+    },
+    canUndo() {
+      return undoStack.length > 0;
+    },
+    canRedo() {
+      return redoStack.length > 0;
+    },
+    clear() {
+      undoStack.length = 0;
+      redoStack.length = 0;
+    }
+  };
+}
+export {
+  createUndoController
+};
+//# sourceMappingURL=undo-controller.js.map

package/dist/modules/forms/backend/forms/[id]/studio/undo-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/undo-controller.ts"],
+  "sourcesContent": ["import type { StudioSnapshot } from './types'\n\nexport type UndoController = {\n  push: (snapshot: StudioSnapshot) => void\n  undo: (current: StudioSnapshot) => StudioSnapshot | null\n  redo: (current: StudioSnapshot) => StudioSnapshot | null\n  canUndo: () => boolean\n  canRedo: () => boolean\n  clear: () => void\n}\n\nfunction cloneSnapshot(snapshot: StudioSnapshot): StudioSnapshot {\n  return JSON.parse(JSON.stringify(snapshot)) as StudioSnapshot\n}\n\nexport function createUndoController({ capacity }: { capacity: number }): UndoController {\n  const undoStack: StudioSnapshot[] = []\n  const redoStack: StudioSnapshot[] = []\n  const max = Math.max(1, capacity)\n\n  return {\n    push(snapshot) {\n      undoStack.push(cloneSnapshot(snapshot))\n      if (undoStack.length > max) undoStack.shift()\n      redoStack.length = 0\n    },\n    undo(current) {\n      const previous = undoStack.pop()\n      if (!previous) return null\n      redoStack.push(cloneSnapshot(current))\n      if (redoStack.length > max) redoStack.shift()\n      return cloneSnapshot(previous)\n    },\n    redo(current) {\n      const next = redoStack.pop()\n      if (!next) return null\n      undoStack.push(cloneSnapshot(current))\n      if (undoStack.length > max) undoStack.shift()\n      return cloneSnapshot(next)\n    },\n    canUndo() {\n      return undoStack.length > 0\n    },\n    canRedo() {\n      return redoStack.length > 0\n    },\n    clear() {\n      undoStack.length = 0\n      redoStack.length = 0\n    },\n  }\n}\n"],
+  "mappings": "AAWA,SAAS,cAAc,UAA0C;AAC/D,SAAO,KAAK,MAAM,KAAK,UAAU,QAAQ,CAAC;AAC5C;AAEO,SAAS,qBAAqB,EAAE,SAAS,GAAyC;AACvF,QAAM,YAA8B,CAAC;AACrC,QAAM,YAA8B,CAAC;AACrC,QAAM,MAAM,KAAK,IAAI,GAAG,QAAQ;AAEhC,SAAO;AAAA,IACL,KAAK,UAAU;AACb,gBAAU,KAAK,cAAc,QAAQ,CAAC;AACtC,UAAI,UAAU,SAAS,IAAK,WAAU,MAAM;AAC5C,gBAAU,SAAS;AAAA,IACrB;AAAA,IACA,KAAK,SAAS;AACZ,YAAM,WAAW,UAAU,IAAI;AAC/B,UAAI,CAAC,SAAU,QAAO;AACtB,gBAAU,KAAK,cAAc,OAAO,CAAC;AACrC,UAAI,UAAU,SAAS,IAAK,WAAU,MAAM;AAC5C,aAAO,cAAc,QAAQ;AAAA,IAC/B;AAAA,IACA,KAAK,SAAS;AACZ,YAAM,OAAO,UAAU,IAAI;AAC3B,UAAI,CAAC,KAAM,QAAO;AAClB,gBAAU,KAAK,cAAc,OAAO,CAAC;AACrC,UAAI,UAAU,SAAS,IAAK,WAAU,MAAM;AAC5C,aAAO,cAAc,IAAI;AAAA,IAC3B;AAAA,IACA,UAAU;AACR,aAAO,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA,UAAU;AACR,aAAO,UAAU,SAAS;AAAA,IAC5B;AAAA,IACA,QAAQ;AACN,gBAAU,SAAS;AACnB,gBAAU,SAAS;AAAA,IACrB;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/modules/forms/backend/forms/[id]/studio/validation/FileConstraintsEditor.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function parseAccept(value) {
+  return value.split(",").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+function parseSizeMb(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  const parsed = Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return Math.round(parsed * 1024 * 1024);
+}
+function FileConstraintsEditor({
+  accept,
+  maxSizeBytes,
+  multiple,
+  onAcceptChange,
+  onMaxSizeChange,
+  onMultipleChange
+}) {
+  const t = useT();
+  const acceptId = React.useId();
+  const maxSizeId = React.useId();
+  const acceptValue = Array.isArray(accept) ? accept.join(", ") : "";
+  const sizeMb = typeof maxSizeBytes === "number" ? maxSizeBytes / (1024 * 1024) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: acceptId, className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.field.file.accept") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: acceptId,
+          type: "text",
+          placeholder: "image/*, application/pdf",
+          value: acceptValue,
+          onChange: (event) => onAcceptChange(parseAccept(event.target.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: maxSizeId, className: "block text-xs font-medium text-muted-foreground", children: t("forms.studio.field.file.maxSizeMb") }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: maxSizeId,
+          type: "number",
+          inputMode: "decimal",
+          min: 0,
+          step: "0.1",
+          value: typeof sizeMb === "number" ? String(sizeMb) : "",
+          onChange: (event) => onMaxSizeChange(parseSizeMb(event.target.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      SwitchField,
+      {
+        label: t("forms.studio.field.file.multiple"),
+        flip: true,
+        checked: multiple,
+        onCheckedChange: (next) => onMultipleChange(Boolean(next))
+      }
+    )
+  ] });
+}
+export {
+  FileConstraintsEditor
+};
+//# sourceMappingURL=FileConstraintsEditor.js.map

package/dist/modules/forms/backend/forms/[id]/studio/validation/FileConstraintsEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/validation/FileConstraintsEditor.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { SwitchField } from '@open-mercato/ui/primitives/switch-field'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport type FileConstraintsEditorProps = {\n  accept: string[] | undefined\n  maxSizeBytes: number | undefined\n  multiple: boolean\n  onAcceptChange: (next: string[]) => void\n  onMaxSizeChange: (next: number | null) => void\n  onMultipleChange: (next: boolean) => void\n}\n\nfunction parseAccept(value: string): string[] {\n  return value\n    .split(',')\n    .map((entry) => entry.trim())\n    .filter((entry) => entry.length > 0)\n}\n\nfunction parseSizeMb(value: string): number | null {\n  const trimmed = value.trim()\n  if (trimmed.length === 0) return null\n  const parsed = Number.parseFloat(trimmed)\n  if (!Number.isFinite(parsed) || parsed <= 0) return null\n  return Math.round(parsed * 1024 * 1024)\n}\n\n/**\n * W4 \u2014 file upload constraints editor. Lets authors restrict accepted MIME\n * types (comma-separated, `image/*` wildcards allowed), cap the size (MB), and\n * toggle multiple-file uploads. The server is always authoritative; these are\n * field-level hints persisted as `x-om-accept` / `x-om-max-size-bytes` /\n * `x-om-multiple`.\n */\nexport function FileConstraintsEditor({\n  accept,\n  maxSizeBytes,\n  multiple,\n  onAcceptChange,\n  onMaxSizeChange,\n  onMultipleChange,\n}: FileConstraintsEditorProps) {\n  const t = useT()\n  const acceptId = React.useId()\n  const maxSizeId = React.useId()\n  const acceptValue = Array.isArray(accept) ? accept.join(', ') : ''\n  const sizeMb = typeof maxSizeBytes === 'number' ? maxSizeBytes / (1024 * 1024) : undefined\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"space-y-1\">\n        <Label htmlFor={acceptId} className=\"block text-xs font-medium text-muted-foreground\">\n          {t('forms.studio.field.file.accept')}\n        </Label>\n        <Input\n          id={acceptId}\n          type=\"text\"\n          placeholder=\"image/*, application/pdf\"\n          value={acceptValue}\n          onChange={(event) => onAcceptChange(parseAccept(event.target.value))}\n        />\n      </div>\n      <div className=\"space-y-1\">\n        <Label htmlFor={maxSizeId} className=\"block text-xs font-medium text-muted-foreground\">\n          {t('forms.studio.field.file.maxSizeMb')}\n        </Label>\n        <Input\n          id={maxSizeId}\n          type=\"number\"\n          inputMode=\"decimal\"\n          min={0}\n          step=\"0.1\"\n          value={typeof sizeMb === 'number' ? String(sizeMb) : ''}\n          onChange={(event) => onMaxSizeChange(parseSizeMb(event.target.value))}\n        />\n      </div>\n      <SwitchField\n        label={t('forms.studio.field.file.multiple')}\n        flip\n        checked={multiple}\n        onCheckedChange={(next) => onMultipleChange(Boolean(next))}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsDM,SACE,KADF;AApDN,YAAY,WAAW;AACvB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,YAAY;AAWrB,SAAS,YAAY,OAAyB;AAC5C,SAAO,MACJ,MAAM,GAAG,EACT,IAAI,CAAC,UAAU,MAAM,KAAK,CAAC,EAC3B,OAAO,CAAC,UAAU,MAAM,SAAS,CAAC;AACvC;AAEA,SAAS,YAAY,OAA8B;AACjD,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,QAAM,SAAS,OAAO,WAAW,OAAO;AACxC,MAAI,CAAC,OAAO,SAAS,MAAM,KAAK,UAAU,EAAG,QAAO;AACpD,SAAO,KAAK,MAAM,SAAS,OAAO,IAAI;AACxC;AASO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,IAAI,KAAK;AACf,QAAM,WAAW,MAAM,MAAM;AAC7B,QAAM,YAAY,MAAM,MAAM;AAC9B,QAAM,cAAc,MAAM,QAAQ,MAAM,IAAI,OAAO,KAAK,IAAI,IAAI;AAChE,QAAM,SAAS,OAAO,iBAAiB,WAAW,gBAAgB,OAAO,QAAQ;AACjF,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAM,SAAS,UAAU,WAAU,mDACjC,YAAE,gCAAgC,GACrC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,eAAe,YAAY,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,MACrE;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAM,SAAS,WAAW,WAAU,mDAClC,YAAE,mCAAmC,GACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAO,OAAO,WAAW,WAAW,OAAO,MAAM,IAAI;AAAA,UACrD,UAAU,CAAC,UAAU,gBAAgB,YAAY,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,MACtE;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,kCAAkC;AAAA,QAC3C,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,iBAAiB,CAAC,SAAS,iBAAiB,QAAQ,IAAI,CAAC;AAAA;AAAA,IAC3D;AAAA,KACF;AAEJ;",
+  "names": []
+}