nimiq-branding-cli 1.1.0 → 1.2.0

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

@@ -2,24 +2,69 @@
   "name": "amount-input",
   "purpose": "Large centered amount entry field that auto-fits its width and shrinks its font to the available space, with the currency ticker (NIM, BTC, ...) rendered beside the value.",
   "category": "form",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "value", "type": "number", "default": null, "description": "Amount in the currency's smallest unit (Luna for NIM, i.e. value / 10^decimals is displayed)." },
-    { "name": "maxFontSize", "type": "number", "default": 8, "description": "Maximum font size in rem; the font shrinks below this when the value would overflow the available width." },
-    { "name": "placeholder", "type": "string", "default": "0", "description": "Placeholder shown when empty." },
-    { "name": "vanishing", "type": "boolean", "default": false, "description": "Removes the input's inset border (nq-input .vanishing style)." },
-    { "name": "decimals", "type": "number", "default": 5, "description": "Number of decimals the entered value is parsed with (5 for NIM/Luna)." },
-    { "name": "currency", "type": "string", "default": "nim", "description": "Currency code; rendered as ticker (nim→NIM, tnim→tNIM, mbtc→mBTC, tbtc→tBTC, usdc.e→USDC.e, else uppercased) and applied as a class on the ticker span." }
+    {
+      "name": "value",
+      "type": "number",
+      "default": null,
+      "description": "Amount in the currency's smallest unit (Luna for NIM, i.e. value / 10^decimals is displayed)."
+    },
+    {
+      "name": "maxFontSize",
+      "type": "number",
+      "default": 8,
+      "description": "Maximum font size in rem; the font shrinks below this when the value would overflow the available width."
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "default": "0",
+      "description": "Placeholder shown when empty."
+    },
+    {
+      "name": "vanishing",
+      "type": "boolean",
+      "default": false,
+      "description": "Removes the input's inset border (nq-input .vanishing style)."
+    },
+    {
+      "name": "decimals",
+      "type": "number",
+      "default": 5,
+      "description": "Number of decimals the entered value is parsed with (5 for NIM/Luna)."
+    },
+    {
+      "name": "currency",
+      "type": "string",
+      "default": "nim",
+      "description": "Currency code; rendered as ticker (nim→NIM, tnim→tNIM, mbtc→mBTC, tbtc→tBTC, usdc.e→USDC.e, else uppercased) and applied as a class on the ticker span."
+    }
+  ],
+  "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-input",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: '100.00' NIM entered, unfocused, maxFontSize 8rem. The component's width/font-size auto-fit is inherently JS-driven (upstream measures hidden width-finder spans on every input); truth.html and demo.html both include a minimal script that replicates mounted()+updateWidth() once after fonts load — deterministic for a fixed value. Truth emulates Vue's [data-v-*] scoping on the component CSS because scoped attribute selectors are what let the upstream `input` rule (padding 0 .25rem) beat .nq-input's specificity."
+  "notes": "Sample state: '100.00' NIM entered, unfocused, maxFontSize 8rem. The component's width/font-size auto-fit is inherently JS-driven (upstream measures hidden width-finder spans on every input); truth.html and demo.html both include a minimal script that replicates mounted()+updateWidth() once after fonts load — deterministic for a fixed value. Truth emulates Vue's [data-v-*] scoping on the component CSS because scoped attribute selectors are what let the upstream `input` rule (padding 0 .25rem) beat .nq-input's specificity.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AmountInput.vue"
+    ]
+  }
 }

package/registry/components/amount-with-fee/meta.json

@@ -2,24 +2,71 @@
   "name": "amount-with-fee",
   "purpose": "Large centered amount entry field (auto-sizing AmountInput with currency ticker) plus a secondary line that shows either an 'Insufficient balance' error, an approximate fiat value and/or the network fee. Used in send-transaction flows.",
   "category": "payment",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "value", "type": "{ amount: number, fee: number, isValid: boolean }", "default": "{ amount: 0, fee: 0, isValid: false }", "description": "v-model object: amount and fee in the currency's smallest unit (luna); isValid is computed and emitted back (amount > 0 && amount + fee <= availableBalance)." },
