@bicharts/chart-host 0.5.28 → 0.5.29

package/dist/index.mjs

@@ -446,6 +446,103 @@ function actionFor(v) {
   return { kind: "keep", reason: v.errorMessage ?? v.verdictReason ?? "review failed", userVisible: false };
 }
 
+// src/reviewDialog.ts
+var DEFAULT_TEXT = {
+  title: "Apply improvements?",
+  fallbackReason: "The AI review suggests a change to this chart.",
+  cost: "Applying creates a new chart version and uses a generation. Declining costs nothing.",
+  decline: "No thanks",
+  accept: "Apply"
+};
+function askApplyImprovements(container, reason, opts = {}) {
+  return new Promise((resolve) => {
+    try {
+      const minW = opts.minWidth ?? 260;
+      const minH = opts.minHeight ?? 170;
+      const w = container.clientWidth || container.offsetWidth || 0;
+      const h = container.clientHeight || container.offsetHeight || 0;
+      if (w < minW || h < minH) {
+        resolve(false);
+        return;
+      }
+      const text = { ...DEFAULT_TEXT, ...opts.text ?? {} };
+      const doc = container.ownerDocument;
+      const ov = doc.createElement("div");
+      ov.id = opts.id ?? "bic-review-ask-overlay";
+      if (opts.overlayClass) ov.className = opts.overlayClass;
+      else ov.style.cssText = "position:absolute;inset:0;background:rgba(0,0,0,0.55);z-index:110;";
+      ov.style.display = "flex";
+      ov.style.alignItems = "center";
+      ov.style.justifyContent = "center";
+      const card = doc.createElement("div");
+      if (opts.cardClass) card.className = opts.cardClass;
+      else card.style.cssText = "background:#ffffff;color:#1f2937;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.22);";
+      card.style.width = "auto";
+      card.style.height = "auto";
+      card.style.maxWidth = "min(420px, 90%)";
+      card.style.maxHeight = "90%";
+      card.style.overflow = "auto";
+      card.style.padding = "16px 18px";
+      card.style.display = "flex";
+      card.style.flexDirection = "column";
+      card.style.gap = "10px";
+      card.style.boxSizing = "border-box";
+      const head = doc.createElement("div");
+      head.style.cssText = "font:600 13px 'Segoe UI',system-ui,sans-serif;";
+      head.textContent = text.title;
+      const why = doc.createElement("div");
+      why.style.cssText = "font:400 12px/1.45 'Segoe UI',system-ui,sans-serif;white-space:normal;";
+      why.textContent = reason || text.fallbackReason;
+      const cost = doc.createElement("div");
+      cost.style.cssText = "font:400 11px/1.4 'Segoe UI',system-ui,sans-serif;opacity:0.75;white-space:normal;";
+      cost.textContent = text.cost;
+      const row = doc.createElement("div");
+      row.style.cssText = "display:flex;gap:8px;justify-content:flex-end;margin-top:4px;";
+      const no = doc.createElement("button");
+      no.type = "button";
+      no.textContent = text.decline;
+      const yes = doc.createElement("button");
+      yes.type = "button";
+      yes.textContent = text.accept;
+      yes.style.cssText = "font-weight:600;";
+      let done = false;
+      const finish = (v) => {
+        if (done) return;
+        done = true;
+        try {
+          if (ov.parentElement) ov.parentElement.removeChild(ov);
+        } catch {
+        }
+        doc.removeEventListener("keydown", onKey, true);
+        resolve(v);
+      };
+      const onKey = (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          finish(false);
+        }
+      };
+      no.addEventListener("click", () => finish(false));
+      yes.addEventListener("click", () => finish(true));
+      ov.addEventListener("click", (e) => {
+        if (e.target === ov) finish(false);
+      });
+      card.addEventListener("click", (e) => e.stopPropagation());
+      doc.addEventListener("keydown", onKey, true);
+      row.append(no, yes);
+      card.append(head, why, cost, row);
+      ov.appendChild(card);
+      container.appendChild(ov);
+      try {
+        yes.focus();
+      } catch {
+      }
+    } catch {
+      resolve(false);
+    }
+  });
+}
+
 // src/index.ts
 function registerCityTable(packed) {
   L3(packed);
@@ -479,6 +576,7 @@ export {
   SELECTION_ACTIVE_CLASS,
   XFILTER_REFRESH_EVENT,
   actionFor,
+  askApplyImprovements,
   bareBase64,
   buildRenderPayload,
   buildReviewWire,

package/dist/types/index.d.ts

@@ -10,3 +10,4 @@ export { createMarkResolver, type MarkResolver, type MarkResolverEnv } from "./s
 export { planTrivialChart, compileTrivialSource, type TrivialPlan, type TrivialShapeKind } from "./trivial";
 export { captureSvgSnapshot, svgToDataUrl, svgNaturalSize, rasterizeSvgToPngDataUrl, type SnapshotOptions } from "./snapshot";
 export { shouldReview, buildReviewWire, bareBase64, actionFor, type ReviewGate, type ReviewWire, type ReviewVerdict, type ReviewAction } from "./review";
+export { askApplyImprovements, type ReviewDialogOptions, type ReviewDialogText } from "./reviewDialog";

package/dist/types/reviewDialog.d.ts

@@ -0,0 +1,23 @@
+export interface ReviewDialogText {
+    title?: string;
+    /** Shown when the judge supplied no reason. The judge's reason always wins when present. */
+    fallbackReason?: string;
+    cost?: string;
+    decline?: string;
+    accept?: string;
+}
+export interface ReviewDialogOptions {
+    /** Overlay element id. Stable so tests and log-readers can find the same dialog anywhere. */
+    id?: string;
+    /** Host chrome. When given they are ADDED to the inline baseline, so a host theme (e.g. a
+     *  dark-mode card background) can win where it should while the layout stays put. */
+    overlayClass?: string;
+    cardClass?: string;
+    /** The too-small-to-ask floor. Below it the dialog is a clipped smear over the chart, and
+     *  asking illegibly for permission to spend money is worse than not asking. */
+    minWidth?: number;
+    minHeight?: number;
+    text?: ReviewDialogText;
+}
+/** Resolves true ONLY on a deliberate click of Apply. Never rejects. */
+export declare function askApplyImprovements(container: HTMLElement, reason: string, opts?: ReviewDialogOptions): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.5.28",
+  "version": "0.5.29",
   "description": "Run a BIC-generated D3 chart in any web host: compiles the generated render() function, applies the shared option defaults, resolves mark clicks (through tooltip overlays), owns the selection affordance, and translates row indices between cross-filtered charts. The same contract the BIC Power BI visual implements, minus Power BI. React bindings at @bicharts/chart-host/react.",
   "license": "Apache-2.0",
   "type": "module",