Alokai versions

find apps -type f -name common.ts -path '*/integrations/*' -not -path '*/node_modules/*' -exec grep -lF 'createRequestFunction' {} +

 export const createRequestFunction = function (axiosArgs: RequestArgs, globalAxios: AxiosInstance, BASE_PATH: string, configuration?: Configuration) {
-    return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+    return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH): Promise<R> => {
         const axiosRequestArgs = {...axiosArgs.options, url: (configuration?.basePath || axios.defaults.baseURL || basePath) + axiosArgs.url};
-        return axios.request<T, R>(axiosRequestArgs);
+        return axios.request<T, R>(axiosRequestArgs) as Promise<R>;
     };
 }

grep -A1 '^"\?vue@' yarn.lock

find apps -type f -name Scrollable.vue -not -path '*/node_modules/*' -exec grep -lF '$attrs.class ??' {} + ; find apps -type f -name ProductSlider.vue -not -path '*/node_modules/*' -exec grep -lF ':wrapper-class="wrapperClass"' {} +

+import { normalizeClass } from 'vue';

-    :wrapper-class="$attrs.class ?? ''"
+    :wrapper-class="normalizeClass($attrs.class)"

+import { normalizeClass } from 'vue';

-    :wrapper-class="wrapperClass"
+    :wrapper-class="normalizeClass(wrapperClass)"

-import type { HTMLAttributes } from 'vue';
+import type { ClassValue } from 'vue';

-  wrapperClass?: HTMLAttributes['class'];
+  wrapperClass?: ClassValue;

CONNECT_ADMIN_FUSIONAUTH_APPLICATION_ID=<your application id>
CONNECT_ADMIN_FUSIONAUTH_CLIENT_SECRET=<its client secret, if it needs one>

yarn alokai plugins

yarn alokai plugins install @alokai/cli-plugin-review@0.3.1

find packages apps -maxdepth 4 -type f -name package.json -not -path '*/node_modules/*' -exec grep -Hn '@storefront-ui/' {} +

-    "@storefront-ui/react": "4.0.1",
+    "@storefront-ui/react": "4.0.3",
     "@storefront-ui/typography": "3.1.0",
-    "@storefront-ui/vue": "3.1.2",
+    "@storefront-ui/vue": "3.1.4",

find apps -type f -name tailwind.scss -not -path '*/node_modules/*' -exec grep -lF '../../../../../../node_modules/@storefront-ui/react' {} + || true

 @source '../**/*.ts';
 @source '../**/*.tsx';
 @source '../../../../../node_modules/@storefront-ui/react';
-@source '../../../../../../node_modules/@storefront-ui/react';

-export { register } from '@vue-storefront/next/instrumentation';
+export { onRequestError, register } from '@vue-storefront/next/instrumentation';

CONNECT_ADMIN_FIRESTORE_PROJECT_ID=<gcp project id>
CONNECT_ADMIN_FIRESTORE_CLIENT_EMAIL=<service account email>
CONNECT_ADMIN_FIRESTORE_PRIVATE_KEY=<service account private key>

find apps -type f \( -name '*.ts' -o -name '*.tsx' \) -path '*/storefront-middleware/*' -not -path '*/node_modules/*' -exec grep -lE 'getFeatureVersions\(|\.currentId' {} + || true

-const versions = await getFeatureVersions(context, "merchandising");
+const versions = await getFeatureVersions(context, { featureId: "merchandising", viewId: "rules" });

grep -n '"zod"' package.json || true

   "resolutions": {
-    "zod": "4.1.12"
+    "zod": "4.2.1"
   }