-    { "name": "availableBalance", "type": "number", "default": 0, "description": "Spendable balance in the smallest unit; entering more shows the insufficient-balance error and red styling." },
-    { "name": "fiatAmount", "type": "number | null", "description": "Optional fiat value of the entered amount; shown as '~<FiatAmount>' when set together with fiatCurrency." },
-    { "name": "fiatCurrency", "type": "string | null", "description": "Fiat currency code for fiatAmount (e.g. 'eur')." },
-    { "name": "currency", "type": "string", "default": "nim", "description": "Crypto 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": "value",
+      "type": "{ amount: number, fee: number, isValid: boolean }",
+      "default": "{ amount: 0, fee: 0, isValid: false }",
+      "description": "v-model object: amount and fee in the currency's smallest unit (luna); isValid is computed and emitted back (amount > 0 && amount + fee <= availableBalance)."
+    },
+    {
+      "name": "availableBalance",
+      "type": "number",
+      "default": 0,
+      "description": "Spendable balance in the smallest unit; entering more shows the insufficient-balance error and red styling."
+    },
+    {
+      "name": "fiatAmount",
+      "type": "number | null",
+      "description": "Optional fiat value of the entered amount; shown as '~<FiatAmount>' when set together with fiatCurrency."
+    },
+    {
+      "name": "fiatCurrency",
+      "type": "string | null",
+      "description": "Fiat currency code for fiatAmount (e.g. 'eur')."
+    },
+    {
+      "name": "currency",
+      "type": "string",
+      "default": "nim",
+      "description": "Crypto 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"
+  ],
+  "dependsOn": [
+    "amount",
+    "fiat-amount"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
-  "dependsOn": ["amount", "fiat-amount"],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 400 },
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
     "selector": ".amount-with-fee",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: amount 10000000 luna (input shows '100'), fee 0, availableBalance 50000000, no fiat — valid, so the fee-section renders empty (min-height 2rem placeholder). Both truth and demo replicate AmountInput's JS width behavior: the input's inline width is set to the rendered width of a hidden measuring span (text + 1.25rem padding) after fonts load; the upstream font-shrink logic (maxFontSize) only kicks in for values wider than the container and is not exercised by the sample. The slot/error/fiat/fee branches are documented in the snippet. Vue port ships AmountWithFee.vue + AmountInput.vue (AmountInput is not a standalone registry component); Amount.vue and FiatAmount.vue are imported from sibling registry components 'amount' and 'fiat-amount' (copy them next to AmountWithFee.vue, see dependsOn). $t is stubbed as identity."
+  "notes": "Sample state: amount 10000000 luna (input shows '100'), fee 0, availableBalance 50000000, no fiat — valid, so the fee-section renders empty (min-height 2rem placeholder). Both truth and demo replicate AmountInput's JS width behavior: the input's inline width is set to the rendered width of a hidden measuring span (text + 1.25rem padding) after fonts load; the upstream font-shrink logic (maxFontSize) only kicks in for values wider than the container and is not exercised by the sample. The slot/error/fiat/fee branches are documented in the snippet. Vue port ships AmountWithFee.vue + AmountInput.vue (AmountInput is not a standalone registry component); Amount.vue and FiatAmount.vue are imported from sibling registry components 'amount' and 'fiat-amount' (copy them next to AmountWithFee.vue, see dependsOn). $t is stubbed as identity.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/AmountWithFee.vue",
+      "vue-components:src/components/AmountInput.vue"
+    ]
+  }
 }

package/registry/components/app-showcase-card/meta.json

@@ -2,9 +2,14 @@
   "name": "app-showcase-card",
   "purpose": "nimiq.com 'THE APPS' marketing card: light-gray rounded card with gold app-icon chip (official white Nimiq signet), title, 2-line gray subtitle and the REAL Nimiq Pay phone screenshot clipped at the card edge. .wide modifier puts the bare gold signet + copy left and the REAL Nimiq Wallet desktop screenshot bleeding off the bottom-right.",
   "category": "marketing",
