@react-text-game/ui 0.1.0

package/README.md

@@ -0,0 +1,297 @@
+# @react-text-game/ui
+
+UI components library for react-text-game built with React 19, TypeScript, and Tailwind CSS v4.
+
+## Installation
+
+```bash
+bun install
+```
+
+## Development
+
+```bash
+# Build once
+bun run build
+
+# Watch mode
+bun run dev
+```
+
+## Theme Customization
+
+This package uses **Tailwind CSS v4** with semantic color tokens that can be easily customized to match your game's design system.
+
+### How It Works
+
+All components use semantic color names (like `primary`, `secondary`, `success`, etc.) instead of hardcoded colors. This means you can completely customize the look and feel by overriding these color variables in your application.
+
+### Available Semantic Colors
+
+#### Brand Colors
+- `primary-*` (50-950) - Main brand color
+- `secondary-*` (50-950) - Secondary brand color
+
+#### Semantic State Colors
+- `success-*` (50-950) - Success states
+- `warning-*` (50-950) - Warning states
+- `danger-*` (50-950) - Error/danger states
+- `info-*` (50-950) - Informational states
+
+#### Neutral/UI Colors
+- `muted-*` (50-950) - Muted/subtle UI elements
+- `background` - Main background color
+- `foreground` - Main text color
+- `card` / `card-foreground` - Card backgrounds and text
+- `popover` / `popover-foreground` - Popover backgrounds and text
+- `border` - Border color
+- `input` - Input border color
+- `ring` - Focus ring color
+- `accent` / `accent-foreground` - Accent backgrounds and text
+- `destructive` / `destructive-foreground` - Destructive action colors
+
+### Customizing the Theme
+
+You can override any theme color in your application's CSS file:
+
+#### Example 1: Custom Brand Colors
+
+```css
+@import "@react-text-game/ui/styles";
+
+@theme {
+  /* Override primary brand color to purple */
+  --color-primary-50: oklch(0.98 0.02 300);
+  --color-primary-100: oklch(0.95 0.05 300);
+  --color-primary-200: oklch(0.90 0.10 300);
+  --color-primary-300: oklch(0.82 0.15 300);
+  --color-primary-400: oklch(0.72 0.20 300);
+  --color-primary-500: oklch(0.62 0.24 300);
+  --color-primary-600: oklch(0.52 0.22 300);
+  --color-primary-700: oklch(0.44 0.18 300);
+  --color-primary-800: oklch(0.36 0.14 300);
+  --color-primary-900: oklch(0.28 0.10 300);
+  --color-primary-950: oklch(0.18 0.06 300);
+}
+```
+
+#### Example 2: Complete Custom Theme
+
+```css
+@import "@react-text-game/ui/styles";
+
+@theme {
+  /* Replace entire color palette */
+  --color-*: initial;
+
+  /* Custom brand colors */
+  --color-primary-500: oklch(0.65 0.25 265);
+  --color-secondary-500: oklch(0.70 0.20 180);
+
+  /* Custom UI colors */
+  --color-background: oklch(0.98 0.002 264);
+  --color-foreground: oklch(0.20 0.01 264);
+  --color-border: oklch(0.88 0.005 264);
+
+  /* Success/Error colors */
+  --color-success-500: oklch(0.65 0.18 150);
+  --color-danger-500: oklch(0.65 0.22 30);
+}
+```
+
+#### Example 3: Dark Mode Custom Colors
+
+```css
+@import "@react-text-game/ui/styles";
+
+/* Override dark mode colors */
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-background: oklch(0.10 0.01 264);
+    --color-foreground: oklch(0.95 0.002 264);
+    --color-primary-500: oklch(0.70 0.25 265);
+  }
+}
+```
+
+### Using in Your Application
+
+1. **Import the styles** in your main CSS file:
+
+```css
+@import "@react-text-game/ui/styles";
+
+/* Your custom theme overrides here */
+@theme {
+  --color-primary-500: your-custom-color;
+}
+```
+
+2. **Import components** in your React code:
+
+```tsx
+import { Button, MainMenu, StoryComponent } from '@react-text-game/ui';
+```
+
+### Color Format: oklch()
+
+This package uses the `oklch()` color format from Tailwind CSS v4, which provides:
+- **Perceptually uniform** colors
+- **Better dark mode** transitions
+- **Predictable lightness** control
+
+Format: `oklch(lightness chroma hue)`
+- `lightness`: 0-1 (0 = black, 1 = white)
+- `chroma`: 0-0.4 (saturation intensity)
+- `hue`: 0-360 (color angle)
+
+Use [oklch.com](https://oklch.com) to pick and convert colors.
+
+### Component Customization
+
+Components also accept `className` props for additional styling:
+
+```tsx
+<Button
+  variant="solid"
+  color="primary"
+  className="custom-additional-styles"
+>
+  Click me
+</Button>
+```
+
+### Tips
+
+1. **Start small**: Override just `primary-500` and `secondary-500` to quickly brand your game
+2. **Use the scale**: The `-50` to `-950` scale provides consistent light/dark variants
+3. **Test dark mode**: Always test your custom colors in both light and dark modes
+4. **Maintain contrast**: Ensure sufficient contrast between foreground and background colors
+
+## ⚠️ Theme Variable Conflicts
+
+### Potential Issue
+
+This package uses **global CSS variables** (like `--color-primary-500`, `--color-background`, etc.) that may conflict with other design systems if you're mixing multiple component libraries.
+
+**Example conflict:**
+```css
+/* Both systems try to define the same variables */
+@import "@react-text-game/ui/styles";  /* Uses --color-primary-500 */
+@import "@shadcn/ui/styles";           /* Also uses --color-primary-500 */
+
+@theme {
+  --color-primary-500: oklch(...);     /* Which library does this affect? Both! */
+}
+```
+
+### Solutions
+
+#### Option 1: Use as Primary Design System (Recommended)
+
+This package is designed to be your **primary UI system** for game interfaces. If you're building a game, use `@react-text-game/ui` as your main component library and avoid mixing with other design systems.
+
+#### Option 2: Scope Your Game UI
+
+If you **must** mix with other design systems (e.g., using shadcn for admin panels and our UI for the game), wrap the game in a dedicated container:
+
+```tsx
+// App.tsx
+import '@react-text-game/ui/styles';
+
+function App() {
+  return (
+    <>
+      {/* Admin UI with shadcn */}
+      <AdminPanel />
+
+      {/* Game UI isolated in a scope */}
+      <div className="game-container">
+        <GameProvider>
+          {/* Our components here */}
+        </GameProvider>
+      </div>
+    </>
+  );
+}
+```
+
+Then create scoped overrides:
+```css
+/* app.css */
+@import "@react-text-game/ui/styles";
+
+/* Scoped theme for game only */
+.game-container {
+  /* Override game theme variables specifically */
+  --color-primary-500: oklch(0.65 0.25 300);
+  --color-background: oklch(0.05 0.01 280);
+}
+```
+
+#### Option 3: CSS Layers for Priority Control
+
+Use CSS `@layer` to control which system takes precedence:
+
+```css
+@import "@react-text-game/ui/styles" layer(game-ui);
+@import "@shadcn/ui/styles" layer(admin-ui);
+
+/* Define layer priority */
+@layer game-ui, admin-ui;
+
+/* game-ui variables will override admin-ui */
+```
+
+#### Option 4: Manual Variable Remapping (Advanced)
+
+If you need fine-grained control, manually remap variables:
+
+```css
+@import "@react-text-game/ui/styles";
+
+@theme {
+  /* Remap our variables to avoid conflicts */
+  --rtg-primary: var(--color-primary-500);
+  --rtg-background: var(--color-background);
+}
+```
+
+Then create wrapper components:
+```tsx
+// CustomButton.tsx
+import { Button as RTGButton } from '@react-text-game/ui';
+
+export const GameButton = (props) => (
+  <div style={{
+    '--color-primary-500': 'var(--rtg-primary)',
+    '--color-background': 'var(--rtg-background)'
+  }}>
+    <RTGButton {...props} />
+  </div>
+);
+```
+
+### Best Practices
+
+✅ **DO**: Use this as your primary design system for game UIs
+✅ **DO**: Override theme variables at the root for global customization
+✅ **DO**: Use scoped containers when mixing with other libraries
+❌ **DON'T**: Mix multiple design systems in the same view without scoping
+❌ **DON'T**: Import multiple `@theme` definitions at the same level without layers
+
+## Components
+
+- `Button` - Customizable button with multiple variants (solid, faded, bordered, light, flat, ghost, shadow)
+- `Spinner` - Loading spinner
+- `GameProvider` - Main game wrapper with dev tools
+- `MainMenu` - Game menu with save/load functionality
+- `StoryComponent` - Story passage renderer
+- `InteractiveMapComponent` - Interactive map renderer
+- `SaveLoadModal` - Save/Load game modal
+- `Tooltip` - Tooltip component
+- And more...
+
+## License
+
+MIT

package/dist/components/DevModeDrawer/CopyButton.d.ts

@@ -0,0 +1,4 @@
+export declare const CopyButton: ({ textToCopy }: {
+    textToCopy: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyButton.d.ts.map

package/dist/components/DevModeDrawer/CopyButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/CopyButton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,GAAI,gBAAgB;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,4CAgDhE,CAAC"}

package/dist/components/DevModeDrawer/CopyButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+export const CopyButton = ({ textToCopy }) => {
+    const [showCopied, setShowCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            setShowCopied(true);
+            setTimeout(() => setShowCopied(false), 1000);
+        }
+        catch (err) {
+            console.error("Failed to copy:", err);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "ml-1 text-sm cursor-pointer text-card-foreground", onClick: handleCopy, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 -.5 25 25", height: 24, width: 24, className: "inline-block", children: _jsxs("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", children: [_jsx("path", { d: "M17.68 14.25a2.93 2.93 0 0 1-2.93 2.93H7.43a2.93 2.93 0 0 1-2.93-2.93V6.93A2.93 2.93 0 0 1 7.43 4h7.32a2.93 2.93 0 0 1 2.93 2.93v7.32Z", clipRule: "evenodd" }), _jsx("path", { d: "M10.25 20h7.32a2.93 2.93 0 0 0 2.93-2.93V9.75" })] }) }) }), showCopied && (_jsx("span", { className: "ml-2 text-xs text-success-600", children: "copied" }))] }));
+};
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/DevModeDrawer/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/CopyButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,UAAU,EAA0B,EAAE,EAAE;IACjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC1B,IAAI,CAAC;YACD,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;YAChD,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;QAC1C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,8BACI,iBACI,SAAS,EAAC,kDAAkD,EAC5D,OAAO,EAAE,UAAU,YAEnB,cACI,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,aAAa,EACrB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,SAAS,EAAC,cAAc,YAExB,aACI,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,KAAK,aAEjB,eACI,CAAC,EAAC,wIAAwI,EAC1I,QAAQ,EAAC,SAAS,GACpB,EACF,eAAM,CAAC,EAAC,+CAA+C,GAAG,IAC1D,GACF,GACD,EACR,UAAU,IAAI,CACX,eAAM,SAAS,EAAC,+BAA+B,uBAExC,CACV,IACF,CACN,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/CurrentPassageData.d.ts

@@ -0,0 +1,4 @@
+export declare const CurrentPassageData: ({ isOpen }: {
+    isOpen: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CurrentPassageData.d.ts.map

package/dist/components/DevModeDrawer/CurrentPassageData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentPassageData.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/CurrentPassageData.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,4CA2CjE,CAAC"}

package/dist/components/DevModeDrawer/CurrentPassageData.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Game } from "@react-text-game/core";
+import { useEffect, useState } from "react";
+import { CopyButton } from "./CopyButton";
+import { RefreshButton } from "./RefreshButton";
+export const CurrentPassageData = ({ isOpen }) => {
+    const [currentPassageData, setCurrentPassageData] = useState("");
+    const [showPassageDataRefreshed, setShowPassageDataRefreshed] = useState(false);
+    const onReloadPassageData = () => {
+        const psg = Game.currentPassage;
+        const data = JSON.stringify({ passage: psg, data: psg?.display() }, null, 2);
+        setCurrentPassageData(data);
+        setShowPassageDataRefreshed(true);
+        setTimeout(() => setShowPassageDataRefreshed(false), 500);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            onReloadPassageData();
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "current-passage", className: "text-sm text-card-foreground", children: "Current Passage data" }), _jsx(RefreshButton, { onClick: onReloadPassageData }), _jsx(CopyButton, { textToCopy: currentPassageData }), showPassageDataRefreshed && (_jsx("span", { className: "ml-2 text-xs text-success-600", children: "refreshed" }))] }), _jsx("textarea", { id: "current-passage", disabled: true, className: "w-full h-30 bg-muted/20 border border-input rounded px-2 text-sm text-muted-foreground cursor-default resize-none", value: currentPassageData })] }));
+};
+//# sourceMappingURL=CurrentPassageData.js.map

