sdaia-ui 1.0.1

package/src/components/RichTextEditor/RichTextEditor.types.ts

@@ -0,0 +1,127 @@
+import type { HTMLAttributes } from 'react';
+
+/** Which visual mode the component renders in */
+export type RichTextEditorType = 'default' | 'text-selected' | 'input';
+
+/** Text alignment option */
+export type TextAlignment = 'left' | 'center' | 'right';
+
+export interface RichTextEditorProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Visual type.
+   * - `default` (default) — full formatting toolbar (standalone, attach above a content-editable area)
+   * - `text-selected` — compact floating toolbar shown when text is selected
+   * - `input` — self-contained input field with bottom quick-action bar and optional expanded toolbar
+   */
+  type?: RichTextEditorType;
+
+  /**
+   * Render in mobile layout.
+   * - `default` type: collapses to a 2-row toolbar (undo/redo + selectors on row 1,
+   *   collapsed format groups on row 2).
+   * @default false
+   */
+  mobile?: boolean;
+
+  /**
+   * Show expanded formatting toolbar above the content area.
+   * Only applies when `type="input"`.
+   * @default false
+   */
+  expand?: boolean;
+
+  // ── Formatting active states ────────────────────────────────────
+
+  /** Whether the Bold action is currently active (toggled). */
+  isBold?: boolean;
+
+  /** Whether the Italic action is currently active (toggled). */
+  isItalic?: boolean;
+
+  /** Whether the Underline action is currently active (toggled). */
+  isUnderline?: boolean;
+
+  /** Currently active text alignment. */
+  alignment?: TextAlignment;
+
+  // ── Text / font-size selectors ──────────────────────────────────
+
+  /** Selected text style label (e.g. `"Normal"`, `"Heading 1"`). */
+  textStyle?: string;
+
+  /** Available text style options. */
+  textStyleOptions?: string[];
+
+  /** Selected font size label (e.g. `"16"`). */
+  fontSize?: string;
+
+  /** Available font size options. */
+  fontSizeOptions?: string[];
+
+  /** Called when the user selects a text style option. */
+  onTextStyleChange?: (value: string) => void;
+
+  /** Called when the user selects a font size option. */
+  onFontSizeChange?: (value: string) => void;
+
+  // ── Toolbar action callbacks ────────────────────────────────────
+
+  /** Called when the Undo button is pressed. */
+  onUndo?: () => void;
+
+  /** Called when the Redo button is pressed. */
+  onRedo?: () => void;
+
+  /** Called when the Bold button is pressed. */
+  onBold?: () => void;
+
+  /** Called when the Italic button is pressed. */
+  onItalic?: () => void;
+
+  /** Called when the Underline button is pressed. */
+  onUnderline?: () => void;
+
+  /** Called when an alignment button is pressed. */
+  onAlign?: (alignment: TextAlignment) => void;
+
+  /** Called when the Color button (or its chevron) is pressed. */
+  onColor?: () => void;
+
+  /** Called when the Link button is pressed. */
+  onLink?: () => void;
+
+  /** Called when the Image button is pressed. */
+  onImage?: () => void;
+
+  /** Called when the AI button is pressed. */
+  onAI?: () => void;
+
+  // ── Input type specific ─────────────────────────────────────────
+
+  /**
+   * Controlled value for the textarea (only used when `type="input"`).
+   */
+  value?: string;
+
+  /**
+   * Placeholder text for the textarea.
+   * @default 'You can write here…'
+   */
+  placeholder?: string;
+
+  /** Called on every keystroke with the new text value. */
+  onChange?: (value: string) => void;
+
+  /** Called when the `+` (add content) button is pressed. */
+  onAddContent?: () => void;
+
+  /** Called when the Aa (format text) button is pressed. */
+  onFormatText?: () => void;
+
+  /** Called when the emoji button is pressed. */
+  onEmoji?: () => void;
+
+  /** Called when the `@` mention button is pressed. */
+  onMention?: () => void;
+}

package/src/components/RichTextEditor/RichTextEditor.variants.ts

