nimiq-branding-cli 1.1.1 → 1.2.0

package/hooks/ci-additions.md

@@ -0,0 +1,53 @@
+# CI additions for nq align / new / hooks
+
+The OAuth token used to open this PR lacks the `workflow` scope, so `.github/workflows`
+could not be modified from this branch. A maintainer with `workflow` scope should apply
+the two changes below (they are otherwise ready and locally verified).
+
+## 1. `.github/workflows/verify.yml` — extend `cli-smoke` + add a `unit-tests` job
+
+Append to the end of the `cli-smoke` job's run step:
+
+```yaml
+      - name: nq new / align / hooks smoke
+        run: |
+          cd /tmp
+          node "$GITHUB_WORKSPACE/bin/nq.js" new smoke-app
+          test -f smoke-app/nimiq-stack.json
+          test -f smoke-app/src/server.ts
+          test -f smoke-app/Dockerfile
+          # a freshly-scaffolded canonical app must align CLEAN (exit 0)
+          node "$GITHUB_WORKSPACE/bin/nq.js" align smoke-app
+          # the settlement gate must FAIL on a real light-client path (exit 1)
+          printf "const c = Client.create(cfg);\n" > smoke-app/src/bad.ts
+          if node "$GITHUB_WORKSPACE/bin/nq.js" align smoke-app --fail-on=settlement; then
+            echo "ERROR: light-client path did not fail the settlement gate"; exit 1
+          fi
+          echo "align gate OK"
+          rm smoke-app/src/bad.ts
+          git -C smoke-app init -q
+          node "$GITHUB_WORKSPACE/bin/nq.js" hooks install smoke-app
+          test -x smoke-app/.git/hooks/pre-commit
+          echo "new/align/hooks smoke OK"
+```
+
+Add a new job:
+
+```yaml
+  unit-tests:
+    name: node --test (align / new / hooks)
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm test
+```
+
+## 2. `.github/workflows/stack-align.yml` — the weekly fleet-alignment Action
+
+Copy `hooks/stack-align.yml` (committed in this PR) to `.github/workflows/stack-align.yml`.
+It mirrors `audit.yml`: `nq align --all` weekly, PR safe manifest fixes (`nq align --fix`)
+on safe-drift, and a rolling `stack-drift` issue on risky-fail.

package/hooks/pre-commit

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+# nq align pre-commit gate — installed by `nq hooks install`.
+# Blocks a commit that introduces the broken @nimiq/core light-client path
+# (Client.create / @nimiq/core/web / waitForConsensusEstablished) or off-brand styling.
+set -euo pipefail
+if command -v nq >/dev/null 2>&1; then
+  nq align --fail-on=settlement,styling
+else
+  npx -y github:Andjroo111/nimiq-branding-cli align --fail-on=settlement,styling
+fi

package/hooks/session-start.sh

@@ -0,0 +1,3 @@
+# nq align — SessionStart advisory drift banner.
+# Add to .claude/settings.json hooks.SessionStart, or run at the top of a session.
+nq align --quiet 2>/dev/null || true

package/hooks/stack-align.yml

