@meddleware/dao-ui 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "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>",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.26",
+    "@meddleware/ui": "^0.1.27",
     "@meddleware/wallet-adapter": "^0.0.8",
     "@mysten/sui": "^2.31.0",
     "vue": "^3.5.43"

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Standalone shell for the DAO SPA. The core UI lives in DaoView.vue (also exported
 // for inline embedding in the dashboard).
-import { AppHeader, AppFooter, ColorModeControl, useColorMode } from '@meddleware/ui'
+import { AppHeader, AppFooter, ColorModeControl, CopyrightLine, useColorMode } from '@meddleware/ui'
 import { NETWORK } from './config.js'
 import DaoView from './DaoView.vue'
 
@@ -24,7 +24,11 @@ const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/
 
     <DaoView style="flex: 1; min-height: 0" />
 
-    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
+    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL">
+      <template #start>
+        <CopyrightLine symbol-variant="kopimi" organisation-name="Meddleware" rights-statement="jam" />
+      </template>
+    </AppFooter>
   </div>
 </template>
 

package/src/DaoView.vue

@@ -7,6 +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 OverviewTab from './tabs/OverviewTab.vue'
@@ -45,9 +46,9 @@ const { epoch } = useEpoch()
 
 <template>
   <div class="dao-view">
-    <div class="dao-toolbar">
-      <button class="dao-toolbar__btn" @click="activeTab = 'overview'">🏛 Meddleware DAO</button>
-    </div>
+    <UiToolbar>
+      <UiToolbarButton @click="activeTab = 'overview'">🏛 Meddleware DAO</UiToolbarButton>
+    </UiToolbar>
 
     <TabBar :tabs="TABS" v-model="activeTab" />
 

package/src/components/ProposalRow.vue

@@ -2,6 +2,7 @@
 // Renders one fundraising/governance proposal: status badge, progress toward target,
 // and epochs-left. The Contribute button is disabled until the vault_dao module ships.
 import { computed } from 'vue'
+import { UiPanel, UiBadge, UiToolbarButton } from '@meddleware/ui'
 import type { Proposal } from '../composables/useProposals.js'
 
 const props = defineProps<{
@@ -19,10 +20,10 @@ const epochsLeft = computed(() => {
   return props.proposal.endEpoch - props.currentEpoch
 })
 
-const statusBadge = computed(() => {
-  if (props.proposal.status === 'active') return 'dao-badge--active'
-  if (props.proposal.status === 'pending') return 'dao-badge--pending'
-  return 'dao-badge--closed'
+const badgeVariant = computed<'active' | 'pending' | 'closed'>(() => {
+  if (props.proposal.status === 'active') return 'active'
+  if (props.proposal.status === 'pending') return 'pending'
+  return 'closed'
 })
 
 function formatSui(mist: bigint): string {
@@ -32,39 +33,36 @@ function formatSui(mist: bigint): string {
 </script>
 
 <template>
-  <div class="dao-panel" style="margin-bottom: 8px">
-    <div class="dao-panel__body">
-      <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px">
-        <div>
-          <span :class="['dao-badge', statusBadge]" style="margin-right: 6px">{{ proposal.status }}</span>
-          <strong style="font-size: 0.85rem">{{ proposal.title }}</strong>
-        </div>
-        <span class="dao-muted" style="white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem">
-          <template v-if="epochsLeft !== null && epochsLeft > 0">{{ epochsLeft }} epochs left</template>
-          <template v-else-if="epochsLeft !== null && epochsLeft <= 0">Expired</template>
-        </span>
+  <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">
+        <template v-if="epochsLeft !== null && epochsLeft > 0">{{ epochsLeft }} epochs left</template>
+        <template v-else-if="epochsLeft !== null && epochsLeft <= 0">Expired</template>
+      </span>
+    </div>
 
-      <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">{{ proposal.description }}</p>
+    <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">{{ 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(--font-mono); margin-top: 2px">
-          <span>{{ formatSui(proposal.contributedMist) }} SUI raised</span>
-          <span>{{ pct }}% of {{ formatSui(proposal.targetMist) }} SUI target</span>
-        </div>
+    <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>
-
-      <button
-        class="dao-toolbar__btn"
-        disabled
-        title="Vault DAO governance module launching soon"
-        style="margin-top: 6px; opacity: 0.5; cursor: not-allowed"
-      >
-        Contribute
-      </button>
     </div>
-  </div>
+
+    <UiToolbarButton
+      disabled
+      title="Vault DAO governance module launching soon"
+      style="margin-top: 6px; opacity: 0.5; cursor: not-allowed"
+    >
+      Contribute
+    </UiToolbarButton>
+  </UiPanel>
 </template>

package/src/components/StatusBar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // Bottom status bar: network + health dot (error-driven), current epoch, and a
-// relative "refreshed Ns ago" timestamp. Purely presentational.
+// 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<{
@@ -10,7 +11,7 @@ const props = defineProps<{
   error?: boolean
 }>()
 
-const dotClass = computed(() => (props.error ? 'dao-statusbar__dot--error' : 'dao-statusbar__dot--ok'))
+const dotStatus = computed<'ok' | 'error'>(() => (props.error ? 'error' : 'ok'))
 
 function timeAgo(d: Date): string {
   const s = Math.floor((Date.now() - d.getTime()) / 1000)
@@ -21,16 +22,16 @@ function timeAgo(d: Date): string {
 </script>
 
 <template>
-  <footer class="dao-statusbar">
-    <span class="dao-statusbar__item">
-      <span class="dao-statusbar__dot" :class="dotClass" />
+  <UiStatusBar>
+    <span class="mw-statusbar__item">
+      <UiStatusDot :status="dotStatus" />
       {{ NETWORK.charAt(0).toUpperCase() + NETWORK.slice(1) }}
     </span>
-    <span class="dao-statusbar__sep">│</span>
-    <span v-if="epoch !== null" class="dao-statusbar__item">Epoch {{ epoch }}</span>
-    <span v-else class="dao-statusbar__item dao-muted">Epoch —</span>
-    <span class="dao-statusbar__sep">│</span>
-    <span v-if="lastRefresh" class="dao-statusbar__item">Refreshed {{ timeAgo(lastRefresh) }}</span>
-    <span v-else class="dao-statusbar__item dao-muted">Loading…</span>
-  </footer>
+    <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/composables/useDaoEvents.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { PACKAGE_ID } from '../config.js'
 
@@ -68,7 +68,8 @@ export function useDaoEvents(limit = 20) {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { events, loading, error, lastRefresh, reload: load }
 }

package/src/composables/useEpoch.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 
 export function useEpoch() {
@@ -14,7 +14,8 @@ export function useEpoch() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { epoch, reload: load }
 }

package/src/composables/useGates.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { PACKAGE_ID, CONFIG_ID } from '../config.js'
 
@@ -70,7 +70,8 @@ export function useGates() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { gates, loading, error, reload: load }
 }

package/src/composables/usePlatformConfig.ts

@@ -1,7 +1,7 @@
 // Reads the PlatformConfig shared object once on mount and exposes the treasury
 // address + commission rate (bps). Source of truth for the commission model and for
 // whose AdminCaps the gate discovery (useGates) looks up.
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { CONFIG_ID } from '../config.js'
 
@@ -35,7 +35,8 @@ export function usePlatformConfig() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { config, loading, error, reload: load }
 }

package/src/styles/qt.css

@@ -1,11 +1,16 @@
 /*
- * Desktop-application (Bitcoin-Qt / Monero-Qt) aesthetic layer.
- * Layered on top of @meddleware/design-tokens — uses CSS vars from the token set.
- * Applied globally via main.ts; does not affect host documents when DaoView is embedded
- * because the overrides are scoped to .dao-view and its descendants.
+ * dao-ui console — app-local utility classes.
+ *
+ * The structural primitives (panel, toolbar, status bar, data table, stat grid,
+ * badge, activity feed) now come from @meddleware/ui as scoped components
+ * (UiPanel, UiToolbar, UiStatusBar, UiDataTable, UiStatGrid/UiStatRow, UiBadge,
+ * UiActivityFeed/UiActivityItem). What remains here are small text/layout
+ * utilities that are specific to this console's tabs.
+ *
+ * Applied globally via DaoView.vue (so it works when embedded as a library).
  */
 
-/* ── Layout shell ────────────────────────────────────────────────────────── */
+/* ── Shell layout ────────────────────────────────────────────────────────── */
 
 .dao-view {
   display: flex;
@@ -16,48 +21,6 @@
   color: var(--text);
 }
 
-/* ── Toolbar ─────────────────────────────────────────────────────────────── */
-
-.dao-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-  flex-shrink: 0;
-}
-
-.dao-toolbar__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 10px;
-  height: 26px;
-  font-size: 0.8rem;
-  background: var(--lift);
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  color: var(--text);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.1s;
-}
-
-.dao-toolbar__btn:hover {
-  background: var(--surface);
-  border-color: var(--accent);
-}
-
-.dao-toolbar__sep {
-  width: 1px;
-  height: 18px;
-  background: var(--border);
-  margin: 0 4px;
-}
-
-/* ── Tab content area ────────────────────────────────────────────────────── */
-
 .dao-content {
   flex: 1;
   overflow-y: auto;
@@ -65,108 +28,10 @@
   background: var(--bg);
 }
 
-/* ── Status bar ──────────────────────────────────────────────────────────── */
-
-.dao-statusbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 3px 12px;
-  font-size: 0.72rem;
-  color: var(--muted);
-  background: var(--surface);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-  font-family: var(--font-mono);
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-}
-
-.dao-statusbar__dot {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  margin-right: 4px;
-  flex-shrink: 0;
-}
-
-.dao-statusbar__dot--ok    { background: var(--ok); }
-.dao-statusbar__dot--warn  { background: #b08d2a; }
-.dao-statusbar__dot--error { background: var(--danger); }
-
-.dao-statusbar__item {
-  display: flex;
-  align-items: center;
-}
-
-.dao-statusbar__sep {
-  color: var(--border);
-}
-
-/* ── Panel ───────────────────────────────────────────────────────────────── */
-
-.dao-panel {
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  background: var(--surface);
-  overflow: hidden;
-}
-
-.dao-panel__head {
-  padding: 5px 10px;
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-  background: var(--lift);
-  border-bottom: 1px solid var(--border);
-}
-
-.dao-panel__body {
-  padding: 10px;
-}
-
-/* ── Data table ──────────────────────────────────────────────────────────── */
-
-.dao-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
-}
-
-.dao-table th {
-  text-align: left;
-  padding: 5px 8px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--muted);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-.dao-table td {
-  padding: 5px 8px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: middle;
-}
-
-.dao-table tr:last-child td {
-  border-bottom: none;
-}
-
-.dao-table tr:nth-child(even) td {
-  background: var(--lift);
-}
-
 /* ── Amount cells (monospace, right-aligned) ─────────────────────────────── */
 
 .dao-amount {
-  font-family: var(--font-mono);
+  font-family: var(--mw-font-mono);
   font-size: 0.8rem;
   text-align: right;
   white-space: nowrap;
@@ -176,26 +41,6 @@
   color: var(--muted);
 }
 
-/* ── Stat grid (Overview key/value pairs) ────────────────────────────────── */
-
-.dao-stat-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 3px 12px;
-  font-size: 0.8rem;
-}
-
-.dao-stat-grid__label {
-  color: var(--muted);
-  white-space: nowrap;
-}
-
-.dao-stat-grid__value {
-  font-family: var(--font-mono);
-  color: var(--text);
-  text-align: right;
-}
-
 /* ── Two-column overview layout ──────────────────────────────────────────── */
 
 .dao-overview-cols {
@@ -205,7 +50,9 @@
 }
 
 @media (max-width: 640px) {
-  .dao-overview-cols { grid-template-columns: 1fr; }
+  .dao-overview-cols {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* ── Proposal progress bar ───────────────────────────────────────────────── */
@@ -225,50 +72,6 @@
   transition: width 0.3s ease;
 }
 
-/* ── Activity feed ───────────────────────────────────────────────────────── */
-
-.dao-feed {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-size: 0.78rem;
-}
-
-.dao-feed__item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 4px 0;
-  border-bottom: 1px solid var(--border);
-  color: var(--muted);
-}
-
-.dao-feed__item:last-child {
-  border-bottom: none;
-}
-
-.dao-feed__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--accent);
-  margin-top: 4px;
-  flex-shrink: 0;
-}
-
-.dao-feed__type {
-  color: var(--text);
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.dao-feed__time {
-  margin-left: auto;
-  white-space: nowrap;
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
-}
-
 /* ── Info tooltip marker ─────────────────────────────────────────────────── */
 
 .dao-info {
@@ -299,10 +102,10 @@
   margin-top: 10px;
 }
 
-/* ── Misc ────────────────────────────────────────────────────────────────── */
+/* ── Misc text utilities ─────────────────────────────────────────────────── */
 
 .dao-mono {
-  font-family: var(--font-mono);
+  font-family: var(--mw-font-mono);
   font-size: 0.8rem;
 }
 
@@ -311,20 +114,6 @@
   font-size: 0.78rem;
 }
 