-  "variants": ["default", "wide"],
+  "variants": [
+    "default",
+    "wide"
+  ],
   "props": [],
-  "cssFiles": ["app-showcase-card.css"],
+  "cssFiles": [
+    "app-showcase-card.css"
+  ],
   "assetFiles": [
     "img/nimiq-pay-preview.webp",
     "img/nimiq-wallet-preview.webp",
@@ -15,10 +20,18 @@
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 860, "height": 1000 },
+    "viewport": {
+      "width": 860,
+      "height": 1000
+    },
     "selector": ".stage",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "MARKETING component, layout screenshot-calibrated against references/screenshots/nimiq-com/home-card-component.png (standard 'Pay App' card) and home-desktop-full.png THE APPS section (wide 'Nimiq wallet' card). Device mocks are the REAL team-shipped product screenshots (default, not optional): standard card renders assets/img/nimiq-pay-preview.webp (490x916 Nimiq Pay phone shot incl. its own rounded frame, clipped by the card's overflow:hidden bottom edge like the live site) and the wide card renders assets/img/nimiq-wallet-preview.webp (1734x1164 Nimiq Wallet desktop shot, absolutely positioned so it bleeds off the right + bottom card edges). Both originate from nimiq.com's Prismic CDN (raw sweep copies: references/assets/nimiq-com/prismic/Zt7oXRoQrfVKl2hA_NimiqPayPreview.webp and Zt7oXhoQrfVKl2hB_NimiqWalletPreview.webp). Hexagon marks are the official signet SVGs from the team logo pack: white signet (assets/logos/official/white/nimiq_signet_white_base_size.svg) inside the gold chip with the 'Pay' label, and the colored gold signet (assets/logos/official/colored/nimiq_signet_rgb_base_size.svg) shown bare in the wide card exactly like the live site. The chip's gold radial gradient uses the same stops as the official colored signet (#EC991C -> #E9B213). The old CSS-built phone/window mocks and clip-path hexagons were deleted. Snippet references assets as ../../../../assets/<subpath>; nq add copies them into consumer projects at ./nimiq/assets/<subpath>. Self-contained px units (marketing pages don't use the legacy html{font-size:8px} framework); Mulish via Google Fonts. Static markup, no script."
+  "notes": "MARKETING component, layout screenshot-calibrated against references/screenshots/nimiq-com/home-card-component.png (standard 'Pay App' card) and home-desktop-full.png THE APPS section (wide 'Nimiq wallet' card). Device mocks are the REAL team-shipped product screenshots (default, not optional): standard card renders assets/img/nimiq-pay-preview.webp (490x916 Nimiq Pay phone shot incl. its own rounded frame, clipped by the card's overflow:hidden bottom edge like the live site) and the wide card renders assets/img/nimiq-wallet-preview.webp (1734x1164 Nimiq Wallet desktop shot, absolutely positioned so it bleeds off the right + bottom card edges). Both originate from nimiq.com's Prismic CDN (raw sweep copies: references/assets/nimiq-com/prismic/Zt7oXRoQrfVKl2hA_NimiqPayPreview.webp and Zt7oXhoQrfVKl2hB_NimiqWalletPreview.webp). Hexagon marks are the official signet SVGs from the team logo pack: white signet (assets/logos/official/white/nimiq_signet_white_base_size.svg) inside the gold chip with the 'Pay' label, and the colored gold signet (assets/logos/official/colored/nimiq_signet_rgb_base_size.svg) shown bare in the wide card exactly like the live site. The chip's gold radial gradient uses the same stops as the official colored signet (#EC991C -> #E9B213). The old CSS-built phone/window mocks and clip-path hexagons were deleted. Snippet references assets as ../../../../assets/<subpath>; nq add copies them into consumer projects at ./nimiq/assets/<subpath>. Self-contained px units (marketing pages don't use the legacy html{font-size:8px} framework); Mulish via Google Fonts. Static markup, no script.",
+  "source": {
+    "repo": "nimiq-com",
+    "ref": null,
+    "files": []
+  }
 }

