matterviz 0.4.1 → 0.4.3

package/dist/plot/core/components/ColorBar.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { luminance } from '../../../colors'
+  import { get_d3_interpolator, luminance } from '../../../colors'
   import Spinner from '../../../feedback/Spinner.svelte'
   import { format_num } from '../../../labels'
   import { sanitize_html } from '../../../sanitize'
+  import { clamp01 } from '../../../utils'
   import type { Vec2 } from '../../../math'
   import * as math from '../../../math'
   import { format } from 'd3-format'
@@ -20,11 +21,15 @@
     Orientation,
     ScaleType,
   } from '../types'
-  import { get_arcsinh_threshold, get_scale_type_name } from '../types'
+  import {
+    get_arcsinh_threshold,
+    get_scale_type_name,
+    SCALE_DEFAULTS,
+  } from '../types'
 
   let {
     title = $bindable(),
-    color_scale = $bindable(`interpolateViridis`),
+    color_scale = $bindable(SCALE_DEFAULTS.scheme),
     bar_style = undefined,
     title_style = undefined,
     wrapper_style = undefined,
@@ -104,10 +109,9 @@
     if (orientation === `horizontal`) {
       return tick_side === `primary` ? `top` : `bottom`
     } // orientation === `vertical`
-      // If ticks are primary (right), default label to left
-      // If ticks are secondary (left), default label to right
-      return tick_side === `primary` ? `left` : `right`
-
+    // If ticks are primary (right), default label to left
+    // If ticks are secondary (left), default label to right
+    return tick_side === `primary` ? `left` : `right`
   })
 
   // Number of ticks to generate
@@ -115,29 +119,43 @@
     Array.isArray(tick_labels)
       ? tick_labels.length
       : typeof tick_labels === `number`
-      ? tick_labels
-      : 5,
+        ? tick_labels
+        : 5,
   )
 
+  // Log scales need positive bounds: a non-positive max falls back to linear
+  // (with a warning), a non-positive min is clamped to LOG_EPS.
+  const prepare_log_domain = (
+    min: number,
+    max: number,
+    context: string,
+  ): { min: number; use_log: boolean } => {
+    if (max <= 0) {
+      console.warn(
+        `Log scale requires a positive max value ${context}. Received max=${max}. Falling back to linear.`,
+      )
+      return { min, use_log: false }
+    }
+    if (min <= 0) {
+      console.warn(
+        `Log scale received non-positive min value (${min}) ${context}. Using epsilon=${math.LOG_EPS} instead.`,
+      )
+      return { min: math.LOG_EPS, use_log: true }
+    }
+    return { min, use_log: true }
+  }
+
   // Scale for ticks - based *only* on 'range' prop and 'scale_type' for ticks
   let scale_for_ticks = $derived.by(() => {
     const type_name = get_scale_type_name(scale_type)
-    let use_log_for_ticks = type_name === `log`
     let [scale_min, scale_max] = range
-
-    // Validate range for log scale ticks and apply epsilon if needed
+    let use_log_for_ticks = type_name === `log`
     if (use_log_for_ticks) {
-      if (scale_max <= 0) {
-        console.warn(
-          `Log scale requires a positive max value for ticks. Received max=${scale_max}. Using linear scale for ticks instead.`,
-        )
-        use_log_for_ticks = false
-      } else if (scale_min <= 0) {
-        console.warn(
-          `Log scale received non-positive min value (${scale_min}) for ticks. Using epsilon=${math.LOG_EPS} instead.`,
-        )
-        scale_min = math.LOG_EPS // Substitute with epsilon
-      }
+      ;({ min: scale_min, use_log: use_log_for_ticks } = prepare_log_domain(
+        scale_min,
+        scale_max,
+        `for ticks`,
+      ))
     }
 
     // For arcsinh, use our custom scale
@@ -208,11 +226,13 @@
         if (
           Math.abs(Math.log10(nice_min) % 1) < FRACTIONAL_TOL &&
           !power_of_10_ticks.includes(nice_min)
-        ) power_of_10_ticks.unshift(nice_min)
+        )
+          power_of_10_ticks.unshift(nice_min)
         if (
           Math.abs(Math.log10(nice_max) % 1) < FRACTIONAL_TOL &&
           !power_of_10_ticks.includes(nice_max)
-        ) power_of_10_ticks.push(nice_max)
+        )
+          power_of_10_ticks.push(nice_max)
 
         // If no powers of 10 are within range (e.g. [0.1, 0.9]), fall back to D3 ticks?
         // Or just return filtered list which might be empty?
