@juspay/svelte-ui-components 2.86.0 → 2.88.0

package/dist/LineChart/properties.d.ts

@@ -103,6 +103,15 @@ export type OptionalLineChartProperties = {
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
     /** Content rendered when all series are empty. */
     empty?: Snippet;
+    /** One tooltip listing every series at the hovered x (Highcharts shared tooltip).
+     *  Defaults to true for multi-series charts; single-series behavior is unchanged. */
+    sharedTooltip?: boolean;
+    /** Legend items become click/keyboard toggles for series visibility. */
+    interactiveLegend?: boolean;
+    /** Hide the legend when the measured chart width is below this px value; 0 disables. */
+    hideLegendBelow?: number;
+    /** Render the tooltip into document.body so scroll/overflow ancestors never clip it. */
+    tooltipPortal?: boolean;
     /** Value for the data-pw attribute on the chart container. */
     testId?: string;
     /** CSS class string applied to the top-level element. */

package/dist/Table/BuiltinCell.svelte

@@ -33,11 +33,13 @@
   let {
     column,
     value,
-    rowIndex
+    rowIndex,
+    originalIndex
   }: {
     column: TableColumn;
     value: TableCellValue;
     rowIndex: number;
+    originalIndex: number;
   } = $props();
 
   let copied = $state(false);
@@ -226,7 +228,7 @@
     <Toggle
       checked={isChecked}
       text=""
-      onclick={(newChecked) => column.onToggle?.(rowIndex, newChecked)}
+      onclick={(newChecked) => column.onToggle?.(rowIndex, newChecked, originalIndex)}
     />
   </span>
 {:else if column.type === 'select'}
@@ -247,7 +249,7 @@
         itemTestId={selectData.itemTestId}
         onchange={(selectedIds) => {
           if (selectedIds.length > 0) {
-            column.onSelect?.(rowIndex, selectedIds[0]);
+            column.onSelect?.(rowIndex, selectedIds[0], originalIndex);
           }
         }}
       />
@@ -275,7 +277,7 @@
           : null}
         onErrorMessage={inputData.onErrorMessage ?? null}
         actionInput={false}
-        onInput={(newValue) => column.onInput?.(rowIndex, newValue)}
+        onInput={(newValue) => column.onInput?.(rowIndex, newValue, originalIndex)}
       />
     </span>
   {:else}
@@ -295,7 +297,7 @@
         disabled={buttonData.disabled ?? false}
         classes={buttonData.classes ?? ''}
         testId={buttonData.testId}
-        onclick={() => column.onButtonClick?.(rowIndex)}
+        onclick={() => column.onButtonClick?.(rowIndex, originalIndex)}
       />
     </span>
   {:else}
@@ -317,7 +319,7 @@
           disabled={primary.disabled ?? false}
           classes={primary.classes ?? ''}
           testId={primary.testId}
-          onclick={() => column.onPrimaryAction?.(rowIndex)}
+          onclick={() => column.onPrimaryAction?.(rowIndex, originalIndex)}
         />
       {/if}
       {#if actionData.menuItems && actionData.menuItems.length > 0}
@@ -329,7 +331,7 @@
             separator: item.separator
           }))}
           testId={column.testId && `${column.testId}-menu-${rowIndex}`}
-          onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value)}
+          onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
           {#snippet trigger()}
             <span class="builtin-icon-button">
@@ -367,7 +369,7 @@
           separator: item.separator
         }))}
         testId={column.testId && `${column.testId}-popup-${rowIndex}`}
-        onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value)}
+        onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
         {#snippet trigger()}
           <span class="builtin-icon-button">

package/dist/Table/BuiltinCell.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     column: TableColumn;
     value: TableCellValue;
     rowIndex: number;
+    originalIndex: number;
 };
 declare const BuiltinCell: import("svelte").Component<$$ComponentProps, {}, "">;
 type BuiltinCell = ReturnType<typeof BuiltinCell>;

package/dist/Table/Table.svelte

@@ -59,6 +59,10 @@
   let normalized = $derived(columns ? normalizeColumns(columns, rows ?? []) : null);
   let effectiveHeaders = $derived(normalized ? normalized.tableHeaders : tableHeaders);
   let effectiveData = $derived(normalized ? normalized.tableData : tableData);