package/registry/components/backup-banner/meta.json

@@ -2,14 +2,38 @@
   "name": "backup-banner",
   "purpose": "The wallet's persistent orange warning banner — \"There is no 'forgot password'\" with a Backup→ pill — shown until the account's recovery words are exported.",
   "category": "feedback",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "variant", "type": "'words' | 'file'", "description": "words = orange text on white with tonal inset border (recovery words not backed up); file = solid orange gradient (login file not saved)" }
+    {
+      "name": "variant",
+      "type": "'words' | 'file'",
+      "description": "words = orange text on white with tonal inset border (recovery words not backed up); file = solid orange gradient (login file not saved)"
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
-  "verify": { "viewport": { "width": 600, "height": 130 }, "selector": ".words", "maxDiffPct": 0.5, "settleMs": 250 },
-  "notes": "Source: upstream/wallet/src/components/layouts/AccountOverview.vue (.backup-warning block, SCSS expanded; .words variant). Needs wallet theme vars --body-size:2rem and --text-10:rgba(31,35,72,0.1) (from wallet themes.scss) — the snippet CSS defines them on the component root. AlertTriangleIcon + ArrowRightSmallIcon inlined from @nimiq/style icons. .nq-button-pill.orange comes from the legacy framework. Hover slides the arrow right 0.25rem. Verify selector is .words so it crops the same element in truth (.backup-warning.words) and demo (.backup-banner.words). Upstream click handlers (router push to Backup / hub backup()) are app wiring; the Vue port emits 'action'."
+  "verify": {
+    "viewport": {
+      "width": 600,
+      "height": 130
+    },
+    "selector": ".words",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Source: upstream/wallet/src/components/layouts/AccountOverview.vue (.backup-warning block, SCSS expanded; .words variant). Needs wallet theme vars --body-size:2rem and --text-10:rgba(31,35,72,0.1) (from wallet themes.scss) — the snippet CSS defines them on the component root. AlertTriangleIcon + ArrowRightSmallIcon inlined from @nimiq/style icons. .nq-button-pill.orange comes from the legacy framework. Hover slides the arrow right 0.25rem. Verify selector is .words so it crops the same element in truth (.backup-warning.words) and demo (.backup-banner.words). Upstream click handlers (router push to Backup / hub backup()) are app wiring; the Vue port emits 'action'.",
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/layouts/AccountOverview.vue"
+    ]
+  }
 }

package/registry/components/balance-distribution/meta.json

@@ -2,19 +2,39 @@
   "name": "balance-distribution",
   "purpose": "Sidebar balance-distribution donut from the Nimiq wallet: a ring made of one rounded SVG arc per currency (gold NIM, orange BTC, blue USDC, teal USDT), sized by each currency's share of the account's total fiat value, next to a bold white CURRENCY / percentage legend. Empty currencies get no arc and a dimmed legend row; hovering a row or arc highlights that currency. Lives on the navy wallet sidebar.",
   "category": "data-display",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "balances", "type": "Partial<Record<'nim' | 'btc' | 'usdc' | 'usdt', number>>", "default": "{ nim: 1, btc: 0 }", "description": "Fiat value per currency; each arc's length is the currency's share of the total. The keys decide which currencies appear (legend order: nim, btc, usdc, usdt; zero balances sort last). Upstream computes this from the Address/BtcAddress/PolygonAddress/Staking stores and Fiat exchange rates — the port exposes it as a prop." }