package/dist/components/DevModeDrawer/CurrentPassageData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentPassageData.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/CurrentPassageData.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE;IAClE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC;QAChC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7E,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAClC,UAAU,CAAC,GAAG,EAAE,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,EAAE,CAAC;YACT,mBAAmB,EAAE,CAAC;QAC1B,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,eAAK,SAAS,EAAC,QAAQ,aACnB,0BACI,gBACI,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,8BAA8B,qCAGpC,EACR,KAAC,aAAa,IAAC,OAAO,EAAE,mBAAmB,GAAI,EAC/C,KAAC,UAAU,IAAC,UAAU,EAAE,kBAAkB,GAAI,EAC7C,wBAAwB,IAAI,CACzB,eAAM,SAAS,EAAC,+BAA+B,0BAExC,CACV,IACC,EACN,mBACI,EAAE,EAAC,iBAAiB,EACpB,QAAQ,QACR,SAAS,EAAC,mHAAmH,EAC7H,KAAK,EAAE,kBAAkB,GAC3B,IACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/DevModeDrawer.d.ts

@@ -0,0 +1,7 @@
+import { NewOptions } from "@react-text-game/core";
+type DevModeDrawerProps = Readonly<{
+    options: NewOptions;
+}>;
+export declare const DevModeDrawer: ({ options }: DevModeDrawerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DevModeDrawer.d.ts.map

package/dist/components/DevModeDrawer/DevModeDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevModeDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/DevModeDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAqB,MAAM,uBAAuB,CAAC;AAU5E,KAAK,kBAAkB,GAAG,QAAQ,CAAC;IAC/B,OAAO,EAAE,UAAU,CAAC;CACvB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,aAAa,kBAAkB,mDAgF5D,CAAC"}

package/dist/components/DevModeDrawer/DevModeDrawer.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Game, useCurrentPassage } from "@react-text-game/core";
+import { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { useLocalStorage } from "../../hooks";
+import { CurrentPassageData } from "./CurrentPassageData";
+import { GameData } from "./GameData";
+import { JumpToPassage } from "./JumpToPassage";
+export const DevModeDrawer = ({ options }) => {
+    const { isDevMode } = options;
+    const [isOpen, setIsOpen] = useState(false);
+    const passage = useCurrentPassage();
+    const [saveStateOnReload, setSaveStateOnReload] = useLocalStorage("saveStateOnReload", true);
+    useEffect(() => {
+        if (!saveStateOnReload) {
+            console.log("Disabling autosave for this session");
+            Game.disableAutoSave();
+            Game.clearAutoSave();
+        }
+    }, [saveStateOnReload]);
+    if (!isDevMode) {
+        return null;
+    }
+    return (_jsx("div", { className: "fixed bottom-0 left-1/2 -translate-x-1/2 z-100000000", children: _jsxs("div", { className: twMerge("bg-card border border-border rounded-t-lg shadow-lg transition-all duration-300", isOpen
+                ? "translate-y-0 w-screen md:w-[60vw]"
+                : "translate-y-[calc(100%-1rem)] w-auto"), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: "w-full py-2 px-6 flex justify-center items-center cursor-pointer bg-primary-500 hover:bg-primary-600 rounded-t-lg", children: _jsx("div", { className: "w-12 h-1 bg-muted-400 rounded-full" }) }), isOpen && (_jsxs("div", { className: "p-4 border-t border-border", children: [_jsx("h3", { className: "text-lg font-semibold mb-3 text-card-foreground", children: "Dev Mode" }), _jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "flex items-center flex-wrap gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", id: "save-state-on-reload", checked: saveStateOnReload, onChange: (e) => setSaveStateOnReload(e.target.checked) }), _jsx("label", { htmlFor: "save-state-on-reload", className: "text-card-foreground", children: "Save state on reload" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { htmlFor: "current-passage-id", className: "text-card-foreground", children: "Current passage ID" }), _jsx("input", { id: "current-passage-id", type: "text", value: passage?.id || "none", readOnly: true, className: "max-w-40 bg-muted/20 border border-input rounded px-2 text-sm text-muted-foreground cursor-default" })] }), _jsx(JumpToPassage, {}), _jsx(GameData, { isOpen: isOpen }), _jsx(CurrentPassageData, { isOpen: isOpen })] }) })] }))] }) }));
+};
+//# sourceMappingURL=DevModeDrawer.js.map

