@synopackageland/cli 0.4.0 → 0.5.0

package/dist/templates/native-go-vue/frontend/src/nas/M2Files.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {computed,inject,onBeforeUnmount,onMounted,ref,watch} from 'vue'
+import {Button,Callout,DataGrid,FilePicker,Form,FormActions,FormItem,Input,Link,type FileRejection} from '@synopackageland/ui'
+import {M2_MAX_BYTES,M2ProviderKey,type M2Entry,type M2Selection} from './m2-contract'
+import {m2Copy,m2ErrorCopy} from './m2-i18n'
+import {format} from './i18n'
+import {useM2Request} from './use-m2-request'
+const props=defineProps<{selection:M2Selection;locale:string}>()
+const emit=defineEmits<{busy:[value:boolean]}>()
+const copy=computed(()=>m2Copy(props.locale)),provider=inject(M2ProviderKey)!
+const request=useM2Request(),{busy,error}=request
+watch(busy,value=>emit('busy',value),{flush:'sync'})
+const entries=ref<M2Entry[]>([]),trail=ref<string[]>([]),next=ref<number>(),metadata=ref<M2Entry>(),folderName=ref(''),files=ref<File[]>([]),notice=ref(''),download=ref(''),downloadName=ref('')
+const columns=computed(()=>[{key:'name',label:copy.value.fileKind},{key:'actions',label:copy.value.inspect}])
+const relative=computed(()=>trail.value.join('/'))
+function release(){if(download.value)URL.revokeObjectURL(download.value);download.value='';downloadName.value='';metadata.value=undefined;notice.value=''}
+async function browse(target:string[],more=false){
+ if(busy.value)return
+ release()
+ const page=await request.run(signal=>provider.list(props.selection.grantId,target.join('/'),more?next.value??0:0,signal))
+ if(page){trail.value=target;entries.value=(more?[...entries.value,...page.entries]:page.entries).slice(-200);next.value=page.nextOffset}
+ else {entries.value=[];next.value=undefined}
+}
+function child(name:string){return [...trail.value,name].join('/')}
+async function inspect(entry:M2Entry){release();const value=await request.run(signal=>provider.stat(props.selection.grantId,child(entry.name),signal));if(value)metadata.value=value}
+async function read(entry:M2Entry){
+ release()
+ const value=await request.run(signal=>provider.read(props.selection.grantId,child(entry.name),signal))
+ if(value){download.value=URL.createObjectURL(new Blob([new Uint8Array(value).buffer],{type:'application/octet-stream'}));downloadName.value=entry.name;notice.value=copy.value.readComplete}
+}
+async function create(){
+ if(busy.value||!props.selection.writable)return
+ release()
+ const done=await request.run(async signal=>{await provider.create(props.selection.grantId,relative.value,folderName.value,signal);return true})
+ if(done){folderName.value='';await browse(trail.value);notice.value=copy.value.created}
+}
+// The compact FilePicker enforces the size limit and reports the first refused file.
+function pick(selected:File[]){
+ if(busy.value)return
+ error.value=undefined;files.value=selected.slice(0,1)
+}
+function refuse(items:FileRejection[]){
+ if(busy.value)return
+ files.value=[];error.value=items.some(item=>item.reason==='size')?{code:'limit-exceeded'}:{code:'invalid-request'}
+}
+async function upload(){
+ if(busy.value||!props.selection.writable||!files.value[0])return
+ release()
+ const selected=files.value[0]!,rel=relative.value
+ const done=await request.run(async signal=>{
+  if(selected.size>M2_MAX_BYTES)throw {code:'limit-exceeded'}
+  const data=new Uint8Array(await selected.arrayBuffer())
+  if(signal.aborted)throw {code:'canceled'}
+  await provider.upload(props.selection.grantId,rel,selected.name,data,signal);return true
+ })
+ // Never retain a retryable upload after an uncertain outcome.
+ files.value=[]
+ if(done){await browse(trail.value);notice.value=copy.value.uploaded}
+}
+onMounted(()=>void browse([]))
+onBeforeUnmount(()=>{emit('busy',false);release();files.value=[];entries.value=[];trail.value=[];folderName.value=''})
+</script>
+<template>
+ <div class="m2-files" :aria-busy="busy">
+  <h3 class="nas-folder-name">{{ selection.folder }}<span v-if="relative"> / {{ relative }}</span></h3>
+  <p>{{ selection.writable ? copy.writable : copy.readOnly }}</p>
+  <p>{{ copy.limit }}</p>
+  <Callout v-if="error" tone="danger" role="alert">{{ m2ErrorCopy(error,copy) }}</Callout>
+  <p v-if="busy" role="status">{{ copy.loading }}</p>
+  <nav class="nas-breadcrumb" :aria-label="copy.directoryKind">
+   <Button v-if="trail.length" variant="secondary" :disabled="busy" @click="browse(trail.slice(0,-1))">{{ copy.back }}</Button>
+   <Button variant="secondary" :disabled="busy" @click="browse([])">{{ copy.roots }}</Button>
+   <Button variant="secondary" :disabled="busy" @click="browse(trail)">{{ copy.refresh }}</Button>
+  </nav>
+  <DataGrid :columns="columns" :rows="entries.map(e=>({...e}))" row-key="path" :footer="false" :resizable="false" :labels="{empty:copy.emptyFolder}" :loading="busy" :loading-text="copy.loading">
+   <template #cell-name="{row}"><Button v-if="row.isDir" variant="secondary" class="nas-folder-name" :disabled="busy" @click="browse([...trail,String(row.name)])">{{ format(copy.open,String(row.name)) }}</Button><span v-else class="nas-folder-name">{{ row.name }}</span></template>
+   <template #cell-actions="{row}"><div class="integration-actions">
+    <Button variant="secondary" :disabled="busy" @click="inspect(entries.find(e=>e.path===row.path)!)">{{ copy.inspect }}</Button>
+    <Button v-if="!row.isDir" variant="secondary" :disabled="busy || (typeof row.bytes==='number' && row.bytes>M2_MAX_BYTES)" @click="read(entries.find(e=>e.path===row.path)!)">{{ copy.read }}</Button>
+   </div></template>
+  </DataGrid>
+  <Button v-if="next!==undefined" variant="secondary" :disabled="busy" @click="browse(trail,true)">{{ copy.loadMore }}</Button>
+  <dl v-if="metadata" class="nas-summary" :aria-label="copy.metadata"><dt>{{ copy.metadata }}</dt><dd>{{ metadata.name }}</dd><dt>{{ copy.directoryKind }}</dt><dd>{{ metadata.isDir ? copy.directoryKind : copy.fileKind }}</dd><dt>Bytes</dt><dd>{{ metadata.bytes ?? '—' }}</dd></dl>
+  <p v-if="notice" role="status">{{ notice }}</p>
+  <Link v-if="download" :href="download" :download="downloadName">{{ copy.download }}</Link>
+  <Form v-if="selection.writable" @submit.prevent>
+   <FormItem :label="copy.folderName"><Input v-model="folderName" data-folder-name :disabled="busy" :maxlength="255" /></FormItem>
+   <FormActions><Button variant="secondary" :disabled="busy||!folderName" @click="create">{{ copy.create }}</Button></FormActions>
+   <FormItem :label="copy.uploadFile"><FilePicker :model-value="files" variant="compact" :max-size="M2_MAX_BYTES" :show-list="false" :disabled="busy" @update:model-value="pick" @rejected="refuse" /></FormItem>
+   <p v-if="files[0]" class="nas-folder-name">{{ files[0].name }}</p>
+   <FormActions><Button variant="primary" :disabled="busy||!files[0]" @click="upload">{{ copy.upload }}</Button></FormActions>
+  </Form>
+ </div>
+</template>