@@ -0,0 +1,75 @@
+name: stack-align
+
+# Weekly fleet stack-alignment audit — the sibling of branding-audit.yml. Runs
+# `nq align --all` across the repo, PRs safe manifest fixes (nq align --fix), and
+# files/updates a rolling stack-drift issue on any risky-fail (the broken light-client
+# path, off-brand styling). Reuses the same verdict-driven shape as audit.yml.
+on:
+  schedule:
+    - cron: '30 9 * * 1' # Mondays 09:30 UTC (after branding-audit at 09:00)
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+  issues: write
+
+concurrency:
+  group: stack-align
+  cancel-in-progress: false
+
+jobs:
+  align:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Run nq align
+        id: align
+        run: |
+          npx -y github:Andjroo111/nimiq-branding-cli align --all . --json > align.json || true
+          node -e "const r=require('./align.json').results.filter(x=>!x.exempt); const bad=r.filter(x=>x.overall==='risky-fail'); const drift=r.filter(x=>x.overall==='safe-drift'); console.log('risky='+bad.length); console.log('drift='+drift.length); process.stdout.write('');"
+          risky=$(node -e "console.log(require('./align.json').results.filter(x=>!x.exempt&&x.overall==='risky-fail').length)")
+          drift=$(node -e "console.log(require('./align.json').results.filter(x=>!x.exempt&&x.overall==='safe-drift').length)")
+          echo "risky=$risky" >> "$GITHUB_OUTPUT"
+          echo "drift=$drift" >> "$GITHUB_OUTPUT"
+
+      # ---- SAFE: only manifest drift → autofix the manifests + open a PR ----
+      - name: PR safe manifest fixes
+        if: steps.align.outputs.risky == '0' && steps.align.outputs.drift != '0'
+        run: |
+          npx -y github:Andjroo111/nimiq-branding-cli align --all . --fix || true
+          git config user.name  "nq-align-bot"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          branch="align/auto-manifest-fix"
+          git checkout -B "$branch"
+          git add -A '*nimiq-stack.json'
+          if git diff --cached --quiet; then echo "nothing to fix"; exit 0; fi
+          git commit -m "align: safe manifest fixes (nq align --fix)"
+          git push -f origin "$branch"
+          if [ "$(gh pr list --head "$branch" --state open --json number --jq 'length')" = "0" ]; then
+            gh pr create --head "$branch" --base main \
+              --title "align: safe manifest fixes" \
+              --body "Automated \`nq align --fix\` — manifest-only, no source changes."
+          fi
+
+      # ---- RISKY: a load-bearing axis failed (light client / off-brand) → rolling issue ----
+      - name: Open/update stack-drift issue
+        if: steps.align.outputs.risky != '0'
+        run: |
+          gh label create stack-drift --color B91C1C \
+            --description "an app drifted off the canonical Nimiq fleet stack" 2>/dev/null || true
+          body="$(npx -y github:Andjroo111/nimiq-branding-cli align --all . 2>&1 || true)"
+          existing=$(gh issue list --state open --label stack-drift --json number --jq '.[0].number')
+          if [ -n "$existing" ]; then
+            printf '%s\n' "$body" | gh issue comment "$existing" --body-file -
+          else
+            printf '%s\n' "$body" | gh issue create --title "⚙️ Nimiq stack drift needs review" \
+              --label stack-drift --body-file -
+          fi

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "nimiq-branding-cli",
-  "version": "1.1.1",
-  "description": "nq \u2014 pixel-verified Nimiq UI component registry + CLI. 39 components (Vue 3 + plain HTML) diffed against the real Nimiq apps, plus the team's real asset library. Unofficial community tool.",
+  "version": "1.2.0",
+  "description": "nq — pixel-verified Nimiq UI component registry + CLI. 39 components (Vue 3 + plain HTML) diffed against the real Nimiq apps, plus the team's real asset library. Unofficial community tool.",
   "type": "module",
   "bin": {
     "nq": "./bin/nq.js"
   },
   "scripts": {
     "verify": "node scripts/verify.mjs",
-    "test": "node --test test/"
+    "test": "node --test test/*.test.mjs"
   },
   "engines": {
     "node": ">=18"
@@ -37,4 +37,4 @@
     "crypto",
     "ui"
   ]
-}
+}

package/registry/SKILL-BLOCK.md

