nimiq-branding-cli 1.0.0

package/registry/components/swap-balance-bar/meta.json

@@ -0,0 +1,97 @@
+{
+  "name": "swap-balance-bar",
+  "purpose": "Swap Currencies distribution bar — draggable handle splits total fiat value between two assets: solid address-colored NIM segment left, orange diagonal-hatched BTC change segment right, white round arrow handle on a light-blue hairline, 10-tick percent scale and curved connector lines up to the account labels.",
+  "category": "form",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "leftAsset",
+      "type": "String",
+      "required": true,
+      "default": "'NIM'",
+      "description": "Asset shown on the left side ('NIM' | 'BTC' | 'USDC_MATIC' | 'USDT_MATIC'). Sample/demo: 'NIM'."
+    },
+    {
+      "name": "rightAsset",
+      "type": "String",
+      "required": true,
+      "default": "'BTC'",
+      "description": "Asset shown on the right side. Sample/demo: 'BTC'."
+    },
+    {
+      "name": "newLeftBalance",
+      "type": "Number",
+      "required": true,
+      "default": "0",
+      "description": "Projected left balance after the swap, in smallest units (luna for NIM). Sample: 51_900_000 (519 NIM)."
+    },
+    {
+      "name": "newRightBalance",
+      "type": "Number",
+      "required": true,
+      "default": "0",
+      "description": "Projected right balance after the swap, in smallest units (sat for BTC). Sample: 476 (0.00000476 BTC)."
+    },
+    {
+      "name": "nimAddresses",
+      "type": "Object[]",
+      "required": false,
+      "default": "[]",
+      "description": "Replaces the upstream useAddressStore(): [{ address, label, balance }]. First entry is the active address. Sample: Indigo Address, 99_500_000 luna."
+    },
+    {
+      "name": "btcBalance",
+      "type": "Number",
+      "required": false,
+      "default": "0",
+      "description": "Replaces useBtcAddressStore().accountBalance, in sat."
+    },
+    {
+      "name": "exchangeRates",
+      "type": "Object",
+      "required": false,
+      "default": "{ nim: 0.000501, btc: 63417 }",
+      "description": "Replaces useFiatStore(): fiat rate per whole coin, keyed by lowercase currency code."
+    },
+    {
+      "name": "fiatLimit",
+      "type": "Number",
+      "required": false,
+      "default": "undefined",
+      "description": "Maximum fiat amount that may be moved from either side while dragging."
+    },
+    {
+      "name": "disabled",
+      "type": "Boolean",
+      "required": false,
+      "default": "false",
+      "description": "Grays out bars, labels and handle and disables dragging."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "identicon"
+  ],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 560,
+      "height": 320
+    },
+    "selector": ".container",
+    "maxDiffPct": 0.5,
+    "settleMs": 400
+  },
+  "notes": "Source: upstream/wallet/src/components/swap/SwapBalanceBar.vue (+ icons/SwapBalanceBar/CurvedLine.vue, assets/swap-change-background.svg, assets/horizontal-double-arrow.svg; container width from swap/SwapModal.vue .small-page 63.5rem - 2*4rem page padding = 444px). Sample state per supporting-elements brief item 4: NIM 'Indigo Address' (NQ87 JY9X...) 519 NIM solid navy (.nq-blue via getColorClass: indigo identicon -> nq-blue) at 46%, BTC 0.00 -> +0.00000476 BTC at 54% rendered as full-width .change diagonal hatch over bitcoin orange, white round drag handle with double-arrow on the light-blue separator hairline, 46%/54% tick scale, CurvedLine connectors (widths 82/98px hand-computed from the upstream rAF formulas for a 444px root). Static frozen render; drag/touch logic lives in the Vue port only. Identicon via pinned @nimiq/iqons@1.6.0 jsdelivr recipe (module script iterates .swap-balance-bar .identicon[data-address], namespaced under the component root like the account-ring snippet). Vue port translates the upstream Pinia stores into props (nimAddresses/btcBalance/exchangeRates). 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/timer/meta.json