@@ -0,0 +1,231 @@
+/* ─────────────────────────────────────────────────────────────────
+   RichTextEditor — variant / token constants
+   ───────────────────────────────────────────────────────────────── */
+
+/* ── Default toolbar — desktop ───────────────────────────────── */
+/**
+ * Figma: flex items-center, gap=spacing-xl (16px desktop),
+ * px=spacing-xl (16px desktop), py=spacing-md (8px)
+ */
+export const TOOLBAR_DESKTOP =
+  'flex flex-wrap items-center gap-spacing-xl px-spacing-xl py-spacing-md';
+
+/* ── Default toolbar — mobile (2-row) ────────────────────────── */
+/**
+ * Figma: flex flex-col, gap=spacing-xl (16px), px=spacing-xl, py=spacing-md
+ */
+export const TOOLBAR_MOBILE =
+  'flex flex-col gap-spacing-xl px-spacing-xl py-spacing-md';
+
+export const TOOLBAR_MOBILE_ROW =
+  'flex items-center justify-between w-full';
+
+/* ── Toolbar group wrappers ──────────────────────────────────── */
+/** Undo / Redo — gap=spacing-md (8px) */
+export const TOOLBAR_GROUP_SM = 'flex items-center gap-spacing-md';
+/** Bold / Italic / Underline, Align, Media — gap=spacing-lg (12px desktop) */
+export const TOOLBAR_GROUP_MD = 'flex items-center gap-spacing-lg';
+/** Color button + chevron — gap=spacing-xxs (2px) */
+export const TOOLBAR_GROUP_XS = 'flex items-center gap-spacing-xxs';
+
+/* ── Toolbar divider ─────────────────────────────────────────── */
+/** Figma: 1px vertical line — py=spacing-xs (4px) */
+export const TOOLBAR_DIVIDER =
+  'w-px self-stretch bg-[rgba(210,214,219,1)] dark:bg-[rgba(44,57,79,1)] my-spacing-xs shrink-0';
+
+/* ── Toolbar button ──────────────────────────────────────────── */
+/**
+ * Base: transparent, rounded-[4px], p=spacing-xxs (2px).
+ * Hover: Background/background-neutral-50 #f9fafb.
+ * Icon color: Icon/icon-default-500 #6c737f.
+ */
+export const TOOLBAR_BTN_BASE = [
+  'inline-flex items-center justify-center rounded-[4px] p-spacing-xxs',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]',
+  'motion-feedback cursor-pointer',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1',
+  'disabled:opacity-40 disabled:cursor-not-allowed',
+].join(' ');
+
+/**
+ * Active / pressed state.
+ * Figma: Background/background-neutral-100 #f3f4f6, rounded-[4px]
+ */
+export const TOOLBAR_BTN_ACTIVE =
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(44,57,79,1)] ' +
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
+
+/* ── Style selector dropdown trigger ────────────────────────── */
+/**
+ * Figma: border #d2d6db, rounded-[6px], px=spacing-md (8px), py=spacing-sm (6→8px),
+ * gap=spacing-md (8px).
+ */
+export const STYLE_SELECT =
+  'inline-flex items-center gap-spacing-md ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'rounded-[6px] px-spacing-md py-spacing-sm ' +
+  'cursor-pointer motion-feedback ' +
+  'hover:bg-[rgba(249,250,251,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)]';
+
+/** Text inside the style selector — Figma: text-text-xs #1f2a37 */
+export const STYLE_SELECT_TEXT =
+  'text-text-xs font-[400] ' +
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'whitespace-nowrap';
+
+/** Chevron inside style selector — 12×12 */
+export const STYLE_SELECT_CHEVRON =
+  'shrink-0 size-icon-xs text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+/* ── Text Selected (floating) toolbar ───────────────────────── */
+/**
+ * Figma: bg-white, rounded-[8px],
+ * shadow (0px 4px 8px rgba(16,24,40,0.1) + 0px 2px 4px rgba(16,24,40,0.06)),
+ * flex items-center, gap=spacing-lg, px=spacing-xl, py=spacing-md.
+ */
+export const FLOATING_TOOLBAR =
+  'inline-flex items-center gap-spacing-lg px-spacing-xl py-spacing-md ' +
+  'rounded-[8px] ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  'shadow-[0px_4px_8px_0px_rgba(16,24,40,0.1),0px_2px_4px_0px_rgba(16,24,40,0.06)] ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
+
+/* ── Default type — self-contained editor container ─────────── */
+/**
+ * Wraps the full toolbar + contentEditable area for type="default".
+ * Mirrors INPUT_CONTAINER but without the inner px/py padding
+ * (each section — toolbar, panels, content — carries its own spacing).
+ */
+export const EDITOR_CONTAINER =
+  'flex flex-col w-full ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'rounded-[8px] overflow-hidden ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)]';
+
+/**
+ * Panel strip that appears between the toolbar and content area.
+ * Border-bottom separates it from the content below it.
+ */
+export const EDITOR_PANEL_WRAP =
+  'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'px-spacing-xl py-spacing-md';
+
+/* ── Input type — outer container ───────────────────────────── */
+/**
+ * Figma: border #d2d6db, rounded-[8px], flex flex-col,
+ * px=spacing-lg (12px), py=spacing-md (8px), overflow-clip.
+ */
+export const INPUT_CONTAINER =
+  'flex flex-col w-full border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'rounded-[8px] overflow-hidden ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  'px-spacing-lg py-spacing-md';
+
+/* ── Input type — expand toolbar ────────────────────────────── */
+/**
+ * Shown above the textarea when expand=true.
+ * Same layout as floating toolbar but no shadow / absolute position.
+ */
+export const EXPAND_TOOLBAR =
+  'flex items-center gap-spacing-lg ' +
+  'border-b border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  '-mx-spacing-lg px-spacing-lg pb-spacing-sm';
+
+/* ── Input type — textarea ───────────────────────────────────── */
+/** Figma: text-text-md, placeholder #6c737f */
+export const INPUT_TEXTAREA =
+  'w-full flex-1 resize-none outline-none bg-transparent min-h-[80px] ' +
+  'text-text-md font-[400] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)]';
+
+/* ── Input type — bottom actions bar ────────────────────────── */
+/**
+ * Figma: flex items-center, gap=spacing-lg
+ */
+export const INPUT_BOTTOM_BAR =
+  'flex items-center gap-spacing-lg ' +
+  'border-t border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  '-mx-spacing-lg px-spacing-lg pt-spacing-md mt-spacing-3xl';
+
+/** Figma: + button — bg-neutral-50, p=spacing-xs, rounded-full, icon fill #161616 */
+export const INPUT_ADD_BTN =
+  'inline-flex items-center justify-center rounded-full p-spacing-xs ' +
+  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(31,42,55,1)] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(44,57,79,1)] ' +
+  'motion-feedback cursor-pointer ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';
+
+/** Figma: Aa/Emoji/@ bottom bar icon buttons */
+export const INPUT_ACTION_BTN =
+  'inline-flex items-center justify-center rounded-[4px] p-spacing-xxs ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
+  'motion-feedback cursor-pointer ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';
+
+/** Vertical 1px divider inside bottom bar */
+export const INPUT_DIVIDER =
+  'w-px self-stretch bg-[rgba(210,214,219,1)] dark:bg-[rgba(44,57,79,1)] mx-spacing-xs';
+
+/* ── Inline panels (emoji / font / link) ────────────────────── */
+/**
+ * Container shared by all inline panels (emoji, font, link).
+ * Appears between the content area and the bottom bar.
+ * Negative horizontal margins let it stretch edge-to-edge.
+ */
+export const PANEL_WRAP =
+  '-mx-spacing-lg px-spacing-lg py-spacing-sm ' +
+  'border-t border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
+
+/** Emoji grid — 8 columns */
+export const EMOJI_GRID = 'grid grid-cols-8 gap-0.5';
+
+/** Single emoji button */
+export const EMOJI_BTN =
+  'text-xl leading-none p-1 flex items-center justify-center rounded-[4px] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
+  'motion-feedback cursor-pointer';
+
+/** Font-style option button */
+export const FONT_OPTION_BTN =
+  'w-full text-start px-spacing-md py-spacing-xs rounded-[6px] motion-feedback ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)]';
+
+/** Link URL input inside the link panel */
+export const LINK_INPUT =
+  'flex-1 text-text-sm font-[400] ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'rounded-[6px] px-spacing-md py-spacing-sm outline-none ' +
+  'bg-white dark:bg-transparent ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)] ' +
+  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)] ' +
+  'focus:border-[rgba(27,131,84,0.7)] motion-feedback';
+
+/** Insert button inside the link panel */
+export const LINK_INSERT_BTN =
+  'shrink-0 px-spacing-md py-spacing-sm ' +
+  'text-text-sm font-[500] text-white ' +
+  'bg-[rgba(27,131,84,1)] hover:bg-[rgba(22,106,68,1)] ' +
+  'rounded-[6px] motion-feedback cursor-pointer';
+
+/** Close (×) button inside panels */
+export const PANEL_CLOSE_BTN =
+  'shrink-0 p-spacing-xs rounded-[4px] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
+  'hover:text-[rgba(22,22,22,1)] dark:hover:text-[rgba(229,231,235,1)] ' +
+  'motion-feedback cursor-pointer';
+
+/* ── Mobile row 2 — collapsed format buttons ─────────────────── */
+/** Format group button in mobile row 2: e.g. "B ▾", "Color ▾", "Align ▾" */
+export const MOBILE_GROUP_BTN =
+  'inline-flex items-center gap-spacing-xxs rounded-[4px] p-spacing-xxs ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,42,55,1)] ' +
+  'motion-feedback cursor-pointer ' +
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(27,131,84,0.7)] focus-visible:ring-offset-1';

