@meddleware/seal-ui 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to `@meddleware/seal-ui` are documented here.
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows [Semantic Versioning](https://semver.org/).
+
+## [0.1.0] - 2026-09-02
+
+### Added
+
+- Initial release. Sealed Storage SPA:
+  - Encrypt a file under a registry-driven policy (nft-gate, time-lock), store the ciphertext on
+    Walrus (HTTP publisher), and download a portable manifest.
+  - Decrypt from a manifest: fetch ciphertext, mint a Seal SessionKey via one wallet signature, and
+    download the plaintext.
+  - Testnet-first with a mainnet-pending notice (Seal committee mode is testnet-only).

package/LICENSE

@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2026 MeddleWare
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# @meddleware/seal-ui
+
+Sealed Storage — a standalone Vue 3 SPA for client-side [Seal](https://seal-docs.wal.app/) encryption
+with access-gated, decentralised [Walrus](https://walrus.xyz) storage on Sui.
+
+Encrypt a file under a policy (access-gate NFT ownership, time-lock, …), store the ciphertext on
+Walrus, and share a small **manifest**. Anyone with the manifest can decrypt — but only if the
+on-chain policy allows (e.g. they hold a valid gate pass, or the unlock time has passed).
+
+## How it works
+
+1. **Encrypt** in the browser via `@meddleware/seal-client` (threshold Seal). No key material ever
+   touches a server.
+2. **Store** the opaque ciphertext on Walrus over HTTP; keep the returned blob id in the manifest.
+3. **Decrypt** by signing one wallet message (mints a short-lived Seal SessionKey); a threshold
+   committee of independent key servers releases key shares only if the on-chain `seal_approve`
+   passes.
+
+The policies live in the [`seal_policies`](https://github.com/meddleware-org/seal-policies-sui) Move
+package; the client seam is [`@meddleware/seal-client`](https://github.com/meddleware-org/seal-client).
+
+## Configure (build-time `VITE_*`)
+
+| Var | Meaning |
+| --- | --- |
+| `VITE_NETWORK` | `testnet` (default) or `mainnet` (pending) |
+| `VITE_SEAL_PACKAGE_ID_{NET}` | Published `seal_policies` package id |
+| `VITE_SEAL_SERVER_OBJECT_IDS_{NET}` | CSV of key-server object ids (the committee) |
+| `VITE_SEAL_AGGREGATOR_URLS_{NET}` | CSV of aggregator URLs (index-aligned) |
+| `VITE_SEAL_THRESHOLD` | `t` in t-of-n (default 2) |
+| `VITE_WALRUS_PUBLISHER_{NET}` / `VITE_WALRUS_AGGREGATOR_{NET}` | Walrus HTTP endpoints (defaults provided) |
+| `VITE_RPC_{NET}` | Sui RPC URL override |
+
+## Develop
+
+```sh
+# @meddleware/seal-client must be linked or published:
+( cd ../seal-client && npm link )
+npm install && npm link @meddleware/seal-client
+npm run dev
+```
+
+## Build
+
+```sh
+npm run build           # vue-tsc + vite → dist/
+docker build -t seal-ui .
+```
+
+Committee mode is testnet-only today; mainnet stays disabled with an in-app notice until it ships.
+
+## License
+
+BSD Zero Clause License (`0BSD`). See [LICENSE](LICENSE).

package/index.html

@@ -0,0 +1,13 @@
+<!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>Sealed Storage — Meddleware</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@meddleware/seal-ui",
+  "version": "0.0.3",
+  "description": "Standalone Vue 3 SPA for Sealed Storage — client-side Seal encryption + access-gated, decentralised Walrus storage on Sui.",
+  "author": "MeddleWare <meddleware@proton.me>",
+  "license": "0BSD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meddleware-org/seal-ui.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@meddleware/design-tokens": "^0.1.2",
+    "@meddleware/seal-client": "^0.0.2",
+    "@meddleware/ui": "^0.1.6",
+    "@meddleware/wallet-adapter": "^0.0.2",
+    "@mysten/seal": "^1.4.7",
+    "@mysten/sui": "^2.28.0",
+    "@mysten/wallet-standard": "^0.20.0",
+    "vue": "^3.5.40"
+  },
+  "devDependencies": {
+    "@types/node": "~24.12.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "typescript": "~6.0.0",
+    "vite": "^8.1.5",
+    "vue-tsc": "~3.3.0"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  }
+}

package/src/App.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// Standalone shell for the Sealed Storage SPA: app header + footer wrapping the core tool view.
+// The core UI lives in SealView.vue (also exported for inline embedding in the dashboard).
+import { AppHeader, AppFooter, ColorModeControl, useColorMode } from '@meddleware/ui'
+import { NETWORK } from './config.js'
+import SealView from './components/SealView.vue'
+
+const { mode, set } = useColorMode('dark')
+</script>
+
+<template>
+  <div class="app">
+    <AppHeader variant="dark">
+      <template #brand>
+        <span>🔒 Sealed Storage</span>
+      </template>
+      <template #actions>
+        <span class="badge">{{ NETWORK }}</span>
+        <ColorModeControl :model-value="mode" @update:model-value="set" />
+      </template>
+    </AppHeader>
+
+    <SealView />
+
+    <AppFooter />
+  </div>
+</template>
+
+<style scoped>
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.badge {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+</style>

package/src/components/SealView.vue

@@ -0,0 +1,559 @@
+<script setup lang="ts">
+// Core Sealed Storage tool UI (Encrypt / Decrypt / Unlock), free of any app shell.
+// Rendered standalone by seal-ui's App.vue and inline by the dashboard. Wallet state comes from
+// the shared @meddleware/wallet-adapter singleton (via ./wallet.js): connecting here or in any
+// other inline tool view (or the dashboard header) reflects everywhere.
+//
+// Styles are scoped to this component so the dashboard can import it without pulling seal-ui's
+// global stylesheet (which restyles body / #app / bare inputs). The standalone app keeps those
+// globals via main.ts → styles.css.
+import { computed, onMounted, ref } from 'vue'
+import { Transaction } from '@mysten/sui/transactions'
+import {
+  buildPublishSealedContentTx,
+  type SealedManifest,
+  type SealPolicyProvider,
+  type SealedContentPointer,
+} from '@meddleware/seal-client'
+import { useWallet } from '../wallet.js'
+import { registry, getSealController } from '../seal.js'
+import { storeBlob, readBlob } from '../walrus.js'
+import { discoverSealedContent } from '../sealed-content.js'
+import { NETWORK, MAINNET_PENDING, SEAL_CONFIGURED, SEAL_PACKAGE_ID } from '../config.js'
+
+const { wallets, account, connect, disconnect, signPersonalMessage, signAndExecute } = useWallet()
+
+const providers = registry.list() as SealPolicyProvider[]
+const disabled = computed(() => MAINNET_PENDING || !SEAL_CONFIGURED)
+
+type Tab = 'encrypt' | 'decrypt' | 'unlock'
+const tab = ref<Tab>('encrypt')
+
+// Deep-link from access-gate-ui: ?gate=<id> preselects the nft-gate policy + gate.
+onMounted(() => {
+  const gate = new URLSearchParams(location.search).get('gate')
+  if (gate && providers.some((p) => p.type === 'nft-gate')) {
+    encType.value = 'nft-gate'
+    encValues.value = { ...encValues.value, gateId: gate }
+    unlockGateId.value = gate
+  }
+})
+const busy = ref(false)
+const status = ref<string | null>(null)
+const errorMsg = ref<string | null>(null)
+
+function coerce(kind: string, raw: string | boolean): unknown {
+  if (kind === 'boolean') return Boolean(raw)
+  if (kind === 'datetime') return Date.parse(String(raw))
+  return String(raw)
+}
+
+function triggerDownload(blob: Blob, name: string): void {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = name
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+// ── Encrypt ──────────────────────────────────────────────────────────────────
+const encType = ref(providers[0]?.type ?? '')
+const encProvider = computed(() => providers.find((p) => p.type === encType.value) ?? null)
+const encValues = ref<Record<string, string | boolean>>({})
+const encFile = ref<File | null>(null)
+const encLabel = ref('')
+const manifest = ref<SealedManifest | null>(null)
+
+function onEncFile(e: Event): void {
+  encFile.value = (e.target as HTMLInputElement).files?.[0] ?? null
+}
+
+async function performEncrypt(): Promise<void> {
+  errorMsg.value = null
+  status.value = null
+  manifest.value = null
+  const provider = encProvider.value
+  if (!provider) return
+  if (!encFile.value) {
+    errorMsg.value = 'Choose a file to encrypt.'
+    return
+  }
+  busy.value = true
+  try {
+    const params: Record<string, unknown> = {}
+    for (const f of provider.describe().encryptFields) {
+      const v = encValues.value[f.name]
+      if (f.required && (v === undefined || v === '')) throw new Error(`${f.label} is required.`)
+      if (v !== undefined && v !== '') params[f.name] = coerce(f.kind, v)
+    }
+    status.value = 'Encrypting…'
+    const data = new Uint8Array(await encFile.value.arrayBuffer())
+    const { id, ciphertext } = await (await getSealController()).encrypt(provider.type, params, data)
+    status.value = 'Storing ciphertext on Walrus…'
+    const blobId = await storeBlob(ciphertext)
+    manifest.value = {
+      policyType: provider.type,
+      id,
+      blobId,
+      network: NETWORK,
+      params,
+      label: encLabel.value || encFile.value.name,
+    }
+    status.value = 'Sealed. Keep the manifest below — you need it to decrypt.'
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    busy.value = false
+  }
+}
+
+function downloadManifest(): void {
+  if (!manifest.value) return
+  const blob = new Blob([JSON.stringify(manifest.value, null, 2)], { type: 'application/json' })
+  triggerDownload(blob, `${manifest.value.label ?? 'sealed'}.seal.json`)
+}
+
+// ── Decrypt ──────────────────────────────────────────────────────────────────
+const decManifestText = ref('')
+const decValues = ref<Record<string, string | boolean>>({})
+const decManifest = computed<SealedManifest | null>(() => {
+  if (!decManifestText.value.trim()) return null
+  try {
+    return JSON.parse(decManifestText.value) as SealedManifest
+  } catch {
+    return null
+  }
+})
+const decProvider = computed(() =>
+  decManifest.value ? (providers.find((p) => p.type === decManifest.value?.policyType) ?? null) : null,
+)
+
+async function onManifestFile(e: Event): Promise<void> {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  if (f) decManifestText.value = await f.text()
+}
+
+async function performDecrypt(): Promise<void> {
+  errorMsg.value = null
+  status.value = null
+  const m = decManifest.value
+  const provider = decProvider.value
+  if (!m || !provider) {
+    errorMsg.value = 'Paste or upload a valid manifest.'
+    return
+  }
+  if (!account.value) {
+    errorMsg.value = 'Connect your wallet to decrypt.'
+    return
+  }
+  busy.value = true
+  try {
+    const params: Record<string, unknown> = { ...(m.params ?? {}) }
+    for (const f of provider.describe().decryptFields) {
+      const v = decValues.value[f.name]
+      if (v !== undefined && v !== '') params[f.name] = coerce(f.kind, v)
+      if (f.required && (params[f.name] === undefined || params[f.name] === '')) {
+        throw new Error(`${f.label} is required.`)
+      }
+    }
+    status.value = 'Fetching ciphertext from Walrus…'
+    const ciphertext = await readBlob(m.blobId)
+    status.value = 'Requesting decryption keys — approve the signature in your wallet…'
+    const plaintext = await (await getSealController()).decrypt(m.policyType, params, m.id, ciphertext, {
+      address: account.value.address,
+      signPersonalMessage,
+    })
+    triggerDownload(new Blob([plaintext.slice().buffer as ArrayBuffer]), m.label ?? 'decrypted')
+    status.value = 'Decrypted — download started.'
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// ── Publish an on-chain discovery pointer (nft-gate content only) ─────────────
+const publishDigest = ref<string | null>(null)
+
+async function performPublish(): Promise<void> {
+  errorMsg.value = null
+  const m = manifest.value
+  if (!m || m.policyType !== 'nft-gate' || !m.params?.gateId) {
+    errorMsg.value = 'On-chain publishing is available for access-gate content only.'
+    return
+  }
+  if (!account.value) {
+    errorMsg.value = 'Connect your wallet to publish.'
+    return
+  }
+  busy.value = true
+  try {
+    status.value = 'Publishing on-chain pointer — approve the transaction in your wallet…'
+    const tx = new Transaction()
+    buildPublishSealedContentTx(tx, SEAL_PACKAGE_ID, {
+      gateId: String(m.params.gateId),
+      blobId: m.blobId,
+      sealId: m.id,
+      label: m.label ?? '',
+    })
+    const { digest } = await signAndExecute(tx)
+    publishDigest.value = digest
+    status.value = 'Published — gate pass-holders can now discover and unlock this content.'
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// ── Unlock: discover a gate's sealed content and decrypt ──────────────────────
+const unlockGateId = ref('')
+const discovered = ref<SealedContentPointer[]>([])
+const unlockNftId = ref('')
+const unlockSoulbound = ref(false)
+
+async function performDiscover(): Promise<void> {
+  errorMsg.value = null
+  discovered.value = []
+  if (!unlockGateId.value) {
+    errorMsg.value = 'Enter a gate id to search.'
+    return
+  }
+  busy.value = true
+  try {
+    status.value = 'Searching for sealed content…'
+    discovered.value = await discoverSealedContent(unlockGateId.value)
+    status.value = discovered.value.length
+      ? `Found ${discovered.value.length} item(s).`
+      : 'No sealed content published for this gate.'
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function performUnlock(item: SealedContentPointer): Promise<void> {
+  errorMsg.value = null
+  if (!account.value) {
+    errorMsg.value = 'Connect your wallet to decrypt.'
+    return
+  }
+  if (!unlockNftId.value) {
+    errorMsg.value = 'Enter your pass NFT id.'
+    return
+  }
+  busy.value = true
+  try {
+    status.value = 'Fetching ciphertext from Walrus…'
+    const ciphertext = await readBlob(item.blobId)
+    status.value = 'Requesting decryption keys — approve the signature in your wallet…'
+    const plaintext = await (await getSealController()).decrypt(
+      'nft-gate',
+      { gateId: item.gateId, nftId: unlockNftId.value, soulbound: unlockSoulbound.value },
+      item.sealId,
+      ciphertext,
+      { address: account.value.address, signPersonalMessage },
+    )
+    triggerDownload(new Blob([plaintext.slice().buffer as ArrayBuffer]), item.label || 'decrypted')
+    status.value = 'Decrypted — download started.'
+  } catch (e) {
+    errorMsg.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    busy.value = false
+  }
+}
+
+const shortAddr = computed(() => {
+  const a = account.value?.address
+  return a ? `${a.slice(0, 6)}…${a.slice(-4)}` : ''
+})
+</script>
+
+<template>
+  <div class="page">
+    <p class="muted">Client-side encrypted, access-gated storage on Walrus + Sui.</p>
+
+    <div v-if="MAINNET_PENDING" class="notice notice--warn">
+      Mainnet support is pending — Seal committee mode is currently testnet-only. Switch to testnet to
+      seal content.
+    </div>
+    <div v-else-if="!SEAL_CONFIGURED" class="notice notice--warn">
+      This deployment has no Seal policy package or key-server committee configured
+      (<code>VITE_SEAL_PACKAGE_ID_*</code> / <code>VITE_SEAL_SERVER_OBJECT_IDS_*</code>).
+    </div>
+
+    <section class="card" style="display:flex;align-items:center;justify-content:space-between;gap:1rem">
+      <template v-if="account">
+        <span class="muted">Connected: {{ shortAddr }}</span>
+        <button class="link" @click="disconnect">Disconnect</button>
+      </template>
+      <template v-else>
+        <span class="muted">Wallet needed only to decrypt.</span>
+        <span>
+          <button
+            v-for="w in wallets"
+            :key="w.name"
+            class="primary"
+            style="margin-left:0.4rem"
+            @click="connect(w)"
+          >
+            Connect {{ w.name }}
+          </button>
+          <span v-if="!wallets.length" class="muted">No Sui wallet detected.</span>
+        </span>
+      </template>
+    </section>
+
+    <nav class="tabs">
+      <button :class="{ active: tab === 'encrypt' }" @click="tab = 'encrypt'">Encrypt</button>
+      <button :class="{ active: tab === 'decrypt' }" @click="tab = 'decrypt'">Decrypt</button>
+      <button :class="{ active: tab === 'unlock' }" @click="tab = 'unlock'">Unlock</button>
+    </nav>
+
+    <div v-if="errorMsg" class="notice notice--error">{{ errorMsg }}</div>
+
+    <!-- Encrypt -->
+    <section v-show="tab === 'encrypt'" class="card">
+      <label class="field">
+        <span>Policy</span>
+        <select v-model="encType" :disabled="disabled">
+          <option v-for="p in providers" :key="p.type" :value="p.type">
+            {{ p.describe().label }}
+          </option>
+        </select>
+      </label>
+      <p v-if="encProvider" class="muted">{{ encProvider.describe().help }}</p>
+
+      <template v-if="encProvider">
+        <label
+          v-for="f in encProvider.describe().encryptFields"
+          :key="f.name"
+          class="field"
+          :class="{ checkbox: f.kind === 'boolean' }"
+        >
+          <span>{{ f.label }}<template v-if="f.required"> *</template></span>
+          <input v-if="f.kind === 'datetime'" type="datetime-local" v-model="encValues[f.name]" />
+          <input v-else-if="f.kind === 'boolean'" type="checkbox" v-model="encValues[f.name]" />
+          <input v-else type="text" v-model="encValues[f.name]" :placeholder="f.help" />
+        </label>
+      </template>
+
+      <label class="field">
+        <span>Label (optional)</span>
+        <input type="text" v-model="encLabel" placeholder="A name to recognise this later" />
+      </label>
+
+      <label class="field">
+        <span>File</span>
+        <input type="file" @change="onEncFile" />
+      </label>
+
+      <button class="primary" :disabled="busy || disabled" @click="performEncrypt">
+        {{ busy ? 'Working…' : 'Encrypt & store' }}
+      </button>
+
+      <div v-if="manifest" style="margin-top:1rem">
+        <p class="muted">Manifest — save this; it's required to decrypt (it holds no secrets):</p>
+        <pre class="manifest">{{ JSON.stringify(manifest, null, 2) }}</pre>
+        <button class="link" @click="downloadManifest">Download manifest</button>
+
+        <div v-if="manifest.policyType === 'nft-gate'" style="margin-top:0.75rem">
+          <p class="muted">
+            Optional: publish an on-chain pointer so this gate's pass-holders can discover and unlock
+            this content in the Unlock tab (no need to share the manifest).
+          </p>
+          <button class="primary" :disabled="busy || !account" @click="performPublish">
+            {{ busy ? 'Working…' : 'Publish discovery pointer' }}
+          </button>
+          <span v-if="!account" class="muted"> — connect a wallet first.</span>
+          <p v-if="publishDigest" class="muted">Published in tx {{ publishDigest.slice(0, 10) }}…</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Unlock -->
+    <section v-show="tab === 'unlock'" class="card">
+      <p class="muted">
+        Discover content sealed to an access gate and decrypt it with a pass you hold.
+      </p>
+      <label class="field">
+        <span>Access gate ID</span>
+        <input type="text" v-model="unlockGateId" placeholder="0x… gate object id" />
+      </label>
+      <button class="primary" :disabled="busy || !unlockGateId" @click="performDiscover">
+        {{ busy ? 'Working…' : 'Find sealed content' }}
+      </button>
+
+      <div v-if="discovered.length" style="margin-top:1rem">
+        <label class="field">
+          <span>Your pass NFT ID *</span>
+          <input type="text" v-model="unlockNftId" placeholder="0x… your AccessNFT for this gate" />
+        </label>
+        <label class="field checkbox">
+          <input type="checkbox" v-model="unlockSoulbound" />
+          <span>Pass is soulbound</span>
+        </label>
+
+        <div v-for="item in discovered" :key="item.contentId" class="card" style="margin:0.5rem 0">
+          <strong>{{ item.label || '(untitled)' }}</strong>
+          <p class="muted" style="word-break:break-all">blob {{ item.blobId }}</p>
+          <button class="primary" :disabled="busy || !account || !unlockNftId" @click="performUnlock(item)">
+            Unlock &amp; download
+          </button>
+          <span v-if="!account" class="muted"> — connect a wallet to decrypt.</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Decrypt -->
+    <section v-show="tab === 'decrypt'" class="card">
+      <label class="field">
+        <span>Manifest (paste JSON or upload)</span>
+        <textarea v-model="decManifestText" placeholder='{ "policyType": "...", "id": "...", "blobId": "..." }'></textarea>
+      </label>
+      <input type="file" accept="application/json,.json" @change="onManifestFile" />
+
+      <template v-if="decProvider">
+        <p class="muted" style="margin-top:0.75rem">
+          Policy: {{ decProvider.describe().label }} — {{ decProvider.describe().help }}
+        </p>
+        <label
+          v-for="f in decProvider.describe().decryptFields"
+          :key="f.name"
+          class="field"
+          :class="{ checkbox: f.kind === 'boolean' }"
+        >
+          <span>{{ f.label }}<template v-if="f.required"> *</template></span>
+          <input v-if="f.kind === 'datetime'" type="datetime-local" v-model="decValues[f.name]" />
+          <input v-else-if="f.kind === 'boolean'" type="checkbox" v-model="decValues[f.name]" />
+          <input
+            v-else
+            type="text"
+            v-model="decValues[f.name]"
+            :placeholder="decManifest?.params?.[f.name] != null ? String(decManifest.params[f.name]) : f.help"
+          />
+        </label>
+      </template>
+      <p v-else-if="decManifestText.trim()" class="muted">Unrecognised or invalid manifest.</p>
+
+      <button class="primary" :disabled="busy || !decProvider" @click="performDecrypt">
+        {{ busy ? 'Working…' : 'Decrypt' }}
+      </button>
+    </section>
+
+    <p v-if="status" class="status muted">{{ status }}</p>
+
+    <p class="muted disclaimer">
+      Decryption keys are released by a threshold committee of independent key servers. If enough
+      servers are unreachable, decryption pauses — storage and retrieval are unaffected.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  max-width: 780px;
+  margin: 0 auto;
+  flex: 1;
+}
+
+.notice {
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-radius: 10px;
+  padding: 0.7rem 0.9rem;
+  margin: 0.75rem 0;
+  font-size: 0.9rem;
+}
+.notice--warn { background: color-mix(in srgb, #d29922 15%, transparent); }
+.notice--error { background: color-mix(in srgb, #f85149 18%, transparent); }
+
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin: 1rem 0;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+.tabs button {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 0.5rem 0.9rem;
+  cursor: pointer;
+  opacity: 0.7;
+  border-bottom: 2px solid transparent;
+}
+.tabs button.active {
+  opacity: 1;
+  border-bottom-color: var(--accent, #c0503f);
+}
+
+.card {
+  background: var(--surface, #1e1917);
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 12px;
+  padding: 1rem 1.1rem;
+  margin: 0.75rem 0;
+}
+
+label.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin: 0.6rem 0;
+  font-size: 0.9rem;
+}
+label.field.checkbox {
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+input[type='text'],
+input[type='datetime-local'],
+textarea,
+select {
+  background: var(--bg, #14100f);
+  color: inherit;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-radius: 8px;
+  padding: 0.5rem 0.6rem;
+  font: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+textarea { min-height: 6rem; resize: vertical; font-family: ui-monospace, monospace; font-size: 0.8rem; }
+
+button.primary {
+  background: var(--accent, #c0503f);
+  color: #fff;
+  border: 0;
+  border-radius: 8px;
+  padding: 0.55rem 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+button.primary:disabled { opacity: 0.5; cursor: default; }
+
+button.link {
+  background: transparent;
+  border: 0;
+  color: var(--accent, #c0503f);
+  cursor: pointer;
+  padding: 0;
+  font: inherit;
+}
+
+pre.manifest {
+  background: var(--bg, #14100f);
+  border-radius: 8px;
+  padding: 0.7rem;
+  overflow-x: auto;
+  font-size: 0.75rem;
+}
+
+.muted { color: var(--muted, #a89b96); font-size: 0.85rem; }
+.status { font-size: 0.85rem; margin-top: 0.5rem; }
+.disclaimer { margin-top: 2rem; }
+</style>

package/src/config.ts

@@ -0,0 +1,69 @@
+// Build-time configuration (Vite inlines VITE_* at build). All values are baked into the static
+// bundle via Docker --build-arg. See Dockerfile for the full list.
+import type { KeyServerConfig } from '@meddleware/seal-client'
+
+export type Network = 'testnet' | 'mainnet'
+
+const env = (import.meta as unknown as { env?: Record<string, string | undefined> }).env ?? {}
+
+export const NETWORK: Network = (env.VITE_NETWORK as Network) || 'testnet'
+
+/** Read a per-network var, e.g. netEnv('VITE_SEAL_PACKAGE_ID') → VITE_SEAL_PACKAGE_ID_TESTNET. */
+function netEnv(base: string): string | undefined {
+  return env[`${base}_${NETWORK.toUpperCase()}`]
+}
+
+function csv(v: string | undefined): string[] {
+  return (v ?? '').split(',').map((s) => s.trim()).filter(Boolean)
+}
+
+export const RPC_URLS: Record<Network, string> = {
+  testnet: env.VITE_RPC_TESTNET || 'https://fullnode.testnet.sui.io:443',
+  mainnet: env.VITE_RPC_MAINNET || 'https://fullnode.mainnet.sui.io:443',
+}
+
+/** Published `seal_policies` package id for this network (required to encrypt/decrypt). */
+export const SEAL_PACKAGE_ID: string =
+  netEnv('VITE_SEAL_PACKAGE_ID') ||
+  // Meddleware's canonical testnet deployment — override with VITE_SEAL_PACKAGE_ID_TESTNET
+  (NETWORK === 'testnet'
+    ? '0x9f0563bfe42fbd29932cd280cc47efe17f5339b4dc569eb110114665eecc231e'
+    : '')
+
+/** Threshold `t` in the t-of-n committee (default 2). */
+export const SEAL_THRESHOLD = Number(env.VITE_SEAL_THRESHOLD || '2')
+
+/**
+ * The key-server committee. Object ids and aggregator URLs are supplied as parallel CSV lists
+ * (index-aligned); aggregatorUrl is required for committee-mode servers.
+ */
+export const SEAL_SERVERS: KeyServerConfig[] = (() => {
+  const ids = csv(netEnv('VITE_SEAL_SERVER_OBJECT_IDS'))
+  const aggs = csv(netEnv('VITE_SEAL_AGGREGATOR_URLS'))
+  return ids.map((objectId, i) => ({ objectId, weight: 1, aggregatorUrl: aggs[i] }))
+})()
+
+/** Walrus HTTP publisher/aggregator for storing/reading the opaque ciphertext blob. */
+export const WALRUS_PUBLISHER: string =
+  netEnv('VITE_WALRUS_PUBLISHER') ||
+  (NETWORK === 'mainnet'
+    ? 'https://publisher.walrus.space'
+    : 'https://publisher.walrus-testnet.walrus.space')
+
+export const WALRUS_AGGREGATOR: string =
+  netEnv('VITE_WALRUS_AGGREGATOR') ||
+  (NETWORK === 'mainnet'
+    ? 'https://aggregator.walrus.space'
+    : 'https://aggregator.walrus-testnet.walrus.space')
+
+/** Default blob lifetime (Walrus storage epochs). */
+export const WALRUS_EPOCHS = Number(env.VITE_WALRUS_EPOCHS || '5')
+
+/**
+ * Seal committee mode is testnet-only today. On mainnet the app shows a "pending" notice and
+ * disables sealing until the committee is available there.
+ */
+export const MAINNET_PENDING = NETWORK === 'mainnet'
+
+/** True when the on-chain policy package + committee are configured for the active network. */
+export const SEAL_CONFIGURED = Boolean(SEAL_PACKAGE_ID) && SEAL_SERVERS.length > 0

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+// @meddleware/seal-ui — library entry.
+//
+// Exports the core Sealed Storage tool view (no app shell) for inline embedding in the dashboard.
+// The standalone SPA (App.vue + main.ts) is unaffected and still builds/deploys as before.
+//
+// SealView's styles are scoped, so consumers need only the shared design tokens + UI base at
+// their entry (not seal-ui's global styles.css):
+//   import '@meddleware/design-tokens/tokens.css'
+//   import '@meddleware/ui/base.css'
+
+export { default as SealView } from './components/SealView.vue'

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/ui/base.css'
+import './styles.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/seal.ts

@@ -0,0 +1,31 @@
+// Wires the shared @meddleware/seal-client into this app: one registry (drives the policy picker)
+// and one SealController (encrypt/decrypt over the configured committee). Module singletons.
+//
+// SealController is loaded lazily (dynamic import) so @mysten/seal and @noble/curves are kept
+// out of the initial bundle — they're only needed when the user triggers encrypt/decrypt.
+import { createDefaultRegistry, type PolicyRegistry } from '@meddleware/seal-client'
+import type { SealController } from '@meddleware/seal-client/controller'
+import { getSuiClient } from './wallet.js'
+import { NETWORK, SEAL_PACKAGE_ID, SEAL_THRESHOLD, SEAL_SERVERS } from './config.js'
+
+/** The policy registry (nft-gate + time-lock as peers). Iterate `list()` to render the picker. */
+export const registry: PolicyRegistry = createDefaultRegistry()
+
+let controller: SealController | null = null
+
+/** Lazily build the SealController from build-time config + the shared registry. */
+export async function getSealController(): Promise<SealController> {
+  if (!controller) {
+    const { SealController } = await import('@meddleware/seal-client/controller')
+    controller = new SealController(
+      {
+        suiClient: getSuiClient(NETWORK),
+        packageId: SEAL_PACKAGE_ID,
+        threshold: SEAL_THRESHOLD,
+        serverConfigs: SEAL_SERVERS,
+      },
+      registry,
+    )
+  }
+  return controller
+}

package/src/sealed-content.ts

@@ -0,0 +1,45 @@
+// Discover on-chain SealedContent pointers for a gate by indexing the SealedContentPublished
+// event. Uses the gRPC client's listEvents + a client-side gate_id filter (no indexer needed).
+import { sealedContentEventType, type SealedContentPointer } from '@meddleware/seal-client'
+import { getSuiClient } from './wallet.js'
+import { SEAL_PACKAGE_ID } from './config.js'
+
+function normId(id: string): string {
+  const lower = id.toLowerCase()
+  return lower.startsWith('0x') ? lower : `0x${lower}`
+}
+
+interface RawEvent {
+  content_id?: string
+  gate_id?: string
+  blob_id?: string
+  seal_id?: string
+  label?: string
+  publisher?: string
+}
+
+/** All published pointers whose `gate_id` matches, newest first. */
+export async function discoverSealedContent(gateId: string): Promise<SealedContentPointer[]> {
+  if (!SEAL_PACKAGE_ID) throw new Error('Seal policy package is not configured.')
+  const client = getSuiClient()
+  // gRPC listEvents returns ascending by default (no cursor → no descending option); reverse at end.
+  const res = await client.listEvents({
+    filter: { eventType: sealedContentEventType(SEAL_PACKAGE_ID) },
+    limit: 200,
+  })
+  const target = normId(gateId)
+  const out: SealedContentPointer[] = []
+  for (const ev of res.events) {
+    const p = ev.json as RawEvent | undefined
+    if (!p?.gate_id || normId(p.gate_id) !== target) continue
+    out.push({
+      contentId: p.content_id ?? '',
+      gateId: p.gate_id,
+      blobId: p.blob_id ?? '',
+      sealId: p.seal_id ?? '',
+      label: p.label ?? '',
+      publisher: p.publisher ?? '',
+    })
+  }
+  return out.reverse()
+}

package/src/styles.css

@@ -0,0 +1,29 @@
+/* Sealed Storage standalone-app globals. Colours come from @meddleware/design-tokens.
+ *
+ * Only genuinely global element styling lives here (body reset, #app centering). The tool UI's
+ * component styles (.card, .field, .primary, .tabs, .notice, .manifest, .muted, inputs, …) are
+ * SCOPED inside src/components/SealView.vue so the view can be embedded in the dashboard without
+ * this stylesheet — importing it globally would restyle the host's body / #app / bare inputs.
+ * This file is imported only by the standalone entry (src/main.ts). */
+
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  background: var(--bg, #14100f);
+  color: var(--text, #f3ece9);
+}
+
+#app {
+  max-width: 780px;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem 4rem;
+}
+
+h1 {
+  font-size: 1.4rem;
+  margin: 0;
+}

package/src/wallet.ts

@@ -0,0 +1,52 @@
+// Thin seal-ui shim over the shared @meddleware/wallet-adapter singleton.
+//
+// The adapter is network-agnostic (RPC URL passed per call); this shim binds seal-ui's RPC_URLS
+// so call sites keep the ergonomics (`getSuiClient()` defaulting to the active network,
+// `signAndExecute(tx)`). Because the adapter is a module singleton, the wallet connection is
+// shared with any other tool view rendered in the same window (e.g. the dashboard).
+import {
+  useWallet as useWalletBase,
+  getSuiClient as getSuiClientBase,
+  buildExecutor as buildExecutorBase,
+} from '@meddleware/wallet-adapter'
+import type { Transaction } from '@mysten/sui/transactions'
+import { NETWORK, RPC_URLS, type Network } from './config.js'
+
+/** Memoised Sui JSON-RPC client for the network (defaults to the active network). */
+export function getSuiClient(network: Network = NETWORK) {
+  return getSuiClientBase(network, RPC_URLS[network])
+}
+
+/** Sign a personal message with the connected wallet (mints a Seal SessionKey). */
+export function signPersonalMessage(message: Uint8Array): Promise<{ signature: string }> {
+  return useWalletBase().signPersonalMessage(message)
+}
+
+/** Sign + execute a PTB with the connected wallet, returning the transaction digest. */
+export async function signAndExecute(
+  tx: Transaction,
+  network: Network = NETWORK,
+): Promise<{ digest: string }> {
+  const executor = await buildExecutorBase(network, RPC_URLS[network])
+  return executor.signAndExecute(tx)
+}
+
+/**
+ * Wallet composable bound to seal-ui's network config. Delegates to the shared adapter singleton;
+ * Seal needs `sui:signPersonalMessage` (SessionKey) and `sui:signTransaction` (publish pointer),
+ * so both are requested for discovery.
+ */
+export function useWallet() {
+  const base = useWalletBase({ requiredFeatures: ['sui:signPersonalMessage', 'sui:signTransaction'] })
+  return {
+    wallets: base.wallets,
+    currentWallet: base.currentWallet,
+    account: base.account,
+    connecting: base.connecting,
+    error: base.error,
+    connect: base.connect,
+    disconnect: base.disconnect,
+    signPersonalMessage,
+    signAndExecute,
+  }
+}

package/src/walrus.ts

@@ -0,0 +1,30 @@
+// Ciphertext storage via the Walrus HTTP publisher/aggregator. The blob is opaque (already
+// Seal-encrypted), so we need no wallet, no wasm, and no @mysten/walrus SDK here — just fetch.
+// (Routing uploads through the Meddleware relay to capture the tip/commission is a documented
+// follow-up; see the Sealed Storage plan.)
+import { WALRUS_PUBLISHER, WALRUS_AGGREGATOR, WALRUS_EPOCHS } from './config.js'
+
+interface PublishResponse {
+  newlyCreated?: { blobObject?: { blobId?: string } }
+  alreadyCertified?: { blobId?: string }
+}
+
+/** Store bytes on Walrus; returns the blob id. */
+export async function storeBlob(bytes: Uint8Array, epochs = WALRUS_EPOCHS): Promise<string> {
+  const res = await fetch(`${WALRUS_PUBLISHER}/v1/blobs?epochs=${epochs}`, {
+    method: 'PUT',
+    body: bytes as BodyInit,
+  })
+  if (!res.ok) throw new Error(`Walrus publisher error ${res.status}: ${await res.text()}`)
+  const json = (await res.json()) as PublishResponse
+  const blobId = json.newlyCreated?.blobObject?.blobId ?? json.alreadyCertified?.blobId
+  if (!blobId) throw new Error('Walrus publisher returned no blob id.')
+  return blobId
+}
+
+/** Read bytes back from Walrus by blob id. */
+export async function readBlob(blobId: string): Promise<Uint8Array> {
+  const res = await fetch(`${WALRUS_AGGREGATOR}/v1/blobs/${encodeURIComponent(blobId)}`)
+  if (!res.ok) throw new Error(`Walrus aggregator error ${res.status}`)
+  return new Uint8Array(await res.arrayBuffer())
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// @mysten/seal is pure JS (no wasm). Ciphertext storage uses the Walrus HTTP publisher/aggregator
+// (plain fetch), so no @mysten/walrus wasm to exclude here.
+export default defineConfig({
+  plugins: [vue()],
+})