@@ -0,0 +1,20 @@
+<!-- Generated by nq sync-skill. The nimiq-ui SKILL.md mirrors these two blocks. -->
+
+## summary block
+<!-- AUTO-GENERATED by `nq sync-skill` from registry/index.json — do not hand-edit -->
+The **nimiq-branding-cli** at `~/Projects/nimiq/nimiq-branding-cli` ships **40 components** ported
+from Nimiq's own Vue source, each **pixel-diffed against a verbatim upstream render** — **39 pixel-verified**,
+plus 1 original brand composition (`flag-hex`). If the registry has it, copying it in is strictly better than writing it.
+
+## registry block
+<!-- AUTO-GENERATED by `nq sync-skill` from registry/index.json — do not hand-edit -->
+Registry (40 components, 39 pixel-verified) ·
+**data-display** balance-distribution, copyable, flag-hex*, price-chart, qr-code, tooltip ·
+**feedback** backup-banner, consensus-icon, loading-spinner, status-alert, status-screen, timer, toast-notification ·
+**form** address-input, amount-input, buttons, close-button, label-input, search-bar, select-bar, slider-toggle, swap-balance-bar ·
+**identity** account-list, account-ring, address-display, identicon ·
+**layout** card, page-body, page-footer, page-header, small-page ·
+**marketing** app-showcase-card, hero-section, honeycomb-band ·
+**payment** amount, amount-with-fee, fiat-amount, payment-info-line, transaction-list ·
+**wallet** account-header.
+(`*` = unverified. `flag-hex` is an original brand composition, not an upstream port — battle-tested.)

package/registry/components/account-header/meta.json

@@ -66,5 +66,15 @@
   "notes": "Composition. Sources: upstream/wallet/src/components/layouts/AddressOverview.vue (.active-address + .actions desktop markup and scoped SCSS), upstream/wallet/src/components/SearchBar.vue, upstream/wallet/src/components/staking/StakingButton.vue (.staking-feature-tip green CTA tooltip, ::v-deep expanded), upstream/wallet/src/components/icons/Staking/StakingIcon.vue (gradients=false pill mode), upstream/vue-components Tooltip.vue base (bottom-position subset) and Amount.vue. Wallet theme vars (--body-size:2rem, --h1-size:3rem, --large-button-size:2rem, --text-16, --light-blue-40) from wallet src/scss/themes.scss are defined on the component root. Identicon via the pinned @nimiq/iqons@1.6.0 jsdelivr recipe (registry identicon component). Component chrome: root gets padding-bottom:9rem to reserve space for the CTA tooltip (in the wallet it overlays the transaction list); tooltip-box positioned inline (top:100%; left:50%; translate(-50%,1rem)) replacing the upstream JS positioning. Identicon sprite is the REAL team-shipped iqons.min.svg (84-symbol part catalog, 88KB) vendored at assets/img/iqons.min.svg — byte-identical to the Hub-deployed sprite captured in references/assets/hub/iqons.min.svg and to @nimiq/iqons@1.6.0 dist; the snippet probes the local copy and falls back to the same CDN sprite, while the iqons JS library itself stays pinned on jsdelivr (code, not artwork).",
   "assetFiles": [
     "img/iqons.min.svg"
-  ]
+  ],
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/layouts/AddressOverview.vue",
+      "wallet:src/components/SearchBar.vue",
+      "wallet:src/components/staking/StakingButton.vue",
+      "wallet:src/components/icons/Staking/StakingIcon.vue"
+    ]
+  }
 }

package/registry/components/account-list/meta.json

@@ -80,5 +80,13 @@
   "notes": "Sample state: 3 enabled rows (Main Account 12 345.6789 NIM / Savings 2500.00 NIM / Pocket Money 49.92 NIM), minBalance set so balances render, list at 420px (SmallPage width). Addresses are synthetic but checksum-valid (IBAN mod-97). Identicons via @nimiq/iqons@1.6.0 pinned on jsdelivr with Iqons.svgPath pointed at iqons.min.svg (same recipe as the identicon component). Static state: identicon scale(0.9), label/balance opacity 0.7, caret hidden (appears on hover with green balance + row highlight). Amount formatting: U+202F narrow no-break space grouping above 4 integer digits. The row content is upstream's Account.vue (layout 'row'); its markup/styles are inlined in the Vue port since Account has no own registry entry. Tooltip/LabelInput only appear for disabled/editable rows (not in sample). Identicon sprite is the REAL team-shipped iqons.min.svg (84-symbol part catalog, 88KB) vendored at assets/img/iqons.min.svg — byte-identical to the Hub-deployed sprite captured in references/assets/hub/iqons.min.svg and to @nimiq/iqons@1.6.0 dist; the snippet probes the local copy and falls back to the same CDN sprite, while the iqons JS library itself stays pinned on jsdelivr (code, not artwork).",
   "assetFiles": [
     "img/iqons.min.svg"
-  ]
+  ],
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AccountList.vue",
+      "vue-components:src/components/Identicon.vue"
+    ]
+  }
 }

