nimiq-branding-cli 1.1.0 → 1.2.0

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

@@ -2,22 +2,57 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "backArrow", "type": "boolean", "default": false, "description": "Show a back arrow on the left; emits 'back' on click" },
-    { "name": "progressIndicator", "type": "boolean", "default": false, "description": "Show the step progress bar across the top of the card" },
-    { "name": "numberSteps", "type": "number", "default": 6, "description": "Total number of steps in the progress indicator" },
-    { "name": "step", "type": "number", "default": 1, "description": "Current step (1-based); steps <= step are highlighted" }
+    {
+      "name": "backArrow",
+      "type": "boolean",
+      "default": false,
+      "description": "Show a back arrow on the left; emits 'back' on click"
+    },
+    {
+      "name": "progressIndicator",
+      "type": "boolean",
+      "default": false,
+      "description": "Show the step progress bar across the top of the card"
+    },
+    {
+      "name": "numberSteps",
+      "type": "number",
+      "default": 6,
+      "description": "Total number of steps in the progress indicator"
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "default": 1,
+      "description": "Current step (1-based); steps <= step are highlighted"
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 500, "height": 700 },
+    "viewport": {
+      "width": 500,
+      "height": 700
+    },
     "selector": ".small-page",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: inside a SmallPage, title 'Send Transaction', backArrow=true, progressIndicator=true, 6 steps, step 3. ArrowLeftIcon (arrow-left.svg from @nimiq/style) is inlined. $t stubbed to identity ('Go back')."
+  "notes": "Sample state: inside a SmallPage, title 'Send Transaction', backArrow=true, progressIndicator=true, 6 steps, step 3. ArrowLeftIcon (arrow-left.svg from @nimiq/style) is inlined. $t stubbed to identity ('Go back').",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/PageHeader.vue"
+    ]
+  }
 }

package/registry/components/payment-info-line/meta.json

@@ -93,5 +93,14 @@
   "notes": "Sample state: 199.6 NIM (19960000 luna) / 2.99 EUR to shop.nimiq.com (identicon for burn address NQ07 0000..., pinned @nimiq/iqons@1.6.0 CDN), timer frozen at 10 of 15 minutes left (progress 1/3, countdown '10', circle dash values hand-computed for radius 12, fullCircleLength 2π·12). Tooltips closed; arrow-runway arrow rests at opacity 0 (screenshots disable the infinite animation). The .payment-info-line wrapper is the 420px SmallPage width; upstream root class is .info-line. Cascade quirk reproduced from upstream: Account's '.row .label:not(.editable)' (specificity 0,4,0) beats PaymentInfoLine's deep '.account .label' padding-left .75rem, so the label padding is effectively 1rem; ties (font-weight/mask-image/identicon size) go to PaymentInfoLine via injection order — the snippet CSS preserves this rule order, don't reorder. Vue port ships PaymentInfoLine.vue + minimal inline Account.vue (no editable/cashlink) and Timer.vue (radius snaps instead of tweening, simplified update interval); Amount.vue, FiatAmount.vue, Tooltip.vue, Identicon.vue come from sibling registry components (see dependsOn). getExchangeRates (rate-deviation warning) uses the real @nimiq/utils npm package; failures just suppress the warning. $t stubbed as identity; upstream's :container=\"$parent\" became a container prop. Identicon sprite is the REAL team-shipped iqons.min.svg (84-symbol part catalog, 88KB) vendored at assets/img/iqons.min.svg — byte-identical to the Hub-deployed sprite captured in references/assets/hub/iqons.min.svg and to @nimiq/iqons@1.6.0 dist; the snippet probes the local copy and falls back to the same CDN sprite, while the iqons JS library itself stays pinned on jsdelivr (code, not artwork).",
   "assetFiles": [
     "img/iqons.min.svg"
-  ]
+  ],
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/PaymentInfoLine.vue",
+      "vue-components:src/components/Timer.vue",
+      "vue-components:src/components/Identicon.vue"
+    ]
+  }
 }

