@databricks/appkit-ui 0.17.0 → 0.19.0

package/CLAUDE.md

@@ -44,6 +44,7 @@ npx @databricks/appkit docs <query>
 - [Caching](./docs/plugins/caching.md): AppKit provides both global and plugin-level caching capabilities.
 - [Creating custom plugins](./docs/plugins/custom-plugins.md): If you need custom API routes or background logic, implement an AppKit plugin. The fastest way is to use the CLI:
 - [Execution context](./docs/plugins/execution-context.md): AppKit manages Databricks authentication via two contexts:
+- [Files plugin](./docs/plugins/files.md): File operations against Databricks Unity Catalog Volumes. Supports listing, reading, downloading, uploading, deleting, and previewing files with built-in caching, retry, and timeout handling via the execution interceptor pipeline.
 - [Genie plugin](./docs/plugins/genie.md): Integrates Databricks AI/BI Genie spaces into your AppKit application, enabling natural language data queries via a conversational interface.
 - [Lakebase plugin](./docs/plugins/lakebase.md): Currently, the Lakebase plugin currently requires a one-time manual setup to connect your Databricks App with your Lakebase database. An automated setup process is planned for an upcoming future release.
 - [Plugin management](./docs/plugins/plugin-management.md): AppKit includes a CLI for managing plugins. All commands are available under npx @databricks/appkit plugin.
@@ -83,7 +84,7 @@ npx @databricks/appkit docs <query>
 - [Interface: GenerateDatabaseCredentialRequest](./docs/api/appkit/Interface.GenerateDatabaseCredentialRequest.md): Request parameters for generating database OAuth credentials
 - [Interface: ITelemetry](./docs/api/appkit/Interface.ITelemetry.md): Plugin-facing interface for OpenTelemetry instrumentation.
 - [Interface: LakebasePoolConfig](./docs/api/appkit/Interface.LakebasePoolConfig.md): Configuration for creating a Lakebase connection pool
-- [Interface: PluginManifest](./docs/api/appkit/Interface.PluginManifest.md): Plugin manifest that declares metadata and resource requirements.
+- [Interface: PluginManifest<TName>](./docs/api/appkit/Interface.PluginManifest.md): Plugin manifest that declares metadata and resource requirements.
 - [Interface: RequestedClaims](./docs/api/appkit/Interface.RequestedClaims.md): Optional claims for fine-grained Unity Catalog table permissions
 - [Interface: RequestedResource](./docs/api/appkit/Interface.RequestedResource.md): Resource to request permissions for in Unity Catalog
 - [Interface: ResourceEntry](./docs/api/appkit/Interface.ResourceEntry.md): Internal representation of a resource in the registry.
@@ -94,6 +95,7 @@ npx @databricks/appkit docs <query>
 - [Interface: ValidationResult](./docs/api/appkit/Interface.ValidationResult.md): Result of validating all registered resources against the environment.
 - [Type Alias: ConfigSchema](./docs/api/appkit/TypeAlias.ConfigSchema.md): Configuration schema definition for plugin config.
 - [Type Alias: IAppRouter](./docs/api/appkit/TypeAlias.IAppRouter.md): Express router type for plugin route registration
+- [Type Alias: PluginData<T, U, N>](./docs/api/appkit/TypeAlias.PluginData.md): Type Parameters
 - [Type Alias: ResourcePermission](./docs/api/appkit/TypeAlias.ResourcePermission.md): Union of all possible permission levels across all resource types.
 - [Type Alias: ToPlugin()<T, U, N>](./docs/api/appkit/TypeAlias.ToPlugin.md): Type Parameters
 - [Variable: sql](./docs/api/appkit/Variable.sql.md): SQL helper namespace
@@ -110,10 +112,16 @@ npx @databricks/appkit docs <query>
 - [PieChart](./docs/api/appkit-ui/data/PieChart.md): Pie Chart component for proportional data visualization.
 - [RadarChart](./docs/api/appkit-ui/data/RadarChart.md): Radar Chart component for multi-dimensional data comparison.
 - [ScatterChart](./docs/api/appkit-ui/data/ScatterChart.md): Scatter Chart component for correlation and distribution visualization.
+- [DirectoryList](./docs/api/appkit-ui/files/DirectoryList.md): Card-wrapped directory listing with loading, error, and empty states
+- [FileBreadcrumb](./docs/api/appkit-ui/files/FileBreadcrumb.md): Path-aware breadcrumb navigation built on top of Breadcrumb primitives
+- [FileEntry](./docs/api/appkit-ui/files/FileEntry.md): Single file or directory row with icon, name, size, and selection state
+- [FilePreviewPanel](./docs/api/appkit-ui/files/FilePreviewPanel.md): Preview panel displaying file metadata, image/text preview, and download/delete actions
+- [NewFolderInput](./docs/api/appkit-ui/files/NewFolderInput.md): Inline folder-name input with create/cancel actions
 - [GenieChat](./docs/api/appkit-ui/genie/GenieChat.md): Full-featured chat interface for a single Databricks AI/BI Genie space. Handles message streaming, conversation history, and auto-reconnection via SSE.
 - [GenieChatInput](./docs/api/appkit-ui/genie/GenieChatInput.md): Auto-expanding textarea input with a send button for chat messages. Submits on Enter (Shift+Enter for newline).
 - [GenieChatMessage](./docs/api/appkit-ui/genie/GenieChatMessage.md): Renders a single Genie message bubble with optional expandable SQL query attachments.
 - [GenieChatMessageList](./docs/api/appkit-ui/genie/GenieChatMessageList.md): Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator.
+- [GenieQueryVisualization](./docs/api/appkit-ui/genie/GenieQueryVisualization.md): Renders a chart + data table for a Genie query result.
 - [Styling](./docs/api/appkit-ui/styling.md): This guide covers how to style AppKit UI components using CSS variables and theming.
 - [Accordion](./docs/api/appkit-ui/ui/Accordion.md): Collapsible content sections organized in a vertical stack
 - [Alert](./docs/api/appkit-ui/ui/Alert.md): Displays important information with optional icon and multiple variants

package/dist/cli/commands/plugin/create/scaffold.js

@@ -92,9 +92,7 @@ function scaffoldPlugin(targetDir, answers, options) {
 import manifest from "./manifest.json";
 
 export class ${className} extends Plugin {
-  name = "${answers.name}";
-
-  static manifest = manifest as PluginManifest;
+  static manifest = manifest as PluginManifest<"${answers.name}">;
 
   injectRoutes(router: IAppRouter): void {
     // Add your routes here, e.g.:
@@ -109,11 +107,7 @@ export class ${className} extends Plugin {
   }
 }
 
-export const ${exportName} = toPlugin<
-  typeof ${className},
-  Record<string, never>,
-  "${answers.name}"
->(${className}, "${answers.name}");
+export const ${exportName} = toPlugin(${className});
 `;
 		writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);
 		const indexTs = `export { ${className}, ${exportName} } from "./${answers.name}";

package/dist/cli/commands/plugin/create/scaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.js","names":[],"sources":["../../../../../src/cli/commands/plugin/create/scaffold.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { humanizeResourceType, MANIFEST_SCHEMA_ID } from \"./resource-defaults\";\nimport type { CreateAnswers } from \"./types\";\n\n/** Convert kebab-name to PascalCase (e.g. my-plugin -> MyPlugin). */\nfunction toPascalCase(name: string): string {\n  return name\n    .split(\"-\")\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n    .join(\"\");\n}\n\n/** Convert kebab-name to camelCase (e.g. my-plugin -> myPlugin). */\nfunction toCamelCase(name: string): string {\n  const pascal = toPascalCase(name);\n  return pascal.charAt(0).toLowerCase() + pascal.slice(1);\n}\n\n/** Build manifest.json resources from selected resources. */\nfunction buildManifestResources(answers: CreateAnswers) {\n  const required: unknown[] = [];\n  const optional: unknown[] = [];\n\n  for (const r of answers.resources) {\n    const alias = humanizeResourceType(r.type);\n    const entry = {\n      type: r.type,\n      alias,\n      resourceKey: r.resourceKey,\n      description: r.description || `Required for ${alias} functionality.`,\n      permission: r.permission,\n      fields: r.fields,\n    };\n    if (r.required) {\n      required.push(entry);\n    } else {\n      optional.push(entry);\n    }\n  }\n\n  return { required, optional };\n}\n\n/** Build full manifest object for manifest.json. */\nfunction buildManifest(answers: CreateAnswers): Record<string, unknown> {\n  const { required, optional } = buildManifestResources(answers);\n  const manifest: Record<string, unknown> = {\n    $schema: MANIFEST_SCHEMA_ID,\n    name: answers.name,\n    displayName: answers.displayName,\n    description: answers.description,\n    resources: { required, optional },\n  };\n  if (answers.author) manifest.author = answers.author;\n  manifest.version = answers.version || \"0.1.0\";\n  if (answers.license) manifest.license = answers.license;\n  return manifest;\n}\n\n/** Resolve absolute target directory from cwd and answers. */\nexport function resolveTargetDir(cwd: string, answers: CreateAnswers): string {\n  return path.resolve(cwd, answers.targetPath);\n}\n\n/** Track files written during scaffolding for rollback on failure. */\nfunction writeTracked(\n  filePath: string,\n  content: string,\n  written: string[],\n): void {\n  fs.writeFileSync(filePath, content);\n  written.push(filePath);\n}\n\n/** Remove files written during a failed scaffold attempt. */\nfunction rollback(written: string[], targetDir: string): void {\n  for (const filePath of written.reverse()) {\n    try {\n      fs.unlinkSync(filePath);\n    } catch {\n      // best-effort cleanup\n    }\n  }\n  try {\n    const remaining = fs.readdirSync(targetDir);\n    if (remaining.length === 0) fs.rmdirSync(targetDir);\n  } catch {\n    // directory may not be empty or may have been removed already\n  }\n}\n\n/**\n * Scaffold plugin files into targetDir. Pure: no interactive I/O.\n * Writes manifest.json, {name}.ts, index.ts; for isolated also package.json, tsconfig.json, README.md.\n * On failure, rolls back any files already written.\n */\nexport function scaffoldPlugin(\n  targetDir: string,\n  answers: CreateAnswers,\n  options: { isolated: boolean },\n): void {\n  fs.mkdirSync(targetDir, { recursive: true });\n\n  const written: string[] = [];\n\n  try {\n    const manifest = buildManifest(answers);\n    const className = toPascalCase(answers.name);\n    const exportName = toCamelCase(answers.name);\n\n    writeTracked(\n      path.join(targetDir, \"manifest.json\"),\n      `${JSON.stringify(manifest, null, 2)}\\n`,\n      written,\n    );\n\n    const pluginTs = `import {\n  Plugin,\n  toPlugin,\n  type IAppRouter,\n  type PluginManifest,\n} from \"@databricks/appkit\";\nimport manifest from \"./manifest.json\";\n\nexport class ${className} extends Plugin {\n  name = \"${answers.name}\";\n\n  static manifest = manifest as PluginManifest;\n\n  injectRoutes(router: IAppRouter): void {\n    // Add your routes here, e.g.:\n    // this.route(router, {\n    //   name: \"example\",\n    //   method: \"get\",\n    //   path: \"/\",\n    //   handler: async (_req, res) => {\n    //     res.json({ message: \"Hello from ${answers.name}\" });\n    //   },\n    // });\n  }\n}\n\nexport const ${exportName} = toPlugin<\n  typeof ${className},\n  Record<string, never>,\n  \"${answers.name}\"\n>(${className}, \"${answers.name}\");\n`;\n\n    writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);\n\n    const indexTs = `export { ${className}, ${exportName} } from \"./${answers.name}\";\n`;\n\n    writeTracked(path.join(targetDir, \"index.ts\"), indexTs, written);\n\n    if (options.isolated) {\n      const packageName =\n        answers.name.includes(\"/\") || answers.name.startsWith(\"@\")\n          ? answers.name\n          : `appkit-plugin-${answers.name}`;\n\n      const packageJson = {\n        name: packageName,\n        version: answers.version || \"0.1.0\",\n        type: \"module\",\n        main: \"./dist/index.js\",\n        types: \"./dist/index.d.ts\",\n        files: [\"dist\"],\n        scripts: {\n          build: \"tsc\",\n          typecheck: \"tsc --noEmit\",\n        },\n        peerDependencies: {\n          \"@databricks/appkit\": \">=0.5.0\",\n        },\n        devDependencies: {\n          typescript: \"^5.0.0\",\n        },\n      };\n\n      writeTracked(\n        path.join(targetDir, \"package.json\"),\n        `${JSON.stringify(packageJson, null, 2)}\\n`,\n        written,\n      );\n\n      const tsconfigJson = {\n        compilerOptions: {\n          target: \"ES2022\",\n          module: \"NodeNext\",\n          moduleResolution: \"NodeNext\",\n          outDir: \"dist\",\n          rootDir: \".\",\n          declaration: true,\n          strict: true,\n          skipLibCheck: true,\n        },\n        include: [\"*.ts\"],\n        exclude: [\"node_modules\", \"dist\"],\n      };\n\n      writeTracked(\n        path.join(targetDir, \"tsconfig.json\"),\n        `${JSON.stringify(tsconfigJson, null, 2)}\\n`,\n        written,\n      );\n\n      const readme = `# ${answers.displayName}\n\n${answers.description}\n\n## Installation\n\n\\`\\`\\`bash\npnpm add ${packageName} @databricks/appkit\n\\`\\`\\`\n\n## Usage\n\nRegister the plugin in your AppKit app:\n\n\\`\\`\\`ts\nimport { createApp } from \"@databricks/appkit\";\nimport { ${exportName} } from \"${packageName}\";\n\ncreateApp({\n  plugins: [\n    ${exportName}(),\n    // ... other plugins\n  ],\n}).then((app) => { /* ... */ });\n\\`\\`\\`\n`;\n\n      writeTracked(path.join(targetDir, \"README.md\"), readme, written);\n    }\n  } catch (err) {\n    rollback(written, targetDir);\n    throw err;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"scaffold.js","names":[],"sources":["../../../../../src/cli/commands/plugin/create/scaffold.ts"],"sourcesContent":["import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { humanizeResourceType, MANIFEST_SCHEMA_ID } from \"./resource-defaults\";\nimport type { CreateAnswers } from \"./types\";\n\n/** Convert kebab-name to PascalCase (e.g. my-plugin -> MyPlugin). */\nfunction toPascalCase(name: string): string {\n  return name\n    .split(\"-\")\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())\n    .join(\"\");\n}\n\n/** Convert kebab-name to camelCase (e.g. my-plugin -> myPlugin). */\nfunction toCamelCase(name: string): string {\n  const pascal = toPascalCase(name);\n  return pascal.charAt(0).toLowerCase() + pascal.slice(1);\n}\n\n/** Build manifest.json resources from selected resources. */\nfunction buildManifestResources(answers: CreateAnswers) {\n  const required: unknown[] = [];\n  const optional: unknown[] = [];\n\n  for (const r of answers.resources) {\n    const alias = humanizeResourceType(r.type);\n    const entry = {\n      type: r.type,\n      alias,\n      resourceKey: r.resourceKey,\n      description: r.description || `Required for ${alias} functionality.`,\n      permission: r.permission,\n      fields: r.fields,\n    };\n    if (r.required) {\n      required.push(entry);\n    } else {\n      optional.push(entry);\n    }\n  }\n\n  return { required, optional };\n}\n\n/** Build full manifest object for manifest.json. */\nfunction buildManifest(answers: CreateAnswers): Record<string, unknown> {\n  const { required, optional } = buildManifestResources(answers);\n  const manifest: Record<string, unknown> = {\n    $schema: MANIFEST_SCHEMA_ID,\n    name: answers.name,\n    displayName: answers.displayName,\n    description: answers.description,\n    resources: { required, optional },\n  };\n  if (answers.author) manifest.author = answers.author;\n  manifest.version = answers.version || \"0.1.0\";\n  if (answers.license) manifest.license = answers.license;\n  return manifest;\n}\n\n/** Resolve absolute target directory from cwd and answers. */\nexport function resolveTargetDir(cwd: string, answers: CreateAnswers): string {\n  return path.resolve(cwd, answers.targetPath);\n}\n\n/** Track files written during scaffolding for rollback on failure. */\nfunction writeTracked(\n  filePath: string,\n  content: string,\n  written: string[],\n): void {\n  fs.writeFileSync(filePath, content);\n  written.push(filePath);\n}\n\n/** Remove files written during a failed scaffold attempt. */\nfunction rollback(written: string[], targetDir: string): void {\n  for (const filePath of written.reverse()) {\n    try {\n      fs.unlinkSync(filePath);\n    } catch {\n      // best-effort cleanup\n    }\n  }\n  try {\n    const remaining = fs.readdirSync(targetDir);\n    if (remaining.length === 0) fs.rmdirSync(targetDir);\n  } catch {\n    // directory may not be empty or may have been removed already\n  }\n}\n\n/**\n * Scaffold plugin files into targetDir. Pure: no interactive I/O.\n * Writes manifest.json, {name}.ts, index.ts; for isolated also package.json, tsconfig.json, README.md.\n * On failure, rolls back any files already written.\n */\nexport function scaffoldPlugin(\n  targetDir: string,\n  answers: CreateAnswers,\n  options: { isolated: boolean },\n): void {\n  fs.mkdirSync(targetDir, { recursive: true });\n\n  const written: string[] = [];\n\n  try {\n    const manifest = buildManifest(answers);\n    const className = toPascalCase(answers.name);\n    const exportName = toCamelCase(answers.name);\n\n    writeTracked(\n      path.join(targetDir, \"manifest.json\"),\n      `${JSON.stringify(manifest, null, 2)}\\n`,\n      written,\n    );\n\n    const pluginTs = `import {\n  Plugin,\n  toPlugin,\n  type IAppRouter,\n  type PluginManifest,\n} from \"@databricks/appkit\";\nimport manifest from \"./manifest.json\";\n\nexport class ${className} extends Plugin {\n  static manifest = manifest as PluginManifest<\"${answers.name}\">;\n\n  injectRoutes(router: IAppRouter): void {\n    // Add your routes here, e.g.:\n    // this.route(router, {\n    //   name: \"example\",\n    //   method: \"get\",\n    //   path: \"/\",\n    //   handler: async (_req, res) => {\n    //     res.json({ message: \"Hello from ${answers.name}\" });\n    //   },\n    // });\n  }\n}\n\nexport const ${exportName} = toPlugin(${className});\n`;\n\n    writeTracked(path.join(targetDir, `${answers.name}.ts`), pluginTs, written);\n\n    const indexTs = `export { ${className}, ${exportName} } from \"./${answers.name}\";\n`;\n\n    writeTracked(path.join(targetDir, \"index.ts\"), indexTs, written);\n\n    if (options.isolated) {\n      const packageName =\n        answers.name.includes(\"/\") || answers.name.startsWith(\"@\")\n          ? answers.name\n          : `appkit-plugin-${answers.name}`;\n\n      const packageJson = {\n        name: packageName,\n        version: answers.version || \"0.1.0\",\n        type: \"module\",\n        main: \"./dist/index.js\",\n        types: \"./dist/index.d.ts\",\n        files: [\"dist\"],\n        scripts: {\n          build: \"tsc\",\n          typecheck: \"tsc --noEmit\",\n        },\n        peerDependencies: {\n          \"@databricks/appkit\": \">=0.5.0\",\n        },\n        devDependencies: {\n          typescript: \"^5.0.0\",\n        },\n      };\n\n      writeTracked(\n        path.join(targetDir, \"package.json\"),\n        `${JSON.stringify(packageJson, null, 2)}\\n`,\n        written,\n      );\n\n      const tsconfigJson = {\n        compilerOptions: {\n          target: \"ES2022\",\n          module: \"NodeNext\",\n          moduleResolution: \"NodeNext\",\n          outDir: \"dist\",\n          rootDir: \".\",\n          declaration: true,\n          strict: true,\n          skipLibCheck: true,\n        },\n        include: [\"*.ts\"],\n        exclude: [\"node_modules\", \"dist\"],\n      };\n\n      writeTracked(\n        path.join(targetDir, \"tsconfig.json\"),\n        `${JSON.stringify(tsconfigJson, null, 2)}\\n`,\n        written,\n      );\n\n      const readme = `# ${answers.displayName}\n\n${answers.description}\n\n## Installation\n\n\\`\\`\\`bash\npnpm add ${packageName} @databricks/appkit\n\\`\\`\\`\n\n## Usage\n\nRegister the plugin in your AppKit app:\n\n\\`\\`\\`ts\nimport { createApp } from \"@databricks/appkit\";\nimport { ${exportName} } from \"${packageName}\";\n\ncreateApp({\n  plugins: [\n    ${exportName}(),\n    // ... other plugins\n  ],\n}).then((app) => { /* ... */ });\n\\`\\`\\`\n`;\n\n      writeTracked(path.join(targetDir, \"README.md\"), readme, written);\n    }\n  } catch (err) {\n    rollback(written, targetDir);\n    throw err;\n  }\n}\n"],"mappings":"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"}