package/dist/templates/native-go-vue/frontend/src/nas/M2PathPicker.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {computed,inject,onBeforeUnmount,ref,watch} from 'vue'
+import {Button,Callout,Checkbox,DataGrid,Dialog,TreeView,type TreeNode} from '@synopackageland/ui'
+import {M2ProviderKey,type M2Entry,type M2Selection,type M2JobSource} from './m2-contract'
+import {m2Copy,m2ErrorCopy} from './m2-i18n'
+import {format} from './i18n'
+import {useM2Request} from './use-m2-request'
+const props=defineProps<{open:boolean;locale:string;selectFiles?:boolean;readOnly?:boolean;title?:string;consent?:string}>()
+const emit=defineEmits<{'update:open':[open:boolean];selected:[value:M2Selection];source:[value:M2JobSource];busy:[value:boolean]}>()
+const provider=inject(M2ProviderKey)!,copy=computed(()=>m2Copy(props.locale))
+const request=useM2Request(),{busy,error}=request
+watch(busy,value=>emit('busy',value),{flush:'sync'})
+const entries=ref<M2Entry[]>([]),roots=ref<TreeNode[]>([]),trail=ref<M2Entry[]>([]),chosen=ref<M2Entry>(),next=ref<number>(),writable=ref(false)
+const columns=computed(()=>[{key:'name',label:props.selectFiles?copy.value.metadata:copy.value.directoryKind},{key:'selection',label:props.selectFiles?copy.value.confirm:copy.value.choose}])
+function discard(){request.cancel();entries.value=[];roots.value=[];trail.value=[];chosen.value=undefined;next.value=undefined;writable.value=false}
+function close(){discard();emit('update:open',false)}
+async function browse(target:M2Entry[],more=false){
+ if(busy.value)return
+ const page=await request.run(signal=>provider.discovery(target.at(-1)?.path,more?next.value??0:0,signal))
+ if(page){
+  trail.value=target;chosen.value=undefined;next.value=page.nextOffset
+  // Cursor progression uses the full page, even when files are filtered out.
+  const folders=page.entries.filter(e=>e.isDir||props.selectFiles)
+  entries.value=(more?[...entries.value,...folders]:folders).slice(-200)
+  if(!target.length)roots.value=entries.value.filter(e=>e.isDir).map(e=>({id:e.path,label:e.name}))
+ }
+}
+async function confirm(){
+ if(!chosen.value)return
+ const entry={...chosen.value},segments=entry.isDir?[]:[entry.name]
+ const folder=entry.isDir?entry.path:trail.value.at(-1)?.path,write=props.readOnly?false:writable.value
+ if(!folder||(!entry.isDir&&entry.path!==`${folder}/${entry.name}`)){error.value={code:'invalid-request'};return}
+ const result=await request.run(signal=>provider.confirm(folder,write,signal))
+ if(result){emit('selected',result);emit('source',{selection:result,entry,segments});close()}
+}
+watch(()=>props.open,open=>{discard();if(open)void browse([])},{immediate:true})
+onBeforeUnmount(discard)
+</script>
+<template>
+ <Dialog :open="open" :title="title??copy.choose" :description="copy.ownPermissions" :close-label="copy.close" width="720px" @update:open="value=>{if(!value)close()}">
+  <div class="nas-picker" :aria-busy="busy">
+   <p>{{ consent??copy.consent }}</p>
+   <Callout v-if="error" tone="danger" role="alert">{{ m2ErrorCopy(error,copy) }}</Callout>
+   <p v-if="busy" role="status">{{ copy.loading }}</p>
+   <nav class="nas-breadcrumb" :aria-label="copy.directoryKind">
+    <Button v-if="trail.length" variant="secondary" :disabled="busy" @click="browse(trail.slice(0,-1))">{{ copy.back }}</Button>
+    <Button variant="secondary" :disabled="busy" @click="browse([])">{{ copy.roots }}</Button>
+    <Button v-for="(part,index) in trail" :key="part.path" variant="secondary" :disabled="busy" @click="browse(trail.slice(0,index+1))">{{ part.name }}</Button>
+   </nav>
+   <div class="nas-browser">
+    <aside class="nas-tree" :inert="busy||undefined" :aria-label="copy.roots"><TreeView :nodes="roots" :show-icons="false" @select="node=>browse([{path:node.id,name:node.label,isDir:true}])" /></aside>
+    <div class="nas-folder-list">
+     <DataGrid :columns="columns" :rows="entries.map(e=>({...e}))" row-key="path" :footer="false" :labels="{empty:copy.emptyFolder}" :resizable="false" :loading="busy" :loading-text="copy.loading">
+      <template #cell-name="{row}"><Button v-if="row.isDir" variant="secondary" class="nas-folder-name" :disabled="busy" @click="browse([...trail,{path:String(row.path),name:String(row.name),isDir:true}])">{{ format(copy.open,String(row.name)) }}</Button><span v-else>{{ row.name }} · {{ copy.fileKind }}</span></template>
+      <template #cell-selection="{row}"><Button variant="secondary" :disabled="busy" :aria-label="format(copy.select,String(row.name))" :aria-pressed="chosen?.path===row.path" @click="chosen=entries.find(e=>e.path===row.path)">{{ selectFiles?format(copy.select,String(row.name)):copy.choose }}</Button></template>
+     </DataGrid>
+     <Button v-if="next!==undefined" variant="secondary" :disabled="busy" @click="browse(trail,true)">{{ copy.loadMore }}</Button>
+     <Button v-if="trail.length" variant="secondary" :disabled="busy" @click="chosen=trail.at(-1)">{{ format(copy.select,trail.at(-1)!.name) }}</Button>
+    </div>
+   </div>
+   <p v-if="chosen" role="status">{{ format(copy.selected,chosen.path) }}</p>
+   <Checkbox v-if="!readOnly" v-model="writable" class="m2-checkbox" :disabled="busy" :label="copy.writable" />
+  </div>
+  <template #footer>
+   <Button variant="secondary" @click="close">{{ copy.cancel }}</Button>
+   <Button variant="secondary" :disabled="busy" @click="browse(trail)">{{ copy.refresh }}</Button>
+   <Button variant="primary" :disabled="busy||!chosen" @click="confirm">{{ copy.confirm }}</Button>
+  </template>
+ </Dialog>
+</template>

