@meddleware/token-deployer-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/token-deployer-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "exports": {
     ".": { "default": "./src/index.ts" }
@@ -30,6 +30,8 @@
     "verify:template": "node scripts/verify-bytecode.mjs && vitest run tests/templateArtifact.test.ts tests/templateParity.test.ts"
   },
   "dependencies": {
+    "@meddleware/design-tokens": "^0.1.5",
+    "@meddleware/ui": "^0.1.23",
     "@meddleware/wallet-adapter": "^0.0.7",
     "@meddleware/walrus-relay": "^0.1.16",
     "@mysten/bcs": "~2.1.0",

package/src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import WalletBar from './components/WalletBar.vue'
 import TokenDeployerView from './components/TokenDeployerView.vue'
-import ColorModeControl from './components/ColorModeControl.vue'
-import { useColorMode } from './composables/useColorMode.js'
+import { ColorModeControl, useColorMode } from '@meddleware/ui'
 
 const { mode: colorMode, set: setColorMode } = useColorMode('system')
 </script>

package/src/component-styles.css

@@ -0,0 +1,257 @@
+/* Component utility styles for TokenDeployerView and its sub-components.
+   Imported by index.ts so these are available in both standalone and library (dashboard) mode.
+   Relies on design-token CSS variables (--bg, --surface, --border, etc.) provided by the
+   consumer — either @meddleware/design-tokens (standalone) or the dashboard's own import. */
+
+.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;
+}
+
+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;
+}
+
+.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;
+  }
+}
+
+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/src/components/ConfigForm.vue

@@ -6,9 +6,9 @@ import { deriveStructName } from '../lib/validation.js'
 import type { Network } from '../lib/types.js'
 import LicensePicker from './LicensePicker.vue'
 import IconPicker from './IconPicker.vue'
