chore: backport fixes

.infisical.json

@@ -0,0 +1,5 @@
+{
+  "workspaceId": "5f47e968-f6f6-49fe-bbb8-0fdfabbd5874",
+  "defaultEnvironment": "",
+  "gitBranchToEnvironmentMapping": null
+}

build.config.ts

@@ -0,0 +1,9 @@
+import { defineBuildConfig } from "unbuild";
+
+export default defineBuildConfig({
+  // Other unbuild configuration...
+  externals: [
+    // Add other external dependencies if you have them...
+    "defu",
+  ],
+});

eslint.config.mjs

@@ -14,4 +14,8 @@ export default createConfigForNuxt({
   },
 })
   // your custom flat config here...
-  .append();
+  .append({
+    rules: {
+      "@typescript-eslint/no-empty-object-type": 0,
+    },
+  });

orchestr-playground/app.vue

@@ -1,3 +1,5 @@
 <template>
-  <LfcOrchestrRequestEditor />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

orchestr-playground/components/CustomerActionCard.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  title: string;
+  description: string;
+  icon: string;
+  iconColor: string;
+  buttonText: string;
+  buttonColor: string;
+  route: string;
+}
+
+const props = defineProps<Props>();
+
+const handleClick = () => {
+  navigateTo(props.route);
+};
+
+// Computed button classes without disabled state
+const buttonClasses = computed(
+  () => `w-full rounded-md px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors ${props.buttonColor}`
+);
+</script>
+
+<template>
+  <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
+    <!-- Logo/Icon Section -->
+    <div class="mb-4 text-center">
+      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-lg" :class="iconColor">
+        <svg
+          class="h-6 w-6"
+          :class="iconColor.replace('bg-', 'text-').replace('-100', '-600')"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            v-if="icon === 'view'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 10h16M4 14h16M4 18h16"
+          />
+          <path
+            v-else-if="icon === 'create'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+          />
+          <path
+            v-else-if="icon === 'update'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          />
+          <path
+            v-else-if="icon === 'delete'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
+          <path
+            v-else-if="icon === 'user'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5.121 17.804A9 9 0 1112 21a9 9 0 01-6.879-3.196zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
+          />
+          <path
+            v-else-if="icon === 'star'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.6c.969 0 1.371 1.24.588 1.81l-5.347 3.89a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.347-3.89a1 1 0 00-1.176 0l-5.347 3.89c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118l-5.347-3.89c-.783-.57-.38-1.81.588-1.81h6.6a1 1 0 00.95-.69l2.036-6.29z"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Content Section -->
+    <div class="text-center">
+      <h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
+      <p class="mt-1 text-sm text-gray-500">{{ description }}</p>
+    </div>
+
+    <!-- Button Section -->
+    <div class="mt-4">
+      <button :class="buttonClasses" @click="handleClick">
+        {{ buttonText }}
+      </button>
+    </div>
+  </div>
+</template>

orchestr-playground/components/MainActionCard.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  title: string;
+  description: string;
+  icon: string;
+  gradientFrom: string;
+  gradientTo: string;
+  textColor: string;
+  action: 'navigate' | 'view';
+  route?: string;
+  viewName?: string;
+}
+
+const props = defineProps<Props>();
+
+const handleClick = () => {
+  if (props.action === 'navigate' && props.route) {
+    navigateTo(props.route);
+  } else if (props.action === 'view' && props.viewName) {
+    // Emit event to parent to change view
+    emit('changeView', props.viewName);
+  }
+};
+
+const emit = defineEmits<{
+  changeView: [viewName: string];
+}>();
+
+// Create computed classes for gradients using predefined Tailwind classes
+const hoverGradientClass = computed(() => {
+  const fromColor = props.gradientFrom.replace('-500', '-50');
+  const toColor = props.gradientTo.replace('-600', '-50');
+
+  // Map to predefined Tailwind classes
+  const gradientMap: Record<string, string> = {
+    'from-indigo-50 to-purple-50': 'bg-gradient-to-br from-indigo-50 to-purple-50',
+    'from-emerald-50 to-teal-50': 'bg-gradient-to-br from-emerald-50 to-teal-50',
+    'from-rose-50 to-pink-50': 'bg-gradient-to-br from-rose-50 to-pink-50',
+  };
+
+  const key = `from-${fromColor} to-${toColor}`;
+  return gradientMap[key] || 'bg-gradient-to-br from-gray-50 to-gray-50';
+});
+
+const iconGradientClass = computed(() => {
+  const fromColor = props.gradientFrom;
+  const toColor = props.gradientTo;
+
+  // Map to predefined Tailwind classes
+  const gradientMap: Record<string, string> = {
+    'from-indigo-500 to-purple-600': 'bg-gradient-to-br from-indigo-500 to-purple-600',
+    'from-emerald-500 to-teal-600': 'bg-gradient-to-br from-emerald-500 to-teal-600',
+    'from-rose-500 to-pink-600': 'bg-gradient-to-br from-rose-500 to-pink-600',
+  };
+
+  const key = `from-${fromColor} to-${toColor}`;
+  return gradientMap[key] || 'bg-gradient-to-br from-gray-500 to-gray-600';
+});
+</script>
+
+<template>
+  <button
+    class="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-8 text-left shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
+    @click="handleClick"
+  >
+    <div class="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" :class="hoverGradientClass"></div>
+    <div class="relative z-10">
+      <div class="mb-6 flex h-16 w-16 items-center justify-center rounded-xl shadow-lg" :class="iconGradientClass">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <!-- Orchestr queries Icon -->
+          <path
+            v-if="icon === 'orchestr-queries'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 4v5a2 2 0 100 4h5a2 2 0 100-4V9L6.5 12.5l4.5 4.5V19l-5-5h-4z"
+          />
+          <!-- OAuth Icon -->
+          <path
+            v-else-if="icon === 'orchestr-actions'"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 12a8 8 0 0114-5M20 12a8 8 0 01-14 5M12 8v8m-4-4h8"
+          />
+        </svg>
+      </div>
+      <h3 class="mb-3 text-xl font-semibold text-gray-900">{{ title }}</h3>
+      <p class="mb-4 leading-relaxed text-gray-600">{{ description }}</p>
+      <div class="flex items-center font-medium" :class="textColor">
+        <span>Get Started</span>
+        <svg class="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+    </div>
+  </button>
+</template>

