@temporeum/timeline-vue 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 1.0.0 — 2026-11-07
+
+The first release, on 1.0.0 of `@temporeum/timeline-element`. From here on the package follows [semantic versioning](https://horakdani.github.io/Temporeum_timeline_SDK/stability.html).
+
+- `<Timeline>` and `useTimelineState` for Vue 3: every `TimelineConfig` field as a declared, typed prop (`TimelineProps<T>`, generic over the items' data; a bare boolean attribute is `true`, a reactive value reaches the instance as the plain object), every instance event as an emit (`TIMELINE_EVENTS` of the element), `ready` with the instance.
+- `registerPlugin` and `hasPlugin` (and the `TimelinePlugin` type) are handed on from `@temporeum/timeline-element`, so an app that installs only the adapter registers the plugins it needs; the element is a `^1.0.0` dependency.
+- The view and the selection are defaults — `defaultDomain` and `defaultSelectedIds` — and stay where the reader moved them on a re-render; the instance's `zoomTo` and `select` move them. Every other field is compared by what it says: an option object written anew on each render is no change, and a drag in progress goes on.
+- Server-rendered by Vue's own renderer (Nuxt included) and hydrated without a second drawing.
+- Options that need a plugin of the element (`gantt`, `resources`, the time tools, `groups`, the item kinds, `strings`, `calendar`, `direction`) need it registered once for the page, with `registerPlugin` from `@temporeum/timeline-element` — in the app's entry, before the first timeline, and where the server renders too. Without it the configuration throws, naming the import.
+- The `#item` slot: each item's content as Vue, teleported into the box over the item — it keeps its state while the item is drawn, and is unmounted when it leaves the view. Needs the element's `/items` plugin, registered once.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Horak and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,135 @@
-# Temporary Holding Version
+# @temporeum/timeline-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The timeline as a Vue component, built on the shared instance of
+[`@temporeum/timeline-element`](https://github.com/horakdani/Temporeum_timeline_SDK/tree/main/packages/web-component#readme).
+
+```bash
+npm install @temporeum/timeline-vue @temporeum/timeline-element
+```
+
+The element is the adapter's own dependency; list it beside the adapter, as
+above, to import its plugins (`@temporeum/timeline-element/items`, `/gantt`,
+`/resources` …): pnpm and Yarn PnP let an app import only what it lists. The
+types an app writes — `Item`, `Lane`, `Group`, `TimeMs` and every event's
+payload (`ItemMovedPayload`, `SelectionChangedPayload` …) — come from
+`@temporeum/timeline-vue` itself.
+
+The peer range is `vue ^3.5.0` (`useId` is new in 3.5). The suite runs on
+the newest Vue 3 and, in CI, on 3.5.0, the lowest the range admits.
+
+```vue excerpt:template/vue/src/App.vue
+<script setup>
+import { Timeline, useTimelineState } from "@temporeum/timeline-vue";
+import { ref, shallowRef } from "vue";
+
+const DAY = 86_400_000;
+const t = Date.UTC(2026, 2, 2);
+const items = [
+  { id: "design", label: "Design", laneId: "work", start: t, end: t + 7 * DAY, data: { owner: "Ana" } },
+  { id: "launch", label: "Launch", laneId: "ship", start: t + 25 * DAY, end: t + 32 * DAY, data: { owner: "Dev" } },
+];
+const lanes = [
+  { id: "work", label: "Work" },
+  { id: "ship", label: "Shipping" },
+];
+
+const timeline = shallowRef(null);
+const selected = useTimelineState(timeline, (state) => state.selectedIds);
+const log = ref("Drag an item.");
+const onMoved = ({ item, to }) => {
+  log.value = `${item.label} moved to ${new Date(to.start ?? item.start).toDateString()}`;
+};
+</script>
+
+<template>
+  <main style="padding: 16px">
+    <Timeline
+      :items="items"
+      :lanes="lanes"
+      :height="320"
+      aria-label="Release plan"
+      :editing="{ enabled: true, snapMs: DAY }"
+      @item-moved="onMoved"
+      @ready="timeline = $event"
+    >
+      <!-- An item's content as Vue: a picture of the item, its label still its name. -->
+      <template #item="{ item }">
+        <b>{{ item.label }}</b> · {{ item.data.owner }}
+      </template>
+    </Timeline>
+    <p aria-live="polite">{{ log }} {{ selected?.length ?? 0 }} selected.</p>
+  </main>
+</template>
+```
+
+The `#item` slot needs the element's `/items` plugin, as `template` does:
+register it once, before the first timeline — without it the timeline
+throws on mount, naming the import.
+
+```js excerpt:template/vue/src/main.js
+import { registerPlugin } from "@temporeum/timeline-element";
+import { itemsPlugin } from "@temporeum/timeline-element/items";
+// …
+registerPlugin(itemsPlugin);
+```
+
+The whole project, with Vite, is the [Vue template](https://github.com/horakdani/Temporeum_timeline_SDK/tree/main/packages/docs/templates/vue); a
+[Nuxt one](https://github.com/horakdani/Temporeum_timeline_SDK/tree/main/packages/docs/templates/nuxt) is beside it.
+
+Every [`TimelineConfig`](https://horakdani.github.io/Temporeum_timeline_SDK/reference/api.html#configuration) field is a typed
+prop — in camelCase or kebab-case, `:time-zone` is `timeZone`, and a bare
+`lane-headers` is `true`; `class`, `style`, `id` and other attributes go on
+the box —
+and every instance event an emit by its own name (`@item-moved`,
+`@selection-changed`, `@viewport-changed`, …). `@ready` hands over the live
+instance, and `null` on unmount; a template ref's `timeline` is the same
+instance.
+
+The view and the selection are where the timeline starts:
+`:default-domain` and `:default-selected-ids`. A re-render does not move
+them back; the instance's `zoomTo` and `select` do. Every other attribute
+is compared by what it says, so an `:editing="{ enabled: true }"` object
+written anew on each render is no change.
+
+## It does not re-render to draw
+
+The component creates the instance once, on mount, and hands it the
+attributes that changed — the same `items` array is not new data. A pan, a
+pinch, a drag are drawn by the instance, imperatively; Vue does not hear of
+them. What a component renders from is the instance's store:
+`useTimelineState(timeline, selector, isEqual?)` gives a shallow ref that
+changes when the selected part does, and at most once per drawn frame,
+however many pointer events the frame held. `timeline` may be a ref, a
+getter (`() => view.value?.timeline`) or the instance.
+
+## Server rendering
+
+On the server — Nuxt, or `renderToString` of your own — the component prints
+the drawing the browser would draw, at `ssr-width` (960 px by default), and
+on hydration the instance takes those nodes over instead of drawing again.
+Nothing else is needed: no client plugin, no compiler option.
+
+```vue excerpt:template/nuxt/app/app.vue
+<template>
+  <main>
+    <Timeline :items="items" :lanes="lanes" :height="320" aria-label="Release plan" :ssr-width="960" />
+  </main>
+</template>
+```
+
+The drawing goes into the server's markup only. Vue 3.5 writes a dynamic
+`innerHTML` again while hydrating, and an `innerHTML` written by script is a
+second drawing, not the parser's first; on the client the component's node
+has no children for Vue to compare, so Vue leaves alone what the parser
+built.
+
+## Documentation
+
+Guides, recipes and the API reference with live examples are on the
+[docs site](https://horakdani.github.io/Temporeum_timeline_SDK/) — the Vue page is [Frameworks](https://horakdani.github.io/Temporeum_timeline_SDK/frameworks.html). Every
+code block in this README is checked against a running template in CI
+(`npm run test:examples -w @temporeum/timeline-docs`).
+
+## Licence
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,266 @@
+/*! @temporeum/timeline-vue | MIT */
+'use strict';
+
+var timelineElement = require('@temporeum/timeline-element');
+var vue = require('vue');
+
+/**
+ * `@temporeum/timeline-vue` — the timeline as a Vue component.
+ *
+ * The component is a shell around the shared instance (`createTimeline`,
+ * from `@temporeum/timeline-element`), as the React one is: it creates the
+ * instance once, on mount, hands it every attribute that changed, and lets
+ * go of it on unmount. It does not re-render to draw. A pan of a hundred
+ * pointer events is drawn by the instance, imperatively, and Vue does not
+ * hear of it — its reactivity is the wrong tool for sixty frames a second of
+ * SVG attributes.
+ *
+ * What a component *does* render from is the instance's store.
+ * `useTimelineState` subscribes to it with a selector and gives a shallow
+ * ref: one that shows the selection changes when the selection changes and
+ * at no other time; one that shows the visible range changes once per drawn
+ * frame at most, however many events the frame held.
+ *
+ * **Server rendering.** On the server the component prints the same drawing
+ * the browser would draw (the core is DOM-free), so the page shows a
+ * timeline before the bundle loads; on hydration the instance takes those
+ * nodes over. The drawing goes into the server's markup only: Vue 3.5
+ * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`
+ * written by script is not the parser's — the instance would draw a second
+ * timeline. On the client the node has no children for Vue to compare, so
+ * Vue leaves alone what the parser built.
+ */
+/**
+ * A prop that may be written as a bare attribute (`<Timeline lane-headers />`)
+ * is a boolean first: Vue reads the empty string as `true` for it. The rest
+ * take any value, and an absent one is `undefined` — not in the
+ * configuration, so the instance's default holds.
+ */
+const ANY = { type: null, default: undefined };
+const FLAG = { type: Boolean, default: undefined };
+const PROPS = {
+    items: ANY,
+    lanes: ANY,
+    groups: ANY,
+    template: ANY,
+    templateOptions: ANY,
+    slots: { type: [Boolean, Function], default: undefined },
+    gantt: ANY,
+    resources: ANY,
+    resourceOptions: ANY,
+    defaultDomain: ANY,
+    limits: ANY,
+    orientation: ANY,
+    breakpoint: ANY,
+    density: ANY,
+    metrics: ANY,
+    packMode: ANY,
+    theme: ANY,
+    locale: ANY,
+    timeZone: ANY,
+    formatTick: ANY,
+    axisContext: FLAG,
+    touchAction: ANY,
+    maxLabels: ANY,
+    labelOverflow: ANY,
+    ariaLabel: ANY,
+    decorations: ANY,
+    cluster: { type: [Boolean, Object], default: undefined },
+    hooks: ANY,
+    height: ANY,
+    interactions: ANY,
+    editing: ANY,
+    defaultSelectedIds: ANY,
+    instanceId: ANY,
+    nonce: ANY,
+    measureText: ANY,
+    sceneSpace: { type: [Boolean, String], default: undefined },
+    hiddenDates: ANY,
+    timeBars: ANY,
+    timeBarOptions: ANY,
+    rolling: { type: [Boolean, Object], default: undefined },
+    zoomPresets: { type: [Boolean, Array], default: undefined },
+    minimap: { type: [Boolean, Object], default: undefined },
+    rangeSelect: { type: [Boolean, Object], default: undefined },
+    laneHeaders: FLAG,
+    tooltip: { type: [Boolean, Function], default: undefined },
+    direction: ANY,
+    strings: ANY,
+    calendar: ANY,
+    ssrWidth: { type: Number, default: undefined },
+};
+/** Where the view and the selection start, and the server's width: said once, not configuration that changes. */
+const OWN = new Set(["ssrWidth", "defaultDomain", "defaultSelectedIds"]);
+/** `useId` gives `v-0` or `v:0`; a stylesheet scope wants a plain name. */
+const scopeOf = (id) => `tl${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+/**
+ * The configuration part of the props: the ones given, as plain values. A
+ * reactive array or object the host passes is Vue's proxy of it; the
+ * instance holds the object itself, so its identity is the host's and the
+ * frames do not go through the proxy.
+ */
+function configOf(props, scope) {
+    const config = {};
+    for (const key of Object.keys(PROPS)) {
+        const value = props[key];
+        if (!OWN.has(key) && value !== undefined)
+            config[key] = vue.toRaw(value);
+    }
+    // Light DOM: two timelines on one page must not share one stylesheet.
+    if (config.instanceId === undefined)
+        config.instanceId = scope;
+    return config;
+}
+/** The keys whose values are not the same object: an unchanged `items` array must not look like new data. */
+function changedOf(before, next) {
+    const changed = {};
+    let any = false;
+    for (const key of new Set([...Object.keys(before), ...Object.keys(next)])) {
+        if (key !== "__proto__" && before[key] !== next[key]) {
+            changed[key] = next[key];
+            any = true;
+        }
+    }
+    return any ? changed : undefined;
+}
+/**
+ * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,
+ * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event
+ * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over
+ * the live instance; a template ref's `timeline` is the same instance.
+ * `class`, `style`, `id` and the rest of the attributes go on the box.
+ *
+ * The `#item` slot (`<template #item="{ item }">`) is each item's content
+ * as Vue, teleported into the box over the item (`slots`): only the items
+ * drawn have one. The content is a picture — the pointer and the keyboard
+ * act on the item, and its `label` stays its accessible name. Needs the
+ * `/items` plugin, as `template` does.
+ */
+const Timeline = vue.defineComponent((props, { emit, expose, slots }) => {
+    // Vue 3.5.0 types useId() as possibly undefined (outside a setup); here it is in one.
+    const scope = scopeOf(vue.useId() ?? "");
+    const container = vue.ref(null);
+    const timeline = vue.shallowRef(null);
+    const drawn = vue.shallowRef(new Map());
+    // With an `#item` slot every item has a box, unless `slots` picks.
+    const configNow = () => {
+        const config = configOf(props, scope);
+        if (slots.item !== undefined && config.slots === undefined)
+            config.slots = true;
+        return config;
+    };
+    let applied = configNow();
+    const initial = {
+        ...applied,
+        ...(props.defaultDomain === undefined ? {} : { domain: vue.toRaw(props.defaultDomain) }),
+        ...(props.defaultSelectedIds === undefined ? {} : { selectedIds: vue.toRaw(props.defaultSelectedIds) }),
+    };
+    // The server's drawing, computed once — on the server only: Vue's
+    // server renderer is what provides an SSR context.
+    const html = vue.inject(vue.ssrContextKey, null) !== null
+        ? (() => {
+            const frame = timelineElement.renderTimelineSvg(initial, props.ssrWidth === undefined ? {} : { width: props.ssrWidth });
+            return frame.svg + frame.groups;
+        })()
+        : undefined;
+    let stops = [];
+    vue.onMounted(() => {
+        const instance = timelineElement.createTimeline(container.value, { ...initial, ...applied }, { hydrate: true });
+        stops = timelineElement.TIMELINE_EVENTS.map((type) => instance.on(type, (payload) => forward(emit, type, payload)));
+        // Vue renders the teleports in its own flush, a microtask after the
+        // frame that drew the boxes: before the browser paints it.
+        stops.push(instance.on("slotsChanged", ({ slots: next }) => (drawn.value = next)));
+        drawn.value = instance.slots;
+        timeline.value = instance;
+        emit("ready", instance);
+    });
+    // Hand the instance what changed, and only that.
+    vue.onUpdated(() => {
+        const next = configNow();
+        const changed = changedOf(applied, next);
+        applied = next;
+        if (changed !== undefined)
+            timeline.value?.update(changed);
+    });
+    vue.onBeforeUnmount(() => {
+        for (const stop of stops)
+            stop();
+        stops = [];
+        timeline.value?.destroy();
+        timeline.value = null;
+        emit("ready", null);
+    });
+    expose({ timeline });
+    return () => {
+        const height = props.height ?? timelineElement.DEFAULT_HEIGHT;
+        const item = slots.item;
+        const teleports = item === undefined ? [] : [...drawn.value].map(([id, slot]) => vue.h(vue.Teleport, { key: id, to: slot.element }, item({ item: slot.item })));
+        // The teleports are the box's children, as anchors: one root, so the
+        // server's markup stays the box alone. Without a teleport the box has
+        // no children for Vue — on the server it has the drawing, and while
+        // hydrating Vue must not compare the instance's nodes with any. The
+        // host's class, style and attributes fall through onto the box.
+        return vue.h("div", {
+            ref: container,
+            style: { position: "relative", overflow: "hidden", height: `${String(height)}px` },
+            "data-tl-vue": "",
+            ...(html === undefined ? {} : { innerHTML: html }),
+        }, html === undefined && teleports.length > 0 ? teleports : undefined);
+    };
+}, {
+    name: "TemporeumTimeline",
+    // The runtime declaration; the types are the setup function's, generic over the items' data.
+    props: PROPS,
+    emits: [...timelineElement.TIMELINE_EVENTS, "ready"],
+    slots: Object,
+});
+/** One instance event, emitted under its own name: the payload is that event's. */
+function forward(emit, type, payload) {
+    emit(type, payload);
+}
+/**
+ * Subscribe to the part of the instance's state a component renders.
+ *
+ * The ref changes when `selector`'s result changes (by `isEqual`,
+ * `Object.is` by default) — and at most once per drawn frame, because the
+ * store notifies at most once per frame. `undefined` until there is an
+ * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)
+ * or the instance itself.
+ */
+function useTimelineState(timeline, selector, isEqual = Object.is) {
+    const state = vue.shallowRef(undefined);
+    vue.watch(() => vue.toValue(timeline), (instance, _, onCleanup) => {
+        if (instance === null || instance === undefined) {
+            state.value = undefined;
+            return;
+        }
+        let seen;
+        const read = () => {
+            const snapshot = instance.getSnapshot();
+            if (seen !== undefined && seen.snapshot === snapshot)
+                return;
+            const selected = selector(snapshot);
+            if (seen !== undefined && isEqual(seen.selected, selected)) {
+                seen = { snapshot, selected: seen.selected };
+                return;
+            }
+            seen = { snapshot, selected };
+            state.value = selected;
+        };
+        read();
+        onCleanup(instance.subscribe(read));
+    }, { immediate: true });
+    return state;
+}
+
+Object.defineProperty(exports, "hasPlugin", {
+    enumerable: true,
+    get: function () { return timelineElement.hasPlugin; }
+});
+Object.defineProperty(exports, "registerPlugin", {
+    enumerable: true,
+    get: function () { return timelineElement.registerPlugin; }
+});
+exports.Timeline = Timeline;
+exports.useTimelineState = useTimelineState;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * `@temporeum/timeline-vue` — the timeline as a Vue component.\n *\n * The component is a shell around the shared instance (`createTimeline`,\n * from `@temporeum/timeline-element`), as the React one is: it creates the\n * instance once, on mount, hands it every attribute that changed, and lets\n * go of it on unmount. It does not re-render to draw. A pan of a hundred\n * pointer events is drawn by the instance, imperatively, and Vue does not\n * hear of it — its reactivity is the wrong tool for sixty frames a second of\n * SVG attributes.\n *\n * What a component *does* render from is the instance's store.\n * `useTimelineState` subscribes to it with a selector and gives a shallow\n * ref: one that shows the selection changes when the selection changes and\n * at no other time; one that shows the visible range changes once per drawn\n * frame at most, however many events the frame held.\n *\n * **Server rendering.** On the server the component prints the same drawing\n * the browser would draw (the core is DOM-free), so the page shows a\n * timeline before the bundle loads; on hydration the instance takes those\n * nodes over. The drawing goes into the server's markup only: Vue 3.5\n * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`\n * written by script is not the parser's — the instance would draw a second\n * timeline. On the client the node has no children for Vue to compare, so\n * Vue leaves alone what the parser built.\n */\n\nimport { createTimeline, DEFAULT_HEIGHT, renderTimelineSvg, TIMELINE_EVENTS } from \"@temporeum/timeline-element\";\nimport type {\n  ItemSlot,\n  Timeline as TimelineInstance,\n  TimelineComponentConfig,\n  TimelineConfig,\n  TimelineInstanceEventMap,\n  TimelineInstanceEventName,\n  TimelineSnapshot,\n  TimelineUpdate,\n} from \"@temporeum/timeline-element\";\nimport { defineComponent, h, inject, onBeforeUnmount, onMounted, onUpdated, ref, shallowRef, ssrContextKey, Teleport, toRaw, toValue, useId, watch } from \"vue\";\nimport type {\n  AllowedComponentProps,\n  ComponentCustomProps,\n  ComponentOptionsMixin,\n  CreateComponentPublicInstanceWithMixins,\n  MaybeRefOrGetter,\n  PublicProps,\n  SetupContext,\n  ShallowRef,\n  SlotsType,\n  VNodeProps,\n} from \"vue\";\n\nexport type { TimelineComponentConfig, TimelineConfig, TimelineSnapshot } from \"@temporeum/timeline-element\";\n/** The element's plugin registry, from the adapter too: an app that installs only the adapter still registers the plugins its configuration needs. */\n// The data and the event payloads, handed on: one install types an app.\nexport type {\n  ClusterOpenedPayload,\n  Command,\n  CommandPayload,\n  DensityChangedPayload,\n  Domain,\n  Group,\n  GroupMovedPayload,\n  GroupToggledPayload,\n  HoverPayload,\n  InputSkippedPayload,\n  Item,\n  ItemEventPayload,\n  ItemMovedPayload,\n  ItemPatch,\n  ItemResizedPayload,\n  ItemsAddedPayload,\n  ItemsChangedPayload,\n  ItemsRemovedPayload,\n  JumpRequestPayload,\n  Lane,\n  LayoutChangedPayload,\n  OrientationChangedPayload,\n  SelectionChangedPayload,\n  SlotsChangedPayload,\n  TimeBar,\n  TimeBarMovedPayload,\n  TimelineInstanceEventMap,\n  TimelineInstanceEventName,\n  TimeMs,\n  TimeRange,\n  ViewportChangedPayload,\n} from \"@temporeum/timeline-element\";\nexport { hasPlugin, registerPlugin } from \"@temporeum/timeline-element\";\nexport type { PluginName, TimelinePlugin } from \"@temporeum/timeline-element\";\nexport type { TimelineInstance };\n\n/** What the component emits: every instance event, by its own name, and `ready` with the instance (`null` on unmount). */\nexport type TimelineEmits<T = unknown> = { readonly [K in TimelineInstanceEventName]: (payload: TimelineInstanceEventMap<T>[K]) => void } & {\n  readonly ready: (timeline: TimelineInstance<T> | null) => void;\n};\n\n/** The component's props: every {@link TimelineComponentConfig} field, and the width the server draws at. */\nexport type TimelineProps<T = unknown> = TimelineComponentConfig<T> & {\n  /** Width the server draws at; the client redraws at the real one. */\n  readonly ssrWidth?: number | undefined;\n};\n\n/** The `#item` slot: each drawn item's content. */\nexport type TimelineSlots<T = unknown> = SlotsType<{ readonly item: { readonly item: Item<T> } }>;\n\n/** A handler prop for every event — `onItemMoved`, `onReady`, … — its payload typed by the items' data. */\nexport type TimelineListeners<T = unknown> = { readonly [K in keyof TimelineEmits<T> & string as `on${Capitalize<K>}`]?: TimelineEmits<T>[K] };\n\n/**\n * The component's type, generic over the items' data: every prop, every\n * handler and the `#item` slot typed by it, and a template ref's `timeline`.\n * Written out because Vue types the runtime `emits` list — the names — as\n * handlers of `(...args: any[]) => any`, and the options' slots as `unknown`.\n */\nexport type TimelineComponent = new <T = unknown>(\n  props: TimelineProps<T> & TimelineListeners<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps,\n) => CreateComponentPublicInstanceWithMixins<\n  TimelineProps<T> & TimelineListeners<T>,\n  { readonly timeline: TimelineInstance<T> | null },\n  Record<never, never>,\n  Record<never, never>,\n  Record<never, never>,\n  ComponentOptionsMixin,\n  ComponentOptionsMixin,\n  TimelineEmits<T>,\n  PublicProps,\n  Record<never, never>,\n  false,\n  Record<never, never>,\n  TimelineSlots<T>\n>;\n\n/** An item, as the element's types name it (the adapter depends on the element alone). */\ntype Item<T> = ItemSlot<T>[\"item\"];\n\n/**\n * A prop that may be written as a bare attribute (`<Timeline lane-headers />`)\n * is a boolean first: Vue reads the empty string as `true` for it. The rest\n * take any value, and an absent one is `undefined` — not in the\n * configuration, so the instance's default holds.\n */\nconst ANY = { type: null, default: undefined } as const;\nconst FLAG = { type: Boolean, default: undefined } as const;\nconst PROPS: { readonly [K in keyof TimelineProps]-?: { readonly type: unknown; readonly default: undefined } } = {\n  items: ANY,\n  lanes: ANY,\n  groups: ANY,\n  template: ANY,\n  templateOptions: ANY,\n  slots: { type: [Boolean, Function], default: undefined },\n  gantt: ANY,\n  resources: ANY,\n  resourceOptions: ANY,\n  defaultDomain: ANY,\n  limits: ANY,\n  orientation: ANY,\n  breakpoint: ANY,\n  density: ANY,\n  metrics: ANY,\n  packMode: ANY,\n  theme: ANY,\n  locale: ANY,\n  timeZone: ANY,\n  formatTick: ANY,\n  axisContext: FLAG,\n  touchAction: ANY,\n  maxLabels: ANY,\n  labelOverflow: ANY,\n  ariaLabel: ANY,\n  decorations: ANY,\n  cluster: { type: [Boolean, Object], default: undefined },\n  hooks: ANY,\n  height: ANY,\n  interactions: ANY,\n  editing: ANY,\n  defaultSelectedIds: ANY,\n  instanceId: ANY,\n  nonce: ANY,\n  measureText: ANY,\n  sceneSpace: { type: [Boolean, String], default: undefined },\n  hiddenDates: ANY,\n  timeBars: ANY,\n  timeBarOptions: ANY,\n  rolling: { type: [Boolean, Object], default: undefined },\n  zoomPresets: { type: [Boolean, Array], default: undefined },\n  minimap: { type: [Boolean, Object], default: undefined },\n  rangeSelect: { type: [Boolean, Object], default: undefined },\n  laneHeaders: FLAG,\n  tooltip: { type: [Boolean, Function], default: undefined },\n  direction: ANY,\n  strings: ANY,\n  calendar: ANY,\n  ssrWidth: { type: Number, default: undefined },\n};\n\n/** Where the view and the selection start, and the server's width: said once, not configuration that changes. */\nconst OWN = new Set([\"ssrWidth\", \"defaultDomain\", \"defaultSelectedIds\"]);\n\n/** `useId` gives `v-0` or `v:0`; a stylesheet scope wants a plain name. */\nconst scopeOf = (id: string): string => `tl${id.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n/**\n * The configuration part of the props: the ones given, as plain values. A\n * reactive array or object the host passes is Vue's proxy of it; the\n * instance holds the object itself, so its identity is the host's and the\n * frames do not go through the proxy.\n */\nfunction configOf(props: Record<string, unknown>, scope: string): Record<string, unknown> {\n  const config: Record<string, unknown> = {};\n  for (const key of Object.keys(PROPS)) {\n    const value = props[key];\n    if (!OWN.has(key) && value !== undefined) config[key] = toRaw(value);\n  }\n  // Light DOM: two timelines on one page must not share one stylesheet.\n  if (config.instanceId === undefined) config.instanceId = scope;\n  return config;\n}\n\n/** The keys whose values are not the same object: an unchanged `items` array must not look like new data. */\nfunction changedOf(before: Record<string, unknown>, next: Record<string, unknown>): Record<string, unknown> | undefined {\n  const changed: Record<string, unknown> = {};\n  let any = false;\n  for (const key of new Set([...Object.keys(before), ...Object.keys(next)])) {\n    if (key !== \"__proto__\" && before[key] !== next[key]) {\n      changed[key] = next[key];\n      any = true;\n    }\n  }\n  return any ? changed : undefined;\n}\n\n/**\n * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,\n * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event\n * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over\n * the live instance; a template ref's `timeline` is the same instance.\n * `class`, `style`, `id` and the rest of the attributes go on the box.\n *\n * The `#item` slot (`<template #item=\"{ item }\">`) is each item's content\n * as Vue, teleported into the box over the item (`slots`): only the items\n * drawn have one. The content is a picture — the pointer and the keyboard\n * act on the item, and its `label` stays its accessible name. Needs the\n * `/items` plugin, as `template` does.\n */\nexport const Timeline: TimelineComponent = defineComponent(\n  <T = unknown>(props: TimelineProps<T>, { emit, expose, slots }: SetupContext<TimelineEmits<T>, TimelineSlots>) => {\n    // Vue 3.5.0 types useId() as possibly undefined (outside a setup); here it is in one.\n    const scope = scopeOf(useId() ?? \"\");\n    const container = ref<HTMLDivElement | null>(null);\n    const timeline = shallowRef<TimelineInstance<T> | null>(null);\n    const drawn = shallowRef<ReadonlyMap<string, ItemSlot<T>>>(new Map());\n    // With an `#item` slot every item has a box, unless `slots` picks.\n    const configNow = (): Record<string, unknown> => {\n      const config = configOf(props as Record<string, unknown>, scope);\n      if (slots.item !== undefined && config.slots === undefined) config.slots = true;\n      return config;\n    };\n    let applied = configNow();\n    const initial: Record<string, unknown> = {\n      ...applied,\n      ...(props.defaultDomain === undefined ? {} : { domain: toRaw(props.defaultDomain) }),\n      ...(props.defaultSelectedIds === undefined ? {} : { selectedIds: toRaw(props.defaultSelectedIds) }),\n    };\n    // The server's drawing, computed once — on the server only: Vue's\n    // server renderer is what provides an SSR context.\n    const html =\n      inject(ssrContextKey, null) !== null\n        ? (() => {\n            const frame = renderTimelineSvg(initial as TimelineConfig<T>, props.ssrWidth === undefined ? {} : { width: props.ssrWidth });\n            return frame.svg + frame.groups;\n          })()\n        : undefined;\n    let stops: (() => void)[] = [];\n\n    onMounted(() => {\n      const instance = createTimeline<T>(container.value as HTMLDivElement, { ...initial, ...applied } as TimelineConfig<T>, { hydrate: true });\n      stops = TIMELINE_EVENTS.map((type) => instance.on(type, (payload) => forward(emit, type, payload)));\n      // Vue renders the teleports in its own flush, a microtask after the\n      // frame that drew the boxes: before the browser paints it.\n      stops.push(instance.on(\"slotsChanged\", ({ slots: next }) => (drawn.value = next)));\n      drawn.value = instance.slots;\n      timeline.value = instance;\n      emit(\"ready\", instance);\n    });\n\n    // Hand the instance what changed, and only that.\n    onUpdated(() => {\n      const next = configNow();\n      const changed = changedOf(applied, next);\n      applied = next;\n      if (changed !== undefined) timeline.value?.update(changed as TimelineUpdate<T>);\n    });\n\n    onBeforeUnmount(() => {\n      for (const stop of stops) stop();\n      stops = [];\n      timeline.value?.destroy();\n      timeline.value = null;\n      emit(\"ready\", null);\n    });\n\n    expose({ timeline });\n\n    return () => {\n      const height = props.height ?? DEFAULT_HEIGHT;\n      const item = slots.item;\n      const teleports = item === undefined ? [] : [...drawn.value].map(([id, slot]) => h(Teleport, { key: id, to: slot.element }, item({ item: slot.item })));\n      // The teleports are the box's children, as anchors: one root, so the\n      // server's markup stays the box alone. Without a teleport the box has\n      // no children for Vue — on the server it has the drawing, and while\n      // hydrating Vue must not compare the instance's nodes with any. The\n      // host's class, style and attributes fall through onto the box.\n      return h(\n        \"div\",\n        {\n          ref: container,\n          style: { position: \"relative\", overflow: \"hidden\", height: `${String(height)}px` },\n          \"data-tl-vue\": \"\",\n          ...(html === undefined ? {} : { innerHTML: html }),\n        },\n        html === undefined && teleports.length > 0 ? teleports : undefined,\n      );\n    };\n  },\n  {\n    name: \"TemporeumTimeline\",\n    // The runtime declaration; the types are the setup function's, generic over the items' data.\n    props: PROPS as never,\n    emits: [...TIMELINE_EVENTS, \"ready\"],\n    slots: Object as TimelineSlots,\n  },\n) as unknown as TimelineComponent;\n\n/** One instance event, emitted under its own name: the payload is that event's. */\nfunction forward<T, K extends TimelineInstanceEventName>(emit: SetupContext<TimelineEmits<T>>[\"emit\"], type: K, payload: TimelineInstanceEventMap<T>[K]): void {\n  (emit as (type: K, payload: TimelineInstanceEventMap<T>[K]) => void)(type, payload);\n}\n\n/**\n * Subscribe to the part of the instance's state a component renders.\n *\n * The ref changes when `selector`'s result changes (by `isEqual`,\n * `Object.is` by default) — and at most once per drawn frame, because the\n * store notifies at most once per frame. `undefined` until there is an\n * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)\n * or the instance itself.\n */\nexport function useTimelineState<T, S>(\n  timeline: MaybeRefOrGetter<TimelineInstance<T> | null | undefined>,\n  selector: (snapshot: TimelineSnapshot) => S,\n  isEqual: (a: S, b: S) => boolean = Object.is,\n): Readonly<ShallowRef<S | undefined>> {\n  const state = shallowRef<S | undefined>(undefined);\n  watch(\n    () => toValue(timeline),\n    (instance, _, onCleanup) => {\n      if (instance === null || instance === undefined) {\n        state.value = undefined;\n        return;\n      }\n      let seen: { snapshot: TimelineSnapshot; selected: S } | undefined;\n      const read = (): void => {\n        const snapshot = instance.getSnapshot();\n        if (seen !== undefined && seen.snapshot === snapshot) return;\n        const selected = selector(snapshot);\n        if (seen !== undefined && isEqual(seen.selected, selected)) {\n          seen = { snapshot, selected: seen.selected };\n          return;\n        }\n        seen = { snapshot, selected };\n        state.value = selected;\n      };\n      read();\n      onCleanup(instance.subscribe(read));\n    },\n    { immediate: true },\n  );\n  return state;\n}\n"],"names":["toRaw","defineComponent","useId","ref","shallowRef","inject","ssrContextKey","renderTimelineSvg","onMounted","createTimeline","TIMELINE_EVENTS","onUpdated","onBeforeUnmount","DEFAULT_HEIGHT","h","Teleport","watch","toValue"],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;AA+GH;;;;;AAKG;AACH,MAAM,GAAG,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAW;AACvD,MAAM,IAAI,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAW;AAC3D,MAAM,KAAK,GAAuG;AAChH,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,eAAe,EAAE,GAAG;AACpB,IAAA,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AACxD,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,eAAe,EAAE,GAAG;AACpB,IAAA,aAAa,EAAE,GAAG;AAClB,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,aAAa,EAAE,GAAG;AAClB,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AACxD,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,YAAY,EAAE,GAAG;AACjB,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,kBAAkB,EAAE,GAAG;AACvB,IAAA,UAAU,EAAE,GAAG;AACf,IAAA,KAAK,EAAE,GAAG;AACV,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AAC3D,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,cAAc,EAAE,GAAG;AACnB,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AACxD,IAAA,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AAC3D,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AACxD,IAAA,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AAC5D,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE;AAC1D,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;CAC/C;AAED;AACA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC,UAAU,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC;AAExE;AACA,MAAM,OAAO,GAAG,CAAC,EAAU,KAAa,CAAA,EAAA,EAAK,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,EAAE;AAEhF;;;;;AAKG;AACH,SAAS,QAAQ,CAAC,KAA8B,EAAE,KAAa,EAAA;IAC7D,MAAM,MAAM,GAA4B,EAAE;IAC1C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;QACxB,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,KAAK,KAAK,SAAS;YAAE,MAAM,CAAC,GAAG,CAAC,GAAGA,SAAK,CAAC,KAAK,CAAC;IACtE;;AAEA,IAAA,IAAI,MAAM,CAAC,UAAU,KAAK,SAAS;AAAE,QAAA,MAAM,CAAC,UAAU,GAAG,KAAK;AAC9D,IAAA,OAAO,MAAM;AACf;AAEA;AACA,SAAS,SAAS,CAAC,MAA+B,EAAE,IAA6B,EAAA;IAC/E,MAAM,OAAO,GAA4B,EAAE;IAC3C,IAAI,GAAG,GAAG,KAAK;IACf,KAAK,MAAM,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;AACzE,QAAA,IAAI,GAAG,KAAK,WAAW,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE;YACpD,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;YACxB,GAAG,GAAG,IAAI;QACZ;IACF;IACA,OAAO,GAAG,GAAG,OAAO,GAAG,SAAS;AAClC;AAEA;;;;;;;;;;;;AAYG;AACI,MAAM,QAAQ,GAAsBC,mBAAe,CACxD,CAAc,KAAuB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAiD,KAAI;;IAE/G,MAAM,KAAK,GAAG,OAAO,CAACC,SAAK,EAAE,IAAI,EAAE,CAAC;AACpC,IAAA,MAAM,SAAS,GAAGC,OAAG,CAAwB,IAAI,CAAC;AAClD,IAAA,MAAM,QAAQ,GAAGC,cAAU,CAA6B,IAAI,CAAC;IAC7D,MAAM,KAAK,GAAGA,cAAU,CAAmC,IAAI,GAAG,EAAE,CAAC;;IAErE,MAAM,SAAS,GAAG,MAA8B;QAC9C,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAgC,EAAE,KAAK,CAAC;QAChE,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,MAAM,CAAC,KAAK,GAAG,IAAI;AAC/E,QAAA,OAAO,MAAM;AACf,IAAA,CAAC;AACD,IAAA,IAAI,OAAO,GAAG,SAAS,EAAE;AACzB,IAAA,MAAM,OAAO,GAA4B;AACvC,QAAA,GAAG,OAAO;QACV,IAAI,KAAK,CAAC,aAAa,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,MAAM,EAAEJ,SAAK,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;QACpF,IAAI,KAAK,CAAC,kBAAkB,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,WAAW,EAAEA,SAAK,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE,CAAC;KACpG;;;IAGD,MAAM,IAAI,GACRK,UAAM,CAACC,iBAAa,EAAE,IAAI,CAAC,KAAK;UAC5B,CAAC,MAAK;YACJ,MAAM,KAAK,GAAGC,iCAAiB,CAAC,OAA4B,EAAE,KAAK,CAAC,QAAQ,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;AAC5H,YAAA,OAAO,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM;AACjC,QAAA,CAAC;UACD,SAAS;IACf,IAAI,KAAK,GAAmB,EAAE;IAE9BC,aAAS,CAAC,MAAK;QACb,MAAM,QAAQ,GAAGC,8BAAc,CAAI,SAAS,CAAC,KAAuB,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACzI,QAAA,KAAK,GAAGC,+BAAe,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;;;QAGnG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;AAClF,QAAA,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK;AAC5B,QAAA,QAAQ,CAAC,KAAK,GAAG,QAAQ;AACzB,QAAA,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;AACzB,IAAA,CAAC,CAAC;;IAGFC,aAAS,CAAC,MAAK;AACb,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC;QACxC,OAAO,GAAG,IAAI;QACd,IAAI,OAAO,KAAK,SAAS;AAAE,YAAA,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,OAA4B,CAAC;AACjF,IAAA,CAAC,CAAC;IAEFC,mBAAe,CAAC,MAAK;QACnB,KAAK,MAAM,IAAI,IAAI,KAAK;AAAE,YAAA,IAAI,EAAE;QAChC,KAAK,GAAG,EAAE;AACV,QAAA,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;AACzB,QAAA,QAAQ,CAAC,KAAK,GAAG,IAAI;AACrB,QAAA,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;AACrB,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;AAEpB,IAAA,OAAO,MAAK;AACV,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAIC,8BAAc;AAC7C,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI;QACvB,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,GAAG,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,KAAKC,KAAC,CAACC,YAAQ,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;;;;;;QAMvJ,OAAOD,KAAC,CACN,KAAK,EACL;AACE,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;AAClF,YAAA,aAAa,EAAE,EAAE;AACjB,YAAA,IAAI,IAAI,KAAK,SAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACnD,SAAA,EACD,IAAI,KAAK,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,SAAS,CACnE;AACH,IAAA,CAAC;AACH,CAAC,EACD;AACE,IAAA,IAAI,EAAE,mBAAmB;;AAEzB,IAAA,KAAK,EAAE,KAAc;AACrB,IAAA,KAAK,EAAE,CAAC,GAAGJ,+BAAe,EAAE,OAAO,CAAC;AACpC,IAAA,KAAK,EAAE,MAAuB;AAC/B,CAAA;AAGH;AACA,SAAS,OAAO,CAAyC,IAA4C,EAAE,IAAO,EAAE,OAAuC,EAAA;AACpJ,IAAA,IAAmE,CAAC,IAAI,EAAE,OAAO,CAAC;AACrF;AAEA;;;;;;;;AAQG;AACG,SAAU,gBAAgB,CAC9B,QAAkE,EAClE,QAA2C,EAC3C,OAAA,GAAmC,MAAM,CAAC,EAAE,EAAA;AAE5C,IAAA,MAAM,KAAK,GAAGN,cAAU,CAAgB,SAAS,CAAC;AAClD,IAAAY,SAAK,CACH,MAAMC,WAAO,CAAC,QAAQ,CAAC,EACvB,CAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,KAAI;QACzB,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC/C,YAAA,KAAK,CAAC,KAAK,GAAG,SAAS;YACvB;QACF;AACA,QAAA,IAAI,IAA6D;QACjE,MAAM,IAAI,GAAG,MAAW;AACtB,YAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,WAAW,EAAE;YACvC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ;gBAAE;AACtD,YAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC;AACnC,YAAA,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBAC1D,IAAI,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;gBAC5C;YACF;AACA,YAAA,IAAI,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE;AAC7B,YAAA,KAAK,CAAC,KAAK,GAAG,QAAQ;AACxB,QAAA,CAAC;AACD,QAAA,IAAI,EAAE;QACN,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AACrC,IAAA,CAAC,EACD,EAAE,SAAS,EAAE,IAAI,EAAE,CACpB;AACD,IAAA,OAAO,KAAK;AACd;;;;;;;;;;;"}

package/dist/index.d.cts

@@ -0,0 +1,90 @@
+/**
+ * `@temporeum/timeline-vue` — the timeline as a Vue component.
+ *
+ * The component is a shell around the shared instance (`createTimeline`,
+ * from `@temporeum/timeline-element`), as the React one is: it creates the
+ * instance once, on mount, hands it every attribute that changed, and lets
+ * go of it on unmount. It does not re-render to draw. A pan of a hundred
+ * pointer events is drawn by the instance, imperatively, and Vue does not
+ * hear of it — its reactivity is the wrong tool for sixty frames a second of
+ * SVG attributes.
+ *
+ * What a component *does* render from is the instance's store.
+ * `useTimelineState` subscribes to it with a selector and gives a shallow
+ * ref: one that shows the selection changes when the selection changes and
+ * at no other time; one that shows the visible range changes once per drawn
+ * frame at most, however many events the frame held.
+ *
+ * **Server rendering.** On the server the component prints the same drawing
+ * the browser would draw (the core is DOM-free), so the page shows a
+ * timeline before the bundle loads; on hydration the instance takes those
+ * nodes over. The drawing goes into the server's markup only: Vue 3.5
+ * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`
+ * written by script is not the parser's — the instance would draw a second
+ * timeline. On the client the node has no children for Vue to compare, so
+ * Vue leaves alone what the parser built.
+ */
+import type { ItemSlot, Timeline as TimelineInstance, TimelineComponentConfig, TimelineInstanceEventMap, TimelineInstanceEventName, TimelineSnapshot } from "@temporeum/timeline-element";
+import type { AllowedComponentProps, ComponentCustomProps, ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, MaybeRefOrGetter, PublicProps, ShallowRef, SlotsType, VNodeProps } from "vue";
+export type { TimelineComponentConfig, TimelineConfig, TimelineSnapshot } from "@temporeum/timeline-element";
+/** The element's plugin registry, from the adapter too: an app that installs only the adapter still registers the plugins its configuration needs. */
+export type { ClusterOpenedPayload, Command, CommandPayload, DensityChangedPayload, Domain, Group, GroupMovedPayload, GroupToggledPayload, HoverPayload, InputSkippedPayload, Item, ItemEventPayload, ItemMovedPayload, ItemPatch, ItemResizedPayload, ItemsAddedPayload, ItemsChangedPayload, ItemsRemovedPayload, JumpRequestPayload, Lane, LayoutChangedPayload, OrientationChangedPayload, SelectionChangedPayload, SlotsChangedPayload, TimeBar, TimeBarMovedPayload, TimelineInstanceEventMap, TimelineInstanceEventName, TimeMs, TimeRange, ViewportChangedPayload, } from "@temporeum/timeline-element";
+export { hasPlugin, registerPlugin } from "@temporeum/timeline-element";
+export type { PluginName, TimelinePlugin } from "@temporeum/timeline-element";
+export type { TimelineInstance };
+/** What the component emits: every instance event, by its own name, and `ready` with the instance (`null` on unmount). */
+export type TimelineEmits<T = unknown> = {
+    readonly [K in TimelineInstanceEventName]: (payload: TimelineInstanceEventMap<T>[K]) => void;
+} & {
+    readonly ready: (timeline: TimelineInstance<T> | null) => void;
+};
+/** The component's props: every {@link TimelineComponentConfig} field, and the width the server draws at. */
+export type TimelineProps<T = unknown> = TimelineComponentConfig<T> & {
+    /** Width the server draws at; the client redraws at the real one. */
+    readonly ssrWidth?: number | undefined;
+};
+/** The `#item` slot: each drawn item's content. */
+export type TimelineSlots<T = unknown> = SlotsType<{
+    readonly item: {
+        readonly item: Item<T>;
+    };
+}>;
+/** A handler prop for every event — `onItemMoved`, `onReady`, … — its payload typed by the items' data. */
+export type TimelineListeners<T = unknown> = {
+    readonly [K in keyof TimelineEmits<T> & string as `on${Capitalize<K>}`]?: TimelineEmits<T>[K];
+};
+/**
+ * The component's type, generic over the items' data: every prop, every
+ * handler and the `#item` slot typed by it, and a template ref's `timeline`.
+ * Written out because Vue types the runtime `emits` list — the names — as
+ * handlers of `(...args: any[]) => any`, and the options' slots as `unknown`.
+ */
+export type TimelineComponent = new <T = unknown>(props: TimelineProps<T> & TimelineListeners<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<TimelineProps<T> & TimelineListeners<T>, {
+    readonly timeline: TimelineInstance<T> | null;
+}, Record<never, never>, Record<never, never>, Record<never, never>, ComponentOptionsMixin, ComponentOptionsMixin, TimelineEmits<T>, PublicProps, Record<never, never>, false, Record<never, never>, TimelineSlots<T>>;
+/** An item, as the element's types name it (the adapter depends on the element alone). */
+type Item<T> = ItemSlot<T>["item"];
+/**
+ * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,
+ * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event
+ * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over
+ * the live instance; a template ref's `timeline` is the same instance.
+ * `class`, `style`, `id` and the rest of the attributes go on the box.
+ *
+ * The `#item` slot (`<template #item="{ item }">`) is each item's content
+ * as Vue, teleported into the box over the item (`slots`): only the items
+ * drawn have one. The content is a picture — the pointer and the keyboard
+ * act on the item, and its `label` stays its accessible name. Needs the
+ * `/items` plugin, as `template` does.
+ */
+export declare const Timeline: TimelineComponent;
+/**
+ * Subscribe to the part of the instance's state a component renders.
+ *
+ * The ref changes when `selector`'s result changes (by `isEqual`,
+ * `Object.is` by default) — and at most once per drawn frame, because the
+ * store notifies at most once per frame. `undefined` until there is an
+ * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)
+ * or the instance itself.
+ */
+export declare function useTimelineState<T, S>(timeline: MaybeRefOrGetter<TimelineInstance<T> | null | undefined>, selector: (snapshot: TimelineSnapshot) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S | undefined>>;

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * `@temporeum/timeline-vue` — the timeline as a Vue component.
+ *
+ * The component is a shell around the shared instance (`createTimeline`,
+ * from `@temporeum/timeline-element`), as the React one is: it creates the
+ * instance once, on mount, hands it every attribute that changed, and lets
+ * go of it on unmount. It does not re-render to draw. A pan of a hundred
+ * pointer events is drawn by the instance, imperatively, and Vue does not
+ * hear of it — its reactivity is the wrong tool for sixty frames a second of
+ * SVG attributes.
+ *
+ * What a component *does* render from is the instance's store.
+ * `useTimelineState` subscribes to it with a selector and gives a shallow
+ * ref: one that shows the selection changes when the selection changes and
+ * at no other time; one that shows the visible range changes once per drawn
+ * frame at most, however many events the frame held.
+ *
+ * **Server rendering.** On the server the component prints the same drawing
+ * the browser would draw (the core is DOM-free), so the page shows a
+ * timeline before the bundle loads; on hydration the instance takes those
+ * nodes over. The drawing goes into the server's markup only: Vue 3.5
+ * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`
+ * written by script is not the parser's — the instance would draw a second
+ * timeline. On the client the node has no children for Vue to compare, so
+ * Vue leaves alone what the parser built.
+ */
+import type { ItemSlot, Timeline as TimelineInstance, TimelineComponentConfig, TimelineInstanceEventMap, TimelineInstanceEventName, TimelineSnapshot } from "@temporeum/timeline-element";
+import type { AllowedComponentProps, ComponentCustomProps, ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, MaybeRefOrGetter, PublicProps, ShallowRef, SlotsType, VNodeProps } from "vue";
+export type { TimelineComponentConfig, TimelineConfig, TimelineSnapshot } from "@temporeum/timeline-element";
+/** The element's plugin registry, from the adapter too: an app that installs only the adapter still registers the plugins its configuration needs. */
+export type { ClusterOpenedPayload, Command, CommandPayload, DensityChangedPayload, Domain, Group, GroupMovedPayload, GroupToggledPayload, HoverPayload, InputSkippedPayload, Item, ItemEventPayload, ItemMovedPayload, ItemPatch, ItemResizedPayload, ItemsAddedPayload, ItemsChangedPayload, ItemsRemovedPayload, JumpRequestPayload, Lane, LayoutChangedPayload, OrientationChangedPayload, SelectionChangedPayload, SlotsChangedPayload, TimeBar, TimeBarMovedPayload, TimelineInstanceEventMap, TimelineInstanceEventName, TimeMs, TimeRange, ViewportChangedPayload, } from "@temporeum/timeline-element";
+export { hasPlugin, registerPlugin } from "@temporeum/timeline-element";
+export type { PluginName, TimelinePlugin } from "@temporeum/timeline-element";
+export type { TimelineInstance };
+/** What the component emits: every instance event, by its own name, and `ready` with the instance (`null` on unmount). */
+export type TimelineEmits<T = unknown> = {
+    readonly [K in TimelineInstanceEventName]: (payload: TimelineInstanceEventMap<T>[K]) => void;
+} & {
+    readonly ready: (timeline: TimelineInstance<T> | null) => void;
+};
+/** The component's props: every {@link TimelineComponentConfig} field, and the width the server draws at. */
+export type TimelineProps<T = unknown> = TimelineComponentConfig<T> & {
+    /** Width the server draws at; the client redraws at the real one. */
+    readonly ssrWidth?: number | undefined;
+};
+/** The `#item` slot: each drawn item's content. */
+export type TimelineSlots<T = unknown> = SlotsType<{
+    readonly item: {
+        readonly item: Item<T>;
+    };
+}>;
+/** A handler prop for every event — `onItemMoved`, `onReady`, … — its payload typed by the items' data. */
+export type TimelineListeners<T = unknown> = {
+    readonly [K in keyof TimelineEmits<T> & string as `on${Capitalize<K>}`]?: TimelineEmits<T>[K];
+};
+/**
+ * The component's type, generic over the items' data: every prop, every
+ * handler and the `#item` slot typed by it, and a template ref's `timeline`.
+ * Written out because Vue types the runtime `emits` list — the names — as
+ * handlers of `(...args: any[]) => any`, and the options' slots as `unknown`.
+ */
+export type TimelineComponent = new <T = unknown>(props: TimelineProps<T> & TimelineListeners<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<TimelineProps<T> & TimelineListeners<T>, {
+    readonly timeline: TimelineInstance<T> | null;
+}, Record<never, never>, Record<never, never>, Record<never, never>, ComponentOptionsMixin, ComponentOptionsMixin, TimelineEmits<T>, PublicProps, Record<never, never>, false, Record<never, never>, TimelineSlots<T>>;
+/** An item, as the element's types name it (the adapter depends on the element alone). */
+type Item<T> = ItemSlot<T>["item"];
+/**
+ * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,
+ * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event
+ * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over
+ * the live instance; a template ref's `timeline` is the same instance.
+ * `class`, `style`, `id` and the rest of the attributes go on the box.
+ *
+ * The `#item` slot (`<template #item="{ item }">`) is each item's content
+ * as Vue, teleported into the box over the item (`slots`): only the items
+ * drawn have one. The content is a picture — the pointer and the keyboard
+ * act on the item, and its `label` stays its accessible name. Needs the
+ * `/items` plugin, as `template` does.
+ */
+export declare const Timeline: TimelineComponent;
+/**
+ * Subscribe to the part of the instance's state a component renders.
+ *
+ * The ref changes when `selector`'s result changes (by `isEqual`,
+ * `Object.is` by default) — and at most once per drawn frame, because the
+ * store notifies at most once per frame. `undefined` until there is an
+ * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)
+ * or the instance itself.
+ */
+export declare function useTimelineState<T, S>(timeline: MaybeRefOrGetter<TimelineInstance<T> | null | undefined>, selector: (snapshot: TimelineSnapshot) => S, isEqual?: (a: S, b: S) => boolean): Readonly<ShallowRef<S | undefined>>;

package/dist/index.mjs

@@ -0,0 +1,256 @@
+/*! @temporeum/timeline-vue | MIT */
+import { renderTimelineSvg, createTimeline, TIMELINE_EVENTS, DEFAULT_HEIGHT } from '@temporeum/timeline-element';
+export { hasPlugin, registerPlugin } from '@temporeum/timeline-element';
+import { defineComponent, useId, ref, shallowRef, toRaw, inject, ssrContextKey, onMounted, onUpdated, onBeforeUnmount, h, Teleport, watch, toValue } from 'vue';
+
+/**
+ * `@temporeum/timeline-vue` — the timeline as a Vue component.
+ *
+ * The component is a shell around the shared instance (`createTimeline`,
+ * from `@temporeum/timeline-element`), as the React one is: it creates the
+ * instance once, on mount, hands it every attribute that changed, and lets
+ * go of it on unmount. It does not re-render to draw. A pan of a hundred
+ * pointer events is drawn by the instance, imperatively, and Vue does not
+ * hear of it — its reactivity is the wrong tool for sixty frames a second of
+ * SVG attributes.
+ *
+ * What a component *does* render from is the instance's store.
+ * `useTimelineState` subscribes to it with a selector and gives a shallow
+ * ref: one that shows the selection changes when the selection changes and
+ * at no other time; one that shows the visible range changes once per drawn
+ * frame at most, however many events the frame held.
+ *
+ * **Server rendering.** On the server the component prints the same drawing
+ * the browser would draw (the core is DOM-free), so the page shows a
+ * timeline before the bundle loads; on hydration the instance takes those
+ * nodes over. The drawing goes into the server's markup only: Vue 3.5
+ * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`
+ * written by script is not the parser's — the instance would draw a second
+ * timeline. On the client the node has no children for Vue to compare, so
+ * Vue leaves alone what the parser built.
+ */
+/**
+ * A prop that may be written as a bare attribute (`<Timeline lane-headers />`)
+ * is a boolean first: Vue reads the empty string as `true` for it. The rest
+ * take any value, and an absent one is `undefined` — not in the
+ * configuration, so the instance's default holds.
+ */
+const ANY = { type: null, default: undefined };
+const FLAG = { type: Boolean, default: undefined };
+const PROPS = {
+    items: ANY,
+    lanes: ANY,
+    groups: ANY,
+    template: ANY,
+    templateOptions: ANY,
+    slots: { type: [Boolean, Function], default: undefined },
+    gantt: ANY,
+    resources: ANY,
+    resourceOptions: ANY,
+    defaultDomain: ANY,
+    limits: ANY,
+    orientation: ANY,
+    breakpoint: ANY,
+    density: ANY,
+    metrics: ANY,
+    packMode: ANY,
+    theme: ANY,
+    locale: ANY,
+    timeZone: ANY,
+    formatTick: ANY,
+    axisContext: FLAG,
+    touchAction: ANY,
+    maxLabels: ANY,
+    labelOverflow: ANY,
+    ariaLabel: ANY,
+    decorations: ANY,
+    cluster: { type: [Boolean, Object], default: undefined },
+    hooks: ANY,
+    height: ANY,
+    interactions: ANY,
+    editing: ANY,
+    defaultSelectedIds: ANY,
+    instanceId: ANY,
+    nonce: ANY,
+    measureText: ANY,
+    sceneSpace: { type: [Boolean, String], default: undefined },
+    hiddenDates: ANY,
+    timeBars: ANY,
+    timeBarOptions: ANY,
+    rolling: { type: [Boolean, Object], default: undefined },
+    zoomPresets: { type: [Boolean, Array], default: undefined },
+    minimap: { type: [Boolean, Object], default: undefined },
+    rangeSelect: { type: [Boolean, Object], default: undefined },
+    laneHeaders: FLAG,
+    tooltip: { type: [Boolean, Function], default: undefined },
+    direction: ANY,
+    strings: ANY,
+    calendar: ANY,
+    ssrWidth: { type: Number, default: undefined },
+};
+/** Where the view and the selection start, and the server's width: said once, not configuration that changes. */
+const OWN = new Set(["ssrWidth", "defaultDomain", "defaultSelectedIds"]);
+/** `useId` gives `v-0` or `v:0`; a stylesheet scope wants a plain name. */
+const scopeOf = (id) => `tl${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+/**
+ * The configuration part of the props: the ones given, as plain values. A
+ * reactive array or object the host passes is Vue's proxy of it; the
+ * instance holds the object itself, so its identity is the host's and the
+ * frames do not go through the proxy.
+ */
+function configOf(props, scope) {
+    const config = {};
+    for (const key of Object.keys(PROPS)) {
+        const value = props[key];
+        if (!OWN.has(key) && value !== undefined)
+            config[key] = toRaw(value);
+    }
+    // Light DOM: two timelines on one page must not share one stylesheet.
+    if (config.instanceId === undefined)
+        config.instanceId = scope;
+    return config;
+}
+/** The keys whose values are not the same object: an unchanged `items` array must not look like new data. */
+function changedOf(before, next) {
+    const changed = {};
+    let any = false;
+    for (const key of new Set([...Object.keys(before), ...Object.keys(next)])) {
+        if (key !== "__proto__" && before[key] !== next[key]) {
+            changed[key] = next[key];
+            any = true;
+        }
+    }
+    return any ? changed : undefined;
+}
+/**
+ * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,
+ * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event
+ * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over
+ * the live instance; a template ref's `timeline` is the same instance.
+ * `class`, `style`, `id` and the rest of the attributes go on the box.
+ *
+ * The `#item` slot (`<template #item="{ item }">`) is each item's content
+ * as Vue, teleported into the box over the item (`slots`): only the items
+ * drawn have one. The content is a picture — the pointer and the keyboard
+ * act on the item, and its `label` stays its accessible name. Needs the
+ * `/items` plugin, as `template` does.
+ */
+const Timeline = defineComponent((props, { emit, expose, slots }) => {
+    // Vue 3.5.0 types useId() as possibly undefined (outside a setup); here it is in one.
+    const scope = scopeOf(useId() ?? "");
+    const container = ref(null);
+    const timeline = shallowRef(null);
+    const drawn = shallowRef(new Map());
+    // With an `#item` slot every item has a box, unless `slots` picks.
+    const configNow = () => {
+        const config = configOf(props, scope);
+        if (slots.item !== undefined && config.slots === undefined)
+            config.slots = true;
+        return config;
+    };
+    let applied = configNow();
+    const initial = {
+        ...applied,
+        ...(props.defaultDomain === undefined ? {} : { domain: toRaw(props.defaultDomain) }),
+        ...(props.defaultSelectedIds === undefined ? {} : { selectedIds: toRaw(props.defaultSelectedIds) }),
+    };
+    // The server's drawing, computed once — on the server only: Vue's
+    // server renderer is what provides an SSR context.
+    const html = inject(ssrContextKey, null) !== null
+        ? (() => {
+            const frame = renderTimelineSvg(initial, props.ssrWidth === undefined ? {} : { width: props.ssrWidth });
+            return frame.svg + frame.groups;
+        })()
+        : undefined;
+    let stops = [];
+    onMounted(() => {
+        const instance = createTimeline(container.value, { ...initial, ...applied }, { hydrate: true });
+        stops = TIMELINE_EVENTS.map((type) => instance.on(type, (payload) => forward(emit, type, payload)));
+        // Vue renders the teleports in its own flush, a microtask after the
+        // frame that drew the boxes: before the browser paints it.
+        stops.push(instance.on("slotsChanged", ({ slots: next }) => (drawn.value = next)));
+        drawn.value = instance.slots;
+        timeline.value = instance;
+        emit("ready", instance);
+    });
+    // Hand the instance what changed, and only that.
+    onUpdated(() => {
+        const next = configNow();
+        const changed = changedOf(applied, next);
+        applied = next;
+        if (changed !== undefined)
+            timeline.value?.update(changed);
+    });
+    onBeforeUnmount(() => {
+        for (const stop of stops)
+            stop();
+        stops = [];
+        timeline.value?.destroy();
+        timeline.value = null;
+        emit("ready", null);
+    });
+    expose({ timeline });
+    return () => {
+        const height = props.height ?? DEFAULT_HEIGHT;
+        const item = slots.item;
+        const teleports = item === undefined ? [] : [...drawn.value].map(([id, slot]) => h(Teleport, { key: id, to: slot.element }, item({ item: slot.item })));
+        // The teleports are the box's children, as anchors: one root, so the
+        // server's markup stays the box alone. Without a teleport the box has
+        // no children for Vue — on the server it has the drawing, and while
+        // hydrating Vue must not compare the instance's nodes with any. The
+        // host's class, style and attributes fall through onto the box.
+        return h("div", {
+            ref: container,
+            style: { position: "relative", overflow: "hidden", height: `${String(height)}px` },
+            "data-tl-vue": "",
+            ...(html === undefined ? {} : { innerHTML: html }),
+        }, html === undefined && teleports.length > 0 ? teleports : undefined);
+    };
+}, {
+    name: "TemporeumTimeline",
+    // The runtime declaration; the types are the setup function's, generic over the items' data.
+    props: PROPS,
+    emits: [...TIMELINE_EVENTS, "ready"],
+    slots: Object,
+});
+/** One instance event, emitted under its own name: the payload is that event's. */
+function forward(emit, type, payload) {
+    emit(type, payload);
+}
+/**
+ * Subscribe to the part of the instance's state a component renders.
+ *
+ * The ref changes when `selector`'s result changes (by `isEqual`,
+ * `Object.is` by default) — and at most once per drawn frame, because the
+ * store notifies at most once per frame. `undefined` until there is an
+ * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)
+ * or the instance itself.
+ */
+function useTimelineState(timeline, selector, isEqual = Object.is) {
+    const state = shallowRef(undefined);
+    watch(() => toValue(timeline), (instance, _, onCleanup) => {
+        if (instance === null || instance === undefined) {
+            state.value = undefined;
+            return;
+        }
+        let seen;
+        const read = () => {
+            const snapshot = instance.getSnapshot();
+            if (seen !== undefined && seen.snapshot === snapshot)
+                return;
+            const selected = selector(snapshot);
+            if (seen !== undefined && isEqual(seen.selected, selected)) {
+                seen = { snapshot, selected: seen.selected };
+                return;
+            }
+            seen = { snapshot, selected };
+            state.value = selected;
+        };
+        read();
+        onCleanup(instance.subscribe(read));
+    }, { immediate: true });
+    return state;
+}
+
+export { Timeline, useTimelineState };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["/**\n * `@temporeum/timeline-vue` — the timeline as a Vue component.\n *\n * The component is a shell around the shared instance (`createTimeline`,\n * from `@temporeum/timeline-element`), as the React one is: it creates the\n * instance once, on mount, hands it every attribute that changed, and lets\n * go of it on unmount. It does not re-render to draw. A pan of a hundred\n * pointer events is drawn by the instance, imperatively, and Vue does not\n * hear of it — its reactivity is the wrong tool for sixty frames a second of\n * SVG attributes.\n *\n * What a component *does* render from is the instance's store.\n * `useTimelineState` subscribes to it with a selector and gives a shallow\n * ref: one that shows the selection changes when the selection changes and\n * at no other time; one that shows the visible range changes once per drawn\n * frame at most, however many events the frame held.\n *\n * **Server rendering.** On the server the component prints the same drawing\n * the browser would draw (the core is DOM-free), so the page shows a\n * timeline before the bundle loads; on hydration the instance takes those\n * nodes over. The drawing goes into the server's markup only: Vue 3.5\n * writes a dynamic `innerHTML` again while hydrating, and an `innerHTML`\n * written by script is not the parser's — the instance would draw a second\n * timeline. On the client the node has no children for Vue to compare, so\n * Vue leaves alone what the parser built.\n */\n\nimport { createTimeline, DEFAULT_HEIGHT, renderTimelineSvg, TIMELINE_EVENTS } from \"@temporeum/timeline-element\";\nimport type {\n  ItemSlot,\n  Timeline as TimelineInstance,\n  TimelineComponentConfig,\n  TimelineConfig,\n  TimelineInstanceEventMap,\n  TimelineInstanceEventName,\n  TimelineSnapshot,\n  TimelineUpdate,\n} from \"@temporeum/timeline-element\";\nimport { defineComponent, h, inject, onBeforeUnmount, onMounted, onUpdated, ref, shallowRef, ssrContextKey, Teleport, toRaw, toValue, useId, watch } from \"vue\";\nimport type {\n  AllowedComponentProps,\n  ComponentCustomProps,\n  ComponentOptionsMixin,\n  CreateComponentPublicInstanceWithMixins,\n  MaybeRefOrGetter,\n  PublicProps,\n  SetupContext,\n  ShallowRef,\n  SlotsType,\n  VNodeProps,\n} from \"vue\";\n\nexport type { TimelineComponentConfig, TimelineConfig, TimelineSnapshot } from \"@temporeum/timeline-element\";\n/** The element's plugin registry, from the adapter too: an app that installs only the adapter still registers the plugins its configuration needs. */\n// The data and the event payloads, handed on: one install types an app.\nexport type {\n  ClusterOpenedPayload,\n  Command,\n  CommandPayload,\n  DensityChangedPayload,\n  Domain,\n  Group,\n  GroupMovedPayload,\n  GroupToggledPayload,\n  HoverPayload,\n  InputSkippedPayload,\n  Item,\n  ItemEventPayload,\n  ItemMovedPayload,\n  ItemPatch,\n  ItemResizedPayload,\n  ItemsAddedPayload,\n  ItemsChangedPayload,\n  ItemsRemovedPayload,\n  JumpRequestPayload,\n  Lane,\n  LayoutChangedPayload,\n  OrientationChangedPayload,\n  SelectionChangedPayload,\n  SlotsChangedPayload,\n  TimeBar,\n  TimeBarMovedPayload,\n  TimelineInstanceEventMap,\n  TimelineInstanceEventName,\n  TimeMs,\n  TimeRange,\n  ViewportChangedPayload,\n} from \"@temporeum/timeline-element\";\nexport { hasPlugin, registerPlugin } from \"@temporeum/timeline-element\";\nexport type { PluginName, TimelinePlugin } from \"@temporeum/timeline-element\";\nexport type { TimelineInstance };\n\n/** What the component emits: every instance event, by its own name, and `ready` with the instance (`null` on unmount). */\nexport type TimelineEmits<T = unknown> = { readonly [K in TimelineInstanceEventName]: (payload: TimelineInstanceEventMap<T>[K]) => void } & {\n  readonly ready: (timeline: TimelineInstance<T> | null) => void;\n};\n\n/** The component's props: every {@link TimelineComponentConfig} field, and the width the server draws at. */\nexport type TimelineProps<T = unknown> = TimelineComponentConfig<T> & {\n  /** Width the server draws at; the client redraws at the real one. */\n  readonly ssrWidth?: number | undefined;\n};\n\n/** The `#item` slot: each drawn item's content. */\nexport type TimelineSlots<T = unknown> = SlotsType<{ readonly item: { readonly item: Item<T> } }>;\n\n/** A handler prop for every event — `onItemMoved`, `onReady`, … — its payload typed by the items' data. */\nexport type TimelineListeners<T = unknown> = { readonly [K in keyof TimelineEmits<T> & string as `on${Capitalize<K>}`]?: TimelineEmits<T>[K] };\n\n/**\n * The component's type, generic over the items' data: every prop, every\n * handler and the `#item` slot typed by it, and a template ref's `timeline`.\n * Written out because Vue types the runtime `emits` list — the names — as\n * handlers of `(...args: any[]) => any`, and the options' slots as `unknown`.\n */\nexport type TimelineComponent = new <T = unknown>(\n  props: TimelineProps<T> & TimelineListeners<T> & VNodeProps & AllowedComponentProps & ComponentCustomProps,\n) => CreateComponentPublicInstanceWithMixins<\n  TimelineProps<T> & TimelineListeners<T>,\n  { readonly timeline: TimelineInstance<T> | null },\n  Record<never, never>,\n  Record<never, never>,\n  Record<never, never>,\n  ComponentOptionsMixin,\n  ComponentOptionsMixin,\n  TimelineEmits<T>,\n  PublicProps,\n  Record<never, never>,\n  false,\n  Record<never, never>,\n  TimelineSlots<T>\n>;\n\n/** An item, as the element's types name it (the adapter depends on the element alone). */\ntype Item<T> = ItemSlot<T>[\"item\"];\n\n/**\n * A prop that may be written as a bare attribute (`<Timeline lane-headers />`)\n * is a boolean first: Vue reads the empty string as `true` for it. The rest\n * take any value, and an absent one is `undefined` — not in the\n * configuration, so the instance's default holds.\n */\nconst ANY = { type: null, default: undefined } as const;\nconst FLAG = { type: Boolean, default: undefined } as const;\nconst PROPS: { readonly [K in keyof TimelineProps]-?: { readonly type: unknown; readonly default: undefined } } = {\n  items: ANY,\n  lanes: ANY,\n  groups: ANY,\n  template: ANY,\n  templateOptions: ANY,\n  slots: { type: [Boolean, Function], default: undefined },\n  gantt: ANY,\n  resources: ANY,\n  resourceOptions: ANY,\n  defaultDomain: ANY,\n  limits: ANY,\n  orientation: ANY,\n  breakpoint: ANY,\n  density: ANY,\n  metrics: ANY,\n  packMode: ANY,\n  theme: ANY,\n  locale: ANY,\n  timeZone: ANY,\n  formatTick: ANY,\n  axisContext: FLAG,\n  touchAction: ANY,\n  maxLabels: ANY,\n  labelOverflow: ANY,\n  ariaLabel: ANY,\n  decorations: ANY,\n  cluster: { type: [Boolean, Object], default: undefined },\n  hooks: ANY,\n  height: ANY,\n  interactions: ANY,\n  editing: ANY,\n  defaultSelectedIds: ANY,\n  instanceId: ANY,\n  nonce: ANY,\n  measureText: ANY,\n  sceneSpace: { type: [Boolean, String], default: undefined },\n  hiddenDates: ANY,\n  timeBars: ANY,\n  timeBarOptions: ANY,\n  rolling: { type: [Boolean, Object], default: undefined },\n  zoomPresets: { type: [Boolean, Array], default: undefined },\n  minimap: { type: [Boolean, Object], default: undefined },\n  rangeSelect: { type: [Boolean, Object], default: undefined },\n  laneHeaders: FLAG,\n  tooltip: { type: [Boolean, Function], default: undefined },\n  direction: ANY,\n  strings: ANY,\n  calendar: ANY,\n  ssrWidth: { type: Number, default: undefined },\n};\n\n/** Where the view and the selection start, and the server's width: said once, not configuration that changes. */\nconst OWN = new Set([\"ssrWidth\", \"defaultDomain\", \"defaultSelectedIds\"]);\n\n/** `useId` gives `v-0` or `v:0`; a stylesheet scope wants a plain name. */\nconst scopeOf = (id: string): string => `tl${id.replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n/**\n * The configuration part of the props: the ones given, as plain values. A\n * reactive array or object the host passes is Vue's proxy of it; the\n * instance holds the object itself, so its identity is the host's and the\n * frames do not go through the proxy.\n */\nfunction configOf(props: Record<string, unknown>, scope: string): Record<string, unknown> {\n  const config: Record<string, unknown> = {};\n  for (const key of Object.keys(PROPS)) {\n    const value = props[key];\n    if (!OWN.has(key) && value !== undefined) config[key] = toRaw(value);\n  }\n  // Light DOM: two timelines on one page must not share one stylesheet.\n  if (config.instanceId === undefined) config.instanceId = scope;\n  return config;\n}\n\n/** The keys whose values are not the same object: an unchanged `items` array must not look like new data. */\nfunction changedOf(before: Record<string, unknown>, next: Record<string, unknown>): Record<string, unknown> | undefined {\n  const changed: Record<string, unknown> = {};\n  let any = false;\n  for (const key of new Set([...Object.keys(before), ...Object.keys(next)])) {\n    if (key !== \"__proto__\" && before[key] !== next[key]) {\n      changed[key] = next[key];\n      any = true;\n    }\n  }\n  return any ? changed : undefined;\n}\n\n/**\n * The timeline. Every {@link TimelineConfig} field is a prop (`:items`,\n * `:time-zone` or `:timeZone`, a bare `lane-headers`), every instance event\n * an emit (`@item-moved`, `@selection-changed`, …), and `ready` hands over\n * the live instance; a template ref's `timeline` is the same instance.\n * `class`, `style`, `id` and the rest of the attributes go on the box.\n *\n * The `#item` slot (`<template #item=\"{ item }\">`) is each item's content\n * as Vue, teleported into the box over the item (`slots`): only the items\n * drawn have one. The content is a picture — the pointer and the keyboard\n * act on the item, and its `label` stays its accessible name. Needs the\n * `/items` plugin, as `template` does.\n */\nexport const Timeline: TimelineComponent = defineComponent(\n  <T = unknown>(props: TimelineProps<T>, { emit, expose, slots }: SetupContext<TimelineEmits<T>, TimelineSlots>) => {\n    // Vue 3.5.0 types useId() as possibly undefined (outside a setup); here it is in one.\n    const scope = scopeOf(useId() ?? \"\");\n    const container = ref<HTMLDivElement | null>(null);\n    const timeline = shallowRef<TimelineInstance<T> | null>(null);\n    const drawn = shallowRef<ReadonlyMap<string, ItemSlot<T>>>(new Map());\n    // With an `#item` slot every item has a box, unless `slots` picks.\n    const configNow = (): Record<string, unknown> => {\n      const config = configOf(props as Record<string, unknown>, scope);\n      if (slots.item !== undefined && config.slots === undefined) config.slots = true;\n      return config;\n    };\n    let applied = configNow();\n    const initial: Record<string, unknown> = {\n      ...applied,\n      ...(props.defaultDomain === undefined ? {} : { domain: toRaw(props.defaultDomain) }),\n      ...(props.defaultSelectedIds === undefined ? {} : { selectedIds: toRaw(props.defaultSelectedIds) }),\n    };\n    // The server's drawing, computed once — on the server only: Vue's\n    // server renderer is what provides an SSR context.\n    const html =\n      inject(ssrContextKey, null) !== null\n        ? (() => {\n            const frame = renderTimelineSvg(initial as TimelineConfig<T>, props.ssrWidth === undefined ? {} : { width: props.ssrWidth });\n            return frame.svg + frame.groups;\n          })()\n        : undefined;\n    let stops: (() => void)[] = [];\n\n    onMounted(() => {\n      const instance = createTimeline<T>(container.value as HTMLDivElement, { ...initial, ...applied } as TimelineConfig<T>, { hydrate: true });\n      stops = TIMELINE_EVENTS.map((type) => instance.on(type, (payload) => forward(emit, type, payload)));\n      // Vue renders the teleports in its own flush, a microtask after the\n      // frame that drew the boxes: before the browser paints it.\n      stops.push(instance.on(\"slotsChanged\", ({ slots: next }) => (drawn.value = next)));\n      drawn.value = instance.slots;\n      timeline.value = instance;\n      emit(\"ready\", instance);\n    });\n\n    // Hand the instance what changed, and only that.\n    onUpdated(() => {\n      const next = configNow();\n      const changed = changedOf(applied, next);\n      applied = next;\n      if (changed !== undefined) timeline.value?.update(changed as TimelineUpdate<T>);\n    });\n\n    onBeforeUnmount(() => {\n      for (const stop of stops) stop();\n      stops = [];\n      timeline.value?.destroy();\n      timeline.value = null;\n      emit(\"ready\", null);\n    });\n\n    expose({ timeline });\n\n    return () => {\n      const height = props.height ?? DEFAULT_HEIGHT;\n      const item = slots.item;\n      const teleports = item === undefined ? [] : [...drawn.value].map(([id, slot]) => h(Teleport, { key: id, to: slot.element }, item({ item: slot.item })));\n      // The teleports are the box's children, as anchors: one root, so the\n      // server's markup stays the box alone. Without a teleport the box has\n      // no children for Vue — on the server it has the drawing, and while\n      // hydrating Vue must not compare the instance's nodes with any. The\n      // host's class, style and attributes fall through onto the box.\n      return h(\n        \"div\",\n        {\n          ref: container,\n          style: { position: \"relative\", overflow: \"hidden\", height: `${String(height)}px` },\n          \"data-tl-vue\": \"\",\n          ...(html === undefined ? {} : { innerHTML: html }),\n        },\n        html === undefined && teleports.length > 0 ? teleports : undefined,\n      );\n    };\n  },\n  {\n    name: \"TemporeumTimeline\",\n    // The runtime declaration; the types are the setup function's, generic over the items' data.\n    props: PROPS as never,\n    emits: [...TIMELINE_EVENTS, \"ready\"],\n    slots: Object as TimelineSlots,\n  },\n) as unknown as TimelineComponent;\n\n/** One instance event, emitted under its own name: the payload is that event's. */\nfunction forward<T, K extends TimelineInstanceEventName>(emit: SetupContext<TimelineEmits<T>>[\"emit\"], type: K, payload: TimelineInstanceEventMap<T>[K]): void {\n  (emit as (type: K, payload: TimelineInstanceEventMap<T>[K]) => void)(type, payload);\n}\n\n/**\n * Subscribe to the part of the instance's state a component renders.\n *\n * The ref changes when `selector`'s result changes (by `isEqual`,\n * `Object.is` by default) — and at most once per drawn frame, because the\n * store notifies at most once per frame. `undefined` until there is an\n * instance; `timeline` may be a ref, a getter (`() => view.value?.timeline`)\n * or the instance itself.\n */\nexport function useTimelineState<T, S>(\n  timeline: MaybeRefOrGetter<TimelineInstance<T> | null | undefined>,\n  selector: (snapshot: TimelineSnapshot) => S,\n  isEqual: (a: S, b: S) => boolean = Object.is,\n): Readonly<ShallowRef<S | undefined>> {\n  const state = shallowRef<S | undefined>(undefined);\n  watch(\n    () => toValue(timeline),\n    (instance, _, onCleanup) => {\n      if (instance === null || instance === undefined) {\n        state.value = undefined;\n        return;\n      }\n      let seen: { snapshot: TimelineSnapshot; selected: S } | undefined;\n      const read = (): void => {\n        const snapshot = instance.getSnapshot();\n        if (seen !== undefined && seen.snapshot === snapshot) return;\n        const selected = selector(snapshot);\n        if (seen !== undefined && isEqual(seen.selected, selected)) {\n          seen = { snapshot, selected: seen.selected };\n          return;\n        }\n        seen = { snapshot, selected };\n        state.value = selected;\n      };\n      read();\n      onCleanup(instance.subscribe(read));\n    },\n    { immediate: true },\n  );\n  return state;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@temporeum/timeline-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "The Temporeum timeline as a Vue component: editable, accessible, server-rendered and hydrated.",
+  "license": "MIT",
+  "author": "Daniel Horak",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/horakdani/Temporeum_timeline_SDK.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://horakdani.github.io/Temporeum_timeline_SDK/",
+  "bugs": {
+    "url": "https://github.com/horakdani/Temporeum_timeline_SDK/issues"
+  },
+  "keywords": [
+    "timeline",
+    "vue",
+    "nuxt",
+    "gantt",
+    "editable",
+    "accessible",
+    "ssr"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "@temporeum/timeline-element": "^1.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json --emitDeclarationOnly && rollup -c && node ../../scripts/sdk_cjs_types.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "npm run --silent build -w @temporeum/timeline-core && npm run --silent build -w @temporeum/timeline-element && npm run --silent build && npm run --silent typecheck && vitest run --coverage"
+  },
+  "devDependencies": {
+    "@vue/compiler-dom": "^3.5.44",
+    "@vitest/browser-playwright": "^5.1.0",
+    "@vitest/coverage-v8": "^5.1.0",
+    "typescript": "^6.0.3",
+    "vitest": "^5.1.0",
+    "vue": "^3.5.44"
+  }
+}