+    {
+      "name": "balances",
+      "type": "Partial<Record<'nim' | 'btc' | 'usdc' | 'usdt', number>>",
+      "default": "{ nim: 1, btc: 0 }",
+      "description": "Fiat value per currency; each arc's length is the currency's share of the total. The keys decide which currencies appear (legend order: nim, btc, usdc, usdt; zero balances sort last). Upstream computes this from the Address/BtcAddress/PolygonAddress/Staking stores and Fiat exchange rates — the port exposes it as a prop."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 240, "height": 110 },
+    "viewport": {
+      "width": 240,
+      "height": 110
+    },
     "selector": ".balance-distribution",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Source: upstream/wallet/src/components/BalanceDistribution.vue (scoped styles verbatim) + layouts/Sidebar.vue for context (navy --bg-secondary: var(--nimiq-blue) background, 2.5rem vertical margin, Swap pill rendered below it by the sidebar — the pill is a sibling Tooltip/button, not part of this component). Sample state per brief item 6: NIM 100% / BTC 0% — BTC has no balance so only the gold NIM arc renders, as a full circle without gap or line caps (SVG_SIZE 51, STROKE_WIDTH 4, RADIUS 23.5, dasharray '147.655 0', dashoffset = circleStart = 32.914); the BTC legend row is .inactive (children at opacity .3). Currency colors: --nimiq-gold from the legacy framework; --bitcoin-orange #F7931A / --usdc-blue #2775CA / --usdt-green #009393 from wallet themes.scss, defined on the component root in the snippet. The upstream enter/leave arc transitions (transition-group hooks) are ported in the Vue variant; the html snippet is the static render."
+  "notes": "Source: upstream/wallet/src/components/BalanceDistribution.vue (scoped styles verbatim) + layouts/Sidebar.vue for context (navy --bg-secondary: var(--nimiq-blue) background, 2.5rem vertical margin, Swap pill rendered below it by the sidebar — the pill is a sibling Tooltip/button, not part of this component). Sample state per brief item 6: NIM 100% / BTC 0% — BTC has no balance so only the gold NIM arc renders, as a full circle without gap or line caps (SVG_SIZE 51, STROKE_WIDTH 4, RADIUS 23.5, dasharray '147.655 0', dashoffset = circleStart = 32.914); the BTC legend row is .inactive (children at opacity .3). Currency colors: --nimiq-gold from the legacy framework; --bitcoin-orange #F7931A / --usdc-blue #2775CA / --usdt-green #009393 from wallet themes.scss, defined on the component root in the snippet. The upstream enter/leave arc transitions (transition-group hooks) are ported in the Vue variant; the html snippet is the static render.",
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/BalanceDistribution.vue"
+    ]
+  }
 }

package/registry/components/buttons/meta.json

@@ -2,21 +2,52 @@
   "name": "buttons",
   "purpose": "Primary Nimiq buttons (.nq-button) from the nimiq-style CSS framework: pill-shaped gradient buttons in blue (default), light-blue, green, orange, red, gold, plus disabled and inverse states.",
   "category": "form",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "color", "type": "'' | 'light-blue' | 'green' | 'orange' | 'red' | 'gold'", "default": "''", "description": "Color variant class added to .nq-button; empty = default Nimiq blue." },
-    { "name": "inverse", "type": "boolean", "default": "false", "description": "White button with colored text, for use on colored backgrounds." },
-    { "name": "disabled", "type": "boolean", "default": "false", "description": "Disabled state (gray, no shadow, not-allowed cursor)." }
+    {
+      "name": "color",
+      "type": "'' | 'light-blue' | 'green' | 'orange' | 'red' | 'gold'",
+      "default": "''",
+      "description": "Color variant class added to .nq-button; empty = default Nimiq blue."
+    },
+    {
+      "name": "inverse",
+      "type": "boolean",
+      "default": "false",
+      "description": "White button with colored text, for use on colored backgrounds."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "description": "Disabled state (gray, no shadow, not-allowed cursor)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 600 },
+    "viewport": {
+      "width": 600,
+      "height": 600
+    },
     "selector": "body",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Pure CSS-framework component — all styling comes from .nq-button rules in legacy nimiq-style.min.css (gradient backgrounds via --nimiq-*-bg vars, 500px border-radius, uppercase bold text). No scoped CSS exists upstream. html/buttons.css is the upstream src/buttons.css extracted verbatim for standalone use (still requires the --nimiq-* CSS vars). Vue variant is a thin wrapper adding color/inverse/disabled classes."
+  "notes": "Pure CSS-framework component — all styling comes from .nq-button rules in legacy nimiq-style.min.css (gradient backgrounds via --nimiq-*-bg vars, 500px border-radius, uppercase bold text). No scoped CSS exists upstream. html/buttons.css is the upstream src/buttons.css extracted verbatim for standalone use (still requires the --nimiq-* CSS vars). Vue variant is a thin wrapper adding color/inverse/disabled classes.",
+  "source": {
+    "repo": "nimiq-style",
+    "ref": "21c10a1",
+    "files": [
+      "nimiq-style:src/buttons.css",
+      "nimiq-style:nimiq-style.min.css"
+    ]
+  }
 }

