@synopackageland/templates 0.0.0-stage → 0.9.1

package/templates/native-go-vue/frontend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "native-dsm-vue-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@lucide/vue": "1.48.0",
+    "@synopackageland/sdk": "0.9.1",
+    "@synopackageland/ui": "0.9.0",
+    "vue": "3.5.43"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "6.0.9",
+    "vite": "7.3.6",
+    "typescript": "5.9.3",
+    "vue-tsc": "3.3.11",
+    "vitest": "4.1.11",
+    "jsdom": "27.4.0"
+  }
+}

package/templates/native-go-vue/frontend/src/App.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
+import {AppRoot, ConfigProvider, Button, Callout, Form, FormActions, FormItem, SettingsSection, Textarea} from '@synopackageland/ui'
+import type {AppStatus, Context, ShellPage} from '@synopackageland/sdk'
+import {AppShell, BackgroundPanel, FilesPage, LoginPage, PortalSettings, createSession, shellPages, uiLocale} from '@synopackageland/sdk/vue'
+import {appCopy} from './i18n'
+import CapabilityPanels from './CapabilityPanels.vue'
+const props = defineProps<{ctx: Context}>()
+const login = createSession(props.ctx)
+const copy = computed(() => appCopy(props.ctx.locale))
+const app = ref<AppStatus>()
+const busy = ref(false)
+const error = ref('')
+const notice = ref('')
+const text = ref('')
+let disposed = false
+let unsubscribe: (() => void) | undefined
+// The CLI substitutes this only for a declared package-account background worker.
+const backgroundEnabled = (('__BACKGROUND_ENABLED__') as string) === 'true'
+const page = ref<ShellPage>('status')
+const pages = computed(() => shellPages({background:backgroundEnabled}))
+const subtitle = computed(() => app.value ? `${app.value.package} · ${app.value.user} · ${app.value.version}` : undefined)
+function message(e: unknown) {
+ const code = (e as {code?: string})?.code || 'request_failed'
+ const errors = copy.value.errors as Record<string, string>
+ return (code !== 'request_failed' && errors[code]) || errors.request_failed!.replace('{code}', code)
+}
+async function refresh() {
+ if(disposed || busy.value || (login.enabled.value && !login.subject.value)) return
+ busy.value = true; error.value = ''
+ try {
+  const a = await login.call<AppStatus>('app.status')
+  if(!disposed) app.value = a
+  if(a.admin) {const greeting = await login.call<{text:string}>('greeting.get'); if(!disposed) text.value = greeting.text}
+ } catch(e) {if(!disposed) error.value = message(e)} finally {if(!disposed) busy.value=false}
+}
+async function save() {
+ if(disposed || busy.value) return
+ busy.value = true; error.value='';notice.value=''
+ try {await login.call('greeting.set',{text:text.value});if(!disposed) notice.value=copy.value.saved}
+ catch(e) {if(!disposed) error.value=message(e)} finally {if(!disposed) busy.value=false}
+}
+watch(login.subject, (subject, previous) => {
+ if(!subject) {app.value=undefined;text.value='';notice.value='';error.value=''}
+ else if((!previous || previous.user!==subject.user)) void refresh()
+})
+async function signOut() {
+ try {await login.logout()} catch(e) {if(!disposed) error.value=message(e)}
+}
+onMounted(async()=>{
+ unsubscribe = props.ctx.reopen(()=>{if(!disposed) void refresh()})
+ await login.start()
+ if((!login.enabled.value || login.subject.value)) await refresh()
+})
+onUnmounted(()=>{disposed=true;unsubscribe?.();login.dispose();text.value=''})
+</script>
+
+<template>
+ <AppRoot modal-scope="app" style="height: 100%">
+  <ConfigProvider :locale="uiLocale(ctx.locale)">
+  <p v-if="!login.ready.value" role="status">{{ copy.checking }}</p>
+  <LoginPage v-else-if="login.enabled.value && !login.subject.value" :session="login" :locale="ctx.locale" />
+  <AppShell v-else v-model="page" :locale="ctx.locale" :pages="pages" :description="subtitle">
+   <template #actions><Button variant="secondary" :disabled="busy" @click="refresh">{{ copy.refresh }}</Button><Button v-if="login.enabled.value" variant="secondary" :disabled="busy" @click="signOut">{{ copy.signOut }}</Button></template>
+   <div class="integration-app" :aria-busy="busy" :aria-label="copy.settings">
+    <p v-if="busy" role="status">{{ copy.loading }}</p>
+    <Callout v-if="error" tone="danger" :title="copy.actionRequired"><span role="alert">{{ error }}</span></Callout>
+    <p v-if="notice" role="status">{{ notice }}</p>
+    <div data-page="status" v-show="page==='status'">
+     <SettingsSection :title="copy.statusTitle" :collapsible="false">
+      <p v-if="app">{{ app.package }} · {{ app.user }} · {{ app.version }}</p>
+      <p v-else-if="error" role="status">{{ copy.statusError }}</p>
+     </SettingsSection>
+     <PortalSettings v-if="ctx.portal && app" :key="app.user" :portal="ctx.portal" />
+     <SettingsSection v-if="app?.admin" :title="copy.greeting" :collapsible="false">
+      <Form @submit.prevent="save"><FormItem :label="copy.greeting"><Textarea v-model="text" :disabled="busy" /></FormItem>
+       <FormActions><Button variant="primary" :disabled="busy || !text.trim()" @click="save">{{ copy.save }}</Button></FormActions>
+      </Form>
+     </SettingsSection>
+    </div>
+    <CapabilityPanels v-if="app" :key="app.user" :ctx="ctx" :admin="app.admin" />
+    <FilesPage v-if="page==='status'" :ctx="ctx" />
+    <div data-page="background" v-show="page==='background'">
+     <BackgroundPanel v-if="backgroundEnabled && app" :key="app.user" :ctx="ctx" />
+    </div>
+   </div>
+  </AppShell>
+  </ConfigProvider>
+ </AppRoot>
+</template>

