diff --git a/package.json b/package.json
index 5c97c9bb..77841577 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
         "prepack": "npx svelte-package",
         "release-next": "npm version prerelease --preid next && npm publish && git push && git push --tags && sleep 1 && npm dist-tag add svelteplot@$(npm view . version) next",
         "docs": "npm run build && cd build && rsync --recursive . vis4.net:svelteplot/alpha0/",
-        "screenshots": "node screenshot-examples.js"
+        "screenshots": "node screenshot-examples.js",
+        "check-js-extensions": "node scripts/check-js-extensions.js src"
     },
     "exports": {
         ".": {
diff --git a/scripts/check-js-extensions.js b/scripts/check-js-extensions.js
new file mode 100755
index 00000000..4ea9db11
--- /dev/null
+++ b/scripts/check-js-extensions.js
@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+/**
+ * This script checks for missing .js extensions in import statements.
+ * It helps identify issues with ESM imports where TypeScript requires .js extensions.
+ */
+
+import { readFile, readdir, stat } from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Convert file:// URLs to paths
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Regular expressions to match import statements without .js extensions
+const regexImportFrom =
+    /import\s+(?:type\s+)?(?:{[^}]*}|\*\s+as\s+[^;]*|[^;{]*)\s+from\s+['"]([^'"]*)['"]/g;
+const regexExportFrom =
+    /export\s+(?:type\s+)?(?:{[^}]*}|\*\s+as\s+[^;]*)\s+from\s+['"]([^'"]*)['"]/g;
+
+// Skip node_modules and build directories
+const excludedDirs = ['node_modules', 'build', '.svelte-kit', 'dist', '.git', 'examples', 'tests'];
+
+// Only check certain file types
+const includedExtensions = ['.ts', '.js', '.svelte'];
+
+// Paths that should have .js extensions (relative paths and alias paths)
+const shouldHaveJsExtension = (importPath) => {
+    // Skip Svelte imports
+    if (importPath.endsWith('.svelte')) return false;
+
+    // Skip npm package imports (those that don't start with . or /)
+    if (
+        !importPath.startsWith('.') &&
+        !importPath.startsWith('/') &&
+        !importPath.startsWith('$lib')
+    )
+        return false;
+
+    // Skip imports with extensions already
+    if (path.extname(importPath)) return false;
+
+    return true;
+};
+
+async function* walkDirectory(dir) {
+    const entries = await readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            if (!excludedDirs.includes(entry.name)) {
+                yield* walkDirectory(fullPath);
+            }
+        } else if (includedExtensions.includes(path.extname(entry.name))) {
+            yield fullPath;
+        }
+    }
+}
+
+async function checkFile(filePath) {
+    const content = await readFile(filePath, 'utf8');
+    const issues = [];
+
+    // Find all import statements
+    let match;
+
+    // Check import statements
+    regexImportFrom.lastIndex = 0;
+    while ((match = regexImportFrom.exec(content)) !== null) {
+        const importPath = match[1];
+        if (shouldHaveJsExtension(importPath)) {
+            issues.push({
+                line: content.substring(0, match.index).split('\n').length,
+                importPath,
+                statement: match[0]
+            });
+        }
+    }
+
+    // Check export from statements
+    regexExportFrom.lastIndex = 0;
+    while ((match = regexExportFrom.exec(content)) !== null) {
+        const importPath = match[1];
+        if (shouldHaveJsExtension(importPath)) {
+            issues.push({
+                line: content.substring(0, match.index).split('\n').length,
+                importPath,
+                statement: match[0]
+            });
+        }
+    }
+
+    return { filePath, issues };
+}
+
+async function main() {
+    const rootDir = process.argv[2] || process.cwd();
+    console.log(`Checking for missing .js extensions in ${rootDir}...\n`);
+
+    let totalIssues = 0;
+    let filesWithIssues = 0;
+
+    for await (const filePath of walkDirectory(rootDir)) {
+        const { issues } = await checkFile(filePath);
+
+        if (issues.length > 0) {
+            console.log(`\x1b[33m${filePath}\x1b[0m`);
+            filesWithIssues++;
+
+            for (const issue of issues) {
+                totalIssues++;
+                console.log(
+                    `  Line ${issue.line}: Missing .js extension in import: ${issue.importPath}`
+                );
+                console.log(`    ${issue.statement}`);
+            }
+            console.log('');
+        }
+    }
+
+    if (totalIssues === 0) {
+        console.log('\x1b[32mNo missing .js extensions found!\x1b[0m');
+    } else {
+        console.log(
+            `\x1b[31mFound ${totalIssues} missing .js extensions in ${filesWithIssues} files.\x1b[0m`
+        );
+        process.exit(1);
+    }
+}
+
+main().catch((err) => {
+    console.error('Error:', err);
+    process.exit(1);
+});
diff --git a/src/lib/Plot.svelte b/src/lib/Plot.svelte
index 840120b0..2db722c5 100644
--- a/src/lib/Plot.svelte
+++ b/src/lib/Plot.svelte
@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotDefaults, PlotOptions } from './types/index.js';
+    import type { PlotOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 81ddb142..a874f228 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,4 +1,4 @@
-import type { ScaleName, ScaleType, ScaledChannelName } from './types.js';
+import type { ScaleName, ScaleType, ScaledChannelName } from './types/index.js';
 
 export const SCALE_TYPES: Record<ScaleName, symbol> = {
     opacity: Symbol('opacity'),
diff --git a/src/lib/core/FacetAxes.svelte b/src/lib/core/FacetAxes.svelte
index d44b9342..381a916e 100644
--- a/src/lib/core/FacetAxes.svelte
+++ b/src/lib/core/FacetAxes.svelte
@@ -36,6 +36,7 @@
             scaleType="band"
             ticks={fxValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fx.axis}
@@ -53,6 +54,7 @@
             scaleType="band"
             ticks={fyValues}
             tickFormat={(d) => d}
+            tickFontSize={11}
             tickSize={0}
             tickPadding={5}
             anchor={plot.options.fy.axis}
diff --git a/src/lib/helpers/autoScales.ts b/src/lib/helpers/autoScales.ts
index b83272fb..893ec787 100644
--- a/src/lib/helpers/autoScales.ts
+++ b/src/lib/helpers/autoScales.ts
@@ -32,7 +32,7 @@ import type {
     ScaleName,
     ScaleOptions,
     ScaleType
-} from '../types.js';
+} from '../types/index.js';
 import {
     categoricalSchemes,
     isCategoricalScheme,
diff --git a/src/lib/helpers/autoTicks.ts b/src/lib/helpers/autoTicks.ts
index 2f597778..ef77a306 100644
--- a/src/lib/helpers/autoTicks.ts
+++ b/src/lib/helpers/autoTicks.ts
@@ -1,4 +1,4 @@
-import type { RawValue, ScaleType } from '$lib/types.js';
+import type { RawValue, ScaleType } from '$lib/types/index.js';
 import { maybeTimeInterval } from './time.js';
 import { extent, range as rangei } from 'd3-array';
 
diff --git a/src/lib/helpers/autoTimeFormat.ts b/src/lib/helpers/autoTimeFormat.ts
index afe9b6ba..59382fd7 100644
--- a/src/lib/helpers/autoTimeFormat.ts
+++ b/src/lib/helpers/autoTimeFormat.ts
@@ -1,5 +1,5 @@
-import type { Scale } from '$lib/classes/Scale.svelte.js';
-import { isDate } from '$lib/helpers/typeChecks';
+import type { PlotScale } from '$lib/types/index.js';
+import { isDate } from '$lib/helpers/typeChecks.js';
 
 const DATE_TIME: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
@@ -32,9 +32,9 @@ const autoFormatMonthYear = (locale: string) => {
     return (date: Date) => format(date).replace(' ', '\n');
 };
 
-export default function autoTimeFormat(x: Scale, plotWidth: number, plotLocale: string) {
+export default function autoTimeFormat(x: PlotScale, plotWidth: number, plotLocale: string) {
     const daysPer100Px =
-        ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
+        ((toNumber(x.domain[1] as Date) - toNumber(x.domain[0] as Date)) / plotWidth / 864e5) * 100;
     const format =
         daysPer100Px < 1
             ? autoFormatDateTime(plotLocale)
diff --git a/src/lib/helpers/callWithProps.ts b/src/lib/helpers/callWithProps.ts
index 25d707fb..3923aa51 100644
--- a/src/lib/helpers/callWithProps.ts
+++ b/src/lib/helpers/callWithProps.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 
 type Setter = (v: any) => void;
 
diff --git a/src/lib/helpers/colors.ts b/src/lib/helpers/colors.ts
index 42315521..60dd356f 100644
--- a/src/lib/helpers/colors.ts
+++ b/src/lib/helpers/colors.ts
@@ -77,7 +77,7 @@ import {
 } from 'd3-scale-chromatic';
 
 import { quantize } from 'd3-interpolate';
-import type { ColorScheme } from '$lib/types.js';
+import type { ColorScheme } from '$lib/types/index.js';
 
 const schemeObservable10 = [
     '#4269d0',
diff --git a/src/lib/helpers/curves.ts b/src/lib/helpers/curves.ts
index 4546092c..47dc56b6 100644
--- a/src/lib/helpers/curves.ts
+++ b/src/lib/helpers/curves.ts
@@ -1,4 +1,4 @@
-import type { Curve } from '../types.js';
+import type { Curve } from '../types/index.js';
 import {
     curveBasis,
     curveBasisClosed,
diff --git a/src/lib/helpers/facets.ts b/src/lib/helpers/facets.ts
index 8ed7f1b5..a3789030 100644
--- a/src/lib/helpers/facets.ts
+++ b/src/lib/helpers/facets.ts
@@ -1,4 +1,4 @@
-import type { GenericMarkOptions, Mark, RawValue } from '$lib/types.js';
+import type { GenericMarkOptions, Mark, RawValue } from '$lib/types/index.js';
 import { resolveChannel } from './resolve.js';
 
 /**
diff --git a/src/lib/helpers/getBaseStyles.ts b/src/lib/helpers/getBaseStyles.ts
index 8b803464..81e291e8 100644
--- a/src/lib/helpers/getBaseStyles.ts
+++ b/src/lib/helpers/getBaseStyles.ts
@@ -1,5 +1,5 @@
-import type { Channels } from '$lib/types.js';
-import type { MarkStyleProps, DataRow } from '$lib/types.js';
+import type { Channels } from '$lib/types/index.js';
+import type { MarkStyleProps, DataRow } from '$lib/types/index.js';
 import { resolveProp } from './resolve.js';
 
 /**
diff --git a/src/lib/helpers/group.test.ts b/src/lib/helpers/group.test.ts
index 432a7240..96c0adae 100644
--- a/src/lib/helpers/group.test.ts
+++ b/src/lib/helpers/group.test.ts
@@ -1,4 +1,4 @@
-import { groupFacetsAndZ } from './group';
+import { groupFacetsAndZ } from './group.js';
 import { describe, it, expect } from 'vitest';
 
 describe('groupFacetsAndZ', () => {
diff --git a/src/lib/helpers/group.ts b/src/lib/helpers/group.ts
index e6664932..072ea676 100644
--- a/src/lib/helpers/group.ts
+++ b/src/lib/helpers/group.ts
@@ -1,5 +1,5 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { ChannelName, Channels, DataRecord } from '$lib/types.js';
+import type { ChannelName, Channels, DataRecord } from '$lib/types/index.js';
 import { groups as d3Groups } from 'd3-array';
 
 /**
diff --git a/src/lib/helpers/index.test.ts b/src/lib/helpers/index.test.ts
index 690da416..62be93da 100644
--- a/src/lib/helpers/index.test.ts
+++ b/src/lib/helpers/index.test.ts
@@ -1,4 +1,4 @@
-import { coalesce, isObject, omit } from './index';
+import { coalesce, isObject, omit } from './index.js';
 import { describe, it, expect } from 'vitest';
 
 describe('coalesce', () => {
diff --git a/src/lib/helpers/index.ts b/src/lib/helpers/index.ts
index 7f51116e..8865f648 100644
--- a/src/lib/helpers/index.ts
+++ b/src/lib/helpers/index.ts
@@ -1,4 +1,4 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '$lib/types.js';
+import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '$lib/types/index.js';
 import type { Snippet } from 'svelte';
 import { resolveProp } from './resolve.js';
 import { isDate } from '$lib/helpers/typeChecks.js';
diff --git a/src/lib/helpers/isDataRecord.ts b/src/lib/helpers/isDataRecord.ts
index d45d2f81..12505e57 100644
--- a/src/lib/helpers/isDataRecord.ts
+++ b/src/lib/helpers/isDataRecord.ts
@@ -1,4 +1,4 @@
-import type { DataRecord } from '../types.js';
+import type { DataRecord } from '../types/index.js';
 
 export default function (value: any): value is DataRecord {
     if (typeof value !== 'object' || value === null) return false;
diff --git a/src/lib/helpers/isRawValue.ts b/src/lib/helpers/isRawValue.ts
index 8109e8c1..065a2a78 100644
--- a/src/lib/helpers/isRawValue.ts
+++ b/src/lib/helpers/isRawValue.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 import { isDate } from '$lib/helpers/typeChecks.js';
 
 export default function (value: any): value is RawValue {
diff --git a/src/lib/helpers/reduce.test.ts b/src/lib/helpers/reduce.test.ts
index 2ff3e409..798f5307 100644
--- a/src/lib/helpers/reduce.test.ts
+++ b/src/lib/helpers/reduce.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { reduceOutputs, type ReducerName } from './reduce.js';
-import type { ChannelAccessor, ChannelName } from '$lib/types.js';
+import type { ChannelAccessor, ChannelName } from '$lib/types/index.js';
 
 describe('reduceOutputs', () => {
     it('should correctly reduce outputs', () => {
diff --git a/src/lib/helpers/reduce.ts b/src/lib/helpers/reduce.ts
index fdfa65d0..479e4c81 100644
--- a/src/lib/helpers/reduce.ts
+++ b/src/lib/helpers/reduce.ts
@@ -1,4 +1,4 @@
-import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '$lib/types.js';
+import type { ChannelName, Channels, DataRecord, DataRow, RawValue } from '$lib/types/index.js';
 import { min, max, mode, sum, mean, median, variance, deviation, quantile } from 'd3-array';
 import { resolveChannel } from './resolve.js';
 import { POSITION_CHANNELS } from './index.js';
diff --git a/src/lib/helpers/regressionLoess.ts b/src/lib/helpers/regressionLoess.ts
index ac8a64ef..d2ab3914 100644
--- a/src/lib/helpers/regressionLoess.ts
+++ b/src/lib/helpers/regressionLoess.ts
@@ -1,4 +1,4 @@
-import type { DataRow } from '$lib/types.js';
+import type { DataRow } from '$lib/types/index.js';
 import Loess from 'loess';
 
 type AccessorFn = (d: any) => number;
diff --git a/src/lib/helpers/resolve.ts b/src/lib/helpers/resolve.ts
index 6a24e2a5..59694ec7 100644
--- a/src/lib/helpers/resolve.ts
+++ b/src/lib/helpers/resolve.ts
@@ -1,7 +1,7 @@
 import { CHANNEL_SCALE } from '$lib/constants.js';
 import isDataRecord from '$lib/helpers/isDataRecord.js';
 import isRawValue from '$lib/helpers/isRawValue.js';
-import type { MarkStyleProps, PlotState, ScaledDataRecord } from '$lib/types.js';
+import type { MarkStyleProps, PlotState, ScaledDataRecord } from '$lib/types/index.js';
 import { isValid } from './isValid.js';
 
 import type {
@@ -13,7 +13,7 @@ import type {
     RawValue,
     DataRecord,
     ConstantAccessor
-} from '../types.js';
+} from '../types/index.js';
 import { getBaseStylesObject } from './getBaseStyles.js';
 import { RAW_VALUE } from 'svelteplot/transforms/recordize.js';
 
diff --git a/src/lib/helpers/scales.ts b/src/lib/helpers/scales.ts
index d8e01723..2596e13d 100644
--- a/src/lib/helpers/scales.ts
+++ b/src/lib/helpers/scales.ts
@@ -25,7 +25,7 @@ import type {
     ScaleType,
     ScaledChannelName,
     UsedScales
-} from '../types.js';
+} from '../types/index.js';
 import isDataRecord from './isDataRecord.js';
 
 import { createProjection } from './projection.js';
diff --git a/src/lib/helpers/typeChecks.ts b/src/lib/helpers/typeChecks.ts
index 8d2f985c..f726937f 100644
--- a/src/lib/helpers/typeChecks.ts
+++ b/src/lib/helpers/typeChecks.ts
@@ -1,4 +1,4 @@
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 import { isSymbol } from './symbols.js';
 import { color } from 'd3-color';
 import {
diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
index 9bd7651d..0044ed1d 100644
--- a/src/lib/marks/Area.svelte
+++ b/src/lib/marks/Area.svelte
@@ -37,9 +37,9 @@
         ChannelAccessor,
         ScaledDataRecord,
         LinkableMarkProps,
-        PlotDefaults
+        PlotDefaults,
+        RawValue
     } from '../types/index.js';
-    import type { RawValue } from 'svelteplot/types/index.js';
     import type { StackOptions } from '$lib/transforms/stack.js';
 
     let markProps: AreaMarkProps = $props();
diff --git a/src/lib/marks/AxisX.svelte b/src/lib/marks/AxisX.svelte
index e85349f0..d75d89ee 100644
--- a/src/lib/marks/AxisX.svelte
+++ b/src/lib/marks/AxisX.svelte
@@ -26,13 +26,14 @@
         > {
         data?: Datum[];
         automatic?: boolean;
-        title?: string;
+        title?: string | false | null;
         anchor?: 'top' | 'bottom';
         interval?: string | number;
         facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
         labelAnchor?: 'auto' | 'left' | 'center' | 'right';
         tickSize?: number;
         tickFontSize?: ConstantAccessor<number, Datum>;
+        titleFontSize?: number;
         tickPadding?: number;
         tickFormat?:
             | 'auto'
@@ -43,7 +44,7 @@
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];
         /** set to false or null to disable tick labels */
-        text: boolean | null;
+        text?: boolean | null;
         /** approximate number of ticks to be generated */
         tickCount?: number;
         /** approximate number of pixels between generated ticks */
@@ -56,6 +57,8 @@
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
+        titleFontSize: 11,
+        opacity: 0.8,
         anchor: 'bottom',
         ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
         ...getContext<PlotDefaults>('svelteplot/_defaults').axisX
@@ -140,18 +143,19 @@
     const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
 
     const useTitle = $derived(
-        title ||
-            (optionsLabel === null
-                ? null
-                : optionsLabel !== undefined
-                  ? optionsLabel
-                  : plot.scales.x.autoTitle
-                    ? isQuantitative
-                        ? plot.options.x?.reverse
-                            ? `← ${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''}`
-                            : `${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''} →`
-                        : plot.scales.x.autoTitle
-                    : '')
+        title !== undefined
+            ? title || ''
+            : optionsLabel === null
+              ? null
+              : optionsLabel !== undefined
+                ? optionsLabel
+                : plot.scales.x.autoTitle
+                  ? isQuantitative
+                      ? plot.options.x?.reverse
+                          ? `← ${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''}`
+                          : `${plot.scales.x.autoTitle}${plot.options.x.percent ? ' (%)' : ''} →`
+                      : plot.scales.x.autoTitle
+                  : ''
     );
 
     const useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
@@ -188,8 +192,10 @@
             style={resolveScaledStyles(
                 null,
                 {
+                    opacity: 0.8,
                     ...options,
                     stroke: null,
+                    fontSize: options.titleFontSize || 11,
                     textAnchor:
                         titleAlign === 'right'
                             ? 'end'
@@ -231,8 +237,6 @@
 
 <style>
     text {
-        font-size: 11px;
-        opacity: 0.8;
         fill: currentColor;
     }
 </style>
diff --git a/src/lib/marks/AxisY.svelte b/src/lib/marks/AxisY.svelte
index 59d75805..5e8eb44f 100644
--- a/src/lib/marks/AxisY.svelte
+++ b/src/lib/marks/AxisY.svelte
@@ -25,14 +25,16 @@
         > {
         data?: Datum[];
         automatic?: boolean;
-        title?: string;
+        title?: string | false | null;
         anchor?: 'left' | 'right';
         facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
         lineAnchor?: 'top' | 'center' | 'bottom';
         interval?: string | number;
         labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        textAnchor?: 'auto' | 'start' | 'middle' | 'end';
         tickSize?: number;
         tickFontSize?: ConstantAccessor<number, Datum>;
+        titleFontSize?: number;
         tickPadding?: number;
         tickFormat?:
             | 'auto'
@@ -43,7 +45,7 @@
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];
         /** set to false or null to disable tick labels */
-        text: boolean | null;
+        text?: boolean | null;
         /** approximate number of ticks to be generated */
         tickCount?: number;
         /** approximate number of pixels between generated ticks */
@@ -56,7 +58,9 @@
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
+        opacity: 0.8,
         anchor: 'left',
+        textAnchor: 'auto',
         ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
         ...getContext<PlotDefaults>('svelteplot/_defaults').axisY
     };
@@ -71,6 +75,7 @@
         facetAnchor = 'auto',
         interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
+        textAnchor,
         tickSize,
         tickFontSize,
         tickPadding,
@@ -138,14 +143,15 @@
     const optionsLabel = $derived(plot.options.y.label);
 
     const useTitle = $derived(
-        title ||
-            (optionsLabel === null
-                ? null
-                : optionsLabel !== undefined
-                  ? optionsLabel
-                  : plot.scales.y.autoTitle
-                    ? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
-                    : '')
+        title !== undefined
+            ? title || ''
+            : optionsLabel === null
+              ? null
+              : optionsLabel !== undefined
+                ? optionsLabel
+                : plot.scales.y.autoTitle
+                  ? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
+                  : ''
     );
 
     const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
@@ -176,7 +182,14 @@
         <text
             style={resolveScaledStyles(
                 null,
-                { ...options, stroke: null, textAnchor: anchor === 'left' ? 'start' : 'end' },
+                {
+                    opacity: 0.8,
+                    ...options,
+                    fontSize: options.titleFontSize ?? 11,
+                    fill: 'currentColor',
+                    stroke: null,
+                    textAnchor: anchor === 'left' ? 'start' : 'end'
+                },
                 {},
                 plot,
                 'fill'
@@ -191,7 +204,15 @@
             {anchor}
             {className}
             {lineAnchor}
-            {options}
+            options={{
+                ...options,
+                textAnchor:
+                    textAnchor == null || textAnchor === 'auto'
+                        ? anchor === 'left'
+                            ? 'end'
+                            : 'start'
+                        : textAnchor
+            }}
             {plot}
             {text}
             {tickClass}
@@ -210,8 +231,6 @@
 
 <style>
     text {
-        font-size: 11px;
-        opacity: 0.8;
         fill: currentColor;
     }
 </style>
diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
index c20506d3..31d1c520 100644
--- a/src/lib/marks/BarX.svelte
+++ b/src/lib/marks/BarX.svelte
@@ -22,7 +22,7 @@
 
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { stackX, recordizeX, intervalX, sort } from 'svelteplot';
+    import { stackX, recordizeX, intervalX, sort } from '$lib/index.js';
 
     import type { StackOptions } from '$lib/transforms/stack.js';
     import type { DataRow } from 'svelteplot/types/index.js';
diff --git a/src/lib/marks/BarY.svelte b/src/lib/marks/BarY.svelte
index 2b4a1e11..e1999ab1 100644
--- a/src/lib/marks/BarY.svelte
+++ b/src/lib/marks/BarY.svelte
@@ -23,7 +23,7 @@
 
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { intervalY, stackY, recordizeY, sort } from 'svelteplot';
+    import { intervalY, stackY, recordizeY, sort } from '$lib/index.js';
 
     import type { StackOptions } from '$lib/transforms/stack.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
diff --git a/src/lib/marks/BollingerX.svelte b/src/lib/marks/BollingerX.svelte
index 3200706a..f8abcba0 100644
--- a/src/lib/marks/BollingerX.svelte
+++ b/src/lib/marks/BollingerX.svelte
@@ -3,7 +3,7 @@
     line representing a moving average and an area representing volatility as a band
 -->
 <script lang="ts" generics="Datum extends DataRecord">
-    import { Area, Line, bollingerX, recordizeX } from 'svelteplot';
+    import { Area, Line, bollingerX, recordizeX } from '$lib/index.js';
     import type {
         BaseMarkProps,
         ChannelAccessor,
diff --git a/src/lib/marks/BollingerY.svelte b/src/lib/marks/BollingerY.svelte
index 627d0a40..1ca484c8 100644
--- a/src/lib/marks/BollingerY.svelte
+++ b/src/lib/marks/BollingerY.svelte
@@ -3,7 +3,7 @@
     line representing a moving average and an area representing volatility as a band
 -->
 <script lang="ts" generics="Datum extends DataRecord">
-    import { Area, Line, bollingerY, recordizeY } from 'svelteplot';
+    import { Area, Line, bollingerY, recordizeY } from '$lib/index.js';
     import type {
         BaseMarkProps,
         ChannelAccessor,
diff --git a/src/lib/marks/BoxX.svelte b/src/lib/marks/BoxX.svelte
index d31cca63..67173366 100644
--- a/src/lib/marks/BoxX.svelte
+++ b/src/lib/marks/BoxX.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
     interface BoxXMarkProps extends ComponentProps<typeof BoxY> {}
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import { BarX, TickX, RuleY, Dot, groupY } from 'svelteplot';
+    import { BarX, TickX, RuleY, Dot, groupY } from '$lib/index.js';
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import { getContext, type ComponentProps } from 'svelte';
     import type { PlotDefaults } from '../types/index.js';
diff --git a/src/lib/marks/BoxY.svelte b/src/lib/marks/BoxY.svelte
index ff60d9ea..6fe8693a 100644
--- a/src/lib/marks/BoxY.svelte
+++ b/src/lib/marks/BoxY.svelte
@@ -29,7 +29,7 @@
     }
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import type { BaseMarkProps, ChannelAccessor, DataRecord } from 'svelteplot/types/index.js';
-    import { groupX, BarY, TickY, RuleX, Dot } from 'svelteplot';
+    import { groupX, BarY, TickY, RuleX, Dot } from '$lib/index.js';
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import { getContext } from 'svelte';
     import type { PlotDefaults } from '../types/index.js';
diff --git a/src/lib/marks/Cell.svelte b/src/lib/marks/Cell.svelte
index bfd0f701..e7156927 100644
--- a/src/lib/marks/Cell.svelte
+++ b/src/lib/marks/Cell.svelte
@@ -23,7 +23,7 @@
     } from '../types/index.js';
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { recordizeY, sort } from 'svelteplot';
+    import { recordizeY, sort } from '$lib/index.js';
     import { resolveChannel } from '../helpers/resolve.js';
 
     import { isValid } from '../helpers/isValid.js';
diff --git a/src/lib/marks/CellX.svelte b/src/lib/marks/CellX.svelte
index 64b26a6f..9bda34f6 100644
--- a/src/lib/marks/CellX.svelte
+++ b/src/lib/marks/CellX.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
     import Cell from './Cell.svelte';
-    import { recordizeY } from 'svelteplot';
+    import { recordizeY } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
     import type { TransformArgsRow } from 'svelteplot/types/index.js';
 
diff --git a/src/lib/marks/CellY.svelte b/src/lib/marks/CellY.svelte
index df134732..9d6fbd68 100644
--- a/src/lib/marks/CellY.svelte
+++ b/src/lib/marks/CellY.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
     import Cell from './Cell.svelte';
-    import { recordizeX } from 'svelteplot';
+    import { recordizeX } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
     import type { TransformArgsRow } from 'svelteplot/types/index.js';
 
diff --git a/src/lib/marks/ColorLegend.svelte b/src/lib/marks/ColorLegend.svelte
index 2d8d8e62..22e47d40 100644
--- a/src/lib/marks/ColorLegend.svelte
+++ b/src/lib/marks/ColorLegend.svelte
@@ -3,12 +3,14 @@
         class: string | null;
     }
     import { getContext } from 'svelte';
-    import { Plot, AxisX, Frame } from 'svelteplot';
+    import Plot from '$lib/Plot.svelte';
+    import AxisX from '$lib/marks/AxisX.svelte';
+    import Frame from '$lib/marks/Frame.svelte';
     import { symbol as d3Symbol } from 'd3-shape';
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '$lib/helpers/symbols.js';
 
-    import type { PlotDefaults, PlotContext } from '../types/index.js';
+    import type { PlotDefaults, PlotContext } from '$lib/types/plot.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 
diff --git a/src/lib/marks/DifferenceY.svelte b/src/lib/marks/DifferenceY.svelte
index c1a56727..619e9b81 100644
--- a/src/lib/marks/DifferenceY.svelte
+++ b/src/lib/marks/DifferenceY.svelte
@@ -53,7 +53,7 @@
         PlotContext,
         PlotDefaults
     } from 'svelteplot/types/index.js';
-    import { Line, Area } from '$lib/marks';
+    import { Line, Area } from '$lib/marks/index.js';
     import { randomId, coalesce } from '$lib/helpers/index.js';
     import { getContext } from 'svelte';
     import { extent, max, min } from 'd3-array';
diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
index 23c41f37..7a188311 100644
--- a/src/lib/marks/Dot.svelte
+++ b/src/lib/marks/Dot.svelte
@@ -25,7 +25,7 @@
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '$lib/helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { sort } from 'svelteplot';
+    import { sort } from '$lib/index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
     import { maybeData, isValid } from '$lib/helpers/index.js';
diff --git a/src/lib/marks/DotX.svelte b/src/lib/marks/DotX.svelte
index 41363746..e0412140 100644
--- a/src/lib/marks/DotX.svelte
+++ b/src/lib/marks/DotX.svelte
@@ -6,7 +6,7 @@
         data: Datum[];
     }
     import Dot from './Dot.svelte';
-    import { recordizeX } from 'svelteplot';
+    import { recordizeX } from '$lib/index.js';
     import type { DataRow } from '../types/index.js';
     import type { ComponentProps } from 'svelte';
 
diff --git a/src/lib/marks/DotY.svelte b/src/lib/marks/DotY.svelte
index 8a12ea81..95f89844 100644
--- a/src/lib/marks/DotY.svelte
+++ b/src/lib/marks/DotY.svelte
@@ -6,7 +6,7 @@
         data: Datum[];
     }
     import Dot from './Dot.svelte';
-    import { recordizeY } from 'svelteplot';
+    import { recordizeY } from '$lib/index.js';
     import type { DataRow } from '../types/index.js';
     import type { ComponentProps } from 'svelte';
 
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index d15c4afe..2250aadb 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -36,7 +36,7 @@
     import { geoPath } from 'd3-geo';
     import { resolveChannel, resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
     import callWithProps from '$lib/helpers/callWithProps.js';
-    import { sort } from '$lib/transforms';
+    import { sort } from '$lib/transforms/index.js';
     import { addEventHandlers } from './helpers/events.js';
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '$lib/transforms/recordize.js';
diff --git a/src/lib/marks/LineX.svelte b/src/lib/marks/LineX.svelte
index b909c69d..7b7a73c5 100644
--- a/src/lib/marks/LineX.svelte
+++ b/src/lib/marks/LineX.svelte
@@ -6,9 +6,9 @@
         data: Datum[];
     }
     import Line from './Line.svelte';
-    import { recordizeX } from 'svelteplot';
+    import { recordizeX } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
-    import type { DataRow } from 'svelteplot';
+    import type { DataRow } from '$lib/index.js';
 
     let { data = [{} as Datum], ...rest }: LineXMarkProps = $props();
 
diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte
index c96ad934..c5def698 100644
--- a/src/lib/marks/LineY.svelte
+++ b/src/lib/marks/LineY.svelte
@@ -6,9 +6,9 @@
         data: Datum[];
     }
     import Line from './Line.svelte';
-    import { recordizeY } from 'svelteplot';
+    import { recordizeY } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
-    import type { DataRow } from 'svelteplot';
+    import type { DataRow } from '$lib/index.js';
 
     let { data = [{} as Datum], ...rest }: LineYMarkProps = $props();
 
diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
index 5c53db1d..dd95bbb5 100644
--- a/src/lib/marks/Rect.svelte
+++ b/src/lib/marks/Rect.svelte
@@ -19,7 +19,7 @@
     }
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { intervalX, intervalY } from 'svelteplot';
+    import { intervalX, intervalY } from '$lib/index.js';
     import type {
         PlotContext,
         DataRecord,
diff --git a/src/lib/marks/RectX.svelte b/src/lib/marks/RectX.svelte
index 4cb8027e..f0b171d0 100644
--- a/src/lib/marks/RectX.svelte
+++ b/src/lib/marks/RectX.svelte
@@ -8,10 +8,10 @@
     }
 
     import Rect from './Rect.svelte';
-    import { intervalY, stackX, recordizeX } from 'svelteplot';
+    import { intervalY, stackX, recordizeX } from '$lib/index.js';
     import type { DataRecord, PlotContext, PlotDefaults } from '../types/index.js';
     import { getContext, type ComponentProps } from 'svelte';
-    import type { StackOptions } from '$lib/transforms/stack';
+    import type { StackOptions } from '$lib/transforms/stack.js';
 
     let markProps: RectXMarkProps = $props();
 
diff --git a/src/lib/marks/RectY.svelte b/src/lib/marks/RectY.svelte
index cad2e500..388eb32d 100644
--- a/src/lib/marks/RectY.svelte
+++ b/src/lib/marks/RectY.svelte
@@ -6,10 +6,10 @@
         stack?: Partial<StackOptions>;
     }
     import Rect from './Rect.svelte';
-    import { intervalX, stackY, recordizeY } from 'svelteplot';
+    import { intervalX, stackY, recordizeY } from '$lib/index.js';
     import type { DataRecord, PlotContext, PlotDefaults } from '../types/index.js';
     import { getContext, type ComponentProps } from 'svelte';
-    import type { StackOptions } from '$lib/transforms/stack';
+    import type { StackOptions } from '$lib/transforms/stack.js';
 
     let markProps: RectYMarkProps = $props();
 
diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
index 70c5c5f4..d0140ac5 100644
--- a/src/lib/marks/Text.svelte
+++ b/src/lib/marks/Text.svelte
@@ -55,7 +55,7 @@
     } from '../types/index.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import Mark from '../Mark.svelte';
-    import { sort } from 'svelteplot';
+    import { sort } from '$lib/index.js';
     import Anchor from './helpers/Anchor.svelte';
 
     import MultilineText from './helpers/MultilineText.svelte';
diff --git a/src/lib/marks/TickX.svelte b/src/lib/marks/TickX.svelte
index af387cf3..2fa9eaf3 100644
--- a/src/lib/marks/TickX.svelte
+++ b/src/lib/marks/TickX.svelte
@@ -33,7 +33,7 @@
         PlotDefaults,
         ConstantAccessor
     } from '../types/index.js';
-    import { recordizeX } from 'svelteplot';
+    import { recordizeX } from '$lib/index.js';
     import { projectX, projectY } from '../helpers/scales.js';
     import { isValid } from '../helpers/isValid.js';
     import { testFilter, parseInset } from '$lib/helpers/index.js';
diff --git a/src/lib/marks/TickY.svelte b/src/lib/marks/TickY.svelte
index 2cdcbbb3..188c43b2 100644
--- a/src/lib/marks/TickY.svelte
+++ b/src/lib/marks/TickY.svelte
@@ -32,7 +32,7 @@
         ConstantAccessor,
         PlotDefaults
     } from '../types/index.js';