@@ -0,0 +1,25 @@
+{
+  "name": "timer",
+  "purpose": "Circular countdown timer (Hub checkout 'offer expires' indicator): a light-blue arc shrinking clockwise as time runs out, a faint filler arc in the gap, and the remaining time (simplified to the largest fitting unit) in the center. Turns orange when >= 75% of the time has elapsed.",
+  "category": "feedback",
+  "variants": ["vue", "html"],
+  "props": [
+    { "name": "startTime", "type": "number", "default": null, "note": "timestamp (ms) the countdown started" },
+    { "name": "endTime", "type": "number", "default": null, "note": "timestamp (ms) the countdown ends; 'end' event emitted when reached" },
+    { "name": "alwaysShowTime", "type": "boolean", "default": true, "note": "show the remaining-time number permanently (larger radius); otherwise an info icon until hover" },
+    { "name": "theme", "type": "'normal' | 'inverse' | 'white'", "default": "normal" },
+    { "name": "strokeWidth", "type": "number", "default": 2, "note": "in svg viewBox units (viewBox 0 0 26 26)" },
+    { "name": "maxUnit", "type": "'second' | 'minute' | 'hour' | 'day'", "default": null, "note": "cap the displayed unit" }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 160, "height": 120 },
+    "selector": ".timer",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Sample state: frozen at 2/3 remaining (progress=1/3) with 10 minutes left ('10'), defaults alwaysShowTime=true (time-shown, radius 12), theme normal, strokeWidth 2. Element is 3.25rem = 26px square (1rem = 8px). Geometry derived in JS upstream: fullCircleLength=2*PI*r; time arc capped below a full circle (gap >= 2.5 strokeWidths) so it always reads as a timer; filler arc fills the gap minus strokeWidth margins; both offset by 90deg so the gap is centered on top. Upstream wraps a Tooltip ('This offer expires in {time}.') and tweens the radius 8->12 on hover via @nimiq/utils Tweenable; the HTML snippet drops the tooltip (static frozen render, optional live mode via data-start-time/data-end-time, no radius tween) and the Vue port inlines a tiny tween + en-only unit strings instead of Tooltip/I18n. Snippet script recomputes arcs from data-progress/data-time-left; demo stays deterministic (no Date when frozen)."
+}

package/registry/components/toast-notification/meta.json