package/dist/templates/native-go-vue/frontend/src/nas/M2Settings.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import {computed,inject,onMounted,ref,watch} from 'vue'
+import {Button,Callout,Dialog,SettingsSection} from '@synopackageland/ui'
+import {M2ProviderKey,type M2Selection} from './m2-contract'
+import {m2Copy,m2ErrorCopy} from './m2-i18n'
+import {useM2Request} from './use-m2-request'
+import M2PathPicker from './M2PathPicker.vue'
+import M2Files from './M2Files.vue'
+const emit=defineEmits<{busy:[value:boolean]}>()
+const filesBusy=ref(false),pickerBusy=ref(false)
+const props=defineProps<{locale:string}>(),copy=computed(()=>m2Copy(props.locale)),provider=inject(M2ProviderKey)!
+const request=useM2Request(),{busy,error}=request
+const occupied=computed(()=>busy.value||filesBusy.value||pickerBusy.value)
+watch(occupied,value=>emit('busy',value),{flush:'sync'})
+const selections=ref<M2Selection[]>([]),pickerOpen=ref(false),revoking=ref<M2Selection>(),active=ref<M2Selection>(),notice=ref(''),loaded=ref(false)
+async function refresh(){
+ if(occupied.value)return
+ active.value=undefined;notice.value='';loaded.value=false;selections.value=[]
+ const result=await request.run(async signal=>{await provider.status(signal);return provider.selections(signal)})
+ if(result){selections.value=result;loaded.value=true}
+}
+function selected(selection:M2Selection){selections.value=[...selections.value,selection];notice.value=copy.value.selectionAdded;loaded.value=true}
+async function revoke(){
+ if(!revoking.value)return
+ const selection=revoking.value
+ const done=await request.run(async signal=>{await provider.revoke(selection.grantId,signal);return true})
+ if(done){selections.value=selections.value.filter(s=>s.grantId!==selection.grantId);revoking.value=undefined;notice.value=copy.value.revokedNotice}
+}
+function askRevoke(selection:M2Selection){active.value=undefined;notice.value='';error.value=undefined;revoking.value=selection}
+onMounted(()=>void refresh())
+</script>
+<template>
+ <SettingsSection :title="copy.title" :collapsible="false">
+  <div :aria-busy="occupied">
+   <p>{{ copy.ownPermissions }}</p><p>{{ copy.consent }}</p>
+   <p class="integration-help">{{ copy.localOnly }}</p>
+   <p class="integration-help">{{ copy.identityRisk }}</p><p class="integration-help">{{ copy.pathRisk }}</p>
+   <p>{{ copy.unsupported }}</p>
+   <Callout v-if="error && !revoking" tone="danger" role="alert">{{ m2ErrorCopy(error,copy) }}</Callout>
+   <p v-if="busy" role="status">{{ copy.loading }}</p>
+   <p v-if="notice" role="status">{{ notice }}</p>
+   <div class="integration-actions">
+    <Button variant="primary" :disabled="occupied||!loaded" @click="pickerOpen=true">{{ copy.choose }}</Button>
+    <Button variant="secondary" :disabled="occupied" @click="refresh">{{ copy.refresh }}</Button>
+   </div>
+   <p v-if="loaded&&!selections.length">{{ copy.emptySelections }}</p>
+   <ul class="nas-grants">
+    <li v-for="selection in selections" :key="selection.grantId">
+     <div class="nas-grant-heading"><strong>{{ selection.folder }}</strong></div>
+     <p>{{ selection.writable ? copy.writable : copy.readOnly }}</p>
+     <div class="integration-actions">
+      <Button variant="secondary" :disabled="occupied" @click="active=selection">{{ copy.openFiles }}</Button>
+      <Button variant="secondary" :disabled="occupied" @click="askRevoke(selection)">{{ copy.revoke }}</Button>
+     </div>
+    </li>
+   </ul>
+   <M2Files v-if="active" :key="active.grantId" :selection="active" :locale="locale" @busy="value=>filesBusy=value" />
+  </div>
+  <M2PathPicker v-model:open="pickerOpen" :locale="locale" @selected="selected" @busy="value=>pickerBusy=value" />
+  <Dialog :open="!!revoking" :title="copy.confirmRevoke" :description="copy.revokeWarning" :close-label="copy.close" @update:open="value=>{if(!value){request.cancel();revoking=undefined}}">
+   <p class="nas-folder-name">{{ revoking?.folder }}</p>
+   <Callout v-if="error" tone="danger" role="alert">{{ m2ErrorCopy(error,copy) }}</Callout>
+   <template #footer>
+    <Button variant="secondary" @click="request.cancel();revoking=undefined">{{ copy.cancel }}</Button>
+    <Button variant="danger" :disabled="busy" @click="revoke">{{ copy.confirmRevoke }}</Button>
+   </template>
+  </Dialog>
+ </SettingsSection>
+</template>

