speak-friend-react 0.0.0-stage → 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DeepKind Foundation
+
+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,72 @@
-# Temporary Holding Version
+# speak-friend-react
 
-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.
+React bindings for [`speak-friend`](../core): a docked tour guide with a highlight ring. Built with a focus on accessibility.
+
+```tsx
+import { TourGuide, TourProvider, useTours } from "speak-friend-react";
+import "speak-friend-react/styles.css";
+
+<TourProvider tours={tours} store={store} context={{ roles }} navigate={(route) => router.push(route)}>
+  <App />
+  <TourGuide
+    labels={{
+      counter: (n, total) => `Step ${n} of ${total}`,
+      back: "Back",
+      next: "Next",
+      finish: "Finish",
+      close: "Close",
+    }}
+  />
+</TourProvider>;
+```
+
+Mark each step's target with `data-tour`:
+
+```tsx
+<section data-tour="next-step">...</section>
+```
+
+Start a tour from anywhere under the provider:
+
+```tsx
+const tours = useTours();
+await tours.start("welcome");
+```
+
+## Behaviour
+
+- The guide docks at the bottom, on the `end` side by default (`position="start"` mirrors it). On narrow screens it
+  becomes a bottom sheet.
+- A ring marks the target. The page is not dimmed and stays usable.
+- Focus moves to the step title on every step. `announce="live"` keeps focus and announces the step instead.
+- Escape closes the tour and returns focus to where it was. Starting again resumes from the same step.
+- A step whose target is not on the page is skipped and leaves the count.
+- While the guide is open, `scroll-padding-bottom` keeps focused elements clear of it.
+
+## Props of `TourProvider`
+
+`tours`, `store`, `context`, `navigate` and `maxDismissals` are passed to the engine. Two more:
+
+| Prop            | Default         | Description                                                          |
+| --------------- | --------------- | -------------------------------------------------------------------- |
+| `targetTimeout` | `1500`          | Milliseconds to wait for a step's target before skipping the step.   |
+| `onError`       | `console.error` | Called when a step change fails, for example when the store rejects. |
+
+## Props of `TourGuide`
+
+| Prop            | Default  | Description                                                 |
+| --------------- | -------- | ----------------------------------------------------------- |
+| `labels`        | required | Every string: `counter`, `back`, `next`, `finish`, `close`. |
+| `position`      | `end`    | `start` or `end`.                                           |
+| `headingLevel`  | `2`      | Heading level of the step title.                            |
+| `announce`      | `focus`  | `focus` or `live`.                                          |
+| `closeOnEscape` | `true`   |                                                             |
+| `className`     |          | Added to the guide.                                         |
+
+## Styling
+
+`speak-friend-react/styles.css` defines the layout and a neutral light and dark theme. Override the custom properties to
+match your app: `--sf-surface`, `--sf-ink`, `--sf-line`, `--sf-accent`, `--sf-accent-ink`, `--sf-primary`,
+`--sf-primary-ink`, `--sf-primary-edge`, `--sf-done`, `--sf-halo`, `--sf-width`, `--sf-gap`, `--sf-z`.
+
+The ring and the guide keep their borders in Windows high contrast mode, and animation is off with reduced motion.

package/dist/guide.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from "react";
+/** Every string the guide shows. The library has no text of its own. */
+export interface GuideLabels {
+    /** Text for the step counter, for example `Step 2 of 4`. `index` is 1-based. */
+    counter: (index: number, total: number) => string;
+    back: string;
+    next: string;
+    /** Label of the next button on the last step. */
+    finish: string;
+    close: string;
+}
+export interface TourGuideProps {
+    labels: GuideLabels;
+    /** Horizontal side of the dock. Logical, so it mirrors in right-to-left layouts. Default `end`. */
+    position?: "start" | "end";
+    /** Heading level of the step title. Default 2. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** `focus` moves focus to the step title; `live` keeps focus and announces the step. Default `focus`. */
+    announce?: "focus" | "live";
+    /** Close the tour on Escape. Default true. */
+    closeOnEscape?: boolean;
+    className?: string;
+}
+/** The docked guide with its highlight ring. Renders only while a tour is running. */
+export declare function TourGuide({ labels, position, headingLevel, announce, closeOnEscape, className, }: TourGuideProps): JSX.Element | null;