-    import { recordizeY } from 'svelteplot';
+    import { recordizeY } from '$lib/index.js';
     import { projectX, projectY } from '../helpers/scales.js';
     import { isValid } from '../helpers/isValid.js';
     import { testFilter, parseInset } from '$lib/helpers/index.js';
diff --git a/src/lib/marks/Vector.svelte b/src/lib/marks/Vector.svelte
index 4fb50124..52c12130 100644
--- a/src/lib/marks/Vector.svelte
+++ b/src/lib/marks/Vector.svelte
@@ -41,7 +41,7 @@
     import { pathRound as path } from 'd3-path';
 
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { sort } from 'svelteplot';
+    import { sort } from '$lib/index.js';
     import Mark from '../Mark.svelte';
     //import DotCanvas from './helpers/DotCanvas.svelte';
     import { maybeData, testFilter, isValid } from '$lib/helpers/index.js';
diff --git a/src/lib/marks/helpers/Anchor.svelte b/src/lib/marks/helpers/Anchor.svelte
index 4ff924e8..c4ceeadd 100644
--- a/src/lib/marks/helpers/Anchor.svelte
+++ b/src/lib/marks/helpers/Anchor.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { resolveProp } from '$lib/helpers/resolve';
+    import { resolveProp } from '$lib/helpers/resolve.js';
 
     let { datum = {}, options = {}, children } = $props();
 