package/dist/components/DevModeDrawer/DevModeDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevModeDrawer.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/DevModeDrawer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAc,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAsB,EAAE,EAAE;IAC7D,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,eAAe,CAC7D,mBAAmB,EACnB,IAAI,CACP,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACrB,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;YACnD,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;IACL,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAC,sDAAsD,YACjE,eACI,SAAS,EAAE,OAAO,CACd,iFAAiF,EACjF,MAAM;gBACF,CAAC,CAAC,oCAAoC;gBACtC,CAAC,CAAC,sCAAsC,CAC/C,aAED,iBACI,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAC,mHAAmH,YAE7H,cAAK,SAAS,EAAC,oCAAoC,GAAG,GACjD,EAER,MAAM,IAAI,CACP,eAAK,SAAS,EAAC,4BAA4B,aACvC,aAAI,SAAS,EAAC,iDAAiD,yBAAc,EAC7E,cAAK,SAAS,EAAC,WAAW,YACtB,eAAK,SAAS,EAAC,mCAAmC,aAC9C,eAAK,SAAS,EAAC,yBAAyB,aACpC,gBACI,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,sBAAsB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACZ,oBAAoB,CAChB,CAAC,CAAC,MAAM,CAAC,OAAO,CACnB,GAEP,EACF,gBAAO,OAAO,EAAC,sBAAsB,EAAC,SAAS,EAAC,sBAAsB,qCAE9D,IACN,EACN,eAAK,SAAS,EAAC,yBAAyB,aACpC,gBAAO,OAAO,EAAC,oBAAoB,EAAC,SAAS,EAAC,sBAAsB,mCAE5D,EACR,gBACI,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,MAAM,EAC5B,QAAQ,QACR,SAAS,EAAC,oGAAoG,GAChH,IACA,EACN,KAAC,aAAa,KAAG,EACjB,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,EAC5B,KAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,GAAI,IACpC,GACJ,IACJ,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/GameData.d.ts

