@inkweave/react 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +44 -46
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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.js
CHANGED
|
@@ -1,44 +1,42 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var m = (e, t, n) =>
|
|
1
|
+
var S = Object.defineProperty;
|
|
2
|
+
var b = (e, t, n) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var m = (e, t, n) => b(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
4
|
import { jsx as o } from "react/jsx-runtime";
|
|
5
|
-
import { createContext as
|
|
6
|
-
import { contentsStore as
|
|
7
|
-
import { choicesStore as
|
|
8
|
-
const
|
|
9
|
-
const e =
|
|
5
|
+
import { createContext as w, memo as d, useRef as x, useEffect as f, useContext as _, useCallback as p, createElement as k } from "react";
|
|
6
|
+
import { contentsStore as g, CHOICE_SEPARATOR as $, choicesStore as E } from "@inkweave/core";
|
|
7
|
+
import { choicesStore as B, contentsStore as F, variablesStore as G } from "@inkweave/core";
|
|
8
|
+
const v = w(null), C = () => {
|
|
9
|
+
const e = _(v);
|
|
10
10
|
if (!e)
|
|
11
11
|
throw new Error("useStory must be used within StoryProvider");
|
|
12
12
|
return e;
|
|
13
13
|
}, P = ({
|
|
14
14
|
ink: e,
|
|
15
15
|
children: t
|
|
16
|
-
}) => /* @__PURE__ */ o(
|
|
16
|
+
}) => /* @__PURE__ */ o(v.Provider, { value: e, children: t }), L = ({
|
|
17
17
|
ink: e,
|
|
18
18
|
children: t,
|
|
19
19
|
className: n = "",
|
|
20
20
|
onInit: c
|
|
21
21
|
}) => {
|
|
22
22
|
const s = x(c);
|
|
23
|
-
s.current = c
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, [e]), /* @__PURE__ */ o(P, { ink: e, children: /* @__PURE__ */ o("div", { id: "inkweave-story", className: n, children: t }, l) });
|
|
29
|
-
}, I = d(L), A = ({
|
|
23
|
+
return s.current = c, f(() => {
|
|
24
|
+
var i;
|
|
25
|
+
e.restart(), (i = s.current) == null || i.call(s, e);
|
|
26
|
+
}, [e]), /* @__PURE__ */ o(P, { ink: e, children: /* @__PURE__ */ o("div", { id: "inkweave-story", className: n, children: t }) });
|
|
27
|
+
}, M = d(L), A = ({
|
|
30
28
|
lineDelay: e = 0.05,
|
|
31
29
|
className: t = ""
|
|
32
30
|
}) => {
|
|
33
|
-
const n =
|
|
34
|
-
return /* @__PURE__ */ o("section", { id: "inkweave-contents", children: c.map((
|
|
31
|
+
const n = C(), c = g((l) => l.contents), s = n, i = (s == null ? void 0 : s.visibleLines) != null ? s.visibleLines : c.length;
|
|
32
|
+
return /* @__PURE__ */ o("section", { id: "inkweave-contents", children: c.map((l, r) => {
|
|
35
33
|
const a = {
|
|
36
|
-
"--delay": `${(
|
|
37
|
-
}, h =
|
|
38
|
-
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:
|
|
34
|
+
"--delay": `${(r > i ? r - i : 0) * e}s`
|
|
35
|
+
}, h = l === $, u = h ? `divider_${r}` : `line_${r}_${l.slice(0, 20)}`;
|
|
36
|
+
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);
|
|
39
37
|
}) });
|
|
40
|
-
},
|
|
41
|
-
class
|
|
38
|
+
}, T = d(A);
|
|
39
|
+
class N {
|
|
42
40
|
constructor() {
|
|
43
41
|
m(this, "_components", /* @__PURE__ */ new Map());
|
|
44
42
|
}
|
|
@@ -58,11 +56,11 @@ class K {
|
|
|
58
56
|
return this._components.has(t);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
|
-
const
|
|
59
|
+
const O = new N(), y = d(({ choice: e, index: t, onClick: n, className: c }) => {
|
|
62
60
|
const s = p(() => {
|
|
63
61
|
e.type !== "unclickable" && n(e.index);
|
|
64
|
-
}, [e.index, e.type, n]),
|
|
65
|
-
return
|
|
62
|
+
}, [e.index, e.type, n]), i = O.get(e.type);
|
|
63
|
+
return i ? /* @__PURE__ */ o("li", { style: { "--index": t }, children: k(i, {
|
|
66
64
|
onClick: s,
|
|
67
65
|
className: c,
|
|
68
66
|
val: e.val,
|
|
@@ -77,42 +75,42 @@ const N = new K(), S = d(({ choice: e, index: t, onClick: n, className: c }) =>
|
|
|
77
75
|
}
|
|
78
76
|
) });
|
|
79
77
|
});
|
|
80
|
-
|
|
81
|
-
const
|
|
78
|
+
y.displayName = "ChoiceItem";
|
|
79
|
+
const R = ({
|
|
82
80
|
onClick: e,
|
|
83
81
|
className: t = "inkweave-btn"
|
|
84
82
|
}) => {
|
|
85
|
-
const n =
|
|
86
|
-
e == null || e(
|
|
83
|
+
const n = C(), c = E((r) => r.choices), s = n, i = s && "choicesCanShow" in s ? s.choicesCanShow : !0, l = p((r) => {
|
|
84
|
+
e == null || e(r), n.choose(r);
|
|
87
85
|
}, [n, e]);
|
|
88
86
|
return /* @__PURE__ */ o(
|
|
89
87
|
"ul",
|
|
90
88
|
{
|
|
91
89
|
id: "inkweave-choices",
|
|
92
|
-
style: { visibility:
|
|
93
|
-
children: c.map((
|
|
94
|
-
|
|
90
|
+
style: { visibility: i ? "visible" : "hidden" },
|
|
91
|
+
children: c.map((r, a) => /* @__PURE__ */ o(
|
|
92
|
+
y,
|
|
95
93
|
{
|
|
96
|
-
choice:
|
|
94
|
+
choice: r,
|
|
97
95
|
index: a,
|
|
98
|
-
onClick:
|
|
96
|
+
onClick: l,
|
|
99
97
|
className: t
|
|
100
98
|
},
|
|
101
|
-
|
|
99
|
+
r.index
|
|
102
100
|
))
|
|
103
101
|
},
|
|
104
|
-
|
|
102
|
+
i.toString()
|
|
105
103
|
);
|
|
106
|
-
},
|
|
104
|
+
}, V = d(R);
|
|
107
105
|
export {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
106
|
+
O as ChoiceComponents,
|
|
107
|
+
V as Choices,
|
|
108
|
+
T as Contents,
|
|
109
|
+
M as Story,
|
|
112
110
|
P as StoryProvider,
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
111
|
+
B as useChoices,
|
|
112
|
+
F as useContents,
|
|
113
|
+
C as useStory,
|
|
114
|
+
G as useVariables
|
|
117
115
|
};
|
|
118
116
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 {
|
|
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":";;;;;;;AAGA,MAAMA,IAAeC,EAA+B,IAAI,GAE3CC,IAAW,MAAM;AAC7B,QAAMC,IAAMC,EAAWJ,CAAY;AACnC,MAAI,CAACG;AACJ,UAAM,IAAI,MAAM,4CAA4C;AAE7D,SAAOA;AACR,GAOaE,IAA8C,CAAC;AAAA,EAC3D,KAAAF;AAAA,EACA,UAAAG;AACD,wBAEGN,EAAa,UAAb,EAAsB,OAAOG,GAC5B,UAAAG,GACF,GAWIC,IAAuC,CAAC;AAAA,EAC7C,KAAAJ;AAAA,EACA,UAAAG;AAAA,EACA,WAAAE,IAAY;AAAA,EACZ,QAAAC;AACD,MAAM;AACL,QAAMC,IAAYC,EAAOF,CAAM;AAC/B,SAAAC,EAAU,UAAUD,GAEpBG,EAAU,MAAM;;AACf,IAAAT,EAAI,QAAA,IACJU,IAAAH,EAAU,YAAV,QAAAG,EAAA,KAAAH,GAAoBP;AAAA,EACrB,GAAG,CAACA,CAAG,CAAC,GAGP,gBAAAW,EAACT,KAAc,KAAAF,GACd,UAAA,gBAAAW,EAAC,SAAI,IAAG,kBAAiB,WAAAN,GACvB,UAAAF,EAAA,CACF,EAAA,CACD;AAEF,GAEAS,IAAeC,EAAKT,CAAc,GClD5BU,IAA6C,CAAC;AAAA,EACnD,WAAAC,IAAY;AAAA,EACZ,WAAAV,IAAY;AACb,MAAM;AACL,QAAML,IAAMD,EAAA,GACNiB,IAAWC,EAAc,CAACC,MAAUA,EAAM,QAAQ,GAClDC,IAAYnB,GACZoB,KACLD,KAAA,gBAAAA,EAAW,iBAAgB,OACvBA,EAAU,eACXH,EAAS;AAEb,SACC,gBAAAL,EAAC,aAAQ,IAAG,qBACV,YAAS,IAAI,CAACU,GAAcC,MAAc;AAC1C,UAAMC,IAAuB;AAAA,MAC5B,WAAW,IACTD,IAAIF,IAAeE,IAAIF,IAAe,KAAKL,CAC7C;AAAA,IAAA,GAGKS,IAAYH,MAASI,GACrBC,IAAMF,IAAY,WAAWF,CAAC,KAAK,QAAQA,CAAC,IAAID,EAAK,MAAM,GAAG,EAAE,CAAC;AAEvE,WAAIG,IAEF,gBAAAb,EAAC,SAAc,OAAAY,GACd,UAAA,gBAAAZ,EAAC,QAAG,WAAU,oBAAmB,KADxBe,CAEV,IAKD,gBAAAf,EAAC,SAAc,OAAAY,GACd,UAAA,gBAAAZ,EAAC,OAAE,WAAAN,GAAuB,UAAAgB,EAAA,CAAK,KADtBK,CAEV;AAAA,EAEF,CAAC,EAAA,CACF;AAEF,GAEAC,IAAed,EAAKC,CAAiB;ACxCrC,MAAMc,EAAsB;AAAA,EAA5B;AACS,IAAAC,EAAA,yCAAgD,IAAA;AAAA;AAAA,EAExD,IAAIC,GAA2C;AAC9C,WAAO,KAAK,YAAY,IAAIA,CAAI;AAAA,EACjC;AAAA,EAEA,SAASA,GAAcC,GAA4B;AAClD,SAAK,YAAY,IAAID,GAAMC,CAAS;AAAA,EACrC;AAAA,EAEA,WAAWD,GAAc;AACxB,SAAK,YAAY,OAAOA,CAAI;AAAA,EAC7B;AAAA,EAEA,QAAQ;AACP,SAAK,YAAY,MAAA;AAAA,EAClB;AAAA,EAEA,IAAIA,GAAuB;AAC1B,WAAO,KAAK,YAAY,IAAIA,CAAI;AAAA,EACjC;AACD;AAEO,MAAME,IAAmB,IAAIJ,EAAA,GCvB9BK,IAAwCpB,EAAK,CAAC,EAAE,QAAAqB,GAAQ,OAAAC,GAAO,SAAAC,GAAS,WAAA/B,QAAgB;AAC7F,QAAMgC,IAAcC,EAAY,MAAM;AACrC,IAAIJ,EAAO,SAAS,iBACnBE,EAAQF,EAAO,KAAK;AAAA,EAEtB,GAAG,CAACA,EAAO,OAAOA,EAAO,MAAME,CAAO,CAAC,GAEjCG,IAAYP,EAAiB,IAAIE,EAAO,IAAI;AAClD,SAAIK,IAEF,gBAAA5B,EAAC,QAAG,OAAO,EAAE,WAAWwB,KACtB,YAAcI,GAAW;AAAA,IACzB,SAASF;AAAA,IACT,WAAAhC;AAAA,IACA,KAAK6B,EAAO;AAAA,IACZ,UAAUA,EAAO;AAAA,EAAA,CACjB,GACF,sBAKA,MAAA,EAAG,OAAO,EAAE,WAAWC,KACvB,UAAA,gBAAAxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAAS0B;AAAA,MACT,WAAW,GAAGhC,CAAS,IAAI6B,EAAO,SAAS,gBAAgB,aAAa,EAAE;AAAA,MAC1E,iBAAeA,EAAO,SAAS;AAAA,MAE9B,UAAAA,EAAO;AAAA,IAAA;AAAA,EAAA,GAEV;AAEF,CAAC;AACDD,EAAW,cAAc;AAOzB,MAAMO,IAA2C,CAAC;AAAA,EACjD,SAAAJ;AAAA,EACA,WAAA/B,IAAY;AACb,MAAM;AACL,QAAML,IAAMD,EAAA,GACN0C,IAAUC,EAAa,CAACxB,MAAUA,EAAM,OAAO,GAC/CC,IAAYnB,GACZ2C,IACLxB,KAAa,oBAAoBA,IAC7BA,EAAU,iBACX,IAEEkB,IAAcC,EAAY,CAACH,MAAkB;AAClD,IAAAC,KAAA,QAAAA,EAAUD,IACVnC,EAAI,OAAOmC,CAAK;AAAA,EACjB,GAAG,CAACnC,GAAKoC,CAAO,CAAC;AAEjB,SACC,gBAAAzB;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,IAAG;AAAA,MAEH,OAAO,EAAE,YAAYgC,IAAU,YAAY,SAAA;AAAA,MAE1C,UAAAF,EAAQ,IAAI,CAACP,GAAgBC,MAC7B,gBAAAxB;AAAA,QAACsB;AAAA,QAAA;AAAA,UAEA,QAAAC;AAAA,UACA,OAAAC;AAAA,UACA,SAASE;AAAA,UACT,WAAAhC;AAAA,QAAA;AAAA,QAJK6B,EAAO;AAAA,MAAA,CAMb;AAAA,IAAA;AAAA,IAXIS,EAAQ,SAAA;AAAA,EAAS;AAczB,GAEAC,IAAe/B,EAAK2B,CAAgB;"}
|