@@ -0,0 +1,24 @@
+{
+  "name": "toast-notification",
+  "purpose": "Bottom-fixed toast notification in Nimiq wallet style: small dark gradient card with icon, bold status line and dimmed sub-line. Color states: info/in-progress (blue + hexagon spinner), success (green + checkmark), error (orange + alert triangle), warning/expired (gold + stopwatch). Used in the wallet for swap progress and persistent status toasts.",
+  "category": "feedback",
+  "variants": ["vue", "html"],
+  "props": [
+    { "name": "type", "type": "'info' | 'success' | 'error' | 'warning'", "default": "'info'", "description": "Toast state; selects the Nimiq gradient (blue/green/orange/gold) and built-in icon (spinner/checkmark/alert-triangle/stopwatch)." },
+    { "name": "title", "type": "string", "default": "''", "description": "Bold status line (e.g. 'Swap successful!')." },
+    { "name": "message", "type": "string", "default": "''", "description": "Dimmed sub-line (e.g. 'It\\'s safe to close your wallet now')." },
+    { "name": "emphasizeMessage", "type": "boolean", "default": "false", "description": "Renders the sub-line in full-opacity Nimiq orange (upstream's 'Don\\'t close your wallet!' treatment on the blue info toast)." },
+    { "name": "showMaximize", "type": "boolean", "default": "false", "description": "Shows the small maximize glyph in the top-right corner (the toast is a button that re-opens the underlying flow)." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 800, "height": 320 },
+    "selector": "body",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Source of truth: upstream/wallet/src/components/swap/SwapNotification.vue (the wallet's bottom toast), SCSS hand-compiled with $mobileBreakpoint=768px from wallet/src/scss/variables.scss; wallet globals button.reset/.flex-row/.flex-column/--body-size/--small-label-size from wallet/src/scss/themes.scss; icons from @nimiq/style (checkmark.svg, alert-triangle.svg, stopwatch.svg) via vue-components IconBase (adds class nq-icon), spinner from vue-components LoadingSpinner.vue, maximize glyph from wallet icons/MaximizeIcon.vue. BottomOverlay.vue (vue-components, used by UpdateNotification.vue) was the other candidate but has no error/success-vs-info color system, so SwapNotification was chosen as the canonical toast. Sample state: three stacked toasts — info/in-progress (blue, resting at +19rem), error (orange, +9.5rem) and success (green, untouched upstream resting position bottom:3rem right:3rem); stacking offsets are page chrome, component CSS unchanged. Upstream quirks preserved: toast is position:fixed and is a <button class=\"reset\"> that re-opens the swap modal; success state has no maximize glyph and pads the checkmark by 0.5rem; spinner keyframes get cancelled by the screenshot harness (animations:disabled) so renders are deterministic. Snippet namespaces everything under .nq-toast and converts the upstream #big-hex/#small-hex spinner ids to classes so multiple toasts can coexist on one page. Vue port is a faithful Vue 3 script-setup wrapper written for this registry (type/title/message props pick gradient + built-in icon)."
+}

package/registry/components/tooltip/meta.json

@@ -0,0 +1,28 @@
+{
+  "name": "tooltip",
+  "purpose": "Hover/focus/click tooltip with a positioned arrow box. Wraps a trigger element (icon by default) and shows a dark Nimiq-blue gradient box with an arrow, positioned via a preferred '[primary] [secondary]' position (e.g. 'top right'), optionally constrained to a container.",
+  "category": "data-display",
+  "variants": ["vue", "html"],
+  "props": [
+    { "name": "container", "type": "object ({ $el: HTMLElement })", "description": "Container within which the tooltip should be positioned if possible. Constrains max-width and clamps placement." },
+    { "name": "disabled", "type": "boolean", "default": false, "description": "Disables showing the tooltip." },
+    { "name": "noFocus", "type": "boolean", "default": false, "description": "Removes the trigger from the tab order (tabindex -1)." },
+    { "name": "preferredPosition", "type": "string", "default": "top right", "description": "Preferred position as '[primary] [secondary]' or '[primary]'. Primary is vertical (top/bottom) or horizontal (left/right); the optional secondary is of the opposite axis. Single primary centers on the other axis." },
+    { "name": "margin", "type": "Partial<Record<'top'|'right'|'bottom'|'left', number>>", "description": "Margin to maintain to the container. Falls back to the container's padding per side. No effect without container." },
+    { "name": "autoWidth", "type": "boolean", "default": false, "description": "Sets the tooltip's width to the container's width minus margin. No effect without container." },
+    { "name": "theme", "type": "'normal' | 'inverse'", "default": "normal", "description": "'inverse' renders a white box with nimiq-blue text." },
+    { "name": "background", "type": "string", "description": "Background of the tooltip as a CSS value; overrides the theme (sets the --background CSS var, also used by the arrow)." },
+    { "name": "styles", "type": "Partial<CSSStyleDeclaration>", "description": "Styles applied to the tooltip box (commonly width / minWidth) without deep CSS selectors." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 500, "height": 400 },
+    "selector": "body",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Sample state: tooltip forced visible ('shown' class) with positionCssClass 'position-top-right' (the default preferredPosition 'top right' with no container), trigger = InfoCircleIcon from @nimiq/style, box text 'Transactions are free on Nimiq.', styles={ width: '25rem' } (real upstream usages always pass a width — without one the absolutely-positioned box shrink-wraps to near min-content). JS-computed inline position expanded by hand and measurement-verified: left = triggerWidth/2 - 25 = -16px, top = -boxHeight = -66px. Arrow = .trigger::after with an SVG mask-image; its background color for top-right is #211e45 (sampled from the nimiq-blue-bg radial gradient where the arrow touches the box). CSS vars --nimiq-blue/--nimiq-blue-bg/--nimiq-ease come from the legacy nimiq-style.min.css (defined on html{}). Vue 3 port keeps the full dynamic positioning/clamping logic, hover/focus/click behavior, show/hide events and container scroll listener; '>>>' deep selectors became :deep()."
+}

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

@@ -0,0 +1,48 @@
+{
+  "name": "transaction-list",
+  "purpose": "Wallet transaction history list — month header + per-transaction rows: stacked day/month date, peer identicon, Fira Mono address with time underneath, and right-aligned amount (outgoing plain at 60%, incoming in the green tinted pill) over a loading fiat placeholder bar.",
+  "category": "payment",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "transactions",
+      "type": "TxDisplay[]",
+      "required": true,
+      "description": "Transactions to list: { transactionHash, peerAddress, peerLabel?, value (luna), isIncoming, timestamp (ms), fiatValue? (number, undefined = loading placeholder), fiatCurrency?, message? }. Month headers are derived from timestamps."
+    },
+    {
+      "name": "fiatCurrency",
+      "type": "string",
+      "default": "usd",
+      "description": "Fallback fiat currency code for rows that do not set their own."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "identicon",
+    "amount",
+    "fiat-amount"
+  ],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 800,
+      "height": 420
+    },
+    "selector": ".transaction-list",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Source: upstream/wallet/src/components/TransactionListItem.vue (row markup + scoped styles, verbatim; amount-loading-placeholder/fiat-unavailable mixins inlined from scss/mixins.scss) + TransactionList.vue (.month-label styles). Sample state per supporting-elements brief item 3: month header 'MAY' + two confirmed rows — outgoing 14 May 22:58 '- 5.0 NIM' (plain navy, opacity .6, '-' from ::before) to NQ49 Q4GS PG77 NTQT VRC9 6FF0 VXJX FKXF 829U, and incoming 14 May 22:34 '+ 1000 NIM' (green pill: --nimiq-green on rgba(33,188,165,.1), radius .5rem) from NQ11 Q47D E086 MDXU TEE9 2A9A ALFT LHN1 7NPG. Both addresses are checksum-valid (IBAN mod-97 verified). Fiat value undefined → .fiat-loading breathing placeholder bar (4rem x 1.6rem, --text-12); screenshots disable animations so it renders at its resting state deterministically. Identicons via pinned @nimiq/iqons@1.6.0 jsdelivr recipe (same as identicon component). Theme vars (--body-size, --small-size, --label-size, --small-label-size, --text-50, --text-12, --bg-primary) from wallet themes.scss are defined on the component root in the snippet CSS. Pending/expired/invalid/new states, cashlink/swap badges and peer labels exist upstream but are not in the 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/index.json

@@ -0,0 +1,394 @@
+{
+  "components": [
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "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"
+      ],
+      "verified": true
+    },
+    {
+      "name": "hero-section",
+      "purpose": "nimiq.com home hero: deep purple radial-gradient sky with floating translucent hexagons, white 800-weight 'Universal Money for Independent Individuals' headline, lavender subtitle, light-blue 'Create Wallet ↗' pill, WORKS WITH partner row, and a dotted-globe white arc cresting at the bottom.",
+      "category": "marketing",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "honeycomb-band",
+      "purpose": "nimiq.com community honeycomb band: blue 'Community →' pill centered above the real nimiq.com fading honeycomb background (bg-hexagons.svg) with three brand-colored social hexagons overlaid (YouTube red, X black, Facebook blue).",
+      "category": "marketing",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "identicon",
+      "purpose": "Nimiq identicon avatar — a deterministic hexagonal avatar generated from a Nimiq address via @nimiq/iqons; shows a hexagon placeholder for missing/invalid addresses.",
+      "category": "identity",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "label-input",
+      "purpose": "A self-sizing text input for naming things (addresses, accounts), styled as an nq-input whose width grows and shrinks with its content.",
+      "category": "form",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "loading-spinner",
+      "purpose": "Animated hexagon loading indicator: two dashed hexagon outlines (one at 40% opacity) whose dash offsets rotate around the hexagon in a 4s stepped ease cycle. Inherits its color via currentColor.",
+      "category": "feedback",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "page-body",
+      "purpose": "Scrollable content area of a card-style page. Pairs .page-body with the legacy .nq-card-body padding rules and flex-grows to fill the parent SmallPage, scrolling vertically when content overflows.",
+      "category": "layout",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "page-footer",
+      "purpose": "Footer area of a Nimiq page/card (nq-card-footer). Flex column that pins action buttons at the bottom of a SmallPage and applies the standard nq-button margins.",
+      "category": "layout",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "page-header",
+      "purpose": "Card header for Nimiq page flows: centered title, optional back arrow, optional step progress indicator. Used at the top of a SmallPage.",
+      "category": "layout",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "payment-info-line",
+      "purpose": "Checkout header line: crypto amount (with optional fiat value + price-breakdown tooltip) on the left, an animated arrow runway, the recipient (shop logo or identicon + origin domain) and an expiry countdown timer on the right. Used at the top of the Nimiq Hub checkout.",
+      "category": "payment",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "price-chart",
+      "purpose": "The wallet sidebar's crypto price sparkline — '24H' badge over a smoothed white line chart, with the currency ticker, fiat price and 24h percentage change below, on the navy sidebar background.",
+      "category": "data-display",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "qr-code",
+      "purpose": "Nimiq QR code — renders arbitrary data (typically a nimiq: payment URI) as a rounded-module QR code on a canvas, filled by default with the Nimiq light-blue radial gradient (#265DD7 → #0582CA) on a transparent background.",
+      "category": "data-display",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "search-bar",
+      "purpose": "The wallet's pill-shaped transaction search input: magnifier icon + borderless input inside a 500px-radius inset border, light-blue on focus, with a clear (cross) button while active.",
+      "category": "form",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "select-bar",
+      "purpose": "Segmented radio bar (pill-shaped) for choosing one of several ordered options, e.g. a transaction fee level. All options up to and including the selected one are tinted with the selected option's color; later options stay on the neutral highlight background.",
+      "category": "form",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "slider-toggle",
+      "purpose": "Pill-shaped radio toggle with a white 'active box' that slides under the selected option. Used in the Nimiq Wallet as a currency switcher (NIM/BTC) and for filter/sort selection.",
+      "category": "form",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "small-page",
+      "purpose": "Standard 420x564px white card container (SmallPage) that frames a page of content in Nimiq apps; pairs with PageHeader/PageBody/PageFooter.",
+      "category": "layout",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "status-alert",
+      "purpose": "Status alert / callout block (note-info, tip-success, warning, caution-error, important) in the real Nimiq pattern: tinted background, 1.5px tonal outline, uppercase icon title and colored text. Used for status notices, warnings and error feedback.",
+      "category": "feedback",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "status-screen",
+      "purpose": "Full-card overlay status screen from the Nimiq Hub: loading (navy/light-blue gradient + hexagon spinner + status line), success (green gradient + animated checkmark), warning (orange + neutral face) and error (red + sad face) states, with optional action button/link. Covers the whole SmallPage while a request is processed and resolves into the iconic green checkmark end screen.",
+      "category": "feedback",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "swap-balance-bar",
+      "purpose": "Swap Currencies distribution bar — draggable handle splits total fiat value between two assets: solid address-colored NIM segment left, orange diagonal-hatched BTC change segment right, white round arrow handle on a light-blue hairline, 10-tick percent scale and curved connector lines up to the account labels.",
+      "category": "form",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "timer",
+      "purpose": "Circular countdown timer (Hub checkout 'offer expires' indicator): a light-blue arc shrinking clockwise as time runs out, a faint filler arc in the gap, and the remaining time (simplified to the largest fitting unit) in the center. Turns orange when >= 75% of the time has elapsed.",
+      "category": "feedback",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "toast-notification",
+      "purpose": "Bottom-fixed toast notification in Nimiq wallet style: small dark gradient card with icon, bold status line and dimmed sub-line. Color states: info/in-progress (blue + hexagon spinner), success (green + checkmark), error (orange + alert triangle), warning/expired (gold + stopwatch). Used in the wallet for swap progress and persistent status toasts.",
+      "category": "feedback",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "tooltip",
+      "purpose": "Hover/focus/click tooltip with a positioned arrow box. Wraps a trigger element (icon by default) and shows a dark Nimiq-blue gradient box with an arrow, positioned via a preferred '[primary] [secondary]' position (e.g. 'top right'), optionally constrained to a container.",
+      "category": "data-display",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    },
+    {
+      "name": "transaction-list",
+      "purpose": "Wallet transaction history list — month header + per-transaction rows: stacked day/month date, peer identicon, Fira Mono address with time underneath, and right-aligned amount (outgoing plain at 60%, incoming in the green tinted pill) over a loading fiat placeholder bar.",
+      "category": "payment",
+      "variants": [
+        "vue",
+        "html"
+      ],
+      "verified": true
+    }
+  ]
+}