slot-text 0.1.2 → 0.3.1

package/README.md

@@ -1,18 +1,25 @@
 # slot-text
 
-Dependency-free text roll animation for tiny, tactile UI labels.
+<p>
+  <a href="https://www.npmjs.com/package/slot-text"><img src="https://img.shields.io/npm/v/slot-text?color=cb3837&label=npm" alt="npm version"></a>
+  <img src="https://img.shields.io/badge/dependencies-zero-22c55e" alt="zero dependencies">
+  <img src="https://img.shields.io/bundlephobia/minzip/slot-text?color=8b5cf6&label=size" alt="bundle size">
+  <img src="https://img.shields.io/badge/react-✓-61dafb" alt="react">
+  <img src="https://img.shields.io/badge/vue-✓-42b883" alt="vue">
+  <img src="https://img.shields.io/badge/solid-✓-2c4f7c" alt="solid">
+  <img src="https://img.shields.io/badge/svelte-✓-ff3e00" alt="svelte">
+  <img src="https://img.shields.io/badge/typescript-✓-3178c6" alt="typescript">
+</p>
 
-![slot-text usage card](./assets/usage.svg)
+Dependency-free text roll animation for tiny, tactile UI labels.
 
-## Install
+## 📦 Install
 
 ```bash
 npm install slot-text
 ```
 
-## Use
-
-### Vanilla
+## 🚀 Quick start
 
 ```ts
 import "slot-text/style.css";
@@ -20,166 +27,143 @@ import { slotText, chromatic } from "slot-text";
 
 const label = slotText(document.querySelector("#copy")!, "Copy");
 
-label.set("Copied", {
-  direction: "up",
-  color: chromatic(),
+// the classic Copy → Copied → Copy, in one call
+label.flash("Copied", { enter: { color: chromatic() } });
+```
+
+That's it — import the CSS once, attach to an element, roll text.
+
+## 🧩 API
+
+| Method | What it does |
+| --- | --- |
+| `set(text, options?)` | Roll to new text — the text **stays** |
+| `flash(text, options?)` | Roll in, then **auto-revert** to the previous text |
+| `destroy()` | Clean up |
+
+```ts
+const label = slotText(element, "Copy", options);
+
+label.set("Copied");                  // permanent change
+label.set("Copy", { direction: "down" });
+label.flash("Copied");                // temporary — rolls back after 1.4s
+label.destroy();
+```
+
+> 💡 **`flash` is spam-safe** — repeat clicks restart the revert timer instead
+> of queuing extra rolls, and an explicit `set()` cancels any pending revert.
+
+```ts
+label.flash("Copied", {
+  revertAfter: 1400,                              // ms before rolling back
+  enter: { direction: "up", color: chromatic() }, // roll-in
+  exit: { direction: "down" },                    // roll-back
 });
 ```
 
-### React
+## ⚛️ React
 
 ```tsx
 import "slot-text/style.css";
 import { SlotText } from "slot-text/react";
 import { chromatic } from "slot-text";
 
-export function CopyLabel({ copied }: { copied: boolean }) {
-  return (
-    <SlotText
-      text={copied ? "Copied" : "Copy"}
-      options={{
-        direction: copied ? "up" : "down",
-        skipUnchanged: false,
-        color: copied ? chromatic() : undefined,
-      }}
-    />
-  );
-}
+<SlotText
+  text={copied ? "Copied" : "Copy"}
+  options={{ direction: copied ? "up" : "down", color: copied ? chromatic() : undefined }}
+/>
 ```
 
-### Vue
+## 💚 Vue
 
 ```vue
 <script setup lang="ts">
 import "slot-text/style.css";
 import { SlotText } from "slot-text/vue";
-import { chromatic } from "slot-text";
-
-const options = {
-  direction: "up",
-  skipUnchanged: false,
-  color: chromatic(),
-} as const;
 </script>
 
 <template>
-  <SlotText text="Copied" :options="options" />
+  <SlotText text="Copied" :options="{ direction: 'up' }" />
 </template>
 ```
 
-## API
-
-Vanilla controller:
-
-```ts
-const label = slotText(element, "Copy", options);
-
-label.set("Copied");
-label.set("Copy", { direction: "down" });
-label.destroy();
-```
-
-Framework components:
+## 🔷 Solid
 