package/dist/templates/native-go-vue/frontend/src/nas/NasGrantSettings.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {computed, inject, onMounted, ref} from 'vue'
+import {Button, Callout, Dialog, SettingsSection} from '@synopackageland/ui'
+import {NasProviderKey, type GrantView, type ScopeKind} from './provider'
+import {actionCopy, errorCopy, nasCopy} from './i18n'
+import {useNasRequest} from './use-request'
+import NasPathPicker from './NasPathPicker.vue'
+
+const props=defineProps<{locale:string}>()
+const provider=inject(NasProviderKey)!
+const copy=computed(()=>nasCopy(props.locale))
+const request=useNasRequest(), {busy,error}=request
+const items=ref<GrantView[]>([]), canManageShared=ref(false), pickerOpen=ref(false), kind=ref<ScopeKind>('user-personal'), revokeTarget=ref<GrantView>(), notice=ref('')
+const revokeOpen=computed({get:()=>!!revokeTarget.value,set:value=>{if(!value){request.cancel();revokeTarget.value=undefined}}})
+async function refresh() {
+ const result=await request.run(signal=>provider.settings(signal))
+ if(result) {items.value=result.items;canManageShared.value=result.canManageShared}
+}
+function choose(scope:ScopeKind) {kind.value=scope;notice.value='';pickerOpen.value=true}
+async function granted() {notice.value=copy.value.noticeCreated;await refresh()}
+function state(item:GrantView) {
+ if(item.effectiveState==='active') return copy.value.active
+ if(item.effectiveState==='suspended') return copy.value.suspended
+ if(item.cleanupRequired) return copy.value.cleanup
+ return item.drained===true?copy.value.revoked:copy.value.draining
+}
+function created(time:number) {
+ try {return new Intl.DateTimeFormat(props.locale.replace('_','-'),{dateStyle:'medium',timeStyle:'short'}).format(time)}
+ catch {return new Intl.DateTimeFormat('en',{dateStyle:'medium',timeStyle:'short'}).format(time)}
+}
+async function revoke() {
+ const target=revokeTarget.value;if(!target) return
+ const result=await request.run(signal=>provider.revoke(target.grantId,target.revision,signal))
+ if(result) {
+  // Only an R receipt sets revoked; only Q sets drained. Timeout is neither.
+  if(result.revoked) {const item=items.value.find(i=>i.grantId===result.grantId);if(item){item.effectiveState='revoked';item.revision=result.grantRevision;item.drained=result.drained}}
+  revokeTarget.value=undefined
+ }
+}
+onMounted(refresh)
+</script>
+
+<template>
+ <SettingsSection :title="copy.title" :collapsible="false" class="nas-settings" :aria-busy="busy">
+  <Callout tone="info" :title="copy.pilotOff">{{ copy.pilotRestrictions }}</Callout>
+  <p v-if="provider.mode === 'mock'" class="integration-help">{{ copy.mock }}</p>
+  <Callout v-if="error" tone="danger" :title="copy.errorTitle" role="alert">{{ errorCopy(error,copy) }}</Callout>
+  <div class="integration-actions">
+   <Button variant="primary" :disabled="busy || pickerOpen" @click="choose('user-personal')">{{ copy.choosePersonal }}</Button>
+   <Button v-if="canManageShared" variant="secondary" :disabled="busy || pickerOpen" @click="choose('app-shared')">{{ copy.chooseShared }}</Button>
+   <Button variant="secondary" :disabled="busy || pickerOpen" @click="refresh">{{ copy.refresh }}</Button>
+  </div>
+  <p v-if="notice" role="status">{{ notice }}</p>
+  <p v-if="busy" role="status">{{ copy.loading }}</p>
+  <p v-else-if="!items.length">{{ copy.emptyGrant }}</p>
+  <ul v-else class="nas-grants">
+   <li v-for="item in items" :key="item.grantId">
+    <div class="nas-grant-heading"><strong>{{ item.displayName }}</strong><Button v-if="item.canRevoke && item.effectiveState !== 'revoked'" variant="secondary" :disabled="busy || pickerOpen" @click="revokeTarget=item">{{ copy.revoke }}</Button></div>
+    <dl class="nas-summary">
+     <dt>{{ copy.scope }}</dt><dd>{{ item.scopeKind === 'user-personal' ? copy.personal : copy.shared }}</dd>
+     <dt>{{ copy.actions }}</dt><dd>{{ actionCopy(item.actions,copy) }}</dd>
+     <dt>{{ copy.state }}</dt><dd role="status">{{ state(item) }}</dd>
+     <dt>{{ copy.createdAt }}</dt><dd>{{ created(item.createdAt) }}</dd>
+    </dl>
+   </li>
+  </ul>
+  <NasPathPicker v-model:open="pickerOpen" :scope-kind="kind" :locale="locale" @granted="granted" />
+  <Dialog v-model:open="revokeOpen" :title="copy.revokeTitle" :description="copy.revokeWarning" :close-label="copy.close">
+   <p>{{ revokeTarget?.displayName }}</p>
+   <Callout v-if="error" tone="danger" :title="copy.errorTitle" role="alert">{{ errorCopy(error,copy) }}</Callout>
+   <template #footer><Button variant="secondary" @click="revokeOpen=false">{{ copy.cancel }}</Button><Button variant="danger" :disabled="busy" @click="revoke">{{ copy.confirmRevoke }}</Button></template>
+  </Dialog>
+ </SettingsSection>
+</template>

