@kennofizet/apphub-frontend 0.1.0

package/src/index.js

@@ -0,0 +1,427 @@
+import './modules/desktop/styles/desktop.css'
+import './modules/desktop/styles/theme.css'
+import { reactive } from 'vue'
+import { createAppHubApi } from './api/index.js'
+import { createCoreApi } from './api/coreApi.js'
+import { createZoneContextState } from './composables/createZoneContext.js'
+import { APPHUB_ZONE_CONTEXT_KEY } from './composables/useAppHubZoneContext.js'
+import { createAppStoreState, provideAppStore } from './modules/app-store/index.js'
+import { AppHubDesktop } from './modules/desktop/index.js'
+import { AppHubRunner } from './modules/runner/index.js'
+import { getAppHubStore, registerAppHubStore } from './moduleStore.js'
+import {
+  createWindowManagerState,
+  provideWindowManager,
+} from './modules/window-manager/index.js'
+import {
+  evaluateOriginSafety,
+  parseDevUserFromBootstrap,
+  parseOriginsFromBootstrap,
+} from './utils/originSafety.js'
+import { loadDevFriendlyOriginsPreference } from './utils/devOriginSettings.js'
+import {
+  bootstrapResponseFromCache,
+  loadBootstrapCache,
+  saveBootstrapCache,
+} from './utils/bootstrapCache.js'
+
+const bootstrapInflight = new WeakMap()
+
+function buildPublicOptions(options = {}) {
+  const origins = Array.isArray(options.allowedRuntimeOrigins)
+    ? options.allowedRuntimeOrigins.filter((o) => typeof o === 'string')
+    : []
+
+  return {
+    language: options.language || 'vi',
+    theme: options.theme ?? 'auto',
+    themeToggle: options.themeToggle,
+    openAppStoreOnMount: options.openAppStoreOnMount !== false,
+    allowedRuntimeOrigins: origins,
+    coreUrl: options.coreUrl || '',
+    backendUrl: (options.backendUrl || '').replace(/\/$/, ''),
+    hasToken: !!(options.token),
+    allowSameOriginEmbed: options.allowSameOriginEmbed === true,
+    allowUnsafeOrigin: options.allowUnsafeOrigin === true,
+    hubOrigin: typeof options.hubOrigin === 'string' ? options.hubOrigin.trim() : '',
+    runtimePublicUrl: typeof options.runtimePublicUrl === 'string' ? options.runtimePublicUrl.trim() : '',
+    enforceDedicatedHubOrigin: options.enforceDedicatedHubOrigin !== false,
+    enforceIsolatedHostedRuntime: options.enforceIsolatedHostedRuntime !== false,
+    allowSameOriginHostedRuntime: options.allowSameOriginHostedRuntime === true,
+    hostedSandboxSameOrigin: options.hostedSandboxSameOrigin === true,
+    enforceDevFriendlyOrigins: typeof options.enforceDevFriendlyOrigins === 'boolean'
+      ? options.enforceDevFriendlyOrigins
+      : true,
+    isDevUser: options.isDevUser === true,
+    serverHubPublicUrl: typeof options.serverHubPublicUrl === 'string' ? options.serverHubPublicUrl.trim() : '',
+    serverFrontendOrigin: typeof options.serverFrontendOrigin === 'string' ? options.serverFrontendOrigin.trim() : '',
+    serverRuntimePublicUrl: typeof options.serverRuntimePublicUrl === 'string' ? options.serverRuntimePublicUrl.trim() : '',
+    serverOriginsAuto: options.serverOriginsAuto === true,
+    serverOriginsResolved: options.serverOriginsResolved === true,
+    originBootstrapLoading: options.originBootstrapLoading === true,
+    originBlocked: false,
+    originCheckPending: false,
+    originBlockReason: null,
+    originBlockParentOrigin: null,
+    originBlockExpectedHubOrigin: null,
+    originBlockExpectedRuntimeOrigin: null,
+  }
+}
+
+/** @param {Record<string, unknown>} target */
+function applyOriginSafety(target, sourceOptions = {}) {
+  const check = evaluateOriginSafety({ ...target, ...sourceOptions })
+  target.originBootstrapLoading = check.loading === true
+  target.originCheckPending = check.pending === true
+  target.originBlocked = !check.safe && check.loading !== true
+  target.originBlockReason = check.reason
+  target.originBlockParentOrigin = check.parentOrigin
+  target.originBlockExpectedHubOrigin = check.expectedHubOrigin
+  target.originBlockExpectedRuntimeOrigin = check.expectedRuntimeOrigin
+  return check
+}
+
+function parseUserFromBootstrap(resp) {
+  const data = resp?.data?.data ?? resp?.data ?? {}
+  const user = data.user
+  if (!user || user.id == null) return null
+  return {
+    id: user.id,
+    name: user.name ?? String(user.id),
+  }
+}
+
+function applyBootstrapOrigins(store, bootstrapResponse, { fromCache = false } = {}) {
+  const {
+    hubPublicUrl,
+    frontendOrigin,
+    runtimePublicUrl,
+    originsAuto,
+  } = parseOriginsFromBootstrap(bootstrapResponse)
+
+  store.options.isDevUser = parseDevUserFromBootstrap(bootstrapResponse)
+  store.options.serverOriginsAuto = originsAuto
+
+  if (!store.options.isDevUser) {
+    store.options.enforceDevFriendlyOrigins = true
+  } else {
+    store.options.enforceDevFriendlyOrigins = loadDevFriendlyOriginsPreference()
+  }
+
+  if (hubPublicUrl) {
+    store.options.serverHubPublicUrl = hubPublicUrl
+  }
+  if (frontendOrigin) {
+    store.options.serverFrontendOrigin = frontendOrigin
+  }
+  if (runtimePublicUrl) {
+    store.options.serverRuntimePublicUrl = runtimePublicUrl
+    if (!store.options.runtimePublicUrl) store.options.runtimePublicUrl = runtimePublicUrl
+  }
+
+  store.options.serverOriginsResolved = true
+  store.options.originBootstrapLoading = false
+
+  if (!fromCache) {
+    saveBootstrapCache(store.credentials.backendUrl, bootstrapResponse)
+  }
+
+  const user = parseUserFromBootstrap(bootstrapResponse)
+  if (user && store.zoneContext?.state) {
+    store.zoneContext.state.user.id = user.id
+    store.zoneContext.state.user.name = user.name
+  }
+
+  reconcileOriginSafety(store)
+}
+
+function applyCachedBootstrapIfAny(store) {
+  const cached = loadBootstrapCache(store.credentials.backendUrl)
+  if (!cached) return false
+  applyBootstrapOrigins(store, bootstrapResponseFromCache(cached), { fromCache: true })
+  return true
+}
+
+async function fetchBootstrapSession(store) {
+  let promise = bootstrapInflight.get(store)
+  if (promise) return promise
+
+  promise = (async () => {
+    syncApi(store)
+    if (!store.facade?.bootstrap) return
+
+    const res = await store.facade.bootstrap()
+    if (res) applyBootstrapOrigins(store, res)
+  })().catch(() => {
+    store.options.originBootstrapLoading = false
+    if (!store.options.serverOriginsResolved) {
+      reconcileOriginSafety(store)
+    }
+  }).finally(() => {
+    bootstrapInflight.delete(store)
+  })
+
+  bootstrapInflight.set(store, promise)
+  return promise
+}
+
+function startBootstrapSession(store) {
+  const { backendUrl, token } = store.credentials
+  if (!backendUrl || !token) {
+    store.options.originBootstrapLoading = false
+    reconcileOriginSafety(store)
+    return Promise.resolve()
+  }
+
+  syncApi(store)
+  applyOriginSafety(store.options)
+
+  const hadCache = applyCachedBootstrapIfAny(store)
+  if (!hadCache && !store.options.originBlocked) {
+    store.options.originBootstrapLoading = true
+    store.options.originBlocked = false
+    applyOriginSafety(store.options)
+    disableModuleServices(store)
+  }
+
+  return fetchBootstrapSession(store)
+}
+
+function reconcileOriginSafety(store) {
+  const wasBlocked = store.options.originBlocked === true
+  const wasLoading = store.options.originBootstrapLoading === true
+  applyOriginSafety(store.options)
+
+  if (store.options.originBootstrapLoading) {
+    disableModuleServices(store)
+    return
+  }
+
+  if (store.options.originBlocked && !wasBlocked) {
+    disableModuleServices(store)
+  } else if (!store.options.originBlocked && (wasBlocked || wasLoading)) {
+    enableModuleApi(store)
+  }
+}
+
+function disableModuleServices(store) {
+  store.facade.setImpl(null)
+  store.coreApi = null
+}
+
+/** Window manager + app store — required even when origin is blocked (AppHubDesktop setup). */
+function ensureModuleInfrastructure(vueApp, store) {
+  ensureZoneContext(vueApp, store)
+  ensureModuleState(vueApp, store)
+}
+
+function enableModuleApi(store) {
+  syncApi(store)
+  syncZoneContext(store)
+}
+
+function enableModuleServices(vueApp, store) {
+  ensureModuleInfrastructure(vueApp, store)
+  enableModuleApi(store)
+}
+
+function buildCredentials(options = {}) {
+  return {
+    coreUrl: options.coreUrl || '',
+    backendUrl: options.backendUrl || '',
+    token: options.token || '',
+    hostAccessSecret: options.hostAccessSecret || '',
+  }
+}
+
+function createApiFacade() {
+  let impl = null
+  return {
+    setImpl(next) {
+      impl = next
+    },
+    bootstrap: (...args) => impl?.bootstrap?.(...args),
+    apps: (...args) => impl?.apps?.(...args),
+    launch: (...args) => impl?.launch?.(...args),
+    ping: (...args) => impl?.ping?.(...args),
+    verifyLaunchToken: (...args) => impl?.verifyLaunchToken?.(...args),
+    usage: (...args) => impl?.usage?.(...args),
+    devApps: (...args) => impl?.devApps?.(...args),
+    devInspectBundle: (...args) => impl?.devInspectBundle?.(...args),
+    devDisableApp: (...args) => impl?.devDisableApp?.(...args),
+    devSetAppStatus: (...args) => impl?.devSetAppStatus?.(...args),
+    registerApp: (...args) => impl?.registerApp?.(...args),
+    appVersions: (...args) => impl?.appVersions?.(...args),
+    integrationDocs: (...args) => impl?.integrationDocs?.(...args),
+    integrationDocsInternal: (...args) => impl?.integrationDocsInternal?.(...args),
+    grantBridgeScope: (...args) => impl?.grantBridgeScope?.(...args),
+    bridgeUser: (...args) => impl?.bridgeUser?.(...args),
+    bridgeDesktopMessage: (...args) => impl?.bridgeDesktopMessage?.(...args),
+  }
+}
+
+function applyModuleOptions(store, options = {}) {
+  const nextPublic = buildPublicOptions({ ...options, token: options.token ?? store.credentials.token })
+  Object.assign(store.options, {
+    language: nextPublic.language,
+    theme: nextPublic.theme,
+    themeToggle: nextPublic.themeToggle,
+    openAppStoreOnMount: nextPublic.openAppStoreOnMount,
+    allowedRuntimeOrigins: nextPublic.allowedRuntimeOrigins,
+    coreUrl: nextPublic.coreUrl,
+    backendUrl: nextPublic.backendUrl,
+    hasToken: nextPublic.hasToken,
+    allowSameOriginEmbed: nextPublic.allowSameOriginEmbed,
+    allowUnsafeOrigin: nextPublic.allowUnsafeOrigin,
+    hubOrigin: nextPublic.hubOrigin,
+    runtimePublicUrl: nextPublic.runtimePublicUrl,
+    enforceDedicatedHubOrigin: nextPublic.enforceDedicatedHubOrigin,
+    enforceIsolatedHostedRuntime: nextPublic.enforceIsolatedHostedRuntime,
+    allowSameOriginHostedRuntime: nextPublic.allowSameOriginHostedRuntime,
+    hostedSandboxSameOrigin: nextPublic.hostedSandboxSameOrigin,
+    enforceDevFriendlyOrigins: nextPublic.enforceDevFriendlyOrigins,
+  })
+  applyOriginSafety(store.options, options)
+  if (store.credentials.backendUrl && store.credentials.token) {
+    void startBootstrapSession(store)
+  } else {
+    reconcileOriginSafety(store)
+  }
+  Object.assign(store.credentials, buildCredentials(options))
+}
+
+function syncApi(store) {
+  const { credentials, facade, zoneContext } = store
+  const api = credentials.backendUrl && credentials.token
+    ? createAppHubApi(credentials.backendUrl, credentials.token, {
+        hostAccessSecret: credentials.hostAccessSecret,
+        getZoneHeaderId: () => zoneContext?.getZoneHeaderId?.() ?? null,
+      })
+    : null
+  facade.setImpl(api)
+}
+
+function syncCoreApi(store) {
+  const { credentials } = store
+  store.coreApi = credentials.coreUrl && credentials.token
+    ? createCoreApi(credentials.coreUrl, credentials.token)
+    : null
+}
+
+function ensureZoneContext(app, store) {
+  if (store.zoneContext) return
+  store.zoneContext = createZoneContextState(
+    () => store.coreApi,
+    () => store.facade,
+    {
+      ensureBootstrapSession: () => fetchBootstrapSession(store),
+    },
+  )
+  app.provide(APPHUB_ZONE_CONTEXT_KEY, store.zoneContext)
+}
+
+function syncZoneContext(store) {
+  syncCoreApi(store)
+  if (store.zoneContext) {
+    store.zoneContext.refresh({ skipBootstrap: true })
+  }
+}
+
+function ensureModuleState(app, store) {
+  if (store.windowManager && store.appStore) {
+    return
+  }
+
+  store.windowManager = createWindowManagerState()
+  store.appStore = createAppStoreState()
+  provideWindowManager(app, store.windowManager)
+  provideAppStore(app, store.appStore)
+}
+
+/**
+ * Install App Hub — Windows desktop shell + modular apps (App Store default).
+ * Returns host API facade — keep in host app code, not publisher apps.
+ */
+export function installAppHubModule(vueApp, options = {}) {
+  let store = getAppHubStore(vueApp)
+
+  if (store) {
+    applyModuleOptions(store, options)
+    ensureModuleInfrastructure(vueApp, store)
+    if (store.options.originBootstrapLoading || store.options.originBlocked) {
+      disableModuleServices(store)
+    } else {
+      enableModuleApi(store)
+    }
+    return store.facade
+  }
+
+  const facade = createApiFacade()
+  const moduleOptions = reactive(buildPublicOptions(options))
+  applyOriginSafety(moduleOptions, options)
+  const credentials = buildCredentials(options)
+
+  store = {
+    app: vueApp,
+    facade,
+    options: moduleOptions,
+    credentials,
+    coreApi: null,
+    zoneContext: null,
+    windowManager: null,
+    appStore: null,
+  }
+  registerAppHubStore(vueApp, store)
+
+  vueApp.provide('apphubOptions', moduleOptions)
+  vueApp.component('AppHubDesktop', AppHubDesktop)
+  vueApp.component('AppHubRunner', AppHubRunner)
+
+  ensureModuleInfrastructure(vueApp, store)
+  void startBootstrapSession(store)
+
+  return facade
+}
+
+/** Whether installAppHubModule has been called for this Vue app instance. */
+export function isAppHubModuleInstalled(vueApp) {
+  return vueApp != null && getAppHubStore(vueApp) != null
+}
+
+export { useAppHubHostApi } from './composables/useAppHubHostApi.js'
+export { useAppHubZoneContext } from './composables/useAppHubZoneContext.js'
+export { createAppHubApi } from './api/index.js'
+export { createCoreApi } from './api/coreApi.js'
+export { AppHubDesktop } from './modules/desktop/index.js'
+export {
+  createDesktopNotificationsState,
+  useDesktopNotifications,
+  AppHubDesktopNotifications,
+  parseApiError,
+} from './modules/notifications/index.js'
+export { AppHubRunner } from './modules/runner/index.js'
+export { resolveLang } from './i18n/resolveLang.js'
+export { resolveTheme, normalizeTheme, isThemeLocked } from './i18n/resolveTheme.js'
+export { t } from './i18n/index.js'
+export {
+  evaluateOriginSafety,
+  isEmbeddedFrame,
+  isLocalDevOrigin,
+  parseOriginsFromBootstrap,
+  resolveEffectiveOrigins,
+  ORIGIN_UNSAFE_SAME_ORIGIN_EMBED,
+  ORIGIN_UNSAFE_NOT_CONFIGURED,
+  ORIGIN_UNSAFE_WRONG_ORIGIN,
+  ORIGIN_UNSAFE_RUNTIME_NOT_CONFIGURED,
+  ORIGIN_UNSAFE_RUNTIME_SAME_ORIGIN,
+  resolveRuntimeApiBase,
+} from './utils/originSafety.js'
+
+/** True when installAppHubModule blocked due to unsafe same-origin embed. */
+export function isAppHubOriginBlocked(vueApp) {
+  const store = getAppHubStore(vueApp)
+  return store?.options?.originBlocked === true
+}
+export * from './modules/app-store/index.js'
+export * from './modules/window-manager/index.js'
+export * from './modules/runner/index.js'

