@opendata-ai/openchart-engine 8.0.0-rc.1 → 8.0.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "8.0.0-rc.1",
+  "version": "8.0.0-rc.10",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "8.0.0-rc.1",
+    "@opendata-ai/openchart-core": "8.0.0-rc.10",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -554,6 +554,29 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
     ],
   ],
   "watermark": false,
+  "xInvert": {
+    "bottomData": 50,
+    "bottomPixel": 577,
+    "scaleType": "linear",
+    "topData": 0,
+    "topPixel": 36.942,
+  },
+  "yInvert": {
+    "bottomData": 0,
+    "bottomPixel": 60.9,
+    "domain": [
+      "A",
+      "B",
+      "C",
+    ],
+    "positions": [
+      297.33805970149257,
+      208.95000000000002,
+      120.56194029850745,
+    ],
+    "topData": 0,
+    "topPixel": 357,
+  },
 }
 `;
 
@@ -1608,6 +1631,20 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
   },
   "tooltipDescriptors": [],
   "watermark": false,
+  "xInvert": {
+    "bottomData": 1609459200000,
+    "bottomPixel": 651.76115,
+    "scaleType": "time",
+    "topData": 1577836800000,
+    "topPixel": 47,
+  },
+  "yInvert": {
+    "bottomData": 40,
+    "bottomPixel": 105.2,
+    "scaleType": "linear",
+    "topData": 8,
+    "topPixel": 410.59999999999997,
+  },
 }
 `;
 
@@ -2335,5 +2372,30 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
     ],
   ],
   "watermark": true,