@@ -0,0 +1,4 @@
+export declare const GameData: ({ isOpen }: {
+    isOpen: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GameData.d.ts.map

package/dist/components/DevModeDrawer/GameData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameData.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/GameData.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,4CA0CvD,CAAC"}

package/dist/components/DevModeDrawer/GameData.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Game } from "@react-text-game/core";
+import { useEffect, useState } from "react";
+import { CopyButton } from "./CopyButton";
+import { RefreshButton } from "./RefreshButton";
+export const GameData = ({ isOpen }) => {
+    const [gameState, setGameState] = useState("");
+    const [showRefreshed, setShowRefreshed] = useState(false);
+    const onReloadGameState = () => {
+        const state = JSON.stringify(Game._getAllProxiedObjects(), null, 2);
+        setGameState(state);
+        setShowRefreshed(true);
+        setTimeout(() => setShowRefreshed(false), 500);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            onReloadGameState();
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "current-state", className: "text-sm text-card-foreground", children: "Current state" }), _jsx(RefreshButton, { onClick: onReloadGameState }), _jsx(CopyButton, { textToCopy: gameState }), showRefreshed && (_jsx("span", { className: "ml-2 text-xs text-success-600", children: "refreshed" }))] }), _jsx("textarea", { id: "current-state", disabled: true, className: "w-full h-30 bg-muted/20 border border-input rounded px-2 text-sm text-muted-foreground cursor-default resize-none", value: gameState })] }));
+};
+//# sourceMappingURL=GameData.js.map

