@exponential-at/ui 0.0.0-stage → 0.1.0

package/fixtures/overlay-geometry.json

@@ -0,0 +1,272 @@
+{
+  "$comment": "VAPP-87: the OVERLAY placement contract (src/overlay.ts placeOverlay): an anchor box, the overlay's size and the viewport, a preferred side → where it lands. OVERLAY_OFFSET (4 px) from the anchor, centred on the cross axis; FLIP to the opposite side when the preferred side has less room than the overlay needs and the opposite has more; SHIFT on the cross axis to stay OVERLAY_PADDING (8 px) inside the viewport. `expected` is what the TS rule returns (src/overlay.test.ts replays it); the React renderer checks that Radix's popper lands within `tolerancePx` of it in headless Chromium (browser/overlay.test.ts), the Rust core's layer manager (VAPP-86) reproduces it exactly.",
+  "offset": 4,
+  "padding": 8,
+  "tolerancePx": 2,
+  "cases": [
+    {
+      "name": "bottom, room below",
+      "anchor": {
+        "x": 300,
+        "y": 100,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 200,
+        "height": 120
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "bottom",
+      "expected": {
+        "x": 260,
+        "y": 140,
+        "side": "bottom",
+        "flipped": false
+      }
+    },
+    {
+      "name": "bottom, no room below → flips to top",
+      "anchor": {
+        "x": 300,
+        "y": 500,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 200,
+        "height": 120
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "bottom",
+      "expected": {
+        "x": 260,
+        "y": 376,
+        "side": "top",
+        "flipped": true
+      }
+    },
+    {
+      "name": "top, room above",
+      "anchor": {
+        "x": 300,
+        "y": 400,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 200,
+        "height": 120
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "top",
+      "expected": {
+        "x": 260,
+        "y": 276,
+        "side": "top",
+        "flipped": false
+      }
+    },
+    {
+      "name": "top, no room above → flips to bottom",
+      "anchor": {
+        "x": 300,
+        "y": 20,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 200,
+        "height": 120
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "top",
+      "expected": {
+        "x": 260,
+        "y": 60,
+        "side": "bottom",
+        "flipped": true
+      }
+    },
+    {
+      "name": "right, room",
+      "anchor": {
+        "x": 100,
+        "y": 250,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 160,
+        "height": 80
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "right",
+      "expected": {
+        "x": 224,
+        "y": 228,
+        "side": "right",
+        "flipped": false
+      }
+    },
+    {
+      "name": "right, no room → flips to left",
+      "anchor": {
+        "x": 660,
+        "y": 250,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 160,
+        "height": 80
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "right",
+      "expected": {
+        "x": 496,
+        "y": 228,
+        "side": "left",
+        "flipped": true
+      }
+    },
+    {
+      "name": "left, no room → flips to right",
+      "anchor": {
+        "x": 20,
+        "y": 250,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 160,
+        "height": 80
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "left",
+      "expected": {
+        "x": 144,
+        "y": 228,
+        "side": "right",
+        "flipped": true
+      }
+    },
+    {
+      "name": "bottom, anchor at the left edge → shifted right",
+      "anchor": {
+        "x": 4,
+        "y": 100,
+        "width": 40,
+        "height": 36
+      },
+      "size": {
+        "width": 240,
+        "height": 100
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "bottom",
+      "expected": {
+        "x": 8,
+        "y": 140,
+        "side": "bottom",
+        "flipped": false
+      }
+    },
+    {
+      "name": "bottom, anchor at the right edge → shifted left",
+      "anchor": {
+        "x": 756,
+        "y": 100,
+        "width": 40,
+        "height": 36
+      },
+      "size": {
+        "width": 240,
+        "height": 100
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "bottom",
+      "expected": {
+        "x": 552,
+        "y": 140,
+        "side": "bottom",
+        "flipped": false
+      }
+    },
+    {
+      "name": "top, just enough room above → no flip",
+      "anchor": {
+        "x": 300,
+        "y": 120,
+        "width": 120,
+        "height": 36
+      },
+      "size": {
+        "width": 200,
+        "height": 60
+      },
+      "viewport": {
+        "width": 800,
+        "height": 600
+      },
+      "side": "top",
+      "expected": {
+        "x": 260,
+        "y": 56,
+        "side": "top",
+        "flipped": false
+      }
+    },
+    {
+      "name": "phone viewport, bottom sheet-like popover flips",
+      "anchor": {
+        "x": 20,
+        "y": 760,
+        "width": 350,
+        "height": 44
+      },
+      "size": {
+        "width": 300,
+        "height": 200
+      },
+      "viewport": {
+        "width": 390,
+        "height": 844
+      },
+      "side": "bottom",
+      "expected": {
+        "x": 45,
+        "y": 556,
+        "side": "top",
+        "flipped": true
+      }
+    }
+  ]
+}

package/fixtures/primitive-specimens.json

@@ -0,0 +1,58 @@
+{
+  "$comment": "FEED-131: the PRIMITIVE specimens of the web-parity gate (conformance/parity.ts, group `primitive`): `@exponential-at/ui-react/primitives` (Radix + dist/exponential-ui-react.css) = the reference, `@exponential-at/ui-solid/primitives` (+ dist/exponential-ui-solid.css, byte-identical) = the candidate. Each row runs × [exponential light, orange dark] through both harnesses' `?view=primitives&id=<id>&theme=&mode=&width=`; the specimen itself lives in harness/primitives/<primitive>.ts(x) of EACH package (SPECIMENS[id]). The whole <body> is compared (DOM incl. body attributes, every element's computed style + frame, pixels), 0 tolerance.",
+  "$fields": {
+    "id": "`<primitive>/<variant>`, unique; the harness key (SPECIMENS[id]) on both sides",
+    "primitive": "the harness module that owns it: smoke | plain | controls | overlays | data | calendar",
+    "viewport": "{ width, height } of the page (width is also the `width` query)",
+    "open": "true = an overlay opens on mount (the specimen passes defaultOpen); the gate waits for window.__xuiOverlay?.() !== null when the page defines it, then two frames",
+    "interact": "null | \"hover\" | \"focus\": the gate also runs a case that hovers / focuses the FIRST [data-xui-target] inside the specimen on both sides, waits two frames, then dumps"
+  },
+  "specimens": [
+    { "id": "smoke/button", "primitive": "smoke", "viewport": { "width": 900, "height": 600 }, "open": false, "interact": null },
+    { "id": "plain/button", "primitive": "plain", "viewport": { "width": 1100, "height": 600 }, "open": false, "interact": "hover" },
+    { "id": "plain/badge", "primitive": "plain", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": null },
+    { "id": "plain/alert", "primitive": "plain", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": null },
+    { "id": "plain/card", "primitive": "plain", "viewport": { "width": 900, "height": 400 }, "open": false, "interact": null },
+    { "id": "plain/input-textarea", "primitive": "plain", "viewport": { "width": 900, "height": 700 }, "open": false, "interact": "focus" },
+    { "id": "plain/kbd-separator-skeleton-spinner", "primitive": "plain", "viewport": { "width": 900, "height": 400 }, "open": false, "interact": null },
+    { "id": "plain/empty-state", "primitive": "plain", "viewport": { "width": 900, "height": 800 }, "open": false, "interact": null },
+    { "id": "plain/icon-disc-meter", "primitive": "plain", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": null },
+    { "id": "plain/progress", "primitive": "plain", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": null },
+    { "id": "plain/rings", "primitive": "plain", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": null },
+    { "id": "plain/disclosure-header", "primitive": "plain", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": "hover" },
+    { "id": "plain/choice-tiles", "primitive": "plain", "viewport": { "width": 900, "height": 500 }, "open": false, "interact": null },
+    { "id": "plain/code-block", "primitive": "plain", "viewport": { "width": 900, "height": 700 }, "open": false, "interact": null },
+    { "id": "plain/table", "primitive": "plain", "viewport": { "width": 900, "height": 400 }, "open": false, "interact": null },
+    { "id": "plain/breadcrumb", "primitive": "plain", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": "hover" },
+    { "id": "calendar/single", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": "focus" },
+    { "id": "calendar/range", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": null },
+    { "id": "calendar/multiple-two-months", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": null },
+    { "id": "calendar/dropdown", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": null },
+    { "id": "calendar/disabled-week-numbers", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": null },
+    { "id": "calendar/rtl", "primitive": "calendar", "viewport": { "width": 900, "height": 420 }, "open": false, "interact": null },
+    { "id": "controls/select-closed", "primitive": "controls", "viewport": { "width": 900, "height": 600 }, "open": false, "interact": null },
+    { "id": "controls/select-open", "primitive": "controls", "viewport": { "width": 900, "height": 600 }, "open": true, "interact": null },
+    { "id": "controls/select-open-popper", "primitive": "controls", "viewport": { "width": 900, "height": 600 }, "open": true, "interact": null },
+    { "id": "controls/command", "primitive": "controls", "viewport": { "width": 900, "height": 600 }, "open": false, "interact": null },
+    { "id": "controls/command-empty", "primitive": "controls", "viewport": { "width": 900, "height": 600 }, "open": false, "interact": null },
+    { "id": "controls/checkbox", "primitive": "controls", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": "focus" },
+    { "id": "controls/switch", "primitive": "controls", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": null },
+    { "id": "controls/tabs", "primitive": "controls", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": "hover" },
+    { "id": "controls/segmented-control", "primitive": "controls", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": null },
+    { "id": "controls/collapsible", "primitive": "controls", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": null },
+    { "id": "controls/scroll-area", "primitive": "controls", "viewport": { "width": 900, "height": 300 }, "open": false, "interact": "hover" },
+    { "id": "controls/avatar", "primitive": "controls", "viewport": { "width": 900, "height": 200 }, "open": false, "interact": null },
+    { "id": "overlays/dialog-open", "primitive": "overlays", "viewport": { "width": 900, "height": 700 }, "open": true, "interact": null },
+    { "id": "overlays/dialog-sheet-phone", "primitive": "overlays", "viewport": { "width": 390, "height": 800 }, "open": true, "interact": null },
+    { "id": "overlays/sheet-right", "primitive": "overlays", "viewport": { "width": 900, "height": 700 }, "open": true, "interact": null },
+    { "id": "overlays/sheet-bottom", "primitive": "overlays", "viewport": { "width": 900, "height": 700 }, "open": true, "interact": null },
+    { "id": "overlays/alert-dialog", "primitive": "overlays", "viewport": { "width": 900, "height": 700 }, "open": true, "interact": null },
+    { "id": "overlays/popover", "primitive": "overlays", "viewport": { "width": 900, "height": 500 }, "open": true, "interact": null },
+    { "id": "overlays/tooltip", "primitive": "overlays", "viewport": { "width": 900, "height": 400 }, "open": true, "interact": null },
+    { "id": "overlays/hover-card", "primitive": "overlays", "viewport": { "width": 900, "height": 500 }, "open": true, "interact": null },
+    { "id": "overlays/dropdown-menu", "primitive": "overlays", "viewport": { "width": 900, "height": 700 }, "open": true, "interact": null },
+    { "id": "overlays/dropdown-menu-sub", "primitive": "overlays", "viewport": { "width": 900, "height": 500 }, "open": true, "interact": null },
+    { "id": "overlays/toast-stack", "primitive": "overlays", "viewport": { "width": 900, "height": 600 }, "open": false, "interact": "hover" },
+    { "id": "overlays/triggers", "primitive": "overlays", "viewport": { "width": 1100, "height": 400 }, "open": false, "interact": "hover" }
+  ]
+}

package/fixtures/prompt-budget.json

@@ -0,0 +1,33 @@
+{
+  "$comment": "AUTO-GENERATED by packages/exponential-ui/scripts/generate.ts — do not edit.\nSource of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.json, style.json, basic-map.json, strings.json, locale.json, code.json, a11y.json, layout.json). The size of catalogPrompt() on record: prompt.test.ts fails when the full prompt passes budgetTokens (cut descriptions before components) or when these numbers drift from the catalog without being regenerated. tokens = chars / 4, an estimate. VAPP-108: `index` = sections rules + index + functions + style (the components then come one at a time through componentPrompt, `perComponent`), `rules` = the rules alone.",
+  "budgetTokens": 7335,
+  "full": {
+    "components": 81,
+    "chars": 29340,
+    "tokens": 7335
+  },
+  "lite": {
+    "components": 59,
+    "chars": 21958,
+    "tokens": 5490
+  },
+  "terse": {
+    "components": 81,
+    "chars": 21903,
+    "tokens": 5476
+  },
+  "index": {
+    "components": 81,
+    "chars": 11211,
+    "tokens": 2803
+  },
+  "rules": {
+    "chars": 2106,
+    "tokens": 527
+  },
+  "perComponent": {
+    "mean": 314,
+    "max": 1097,
+    "meanTokens": 79
+  }
+}