orchestr-playground/nuxt.config.ts

@@ -1,14 +1,18 @@
 import srcModule from "../src/module";
 import laioutrrc from "../laioutrrc.json";
 
-// Do not install ui-app to avoid conflicts with unocss.
-const rcWithoutUi = {
+const appsToUninstall = ["@laioutr-app/ui"];
+
+// Uncomment the below line if you don't want/need Shopify
+// appsToUninstall.push("@laioutr-app/shopify")
+
+const clean_laioutrrc = {
   ...laioutrrc,
 
   laioutr: {
     projectSecretKey: false,
   },
-  apps: laioutrrc.apps.filter((app) => app.name !== "@laioutr-app/ui"),
+  apps: laioutrrc.apps.filter((app) => !appsToUninstall.includes(app.name)),
 };
 
 export default defineNuxtConfig({
@@ -21,9 +25,13 @@ export default defineNuxtConfig({
   ],
   laioutr: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    laioutrrc: rcWithoutUi as any,
+    laioutrrc: clean_laioutrrc as any,
+  },
+  i18n: {
+    bundle: {
+      optimizeTranslationDirective: false,
+    },
   },
-  myModule: {},
   devtools: { enabled: true },
   compatibilityDate: "2025-09-11",
   vite: {

orchestr-playground/pages/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
+    <!-- Main Content -->
+    <main class="px-4 py-4">
+      <!-- Main Menu -->
+      <div class="mb-16 text-center">
+        <h1 class="mb-3 text-4xl font-bold text-gray-900">
+          Commercetools Playground
+        </h1>
+        <p class="text-xl text-gray-600">Choose a tool to test</p>
+      </div>
+
+      <div class="mx-auto grid max-w-6xl gap-8 md:grid-cols-2">
+        <!-- Orchestr Request Editor Option -->
+        <MainActionCard
+          title="Orchestr Request Editor (Queries)"
+          description="Test and debug Orchestr queries with our powerful development tools"
+          icon="orchestr-queries"
+          gradient-from="indigo-500"
+          gradient-to="purple-600"
+          text-color="text-indigo-600"
+          action="navigate"
+          route="/orchestr-queries"
+        />
+
+        <MainActionCard
+          title="Orchestr Request Editor (Actions)"
+          description="Test and debug Orchestr actions with our powerful development tools"
+          icon="orchestr-actions"
+          gradient-from="rose-500"
+          gradient-to="pink-600"
+          text-color="text-indigo-600"
+          action="navigate"
+          route="/orchestr-actions"
+        />
+      </div>
+    </main>
+  </div>
+</template>

orchestr-playground/pages/orchestr-actions/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LfcOrchestrActionEditor back-button-href="/" />
+</template>

orchestr-playground/pages/orchestr-queries/index.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <LfcOrchestrRequestEditor back-button-href="/" />
+</template>

package.json

@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "orchestr-dev": "npm run dev:prepare && nuxi dev orchestr-playground",
+    "orchestr-dev": "infisical run -c \"npm run dev:prepare && nuxi dev orchestr-playground\"",
     "dev": "npm run dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare orchestr-playground",

playground/nuxt.config.ts

@@ -1,6 +1,17 @@
 import srcModule from "../src/module";
 import laioutrrc from "../laioutrrc.json";
 
+const appsToUninstall = ["@laioutr-app/ui", "@laioutr-app/shopify"];
+
+const clean_laioutrrc = {
+  ...laioutrrc,
+
+  laioutr: {
+    projectSecretKey: false,
+  },
+  apps: laioutrrc.apps.filter((app) => !appsToUninstall.includes(app.name)),
+};
+
 export default defineNuxtConfig({
   modules: [
     srcModule,
@@ -11,14 +22,18 @@ export default defineNuxtConfig({
   ],
   laioutr: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    laioutrrc: laioutrrc as any,
+    laioutrrc: clean_laioutrrc as any,
   },
   i18n: {
     bundle: {
       optimizeTranslationDirective: false,
     },
   },
-  myModule: {},
   devtools: { enabled: true },
   compatibilityDate: "2025-09-11",
+  vite: {
+    optimizeDeps: {
+      include: ["ajv", "json-source-map", "natural-compare-lite"],
+    },
+  },
 });