graphein 0.14.0 → 0.16.0

package/dist/index.d.ts

@@ -2969,6 +2969,14 @@ declare function prettyDate(value: Date | number): string;
  * `"2024-05-02"` renders `May 2, 2024` rather than the raw string.
  */
 declare function formatValue(value: unknown, hint?: string): string;
+/**
+ * Format one frame of a count-up / value tween so it never shows finer precision
+ * than the final value. With an explicit format the decimals are already pinned,
+ * so this defers to {@link formatValue}. With the smart default it mirrors the
+ * final value's own precision (a whole-number target stays whole) — otherwise a
+ * tween between integers would flash up to 6 decimals mid-animation.
+ */
+declare function formatCountUp(displayValue: number, finalValue: number, hint?: string): string;
 
 /**
  * Layout engine.
@@ -3873,6 +3881,14 @@ interface RenderOptions {
      * flat so the chrome isn't doubled. Optional; defaults to false.
      */
     frame?: boolean;
+    /**
+     * Publish the chart's effective config (spec minus `data`) to a
+     * `data-graphein-spec` DOM attribute on the root and re-render when an external
+     * tool edits it (merging the edit with the chart's in-memory data). Lets browser
+     * tools identify and live-edit the chart from the DOM. Optional; defaults to true.
+     * Set `false` to opt out (no attribute, no observer).
+     */
+    inspect?: boolean;
 }
 interface ChartInstance {
     /** Re-render with a new spec (data or config changes). */
@@ -3912,6 +3928,62 @@ declare global {
 }
 declare function render(target: HTMLElement | string, spec: ChartSpec, options?: RenderOptions): ChartInstance;
 
+/**
+ * DOM spec publishing — makes a rendered chart identifiable and editable by
+ * external tools (agents, devtools extensions, page scripts) straight from the
+ * DOM, with no JS handle required.
+ *
+ * Each chart/dashboard root carries:
+ *   - `data-graphein-spec`: the effective spec **minus its `data` array** (config
+ *     only), JSON-serialized. Compact, and no row-level data leaks into the DOM.
+ *   - `data-graphein-type`: the chart/dashboard `type`, so a tool can find and
+ *     filter Graphein visuals cheaply (`querySelectorAll('[data-graphein-spec]')`)
+ *     without parsing JSON.
+ *
+ * Editing `data-graphein-spec` is **two-way**: a {@link MutationObserver} reports
+ * the change and the runtime re-renders, merging the edited config with the
+ * chart's existing in-memory data (see the runtime's `onExternalEdit`). Malformed
+ * edits are ignored so a tool can't break a live chart mid-keystroke.
+ */
+/** Attribute holding the JSON-serialized config (spec without `data`). */
+declare const SPEC_ATTR = "data-graphein-spec";
+/** Attribute holding the chart/dashboard type, for cheap querying. */
+declare const TYPE_ATTR = "data-graphein-type";
+interface SpecLike {
+    type?: unknown;
+    data?: unknown;
+}
+/** A shallow copy of a spec without its top-level `data` array (config only). */
+declare function stripData<T extends SpecLike>(spec: T): Omit<T, 'data'>;
+/** Serialize a spec's config (its `data` excluded) to a JSON string. */
+declare function serializeSpec(spec: SpecLike): string;
+interface Inspector {
+    /**
+     * Publish `spec`'s config to the root. Writes `data-graphein-spec` only when the
+     * serialized config actually changed (so resize/animation frames don't churn the
+     * DOM), and refreshes `data-graphein-type`.
+     */
+    write(spec: SpecLike): void;
+    /** Stop observing. Leaves the published attributes in place. */
+    destroy(): void;
+}
+interface InspectorOptions {
+    /**
+     * Invoked when an external agent edits `data-graphein-spec` to a value the
+     * inspector didn't write, with the parsed config object. JSON parse failures and
+     * non-object payloads are swallowed (the last good render is kept).
+     */
+    onExternalEdit(config: Record<string, unknown>): void;
+}
+/**
+ * Wire spec-publishing + two-way editing onto a chart/dashboard root element.
+ *
+ * The {@link MutationObserver} is created only when the API exists, so this is a
+ * no-op observer in SSR/Node/headless environments (attributes are still set,
+ * which is harmless).
+ */
+declare function createInspector(root: HTMLElement, options: InspectorOptions): Inspector;
+
 /**
  * Dashboard auto-wiring — pure spec rewriting that turns a set of views into
  * cross-interacting ones by injecting `params` (sources), `highlight`, and
@@ -3955,6 +4027,13 @@ declare function wireViews(views: DashboardView[], interactions: 'auto' | 'none'
 interface RenderDashboardOptions {
     /** Share a bus with charts/dashboards outside this one. */
     store?: SelectionStore;
+    /**
+     * Publish each view's config (and the dashboard's) to `data-graphein-spec` DOM
+     * attributes and re-render on external edits, so browser tools can identify and
+     * live-edit the page from the DOM. Optional; defaults to true. Set `false` to opt
+     * out for the whole dashboard (propagates to every view).
+     */
+    inspect?: boolean;
 }
 interface DashboardInstance {
     /** Re-render with a new dashboard spec (keeps the shared store/selection). */
@@ -4017,4 +4096,4 @@ declare function renderDashboard(target: HTMLElement | string, spec: DashboardSp
  */
 declare const VERSION = "0.1.0";
 
-export { type AggOp, type AggregateOp, type AggregateTransform, type AnimateOptions, type AnimationConfig, type AnimationHandle, type Annotation, type AnySpec, type ArcOptions, type AreaOptions, type AreaPoint, type AreaSpec, type AxesConfig, type AxisConfig, type AxisInput, type BackingSize, type BandScale, type BandScaleOptions, type BarSpec, type BaseSlicerSpec, type BaseSpec, type BinLayout, type BinTransform, type BoxSpec, type BuildOptions, type BulletSpec, CARTESIAN_TYPES, CHART_TYPES, type CalculateTransform, type CalendarHeatmapSpec, CanvasLayer, type CanvasPillStyle, type CanvasTextCmd, type CartesianChartSpec, type CartesianInteractionBuilder, type CartesianModel, type CartesianRenderer, type CategoryInsights, type ChartInsights, type ChartInstance, type ChartSpec, type ChartSummary, type ChartType, type ChoroplethSpec, type ColorScale, type ColumnProfile, type ComboAxisModel, type ComboLayer, type ComboLayerModel, type ComboMark, type ComboModel, type ComboSide, type ComboSpec, type Comparable, type ConditionalFormat, type ContinuousScale, type ControllerSelect, type Curve, type CurveType, type CustomRenderer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, type DashboardCell, type DashboardInstance, type DashboardLayout, type DashboardResponsiveSpan, type DashboardSection, type DashboardSpec, type DashboardView, type DateRangeSlicerSpec, type Datum, type DecimateOptions, type Dimensions, type DropdownSlicerSpec, type DumbbellSpec, type EasingFunction, type Emphasis, type Encoding, type EntranceContext, ExpressionError, type Extent, FACETABLE_TYPES, FUNCTION_NAMES, type FacetConfig, type FacetLayout, type FacetPanel, type FieldDef, type FieldType, type FieldValue, type FillStyle, type FilterClause, type FilterPredicate, type FilterTransform, type FoldTransform, type Frame, type FrameInput, type FunnelSpec, type GaugeSpec, type GeoFeature, type GeoFeatureCollection, type GeoGeometry, type GeoMultiPolygon, type GeoPolygon, type GeoPosition, type GroupedMap, type HachureSegment, type HeadlessTarget, type HeatmapSpec, type HighlightConfig, type HistogramBin, type HistogramBinDatum, type HistogramModel, type HistogramSpec, type Hover, type IconRule, type Insets, type InsightFamily, type InsightOptions, InteractionController, type InteractionLink, type InteractionModel, type Interpolator, type JsonPatchOp, type KpiComparison, type KpiSpec, type LegendConfig, type LegendHitRegion, type LegendItem, type LegendPosition, type LegendSymbol, type LineOptions, type LineSpec, type LinearScaleOptions, type LintFinding, type ListSlicerSpec, type LiteralPredicate, type LogScaleOptions, type MapProjection, type MarkOptions, type MatrixSpec, type MatrixValueDef, NO_PADDING, type NumberFormatSpec, type OKLCH, type OKLab, type OverlayTextOpts, type PathSink, type PieLabels, type PieSpec, type PivotCell, type PivotFlatRow, type PivotHeaderNode, type PivotOptions, type PivotResult, type PivotValueDef, type Point, type PointRef, type PointScale, type PointScaleOptions, type PointSelection, type PositionedLegendItem, type RGBA, type RangeSelection, type RangeSlicerSpec, type RecommendOptions, type RecommendedChart, type Rect, type RegressionFit, type RenderContext, type RenderDashboardOptions, type RenderDiagnostic, type RenderOptions, type RenderReport, type RepairResult, type ReportInput, type ReportSeverity, type ResolvedEntrance, type ResolvedSeries, type ResolvedSketch, type Rng, type RoughContext, RoughPen, type RoughStyle, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, type SankeySpec, type ScaleConfig, type ScaleType, type ScatterInsights, type ScatterSpec, type SearchSlicerSpec, type SelectConfig, type SelectionChangeListener, type SelectionDef, type SelectionListener, type SelectionParam, type SelectionStore, type SelectionValue, type SeriesInsights, type SetSelection, type SharedScales, type Size, type SketchConfig, type SlicerSpec, type SlicerType, type SlopeSpec, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, type TableColumn, type TableSpec, type TextMetricsLite, type TextSelection, type ThemeColors, type ThemeFont, type ThemeInput, type ThemeTokens, type Tick, type TimeScaleOptions, type TimeUnit, type TimeUnitTransform, type TitleConfig, type TitleInput, Tooltip, type TooltipConfig, type TooltipContent, type TooltipRow, type Transform, type TreemapSpec, type TrendlineConfig, type UpdateContext, VERSION, type ValidationError, type ValidationResult, type ValueInsights, type ValueRef, type ValueRule, type WaterfallSpec, type WiredView, type XKind, type XModel, type YModel, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
+export { type AggOp, type AggregateOp, type AggregateTransform, type AnimateOptions, type AnimationConfig, type AnimationHandle, type Annotation, type AnySpec, type ArcOptions, type AreaOptions, type AreaPoint, type AreaSpec, type AxesConfig, type AxisConfig, type AxisInput, type BackingSize, type BandScale, type BandScaleOptions, type BarSpec, type BaseSlicerSpec, type BaseSpec, type BinLayout, type BinTransform, type BoxSpec, type BuildOptions, type BulletSpec, CARTESIAN_TYPES, CHART_TYPES, type CalculateTransform, type CalendarHeatmapSpec, CanvasLayer, type CanvasPillStyle, type CanvasTextCmd, type CartesianChartSpec, type CartesianInteractionBuilder, type CartesianModel, type CartesianRenderer, type CategoryInsights, type ChartInsights, type ChartInstance, type ChartSpec, type ChartSummary, type ChartType, type ChoroplethSpec, type ColorScale, type ColumnProfile, type ComboAxisModel, type ComboLayer, type ComboLayerModel, type ComboMark, type ComboModel, type ComboSide, type ComboSpec, type Comparable, type ConditionalFormat, type ContinuousScale, type ControllerSelect, type Curve, type CurveType, type CustomRenderer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, type DashboardCell, type DashboardInstance, type DashboardLayout, type DashboardResponsiveSpan, type DashboardSection, type DashboardSpec, type DashboardView, type DateRangeSlicerSpec, type Datum, type DecimateOptions, type Dimensions, type DropdownSlicerSpec, type DumbbellSpec, type EasingFunction, type Emphasis, type Encoding, type EntranceContext, ExpressionError, type Extent, FACETABLE_TYPES, FUNCTION_NAMES, type FacetConfig, type FacetLayout, type FacetPanel, type FieldDef, type FieldType, type FieldValue, type FillStyle, type FilterClause, type FilterPredicate, type FilterTransform, type FoldTransform, type Frame, type FrameInput, type FunnelSpec, type GaugeSpec, type GeoFeature, type GeoFeatureCollection, type GeoGeometry, type GeoMultiPolygon, type GeoPolygon, type GeoPosition, type GroupedMap, type HachureSegment, type HeadlessTarget, type HeatmapSpec, type HighlightConfig, type HistogramBin, type HistogramBinDatum, type HistogramModel, type HistogramSpec, type Hover, type IconRule, type Insets, type InsightFamily, type InsightOptions, type Inspector, type InspectorOptions, InteractionController, type InteractionLink, type InteractionModel, type Interpolator, type JsonPatchOp, type KpiComparison, type KpiSpec, type LegendConfig, type LegendHitRegion, type LegendItem, type LegendPosition, type LegendSymbol, type LineOptions, type LineSpec, type LinearScaleOptions, type LintFinding, type ListSlicerSpec, type LiteralPredicate, type LogScaleOptions, type MapProjection, type MarkOptions, type MatrixSpec, type MatrixValueDef, NO_PADDING, type NumberFormatSpec, type OKLCH, type OKLab, type OverlayTextOpts, type PathSink, type PieLabels, type PieSpec, type PivotCell, type PivotFlatRow, type PivotHeaderNode, type PivotOptions, type PivotResult, type PivotValueDef, type Point, type PointRef, type PointScale, type PointScaleOptions, type PointSelection, type PositionedLegendItem, type RGBA, type RangeSelection, type RangeSlicerSpec, type RecommendOptions, type RecommendedChart, type Rect, type RegressionFit, type RenderContext, type RenderDashboardOptions, type RenderDiagnostic, type RenderOptions, type RenderReport, type RepairResult, type ReportInput, type ReportSeverity, type ResolvedEntrance, type ResolvedSeries, type ResolvedSketch, type Rng, type RoughContext, RoughPen, type RoughStyle, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SPEC_ATTR, SR_ONLY_STYLE, type SankeySpec, type ScaleConfig, type ScaleType, type ScatterInsights, type ScatterSpec, type SearchSlicerSpec, type SelectConfig, type SelectionChangeListener, type SelectionDef, type SelectionListener, type SelectionParam, type SelectionStore, type SelectionValue, type SeriesInsights, type SetSelection, type SharedScales, type Size, type SketchConfig, type SlicerSpec, type SlicerType, type SlopeSpec, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, TYPE_ATTR, type TableColumn, type TableSpec, type TextMetricsLite, type TextSelection, type ThemeColors, type ThemeFont, type ThemeInput, type ThemeTokens, type Tick, type TimeScaleOptions, type TimeUnit, type TimeUnitTransform, type TitleConfig, type TitleInput, Tooltip, type TooltipConfig, type TooltipContent, type TooltipRow, type Transform, type TreemapSpec, type TrendlineConfig, type UpdateContext, VERSION, type ValidationError, type ValidationResult, type ValueInsights, type ValueRef, type ValueRule, type WaterfallSpec, type WiredView, type XKind, type XModel, type YModel, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createInspector, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatCountUp, formatDate, formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, serializeSpec, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, stripData, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };

package/dist/index.js

@@ -2300,6 +2300,19 @@ function formatValue(value, hint) {
   }
   return String(value);
 }
+function decimalPlaces2(n) {
+  if (!Number.isFinite(n) || Number.isInteger(n)) return 0;
+  const s = Math.abs(n).toString();
+  if (s.indexOf("e") !== -1 || s.indexOf("E") !== -1) return 6;
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
+function formatCountUp(displayValue, finalValue, hint) {
+  if (hint) return formatValue(displayValue, hint);
+  const dp = decimalPlaces2(finalValue);
+  const q = dp === 0 ? Math.round(displayValue) : Number(displayValue.toFixed(dp));
+  return formatValue(q, hint);
+}
 
 // src/pivot/pivot.ts
 var GRAND_TOTAL_LABEL = "Grand Total";
@@ -9611,7 +9624,7 @@ function drawKpi(surface, spec, tokens, size, context) {
   const displayValue = value != null && progress != null && progress < 1 ? from + (value - from) * progress : value;
   const displaySparkValues = morphSparkline(sparkValues, context?.sparklineFrom, progress);
   const valueText = value == null ? "\u2014" : formatValue(value, kpi.format);
-  const displayText = displayValue == null ? "\u2014" : formatValue(displayValue, kpi.format);
+  const displayText = displayValue == null ? "\u2014" : formatCountUp(displayValue, value, kpi.format);
   const fromText = context?.valueFrom != null && value != null ? formatValue(context.valueFrom, kpi.format) : valueText;
   const sizingText = fromText.length > valueText.length ? fromText : valueText;
   const pad3 = framed ? 0 : tokens.spacing.lg;
@@ -14627,7 +14640,7 @@ function drawGauge(surface, spec, tokens, size, context) {
   const sweepT = context?.sweepProgress ?? 1;
   const from = context?.valueFrom ?? min;
   const displayValue = from + (value - from) * sweepT;
-  const shownText = formatValue(displayValue, gauge.format);
+  const shownText = formatCountUp(displayValue, value, gauge.format);
   const valueAngle = toAngle(displayValue);
   strokePoints(ctx, pen, arcPoints(cx, cy, radius, Math.PI, 0), track, trackWidth);
   if (valueAngle < Math.PI) {
@@ -17450,6 +17463,54 @@ function onFontsReady(cb) {
   });
 }
 
+// src/runtime/inspect.ts
+var SPEC_ATTR = "data-graphein-spec";
+var TYPE_ATTR = "data-graphein-type";
+function stripData(spec) {
+  const { data: _data, ...config } = spec;
+  return config;
+}
+function serializeSpec(spec) {
+  return JSON.stringify(stripData(spec));
+}
+function createInspector(root, options) {
+  let lastWritten = null;
+  let disposed = false;
+  const write = (spec) => {
+    const type = typeof spec.type === "string" ? spec.type : "";
+    if (type) root.setAttribute(TYPE_ATTR, type);
+    const json = serializeSpec(spec);
+    if (json === lastWritten) return;
+    lastWritten = json;
+    root.setAttribute(SPEC_ATTR, json);
+  };
+  let observer;
+  if (typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(() => {
+      if (disposed) return;
+      const current = root.getAttribute(SPEC_ATTR);
+      if (current == null || current === lastWritten) return;
+      let parsed;
+      try {
+        parsed = JSON.parse(current);
+      } catch {
+        return;
+      }
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) return;
+      lastWritten = current;
+      options.onExternalEdit(parsed);
+    });
+    observer.observe(root, { attributes: true, attributeFilter: [SPEC_ATTR] });
+  }
+  return {
+    write,
+    destroy() {
+      disposed = true;
+      observer?.disconnect();
+    }
+  };
+}
+
 // src/runtime/render.ts
 var CANVAS_MARK_TYPES = /* @__PURE__ */ new Set([
   "line",
@@ -17460,7 +17521,16 @@ var CANVAS_MARK_TYPES = /* @__PURE__ */ new Set([
   "pie",
   "heatmap",
   "sankey",
-  "choropleth"
+  "choropleth",
+  "combo",
+  "histogram",
+  "funnel",
+  "treemap",
+  "waterfall",
+  "calendarHeatmap",
+  "slope",
+  "dumbbell",
+  "bullet"
 ]);
 var COUNT_UP_TYPES = /* @__PURE__ */ new Set(["kpi"]);
 var SWEEP_TYPES = /* @__PURE__ */ new Set(["pie", "gauge"]);
@@ -17727,6 +17797,7 @@ function render(target, spec, options) {
       interaction.setSelect(null);
     }
     applyA11y(surface, currentSpec);
+    inspector?.write(currentSpec);
     lastReport = facetRpt ?? buildRenderReport({
       type,
       spec: currentSpec,
@@ -17776,6 +17847,46 @@ function render(target, spec, options) {
     });
     observer.observe(container);
   }
+  const update = (next) => {
+    updateTransition?.cancel();
+    updateTransition = void 0;
+    for (const param of next.params ?? []) {
+      if (param.value !== void 0 && store.get(param.name) == null) {
+        store.set(param.name, param.value ?? null);
+      }
+    }
+    const prevType = currentSpec.type;
+    const prevW = surface.width;
+    const prevH = surface.height;
+    const anim = resolveUpdate(next.animation, {
+      reducedMotion: prefersReducedMotion(),
+      disabled: globalThis.__GRAPHEIN_DISABLE_ANIM === true
+    });
+    const wantFade = anim.enabled && CANVAS_MARK_TYPES.has(prevType) && CANVAS_MARK_TYPES.has(next.type);
+    const before = wantFade ? snapshotLayer(surface.marks) : void 0;
+    const prevValue = lastValue;
+    const prevCompare = lastCompare;
+    const prevSparkline = lastSparkline;
+    const wantValueTween = prevType === next.type && (COUNT_UP_TYPES.has(next.type) || SWEEP_TYPES.has(next.type)) && prevValue != null;
+    const wantSparklineTween = prevType === next.type && next.type === "kpi" && prevSparkline != null && prevSparkline.length > 0;
+    currentSpec = next;
+    draw(
+      false,
+      wantValueTween ? prevValue ?? void 0 : void 0,
+      wantValueTween ? prevCompare ?? void 0 : void 0,
+      wantValueTween || wantSparklineTween ? prevSparkline ?? void 0 : void 0
+    );
+    if (before && surface.width === prevW && surface.height === prevH && surface.marks.canvas.width === before.width && surface.marks.canvas.height === before.height) {
+      updateTransition = runUpdateCrossfade(surface, before, anim);
+    }
+  };
+  const onExternalEdit = (config) => {
+    if (destroyed) return;
+    const merged = { ...config, data: currentSpec.data };
+    if (validateSpec(merged).errors.length > 0) return;
+    update(merged);
+  };
+  const inspector = options?.inspect === false ? void 0 : createInspector(surface.root, { onExternalEdit });
   const unsubscribe = store.subscribe((name, value) => {
     for (const listener of [...hostListeners]) listener(name, value);
     if (destroyed) return;
@@ -17818,37 +17929,7 @@ function render(target, spec, options) {
       hostListeners.delete(listener);
     },
     update(next) {
-      updateTransition?.cancel();
-      updateTransition = void 0;
-      for (const param of next.params ?? []) {
-        if (param.value !== void 0 && store.get(param.name) == null) {
-          store.set(param.name, param.value ?? null);
-        }
-      }
-      const prevType = currentSpec.type;
-      const prevW = surface.width;
-      const prevH = surface.height;
-      const anim = resolveUpdate(next.animation, {
-        reducedMotion: prefersReducedMotion(),
-        disabled: globalThis.__GRAPHEIN_DISABLE_ANIM === true
-      });
-      const wantFade = anim.enabled && CANVAS_MARK_TYPES.has(prevType) && CANVAS_MARK_TYPES.has(next.type);
-      const before = wantFade ? snapshotLayer(surface.marks) : void 0;
-      const prevValue = lastValue;
-      const prevCompare = lastCompare;
-      const prevSparkline = lastSparkline;
-      const wantValueTween = prevType === next.type && (COUNT_UP_TYPES.has(next.type) || SWEEP_TYPES.has(next.type)) && prevValue != null;
-      const wantSparklineTween = prevType === next.type && next.type === "kpi" && prevSparkline != null && prevSparkline.length > 0;
-      currentSpec = next;
-      draw(
-        false,
-        wantValueTween ? prevValue ?? void 0 : void 0,
-        wantValueTween ? prevCompare ?? void 0 : void 0,
-        wantValueTween || wantSparklineTween ? prevSparkline ?? void 0 : void 0
-      );
-      if (before && surface.width === prevW && surface.height === prevH && surface.marks.canvas.width === before.width && surface.marks.canvas.height === before.height) {
-        updateTransition = runUpdateCrossfade(surface, before, anim);
-      }
+      update(next);
     },
     resize() {
       draw(false);
@@ -17860,6 +17941,7 @@ function render(target, spec, options) {
       entrance?.cancel();
       updateTransition?.cancel();
       observer?.disconnect();
+      inspector?.destroy();
       interaction?.destroy();
       surface.destroy();
     }
@@ -18343,6 +18425,7 @@ function renderDashboard(target, spec, options) {
   const hostListeners = /* @__PURE__ */ new Set();
   let root;
   let resizeObs;
+  let dashboardInspector;
   let destroyed = false;
   let sourceCells = /* @__PURE__ */ new Map();
   const syncSourceCell = (name, value) => {
@@ -18434,7 +18517,7 @@ function renderDashboard(target, spec, options) {
     const mount = (host, view) => {
       const finalSpec = inheritInto(view.spec, currentSpec, tokens, !!(view.title || view.subtitle));
       try {
-        instances.push(render(host, finalSpec, { store, frame: view.frame ?? true }));
+        instances.push(render(host, finalSpec, { store, frame: view.frame ?? true, inspect: options?.inspect }));
       } catch (err) {
         host.textContent = String(err);
       }
@@ -18717,12 +18800,28 @@ function renderDashboard(target, spec, options) {
       });
       resizeObs.observe(root);
     }
+    if (options?.inspect !== false && root) {
+      dashboardInspector = createInspector(root, { onExternalEdit: applyExternalEdit });
+      dashboardInspector.write(currentSpec);
+    }
+  };
+  const applyExternalEdit = (config) => {
+    if (destroyed) return;
+    const merged = { ...config, data: currentSpec.data };
+    if (validateSpec(merged).errors.length > 0) return;
+    teardown();
+    currentSpec = merged;
+    build();
   };
   const teardown = () => {
     if (resizeObs) {
       resizeObs.disconnect();
       resizeObs = void 0;
     }
+    if (dashboardInspector) {
+      dashboardInspector.destroy();
+      dashboardInspector = void 0;
+    }
     for (const inst of instances) inst.destroy();
     instances.length = 0;
     if (root && root.parentNode) root.parentNode.removeChild(root);
@@ -18948,6 +19047,6 @@ function renderToContext(target, spec) {
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, NO_PADDING, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
+export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, NO_PADDING, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SPEC_ATTR, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, TYPE_ATTR, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createInspector, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatCountUp, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, serializeSpec, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, stripData, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map