@@ -242,7 +262,6 @@
       const fraction = idx / (n_ticks - 1)
       return scale_min + fraction * (scale_max - scale_min)
     })
-
   })
 
   // Update nice_range binding when snapping ticks
@@ -261,7 +280,7 @@
     if (color_scale_fn) return color_scale_fn // Prioritize passed function
 
     // Fallback: create function from scheme name/function in 'color_scale' prop
-    let interpolator = d3_sc.interpolateViridis // Default interpolator
+    let interpolator = get_d3_interpolator(SCALE_DEFAULTS.scheme) // Default interpolator
     if (typeof color_scale === `string`) {
       const func_name = color_scale.startsWith(`interpolate`)
         ? color_scale
@@ -269,9 +288,7 @@
       if (func_name in d3_sc) {
         interpolator = d3_sc[func_name as D3InterpolateName]
       } else {
-        console.error(
-          `Color scale '${color_scale}' not found. Falling back on 'Viridis'.`,
-        )
+        console.error(`Color scale '${color_scale}' not found. Falling back on 'Viridis'.`)
       }
     } else if (typeof color_scale === `function`) {
       // User passed a function (assumed interpolator [0,1] -> color)
@@ -285,17 +302,11 @@
     // Use scale_type for fallback scale creation too. Validate domain for log.
     let use_log_fallback = type_name === `log`
     if (use_log_fallback) {
-      if (max_val <= 0) {
-        console.warn(
-          `Log scale requires a positive max value for fallback scale. Received max=${max_val}. Using linear scale for colors.`,
-        )
-        use_log_fallback = false
-      } else if (min_val <= 0) {
-        console.warn(
-          `Log scale received non-positive min value (${min_val}) for fallback scale. Using epsilon=${math.LOG_EPS} instead.`,
-        )
-        min_val = math.LOG_EPS // Substitute with epsilon
-      }
+      ;({ min: min_val, use_log: use_log_fallback } = prepare_log_domain(
+        min_val,
+        max_val,
+        `for fallback scale`,
+      ))
     }
 
     // Use potentially adjusted min/max for domain (ascending)
@@ -312,7 +323,7 @@
       return (value: number): string => {
         const t_val = Math.asinh(value / threshold)
         const normalized = t_max === t_min ? 0.5 : (t_val - t_min) / (t_max - t_min)
-        return interpolator(Math.max(0, Math.min(1, normalized)))
+        return interpolator(clamp01(normalized))
       }
     }
 
@@ -335,27 +346,25 @@
     // Validate domain for log interpolation and apply epsilon if needed
     let use_log_interp = type_name === `log`
     let adjusted_min_ramp = min_ramp_domain
-    let adjusted_max_ramp = max_ramp_domain
-
+    const adjusted_max_ramp = max_ramp_domain
     if (use_log_interp) {
-      if (max_ramp_domain <= 0) {
-        console.warn(
-          `Log scale specified for gradient, but max domain value (${max_ramp_domain}) is not positive. Using linear interpolation.`,
-        )
-        use_log_interp = false
-      } else if (min_ramp_domain <= 0) {
-        console.warn(
-          `Log scale specified for gradient, but min domain value (${min_ramp_domain}) is not positive. Using epsilon=${math.LOG_EPS} instead.`,
-        )
-        adjusted_min_ramp = math.LOG_EPS // Substitute with epsilon
-      }
+      ;({ min: adjusted_min_ramp, use_log: use_log_interp } = prepare_log_domain(
+        min_ramp_domain,
+        max_ramp_domain,
+        `for gradient`,
+      ))
     }
 
     const n_steps = Math.max(2, Math.floor(steps)) // guard against steps <= 1 to avoid NaN/degenerate gradients
 
     // Pre-compute loop-invariant values for each scale type