package/registry/components/card/meta.json

@@ -2,17 +2,33 @@
   "name": "card",
   "purpose": "Standard Nimiq card container (.nq-card) with header, body and footer sections; the base layout block of @nimiq/style used for grouping content.",
   "category": "layout",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 420 },
+    "viewport": {
+      "width": 600,
+      "height": 420
+    },
     "selector": ".nq-card",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Pure CSS-framework component: all styling comes from .nq-card, .nq-card-header, .nq-card-body, .nq-card-footer in legacy nimiq-style.min.css (white bg via --nimiq-card-bg, 1.25rem radius, shadow, --nimiq-blue text, max-width 75rem). Adjacent-sibling rules matter: .nq-card-header + .nq-card-body gets padding-top 1rem; .nq-card-body + .nq-card-footer gets padding-top 0. Sample state: nq-h1 header 'Card Title', nq-text body, footer with an nq-button. Vue variant is a slot-based convenience wrapper (header/default/footer slots), not an upstream vue-components port — upstream has no Card.vue; the card is markup-only in @nimiq/style demo.html."
+  "notes": "Pure CSS-framework component: all styling comes from .nq-card, .nq-card-header, .nq-card-body, .nq-card-footer in legacy nimiq-style.min.css (white bg via --nimiq-card-bg, 1.25rem radius, shadow, --nimiq-blue text, max-width 75rem). Adjacent-sibling rules matter: .nq-card-header + .nq-card-body gets padding-top 1rem; .nq-card-body + .nq-card-footer gets padding-top 0. Sample state: nq-h1 header 'Card Title', nq-text body, footer with an nq-button. Vue variant is a slot-based convenience wrapper (header/default/footer slots), not an upstream vue-components port — upstream has no Card.vue; the card is markup-only in @nimiq/style demo.html.",
+  "source": {
+    "repo": "nimiq-style",
+    "ref": "21c10a1",
+    "files": [
+      "nimiq-style:src/layout.css",
+      "nimiq-style:nimiq-style.min.css"
+    ]
+  }
 }

package/registry/components/close-button/meta.json

@@ -2,17 +2,32 @@
   "name": "close-button",
   "purpose": "Circled X dismiss button used on modals and overlays. A .nq-button-s stripped of its pill background, showing the Nimiq close icon at 20% opacity (40% on hover/focus/active), with a round hover halo and enlarged hit area.",
   "category": "form",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 200, "height": 200 },
+    "viewport": {
+      "width": 200,
+      "height": 200
+    },
     "selector": ".close-button",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: default resting state (icon at opacity .2, no .top-right positioning). Upstream scoped CSS targets the bare `button` element; the html snippet namespaces it under .close-button. CloseIcon (@nimiq/style close.svg, 24x24) is inlined with class nq-icon. Add class .top-right to absolutely pin it 2rem from the top-right of a positioned parent. Upstream emits a re-emitted 'click' (MouseEvent) and prevents mousedown default to avoid focus-stealing; no props. Requires nimiq-style for .nq-button-s, .nq-icon and --nimiq-ease."