diff --git a/src/lib/marks/helpers/AreaCanvas.svelte b/src/lib/marks/helpers/AreaCanvas.svelte
index 7df764fc..a5d47943 100644
--- a/src/lib/marks/helpers/AreaCanvas.svelte
+++ b/src/lib/marks/helpers/AreaCanvas.svelte
@@ -12,7 +12,7 @@
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
-    import { resolveColor } from './canvas';
+    import { resolveColor } from './canvas.js';
 
     let {
         mark,
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index b63cd11b..dc7ea6e8 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -160,7 +160,8 @@
                         tick,
                         options,
                         'stroke',
-                        { x: true }
+                        { x: true },
+                        true
                     )}
                     <line
                         style={tickLineStyle}
@@ -185,7 +186,8 @@
                             stroke: null
                         },
                         'fill',
-                        { x: true }
+                        { x: true },
+                        true
                     )}
                     <text
                         bind:this={tickTextElements[t]}
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index 0660c3de..8e8fc512 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -21,12 +21,14 @@
         tickSize: number;
         tickPadding: number;
         tickFontSize: ConstantAccessor<number>;
+        tickClass: ConstantAccessor<number>;
         marginLeft: number;
         width: number;
         title: string | null;
         options: {
             dx: ConstantAccessor<number>;
             dy: ConstantAccessor<number>;
+            textAnchor: 'start' | 'middle' | 'end';
         };
         plot: PlotState;
         text: boolean | null;
@@ -93,6 +95,8 @@
     // generate id used for registering margins
     const id = randomId();
 
+    $inspect({ options });
+
     const { autoMarginLeft, autoMarginRight, autoMarginTop } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
@@ -160,7 +164,8 @@
                     stroke: null
                 },
                 'fill',
-                { y: true }
+                { y: true },
+                true
             )}
             <g
                 class="tick {tickClass_ || ''}"
@@ -173,7 +178,8 @@
                         tick,
                         options,
                         'stroke',
-                        { y: true }
+                        { y: true },
+                        true
                     )}
                     <line
                         style={tickLineStyle}
@@ -199,10 +205,6 @@
         stroke: currentColor;
     }
     text {
-        opacity: 0.8;
         fill: currentColor;
     }
-    text.is-left {
-        text-anchor: end;
-    }
 </style>
diff --git a/src/lib/marks/helpers/CanvasLayer.svelte b/src/lib/marks/helpers/CanvasLayer.svelte
index f717b830..ec1b707c 100644
--- a/src/lib/marks/helpers/CanvasLayer.svelte
+++ b/src/lib/marks/helpers/CanvasLayer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext } from 'svelteplot';
+    import type { PlotContext } from '$lib/index.js';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { MediaQuery } from 'svelte/reactivity';
     import type { Attachment } from 'svelte/attachments';
diff --git a/src/lib/marks/helpers/DotCanvas.svelte b/src/lib/marks/helpers/DotCanvas.svelte
index eea1d0b4..9a717baa 100644
--- a/src/lib/marks/helpers/DotCanvas.svelte
+++ b/src/lib/marks/helpers/DotCanvas.svelte
@@ -13,7 +13,7 @@
     import CanvasLayer from './CanvasLayer.svelte';
     import { getContext } from 'svelte';
     import { devicePixelRatio } from 'svelte/reactivity/window';
