@variance-authority/tribunal 0.1.0

package/dist/ui/regions.js

@@ -0,0 +1,67 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { number } from './text.js';
+/**
+ * Region rectangles over the candidate, cause and collateral drawn apart.
+ *
+ * Positioned in percentages of the raster's own dimensions, which the build
+ * carries, rather than of the rendered element. Measuring the image in the
+ * browser would place every box correctly only after it had loaded, and wrongly
+ * for the frame before that — and a box in the wrong place is worse than no box,
+ * because it attributes a change to whatever it happens to land on.
+ *
+ * Percentages are also what survives the zoom: the stage scales the plate and
+ * every box scales with it, so nothing here has to know the magnification.
+ *
+ * Only the causes and whatever is under attention are named on the picture. Thirty
+ * collateral captions over a page fitted to a pane overlap into a grey field, and
+ * a reviewer who cannot read any of them is worse off than one reading two — so
+ * the rest carry their ordinal, which is the number they are listed under, and the
+ * sentence arrives on hover and in the table. Nothing is dropped: every region
+ * that was found is a box and a row, both of them always.
+ */
+export function RegionOverlay({ subject, box, focus, onFocus, }) {
+    const size = box ?? subject.size;
+    if (size === undefined || subject.regions.length === 0)
+        return null;
+    return (_jsx("div", { className: "va-regions", children: subject.regions.map((region, index) => (_jsx("span", { className: [
+                'va-region',
+                region.cause ? 'va-cause' : 'va-collateral',
+                focus === index ? 'va-lit' : '',
+            ]
+                .filter(Boolean)
+                .join(' '), onPointerEnter: () => onFocus?.(index), onPointerLeave: () => onFocus?.(null), style: {
+                left: `${String((region.x / size.width) * 100)}%`,
+                top: `${String((region.y / size.height) * 100)}%`,
+                width: `${String((region.width / size.width) * 100)}%`,
+                height: `${String((region.height / size.height) * 100)}%`,
+            }, children: _jsxs("span", { className: "va-region-label", children: [String(index + 1), region.cause || focus === index ? (_jsxs(_Fragment, { children: [' · ', region.component ?? 'unattributed', region.cause ? '' : ' (collateral)', region.where === undefined ? '' : ` — ${region.where}`] })) : null] }) }, key(region, index)))) }));
+}
+/**
+ * The same regions as rows, which is the half a picture cannot deliver.
+ *
+ * A rectangle says *here*. It cannot say `src/ui/Button.tsx:18`, and the file is
+ * the column that lets a reviewer hand the change to whoever owns it rather than
+ * deciding it themselves. Ordered as the report ordered them — causes first,
+ * never by area, which reports the container that reflowed instead of the
+ * component that was edited.
+ */
+export function RegionTable({ subject, sourced, focus, onFocus, onJump, }) {
+    if (subject.regions.length === 0)
+        return null;
+    // A blank cell is the one answer this column must not give: the reviewer's next
+    // move is to open the file, and nothing-at-all reads as a defect in the tool
+    // when the ordinary cause is a component out of a dependency, which no source
+    // index scanned or claimed to.
+    const indexed = sourced ?? subject.regions.some((region) => region.file !== undefined);
+    return (_jsxs("table", { className: "va-region-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "region" }), _jsx("th", { children: "component" }), _jsx("th", { children: "declared in" }), _jsx("th", { className: "va-num-col", children: "pixels" })] }) }), _jsx("tbody", { children: subject.regions.map((region, index) => (_jsxs("tr", { className: focus === index ? 'va-lit' : undefined, onPointerEnter: () => onFocus(index), onPointerLeave: () => onFocus(null), children: [_jsx("td", { children: _jsxs("button", { type: "button", className: "va-region-jump", onClick: () => onJump(index), children: [_jsx("span", { className: region.cause ? 'va-dot va-cause' : 'va-dot va-collateral' }), String(index + 1), _jsxs("span", { className: "va-region-where", children: [region.cause ? 'cause' : 'collateral', region.where === undefined ? '' : ` · ${region.where}`] })] }) }), _jsx("td", { children: region.component ?? _jsx("span", { className: "va-note", children: "unattributed" }) }), _jsx("td", { children: region.file === undefined ? (_jsx("span", { className: "va-note", title: indexed
+                                    ? 'This run resolved files for other components, so this is a name its source index does not declare — a component out of a dependency, or one produced at build time.'
+                                    : 'This run resolved no source files at all, so nothing here says where any of these components are declared.', children: indexed ? 'not in the scanned source' : 'no source index' })) : (_jsx("code", { children: region.file })) }), _jsx("td", { className: "va-num va-num-col", children: number(region.pixels) })] }, key(region, index)))) })] }));
+}
+/**
+ * Position and ordinal, because two regions can be the same size in the same
+ * place across renders and nothing else here is unique.
+ */
+function key(region, index) {
+    return `${String(region.x)}-${String(region.y)}-${String(index)}`;
+}
+//# sourceMappingURL=regions.js.map

