@routevn/creator-model 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@routevn/creator-model",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/model.js

@@ -38,6 +38,7 @@ const createEmptyCollectionState = () => ({
   items: {},
   tree: [],
 });
+
 const normalizeStateCollections = (state) => {
   if (!isPlainObject(state)) {
     return state;
@@ -108,7 +109,15 @@ const ANIMATION_EASING_KEYS = [
 ];
 const VARIABLE_SCOPE_KEYS = ["context", "global-device", "global-account"];
 const VARIABLE_TYPE_KEYS = ["string", "number", "boolean"];
-const LAYOUT_TYPE_KEYS = ["normal", "dialogue", "nvl", "choice"];
+const LAYOUT_TYPE_KEYS = [
+  "normal",
+  "save-load",
+  "confirmDialog",
+  "dialogue",
+  "nvl",
+  "choice",
+  "history",
+];
 const LAYOUT_ELEMENT_TEXT_STYLE_ALIGN_KEYS = ["left", "center", "right"];
 const LAYOUT_TEXT_REVEAL_EFFECT_KEYS = ["typewriter", "softWipe", "none"];
 const LAYOUT_ELEMENT_BASE_TYPES = [
@@ -122,17 +131,30 @@ const LAYOUT_ELEMENT_BASE_TYPES = [
   "text-ref-character-name",
   "text-revealing-ref-dialogue-content",
   "text-ref-choice-item-content",
+  "text-ref-save-load-slot-date",
   "text-ref-dialogue-line-character-name",
   "text-ref-dialogue-line-content",
+  "text-ref-history-line-character-name",
+  "text-ref-history-line-content",
+  "sprite-ref-save-load-slot-image",
+  "fragment-ref",
   "container-ref-choice-item",
+  "container-ref-save-load-slot",
   "container-ref-dialogue-line",
+  "container-ref-history-line",
+  "container-ref-confirm-dialog-ok",
+  "container-ref-confirm-dialog-cancel",
 ];
 export const SCHEMA_VERSION = 2;
 const LAYOUT_CONTAINER_ELEMENT_TYPES = [
   "folder",
   "container",
   "container-ref-choice-item",
+  "container-ref-save-load-slot",
   "container-ref-dialogue-line",
+  "container-ref-history-line",
+  "container-ref-confirm-dialog-ok",
+  "container-ref-confirm-dialog-cancel",
 ];
 const DOMAIN_ERROR_KIND_BY_NAME = {
   PayloadValidationError: "payload",
@@ -230,6 +252,81 @@ const isVariableReferenceTarget = (state, variableId) => {
   return isPlainObject(variable) && variable.type !== "folder";
 };
 
+const LAYOUT_CONDITION_TARGET_SET = new Set([
+  "item.savedAt",
+  "isLineCompleted",
+  "autoMode",
+  "skipMode",
+]);
+const VARIABLE_TARGET_DOT_PATTERN = /^variables\.([A-Za-z_$][A-Za-z0-9_$]*)$/;
+const VARIABLE_TARGET_BRACKET_PATTERN = /^variables\[(.+)\]$/;
+
+const parseLayoutConditionTarget = (target) => {
+  if (!isNonEmptyString(target)) {
+    return undefined;
+  }
+
+  if (LAYOUT_CONDITION_TARGET_SET.has(target)) {
+    return {
+      kind: "runtime",
+      target,
+    };
+  }
+
+  const dotMatch = target.match(VARIABLE_TARGET_DOT_PATTERN);
+  if (dotMatch) {
+    return {
+      kind: "variable",
+      target,
+      variableId: dotMatch[1],
+    };
+  }
+
+  const bracketMatch = target.match(VARIABLE_TARGET_BRACKET_PATTERN);
+  if (!bracketMatch) {
+    return undefined;
+  }
+
+  const rawValue = bracketMatch[1].trim();
+
+  try {
+    const variableId = JSON.parse(rawValue);
+    if (isNonEmptyString(variableId)) {
+      return {
+        kind: "variable",
+        target,
+        variableId,
+      };
+    }
+  } catch {}
+
+  if (rawValue.startsWith("'") && rawValue.endsWith("'")) {
+    const variableId = rawValue.slice(1, -1);
+    if (isNonEmptyString(variableId)) {
+      return {
+        kind: "variable",
+        target,
+        variableId,
+      };
+    }
+  }
+
+  return undefined;
+};
+
+const isLayoutConditionTarget = (state, target) => {
+  const parsedTarget = parseLayoutConditionTarget(target);
+  if (!parsedTarget) {
+    return false;
+  }
+
+  if (parsedTarget.kind === "runtime") {
+    return true;
+  }
+
+  return isVariableReferenceTarget(state, parsedTarget.variableId);
+};
+
 const toDomainErrorDetails = (publicError) => {
   const details = isPlainObject(publicError?.details)
     ? { ...publicError.details }
@@ -2181,6 +2278,29 @@ const validateLayoutElementBorder = ({ border, path, errorFactory }) => {
   }
 };
 
+const validateLayoutElementInteraction = ({
+  interaction,
+  path,
+  errorFactory,
+}) => {
+  if (!isPlainObject(interaction)) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path} must be an object when provided`,
+    );
+  }
+
+  if (
+    interaction.inheritToChildren !== undefined &&
+    typeof interaction.inheritToChildren !== "boolean"
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path}.inheritToChildren must be a boolean when provided`,
+    );
+  }
+};
+
 const validateLayoutElementData = ({
   data,
   path,
@@ -2216,10 +2336,14 @@ const validateLayoutElementData = ({
     "textStyleId",
     "hoverTextStyleId",
     "clickTextStyleId",
+    "conditionalOverrides",
     "direction",
     "gap",
     "containerType",
     "scroll",
+    "hover",
+    "click",
+    "rightClick",
     "anchorToBottom",
     "thumbImageId",
     "barImageId",
@@ -2230,9 +2354,11 @@ const validateLayoutElementData = ({
     "step",
     "initialValue",
     "variableId",
+    "fragmentLayoutId",
+    "paginationMode",
+    "paginationVariableId",
+    "paginationSize",
     "$when",
-    "click",
-    "rightClick",
     "change",
   ];
 
@@ -2281,6 +2407,7 @@ const validateLayoutElementData = ({
     "min",
     "max",
     "step",
+    "paginationSize",
     "opacity",
   ]) {
     if (data[key] !== undefined && !isFiniteNumber(data[key])) {
@@ -2322,6 +2449,9 @@ const validateLayoutElementData = ({
     "clickTextStyleId",
     "containerType",
     "variableId",
+    "fragmentLayoutId",
+    "paginationMode",
+    "paginationVariableId",
     "revealEffect",
     "thumbImageId",
     "barImageId",
@@ -2337,6 +2467,191 @@ const validateLayoutElementData = ({
     }
   }
 
+  if (data.conditionalOverrides !== undefined) {
+    if (!Array.isArray(data.conditionalOverrides)) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${path}.conditionalOverrides must be an array when provided`,
+      );
+    }
+
+    for (let index = 0; index < data.conditionalOverrides.length; index += 1) {
+      const rule = data.conditionalOverrides[index];
+      const rulePath = `${path}.conditionalOverrides.${index}`;
+
+      if (!isPlainObject(rule)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath} must be an object`,
+        );
+      }
+
+      {
+        const result = validateAllowedKeys({
+          value: rule,
+          allowedKeys: ["when", "set"],
+          path: rulePath,
+          errorFactory,
+        });
+        if (result?.valid === false) {
+          return result;
+        }
+      }
+
+      if (!isPlainObject(rule.when)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.when must be an object`,
+        );
+      }
+
+      {
+        const result = validateAllowedKeys({
+          value: rule.when,
+          allowedKeys: ["target", "op", "value"],
+          path: `${rulePath}.when`,
+          errorFactory,
+        });
+        if (result?.valid === false) {
+          return result;
+        }
+      }
+
+      if (!isNonEmptyString(rule.when.target)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.when.target must be a non-empty string`,
+        );
+      }
+
+      if (!parseLayoutConditionTarget(rule.when.target)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.when.target must be a supported layout condition target`,
+        );
+      }
+
+      if (
+        !isString(rule.when.value) &&
+        typeof rule.when.value !== "boolean" &&
+        !isFiniteNumber(rule.when.value)
+      ) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.when.value must be a string, boolean, or finite number`,
+        );
+      }
+
+      if (rule.when.op !== "eq") {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.when.op must be "eq"`,
+        );
+      }
+
+      if (!isPlainObject(rule.set)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.set must be an object`,
+        );
+      }
+
+      {
+        const result = validateAllowedKeys({
+          value: rule.set,
+          allowedKeys: [
+            "textStyleId",
+            "hoverTextStyleId",
+            "clickTextStyleId",
+            "imageId",
+            "hoverImageId",
+            "clickImageId",
+            "opacity",
+            "anchorX",
+            "anchorY",
+            "visible",
+            "textStyle",
+          ],
+          path: `${rulePath}.set`,
+          errorFactory,
+        });
+        if (result?.valid === false) {
+          return result;
+        }
+      }
+
+      for (const field of [
+        "textStyleId",
+        "hoverTextStyleId",
+        "clickTextStyleId",
+        "imageId",
+        "hoverImageId",
+        "clickImageId",
+      ]) {
+        if (
+          rule.set[field] !== undefined &&
+          !isNonEmptyString(rule.set[field])
+        ) {
+          return invalidFromErrorFactory(
+            errorFactory,
+            `${rulePath}.set.${field} must be a non-empty string when provided`,
+          );
+        }
+      }
+
+      if (
+        rule.set.opacity !== undefined &&
+        (!isFiniteNumber(rule.set.opacity) ||
+          rule.set.opacity < 0 ||
+          rule.set.opacity > 1)
+      ) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.set.opacity must be a finite number between 0 and 1 when provided`,
+        );
+      }
+
+      for (const field of ["anchorX", "anchorY"]) {
+        if (rule.set[field] !== undefined && !isFiniteNumber(rule.set[field])) {
+          return invalidFromErrorFactory(
+            errorFactory,
+            `${rulePath}.set.${field} must be a finite number when provided`,
+          );
+        }
+      }
+
+      if (
+        rule.set.visible !== undefined &&
+        typeof rule.set.visible !== "boolean"
+      ) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${rulePath}.set.visible must be a boolean when provided`,
+        );
+      }
+
+      if (rule.set.textStyle !== undefined) {
+        if (!isPlainObject(rule.set.textStyle)) {
+          return invalidFromErrorFactory(
+            errorFactory,
+            `${rulePath}.set.textStyle must be an object when provided`,
+          );
+        }
+
+        {
+          const result = validateLayoutElementTextStyle({
+            textStyle: rule.set.textStyle,
+            path: `${rulePath}.set.textStyle`,
+            errorFactory,
+          });
+          if (result?.valid === false) {
+            return result;
+          }
+        }
+      }
+    }
+  }
+
   if (data.fill !== undefined && !isString(data.fill)) {
     return invalidFromErrorFactory(
       errorFactory,
@@ -2365,6 +2680,17 @@ const validateLayoutElementData = ({
     );
   }
 
+  if (
+    data.paginationMode !== undefined &&
+    data.paginationMode !== "continuous" &&
+    data.paginationMode !== "paginated"
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      `${path}.paginationMode must be 'continuous' or 'paginated' when provided`,
+    );
+  }
+
   if (data.scroll !== undefined && typeof data.scroll !== "boolean") {
     return invalidFromErrorFactory(
       errorFactory,
@@ -2372,6 +2698,45 @@ const validateLayoutElementData = ({
     );
   }
 
+  if (data.hover !== undefined) {
+    {
+      const result = validateLayoutElementInteraction({
+        interaction: data.hover,
+        path: `${path}.hover`,
+        errorFactory,
+      });
+      if (result?.valid === false) {
+        return result;
+      }
+    }
+  }
+
+  if (data.click !== undefined) {
+    {
+      const result = validateLayoutElementInteraction({
+        interaction: data.click,
+        path: `${path}.click`,
+        errorFactory,
+      });
+      if (result?.valid === false) {
+        return result;
+      }
+    }
+  }
+
+  if (data.rightClick !== undefined) {
+    {
+      const result = validateLayoutElementInteraction({
+        interaction: data.rightClick,
+        path: `${path}.rightClick`,
+        errorFactory,
+      });
+      if (result?.valid === false) {
+        return result;
+      }
+    }
+  }
+
   if (
     data.anchorToBottom !== undefined &&
     typeof data.anchorToBottom !== "boolean"
@@ -2415,20 +2780,6 @@ const validateLayoutElementData = ({
     }
   }
 
-  if (data.click !== undefined && !isPlainObject(data.click)) {
-    return invalidFromErrorFactory(
-      errorFactory,
-      `${path}.click must be an object when provided`,
-    );
-  }
-
-  if (data.rightClick !== undefined && !isPlainObject(data.rightClick)) {
-    return invalidFromErrorFactory(
-      errorFactory,
-      `${path}.rightClick must be an object when provided`,
-    );
-  }
-
   if (data.change !== undefined && !isPlainObject(data.change)) {
     return invalidFromErrorFactory(
       errorFactory,
@@ -2470,10 +2821,14 @@ const validateLayoutElementItems = ({ items, path, errorFactory }) => {
           "textStyleId",
           "hoverTextStyleId",
           "clickTextStyleId",
+          "conditionalOverrides",
           "direction",
           "gap",
           "containerType",
           "scroll",
+          "hover",
+          "click",
+          "rightClick",
           "anchorToBottom",
           "thumbImageId",
           "barImageId",
@@ -2484,9 +2839,11 @@ const validateLayoutElementItems = ({ items, path, errorFactory }) => {
           "step",
           "initialValue",
           "variableId",
+          "fragmentLayoutId",
+          "paginationMode",
+          "paginationVariableId",
+          "paginationSize",
           "$when",
-          "click",
-          "rightClick",
           "change",
         ],
         path: itemPath,
@@ -2684,7 +3041,16 @@ const validateLayoutItems = ({ items, path, errorFactory }) => {
         allowedKeys:
           item.type === "folder"
             ? ["id", "type", "name"]
-            : ["id", "type", "name", "layoutType", "elements"],
+            : [
+                "id",
+                "type",
+                "name",
+                "description",
+                "layoutType",
+                "isFragment",
+                "thumbnailFileId",
+                "elements",
+              ],
         path: itemPath,
         errorFactory,
       });
@@ -2714,11 +3080,38 @@ const validateLayoutItems = ({ items, path, errorFactory }) => {
       );
     }
 
+    if (item.description !== undefined && !isString(item.description)) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${itemPath}.description must be a string when provided`,
+      );
+    }
+
+    if (
+      item.thumbnailFileId !== undefined &&
+      !isNonEmptyString(item.thumbnailFileId)
+    ) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${itemPath}.thumbnailFileId must be a non-empty string when provided`,
+      );
+    }
+
     if (item.type === "layout") {
       if (!LAYOUT_TYPE_KEYS.includes(item.layoutType)) {
         return invalidFromErrorFactory(
           errorFactory,
-          `${itemPath}.layoutType must be 'normal', 'dialogue', 'nvl', or 'choice'`,
+          `${itemPath}.layoutType must be 'normal', 'save-load', 'confirmDialog', 'dialogue', 'nvl', 'choice', or 'history'`,
+        );
+      }
+
+      if (
+        item.isFragment !== undefined &&
+        typeof item.isFragment !== "boolean"
+      ) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${itemPath}.isFragment must be a boolean when provided`,
         );
       }
 
@@ -2755,7 +3148,7 @@ const validateControlItems = ({ items, path, errorFactory }) => {
         allowedKeys:
           item.type === "folder"
             ? ["id", "type", "name"]
-            : ["id", "type", "name", "elements", "keyboard"],
+            : ["id", "type", "name", "thumbnailFileId", "elements", "keyboard"],
         path: itemPath,
         errorFactory,
       });
@@ -2785,6 +3178,16 @@ const validateControlItems = ({ items, path, errorFactory }) => {
       );
     }
 
+    if (
+      item.thumbnailFileId !== undefined &&
+      !isNonEmptyString(item.thumbnailFileId)
+    ) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${itemPath}.thumbnailFileId must be a non-empty string when provided`,
+      );
+    }
+
     if (item.type === "control") {
       {
         const result = validateNestedCollection({
@@ -3854,6 +4257,40 @@ export const assertInvariants = ({ state }) => {
     }
   }
 
+  for (const [layoutId, layout] of Object.entries(state.layouts.items)) {
+    if (layout.type !== "layout" || layout.thumbnailFileId === undefined) {
+      continue;
+    }
+
+    const result = validateFileReference({
+      state,
+      fileId: layout.thumbnailFileId,
+      path: "layout.thumbnailFileId",
+      details: { layoutId, thumbnailFileId: layout.thumbnailFileId },
+      errorFactory: createInvariantValidationError,
+    });
+    if (!result.valid) {
+      return result;
+    }
+  }
+
+  for (const [controlId, control] of Object.entries(state.controls.items)) {
+    if (control.type !== "control" || control.thumbnailFileId === undefined) {
+      continue;
+    }
+
+    const result = validateFileReference({
+      state,
+      fileId: control.thumbnailFileId,
+      path: "control.thumbnailFileId",
+      details: { controlId, thumbnailFileId: control.thumbnailFileId },
+      errorFactory: createInvariantValidationError,
+    });
+    if (!result.valid) {
+      return result;
+    }
+  }
+
   const assertImageReference = ({
     ownerIdField,
     ownerId,
@@ -3923,6 +4360,32 @@ export const assertInvariants = ({ state }) => {
     return VALID_RESULT;
   };
 
+  const assertFragmentLayoutReference = ({
+    ownerIdField,
+    ownerId,
+    ownerLabel,
+    elementId,
+    targetId,
+  }) => {
+    const layout = state.layouts.items[targetId];
+    if (
+      !isPlainObject(layout) ||
+      layout.type !== "layout" ||
+      layout.isFragment !== true
+    ) {
+      return invalidInvariant(
+        `${ownerLabel} element fragmentLayoutId must reference an existing fragment layout`,
+        {
+          [ownerIdField]: ownerId,
+          elementId,
+          fragmentLayoutId: targetId,
+        },
+      );
+    }
+
+    return VALID_RESULT;
+  };
+
   const assertElementReferencesForCollection = ({
     items,
     ownerIdField,
@@ -3979,6 +4442,51 @@ export const assertInvariants = ({ state }) => {
           }
         }
 
+        if (Array.isArray(element.conditionalOverrides)) {
+          for (
+            let index = 0;
+            index < element.conditionalOverrides.length;
+            index += 1
+          ) {
+            const rule = element.conditionalOverrides[index];
+
+            for (const field of [
+              "textStyleId",
+              "hoverTextStyleId",
+              "clickTextStyleId",
+            ]) {
+              if (rule?.set?.[field] !== undefined) {
+                const result = assertTextStyleReference({
+                  ownerIdField,
+                  ownerId,
+                  ownerLabel,
+                  elementId,
+                  field: `conditionalOverrides.${index}.set.${field}`,
+                  targetId: rule.set[field],
+                });
+                if (!result.valid) {
+                  return result;
+                }
+              }
+            }
+
+            if (
+              rule?.when?.target !== undefined &&
+              !isLayoutConditionTarget(state, rule.when.target)
+            ) {
+              return invalidInvariant(
+                `${ownerLabel} element conditionalOverrides when target must reference an existing variable or supported runtime condition`,
+                {
+                  [ownerIdField]: ownerId,
+                  elementId,
+                  field: `conditionalOverrides.${index}.when.target`,
+                  targetId: rule.when.target,
+                },
+              );
+            }
+          }
+        }
+
         if (element.variableId !== undefined) {
           const result = assertVariableReference({
             ownerIdField,
@@ -3991,6 +4499,19 @@ export const assertInvariants = ({ state }) => {
             return result;
           }
         }
+
+        if (element.fragmentLayoutId !== undefined) {
+          const result = assertFragmentLayoutReference({
+            ownerIdField,
+            ownerId,
+            ownerLabel,
+            elementId,
+            targetId: element.fragmentLayoutId,
+          });
+          if (!result.valid) {
+            return result;
+          }
+        }
       }
     }
 
@@ -6136,7 +6657,15 @@ const validateLayoutCreateData = ({ data, errorFactory }) => {
       allowedKeys:
         data.type === "folder"
           ? ["type", "name"]
-          : ["type", "name", "layoutType", "elements"],
+          : [
+              "type",
+              "name",
+              "description",
+              "layoutType",
+              "isFragment",
+              "thumbnailFileId",
+              "elements",
+            ],
       path: "payload.data",
       errorFactory,
     });
@@ -6152,11 +6681,35 @@ const validateLayoutCreateData = ({ data, errorFactory }) => {
     );
   }
 
+  if (data.description !== undefined && !isString(data.description)) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.description must be a string when provided",
+    );
+  }
+
+  if (
+    data.thumbnailFileId !== undefined &&
+    !isNonEmptyString(data.thumbnailFileId)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.thumbnailFileId must be a non-empty string when provided",
+    );
+  }
+
   if (data.type === "layout") {
     if (!LAYOUT_TYPE_KEYS.includes(data.layoutType)) {
       return invalidFromErrorFactory(
         errorFactory,
-        "payload.data.layoutType must be 'normal', 'dialogue', 'nvl', or 'choice'",
+        "payload.data.layoutType must be 'normal', 'save-load', 'confirmDialog', 'dialogue', 'nvl', 'choice', or 'history'",
+      );
+    }
+
+    if (data.isFragment !== undefined && typeof data.isFragment !== "boolean") {
+      return invalidFromErrorFactory(
+        errorFactory,
+        "payload.data.isFragment must be a boolean when provided",
       );
     }
 
@@ -6179,7 +6732,13 @@ const validateLayoutUpdateData = ({ data, errorFactory }) => {
   {
     const result = validateAllowedKeys({
       value: data,
-      allowedKeys: ["name", "layoutType"],
+      allowedKeys: [
+        "name",
+        "description",
+        "layoutType",
+        "isFragment",
+        "thumbnailFileId",
+      ],
       path: "payload.data",
       errorFactory,
     });
@@ -6202,13 +6761,37 @@ const validateLayoutUpdateData = ({ data, errorFactory }) => {
     );
   }
 
+  if (data.description !== undefined && !isString(data.description)) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.description must be a string when provided",
+    );
+  }
+
+  if (
+    data.thumbnailFileId !== undefined &&
+    !isNonEmptyString(data.thumbnailFileId)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.thumbnailFileId must be a non-empty string when provided",
+    );
+  }
+
   if (
     data.layoutType !== undefined &&
     !LAYOUT_TYPE_KEYS.includes(data.layoutType)
   ) {
     return invalidFromErrorFactory(
       errorFactory,
-      "payload.data.layoutType must be 'normal', 'dialogue', 'nvl', or 'choice' when provided",
+      "payload.data.layoutType must be 'normal', 'save-load', 'confirmDialog', 'dialogue', 'nvl', 'choice', or 'history' when provided",
+    );
+  }
+
+  if (data.isFragment !== undefined && typeof data.isFragment !== "boolean") {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.isFragment must be a boolean when provided",
     );
   }
 };
@@ -6234,7 +6817,7 @@ const validateControlCreateData = ({ data, errorFactory }) => {
       allowedKeys:
         data.type === "folder"
           ? ["type", "name"]
-          : ["type", "name", "elements", "keyboard"],
+          : ["type", "name", "thumbnailFileId", "elements", "keyboard"],
       path: "payload.data",
       errorFactory,
     });
@@ -6250,6 +6833,16 @@ const validateControlCreateData = ({ data, errorFactory }) => {
     );
   }
 