package/registry/components/price-chart/meta.json

@@ -2,20 +2,76 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "currency", "type": "string", "default": "'nim'", "description": "Crypto ticker shown bottom-left (rendered uppercase). Upstream: CryptoCurrency enum ('nim' | 'btc' | ...)." },
-    { "name": "price", "type": "number", "default": "0.000501", "description": "Current fiat price. Formatted like @nimiq/vue-components FiatAmount with maxRelativeDeviation 0.001 (decimals grow until the rounded value is within 0.1%)." },
-    { "name": "fiatCurrency", "type": "string", "default": "'usd'", "description": "Fiat currency code for price formatting." },
-    { "name": "change", "type": "number", "default": "0.001", "description": "Relative price change over the time range (0.001 = +0.1%). Positive renders green with a CSS '+' prefix; upstream styles only .positive (negative stays 60% white)." },
-    { "name": "points", "type": "{ x: number, y: number }[]", "default": "18-point sample NIM series", "description": "History points, normalized to the box by the upstream LineChart algorithm (cubic smoothing, factor 0.2). Upstream samples 18 points from the fiat history API." },
-    { "name": "showTimespanLabel", "type": "boolean", "default": "true", "description": "Show the '24H' pill (upstream: true for the first sidebar chart, false for the BTC one below it). Click emits 'timespan'." },
-    { "name": "timeRange", "type": "'24h' | '7d'", "default": "'24h'", "description": "Label text for the timespan pill." }
+    {
+      "name": "currency",
+      "type": "string",
+      "default": "'nim'",
+      "description": "Crypto ticker shown bottom-left (rendered uppercase). Upstream: CryptoCurrency enum ('nim' | 'btc' | ...)."
+    },
+    {
+      "name": "price",
+      "type": "number",
+      "default": "0.000501",
+      "description": "Current fiat price. Formatted like @nimiq/vue-components FiatAmount with maxRelativeDeviation 0.001 (decimals grow until the rounded value is within 0.1%)."
+    },
+    {
+      "name": "fiatCurrency",
+      "type": "string",
+      "default": "'usd'",
+      "description": "Fiat currency code for price formatting."
+    },
+    {
+      "name": "change",
+      "type": "number",
+      "default": "0.001",
+      "description": "Relative price change over the time range (0.001 = +0.1%). Positive renders green with a CSS '+' prefix; upstream styles only .positive (negative stays 60% white)."
+    },
+    {
+      "name": "points",
+      "type": "{ x: number, y: number }[]",
+      "default": "18-point sample NIM series",
+      "description": "History points, normalized to the box by the upstream LineChart algorithm (cubic smoothing, factor 0.2). Upstream samples 18 points from the fiat history API."
+    },
+    {
+      "name": "showTimespanLabel",
+      "type": "boolean",
+      "default": "true",
+      "description": "Show the '24H' pill (upstream: true for the first sidebar chart, false for the BTC one below it). Click emits 'timespan'."
+    },
+    {
+      "name": "timeRange",
+      "type": "'24h' | '7d'",
+      "default": "'24h'",
+      "description": "Label text for the timespan pill."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
-  "verify": { "viewport": { "width": 280, "height": 220 }, "selector": ".price-chart-widget", "maxDiffPct": 0.5, "settleMs": 250 },
-  "notes": "Source: upstream/wallet/src/components/PriceChart.vue + LineChart.vue (scoped CSS verbatim, Vue scoping emulated with data-v attrs in truth), rendered in the wallet sidebar context: Sidebar.vue .price-chart-wrapper/.price-chart rules (height 15rem, padding 1.5rem, timespan moved to 1.5rem/1.5rem — Sidebar's ::v-deep override wins by injection order) on a 24rem-wide navy excerpt (--bg-secondary: var(--nimiq-blue), color white, --padding-sides 1.5rem from App.vue/Sidebar.vue). The .price-chart-widget root stands in for the sidebar; the wrapper's 3rem scroll-fade mask is omitted (it belongs to the full-height scrolling sidebar and would fade the meta row in this exact-height excerpt). Sample state: NIM, $0.000501, +0.1% (green), fixed deterministic 18-point 24h series; path precomputed with LineChart's exact calculatePath (smoothing 0.2, strokeWidth 2.5, viewBox padding 5) for the 144x52 svg box. White line is white at 0.5 stroke-opacity (currentColor), as upstream. Upstream pairs it with a second chart (currency='btc', showTimespanLabel=false) in the same wrapper. Wallet theme vars (--body-size, --small-size, --tiny-label-size) defined on the snippet root."
+  "verify": {
+    "viewport": {
+      "width": 280,
+      "height": 220
+    },
+    "selector": ".price-chart-widget",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Source: upstream/wallet/src/components/PriceChart.vue + LineChart.vue (scoped CSS verbatim, Vue scoping emulated with data-v attrs in truth), rendered in the wallet sidebar context: Sidebar.vue .price-chart-wrapper/.price-chart rules (height 15rem, padding 1.5rem, timespan moved to 1.5rem/1.5rem — Sidebar's ::v-deep override wins by injection order) on a 24rem-wide navy excerpt (--bg-secondary: var(--nimiq-blue), color white, --padding-sides 1.5rem from App.vue/Sidebar.vue). The .price-chart-widget root stands in for the sidebar; the wrapper's 3rem scroll-fade mask is omitted (it belongs to the full-height scrolling sidebar and would fade the meta row in this exact-height excerpt). Sample state: NIM, $0.000501, +0.1% (green), fixed deterministic 18-point 24h series; path precomputed with LineChart's exact calculatePath (smoothing 0.2, strokeWidth 2.5, viewBox padding 5) for the 144x52 svg box. White line is white at 0.5 stroke-opacity (currentColor), as upstream. Upstream pairs it with a second chart (currency='btc', showTimespanLabel=false) in the same wrapper. Wallet theme vars (--body-size, --small-size, --tiny-label-size) defined on the snippet root.",
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/PriceChart.vue",
+      "wallet:src/components/LineChart.vue"
+    ]
+  }
 }

