@meddleware/walrus-ui 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/walrus-ui",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "homepage": "https://docs.meddleware.co.uk/blockchain/sui/walrus-storage/",
   "description": "Standalone Vue 3 SPA for uploading blobs to Walrus decentralised storage and managing owned blobs — wallet-connected, NFT-gated relay support.",
   "author": "Meddleware <dev@meddleware.co.uk>",
@@ -35,21 +35,25 @@
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
+    "lint:html": "html-validate \"src/**/*.vue\""
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.5",
-    "@meddleware/nft-gate-client": "^0.0.9",
-    "@meddleware/ui": "^0.1.21",
-    "@meddleware/wallet-adapter": "^0.0.7",
-    "@meddleware/walrus-client": "^0.0.15",
-    "@meddleware/walrus-relay": "^0.1.15",
-    "@mysten/sui": "^2.31.0",
+    "@meddleware/design-tokens": "^0.1.7",
+    "@meddleware/nft-gate-client": "^0.0.11",
+    "@meddleware/ui": "^0.1.28",
+    "@meddleware/wallet-adapter": "^0.0.9",
+    "@meddleware/walrus-client": "^0.0.17",
+    "@meddleware/walrus-relay": "^0.1.18",
+    "@mysten/sui": "^2.33.0",
     "@mysten/wallet-standard": "^0.21.0",
-    "@mysten/walrus": "~1.2.28",
+    "@mysten/walrus": "~1.2.31",
     "@mysten/walrus-wasm": "~0.3.1",
     "vue": "^3.5.43"
   },
@@ -57,12 +61,30 @@
     "@playwright/test": "~1.63.0",
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.0",
+    "html-validate": "^11.16.1",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
+    "postcss": "^8.4.49",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
     "typescript": "~6.0.0",
     "vite": "^8.3.0",
     "vitest": "~5.0.1",
+    "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "~3.3.0"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/src/App.vue

@@ -23,7 +23,9 @@ const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/
       </template>
     </AppHeader>
 
-    <WalrusView />
+    <div class="app__content">
+      <WalrusView />
+    </div>
 
     <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
   </div>
@@ -36,6 +38,17 @@ const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/
   flex-direction: column;
 }
 
