@inkweave/web 1.0.0
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/README.md +88 -0
- package/dist/inkweave.min.css +2 -0
- package/dist/inkweave.min.js +52 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# @inkweave/web
|
|
2
|
+
|
|
3
|
+
Pre-built browser bundle for InkWeave - ready to use via CDN or script tag without any build tools.
|
|
4
|
+
|
|
5
|
+
## Quick Start via CDN
|
|
6
|
+
|
|
7
|
+
### unpkg
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<link rel="stylesheet" href="https://unpkg.com/@inkweave/web/dist/inkweave.min.css">
|
|
11
|
+
<script src="https://unpkg.com/@inkweave/web"></script>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### jsDelivr
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@inkweave/web/dist/inkweave.min.css">
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/@inkweave/web"></script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<!DOCTYPE html>
|
|
25
|
+
<html>
|
|
26
|
+
<head>
|
|
27
|
+
<link rel="stylesheet" href="https://unpkg.com/@inkweave/web/dist/inkweave.min.css">
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div id="story-container"></div>
|
|
31
|
+
|
|
32
|
+
<script src="https://unpkg.com/@inkweave/web"></script>
|
|
33
|
+
<script>
|
|
34
|
+
InkWeave.init({
|
|
35
|
+
container: '#story-container',
|
|
36
|
+
story: `
|
|
37
|
+
Hello, World!
|
|
38
|
+
+ [Choice A] You chose A. -> DONE
|
|
39
|
+
+ [Choice B] You chose B. -> DONE
|
|
40
|
+
`,
|
|
41
|
+
title: 'My Story',
|
|
42
|
+
basePath: './stories/' // Optional: for loading external .ink files
|
|
43
|
+
});
|
|
44
|
+
</script>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## API
|
|
50
|
+
|
|
51
|
+
### `InkWeave.init(options)`
|
|
52
|
+
|
|
53
|
+
Initialize InkWeave in your container.
|
|
54
|
+
|
|
55
|
+
**Options:**
|
|
56
|
+
- `container` (string | Element): CSS selector or DOM element
|
|
57
|
+
- `story` (string): Ink story content (inline or from file)
|
|
58
|
+
- `title` (string): Story title
|
|
59
|
+
- `basePath` (string): Base path for loading external files
|
|
60
|
+
- `theme` ('light' | 'dark'): Theme mode
|
|
61
|
+
|
|
62
|
+
### `InkWeave.version`
|
|
63
|
+
|
|
64
|
+
Current version string.
|
|
65
|
+
|
|
66
|
+
## Bundle Contents
|
|
67
|
+
|
|
68
|
+
This bundle includes everything you need:
|
|
69
|
+
- React & ReactDOM
|
|
70
|
+
- inkjs runtime
|
|
71
|
+
- InkWeave core engine
|
|
72
|
+
- Built-in plugins (image, audio, fade, etc.)
|
|
73
|
+
- CSS styles
|
|
74
|
+
|
|
75
|
+
**Bundle size:** ~138KB (gzip)
|
|
76
|
+
|
|
77
|
+
## For Build Tool Users
|
|
78
|
+
|
|
79
|
+
If you're using webpack, Vite, or other build tools, consider using the modular packages instead:
|
|
80
|
+
- `@inkweave/core` - Core engine
|
|
81
|
+
- `@inkweave/react` - React components
|
|
82
|
+
- `@inkweave/plugins` - Optional plugins
|
|
83
|
+
|
|
84
|
+
This allows for better optimization and smaller bundles.
|
|
85
|
+
|
|
86
|
+
## License
|
|
87
|
+
|
|
88
|
+
MIT
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
._choices_qiofu_1{opacity:0;animation:.5s forwards _fade-in_qiofu_1;animation-delay:var(--delay,0s);flex-shrink:0;margin:0;list-style:none}@keyframes _fade-in_qiofu_1{0%{opacity:0}to{opacity:1}}._item_qiofu_20{margin:0}.inkweave-choices{text-align:left;padding:.75rem 0 0}.inkweave-choices li{padding:.2rem 0 .2rem 1rem}.inkweave-choice:before{content:"▸ ";opacity:.6;margin-right:.25rem}._button_qiofu_40{color:inherit;cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:none;transition:opacity .15s;display:inline}._button_qiofu_40:focus-visible{outline-offset:2px;outline:2px solid}._button_qiofu_40:hover{opacity:.7}._button_qiofu_40:active{opacity:.5}._disabled_qiofu_65{opacity:.3;cursor:not-allowed;pointer-events:none}._contents_18tyw_1{flex:none}._contents_18tyw_1>div{opacity:0;animation:.5s ease-out forwards _fade-in_18tyw_1;animation-delay:var(--delay,0s)}@keyframes _fade-in_18tyw_1{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.inkweave-contents p{margin:0 0 .5rem}.inkweave-divider{opacity:.3}._story_1hvvl_1{flex-direction:column;flex:1;display:flex;overflow-y:auto}._container_1a16a_1{flex-shrink:0;justify-content:center;margin-bottom:1rem;display:flex}._container_1a16a_1 img{object-fit:contain;border-radius:8px;max-width:100%;max-height:400px}._nav_1u2m0_1{opacity:.3;background:#80808014;border-radius:12px 12px 0 0;flex-shrink:0;justify-content:flex-end;align-items:center;padding:.5rem 1rem;transition:opacity .15s;display:flex}._nav_1u2m0_1:hover{opacity:1}._actions_1u2m0_17{gap:.25rem;display:flex}._btn_1u2m0_22{cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:background-color .15s;display:flex}._btn_1u2m0_22:focus-visible{outline-offset:2px;outline:2px solid}._btn_1u2m0_22:hover{background:#80808026}._modal_x7pql_1{border:none;border-radius:12px;width:320px;max-width:calc(100vw - 2rem);height:fit-content;margin:auto;padding:0;display:none;position:fixed;inset:0;overflow:hidden;box-shadow:0 4px 16px #0000001f,0 2px 4px #00000014}._modal_x7pql_1[open]{flex-direction:column;animation:.2s ease-out _slide-in_x7pql_1;display:flex}@keyframes _slide-in_x7pql_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}._header_x7pql_36{background:#80808014;border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex}._title_x7pql_45{font-size:1rem;font-weight:600}._close_x7pql_50{cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:1.25rem;line-height:1;transition:background-color .15s;display:flex}._close_x7pql_50:focus-visible{outline-offset:2px;outline:2px solid}._close_x7pql_50:hover{background:#8080801a}._body_x7pql_75{flex-direction:column;padding:.25rem 0;display:flex}._slot_x7pql_81{text-align:left;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;font-size:.95rem;transition:background-color .15s;display:flex}._slot_x7pql_81:hover:not(:disabled){background:#8080801a}._slot_x7pql_81:focus-visible{outline-offset:-2px;outline:2px solid}._slot_x7pql_81:disabled{opacity:.4;cursor:not-allowed}._slot-name_x7pql_109{font-weight:500}._slot-timestamp_x7pql_113{opacity:.7;font-size:.85rem}._slot-empty_x7pql_118{opacity:.5;font-size:.85rem;font-style:italic}._container_4pjrc_1{border:none;border-radius:12px;flex-direction:column;max-width:680px;height:calc(90vh - 3rem);margin:1.5rem auto;padding:0;display:flex;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000f}.inkweave-story{padding:1.5rem}.inkweave-divider{border:none;border-top:1px dashed;border-color:inherit;opacity:.3;margin:.75rem 0}
|
|
2
|
+
/*$vite$:1*/
|