@june-ai/june-ui 0.2.6 → 0.2.8

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.js CHANGED
@@ -1,3577 +1,151 @@
1
+ import "./block-automount.js";
2
+ import {
3
+ ALL_EXPORT_FORMATS,
4
+ ComponentRegistry,
5
+ DOCUMENT_COMPONENT_DESCRIPTION,
6
+ DocumentBridge,
7
+ DocumentEditor,
8
+ JuneDocumentContext,
9
+ JuneDocumentEditorComponent,
10
+ JuneErrorBoundary,
11
+ JuneRenderer,
12
+ JuneRuntimeContext,
13
+ JuneThemeProvider,
14
+ MarkdownText,
15
+ ToolApproval,
16
+ ToolApprovalList,
17
+ consumeStream,
18
+ copyDocumentToClipboard,
19
+ createActionHandler,
20
+ createComponentRegistry,
21
+ createDocumentStore,
22
+ createJuneLibrary,
23
+ createLangGraphExtractor,
24
+ createTheme,
25
+ darkTheme,
26
+ defaultParseActionEvent,
27
+ defaultToolApprovalLabels,
28
+ defineComponent,
29
+ defineJuneAction,
30
+ defineJuneComponent,
31
+ documentPromptOptions,
32
+ downloadResult,
33
+ exportDocument,
34
+ fetchStream,
35
+ getDefaultDocumentStore,
36
+ getDocumentEditorInstructions,
37
+ getDocumentEditorRules,
38
+ interruptToApprovalRequests,
39
+ isDocumentEcho,
40
+ isJuneComponent,
41
+ isThemeSet,
42
+ jsonFieldExtractor,
43
+ langGraphStreamOptions,
44
+ lightTheme,
45
+ listDocumentExporters,
46
+ mergeDocuments,
47
+ messageContentToText,
48
+ normalizeProgram,
49
+ readDocumentFromProgram,
50
+ readLangGraphInterrupts,
51
+ registerDocumentExporter,
52
+ rememberDocumentEcho,
53
+ resolveMixedContent,
54
+ resolveThemeVars,
55
+ runAction,
56
+ serializeDocumentsForAgent,
57
+ splitResponse,
58
+ sseToText,
59
+ toAsyncIterable,
60
+ updateDocumentInProgram,
61
+ useDocumentBridge,
62
+ useDocumentOptions,
63
+ useJuneRuntime,
64
+ useJuneStream,
65
+ useJuneTheme,
66
+ useRegistryLibrary,
67
+ useResolvedTheme,
68
+ useToolApproval,
69
+ validateComponentDefinition,
70
+ withDocumentEditor
71
+ } from "./chunk-H26BMR5S.js";
1
72
  import {
2
73
  JuneError,
3
- createDocumentExtensions,
4
- debounce,
5
- docKey,
6
- docToHtml,
7
- docToMarkdown,
8
- emptyDoc,
9
- getPageCount,
10
- getSearchState,
11
- gotoMatch,
12
74
  isJuneError,
13
- parseDocumentContent,
14
- remeasurePagination,
15
- replaceAll,
16
- replaceCurrent,
17
- sanitizeHref,
18
- setPaginationConfig,
19
- setSearch,
20
- slugify,
21
- toJuneError,
22
- wordCountOf
23
- } from "./chunk-VFZI3SEL.js";
24
-
25
- // src/renderer/renderer.tsx
26
- import { Renderer } from "@openuidev/react-lang";
27
- import {
28
- Fragment,
29
- useCallback,
30
- useEffect,
31
- useMemo as useMemo2,
32
- useRef
33
- } from "react";
34
-
35
- // src/actions/action-handler.ts
36
- function firstString(...values) {
37
- for (const v of values) if (typeof v === "string" && v.length > 0) return v;
38
- return null;
39
- }
40
- var defaultParseActionEvent = (event) => {
41
- if (!event || typeof event !== "object") return null;
42
- const e = event;
43
- const name = firstString(e.type, e.name, e.action);
44
- if (!name) return null;
45
- return { name, payload: e.params ?? e.payload ?? e.data };
46
- };
47
- async function runAction(event, options) {
48
- const { actions, parseEvent = defaultParseActionEvent, confirm, onError, onUnhandled } = options;
49
- const parsed = parseEvent(event);
50
- const action = parsed && Object.prototype.hasOwnProperty.call(actions, parsed.name) ? actions[parsed.name] : void 0;
51
- if (!parsed || !action) {
52
- onUnhandled?.(event);
53
- return "unhandled";
54
- }
55
- const { name } = parsed;
56
- let payload = parsed.payload;
57
- if (action.schema) {
58
- const result = action.schema.safeParse(payload);
59
- if (!result.success) {
60
- onError?.(
61
- new JuneError("ACTION_VALIDATION_ERROR", `Invalid payload for action "${name}"`, {
62
- details: result.error
63
- })
64
- );
65
- return "failed";
66
- }
67
- payload = result.data;
68
- }
69
- try {
70
- if (action.sensitive || action.confirm) {
71
- const ask = action.confirm ?? confirm;
72
- if (!ask) {
73
- onError?.(
74
- new JuneError(
75
- "ACTION_REJECTED",
76
- `Action "${name}" requires confirmation but no confirm handler was provided`
77
- )
78
- );
79
- return "rejected";
80
- }
81
- const approved = await ask({ name, payload, description: action.description });
82
- if (!approved) return "rejected";
83
- }
84
- await action.handler(payload, { name, event });
85
- return "handled";
86
- } catch (error) {
87
- onError?.(toJuneError(error, "ACTION_ERROR"));
88
- return "failed";
89
- }
90
- }
91
- function createActionHandler(options) {
92
- return (event) => {
93
- void runAction(event, options);
94
- };
95
- }
96
-
97
- // src/components/document-editor/document-context.ts
98
- import { createContext, useContext, useSyncExternalStore } from "react";
99
- var JuneDocumentContext = createContext({});
100
- function useDocumentOptions() {
101
- return useContext(JuneDocumentContext);
102
- }
103
- function useDocumentValue(store, id, selector) {
104
- const read = () => selector(store.get(id));
105
- return useSyncExternalStore(store.subscribe, read, read);
106
- }
107
-
108
- // src/components/document-editor/document-merge.ts
109
- var MAX_CELLS = 4e6;
110
- function matchIndices(a, b) {
111
- const n = a.length;
112
- const m = b.length;
113
- if (n * m > MAX_CELLS) return null;
114
- const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
115
- for (let i2 = n - 1; i2 >= 0; i2--) {
116
- for (let j2 = m - 1; j2 >= 0; j2--) {
117
- dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
118
- }
119
- }
120
- const matches = /* @__PURE__ */ new Map();
121
- let i = 0;
122
- let j = 0;
123
- while (i < n && j < m) {
124
- if (a[i] === b[j]) {
125
- matches.set(i, j);
126
- i++;
127
- j++;
128
- } else if (dp[i + 1][j] >= dp[i][j + 1]) i++;
129
- else j++;
130
- }
131
- return matches;
132
- }
133
- var same = (x, y) => x.length === y.length && x.every((v, i) => v === y[i]);
134
- function mergeBlocks(base, local, incoming) {
135
- if (same(local, base)) return { blocks: incoming, conflicts: 0 };
136
- if (same(incoming, base) || same(local, incoming)) return { blocks: local, conflicts: 0 };
137
- const ml = matchIndices(base, local);
138
- const mn = matchIndices(base, incoming);
139
- if (!ml || !mn) return { blocks: null, conflicts: 1 };
140
- const anchors = [...ml.keys()].filter((i) => mn.has(i)).sort((x, y) => x - y);
141
- const out = [];
142
- let conflicts = 0;
143
- let pb = -1;
144
- let pl = -1;
145
- let pn = -1;
146
- const region = (bEnd, lEnd, nEnd) => {
147
- const B = base.slice(pb + 1, bEnd);
148
- const L = local.slice(pl + 1, lEnd);
149
- const N = incoming.slice(pn + 1, nEnd);
150
- if (B.length === L.length && L.length === N.length) {
151
- for (let k = 0; k < B.length; k++) {
152
- if (L[k] === B[k]) out.push(N[k]);
153
- else if (N[k] === B[k] || N[k] === L[k]) out.push(L[k]);
154
- else {
155
- conflicts++;
156
- out.push(L[k]);
157
- }
158
- }
159
- return;
160
- }
161
- if (same(L, B)) out.push(...N);
162
- else if (same(N, B) || same(L, N)) out.push(...L);
163
- else {
164
- conflicts++;
165
- out.push(...L);
166
- }
167
- };
168
- for (const a of anchors) {
169
- const la = ml.get(a);
170
- const na = mn.get(a);
171
- region(a, la, na);
172
- out.push(local[la]);
173
- pb = a;
174
- pl = la;
175
- pn = na;
176
- }
177
- region(base.length, local.length, incoming.length);
178
- return { blocks: out, conflicts };
179
- }
180
- function mergeDocuments(base, local, incoming) {
181
- const toBlocks = (d) => (d.content ?? []).map((node) => JSON.stringify(node));
182
- const { blocks: blocks2, conflicts } = mergeBlocks(toBlocks(base), toBlocks(local), toBlocks(incoming));
183
- if (!blocks2) return { doc: local, conflicts: Math.max(1, conflicts) };
184
- if (blocks2.length === 0) return { doc: emptyDoc(), conflicts };
185
- return { doc: { type: "doc", content: blocks2.map((b) => JSON.parse(b)) }, conflicts };
186
- }
187
-
188
- // src/components/document-editor/document-store.ts
189
- var incomingKey = (doc) => JSON.stringify([doc.title, docKey(doc.json)]);
190
- function createDocumentStore() {
191
- const records = /* @__PURE__ */ new Map();
192
- const listeners = /* @__PURE__ */ new Set();
193
- const emit = () => listeners.forEach((listener) => listener());
194
- const put = (record) => {
195
- records.set(record.id, record);
196
- emit();
197
- };
198
- const fresh2 = (doc) => ({
199
- id: doc.id,
200
- title: doc.title,
201
- documentType: doc.documentType,
202
- status: doc.status,
203
- json: doc.json,
204
- baseJson: doc.json,
205
- baseTitle: doc.title,
206
- lastIncomingKey: incomingKey(doc),
207
- revision: 0,
208
- origin: "external",
209
- pending: null,
210
- updatedAt: Date.now()
211
- });
212
- return {
213
- get: (id) => records.get(id),
214
- list: () => [...records.values()],
215
- subscribe: (listener) => {
216
- listeners.add(listener);
217
- return () => {
218
- listeners.delete(listener);
219
- };
220
- },
221
- receive(incoming) {
222
- const current = records.get(incoming.id);
223
- if (!current) {
224
- put(fresh2(incoming));
225
- return "created";
226
- }
227
- const key = incomingKey(incoming);
228
- if (current.lastIncomingKey === key) return "unchanged";
229
- const userEditedBody = docKey(current.json) !== docKey(current.baseJson);
230
- const userEditedTitle = current.title !== current.baseTitle;
231
- const title = userEditedTitle ? current.title : incoming.title;
232
- const meta = {
233
- documentType: incoming.documentType ?? current.documentType,
234
- status: incoming.status ?? current.status
235
- };
236
- if (!userEditedBody) {
237
- put({
238
- ...current,
239
- ...meta,
240
- title,
241
- baseTitle: incoming.title,
242
- json: incoming.json,
243
- baseJson: incoming.json,
244
- lastIncomingKey: key,
245
- revision: current.revision + 1,
246
- origin: "external",
247
- pending: null,
248
- updatedAt: Date.now()
249
- });
250
- return "applied";
251
- }
252
- const { doc, conflicts } = mergeDocuments(current.baseJson, current.json, incoming.json);
253
- if (conflicts === 0) {
254
- put({
255
- ...current,
256
- ...meta,
257
- title,
258
- baseTitle: incoming.title,
259
- json: doc,
260
- baseJson: incoming.json,
261
- lastIncomingKey: key,
262
- revision: current.revision + 1,
263
- origin: "external",
264
- pending: null,
265
- updatedAt: Date.now()
266
- });
267
- return "merged";
268
- }
269
- put({
270
- ...current,
271
- ...meta,
272
- lastIncomingKey: key,
273
- pending: { json: incoming.json, title: incoming.title, merged: doc, conflicts }
274
- });
275
- return "conflict";
276
- },
277
- hydrate(doc) {
278
- put(fresh2(doc));
279
- },
280
- edit(id, json, origin) {
281
- const current = records.get(id);
282
- if (!current || docKey(current.json) === docKey(json)) return;
283
- put({ ...current, json, origin, revision: current.revision + 1, updatedAt: Date.now() });
284
- },
285
- setTitle(id, title) {
286
- const current = records.get(id);
287
- if (!current || current.title === title) return;
288
- put({ ...current, title, updatedAt: Date.now() });
289
- },
290
- resolve(id, choice) {
291
- const current = records.get(id);
292
- const pending = current?.pending;
293
- if (!current || !pending) return;
294
- if (choice === "keep") {
295
- put({ ...current, baseJson: pending.json, baseTitle: pending.title, pending: null });
296
- return;
297
- }
298
- const json = choice === "merge" ? pending.merged : pending.json;
299
- const title = choice === "merge" ? current.title : pending.title;
300
- put({
301
- ...current,
302
- title,
303
- json,
304
- baseJson: pending.json,
305
- baseTitle: pending.title,
306
- revision: current.revision + 1,
307
- origin: "external",
308
- pending: null,
309
- updatedAt: Date.now()
310
- });
311
- },
312
- remove(id) {
313
- if (records.delete(id)) emit();
314
- }
315
- };
316
- }
317
- var echoes = /* @__PURE__ */ new WeakMap();
318
- var ECHO_MEMORY = 8;
319
- function rememberDocumentEcho(store, id, content) {
320
- let byId = echoes.get(store);
321
- if (!byId) echoes.set(store, byId = /* @__PURE__ */ new Map());
322
- const list2 = byId.get(id) ?? [];
323
- list2.push(content);
324
- if (list2.length > ECHO_MEMORY) list2.shift();
325
- byId.set(id, list2);
326
- }
327
- function isDocumentEcho(store, id, content) {
328
- return !!content && !!echoes.get(store)?.get(id)?.includes(content);
329
- }
330
- var defaultStore = null;
331
- function getDefaultDocumentStore() {
332
- if (!defaultStore) defaultStore = createDocumentStore();
333
- return defaultStore;
334
- }
75
+ toJuneError
76
+ } from "./chunk-27XM6EVX.js";
335
77
 
