@multitrack/vue 0.1.0

package/dist/index.cjs

@@ -0,0 +1,178 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@multitrack/core');
+
+// src/provider.ts
+
+// src/context.ts
+var MULTITRACK_KEY = /* @__PURE__ */ Symbol("multitrack");
+
+// src/provider.ts
+var MultitrackProvider = vue.defineComponent({
+  name: "MultitrackProvider",
+  props: {
+    config: {
+      type: Array,
+      required: true
+    },
+    devtools: {
+      type: Boolean,
+      default: false
+    },
+    breakpoints: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    let timeline = null;
+    let scope = null;
+    const state = vue.shallowRef(null);
+    function setupTimeline() {
+      scope?.dispose();
+      timeline?.destroy();
+      const t = new core.Timeline({
+        config: props.config,
+        devtools: props.devtools,
+        breakpoints: props.breakpoints
+      });
+      timeline = t;
+      state.value = {
+        timeline: t,
+        steps: t.steps,
+        totalSteps: t.totalSteps,
+        scrollPercentage: 0,
+        currentStep: 0,
+        opacities: t.getOpacities(0)
+      };
+      scope = t.scope(() => {
+        t.on("scroll", ({ scrollPercentage, currentStep }) => {
+          state.value = {
+            ...state.value,
+            scrollPercentage,
+            currentStep,
+            opacities: t.getOpacities(scrollPercentage)
+          };
+        });
+        t.on("timeline:reconfigure", () => {
+          state.value = {
+            ...state.value,
+            steps: t.steps,
+            totalSteps: t.totalSteps,
+            scrollPercentage: t.scrollPercentage,
+            currentStep: t.currentStep,
+            opacities: t.getOpacities()
+          };
+        });
+      });
+      t.start();
+    }
+    vue.provide(MULTITRACK_KEY, state);
+    vue.onMounted(() => {
+      setupTimeline();
+    });
+    vue.watch(
+      () => [props.config, props.devtools, props.breakpoints],
+      () => {
+        if (timeline) {
+          setupTimeline();
+        }
+      }
+    );
+    vue.onUnmounted(() => {
+      scope?.dispose();
+      timeline?.destroy();
+    });
+    return () => slots.default?.();
+  }
+});
+function useMultitrackContext() {
+  const state = vue.inject(MULTITRACK_KEY);
+  if (!state) {
+    throw new Error(
+      "[@multitrack/vue] Composables must be used within a <MultitrackProvider>"
+    );
+  }
+  return state;
+}
+function useTimeline() {
+  return useMultitrackContext().value.timeline;
+}
+function useOpacities() {
+  const state = useMultitrackContext();
+  return vue.computed(() => state.value.opacities);
+}
+function useStep(name) {
+  const state = useMultitrackContext();
+  return {
+    opacity: vue.computed(() => state.value.opacities[name] ?? 0),
+    isActive: vue.computed(() => (state.value.opacities[name] ?? 0) > 0)
+  };
+}
+function useScrollProgress() {
+  const state = useMultitrackContext();
+  return {
+    scrollPercentage: vue.computed(() => state.value.scrollPercentage),
+    currentStep: vue.computed(() => state.value.currentStep),
+    totalSteps: vue.computed(() => state.value.totalSteps)
+  };
+}
+var ScrollContainer = vue.defineComponent({
+  name: "ScrollContainer",
+  setup(_, { slots, attrs }) {
+    const { totalSteps } = useScrollProgress();
+    return () => vue.h(
+      "div",
+      {
+        style: {
+          height: `${totalSteps.value * 100}vh`,
+          position: "relative"
+        },
+        ...attrs
+      },
+      slots.default?.()
+    );
+  }
+});
+var FixedStage = vue.defineComponent({
+  name: "FixedStage",
+  setup(_, { slots, attrs }) {
+    return () => vue.h(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "100%",
+          height: "100vh",
+          touchAction: "pan-y"
+        },
+        ...attrs
+      },
+      slots.default?.()
+    );
+  }
+});
+var Show = vue.defineComponent({
+  name: "Show",
+  props: {
+    when: { type: String, required: true }
+  },
+  setup(props, { slots }) {
+    const { isActive } = useStep(props.when);
+    return () => isActive.value ? slots.default?.() : null;
+  }
+});
+
+exports.FixedStage = FixedStage;
+exports.MultitrackProvider = MultitrackProvider;
+exports.ScrollContainer = ScrollContainer;
+exports.Show = Show;
+exports.useOpacities = useOpacities;
+exports.useScrollProgress = useScrollProgress;
+exports.useStep = useStep;
+exports.useTimeline = useTimeline;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/provider.ts","../src/composables.ts","../src/components.ts"],"names":["defineComponent","shallowRef","Timeline","provide","onMounted","watch","onUnmounted","inject","computed","h"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { InjectionKey, ShallowRef } from \"vue\";\nimport type { Timeline, Opacities, Step } from \"@multitrack/core\";\n\nexport interface MultitrackContextValue {\n  timeline: Timeline;\n  steps: Step[];\n  totalSteps: number;\n  scrollPercentage: number;\n  currentStep: number;\n  opacities: Opacities;\n}\n\nexport const MULTITRACK_KEY: InjectionKey<\n  ShallowRef<MultitrackContextValue>\n> = Symbol(\"multitrack\");\n","import {\n  defineComponent,\n  h,\n  shallowRef,\n  provide,\n  onMounted,\n  onUnmounted,\n  watch,\n  type PropType,\n} from \"vue\";\nimport { Timeline, type StepConfig, type Scope } from \"@multitrack/core\";\nimport { MULTITRACK_KEY, type MultitrackContextValue } from \"./context.js\";\n\nexport const MultitrackProvider = defineComponent({\n  name: \"MultitrackProvider\",\n  props: {\n    config: {\n      type: Array as PropType<StepConfig[]>,\n      required: true,\n    },\n    devtools: {\n      type: Boolean,\n      default: false,\n    },\n    breakpoints: {\n      type: Object as PropType<Record<string, string>>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    let timeline: Timeline | null = null;\n    let scope: Scope | null = null;\n\n    const state = shallowRef<MultitrackContextValue>(null!);\n\n    function setupTimeline() {\n      // Clean up previous instance\n      scope?.dispose();\n      timeline?.destroy();\n\n      const t = new Timeline({\n        config: props.config,\n        devtools: props.devtools,\n        breakpoints: props.breakpoints,\n      });\n      timeline = t;\n\n      state.value = {\n        timeline: t,\n        steps: t.steps,\n        totalSteps: t.totalSteps,\n        scrollPercentage: 0,\n        currentStep: 0,\n        opacities: t.getOpacities(0),\n      };\n\n      scope = t.scope(() => {\n        t.on(\"scroll\", ({ scrollPercentage, currentStep }) => {\n          state.value = {\n            ...state.value,\n            scrollPercentage,\n            currentStep,\n            opacities: t.getOpacities(scrollPercentage),\n          };\n        });\n\n        t.on(\"timeline:reconfigure\", () => {\n          state.value = {\n            ...state.value,\n            steps: t.steps,\n            totalSteps: t.totalSteps,\n            scrollPercentage: t.scrollPercentage,\n            currentStep: t.currentStep,\n            opacities: t.getOpacities(),\n          };\n        });\n      });\n\n      t.start();\n    }\n\n    provide(MULTITRACK_KEY, state);\n\n    onMounted(() => {\n      setupTimeline();\n    });\n\n    // Recreate timeline when props change\n    watch(\n      () => [props.config, props.devtools, props.breakpoints],\n      () => {\n        if (timeline) {\n          setupTimeline();\n        }\n      },\n    );\n\n    onUnmounted(() => {\n      scope?.dispose();\n      timeline?.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n","import { inject, computed } from \"vue\";\nimport type { Timeline, Opacities } from \"@multitrack/core\";\nimport { MULTITRACK_KEY } from \"./context.js\";\n\nfunction useMultitrackContext() {\n  const state = inject(MULTITRACK_KEY);\n  if (!state) {\n    throw new Error(\n      \"[@multitrack/vue] Composables must be used within a <MultitrackProvider>\",\n    );\n  }\n  return state;\n}\n\n/**\n * Access the Timeline instance directly.\n */\nexport function useTimeline(): Timeline {\n  return useMultitrackContext().value.timeline;\n}\n\n/**\n * Get current opacities for all steps.\n */\nexport function useOpacities<T extends string = string>() {\n  const state = useMultitrackContext();\n  return computed(() => state.value.opacities as Opacities<T>);\n}\n\n/**\n * Get opacity and active state for a single named step.\n */\nexport function useStep(name: string) {\n  const state = useMultitrackContext();\n  return {\n    opacity: computed(() => state.value.opacities[name] ?? 0),\n    isActive: computed(() => (state.value.opacities[name] ?? 0) > 0),\n  };\n}\n\n/**\n * Get raw scroll progress and current step position.\n */\nexport function useScrollProgress() {\n  const state = useMultitrackContext();\n  return {\n    scrollPercentage: computed(() => state.value.scrollPercentage),\n    currentStep: computed(() => state.value.currentStep),\n    totalSteps: computed(() => state.value.totalSteps),\n  };\n}\n","import { defineComponent, h } from \"vue\";\nimport { useScrollProgress, useStep } from \"./composables.js\";\n\n/**\n * Creates the tall scrollable container that drives the timeline.\n * Height = totalSteps * 100vh.\n */\nexport const ScrollContainer = defineComponent({\n  name: \"ScrollContainer\",\n  setup(_, { slots, attrs }) {\n    const { totalSteps } = useScrollProgress();\n\n    return () =>\n      h(\n        \"div\",\n        {\n          style: {\n            height: `${totalSteps.value * 100}vh`,\n            position: \"relative\",\n          },\n          ...attrs,\n        },\n        slots.default?.(),\n      );\n  },\n});\n\n/**\n * Fixed viewport stage that stays in place while the user scrolls.\n * All animated content lives inside this.\n */\nexport const FixedStage = defineComponent({\n  name: \"FixedStage\",\n  setup(_, { slots, attrs }) {\n    return () =>\n      h(\n        \"div\",\n        {\n          style: {\n            position: \"fixed\",\n            top: \"0\",\n            left: \"0\",\n            width: \"100%\",\n            height: \"100vh\",\n            touchAction: \"pan-y\",\n          },\n          ...attrs,\n        },\n        slots.default?.(),\n      );\n  },\n});\n\n/**\n * Conditionally renders children based on a step's opacity.\n * Unmounts children when the step is inactive (opacity 0) for performance.\n */\nexport const Show = defineComponent({\n  name: \"Show\",\n  props: {\n    when: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const { isActive } = useStep(props.when);\n\n    return () => (isActive.value ? slots.default?.() : null);\n  },\n});\n"]}

