@meddleware/token-deployer-ui 0.0.1 → 0.0.3

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,10 @@ 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'
+
+
+
 
 const props = defineProps<{
   form: FormModel
@@ -45,12 +46,12 @@ function onBlur(key: string): void {
     <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 }">
+        <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')" />
-        </FormField>
-        <FormField id="module" label="Module name" :error="visibleError('moduleName')" v-slot="{ attrs }">
+        </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')" />
-        </FormField>
+        </UiFormField>
       </div>
       <p class="hint" aria-live="polite">
         <template v-if="identifierError">
@@ -68,27 +69,27 @@ function onBlur(key: string): void {
       <legend>Token details</legend>
 
       <div class="grid2">
-        <FormField id="name" label="Token name" :error="visibleError('name')" v-slot="{ attrs }">
+        <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')" />
-        </FormField>
-        <FormField id="symbol" label="Symbol" :error="visibleError('symbol')" v-slot="{ attrs }">
+        </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')" />
-        </FormField>
+        </UiFormField>
       </div>
 
-      <FormField id="description" label="Description" :error="visibleError('description')">
+      <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>
-      </FormField>
+      </UiFormField>
 
-      <FormField id="decimals" label="Decimals" :error="visibleError('decimals')">
+      <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>
-      </FormField>
+      </UiFormField>
 
       <IconPicker
         v-model="form.iconUrl"
@@ -104,82 +105,82 @@ function onBlur(key: string): void {
       <fieldset>
         <legend class="visually-hidden">Advanced options</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>

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>

package/src/components/IconPicker.vue

@@ -14,8 +14,7 @@ import {
 } from '../lib/accessGate.js'
 import type { WalrusNetwork } from '../lib/walrus.js'
 import type { Network } from '../lib/types.js'
-import AppNotice from './AppNotice.vue'
-import FieldHint from './FieldHint.vue'
+import { UiNotice, UiFieldHint } from '@meddleware/ui'
 import WalrusBlobBrowser from './WalrusBlobBrowser.vue'
 import walrusWasmUrl from '@mysten/walrus-wasm/web/walrus_wasm_bg.wasm?url'
 
@@ -286,11 +285,11 @@ function onBrowseSelect(url: string): void {
       <label class="permanent-toggle">
         <input type="checkbox" v-model="permanent" />
         Permanent blob <span class="hint">(cannot be deleted)</span>
-        <FieldHint field-id="blob-permanent">
+        <UiFieldHint field-id="blob-permanent">
           A permanent blob cannot be deleted once registered, even within its storage period.
           Deletable blobs can be removed early by the owner to reclaim unused storage fees (WAL).
           Permanent is the safer default for a token icon that should remain available indefinitely.
-        </FieldHint>
+        </UiFieldHint>
       </label>
 
       <fieldset v-if="fileName && availableRelays.length > 1" style="margin: 0.5rem 0">
@@ -312,13 +311,13 @@ function onBrowseSelect(url: string): void {
         </div>
       </fieldset>
 
-      <AppNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
+      <UiNotice v-if="fileName && estimatedCost" style="margin: 0.5rem 0">
         <strong>Estimated cost:</strong> {{ estimatedCost.label }}
-      </AppNotice>
+      </UiNotice>
 
       <!-- NFT-gated relay: the operator relay is live but this wallet lacks the access NFT.
            The public relay is still available; purchasing unlocks the operator relay. -->
-      <AppNotice v-if="fileName && purchaseAccessAvailable" style="margin: 0.5rem 0">
+      <UiNotice v-if="fileName && purchaseAccessAvailable" style="margin: 0.5rem 0">
         <p style="margin: 0 0 0.5rem">
           The operator relay requires an access NFT. You can keep using the public relay, or
           purchase access to support this app’s relay.
@@ -326,7 +325,7 @@ function onBrowseSelect(url: string): void {
         <button type="button" :disabled="purchasing || !connected" @click="purchaseAccess">
           {{ purchasing ? 'Purchasing…' : 'Purchase relay access' }}
         </button>
-      </AppNotice>
+      </UiNotice>
 
       <p v-if="showFreeRelayTip" class="hint" style="margin: 0.5rem 0">
         Tip: select the public relay above to avoid the relay fee.
@@ -337,7 +336,7 @@ function onBrowseSelect(url: string): void {
         <strong>SUI</strong> (gas + relay fee) in your wallet; two approvals. Stored for
         ~{{ ICON_YEARS }} years. <span v-if="status">{{ status }}</span>
       </p>
-      <AppNotice v-if="uploadError" type="error">{{ uploadError }}</AppNotice>
+      <UiNotice v-if="uploadError" type="error">{{ uploadError }}</UiNotice>
     </div>
 
     <!-- Browse panel -->

package/src/components/LicensePicker.vue

@@ -2,9 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { fetchLicenseList, fetchLicenseText, NO_LICENSE } from '../lib/licenses.js'
 import type { SpdxLicense } from '../lib/licenses.js'
-import FormSelect from './FormSelect.vue'
-import FieldHint from './FieldHint.vue'
-import AppNotice from './AppNotice.vue'
+import { UiSelect, UiFieldHint, UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ modelValue: string }>()
 const emit = defineEmits<{
@@ -73,14 +71,14 @@ async function openLicenseModal(): Promise<void> {
   <div>
     <label for="license-select">
       License
-      <FieldHint field-id="license-select">
+      <UiFieldHint field-id="license-select">
         Applies only to the downloadable Move source package — embedded in the LICENSE file and
         source headers. Has <b>no effect on the on-chain token</b> or its transferability.
         Choose <b>CC0-1.0</b> (default) for public domain. Choose <b>None</b> to retain all rights.
-      </FieldHint>
+      </UiFieldHint>
     </label>
     <div class="license-row">
-      <FormSelect
+      <UiSelect
         id="license-select"
         v-model="selectModel"
         :disabled="loading || Boolean(error)"
@@ -103,7 +101,7 @@ async function openLicenseModal(): Promise<void> {
             :title="`${l.id} — ${l.name}`"
           >{{ l.id }}</option>
         </optgroup>
-      </FormSelect>
+      </UiSelect>
       <button type="button" class="view-btn" :disabled="loading" @click="openLicenseModal">
         View
       </button>
@@ -127,7 +125,7 @@ async function openLicenseModal(): Promise<void> {
     <div v-if="licenseLoading" style="padding: 1rem 0">
       <span class="spinner" aria-hidden="true"></span> Loading…
     </div>
-    <AppNotice v-else-if="licenseError" type="error">{{ licenseError }}</AppNotice>
+    <UiNotice v-else-if="licenseError" type="error">{{ licenseError }}</UiNotice>
     <template v-else-if="modelValue === NO_LICENSE.id">
       <p>No LICENSE file will be generated. All rights are reserved by the author.</p>
     </template>
@@ -154,7 +152,7 @@ async function openLicenseModal(): Promise<void> {
   align-items: center;
 }
 
-.license-row :deep(.select-wrapper) {
+.license-row :deep(.mw-select) {
   flex: 1;
 }
 

package/src/components/ResultPanel.vue

@@ -5,7 +5,7 @@ import { explorerObjectUrl } from '../config.js'
 import { generatePackageZip } from '../lib/generatePackage.js'
 import { fetchLicenseText } from '../lib/licenses.js'
 import GithubPush from './GithubPush.vue'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ result: PublishResult; config: TokenConfig }>()
 defineEmits<{ (e: 'restart'): void }>()
@@ -70,7 +70,7 @@ async function downloadPackage(): Promise<void> {
       </button>
       <button type="button" @click="$emit('restart')">Deploy another</button>
     </div>
-    <AppNotice v-if="downloadError" type="error">{{ downloadError }}</AppNotice>
+    <UiNotice v-if="downloadError" type="error">{{ downloadError }}</UiNotice>
 
     <div style="margin-top: 1rem">
       <GithubPush :config="config" :result="result" />

package/src/components/ReviewPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TokenConfig, Network } from '../lib/types.js'
 import { FEE_MIST } from '../config.js'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 
 const props = defineProps<{ config: TokenConfig; network: Network }>()
 defineEmits<{ (e: 'back'): void; (e: 'confirm'): void }>()
@@ -13,7 +13,7 @@ const feeSui = Number(FEE_MIST) / 1e9
   <section class="card" aria-labelledby="review-h">
     <h2 id="review-h">Review — deploying to {{ props.network }}</h2>
 
-    <AppNotice>
+    <UiNotice>
       These values are <strong>permanent</strong> once published: symbol
       <span class="mono">{{ config.symbol }}</span
       >, name <span class="mono">{{ config.name }}</span
@@ -21,7 +21,7 @@ const feeSui = Number(FEE_MIST) / 1e9
       >, and the coin type
       <span class="mono">&lt;package&gt;::{{ config.moduleName }}::{{ config.structName }}</span
       >.
-    </AppNotice>
+    </UiNotice>
 
     <dl class="grid2" v-once>
       <div>

package/src/components/TokenDeployerView.vue

@@ -6,7 +6,7 @@ import ReviewPanel from './ReviewPanel.vue'
 import DeployProgress from './DeployProgress.vue'
 import ResultPanel from './ResultPanel.vue'
 import TermsDialog from './TermsDialog.vue'
-import AppNotice from './AppNotice.vue'
+import { UiNotice } from '@meddleware/ui'
 import { emptyForm, toTokenConfig } from '../lib/form.js'
 import { validateForm, isValid } from '../lib/validation.js'
 import { deployToken } from '../lib/deploy.js'
@@ -109,7 +109,7 @@ function restart(): void {
       :config="config"
       @restart="restart"
     />
-    <AppNotice v-if="deployError" type="error">{{ deployError }}</AppNotice>
+    <UiNotice v-if="deployError" type="error">{{ deployError }}</UiNotice>
     <TermsDialog :open="showTerms" @accept="onTermsAccept" @cancel="onTermsCancel" />
   </WalletGuard>
 </template>