package/dist/components/DevModeDrawer/GameData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GameData.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/GameData.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAuB,EAAE,EAAE;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpE,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,MAAM,EAAE,CAAC;YACT,iBAAiB,EAAE,CAAC;QACxB,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,eAAK,SAAS,EAAC,QAAQ,aACnB,0BACI,gBACI,OAAO,EAAC,eAAe,EACvB,SAAS,EAAC,8BAA8B,8BAGpC,EACR,KAAC,aAAa,IAAC,OAAO,EAAE,iBAAiB,GAAI,EAC7C,KAAC,UAAU,IAAC,UAAU,EAAE,SAAS,GAAI,EACpC,aAAa,IAAI,CACd,eAAM,SAAS,EAAC,+BAA+B,0BAExC,CACV,IACC,EACN,mBACI,EAAE,EAAC,eAAe,EAClB,QAAQ,QACR,SAAS,EAAC,mHAAmH,EAC7H,KAAK,EAAE,SAAS,GAClB,IACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/JumpToPassage.d.ts

@@ -0,0 +1,2 @@
+export declare const JumpToPassage: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JumpToPassage.d.ts.map

package/dist/components/DevModeDrawer/JumpToPassage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JumpToPassage.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/JumpToPassage.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,+CA0CzB,CAAC"}