package/registry/components/qr-code/meta.json

@@ -2,7 +2,10 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
     {
       "name": "data",
@@ -46,15 +49,29 @@
       "description": "Width and height of the QR code in pixels (canvas pixels; the canvas has no devicePixelRatio scaling)."
     }
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
   "dependsOn": [],
-  "npmDeps": ["qr-creator"],
+  "npmDeps": [
+    "qr-creator"
+  ],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 400 },
+    "viewport": {
+      "width": 600,
+      "height": 400
+    },
     "selector": "canvas",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Upstream QrCode.vue has no <style> block — the component is a bare <canvas class=\"qr-code\">, all rendering done by qr-creator (pinned qr-creator@1.0.0, the only published version). Sample state: data 'nimiq:NQ07000000000000000000000000000000000000', size 240, all other props at upstream defaults. qr-creator sets canvas.width/height = size with no devicePixelRatio handling, so the QR renders at CSS-pixel resolution. The Vue port keeps the upstream toDataUrl() helper as an exposed method."
+  "notes": "Upstream QrCode.vue has no <style> block — the component is a bare <canvas class=\"qr-code\">, all rendering done by qr-creator (pinned qr-creator@1.0.0, the only published version). Sample state: data 'nimiq:NQ07000000000000000000000000000000000000', size 240, all other props at upstream defaults. qr-creator sets canvas.width/height = size with no devicePixelRatio handling, so the QR renders at CSS-pixel resolution. The Vue port keeps the upstream toDataUrl() helper as an exposed method.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/QrCode.vue"
+    ]
+  }
 }

