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

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

@@ -0,0 +1,350 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { X } from "../lucide-icons.js";
+import { HiddenFieldsPanel } from "../logic/HiddenFieldsPanel.js";
+import { VariablesPanel } from "../logic/VariablesPanel.js";
+import { RolesEditor } from "./RolesEditor.js";
+import { YesNoRow } from "../YesNoRow.js";
+const LOCALE_PATTERN = /^[a-z]{2,3}(?:-[A-Z]{2})?$/;
+function isValidLocale(value) {
+  return value.length >= 2 && value.length <= 10 && LOCALE_PATTERN.test(value);
+}
+function InputParametersTab(props) {
+  const t = useT();
+  const {
+    formId,
+    formKey,
+    name,
+    description,
+    supportedLocales,
+    defaultLocale,
+    defaultActorRole,
+    declaredRoles,
+    guestEnabled,
+    density,
+    labelPosition,
+    pageMode,
+    showProgress,
+    pagesCount,
+    hiddenFields,
+    variables,
+    schema,
+    onNameChange,
+    onDescriptionChange,
+    onToggleGuest,
+    onAddRole,
+    onRenameRole,
+    onRemoveRole,
+    onDefaultActorRoleChange,
+    onDensityChange,
+    onLabelPositionChange,
+    onPageModeChange,
+    onShowProgressChange,
+    onHiddenFieldsChange,
+    onVariablesChange,
+    onAddLocale,
+    onRemoveLocale,
+    onDefaultLocaleChange
+  } = props;
+  const [localeDraft, setLocaleDraft] = React.useState("");
+  const localeList = supportedLocales.length === 0 ? ["en"] : supportedLocales;
+  const trimmedDraft = localeDraft.trim();
+  const canAddLocale = isValidLocale(trimmedDraft) && !localeList.includes(trimmedDraft);
+  const submitLocale = React.useCallback(() => {
+    if (!canAddLocale) return;
+    onAddLocale(trimmedDraft);
+    setLocaleDraft("");
+  }, [canAddLocale, onAddLocale, trimmedDraft]);
+  const roleOptions = React.useMemo(() => {
+    const set = /* @__PURE__ */ new Set(["admin"]);
+    for (const role of declaredRoles) set.add(role);
+    if (defaultActorRole) set.add(defaultActorRole);
+    return Array.from(set);
+  }, [declaredRoles, defaultActorRole]);
+  const progressEnabled = pageMode === "paginated" && pagesCount >= 2;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-key",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.key.label")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "forms-studio-form-key",
+          readOnly: true,
+          value: formKey,
+          className: "font-mono text-xs"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-name",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.name.label")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "forms-studio-form-name",
+          value: name,
+          onChange: (event) => onNameChange(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-description",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.description.label")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "forms-studio-form-description",
+          rows: 2,
+          value: description,
+          onChange: (event) => onDescriptionChange(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-foreground", children: t("forms.studio.parameters.locales.label") }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: localeList.map((locale) => {
+        const isDefault = locale === defaultLocale;
+        const canRemove = !isDefault && localeList.length > 1;
+        return /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted/30 py-0.5 pl-2 pr-1 text-xs",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono", children: locale }),
+              isDefault ? /* @__PURE__ */ jsx("span", { className: "text-overline font-semibold uppercase tracking-widest text-muted-foreground", children: t("forms.studio.parameters.locales.defaultBadge") }) : null,
+              canRemove ? /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "size-5",
+                  "aria-label": t("forms.studio.parameters.locales.remove", { locale }),
+                  onClick: () => onRemoveLocale(locale),
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
+                }
+              ) : null
+            ]
+          },
+          locale
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: localeDraft,
+            placeholder: t("forms.studio.parameters.locales.add_placeholder"),
+            "aria-label": t("forms.studio.parameters.locales.add"),
+            className: "h-8 font-mono text-xs",
+            onChange: (event) => setLocaleDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submitLocale();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            disabled: !canAddLocale,
+            onClick: submitLocale,
+            children: t("forms.studio.parameters.locales.add")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-default-locale",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.locales.default")
+        }
+      ),
+      /* @__PURE__ */ jsxs(Select, { value: defaultLocale, onValueChange: onDefaultLocaleChange, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-form-default-locale", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: localeList.map((locale) => /* @__PURE__ */ jsx(SelectItem, { value: locale, children: locale }, locale)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-foreground", children: t("forms.studio.parameters.roles.label") }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.parameters.roles.helper") }),
+      /* @__PURE__ */ jsx(
+        RolesEditor,
+        {
+          roles: roleOptions,
+          guestEnabled,
+          onToggleGuest,
+          onAdd: onAddRole,
+          onRename: onRenameRole,
+          onRemove: onRemoveRole
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-default-role",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.defaultActorRole.label")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: defaultActorRole || "admin",
+          onValueChange: onDefaultActorRoleChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-form-default-role", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: roleOptions.map((role) => /* @__PURE__ */ jsx(SelectItem, { value: role, children: role }, role)) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-density",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.density.label")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: density,
+          onValueChange: (next) => onDensityChange(next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-form-density", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "default", children: t("forms.studio.parameters.density.default") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "compact", children: t("forms.studio.parameters.density.compact") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "spacious", children: t("forms.studio.parameters.density.spacious") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-label-position",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.labelPosition.label")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: labelPosition,
+          onValueChange: (next) => onLabelPositionChange(next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-form-label-position", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "top", children: t("forms.studio.parameters.labelPosition.top") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "left", children: t("forms.studio.parameters.labelPosition.left") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "forms-studio-form-page-mode",
+          className: "block text-xs font-medium text-foreground",
+          children: t("forms.studio.parameters.pageMode.label")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: pageMode,
+          onValueChange: (next) => onPageModeChange(next),
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { id: "forms-studio-form-page-mode", className: "h-8", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "stacked", children: t("forms.studio.parameters.pageMode.stacked") }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "paginated", children: t("forms.studio.parameters.pageMode.paginated") })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        YesNoRow,
+        {
+          label: t("forms.studio.parameters.progress.label"),
+          value: progressEnabled && showProgress,
+          disabled: !progressEnabled,
+          onChange: onShowProgressChange
+        }
+      ),
+      !progressEnabled ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.parameters.progress.helper.disabled") }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-3", children: /* @__PURE__ */ jsx(
+      HiddenFieldsPanel,
+      {
+        formId,
+        entries: hiddenFields,
+        onChange: onHiddenFieldsChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-3", children: /* @__PURE__ */ jsx(
+      VariablesPanel,
+      {
+        schema,
+        entries: variables,
+        onChange: onVariablesChange
+      }
+    ) })
+  ] });
+}
+export {
+  InputParametersTab
+};
+//# sourceMappingURL=InputParametersTab.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/palette/InputParametersTab.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { X } from '../lucide-icons'\nimport { HiddenFieldsPanel } from '../logic/HiddenFieldsPanel'\nimport { VariablesPanel } from '../logic/VariablesPanel'\nimport { RolesEditor } from './RolesEditor'\nimport { YesNoRow } from '../YesNoRow'\nimport type { FormSchema, HiddenFieldEntry, VariableEntry } from '../schema-helpers'\n\nexport type InputParametersTabProps = {\n  formId: string\n  formKey: string\n  name: string\n  description: string\n  supportedLocales: string[]\n  defaultLocale: string\n  defaultActorRole: string\n  declaredRoles: string[]\n  guestEnabled: boolean\n  density: 'default' | 'compact' | 'spacious'\n  labelPosition: 'top' | 'left'\n  pageMode: 'stacked' | 'paginated'\n  showProgress: boolean\n  hiddenFields: HiddenFieldEntry[]\n  variables: VariableEntry[]\n  schema: FormSchema\n  /** Number of derived pages \u2014 used to gate the progress switch (Decision 20c). */\n  pagesCount: number\n  onNameChange: (next: string) => void\n  onDescriptionChange: (next: string) => void\n  onToggleGuest: (enabled: boolean) => void\n  onAddRole: (role: string) => void\n  onRenameRole: (oldRole: string, newRole: string) => void\n  onRemoveRole: (role: string) => void\n  onDefaultActorRoleChange: (next: string) => void\n  onDensityChange: (next: 'default' | 'compact' | 'spacious') => void\n  onLabelPositionChange: (next: 'top' | 'left') => void\n  onPageModeChange: (next: 'stacked' | 'paginated') => void\n  onShowProgressChange: (next: boolean) => void\n  onHiddenFieldsChange: (entries: HiddenFieldEntry[]) => void\n  onVariablesChange: (entries: VariableEntry[]) => void\n  onAddLocale: (locale: string) => void\n  onRemoveLocale: (locale: string) => void\n  onDefaultLocaleChange: (locale: string) => void\n}\n\n/** Mirrors `localeSchema` (validators.ts): BCP-47 shape like `en` or `en-US`. */\nconst LOCALE_PATTERN = /^[a-z]{2,3}(?:-[A-Z]{2})?$/\n\nfunction isValidLocale(value: string): boolean {\n  return value.length >= 2 && value.length <= 10 && LOCALE_PATTERN.test(value)\n}\n\nexport function InputParametersTab(props: InputParametersTabProps) {\n  const t = useT()\n  const {\n    formId,\n    formKey,\n    name,\n    description,\n    supportedLocales,\n    defaultLocale,\n    defaultActorRole,\n    declaredRoles,\n    guestEnabled,\n    density,\n    labelPosition,\n    pageMode,\n    showProgress,\n    pagesCount,\n    hiddenFields,\n    variables,\n    schema,\n    onNameChange,\n    onDescriptionChange,\n    onToggleGuest,\n    onAddRole,\n    onRenameRole,\n    onRemoveRole,\n    onDefaultActorRoleChange,\n    onDensityChange,\n    onLabelPositionChange,\n    onPageModeChange,\n    onShowProgressChange,\n    onHiddenFieldsChange,\n    onVariablesChange,\n    onAddLocale,\n    onRemoveLocale,\n    onDefaultLocaleChange,\n  } = props\n\n  const [localeDraft, setLocaleDraft] = React.useState('')\n  const localeList = supportedLocales.length === 0 ? ['en'] : supportedLocales\n  const trimmedDraft = localeDraft.trim()\n  const canAddLocale =\n    isValidLocale(trimmedDraft) && !localeList.includes(trimmedDraft)\n  const submitLocale = React.useCallback(() => {\n    if (!canAddLocale) return\n    onAddLocale(trimmedDraft)\n    setLocaleDraft('')\n  }, [canAddLocale, onAddLocale, trimmedDraft])\n\n  const roleOptions = React.useMemo(() => {\n    const set = new Set<string>(['admin'])\n    for (const role of declaredRoles) set.add(role)\n    if (defaultActorRole) set.add(defaultActorRole)\n    return Array.from(set)\n  }, [declaredRoles, defaultActorRole])\n\n  // Decision 20c \u2014 progress is meaningful only when paginated AND >= 2 pages.\n  const progressEnabled = pageMode === 'paginated' && pagesCount >= 2\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-key\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.key.label')}\n        </label>\n        <Input\n          id=\"forms-studio-form-key\"\n          readOnly\n          value={formKey}\n          className=\"font-mono text-xs\"\n        />\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-name\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.name.label')}\n        </label>\n        <Input\n          id=\"forms-studio-form-name\"\n          value={name}\n          onChange={(event) => onNameChange(event.target.value)}\n        />\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-description\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.description.label')}\n        </label>\n        <Textarea\n          id=\"forms-studio-form-description\"\n          rows={2}\n          value={description}\n          onChange={(event) => onDescriptionChange(event.target.value)}\n        />\n      </div>\n      <div className=\"space-y-2\">\n        <span className=\"block text-xs font-medium text-foreground\">\n          {t('forms.studio.parameters.locales.label')}\n        </span>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {localeList.map((locale) => {\n            const isDefault = locale === defaultLocale\n            const canRemove = !isDefault && localeList.length > 1\n            return (\n              <span\n                key={locale}\n                className=\"inline-flex items-center gap-1 rounded-md border border-border bg-muted/30 py-0.5 pl-2 pr-1 text-xs\"\n              >\n                <span className=\"font-mono\">{locale}</span>\n                {isDefault ? (\n                  <span className=\"text-overline font-semibold uppercase tracking-widest text-muted-foreground\">\n                    {t('forms.studio.parameters.locales.defaultBadge')}\n                  </span>\n                ) : null}\n                {canRemove ? (\n                  <IconButton\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"size-5\"\n                    aria-label={t('forms.studio.parameters.locales.remove', { locale })}\n                    onClick={() => onRemoveLocale(locale)}\n                  >\n                    <X className=\"size-3\" aria-hidden=\"true\" />\n                  </IconButton>\n                ) : null}\n              </span>\n            )\n          })}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Input\n            value={localeDraft}\n            placeholder={t('forms.studio.parameters.locales.add_placeholder')}\n            aria-label={t('forms.studio.parameters.locales.add')}\n            className=\"h-8 font-mono text-xs\"\n            onChange={(event) => setLocaleDraft(event.target.value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter') {\n                event.preventDefault()\n                submitLocale()\n              }\n            }}\n          />\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            disabled={!canAddLocale}\n            onClick={submitLocale}\n          >\n            {t('forms.studio.parameters.locales.add')}\n          </Button>\n        </div>\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-default-locale\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.locales.default')}\n        </label>\n        <Select value={defaultLocale} onValueChange={onDefaultLocaleChange}>\n          <SelectTrigger id=\"forms-studio-form-default-locale\" className=\"h-8\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {localeList.map((locale) => (\n              <SelectItem key={locale} value={locale}>\n                {locale}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"space-y-1\">\n        <span className=\"block text-xs font-medium text-foreground\">\n          {t('forms.studio.parameters.roles.label')}\n        </span>\n        <p className=\"text-xs text-muted-foreground\">\n          {t('forms.studio.parameters.roles.helper')}\n        </p>\n        <RolesEditor\n          roles={roleOptions}\n          guestEnabled={guestEnabled}\n          onToggleGuest={onToggleGuest}\n          onAdd={onAddRole}\n          onRename={onRenameRole}\n          onRemove={onRemoveRole}\n        />\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-default-role\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.defaultActorRole.label')}\n        </label>\n        <Select\n          value={defaultActorRole || 'admin'}\n          onValueChange={onDefaultActorRoleChange}\n        >\n          <SelectTrigger id=\"forms-studio-form-default-role\" className=\"h-8\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {roleOptions.map((role) => (\n              <SelectItem key={role} value={role}>\n                {role}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-density\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.density.label')}\n        </label>\n        <Select\n          value={density}\n          onValueChange={(next) => onDensityChange(next as 'default' | 'compact' | 'spacious')}\n        >\n          <SelectTrigger id=\"forms-studio-form-density\" className=\"h-8\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"default\">{t('forms.studio.parameters.density.default')}</SelectItem>\n            <SelectItem value=\"compact\">{t('forms.studio.parameters.density.compact')}</SelectItem>\n            <SelectItem value=\"spacious\">{t('forms.studio.parameters.density.spacious')}</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-label-position\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.labelPosition.label')}\n        </label>\n        <Select\n          value={labelPosition}\n          onValueChange={(next) => onLabelPositionChange(next as 'top' | 'left')}\n        >\n          <SelectTrigger id=\"forms-studio-form-label-position\" className=\"h-8\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"top\">{t('forms.studio.parameters.labelPosition.top')}</SelectItem>\n            <SelectItem value=\"left\">{t('forms.studio.parameters.labelPosition.left')}</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"space-y-1\">\n        <label\n          htmlFor=\"forms-studio-form-page-mode\"\n          className=\"block text-xs font-medium text-foreground\"\n        >\n          {t('forms.studio.parameters.pageMode.label')}\n        </label>\n        <Select\n          value={pageMode}\n          onValueChange={(next) => onPageModeChange(next as 'stacked' | 'paginated')}\n        >\n          <SelectTrigger id=\"forms-studio-form-page-mode\" className=\"h-8\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"stacked\">{t('forms.studio.parameters.pageMode.stacked')}</SelectItem>\n            <SelectItem value=\"paginated\">{t('forms.studio.parameters.pageMode.paginated')}</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"space-y-1\">\n        <YesNoRow\n          label={t('forms.studio.parameters.progress.label')}\n          value={progressEnabled && showProgress}\n          disabled={!progressEnabled}\n          onChange={onShowProgressChange}\n        />\n        {!progressEnabled ? (\n          <p className=\"text-xs text-muted-foreground\">\n            {t('forms.studio.parameters.progress.helper.disabled')}\n          </p>\n        ) : null}\n      </div>\n      <div className=\"border-t border-border pt-3\">\n        <HiddenFieldsPanel\n          formId={formId}\n          entries={hiddenFields}\n          onChange={onHiddenFieldsChange}\n        />\n      </div>\n      <div className=\"border-t border-border pt-3\">\n        <VariablesPanel\n          schema={schema}\n          entries={variables}\n          onChange={onVariablesChange}\n        />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AA+HM,SACE,KADF;AA7HN,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS;AAClB,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAyCzB,MAAM,iBAAiB;AAEvB,SAAS,cAAc,OAAwB;AAC7C,SAAO,MAAM,UAAU,KAAK,MAAM,UAAU,MAAM,eAAe,KAAK,KAAK;AAC7E;AAEO,SAAS,mBAAmB,OAAgC;AACjE,QAAM,IAAI,KAAK;AACf,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,EAAE;AACvD,QAAM,aAAa,iBAAiB,WAAW,IAAI,CAAC,IAAI,IAAI;AAC5D,QAAM,eAAe,YAAY,KAAK;AACtC,QAAM,eACJ,cAAc,YAAY,KAAK,CAAC,WAAW,SAAS,YAAY;AAClE,QAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,QAAI,CAAC,aAAc;AACnB,gBAAY,YAAY;AACxB,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,cAAc,aAAa,YAAY,CAAC;AAE5C,QAAM,cAAc,MAAM,QAAQ,MAAM;AACtC,UAAM,MAAM,oBAAI,IAAY,CAAC,OAAO,CAAC;AACrC,eAAW,QAAQ,cAAe,KAAI,IAAI,IAAI;AAC9C,QAAI,iBAAkB,KAAI,IAAI,gBAAgB;AAC9C,WAAO,MAAM,KAAK,GAAG;AAAA,EACvB,GAAG,CAAC,eAAe,gBAAgB,CAAC;AAGpC,QAAM,kBAAkB,aAAa,eAAe,cAAc;AAElE,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,mCAAmC;AAAA;AAAA,MACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,oCAAoC;AAAA;AAAA,MACzC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,aAAa,MAAM,OAAO,KAAK;AAAA;AAAA,MACtD;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,2CAA2C;AAAA;AAAA,MAChD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,oBAAoB,MAAM,OAAO,KAAK;AAAA;AAAA,MAC7D;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,UAAK,WAAU,6CACb,YAAE,uCAAuC,GAC5C;AAAA,MACA,oBAAC,SAAI,WAAU,0BACZ,qBAAW,IAAI,CAAC,WAAW;AAC1B,cAAM,YAAY,WAAW;AAC7B,cAAM,YAAY,CAAC,aAAa,WAAW,SAAS;AACpD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,aAAa,kBAAO;AAAA,cACnC,YACC,oBAAC,UAAK,WAAU,+EACb,YAAE,8CAA8C,GACnD,IACE;AAAA,cACH,YACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,cAAY,EAAE,0CAA0C,EAAE,OAAO,CAAC;AAAA,kBAClE,SAAS,MAAM,eAAe,MAAM;AAAA,kBAEpC,8BAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,cAC3C,IACE;AAAA;AAAA;AAAA,UApBC;AAAA,QAqBP;AAAA,MAEJ,CAAC,GACH;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,aAAa,EAAE,iDAAiD;AAAA,YAChE,cAAY,EAAE,qCAAqC;AAAA,YACnD,WAAU;AAAA,YACV,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA,YACtD,WAAW,CAAC,UAAU;AACpB,kBAAI,MAAM,QAAQ,SAAS;AACzB,sBAAM,eAAe;AACrB,6BAAa;AAAA,cACf;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YAER,YAAE,qCAAqC;AAAA;AAAA,QAC1C;AAAA,SACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,yCAAyC;AAAA;AAAA,MAC9C;AAAA,MACA,qBAAC,UAAO,OAAO,eAAe,eAAe,uBAC3C;AAAA,4BAAC,iBAAc,IAAG,oCAAmC,WAAU,OAC7D,8BAAC,eAAY,GACf;AAAA,QACA,oBAAC,iBACE,qBAAW,IAAI,CAAC,WACf,oBAAC,cAAwB,OAAO,QAC7B,oBADc,MAEjB,CACD,GACH;AAAA,SACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,UAAK,WAAU,6CACb,YAAE,qCAAqC,GAC1C;AAAA,MACA,oBAAC,OAAE,WAAU,iCACV,YAAE,sCAAsC,GAC3C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,gDAAgD;AAAA;AAAA,MACrD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,oBAAoB;AAAA,UAC3B,eAAe;AAAA,UAEf;AAAA,gCAAC,iBAAc,IAAG,kCAAiC,WAAU,OAC3D,8BAAC,eAAY,GACf;AAAA,YACA,oBAAC,iBACE,sBAAY,IAAI,CAAC,SAChB,oBAAC,cAAsB,OAAO,MAC3B,kBADc,IAEjB,CACD,GACH;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,uCAAuC;AAAA;AAAA,MAC5C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,SAAS,gBAAgB,IAA0C;AAAA,UAEnF;AAAA,gCAAC,iBAAc,IAAG,6BAA4B,WAAU,OACtD,8BAAC,eAAY,GACf;AAAA,YACA,qBAAC,iBACC;AAAA,kCAAC,cAAW,OAAM,WAAW,YAAE,yCAAyC,GAAE;AAAA,cAC1E,oBAAC,cAAW,OAAM,WAAW,YAAE,yCAAyC,GAAE;AAAA,cAC1E,oBAAC,cAAW,OAAM,YAAY,YAAE,0CAA0C,GAAE;AAAA,eAC9E;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,6CAA6C;AAAA;AAAA,MAClD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,SAAS,sBAAsB,IAAsB;AAAA,UAErE;AAAA,gCAAC,iBAAc,IAAG,oCAAmC,WAAU,OAC7D,8BAAC,eAAY,GACf;AAAA,YACA,qBAAC,iBACC;AAAA,kCAAC,cAAW,OAAM,OAAO,YAAE,2CAA2C,GAAE;AAAA,cACxE,oBAAC,cAAW,OAAM,QAAQ,YAAE,4CAA4C,GAAE;AAAA,eAC5E;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UAET,YAAE,wCAAwC;AAAA;AAAA,MAC7C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,SAAS,iBAAiB,IAA+B;AAAA,UAEzE;AAAA,gCAAC,iBAAc,IAAG,+BAA8B,WAAU,OACxD,8BAAC,eAAY,GACf;AAAA,YACA,qBAAC,iBACC;AAAA,kCAAC,cAAW,OAAM,WAAW,YAAE,0CAA0C,GAAE;AAAA,cAC3E,oBAAC,cAAW,OAAM,aAAa,YAAE,4CAA4C,GAAE;AAAA,eACjF;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,wCAAwC;AAAA,UACjD,OAAO,mBAAmB;AAAA,UAC1B,UAAU,CAAC;AAAA,UACX,UAAU;AAAA;AAAA,MACZ;AAAA,MACC,CAAC,kBACA,oBAAC,OAAE,WAAU,iCACV,YAAE,kDAAkD,GACvD,IACE;AAAA,OACN;AAAA,IACA,oBAAC,SAAI,WAAU,+BACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,IACZ,GACF;AAAA,IACA,oBAAC,SAAI,WAAU,+BACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA;AAAA,IACZ,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDraggable } from "@dnd-kit/core";
+import { Button } from "@open-mercato/ui/primitives/button";
+const PALETTE_DRAGGABLE_PREFIX = "palette:";
+const paletteDraggableId = (id) => `${PALETTE_DRAGGABLE_PREFIX}${id}`;
+function PaletteCard({
+  id,
+  Icon,
+  label
+}) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
+    id: paletteDraggableId(id)
+  });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref: setNodeRef,
+      type: "button",
+      variant: "outline",
+      className: "h-auto w-full justify-start px-3 py-2 text-left",
+      style: {
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+        opacity: isDragging ? 0.5 : 1
+      },
+      ...attributes,
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+export {
+  PALETTE_DRAGGABLE_PREFIX,
+  PaletteCard,
+  paletteDraggableId
+};
+//# sourceMappingURL=PaletteCard.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/modules/forms/backend/forms/%5Bid%5D/studio/palette/PaletteCard.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport type { LucideIcon } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\n\nexport const PALETTE_DRAGGABLE_PREFIX = 'palette:'\n\nexport const paletteDraggableId = (id: string): string => `${PALETTE_DRAGGABLE_PREFIX}${id}`\n\nexport function PaletteCard({\n  id,\n  Icon,\n  label,\n}: {\n  id: string\n  Icon: LucideIcon\n  label: string\n}) {\n  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({\n    id: paletteDraggableId(id),\n  })\n  return (\n    <Button\n      ref={setNodeRef}\n      type=\"button\"\n      variant=\"outline\"\n      className=\"h-auto w-full justify-start px-3 py-2 text-left\"\n      style={{\n        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n        opacity: isDragging ? 0.5 : 1,\n      }}\n      {...attributes}\n      {...listeners}\n    >\n      <Icon className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n      <span className=\"truncate\">{label}</span>\n    </Button>\n  )\n}\n"],
+  "mappings": ";AAuBI,SAYE,KAZF;AArBJ,SAAS,oBAAoB;AAE7B,SAAS,cAAc;AAEhB,MAAM,2BAA2B;AAEjC,MAAM,qBAAqB,CAAC,OAAuB,GAAG,wBAAwB,GAAG,EAAE;AAEnF,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,YAAY,WAAW,YAAY,WAAW,WAAW,IAAI,aAAa;AAAA,IAChF,IAAI,mBAAmB,EAAE;AAAA,EAC3B,CAAC;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAO;AAAA,QACL,WAAW,YAAY,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC,WAAW;AAAA,QAC9E,SAAS,aAAa,MAAM;AAAA,MAC9B;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,WAAU,yCAAwC,eAAY,QAAO;AAAA,QAC3E,oBAAC,UAAK,WAAU,YAAY,iBAAM;AAAA;AAAA;AAAA,EACpC;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Plus, Trash2 } from "../lucide-icons.js";
+import { GUEST_ROLE } from "../schema-helpers.js";
+import { YesNoRow } from "../YesNoRow.js";
+const ROLE_PATTERN = /^[a-z][a-z0-9_-]*$/;
+const RESERVED_ROLES = /* @__PURE__ */ new Set(["admin", GUEST_ROLE]);
+function isValidRoleId(value) {
+  return value.length >= 2 && value.length <= 64 && ROLE_PATTERN.test(value);
+}
+function RoleRow({
+  role,
+  roles,
+  onRename,
+  onRemove
+}) {
+  const t = useT();
+  const [draft, setDraft] = React.useState(role);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    setDraft(role);
+    setError(null);
+  }, [role]);
+  const commit = () => {
+    const next = draft.trim();
+    if (next === role) {
+      setError(null);
+      return;
+    }
+    if (!isValidRoleId(next) || RESERVED_ROLES.has(next)) {
+      setError(t("forms.studio.parameters.roles.invalid"));
+      return;
+    }
+    if (roles.some((entry) => entry !== role && entry === next)) {
+      setError(t("forms.studio.parameters.roles.invalid"));
+      return;
+    }
+    setError(null);
+    onRename(role, next);
+  };
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": role,
+          value: draft,
+          className: "min-w-0 flex-1 font-mono text-xs",
+          onChange: (event) => {
+            setDraft(event.target.value);
+            setError(null);
+          },
+          onBlur: commit,
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              commit();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": t("forms.studio.parameters.roles.remove"),
+          title: t("forms.studio.parameters.roles.remove"),
+          variant: "ghost",
+          size: "sm",
+          type: "button",
+          className: "shrink-0",
+          onClick: () => onRemove(role),
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", children: error }) : null
+  ] });
+}
+function ManagedRoleRow({ role, hint }) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 items-center gap-2 rounded-md border border-border bg-muted/30 px-2 py-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-foreground", children: role }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: hint })
+  ] });
+}
+function RolesEditor({
+  roles,
+  guestEnabled,
+  onToggleGuest,
+  onAdd,
+  onRename,
+  onRemove
+}) {
+  const t = useT();
+  const [draft, setDraft] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const customRoles = React.useMemo(
+    () => roles.filter((role) => !RESERVED_ROLES.has(role)),
+    [roles]
+  );
+  const handleAdd = () => {
+    const next = draft.trim();
+    if (!isValidRoleId(next) || RESERVED_ROLES.has(next)) {
+      setError(t("forms.studio.parameters.roles.invalid"));
+      return;
+    }
+    if (roles.includes(next)) {
+      setError(t("forms.studio.parameters.roles.invalid"));
+      return;
+    }
+    setError(null);
+    onAdd(next);
+    setDraft("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-testid": "roles-editor", children: [
+    /* @__PURE__ */ jsx(
+      YesNoRow,
+      {
+        label: /* @__PURE__ */ jsxs("span", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-foreground", children: t("forms.studio.parameters.roles.guest.label") }),
+          /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: t("forms.studio.parameters.roles.guest.helper") })
+        ] }),
+        value: guestEnabled,
+        onChange: onToggleGuest
+      }
+    ),
+    /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        ManagedRoleRow,
+        {
+          role: "admin",
+          hint: t("forms.studio.parameters.roles.admin_locked")
+        }
+      ),
+      guestEnabled ? /* @__PURE__ */ jsx(
+        ManagedRoleRow,
+        {
+          role: GUEST_ROLE,
+          hint: t("forms.studio.parameters.roles.managed_by_switch")
+        }
+      ) : null,
+      customRoles.map((role) => /* @__PURE__ */ jsx(
+        RoleRow,
+        {
+          role,
+          roles,
+          onRename,
+          onRemove
+        },
+        role
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1 rounded-md border border-dashed border-border p-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs font-medium text-foreground", children: t("forms.studio.parameters.roles.custom.label") }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("forms.studio.parameters.roles.custom.helper") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": t("forms.studio.parameters.roles.custom.label"),
+            placeholder: t("forms.studio.parameters.roles.add_placeholder"),
+            value: draft,
+            className: "min-w-0 flex-1 font-mono text-xs",
+            onChange: (event) => {
+              setDraft(event.target.value);
+              setError(null);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                handleAdd();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            type: "button",
+            className: "shrink-0",
+            onClick: handleAdd,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-4", "aria-hidden": "true" }),
+              t("forms.studio.parameters.roles.add")
+            ]
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", children: error }) : null
+    ] })
+  ] });
+}
+export {
+  RolesEditor
+};
+//# sourceMappingURL=RolesEditor.js.map