+  "xInvert": {
+    "bottomData": 0,
+    "bottomPixel": 577,
+    "domain": [
+      "A",
+      "B",
+      "C",
+      "D",
+    ],
+    "positions": [
+      122.67875862068962,
+      246.30358620689654,
+      369.92841379310346,
+      493.55324137931035,
+    ],
+    "topData": 0,
+    "topPixel": 39.232,
+  },
+  "yInvert": {
+    "bottomData": 70,
+    "bottomPixel": 60.9,
+    "scaleType": "linear",
+    "topData": 0,
+    "topPixel": 297.2,
+  },
 }
 `;

package/src/__tests__/annotation-behavior.test.ts

@@ -283,6 +283,64 @@ describe('a callout lands where the anchor says it should', () => {
   });
 });
 
+// --- auto-placement commits to the side it chose ---------------------------
+
+describe('an auto-placed callout on the right edge anchors its text to the left', () => {
+  // A point at the far right edge forces the scored search to place the block on
+  // its LEFT, which it signals by returning `textAnchor: 'end'`. The anchor must
+  // actually be STAMPED on the label (and its subtitle): with a `start` anchor the
+  // same origin makes the text extend right, over the data point. This is the
+  // mutation the suite used to miss -- deleting the anchor assignment in
+  // `moveAnnotationBy` kept every test green, because the only test that looked at
+  // the anchor compared it against bounds derived from the same (wrong) anchor.
+  test('the search picks the left side and the anchor stamp reaches the whole block', () => {
+    const data = Array.from({ length: 21 }, (_, i) => ({
+      x: `2024-01-${String(i + 1).padStart(2, '0')}`,
+      y: 40 + 2 * i,
+    }));
+    const layout: ChartLayout = compileChart(
+      {
+        mark: 'line',
+        data,
+        encoding: {
+          x: { field: 'x', type: 'temporal' },
+          y: { field: 'y', type: 'quantitative' },
+        },
+        annotations: [
+          {
+            type: 'text',
+            x: data[20].x,
+            y: data[20].y,
+            text: 'Peak of the series',
+            subtitle: 'highest reading of the month',
+          },
+        ],
+      } as ChartSpec,
+      { width: 800, height: 460 },
+    );
+
+    const a = layout.annotations![0];
+    const label = a.label!;
+    const bounds = label.bounds!;
+    const dot = a.dot!;
+
+    // The search really chose the left side. If a future engine change makes it
+    // pick another candidate, fail loudly here rather than silently stop guarding.
+    expect(label.style.textAnchor).toBe('end');
+
+    // An end-anchored box extends LEFT of its origin.
+    expect(Math.abs(bounds.x + bounds.width - label.x)).toBeLessThanOrEqual(1);
+
+    // The whole block sits clear of the point, on its left.
+    expect(bounds.x + bounds.width).toBeLessThan(dot.x);
+
+    // The anchor stamp reaches the subtitle too -- `moveAnnotationBy` applies it
+    // to both lines, and an unstamped subtitle would jut right from a shared origin.
+    expect(a.subtitle!.style.textAnchor).toBe('end');
+    expect(a.subtitle!.x).toBeCloseTo(label.x, 0);
+  });
+});
+
 // --- the leader connects the block to the point --------------------------
 
 describe('the leader actually connects the words to the data', () => {
@@ -362,6 +420,29 @@ describe('the leader actually connects the words to the data', () => {
     expect(asserted).toBeGreaterThan(30);
   });
 
+  test("the author's connectorOffset.from survives auto-placement", () => {
+    // `connectorOffset.to` is baked into `connector.endpoint`, so it survives every
+    // later geometry rebuild for free. `from` used to be applied once at resolve and
+    // then thrown away by `refreshConnector` -- so on an auto-placed annotation
+    // (which ALWAYS moves in Pass 2) the author's nudge did exactly nothing, and an
+    // edit-mode drag of the from handle was a silent no-op after re-render.
+    const control = first([{ type: 'text', x: 'Mar', y: 30, text: 'Peak' }]);
+    const nudged = first([
+      {
+        type: 'text',
+        x: 'Mar',
+        y: 30,
+        text: 'Peak',
+        connectorOffset: { from: { dx: 15, dy: 9 } },
+      },
+    ]);
+
+    const from = nudged.label!.connector!.from;
+    const controlFrom = control.label!.connector!.from;
+    expect(from.x - controlFrom.x).toBeCloseTo(15, 5);
+    expect(from.y - controlFrom.y).toBeCloseTo(9, 5);
+  });
+
   test('a drop-line hangs straight down from the words to the point', () => {
     const a = first([{ type: 'text', x: 'Mar', y: 30, text: 'Peak', connector: 'drop-line' }]);
     const c = a.label!.connector!;
@@ -718,4 +799,54 @@ describe('callouts are anchored in the data, not in pixels', () => {
     expect(all).toHaveLength(1);
     expect(all[0].label!.text).toBe('Real');
   });
+
+  test('a dropped annotation does not shift which of its neighbours counts as pinned', () => {
+    // The resolved array is a FILTERED view of the spec array: dropping spec 0
+    // shifts every later annotation down one slot. Anything that reaches back to
+    // the authored spec (collision resolution's "does it carry an offset?" check)
+    // must key on the stamped `specIndex`, not on resolved position -- indexed by
+    // position, the pinned annotation reads the dropped spec's (offset-less) slot,
+    // loses its pin, and gets displaced off its authored spot.
+    const bogus: Ann = { type: 'text', x: 'NotAMonth', y: 30, text: 'Bogus' };
+    const pinned: Ann = {
+      type: 'text',
+      x: 'Mar',
+      y: 30,
+      text: 'Pinned block here',
+      anchor: 'top',
+      offset: { dy: -25 },
+    };
+    const movable: Ann = {
+      type: 'text',
+      x: 'Mar',
+      y: 30,
+      text: 'Other block here',
+      anchor: 'top',
+    };
+
+    const resolved = annotationsFor([bogus, pinned, movable]);
+
+    // The bogus one is dropped; the survivors keep their spec identities.
+    expect(resolved).toHaveLength(2);
+    expect(resolved.map((a) => a.specIndex)).toEqual([1, 2]);
+
+    const [pinnedResolved, movableResolved] = resolved;
+
+    // Pinning held despite the collision: same spot as when compiled alone.
+    const pinnedSolo = first([pinned]);
+    expect(pinnedResolved.label!.y - pinnedResolved.dot!.y).toBeCloseTo(
+      pinnedSolo.label!.y - pinnedSolo.dot!.y,
+      0,
+    );
+
+    // And the movable one actually moved -- without this half, the test passes
+    // on a pair that never collided in the first place.
+    const movableSolo = first([movable]);
+    expect(movableResolved.label!.y - movableResolved.dot!.y).not.toBeCloseTo(
+      movableSolo.label!.y - movableSolo.dot!.y,
+      1,
+    );
+
+    expect(overlaps(pinnedResolved.bounds!, movableResolved.bounds!)).toBe(false);
+  });
 });

package/src/__tests__/facet.test.ts

@@ -167,6 +167,7 @@ describe('compileChart with facet', () => {
   it('uses shared scales by default', () => {
     const layout = compileChart(facetSpec, { width: 600, height: 400 });
     expect(layout.facet!.sharedScales).toBe(true);
+    expect(layout.facet!.direction).toBe('wrap');
   });
 
   it('supports independent y scales via resolve', () => {
@@ -213,3 +214,146 @@ describe('compileChart with facet', () => {
     expect(layout.facet).toBeUndefined();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Row faceting
+// ---------------------------------------------------------------------------
+
+const rowSpec = {
+  mark: 'bar' as const,
+  data: facetData,
+  encoding: {
+    x: { field: 'value', type: 'quantitative' as const },
+    y: { field: 'country', type: 'nominal' as const },
+    row: { field: 'year', type: 'nominal' as const },
+  },
+};
+
+describe('compileChart with row faceting', () => {
+  it('produces facet layout with direction row', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 400 });
+    expect(layout.facet).toBeDefined();
+    expect(layout.facet!.direction).toBe('row');
+    expect(layout.facet!.columns).toBe(1);
+  });
+
+  it('creates one panel per unique row value', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 400 });
+    expect(layout.facet!.panels).toHaveLength(2);
+  });
+
+  it('defaults x to shared, y to independent', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 400 });
+    expect(layout.facet!.sharedScales).toBe(false);
+  });
+
+  it('strips x-axis from non-bottom panels', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 600 });
+    const panels = layout.facet!.panels;
+    expect(panels[0].axes.x?.ticks ?? []).toHaveLength(0);
+    const bottomPanel = panels[panels.length - 1];
+    expect(bottomPanel.axes.x?.ticks.length).toBeGreaterThan(0);
+  });
+
+  it('keeps y-axis on all panels', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 600 });
+    for (const panel of layout.facet!.panels) {
+      expect(panel.axes.y).toBeDefined();
+    }
+  });
+
+  it('left-aligns headers', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 400 });
+    for (const panel of layout.facet!.panels) {
+      expect(panel.header.textAnchor).toBe('start');
+      expect(panel.header.x).toBe(panel.area.x);
+    }
+  });
+
+  it('allows overriding y to shared via resolve', () => {
+    const spec = {
+      ...rowSpec,
+      resolve: { scale: { y: 'shared' as const } },
+    };
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.facet!.sharedScales).toBe(true);
+  });
+
+  it('each panel has marks', () => {
+    const layout = compileChart(rowSpec, { width: 600, height: 600 });
+    for (const panel of layout.facet!.panels) {
+      expect(panel.marks.length).toBeGreaterThan(0);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Column faceting
+// ---------------------------------------------------------------------------
+
+const colSpec = {
+  mark: 'bar' as const,
+  data: facetData,
+  encoding: {
+    x: { field: 'country', type: 'nominal' as const },
+    y: { field: 'value', type: 'quantitative' as const },
+    column: { field: 'year', type: 'nominal' as const },
+  },
+};
+
+describe('compileChart with column faceting', () => {
+  it('produces facet layout with direction column', () => {
+    const layout = compileChart(colSpec, { width: 800, height: 400 });
+    expect(layout.facet).toBeDefined();
+    expect(layout.facet!.direction).toBe('column');
+    expect(layout.facet!.columns).toBe(2);
+  });
+
+  it('defaults y to shared, x to independent', () => {
+    const layout = compileChart(colSpec, { width: 800, height: 400 });
+    expect(layout.facet!.sharedScales).toBe(false);
+    // Verify the directional resolve: y-axis ticks should be stripped from
+    // non-leftmost panels (shared y), x-axis ticks should appear on all panels
+    // (independent x).
+    const panels = layout.facet!.panels;
+    if (panels.length > 1) {
+      const rightPanel = panels[1];
+      expect(rightPanel.axes.y?.ticks ?? []).toHaveLength(0);
+    }
+    const leftPanel = panels[0];
+    expect(leftPanel.axes.y?.ticks?.length).toBeGreaterThan(0);
+  });
+
+  it('strips y-axis from non-leftmost panels', () => {
+    const layout = compileChart(colSpec, { width: 800, height: 400 });
+    const panels = layout.facet!.panels;
+    expect(panels[0].axes.y?.ticks?.length).toBeGreaterThan(0);
+    if (panels.length > 1) {
+      expect(panels[1].axes.y?.ticks ?? []).toHaveLength(0);
+    }
+  });
+
+  it('allows overriding x to shared via resolve', () => {
+    const spec = {
+      ...colSpec,
+      resolve: { scale: { x: 'shared' as const } },
+    };
+    const layout = compileChart(spec, { width: 800, height: 400 });
+    expect(layout.facet!.sharedScales).toBe(true);
+  });
+
+  it('centers headers (not left-aligned)', () => {
+    const layout = compileChart(colSpec, { width: 800, height: 400 });
+    for (const panel of layout.facet!.panels) {
+      expect(panel.header.textAnchor).toBeUndefined();
+    }
+  });
+
+  it('creates panels in a single row', () => {
+    const layout = compileChart(colSpec, { width: 800, height: 400 });
+    for (const panel of layout.facet!.panels) {
+      expect(panel.header.text).toBeTruthy();
+    }
+    expect(layout.facet!.panels).toHaveLength(2);
+  });
+});

package/src/annotations/geometry.ts

@@ -349,7 +349,13 @@ export function refreshConnector(
   const exit = connectorExit(bounds, endpoint.x, endpoint.y);
   if (!exit) return undefined;
 
-  const from = { x: exit.x, y: exit.y };
+  // Re-apply the author's from-end nudge BEFORE the pullback, so the pullback
+  // direction is measured from the real origin -- exactly as
+  // `resolveTextAnnotation` does on first resolve.
+  const from = {
+    x: exit.x + (connector.fromOffset?.dx ?? 0),
+    y: exit.y + (connector.fromOffset?.dy ?? 0),
+  };
 
   const gap = connectorPullbackGap(markerRadius, connector.arrow);
   const cdx = endpoint.x - from.x;

package/src/annotations/resolve-text.ts

@@ -351,6 +351,12 @@ export function resolveTextAnnotation(
           from,
           to,
           endpoint,
+          fromOffset: annotation.connectorOffset?.from
+            ? {
+                dx: annotation.connectorOffset.from.dx ?? 0,
+                dy: annotation.connectorOffset.from.dy ?? 0,
+              }
+            : undefined,
           stroke: connectorStroke,
           style: connectorStyle,
           arrow: connectorArrow,

package/src/compile/layer.ts

@@ -611,6 +611,10 @@ function buildPrimarySpec(leaves: ChartSpec[], layerSpec: LayerSpec): ChartSpec
     ...leaves[0],
     data: allData,
     chrome: layerSpec.chrome ?? leaves[0].chrome,
+    // Annotations come from the parent LayerSpec when present, otherwise
+    // the first flattened leaf's. Later leaves' annotations are silently
+    // dropped. The dual-axis path (compileLayerIndependent) explicitly
+    // clears the secondary axis spec's annotations.
     annotations: layerSpec.annotations ?? leaves[0].annotations,
     labels: layerSpec.labels ?? leaves[0].labels,
     legend: layerSpec.legend ?? leaves[0].legend,

package/src/compile/size-scale.ts

@@ -45,6 +45,8 @@ export const SIZE_SCALE_DEFAULTS = {
    * linear in font size, where a disc reads by its area.
    */
   text: { curve: 'linear', range: [11, 32] },
+  /** Map point dots. sqrt for area-proportional, tighter range than scatter. */
+  mapPoint: { curve: 'sqrt', range: [3, 20] },
 } as const satisfies Record<string, { curve: SizeCurve; range: readonly [number, number] }>;
 
 /** Size-scale options for a mark, or null when the mark has no size channel. */

package/src/compile/spec-sugar.ts

@@ -449,7 +449,16 @@ function expandChannelSugar(
 // ---------------------------------------------------------------------------
 
 /** Channels whose fields group the count aggregate (mirrors VL's implicit groupby). */
-const COUNT_GROUP_CHANNELS = ['x', 'y', 'color', 'detail', 'strokeDash', 'facet'] as const;
+const COUNT_GROUP_CHANNELS = [
+  'x',
+  'y',
+  'color',
+  'detail',
+  'strokeDash',
+  'facet',
+  'row',
+  'column',
+] as const;
 
 /**
  * Desugar `{ aggregate: 'count' }` (no field) on x/y into an explicit

package/src/compile.ts

@@ -28,6 +28,8 @@ import type {
   ResolvedAnimation,
   ResolvedAnnotation,
   ResolvedTheme,
+  ResolveMode,
+  ScaleInvert,
   TableLayout,
 } from '@opendata-ai/openchart-core';
 import {
@@ -84,7 +86,7 @@ import { computeDimensions } from './layout/dimensions';
 import { computeFacetGrid, facetMinHeight, MIN_PANEL_HEIGHT } from './layout/facet';
 import { computeGridlines } from './layout/gridlines';
 import { createMeasureFn, resolveLayoutPlan } from './layout/plan';
-import { computeScales } from './layout/scales';
+import { computeScales, type ResolvedScale } from './layout/scales';
 import { placeLegend } from './legend/compute';
 import { placeSizeLegend } from './legend/size';
 import { compileSankey as compileSankeyImpl } from './sankey/compile-sankey';
@@ -187,6 +189,52 @@ function applySparklineDefaults(
   return { ...spec, markDef: newMarkDef };
 }
 
+/**
+ * Extract scale inversion anchors from a resolved scale so the vanilla layer
+ * can convert pixel positions back to data-space values without holding the
+ * d3 scale object. Generalizes the YouDrawItYInvert precedent to any axis.
+ */
+function resolveScaleInvert(resolved: ResolvedScale | undefined): ScaleInvert | undefined {
+  if (!resolved) return undefined;
+  const { scale, type } = resolved;
+
+  // Band / point scales: snap to nearest domain value
+  if (type === 'band' || type === 'point') {
+    const domain = (scale as { domain(): string[] }).domain() as (string | number)[];
+    const positions = domain.map((v) => {
+      const pos = (scale as (v: string | number) => number | undefined)(v) ?? 0;
+      return type === 'band' ? pos + (scale as { bandwidth(): number }).bandwidth() / 2 : pos;
+    });
+    const range = (scale as { range(): number[] }).range();
+    return {
+      topPixel: range[0],
+      bottomPixel: range[range.length - 1],
+      topData: 0,
+      bottomData: 0,
+      domain,
+      positions,
+    };
+  }
+
+  // Continuous scales (linear, time, log, pow, sqrt, symlog)
+  const invert = (scale as { invert?: (px: number) => unknown }).invert;
+  if (typeof invert !== 'function') return undefined;
+
+  const range = (scale as { range(): number[] }).range();
+  const topPx = range[0];
+  const bottomPx = range[range.length - 1];
+  const topVal = invert.call(scale, topPx);
+  const bottomVal = invert.call(scale, bottomPx);
+
+  // For time scales, convert Date to epoch ms
+  const topData = topVal instanceof Date ? +topVal : Number(topVal);
+  const bottomData = bottomVal instanceof Date ? +bottomVal : Number(bottomVal);
+  if (!Number.isFinite(topData) || !Number.isFinite(bottomData)) return undefined;
+
+  const scaleType = type as ScaleInvert['scaleType'];
+  return { topPixel: topPx, bottomPixel: bottomPx, topData, bottomData, scaleType };
+}
+
 /**
  * Compile a chart spec into a ChartLayout.
  *
@@ -570,14 +618,38 @@ export function compileChart(spec: unknown, optionsInput: CompileOptions): Chart
   }
 
   // ---------------------------------------------------------------------------
-  // Faceted compilation: when encoding.facet is present, take the faceted path
+  // Faceted compilation: desugar row/column into facet, then take faceted path
   // ---------------------------------------------------------------------------
+  let facetDirection: 'row' | 'column' | 'wrap' = 'wrap';
+  const rowChannel = renderSpec.encoding.row;
+  const colChannel = renderSpec.encoding.column;
+  if (rowChannel?.field || colChannel?.field) {
+    const channel = (rowChannel?.field ? rowChannel : colChannel)!;
+    facetDirection = rowChannel?.field ? 'row' : 'column';
+    const desugared = { ...renderSpec.encoding } as Record<string, unknown>;
+    delete desugared.row;
+    delete desugared.column;
+    desugared.facet = {
+      field: channel.field,
+      type: channel.type,
+      sort: channel.sort,
+      ...(facetDirection === 'row' ? { columns: 1 } : {}),
+    };
+    renderSpec = { ...renderSpec, encoding: desugared as typeof renderSpec.encoding };
+    const chartDesugared = { ...chartSpec.encoding } as Record<string, unknown>;
+    delete chartDesugared.row;
+    delete chartDesugared.column;
+    chartDesugared.facet = desugared.facet;
+    chartSpec = { ...chartSpec, encoding: chartDesugared as typeof chartSpec.encoding };
+  }
+
   const facetChannel = renderSpec.encoding.facet;
   if (facetChannel?.field) {
     return compileFaceted(
       chartSpec,
       renderSpec,
       facetChannel,
+      facetDirection,
       options,
       theme,
       strategy,
@@ -857,6 +929,10 @@ export function compileChart(spec: unknown, optionsInput: CompileOptions): Chart
 
   const chrome = footnotes ? { ...dims.chrome, footnotes } : dims.chrome;
 
+  // Scale inversion anchors for edit-mode anchor drag (pixel -> data-space)
+  const xInvert = resolveScaleInvert(scales.x);
+  const yInvert = resolveScaleInvert(scales.y);
+
   return {
     area: chartArea,
     chrome,
@@ -890,6 +966,8 @@ export function compileChart(spec: unknown, optionsInput: CompileOptions): Chart
     display: chartSpec.display,
     crosshair,
     measureText: options.measureText,
+    ...(xInvert ? { xInvert } : {}),
+    ...(yInvert ? { yInvert } : {}),
   };
 }
 
@@ -901,6 +979,7 @@ function compileFaceted(
   chartSpec: NormalizedChartSpec,
   renderSpec: NormalizedChartSpec,
   facetChannel: FacetChannel,
+  facetDirection: 'row' | 'column' | 'wrap',
   options: CompileOptions,
   theme: ResolvedTheme,
   strategy: LayoutStrategy,
@@ -973,7 +1052,8 @@ function compileFaceted(
   const bottomReservation = plan.xAxisExtent;
 
   // Compute facet grid geometry
-  const grid = computeFacetGrid(facetValues, facetChannel.columns, chartArea, {
+  const effectiveColumns = facetDirection === 'column' ? facetValues.length : facetChannel.columns;
+  const grid = computeFacetGrid(facetValues, effectiveColumns, chartArea, {
     left: leftReservation,
     bottom: bottomReservation,
   });
@@ -995,10 +1075,15 @@ function compileFaceted(
     }
   }
 
-  // Resolve scale for determining if we use 'independent' or 'shared'
+  // Resolve scale: defaults depend on facet direction.
+  // row: x shared (comparable values), y independent (different categories)
+  // column: y shared (comparable values), x independent (different categories)
+  // wrap: both shared (original facet behavior)
   const resolveConfig = chartSpec.resolve;
-  const yResolve = resolveConfig?.scale?.y ?? 'shared';
-  const xResolve = resolveConfig?.scale?.x ?? 'shared';
+  const xDefault: ResolveMode = facetDirection === 'column' ? 'independent' : 'shared';
+  const yDefault: ResolveMode = facetDirection === 'row' ? 'independent' : 'shared';
+  const yResolve = resolveConfig?.scale?.y ?? yDefault;
+  const xResolve = resolveConfig?.scale?.x ?? xDefault;
 
   // Compute shared scale domains from the full dataset (when shared)
   const fullScales = computeScales(panelSpec, chartArea, renderSpec.data);
@@ -1079,7 +1164,6 @@ function compileFaceted(
     }
 
     // Strip y-axis tick labels from non-leftmost panels (gridlines stay).
-    // X-axis labels show on every panel for readability.
     if (yResolve === 'shared' && !isLeftCol && panelAxes.y) {
       panelAxes.y = {
         ...panelAxes.y,
@@ -1090,6 +1174,18 @@ function compileFaceted(
       };
     }
 
+    // Strip x-axis tick labels from non-bottom panels for row faceting.
+    const isBottomRow = gridPanel.row === grid.rows - 1;
+    if (xResolve === 'shared' && facetDirection === 'row' && !isBottomRow && panelAxes.x) {
+      panelAxes.x = {
+        ...panelAxes.x,
+        ticks: [],
+        label: undefined,
+        domainLine: false,
+        tickMarks: false,
+      };
+    }
+
     // Compute marks for this panel
     const panelMarks: Mark[] = renderer
       ? renderer(
@@ -1173,10 +1269,11 @@ function compileFaceted(
       annotations: panelAnnotations,
       header: {
         text: gridPanel.key,
-        x: gridPanel.headerPos.x,
+        x: facetDirection === 'row' ? gridPanel.area.x : gridPanel.headerPos.x,
         y: gridPanel.headerPos.y,
         fontSize: theme.fonts.sizes.body,
         fontWeight: theme.fonts.weights.medium,
+        ...(facetDirection === 'row' ? { textAnchor: 'start' as const } : {}),
       },
     });
   }
@@ -1272,6 +1369,7 @@ function compileFaceted(
       facetField: facetChannel.field,
       columns: grid.columns,
       sharedScales: yResolve === 'shared' && xResolve === 'shared',
+      direction: facetDirection,
     },
   };
 }