package/dist/components/DevModeDrawer/JumpToPassage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Game } from "@react-text-game/core";
+import { useState } from "react";
+export const JumpToPassage = () => {
+    const [passageToJumpTo, setPassageToJumpTo] = useState("");
+    const onJumpPassageSubmit = (e) => {
+        e.preventDefault();
+        if (passageToJumpTo) {
+            Game.jumpTo(passageToJumpTo);
+            setPassageToJumpTo("");
+        }
+    };
+    return (_jsx("div", { children: _jsxs("form", { onSubmit: onJumpPassageSubmit, children: [_jsx("label", { htmlFor: "jump-to-passage-id", className: "mr-2 text-card-foreground", children: "Jump to passage ID:" }), _jsx("input", { id: "jump-to-passage-id", type: "text", value: passageToJumpTo, onChange: (e) => setPassageToJumpTo(e.target.value), placeholder: "Enter passage ID", className: "bg-muted/20 border border-input rounded px-2 text-sm text-foreground" }), _jsx("button", { type: "submit", disabled: !passageToJumpTo, className: "ml-2 bg-primary-500 text-primary-foreground px-2 rounded hover:bg-primary-600 transition-colors active:scale-95 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-primary-500 disabled:active:scale-100", children: "Go" })] }) }));
+};
+//# sourceMappingURL=JumpToPassage.js.map

package/dist/components/DevModeDrawer/JumpToPassage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JumpToPassage.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/JumpToPassage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEnE,MAAM,mBAAmB,GAAG,CAAC,CAA6B,EAAE,EAAE;QAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,eAAe,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC7B,kBAAkB,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,wBACI,gBAAM,QAAQ,EAAE,mBAAmB,aAC/B,gBACI,OAAO,EAAC,oBAAoB,EAC5B,SAAS,EAAC,2BAA2B,oCAGjC,EACR,gBACI,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACZ,kBAAkB,CACd,CAAC,CAAC,MAAM,CAAC,KAAK,CACjB,EAEL,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAC,sEAAsE,GAClF,EACF,iBACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,eAAe,EAC1B,SAAS,EAAC,wOAAwO,mBAG7O,IACN,GACL,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/RefreshButton.d.ts