package/registry/components/search-bar/meta.json

@@ -2,19 +2,39 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "value", "type": "string", "default": "", "description": "The search query, bindable via v-model (modelValue/update:modelValue in the Vue 3 port)." }
+    {
+      "name": "value",
+      "type": "string",
+      "default": "",
+      "description": "The search query, bindable via v-model (modelValue/update:modelValue in the Vue 3 port)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 480, "height": 120 },
+    "viewport": {
+      "width": 480,
+      "height": 120
+    },
     "selector": ".search-bar",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Source: upstream/wallet/src/components/SearchBar.vue (+ CrossCloseButton.vue, inlined in the Vue port). Sample state: resting — empty value, unfocused, placeholder 'Search transactions' (the upstream ResizeObserver picks that string for container widths >210px and non-expanded max-width), magnifier icon at opacity 0.4, no cross button, max-width 'var(--default-sb-width)' = clamp(5.5rem, 100%, 30rem). Theme vars from wallet themes.scss defined on the root: --text-16/--text-22 (inset 1.5px pill border, hover), --light-blue-40 (focus border), --body-size: 2rem. --attr-duration/--nimiq-ease come from the legacy framework CSS. The upstream svg has no viewBox/size attributes; CSS sizes it to 1.75rem, exactly as in the wallet."
+  "notes": "Source: upstream/wallet/src/components/SearchBar.vue (+ CrossCloseButton.vue, inlined in the Vue port). Sample state: resting — empty value, unfocused, placeholder 'Search transactions' (the upstream ResizeObserver picks that string for container widths >210px and non-expanded max-width), magnifier icon at opacity 0.4, no cross button, max-width 'var(--default-sb-width)' = clamp(5.5rem, 100%, 30rem). Theme vars from wallet themes.scss defined on the root: --text-16/--text-22 (inset 1.5px pill border, hover), --light-blue-40 (focus border), --body-size: 2rem. --attr-duration/--nimiq-ease come from the legacy framework CSS. The upstream svg has no viewBox/size attributes; CSS sizes it to 1.75rem, exactly as in the wallet.",
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/SearchBar.vue"
+    ]
+  }
 }

package/registry/components/select-bar/meta.json

@@ -2,21 +2,51 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "name", "type": "string", "required": false, "description": "The radio group's name attribute, shared by all option inputs." },
-    { "name": "options", "type": "SelectBarOption[]", "required": false, "description": "Options as { color, value, text, index }. color is a nimiq-style bg class (e.g. 'nq-green-bg'), index defines the order, value is emitted on change." },
-    { "name": "selectedValue", "type": "number", "required": false, "description": "value of the initially selected option. Defaults to the first option (lowest index)." }
+    {
+      "name": "name",
+      "type": "string",
+      "required": false,
+      "description": "The radio group's name attribute, shared by all option inputs."
+    },
+    {
+      "name": "options",
+      "type": "SelectBarOption[]",
+      "required": false,
+      "description": "Options as { color, value, text, index }. color is a nimiq-style bg class (e.g. 'nq-green-bg'), index defines the order, value is emitted on change."
+    },
+    {
+      "name": "selectedValue",
+      "type": "number",
+      "required": false,
+      "description": "value of the initially selected option. Defaults to the first option (lowest index)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 200 },
+    "viewport": {
+      "width": 600,
+      "height": 200
+    },
     "selector": ".select-bar",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: fee selector name='fee' with options free (nq-light-blue-bg, value 0), standard (nq-green-bg, value 1), express (nq-gold-bg, value 2); selectedValue=1 so 'standard' (middle) is selected — free+standard render nq-green-bg, express renders nq-highlight-bg. $t stubbed as identity (texts come pre-translated through the options prop upstream). Emits 'changed' with the option's value. Color classes (nq-light-blue-bg/nq-green-bg/nq-gold-bg) and --nimiq-highlight-bg come from the legacy nimiq-style CSS; bg classes also flip the label text to white via the stylesheet's later .nq-*-bg{color:var(--nimiq-white)} rule. The HTML snippet is interactive: each label carries its option color in data-color and a scoped inline script (root resolved via document.currentScript.previousElementSibling — safe when embedded among other snippets) replicates upstream getColor() on the bubbling 'change' event, so clicking free/standard/express re-colors correctly; listen for 'change' on .select-bar as the plain-HTML equivalent of the Vue 'changed' emit. Resting state is unchanged and pixel-verified."
+  "notes": "Sample state: fee selector name='fee' with options free (nq-light-blue-bg, value 0), standard (nq-green-bg, value 1), express (nq-gold-bg, value 2); selectedValue=1 so 'standard' (middle) is selected — free+standard render nq-green-bg, express renders nq-highlight-bg. $t stubbed as identity (texts come pre-translated through the options prop upstream). Emits 'changed' with the option's value. Color classes (nq-light-blue-bg/nq-green-bg/nq-gold-bg) and --nimiq-highlight-bg come from the legacy nimiq-style CSS; bg classes also flip the label text to white via the stylesheet's later .nq-*-bg{color:var(--nimiq-white)} rule. The HTML snippet is interactive: each label carries its option color in data-color and a scoped inline script (root resolved via document.currentScript.previousElementSibling — safe when embedded among other snippets) replicates upstream getColor() on the bubbling 'change' event, so clicking free/standard/express re-colors correctly; listen for 'change' on .select-bar as the plain-HTML equivalent of the Vue 'changed' emit. Resting state is unchanged and pixel-verified.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/SelectBar.vue"
+    ]
+  }
 }