-    let log_min = 0, log_max = 0, log_span = 0
-    let asinh_threshold = 1, asinh_min = 0, asinh_max = 0, asinh_span = 0
+    let log_min = 0,
+      log_max = 0,
+      log_span = 0
+    let asinh_threshold = 1,
+      asinh_min = 0,
+      asinh_max = 0,
+      asinh_span = 0
     const linear_span = max_ramp_domain - min_ramp_domain
 
     if (use_log_interp) {
@@ -375,13 +384,12 @@
       let data_value: number
 
       if (use_log_interp) {
-        data_value = log_span === 0
-          ? adjusted_min_ramp
-          : 10 ** (log_min + fraction * log_span)
+        data_value = log_span === 0 ? adjusted_min_ramp : 10 ** (log_min + fraction * log_span)
       } else if (type_name === `arcsinh`) {
-        data_value = asinh_span === 0
-          ? min_ramp_domain
-          : Math.sinh(asinh_min + fraction * asinh_span) * asinh_threshold
+        data_value =
+          asinh_span === 0
+            ? min_ramp_domain
+            : Math.sinh(asinh_min + fraction * asinh_span) * asinh_threshold
       } else {
         data_value = min_ramp_domain + fraction * linear_span
       }
@@ -398,15 +406,9 @@
 
   // CSS variables for bar width/height based on orientation
   let final_bar_style = $derived(
-    `--cbar-width: ${
-      orientation === `horizontal` ? `100%` : `var(--cbar-thickness, 10px)`
-    };
-    --cbar-height: ${
-      orientation === `vertical` ? `100%` : `var(--cbar-thickness, 10px)`
-    };
-    background: linear-gradient(${grad_dir}, ${ramped.join(`, `)}); ${
-      bar_style ?? ``
-    }`,
+    `--cbar-width: ${orientation === `horizontal` ? `100%` : `var(--cbar-thickness, 10px)`};
+    --cbar-height: ${orientation === `vertical` ? `100%` : `var(--cbar-thickness, 10px)`};
+    background: linear-gradient(${grad_dir}, ${ramped.join(`, `)}); ${bar_style ?? ``}`,
   )
 
   // Calculate additional margin for main label if it overlaps with ticks
@@ -415,11 +417,14 @@
     if (tick_side === `inside`) return ``
 
     // Determine concrete side outside ticks are on
-    const concrete_outside_tick_side = orientation === `horizontal`
-      ? tick_side === `primary` ? `bottom` : `top`
-      : tick_side === `primary`
-      ? `right`
-      : `left`
+    const concrete_outside_tick_side =
+      orientation === `horizontal`
+        ? tick_side === `primary`
+          ? `bottom`
+          : `top`
+        : tick_side === `primary`
+          ? `right`
+          : `left`
 
     if (actual_title_side !== concrete_outside_tick_side) return ``
 
@@ -443,8 +448,7 @@
       ? `max-width: var(--cbar-label-max-width, 2em);`
       : ``
 
-    return `${size_constraint} ${label_overlap_margin_style} ${title_style ?? ``}`
-      .trim()
+    return `${size_constraint} ${label_overlap_margin_style} ${title_style ?? ``}`.trim()
   })
 
   function get_tick_text_color(tick_value: number): string | null {
@@ -462,9 +466,7 @@
   }
 
   let has_property_select = $derived(property_options && property_options.length > 0)