@@ -0,0 +1,4 @@
+export declare const RefreshButton: ({ onClick }: {
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RefreshButton.d.ts.map

package/dist/components/DevModeDrawer/RefreshButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshButton.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/RefreshButton.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAqBjE,CAAC"}

package/dist/components/DevModeDrawer/RefreshButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RefreshButton = ({ onClick }) => {
+    return (_jsx("button", { className: "ml-1 text-sm cursor-pointer text-card-foreground", onClick: onClick, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", height: 24, width: 24, className: "inline-block", children: _jsx("path", { fill: "currentColor", d: "M4.4 12a.75.75 0 0 0 1.5 0H4.4Zm1.89-3.89.63.4-.63-.4Zm3.05-2.58-.3-.69.3.7Zm3.92-.4.15-.73-.15.73Zm3.47 1.92-.54.52.54-.52Zm.98 3.16a.75.75 0 0 0 1.45-.42l-1.45.42Zm0-.4a.75.75 0 1 0 1.45.38l-1.45-.38Zm2.16-2.35a.75.75 0 1 0-1.45-.38l1.45.38Zm-1.63 3.26a.75.75 0 0 0 .4-1.44l-.4 1.44Zm-2.25-2.17a.75.75 0 1 0-.4 1.44l.4-1.44Zm3.9 3.45a.75.75 0 1 0-1.5 0h1.5ZM18 15.89l-.63-.4.63.4Zm-3.04 2.58.29.69-.3-.7Zm-3.93.4-.15.73.15-.73Zm-3.47-1.92.54-.52-.54.52Zm-.98-3.16a.75.75 0 0 0-1.45.42l1.45-.42Zm0 .4a.75.75 0 1 0-1.45-.38l1.45.38Zm-2.16 2.35a.75.75 0 1 0 1.45.38l-1.45-.38Zm1.63-3.26a.75.75 0 0 0-.4 1.44l.4-1.44Zm2.25 2.18A.75.75 0 0 0 8.7 14l-.4 1.45ZM5.9 12a6.4 6.4 0 0 1 1.02-3.48L5.66 7.7A7.9 7.9 0 0 0 4.4 12h1.5Zm1.02-3.48a6.09 6.09 0 0 1 2.71-2.3l-.6-1.38a7.59 7.59 0 0 0-3.37 2.87l1.26.8Zm2.71-2.3c1.1-.47 2.3-.59 3.48-.35l.3-1.47a7.35 7.35 0 0 0-4.37.44l.59 1.38Zm3.47-.35c1.18.24 2.26.84 3.09 1.7l1.08-1.04a7.48 7.48 0 0 0-3.86-2.13l-.3 1.47Zm3.1 1.7a6.3 6.3 0 0 1 1.51 2.64l1.45-.42a7.8 7.8 0 0 0-1.9-3.26L16.2 7.57Zm2.96 2.62.71-2.73-1.45-.38-.71 2.73 1.45.38Zm-.53-.91L16 8.55l-.4 1.44 2.65.73.4-1.44ZM18.4 12a6.4 6.4 0 0 1-1.03 3.48l1.26.82A7.9 7.9 0 0 0 19.9 12h-1.5Zm-1.03 3.48a6.09 6.09 0 0 1-2.71 2.3l.6 1.38a7.59 7.59 0 0 0 3.37-2.86l-1.26-.82Zm-2.71 2.3c-1.1.47-2.3.6-3.48.35l-.3 1.47c1.47.3 3 .15 4.37-.44l-.59-1.38Zm-3.47.35a5.98 5.98 0 0 1-3.09-1.7l-1.08 1.04a7.47 7.47 0 0 0 3.86 2.13l.3-1.47Zm-3.1-1.7a6.3 6.3 0 0 1-1.51-2.64l-1.45.42a7.8 7.8 0 0 0 1.9 3.26l1.07-1.04ZM5.14 13.8l-.71 2.73 1.45.38.71-2.73-1.45-.38Zm.53.91 2.64.74.4-1.45-2.65-.73-.4 1.44Z" }) }) }));
+};
+//# sourceMappingURL=RefreshButton.js.map

package/dist/components/DevModeDrawer/RefreshButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshButton.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/RefreshButton.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAA2B,EAAE,EAAE;IAClE,OAAO,CACH,iBACI,SAAS,EAAC,kDAAkD,EAC5D,OAAO,EAAE,OAAO,YAEhB,cACI,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EACT,SAAS,EAAC,cAAc,YAExB,eACI,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,gjDAAgjD,GACpjD,GACA,GACD,CACZ,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DevModeDrawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DevModeDrawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DevModeDrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/DevModeDrawer/index.js

@@ -0,0 +1,2 @@
+export * from './DevModeDrawer';
+//# sourceMappingURL=index.js.map

package/dist/components/DevModeDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DevModeDrawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,22 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import { ErrorBoundaryProps, ErrorBoundaryState } from "./types";
+/**
+ * ErrorBoundary catches all JavaScript errors in the application:
+ * - Rendering errors
+ * - Event handler errors
+ * - Async errors (promises, setTimeout)
+ * - Global uncaught errors
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleGlobalError: (event: ErrorEvent) => void;
+    handlePromiseRejection: (event: PromiseRejectionEvent) => void;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    copyErrorToClipboard: () => Promise<void>;
+    render(): ReactNode;
+}
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEjE;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,SAAS,CACxC,kBAAkB,EAClB,kBAAkB,CACrB;gBACe,KAAK,EAAE,kBAAkB;IAUrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,kBAAkB,CAAC;IAI1E,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAQ5B,iBAAiB,GAAI,OAAO,UAAU,KAAG,IAAI,CAiC3C;IAEF,sBAAsB,GAAI,OAAO,qBAAqB,KAAG,IAAI,CAqB3D;IAEF,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI;IAY3D,KAAK,QAAO,IAAI,CAMd;IAEF,oBAAoB,QAAa,OAAO,CAAC,IAAI,CAAC,CAuB5C;IAEF,MAAM,IAAI,SAAS;CA+HtB"}