package/registry/components/account-ring/meta.json

@@ -44,5 +44,13 @@
   "notes": "Wraps the identicon component (same @nimiq/iqons@1.6.0 jsdelivr pin in truth and demo). Sample state: 3 fixed valid addresses (NQ07 0000…, NQ21 1111…, NQ35 2222…) → 3 iqons + 3 faint placeholder hexagons. Default size 11.25rem = 90px under nimiq-style's 8px root. Bottom slot (nth-child 3) intentionally overflows the square container by ~0.45rem upstream; element screenshots crop to the .account-ring box identically in truth and demo. Identicon sprite is the REAL team-shipped iqons.min.svg (84-symbol part catalog, 88KB) vendored at assets/img/iqons.min.svg — byte-identical to the Hub-deployed sprite captured in references/assets/hub/iqons.min.svg and to @nimiq/iqons@1.6.0 dist; the snippet probes the local copy and falls back to the same CDN sprite, while the iqons JS library itself stays pinned on jsdelivr (code, not artwork).",
   "assetFiles": [
     "img/iqons.min.svg"
-  ]
+  ],
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AccountRing.vue",
+      "vue-components:src/components/Identicon.vue"
+    ]
+  }
 }

package/registry/components/address-display/html/address-display.css

@@ -1,23 +1,31 @@
-/* AddressDisplay (from @nimiq/vue-components AddressDisplay.vue)
-   Assumes the Nimiq style root font-size of 8px (html { font-size: 8px })
-   and Fira Mono loaded, e.g.:
-   https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap */
+/* AddressDisplay — hardened grid build (from @nimiq/vue-components AddressDisplay.vue).
+   The original used flex `width:33%` + space-between, which drifts when Fira Mono
+   isn't loaded or the root font-size differs. This version locks the 3×3 with CSS Grid
+   (the column count can never reflow) and self-imports Fira Mono so it can't fall back.
+   Assumes the Nimiq style root font-size of 8px (html { font-size: 8px }); on a 16px-root
+   modern page, set font-size/max-width in px or double the rem values. */
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap');
 
 .address-display {
+    display: grid;
+    justify-items: center;
     width: 100%;
     box-sizing: content-box;
     color: rgba(31, 35, 72, .5); /* nimiq-blue with .5 opacity */
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
     font-size: 3rem;
+    font-family: 'Fira Mono', monospace;
 }
 
+/* 3 columns at 33% + space-between exactly mirrors the upstream spacing, but grid
+   pins the column count so a wide fallback glyph can never wrap or shove a block. */
 .format-nimiq {
+    grid-template-columns: repeat(3, 33%);
+    justify-content: space-between;
     max-width: 28.25rem;
 }
 
 .format-ethereum {
+    grid-template-columns: 1fr;
     max-width: 27rem;
 }
 
@@ -28,22 +36,18 @@
 }
 
 .chunk {
-    font-family: 'Fira Mono', monospace;
     margin: 0.875rem 0;
     line-height: 1.11;
     text-align: center;
     box-sizing: border-box;
+    white-space: nowrap; /* a 4-char block never breaks */
 }
 
 .format-nimiq .chunk {
-    width: 33%;
     text-transform: uppercase;
 }
 
-.format-ethereum .chunk {
-    width: 100%;
-}
-
+/* the   renders zero-width so copy/paste keeps "NQ07 0000 …" intact */
 .space {
     font-size: 0;
 }

package/registry/components/address-display/html/demo.html

@@ -9,22 +9,25 @@
 <style>
     body { font-family: 'Mulish', sans-serif; margin: 0; padding: 32px; }
 
