@vue-skuilder/standalone-ui 0.1.1

package/.env.development

@@ -0,0 +1,6 @@
+VITE_COUCHDB_SERVER=localhost:5984/
+VITE_COUCHDB_PROTOCOL=http
+
+VITE_STATIC_COURSE_IDS=""
+
+VITE_DEBUG=true

package/README.md

@@ -0,0 +1,22 @@
+# Standalone UI Package
+
+A template interface for single-course Skuilder applications.
+
+Contrasting against `platform-ui`, this package:
+
+- Focuses on delivering a specific, scoped curriculum
+- Provides simplified navigation and course-specific theming
+
+Within the monorepo, this package acts as a blueprint for the scaffolding tool while providing a reference implementation.
+
+When courses are generated via the Skuilder CLI, this template transforms into customized, independent applications.
+
+## Core Dependencies
+
+Vue 3, Vuetify 3
+
+## Development
+
+The existing `./skuilder.config.js` file contains a devenv config that loads an `anatomy` course from the existing test DB docker image.
+
+Before `yarn dev` of the standalone package, the testDB docker image must be loaded via `yarn couchdb:start` in project root.

package/cypress/e2e/auth.cy.js

@@ -0,0 +1,6 @@
+// standalone-ui/cypress/e2e/auth.cy.js
+// Tests for authentication flow including login, registration, and logout
+
+describe('Authentication', () => {
+  // todo
+});

package/cypress/e2e/smoke.cy.js

@@ -0,0 +1,10 @@
+// Basic smoke test for standalone-ui
+describe('Smoke Test', () => {
+  it('should load the application', () => {
+    cy.visit('/');
+    
+    // Verify that the application loaded
+    // Update selector as needed based on your actual UI
+    cy.get('body').should('be.visible');
+  });
+});

package/cypress/support/commands.js

@@ -0,0 +1,36 @@
+// standalone-ui/cypress/support/commands.js
+// Custom commands for Cypress tests
+
+// Command for logging in a user
+Cypress.Commands.add('login', (username, password) => {
+  cy.visit('/login');
+  cy.get('input[name="username"]').type(username);
+  cy.get('input[name="password"]').type(password);
+  cy.contains('button', 'Log in').click();
+  
+  // Optional: Wait for login to complete and redirect
+  cy.url().should('not.include', '/login');
+});
+
+// Command for registering a new user
+Cypress.Commands.add('registerUser', (username = null, password = 'securePassword123') => {
+  // Generate a unique username if none provided
+  const finalUsername = username || `testuser${Date.now()}`;
+
+  // Visit the signup page
+  cy.visit('/signup');
+
+  // Fill out the registration form
+  cy.get('input[name="username"]').type(finalUsername);
+  cy.get('input[name="password"]').type(password);
+  cy.get('input[name="retypedPassword"]').type(password);
+
+  // Submit the form
+  cy.contains('button', 'Create Account').click();
+
+  // Wait for registration to complete
+  cy.url().should('include', `/u/${finalUsername}/new`);
+
+  // Return the created username so it can be used in tests
+  return cy.wrap(finalUsername);
+});

package/cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// standalone-ui/cypress/support/e2e.js
+// This is the main support file for Cypress E2E tests
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Cypress exception handling
+Cypress.on('uncaught:exception', (err) => {
+  // Log the error for debugging
+  console.log('Uncaught exception:', err.message);
+
+  // If the error is from PouchDB, ignore it
+  if (err.message.includes('not_found') || err.message.includes('missing')) {
+    return false; // Prevents Cypress from failing the test
+  }
+  return true; // Otherwise, fail the test
+});

package/cypress.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:6173', // package/standalone-ui vite dev server port
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  //  increase the default timeout for slower operations
+  defaultCommandTimeout: 10000,
+  // Viewport configuration
+  viewportWidth: 1280,
+  viewportHeight: 800,
+});

