nimiq-branding-cli 1.0.0

package/registry/components/hero-section/meta.json

@@ -0,0 +1,56 @@
+{
+  "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 \u2197' pill, WORKS WITH partner row, and a dotted-globe white arc cresting at the bottom.",
+  "category": "marketing",
+  "variants": [
+    "vue",
+    "html"
+  ],
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "default": "Universal Money for\\nIndependent Individuals"
+    },
+    {
+      "name": "subtitle",
+      "type": "string",
+      "default": "In a centralized world, Nimiq gives independence back to you."
+    },
+    {
+      "name": "ctaLabel",
+      "type": "string",
+      "default": "Create Wallet"
+    },
+    {
+      "name": "ctaHref",
+      "type": "string",
+      "default": "#"
+    },
+    {
+      "name": "showPartners",
+      "type": "boolean",
+      "default": true
+    }
+  ],
+  "cssFiles": [
+    "hero-section.css"
+  ],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 1200,
+      "height": 800
+    },
+    "selector": ".nq-hero-section",
+    "maxDiffPct": 0.5,
+    "settleMs": 400
+  },
+  "notes": "REAL-ASSETS-ONLY (2026-06-12): sky = vendored img/gods-light.webp ('Nimiq Gods Rays Background', nimiq.com original) rendered absolute inset-0 with blur(60px) brightness(.8) over a #1F2348 base, exactly like the live site; globe continents = vendored img/world-map.svg (nimiq.com /_ipx/_/assets/images/home-hero/map.svg, 977x362) placed via <image> at x25 y545 1150x426 on the white dome (r1600 circle) with the blue atmosphere halo strokes. Partner row uses the real white CPL/BTC-Lightning/NAKA/Polygon logos (nimiq.com prismic originals, inlined SVG). Floating hexagons + dome halo remain CSS/SVG-built (no shipped asset exists \u2014 the live site draws them in code too). nq add copies assetFiles to ./nimiq/assets/img/; snippet hrefs assume ../../../../assets/ which page builders rewrite to assets/. Alternative generated hexagon-dot globe: scripts/gen-hex-map.mjs.",
+  "assetFiles": [
+    "img/world-map.svg",
+    "img/gods-light.webp"
+  ]
+}

package/registry/components/honeycomb-band/meta.json

@@ -0,0 +1,30 @@
+{
+  "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"],
+  "props": [
+    { "name": "ctaLabel", "type": "string", "default": "Community", "description": "Label of the blue pill above the mosaic." },
+    { "name": "ctaHref", "type": "string", "default": "#", "description": "Link target of the pill." },
+    { "name": "youtubeHref", "type": "string", "default": "#", "description": "Link target of the red YouTube hexagon." },
+    { "name": "xHref", "type": "string", "default": "#", "description": "Link target of the black X hexagon." },
+    { "name": "facebookHref", "type": "string", "default": "#", "description": "Link target of the blue Facebook hexagon." }
+  ],
+  "cssFiles": ["honeycomb-band.css"],
+  "assetFiles": [
+    "img/bg-hexagons.svg",
+    "logos/nimiq-icons-logos/logos-youtube-mono.svg",
+    "logos/nimiq-icons-logos/logos-twitter-mono.svg",
+    "logos/nimiq-icons-logos/logos-facebook-mono.svg"
+  ],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 1200, "height": 700 },
+    "selector": ".nq-honeycomb-band",
+    "maxDiffPct": 0.5,
+    "settleMs": 300
+  },
+  "notes": "MARKETING component. Band background is the REAL nimiq.com asset assets/img/bg-hexagons.svg (2795x544 fading honeycomb, currentColor hexagons at .01-.06 opacity), swept from www.nimiq.com inline CSS as custom--bg-hexagons (references/assets/nimiq-com/css-inline/custom--bg-hexagons.svg). Rendered 1:1 as a CSS alpha mask filled with currentColor (site text navy #1F2348) — the same currentColor mechanism the live page uses — centered and clipped at the section edges. The live mosaic is lazy-loaded and did not render in references/screenshots/nimiq-com/home-desktop-full.png, so the foreground composition (three social hexagons + pill) follows references/supporting-elements-brief-2026-06-11.md item 9. Social hexagon shape = the hexagon path extracted verbatim from bg-hexagons.svg (one lattice cell, viewBox 45.5 248 124 110); the hexagons sit on exact lattice cells of the background (column step 107.5px, row step 124px, half-offset 62px; cells (967.5,303) YouTube, (1827.5,303) X, (1935,241) Facebook). Social glyphs are the REAL nimiq-icons mono logos from assets/logos/nimiq-icons-logos/ (logos-youtube-mono.svg, logos-twitter-mono.svg = the X glyph, logos-facebook-mono.svg — the same icon set nimiq.com inlines as nimiq--logos-*-mono), applied as white CSS masks. Pill uses the nimiq-style light-blue gradient radial-gradient(100% 100% at bottom right, #265DD7, #0582CA), calibrated against the 'Community →' pill in home-desktop-full.png. Asset url()s are ../../../../assets/… relative to the snippet; nq add copies them to ./nimiq/assets/… in consumer projects. Mulish via Google Fonts; deterministic, no JS."
+}