package/dist/index.d.cts

@@ -0,0 +1,95 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { StepConfig, Opacities, Timeline } from '@multitrack/core';
+export { EasingPreset, Opacities, StepConfig } from '@multitrack/core';
+
+declare const MultitrackProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    config: {
+        type: PropType<StepConfig[]>;
+        required: true;
+    };
+    devtools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breakpoints: {
+        type: PropType<Record<string, string>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    config: {
+        type: PropType<StepConfig[]>;
+        required: true;
+    };
+    devtools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breakpoints: {
+        type: PropType<Record<string, string>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    devtools: boolean;
+    breakpoints: Record<string, string>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Access the Timeline instance directly.
+ */
+declare function useTimeline(): Timeline;
+/**
+ * Get current opacities for all steps.
+ */
+declare function useOpacities<T extends string = string>(): vue.ComputedRef<Opacities<T>>;
+/**
+ * Get opacity and active state for a single named step.
+ */
+declare function useStep(name: string): {
+    opacity: vue.ComputedRef<number>;
+    isActive: vue.ComputedRef<boolean>;
+};
+/**
+ * Get raw scroll progress and current step position.
+ */
+declare function useScrollProgress(): {
+    scrollPercentage: vue.ComputedRef<number>;
+    currentStep: vue.ComputedRef<number>;
+    totalSteps: vue.ComputedRef<number>;
+};
+
+/**
+ * Creates the tall scrollable container that drives the timeline.
+ * Height = totalSteps * 100vh.
+ */
+declare const ScrollContainer: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Fixed viewport stage that stays in place while the user scrolls.
+ * All animated content lives inside this.
+ */
+declare const FixedStage: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Conditionally renders children based on a step's opacity.
+ * Unmounts children when the step is inactive (opacity 0) for performance.
+ */
+declare const Show: vue.DefineComponent<vue.ExtractPropTypes<{
+    when: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    when: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FixedStage, MultitrackProvider, ScrollContainer, Show, useOpacities, useScrollProgress, useStep, useTimeline };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { StepConfig, Opacities, Timeline } from '@multitrack/core';
+export { EasingPreset, Opacities, StepConfig } from '@multitrack/core';
+
+declare const MultitrackProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    config: {
+        type: PropType<StepConfig[]>;
+        required: true;
+    };
+    devtools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breakpoints: {
+        type: PropType<Record<string, string>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    config: {
+        type: PropType<StepConfig[]>;
+        required: true;
+    };
+    devtools: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breakpoints: {
+        type: PropType<Record<string, string>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    devtools: boolean;
+    breakpoints: Record<string, string>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Access the Timeline instance directly.
+ */
+declare function useTimeline(): Timeline;
+/**
+ * Get current opacities for all steps.
+ */
+declare function useOpacities<T extends string = string>(): vue.ComputedRef<Opacities<T>>;
+/**
+ * Get opacity and active state for a single named step.
+ */
+declare function useStep(name: string): {
+    opacity: vue.ComputedRef<number>;
+    isActive: vue.ComputedRef<boolean>;
+};
+/**
+ * Get raw scroll progress and current step position.
+ */
+declare function useScrollProgress(): {
+    scrollPercentage: vue.ComputedRef<number>;
+    currentStep: vue.ComputedRef<number>;
+    totalSteps: vue.ComputedRef<number>;
+};
+
+/**
+ * Creates the tall scrollable container that drives the timeline.
+ * Height = totalSteps * 100vh.
+ */
+declare const ScrollContainer: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Fixed viewport stage that stays in place while the user scrolls.
+ * All animated content lives inside this.
+ */
+declare const FixedStage: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/**
+ * Conditionally renders children based on a step's opacity.
+ * Unmounts children when the step is inactive (opacity 0) for performance.
+ */
+declare const Show: vue.DefineComponent<vue.ExtractPropTypes<{
+    when: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    when: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FixedStage, MultitrackProvider, ScrollContainer, Show, useOpacities, useScrollProgress, useStep, useTimeline };

package/dist/index.js

@@ -0,0 +1,169 @@
+import { defineComponent, shallowRef, provide, onMounted, watch, onUnmounted, h, computed, inject } from 'vue';
+import { Timeline } from '@multitrack/core';
+
+// src/provider.ts
+
+// src/context.ts
+var MULTITRACK_KEY = /* @__PURE__ */ Symbol("multitrack");
+
+// src/provider.ts
+var MultitrackProvider = defineComponent({
+  name: "MultitrackProvider",
+  props: {
+    config: {
+      type: Array,
+      required: true
+    },
+    devtools: {
+      type: Boolean,
+      default: false
+    },
+    breakpoints: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    let timeline = null;
+    let scope = null;
+    const state = shallowRef(null);
+    function setupTimeline() {
+      scope?.dispose();
+      timeline?.destroy();
+      const t = new Timeline({
+        config: props.config,
+        devtools: props.devtools,
+        breakpoints: props.breakpoints
+      });
+      timeline = t;
+      state.value = {
+        timeline: t,
+        steps: t.steps,
+        totalSteps: t.totalSteps,
+        scrollPercentage: 0,
+        currentStep: 0,
+        opacities: t.getOpacities(0)
+      };
+      scope = t.scope(() => {
+        t.on("scroll", ({ scrollPercentage, currentStep }) => {
+          state.value = {
+            ...state.value,
+            scrollPercentage,
+            currentStep,
+            opacities: t.getOpacities(scrollPercentage)
+          };
+        });
+        t.on("timeline:reconfigure", () => {
+          state.value = {
+            ...state.value,
+            steps: t.steps,
+            totalSteps: t.totalSteps,
+            scrollPercentage: t.scrollPercentage,
+            currentStep: t.currentStep,
+            opacities: t.getOpacities()
+          };
+        });
+      });
+      t.start();
+    }
+    provide(MULTITRACK_KEY, state);
+    onMounted(() => {
+      setupTimeline();
+    });
+    watch(
+      () => [props.config, props.devtools, props.breakpoints],
+      () => {
+        if (timeline) {
+          setupTimeline();
+        }
+      }
+    );
+    onUnmounted(() => {
+      scope?.dispose();
+      timeline?.destroy();
+    });
+    return () => slots.default?.();
+  }
+});
+function useMultitrackContext() {
+  const state = inject(MULTITRACK_KEY);
+  if (!state) {
+    throw new Error(
+      "[@multitrack/vue] Composables must be used within a <MultitrackProvider>"
+    );
+  }
+  return state;
+}
+function useTimeline() {
+  return useMultitrackContext().value.timeline;
+}
+function useOpacities() {
+  const state = useMultitrackContext();
+  return computed(() => state.value.opacities);
+}
+function useStep(name) {
+  const state = useMultitrackContext();
+  return {
+    opacity: computed(() => state.value.opacities[name] ?? 0),
+    isActive: computed(() => (state.value.opacities[name] ?? 0) > 0)
+  };
+}
+function useScrollProgress() {
+  const state = useMultitrackContext();
+  return {
+    scrollPercentage: computed(() => state.value.scrollPercentage),
+    currentStep: computed(() => state.value.currentStep),
+    totalSteps: computed(() => state.value.totalSteps)
+  };
+}
+var ScrollContainer = defineComponent({
+  name: "ScrollContainer",
+  setup(_, { slots, attrs }) {
+    const { totalSteps } = useScrollProgress();
+    return () => h(
+      "div",
+      {
+        style: {
+          height: `${totalSteps.value * 100}vh`,
+          position: "relative"
+        },
+        ...attrs
+      },
+      slots.default?.()
+    );
+  }
+});
+var FixedStage = defineComponent({
+  name: "FixedStage",
+  setup(_, { slots, attrs }) {
+    return () => h(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "0",
+          left: "0",
+          width: "100%",
+          height: "100vh",
+          touchAction: "pan-y"
+        },
+        ...attrs
+      },
+      slots.default?.()
+    );
+  }
+});
+var Show = defineComponent({
+  name: "Show",
+  props: {
+    when: { type: String, required: true }
+  },
+  setup(props, { slots }) {
+    const { isActive } = useStep(props.when);
+    return () => isActive.value ? slots.default?.() : null;
+  }
+});
+
+export { FixedStage, MultitrackProvider, ScrollContainer, Show, useOpacities, useScrollProgress, useStep, useTimeline };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.ts","../src/provider.ts","../src/composables.ts","../src/components.ts"],"names":["defineComponent","h"],"mappings":"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","file":"index.js","sourcesContent":["import type { InjectionKey, ShallowRef } from \"vue\";\nimport type { Timeline, Opacities, Step } from \"@multitrack/core\";\n\nexport interface MultitrackContextValue {\n  timeline: Timeline;\n  steps: Step[];\n  totalSteps: number;\n  scrollPercentage: number;\n  currentStep: number;\n  opacities: Opacities;\n}\n\nexport const MULTITRACK_KEY: InjectionKey<\n  ShallowRef<MultitrackContextValue>\n> = Symbol(\"multitrack\");\n","import {\n  defineComponent,\n  h,\n  shallowRef,\n  provide,\n  onMounted,\n  onUnmounted,\n  watch,\n  type PropType,\n} from \"vue\";\nimport { Timeline, type StepConfig, type Scope } from \"@multitrack/core\";\nimport { MULTITRACK_KEY, type MultitrackContextValue } from \"./context.js\";\n\nexport const MultitrackProvider = defineComponent({\n  name: \"MultitrackProvider\",\n  props: {\n    config: {\n      type: Array as PropType<StepConfig[]>,\n      required: true,\n    },\n    devtools: {\n      type: Boolean,\n      default: false,\n    },\n    breakpoints: {\n      type: Object as PropType<Record<string, string>>,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    let timeline: Timeline | null = null;\n    let scope: Scope | null = null;\n\n    const state = shallowRef<MultitrackContextValue>(null!);\n\n    function setupTimeline() {\n      // Clean up previous instance\n      scope?.dispose();\n      timeline?.destroy();\n\n      const t = new Timeline({\n        config: props.config,\n        devtools: props.devtools,\n        breakpoints: props.breakpoints,\n      });\n      timeline = t;\n\n      state.value = {\n        timeline: t,\n        steps: t.steps,\n        totalSteps: t.totalSteps,\n        scrollPercentage: 0,\n        currentStep: 0,\n        opacities: t.getOpacities(0),\n      };\n\n      scope = t.scope(() => {\n        t.on(\"scroll\", ({ scrollPercentage, currentStep }) => {\n          state.value = {\n            ...state.value,\n            scrollPercentage,\n            currentStep,\n            opacities: t.getOpacities(scrollPercentage),\n          };\n        });\n\n        t.on(\"timeline:reconfigure\", () => {\n          state.value = {\n            ...state.value,\n            steps: t.steps,\n            totalSteps: t.totalSteps,\n            scrollPercentage: t.scrollPercentage,\n            currentStep: t.currentStep,\n            opacities: t.getOpacities(),\n          };\n        });\n      });\n\n      t.start();\n    }\n\n    provide(MULTITRACK_KEY, state);\n\n    onMounted(() => {\n      setupTimeline();\n    });\n\n    // Recreate timeline when props change\n    watch(\n      () => [props.config, props.devtools, props.breakpoints],\n      () => {\n        if (timeline) {\n          setupTimeline();\n        }\n      },\n    );\n\n    onUnmounted(() => {\n      scope?.dispose();\n      timeline?.destroy();\n    });\n\n    return () => slots.default?.();\n  },\n});\n","import { inject, computed } from \"vue\";\nimport type { Timeline, Opacities } from \"@multitrack/core\";\nimport { MULTITRACK_KEY } from \"./context.js\";\n\nfunction useMultitrackContext() {\n  const state = inject(MULTITRACK_KEY);\n  if (!state) {\n    throw new Error(\n      \"[@multitrack/vue] Composables must be used within a <MultitrackProvider>\",\n    );\n  }\n  return state;\n}\n\n/**\n * Access the Timeline instance directly.\n */\nexport function useTimeline(): Timeline {\n  return useMultitrackContext().value.timeline;\n}\n\n/**\n * Get current opacities for all steps.\n */\nexport function useOpacities<T extends string = string>() {\n  const state = useMultitrackContext();\n  return computed(() => state.value.opacities as Opacities<T>);\n}\n\n/**\n * Get opacity and active state for a single named step.\n */\nexport function useStep(name: string) {\n  const state = useMultitrackContext();\n  return {\n    opacity: computed(() => state.value.opacities[name] ?? 0),\n    isActive: computed(() => (state.value.opacities[name] ?? 0) > 0),\n  };\n}\n\n/**\n * Get raw scroll progress and current step position.\n */\nexport function useScrollProgress() {\n  const state = useMultitrackContext();\n  return {\n    scrollPercentage: computed(() => state.value.scrollPercentage),\n    currentStep: computed(() => state.value.currentStep),\n    totalSteps: computed(() => state.value.totalSteps),\n  };\n}\n","import { defineComponent, h } from \"vue\";\nimport { useScrollProgress, useStep } from \"./composables.js\";\n\n/**\n * Creates the tall scrollable container that drives the timeline.\n * Height = totalSteps * 100vh.\n */\nexport const ScrollContainer = defineComponent({\n  name: \"ScrollContainer\",\n  setup(_, { slots, attrs }) {\n    const { totalSteps } = useScrollProgress();\n\n    return () =>\n      h(\n        \"div\",\n        {\n          style: {\n            height: `${totalSteps.value * 100}vh`,\n            position: \"relative\",\n          },\n          ...attrs,\n        },\n        slots.default?.(),\n      );\n  },\n});\n\n/**\n * Fixed viewport stage that stays in place while the user scrolls.\n * All animated content lives inside this.\n */\nexport const FixedStage = defineComponent({\n  name: \"FixedStage\",\n  setup(_, { slots, attrs }) {\n    return () =>\n      h(\n        \"div\",\n        {\n          style: {\n            position: \"fixed\",\n            top: \"0\",\n            left: \"0\",\n            width: \"100%\",\n            height: \"100vh\",\n            touchAction: \"pan-y\",\n          },\n          ...attrs,\n        },\n        slots.default?.(),\n      );\n  },\n});\n\n/**\n * Conditionally renders children based on a step's opacity.\n * Unmounts children when the step is inactive (opacity 0) for performance.\n */\nexport const Show = defineComponent({\n  name: \"Show\",\n  props: {\n    when: { type: String, required: true },\n  },\n  setup(props, { slots }) {\n    const { isActive } = useStep(props.when);\n\n    return () => (isActive.value ? slots.default?.() : null);\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@multitrack/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 bindings for @multitrack/core",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "dependencies": {
+    "@multitrack/core": "workspace:^"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "Jack Hsu",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jakhsu/multitrack.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/jakhsu/multitrack/tree/main/packages/vue",
+  "bugs": {
+    "url": "https://github.com/jakhsu/multitrack/issues"
+  },
+  "keywords": [
+    "scroll-animation",
+    "scroll-driven",
+    "timeline",
+    "vue",
+    "vue3",
+    "vue-composables",
+    "scrollytelling",
+    "multi-track"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}