@thanh01.pmt/presentation-kit 0.1.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 +548 -0
- package/dist/chunk-N4Q6GUAQ.cjs +1255 -0
- package/dist/chunk-N4Q6GUAQ.cjs.map +1 -0
- package/dist/chunk-RCHOTRWI.js +1231 -0
- package/dist/chunk-RCHOTRWI.js.map +1 -0
- package/dist/click-css-CadkoJ_A.d.cts +244 -0
- package/dist/click-css-CadkoJ_A.d.ts +244 -0
- package/dist/index.cjs +126 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +86 -0
- package/dist/index.d.ts +86 -0
- package/dist/index.js +33 -0
- package/dist/index.js.map +1 -0
- package/dist/react/index.cjs +788 -0
- package/dist/react/index.cjs.map +1 -0
- package/dist/react/index.d.cts +269 -0
- package/dist/react/index.d.ts +269 -0
- package/dist/react/index.js +750 -0
- package/dist/react/index.js.map +1 -0
- package/package.json +61 -0
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
/** Built-in theme identifiers */
|
|
2
|
+
type BuiltInTheme = 'dark' | 'light' | 'navy';
|
|
3
|
+
/** Custom theme tokens — all colors as hex or CSS color values */
|
|
4
|
+
interface ThemeTokens {
|
|
5
|
+
/** Slide background color */
|
|
6
|
+
background: string;
|
|
7
|
+
/** Primary text color */
|
|
8
|
+
text: string;
|
|
9
|
+
/** Heading color (h1, h2, h3) */
|
|
10
|
+
heading: string;
|
|
11
|
+
/** Bold text color */
|
|
12
|
+
bold: string;
|
|
13
|
+
/** Link color */
|
|
14
|
+
link: string;
|
|
15
|
+
/** Code block background */
|
|
16
|
+
codeBg: string;
|
|
17
|
+
/** Code block text color */
|
|
18
|
+
codeText: string;
|
|
19
|
+
/** Inline code background */
|
|
20
|
+
inlineCodeBg: string;
|
|
21
|
+
/** Inline code text color */
|
|
22
|
+
inlineCodeText: string;
|
|
23
|
+
/** Code border color */
|
|
24
|
+
codeBorder: string;
|
|
25
|
+
/** Blockquote background */
|
|
26
|
+
quoteBg: string;
|
|
27
|
+
/** Blockquote border color */
|
|
28
|
+
quoteBorder: string;
|
|
29
|
+
/** Blockquote text color */
|
|
30
|
+
quoteText: string;
|
|
31
|
+
/** Table header background */
|
|
32
|
+
tableHeaderBg: string;
|
|
33
|
+
/** Table border color */
|
|
34
|
+
tableBorder: string;
|
|
35
|
+
/** Table row hover color */
|
|
36
|
+
tableRowHover: string;
|
|
37
|
+
/** Table text color */
|
|
38
|
+
tableText: string;
|
|
39
|
+
/** Card border (slide border) */
|
|
40
|
+
cardBorder: string;
|
|
41
|
+
/** Card shadow */
|
|
42
|
+
cardShadow: string;
|
|
43
|
+
/** Footer / header meta color */
|
|
44
|
+
meta: string;
|
|
45
|
+
/** Table even row background (navy uses tinted) */
|
|
46
|
+
tableEvenRow?: string;
|
|
47
|
+
/** Mermaid dark mode flag */
|
|
48
|
+
mermaidDark: boolean;
|
|
49
|
+
/** Mermaid theme variables (passed to mermaid.initialize) */
|
|
50
|
+
mermaidVariables: Record<string, string>;
|
|
51
|
+
/** Mermaid themeCSS (inline CSS for mermaid rendering) */
|
|
52
|
+
mermaidThemeCSS: string;
|
|
53
|
+
}
|
|
54
|
+
/** Custom theme definition */
|
|
55
|
+
interface SlideTheme {
|
|
56
|
+
/** Unique theme name */
|
|
57
|
+
name: string;
|
|
58
|
+
/** Theme color tokens */
|
|
59
|
+
tokens: ThemeTokens;
|
|
60
|
+
}
|
|
61
|
+
/** Mermaid block detected in rendered HTML */
|
|
62
|
+
interface MermaidBlock {
|
|
63
|
+
/** Index of the block in the slide deck */
|
|
64
|
+
index: number;
|
|
65
|
+
/** Raw mermaid code (before sanitization) */
|
|
66
|
+
code: string;
|
|
67
|
+
/** Sanitized mermaid code (after sanitizeMermaidCode) */
|
|
68
|
+
sanitizedCode: string;
|
|
69
|
+
}
|
|
70
|
+
/** Options for slide rendering */
|
|
71
|
+
interface SlideRenderOptions {
|
|
72
|
+
/** Theme to use — built-in name or custom SlideTheme */
|
|
73
|
+
theme?: BuiltInTheme | SlideTheme;
|
|
74
|
+
/** Enable Shiki syntax highlighting for code blocks (default: true) */
|
|
75
|
+
enableShiki?: boolean;
|
|
76
|
+
/** Enable Mermaid diagram rendering (default: true) */
|
|
77
|
+
enableMermaid?: boolean;
|
|
78
|
+
/** Enable click-to-reveal system (default: false) */
|
|
79
|
+
enableClicks?: boolean;
|
|
80
|
+
/** Container element ID (default: 'marp-container') */
|
|
81
|
+
containerId?: string;
|
|
82
|
+
}
|
|
83
|
+
/** Result of synchronous slide rendering */
|
|
84
|
+
interface SlideRenderResult {
|
|
85
|
+
/** Rendered HTML (with slide sections) */
|
|
86
|
+
html: string;
|
|
87
|
+
/** Marp-generated CSS */
|
|
88
|
+
css: string;
|
|
89
|
+
/** Scoped theme CSS (custom typography + layout) */
|
|
90
|
+
themeCss: string;
|
|
91
|
+
/** Number of slides detected */
|
|
92
|
+
slideCount: number;
|
|
93
|
+
/** Mermaid blocks detected (consumer must render these into DOM) */
|
|
94
|
+
mermaidBlocks: MermaidBlock[];
|
|
95
|
+
/** Scoped CSS for click-to-reveal animations (empty if clicks disabled) */
|
|
96
|
+
clickCss: string;
|
|
97
|
+
/** Total number of click groups (0 if clicks disabled) */
|
|
98
|
+
maxClicks: number;
|
|
99
|
+
}
|
|
100
|
+
/** Extended result for async rendering (includes Shiki processed HTML) */
|
|
101
|
+
interface SlideRenderAsyncResult extends SlideRenderResult {
|
|
102
|
+
/** HTML after Shiki post-processing */
|
|
103
|
+
processedHtml: string;
|
|
104
|
+
}
|
|
105
|
+
/** Engine configuration for createEngine() */
|
|
106
|
+
interface SlideEngineConfig {
|
|
107
|
+
/** Default theme for all renders */
|
|
108
|
+
theme?: BuiltInTheme | SlideTheme;
|
|
109
|
+
/** Enable Shiki by default (default: true) */
|
|
110
|
+
enableShiki?: boolean;
|
|
111
|
+
/** Enable Mermaid by default (default: true) */
|
|
112
|
+
enableMermaid?: boolean;
|
|
113
|
+
}
|
|
114
|
+
/** Slide engine instance returned by createEngine() */
|
|
115
|
+
interface SlideEngine {
|
|
116
|
+
/** Synchronous render — fast, mermaid blocks returned separately */
|
|
117
|
+
render: (markdown: string, options?: SlideRenderOptions) => SlideRenderResult;
|
|
118
|
+
/** Async render — waits for Shiki, returns fully processed HTML */
|
|
119
|
+
renderAsync: (markdown: string, options?: SlideRenderOptions) => Promise<SlideRenderAsyncResult>;
|
|
120
|
+
/** Get scoped CSS for a theme */
|
|
121
|
+
getThemeCss: (theme: BuiltInTheme | SlideTheme, containerId?: string) => string;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Synchronous Marp render — instant, no network.
|
|
126
|
+
* Returns raw HTML + CSS + theme CSS + mermaid blocks detection.
|
|
127
|
+
* Shiki and Mermaid are NOT applied (use renderSlideAsync for full quality).
|
|
128
|
+
*/
|
|
129
|
+
declare function renderMarp(markdown: string, containerId?: string, enableClicks?: boolean): {
|
|
130
|
+
html: string;
|
|
131
|
+
css: string;
|
|
132
|
+
maxClicks: number;
|
|
133
|
+
};
|
|
134
|
+
/**
|
|
135
|
+
* Count slides in rendered Marp HTML by detecting <svg data-marpit-svg> elements.
|
|
136
|
+
*/
|
|
137
|
+
declare function countSlides(html: string): number;
|
|
138
|
+
/**
|
|
139
|
+
* High-level synchronous render — resolves theme, generates scoped CSS,
|
|
140
|
+
* detects mermaid blocks. Does NOT apply Shiki or Mermaid rendering.
|
|
141
|
+
*/
|
|
142
|
+
declare function renderSlide(markdown: string, options?: SlideRenderOptions): SlideRenderResult;
|
|
143
|
+
/**
|
|
144
|
+
* High-level async render — applies Shiki syntax highlighting.
|
|
145
|
+
* Mermaid blocks are returned separately (DOM-based, consumer renders them).
|
|
146
|
+
*/
|
|
147
|
+
declare function renderSlideAsync(markdown: string, options?: SlideRenderOptions): Promise<SlideRenderAsyncResult>;
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Get theme tokens by built-in name.
|
|
151
|
+
*/
|
|
152
|
+
declare function getThemeTokens(theme: BuiltInTheme): ThemeTokens;
|
|
153
|
+
/**
|
|
154
|
+
* Resolve a theme (built-in name or custom SlideTheme) to a full SlideTheme object.
|
|
155
|
+
*/
|
|
156
|
+
declare function resolveTheme(theme: BuiltInTheme | SlideTheme | undefined): SlideTheme;
|
|
157
|
+
/**
|
|
158
|
+
* Define a custom theme with full token control.
|
|
159
|
+
*/
|
|
160
|
+
declare function defineTheme(definition: {
|
|
161
|
+
name: string;
|
|
162
|
+
tokens: ThemeTokens;
|
|
163
|
+
}): SlideTheme;
|
|
164
|
+
/**
|
|
165
|
+
* Generate scoped CSS for a theme.
|
|
166
|
+
*/
|
|
167
|
+
declare function generateScopedCss(theme: SlideTheme, containerId?: string): string;
|
|
168
|
+
|
|
169
|
+
interface ClickPreprocessResult {
|
|
170
|
+
/** Processed markdown with HTML click markers */
|
|
171
|
+
markdown: string;
|
|
172
|
+
/** Total number of click groups assigned */
|
|
173
|
+
totalClicks: number;
|
|
174
|
+
}
|
|
175
|
+
/**
|
|
176
|
+
* Preprocess markdown to convert click directives to HTML wrappers.
|
|
177
|
+
*
|
|
178
|
+
* Syntax:
|
|
179
|
+
* - `<!-- click -->` → Block-level: wraps next block in data-click-group="N"
|
|
180
|
+
* - `<!-- clicks -->` → Item-level: marks list for auto-expansion in postprocessor
|
|
181
|
+
*
|
|
182
|
+
* Auto-assigns sequential indices (1, 2, 3, ...) based on order of appearance.
|
|
183
|
+
*
|
|
184
|
+
* IMPORTANT: Skips code fences (``` ... ```) to avoid converting directives
|
|
185
|
+
* inside code blocks.
|
|
186
|
+
*
|
|
187
|
+
* Strategy: Each `<!-- click -->` opens a `<div data-click-group="N">` that wraps
|
|
188
|
+
* all content until the next `<!-- click -->` / `<!-- clicks -->` or end of slide.
|
|
189
|
+
* The postprocessor only needs to handle `<!-- clicks -->` (list expansion).
|
|
190
|
+
*/
|
|
191
|
+
declare function preprocessClicks(markdown: string): ClickPreprocessResult;
|
|
192
|
+
|
|
193
|
+
interface ClickPostprocessResult {
|
|
194
|
+
/** HTML with click groups applied */
|
|
195
|
+
html: string;
|
|
196
|
+
/** Total number of individual click groups (after expanding clicks) */
|
|
197
|
+
totalClicks: number;
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Post-process rendered Marp HTML to expand clicks (item-level) list items.
|
|
201
|
+
*
|
|
202
|
+
* The preprocessor wraps <!-- click --> blocks in <div data-click-group="N">.
|
|
203
|
+
* This postprocessor handles <!-- clicks --> by splitting list items into
|
|
204
|
+
* individual click groups.
|
|
205
|
+
*
|
|
206
|
+
* Pattern: <div data-clicks="N">...<ul><li>...</li></ul>...</div>
|
|
207
|
+
* Becomes: multiple <div data-click-group="N">...<ul><li>...</li></ul>...</div>
|
|
208
|
+
*
|
|
209
|
+
* @param html - Raw Marp-rendered HTML (with click-group and clicks markers)
|
|
210
|
+
* @returns HTML with all click groups expanded
|
|
211
|
+
*/
|
|
212
|
+
declare function postprocessClicks(html: string): ClickPostprocessResult;
|
|
213
|
+
/**
|
|
214
|
+
* Extract max click index from rendered HTML.
|
|
215
|
+
* Scans for all data-click-group="N" attributes and returns the max N.
|
|
216
|
+
*/
|
|
217
|
+
declare function extractMaxClicks(html: string): number;
|
|
218
|
+
|
|
219
|
+
interface ClickCssOptions {
|
|
220
|
+
/** Container ID to scope CSS (default: no scope, global) */
|
|
221
|
+
containerId?: string;
|
|
222
|
+
/** Animation duration in ms (default: 300) */
|
|
223
|
+
duration?: number;
|
|
224
|
+
/** Animation easing (default: 'ease') */
|
|
225
|
+
easing?: string;
|
|
226
|
+
/** Y offset for slide-up animation in px (default: 8) */
|
|
227
|
+
offsetY?: number;
|
|
228
|
+
/** Use slide-up animation (default: true) */
|
|
229
|
+
slideUp?: boolean;
|
|
230
|
+
/** Use fade animation (default: true) */
|
|
231
|
+
fade?: boolean;
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* Generate CSS for click-to-reveal system.
|
|
235
|
+
*
|
|
236
|
+
* Elements with `data-click-group="N"` are hidden by default.
|
|
237
|
+
* Adding class `visible` reveals them with animation.
|
|
238
|
+
*
|
|
239
|
+
* @param options - Animation options
|
|
240
|
+
* @returns CSS string to inject via <style>
|
|
241
|
+
*/
|
|
242
|
+
declare function generateClickCss(options?: ClickCssOptions): string;
|
|
243
|
+
|
|
244
|
+
export { type BuiltInTheme as B, type ClickPreprocessResult as C, type MermaidBlock as M, type SlideEngineConfig as S, type ThemeTokens as T, type SlideEngine as a, renderSlideAsync as b, renderMarp as c, countSlides as d, defineTheme as e, resolveTheme as f, getThemeTokens as g, generateScopedCss as h, postprocessClicks as i, extractMaxClicks as j, generateClickCss as k, type ClickPostprocessResult as l, type ClickCssOptions as m, type SlideTheme as n, type SlideRenderOptions as o, preprocessClicks as p, type SlideRenderResult as q, renderSlide as r, type SlideRenderAsyncResult as s };
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkN4Q6GUAQ_cjs = require('./chunk-N4Q6GUAQ.cjs');
|
|
4
|
+
|
|
5
|
+
// src/engine.ts
|
|
6
|
+
function createEngine(config = {}) {
|
|
7
|
+
const defaultTheme = config.theme ?? "dark";
|
|
8
|
+
const defaultEnableShiki = config.enableShiki ?? true;
|
|
9
|
+
const defaultEnableMermaid = config.enableMermaid ?? true;
|
|
10
|
+
function mergeOptions(options) {
|
|
11
|
+
return {
|
|
12
|
+
theme: options?.theme ?? defaultTheme,
|
|
13
|
+
enableShiki: options?.enableShiki ?? defaultEnableShiki,
|
|
14
|
+
enableMermaid: options?.enableMermaid ?? defaultEnableMermaid,
|
|
15
|
+
containerId: options?.containerId
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
return {
|
|
19
|
+
render: (markdown, options) => {
|
|
20
|
+
return chunkN4Q6GUAQ_cjs.renderSlide(markdown, mergeOptions(options));
|
|
21
|
+
},
|
|
22
|
+
renderAsync: async (markdown, options) => {
|
|
23
|
+
return chunkN4Q6GUAQ_cjs.renderSlideAsync(markdown, mergeOptions(options));
|
|
24
|
+
},
|
|
25
|
+
getThemeCss: (theme, containerId) => {
|
|
26
|
+
const resolved = chunkN4Q6GUAQ_cjs.resolveTheme(theme);
|
|
27
|
+
return chunkN4Q6GUAQ_cjs.generateScopedCss2(resolved, containerId);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
Object.defineProperty(exports, "convertTextArrows", {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function () { return chunkN4Q6GUAQ_cjs.convertTextArrows; }
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "countSlides", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () { return chunkN4Q6GUAQ_cjs.countSlides; }
|
|
39
|
+
});
|
|
40
|
+
Object.defineProperty(exports, "darkThemeTokens", {
|
|
41
|
+
enumerable: true,
|
|
42
|
+
get: function () { return chunkN4Q6GUAQ_cjs.darkThemeTokens; }
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(exports, "defineTheme", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function () { return chunkN4Q6GUAQ_cjs.defineTheme; }
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports, "detectMermaidBlocks", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () { return chunkN4Q6GUAQ_cjs.detectMermaidBlocks; }
|
|
51
|
+
});
|
|
52
|
+
Object.defineProperty(exports, "extractMarpSource", {
|
|
53
|
+
enumerable: true,
|
|
54
|
+
get: function () { return chunkN4Q6GUAQ_cjs.extractMarpSource; }
|
|
55
|
+
});
|
|
56
|
+
Object.defineProperty(exports, "extractMaxClicks", {
|
|
57
|
+
enumerable: true,
|
|
58
|
+
get: function () { return chunkN4Q6GUAQ_cjs.extractMaxClicks; }
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(exports, "generateClickCss", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () { return chunkN4Q6GUAQ_cjs.generateClickCss; }
|
|
63
|
+
});
|
|
64
|
+
Object.defineProperty(exports, "generateScopedCss", {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function () { return chunkN4Q6GUAQ_cjs.generateScopedCss2; }
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(exports, "generateScopedCssFromTokens", {
|
|
69
|
+
enumerable: true,
|
|
70
|
+
get: function () { return chunkN4Q6GUAQ_cjs.generateScopedCss; }
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "getHighlighter", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () { return chunkN4Q6GUAQ_cjs.getHighlighter; }
|
|
75
|
+
});
|
|
76
|
+
Object.defineProperty(exports, "getThemeTokens", {
|
|
77
|
+
enumerable: true,
|
|
78
|
+
get: function () { return chunkN4Q6GUAQ_cjs.getThemeTokens; }
|
|
79
|
+
});
|
|
80
|
+
Object.defineProperty(exports, "highlightCodeBlocks", {
|
|
81
|
+
enumerable: true,
|
|
82
|
+
get: function () { return chunkN4Q6GUAQ_cjs.highlightCodeBlocks; }
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, "lightThemeTokens", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () { return chunkN4Q6GUAQ_cjs.lightThemeTokens; }
|
|
87
|
+
});
|
|
88
|
+
Object.defineProperty(exports, "navyThemeTokens", {
|
|
89
|
+
enumerable: true,
|
|
90
|
+
get: function () { return chunkN4Q6GUAQ_cjs.navyThemeTokens; }
|
|
91
|
+
});
|
|
92
|
+
Object.defineProperty(exports, "postprocessClicks", {
|
|
93
|
+
enumerable: true,
|
|
94
|
+
get: function () { return chunkN4Q6GUAQ_cjs.postprocessClicks; }
|
|
95
|
+
});
|
|
96
|
+
Object.defineProperty(exports, "preprocessClicks", {
|
|
97
|
+
enumerable: true,
|
|
98
|
+
get: function () { return chunkN4Q6GUAQ_cjs.preprocessClicks; }
|
|
99
|
+
});
|
|
100
|
+
Object.defineProperty(exports, "renderMarp", {
|
|
101
|
+
enumerable: true,
|
|
102
|
+
get: function () { return chunkN4Q6GUAQ_cjs.renderMarp; }
|
|
103
|
+
});
|
|
104
|
+
Object.defineProperty(exports, "renderMermaidDiagrams", {
|
|
105
|
+
enumerable: true,
|
|
106
|
+
get: function () { return chunkN4Q6GUAQ_cjs.renderMermaidDiagrams; }
|
|
107
|
+
});
|
|
108
|
+
Object.defineProperty(exports, "renderSlide", {
|
|
109
|
+
enumerable: true,
|
|
110
|
+
get: function () { return chunkN4Q6GUAQ_cjs.renderSlide; }
|
|
111
|
+
});
|
|
112
|
+
Object.defineProperty(exports, "renderSlideAsync", {
|
|
113
|
+
enumerable: true,
|
|
114
|
+
get: function () { return chunkN4Q6GUAQ_cjs.renderSlideAsync; }
|
|
115
|
+
});
|
|
116
|
+
Object.defineProperty(exports, "resolveTheme", {
|
|
117
|
+
enumerable: true,
|
|
118
|
+
get: function () { return chunkN4Q6GUAQ_cjs.resolveTheme; }
|
|
119
|
+
});
|
|
120
|
+
Object.defineProperty(exports, "sanitizeMermaidCode", {
|
|
121
|
+
enumerable: true,
|
|
122
|
+
get: function () { return chunkN4Q6GUAQ_cjs.sanitizeMermaidCode; }
|
|
123
|
+
});
|
|
124
|
+
exports.createEngine = createEngine;
|
|
125
|
+
//# sourceMappingURL=index.cjs.map
|
|
126
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/engine.ts"],"names":["renderSlide","renderSlideAsync","resolveTheme","generateScopedCss"],"mappings":";;;;;AAyBO,SAAS,YAAA,CAAa,MAAA,GAA4B,EAAC,EAAgB;AACxE,EAAA,MAAM,YAAA,GAAe,OAAO,KAAA,IAAS,MAAA;AACrC,EAAA,MAAM,kBAAA,GAAqB,OAAO,WAAA,IAAe,IAAA;AACjD,EAAA,MAAM,oBAAA,GAAuB,OAAO,aAAA,IAAiB,IAAA;AAErD,EAAA,SAAS,aAAa,OAAA,EAAkD;AACtE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,SAAS,KAAA,IAAS,YAAA;AAAA,MACzB,WAAA,EAAa,SAAS,WAAA,IAAe,kBAAA;AAAA,MACrC,aAAA,EAAe,SAAS,aAAA,IAAiB,oBAAA;AAAA,MACzC,aAAa,OAAA,EAAS;AAAA,KACxB;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,MAAA,EAAQ,CAAC,QAAA,EAAkB,OAAA,KAAoD;AAC7E,MAAA,OAAOA,6BAAA,CAAY,QAAA,EAAU,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACpD,CAAA;AAAA,IAEA,WAAA,EAAa,OAAO,QAAA,EAAkB,OAAA,KAAkE;AACtG,MAAA,OAAOC,kCAAA,CAAiB,QAAA,EAAU,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACzD,CAAA;AAAA,IAEA,WAAA,EAAa,CAAC,KAAA,EAAkC,WAAA,KAAiC;AAC/E,MAAA,MAAM,QAAA,GAAWC,+BAAa,KAAK,CAAA;AACnC,MAAA,OAAOC,oCAAAA,CAAkB,UAAU,WAAW,CAAA;AAAA,IAChD;AAAA,GACF;AACF","file":"index.cjs","sourcesContent":["// ═══════════════════════════════════════════════════════════════════════════════\n// Engine Factory — createEngine() for advanced usage\n// ═══════════════════════════════════════════════════════════════════════════════\n\nimport type { SlideEngine, SlideEngineConfig, SlideRenderOptions, SlideRenderResult, SlideRenderAsyncResult, BuiltInTheme, SlideTheme } from './types.js';\nimport { renderSlide, renderSlideAsync } from './core/render.js';\nimport { resolveTheme, generateScopedCss } from './themes/index.js';\n\n/**\n * Create a slide engine instance with default configuration.\n *\n * @example\n * ```ts\n * const engine = createEngine({ theme: 'dark' });\n *\n * // Synchronous\n * const result = engine.render(markdown);\n *\n * // Async (with Shiki highlighting)\n * const fullResult = await engine.renderAsync(markdown);\n *\n * // Get theme CSS independently\n * const css = engine.getThemeCss('navy');\n * ```\n */\nexport function createEngine(config: SlideEngineConfig = {}): SlideEngine {\n const defaultTheme = config.theme ?? 'dark';\n const defaultEnableShiki = config.enableShiki ?? true;\n const defaultEnableMermaid = config.enableMermaid ?? true;\n\n function mergeOptions(options?: SlideRenderOptions): SlideRenderOptions {\n return {\n theme: options?.theme ?? defaultTheme,\n enableShiki: options?.enableShiki ?? defaultEnableShiki,\n enableMermaid: options?.enableMermaid ?? defaultEnableMermaid,\n containerId: options?.containerId,\n };\n }\n\n return {\n render: (markdown: string, options?: SlideRenderOptions): SlideRenderResult => {\n return renderSlide(markdown, mergeOptions(options));\n },\n\n renderAsync: async (markdown: string, options?: SlideRenderOptions): Promise<SlideRenderAsyncResult> => {\n return renderSlideAsync(markdown, mergeOptions(options));\n },\n\n getThemeCss: (theme: BuiltInTheme | SlideTheme, containerId?: string): string => {\n const resolved = resolveTheme(theme);\n return generateScopedCss(resolved, containerId);\n },\n };\n}\n"]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock } from './click-css-CadkoJ_A.cjs';
|
|
2
|
+
export { B as BuiltInTheme, m as ClickCssOptions, l as ClickPostprocessResult, C as ClickPreprocessResult, s as SlideRenderAsyncResult, o as SlideRenderOptions, q as SlideRenderResult, n as SlideTheme, d as countSlides, e as defineTheme, j as extractMaxClicks, k as generateClickCss, h as generateScopedCss, g as getThemeTokens, i as postprocessClicks, p as preprocessClicks, c as renderMarp, r as renderSlide, b as renderSlideAsync, f as resolveTheme } from './click-css-CadkoJ_A.cjs';
|
|
3
|
+
import { Highlighter } from 'shiki';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Create a slide engine instance with default configuration.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* const engine = createEngine({ theme: 'dark' });
|
|
11
|
+
*
|
|
12
|
+
* // Synchronous
|
|
13
|
+
* const result = engine.render(markdown);
|
|
14
|
+
*
|
|
15
|
+
* // Async (with Shiki highlighting)
|
|
16
|
+
* const fullResult = await engine.renderAsync(markdown);
|
|
17
|
+
*
|
|
18
|
+
* // Get theme CSS independently
|
|
19
|
+
* const css = engine.getThemeCss('navy');
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
declare function createEngine(config?: SlideEngineConfig): SlideEngine;
|
|
23
|
+
|
|
24
|
+
declare const darkThemeTokens: ThemeTokens;
|
|
25
|
+
|
|
26
|
+
declare const lightThemeTokens: ThemeTokens;
|
|
27
|
+
|
|
28
|
+
declare const navyThemeTokens: ThemeTokens;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Generate scoped CSS string for a given theme.
|
|
32
|
+
* This CSS overrides Marp defaults for 1280×720 canvas typography using
|
|
33
|
+
* the container ID for CSS isolation.
|
|
34
|
+
*/
|
|
35
|
+
declare function generateScopedCss(tokens: ThemeTokens, containerId?: string): string;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Get or create the Shiki highlighter singleton.
|
|
39
|
+
* First call lazy-loads the WASM module (~3MB); subsequent calls return cached instance.
|
|
40
|
+
*/
|
|
41
|
+
declare function getHighlighter(): Promise<Highlighter>;
|
|
42
|
+
/**
|
|
43
|
+
* Post-process rendered HTML: replace <pre><code class="language-xxx"> blocks
|
|
44
|
+
* with Shiki-highlighted HTML.
|
|
45
|
+
*
|
|
46
|
+
* This is async because Shiki WASM must be loaded on first call.
|
|
47
|
+
*/
|
|
48
|
+
declare function highlightCodeBlocks(html: string, theme?: string): Promise<string>;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Detect mermaid blocks in rendered Marp HTML.
|
|
52
|
+
* Returns array of MermaidBlock with raw and sanitized code.
|
|
53
|
+
*/
|
|
54
|
+
declare function detectMermaidBlocks(html: string): MermaidBlock[];
|
|
55
|
+
/**
|
|
56
|
+
* Sanitize mermaid code — fix common issues that cause render failures.
|
|
57
|
+
* Ported from: apps/web/components/MermaidRenderer.tsx sanitizeMermaidCode()
|
|
58
|
+
*/
|
|
59
|
+
declare function sanitizeMermaidCode(chart: string, isDark?: boolean): string;
|
|
60
|
+
/**
|
|
61
|
+
* Render mermaid diagrams inside a container element.
|
|
62
|
+
* Lazy-loads mermaid module on first call.
|
|
63
|
+
*
|
|
64
|
+
* This function MUST run in a browser environment (needs DOM).
|
|
65
|
+
* Returns early gracefully in SSR/Node.js environments.
|
|
66
|
+
*/
|
|
67
|
+
declare function renderMermaidDiagrams(container: HTMLElement, theme?: 'dark' | 'light' | 'navy'): Promise<void>;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Converts text arrows (->, -->, --->, =>, ==>, <->, etc.) into clean Unicode
|
|
71
|
+
* arrows while strictly preserving YAML frontmatter, code fences, inline code,
|
|
72
|
+
* HTML comments, and style tags.
|
|
73
|
+
*/
|
|
74
|
+
declare function convertTextArrows(text: string): string;
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Extracts clean Marp source from markdown that may be wrapped in code fences
|
|
78
|
+
* or preceded by conversational preamble.
|
|
79
|
+
*
|
|
80
|
+
* Handles:
|
|
81
|
+
* - Wrapped in ```markdown ... ``` or ```marp ... ``` or ```md ... ```
|
|
82
|
+
* - Conversational preamble before the first frontmatter ---
|
|
83
|
+
*/
|
|
84
|
+
declare function extractMarpSource(raw: string): string;
|
|
85
|
+
|
|
86
|
+
export { MermaidBlock, SlideEngine, SlideEngineConfig, ThemeTokens, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractMarpSource, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, lightThemeTokens, navyThemeTokens, renderMermaidDiagrams, sanitizeMermaidCode };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock } from './click-css-CadkoJ_A.js';
|
|
2
|
+
export { B as BuiltInTheme, m as ClickCssOptions, l as ClickPostprocessResult, C as ClickPreprocessResult, s as SlideRenderAsyncResult, o as SlideRenderOptions, q as SlideRenderResult, n as SlideTheme, d as countSlides, e as defineTheme, j as extractMaxClicks, k as generateClickCss, h as generateScopedCss, g as getThemeTokens, i as postprocessClicks, p as preprocessClicks, c as renderMarp, r as renderSlide, b as renderSlideAsync, f as resolveTheme } from './click-css-CadkoJ_A.js';
|
|
3
|
+
import { Highlighter } from 'shiki';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Create a slide engine instance with default configuration.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* const engine = createEngine({ theme: 'dark' });
|
|
11
|
+
*
|
|
12
|
+
* // Synchronous
|
|
13
|
+
* const result = engine.render(markdown);
|
|
14
|
+
*
|
|
15
|
+
* // Async (with Shiki highlighting)
|
|
16
|
+
* const fullResult = await engine.renderAsync(markdown);
|
|
17
|
+
*
|
|
18
|
+
* // Get theme CSS independently
|
|
19
|
+
* const css = engine.getThemeCss('navy');
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
declare function createEngine(config?: SlideEngineConfig): SlideEngine;
|
|
23
|
+
|
|
24
|
+
declare const darkThemeTokens: ThemeTokens;
|
|
25
|
+
|
|
26
|
+
declare const lightThemeTokens: ThemeTokens;
|
|
27
|
+
|
|
28
|
+
declare const navyThemeTokens: ThemeTokens;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Generate scoped CSS string for a given theme.
|
|
32
|
+
* This CSS overrides Marp defaults for 1280×720 canvas typography using
|
|
33
|
+
* the container ID for CSS isolation.
|
|
34
|
+
*/
|
|
35
|
+
declare function generateScopedCss(tokens: ThemeTokens, containerId?: string): string;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Get or create the Shiki highlighter singleton.
|
|
39
|
+
* First call lazy-loads the WASM module (~3MB); subsequent calls return cached instance.
|
|
40
|
+
*/
|
|
41
|
+
declare function getHighlighter(): Promise<Highlighter>;
|
|
42
|
+
/**
|
|
43
|
+
* Post-process rendered HTML: replace <pre><code class="language-xxx"> blocks
|
|
44
|
+
* with Shiki-highlighted HTML.
|
|
45
|
+
*
|
|
46
|
+
* This is async because Shiki WASM must be loaded on first call.
|
|
47
|
+
*/
|
|
48
|
+
declare function highlightCodeBlocks(html: string, theme?: string): Promise<string>;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Detect mermaid blocks in rendered Marp HTML.
|
|
52
|
+
* Returns array of MermaidBlock with raw and sanitized code.
|
|
53
|
+
*/
|
|
54
|
+
declare function detectMermaidBlocks(html: string): MermaidBlock[];
|
|
55
|
+
/**
|
|
56
|
+
* Sanitize mermaid code — fix common issues that cause render failures.
|
|
57
|
+
* Ported from: apps/web/components/MermaidRenderer.tsx sanitizeMermaidCode()
|
|
58
|
+
*/
|
|
59
|
+
declare function sanitizeMermaidCode(chart: string, isDark?: boolean): string;
|
|
60
|
+
/**
|
|
61
|
+
* Render mermaid diagrams inside a container element.
|
|
62
|
+
* Lazy-loads mermaid module on first call.
|
|
63
|
+
*
|
|
64
|
+
* This function MUST run in a browser environment (needs DOM).
|
|
65
|
+
* Returns early gracefully in SSR/Node.js environments.
|
|
66
|
+
*/
|
|
67
|
+
declare function renderMermaidDiagrams(container: HTMLElement, theme?: 'dark' | 'light' | 'navy'): Promise<void>;
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Converts text arrows (->, -->, --->, =>, ==>, <->, etc.) into clean Unicode
|
|
71
|
+
* arrows while strictly preserving YAML frontmatter, code fences, inline code,
|
|
72
|
+
* HTML comments, and style tags.
|
|
73
|
+
*/
|
|
74
|
+
declare function convertTextArrows(text: string): string;
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Extracts clean Marp source from markdown that may be wrapped in code fences
|
|
78
|
+
* or preceded by conversational preamble.
|
|
79
|
+
*
|
|
80
|
+
* Handles:
|
|
81
|
+
* - Wrapped in ```markdown ... ``` or ```marp ... ``` or ```md ... ```
|
|
82
|
+
* - Conversational preamble before the first frontmatter ---
|
|
83
|
+
*/
|
|
84
|
+
declare function extractMarpSource(raw: string): string;
|
|
85
|
+
|
|
86
|
+
export { MermaidBlock, SlideEngine, SlideEngineConfig, ThemeTokens, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractMarpSource, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, lightThemeTokens, navyThemeTokens, renderMermaidDiagrams, sanitizeMermaidCode };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { resolveTheme, generateScopedCss2, renderSlideAsync, renderSlide } from './chunk-RCHOTRWI.js';
|
|
2
|
+
export { convertTextArrows, countSlides, darkThemeTokens, defineTheme, detectMermaidBlocks, extractMarpSource, extractMaxClicks, generateClickCss, generateScopedCss2 as generateScopedCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, getThemeTokens, highlightCodeBlocks, lightThemeTokens, navyThemeTokens, postprocessClicks, preprocessClicks, renderMarp, renderMermaidDiagrams, renderSlide, renderSlideAsync, resolveTheme, sanitizeMermaidCode } from './chunk-RCHOTRWI.js';
|
|
3
|
+
|
|
4
|
+
// src/engine.ts
|
|
5
|
+
function createEngine(config = {}) {
|
|
6
|
+
const defaultTheme = config.theme ?? "dark";
|
|
7
|
+
const defaultEnableShiki = config.enableShiki ?? true;
|
|
8
|
+
const defaultEnableMermaid = config.enableMermaid ?? true;
|
|
9
|
+
function mergeOptions(options) {
|
|
10
|
+
return {
|
|
11
|
+
theme: options?.theme ?? defaultTheme,
|
|
12
|
+
enableShiki: options?.enableShiki ?? defaultEnableShiki,
|
|
13
|
+
enableMermaid: options?.enableMermaid ?? defaultEnableMermaid,
|
|
14
|
+
containerId: options?.containerId
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
render: (markdown, options) => {
|
|
19
|
+
return renderSlide(markdown, mergeOptions(options));
|
|
20
|
+
},
|
|
21
|
+
renderAsync: async (markdown, options) => {
|
|
22
|
+
return renderSlideAsync(markdown, mergeOptions(options));
|
|
23
|
+
},
|
|
24
|
+
getThemeCss: (theme, containerId) => {
|
|
25
|
+
const resolved = resolveTheme(theme);
|
|
26
|
+
return generateScopedCss2(resolved, containerId);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { createEngine };
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/engine.ts"],"names":["generateScopedCss"],"mappings":";;;;AAyBO,SAAS,YAAA,CAAa,MAAA,GAA4B,EAAC,EAAgB;AACxE,EAAA,MAAM,YAAA,GAAe,OAAO,KAAA,IAAS,MAAA;AACrC,EAAA,MAAM,kBAAA,GAAqB,OAAO,WAAA,IAAe,IAAA;AACjD,EAAA,MAAM,oBAAA,GAAuB,OAAO,aAAA,IAAiB,IAAA;AAErD,EAAA,SAAS,aAAa,OAAA,EAAkD;AACtE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,SAAS,KAAA,IAAS,YAAA;AAAA,MACzB,WAAA,EAAa,SAAS,WAAA,IAAe,kBAAA;AAAA,MACrC,aAAA,EAAe,SAAS,aAAA,IAAiB,oBAAA;AAAA,MACzC,aAAa,OAAA,EAAS;AAAA,KACxB;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,MAAA,EAAQ,CAAC,QAAA,EAAkB,OAAA,KAAoD;AAC7E,MAAA,OAAO,WAAA,CAAY,QAAA,EAAU,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACpD,CAAA;AAAA,IAEA,WAAA,EAAa,OAAO,QAAA,EAAkB,OAAA,KAAkE;AACtG,MAAA,OAAO,gBAAA,CAAiB,QAAA,EAAU,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,IACzD,CAAA;AAAA,IAEA,WAAA,EAAa,CAAC,KAAA,EAAkC,WAAA,KAAiC;AAC/E,MAAA,MAAM,QAAA,GAAW,aAAa,KAAK,CAAA;AACnC,MAAA,OAAOA,kBAAAA,CAAkB,UAAU,WAAW,CAAA;AAAA,IAChD;AAAA,GACF;AACF","file":"index.js","sourcesContent":["// ═══════════════════════════════════════════════════════════════════════════════\n// Engine Factory — createEngine() for advanced usage\n// ═══════════════════════════════════════════════════════════════════════════════\n\nimport type { SlideEngine, SlideEngineConfig, SlideRenderOptions, SlideRenderResult, SlideRenderAsyncResult, BuiltInTheme, SlideTheme } from './types.js';\nimport { renderSlide, renderSlideAsync } from './core/render.js';\nimport { resolveTheme, generateScopedCss } from './themes/index.js';\n\n/**\n * Create a slide engine instance with default configuration.\n *\n * @example\n * ```ts\n * const engine = createEngine({ theme: 'dark' });\n *\n * // Synchronous\n * const result = engine.render(markdown);\n *\n * // Async (with Shiki highlighting)\n * const fullResult = await engine.renderAsync(markdown);\n *\n * // Get theme CSS independently\n * const css = engine.getThemeCss('navy');\n * ```\n */\nexport function createEngine(config: SlideEngineConfig = {}): SlideEngine {\n const defaultTheme = config.theme ?? 'dark';\n const defaultEnableShiki = config.enableShiki ?? true;\n const defaultEnableMermaid = config.enableMermaid ?? true;\n\n function mergeOptions(options?: SlideRenderOptions): SlideRenderOptions {\n return {\n theme: options?.theme ?? defaultTheme,\n enableShiki: options?.enableShiki ?? defaultEnableShiki,\n enableMermaid: options?.enableMermaid ?? defaultEnableMermaid,\n containerId: options?.containerId,\n };\n }\n\n return {\n render: (markdown: string, options?: SlideRenderOptions): SlideRenderResult => {\n return renderSlide(markdown, mergeOptions(options));\n },\n\n renderAsync: async (markdown: string, options?: SlideRenderOptions): Promise<SlideRenderAsyncResult> => {\n return renderSlideAsync(markdown, mergeOptions(options));\n },\n\n getThemeCss: (theme: BuiltInTheme | SlideTheme, containerId?: string): string => {\n const resolved = resolveTheme(theme);\n return generateScopedCss(resolved, containerId);\n },\n };\n}\n"]}
|