@particle-academy/react-fancy 6.3.0 → 6.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/README.md +1 -0
- package/dist/autocomplete.cjs +5 -5
- package/dist/autocomplete.js +4 -4
- package/dist/card.cjs +8 -8
- package/dist/card.js +2 -2
- package/dist/chat-thread.cjs +5 -4
- package/dist/chat-thread.js +3 -2
- package/dist/{chunk-K7JOZQRK.cjs → chunk-2G6TIX5Q.cjs} +4 -4
- package/dist/{chunk-K7JOZQRK.cjs.map → chunk-2G6TIX5Q.cjs.map} +1 -1
- package/dist/{chunk-TH4JZAMK.js → chunk-5TP642UT.js} +4 -4
- package/dist/{chunk-TH4JZAMK.js.map → chunk-5TP642UT.js.map} +1 -1
- package/dist/chunk-6BB32POL.js +29 -0
- package/dist/chunk-6BB32POL.js.map +1 -0
- package/dist/{chunk-XIA2UAVO.js → chunk-6GVOW3UL.js} +4 -4
- package/dist/{chunk-XIA2UAVO.js.map → chunk-6GVOW3UL.js.map} +1 -1
- package/dist/{chunk-4JT2QANA.cjs → chunk-6H7ZN23X.cjs} +3 -3
- package/dist/{chunk-4JT2QANA.cjs.map → chunk-6H7ZN23X.cjs.map} +1 -1
- package/dist/chunk-7ZCNZUZK.cjs +183 -0
- package/dist/chunk-7ZCNZUZK.cjs.map +1 -0
- package/dist/chunk-AHZIT3CM.js +204 -0
- package/dist/chunk-AHZIT3CM.js.map +1 -0
- package/dist/{chunk-MP55W37V.cjs → chunk-BYO5RUDE.cjs} +4 -4
- package/dist/{chunk-MP55W37V.cjs.map → chunk-BYO5RUDE.cjs.map} +1 -1
- package/dist/{chunk-2XO6EYZ7.js → chunk-EENHSMV2.js} +3 -3
- package/dist/{chunk-2XO6EYZ7.js.map → chunk-EENHSMV2.js.map} +1 -1
- package/dist/{chunk-7JLKOVHX.cjs → chunk-HLI6RB5V.cjs} +4 -4
- package/dist/{chunk-7JLKOVHX.cjs.map → chunk-HLI6RB5V.cjs.map} +1 -1
- package/dist/chunk-HZUKPYR3.cjs +31 -0
- package/dist/chunk-HZUKPYR3.cjs.map +1 -0
- package/dist/chunk-J2BWXCES.js +177 -0
- package/dist/chunk-J2BWXCES.js.map +1 -0
- package/dist/{chunk-CKO2KCUN.cjs → chunk-MPCZUZ4O.cjs} +7 -175
- package/dist/chunk-MPCZUZ4O.cjs.map +1 -0
- package/dist/{chunk-G7227RTY.cjs → chunk-NIAG6OF6.cjs} +4 -22
- package/dist/chunk-NIAG6OF6.cjs.map +1 -0
- package/dist/{chunk-FBWUXSKH.js → chunk-P24A2BIR.js} +4 -22
- package/dist/chunk-P24A2BIR.js.map +1 -0
- package/dist/{chunk-3AA2KGZG.js → chunk-QF2FODTG.js} +5 -173
- package/dist/chunk-QF2FODTG.js.map +1 -0
- package/dist/{chunk-A6NYZ3F5.js → chunk-RWU2MFUL.js} +4 -4
- package/dist/{chunk-A6NYZ3F5.js.map → chunk-RWU2MFUL.js.map} +1 -1
- package/dist/{chunk-WF6AYHOS.js → chunk-UMDOSJUH.js} +4 -4
- package/dist/{chunk-WF6AYHOS.js.map → chunk-UMDOSJUH.js.map} +1 -1
- package/dist/{chunk-23KQF47X.js → chunk-UUEAFG6V.js} +3 -3
- package/dist/{chunk-23KQF47X.js.map → chunk-UUEAFG6V.js.map} +1 -1
- package/dist/chunk-VAVS6WRZ.cjs +206 -0
- package/dist/chunk-VAVS6WRZ.cjs.map +1 -0
- package/dist/{chunk-SRICSNL4.cjs → chunk-VQLPAYQF.cjs} +12 -12
- package/dist/{chunk-SRICSNL4.cjs.map → chunk-VQLPAYQF.cjs.map} +1 -1
- package/dist/{chunk-KSSTFLV2.cjs → chunk-Z44A7NPD.cjs} +6 -6
- package/dist/{chunk-KSSTFLV2.cjs.map → chunk-Z44A7NPD.cjs.map} +1 -1
- package/dist/code-block.cjs +19 -0
- package/dist/code-block.cjs.map +1 -0
- package/dist/code-block.d.cts +55 -0
- package/dist/code-block.d.ts +55 -0
- package/dist/code-block.js +10 -0
- package/dist/code-block.js.map +1 -0
- package/dist/code-view.cjs +3 -2
- package/dist/code-view.js +2 -1
- package/dist/composer.cjs +1 -1
- package/dist/composer.js +1 -1
- package/dist/content-renderer.cjs +5 -4
- package/dist/content-renderer.js +2 -1
- package/dist/dropdown.cjs +1 -1
- package/dist/dropdown.js +1 -1
- package/dist/editor.cjs +10 -8
- package/dist/editor.js +8 -6
- package/dist/index.cjs +114 -107
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +28 -25
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +3 -3
- package/dist/input.js +3 -3
- package/dist/inputs.cjs +10 -10
- package/dist/inputs.js +5 -5
- package/dist/json-editor.cjs +16 -16
- package/dist/json-editor.js +5 -5
- package/dist/magic-wand.cjs +2 -2
- package/dist/magic-wand.js +2 -2
- package/dist/mobile-menu.cjs +1 -1
- package/dist/mobile-menu.js +1 -1
- package/dist/paste-pills.cjs +1 -1
- package/dist/paste-pills.js +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.js +1 -1
- package/dist/prompt-input.cjs +1 -1
- package/dist/prompt-input.js +1 -1
- package/dist/reason-tag.cjs +1 -1
- package/dist/reason-tag.js +1 -1
- package/dist/select.cjs +5 -5
- package/dist/select.js +4 -4
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.js +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.js +1 -1
- package/docs/CodeBlock.md +84 -0
- package/package.json +11 -1
- package/dist/chunk-3AA2KGZG.js.map +0 -1
- package/dist/chunk-CKO2KCUN.cjs.map +0 -1
- package/dist/chunk-FBWUXSKH.js.map +0 -1
- package/dist/chunk-G7227RTY.cjs.map +0 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkNZHVDWOM_cjs = require('./chunk-NZHVDWOM.cjs');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var reactDom = require('react-dom');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
var FEEDBACK_MS = 2e3;
|
|
9
|
+
var WRITE_TIMEOUT_MS = 5e3;
|
|
10
|
+
var CopyContext = react.createContext(null);
|
|
11
|
+
async function defaultClipboardWriter(payload) {
|
|
12
|
+
const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
|
|
13
|
+
if (!clip) throw new Error("Clipboard API unavailable");
|
|
14
|
+
const Item = globalThis.ClipboardItem;
|
|
15
|
+
if (payload.html && Item && typeof clip.write === "function") {
|
|
16
|
+
try {
|
|
17
|
+
await clip.write([
|
|
18
|
+
new Item({
|
|
19
|
+
"text/html": new Blob([payload.html], { type: "text/html" }),
|
|
20
|
+
"text/plain": new Blob([payload.text], { type: "text/plain" })
|
|
21
|
+
})
|
|
22
|
+
]);
|
|
23
|
+
return;
|
|
24
|
+
} catch {
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
if (typeof clip.writeText !== "function") throw new Error("Clipboard writeText unavailable");
|
|
28
|
+
await clip.writeText(payload.text);
|
|
29
|
+
}
|
|
30
|
+
async function runWriter(writer, payload) {
|
|
31
|
+
let timer;
|
|
32
|
+
try {
|
|
33
|
+
const result = await Promise.race([
|
|
34
|
+
Promise.resolve().then(() => writer(payload)),
|
|
35
|
+
new Promise((resolve) => {
|
|
36
|
+
timer = setTimeout(() => resolve(false), WRITE_TIMEOUT_MS);
|
|
37
|
+
})
|
|
38
|
+
]);
|
|
39
|
+
return result !== false;
|
|
40
|
+
} catch {
|
|
41
|
+
return false;
|
|
42
|
+
} finally {
|
|
43
|
+
if (timer) clearTimeout(timer);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function codeText(pre, fromMarkdown) {
|
|
47
|
+
const text = (pre.querySelector("code") ?? pre).textContent ?? "";
|
|
48
|
+
return fromMarkdown && text.endsWith("\n") ? text.slice(0, -1) : text;
|
|
49
|
+
}
|
|
50
|
+
function tableTsv(table) {
|
|
51
|
+
const rows = [];
|
|
52
|
+
for (const tr of Array.from(table.querySelectorAll("tr"))) {
|
|
53
|
+
if (tr.closest("table") !== table) continue;
|
|
54
|
+
const cells = Array.from(tr.children).filter((c) => c.tagName === "TD" || c.tagName === "TH");
|
|
55
|
+
rows.push(cells.map((c) => cellText(c)).join(" "));
|
|
56
|
+
}
|
|
57
|
+
return rows.join("\n");
|
|
58
|
+
}
|
|
59
|
+
function cellText(cell) {
|
|
60
|
+
const clone = cell.cloneNode(true);
|
|
61
|
+
for (const br of Array.from(clone.querySelectorAll("br"))) br.replaceWith(" ");
|
|
62
|
+
return (clone.textContent ?? "").replace(/[\t\r\n]+/g, " ").replace(/ {2,}/g, " ").trim();
|
|
63
|
+
}
|
|
64
|
+
function HtmlChunk({
|
|
65
|
+
html,
|
|
66
|
+
fromMarkdown,
|
|
67
|
+
tail = false
|
|
68
|
+
}) {
|
|
69
|
+
const ref = react.useRef(null);
|
|
70
|
+
const ctx = react.useContext(CopyContext);
|
|
71
|
+
const [targets, setTargets] = react.useState([]);
|
|
72
|
+
const code = ctx?.code ?? false;
|
|
73
|
+
const table = ctx?.table ?? false;
|
|
74
|
+
const holdLastCode = tail && (ctx?.holdTailCode ?? false);
|
|
75
|
+
const inner = react.useMemo(() => ({ __html: html }), [html]);
|
|
76
|
+
react.useLayoutEffect(() => {
|
|
77
|
+
const root = ref.current;
|
|
78
|
+
if (!root || !code && !table) {
|
|
79
|
+
setTargets([]);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
const found = [];
|
|
83
|
+
const selector = [code && "pre", table && "table"].filter(Boolean).join(",");
|
|
84
|
+
const inProgress = holdLastCode ? Array.from(root.querySelectorAll("pre")).pop() : void 0;
|
|
85
|
+
for (const el of Array.from(root.querySelectorAll(selector))) {
|
|
86
|
+
if (el === inProgress) continue;
|
|
87
|
+
const kind = el.tagName === "PRE" ? "code" : "table";
|
|
88
|
+
const wrapper = document.createElement("div");
|
|
89
|
+
wrapper.setAttribute("data-react-fancy-content-copy-block", kind);
|
|
90
|
+
wrapper.className = kind === "code" ? "group relative" : "group relative flex flex-col";
|
|
91
|
+
wrapper.style.position = "relative";
|
|
92
|
+
const host = document.createElement("div");
|
|
93
|
+
host.setAttribute("data-react-fancy-content-copy-host", "");
|
|
94
|
+
host.className = kind === "code" ? "absolute right-2 top-2 z-10" : "flex justify-end";
|
|
95
|
+
el.replaceWith(wrapper);
|
|
96
|
+
if (kind === "table") wrapper.append(host, el);
|
|
97
|
+
else wrapper.append(el, host);
|
|
98
|
+
found.push({ kind, el, host });
|
|
99
|
+
}
|
|
100
|
+
setTargets(found);
|
|
101
|
+
return () => {
|
|
102
|
+
for (const t of found) {
|
|
103
|
+
const wrapper = t.host.parentElement;
|
|
104
|
+
if (wrapper?.parentNode) wrapper.replaceWith(t.el);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
}, [html, code, table, holdLastCode]);
|
|
108
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
109
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref, dangerouslySetInnerHTML: inner }),
|
|
110
|
+
targets.map(
|
|
111
|
+
(t, i) => reactDom.createPortal(
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(CopyButton, { kind: t.kind, target: t.el, fromMarkdown }),
|
|
113
|
+
t.host,
|
|
114
|
+
`${i}`
|
|
115
|
+
)
|
|
116
|
+
)
|
|
117
|
+
] });
|
|
118
|
+
}
|
|
119
|
+
function CopyButton({
|
|
120
|
+
kind,
|
|
121
|
+
target,
|
|
122
|
+
fromMarkdown
|
|
123
|
+
}) {
|
|
124
|
+
const ctx = react.useContext(CopyContext);
|
|
125
|
+
const [state, setState] = react.useState("idle");
|
|
126
|
+
const timer = react.useRef(void 0);
|
|
127
|
+
const btn = react.useRef(null);
|
|
128
|
+
react.useEffect(() => () => clearTimeout(timer.current), []);
|
|
129
|
+
const onClick = react.useCallback(async () => {
|
|
130
|
+
if (!ctx || !btn.current) return;
|
|
131
|
+
const text = kind === "code" ? codeText(target, fromMarkdown) : tableTsv(target);
|
|
132
|
+
const ok = await ctx.copy({ kind, text, html: target.outerHTML }, btn.current);
|
|
133
|
+
setState(ok ? "copied" : "failed");
|
|
134
|
+
clearTimeout(timer.current);
|
|
135
|
+
timer.current = setTimeout(() => setState("idle"), FEEDBACK_MS);
|
|
136
|
+
}, [ctx, kind, target, fromMarkdown]);
|
|
137
|
+
const idleLabel = kind === "code" ? "Copy code" : "Copy table";
|
|
138
|
+
const label = state === "copied" ? "Copied" : state === "failed" ? "Copy failed" : idleLabel;
|
|
139
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
140
|
+
chunkNZHVDWOM_cjs.Button,
|
|
141
|
+
{
|
|
142
|
+
ref: btn,
|
|
143
|
+
type: "button",
|
|
144
|
+
size: "xs",
|
|
145
|
+
variant: "ghost",
|
|
146
|
+
icon: state === "copied" ? "check" : state === "failed" ? "x" : "copy",
|
|
147
|
+
"aria-label": label,
|
|
148
|
+
title: label,
|
|
149
|
+
"data-react-fancy-content-copy": kind,
|
|
150
|
+
"data-copy-state": state,
|
|
151
|
+
onClick,
|
|
152
|
+
className: kind === "code" ? "text-zinc-300 hover:bg-zinc-800 hover:text-white opacity-70 group-hover:opacity-100 focus-visible:opacity-100" : "opacity-70 group-hover:opacity-100 focus-visible:opacity-100"
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
function useCopyPipeline({
|
|
157
|
+
writer,
|
|
158
|
+
onCopy,
|
|
159
|
+
rootRef,
|
|
160
|
+
announce
|
|
161
|
+
}) {
|
|
162
|
+
const latest = react.useRef({ writer, onCopy, announce });
|
|
163
|
+
latest.current = { writer, onCopy, announce };
|
|
164
|
+
return react.useCallback(
|
|
165
|
+
async (payload, button) => {
|
|
166
|
+
const { writer: w, onCopy: report, announce: say } = latest.current;
|
|
167
|
+
const ok = await runWriter(w ?? defaultClipboardWriter, payload);
|
|
168
|
+
say(ok ? "Copied" : "Copy failed");
|
|
169
|
+
const all = rootRef.current ? Array.from(rootRef.current.querySelectorAll("[data-react-fancy-content-copy]")) : [];
|
|
170
|
+
report?.({ ...payload, index: all.indexOf(button), ok });
|
|
171
|
+
return ok;
|
|
172
|
+
},
|
|
173
|
+
[rootRef]
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
exports.CopyContext = CopyContext;
|
|
178
|
+
exports.HtmlChunk = HtmlChunk;
|
|
179
|
+
exports.defaultClipboardWriter = defaultClipboardWriter;
|
|
180
|
+
exports.runWriter = runWriter;
|
|
181
|
+
exports.useCopyPipeline = useCopyPipeline;
|
|
182
|
+
//# sourceMappingURL=chunk-7ZCNZUZK.cjs.map
|
|
183
|
+
//# sourceMappingURL=chunk-7ZCNZUZK.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ContentRenderer/copy.tsx"],"names":["createContext","useRef","useContext","useState","useMemo","useLayoutEffect","jsxs","Fragment","jsx","createPortal","useEffect","useCallback","Button"],"mappings":"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","file":"chunk-7ZCNZUZK.cjs","sourcesContent":["import {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button/Button\";\nimport type {\n ContentClipboardPayload,\n ContentClipboardWriter,\n ContentCopyEvent,\n ContentCopyKind,\n} from \"./ContentRenderer.types\";\n\n/** How long the check icon stays after a copy. */\nconst FEEDBACK_MS = 2000;\n/** A clipboard write that never settles is a silent failure; give up after this. */\nconst WRITE_TIMEOUT_MS = 5000;\n\nexport interface CopyContextValue {\n code: boolean;\n table: boolean;\n /** Write, announce, and report one copy. Resolves to whether it worked. */\n copy: (payload: ContentClipboardPayload, button: HTMLElement) => Promise<boolean>;\n /**\n * Progressive streaming closed an open code fence: the last code block of\n * the tail chunk is still arriving and gets no copy button until it closes.\n */\n holdTailCode?: boolean;\n}\n\nexport const CopyContext = createContext<CopyContextValue | null>(null);\n\n/**\n * Default clipboard writer: text/html + text/plain via `ClipboardItem` where\n * the browser has it, else (or if that write rejects) plain `writeText`.\n * Throws when nothing could be written, so the caller can say so.\n */\nexport async function defaultClipboardWriter(payload: ContentClipboardPayload): Promise<void> {\n const clip = typeof navigator !== \"undefined\" ? navigator.clipboard : undefined;\n if (!clip) throw new Error(\"Clipboard API unavailable\");\n\n const Item = (globalThis as { ClipboardItem?: typeof ClipboardItem }).ClipboardItem;\n if (payload.html && Item && typeof clip.write === \"function\") {\n try {\n await clip.write([\n new Item({\n \"text/html\": new Blob([payload.html], { type: \"text/html\" }),\n \"text/plain\": new Blob([payload.text], { type: \"text/plain\" }),\n }),\n ]);\n return;\n } catch {\n // Rich write refused (permissions, unsupported type): fall back to text.\n }\n }\n if (typeof clip.writeText !== \"function\") throw new Error(\"Clipboard writeText unavailable\");\n await clip.writeText(payload.text);\n}\n\n/** Run a writer, treating a throw, a rejection, `false`, or a hang as failure. */\nexport async function runWriter(\n writer: ContentClipboardWriter,\n payload: ContentClipboardPayload,\n): Promise<boolean> {\n let timer: ReturnType<typeof setTimeout> | undefined;\n try {\n const result = await Promise.race([\n Promise.resolve().then(() => writer(payload)),\n new Promise<false>((resolve) => {\n timer = setTimeout(() => resolve(false), WRITE_TIMEOUT_MS);\n }),\n ]);\n return result !== false;\n } catch {\n return false;\n } finally {\n if (timer) clearTimeout(timer);\n }\n}\n\n/** Code exactly as written: the `<code>` text, minus the newline marked appends. */\nexport function codeText(pre: HTMLElement, fromMarkdown: boolean): string {\n const text = (pre.querySelector(\"code\") ?? pre).textContent ?? \"\";\n return fromMarkdown && text.endsWith(\"\\n\") ? text.slice(0, -1) : text;\n}\n\n/** A table as TSV: tab between cells, newline between rows, no trailing newline. */\nexport function tableTsv(table: HTMLTableElement): string {\n const rows: string[] = [];\n for (const tr of Array.from(table.querySelectorAll(\"tr\"))) {\n // Only this table's own cells, not those of a table nested in a cell.\n if (tr.closest(\"table\") !== table) continue;\n const cells = Array.from(tr.children).filter((c) => c.tagName === \"TD\" || c.tagName === \"TH\");\n rows.push(cells.map((c) => cellText(c)).join(\"\\t\"));\n }\n return rows.join(\"\\n\");\n}\n\nfunction cellText(cell: Element): string {\n const clone = cell.cloneNode(true) as Element;\n for (const br of Array.from(clone.querySelectorAll(\"br\"))) br.replaceWith(\" \");\n return (clone.textContent ?? \"\").replace(/[\\t\\r\\n]+/g, \" \").replace(/ {2,}/g, \" \").trim();\n}\n\ninterface Target {\n kind: ContentCopyKind;\n el: HTMLElement;\n host: HTMLElement;\n}\n\n/**\n * Sanitised HTML rendered with `dangerouslySetInnerHTML`, plus a react-fancy\n * copy `Button` portalled next to every `<pre>` and `<table>` in it.\n *\n * Each block is wrapped in a `data-react-fancy-content-copy-block` element and\n * the button lives beside the block, never inside it, so the button's own text\n * can never end up in what is copied.\n */\nexport function HtmlChunk({\n html,\n fromMarkdown,\n tail = false,\n}: {\n html: string;\n fromMarkdown: boolean;\n /** This chunk is the last thing rendered, so it holds any block still arriving. */\n tail?: boolean;\n}) {\n const ref = useRef<HTMLDivElement>(null);\n const ctx = useContext(CopyContext);\n const [targets, setTargets] = useState<Target[]>([]);\n const code = ctx?.code ?? false;\n const table = ctx?.table ?? false;\n const holdLastCode = tail && (ctx?.holdTailCode ?? false);\n // React 19 re-assigns innerHTML whenever this prop is a NEW object, even\n // with the same string, which would wipe the wrappers on every re-render\n // (including the one that mounts the buttons). One object per string.\n const inner = useMemo(() => ({ __html: html }), [html]);\n\n useLayoutEffect(() => {\n const root = ref.current;\n if (!root || (!code && !table)) {\n setTargets([]);\n return;\n }\n const found: Target[] = [];\n const selector = [code && \"pre\", table && \"table\"].filter(Boolean).join(\",\");\n const inProgress = holdLastCode ? Array.from(root.querySelectorAll(\"pre\")).pop() : undefined;\n for (const el of Array.from(root.querySelectorAll<HTMLElement>(selector))) {\n if (el === inProgress) continue;\n const kind: ContentCopyKind = el.tagName === \"PRE\" ? \"code\" : \"table\";\n const wrapper = document.createElement(\"div\");\n wrapper.setAttribute(\"data-react-fancy-content-copy-block\", kind);\n wrapper.className = kind === \"code\" ? \"group relative\" : \"group relative flex flex-col\";\n // Inline too: the code button is absolute, and a host whose Tailwind\n // never generated `relative` would let it escape the block (genie#1290).\n wrapper.style.position = \"relative\";\n const host = document.createElement(\"div\");\n host.setAttribute(\"data-react-fancy-content-copy-host\", \"\");\n host.className =\n kind === \"code\" ? \"absolute right-2 top-2 z-10\" : \"flex justify-end\";\n el.replaceWith(wrapper);\n if (kind === \"table\") wrapper.append(host, el);\n else wrapper.append(el, host);\n found.push({ kind, el, host });\n }\n setTargets(found);\n return () => {\n for (const t of found) {\n const wrapper = t.host.parentElement;\n if (wrapper?.parentNode) wrapper.replaceWith(t.el);\n }\n };\n }, [html, code, table, holdLastCode]);\n\n return (\n <>\n <div ref={ref} dangerouslySetInnerHTML={inner} />\n {targets.map((t, i) =>\n createPortal(\n <CopyButton kind={t.kind} target={t.el} fromMarkdown={fromMarkdown} />,\n t.host,\n `${i}`,\n ),\n )}\n </>\n );\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nfunction CopyButton({\n kind,\n target,\n fromMarkdown,\n}: {\n kind: ContentCopyKind;\n target: HTMLElement;\n fromMarkdown: boolean;\n}) {\n const ctx = useContext(CopyContext);\n const [state, setState] = useState<CopyState>(\"idle\");\n const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n const btn = useRef<HTMLButtonElement>(null);\n\n useEffect(() => () => clearTimeout(timer.current), []);\n\n const onClick = useCallback(async () => {\n if (!ctx || !btn.current) return;\n const text =\n kind === \"code\" ? codeText(target, fromMarkdown) : tableTsv(target as HTMLTableElement);\n const ok = await ctx.copy({ kind, text, html: target.outerHTML }, btn.current);\n setState(ok ? \"copied\" : \"failed\");\n clearTimeout(timer.current);\n timer.current = setTimeout(() => setState(\"idle\"), FEEDBACK_MS);\n }, [ctx, kind, target, fromMarkdown]);\n\n const idleLabel = kind === \"code\" ? \"Copy code\" : \"Copy table\";\n const label = state === \"copied\" ? \"Copied\" : state === \"failed\" ? \"Copy failed\" : idleLabel;\n\n return (\n <Button\n ref={btn}\n type=\"button\"\n size=\"xs\"\n variant=\"ghost\"\n icon={state === \"copied\" ? \"check\" : state === \"failed\" ? \"x\" : \"copy\"}\n aria-label={label}\n title={label}\n data-react-fancy-content-copy={kind}\n data-copy-state={state}\n onClick={onClick}\n className={\n kind === \"code\"\n ? \"text-zinc-300 hover:bg-zinc-800 hover:text-white opacity-70 group-hover:opacity-100 focus-visible:opacity-100\"\n : \"opacity-70 group-hover:opacity-100 focus-visible:opacity-100\"\n }\n />\n );\n}\n\n/** Build the copy pipeline a ContentRenderer root shares with its chunks. */\nexport function useCopyPipeline({\n writer,\n onCopy,\n rootRef,\n announce,\n}: {\n writer: ContentClipboardWriter | undefined;\n onCopy: ((event: ContentCopyEvent) => void) | undefined;\n rootRef: RefObject<HTMLElement | null>;\n announce: (message: string) => void;\n}) {\n // Read the latest props at click time without re-creating the context.\n const latest = useRef({ writer, onCopy, announce });\n latest.current = { writer, onCopy, announce };\n\n return useCallback(\n async (payload: ContentClipboardPayload, button: HTMLElement) => {\n const { writer: w, onCopy: report, announce: say } = latest.current;\n const ok = await runWriter(w ?? defaultClipboardWriter, payload);\n say(ok ? \"Copied\" : \"Copy failed\");\n const all = rootRef.current\n ? Array.from(rootRef.current.querySelectorAll(\"[data-react-fancy-content-copy]\"))\n : [];\n report?.({ ...payload, index: all.indexOf(button), ok });\n return ok;\n },\n [rootRef],\n );\n}\n"]}
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { runWriter, defaultClipboardWriter } from './chunk-J2BWXCES.js';
|
|
2
|
+
import { visuallyHidden } from './chunk-I3LAFKJU.js';
|
|
3
|
+
import { useIsDark } from './chunk-6BB32POL.js';
|
|
4
|
+
import { Button } from './chunk-4GPH7HOR.js';
|
|
5
|
+
import { cn } from './chunk-MMW2JGKZ.js';
|
|
6
|
+
import { forwardRef, useMemo, useState, useRef, useEffect, useCallback } from 'react';
|
|
7
|
+
import { highlightCode, DARK_COLORS, LIGHT_COLORS, tokenizeHtml } from '@particle-academy/fancy-file-commons';
|
|
8
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
var FEEDBACK_MS = 2e3;
|
|
11
|
+
var HTML_ALIASES = /* @__PURE__ */ new Set(["html", "htm", "xml", "xhtml"]);
|
|
12
|
+
function tokensFor(code, language) {
|
|
13
|
+
return HTML_ALIASES.has(language.toLowerCase()) ? tokenizeHtml(code) : [];
|
|
14
|
+
}
|
|
15
|
+
function highlightLines(code, tokens, colors) {
|
|
16
|
+
const out = [];
|
|
17
|
+
let start = 0;
|
|
18
|
+
let ti = 0;
|
|
19
|
+
for (const line of code.split("\n")) {
|
|
20
|
+
const end = start + line.length;
|
|
21
|
+
while (ti < tokens.length && tokens[ti].end <= start) ti++;
|
|
22
|
+
const clipped = [];
|
|
23
|
+
for (let j = ti; j < tokens.length && tokens[j].start < end; j++) {
|
|
24
|
+
const s = Math.max(tokens[j].start, start) - start;
|
|
25
|
+
const e = Math.min(tokens[j].end, end) - start;
|
|
26
|
+
if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });
|
|
27
|
+
}
|
|
28
|
+
out.push(highlightCode(line, clipped, colors));
|
|
29
|
+
start = end + 1;
|
|
30
|
+
}
|
|
31
|
+
return out;
|
|
32
|
+
}
|
|
33
|
+
var TEXT_METRICS = "m-0 p-3 font-mono text-xs leading-relaxed";
|
|
34
|
+
var CodeBlock = forwardRef(function CodeBlock2({
|
|
35
|
+
code,
|
|
36
|
+
language = "plaintext",
|
|
37
|
+
copyable = true,
|
|
38
|
+
title,
|
|
39
|
+
showLineNumbers = false,
|
|
40
|
+
wrap = false,
|
|
41
|
+
copyLabels,
|
|
42
|
+
onCopyCode,
|
|
43
|
+
className,
|
|
44
|
+
style,
|
|
45
|
+
...rest
|
|
46
|
+
}, ref) {
|
|
47
|
+
const isDark = useIsDark();
|
|
48
|
+
const colors = isDark ? DARK_COLORS : LIGHT_COLORS;
|
|
49
|
+
const tokens = useMemo(() => tokensFor(code, language), [code, language]);
|
|
50
|
+
const html = useMemo(
|
|
51
|
+
() => showLineNumbers ? null : highlightCode(code, tokens, colors),
|
|
52
|
+
[code, tokens, colors, showLineNumbers]
|
|
53
|
+
);
|
|
54
|
+
const lines = useMemo(() => {
|
|
55
|
+
if (!showLineNumbers) return null;
|
|
56
|
+
const all = highlightLines(code, tokens, colors);
|
|
57
|
+
if (all.length > 1 && code.endsWith("\n")) all.pop();
|
|
58
|
+
return all;
|
|
59
|
+
}, [code, tokens, colors, showLineNumbers]);
|
|
60
|
+
const [copyState, setCopyState] = useState("idle");
|
|
61
|
+
const timer = useRef(void 0);
|
|
62
|
+
useEffect(() => () => clearTimeout(timer.current), []);
|
|
63
|
+
const latest = useRef({ code, onCopyCode });
|
|
64
|
+
latest.current = { code, onCopyCode };
|
|
65
|
+
const onCopyClick = useCallback(async () => {
|
|
66
|
+
const { code: text, onCopyCode: report } = latest.current;
|
|
67
|
+
const ok = await runWriter(defaultClipboardWriter, { kind: "code", text, html: "" });
|
|
68
|
+
setCopyState(ok ? "copied" : "failed");
|
|
69
|
+
clearTimeout(timer.current);
|
|
70
|
+
timer.current = setTimeout(() => setCopyState("idle"), FEEDBACK_MS);
|
|
71
|
+
report?.({ text, ok });
|
|
72
|
+
}, []);
|
|
73
|
+
const labels = {
|
|
74
|
+
copy: copyLabels?.copy ?? "Copy code",
|
|
75
|
+
copied: copyLabels?.copied ?? "Copied",
|
|
76
|
+
failed: copyLabels?.failed ?? "Copy failed"
|
|
77
|
+
};
|
|
78
|
+
const label = copyState === "copied" ? labels.copied : copyState === "failed" ? labels.failed : labels.copy;
|
|
79
|
+
const hasHeader = title != null && title !== false;
|
|
80
|
+
const floating = copyable && !hasHeader;
|
|
81
|
+
const copyButton = copyable ? /* @__PURE__ */ jsx(
|
|
82
|
+
Button,
|
|
83
|
+
{
|
|
84
|
+
type: "button",
|
|
85
|
+
size: "xs",
|
|
86
|
+
variant: "ghost",
|
|
87
|
+
icon: copyState === "copied" ? "check" : copyState === "failed" ? "x" : "copy",
|
|
88
|
+
"aria-label": label,
|
|
89
|
+
title: label,
|
|
90
|
+
"data-react-fancy-code-block-copy": "",
|
|
91
|
+
"data-copy-state": copyState,
|
|
92
|
+
onClick: onCopyClick,
|
|
93
|
+
className: cn(
|
|
94
|
+
floating && "opacity-80 group-hover:opacity-100 focus-visible:opacity-100"
|
|
95
|
+
),
|
|
96
|
+
style: floating ? { backgroundColor: colors.background } : void 0,
|
|
97
|
+
children: copyState !== "idle" ? label : hasHeader ? "Copy" : void 0
|
|
98
|
+
}
|
|
99
|
+
) : null;
|
|
100
|
+
const gutterWidth = lines ? `${String(lines.length).length}ch` : void 0;
|
|
101
|
+
return /* @__PURE__ */ jsxs(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
ref,
|
|
105
|
+
"data-react-fancy-code-block": "",
|
|
106
|
+
"data-language": language,
|
|
107
|
+
"data-wrap": wrap ? "true" : "false",
|
|
108
|
+
className: cn(
|
|
109
|
+
"group relative overflow-hidden rounded-lg border",
|
|
110
|
+
className
|
|
111
|
+
),
|
|
112
|
+
style: {
|
|
113
|
+
backgroundColor: colors.background,
|
|
114
|
+
color: colors.foreground,
|
|
115
|
+
borderColor: colors.gutterBorder,
|
|
116
|
+
// `relative` inline too: the floating button and the live region are
|
|
117
|
+
// absolute, and must not escape a host whose Tailwind lacks the class.
|
|
118
|
+
position: "relative",
|
|
119
|
+
...style
|
|
120
|
+
},
|
|
121
|
+
...rest,
|
|
122
|
+
children: [
|
|
123
|
+
hasHeader && /* @__PURE__ */ jsxs(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
"data-react-fancy-code-block-header": "",
|
|
127
|
+
className: "flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs",
|
|
128
|
+
style: {
|
|
129
|
+
backgroundColor: colors.gutterBackground,
|
|
130
|
+
color: colors.gutterForeground,
|
|
131
|
+
borderColor: colors.gutterBorder
|
|
132
|
+
},
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ jsx("span", { "data-react-fancy-code-block-title": "", className: "min-w-0 truncate font-mono", children: title }),
|
|
135
|
+
copyButton
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
),
|
|
139
|
+
/* @__PURE__ */ jsx(
|
|
140
|
+
"pre",
|
|
141
|
+
{
|
|
142
|
+
"data-react-fancy-code-block-pre": "",
|
|
143
|
+
className: cn(TEXT_METRICS, "border-none", wrap ? "overflow-x-hidden" : "overflow-x-auto", floating && "pr-12"),
|
|
144
|
+
style: {
|
|
145
|
+
whiteSpace: wrap ? "pre-wrap" : "pre",
|
|
146
|
+
overflowWrap: wrap ? "break-word" : "normal",
|
|
147
|
+
backgroundColor: "transparent",
|
|
148
|
+
color: "inherit"
|
|
149
|
+
},
|
|
150
|
+
children: lines ? /* @__PURE__ */ jsx(
|
|
151
|
+
"code",
|
|
152
|
+
{
|
|
153
|
+
"data-react-fancy-code-block-code": "",
|
|
154
|
+
style: { display: wrap ? "block" : "inline-block", minWidth: "100%" },
|
|
155
|
+
children: lines.map((lineHtml, i) => /* @__PURE__ */ jsxs("span", { "data-react-fancy-code-block-line": i + 1, style: { display: "flex" }, children: [
|
|
156
|
+
/* @__PURE__ */ jsx(
|
|
157
|
+
"span",
|
|
158
|
+
{
|
|
159
|
+
"data-react-fancy-code-block-line-number": "",
|
|
160
|
+
"aria-hidden": "true",
|
|
161
|
+
className: "select-none",
|
|
162
|
+
style: {
|
|
163
|
+
flex: "none",
|
|
164
|
+
width: gutterWidth,
|
|
165
|
+
marginRight: "1.5ch",
|
|
166
|
+
textAlign: "right",
|
|
167
|
+
color: colors.gutterForeground,
|
|
168
|
+
userSelect: "none"
|
|
169
|
+
},
|
|
170
|
+
children: i + 1
|
|
171
|
+
}
|
|
172
|
+
),
|
|
173
|
+
/* @__PURE__ */ jsx(
|
|
174
|
+
"span",
|
|
175
|
+
{
|
|
176
|
+
"data-react-fancy-code-block-line-content": "",
|
|
177
|
+
style: { flex: "1 1 auto", minWidth: 0 },
|
|
178
|
+
dangerouslySetInnerHTML: { __html: lineHtml }
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
] }, i))
|
|
182
|
+
}
|
|
183
|
+
) : /* @__PURE__ */ jsx("code", { "data-react-fancy-code-block-code": "", dangerouslySetInnerHTML: { __html: html ?? "" } })
|
|
184
|
+
}
|
|
185
|
+
),
|
|
186
|
+
floating && /* @__PURE__ */ jsx(
|
|
187
|
+
"div",
|
|
188
|
+
{
|
|
189
|
+
"data-react-fancy-code-block-actions": "",
|
|
190
|
+
className: "absolute right-2 top-2",
|
|
191
|
+
style: { position: "absolute", right: "0.5rem", top: "0.5rem" },
|
|
192
|
+
children: copyButton
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
copyable && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", style: visuallyHidden, children: copyState === "idle" ? "" : label })
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
});
|
|
200
|
+
CodeBlock.displayName = "CodeBlock";
|
|
201
|
+
|
|
202
|
+
export { CodeBlock };
|
|
203
|
+
//# sourceMappingURL=chunk-AHZIT3CM.js.map
|
|
204
|
+
//# sourceMappingURL=chunk-AHZIT3CM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/CodeBlock/CodeBlock.tsx"],"names":["CodeBlock"],"mappings":"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","file":"chunk-AHZIT3CM.js","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n highlightCode,\n tokenizeHtml,\n LIGHT_COLORS,\n DARK_COLORS,\n type ThemeColors,\n type Token,\n} from \"@particle-academy/fancy-file-commons\";\nimport { cn } from \"../../utils/cn\";\nimport { visuallyHidden } from \"../../utils/visually-hidden\";\nimport { Button } from \"../Button/Button\";\nimport { defaultClipboardWriter, runWriter } from \"../ContentRenderer/copy\";\nimport { useIsDark } from \"../CodeView/use-is-dark\";\nimport type { CodeBlockProps } from \"./CodeBlock.types\";\n\n/** How long \"Copied\" / \"Copy failed\" stays before the button resets. */\nconst FEEDBACK_MS = 2000;\n\n/** Language ids that map to the one grammar fancy-file-commons ships. */\nconst HTML_ALIASES = new Set([\"html\", \"htm\", \"xml\", \"xhtml\"]);\n\nfunction tokensFor(code: string, language: string): Token[] {\n return HTML_ALIASES.has(language.toLowerCase()) ? tokenizeHtml(code) : [];\n}\n\n/**\n * Highlight one line at a time, clipping each token to the line it falls on, so\n * a token that spans lines (an HTML comment) keeps its colour on every line.\n * `highlightCode` escapes every slice it emits, highlighted or not.\n */\nfunction highlightLines(code: string, tokens: Token[], colors: ThemeColors): string[] {\n const out: string[] = [];\n let start = 0;\n let ti = 0;\n for (const line of code.split(\"\\n\")) {\n const end = start + line.length;\n while (ti < tokens.length && tokens[ti].end <= start) ti++;\n const clipped: Token[] = [];\n for (let j = ti; j < tokens.length && tokens[j].start < end; j++) {\n const s = Math.max(tokens[j].start, start) - start;\n const e = Math.min(tokens[j].end, end) - start;\n if (e > s) clipped.push({ type: tokens[j].type, start: s, end: e });\n }\n out.push(highlightCode(line, clipped, colors));\n start = end + 1;\n }\n return out;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\n// Matches CodeView's text metrics so the two sit together.\nconst TEXT_METRICS = \"m-0 p-3 font-mono text-xs leading-relaxed\";\n\n/**\n * A display-only code block: `<pre><code>`, syntax-highlighted where a grammar\n * exists, with an optional copy button. It contains no textarea, input, select\n * or contenteditable element, so it is safe on pages that must not accept\n * input. For an editable or selectable source surface, use `CodeView`.\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n {\n code,\n language = \"plaintext\",\n copyable = true,\n title,\n showLineNumbers = false,\n wrap = false,\n copyLabels,\n onCopyCode,\n className,\n style,\n ...rest\n },\n ref,\n) {\n const isDark = useIsDark();\n const colors: ThemeColors = isDark ? DARK_COLORS : LIGHT_COLORS;\n\n const tokens = useMemo(() => tokensFor(code, language), [code, language]);\n const html = useMemo(\n () => (showLineNumbers ? null : highlightCode(code, tokens, colors)),\n [code, tokens, colors, showLineNumbers],\n );\n const lines = useMemo(() => {\n if (!showLineNumbers) return null;\n const all = highlightLines(code, tokens, colors);\n // A trailing newline ends the last line; it does not start a new one.\n if (all.length > 1 && code.endsWith(\"\\n\")) all.pop();\n return all;\n }, [code, tokens, colors, showLineNumbers]);\n\n const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n useEffect(() => () => clearTimeout(timer.current), []);\n\n // Latest props at click time, without re-creating the handler.\n const latest = useRef({ code, onCopyCode });\n latest.current = { code, onCopyCode };\n\n const onCopyClick = useCallback(async () => {\n const { code: text, onCopyCode: report } = latest.current;\n // Raw `code`, never the highlighted HTML. `defaultClipboardWriter` throws\n // when `navigator.clipboard` is absent (SSR, insecure context), and\n // `runWriter` turns a throw, rejection or hang into `false`.\n const ok = await runWriter(defaultClipboardWriter, { kind: \"code\", text, html: \"\" });\n setCopyState(ok ? \"copied\" : \"failed\");\n clearTimeout(timer.current);\n timer.current = setTimeout(() => setCopyState(\"idle\"), FEEDBACK_MS);\n report?.({ text, ok });\n }, []);\n\n const labels = {\n copy: copyLabels?.copy ?? \"Copy code\",\n copied: copyLabels?.copied ?? \"Copied\",\n failed: copyLabels?.failed ?? \"Copy failed\",\n };\n const label = copyState === \"copied\" ? labels.copied : copyState === \"failed\" ? labels.failed : labels.copy;\n const hasHeader = title != null && title !== false;\n const floating = copyable && !hasHeader;\n\n const copyButton = copyable ? (\n <Button\n type=\"button\"\n size=\"xs\"\n variant=\"ghost\"\n icon={copyState === \"copied\" ? \"check\" : copyState === \"failed\" ? \"x\" : \"copy\"}\n aria-label={label}\n title={label}\n data-react-fancy-code-block-copy=\"\"\n data-copy-state={copyState}\n onClick={onCopyClick}\n className={cn(\n floating && \"opacity-80 group-hover:opacity-100 focus-visible:opacity-100\",\n )}\n style={floating ? { backgroundColor: colors.background } : undefined}\n >\n {/* Visible feedback; idle is icon-only when floating over the code. */}\n {copyState !== \"idle\" ? label : hasHeader ? \"Copy\" : undefined}\n </Button>\n ) : null;\n\n const gutterWidth = lines ? `${String(lines.length).length}ch` : undefined;\n\n return (\n <div\n ref={ref}\n data-react-fancy-code-block=\"\"\n data-language={language}\n data-wrap={wrap ? \"true\" : \"false\"}\n className={cn(\n \"group relative overflow-hidden rounded-lg border\",\n className,\n )}\n style={{\n backgroundColor: colors.background,\n color: colors.foreground,\n borderColor: colors.gutterBorder,\n // `relative` inline too: the floating button and the live region are\n // absolute, and must not escape a host whose Tailwind lacks the class.\n position: \"relative\",\n ...style,\n }}\n {...rest}\n >\n {hasHeader && (\n <div\n data-react-fancy-code-block-header=\"\"\n className=\"flex items-center justify-between gap-2 border-b py-1 pl-3 pr-1 text-xs\"\n style={{\n backgroundColor: colors.gutterBackground,\n color: colors.gutterForeground,\n borderColor: colors.gutterBorder,\n }}\n >\n <span data-react-fancy-code-block-title=\"\" className=\"min-w-0 truncate font-mono\">\n {title}\n </span>\n {copyButton}\n </div>\n )}\n\n <pre\n data-react-fancy-code-block-pre=\"\"\n className={cn(TEXT_METRICS, \"border-none\", wrap ? \"overflow-x-hidden\" : \"overflow-x-auto\", floating && \"pr-12\")}\n style={{\n whiteSpace: wrap ? \"pre-wrap\" : \"pre\",\n overflowWrap: wrap ? \"break-word\" : \"normal\",\n backgroundColor: \"transparent\",\n color: \"inherit\",\n }}\n >\n {lines ? (\n <code\n data-react-fancy-code-block-code=\"\"\n style={{ display: wrap ? \"block\" : \"inline-block\", minWidth: \"100%\" }}\n >\n {lines.map((lineHtml, i) => (\n <span key={i} data-react-fancy-code-block-line={i + 1} style={{ display: \"flex\" }}>\n <span\n data-react-fancy-code-block-line-number=\"\"\n aria-hidden=\"true\"\n className=\"select-none\"\n style={{\n flex: \"none\",\n width: gutterWidth,\n marginRight: \"1.5ch\",\n textAlign: \"right\",\n color: colors.gutterForeground,\n userSelect: \"none\",\n }}\n >\n {i + 1}\n </span>\n <span\n data-react-fancy-code-block-line-content=\"\"\n style={{ flex: \"1 1 auto\", minWidth: 0 }}\n dangerouslySetInnerHTML={{ __html: lineHtml }}\n />\n </span>\n ))}\n </code>\n ) : (\n <code data-react-fancy-code-block-code=\"\" dangerouslySetInnerHTML={{ __html: html ?? \"\" }} />\n )}\n </pre>\n\n {floating && (\n <div\n data-react-fancy-code-block-actions=\"\"\n className=\"absolute right-2 top-2\"\n style={{ position: \"absolute\", right: \"0.5rem\", top: \"0.5rem\" }}\n >\n {copyButton}\n </div>\n )}\n\n {copyable && (\n <span role=\"status\" aria-live=\"polite\" className=\"sr-only\" style={visuallyHidden}>\n {copyState === \"idle\" ? \"\" : label}\n </span>\n )}\n </div>\n );\n});\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var chunk6V44RRSB_cjs = require('./chunk-6V44RRSB.cjs');
|
|
3
4
|
var chunkJ2DI6RMR_cjs = require('./chunk-J2DI6RMR.cjs');
|
|
5
|
+
var chunkTI7D4QDM_cjs = require('./chunk-TI7D4QDM.cjs');
|
|
4
6
|
var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
|
|
5
7
|
var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
|
|
6
|
-
var chunk6V44RRSB_cjs = require('./chunk-6V44RRSB.cjs');
|
|
7
|
-
var chunkTI7D4QDM_cjs = require('./chunk-TI7D4QDM.cjs');
|
|
8
8
|
var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
|
|
9
9
|
var chunkOUYC6EIL_cjs = require('./chunk-OUYC6EIL.cjs');
|
|
10
10
|
var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
|
|
@@ -199,5 +199,5 @@ function HighlightMatch({ text, query }) {
|
|
|
199
199
|
Autocomplete.displayName = "Autocomplete";
|
|
200
200
|
|
|
201
201
|
exports.Autocomplete = Autocomplete;
|
|
202
|
-
//# sourceMappingURL=chunk-
|
|
203
|
-
//# sourceMappingURL=chunk-
|
|
202
|
+
//# sourceMappingURL=chunk-BYO5RUDE.cjs.map
|
|
203
|
+
//# sourceMappingURL=chunk-BYO5RUDE.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":["forwardRef","Autocomplete","useControllableState","useFieldMode","useInlineEdit","useState","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useEffect","isImeComposing","jsx","cn","jsxs","Portal","Fragment"],"mappings":"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","file":"chunk-MP55W37V.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { isImeComposing } from \"../../utils/ime\";\nimport { Portal } from \"../Portal\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { AutocompleteProps } from \"./Autocomplete.types\";\n\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSearch,\n options,\n placeholder,\n loading = false,\n emptyMessage = \"No results found.\",\n disabled = false,\n className,\n mode,\n },\n ref,\n ) {\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [query, setQuery] = useState(value);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const anchorRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, listRef, {\n placement: \"bottom-start\",\n offset: 4,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n useOutsideClick(wrapperRef, close, open);\n useEscapeKey(close, open);\n\n const filtered = options.filter((o) =>\n o.label.toLowerCase().includes(query.toLowerCase()),\n );\n\n const select = useCallback(\n (val: string) => {\n setValue(val);\n const opt = options.find((o) => o.value === val);\n setQuery(opt?.label ?? val);\n close();\n },\n [setValue, options, close],\n );\n\n useEffect(() => {\n onSearch?.(query);\n }, [query, onSearch]);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!open) {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n return;\n }\n return;\n }\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\" && activeIndex >= 0 && !isImeComposing(e)) {\n e.preventDefault();\n const item = filtered[activeIndex];\n if (item && !item.disabled) select(item.value);\n }\n };\n\n if (!showControl) {\n const matched = options.find((o) => o.value === value);\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n data-mode=\"view\"\n ref={wrapperRef}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n !value && \"text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {matched?.label ?? value ?? \"—\"}\n </div>\n );\n }\n\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n ref={wrapperRef}\n className={cn(\"relative\", className)}\n onBlur={(e) => {\n // Options live in a Portal; only exit when closed and focus left.\n if (interactive && !open && !e.currentTarget.contains(e.relatedTarget as Node)) {\n exitEdit();\n }\n }}\n >\n <input\n ref={(node) => {\n (anchorRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }}\n type=\"text\"\n value={query}\n onChange={(e) => {\n setQuery(e.target.value);\n setOpen(true);\n setActiveIndex(-1);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n autoFocus={interactive}\n role=\"combobox\"\n aria-expanded={open}\n aria-autocomplete=\"list\"\n className=\"w-full rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] placeholder:text-[color:var(--fancy-text-faint,var(--color-zinc-400))] outline-none transition-[border-color,box-shadow] duration-150 focus:border-[color:var(--fancy-focus,var(--color-blue-500))] focus:ring-2 focus:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))] dark:placeholder:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:focus:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\"\n />\n {open && (\n <Portal>\n <div\n ref={listRef}\n role=\"listbox\"\n className=\"fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:shadow-zinc-950/50 fancy-scale-in\"\n style={{\n left: position.x,\n top: position.y,\n width: anchorRef.current?.offsetWidth,\n }}\n >\n {loading ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">Loading...</div>\n ) : filtered.length === 0 ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">\n {emptyMessage}\n </div>\n ) : (\n filtered.map((option, i) => (\n <button\n key={option.value}\n type=\"button\"\n role=\"option\"\n aria-selected={i === activeIndex}\n disabled={option.disabled}\n onClick={() => select(option.value)}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200\",\n i === activeIndex\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n : \"hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))]\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <HighlightMatch text={option.label} query={query} />\n </button>\n ))\n )}\n </div>\n </Portal>\n )}\n </div>\n );\n },\n);\n\nfunction HighlightMatch({ text, query }: { text: string; query: string }) {\n if (!query) return <>{text}</>;\n\n const idx = text.toLowerCase().indexOf(query.toLowerCase());\n if (idx === -1) return <>{text}</>;\n\n return (\n <>\n {text.slice(0, idx)}\n <span className=\"font-semibold text-zinc-900 dark:text-white\">\n {text.slice(idx, idx + query.length)}\n </span>\n {text.slice(idx + query.length)}\n </>\n );\n}\n\nAutocomplete.displayName = \"Autocomplete\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":["forwardRef","Autocomplete","useControllableState","useFieldMode","useInlineEdit","useState","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useEffect","isImeComposing","jsx","cn","jsxs","Portal","Fragment"],"mappings":"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","file":"chunk-BYO5RUDE.cjs","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { isImeComposing } from \"../../utils/ime\";\nimport { Portal } from \"../Portal\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport { useInlineEdit } from \"../inputs/mode/useInlineEdit\";\nimport type { AutocompleteProps } from \"./Autocomplete.types\";\n\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n function Autocomplete(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSearch,\n options,\n placeholder,\n loading = false,\n emptyMessage = \"No results found.\",\n disabled = false,\n className,\n mode,\n },\n ref,\n ) {\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const resolvedMode = useFieldMode(mode);\n const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n const [query, setQuery] = useState(value);\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n\n const anchorRef = useRef<HTMLInputElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, listRef, {\n placement: \"bottom-start\",\n offset: 4,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, []);\n\n useOutsideClick(wrapperRef, close, open);\n useEscapeKey(close, open);\n\n const filtered = options.filter((o) =>\n o.label.toLowerCase().includes(query.toLowerCase()),\n );\n\n const select = useCallback(\n (val: string) => {\n setValue(val);\n const opt = options.find((o) => o.value === val);\n setQuery(opt?.label ?? val);\n close();\n },\n [setValue, options, close],\n );\n\n useEffect(() => {\n onSearch?.(query);\n }, [query, onSearch]);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!open) {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n return;\n }\n return;\n }\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setActiveIndex((i) => Math.max(i - 1, 0));\n } else if (e.key === \"Enter\" && activeIndex >= 0 && !isImeComposing(e)) {\n e.preventDefault();\n const item = filtered[activeIndex];\n if (item && !item.disabled) select(item.value);\n }\n };\n\n if (!showControl) {\n const matched = options.find((o) => o.value === value);\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n data-mode=\"view\"\n ref={wrapperRef}\n role={interactive ? \"button\" : undefined}\n tabIndex={interactive ? 0 : undefined}\n title={interactive ? \"Click to edit\" : undefined}\n onClick={interactive ? enterEdit : undefined}\n onKeyDown={\n interactive\n ? (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n enterEdit();\n }\n }\n : undefined\n }\n className={cn(\n \"text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n !value && \"text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\",\n interactive &&\n \"cursor-pointer rounded-md outline-none transition-colors hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n className,\n )}\n >\n {matched?.label ?? value ?? \"—\"}\n </div>\n );\n }\n\n return (\n <div\n data-react-fancy-autocomplete=\"\"\n ref={wrapperRef}\n className={cn(\"relative\", className)}\n onBlur={(e) => {\n // Options live in a Portal; only exit when closed and focus left.\n if (interactive && !open && !e.currentTarget.contains(e.relatedTarget as Node)) {\n exitEdit();\n }\n }}\n >\n <input\n ref={(node) => {\n (anchorRef as React.MutableRefObject<HTMLInputElement | null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n }}\n type=\"text\"\n value={query}\n onChange={(e) => {\n setQuery(e.target.value);\n setOpen(true);\n setActiveIndex(-1);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n autoFocus={interactive}\n role=\"combobox\"\n aria-expanded={open}\n aria-autocomplete=\"list\"\n className=\"w-full rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-input,var(--color-white))] px-3 py-2 text-sm text-[color:var(--fancy-text,var(--color-zinc-900))] placeholder:text-[color:var(--fancy-text-faint,var(--color-zinc-400))] outline-none transition-[border-color,box-shadow] duration-150 focus:border-[color:var(--fancy-focus,var(--color-blue-500))] focus:ring-2 focus:ring-[color:var(--fancy-focus,var(--color-blue-500))]/40 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-input-dark,#1e1e24)] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))] dark:placeholder:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))] dark:focus:border-[color:var(--fancy-focus-dark,var(--color-blue-400))] dark:focus:ring-[color:var(--fancy-focus-dark,var(--color-blue-400))]/20\"\n />\n {open && (\n <Portal>\n <div\n ref={listRef}\n role=\"listbox\"\n className=\"fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:shadow-zinc-950/50 fancy-scale-in\"\n style={{\n left: position.x,\n top: position.y,\n width: anchorRef.current?.offsetWidth,\n }}\n >\n {loading ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">Loading...</div>\n ) : filtered.length === 0 ? (\n <div className=\"px-3 py-2 text-sm text-zinc-400\">\n {emptyMessage}\n </div>\n ) : (\n filtered.map((option, i) => (\n <button\n key={option.value}\n type=\"button\"\n role=\"option\"\n aria-selected={i === activeIndex}\n disabled={option.disabled}\n onClick={() => select(option.value)}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm text-zinc-700 transition-colors dark:text-zinc-200\",\n i === activeIndex\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n : \"hover:bg-[color:var(--fancy-surface-hover,var(--color-zinc-50))] dark:hover:bg-[color:var(--fancy-surface-hover-dark,color-mix(in_oklab,var(--color-zinc-800)_50%,transparent))]\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <HighlightMatch text={option.label} query={query} />\n </button>\n ))\n )}\n </div>\n </Portal>\n )}\n </div>\n );\n },\n);\n\nfunction HighlightMatch({ text, query }: { text: string; query: string }) {\n if (!query) return <>{text}</>;\n\n const idx = text.toLowerCase().indexOf(query.toLowerCase());\n if (idx === -1) return <>{text}</>;\n\n return (\n <>\n {text.slice(0, idx)}\n <span className=\"font-semibold text-zinc-900 dark:text-white\">\n {text.slice(idx, idx + query.length)}\n </span>\n {text.slice(idx + query.length)}\n </>\n );\n}\n\nAutocomplete.displayName = \"Autocomplete\";\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Text } from './chunk-XM3V3RSU.js';
|
|
2
1
|
import { Heading } from './chunk-QPM4CZ4G.js';
|
|
2
|
+
import { Text } from './chunk-XM3V3RSU.js';
|
|
3
3
|
import { cn } from './chunk-MMW2JGKZ.js';
|
|
4
4
|
import { createContext, forwardRef, useMemo, useContext } from 'react';
|
|
5
5
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
@@ -388,5 +388,5 @@ var Card = Object.assign(CardRoot, {
|
|
|
388
388
|
});
|
|
389
389
|
|
|
390
390
|
export { Card, CardBleed, CardBody, CardFooter, CardHeader, CardMedia };
|
|
391
|
-
//# sourceMappingURL=chunk-
|
|
392
|
-
//# sourceMappingURL=chunk-
|
|
391
|
+
//# sourceMappingURL=chunk-EENHSMV2.js.map
|
|
392
|
+
//# sourceMappingURL=chunk-EENHSMV2.js.map
|