-    import { resolveColor } from './canvas';
+    import { resolveColor } from './canvas.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
diff --git a/src/lib/marks/helpers/LineCanvas.svelte b/src/lib/marks/helpers/LineCanvas.svelte
index fce8a0d5..7d777ede 100644
--- a/src/lib/marks/helpers/LineCanvas.svelte
+++ b/src/lib/marks/helpers/LineCanvas.svelte
@@ -12,7 +12,7 @@
     import CanvasLayer from './CanvasLayer.svelte';
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
-    import { resolveColor } from './canvas';
+    import { resolveColor } from './canvas.js';
 
     let {
         mark,
diff --git a/src/lib/marks/helpers/LinearGradientX.svelte b/src/lib/marks/helpers/LinearGradientX.svelte
index 13b30220..23c3f81e 100644
--- a/src/lib/marks/helpers/LinearGradientX.svelte
+++ b/src/lib/marks/helpers/LinearGradientX.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from 'svelteplot';
+    import type { PlotContext, RawValue } from '$lib/index.js';
 
     let {
         id,
diff --git a/src/lib/marks/helpers/LinearGradientY.svelte b/src/lib/marks/helpers/LinearGradientY.svelte
index a8e5495d..a149a799 100644
--- a/src/lib/marks/helpers/LinearGradientY.svelte
+++ b/src/lib/marks/helpers/LinearGradientY.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from 'svelteplot';
+    import type { PlotContext, RawValue } from '$lib/index.js';
 
     let {
         id,
diff --git a/src/lib/marks/helpers/MultilineText.svelte b/src/lib/marks/helpers/MultilineText.svelte
index b49f9e00..4e166dec 100644
--- a/src/lib/marks/helpers/MultilineText.svelte
+++ b/src/lib/marks/helpers/MultilineText.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { resolveProp, resolveStyles } from 'svelteplot/helpers/resolve';
     import { getContext, type ComponentProps } from 'svelte';
-    import type { PlotContext, ScaledDataRecord, UsedScales } from 'svelteplot';
+    import type { PlotContext, ScaledDataRecord, UsedScales } from '$lib/index.js';
     import type Text from '../Text.svelte';
     import { CSS_VAR } from 'svelteplot/constants';
     import { maybeFromPixel, maybeFromRem } from 'svelteplot/helpers/getBaseStyles';
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 07f703ca..e0a59509 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -36,8 +36,8 @@ Helper component for rendering rectangular marks in SVG
         UsedScales,
         PlotContext,
         DataRecord
-    } from 'svelteplot';
-    import { addEventHandlers } from './events';
+    } from '$lib/index.js';
+    import { addEventHandlers } from './events.js';
     import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
 
diff --git a/src/lib/marks/helpers/Regression.svelte b/src/lib/marks/helpers/Regression.svelte
index 26725952..bad79114 100644
--- a/src/lib/marks/helpers/Regression.svelte
+++ b/src/lib/marks/helpers/Regression.svelte
@@ -33,7 +33,7 @@
 
 <script lang="ts">
     import { getContext } from 'svelte';
-    import { Line, Area } from 'svelteplot';
+    import { Line, Area } from '$lib/index.js';
 
     import {
         regressionLinear,
@@ -47,7 +47,7 @@
     import { resolveChannel } from '$lib/helpers/resolve.js';
     import { confidenceInterval } from '$lib/helpers/math.js';
     import callWithProps from '$lib/helpers/callWithProps.js';
-    import { isDate } from '$lib/helpers/typeChecks';
+    import { isDate } from '$lib/helpers/typeChecks.js';
 
     const regressions = new Map<RegressionType, typeof regressionLinear>([
         ['linear', regressionLinear],
diff --git a/src/lib/marks/helpers/events.ts b/src/lib/marks/helpers/events.ts
index 044eb28e..5da2342b 100644
--- a/src/lib/marks/helpers/events.ts
+++ b/src/lib/marks/helpers/events.ts
@@ -1,4 +1,4 @@
-import type { BaseMarkProps, DataRecord, PlotScale, PlotState } from '$lib/types.js';
+import type { BaseMarkProps, DataRecord, PlotScale, PlotState } from '$lib/types/index.js';
 import type { MouseEventHandler } from 'svelte/elements';
 import { pick } from 'es-toolkit';
 import { RAW_VALUE } from '$lib/transforms/recordize.js';
diff --git a/src/lib/transforms/bin.ts b/src/lib/transforms/bin.ts
index 0c75331a..b24a1826 100644
--- a/src/lib/transforms/bin.ts
+++ b/src/lib/transforms/bin.ts
@@ -1,6 +1,6 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { DataRecord, RawValue } from '$lib/types.js';
-import type { TransformArg } from '$lib/types.js';
+import type { DataRecord, RawValue } from '$lib/types/index.js';
+import type { TransformArg } from '$lib/types/index.js';
 import { maybeInterval } from '$lib/helpers/autoTicks.js';
 import {
     bin as d3Bin,
diff --git a/src/lib/transforms/bollinger.test.ts b/src/lib/transforms/bollinger.test.ts
index d1c4a0fb..447ecc51 100644
--- a/src/lib/transforms/bollinger.test.ts
+++ b/src/lib/transforms/bollinger.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { bollingerX, bollingerY } from './bollinger.js';
-import type { TransformArg } from '../src/lib/types';
+import type { TransformArg } from '../src/lib/types/index.js';
 
 describe('bollinger transform', () => {
     const mockData = [
diff --git a/src/lib/transforms/bollinger.ts b/src/lib/transforms/bollinger.ts
index 7ebf6aae..6624b77b 100644
--- a/src/lib/transforms/bollinger.ts
+++ b/src/lib/transforms/bollinger.ts
@@ -1,5 +1,5 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types/index.js';
 
 export type BollingerOptions = {
     /**
diff --git a/src/lib/transforms/centroid.ts b/src/lib/transforms/centroid.ts
index c12f2d5a..12b5160c 100644
--- a/src/lib/transforms/centroid.ts
+++ b/src/lib/transforms/centroid.ts
@@ -1,5 +1,5 @@
 import { resolveProp } from '$lib/helpers/resolve.js';
-import type { DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types/index.js';
 import { geoCentroid as d3GeoCentroid } from 'd3-geo';
 import type { Channels } from 'svelteplot/types';
 
diff --git a/src/lib/transforms/facet.ts b/src/lib/transforms/facet.ts
index 61951ab2..234521b3 100644
--- a/src/lib/transforms/facet.ts
+++ b/src/lib/transforms/facet.ts
@@ -1 +1 @@
-import type { DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types/index.js';
diff --git a/src/lib/transforms/filter.ts b/src/lib/transforms/filter.ts
index 8a4dd7c5..feebe361 100644
--- a/src/lib/transforms/filter.ts
+++ b/src/lib/transforms/filter.ts
@@ -1,5 +1,5 @@
 import { testFilter } from '$lib/helpers/index.js';
-import type { DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types/index.js';
 
 export function filter({ data, ...channels }: TransformArg<DataRecord>): TransformArg<DataRecord> {
     return {
diff --git a/src/lib/transforms/group.test.ts b/src/lib/transforms/group.test.ts
index 60f97f4a..d15d6c31 100644
--- a/src/lib/transforms/group.test.ts
+++ b/src/lib/transforms/group.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { group, groupX, groupY, groupZ } from './group.js';
-import type { DataRecord } from '$lib/types.js';
+import type { DataRecord } from '$lib/types/index.js';
 import { csvParse } from 'd3-dsv';
 import { readFileSync } from 'fs';
 
diff --git a/src/lib/transforms/group.ts b/src/lib/transforms/group.ts
index 877ccb46..4a5aa378 100644
--- a/src/lib/transforms/group.ts
+++ b/src/lib/transforms/group.ts
@@ -2,7 +2,7 @@ import { groupFacetsAndZ } from '$lib/helpers/group.js';
 import { testFilter } from '$lib/helpers/index.js';
 import { reduceOutputs, type ReducerName } from '$lib/helpers/reduce.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { DataRecord, DataRow, RawValue, TransformArg } from '$lib/types.js';
+import type { DataRecord, DataRow, RawValue, TransformArg } from '$lib/types/index.js';
 import { groups as d3Groups } from 'd3-array';
 import { omit } from '$lib/helpers/index.js';
 import { maybeInterval } from '$lib/helpers/autoTicks.js';
diff --git a/src/lib/transforms/interval.ts b/src/lib/transforms/interval.ts
index c410306b..9202053a 100644
--- a/src/lib/transforms/interval.ts
+++ b/src/lib/transforms/interval.ts
@@ -1,6 +1,6 @@
 import { maybeInterval } from '$lib/helpers/autoTicks.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { PlotState, TransformArg } from '$lib/types.js';
+import type { PlotState, TransformArg } from '$lib/types/index.js';
 
 export function intervalX<T>(args: TransformArg<T>, { plot }: { plot: PlotState }) {
     return interval('x', plot, args);
diff --git a/src/lib/transforms/jitter.ts b/src/lib/transforms/jitter.ts
index d362f22d..dddb4111 100644
--- a/src/lib/transforms/jitter.ts
+++ b/src/lib/transforms/jitter.ts
@@ -1,4 +1,4 @@
-import type { Channels, DataRecord, TransformArg } from '$lib/types.js';
+import type { Channels, DataRecord, TransformArg } from '$lib/types/index.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
 import { randomUniform, randomNormal } from 'd3-random';
 import { isDate } from '$lib/helpers/typeChecks.js';
diff --git a/src/lib/transforms/map.ts b/src/lib/transforms/map.ts
index 650fbfe6..68daa67b 100644
--- a/src/lib/transforms/map.ts
+++ b/src/lib/transforms/map.ts
@@ -7,7 +7,7 @@ import type {
     MapMethod,
     DataRecord,
     Channels
-} from '$lib/types.js';
+} from '$lib/types/index.js';
 import { count, rank } from 'd3-array';
 import { groupFacetsAndZ } from '$lib/helpers/group.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
diff --git a/src/lib/transforms/normalize.ts b/src/lib/transforms/normalize.ts
index f011f85f..9d7dd6ee 100644
--- a/src/lib/transforms/normalize.ts
+++ b/src/lib/transforms/normalize.ts
@@ -1,5 +1,5 @@
 import { mapX, mapY } from './map.js';
-import type { TransformArg, RawValue, MapIndexObject } from '$lib/types.js';
+import type { TransformArg, RawValue, MapIndexObject } from '$lib/types/index.js';
 import { min, max, mean, median, sum, deviation, extent } from 'd3-array';
 
 type NormalizeBasis =
diff --git a/src/lib/transforms/recordize.test.ts b/src/lib/transforms/recordize.test.ts
index 5715cd4f..760872d7 100644
--- a/src/lib/transforms/recordize.test.ts
+++ b/src/lib/transforms/recordize.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { recordizeXY, RAW_VALUE } from './recordize.js';
-import type { RawValue } from '$lib/types.js';
+import type { RawValue } from '$lib/types/index.js';
 
 const coordsArray: [RawValue, RawValue][] = [
     [0, 4],
diff --git a/src/lib/transforms/recordize.ts b/src/lib/transforms/recordize.ts
index b5125ae0..d1c40cc0 100644
--- a/src/lib/transforms/recordize.ts
+++ b/src/lib/transforms/recordize.ts
@@ -1,5 +1,10 @@
 import isDataRecord from '$lib/helpers/isDataRecord.js';
-import type { DataRecord, TransformArgsRow, TransformArgsRecord, RawValue } from '$lib/types.js';
+import type {
+    DataRecord,
+    TransformArgsRow,
+    TransformArgsRecord,
+    RawValue
+} from '$lib/types/index.js';
 
 export const INDEX = Symbol('index');
 export const RAW_VALUE = Symbol('originalValue');
diff --git a/src/lib/transforms/rename.test.ts b/src/lib/transforms/rename.test.ts
index dfe06725..1472c463 100644
--- a/src/lib/transforms/rename.test.ts
+++ b/src/lib/transforms/rename.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { renameChannels } from './rename.js';
-import type { DataRecord } from '$lib/types.js';
+import type { DataRecord } from '$lib/types/index.js';
 
 const inputData: DataRecord[] = [
     { year: 2000, facet: 'A', value: 10 },
diff --git a/src/lib/transforms/rename.ts b/src/lib/transforms/rename.ts
index 73251fe1..292ec920 100644
--- a/src/lib/transforms/rename.ts
+++ b/src/lib/transforms/rename.ts
@@ -1,5 +1,5 @@
-import type { DataRecord } from '$lib/types.js';
-import type { ScaledChannelName, TransformArg } from '$lib/types.js';
+import type { DataRecord } from '$lib/types/index.js';
+import type { ScaledChannelName, TransformArg } from '$lib/types/index.js';
 
 type RenameChannelsOptions = Partial<Record<ScaledChannelName, ScaledChannelName>>;
 type ReplaceChannelsOptions = Partial<Record<ScaledChannelName, ScaledChannelName[]>>;
diff --git a/src/lib/transforms/select.ts b/src/lib/transforms/select.ts
index 5cc4c762..09ee8957 100644
--- a/src/lib/transforms/select.ts
+++ b/src/lib/transforms/select.ts
@@ -1,6 +1,6 @@
 import { groupFacetsAndZ } from '$lib/helpers/group.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { ChannelName, DataRecord, TransformArg } from '$lib/types.js';
+import type { ChannelName, DataRecord, TransformArg } from '$lib/types/index.js';
 
 type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
 
diff --git a/src/lib/transforms/shift.test.ts b/src/lib/transforms/shift.test.ts
index e5569886..78cfd1ce 100644
--- a/src/lib/transforms/shift.test.ts
+++ b/src/lib/transforms/shift.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { shiftX, shiftY } from './shift.js';
-import type { DataRecord } from '$lib/types.js';
+import type { DataRecord } from '$lib/types/index.js';
 
 describe('shiftX', () => {
     it('should shift the x values by a number', () => {
diff --git a/src/lib/transforms/shift.ts b/src/lib/transforms/shift.ts
index 53bc35b8..271977d2 100644
--- a/src/lib/transforms/shift.ts
+++ b/src/lib/transforms/shift.ts
@@ -1,6 +1,6 @@
 import { resolveChannel } from '$lib/helpers/resolve.js';
 import { maybeTimeInterval } from '$lib/helpers/time.js';
-import type { DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types/index.js';
 
 type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
     {
diff --git a/src/lib/transforms/sort.test.ts b/src/lib/transforms/sort.test.ts
index 4799e026..ef0d313d 100644
--- a/src/lib/transforms/sort.test.ts
+++ b/src/lib/transforms/sort.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { sort, shuffle } from './sort.js';
-import type { DataRecord } from '$lib/types.js';
+import type { DataRecord } from '$lib/types/index.js';
 
 const data: DataRecord[] = [
     { A: 1, B: 7 },
diff --git a/src/lib/transforms/sort.ts b/src/lib/transforms/sort.ts
index 1278cb13..f2c93fe1 100644
--- a/src/lib/transforms/sort.ts
+++ b/src/lib/transforms/sort.ts
@@ -1,6 +1,6 @@
 import isDataRecord from '$lib/helpers/isDataRecord.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { DataRecord, DataRow, TransformArg } from '$lib/types.js';
+import type { DataRecord, DataRow, TransformArg } from '$lib/types/index.js';
 import { shuffler } from 'd3-array';
 import { randomLcg } from 'd3-random';
 
diff --git a/src/lib/transforms/stack.ts b/src/lib/transforms/stack.ts
index fc0c7f80..4e35317f 100644
--- a/src/lib/transforms/stack.ts
+++ b/src/lib/transforms/stack.ts
@@ -7,7 +7,7 @@ import type {
     DataRecord,
     TransformArg,
     ChannelName
-} from '$lib/types.js';
+} from '$lib/types/index.js';
 import {
     stack,
     stackOffsetExpand,
diff --git a/src/lib/transforms/window.ts b/src/lib/transforms/window.ts
index d3585205..f76b0e3d 100644
--- a/src/lib/transforms/window.ts
+++ b/src/lib/transforms/window.ts
@@ -2,7 +2,7 @@ import { maybeInterval } from '$lib/helpers/autoTicks.js';
 import { isValid } from '$lib/helpers/index.js';
 import { mayberReducer, type ReducerName } from '$lib/helpers/reduce.js';
 import { resolveChannel } from '$lib/helpers/resolve.js';
-import type { DataRecord, ScaledChannelName, TransformArg } from '$lib/types.js';
+import type { DataRecord, ScaledChannelName, TransformArg } from '$lib/types/index.js';
 import { groups as d3Groups } from 'd3-array';
 
 type WindowOptions = {
diff --git a/src/lib/types.ts b/src/lib/types.ts
deleted file mode 100644
index d83dd066..00000000
--- a/src/lib/types.ts
+++ /dev/null
@@ -1,1123 +0,0 @@
-import type { ScaleBand, ScaleLinear, ScaleOrdinal } from 'd3-scale';
-import type { ComponentProps, Snippet } from 'svelte';
-import type { MouseEventHandler } from 'svelte/elements';
-import type { MarkerShape } from './marks/helpers/Marker.svelte';
-import type { Writable } from 'svelte/store';
-import type * as CSS from 'csstype';
-
-import type {
-    Area,
-    AreaX,
-    AreaY,
-    Arrow,
-    AxisX,
-    AxisY,
-    BarX,
-    BarY,
-    BoxX,
-    BoxY,
-    Brush,
-    BrushX,
-    BrushY,
-    Cell,
-    Dot,
-    Frame,
-    Geo,
-    Graticule,
-    GridX,
-    GridY,
-    Line,
-    Link,
-    Pointer,
-    Rect,
-    RectX,
-    RectY,
-    RuleX,
-    RuleY,
-    Sphere,
-    Spike,
-    Text,
-    TickX,
-    TickY,
-    Vector
-} from './marks';
-import type { GeoProjection } from 'd3-geo';
-import type { Clip } from './helpers/projection';
-
-export type MarkType =
-    | 'area'
-    | 'arrow'
-    | 'axisX'
-    | 'axisY'
-    | 'barX'
-    | 'barY'
-    | 'cell'
-    | 'dot'
-    | 'vector'
-    | 'frame'
-    | 'geo'
-    | 'gridX'
-    | 'gridY'
-    | 'line'
-    | 'rect'
-    | 'regression'
-    | 'ruleX'
-    | 'ruleY'
-    | 'swoopyArrow'
-    | 'text'
-    | 'tickX'
-    | 'tickY';
-
-export type ScaleName =
-    | 'x'
-    | 'y'
-    | 'r'
-    | 'color'
-    | 'opacity'
-    | 'length'
-    | 'symbol'
-    | 'fx'
-    | 'fy'
-    | 'projection';
-
-export type ScaleType =
-    | 'linear'
-    | 'pow'
-    | 'sqrt'
-    | 'log'
-    | 'symlog'
-    | 'time'
-    | 'point'
-    | 'ordinal'
-    | 'sequential'
-    | 'band'
-    | 'categorical'
-    | 'cyclical'
-    | 'threshold'
-    | 'quantile-cont'
-    | 'quantile'
-    | 'quantize'
-    | 'diverging'
-    | 'diverging-log'
-    | 'diverging-pow'
-    | 'diverging-sqrt'
-    | 'diverging-symlog';
-
-export type Mark<T> = {
-    id: symbol;
-    type: MarkType;
-    channels: ScaledChannelName[];
-    scales: Set<ScaleName>;
-    data: DataRecord<T>[];
-    options: T;
-};
-
-export type ScaledChannelName =
-    | 'fill'
-    | 'fillOpacity'
-    | 'opacity'
-    | 'r'
-    | 'length'
-    | 'stroke'
-    | 'strokeOpacity'
-    | 'symbol'
-    | 'fx'
-    | 'fy'
-    | 'x'
-    | 'x1'
-    | 'x2'
-    | 'y'
-    | 'y1'
-    | 'y2';
-
-export type ChannelName = ScaledChannelName | 'z' | 'sort' | 'filter' | 'interval';
-
-export type RawValue = number | Date | boolean | string | symbol;
-
-export type ScaleOptions = {
-    /**
-     * Override the automatic scale type detection.
-     */
-    type: ScaleType | 'auto';
-    /**
-     * Set a custom domain for the scale instead of auto-computing the domain
-     * from the mark data channels.
-     */
-    domain?: RawValue[];
-    /**
-     * Set a custom range for the scale.
-     */
-    range?: RawValue[];
-    /**
-     * Reverse the scale.
-     */
-    reverse: boolean;
-    label?: string;
-    interval?: string | number;
-    // quantitative scales
-    clamp: boolean;
-    nice: boolean;
-    zero: boolean;
-    round: boolean;
-    percent: boolean;
-    transform?: (d: RawValue) => RawValue;
-    // point & band scales
-    /**
-     * set the padding for band scales
-     */
-    padding: number;
-    /**
-     * set the align for band or point scales
-     */
-    align: number;
-    // band scales
-    /**
-     * set the inner padding for band scales
-     */
-    paddingInner?: number;
-    /**
-     * set the outer padding for band scales
-     */
-    paddingOuter?: number;
-    // position scales
-    insetLeft?: number;
-    insetRight?: number;
-    insetTop?: number;
-    insetBottom?: number;
-    ticks?: (number | Date)[];
-    tickSpacing: number;
-    // log scales
-    base?: number;
-    // sorting for band and point scales
-    sort?:
-        | ChannelAccessor
-        | ((a: RawValue, b: RawValue) => number)
-        | {
-              channel: string;
-              order: 'ascending' | 'descending';
-          };
-    // symlog scales
-    constant?: number;
-};
-
-export type ColorScaleOptions = ScaleOptions & {
-    legend: boolean;
-    type:
-        | ScaleType
-        | 'categorical'
-        | 'sequential'
-        | 'cyclical'
-        | 'threshold'
-        | 'quantile'
-        | 'quantize'
-        | 'diverging'
-        | 'diverging-log'
-        | 'diverging-pow'
-        | 'diverging-sqrt'
-        | 'diverging-symlog';
-    scheme: string;
-    /**
-     * fallback color used for null/undefined
-     */
-    unknown: string;
-    /**
-     * center value for diverging scales
-     */
-    pivot: number;
-    /**
-     * number of colors for quantize and quantile-threshold scales
-     */
-    n: number;
-    interpolate: (d: any) => typeof d;
-    /**
-     * The tick format for the color scale legend.
-     */
-    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
-};
-
-export type AxisXAnchor = 'bottom' | 'top' | 'both';
-export type AxisYAnchor = 'left' | 'right' | 'both';
-
-export type XScaleOptions = ScaleOptions & {
-    /**
-     * Activate the implicit GridX mark. For more control over the grid styling
-     * and layering, add an explicit GridX mark to your plot instead of using the
-     * implicit grids.
-     */
-    grid: boolean;
-    /**
-     * Controls the position of the implicit AxisX mark, or set to false to disable
-     * the implicit AxisX mark. For more control over the axis styling and layering
-     * add an explicit AxisX mark to your plot instead of using the implicit axes.
-     */
-    axis: AxisXAnchor | false;
-    /**
-     * rotate the axis ticks
-     */
-    tickRotate: number;
-
-    labelAnchor: 'auto' | 'left' | 'center' | 'right';
-
-    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
-};
-
-export type YScaleOptions = ScaleOptions & {
-    /**
-     * Activate the implicit GridY mark. For more control over the grid styling
-     * and layering, add an explicit GridY mark to your plot instead of using the
-     * implicit grids.
-     */
-    grid: boolean;
-    /**
-     * Controls the position of the implicit AxisY mark, or set to false to disable
-     * the implicit AxisY mark. For more control over the axis styling and layering
-     * add an explicit AxisY mark to your plot instead of using the implicit axes.
-     */
-    axis: AxisYAnchor | false;
-    tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
-    /**
-     * rotate the axis ticks
-     */
-    tickRotate: number;
-
-    labelAnchor: 'auto' | 'bottom' | 'middle' | 'top';
-};
-
-export type LegendScaleOptions = ScaleOptions & {
-    legend: boolean;
-};
-
-export type PlotOptions = {
-    /**
-     * The plot title, rendered as H2 tag above the SVG element. Instead of
-     * using the title, you can also pass a "header" snippet and render your
-     * own custom title markup.
-     */
-    title: string;
-    /**
-     * The plot subtitle, rendered as H3 tag above the SVG element. Instead of
-     * using the subtitle, you can also pass a "header" snippet and render your
-     * own custom title markup.
-     */
-    subtitle: string;
-    /**
-     * The plot caption, rendered as FIGCAPTION tag below the SVG element. Instead of
-     * using the caption, you can also pass a "footer" snippet and render your
-     * own custom title markup.
-     */
-    caption: string;
-    /**
-     * By default, the plot will extend to fit 100% of the parent container width. By
-     * setting the maxWidth style property you can limit the width of your plot.
-     */
-    maxWidth?: string;
-    /**
-     * force the plot into a fixed width
-     */
-    width?: number;
-    /**
-     * force the plot into a fixed height
-     */
-    height: 'auto' | number | ((d: number) => number);
-    /**
-     * Convenience option for setting all four margins at once, in px.
-     */
-    margin: number | { top?: number; right?: number; bottom?: number; left?: number };
-    /**
-     * Left margin of the plot, in px.
-     */
-    marginLeft: number;
-    /**
-     * Right margin of the plot, in px.
-     */
-    marginRight: number;
-    /**
-     * Top margin of the plot, in px.
-     */
-    marginTop: number;
-    /**
-     * Bottom margin of the plot, in px.
-     */
-    marginBottom: number;
-    /**
-     * Activates the implicit GridX and GridY marks.
-     */
-    grid: boolean;
-    /**
-     * Activates the implicit AxisX and AxisY marks.
-     */
-    axes: boolean;
-    /**
-     * Activates the implicit frame marks
-     */
-    frame: boolean;
-    /**
-     * Convenience shortcut for setting both the x and y scale insets.
-     */
-    inset: number;
-    /**
-     * Convenience shortcut for setting both the x and y scale paddings
-     */
-    padding: number;
-    /**
-     * Geo-projection
-     */
-    projection:
-        | string
-        | null
-        | {
-              type?: string;
-              rotate?: [number, number] | [number, number, number];
-              domain?: object;
-              inset?: number;
-              clip?: Clip;
-          }
-        | {
-              type: (d: { width: number; height: number }) => GeoProjection;
-          };
-    /**
-     * if not null, computes a default height such that a variation of one
-     * unit in the x dimension is represented by the corresponding number
-     * of pixels as a variation in the y dimension of one unit.
-     */
-    aspectRatio: number | null;
-    /**
-     * Top-level faceting options
-     */
-    facet: Partial<{
-        /**
-         * The data to facet by. Turns on automatic faceting for all marks that
-         * use the exact same data (===)
-         */
-        data: DataRecord<any>[];
-        x: ChannelAccessor;
-        y: ChannelAccessor;
-    }>;
-    /**
-     * Options for the shared x scale.
-     */
-    x: Partial<XScaleOptions>;
-    /**
-     * Options for the shared y scale
-     */
-    y: Partial<YScaleOptions>;
-    /**
-     * Options for the shared radius scale
-     */
-    r: Partial<ScaleOptions>;
-    color: Partial<ColorScaleOptions>;
-    opacity: Partial<ScaleOptions>;
-    symbol: Partial<LegendScaleOptions>;
-    length: Partial<ScaleOptions>;
-    fx: Partial<ScaleOptions>;
-    fy: Partial<ScaleOptions>;
-    children: Snippet<
-        [{ width: number; height: number; options: PlotOptions; scales: PlotScales }]
-    >;
-    /**
-     * You can use the header snippet to render a custom title and subtitle for
-     * your plot, or place a legend above the visualization.
-     */
-    header: Snippet;
-    footer: Snippet;
-    /**
-     * The underlay snippet is useful for adding a layer of custom HTML markup
-     * behind the SVG body of your plot, e.g. for a watermark or background image.
-     */
-    underlay: Snippet<[PlotOptions]>;
-    /**
-     * The overlay snippet is useful for adding a layer of custom HTML markup
-     * in front of the SVG body of your plot, e.g. for HTML tooltips.
-     */
-    overlay: Snippet;
-    facetAxes: Snippet;
-    /**
-     * if you set testid, the plot container will get a data-testid attribute which
-     * can be useful for automatic testing
-     */
-    testid: string;
-    /**
-     * in case you want to give your Plot element an extra CSS class
-     */
-    class: string | null;
-    /**
-     * if set to true, the plot will use the implicit scales
-     */
-    implicitScales: boolean;
-    /**
-     * locale used for automatic axis ticks
-     */
-    locale: string;
-    /**
-     * pass a @emotion/css function to style plot using dynamic classes
-     */
-    css: (d: string) => string | undefined;
-};
-
-export type GenericMarkOptions = Record<string | symbol, any>;
-
-export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
-    ___orig___?: RawValue | [RawValue, RawValue];
-};
-
-export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<
-    Record<ScaledChannelName, any>
-> & {
-    datum: DataRecord<T>;
-};
-
-export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<
-    Record<ScaledChannelName, number | string | boolean | undefined>
-> & {
-    datum: DataRecord<T>;
-    valid: Boolean;
-};
-
-export type DataRow<T = Record<string | symbol, RawValue>> =
-    | DataRecord<T>
-    | RawValue
-    | [number, number]
-    | null;
-
-export type PlotScale = {
-    type: ScaleType;
-    domain: RawValue[];
-    range: RawValue[];
-    autoTitle?: string;
-    /**
-     * The number of marks that are using this scale.
-     */
-    manualActiveMarks: number;
-    /**
-     * Set of accessors used in channels that are bound to this scale.
-     */
-    uniqueScaleProps: Set<ChannelAccessor>;
-    skip: Map<ScaledChannelName, Set<symbol>>;
-    fn: ScaleLinear<RawValue, number> &
-        ScaleBand<RawValue> &
-        ScaleOrdinal<string | Date, number> &
-        ScaleOrdinal<string | Date, string>;
-};
-
-export type CurveName =
-    | 'basis'
-    | 'basis-closed'
-    | 'basis-open'
-    | 'bundle'
-    | 'bump-x'
-    | 'bump-y'
-    | 'cardinal'
-    | 'cardinal-closed'
-    | 'cardinal-open'
-    | 'catmull-rom'
-    | 'catmull-rom-closed'
-    | 'catmull-rom-open'
-    | 'linear'
-    | 'linear-closed'
-    | 'monotone-x'
-    | 'monotone-y'
-    | 'natural'
-    | 'step'
-    | 'step-after'
-    | 'step-before';
-
-export type MarkerOptions = {
-    /**
-     * the marker for the starting point of a line segment
-     */
-    markerStart?: boolean | MarkerShape | Snippet;
-    /**
-     * the marker for any intermediate point of a line segment
-     */
-    markerMid?: boolean | MarkerShape | Snippet;
-    /**
-     * the marker for the end point of a line segment
-     */
-    markerEnd?: boolean | MarkerShape | Snippet;
-    /**
-     * shorthand for setting the marker on all points
-     */
-    marker?: boolean | MarkerShape | Snippet;
-};
-
-export type PlotScales = Record<ScaleName, PlotScale>;
-
-export type ChannelAccessor<T = Record<string | symbol, RawValue>> =
-    | ChannelValue<T>
-    | {
-          /** the channel value */
-          value: ChannelValue<T>;
-          /** you can bypass the scale by passing null */
-          scale: boolean | null;
-      };
-
-export type ChannelValue<T = Record<string | symbol, RawValue>> =
-    | RawValue
-    | keyof T
-    | ((d: T) => RawValue)
-    | null
-    | undefined;
-
-export type ConstantAccessor<T, D = Record<string | symbol, RawValue>> =
-    | T
-    | ((d: D) => T)
-    | null
-    | undefined;
-
-export type PlotState = {
-    width: number;
-    height: number;
-    options: PlotOptions;
-    facetWidth: number;
-    facetHeight: number;
-    plotWidth: number;
-    plotHeight: number;
-    scales: PlotScales;
-    body: HTMLDivElement;
-    /**
-     * True if there's a color scale and a symbol scale and both are bound to the same
-     * single channel accessor.
-     */
-    colorSymbolRedundant: boolean;
-    /**
-     * True if the plot is using filled dot marks.
-     */
-    hasFilledDotMarks: boolean;
-    css: ((d: string) => string) | null;
-};
-
-export type PlotContext = {
-    /**
-     * Registers a mark with the Plot component along with its
-     * data and the channel mappings.
-     */
-    addMark: (mark: Mark<GenericMarkOptions>) => Mark<GenericMarkOptions>;
-    /**
-     * Updates a mark after either the data or the channel mappings
-     * have been updated.
-     */
-    updateMark: (mark: Mark<GenericMarkOptions>) => void;
-    /**
-     * Unregister a mark from the Plot component after the mark
-     * component has been destroyed.
-     */
-    removeMark: (mark: Mark<GenericMarkOptions>) => void;
-    getPlotState: () => PlotState;
-    getTopLevelFacet: () => PlotOptions['facet'];
-    /**
-     * Updates the plots internal facetWidth and facetHeight dimensions
-     * which are used as range for the positional scales x and y.
-     */
-    updateDimensions: (width: number, height: number) => void;
-};
-
-type FacetState = {
-    fx: RawValue;
-    fy: RawValue;
-    /**
-     * True, if the facet is the leftmost in its row
-     */
-    left: boolean;
-    /**
-     * True, if the facet is the topmost in its column
-     */
-    top: boolean;
-    /**
-     * True, if the facet is the rightmost in its row
-     */
-    right: boolean;
-    /**
-     * True, if the facet is the bottommost in its column
-     */
-    bottom: boolean;
-    /**
-     * True, if the adjacent facet to the top is empty
-     */
-    topEmpty: boolean;
-    /**
-     * True, if the adjacent facet to the bottom is empty
-     */
-    bottomEmpty: boolean;
-    /**
-     * True, if the adjacent facet to the left is empty
-     */
-    leftEmpty: boolean;
-    /**
-     * True, if the adjacent facet to the right is empty
-     */
-    rightEmpty: boolean;
-};
-
-/**
- * Test if the given data record is visible in the current facet.
- */
-type TestFacetFunction = (
-    datum: DataRecord<any>,
-    channels: Record<ChannelName, ChannelAccessor>
-) => boolean;
-
-export type FacetContext = {
-    /**
-     * Returns a stateful function that tests whether a specific data
-     * record is visible in the current facet or not.
-     */
-    getTestFacet: () => TestFacetFunction;
-    getFacetState: () => FacetState;
-};
-
-export type LinkableMarkProps<T> = {
-    /**
-     * if set, the mark element will be wrapped in a <a> link element
-     */
-    href?: ConstantAccessor<string, T>;
-    /**
-     * the relationship of the target object to the link object (e.g. "noopener")
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#rel
-     */
-    rel?: ConstantAccessor<string, T>;
-    /**
-     * the link target mime type, e.g. "text/csv"
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#type
-     */
-    type?: ConstantAccessor<string, T>;
-    /**
-     * the target of the link, e.g. "_blank" or "_self"
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target
-     */
-    target?: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string, T>;
-    /**
-     * if set to true, the link will be downloaded instead of navigating to it
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
-     */
-    download?: ConstantAccessor<boolean, T>;
-    // allow data-sveltekit-* attributes on the link element, e.g. data-sveltekit-reload
-    [key: `data-sveltekit-${string}`]: string | boolean | undefined;
-};
-
-export type BaseMarkProps<T> = Partial<{
-    /**
-     * Filter the data without modifying the inferred scales
-     */
-    filter?: ConstantAccessor<boolean, T>;
-    facet?: 'auto' | 'include' | 'exclude';
-    fx: ChannelAccessor<T>;
-    fy: ChannelAccessor<T>;
-    dx: ConstantAccessor<number, T>;
-    dy: ConstantAccessor<number, T>;
-    fill: ChannelAccessor<T>;
-    fillOpacity: ConstantAccessor<number, T>;
-    sort:
-        | string
-        | ConstantAccessor<RawValue, T>
-        | ((a: RawValue, b: RawValue) => number)
-        | {
-              /** sort data using an already defined channel */
-              channel: string;
-              /** sort order */
-              order?: 'ascending' | 'descending';
-          };
-    stroke: ChannelAccessor<T>;
-    strokeWidth: ConstantAccessor<number, T>;
-    strokeOpacity: ConstantAccessor<number, T>;
-    strokeLinejoin: ConstantAccessor<CSS.Property.StrokeLinejoin, T>;
-    strokeLinecap: ConstantAccessor<CSS.Property.StrokeLinecap, T>;
-    strokeMiterlimit: ConstantAccessor<number, T>;
-    opacity: ChannelAccessor<T>;
-    strokeDasharray: ConstantAccessor<string, T>;
-    strokeDashoffset: ConstantAccessor<number, T>;
-    mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, T>;
-    clipPath: string;
-    imageFilter: ConstantAccessor<string, T>;
-    shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, T>;
-    paintOrder: ConstantAccessor<string, T>;
-    onclick?: MouseEventHandler<SVGPathElement>;
-    ondblclick?: MouseEventHandler<SVGPathElement>;
-    onmouseup?: MouseEventHandler<SVGPathElement>;
-    onmousedown?: MouseEventHandler<SVGPathElement>;
-    onmouseenter?: MouseEventHandler<SVGPathElement>;
-    onmousemove?: MouseEventHandler<SVGPathElement>;
-    onmouseleave?: MouseEventHandler<SVGPathElement>;
-    onmouseout?: MouseEventHandler<SVGPathElement>;
-    onmouseover?: MouseEventHandler<SVGPathElement>;
-    onpointercancel?: MouseEventHandler<SVGPathElement>;
-    onpointerdown?: MouseEventHandler<SVGPathElement>;
-    onpointerup?: MouseEventHandler<SVGPathElement>;
-    onpointerenter?: MouseEventHandler<SVGPathElement>;
-    onpointerleave?: MouseEventHandler<SVGPathElement>;
-    onpointermove?: MouseEventHandler<SVGPathElement>;
-    onpointerover?: MouseEventHandler<SVGPathElement>;
-    onpointerout?: MouseEventHandler<SVGPathElement>;
-    ondrag?: MouseEventHandler<SVGPathElement>;
-    ondrop?: MouseEventHandler<SVGPathElement>;
-    ondragstart?: MouseEventHandler<SVGPathElement>;
-    ondragenter?: MouseEventHandler<SVGPathElement>;
-    ondragleave?: MouseEventHandler<SVGPathElement>;
-    ondragover?: MouseEventHandler<SVGPathElement>;
-    ondragend?: MouseEventHandler<SVGPathElement>;
-    ontouchstart?: MouseEventHandler<SVGPathElement>;
-    ontouchmove?: MouseEventHandler<SVGPathElement>;
-    ontouchend?: MouseEventHandler<SVGPathElement>;
-    ontouchcancel?: MouseEventHandler<SVGPathElement>;
-    oncontextmenu?: MouseEventHandler<SVGPathElement>;
-    onwheel?: MouseEventHandler<SVGPathElement>;
-    /**
-     * if you want to give your mark element an extra CSS class
-     */
-    class: string | null;
-    cursor: ConstantAccessor<CSS.Property.Cursor, T>;
-}>;
-
-export type BorderRadius =
-    | number
-    | {
-          topLeft?: number;
-          topRight?: number;
-          bottomRight?: number;
-          bottomLeft?: number;
-      };
-
-export type BaseRectMarkProps<T> = {
-    inset?: ConstantAccessor<number, T>;
-    insetLeft?: ConstantAccessor<number, T>;
-    insetTop?: ConstantAccessor<number, T>;
-    insetRight?: ConstantAccessor<number, T>;
-    insetBottom?: ConstantAccessor<number, T>;
-    borderRadius?: BorderRadius;
-};
-
-export type Channels<T> = Record<
-    string,
-    ChannelAccessor<T> | ConstantAccessor<string | number | boolean | symbol, T>
->;
-
-export type TransformArg<T> = Channels<T> & BaseMarkProps<T> & { data: T[] };
-export type MapArg<T> = Channels<T> & { data: T[] };
-
-export type TransformArgsRow = Partial<Channels> & { data: DataRow[] };
-export type TransformArgsRecord = Partial<Channels> & { data: DataRecord[] };
-
-export type ColorScheme =
-    | 'brbg'
-    | 'prgn'
-    | 'piyg'
-    | 'puor'
-    | 'rdbu'
-    | 'rdgy'
-    | 'rdylbu'
-    | 'rdylgn'
-    | 'spectral'
-    | 'burd'
-    | 'buylrd'
-    | 'blues'
-    | 'greens'
-    | 'grays'
-    | 'greys'
-    | 'oranges'
-    | 'purples'
-    | 'reds'
-    | 'turbo'
-    | 'viridis'
-    | 'magma'
-    | 'inferno'
-    | 'plasma'
-    | 'cividis'
-    | 'cubehelix'
-    | 'warm'
-    | 'cool'
-    | 'bugn'
-    | 'bupu'
-    | 'gnbu'
-    | 'orrd'
-    | 'pubu'
-    | 'pubugn'
-    | 'purd'
-    | 'rdpu'
-    | 'ylgn'
-    | 'ylgnbu'
-    | 'ylorbr'
-    | 'ylorrd'
-    | 'rainbow'
-    | 'sinebow'
-    | 'accent'
-    | 'category10'
-    | 'dark2'
-    | 'paired'
-    | 'pastel1'
-    | 'pastel2'
-    | 'set1'
-    | 'set2'
-    | 'set3'
-    | 'tableau10'
-    | 'observable10';
-
-// list of all prossible style props on marks
-export type MarkStyleProps =
-    | 'strokeDasharray'
-    | 'strokeLinejoin'
-    | 'strokeLinecap'
-    | 'opacity'
-    | 'cursor'
-    | 'pointerEvents'
-    | 'blend'
-    | 'fill'
-    | 'fillOpacity'
-    | 'fontWeight'
-    | 'fontVariant'
-    | 'fontSize'
-    | 'fontStyle'
-    | 'stroke'
-    | 'strokeWidth'
-    | 'strokeOpacity'
-    | 'x'
-    | 'y'
-    | 'clipPath'
-    | 'mask'
-    | 'filter'
-    | 'angle'
-    | 'radius'
-    | 'symbol'
-    | 'textAnchor'
-    | 'width';
-
-export type AutoMarginStores = {
-    autoMarginTop: Writable<Map<string, number>>;
-    autoMarginLeft: Writable<Map<string, number>>;
-    autoMarginRight: Writable<Map<string, number>>;
-    autoMarginBottom: Writable<Map<string, number>>;
-};
-
-type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title' | 'automatic' | 'children';
-
-/**
- * these are the default options for the plot marks that can be set using
- * the 'svelteplot/defaults' context.
- */
-export type PlotDefaults = {
-    /**
-     * default plot height
-     */
-    height: number;
-    /**
-     * default plot inset
-     */
-    inset: number;
-    /**
-     * default color scheme
-     */
-    colorScheme: ColorScheme;
-    categoricalColorScheme: ColorScheme | string[];
-    /**
-     * fallback color to be used for null/NA
-     */
-    unknown: string;
-    /**
-     * optional @emotion/css function to style the plot
-     */
-    css: (d: string) => string | undefined;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a point scale
-     */
-    pointScaleHeight: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a band scale
-     */
-    bandScaleHeight: number;
-    /**
-     * initial width of the plot before measuring the actual width
-     */
-    initialWidth: number;
-    /**
-     * locale, used for automatic axis ticks
-     */
-    locale: string;
-    /**
-     * default number format for axis ticks
-     */
-    numberFormat: Intl.NumberFormatOptions;
-    /**
-     * default dot radius for line markers, used in dot, circle, and circle-stroke markers
-     */
-    markerDotRadius: number;
-    /**
-     * default props for area marks, applied to area, areaX, and areaY marks
-     */
-    area: Partial<Omit<ComponentProps<typeof Area>, IgnoreDefaults>>;
-    /**
-     * default props for areaX marks
-     */
-    areaX: Partial<Omit<ComponentProps<typeof AreaX>, IgnoreDefaults>>;
-    /**
-     * default props for areaY marks
-     */
-    areaY: Partial<Omit<ComponentProps<typeof AreaY>, IgnoreDefaults>>;
-    /**
-     * default props for arrow marks
-     */
-    arrow: Partial<Omit<ComponentProps<typeof Arrow>, IgnoreDefaults>>;
-    /**
-     * default props for axis marks, applied to both axisX and axisY marks
-     */
-    axis: Partial<
-        Omit<
-            ComponentProps<typeof AxisX>,
-            'data' | 'facet' | ChannelName | 'facetAnchor' | 'labelAnchor' | 'anchor'
-        > & { implicit: boolean }
-    >;
-    /**
-     * default props for axisX marks
-     */
-    axisX: Partial<Omit<ComponentProps<typeof AxisX>, IgnoreDefaults> & { implicit: boolean }>;
-    /**
-     * default props for axisY marks
-     */
-    axisY: Partial<Omit<ComponentProps<typeof AxisY>, IgnoreDefaults> & { implicit: boolean }>;
-    /**
-     * default props for bar marks, applied to both barX and barY marks
-     */
-    bar: Partial<Omit<ComponentProps<typeof BarX>, IgnoreDefaults>>;
-    /**
-     * default props for barX marks
-     */
-    barX: Partial<Omit<ComponentProps<typeof BarX>, IgnoreDefaults>>;
-    /**
-     * default props for barY marks
-     */
-    barY: Partial<Omit<ComponentProps<typeof BarY>, IgnoreDefaults>>;
-    /**
-     * default props for box marks, applied to boxX and boxY marks
-     */
-    box: Partial<Omit<ComponentProps<typeof BoxX>, IgnoreDefaults>>;
-    /**
-     * default props for boxX marks
-     */
-    boxX: Partial<Omit<ComponentProps<typeof BoxX>, IgnoreDefaults>>;
-    /**
-     * default props for boxY marks
-     */
-    boxY: Partial<Omit<ComponentProps<typeof BoxY>, IgnoreDefaults>>;
-    /**
-     * default props for brush marks, applied to brush, brushX and brushY marks
-     */
-    brush: Partial<Omit<ComponentProps<typeof Brush>, IgnoreDefaults | 'limitDimension'>>;
-    /**
-     * default props for brushX marks
-     */
-    brushX: Partial<Omit<ComponentProps<typeof BrushX>, IgnoreDefaults>>;
-    /**
-     * default props for brushY marks
-     */
-    brushY: Partial<Omit<ComponentProps<typeof BrushY>, IgnoreDefaults>>;
-    /**
-     * default props for cell marks
-     */
-    cell: Partial<Omit<ComponentProps<typeof Cell>, IgnoreDefaults>>;
-    /**
-     * default props for dot marks
-     */
-    dot: Partial<Omit<ComponentProps<typeof Dot>, IgnoreDefaults>>;
-    /**
-     * default props for frame marks
-     */
-    frame: Partial<ComponentProps<typeof Frame> & { implicit: boolean }>;
-    /**
-     * default props for geo marks
-     */
-    geo: Partial<Omit<ComponentProps<typeof Geo>, IgnoreDefaults>>;
-    /**
-     * default props for graticule marks
-     */
-    graticule: Partial<Omit<ComponentProps<typeof Graticule>, IgnoreDefaults>>;
-    /**
-     * default props for grid marks, applied to both gridX and gridY marks
-     */
-    grid: Partial<Omit<ComponentProps<typeof GridX>, IgnoreDefaults> & { implicit: boolean }>;
-    /**
-     * default props for gridX marks
-     */
-    gridX: Partial<Omit<ComponentProps<typeof GridX>, IgnoreDefaults> & { implicit: boolean }>;
-    /**
-     * default props for gridY marks
-     */
-    gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & { implicit: boolean }>;
-    /**
-     * default props for line marks
-     */
-    line: Partial<Omit<ComponentProps<typeof Line>, IgnoreDefaults>>;
-    /**
-     * default props for link marks
-     */
-    link: Partial<Omit<ComponentProps<typeof Link>, IgnoreDefaults>>;
-    /**
-     * default props for pointer marks
-     */
-    pointer: Partial<Omit<ComponentProps<typeof Pointer>, IgnoreDefaults>>;
-    /**
-     * default props for rect marks, applied to rect and rectX marks
-     */
-    rect: Partial<Omit<ComponentProps<typeof Rect>, IgnoreDefaults>>;
-    /**
-     * default props for rectX marks
-     */
-    rectX: Partial<Omit<ComponentProps<typeof RectX>, IgnoreDefaults>>;
-    /**
-     * default props for rectY marks
-     */
-    rectY: Partial<Omit<ComponentProps<typeof RectY>, IgnoreDefaults>>;
-    /**
-     * default props for rule marks
-     */
-    rule: Partial<Omit<ComponentProps<typeof RuleX>, IgnoreDefaults>>;
-    /**
-     * default props for rule marks
-     */
-    ruleX: Partial<Omit<ComponentProps<typeof RuleX>, IgnoreDefaults>>;
-    /**
-     * default props for rule marks
-     */
-    ruleY: Partial<Omit<ComponentProps<typeof RuleY>, IgnoreDefaults>>;
-    /**
-     * default props for sphere marks
-     */
-    sphere: Partial<ComponentProps<typeof Sphere>>;
-    /**
-     * default props for spike marks
-     */
-    spike: Partial<Omit<ComponentProps<typeof Spike>, IgnoreDefaults>>;
-    /**
-     * default props for text marks
-     */
-    text: Partial<Omit<ComponentProps<typeof Text>, IgnoreDefaults>>;
-    /**
-     * default props for tick marks, applied to tickX and tickY marks
-     */
-    tick: Partial<Omit<ComponentProps<typeof TickX>, IgnoreDefaults>>;
-    /**
-     * default props for tickX marks
-     */
-    tickX: Partial<Omit<ComponentProps<typeof TickX>, IgnoreDefaults>>;
-    /**
-     * default props for tickY marks
-     */
-    tickY: Partial<Omit<ComponentProps<typeof TickY>, IgnoreDefaults>>;
-    /**
-     * default props for vector marks
-     */
-    vector: Partial<Omit<ComponentProps<typeof Vector>, IgnoreDefaults>>;
-};
-
-export type MapIndexObject = {
-    mapIndex: (I: number[], S: RawValue[], T: RawValue[]) => void;
-};
-
-export type MapMethod =
-    | 'cumsum'
-    | 'rank'
-    | 'quantile'
-    | ((I: number[], S: number[]) => number[])
-    | MapIndexObject;
-
-export type MapOptions = Partial<Record<ScaledChannelName, MapMethod>>;
-
-export type UsedScales = Record<ScaledChannelName, boolean>;
diff --git a/src/lib/types/channel.ts b/src/lib/types/channel.ts
index 7f83d2dc..7524c472 100644
--- a/src/lib/types/channel.ts
+++ b/src/lib/types/channel.ts
@@ -1,4 +1,4 @@
-import type { ConstantAccessor, RawValue } from '.';
+import type { ConstantAccessor, RawValue } from './index.js';
 
 export type Channels = Record<
     string,
diff --git a/src/lib/types/data.ts b/src/lib/types/data.ts
index ebb2d641..854edbb7 100644
--- a/src/lib/types/data.ts
+++ b/src/lib/types/data.ts
@@ -1,4 +1,4 @@
-import type { ScaledChannelName } from './channel';
+import type { ScaledChannelName } from './channel.js';
 
 export type RawValue = number | Date | boolean | string | symbol;
 
diff --git a/src/lib/types/facet.ts b/src/lib/types/facet.ts
index cf4ca910..c5bbff30 100644
--- a/src/lib/types/facet.ts
+++ b/src/lib/types/facet.ts
@@ -1,4 +1,4 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '.';
+import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from './index.js';
 
 type FacetState = {
     fx: RawValue;
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index 79e149c2..9866fbdf 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -1,10 +1,9 @@
-import type { ScaleBand, ScaleLinear, ScaleOrdinal } from 'd3-scale';
 import type { Snippet } from 'svelte';
-import type { MarkerShape } from '../marks/helpers/Marker.svelte';
 import type { Writable } from 'svelte/store';
-import type { Channels, ScaledChannelName } from './channel';
-import type { DataRecord, DataRow, RawValue } from './data';
-import type { BaseMarkProps } from './mark';
+import type { MarkerShape } from '../marks/helpers/Marker.svelte';
+import type { Channels, ScaledChannelName } from './channel.js';
+import type { DataRecord, DataRow, RawValue } from './data.js';
+import type { BaseMarkProps } from './mark.js';
 
 export type GenericMarkOptions = Record<string | symbol, any>;
 
diff --git a/src/lib/types/mark.ts b/src/lib/types/mark.ts
index b19ad3df..372a3355 100644
--- a/src/lib/types/mark.ts
+++ b/src/lib/types/mark.ts
@@ -59,9 +59,9 @@ export type MarkStyleProps =
     | 'width';
 
 import type { MouseEventHandler } from 'svelte/elements';
-import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from '.';
+import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
 import type * as CSS from 'csstype';
-import type { ScaledChannelName, ScaleName } from './scale';
+import type { ScaledChannelName, ScaleName } from './scale.js';
 
 export type BaseMarkProps<T> = Partial<{
     /**
diff --git a/src/lib/types/plot.ts b/src/lib/types/plot.ts
index a5a5c68f..744de0f4 100644
--- a/src/lib/types/plot.ts
+++ b/src/lib/types/plot.ts
@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'svelte';
-import type { ColorScheme } from './colorScheme';
+import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
 import type {
     ChannelAccessor,
@@ -11,7 +11,7 @@ import type {
     ScaleOptions,
     XScaleOptions,
     YScaleOptions
-} from '.';
+} from './index.js';
 import type { Snippet } from 'svelte';
 
 import type {
@@ -50,7 +50,7 @@ import type {
     TickX,
     TickY,
     Vector
-} from '../marks';
+} from '../marks/index.js';
 
 export type PlotState = {
     width: number;
diff --git a/src/lib/types/scale.ts b/src/lib/types/scale.ts
index f766b9fc..02974c2a 100644
--- a/src/lib/types/scale.ts
+++ b/src/lib/types/scale.ts
@@ -1,5 +1,5 @@
 import type { ScaleBand, ScaleLinear, ScaleOrdinal } from 'd3-scale';
-import type { ChannelAccessor, RawValue, ScaledChannelName } from '.';
+import type { ChannelAccessor, RawValue, ScaledChannelName } from './index.js';
 
 export type AxisXAnchor = 'bottom' | 'top' | 'both';
 export type AxisYAnchor = 'left' | 'right' | 'both';
diff --git a/src/routes/examples/arrow/metro.svelte b/src/routes/examples/arrow/metro.svelte
index 7a1a8ea7..dcc02ebb 100644
--- a/src/routes/examples/arrow/metro.svelte
+++ b/src/routes/examples/arrow/metro.svelte
@@ -29,7 +29,7 @@
     marginRight={20}
     inset={10}
     height={450}
-    x={{ type: 'log', label: 'P..opulation' }}
+    x={{ type: 'log', label: 'Population' }}
     y={{ label: 'Inequality' }}
     color={{
         label: 'Change in inequality from 1980 to 2015',
diff --git a/src/routes/examples/axis/tick-classes.svelte b/src/routes/examples/axis/tick-classes.svelte
new file mode 100644
index 00000000..fe3b00d0
--- /dev/null
+++ b/src/routes/examples/axis/tick-classes.svelte
@@ -0,0 +1,26 @@
+<script module>
+    export const title = 'Tick classes';
+    export const repl =
+        'https://svelte.dev/playground/d949e2daf18a4e1ba98ed1a2e52d9198?version=latest';
+</script>
+
+<script>
+    import { Plot, AxisX } from 'svelteplot';
+</script>
+
+<Plot marginTop={30} x={{ domain: [-100, 100] }}>
+    <AxisX
+        tickClass={(d) =>
+            d < 0 ? 'negative' : 'positive'} />
+</Plot>
+
+<style>
+    :global {
+        .tick.negative {
+            color: var(--svp-red) !important;
+        }
+        .tick.positive {
+            color: var(--svp-blue) !important;
+        }
+    }
+</style>
diff --git a/src/routes/examples/axis/ticks-inside.svelte b/src/routes/examples/axis/ticks-inside.svelte
new file mode 100644
index 00000000..43faecac
--- /dev/null
+++ b/src/routes/examples/axis/ticks-inside.svelte
@@ -0,0 +1,23 @@
+<script module>
+    export const title = 'Ticks inside';
+</script>
+
+<script>
+    import { Plot, AxisY, Line } from 'svelteplot';
+    import { page } from '$app/state';
+
+    let { aapl } = $derived(page.data.data);
+</script>
+
+<Plot
+    marginTop={30}
+    x={{ insetLeft: 25 }}
+    y={{ grid: true }}>
+    <AxisY
+        tickSize={0}
+        tickPadding={0}
+        dy={-5}
+        lineAnchor="bottom"
+        textAnchor="start" />
+    <Line data={aapl} x="Date" y="Close" />
+</Plot>
diff --git a/src/routes/features/markers/+page.md b/src/routes/features/markers/+page.md
index 87f690a3..a4c724fa 100644
--- a/src/routes/features/markers/+page.md
+++ b/src/routes/features/markers/+page.md
@@ -88,7 +88,7 @@ Note that for the interpolation methods `basis`, `bundle`, and `step`, the marke
     import { Plot, LineY, Dot } from 'svelteplot';
     import Slider from '$lib/ui/Slider.svelte';
     import Select from '$lib/ui/Select.svelte';
-    import type { CurveName } from '$lib/types.js';
+    import type { CurveName } from '$lib/types/index.js';
 
     // curve demo
     const numbers = [
@@ -134,7 +134,7 @@ You can also specify a custom marker icon using the `marker` snippet:
 ```svelte live
 <script lang="ts">
     import { Plot, Line } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
diff --git a/src/routes/marks/bar/BarPlot.svelte b/src/routes/marks/bar/BarPlot.svelte
index eeb740f8..9def79fb 100644
--- a/src/routes/marks/bar/BarPlot.svelte
+++ b/src/routes/marks/bar/BarPlot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, BarY, RuleY } from 'svelteplot';
+    import { Plot, BarY, RuleY } from '$lib/index.js';
 
     import { page } from '$app/stores';
     let { alphabet } = $derived($page.data.data);
diff --git a/src/routes/marks/bar/StackedBarPlot.svelte b/src/routes/marks/bar/StackedBarPlot.svelte
index c7c3b574..a7b41459 100644
--- a/src/routes/marks/bar/StackedBarPlot.svelte
+++ b/src/routes/marks/bar/StackedBarPlot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, BarX } from 'svelteplot';
+    import { Plot, BarX } from '$lib/index.js';
     import { rollups } from 'd3-array';
 
     import { page } from '$app/stores';
diff --git a/src/routes/marks/line/+page.md b/src/routes/marks/line/+page.md
index 75c6587d..ffc41134 100644
--- a/src/routes/marks/line/+page.md
+++ b/src/routes/marks/line/+page.md
@@ -39,7 +39,7 @@ If the **x** and **y** options are not defined, the line mark assumes that the d
 ```svelte live
 <script lang="ts">
     import { Plot, Line, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
@@ -243,7 +243,7 @@ BLS Demo:
 ```svelte live
 <script lang="ts">
     import { Plot, Line, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { bls } = $derived(page.data.data);
@@ -335,7 +335,7 @@ The [LineY constructor](/marks/line#LineY) provides default channel definitions
 ```svelte live
 <script lang="ts">
     import { Plot, LineY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
     import { randomNormal } from 'd3-random';
     import { range, cumsum } from 'd3-array';
 </script>
diff --git a/src/routes/marks/line/CO2Decades.svelte b/src/routes/marks/line/CO2Decades.svelte
index dd364b87..e16f6904 100644
--- a/src/routes/marks/line/CO2Decades.svelte
+++ b/src/routes/marks/line/CO2Decades.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, Line, Pointer, Text, RectY, RuleY, Dot, selectLast } from 'svelteplot';
+    import { Plot, Line, Pointer, Text, RectY, RuleY, Dot, selectLast } from '$lib/index.js';
     import { range } from 'd3-array';
     import { page } from '$app/stores';
 
diff --git a/src/routes/marks/line/CurveDemo.svelte b/src/routes/marks/line/CurveDemo.svelte
index 347f74ac..5f01f467 100644
--- a/src/routes/marks/line/CurveDemo.svelte
+++ b/src/routes/marks/line/CurveDemo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, LineY, Dot } from 'svelteplot';
+    import { Plot, LineY, Dot } from '$lib/index.js';
     import Slider from '$lib/ui/Slider.svelte';
     import Select from '$lib/ui/Select.svelte';
     import type { CurveName } from 'svelteplot/types/index.js';
diff --git a/src/routes/marks/rule/+page.md b/src/routes/marks/rule/+page.md
index be0ee46e..3facc9e7 100644
--- a/src/routes/marks/rule/+page.md
+++ b/src/routes/marks/rule/+page.md
@@ -39,7 +39,7 @@ Like most other marks, rules also accept data for displaying multiple lines at o
 ```svelte live
 <script lang="ts">
     import { Plot, Line, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
diff --git a/src/routes/marks/rule/BarcodeExample.svelte b/src/routes/marks/rule/BarcodeExample.svelte
index 3df75df0..0fd3bd8a 100644
--- a/src/routes/marks/rule/BarcodeExample.svelte
+++ b/src/routes/marks/rule/BarcodeExample.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, RuleX } from 'svelteplot';
+    import { Plot, RuleX } from '$lib/index.js';
     import { range } from 'd3-array';
     import { randomNormal, randomLcg } from 'd3-random';
     import Code from '../../Code.svelte';
@@ -13,7 +13,7 @@
 
 <Code
     code={`<scr${'ipt>'}
-    import { Plot, RuleX } from 'svelteplot';
+    import { Plot, RuleX } from '$lib/index.js';
     import { randomNormal } from 'd3-random';
     import { range } from 'd3-array';
 </scr${'ipt>'}
diff --git a/src/routes/marks/rule/CandlestickExample.svelte b/src/routes/marks/rule/CandlestickExample.svelte
index 6936079a..fabea6f7 100644
--- a/src/routes/marks/rule/CandlestickExample.svelte
+++ b/src/routes/marks/rule/CandlestickExample.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, RuleX } from 'svelteplot';
+    import { Plot, RuleX } from '$lib/index.js';
     import type { Datasets } from 'svelteplot/types/index.js';
     import { getContext } from 'svelte';
     import Code from '../../Code.svelte';
diff --git a/src/routes/marks/rule/SineRules.svelte b/src/routes/marks/rule/SineRules.svelte
index 94171656..8f29e958 100644
--- a/src/routes/marks/rule/SineRules.svelte
+++ b/src/routes/marks/rule/SineRules.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, RuleX, RuleY } from 'svelteplot';
+    import { Plot, RuleX, RuleY } from '$lib/index.js';
     import AxisX from '$lib/marks/AxisX.svelte';
     import GridX from '$lib/marks/GridX.svelte';
     import GridY from '$lib/marks/GridY.svelte';
diff --git a/src/routes/marks/rule/__+page.svelte b/src/routes/marks/rule/__+page.svelte
index 73e0241f..b247baea 100644
--- a/src/routes/marks/rule/__+page.svelte
+++ b/src/routes/marks/rule/__+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, Line, RuleX, RuleY } from 'svelteplot';
+    import { Plot, Line, RuleX, RuleY } from '$lib/index.js';
     import type { Datasets } from 'svelteplot/types/index.js';
     import { getContext } from 'svelte';
     import SineRules from './SineRules.svelte';
diff --git a/src/routes/tests/demos/bls/+page.md b/src/routes/tests/demos/bls/+page.md
index e759deef..7286d2a8 100644
--- a/src/routes/tests/demos/bls/+page.md
+++ b/src/routes/tests/demos/bls/+page.md
@@ -3,7 +3,7 @@ BLS Demo:
 ```svelte live
 <script lang="ts">
     import { Plot, Line, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { bls } = $derived(page.data.data);
diff --git a/src/routes/tests/marks/ForceExample.svelte b/src/routes/tests/marks/ForceExample.svelte
index efbe051c..4da6a211 100644
--- a/src/routes/tests/marks/ForceExample.svelte
+++ b/src/routes/tests/marks/ForceExample.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, Arrow, Dot, LineY, RuleY } from 'svelteplot';
+    import { Plot, Arrow, Dot, LineY, RuleY } from '$lib/index.js';
     import { json } from 'd3-fetch';
     // import { range } from 'd3-array';
     import { noise } from './noise.js';
diff --git a/src/routes/tests/marks/Test.svelte b/src/routes/tests/marks/Test.svelte
index fc11b770..62d57697 100644
--- a/src/routes/tests/marks/Test.svelte
+++ b/src/routes/tests/marks/Test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot, Arrow } from 'svelteplot';
+    import { Plot, Arrow } from '$lib/index.js';
     import { page } from '$app/stores';
     let { metros } = $derived($page.data.data);
 </script>
diff --git a/src/routes/transforms/interval/+page.md b/src/routes/transforms/interval/+page.md
index 9914781f..1c205b83 100644
--- a/src/routes/transforms/interval/+page.md
+++ b/src/routes/transforms/interval/+page.md
@@ -33,7 +33,7 @@ In contrast, a [rectY](/marks/rect) mark with the interval option and the day in
 ```svelte live
 <script lang="ts">
     import { Plot, RectY, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
@@ -74,7 +74,7 @@ The meaning of the interval mark option depends on the associated mark, such as
 ```svelte live
 <script lang="ts">
     import { Plot, BarY, RuleY } from 'svelteplot';
-    import type { Datasets } from '$lib/types.js';
+    import type { Datasets } from '$lib/types/index.js';
 
     import { page } from '$app/state';
     let { aapl } = $derived(page.data.data);
diff --git a/src/tests/arrow.test.svelte b/src/tests/arrow.test.svelte
index 8c2a873c..b0934cdb 100644
--- a/src/tests/arrow.test.svelte
+++ b/src/tests/arrow.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Arrow, Plot } from 'svelteplot';
+    import { Arrow, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     let args: ComponentProps<typeof Arrow> = $props();
diff --git a/src/tests/axisX.test.svelte b/src/tests/axisX.test.svelte
index 44a0e8c0..304bf4e4 100644
--- a/src/tests/axisX.test.svelte
+++ b/src/tests/axisX.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AxisX, Plot } from 'svelteplot';
+    import { AxisX, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     let {
diff --git a/src/tests/axisY.test.svelte b/src/tests/axisY.test.svelte
index 9fa595a7..4b205951 100644
--- a/src/tests/axisY.test.svelte
+++ b/src/tests/axisY.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AxisY, Plot } from 'svelteplot';
+    import { AxisY, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     let {
diff --git a/src/tests/barX.test.svelte b/src/tests/barX.test.svelte
index d16a8d1c..f4da670a 100644
--- a/src/tests/barX.test.svelte
+++ b/src/tests/barX.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BarX, Plot } from 'svelteplot';
+    import { BarX, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     interface Props {
diff --git a/src/tests/barY.test.svelte b/src/tests/barY.test.svelte
index 5624d3b3..6b4536a4 100644
--- a/src/tests/barY.test.svelte
+++ b/src/tests/barY.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BarY, Plot } from 'svelteplot';
+    import { BarY, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     interface Props {
diff --git a/src/tests/brush.test.svelte b/src/tests/brush.test.svelte
index 76cc14d6..321d3c4d 100644
--- a/src/tests/brush.test.svelte
+++ b/src/tests/brush.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Brush, Plot } from 'svelteplot';
+    import { Brush, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
     import type { Brush as BrushT } from 'svelteplot/marks/Brush.svelte';
 
diff --git a/src/tests/colors.test.svelte b/src/tests/colors.test.svelte
index 3a8bc978..07ea09c6 100644
--- a/src/tests/colors.test.svelte
+++ b/src/tests/colors.test.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Plot, Dot } from 'svelteplot';
+    import { Plot, Dot } from '$lib/index.js';
 
     let { colorOptions: color, dotOptions } = $props();
 </script>
diff --git a/src/tests/dot.test.svelte b/src/tests/dot.test.svelte
index 07762711..a892a88d 100644
--- a/src/tests/dot.test.svelte
+++ b/src/tests/dot.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Dot, Plot } from 'svelteplot';
+    import { Dot, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     interface Props {
diff --git a/src/tests/gridX.test.svelte b/src/tests/gridX.test.svelte
index 6df26db0..8e011fed 100644
--- a/src/tests/gridX.test.svelte
+++ b/src/tests/gridX.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { GridX, Plot } from 'svelteplot';
+    import { GridX, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     interface Props {
diff --git a/src/tests/gridY.test.svelte b/src/tests/gridY.test.svelte
index 7f6cfeea..3b952696 100644
--- a/src/tests/gridY.test.svelte
+++ b/src/tests/gridY.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { GridY, Plot } from 'svelteplot';
+    import { GridY, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     interface Props {
diff --git a/src/tests/line.test.svelte b/src/tests/line.test.svelte
index f77d3791..dad82e60 100644
--- a/src/tests/line.test.svelte
+++ b/src/tests/line.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Line, Plot } from 'svelteplot';
+    import { Line, Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     let args: ComponentProps<typeof Line> = $props();
diff --git a/src/tests/plot.test.svelte b/src/tests/plot.test.svelte
index f608940d..8200a5dc 100644
--- a/src/tests/plot.test.svelte
+++ b/src/tests/plot.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Plot } from 'svelteplot';
+    import { Plot } from '$lib/index.js';
     import type { ComponentProps } from 'svelte';
 
     let args: ComponentProps<typeof Plot> = $props();
diff --git a/static/examples/area/area-x.dark.png b/static/examples/area/area-x.dark.png
index 6e7a7bd1..e210174e 100644
Binary files a/static/examples/area/area-x.dark.png and b/static/examples/area/area-x.dark.png differ
diff --git a/static/examples/area/area-x.png b/static/examples/area/area-x.png
index 88f10625..b32fccbc 100644
Binary files a/static/examples/area/area-x.png and b/static/examples/area/area-x.png differ
diff --git a/static/examples/area/area-y.dark.png b/static/examples/area/area-y.dark.png
index c908f9b7..58cae6f6 100644
Binary files a/static/examples/area/area-y.dark.png and b/static/examples/area/area-y.dark.png differ
diff --git a/static/examples/area/area-y.png b/static/examples/area/area-y.png
index cad14297..cf1cd863 100644
Binary files a/static/examples/area/area-y.png and b/static/examples/area/area-y.png differ
diff --git a/static/examples/area/area.dark.png b/static/examples/area/area.dark.png
index c1c6c880..30b7302a 100644
Binary files a/static/examples/area/area.dark.png and b/static/examples/area/area.dark.png differ
diff --git a/static/examples/area/area.png b/static/examples/area/area.png
index ed996fcc..61e2ff4c 100644
Binary files a/static/examples/area/area.png and b/static/examples/area/area.png differ
diff --git a/static/examples/area/streamgraph.dark.png b/static/examples/area/streamgraph.dark.png
index f6923513..2371a46f 100644
Binary files a/static/examples/area/streamgraph.dark.png and b/static/examples/area/streamgraph.dark.png differ
diff --git a/static/examples/area/streamgraph.png b/static/examples/area/streamgraph.png
index 5a92cbcc..e9241221 100644
Binary files a/static/examples/area/streamgraph.png and b/static/examples/area/streamgraph.png differ
diff --git a/static/examples/arrow/metro.dark.png b/static/examples/arrow/metro.dark.png
index 414e0a6e..eb1fc70d 100644
Binary files a/static/examples/arrow/metro.dark.png and b/static/examples/arrow/metro.dark.png differ
diff --git a/static/examples/arrow/metro.png b/static/examples/arrow/metro.png
index 761eb71a..9c910099 100644
Binary files a/static/examples/arrow/metro.png and b/static/examples/arrow/metro.png differ
diff --git a/static/examples/axis/datawrapper-ticks.dark.png b/static/examples/axis/datawrapper-ticks.dark.png
index f2b806d2..c82f02b4 100644
Binary files a/static/examples/axis/datawrapper-ticks.dark.png and b/static/examples/axis/datawrapper-ticks.dark.png differ
diff --git a/static/examples/axis/datawrapper-ticks.png b/static/examples/axis/datawrapper-ticks.png
index 8ab6d019..0a5bb17b 100644
Binary files a/static/examples/axis/datawrapper-ticks.png and b/static/examples/axis/datawrapper-ticks.png differ
diff --git a/static/examples/axis/major-minor.dark.png b/static/examples/axis/major-minor.dark.png
index 53852243..9c7f7bea 100644
Binary files a/static/examples/axis/major-minor.dark.png and b/static/examples/axis/major-minor.dark.png differ
diff --git a/static/examples/axis/major-minor.png b/static/examples/axis/major-minor.png
index be74063a..3083f5d6 100644
Binary files a/static/examples/axis/major-minor.png and b/static/examples/axis/major-minor.png differ
diff --git a/static/examples/axis/tick-classes.dark.png b/static/examples/axis/tick-classes.dark.png
new file mode 100644
index 00000000..0a15ca1e
Binary files /dev/null and b/static/examples/axis/tick-classes.dark.png differ
diff --git a/static/examples/axis/tick-classes.png b/static/examples/axis/tick-classes.png
new file mode 100644
index 00000000..a557c35a
Binary files /dev/null and b/static/examples/axis/tick-classes.png differ
diff --git a/static/examples/axis/tick-count.dark.png b/static/examples/axis/tick-count.dark.png
index d70b779a..06c5026b 100644
Binary files a/static/examples/axis/tick-count.dark.png and b/static/examples/axis/tick-count.dark.png differ
diff --git a/static/examples/axis/tick-count.png b/static/examples/axis/tick-count.png
index 5951816b..5bb26882 100644
Binary files a/static/examples/axis/tick-count.png and b/static/examples/axis/tick-count.png differ
diff --git a/static/examples/axis/tick-interval.dark.png b/static/examples/axis/tick-interval.dark.png
index c3b48066..dd7095e5 100644
Binary files a/static/examples/axis/tick-interval.dark.png and b/static/examples/axis/tick-interval.dark.png differ
diff --git a/static/examples/axis/tick-interval.png b/static/examples/axis/tick-interval.png
index 07b29305..21d3dcff 100644
Binary files a/static/examples/axis/tick-interval.png and b/static/examples/axis/tick-interval.png differ
diff --git a/static/examples/axis/tick-spacing.dark.png b/static/examples/axis/tick-spacing.dark.png
index f2e22432..0dcfd9c2 100644
Binary files a/static/examples/axis/tick-spacing.dark.png and b/static/examples/axis/tick-spacing.dark.png differ
diff --git a/static/examples/axis/tick-spacing.png b/static/examples/axis/tick-spacing.png
index 9910a48e..1e1dabb2 100644
Binary files a/static/examples/axis/tick-spacing.png and b/static/examples/axis/tick-spacing.png differ
diff --git a/static/examples/axis/ticks-inside.dark.png b/static/examples/axis/ticks-inside.dark.png
new file mode 100644
index 00000000..691f45c0
Binary files /dev/null and b/static/examples/axis/ticks-inside.dark.png differ
diff --git a/static/examples/axis/ticks-inside.png b/static/examples/axis/ticks-inside.png
new file mode 100644
index 00000000..7a46aa00
Binary files /dev/null and b/static/examples/axis/ticks-inside.png differ
diff --git a/static/examples/bar/defaults.dark.png b/static/examples/bar/defaults.dark.png
index 4adf4437..681cd88c 100644
Binary files a/static/examples/bar/defaults.dark.png and b/static/examples/bar/defaults.dark.png differ
diff --git a/static/examples/bar/defaults.png b/static/examples/bar/defaults.png
index 46ecaa07..5a41bce1 100644
Binary files a/static/examples/bar/defaults.png and b/static/examples/bar/defaults.png differ
diff --git a/static/examples/bar/linked-bars.dark.png b/static/examples/bar/linked-bars.dark.png
index 94a351bd..c78608de 100644
Binary files a/static/examples/bar/linked-bars.dark.png and b/static/examples/bar/linked-bars.dark.png differ
diff --git a/static/examples/bar/linked-bars.png b/static/examples/bar/linked-bars.png
index 29d696a6..df0c4ba0 100644
Binary files a/static/examples/bar/linked-bars.png and b/static/examples/bar/linked-bars.png differ
diff --git a/static/examples/bar/shuffled-bars.dark.png b/static/examples/bar/shuffled-bars.dark.png
index 94d84c19..a7de7c6a 100644
Binary files a/static/examples/bar/shuffled-bars.dark.png and b/static/examples/bar/shuffled-bars.dark.png differ
diff --git a/static/examples/bar/shuffled-bars.png b/static/examples/bar/shuffled-bars.png
index 58b10787..ab088dad 100644
Binary files a/static/examples/bar/shuffled-bars.png and b/static/examples/bar/shuffled-bars.png differ
diff --git a/static/examples/brush/constrained.dark.png b/static/examples/brush/constrained.dark.png
index 323e21c9..c06b1fe8 100644
Binary files a/static/examples/brush/constrained.dark.png and b/static/examples/brush/constrained.dark.png differ
diff --git a/static/examples/brush/constrained.png b/static/examples/brush/constrained.png
index 4ff38c7a..471ef206 100644
Binary files a/static/examples/brush/constrained.png and b/static/examples/brush/constrained.png differ
diff --git a/static/examples/brush/filter.dark.png b/static/examples/brush/filter.dark.png
index 1f688f3e..c06b1fe8 100644
Binary files a/static/examples/brush/filter.dark.png and b/static/examples/brush/filter.dark.png differ
diff --git a/static/examples/brush/filter.png b/static/examples/brush/filter.png
index 4ff38c7a..471ef206 100644
Binary files a/static/examples/brush/filter.png and b/static/examples/brush/filter.png differ
diff --git a/static/examples/brush/overview-detail.dark.png b/static/examples/brush/overview-detail.dark.png
index f747b734..518e9016 100644
Binary files a/static/examples/brush/overview-detail.dark.png and b/static/examples/brush/overview-detail.dark.png differ
diff --git a/static/examples/brush/overview-detail.png b/static/examples/brush/overview-detail.png
index b01aff8b..5bbf2e24 100644
Binary files a/static/examples/brush/overview-detail.png and b/static/examples/brush/overview-detail.png differ
diff --git a/static/examples/brush/zoomable-scatter.dark.png b/static/examples/brush/zoomable-scatter.dark.png
index 6c148cda..768608a6 100644
Binary files a/static/examples/brush/zoomable-scatter.dark.png and b/static/examples/brush/zoomable-scatter.dark.png differ
diff --git a/static/examples/brush/zoomable-scatter.png b/static/examples/brush/zoomable-scatter.png
index 11a521a9..c0528c55 100644
Binary files a/static/examples/brush/zoomable-scatter.png and b/static/examples/brush/zoomable-scatter.png differ
diff --git a/static/examples/cell/simpsons.dark.png b/static/examples/cell/simpsons.dark.png
index 2347292c..20a9ed1e 100644
Binary files a/static/examples/cell/simpsons.dark.png and b/static/examples/cell/simpsons.dark.png differ
diff --git a/static/examples/cell/simpsons.png b/static/examples/cell/simpsons.png
index 3c2e1e82..518391e6 100644
Binary files a/static/examples/cell/simpsons.png and b/static/examples/cell/simpsons.png differ
diff --git a/static/examples/cell/temperatures.dark.png b/static/examples/cell/temperatures.dark.png
index e76116f2..084c75b0 100644
Binary files a/static/examples/cell/temperatures.dark.png and b/static/examples/cell/temperatures.dark.png differ
diff --git a/static/examples/cell/temperatures.png b/static/examples/cell/temperatures.png
index 1ba2d759..606e91b9 100644
Binary files a/static/examples/cell/temperatures.png and b/static/examples/cell/temperatures.png differ
diff --git a/static/examples/custom/custom-svg.dark.png b/static/examples/custom/custom-svg.dark.png
index 532ce75f..a488b542 100644
Binary files a/static/examples/custom/custom-svg.dark.png and b/static/examples/custom/custom-svg.dark.png differ
diff --git a/static/examples/custom/custom-svg.png b/static/examples/custom/custom-svg.png
index 3fa60b3a..34239c09 100644
Binary files a/static/examples/custom/custom-svg.png and b/static/examples/custom/custom-svg.png differ
diff --git a/static/examples/dot/0-scatterplot.dark.png b/static/examples/dot/0-scatterplot.dark.png
index 9fe299e7..8335c9aa 100644
Binary files a/static/examples/dot/0-scatterplot.dark.png and b/static/examples/dot/0-scatterplot.dark.png differ
diff --git a/static/examples/dot/0-scatterplot.png b/static/examples/dot/0-scatterplot.png
index 2e9fe26d..2cd78f60 100644
Binary files a/static/examples/dot/0-scatterplot.png and b/static/examples/dot/0-scatterplot.png differ
diff --git a/static/examples/dot/1-colored-scatterplot.dark.png b/static/examples/dot/1-colored-scatterplot.dark.png
index fede9a38..7efaeaec 100644
Binary files a/static/examples/dot/1-colored-scatterplot.dark.png and b/static/examples/dot/1-colored-scatterplot.dark.png differ
diff --git a/static/examples/dot/1-colored-scatterplot.png b/static/examples/dot/1-colored-scatterplot.png
index c044c09f..2e633289 100644
Binary files a/static/examples/dot/1-colored-scatterplot.png and b/static/examples/dot/1-colored-scatterplot.png differ
diff --git a/static/examples/dot/2-symbol-channel.dark.png b/static/examples/dot/2-symbol-channel.dark.png
index a5075fc2..1cb80f27 100644
Binary files a/static/examples/dot/2-symbol-channel.dark.png and b/static/examples/dot/2-symbol-channel.dark.png differ
diff --git a/static/examples/dot/2-symbol-channel.png b/static/examples/dot/2-symbol-channel.png
index aedccc05..1e20f3dd 100644
Binary files a/static/examples/dot/2-symbol-channel.png and b/static/examples/dot/2-symbol-channel.png differ
diff --git a/static/examples/dot/3-dot-plot.dark.png b/static/examples/dot/3-dot-plot.dark.png
index c79607c9..7182f1e9 100644
Binary files a/static/examples/dot/3-dot-plot.dark.png and b/static/examples/dot/3-dot-plot.dark.png differ
diff --git a/static/examples/dot/3-dot-plot.png b/static/examples/dot/3-dot-plot.png
index c7b57e4f..2a69e4f3 100644
Binary files a/static/examples/dot/3-dot-plot.png and b/static/examples/dot/3-dot-plot.png differ
diff --git a/static/examples/dot/bubble-matrix.dark.png b/static/examples/dot/bubble-matrix.dark.png
index 2267a34d..e82f1fb2 100644
Binary files a/static/examples/dot/bubble-matrix.dark.png and b/static/examples/dot/bubble-matrix.dark.png differ
diff --git a/static/examples/dot/bubble-matrix.png b/static/examples/dot/bubble-matrix.png
index 4ecc4dee..cdb31c2a 100644
Binary files a/static/examples/dot/bubble-matrix.png and b/static/examples/dot/bubble-matrix.png differ
diff --git a/static/examples/geo/custom-proj.dark.png b/static/examples/geo/custom-proj.dark.png
index eb39bd8b..bdf6fe42 100644
Binary files a/static/examples/geo/custom-proj.dark.png and b/static/examples/geo/custom-proj.dark.png differ
diff --git a/static/examples/geo/custom-proj.png b/static/examples/geo/custom-proj.png
index ecfa5f43..23cb4528 100644
Binary files a/static/examples/geo/custom-proj.png and b/static/examples/geo/custom-proj.png differ
diff --git a/static/examples/geo/earthquakes.dark.png b/static/examples/geo/earthquakes.dark.png
index 6999c49e..45e0f719 100644
Binary files a/static/examples/geo/earthquakes.dark.png and b/static/examples/geo/earthquakes.dark.png differ
diff --git a/static/examples/geo/earthquakes.png b/static/examples/geo/earthquakes.png
index 96035aa6..71c81b4b 100644
Binary files a/static/examples/geo/earthquakes.png and b/static/examples/geo/earthquakes.png differ
diff --git a/static/examples/geo/inset-aspect.dark.png b/static/examples/geo/inset-aspect.dark.png
index 6311faee..c18e5f76 100644
Binary files a/static/examples/geo/inset-aspect.dark.png and b/static/examples/geo/inset-aspect.dark.png differ
diff --git a/static/examples/geo/inset-aspect.png b/static/examples/geo/inset-aspect.png
index b7e2ca82..851441b5 100644
Binary files a/static/examples/geo/inset-aspect.png and b/static/examples/geo/inset-aspect.png differ
diff --git a/static/examples/geo/us-choropleth-canvas.dark.png b/static/examples/geo/us-choropleth-canvas.dark.png
index d71c2265..f2e7552e 100644
Binary files a/static/examples/geo/us-choropleth-canvas.dark.png and b/static/examples/geo/us-choropleth-canvas.dark.png differ
diff --git a/static/examples/geo/us-choropleth-canvas.png b/static/examples/geo/us-choropleth-canvas.png
index d94028c7..f34f4b9b 100644
Binary files a/static/examples/geo/us-choropleth-canvas.png and b/static/examples/geo/us-choropleth-canvas.png differ
diff --git a/static/examples/geo/us-choropleth.dark.png b/static/examples/geo/us-choropleth.dark.png
index 1f564e57..a22eb9da 100644
Binary files a/static/examples/geo/us-choropleth.dark.png and b/static/examples/geo/us-choropleth.dark.png differ
diff --git a/static/examples/geo/us-choropleth.png b/static/examples/geo/us-choropleth.png
index f2b7a1bb..f6294dd5 100644
Binary files a/static/examples/geo/us-choropleth.png and b/static/examples/geo/us-choropleth.png differ
diff --git a/static/examples/grid/clipped-gridlines.dark.png b/static/examples/grid/clipped-gridlines.dark.png
index 142e0913..edaae493 100644
Binary files a/static/examples/grid/clipped-gridlines.dark.png and b/static/examples/grid/clipped-gridlines.dark.png differ
diff --git a/static/examples/grid/clipped-gridlines.png b/static/examples/grid/clipped-gridlines.png
index b4ec1b35..472f9ee1 100644
Binary files a/static/examples/grid/clipped-gridlines.png and b/static/examples/grid/clipped-gridlines.png differ
diff --git a/static/examples/line/apple-stock.dark.png b/static/examples/line/apple-stock.dark.png
index 83fb74fb..04830bbc 100644
Binary files a/static/examples/line/apple-stock.dark.png and b/static/examples/line/apple-stock.dark.png differ
diff --git a/static/examples/line/apple-stock.png b/static/examples/line/apple-stock.png
index eac297b2..1e9f1e9c 100644
Binary files a/static/examples/line/apple-stock.png and b/static/examples/line/apple-stock.png differ
diff --git a/static/examples/line/geo-line.dark.png b/static/examples/line/geo-line.dark.png
index cda4e927..4de9cb7b 100644
Binary files a/static/examples/line/geo-line.dark.png and b/static/examples/line/geo-line.dark.png differ
diff --git a/static/examples/line/geo-line.png b/static/examples/line/geo-line.png
index 8c6d0c04..c3bd16a1 100644
Binary files a/static/examples/line/geo-line.png and b/static/examples/line/geo-line.png differ
diff --git a/static/examples/line/gradient-line.dark.png b/static/examples/line/gradient-line.dark.png
index 3b37d115..1f09b750 100644
Binary files a/static/examples/line/gradient-line.dark.png and b/static/examples/line/gradient-line.dark.png differ
diff --git a/static/examples/line/gradient-line.png b/static/examples/line/gradient-line.png
index 273a3900..3ea12581 100644
Binary files a/static/examples/line/gradient-line.png and b/static/examples/line/gradient-line.png differ
diff --git a/static/examples/line/line-grouping.dark.png b/static/examples/line/line-grouping.dark.png
index 6daf4478..c18d978c 100644
Binary files a/static/examples/line/line-grouping.dark.png and b/static/examples/line/line-grouping.dark.png differ
diff --git a/static/examples/line/line-grouping.png b/static/examples/line/line-grouping.png
index 1cb2fc8f..fd7ed99a 100644
Binary files a/static/examples/line/line-grouping.png and b/static/examples/line/line-grouping.png differ
diff --git a/static/examples/line/tour-de-france.dark.png b/static/examples/line/tour-de-france.dark.png
index 7ca1a8a0..b7ce05fc 100644
Binary files a/static/examples/line/tour-de-france.dark.png and b/static/examples/line/tour-de-france.dark.png differ
diff --git a/static/examples/line/tour-de-france.png b/static/examples/line/tour-de-france.png
index 7af3db31..f9322405 100644
Binary files a/static/examples/line/tour-de-france.png and b/static/examples/line/tour-de-france.png differ
diff --git a/static/examples/link/metros.dark.png b/static/examples/link/metros.dark.png
index 21f16612..09f875ab 100644
Binary files a/static/examples/link/metros.dark.png and b/static/examples/link/metros.dark.png differ
diff --git a/static/examples/link/metros.png b/static/examples/link/metros.png
index e3ca48d6..7f815942 100644
Binary files a/static/examples/link/metros.png and b/static/examples/link/metros.png differ
diff --git a/static/examples/link/spherical-link.dark.png b/static/examples/link/spherical-link.dark.png
index 26dc3cb2..9dd30c91 100644
Binary files a/static/examples/link/spherical-link.dark.png and b/static/examples/link/spherical-link.dark.png differ
diff --git a/static/examples/link/spherical-link.png b/static/examples/link/spherical-link.png
index 9a936633..89d1c53b 100644
Binary files a/static/examples/link/spherical-link.png and b/static/examples/link/spherical-link.png differ
diff --git a/static/examples/rect/simple-rects.dark.png b/static/examples/rect/simple-rects.dark.png
index 7be66b87..34d08ed9 100644
Binary files a/static/examples/rect/simple-rects.dark.png and b/static/examples/rect/simple-rects.dark.png differ
diff --git a/static/examples/rect/simple-rects.png b/static/examples/rect/simple-rects.png
index 3e5cd7a2..558977cc 100644
Binary files a/static/examples/rect/simple-rects.png and b/static/examples/rect/simple-rects.png differ
diff --git a/static/examples/rect/stacked-rectx.dark.png b/static/examples/rect/stacked-rectx.dark.png
index e1755eea..0042b38c 100644
Binary files a/static/examples/rect/stacked-rectx.dark.png and b/static/examples/rect/stacked-rectx.dark.png differ
diff --git a/static/examples/rect/stacked-rectx.png b/static/examples/rect/stacked-rectx.png
index 8fc989e2..c09f19a1 100644
Binary files a/static/examples/rect/stacked-rectx.png and b/static/examples/rect/stacked-rectx.png differ
diff --git a/static/examples/rect/stacked-recty.dark.png b/static/examples/rect/stacked-recty.dark.png
index 502035b2..c409bf8e 100644
Binary files a/static/examples/rect/stacked-recty.dark.png and b/static/examples/rect/stacked-recty.dark.png differ
diff --git a/static/examples/rect/stacked-recty.png b/static/examples/rect/stacked-recty.png
index ae6c2579..a7a57ced 100644
Binary files a/static/examples/rect/stacked-recty.png and b/static/examples/rect/stacked-recty.png differ
diff --git a/static/examples/regression/cars.dark.png b/static/examples/regression/cars.dark.png
index 1aa937a4..19b4b11e 100644
Binary files a/static/examples/regression/cars.dark.png and b/static/examples/regression/cars.dark.png differ
diff --git a/static/examples/regression/cars.png b/static/examples/regression/cars.png
index 1afeaea6..d05d3e3a 100644
Binary files a/static/examples/regression/cars.png and b/static/examples/regression/cars.png differ
diff --git a/static/examples/regression/faceted.dark.png b/static/examples/regression/faceted.dark.png
index 85286163..4996eb17 100644
Binary files a/static/examples/regression/faceted.dark.png and b/static/examples/regression/faceted.dark.png differ
diff --git a/static/examples/regression/faceted.png b/static/examples/regression/faceted.png
index 77d2b036..af41cd2b 100644
Binary files a/static/examples/regression/faceted.png and b/static/examples/regression/faceted.png differ
diff --git a/static/examples/regression/grouped.dark.png b/static/examples/regression/grouped.dark.png
index 366bed4a..0c8fa20b 100644
Binary files a/static/examples/regression/grouped.dark.png and b/static/examples/regression/grouped.dark.png differ
diff --git a/static/examples/regression/grouped.png b/static/examples/regression/grouped.png
index b48ac95b..8fbf841d 100644
Binary files a/static/examples/regression/grouped.png and b/static/examples/regression/grouped.png differ
diff --git a/static/examples/regression/loess.dark.png b/static/examples/regression/loess.dark.png
index 67652a34..fa0a5bb1 100644
Binary files a/static/examples/regression/loess.dark.png and b/static/examples/regression/loess.dark.png differ
diff --git a/static/examples/regression/loess.png b/static/examples/regression/loess.png
index 8f23cd30..dd3c13cc 100644
Binary files a/static/examples/regression/loess.png and b/static/examples/regression/loess.png differ
diff --git a/static/examples/regression/log.dark.png b/static/examples/regression/log.dark.png
index 6ecea135..0401734b 100644
Binary files a/static/examples/regression/log.dark.png and b/static/examples/regression/log.dark.png differ
diff --git a/static/examples/regression/log.png b/static/examples/regression/log.png
index ab2557ea..08ef5179 100644
Binary files a/static/examples/regression/log.png and b/static/examples/regression/log.png differ
diff --git a/static/examples/rule/data-rules.dark.png b/static/examples/rule/data-rules.dark.png
index 2be84e05..ce75cae5 100644
Binary files a/static/examples/rule/data-rules.dark.png and b/static/examples/rule/data-rules.dark.png differ
diff --git a/static/examples/rule/data-rules.png b/static/examples/rule/data-rules.png
index 59332091..cc8d02d4 100644
Binary files a/static/examples/rule/data-rules.png and b/static/examples/rule/data-rules.png differ
diff --git a/static/examples/rule/min-max.dark.png b/static/examples/rule/min-max.dark.png
index d4dde1ed..a7730be7 100644
Binary files a/static/examples/rule/min-max.dark.png and b/static/examples/rule/min-max.dark.png differ
diff --git a/static/examples/rule/min-max.png b/static/examples/rule/min-max.png
index 00b23562..892387a6 100644
Binary files a/static/examples/rule/min-max.png and b/static/examples/rule/min-max.png differ
diff --git a/static/examples/rule/y-baseline.dark.png b/static/examples/rule/y-baseline.dark.png
index 81cf7d5e..68b12016 100644
Binary files a/static/examples/rule/y-baseline.dark.png and b/static/examples/rule/y-baseline.dark.png differ
diff --git a/static/examples/rule/y-baseline.png b/static/examples/rule/y-baseline.png
index 9c6830d7..1f8111d9 100644
Binary files a/static/examples/rule/y-baseline.png and b/static/examples/rule/y-baseline.png differ
diff --git a/static/examples/text/css-var.dark.png b/static/examples/text/css-var.dark.png
index 4a85462b..54b1dd46 100644
Binary files a/static/examples/text/css-var.dark.png and b/static/examples/text/css-var.dark.png differ
diff --git a/static/examples/text/css-var.png b/static/examples/text/css-var.png
index 08e3b155..65770180 100644
Binary files a/static/examples/text/css-var.png and b/static/examples/text/css-var.png differ
diff --git a/static/examples/text/frame-anchor.dark.png b/static/examples/text/frame-anchor.dark.png
index a3eec450..f714d984 100644
Binary files a/static/examples/text/frame-anchor.dark.png and b/static/examples/text/frame-anchor.dark.png differ
diff --git a/static/examples/text/frame-anchor.png b/static/examples/text/frame-anchor.png
index df1da446..e98c87c6 100644
Binary files a/static/examples/text/frame-anchor.png and b/static/examples/text/frame-anchor.png differ
diff --git a/static/examples/vector/wind.dark.png b/static/examples/vector/wind.dark.png
index 6b2dcc9d..79691f2f 100644
Binary files a/static/examples/vector/wind.dark.png and b/static/examples/vector/wind.dark.png differ
diff --git a/static/examples/vector/wind.png b/static/examples/vector/wind.png
index 24fbe1ed..e85a6545 100644
Binary files a/static/examples/vector/wind.png and b/static/examples/vector/wind.png differ

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/121.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/121.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/121.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/svelteplot/svelteplot/pull/121.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>