+import type { ApiClientExtension } from '@alokai/connect/middleware';
+
+import { configSwitcherExtension } from '@/sf-modules/compass/extensions';

 export const config = defineConfig({
   // ...
+  extensions: (extensions: ApiClientExtension[]) => [...extensions, configSwitcherExtension],
   location: '@alokai/compass/server',

   "globalPassThroughEnv": [
+    "ALOKAI_COMPASS_CONFIG_ID",
+    "ALOKAI_COMPASS_CONFIG_SWITCHER_PROFILES",
     // ...
   ]

{
  "variants": [
    { "name": "baseline" },
    { "name": "concise", "configId": "concise-prompt" }
  ]
}

yarn alokai plugins

yarn alokai plugins install @alokai/cli-plugin-compass@1.2.0

find apps -type f -name render-cms-content.tsx -path '*/cms-smartedit/*' -not -path '*/node_modules/*' -exec grep -LF "classNames('contents', classes)" {} + ; find apps -type f -name RenderSlot.vue -path '*/cms-smartedit/*' -not -path '*/node_modules/*' -exec grep -LF 'class="contents"' {} + || true

 function getSmartEditProps(item: AgnosticCmsComponent | Slot) {
   const { properties = {} } = item;
   const { smartedit } = properties;

   if (!smartedit) {
-    return {};
+    return { className: 'contents' };
   }

   const { catalogVersionUuid, classes, componentId, componentType, componentUuid } = smartedit;

   return {
-    className: classes,
+    className: classNames('contents', classes),
     'data-smartedit-catalog-version-uuid': catalogVersionUuid,
     'data-smartedit-component-id': componentId,
     'data-smartedit-component-type': componentType,
     'data-smartedit-component-uuid': componentUuid,
   };
 }

 function RenderSlot({ aboveFold, item }: { aboveFold?: boolean; item: Slot }) {
   const { components: slotComponents } = item;

   return (
     <>
-      <div className="contents" {...getSmartEditProps(item)}>
+      <div {...getSmartEditProps(item)}>
         {slotComponents.map((component: AgnosticCmsComponent) => (
-          <div className="contents" {...getSmartEditProps(component)} key={component.id}>
+          <div {...getSmartEditProps(component)} key={component.id}>
             <RenderComponent aboveFold={aboveFold} item={component} />
           </div>
         ))}
       </div>
     </>
   );
 }

 <template>
-  <div v-bind="getSmartEditProps(item)">
-    <div v-for="component in item.components" :key="component.id" v-bind="getSmartEditProps(component)">
+  <div class="contents" v-bind="getSmartEditProps(item)">
+    <div
+      v-for="component in item.components"
+      :key="component.id"
+      class="contents"
+      v-bind="getSmartEditProps(component)"
+    >
       <RenderCmsContent :item="component" />
     </div>
   </div>
 </template>

find apps -type f \( -name live-preview.tsx -o -name ConnectCmsPage.vue \) -path '*/cms-smartedit/*' -not -path '*/node_modules/*' -exec grep -LF 'SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME' {} + || true

import { isValidCmsTicketId, SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME } from '@vsf-enterprise/smartedit-sdk';
import { cookies } from 'next/headers';

export default async function resolveCmsTicketId(
  cmsTicketIdParam: string | string[] | undefined,
): Promise<string | undefined> {
  const cookieStore = await cookies();
  const candidates = [cmsTicketIdParam?.toString(), cookieStore.get(SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME)?.value];
  return candidates.find(isValidCmsTicketId);
}

+import resolveCmsTicketId from '@/sf-modules/cms-smartedit/helpers/resolve-cms-ticket-id';

-    const { cmsTicketId: cmsTicketIdParam } = searchParams;
-    const cmsTicketId = cmsTicketIdParam?.toString();
+    const cmsTicketId = await resolveCmsTicketId(searchParams.cmsTicketId);

-        {cmsTicketId && <LivePreview page={$raw} />}
+        {cmsTicketId && <LivePreview cmsTicketId={cmsTicketId} page={$raw} />}

+import { SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME } from '@vsf-enterprise/smartedit-sdk';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';

 import { useSdk } from '@/sdk/alokai-context';

 interface LivePreviewProps {
+  cmsTicketId: string;
   page: Record<string, any>;
 }

 const ALLOWED_ORIGINS = ['backoffice.c1jvi8hu9a-vsfspzooa1-d1-public.model-t.cc.commerce.ondemand.com:443'];

+const CMS_TICKET_COOKIE_MAX_AGE_SECONDS = 30 * 60;
+
 export default function LivePreview(props: LivePreviewProps) {
-  const { page } = props;
+  const { cmsTicketId, page } = props;
   const sdk = useSdk();
+  const router = useRouter();
+
+  useEffect(() => {
+    document.cookie =
+      `${SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME}=${encodeURIComponent(cmsTicketId)}; ` +
+      `Path=/; Max-Age=${CMS_TICKET_COOKIE_MAX_AGE_SECONDS}; SameSite=None; Secure`;
+  }, [cmsTicketId]);

   useEffect(() => {
     sdk.smartedit.utils.initLivePreview({
       allowedOrigins: ALLOWED_ORIGINS,
+      onComponentUpdated: () => router.refresh(),
       page,
     });
-  }, []);
+  }, [page, router, sdk]);

   return null;
 }