package/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skuilder Course</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@vue-skuilder/standalone-ui",
+    "publishConfig": {
+        "access": "public"
+    },
+    "version": "0.1.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test:e2e": "cypress open",
+        "test:e2e:headless": "cypress run",
+        "ci:e2e": "vite dev & wait-on http://localhost:6173 && cypress run"
+    },
+    "dependencies": {
+        "@mdi/font": "^7.3.67",
+        "@vue-skuilder/common-ui": "workspace:*",
+        "@vue-skuilder/db": "workspace:*",
+        "pinia": "^2.3.0",
+        "vue": "^3.5.13",
+        "vue-router": "^4.2.0",
+        "vuetify": "^3.7.0"
+    },
+    "devDependencies": {
+        "@types/cypress": "1.1.6",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "cypress": "14.1.0",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.9",
+        "vue-tsc": "^1.8.0",
+        "wait-on": "8.0.2"
+    }
+}

package/skuilder.config.json

@@ -0,0 +1,5 @@
+{
+    "title": "[dev] Anatomy",
+    "course": "e92135c6c3ba6fba79367e7f26001ef3",
+    "dataLayerType": "couch"
+}

package/src/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-app :theme="theme">
+    <course-header :title="courseConfig.title" :logo="courseConfig.logo" />
+
+    <v-main>
+      <router-view />
+    </v-main>
+
+    <!-- <course-footer :links="courseConfig.links" :copyright="courseConfig.copyright" /> -->
+    <SkMouseTrap />
+    
+    <v-footer app class="pa-0" color="transparent">
+      <v-card flat width="100%" class="text-center">
+        <v-card-text class="text-body-2 text-medium-emphasis">
+          <v-icon small class="me-1">mdi-keyboard</v-icon>
+          Tip: Hold <kbd>Ctrl</kbd> to see keyboard shortcuts or press <kbd>?</kbd> to view all shortcuts
+        </v-card-text>
+      </v-card>
+    </v-footer>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useCourseConfig } from './composables/useCourseConfig';
+import CourseHeader from './components/CourseHeader.vue';
+import CourseFooter from './components/CourseFooter.vue';
+import { SkMouseTrap, SkldrMouseTrap } from '@vue-skuilder/common-ui';
+
+const { courseConfig } = useCourseConfig();
+const theme = computed(() => (courseConfig.darkMode ? 'dark' : 'light'));
+
+onMounted(() => {
+  // Add a global shortcut to show the keyboard shortcuts dialog
+  SkldrMouseTrap.addBinding({
+    hotkey: '?',
+    command: 'Show keyboard shortcuts',
+    callback: () => {
+      const keyboardButton = document.querySelector('.mdi-keyboard');
+      if (keyboardButton) {
+        (keyboardButton as HTMLElement).click();
+      }
+    }
+  });
+});
+</script>

package/src/ENVIRONMENT_VARS.ts

@@ -0,0 +1,76 @@
+// vue-skuilder/packages/standalone-ui/src/ENVIRONMENT_VARS.ts
+type ProtocolString = 'http' | 'https';
+
+import config from '../skuilder.config.json';
+
+export interface Environment {
+  /**
+   * URL to the remote couchDB instance that the app connects to.
+   * Loaded from VITE_COUCHDB_SERVER_URL environment variable.
+   */
+  COUCHDB_SERVER_URL: string;
+
+  /**
+   * Protocol for the CouchDB server.
+   * Loaded from VITE_COUCHDB_SERVER_PROTOCOL environment variable.
+   */
+  COUCHDB_SERVER_PROTOCOL: ProtocolString;
+
+  /**
+   * Static course IDs to load.
+   * Loaded from VITE_STATIC_COURSE_IDS environment variable (comma-separated string).
+   */
+  STATIC_COURSE_ID: string;
+
+  /**
+   * Type of data layer to use - couchdb live backend or
+   * statically built and served from the app.
+   */
+  DATALAYER_TYPE: 'couch' | 'static';
+
+  /**
+   * A global flag to enable debug messaging mode.
+   * Loaded from VITE_DEBUG environment variable ('true' or 'false').
+   */
+  DEBUG: boolean;
+}
+
+// Default fallback values if environment variables are not set
+const defaultEnv: Environment = {
+  COUCHDB_SERVER_URL: 'localhost:5984/', // Sensible default for local dev
+  COUCHDB_SERVER_PROTOCOL: 'http',
+  STATIC_COURSE_ID: 'not_set',
+  DATALAYER_TYPE: 'couch',
+  DEBUG: false, // Default to false if VITE_DEBUG is not 'true'
+};
+
+// --- Read Environment Variables using Vite's import.meta.env ---
+// Vite replaces these variables at build time with the values from your .env files.
+
+if (config.dataLayerType !== 'couch' && config.dataLayerType !== 'static') {
+  throw new Error('Invalid data layer type');
+}
+
+const ENV: Environment = {
+  // Use the value from import.meta.env if available, otherwise use the default
+  COUCHDB_SERVER_URL: import.meta.env.VITE_COUCHDB_SERVER || defaultEnv.COUCHDB_SERVER_URL,
+
+  // Ensure the protocol is one of the allowed types
+  COUCHDB_SERVER_PROTOCOL: (import.meta.env.VITE_COUCHDB_PROTOCOL === 'https'
+    ? 'https'
+    : 'http') as ProtocolString,
+
+  STATIC_COURSE_ID: config.course,
+
+  DATALAYER_TYPE: config.dataLayerType,
+
+  // Environment variables are always strings, so compare VITE_DEBUG to 'true'
+  DEBUG: import.meta.env.VITE_DEBUG === 'true',
+};
+
+// Optional: Log the resolved environment in development mode for debugging
+if (import.meta.env.DEV) {
+  console.log('Resolved Environment Variables:', ENV);
+}
+
+export default ENV;