-```ts
-import { SlotText as ReactSlotText } from "slot-text/react";
-import { SlotText as VueSlotText } from "slot-text/vue";
-```
+```tsx
+import "slot-text/style.css";
+import { createSignal } from "solid-js";
+import { slotText } from "slot-text/solid";
 
-Low-level helpers:
+const [label, setLabel] = createSignal("Copy");
 
-```ts
-import {
-  buildSlotText,
-  animateSlotText,
-  chromatic,
-} from "slot-text";
+<button aria-label={label()} onClick={() => setLabel("Copied")}>
+  <span use:slotText={{ text: label(), options: { direction: "up" } }} />
+</button>
 ```
 
-## Options
+## 🧡 Svelte
 
-```ts
-type SlotOptions = {
-  direction?: "up" | "down";
-  stagger?: number;
-  duration?: number;
-  exitOffset?: number;
-  easing?: string;
-  bounce?: number;
-  color?: string | ((index: number, total: number) => string);
-  colorFade?: number;
-  skipUnchanged?: boolean;
-};
-```
+```svelte
+<script lang="ts">
+  import "slot-text/style.css";
+  import { slotText } from "slot-text/svelte";
 
-Defaults are tuned for a soft, springy roll:
+  let label = "Copy";
+</script>
 
-```ts
-{
-  direction: "down",
-  stagger: 45,
-  duration: 300,
-  exitOffset: 50,
-  easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  bounce: 0.6,
-  colorFade: 280,
-  skipUnchanged: true,
-}
+<button aria-label={label} on:click={() => label = "Copied"}>
+  <span use:slotText={{ text: label, options: { direction: "up" } }}></span>
+</button>
 ```
 
-## Example
+## ⚙️ Options
 
-```html
-<button>
-  <span id="copy-label"></span>
-</button>
+| Option | Default | Description |
+| --- | --- | --- |
+| `direction` | `"down"` | Roll direction: `"up"` or `"down"` |
+| `stagger` | `45` | Delay between characters (ms) |
+| `duration` | `300` | Per-character animation time (ms) |
+| `exitOffset` | `50` | Delay before the old character exits (ms) |
+| `easing` | springy bezier | CSS easing function |
+| `bounce` | `0.6` | Overshoot amount |
+| `color` | — | Color string, or `(index, total) => string` |
+| `colorFade` | `280` | Fade back to base color (ms) |
+| `skipUnchanged` | `true` | Don't re-roll identical characters |
+| `interrupt` | `true` | See below 👇 |
 
-<script type="module">
-  import "slot-text/style.css";
-  import { slotText } from "slot-text";
+### 🛑 `interrupt`
 
-  const label = slotText(document.querySelector("#copy-label"), "Copy");
+- `interrupt: true` *(default)* — cuts off any roll in flight, starts fresh.
+- `interrupt: false` — lets the current roll **finish**; the latest call plays
+  after it lands, duplicates are dropped. Ideal for spam-prone buttons.
 
-  document.querySelector("button").addEventListener("click", () => {
-    label.set("Copied", { direction: "up", skipUnchanged: false });
-    window.setTimeout(() => label.set("Copy"), 1400);
-  });
-</script>
-```
+### 🌈 `chromatic()`
 
-## Font support
+Built-in rainbow color helper — pass it as `color` for a per-character hue sweep.
 
-Each character animates inside its own measured cell, sized with the exact
-font you give the element — so widths are always correct.
+## 🔤 Font support
 
-Works great with:
+Each character animates in its own measured cell using your element's exact
+font, so widths are always correct.
 
-- **Monospace fonts** — perfect fit, every cell is identical.
-- **Proportional Latin / Cyrillic / Greek fonts** (Geist, Inter, SF, …) —
-  including italics and glyphs with overhang.
+✅ **Great with:** monospace fonts, proportional Latin / Cyrillic / Greek
+(Geist, Inter, SF, …), italics, glyphs with overhang.
 
-Known tradeoffs (inherent to any per-character slot animation):
+⚠️ **Tradeoffs** (inherent to any per-character slot animation):
 
