@bicharts/chart-host 0.5.28 → 0.5.30

package/dist/index.mjs

@@ -446,6 +446,129 @@ 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/qualifyGroups.ts
+function newQualifyGroupState() {
+  return { preview: false, previewClosed: false, projected: false, notRecommended: false };
+}
+function qualifyGroupHeadingFor(row, state) {
+  const preview = row.isPreview === true;
+  if (preview && !state.preview && !state.notRecommended) {
+    state.preview = true;
+    return "preview";
+  }
+  if (state.preview && !state.previewClosed && !preview) {
+    state.previewClosed = true;
+    return "main";
+  }
+  const projected = typeof row.viaProjection === "string" && row.viaProjection !== "";
+  if (projected && !state.projected && !state.notRecommended) {
+    state.projected = true;
+    return "projected";
+  }
+  if (row.recommended === false && !state.notRecommended) {
+    state.notRecommended = true;
+    return "notRecommended";
+  }
+  return null;
+}
+
 // src/index.ts
 function registerCityTable(packed) {
   L3(packed);
@@ -479,6 +602,7 @@ export {
   SELECTION_ACTIVE_CLASS,
   XFILTER_REFRESH_EVENT,
   actionFor,
+  askApplyImprovements,
   bareBase64,
   buildRenderPayload,
   buildReviewWire,
@@ -492,7 +616,9 @@ export {
   geoAssetFor,
   geoFromCache,
   loadGeo,
+  newQualifyGroupState,
   planTrivialChart,
+  qualifyGroupHeadingFor,
   rasterizeSvgToPngDataUrl,
   registerCityTable,
   registerGeo,

package/dist/types/index.d.ts

@@ -10,3 +10,5 @@ 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";
+export { qualifyGroupHeadingFor, newQualifyGroupState, type QualifyGroupRow, type QualifyGroupState, type QualifyGroupHeading, } from "./qualifyGroups";

package/dist/types/qualifyGroups.d.ts

@@ -0,0 +1,31 @@
+/** One row of a qualify result, in the only shape this logic cares about. */
+export interface QualifyGroupRow {
+    /** Newer type, deliberately unscorable. Server-stamped from the chart catalogue. */
+    isPreview?: boolean | null;
+    /** false = the ontology says a required channel cannot be satisfied by these fields. */
+    recommended?: boolean | null;
+    /** Non-empty when the type qualifies only against an AGGREGATED projection of the shape. */
+    viaProjection?: string | null;
+}
+/** Which heading to write BEFORE a row, if any. */
+export type QualifyGroupHeading = "preview" | "main" | "projected" | "notRecommended";
+/** Carried across the loop. Create one per render with `newQualifyGroupState()`. */
+export interface QualifyGroupState {
+    preview: boolean;
+    previewClosed: boolean;
+    projected: boolean;
+    notRecommended: boolean;
+}
+export declare function newQualifyGroupState(): QualifyGroupState;
+/**
+ * The heading (if any) that belongs immediately before `row`, MUTATING `state` so the caller's
+ * loop stays a plain for-of. At most one heading per row: the boundaries cannot coincide, since
+ * a row leaving the preview block is by definition not the row that opened it.
+ *
+ * ORDER OF THE CHECKS IS THE CONTRACT:
+ *  1. "preview" opens the block - but never once the not-recommended block has opened, because a
+ *     preview type the ontology ruled out is NOT floated and belongs where it landed.
+ *  2. "main" closes it, at the first row that is not preview. Emitted only if a block opened.
+ *  3. "projected" and 4. "notRecommended" are unchanged from the single-host original.
+ */
+export declare function qualifyGroupHeadingFor(row: QualifyGroupRow, state: QualifyGroupState): QualifyGroupHeading | null;

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.30",
   "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",