+import resolveCmsTicketId from '@/sf-modules/cms-smartedit/helpers/resolve-cms-ticket-id';

-  const { cmsTicketId: cmsTicketIdParam } = searchParams;
+  const cmsTicketId = await resolveCmsTicketId(searchParams.cmsTicketId);
   const locale = await getLocale();

-  if (!cmsTicketIdParam) {
+  if (!cmsTicketId) {
     redirect({ href: '/', locale });
     return null;
   }

-  const cmsTicketId = cmsTicketIdParam.toString();

 import { isSpecificSdkHttpError, prepareConfig } from '@alokai/connect/sdk';
+import { isValidCmsTicketId, SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME } from '@vsf-enterprise/smartedit-sdk';

+const CMS_TICKET_COOKIE_MAX_AGE_SECONDS = 30 * 60;
+
 const props = defineProps({

 const { locale: storefrontLocale } = storeToRefs(useSfState());
+const cmsTicketCookie = useCookie<string | null | undefined>(SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME, {
+  maxAge: CMS_TICKET_COOKIE_MAX_AGE_SECONDS,
+  sameSite: 'none',
+  secure: true,
+});

 async function getPage(): Promise<TPage | null> {
   try {
     const path = stripLocalePath(routePath.value);
     const locale = resolveCmsLocale(storefrontLocale.value);
     const requestConfig = prepareConfig({});
-    const { cmsTicketId: cmsTicketIdParam } = query.value;

-    const cmsTicketId = cmsTicketIdParam?.toString();
+    const cmsTicketId = resolveCmsTicketId();
     if (cmsTicketId) {
+      cmsTicketCookie.value = cmsTicketId;
       Object.assign(requestConfig, {
         headers: { 'x-cms-ticket-id': cmsTicketId },
       });

+function resolveCmsTicketId(): string | undefined {
+  const { cmsTicketId: cmsTicketIdParam } = query.value;
+  const candidates = [cmsTicketIdParam?.toString(), cmsTicketCookie.value];
+  return candidates.find(isValidCmsTicketId);
+}
+
 function resolveCmsLocale(appLocale = 'en') {

-onMounted(initLivePreview);
+watch(page, initLivePreview, { immediate: true });

 import { prepareConfig } from '@alokai/connect/sdk';
+import { isValidCmsTicketId, SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME } from '@vsf-enterprise/smartedit-sdk';

-    if (!cmsTicketIdParam) {
-      return navigateTo('/');
-    }
-
-    const cmsTicketId = cmsTicketIdParam.toString();
-    const requestConfig = prepareConfig({ headers: { 'x-cms-ticket-id': cmsTicketId } });
+    const cmsTicketCookie = useCookie<string | null | undefined>(SMARTEDIT_PREVIEW_TOKEN_COOKIE_NAME, {
+      maxAge: 30 * 60,
+      sameSite: 'none',
+      secure: true,
+    });
+    const candidates = [cmsTicketIdParam?.toString(), cmsTicketCookie.value];
+    const cmsTicketId = candidates.find(isValidCmsTicketId);
+    if (!cmsTicketId) return navigateTo('/');
+
+    cmsTicketCookie.value = cmsTicketId;
+    const requestConfig = prepareConfig({
+      headers: { 'x-cms-ticket-id': cmsTicketId },
+    });