@meddleware/seal-ui 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/seal-ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "homepage": "https://docs.meddleware.co.uk/blockchain/sui/sealed-storage/",
   "description": "Standalone Vue 3 SPA for Sealed Storage — client-side Seal encryption + access-gated, decentralised Walrus storage on Sui.",
   "author": "MeddleWare <meddleware@proton.me>",
@@ -32,26 +32,31 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/seal-client": "^0.0.3",
-    "@meddleware/ui": "^0.1.11",
-    "@meddleware/wallet-adapter": "^0.0.5",
-    "@mysten/sui": "^2.30.0",
-    "@mysten/wallet-standard": "^0.20.0",
-    "vue": "^3.5.40"
+    "@meddleware/design-tokens": "^0.1.3",
+    "@meddleware/seal-client": "^0.0.5",
+    "@meddleware/ui": "^0.1.13",
+    "@meddleware/wallet-adapter": "^0.0.6",
+    "@mysten/sui": "^2.31.0",
+    "@mysten/wallet-standard": "^0.21.0",
+    "vue": "^3.5.43"
   },
   "devDependencies": {
     "@types/node": "~24.12.2",
-    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.0",
     "typescript": "~6.0.0",
-    "vite": "^8.1.5",
-    "vue-tsc": "~3.3.0"
+    "vite": "^8.3.0",
+    "vitest": "~5.0.1",
+    "vue-tsc": "~3.3.11"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"

package/src/App.vue

@@ -7,6 +7,7 @@ import SealView from './components/SealView.vue'
 
 const { mode, set } = useColorMode('dark')
 const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk/blockchain/sui/sealed-storage/'
+const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/sui/sealed-storage/'
 </script>
 
 <template>
@@ -23,7 +24,7 @@ const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk
 
     <SealView />
 
-    <AppFooter :docs-url="DOCS_URL" />
+    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
   </div>
 </template>
 

package/src/components/SealView.vue

@@ -17,6 +17,7 @@ import {
   type SealedContentPointer,
   type FieldSuggestion,
 } from '@meddleware/seal-client'
+import { checkManifestForNetwork } from '../manifest-guard.js'
 import { WalletGuard } from '@meddleware/wallet-adapter'
 import { useWallet, getSuiClient } from '../wallet.js'
 import { registry, getSealController } from '../seal.js'
@@ -175,14 +176,13 @@ function downloadManifest(): void {
 // ── 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
-  }
-})
+// Validate the pasted/loaded manifest through the shared schema guard (rejects malformed shapes)
+// AND enforce that it targets the network this app is built for — a manifest sealed on another
+// network references a package + committee that don't exist here and can never decrypt. The
+// `decManifestError` is surfaced next to the input so a rejection explains itself.
+const decCheck = computed(() => checkManifestForNetwork(decManifestText.value, NETWORK))
+const decManifest = computed<SealedManifest | null>(() => decCheck.value.manifest)
+const decManifestError = computed<string | null>(() => decCheck.value.error)
 const decProvider = computed(() =>
   decManifest.value ? (providers.find((p) => p.type === decManifest.value?.policyType) ?? null) : null,
 )
@@ -494,6 +494,7 @@ async function performUnlock(item: SealedContentPointer): Promise<void> {
           />
         </label>
       </template>
+      <p v-else-if="decManifestError" class="muted">{{ decManifestError }}</p>
       <p v-else-if="decManifestText.trim()" class="muted">Unrecognised or invalid manifest.</p>
 
       <button class="primary" :disabled="busy || !decProvider" @click="performDecrypt">

package/src/manifest-guard.ts

@@ -0,0 +1,30 @@
+import { parseSealedManifest, type SealedManifest } from '@meddleware/seal-client'
+
+/**
+ * Result of validating a pasted/loaded manifest: either the parsed manifest, or a human-readable
+ * reason it was rejected. An empty input is `{ manifest: null, error: null }` (nothing to show yet).
+ */
+export type ManifestCheck =
+  | { manifest: SealedManifest; error: null }
+  | { manifest: null; error: string | null }
+
+/**
+ * Validate a manifest string for use on `network`. Rejects a malformed shape (via the shared
+ * `parseSealedManifest` schema guard) and a manifest sealed for a different network — the latter
+ * references a policy package + key-server committee that don't exist here and can never decrypt.
+ */
+export function checkManifestForNetwork(text: string, network: string): ManifestCheck {
+  if (!text.trim()) return { manifest: null, error: null }
+  try {
+    const manifest = parseSealedManifest(text)
+    if (manifest.network !== network) {
+      return {
+        manifest: null,
+        error: `This manifest is for '${manifest.network}', but this app is on '${network}'. It cannot be decrypted here.`,
+      }
+    }
+    return { manifest, error: null }
+  } catch (e) {
+    return { manifest: null, error: e instanceof Error ? e.message : 'Invalid manifest.' }
+  }
+}