package/registry/components/slider-toggle/meta.json

@@ -2,22 +2,59 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "name", "type": "string", "required": true, "description": "The radio input group name." },
-    { "name": "value", "type": "string", "required": true, "description": "The currently selected option (slot name). Upstream v-model: emits 'input' on change." },
-    { "name": "type", "type": "'currency' | 'default'", "required": false, "default": "'default'", "description": "Visual style: 'currency' is compact (1.75rem, bold, wide letter-spacing), 'default' is large (2.5rem, semibold)." },
-    { "name": "loading", "type": "boolean", "required": false, "default": "false", "description": "Replaces the options with a LoadingSpinner + 'Loading' label." }
+    {
+      "name": "name",
+      "type": "string",
+      "required": true,
+      "description": "The radio input group name."
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "required": true,
+      "description": "The currently selected option (slot name). Upstream v-model: emits 'input' on change."
+    },
+    {
+      "name": "type",
+      "type": "'currency' | 'default'",
+      "required": false,
+      "default": "'default'",
+      "description": "Visual style: 'currency' is compact (1.75rem, bold, wide letter-spacing), 'default' is large (2.5rem, semibold)."
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "required": false,
+      "default": "false",
+      "description": "Replaces the options with a LoadingSpinner + 'Loading' label."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 500, "height": 200 },
+    "viewport": {
+      "width": 500,
+      "height": 200
+    },
     "selector": ".slider-toggle",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Sample state: name='currency', type='currency', two slots nim/btc rendering 'NIM'/'BTC' with first active (matches the upstream storybook currency story). Upstream positions the .active-box via JS (getBoundingClientRect on the active label); truth.html replicates that with a small inline script, while html/demo.html is CSS-only — the active label itself gets the white pill via label:has(input:checked), which is geometrically identical (active-box width = label width, height = label height). Upstream options are dynamic named slots (one label per slot). The Vue port inlines LoadingSpinner.vue (hexagon SVG spinner) instead of importing it."