-- **Kerning is lost.** Each glyph is its own box, so pairs like `AV` or `To`
-  sit slightly looser than in plain text. Invisible at UI label sizes,
-  noticeable at large display sizes with kerning-heavy fonts.
-- **Ligatures won't form** — `fi`, `fl`, or coding ligatures stay separate.
-- **Joined scripts are unsupported.** Arabic, Devanagari and other shaping
-  scripts need contextual letterforms across the string and will render as
-  isolated forms.
-- **Complex emoji split.** Single emoji are fine (surrogate pairs are
-  handled), but ZWJ sequences (👨‍👩‍👧) and combining marks break into
-  multiple cells.
-- **Very tall display/script fonts** may clip at the vertical roll mask,
-  which is sized to `line-height: 1.3`.
+- Kerning is lost — pairs like `AV` sit slightly looser (invisible at label sizes).
+- Ligatures won't form (`fi`, `fl`, coding ligatures).
+- Joined scripts (Arabic, Devanagari) render as isolated forms.
+- ZWJ emoji sequences (👨‍👩‍👧) split into cells; single emoji are fine.
+- Very tall display fonts may clip at the roll mask (`line-height: 1.3`).
 
-In short: ideal for short Latin labels, numbers, statuses and commands — in
+**In short:** ideal for short labels, numbers, statuses and commands — in
 essentially any font you'd use for those.
 
-## Notes
+## 📝 Notes
 
-- Browser-only DOM utility.
-- Core API has no runtime dependencies.
-- React and Vue are optional peer dependencies. Plain JS users do not need them.
-- Works best on short labels, buttons, counters, and command text.
+- Browser-only DOM utility, zero runtime dependencies.
+- React, Vue, Solid, and Svelte are optional peer dependencies — plain JS users
+  don't need them.
 - Import the CSS once before using the animation.
+- Low-level helpers also exported: `buildSlotText`, `animateSlotText`, `chromatic`.

package/dist/index.d.ts

@@ -1,9 +1,25 @@
-export { animateSlotText, buildSlotText, chromatic, clearSlotText, type ChromaticOptions, type SlotOptions, } from "./slotText";
-import { type SlotOptions } from "./slotText";
+export { animateSlotText, buildSlotText, chromatic, clearSlotText, type ChromaticOptions, type SlotOptions, } from "./slotText.js";
+import { type SlotOptions } from "./slotText.js";
+export interface FlashOptions {
+    /** How long the flash text stays before rolling back, in ms (default 1400). */
+    revertAfter?: number;
+    /** Roll options for the flash text rolling in. */
+    enter?: SlotOptions;
+    /** Roll options for the original text rolling back. */
+    exit?: SlotOptions;
+}
 export interface SlotTextController {
     readonly element: HTMLElement;
+    /** The text currently displayed (the flash text while a flash is showing). */
     readonly value: string;
+    /** Roll to new text. Cancels any pending flash revert. */
     set(text: string, options?: SlotOptions): void;
+    /**
+     * Roll to temporary text, then roll back automatically — the classic
+     * Copy → Copied → Copy button in one call. Spam-safe: repeat flashes restart
+     * the revert timer instead of queuing extra rolls.
+     */
+    flash(text: string, options?: FlashOptions): void;
     destroy(): void;
 }
 /**
@@ -13,5 +29,6 @@ export interface SlotTextController {
  *
  *   const label = slotText(buttonLabel, "Copy");
  *   label.set("Copied", { direction: "up" });
+ *   label.flash("Copied", { revertAfter: 1400 }); // auto-reverts to "Copy"
  */
 export declare function slotText(element: HTMLElement, initialText: string, options?: SlotOptions): SlotTextController;

package/dist/index.js