-    /* address-display */
+    /* address-display — hardened grid build (locks the 3 columns; can't reflow) */
     .address-display {
+        display: grid;
+        justify-items: center;
         width: 100%;
         box-sizing: content-box;
         color: rgba(31, 35, 72, .5); /* nimiq-blue with .5 opacity */
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
         font-size: 3rem;
+        font-family: 'Fira Mono', monospace;
     }
 
     .format-nimiq {
+        grid-template-columns: repeat(3, 33%);
+        justify-content: space-between;
         max-width: 28.25rem;
     }
 
     .format-ethereum {
+        grid-template-columns: 1fr;
         max-width: 27rem;
     }
 
@@ -35,22 +38,17 @@
     }
 
     .chunk {
-        font-family: 'Fira Mono', monospace;
         margin: 0.875rem 0;
         line-height: 1.11;
         text-align: center;
         box-sizing: border-box;
+        white-space: nowrap;
     }
 
     .format-nimiq .chunk {
-        width: 33%;
         text-transform: uppercase;
     }
 
-    .format-ethereum .chunk {
-        width: 100%;
-    }
-
     .space {
         font-size: 0;
     }

package/registry/components/address-display/meta.json

@@ -2,21 +2,51 @@
   "name": "address-display",
   "purpose": "Displays a Nimiq (or Ethereum) address as a grid of monospace chunks — 9 four-char blocks in 3 columns for Nimiq format — optionally copyable.",
   "category": "identity",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "address", "type": "string", "required": true, "description": "The address to display." },
-    { "name": "format", "type": "string", "default": "nimiq", "description": "'nimiq' (9 chunks of 4, uppercase) or 'ethereum' (3 rows of 14 chars)." },
-    { "name": "copyable", "type": "boolean", "default": false, "description": "Wraps the display in a Copyable so clicking copies the address." }
+    {
+      "name": "address",
+      "type": "string",
+      "required": true,
+      "description": "The address to display."
+    },
+    {
+      "name": "format",
+      "type": "string",
+      "default": "nimiq",
+      "description": "'nimiq' (9 chunks of 4, uppercase) or 'ethereum' (3 rows of 14 chars)."
+    },
+    {
+      "name": "copyable",
+      "type": "boolean",
+      "default": false,
+      "description": "Wraps the display in a Copyable so clicking copies the address."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 400 },
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
     "selector": ".address-display",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: NQ07 0000... burn address, nimiq format, copyable=false. Fira Mono loaded from Google Fonts (upstream assumes the host app provides it). copyable=true depends on the Copyable component (not ported here); the html/vue variants render the plain div form. ValidationUtils.normalizeAddress from @nimiq/utils is inlined in the Vue port."
+  "notes": "Sample state: NQ07 0000... burn address, nimiq format, copyable=false. HARDENED 2026-06-20: the 3×3 is now CSS Grid (grid-template-columns: repeat(3,33%) + justify-content:space-between) instead of flex width:33% — grid pins the column count so a wide fallback glyph can never reflow/wrap; the CSS self-imports Fira Mono so a missing font link can't make it drift; .chunk has white-space:nowrap. Pixel-verified 0% diff vs the original flex render, so the look is identical. GOTCHA still live: font-size:3rem + max-width:28.25rem assume the legacy 8px root; on a 16px-root modern page set them in px or 2× the rem. copyable=true depends on the Copyable component (not ported here). ValidationUtils.normalizeAddress from @nimiq/utils is inlined in the Vue port.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AddressDisplay.vue"
+    ]
+  }
 }

package/registry/components/address-display/vue/AddressDisplay.vue

@@ -62,21 +62,28 @@ defineExpose({ text });
 </script>
 
 <style scoped>
+    /* Hardened grid build: locks the 3 columns (can't reflow) and self-imports
+       Fira Mono so a missing font link can't make the 3×3 drift. */
+    @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&display=swap');
+
     .address-display {
+        display: grid;
+        justify-items: center;
         width: 100%;
         box-sizing: content-box;
         color: rgba(31, 35, 72, .5); /* nimiq-blue with .5 opacity */
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
         font-size: 3rem;
+        font-family: 'Fira Mono', monospace;
     }
 
     .format-nimiq {
+        grid-template-columns: repeat(3, 33%);
+        justify-content: space-between;
         max-width: 28.25rem;
     }
 
     .format-ethereum {
+        grid-template-columns: 1fr;
         max-width: 27rem;
     }
 