+  if (
+    data.thumbnailFileId !== undefined &&
+    !isNonEmptyString(data.thumbnailFileId)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.thumbnailFileId must be a non-empty string when provided",
+    );
+  }
+
   if (data.type === "control") {
     {
       const result = validateNestedCollection({
@@ -6281,7 +6874,7 @@ const validateControlUpdateData = ({ data, errorFactory }) => {
   {
     const result = validateAllowedKeys({
       value: data,
-      allowedKeys: ["name", "keyboard"],
+      allowedKeys: ["name", "keyboard", "thumbnailFileId"],
       path: "payload.data",
       errorFactory,
     });
@@ -6304,6 +6897,16 @@ const validateControlUpdateData = ({ data, errorFactory }) => {
     );
   }
 
+  if (
+    data.thumbnailFileId !== undefined &&
+    !isNonEmptyString(data.thumbnailFileId)
+  ) {
+    return invalidFromErrorFactory(
+      errorFactory,
+      "payload.data.thumbnailFileId must be a non-empty string when provided",
+    );
+  }
+
   {
     const result = validateKeyboardMap({
       value: data.keyboard,
@@ -6519,6 +7122,69 @@ const validateVisualElementReferenceTargets = ({
     }
   }
 
+  if (Array.isArray(data.conditionalOverrides)) {
+    for (let index = 0; index < data.conditionalOverrides.length; index += 1) {
+      const rule = data.conditionalOverrides[index];
+
+      for (const field of [
+        "textStyleId",
+        "hoverTextStyleId",
+        "clickTextStyleId",
+      ]) {
+        if (rule?.set?.[field] === undefined) {
+          continue;
+        }
+
+        const textStyle = state.textStyles.items[rule.set[field]];
+        if (!isPlainObject(textStyle) || textStyle.type === "folder") {
+          return invalidFromErrorFactory(
+            errorFactory,
+            `${ownerLabel} element conditionalOverrides.${index}.set.${field} must reference an existing non-folder text style`,
+            {
+              [ownerIdField]: ownerId,
+              elementId,
+              field: `conditionalOverrides.${index}.set.${field}`,
+              targetId: rule.set[field],
+            },
+          );
+        }
+      }
+
+      for (const field of ["imageId", "hoverImageId", "clickImageId"]) {
+        if (rule?.set?.[field] === undefined) {
+          continue;
+        }
+
+        const image = state.images.items[rule.set[field]];
+        if (!isPlainObject(image) || image.type === "folder") {
+          return invalidFromErrorFactory(
+            errorFactory,
+            `${ownerLabel} element conditionalOverrides.${index}.set.${field} must reference an existing non-folder image`,
+            {
+              [ownerIdField]: ownerId,
+              elementId,
+              field: `conditionalOverrides.${index}.set.${field}`,
+              targetId: rule.set[field],
+            },
+          );
+        }
+      }
+
+      if (!isLayoutConditionTarget(state, rule?.when?.target)) {
+        return invalidFromErrorFactory(
+          errorFactory,
+          `${ownerLabel} element conditionalOverrides.${index}.when.target must reference an existing variable or supported runtime condition`,
+          {
+            [ownerIdField]: ownerId,
+            elementId,
+            field: `conditionalOverrides.${index}.when.target`,
+            targetId: rule?.when?.target,
+          },
+        );
+      }
+    }
+  }
+
   if (data.variableId !== undefined) {
     if (!isVariableReferenceTarget(state, data.variableId)) {
       return invalidFromErrorFactory(
@@ -6532,6 +7198,25 @@ const validateVisualElementReferenceTargets = ({
       );
     }
   }
+
+  if (data.fragmentLayoutId !== undefined) {
+    const fragmentLayout = state.layouts.items[data.fragmentLayoutId];
+    if (
+      !isPlainObject(fragmentLayout) ||
+      fragmentLayout.type !== "layout" ||
+      fragmentLayout.isFragment !== true
+    ) {
+      return invalidFromErrorFactory(
+        errorFactory,
+        `${ownerLabel} element fragmentLayoutId must reference an existing fragment layout`,
+        {
+          [ownerIdField]: ownerId,
+          elementId,
+          fragmentLayoutId: data.fragmentLayoutId,
+        },
+      );
+    }
+  }
 };
 
 const getTreeIdsInOrder = ({ nodes }) => {
@@ -11198,12 +11883,33 @@ const COMMAND_DEFINITIONS = [
       name: payload.data.name,
       ...(payload.data.type === "layout"
         ? {
+            description: payload.data.description,
             layoutType: payload.data.layoutType,
+            isFragment: payload.data.isFragment,
+            ...(payload.data.thumbnailFileId !== undefined
+              ? {
+                  thumbnailFileId: payload.data.thumbnailFileId,
+                }
+              : {}),
             elements: structuredClone(payload.data.elements),
           }
         : {}),
     }),
-    validateUpdateState: ({ payload, currentItem }) => {
+    validateCreateState: ({ state, payload }) => {
+      if (payload.data.type !== "layout") {
+        return;
+      }
+
+      return validateReferencedFilesInData({
+        state,
+        data: payload.data,
+        fields: ["thumbnailFileId"],
+        details: {
+          layoutId: payload.layoutId,
+        },
+      });
+    },
+    validateUpdateState: ({ state, payload, currentItem }) => {
       if (
         currentItem.type === "folder" &&
         Object.keys(payload.data).some((key) => key !== "name")
@@ -11212,6 +11918,17 @@ const COMMAND_DEFINITIONS = [
           "folder layout items cannot update layout fields",
         );
       }
+
+      if (currentItem.type === "layout") {
+        return validateReferencedFilesInData({
+          state,
+          data: payload.data,
+          fields: ["thumbnailFileId"],
+          details: {
+            layoutId: payload.layoutId,
+          },
+        });
+      }
     },
   }),
   ...createFolderedCollectionCommandDefinitions({
@@ -11227,6 +11944,11 @@ const COMMAND_DEFINITIONS = [
       name: payload.data.name,
       ...(payload.data.type === "control"
         ? {
+            ...(payload.data.thumbnailFileId !== undefined
+              ? {
+                  thumbnailFileId: payload.data.thumbnailFileId,
+                }
+              : {}),
             elements: structuredClone(payload.data.elements),
             ...(payload.data.keyboard !== undefined
               ? {
@@ -11236,7 +11958,21 @@ const COMMAND_DEFINITIONS = [
           }
         : {}),
     }),
-    validateUpdateState: ({ payload, currentItem }) => {
+    validateCreateState: ({ state, payload }) => {
+      if (payload.data.type !== "control") {
+        return;
+      }
+
+      return validateReferencedFilesInData({
+        state,
+        data: payload.data,
+        fields: ["thumbnailFileId"],
+        details: {
+          controlId: payload.controlId,
+        },
+      });
+    },
+    validateUpdateState: ({ state, payload, currentItem }) => {
       if (
         currentItem.type === "folder" &&
         Object.keys(payload.data).some((key) => key !== "name")
@@ -11245,6 +11981,17 @@ const COMMAND_DEFINITIONS = [
           "folder control items cannot update control fields",
         );
       }
+
+      if (currentItem.type === "control") {
+        return validateReferencedFilesInData({
+          state,
+          data: payload.data,
+          fields: ["thumbnailFileId"],
+          details: {
+            controlId: payload.controlId,
+          },
+        });
+      }
     },
   }),
   {

package/src/systemVariables.js

@@ -21,6 +21,33 @@ export const SYSTEM_VARIABLE_GROUPS = Object.freeze([
         description:
           "Controls the default dialogue text speed stored for this device.",
       },
+      {
+        id: "_currentSaveLoadPagination",
+        name: "Current Save/Load Pagination",
+        scope: "context",
+        type: "number",
+        default: 0,
+        description:
+          "The current save/load pagination index. Resolves to 0, 1, 2, 3, and so on for the active save/load page.",
+      },
+      {
+        id: "_currentMenuPage",
+        name: "Current Menu Page",
+        scope: "context",
+        type: "string",
+        default: "",
+        description:
+          "The current menu page id for the active UI flow. Typical values include options, save, load, and history.",
+      },
+      {
+        id: "_menuEntryPoint",
+        name: "Menu Entry Point",
+        scope: "context",
+        type: "string",
+        default: "",
+        description:
+          "Indicates how the current menu flow was opened. Typical values include title and read.",
+      },
     ]),
   },
 ]);