-  let has_color_scale_select = $derived(
-    color_scale_options && color_scale_options.length > 0,
-  )
+  let has_color_scale_select = $derived(color_scale_options && color_scale_options.length > 0)
   let has_any_select = $derived(has_property_select || has_color_scale_select)
 
   // Keep bindable selected keys valid so state matches the select's first-option fallback.
@@ -522,35 +524,31 @@
   // Align items based on orientation and title position
   let div_style = $derived(`
     --cbar-wrapper-align-items: ${
-    orientation === `vertical` &&
-      (actual_title_side === `left` || actual_title_side === `right`)
-      ? `stretch`
-      : `center`
-  };
+        orientation === `vertical` &&
+        (actual_title_side === `left` || actual_title_side === `right`)
+          ? `stretch`
+          : `center`
+      };
     --cbar-label-display: ${
-    orientation === `vertical` &&
-      (actual_title_side === `left` || actual_title_side === `right`)
-      ? `flex`
-      : `inline-block`
-  };
+        orientation === `vertical` &&
+        (actual_title_side === `left` || actual_title_side === `right`)
+          ? `flex`
+          : `inline-block`
+      };
     height: ${
-    orientation === `vertical`
-      ? `var(--cbar-height, 100%)`
-      : `var(--cbar-height, auto)`
-  };
-    min-height: ${
-    orientation === `vertical` ? `var(--cbar-min-height, 150px)` : `auto`
-  };
+        orientation === `vertical` ? `var(--cbar-height, 100%)` : `var(--cbar-height, auto)`
+      };
+    min-height: ${orientation === `vertical` ? `var(--cbar-min-height, 150px)` : `auto`};
     max-height: ${
-    orientation === `vertical` ? `var(--cbar-max-height, 1000px)` : `none`
-  }; ${wrapper_style ?? ``}`)
+        orientation === `vertical` ? `var(--cbar-max-height, 1000px)` : `none`
+      }; ${wrapper_style ?? ``}`)
 </script>
 
 <div
   style:flex-direction={wrapper_flex_dir}
   {...rest}
   style={div_style + (rest.style ?? ``)}
-  class="colorbar {rest.class ?? ``}"
+  class={[`colorbar`, rest.class]}
 >
   {#if title || has_any_select}
     <div class="title-row {actual_title_side} {orientation}" style={actual_title_style}>
@@ -583,10 +581,7 @@
     </div>
   {/if}
   <div style={final_bar_style} class="bar">
-    {#each tick_side === `inside` ? ticks_array.slice(1, -1) : ticks_array as
-      tick_label
-      (tick_label)
-    }
+    {#each tick_side === `inside` ? ticks_array.slice(1, -1) : ticks_array as tick_label (tick_label)}
       {@const position_percent =
         // Use derived scale's mapping function to get position percent
         scale_for_ticks(tick_label)}

package/dist/plot/core/components/ColorScaleSelect.svelte

@@ -7,7 +7,7 @@
 
   let {
     options = Object.keys(d3_sc).filter((key) =>
-      key.startsWith(`interpolate`)
+      key.startsWith(`interpolate`),
     ) as D3InterpolateName[],
     value = $bindable(options[0]),
     selected = $bindable([]),

package/dist/plot/core/components/FillArea.svelte

@@ -4,11 +4,7 @@
   import { interpolatePath } from 'd3-interpolate-path'
   import { untrack } from 'svelte'
   import { Tween, type TweenOptions } from 'svelte/motion'
-  import type {
-    FillGradient,
-    FillHandlerEvent,
-    FillRegion,
-  } from '../types'
+  import type { FillGradient, FillHandlerEvent, FillRegion } from '../types'
   import { unique_id } from '../utils'
 
   let {
@@ -37,22 +33,20 @@
 
   // Stable instance ID for gradient uniqueness (generated once per component instance)
   const instance_id = unique_id()
-  let gradient_id = $derived(
-    `fill-gradient-${region.id ?? region_idx}-${instance_id}`,
-  )
+  let gradient_id = $derived(`fill-gradient-${region.id ?? region_idx}-${instance_id}`)
 
   // On hover (without an explicit hover_style), noticeably raise opacity. A faint fill (e.g. a
   // low-alpha rgba color at the default 0.3 fill-opacity) is otherwise nearly invisible, so a mere
   // brightness filter reads as "no change". An explicit hover_style.fill_opacity always wins.
   let effective_opacity = $derived(
     is_hovered
-      ? region.hover_style?.fill_opacity ?? Math.min(1, (region.fill_opacity ?? 0.3) + 0.4)
-      : region.fill_opacity ?? 0.3,
+      ? (region.hover_style?.fill_opacity ?? Math.min(1, (region.fill_opacity ?? 0.3) + 0.4))
+      : (region.fill_opacity ?? 0.3),
   )
   let effective_fill = $derived(
     is_hovered && region.hover_style?.fill
       ? region.hover_style.fill
-      : region.fill ?? `steelblue`,
+      : (region.fill ?? `steelblue`),
   )
   let path_fill = $derived(
     typeof effective_fill === `object` ? `url(#${gradient_id})` : effective_fill,
@@ -137,8 +131,9 @@
   // Construct FillHandlerEvent from MouseEvent
   function construct_event(event: MouseEvent): FillHandlerEvent {
     const current = event.currentTarget
-    const rect = (current instanceof SVGElement ? current.ownerSVGElement : null)
-      ?.getBoundingClientRect()
+    const rect = (
+      current instanceof SVGElement ? current.ownerSVGElement : null
+    )?.getBoundingClientRect()
     const px = event.clientX - (rect?.left ?? 0)
     const py = event.clientY - (rect?.top ?? 0)
     const raw_x = x_scale_fn.invert?.(px) ?? 0
@@ -159,9 +154,7 @@
   }
 
   // Type guard for gradient fill
-  const is_gradient = (
-    fill: string | FillGradient | undefined,
-  ): fill is FillGradient =>
+  const is_gradient = (fill: string | FillGradient | undefined): fill is FillGradient =>
     typeof fill === `object` && fill !== null && `type` in fill
 </script>
 
@@ -220,7 +213,7 @@
     fill={path_fill}
     fill-opacity={effective_opacity}
     stroke={hover_stroke ?? `none`}
-    stroke-width={hover_stroke ? region.hover_style?.stroke_width ?? 1.5 : 0}
+    stroke-width={hover_stroke ? (region.hover_style?.stroke_width ?? 1.5) : 0}
   />
 </g>
 

package/dist/plot/core/components/HierarchyControls.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  // Shared controls pane for the hierarchical part-of-whole charts. Exported as
+  // SunburstControls/TreemapControls from the chart barrels; `chart` picks the
+  // chart-specific controls (shape/rotation/radius vs cell paddings) and labels.
+  import { NumberRangeInput, SettingsSection } from '../../../layout'
+  import type {
+    SunburstLabelRotation,
+    SunburstLabelText,
+    SunburstShape,
+    SunburstValueMode,
+  } from '../..'
+  import { DEFAULTS, SETTINGS_CONFIG } from '../../../settings'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import ControlPane from './ControlPane.svelte'
+
+  let {
+    chart,
+    show_controls = $bindable(true),
+    controls_open = $bindable(false),
+    // shared-option defaults come from the bound chart's own settings (chart is
+    // destructured first so later prop defaults can reference it)
+    value_mode = $bindable(DEFAULTS[chart].value_mode),
+    max_depth = $bindable(DEFAULTS[chart].max_depth),
+    min_fraction = $bindable(DEFAULTS[chart].min_fraction),
+    show_labels = $bindable(DEFAULTS[chart].show_labels),
+    label_text = $bindable(DEFAULTS[chart].label_text),
+    zoom_on_click = $bindable(DEFAULTS[chart].zoom_on_click),
+    show_breadcrumbs = $bindable(DEFAULTS[chart].show_breadcrumbs),
+    shape = $bindable(DEFAULTS.sunburst.shape),
+    inner_radius = $bindable(DEFAULTS.sunburst.inner_radius),
+    pad_angle = $bindable(DEFAULTS.sunburst.pad_angle),
+    label_rotation = $bindable(DEFAULTS.sunburst.label_rotation),
+    padding_inner = $bindable(DEFAULTS.treemap.padding_inner),
+    padding_top = $bindable(DEFAULTS.treemap.padding_top),
+    padding_outer = $bindable(DEFAULTS.treemap.padding_outer),
+    export_buttons = true,
+    on_export,
+    toggle_props = {},
+    pane_props = {},
+    children,
+  }: {
+    chart: `sunburst` | `treemap`
+    show_controls?: boolean
+    controls_open?: boolean
+    value_mode?: SunburstValueMode
+    max_depth?: number
+    min_fraction?: number
+    show_labels?: boolean
+    label_text?: SunburstLabelText
+    zoom_on_click?: boolean
+    show_breadcrumbs?: boolean
+    // sunburst-only (ignored for treemap)
+    shape?: SunburstShape
+    inner_radius?: number
+    pad_angle?: number
+    label_rotation?: SunburstLabelRotation
+    // treemap-only (ignored for sunburst)
+    padding_inner?: number
+    padding_top?: number
+    padding_outer?: number
+    export_buttons?: boolean // show SVG/PNG download buttons in the pane
+    on_export?: (format: `svg` | `png`) => void
+    toggle_props?: HTMLAttributes<HTMLButtonElement>
+    pane_props?: HTMLAttributes<HTMLDivElement>
+    children?: Snippet
+  } = $props()
+
+  let current_values = $derived({
+    value_mode,
+    max_depth,
+    min_fraction,
+    show_labels,
+    label_text,
+    zoom_on_click,
+    show_breadcrumbs,
+    ...(chart === `sunburst`
+      ? { shape, inner_radius, pad_angle, label_rotation }
+      : { padding_inner, padding_top, padding_outer }),
+  })
+
+  function reset_to_defaults() {
+    ;({
+      value_mode,
+      max_depth,
+      min_fraction,
+      show_labels,
+      label_text,
+      zoom_on_click,
+      show_breadcrumbs,
+    } = DEFAULTS[chart])
+    if (chart === `sunburst`) {
+      ;({ shape, inner_radius, pad_angle, label_rotation } = DEFAULTS.sunburst)
+    } else ({ padding_inner, padding_top, padding_outer } = DEFAULTS.treemap)
+  }
+</script>
+
+{#if show_controls}
+  <!-- snippets live at the template top level (not inside the components below) so
+  they're locally renderable rather than treated as ControlPane/SettingsSection props -->
+  {#snippet options(enum_map: Record<string, string>)}
+    {#each Object.entries(enum_map) as [value, label] (value)}
+      <option {value}>{label}</option>
+    {/each}
+  {/snippet}
+  <ControlPane bind:controls_open controls_class={chart} {toggle_props} {pane_props}>
+    {@render children?.()}
+    <SettingsSection
+      title={chart === `sunburst` ? `Sunburst` : `Treemap`}
+      {current_values}
+      on_reset={reset_to_defaults}
+      style="display: flex; flex-wrap: wrap; gap: 2ex"
+    >
+      <!-- select options come from the settings schema so labels/values have a
+      single source of truth -->
+      {#if chart === `sunburst`}
+        <label style="flex: 1">
+          Shape:
+          <select bind:value={shape}>
+            {@render options(SETTINGS_CONFIG.sunburst.shape.enum ?? {})}
+          </select>
+        </label>
+      {/if}
+      <label style="flex: 1">
+        Value mode:
+        <select bind:value={value_mode}>
+          {@render options(SETTINGS_CONFIG[chart].value_mode.enum ?? {})}
+        </select>
+      </label>
+      {#if chart === `sunburst` && shape === `sunburst`}
+        <!-- icicle labels are always horizontal; inner radius/pad angle are polar-only -->
+        <label style="flex: 1">
+          Labels:
+          <select bind:value={label_rotation}>
+            {@render options(SETTINGS_CONFIG.sunburst.label_rotation.enum ?? {})}
+          </select>
+        </label>
+      {/if}
+      <label style="flex: 1">
+        Label text:
+        <select bind:value={label_text}>
+          {@render options(SETTINGS_CONFIG[chart].label_text.enum ?? {})}
+        </select>
+      </label>
+      <NumberRangeInput min={0} max={10} step={1} bind:value={max_depth} style="flex: 1 1 100%"
+        >Max depth (0 = all):</NumberRangeInput
+      >
+      {#if chart === `sunburst`}
+        {#if shape === `sunburst`}
+          <NumberRangeInput
+            min={0}
+            max={0.8}
+            step={0.05}
+            bind:value={inner_radius}
+            style="flex: 1 1 100%">Inner radius:</NumberRangeInput
+          >
+          <NumberRangeInput
+            min={0}
+            max={4}
+            step={0.1}
+            bind:value={pad_angle}
+            style="flex: 1 1 100%">Pad angle (°):</NumberRangeInput
+          >
+        {/if}
+      {:else}
+        <NumberRangeInput
+          min={0}
+          max={10}
+          step={0.5}
+          bind:value={padding_inner}
+          style="flex: 1 1 100%">Cell gap (px):</NumberRangeInput
+        >
+        <NumberRangeInput
+          min={0}
+          max={40}
+          step={1}
+          bind:value={padding_top}
+          style="flex: 1 1 100%">Header height (px, 0 = none):</NumberRangeInput
+        >
+        <NumberRangeInput
+          min={0}
+          max={10}
+          step={0.5}
+          bind:value={padding_outer}
+          style="flex: 1 1 100%">Child inset (px):</NumberRangeInput
+        >
+      {/if}
+      <NumberRangeInput
+        min={0}
+        max={0.2}
+        step={0.005}
+        bind:value={min_fraction}
+        style="flex: 1 1 100%"
+        >Group {chart === `sunburst` ? `slices` : `cells`} below (fraction of total):</NumberRangeInput
+      >
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={show_labels} />
+        Show {chart === `sunburst` ? `arc` : `cell`} labels
+      </label>
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={zoom_on_click} />
+        Zoom on click
+      </label>
+      <label style="flex: 1 1 100%">
+        <input type="checkbox" bind:checked={show_breadcrumbs} />
+        Show breadcrumbs when zoomed
+      </label>
+    </SettingsSection>
+    {#if export_buttons && on_export}
+      <!-- --hier-btn-*: forward the chart's own theming vars (--sunburst-btn-bg /
+      --treemap-btn-bg); when unset, the outer var() falls back to the gray default -->
+      <div
+        class="export-row"
+        style="--hier-btn-bg: var(--{chart}-btn-bg); --hier-btn-hover-bg: var(--{chart}-btn-hover-bg)"
+      >
+        Export:
+        {#each [`svg`, `png`] as const as fmt (fmt)}
+          <button
+            type="button"
+            class="export-btn"
+            aria-label="Download {fmt.toUpperCase()}"
+            onclick={() => on_export?.(fmt)}>{fmt.toUpperCase()}</button
+          >
+        {/each}
+      </div>
+    {/if}
+  </ControlPane>
+{/if}
+
+<style>
+  .export-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 6px;
+    font-size: 0.85em;
+  }
+  .export-btn {
+    background: var(--hier-btn-bg, rgba(128, 128, 128, 0.15));
+    color: inherit;
+    border: none;
+    border-radius: 3pt;
+    padding: 1px 6px;
+    cursor: pointer;
+  }
+  .export-btn:hover {
+    background: var(--hier-btn-hover-bg, rgba(128, 128, 128, 0.35));
+  }
+</style>