@loworbitstudio/visor 1.18.0 → 1.19.0

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-07-09T19:24:03.742Z",
+  "generated_at": "2026-07-20T05:09:50.010Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -2170,6 +2170,7 @@
         "--color-picker-indicator-shadow",
         "--color-picker-indicator-shadow-color",
         "--focus-ring-width",
+        "--font-mono",
         "--font-size-sm",
         "--font-size-xs",
         "--motion-duration-150",
@@ -3513,6 +3514,8 @@
         "--doc-frame-max-width",
         "--focus-ring-offset",
         "--focus-ring-width",
+        "--font-display",
+        "--font-family-heading",
         "--font-mono",
         "--font-size-2xs",
         "--font-size-lg",
@@ -4100,6 +4103,138 @@
       ],
       "example": "import { WarningCircle } from '@phosphor-icons/react';\n\n<ErrorPlacard\n  icon={<WarningCircle weight=\"fill\" />}\n  title=\"Could not load members\"\n  body=\"The request timed out. Check your connection and try again.\"\n  actions={\n    <>\n      <Button variant=\"ghost\" size=\"sm\">Dismiss</Button>\n      <Button variant=\"outline\" size=\"sm\">Retry</Button>\n    </>\n  }\n/>\n"
     },
+    "fidelity-mirror": {
+      "category": "data-display",
+      "description": "The design-left / built-right comparison surface — renders a pure-HTML design source beside its Visor-TSX render (or a native/Flutter device-framed screenshot set, or an external artifact) in recessed capture wells, with a verdict diff indicator, numbered delta callouts, a classed delta legend, and a drag-to-reveal overlay mode. Composes inside DocFrame's content and goes full-bleed on widescreen so each pane is ~50vw. This is the Fidelity Mirror DISPLAY; the screenshot-diff GATE (PL-2139) is a separate verification concern.",
+      "when_to_use": [
+        "A Fidelity Mirror doc surface that renders a design-vs-built comparison inside DocFrame, so the doc type is Borealis-native rather than hand-rolled per project",
+        "Showing the pure HTML design (left) against the Visor-ified TSX render (right) with a diff verdict and enumerated, classed deltas",
+        "Comparing a native (SwiftUI) or Flutter screen against its design inside a device bezel, or an external claude.ai artifact against its source",
+        "A widescreen full-bleed compare where each pane spans ~50vw for pixel-level review on a fullscreen monitor"
+      ],
+      "when_not_to_use": [
+        "The fidelity GATE — screenshot-diff verification that a build matches its design (that is PL-2139 / Gate 16, a verification concern, not a display one)",
+        "The themed doc-page shell / sticky header / brand slot (use DocFrame — VI-609)",
+        "The grouped, collapsible doc navigation (use DocNav — VI-608)",
+        "A generic two-up media comparison with no design-fidelity semantics (use a plain grid or Carousel)"
+      ],
+      "variants": {},
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "required": true,
+          "description": "The compared surface's name — the header title (e.g. a component or screen name)."
+        },
+        {
+          "name": "design",
+          "type": "FidelitySource",
+          "required": true,
+          "description": "The DESIGN source (left pane) — the pure-HTML design. Renders `content` when present, else an `<img>` (image) or a live-route/external `<iframe>` from `src`. Carries an optional pane `label` + mono `meta`."
+        },
+        {
+          "name": "built",
+          "type": "FidelitySource",
+          "required": true,
+          "description": "The BUILT source (right pane) — the Visor-TSX render, or a device-framed screenshot for native/flutter. Same shape as `design`; the built pane also draws the numbered delta callouts."
+        },
+        {
+          "name": "verdict",
+          "type": "'match' | 'drift' | 'fail'",
+          "required": true,
+          "description": "The diff verdict — tints the status pill (the diff indicator). match → success, drift → warning, fail → destructive."
+        },
+        {
+          "name": "platform",
+          "type": "'web' | 'native' | 'flutter' | 'external'",
+          "default": "'web'",
+          "description": "Platform of the built surface. Drives the built-side renderer and the header chip — web → live-route iframe + \"Web · Live Route\"; native → SwiftUI screenshot in a device bezel + \"iOS · SwiftUI\"; flutter → device-framed image + \"Flutter\"; external → external artifact + \"External\"."
+        },
+        {
+          "name": "mode",
+          "type": "'split' | 'overlay'",
+          "default": "'split'",
+          "description": "Initial compare presentation — split (design-left / built-right in recessed wells) or overlay (drag-to-reveal slider seam). The header segmented toggle switches in place."
+        },
+        {
+          "name": "score",
+          "type": "string",
+          "description": "Optional score/summary string on the status pill (e.g. \"99.4%\", \"3 deltas\")."
+        },
+        {
+          "name": "deltas",
+          "type": "FidelityDelta[]",
+          "description": "Enumerated drifts — each renders a numbered callout on the built side (when it carries a `position`) and a classed legend row. Classes mirror the render-vs-design self-check taxonomy (radius | color | spacing | type | align). Omit → no callouts or legend (e.g. a MATCH case)."
+        },
+        {
+          "name": "bleed",
+          "type": "boolean",
+          "default": "true",
+          "description": "Widescreen full-bleed layout — the compare escapes DocFrame's centered column and spans the viewport so each pane is ~50vw with the center gutter equal to the outer padding. Under 768px the panes stack design-over-built."
+        },
+        {
+          "name": "overlayPosition",
+          "type": "number",
+          "default": "55",
+          "description": "Initial overlay reveal position (0–100), the percent of the design source shown from the left before the slider seam."
+        },
+        {
+          "name": "onModeChange",
+          "type": "(mode: 'split' | 'overlay') => void",
+          "description": "Notified when the compare mode toggles via the header segmented control."
+        }
+      ],
+      "dependencies": [
+        "@phosphor-icons/react",
+        "@loworbitstudio/visor-core"
+      ],
+      "tokens_used": [
+        "--accent",
+        "--border-focus",
+        "--color-neutral-950",
+        "--color-white",
+        "--destructive",
+        "--fm-built-hue",
+        "--fm-design-hue",
+        "--fm-pad",
+        "--fm-radius",
+        "--fm-split",
+        "--fm-well",
+        "--fm-well-radius",
+        "--focus-ring-offset",
+        "--focus-ring-width",
+        "--font-mono",
+        "--font-sans",
+        "--font-size-2xs",
+        "--font-size-sm",
+        "--font-weight-bold",
+        "--font-weight-medium",
+        "--hairline",
+        "--info",
+        "--motion-duration-fast",
+        "--motion-easing-standard",
+        "--opacity-80",
+        "--radius-full",
+        "--radius-sm",
+        "--shadow-lg",
+        "--shadow-md",
+        "--spacing-1",
+        "--spacing-10",
+        "--spacing-2",
+        "--spacing-3",
+        "--spacing-4",
+        "--stroke-width-thin",
+        "--success",
+        "--surface-card",
+        "--surface-page",
+        "--surface-subtle",
+        "--text-primary",
+        "--text-secondary",
+        "--text-tertiary",
+        "--warning"
+      ],
+      "example": "import { FidelityMirror } from '@/components/ui/fidelity-mirror/fidelity-mirror'\n\nexport function DocNavMirror() {\n  return (\n    <FidelityMirror\n      title=\"DocNav\"\n      subtitle=\"Fidelity Mirror · VI-611\"\n      platform=\"web\"\n      verdict=\"drift\"\n      score=\"3 deltas\"\n      design={{ content: <DesignCapture />, meta: 'index.html' }}\n      built={{ content: <BuiltCapture />, meta: 'route · /doc-nav' }}\n      deltas={[\n        { class: 'radius', description: <>Group cluster corners <b>22px → 12px</b>.</>, position: { top: '34px', left: '12px' } },\n        { class: 'color', description: <>Resting pills read <b>--surface-subtle</b> — should be a recessed well.</>, position: { top: '52px', left: '96px' } },\n        { class: 'type', description: <>Group labels are <b>title-case</b> — should be all-caps mono.</>, position: { top: '34px', right: '12px' } },\n      ]}\n    />\n  )\n}\n"
+    },
     "field": {
       "category": "form",
       "description": "A form field wrapper composing label, description, and error components.",
@@ -12260,6 +12395,7 @@
       "bento-grid",
       "card",
       "chart",
+      "fidelity-mirror",
       "key-value-list",
       "marquee",
       "name-roster",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {
@@ -46,7 +46,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1021.0",
     "@babel/parser": "^7.26.0",
-    "@loworbitstudio/visor-theme-engine": "^0.17.1",
+    "@loworbitstudio/visor-theme-engine": "^0.18.0",
     "commander": "^13.1.0",
     "diff": "^8.0.4",
     "picocolors": "^1.1.1",