package/dist/react/charts/base.js

@@ -42,7 +42,7 @@ function BaseChart({ data, chartType, xKey, yKey, orientation, height = 300, tit
 		chartType
 	]);
 	const option = useMemo(() => {
-		const { xData, yFields, chartType: detectedChartType } = normalized;
+		const { xData, yFields, xField, chartType: detectedChartType } = normalized;
 		if (xData.length === 0) return null;
 		const isHeatmap = chartType === "heatmap";
 		const baseCtx = {
@@ -51,7 +51,8 @@ function BaseChart({ data, chartType, xKey, yKey, orientation, height = 300, tit
 			yFields,
 			colors,
 			title,
-			showLegend
+			showLegend,
+			xField
 		};
 		const isPie = chartType === "pie" || chartType === "donut";
 		const isRadar = chartType === "radar";

package/dist/react/charts/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":["import type { ECharts } from \"echarts\";\nimport ReactECharts from \"echarts-for-react\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { normalizeChartData, normalizeHeatmapData } from \"./normalize\";\nimport {\n  buildCartesianOption,\n  buildHeatmapOption,\n  buildHorizontalBarOption,\n  buildPieOption,\n  buildRadarOption,\n  type OptionBuilderContext,\n} from \"./options\";\nimport { useThemeColors } from \"./theme\";\nimport type {\n  ChartColorPalette,\n  ChartData,\n  ChartType,\n  Orientation,\n} from \"./types\";\n\n// ============================================================================\n// Palette Selection\n// ============================================================================\n\n/**\n * Determines the appropriate color palette for a chart type.\n * - Heatmaps use sequential (low → high intensity)\n * - All other charts use categorical (distinct categories)\n */\nfunction getDefaultPalette(chartType: ChartType): ChartColorPalette {\n  switch (chartType) {\n    case \"heatmap\":\n      return \"sequential\";\n    default:\n      return \"categorical\";\n  }\n}\n\n// ============================================================================\n// Component Props\n// ============================================================================\n\nexport interface BaseChartProps {\n  /** Chart data (Arrow Table or JSON array) - format is auto-detected */\n  data: ChartData;\n  /** Chart type */\n  chartType: ChartType;\n  /** X-axis field key (auto-detected from schema if not provided) */\n  xKey?: string;\n  /** Y-axis field key(s) (auto-detected from schema if not provided) */\n  yKey?: string | string[];\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Chart title */\n  title?: string;\n  /** Show legend @default true */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude (heatmap)\n   * - \"diverging\": Two-tone for positive/negative (correlation)\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors (overrides colorPalette) */\n  colors?: string[];\n  /** Show data point symbols (line/area charts) @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves (line/area charts) @default true */\n  smooth?: boolean;\n  /** Stack series @default false */\n  stacked?: boolean;\n  /** Symbol size for scatter charts @default 8 */\n  symbolSize?: number;\n  /** Show area fill for radar charts @default true */\n  showArea?: boolean;\n  /** Inner radius for pie/donut (0-100) @default 0 */\n  innerRadius?: number;\n  /** Show labels on pie/donut slices @default true */\n  showLabels?: boolean;\n  /** Label position for pie/donut @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n  /** Y-axis field key for heatmap (the row dimension) */\n  yAxisKey?: string;\n  /** Min value for heatmap color scale */\n  min?: number;\n  /** Max value for heatmap color scale */\n  max?: number;\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// ============================================================================\n// Base Chart Component\n// ============================================================================\n\n/**\n * Base chart component that handles both Arrow and JSON data.\n * Renders using ECharts for consistent output across both formats.\n */\nexport function BaseChart({\n  data,\n  chartType,\n  xKey,\n  yKey,\n  orientation,\n  height = 300,\n  title,\n  showLegend = true,\n  colorPalette,\n  colors: customColors,\n  showSymbol = false,\n  smooth = true,\n  stacked = false,\n  symbolSize = 8,\n  showArea = true,\n  innerRadius = 0,\n  showLabels = true,\n  labelPosition = \"outside\",\n  yAxisKey,\n  min,\n  max,\n  options: customOptions,\n  className,\n}: BaseChartProps) {\n  // Determine the appropriate color palette based on chart type\n  const resolvedPalette = colorPalette ?? getDefaultPalette(chartType);\n  const themeColors = useThemeColors(resolvedPalette);\n  const colors = customColors ?? themeColors;\n\n  // Store ECharts instance directly to avoid stale ref issues on unmount\n  const echartsInstanceRef = useRef<ECharts | null>(null);\n\n  // Callback ref pattern: captures the ECharts instance when ReactECharts mounts\n  // This ensures we always have a stable reference to the actual instance\n  const chartRefCallback = useCallback((node: ReactECharts | null) => {\n    // Dispose previous instance if component is being replaced\n    if (\n      echartsInstanceRef.current &&\n      !echartsInstanceRef.current.isDisposed()\n    ) {\n      echartsInstanceRef.current.dispose();\n    }\n\n    // Store the new instance\n    if (node) {\n      echartsInstanceRef.current = node.getEchartsInstance();\n    } else {\n      // Component unmounting - dispose the stored instance\n      if (\n        echartsInstanceRef.current &&\n        !echartsInstanceRef.current.isDisposed()\n      ) {\n        echartsInstanceRef.current.dispose();\n      }\n      echartsInstanceRef.current = null;\n    }\n  }, []);\n\n  // Memoize data normalization\n  const normalized = useMemo(\n    () =>\n      chartType === \"heatmap\"\n        ? normalizeHeatmapData(data, xKey, yAxisKey, yKey)\n        : normalizeChartData(data, xKey, yKey, orientation),\n    [data, xKey, yKey, yAxisKey, orientation, chartType],\n  );\n\n  // Memoize option building\n  const option = useMemo(() => {\n    const { xData, yFields, chartType: detectedChartType } = normalized;\n\n    if (xData.length === 0) return null;\n\n    // Determine chart mode first (needed to handle yDataMap)\n    const isHeatmap = chartType === \"heatmap\";\n\n    // Heatmaps use heatmapData instead of yDataMap\n    // For other charts, yDataMap is required\n    const yDataMap = \"yDataMap\" in normalized ? normalized.yDataMap : {};\n\n    const baseCtx: OptionBuilderContext = {\n      xData,\n      yDataMap,\n      yFields,\n      colors,\n      title,\n      showLegend,\n    };\n    const isPie = chartType === \"pie\" || chartType === \"donut\";\n    const isRadar = chartType === \"radar\";\n    const isHorizontal =\n      !isPie &&\n      !isRadar &&\n      !isHeatmap &&\n      (orientation === \"horizontal\" ||\n        (detectedChartType === \"categorical\" &&\n          !orientation &&\n          chartType === \"bar\"));\n    const isTimeSeries =\n      detectedChartType === \"timeseries\" &&\n      !isHorizontal &&\n      !isRadar &&\n      !isHeatmap;\n\n    // Build option based on chart type\n    let opt: Record<string, unknown>;\n\n    if (isHeatmap && \"yAxisData\" in normalized && \"heatmapData\" in normalized) {\n      const heatmapNorm = normalized as {\n        yAxisData: (string | number)[];\n        heatmapData: [number, number, number][];\n        min: number;\n        max: number;\n      } & typeof normalized;\n      opt = buildHeatmapOption({\n        ...baseCtx,\n        yAxisData: heatmapNorm.yAxisData,\n        heatmapData: heatmapNorm.heatmapData,\n        min: min ?? heatmapNorm.min,\n        max: max ?? heatmapNorm.max,\n        showLabels,\n      });\n    } else if (isRadar) {\n      opt = buildRadarOption(baseCtx, showArea);\n    } else if (isPie) {\n      opt = buildPieOption(\n        baseCtx,\n        chartType as \"pie\" | \"donut\",\n        innerRadius,\n        showLabels,\n        labelPosition,\n      );\n    } else if (isHorizontal) {\n      opt = buildHorizontalBarOption(baseCtx, stacked);\n    } else {\n      opt = buildCartesianOption({\n        ...baseCtx,\n        chartType,\n        isTimeSeries,\n        stacked,\n        smooth,\n        showSymbol,\n        symbolSize,\n      });\n    }\n\n    // Merge custom options\n    return customOptions ? { ...opt, ...customOptions } : opt;\n  }, [\n    normalized,\n    colors,\n    title,\n    showLegend,\n    chartType,\n    orientation,\n    innerRadius,\n    showLabels,\n    labelPosition,\n    stacked,\n    smooth,\n    showSymbol,\n    symbolSize,\n    showArea,\n    min,\n    max,\n    customOptions,\n  ]);\n\n  if (!option) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n        No data\n      </div>\n    );\n  }\n\n  return (\n    <ReactECharts\n      ref={chartRefCallback}\n      option={option}\n      style={{ height }}\n      className={className}\n      opts={{ renderer: \"canvas\" }}\n      notMerge={false}\n      lazyUpdate={true}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,kBAAkB,WAAyC;AAClE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;;;;;AAsEb,SAAgB,UAAU,EACxB,MACA,WACA,MACA,MACA,aACA,SAAS,KACT,OACA,aAAa,MACb,cACA,QAAQ,cACR,aAAa,OACb,SAAS,MACT,UAAU,OACV,aAAa,GACb,WAAW,MACX,cAAc,GACd,aAAa,MACb,gBAAgB,WAChB,UACA,KACA,KACA,SAAS,eACT,aACiB;CAGjB,MAAM,cAAc,eADI,gBAAgB,kBAAkB,UAAU,CACjB;CACnD,MAAM,SAAS,gBAAgB;CAG/B,MAAM,qBAAqB,OAAuB,KAAK;CAIvD,MAAM,mBAAmB,aAAa,SAA8B;AAElE,MACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAItC,MAAI,KACF,oBAAmB,UAAU,KAAK,oBAAoB;OACjD;AAEL,OACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAEtC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAGN,MAAM,aAAa,cAEf,cAAc,YACV,qBAAqB,MAAM,MAAM,UAAU,KAAK,GAChD,mBAAmB,MAAM,MAAM,MAAM,YAAY,EACvD;EAAC;EAAM;EAAM;EAAM;EAAU;EAAa;EAAU,CACrD;CAGD,MAAM,SAAS,cAAc;EAC3B,MAAM,EAAE,OAAO,SAAS,WAAW,sBAAsB;AAEzD,MAAI,MAAM,WAAW,EAAG,QAAO;EAG/B,MAAM,YAAY,cAAc;EAMhC,MAAM,UAAgC;GACpC;GACA,UAJe,cAAc,aAAa,WAAW,WAAW,EAAE;GAKlE;GACA;GACA;GACA;GACD;EACD,MAAM,QAAQ,cAAc,SAAS,cAAc;EACnD,MAAM,UAAU,cAAc;EAC9B,MAAM,eACJ,CAAC,SACD,CAAC,WACD,CAAC,cACA,gBAAgB,gBACd,sBAAsB,iBACrB,CAAC,eACD,cAAc;EACpB,MAAM,eACJ,sBAAsB,gBACtB,CAAC,gBACD,CAAC,WACD,CAAC;EAGH,IAAI;AAEJ,MAAI,aAAa,eAAe,cAAc,iBAAiB,YAAY;GACzE,MAAM,cAAc;AAMpB,SAAM,mBAAmB;IACvB,GAAG;IACH,WAAW,YAAY;IACvB,aAAa,YAAY;IACzB,KAAK,OAAO,YAAY;IACxB,KAAK,OAAO,YAAY;IACxB;IACD,CAAC;aACO,QACT,OAAM,iBAAiB,SAAS,SAAS;WAChC,MACT,OAAM,eACJ,SACA,WACA,aACA,YACA,cACD;WACQ,aACT,OAAM,yBAAyB,SAAS,QAAQ;MAEhD,OAAM,qBAAqB;GACzB,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAIJ,SAAO,gBAAgB;GAAE,GAAG;GAAK,GAAG;GAAe,GAAG;IACrD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;YAAgE;GAEzE;AAIV,QACE,oBAAC;EACC,KAAK;EACG;EACR,OAAO,EAAE,QAAQ;EACN;EACX,MAAM,EAAE,UAAU,UAAU;EAC5B,UAAU;EACV,YAAY;GACZ"}
+{"version":3,"file":"base.js","names":[],"sources":["../../../src/react/charts/base.tsx"],"sourcesContent":["import type { ECharts } from \"echarts\";\nimport ReactECharts from \"echarts-for-react\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { normalizeChartData, normalizeHeatmapData } from \"./normalize\";\nimport {\n  buildCartesianOption,\n  buildHeatmapOption,\n  buildHorizontalBarOption,\n  buildPieOption,\n  buildRadarOption,\n  type OptionBuilderContext,\n} from \"./options\";\nimport { useThemeColors } from \"./theme\";\nimport type {\n  ChartColorPalette,\n  ChartData,\n  ChartType,\n  Orientation,\n} from \"./types\";\n\n// ============================================================================\n// Palette Selection\n// ============================================================================\n\n/**\n * Determines the appropriate color palette for a chart type.\n * - Heatmaps use sequential (low → high intensity)\n * - All other charts use categorical (distinct categories)\n */\nfunction getDefaultPalette(chartType: ChartType): ChartColorPalette {\n  switch (chartType) {\n    case \"heatmap\":\n      return \"sequential\";\n    default:\n      return \"categorical\";\n  }\n}\n\n// ============================================================================\n// Component Props\n// ============================================================================\n\nexport interface BaseChartProps {\n  /** Chart data (Arrow Table or JSON array) - format is auto-detected */\n  data: ChartData;\n  /** Chart type */\n  chartType: ChartType;\n  /** X-axis field key (auto-detected from schema if not provided) */\n  xKey?: string;\n  /** Y-axis field key(s) (auto-detected from schema if not provided) */\n  yKey?: string | string[];\n  /** Chart orientation @default \"vertical\" */\n  orientation?: Orientation;\n  /** Chart height in pixels @default 300 */\n  height?: number;\n  /** Chart title */\n  title?: string;\n  /** Show legend @default true */\n  showLegend?: boolean;\n  /**\n   * Color palette to use. Auto-selected based on chart type if not specified.\n   * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n   * - \"sequential\": Gradient for magnitude (heatmap)\n   * - \"diverging\": Two-tone for positive/negative (correlation)\n   */\n  colorPalette?: ChartColorPalette;\n  /** Custom colors (overrides colorPalette) */\n  colors?: string[];\n  /** Show data point symbols (line/area charts) @default false */\n  showSymbol?: boolean;\n  /** Smooth line curves (line/area charts) @default true */\n  smooth?: boolean;\n  /** Stack series @default false */\n  stacked?: boolean;\n  /** Symbol size for scatter charts @default 8 */\n  symbolSize?: number;\n  /** Show area fill for radar charts @default true */\n  showArea?: boolean;\n  /** Inner radius for pie/donut (0-100) @default 0 */\n  innerRadius?: number;\n  /** Show labels on pie/donut slices @default true */\n  showLabels?: boolean;\n  /** Label position for pie/donut @default \"outside\" */\n  labelPosition?: \"outside\" | \"inside\" | \"center\";\n  /** Y-axis field key for heatmap (the row dimension) */\n  yAxisKey?: string;\n  /** Min value for heatmap color scale */\n  min?: number;\n  /** Max value for heatmap color scale */\n  max?: number;\n  /** Additional ECharts options to merge */\n  options?: Record<string, unknown>;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// ============================================================================\n// Base Chart Component\n// ============================================================================\n\n/**\n * Base chart component that handles both Arrow and JSON data.\n * Renders using ECharts for consistent output across both formats.\n */\nexport function BaseChart({\n  data,\n  chartType,\n  xKey,\n  yKey,\n  orientation,\n  height = 300,\n  title,\n  showLegend = true,\n  colorPalette,\n  colors: customColors,\n  showSymbol = false,\n  smooth = true,\n  stacked = false,\n  symbolSize = 8,\n  showArea = true,\n  innerRadius = 0,\n  showLabels = true,\n  labelPosition = \"outside\",\n  yAxisKey,\n  min,\n  max,\n  options: customOptions,\n  className,\n}: BaseChartProps) {\n  // Determine the appropriate color palette based on chart type\n  const resolvedPalette = colorPalette ?? getDefaultPalette(chartType);\n  const themeColors = useThemeColors(resolvedPalette);\n  const colors = customColors ?? themeColors;\n\n  // Store ECharts instance directly to avoid stale ref issues on unmount\n  const echartsInstanceRef = useRef<ECharts | null>(null);\n\n  // Callback ref pattern: captures the ECharts instance when ReactECharts mounts\n  // This ensures we always have a stable reference to the actual instance\n  const chartRefCallback = useCallback((node: ReactECharts | null) => {\n    // Dispose previous instance if component is being replaced\n    if (\n      echartsInstanceRef.current &&\n      !echartsInstanceRef.current.isDisposed()\n    ) {\n      echartsInstanceRef.current.dispose();\n    }\n\n    // Store the new instance\n    if (node) {\n      echartsInstanceRef.current = node.getEchartsInstance();\n    } else {\n      // Component unmounting - dispose the stored instance\n      if (\n        echartsInstanceRef.current &&\n        !echartsInstanceRef.current.isDisposed()\n      ) {\n        echartsInstanceRef.current.dispose();\n      }\n      echartsInstanceRef.current = null;\n    }\n  }, []);\n\n  // Memoize data normalization\n  const normalized = useMemo(\n    () =>\n      chartType === \"heatmap\"\n        ? normalizeHeatmapData(data, xKey, yAxisKey, yKey)\n        : normalizeChartData(data, xKey, yKey, orientation),\n    [data, xKey, yKey, yAxisKey, orientation, chartType],\n  );\n\n  // Memoize option building\n  const option = useMemo(() => {\n    const { xData, yFields, xField, chartType: detectedChartType } = normalized;\n\n    if (xData.length === 0) return null;\n\n    // Determine chart mode first (needed to handle yDataMap)\n    const isHeatmap = chartType === \"heatmap\";\n\n    // Heatmaps use heatmapData instead of yDataMap\n    // For other charts, yDataMap is required\n    const yDataMap = \"yDataMap\" in normalized ? normalized.yDataMap : {};\n\n    const baseCtx: OptionBuilderContext = {\n      xData,\n      yDataMap,\n      yFields,\n      colors,\n      title,\n      showLegend,\n      xField,\n    };\n    const isPie = chartType === \"pie\" || chartType === \"donut\";\n    const isRadar = chartType === \"radar\";\n    const isHorizontal =\n      !isPie &&\n      !isRadar &&\n      !isHeatmap &&\n      (orientation === \"horizontal\" ||\n        (detectedChartType === \"categorical\" &&\n          !orientation &&\n          chartType === \"bar\"));\n    const isTimeSeries =\n      detectedChartType === \"timeseries\" &&\n      !isHorizontal &&\n      !isRadar &&\n      !isHeatmap;\n\n    // Build option based on chart type\n    let opt: Record<string, unknown>;\n\n    if (isHeatmap && \"yAxisData\" in normalized && \"heatmapData\" in normalized) {\n      const heatmapNorm = normalized as {\n        yAxisData: (string | number)[];\n        heatmapData: [number, number, number][];\n        min: number;\n        max: number;\n      } & typeof normalized;\n      opt = buildHeatmapOption({\n        ...baseCtx,\n        yAxisData: heatmapNorm.yAxisData,\n        heatmapData: heatmapNorm.heatmapData,\n        min: min ?? heatmapNorm.min,\n        max: max ?? heatmapNorm.max,\n        showLabels,\n      });\n    } else if (isRadar) {\n      opt = buildRadarOption(baseCtx, showArea);\n    } else if (isPie) {\n      opt = buildPieOption(\n        baseCtx,\n        chartType as \"pie\" | \"donut\",\n        innerRadius,\n        showLabels,\n        labelPosition,\n      );\n    } else if (isHorizontal) {\n      opt = buildHorizontalBarOption(baseCtx, stacked);\n    } else {\n      opt = buildCartesianOption({\n        ...baseCtx,\n        chartType,\n        isTimeSeries,\n        stacked,\n        smooth,\n        showSymbol,\n        symbolSize,\n      });\n    }\n\n    // Merge custom options\n    return customOptions ? { ...opt, ...customOptions } : opt;\n  }, [\n    normalized,\n    colors,\n    title,\n    showLegend,\n    chartType,\n    orientation,\n    innerRadius,\n    showLabels,\n    labelPosition,\n    stacked,\n    smooth,\n    showSymbol,\n    symbolSize,\n    showArea,\n    min,\n    max,\n    customOptions,\n  ]);\n\n  if (!option) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n        No data\n      </div>\n    );\n  }\n\n  return (\n    <ReactECharts\n      ref={chartRefCallback}\n      option={option}\n      style={{ height }}\n      className={className}\n      opts={{ renderer: \"canvas\" }}\n      notMerge={false}\n      lazyUpdate={true}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,kBAAkB,WAAyC;AAClE,SAAQ,WAAR;EACE,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;;;;;AAsEb,SAAgB,UAAU,EACxB,MACA,WACA,MACA,MACA,aACA,SAAS,KACT,OACA,aAAa,MACb,cACA,QAAQ,cACR,aAAa,OACb,SAAS,MACT,UAAU,OACV,aAAa,GACb,WAAW,MACX,cAAc,GACd,aAAa,MACb,gBAAgB,WAChB,UACA,KACA,KACA,SAAS,eACT,aACiB;CAGjB,MAAM,cAAc,eADI,gBAAgB,kBAAkB,UAAU,CACjB;CACnD,MAAM,SAAS,gBAAgB;CAG/B,MAAM,qBAAqB,OAAuB,KAAK;CAIvD,MAAM,mBAAmB,aAAa,SAA8B;AAElE,MACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAItC,MAAI,KACF,oBAAmB,UAAU,KAAK,oBAAoB;OACjD;AAEL,OACE,mBAAmB,WACnB,CAAC,mBAAmB,QAAQ,YAAY,CAExC,oBAAmB,QAAQ,SAAS;AAEtC,sBAAmB,UAAU;;IAE9B,EAAE,CAAC;CAGN,MAAM,aAAa,cAEf,cAAc,YACV,qBAAqB,MAAM,MAAM,UAAU,KAAK,GAChD,mBAAmB,MAAM,MAAM,MAAM,YAAY,EACvD;EAAC;EAAM;EAAM;EAAM;EAAU;EAAa;EAAU,CACrD;CAGD,MAAM,SAAS,cAAc;EAC3B,MAAM,EAAE,OAAO,SAAS,QAAQ,WAAW,sBAAsB;AAEjE,MAAI,MAAM,WAAW,EAAG,QAAO;EAG/B,MAAM,YAAY,cAAc;EAMhC,MAAM,UAAgC;GACpC;GACA,UAJe,cAAc,aAAa,WAAW,WAAW,EAAE;GAKlE;GACA;GACA;GACA;GACA;GACD;EACD,MAAM,QAAQ,cAAc,SAAS,cAAc;EACnD,MAAM,UAAU,cAAc;EAC9B,MAAM,eACJ,CAAC,SACD,CAAC,WACD,CAAC,cACA,gBAAgB,gBACd,sBAAsB,iBACrB,CAAC,eACD,cAAc;EACpB,MAAM,eACJ,sBAAsB,gBACtB,CAAC,gBACD,CAAC,WACD,CAAC;EAGH,IAAI;AAEJ,MAAI,aAAa,eAAe,cAAc,iBAAiB,YAAY;GACzE,MAAM,cAAc;AAMpB,SAAM,mBAAmB;IACvB,GAAG;IACH,WAAW,YAAY;IACvB,aAAa,YAAY;IACzB,KAAK,OAAO,YAAY;IACxB,KAAK,OAAO,YAAY;IACxB;IACD,CAAC;aACO,QACT,OAAM,iBAAiB,SAAS,SAAS;WAChC,MACT,OAAM,eACJ,SACA,WACA,aACA,YACA,cACD;WACQ,aACT,OAAM,yBAAyB,SAAS,QAAQ;MAEhD,OAAM,qBAAqB;GACzB,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;AAIJ,SAAO,gBAAgB;GAAE,GAAG;GAAK,GAAG;GAAe,GAAG;IACrD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;YAAgE;GAEzE;AAIV,QACE,oBAAC;EACC,KAAK;EACG;EACR,OAAO,EAAE,QAAQ;EACN;EACX,MAAM,EAAE,UAAU,UAAU;EAC5B,UAAU;EACV,YAAY;GACZ"}

package/dist/react/charts/normalize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize.d.ts","names":[],"sources":["../../../src/react/charts/normalize.ts"],"mappings":";;;;;AAuNA;;iBAAgB,kBAAA,CACd,IAAA,EAAM,SAAA,EACN,IAAA,WACA,IAAA,sBACA,WAAA,GAAc,WAAA,GACb,mBAAA;;;;;;UAqFc,qBAAA,SAA8B,uBAAA;EAzF7C;EA2FA,SAAA;EAzFA;EA2FA,WAAA;EA1FA;EA4FA,GAAA;EA3FoB;EA6FpB,GAAA;AAAA;;;;;;;;;;iBAYc,oBAAA,CACd,IAAA,EAAM,SAAA,EACN,IAAA,WACA,QAAA,WACA,QAAA,uBACC,qBAAA"}
+{"version":3,"file":"normalize.d.ts","names":[],"sources":["../../../src/react/charts/normalize.ts"],"mappings":";;;;;AA2NA;;iBAAgB,kBAAA,CACd,IAAA,EAAM,SAAA,EACN,IAAA,WACA,IAAA,sBACA,WAAA,GAAc,WAAA,GACb,mBAAA;;;;;;UAiGc,qBAAA,SAA8B,uBAAA;EArG7C;EAuGA,SAAA;EArGA;EAuGA,WAAA;EAtGA;EAwGA,GAAA;EAvGoB;EAyGpB,GAAA;AAAA;;;;;;;;;;iBAYc,oBAAA,CACd,IAAA,EAAM,SAAA,EACN,IAAA,WACA,QAAA,WACA,QAAA,uBACC,qBAAA"}

package/dist/react/charts/normalize.js

@@ -2,7 +2,7 @@ import { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS } from "../../js/constants.js"
 import { ArrowClient } from "../../js/arrow/arrow-client.js";
 import "../../js/index.js";
 import { isArrowTable } from "./types.js";
-import { sortTimeSeriesAscending, toChartArray } from "./utils.js";
+import { sortNumericAscending, sortTimeSeriesAscending, toChartArray } from "./utils.js";
 
 //#region src/react/charts/normalize.ts
 /**
@@ -134,6 +134,7 @@ function normalizeChartData(data, xKey, yKey, orientation) {
 		let yDataMap = {};
 		for (const key of resolvedYKeys) yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);
 		if (detected.chartType === "timeseries") ({xData, yDataMap} = sortTimeSeriesAscending(xData, yDataMap, resolvedYKeys));
+		else if (xData.length > 0 && xData.every(isNumericValue)) ({xData, yDataMap} = sortNumericAscending(xData, yDataMap, resolvedYKeys));
 		return {
 			xData,
 			yDataMap,
@@ -151,6 +152,7 @@ function normalizeChartData(data, xKey, yKey, orientation) {
 	let yDataMap = {};
 	for (const key of resolvedYKeys) yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);
 	if (detected.chartType === "timeseries") ({xData, yDataMap} = sortTimeSeriesAscending(xData, yDataMap, resolvedYKeys));
+	else if (xData.length > 0 && xData.every(isNumericValue)) ({xData, yDataMap} = sortNumericAscending(xData, yDataMap, resolvedYKeys));
 	return {
 		xData,
 		yDataMap,

package/dist/react/charts/normalize.js.map

@@ -1 +1 @@
-{"version":3,"file":"normalize.js","names":[],"sources":["../../../src/react/charts/normalize.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\nimport { ArrowClient } from \"@/js\";\nimport { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS } from \"./constants\";\nimport type {\n  ChartData,\n  NormalizedChartData,\n  NormalizedChartDataBase,\n  Orientation,\n} from \"./types\";\nimport { isArrowTable } from \"./types\";\nimport { sortTimeSeriesAscending, toChartArray } from \"./utils\";\n\n// ============================================================================\n// Type Detection Helpers\n// ============================================================================\n\n/**\n * Checks if a value looks like an ISO date string\n */\nfunction isDateString(value: unknown): boolean {\n  if (typeof value !== \"string\") return false;\n  return /^\\d{4}-\\d{2}-\\d{2}(T|$)/.test(value);\n}\n\n/**\n * Checks if a value is numeric (number or numeric string)\n */\nfunction isNumericValue(value: unknown): boolean {\n  if (typeof value === \"number\") return true;\n  if (typeof value === \"bigint\") return true;\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (trimmed === \"\" || isDateString(trimmed)) return false;\n    const parsed = Number(trimmed);\n    return !Number.isNaN(parsed) && Number.isFinite(parsed);\n  }\n  return false;\n}\n\n/**\n * Checks if a value looks like a category/label (non-numeric string)\n */\nfunction isCategoryValue(value: unknown): boolean {\n  if (typeof value !== \"string\") return false;\n  const trimmed = value.trim();\n  if (trimmed === \"\") return false;\n  if (/^\\d{4}-\\d{2}-\\d{2}/.test(trimmed)) return false;\n  const parsed = Number(trimmed);\n  return Number.isNaN(parsed) || !Number.isFinite(parsed);\n}\n\n// ============================================================================\n// Field Detection\n// ============================================================================\n\n/**\n * Detects fields from JSON data for charting\n */\nfunction detectFieldsFromJson(\n  data: Record<string, unknown>[],\n  orientation?: Orientation,\n): {\n  xField: string;\n  yFields: string[];\n  chartType: \"timeseries\" | \"categorical\";\n} {\n  if (!data || data.length === 0) {\n    return { xField: \"x\", yFields: [\"y\"], chartType: \"categorical\" };\n  }\n\n  const firstRow = data[0];\n  const keys = Object.keys(firstRow);\n\n  // Detect date fields by key name OR by value being a date string\n  const dateFields = keys.filter((key) => {\n    const value = firstRow[key];\n    const keyMatchesDatePattern = DATE_FIELD_PATTERNS.some((p) =>\n      key.toLowerCase().includes(p),\n    );\n    const valueIsDateString = isDateString(value);\n    return keyMatchesDatePattern || valueIsDateString;\n  });\n\n  // Detect name/category fields by pattern AND value type\n  let nameFields = keys.filter((key) => {\n    const value = firstRow[key];\n    return (\n      isCategoryValue(value) &&\n      !isDateString(value) &&\n      NAME_FIELD_PATTERNS.some((p) => key.toLowerCase().includes(p))\n    );\n  });\n\n  // Fallback: any string field that isn't a date or ID\n  if (nameFields.length === 0) {\n    nameFields = keys.filter((key) => {\n      const value = firstRow[key];\n      return (\n        isCategoryValue(value) &&\n        !isDateString(value) &&\n        !dateFields.includes(key) &&\n        !key.toLowerCase().endsWith(\"_id\")\n      );\n    });\n  }\n\n  // Detect numeric fields\n  const numericFields = keys.filter((key) => {\n    const value = firstRow[key];\n    return isNumericValue(value) && !dateFields.includes(key);\n  });\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  if (isHorizontal || (nameFields.length > 0 && dateFields.length === 0)) {\n    const xField = nameFields[0] || dateFields[0] || keys[0];\n    const yFields =\n      numericFields.length > 0\n        ? numericFields\n        : keys.filter((k) => k !== xField);\n    return { xField, yFields, chartType: \"categorical\" };\n  }\n\n  const xField = dateFields[0] || nameFields[0] || keys[0];\n  const yFields =\n    numericFields.length > 0 ? numericFields : keys.filter((k) => k !== xField);\n  return {\n    xField,\n    yFields,\n    chartType: dateFields.length > 0 ? \"timeseries\" : \"categorical\",\n  };\n}\n\n// ============================================================================\n// Value Conversion\n// ============================================================================\n\n/**\n * Converts a JSON value to a chart-compatible value.\n */\nfunction jsonValueToChartValue(\n  value: unknown,\n  isYValue: boolean,\n  isDateField: boolean,\n): string | number {\n  if (value === null || value === undefined) {\n    return isYValue ? 0 : \"\";\n  }\n  if (typeof value === \"number\") {\n    return value;\n  }\n  if (typeof value === \"bigint\") {\n    return Number(value);\n  }\n  if (typeof value === \"string\") {\n    if (isDateField && isDateString(value)) {\n      const timestamp = new Date(value).getTime();\n      if (!Number.isNaN(timestamp)) {\n        return timestamp;\n      }\n    }\n    if (isYValue) {\n      const trimmed = value.trim();\n      const parsed = Number(trimmed);\n      if (!Number.isNaN(parsed) && Number.isFinite(parsed)) {\n        return parsed;\n      }\n    }\n    return value;\n  }\n  return String(value);\n}\n\n// ============================================================================\n// Data Extraction\n// ============================================================================\n\n/**\n * Extracts chart data from JSON array\n */\nfunction extractFromJson(\n  data: Record<string, unknown>[],\n  xField: string,\n  yFields: string[],\n): {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} {\n  const xData: (string | number)[] = [];\n  const yDataMap: Record<string, (string | number)[]> = {};\n\n  for (const field of yFields) {\n    yDataMap[field] = [];\n  }\n\n  const xIsDateField = data.length > 0 && isDateString(data[0][xField]);\n\n  for (const row of data) {\n    xData.push(jsonValueToChartValue(row[xField], false, xIsDateField));\n    for (const field of yFields) {\n      yDataMap[field].push(jsonValueToChartValue(row[field], true, false));\n    }\n  }\n\n  return { xData, yDataMap };\n}\n\n// ============================================================================\n// Main Normalization Function\n// ============================================================================\n\n/**\n * Normalizes chart data from either Arrow or JSON format.\n * Converts BigInt and Date values to chart-compatible types.\n */\nexport function normalizeChartData(\n  data: ChartData,\n  xKey?: string,\n  yKey?: string | string[],\n  orientation?: Orientation,\n): NormalizedChartData {\n  if (isArrowTable(data)) {\n    const table = data as Table;\n    const detected = ArrowClient.detectFieldsFromArrow(table, orientation);\n    const resolvedXKey = xKey ?? detected.xField;\n    const resolvedYKeys = yKey\n      ? Array.isArray(yKey)\n        ? yKey\n        : [yKey]\n      : detected.yFields;\n\n    const { xData: rawXData, yDataMap: rawYDataMap } =\n      ArrowClient.extractChartData(table, resolvedXKey, resolvedYKeys);\n\n    let xData = toChartArray(rawXData);\n    let yDataMap: Record<string, (string | number)[]> = {};\n    for (const key of resolvedYKeys) {\n      yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);\n    }\n\n    if (detected.chartType === \"timeseries\") {\n      ({ xData, yDataMap } = sortTimeSeriesAscending(\n        xData,\n        yDataMap,\n        resolvedYKeys,\n      ));\n    }\n\n    return {\n      xData,\n      yDataMap,\n      xField: resolvedXKey,\n      yFields: resolvedYKeys,\n      chartType: detected.chartType,\n    };\n  }\n\n  // JSON Array\n  const jsonData = data as Record<string, unknown>[];\n  const detected = detectFieldsFromJson(jsonData, orientation);\n  const resolvedXKey = xKey ?? detected.xField;\n  const resolvedYKeys = yKey\n    ? Array.isArray(yKey)\n      ? yKey\n      : [yKey]\n    : detected.yFields;\n\n  const { xData: rawXData, yDataMap: rawYDataMap } = extractFromJson(\n    jsonData,\n    resolvedXKey,\n    resolvedYKeys,\n  );\n\n  let xData = toChartArray(rawXData);\n  let yDataMap: Record<string, (string | number)[]> = {};\n  for (const key of resolvedYKeys) {\n    yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);\n  }\n\n  if (detected.chartType === \"timeseries\") {\n    ({ xData, yDataMap } = sortTimeSeriesAscending(\n      xData,\n      yDataMap,\n      resolvedYKeys,\n    ));\n  }\n\n  return {\n    xData,\n    yDataMap,\n    xField: resolvedXKey,\n    yFields: resolvedYKeys,\n    chartType: detected.chartType,\n  };\n}\n\n// ============================================================================\n// Heatmap Data Normalization\n// ============================================================================\n\n/**\n * Normalized data for heatmap charts.\n * Extends base (not NormalizedChartData) because heatmaps don't use yDataMap.\n * Instead, they use heatmapData which contains [xIndex, yIndex, value] tuples.\n */\nexport interface NormalizedHeatmapData extends NormalizedChartDataBase {\n  /** Y-axis categories (rows) */\n  yAxisData: (string | number)[];\n  /** Heatmap data as [xIndex, yIndex, value] tuples */\n  heatmapData: [number, number, number][];\n  /** Min value in the data */\n  min: number;\n  /** Max value in the data */\n  max: number;\n}\n\n/**\n * Normalizes data specifically for heatmap charts.\n * Expects data in format: `{ xKey: string, yAxisKey: string, valueKey: number }`\n *\n * @param data - Raw data (Arrow Table or JSON array)\n * @param xKey - Field key for X-axis (columns)\n * @param yAxisKey - Field key for Y-axis (rows)\n * @param valueKey - Field key for the cell values\n */\nexport function normalizeHeatmapData(\n  data: ChartData,\n  xKey?: string,\n  yAxisKey?: string,\n  valueKey?: string | string[],\n): NormalizedHeatmapData {\n  // First, get the standard normalization\n  const jsonData = isArrowTable(data)\n    ? extractJsonFromArrow(data)\n    : (data as Record<string, unknown>[]);\n\n  if (jsonData.length === 0) {\n    return {\n      xData: [],\n      xField: xKey ?? \"x\",\n      yFields: [],\n      chartType: \"categorical\",\n      yAxisData: [],\n      heatmapData: [],\n      min: 0,\n      max: 0,\n    };\n  }\n\n  // Detect fields if not provided\n  const keys = Object.keys(jsonData[0]);\n  const resolvedXKey = xKey ?? keys[0];\n  const resolvedYAxisKey = yAxisKey ?? keys[1];\n  const resolvedValueKey = valueKey\n    ? Array.isArray(valueKey)\n      ? valueKey[0]\n      : valueKey\n    : keys[2];\n\n  // Extract unique X and Y categories\n  const xSet = new Set<string | number>();\n  const ySet = new Set<string | number>();\n\n  for (const row of jsonData) {\n    const xVal = jsonValueToChartValue(row[resolvedXKey], false, false);\n    const yVal = jsonValueToChartValue(row[resolvedYAxisKey], false, false);\n    xSet.add(xVal);\n    ySet.add(yVal);\n  }\n\n  const xData = Array.from(xSet);\n  const yAxisData = Array.from(ySet);\n\n  // Create index maps for fast lookup\n  const xIndexMap = new Map<string | number, number>();\n  const yIndexMap = new Map<string | number, number>();\n  xData.forEach((v, i) => {\n    xIndexMap.set(v, i);\n  });\n  yAxisData.forEach((v, i) => {\n    yIndexMap.set(v, i);\n  });\n\n  // Build heatmap data and track min/max\n  const heatmapData: [number, number, number][] = [];\n  let min = Number.POSITIVE_INFINITY;\n  let max = Number.NEGATIVE_INFINITY;\n\n  for (const row of jsonData) {\n    const xVal = jsonValueToChartValue(row[resolvedXKey], false, false);\n    const yVal = jsonValueToChartValue(row[resolvedYAxisKey], false, false);\n    const value = jsonValueToChartValue(row[resolvedValueKey], true, false);\n\n    const xIdx = xIndexMap.get(xVal);\n    const yIdx = yIndexMap.get(yVal);\n    const numValue = typeof value === \"number\" ? value : 0;\n\n    if (xIdx !== undefined && yIdx !== undefined) {\n      heatmapData.push([xIdx, yIdx, numValue]);\n      min = Math.min(min, numValue);\n      max = Math.max(max, numValue);\n    }\n  }\n\n  // Handle edge case where no valid data was found\n  if (heatmapData.length === 0) {\n    min = 0;\n    max = 0;\n  }\n\n  return {\n    xData,\n    xField: resolvedXKey,\n    yFields: [resolvedValueKey],\n    chartType: \"categorical\",\n    yAxisData,\n    heatmapData,\n    min,\n    max,\n  };\n}\n\n/**\n * Helper to extract JSON array from Arrow table for heatmap processing.\n */\nfunction extractJsonFromArrow(table: Table): Record<string, unknown>[] {\n  const result: Record<string, unknown>[] = [];\n  const fields = table.schema.fields.map((f) => f.name);\n\n  for (let i = 0; i < table.numRows; i++) {\n    const row: Record<string, unknown> = {};\n    for (const field of fields) {\n      const col = table.getChild(field);\n      row[field] = col?.get(i);\n    }\n    result.push(row);\n  }\n\n  return result;\n}\n"],"mappings":"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"}
+{"version":3,"file":"normalize.js","names":[],"sources":["../../../src/react/charts/normalize.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\nimport { ArrowClient } from \"@/js\";\nimport { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS } from \"./constants\";\nimport type {\n  ChartData,\n  NormalizedChartData,\n  NormalizedChartDataBase,\n  Orientation,\n} from \"./types\";\nimport { isArrowTable } from \"./types\";\nimport {\n  sortNumericAscending,\n  sortTimeSeriesAscending,\n  toChartArray,\n} from \"./utils\";\n\n// ============================================================================\n// Type Detection Helpers\n// ============================================================================\n\n/**\n * Checks if a value looks like an ISO date string\n */\nfunction isDateString(value: unknown): boolean {\n  if (typeof value !== \"string\") return false;\n  return /^\\d{4}-\\d{2}-\\d{2}(T|$)/.test(value);\n}\n\n/**\n * Checks if a value is numeric (number or numeric string)\n */\nfunction isNumericValue(value: unknown): boolean {\n  if (typeof value === \"number\") return true;\n  if (typeof value === \"bigint\") return true;\n  if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (trimmed === \"\" || isDateString(trimmed)) return false;\n    const parsed = Number(trimmed);\n    return !Number.isNaN(parsed) && Number.isFinite(parsed);\n  }\n  return false;\n}\n\n/**\n * Checks if a value looks like a category/label (non-numeric string)\n */\nfunction isCategoryValue(value: unknown): boolean {\n  if (typeof value !== \"string\") return false;\n  const trimmed = value.trim();\n  if (trimmed === \"\") return false;\n  if (/^\\d{4}-\\d{2}-\\d{2}/.test(trimmed)) return false;\n  const parsed = Number(trimmed);\n  return Number.isNaN(parsed) || !Number.isFinite(parsed);\n}\n\n// ============================================================================\n// Field Detection\n// ============================================================================\n\n/**\n * Detects fields from JSON data for charting\n */\nfunction detectFieldsFromJson(\n  data: Record<string, unknown>[],\n  orientation?: Orientation,\n): {\n  xField: string;\n  yFields: string[];\n  chartType: \"timeseries\" | \"categorical\";\n} {\n  if (!data || data.length === 0) {\n    return { xField: \"x\", yFields: [\"y\"], chartType: \"categorical\" };\n  }\n\n  const firstRow = data[0];\n  const keys = Object.keys(firstRow);\n\n  // Detect date fields by key name OR by value being a date string\n  const dateFields = keys.filter((key) => {\n    const value = firstRow[key];\n    const keyMatchesDatePattern = DATE_FIELD_PATTERNS.some((p) =>\n      key.toLowerCase().includes(p),\n    );\n    const valueIsDateString = isDateString(value);\n    return keyMatchesDatePattern || valueIsDateString;\n  });\n\n  // Detect name/category fields by pattern AND value type\n  let nameFields = keys.filter((key) => {\n    const value = firstRow[key];\n    return (\n      isCategoryValue(value) &&\n      !isDateString(value) &&\n      NAME_FIELD_PATTERNS.some((p) => key.toLowerCase().includes(p))\n    );\n  });\n\n  // Fallback: any string field that isn't a date or ID\n  if (nameFields.length === 0) {\n    nameFields = keys.filter((key) => {\n      const value = firstRow[key];\n      return (\n        isCategoryValue(value) &&\n        !isDateString(value) &&\n        !dateFields.includes(key) &&\n        !key.toLowerCase().endsWith(\"_id\")\n      );\n    });\n  }\n\n  // Detect numeric fields\n  const numericFields = keys.filter((key) => {\n    const value = firstRow[key];\n    return isNumericValue(value) && !dateFields.includes(key);\n  });\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  if (isHorizontal || (nameFields.length > 0 && dateFields.length === 0)) {\n    const xField = nameFields[0] || dateFields[0] || keys[0];\n    const yFields =\n      numericFields.length > 0\n        ? numericFields\n        : keys.filter((k) => k !== xField);\n    return { xField, yFields, chartType: \"categorical\" };\n  }\n\n  const xField = dateFields[0] || nameFields[0] || keys[0];\n  const yFields =\n    numericFields.length > 0 ? numericFields : keys.filter((k) => k !== xField);\n  return {\n    xField,\n    yFields,\n    chartType: dateFields.length > 0 ? \"timeseries\" : \"categorical\",\n  };\n}\n\n// ============================================================================\n// Value Conversion\n// ============================================================================\n\n/**\n * Converts a JSON value to a chart-compatible value.\n */\nfunction jsonValueToChartValue(\n  value: unknown,\n  isYValue: boolean,\n  isDateField: boolean,\n): string | number {\n  if (value === null || value === undefined) {\n    return isYValue ? 0 : \"\";\n  }\n  if (typeof value === \"number\") {\n    return value;\n  }\n  if (typeof value === \"bigint\") {\n    return Number(value);\n  }\n  if (typeof value === \"string\") {\n    if (isDateField && isDateString(value)) {\n      const timestamp = new Date(value).getTime();\n      if (!Number.isNaN(timestamp)) {\n        return timestamp;\n      }\n    }\n    if (isYValue) {\n      const trimmed = value.trim();\n      const parsed = Number(trimmed);\n      if (!Number.isNaN(parsed) && Number.isFinite(parsed)) {\n        return parsed;\n      }\n    }\n    return value;\n  }\n  return String(value);\n}\n\n// ============================================================================\n// Data Extraction\n// ============================================================================\n\n/**\n * Extracts chart data from JSON array\n */\nfunction extractFromJson(\n  data: Record<string, unknown>[],\n  xField: string,\n  yFields: string[],\n): {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} {\n  const xData: (string | number)[] = [];\n  const yDataMap: Record<string, (string | number)[]> = {};\n\n  for (const field of yFields) {\n    yDataMap[field] = [];\n  }\n\n  const xIsDateField = data.length > 0 && isDateString(data[0][xField]);\n\n  for (const row of data) {\n    xData.push(jsonValueToChartValue(row[xField], false, xIsDateField));\n    for (const field of yFields) {\n      yDataMap[field].push(jsonValueToChartValue(row[field], true, false));\n    }\n  }\n\n  return { xData, yDataMap };\n}\n\n// ============================================================================\n// Main Normalization Function\n// ============================================================================\n\n/**\n * Normalizes chart data from either Arrow or JSON format.\n * Converts BigInt and Date values to chart-compatible types.\n */\nexport function normalizeChartData(\n  data: ChartData,\n  xKey?: string,\n  yKey?: string | string[],\n  orientation?: Orientation,\n): NormalizedChartData {\n  if (isArrowTable(data)) {\n    const table = data as Table;\n    const detected = ArrowClient.detectFieldsFromArrow(table, orientation);\n    const resolvedXKey = xKey ?? detected.xField;\n    const resolvedYKeys = yKey\n      ? Array.isArray(yKey)\n        ? yKey\n        : [yKey]\n      : detected.yFields;\n\n    const { xData: rawXData, yDataMap: rawYDataMap } =\n      ArrowClient.extractChartData(table, resolvedXKey, resolvedYKeys);\n\n    let xData = toChartArray(rawXData);\n    let yDataMap: Record<string, (string | number)[]> = {};\n    for (const key of resolvedYKeys) {\n      yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);\n    }\n\n    if (detected.chartType === \"timeseries\") {\n      ({ xData, yDataMap } = sortTimeSeriesAscending(\n        xData,\n        yDataMap,\n        resolvedYKeys,\n      ));\n    } else if (xData.length > 0 && xData.every(isNumericValue)) {\n      ({ xData, yDataMap } = sortNumericAscending(\n        xData,\n        yDataMap,\n        resolvedYKeys,\n      ));\n    }\n\n    return {\n      xData,\n      yDataMap,\n      xField: resolvedXKey,\n      yFields: resolvedYKeys,\n      chartType: detected.chartType,\n    };\n  }\n\n  // JSON Array\n  const jsonData = data as Record<string, unknown>[];\n  const detected = detectFieldsFromJson(jsonData, orientation);\n  const resolvedXKey = xKey ?? detected.xField;\n  const resolvedYKeys = yKey\n    ? Array.isArray(yKey)\n      ? yKey\n      : [yKey]\n    : detected.yFields;\n\n  const { xData: rawXData, yDataMap: rawYDataMap } = extractFromJson(\n    jsonData,\n    resolvedXKey,\n    resolvedYKeys,\n  );\n\n  let xData = toChartArray(rawXData);\n  let yDataMap: Record<string, (string | number)[]> = {};\n  for (const key of resolvedYKeys) {\n    yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);\n  }\n\n  if (detected.chartType === \"timeseries\") {\n    ({ xData, yDataMap } = sortTimeSeriesAscending(\n      xData,\n      yDataMap,\n      resolvedYKeys,\n    ));\n  } else if (xData.length > 0 && xData.every(isNumericValue)) {\n    ({ xData, yDataMap } = sortNumericAscending(\n      xData,\n      yDataMap,\n      resolvedYKeys,\n    ));\n  }\n\n  return {\n    xData,\n    yDataMap,\n    xField: resolvedXKey,\n    yFields: resolvedYKeys,\n    chartType: detected.chartType,\n  };\n}\n\n// ============================================================================\n// Heatmap Data Normalization\n// ============================================================================\n\n/**\n * Normalized data for heatmap charts.\n * Extends base (not NormalizedChartData) because heatmaps don't use yDataMap.\n * Instead, they use heatmapData which contains [xIndex, yIndex, value] tuples.\n */\nexport interface NormalizedHeatmapData extends NormalizedChartDataBase {\n  /** Y-axis categories (rows) */\n  yAxisData: (string | number)[];\n  /** Heatmap data as [xIndex, yIndex, value] tuples */\n  heatmapData: [number, number, number][];\n  /** Min value in the data */\n  min: number;\n  /** Max value in the data */\n  max: number;\n}\n\n/**\n * Normalizes data specifically for heatmap charts.\n * Expects data in format: `{ xKey: string, yAxisKey: string, valueKey: number }`\n *\n * @param data - Raw data (Arrow Table or JSON array)\n * @param xKey - Field key for X-axis (columns)\n * @param yAxisKey - Field key for Y-axis (rows)\n * @param valueKey - Field key for the cell values\n */\nexport function normalizeHeatmapData(\n  data: ChartData,\n  xKey?: string,\n  yAxisKey?: string,\n  valueKey?: string | string[],\n): NormalizedHeatmapData {\n  // First, get the standard normalization\n  const jsonData = isArrowTable(data)\n    ? extractJsonFromArrow(data)\n    : (data as Record<string, unknown>[]);\n\n  if (jsonData.length === 0) {\n    return {\n      xData: [],\n      xField: xKey ?? \"x\",\n      yFields: [],\n      chartType: \"categorical\",\n      yAxisData: [],\n      heatmapData: [],\n      min: 0,\n      max: 0,\n    };\n  }\n\n  // Detect fields if not provided\n  const keys = Object.keys(jsonData[0]);\n  const resolvedXKey = xKey ?? keys[0];\n  const resolvedYAxisKey = yAxisKey ?? keys[1];\n  const resolvedValueKey = valueKey\n    ? Array.isArray(valueKey)\n      ? valueKey[0]\n      : valueKey\n    : keys[2];\n\n  // Extract unique X and Y categories\n  const xSet = new Set<string | number>();\n  const ySet = new Set<string | number>();\n\n  for (const row of jsonData) {\n    const xVal = jsonValueToChartValue(row[resolvedXKey], false, false);\n    const yVal = jsonValueToChartValue(row[resolvedYAxisKey], false, false);\n    xSet.add(xVal);\n    ySet.add(yVal);\n  }\n\n  const xData = Array.from(xSet);\n  const yAxisData = Array.from(ySet);\n\n  // Create index maps for fast lookup\n  const xIndexMap = new Map<string | number, number>();\n  const yIndexMap = new Map<string | number, number>();\n  xData.forEach((v, i) => {\n    xIndexMap.set(v, i);\n  });\n  yAxisData.forEach((v, i) => {\n    yIndexMap.set(v, i);\n  });\n\n  // Build heatmap data and track min/max\n  const heatmapData: [number, number, number][] = [];\n  let min = Number.POSITIVE_INFINITY;\n  let max = Number.NEGATIVE_INFINITY;\n\n  for (const row of jsonData) {\n    const xVal = jsonValueToChartValue(row[resolvedXKey], false, false);\n    const yVal = jsonValueToChartValue(row[resolvedYAxisKey], false, false);\n    const value = jsonValueToChartValue(row[resolvedValueKey], true, false);\n\n    const xIdx = xIndexMap.get(xVal);\n    const yIdx = yIndexMap.get(yVal);\n    const numValue = typeof value === \"number\" ? value : 0;\n\n    if (xIdx !== undefined && yIdx !== undefined) {\n      heatmapData.push([xIdx, yIdx, numValue]);\n      min = Math.min(min, numValue);\n      max = Math.max(max, numValue);\n    }\n  }\n\n  // Handle edge case where no valid data was found\n  if (heatmapData.length === 0) {\n    min = 0;\n    max = 0;\n  }\n\n  return {\n    xData,\n    xField: resolvedXKey,\n    yFields: [resolvedValueKey],\n    chartType: \"categorical\",\n    yAxisData,\n    heatmapData,\n    min,\n    max,\n  };\n}\n\n/**\n * Helper to extract JSON array from Arrow table for heatmap processing.\n */\nfunction extractJsonFromArrow(table: Table): Record<string, unknown>[] {\n  const result: Record<string, unknown>[] = [];\n  const fields = table.schema.fields.map((f) => f.name);\n\n  for (let i = 0; i < table.numRows; i++) {\n    const row: Record<string, unknown> = {};\n    for (const field of fields) {\n      const col = table.getChild(field);\n      row[field] = col?.get(i);\n    }\n    result.push(row);\n  }\n\n  return result;\n}\n"],"mappings":"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"}

package/dist/react/charts/options.d.ts

@@ -8,6 +8,7 @@ interface OptionBuilderContext {
   colors: string[];
   title?: string;
   showLegend: boolean;
+  xField?: string;
 }
 interface CartesianContext extends OptionBuilderContext {
   chartType: ChartType;

package/dist/react/charts/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","names":[],"sources":["../../../src/react/charts/options.ts"],"mappings":";;;UAOiB,oBAAA;EACf,KAAA;EACA,QAAA,EAAU,MAAA;EACV,OAAA;EACA,MAAA;EACA,KAAA;EACA,UAAA;AAAA;AAAA,UAGe,gBAAA,SAAyB,oBAAA;EACxC,SAAA,EAAW,SAAA;EACX,YAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,iBAkBc,gBAAA,CACd,GAAA,EAAK,oBAAA,EACL,QAAA,aACC,MAAA;AAAA,iBAmCa,cAAA,CACd,GAAA,EAAK,oBAAA,EACL,SAAA,mBACA,WAAA,UACA,UAAA,WACA,aAAA,WACC,MAAA;AAAA,iBAyCa,wBAAA,CACd,GAAA,EAAK,oBAAA,EACL,OAAA,YACC,MAAA;AAAA,UAsCc,cAAA,SAAuB,oBAAA;EArJtC;EAuJA,SAAA;EAtJA;EAwJA,WAAA;EAtJA;EAwJA,GAAA;EAtJA;EAwJA,GAAA;EAxJU;EA0JV,UAAA;AAAA;AAAA,iBAGc,kBAAA,CACd,GAAA,EAAK,cAAA,GACJ,MAAA;AAAA,iBAsEa,oBAAA,CACd,GAAA,EAAK,gBAAA,GACJ,MAAA"}
+{"version":3,"file":"options.d.ts","names":[],"sources":["../../../src/react/charts/options.ts"],"mappings":";;;UAOiB,oBAAA;EACf,KAAA;EACA,QAAA,EAAU,MAAA;EACV,OAAA;EACA,MAAA;EACA,KAAA;EACA,UAAA;EACA,MAAA;AAAA;AAAA,UAGe,gBAAA,SAAyB,oBAAA;EACxC,SAAA,EAAW,SAAA;EACX,YAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,iBAkBc,gBAAA,CACd,GAAA,EAAK,oBAAA,EACL,QAAA,aACC,MAAA;AAAA,iBAmCa,cAAA,CACd,GAAA,EAAK,oBAAA,EACL,SAAA,mBACA,WAAA,UACA,UAAA,WACA,aAAA,WACC,MAAA;AAAA,iBAyCa,wBAAA,CACd,GAAA,EAAK,oBAAA,EACL,OAAA,YACC,MAAA;AAAA,UAsCc,cAAA,SAAuB,oBAAA;EArJtC;EAuJA,SAAA;EAtJA;EAwJA,WAAA;EAtJA;EAwJA,GAAA;EAtJA;EAwJA,GAAA;EAxJU;EA0JV,UAAA;AAAA;AAAA,iBAGc,kBAAA,CACd,GAAA,EAAK,cAAA,GACJ,MAAA;AAAA,iBAsEa,oBAAA,CACd,GAAA,EAAK,gBAAA,GACJ,MAAA"}

package/dist/react/charts/options.js

@@ -167,9 +167,10 @@ function buildCartesianOption(ctx) {
 	const { chartType, isTimeSeries, stacked, smooth, showSymbol, symbolSize } = ctx;
 	const hasMultipleSeries = ctx.yFields.length > 1;
 	const seriesType = chartType === "area" ? "line" : chartType;
+	const isScatter = chartType === "scatter";
 	return {
 		...buildBaseOption(ctx),
-		tooltip: { trigger: "axis" },
+		tooltip: { trigger: isScatter ? "item" : "axis" },
 		legend: ctx.showLegend && hasMultipleSeries ? { top: "bottom" } : void 0,
 		grid: {
 			left: "10%",
@@ -178,22 +179,26 @@ function buildCartesianOption(ctx) {
 			bottom: ctx.showLegend && hasMultipleSeries ? "20%" : "15%"
 		},
 		xAxis: {
-			type: isTimeSeries ? "time" : "category",
-			data: isTimeSeries ? void 0 : ctx.xData,
-			axisLabel: isTimeSeries ? void 0 : {
+			type: isScatter ? "value" : isTimeSeries ? "time" : "category",
+			data: isScatter || isTimeSeries ? void 0 : ctx.xData,
+			name: ctx.xField ? formatLabel(ctx.xField) : void 0,
+			axisLabel: isScatter || isTimeSeries ? { show: true } : {
 				rotate: ctx.xData.length > 10 ? 45 : 0,
 				formatter: (v) => truncateLabel(String(v), 10)
 			}
 		},
-		yAxis: { type: "value" },
+		yAxis: {
+			type: "value",
+			name: ctx.yFields.length === 1 ? formatLabel(ctx.yFields[0]) : void 0
+		},
 		series: ctx.yFields.map((key, idx) => ({
 			name: formatLabel(key),
 			type: seriesType,
-			data: isTimeSeries ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key]) : ctx.yDataMap[key],
+			data: isScatter ? ctx.xData.map((x, i) => [x, ctx.yDataMap[key][i]]) : isTimeSeries ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key]) : ctx.yDataMap[key],
 			smooth: chartType === "line" || chartType === "area" ? smooth : void 0,
 			showSymbol: chartType === "line" || chartType === "area" ? showSymbol : void 0,
-			symbol: chartType === "scatter" ? "circle" : void 0,
-			symbolSize: chartType === "scatter" ? symbolSize : void 0,
+			symbol: isScatter ? "circle" : void 0,
+			symbolSize: isScatter ? symbolSize : void 0,
 			areaStyle: chartType === "area" ? { opacity: .3 } : void 0,
 			stack: stacked && chartType === "area" ? "total" : void 0,
 			itemStyle: chartType === "bar" ? { borderRadius: [

package/dist/react/charts/options.js.map

@@ -1 +1 @@
-{"version":3,"file":"options.js","names":[],"sources":["../../../src/react/charts/options.ts"],"sourcesContent":["import type { ChartType } from \"./types\";\nimport { createTimeSeriesData, formatLabel, truncateLabel } from \"./utils\";\n\n// ============================================================================\n// Option Builder Types\n// ============================================================================\n\nexport interface OptionBuilderContext {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n  yFields: string[];\n  colors: string[];\n  title?: string;\n  showLegend: boolean;\n}\n\nexport interface CartesianContext extends OptionBuilderContext {\n  chartType: ChartType;\n  isTimeSeries: boolean;\n  stacked: boolean;\n  smooth: boolean;\n  showSymbol: boolean;\n  symbolSize: number;\n}\n\n// ============================================================================\n// Base Option Builder\n// ============================================================================\n\nfunction buildBaseOption(ctx: OptionBuilderContext): Record<string, unknown> {\n  return {\n    title: ctx.title ? { text: ctx.title, left: \"center\" } : undefined,\n    color: ctx.colors,\n  };\n}\n\n// ============================================================================\n// Radar Chart Option\n// ============================================================================\n\nexport function buildRadarOption(\n  ctx: OptionBuilderContext,\n  showArea = true,\n): Record<string, unknown> {\n  const maxValue = Math.max(\n    ...ctx.yFields.flatMap((f) => ctx.yDataMap[f].map((v) => Number(v) || 0)),\n  );\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\" },\n    legend:\n      ctx.showLegend && ctx.yFields.length > 1 ? { top: \"bottom\" } : undefined,\n    radar: {\n      indicator: ctx.xData.map((name) => ({\n        name: String(name),\n        max: maxValue * 1.2,\n      })),\n      shape: \"polygon\",\n    },\n    series: [\n      {\n        type: \"radar\",\n        data: ctx.yFields.map((key, idx) => ({\n          name: formatLabel(key),\n          value: ctx.yDataMap[key],\n          itemStyle: { color: ctx.colors[idx % ctx.colors.length] },\n          areaStyle: showArea ? { opacity: 0.3 } : undefined,\n        })),\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Pie/Donut Chart Option\n// ============================================================================\n\nexport function buildPieOption(\n  ctx: OptionBuilderContext,\n  chartType: \"pie\" | \"donut\",\n  innerRadius: number,\n  showLabels: boolean,\n  labelPosition: string,\n): Record<string, unknown> {\n  const pieData = ctx.xData.map((name, i) => ({\n    name: String(name),\n    value: ctx.yDataMap[ctx.yFields[0]]?.[i] ?? 0,\n  }));\n\n  const isDonut = chartType === \"donut\" || innerRadius > 0;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\", formatter: \"{b}: {c} ({d}%)\" },\n    legend: ctx.showLegend\n      ? { orient: \"vertical\", left: \"left\", top: \"middle\" }\n      : undefined,\n    series: [\n      {\n        type: \"pie\",\n        radius: isDonut ? [`${innerRadius || 40}%`, \"70%\"] : \"70%\",\n        center: [\"60%\", \"50%\"],\n        data: pieData,\n        label: {\n          show: showLabels,\n          position: labelPosition,\n          formatter: \"{b}: {d}%\",\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Horizontal Bar Chart Option\n// ============================================================================\n\nexport function buildHorizontalBarOption(\n  ctx: OptionBuilderContext,\n  stacked: boolean,\n): Record<string, unknown> {\n  const hasMultipleSeries = ctx.yFields.length > 1;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"axis\", axisPointer: { type: \"shadow\" } },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"20%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"5%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"15%\" : \"5%\",\n    },\n    xAxis: { type: \"value\" },\n    yAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      axisLabel: {\n        width: 100,\n        overflow: \"truncate\",\n        formatter: (value: string) => truncateLabel(String(value)),\n      },\n    },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: \"bar\",\n      data: ctx.yDataMap[key],\n      stack: stacked ? \"total\" : undefined,\n      itemStyle: { borderRadius: [0, 4, 4, 0] },\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n\n// ============================================================================\n// Heatmap Chart Option\n// ============================================================================\n\nexport interface HeatmapContext extends OptionBuilderContext {\n  /** Y-axis categories (rows) */\n  yAxisData: (string | number)[];\n  /** Heatmap data as [xIndex, yIndex, value] tuples */\n  heatmapData: [number, number, number][];\n  /** Min value for color scale */\n  min: number;\n  /** Max value for color scale */\n  max: number;\n  /** Show value labels on cells */\n  showLabels: boolean;\n}\n\nexport function buildHeatmapOption(\n  ctx: HeatmapContext,\n): Record<string, unknown> {\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: {\n      trigger: \"item\",\n      formatter: (params: { data: [number, number, number] }) => {\n        const [xIdx, yIdx, value] = params.data;\n        const xLabel = ctx.xData[xIdx] ?? xIdx;\n        const yLabel = ctx.yAxisData[yIdx] ?? yIdx;\n        return `${xLabel}, ${yLabel}: ${value}`;\n      },\n    },\n    grid: {\n      left: \"15%\",\n      right: \"15%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: \"15%\",\n    },\n    xAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      splitArea: { show: true },\n      axisLabel: {\n        rotate: ctx.xData.length > 10 ? 45 : 0,\n        formatter: (v: string) => truncateLabel(String(v), 10),\n      },\n    },\n    yAxis: {\n      type: \"category\",\n      data: ctx.yAxisData,\n      splitArea: { show: true },\n      axisLabel: {\n        formatter: (v: string) => truncateLabel(String(v), 12),\n      },\n    },\n    visualMap: {\n      min: ctx.min,\n      max: ctx.max,\n      calculable: true,\n      orient: \"vertical\",\n      right: \"2%\",\n      top: \"center\",\n      inRange: {\n        color: ctx.colors.length >= 2 ? ctx.colors : [\"#f0f0f0\", ctx.colors[0]],\n      },\n    },\n    series: [\n      {\n        type: \"heatmap\",\n        data: ctx.heatmapData,\n        label: {\n          show: ctx.showLabels,\n          formatter: (params: { data: [number, number, number] }) =>\n            String(params.data[2]),\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Cartesian Chart Option (line, bar, area, scatter)\n// ============================================================================\n\nexport function buildCartesianOption(\n  ctx: CartesianContext,\n): Record<string, unknown> {\n  const { chartType, isTimeSeries, stacked, smooth, showSymbol, symbolSize } =\n    ctx;\n  const hasMultipleSeries = ctx.yFields.length > 1;\n  const seriesType = chartType === \"area\" ? \"line\" : chartType;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"axis\" },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"10%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"20%\" : \"15%\",\n    },\n    xAxis: {\n      type: isTimeSeries ? \"time\" : \"category\",\n      data: isTimeSeries ? undefined : ctx.xData,\n      axisLabel: isTimeSeries\n        ? undefined\n        : {\n            rotate: ctx.xData.length > 10 ? 45 : 0,\n            formatter: (v: string) => truncateLabel(String(v), 10),\n          },\n    },\n    yAxis: { type: \"value\" },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: seriesType,\n      data: isTimeSeries\n        ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key])\n        : ctx.yDataMap[key],\n      smooth: chartType === \"line\" || chartType === \"area\" ? smooth : undefined,\n      showSymbol:\n        chartType === \"line\" || chartType === \"area\" ? showSymbol : undefined,\n      symbol: chartType === \"scatter\" ? \"circle\" : undefined,\n      symbolSize: chartType === \"scatter\" ? symbolSize : undefined,\n      areaStyle: chartType === \"area\" ? { opacity: 0.3 } : undefined,\n      stack: stacked && chartType === \"area\" ? \"total\" : undefined,\n      itemStyle:\n        chartType === \"bar\" ? { borderRadius: [4, 4, 0, 0] } : undefined,\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"options.js","names":[],"sources":["../../../src/react/charts/options.ts"],"sourcesContent":["import type { ChartType } from \"./types\";\nimport { createTimeSeriesData, formatLabel, truncateLabel } from \"./utils\";\n\n// ============================================================================\n// Option Builder Types\n// ============================================================================\n\nexport interface OptionBuilderContext {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n  yFields: string[];\n  colors: string[];\n  title?: string;\n  showLegend: boolean;\n  xField?: string;\n}\n\nexport interface CartesianContext extends OptionBuilderContext {\n  chartType: ChartType;\n  isTimeSeries: boolean;\n  stacked: boolean;\n  smooth: boolean;\n  showSymbol: boolean;\n  symbolSize: number;\n}\n\n// ============================================================================\n// Base Option Builder\n// ============================================================================\n\nfunction buildBaseOption(ctx: OptionBuilderContext): Record<string, unknown> {\n  return {\n    title: ctx.title ? { text: ctx.title, left: \"center\" } : undefined,\n    color: ctx.colors,\n  };\n}\n\n// ============================================================================\n// Radar Chart Option\n// ============================================================================\n\nexport function buildRadarOption(\n  ctx: OptionBuilderContext,\n  showArea = true,\n): Record<string, unknown> {\n  const maxValue = Math.max(\n    ...ctx.yFields.flatMap((f) => ctx.yDataMap[f].map((v) => Number(v) || 0)),\n  );\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\" },\n    legend:\n      ctx.showLegend && ctx.yFields.length > 1 ? { top: \"bottom\" } : undefined,\n    radar: {\n      indicator: ctx.xData.map((name) => ({\n        name: String(name),\n        max: maxValue * 1.2,\n      })),\n      shape: \"polygon\",\n    },\n    series: [\n      {\n        type: \"radar\",\n        data: ctx.yFields.map((key, idx) => ({\n          name: formatLabel(key),\n          value: ctx.yDataMap[key],\n          itemStyle: { color: ctx.colors[idx % ctx.colors.length] },\n          areaStyle: showArea ? { opacity: 0.3 } : undefined,\n        })),\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Pie/Donut Chart Option\n// ============================================================================\n\nexport function buildPieOption(\n  ctx: OptionBuilderContext,\n  chartType: \"pie\" | \"donut\",\n  innerRadius: number,\n  showLabels: boolean,\n  labelPosition: string,\n): Record<string, unknown> {\n  const pieData = ctx.xData.map((name, i) => ({\n    name: String(name),\n    value: ctx.yDataMap[ctx.yFields[0]]?.[i] ?? 0,\n  }));\n\n  const isDonut = chartType === \"donut\" || innerRadius > 0;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"item\", formatter: \"{b}: {c} ({d}%)\" },\n    legend: ctx.showLegend\n      ? { orient: \"vertical\", left: \"left\", top: \"middle\" }\n      : undefined,\n    series: [\n      {\n        type: \"pie\",\n        radius: isDonut ? [`${innerRadius || 40}%`, \"70%\"] : \"70%\",\n        center: [\"60%\", \"50%\"],\n        data: pieData,\n        label: {\n          show: showLabels,\n          position: labelPosition,\n          formatter: \"{b}: {d}%\",\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Horizontal Bar Chart Option\n// ============================================================================\n\nexport function buildHorizontalBarOption(\n  ctx: OptionBuilderContext,\n  stacked: boolean,\n): Record<string, unknown> {\n  const hasMultipleSeries = ctx.yFields.length > 1;\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: \"axis\", axisPointer: { type: \"shadow\" } },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"20%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"5%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"15%\" : \"5%\",\n    },\n    xAxis: { type: \"value\" },\n    yAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      axisLabel: {\n        width: 100,\n        overflow: \"truncate\",\n        formatter: (value: string) => truncateLabel(String(value)),\n      },\n    },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: \"bar\",\n      data: ctx.yDataMap[key],\n      stack: stacked ? \"total\" : undefined,\n      itemStyle: { borderRadius: [0, 4, 4, 0] },\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n\n// ============================================================================\n// Heatmap Chart Option\n// ============================================================================\n\nexport interface HeatmapContext extends OptionBuilderContext {\n  /** Y-axis categories (rows) */\n  yAxisData: (string | number)[];\n  /** Heatmap data as [xIndex, yIndex, value] tuples */\n  heatmapData: [number, number, number][];\n  /** Min value for color scale */\n  min: number;\n  /** Max value for color scale */\n  max: number;\n  /** Show value labels on cells */\n  showLabels: boolean;\n}\n\nexport function buildHeatmapOption(\n  ctx: HeatmapContext,\n): Record<string, unknown> {\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: {\n      trigger: \"item\",\n      formatter: (params: { data: [number, number, number] }) => {\n        const [xIdx, yIdx, value] = params.data;\n        const xLabel = ctx.xData[xIdx] ?? xIdx;\n        const yLabel = ctx.yAxisData[yIdx] ?? yIdx;\n        return `${xLabel}, ${yLabel}: ${value}`;\n      },\n    },\n    grid: {\n      left: \"15%\",\n      right: \"15%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: \"15%\",\n    },\n    xAxis: {\n      type: \"category\",\n      data: ctx.xData,\n      splitArea: { show: true },\n      axisLabel: {\n        rotate: ctx.xData.length > 10 ? 45 : 0,\n        formatter: (v: string) => truncateLabel(String(v), 10),\n      },\n    },\n    yAxis: {\n      type: \"category\",\n      data: ctx.yAxisData,\n      splitArea: { show: true },\n      axisLabel: {\n        formatter: (v: string) => truncateLabel(String(v), 12),\n      },\n    },\n    visualMap: {\n      min: ctx.min,\n      max: ctx.max,\n      calculable: true,\n      orient: \"vertical\",\n      right: \"2%\",\n      top: \"center\",\n      inRange: {\n        color: ctx.colors.length >= 2 ? ctx.colors : [\"#f0f0f0\", ctx.colors[0]],\n      },\n    },\n    series: [\n      {\n        type: \"heatmap\",\n        data: ctx.heatmapData,\n        label: {\n          show: ctx.showLabels,\n          formatter: (params: { data: [number, number, number] }) =>\n            String(params.data[2]),\n        },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowColor: \"rgba(0, 0, 0, 0.5)\",\n          },\n        },\n      },\n    ],\n  };\n}\n\n// ============================================================================\n// Cartesian Chart Option (line, bar, area, scatter)\n// ============================================================================\n\nexport function buildCartesianOption(\n  ctx: CartesianContext,\n): Record<string, unknown> {\n  const { chartType, isTimeSeries, stacked, smooth, showSymbol, symbolSize } =\n    ctx;\n  const hasMultipleSeries = ctx.yFields.length > 1;\n  const seriesType = chartType === \"area\" ? \"line\" : chartType;\n  const isScatter = chartType === \"scatter\";\n\n  return {\n    ...buildBaseOption(ctx),\n    tooltip: { trigger: isScatter ? \"item\" : \"axis\" },\n    legend: ctx.showLegend && hasMultipleSeries ? { top: \"bottom\" } : undefined,\n    grid: {\n      left: \"10%\",\n      right: \"10%\",\n      top: ctx.title ? \"15%\" : \"10%\",\n      bottom: ctx.showLegend && hasMultipleSeries ? \"20%\" : \"15%\",\n    },\n    xAxis: {\n      type: isScatter ? \"value\" : isTimeSeries ? \"time\" : \"category\",\n      data: isScatter || isTimeSeries ? undefined : ctx.xData,\n      name: ctx.xField ? formatLabel(ctx.xField) : undefined,\n      axisLabel:\n        isScatter || isTimeSeries\n          ? { show: true }\n          : {\n              rotate: ctx.xData.length > 10 ? 45 : 0,\n              formatter: (v: string) => truncateLabel(String(v), 10),\n            },\n    },\n    yAxis: {\n      type: \"value\",\n      name: ctx.yFields.length === 1 ? formatLabel(ctx.yFields[0]) : undefined,\n    },\n    series: ctx.yFields.map((key, idx) => ({\n      name: formatLabel(key),\n      type: seriesType,\n      data: isScatter\n        ? ctx.xData.map((x, i) => [x, ctx.yDataMap[key][i]])\n        : isTimeSeries\n          ? createTimeSeriesData(ctx.xData, ctx.yDataMap[key])\n          : ctx.yDataMap[key],\n      smooth: chartType === \"line\" || chartType === \"area\" ? smooth : undefined,\n      showSymbol:\n        chartType === \"line\" || chartType === \"area\" ? showSymbol : undefined,\n      symbol: isScatter ? \"circle\" : undefined,\n      symbolSize: isScatter ? symbolSize : undefined,\n      areaStyle: chartType === \"area\" ? { opacity: 0.3 } : undefined,\n      stack: stacked && chartType === \"area\" ? \"total\" : undefined,\n      itemStyle:\n        chartType === \"bar\" ? { borderRadius: [4, 4, 0, 0] } : undefined,\n      color: ctx.colors[idx % ctx.colors.length],\n    })),\n  };\n}\n"],"mappings":"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"}

package/dist/react/charts/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/react/charts/utils.ts"],"mappings":";;AASA;;;;iBAAgB,YAAA,CAAa,KAAA;AAmB7B;;;AAAA,iBAAgB,YAAA,CAAa,IAAA;;AAW7B;;;;;iBAAgB,WAAA,CAAY,KAAA;;;;iBAqBZ,aAAA,CAAc,KAAA,UAAe,SAAA;AAO7C;;;AAAA,iBAAgB,oBAAA,CACd,KAAA,uBACA,KAAA;;AAaF;;iBAAgB,uBAAA,CACd,KAAA,uBACA,QAAA,EAAU,MAAA,+BACV,OAAA;EAEA,KAAA;EACA,QAAA,EAAU,MAAA;AAAA"}
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/react/charts/utils.ts"],"mappings":";;AASA;;;;iBAAgB,YAAA,CAAa,KAAA;AAmB7B;;;AAAA,iBAAgB,YAAA,CAAa,IAAA;;AAW7B;;;;;iBAAgB,WAAA,CAAY,KAAA;;;;iBAqBZ,aAAA,CAAc,KAAA,UAAe,SAAA;AAO7C;;;AAAA,iBAAgB,oBAAA,CACd,KAAA,uBACA,KAAA;;;;iBA0Cc,uBAAA,CACd,KAAA,uBACA,QAAA,EAAU,MAAA,+BACV,OAAA;EAEA,KAAA;EACA,QAAA,EAAU,MAAA;AAAA"}

package/dist/react/charts/utils.js

@@ -43,6 +43,28 @@ function createTimeSeriesData(xData, yData) {
 	return result;
 }
 /**
+* Sorts numeric x-data in ascending order, reordering y-data to match.
+* Also coerces numeric string x-values to numbers.
+*/
+function sortNumericAscending(xData, yDataMap, yFields) {
+	if (xData.length <= 1) return {
+		xData,
+		yDataMap
+	};
+	const indices = xData.map((_, i) => i);
+	indices.sort((a, b) => Number(xData[a]) - Number(xData[b]));
+	const sortedXData = indices.map((i) => Number(xData[i]));
+	const sortedYDataMap = {};
+	for (const key of yFields) {
+		const original = yDataMap[key];
+		sortedYDataMap[key] = indices.map((i) => original[i]);
+	}
+	return {
+		xData: sortedXData,
+		yDataMap: sortedYDataMap
+	};
+}
+/**
 * Sorts time-series data in ascending chronological order.
 */
 function sortTimeSeriesAscending(xData, yDataMap, yFields) {
@@ -73,5 +95,5 @@ function sortTimeSeriesAscending(xData, yDataMap, yFields) {
 }
 
 //#endregion
-export { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel };
+export { createTimeSeriesData, formatLabel, sortNumericAscending, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel };
 //# sourceMappingURL=utils.js.map

package/dist/react/charts/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/react/charts/utils.ts"],"sourcesContent":["// ============================================================================\n// Chart Utility Functions\n// ============================================================================\n\n/**\n * Converts a value to a chart-compatible type.\n * Handles BigInt conversion (Arrow can return BigInt64Array values).\n * Handles Date objects by converting to timestamps.\n */\nexport function toChartValue(value: unknown): string | number {\n  if (value === null || value === undefined) {\n    return 0;\n  }\n  if (typeof value === \"bigint\") {\n    return Number(value);\n  }\n  if (value instanceof Date) {\n    return value.getTime();\n  }\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return value;\n  }\n  return String(value);\n}\n\n/**\n * Converts an array of values to chart-compatible types.\n */\nexport function toChartArray(data: unknown[]): (string | number)[] {\n  if (data.length === 0) return [];\n  return data.map(toChartValue);\n}\n\n/**\n * Formats a field name into a human-readable label.\n * Handles camelCase, snake_case, acronyms, and ALL_CAPS.\n * E.g., \"totalSpend\" -> \"Total Spend\", \"user_name\" -> \"User Name\",\n *       \"userID\" -> \"User Id\", \"TOTAL_SPEND\" -> \"Total Spend\"\n */\nexport function formatLabel(field: string): string {\n  return (\n    field\n      // Handle consecutive uppercase followed by lowercase (e.g., HTTPUrl → HTTP Url)\n      .replace(/([A-Z]+)([A-Z][a-z])/g, \"$1 $2\")\n      // Handle lowercase followed by uppercase (e.g., totalSpend → total Spend)\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Replace underscores with spaces\n      .replace(/_/g, \" \")\n      // Collapse multiple spaces into one\n      .replace(/\\s+/g, \" \")\n      // Normalize to title case\n      .toLowerCase()\n      .replace(/\\b\\w/g, (l) => l.toUpperCase())\n      .trim()\n  );\n}\n\n/**\n * Truncates a label to a maximum length with ellipsis.\n */\nexport function truncateLabel(value: string, maxLength = 15): string {\n  return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;\n}\n\n/**\n * Creates time-series data pairs for ECharts.\n */\nexport function createTimeSeriesData(\n  xData: (string | number)[],\n  yData: (string | number)[],\n): [string | number, string | number][] {\n  const len = xData.length;\n  const result: [string | number, string | number][] = new Array(len);\n  for (let i = 0; i < len; i++) {\n    result[i] = [xData[i], yData[i]];\n  }\n  return result;\n}\n\n/**\n * Sorts time-series data in ascending chronological order.\n */\nexport function sortTimeSeriesAscending(\n  xData: (string | number)[],\n  yDataMap: Record<string, (string | number)[]>,\n  yFields: string[],\n): {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} {\n  if (xData.length <= 1) {\n    return { xData, yDataMap };\n  }\n\n  const first = xData[0];\n  const last = xData[xData.length - 1];\n\n  if (typeof first === \"number\" && typeof last === \"number\" && first > last) {\n    const indices = xData.map((_, i) => i);\n    indices.sort((a, b) => (xData[a] as number) - (xData[b] as number));\n\n    const sortedXData = indices.map((i) => xData[i]);\n    const sortedYDataMap: Record<string, (string | number)[]> = {};\n    for (const key of yFields) {\n      const original = yDataMap[key];\n      sortedYDataMap[key] = indices.map((i) => original[i]);\n    }\n\n    return { xData: sortedXData, yDataMap: sortedYDataMap };\n  }\n\n  return { xData, yDataMap };\n}\n"],"mappings":";;;;;;AASA,SAAgB,aAAa,OAAiC;AAC5D,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,OAAO,MAAM;AAEtB,KAAI,iBAAiB,KACnB,QAAO,MAAM,SAAS;AAExB,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO;AAET,QAAO,OAAO,MAAM;;;;;AAMtB,SAAgB,aAAa,MAAsC;AACjE,KAAI,KAAK,WAAW,EAAG,QAAO,EAAE;AAChC,QAAO,KAAK,IAAI,aAAa;;;;;;;;AAS/B,SAAgB,YAAY,OAAuB;AACjD,QACE,MAEG,QAAQ,yBAAyB,QAAQ,CAEzC,QAAQ,mBAAmB,QAAQ,CAEnC,QAAQ,MAAM,IAAI,CAElB,QAAQ,QAAQ,IAAI,CAEpB,aAAa,CACb,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CACxC,MAAM;;;;;AAOb,SAAgB,cAAc,OAAe,YAAY,IAAY;AACnE,QAAO,MAAM,SAAS,YAAY,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO;;;;;AAMxE,SAAgB,qBACd,OACA,OACsC;CACtC,MAAM,MAAM,MAAM;CAClB,MAAM,SAA+C,IAAI,MAAM,IAAI;AACnE,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IACvB,QAAO,KAAK,CAAC,MAAM,IAAI,MAAM,GAAG;AAElC,QAAO;;;;;AAMT,SAAgB,wBACd,OACA,UACA,SAIA;AACA,KAAI,MAAM,UAAU,EAClB,QAAO;EAAE;EAAO;EAAU;CAG5B,MAAM,QAAQ,MAAM;CACpB,MAAM,OAAO,MAAM,MAAM,SAAS;AAElC,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,YAAY,QAAQ,MAAM;EACzE,MAAM,UAAU,MAAM,KAAK,GAAG,MAAM,EAAE;AACtC,UAAQ,MAAM,GAAG,MAAO,MAAM,KAAiB,MAAM,GAAc;EAEnE,MAAM,cAAc,QAAQ,KAAK,MAAM,MAAM,GAAG;EAChD,MAAM,iBAAsD,EAAE;AAC9D,OAAK,MAAM,OAAO,SAAS;GACzB,MAAM,WAAW,SAAS;AAC1B,kBAAe,OAAO,QAAQ,KAAK,MAAM,SAAS,GAAG;;AAGvD,SAAO;GAAE,OAAO;GAAa,UAAU;GAAgB;;AAGzD,QAAO;EAAE;EAAO;EAAU"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/react/charts/utils.ts"],"sourcesContent":["// ============================================================================\n// Chart Utility Functions\n// ============================================================================\n\n/**\n * Converts a value to a chart-compatible type.\n * Handles BigInt conversion (Arrow can return BigInt64Array values).\n * Handles Date objects by converting to timestamps.\n */\nexport function toChartValue(value: unknown): string | number {\n  if (value === null || value === undefined) {\n    return 0;\n  }\n  if (typeof value === \"bigint\") {\n    return Number(value);\n  }\n  if (value instanceof Date) {\n    return value.getTime();\n  }\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return value;\n  }\n  return String(value);\n}\n\n/**\n * Converts an array of values to chart-compatible types.\n */\nexport function toChartArray(data: unknown[]): (string | number)[] {\n  if (data.length === 0) return [];\n  return data.map(toChartValue);\n}\n\n/**\n * Formats a field name into a human-readable label.\n * Handles camelCase, snake_case, acronyms, and ALL_CAPS.\n * E.g., \"totalSpend\" -> \"Total Spend\", \"user_name\" -> \"User Name\",\n *       \"userID\" -> \"User Id\", \"TOTAL_SPEND\" -> \"Total Spend\"\n */\nexport function formatLabel(field: string): string {\n  return (\n    field\n      // Handle consecutive uppercase followed by lowercase (e.g., HTTPUrl → HTTP Url)\n      .replace(/([A-Z]+)([A-Z][a-z])/g, \"$1 $2\")\n      // Handle lowercase followed by uppercase (e.g., totalSpend → total Spend)\n      .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n      // Replace underscores with spaces\n      .replace(/_/g, \" \")\n      // Collapse multiple spaces into one\n      .replace(/\\s+/g, \" \")\n      // Normalize to title case\n      .toLowerCase()\n      .replace(/\\b\\w/g, (l) => l.toUpperCase())\n      .trim()\n  );\n}\n\n/**\n * Truncates a label to a maximum length with ellipsis.\n */\nexport function truncateLabel(value: string, maxLength = 15): string {\n  return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;\n}\n\n/**\n * Creates time-series data pairs for ECharts.\n */\nexport function createTimeSeriesData(\n  xData: (string | number)[],\n  yData: (string | number)[],\n): [string | number, string | number][] {\n  const len = xData.length;\n  const result: [string | number, string | number][] = new Array(len);\n  for (let i = 0; i < len; i++) {\n    result[i] = [xData[i], yData[i]];\n  }\n  return result;\n}\n\n/**\n * Sorts numeric x-data in ascending order, reordering y-data to match.\n * Also coerces numeric string x-values to numbers.\n */\nexport function sortNumericAscending(\n  xData: (string | number)[],\n  yDataMap: Record<string, (string | number)[]>,\n  yFields: string[],\n): {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} {\n  if (xData.length <= 1) {\n    return { xData, yDataMap };\n  }\n\n  const indices = xData.map((_, i) => i);\n  indices.sort((a, b) => Number(xData[a]) - Number(xData[b]));\n\n  const sortedXData = indices.map((i) => Number(xData[i]));\n  const sortedYDataMap: Record<string, (string | number)[]> = {};\n  for (const key of yFields) {\n    const original = yDataMap[key];\n    sortedYDataMap[key] = indices.map((i) => original[i]);\n  }\n\n  return { xData: sortedXData, yDataMap: sortedYDataMap };\n}\n\n/**\n * Sorts time-series data in ascending chronological order.\n */\nexport function sortTimeSeriesAscending(\n  xData: (string | number)[],\n  yDataMap: Record<string, (string | number)[]>,\n  yFields: string[],\n): {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} {\n  if (xData.length <= 1) {\n    return { xData, yDataMap };\n  }\n\n  const first = xData[0];\n  const last = xData[xData.length - 1];\n\n  if (typeof first === \"number\" && typeof last === \"number\" && first > last) {\n    const indices = xData.map((_, i) => i);\n    indices.sort((a, b) => (xData[a] as number) - (xData[b] as number));\n\n    const sortedXData = indices.map((i) => xData[i]);\n    const sortedYDataMap: Record<string, (string | number)[]> = {};\n    for (const key of yFields) {\n      const original = yDataMap[key];\n      sortedYDataMap[key] = indices.map((i) => original[i]);\n    }\n\n    return { xData: sortedXData, yDataMap: sortedYDataMap };\n  }\n\n  return { xData, yDataMap };\n}\n"],"mappings":";;;;;;AASA,SAAgB,aAAa,OAAiC;AAC5D,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAET,KAAI,OAAO,UAAU,SACnB,QAAO,OAAO,MAAM;AAEtB,KAAI,iBAAiB,KACnB,QAAO,MAAM,SAAS;AAExB,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,SAChD,QAAO;AAET,QAAO,OAAO,MAAM;;;;;AAMtB,SAAgB,aAAa,MAAsC;AACjE,KAAI,KAAK,WAAW,EAAG,QAAO,EAAE;AAChC,QAAO,KAAK,IAAI,aAAa;;;;;;;;AAS/B,SAAgB,YAAY,OAAuB;AACjD,QACE,MAEG,QAAQ,yBAAyB,QAAQ,CAEzC,QAAQ,mBAAmB,QAAQ,CAEnC,QAAQ,MAAM,IAAI,CAElB,QAAQ,QAAQ,IAAI,CAEpB,aAAa,CACb,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CACxC,MAAM;;;;;AAOb,SAAgB,cAAc,OAAe,YAAY,IAAY;AACnE,QAAO,MAAM,SAAS,YAAY,GAAG,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO;;;;;AAMxE,SAAgB,qBACd,OACA,OACsC;CACtC,MAAM,MAAM,MAAM;CAClB,MAAM,SAA+C,IAAI,MAAM,IAAI;AACnE,MAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IACvB,QAAO,KAAK,CAAC,MAAM,IAAI,MAAM,GAAG;AAElC,QAAO;;;;;;AAOT,SAAgB,qBACd,OACA,UACA,SAIA;AACA,KAAI,MAAM,UAAU,EAClB,QAAO;EAAE;EAAO;EAAU;CAG5B,MAAM,UAAU,MAAM,KAAK,GAAG,MAAM,EAAE;AACtC,SAAQ,MAAM,GAAG,MAAM,OAAO,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,CAAC;CAE3D,MAAM,cAAc,QAAQ,KAAK,MAAM,OAAO,MAAM,GAAG,CAAC;CACxD,MAAM,iBAAsD,EAAE;AAC9D,MAAK,MAAM,OAAO,SAAS;EACzB,MAAM,WAAW,SAAS;AAC1B,iBAAe,OAAO,QAAQ,KAAK,MAAM,SAAS,GAAG;;AAGvD,QAAO;EAAE,OAAO;EAAa,UAAU;EAAgB;;;;;AAMzD,SAAgB,wBACd,OACA,UACA,SAIA;AACA,KAAI,MAAM,UAAU,EAClB,QAAO;EAAE;EAAO;EAAU;CAG5B,MAAM,QAAQ,MAAM;CACpB,MAAM,OAAO,MAAM,MAAM,SAAS;AAElC,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,YAAY,QAAQ,MAAM;EACzE,MAAM,UAAU,MAAM,KAAK,GAAG,MAAM,EAAE;AACtC,UAAQ,MAAM,GAAG,MAAO,MAAM,KAAiB,MAAM,GAAc;EAEnE,MAAM,cAAc,QAAQ,KAAK,MAAM,MAAM,GAAG;EAChD,MAAM,iBAAsD,EAAE;AAC9D,OAAK,MAAM,OAAO,SAAS;GACzB,MAAM,WAAW,SAAS;AAC1B,kBAAe,OAAO,QAAQ,KAAK,MAAM,SAAS,GAAG;;AAGvD,SAAO;GAAE,OAAO;GAAa,UAAU;GAAgB;;AAGzD,QAAO;EAAE;EAAO;EAAU"}

package/dist/react/file-browser/directory-list.d.ts

@@ -0,0 +1,54 @@
+import { DirectoryEntry, FileBrowserLabels } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/react/file-browser/directory-list.d.ts
+/** Props for the DirectoryList component */
+interface DirectoryListProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Directory entries to display */
+  entries: DirectoryEntry[];
+  /** Whether the directory is currently loading */
+  loading?: boolean;
+  /** Error message to display */
+  error?: string | null;
+  /** Called when an entry is clicked */
+  onEntryClick: (entry: DirectoryEntry) => void;
+  /** Called when the back/parent button is clicked */
+  onNavigateToParent?: () => void;
+  /** Called when the retry button is clicked */
+  onRetry?: () => void;
+  /** Whether the user is at the root directory (hides back button) */
+  isAtRoot?: boolean;
+  /** Currently selected file path for highlighting */
+  selectedPath?: string | null;
+  /** Resolves a DirectoryEntry to its full path */
+  resolveEntryPath: (entry: DirectoryEntry) => string;
+  /** Content rendered between the back button and the entry list (e.g., NewFolderInput) */
+  headerContent?: React.ReactNode;
+  /** Whether a current path is set (affects empty state message) */
+  hasCurrentPath?: boolean;
+  /** Custom file size formatter */
+  formatSize?: (bytes: number | undefined) => string;
+  /** Customizable labels */
+  labels?: Pick<FileBrowserLabels, "backToParent" | "emptyDirectory" | "noVolumeConfigured" | "retry">;
+}
+/** Card-wrapped directory listing with loading, error, and empty states */
+declare function DirectoryList({
+  entries,
+  loading,
+  error,
+  onEntryClick,
+  onNavigateToParent,
+  onRetry,
+  isAtRoot,
+  selectedPath,
+  resolveEntryPath,
+  headerContent,
+  hasCurrentPath,
+  formatSize,
+  labels,
+  className,
+  ...props
+}: DirectoryListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DirectoryList, DirectoryListProps };
+//# sourceMappingURL=directory-list.d.ts.map

package/dist/react/file-browser/directory-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-list.d.ts","names":[],"sources":["../../../src/react/file-browser/directory-list.tsx"],"mappings":";;;;;UAQiB,kBAAA,SACP,IAAA,CAAK,KAAA,CAAM,cAAA;;EAEnB,OAAA,EAAS,cAAA;EAFT;EAIA,OAAA;EAJa;EAMb,KAAA;EAEsB;EAAtB,YAAA,GAAe,KAAA,EAAO,cAAA;EAYN;EAVhB,kBAAA;EAgBS;EAdT,OAAA;EAZY;EAcZ,QAAA;EAdQ;EAgBR,YAAA;EAhBmB;EAkBnB,gBAAA,GAAmB,KAAA,EAAO,cAAA;EAhBjB;EAkBT,aAAA,GAAgB,KAAA,CAAM,SAAA;EAdtB;EAgBA,cAAA;EAdsB;EAgBtB,UAAA,IAAc,KAAA;EAdd;EAgBA,MAAA,GAAS,IAAA,CACP,iBAAA;AAAA;;iBAMY,aAAA,CAAA;EACd,OAAA;EACA,OAAA;EACA,KAAA;EACA,YAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,MAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}