+  "notes": "Sample state: name='currency', type='currency', two slots nim/btc rendering 'NIM'/'BTC' with first active (matches the upstream storybook currency story). Upstream positions the .active-box via JS (getBoundingClientRect on the active label); truth.html replicates that with a small inline script, while html/demo.html is CSS-only — the active label itself gets the white pill via label:has(input:checked), which is geometrically identical (active-box width = label width, height = label height). Upstream options are dynamic named slots (one label per slot). The Vue port inlines LoadingSpinner.vue (hexagon SVG spinner) instead of importing it.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/SliderToggle.vue"
+    ]
+  }
 }

package/registry/components/small-page/meta.json

@@ -2,17 +2,32 @@
   "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"],
+  "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": 500, "height": 700 },
+    "viewport": {
+      "width": 500,
+      "height": 700
+    },
     "selector": ".small-page",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "SmallPage itself is just <div class=\"small-page nq-card\"> + slot; all visual styling (background, radius, shadow, text color) comes from .nq-card in legacy nimiq-style. Scoped CSS fixes size to 52.5rem x 70.5rem (420x564px at the 8px html root font-size set by nimiq-style) and overrides .nq-card margin with 0 1.25rem. Sample state fills the slot with .nq-card-header (.nq-h1) and .nq-card-body (.nq-text) placeholder content."
+  "notes": "SmallPage itself is just <div class=\"small-page nq-card\"> + slot; all visual styling (background, radius, shadow, text color) comes from .nq-card in legacy nimiq-style. Scoped CSS fixes size to 52.5rem x 70.5rem (420x564px at the 8px html root font-size set by nimiq-style) and overrides .nq-card margin with 0 1.25rem. Sample state fills the slot with .nq-card-header (.nq-h1) and .nq-card-body (.nq-text) placeholder content.",
+  "source": {
+    "repo": "vue-components",
+    "ref": "3c5b972",
+    "files": [
+      "vue-components:src/components/SmallPage.vue"
+    ]
+  }
 }

package/registry/components/status-alert/meta.json

@@ -2,21 +2,51 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "type", "type": "'info' | 'success' | 'warning' | 'error' | 'important'", "default": "'info'", "description": "Alert severity; maps to the upstream callout classes note/tip/warning/caution/important (blue/green/orange/red/purple)." },
-    { "name": "title", "type": "string", "default": "''", "description": "Title line text. Defaults to the upstream label for the type (Note/Tip/Warning/Caution/Important). Rendered uppercase with the type icon." },
-    { "name": "message", "type": "string", "default": "''", "description": "Alert body text. The default slot overrides it when provided." }
+    {
+      "name": "type",
+      "type": "'info' | 'success' | 'warning' | 'error' | 'important'",
+      "default": "'info'",
+      "description": "Alert severity; maps to the upstream callout classes note/tip/warning/caution/important (blue/green/orange/red/purple)."
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "default": "''",
+      "description": "Title line text. Defaults to the upstream label for the type (Note/Tip/Warning/Caution/Important). Rendered uppercase with the type icon."
+    },
+    {
+      "name": "message",
+      "type": "string",
+      "default": "''",
+      "description": "Alert body text. The default slot overrides it when provided."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
   "dependsOn": [],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 600, "height": 640 },
+    "viewport": {
+      "width": 600,
+      "height": 640
+    },
     "selector": "body",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "REBUILT 2026-06-11: previous port came from a local example file (icon-chip + navy text + 1px border) which is NOT a real Nimiq pattern. Source of truth now = upstream/nimiq-ui/packages/nimiq-vitepress-theme/src/assets/github-callouts.css (.custom-block.github-alert), the alert pattern nimiq-branding-skill/references/status-alerts.md cites; color tokens inlined as the light-mode halves of light-dark() from upstream/nimiq-ui/packages/nimiq-css/src/css/colors.css. Truth keeps the component CSS verbatim and restores the upstream docs context (html/body 16px; @nimiq/style's 8px rem base would halve the rem padding). Snippet/Vue porting decisions: rem converted to px at the upstream 16px root (padding 1rem 1.25rem -> 16px 20px) and font-size:16px pinned on the root class so the snippet renders identically under @nimiq/style; selectors renamed/namespaced under .nq-status-alert; the upstream docs full-bleed quirk (transform translateX(-8px) + width calc(100%+16px)) is kept for pixel parity — consumers can delete that pair for a non-bleeding alert. The legacy framework's own inline pattern is .nq-notice (colored text only), already covered by upstream apps; this component is the block-level alert. No upstream Vue component exists (callouts are markdown-rendered), so the Vue port is a faithful wrapper (type/title/message props + slot)."