package/dist/ui/regions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"regions.js","sourceRoot":"","sources":["../../src/ui/regions.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactElement } from 'react';\nimport type { RegionRecord } from '@variance-authority/report';\nimport type { SubjectView } from '../review.js';\nimport { number } from './text.js';\n\n/**\n * The boxes, and the table that names them.\n *\n * Apart from [`viewer.tsx`](./viewer.tsx) because the stage is one question — how\n * do I look at two images — and this is the other: *which of these boxes is the\n * one somebody edited, and who owns it*. The two are drawn together and read\n * together, and a reviewer moves between them constantly, which is why the focus\n * is one index shared by both rather than a hover state in each.\n *\n * The row and the rectangle are the same finding twice. Pointing at either lights\n * the other, because a rectangle 700 pixels down a route capture and a row in a\n * table are otherwise two lists a reader has to join by counting.\n */\n\nexport interface RegionFocus {\n  /** Which region is lit, by report order. `null` is none. */\n  readonly focus: number | null;\n  readonly onFocus: (index: number | null) => void;\n  /** Bring this region into view on the stage. */\n  readonly onJump: (index: number) => void;\n}\n\n/**\n * Region rectangles over the candidate, cause and collateral drawn apart.\n *\n * Positioned in percentages of the raster's own dimensions, which the build\n * carries, rather than of the rendered element. Measuring the image in the\n * browser would place every box correctly only after it had loaded, and wrongly\n * for the frame before that — and a box in the wrong place is worse than no box,\n * because it attributes a change to whatever it happens to land on.\n *\n * Percentages are also what survives the zoom: the stage scales the plate and\n * every box scales with it, so nothing here has to know the magnification.\n *\n * Only the causes and whatever is under attention are named on the picture. Thirty\n * collateral captions over a page fitted to a pane overlap into a grey field, and\n * a reviewer who cannot read any of them is worse off than one reading two — so\n * the rest carry their ordinal, which is the number they are listed under, and the\n * sentence arrives on hover and in the table. Nothing is dropped: every region\n * that was found is a box and a row, both of them always.\n */\nexport function RegionOverlay({\n  subject,\n  box,\n  focus,\n  onFocus,\n}: {\n  readonly subject: SubjectView;\n  /**\n   * The frame the percentages are of, when it is not the candidate's own.\n   *\n   * Region coordinates are in the comparison's space, and a comparison pads to\n   * the union of the two captures — so on a subject whose baseline was a\n   * different size, the candidate's dimensions are the wrong denominator and\n   * every box lands short by the difference.\n   */\n  readonly box?: { readonly width: number; readonly height: number } | undefined;\n  readonly focus?: number | null;\n  readonly onFocus?: ((index: number | null) => void) | undefined;\n}): ReactElement | null {\n  const size = box ?? subject.size;\n  if (size === undefined || subject.regions.length === 0) return null;\n\n  return (\n    <div className=\"va-regions\">\n      {subject.regions.map((region, index) => (\n        <span\n          key={key(region, index)}\n          className={[\n            'va-region',\n            region.cause ? 'va-cause' : 'va-collateral',\n            focus === index ? 'va-lit' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onPointerEnter={() => onFocus?.(index)}\n          onPointerLeave={() => onFocus?.(null)}\n          style={{\n            left: `${String((region.x / size.width) * 100)}%`,\n            top: `${String((region.y / size.height) * 100)}%`,\n            width: `${String((region.width / size.width) * 100)}%`,\n            height: `${String((region.height / size.height) * 100)}%`,\n          }}\n        >\n          <span className=\"va-region-label\">\n            {String(index + 1)}\n            {region.cause || focus === index ? (\n              <>\n                {' · '}\n                {region.component ?? 'unattributed'}\n                {region.cause ? '' : ' (collateral)'}\n                {region.where === undefined ? '' : ` — ${region.where}`}\n              </>\n            ) : null}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n\n/**\n * The same regions as rows, which is the half a picture cannot deliver.\n *\n * A rectangle says *here*. It cannot say `src/ui/Button.tsx:18`, and the file is\n * the column that lets a reviewer hand the change to whoever owns it rather than\n * deciding it themselves. Ordered as the report ordered them — causes first,\n * never by area, which reports the container that reflowed instead of the\n * component that was edited.\n */\nexport function RegionTable({\n  subject,\n  sourced,\n  focus,\n  onFocus,\n  onJump,\n}: {\n  readonly subject: SubjectView;\n  /**\n   * Whether the *run* resolved any source file at all.\n   *\n   * A property of the run's source index, not of one capture, and the caller who\n   * holds the build is the only one who can say it. Left out, this falls back to\n   * what one render can see on its own, which is strictly weaker: a capture whose\n   * every region belongs to a dependency resolves nothing and would report a run\n   * with no index — the same name then reads two ways on two surfaces, and a\n   * reviewer takes one of them for a bug.\n   */\n  readonly sourced?: boolean | undefined;\n} & RegionFocus): ReactElement | null {\n  if (subject.regions.length === 0) return null;\n\n  // A blank cell is the one answer this column must not give: the reviewer's next\n  // move is to open the file, and nothing-at-all reads as a defect in the tool\n  // when the ordinary cause is a component out of a dependency, which no source\n  // index scanned or claimed to.\n  const indexed = sourced ?? subject.regions.some((region) => region.file !== undefined);\n\n  return (\n    <table className=\"va-region-table\">\n      <thead>\n        <tr>\n          <th>region</th>\n          <th>component</th>\n          <th>declared in</th>\n          <th className=\"va-num-col\">pixels</th>\n        </tr>\n      </thead>\n      <tbody>\n        {subject.regions.map((region, index) => (\n          <tr\n            key={key(region, index)}\n            className={focus === index ? 'va-lit' : undefined}\n            onPointerEnter={() => onFocus(index)}\n            onPointerLeave={() => onFocus(null)}\n          >\n            <td>\n              <button type=\"button\" className=\"va-region-jump\" onClick={() => onJump(index)}>\n                <span className={region.cause ? 'va-dot va-cause' : 'va-dot va-collateral'} />\n                {String(index + 1)}\n                <span className=\"va-region-where\">\n                  {region.cause ? 'cause' : 'collateral'}\n                  {region.where === undefined ? '' : ` · ${region.where}`}\n                </span>\n              </button>\n            </td>\n            <td>{region.component ?? <span className=\"va-note\">unattributed</span>}</td>\n            <td>\n              {region.file === undefined ? (\n                <span\n                  className=\"va-note\"\n                  title={\n                    indexed\n                      ? 'This run resolved files for other components, so this is a name its source index does not declare — a component out of a dependency, or one produced at build time.'\n                      : 'This run resolved no source files at all, so nothing here says where any of these components are declared.'\n                  }\n                >\n                  {indexed ? 'not in the scanned source' : 'no source index'}\n                </span>\n              ) : (\n                <code>{region.file}</code>\n              )}\n            </td>\n            <td className=\"va-num va-num-col\">{number(region.pixels)}</td>\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\n/**\n * Position and ordinal, because two regions can be the same size in the same\n * place across renders and nothing else here is unique.\n */\nfunction key(region: RegionRecord, index: number): string {\n  return `${String(region.x)}-${String(region.y)}-${String(index)}`;\n}\n"]}