@multitrack/svelte 0.1.0

package/dist/FixedStage.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+  }
+
+  let { class: className, children }: Props = $props();
+</script>
+
+<div
+  class={className}
+  style:position="fixed"
+  style:top="0"
+  style:left="0"
+  style:width="100%"
+  style:height="100vh"
+  style:touch-action="pan-y"
+>
+  {@render children()}
+</div>

package/dist/FixedStage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children: Snippet;
+}
+declare const FixedStage: import("svelte").Component<Props, {}, "">;
+type FixedStage = ReturnType<typeof FixedStage>;
+export default FixedStage;
+//# sourceMappingURL=FixedStage.svelte.d.ts.map

package/dist/FixedStage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedStage.svelte.d.ts","sourceRoot":"","sources":["../src/FixedStage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAcH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/MultitrackProvider.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { StepConfig } from "@multitrack/core";
+  import type { Snippet } from "svelte";
+  import { onDestroy } from "svelte";
+  import { createMultitrackContext } from "./context.svelte.js";
+
+  interface Props {
+    config: StepConfig[];
+    devtools?: boolean;
+    breakpoints?: Record<string, string>;
+    children: Snippet;
+  }
+
+  const { config, devtools = false, breakpoints, children }: Props = $props();
+
+  const ctx = createMultitrackContext({ config, devtools, breakpoints });
+
+  onDestroy(() => {
+    ctx._dispose();
+  });
+</script>
+
+{@render children()}

package/dist/MultitrackProvider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { StepConfig } from "@multitrack/core";
+import type { Snippet } from "svelte";
+interface Props {
+    config: StepConfig[];
+    devtools?: boolean;
+    breakpoints?: Record<string, string>;
+    children: Snippet;
+}
+declare const MultitrackProvider: import("svelte").Component<Props, {}, "">;
+type MultitrackProvider = ReturnType<typeof MultitrackProvider>;
+export default MultitrackProvider;
+//# sourceMappingURL=MultitrackProvider.svelte.d.ts.map

package/dist/MultitrackProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultitrackProvider.svelte.d.ts","sourceRoot":"","sources":["../src/MultitrackProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqBH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/ScrollContainer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { useScrollProgress } from "./composables.svelte.js";
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+  }
+
+  let { class: className, children }: Props = $props();
+
+  const { totalSteps } = useScrollProgress();
+</script>
+
+<div
+  class={className}
+  style:height="{totalSteps * 100}vh"
+  style:position="relative"
+>
+  {@render children()}
+</div>

package/dist/ScrollContainer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children: Snippet;
+}
+declare const ScrollContainer: import("svelte").Component<Props, {}, "">;
+type ScrollContainer = ReturnType<typeof ScrollContainer>;
+export default ScrollContainer;
+//# sourceMappingURL=ScrollContainer.svelte.d.ts.map

package/dist/ScrollContainer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainer.svelte.d.ts","sourceRoot":"","sources":["../src/ScrollContainer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/Show.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { getMultitrackContext } from "./context.svelte.js";
+
+  interface Props {
+    when: string;
+    children: Snippet;
+  }
+
+  let { when, children }: Props = $props();
+
+  const ctx = getMultitrackContext();
+</script>
+
+{#if (ctx.opacities[when] ?? 0) > 0}
+  {@render children()}
+{/if}

package/dist/Show.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface Props {
+    when: string;
+    children: Snippet;
+}
+declare const Show: import("svelte").Component<Props, {}, "">;
+type Show = ReturnType<typeof Show>;
+export default Show;
+//# sourceMappingURL=Show.svelte.d.ts.map

package/dist/Show.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.svelte.d.ts","sourceRoot":"","sources":["../src/Show.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiBH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/composables.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Timeline, Opacities } from "@multitrack/core";
+/**
+ * Access the Timeline instance directly.
+ */
+export declare function useTimeline(): Timeline;
+/**
+ * Get current opacities for all steps.
+ */
+export declare function useOpacities<T extends string = string>(): {
+    readonly current: Opacities<T>;
+};
+/**
+ * Get opacity and active state for a single named step.
+ */
+export declare function useStep(name: string): {
+    readonly opacity: number;
+    readonly isActive: boolean;
+};
+/**
+ * Get raw scroll progress and current step position.
+ */
+export declare function useScrollProgress(): {
+    readonly scrollPercentage: number;
+    readonly currentStep: number;
+    readonly totalSteps: number;
+};
+//# sourceMappingURL=composables.svelte.d.ts.map

package/dist/composables.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables.svelte.d.ts","sourceRoot":"","sources":["../src/composables.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG5D;;GAEG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAEtC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,KAAK;IACzD,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CAChC,CAOA;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B,CAUA;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI;IACnC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B,CAaA"}

package/dist/composables.svelte.js

@@ -0,0 +1,49 @@
+import { getMultitrackContext } from "./context.svelte.js";
+/**
+ * Access the Timeline instance directly.
+ */
+export function useTimeline() {
+    return getMultitrackContext().timeline;
+}
+/**
+ * Get current opacities for all steps.
+ */
+export function useOpacities() {
+    const ctx = getMultitrackContext();
+    return {
+        get current() {
+            return ctx.opacities;
+        },
+    };
+}
+/**
+ * Get opacity and active state for a single named step.
+ */
+export function useStep(name) {
+    const ctx = getMultitrackContext();
+    return {
+        get opacity() {
+            return ctx.opacities[name] ?? 0;
+        },
+        get isActive() {
+            return (ctx.opacities[name] ?? 0) > 0;
+        },
+    };
+}
+/**
+ * Get raw scroll progress and current step position.
+ */
+export function useScrollProgress() {
+    const ctx = getMultitrackContext();
+    return {
+        get scrollPercentage() {
+            return ctx.scrollPercentage;
+        },
+        get currentStep() {
+            return ctx.currentStep;
+        },
+        get totalSteps() {
+            return ctx.totalSteps;
+        },
+    };
+}