package/dist/guide.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement, useEffect, useId, useLayoutEffect, useRef, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { Ring } from "./ring.js";
+import { useRun, useTourState, useTours } from "./provider.js";
+import { findTarget } from "./wait-for-target.js";
+const noSubscription = () => () => undefined;
+const reducedMotion = () => typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** The docked guide with its highlight ring. Renders only while a tour is running. */
+export function TourGuide({ labels, position = "end", headingLevel = 2, announce = "focus", closeOnEscape = true, className, }) {
+    const tours = useTours();
+    const run = useRun();
+    const state = useTourState();
+    const id = useId();
+    const titleRef = useRef(null);
+    const guideRef = useRef(null);
+    const opener = useRef(null);
+    // False on the server and during hydration, true afterwards: the guide only exists in the browser.
+    const mounted = useSyncExternalStore(noSubscription, () => true, () => false);
+    const running = state.status === "running" && state.step !== null;
+    const stepId = state.step?.id;
+    // Remember where focus was when the tour started and give it back when the tour ends.
+    useLayoutEffect(() => {
+        if (!running)
+            return;
+        opener.current = document.activeElement;
+        return () => {
+            const el = opener.current;
+            if (el instanceof HTMLElement && el.isConnected)
+                el.focus({ preventScroll: true });
+            opener.current = null;
+        };
+    }, [running]);
+    useLayoutEffect(() => {
+        if (running && announce === "focus")
+            titleRef.current?.focus({ preventScroll: true });
+    }, [running, stepId, announce]);
+    useEffect(() => {
+        if (!running || !state.step)
+            return;
+        findTarget(state.step.target)?.scrollIntoView({ block: "center", behavior: reducedMotion() ? "auto" : "smooth" });
+    }, [running, state.step]);
+    // Keep focused elements clear of the dock (WCAG 2.4.11).
+    useEffect(() => {
+        const guide = guideRef.current;
+        if (!running || !guide)
+            return;
+        const style = document.documentElement.style;
+        const before = style.getPropertyValue("scroll-padding-bottom");
+        const apply = () => style.setProperty("scroll-padding-bottom", `${guide.offsetHeight + 24}px`);
+        apply();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(apply);
+        observer?.observe(guide);
+        return () => {
+            observer?.disconnect();
+            if (before)
+                style.setProperty("scroll-padding-bottom", before);
+            else
+                style.removeProperty("scroll-padding-bottom");
+        };
+    }, [running]);
+    useEffect(() => {
+        if (!running || !closeOnEscape)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape" && !e.defaultPrevented && !e.isComposing)
+                run(tours.close());
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [running, closeOnEscape, tours, run]);
+    if (!mounted || !running || !state.step)
+        return null;
+    const { step, index, total } = state;
+    const last = index === total - 1;
+    const counter = labels.counter(index + 1, total);
+    return (_jsxs(_Fragment, { children: [_jsx(Ring, { target: step.target }, step.id), createPortal(_jsxs("section", { ref: guideRef, role: "dialog", "aria-labelledby": id, className: className ? `sf-guide ${className}` : "sf-guide", "data-position": position, children: [_jsxs("div", { className: "sf-band", children: [_jsx("span", { className: "sf-count", children: counter }), _jsx("span", { className: "sf-progress", "aria-hidden": "true", children: Array.from({ length: total }, (_, i) => (_jsx("i", { className: i < index ? "sf-done" : i === index ? "sf-current" : undefined }, i))) })] }), _jsxs("div", { className: "sf-body", children: [createElement(`h${headingLevel}`, { id, ref: titleRef, tabIndex: -1, className: "sf-title" }, step.title), _jsx("p", { className: "sf-text", children: step.body }), _jsxs("div", { className: "sf-actions", children: [_jsx("button", { type: "button", className: "sf-button", onClick: () => run(tours.back()), disabled: index === 0, children: labels.back }), _jsx("button", { type: "button", className: "sf-button sf-primary", onClick: () => run(tours.next()), children: last ? labels.finish : labels.next }), _jsx("button", { type: "button", className: "sf-button sf-quiet", onClick: () => run(tours.close()), children: labels.close })] })] }), announce === "live" && (_jsx("div", { className: "sf-visually-hidden", role: "status", children: `${counter}: ${step.title}` }))] }), document.body)] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/** Creates the tour controller and shares it with the components below. */
+export { TourProvider, useTours, useTourState } from "./provider.js";
+/** Props of `TourProvider`. */
+export type { TourProviderProps } from "./provider.js";
+/** The docked guide with its highlight ring; renders only while a tour is running. */
+export { TourGuide } from "./guide.js";
+/** Strings and props of `TourGuide`. */
+export type { GuideLabels, TourGuideProps } from "./guide.js";
+/** A ring around the element marked `data-tour`. */
+export { Ring } from "./ring.js";
+/** Resolves true when a `data-tour` target is on the page, waiting up to a timeout. */
+export { waitForTarget } from "./wait-for-target.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+/** Creates the tour controller and shares it with the components below. */
+export { TourProvider, useTours, useTourState } from "./provider.js";
+/** The docked guide with its highlight ring; renders only while a tour is running. */
+export { TourGuide } from "./guide.js";
+/** A ring around the element marked `data-tour`. */
+export { Ring } from "./ring.js";
+/** Resolves true when a `data-tour` target is on the page, waiting up to a timeout. */
+export { waitForTarget } from "./wait-for-target.js";

package/dist/provider.d.ts

@@ -0,0 +1,17 @@
+import { type JSX, type ReactNode } from "react";
+import { type Options, type Snapshot, type Tours } from "speak-friend";
+export interface TourProviderProps<C> extends Omit<Options<C>, "isAvailable"> {
+    children: ReactNode;
+    /** How long to wait for a step's target to appear before skipping the step, in ms. Default 1500. */
+    targetTimeout?: number;
+    /** Called when a step change fails, for example when the progress store rejects. Default `console.error`. */
+    onError?: (error: unknown) => void;
+}
+/** Creates the tour controller and shares it with the components below. */
+export declare function TourProvider<C>({ children, targetTimeout, onError, ...options }: TourProviderProps<C>): JSX.Element;
+/** The tour controller: offered, start, next, back, close, restart, dismiss. */
+export declare function useTours<C = unknown>(): Tours<C>;
+/** Runs a step change and reports a failure through the provider's `onError`. */
+export declare function useRun(): (action: Promise<void>) => void;
+/** The current state; re-renders on every change. */
+export declare function useTourState<C = unknown>(): Snapshot<C>;

package/dist/provider.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { createTours } from "speak-friend";
+import { waitForTarget } from "./wait-for-target.js";
+const TourContext = createContext(null);
+const logError = (error) => console.error(error);
+/** Creates the tour controller and shares it with the components below. */
+export function TourProvider({ children, targetTimeout = 1500, onError = logError, ...options }) {
+    const { tours, store, context, navigate, maxDismissals } = options;
+    const value = useMemo(() => ({
+        tours: createTours({
+            tours,
+            store,
+            context,
+            navigate,
+            maxDismissals,
+            isAvailable: (step) => waitForTarget(step.target, targetTimeout),
+        }),
+        onError,
+    }), [tours, store, context, navigate, maxDismissals, targetTimeout, onError]);
+    return _jsx(TourContext.Provider, { value: value, children: children });
+}
+const useContextValue = () => {
+    const value = useContext(TourContext);
+    if (!value)
+        throw new Error("useTours must be used inside TourProvider");
+    return value;
+};
+/** The tour controller: offered, start, next, back, close, restart, dismiss. */
+export function useTours() {
+    return useContextValue().tours;
+}
+/** Runs a step change and reports a failure through the provider's `onError`. */
+export function useRun() {
+    const { onError } = useContextValue();
+    return (action) => void action.catch(onError);
+}
+/** The current state; re-renders on every change. */
+export function useTourState() {
+    const t = useTours();
+    return useSyncExternalStore((notify) => t.subscribe(notify), t.snapshot, t.snapshot);
+}

package/dist/ring.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+/** A ring around the element marked `data-tour="<target>"`. It never blocks pointer events. */
+export declare function Ring({ target }: {
+    target: string;
+}): JSX.Element | null;

package/dist/ring.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { findTarget } from "./wait-for-target.js";
+/** Follows the target's box through scrolling, resizing and layout changes. */
+function useBox(target) {
+    const [box, setBox] = useState(null);
+    useEffect(() => {
+        const el = findTarget(target);
+        if (!el)
+            return;
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            const r = el.getBoundingClientRect();
+            setBox((p) => p && p.top === r.top && p.left === r.left && p.width === r.width && p.height === r.height
+                ? p
+                : { top: r.top, left: r.left, width: r.width, height: r.height });
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(measure);
+        };
+        measure();
+        window.addEventListener("scroll", schedule, { capture: true, passive: true });
+        window.addEventListener("resize", schedule);
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+        observer?.observe(el);
+        return () => {
+            window.removeEventListener("scroll", schedule, { capture: true });
+            window.removeEventListener("resize", schedule);
+            observer?.disconnect();
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [target]);
+    return box;
+}
+/** A ring around the element marked `data-tour="<target>"`. It never blocks pointer events. */
+export function Ring({ target }) {
+    const box = useBox(target);
+    if (!box || typeof document === "undefined")
+        return null;
+    return createPortal(_jsx("div", { className: "sf-ring", "aria-hidden": "true", style: { top: box.top, left: box.left, width: box.width, height: box.height } }), document.body);
+}

package/dist/styles.css

@@ -0,0 +1,231 @@
+.sf-guide,
+.sf-ring {
+  --sf-surface: oklch(100% 0 0);
+  --sf-ink: oklch(23% 0.03 285);
+  --sf-line: oklch(62% 0.02 285);
+  --sf-accent: oklch(44% 0.19 290);
+  --sf-accent-ink: oklch(100% 0 0);
+  --sf-primary: oklch(87% 0.2 125);
+  --sf-primary-ink: oklch(19% 0.02 285);
+  --sf-primary-edge: oklch(53% 0.13 125);
+  --sf-done: oklch(53% 0.13 125);
+  --sf-halo: oklch(100% 0 0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .sf-guide,
+  .sf-ring {
+    --sf-surface: oklch(23% 0.035 285);
+    --sf-ink: oklch(95% 0.012 95);
+    --sf-line: oklch(62% 0.04 285);
+    --sf-accent: oklch(80% 0.11 300);
+    --sf-accent-ink: oklch(19% 0.02 285);
+    --sf-primary-edge: transparent;
+    --sf-done: oklch(81% 0.16 125);
+    --sf-halo: oklch(19% 0.02 285);
+  }
+}
+
+.sf-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sf-ring {
+  position: fixed;
+  z-index: var(--sf-z, 1000);
+  pointer-events: none;
+  border-radius: var(--sf-ring-radius, 12px);
+  outline: 3px solid var(--sf-accent);
+  outline-offset: 4px;
+  box-shadow: 0 0 0 4px var(--sf-halo);
+}
+
+.sf-guide {
+  position: fixed;
+  z-index: calc(var(--sf-z, 1000) + 1);
+  inset-block-end: var(--sf-gap, 16px);
+  width: min(var(--sf-width, 340px), calc(100vw - 2 * var(--sf-gap, 16px)));
+  max-height: calc(100dvh - 2 * var(--sf-gap, 16px));
+  overflow: auto;
+  color: var(--sf-ink);
+  background: var(--sf-surface);
+  border: 2px solid var(--sf-accent);
+  border-radius: 16px;
+  box-shadow:
+    0 4px 8px oklch(0% 0 0 / 0.12),
+    0 24px 48px -12px oklch(0% 0 0 / 0.5);
+  font: inherit;
+}
+
+.sf-guide[data-position="end"] {
+  inset-inline-end: var(--sf-gap, 16px);
+}
+
+.sf-guide[data-position="start"] {
+  inset-inline-start: var(--sf-gap, 16px);
+}
+
+@media (max-width: 640px) {
+  .sf-guide {
+    inset-inline: 0;
+    inset-block-end: 0;
+    width: auto;
+    max-height: 70dvh;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+    border-width: 2px 0 0;
+    border-radius: 16px 16px 0 0;
+  }
+}
+
+.sf-band {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 16px;
+  color: var(--sf-accent-ink);
+  background: var(--sf-accent);
+}
+
+.sf-count {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.sf-progress {
+  display: flex;
+  gap: 4px;
+}
+
+.sf-progress i {
+  width: 16px;
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--sf-accent-ink) 35%, transparent);
+}
+
+.sf-progress i.sf-done {
+  background: color-mix(in srgb, var(--sf-accent-ink) 70%, transparent);
+}
+
+.sf-progress i.sf-current {
+  background: var(--sf-accent-ink);
+}
+
+.sf-body {
+  padding: 12px 16px;
+}
+
+.sf-title {
+  margin: 0 0 4px;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.sf-title:focus {
+  outline: none;
+}
+
+.sf-title:focus-visible {
+  outline: 2px solid var(--sf-accent);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+.sf-text {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.sf-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.sf-button {
+  min-height: 32px;
+  padding: 4px 12px;
+  font: inherit;
+  font-weight: 700;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--sf-line);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+@media (pointer: coarse) {
+  .sf-button {
+    min-height: 44px;
+    padding-inline: 16px;
+  }
+}
+
+.sf-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sf-button:focus-visible {
+  outline: 3px solid var(--sf-accent);
+  outline-offset: 4px;
+}
+
+.sf-primary {
+  color: var(--sf-primary-ink);
+  background: var(--sf-primary);
+  border: 2px solid var(--sf-primary-edge);
+}
+
+.sf-quiet {
+  margin-inline-start: auto;
+  border-color: transparent;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sf-guide {
+    animation: sf-in 0.18s ease-out;
+  }
+
+  @keyframes sf-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+}
+
+@media (prefers-contrast: more) {
+  .sf-ring {
+    outline-width: 4px;
+  }
+
+  .sf-guide {
+    border-width: 3px;
+  }
+}
+
+@media (forced-colors: active) {
+  .sf-ring {
+    outline-color: Highlight;
+    box-shadow: none;
+  }
+
+  .sf-guide {
+    border-color: CanvasText;
+  }
+
+  .sf-band {
+    border-block-end: 2px solid CanvasText;
+  }
+}

package/dist/wait-for-target.d.ts

@@ -0,0 +1,4 @@
+/** The visible element marked `data-tour="<target>"`, or null. */
+export declare const findTarget: (target: string) => HTMLElement | null;
+/** Resolves true when the target is on the page, waiting up to `timeout` ms for it to appear. */
+export declare function waitForTarget(target: string, timeout: number): Promise<boolean>;

package/dist/wait-for-target.js

@@ -0,0 +1,27 @@
+const escapeValue = (value) => typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+const find = (target) => {
+    const el = document.querySelector(`[data-tour="${escapeValue(target)}"]`);
+    return el && el.getClientRects().length > 0 ? el : null;
+};
+/** The visible element marked `data-tour="<target>"`, or null. */
+export const findTarget = (target) => typeof document === "undefined" ? null : find(target);
+/** Resolves true when the target is on the page, waiting up to `timeout` ms for it to appear. */
+export function waitForTarget(target, timeout) {
+    if (typeof document === "undefined")
+        return Promise.resolve(false);
+    if (find(target))
+        return Promise.resolve(true);
+    return new Promise((resolve) => {
+        const done = (found) => {
+            observer.disconnect();
+            clearTimeout(timer);
+            resolve(found);
+        };
+        const observer = new MutationObserver(() => {
+            if (find(target))
+                done(true);
+        });
+        const timer = setTimeout(() => done(find(target) !== null), timeout);
+        observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+    });
+}

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "speak-friend-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.1",
+  "description": "React bindings for speak-friend: an accessible docked tour guide with a highlight ring.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DeepKind-Foundation/speak-friend.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/DeepKind-Foundation/speak-friend/issues"
+  },
+  "homepage": "https://github.com/DeepKind-Foundation/speak-friend#readme",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "speak-friend": "0.1.0-alpha.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "axe-core": "4.10.3",
+    "jsdom": "26.1.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
+  },
+  "keywords": [
+    "tour",
+    "onboarding",
+    "walkthrough",
+    "accessibility",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "tag": "next"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "smoke": "node scripts/smoke.mjs"
+  }
 }