docblocks-react-ui 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/CHANGELOG.md +100 -0
  2. package/LICENSE +21 -0
  3. package/README.md +585 -2
  4. package/dist/Editor-CiJY5R4v.mjs +26587 -0
  5. package/dist/Editor-DT7RkRXf.d.mts +32 -0
  6. package/dist/LoaderCircle-AGVFE4IP.mjs +19 -0
  7. package/dist/Skeleton-D922Ths5.mjs +13 -0
  8. package/dist/constants-D4FTL0ph.mjs +81 -0
  9. package/dist/fonts/OFL.txt +162 -0
  10. package/dist/fonts/inter-300-c.woff2 +0 -0
  11. package/dist/fonts/inter-300-l.woff2 +0 -0
  12. package/dist/fonts/inter-300i-c.woff2 +0 -0
  13. package/dist/fonts/inter-300i-l.woff2 +0 -0
  14. package/dist/fonts/inter-400-c.woff2 +0 -0
  15. package/dist/fonts/inter-400-l.woff2 +0 -0
  16. package/dist/fonts/inter-400i-c.woff2 +0 -0
  17. package/dist/fonts/inter-400i-l.woff2 +0 -0
  18. package/dist/fonts/inter-600-c.woff2 +0 -0
  19. package/dist/fonts/inter-600-l.woff2 +0 -0
  20. package/dist/fonts/inter-600i-c.woff2 +0 -0
  21. package/dist/fonts/inter-600i-l.woff2 +0 -0
  22. package/dist/fonts/jetbrains-mono-300-c.woff2 +0 -0
  23. package/dist/fonts/jetbrains-mono-300-l.woff2 +0 -0
  24. package/dist/fonts/jetbrains-mono-300i-c.woff2 +0 -0
  25. package/dist/fonts/jetbrains-mono-300i-l.woff2 +0 -0
  26. package/dist/fonts/jetbrains-mono-400-c.woff2 +0 -0
  27. package/dist/fonts/jetbrains-mono-400-l.woff2 +0 -0
  28. package/dist/fonts/jetbrains-mono-400i-c.woff2 +0 -0
  29. package/dist/fonts/jetbrains-mono-400i-l.woff2 +0 -0
  30. package/dist/fonts/jetbrains-mono-600-c.woff2 +0 -0
  31. package/dist/fonts/jetbrains-mono-600-l.woff2 +0 -0
  32. package/dist/fonts/jetbrains-mono-600i-c.woff2 +0 -0
  33. package/dist/fonts/jetbrains-mono-600i-l.woff2 +0 -0
  34. package/dist/fonts/lora-400-c.woff2 +0 -0
  35. package/dist/fonts/lora-400-l.woff2 +0 -0
  36. package/dist/fonts/lora-400i-c.woff2 +0 -0
  37. package/dist/fonts/lora-400i-l.woff2 +0 -0
  38. package/dist/fonts/lora-600-c.woff2 +0 -0
  39. package/dist/fonts/lora-600-l.woff2 +0 -0
  40. package/dist/fonts/lora-600i-c.woff2 +0 -0
  41. package/dist/fonts/lora-600i-l.woff2 +0 -0
  42. package/dist/fonts/lora-700-c.woff2 +0 -0
  43. package/dist/fonts/lora-700-l.woff2 +0 -0
  44. package/dist/fonts/lora-700i-c.woff2 +0 -0
  45. package/dist/fonts/lora-700i-l.woff2 +0 -0
  46. package/dist/fonts/open-sans-300-c.woff2 +0 -0
  47. package/dist/fonts/open-sans-300-l.woff2 +0 -0
  48. package/dist/fonts/open-sans-300i-c.woff2 +0 -0
  49. package/dist/fonts/open-sans-300i-l.woff2 +0 -0
  50. package/dist/fonts/open-sans-400-c.woff2 +0 -0
  51. package/dist/fonts/open-sans-400-l.woff2 +0 -0
  52. package/dist/fonts/open-sans-400i-c.woff2 +0 -0
  53. package/dist/fonts/open-sans-400i-l.woff2 +0 -0
  54. package/dist/fonts/open-sans-600-c.woff2 +0 -0
  55. package/dist/fonts/open-sans-600-l.woff2 +0 -0
  56. package/dist/fonts/open-sans-600i-c.woff2 +0 -0
  57. package/dist/fonts/open-sans-600i-l.woff2 +0 -0
  58. package/dist/fonts/pt-sans-400-c.woff2 +0 -0
  59. package/dist/fonts/pt-sans-400-l.woff2 +0 -0
  60. package/dist/fonts/pt-sans-400i-c.woff2 +0 -0
  61. package/dist/fonts/pt-sans-400i-l.woff2 +0 -0
  62. package/dist/fonts/pt-sans-700-c.woff2 +0 -0
  63. package/dist/fonts/pt-sans-700-l.woff2 +0 -0
  64. package/dist/fonts/pt-sans-700i-c.woff2 +0 -0
  65. package/dist/fonts/pt-sans-700i-l.woff2 +0 -0
  66. package/dist/fonts/pt-serif-400-c.woff2 +0 -0
  67. package/dist/fonts/pt-serif-400-l.woff2 +0 -0
  68. package/dist/fonts/pt-serif-400i-c.woff2 +0 -0
  69. package/dist/fonts/pt-serif-400i-l.woff2 +0 -0
  70. package/dist/fonts/pt-serif-700-c.woff2 +0 -0
  71. package/dist/fonts/pt-serif-700-l.woff2 +0 -0
  72. package/dist/fonts/pt-serif-700i-c.woff2 +0 -0
  73. package/dist/fonts/pt-serif-700i-l.woff2 +0 -0
  74. package/dist/index-D6_ysSmQ.d.mts +1075 -0
  75. package/dist/index-YJcgf8Hh.d.mts +39 -0
  76. package/dist/index.d.mts +388 -0
  77. package/dist/index.mjs +641 -0
  78. package/dist/mermaid/index.d.mts +10 -0
  79. package/dist/mermaid/index.mjs +252 -0
  80. package/dist/motion/index.d.mts +8 -0
  81. package/dist/motion/index.mjs +1009 -0
  82. package/dist/pdf/index.d.mts +5 -0
  83. package/dist/pdf/index.mjs +164 -0
  84. package/dist/pdf/jbig2.wasm +0 -0
  85. package/dist/pdf/jbig2_nowasm_fallback.js +15 -0
  86. package/dist/pdf/pdf.worker.min.mjs +28 -0
  87. package/dist/styles.css +4562 -0
  88. package/package.json +99 -4
  89. package/theme.css +128 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,641 @@