+  "notes": "Sample state: default resting state (icon at opacity .2, no .top-right positioning). Upstream scoped CSS targets the bare `button` element; the html snippet namespaces it under .close-button. CloseIcon (@nimiq/style close.svg, 24x24) is inlined with class nq-icon. Add class .top-right to absolutely pin it 2rem from the top-right of a positioned parent. Upstream emits a re-emitted 'click' (MouseEvent) and prevents mousedown default to avoid focus-stealing; no props. Requires nimiq-style for .nq-button-s, .nq-icon and --nimiq-ease.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/CloseButton.vue"
+    ]
+  }
 }

package/registry/components/consensus-icon/meta.json

@@ -2,19 +2,40 @@
   "name": "consensus-icon",
   "purpose": "Network consensus indicator shown by every Nimiq light-client app: a globe icon that reflects the consensus state — animated globe sprite while syncing, globe with checkmark when consensus is established (green when its parent is :hover/:focus/.active), globe with alert triangle in orange when connecting or stalled.",
   "category": "feedback",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "consensus", "type": "'syncing' | 'established' | 'connecting' | 'stalled'", "default": "'syncing'", "description": "Consensus state. Upstream reads this live from the Network store; the port exposes it as a prop." }
+    {
+      "name": "consensus",
+      "type": "'syncing' | 'established' | 'connecting' | 'stalled'",
+      "default": "'syncing'",
+      "description": "Consensus state. Upstream reads this live from the Network store; the port exposes it as a prop."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 120, "height": 100 },
+    "viewport": {
+      "width": 120,
+      "height": 100
+    },
     "selector": ".consensus-icon",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: ESTABLISHED (WorldCheckIcon, static) wrapped in an .active parent so the upstream rule `.active > .established` colors it nimiq-green at full opacity — exactly how it appears on the wallet sidebar network button while the network page is open. At rest the icon inherits color from context (sidebar: white at 0.3 opacity). Container is 2.75rem (22px) with -0.125rem margin; the check SVG is 24x22 so it slightly overflows the box, as upstream. The SYNCING state animates a 10x3-frame sprite (consensus-sprite.svg, white strokes — needs a colored/dark background or the AccountOverview brightness/sepia filter); snippet + Vue port inline the sprite as a data URI so no asset file is needed. Selectors are namespaced under .consensus-icon and keyframes prefixed consensus-icon-* for showcase embedding."
+  "notes": "Sample state: ESTABLISHED (WorldCheckIcon, static) wrapped in an .active parent so the upstream rule `.active > .established` colors it nimiq-green at full opacity — exactly how it appears on the wallet sidebar network button while the network page is open. At rest the icon inherits color from context (sidebar: white at 0.3 opacity). Container is 2.75rem (22px) with -0.125rem margin; the check SVG is 24x22 so it slightly overflows the box, as upstream. The SYNCING state animates a 10x3-frame sprite (consensus-sprite.svg, white strokes — needs a colored/dark background or the AccountOverview brightness/sepia filter); snippet + Vue port inline the sprite as a data URI so no asset file is needed. Selectors are namespaced under .consensus-icon and keyframes prefixed consensus-icon-* for showcase embedding.",
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/ConsensusIcon.vue",
+      "wallet:src/components/icons/WorldCheckIcon.vue"
+    ]
+  }
 }

package/registry/components/copyable/meta.json

@@ -2,19 +2,39 @@
   "name": "copyable",
   "purpose": "Wrapper that makes a click on its content copy it (or a provided text) to the clipboard, with a light-blue hover/focus tint and an animated 'Copied' tooltip as feedback.",
   "category": "data-display",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "text", "type": "string", "required": false, "description": "A specific text to copy to the clipboard on click. Defaults to the element's own innerText (minus the tooltip label)." }
