@meddleware/dao-ui 0.1.18 → 0.1.20

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 {
@@ -204,69 +49,38 @@
   gap: 10px;
 }
 
-@media (max-width: 640px) {
-  .dao-overview-cols { grid-template-columns: 1fr; }
+@media (width <= 640px) {
+  .dao-overview-cols {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* ── 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%;
-  background: var(--accent);
-  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-progress::-webkit-progress-bar {
+  background: var(--lift);
 }
 
-.dao-feed__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+.dao-progress::-webkit-progress-value {
   background: var(--accent);
-  margin-top: 4px;
-  flex-shrink: 0;
-}
-
-.dao-feed__type {
-  color: var(--text);
-  font-weight: 500;
-  white-space: nowrap;
+  transition: width 0.3s ease;
 }
 
-.dao-feed__time {
-  margin-left: auto;
-  white-space: nowrap;
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
+.dao-progress::-moz-progress-bar {
+  background: var(--accent);
 }
 
 /* ── Info tooltip marker ─────────────────────────────────────────────────── */
@@ -299,31 +113,47 @@
   margin-top: 10px;
 }
 
-/* ── Misc ────────────────────────────────────────────────────────────────── */
+/* ── 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 {
-  font-family: var(--font-mono);
+  font-family: var(--mw-font-mono);
   font-size: 0.8rem;
 }
 
-.dao-muted {
-  color: var(--muted);
-  font-size: 0.78rem;
+.dao-mono--sm {
+  font-size: 0.7rem;
 }
 
-.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-nowrap {
+  white-space: nowrap;
+}
+
+.dao-flush {
+  margin: 0;
 }
 
-.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-muted {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
 
 .dao-section-title {
   font-size: 0.72rem;
@@ -336,10 +166,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()
@@ -44,60 +50,55 @@ watch(
 </script>
 
 <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">
+  <div class="dao-stack gov">
+    <UiPanel title="Platform Parameters">
+      <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>
-      </div>
+          <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;
         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">
+        <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>
@@ -105,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>
-    </Panel>
+    </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

@@ -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,67 +33,78 @@ 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">
-        {{ loading ? 'Loading…' : 'Refresh' }}
-      </button>
-    </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>
 
-    <DataTable 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>
-          <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 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>
-    </DataTable>
-    <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">
-      <button class="dao-toolbar__btn" :disabled="page === 1" @click="prevPage">← Prev</button>
-      <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>
-    </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>