package/dist/templates/native-go-vue/frontend/src/nas/NasPathPicker.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {computed, inject, onBeforeUnmount, ref, watch} from 'vue'
+import {Button, Callout, DataGrid, Dialog, TreeView, type TreeNode} from '@synopackageland/ui'
+import {NasProviderKey, type FolderEntry, type PickerContext, type PreparedIntent, type GrantHandle, type ScopeKind} from './provider'
+import {actionCopy, errorCopy, format, nasCopy} from './i18n'
+import {useNasRequest} from './use-request'
+
+const props=defineProps<{open:boolean; scopeKind:ScopeKind; locale:string}>()
+const emit=defineEmits<{'update:open':[value:boolean]; granted:[grant:GrantHandle]}>()
+const provider=inject(NasProviderKey)!
+const copy=computed(()=>nasCopy(props.locale))
+const request=useNasRequest(), {busy,error}=request
+const context=ref<PickerContext>(), entries=ref<FolderEntry[]>([]), roots=ref<TreeNode[]>([])
+const path=ref<Array<{id:string;name:string}>>([]), selected=ref<FolderEntry>(), intent=ref<PreparedIntent>(), nextCursor=ref<string>()
+const columns=computed(()=>[{key:'displayName',label:copy.value.folder,width:'65%'},{key:'selection',label:copy.value.selection,width:'35%'}])
+const rows=computed(()=>entries.value.map(e=>({...e})))
+
+function discard() {
+ request.cancel()
+ const id=context.value?.contextId;context.value=undefined
+ entries.value=[];roots.value=[];path.value=[];selected.value=undefined;intent.value=undefined;nextCursor.value=undefined
+ if(id) void provider.cancel(id).catch(()=>{})
+}
+function close() {discard();emit('update:open',false)}
+async function start() {
+ discard()
+ const result=await request.run(async(signal,current)=> {
+  const ctx=await provider.begin(props.scopeKind,signal)
+  // A provider which ignores abort must still have its late context canceled.
+  if(!current() || signal.aborted) {await provider.cancel(ctx.contextId);throw {code:'canceled'}}
+  context.value=ctx
+  return provider.list(ctx.contextId,undefined,undefined,signal)
+ })
+ if(result) {entries.value=result.entries;roots.value=result.entries.map(e=>({id:e.nodeId,label:e.displayName}));nextCursor.value=result.nextCursor}
+}
+async function browse(target:Array<{id:string;name:string}>, more=false) {
+ if(!context.value) return
+ const ctx=context.value, node=target.at(-1)?.id
+ const result=await request.run(signal=>provider.list(ctx.contextId,node,more?nextCursor.value:undefined,signal))
+ if(result) {
+  path.value=target;entries.value=more?[...entries.value,...result.entries]:result.entries
+  // Bound the rendered list too; pages do not grow an unbounded DOM.
+  if(entries.value.length>200) entries.value=entries.value.slice(-200)
+  if(target.length===0) roots.value=entries.value.map(e=>({id:e.nodeId,label:e.displayName}))
+  nextCursor.value=result.nextCursor;selected.value=undefined;intent.value=undefined
+ }
+}
+function openFolder(id:string,name:string) {void browse([...path.value,{id,name}])}
+async function review() {
+ if(!selected.value) return
+ const result=await request.run(signal=>provider.prepare(selected.value!.nodeId,signal))
+ if(result) intent.value=result
+}
+async function confirm() {
+ if(!intent.value) return
+ const prepared=intent.value
+ const result=await request.run(signal=>provider.confirm(prepared.intentId,prepared.summaryDigest,signal))
+ if(result) {emit('granted',result);close()}
+}
+watch(()=>props.open,open=>{if(open) void start();else discard()},{immediate:true})
+watch(()=>props.scopeKind,()=>{if(props.open) void start()})
+onBeforeUnmount(discard)
+</script>
+
+<template>
+ <Dialog :open="open" :title="intent ? copy.summaryTitle : copy.pickerTitle" :description="copy.pickerHelp" :close-label="copy.close" width="720px" @update:open="value => {if(!value) close()}">
+  <div class="nas-picker" :aria-busy="busy">
+   <p v-if="provider.mode === 'mock'" class="integration-help">{{ copy.mock }}</p>
+   <Callout v-if="error" tone="danger" :title="copy.errorTitle" role="alert">{{ errorCopy(error,copy) }}</Callout>
+   <p v-if="busy" role="status">{{ copy.loading }}</p>
+   <template v-if="intent">
+    <dl class="nas-summary">
+     <dt>{{ copy.app }}</dt><dd>{{ intent.summary.appName }}</dd>
+     <dt>{{ copy.scope }}</dt><dd>{{ intent.summary.scopeKind === 'user-personal' ? copy.personal : copy.shared }}</dd>
+     <dt>{{ copy.folder }}</dt><dd>{{ intent.summary.displayName }}</dd>
+     <dt>{{ copy.actions }}</dt><dd>{{ actionCopy(intent.summary.actions,copy) }}</dd>
+    </dl>
+    <p>{{ copy.persistent }}</p><p>{{ copy.revokeHow }}</p><p>{{ copy.expires }}</p>
+   </template>
+   <template v-else-if="context">
+    <nav class="nas-breadcrumb" :aria-label="copy.folder">
+     <Button v-if="path.length" variant="secondary" :disabled="busy" @click="browse(path.slice(0,-1))">{{ copy.back }}</Button>
+     <Button variant="secondary" :disabled="busy" @click="browse([])">{{ copy.roots }}</Button>
+     <Button v-for="(part,index) in path" :key="part.id" variant="secondary" :disabled="busy" @click="browse(path.slice(0,index+1))">{{ part.name }}</Button>
+    </nav>
+    <div class="nas-browser">
+     <aside class="nas-tree" :aria-label="copy.roots" :inert="busy || undefined"><TreeView :nodes="roots" :show-icons="false" @select="node => browse([{id:node.id,name:node.label}])" /></aside>
+     <div class="nas-folder-list">
+      <DataGrid :columns="columns" :rows="rows" row-key="nodeId" :footer="false" :labels="{empty:copy.emptyFolder}" :resizable="false" :loading="busy" :loading-text="copy.loading">
+       <template #cell-displayName="{row}"><Button variant="secondary" class="nas-folder-name" :disabled="busy" @click="openFolder(String(row.nodeId),String(row.displayName))">{{ format(copy.open,String(row.displayName)) }}</Button></template>
+       <template #cell-selection="{row}"><Button variant="secondary" class="nas-folder-action" :disabled="busy || !row.selectable" :aria-label="format(copy.select,String(row.displayName))" :aria-pressed="selected?.nodeId === row.nodeId" @click="selected=entries.find(e=>e.nodeId===row.nodeId)">{{ copy.selection }}</Button></template>
+      </DataGrid>
+      <Button v-if="nextCursor" variant="secondary" :disabled="busy" @click="browse(path,true)">{{ copy.loadMore }}</Button>
+     </div>
+    </div>
+    <p v-if="selected" role="status">{{ format(copy.selected,selected.displayName) }}</p>
+   </template>
+  </div>
+  <template #footer>
+   <Button variant="secondary" @click="close">{{ copy.cancel }}</Button>
+   <Button v-if="!context && !busy" variant="secondary" @click="start">{{ copy.retry }}</Button>
+   <Button v-if="intent" variant="primary" :disabled="busy" @click="confirm">{{ copy.confirm }}</Button>
+   <Button v-else variant="primary" :disabled="busy || !selected" @click="review">{{ copy.review }}</Button>
+  </template>
+ </Dialog>
+</template>