+/* Centre the tool at the shared tool-content width when running standalone. The dashboard
+   supplies its own width container, so this lives in the shell, not WalrusView. */
+.app__content {
+  flex: 1;
+  width: 100%;
+  max-width: var(--mw-tool-content-max);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 1.5rem 1.25rem 4rem;
+}
+
 .brand-title {
   font: inherit;
   margin: 0;

package/src/components/MyBlobs.vue

@@ -93,7 +93,7 @@ function refreshPending(): void {
 }
 
 // ── Extend ──────────────────────────────────────────────────────────────────
-let extendReq: Record<string, number> = {}
+const extendReq: Record<string, number> = {}
 
 // User picked an amount → clamp and (re)price it. We estimate only on interaction, not for every row
 // on load, to avoid spinning up a Walrus client per blob.

package/src/components/WalrusView.vue

@@ -10,7 +10,7 @@ import {
   useAccessGate,
 } from '@meddleware/walrus-relay'
 import type { UploadResult, UploadProgress, ExistingCopy } from '@meddleware/walrus-relay'
-import { AppTabNav, CopyableAddress, ExplorerLink, UiNotice, suiExplorerUrl, safeHref, type AppTab } from '@meddleware/ui'
+import { AppTabNav, CopyableAddress, ExplorerLink, UiNotice, UiTabPanel, UiToolIntro, suiExplorerUrl, safeHref, type AppTab } from '@meddleware/ui'
 // Lightweight URL import — just the wasm asset URL (does not pull the walrus client).
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 import { WalletGuard } from '@meddleware/wallet-adapter'
@@ -230,110 +230,101 @@ function onSettled(): void {
 </script>
 
 <template>
-  <div class="page">
-    <p class="sub">Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</p>
+    <UiToolIntro>Upload and manage blobs on Walrus decentralised storage ({{ NETWORK }}).</UiToolIntro>
 
-    <AppTabNav :tabs="TABS" v-model="activeTab" aria-label="Feature tabs" style="margin: 1rem 0 0.5rem" />
+    <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="walrus" aria-label="Feature tabs" class="walrus-tabs" />
 
     <WalletGuard message="Connect a Sui wallet to upload and manage your blobs.">
-      <template v-if="activeTab === 'upload'">
-        <!-- Gated + no access: replace the form with the purchase CTA so the user is guided to buy
-             first, rather than facing a disabled form. -->
-        <div v-if="gateState.gateConfigured && gateState.hasAccess.value === false" class="gate-card">
-          <AccessGateCta
-            :gate-configured="gateState.gateConfigured"
-            :has-access="gateState.hasAccess.value"
-            :busy="purchasing"
-            :price-mist="gate?.priceMist ?? null"
-            @purchase="onPurchase"
-          />
-        </div>
-
-        <!-- Ownership check still in flight. -->
-        <p
-          v-else-if="gateState.gateConfigured && gateState.hasAccess.value === null"
-          class="checking"
-        >
-          Checking access…
-        </p>
-
-        <!-- Access held (or ungated relay): show the upload form. -->
-        <template v-else>
-          <!-- Gated relays spend a credit before the file is stored — make the "attempt, not a
-               guarantee" nature explicit, while reassuring that attempts resume. -->
-          <UiNotice v-if="gateState.gateConfigured" type="info" class="credit-notice">
-            Uploading spends <strong>one credit</strong> from your access NFT (an on-chain step)
-            before the file is stored — it pays for an upload <em>attempt</em>, not a guaranteed
-            upload. Your attempt resumes automatically, even after a page reload if you re-select
-            the same file, so a credit is normally not lost. A credit is spent without a completed
-            upload only if you abandon the upload entirely, cancel a required wallet approval, or
-            wait long enough that the reserved storage lapses.
-          </UiNotice>
-
-          <WalrusUpload
-            :hosts="relayHosts(NETWORK)"
-            :connected="!!account"
-            :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
-            :perform-upload="performUpload"
-            :estimate-storage-cost="estimateUploadStorageCost"
-            @uploaded="onUploaded"
-            @settled="onSettled"
-            @manage-existing="onManageExisting"
-          />
-
-          <section v-if="result" class="result">
-            <h2>Uploaded ✓</h2>
-            <p>
-              <strong>Blob ID:</strong>
-              <CopyableAddress :address="result.blobId" label="Copy blob ID">
-                <ExplorerLink
-                  :href="walruscanBlobUrl(NETWORK, result.blobId)"
-                  :value="result.blobId"
-                  :chars="[8, 6]"
-                />
-              </CopyableAddress>
-            </p>
-            <p>
-              <strong>URL:</strong>
-              <a :href="safeHref(result.url)" target="_blank" rel="noopener noreferrer">{{ result.url }}</a>
-            </p>
-            <p v-if="result.digest">
-              <strong>Certify tx:</strong>
-              <CopyableAddress :address="result.digest" label="Copy transaction digest">
-                <ExplorerLink
-                  :href="suiExplorerUrl('txblock', result.digest, NETWORK)"
-                  :value="result.digest"
-                  :chars="[8, 6]"
-                />
-              </CopyableAddress>
-            </p>
-          </section>
+      <UiTabPanel id-prefix="walrus" :tab="activeTab">
+        <template v-if="activeTab === 'upload'">
+          <!-- Gated + no access: replace the form with the purchase CTA so the user is guided to buy
+               first, rather than facing a disabled form. -->
+          <div v-if="gateState.gateConfigured && gateState.hasAccess.value === false" class="gate-card">
+            <AccessGateCta
+              :gate-configured="gateState.gateConfigured"
+              :has-access="gateState.hasAccess.value"
+              :busy="purchasing"
+              :price-mist="gate?.priceMist ?? null"
+              @purchase="onPurchase"
+            />
+          </div>
+
+          <!-- Ownership check still in flight. -->
+          <p
+            v-else-if="gateState.gateConfigured && gateState.hasAccess.value === null"
+            class="checking"
+          >
+            Checking access…
+          </p>
+
+          <!-- Access held (or ungated relay): show the upload form. -->
+          <template v-else>
+            <!-- Gated relays spend a credit before the file is stored — make the "attempt, not a
+                 guarantee" nature explicit, while reassuring that attempts resume. -->
+            <UiNotice v-if="gateState.gateConfigured" type="info" class="credit-notice">
+              Uploading spends <strong>one credit</strong> from your access NFT (an on-chain step)
+              before the file is stored — it pays for an upload <em>attempt</em>, not a guaranteed
+              upload. Your attempt resumes automatically, even after a page reload if you re-select
+              the same file, so a credit is normally not lost. A credit is spent without a completed
+              upload only if you abandon the upload entirely, cancel a required wallet approval, or
+              wait long enough that the reserved storage lapses.
+            </UiNotice>
+
+            <WalrusUpload
+              :hosts="relayHosts(NETWORK)"
+              :connected="!!account"
+              :access="{ gateConfigured: gateState.gateConfigured, hasAccess: gateState.hasAccess }"
+              :perform-upload="performUpload"
+              :estimate-storage-cost="estimateUploadStorageCost"
+              @uploaded="onUploaded"
+              @settled="onSettled"
+              @manage-existing="onManageExisting"
+            />
+
+            <section v-if="result" class="result">
+              <h2>Uploaded ✓</h2>
+              <p>
+                <strong>Blob ID:</strong>
+                <CopyableAddress :address="result.blobId" label="Copy blob ID">
+                  <ExplorerLink
+                    :href="walruscanBlobUrl(NETWORK, result.blobId)"
+                    :value="result.blobId"
+                    :chars="[8, 6]"
+                  />
+                </CopyableAddress>
+              </p>
+              <p>
+                <strong>URL:</strong>
+                <a :href="safeHref(result.url)" target="_blank" rel="noopener noreferrer">{{ result.url }}</a>
+              </p>
+              <p v-if="result.digest">
+                <strong>Certify tx:</strong>
+                <CopyableAddress :address="result.digest" label="Copy transaction digest">
+                  <ExplorerLink
+                    :href="suiExplorerUrl('txblock', result.digest, NETWORK)"
+                    :value="result.digest"
+                    :chars="[8, 6]"
+                  />
+                </CopyableAddress>
+              </p>
+            </section>
+          </template>
         </template>
-      </template>
 
-      <MyBlobs
-        v-if="activeTab === 'blobs'"
-        :address="account?.address ?? null"
-        :build-executor="() => buildExecutor()"
-        :highlight-blob-id="highlightBlobId"
-      />
+        <MyBlobs
+          v-if="activeTab === 'blobs'"
+          :address="account?.address ?? null"
+          :build-executor="() => buildExecutor()"
+          :highlight-blob-id="highlightBlobId"
+        />
+      </UiTabPanel>
     </WalletGuard>
-  </div>
 </template>
 
 <style scoped>
-.page {
-  max-width: 640px;
-  margin: 0 auto;
-  padding: 2rem 1.25rem 4rem;
-  flex: 1;
+.walrus-tabs {
+  margin: 1rem 0 0.5rem;
 }
-
-.sub {
-  color: var(--muted);
-  margin: 0.25rem 0 0;
-}
-
 .result {
   margin-top: 1.5rem;
   padding: 1rem;