@bimetal/gantt-svelte-components

The default Svelte 5 Gantt chart for BIMETAL — a thin binding over the canonical @bimetal/gantt-headless controller. Every interaction decision (drag snapping, dependency validity, scale/ticks, input parsing, the critical-path diagnostic) lives in the controller; this component only renders DOM, registers window listeners, hit-tests pointer drags, and normalizes keyboard events. It is behaviorally identical to the React and Vue ports and shares the same DOM classes and CSS (@bimetal/gantt-themes).

Features

• Real drag — move a bar, resize either edge, drag the progress dot, or pull a dependency link from the connector. No nudge buttons.
• Keyboard a11y — focus a bar, ←/→ to move, Shift+←/→ to resize, Enter to edit, Delete to remove.
• Zoom hour → quarter; a controller-derived date header (pxPerUnit/ticks come from the controller — the renderer never defines its own scale).
• Milestones (a point in time — kind: 'milestone' + at, rendered as diamonds), a today marker, and dependency arrows (FS/SS/FF/SF + lag) with a critical-path highlight.
• Task grid (Vorgang/Start/Ende/Tage/%) with hierarchy, collapse, indent and row reorder; a task dialog (title/start/end/%), undo toast, light/dark.

Event-sourced: the whole chart is one aggregate, every change is an event, and undo + full history come for free.

Install

npm i @bimetal/gantt-svelte-components

Usage

<script lang="ts">
  import { Gantt } from '@bimetal/gantt-svelte-components';
  import '@bimetal/gantt-svelte-components/styles';
  import { createGanttStore } from '@bimetal/gantt-data';

  const store = createGanttStore();
  // …seed the chart…
</script>

<Gantt {store} chartId="chart-1" />

Props

| Prop | Type | Default | Description | | ---------- | ------------------------- | ------- | ---------------------------------------------------------------------- | | store | GanttStore | — | The chart store. Immutable after mount (the controller is created once). | | chartId | string | — | Which chart to render. Immutable after mount. | | config | GanttConfigInput | — | Locale overrides, merged with the defaults. | | darkMode | boolean | false | Apply the dark token set (data-theme="dark"). | | scale | GanttScale | 'day' | Initial zoom (hour → quarter). | | onError | (err: unknown) => void | — | Surfaces infrastructure errors (a dependency/cycle rejection is a toast). |

License

Apache-2.0