package/registry/components/identicon/meta.json

@@ -0,0 +1,38 @@
+{
+  "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"
+  ],
+  "props": [
+    {
+      "name": "address",
+      "type": "String",
+      "required": false,
+      "description": "User-friendly Nimiq address (e.g. 'NQ07 0000 ...'). Invalid or missing addresses render the dark hexagon placeholder."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [],
+  "npmDeps": [
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 400,
+      "height": 300
+    },
+    "selector": ".identicon",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Renders via @nimiq/iqons@1.6.0 pinned on jsdelivr in both truth and demo; Iqons.svgPath must point at iqons.min.svg (the component normally resolves it via webpack file-loader). The generated data URL embeds a random clip-path id but is pixel-identical across runs. Upstream fixes width:10rem; sample state overrides to 128px at page level. ValidationUtils.normalizeAddress/isValidAddress from @nimiq/utils@0.11.1 are inlined in the Vue port. 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/label-input/meta.json

@@ -0,0 +1,24 @@
+{
+  "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"],
+  "props": [
+    { "name": "value", "type": "string", "default": "", "description": "The label text, bindable via v-model (emits 'input' on typing, 'changed' on blur/submit)." },
+    { "name": "maxBytes", "type": "number", "default": null, "description": "Maximum value length in UTF-8 bytes; input exceeding it is rejected (previous value is kept)." },
+    { "name": "placeholder", "type": "string", "default": "Name your address", "description": "Placeholder text shown when empty (also defines the empty-state width)." },
+    { "name": "vanishing", "type": "boolean", "default": false, "description": "Removes the input's inset border (nq-input 'vanishing' style)." },
+    { "name": "disabled", "type": "boolean", "default": false, "description": "Disables the input and its hover effects." }
+  ],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 600, "height": 200 },
+    "selector": ".label-input",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Sample state: value 'Savings Account', unfocused, default props. The input width is set by script (replicating updateWidth(): measured value width + fontSize / 3), since upstream computes it in JS from hidden width-finder spans. Upstream's i18n default placeholder $t('Name your address') is hardcoded to its English string. Utf8Tools (stringToUtf8ByteArray, truncateToUtf8ByteLength) from @nimiq/utils are inlined in the Vue port via TextEncoder/TextDecoder."
+}

package/registry/components/loading-spinner/meta.json

@@ -0,0 +1,18 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 200, "height": 160 },
+    "selector": ".loading-spinner",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "Sample state: default size (54x48 viewBox '0 0 54 48') on white, color inherited from body (nimiq-blue). Animation is infinite; the verify harness disables animations, which freezes both paths at their CSS-specified stroke-dashoffset (-40.5 big / 13 small — identical to the 0% keyframes). Upstream uses #big-hex/#small-hex ids; the HTML snippet uses classes and prefixed keyframe names (loading-spinner-big-hex/-small-hex) so multiple instances and showcase embedding stay valid. Size via the height/width attributes or CSS; color via the color property."
+}

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

@@ -0,0 +1,18 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": ["small-page", "page-header"],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 500, "height": 700 },
+    "selector": ".small-page",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "PageBody is a pure slot container (no props, no logic). Demo renders it in its natural habitat: a SmallPage with a PageHeader 'Settings' and two nq-text paragraphs. Styling comes almost entirely from the legacy framework's .nq-card-body rules (padding 4rem, padding-top 1rem after .nq-card-header, first/last child margin trimming); the component itself only adds flex-grow:1 and overflow-y:auto."
+}

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

@@ -0,0 +1,18 @@
+{
+  "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"],
+  "props": [],
+  "cssFiles": ["css/legacy/nimiq-style.min.css"],
+  "dependsOn": ["small-page"],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "viewport": { "width": 500, "height": 700 },
+    "selector": ".small-page",
+    "maxDiffPct": 0.5,
+    "settleMs": 250
+  },
+  "notes": "PageFooter is a pure slot container: .page-footer.nq-card-footer. The upstream scoped '>>>' deep selector (.page-footer >>> .nq-button) is flattened to a plain descendant selector in the HTML variant and :deep() in the Vue 3 port. Sample state renders it inside a SmallPage with one light-blue 'Continue' nq-button. With only a footer as card child (no PageBody), the footer sits at the top of the card — in real layouts PageBody flex-grows to push it down."
+}

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

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

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