package/src/components/CourseFooter.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-footer app padless>
+    <v-container fluid>
+      <v-row justify="center" align="center">
+        <v-col cols="12" sm="8" class="text-center">
+          <div v-if="links && links.length" class="d-flex justify-center mb-2">
+            <v-btn
+              v-for="link in links"
+              :key="link.text"
+              :href="link.url"
+              text
+              variant="plain"
+              size="small"
+              class="mx-1"
+            >
+              {{ link.text }}
+            </v-btn>
+          </div>
+          <div class="text-body-2 text-medium-emphasis">
+            {{ copyright }}
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  links?: Array<{ text: string; url: string }>;
+  copyright?: string;
+}>();
+</script>

package/src/components/CourseHeader.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-app-bar>
+    <v-app-bar-nav-icon v-if="isMobile"></v-app-bar-nav-icon>
+
+    <v-toolbar-title class="d-flex align-center">
+      <img v-if="logo" :src="logo" alt="Course Logo" height="32" class="mr-2" />
+      {{ title }}
+    </v-toolbar-title>
+
+    <v-spacer></v-spacer>
+
+    <div v-if="!isMobile" class="d-flex">
+      <v-btn v-for="item in menuItems" :key="item.text" :to="item.path" text>
+        {{ item.text }}
+      </v-btn>
+    </div>
+
+    <v-divider vertical class="mx-2"></v-divider>
+
+    <UserLoginAndRegistrationContainer :show-login-button="true" redirect-to-path="/study" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useDisplay } from 'vuetify';
+import { UserLoginAndRegistrationContainer, useAuthStore } from '@vue-skuilder/common-ui';
+import { getDataLayer } from '@vue-skuilder/db';
+
+const props = defineProps<{
+  title: string;
+  logo?: string;
+}>();
+
+const { mobile } = useDisplay();
+const isMobile = computed(() => mobile.value);
+
+const menuItems = ref([
+  { text: 'Home', path: '/' },
+  { text: 'Study', path: '/study' },
+  { text: 'Progress', path: '/progress' },
+]);
+</script>

package/src/composables/useCourseConfig.ts

@@ -0,0 +1,33 @@
+import { ref, readonly } from 'vue';
+import config from '../../skuilder.config.json';
+
+// This would be replaced by actual course configuration in a real implementation
+const defaultConfig = {
+  title: config.title ? config.title : '[UNSET] Course Title',
+  description: 'This is the devenv test course setup.',
+  logo: '',
+  darkMode: false,
+  links: [
+    { text: 'About', url: '/about' },
+    { text: 'Help', url: '/help' },
+  ],
+  copyright: '',
+};
+
+export function useCourseConfig() {
+  const courseConfig = ref(defaultConfig);
+
+  // Later this would load from a configuration file or API
+  const loadConfig = async () => {
+    // In a real implementation, this would load configuration
+    // courseConfig.value = await loadCourseConfig();
+  };
+
+  // Initialize
+  loadConfig();
+
+  return {
+    courseConfig: readonly(courseConfig),
+    loadConfig,
+  };
+}