-.dao-badge {
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: 2px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.dao-badge--active { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
-.dao-badge--closed { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
-.dao-badge--pending { background: color-mix(in srgb, #b08d2a 20%, transparent); color: #b08d2a; }
-
 .dao-section-title {
   font-size: 0.72rem;
   font-weight: 600;
@@ -336,10 +125,10 @@
 
 .dao-notice {
   padding: 8px 10px;
-  border: 1px solid #b08d2a;
+  border: 1px solid var(--warning);
   border-radius: 2px;
-  background: color-mix(in srgb, #b08d2a 10%, transparent);
-  color: #b08d2a;
+  background: color-mix(in srgb, var(--warning) 10%, transparent);
+  color: var(--warning);
   font-size: 0.78rem;
   margin-bottom: 10px;
 }

package/src/tabs/GovernanceTab.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import Panel from '../components/Panel.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useWallet, getSuiClient } from '../wallet.js'
 import { PACKAGE_ID } from '../config.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiPanel,
+  UiStatGrid,
+  UiStatRow,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 
 const { config } = usePlatformConfig()
@@ -45,22 +51,17 @@ watch(
 
 <template>
   <div style="display: flex; flex-direction: column; gap: 10px">
-    <Panel title="Platform Parameters">
-      <div class="dao-stat-grid" style="max-width: 480px">
-        <span class="dao-stat-grid__label">Commission rate</span>
-        <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
-
-        <span class="dao-stat-grid__label">Max commission cap</span>
-        <span class="dao-stat-grid__value dao-mono">10.00% (1000 bps — on-chain hard cap)</span>
-
-        <span class="dao-stat-grid__label">Treasury address</span>
-        <span class="dao-stat-grid__value" style="text-align: left">
+    <UiPanel title="Platform Parameters">
+      <UiStatGrid style="max-width: 480px">
+        <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>
-      </div>
+        </UiStatRow>
+      </UiStatGrid>
 
       <p class="dao-muted" style="margin: 10px 0 0; font-size: 0.72rem">
         Parameters are governed by <code>PlatformAdminCap</code> on-chain.
@@ -68,9 +69,9 @@ watch(
         <code>commission_bps / 10000 × price</code> routes to treasury;
         the remainder goes to the gate operator.
       </p>
-    </Panel>
+    </UiPanel>
 
-    <Panel title="Admin Actions">
+    <UiPanel title="Admin Actions">
       <!-- Not connected -->
       <template v-if="!account">
         <p class="dao-muted" style="margin: 0; font-size: 0.78rem">
@@ -109,6 +110,6 @@ watch(
           Unable to verify capabilities. Check your connection and try again.
         </p>
       </template>
-    </Panel>
+    </UiPanel>
   </div>
 </template>

package/src/tabs/HistoryTab.vue

@@ -2,9 +2,15 @@
 // History tab: paginated on-chain access-gate event log (sold / used / burned) with
 // per-row explorer links. Data comes from useDaoEvents (pruning-tolerant, merged feed).
 import { ref, computed } from 'vue'
-import DataTable from '../components/DataTable.vue'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiDataTable,
+  UiBadge,
+  UiToolbarButton,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
@@ -27,20 +33,23 @@ const eventLabel: Record<DaoEvent['type'], string> = {
   AccessBurned: 'Access Burned',
 }
 
+function badgeVariant(type: DaoEvent['type']): 'active' | 'closed' {
+  return type === 'AccessMinted' ? '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>
-      <button class="dao-toolbar__btn" :disabled="loading" @click="reload">
+      <UiToolbarButton :disabled="loading" @click="reload">
         {{ loading ? 'Loading…' : 'Refresh' }}
-      </button>
+      </UiToolbarButton>
     </div>
 
     <p v-if="error" class="dao-muted">{{ error }}</p>
 
-    <DataTable v-if="pageEvents.length || loading" :empty="'No events'">
+    <UiDataTable v-if="pageEvents.length || loading" :empty="'No events'">
       <template #head>
         <th>Type</th>
         <th>
@@ -57,15 +66,7 @@ const eventLabel: Record<DaoEvent['type'], string> = {
         </th>
       </template>
       <tr v-for="ev in pageEvents" :key="ev.txDigest">
-        <td>
-          <span
-            class="dao-badge"
-            :class="{
-              'dao-badge--active': ev.type === 'AccessMinted',
-              'dao-badge--closed': ev.type === 'AccessConsumed' || ev.type === 'AccessBurned',
-            }"
-          >{{ eventLabel[ev.type] }}</span>
-        </td>
+        <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" />
@@ -81,13 +82,13 @@ const eventLabel: Record<DaoEvent['type'], string> = {
           </CopyableAddress>
         </td>
       </tr>
-    </DataTable>
+    </UiDataTable>
     <p v-else-if="!loading" class="dao-placeholder">No events found.</p>
 
     <div v-if="totalPages > 1" class="dao-pagination">
-      <button class="dao-toolbar__btn" :disabled="page === 1" @click="prevPage">← Prev</button>
+      <UiToolbarButton :disabled="page === 1" @click="prevPage">← Prev</UiToolbarButton>
       <span class="dao-muted" style="font-size: 0.78rem">Page {{ page }} / {{ totalPages }}</span>
-      <button class="dao-toolbar__btn" :disabled="page === totalPages" @click="nextPage">Next →</button>
+      <UiToolbarButton :disabled="page === totalPages" @click="nextPage">Next →</UiToolbarButton>
     </div>
   </div>
 </template>

package/src/tabs/OverviewTab.vue

@@ -2,13 +2,21 @@
 // Overview tab: treasury balance + commission, platform activity counters (active gates,
 // accesses minted/consumed derived from the event feed), and a recent-activity list.
 import { computed } from 'vue'
-import Panel from '../components/Panel.vue'
 import AmountCell from '../components/AmountCell.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
 import { useGates } from '../composables/useGates.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiPanel,
+  UiStatGrid,
+  UiStatRow,
+  UiActivityFeed,
+  UiActivityItem,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
@@ -35,49 +43,40 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
   <div class="dao-overview-cols">
     <!-- Left: treasury summary -->
     <div style="display: flex; flex-direction: column; gap: 8px">
-      <Panel title="Treasury Balance">
-        <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">SUI balance</span>
-          <AmountCell class="dao-stat-grid__value" :mist="balance" />
-
-          <span class="dao-stat-grid__label">Commission rate</span>
-          <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
-
-          <span class="dao-stat-grid__label">Treasury address</span>
-          <span class="dao-stat-grid__value" style="text-align: left">
+      <UiPanel title="Treasury Balance">
+        <UiStatGrid>
+          <UiStatRow label="SUI balance"><AmountCell :mist="balance" /></UiStatRow>
+          <UiStatRow label="Commission rate">{{ commissionPct }}</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>
-        </div>
-      </Panel>
-
-      <Panel title="Platform Activity">
-        <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">Active gates</span>
-          <span class="dao-stat-grid__value dao-mono">{{ gatesLoading ? '…' : gates.length }}</span>
-
-          <span class="dao-stat-grid__label">Accesses minted</span>
-          <span class="dao-stat-grid__value dao-mono">{{ accessesMinted || '—' }}</span>
+          </UiStatRow>
+        </UiStatGrid>
+      </UiPanel>
 
-          <span class="dao-stat-grid__label">Accesses consumed</span>
-          <span class="dao-stat-grid__value dao-mono">{{ accessesConsumed || '—' }}</span>
-        </div>
-      </Panel>
+      <UiPanel title="Platform Activity">
+        <UiStatGrid>
+          <UiStatRow label="Active gates">{{ gatesLoading ? '…' : gates.length }}</UiStatRow>
+          <UiStatRow label="Accesses minted">{{ accessesMinted || '—' }}</UiStatRow>
+          <UiStatRow label="Accesses consumed">{{ accessesConsumed || '—' }}</UiStatRow>
+        </UiStatGrid>
+      </UiPanel>
     </div>
 
     <!-- Right: recent activity -->
-    <Panel title="Recent Activity">
+    <UiPanel title="Recent Activity">
       <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
-      <ul v-else-if="events.length" class="dao-feed">
-        <li v-for="ev in events" :key="ev.txDigest" class="dao-feed__item">
-          <span class="dao-feed__dot" />
-          <span class="dao-feed__type">{{ eventLabel[ev.type] }}</span>
-          <span class="dao-feed__time">ckpt {{ ev.checkpoint ?? '?' }}</span>
-        </li>
-      </ul>
+      <UiActivityFeed v-else-if="events.length">
+        <UiActivityItem
+          v-for="ev in events"
+          :key="ev.txDigest"
+          :type="eventLabel[ev.type]"
+          :time="`ckpt ${ev.checkpoint ?? '?'}`"
+        />
+      </UiActivityFeed>
       <p v-else class="dao-placeholder">No recent events.</p>
-    </Panel>
+    </UiPanel>
   </div>
 </template>

package/src/tabs/TreasuryTab.vue

@@ -2,13 +2,19 @@
 // Treasury tab: commission rate + live SUI balance + treasury address, plus the table
 // of Community Gates the treasury controls (discovered via AdminCap ownership).
 import { computed } from 'vue'
-import Panel from '../components/Panel.vue'
 import AmountCell from '../components/AmountCell.vue'
-import DataTable from '../components/DataTable.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useGates } from '../composables/useGates.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiPanel,
+  UiStatGrid,
+  UiStatRow,
+  UiDataTable,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 
 const { config, loading: cfgLoading, error: cfgErr } = usePlatformConfig()
@@ -27,31 +33,26 @@ function formatPrice(mist: bigint): string {
 
 <template>
   <div style="display: flex; flex-direction: column; gap: 10px">
-    <Panel title="Treasury">
+    <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">
-        <div class="dao-stat-grid" style="max-width: 480px">
-          <span class="dao-stat-grid__label">Commission rate</span>
-          <span class="dao-stat-grid__value dao-mono">{{ commissionPct }} ({{ config.commissionBps }} bps)</span>
-
-          <span class="dao-stat-grid__label">Current balance</span>
-          <AmountCell class="dao-stat-grid__value" :mist="balance" />
-
-          <span class="dao-stat-grid__label">Treasury address</span>
-          <span class="dao-stat-grid__value" style="text-align: left">
+        <UiStatGrid style="max-width: 480px">
+          <UiStatRow label="Commission rate">{{ commissionPct }} ({{ config.commissionBps }} bps)</UiStatRow>
+          <UiStatRow label="Current balance"><AmountCell :mist="balance" /></UiStatRow>
+          <UiStatRow label="Treasury address" align="left">
             <CopyableAddress :address="config.treasury">
               <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
             </CopyableAddress>
-          </span>
-        </div>
+          </UiStatRow>
+        </UiStatGrid>
       </template>
       <p v-else class="dao-muted">PlatformConfig not loaded.</p>
-    </Panel>
+    </UiPanel>
 
-    <Panel title="Community Gates">
+    <UiPanel title="Community Gates">
       <p v-if="gatesLoading" class="dao-muted">Loading gates…</p>
-      <DataTable v-else-if="gates.length" :empty="'No gates found'">
+      <UiDataTable v-else-if="gates.length" :empty="'No gates found'">
         <template #head>
           <th>Gate name</th>
           <th>Price</th>
@@ -66,8 +67,8 @@ function formatPrice(mist: bigint): string {
             </CopyableAddress>
           </td>
         </tr>
-      </DataTable>
+      </UiDataTable>
       <p v-else class="dao-placeholder">No gates found.</p>
-    </Panel>
+    </UiPanel>
   </div>
 </template>

package/src/components/DataTable.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-// Scrollable table shell with a `head` slot (header cells) and default slot (rows).
-// Renders the `empty` message when no rows are provided.
-defineProps<{ empty?: string }>()
-
-const slots = defineSlots<{
-  head(): unknown
-  default(): unknown
-}>()
-</script>
-
-<template>
-  <div style="overflow-x: auto">
-    <table class="dao-table">
-      <thead>
-        <tr>
-          <slot name="head" />
-        </tr>
-      </thead>
-      <tbody>
-        <slot />
-      </tbody>
-    </table>
-    <p v-if="empty && !slots.default" class="dao-placeholder">{{ empty }}</p>
-  </div>
-</template>

package/src/components/Panel.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-// Titled content panel — the console's basic surface primitive. Optional heading + default slot.
-defineProps<{ title?: string }>()
-</script>
-
-<template>
-  <div class="dao-panel">
-    <div v-if="title" class="dao-panel__head">{{ title }}</div>
-    <div class="dao-panel__body">
-      <slot />
-    </div>
-  </div>
-</template>