@bicharts/chart-host 0.5.50 → 0.5.52

package/README.md

@@ -185,8 +185,17 @@ visual — override them if you want a different look:
 ```css
 .bic-chart-host { --lch-dim-opacity: 0.25; }
 .bic-chart-host.lch-has-selection .d3-mark:not(.lch-mark-selected) { opacity: var(--lch-dim-opacity); }
+.bic-chart-host.lch-has-selection .d3-lift-selected .d3-mark.lch-mark-selected { opacity: 1; stroke-opacity: 1; fill-opacity: 1; }
 ```
 
+The second rule is opt-in. The affordance is dim-only — a selected mark is merely *exempt* from
+the dim and keeps whatever paint the chart gave it — so a chart that rests its marks below full
+opacity by design (a parallel-coordinates plot drawing every line at 0.38 so overplotting reads)
+would show its selected lines at 38%, which the eye reads as dimmed. Such a chart stamps
+`d3-lift-selected` on the group holding those marks, and inside that group a selected mark is
+painted at full opacity. Undeclared charts are unchanged, so alpha used as an encoding (a depth
+cue, a hierarchy level) is never flattened by a fix meant for another chart.
+
 ## Architecture — three layers, and why it matters if you contribute
 
 Read this before adding code. The package has **three** concerns, and they are independent.

package/dist/{chunk-B4RZSFAC.mjs → chunk-ZU7QEK3A.mjs}

@@ -6,11 +6,12 @@ import {
 } from "./chunk-A2GMXZP7.mjs";
 
 // src/contract.ts
-var HOST_CONTRACT_VERSION = "1.6.0";
+var HOST_CONTRACT_VERSION = "1.7.0";
 var GEO_POINT_PRECISIONS = ["latlon", "city", "zip3", "state", "country"];
 var MARK_CLASS = "d3-mark";
 var LEGEND_MARK_CLASS = "d3-legend-mark";
 var AXIS_FILTER_CLASS = "d3-axis-filter";
+var LIFT_SELECTED_CLASS = "d3-lift-selected";
 var ROW_IDX_ATTR = "data-row-idx";
 var XFILTER_REFRESH_EVENT = "llm-xfilter-refresh";
 var CONTAINER_SLOT_ANIM_STOP = "__llmAnimStop";
@@ -1353,6 +1354,17 @@ function createChartHost(container, config) {
 .${HOST_CONTAINER_CLASS}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}:not(.${MARK_SELECTED_CLASS}):not([${ROW_IDX_ATTR}=""]) {
     opacity: var(${DIM_OPACITY_VAR}, ${DIM_OPACITY_DEFAULT}) !important;
 }
+/* THE LIFT, BY DECLARATION ONLY. Dimming the others is all the rule above does; a selected
+   mark keeps whatever paint its chart gave it. A chart that draws every mark pale on purpose
+   (a parallel-coordinates plot at 0.38 so overplotting reads) therefore shows its SELECTED
+   lines at 38% - the same eye-reading as dimmed. Inside a group the chart stamps
+   ${LIFT_SELECTED_CLASS} on, a selected mark is painted at full opacity. Opacity only, never
+   stroke geometry. Undeclared charts are byte-identical, which is what keeps an alpha
+   ENCODING (a depth cue, a hierarchy level) from being flattened by a fix meant for one. */
+.${HOST_CONTAINER_CLASS}.${SELECTION_ACTIVE_CLASS} .${LIFT_SELECTED_CLASS} .${MARK_CLASS}.${MARK_SELECTED_CLASS},
+.${HOST_CONTAINER_CLASS}.${SELECTION_ACTIVE_CLASS} .${MARK_CLASS}.${LIFT_SELECTED_CLASS}.${MARK_SELECTED_CLASS} {
+    opacity: 1 !important; stroke-opacity: 1 !important; fill-opacity: 1 !important;
+}
 .${HOST_CONTAINER_CLASS} .${LEGEND_MARK_CLASS} { cursor: pointer; }
 /* An axis/group header that filters when clicked LOOKS like inert text, and until it is
    marked there is no way to tell a landed filter from a dead label \u2014 the report reads
@@ -1566,6 +1578,7 @@ export {
   MARK_CLASS,
   LEGEND_MARK_CLASS,
   AXIS_FILTER_CLASS,
+  LIFT_SELECTED_CLASS,
   ROW_IDX_ATTR,
   XFILTER_REFRESH_EVENT,
   CONTAINER_SLOT_ANIM_STOP,

package/dist/index.mjs

@@ -27,6 +27,7 @@ import {
   HOST_CONTRACT_VERSION,
   L3,
   LEGEND_MARK_CLASS,
+  LIFT_SELECTED_CLASS,
   MARK_CLASS,
   MARK_SELECTED_CLASS,
   Qt,
@@ -56,7 +57,7 @@ import {
   resolveOptions,
   sessionViewStateProvider,
   stripEsmExports
-} from "./chunk-B4RZSFAC.mjs";
+} from "./chunk-ZU7QEK3A.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
 // src/trivial.ts
@@ -891,6 +892,7 @@ export {
   HOST_CONTAINER_CLASS,
   HOST_CONTRACT_VERSION,
   LEGEND_MARK_CLASS,
+  LIFT_SELECTED_CLASS,
   MARK_CLASS,
   MARK_SELECTED_CLASS,
   ROW_IDX_ATTR,

package/dist/react.mjs

@@ -4,7 +4,7 @@ import {
   createChartHost,
   geoFromCache,
   loadGeo
-} from "./chunk-B4RZSFAC.mjs";
+} from "./chunk-ZU7QEK3A.mjs";
 import "./chunk-A2GMXZP7.mjs";
 
 // src/react.tsx
@@ -49,6 +49,7 @@ function BicChart(props) {
     options,
     d3,
     geoKind,
+    viewState,
     id,
     filteredBy,
     respondsWith,
@@ -89,7 +90,7 @@ function BicChart(props) {
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el || !code && !renderFn || !data) return;
-    const host = createChartHost(el, { code, renderFn, data, options, d3, geoKind });
+    const host = createChartHost(el, { code, renderFn, data, options, d3, geoKind, viewState });
     hostRef.current = host;
     const off = host.selection.onChange((payloadIdxs, source) => {
       if (source === "host") return;

package/dist/types/contract.d.ts

@@ -1,4 +1,4 @@
-export declare const HOST_CONTRACT_VERSION = "1.6.0";
+export declare const HOST_CONTRACT_VERSION = "1.7.0";
 export type GeoPointPrecision = "latlon" | "city" | "zip3" | "state" | "country";
 /** Every valid tier, ordered most precise → coarsest. Runtime form of GeoPointPrecision. */
 export declare const GEO_POINT_PRECISIONS: readonly GeoPointPrecision[];