+  "notes": "REBUILT 2026-06-11: previous port came from a local example file (icon-chip + navy text + 1px border) which is NOT a real Nimiq pattern. Source of truth now = upstream/nimiq-ui/packages/nimiq-vitepress-theme/src/assets/github-callouts.css (.custom-block.github-alert), the alert pattern nimiq-branding-skill/references/status-alerts.md cites; color tokens inlined as the light-mode halves of light-dark() from upstream/nimiq-ui/packages/nimiq-css/src/css/colors.css. Truth keeps the component CSS verbatim and restores the upstream docs context (html/body 16px; @nimiq/style's 8px rem base would halve the rem padding). Snippet/Vue porting decisions: rem converted to px at the upstream 16px root (padding 1rem 1.25rem -> 16px 20px) and font-size:16px pinned on the root class so the snippet renders identically under @nimiq/style; selectors renamed/namespaced under .nq-status-alert; the upstream docs full-bleed quirk (transform translateX(-8px) + width calc(100%+16px)) is kept for pixel parity — consumers can delete that pair for a non-bleeding alert. The legacy framework's own inline pattern is .nq-notice (colored text only), already covered by upstream apps; this component is the block-level alert. No upstream Vue component exists (callouts are markdown-rendered), so the Vue port is a faithful wrapper (type/title/message props + slot).",
+  "source": {
+    "repo": "nimiq-ui",
+    "ref": "68e96cd",
+    "files": [
+      "nimiq-ui:packages/nimiq-vitepress-theme/src/assets/github-callouts.css"
+    ]
+  }
 }

package/registry/components/status-screen/meta.json

@@ -2,26 +2,83 @@
   "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"],