package/templates/native-go-vue/frontend/src/CapabilityPanels.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type {Context} from '@synopackageland/sdk'
+import {ExecutorSettings} from '@synopackageland/sdk/vue'
+defineProps<{ctx:Context;admin:boolean}>()
+</script>
+<template><ExecutorSettings v-if="ctx.executor" :admin="admin" :locale="ctx.locale" /></template>

package/templates/native-go-vue/frontend/src/i18n/de.json

@@ -0,0 +1,20 @@
+{
+  "checking": "Sitzung wird geprüft…",
+  "refresh": "Aktualisieren",
+  "signOut": "Abmelden",
+  "settings": "Paketeinstellungen",
+  "loading": "Paketdaten werden geladen…",
+  "actionRequired": "Aktion erforderlich",
+  "statusTitle": "Paketstatus",
+  "statusError": "Der Status konnte nicht geladen werden. Aktualisieren Sie die Ansicht und versuchen Sie es erneut.",
+  "greeting": "Begrüßung",
+  "save": "Speichern",
+  "saved": "Begrüßung gespeichert.",
+  "errors": {
+    "session_required": "Ihre DSM-Sitzung ist abgelaufen. Melden Sie sich erneut an.",
+    "admin_required": "Diese Aktion muss ein DSM-Administrator ausführen.",
+    "app_privilege_denied": "Die DSM-Anwendungsberechtigungen erlauben diesem Konto nicht, diese App zu verwenden.",
+    "auth_unavailable": "Die DSM-Authentifizierung ist nicht verfügbar. Aktualisieren Sie die Ansicht und versuchen Sie es erneut.",
+    "request_failed": "Anfrage fehlgeschlagen ({code}). Aktualisieren Sie die Ansicht und versuchen Sie es erneut."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/en.json

@@ -0,0 +1,20 @@
+{
+  "checking": "Checking session…",
+  "refresh": "Refresh",
+  "signOut": "Sign out",
+  "settings": "Package settings",
+  "loading": "Loading package data…",
+  "actionRequired": "Action required",
+  "statusTitle": "Package status",
+  "statusError": "Status could not be loaded. Refresh to try again.",
+  "greeting": "Greeting",
+  "save": "Save",
+  "saved": "Greeting saved.",
+  "errors": {
+    "session_required": "Your DSM session expired. Sign in again.",
+    "admin_required": "A DSM administrator must perform this action.",
+    "app_privilege_denied": "DSM Application Privileges do not allow this account to use this app.",
+    "auth_unavailable": "DSM authentication is unavailable. Refresh to try again.",
+    "request_failed": "Request failed ({code}). Refresh and try again."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/es.json

@@ -0,0 +1,20 @@
+{
+  "checking": "Comprobando la sesión…",
+  "refresh": "Actualizar",
+  "signOut": "Cerrar sesión",
+  "settings": "Configuración del paquete",
+  "loading": "Cargando datos del paquete…",
+  "actionRequired": "Acción necesaria",
+  "statusTitle": "Estado del paquete",
+  "statusError": "No se pudo cargar el estado. Actualice e inténtelo de nuevo.",
+  "greeting": "Saludo",
+  "save": "Guardar",
+  "saved": "Saludo guardado.",
+  "errors": {
+    "session_required": "Su sesión de DSM ha caducado. Vuelva a iniciar sesión.",
+    "admin_required": "Un administrador de DSM debe realizar esta acción.",
+    "app_privilege_denied": "Los privilegios de aplicación de DSM no permiten que esta cuenta use esta aplicación.",
+    "auth_unavailable": "La autenticación de DSM no está disponible. Actualice e inténtelo de nuevo.",
+    "request_failed": "La solicitud falló ({code}). Actualice e inténtelo de nuevo."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/fr.json

@@ -0,0 +1,20 @@
+{
+  "checking": "Vérification de la session…",
+  "refresh": "Actualiser",
+  "signOut": "Se déconnecter",
+  "settings": "Paramètres du paquet",
+  "loading": "Chargement des données du paquet…",
+  "actionRequired": "Action requise",
+  "statusTitle": "État du paquet",
+  "statusError": "Impossible de charger l’état. Actualisez et réessayez.",
+  "greeting": "Message d’accueil",
+  "save": "Sauvegarder",
+  "saved": "Message d’accueil enregistré.",
+  "errors": {
+    "session_required": "Votre session DSM a expiré. Reconnectez-vous.",
+    "admin_required": "Un administrateur DSM doit effectuer cette action.",
+    "app_privilege_denied": "Les privilèges d’application DSM n’autorisent pas ce compte à utiliser cette application.",
+    "auth_unavailable": "L’authentification DSM n’est pas disponible. Actualisez et réessayez.",
+    "request_failed": "La requête a échoué ({code}). Actualisez et réessayez."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/it.json

@@ -0,0 +1,20 @@
+{
+  "checking": "Verifica della sessione…",
+  "refresh": "Aggiorna",
+  "signOut": "Disconnetti",
+  "settings": "Impostazioni del pacchetto",
+  "loading": "Caricamento dei dati del pacchetto…",
+  "actionRequired": "Azione richiesta",
+  "statusTitle": "Stato del pacchetto",
+  "statusError": "Impossibile caricare lo stato. Aggiornare e riprovare.",
+  "greeting": "Saluto",
+  "save": "Salva",
+  "saved": "Saluto salvato.",
+  "errors": {
+    "session_required": "La sessione DSM è scaduta. Accedere di nuovo.",
+    "admin_required": "Questa azione deve essere eseguita da un amministratore DSM.",
+    "app_privilege_denied": "I privilegi delle applicazioni DSM non consentono a questo account di usare questa app.",
+    "auth_unavailable": "L’autenticazione DSM non è disponibile. Aggiornare e riprovare.",
+    "request_failed": "Richiesta non riuscita ({code}). Aggiornare e riprovare."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/ja.json

@@ -0,0 +1,20 @@
+{
+  "checking": "セッションを確認しています…",
+  "refresh": "最新の情報に更新",
+  "signOut": "サインアウト",
+  "settings": "パッケージ設定",
+  "loading": "パッケージデータを読み込み中…",
+  "actionRequired": "対応が必要です",
+  "statusTitle": "パッケージの状態",
+  "statusError": "状態を読み込めませんでした。最新の情報に更新してから、もう一度お試しください。",
+  "greeting": "あいさつ",
+  "save": "保存",
+  "saved": "あいさつを保存しました。",
+  "errors": {
+    "session_required": "DSM セッションの有効期限が切れました。もう一度サインインしてください。",
+    "admin_required": "この操作は DSM 管理者が行う必要があります。",
+    "app_privilege_denied": "DSM のアプリケーション権限により、このアカウントはこのアプリを使用できません。",
+    "auth_unavailable": "DSM 認証を利用できません。最新の情報に更新してから、もう一度お試しください。",
+    "request_failed": "リクエストに失敗しました（{code}）。最新の情報に更新してから、もう一度お試しください。"
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/ko.json

@@ -0,0 +1,20 @@
+{
+  "checking": "세션 확인 중…",
+  "refresh": "새로 고침",
+  "signOut": "로그아웃",
+  "settings": "패키지 설정",
+  "loading": "패키지 데이터를 불러오는 중…",
+  "actionRequired": "조치 필요",
+  "statusTitle": "패키지 상태",
+  "statusError": "상태를 불러올 수 없습니다. 새로 고친 후 다시 시도하십시오.",
+  "greeting": "인사말",
+  "save": "저장",
+  "saved": "인사말이 저장되었습니다.",
+  "errors": {
+    "session_required": "DSM 세션이 만료되었습니다. 다시 로그인하십시오.",
+    "admin_required": "이 작업은 DSM 관리자가 수행해야 합니다.",
+    "app_privilege_denied": "DSM 응용 프로그램 권한에서 이 계정의 앱 사용이 허용되지 않습니다.",
+    "auth_unavailable": "DSM 인증을 사용할 수 없습니다. 새로 고친 후 다시 시도하십시오.",
+    "request_failed": "요청이 실패했습니다({code}). 새로 고친 후 다시 시도하십시오."
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/zh-CN.json

@@ -0,0 +1,20 @@
+{
+  "checking": "正在检查登录状态…",
+  "refresh": "刷新",
+  "signOut": "注销",
+  "settings": "套件设置",
+  "loading": "正在加载套件数据…",
+  "actionRequired": "需要处理",
+  "statusTitle": "套件状态",
+  "statusError": "无法加载状态，请刷新后重试。",
+  "greeting": "问候语",
+  "save": "保存",
+  "saved": "问候语已保存。",
+  "errors": {
+    "session_required": "DSM 登录已过期，请重新登录。",
+    "admin_required": "此操作必须由 DSM 管理员执行。",
+    "app_privilege_denied": "DSM 应用程序权限不允许此帐户使用此 App。",
+    "auth_unavailable": "DSM 验证暂时不可用，请刷新后重试。",
+    "request_failed": "请求失败（{code}），请刷新后重试。"
+  }
+}

package/templates/native-go-vue/frontend/src/i18n/zh-TW.json

@@ -0,0 +1,20 @@
+{
+  "checking": "正在檢查登入狀態…",
+  "refresh": "重新整理",
+  "signOut": "登出",
+  "settings": "套件設定",
+  "loading": "正在載入套件資料…",
+  "actionRequired": "需要處理",
+  "statusTitle": "套件狀態",
+  "statusError": "無法載入狀態，請重新整理後再試。",
+  "greeting": "問候語",
+  "save": "儲存",
+  "saved": "問候語已儲存。",
+  "errors": {
+    "session_required": "DSM 登入已逾時，請重新登入。",
+    "admin_required": "此操作須由 DSM 管理員執行。",
+    "app_privilege_denied": "DSM 應用程式權限不允許此帳號使用這個 App。",
+    "auth_unavailable": "DSM 驗證目前無法使用，請重新整理後再試。",
+    "request_failed": "要求失敗（{code}），請重新整理後再試。"
+  }
+}

package/templates/native-go-vue/frontend/src/i18n.ts

@@ -0,0 +1,13 @@
+import en from './i18n/en.json'
+import zhTW from './i18n/zh-TW.json'
+import zhCN from './i18n/zh-CN.json'
+import ja from './i18n/ja.json'
+import ko from './i18n/ko.json'
+import de from './i18n/de.json'
+import fr from './i18n/fr.json'
+import es from './i18n/es.json'
+import it from './i18n/it.json'
+import {uiLocale} from '@synopackageland/sdk/vue'
+export type AppCopy=typeof en
+export const appCatalogs:Record<string,AppCopy>={en,'zh-TW':zhTW,'zh-CN':zhCN,ja,ko,de,fr,es,it}
+export function appCopy(locale:string):AppCopy{return appCatalogs[uiLocale(locale)]!}

package/templates/native-go-vue/frontend/src/main.ts

@@ -0,0 +1,33 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+import type {Context} from '@synopackageland/sdk'
+import {ExecutorSetupKey} from '@synopackageland/sdk/vue'
+import '@synopackageland/ui/themes/dsm7-embedded.css'
+import '@synopackageland/sdk/vue/style.css'
+import './style.css'
+
+let mountSequence = 0
+export function mount(root: HTMLElement, ctx: Context) {
+ const app = createApp(App, {ctx})
+ app.provide(ExecutorSetupKey, ctx.executor ?? {
+  async status() {return {state: 'unsupported'}},
+  async authorize() {return {state: 'unsupported'}},
+  async control() {return {state: 'unsupported'}},
+ })
+ // Include the generated package ID, an instance counter and randomness even
+ // across separately loaded bundles. getRandomValues also works on DSM HTTP.
+ app.config.idPrefix = `__PACKAGE__-${++mountSequence}-${crypto.getRandomValues(new Uint32Array(4)).join('-')}`
+ const hadRootClass = root.classList.contains('dsmapp-vue-root')
+ root.classList.add('dsmapp-vue-root')
+ app.mount(root)
+ return {unmount() {app.unmount(); if(!hadRootClass) root.classList.remove('dsmapp-vue-root')}}
+}
+// Register with the existing per-package DSM window loader. Never share a
+// singleton app or user/session state between different mount calls.
+const script = document.currentScript as HTMLScriptElement | null
+const packageID = script?.getAttribute('data-package')
+const host = window as unknown as {DsmPackageApps: Record<string, {mount: typeof mount}>}
+if (packageID) {
+ host.DsmPackageApps = host.DsmPackageApps || {}
+ host.DsmPackageApps[packageID] = {mount}
+}

package/templates/native-go-vue/frontend/src/style.css

@@ -0,0 +1,27 @@
+.dsmapp-vue-root {height: 100%; min-height: 0; width: 100%; overflow: hidden;}
+[data-ui-app] .integration-app {padding: 0 var(--ui-page-padding-x, 16px); color: var(--ui-text); font-family: var(--ui-font-sans); font-size: 13px; line-height: 1.5;}
+[data-ui-app] .integration-app section {margin-top: var(--ui-space-4, 16px);}
+[data-ui-app] .integration-status h2 {font-size: 15px; font-weight: 600; margin: 0;}
+[data-ui-app] .integration-status p {margin: 6px 0;}
+[data-ui-app] .integration-status dl {display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0;}
+[data-ui-app] .integration-status dt, [data-ui-app] .integration-help {color: var(--ui-text);}
+[data-ui-app] .integration-status dd {margin: 0;}
+[data-ui-app] .integration-actions {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;}
+[data-ui-app] .integration-notice {color: var(--ui-text);}
+[data-ui-app] .nas-summary {display: grid; grid-template-columns: minmax(6ch, max-content) minmax(0, 1fr); gap: var(--ui-space-2, 8px) var(--ui-space-4, 16px);}
+[data-ui-app] .nas-summary dd {margin: 0; overflow-wrap: anywhere;}
+[data-ui-app] .nas-breadcrumb {display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin-block: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-browser {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-tree {display: none;}
+[data-ui-app] .nas-folder-list {min-width: 0; overflow: auto;}
+[data-ui-app] .nas-folder-name {white-space: normal; overflow-wrap: anywhere; text-align: start;}
+[data-ui-app] .nas-folder-action {white-space: normal; max-width: 100%;}
+[data-ui-app] .nas-picker {max-height: 55vh; overflow: auto; overflow-wrap: anywhere;}
+[data-ui-app] .nas-grants {list-style: none; padding: 0;}
+[data-ui-app] .nas-grants > li {padding-block: var(--ui-space-4, 16px); border-bottom: 1px solid var(--ui-border);}
+[data-ui-app] .nas-grant-heading {display: flex; align-items: start; justify-content: space-between; gap: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-grant-heading strong {overflow-wrap: anywhere;}
+@media (min-width: 960px) {
+ [data-ui-app] .nas-browser {grid-template-columns: minmax(8ch, 1fr) minmax(0, 3fr);}
+ [data-ui-app] .nas-tree {display: block; overflow: auto;}
+}

package/templates/native-go-vue/frontend/test/apps.test.ts

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import {expect,test,vi} from 'vitest'
+import {nextTick} from 'vue'
+import {mount} from '../src/main'
+import type {Context} from '@synopackageland/sdk'
+async function settle(){for(let i=0;i<16;i++){await Promise.resolve();await nextTick()}}
+function fixture(id:string){
+ const reopen:Array<()=>void>=[]
+ const call=vi.fn(async(method:string)=>{
+  if(method==='app.status')return {package:id,version:'1',user:'admin',admin:true}
+  if(method==='greeting.get')return {text:'Hello '+id}
+  if(method==='greeting.set')return {}
+  throw {code:'unknown_method'}
+ })
+ const ctx={locale:'en',call,reopen(fn:()=>void){reopen.push(fn);return ()=>{}}} as Context
+ const root=document.createElement('div');document.body.append(root)
+ const app=mount(root,ctx)
+ return {root,app,call,reopen,ctx,close(){app.unmount();root.remove()}}
+}
+test('independent mounts load and save their own package greeting',async()=>{
+ const a=fixture('Alpha'),b=fixture('Beta')
+ try{
+  await settle()
+  expect(a.root.textContent).toContain('Alpha');expect(a.root.textContent).not.toContain('Beta')
+  expect((a.root.querySelector('textarea') as HTMLTextAreaElement).value).toBe('Hello Alpha')
+  ;[...a.root.querySelectorAll('button')].find(n=>n.textContent==='Save')!.click();await settle()
+  expect(a.call).toHaveBeenCalledWith('greeting.set',{text:'Hello Alpha'})
+  expect(b.call.mock.calls.some(([method])=>method==='greeting.set')).toBe(false)
+  const count=b.call.mock.calls.length;a.reopen.forEach(fn=>fn());await settle()
+  expect(b.call.mock.calls).toHaveLength(count)
+  a.app.unmount();const stopped=a.call.mock.calls.length;a.reopen.forEach(fn=>fn());await settle()
+  expect(a.call.mock.calls).toHaveLength(stopped)
+ }finally{a.close();b.close()}
+})
+test('failed status loading offers a retry and releases the mounting class',async()=>{
+ const f=fixture('Failure')
+ try{
+  await settle();f.call.mockRejectedValue({code:'auth_unavailable'});f.reopen.forEach(fn=>fn());await settle()
+  expect(f.root.textContent).toContain('DSM authentication is unavailable')
+  expect(f.root.querySelector('button')?.disabled).toBe(false)
+  f.app.unmount();expect(f.root.classList.contains('dsmapp-vue-root')).toBe(false)
+ }finally{f.close()}
+})
+test('a portal app shows the Application Portal section on the status page',async()=>{
+ const without=fixture('Plain')
+ const f=fixture('Portal')
+ try{
+  await settle();expect(without.root.textContent).not.toContain('Application Portal')
+  f.app.unmount()
+  const status={state:'active',alias:'portal',url:'https://nas.example/portal/',canManage:false,controlPanel:false,defaultAlias:'portal'} as const
+  f.ctx.portal={messages:{title:'Application Portal',link:'Direct link:'},status:vi.fn(async()=>status),apply:vi.fn(),disable:vi.fn(),openControlPanel:vi.fn(),mountPanel:vi.fn()}
+  const app=mount(f.root,f.ctx);await settle()
+  expect(f.root.textContent).toContain('Application Portal')
+  expect(f.root.querySelector('a[href="https://nas.example/portal/"]')).not.toBeNull()
+  app.unmount()
+ }finally{without.close();f.root.remove()}
+})

package/templates/native-go-vue/frontend/test/native-controls.test.ts

@@ -0,0 +1,27 @@
+import {readdirSync,readFileSync} from 'node:fs'
+import {join} from 'node:path'
+import {expect,test} from 'vitest'
+const root=join(__dirname,'../src')
+const sources=(dir:string):string[]=>readdirSync(dir,{withFileTypes:true}).flatMap(e=>e.isDirectory()?sources(join(dir,e.name)):e.name.endsWith('.vue')?[join(dir,e.name)]:[])
+const template=(file:string)=>readFileSync(file,'utf8').replace(/<script[\s\S]*?<\/script>/g,'').replace(/<style[\s\S]*?<\/style>/g,'')
+const uses=(file:string,tag:string)=>new RegExp(`<${tag}[\\s>/]`).test(template(file))
+// The template ships @synopackageland/ui controls only; a native form control
+// means a missing UI component, which is a UI gap to report, not to paper over.
+test.each(['select','option','textarea','label','input','a'])('no vue template renders a native <%s>',tag=>{
+ expect(sources(root).filter(file=>uses(file,tag))).toEqual([])
+})
+// Form direction and the control id come from the UI: `direction="auto"` stacks labels in a
+// narrow package window, and a control inside a FormItem binds its id/ARIA by itself.
+test('FormItem controls rely on the UI auto layout and id binding',()=>{
+ const items=sources(root).filter(file=>uses(file,'FormItem'))
+ expect(items.length).toBeGreaterThan(0)
+ expect(items.filter(file=>/direction="vertical"|field\.controlId|#default="\{field\}"/.test(template(file)))).toEqual([])
+})
+// UI built-in text follows the Provider locale (nine locales), so every app root sets it once and no
+// component repeats a per-control locale or download label.
+test('app roots set the UI locale once and components do not translate UI text themselves',()=>{
+ const roots=sources(root).filter(file=>uses(file,'AppRoot'))
+ expect(roots.length).toBeGreaterThan(0)
+ expect(roots.filter(file=>!uses(file,'ConfigProvider'))).toEqual([])
+ expect(sources(root).filter(file=>/download-label|external-label|<FilePicker[^>]*:locale=/.test(template(file)))).toEqual([])
+})

package/templates/native-go-vue/frontend/test/shell-i18n.test.ts

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+// @vitest-environment-options {"url":"https://nas.test"}
+import {expect,test,vi} from 'vitest'
+import {nextTick} from 'vue'
+import {mount} from '../src/main'
+import type {Context} from '@synopackageland/sdk'
+import {appCopy} from '../src/i18n'
+import {identityCopy} from '@synopackageland/sdk/vue'
+async function settle(){for(let i=0;i<20;i++){await Promise.resolve();await nextTick()}}
+const buttons=(root:HTMLElement)=>[...root.querySelectorAll('button')].map(b=>b.textContent?.trim())
+function start(locale:string,call:(method:string)=>Promise<unknown>){
+ const ctx={locale,call:vi.fn(call),reopen(){return ()=>{}}} as unknown as Context
+ const root=document.createElement('div');document.body.append(root)
+ const app=mount(root,ctx)
+ return {root,close(){app.unmount();root.remove()}}
+}
+test('the status page and its errors follow the DSM language',async()=>{
+ const copy=appCopy('ger')
+ const {root,close}=start('de',async method=>{
+  if(method==='app.status')return {package:'Pkg',version:'1',user:'admin',admin:true}
+  if(method==='greeting.get')throw {code:'admin_required'}
+  throw {code:'unknown_method'}
+ })
+ try{
+  await settle()
+  expect(buttons(root)).toContain(copy.refresh)
+  expect(root.textContent).toContain(copy.statusTitle)
+  expect(root.textContent).toContain(copy.greeting)
+  expect(root.textContent).toContain(copy.errors.admin_required)
+  expect(root.querySelector('[aria-label]')?.getAttribute('aria-label')).not.toBe('Package settings')
+ }finally{close()}
+})
+test('unknown failures name the code in the DSM language',()=>{
+ expect(appCopy('ja').errors.request_failed).toContain('{code}')
+})
+test('the sign-in page and its session notices follow the DSM language',async()=>{
+ const copy=identityCopy('jpn')
+ const {root,close}=start('ja',async method=>{
+  if(method==='identity.status')return {enabled:true}
+  if(method==='identity.session')return {user:'alice',uid:'1',expiresAt:new Date(Date.now()-1000).toISOString()}
+  throw {code:'session_required'}
+ })
+ try{
+  await settle()
+  expect(root.textContent).toContain(copy.title)
+  expect(buttons(root)).toEqual(expect.arrayContaining([copy.signIn,copy.continueDSM]))
+  expect(root.querySelector('[role="status"]')?.textContent).toBe(copy.notices.expired)
+  expect(root.textContent).not.toMatch(/Sign in|Account|Password|session/)
+ }finally{close()}
+})

package/templates/native-go-vue/frontend/tsconfig.json

@@ -0,0 +1 @@
+{"compilerOptions":{"target":"ES2022","module":"ESNext","moduleResolution":"Bundler","resolveJsonModule":true,"strict":true,"lib":["ES2022","DOM"],"skipLibCheck":true,"types":["vite/client"]},"include":["src/**/*.ts","src/**/*.vue","vite.config.ts"]}

package/templates/native-go-vue/frontend/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+// @ts-expect-error The shared notice tool is a plain Node module.
+import { writeThirdPartyNotices } from './third-party-notices.mjs'
+export default defineConfig(({command}) => ({
+  plugins: [vue(), {name: 'dependency-notices', closeBundle() {writeThirdPartyNotices('.', 'dist/LICENSES', {ui: true})}}],
+  // Library mode must replace Vue dependency env guards for the DSM browser.
+  define: command === 'build' ? {'process.env.NODE_ENV': JSON.stringify('production')} : {},
+  resolve: {dedupe: ['vue']},
+  build: {lib: {entry: 'src/main.ts', formats: ['iife'], name: 'DsmVueApp', fileName: () => 'app.js'}, cssCodeSplit: false, rollupOptions: {output: {assetFileNames: 'app.[ext]'}}},
+}))

package/templates/native-go-vue/gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/