package/dist/templates/native-go-vue/frontend/src/nas/NasUnavailable.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Callout, SettingsSection} from '@synopackageland/ui'
+import {nasCopy} from './i18n'
+const props=defineProps<{locale:string}>()
+const copy=computed(()=>nasCopy(props.locale))
+</script>
+
+<template>
+ <SettingsSection :title="copy.title" :collapsible="false" data-nas-state="unavailable">
+  <Callout :title="copy.unavailableTitle">
+   <p>{{ copy.unavailableMessage }}</p>
+   <p>{{ copy.pilotUnavailable }}</p>
+   <p>{{ copy.noUnlock }}</p>
+   <p>{{ copy.relaxedRisk }}</p>
+   <p>{{ copy.relaxedReauthorize }}</p>
+   <p>{{ copy.relaxedPermissions }}</p>
+  </Callout>
+ </SettingsSection>
+</template>

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

@@ -0,0 +1,74 @@
+{
+  "title": "NAS-Ordnerzugriff",
+  "mock": "Mock-Vorschau — NAS-Dateien und Berechtigungen bleiben unverändert.",
+  "personal": "Meine Ordner",
+  "shared": "Gemeinsame App-Ordner",
+  "choosePersonal": "Eigenen Ordner wählen",
+  "chooseShared": "Gemeinsamen Ordner wählen",
+  "refresh": "Zugriff aktualisieren",
+  "emptyGrant": "Keine Ordner freigegeben. Wählen Sie einen Ordner für die Vorschau des Lesezugriffs.",
+  "pickerTitle": "NAS-Ordner wählen",
+  "pickerHelp": "Ordner durchsuchen, auswählen und den Lesezugriff prüfen.",
+  "roots": "Ordner",
+  "back": "Zurück",
+  "open": "{name} öffnen",
+  "select": "{name} auswählen",
+  "selected": "Ausgewählt: {name}",
+  "review": "Zugriff prüfen",
+  "cancel": "Abbrechen",
+  "confirm": "Zugriff bestätigen",
+  "summaryTitle": "Ordnerzugriff prüfen",
+  "app": "App",
+  "scope": "Bereich",
+  "folder": "Ordner",
+  "actions": "Erlaubte Aktionen",
+  "readOnly": "Ordner auflisten, Metadaten prüfen und Dateien lesen",
+  "persistent": "Dauerhafter Zugriff bis zum Widerruf oder bis die Bindung ungültig wird.",
+  "revokeHow": "Widerrufen Sie einzelne Ordner hier. Eine neue Freigabe erzeugt einen neuen Grant.",
+  "expires": "Innerhalb von 30 Sekunden bestätigen.",
+  "loading": "Ordner werden geladen…",
+  "emptyFolder": "Dieser Ordner ist leer",
+  "loadMore": "Mehr laden",
+  "state": "Zugriffsstatus",
+  "active": "Aktiv",
+  "suspended": "Ausgesetzt — erneut auswählen und freigeben",
+  "revoked": "Widerrufen",
+  "draining": "Widerrufen; Übertragungen werden gestoppt",
+  "cleanup": "Widerrufen; Bereinigung muss geprüft werden",
+  "createdAt": "Erstellt",
+  "revoke": "Widerrufen",
+  "revokeTitle": "Ordnerzugriff widerrufen?",
+  "revokeWarning": "Neuen Zugriff und laufende Übertragungen stoppen. Bereits gesendete oder geschriebene Daten werden nicht zurückgesetzt.",
+  "confirmRevoke": "Widerruf bestätigen",
+  "noticeCreated": "Ordnerzugriff hinzugefügt.",
+  "errorTitle": "Ordnerzugriff konnte nicht aktualisiert werden",
+  "errorDenied": "Zugriff verweigert. Wählen Sie einen für Ihr aktuelles Konto sichtbaren Ordner.",
+  "errorExpired": "Auswahl oder Bestätigung abgelaufen. Abbrechen und den Ordner erneut wählen.",
+  "errorStale": "Sitzung oder Auswahl geändert. Abbrechen und den Ordner erneut wählen.",
+  "errorUnavailable": "Ordnerdienst nicht verfügbar. Bitten Sie einen Administrator, Integration und Home-Dienste zu prüfen.",
+  "errorBusy": "Anfragelimit erreicht. Warten Sie und versuchen Sie es erneut.",
+  "errorCanceled": "Anfrage abgebrochen. Wählen Sie den Ordner erneut, wenn Sie bereit sind.",
+  "errorInternal": "Anfrage fehlgeschlagen. Aktualisieren Sie den Zugriff vor einem neuen Versuch.",
+  "retry": "Erneut versuchen",
+  "close": "Schließen",
+  "selection": "Ordner auswählen",
+  "actionList": "Ordner auflisten",
+  "actionStat": "Metadaten prüfen",
+  "actionRead": "Dateien lesen",
+  "pilotOff": "Pilot für verwaltete Konten: aus",
+  "pilotRestrictions": "Die Freigabe durch einen Administrator und ein geprüfter Ablauf zur Kontenpflege sind erforderlich. Kontoänderungen oder eine ungeprüfte Identität entziehen den Zugriff und erfordern eine neue Anmeldung und Freigabe. Diese Version kann den Pilotbetrieb nicht aktivieren.",
+  "unavailableTitle": "Noch nicht verfügbar",
+  "unavailableMessage": "NAS-Ordnerfreigaben und Dateioperationen sind noch nicht verfügbar. Die erforderlichen nativen Identitäts- und Berechtigungsnachweise können derzeit nicht geprüft werden.",
+  "pilotUnavailable": "Der Pilot B für verwaltete Konten ist experimental und kann nicht aktiviert werden.",
+  "noUnlock": "Das Aktivieren der Integration oder erneutes Anmelden schaltet den NAS-Dateizugriff nicht frei.",
+  "errorUnknownMethod": "Diese Paketversion stellt diese Methode nicht bereit.",
+  "errorNativeProof": "Der erforderliche native Identitäts- oder Berechtigungsnachweis fehlt. Der NAS-Zugriff bleibt gesperrt.",
+  "errorSession": "Ihre DSM-Sitzung ist abgelaufen. Melden Sie sich erneut für die App-Sitzung an; der NAS-Dateizugriff bleibt nicht verfügbar.",
+  "errorAuthentication": "Die DSM-Authentifizierung ist nicht verfügbar. Aktualisieren Sie den App-Status später.",
+  "errorUnsupported": "NAS-Dateioperationen sind in diesem Build nicht verfügbar.",
+  "healthPending": "Vorübergehende erneute Prüfung",
+  "healthPendingHelp": "Die Integration wird vorübergehend erneut geprüft. Warten Sie und aktualisieren Sie anschließend. Neuer Zugriff ist erst nach Abschluss der Prüfung möglich.",
+  "relaxedRisk": "Bei gelockerter Identität können mit derselben UID und demselben username neu erstellte Konten bestehende Freigaben übernehmen.",
+  "relaxedReauthorize": "Ändert sich die UID oder der username, werden alle Ihre Freigaben ungültig und müssen erneut genehmigt werden.",
+  "relaxedPermissions": "Dateioperationen verwenden Ihre UID und Gruppen und bleiben auf NAS-Berechtigungen und genehmigte Ordner beschränkt. Deaktivierte Konten oder entzogene App-Berechtigungen führen zur Zugriffsverweigerung."
+}

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