+  "variants": [
+    "vue",
+    "html"
+  ],
   "props": [
-    { "name": "title", "type": "string", "default": "''", "description": "Headline; shown under the icon for result states and at the top for the loading state." },
-    { "name": "state", "type": "'loading' | 'success' | 'warning' | 'error'", "default": "'loading'", "description": "Which screen to show; success adds the exit-transition slide-up animation." },
-    { "name": "status", "type": "string", "default": "''", "description": "Loading state only: current step text, animates upward on change." },
-    { "name": "lightBlue", "type": "boolean", "default": false, "description": "Use the light-blue gradient instead of navy for the loading background." },
-    { "name": "message", "type": "string", "default": "''", "description": "Body text for warning and error states." },
-    { "name": "mainAction", "type": "string", "default": "''", "description": "Label of the inverse action button on warning/error screens; emits 'main-action'." },
-    { "name": "alternativeAction", "type": "string", "default": "''", "description": "Label of the secondary text link on warning/error screens; emits 'alternative-action'." },
-    { "name": "small", "type": "boolean", "default": false, "description": "Compact layout (smaller title, tighter status spacing)." }
+    {
+      "name": "title",
+      "type": "string",
+      "default": "''",
+      "description": "Headline; shown under the icon for result states and at the top for the loading state."
+    },
+    {
+      "name": "state",
+      "type": "'loading' | 'success' | 'warning' | 'error'",
+      "default": "'loading'",
+      "description": "Which screen to show; success adds the exit-transition slide-up animation."
+    },
+    {
+      "name": "status",
+      "type": "string",
+      "default": "''",
+      "description": "Loading state only: current step text, animates upward on change."
+    },
+    {
+      "name": "lightBlue",
+      "type": "boolean",
+      "default": false,
+      "description": "Use the light-blue gradient instead of navy for the loading background."
+    },
+    {
+      "name": "message",
+      "type": "string",
+      "default": "''",
+      "description": "Body text for warning and error states."
+    },
+    {
+      "name": "mainAction",
+      "type": "string",
+      "default": "''",
+      "description": "Label of the inverse action button on warning/error screens; emits 'main-action'."
+    },
+    {
+      "name": "alternativeAction",
+      "type": "string",
+      "default": "''",
+      "description": "Label of the secondary text link on warning/error screens; emits 'alternative-action'."
+    },
+    {
+      "name": "small",
+      "type": "boolean",
+      "default": false,
+      "description": "Compact layout (smaller title, tighter status spacing)."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "small-page"
   ],
-  "cssFiles": ["css/legacy/nimiq-style.min.css"],
-  "dependsOn": ["small-page"],
   "npmDeps": [],
   "verified": true,
   "verify": {
-    "viewport": { "width": 500, "height": 700 },
+    "viewport": {
+      "width": 500,
+      "height": 700
+    },
     "selector": ".small-page",
     "maxDiffPct": 0.5,
     "settleMs": 250
   },
-  "notes": "Source: upstream/hub/src/components/StatusScreen.vue (Hub-internal component, not in @nimiq/vue-components — but it imports LoadingSpinner/CheckmarkIcon/FaceNeutralIcon/FaceSadIcon from there). Sample state: SUCCESS inside a SmallPage, mirroring hub CheckoutTransmission.vue ('Payment successful.'), static end-frame of the success-title-slide animation (Playwright animations:'disabled' fast-forwards it; root has .exit-transition but no .nq-blue-bg since showLoadingBackground is false in result states). Visuals come from .nq-green-bg gradient + white text rules in legacy nimiq-style; checkmark is checkmark.svg from @nimiq/style at font-size 9rem via .nq-icon{width:1em}. Snippet CSS namespaces every scoped selector under .status-screen; keyframe names kept upstream-verbatim (success-title-slide, exit-transition, status-screen-grow-from-bottom-button). Vue port: full Vue 3 script-setup rewrite of the class component — all 4 states, status-line crossfade timers, showLoadingBackground corner-pixel fix, Vue 3 transition class names (-enter-from), icons inlined."
+  "notes": "Source: upstream/hub/src/components/StatusScreen.vue (Hub-internal component, not in @nimiq/vue-components — but it imports LoadingSpinner/CheckmarkIcon/FaceNeutralIcon/FaceSadIcon from there). Sample state: SUCCESS inside a SmallPage, mirroring hub CheckoutTransmission.vue ('Payment successful.'), static end-frame of the success-title-slide animation (Playwright animations:'disabled' fast-forwards it; root has .exit-transition but no .nq-blue-bg since showLoadingBackground is false in result states). Visuals come from .nq-green-bg gradient + white text rules in legacy nimiq-style; checkmark is checkmark.svg from @nimiq/style at font-size 9rem via .nq-icon{width:1em}. Snippet CSS namespaces every scoped selector under .status-screen; keyframe names kept upstream-verbatim (success-title-slide, exit-transition, status-screen-grow-from-bottom-button). Vue port: full Vue 3 script-setup rewrite of the class component — all 4 states, status-line crossfade timers, showLoadingBackground corner-pixel fix, Vue 3 transition class names (-enter-from), icons inlined.",
+  "source": {
+    "repo": "hub",
+    "ref": "cf2ea41",
+    "files": [
+      "hub:src/components/StatusScreen.vue"
+    ]
+  }
 }

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

@@ -93,5 +93,12 @@
   "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"
-  ]
+  ],
+  "source": {
+    "repo": "wallet",
+    "ref": "656ed56",
+    "files": [
+      "wallet:src/components/swap/SwapBalanceBar.vue"
+    ]
+  }
 }