nimiq-branding-cli 1.0.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "nimiq-branding-cli",
+  "version": "1.0.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/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "pixelmatch": "^5.3.0",
+    "playwright": "^1.49.0",
+    "pngjs": "^7.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Andjroo111/nimiq-branding-cli.git"
+  },
+  "homepage": "https://github.com/Andjroo111/nimiq-branding-cli#readme",
+  "bugs": {
+    "url": "https://github.com/Andjroo111/nimiq-branding-cli/issues"
+  },
+  "keywords": [
+    "nimiq",
+    "cli",
+    "design-system",
+    "components",
+    "vue",
+    "scaffolding",
+    "crypto",
+    "ui"
+  ],
+  "files": [
+    "bin/",
+    "assets/",
+    "scripts/verify.mjs",
+    "scripts/snap.mjs",
+    "NOTICE.md",
+    "registry/index.json",
+    "registry/components/*/meta.json",
+    "registry/components/*/html/",
+    "registry/components/*/vue/"
+  ]
+}

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

@@ -0,0 +1,70 @@
+{
+  "name": "account-header",
+  "purpose": "The wallet address-overview header: large identicon, account name + chunked Fira Mono address, NIM balance + fiat value, and the actions row — search pill, green Stake pill with the green 'Earn NIM every month by staking your NIM' CTA tooltip, divider, light-blue Send and neutral Receive pills.",
+  "category": "wallet",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "label",
+      "type": "string",
+      "description": "Account/address name, e.g. 'Indigo Address'"
+    },
+    {
+      "name": "address",
+      "type": "string",
+      "description": "Chunked Nimiq address, drives the identicon"
+    },
+    {
+      "name": "balance",
+      "type": "string",
+      "description": "Formatted NIM balance, e.g. '995'"
+    },
+    {
+      "name": "fiatValue",
+      "type": "string",
+      "description": "Formatted fiat value, e.g. '$0.50'"
+    },
+    {
+      "name": "searchPlaceholder",
+      "type": "string",
+      "description": "Search input placeholder (default 'Search transactions')"
+    },
+    {
+      "name": "showStakeTooltip",
+      "type": "boolean",
+      "description": "Show the green staking CTA tooltip under the Stake button"
+    },
+    {
+      "name": "stakeTooltipText",
+      "type": "string",
+      "description": "Tooltip copy (default 'Earn NIM every month by staking your NIM')"
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "identicon",
+    "tooltip"
+  ],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 920,
+      "height": 360
+    },
+    "selector": ".account-header",
+    "maxDiffPct": 0.5,
+    "settleMs": 500
+  },
+  "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"
+  ]
+}

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

@@ -0,0 +1,84 @@
+{
+  "name": "account-list",
+  "purpose": "Selectable list of accounts — identicon + label + balance rows with hover caret — used as the account chooser in Hub flows (inside AccountSelector).",
+  "category": "identity",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "accounts",
+      "type": "AccountInfo[]",
+      "required": true,
+      "description": "Accounts to list: { userFriendlyAddress, label, balance (luna), walletId?, defaultLabel? }."
+    },
+    {
+      "name": "disabledAddresses",
+      "type": "string[]",
+      "default": [],
+      "description": "Addresses rendered disabled with an explanatory tooltip."
+    },
+    {
+      "name": "walletId",
+      "type": "string",
+      "description": "Fallback wallet id emitted with account-selected when the account has none."
+    },
+    {
+      "name": "editable",
+      "type": "boolean",
+      "description": "Render labels as LabelInput fields instead of selectable rows."
+    },
+    {
+      "name": "decimals",
+      "type": "number",
+      "description": "Exact decimals for the balance Amount (else min 2 / max 5)."
+    },
+    {
+      "name": "minBalance",
+      "type": "number",
+      "description": "Balances render only when set; accounts below it are disabled (insufficient balance)."
+    },
+    {
+      "name": "disableContracts",
+      "type": "boolean",
+      "description": "Disable contract entries (no path) with a tooltip."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disable the whole list."
+    },
+    {
+      "name": "tooltipProps",
+      "type": "object",
+      "description": "Props forwarded to the disabled-row Tooltip."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "identicon",
+    "amount",
+    "tooltip",
+    "label-input"
+  ],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
+    "selector": ".account-list",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "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"
+  ]
+}

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

@@ -0,0 +1,48 @@
+{
+  "name": "account-ring",
+  "purpose": "Ring of up to 6 identicons representing a logged-in multi-address account set — hexagonally arranged identicons for filled slots, faint hexagon placeholders for empty ones.",
+  "category": "identity",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "addresses",
+      "type": "String[]",
+      "required": false,
+      "default": "[]",
+      "description": "Up to 6 user-friendly Nimiq addresses. The ring always renders 6 slots; slots beyond addresses.length show the identicon hexagon placeholder."
+    },
+    {
+      "name": "animate",
+      "type": "Boolean",
+      "required": false,
+      "default": "false",
+      "description": "Staggered pop-in animation (500–750ms delays) for each filled identicon slot."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "identicon"
+  ],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 400,
+      "height": 300
+    },
+    "selector": ".account-ring",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "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"
+  ]
+}

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

@@ -0,0 +1,22 @@
+{
+  "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"],
+  "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." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,24 @@
+{
+  "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"],
+  "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)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": ["input-format", "js-sha3"],
+  "verified": true,
+  "verify": {
+    "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."
+}

package/registry/components/amount/meta.json

@@ -0,0 +1,26 @@
+{
+  "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"],
+  "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)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,25 @@
+{
+  "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"],
+  "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." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,25 @@
+{
+  "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"],
+  "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)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": ["amount", "fiat-amount"],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,24 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["app-showcase-card.css"],
+  "assetFiles": [
+    "img/nimiq-pay-preview.webp",
+    "img/nimiq-wallet-preview.webp",
+    "logos/official/white/nimiq_signet_white_base_size.svg",
+    "logos/official/colored/nimiq_signet_rgb_base_size.svg"
+  ],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,15 @@
+{
+  "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"],
+  "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)" }
+  ],
+  "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'."
+}

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

@@ -0,0 +1,20 @@
+{
+  "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"],
+  "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." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

package/registry/components/buttons/meta.json

@@ -0,0 +1,22 @@
+{
+  "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"],
+  "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)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

package/registry/components/card/meta.json

@@ -0,0 +1,18 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,18 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,20 @@
+{
+  "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"],
+  "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." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

package/registry/components/copyable/meta.json

@@ -0,0 +1,20 @@
+{
+  "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"],
+  "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)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,24 @@
+{
+  "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"],
+  "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." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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)."
+}