@exponential_app/eui 0.0.0-stage → 0.2.1

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/pointer.json

@@ -0,0 +1,89 @@
+{
+  "$comment": "EXP-1385. writes: write `value` at `pointer` in `data` (none = remove): data = `expected`, the pointer reads back `read`; or refused with `error`, data unchanged. reads: = `expected`. Absent = nothing. `-` appends and reads the LAST element, so a landed write reads back; an index is digits only.",
+  "writes": [
+    {
+      "name": "fuzz crash-8245f070: - appends",
+      "data": [2],
+      "pointer": "-",
+      "value": [1],
+      "expected": [2, [1]],
+      "read": [1]
+    },
+    {
+      "name": "fuzz crash-94c2e189: - appends to []",
+      "data": [],
+      "pointer": "-",
+      "value": "{\n\n\"\"",
+      "expected": ["{\n\n\"\""],
+      "read": "{\n\n\"\""
+    },
+    {
+      "name": "/- appends",
+      "data": { "items": [1, 2] },
+      "pointer": "/items/-",
+      "value": 3,
+      "expected": { "items": [1, 2, 3] },
+      "read": 3
+    },
+    {
+      "name": "- mid-path",
+      "data": { "items": [1] },
+      "pointer": "/items/-/name",
+      "value": "x",
+      "expected": { "items": [1, { "name": "x" }] },
+      "read": "x"
+    },
+    {
+      "name": "the length appends",
+      "data": { "a": [1] },
+      "pointer": "/a/1",
+      "value": 2,
+      "expected": { "a": [1, 2] },
+      "read": 2
+    },
+    {
+      "name": "- is an object key",
+      "data": { "o": {} },
+      "pointer": "/o/-",
+      "value": 1,
+      "expected": { "o": { "-": 1 } },
+      "read": 1
+    },
+    {
+      "name": "no value removes",
+      "data": { "a": [1, 2] },
+      "pointer": "/a/0",
+      "expected": { "a": [2] },
+      "read": 2
+    },
+    {
+      "name": "refused: a key",
+      "data": { "a": [1] },
+      "pointer": "/a/x",
+      "value": 0,
+      "error": "data: \"x\" is not an array index"
+    },
+    {
+      "name": "refused: a signed index",
+      "data": { "a": [1] },
+      "pointer": "/a/+0",
+      "value": 0,
+      "error": "data: \"+0\" is not an array index"
+    },
+    {
+      "name": "refused: past the end",
+      "data": { "a": [1] },
+      "pointer": "/a/3",
+      "value": 0,
+      "error": "data: index 3 is past the end of the array (1 items)"
+    }
+  ],
+  "reads": [
+    { "name": "- reads the last element", "data": [1, 2], "pointer": "/-", "expected": 2 },
+    { "name": "- in [] reads nothing", "data": [], "pointer": "/-" },
+    { "name": "a signed index reads nothing", "data": [1, 2], "pointer": "/+1" },
+    { "name": "leading zeros read the index", "data": [1, 2], "pointer": "/01", "expected": 2 },
+    { "name": "no leading slash", "data": { "a": { "b": 1 } }, "pointer": "a/b", "expected": 1 },
+    { "name": "an inherited key", "data": {}, "pointer": "/constructor" }
+  ]
+}

package/fixtures/primitive-specimens.json

@@ -0,0 +1,59 @@
+{
+  "$comment": "FEED-131: the PRIMITIVE specimens of the web-parity gate (conformance/parity.ts, group `primitive`): `@exponential_app/eui-react/primitives` (Radix + dist/exponential-ui-react.css) = the reference, `@exponential_app/eui-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": 760 }, "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/voice-wave", "primitive": "plain", "viewport": { "width": 900, "height": 300 }, "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": 7900,
+  "full": {
+    "components": 87,
+    "chars": 31599,
+    "tokens": 7900
+  },
+  "lite": {
+    "components": 61,
+    "chars": 22948,
+    "tokens": 5737
+  },
+  "terse": {
+    "components": 87,
+    "chars": 23419,
+    "tokens": 5855
+  },
+  "index": {
+    "components": 87,
+    "chars": 11639,
+    "tokens": 2910
+  },
+  "rules": {
+    "chars": 2060,
+    "tokens": 515
+  },
+  "perComponent": {
+    "mean": 320,
+    "max": 1097,
+    "meanTokens": 80
+  }
+}