package/src/main.ts

@@ -0,0 +1,60 @@
+import ENV from './ENVIRONMENT_VARS';
+import '@mdi/font/css/materialdesignicons.css';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+
+// Vuetify
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
+
+// data layer
+import { initializeDataLayer } from '@vue-skuilder/db';
+
+// auth store
+import { useAuthStore } from '@vue-skuilder/common-ui';
+
+(async () => {
+  await initializeDataLayer({
+    type: 'pouch',
+    options: {
+      COUCHDB_SERVER_URL: ENV.COUCHDB_SERVER_URL,
+      COUCHDB_SERVER_PROTOCOL: ENV.COUCHDB_SERVER_PROTOCOL,
+      COURSE_IDS: [ENV.STATIC_COURSE_ID],
+    },
+  });
+  const pinia = createPinia();
+
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+      defaultTheme: 'light',
+    },
+    icons: {
+      defaultSet: 'mdi',
+      aliases,
+      sets: {
+        mdi,
+      },
+    },
+  });
+
+  const app = createApp(App);
+
+  app.use(router);
+  app.use(vuetify);
+  app.use(pinia);
+
+  const { piniaPlugin } = await import('@vue-skuilder/common-ui');
+  app.use(piniaPlugin, { pinia });
+
+  await useAuthStore().init();
+
+  app.mount('#app');
+})();

package/src/router/index.ts

@@ -0,0 +1,41 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+import StudyView from '../views/StudyView.vue';
+import ProgressView from '../views/ProgressView.vue';
+import { UserLogin, UserRegistration } from '@vue-skuilder/common-ui';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView,
+  },
+  {
+    path: '/study',
+    name: 'study',
+    component: StudyView,
+  },
+  {
+    path: '/progress',
+    name: 'progress',
+    component: ProgressView,
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: UserLogin,
+  },
+  {
+    path: '/register',
+    alias: '/signup',
+    name: 'Register',
+    component: UserRegistration,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" class="text-center">
+        <h1 class="text-h3 mb-6">{{ courseConfig.title }}</h1>
+        <p class="text-body-1 mb-6">{{ courseConfig.description }}</p>
+
+        <div v-if="isLoggedIn">
+          <v-btn color="primary" size="large" to="/study"> Start Learning </v-btn>
+        </div>
+        <div v-else class="d-flex flex-column align-center">
+          <p class="text-body-1 mb-4">Please login to start learning</p>
+          <UserLoginAndRegistrationContainer v-model="authDialogOpen" redirect-to-path="/study">
+            <template #activator="{ props }">
+              <v-btn color="primary" size="large" v-bind="props"> Login / Sign Up </v-btn>
+            </template>
+          </UserLoginAndRegistrationContainer>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useCourseConfig } from '../composables/useCourseConfig';
+import { UserLoginAndRegistrationContainer, useAuthStore } from '@vue-skuilder/common-ui';
+import { getDataLayer } from '@vue-skuilder/db';
+
+const { courseConfig } = useCourseConfig();
+const authStore = useAuthStore();
+const authDialogOpen = ref(false);
+
+const isLoggedIn = computed(() => authStore.isLoggedIn);
+</script>

package/src/views/ProgressView.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h1 class="text-h4 mb-4">Your Progress</h1>
+
+        <!-- Placeholder for progress component -->
+        <v-card class="pa-4">
+          <p>Progress tracking will be shown here.</p>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+// Would import from common-ui or db package
+</script>

