@magicborn/dialogue-forge 0.1.5 → 0.1.6
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/bin/postbuild.js +69 -0
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/styles/scrollbar.css +108 -0
- package/dist/styles/theme.css +106 -0
- package/package.json +3 -2
package/bin/postbuild.js
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
|
|
4
|
+
const srcStylesDir = path.join(__dirname, '..', 'src', 'styles');
|
|
5
|
+
const distStylesDir = path.join(__dirname, '..', 'dist', 'styles');
|
|
6
|
+
|
|
7
|
+
function copyStyles() {
|
|
8
|
+
if (!fs.existsSync(srcStylesDir)) return;
|
|
9
|
+
fs.mkdirSync(distStylesDir, { recursive: true });
|
|
10
|
+
const files = fs.readdirSync(srcStylesDir).filter((file) => file.endsWith('.css'));
|
|
11
|
+
files.forEach((file) => {
|
|
12
|
+
fs.copyFileSync(path.join(srcStylesDir, file), path.join(distStylesDir, file));
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function updateEsmEntryPoints() {
|
|
17
|
+
const esmEntries = [
|
|
18
|
+
path.join(__dirname, '..', 'dist', 'esm', 'index.js'),
|
|
19
|
+
path.join(__dirname, '..', 'dist', 'esm', 'index.d.ts')
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
esmEntries.forEach((filePath) => {
|
|
23
|
+
if (!fs.existsSync(filePath)) return;
|
|
24
|
+
const content = fs.readFileSync(filePath, 'utf8');
|
|
25
|
+
const updated = content.replace(/\.\/styles\//g, '../styles/');
|
|
26
|
+
fs.writeFileSync(filePath, updated);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function verifyCssPaths() {
|
|
31
|
+
const checks = [
|
|
32
|
+
{
|
|
33
|
+
filePath: path.join(__dirname, '..', 'dist', 'index.js'),
|
|
34
|
+
cssImports: ['./styles/scrollbar.css', './styles/theme.css']
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
filePath: path.join(__dirname, '..', 'dist', 'index.d.ts'),
|
|
38
|
+
cssImports: ['./styles/scrollbar.css', './styles/theme.css']
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
filePath: path.join(__dirname, '..', 'dist', 'esm', 'index.js'),
|
|
42
|
+
cssImports: ['../styles/scrollbar.css', '../styles/theme.css']
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
filePath: path.join(__dirname, '..', 'dist', 'esm', 'index.d.ts'),
|
|
46
|
+
cssImports: ['../styles/scrollbar.css', '../styles/theme.css']
|
|
47
|
+
}
|
|
48
|
+
];
|
|
49
|
+
|
|
50
|
+
checks.forEach(({ filePath, cssImports }) => {
|
|
51
|
+
if (!fs.existsSync(filePath)) return;
|
|
52
|
+
const content = fs.readFileSync(filePath, 'utf8');
|
|
53
|
+
|
|
54
|
+
cssImports.forEach((cssPath) => {
|
|
55
|
+
if (!content.includes(cssPath)) {
|
|
56
|
+
throw new Error(`Missing CSS import ${cssPath} in ${path.relative(process.cwd(), filePath)}`);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const resolved = path.resolve(path.dirname(filePath), cssPath);
|
|
60
|
+
if (!fs.existsSync(resolved)) {
|
|
61
|
+
throw new Error(`CSS asset not found for ${cssPath} referenced by ${path.relative(process.cwd(), filePath)}`);
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
copyStyles();
|
|
68
|
+
updateEsmEntryPoints();
|
|
69
|
+
verifyCssPaths();
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -8,8 +8,8 @@ export { FlagManager } from './components/FlagManager';
|
|
|
8
8
|
export { CharacterSelector } from './components/CharacterSelector';
|
|
9
9
|
export { ZoomControls } from './components/ZoomControls';
|
|
10
10
|
export { ExampleLoader } from './components/ExampleLoader';
|
|
11
|
-
import '
|
|
12
|
-
import '
|
|
11
|
+
import '../styles/scrollbar.css';
|
|
12
|
+
import '../styles/theme.css';
|
|
13
13
|
export { exampleDialogues, demoFlagSchemas, getExampleDialogue, getDemoFlagSchema, listExamples, listDemoFlagSchemas } from './examples';
|
|
14
14
|
export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds } from './examples';
|
|
15
15
|
export * from './types';
|
package/dist/esm/index.js
CHANGED
|
@@ -9,8 +9,8 @@ export { CharacterSelector } from './components/CharacterSelector';
|
|
|
9
9
|
export { ZoomControls } from './components/ZoomControls';
|
|
10
10
|
export { ExampleLoader } from './components/ExampleLoader';
|
|
11
11
|
// Export styles
|
|
12
|
-
import '
|
|
13
|
-
import '
|
|
12
|
+
import '../styles/scrollbar.css';
|
|
13
|
+
import '../styles/theme.css';
|
|
14
14
|
// Export examples
|
|
15
15
|
export { exampleDialogues, demoFlagSchemas, getExampleDialogue, getDemoFlagSchema, listExamples, listDemoFlagSchemas } from './examples';
|
|
16
16
|
export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds } from './examples';
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/* Dialogue Forge Custom Scrollbar Styles */
|
|
2
|
+
|
|
3
|
+
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
4
|
+
.dialogue-forge-scrollbar::-webkit-scrollbar {
|
|
5
|
+
width: 8px;
|
|
6
|
+
height: 8px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.dialogue-forge-scrollbar::-webkit-scrollbar-track {
|
|
10
|
+
background: rgba(15, 15, 25, 0.5);
|
|
11
|
+
border-radius: 4px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.dialogue-forge-scrollbar::-webkit-scrollbar-thumb {
|
|
15
|
+
background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.dialogue-forge-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
21
|
+
background: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(139, 92, 246, 0.7));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dialogue-forge-scrollbar::-webkit-scrollbar-corner {
|
|
25
|
+
background: transparent;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Firefox */
|
|
29
|
+
.dialogue-forge-scrollbar {
|
|
30
|
+
scrollbar-width: thin;
|
|
31
|
+
scrollbar-color: rgba(99, 102, 241, 0.5) rgba(15, 15, 25, 0.5);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Thin variant for smaller containers */
|
|
35
|
+
.dialogue-forge-scrollbar-thin::-webkit-scrollbar {
|
|
36
|
+
width: 4px;
|
|
37
|
+
height: 4px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dialogue-forge-scrollbar-thin::-webkit-scrollbar-track {
|
|
41
|
+
background: transparent;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb {
|
|
45
|
+
background: rgba(99, 102, 241, 0.4);
|
|
46
|
+
border-radius: 2px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
50
|
+
background: rgba(99, 102, 241, 0.6);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.dialogue-forge-scrollbar-thin {
|
|
54
|
+
scrollbar-width: thin;
|
|
55
|
+
scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Hide scrollbar but keep functionality */
|
|
59
|
+
.dialogue-forge-scrollbar-hidden {
|
|
60
|
+
-ms-overflow-style: none;
|
|
61
|
+
scrollbar-width: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.dialogue-forge-scrollbar-hidden::-webkit-scrollbar {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* React Flow Controls Styling */
|
|
69
|
+
.react-flow__controls {
|
|
70
|
+
background: #0d0d14 !important;
|
|
71
|
+
border: 1px solid #2a2a3e !important;
|
|
72
|
+
border-radius: 8px !important;
|
|
73
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
|
74
|
+
padding: 4px !important;
|
|
75
|
+
gap: 2px !important;
|
|
76
|
+
display: flex !important;
|
|
77
|
+
flex-direction: column !important;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.react-flow__controls-button {
|
|
81
|
+
background: #12121a !important;
|
|
82
|
+
border: 1px solid #2a2a3e !important;
|
|
83
|
+
border-radius: 4px !important;
|
|
84
|
+
width: 24px !important;
|
|
85
|
+
height: 24px !important;
|
|
86
|
+
padding: 4px !important;
|
|
87
|
+
display: flex !important;
|
|
88
|
+
align-items: center !important;
|
|
89
|
+
justify-content: center !important;
|
|
90
|
+
transition: all 0.15s ease !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.react-flow__controls-button:hover {
|
|
94
|
+
background: #1a1a2e !important;
|
|
95
|
+
border-color: #3a3a4e !important;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.react-flow__controls-button svg {
|
|
99
|
+
fill: #6b7280 !important;
|
|
100
|
+
max-width: 14px !important;
|
|
101
|
+
max-height: 14px !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.react-flow__controls-button:hover svg {
|
|
105
|
+
fill: #e5e7eb !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
/* Dialogue Forge Theme - Dark Fantasy, Earthy Tones */
|
|
2
|
+
/* CSS Variables for Tailwind v3 compatibility */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* Base Colors */
|
|
6
|
+
--color-df-base: oklch(0.15 0.02 250);
|
|
7
|
+
--color-df-surface: oklch(0.18 0.02 260);
|
|
8
|
+
--color-df-elevated: oklch(0.22 0.02 270);
|
|
9
|
+
|
|
10
|
+
/* Node Colors - General */
|
|
11
|
+
--color-df-node-bg: oklch(0.20 0.03 240);
|
|
12
|
+
--color-df-node-border: oklch(0.35 0.05 220);
|
|
13
|
+
--color-df-node-selected: oklch(0.45 0.12 15);
|
|
14
|
+
--color-df-node-dimmed: oklch(0.15 0.02 250);
|
|
15
|
+
|
|
16
|
+
/* NPC Node Colors - Earthy Brown/Tan (duller borders, bright when selected) */
|
|
17
|
+
--color-df-npc-bg: oklch(0.25 0.04 45);
|
|
18
|
+
--color-df-npc-border: oklch(0.35 0.05 35);
|
|
19
|
+
--color-df-npc-header: oklch(0.30 0.10 25);
|
|
20
|
+
--color-df-npc-text: oklch(0.85 0.02 250);
|
|
21
|
+
--color-df-npc-selected: oklch(0.60 0.20 15);
|
|
22
|
+
|
|
23
|
+
/* Player Node Colors - Deep Purple/Magenta (duller borders, bright when selected) */
|
|
24
|
+
--color-df-player-bg: oklch(0.22 0.08 300);
|
|
25
|
+
--color-df-player-border: oklch(0.38 0.10 310);
|
|
26
|
+
--color-df-player-header: oklch(0.28 0.12 290);
|
|
27
|
+
--color-df-player-text: oklch(0.85 0.02 250);
|
|
28
|
+
--color-df-player-selected: oklch(0.65 0.25 280);
|
|
29
|
+
|
|
30
|
+
/* Conditional Node Colors - Forest Green (duller borders, bright when selected) */
|
|
31
|
+
--color-df-conditional-bg: oklch(0.24 0.06 150);
|
|
32
|
+
--color-df-conditional-border: oklch(0.35 0.08 140);
|
|
33
|
+
--color-df-conditional-header: oklch(0.30 0.10 145);
|
|
34
|
+
--color-df-conditional-text: oklch(0.85 0.02 250);
|
|
35
|
+
|
|
36
|
+
/* Start/End Badges */
|
|
37
|
+
--color-df-start: oklch(0.55 0.15 140);
|
|
38
|
+
--color-df-start-bg: oklch(0.25 0.08 140);
|
|
39
|
+
--color-df-end: oklch(0.50 0.15 45);
|
|
40
|
+
--color-df-end-bg: oklch(0.25 0.08 45);
|
|
41
|
+
|
|
42
|
+
/* Edge Colors (duller default, bright on hover/selection) */
|
|
43
|
+
--color-df-edge-default: oklch(0.35 0.02 250);
|
|
44
|
+
--color-df-edge-default-hover: oklch(0.55 0.10 250);
|
|
45
|
+
--color-df-edge-choice-1: oklch(0.45 0.12 15);
|
|
46
|
+
--color-df-edge-choice-2: oklch(0.50 0.15 280);
|
|
47
|
+
--color-df-edge-choice-3: oklch(0.48 0.12 200);
|
|
48
|
+
--color-df-edge-choice-4: oklch(0.52 0.12 120);
|
|
49
|
+
--color-df-edge-choice-5: oklch(0.45 0.10 45);
|
|
50
|
+
--color-df-edge-loop: oklch(0.50 0.12 60);
|
|
51
|
+
--color-df-edge-dimmed: oklch(0.25 0.02 250);
|
|
52
|
+
|
|
53
|
+
/* Status Colors */
|
|
54
|
+
--color-df-error: oklch(0.55 0.22 25);
|
|
55
|
+
--color-df-error-bg: oklch(0.25 0.10 25);
|
|
56
|
+
--color-df-warning: oklch(0.65 0.18 70);
|
|
57
|
+
--color-df-warning-bg: oklch(0.25 0.10 70);
|
|
58
|
+
--color-df-success: oklch(0.60 0.18 150);
|
|
59
|
+
--color-df-success-bg: oklch(0.25 0.10 150);
|
|
60
|
+
--color-df-info: oklch(0.55 0.15 220);
|
|
61
|
+
--color-df-info-bg: oklch(0.25 0.08 220);
|
|
62
|
+
|
|
63
|
+
/* Text Colors */
|
|
64
|
+
--color-df-text-primary: oklch(0.85 0.02 250);
|
|
65
|
+
--color-df-text-secondary: oklch(0.65 0.02 250);
|
|
66
|
+
--color-df-text-tertiary: oklch(0.45 0.02 250);
|
|
67
|
+
--color-df-text-muted: oklch(0.40 0.02 250);
|
|
68
|
+
|
|
69
|
+
/* UI Control Colors */
|
|
70
|
+
--color-df-control-bg: oklch(0.18 0.02 260);
|
|
71
|
+
--color-df-control-border: oklch(0.30 0.03 250);
|
|
72
|
+
--color-df-control-hover: oklch(0.25 0.03 250);
|
|
73
|
+
--color-df-control-active: oklch(0.35 0.05 250);
|
|
74
|
+
|
|
75
|
+
/* Flag Colors */
|
|
76
|
+
--color-df-flag-dialogue: oklch(0.45 0.03 250);
|
|
77
|
+
--color-df-flag-dialogue-bg: oklch(0.20 0.02 250);
|
|
78
|
+
--color-df-flag-quest: oklch(0.50 0.15 220);
|
|
79
|
+
--color-df-flag-quest-bg: oklch(0.22 0.08 220);
|
|
80
|
+
--color-df-flag-achievement: oklch(0.60 0.18 70);
|
|
81
|
+
--color-df-flag-achievement-bg: oklch(0.25 0.10 70);
|
|
82
|
+
--color-df-flag-item: oklch(0.55 0.15 150);
|
|
83
|
+
--color-df-flag-item-bg: oklch(0.25 0.08 150);
|
|
84
|
+
--color-df-flag-stat: oklch(0.55 0.18 280);
|
|
85
|
+
--color-df-flag-stat-bg: oklch(0.25 0.10 280);
|
|
86
|
+
--color-df-flag-title: oklch(0.55 0.18 330);
|
|
87
|
+
--color-df-flag-title-bg: oklch(0.25 0.10 330);
|
|
88
|
+
--color-df-flag-global: oklch(0.50 0.15 45);
|
|
89
|
+
--color-df-flag-global-bg: oklch(0.25 0.08 45);
|
|
90
|
+
|
|
91
|
+
/* Canvas/Background */
|
|
92
|
+
--color-df-canvas-bg: oklch(0.12 0.01 250);
|
|
93
|
+
--color-df-canvas-grid: oklch(0.20 0.02 250);
|
|
94
|
+
|
|
95
|
+
/* Sidebar/Editor */
|
|
96
|
+
--color-df-sidebar-bg: oklch(0.18 0.02 260);
|
|
97
|
+
--color-df-sidebar-border: oklch(0.35 0.05 250);
|
|
98
|
+
--color-df-editor-bg: oklch(0.15 0.02 240);
|
|
99
|
+
--color-df-editor-border: oklch(0.30 0.03 250);
|
|
100
|
+
|
|
101
|
+
/* Shadows */
|
|
102
|
+
--shadow-df-sm: 0 2px 4px oklch(0 0 0 / 0.3);
|
|
103
|
+
--shadow-df-md: 0 4px 8px oklch(0 0 0 / 0.4);
|
|
104
|
+
--shadow-df-lg: 0 8px 16px oklch(0 0 0 / 0.5);
|
|
105
|
+
--shadow-df-glow: 0 0 12px oklch(0.45 0.12 15 / 0.3);
|
|
106
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@magicborn/dialogue-forge",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Visual node-based dialogue editor with Yarn Spinner support",
|
|
5
5
|
"author": "Ben Garrard <b2gdevs@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -24,12 +24,13 @@
|
|
|
24
24
|
},
|
|
25
25
|
"files": [
|
|
26
26
|
"dist",
|
|
27
|
+
"dist/styles",
|
|
27
28
|
"demo",
|
|
28
29
|
"bin",
|
|
29
30
|
"README.md"
|
|
30
31
|
],
|
|
31
32
|
"scripts": {
|
|
32
|
-
"build": "tsc && tsc --module esnext --outDir dist/esm",
|
|
33
|
+
"build": "tsc && tsc --module esnext --outDir dist/esm && node ./bin/postbuild.js",
|
|
33
34
|
"dev": "cd demo && npm install && npm run dev",
|
|
34
35
|
"dev:watch": "tsc --watch",
|
|
35
36
|
"test": "vitest",
|