@@ -0,0 +1,74 @@
+{
+  "title": "NAS folder access",
+  "mock": "Mock preview — no NAS files or permissions are changed.",
+  "personal": "My folders",
+  "shared": "App shared folders",
+  "choosePersonal": "Choose my folder",
+  "chooseShared": "Choose shared folder",
+  "refresh": "Refresh access",
+  "emptyGrant": "No folders authorized. Choose a folder to preview read-only access.",
+  "pickerTitle": "Choose a NAS folder",
+  "pickerHelp": "Browse folders, select one, then review read-only access.",
+  "roots": "Folders",
+  "back": "Back",
+  "open": "Open {name}",
+  "select": "Select {name}",
+  "selected": "Selected: {name}",
+  "review": "Review access",
+  "cancel": "Cancel",
+  "confirm": "Confirm access",
+  "summaryTitle": "Review folder access",
+  "app": "App",
+  "scope": "Scope",
+  "folder": "Folder",
+  "actions": "Allowed actions",
+  "readOnly": "List folders, inspect metadata and read files",
+  "persistent": "Persistent access — until you revoke it or its binding becomes invalid.",
+  "revokeHow": "Revoke individual folders here. Reauthorization creates a new grant.",
+  "expires": "Confirm within 30 seconds.",
+  "loading": "Loading folders…",
+  "emptyFolder": "This folder is empty",
+  "loadMore": "Load more",
+  "state": "Access state",
+  "active": "Active",
+  "suspended": "Suspended — select again to authorize",
+  "revoked": "Revoked",
+  "draining": "Revoked; stopping transfers",
+  "cleanup": "Revoked; cleanup needs verification",
+  "createdAt": "Created",
+  "revoke": "Revoke",
+  "revokeTitle": "Revoke folder access?",
+  "revokeWarning": "Stop new access and in-progress transfers. Data already sent or written will not be restored.",
+  "confirmRevoke": "Confirm revoke",
+  "noticeCreated": "Folder access added.",
+  "errorTitle": "Folder access could not be updated",
+  "errorDenied": "Access denied. Choose a folder visible to your current account.",
+  "errorExpired": "The selection or confirmation expired. Cancel and choose the folder again.",
+  "errorStale": "Your session or selection changed. Cancel and choose the folder again.",
+  "errorUnavailable": "Folder service is unavailable. Ask an administrator to check integration and home services.",
+  "errorBusy": "The request limit was reached. Wait, then retry.",
+  "errorCanceled": "The request was canceled. Choose the folder again when ready.",
+  "errorInternal": "The request failed. Refresh access before trying again.",
+  "retry": "Retry",
+  "close": "Close",
+  "selection": "Select folder",
+  "actionList": "List folders",
+  "actionStat": "Inspect metadata",
+  "actionRead": "Read files",
+  "pilotOff": "Managed account pilot: off",
+  "pilotRestrictions": "Administrator approval and a verified account-maintenance process are required. Account changes or unverified identity revoke access and require a new sign-in and approval. Enabling this pilot is unavailable in this build.",
+  "unavailableTitle": "Not available yet",
+  "unavailableMessage": "NAS folder grants and file operations are not available yet. Required native identity and permission proof cannot currently be verified.",
+  "pilotUnavailable": "Managed account pilot B is experimental and cannot be enabled.",
+  "noUnlock": "Enabling integration or signing in again does not unlock NAS file access.",
+  "errorUnknownMethod": "This method is not provided by this package version.",
+  "errorNativeProof": "Required native identity or permission proof is unavailable. NAS access remains closed.",
+  "errorSession": "Your DSM session expired. Sign in to restore the app session; NAS file access remains unavailable.",
+  "errorAuthentication": "DSM authentication is unavailable. Refresh the app status later.",
+  "errorUnsupported": "NAS file operations are not available in this build.",
+  "healthPending": "Temporarily revalidating",
+  "healthPendingHelp": "Integration is temporarily revalidating. Wait, then refresh. New access is unavailable until verification completes.",
+  "relaxedRisk": "When relaxed identity is selected, accounts recreated with the same UID and username may retain grants.",
+  "relaxedReauthorize": "A UID or username change invalidates all your grants and requires new authorization.",
+  "relaxedPermissions": "File operations use your UID and groups, within NAS permissions and authorized folders. Disabled accounts or revoked app access are denied."
+}