+  // Maps each row reference back to its index in the consumer-supplied `rows`
+  // (pre-sort/pre-filter). Row refs are preserved through sort/filter/paginate,
+  // so cell callbacks can hand consumers a sort-stable `originalIndex`.
+  let originalIndexByRow = $derived(new Map(effectiveData.map((row, index) => [row, index])));
   let effectiveSortableColumns = $derived(
     normalized ? normalized.sortableColumns : sortableColumns
   );
@@ -712,6 +716,7 @@
         {:else}
           {#each paginatedTableData as row, pageRowIndex (rowIdByRow.get(row) ?? pageRowIndex)}
             {@const rowIndex = pageRowIndex + rowIndexOffset}
+            {@const originalIndex = originalIndexByRow.get(row) ?? rowIndex}
             {@const rowId = rowIdByRow.get(row) ?? String(rowIndex)}
             {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
             {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
@@ -781,9 +786,14 @@
                     class:table-cell-clamp={keyedColumn?.maxWidth && isScalarCell}
                   >
                     {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
-                      {@render keyedColumn.cell(keyedRow, rowIndex)}
+                      {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
                     {:else if keyedColumn?.type && keyedColumn.type !== 'text' && keyedColumn.type !== 'custom'}
-                      <BuiltinCell column={keyedColumn} value={cellValue} {rowIndex} />
+                      <BuiltinCell
+                        column={keyedColumn}
+                        value={cellValue}
+                        {rowIndex}
+                        {originalIndex}
+                      />
                     {:else if typeof cell === 'function'}
                       {@render cell(cellValue, rowIndex, colIndex)}
                     {:else}

package/dist/Table/properties.d.ts

@@ -172,9 +172,9 @@ export type TableRow = Record<string, TableCellValue>;
  *   `sortable` prop. Equivalent to listing/omitting the column's index in
  *   `sortableColumns`.
  * - `testId` — `data-pw` attribute emitted on this column's header cell.
- * - `cell` — column-scoped renderer snippet receiving the full keyed row and
- *   the row index. Takes precedence over the table-wide `cell` snippet for
- *   this column; required when `type` is `'custom'`.
+ * - `cell` — column-scoped renderer snippet receiving the full keyed row, the
+ *   display row index, and the original (pre-sort) row index. Takes precedence
+ *   over the table-wide `cell` snippet for this column; required when `type` is `'custom'`.
  * - `onToggle`/`onSelect`/`onInput`/`onButtonClick`/`onPrimaryAction`/`onMenuAction`
  *   — change/action handlers for the matching interactive cell types. Behavior
  *   lives on the column so row data stays plain JSON.
@@ -185,7 +185,7 @@ export type TableColumn = {
     type?: TableColumnType;
     sortable?: boolean;
     testId?: string;
-    cell?: Snippet<[TableRow, number]>;
+    cell?: Snippet<[TableRow, number, number]>;
     /** Header tooltip text, shown on hover over the column label. */
     tooltip?: string;
     /**
@@ -207,13 +207,19 @@ export type TableColumn = {
      * the cell value itself.
      */
     getSortValue?: (row: TableRow, rowIndex: number) => string | number | boolean;
-    /** `checked` is the NEW state after the flip, not the pre-click value. */
-    onToggle?: (rowIndex: number, checked: boolean) => void;
-    onSelect?: (rowIndex: number, selectedId: string) => void;
-    onInput?: (rowIndex: number, value: string) => void;
-    onButtonClick?: (rowIndex: number) => void;
-    onPrimaryAction?: (rowIndex: number) => void;
-    onMenuAction?: (rowIndex: number, itemId: string) => void;
+    /**
+     * Row-action handlers. `rowIndex` is the row's position in the CURRENT
+     * (sorted/filtered/paginated) view; `originalIndex` is its position in the
+     * consumer-supplied `rows` array, stable under sort/filter — index your own
+     * source array with `originalIndex` so actions hit the correct row when the
+     * table is sorted. `checked` is the NEW state after the flip, not the pre-click value.
+     */
+    onToggle?: (rowIndex: number, checked: boolean, originalIndex: number) => void;
+    onSelect?: (rowIndex: number, selectedId: string, originalIndex: number) => void;
+    onInput?: (rowIndex: number, value: string, originalIndex: number) => void;
+    onButtonClick?: (rowIndex: number, originalIndex: number) => void;
+    onPrimaryAction?: (rowIndex: number, originalIndex: number) => void;
+    onMenuAction?: (rowIndex: number, itemId: string, originalIndex: number) => void;
 };
 /**
  * Configuration for row checkbox selection (C2-1).

package/dist/_chart/Axis.svelte

@@ -10,6 +10,10 @@
     showGridlines = false,
     gridlineLength = 0,
     label,
+    rotateTicks = false,
+    tickEvery = 1,
+    labelOffset = 36,
+    integerTicks = false,
     classes
   }: AxisProperties = $props();
 
@@ -19,7 +23,7 @@
 
   let tickValues = $derived.by(() => {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
-      return scale.ticks(tickCount);
+      return scale.ticks(tickCount, integerTicks);
     }
     if ('domain' in scale && Array.isArray(scale.domain)) {
       return scale.domain;
@@ -47,14 +51,27 @@
       {@const x = positionTick(tick)}
       <g class="tick" transform="translate({x}, 0)">
         <line class="tick-mark" y2={orientation === 'bottom' ? TICK_SIZE : -TICK_SIZE} />
-        <text
-          class="tick-label"
-          y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
-          text-anchor="middle"
-          dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
-        >
-          {format(tick)}
-        </text>
+        {#if i % tickEvery === 0}
+          {#if rotateTicks && orientation === 'bottom'}
+            <text
+              class="tick-label"
+              transform="translate(0, {TICK_SIZE + 4}) rotate(-45)"
+              text-anchor="end"
+              dominant-baseline="auto"
+            >
+              {format(tick)}
+            </text>
+          {:else}
+            <text
+              class="tick-label"
+              y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
+              text-anchor="middle"
+              dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
+            >
+              {format(tick)}
+            </text>
+          {/if}
+        {/if}
         {#if showGridlines && gridlineLength > 0}
           <line
             class="gridline"
@@ -68,7 +85,7 @@
       <text
         class="axis-label"
         x={(scale.range[0] + scale.range[1]) / 2}
-        y={orientation === 'bottom' ? 36 : -30}
+        y={orientation === 'bottom' ? labelOffset : -30}
         text-anchor="middle"
       >
         {label}
@@ -113,30 +130,30 @@
 
 <style>
   .axis-line {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-mark {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-label {
-    fill: var(--chart-axis-color, #666);
+    fill: var(--chart-axis-color, light-dark(#666, #9ca3af));
     font-size: var(--chart-axis-font-size, 11px);
     font-family: var(--chart-axis-font-family, inherit);
   }
 
   .axis-label {
-    fill: var(--chart-axis-label-color, #333);
+    fill: var(--chart-axis-label-color, light-dark(#333, #e5e7eb));
     font-size: var(--chart-axis-label-font-size, 12px);
     font-family: var(--chart-axis-font-family, inherit);
     font-weight: 500;
   }
 
   .gridline {
-    stroke: var(--chart-gridline-color, #e0e0e0);
+    stroke: var(--chart-gridline-color, light-dark(#e0e0e0, #374151));
     stroke-opacity: var(--chart-gridline-opacity, 0.5);
     stroke-dasharray: var(--chart-gridline-dash, 4 4);
   }

package/dist/_chart/ChartTooltip.svelte

@@ -1,83 +1,161 @@
 <script lang="ts">
-  import type { ChartTooltipProperties } from './types';
+  import type { ChartTooltipProperties, TooltipData } from './types';
+  import { computeTooltipPosition } from './tooltipPosition';
 
-  let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
-
-  const OFFSET = 12;
+  let {
+    data,
+    mouseX = 0,
+    mouseY = 0,
+    anchor = null,
+    portal = false,
+    originEl = null,
+    unstyled = false,
+    content,
+    customSnippet,
+    classes
+  }: ChartTooltipProperties = $props();
 
   let tooltipEl = $state<HTMLDivElement | null>(null);
   let tooltipWidth = $state(0);
   let tooltipHeight = $state(0);
+  // Portal position depends on untracked DOM reads (originEl rect, viewport
+  // size); bump a tick on scroll/resize so the $derived re-runs while open.
+  let portalTick = $state(0);
 
-  // Clamp against the positioned chart container so the tooltip never spills past
-  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
-  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
-  const containerHeight = $derived(
-    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
-  );
-
-  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
-  const left = $derived.by(() => {
-    let value = mouseX + OFFSET;
-    if (value + tooltipWidth > containerWidth) {
-      value = mouseX - tooltipWidth - OFFSET;
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!portal || data === null || typeof window === 'undefined') {
+      return;
     }
-    return Math.max(0, value);
+    const bump = () => {
+      portalTick += 1;
+    };
+    window.addEventListener('scroll', bump, { capture: true, passive: true });
+    window.addEventListener('resize', bump);
+    return () => {
+      window.removeEventListener('scroll', bump, { capture: true });
+      window.removeEventListener('resize', bump);
+    };
   });
 
-  // Vertical: keep the tooltip within the container's top and bottom edges.
-  const top = $derived.by(() => {
-    let value = mouseY - OFFSET;
-    if (value + tooltipHeight > containerHeight) {
-      value = containerHeight - tooltipHeight;
+  /**
+   * Svelte action: relocates the tooltip to document.body so a position:fixed
+   * tooltip is never clipped by an overflow/scroll ancestor. `use:` actions
+   * never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  };
+
+  const pos = $derived.by(() => {
+    const tooltip = { width: tooltipWidth, height: tooltipHeight };
+    if (portal) {
+      void portalTick;
+      // Convert container coords to viewport coords and clamp to the viewport.
+      const rect = originEl?.getBoundingClientRect();
+      const dx = rect?.left ?? 0;
+      const dy = rect?.top ?? 0;
+      const container =
+        typeof window === 'undefined'
+          ? { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }
+          : { width: window.innerWidth, height: window.innerHeight };
+      return computeTooltipPosition({
+        mouseX: mouseX + dx,
+        mouseY: mouseY + dy,
+        anchor: anchor === null ? null : { ...anchor, x: anchor.x + dx, y: anchor.y + dy },
+        tooltip,
+        container
+      });
     }
-    return Math.max(0, value);
+    const container = {
+      width: tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY,
+      height: tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+    };
+    return computeTooltipPosition({ mouseX, mouseY, anchor, tooltip, container });
   });
 </script>
 
-{#if data !== null}
-  <div
-    bind:this={tooltipEl}
-    bind:clientWidth={tooltipWidth}
-    bind:clientHeight={tooltipHeight}
-    class="chart-tooltip {classes ?? ''}"
-    style="left: {left}px; top: {top}px;"
-  >
-    {#if typeof customSnippet === 'function'}
-      {@render customSnippet(data)}
-    {:else}
-      {#if data.title}
-        <div class="tooltip-title">{data.title}</div>
-      {/if}
-      {#each data.items as item, i (i)}
-        <div class="tooltip-item">
-          {#if item.color}
-            <span class="tooltip-swatch" style="background: {item.color}"></span>
-          {/if}
-          <span class="tooltip-label">{item.label}</span>
-          <span class="tooltip-value">{item.value}</span>
-        </div>
-      {/each}
+{#snippet inner(tooltipData: TooltipData)}
+  {#if content}
+    {@render content()}
+  {:else if typeof customSnippet === 'function'}
+    {@render customSnippet(tooltipData)}
+  {:else}
+    {#if tooltipData.title}
+      <div class="tooltip-title">{tooltipData.title}</div>
     {/if}
-  </div>
+    {#each tooltipData.items as item, i (i)}
+      <div class="tooltip-item">
+        {#if item.color}
+          <span class="tooltip-swatch" style="background: {item.color}"></span>
+        {/if}
+        <span class="tooltip-label">{item.label}</span>
+        <span class="tooltip-value">{item.value}</span>
+      </div>
+    {/each}
+  {/if}
+{/snippet}
+
+{#if data !== null}
+  {#if portal}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip portal {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+      use:portalToBody
+    >
+      {@render inner(data)}
+    </div>
+  {:else}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+    >
+      {@render inner(data)}
+    </div>
+  {/if}
 {/if}
 
 <style>
   .chart-tooltip {
     position: absolute;
     z-index: var(--chart-tooltip-z-index, 10);
-    background: var(--chart-tooltip-background, rgba(0, 0, 0, 0.85));
-    color: var(--chart-tooltip-color, #fff);
+    background: var(--chart-tooltip-background, light-dark(rgba(0, 0, 0, 0.85), #1f2937));
+    color: var(--chart-tooltip-color, light-dark(#fff, #f3f4f6));
     font-size: var(--chart-tooltip-font-size, 12px);
     font-family: var(--chart-font-family, inherit);
     padding: var(--chart-tooltip-padding, 8px 12px);
     border-radius: var(--chart-tooltip-border-radius, var(--radius, 4px));
     box-shadow: var(--chart-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+    border: 1px solid
+      var(
+        --chart-tooltip-border-color,
+        light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08))
+      );
     pointer-events: none;
     max-width: var(--chart-tooltip-max-width, 280px);
     width: fit-content;
   }
 
+  .chart-tooltip.portal {
+    position: fixed;
+  }
+
+  .chart-tooltip.unstyled {
+    background: none;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    max-width: none;
+  }
+
   .tooltip-title {
     font-weight: 600;
     margin-bottom: 4px;

package/dist/_chart/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LegendProperties } from './types';
 
-  let { items, position = 'bottom', customSnippet, classes }: LegendProperties = $props();
+  let { items, position = 'bottom', onToggle, customSnippet, classes }: LegendProperties = $props();
 </script>
 
 {#if items.length > 0}
@@ -10,10 +10,23 @@
       {@render customSnippet(items)}
     {:else}
       {#each items as item, i (i)}
-        <div class="legend-item">
-          <span class="legend-swatch" style="background: {item.color}"></span>
-          <span class="legend-label">{item.label}</span>
-        </div>
+        {#if typeof onToggle === 'function'}
+          <button
+            type="button"
+            class="legend-item legend-toggle"
+            class:legend-hidden={item.hidden}
+            aria-pressed={!item.hidden}
+            onclick={() => onToggle(i)}
+          >
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </button>
+        {:else}
+          <div class="legend-item">
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </div>
+        {/if}
       {/each}
     {/if}
   </div>
@@ -54,6 +67,23 @@
 
   .legend-label {
     font-size: var(--chart-legend-font-size, 12px);
-    color: var(--chart-legend-color, #333);
+    color: var(--chart-legend-color, light-dark(#333, #e5e7eb));
+  }
+
+  .legend-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .legend-hidden .legend-swatch {
+    opacity: 0.25;
+  }
+
+  .legend-hidden .legend-label {
+    color: var(--chart-legend-hidden-color, light-dark(#bbb, #555));
   }
 </style>

package/dist/_chart/geometry.d.ts

@@ -1,25 +1,35 @@
 import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
+import { type FontSpec } from './measure';
 export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+export type AutoLayoutInput = {
+    width: number;
+    height: number;
+    yTickLabels: string[];
+    xTickLabels: string[];
+    y2TickLabels?: string[];
+    font?: FontSpec;
+    hasXAxisLabel?: boolean;
+    hasYAxisLabel?: boolean;
+    hasY2AxisLabel?: boolean;
+    base?: Partial<Margin>;
+};
+export type AutoLayout = ChartDimensions & {
+    xRotate: boolean;
+    xEvery: number;
+    /**
+     * Baseline y for the bottom-axis title, already inside the reserved title
+     * band — pass straight to Axis.labelOffset, no extra padding needed.
+     */
+    xLabelOffset: number;
+};
 /**
- * Measures rendered text width via a shared offscreen canvas context.
- * Returns null when measurement is unavailable (SSR, or the environment
- * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
- * a fixed layout instead of acting on a bogus 0.
- */
-export declare function measureTextWidth(text: string, font: string): number | null;
-/**
- * Left margin for a horizontal bar chart's category axis, sized to fit the
- * widest category label. Category tick labels render right-aligned 10px left
- * of the axis line (tick mark 6px + 4px gap), so any label wider than
- * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
- *
- * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
- *   labels already fit keep their exact current layout.
- * - Caps at 45% of the chart width so one pathological label cannot crush the
- *   plot area; past the cap the label bleeds as before, but the plot survives.
- * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ * Measured, Highcharts-style margins: gutters grow to fit formatted tick labels
+ * (instead of clipping) and the bottom axis rotates/thins its labels when the
+ * per-category step is too narrow. Order matters to avoid feedback loops:
+ * left/right derive from label text only, then innerWidth decides x rotation,
+ * then bottom derives from the rotation outcome.
  */
-export declare function computeHorizontalCategoryGutter(widestLabelWidth: number | null, chartWidth: number, fallback?: number): number;
+export declare function computeAutoLayout(input: AutoLayoutInput): AutoLayout;
 export declare function computePieLayout(data: Array<{
     label: string;
     value: number;