@@ -87,22 +94,17 @@ defineExpose({ text });
     }
 
     .chunk {
-        font-family: 'Fira Mono', monospace;
         margin: 0.875rem 0;
         line-height: 1.11;
         text-align: center;
         box-sizing: border-box;
+        white-space: nowrap;
     }
 
     .format-nimiq .chunk {
-        width: 33%;
         text-transform: uppercase;
     }
 
-    .format-ethereum .chunk {
-        width: 100%;
-    }
-
     .space {
         font-size: 0;
     }

package/registry/components/address-input/meta.json

@@ -2,23 +2,66 @@
   "name": "address-input",
   "purpose": "A 3x3 block grid textarea for typing Nimiq addresses (optionally Ethereum addresses and domains), with live formatting into 4-char blocks, validation, and per-block focus coloring.",
   "category": "form",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "value", "type": "string", "default": "", "description": "The address value, bindable via v-model." },
-    { "name": "autofocus", "type": "boolean", "default": false, "description": "Focus the input on mount." },
-    { "name": "allowNimAddresses", "type": "boolean", "default": true, "description": "Accept Nimiq NQ... addresses." },
-    { "name": "allowEthAddresses", "type": "boolean", "default": false, "description": "Accept Ethereum 0x... addresses (checksummed via js-sha3 keccak_256)." },
-    { "name": "allowDomains", "type": "boolean", "default": false, "description": "Accept domain names (collapses to a single-row input)." }
+    {
+      "name": "value",
+      "type": "string",
+      "default": "",
+      "description": "The address value, bindable via v-model."
+    },
+    {
+      "name": "autofocus",
+      "type": "boolean",
+      "default": false,
+      "description": "Focus the input on mount."
+    },
+    {
+      "name": "allowNimAddresses",
+      "type": "boolean",
+      "default": true,
+      "description": "Accept Nimiq NQ... addresses."
+    },
+    {
+      "name": "allowEthAddresses",
+      "type": "boolean",
+      "default": false,
+      "description": "Accept Ethereum 0x... addresses (checksummed via js-sha3 keccak_256)."
+    },
+    {
+      "name": "allowDomains",
+      "type": "boolean",
+      "default": false,
+      "description": "Accept domain names (collapses to a single-row input)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
-  "npmDeps": ["input-format", "js-sha3"],
+  "npmDeps": [
+    "input-format",
+    "js-sha3"
+  ],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 400 },
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
     "selector": ".address-input",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: filled with valid address 'NQ48 8CKH BA24 2VR3 N249 N8MN J5XX 74DB 5XJ8', unfocused, default props (NIM only) -> 3x3 grid of 4-char blocks (matches the wallet send modal); textarea text is black and each block is colored via a .color-overlay with mix-blend-mode:screen (var(--nimiq-blue) idle, light blue for the selected block in the live component). The live component formats the value as 3 lines ('wwww wwww wwww\\n' template). Empty state (previous sample): no value -> placeholder 'NQ' at 60% opacity in block 1, color overlays rendered but visibility:hidden, grid + vertical block separators unchanged. Fira Mono loaded from Google Fonts (upstream assumes host app provides it). html variant is static visual only (no input-format behavior). Vue port keeps full behavior: input-format and lazy js-sha3 are real npm deps; Clipboard.copy and ValidationUtils.isValidAddress from @nimiq/utils are inlined."
+  "notes": "Sample state: filled with valid address 'NQ48 8CKH BA24 2VR3 N249 N8MN J5XX 74DB 5XJ8', unfocused, default props (NIM only) -> 3x3 grid of 4-char blocks (matches the wallet send modal); textarea text is black and each block is colored via a .color-overlay with mix-blend-mode:screen (var(--nimiq-blue) idle, light blue for the selected block in the live component). The live component formats the value as 3 lines ('wwww wwww wwww\\n' template). Empty state (previous sample): no value -> placeholder 'NQ' at 60% opacity in block 1, color overlays rendered but visibility:hidden, grid + vertical block separators unchanged. Fira Mono loaded from Google Fonts (upstream assumes host app provides it). html variant is static visual only (no input-format behavior). Vue port keeps full behavior: input-format and lazy js-sha3 are real npm deps; Clipboard.copy and ValidationUtils.isValidAddress from @nimiq/utils are inlined.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AddressInput.vue"
+    ]
+  }
 }

