@ikas/component-cli 1.4.0-beta.23 → 1.4.0-beta.230

package/dist/utils/component-helpers.js

@@ -1,6 +1,7 @@
 import * as crypto from "crypto";
 import * as fs from "fs";
 import * as path from "path";
+import { isLanguageCode } from "./i18n.js";
 import { readTemplate } from "./template.js";
 /**
  * Generate an 8-character random alphanumeric project ID (lowercase + digits).
@@ -35,6 +36,95 @@ export function generateUniqueId() {
 export function generateComponentId(projectId) {
     return `${projectId}-${generateUniqueId()}`;
 }
+/**
+ * The editor's publish-id machinery (rewrite-asset-ids.ts, MIN_ROOT_ID_LENGTH = 6)
+ * treats a leading run of >=6 alphanumeric characters before a `-`/`_` separator as
+ * a strippable project prefix, and republish stability (insert-vs-version matching
+ * by source suffix) depends on every projectId satisfying that shape. A projectId
+ * that is shorter, or that contains a separator/non-alphanumeric character, shifts
+ * the prefix/suffix boundary and silently re-opens the duplicate-element bug.
+ * `generateProjectId()` always satisfies this; the check exists because
+ * ikas.config.json is hand-editable and parsed without a schema.
+ */
+export const PROJECT_ID_PATTERN = /^[A-Za-z0-9]{6,}$/;
+export function isValidProjectId(projectId) {
+    return PROJECT_ID_PATTERN.test(projectId);
+}
+/**
+ * A component id is publishable when the editor's prefix-strip machinery parses it
+ * unambiguously: either a legacy atomic id (alphanumeric only, no separators) or a
+ * `<projectId>-<suffix>` form whose PREFIX meets the same >=6 floor as PROJECT_ID_PATTERN.
+ * The prefix must stay >=6 alphanumeric with NO separator (the editor strips exactly one
+ * leading `>=MIN_ROOT_ID_LENGTH` run before the first `-`/`_`); a short/separator-bearing
+ * prefix shifts that boundary and re-opens the duplicate-element bug.
+ *
+ * The SUFFIX, however, may be multi-segment (`<projectId>-hero-slider`,
+ * `<projectId>-product-detail-add-to-cart`): older CLI configs used human-readable
+ * suffixes, and those ids are already placed on published themes so they cannot be
+ * renamed. The editor's `normalizeSourceElementId` canonicalizes every suffix separator
+ * to `_`, so a hyphenated local suffix and its underscore-sterilized published form
+ * normalize to the same republish-invariant key — multi-segment suffixes match stably.
+ * Each segment must still be a non-empty alphanumeric run (no trailing/doubled separators).
+ */
+export const COMPONENT_ID_PATTERN = /^(?:[A-Za-z0-9]+|[A-Za-z0-9]{6,}(?:[-_][A-Za-z0-9]+)+)$/;
+/**
+ * Ids from the pre-projectId CLI (`<kebab-name>-<Date.now()>`) predate the prefix
+ * contract and are already placed on themes, so the prefix check below skips them.
+ */
+const LEGACY_TIMESTAMP_ID_PATTERN = /-\d{13}$/;
+/**
+ * Besides the shape check, a separator-bearing id must carry THIS project's prefix.
+ * An id with another prefix was copied from somewhere else — typically the published
+ * id the editor reports for a component installed from a design asset. Syncing it
+ * creates a second copy of the published component in the partner theme and corrupts
+ * the asset's local→published id map on the next publish.
+ */
+export function findInvalidComponentIds(components, projectId) {
+    return components.flatMap((c) => {
+        if (!COMPONENT_ID_PATTERN.test(c.id)) {
+            return [{ id: c.id, name: c.name, reason: "malformed id" }];
+        }
+        const prefix = c.id.split(/[-_]/)[0];
+        const hasSeparator = prefix !== c.id;
+        if (projectId &&
+            hasSeparator &&
+            prefix !== projectId &&
+            !LEGACY_TIMESTAMP_ID_PATTERN.test(c.id)) {
+            return [
+                {
+                    id: c.id,
+                    name: c.name,
+                    reason: `does not start with this project's id "${projectId}"`,
+                },
+            ];
+        }
+        return [];
+    });
+}
+/**
+ * Identity edits a running dev server must not take from a config reload: a changed
+ * projectId, or a component that kept its entry file but came back under another id.
+ * The editor reads an id that disappears mid-session as "component deleted" and removes
+ * the imported component, its wrapper section and its page placements from the theme.
+ * A component whose entry is gone from the config is a real removal and is not reported.
+ */
+export function findIdentityChanges(previous, reloaded) {
+    const changes = [];
+    if (previous.projectId && reloaded.projectId !== previous.projectId) {
+        changes.push(`projectId "${previous.projectId}" -> "${reloaded.projectId}"`);
+    }
+    const previousIdByEntry = new Map((previous.components ?? []).map((c) => [c.entry, c.id]));
+    for (const c of reloaded.components ?? []) {
+        const previousId = previousIdByEntry.get(c.entry);
+        if (previousId && previousId !== c.id) {
+            changes.push(`${c.name}: "${previousId}" -> "${c.id}"`);
+        }
+    }
+    return changes;
+}
+/** Shared hint printed under an invalid-component-id error. */
+export const COMPONENT_ID_HINT = "Component ids are generated by the CLI — restore the original values. Never hand-edit them, " +
+    "never copy an id shown by the editor into ikas.config.json, and do not change projectId to match.";
 /**
  * Validate that every entry in `input` is the id of a component currently in `components`.
  * Returns the list of unknown entries (empty array means all valid).
@@ -96,8 +186,8 @@ export const PROP_TYPE_TO_TS = {
     COLOR: "string",
     PRODUCT: "IkasProduct | null",
     PRODUCT_LIST: "IkasProductList",
-    PRODUCT_ATTRIBUTE: "IkasProductAttributeValue | null",
-    PRODUCT_ATTRIBUTE_LIST: "IkasProductAttributeValue[]",
+    PRODUCT_ATTRIBUTE: "IkasProductAttributeDetail | null",
+    PRODUCT_ATTRIBUTE_LIST: "IkasProductAttributeList",
     CATEGORY: "IkasCategory | null",
     CATEGORY_LIST: "IkasCategoryList",
     BRAND: "IkasBrand | null",
@@ -111,6 +201,69 @@ export const PROP_TYPE_TO_TS = {
     COMPONENT: "any",
     COMPONENT_LIST: "any",
 };
+/**
+ * Pattern-element ("Font Style" / typography) enum sentinel. The editor builds
+ * this synthetic enum at theme time (createPatternElementEnum). Mirror of
+ * PATTERN_ELEMENT_ENUM_ID in @ikas/editor-models — kept local to avoid an
+ * editor-models dependency in the CLI.
+ */
+export const PATTERN_ELEMENT_ENUM_ID = "__patternElementEnum__";
+/**
+ * Built-in enum type ids do not need to exist in config.customTypes: @ikas/*
+ * enums ship with the storefront models, and the pattern-element sentinel is
+ * resolved by the editor at theme time. Author-defined enums are NOT built-in.
+ */
+export function isBuiltInEnumTypeId(enumTypeId) {
+    return (enumTypeId.startsWith("@ikas/") || enumTypeId === PATTERN_ELEMENT_ENUM_ID);
+}
+const ENUM_OPTIONS_EXAMPLE = `'{"Small":"sm","Medium":"md"}' or '[{"name":"Small","value":"sm"}]'`;
+/**
+ * The parsed `--options` of `config add-enum` / `config update-enum`, as the `{ "Label": "value" }`
+ * record an enum stores. The object form passes through unchanged. The array form
+ * `[{ "name": "Label", "value": "value" }]` (`label` is accepted for `name`) — which older project
+ * docs showed and agents still produce — is converted, with values stringified like every enum value.
+ */
+export function normalizeEnumOptionsInput(input) {
+    if (Array.isArray(input)) {
+        const options = {};
+        for (const item of input) {
+            if (!item || typeof item !== "object" || Array.isArray(item)) {
+                return {
+                    error: `Each option in the array must be an object { "name", "value" }, e.g. ${ENUM_OPTIONS_EXAMPLE}.`,
+                };
+            }
+            const { name, label, value } = item;
+            const optionLabel = name ?? label;
+            if (typeof optionLabel !== "string" || !optionLabel.trim()) {
+                return {
+                    error: `Every option needs a non-empty string "name", e.g. ${ENUM_OPTIONS_EXAMPLE}.`,
+                };
+            }
+            if ((typeof value !== "string" && typeof value !== "number") ||
+                String(value).trim() === "") {
+                return {
+                    error: `Option "${optionLabel}" needs a non-empty string "value", e.g. ${ENUM_OPTIONS_EXAMPLE}.`,
+                };
+            }
+            if (Object.prototype.hasOwnProperty.call(options, optionLabel)) {
+                return { error: `Duplicate option name "${optionLabel}".` };
+            }
+            options[optionLabel] = String(value);
+        }
+        if (Object.keys(options).length === 0) {
+            return {
+                error: `Options must not be empty, e.g. ${ENUM_OPTIONS_EXAMPLE}.`,
+            };
+        }
+        return { options };
+    }
+    if (input && typeof input === "object" && Object.keys(input).length > 0) {
+        return { options: input };
+    }
+    return {
+        error: `Options must be a non-empty JSON object or array, e.g. ${ENUM_OPTIONS_EXAMPLE}.`,
+    };
+}
 export function toKebabCase(str) {
     return str
         .replace(/([a-z])([A-Z])/g, "$1-$2")
@@ -149,14 +302,16 @@ function resolveTypeId(typeId) {
  */
 function resolveCustomEnumTypeName(enumTypeId, editorTypes, customTypes) {
     if (editorTypes) {
-        const editorType = editorTypes.find(t => t.id === enumTypeId);
-        if (editorType?.enumOptions && Object.keys(editorType.enumOptions).length > 0) {
+        const editorType = editorTypes.find((t) => t.id === enumTypeId);
+        if (editorType?.enumOptions &&
+            Object.keys(editorType.enumOptions).length > 0) {
             return toPascalCase(editorType.name);
         }
     }
     if (customTypes) {
-        const customType = customTypes.find(t => t.id === enumTypeId);
-        if (customType?.enumOptions && Object.keys(customType.enumOptions).length > 0) {
+        const customType = customTypes.find((t) => t.id === enumTypeId);
+        if (customType?.enumOptions &&
+            Object.keys(customType.enumOptions).length > 0) {
             return toPascalCase(customType.name);
         }
     }
@@ -176,7 +331,9 @@ export function generateTypesFile(componentName, props, type, editorTypes, custo
                 typeIdResolved.set(prop.name, resolved.isArray ? `${resolved.typeName}[]` : resolved.typeName);
             }
         }
-        else if (prop.type === "ENUM" && prop.enumTypeId) {
+        else if (prop.type === "ENUM" &&
+            prop.enumTypeId &&
+            prop.enumTypeId !== PATTERN_ELEMENT_ENUM_ID) {
             const resolved = resolveTypeId(prop.enumTypeId);
             if (resolved) {
                 // Built-in enum — import from @ikas/bp-storefront
@@ -193,6 +350,9 @@ export function generateTypesFile(componentName, props, type, editorTypes, custo
             }
         }
         else {
+            // Non-ENUM props, plus the font-style (pattern-element) sentinel whose
+            // runtime value is a plain pattern-element id string → PROP_TYPE_TO_TS
+            // (PROP_TYPE_TO_TS["ENUM"] === "string"), no import emitted.
             const tsType = PROP_TYPE_TO_TS[prop.type];
             if (tsType?.includes("Ikas")) {
                 const matches = tsType.match(/Ikas\w+/g);
@@ -298,6 +458,96 @@ export function collectUsedCustomTypeIds(customTypes, components) {
     }
     return used;
 }
+/**
+ * Enum ids referenced by ENUM theme settings. Their union types must be emitted into
+ * `global-types.ts` even when no component prop uses the enum, so the setting's value-map
+ * entry (and `themeValue()`) can narrow to it.
+ */
+export function collectThemeSettingEnumIds(themeSettings) {
+    const ids = new Set();
+    for (const s of themeSettings || []) {
+        if (s.type === "ENUM" && s.enumTypeId)
+            ids.add(s.enumTypeId);
+    }
+    return ids;
+}
+/**
+ * Map a global-variable kind to a TS type. Primitives narrowed; complex kinds stay `any`. An
+ * ENUM setting narrows to the union type THIS file declares for its enum: `resolveEnumTypeName`
+ * only knows the enums emitted above the theme block, so the map can never name an undeclared
+ * identifier. An ENUM whose enum is not emitted here — a deleted type, or a built-in `@ikas/*`
+ * enum (which the editor does not accept for a theme global, and whose import from
+ * `@ikas/bp-storefront` this generator cannot verify) — degrades to `string`.
+ */
+function themeSettingTsType(setting, resolveEnumTypeName) {
+    switch (setting.type) {
+        case "NUMBER":
+            return "number";
+        case "BOOLEAN":
+            return "boolean";
+        case "TEXT":
+        case "RICH_TEXT":
+        case "COLOR":
+            return "string";
+        case "ENUM":
+            return ((setting.enumTypeId && resolveEnumTypeName(setting.enumTypeId)) ||
+                "string");
+        default:
+            return "any"; // IMAGE, BORDER, SHADOW — object shapes can drift from runtime
+    }
+}
+/**
+ * Import line for the typed theme-globals wrapper. Must sit at the top of the generated
+ * file (after the header). Emitted only when there are theme globals.
+ *
+ * A module augmentation can't deliver key-safety here: the runtime `getThemeSettingValue`
+ * is declared `(name: string): any`, so an added narrower overload never wins resolution —
+ * unknown keys still match `string` and return `any`. A generated wrapper whose parameter
+ * is `ThemeSettingName` (no `string` overload) does reject unknown keys and narrow the value.
+ */
+const THEME_GLOBALS_IMPORT = `import { getThemeSettingValue as _getThemeSettingValueRaw } from "@ikas/bp-storefront";\n`;
+/**
+ * Sentinel that marks a generated `global-types.ts` as containing the theme-globals block.
+ * This is the exported symbol authors import (stable public API), and it must stay a substring
+ * of what {@link generateThemeGlobalsBlock} emits — keep the two in sync if that output changes.
+ */
+const THEME_GLOBALS_MARKER = "export type ThemeSettingName";
+/**
+ * Build the theme-globals block for `src/global-types.ts`: the key union, a value-type map,
+ * and a type-safe `themeValue` wrapper (authors import it from `./global-types`). The wrapper
+ * is deliberately named differently from the SDK's `getThemeSettingValue` so authors can't
+ * accidentally import the untyped SDK version and lose key-safety (no shadowing).
+ * Returns "" when there are no globals (an empty union would resolve to `never`). The import
+ * the wrapper needs is emitted separately via {@link THEME_GLOBALS_IMPORT}.
+ */
+function generateThemeGlobalsBlock(themeSettings, resolveEnumTypeName = () => null) {
+    if (!themeSettings || themeSettings.length === 0)
+        return "";
+    const sorted = [...themeSettings].sort((a, b) => a.name.localeCompare(b.name));
+    const unionLines = sorted
+        .map((s) => {
+        // Escape the JSDoc comment terminator to avoid prematurely closing the
+        // generated `/** ... */` block when a displayName contains `*/`.
+        const label = String(s.displayName).replace(/\*\//g, "*\\/");
+        return `  /** ${label} (${s.type}) */\n  | ${JSON.stringify(s.name)}`;
+    })
+        .join("\n");
+    const mapLines = sorted
+        .map((s) => `  ${JSON.stringify(s.name)}: ${themeSettingTsType(s, resolveEnumTypeName)};`)
+        .join("\n");
+    return (`\n/** Stable keys of theme global variables defined in the editor's "Styles" panel. */\n` +
+        `export type ThemeSettingName =\n${unionLines};\n\n` +
+        `/** Narrowed value type per global key (primitives and ENUM unions; complex kinds are \`any\`). */\n` +
+        `type ThemeSettingValueMap = {\n${mapLines}\n};\n\n` +
+        `/**\n` +
+        ` * Type-safe theme global accessor — only accepts keys declared in the editor's Styles panel.\n` +
+        ` * Import this from \`./global-types\`, not \`getThemeSettingValue\` from \`@ikas/bp-storefront\`\n` +
+        ` * (that one is untyped: it accepts any string and returns \`any\`).\n` +
+        ` */\n` +
+        `export function themeValue<K extends ThemeSettingName>(name: K): ThemeSettingValueMap[K] {\n` +
+        `  return _getThemeSettingValueRaw(name) as ThemeSettingValueMap[K];\n` +
+        `}\n`);
+}
 /**
  * Generate the content for `src/global-types.ts`.
  * Collects all custom enum types from editorTypes (preferred) or customTypes (fallback)
@@ -311,8 +561,11 @@ export function generateGlobalTypesFile(editorTypes, customTypes,
  * Callers should compute this from `config.components[*].props[*].enumTypeId`
  * so unused enums are excluded from `global-types.ts`.
  */
-usedEnumIds) {
+usedEnumIds, themeSettings) {
     const header = `// Auto-generated global type definitions for ikas code components.\n// This file is regenerated automatically — do not edit manually.\n`;
+    // Enums an ENUM theme setting selects from are emitted regardless of `usedEnumIds`: the
+    // setting's value-map entry names them, so they must exist even if no prop uses them.
+    const forcedEnumIds = collectThemeSettingEnumIds(themeSettings);
     // Collect all custom enum types with their options
     // Use a Map keyed by type ID to deduplicate
     const enumTypes = new Map();
@@ -320,10 +573,10 @@ usedEnumIds) {
     if (editorTypes) {
         for (const t of editorTypes) {
             if (t.enumOptions && Object.keys(t.enumOptions).length > 0) {
-                // Skip built-in types
-                if (t.id.startsWith("@ikas/"))
+                // Skip built-in types (@ikas/* and the pattern-element font-style sentinel)
+                if (isBuiltInEnumTypeId(t.id))
                     continue;
-                if (usedEnumIds && !usedEnumIds.has(t.id))
+                if (usedEnumIds && !usedEnumIds.has(t.id) && !forcedEnumIds.has(t.id))
                     continue;
                 enumTypes.set(t.id, {
                     name: toPascalCase(t.name),
@@ -339,9 +592,9 @@ usedEnumIds) {
             const id = t.id;
             if (enumTypes.has(id))
                 continue;
-            if (id.startsWith("@ikas/"))
+            if (isBuiltInEnumTypeId(id))
                 continue;
-            if (usedEnumIds && !usedEnumIds.has(id))
+            if (usedEnumIds && !usedEnumIds.has(id) && !forcedEnumIds.has(id))
                 continue;
             if (t.enumOptions && Object.keys(t.enumOptions).length > 0) {
                 enumTypes.set(id, {
@@ -352,17 +605,56 @@ usedEnumIds) {
             }
         }
     }
+    // The theme block may only name enum types declared in THIS file (see themeSettingTsType).
+    const resolveEnumTypeName = (enumTypeId) => enumTypes.get(enumTypeId)?.name ?? null;
+    const themeBlock = generateThemeGlobalsBlock(themeSettings, resolveEnumTypeName);
+    // The wrapper's runtime import must sit at the top of the file (after the header).
+    const themeImport = themeBlock ? THEME_GLOBALS_IMPORT : "";
     if (enumTypes.size === 0) {
-        return `${header}// Custom enum types from the editor will appear here.\n\nexport {};\n`;
+        if (!themeBlock) {
+            return `${header}// Custom enum types from the editor will appear here.\n\nexport {};\n`;
+        }
+        return `${header}${themeImport}${themeBlock}`;
     }
     // Sort by type name for stable output
     const sorted = Array.from(enumTypes.values()).sort((a, b) => a.name.localeCompare(b.name));
-    let content = `${header}\n`;
+    let content = `${header}${themeImport}\n`;
     for (const enumType of sorted) {
-        const unionType = enumType.options.map(v => `"${v}"`).join(" | ");
+        const unionType = enumType.options.map((v) => `"${v}"`).join(" | ");
         content += `/** Enum type: ${enumType.id} */\nexport type ${enumType.name} = ${unionType};\n`;
     }
-    return content;
+    return `${content}${themeBlock}`;
+}
+/**
+ * Decide whether freshly generated `global-types.ts` content should overwrite
+ * the existing file on disk.
+ *
+ * Guards the dev-server startup race: before the editor connects, the theme
+ * settings cache is empty, so the generated content omits the theme-globals
+ * block (`themeValue`, `ThemeSettingName`). Writing it would clobber the rich
+ * file left from the previous session and break every component that imports
+ * those exports until the editor reconnects and re-syncs. While theme settings
+ * are not yet cached, preserve an existing theme-globals block instead of
+ * stubbing it out — the editor's `onSyncTypes` is the authoritative writer once
+ * connected.
+ *
+ * @param existing               current file content, or null if the file is absent
+ * @param next                   freshly generated content
+ * @param hasThemeSettingsCached whether the editor has synced theme settings yet
+ */
+export function shouldWriteGlobalTypes(existing, next, hasThemeSettingsCached) {
+    // No file yet — always write so imports resolve.
+    if (existing === null)
+        return true;
+    // Identical content — skip to avoid file-watcher loops.
+    if (existing === next)
+        return false;
+    // Editor has synced theme settings — it's authoritative, write freely.
+    if (hasThemeSettingsCached)
+        return true;
+    // Not synced yet: write unless we'd drop an existing theme-globals block for a stub.
+    return (!existing.includes(THEME_GLOBALS_MARKER) ||
+        next.includes(THEME_GLOBALS_MARKER));
 }
 export function generateComponentFile(componentName, props, type) {
     const propsDestructure = props.map((p) => p.name).join(", ");
@@ -380,18 +672,233 @@ export function generateStylesFile(componentName, type) {
     return readTemplate(templateName, { KEBAB_NAME: kebabName });
 }
 /**
- * Update the barrel export file (src/components/index.ts) to include all components
+ * Update the barrel export file (src/components/index.ts) to include all components. Each is exported by its
+ * entry's folder, which is named after the function it exports when created; its name may change later.
  */
-export function updateBarrelExport(projectRoot, componentNames) {
+export function updateBarrelExport(projectRoot, components) {
     const indexPath = path.resolve(projectRoot, "src/components/index.ts");
-    const content = componentNames
-        .map((name) => {
-        const pascal = toPascalCase(name);
-        return `export { ${pascal} } from "./${pascal}/index";`;
+    const content = components
+        .map((c) => {
+        const folder = path.basename(path.dirname(c.entry));
+        return `export { ${folder} } from "./${folder}/index";`;
     })
         .join("\n") + "\n";
     fs.writeFileSync(indexPath, content);
 }
+/**
+ * A config visibility gate in wire form, or nothing at all — spread it.
+ *
+ * Config names the governing prop; the editor needs its id, and ids are minted here from position.
+ * A gate naming a prop this component does not have is dropped rather than passed on: the editor
+ * would show the control anyway, and a dangling id in the theme is worse than none.
+ */
+export function resolveCondition(gate, propIdByName) {
+    if (!gate?.requiredProp)
+        return {};
+    const requiredPropId = propIdByName.get(gate.requiredProp);
+    if (!requiredPropId)
+        return {};
+    // An ENUM gate carries its option and no boolean state; a BOOLEAN one the reverse. Emitting only
+    // the half that applies keeps a stale option from a re-typed governing prop out of the theme.
+    if (gate.requiredEnumOptionValue !== undefined) {
+        return {
+            requiredPropId,
+            requiredEnumOptionId: gate.requiredEnumOptionId,
+            requiredEnumOptionValue: gate.requiredEnumOptionValue,
+        };
+    }
+    return { requiredPropId, requiredPropValue: gate.requiredPropValue ?? true };
+}
+/**
+ * Config prop name to the id this component's props are broadcast under.
+ *
+ * The formula is duplicated at each mapping site (dev broadcast, config rebuild, publish); this
+ * reads it back off whatever that site produced rather than restating it a fourth time.
+ */
+export function propIdsByName(props) {
+    return new Map(props.map((prop) => [prop.name, prop.id]));
+}
+/**
+ * Sets a field, or removes it when emptied (a blank text, a map without entries, so the key leaves
+ * the config); a required field keeps its old value instead.
+ */
+function setField(target, field, value, required = false) {
+    const fields = target;
+    const empty = !value || (typeof value === "object" && Object.keys(value).length === 0);
+    if (!empty)
+        fields[field] = value;
+    else if (!required)
+        delete fields[field];
+}
+/**
+ * Writes the technical texts the editor saved back onto a config component: the base fields and the
+ * editor-language `translations`. A store language's `propValues` on the component stay as they are,
+ * unless the editor sent its store content too (a component's, not a section's).
+ */
+export function applyTechnicalTexts(component, texts) {
+    setField(component, "name", texts.name, true);
+    const locales = new Set([
+        ...Object.keys(component.translations || {}),
+        ...Object.keys(texts.translations),
+        ...Object.keys(texts.propValues || {}),
+    ]);
+    const translations = {};
+    locales.forEach((locale) => {
+        const { name: _name, propValues: configValues, ...rest } = component.translations?.[locale] || {};
+        const name = texts.translations[locale]?.name;
+        const propValues = texts.propValues
+            ? texts.propValues[locale]
+            : configValues;
+        const record = {
+            ...(name ? { name } : {}),
+            ...rest,
+            ...(propValues && Object.keys(propValues).length ? { propValues } : {}),
+        };
+        if (Object.keys(record).length > 0)
+            translations[locale] = record;
+    });
+    setField(component, "translations", translations);
+    const defaults = texts.defaults;
+    if (defaults)
+        component.props.forEach((prop) => {
+            if (!(prop.name in defaults))
+                return;
+            const value = defaults[prop.name];
+            if (value === null || value === undefined)
+                delete prop.defaultValue;
+            else
+                prop.defaultValue = value;
+        });
+    component.props.forEach((prop) => {
+        const text = texts.props[prop.name];
+        if (!text)
+            return;
+        setField(prop, "displayName", text.displayName, true);
+        setField(prop, "description", text.description);
+        setField(prop, "translations", text.translations);
+    });
+    // The editor knows a group by its global id; prop wrappers carry no texts of their own
+    (component.propGroups || [])
+        .flatMap((group) => [group, ...(group.children || [])])
+        .forEach((group) => {
+        const text = texts.propGroups[propGroupGlobalId(component.id, group.id)];
+        if (!text)
+            return;
+        setField(group, "name", text.name, true);
+        setField(group, "description", text.description);
+        setField(group, "translations", text.translations);
+    });
+}
+/**
+ * A config translation map (`{ en: { displayName: "Heading" } }`) as the editor's record list
+ * (`[{ locale: "en", displayName: "Heading" }]`); nothing for an empty or missing map, so the
+ * wire payload carries the key only when there is something to carry. Spread the result.
+ */
+export function translationRecords(translations) {
+    const records = Object.entries(translations || {})
+        .filter(([, fields]) => fields && Object.keys(fields).length > 0)
+        .map(([locale, fields]) => ({ locale, ...fields }));
+    return records.length > 0 ? { translations: records } : {};
+}
+const isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+const _omit = (record, keys) => Object.fromEntries(Object.entries(record).filter(([key]) => !keys.includes(key)));
+/**
+ * What is wrong with a language's value of a prop as the config holds it (a text bare or `{ value }`); only the
+ * translations page's types (TEXT, RICH_TEXT, IMAGE, IMAGE_LIST, VIDEO) have one.
+ */
+function translatedValueError(type, value) {
+    const isImage = (image) => isObject(image) &&
+        (typeof image.id === "string" || typeof image.altText === "string");
+    switch (type) {
+        case "TEXT":
+        case "RICH_TEXT": {
+            const text = isObject(value) ? value.value : value;
+            return typeof text === "string" ? null : "must be a text";
+        }
+        case "IMAGE":
+            return isImage(value) ? null : 'must be { "id", "altText"? }';
+        case "IMAGE_LIST":
+            return isObject(value) &&
+                Array.isArray(value.images) &&
+                value.images.every(isImage)
+                ? null
+                : 'must be { "images": [{ "id", "altText"? }] }';
+        case "VIDEO":
+            return isObject(value) && isObject(value.video)
+                ? null
+                : 'must be { "video": { "id" }, "thumbnailImage"? }';
+        default:
+            return `is a ${type} prop, which has no translations`;
+    }
+}
+/** Checks a `translations` map (or an older config's record list): its languages, `fields` and their values. */
+function checkTranslations(problems, where, translations, fields, check = (field, value, at) => {
+    if (typeof value !== "string")
+        problems.errors.push(`${at}: "${field}" must be a text`);
+}) {
+    if (translations === undefined)
+        return;
+    // An older config keeps the editor's records (`[{ id?, locale, ... }]`), which `translationRecords` takes too
+    const entries = Array.isArray(translations)
+        ? translations.map((record, index) => isObject(record)
+            ? [String(record.locale), _omit(record, ["id", "locale"])]
+            : [String(index), record])
+        : isObject(translations)
+            ? Object.entries(translations)
+            : null;
+    if (!entries) {
+        problems.errors.push(`${where}: translations must be an object of languages`);
+        return;
+    }
+    entries.forEach(([locale, record]) => {
+        const at = `${where} translations.${locale}`;
+        if (!isLanguageCode(locale))
+            return problems.warnings.push(`${at}: "${locale}" is not a language code (en, de, pt-BR); left aside`);
+        if (!isObject(record))
+            return problems.errors.push(`${at}: must be an object`);
+        Object.entries(record).forEach(([field, value]) => {
+            if (!fields.includes(field))
+                return problems.warnings.push(`${at}: unknown field "${field}" (${fields.join(", ")}); left aside`);
+            check(field, value, `${at}.${field}`);
+        });
+    });
+}
+/**
+ * What the translations a config holds have wrong: a component's (its name and a language's prop values), its
+ * props' and its prop groups' (their labels). A prop value is checked against its prop's type.
+ */
+export function checkConfigTranslations(components) {
+    const problems = { errors: [], warnings: [] };
+    const groups = (list = []) => list.flatMap((group) => [group, ...groups(group.children)]);
+    components.forEach((component) => {
+        const at = `${component.name}`;
+        checkTranslations(problems, at, component.translations, ["name", "propValues"], (field, value, where) => {
+            if (field === "name") {
+                if (typeof value !== "string")
+                    problems.errors.push(`${where}: must be a text`);
+                return;
+            }
+            if (!isObject(value))
+                return problems.errors.push(`${where}: must be an object of prop values`);
+            Object.entries(value).forEach(([name, propValue]) => {
+                const prop = component.props.find((p) => p.name === name);
+                if (!prop)
+                    return problems.warnings.push(`${where}: "${name}" is no prop of the component; left aside`);
+                const error = translatedValueError(prop.type, propValue);
+                if (error)
+                    problems.errors.push(`${where}: "${name}" ${error}`);
+            });
+        });
+        component.props.forEach((prop) => checkTranslations(problems, `${at}.${prop.name}`, prop.translations, [
+            "displayName",
+            "description",
+        ]));
+        groups(component.propGroups).forEach((group) => checkTranslations(problems, `${at} group ${group.id}`, group.translations, ["name", "description"]));
+    });
+    return problems;
+}
+/** The editor's id of a config prop group: the component's id prefixed, so it is unique across components. */
+export const propGroupGlobalId = (componentId, groupId) => `${componentId}_pg_${groupId}`;
 /**
  * Convert flat config-format prop groups into an IThemePropGroup[] hierarchy.
  *
@@ -405,11 +912,14 @@ export function updateBarrelExport(projectRoot, componentNames) {
  */
 export function buildPropGroupHierarchy(componentId, propGroups, props) {
     const result = [];
+    // A group names its governing prop; the leaf wrappers below carry no gate of their own, because a
+    // prop's gate travels on the prop itself (see `resolveCondition` at each prop mapping site).
+    const propIdByName = propIdsByName(props);
     for (const group of propGroups) {
-        const groupGlobalId = `${componentId}_pg_${group.id}`;
+        const groupGlobalId = propGroupGlobalId(componentId, group.id);
         // Collect props assigned to this group
-        const groupProps = props.filter(p => p.groupId === group.id);
-        const propChildren = groupProps.map(p => ({
+        const groupProps = props.filter((p) => p.groupId === group.id);
+        const propChildren = groupProps.map((p) => ({
             id: `${componentId}_pgp_${p.id}`,
             propId: p.id,
         }));
@@ -417,10 +927,10 @@ export function buildPropGroupHierarchy(componentId, propGroups, props) {
         let nestedChildren = [];
         if (group.children) {
             for (const child of group.children) {
-                const childGlobalId = `${componentId}_pg_${child.id}`;
+                const childGlobalId = propGroupGlobalId(componentId, child.id);
                 // Collect props assigned to this child group
-                const childProps = props.filter(p => p.groupId === child.id);
-                const childPropChildren = childProps.map(p => ({
+                const childProps = props.filter((p) => p.groupId === child.id);
+                const childPropChildren = childProps.map((p) => ({
                     id: `${componentId}_pgp_${p.id}`,
                     propId: p.id,
                 }));
@@ -428,7 +938,11 @@ export function buildPropGroupHierarchy(componentId, propGroups, props) {
                     id: childGlobalId,
                     name: child.name,
                     ...(child.description ? { description: child.description } : {}),
-                    ...(childPropChildren.length > 0 ? { children: childPropChildren } : {}),
+                    ...translationRecords(child.translations),
+                    ...resolveCondition(child, propIdByName),
+                    ...(childPropChildren.length > 0
+                        ? { children: childPropChildren }
+                        : {}),
                 });
             }
         }
@@ -437,19 +951,118 @@ export function buildPropGroupHierarchy(componentId, propGroups, props) {
             id: groupGlobalId,
             name: group.name,
             ...(group.description ? { description: group.description } : {}),
+            ...translationRecords(group.translations),
+            ...resolveCondition(group, propIdByName),
             ...(allChildren.length > 0 ? { children: allChildren } : {}),
         });
     }
     return result;
 }
+/** Every group id under `group`, itself included — the groups a prop assigned "inside" it can sit in. */
+export function groupIdsUnder(group) {
+    return new Set([
+        group.id,
+        ...(group.children || []).map((child) => child.id),
+    ]);
+}
+/**
+ * Validate a visibility condition — the `requiredProp` family on a prop or a prop group — against
+ * the component it lives on. Returns an error message, or null when it is sound (or absent).
+ *
+ * What is rejected, and why each one would otherwise strand a control with no way to reach it:
+ *
+ * - a name no prop on this component has, or a prop that is not BOOLEAN — nothing to read a
+ *   true/false off, so the gate could never resolve;
+ * - a prop gating itself, or a chain of props that comes back around to it — every prop in the
+ *   cycle stays hidden forever, including the toggles that would let someone out of it;
+ * - an ENUM gate with no option to wait for, or an option value hung on a BOOLEAN prop;
+ * - a group gated by a toggle that lives inside it — turning that toggle off takes the toggle away
+ *   with the rest of the group.
+ */
+export function visibilityGateError(component, gate, where, opts = {}) {
+    const { requiredProp, requiredPropValue, requiredEnumOptionValue } = gate;
+    if (requiredProp === undefined || requiredProp === null) {
+        return requiredPropValue === undefined &&
+            requiredEnumOptionValue === undefined
+            ? null
+            : `${where} declares a visibility state with no requiredProp to read it off. Name the prop that gates it, or drop both.`;
+    }
+    if (typeof requiredProp !== "string" || !requiredProp) {
+        return `requiredProp on ${where} must be the name of a BOOLEAN or ENUM prop on this component.`;
+    }
+    if (requiredPropValue !== undefined &&
+        typeof requiredPropValue !== "boolean") {
+        return `requiredPropValue on ${where} must be true or false (it defaults to true).`;
+    }
+    if (opts.selfPropName && requiredProp === opts.selfPropName) {
+        return `${where} cannot gate itself on "${requiredProp}".`;
+    }
+    const governing = component.props.find((prop) => prop.name === requiredProp);
+    if (!governing) {
+        const names = component.props.map((prop) => prop.name).join(", ");
+        return `requiredProp "${requiredProp}" on ${where} is not a prop of component "${component.name}". Available props: ${names || "(none)"}.`;
+    }
+    if (governing.type !== "BOOLEAN" && governing.type !== "ENUM") {
+        return `requiredProp "${requiredProp}" on ${where} is a ${governing.type} prop; only a BOOLEAN or ENUM prop can gate visibility.`;
+    }
+    // An ENUM gate is meaningless without the option it waits for: nothing would ever match it, so
+    // the node would never appear at all.
+    if (governing.type === "ENUM" &&
+        typeof requiredEnumOptionValue !== "string") {
+        return `requiredProp "${requiredProp}" on ${where} is an ENUM prop, so requiredEnumOptionValue must name the option value that shows it.`;
+    }
+    if (governing.type === "BOOLEAN" && requiredEnumOptionValue !== undefined) {
+        return `requiredEnumOptionValue on ${where} has no meaning against the BOOLEAN prop "${requiredProp}" — use requiredPropValue instead.`;
+    }
+    if (opts.group &&
+        governing.groupId &&
+        groupIdsUnder(opts.group).has(governing.groupId)) {
+        return `requiredProp "${requiredProp}" on ${where} sits inside that group — hiding the group would take that control with it, leaving nothing to bring it back.`;
+    }
+    // Walk the chain the governing prop hangs on. It cannot come back to this prop, and it cannot
+    // close on itself either — a cycle anywhere in it hides everything on it.
+    const byName = new Map(component.props.map((prop) => [prop.name, prop]));
+    const seen = new Set([requiredProp]);
+    let current = governing.requiredProp;
+    while (current) {
+        if (opts.selfPropName && current === opts.selfPropName) {
+            return `requiredProp "${requiredProp}" on ${where} depends on it in turn — the two would hide each other permanently.`;
+        }
+        if (seen.has(current)) {
+            return `requiredProp "${requiredProp}" on ${where} sits in a visibility cycle through "${current}" — everything on it would stay hidden.`;
+        }
+        seen.add(current);
+        current = byName.get(current)?.requiredProp;
+    }
+    return null;
+}
 /**
  * Validate prop groups configuration for a component.
  * Returns an array of error messages (empty = valid).
  */
 export function validatePropGroups(component) {
     const errors = [];
-    const propGroups = component.propGroups;
-    if (!propGroups || propGroups.length === 0)
+    const propGroups = component.propGroups || [];
+    // A prop can name a visibility gate whether or not this component has groups at all, so gates are
+    // checked before the group walk bails out below.
+    for (const prop of component.props) {
+        const error = visibilityGateError(component, prop, `prop "${prop.name}"`, {
+            selfPropName: prop.name,
+        });
+        if (error)
+            errors.push(error);
+    }
+    for (const group of [
+        ...propGroups,
+        ...propGroups.flatMap((group) => group.children || []),
+    ]) {
+        const error = visibilityGateError(component, group, `group "${group.id}"`, {
+            group,
+        });
+        if (error)
+            errors.push(error);
+    }
+    if (propGroups.length === 0)
         return errors;
     // Collect all group IDs and check uniqueness
     const allIds = new Set();
@@ -528,7 +1141,9 @@ export function movePropGroupInTree(propGroups, propGroupId, parentGroupId, inde
     const found = findPropGroup(propGroups, propGroupId);
     if (!found)
         throw new Error(`Prop group "${propGroupId}" not found`);
-    if (parentGroupId && found.group.children && found.group.children.length > 0) {
+    if (parentGroupId &&
+        found.group.children &&
+        found.group.children.length > 0) {
         throw new Error(`Cannot nest "${propGroupId}": it already has child groups`);
     }
     if (parentGroupId) {
@@ -542,10 +1157,10 @@ export function movePropGroupInTree(propGroups, propGroupId, parentGroupId, inde
     }
     let roots = propGroups;
     if (found.parent) {
-        found.parent.children = (found.parent.children || []).filter(c => c.id !== propGroupId);
+        found.parent.children = (found.parent.children || []).filter((c) => c.id !== propGroupId);
     }
     else {
-        roots = roots.filter(g => g.id !== propGroupId);
+        roots = roots.filter((g) => g.id !== propGroupId);
     }
     if (parentGroupId) {
         const target = findPropGroup(roots, parentGroupId);
@@ -553,13 +1168,17 @@ export function movePropGroupInTree(propGroups, propGroupId, parentGroupId, inde
             throw new Error(`Target parent group "${parentGroupId}" not found after removal`);
         if (!target.group.children)
             target.group.children = [];
-        const insertAt = typeof index === "number" && index >= 0 && index <= target.group.children.length
+        const insertAt = typeof index === "number" &&
+            index >= 0 &&
+            index <= target.group.children.length
             ? index
             : target.group.children.length;
         target.group.children.splice(insertAt, 0, found.group);
     }
     else {
-        const insertAt = typeof index === "number" && index >= 0 && index <= roots.length ? index : roots.length;
+        const insertAt = typeof index === "number" && index >= 0 && index <= roots.length
+            ? index
+            : roots.length;
         roots.splice(insertAt, 0, found.group);
     }
     return roots;