+    {
+      "name": "text",
+      "type": "string",
+      "required": false,
+      "description": "A specific text to copy to the clipboard on click. Defaults to the element's own innerText (minus the tooltip label)."
+    }
+  ],
+  "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": ".copyable",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: slot text 'NQ07 0000 ...' in resting (uncopied) state. The .background tint and .tooltip are opacity:0 at rest and only show on hover/focus/.copied. Tooltip label 'Copied' is the en-US i18n string. Clipboard.copy from @nimiq/utils is inlined verbatim in the Vue port (textarea + execCommand with selection restore). Upstream copies 800ms feedback (DISPLAY_TIME); keydown Space/Enter also triggers copy."
+  "notes": "Sample state: slot text 'NQ07 0000 ...' in resting (uncopied) state. The .background tint and .tooltip are opacity:0 at rest and only show on hover/focus/.copied. Tooltip label 'Copied' is the en-US i18n string. Clipboard.copy from @nimiq/utils is inlined verbatim in the Vue port (textarea + execCommand with selection restore). Upstream copies 800ms feedback (DISPLAY_TIME); keydown Space/Enter also triggers copy.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/Copyable.vue"
+    ]
+  }
 }

package/registry/components/fiat-amount/meta.json

@@ -2,23 +2,63 @@
   "name": "fiat-amount",
   "purpose": "Displays a fiat amount with an optimized currency symbol (e.g. $1234.56 instead of USD 1234.56) and adaptive decimal precision: decimals are extended until the rounded display deviates from the true amount by at most maxRelativeDeviation.",
   "category": "payment",
-  "variants": ["vue", "html"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "amount", "type": "number", "required": true, "description": "The fiat amount to display." },
-    { "name": "currency", "type": "string", "required": true, "description": "ISO 4217 currency code, e.g. 'USD', 'EUR'." },
-    { "name": "maxRelativeDeviation", "type": "number", "default": 0.1, "description": "Max allowed relative deviation of the rounded display value; decimals extend until met." },
-    { "name": "locale", "type": "string", "required": false, "description": "Formatting locale, e.g. 'en-US'. Defaults to a locale typical for the currency." },
-    { "name": "hideDecimals", "type": "boolean", "default": false, "description": "Render without decimals. Takes precedence over maxRelativeDeviation." }
+    {
+      "name": "amount",
+      "type": "number",
+      "required": true,
+      "description": "The fiat amount to display."
+    },
+    {
+      "name": "currency",
+      "type": "string",
+      "required": true,
+      "description": "ISO 4217 currency code, e.g. 'USD', 'EUR'."
+    },
+    {
+      "name": "maxRelativeDeviation",
+      "type": "number",
+      "default": 0.1,
+      "description": "Max allowed relative deviation of the rounded display value; decimals extend until met."
+    },
+    {
+      "name": "locale",
+      "type": "string",
+      "required": false,
+      "description": "Formatting locale, e.g. 'en-US'. Defaults to a locale typical for the currency."
+    },
+    {
+      "name": "hideDecimals",
+      "type": "boolean",
+      "default": false,
+      "description": "Render without decimals. Takes precedence over maxRelativeDeviation."
+    }
+  ],
+  "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": ".fiat-amount",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: amount=1234.56, currency='USD', locale='en-US' (hardcoded so the render is machine-independent) -> '$1234.56'. The upstream component has NO <style> block; the span inherits font/color from the page (nimiq-style body text). CurrencyInfo and FormattableNumber from @nimiq/utils are inlined in the Vue port (symbol + decimals resolution incl. EXTRA_SYMBOLS/decimal-less lists, and integer grouping with narrow no-break space for >4 integer digits)."
+  "notes": "Sample state: amount=1234.56, currency='USD', locale='en-US' (hardcoded so the render is machine-independent) -> '$1234.56'. The upstream component has NO <style> block; the span inherits font/color from the page (nimiq-style body text). CurrencyInfo and FormattableNumber from @nimiq/utils are inlined in the Vue port (symbol + decimals resolution incl. EXTRA_SYMBOLS/decimal-less lists, and integer grouping with narrow no-break space for >4 integer digits).",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/FiatAmount.vue"
+    ]
+  }
 }