package/registry/components/amount/meta.json

@@ -2,25 +2,74 @@
   "name": "amount",
   "purpose": "Formats a crypto amount given in its smallest unit (luna, satoshi, ...) as a human-readable number with thin-space digit grouping, configurable decimals and a currency ticker.",
   "category": "payment",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "amount", "type": "number | bigint | BigInteger", "required": true, "description": "Amount in the currency's smallest unit (e.g. luna for NIM)." },
-    { "name": "decimals", "type": "number", "description": "Exact decimals to show; takes precedence over minDecimals/maxDecimals." },
-    { "name": "minDecimals", "type": "number", "default": 2, "description": "Minimum decimals to show (pads with zeros)." },
-    { "name": "maxDecimals", "type": "number", "default": 5, "description": "Maximum decimals to show (rounds)." },
-    { "name": "showApprox", "type": "boolean", "default": false, "description": "Prefix '~ ' when rounding made the displayed value inexact." },
-    { "name": "currency", "type": "string", "default": "nim", "description": "Currency code; rendered uppercase as the ticker (special-cased: tnim→tNIM, mbtc→mBTC, tbtc→tBTC, usdc.e→USDC.e)." },
-    { "name": "currencyDecimals", "type": "number", "default": 5, "description": "Decimals of the currency's smallest unit (5 for NIM/luna, 8 for BTC/sat)." }
+    {
+      "name": "amount",
+      "type": "number | bigint | BigInteger",
+      "required": true,
+      "description": "Amount in the currency's smallest unit (e.g. luna for NIM)."
+    },
+    {
+      "name": "decimals",
+      "type": "number",
+      "description": "Exact decimals to show; takes precedence over minDecimals/maxDecimals."
+    },
+    {
+      "name": "minDecimals",
+      "type": "number",
+      "default": 2,
+      "description": "Minimum decimals to show (pads with zeros)."
+    },
+    {
+      "name": "maxDecimals",
+      "type": "number",
+      "default": 5,
+      "description": "Maximum decimals to show (rounds)."
+    },
+    {
+      "name": "showApprox",
+      "type": "boolean",
+      "default": false,
+      "description": "Prefix '~ ' when rounding made the displayed value inexact."
+    },
+    {
+      "name": "currency",
+      "type": "string",
+      "default": "nim",
+      "description": "Currency code; rendered uppercase as the ticker (special-cased: tnim→tNIM, mbtc→mBTC, tbtc→tBTC, usdc.e→USDC.e)."
+    },
+    {
+      "name": "currencyDecimals",
+      "type": "number",
+      "default": 5,
+      "description": "Decimals of the currency's smallest unit (5 for NIM/luna, 8 for BTC/sat)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 400 },
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
     "selector": ".amount",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: 1234567890 luna = 12,345.6789 NIM, minDecimals 2, maxDecimals 5, currency nim. FormattableNumber from @nimiq/utils is inlined as a faithful mini-port in the Vue variant (string-based, precision-loss-free: moveDecimalSeparator, half-up rounding, U+202F narrow no-break space grouping applied only when there are more than 4 integer digits). No npm deps. The .currency span carries the currency code as a class for host styling; upstream itself styles only .amount (nowrap) and .approx::before."
+  "notes": "Sample state: 1234567890 luna = 12,345.6789 NIM, minDecimals 2, maxDecimals 5, currency nim. FormattableNumber from @nimiq/utils is inlined as a faithful mini-port in the Vue variant (string-based, precision-loss-free: moveDecimalSeparator, half-up rounding, U+202F narrow no-break space grouping applied only when there are more than 4 integer digits). No npm deps. The .currency span carries the currency code as a class for host styling; upstream itself styles only .amount (nowrap) and .approx::before.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/Amount.vue"
+    ]
+  }
 }