@@ -10,6 +10,7 @@ export type GeoMapKind = "north-america" | "world";
 export declare const MARK_CLASS = "d3-mark";
 export declare const LEGEND_MARK_CLASS = "d3-legend-mark";
 export declare const AXIS_FILTER_CLASS = "d3-axis-filter";
+export declare const LIFT_SELECTED_CLASS = "d3-lift-selected";
 export declare const ROW_IDX_ATTR = "data-row-idx";
 export declare const XFILTER_REFRESH_EVENT = "llm-xfilter-refresh";
 export declare const CONTAINER_SLOT_ANIM_STOP = "__llmAnimStop";

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type ColorScaleScope, type RenderOptions, type ViewStateProvider, } from "./contract";
+export { HOST_CONTRACT_VERSION, GEO_POINT_PRECISIONS, MARK_CLASS, LEGEND_MARK_CLASS, AXIS_FILTER_CLASS, ROW_IDX_ATTR, LIFT_SELECTED_CLASS, XFILTER_REFRESH_EVENT, CONTAINER_SLOT_ANIM_STOP, CONTAINER_SLOT_XF_CLEAR, CONTAINER_SLOT_INITIAL_XF_MARK, CONTAINER_SLOT_UI_STATE, HOST_CONTAINER_CLASS, SELECTION_ACTIVE_CLASS, MARK_SELECTED_CLASS, ACTIVE_TICK_CLASS, DIM_OPACITY_VAR, DIM_OPACITY_DEFAULT, chartOwnsTimeline, periodTickSuppressesFeedback, ANIM_PLAY_SPEED_DEFAULT, ANIM_PLAY_SPEED_MIN, ANIM_PLAY_SPEED_MAX, ANIM_LOOP_DELAY_DEFAULT, ANIM_LOOP_DELAY_MIN, ANIM_MAX_IDEAL_FRAMES_DEFAULT, ANIM_MAX_IDEAL_FRAMES_MIN, ANIM_MAX_IDEAL_FRAMES_MAX, COLOR_SCALE_SELF_CLAMP_PCT_DEFAULT, COLOR_SCALE_SELF_CLAMP_PCT_MIN, COLOR_SCALE_SELF_CLAMP_PCT_MAX, FLIP_MODE_DEFAULT, type GeoPointPrecision, type GeoMapKind, type TimelineStyle, type FlipMode, type ColorScaleScope, type RenderOptions, type ViewStateProvider, } from "./contract";
 export { resolveOptions, type ResolveOptionsInput } from "./defaults";
 export { loadGeo, geoFromCache, registerGeo, registerGeoAsset, geoAssetFor, clearGeoCache, type GeoAssetName, } from "./geoLazy";
 /** REPLACE the bundled city gazetteer with another packed table. Rarely needed — see the

package/dist/types/react.d.ts

@@ -15,6 +15,16 @@ export interface BicChartProps {
     d3: any;
     /** Attach the bundled geometry for this kind as options.geo (choropleth or basemap). */
     geoKind?: string;
+    /**
+     * WHERE THIS APP KEEPS THE CHART'S RESTING VIEW-STATE - a sort, an expanded row, a 3D
+     * camera. Omit for the session store parked on the container element, which is the right
+     * answer for most pages: the chart remembers while it is mounted and forgets on reload.
+     *
+     * Supply one to outlive the page. A React app is the host that most often has somewhere
+     * better to put it - localStorage, a URL query, a user profile on the server - and no
+     * default could pick between them, which is why this is a prop rather than a flag.
+     */
+    viewState?: ChartHostConfig["viewState"];
     /** Identity within a <BicChartGroup> — the key other charts filter by. */
     id?: string;
     /** Take this group member's selection as a filter on THIS chart's rows. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bicharts/chart-host",
-  "version": "0.5.50",
+  "version": "0.5.52",
   "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",