@@ -1,5 +1,5 @@
-export { animateSlotText, buildSlotText, chromatic, clearSlotText, } from "./slotText";
-import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText";
+export { animateSlotText, buildSlotText, chromatic, clearSlotText, } from "./slotText.js";
+import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText.js";
 /**
  * Create a text-roll controller for one element.
  *
@@ -7,9 +7,12 @@ import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText";
  *
  *   const label = slotText(buttonLabel, "Copy");
  *   label.set("Copied", { direction: "up" });
+ *   label.flash("Copied", { revertAfter: 1400 }); // auto-reverts to "Copy"
  */
 export function slotText(element, initialText, options = {}) {
     let value = initialText;
+    let revertTimeout;
+    let restingText;
     buildSlotText(element, initialText);
     return {
         element,
@@ -17,10 +20,42 @@ export function slotText(element, initialText, options = {}) {
             return value;
         },
         set(text, nextOptions = {}) {
+            // An explicit set wins over a pending flash revert.
+            clearTimeout(revertTimeout);
+            restingText = undefined;
             value = text;
             animateSlotText(element, text, { ...options, ...nextOptions });
         },
+        flash(text, { revertAfter = 1400, enter, exit } = {}) {
+            // Capture the resting text only on the first flash of a burst, so a
+            // flash-during-flash still reverts to the original label.
+            if (restingText === undefined) {
+                restingText = value;
+            }
+            // Flashes default to non-interrupting rolls: spam-friendly, no mid-roll
+            // cutoffs. Callers can still override via `enter`/`exit`.
+            value = text;
+            animateSlotText(element, text, {
+                ...options,
+                interrupt: false,
+                ...enter,
+            });
+            // Restart the revert timer: one revert per burst, after the last flash.
+            clearTimeout(revertTimeout);
+            revertTimeout = window.setTimeout(() => {
+                const back = restingText;
+                restingText = undefined;
+                revertTimeout = undefined;
+                value = back;
+                animateSlotText(element, back, {
+                    ...options,
+                    interrupt: false,
+                    ...exit,
+                });
+            }, revertAfter);
+        },
         destroy() {
+            clearTimeout(revertTimeout);
             clearSlotText(element, value);
         },
     };

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "react";
-import { type SlotOptions } from "./slotText";
+import { type SlotOptions } from "./slotText.js";
 export interface SlotTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     text: string;
     options?: SlotOptions;

package/dist/react.js

@@ -1,5 +1,5 @@
 import { createElement, forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
-import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText";
+import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText.js";
 export const SlotText = forwardRef(({ text, options, "aria-label": ariaLabel, ...props }, forwardedRef) => {
     const elementRef = useRef(null);
     const mountedRef = useRef(false);

package/dist/slotText.d.ts

@@ -44,6 +44,13 @@ export interface SlotOptions {
      * uniformly instead of leaving stray letters frozen.
      */
     skipUnchanged?: boolean;
+    /**
+     * true (default): a new call interrupts any roll in flight, snapping it to
+     * its target before starting fresh. false: the current roll finishes and the
+     * latest call made mid-roll plays after it lands; calls targeting the text
+     * already displayed are dropped. Ideal for spam-prone triggers like buttons.
+     */
+    interrupt?: boolean;
 }
 export interface ChromaticOptions {
     from?: number;

package/dist/slotText.js

@@ -20,6 +20,7 @@ const DEFAULTS = {
     bounce: 0.6,
     colorFade: 280,
     skipUnchanged: true,
+    interrupt: true,
 };
 const NBSP = "\u00A0";
 const glyph = (char) => (char === " " ? NBSP : char);
@@ -71,10 +72,20 @@ export function buildSlotText(container, text) {
     container.replaceChildren(...Array.from(text, buildSlot));
 }
 export function animateSlotText(container, toText, options = {}) {
-    const { direction, stagger, duration, exitOffset, easing, bounce, color, colorFade, skipUnchanged, } = {
+    const { direction, stagger, duration, exitOffset, easing, bounce, color, colorFade, skipUnchanged, interrupt, } = {
         ...DEFAULTS,
         ...options,
     };
+    // Non-interrupting mode: if a roll is already in flight, let it finish and
+    // remember this request instead. Only the latest request survives, so spam
+    // taps coalesce into a single follow-up roll once the current one lands.
+    const running = states.get(container);
+    if (running && !interrupt) {
+        if (toText !== running.target) {
+            running.pending = { text: toText, options };
+        }
+        return;
+    }
     // Interrupt: if a previous roll is still running, fast-forward it to its
     // target and tear down its timers before we start fresh. This is what kills
     // the "switch bun→npm mid-animation" glitch.
@@ -86,6 +97,10 @@ export function animateSlotText(container, toText, options = {}) {
     }
     const slots = Array.from(container.querySelectorAll(".char-slot"));
     const fromText = slots.map((s) => s.dataset.char ?? "").join("");
+    // Non-interrupting mode also drops rolls to the text already on screen, so
+    // repeated triggers do not visibly re-roll an unchanged label.
+    if (!interrupt && fromText === toText)
+        return;
     const maxLen = Math.max(fromText.length, toText.length);
     // Whole-pixel slide distance = one cell height, so glyphs clip cleanly.
     // If layout has not produced dimensions yet, fall back to line-height/font-size
@@ -98,7 +113,9 @@ export function animateSlotText(container, toText, options = {}) {
         sample?.offsetHeight ||
         container.getBoundingClientRect().height ||
         parseFloat(cs.lineHeight) ||
-        0) || Math.ceil(parseFloat(cs.fontSize) * 1.3) || 18;
+        0) ||
+        Math.ceil(parseFloat(cs.fontSize) * 1.3) ||
+        18;
     // Resting color to settle the chromatic flash back to.
     const restColor = color ? cs.color : "";
     // Pre-create any extra cells up front so the row never reflows mid-roll.
@@ -160,7 +177,9 @@ export function animateSlotText(container, toText, options = {}) {
         const base = Math.round(staggerIndex * stagger * (1 + bounce * 0.25 * wobble(i, 2)));
         const tilt = (bounce * 5 * wobble(i, 3)).toFixed(2);
         const rollTrans = `transform ${d}ms ${easing}`;
-        const trans = color ? `${rollTrans}, color ${colorFade}ms linear ${d}ms` : rollTrans;
+        const trans = color
+            ? `${rollTrans}, color ${colorFade}ms linear ${d}ms`
+            : rollTrans;
         const newFace = makeFace(toChar);
         newFace.style.transformOrigin = "50% 50%";
         newFace.style.transform = `translateY(${inStart}px) rotate(${tilt}deg)`;
@@ -228,10 +247,16 @@ export function animateSlotText(container, toText, options = {}) {
         }, base + exitOffset));
     }
     // Safety net: snap to a pristine DOM once the slowest letter has settled.
+    // If a non-interrupting call was deferred mid-roll, replay it now — it runs
+    // as a fresh roll from this clean baseline.
     const total = maxEnd + 80;
     timers.push(window.setTimeout(() => {
+        const pending = state.pending;
         states.delete(container);
         buildSlotText(container, toText);
+        if (pending) {
+            animateSlotText(container, pending.text, pending.options);
+        }
     }, total));
 }
 export function clearSlotText(container, text = "") {

package/dist/solid.d.ts

@@ -0,0 +1,14 @@
+import { type Accessor } from "solid-js";
+import { type SlotOptions } from "./index.js";
+export interface SlotTextParams {
+    text: string;
+    options?: SlotOptions;
+}
+export declare function slotText(element: HTMLElement, accessor: Accessor<SlotTextParams>): void;
+declare module "solid-js" {
+    namespace JSX {
+        interface Directives {
+            slotText: SlotTextParams;
+        }
+    }
+}

package/dist/solid.js

@@ -0,0 +1,22 @@
+import { createRenderEffect, onCleanup } from "solid-js";
+import { slotText as createSlotText } from "./index.js";
+export function slotText(element, accessor) {
+    const initial = accessor();
+    const controller = createSlotText(element, initial.text);
+    let previousText = initial.text;
+    let isFirstRun = true;
+    createRenderEffect(() => {
+        const next = accessor();
+        if (isFirstRun) {
+            isFirstRun = false;
+            return;
+        }
+        if (next.text !== previousText) {
+            previousText = next.text;
+            controller.set(next.text, next.options);
+        }
+    });
+    onCleanup(() => {
+        controller.destroy();
+    });
+}

package/dist/svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SlotOptions } from "./index.js";
+export interface SlotTextParams {
+    text: string;
+    options?: SlotOptions;
+}
+export declare function slotText(element: HTMLElement, params: SlotTextParams): {
+    update(params: SlotTextParams): void;
+    destroy(): void;
+};

package/dist/svelte.js

@@ -0,0 +1,16 @@
+import { slotText as createSlotText } from "./index.js";
+export function slotText(element, params) {
+    const controller = createSlotText(element, params.text);
+    let previousText = params.text;
+    return {
+        update(params) {
+            if (params.text === previousText)
+                return;
+            previousText = params.text;
+            controller.set(params.text, params.options);
+        },
+        destroy() {
+            controller.destroy();
+        },
+    };
+}

package/dist/vue.d.ts

@@ -1,5 +1,5 @@
 import { type PropType } from "vue";
-import { type SlotOptions } from "./slotText";
+import { type SlotOptions } from "./slotText.js";
 export declare const SlotText: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     text: {
         type: StringConstructor;

package/dist/vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, } from "vue";
-import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText";
+import { animateSlotText, buildSlotText, clearSlotText, } from "./slotText.js";
 export const SlotText = defineComponent({
     name: "SlotText",
     inheritAttrs: false,

package/examples/basic/index.html

@@ -37,15 +37,18 @@
       const label = slotText(document.querySelector("#copy-label"), "Copy");
 
       button.addEventListener("click", () => {
-        label.set("Copied", {
-          direction: "up",
-          skipUnchanged: false,
-          color: chromatic({ from: 190 }),
+        label.flash("Copied", {
+          enter: {
+            direction: "up",
+            skipUnchanged: false,
+            color: chromatic({ from: 190 }),
+          },
+          exit: {
+            direction: "down",
+            skipUnchanged: false,
+            color: chromatic({ from: 190 }),
+          },
         });
-
-        window.setTimeout(() => {
-          label.set("Copy", { direction: "down", skipUnchanged: false });
-        }, 1400);
       });
     </script>
   </body>

package/examples/env.d.ts

@@ -0,0 +1 @@
+declare module "slot-text/style.css";

package/examples/solid.tsx

@@ -0,0 +1,30 @@
+import { createSignal } from "solid-js";
+import "slot-text/style.css";
+import { chromatic } from "slot-text";
+import { slotText } from "slot-text/solid";
+
+void slotText;
+
+export function CopyButton() {
+  const [copied, setCopied] = createSignal(false);
+
+  function copy() {
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  }
+
+  return (
+    <button type="button" aria-label={copied() ? "Copied" : "Copy"} onClick={copy}>
+      <span
+        use:slotText={{
+          text: copied() ? "Copied" : "Copy",
+          options: {
+            direction: copied() ? "up" : "down",
+            skipUnchanged: false,
+            color: copied() ? chromatic({ from: 190 }) : undefined,
+          },
+        }}
+      />
+    </button>
+  );
+}

package/examples/svelte.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import "slot-text/style.css";
+  import { chromatic } from "slot-text";
+  import { slotText } from "slot-text/svelte";
+
+  let copied = false;
+
+  function copy() {
+    copied = true;
+    window.setTimeout(() => {
+      copied = false;
+    }, 1400);
+  }
+</script>
+
+<button type="button" aria-label={copied ? "Copied" : "Copy"} on:click={copy}>
+  <span
+    use:slotText={{
+      text: copied ? "Copied" : "Copy",
+      options: {
+        direction: copied ? "up" : "down",
+        skipUnchanged: false,
+        color: copied ? chromatic({ from: 190 }) : undefined,
+      },
+    }}
+  ></span>
+</button>

package/examples/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "paths": {
+      "slot-text": ["../src/index.ts"],
+      "slot-text/solid": ["../src/solid.ts"],
+      "slot-text/svelte": ["../src/svelte.ts"]
+    }
+  },
+  "include": ["env.d.ts", "solid.tsx", "*.svelte", "../src/**/*.ts"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slot-text",
-  "version": "0.1.2",
+  "version": "0.3.1",
   "description": "Dependency-free text roll animation for tiny, tactile UI labels.",
   "type": "module",
   "license": "MIT",
@@ -13,6 +13,7 @@
     "dist",
     "examples",
     "style.css",
+    "style.css.d.ts",
     "README.md",
     "LICENSE"
   ],
@@ -29,11 +30,24 @@
       "types": "./dist/vue.d.ts",
       "import": "./dist/vue.js"
     },
-    "./style.css": "./style.css"
+    "./solid": {
+      "types": "./dist/solid.d.ts",
+      "import": "./dist/solid.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "import": "./dist/svelte.js"
+    },
+    "./style.css": {
+      "types": "./style.css.d.ts",
+      "default": "./style.css"
+    }
   },
   "types": "./dist/index.d.ts",
   "peerDependencies": {
     "react": ">=18 <20",
+    "solid-js": ">=1.8 <2",
+    "svelte": ">=4 <6",
     "vue": ">=3.4 <4"
   },
   "peerDependenciesMeta": {
@@ -42,17 +56,29 @@
     },
     "vue": {
       "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   },
   "scripts": {
+    "prepublishOnly": "npm run build",
     "build": "tsc -p tsconfig.json",
     "check": "tsc -p tsconfig.json --noEmit",
-    "pack:check": "npm pack --dry-run"
+    "pack:check": "npm pack --dry-run",
+    "test": "vitest run"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
+    "happy-dom": "^20.10.2",
     "react": "^19.2.7",
+    "solid-js": "^1.9.13",
+    "svelte": "^5.56.3",
     "typescript": "^5.8.3",
+    "vitest": "^4.1.8",
     "vue": "^3.5.35"
   }
 }

package/style.css.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;