package/dist/context.d.ts

@@ -0,0 +1,11 @@
+import type { Timeline, Opacities, Step } from "@multitrack/core";
+export interface MultitrackContextValue {
+    readonly timeline: Timeline;
+    readonly steps: Step[];
+    readonly totalSteps: number;
+    readonly scrollPercentage: number;
+    readonly currentStep: number;
+    readonly opacities: Opacities;
+}
+export declare const MULTITRACK_CTX_KEY: unique symbol;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,kBAAkB,eAAuB,CAAC"}

package/dist/context.js

@@ -0,0 +1 @@
+export const MULTITRACK_CTX_KEY = Symbol("multitrack");

package/dist/context.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type StepConfig } from "@multitrack/core";
+import { type MultitrackContextValue } from "./context.js";
+export interface MultitrackContextOptions {
+    config: StepConfig[];
+    devtools?: boolean;
+    breakpoints?: Record<string, string>;
+}
+interface MultitrackContextWithDispose extends MultitrackContextValue {
+    _dispose(): void;
+}
+export declare function createMultitrackContext(options: MultitrackContextOptions): MultitrackContextWithDispose;
+export declare function getMultitrackContext(): MultitrackContextValue;
+export {};
+//# sourceMappingURL=context.svelte.d.ts.map

package/dist/context.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../src/context.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,UAAU,EAAkB,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAsB,KAAK,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE/E,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,wBAAwB,GAChC,4BAA4B,CAyD9B;AAED,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D"}

package/dist/context.svelte.js

@@ -0,0 +1,61 @@
+import { getContext, setContext } from "svelte";
+import { Timeline } from "@multitrack/core";
+import { MULTITRACK_CTX_KEY } from "./context.js";
+export function createMultitrackContext(options) {
+    const timeline = new Timeline({
+        config: options.config,
+        devtools: options.devtools ?? false,
+        breakpoints: options.breakpoints,
+    });
+    let scrollPercentage = $state(0);
+    let currentStep = $state(0);
+    let opacities = $state(timeline.getOpacities(0));
+    let steps = $state(timeline.steps);
+    let totalSteps = $state(timeline.totalSteps);
+    const scope = timeline.scope(() => {
+        timeline.on("scroll", (payload) => {
+            scrollPercentage = payload.scrollPercentage;
+            currentStep = payload.currentStep;
+            opacities = timeline.getOpacities(payload.scrollPercentage);
+        });
+        timeline.on("timeline:reconfigure", () => {
+            steps = timeline.steps;
+            totalSteps = timeline.totalSteps;
+            opacities = timeline.getOpacities(timeline.scrollPercentage);
+        });
+    });
+    timeline.start();
+    const value = {
+        get timeline() {
+            return timeline;
+        },
+        get steps() {
+            return steps;
+        },
+        get totalSteps() {
+            return totalSteps;
+        },
+        get scrollPercentage() {
+            return scrollPercentage;
+        },
+        get currentStep() {
+            return currentStep;
+        },
+        get opacities() {
+            return opacities;
+        },
+        _dispose() {
+            scope.dispose();
+            timeline.destroy();
+        },
+    };
+    setContext(MULTITRACK_CTX_KEY, value);
+    return value;
+}
+export function getMultitrackContext() {
+    const ctx = getContext(MULTITRACK_CTX_KEY);
+    if (!ctx) {
+        throw new Error("[@multitrack/svelte] Composables must be used within a <MultitrackProvider>");
+    }
+    return ctx;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { default as MultitrackProvider } from "./MultitrackProvider.svelte";
+export { useTimeline, useOpacities, useStep, useScrollProgress, } from "./composables.svelte.js";
+export { default as ScrollContainer } from "./ScrollContainer.svelte";
+export { default as FixedStage } from "./FixedStage.svelte";
+export { default as Show } from "./Show.svelte";
+export { createMultitrackContext, getMultitrackContext, } from "./context.svelte.js";
+export type { StepConfig, Opacities, EasingPreset } from "@multitrack/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAG5E,OAAO,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,EACL,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAG7B,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+// Provider
+export { default as MultitrackProvider } from "./MultitrackProvider.svelte";
+// Composables
+export { useTimeline, useOpacities, useStep, useScrollProgress, } from "./composables.svelte.js";
+// Components
+export { default as ScrollContainer } from "./ScrollContainer.svelte";
+export { default as FixedStage } from "./FixedStage.svelte";
+export { default as Show } from "./Show.svelte";
+// Context (advanced usage)
+export { createMultitrackContext, getMultitrackContext, } from "./context.svelte.js";

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@multitrack/svelte",
+  "version": "0.1.0",
+  "description": "Svelte 5 bindings for @multitrack/core",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "dev": "svelte-package -i src -o dist --watch"
+  },
+  "peerDependencies": {
+    "svelte": ">=5.0.0"
+  },
+  "dependencies": {
+    "@multitrack/core": "workspace:^"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.0",
+    "svelte": "^5.46.4"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "Jack Hsu",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jakhsu/multitrack.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://github.com/jakhsu/multitrack/tree/main/packages/svelte",
+  "bugs": {
+    "url": "https://github.com/jakhsu/multitrack/issues"
+  },
+  "keywords": [
+    "scroll-animation",
+    "scroll-driven",
+    "timeline",
+    "svelte",
+    "svelte5",
+    "runes",
+    "scrollytelling",
+    "multi-track"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}