@@ -0,0 +1,97 @@
+{
+  "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"
+  ],
+  "props": [
+    {
+      "name": "cryptoAmount",
+      "type": "{ amount: number | bigint | BigInteger, currency: string, decimals: number }",
+      "required": true,
+      "description": "Amount to pay in the currency's smallest unit, with the currency code and its decimals (e.g. 5 for NIM)."
+    },
+    {
+      "name": "fiatAmount",
+      "type": "{ amount: number, currency: string }",
+      "description": "Optional fiat value (base unit, e.g. Euro). When set, a fiat line is shown under the crypto amount with a price-breakdown tooltip on hover/click."
+    },
+    {
+      "name": "fiatApiProvider",
+      "type": "'CoinGecko' | 'CryptoCompare'",
+      "default": "CoinGecko",
+      "description": "Fiat API used to fetch the reference exchange rate for rate-deviation warnings."
+    },
+    {
+      "name": "vendorMarkup",
+      "type": "number",
+      "description": "Vendor crypto markup (>= -1) as a fraction, e.g. .05 for +5%; shown in the price-breakdown tooltip."
+    },
+    {
+      "name": "networkFee",
+      "type": "number | bigint | BigInteger",
+      "description": "Suggested network fee in the smallest unit; shown in the price-breakdown tooltip."
+    },
+    {
+      "name": "origin",
+      "type": "string",
+      "required": true,
+      "description": "Origin URL of the shop; the part after '://' is shown as the recipient label."
+    },
+    {
+      "name": "address",
+      "type": "string",
+      "description": "Recipient address; renders an Identicon when it is a valid Nimiq address and no shopLogoUrl is given."
+    },
+    {
+      "name": "shopLogoUrl",
+      "type": "string",
+      "description": "Shop logo image; takes precedence over the identicon."
+    },
+    {
+      "name": "startTime",
+      "type": "number",
+      "description": "Timestamp when the payment request was created; together with endTime enables the countdown timer."
+    },
+    {
+      "name": "endTime",
+      "type": "number",
+      "description": "Timestamp when the payment request expires."
+    },
+    {
+      "name": "theme",
+      "type": "'normal' | 'inverse'",
+      "default": "normal",
+      "description": "'inverse' renders white text/icons for dark backgrounds."
+    }
+  ],
+  "cssFiles": [
+    "css/legacy/nimiq-style.min.css"
+  ],
+  "dependsOn": [
+    "amount",
+    "fiat-amount",
+    "tooltip",
+    "identicon"
+  ],
+  "npmDeps": [
+    "@nimiq/utils",
+    "@nimiq/iqons"
+  ],
+  "verified": true,
+  "verify": {
+    "viewport": {
+      "width": 600,
+      "height": 300
+    },
+    "selector": ".payment-info-line",
+    "maxDiffPct": 0.5,
+    "settleMs": 400
+  },
+  "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"
+  ]
+}

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

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

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

@@ -0,0 +1,60 @@
+{
+  "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"],
+  "props": [
+    {
+      "name": "data",
+      "type": "String",
+      "required": true,
+      "description": "The data to encode. If falsy, the canvas is not rendered (v-if)."
+    },
+    {
+      "name": "errorCorrection",
+      "type": "String",
+      "required": false,
+      "default": "M",
+      "description": "Error correction level per QR spec: 'L' | 'M' | 'H' | 'Q'."
+    },
+    {
+      "name": "radius",
+      "type": "Number",
+      "required": false,
+      "default": 0.5,
+      "description": "Roundness of QR modules, 0–0.5. Recommended: 0.5."
+    },
+    {
+      "name": "fill",
+      "type": "String | LinearGradient | RadialGradient",
+      "required": false,
+      "default": "radial-gradient [1,1,0,1,1,√2] #265DD7 → #0582CA",
+      "description": "Fill of the QR modules — hex color string or qr-creator gradient descriptor. Default is the Nimiq light-blue radial gradient (equivalent to nimiq-light-blue-bg)."
+    },
+    {
+      "name": "background",
+      "type": "String | null",
+      "required": false,
+      "default": null,
+      "description": "Background color (hex) or null for transparent."
+    },
+    {
+      "name": "size",
+      "type": "Number",
+      "required": false,
+      "default": 240,
+      "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"],
+  "dependsOn": [],
+  "npmDeps": ["qr-creator"],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

@@ -0,0 +1,20 @@
+{
+  "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"],
+  "props": [
+    { "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"],
+  "dependsOn": [],
+  "npmDeps": [],
+  "verified": true,
+  "verify": {
+    "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."
+}

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

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

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

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

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

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

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

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

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

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