@meddleware/token-deployer-ui 0.0.1 → 0.0.3

package/src/components/WalletBar.vue

@@ -3,8 +3,7 @@ import { computed, ref, watch } from 'vue'
 import { useWallet, useNetwork } from '@meddleware/wallet-adapter'
 import { SELECTABLE_NETWORKS } from '../config.js'
 import type { Network } from '../lib/types.js'
-import FormSelect from './FormSelect.vue'
-import AppNotice from './AppNotice.vue'
+import { UiSelect, UiNotice } from '@meddleware/ui'
 
 const { wallets, currentWallet, account, connecting, error, connect, disconnect } = useWallet()
 const { network, setNetwork } = useNetwork()
@@ -42,9 +41,9 @@ watch(() => account.value, (acc) => {
       <div class="row" style="justify-content: space-between">
         <div class="row">
           <label for="network-select" style="margin: 0">Network</label>
-          <FormSelect id="network-select" v-model="networkModel">
+          <UiSelect id="network-select" v-model="networkModel">
             <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-          </FormSelect>
+          </UiSelect>
         </div>
 
         <div class="row">
@@ -68,7 +67,7 @@ watch(() => account.value, (acc) => {
       </div>
     </template>
 
-    <AppNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</AppNotice>
+    <UiNotice v-if="error" type="error" style="margin-top: 0.75rem">{{ error }}</UiNotice>
   </div>
 
   <dialog ref="dialogEl" aria-labelledby="wallet-dialog-title" @click.self="closeDialog">
@@ -86,9 +85,9 @@ watch(() => account.value, (acc) => {
 
     <div>
       <label for="dialog-network-select">Network</label>
-      <FormSelect id="dialog-network-select" v-model="networkModel">
+      <UiSelect id="dialog-network-select" v-model="networkModel">
         <option v-for="n in SELECTABLE_NETWORKS" :key="n" :value="n">{{ n }}</option>
-      </FormSelect>
+      </UiSelect>
     </div>
 
     <div class="wallet-list">

package/src/components/WalrusBlobBrowser.vue

@@ -4,7 +4,7 @@ import { useWallet } from '@meddleware/wallet-adapter'
 import { getReadClient } from '../lib/readClient.js'
 import type { OwnedBlob, WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ network: WalrusNetwork; connected: boolean }>()
 const emit = defineEmits<{ (e: 'select', url: string): void }>()
@@ -84,7 +84,7 @@ function selectBlob(item: BlobItem): void {
     </div>
     <p class="hint">Browse Walrus blobs owned by this address. Only image blobs show a preview.</p>
 
-    <AppNotice v-if="loadError" type="error">{{ loadError }}</AppNotice>
+    <UiNotice v-if="loadError" type="error">{{ loadError }}</UiNotice>
 
     <p v-if="hasLoaded && blobs.length === 0 && !loading" class="hint">
       No Walrus blobs found at this address.

package/src/components/WalrusIconUpload.vue

@@ -7,7 +7,7 @@ import { ICON_EPOCHS } from '../lib/walrus-constants.js'
 import { ICON_MAX_BYTES, validateIconFile } from '../config.js'
 import type { WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 // Vite serves the Walrus wasm as an asset URL (lightweight import — just the URL).
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 
@@ -185,9 +185,9 @@ async function upload(): Promise<void> {
     </fieldset>
 
     <!-- Cost estimation (shown after file selection) -->
-    <AppNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
+    <UiNotice v-if="fileName && estimatedCost" style="margin: 0.75rem 0">
       <strong>Estimated cost:</strong> {{ estimatedCost.label }}
-    </AppNotice>
+    </UiNotice>
 
     <!-- Public relay notice -->
     <p v-if="showFreeRelayTip" class="hint" style="margin: 0.75rem 0">
@@ -200,6 +200,6 @@ async function upload(): Promise<void> {
       stored for ~{{ ICON_YEARS }} years.
       <span v-if="status">{{ status }}</span>
     </p>
-    <AppNotice v-if="error" type="error">{{ error }}</AppNotice>
+    <UiNotice v-if="error" type="error">{{ error }}</UiNotice>
   </div>
 </template>

package/src/index.ts

@@ -1 +1,2 @@
+import './component-styles.css'
 export { default as TokenDeployerView } from './components/TokenDeployerView.vue'

package/src/main.ts

@@ -1,8 +1,12 @@
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/design-tokens/seasons.css'
+import '@meddleware/ui/base.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import './styles.css'
+import './component-styles.css'
 import { configureWasm } from './lib/template.js'
-import { useColorMode } from './composables/useColorMode.js'
+import { useColorMode } from '@meddleware/ui'
 
 // Apply the colour mode before mount so there is no theme flash. Defaults to
 // `system` (follows the OS) while enabling the in-app light/dark/system control.

package/src/styles.css

@@ -1,64 +1,7 @@
-/* Accessible, lightweight styling. System fonts, dark/light aware, high-contrast
-   focus rings, and reduced-motion respect. No heavy CSS framework. */
+/* SPA shell globals — imported by main.ts only (standalone SPA mode).
+   Token variables come from @meddleware/design-tokens, imported before this.
+   Component utility classes live in component-styles.css. */
 
-/* Oxblood / Indigo (masonic) palette — vendored mirror of the shared design
-   system for visual parity with the dashboard. The repo is self-contained
-   (no cross-repo links), so the token VALUES are copied here.
-   TODO(unify): consume `@meddleware/design-tokens` once it is published.
-   Dark mode is driven by `data-theme` (see composables/useColorMode.ts, which
-   also enables the light/dark/system control); the `:not([data-theme])` media
-   block preserves OS-follow before that runs (anti-flash). */
-:root {
-  --bg: #f7f4f1;
-  --surface: #ffffff;
-  --border: #ded6cf;
-  --text: #201b19;
-  --muted: #6e635c;
-  --accent: #5e1622;
-  --accent-contrast: #ffffff;
-  --danger: #b3261e;
-  --ok: #1c5e4a;
-  --radius: 10px;
-  --lift: #efeae6;
-  color-scheme: light;
-}
-
-:root[data-theme="dark"] {
-  --bg: #120e10;
-  --surface: #1c1618;
-  --border: #372b2e;
-  --text: #f2eae6;
-  --muted: #b7a9a3;
-  --accent: #b0465a;
-  --accent-contrast: #ffffff;
-  --danger: #f08a7e;
-  --ok: #5bb392;
-  --lift: #241c1f;
-  color-scheme: dark;
-}
-
-/* Pre-JS OS-follow (only until useColorMode sets an explicit data-theme). */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --bg: #120e10;
-    --surface: #1c1618;
-    --border: #372b2e;
-    --text: #f2eae6;
-    --muted: #b7a9a3;
-    --accent: #b0465a;
-    --accent-contrast: #ffffff;
-    --danger: #f08a7e;
-    --ok: #5bb392;
-    --lift: #241c1f;
-    color-scheme: dark;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-/* Top-right colour-mode control row (parity with the dashboard). */
 .theme-bar {
   display: flex;
   justify-content: flex-end;
@@ -101,284 +44,9 @@ p.lede {
   color: var(--muted);
   font-size: 1.05rem;
 }
-a {
-  color: var(--accent);
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.25rem;
-  margin: 1.5rem 0 1rem;
-  border-top: 2px solid var(--border);
-}
-
-label {
-  display: block;
-  font-weight: 600;
-  margin: 0.9rem 0 0.3rem;
-}
-.hint {
-  color: var(--muted);
-  font-weight: 400;
-  font-size: 0.9rem;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 0.6rem 0.7rem;
-  font: inherit;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-textarea {
-  min-height: 4rem;
-  resize: vertical;
-}
-
-input[aria-invalid='true'],
-select[aria-invalid='true'],
-textarea[aria-invalid='true'] {
-  border-color: var(--danger);
-}
-
-.field-error {
-  color: var(--danger);
-  font-size: 0.88rem;
-  margin-top: 0.3rem;
-}
-
-:focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 2px;
-}
-
-button {
-  font: inherit;
-  font-weight: 600;
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text);
-  cursor: pointer;
-}
-button.primary {
-  background: var(--accent);
-  color: var(--accent-contrast);
-  border-color: transparent;
-}
-button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.row {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.grid2 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0 1rem;
-}
-@media (min-width: 520px) {
-  .grid2 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-fieldset {
-  background: var(--lift);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.5rem 1rem 1rem;
-  margin: 1rem 0;
-}
-legend {
-  font-weight: 700;
-  padding: 0 0.4rem;
-}
-
-details {
-  margin: 1rem 0;
-}
-
-details > summary {
-  color: var(--accent);
-  font-weight: 700;
-  margin: 0.5rem 0;
-  padding: 0.75rem;
-  background: var(--lift);
-  border-radius: 8px;
-  border: 1px solid transparent;
-  transition: border-color 0.2s ease;
-}
-
-details > summary:hover {
-  border-color: var(--border);
-}
-
-details[open] > summary {
-  border-color: var(--border);
-  margin-bottom: 1rem;
-}
-
-details > fieldset {
-  margin-top: 0;
-}
-
-.permanent {
-  color: var(--danger);
-  font-weight: 600;
-}
-.mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  word-break: break-all;
-}
-.badge {
-  display: inline-block;
-  font-size: 0.8rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  background: var(--border);
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Keyboard skip link: hidden until focused, then visible at the top-left. */
-.skip-link {
-  position: absolute;
-  left: 0.5rem;
-  top: -3rem;
-  z-index: 100;
-  background: var(--accent);
-  color: #fff;
-  padding: 0.5rem 0.9rem;
-  border-radius: 6px;
-  text-decoration: none;
-  transition: top 0.15s ease;
-}
-.skip-link:focus {
-  top: 0.5rem;
-}
-@media (prefers-reduced-motion: reduce) {
-  .skip-link {
-    transition: none;
-  }
-}
-
-.steps {
-  list-style: none;
-  padding: 0;
-}
-.steps li {
-  padding: 0.35rem 0;
-  color: var(--muted);
-}
-.steps li[data-state='active'] {
-  color: var(--text);
-  font-weight: 600;
-}
-.steps li[data-state='done'] {
-  color: var(--ok);
-}
-
-.spinner {
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  animation: spin 0.7s linear infinite;
-  vertical-align: -0.15em;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation: none;
-  }
-  * {
-    scroll-behavior: auto;
-  }
-}
 
 footer {
   border-top: 1px solid var(--border);
   padding-top: 1.5rem;
   margin-top: 2rem;
 }
-
-.notice {
-  border-left: 4px solid var(--accent);
-  padding: 0.5rem 0.75rem;
-  background: var(--surface);
-  border-radius: 6px;
-}
-.notice.error {
-  border-color: var(--danger);
-}
-.notice.ok {
-  border-color: var(--ok);
-}
-
-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  width: min(420px, 90vw);
-  max-height: 90vh;
-  overflow-y: auto;
-  color: var(--text);
-}
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.45);
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-}
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.25rem;
-}
-.dialog-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-.wallet-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-.wallet-list button {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  width: 100%;
-  justify-content: flex-start;
-}

package/tests/templateParity.test.ts

@@ -32,7 +32,7 @@ const SOURCE_OF: Record<string, string> = {
   'Move.toml': 'Move.toml',
   'source.move': 'sources/sui_token_template.move',
   'scripts/publish.sh': 'templates/publish.sh',
-  '.gitignore': 'templates/.gitignore',
+  '.gitignore': 'templates/gitignore',
   'README.md': 'templates/README.md',
   'deployments.md': 'templates/deployments.md',
   'CLAUDE.md': 'templates/CLAUDE.md',

package/.env.production

@@ -1,7 +0,0 @@
-# Committed defaults for the standalone SPA production build (auto-loaded by `vite build`).
-# These are public Sui addresses — not secrets — so they are safe to commit.
-# Override at deploy time via Cloudflare Pages environment variables (takes precedence).
-# Local dev: copy .env.example to .env.local and edit there (never commit .env.local).
-
-VITE_FEE_TREASURY_TESTNET=0xe6b2810abfc5a6f37a375f73e3ba76cfc37584196e453255ad3c9ca2f0ede0ed
-VITE_FEE_TREASURY_MAINNET=0xe6b2810abfc5a6f37a375f73e3ba76cfc37584196e453255ad3c9ca2f0ede0ed

package/src/components/AppNotice.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{ type?: 'info' | 'error' | 'ok' }>()
-
-const role = computed(() => {
-  if (props.type === 'error') return 'alert'
-  if (props.type === 'ok') return 'status'
-  return undefined
-})
-</script>
-
-<template>
-  <p :class="['notice', type && type !== 'info' ? type : '']" :role="role"><slot /></p>
-</template>

package/src/components/ColorModeControl.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type { ColorMode } from '../composables/useColorMode'
-
-/**
- * Presentational light/dark/system control. Owns no state — bind with `v-model`
- * to external state (`useColorMode`). Vendored mirror of `@meddleware/ui`'s
- * `ColorModeControl` for parity with the dashboard.
- * TODO(unify): consume `@meddleware/ui` once published.
- */
-withDefaults(
-  defineProps<{
-    modelValue: ColorMode
-    modes?: ColorMode[]
-  }>(),
-  { modes: () => ['light', 'dark', 'system'] },
-)
-
-defineEmits<{ 'update:modelValue': [ColorMode] }>()
-
-const LABEL: Record<ColorMode, string> = { light: 'Light', dark: 'Dark', system: 'System' }
-const GLYPH: Record<ColorMode, string> = { light: '☀', dark: '☾', system: '◐' }
-</script>
-
-<template>
-  <div class="mode-control" role="group" aria-label="Colour mode">
-    <button
-      v-for="m in modes"
-      :key="m"
-      type="button"
-      class="mode-control__btn"
-      :class="{ 'is-active': modelValue === m }"
-      :aria-pressed="modelValue === m"
-      :title="LABEL[m]"
-      @click="$emit('update:modelValue', m)"
-    >
-      <span aria-hidden="true">{{ GLYPH[m] }}</span>
-      <span class="mode-control__label">{{ LABEL[m] }}</span>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.mode-control {
-  display: inline-flex;
-  gap: 2px;
-  padding: 2px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-.mode-control__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border: 0;
-  border-radius: calc(var(--radius) - 3px);
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  opacity: 0.7;
-}
-.mode-control__btn:hover {
-  opacity: 1;
-}
-.mode-control__btn.is-active {
-  opacity: 1;
-  background: var(--lift);
-}
-.mode-control__btn:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-@media (max-width: 640px) {
-  .mode-control__label {
-    display: none;
-  }
-}
-</style>

package/src/components/FieldHint.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-defineProps<{ fieldId: string }>()
-
-function onKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Escape') (e.currentTarget as HTMLElement).blur()
-}
-</script>
-
-<template>
-  <span class="field-hint">
-    <button
-      type="button"
-      class="field-hint-btn"
-      :aria-describedby="`${fieldId}-hint`"
-      aria-label="Help"
-      @keydown="onKeyDown"
-    >?</button>
-    <span :id="`${fieldId}-hint`" role="tooltip" class="field-hint-tip">
-      <slot />
-    </span>
-  </span>
-</template>
-
-<style scoped>
-.field-hint {
-  position: relative;
-  display: inline-block;
-  margin-left: 0.35rem;
-  vertical-align: middle;
-}
-
-.field-hint-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.1em;
-  height: 1.1em;
-  padding: 0;
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-  border-radius: 50%;
-  border: 1px solid var(--muted);
-  color: var(--muted);
-  background: transparent;
-  cursor: help;
-}
-
-.field-hint-tip {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 10;
-  min-width: 200px;
-  max-width: min(300px, 90vw);
-  padding: 0.6rem 0.75rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--text);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    opacity 0.15s ease,
-    visibility 0.15s ease;
-  pointer-events: none;
-}
-
-.field-hint:hover .field-hint-tip,
-.field-hint:focus-within .field-hint-tip {
-  visibility: visible;
-  opacity: 1;
-  pointer-events: auto;
-}
-</style>

package/src/components/FormField.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  id: string
-  label: string
-  error?: string | null
-  hint?: string
-}>()
-
-const errorId = computed(() => `${props.id}-err`)
-const slotAttrs = computed(() => ({
-  id: props.id,
-  'aria-invalid': props.error ? (true as const) : undefined,
-  'aria-describedby': props.error ? errorId.value : undefined,
-}))
-</script>
-
-<template>
-  <div class="form-field">
-    <label :for="id">
-      {{ label }}<slot name="label-suffix" />
-    </label>
-    <slot :attrs="slotAttrs" />
-    <p v-if="hint && !error" class="hint">{{ hint }}</p>
-    <p v-if="error" :id="errorId" class="field-error">{{ error }}</p>
-  </div>
-</template>