@meddleware/dao-ui 0.1.19 → 0.1.21

package/README.md

@@ -4,8 +4,9 @@ The **Meddleware DAO console** — a standalone Vue 3 SPA (and embeddable librar
 platform's on-chain state on Sui: treasury balance, commission policy, the community access gates the
 treasury controls, and a live feed of access-gate activity.
 
-Deployed at `sui-dao.meddleware.co.uk` and also embedded inline in the tools hub
-(`sui.meddleware.co.uk`) as the default view.
+Deployed at `sui-dao.meddleware.co.uk`. It will also be embedded inline in the tools hub
+(`dash.meddleware.co.uk`) once governance is available; until then the hub shows the read-only
+Treasury console (`@meddleware/treasury-ui`) in its place.
 
 ## What it shows
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "homepage": "https://docs.meddleware.co.uk/blockchain/sui/dao/",
   "description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
@@ -23,7 +23,11 @@
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "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\""
   },
   "exports": {
     ".": {
@@ -40,23 +44,41 @@
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.27",
-    "@meddleware/wallet-adapter": "^0.0.8",
-    "@mysten/sui": "^2.31.0",
+    "@meddleware/design-tokens": "^0.1.7",
+    "@meddleware/ui": "^0.1.28",
+    "@meddleware/wallet-adapter": "^0.0.10",
+    "@mysten/sui": "^2.33.1",
     "vue": "^3.5.43"
   },
   "devDependencies": {
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.5.1",
+    "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.0",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
+    "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.11"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/src/App.vue

@@ -22,7 +22,7 @@ const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/
       </template>
     </AppHeader>
 
-    <DaoView style="flex: 1; min-height: 0" />
+    <DaoView />
 
     <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL">
       <template #start>

package/src/DaoView.vue

@@ -7,9 +7,7 @@
 // DaoView is consumed as a library by the dashboard or any other host.
 import './styles/qt.css'
 import { ref, computed } from 'vue'
-import { UiToolbar, UiToolbarButton } from '@meddleware/ui'
-import TabBar from './components/TabBar.vue'
-import StatusBar from './components/StatusBar.vue'
+import { AppTabNav, UiStatusBar, UiTabPanel, UiToolbar, type AppTab } from '@meddleware/ui'
 import OverviewTab from './tabs/OverviewTab.vue'
 import TreasuryTab from './tabs/TreasuryTab.vue'
 import ProposalsTab from './tabs/ProposalsTab.vue'
@@ -17,10 +15,9 @@ import GovernanceTab from './tabs/GovernanceTab.vue'
 import HistoryTab from './tabs/HistoryTab.vue'
 import { useDaoEvents } from './composables/useDaoEvents.js'
 import { useEpoch } from './composables/useEpoch.js'
+import { NETWORK } from './config.js'
 
-import type { Tab } from './components/TabBar.vue'
-
-const TABS: Tab[] = [
+const TABS: AppTab[] = [
   { id: 'overview',    label: 'Overview' },
   { id: 'treasury',    label: 'Treasury' },
   { id: 'proposals',   label: 'Proposals' },
@@ -46,20 +43,14 @@ const { epoch } = useEpoch()
 
 <template>
   <div class="dao-view">
-    <UiToolbar>
-      <UiToolbarButton @click="activeTab = 'overview'">🏛 Meddleware DAO</UiToolbarButton>
-    </UiToolbar>
+    <UiToolbar :actions="[{ id: 'home', label: '🏛 Meddleware DAO' }]" @action="activeTab = 'overview'" />
 
-    <TabBar :tabs="TABS" v-model="activeTab" />
+    <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="dao" variant="raised" aria-label="DAO sections" />
 
-    <div class="dao-content">
+    <UiTabPanel id-prefix="dao" :tab="activeTab" class="dao-content">
       <component :is="activeComponent" />
-    </div>
+    </UiTabPanel>
 
-    <StatusBar
-      :epoch="epoch"
-      :last-refresh="lastRefresh"
-      :error="!!eventsError"
-    />
+    <UiStatusBar :network="NETWORK" :healthy="!eventsError" :epoch="epoch" :last-refresh="lastRefresh" />
   </div>
 </template>

package/src/components/ProposalRow.vue

@@ -33,36 +33,65 @@ function formatSui(mist: bigint): string {
 </script>
 
 <template>
-  <UiPanel style="margin-bottom: 8px">
-    <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px">
-      <div>
-        <UiBadge :variant="badgeVariant" style="margin-right: 6px">{{ proposal.status }}</UiBadge>
-        <strong style="font-size: 0.85rem">{{ proposal.title }}</strong>
-      </div>
-      <span class="dao-muted" style="white-space: nowrap; font-family: var(--mw-font-mono); font-size: 0.75rem">
+  <UiPanel class="proposal">
+    <header class="proposal__head">
+      <UiBadge :variant="badgeVariant">{{ proposal.status }}</UiBadge>
+      <h3 class="proposal__title">{{ proposal.title }}</h3>
+      <small class="proposal__epochs">
         <template v-if="epochsLeft !== null && epochsLeft > 0">{{ epochsLeft }} epochs left</template>
         <template v-else-if="epochsLeft !== null && epochsLeft <= 0">Expired</template>
-      </span>
-    </div>
+      </small>
+    </header>
 
-    <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">{{ proposal.description }}</p>
+    <p class="dao-muted proposal__desc">{{ proposal.description }}</p>
 
-    <div style="margin-bottom: 4px">
-      <div class="dao-progress">
-        <div class="dao-progress__fill" :style="{ width: `${pct}%` }" />
-      </div>
-      <div style="display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); font-family: var(--mw-font-mono); margin-top: 2px">
-        <span>{{ formatSui(proposal.contributedMist) }} SUI raised</span>
-        <span>{{ pct }}% of {{ formatSui(proposal.targetMist) }} SUI target</span>
-      </div>
-    </div>
+    <progress class="dao-progress" :value="pct" max="100" aria-label="Funding progress">{{ pct }}%</progress>
+    <p class="proposal__totals">
+      <span>{{ formatSui(proposal.contributedMist) }} SUI raised</span>
+      <span>{{ pct }}% of {{ formatSui(proposal.targetMist) }} SUI target</span>
+    </p>
 
-    <UiToolbarButton
-      disabled
-      title="Vault DAO governance module launching soon"
-      style="margin-top: 6px; opacity: 0.5; cursor: not-allowed"
-    >
+    <UiToolbarButton disabled title="Vault DAO governance module launching soon" class="proposal__contribute">
       Contribute
     </UiToolbarButton>
   </UiPanel>
 </template>
+
+<style scoped>
+.proposal {
+  margin-bottom: 8px;
+}
+.proposal__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.proposal__title {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+.proposal__epochs {
+  margin-inline-start: auto;
+  padding-inline-start: 8px;
+  white-space: nowrap;
+  font-family: var(--mw-font-mono);
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+.proposal__desc {
+  margin: 0 0 8px;
+}
+.proposal__totals {
+  display: flex;
+  justify-content: space-between;
+  margin: 2px 0 4px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  font-family: var(--mw-font-mono);
+}
+.proposal__contribute {
+  margin-top: 6px;
+}
+</style>

package/src/composables/useGates.ts

@@ -42,7 +42,7 @@ export function useGates() {
 
       // Fetch each Gate shared object referenced by the AdminCap's gate_id.
       const gateList = await Promise.all(
-        (objects ?? []).map(async (o: any): Promise<Gate | null> => {
+        (objects ?? []).map(async (o: { json?: { gate_id?: unknown } | null; object?: { json?: { gate_id?: unknown } | null } | null }): Promise<Gate | null> => {
           const capFields = o?.json ?? o?.object?.json
           const gateId = String(capFields?.gate_id ?? '')
           if (!gateId || gateId === 'undefined') return null

package/src/config.ts

@@ -14,7 +14,7 @@ export const RPC_URLS: Record<Network, string> = {
 export const ACCESS_GATE_PACKAGE_ID: Record<Network, string> = {
   testnet:
     import.meta.env.VITE_ACCESS_GATE_PACKAGE_ID_TESTNET ||
-    '0x0bedd0b27d993d3292ca6a5315f7562de8bc0ff3752b445b4c53252c76f2d20d',
+    '0x1a81ca177db039585e575beeeee4759466e55910e936a6733e38dbb65025eea4',
   mainnet: import.meta.env.VITE_ACCESS_GATE_PACKAGE_ID_MAINNET || '',
 }
 
@@ -22,7 +22,7 @@ export const ACCESS_GATE_PACKAGE_ID: Record<Network, string> = {
 export const PLATFORM_CONFIG_ID: Record<Network, string> = {
   testnet:
     import.meta.env.VITE_PLATFORM_CONFIG_ID_TESTNET ||
-    '0x7c5aed0ce7f29a4dfb60657858df31c12410a67098b4bcdd1d8cb1e531be4884',
+    '0xe3b949cabe9a0574c03dfc924fb3f96e6f959f2bb86d053ed6229a241c3a23f7',
   mainnet: import.meta.env.VITE_PLATFORM_CONFIG_ID_MAINNET || '',
 }
 

package/src/styles/qt.css

@@ -49,7 +49,7 @@
   gap: 10px;
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .dao-overview-cols {
     grid-template-columns: 1fr;
   }
@@ -57,21 +57,32 @@
 
 /* ── Proposal progress bar ───────────────────────────────────────────────── */
 
+/* A native <progress>: engines paint the track/value with their own pseudo-elements. */
 .dao-progress {
+  display: block;
+  width: 100%;
   height: 6px;
+  margin: 3px 0;
+  appearance: none;
   background: var(--lift);
   border: 1px solid var(--border);
   border-radius: 1px;
   overflow: hidden;
-  margin: 3px 0;
 }
 
-.dao-progress__fill {
-  height: 100%;
+.dao-progress::-webkit-progress-bar {
+  background: var(--lift);
+}
+
+.dao-progress::-webkit-progress-value {
   background: var(--accent);
   transition: width 0.3s ease;
 }
 
+.dao-progress::-moz-progress-bar {
+  background: var(--accent);
+}
+
 /* ── Info tooltip marker ─────────────────────────────────────────────────── */
 
 .dao-info {
@@ -102,6 +113,24 @@
   margin-top: 10px;
 }
 
+/* ── Layout utilities ────────────────────────────────────────────────────── */
+
+/* Vertical stack of panels within a tab. */
+.dao-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dao-stack--tight {
+  gap: 8px;
+}
+
+/* Key/value readouts stay compact rather than spanning a wide panel. */
+.dao-stat-grid {
+  max-width: 480px;
+}
+
 /* ── Misc text utilities ─────────────────────────────────────────────────── */
 
 .dao-mono {
@@ -109,6 +138,18 @@
   font-size: 0.8rem;
 }
 
+.dao-mono--sm {
+  font-size: 0.7rem;
+}
+
+.dao-nowrap {
+  white-space: nowrap;
+}
+
+.dao-flush {
+  margin: 0;
+}
+
 .dao-muted {
   color: var(--muted);
   font-size: 0.78rem;

package/src/tabs/GovernanceTab.vue

@@ -50,20 +50,20 @@ watch(
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; gap: 10px">
+  <div class="dao-stack gov">
     <UiPanel title="Platform Parameters">
-      <UiStatGrid style="max-width: 480px">
+      <UiStatGrid class="dao-stat-grid">
         <UiStatRow label="Commission rate">{{ commissionPct }}</UiStatRow>
         <UiStatRow label="Max commission cap">10.00% (1000 bps — on-chain hard cap)</UiStatRow>
         <UiStatRow label="Treasury address" align="left">
           <CopyableAddress v-if="config?.treasury" :address="config.treasury">
             <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
           </CopyableAddress>
-          <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
+          <span v-else class="dao-mono dao-mono--sm">—</span>
         </UiStatRow>
       </UiStatGrid>
 
-      <p class="dao-muted" style="margin: 10px 0 0; font-size: 0.72rem">
+      <p class="dao-muted gov__footnote">
         Parameters are governed by <code>PlatformAdminCap</code> on-chain.
         Commission is charged on every NFT access purchase:
         <code>commission_bps / 10000 × price</code> routes to treasury;
@@ -74,31 +74,31 @@ watch(
     <UiPanel title="Admin Actions">
       <!-- Not connected -->
       <template v-if="!account">
-        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+        <p class="dao-muted">
           Connect a wallet via the header to manage platform settings.
         </p>
       </template>
 
       <!-- Connected, checking -->
       <template v-else-if="capState === 'checking'">
-        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+        <p class="dao-muted">
           Checking capabilities for {{ account.address.slice(0, 10) }}…
         </p>
       </template>
 
       <!-- Connected, has PlatformAdminCap -->
       <template v-else-if="capState === 'found'">
-        <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">
-          <span style="color: var(--ok)">●</span>
+        <p class="dao-muted">
+          <span class="gov__ok" aria-hidden="true">●</span>
           <code>PlatformAdminCap</code> detected. Admin controls will appear here when implemented.
         </p>
       </template>
 
       <!-- Connected, no cap -->
       <template v-else-if="capState === 'not-found'">
-        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
-          <span>●</span>
-          Connected: {{ account.address.slice(0, 10) }}…{{ account.address.slice(-6) }}<br>
+        <p class="dao-muted">
+          <span aria-hidden="true">●</span>
+          Connected: {{ account.address.slice(0, 10) }}…{{ account.address.slice(-6) }}<br />
           This wallet does not hold <code>PlatformAdminCap</code> or <code>DaoAdminCap</code>.
           Privileged actions are not available.
         </p>
@@ -106,10 +106,23 @@ watch(
 
       <!-- Error -->
       <template v-else-if="capState === 'error'">
-        <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
+        <p class="dao-muted">
           Unable to verify capabilities. Check your connection and try again.
         </p>
       </template>
     </UiPanel>
   </div>
 </template>
+
+<style scoped>
+.gov p {
+  margin: 0;
+}
+.gov .gov__footnote {
+  margin-top: 10px;
+  font-size: 0.72rem;
+}
+.gov__ok {
+  color: var(--ok);
+}
+</style>

package/src/tabs/HistoryTab.vue

@@ -39,56 +39,72 @@ function badgeVariant(type: DaoEvent['type']): 'active' | 'closed' {
 </script>
 
 <template>
-  <div>
-    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px">
-      <p class="dao-section-title" style="margin: 0">On-Chain Events</p>
-      <UiToolbarButton :disabled="loading" @click="reload">
-        {{ loading ? 'Loading…' : 'Refresh' }}
-      </UiToolbarButton>
-    </div>
+  <header class="history__head">
+    <h2 class="dao-section-title">On-Chain Events</h2>
+    <UiToolbarButton :disabled="loading" @click="reload">
+      {{ loading ? 'Loading…' : 'Refresh' }}
+    </UiToolbarButton>
+  </header>
 
-    <p v-if="error" class="dao-muted">{{ error }}</p>
+  <p v-if="error" class="dao-muted">{{ error }}</p>
 
-    <UiDataTable v-if="pageEvents.length || loading" :empty="'No events'">
-      <template #head>
-        <th>Type</th>
-        <th>
-          Address
-          <abbr class="dao-info" title="The wallet address associated with this event (recipient, creator, or initiator depending on event type). Click to view in explorer; click the copy icon to copy the full address.">?</abbr>
-        </th>
-        <th>
-          Block
-          <abbr class="dao-info" title="Sui checkpoint sequence number — equivalent to a block height in other blockchains. Each checkpoint finalizes a batch of transactions; higher numbers are more recent.">?</abbr>
-        </th>
-        <th>
-          Transaction
-          <abbr class="dao-info" title="Transaction digest — a unique identifier for the transaction that emitted this event. Click to view in explorer; click the copy icon to copy the full digest.">?</abbr>
-        </th>
-      </template>
-      <tr v-for="ev in pageEvents" :key="ev.txDigest">
-        <td><UiBadge :variant="badgeVariant(ev.type)">{{ eventLabel[ev.type] }}</UiBadge></td>
-        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
-          <CopyableAddress v-if="ev.address && ev.address !== 'undefined'" :address="ev.address">
-            <ExplorerLink :href="suiExplorerUrl('account', ev.address, NETWORK)" :value="ev.address" />
-          </CopyableAddress>
-          <span v-else>—</span>
-        </td>
-        <td class="dao-mono" style="font-size: 0.72rem">
-          {{ ev.checkpoint ? '#' + ev.checkpoint : '—' }}
-        </td>
-        <td class="dao-mono" style="font-size: 0.72rem; white-space: nowrap">
-          <CopyableAddress :address="ev.txDigest" label="Copy transaction">
-            <ExplorerLink :href="suiExplorerUrl('txblock', ev.txDigest, NETWORK)" :value="ev.txDigest" />
-          </CopyableAddress>
-        </td>
-      </tr>
-    </UiDataTable>
-    <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
+  <UiDataTable v-if="pageEvents.length || loading" :empty="'No events'">
+    <template #head>
+      <th>Type</th>
+      <th>
+        Address
+        <abbr class="dao-info" title="The wallet address associated with this event (recipient, creator, or initiator depending on event type). Click to view in explorer; click the copy icon to copy the full address.">?</abbr>
+      </th>
+      <th>
+        Block
+        <abbr class="dao-info" title="Sui checkpoint sequence number — equivalent to a block height in other blockchains. Each checkpoint finalizes a batch of transactions; higher numbers are more recent.">?</abbr>
+      </th>
+      <th>
+        Transaction
+        <abbr class="dao-info" title="Transaction digest — a unique identifier for the transaction that emitted this event. Click to view in explorer; click the copy icon to copy the full digest.">?</abbr>
+      </th>
+    </template>
+    <tr v-for="ev in pageEvents" :key="ev.txDigest">
+      <td><UiBadge :variant="badgeVariant(ev.type)">{{ eventLabel[ev.type] }}</UiBadge></td>
+      <td class="dao-mono history__cell history__cell--nowrap">
+        <CopyableAddress v-if="ev.address && ev.address !== 'undefined'" :address="ev.address">
+          <ExplorerLink :href="suiExplorerUrl('account', ev.address, NETWORK)" :value="ev.address" />
+        </CopyableAddress>
+        <span v-else>—</span>
+      </td>
+      <td class="dao-mono history__cell">
+        {{ ev.checkpoint ? '#' + ev.checkpoint : '—' }}
+      </td>
+      <td class="dao-mono history__cell history__cell--nowrap">
+        <CopyableAddress :address="ev.txDigest" label="Copy transaction">
+          <ExplorerLink :href="suiExplorerUrl('txblock', ev.txDigest, NETWORK)" :value="ev.txDigest" />
+        </CopyableAddress>
+      </td>
+    </tr>
+  </UiDataTable>
+  <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
 
-    <div v-if="totalPages > 1" class="dao-pagination">
-      <UiToolbarButton :disabled="page === 1" @click="prevPage">← Prev</UiToolbarButton>
-      <span class="dao-muted" style="font-size: 0.78rem">Page {{ page }} / {{ totalPages }}</span>
-      <UiToolbarButton :disabled="page === totalPages" @click="nextPage">Next →</UiToolbarButton>
-    </div>
-  </div>
+  <nav v-if="totalPages > 1" class="dao-pagination" aria-label="Event pages">
+    <UiToolbarButton :disabled="page === 1" @click="prevPage">← Prev</UiToolbarButton>
+    <span class="dao-muted">Page {{ page }} / {{ totalPages }}</span>
+    <UiToolbarButton :disabled="page === totalPages" @click="nextPage">Next →</UiToolbarButton>
+  </nav>
 </template>
+
+<style scoped>
+.history__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.history__head .dao-section-title {
+  margin: 0;
+}
+.history__cell {
+  font-size: 0.72rem;
+}
+.history__cell--nowrap {
+  white-space: nowrap;
+}
+</style>

package/src/tabs/OverviewTab.vue

@@ -42,7 +42,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
 <template>
   <div class="dao-overview-cols">
     <!-- Left: treasury summary -->
-    <div style="display: flex; flex-direction: column; gap: 8px">
+    <div class="dao-stack dao-stack--tight">
       <UiPanel title="Treasury Balance">
         <UiStatGrid>
           <UiStatRow label="SUI balance"><AmountCell :mist="balance" /></UiStatRow>
@@ -51,7 +51,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
             <CopyableAddress v-if="config?.treasury" :address="config.treasury">
               <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
             </CopyableAddress>
-            <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
+            <span v-else class="dao-mono dao-mono--sm">—</span>
           </UiStatRow>
         </UiStatGrid>
       </UiPanel>
@@ -67,7 +67,7 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
 
     <!-- Right: recent activity -->
     <UiPanel title="Recent Activity">
-      <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
+      <p v-if="eventsLoading" class="dao-muted dao-flush">Loading events…</p>
       <UiActivityFeed v-else-if="events.length">
         <UiActivityItem
           v-for="ev in events"

package/src/tabs/ProposalsTab.vue

@@ -10,18 +10,13 @@ const { epoch } = useEpoch()
 </script>
 
 <template>
-  <div>
-    <template v-if="proposals.length > 0">
-      <p class="dao-section-title">Active &amp; Pending Proposals</p>
-      <ProposalRow
-        v-for="p in proposals"
-        :key="p.id"
-        :proposal="p"
-        :current-epoch="epoch"
-      />
-    </template>
-    <div v-else class="dao-placeholder">
-      No proposals yet.
-    </div>
-  </div>
+  <template v-if="proposals.length > 0">
+    <h2 class="dao-section-title">Active &amp; Pending Proposals</h2>
+    <ul role="list">
+      <li v-for="p in proposals" :key="p.id">
+        <ProposalRow :proposal="p" :current-epoch="epoch" />
+      </li>
+    </ul>
+  </template>
+  <p v-else class="dao-placeholder">No proposals yet.</p>
 </template>

package/src/tabs/TreasuryTab.vue

@@ -32,12 +32,12 @@ function formatPrice(mist: bigint): string {
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; gap: 10px">
+  <div class="dao-stack">
     <UiPanel title="Treasury">
       <p v-if="cfgLoading" class="dao-muted">Loading…</p>
       <p v-else-if="cfgErr" class="dao-muted">{{ cfgErr }}</p>
       <template v-else-if="config">
-        <UiStatGrid style="max-width: 480px">
+        <UiStatGrid class="dao-stat-grid">
           <UiStatRow label="Commission rate">{{ commissionPct }} ({{ config.commissionBps }} bps)</UiStatRow>
           <UiStatRow label="Current balance"><AmountCell :mist="balance" /></UiStatRow>
           <UiStatRow label="Treasury address" align="left">
@@ -61,7 +61,7 @@ function formatPrice(mist: bigint): string {
         <tr v-for="gate in gates" :key="gate.id">
           <td>{{ gate.name }}</td>
           <td class="dao-amount">{{ formatPrice(gate.price) }}</td>
-          <td class="dao-mono" style="font-size: 0.7rem; white-space: nowrap">
+          <td class="dao-mono dao-mono--sm dao-nowrap">
             <CopyableAddress :address="gate.id" label="Copy object ID">
               <ExplorerLink :href="suiExplorerUrl('object', gate.id, NETWORK)" :value="gate.id" />
             </CopyableAddress>

package/vite.config.ts

@@ -3,4 +3,9 @@ import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: {
+    // @meddleware/wallet-adapter ships TS + .vue source and holds the shared wallet singleton; if it
+    // were pre-bundled, its .vue files (served raw) would load a second copy of the singleton in dev.
+    exclude: ['@meddleware/wallet-adapter'],
+  },
 })

package/src/components/StatusBar.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-// Bottom status bar: network + health dot (error-driven), current epoch, and a
-// relative "refreshed Ns ago" timestamp. Built on the shared UiStatusBar/UiStatusDot.
-import { computed } from 'vue'
-import { UiStatusBar, UiStatusDot } from '@meddleware/ui'
-import { NETWORK } from '../config.js'
-
-const props = defineProps<{
-  epoch: number | null
-  lastRefresh: Date | null
-  error?: boolean
-}>()
-
-const dotStatus = computed<'ok' | 'error'>(() => (props.error ? 'error' : 'ok'))
-
-function timeAgo(d: Date): string {
-  const s = Math.floor((Date.now() - d.getTime()) / 1000)
-  if (s < 5) return 'just now'
-  if (s < 60) return `${s}s ago`
-  return `${Math.floor(s / 60)}m ago`
-}
-</script>
-
-<template>
-  <UiStatusBar>
-    <span class="mw-statusbar__item">
-      <UiStatusDot :status="dotStatus" />
-      {{ NETWORK.charAt(0).toUpperCase() + NETWORK.slice(1) }}
-    </span>
-    <span class="mw-statusbar__sep">│</span>
-    <span v-if="epoch !== null" class="mw-statusbar__item">Epoch {{ epoch }}</span>
-    <span v-else class="mw-statusbar__item dao-muted">Epoch —</span>
-    <span class="mw-statusbar__sep">│</span>
-    <span v-if="lastRefresh" class="mw-statusbar__item">Refreshed {{ timeAgo(lastRefresh) }}</span>
-    <span v-else class="mw-statusbar__item dao-muted">Loading…</span>
-  </UiStatusBar>
-</template>

package/src/components/TabBar.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-// Thin wrapper over AppTabNav variant="raised" from @meddleware/ui.
-// Keeps dao-ui's internal import path stable while using the shared component.
-import { AppTabNav } from '@meddleware/ui'
-export type { AppTab as Tab } from '@meddleware/ui'
-
-defineProps<{ tabs: { id: string; label: string }[]; modelValue: string }>()
-const emit = defineEmits<{ 'update:modelValue': [id: string] }>()
-</script>
-
-<template>
-  <AppTabNav
-    :tabs="tabs"
-    :model-value="modelValue"
-    variant="raised"
-    aria-label="DAO sections"
-    @update:model-value="emit('update:modelValue', $event)"
-  />
-</template>