-import FormField from './FormField.vue'
-import FormSelect from './FormSelect.vue'
-import FieldHint from './FieldHint.vue'
+import { UiFormField, UiSelect, UiFieldHint } from '@meddleware/ui'
+
+export type ConfigFormStep = 'identity' | 'token' | 'settings'
 
 const props = defineProps<{
   form: FormModel
@@ -16,8 +16,9 @@ const props = defineProps<{
   canProceed: boolean
   network: Network
   connected: boolean
+  formStep: ConfigFormStep
 }>()
-const emit = defineEmits<{ (e: 'submit'): void }>()
+const emit = defineEmits<{ (e: 'next'): void; (e: 'back'): void }>()
 
 const structPreview = computed(() => {
   const m = props.form.moduleName.trim()
@@ -41,152 +42,162 @@ function onBlur(key: string): void {
 </script>
 
 <template>
-  <form novalidate @submit.prevent="emit('submit')">
-    <fieldset>
-      <legend>Package identity <span class="permanent">(permanent)</span></legend>
-      <div class="grid2">
-        <FormField id="package" label="Package name" :error="visibleError('packageName')" v-slot="{ attrs }">
-          <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
-        </FormField>
-        <FormField id="module" label="Module name" :error="visibleError('moduleName')" v-slot="{ attrs }">
-          <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
-        </FormField>
-      </div>
-      <p class="hint" aria-live="polite">
-        <template v-if="identifierError">
-          Fix the package and module names to preview the coin type.
-        </template>
-        <template v-else>
-          Coin type will be <span class="mono">{{ coinTypePreview }}</span
-          >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from
-          the module name (a Sui requirement).
-        </template>
-      </p>
-    </fieldset>
-
-    <fieldset>
-      <legend>Token details</legend>
-
-      <div class="grid2">
-        <FormField id="name" label="Token name" :error="visibleError('name')" v-slot="{ attrs }">
-          <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
-        </FormField>
-        <FormField id="symbol" label="Symbol" :error="visibleError('symbol')" v-slot="{ attrs }">
-          <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
-        </FormField>
-      </div>
-
-      <FormField id="description" label="Description" :error="visibleError('description')">
-        <template #label-suffix>&nbsp;<span class="hint">(optional)</span></template>
-        <template #default="{ attrs }">
-          <textarea v-bind="attrs" v-model="form.description" @blur="onBlur('description')" />
-        </template>
-      </FormField>
-
-      <FormField id="decimals" label="Decimals" :error="visibleError('decimals')">
-        <template #label-suffix>&nbsp;<span class="permanent">(permanent)</span></template>
-        <template #default="{ attrs }">
-          <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
-        </template>
-      </FormField>
-
-      <IconPicker
-        v-model="form.iconUrl"
-        :network="network"
-        :connected="connected"
-        :error="visibleError('iconUrl')"
-        @blur="onBlur('iconUrl')"
-      />
-    </fieldset>
-
-    <details>
-      <summary>Advanced options</summary>
+  <form novalidate @submit.prevent="emit('next')">
+
+    <!-- Step 1: Identity -->
+    <template v-if="formStep === 'identity'">
+      <fieldset>
+        <legend>Package identity <span class="permanent">(permanent)</span></legend>
+        <div class="grid2">
+          <UiFormField id="package" label="Package name" :error="visibleError('packageName')" v-slot="{ attrs }">
+            <input v-bind="attrs" v-model="form.packageName" placeholder="my_token" autocomplete="off" @blur="onBlur('packageName')" />
+          </UiFormField>
+          <UiFormField id="module" label="Module name" :error="visibleError('moduleName')" v-slot="{ attrs }">
+            <input v-bind="attrs" v-model="form.moduleName" placeholder="mytoken" autocomplete="off" @blur="onBlur('moduleName')" />
+          </UiFormField>
+        </div>
+        <p class="hint" aria-live="polite">
+          <template v-if="identifierError">
+            Fix the package and module names to preview the coin type.
+          </template>
+          <template v-else>
+            Coin type will be <span class="mono">{{ coinTypePreview }}</span
+            >. The witness struct <span class="mono">{{ structPreview }}</span> is derived from
+            the module name (a Sui requirement).
+          </template>
+        </p>
+      </fieldset>
+    </template>
+
+    <!-- Step 2: Token -->
+    <template v-if="formStep === 'token'">
+      <fieldset>
+        <legend>Token details</legend>
+
+        <div class="grid2">
+          <UiFormField id="name" label="Token name" :error="visibleError('name')" v-slot="{ attrs }">
+            <input v-bind="attrs" v-model="form.name" autocomplete="off" @blur="onBlur('name')" />
+          </UiFormField>
+          <UiFormField id="symbol" label="Symbol" :error="visibleError('symbol')" v-slot="{ attrs }">
+            <input v-bind="attrs" v-model="form.symbol" autocomplete="off" @blur="onBlur('symbol')" />
+          </UiFormField>
+        </div>
+
+        <UiFormField id="description" label="Description" :error="visibleError('description')">
+          <template #label-suffix>&nbsp;<span class="hint">(optional)</span></template>
+          <template #default="{ attrs }">
+            <textarea v-bind="attrs" v-model="form.description" @blur="onBlur('description')" />
+          </template>
+        </UiFormField>
+
+        <UiFormField id="decimals" label="Decimals" :error="visibleError('decimals')">
+          <template #label-suffix>&nbsp;<span class="permanent">(permanent)</span></template>
+          <template #default="{ attrs }">
+            <input v-bind="attrs" v-model="form.decimals" inputmode="numeric" @blur="onBlur('decimals')" />
+          </template>
+        </UiFormField>
+
+        <IconPicker
+          v-model="form.iconUrl"
+          :network="network"
+          :connected="connected"
+          :error="visibleError('iconUrl')"
+          @blur="onBlur('iconUrl')"
+        />
+      </fieldset>
+    </template>
+
+    <!-- Step 3: Settings -->
+    <template v-if="formStep === 'settings'">
       <fieldset>
-        <legend class="visually-hidden">Advanced options</legend>
+        <legend>Supply &amp; policies</legend>
 
-        <FormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
+        <UiFormField id="supply" label="Initial supply" :error="visibleError('initialSupply')">
           <template #label-suffix>
-            <FieldHint field-id="supply">
+            <UiFieldHint field-id="supply">
               The number of whole tokens to mint and send to the recipient at deployment.
               Uses your chosen decimal precision — with 9 decimals, 1 token = 1,000,000,000 base units on-chain.
               Enter <b>0</b> or leave blank for no initial supply.
               You can mint more later if you choose the Mintable supply policy.
-            </FieldHint>
+            </UiFieldHint>
           </template>
           <template #default="{ attrs }">
             <input v-bind="attrs" v-model="form.initialSupply" inputmode="numeric" placeholder="0" @blur="onBlur('initialSupply')" />
           </template>
-        </FormField>
+        </UiFormField>
 
         <div class="grid2">
-          <FormField id="supply-policy" label="Supply">
+          <UiFormField id="supply-policy" label="Supply">
             <template #label-suffix>
-              <FieldHint field-id="supply-policy">
+              <UiFieldHint field-id="supply-policy">
                 <b>Mintable</b>: you keep the TreasuryCap and can mint more tokens at any time.<br />
                 <b>Fixed</b>: the TreasuryCap is frozen — the total supply is sealed at deployment.
-              </FieldHint>
+              </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <FormSelect v-bind="attrs" v-model="form.supplyPolicy">
+              <UiSelect v-bind="attrs" v-model="form.supplyPolicy">
                 <option value="mintable">Mintable</option>
                 <option value="fixed">Fixed</option>
-              </FormSelect>
+              </UiSelect>
             </template>
-          </FormField>
-          <FormField id="metadata-policy" label="Metadata">
+          </UiFormField>
+          <UiFormField id="metadata-policy" label="Metadata">
             <template #label-suffix>
-              <FieldHint field-id="metadata-policy">
+              <UiFieldHint field-id="metadata-policy">
                 <b>Updatable</b>: you keep the MetadataCap and can later change the name, symbol,
                 description, or icon.<br />
                 <b>Frozen</b>: the MetadataCap is discarded — all metadata is permanently locked.
-              </FieldHint>
+              </UiFieldHint>
             </template>
             <template #default="{ attrs }">
-              <FormSelect v-bind="attrs" v-model="form.metadataPolicy">
+              <UiSelect v-bind="attrs" v-model="form.metadataPolicy">
                 <option value="updatable">Updatable</option>
                 <option value="frozen">Frozen</option>
-              </FormSelect>
+              </UiSelect>
             </template>
-          </FormField>
+          </UiFormField>
         </div>
 
-        <FormField id="package-policy" label="Package code">
+        <UiFormField id="package-policy" label="Package code">
           <template #label-suffix>
-            <FieldHint field-id="package-policy">
+            <UiFieldHint field-id="package-policy">
               <b>Immutable</b>: the UpgradeCap is burned — the on-chain code is sealed.
               Recommended for trust and auditability.<br />
               <b>Upgradeable</b>: you keep the UpgradeCap and can push code changes to the package
               after deployment.
-            </FieldHint>
+            </UiFieldHint>
           </template>
           <template #default="{ attrs }">
-            <FormSelect v-bind="attrs" v-model="form.packagePolicy">
+            <UiSelect v-bind="attrs" v-model="form.packagePolicy">
               <option value="immutable">Immutable</option>
               <option value="upgradeable">Upgradeable</option>
-            </FormSelect>
+            </UiSelect>
           </template>
-        </FormField>
+        </UiFormField>
 
-        <FormField id="recipient" label="Recipient" :error="visibleError('recipient')">
+        <UiFormField id="recipient" label="Recipient" :error="visibleError('recipient')">
           <template #label-suffix>
-            <FieldHint field-id="recipient">
+            <UiFieldHint field-id="recipient">
               The Sui address that receives the TreasuryCap, MetadataCap, UpgradeCap (if kept),
               and any initial supply minted at deployment.
               Leave blank to send everything to the connected wallet.
               Enter a different address to separate the deployer wallet from the custody wallet.
-            </FieldHint>
+            </UiFieldHint>
           </template>
           <template #default="{ attrs }">
             <input v-bind="attrs" v-model="form.recipient" placeholder="0x…" autocomplete="off" @blur="onBlur('recipient')" />
           </template>
-        </FormField>
+        </UiFormField>
 
         <LicensePicker v-model="form.license" @name="form.licenseName = $event" />
       </fieldset>
-    </details>
+    </template>
 
     <div class="row" style="margin-top: 1rem">
-      <button type="submit" class="primary" :disabled="!canProceed">Review &amp; deploy</button>
+      <button v-if="formStep !== 'identity'" type="button" @click="emit('back')">Back</button>
+      <button type="submit" class="primary" :disabled="!canProceed">
+        {{ formStep === 'settings' ? 'Review &amp; deploy' : 'Next' }}
+      </button>
     </div>
   </form>
 </template>

package/src/components/GithubPush.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { PublishResult, TokenConfig } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 import { buildPackageFiles } from '../lib/generatePackage.js'
 import { fetchLicenseText } from '../lib/licenses.js'
 import { createRepoAndPush } from '../lib/github.js'
@@ -91,10 +91,10 @@ async function push(): Promise<void> {
         <span v-if="progress" class="hint" aria-live="polite">{{ progress }}</span>
       </div>
 
-      <AppNotice v-if="error" type="error">{{ error }}</AppNotice>
-      <AppNotice v-if="doneUrl" type="ok">
+      <UiNotice v-if="error" type="error">{{ error }}</UiNotice>
+      <UiNotice v-if="doneUrl" type="ok">
         Pushed: <a :href="doneUrl" target="_blank" rel="noopener noreferrer">{{ doneUrl }}</a>
-      </AppNotice>
+      </UiNotice>
     </div>
   </div>
 </template>