package/src/views/StudyView.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h1 class="text-h4 mb-4">Study Session</h1>
+
+        <div v-if="sessionPrepared">
+          <StudySession
+            :content-sources="sessionContentSources"
+            :session-time-limit="sessionTimeLimit"
+            :user="user"
+            :session-config="studySessionConfig"
+            :data-layer="dataLayer"
+            :get-view-component="getViewComponent"
+            @session-finished="handleSessionFinished"
+          />
+        </div>
+        <div v-else>
+          <v-card class="pa-4">
+            <v-progress-circular indeterminate color="primary"></v-progress-circular>
+            <p class="mt-4">Preparing study session...</p>
+          </v-card>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ContentSourceID, getDataLayer, UserDBInterface } from '@vue-skuilder/db';
+import { StudySession, type StudySessionConfig } from '@vue-skuilder/common-ui';
+import { allCourses } from '@vue-skuilder/courses';
+import { useRouter } from 'vue-router';
+import ENV from '../ENVIRONMENT_VARS';
+
+const router = useRouter();
+const user = getDataLayer().getUserDB();
+const dataLayer = getDataLayer();
+const sessionPrepared = ref(false);
+const sessionTimeLimit = ref(5); // 5 minutes
+const sessionContentSources = ref<ContentSourceID[]>([]);
+const studySessionConfig = ref<StudySessionConfig>({
+  likesConfetti: true,
+});
+
+// Function to get view component from courses
+const getViewComponent = (view_id: string) => allCourses.getView(view_id);
+
+// Initialize study session with course from environment vars
+const initStudySession = async () => {
+  // Check if course ID is valid
+  if (!ENV.STATIC_COURSE_ID || ENV.STATIC_COURSE_ID === 'not_set') {
+    console.error('[StudyView] No course ID specified in environment vars!');
+    return;
+  }
+
+  console.log(`[StudyView] Starting study session for course: ${ENV.STATIC_COURSE_ID}`);
+
+  // Set the content source to the course ID from environment vars
+  sessionContentSources.value = [
+    {
+      type: 'course',
+      id: ENV.STATIC_COURSE_ID,
+    },
+  ];
+
+  // Mark the session as prepared
+  sessionPrepared.value = true;
+};
+
+// Handle session finished
+const handleSessionFinished = () => {
+  // router.go(0); // Refresh the page
+};
+
+// Initialize on component mount
+onMounted(async () => {
+  // user.value = await getCurrentUser();
+
+  // if (user.value) {
+  await initStudySession();
+  // } else {
+  //   console.error('[StudyView] No user available!');
+  // }
+});
+</script>

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "strict": true,
+        "jsx": "preserve",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "esModuleInterop": true,
+        "lib": ["ESNext", "DOM"],
+        "skipLibCheck": true,
+        "noEmit": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        },
+        "types": ["vite/client"]
+    },
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,66 @@
+// packages/standalone-ui/vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { fileURLToPath, URL } from 'node:url'; // Import necessary Node.js modules
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      // Alias for internal src paths
+      '@': fileURLToPath(new URL('./src', import.meta.url)), // Use fileURLToPath and URL for robustness
+
+      // --- Link workspace packages to their SOURCE ---
+      // Adjust relative paths as needed based on your monorepo structure
+      '@vue-skuilder/common-ui': resolve(__dirname, '../../packages/common-ui/src/index.ts'),
+
+      // Add events alias if needed (often required by dependencies)
+      events: 'events',
+
+      // You might need to alias vue-router if dedupe isn't enough, though unlikely
+      // 'vue-router': resolve(__dirname, 'node_modules/vue-router'),
+    },
+    extensions: ['.js', '.ts', '.json', '.vue'], // Keep standard extensions
+    dedupe: [
+      // Ensure single instances of core libs and workspace packages
+      'vue',
+      'vuetify',
+      'pinia',
+      'vue-router',
+      '@vue-skuilder/db',
+      '@vue-skuilder/common',
+      '@vue-skuilder/common-ui',
+      '@vue-skuilder/courses',
+    ],
+  },
+  // --- Important for linked source dependencies ---
+  optimizeDeps: {
+    // Help Vite pre-bundle dependencies from linked packages
+    include: [
+      '@vue-skuilder/common-ui',
+      '@vue-skuilder/db',
+      '@vue-skuilder/common',
+      '@vue-skuilder/courses',
+    ],
+  },
+  server: {
+    port: 6173, // distinct from platform-ui
+  },
+  build: {
+    sourcemap: true, // Keep sourcemaps for build
+    target: 'es2020', // Match target from platform-ui
+    minify: 'terser', // Match minify from platform-ui
+    terserOptions: {
+      // Match terserOptions from platform-ui
+      keep_classnames: true,
+    },
+  },
+  // Add define block if standalone-ui needs process polyfills (like platform-ui did)
+  define: {
+    global: 'window',
+    'process.env': process.env,
+    'process.browser': true,
+    'process.version': JSON.stringify(process.version),
+  },
+});