336
- // src/utils/update-document-program.ts
337
- function readString(src, i) {
338
- if (src[i] !== '"') return null;
339
- let j = i + 1;
340
- let value = "";
341
- while (j < src.length) {
342
- const ch = src[j];
343
- if (ch === '"') return { start: i, end: j + 1, value };
344
- if (ch === "\\") {
345
- const next = src[j + 1];
346
- if (next === void 0) return null;
347
- if (next === "u" && /^[0-9a-fA-F]{4}$/.test(src.slice(j + 2, j + 6))) {
348
- value += String.fromCharCode(parseInt(src.slice(j + 2, j + 6), 16));
349
- j += 6;
350
- continue;
351
- }
352
- value += next === "n" ? "\n" : next === "t" ? " " : next === "r" ? "\r" : next === "b" ? "\b" : next === "f" ? "\f" : next;
353
- j += 2;
354
- continue;
355
- }
356
- value += ch;
357
- j++;
358
- }
359
- return null;
360
- }
361
- var skipSpace = (src, i) => {
362
- while (i < src.length && /\s/.test(src[i])) i++;
363
- return i;
364
- };
365
- var toLangString = (value) => JSON.stringify(value);
366
- function updateDocumentInProgram(program, documentId, update, componentName = "DocumentEditor") {
367
- const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
368
- let match;
369
- while (match = re.exec(program)) {
370
- const args = [];
371
- let i = match.index + match[0].length;
372
- for (let n = 0; n < 3; n++) {
373
- i = skipSpace(program, i);
374
- const tok = readString(program, i);
375
- if (!tok) break;
376
- args.push(tok);
377
- i = skipSpace(program, tok.end);
378
- if (program[i] === ",") i++;
379
- else break;
380
- }
381
- if (args[0]?.value !== documentId) continue;
382
- const edits = [];
383
- if (update.title !== void 0 && args[1] && args[1].value !== update.title) {
384
- edits.push({ start: args[1].start, end: args[1].end, text: toLangString(update.title) });
385
- }
386
- if (update.content !== void 0 && args[2] && args[2].value !== update.content) {
387
- edits.push({ start: args[2].start, end: args[2].end, text: toLangString(update.content) });
388
- }
389
- if (!args[2] && update.content !== void 0) return null;
390
- let out = program;
391
- for (const e of edits.sort((a, b) => b.start - a.start)) {
392
- out = out.slice(0, e.start) + e.text + out.slice(e.end);
393
- }
394
- return out;
78
+ // src/core/config.ts
79
+ function mergeDefined(...sources) {
80
+ const out = {};
81
+ for (const source of sources) {
82
+ if (!source) continue;
83
+ for (const [key, value] of Object.entries(source)) if (value !== void 0) out[key] = value;
395
84
  }
396
- return null;
397
- }
398
- function readDocumentFromProgram(program, documentId, componentName = "DocumentEditor") {
399
- const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
400
- let match;
401
- while (match = re.exec(program)) {
402
- const args = [];
403
- let i = match.index + match[0].length;
404
- for (let n = 0; n < 3; n++) {
405
- i = skipSpace(program, i);
406
- const tok = readString(program, i);
407
- if (!tok) break;
408
- args.push(tok);
409
- i = skipSpace(program, tok.end);
410
- if (program[i] === ",") i++;
411
- else break;
412
- }
413
- if (args[0]?.value === documentId && args[1] && args[2]) return { title: args[1].value, content: args[2].value };
414
- }
415
- return null;
85
+ return out;
416
86
  }
417
87
 
418
- // src/core/context.ts
419
- import { createContext as createContext2, useContext as useContext2 } from "react";
420
- var JuneContext = createContext2({
421
- mode: "light",
422
- theme: "light"
423
- });
424
- function useJuneTheme() {
425
- return useContext2(JuneContext);
88
+ // src/core/default-library.ts
89
+ import { openuiLibrary } from "@openuidev/react-ui";
90
+ var juneLibrary = withDocumentEditor(openuiLibrary);
91
+ var defaultRegistry = createComponentRegistry({ base: juneLibrary });
92
+ function registerComponent(components, options) {
93
+ return defaultRegistry.register(components, options);
426
94
  }
427
- var JuneRuntimeContext = createContext2({ isStreaming: false });
428
- function useJuneRuntime() {
429
- return useContext2(JuneRuntimeContext);
95
+ function unregisterComponent(name) {
96
+ return defaultRegistry.unregister(name);
430
97
  }
431
98
 
432
- // src/themes/theme-provider.tsx
433
- import {
434
- useMemo,
435
- useSyncExternalStore as useSyncExternalStore2
436
- } from "react";
437
-
438
- // src/themes/dark.ts
439
- var darkTheme = {
440
- "--june-foreground": "#f3f4f6",
441
- "--june-muted": "#9ca3af",
442
- "--june-border": "#1f2937",
443
- "--june-accent": "#818cf8",
444
- "--june-danger": "#f87171"
445
- };
446
-
447
- // src/themes/light.ts
448
- var lightTheme = {
449
- "--june-foreground": "#111827",
450
- "--june-muted": "#6b7280",
451
- "--june-border": "#e5e7eb",
452
- "--june-accent": "#4f46e5",
453
- "--june-danger": "#b91c1c"
454
- };
455
-
456
- // src/themes/theme-provider.tsx
99
+ // src/core/june-ui-provider.tsx
100
+ import { createContext, useContext, useMemo } from "react";
457
101
  import { jsx } from "react/jsx-runtime";
458
- var QUERY = "(prefers-color-scheme: dark)";
459
- function subscribe(onChange) {
460
- if (typeof window === "undefined" || !window.matchMedia) return () => {
461
- };
462
- const mq = window.matchMedia(QUERY);
463
- mq.addEventListener("change", onChange);
464
- return () => mq.removeEventListener("change", onChange);
465
- }
466
- function getSnapshot() {
467
- if (typeof window === "undefined") return "light";
468
- return window.matchMedia?.(QUERY)?.matches ? "dark" : "light";
469
- }
470
- function getServerSnapshot() {
471
- return "light";
472
- }
473
- function useResolvedTheme(mode) {
474
- const system = useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
475
- return mode === "system" ? system : mode;
476
- }
477
- function JuneThemeProvider({
478
- mode,
479
- vars,
480
- className,
481
- style,
482
- children
483
- }) {
484
- const explicit = mode !== void 0;
485
- const resolved = useResolvedTheme(mode ?? "system");
486
- const mergedStyle = useMemo(() => {
487
- if (!explicit && !vars && !style) return void 0;
488
- const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
489
- return {
490
- ...base,
491
- ...vars,
492
- ...explicit ? { colorScheme: resolved } : {},
493
- ...style
494
- };
495
- }, [explicit, resolved, vars, style]);
496
- const context = useMemo(
497
- () => ({ mode: mode ?? "system", theme: resolved }),
498
- [mode, resolved]
499
- );
500
- return /* @__PURE__ */ jsx(JuneContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
501
- "div",
502
- {
503
- className: className ? `june-ui-root ${className}` : "june-ui-root",
504
- "data-june-theme": explicit ? resolved : void 0,
505
- style: mergedStyle,
506
- children
507
- }
508
- ) });
509
- }
510
-
511
- // src/utils/normalize-program.ts
512
- var ATTACHABLE = /* @__PURE__ */ new Set([
513
- "Accordion",
514
- "AreaChart",
515
- "BarChart",
516
- "Buttons",
517
- "Button",
518
- "Callout",
519
- "Card",
520
- "CardHeader",
521
- "Carousel",
522
- "CodeBlock",
523
- "CompositeCardBlock",
524
- "ContextCardBlock",
525
- "DocumentEditor",
526
- "EditableTable",
527
- "EntityList",
528
- "Form",
529
- "HorizontalBarChart",
530
- "IconButton",
531
- "Image",
532
- "ImageBlock",
533
- "ImageGallery",
534
- "InlineHeader",
535
- "LineChart",
536
- "ListBlock",
537
- "MarkDownRenderer",
538
- "Modal",
539
- "OverviewCardBlock",
540
- "PieChart",
541
- "RadarChart",
542
- "RadialChart",
543
- "ScatterChart",
544
- "Separator",
545
- "SingleStackedBarChart",
546
- "SnippetCardBlock",
547
- "Stack",
548
- "Steps",
549
- "Table",
550
- "Tabs",
551
- "TagBlock",
552
- "TextCallout",
553
- "TextContent",
554
- "VisualCardBlock"
555
- ]);
556
- function normalizeProgram(source) {
557
- const rewritten = rewriteCalls(source);
558
- return attachOrphans(rewritten);
559
- }
560
- function rewriteCalls(source) {
561
- let out = "";
562
- let i = 0;
563
- let quote = false;
564
- while (i < source.length) {
565
- const ch = source[i];
566
- if (quote) {
567
- out += ch;
568
- if (ch === "\\") {
569
- i += 1;
570
- if (i < source.length) out += source[i];
571
- } else if (ch === '"') {
572
- quote = false;
573
- }
574
- i += 1;
575
- continue;
576
- }
577
- if (ch === '"') {
578
- quote = true;
579
- out += ch;
580
- i += 1;
581
- continue;
582
- }
583
- const call = readCall(source, i);
584
- if (call) {
585
- const next = rewriteKnownCall(call);
586
- if (next !== null) {
587
- out += next;
588
- i = call.end;
589
- continue;
590
- }
591
- }
592
- out += ch;
593
- i += 1;
594
- }
595
- return out === source ? source : out;
596
- }
597
- function rewriteKnownCall(call) {
598
- if (call.callee === "Grid") {
599
- const args = call.args.map((arg) => rewriteCalls(arg));
600
- const children = args.length === 0 ? "[]" : args.length === 1 ? args[0] : null;
601
- if (children !== null) {
602
- return `Stack(${children}, "row", "m", "stretch", "start", true)`;
603
- }
604
- return `Stack(${args.join(", ")})`;
605
- }
606
- if (call.callee === "Card") {
607
- const args = call.args.map((arg) => rewriteCalls(arg));
608
- if (args.length >= 2 && isStringLiteral(args[0]) && isStringLiteral(args[1])) {
609
- const children = `[TextContent(${args[0]}, "small"), TextContent(${args[1]}, "large-heavy")]`;
610
- return `Card(${[children, ...args.slice(2)].join(", ")})`;
611
- }
612
- if (args.some((arg, index) => arg !== call.args[index])) {
613
- return `Card(${args.join(", ")})`;
614
- }
615
- }
616
- return null;
617
- }
618
- function readCall(source, index) {
619
- if (index > 0 && /[A-Za-z0-9_$]/.test(source[index - 1])) return null;
620
- const match = /^(Grid|Card)\s*\(/.exec(source.slice(index));
621
- if (!match) return null;
622
- const open = index + match[0].length - 1;
623
- const close = findMatchingParen(source, open);
624
- if (close < 0) return null;
625
- const args = splitArgs(source.slice(open + 1, close));
626
- if (!args) return null;
627
- return { callee: match[1], args, end: close + 1 };
628
- }
629
- function findMatchingParen(source, open) {
630
- let depth = 0;
631
- let quote = false;
632
- for (let i = open; i < source.length; i += 1) {
633
- const ch = source[i];
634
- if (quote) {
635
- if (ch === "\\") i += 1;
636
- else if (ch === '"') quote = false;
637
- continue;
638
- }
639
- if (ch === '"') quote = true;
640
- else if (ch === "(") depth += 1;
641
- else if (ch === ")") {
642
- depth -= 1;
643
- if (depth === 0) return i;
644
- }
645
- }
646
- return -1;
647
- }
648
- function splitArgs(inner) {
649
- const args = [];
650
- let start = 0;
651
- let depth = 0;
652
- let quote = false;
653
- for (let i = 0; i < inner.length; i += 1) {
654
- const ch = inner[i];
655
- if (quote) {
656
- if (ch === "\\") i += 1;
657
- else if (ch === '"') quote = false;
658
- continue;
659
- }
660
- if (ch === '"') quote = true;
661
- else if (ch === "(" || ch === "[" || ch === "{") depth += 1;
662
- else if (ch === ")" || ch === "]" || ch === "}") depth -= 1;
663
- else if (ch === "," && depth === 0) {
664
- args.push(inner.slice(start, i).trim());
665
- start = i + 1;
666
- }
667
- }
668
- if (quote || depth !== 0) return null;
669
- const last = inner.slice(start).trim();
670
- if (last) args.push(last);
671
- return args;
672
- }
673
- function isStringLiteral(value) {
674
- return /^"(?:\\.|[^"\\])*"$/.test(value.trim());
675
- }
676
- function attachOrphans(source) {
677
- let text = source;
678
- let stmts = parseStatements(text);
679
- if (!stmts) return source;
680
- const taken = new Set(stmts.map((stmt) => stmt.name));
681
- const extraRoots = stmts.filter((stmt) => stmt.name === "root").slice(1);
682
- if (extraRoots.length > 0) {
683
- const edits = extraRoots.map((stmt) => {
684
- const body2 = fresh(taken, "rootBlock");
685
- const stmtText = text.slice(stmt.start, stmt.end);
686
- return {
687
- start: stmt.start,
688
- end: stmt.end,
689
- text: stmtText.replace(/^(\s*)root\b/, `$1${body2}`)
690
- };
691
- });
692
- text = applyEdits(text, edits);
693
- stmts = parseStatements(text);
694
- if (!stmts) return source;
695
- }
696
- const orphans = stmts.filter(
697
- (stmt) => stmt.name !== "root" && ATTACHABLE.has(calleeOf(stmt.rhs) ?? "") && !referencedByOther(stmt.name, stmts)
698
- );
699
- if (orphans.length === 0) return source;
700
- const names = orphans.map((stmt) => stmt.name);
701
- const root = stmts.find((stmt) => stmt.name === "root");
702
- if (!root) return `root = Stack([${names.join(", ")}])
703
- ${text}`;
704
- const rawRhs = text.slice(root.rhsStart, root.end);
705
- const lead = /^\s*/.exec(rawRhs)?.[0] ?? "";
706
- const spliced = spliceFirstArray(rawRhs.trim(), names);
707
- if (spliced !== null) {
708
- return text.slice(0, root.rhsStart) + lead + spliced + text.slice(root.end);
709
- }
710
- const body = fresh(new Set(stmts.map((stmt) => stmt.name)), "rootBody");
711
- const wrapped = `root = Stack([${body}, ${names.join(", ")}])
712
- ${body} = ${rawRhs.trim()}`;
713
- return text.slice(0, root.start) + wrapped + text.slice(root.end);
714
- }
715
- function spliceFirstArray(rhs, names) {
716
- const match = /^([A-Za-z_]\w*)\s*\(/.exec(rhs);
717
- if (!match || match[1] !== "Stack" && match[1] !== "Card") return null;
718
- const openParen = match[0].length - 1;
719
- let paren = 0;
720
- let quote = false;
721
- let arrayStart = -1;
722
- let arrayDepth = 0;
723
- let arrayEnd = -1;
724
- for (let i = openParen; i < rhs.length; i += 1) {
725
- const ch = rhs[i];
726
- if (quote) {
727
- if (ch === "\\") i += 1;
728
- else if (ch === '"') quote = false;
729
- continue;
730
- }
731
- if (ch === '"') quote = true;
732
- else if (ch === "(") paren += 1;
733
- else if (ch === ")") {
734
- paren -= 1;
735
- if (paren === 0) break;
736
- } else if (ch === "[") {
737
- if (paren === 1 && arrayStart < 0) {
738
- arrayStart = i;
739
- arrayDepth = 1;
740
- } else if (arrayStart >= 0 && arrayEnd < 0) {
741
- arrayDepth += 1;
742
- }
743
- } else if (ch === "]" && arrayStart >= 0 && arrayEnd < 0) {
744
- arrayDepth -= 1;
745
- if (arrayDepth === 0) arrayEnd = i;
746
- }
747
- }
748
- if (arrayStart < 0 || arrayEnd < 0) return null;
749
- const inner = rhs.slice(arrayStart + 1, arrayEnd).trim();
750
- const merged = inner === "" ? names.join(", ") : `${inner.replace(/,\s*$/, "")}, ${names.join(", ")}`;
751
- return rhs.slice(0, arrayStart + 1) + merged + rhs.slice(arrayEnd);
102
+ var JuneUIContext = createContext(null);
103
+ function JuneUIProvider({ june, defaults, children }) {
104
+ const value = useMemo(() => ({ june, defaults }), [june, defaults]);
105
+ return /* @__PURE__ */ jsx(JuneUIContext.Provider, { value, children });
752
106
  }
753
- function referencedByOther(name, stmts) {
754
- const pattern = new RegExp(
755
- `(?<![A-Za-z0-9_$.])${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![A-Za-z0-9_])`
756
- );
757
- return stmts.some((stmt) => stmt.name !== name && pattern.test(stripStrings(stmt.rhs)));
758
- }
759
- function calleeOf(rhs) {
760
- const match = /^([A-Za-z_]\w*)\s*\(/.exec(rhs.trim());
761
- return match ? match[1] : null;
762
- }
763
- function stripStrings(text) {
764
- return text.replace(/"(?:\\.|[^"\\])*"/g, '""');
765
- }
766
- function fresh(taken, base) {
767
- let name = base;
768
- let n = 2;
769
- while (taken.has(name)) {
770
- name = `${base}${n}`;
771
- n += 1;
772
- }
773
- taken.add(name);
774
- return name;
775
- }
776
- function applyEdits(source, edits) {
777
- const ordered = [...edits].sort((a, b) => b.start - a.start);
778
- let text = source;
779
- for (const edit of ordered) {
780
- text = text.slice(0, edit.start) + edit.text + text.slice(edit.end);
781
- }
782
- return text;
783
- }
784
- function parseStatements(source) {
785
- const lines = source.split("\n");
786
- const stmts = [];
787
- let offset = 0;
788
- let depth = 0;
789
- let quote = false;
790
- let current = null;
791
- const scan2 = (line) => {
792
- for (let i = 0; i < line.length; i += 1) {
793
- const ch = line[i];
794
- if (quote) {
795
- if (ch === "\\") i += 1;
796
- else if (ch === '"') quote = false;
797
- } else if (ch === '"') {
798
- quote = true;
799
- } else if (ch === "(" || ch === "[" || ch === "{") {
800
- depth += 1;
801
- } else if (ch === ")" || ch === "]" || ch === "}") {
802
- depth = Math.max(0, depth - 1);
803
- }
804
- }
805
- };
806
- for (let li = 0; li < lines.length; li += 1) {
807
- const line = lines[li];
808
- const lineStart = offset;
809
- const lineEnd = offset + line.length;
810
- offset = lineEnd + (li < lines.length - 1 ? 1 : 0);
811
- if (current && depth > 0) {
812
- scan2(line);
813
- if (depth === 0) {
814
- stmts.push({
815
- name: current.name,
816
- rhs: source.slice(current.rhsStart, lineEnd).trim(),
817
- start: current.start,
818
- end: lineEnd,
819
- rhsStart: current.rhsStart
820
- });
821
- current = null;
822
- }
823
- continue;
824
- }
825
- const trimmed = line.trim();
826
- if (trimmed === "" || trimmed.startsWith("```")) continue;
827
- const match = /^(\s*)(\$?[A-Za-z_]\w*)\s*=/.exec(line);
828
- if (!match) return null;
829
- const eq = line.indexOf("=");
830
- const rhsStart = lineStart + eq + 1;
831
- depth = 0;
832
- quote = false;
833
- scan2(line);
834
- if (depth === 0) {
835
- stmts.push({
836
- name: match[2],
837
- rhs: line.slice(eq + 1).trim(),
838
- start: lineStart,
839
- end: lineEnd,
840
- rhsStart
841
- });
842
- } else {
843
- current = { name: match[2], start: lineStart, rhsStart };
844
- }
845
- }
846
- if (current || depth !== 0) return null;
847
- return stmts;
848
- }
849
-
850
- // src/utils/split-response.ts
851
- var STATEMENT_START = /^\$?[A-Za-z_]\w*\s*=/;
852
- var PENDING_IDENTIFIER = /^\s*\$?[A-Za-z_]\w*\s*$/;
853
- function scan(line, state) {
854
- for (let i = 0; i < line.length; i++) {
855
- const ch = line[i];
856
- if (state.quote) {
857
- if (ch === "\\") i++;
858
- else if (ch === state.quote) state.quote = null;
859
- } else if (ch === '"') {
860
- state.quote = ch;
861
- } else if (ch === "(" || ch === "[" || ch === "{") {
862
- state.depth++;
863
- } else if (ch === ")" || ch === "]" || ch === "}") {
864
- state.depth = Math.max(0, state.depth - 1);
865
- }
866
- }
867
- state.quote = null;
868
- }
869
- function splitResponse(source, options = {}) {
870
- let input = source;
871
- if (options.streaming && !input.endsWith("\n")) {
872
- const cut = input.lastIndexOf("\n");
873
- if (PENDING_IDENTIFIER.test(input.slice(cut + 1))) input = input.slice(0, cut + 1);
874
- }
875
- const before = [];
876
- const after = [];
877
- const ui = [];
878
- const state = { depth: 0, quote: null };
879
- let text = [];
880
- let seenUi = false;
881
- let sawFence = false;
882
- const flushText = () => {
883
- const joined = text.join(" ").trim();
884
- text = [];
885
- if (joined) (seenUi ? after : before).push(joined);
886
- };
887
- for (const line of input.split(/\r?\n/)) {
888
- const trimmed = line.trim();
889
- if (trimmed.startsWith("```")) {
890
- sawFence = true;
891
- continue;
892
- }
893
- if (state.depth > 0) {
894
- ui.push(line);
895
- scan(line, state);
896
- continue;
897
- }
898
- if (STATEMENT_START.test(trimmed)) {
899
- flushText();
900
- seenUi = true;
901
- ui.push(line);
902
- scan(line, state);
903
- continue;
904
- }
905
- if (trimmed === "") {
906
- flushText();
907
- continue;
908
- }
909
- text.push(trimmed);
910
- }
911
- flushText();
912
- return {
913
- before,
914
- ui: ui.join("\n"),
915
- after,
916
- pure: !sawFence && before.length === 0 && after.length === 0
917
- };
107
+ function useJuneUIContext() {
108
+ return useContext(JuneUIContext);
918
109
  }
919
110
 
920
- // src/renderer/error-boundary.tsx
921
- import { Component } from "react";
111
+ // src/core/june-ui.tsx
922
112
  import { jsx as jsx2 } from "react/jsx-runtime";
923
- function keysChanged(a = [], b = []) {
924
- return a.length !== b.length || a.some((v, i) => !Object.is(v, b[i]));
925
- }
926
- var JuneErrorBoundary = class extends Component {
927
- constructor() {
928
- super(...arguments);
929
- this.state = { error: null };
930
- this.reset = () => {
931
- this.setState({ error: null });
932
- };
933
- }
934
- static getDerivedStateFromError(error) {
935
- return { error };
936
- }
937
- componentDidCatch(error, info) {
938
- this.props.onError?.(error, info);
939
- }
940
- componentDidUpdate(prev) {
941
- if (this.state.error && keysChanged(prev.resetKeys, this.props.resetKeys)) {
942
- this.reset();
943
- }
944
- }
945
- render() {
946
- const { error } = this.state;
947
- if (!error) return this.props.children;
948
- const { fallback } = this.props;
949
- if (typeof fallback === "function") return fallback({ error, reset: this.reset });
950
- if (fallback !== void 0) return fallback;
951
- return /* @__PURE__ */ jsx2("div", { role: "alert", "data-june-error": "", children: "Something went wrong while rendering this UI." });
952
- }
953
- };
954
-
955
- // src/renderer/renderer.tsx
956
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
957
- function JuneRenderer(props) {
958
- const {
959
- library,
960
- response,
961
- isStreaming = false,
962
- mixedContent = true,
963
- renderText,
964
- repair = true,
965
- theme,
966
- themeVars,
967
- className,
968
- style,
969
- actions,
970
- confirmAction,
971
- parseActionEvent,
972
- onAction,
973
- onError,
974
- onJuneError,
975
- documents,
976
- onResponseChange,
977
- responseChangeDelay = 300,
978
- loadingFallback = null,
979
- emptyFallback = null,
980
- errorFallback,
981
- resetKeys,
982
- ...rendererProps
983
- } = props;
984
- const latest = useRef({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response });
985
- latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response };
986
- const syncTimers = useRef(/* @__PURE__ */ new Map());
987
- useEffect(() => {
988
- const timers = syncTimers.current;
989
- return () => {
990
- timers.forEach(clearTimeout);
991
- timers.clear();
992
- };
993
- }, []);
994
- const syncProgram = useCallback(async (change, store) => {
995
- const l = latest.current;
996
- if (!l.onResponseChange || typeof l.response !== "string") return;
997
- const record = store.get(change.documentId);
998
- const title = record?.title ?? change.title;
999
- const json = record?.json ?? change.json;
1000
- try {
1001
- const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
1002
- const markdown = docToMarkdown2(json);
1003
- const program = latest.current.response;
1004
- if (typeof program !== "string") return;
1005
- const next = updateDocumentInProgram(program, change.documentId, { title, content: markdown });
1006
- if (next === null || next === program) return;
1007
- rememberDocumentEcho(store, change.documentId, markdown);
1008
- latest.current.onResponseChange?.(next, { documentId: change.documentId, title, markdown, source: change.source });
1009
- } catch (error) {
1010
- latest.current.onJuneError?.(toJuneError(error, "DOCUMENT_ERROR", "Updating the program failed"));
1011
- }
1012
- }, []);
1013
- const handleAction = useCallback((event) => {
1014
- const l = latest.current;
1015
- l.onAction?.(event);
1016
- if (l.actions) {
1017
- void runAction(event, {
1018
- actions: l.actions,
1019
- parseEvent: l.parseActionEvent,
1020
- confirm: l.confirmAction,
1021
- onError: (e) => l.onJuneError?.(e)
1022
- });
1023
- }
1024
- }, []);
1025
- const handleParserErrors = useCallback((errors) => {
1026
- const list2 = Array.isArray(errors) ? errors : [];
1027
- const l = latest.current;
1028
- l.onError?.(list2);
1029
- const real = list2.filter((e) => e?.severity !== "warning");
1030
- if (real.length > 0) {
1031
- l.onJuneError?.(
1032
- new JuneError("PARSE_ERROR", `OpenUI reported ${real.length} error(s)`, { details: real })
1033
- );
1034
- }
1035
- if (list2.length > 0 && !l.onError && !l.onJuneError) {
1036
- console.warn("[june-ui] OpenUI reported errors:", list2);
1037
- }
1038
- }, []);
1039
- const handleBoundaryError = useCallback((error, info) => {
1040
- latest.current.onJuneError?.(
1041
- new JuneError("RENDER_ERROR", error.message, {
1042
- cause: error,
1043
- details: { componentStack: info.componentStack }
1044
- })
1045
- );
1046
- }, []);
1047
- const runtime = useMemo2(() => ({ isStreaming }), [isStreaming]);
1048
- const documentOptions = useMemo2(
1049
- () => ({
1050
- ...documents,
1051
- onDocumentChange: (change) => {
1052
- documents?.onDocumentChange?.(change);
1053
- if (!latest.current.onResponseChange || change.source === "ai") return;
1054
- const store = documents?.store ?? getDefaultDocumentStore();
1055
- const timers = syncTimers.current;
1056
- const prev = timers.get(change.documentId);
1057
- if (prev) clearTimeout(prev);
1058
- timers.set(
1059
- change.documentId,
1060
- setTimeout(() => {
1061
- timers.delete(change.documentId);
1062
- void syncProgram(change, store);
1063
- }, Math.max(0, latest.current.responseChangeDelay))
1064
- );
1065
- },
1066
- onError: (error) => {
1067
- documents?.onError?.(error);
1068
- latest.current.onJuneError?.(error);
1069
- }
1070
- }),
1071
- [documents, syncProgram]
1072
- );
1073
- const parts = useMemo2(
1074
- () => mixedContent && response ? splitResponse(response, { streaming: isStreaming }) : null,
1075
- [mixedContent, response, isStreaming]
1076
- );
1077
- const uiText = useMemo2(() => {
1078
- const raw = parts && !parts.pure ? parts.ui : response;
1079
- if (!repair || !mixedContent || isStreaming || typeof raw !== "string" || raw.length === 0) return raw;
1080
- return normalizeProgram(raw);
1081
- }, [parts, response, mixedContent, isStreaming, repair]);
1082
- const hasUi = typeof uiText === "string" && uiText.trim().length > 0;
1083
- const before = parts?.before ?? [];
1084
- const after = parts?.after ?? [];
1085
- const hasText = before.length + after.length > 0;
1086
- const text = (value, index, key) => /* @__PURE__ */ jsx3(Fragment, { children: renderText ? renderText(value, index) : /* @__PURE__ */ jsx3("p", { className: "june-text", children: value }) }, key);
1087
- return /* @__PURE__ */ jsx3(JuneThemeProvider, { mode: theme, vars: themeVars, className, style, children: /* @__PURE__ */ jsx3(JuneRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx3(JuneDocumentContext.Provider, { value: documentOptions, children: /* @__PURE__ */ jsxs(
1088
- JuneErrorBoundary,
1089
- {
1090
- fallback: errorFallback,
1091
- onError: handleBoundaryError,
1092
- resetKeys: resetKeys ?? [response],
1093
- children: [
1094
- before.map((t, i) => text(t, i, `b${i}`)),
1095
- hasUi && /* @__PURE__ */ jsx3(
1096
- Renderer,
1097
- {
1098
- ...rendererProps,
1099
- library,
1100
- response: uiText,
1101
- isStreaming,
1102
- onAction: handleAction,
1103
- onError: handleParserErrors
1104
- }
1105
- ),
1106
- after.map((t, i) => text(t, before.length + i, `a${i}`)),
1107
- !hasUi && !hasText && (isStreaming ? loadingFallback : emptyFallback)
1108
- ]
1109
- }
1110
- ) }) }) });
1111
- }
1112
-
1113
- // src/components/library.ts
1114
- import { createLibrary, defineComponent } from "@openuidev/react-lang";
1115
- var defineJuneComponent = defineComponent;
1116
- function createJuneLibrary(options) {
1117
- const { allow, deny, ...rest } = options;
1118
- const input = rest;
1119
- const raw = input;
1120
- const components = raw.components ?? [];
1121
- const names = /* @__PURE__ */ new Set();
1122
- for (const component of components) {
1123
- if (typeof component?.name !== "string" || component.name.length === 0) {
1124
- throw new JuneError("LIBRARY_ERROR", "Every component needs a non-empty string name");
1125
- }
1126
- if (names.has(component.name)) {
1127
- throw new JuneError("LIBRARY_ERROR", `Duplicate component name "${component.name}"`);
1128
- }
1129
- names.add(component.name);
1130
- }
1131
- const allowSet = allow ? new Set(allow) : null;
1132
- const denySet = deny ? new Set(deny) : null;
1133
- if (allowSet) {
1134
- for (const n of allowSet) {
1135
- if (!names.has(n)) throw new JuneError("LIBRARY_ERROR", `Allowed component "${n}" is not registered`);
1136
- }
1137
- }
1138
- const keep = components.filter((c) => {
1139
- const n = c.name;
1140
- return (!allowSet || allowSet.has(n)) && !(denySet && denySet.has(n));
113
+ function JuneUI({ library, june, ...props }) {
114
+ const context = useJuneUIContext();
115
+ const instance = june ?? context?.june;
116
+ const registryLibrary = useRegistryLibrary(instance?.registry ?? defaultRegistry);
117
+ const merged = mergeDefined(instance?.defaults, context?.defaults, props);
118
+ return /* @__PURE__ */ jsx2(JuneRenderer, { ...merged, library: library ?? registryLibrary });
119
+ }
120
+
121
+ // src/core/create-june-ui.ts
122
+ function createJuneUI(options = {}) {
123
+ const registry = createComponentRegistry({
124
+ base: options.baseLibrary ?? juneLibrary,
125
+ components: options.components,
126
+ overrides: options.overrides,
127
+ remove: options.remove
1141
128
  });
1142
- if (raw.root !== void 0 && !keep.some((c) => c.name === raw.root)) {
1143
- throw new JuneError("LIBRARY_ERROR", `Root component "${raw.root}" is missing after filtering`);
1144
- }
1145
- try {
1146
- const unfiltered = keep.length === components.length;
1147
- return createLibrary(
1148
- unfiltered ? input : { ...input, components: keep }
1149
- );
1150
- } catch (error) {
1151
- throw new JuneError("LIBRARY_ERROR", "OpenUI rejected the component library", { cause: error });
1152
- }
1153
- }
1154
-
1155
- // src/actions/define-action.ts
1156
- function defineJuneAction(definition) {
1157
- if (typeof definition.handler !== "function") {
1158
- throw new JuneError("ACTION_VALIDATION_ERROR", "defineJuneAction requires a handler function");
1159
- }
1160
- return Object.freeze({ ...definition, __june: "action" });
1161
- }
1162
-
1163
- // src/streaming/use-june-stream.ts
1164
- import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
1165
-
1166
- // src/streaming/stream-handler.ts
1167
- function isReadableStream(source) {
1168
- return typeof source.getReader === "function";
1169
- }
1170
- async function* iterateReadable(stream, signal) {
1171
- const reader = stream.getReader();
1172
- const onAbort = () => {
1173
- void reader.cancel().catch(() => {
1174
- });
1175
- };
1176
- signal?.addEventListener("abort", onAbort, { once: true });
1177
- try {
1178
- while (true) {
1179
- const { done, value } = await reader.read();
1180
- if (done) return;
1181
- yield value;
1182
- }
1183
- } finally {
1184
- signal?.removeEventListener("abort", onAbort);
1185
- try {
1186
- reader.releaseLock();
1187
- } catch {
1188
- }
1189
- }
1190
- }
1191
- function toAsyncIterable(source, signal) {
1192
- return isReadableStream(source) ? iterateReadable(source, signal) : source;
1193
- }
1194
- function abortedError(partial) {
1195
- return new JuneError("STREAM_ABORTED", "Stream was aborted", { details: { partial } });
1196
- }
1197
- async function consumeStream(source, options = {}) {
1198
- const { signal, onText, allowEmpty = false } = options;
1199
- if (signal?.aborted) throw abortedError("");
1200
- const decoder = new TextDecoder();
1201
- let text = "";
1202
- let received = false;
1203
- const push = (delta) => {
1204
- if (!delta) return;
1205
- received = true;
1206
- text += delta;
1207
- onText?.(delta, text);
1208
- };
1209
- try {
1210
- for await (const chunk of toAsyncIterable(source, signal)) {
1211
- if (signal?.aborted) break;
1212
- push(typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true }));
1213
- }
1214
- push(decoder.decode());
1215
- } catch (error) {
1216
- if (signal?.aborted) throw abortedError(text);
1217
- if (error instanceof JuneError) throw error;
1218
- throw new JuneError("STREAM_ERROR", "Stream was interrupted", {
1219
- cause: error,
1220
- details: { partial: text }
1221
- });
1222
- }
1223
- if (signal?.aborted) throw abortedError(text);
1224
- if (!received && !allowEmpty) {
1225
- throw new JuneError("STREAM_EMPTY", "Stream completed without any content");
1226
- }
1227
- return text;
1228
- }
1229
-
1230
- // src/streaming/sse-adapter.ts
1231
- var BOUNDARY = /\r\n\r\n|\n\n|\r\r/;
1232
- function parseFrame(raw) {
1233
- let event = "message";
1234
- const data = [];
1235
- for (const line of raw.split(/\r\n|\n|\r/)) {
1236
- if (!line || line.startsWith(":")) continue;
1237
- const i = line.indexOf(":");
1238
- const field = i === -1 ? line : line.slice(0, i);
1239
- let value = i === -1 ? "" : line.slice(i + 1);
1240
- if (value.startsWith(" ")) value = value.slice(1);
1241
- if (field === "event") event = value;
1242
- else if (field === "data") data.push(value);
1243
- }
1244
- if (data.length === 0 && event === "message") return null;
1245
- return { event, data: data.join("\n") };
1246
- }
1247
- async function* sseToText(source, options = {}) {
1248
- const { extract, doneSentinel = "[DONE]", signal } = options;
1249
- const decoder = new TextDecoder();
1250
- let buffer = "";
1251
- const handle = (raw) => {
1252
- const frame = parseFrame(raw);
1253
- if (!frame) return { done: false, text: null };
1254
- if (frame.event === "error") {
1255
- throw new JuneError("STREAM_ERROR", frame.data || "Server sent an error event", {
1256
- details: frame
1257
- });
1258
- }
1259
- if (doneSentinel !== null && frame.data === doneSentinel) {
1260
- return { done: true, text: null };
1261
- }
1262
- const text = extract ? extract(frame.data, frame.event) : frame.data;
1263
- return { done: false, text: text ? text : null };
1264
- };
1265
- for await (const chunk of toAsyncIterable(source, signal)) {
1266
- buffer += typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true });
1267
- let match;
1268
- while ((match = BOUNDARY.exec(buffer)) !== null) {
1269
- const raw = buffer.slice(0, match.index);
1270
- buffer = buffer.slice(match.index + match[0].length);
1271
- const result = handle(raw);
1272
- if (result.done) return;
1273
- if (result.text) yield result.text;
1274
- }
1275
- }
1276
- buffer += decoder.decode();
1277
- if (buffer.trim()) {
1278
- const result = handle(buffer);
1279
- if (!result.done && result.text) yield result.text;
1280
- }
1281
- }
1282
- function jsonFieldExtractor(path) {
1283
- const keys = path.split(".");
1284
- return (data) => {
1285
- try {
1286
- let current = JSON.parse(data);
1287
- for (const key of keys) {
1288
- if (current === null || typeof current !== "object") return null;
1289
- current = current[key];
1290
- }
1291
- return typeof current === "string" ? current : null;
1292
- } catch {
1293
- return null;
1294
- }
1295
- };
1296
- }
1297
-
1298
- // src/streaming/fetch-adapter.ts
1299
- async function fetchStream(input, options = {}) {
1300
- const { sse, ...init } = options;
1301
- let response;
1302
- try {
1303
- response = await fetch(input, init);
1304
- } catch (error) {
1305
- if (init.signal?.aborted) {
1306
- throw new JuneError("STREAM_ABORTED", "Request was aborted", { cause: error });
1307
- }
1308
- throw new JuneError("NETWORK_ERROR", "Network request failed", { cause: error });
1309
- }
1310
- if (!response.ok) {
1311
- throw new JuneError("NETWORK_ERROR", `Request failed with status ${response.status}`, {
1312
- details: { status: response.status, statusText: response.statusText }
1313
- });
1314
- }
1315
- if (!response.body) {
1316
- throw new JuneError("STREAM_EMPTY", "Response has no body");
1317
- }
1318
- const body = response.body;
1319
- if (sse) {
1320
- return sseToText(body, {
1321
- ...sse === true ? {} : sse,
1322
- signal: init.signal ?? void 0
1323
- });
1324
- }
1325
- return body;
1326
- }
1327
-
1328
- // src/streaming/use-june-stream.ts
1329
- var FLUSH_MS = 16;
1330
- var INITIAL = {
1331
- response: "",
1332
- isStreaming: false,
1333
- status: "idle",
1334
- error: null
1335
- };
1336
- function useJuneStream(options = {}) {
1337
- const [state, setState] = useState(INITIAL);
1338
- const optionsRef = useRef2(options);
1339
- optionsRef.current = options;
1340
- const controllerRef = useRef2(null);
1341
- const runIdRef = useRef2(0);
1342
- const textRef = useRef2("");
1343
- const timerRef = useRef2(null);
1344
- const clearTimer = useCallback2(() => {
1345
- if (timerRef.current !== null) {
1346
- clearTimeout(timerRef.current);
1347
- timerRef.current = null;
1348
- }
1349
- }, []);
1350
- const schedule = useCallback2(() => {
1351
- if (timerRef.current !== null) return;
1352
- timerRef.current = setTimeout(() => {
1353
- timerRef.current = null;
1354
- const text = textRef.current;
1355
- setState(
1356
- (s) => s.status !== "streaming" || s.response === text ? s : { ...s, response: text }
1357
- );
1358
- }, FLUSH_MS);
1359
- }, []);
1360
- const start = useCallback2(
1361
- async (input) => {
1362
- controllerRef.current?.abort();
1363
- const controller = new AbortController();
1364
- controllerRef.current = controller;
1365
- const runId = ++runIdRef.current;
1366
- const stale = () => runId !== runIdRef.current;
1367
- textRef.current = "";
1368
- clearTimer();
1369
- setState({ response: "", isStreaming: true, status: "streaming", error: null });
1370
- try {
1371
- const source = typeof input === "function" ? await input(controller.signal) : input;
1372
- if (stale()) return null;
1373
- const text = await consumeStream(source, {
1374
- signal: controller.signal,
1375
- allowEmpty: optionsRef.current.allowEmpty,
1376
- onText: (_delta, full) => {
1377
- if (stale()) return;
1378
- textRef.current = full;
1379
- schedule();
1380
- }
1381
- });
1382
- if (stale()) return null;
1383
- clearTimer();
1384
- setState({ response: text, isStreaming: false, status: "done", error: null });
1385
- optionsRef.current.onComplete?.(text);
1386
- return text;
1387
- } catch (caught) {
1388
- if (stale()) return null;
1389
- clearTimer();
1390
- const error = toJuneError(caught, "STREAM_ERROR");
1391
- const aborted = controller.signal.aborted || error.code === "STREAM_ABORTED";
1392
- setState({
1393
- response: textRef.current,
1394
- // keep partial output
1395
- isStreaming: false,
1396
- status: aborted ? "aborted" : "error",
1397
- error: aborted ? null : error
1398
- });
1399
- if (!aborted) optionsRef.current.onError?.(error);
1400
- return null;
1401
- }
129
+ const defaults = Object.freeze({ ...options.defaults });
130
+ const instance = {
131
+ registry,
132
+ get library() {
133
+ return registry.library;
1402
134
  },
1403
- [clearTimer, schedule]
1404
- );
1405
- const startFetch = useCallback2(
1406
- (input, fetchOptions) => start((signal) => fetchStream(input, { ...fetchOptions, signal })),
1407
- [start]
1408
- );
1409
- const abort = useCallback2(() => {
1410
- controllerRef.current?.abort();
1411
- }, []);
1412
- const reset = useCallback2(() => {
1413
- controllerRef.current?.abort();
1414
- runIdRef.current++;
1415
- textRef.current = "";
1416
- clearTimer();
1417
- setState(INITIAL);
1418
- }, [clearTimer]);
1419
- useEffect2(
1420
- () => () => {
1421
- runIdRef.current++;
1422
- controllerRef.current?.abort();
1423
- clearTimer();
135
+ defaults,
136
+ register(components, registerOptions) {
137
+ registry.register(components, registerOptions);
138
+ return instance;
1424
139
  },
1425
- [clearTimer]
1426
- );
1427
- return useMemo3(
1428
- () => ({ ...state, start, startFetch, abort, reset }),
1429
- [state, start, startFetch, abort, reset]
1430
- );
1431
- }
1432
-
1433
- // src/components/document-editor/document-component.tsx
1434
- import { defineComponent as defineComponent2 } from "@openuidev/react-lang";
1435
- import { z } from "zod/v4";
1436
-
1437
- // src/components/document-editor/document-draft.tsx
1438
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
1439
- function DocumentDraft({ title, words, state }) {
1440
- if (state === "empty") {
1441
- return /* @__PURE__ */ jsx4("div", { className: "june-doc june-doc--draft", role: "alert", children: /* @__PURE__ */ jsx4("p", { className: "june-doc__draft-text", children: "No document content was received." }) });
1442
- }
1443
- return /* @__PURE__ */ jsxs2("div", { className: "june-doc june-doc--draft", role: "status", "aria-live": "polite", children: [
1444
- title ? /* @__PURE__ */ jsx4("p", { className: "june-doc__draft-title", children: title }) : null,
1445
- /* @__PURE__ */ jsx4("p", { className: "june-doc__draft-text", children: state === "drafting" ? `Drafting document\u2026${words ? ` ${words} words so far` : ""}` : "Loading editor\u2026" }),
1446
- /* @__PURE__ */ jsxs2("div", { className: "june-doc__pulse", "aria-hidden": "true", children: [
1447
- /* @__PURE__ */ jsx4("span", {}),
1448
- /* @__PURE__ */ jsx4("span", {}),
1449
- /* @__PURE__ */ jsx4("span", {})
1450
- ] })
1451
- ] });
1452
- }
1453
-
1454
- // src/components/document-editor/document-editor.tsx
1455
- import { useEditor } from "@tiptap/react";
1456
- import { useCallback as useCallback3, useEffect as useEffect6, useId, useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
1457
-
1458
- // src/components/document-editor/document-bubble.tsx
1459
- import { useEditorState as useEditorState2 } from "@tiptap/react";
1460
- import { BubbleMenu } from "@tiptap/react/menus";
1461
-
1462
- // src/components/document-editor/document-toolbar.tsx
1463
- import { useEditorState } from "@tiptap/react";
1464
- import { useRef as useRef4, useState as useState3 } from "react";
1465
-
1466
- // src/components/document-editor/document-icons.tsx
1467
- import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
1468
- var PATHS = {
1469
- undo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1470
- /* @__PURE__ */ jsx5("path", { d: "M9 14 4 9l5-5" }),
1471
- /* @__PURE__ */ jsx5("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
1472
- ] }),
1473
- redo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1474
- /* @__PURE__ */ jsx5("path", { d: "m15 14 5-5-5-5" }),
1475
- /* @__PURE__ */ jsx5("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
1476
- ] }),
1477
- bold: /* @__PURE__ */ jsx5("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }),
1478
- italic: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1479
- /* @__PURE__ */ jsx5("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
1480
- /* @__PURE__ */ jsx5("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
1481
- /* @__PURE__ */ jsx5("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
1482
- ] }),
1483
- underline: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1484
- /* @__PURE__ */ jsx5("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
1485
- /* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
1486
- ] }),
1487
- strike: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1488
- /* @__PURE__ */ jsx5("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
1489
- /* @__PURE__ */ jsx5("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
1490
- /* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
1491
- ] }),
1492
- code: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1493
- /* @__PURE__ */ jsx5("path", { d: "m16 18 6-6-6-6" }),
1494
- /* @__PURE__ */ jsx5("path", { d: "m8 6-6 6 6 6" })
1495
- ] }),
1496
- codeBlock: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1497
- /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
1498
- /* @__PURE__ */ jsx5("path", { d: "m10 9-3 3 3 3" }),
1499
- /* @__PURE__ */ jsx5("path", { d: "m14 15 3-3-3-3" })
1500
- ] }),
1501
- superscript: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1502
- /* @__PURE__ */ jsx5("path", { d: "m4 19 8-8" }),
1503
- /* @__PURE__ */ jsx5("path", { d: "m12 19-8-8" }),
1504
- /* @__PURE__ */ jsx5("path", { d: "M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
1505
- ] }),
1506
- subscript: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1507
- /* @__PURE__ */ jsx5("path", { d: "m4 5 8 8" }),
1508
- /* @__PURE__ */ jsx5("path", { d: "m12 5-8 8" }),
1509
- /* @__PURE__ */ jsx5("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
1510
- ] }),
1511
- alignLeft: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1512
- /* @__PURE__ */ jsx5("path", { d: "M15 12H3" }),
1513
- /* @__PURE__ */ jsx5("path", { d: "M17 18H3" }),
1514
- /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
1515
- ] }),
1516
- alignCenter: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1517
- /* @__PURE__ */ jsx5("path", { d: "M17 12H7" }),
1518
- /* @__PURE__ */ jsx5("path", { d: "M19 18H5" }),
1519
- /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
1520
- ] }),
1521
- alignRight: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1522
- /* @__PURE__ */ jsx5("path", { d: "M21 12H9" }),
1523
- /* @__PURE__ */ jsx5("path", { d: "M21 18H7" }),
1524
- /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
1525
- ] }),
1526
- alignJustify: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1527
- /* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
1528
- /* @__PURE__ */ jsx5("path", { d: "M3 18h18" }),
1529
- /* @__PURE__ */ jsx5("path", { d: "M3 6h18" })
1530
- ] }),
1531
- list: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1532
- /* @__PURE__ */ jsx5("path", { d: "M3 12h.01" }),
1533
- /* @__PURE__ */ jsx5("path", { d: "M3 18h.01" }),
1534
- /* @__PURE__ */ jsx5("path", { d: "M3 6h.01" }),
1535
- /* @__PURE__ */ jsx5("path", { d: "M8 12h13" }),
1536
- /* @__PURE__ */ jsx5("path", { d: "M8 18h13" }),
1537
- /* @__PURE__ */ jsx5("path", { d: "M8 6h13" })
1538
- ] }),
1539
- listOrdered: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1540
- /* @__PURE__ */ jsx5("path", { d: "M10 12h11" }),
1541
- /* @__PURE__ */ jsx5("path", { d: "M10 18h11" }),
1542
- /* @__PURE__ */ jsx5("path", { d: "M10 6h11" }),
1543
- /* @__PURE__ */ jsx5("path", { d: "M4 10h2" }),
1544
- /* @__PURE__ */ jsx5("path", { d: "M4 6h1v4" }),
1545
- /* @__PURE__ */ jsx5("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
1546
- ] }),
1547
- outdent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1548
- /* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
1549
- /* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
1550
- /* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
1551
- /* @__PURE__ */ jsx5("path", { d: "m7 8-4 4 4 4" })
1552
- ] }),
1553
- indent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1554
- /* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
1555
- /* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
1556
- /* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
1557
- /* @__PURE__ */ jsx5("path", { d: "m3 8 4 4-4 4" })
1558
- ] }),
1559
- quote: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1560
- /* @__PURE__ */ jsx5("path", { d: "M17 6H3" }),
1561
- /* @__PURE__ */ jsx5("path", { d: "M21 12H8" }),
1562
- /* @__PURE__ */ jsx5("path", { d: "M21 18H8" }),
1563
- /* @__PURE__ */ jsx5("path", { d: "M3 12v6" })
1564
- ] }),
1565
- pilcrow: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1566
- /* @__PURE__ */ jsx5("path", { d: "M13 4v16" }),
1567
- /* @__PURE__ */ jsx5("path", { d: "M17 4v16" }),
1568
- /* @__PURE__ */ jsx5("path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" })
1569
- ] }),
1570
- pageBreak: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1571
- /* @__PURE__ */ jsx5("line", { x1: "3", x2: "21", y1: "12", y2: "12" }),
1572
- /* @__PURE__ */ jsx5("polyline", { points: "8 8 12 4 16 8" }),
1573
- /* @__PURE__ */ jsx5("polyline", { points: "16 16 12 20 8 16" })
1574
- ] }),
1575
- divider: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1576
- /* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
1577
- /* @__PURE__ */ jsx5("path", { d: "M8 6h8", opacity: ".45" }),
1578
- /* @__PURE__ */ jsx5("path", { d: "M8 18h8", opacity: ".45" })
1579
- ] }),
1580
- layout: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1581
- /* @__PURE__ */ jsx5("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
1582
- /* @__PURE__ */ jsx5("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
1583
- /* @__PURE__ */ jsx5("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
1584
- ] }),
1585
- search: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1586
- /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
1587
- /* @__PURE__ */ jsx5("path", { d: "m21 21-4.3-4.3" })
1588
- ] }),
1589
- palette: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1590
- /* @__PURE__ */ jsx5("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
1591
- /* @__PURE__ */ jsx5("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
1592
- /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
1593
- /* @__PURE__ */ jsx5("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
1594
- /* @__PURE__ */ jsx5("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.65-.75 1.65-1.69 0-.44-.18-.84-.44-1.13-.29-.29-.44-.65-.44-1.13a1.64 1.64 0 0 1 1.67-1.67h2c3.05 0 5.55-2.5 5.55-5.55C21.97 6.01 17.46 2 12 2z" })
1595
- ] }),
1596
- highlighter: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1597
- /* @__PURE__ */ jsx5("path", { d: "m9 11-6 6v3h9l3-3" }),
1598
- /* @__PURE__ */ jsx5("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
1599
- ] }),
1600
- link: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1601
- /* @__PURE__ */ jsx5("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
1602
- /* @__PURE__ */ jsx5("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
1603
- ] }),
1604
- image: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1605
- /* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
1606
- /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "9", r: "2" }),
1607
- /* @__PURE__ */ jsx5("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
1608
- ] }),
1609
- table: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1610
- /* @__PURE__ */ jsx5("path", { d: "M12 3v18" }),
1611
- /* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
1612
- /* @__PURE__ */ jsx5("path", { d: "M3 9h18" }),
1613
- /* @__PURE__ */ jsx5("path", { d: "M3 15h18" })
1614
- ] }),
1615
- eraser: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1616
- /* @__PURE__ */ jsx5("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
1617
- /* @__PURE__ */ jsx5("path", { d: "M22 21H7" }),
1618
- /* @__PURE__ */ jsx5("path", { d: "m5 11 9 9" })
1619
- ] }),
1620
- save: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1621
- /* @__PURE__ */ jsx5("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
1622
- /* @__PURE__ */ jsx5("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }),
1623
- /* @__PURE__ */ jsx5("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
1624
- ] }),
1625
- download: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1626
- /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
1627
- /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
1628
- /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
1629
- ] }),
1630
- chevronDown: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" }),
1631
- chevronUp: /* @__PURE__ */ jsx5("path", { d: "m18 15-6-6-6 6" }),
1632
- close: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1633
- /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
1634
- /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
1635
- ] }),
1636
- maximize: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1637
- /* @__PURE__ */ jsx5("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
1638
- /* @__PURE__ */ jsx5("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
1639
- /* @__PURE__ */ jsx5("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
1640
- /* @__PURE__ */ jsx5("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
1641
- ] }),
1642
- copy: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1643
- /* @__PURE__ */ jsx5("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
1644
- /* @__PURE__ */ jsx5("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
1645
- ] }),
1646
- file: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1647
- /* @__PURE__ */ jsx5("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
1648
- /* @__PURE__ */ jsx5("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
1649
- ] }),
1650
- plus: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1651
- /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
1652
- /* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
1653
- ] }),
1654
- minus: /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
1655
- check: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" }),
1656
- sparkles: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1657
- /* @__PURE__ */ jsx5("path", { d: "M9.94 14.06 8 20l-1.94-5.94L0 12l6.06-1.94L8 4l1.94 6.06L16 12z", transform: "translate(3 -1) scale(.85)" }),
1658
- /* @__PURE__ */ jsx5("path", { d: "M20 3v4" }),
1659
- /* @__PURE__ */ jsx5("path", { d: "M22 5h-4" })
1660
- ] }),
1661
- upload: /* @__PURE__ */ jsxs3(Fragment2, { children: [
1662
- /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
1663
- /* @__PURE__ */ jsx5("polyline", { points: "17 8 12 3 7 8" }),
1664
- /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
1665
- ] })
1666
- };
1667
- function Icon({ name, size = 16 }) {
1668
- return /* @__PURE__ */ jsx5(
1669
- "svg",
1670
- {
1671
- className: "june-doc__icon",
1672
- width: size,
1673
- height: size,
1674
- viewBox: "0 0 24 24",
1675
- fill: "none",
1676
- stroke: "currentColor",
1677
- strokeWidth: 2,
1678
- strokeLinecap: "round",
1679
- strokeLinejoin: "round",
1680
- "aria-hidden": "true",
1681
- focusable: "false",
1682
- children: PATHS[name]
1683
- }
1684
- );
1685
- }
1686
-
1687
- // src/components/document-editor/document-popover.tsx
1688
- import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
1689
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
1690
- function Dropdown({ trigger, children, align = "start", className, onOpen }) {
1691
- const [open, setOpen] = useState2(false);
1692
- const anchor = useRef3(null);
1693
- useEffect3(() => {
1694
- if (!open) return;
1695
- const onDown = (e) => {
1696
- if (anchor.current && !anchor.current.contains(e.target)) setOpen(false);
1697
- };
1698
- document.addEventListener("mousedown", onDown);
1699
- return () => document.removeEventListener("mousedown", onDown);
1700
- }, [open]);
1701
- const toggle = () => setOpen((v) => {
1702
- if (!v) onOpen?.();
1703
- return !v;
1704
- });
1705
- const close = () => setOpen(false);
1706
- return /* @__PURE__ */ jsxs4(
1707
- "div",
1708
- {
1709
- ref: anchor,
1710
- className: "june-doc__anchor",
1711
- onKeyDown: (e) => {
1712
- if (e.key === "Escape" && open) {
1713
- e.stopPropagation();
1714
- close();
1715
- }
1716
- },
1717
- children: [
1718
- trigger({ open, toggle }),
1719
- open ? /* @__PURE__ */ jsx6("div", { className: `june-doc__pop june-doc__pop--${align}${className ? ` ${className}` : ""}`, children: children(close) }) : null
1720
- ]
1721
- }
1722
- );
1723
- }
1724
-
1725
- // src/components/document-editor/document-toolbar.tsx
1726
- import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
1727
- var FONT_FAMILIES = [
1728
- { label: "Default", value: "" },
1729
- { label: "Arial", value: "Arial, Helvetica, sans-serif" },
1730
- { label: "Calibri", value: "Calibri, Carlito, sans-serif" },
1731
- { label: "Georgia", value: "Georgia, serif" },
1732
- { label: "Garamond", value: "Garamond, 'EB Garamond', serif" },
1733
- { label: "Times New Roman", value: "'Times New Roman', Times, serif" },
1734
- { label: "Verdana", value: "Verdana, Geneva, sans-serif" },
1735
- { label: "Trebuchet MS", value: "'Trebuchet MS', sans-serif" },
1736
- { label: "Courier New", value: "'Courier New', Courier, monospace" }
1737
- ];
1738
- var FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
1739
- var TEXT_COLORS = [
1740
- "#111827",
1741
- "#374151",
1742
- "#6b7280",
1743
- "#9ca3af",
1744
- "#dc2626",
1745
- "#ea580c",
1746
- "#ca8a04",
1747
- "#16a34a",
1748
- "#0d9488",
1749
- "#0284c7",
1750
- "#2563eb",
1751
- "#4f46e5",
1752
- "#9333ea",
1753
- "#db2777",
1754
- "#7f1d1d",
1755
- "#1e3a8a"
1756
- ];
1757
- var HIGHLIGHT_COLORS = [
1758
- "#fef08a",
1759
- "#fde68a",
1760
- "#fed7aa",
1761
- "#fecaca",
1762
- "#fbcfe8",
1763
- "#e9d5ff",
1764
- "#c7d2fe",
1765
- "#bfdbfe",
1766
- "#a5f3fc",
1767
- "#bbf7d0",
1768
- "#d9f99d",
1769
- "#e5e7eb"
1770
- ];
1771
- var MAX_IMAGE_BYTES = 8 * 1024 * 1024;
1772
- function Btn({ label, icon, active, disabled, toggle, onClick, children, className, text }) {
1773
- return /* @__PURE__ */ jsxs5(
1774
- "button",
1775
- {
1776
- type: "button",
1777
- className: `june-doc__btn${icon && !text && !children ? " june-doc__btn--icon" : ""}${className ? ` ${className}` : ""}`,
1778
- "aria-label": label,
1779
- title: label,
1780
- "aria-pressed": toggle ? !!active : void 0,
1781
- "data-active": active || void 0,
1782
- disabled,
1783
- onMouseDown: (e) => e.preventDefault(),
1784
- onClick,
1785
- children: [
1786
- icon ? /* @__PURE__ */ jsx7(Icon, { name: icon }) : null,
1787
- children ?? (text ? /* @__PURE__ */ jsx7("span", { children: label }) : null)
1788
- ]
1789
- }
1790
- );
1791
- }
1792
- function Group({ label, children }) {
1793
- return /* @__PURE__ */ jsxs5("div", { className: "june-doc__group", role: "group", "aria-label": label, children: [
1794
- label ? /* @__PURE__ */ jsx7("span", { className: "june-doc__group-label", "aria-hidden": "true", children: label }) : null,
1795
- children
1796
- ] });
1797
- }
1798
- function Field({ label, children }) {
1799
- return /* @__PURE__ */ jsxs5("label", { className: "june-doc__field", children: [
1800
- /* @__PURE__ */ jsx7("span", { className: "june-doc__field-label", children: label }),
1801
- children
1802
- ] });
1803
- }
1804
- function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPick, onReset }) {
1805
- return /* @__PURE__ */ jsx7(
1806
- Dropdown,
1807
- {
1808
- trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs5(
1809
- "button",
1810
- {
1811
- type: "button",
1812
- className: "june-doc__btn june-doc__btn--icon june-doc__btn--color",
1813
- "aria-label": label,
1814
- title: label,
1815
- "aria-expanded": open,
1816
- "aria-haspopup": "dialog",
1817
- disabled,
1818
- onMouseDown: (e) => e.preventDefault(),
1819
- onClick: toggle,
1820
- children: [
1821
- /* @__PURE__ */ jsx7(Icon, { name: icon }),
1822
- /* @__PURE__ */ jsx7("span", { className: "june-doc__color-bar", style: { background: current ?? "transparent" } })
1823
- ]
1824
- }
1825
- ),
1826
- children: (close) => /* @__PURE__ */ jsxs5("div", { className: "june-doc__swatches-wrap", role: "dialog", "aria-label": label, children: [
1827
- /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: label }),
1828
- /* @__PURE__ */ jsx7("div", { className: "june-doc__swatches", children: colors.map((c) => /* @__PURE__ */ jsx7(
1829
- "button",
1830
- {
1831
- type: "button",
1832
- className: "june-doc__swatch",
1833
- style: { background: c },
1834
- "aria-label": c,
1835
- title: c,
1836
- "data-active": current?.toLowerCase() === c ? true : void 0,
1837
- onMouseDown: (e) => e.preventDefault(),
1838
- onClick: () => {
1839
- onPick(c);
1840
- close();
1841
- }
1842
- },
1843
- c
1844
- )) }),
1845
- /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row", children: [
1846
- /* @__PURE__ */ jsx7(
1847
- "button",
1848
- {
1849
- type: "button",
1850
- className: "june-doc__btn june-doc__btn--ghost",
1851
- onMouseDown: (e) => e.preventDefault(),
1852
- onClick: () => {
1853
- onReset();
1854
- close();
1855
- },
1856
- children: resetLabel
1857
- }
1858
- ),
1859
- /* @__PURE__ */ jsxs5("label", { className: "june-doc__custom-color", title: "Custom color", children: [
1860
- /* @__PURE__ */ jsx7("span", { children: "Custom" }),
1861
- /* @__PURE__ */ jsx7(
1862
- "input",
1863
- {
1864
- type: "color",
1865
- "aria-label": `${label}: custom`,
1866
- defaultValue: current && /^#[0-9a-f]{6}$/i.test(current) ? current : "#000000",
1867
- onChange: (e) => onPick(e.target.value)
1868
- }
1869
- )
1870
- ] })
1871
- ] })
1872
- ] })
1873
- }
1874
- );
1875
- }
1876
- function LinkPanel({
1877
- editor,
1878
- href,
1879
- isLink,
1880
- close
1881
- }) {
1882
- const [value, setValue] = useState3(href);
1883
- const apply = () => {
1884
- const safe = sanitizeHref(value);
1885
- if (safe) editor.chain().focus().extendMarkRange("link").setLink({ href: safe }).run();
1886
- close();
1887
- };
1888
- const remove = () => {
1889
- editor.chain().focus().extendMarkRange("link").unsetLink().run();
1890
- close();
1891
- };
1892
- return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Edit link", children: [
1893
- /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Link" }),
1894
- /* @__PURE__ */ jsx7(
1895
- "input",
1896
- {
1897
- "aria-label": "Link address",
1898
- className: "june-doc__input",
1899
- placeholder: "https://example.com",
1900
- value,
1901
- autoFocus: true,
1902
- onChange: (e) => setValue(e.target.value),
1903
- onKeyDown: (e) => {
1904
- if (e.key === "Enter") {
1905
- e.preventDefault();
1906
- apply();
1907
- }
1908
- }
1909
- }
1910
- ),
1911
- /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
1912
- isLink ? /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", onClick: remove, children: "Remove" }) : null,
1913
- /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
1914
- /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", onClick: apply, children: "Apply" })
1915
- ] })
1916
- ] });
1917
- }
1918
- function ImagePanel({ editor, close, onNotice }) {
1919
- const [url, setUrl] = useState3("");
1920
- const [alt, setAlt] = useState3("");
1921
- const file = useRef4(null);
1922
- const insert = (src) => {
1923
- editor.chain().focus().setImage({ src, alt: alt || void 0 }).run();
1924
- close();
1925
- };
1926
- const fromUrl = () => {
1927
- const safe = sanitizeHref(url);
1928
- if (!safe || !/^https?:/i.test(safe)) {
1929
- onNotice("Enter an http(s) image address");
1930
- return;
1931
- }
1932
- insert(safe);
1933
- };
1934
- const fromFile = (f) => {
1935
- if (!f) return;
1936
- if (!f.type.startsWith("image/")) return onNotice("That file is not an image");
1937
- if (f.size > MAX_IMAGE_BYTES) return onNotice("Images must be 8 MB or smaller");
1938
- const reader = new FileReader();
1939
- reader.onload = () => typeof reader.result === "string" && insert(reader.result);
1940
- reader.onerror = () => onNotice("The image could not be read");
1941
- reader.readAsDataURL(f);
140
+ prompt: (promptOptions) => registry.prompt(promptOptions)
1942
141
  };
1943
- return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert image", children: [
1944
- /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Image" }),
1945
- /* @__PURE__ */ jsxs5(
1946
- "button",
1947
- {
1948
- type: "button",
1949
- className: "june-doc__dropzone",
1950
- onClick: () => file.current?.click(),
1951
- onDragOver: (e) => e.preventDefault(),
1952
- onDrop: (e) => {
1953
- e.preventDefault();
1954
- fromFile(e.dataTransfer.files[0]);
1955
- },
1956
- children: [
1957
- /* @__PURE__ */ jsx7(Icon, { name: "upload", size: 18 }),
1958
- /* @__PURE__ */ jsx7("span", { children: "Upload or drop an image" })
1959
- ]
1960
- }
1961
- ),
1962
- /* @__PURE__ */ jsx7(
1963
- "input",
1964
- {
1965
- ref: file,
1966
- type: "file",
1967
- accept: "image/*",
1968
- hidden: true,
1969
- onChange: (e) => fromFile(e.target.files?.[0])
1970
- }
1971
- ),
1972
- /* @__PURE__ */ jsx7("div", { className: "june-doc__or", children: "or" }),
1973
- /* @__PURE__ */ jsx7(
1974
- "input",
1975
- {
1976
- "aria-label": "Image address",
1977
- className: "june-doc__input",
1978
- placeholder: "https://example.com/image.png",
1979
- value: url,
1980
- onChange: (e) => setUrl(e.target.value),
1981
- onKeyDown: (e) => e.key === "Enter" && fromUrl()
1982
- }
1983
- ),
1984
- /* @__PURE__ */ jsx7(
1985
- "input",
1986
- {
1987
- "aria-label": "Alternative text",
1988
- className: "june-doc__input",
1989
- placeholder: "Alt text (optional)",
1990
- value: alt,
1991
- onChange: (e) => setAlt(e.target.value)
1992
- }
1993
- ),
1994
- /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
1995
- /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
1996
- /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", disabled: !url.trim(), onClick: fromUrl, children: "Insert" })
1997
- ] })
1998
- ] });
1999
- }
2000
- function TablePanel({ editor, close }) {
2001
- const [hover, setHover] = useState3([0, 0]);
2002
- const N = 8;
2003
- return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert table", children: [
2004
- /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-title", children: [
2005
- "Table ",
2006
- hover[0] ? `${hover[0]} \xD7 ${hover[1]}` : ""
2007
- ] }),
2008
- /* @__PURE__ */ jsx7("div", { className: "june-doc__grid", onMouseLeave: () => setHover([0, 0]), children: Array.from({ length: N * N }, (_, i) => {
2009
- const r = Math.floor(i / N) + 1;
2010
- const c = i % N + 1;
2011
- return /* @__PURE__ */ jsx7(
2012
- "button",
2013
- {
2014
- type: "button",
2015
- className: "june-doc__cell",
2016
- "aria-label": `${r} by ${c} table`,
2017
- "data-active": r <= hover[0] && c <= hover[1] ? true : void 0,
2018
- onMouseEnter: () => setHover([r, c]),
2019
- onFocus: () => setHover([r, c]),
2020
- onMouseDown: (e) => e.preventDefault(),
2021
- onClick: () => {
2022
- editor.chain().focus().insertTable({ rows: r, cols: c, withHeaderRow: true }).run();
2023
- close();
2024
- }
2025
- },
2026
- i
2027
- );
2028
- }) })
2029
- ] });
2030
- }
2031
- var px = (v) => typeof v === "string" ? v.replace(/px$/, "") : "";
2032
- function DocumentToolbar(props) {
2033
- const { editor, editable, expanded, onToggleExpanded, showMarks, onToggleMarks, layout, onToggleLayout, findOpen, onToggleFind, onNotice } = props;
2034
- const s = useEditorState({
2035
- editor,
2036
- selector: ({ editor: ed }) => {
2037
- if (!ed) return null;
2038
- const ts = ed.getAttributes("textStyle");
2039
- return {
2040
- bold: ed.isActive("bold"),
2041
- italic: ed.isActive("italic"),
2042
- underline: ed.isActive("underline"),
2043
- strike: ed.isActive("strike"),
2044
- code: ed.isActive("code"),
2045
- sup: ed.isActive("superscript"),
2046
- sub: ed.isActive("subscript"),
2047
- bullet: ed.isActive("bulletList"),
2048
- ordered: ed.isActive("orderedList"),
2049
- quote: ed.isActive("blockquote"),
2050
- codeBlock: ed.isActive("codeBlock"),
2051
- link: ed.isActive("link"),
2052
- linkHref: ed.getAttributes("link").href ?? "",
2053
- h1: ed.isActive("heading", { level: 1 }),
2054
- h2: ed.isActive("heading", { level: 2 }),
2055
- h3: ed.isActive("heading", { level: 3 }),
2056
- left: ed.isActive({ textAlign: "left" }),
2057
- center: ed.isActive({ textAlign: "center" }),
2058
- right: ed.isActive({ textAlign: "right" }),
2059
- justify: ed.isActive({ textAlign: "justify" }),
2060
- inTable: ed.isActive("table"),
2061
- color: ts.color ?? null,
2062
- fontFamily: ts.fontFamily ?? "",
2063
- fontSize: px(ts.fontSize),
2064
- highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null,
2065
- canUndo: ed.can().undo(),
2066
- canRedo: ed.can().redo(),
2067
- canSink: ed.can().sinkListItem("listItem"),
2068
- canLift: ed.can().liftListItem("listItem"),
2069
- canMerge: ed.can().mergeCells(),
2070
- canSplit: ed.can().splitCell()
2071
- };
2072
- }
2073
- });
2074
- const run = () => editor?.chain().focus();
2075
- const off = !editor || !editable;
2076
- const style = s?.codeBlock ? "code" : s?.h1 ? "1" : s?.h2 ? "2" : s?.h3 ? "3" : s?.quote ? "quote" : "p";
2077
- const setStyle = (v) => {
2078
- if (!editor || !s) return;
2079
- let c = editor.chain().focus();
2080
- if (v === "quote") {
2081
- if (!s.quote) c = c.setParagraph().toggleBlockquote();
2082
- } else if (v === "code") {
2083
- if (!s.codeBlock) c = c.toggleCodeBlock();
2084
- } else {
2085
- if (s.quote) c = c.lift("blockquote");
2086
- c = v === "p" ? c.setParagraph() : c.setHeading({ level: Number(v) });
2087
- }
2088
- c.run();
2089
- };
2090
- const fontKnown = FONT_FAMILIES.some((f) => f.value === s?.fontFamily);
2091
- const sizes = s?.fontSize && !FONT_SIZES.includes(Number(s.fontSize)) ? [...FONT_SIZES, Number(s.fontSize)].sort((a, b) => a - b) : FONT_SIZES;
2092
- if (!editable) return null;
2093
- return /* @__PURE__ */ jsxs5("div", { className: "june-doc__ribbon", role: "toolbar", "aria-label": "Document formatting", children: [
2094
- /* @__PURE__ */ jsxs5("div", { className: "june-doc__row", children: [
2095
- /* @__PURE__ */ jsxs5(Group, { label: "History", children: [
2096
- /* @__PURE__ */ jsx7(Btn, { label: "Undo", icon: "undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run() }),
2097
- /* @__PURE__ */ jsx7(Btn, { label: "Redo", icon: "redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run() })
2098
- ] }),
2099
- /* @__PURE__ */ jsxs5(Group, { label: "Format", children: [
2100
- /* @__PURE__ */ jsx7(Btn, { label: "Bold", icon: "bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run() }),
2101
- /* @__PURE__ */ jsx7(Btn, { label: "Italic", icon: "italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run() }),
2102
- /* @__PURE__ */ jsx7(Btn, { label: "Underline", icon: "underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run() }),
2103
- /* @__PURE__ */ jsx7(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run() }),
2104
- /* @__PURE__ */ jsx7(Btn, { label: "Inline code", icon: "code", toggle: true, active: s?.code, disabled: off, onClick: () => run()?.toggleCode().run() }),
2105
- /* @__PURE__ */ jsx7(Btn, { label: "Superscript", icon: "superscript", toggle: true, active: s?.sup, disabled: off, onClick: () => run()?.toggleSuperscript().run() }),
2106
- /* @__PURE__ */ jsx7(Btn, { label: "Subscript", icon: "subscript", toggle: true, active: s?.sub, disabled: off, onClick: () => run()?.toggleSubscript().run() })
2107
- ] }),
2108
- /* @__PURE__ */ jsxs5(Group, { label: "Align", children: [
2109
- /* @__PURE__ */ jsx7(Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run() }),
2110
- /* @__PURE__ */ jsx7(Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run() }),
2111
- /* @__PURE__ */ jsx7(Btn, { label: "Align right", icon: "alignRight", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run() }),
2112
- /* @__PURE__ */ jsx7(Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run() })
2113
- ] }),
2114
- /* @__PURE__ */ jsxs5(Group, { label: "Lists", children: [
2115
- /* @__PURE__ */ jsx7(Btn, { label: "Bullet list", icon: "list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run() }),
2116
- /* @__PURE__ */ jsx7(Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run() }),
2117
- /* @__PURE__ */ jsx7(Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !s?.canLift, onClick: () => run()?.liftListItem("listItem").run() }),
2118
- /* @__PURE__ */ jsx7(Btn, { label: "Increase indent", icon: "indent", disabled: off || !s?.canSink, onClick: () => run()?.sinkListItem("listItem").run() })
2119
- ] }),
2120
- /* @__PURE__ */ jsxs5(
2121
- "button",
2122
- {
2123
- type: "button",
2124
- className: "june-doc__btn june-doc__more",
2125
- "aria-expanded": expanded,
2126
- "aria-label": expanded ? "Show fewer tools" : "Show more tools",
2127
- onMouseDown: (e) => e.preventDefault(),
2128
- onClick: onToggleExpanded,
2129
- children: [
2130
- expanded ? "Less" : "More",
2131
- /* @__PURE__ */ jsx7(Icon, { name: expanded ? "chevronUp" : "chevronDown", size: 14 })
2132
- ]
2133
- }
2134
- )
2135
- ] }),
2136
- expanded ? /* @__PURE__ */ jsxs5("div", { className: "june-doc__row june-doc__row--secondary", children: [
2137
- /* @__PURE__ */ jsxs5(Group, { label: "Style", children: [
2138
- /* @__PURE__ */ jsx7(Field, { label: "Style", children: /* @__PURE__ */ jsxs5("select", { className: "june-doc__select", "aria-label": "Text style", disabled: off, value: style, onChange: (e) => setStyle(e.target.value), children: [
2139
- /* @__PURE__ */ jsx7("option", { value: "p", children: "Paragraph" }),
2140
- /* @__PURE__ */ jsx7("option", { value: "1", children: "Heading 1" }),
2141
- /* @__PURE__ */ jsx7("option", { value: "2", children: "Heading 2" }),
2142
- /* @__PURE__ */ jsx7("option", { value: "3", children: "Heading 3" }),
2143
- /* @__PURE__ */ jsx7("option", { value: "quote", children: "Quote" }),
2144
- /* @__PURE__ */ jsx7("option", { value: "code", children: "Code block" })
2145
- ] }) }),
2146
- /* @__PURE__ */ jsx7(Field, { label: "Font", children: /* @__PURE__ */ jsxs5(
2147
- "select",
2148
- {
2149
- className: "june-doc__select june-doc__select--font",
2150
- "aria-label": "Font family",
2151
- disabled: off,
2152
- value: s?.fontFamily ?? "",
2153
- onChange: (e) => {
2154
- const v = e.target.value;
2155
- if (v) run()?.setFontFamily(v).run();
2156
- else run()?.unsetFontFamily().run();
2157
- },
2158
- children: [
2159
- FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx7("option", { value: f.value, style: { fontFamily: f.value || void 0 }, children: f.label }, f.label)),
2160
- !fontKnown && s?.fontFamily ? /* @__PURE__ */ jsx7("option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
2161
- ]
2162
- }
2163
- ) }),
2164
- /* @__PURE__ */ jsx7(Field, { label: "Size", children: /* @__PURE__ */ jsxs5(
2165
- "select",
2166
- {
2167
- className: "june-doc__select june-doc__select--size",
2168
- "aria-label": "Font size",
2169
- disabled: off,
2170
- value: s?.fontSize ?? "",
2171
- onChange: (e) => {
2172
- const v = e.target.value;
2173
- if (v) run()?.setFontSize(`${v}px`).run();
2174
- else run()?.unsetFontSize().run();
2175
- },
2176
- children: [
2177
- /* @__PURE__ */ jsx7("option", { value: "", children: "Auto" }),
2178
- sizes.map((n) => /* @__PURE__ */ jsx7("option", { value: String(n), children: n }, n))
2179
- ]
2180
- }
2181
- ) })
2182
- ] }),
2183
- /* @__PURE__ */ jsx7(Btn, { label: "Show formatting marks", icon: "pilcrow", toggle: true, active: showMarks, onClick: onToggleMarks, text: true, className: "june-doc__btn--marks", children: /* @__PURE__ */ jsx7("span", { children: "Paragraph" }) }),
2184
- /* @__PURE__ */ jsxs5(Group, { label: "Document", children: [
2185
- /* @__PURE__ */ jsx7(Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => run()?.setPageBreak().run() }),
2186
- /* @__PURE__ */ jsx7(Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => run()?.setHorizontalRule().run() }),
2187
- /* @__PURE__ */ jsx7(Btn, { label: layout === "page" ? "Switch to full-width layout" : "Switch to page layout", icon: "layout", toggle: true, active: layout === "fluid", onClick: onToggleLayout }),
2188
- /* @__PURE__ */ jsx7(Btn, { label: "Find and replace", icon: "search", toggle: true, active: findOpen, onClick: onToggleFind })
2189
- ] }),
2190
- /* @__PURE__ */ jsxs5(Group, { label: "Color", children: [
2191
- /* @__PURE__ */ jsx7(
2192
- ColorPicker,
2193
- {
2194
- label: "Text color",
2195
- icon: "palette",
2196
- colors: TEXT_COLORS,
2197
- current: s?.color ?? null,
2198
- disabled: off,
2199
- resetLabel: "Default color",
2200
- onPick: (c) => run()?.setColor(c).run(),
2201
- onReset: () => run()?.unsetColor().run()
2202
- }
2203
- ),
2204
- /* @__PURE__ */ jsx7(
2205
- ColorPicker,
2206
- {
2207
- label: "Highlight",
2208
- icon: "highlighter",
2209
- colors: HIGHLIGHT_COLORS,
2210
- current: s?.highlight ?? null,
2211
- disabled: off,
2212
- resetLabel: "No highlight",
2213
- onPick: (c) => run()?.setHighlight({ color: c }).run(),
2214
- onReset: () => run()?.unsetHighlight().run()
2215
- }
2216
- )
2217
- ] }),
2218
- /* @__PURE__ */ jsxs5(Group, { label: "Insert", children: [
2219
- editor ? /* @__PURE__ */ jsx7(
2220
- Dropdown,
2221
- {
2222
- trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Link", icon: "link", toggle: true, active: s?.link || open, disabled: off, onClick: toggle }),
2223
- children: (close) => /* @__PURE__ */ jsx7(LinkPanel, { editor, href: s?.linkHref ?? "", isLink: !!s?.link, close })
2224
- }
2225
- ) : null,
2226
- editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert image", icon: "image", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(ImagePanel, { editor, close, onNotice }) }) : null,
2227
- editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert table", icon: "table", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(TablePanel, { editor, close }) }) : null
2228
- ] }),
2229
- /* @__PURE__ */ jsx7(Group, { label: "Actions", children: /* @__PURE__ */ jsx7(Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => run()?.unsetAllMarks().clearNodes().run() }) })
2230
- ] }) : null,
2231
- s?.inTable ? /* @__PURE__ */ jsx7("div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ jsxs5(Group, { label: "Table", children: [
2232
- /* @__PURE__ */ jsx7(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+ Row" }),
2233
- /* @__PURE__ */ jsx7(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+ Column" }),
2234
- /* @__PURE__ */ jsx7(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212 Row" }),
2235
- /* @__PURE__ */ jsx7(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212 Column" }),
2236
- /* @__PURE__ */ jsx7(Btn, { label: "Merge cells", disabled: off || !s?.canMerge, onClick: () => run()?.mergeCells().run(), children: "Merge" }),
2237
- /* @__PURE__ */ jsx7(Btn, { label: "Split cell", disabled: off || !s?.canSplit, onClick: () => run()?.splitCell().run(), children: "Split" }),
2238
- /* @__PURE__ */ jsx7(Btn, { label: "Toggle header row", disabled: off, onClick: () => run()?.toggleHeaderRow().run(), children: "Header row" }),
2239
- /* @__PURE__ */ jsx7(Btn, { label: "Delete table", disabled: off, onClick: () => run()?.deleteTable().run(), className: "june-doc__btn--danger", children: "Delete table" })
2240
- ] }) }) : null
2241
- ] });
2242
- }
2243
-
2244
- // src/components/document-editor/document-bubble.tsx
2245
- import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
2246
- function DocumentBubbleMenu({ editor }) {
2247
- const s = useEditorState2({
2248
- editor,
2249
- selector: ({ editor: ed }) => ({
2250
- bold: ed.isActive("bold"),
2251
- italic: ed.isActive("italic"),
2252
- underline: ed.isActive("underline"),
2253
- strike: ed.isActive("strike"),
2254
- link: ed.isActive("link"),
2255
- linkHref: ed.getAttributes("link").href ?? "",
2256
- color: ed.getAttributes("textStyle").color ?? null,
2257
- highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null
2258
- })
2259
- });
2260
- const run = () => editor.chain().focus();
2261
- return /* @__PURE__ */ jsxs6(
2262
- BubbleMenu,
2263
- {
2264
- editor,
2265
- className: "june-doc__bubble",
2266
- options: { placement: "top", offset: 8 },
2267
- shouldShow: ({ editor: ed, state }) => {
2268
- const { empty } = state.selection;
2269
- if (empty || !ed.isEditable) return false;
2270
- if (ed.isActive("image") || ed.isActive("pageBreak") || ed.isActive("codeBlock")) return false;
2271
- return state.doc.textBetween(state.selection.from, state.selection.to).trim().length > 0;
2272
- },
2273
- children: [
2274
- /* @__PURE__ */ jsx8(Btn, { label: "Bold", icon: "bold", toggle: true, active: s.bold, onClick: () => run().toggleBold().run() }),
2275
- /* @__PURE__ */ jsx8(Btn, { label: "Italic", icon: "italic", toggle: true, active: s.italic, onClick: () => run().toggleItalic().run() }),
2276
- /* @__PURE__ */ jsx8(Btn, { label: "Underline", icon: "underline", toggle: true, active: s.underline, onClick: () => run().toggleUnderline().run() }),
2277
- /* @__PURE__ */ jsx8(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s.strike, onClick: () => run().toggleStrike().run() }),
2278
- /* @__PURE__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
2279
- /* @__PURE__ */ jsx8(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx8(Btn, { label: "Link", icon: "link", toggle: true, active: s.link || open, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx8(LinkPanel, { editor, href: s.linkHref, isLink: s.link, close }) }),
2280
- /* @__PURE__ */ jsx8(
2281
- ColorPicker,
2282
- {
2283
- label: "Text color",
2284
- icon: "palette",
2285
- colors: TEXT_COLORS,
2286
- current: s.color,
2287
- resetLabel: "Default color",
2288
- onPick: (c) => run().setColor(c).run(),
2289
- onReset: () => run().unsetColor().run()
2290
- }
2291
- ),
2292
- /* @__PURE__ */ jsx8(
2293
- ColorPicker,
2294
- {
2295
- label: "Highlight",
2296
- icon: "highlighter",
2297
- colors: HIGHLIGHT_COLORS,
2298
- current: s.highlight,
2299
- resetLabel: "No highlight",
2300
- onPick: (c) => run().setHighlight({ color: c }).run(),
2301
- onReset: () => run().unsetHighlight().run()
2302
- }
2303
- ),
2304
- /* @__PURE__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
2305
- /* @__PURE__ */ jsx8(Btn, { label: "Clear formatting", icon: "eraser", onClick: () => run().unsetAllMarks().run() })
2306
- ]
2307
- }
2308
- );
2309
- }
2310
-
2311
- // src/components/document-editor/document-content.tsx
2312
- import { EditorContent } from "@tiptap/react";
2313
- import { useEffect as useEffect4, useLayoutEffect, useRef as useRef5, useState as useState4 } from "react";
2314
- import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
2315
- var PAGE_WIDTH = 794;
2316
- var PAGE_HEIGHT = 1123;
2317
- var PAGE_GAP = 28;
2318
- var CANVAS_PAD_X = 24;
2319
- var useIsoLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
2320
- function geometry(width) {
2321
- const ratio = width / PAGE_WIDTH;
2322
- const height = Math.round(PAGE_HEIGHT * ratio);
2323
- const padX = Math.round(Math.min(96, Math.max(20, width * 0.12)));
2324
- const padY = Math.round(Math.min(96, Math.max(36, 96 * ratio)));
2325
- return { width, height, padX, padY };
2326
- }
2327
- function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false, onMetrics }) {
2328
- const canvas = useRef5(null);
2329
- const sheet = useRef5(null);
2330
- const [avail, setAvail] = useState4(PAGE_WIDTH);
2331
- const [sheetH, setSheetH] = useState4(0);
2332
- const [pages, setPages] = useState4(1);
2333
- const metricsRef = useRef5(onMetrics);
2334
- metricsRef.current = onMetrics;
2335
- const last = useRef5({ page: 0, pages: 0 });
2336
- const paged = layout === "page";
2337
- const width = paged ? Math.max(260, Math.min(PAGE_WIDTH, Math.floor(avail / zoom))) : Math.max(260, Math.floor(avail / zoom));
2338
- const g = geometry(width);
2339
- const stride = g.height + PAGE_GAP;
2340
- useIsoLayoutEffect(() => {
2341
- const c = canvas.current;
2342
- if (!c) return;
2343
- const read = () => {
2344
- const cs = typeof getComputedStyle === "function" ? getComputedStyle(c) : null;
2345
- const padX = cs ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : CANVAS_PAD_X * 2;
2346
- const w = c.clientWidth - padX;
2347
- if (w > 0) setAvail(w);
2348
- };
2349
- read();
2350
- if (typeof ResizeObserver === "undefined") return;
2351
- const ro = new ResizeObserver(read);
2352
- ro.observe(c);
2353
- return () => ro.disconnect();
2354
- }, []);
2355
- useEffect4(() => {
2356
- if (!editor) return;
2357
- setPaginationConfig(editor, {
2358
- enabled: paged,
2359
- pageHeight: g.height,
2360
- gap: PAGE_GAP,
2361
- padTop: g.padY,
2362
- padBottom: g.padY
2363
- });
2364
- }, [editor, paged, g.height, g.padY, width]);
2365
- useEffect4(() => {
2366
- const c = canvas.current;
2367
- const s = sheet.current;
2368
- if (!editor || !c || !s) return;
2369
- const prose = editor.view.dom;
2370
- const report = () => {
2371
- const total = paged ? getPageCount(editor) : 1;
2372
- setPages(total);
2373
- setSheetH(s.offsetHeight);
2374
- const cRect = c.getBoundingClientRect();
2375
- const sRect = s.getBoundingClientRect();
2376
- const y = (cRect.top + c.clientHeight * 0.35 - sRect.top) / zoom;
2377
- const page = paged ? Math.min(total, Math.max(1, Math.floor(y / stride) + 1)) : 1;
2378
- if (last.current.page !== page || last.current.pages !== total) {
2379
- last.current = { page, pages: total };
2380
- metricsRef.current?.({ page, pages: total });
2381
- }
2382
- };
2383
- report();
2384
- editor.on("transaction", report);
2385
- c.addEventListener("scroll", report, { passive: true });
2386
- const onLoad = () => remeasurePagination(editor);
2387
- prose.addEventListener("load", onLoad, true);
2388
- const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
2389
- ro?.observe(s);
2390
- return () => {
2391
- editor.off("transaction", report);
2392
- c.removeEventListener("scroll", report);
2393
- prose.removeEventListener("load", onLoad, true);
2394
- ro?.disconnect();
2395
- };
2396
- }, [editor, paged, zoom, stride]);
2397
- const minHeight = paged ? pages * g.height + (pages - 1) * PAGE_GAP : void 0;
2398
- const sheetStyle = {
2399
- width,
2400
- minHeight,
2401
- transform: zoom === 1 ? void 0 : `scale(${zoom})`,
2402
- "--jd-pad-x": `${g.padX}px`,
2403
- "--jd-pad-y": `${g.padY}px`
2404
- };
2405
- const zoomerStyle = {
2406
- width: width * zoom,
2407
- height: zoom === 1 ? void 0 : Math.max(sheetH, minHeight ?? 0) * zoom
2408
- };
2409
- return /* @__PURE__ */ jsx9("div", { ref: canvas, className: "june-doc__content june-doc__canvas", "data-layout": layout, "data-marks": showMarks || void 0, children: /* @__PURE__ */ jsx9("div", { className: "june-doc__zoomer", style: zoomerStyle, children: /* @__PURE__ */ jsxs7("div", { ref: sheet, className: "june-doc__sheet", style: sheetStyle, children: [
2410
- paged ? /* @__PURE__ */ jsx9("div", { className: "june-doc__pages", "aria-hidden": "true", children: Array.from({ length: pages }, (_, i) => /* @__PURE__ */ jsx9("div", { className: "june-doc__page", style: { top: i * stride, height: g.height }, children: /* @__PURE__ */ jsxs7("span", { className: "june-doc__page-num", children: [
2411
- i + 1,
2412
- " / ",
2413
- pages
2414
- ] }) }, i)) }) : null,
2415
- /* @__PURE__ */ jsx9(EditorContent, { editor })
2416
- ] }) }) });
2417
- }
2418
-
2419
- // src/components/document-editor/document-findbar.tsx
2420
- import { useEditorState as useEditorState3 } from "@tiptap/react";
2421
- import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
2422
- import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
2423
- function DocumentFindBar({ editor, editable, onClose, onNotice }) {
2424
- const [term, setTerm] = useState5(() => {
2425
- const { from, to, empty } = editor.state.selection;
2426
- return empty ? "" : editor.state.doc.textBetween(from, to, " ").slice(0, 100);
2427
- });
2428
- const [replacement, setReplacement] = useState5("");
2429
- const [caseSensitive, setCaseSensitive] = useState5(false);
2430
- const input = useRef6(null);
2431
- const info = useEditorState3({
2432
- editor,
2433
- selector: ({ editor: ed }) => {
2434
- const s = getSearchState(ed);
2435
- return { count: s?.matches.length ?? 0, current: s?.current ?? -1 };
2436
- }
2437
- });
2438
- useEffect5(() => {
2439
- input.current?.focus();
2440
- input.current?.select();
2441
- }, []);
2442
- useEffect5(() => {
2443
- setSearch(editor, { term, caseSensitive, current: 0 });
2444
- }, [editor, term, caseSensitive]);
2445
- useEffect5(() => () => {
2446
- if (!editor.isDestroyed) setSearch(editor, { term: "" });
2447
- }, [editor]);
2448
- const count = info?.count ?? 0;
2449
- const current = info?.current ?? -1;
2450
- return /* @__PURE__ */ jsxs8(
2451
- "div",
2452
- {
2453
- className: "june-doc__findbar",
2454
- role: "search",
2455
- onKeyDown: (e) => {
2456
- if (e.key === "Escape") {
2457
- e.stopPropagation();
2458
- onClose();
2459
- editor.commands.focus();
2460
- }
2461
- },
2462
- children: [
2463
- /* @__PURE__ */ jsxs8("div", { className: "june-doc__find-field", children: [
2464
- /* @__PURE__ */ jsx10(Icon, { name: "search", size: 14 }),
2465
- /* @__PURE__ */ jsx10(
2466
- "input",
2467
- {
2468
- ref: input,
2469
- className: "june-doc__find-input",
2470
- "aria-label": "Find in document",
2471
- placeholder: "Find in document",
2472
- value: term,
2473
- onChange: (e) => setTerm(e.target.value),
2474
- onKeyDown: (e) => {
2475
- if (e.key === "Enter") {
2476
- e.preventDefault();
2477
- gotoMatch(editor, e.shiftKey ? -1 : 1);
2478
- }
2479
- }
2480
- }
2481
- ),
2482
- /* @__PURE__ */ jsx10("span", { className: "june-doc__find-count", "aria-live": "polite", children: term ? count ? `${current + 1} of ${count}` : "No results" : "" })
2483
- ] }),
2484
- /* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Previous match", title: "Previous (Shift+Enter)", disabled: !count, onClick: () => gotoMatch(editor, -1), children: /* @__PURE__ */ jsx10(Icon, { name: "chevronUp" }) }),
2485
- /* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Next match", title: "Next (Enter)", disabled: !count, onClick: () => gotoMatch(editor, 1), children: /* @__PURE__ */ jsx10(Icon, { name: "chevronDown" }) }),
2486
- /* @__PURE__ */ jsx10(
2487
- "button",
2488
- {
2489
- type: "button",
2490
- className: "june-doc__btn june-doc__btn--icon june-doc__btn--case",
2491
- "aria-label": "Match case",
2492
- title: "Match case",
2493
- "aria-pressed": caseSensitive,
2494
- "data-active": caseSensitive || void 0,
2495
- onClick: () => setCaseSensitive((v) => !v),
2496
- children: "Aa"
2497
- }
2498
- ),
2499
- editable ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
2500
- /* @__PURE__ */ jsx10("span", { className: "june-doc__find-sep", "aria-hidden": "true" }),
2501
- /* @__PURE__ */ jsx10(
2502
- "input",
2503
- {
2504
- className: "june-doc__input june-doc__replace-input",
2505
- "aria-label": "Replace with",
2506
- placeholder: "Replace with",
2507
- value: replacement,
2508
- onChange: (e) => setReplacement(e.target.value),
2509
- onKeyDown: (e) => {
2510
- if (e.key === "Enter") {
2511
- e.preventDefault();
2512
- replaceCurrent(editor, replacement);
2513
- }
2514
- }
2515
- }
2516
- ),
2517
- /* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn", disabled: !count, onClick: () => replaceCurrent(editor, replacement), children: "Replace" }),
2518
- /* @__PURE__ */ jsx10(
2519
- "button",
2520
- {
2521
- type: "button",
2522
- className: "june-doc__btn",
2523
- disabled: !count,
2524
- onClick: () => {
2525
- const n = replaceAll(editor, replacement);
2526
- onNotice(`Replaced ${n} ${n === 1 ? "match" : "matches"}`);
2527
- },
2528
- children: "Replace all"
2529
- }
2530
- )
2531
- ] }) : null,
2532
- /* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost june-doc__find-close", "aria-label": "Close find", onClick: onClose, children: /* @__PURE__ */ jsx10(Icon, { name: "close" }) })
2533
- ]
2534
- }
2535
- );
2536
- }
2537
-
2538
- // src/components/document-editor/document-title.tsx
2539
- import { jsx as jsx11 } from "react/jsx-runtime";
2540
- function DocumentTitle({ value, disabled, onChange }) {
2541
- return /* @__PURE__ */ jsx11(
2542
- "input",
2543
- {
2544
- className: "june-doc__title",
2545
- "aria-label": "Document title",
2546
- value,
2547
- disabled,
2548
- placeholder: "Untitled document",
2549
- onChange: (e) => onChange(e.target.value)
2550
- }
2551
- );
2552
- }
2553
-
2554
- // src/components/document-editor/document-header.tsx
2555
- import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
2556
- var FORMATS = {
2557
- docx: { label: "Word document", hint: ".docx", icon: "file" },
2558
- pdf: { label: "PDF", hint: "Print / Save as PDF", icon: "file" },
2559
- html: { label: "Web page", hint: ".html", icon: "code" },
2560
- markdown: { label: "Markdown", hint: ".md", icon: "file" },
2561
- txt: { label: "Plain text", hint: ".txt", icon: "file" }
2562
- };
2563
- function DocumentHeader(props) {
2564
- const { title, editable, isDraft, fullscreen, onToggleFullscreen, onTitle, exportFormats, canSave, showSave = canSave, saveState, onExport, onCopy, onSave } = props;
2565
- return /* @__PURE__ */ jsxs9("div", { className: "june-doc__header", children: [
2566
- fullscreen ? /* @__PURE__ */ jsx12("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Close full screen", title: "Close (Esc)", onClick: onToggleFullscreen, children: /* @__PURE__ */ jsx12(Icon, { name: "close", size: 18 }) }) : /* @__PURE__ */ jsx12("span", { className: "june-doc__doc-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(Icon, { name: "file", size: 16 }) }),
2567
- /* @__PURE__ */ jsx12(DocumentTitle, { value: title, disabled: !editable, onChange: onTitle }),
2568
- isDraft ? /* @__PURE__ */ jsxs9("span", { className: "june-doc__badge", children: [
2569
- /* @__PURE__ */ jsx12(Icon, { name: "sparkles", size: 12 }),
2570
- "AI draft"
2571
- ] }) : null,
2572
- /* @__PURE__ */ jsxs9("div", { className: "june-doc__header-actions", children: [
2573
- showSave ? /* @__PURE__ */ jsxs9(
2574
- "button",
2575
- {
2576
- type: "button",
2577
- className: "june-doc__btn june-doc__btn--outline june-doc__save",
2578
- "data-state": saveState,
2579
- "aria-label": "Save",
2580
- title: "Save (Ctrl+S)",
2581
- disabled: saveState === "saving" || saveState === "saved" || saveState === "idle",
2582
- onClick: onSave,
2583
- children: [
2584
- /* @__PURE__ */ jsx12(Icon, { name: saveState === "saved" ? "check" : "save" }),
2585
- /* @__PURE__ */ jsx12("span", { children: saveState === "saving" ? "Saving\u2026" : saveState === "saved" ? "Saved" : "Save" })
2586
- ]
2587
- }
2588
- ) : null,
2589
- /* @__PURE__ */ jsx12(
2590
- Dropdown,
2591
- {
2592
- align: "end",
2593
- className: "june-doc__menu",
2594
- trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs9(
2595
- "button",
2596
- {
2597
- type: "button",
2598
- className: "june-doc__btn june-doc__btn--solid",
2599
- "aria-label": "Download",
2600
- "aria-haspopup": "menu",
2601
- "aria-expanded": open,
2602
- onClick: toggle,
2603
- children: [
2604
- /* @__PURE__ */ jsx12("span", { children: "Download" }),
2605
- /* @__PURE__ */ jsx12(Icon, { name: "chevronDown", size: 14 })
2606
- ]
2607
- }
2608
- ),
2609
- children: (close) => /* @__PURE__ */ jsxs9("div", { role: "menu", "aria-label": "Download options", children: [
2610
- exportFormats.map((f) => {
2611
- const meta = FORMATS[f] ?? { label: f.toUpperCase(), hint: "", icon: "file" };
2612
- return /* @__PURE__ */ jsxs9(
2613
- "button",
2614
- {
2615
- type: "button",
2616
- role: "menuitem",
2617
- className: "june-doc__menu-item",
2618
- onClick: () => {
2619
- close();
2620
- onExport(f);
2621
- },
2622
- children: [
2623
- /* @__PURE__ */ jsx12(Icon, { name: meta.icon }),
2624
- /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: meta.label }),
2625
- /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-hint", children: meta.hint })
2626
- ]
2627
- },
2628
- f
2629
- );
2630
- }),
2631
- exportFormats.length ? /* @__PURE__ */ jsx12("div", { className: "june-doc__menu-sep", role: "separator" }) : null,
2632
- /* @__PURE__ */ jsxs9(
2633
- "button",
2634
- {
2635
- type: "button",
2636
- role: "menuitem",
2637
- className: "june-doc__menu-item",
2638
- "aria-label": "Copy document",
2639
- onClick: () => {
2640
- close();
2641
- onCopy();
2642
- },
2643
- children: [
2644
- /* @__PURE__ */ jsx12(Icon, { name: "copy" }),
2645
- /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: "Copy to clipboard" })
2646
- ]
2647
- }
2648
- )
2649
- ] })
2650
- }
2651
- ),
2652
- /* @__PURE__ */ jsx12(
2653
- "button",
2654
- {
2655
- type: "button",
2656
- className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost",
2657
- "aria-label": fullscreen ? "Exit full screen" : "Open full screen",
2658
- title: fullscreen ? "Exit full screen" : "Open full screen",
2659
- "aria-pressed": fullscreen,
2660
- onClick: onToggleFullscreen,
2661
- children: /* @__PURE__ */ jsx12(Icon, { name: "maximize" })
2662
- }
2663
- )
2664
- ] })
2665
- ] });
2666
- }
2667
-
2668
- // src/components/document-editor/document-export.ts
2669
- var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
2670
- var PRINT_CSS = 'body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:#111827;max-width:780px;margin:32px auto;padding:0 20px}h1,h2,h3{line-height:1.25}table{border-collapse:collapse;width:100%}th,td{border:1px solid #d1d5db;padding:6px 10px;text-align:left}blockquote{border-left:4px solid #d1d5db;margin:1em 0;padding-left:1em;color:#4b5563}pre,code{font-family:ui-monospace,Menlo,monospace;background:#f3f4f6}pre{padding:12px;overflow:auto}img{max-width:100%;height:auto}mark{padding:0 .1em;border-radius:2px}div[data-page-break]{break-after:page;page-break-after:always;height:0}@media screen{div[data-page-break]{border-top:1px dashed #d1d5db;margin:24px 0}}@media print{body{margin:0;max-width:none}}';
2671
- function buildHtmlDocument(title, bodyHtml) {
2672
- return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${escapeHtml(
2673
- title
2674
- )}</title><style>${PRINT_CSS}</style></head><body><h1>${escapeHtml(title)}</h1>${bodyHtml}</body></html>`;
2675
- }
2676
- var textResult = (text, filename, mimeType) => ({
2677
- filename,
2678
- mimeType,
2679
- text,
2680
- blob: new Blob([text], { type: `${mimeType};charset=utf-8` })
2681
- });
2682
- var exportHtml = async (ctx) => {
2683
- const { docToHtml: docToHtml2 } = await import("./document-engine-RKD5SLXR.js");
2684
- return textResult(
2685
- buildHtmlDocument(ctx.title, docToHtml2(ctx.json)),
2686
- `${ctx.basename}.html`,
2687
- "text/html"
2688
- );
2689
- };
2690
- var exportMarkdown = async (ctx) => {
2691
- const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
2692
- return textResult(
2693
- `# ${ctx.title}
2694
-
2695
- ${docToMarkdown2(ctx.json)}
2696
- `,
2697
- `${ctx.basename}.md`,
2698
- "text/markdown"
2699
- );
2700
- };
2701
- var exportTxt = async (ctx) => {
2702
- const { docToText } = await import("./document-engine-RKD5SLXR.js");
2703
- return textResult(`${ctx.title}
2704
-
2705
- ${docToText(ctx.json)}
2706
- `, `${ctx.basename}.txt`, "text/plain");
2707
- };
2708
- function toDocxColor(value) {
2709
- if (typeof value !== "string") return void 0;
2710
- const v = value.trim();
2711
- let m = /^#([0-9a-f]{3})$/i.exec(v);
2712
- if (m) return m[1].split("").map((c) => c + c).join("").toUpperCase();
2713
- m = /^#([0-9a-f]{6})$/i.exec(v);
2714
- if (m) return m[1].toUpperCase();
2715
- m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(v);
2716
- if (m) {
2717
- return [m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0")).join("").toUpperCase();
2718
- }
2719
- return void 0;
2720
- }
2721
- function toHalfPoints(value) {
2722
- if (typeof value !== "string") return void 0;
2723
- const m = /^([\d.]+)\s*(px|pt)?$/i.exec(value.trim());
2724
- if (!m) return void 0;
2725
- const n = Number(m[1]);
2726
- if (!Number.isFinite(n) || n <= 0) return void 0;
2727
- const pt = m[2]?.toLowerCase() === "pt" ? n : n * 0.75;
2728
- return Math.round(pt * 2);
2729
- }
2730
- function firstFontFamily(value) {
2731
- if (typeof value !== "string") return void 0;
2732
- const first = value.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
2733
- return first || void 0;
2734
- }
2735
- var ORDERED_REF = "june-ordered";
2736
- var DOCX_MIME = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
2737
- function runs(d, node, fmt) {
2738
- const out = [];
2739
- for (const child of node.content ?? []) {
2740
- if (child.type === "hardBreak") {
2741
- out.push(new d.TextRun({ break: 1 }));
2742
- continue;
2743
- }
2744
- if (child.type !== "text" || !child.text) continue;
2745
- const marks = child.marks ?? [];
2746
- const has = (type) => marks.some((m) => m.type === type);
2747
- const link = marks.find((m) => m.type === "link");
2748
- const style = marks.find((m) => m.type === "textStyle")?.attrs ?? {};
2749
- const highlight = marks.find((m) => m.type === "highlight");
2750
- const fill = highlight ? toDocxColor(highlight.attrs?.color) ?? "FFF59D" : void 0;
2751
- const run = new d.TextRun({
2752
- text: child.text,
2753
- bold: fmt.bold || has("bold") || void 0,
2754
- italics: has("italic") || void 0,
2755
- underline: has("underline") || link ? {} : void 0,
2756
- strike: has("strike") || void 0,
2757
- superScript: has("superscript") || void 0,
2758
- subScript: has("subscript") || void 0,
2759
- font: has("code") ? "Courier New" : firstFontFamily(style.fontFamily),
2760
- size: toHalfPoints(style.fontSize),
2761
- color: toDocxColor(style.color) ?? (link ? "0563C1" : void 0),
2762
- shading: fill ? { type: d.ShadingType.CLEAR, fill, color: "auto" } : void 0
2763
- });
2764
- const href = typeof link?.attrs?.href === "string" ? sanitizeHref(link.attrs.href) : null;
2765
- out.push(href ? new d.ExternalHyperlink({ link: href, children: [run] }) : run);
2766
- }
2767
- return out;
2768
- }
2769
- function paragraph(d, node, fmt, extra = {}) {
2770
- const align = node.attrs?.textAlign;
2771
- return new d.Paragraph({
2772
- children: runs(d, node, fmt),
2773
- alignment: align === "center" ? d.AlignmentType.CENTER : align === "right" ? d.AlignmentType.RIGHT : align === "justify" ? d.AlignmentType.JUSTIFIED : void 0,
2774
- indent: fmt.indent ? { left: fmt.indent } : void 0,
2775
- border: fmt.quote ? { left: { color: "9CA3AF", space: 8, style: d.BorderStyle.SINGLE, size: 12 } } : void 0,
2776
- spacing: { after: 120 },
2777
- ...extra
2778
- });
2779
- }
2780
- function list(d, node, fmt, level, state) {
2781
- const ordered = node.type === "orderedList";
2782
- const instance = ordered ? ++state.instance : 0;
2783
- const out = [];
2784
- for (const item of node.content ?? []) {
2785
- let first = true;
2786
- for (const child of item.content ?? []) {
2787
- if (child.type === "bulletList" || child.type === "orderedList") {
2788
- out.push(...list(d, child, fmt, level + 1, state));
2789
- } else if (child.type === "paragraph" && first) {
2790
- first = false;
2791
- const lvl = Math.min(level, 2);
2792
- out.push(
2793
- paragraph(
2794
- d,
2795
- child,
2796
- fmt,
2797
- ordered ? { numbering: { reference: ORDERED_REF, level: lvl, instance } } : { bullet: { level: lvl } }
2798
- )
2799
- );
2800
- } else {
2801
- out.push(...blocks(d, [child], { ...fmt, indent: (fmt.indent ?? 0) + 720 * (level + 1) }, state));
2802
- }
2803
- }
2804
- }
2805
- return out;
2806
- }
2807
- function code(d, node) {
2808
- const lines = (node.content ?? []).map((c) => c.text ?? "").join("").split("\n");
2809
- return new d.Paragraph({
2810
- children: lines.map((line, i) => new d.TextRun({ text: line, font: "Courier New", break: i ? 1 : void 0 })),
2811
- spacing: { after: 120 },
2812
- shading: { type: d.ShadingType.CLEAR, fill: "F3F4F6" }
2813
- });
2814
- }
2815
- function table(d, node, state) {
2816
- const rows = (node.content ?? []).map(
2817
- (row) => new d.TableRow({
2818
- children: (row.content ?? []).map((cell) => {
2819
- const header = cell.type === "tableHeader";
2820
- const children = blocks(d, cell.content, { bold: header }, state);
2821
- return new d.TableCell({
2822
- children: children.length ? children : [new d.Paragraph("")],
2823
- shading: header ? { type: d.ShadingType.CLEAR, fill: "F3F4F6" } : void 0
2824
- });
2825
- })
2826
- })
2827
- );
2828
- if (rows.length === 0) return new d.Paragraph("");
2829
- return new d.Table({ rows, width: { size: 100, type: d.WidthType.PERCENTAGE } });
2830
- }
2831
- function image(d, node, state) {
2832
- const src = typeof node.attrs?.src === "string" ? node.attrs.src : "";
2833
- const alt = typeof node.attrs?.alt === "string" ? node.attrs.alt : "";
2834
- const img = state.images.get(src);
2835
- if (img) {
2836
- return [
2837
- new d.Paragraph({
2838
- children: [
2839
- new d.ImageRun({
2840
- type: img.type,
2841
- data: img.data,
2842
- transformation: { width: img.width, height: img.height },
2843
- altText: alt ? { name: alt, description: alt, title: alt } : void 0
2844
- })
2845
- ],
2846
- spacing: { after: 120 }
2847
- })
2848
- ];
2849
- }
2850
- const href = src && !src.startsWith("data:") ? sanitizeHref(src) : null;
2851
- if (!href) return [];
2852
- return [
2853
- new d.Paragraph({
2854
- children: [
2855
- new d.ExternalHyperlink({
2856
- link: href,
2857
- children: [new d.TextRun({ text: alt || href, color: "0563C1", underline: {} })]
2858
- })
2859
- ]
2860
- })
2861
- ];
2862
- }
2863
- function collectImages(nodes, out) {
2864
- for (const node of nodes ?? []) {
2865
- const src = node.attrs?.src;
2866
- if (node.type === "image" && typeof src === "string" && src && !out.has(src)) out.set(src, node.attrs);
2867
- if (node.content) collectImages(node.content, out);
2868
- }
2869
- return out;
2870
- }
2871
- var IMAGE_TYPES = {
2872
- "image/png": "png",
2873
- "image/jpeg": "jpg",
2874
- "image/jpg": "jpg",
2875
- "image/gif": "gif",
2876
- "image/bmp": "bmp"
2877
- };
2878
- var MAX_IMAGE_WIDTH = 600;
2879
- function naturalSize(blob) {
2880
- const fallback = { width: 400, height: 300 };
2881
- return new Promise((resolve) => {
2882
- if (typeof Image === "undefined" || typeof URL.createObjectURL !== "function") return resolve(fallback);
2883
- const url = URL.createObjectURL(blob);
2884
- const img = new Image();
2885
- const done = (size) => {
2886
- URL.revokeObjectURL(url);
2887
- resolve(size);
2888
- };
2889
- img.onload = () => done({ width: img.naturalWidth || 400, height: img.naturalHeight || 300 });
2890
- img.onerror = () => done(fallback);
2891
- img.src = url;
2892
- });
2893
- }
2894
- async function loadImage(src, attrs) {
2895
- try {
2896
- const res = await fetch(src);
2897
- if (!res.ok) return null;
2898
- const blob = await res.blob();
2899
- const type = IMAGE_TYPES[blob.type.toLowerCase()];
2900
- if (!type) return null;
2901
- const natural = await naturalSize(blob);
2902
- let width = Number(attrs?.width) || natural.width;
2903
- let height = Number(attrs?.height) || natural.height * width / natural.width;
2904
- if (width > MAX_IMAGE_WIDTH) {
2905
- height = height * MAX_IMAGE_WIDTH / width;
2906
- width = MAX_IMAGE_WIDTH;
2907
- }
2908
- return { data: new Uint8Array(await blob.arrayBuffer()), type, width: Math.round(width), height: Math.round(height) };
2909
- } catch {
2910
- return null;
2911
- }
2912
- }
2913
- async function resolveImages(doc) {
2914
- const map = /* @__PURE__ */ new Map();
2915
- if (typeof fetch !== "function") return map;
2916
- const found = collectImages(doc.content, /* @__PURE__ */ new Map());
2917
- await Promise.all(
2918
- [...found].map(async ([src, attrs]) => {
2919
- const info = await loadImage(src, attrs);
2920
- if (info) map.set(src, info);
2921
- })
2922
- );
2923
- return map;
2924
- }
2925
- function blocks(d, nodes, fmt, state) {
2926
- const headings = [d.HeadingLevel.HEADING_1, d.HeadingLevel.HEADING_2, d.HeadingLevel.HEADING_3];
2927
- const out = [];
2928
- for (const node of nodes ?? []) {
2929
- switch (node.type) {
2930
- case "paragraph":
2931
- out.push(paragraph(d, node, fmt));
2932
- break;
2933
- case "heading": {
2934
- const level = Math.min(Math.max(Number(node.attrs?.level) || 1, 1), 3);
2935
- out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
2936
- break;
2937
- }
2938
- case "bulletList":
2939
- case "orderedList":
2940
- out.push(...list(d, node, fmt, 0, state));
2941
- break;
2942
- case "blockquote":
2943
- out.push(...blocks(d, node.content, { ...fmt, quote: true, indent: (fmt.indent ?? 0) + 360 }, state));
2944
- break;
2945
- case "codeBlock":
2946
- out.push(code(d, node));
2947
- break;
2948
- case "horizontalRule":
2949
- out.push(
2950
- new d.Paragraph({
2951
- border: { bottom: { color: "9CA3AF", space: 1, style: d.BorderStyle.SINGLE, size: 6 } },
2952
- spacing: { after: 120 }
2953
- })
2954
- );
2955
- break;
2956
- case "table":
2957
- out.push(table(d, node, state));
2958
- break;
2959
- case "pageBreak":
2960
- out.push(new d.Paragraph({ children: [new d.PageBreak()] }));
2961
- break;
2962
- case "image":
2963
- out.push(...image(d, node, state));
2964
- break;
2965
- default:
2966
- if (node.content) out.push(...blocks(d, node.content, fmt, state));
2967
- }
2968
- }
2969
- return out;
2970
- }
2971
- var exportDocx = async (ctx) => {
2972
- const d = await import("docx");
2973
- const state = { instance: 0, images: await resolveImages(ctx.json) };
2974
- const children = [
2975
- new d.Paragraph({ text: ctx.title, heading: d.HeadingLevel.TITLE }),
2976
- ...blocks(d, ctx.json.content, {}, state)
2977
- ];
2978
- const doc = new d.Document({
2979
- title: ctx.title,
2980
- numbering: {
2981
- config: [
2982
- {
2983
- reference: ORDERED_REF,
2984
- levels: [0, 1, 2].map((level) => ({
2985
- level,
2986
- format: d.LevelFormat.DECIMAL,
2987
- text: `%${level + 1}.`,
2988
- alignment: d.AlignmentType.START,
2989
- style: { paragraph: { indent: { left: 720 * (level + 1), hanging: 360 } } }
2990
- }))
2991
- }
2992
- ]
2993
- },
2994
- sections: [{ children }]
2995
- });
2996
- const blob = await d.Packer.toBlob(doc);
2997
- return { filename: `${ctx.basename}.docx`, mimeType: DOCX_MIME, blob };
2998
- };
2999
- function printHtml(html) {
3000
- return new Promise((resolve, reject) => {
3001
- const frame = document.createElement("iframe");
3002
- frame.setAttribute("aria-hidden", "true");
3003
- frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
3004
- const cleanup = () => setTimeout(() => frame.remove(), 500);
3005
- frame.onload = () => {
3006
- try {
3007
- const win = frame.contentWindow;
3008
- if (!win) throw new Error("The print frame is unavailable");
3009
- win.addEventListener("afterprint", cleanup);
3010
- win.focus();
3011
- win.print();
3012
- setTimeout(cleanup, 12e4);
3013
- resolve();
3014
- } catch (error) {
3015
- cleanup();
3016
- reject(error);
3017
- }
3018
- };
3019
- frame.srcdoc = html;
3020
- document.body.appendChild(frame);
3021
- });
3022
- }
3023
- var exportPdf = async (ctx) => {
3024
- const { docToHtml: docToHtml2 } = await import("./document-engine-RKD5SLXR.js");
3025
- await printHtml(buildHtmlDocument(ctx.title, docToHtml2(ctx.json)));
3026
- return { filename: `${ctx.basename}.pdf`, mimeType: "application/pdf", handled: true };
3027
- };
3028
- var registry = /* @__PURE__ */ new Map([
3029
- ["html", exportHtml],
3030
- ["markdown", exportMarkdown],
3031
- ["txt", exportTxt],
3032
- ["docx", exportDocx],
3033
- ["pdf", exportPdf]
3034
- ]);
3035
- function registerDocumentExporter(format, exporter) {
3036
- registry.set(format, exporter);
3037
- }
3038
- function listDocumentExporters() {
3039
- return [...registry.keys()];
3040
- }
3041
- async function exportDocument(format, doc) {
3042
- const exporter = registry.get(format);
3043
- if (!exporter) throw new JuneError("EXPORT_ERROR", `No exporter is registered for "${format}"`);
3044
- try {
3045
- return await exporter({ ...doc, basename: slugify(doc.title) || "document" });
3046
- } catch (error) {
3047
- throw toJuneError(error, "EXPORT_ERROR", `Exporting ${format} failed`);
3048
- }
3049
- }
3050
- function downloadResult(result) {
3051
- if (!result.blob) return;
3052
- const url = URL.createObjectURL(result.blob);
3053
- const link = document.createElement("a");
3054
- link.href = url;
3055
- link.download = result.filename;
3056
- document.body.appendChild(link);
3057
- link.click();
3058
- link.remove();
3059
- setTimeout(() => URL.revokeObjectURL(url), 1e3);
3060
- }
3061
- async function copyDocumentToClipboard(doc) {
3062
- const { docToHtml: docToHtml2, docToText } = await import("./document-engine-RKD5SLXR.js");
3063
- const html = docToHtml2(doc.json);
3064
- const text = `${doc.title}
3065
-
3066
- ${docToText(doc.json)}`;
3067
- try {
3068
- if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
3069
- await navigator.clipboard.write([
3070
- new ClipboardItem({
3071
- "text/html": new Blob([html], { type: "text/html" }),
3072
- "text/plain": new Blob([text], { type: "text/plain" })
3073
- })
3074
- ]);
3075
- return true;
3076
- }
3077
- await navigator.clipboard.writeText(text);
3078
- return true;
3079
- } catch {
3080
- return false;
3081
- }
3082
- }
3083
-
3084
- // src/components/document-editor/document-types.ts
3085
- var ALL_EXPORT_FORMATS = [
3086
- "html",
3087
- "markdown",
3088
- "txt",
3089
- "docx",
3090
- "pdf"
3091
- ];
3092
-
3093
- // src/components/document-editor/document-editor.tsx
3094
- import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
3095
- var snapshotOf = (r) => ({
3096
- documentId: r.id,
3097
- title: r.title,
3098
- documentType: r.documentType,
3099
- status: r.status,
3100
- json: r.json
3101
- });
3102
- var SAVE_LABEL = {
3103
- idle: "",
3104
- dirty: "Unsaved changes",
3105
- saving: "Saving\u2026",
3106
- saved: "Saved",
3107
- error: "Save failed"
3108
- };
3109
- var ZOOM_STEPS = [0.5, 0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
3110
- var stepZoom = (z2, dir) => dir > 0 ? ZOOM_STEPS.find((s) => s > z2 + 1e-3) ?? z2 : [...ZOOM_STEPS].reverse().find((s) => s < z2 - 1e-3) ?? z2;
3111
- function DocumentEditorImpl(props) {
3112
- const {
3113
- documentId,
3114
- title: titleProp = "Untitled document",
3115
- content,
3116
- documentType,
3117
- status = "draft",
3118
- editable = true,
3119
- exportFormats,
3120
- theme = "auto",
3121
- className
3122
- } = props;
3123
- const ctxOptions = useDocumentOptions();
3124
- const options = useMemo4(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
3125
- const optionsRef = useRef7(options);
3126
- optionsRef.current = options;
3127
- const store = useMemo4(() => options.store ?? getDefaultDocumentStore(), [options.store]);
3128
- const instanceId = useId();
3129
- const { theme: contextTheme } = useJuneTheme();
3130
- const resolvedTheme = theme === "auto" ? contextTheme : theme;
3131
- const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
3132
- const parsed = useMemo4(() => {
3133
- if (!contentKey) return { json: null, error: null };
3134
- try {
3135
- return { json: parseDocumentContent(contentKey), error: null };
3136
- } catch (e) {
3137
- return { json: null, error: toJuneError(e, "DOCUMENT_ERROR") };
3138
- }
3139
- }, [contentKey]);
3140
- useEffect6(() => {
3141
- if (parsed.error) optionsRef.current.onError?.(parsed.error);
3142
- }, [parsed.error]);
3143
- const title = useDocumentValue(store, documentId, (r) => r?.title ?? titleProp);
3144
- const pending = useDocumentValue(store, documentId, (r) => r?.pending ?? null);
3145
- const words = useDocumentValue(store, documentId, (r) => r ? wordCountOf(r.json) : 0);
3146
- const recordStatus = useDocumentValue(store, documentId, (r) => r?.status ?? status);
3147
- const [saveState, setSaveState] = useState6("idle");
3148
- const [notice, setNotice] = useState6(null);
3149
- const [fullscreen, setFullscreen] = useState6(false);
3150
- const [expanded, setExpanded] = useState6(true);
3151
- const [showMarks, setShowMarks] = useState6(false);
3152
- const [layout, setLayout] = useState6("page");
3153
- const [findOpen, setFindOpen] = useState6(false);
3154
- const [zoom, setZoom] = useState6(1);
3155
- const [metrics, setMetrics] = useState6({ page: 1, pages: 1 });
3156
- useEffect6(() => {
3157
- if (!fullscreen || typeof document === "undefined") return;
3158
- const prev = document.body.style.overflow;
3159
- document.body.style.overflow = "hidden";
3160
- return () => {
3161
- document.body.style.overflow = prev;
3162
- };
3163
- }, [fullscreen]);
3164
- const lastSavedKey = useRef7("");
3165
- const seenRevision = useRef7(store.get(documentId)?.revision ?? 0);
3166
- const readyRef = useRef7(false);
3167
- const flash = useCallback3((message) => {
3168
- setNotice(message);
3169
- }, []);
3170
- useEffect6(() => {
3171
- if (!notice) return;
3172
- const t = setTimeout(() => setNotice(null), 3e3);
3173
- return () => clearTimeout(t);
3174
- }, [notice]);
3175
- const emitChange = useCallback3(
3176
- (source) => {
3177
- const record = store.get(documentId);
3178
- if (record) optionsRef.current.onDocumentChange?.({ ...snapshotOf(record), source });
3179
- },
3180
- [store, documentId]
3181
- );
3182
- const saveRef = useRef7(async () => {
3183
- });
3184
- const autosave = useMemo4(() => {
3185
- const delay = options.autosaveDelay ?? 1500;
3186
- return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
3187
- }, [options.autosaveDelay]);
3188
- useEffect6(() => () => autosave?.flush(), [autosave]);
3189
- saveRef.current = async () => {
3190
- const record = store.get(documentId);
3191
- const onSave = optionsRef.current.onSave;
3192
- if (!record) return;
3193
- const key = JSON.stringify([record.title, docKey(record.json)]);
3194
- if (!onSave) {
3195
- lastSavedKey.current = key;
3196
- setSaveState("saved");
3197
- return;
3198
- }
3199
- if (key === lastSavedKey.current) {
3200
- setSaveState("saved");
3201
- return;
3202
- }
3203
- setSaveState("saving");
3204
- try {
3205
- await onSave({
3206
- ...snapshotOf(record),
3207
- html: docToHtml(record.json),
3208
- markdown: docToMarkdown(record.json)
3209
- });
3210
- lastSavedKey.current = key;
3211
- const latest = store.get(documentId);
3212
- const latestKey = latest ? JSON.stringify([latest.title, docKey(latest.json)]) : key;
3213
- setSaveState(latestKey === key ? "saved" : "dirty");
3214
- } catch (error) {
3215
- setSaveState("error");
3216
- optionsRef.current.onError?.(toJuneError(error, "DOCUMENT_ERROR", "Saving the document failed"));
3217
- }
3218
- };
3219
- const markDirty = useCallback3(
3220
- (userEdit = true) => {
3221
- if (!optionsRef.current.onSave) {
3222
- if (userEdit) setSaveState("dirty");
3223
- return;
3224
- }
3225
- setSaveState("dirty");
3226
- autosave?.();
3227
- },
3228
- [autosave]
3229
- );
3230
- useEffect6(() => {
3231
- if (saveState !== "saved" || options.onSave) return;
3232
- const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
3233
- return () => clearTimeout(t);
3234
- }, [saveState, options.onSave]);
3235
- const [initialJson] = useState6(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
3236
- const extensions = useMemo4(() => createDocumentExtensions(), []);
3237
- const onUpdateRef = useRef7(() => {
3238
- });
3239
- onUpdateRef.current = (json) => {
3240
- store.edit(documentId, json, instanceId);
3241
- emitChange("user");
3242
- markDirty();
3243
- };
3244
- const editor = useEditor({
3245
- extensions,
3246
- content: initialJson,
3247
- editable,
3248
- immediatelyRender: false,
3249
- editorProps: {
3250
- attributes: {
3251
- class: "june-doc__prose",
3252
- role: "textbox",
3253
- "aria-multiline": "true",
3254
- "aria-label": "Document content"
3255
- }
3256
- },
3257
- onUpdate: ({ editor: ed }) => onUpdateRef.current(ed.getJSON())
3258
- });
3259
- useEffect6(() => {
3260
- if (!editor || editor.isEditable === editable) return;
3261
- editor.setEditable(editable);
3262
- }, [editor, editable]);
3263
- useEffect6(() => {
3264
- if (!parsed.json) return;
3265
- if (isDocumentEcho(store, documentId, contentKey)) return;
3266
- const outcome = store.receive({
3267
- id: documentId,
3268
- title: titleProp,
3269
- json: parsed.json,
3270
- documentType,
3271
- status
3272
- });
3273
- if (outcome === "applied" || outcome === "merged") {
3274
- emitChange(outcome === "applied" ? "ai" : "merge");
3275
- markDirty(false);
3276
- } else if (outcome === "conflict") {
3277
- const record = store.get(documentId);
3278
- optionsRef.current.onConflict?.({
3279
- documentId,
3280
- title: record?.title ?? titleProp,
3281
- conflicts: record?.pending?.conflicts ?? 1
3282
- });
3283
- }
3284
- }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
3285
- useEffect6(() => {
3286
- if (!editor) return;
3287
- const apply = () => {
3288
- const record = store.get(documentId);
3289
- if (!record || record.revision === seenRevision.current) return;
3290
- seenRevision.current = record.revision;
3291
- if (record.origin === instanceId) return;
3292
- const { from, to } = editor.state.selection;
3293
- editor.commands.setContent(record.json, { emitUpdate: false });
3294
- if (editor.isFocused) {
3295
- const size = editor.state.doc.content.size;
3296
- editor.commands.setTextSelection({ from: Math.min(from, size), to: Math.min(to, size) });
3297
- }
3298
- };
3299
- apply();
3300
- return store.subscribe(apply);
3301
- }, [editor, store, documentId, instanceId]);
3302
- useEffect6(() => {
3303
- if (!editor || readyRef.current) return;
3304
- const record = store.get(documentId);
3305
- if (!record) return;
3306
- readyRef.current = true;
3307
- lastSavedKey.current = JSON.stringify([record.title, docKey(record.json)]);
3308
- optionsRef.current.onDocumentReady?.(snapshotOf(record));
3309
- }, [editor, store, documentId, title]);
3310
- const handleTitle = (value) => {
3311
- store.setTitle(documentId, value);
3312
- emitChange("user");
3313
- markDirty();
3314
- };
3315
- const resolve = (choice) => {
3316
- store.resolve(documentId, choice);
3317
- if (choice !== "keep") {
3318
- emitChange(choice === "merge" ? "merge" : "resolve");
3319
- markDirty();
3320
- }
3321
- };
3322
- const handleExport = async (format) => {
3323
- const record = store.get(documentId);
3324
- if (!record) return;
3325
- try {
3326
- const result = await exportDocument(format, {
3327
- documentId,
3328
- title: record.title,
3329
- json: record.json
3330
- // always the latest editor content
3331
- });
3332
- if (result.blob) downloadResult(result);
3333
- optionsRef.current.onExport?.({ documentId, format, ...result });
3334
- } catch (error) {
3335
- optionsRef.current.onError?.(toJuneError(error, "EXPORT_ERROR"));
3336
- flash("Export failed");
3337
- }
3338
- };
3339
- const handleCopy = async () => {
3340
- const record = store.get(documentId);
3341
- if (!record) return;
3342
- flash(await copyDocumentToClipboard({ title: record.title, json: record.json }) ? "Copied" : "Copy failed");
3343
- };
3344
- const formats = (exportFormats ?? [...ALL_EXPORT_FORMATS]).filter((f) => listDocumentExporters().includes(f));
3345
- if (parsed.error && !store.get(documentId)) {
3346
- return /* @__PURE__ */ jsxs10("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
3347
- /* @__PURE__ */ jsx13("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
3348
- /* @__PURE__ */ jsxs10("details", { children: [
3349
- /* @__PURE__ */ jsx13("summary", { children: "Show raw content" }),
3350
- /* @__PURE__ */ jsx13("pre", { className: "june-doc__raw", children: contentKey })
3351
- ] })
3352
- ] });
3353
- }
3354
- if (!editor) return /* @__PURE__ */ jsx13(DocumentDraft, { title, state: "loading" });
3355
- const isDraft = recordStatus === "draft";
3356
- const classes = ["june-doc", fullscreen ? "june-doc--fullscreen" : "", className ?? ""].filter(Boolean).join(" ");
3357
- return /* @__PURE__ */ jsxs10(
3358
- "div",
3359
- {
3360
- className: classes,
3361
- "data-theme": resolvedTheme,
3362
- "data-status": recordStatus,
3363
- role: fullscreen ? "dialog" : void 0,
3364
- "aria-modal": fullscreen || void 0,
3365
- "aria-label": fullscreen ? title : void 0,
3366
- onKeyDown: (e) => {
3367
- const mod = e.ctrlKey || e.metaKey;
3368
- if (mod && e.key.toLowerCase() === "s" && options.onSave) {
3369
- e.preventDefault();
3370
- void saveRef.current();
3371
- } else if (mod && e.key.toLowerCase() === "f") {
3372
- e.preventDefault();
3373
- setFindOpen(true);
3374
- } else if (e.key === "Escape" && fullscreen && !e.defaultPrevented) {
3375
- setFullscreen(false);
3376
- }
3377
- },
3378
- children: [
3379
- /* @__PURE__ */ jsx13(
3380
- DocumentHeader,
3381
- {
3382
- title,
3383
- editable,
3384
- isDraft,
3385
- fullscreen,
3386
- onToggleFullscreen: () => setFullscreen((v) => !v),
3387
- onTitle: handleTitle,
3388
- exportFormats: formats,
3389
- canSave: !!options.onSave,
3390
- showSave: !!options.onSave || editable && saveState !== "idle",
3391
- saveState,
3392
- onExport: (f) => void handleExport(f),
3393
- onCopy: () => void handleCopy(),
3394
- onSave: () => void saveRef.current()
3395
- }
3396
- ),
3397
- pending ? /* @__PURE__ */ jsxs10("div", { className: "june-doc__banner", role: "status", children: [
3398
- /* @__PURE__ */ jsxs10("span", { children: [
3399
- "The assistant suggested changes that overlap your edits (",
3400
- pending.conflicts,
3401
- " ",
3402
- pending.conflicts === 1 ? "section" : "sections",
3403
- ")."
3404
- ] }),
3405
- /* @__PURE__ */ jsxs10("span", { className: "june-doc__banner-actions", children: [
3406
- /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
3407
- /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
3408
- /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
3409
- ] })
3410
- ] }) : null,
3411
- /* @__PURE__ */ jsx13(
3412
- DocumentToolbar,
3413
- {
3414
- editor,
3415
- editable,
3416
- expanded,
3417
- onToggleExpanded: () => setExpanded((v) => !v),
3418
- showMarks,
3419
- onToggleMarks: () => setShowMarks((v) => !v),
3420
- layout,
3421
- onToggleLayout: () => setLayout((v) => v === "page" ? "fluid" : "page"),
3422
- findOpen,
3423
- onToggleFind: () => setFindOpen((v) => !v),
3424
- onNotice: flash
3425
- }
3426
- ),
3427
- findOpen ? /* @__PURE__ */ jsx13(DocumentFindBar, { editor, editable, onClose: () => setFindOpen(false), onNotice: flash }) : null,
3428
- editable ? /* @__PURE__ */ jsx13(DocumentBubbleMenu, { editor }) : null,
3429
- /* @__PURE__ */ jsx13(DocumentContent, { editor, layout, zoom, showMarks, onMetrics: setMetrics }),
3430
- /* @__PURE__ */ jsxs10("div", { className: "june-doc__footer", children: [
3431
- /* @__PURE__ */ jsxs10("div", { className: "june-doc__stats", children: [
3432
- layout === "page" ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
3433
- /* @__PURE__ */ jsxs10("span", { children: [
3434
- "Page ",
3435
- metrics.page,
3436
- " of ",
3437
- metrics.pages
3438
- ] }),
3439
- /* @__PURE__ */ jsx13("span", { className: "june-doc__stats-sep", "aria-hidden": "true" })
3440
- ] }) : null,
3441
- /* @__PURE__ */ jsxs10("span", { children: [
3442
- words,
3443
- " words"
3444
- ] })
3445
- ] }),
3446
- /* @__PURE__ */ jsx13("span", { className: "june-doc__status", "aria-live": "polite", "data-state": notice ? "notice" : saveState, children: notice ?? SAVE_LABEL[saveState] }),
3447
- /* @__PURE__ */ jsxs10("div", { className: "june-doc__zoom", role: "group", "aria-label": "Zoom", children: [
3448
- /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom out", disabled: zoom <= ZOOM_STEPS[0], onClick: () => setZoom(stepZoom(zoom, -1)), children: /* @__PURE__ */ jsx13(Icon, { name: "minus", size: 14 }) }),
3449
- /* @__PURE__ */ jsxs10("button", { type: "button", className: "june-doc__zoom-value", "aria-label": "Reset zoom", title: "Reset zoom", onClick: () => setZoom(1), children: [
3450
- Math.round(zoom * 100),
3451
- "%"
3452
- ] }),
3453
- /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom in", disabled: zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1], onClick: () => setZoom(stepZoom(zoom, 1)), children: /* @__PURE__ */ jsx13(Icon, { name: "plus", size: 14 }) })
3454
- ] })
3455
- ] })
3456
- ]
3457
- }
3458
- );
3459
- }
3460
-
3461
- // src/components/document-editor/document-component.tsx
3462
- import { jsx as jsx14 } from "react/jsx-runtime";
3463
- var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
3464
- var documentProps = z.object({
3465
- documentId: z.string().describe("Stable id. Reuse it when revising the same document."),
3466
- title: z.string().describe("Document title. Do not repeat it as a heading in content."),
3467
- content: z.string().describe("The whole document body as Markdown."),
3468
- documentType: z.string().optional().describe("Kind of document, such as proposal, contract or invoice."),
3469
- status: z.string().optional().describe('Use "draft" for generated documents.'),
3470
- editable: z.boolean().optional().describe("Whether the user can edit. Defaults to true."),
3471
- exportFormats: z.array(z.string()).optional().describe("Export formats to offer, such as html, markdown, docx.")
3472
- });
3473
- function DocumentEditor(props) {
3474
- const { isStreaming } = useJuneRuntime();
3475
- if (props.generating || isStreaming) {
3476
- return /* @__PURE__ */ jsx14(DocumentDraft, { title: props.title, state: "drafting" });
3477
- }
3478
- return /* @__PURE__ */ jsx14(DocumentEditorImpl, { ...props });
3479
- }
3480
- function OpenUIDocument({ props }) {
3481
- return /* @__PURE__ */ jsx14(
3482
- DocumentEditor,
3483
- {
3484
- documentId: props.documentId,
3485
- title: props.title,
3486
- content: props.content,
3487
- documentType: props.documentType,
3488
- status: props.status,
3489
- editable: props.editable,
3490
- exportFormats: props.exportFormats
3491
- }
3492
- );
3493
- }
3494
- var JuneDocumentEditorComponent = defineComponent2({
3495
- name: "DocumentEditor",
3496
- description: DOCUMENT_COMPONENT_DESCRIPTION,
3497
- props: documentProps,
3498
- component: OpenUIDocument
3499
- });
3500
- function withDocumentEditor(library) {
3501
- try {
3502
- return library.extend({
3503
- components: {
3504
- add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
3505
- }
3506
- });
3507
- } catch {
3508
- return library.extend({ components: { add: [JuneDocumentEditorComponent] } });
3509
- }
3510
- }
3511
-
3512
- // src/components/document-editor/document-instructions.ts
3513
- var DEFAULT_TYPES = [
3514
- "proposal",
3515
- "report",
3516
- "email",
3517
- "letter",
3518
- "invoice",
3519
- "contract",
3520
- "NDA",
3521
- "memo",
3522
- "meeting notes"
3523
- ];
3524
- function getDocumentEditorRules(options = {}) {
3525
- const name = options.componentName ?? "DocumentEditor";
3526
- const types = (options.documentTypes ?? DEFAULT_TYPES).join(", ");
3527
- return [
3528
- `WHEN TO USE ${name}: use it only when the user asks you to create, draft, write, prepare, generate or revise an editable document (${types}, or similar). Put the finished document inside ${name}.`,
3529
- `WHEN NOT TO USE ${name}: for explanations ("explain what an NDA is"), factual answers, comparisons, brainstorming and general questions, answer with normal text and the other components. Never open ${name} for those.`,
3530
- `${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables.`,
3531
- `Do not repeat the title as a heading inside "content"; the title is shown separately. Structure the document with headings, short paragraphs and tables where useful. Keep a professional tone.`,
3532
- `EDITING: when the user asks to change an existing document (add a section, rewrite a part, change the title), write ${name} again with the SAME documentId and the COMPLETE updated content, starting from the current document text you were given. Copy every unchanged section exactly as it was. Change only what was requested. The app merges your version with the user's own edits.`,
3533
- `If the user asks for a document but leaves out details, write the document anyway and use clear placeholders such as [CLIENT NAME], [DATE], [AMOUNT]. Do not stop to ask unless the request is impossible to interpret.`,
3534
- `Never invent legal, financial or business facts, prices, dates, names or figures. Use placeholders instead. Set status to "draft" for generated documents, and for legal or financial documents say in one short sentence outside the component that the document is a draft that should be reviewed by a professional.`,
3535
- `You may add one short sentence before or after the component. Do not repeat the document text outside the component.`,
3536
- ...options.extraRules ?? []
3537
- ];
3538
- }
3539
- function getDocumentEditorInstructions(options = {}) {
3540
- const rules = getDocumentEditorRules(options);
3541
- return ["Document drafting:", ...rules.map((rule, i) => `${i + 1}. ${rule}`)].join("\n");
3542
- }
3543
- var EXAMPLE_NEW = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |", "proposal", "draft")';
3544
- var EXAMPLE_EDIT = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |\\n| Delivery | [AMOUNT] |", "proposal", "draft")';
3545
- function documentPromptOptions(options = {}) {
3546
- return {
3547
- additionalRules: getDocumentEditorRules(options),
3548
- examples: [EXAMPLE_NEW, EXAMPLE_EDIT]
3549
- };
3550
- }
3551
-
3552
- // src/components/document-editor/document-agent.ts
3553
- var attr = (value) => value.replace(/"/g, "&quot;");
3554
- async function serializeDocumentsForAgent(options = {}) {
3555
- const store = options.store ?? getDefaultDocumentStore();
3556
- const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
3557
- return store.list().filter((r) => !options.ids || options.ids.includes(r.id)).map(
3558
- (r) => `<document id="${attr(r.id)}" title="${attr(r.title)}"${r.documentType ? ` type="${attr(r.documentType)}"` : ""}>
3559
- ${docToMarkdown2(r.json)}
3560
- </document>`
3561
- ).join("\n\n");
3562
- }
3563
-
3564
- // src/components/june-library.ts
3565
- import { openuiLibrary } from "@openuidev/react-ui";
3566
- var juneLibrary = withDocumentEditor(openuiLibrary);
3567
-
3568
- // src/core/JuneUI.tsx
3569
- import { jsx as jsx15 } from "react/jsx-runtime";
3570
- function JuneUI({ library = juneLibrary, ...props }) {
3571
- return /* @__PURE__ */ jsx15(JuneRenderer, { library, ...props });
142
+ return Object.freeze(instance);
3572
143
  }
3573
144
  export {
3574
145
  ALL_EXPORT_FORMATS,
146
+ ComponentRegistry,
147
+ DOCUMENT_COMPONENT_DESCRIPTION,
148
+ DocumentBridge,
3575
149
  DocumentEditor,
3576
150
  JuneDocumentContext,
3577
151
  JuneDocumentEditorComponent,
@@ -3581,13 +155,24 @@ export {
3581
155
  JuneRuntimeContext,
3582
156
  JuneThemeProvider,
3583
157
  JuneUI,
158
+ JuneUIProvider,
159
+ MarkdownText,
160
+ ToolApproval,
161
+ ToolApprovalList,
3584
162
  consumeStream,
3585
163
  copyDocumentToClipboard,
3586
164
  createActionHandler,
165
+ createComponentRegistry,
3587
166
  createDocumentStore,
3588
167
  createJuneLibrary,
168
+ createJuneUI,
169
+ createLangGraphExtractor,
170
+ createTheme,
3589
171
  darkTheme,
3590
172
  defaultParseActionEvent,
173
+ defaultRegistry,
174
+ defaultToolApprovalLabels,
175
+ defineComponent,
3591
176
  defineJuneAction,
3592
177
  defineJuneComponent,
3593
178
  documentPromptOptions,
@@ -3597,25 +182,43 @@ export {
3597
182
  getDefaultDocumentStore,
3598
183
  getDocumentEditorInstructions,
3599
184
  getDocumentEditorRules,
185
+ interruptToApprovalRequests,
3600
186
  isDocumentEcho,
187
+ isJuneComponent,
3601
188
  isJuneError,
189
+ isThemeSet,
3602
190
  jsonFieldExtractor,
3603
191
  juneLibrary,
192
+ langGraphStreamOptions,
3604
193
  lightTheme,
3605
194
  listDocumentExporters,
3606
195
  mergeDocuments,
196
+ messageContentToText,
197
+ normalizeProgram,
3607
198
  readDocumentFromProgram,
199
+ readLangGraphInterrupts,
200
+ registerComponent,
3608
201
  registerDocumentExporter,
3609
202
  rememberDocumentEcho,
203
+ resolveMixedContent,
204
+ resolveThemeVars,
3610
205
  runAction,
3611
206
  serializeDocumentsForAgent,
207
+ splitResponse,
3612
208
  sseToText,
209
+ toAsyncIterable,
3613
210
  toJuneError,
211
+ unregisterComponent,
3614
212
  updateDocumentInProgram,
213
+ useDocumentBridge,
3615
214
  useDocumentOptions,
3616
215
  useJuneRuntime,
3617
216
  useJuneStream,
3618
217
  useJuneTheme,
218
+ useJuneUIContext,
219
+ useRegistryLibrary,
3619
220
  useResolvedTheme,
221
+ useToolApproval,
222
+ validateComponentDefinition,
3620
223
  withDocumentEditor
3621
224
  };