package/src/components/RichTextEditor/index.ts

@@ -0,0 +1,6 @@
+export { RichTextEditor } from './RichTextEditor';
+export type {
+  RichTextEditorProps,
+  RichTextEditorType,
+  TextAlignment,
+} from './RichTextEditor.types';

package/src/components/ScatterChart/ScatterChart.tsx

@@ -0,0 +1,164 @@
+'use client';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { ScatterChartProps } from './ScatterChart.types';
+import {
+  ROOT_BASE,
+  TITLE_CLASSES,
+  CHART_BODY,
+  Y_AND_CHART_ROW,
+  Y_AXIS_CONTAINER,
+  Y_AXIS_ROW,
+  Y_AXIS_LABEL,
+  Y_AXIS_SPACER,
+  CHART_AREA,
+  GRID_OVERLAY,
+  GRID_LINE,
+  GRID_V_OVERLAY,
+  GRID_V_LINE,
+  DOTS_WRAPPER,
+  DOT_BASE,
+  X_AXIS_ROW,
+  X_AXIS_LABEL,
+  getDefaultPoints,
+  getDefaultYTicks,
+  getDefaultXTicks,
+  getDefaultDomain,
+} from './ScatterChart.variants';
+
+export const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>(
+  function ScatterChart(
+    {
+      type = 'Linear',
+      title,
+      points,
+      yTicks,
+      xTicks,
+      xMin,
+      xMax,
+      yMin,
+      yMax,
+      rtl = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const resolvedPoints = points ?? getDefaultPoints(type);
+    const resolvedYTicks = yTicks ?? getDefaultYTicks(type);
+    const resolvedXTicks = xTicks ?? getDefaultXTicks(type);
+    const domain = getDefaultDomain(type);
+    const resolvedXMin = xMin ?? domain.xMin;
+    const resolvedXMax = xMax ?? domain.xMax;
+    const resolvedYMin = yMin ?? domain.yMin;
+    const resolvedYMax = yMax ?? domain.yMax;
+
+    const xRange = resolvedXMax - resolvedXMin || 1;
+    const yRange = resolvedYMax - resolvedYMin || 1;
+
+    // The longest visible Y-axis label is used for the invisible spacer that
+    // gives the X-axis row the same left offset as the chart area.
+    const longestYLabel = resolvedYTicks.reduce(
+      (longest, tick) => (tick.length > longest.length ? tick : longest),
+      '',
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="scatter-chart"
+        dir={rtl ? 'rtl' : undefined}
+        className={cn(ROOT_BASE, className)}
+        {...rest}
+      >
+        {/* Title */}
+        {title && (
+          <p data-slot="scatter-chart-title" className={TITLE_CLASSES}>
+            {title}
+          </p>
+        )}
+
+        {/* Chart body */}
+        <div data-slot="scatter-chart-body" className={CHART_BODY}>
+          {/* Y-axis + chart area row */}
+          <div data-slot="scatter-chart-row" className={Y_AND_CHART_ROW}>
+            {/* Y-axis labels */}
+            <div data-slot="scatter-chart-y-axis" className={Y_AXIS_CONTAINER}>
+              {resolvedYTicks.map((tick, i) => (
+                <div key={i} className={Y_AXIS_ROW}>
+                  {tick ? (
+                    <span className={Y_AXIS_LABEL}>{tick}</span>
+                  ) : (
+                    /* invisible spacer keeps grid-line count correct */
+                    <span className={Y_AXIS_LABEL} aria-hidden="true" style={{ visibility: 'hidden' }}>
+                      &nbsp;
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* Chart area */}
+            <div data-slot="scatter-chart-area" className={CHART_AREA}>
+              {/* Horizontal grid lines */}
+              <div className={GRID_OVERLAY} aria-hidden="true">
+                {resolvedYTicks.map((_, i) => (
+                  <div key={i} className={GRID_LINE} />
+                ))}
+              </div>
+
+              {/* Vertical grid lines — one per X-tick, aligned with X-axis labels */}
+              <div className={GRID_V_OVERLAY} aria-hidden="true">
+                {resolvedXTicks.map((_, i) => (
+                  <div key={i} className={GRID_V_LINE} />
+                ))}
+              </div>
+
+              {/* Scatter dots */}
+              <div className={DOTS_WRAPPER} aria-hidden="true">
+                {resolvedPoints.map((point, i) => {
+                  const xNorm = (point.x - resolvedXMin) / xRange;
+                  const yNorm = (point.y - resolvedYMin) / yRange;
+                  const leftPct = rtl ? (1 - xNorm) * 100 : xNorm * 100;
+                  // Y: 0% top = max value, 100% bottom = min value
+                  const topPct = (1 - yNorm) * 100;
+                  return (
+                    <div
+                      key={i}
+                      className={DOT_BASE}
+                      style={{
+                        left: `clamp(4px, ${leftPct}%, calc(100% - 4px))`,
+                        top: `clamp(4px, ${topPct}%, calc(100% - 4px))`,
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* X-axis row */}
+          <div data-slot="scatter-chart-x-axis" className="flex gap-spacing-md">
+            {/* Invisible spacer matching Y-axis width */}
+            <div className={Y_AXIS_SPACER} aria-hidden="true">
+              <span className={Y_AXIS_LABEL}>{longestYLabel}</span>
+            </div>
+
+            {/* X tick labels */}
+            <div className={cn(X_AXIS_ROW, 'flex-1 min-w-0')}>
+              {resolvedXTicks.map((tick, i) => (
+                tick ? (
+                  <span key={i} className={X_AXIS_LABEL}>{tick}</span>
+                ) : (
+                  <span key={i} className={X_AXIS_LABEL} aria-hidden="true" style={{ visibility: 'hidden' }}>
+                    &nbsp;
+                  </span>
+                )
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/ScatterChart/ScatterChart.types.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes } from 'react';
+
+export type ScatterChartType = 'Linear' | 'Sin' | 'No Trend' | 'Square';
+
+export interface ScatterPoint {
+  x: number;
+  y: number;
+}
+
+export interface ScatterChartProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Preset trend type. Controls default data, axis ticks, and domain when not
+   * explicitly supplied. @default 'Linear'
+   */
+  type?: ScatterChartType;
+  /** Optional chart title rendered above the chart. */
+  title?: string;
+  /** Scatter data points in data-space coordinates. */
+  points?: ScatterPoint[];
+  /**
+   * Y-axis tick labels from top to bottom.
+   * An empty string '' renders an invisible spacer row (keeps grid-line count
+   * consistent with the chart area via `justify-between`).
+   */
+  yTicks?: string[];
+  /**
+   * X-axis tick labels from left to right (LTR). For RTL the visual order
+   * mirrors automatically.
+   * An empty string '' renders an invisible spacer cell.
+   */
+  xTicks?: string[];
+  /** Minimum data-space X value. @default derived from type preset */
+  xMin?: number;
+  /** Maximum data-space X value. @default derived from type preset */
+  xMax?: number;
+  /** Minimum data-space Y value. @default derived from type preset */
+  yMin?: number;
+  /** Maximum data-space Y value. @default derived from type preset */
+  yMax?: number;
+  /** Render in RTL layout (mirrors dot X positions). @default false */
+  rtl?: boolean;
+}