@inkweave/react 1.0.0

package/dist/components/ChoiceComponents.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+export interface ChoiceComponentProps {
+    val?: string;
+    onClick: () => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+type ChoiceComponent = FC<ChoiceComponentProps>;
+declare class ChoiceComponentsClass {
+    private _components;
+    get(type: string): ChoiceComponent | undefined;
+    register(type: string, component: ChoiceComponent): void;
+    unregister(type: string): void;
+    clear(): void;
+    has(type: string): boolean;
+}
+export declare const ChoiceComponents: ChoiceComponentsClass;
+export {};

package/dist/components/Choices.d.ts

@@ -0,0 +1,6 @@
+interface ChoicesProps {
+    onClick?: (index: number) => void;
+    className?: string;
+}
+declare const _default: import('react').NamedExoticComponent<ChoicesProps>;
+export default _default;

package/dist/components/Contents.d.ts

@@ -0,0 +1,6 @@
+interface ContentsProps {
+    lineDelay?: number;
+    className?: string;
+}
+declare const _default: import('react').NamedExoticComponent<ContentsProps>;
+export default _default;

package/dist/components/Story.d.ts

@@ -0,0 +1,15 @@
+import { InkStory } from '@inkweave/core';
+export declare const useStory: () => InkStory;
+interface StoryProviderProps {
+    ink: InkStory;
+    children: React.ReactNode;
+}
+export declare const StoryProvider: React.FC<StoryProviderProps>;
+interface StoryProps {
+    ink: InkStory;
+    children?: React.ReactNode;
+    className?: string;
+    onInit?: (ink: InkStory) => void;
+}
+declare const _default: import('react').NamedExoticComponent<StoryProps>;
+export default _default;

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var S=Object.defineProperty;var j=(e,t,n)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var C=(e,t,n)=>j(e,typeof t!="symbol"?t+"":t,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react"),u=require("@inkweave/core"),p=c.createContext(null),h=()=>{const e=c.useContext(p);if(!e)throw new Error("useStory must be used within StoryProvider");return e},v=({ink:e,children:t})=>o.jsx(p.Provider,{value:e,children:t}),w=({ink:e,children:t,className:n="",onInit:l})=>{const s=c.useRef(l);return s.current=l,c.useEffect(()=>{var i;e.restart(),(i=s.current)==null||i.call(s,e)},[e]),o.jsx(v,{ink:e,children:o.jsx("div",{id:"inkweave-story",className:n,children:t})})},g=c.memo(w),f=({lineDelay:e=.05,className:t=""})=>{const n=h(),l=u.contentsStore(a=>a.contents),s=n,i=(s==null?void 0:s.visibleLines)!=null?s.visibleLines:l.length;return o.jsx("section",{id:"inkweave-contents",children:l.map((a,r)=>{const d={"--delay":`${(r>i?r-i:0)*e}s`},m=a===u.CHOICE_SEPARATOR,y=m?`divider_${r}`:`line_${r}_${a.slice(0,20)}`;return m?o.jsx("div",{style:d,children:o.jsx("hr",{className:"inkweave-divider"})},y):o.jsx("div",{style:d,children:o.jsx("p",{className:t,children:a})},y)})})},k=c.memo(f);class _{constructor(){C(this,"_components",new Map)}get(t){return this._components.get(t)}register(t,n){this._components.set(t,n)}unregister(t){this._components.delete(t)}clear(){this._components.clear()}has(t){return this._components.has(t)}}const b=new _,x=c.memo(({choice:e,index:t,onClick:n,className:l})=>{const s=c.useCallback(()=>{e.type!=="unclickable"&&n(e.index)},[e.index,e.type,n]),i=b.get(e.type);return i?o.jsx("li",{style:{"--index":t},children:c.createElement(i,{onClick:s,className:l,val:e.val,children:e.text})}):o.jsx("li",{style:{"--index":t},children:o.jsx("a",{onClick:s,className:`${l} ${e.type==="unclickable"?"disabled":""}`,"aria-disabled":e.type==="unclickable",children:e.text})})});x.displayName="ChoiceItem";const P=({onClick:e,className:t="inkweave-btn"})=>{const n=h(),l=u.choicesStore(r=>r.choices),s=n,i=s&&"choicesCanShow"in s?s.choicesCanShow:!0,a=c.useCallback(r=>{e==null||e(r),n.choose(r)},[n,e]);return o.jsx("ul",{id:"inkweave-choices",style:{visibility:i?"visible":"hidden"},children:l.map((r,d)=>o.jsx(x,{choice:r,index:d,onClick:a,className:t},r.index))},i.toString())},O=c.memo(P);Object.defineProperty(exports,"useChoices",{enumerable:!0,get:()=>u.choicesStore});Object.defineProperty(exports,"useContents",{enumerable:!0,get:()=>u.contentsStore});Object.defineProperty(exports,"useVariables",{enumerable:!0,get:()=>u.variablesStore});exports.ChoiceComponents=b;exports.Choices=O;exports.Contents=k;exports.Story=g;exports.StoryProvider=v;exports.useStory=h;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport type { InkStory } from '@inkweave/core';\n\nconst StoryContext = createContext<InkStory | null>(null);\n\nexport const useStory = () => {\n\tconst ink = useContext(StoryContext);\n\tif (!ink) {\n\t\tthrow new Error('useStory must be used within StoryProvider');\n\t}\n\treturn ink;\n};\n\ninterface StoryProviderProps {\n\tink: InkStory;\n\tchildren: React.ReactNode;\n}\n\nexport const StoryProvider: React.FC<StoryProviderProps> = ({\n\tink,\n\tchildren,\n}) => {\n\treturn (\n\t\t<StoryContext.Provider value={ink}>\n\t\t\t{children}\n\t\t</StoryContext.Provider>\n\t);\n};\n\ninterface StoryProps {\n\tink: InkStory;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonInit?: (ink: InkStory) => void;\n}\n\nconst StoryComponent: React.FC<StoryProps> = ({\n\tink,\n\tchildren,\n\tclassName = '',\n\tonInit,\n}) => {\n\tconst onInitRef = useRef(onInit);\n\tonInitRef.current = onInit;\n\n\tuseEffect(() => {\n\t\tink.restart();\n\t\tonInitRef.current?.(ink);\n\t}, [ink]);\n\n\treturn (\n\t\t<StoryProvider ink={ink}>\n\t\t\t<div id=\"inkweave-story\" className={className}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StoryProvider>\n\t);\n};\n\nexport default memo(StoryComponent);","import { memo, CSSProperties } from 'react';\nimport { CHOICE_SEPARATOR, contentsStore } from '@inkweave/core';\nimport { useStory } from './Story';\n\ninterface ContentsProps {\n\tlineDelay?: number;\n\tclassName?: string;\n}\n\nconst ContentsComponent: React.FC<ContentsProps> = ({\n\tlineDelay = 0.05,\n\tclassName = '',\n}) => {\n\tconst ink = useStory();\n\tconst contents = contentsStore((state) => state.contents);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst visibleLines =\n\t\tinkRecord?.visibleLines != undefined\n\t\t\t? (inkRecord.visibleLines as number)\n\t\t\t: contents.length;\n\n\treturn (\n\t\t<section id=\"inkweave-contents\">\n\t\t\t{contents.map((item: string, i: number) => {\n\t\t\t\tconst style: CSSProperties = {\n\t\t\t\t\t'--delay': `${\n\t\t\t\t\t\t(i > visibleLines ? i - visibleLines : 0) * lineDelay\n\t\t\t\t\t}s`,\n\t\t\t\t} as CSSProperties & { '--delay': string };\n\n\t\t\t\tconst isDivider = item === CHOICE_SEPARATOR;\n\t\t\t\tconst key = isDivider ? `divider_${i}` : `line_${i}_${item.slice(0, 20)}`;\n\n\t\t\t\tif (isDivider) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t\t<hr className=\"inkweave-divider\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t<p className={className}>{item}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</section>\n\t);\n};\n\nexport default memo(ContentsComponent);","import type { FC } from 'react';\n\nexport interface ChoiceComponentProps {\n\tval?: string;\n\tonClick: () => void;\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}\n\ntype ChoiceComponent = FC<ChoiceComponentProps>;\n\nclass ChoiceComponentsClass {\n\tprivate _components: Map<string, ChoiceComponent> = new Map();\n\n\tget(type: string): ChoiceComponent | undefined {\n\t\treturn this._components.get(type);\n\t}\n\n\tregister(type: string, component: ChoiceComponent) {\n\t\tthis._components.set(type, component);\n\t}\n\n\tunregister(type: string) {\n\t\tthis._components.delete(type);\n\t}\n\n\tclear() {\n\t\tthis._components.clear();\n\t}\n\n\thas(type: string): boolean {\n\t\treturn this._components.has(type);\n\t}\n}\n\nexport const ChoiceComponents = new ChoiceComponentsClass();","import { memo, createElement, useCallback } from 'react';\nimport { Choice, choicesStore } from '@inkweave/core';\nimport { useStory } from './Story';\nimport { ChoiceComponents } from './ChoiceComponents';\n\ninterface ChoiceItemProps {\n\tchoice: Choice;\n\tindex: number;\n\tonClick: (index: number) => void;\n\tclassName: string;\n}\n\nconst ChoiceItem: React.FC<ChoiceItemProps> = memo(({ choice, index, onClick, className }) => {\n\tconst handleClick = useCallback(() => {\n\t\tif (choice.type !== 'unclickable') {\n\t\t\tonClick(choice.index);\n\t\t}\n\t}, [choice.index, choice.type, onClick]);\n\n\tconst Component = ChoiceComponents.get(choice.type);\n\tif (Component) {\n\t\treturn (\n\t\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t\t{createElement(Component, {\n\t\t\t\t\tonClick: handleClick,\n\t\t\t\t\tclassName,\n\t\t\t\t\tval: choice.val,\n\t\t\t\t\tchildren: choice.text,\n\t\t\t\t})}\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t<a\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={`${className} ${choice.type === 'unclickable' ? 'disabled' : ''}`}\n\t\t\t\taria-disabled={choice.type === 'unclickable'}\n\t\t\t>\n\t\t\t\t{choice.text}\n\t\t\t</a>\n\t\t</li>\n\t);\n});\nChoiceItem.displayName = 'ChoiceItem';\n\ninterface ChoicesProps {\n\tonClick?: (index: number) => void;\n\tclassName?: string;\n}\n\nconst ChoicesComponent: React.FC<ChoicesProps> = ({\n\tonClick,\n\tclassName = 'inkweave-btn',\n}) => {\n\tconst ink = useStory();\n\tconst choices = choicesStore((state) => state.choices);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst canShow =\n\t\tinkRecord && 'choicesCanShow' in inkRecord\n\t\t\t? (inkRecord.choicesCanShow as boolean)\n\t\t\t: true;\n\n\tconst handleClick = useCallback((index: number) => {\n\t\tonClick?.(index);\n\t\tink.choose(index);\n\t}, [ink, onClick]);\n\n\treturn (\n\t\t<ul\n\t\t\tid=\"inkweave-choices\"\n\t\t\tkey={canShow.toString()}\n\t\t\tstyle={{ visibility: canShow ? 'visible' : 'hidden' }}\n\t\t>\n\t\t\t{choices.map((choice: Choice, index: number) => (\n\t\t\t\t<ChoiceItem\n\t\t\t\t\tkey={choice.index}\n\t\t\t\t\tchoice={choice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default memo(ChoicesComponent);"],"names":["StoryContext","createContext","useStory","ink","useContext","StoryProvider","children","StoryComponent","className","onInit","onInitRef","useRef","useEffect","_a","jsx","Story","memo","ContentsComponent","lineDelay","contents","contentsStore","state","inkRecord","visibleLines","item","i","style","isDivider","CHOICE_SEPARATOR","key","Contents","ChoiceComponentsClass","__publicField","type","component","ChoiceComponents","ChoiceItem","choice","index","onClick","handleClick","useCallback","Component","ChoicesComponent","choices","choicesStore","canShow","Choices"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Story, useStory, StoryProvider } from './components/Story';
+export { default as Contents } from './components/Contents';
+export { default as Choices } from './components/Choices';
+export { ChoiceComponents, type ChoiceComponentProps } from './components/ChoiceComponents';
+export { contentsStore as useContents, choicesStore as useChoices, variablesStore as useVariables } from '@inkweave/core';

package/dist/index.js

@@ -0,0 +1,116 @@
+var S = Object.defineProperty;
+var b = (e, t, n) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var m = (e, t, n) => b(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as w, memo as d, useRef as x, useEffect as f, useContext as _, useCallback as p, createElement as k } from "react";
+import { contentsStore as g, CHOICE_SEPARATOR as $, choicesStore as E } from "@inkweave/core";
+import { choicesStore as B, contentsStore as F, variablesStore as G } from "@inkweave/core";
+const v = w(null), C = () => {
+  const e = _(v);
+  if (!e)
+    throw new Error("useStory must be used within StoryProvider");
+  return e;
+}, P = ({
+  ink: e,
+  children: t
+}) => /* @__PURE__ */ o(v.Provider, { value: e, children: t }), L = ({
+  ink: e,
+  children: t,
+  className: n = "",
+  onInit: c
+}) => {
+  const s = x(c);
+  return s.current = c, f(() => {
+    var i;
+    e.restart(), (i = s.current) == null || i.call(s, e);
+  }, [e]), /* @__PURE__ */ o(P, { ink: e, children: /* @__PURE__ */ o("div", { id: "inkweave-story", className: n, children: t }) });
+}, M = d(L), A = ({
+  lineDelay: e = 0.05,
+  className: t = ""
+}) => {
+  const n = C(), c = g((l) => l.contents), s = n, i = (s == null ? void 0 : s.visibleLines) != null ? s.visibleLines : c.length;
+  return /* @__PURE__ */ o("section", { id: "inkweave-contents", children: c.map((l, r) => {
+    const a = {
+      "--delay": `${(r > i ? r - i : 0) * e}s`
+    }, h = l === $, u = h ? `divider_${r}` : `line_${r}_${l.slice(0, 20)}`;
+    return h ? /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("hr", { className: "inkweave-divider" }) }, u) : /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("p", { className: t, children: l }) }, u);
+  }) });
+}, T = d(A);
+class N {
+  constructor() {
+    m(this, "_components", /* @__PURE__ */ new Map());
+  }
+  get(t) {
+    return this._components.get(t);
+  }
+  register(t, n) {
+    this._components.set(t, n);
+  }
+  unregister(t) {
+    this._components.delete(t);
+  }
+  clear() {
+    this._components.clear();
+  }
+  has(t) {
+    return this._components.has(t);
+  }
+}
+const O = new N(), y = d(({ choice: e, index: t, onClick: n, className: c }) => {
+  const s = p(() => {
+    e.type !== "unclickable" && n(e.index);
+  }, [e.index, e.type, n]), i = O.get(e.type);
+  return i ? /* @__PURE__ */ o("li", { style: { "--index": t }, children: k(i, {
+    onClick: s,
+    className: c,
+    val: e.val,
+    children: e.text
+  }) }) : /* @__PURE__ */ o("li", { style: { "--index": t }, children: /* @__PURE__ */ o(
+    "a",
+    {
+      onClick: s,
+      className: `${c} ${e.type === "unclickable" ? "disabled" : ""}`,
+      "aria-disabled": e.type === "unclickable",
+      children: e.text
+    }
+  ) });
+});
+y.displayName = "ChoiceItem";
+const R = ({
+  onClick: e,
+  className: t = "inkweave-btn"
+}) => {
+  const n = C(), c = E((r) => r.choices), s = n, i = s && "choicesCanShow" in s ? s.choicesCanShow : !0, l = p((r) => {
+    e == null || e(r), n.choose(r);
+  }, [n, e]);
+  return /* @__PURE__ */ o(
+    "ul",
+    {
+      id: "inkweave-choices",
+      style: { visibility: i ? "visible" : "hidden" },
+      children: c.map((r, a) => /* @__PURE__ */ o(
+        y,
+        {
+          choice: r,
+          index: a,
+          onClick: l,
+          className: t
+        },
+        r.index
+      ))
+    },
+    i.toString()
+  );
+}, V = d(R);
+export {
+  O as ChoiceComponents,
+  V as Choices,
+  T as Contents,
+  M as Story,
+  P as StoryProvider,
+  B as useChoices,
+  F as useContents,
+  C as useStory,
+  G as useVariables
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport type { InkStory } from '@inkweave/core';\n\nconst StoryContext = createContext<InkStory | null>(null);\n\nexport const useStory = () => {\n\tconst ink = useContext(StoryContext);\n\tif (!ink) {\n\t\tthrow new Error('useStory must be used within StoryProvider');\n\t}\n\treturn ink;\n};\n\ninterface StoryProviderProps {\n\tink: InkStory;\n\tchildren: React.ReactNode;\n}\n\nexport const StoryProvider: React.FC<StoryProviderProps> = ({\n\tink,\n\tchildren,\n}) => {\n\treturn (\n\t\t<StoryContext.Provider value={ink}>\n\t\t\t{children}\n\t\t</StoryContext.Provider>\n\t);\n};\n\ninterface StoryProps {\n\tink: InkStory;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonInit?: (ink: InkStory) => void;\n}\n\nconst StoryComponent: React.FC<StoryProps> = ({\n\tink,\n\tchildren,\n\tclassName = '',\n\tonInit,\n}) => {\n\tconst onInitRef = useRef(onInit);\n\tonInitRef.current = onInit;\n\n\tuseEffect(() => {\n\t\tink.restart();\n\t\tonInitRef.current?.(ink);\n\t}, [ink]);\n\n\treturn (\n\t\t<StoryProvider ink={ink}>\n\t\t\t<div id=\"inkweave-story\" className={className}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StoryProvider>\n\t);\n};\n\nexport default memo(StoryComponent);","import { memo, CSSProperties } from 'react';\nimport { CHOICE_SEPARATOR, contentsStore } from '@inkweave/core';\nimport { useStory } from './Story';\n\ninterface ContentsProps {\n\tlineDelay?: number;\n\tclassName?: string;\n}\n\nconst ContentsComponent: React.FC<ContentsProps> = ({\n\tlineDelay = 0.05,\n\tclassName = '',\n}) => {\n\tconst ink = useStory();\n\tconst contents = contentsStore((state) => state.contents);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst visibleLines =\n\t\tinkRecord?.visibleLines != undefined\n\t\t\t? (inkRecord.visibleLines as number)\n\t\t\t: contents.length;\n\n\treturn (\n\t\t<section id=\"inkweave-contents\">\n\t\t\t{contents.map((item: string, i: number) => {\n\t\t\t\tconst style: CSSProperties = {\n\t\t\t\t\t'--delay': `${\n\t\t\t\t\t\t(i > visibleLines ? i - visibleLines : 0) * lineDelay\n\t\t\t\t\t}s`,\n\t\t\t\t} as CSSProperties & { '--delay': string };\n\n\t\t\t\tconst isDivider = item === CHOICE_SEPARATOR;\n\t\t\t\tconst key = isDivider ? `divider_${i}` : `line_${i}_${item.slice(0, 20)}`;\n\n\t\t\t\tif (isDivider) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t\t<hr className=\"inkweave-divider\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t<p className={className}>{item}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</section>\n\t);\n};\n\nexport default memo(ContentsComponent);","import type { FC } from 'react';\n\nexport interface ChoiceComponentProps {\n\tval?: string;\n\tonClick: () => void;\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}\n\ntype ChoiceComponent = FC<ChoiceComponentProps>;\n\nclass ChoiceComponentsClass {\n\tprivate _components: Map<string, ChoiceComponent> = new Map();\n\n\tget(type: string): ChoiceComponent | undefined {\n\t\treturn this._components.get(type);\n\t}\n\n\tregister(type: string, component: ChoiceComponent) {\n\t\tthis._components.set(type, component);\n\t}\n\n\tunregister(type: string) {\n\t\tthis._components.delete(type);\n\t}\n\n\tclear() {\n\t\tthis._components.clear();\n\t}\n\n\thas(type: string): boolean {\n\t\treturn this._components.has(type);\n\t}\n}\n\nexport const ChoiceComponents = new ChoiceComponentsClass();","import { memo, createElement, useCallback } from 'react';\nimport { Choice, choicesStore } from '@inkweave/core';\nimport { useStory } from './Story';\nimport { ChoiceComponents } from './ChoiceComponents';\n\ninterface ChoiceItemProps {\n\tchoice: Choice;\n\tindex: number;\n\tonClick: (index: number) => void;\n\tclassName: string;\n}\n\nconst ChoiceItem: React.FC<ChoiceItemProps> = memo(({ choice, index, onClick, className }) => {\n\tconst handleClick = useCallback(() => {\n\t\tif (choice.type !== 'unclickable') {\n\t\t\tonClick(choice.index);\n\t\t}\n\t}, [choice.index, choice.type, onClick]);\n\n\tconst Component = ChoiceComponents.get(choice.type);\n\tif (Component) {\n\t\treturn (\n\t\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t\t{createElement(Component, {\n\t\t\t\t\tonClick: handleClick,\n\t\t\t\t\tclassName,\n\t\t\t\t\tval: choice.val,\n\t\t\t\t\tchildren: choice.text,\n\t\t\t\t})}\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t<a\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={`${className} ${choice.type === 'unclickable' ? 'disabled' : ''}`}\n\t\t\t\taria-disabled={choice.type === 'unclickable'}\n\t\t\t>\n\t\t\t\t{choice.text}\n\t\t\t</a>\n\t\t</li>\n\t);\n});\nChoiceItem.displayName = 'ChoiceItem';\n\ninterface ChoicesProps {\n\tonClick?: (index: number) => void;\n\tclassName?: string;\n}\n\nconst ChoicesComponent: React.FC<ChoicesProps> = ({\n\tonClick,\n\tclassName = 'inkweave-btn',\n}) => {\n\tconst ink = useStory();\n\tconst choices = choicesStore((state) => state.choices);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst canShow =\n\t\tinkRecord && 'choicesCanShow' in inkRecord\n\t\t\t? (inkRecord.choicesCanShow as boolean)\n\t\t\t: true;\n\n\tconst handleClick = useCallback((index: number) => {\n\t\tonClick?.(index);\n\t\tink.choose(index);\n\t}, [ink, onClick]);\n\n\treturn (\n\t\t<ul\n\t\t\tid=\"inkweave-choices\"\n\t\t\tkey={canShow.toString()}\n\t\t\tstyle={{ visibility: canShow ? 'visible' : 'hidden' }}\n\t\t>\n\t\t\t{choices.map((choice: Choice, index: number) => (\n\t\t\t\t<ChoiceItem\n\t\t\t\t\tkey={choice.index}\n\t\t\t\t\tchoice={choice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default memo(ChoicesComponent);"],"names":["StoryContext","createContext","useStory","ink","useContext","StoryProvider","children","StoryComponent","className","onInit","onInitRef","useRef","useEffect","_a","jsx","Story","memo","ContentsComponent","lineDelay","contents","contentsStore","state","inkRecord","visibleLines","item","i","style","isDivider","CHOICE_SEPARATOR","key","Contents","ChoiceComponentsClass","__publicField","type","component","ChoiceComponents","ChoiceItem","choice","index","onClick","handleClick","useCallback","Component","ChoicesComponent","choices","choicesStore","canShow","Choices"],"mappings":"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"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@inkweave/react",
+  "version": "1.0.0",
+  "description": "React components for InkWeave",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "ink",
+    "interactive-fiction",
+    "react",
+    "inkweave"
+  ],
+  "author": "Uglyboy",
+  "license": "MIT",
+  "peerDependencies": {
+    "@inkweave/core": "^1.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}