@aleph-alpha/settings-kit 0.1.0 → 1.0.0

package/dist/SkLayoutPage-DGbCpQFm.js

@@ -0,0 +1,2545 @@
+import { useAttrs, computed, hasInjectionContext, inject, toValue, provide, defineComponent, openBlock, createElementBlock, Fragment, renderSlot, createVNode, unref, withCtx, mergeProps, isRef, toDisplayString, createCommentVNode, mergeDefaults, defineAsyncComponent, h, reactive, shallowReactive, ref, watch, watchEffect, createElementVNode, useModel, createBlock, resolveDynamicComponent, toHandlers, createSlots, createTextVNode, mergeModels, normalizeStyle, normalizeClass, withModifiers } from "vue";
+import { UiInputGroup, UiInputGroupInput, UiCheckbox, UiField, UiFieldError, UiFieldLabel } from "@aleph-alpha/ui-library";
+const skBaseControlDefaults = {
+  modelValue: void 0,
+  id: void 0,
+  name: void 0,
+  placeholder: void 0,
+  disabled: false,
+  inheriting: false,
+  required: false,
+  label: void 0,
+  tooltip: void 0,
+  errors: void 0
+};
+const skPeriodUnits = [
+  { value: "d", label: "Days" },
+  { value: "w", label: "Weeks" },
+  { value: "m", label: "Months" },
+  { value: "y", label: "Years" }
+];
+const skCountries = {
+  AD: { number: "+376", flag: "FlagsAd" },
+  AE: { number: "+971", flag: "FlagsAe" },
+  AF: { number: "+93", flag: "FlagsAf" },
+  AG: { number: "+1268", flag: "FlagsAg" },
+  AI: { number: "+1264", flag: "FlagsAi" },
+  AL: { number: "+355", flag: "FlagsAl" },
+  AM: { number: "+374", flag: "FlagsAm" },
+  AO: { number: "+244", flag: "FlagsAo" },
+  AR: { number: "+54", flag: "FlagsAr" },
+  AS: { number: "+1684", flag: "FlagsAs" },
+  AT: { number: "+43", flag: "FlagsAt" },
+  AU: { number: "+61", flag: "FlagsAu" },
+  AW: { number: "+297", flag: "FlagsAw" },
+  AX: { number: "+358", flag: "FlagsAx" },
+  AZ: { number: "+994", flag: "FlagsAz" },
+  BA: { number: "+387", flag: "FlagsBa" },
+  BB: { number: "+1246", flag: "FlagsBb" },
+  BD: { number: "+880", flag: "FlagsBd" },
+  BE: { number: "+32", flag: "FlagsBe" },
+  BF: { number: "+226", flag: "FlagsBf" },
+  BG: { number: "+359", flag: "FlagsBg" },
+  BH: { number: "+973", flag: "FlagsBh" },
+  BI: { number: "+257", flag: "FlagsBi" },
+  BJ: { number: "+229", flag: "FlagsBj" },
+  BL: { number: "+590", flag: "FlagsBl" },
+  BM: { number: "+1441", flag: "FlagsBm" },
+  BN: { number: "+673", flag: "FlagsBn" },
+  BO: { number: "+591", flag: "FlagsBo" },
+  BQ: { number: "+599", flag: "FlagsBq" },
+  BR: { number: "+55", flag: "FlagsBr" },
+  BS: { number: "+1242", flag: "FlagsBs" },
+  BT: { number: "+975", flag: "FlagsBt" },
+  BW: { number: "+267", flag: "FlagsBw" },
+  BY: { number: "+375", flag: "FlagsBy" },
+  BZ: { number: "+501", flag: "FlagsBz" },
+  CA: { number: "+1", flag: "FlagsCa" },
+  CC: { number: "+61", flag: "FlagsCc" },
+  CD: { number: "+243", flag: "FlagsCd" },
+  CF: { number: "+236", flag: "FlagsCf" },
+  CG: { number: "+242", flag: "FlagsCg" },
+  CH: { number: "+41", flag: "FlagsCh" },
+  CI: { number: "+225", flag: "FlagsCi" },
+  CK: { number: "+682", flag: "FlagsCk" },
+  CL: { number: "+56", flag: "FlagsCl" },
+  CM: { number: "+237", flag: "FlagsCm" },
+  CN: { number: "+86", flag: "FlagsCn" },
+  CO: { number: "+57", flag: "FlagsCo" },
+  CR: { number: "+506", flag: "FlagsCr" },
+  CU: { number: "+53", flag: "FlagsCu" },
+  CV: { number: "+238", flag: "FlagsCv" },
+  CW: { number: "+599", flag: "FlagsCw" },
+  CY: { number: "+357", flag: "FlagsCy" },
+  CZ: { number: "+420", flag: "FlagsCz" },
+  DE: { number: "+49", flag: "FlagsDe" },
+  DJ: { number: "+253", flag: "FlagsDj" },
+  DK: { number: "+45", flag: "FlagsDk" },
+  DM: { number: "+1767", flag: "FlagsDm" },
+  DO: { number: "+1809", flag: "FlagsDo" },
+  DZ: { number: "+213", flag: "FlagsDz" },
+  EC: { number: "+593", flag: "FlagsEc" },
+  EE: { number: "+372", flag: "FlagsEe" },
+  EG: { number: "+20", flag: "FlagsEg" },
+  EH: { number: "+212", flag: "FlagsEh" },
+  ER: { number: "+291", flag: "FlagsEr" },
+  ES: { number: "+34", flag: "FlagsEs" },
+  ET: { number: "+251", flag: "FlagsEt" },
+  FI: { number: "+358", flag: "FlagsFi" },
+  FJ: { number: "+679", flag: "FlagsFj" },
+  FK: { number: "+500", flag: "FlagsFk" },
+  FM: { number: "+691", flag: "FlagsFm" },
+  FO: { number: "+298", flag: "FlagsFo" },
+  FR: { number: "+33", flag: "FlagsFr" },
+  GA: { number: "+241", flag: "FlagsGa" },
+  GB: { number: "+44", flag: "FlagsGb" },
+  GD: { number: "+1473", flag: "FlagsGd" },
+  GE: { number: "+995", flag: "FlagsGe" },
+  GG: { number: "+44", flag: "FlagsGg" },
+  GH: { number: "+233", flag: "FlagsGh" },
+  GI: { number: "+350", flag: "FlagsGi" },
+  GL: { number: "+299", flag: "FlagsGl" },
+  GM: { number: "+220", flag: "FlagsGm" },
+  GN: { number: "+224", flag: "FlagsGn" },
+  GQ: { number: "+240", flag: "FlagsGq" },
+  GR: { number: "+30", flag: "FlagsGr" },
+  GT: { number: "+502", flag: "FlagsGt" },
+  GU: { number: "+1671", flag: "FlagsGu" },
+  GW: { number: "+245", flag: "FlagsGw" },
+  GY: { number: "+592", flag: "FlagsGy" },
+  HK: { number: "+852", flag: "FlagsHk" },
+  HN: { number: "+504", flag: "FlagsHn" },
+  HR: { number: "+385", flag: "FlagsHr" },
+  HT: { number: "+509", flag: "FlagsHt" },
+  HU: { number: "+36", flag: "FlagsHu" },
+  ID: { number: "+62", flag: "FlagsId" },
+  IE: { number: "+353", flag: "FlagsIe" },
+  IL: { number: "+972", flag: "FlagsIl" },
+  IM: { number: "+44", flag: "FlagsIm" },
+  IN: { number: "+91", flag: "FlagsIn" },
+  IO: { number: "+246", flag: "FlagsIo" },
+  IQ: { number: "+964", flag: "FlagsIq" },
+  IR: { number: "+98", flag: "FlagsIr" },
+  IS: { number: "+354", flag: "FlagsIs" },
+  IT: { number: "+39", flag: "FlagsIt" },
+  JE: { number: "+44", flag: "FlagsJe" },
+  JM: { number: "+1876", flag: "FlagsJm" },
+  JO: { number: "+962", flag: "FlagsJo" },
+  JP: { number: "+81", flag: "FlagsJp" },
+  KE: { number: "+254", flag: "FlagsKe" },
+  KG: { number: "+996", flag: "FlagsKg" },
+  KH: { number: "+855", flag: "FlagsKh" },
+  KI: { number: "+686", flag: "FlagsKi" },
+  KM: { number: "+269", flag: "FlagsKm" },
+  KP: { number: "+850", flag: "FlagsKp" },
+  KR: { number: "+82", flag: "FlagsKr" },
+  KW: { number: "+965", flag: "FlagsKw" },
+  KY: { number: "+1345", flag: "FlagsKy" },
+  KZ: { number: "+7", flag: "FlagsKz" },
+  LA: { number: "+856", flag: "FlagsLa" },
+  LB: { number: "+961", flag: "FlagsLb" },
+  LC: { number: "+1758", flag: "FlagsLc" },
+  LI: { number: "+423", flag: "FlagsLi" },
+  LK: { number: "+94", flag: "FlagsLk" },
+  LR: { number: "+231", flag: "FlagsLr" },
+  LS: { number: "+266", flag: "FlagsLs" },
+  LT: { number: "+370", flag: "FlagsLt" },
+  LU: { number: "+352", flag: "FlagsLu" },
+  LV: { number: "+371", flag: "FlagsLv" },
+  LY: { number: "+218", flag: "FlagsLy" },
+  MA: { number: "+212", flag: "FlagsMa" },
+  MC: { number: "+377", flag: "FlagsMc" },
+  MD: { number: "+373", flag: "FlagsMd" },
+  ME: { number: "+382", flag: "FlagsMe" },
+  MG: { number: "+261", flag: "FlagsMg" },
+  MH: { number: "+692", flag: "FlagsMh" },
+  MK: { number: "+389", flag: "FlagsMk" },
+  ML: { number: "+223", flag: "FlagsMl" },
+  MM: { number: "+95", flag: "FlagsMm" },
+  MN: { number: "+976", flag: "FlagsMn" },
+  MO: { number: "+853", flag: "FlagsMo" },
+  MP: { number: "+1670", flag: "FlagsMp" },
+  MQ: { number: "+596", flag: "FlagsMq" },
+  MR: { number: "+222", flag: "FlagsMr" },
+  MS: { number: "+1664", flag: "FlagsMs" },
+  MT: { number: "+356", flag: "FlagsMt" },
+  MU: { number: "+230", flag: "FlagsMu" },
+  MV: { number: "+960", flag: "FlagsMv" },
+  MW: { number: "+265", flag: "FlagsMw" },
+  MX: { number: "+52", flag: "FlagsMx" },
+  MY: { number: "+60", flag: "FlagsMy" },
+  MZ: { number: "+258", flag: "FlagsMz" },
+  NA: { number: "+264", flag: "FlagsNa" },
+  NE: { number: "+227", flag: "FlagsNe" },
+  NF: { number: "+672", flag: "FlagsNf" },
+  NG: { number: "+234", flag: "FlagsNg" },
+  NI: { number: "+505", flag: "FlagsNi" },
+  NL: { number: "+31", flag: "FlagsNl" },
+  NO: { number: "+47", flag: "FlagsNo" },
+  NP: { number: "+977", flag: "FlagsNp" },
+  NR: { number: "+674", flag: "FlagsNr" },
+  NU: { number: "+683", flag: "FlagsNu" },
+  NZ: { number: "+64", flag: "FlagsNz" },
+  OM: { number: "+968", flag: "FlagsOm" },
+  PA: { number: "+507", flag: "FlagsPa" },
+  PE: { number: "+51", flag: "FlagsPe" },
+  PF: { number: "+689", flag: "FlagsPf" },
+  PG: { number: "+675", flag: "FlagsPg" },
+  PH: { number: "+63", flag: "FlagsPh" },
+  PK: { number: "+92", flag: "FlagsPk" },
+  PL: { number: "+48", flag: "FlagsPl" },
+  PN: { number: "+64", flag: "FlagsPn" },
+  PR: { number: "+1787", flag: "FlagsPr" },
+  PS: { number: "+970", flag: "FlagsPs" },
+  PT: { number: "+351", flag: "FlagsPt" },
+  PW: { number: "+680", flag: "FlagsPw" },
+  PY: { number: "+595", flag: "FlagsPy" },
+  QA: { number: "+974", flag: "FlagsQa" },
+  RO: { number: "+40", flag: "FlagsRo" },
+  RS: { number: "+381", flag: "FlagsRs" },
+  RU: { number: "+7", flag: "FlagsRu" },
+  RW: { number: "+250", flag: "FlagsRw" },
+  SA: { number: "+966", flag: "FlagsSa" },
+  SB: { number: "+677", flag: "FlagsSb" },
+  SC: { number: "+248", flag: "FlagsSc" },
+  SD: { number: "+249", flag: "FlagsSd" },
+  SE: { number: "+46", flag: "FlagsSe" },
+  SG: { number: "+65", flag: "FlagsSg" },
+  SI: { number: "+386", flag: "FlagsSi" },
+  SK: { number: "+421", flag: "FlagsSk" },
+  SL: { number: "+232", flag: "FlagsSl" },
+  SM: { number: "+378", flag: "FlagsSm" },
+  SN: { number: "+221", flag: "FlagsSn" },
+  SO: { number: "+252", flag: "FlagsSo" },
+  SR: { number: "+597", flag: "FlagsSr" },
+  SS: { number: "+211", flag: "FlagsSs" },
+  ST: { number: "+239", flag: "FlagsSt" },
+  SV: { number: "+503", flag: "FlagsSv" },
+  SX: { number: "+1721", flag: "FlagsSx" },
+  SY: { number: "+963", flag: "FlagsSy" },
+  SZ: { number: "+268", flag: "FlagsSz" },
+  TC: { number: "+1649", flag: "FlagsTc" },
+  TD: { number: "+235", flag: "FlagsTd" },
+  TG: { number: "+228", flag: "FlagsTg" },
+  TH: { number: "+66", flag: "FlagsTh" },
+  TJ: { number: "+992", flag: "FlagsTj" },
+  TK: { number: "+690", flag: "FlagsTk" },
+  TL: { number: "+670", flag: "FlagsTl" },
+  TM: { number: "+993", flag: "FlagsTm" },
+  TN: { number: "+216", flag: "FlagsTn" },
+  TO: { number: "+676", flag: "FlagsTo" },
+  TR: { number: "+90", flag: "FlagsTr" },
+  TT: { number: "+1868", flag: "FlagsTt" },
+  TV: { number: "+688", flag: "FlagsTv" },
+  TW: { number: "+886", flag: "FlagsTw" },
+  TZ: { number: "+255", flag: "FlagsTz" },
+  UA: { number: "+380", flag: "FlagsUa" },
+  UG: { number: "+256", flag: "FlagsUg" },
+  US: { number: "+1", flag: "FlagsUs" },
+  UY: { number: "+598", flag: "FlagsUy" },
+  UZ: { number: "+998", flag: "FlagsUz" },
+  VA: { number: "+379", flag: "FlagsVa" },
+  VC: { number: "+1784", flag: "FlagsVc" },
+  VE: { number: "+58", flag: "FlagsVe" },
+  VG: { number: "+1284", flag: "FlagsVg" },
+  VI: { number: "+1340", flag: "FlagsVi" },
+  VN: { number: "+84", flag: "FlagsVn" },
+  VU: { number: "+678", flag: "FlagsVu" },
+  WS: { number: "+685", flag: "FlagsWs" },
+  XK: { number: "+383", flag: "FlagsXk" },
+  YE: { number: "+967", flag: "FlagsYe" },
+  ZA: { number: "+27", flag: "FlagsZa" },
+  ZM: { number: "+260", flag: "FlagsZm" },
+  ZW: { number: "+263", flag: "FlagsZw" }
+};
+function skErrorId(id) {
+  return `${id}-error`;
+}
+function skDescriptionId(id) {
+  return `${id}-description`;
+}
+function skA11yAttrs(options) {
+  return {
+    "aria-invalid": options.invalid || void 0,
+    "aria-errormessage": options.invalid ? skErrorId(options.id) : void 0,
+    "aria-required": options.required || void 0
+  };
+}
+function useA11yAttrs(required) {
+  const attrs = useAttrs();
+  return computed(() => {
+    const a11y = {};
+    for (const name of required) {
+      if (attrs[name] !== void 0) {
+        a11y[name] = attrs[name];
+      }
+    }
+    return a11y;
+  });
+}
+function useName(name) {
+  const fallback = typeof globalThis.crypto?.randomUUID === "function" ? globalThis.crypto.randomUUID() : String(Date.now());
+  return computed(() => name ?? fallback);
+}
+function skCastModelValue(value, modifiers) {
+  if (value === void 0 || value === null) return value;
+  if (modifiers.number) {
+    if (typeof value === "number") return value;
+    const parsed = Number.parseFloat(String(value));
+    return Number.isNaN(parsed) ? value : parsed;
+  }
+  if (modifiers.boolean) {
+    if (typeof value === "boolean") return value;
+    if (value === "true") return true;
+    if (value === "false") return false;
+    return value;
+  }
+  return value;
+}
+const DEFAULT_LOCALE = "en";
+function resolveLocalizedText(text, locale = DEFAULT_LOCALE, fallbackLocale) {
+  for (const code of [locale, fallbackLocale, DEFAULT_LOCALE]) {
+    const value = code ? text[code] : void 0;
+    if (typeof value === "string" && value) return value;
+  }
+  return Object.values(text).find(Boolean) ?? "";
+}
+const kitMessages = {
+  "constraint.required": {
+    en: "A value is required.",
+    de: "Ein Wert ist erforderlich."
+  },
+  "constraint.maxLength": {
+    en: "Use at most {max} characters.",
+    de: "Verwenden Sie höchstens {max} Zeichen."
+  },
+  "constraint.pattern": {
+    en: "The value does not match the expected format.",
+    de: "Der Wert entspricht nicht dem erwarteten Format."
+  },
+  "constraint.enum": {
+    en: "Choose one of the allowed values.",
+    de: "Wählen Sie einen der zulässigen Werte."
+  },
+  "constraint.format.hex": {
+    en: "Enter a valid hex color, for example #1A2B3C.",
+    de: "Geben Sie eine gültige Hex-Farbe ein, zum Beispiel #1A2B3C."
+  },
+  "constraint.format.email": {
+    en: "Enter a valid email address.",
+    de: "Geben Sie eine gültige E-Mail-Adresse ein."
+  },
+  "constraint.format.phone": {
+    en: "Enter a valid phone number.",
+    de: "Geben Sie eine gültige Telefonnummer ein."
+  },
+  "constraint.mimeTypes": {
+    en: "This file type is not allowed.",
+    de: "Dieser Dateityp ist nicht zulässig."
+  },
+  "constraint.invalid": { en: "Invalid value.", de: "Ungültiger Wert." },
+  "field.inheritLabel": { en: "Same as {name}", de: "Wie {name}" },
+  "field.inheritLabelDefault": {
+    en: "Use inherited value",
+    de: "Geerbten Wert verwenden"
+  },
+  "text.charCount": {
+    en: "{count}/{max} characters",
+    de: "{count}/{max} Zeichen"
+  },
+  "control.unsupported": {
+    en: "Unsupported control.",
+    de: "Nicht unterstütztes Eingabefeld."
+  },
+  "control.unsupportedNamed": {
+    en: 'Unsupported control "{control}".',
+    de: "Nicht unterstütztes Eingabefeld „{control}“."
+  },
+  "file.upload": { en: "Upload", de: "Hochladen" },
+  "file.preview": { en: "{label} preview", de: "Vorschau von {label}" },
+  "file.previewDefault": { en: "Preview", de: "Vorschau" },
+  "file.readError": {
+    en: "The file could not be read.",
+    de: "Die Datei konnte nicht gelesen werden."
+  },
+  "color.hexValue": { en: "{label} hex value", de: "Hex-Wert für {label}" },
+  "color.hexValueDefault": { en: "Hex value", de: "Hex-Wert" },
+  "tel.countryCode": {
+    en: "Country code: {country} ({dialCode})",
+    de: "Ländervorwahl: {country} ({dialCode})"
+  },
+  "tel.search": { en: "Search", de: "Suchen" },
+  "tel.searchCountry": { en: "Search country", de: "Land suchen" },
+  "tel.countryCodes": { en: "Country codes", de: "Ländervorwahlen" },
+  "period.unitAria": { en: "Period unit: {unit}", de: "Zeiteinheit: {unit}" },
+  "period.unit.d": { en: "Days", de: "Tage" },
+  "period.unit.w": { en: "Weeks", de: "Wochen" },
+  "period.unit.m": { en: "Months", de: "Monate" },
+  "period.unit.y": { en: "Years", de: "Jahre" },
+  "shell.title": {
+    en: "Organization settings",
+    de: "Organisationseinstellungen"
+  },
+  "shell.back": { en: "Back", de: "Zurück" },
+  "shell.toggleSidebar": {
+    en: "Toggle sidebar",
+    de: "Seitenleiste umschalten"
+  },
+  "shell.navigation": { en: "Settings", de: "Einstellungen" },
+  "shell.layout": { en: "Layout", de: "Layout" },
+  "shell.focusLayout": { en: "Focus layout", de: "Fokuslayout" },
+  "shell.sidebarLayout": { en: "Sidebar", de: "Seitenleiste" },
+  "shell.pageHasErrors": { en: "has errors", de: "enthält Fehler" }
+};
+function mergeLocalizedText(base, override) {
+  const merged = { ...base };
+  for (const [code, value] of Object.entries(override ?? {})) {
+    if (value) merged[code] = value;
+  }
+  return merged;
+}
+function formatMessage(template, params = {}) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (match, name) => Object.hasOwn(params, name) ? String(params[name]) : match
+  );
+}
+function resolveKitMessage(key, locale, fallbackLocale, overrides, params) {
+  const text = mergeLocalizedText(kitMessages[key], overrides?.[key]);
+  return formatMessage(
+    resolveLocalizedText(text, locale, fallbackLocale),
+    params
+  );
+}
+function useControlModel(props, emit, emptyValue) {
+  return computed({
+    get: () => props.modelValue ?? emptyValue,
+    set: (value) => emit("update:modelValue", value)
+  });
+}
+function isEmptyValue$1(value) {
+  if (value === void 0 || value === null || value === "") return true;
+  return Array.isArray(value) && value.length === 0;
+}
+function compareNumbers(value, bound, holds) {
+  if (value === null || value === void 0 || typeof value === "string" && value.trim() === "") {
+    return false;
+  }
+  const numeric = typeof value === "number" ? value : Number(value);
+  return !Number.isNaN(numeric) && holds(numeric, bound);
+}
+const leafOperators = {
+  equals: (value, operand) => value === operand,
+  notEquals: (value, operand) => value !== operand,
+  in: (value, operand) => operand.includes(value),
+  notIn: (value, operand) => !operand.includes(value),
+  gt: (value, operand) => compareNumbers(value, operand, (v, b) => v > b),
+  gte: (value, operand) => compareNumbers(value, operand, (v, b) => v >= b),
+  lt: (value, operand) => compareNumbers(value, operand, (v, b) => v < b),
+  lte: (value, operand) => compareNumbers(value, operand, (v, b) => v <= b),
+  isEmpty: (value, operand) => isEmptyValue$1(value) === operand,
+  notEmpty: (value, operand) => isEmptyValue$1(value) !== operand
+};
+function evaluateLeaf(leaf, values) {
+  const value = values[leaf.key];
+  return Object.keys(leafOperators).every((operator) => {
+    const operand = leaf[operator];
+    return operand === void 0 || leafOperators[operator](value, operand);
+  });
+}
+function evaluateCondition(condition, values) {
+  if ("allOf" in condition) {
+    return condition.allOf.every((child) => evaluateCondition(child, values));
+  }
+  if ("anyOf" in condition) {
+    return condition.anyOf.some((child) => evaluateCondition(child, values));
+  }
+  if ("not" in condition) {
+    return !evaluateCondition(condition.not, values);
+  }
+  return evaluateLeaf(condition, values);
+}
+function evaluateFieldRules(field, values) {
+  const state = { visible: true, enabled: true };
+  for (const rule of field.rules ?? []) {
+    const holds = evaluateCondition(rule.when, values);
+    if (rule.effect === "HIDE" && holds) state.visible = false;
+    if (rule.effect === "SHOW" && !holds) state.visible = false;
+    if (rule.effect === "DISABLE" && holds) state.enabled = false;
+    if (rule.effect === "ENABLE" && !holds) state.enabled = false;
+  }
+  return state;
+}
+function evaluateRuleStates(fields, values) {
+  const states = {};
+  for (const field of fields) {
+    states[field.key] = evaluateFieldRules(field, values);
+  }
+  return states;
+}
+function conditionKeys(condition) {
+  if ("allOf" in condition) return condition.allOf.flatMap(conditionKeys);
+  if ("anyOf" in condition) return condition.anyOf.flatMap(conditionKeys);
+  if ("not" in condition) return conditionKeys(condition.not);
+  return [condition.key];
+}
+function validateFieldRules(fields) {
+  const known = new Set(fields.map((field) => field.key));
+  for (const field of fields) {
+    if (field.fallback?.key === field.key) {
+      throw new Error(`Setting "${field.key}" falls back to itself.`);
+    }
+  }
+  const dependencies = /* @__PURE__ */ new Map();
+  for (const field of fields) {
+    const keys = (field.rules ?? []).flatMap(
+      (rule) => conditionKeys(rule.when)
+    );
+    for (const key of keys) {
+      if (!known.has(key)) {
+        throw new Error(
+          `Setting "${field.key}" has a rule referencing unknown setting "${key}".`
+        );
+      }
+    }
+    const fallback = field.fallback?.key;
+    dependencies.set(field.key, [
+      ...keys.filter((key) => key !== field.key),
+      ...fallback !== void 0 && known.has(fallback) ? [fallback] : []
+    ]);
+  }
+  const done = /* @__PURE__ */ new Set();
+  const inProgress = /* @__PURE__ */ new Set();
+  function visit(key, path) {
+    if (done.has(key)) return;
+    if (inProgress.has(key)) {
+      throw new Error(
+        `Setting rules form a cycle: ${[...path, key].join(" -> ")}.`
+      );
+    }
+    inProgress.add(key);
+    for (const dependency of dependencies.get(key) ?? []) {
+      visit(dependency, [...path, key]);
+    }
+    inProgress.delete(key);
+    done.add(key);
+  }
+  for (const key of dependencies.keys()) {
+    visit(key, []);
+  }
+}
+function isEmptyValue(value) {
+  if (value === void 0 || value === null || value === "") return true;
+  return Array.isArray(value) && value.length === 0;
+}
+const formatCheckers = {
+  hex: (value) => /^#[0-9a-f]{6}$/i.test(value),
+  email: (value) => {
+    const at = value.indexOf("@");
+    return at > 0 && value.indexOf(".", at) > at + 1 && !/\s/.test(value);
+  },
+  phone: (value) => /^\+?[\d\s\-()]{5,}$/.test(value)
+};
+const compiledPatterns = /* @__PURE__ */ new WeakMap();
+function fieldPattern(field) {
+  const source = field.constraints?.pattern;
+  if (!source) return void 0;
+  const cached = compiledPatterns.get(field);
+  if (cached?.source === source) return cached.expression;
+  let expression;
+  try {
+    expression = new RegExp(source);
+  } catch {
+    expression = null;
+  }
+  compiledPatterns.set(field, { source, expression });
+  return expression;
+}
+function dataUrlMediaType(value) {
+  const headerEnd = [value.indexOf(";"), value.indexOf(",")].filter((index) => index >= 0).reduce((earliest, index) => Math.min(earliest, index), value.length);
+  return value.slice("data:".length, headerEnd);
+}
+const stringChecks = {
+  maxLength: (value, field) => {
+    const maxLength = field.constraints?.maxLength;
+    return maxLength !== void 0 && value.length > maxLength;
+  },
+  pattern: (value, field) => {
+    const expression = fieldPattern(field);
+    if (expression === void 0) return false;
+    return expression === null || !expression.test(value);
+  },
+  enum: (value, field) => {
+    const allowed = field.constraints?.enum;
+    return !!allowed && !allowed.includes(value);
+  },
+  format: (value, field) => {
+    const format = field.constraints?.format;
+    const check = format ? formatCheckers[format] : void 0;
+    return !!check && !check(value);
+  },
+  mimeTypes: (value, field) => {
+    const mimeTypes = field.constraints?.mimeTypes;
+    return !!mimeTypes && value.startsWith("data:") && !mimeTypes.includes(dataUrlMediaType(value));
+  }
+};
+function checkFieldConstraints(field, value) {
+  const constraints = field.constraints;
+  if (!constraints) return [];
+  if (isEmptyValue(value) || value === false) {
+    return constraints.required ? ["required"] : [];
+  }
+  if (typeof value !== "string") return [];
+  return Object.entries(stringChecks).filter(([, isViolated]) => isViolated(value, field)).map(([name]) => name);
+}
+function genericKey(field, constraint) {
+  const key = constraint === "format" ? `constraint.format.${field.constraints?.format}` : `constraint.${constraint}`;
+  return key in kitMessages ? key : "constraint.invalid";
+}
+function resolveConstraintMessage(field, constraint, locale, options = {}) {
+  const { fallbackLocale, messages } = options;
+  const owned = constraint ? field?.errors?.[constraint] : void 0;
+  if (owned) return resolveLocalizedText(owned, locale, fallbackLocale);
+  const key = constraint && field ? genericKey(field, constraint) : "constraint.invalid";
+  return resolveKitMessage(key, locale, fallbackLocale, messages, {
+    max: field?.constraints?.maxLength ?? ""
+  });
+}
+function byOrder(entries, missing = Number.POSITIVE_INFINITY) {
+  const rank = (entry) => Number.isFinite(entry.order) ? entry.order : missing;
+  return entries.map((entry, index) => ({ entry, index })).sort((a, b) => rank(a.entry) - rank(b.entry) || a.index - b.index).map(({ entry }) => entry);
+}
+function layoutIdSegment(uid) {
+  return encodeURIComponent(uid);
+}
+function layoutPageId(categoryUid, pageUid) {
+  return `${layoutIdSegment(categoryUid)}/${layoutIdSegment(pageUid)}`;
+}
+function columnsOf(layout) {
+  const columns = Math.floor(layout?.columns ?? 1);
+  return Number.isFinite(columns) && columns > 0 ? columns : 1;
+}
+function uniqueBy(entries) {
+  const seen = /* @__PURE__ */ new Set();
+  return entries.filter((entry) => {
+    if (seen.has(entry.uid)) return false;
+    seen.add(entry.uid);
+    return true;
+  });
+}
+function resolveLayout(layout, source, options = {}) {
+  const locale = options.locale ?? "en";
+  const text = (value) => value ? resolveLocalizedText(value, locale, options.fallbackLocale) : void 0;
+  const values = new Proxy({}, {
+    get: (_target, key) => typeof key === "string" ? source.valueOf(key) : void 0
+  });
+  const placed = /* @__PURE__ */ new Set();
+  const placedKeys = [];
+  const pageOfKey = /* @__PURE__ */ new Map();
+  let actions = [];
+  let pageId = "";
+  function item(entry, parentId, columns) {
+    const field = source.fieldByKey(entry.key);
+    if (!field || placed.has(entry.key)) return void 0;
+    placed.add(entry.key);
+    placedKeys.push(entry.key);
+    pageOfKey.set(entry.key, pageId);
+    const rule = evaluateFieldRules(field, values);
+    if (!rule.visible) return void 0;
+    const column = Number.isInteger(entry.column) && entry.column >= 1 && entry.column <= columns ? entry.column : void 0;
+    const node = {
+      kind: "item",
+      id: `${parentId}/${layoutIdSegment(entry.key)}`,
+      uid: entry.key,
+      key: entry.key,
+      field,
+      column,
+      rule
+    };
+    if (field.type === "actions") {
+      actions.push(node);
+      return void 0;
+    }
+    return node;
+  }
+  function items(entries, parentId, columns) {
+    return entries.flatMap((entry) => item(entry, parentId, columns) ?? []);
+  }
+  function group(entry, parentId) {
+    const id = `${parentId}/${layoutIdSegment(entry.uid)}`;
+    const columns = columnsOf(entry.layout);
+    const children = items(
+      byOrder(entry.items, Number.NEGATIVE_INFINITY),
+      id,
+      columns
+    );
+    if (!children.length) return void 0;
+    return {
+      kind: "group",
+      id,
+      uid: entry.uid,
+      label: text(entry.label),
+      description: text(entry.description),
+      showHeader: entry.presentation?.showHeader !== false,
+      columns,
+      children
+    };
+  }
+  function section(entry, parentId) {
+    const id = `${parentId}/${layoutIdSegment(entry.uid)}`;
+    const columns = columnsOf(entry.layout);
+    const ordered = byOrder(
+      [
+        ...(entry.items ?? []).map((value) => ({
+          kind: "item",
+          order: value.order,
+          entry: value
+        })),
+        ...uniqueBy(entry.groups ?? []).map((value) => ({
+          kind: "group",
+          order: value.order,
+          entry: value
+        }))
+      ],
+      Number.NEGATIVE_INFINITY
+    );
+    const children = ordered.flatMap(
+      (child) => child.kind === "item" ? item(child.entry, id, columns) ?? [] : group(child.entry, id) ?? []
+    );
+    if (!children.length) return void 0;
+    return {
+      kind: "section",
+      id,
+      uid: entry.uid,
+      label: text(entry.label),
+      description: text(entry.description),
+      showHeader: entry.presentation?.showHeader !== false,
+      columns,
+      children
+    };
+  }
+  function page(entry, category) {
+    pageId = layoutPageId(category.uid, entry.uid);
+    actions = [];
+    const children = byOrder(uniqueBy(entry.sections)).flatMap(
+      (value) => section(value, pageId) ?? []
+    );
+    return {
+      kind: "page",
+      id: pageId,
+      uid: entry.uid,
+      categoryId: category.uid,
+      path: `/${pageId}`,
+      label: text(entry.label) || entry.uid,
+      description: text(entry.description),
+      showHeader: entry.presentation?.showHeader !== false,
+      sidebar: entry.presentation?.sidebar === true,
+      sidebarMode: entry.presentation?.sidebarMode ?? "default",
+      children,
+      actions
+    };
+  }
+  const categories = byOrder(
+    uniqueBy(layout.categories)
+  ).map((category) => ({
+    kind: "category",
+    id: layoutIdSegment(category.uid),
+    uid: category.uid,
+    label: text(category.label) || category.uid,
+    children: byOrder(uniqueBy(category.pages)).map(
+      (entry) => page(entry, category)
+    )
+  }));
+  const pages = categories.flatMap((category) => category.children);
+  return {
+    categories,
+    pages,
+    pageById: new Map(pages.map((entry) => [entry.id, entry])),
+    pageOfKey,
+    placedKeys
+  };
+}
+function toNavigation(layout, options = {}) {
+  const isInvalid = options.isInvalid ?? (() => false);
+  const label = (text, fallback) => text && resolveLocalizedText(text, options.locale, options.fallbackLocale) || fallback;
+  function node(entry, text, children, invalid) {
+    const { id, kind, path } = entry;
+    return path === void 0 ? { id, kind, label: text, invalid, children } : { id, kind, label: text, path, invalid, children };
+  }
+  function item(entry) {
+    return node(
+      entry,
+      label(entry.field.label, entry.key),
+      [],
+      isInvalid(entry.key)
+    );
+  }
+  function nested(entry) {
+    const children = entry.children.flatMap(
+      (child) => child.kind === "item" ? [item(child)] : nested(child)
+    );
+    if (!entry.label) return children;
+    return [
+      node(
+        entry,
+        entry.label,
+        children,
+        children.some((child) => child.invalid)
+      )
+    ];
+  }
+  function page(entry) {
+    const invalid = keysOf(entry).some(isInvalid);
+    const children = options.depth === "item" ? entry.children.flatMap(nested) : [];
+    return node(
+      { id: entry.id, kind: "page", path: entry.path },
+      entry.label,
+      children,
+      invalid
+    );
+  }
+  return layout.categories.map((category) => {
+    const children = category.children.map(page);
+    return node(
+      category,
+      category.label,
+      children,
+      children.some((child) => child.invalid)
+    );
+  });
+}
+function keysOf(page) {
+  const keys = [];
+  const walk = (entry) => {
+    for (const child of entry.children) {
+      if (child.kind === "item") keys.push(child.key);
+      else walk(child);
+    }
+  };
+  page.children.forEach(walk);
+  return [...keys, ...page.actions.map((entry) => entry.key)];
+}
+function isColumnIn(column, columns) {
+  return Number.isInteger(column) && column >= 1 && column <= columns;
+}
+function checkSiblings(check, entries, parent, level) {
+  const seen = /* @__PURE__ */ new Set();
+  const kept = entries.filter((entry) => {
+    const path = join(parent, entry.uid);
+    if (!entry.uid) {
+      check.report(
+        "empty-uid",
+        path,
+        `A ${level} under "${parent}" has no uid.`
+      );
+    }
+    if (seen.has(entry.uid)) {
+      check.report(
+        "duplicate-uid",
+        path,
+        `${level} uid "${entry.uid}" repeats under "${parent || "layout"}"; only the first renders.`
+      );
+      return false;
+    }
+    seen.add(entry.uid);
+    return true;
+  });
+  return byOrder(kept);
+}
+function checkItems(check, entries, parent, columns = 1) {
+  for (const entry of byOrder(entries, Number.NEGATIVE_INFINITY)) {
+    const path = join(parent, entry.key);
+    if (check.known && !check.known.has(entry.key)) {
+      check.report("unknown-key", path, `No field has key "${entry.key}".`);
+      continue;
+    }
+    const first = check.placed.get(entry.key);
+    if (first !== void 0) {
+      check.report(
+        "duplicate-key",
+        path,
+        `"${entry.key}" is already placed at "${first}"; only the first renders.`
+      );
+      continue;
+    }
+    check.placed.set(entry.key, path);
+    if (entry.column !== void 0 && !isColumnIn(entry.column, columns)) {
+      check.report(
+        "invalid-column",
+        path,
+        `Column ${entry.column} is outside 1..${columns}; the pin is ignored.`,
+        "warning"
+      );
+    }
+  }
+}
+function checkRoute(check, category, page) {
+  const route = `/${layoutIdSegment(category.uid)}/${layoutIdSegment(page.uid)}`;
+  const folded = route.toLowerCase();
+  const clash = check.routes.get(folded);
+  if (clash === void 0) {
+    check.routes.set(folded, route);
+    return;
+  }
+  check.report(
+    "path-collision",
+    join(category.uid, page.uid),
+    `Route ${route} differs from ${clash} only by letter case; a case-insensitive URL cannot tell them apart.`,
+    "warning"
+  );
+}
+function checkPage(check, page, pagePath) {
+  for (const section of checkSiblings(
+    check,
+    page.sections,
+    pagePath,
+    "section"
+  )) {
+    const sectionPath = join(pagePath, section.uid);
+    checkItems(
+      check,
+      section.items ?? [],
+      sectionPath,
+      section.layout?.columns
+    );
+    for (const group of checkSiblings(
+      check,
+      section.groups ?? [],
+      sectionPath,
+      "group"
+    )) {
+      checkItems(
+        check,
+        group.items,
+        join(sectionPath, group.uid),
+        group.layout?.columns
+      );
+    }
+  }
+}
+function validateLayout(layout, fields) {
+  const issues = [];
+  const check = {
+    report: (code, path, message, severity = "error") => issues.push({ code, severity, path, message }),
+    known: fields && new Set(fields.map((field) => field.key)),
+    placed: /* @__PURE__ */ new Map(),
+    routes: /* @__PURE__ */ new Map()
+  };
+  for (const category of checkSiblings(
+    check,
+    layout.categories,
+    "",
+    "category"
+  )) {
+    for (const page of checkSiblings(
+      check,
+      category.pages,
+      category.uid,
+      "page"
+    )) {
+      checkRoute(check, category, page);
+      checkPage(check, page, join(category.uid, page.uid));
+    }
+  }
+  for (const field of fields ?? []) {
+    if (!check.placed.has(field.key)) {
+      check.report(
+        "unplaced-field",
+        field.key,
+        `Field "${field.key}" is not placed in the layout and never renders.`,
+        "warning"
+      );
+    }
+  }
+  return issues;
+}
+function join(parent, uid) {
+  return parent ? `${parent}/${uid}` : uid;
+}
+const settingsLocaleKey = /* @__PURE__ */ Symbol("settings-locale");
+function createSettingsLocale(options) {
+  const locale = computed(() => toValue(options.locale) ?? DEFAULT_LOCALE);
+  const fallbackLocale = computed(() => toValue(options.fallbackLocale));
+  const messages = computed(() => toValue(options.messages));
+  return {
+    locale,
+    fallbackLocale,
+    messages,
+    resolveText: (text) => resolveLocalizedText(text, locale.value, fallbackLocale.value),
+    message: (key, params) => resolveKitMessage(
+      key,
+      locale.value,
+      fallbackLocale.value,
+      messages.value,
+      params
+    )
+  };
+}
+function provideSettingsLocale(options = {}) {
+  const parent = useSettingsLocale();
+  const context = createSettingsLocale({
+    locale: () => toValue(options.locale) ?? parent.locale.value,
+    fallbackLocale: () => toValue(options.fallbackLocale) ?? parent.fallbackLocale.value,
+    messages: () => {
+      const own = toValue(options.messages);
+      if (!own) return parent.messages.value;
+      const merged = { ...parent.messages.value };
+      for (const key of Object.keys(own)) {
+        merged[key] = mergeLocalizedText(merged[key], own[key]);
+      }
+      return merged;
+    }
+  });
+  provide(settingsLocaleKey, context);
+  return context;
+}
+function useSettingsLocale() {
+  const provided = hasInjectionContext() ? inject(settingsLocaleKey, void 0) : void 0;
+  return provided ?? createSettingsLocale({});
+}
+const _hoisted_1$6 = {
+  key: 0,
+  class: "text-left label-xs-regular text-content-on-surface-muted"
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkTextControl",
+    inheritAttrs: false
+  },
+  __name: "SkTextControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    type: {},
+    maxLength: {},
+    charCounter: { type: Boolean },
+    modelValue: {},
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults,
+    type: "text",
+    maxLength: void 0,
+    charCounter: false
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, "");
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const { message } = useSettingsLocale();
+    const counter = computed(
+      () => props.charCounter && props.maxLength ? message("text.charCount", {
+        count: String(model.value ?? "").length,
+        max: props.maxLength
+      }) : void 0
+    );
+    function onChange(event) {
+      const { value } = event.target;
+      emit(
+        "change",
+        skCastModelValue(value, { number: props.type === "number" })
+      );
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "label"),
+        createVNode(unref(UiInputGroup), null, {
+          default: withCtx(() => [
+            createVNode(unref(UiInputGroupInput), mergeProps({
+              id: __props.id,
+              modelValue: unref(model),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null)
+            }, unref(a11yAttrs), {
+              type: __props.type,
+              name: unref(controlName),
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              required: __props.required,
+              maxlength: __props.maxLength,
+              onChange
+            }), null, 16, ["id", "modelValue", "type", "name", "placeholder", "disabled", "required", "maxlength"])
+          ]),
+          _: 1
+        }),
+        counter.value ? (openBlock(), createElementBlock("p", _hoisted_1$6, toDisplayString(counter.value), 1)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$5 = {
+  role: "alert",
+  class: "body-s-regular text-border-input-error"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkUnsupportedControl",
+    inheritAttrs: false
+  },
+  __name: "SkUnsupportedControl",
+  props: {
+    control: {}
+  },
+  setup(__props) {
+    const { message } = useSettingsLocale();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", _hoisted_1$5, toDisplayString(__props.control ? unref(message)("control.unsupportedNamed", { control: __props.control }) : unref(message)("control.unsupported")), 1);
+    };
+  }
+});
+const reservedPresentationKeys = /* @__PURE__ */ new Set([
+  "control",
+  "inheritLabel",
+  "inheritHint"
+]);
+function presentationProps(field) {
+  return Object.fromEntries(
+    Object.entries(field.presentation ?? {}).filter(
+      ([key]) => !reservedPresentationKeys.has(key)
+    )
+  );
+}
+const ControlLoading = () => h("div", {
+  "aria-busy": "true",
+  class: "h-10 w-full animate-pulse rounded-md bg-background-surface-muted"
+});
+function asyncControl(loader) {
+  return defineAsyncComponent({
+    loader,
+    loadingComponent: ControlLoading,
+    delay: 0
+  });
+}
+const controlDefinitions = {
+  text: {
+    kind: "input",
+    component: _sfc_main$7,
+    // `charCounter`/`placeholder` arrive via presentation; the value type
+    // and length limit map onto the input's own attributes.
+    props: (field) => ({
+      ...presentationProps(field),
+      type: field.type === "number" ? "number" : "text",
+      maxLength: field.constraints?.maxLength
+    })
+  },
+  select: {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-C-WLhRod.js").then(
+        (m) => m.SkSelectControl
+      )
+    ),
+    props: presentationProps
+  },
+  checkbox: {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-CFMv8jSO.js").then(
+        (m) => m.SkCheckboxControl
+      )
+    ),
+    props: presentationProps
+  },
+  color: {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-BynIH0EE.js").then(
+        (m) => m.SkColorControl
+      )
+    ),
+    props: presentationProps
+  },
+  phone: {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-CGYERet5.js").then(
+        (m) => m.SkTelControl
+      )
+    ),
+    props: presentationProps
+  },
+  period: {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-BXs-0JdT.js").then(
+        (m) => m.SkPeriodControl
+      )
+    ),
+    props: presentationProps
+  },
+  actions: {
+    kind: "button",
+    component: asyncControl(
+      () => import("./index-KAbhkO1J.js").then(
+        (m) => m.SkActionsControl
+      )
+    ),
+    // `options` are the buttons. Each option value is the method name.
+    props: presentationProps
+  },
+  "image-upload": {
+    kind: "input",
+    component: asyncControl(
+      () => import("./index-BQ6z6MK4.js").then(
+        (m) => m.SkFileUpload
+      )
+    ),
+    // The upload control shows the description as visible copy, not a
+    // tooltip, so it is the one control that can be `aria-describedby` it.
+    props: (field, context) => ({
+      ...presentationProps(field),
+      description: context.tooltip,
+      accept: field.constraints?.mimeTypes?.join(","),
+      "aria-describedby": field.description ? skDescriptionId(field.key) : void 0
+    })
+  }
+};
+const fallbackDefinition = {
+  // Emits nothing; `input` so no action listener is attached.
+  kind: "input",
+  component: _sfc_main$6,
+  props: (field) => ({
+    control: field.presentation?.control ?? field.type
+  })
+};
+const skControlRegistryKey = /* @__PURE__ */ Symbol(
+  "sk-control-registry"
+);
+function provideControls(definitions) {
+  const registry = { ...useControlRegistry(), ...definitions };
+  provide(skControlRegistryKey, registry);
+  return registry;
+}
+function useControlRegistry() {
+  const provided = hasInjectionContext() ? inject(skControlRegistryKey, void 0) : void 0;
+  return provided ?? controlDefinitions;
+}
+const defaultControlByType = {
+  string: "text",
+  number: "text",
+  boolean: "checkbox",
+  asset: "image-upload",
+  actions: "actions"
+};
+function resolveFieldControl(field) {
+  return field.presentation?.control ?? defaultControlByType[field.type];
+}
+function resolveControlDefinition(field, registry = controlDefinitions) {
+  const control = resolveFieldControl(field);
+  return control && registry[control] || fallbackDefinition;
+}
+function createFieldInput(field) {
+  return resolveControlDefinition(field).component;
+}
+function useFieldInheritance(props, session) {
+  const handle = computed(() => session.field(props.field.key));
+  const { message, resolveText } = useSettingsLocale();
+  const declared = props.field.fallback;
+  const targetKey = computed(
+    () => props.field.fallback?.key ?? declared?.key ?? ""
+  );
+  const fallback = declared ? reactive({
+    key: targetKey,
+    id: computed(() => `${props.field.key}-fallback`),
+    label: computed(() => {
+      const { inheritLabel } = props.field.presentation ?? {};
+      const custom = inheritLabel ? resolveText(inheritLabel) : "";
+      if (custom) return custom;
+      const target = session.fieldByKey(targetKey.value);
+      const name = target?.label ? resolveText(target.label) : "";
+      return name ? message("field.inheritLabel", { name }) : message("field.inheritLabelDefault");
+    }),
+    hint: computed(() => {
+      const { inheritHint } = props.field.presentation ?? {};
+      return inheritHint ? resolveText(inheritHint) : void 0;
+    }),
+    active: computed({
+      get: () => handle.value.fallbackActive.value,
+      set: (next) => {
+        handle.value.fallbackActive.value = next;
+      }
+    })
+  }) : void 0;
+  return {
+    fallback,
+    inheriting: computed(() => handle.value.inheriting.value),
+    inheritedFrom: computed(() => handle.value.inheritedFrom.value),
+    fallbackActiveDefault: computed(
+      () => handle.value.fallbackActiveDefault.value
+    )
+  };
+}
+function createStateManager(options = {}) {
+  const work = shallowReactive(/* @__PURE__ */ new Map());
+  const conflicts = shallowReactive(/* @__PURE__ */ new Map());
+  const baselines = shallowReactive(/* @__PURE__ */ new Map());
+  const schemaRevisions = /* @__PURE__ */ new Map();
+  const registered = shallowReactive(/* @__PURE__ */ new Map());
+  const savingKeys = shallowReactive(/* @__PURE__ */ new Set());
+  const saving = ref(false);
+  const areaStates = (options.areas ?? []).map(
+    (area) => reactive({
+      id: area.id,
+      status: area.fields ? "ready" : "loading",
+      fields: area.fields ?? [],
+      keys: area.keys ?? [],
+      error: void 0,
+      load: area.load,
+      loads: 0
+    })
+  );
+  async function loadArea(state) {
+    if (!state.load) return;
+    const id = ++state.loads;
+    state.status = "loading";
+    state.error = void 0;
+    try {
+      const fields2 = await state.load();
+      if (id !== state.loads) return;
+      state.fields = fields2;
+      state.status = "ready";
+    } catch (error) {
+      if (id !== state.loads) return;
+      state.error = error;
+      state.status = "unavailable";
+    }
+  }
+  const areas = areaStates.map((state) => ({
+    id: state.id,
+    status: computed(() => state.status),
+    fields: computed(() => state.status === "ready" ? state.fields : []),
+    error: computed(() => state.error),
+    reload: () => loadArea(state)
+  }));
+  for (const state of areaStates) {
+    if (state.status === "loading") void loadArea(state);
+  }
+  function areaOf(key) {
+    const index = areaStates.findIndex(
+      (state) => state.keys.includes(key) || state.fields.some((field2) => field2.key === key)
+    );
+    return index === -1 ? void 0 : areas[index];
+  }
+  function available(key) {
+    const area = areaOf(key);
+    return !area || area.status.value === "ready";
+  }
+  function register(field2) {
+    watchEffect(
+      () => {
+        const current = toValue(field2);
+        registered.set(current.key, current);
+      },
+      { flush: "sync" }
+    );
+  }
+  const declared = computed(() => toValue(options.fields) ?? []);
+  const fieldsByKey = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const [key, field2] of registered) map.set(key, field2);
+    for (const field2 of declared.value) map.set(field2.key, field2);
+    for (const state of areaStates) {
+      for (const field2 of state.fields) map.set(field2.key, field2);
+    }
+    return map;
+  });
+  function fieldByKey(key) {
+    return fieldsByKey.value.get(key);
+  }
+  function schemaRevision(key) {
+    return schemaRevisions.get(key) ?? 0;
+  }
+  watch(
+    () => new Map(
+      [...fieldsByKey.value].map(([key, field2]) => [
+        key,
+        { field: field2, value: field2.value }
+      ])
+    ),
+    (next, prev) => {
+      for (const key of /* @__PURE__ */ new Set([...next.keys(), ...prev.keys()])) {
+        const before = prev.get(key);
+        const after = next.get(key);
+        if (before?.field === after?.field && before?.value === after?.value)
+          continue;
+        schemaRevisions.set(key, schemaRevision(key) + 1);
+        baselines.delete(key);
+      }
+    },
+    { flush: "sync" }
+  );
+  function stored(key) {
+    return baselines.has(key) ? baselines.get(key) : fieldByKey(key)?.value;
+  }
+  function base(key) {
+    const value = stored(key);
+    return value !== void 0 ? value : fieldByKey(key)?.default;
+  }
+  function fallbackDefault(key) {
+    if (!fieldByKey(key)?.fallback) return false;
+    const value = stored(key);
+    return value === void 0 || value === null;
+  }
+  function fallbackOn(key) {
+    if (!fieldByKey(key)?.fallback) return false;
+    return work.get(key)?.fallback ?? fallbackDefault(key);
+  }
+  function own(key) {
+    const current = work.get(key);
+    return current && "edit" in current ? current.edit : base(key);
+  }
+  function sourceOf(key) {
+    if (!fallbackOn(key)) return void 0;
+    const source = fieldByKey(key)?.fallback?.key;
+    return source !== void 0 && fieldsByKey.value.has(source) ? source : void 0;
+  }
+  function resolve(key, visited) {
+    if (visited.has(key)) return void 0;
+    visited.add(key);
+    try {
+      const source = sourceOf(key);
+      return source === void 0 ? own(key) : resolve(source, visited);
+    } finally {
+      visited.delete(key);
+    }
+  }
+  function valueOf(key) {
+    return resolve(key, /* @__PURE__ */ new Set());
+  }
+  function isDirty(key) {
+    if (fallbackOn(key)) return stored(key) != null;
+    return valueOf(key) !== base(key);
+  }
+  function outgoing(key) {
+    return fallbackOn(key) ? null : valueOf(key);
+  }
+  function status(key) {
+    if (!available(key)) return "unavailable";
+    if (savingKeys.has(key)) return "saving";
+    if (conflicts.has(key)) return "conflicted";
+    return isDirty(key) ? "dirty" : "clean";
+  }
+  function putWork(key, next) {
+    if (!("edit" in next) && next.fallback === void 0) work.delete(key);
+    else work.set(key, next);
+  }
+  function set(key, value) {
+    const next = { ...work.get(key) };
+    if (value === void 0) delete next.edit;
+    else next.edit = value;
+    putWork(key, next);
+  }
+  function pinned(key, fallback) {
+    const next = { edit: own(key) };
+    if (fallback !== void 0) next.fallback = fallback;
+    return next;
+  }
+  function setFallbackOn(key, on) {
+    putWork(key, on ? { fallback: true } : pinned(key, false));
+  }
+  function discardField(key) {
+    work.delete(key);
+    conflicts.delete(key);
+  }
+  function resetToDefault(key) {
+    const field2 = fieldByKey(key);
+    const next = {};
+    if (field2?.default !== void 0) next.edit = field2.default;
+    if (field2?.fallback) next.fallback = false;
+    putWork(key, next);
+  }
+  function rebase(key) {
+    const conflict = conflicts.get(key);
+    conflicts.delete(key);
+    if (conflict && "remote" in conflict) baselines.set(key, conflict.remote);
+  }
+  function keepMine(key) {
+    if (!conflicts.has(key)) return;
+    const declared2 = fieldByKey(key)?.fallback !== void 0;
+    const on = fallbackOn(key);
+    if (on) putWork(key, { fallback: true });
+    else putWork(key, pinned(key, declared2 ? false : void 0));
+    rebase(key);
+  }
+  function takeTheirs(key) {
+    if (!conflicts.has(key)) return;
+    rebase(key);
+    work.delete(key);
+  }
+  const handles = /* @__PURE__ */ new Map();
+  function field(key) {
+    const existing = handles.get(key);
+    if (existing) return existing;
+    const handle = {
+      key,
+      field: computed(() => fieldByKey(key)),
+      base: computed(() => base(key)),
+      pending: computed(() => work.get(key)?.edit),
+      value: computed({
+        get: () => valueOf(key),
+        set: (value) => set(key, value)
+      }),
+      remote: computed(() => conflicts.get(key)?.remote),
+      fallbackActive: computed({
+        get: () => fallbackOn(key),
+        set: (on) => setFallbackOn(key, on)
+      }),
+      fallbackActiveDefault: computed(() => fallbackDefault(key)),
+      inheritedFrom: computed(() => sourceOf(key)),
+      inheriting: computed(() => sourceOf(key) !== void 0),
+      isDirty: computed(() => isDirty(key)),
+      status: computed(() => status(key)),
+      set: (value) => set(key, value),
+      discard: () => discardField(key),
+      resetToDefault: () => resetToDefault(key),
+      keepMine: () => keepMine(key),
+      takeTheirs: () => takeTheirs(key)
+    };
+    handles.set(key, handle);
+    return handle;
+  }
+  const keys = computed(
+    () => /* @__PURE__ */ new Set([...fieldsByKey.value.keys(), ...work.keys()])
+  );
+  const fields = computed(
+    () => [...fieldsByKey.value.values()].filter((field2) => available(field2.key))
+  );
+  const values = computed(() => {
+    const result = {};
+    for (const key of fieldsByKey.value.keys()) {
+      if (available(key)) result[key] = valueOf(key);
+    }
+    return result;
+  });
+  const changes = computed(() => {
+    const result = {};
+    for (const key of keys.value) {
+      if (fieldsByKey.value.has(key) && available(key) && isDirty(key)) {
+        result[key] = outgoing(key);
+      }
+    }
+    return result;
+  });
+  const sendable = computed(
+    () => Object.fromEntries(
+      Object.entries(changes.value).filter(([key]) => !conflicts.has(key))
+    )
+  );
+  const canSave = computed(() => Object.keys(sendable.value).length > 0);
+  const isDirtyAll = computed(() => [...keys.value].some(isDirty));
+  const isSaving = computed(() => saving.value);
+  const conflictKeys = computed(() => [...conflicts.keys()]);
+  function reportedConflicts(result) {
+    const reported = result?.conflicts;
+    if (Array.isArray(reported)) {
+      return new Map(reported.map((key) => [key, {}]));
+    }
+    return new Map(
+      Object.entries(reported ?? {}).map(([key, remote]) => [key, { remote }])
+    );
+  }
+  function settle(key, sent) {
+    conflicts.delete(key);
+    if (schemaRevision(key) === sent.schemaRevision) {
+      baselines.set(key, sent.value);
+    }
+    if (work.get(key) === sent.work) work.delete(key);
+  }
+  async function save() {
+    if (saving.value) return;
+    const batch = { ...sendable.value };
+    const batchKeys = Object.keys(batch);
+    if (batchKeys.length === 0) return;
+    const sent = new Map(
+      batchKeys.map((key) => [
+        key,
+        {
+          value: batch[key],
+          work: work.get(key),
+          schemaRevision: schemaRevision(key)
+        }
+      ])
+    );
+    saving.value = true;
+    for (const key of batchKeys) savingKeys.add(key);
+    try {
+      const result = await options.onSave?.(batch);
+      const reported = reportedConflicts(result);
+      const rejected = new Set(result?.rejected ?? []);
+      for (const [key, snapshot] of sent) {
+        const conflict = reported.get(key);
+        if (conflict) {
+          if (snapshot.work === void 0 || work.has(key)) {
+            conflicts.set(key, conflict);
+          }
+        } else if (!rejected.has(key)) {
+          settle(key, snapshot);
+        }
+      }
+    } finally {
+      saving.value = false;
+      savingKeys.clear();
+    }
+  }
+  function discard() {
+    work.clear();
+    conflicts.clear();
+  }
+  return {
+    field,
+    fieldByKey,
+    register,
+    valueOf,
+    areas,
+    areaOf,
+    fields,
+    values,
+    changes,
+    canSave,
+    isDirty: isDirtyAll,
+    isSaving,
+    conflicts: conflictKeys,
+    save,
+    discard,
+    resetToDefault
+  };
+}
+function useStateManager(options = {}) {
+  return createStateManager(options);
+}
+const settingsFormSessionKey = /* @__PURE__ */ Symbol(
+  "settings-form-session"
+);
+function useSettingsForm(options = {}) {
+  const session = createStateManager(options);
+  provide(settingsFormSessionKey, session);
+  return session;
+}
+function useSettingsFormSession() {
+  return hasInjectionContext() ? inject(settingsFormSessionKey, void 0) : void 0;
+}
+function useSettingField(props, options = {}) {
+  const session = options.session ?? useSettingsFormSession() ?? createStateManager({ fields: options.fields });
+  session.register(() => props.field);
+  const handle = computed(() => session.field(props.field.key));
+  const { resolveText } = useSettingsLocale();
+  const label = computed(
+    () => props.field.label ? resolveText(props.field.label) : ""
+  );
+  const description = computed(
+    () => props.field.description ? resolveText(props.field.description) : void 0
+  );
+  const placeholder = computed(() => {
+    const text = props.field.presentation?.placeholder;
+    if (typeof text === "string") return text;
+    return text ? resolveText(text) : void 0;
+  });
+  const registry = useControlRegistry();
+  const definition = computed(
+    () => resolveControlDefinition(props.field, registry)
+  );
+  const inputComponent = computed(() => definition.value.component);
+  const errors = computed(() => props.errors ?? []);
+  const disabled = computed(
+    () => props.field.editable === false || props.disabled === true || handle.value.status.value === "unavailable"
+  );
+  const { fallback, inheriting, inheritedFrom } = useFieldInheritance(
+    props,
+    session
+  );
+  const controlProps = computed(() => ({
+    ...definition.value.props(props.field, {
+      label: label.value,
+      tooltip: description.value
+    }),
+    // After the mapper: its props carry the raw `LocalizedText` placeholder.
+    // A set `presentation.placeholder` also overrides a custom mapper's own.
+    ...placeholder.value !== void 0 && { placeholder: placeholder.value },
+    id: props.field.key,
+    name: props.field.key,
+    required: props.field.constraints?.required,
+    disabled: disabled.value,
+    // Each control decides how it behaves while inheriting.
+    inheriting: inheriting.value,
+    label: label.value,
+    tooltip: description.value,
+    errors: errors.value,
+    ...skA11yAttrs({
+      id: props.field.key,
+      invalid: errors.value.length > 0,
+      required: props.field.constraints?.required
+    })
+  }));
+  const value = computed({
+    get: () => handle.value.value.value,
+    set: (next) => {
+      handle.value.value.value = next;
+    }
+  });
+  const pending = computed(() => handle.value.pending.value);
+  const remote = computed(() => handle.value.remote.value);
+  const isDirty = computed(() => handle.value.isDirty.value);
+  const state = computed(() => {
+    const status = handle.value.status.value;
+    if (status !== "clean" && status !== "dirty") return status;
+    if (errors.value.length > 0) return "invalid";
+    return status;
+  });
+  return {
+    // Live getter: always reflects the latest `field` prop.
+    get field() {
+      return props.field;
+    },
+    label,
+    description,
+    definition,
+    inputComponent,
+    controlProps,
+    value,
+    pending,
+    remote,
+    disabled,
+    errors,
+    isDirty,
+    inheriting,
+    inheritedFrom,
+    fallback,
+    state,
+    session,
+    discard: () => handle.value.discard(),
+    resetToDefault: () => handle.value.resetToDefault()
+  };
+}
+const _hoisted_1$4 = { class: "flex items-center gap-3" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkCheckboxControl",
+    inheritAttrs: false
+  },
+  __name: "SkCheckboxControl",
+  props: /* @__PURE__ */ mergeDefaults({
+    modelValue: { type: Boolean },
+    id: {},
+    name: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    inheriting: { type: Boolean },
+    required: { type: Boolean },
+    label: {},
+    tooltip: {},
+    errors: {}
+  }, {
+    ...skBaseControlDefaults
+  }),
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const model = useControlModel(props, emit, false);
+    const controlName = useName(props?.name ?? props?.id);
+    const a11yAttrs = useA11yAttrs([
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "aria-invalid",
+      "aria-required",
+      "aria-errormessage"
+    ]);
+    const checked = computed({
+      get: () => model.value === true,
+      set: (next) => {
+        const value = next === true;
+        model.value = value;
+        emit("change", value);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1$4, [
+          createVNode(unref(UiCheckbox), mergeProps({
+            id: __props.id,
+            modelValue: checked.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => checked.value = $event)
+          }, unref(a11yAttrs), {
+            name: unref(controlName),
+            disabled: __props.disabled,
+            required: __props.required
+          }), null, 16, ["id", "modelValue", "name", "disabled", "required"]),
+          renderSlot(_ctx.$slots, "label")
+        ]),
+        renderSlot(_ctx.$slots, "error")
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$3 = ["id"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkField"
+  },
+  __name: "SkField",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    errors: { default: void 0 },
+    field: {}
+  }, {
+    "modelValue": {
+      default: void 0
+    },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update", "change", "action", "update:effective"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const [model, modifiers] = useModel(__props, "modelValue", {
+      set: (next) => cast(next)
+    });
+    function cast(next) {
+      return skCastModelValue(next, modifiers);
+    }
+    const {
+      controlProps,
+      definition,
+      inputComponent,
+      value,
+      pending,
+      label,
+      description,
+      errors,
+      fallback
+    } = useSettingField(props);
+    const incoming = computed(() => cast(model.value));
+    if (incoming.value === void 0 && pending.value !== void 0) {
+      model.value = pending.value;
+    } else if (incoming.value !== pending.value) {
+      value.value = incoming.value;
+    }
+    watch(incoming, (next) => {
+      if (next !== pending.value) value.value = next;
+    });
+    watch(
+      pending,
+      (next) => {
+        if (incoming.value !== next) model.value = next;
+      },
+      { flush: "sync" }
+    );
+    watch(value, (next) => emit("update:effective", next), {
+      immediate: true,
+      flush: "sync"
+    });
+    const controlModel = computed({
+      get: () => value.value,
+      set: (next) => {
+        value.value = cast(next);
+      }
+    });
+    const inputListeners = {
+      "update:modelValue": (next) => emit("update", cast(next)),
+      change: (next) => emit("change", cast(next))
+    };
+    const buttonListeners = {
+      action: (method) => emit("action", method)
+    };
+    const isButtonControl = computed(() => definition.value.kind === "button");
+    const controlListeners = computed(
+      () => isButtonControl.value ? buttonListeners : inputListeners
+    );
+    const errorId = computed(() => skErrorId(props.field.key));
+    const labelId = computed(() => `${props.field.key}-label`);
+    const groupLabelAttrs = computed(
+      () => isButtonControl.value && label.value ? { "aria-labelledby": labelId.value } : {}
+    );
+    const fallbackHintId = computed(
+      () => fallback?.hint && fallback.active ? skDescriptionId(fallback.id) : void 0
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiField), {
+        "data-invalid": unref(errors).length > 0 || void 0,
+        class: "gap-2"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(unref(inputComponent)), mergeProps({
+            modelValue: controlModel.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => controlModel.value = $event)
+          }, { ...unref(controlProps), ...groupLabelAttrs.value }, toHandlers(controlListeners.value)), createSlots({
+            label: withCtx(() => [
+              unref(label) ? (openBlock(), createBlock(unref(UiFieldLabel), {
+                key: 0,
+                id: isButtonControl.value ? labelId.value : void 0,
+                for: isButtonControl.value ? void 0 : __props.field.key,
+                tooltip: unref(description)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(label)), 1)
+                ]),
+                _: 1
+              }, 8, ["id", "for", "tooltip"])) : createCommentVNode("", true)
+            ]),
+            error: withCtx(() => [
+              unref(errors).length ? (openBlock(), createBlock(unref(UiFieldError), {
+                key: 0,
+                id: errorId.value,
+                errors: unref(errors),
+                class: "label-xs-regular"
+              }, null, 8, ["id", "errors"])) : createCommentVNode("", true)
+            ]),
+            _: 2
+          }, [
+            unref(fallback) ? {
+              name: "addons",
+              fn: withCtx(() => [
+                createVNode(unref(_sfc_main$5), {
+                  id: unref(fallback).id,
+                  modelValue: unref(fallback).active,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(fallback).active = $event),
+                  name: unref(fallback).id,
+                  "aria-describedby": fallbackHintId.value
+                }, {
+                  label: withCtx(() => [
+                    createVNode(unref(UiFieldLabel), {
+                      for: unref(fallback).id
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(fallback).label), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["for"])
+                  ]),
+                  _: 1
+                }, 8, ["id", "modelValue", "name", "aria-describedby"]),
+                unref(fallback).hint && unref(fallback).active ? (openBlock(), createElementBlock("p", {
+                  key: 0,
+                  id: fallbackHintId.value,
+                  class: "label-xs-regular text-content-on-surface-muted mt-1"
+                }, toDisplayString(unref(fallback).hint), 9, _hoisted_1$3)) : createCommentVNode("", true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["modelValue"]))
+        ]),
+        _: 1
+      }, 8, ["data-invalid"]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "col-span-full flex flex-col gap-2.5" };
+const _hoisted_2$2 = {
+  key: 1,
+  class: "body-s-regular text-content-on-surface-secondary"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkGroup"
+  },
+  __name: "SkGroup",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    columns: { default: 1 },
+    level: { default: 3 }
+  },
+  setup(__props) {
+    const props = __props;
+    const columnCount = computed(
+      () => props.columns > 0 ? Math.floor(props.columns) : 1
+    );
+    const heading = computed(
+      () => `h${Math.min(Math.max(Math.round(props.level), 1), 6)}`
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        __props.title ? (openBlock(), createBlock(resolveDynamicComponent(heading.value), {
+          key: 0,
+          class: "label-s-medium text-content-on-surface-primary"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.title), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        __props.description ? (openBlock(), createElementBlock("p", _hoisted_2$2, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "grid grid-cols-1 sm:grid-cols-[repeat(var(--sk-columns),minmax(0,1fr))] items-start gap-4",
+          style: normalizeStyle({ "--sk-columns": columnCount.value })
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkItem"
+  },
+  __name: "SkItem",
+  props: {
+    field: {},
+    column: {},
+    disabled: { type: Boolean },
+    errors: {}
+  },
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const pinned = computed(
+      () => props.column !== void 0 && Number.isInteger(props.column) && props.column >= 1
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["min-w-0 w-full", { "sm:col-start-[var(--sk-column)]": pinned.value }]),
+        style: normalizeStyle(pinned.value ? { "--sk-column": __props.column } : void 0)
+      }, [
+        createVNode(unref(_sfc_main$4), {
+          field: __props.field,
+          disabled: __props.disabled,
+          errors: __props.errors,
+          onAction: _cache[0] || (_cache[0] = ($event) => emit("action", $event))
+        }, null, 8, ["field", "disabled", "errors"])
+      ], 6);
+    };
+  }
+});
+function isThenable(value) {
+  return typeof value === "object" && value !== null && typeof value.then === "function";
+}
+function useFieldValidator(fields, values, options = {}) {
+  const clientIssues = ref([]);
+  const serverReports = ref([]);
+  const validationPending = ref(false);
+  const validationRejected = ref(false);
+  const injected = useSettingsLocale();
+  const locale = () => toValue(options.locale) ?? injected.locale.value;
+  const fallbackLocale = () => toValue(options.fallbackLocale) ?? injected.fallbackLocale.value;
+  const messages = () => toValue(options.messages) ?? injected.messages.value;
+  const constraintMessage = (field, constraint) => resolveConstraintMessage(field, constraint, locale(), {
+    fallbackLocale: fallbackLocale(),
+    messages: messages()
+  });
+  let validateToken = 0;
+  function constraintIssues(field, value) {
+    return checkFieldConstraints(field, value).map((constraint) => ({
+      key: field.key,
+      constraint,
+      source: "client"
+    }));
+  }
+  async function externalIssues(field, value, external) {
+    const outcome = external["~standard"].validate(value);
+    const result = isThenable(outcome) ? await outcome : outcome;
+    return (result.issues ?? []).map((issue) => ({
+      key: field.key,
+      message: issue.message,
+      source: "client"
+    }));
+  }
+  function failureIssue(field, error) {
+    console.error(error);
+    const message = error instanceof Error && error.message ? error.message : void 0;
+    return { key: field.key, message, source: "client" };
+  }
+  async function issuesForField(field, value, token) {
+    try {
+      const external = options.validators?.[field.key];
+      const fieldIssues = external ? await externalIssues(field, value, external) : constraintIssues(field, value);
+      if (token !== validateToken) return [];
+      return fieldIssues;
+    } catch (error) {
+      if (token !== validateToken) return [];
+      return [failureIssue(field, error)];
+    }
+  }
+  async function collectIssues(token) {
+    const valueMap = toValue(values);
+    const groups = await Promise.all(
+      toValue(fields).map(
+        (field) => issuesForField(field, valueMap[field.key], token)
+      )
+    );
+    if (token !== validateToken) return [];
+    return groups.flat();
+  }
+  async function validate() {
+    const token = ++validateToken;
+    validationPending.value = true;
+    try {
+      const next = await collectIssues(token);
+      if (token !== validateToken) return;
+      validationRejected.value = false;
+      clientIssues.value = next;
+    } catch (error) {
+      if (token === validateToken) {
+        validationRejected.value = true;
+        console.error(error);
+      }
+      throw error;
+    } finally {
+      if (token === validateToken) validationPending.value = false;
+    }
+  }
+  let knownValues = { ...toValue(values) };
+  watch(
+    () => ({
+      fields: toValue(fields),
+      values: { ...toValue(values) }
+    }),
+    ({ values: now }) => {
+      validate().catch(() => {
+      });
+      serverReports.value = serverReports.value.filter(
+        (issue) => now[issue.key] === knownValues[issue.key]
+      );
+      knownValues = now;
+    },
+    { deep: true, immediate: true }
+  );
+  function applyServerIssues(reported) {
+    serverReports.value = reported;
+  }
+  function clearServerIssues() {
+    serverReports.value = [];
+  }
+  const fieldByKey = computed(
+    () => new Map(toValue(fields).map((field) => [field.key, field]))
+  );
+  const serverIssues = computed(
+    () => serverReports.value.map((issue) => ({
+      key: issue.key,
+      constraint: issue.constraint,
+      source: "server",
+      message: issue.message ?? constraintMessage(fieldByKey.value.get(issue.key), issue.constraint)
+    }))
+  );
+  const worded = computed(
+    () => clientIssues.value.map((issue) => ({
+      ...issue,
+      message: issue.message ?? constraintMessage(fieldByKey.value.get(issue.key), issue.constraint)
+    }))
+  );
+  const issues = computed(() => [...worded.value, ...serverIssues.value]);
+  const errorsByKey = computed(() => {
+    const map = {};
+    for (const issue of issues.value) {
+      const messages2 = map[issue.key] ?? [];
+      messages2.push(issue.message);
+      map[issue.key] = messages2;
+    }
+    return map;
+  });
+  const isValid = computed(
+    () => !validationPending.value && !validationRejected.value && issues.value.length === 0
+  );
+  const isValidating = computed(
+    () => validationPending.value && !validationRejected.value
+  );
+  return {
+    issues,
+    errorsByKey,
+    isValid,
+    isValidating,
+    validate,
+    applyServerIssues,
+    clearServerIssues
+  };
+}
+function useSettingsLayout(options) {
+  const session = options.session ?? useSettingsFormSession() ?? createStateManager({ fields: () => toValue(options.fields) ?? [] });
+  provide(settingsFormSessionKey, session);
+  const settings = options.settingsLocale ?? useSettingsLocale();
+  const latest = computed(
+    () => new Map((toValue(options.fields) ?? []).map((f) => [f.key, f]))
+  );
+  const registered = /* @__PURE__ */ new Set();
+  watch(
+    latest,
+    (byKey) => {
+      for (const [key, field] of byKey) {
+        if (registered.has(key) || session.fieldByKey(key)) continue;
+        registered.add(key);
+        let last = field;
+        session.register(() => last = latest.value.get(key) ?? last);
+      }
+    },
+    { immediate: true, flush: "sync" }
+  );
+  const resolved = computed(
+    () => resolveLayout(toValue(options.layout), session, {
+      locale: settings.locale.value,
+      fallbackLocale: settings.fallbackLocale.value
+    })
+  );
+  const pages = computed(() => resolved.value.pages);
+  const fields = computed(
+    () => pages.value.flatMap(
+      (entry) => keysOf(entry).flatMap((key) => {
+        const field = session.fieldByKey(key);
+        return field && field.type !== "actions" ? [field] : [];
+      })
+    )
+  );
+  const validator = useFieldValidator(fields, session.values, {
+    locale: settings.locale,
+    fallbackLocale: settings.fallbackLocale,
+    messages: settings.messages,
+    validators: options.validators
+  });
+  const revealed = ref(false);
+  const errorsByKey = computed(() => {
+    const shown = {};
+    for (const issue of validator.issues.value) {
+      const visible = issue.source === "server" || revealed.value || session.field(issue.key).isDirty.value;
+      if (!visible) continue;
+      shown[issue.key] = [...shown[issue.key] ?? [], issue.message];
+    }
+    return shown;
+  });
+  const navigation = computed(
+    () => toNavigation(resolved.value, {
+      locale: settings.locale.value,
+      fallbackLocale: settings.fallbackLocale.value,
+      isInvalid: (key) => (errorsByKey.value[key]?.length ?? 0) > 0
+    })
+  );
+  const issues = computed(
+    () => validateLayout(toValue(options.layout), session.fields.value)
+  );
+  return {
+    session,
+    resolved,
+    pages,
+    navigation,
+    page: (id) => id ? resolved.value.pageById.get(id) : void 0,
+    issues,
+    fields,
+    validator,
+    errorsByKey,
+    revealErrors: () => {
+      revealed.value = true;
+    },
+    resetErrors: () => {
+      revealed.value = false;
+    }
+  };
+}
+const _hoisted_1$1 = {
+  key: 0,
+  class: "mb-12"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "label-m-regular text-content-on-surface-primary mt-2"
+};
+const _hoisted_3 = { class: "flex flex-col gap-8" };
+const _hoisted_4 = {
+  key: 0,
+  class: "flex flex-col gap-4 py-4"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkPage"
+  },
+  __name: "SkPage",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    level: { default: 1 },
+    showHeader: { type: Boolean, default: true }
+  },
+  emits: ["submit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const heading = computed(
+      () => `h${Math.min(Math.max(Math.round(props.level), 1), 6)}`
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("form", {
+        class: "flex flex-col h-full justify-between gap-12",
+        novalidate: "",
+        onSubmit: _cache[0] || (_cache[0] = withModifiers(($event) => emit("submit"), ["prevent"]))
+      }, [
+        createElementVNode("div", null, [
+          __props.showHeader && (__props.title || __props.description) ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+            __props.title ? (openBlock(), createBlock(resolveDynamicComponent(heading.value), {
+              key: 0,
+              class: "heading-xl font-regular text-content-on-surface-primary mt-12"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(__props.title), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            __props.description ? (openBlock(), createElementBlock("p", _hoisted_2$1, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ]),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          _cache[1] || (_cache[1] = createElementVNode("hr", { class: "border-t border-input" }, null, -1)),
+          renderSlot(_ctx.$slots, "actions")
+        ])) : createCommentVNode("", true)
+      ], 32);
+    };
+  }
+});
+const _hoisted_1 = { class: "flex flex-col" };
+const _hoisted_2 = {
+  key: 1,
+  class: "body-s-regular text-content-on-surface-secondary mt-2 mb-4"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkSection"
+  },
+  __name: "SkSection",
+  props: {
+    title: { default: "" },
+    description: { default: "" },
+    columns: { default: 1 },
+    level: { default: 2 }
+  },
+  setup(__props) {
+    const props = __props;
+    const columnCount = computed(
+      () => props.columns > 0 ? Math.floor(props.columns) : 1
+    );
+    const heading = computed(
+      () => `h${Math.min(Math.max(Math.round(props.level), 1), 6)}`
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.title ? (openBlock(), createBlock(resolveDynamicComponent(heading.value), {
+          key: 0,
+          class: "body-m-bold text-content-on-surface-primary"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.title), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        __props.description ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "grid grid-cols-1 sm:grid-cols-[repeat(var(--sk-columns),minmax(0,1fr))] items-start justify-between gap-x-4 gap-y-8",
+          style: normalizeStyle({ "--sk-columns": columnCount.value })
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)
+      ]);
+    };
+  }
+});
+const defaultBlocks = {
+  page: _sfc_main$1,
+  section: _sfc_main,
+  group: _sfc_main$3,
+  item: _sfc_main$2
+};
+const skLayoutContextKey = /* @__PURE__ */ Symbol("sk-layout-context");
+function useSkLayoutContext() {
+  const context = inject(skLayoutContextKey, void 0);
+  if (!context) {
+    throw new Error(
+      "SkLayoutPage must be rendered inside SkLayout or SkShell."
+    );
+  }
+  return context;
+}
+function createActionEvent(method, key, pageId) {
+  let prevented = false;
+  return {
+    method,
+    key,
+    pageId,
+    preventDefault: () => {
+      prevented = true;
+    },
+    get defaultPrevented() {
+      return prevented;
+    }
+  };
+}
+function provideSkLayoutContext(model, options) {
+  const context = {
+    model,
+    blocks: computed(() => ({ ...defaultBlocks, ...options.blocks() })),
+    headingLevel: computed(() => options.headingLevel() ?? 1),
+    dispatch: (method, key, pageId) => {
+      const event = createActionEvent(method, key, pageId);
+      options.onAction(event);
+      if (event.defaultPrevented) return;
+      runDefaultAction(model, method).catch(options.onError);
+    }
+  };
+  provide(skLayoutContextKey, context);
+  return context;
+}
+async function runDefaultAction(model, method) {
+  if (method === "discard") {
+    model.session.discard();
+    model.validator.clearServerIssues();
+    model.resetErrors();
+    return;
+  }
+  if (method !== "apply") return;
+  await model.validator.validate();
+  if (!model.validator.isValid.value) {
+    model.revealErrors();
+    return;
+  }
+  model.validator.clearServerIssues();
+  await model.session.save();
+  model.resetErrors();
+}
+const clampLevel = (level) => Math.min(Math.max(level, 1), 6);
+const SkLayoutPage = defineComponent({
+  name: "SkLayoutPage",
+  props: {
+    /** The resolved page to render. */
+    page: { type: Object, required: true }
+  },
+  setup(props) {
+    const context = useSkLayoutContext();
+    const { model } = context;
+    function item(node) {
+      return h(context.blocks.value.item, {
+        key: node.id,
+        field: node.field,
+        column: node.column,
+        disabled: !node.rule.enabled,
+        errors: model.errorsByKey.value[node.key]
+      });
+    }
+    function group(node, level) {
+      return h(
+        context.blocks.value.group,
+        {
+          key: node.id,
+          title: node.showHeader ? node.label : void 0,
+          description: node.showHeader ? node.description : void 0,
+          columns: node.columns,
+          level: clampLevel(level)
+        },
+        { default: () => node.children.map(item) }
+      );
+    }
+    function section(node, level) {
+      const titled = node.showHeader && !!node.label;
+      return h(
+        context.blocks.value.section,
+        {
+          key: node.id,
+          title: node.showHeader ? node.label : void 0,
+          description: node.showHeader ? node.description : void 0,
+          columns: node.columns,
+          level: clampLevel(level)
+        },
+        {
+          default: () => {
+            const groupLevel = titled ? level + 1 : level;
+            return node.children.map(
+              (child) => child.kind === "item" ? item(child) : group(child, groupLevel)
+            );
+          }
+        }
+      );
+    }
+    function action(node, page) {
+      return h(_sfc_main$4, {
+        key: node.id,
+        field: node.field,
+        disabled: !node.rule.enabled || model.session.isSaving.value,
+        onAction: (method) => context.dispatch(method, node.key, page.id)
+      });
+    }
+    return () => {
+      const page = props.page;
+      const level = clampLevel(context.headingLevel.value);
+      return h(
+        context.blocks.value.page,
+        {
+          key: page.id,
+          title: page.label,
+          description: page.description,
+          showHeader: page.showHeader,
+          level
+        },
+        {
+          default: () => page.children.map((child) => section(child, level + 1)),
+          ...page.actions.length ? {
+            actions: () => page.actions.map((node) => action(node, page))
+          } : {}
+        }
+      );
+    };
+  }
+});
+export {
+  toNavigation as A,
+  useControlRegistry as B,
+  useFieldInheritance as C,
+  useFieldValidator as D,
+  useSettingField as E,
+  useSettingsForm as F,
+  useSettingsFormSession as G,
+  useSettingsLayout as H,
+  useSettingsLocale as I,
+  useStateManager as J,
+  validateFieldRules as K,
+  validateLayout as L,
+  _sfc_main$5 as M,
+  useControlModel as N,
+  useName as O,
+  useA11yAttrs as P,
+  skBaseControlDefaults as Q,
+  skPeriodUnits as R,
+  SkLayoutPage as S,
+  skDescriptionId as T,
+  skCountries as U,
+  resolveKitMessage as V,
+  _sfc_main$4 as _,
+  _sfc_main$3 as a,
+  _sfc_main$2 as b,
+  _sfc_main$1 as c,
+  _sfc_main as d,
+  byOrder as e,
+  checkFieldConstraints as f,
+  createFieldInput as g,
+  createStateManager as h,
+  defaultBlocks as i,
+  evaluateCondition as j,
+  evaluateFieldRules as k,
+  evaluateRuleStates as l,
+  keysOf as m,
+  layoutIdSegment as n,
+  layoutPageId as o,
+  provideControls as p,
+  provideSettingsLocale as q,
+  provideSkLayoutContext as r,
+  resolveConstraintMessage as s,
+  resolveControlDefinition as t,
+  resolveFieldControl as u,
+  resolveLayout as v,
+  resolveLocalizedText as w,
+  settingsFormSessionKey as x,
+  skControlRegistryKey as y,
+  skLayoutContextKey as z
+};