1
+ import { $ as DropdownMenuContent, A as DEFAULT_EMBED_SANDBOX, B as Select, Bt as badgeVariants, Ct as CardAction, Dt as CardHeader, Et as CardFooter, F as newMutationContext, Ft as BookOpen, G as SelectScrollDownButton, Gt as PROTOCOL_VERSION, H as SelectGroup, Ht as AlertDescription, I as FilterBuilder, It as Button, J as SelectTrigger, Jt as BRIDGE_ERROR_CODES, K as SelectScrollUpButton, Kt as isDatabaseBridge, L as emptyFilter, Lt as buttonVariants, N as useDatabaseTable, Nt as Eye, O as EditorProvider, Ot as CardTitle, P as cellValueEqual, Q as DropdownMenuCheckboxItem, Qt as toBridgeError, R as filterIsComplete, Rt as BareSelect, St as Card, Tt as CardDescription, U as SelectItem, Ut as AlertTitle, V as SelectContent, Vt as Alert, W as SelectLabel, Wt as BASELINE_CAPABILITIES, X as Label, Xt as isBridgeError, Y as SelectValue, Yt as BridgeError, Z as DropdownMenu, Zt as isBridgeErrorCode, _t as PopoverHeader, an as Input, at as DropdownMenuRadioItem, bn as blobSubtypeOf, cn as useMeta, ct as DropdownMenuSub, dn as useSelectionView, dt as DropdownMenuTrigger, en as conditionMatches, et as DropdownMenuGroup, fn as useText, ft as Separator, g as markToggleAction, gn as renderRuns, gt as PopoverDescription, ht as PopoverContent, in as ScrollArea, it as DropdownMenuRadioGroup, jt as Pen, k as useEditorContext, l as SHAPE_FONT_OPTIONS, ln as usePresence, lt as DropdownMenuSubContent, mt as PopoverAnchor, nn as TEXT_TYPES, nt as DropdownMenuLabel, on as useBlock, ot as DropdownMenuSeparator, p as FORMAT_PALETTE, pt as Popover, q as SelectSeparator, qt as validateProtocolDescriptor, rn as columnAnnotation, rt as DropdownMenuPortal, sn as useDoc, st as DropdownMenuShortcut, t as Editor, tn as parseCellValue, tt as DropdownMenuItem, u as SHAPE_FONT_STACKS, un as useSelection, ut as DropdownMenuSubTrigger, vt as PopoverTitle, wt as CardContent, xn as createMemoryBlobStore, xt as Checkbox, yt as PopoverTrigger, z as SegmentSelector, zt as Badge } from "./Editor-CiJY5R4v.mjs";
2
+ import { c as cn, o as preventDefault } from "./constants-D4FTL0ph.mjs";
3
+ import { t as Skeleton } from "./Skeleton-D922Ths5.mjs";
4
+ import { useEffect, useRef, useState } from "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { cva } from "class-variance-authority";
7
+ import * as TabsPrimitive from "@radix-ui/react-tabs";
8
+ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
9
+ //#region src/shared/ui/icons/Network.tsx
10
+ /** The canvas mode's icon (the central node and its peers). */
11
+ function Network(props) {
12
+ return /* @__PURE__ */ jsxs("svg", {
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: 24,
15
+ height: 24,
16
+ viewBox: "0 0 24 24",
17
+ fill: "none",
18
+ stroke: "currentColor",
19
+ strokeWidth: 2,
20
+ strokeLinecap: "round",
21
+ strokeLinejoin: "round",
22
+ ...props,
23
+ children: [
24
+ /* @__PURE__ */ jsx("rect", {
25
+ x: "16",
26
+ y: "16",
27
+ width: "6",
28
+ height: "6",
29
+ rx: "1"
30
+ }),
31
+ /* @__PURE__ */ jsx("rect", {
32
+ x: "2",
33
+ y: "16",
34
+ width: "6",
35
+ height: "6",
36
+ rx: "1"
37
+ }),
38
+ /* @__PURE__ */ jsx("rect", {
39
+ x: "9",
40
+ y: "2",
41
+ width: "6",
42
+ height: "6",
43
+ rx: "1"
44
+ }),
45
+ /* @__PURE__ */ jsx("path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" }),
46
+ /* @__PURE__ */ jsx("path", { d: "M12 12V8" })
47
+ ]
48
+ });
49
+ }
50
+ //#endregion
51
+ //#region src/shared/ui/icons/SquareText.tsx
52
+ /** The page mode's icon (a rounded page with text lines). */
53
+ function SquareText(props) {
54
+ return /* @__PURE__ */ jsxs("svg", {
55
+ xmlns: "http://www.w3.org/2000/svg",
56
+ width: 24,
57
+ height: 24,
58
+ viewBox: "0 0 24 24",
59
+ fill: "none",
60
+ stroke: "currentColor",
61
+ strokeWidth: 2,
62
+ strokeLinecap: "round",
63
+ strokeLinejoin: "round",
64
+ ...props,
65
+ children: [
66
+ /* @__PURE__ */ jsx("rect", {
67
+ width: "18",
68
+ height: "18",
69
+ x: "3",
70
+ y: "3",
71
+ rx: "2",
72
+ ry: "2"
73
+ }),
74
+ /* @__PURE__ */ jsx("path", { d: "M8 8h8" }),
75
+ /* @__PURE__ */ jsx("path", { d: "M8 12h8" }),
76
+ /* @__PURE__ */ jsx("path", { d: "M8 16h5" })
77
+ ]
78
+ });
79
+ }
80
+ //#endregion
81
+ //#region src/shared/ui/emoji-catalog.ts
82
+ const AVATAR_EMOJI = [
83
+ {
84
+ emoji: "🦊",
85
+ label: "Fox"
86
+ },
87
+ {
88
+ emoji: "🐱",
89
+ label: "Cat"
90
+ },
91
+ {
92
+ emoji: "🐶",
93
+ label: "Dog"
94
+ },
95
+ {
96
+ emoji: "🐼",
97
+ label: "Panda"
98
+ },
99
+ {
100
+ emoji: "🦄",
101
+ label: "Unicorn"
102
+ },
103
+ {
104
+ emoji: "🐸",
105
+ label: "Frog"
106
+ },
107
+ {
108
+ emoji: "🦉",
109
+ label: "Owl"
110
+ },
111
+ {
112
+ emoji: "🐢",
113
+ label: "Turtle"
114
+ },
115
+ {
116
+ emoji: "🐝",
117
+ label: "Bee"
118
+ },
119
+ {
120
+ emoji: "🦋",
121
+ label: "Butterfly"
122
+ },
123
+ {
124
+ emoji: "🌞",
125
+ label: "Sun"
126
+ },
127
+ {
128
+ emoji: "🌙",
129
+ label: "Moon"
130
+ },
131
+ {
132
+ emoji: "⭐",
133
+ label: "Star"
134
+ },
135
+ {
136
+ emoji: "✨",
137
+ label: "Sparkles"
138
+ },
139
+ {
140
+ emoji: "🌈",
141
+ label: "Rainbow"
142
+ },
143
+ {
144
+ emoji: "🔥",
145
+ label: "Fire"
146
+ },
147
+ {
148
+ emoji: "💎",
149
+ label: "Gem"
150
+ },
151
+ {
152
+ emoji: "⚡",
153
+ label: "Bolt"
154
+ },
155
+ {
156
+ emoji: "❤️",
157
+ label: "Red heart"
158
+ },
159
+ {
160
+ emoji: "💙",
161
+ label: "Blue heart"
162
+ },
163
+ {
164
+ emoji: "💚",
165
+ label: "Green heart"
166
+ },
167
+ {
168
+ emoji: "💛",
169
+ label: "Yellow heart"
170
+ },
171
+ {
172
+ emoji: "✏️",
173
+ label: "Pencil"
174
+ },
175
+ {
176
+ emoji: "📚",
177
+ label: "Books"
178
+ },
179
+ {
180
+ emoji: "🎯",
181
+ label: "Target"
182
+ },
183
+ {
184
+ emoji: "🚀",
185
+ label: "Rocket"
186
+ },
187
+ {
188
+ emoji: "🎨",
189
+ label: "Palette"
190
+ },
191
+ {
192
+ emoji: "☕",
193
+ label: "Coffee"
194
+ },
195
+ {
196
+ emoji: "🍀",
197
+ label: "Clover"
198
+ },
199
+ {
200
+ emoji: "🏆",
201
+ label: "Trophy"
202
+ }
203
+ ];
204
+ //#endregion
205
+ //#region src/shared/ui/EmojiPicker.tsx
206
+ /**
207
+ * The avatar emoji picker (the document avatar's popover content): a grid of
208
+ * the curated catalog's emoji over a clear option. Presentational — the pick
209
+ * and the clear report to the caller (the commit is one command: one undo
210
+ * step, one wire update). It stands the standard theme tokens (the popover
211
+ * content is portaled outside the editor root, where the `--docblocks-*`
212
+ * tokens are not mapped).
213
+ */
214
+ function EmojiPicker({ selected, onPick, onClear }) {
215
+ const pickEmoji = (emoji) => () => onPick(emoji);
216
+ return /* @__PURE__ */ jsxs("div", {
217
+ "data-slot": "docblocks/emoji-picker",
218
+ className: "flex w-52 flex-col gap-2",
219
+ children: [/* @__PURE__ */ jsx("div", {
220
+ role: "group",
221
+ "aria-label": "Avatar emoji",
222
+ className: "grid grid-cols-6 gap-1",
223
+ children: AVATAR_EMOJI.map(({ emoji, label }) => {
224
+ const isSelected = selected === emoji;
225
+ return /* @__PURE__ */ jsx(Button, {
226
+ type: "button",
227
+ variant: "ghost",
228
+ size: "icon",
229
+ "data-slot": "docblocks/emoji-picker-option",
230
+ "data-emoji": emoji,
231
+ "aria-label": label,
232
+ "aria-pressed": isSelected,
233
+ title: label,
234
+ className: cn(`
235
+ size-8 text-base text-foreground transition-colors
236
+ hover:text-foreground
237
+ focus-visible:ring-0 focus-visible:outline-1 focus-visible:outline-ring
238
+ `, isSelected && "bg-accent"),
239
+ onClick: pickEmoji(emoji),
240
+ children: emoji
241
+ }, label);
242
+ })
243
+ }), /* @__PURE__ */ jsx(Button, {
244
+ type: "button",
245
+ variant: "ghost",
246
+ "data-slot": "docblocks/emoji-picker-clear",
247
+ className: "\n -mx-1 h-auto px-2 py-1 text-left text-xs font-normal text-muted-foreground transition-colors\n focus-visible:ring-0 focus-visible:outline-1 focus-visible:outline-ring\n ",
248
+ onClick: onClear,
249
+ children: "Remove avatar"
250
+ })]
251
+ });
252
+ }
253
+ //#endregion
254
+ //#region src/shared/ui/Tabs.tsx
255
+ /**
256
+ * The tabs primitive (Radix): a root with a list of triggers and the
257
+ * optional content panels. The root is controlled through `value` /
258
+ * `onValueChange` (or uncontrolled through `defaultValue`); the list
259
+ * carries the `default` (a muted pill) or the `line` variant (an
260
+ * underline under the active tab). The trigger's active state is the
261
+ * Radix `data-state="active"` attribute, styled through the
262
+ * `data-[state=active]:` classes.
263
+ */
264
+ function Tabs({ className, orientation = "horizontal", ...props }) {
265
+ return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
266
+ "data-slot": "tabs",
267
+ "data-orientation": orientation,
268
+ className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
269
+ ...props
270
+ });
271
+ }
272
+ const tabsListVariants = cva(`
273
+ group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.75 text-muted-foreground
274
+ group-data-horizontal/tabs:h-8
275
+ group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col
276
+ data-[variant=line]:rounded-none
277
+ `, {
278
+ variants: { variant: {
279
+ default: "bg-muted",
280
+ line: "gap-1 bg-transparent"
281
+ } },
282
+ defaultVariants: { variant: "default" }
283
+ });
284
+ function TabsList({ className, variant = "default", ...props }) {
285
+ return /* @__PURE__ */ jsx(TabsPrimitive.List, {
286
+ "data-slot": "tabs-list",
287
+ "data-variant": variant,
288
+ className: cn(tabsListVariants({ variant }), className),
289
+ ...props
290
+ });
291
+ }
292
+ function TabsTrigger({ className, ...props }) {
293
+ return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
294
+ "data-slot": "tabs-trigger",
295
+ className: cn(`
296
+ relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border
297
+ border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all
298
+ group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start
299
+ hover:text-foreground
300
+ focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1
301
+ focus-visible:outline-ring
302
+ disabled:pointer-events-none disabled:opacity-50
303
+ has-data-[icon=inline-end]:pr-1
304
+ has-data-[icon=inline-start]:pl-1
305
+ group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm
306
+ group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none
307
+ dark:text-muted-foreground
308
+ dark:hover:text-foreground
309
+ [&_svg]:pointer-events-none [&_svg]:shrink-0
310
+ [&_svg:not([class*='size-'])]:size-4
311
+ `, `
312
+ group-data-[variant=line]/tabs-list:bg-transparent
313
+ group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent
314
+ dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent
315
+ dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent
316
+ `, `
317
+ data-[state=active]:bg-background data-[state=active]:text-foreground
318
+ dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30
319
+ dark:data-[state=active]:text-foreground
320
+ `, `
321
+ after:absolute after:bg-foreground after:opacity-0 after:transition-opacity
322
+ group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25
323
+ group-data-horizontal/tabs:after:h-0.5
324
+ group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1
325
+ group-data-vertical/tabs:after:w-0.5
326
+ group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100
327
+ `, className),
328
+ ...props
329
+ });
330
+ }
331
+ function TabsContent({ className, ...props }) {
332
+ return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
333
+ "data-slot": "tabs-content",
334
+ className: cn("flex-1 text-sm outline-none", className),
335
+ ...props
336
+ });
337
+ }
338
+ //#endregion
339
+ //#region src/shared/ui/Tooltip.tsx
340
+ function TooltipProvider({ delayDuration = 0, ...props }) {
341
+ return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
342
+ "data-slot": "tooltip-provider",
343
+ delayDuration,
344
+ ...props
345
+ });
346
+ }
347
+ function Tooltip({ ...props }) {
348
+ return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
349
+ "data-slot": "tooltip",
350
+ ...props
351
+ }) });
352
+ }
353
+ function TooltipTrigger({ ...props }) {
354
+ return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
355
+ "data-slot": "tooltip-trigger",
356
+ ...props
357
+ });
358
+ }
359
+ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
360
+ return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
361
+ "data-slot": "tooltip-content",
362
+ sideOffset,
363
+ className: cn(`
364
+ z-modal w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary px-3 py-1.5
365
+ text-xs text-balance text-primary-foreground fade-in-0 zoom-in-95
366
+ data-[side=bottom]:slide-in-from-top-2
367
+ data-[side=left]:slide-in-from-right-2
368
+ data-[side=right]:slide-in-from-left-2
369
+ data-[side=top]:slide-in-from-bottom-2
370
+ data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95
371
+ `, className),
372
+ ...props,
373
+ children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-modal size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs bg-primary fill-primary" })]
374
+ }) });
375
+ }
376
+ //#endregion
377
+ //#region src/DocHeader.tsx
378
+ /**
379
+ * The document's header panel — a consumer-placed component (outside the
380
+ * editor, so it takes the core `Doc` directly, not the editor context). It
381
+ * stands the page/canvas mode switcher (left), the document mode's
382
+ * switcher (the Edit / View / Published's stand — the consumer-controlled
383
+ * `mode` over the `onModeChange`, gated over the "editor"'s access level;
384
+ * a "viewer" stands no switcher — the published's mode is forced), the
385
+ * page avatar, and the document title. It reads the doc's meta and
386
+ * re-renders on the meta changes (the onChange feed); over the published's
387
+ * stand the meta stands from the `publishedDoc`'s snapshot (the live's
388
+ * meta stands off — the reader stands the published's state). The title is
389
+ * inline-editable over the edit's mode only (a click opens the edit, the
390
+ * caret seats at the end — no select-all, the blur / the Enter commit —
391
+ * one command, the Escape cancels without a write; the read-only's stand
392
+ * shows the title display-only). The avatar is a popover picker over the
393
+ * edit's mode only (a click opens the emoji grid — a portaled
394
+ * standard-token surface, a pick commits `setAvatar` — one write — and
395
+ * closes, the clear option removes it; the read-only's stand shows the
396
+ * avatar display-only). The mode switchers are controlled (the `view` +
397
+ * the `onViewChange`, the `mode` + the `onModeChange` — the consumer owns
398
+ * the editor's view and the document's mode).
399
+ *
400
+ * The panel stands the standard theme tokens (not the `--docblocks-*` ones):
401
+ * it renders in the consumer's chrome, outside the editor root where the
402
+ * `--docblocks-*` tokens are not mapped.
403
+ */
404
+ /** The inline edit's input: the focus with the caret seated at the end (no select-all) on mount, the commit on the blur / the Enter (one write), the Escape cancels without a write. */
405
+ function InlineEditInput({ initial, ariaLabel, slot, className, onCommit, onCancel }) {
406
+ const inputRef = useRef(null);
407
+ const committedRef = useRef(false);
408
+ useEffect(() => {
409
+ const input = inputRef.current;
410
+ if (input === null) return;
411
+ input.focus();
412
+ input.setSelectionRange(input.value.length, input.value.length);
413
+ }, []);
414
+ const commit = (value) => {
415
+ if (committedRef.current) return;
416
+ committedRef.current = true;
417
+ onCommit(value);
418
+ };
419
+ const onInputBlur = (event) => commit(event.target.value);
420
+ const onInputKeyDown = (event) => {
421
+ if (event.key === "Enter") {
422
+ event.preventDefault();
423
+ commit(event.currentTarget.value);
424
+ } else if (event.key === "Escape") {
425
+ committedRef.current = true;
426
+ onCancel();
427
+ }
428
+ };
429
+ return /* @__PURE__ */ jsx(Input, {
430
+ ref: inputRef,
431
+ "data-slot": slot,
432
+ "aria-label": ariaLabel,
433
+ defaultValue: initial,
434
+ className,
435
+ onBlur: onInputBlur,
436
+ onKeyDown: onInputKeyDown
437
+ });
438
+ }
439
+ function DocHeader({ doc, view, onViewChange, accessLevel = "editor", mode = "edit", onModeChange, publishedDoc }) {
440
+ const effectiveMode = accessLevel === "viewer" ? "published" : mode;
441
+ const viewMode = effectiveMode !== "edit";
442
+ const snapshot = effectiveMode === "published" ? accessLevel === "viewer" ? doc ?? null : publishedDoc ?? null : null;
443
+ const [meta, setMeta] = useState(() => doc !== void 0 ? doc.meta : null);
444
+ const [titleEditing, setTitleEditing] = useState(false);
445
+ const [avatarOpen, setAvatarOpen] = useState(false);
446
+ useEffect(() => {
447
+ if (doc === void 0) return;
448
+ setMeta(doc.meta);
449
+ return doc.onChange((change) => {
450
+ if (change.metaChanged) setMeta(doc.meta);
451
+ });
452
+ }, [doc]);
453
+ const pickAvatar = (emoji) => {
454
+ if (doc === void 0) return;
455
+ doc.setAvatar(emoji);
456
+ setAvatarOpen(false);
457
+ };
458
+ const clearAvatar = () => {
459
+ if (doc === void 0) return;
460
+ doc.setAvatar(null);
461
+ setAvatarOpen(false);
462
+ };
463
+ const commitTitleEdit = (value) => {
464
+ setTitleEditing(false);
465
+ if (doc === void 0) return;
466
+ if (value === doc.meta.title) return;
467
+ doc.setTitle(value);
468
+ };
469
+ const cancelTitleEdit = () => setTitleEditing(false);
470
+ const beginTitleEdit = () => setTitleEditing(true);
471
+ const switchView = (next) => {
472
+ if (next !== view) onViewChange(next);
473
+ };
474
+ const showModeSwitcher = accessLevel === "editor" && onModeChange !== void 0;
475
+ const switchMode = (next) => {
476
+ if (next !== effectiveMode) onModeChange?.(next);
477
+ };
478
+ const NEUTRAL_META = {
479
+ v: 1,
480
+ id: "",
481
+ title: "",
482
+ createdAt: ""
483
+ };
484
+ const liveMeta = meta ?? NEUTRAL_META;
485
+ const displayMeta = snapshot !== null ? snapshot.meta : effectiveMode === "published" ? NEUTRAL_META : liveMeta;
486
+ return /* @__PURE__ */ jsxs("div", {
487
+ "data-slot": "docblocks/doc-header",
488
+ className: "flex items-center gap-3",
489
+ children: [
490
+ /* @__PURE__ */ jsx(SegmentSelector, {
491
+ options: [{
492
+ value: "page",
493
+ label: "Page view",
494
+ icon: /* @__PURE__ */ jsx(SquareText, { className: "size-4" })
495
+ }, {
496
+ value: "canvas",
497
+ label: "Canvas view",
498
+ icon: /* @__PURE__ */ jsx(Network, { className: "size-4" })
499
+ }],
500
+ value: view,
501
+ onChange: switchView,
502
+ ariaLabel: "Document view",
503
+ slot: "docblocks/doc-header-view",
504
+ pillSlot: "docblocks/doc-header-view-pill",
505
+ buttonAttrName: "doc-header-view-button"
506
+ }),
507
+ showModeSwitcher ? /* @__PURE__ */ jsx(SegmentSelector, {
508
+ options: [
509
+ {
510
+ value: "edit",
511
+ label: "Edit mode",
512
+ icon: /* @__PURE__ */ jsx(Pen, { className: "size-4" })
513
+ },
514
+ {
515
+ value: "view",
516
+ label: "View mode",
517
+ icon: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
518
+ },
519
+ {
520
+ value: "published",
521
+ label: "Published",
522
+ icon: /* @__PURE__ */ jsx(BookOpen, { className: "size-4" }),
523
+ disabled: publishedDoc === null || publishedDoc === void 0
524
+ }
525
+ ],
526
+ value: effectiveMode,
527
+ onChange: switchMode,
528
+ ariaLabel: "Document mode",
529
+ slot: "docblocks/doc-header-mode",
530
+ pillSlot: "docblocks/doc-header-mode-pill",
531
+ buttonAttrName: "doc-header-mode-button"
532
+ }) : null,
533
+ viewMode ? /* @__PURE__ */ jsx("span", {
534
+ "data-slot": "docblocks/doc-header-avatar",
535
+ "aria-label": "Document avatar",
536
+ className: cn("flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full text-base font-normal", displayMeta.avatar ? "bg-muted" : "border border-dashed border-input text-muted-foreground"),
537
+ children: displayMeta.avatar ?? ""
538
+ }) : /* @__PURE__ */ jsxs(Popover, {
539
+ open: avatarOpen,
540
+ onOpenChange: setAvatarOpen,
541
+ children: [/* @__PURE__ */ jsx(PopoverTrigger, {
542
+ asChild: true,
543
+ children: /* @__PURE__ */ jsx(Button, {
544
+ type: "button",
545
+ variant: "ghost",
546
+ size: "icon",
547
+ "data-slot": "docblocks/doc-header-avatar",
548
+ "aria-label": "Edit the document avatar",
549
+ title: "Edit the avatar",
550
+ className: cn("size-8 shrink-0 overflow-hidden rounded-full text-base font-normal", liveMeta.avatar ? "bg-muted" : "border border-dashed border-input text-muted-foreground"),
551
+ children: liveMeta.avatar ? liveMeta.avatar : "+"
552
+ })
553
+ }), /* @__PURE__ */ jsx(PopoverContent, {
554
+ align: "start",
555
+ sideOffset: 6,
556
+ onOpenAutoFocus: preventDefault,
557
+ className: "w-auto p-2.5",
558
+ children: /* @__PURE__ */ jsx(EmojiPicker, {
559
+ selected: liveMeta.avatar ?? null,
560
+ onPick: pickAvatar,
561
+ onClear: clearAvatar
562
+ })
563
+ })]
564
+ }),
565
+ titleEditing && !viewMode ? /* @__PURE__ */ jsx(InlineEditInput, {
566
+ initial: liveMeta.title,
567
+ ariaLabel: "Document title",
568
+ slot: "docblocks/doc-header-title-edit",
569
+ className: "\n h-auto min-w-0 flex-1 border-0 bg-background p-0 text-lg font-semibold shadow-none\n focus-visible:ring-0\n dark:bg-transparent\n ",
570
+ onCommit: commitTitleEdit,
571
+ onCancel: cancelTitleEdit
572
+ }) : viewMode ? /* @__PURE__ */ jsx("span", {
573
+ "data-slot": "docblocks/doc-header-title",
574
+ "aria-label": "Document title",
575
+ className: "min-w-0 flex-1 truncate text-left text-lg font-semibold",
576
+ children: displayMeta.title || /* @__PURE__ */ jsx("span", {
577
+ className: "text-muted-foreground",
578
+ children: "Untitled"
579
+ })
580
+ }) : /* @__PURE__ */ jsx(Button, {
581
+ type: "button",
582
+ variant: "ghost",
583
+ "data-slot": "docblocks/doc-header-title",
584
+ "aria-label": "Edit the document title",
585
+ title: "Edit the title",
586
+ onClick: beginTitleEdit,
587
+ className: "h-auto min-w-0 flex-1 truncate text-left text-lg font-semibold",
588
+ children: liveMeta.title || /* @__PURE__ */ jsx("span", {
589
+ className: "text-muted-foreground",
590
+ children: "Untitled"
591
+ })
592
+ })
593
+ ]
594
+ });
595
+ }
596
+ //#endregion
597
+ //#region src/fonts.ts
598
+ /**
599
+ * The package's font subsystem — the single place for the package's fonts.
600
+ *
601
+ * One self-hosted set (the woff2 in `fonts/`; the @font-face declarations in
602
+ * the assembled stylesheet's last section, `fonts/shape-fonts.css`) — a file
603
+ * is fetched only for the used family / weight / subset via `unicode-range`.
604
+ *
605
+ * Three roles share the set:
606
+ * - The UI default font (the editor's chrome + the page text) — `Inter`,
607
+ * the `--docblocks-font-family` token's default (the consumer's
608
+ * `--font-sans` override takes priority — the token contract is unchanged).
609
+ * - The shape text's font options (`SHAPE_FONT_OPTIONS` — the shape
610
+ * `fontFamily` attr's catalog; a consumer's own loaded font is addressable
611
+ * by its raw name — the absent / an unrecognized name falls to the raw name).
612
+ * - The mono font (the code block) — the `--docblocks-mono-
613
+ * font-family` token's default (the consumer's `--font-mono` override takes
614
+ * priority).
615
+ *
616
+ * Adding a font:
617
+ * 1. Drop the woff2 in `fonts/` under the `<family>-<weight><i?>-<l|c>.woff2`
618
+ * naming (l = latin, c = cyrillic).
619
+ * 2. Add the @font-face declarations to `fonts/shape-fonts.css` (a
620
+ * unicode-range per subset, so a subset is fetched only when used).
621
+ * 3. If the font is a shape option, add it to `SHAPE_FONT_OPTIONS` — the
622
+ * `SHAPE_FONT_STACKS` map derives from it.
623
+ * The build (`scripts/assemble-styles.mjs`) copies `fonts/` to `dist/fonts/`
624
+ * and appends the @font-face section to the shipped stylesheet.
625
+ */
626
+ /** The UI default font's name (self-hosted — the shape set's own Inter). */
627
+ const UI_FONT_ID = "Inter";
628
+ /**
629
+ * The UI default font's stack: the self-hosted Inter first, then the system
630
+ * fallbacks (a consumer without the package's stylesheet degrades to the
631
+ * system font, not to nothing). Stands the `--docblocks-font-family` token's
632
+ * default.
633
+ */
634
+ const UI_FONT_STACK = "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif";
635
+ /**
636
+ * The mono default's stack (the code block). Stands the
637
+ * `--docblocks-mono-font-family` token's default.
638
+ */
639
+ const MONO_FONT_STACK = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
640
+ //#endregion
641
+ export { Alert, AlertDescription, AlertTitle, BASELINE_CAPABILITIES, BRIDGE_ERROR_CODES, Badge, BareSelect, BridgeError, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DEFAULT_EMBED_SANDBOX, DocHeader, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Editor, EditorProvider, FORMAT_PALETTE, FilterBuilder, Input, Label, MONO_FONT_STACK, PROTOCOL_VERSION, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, SHAPE_FONT_OPTIONS, SHAPE_FONT_STACKS, ScrollArea, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, TEXT_TYPES, Tabs, TabsContent, TabsList, TabsTrigger, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UI_FONT_ID, UI_FONT_STACK, badgeVariants, blobSubtypeOf, buttonVariants, cellValueEqual, cn, columnAnnotation, conditionMatches, createMemoryBlobStore, emptyFilter, filterIsComplete, isBridgeError, isBridgeErrorCode, isDatabaseBridge, markToggleAction, newMutationContext, parseCellValue, renderRuns, toBridgeError, useBlock, useDatabaseTable, useDoc, useEditorContext, useMeta, usePresence, useSelection, useSelectionView, useText, validateProtocolDescriptor };
@@ -0,0 +1,10 @@
1
+ import { r as BlockRendererProps } from "../index-YJcgf8Hh.mjs";
2
+ //#region src/mermaid/MermaidCodeRenderer.d.ts
3
+ /**
4
+ * A BlockRenderer for the `code` type. The registry dispatches by type:
5
+ * a renderer registered under "code" only receives code blocks (the union
6
+ * cannot express that narrowing at the call site).
7
+ */
8
+ declare function MermaidCodeRenderer({ id, block }: BlockRendererProps): import("react").JSX.Element;
9
+ //#endregion
10
+ export { MermaidCodeRenderer };