package/src/moduleStore.js

@@ -0,0 +1,10 @@
+/** Private per-Vue-app store — not exposed via provide/inject. */
+const installedApps = new WeakMap()
+
+export function registerAppHubStore(app, store) {
+  installedApps.set(app, store)
+}
+
+export function getAppHubStore(app) {
+  return app != null ? installedApps.get(app) ?? null : null
+}

package/src/modules/app-store/components/AppHubAppStoreApp.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="apphub-store">
+    <header class="apphub-store__header">
+      <h2 class="apphub-store__title">
+        {{ settingsOpen ? labels.settings_title : labels.app_store_title }}
+      </h2>
+      <div class="apphub-store__toolbar">
+        <button
+          type="button"
+          class="apphub-store__settings-btn"
+          :class="{ 'apphub-store__settings-btn--active': settingsOpen }"
+          :title="settingsOpen ? labels.settings_close : labels.settings"
+          @click="settingsOpen = !settingsOpen"
+        >
+          <svg v-if="settingsOpen" class="apphub-store__settings-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+            />
+          </svg>
+          <svg v-else class="apphub-store__settings-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
+            />
+          </svg>
+        </button>
+      </div>
+    </header>
+
+    <div class="apphub-store__content">
+      <AppHubAppStoreSettingsPanel
+        v-if="settingsOpen"
+        :root-app="rootApp"
+        @refreshed="reloadCatalog"
+      />
+      <div v-else ref="scrollRoot" class="apphub-store__panel apphub-store__panel--scroll">
+        <input
+          v-model="catalog.search"
+          type="search"
+          class="apphub-store__search"
+          :placeholder="labels.app_store_search"
+        />
+
+        <p v-if="catalog.loading && !catalog.items.length" class="apphub-store__msg">
+          {{ labels.app_store_loading }}
+        </p>
+        <p v-else-if="catalog.error === 'permission_denied'" class="apphub-store__msg apphub-store__msg--error">
+          {{ labels.app_store_permission_denied }}
+        </p>
+        <p v-else-if="catalog.error === 'load_failed'" class="apphub-store__msg apphub-store__msg--error">
+          {{ labels.app_store_load_error }}
+        </p>
+        <p v-else-if="catalog.error === 'no_api'" class="apphub-store__msg apphub-store__msg--warn">
+          {{ labels.app_store_no_api }}
+        </p>
+
+        <div
+          v-else-if="!catalog.loading && !appStore.filteredStoreApps.length"
+          class="apphub-store__empty"
+        >
+          <p>{{ labels.app_store_empty }}</p>
+          <p
+            v-if="catalog.loaded && zone?.state?.selectedZoneId && !zone?.state?.viewAllZones"
+            class="apphub-store__empty-hint"
+          >
+            {{ labels.app_store_empty_zone_hint }}
+          </p>
+        </div>
+
+        <template v-else-if="appStore.filteredStoreApps.length">
+          <ul class="apphub-store__grid">
+            <li
+              v-for="app in appStore.filteredStoreApps"
+              :key="app.slug"
+              class="apphub-store__card"
+              :class="{ 'apphub-store__card--offline': app.status === 'disabled' }"
+            >
+              <AppHubAppStoreCard
+                :app="app"
+                :labels="labels"
+                :installed="appStore.isInstalled(app.slug)"
+                :installed-version="installedVersionFor(app.slug)"
+                :can-install="appStore.canInstall(app)"
+                @install="onInstall"
+                @update="onUpdate"
+                @uninstall="onUninstall"
+              />
+            </li>
+          </ul>
+          <p v-if="catalog.loadingMore" class="apphub-catalog-footer">{{ labels.app_store_loading_more }}</p>
+          <div ref="scrollSentinel" class="apphub-catalog-sentinel" aria-hidden="true" />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue'
+import {
+  getHostApiForApp,
+  isBackendReadyForApp,
+  resolveRootApp,
+} from '../../../composables/useAppHubHostApi.js'
+import { useAppHubZoneContext } from '../../../composables/useAppHubZoneContext.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import { CATALOG_MODE_STORE } from '../constants/catalogModes.js'
+import { useCatalogInfiniteScroll } from '../composables/useCatalogInfiniteScroll.js'
+import { useAppStore } from '../composables/useAppStore.js'
+import AppHubAppStoreCard from './AppHubAppStoreCard.vue'
+import AppHubAppStoreSettingsPanel from './AppHubAppStoreSettingsPanel.vue'
+
+const props = defineProps({
+  getInstalledVersion: { type: Function, default: null },
+  onInstalled: { type: Function, default: null },
+  onUpdateApp: { type: Function, default: null },
+  onUninstalled: { type: Function, default: null },
+})
+
+const settingsOpen = ref(false)
+const appStore = useAppStore()
+const catalog = appStore.catalogs.store
+const rootApp = resolveRootApp(getCurrentInstance())
+const zone = useAppHubZoneContext()
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+
+const labels = computed(() => ({
+  app_store_title: t('app_store_title', lang.value),
+  app_store_search: t('app_store_search', lang.value),
+  app_store_install: t('app_store_install', lang.value),
+  app_store_empty: t('app_store_empty', lang.value),
+  app_store_empty_zone_hint: t('app_store_empty_zone_hint', lang.value),
+  app_store_loading: t('app_store_loading', lang.value),
+  app_store_loading_more: t('app_store_loading_more', lang.value),
+  app_store_load_error: t('app_store_load_error', lang.value),
+  app_store_permission_denied: t('app_store_permission_denied', lang.value),
+  app_store_no_api: t('app_store_no_api', lang.value),
+  app_store_unavailable: t('app_store_unavailable', lang.value),
+  app_store_status_draft: t('app_store_status_draft', lang.value),
+  app_store_status_offline: t('app_store_status_offline', lang.value),
+  app_store_installed: t('app_store_installed', lang.value),
+  app_store_uninstall: t('app_store_uninstall', lang.value),
+  app_store_update: t('app_store_update', lang.value),
+  app_store_installed_version: t('app_store_installed_version', lang.value),
+  settings: t('app_store_settings_btn', lang.value),
+  settings_title: t('app_store_settings_title', lang.value),
+  settings_close: t('app_store_settings_close', lang.value),
+}))
+
+function hostApiOptions() {
+  return {
+    backendReady: isBackendReadyForApp(rootApp),
+    mode: CATALOG_MODE_STORE,
+  }
+}
+
+async function reloadCatalog() {
+  if (!rootApp) return
+  await appStore.loadCatalog(getHostApiForApp(rootApp), hostApiOptions())
+}
+
+async function loadMore() {
+  if (!rootApp) return
+  await appStore.loadMoreCatalog(getHostApiForApp(rootApp), CATALOG_MODE_STORE, hostApiOptions())
+}
+
+const { rootRef: scrollRoot, sentinelRef: scrollSentinel } = useCatalogInfiniteScroll({
+  canLoadMore: () => catalog.hasMore && !catalog.loading && !catalog.loadingMore,
+  onLoadMore: loadMore,
+})
+
+function installedVersionFor(slug) {
+  return props.getInstalledVersion?.(slug) ?? null
+}
+
+async function onInstall(app) {
+  if (!appStore.installApp(app.slug)) return
+  await props.onInstalled?.(app)
+}
+
+async function onUpdate(app) {
+  await props.onUpdateApp?.(app)
+}
+
+async function onUninstall(app) {
+  if (!appStore.uninstallApp(app.slug)) return
+  await props.onUninstalled?.(app)
+}
+
+onMounted(() => {
+  if (!catalog.loaded) reloadCatalog()
+})
+
+watch(
+  () => moduleOptions?.hasToken,
+  (hasToken) => {
+    if (hasToken && !catalog.loaded) reloadCatalog()
+  },
+)
+
+watch(
+  () => [zone?.state?.selectedZoneId, zone?.state?.viewAllZones],
+  () => {
+    if (moduleOptions?.hasToken) reloadCatalog()
+  },
+)
+</script>