@particle-academy/react-fancy 5.19.0 → 5.21.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/dist/{AudioViewer.types-VWhRx6XG.d.cts → AudioViewer.types-CyhmQVQd.d.cts} +13 -0
- package/dist/{AudioViewer.types-VWhRx6XG.d.ts → AudioViewer.types-CyhmQVQd.d.ts} +13 -0
- package/dist/{VideoViewer.types-CTwS6PcM.d.cts → VideoViewer.types-_AwQ8DQr.d.cts} +13 -0
- package/dist/{VideoViewer.types-CTwS6PcM.d.ts → VideoViewer.types-_AwQ8DQr.d.ts} +13 -0
- package/dist/audio-viewer.cjs +2 -2
- package/dist/audio-viewer.d.cts +1 -1
- package/dist/audio-viewer.d.ts +1 -1
- package/dist/audio-viewer.js +1 -1
- package/dist/{chunk-3GRC5J2L.cjs → chunk-3MHVFEIP.cjs} +4 -2
- package/dist/chunk-3MHVFEIP.cjs.map +1 -0
- package/dist/{chunk-EIBW5YLS.js → chunk-74ZN5CNE.js} +4 -2
- package/dist/chunk-74ZN5CNE.js.map +1 -0
- package/dist/{chunk-KE7KXY5C.cjs → chunk-BWTFK2GV.cjs} +6 -6
- package/dist/{chunk-KE7KXY5C.cjs.map → chunk-BWTFK2GV.cjs.map} +1 -1
- package/dist/chunk-FWCREAIT.js +121 -0
- package/dist/chunk-FWCREAIT.js.map +1 -0
- package/dist/chunk-HPNIEYSJ.cjs +131 -0
- package/dist/chunk-HPNIEYSJ.cjs.map +1 -0
- package/dist/{chunk-3ETOEEVN.cjs → chunk-I462NM2A.cjs} +4 -2
- package/dist/chunk-I462NM2A.cjs.map +1 -0
- package/dist/{chunk-J3XS4HHX.js → chunk-QWSTG5MF.js} +4 -4
- package/dist/{chunk-J3XS4HHX.js.map → chunk-QWSTG5MF.js.map} +1 -1
- package/dist/{chunk-JKO2Y5SH.js → chunk-YVDAXYHP.js} +4 -2
- package/dist/chunk-YVDAXYHP.js.map +1 -0
- package/dist/editor.cjs +1 -1
- package/dist/editor.js +1 -1
- package/dist/{index-B71wa9AW.d.cts → index-CgPpIw_O.d.cts} +2 -2
- package/dist/{index-bIntFOl5.d.ts → index-IeivGsNg.d.ts} +2 -2
- package/dist/index.cjs +38 -10
- package/dist/index.d.cts +75 -4
- package/dist/index.d.ts +75 -4
- package/dist/index.js +4 -4
- package/dist/media-viewer.cjs +4 -4
- package/dist/media-viewer.d.cts +3 -3
- package/dist/media-viewer.d.ts +3 -3
- package/dist/media-viewer.js +3 -3
- package/dist/mobile-menu.cjs +1 -1
- package/dist/mobile-menu.js +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.js +1 -1
- package/dist/video-viewer.cjs +2 -2
- package/dist/video-viewer.d.cts +1 -1
- package/dist/video-viewer.d.ts +1 -1
- package/dist/video-viewer.js +1 -1
- package/package.json +2 -2
- package/dist/chunk-3ETOEEVN.cjs.map +0 -1
- package/dist/chunk-3GRC5J2L.cjs.map +0 -1
- package/dist/chunk-EIBW5YLS.js.map +0 -1
- package/dist/chunk-G34OBTU3.cjs +0 -27
- package/dist/chunk-G34OBTU3.cjs.map +0 -1
- package/dist/chunk-JKO2Y5SH.js.map +0 -1
- package/dist/chunk-RNPFSVFN.js +0 -24
- package/dist/chunk-RNPFSVFN.js.map +0 -1
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
interface AudioViewerProps {
|
|
4
|
+
/**
|
|
5
|
+
* How much to fetch before playback is requested.
|
|
6
|
+
*
|
|
7
|
+
* Defaults to `"metadata"` — duration and the scrubber, nothing more. With no
|
|
8
|
+
* attribute the browser decides, and Chrome decides `"auto"` for audio, which
|
|
9
|
+
* means simply RENDERING the component downloads the whole file. Measured on
|
|
10
|
+
* the Fancy showcase: one audio tile on the package grid transferred 995 KB
|
|
11
|
+
* before anyone pressed play.
|
|
12
|
+
*
|
|
13
|
+
* Pass `"none"` for a thumbnail that should cost nothing, or `"auto"` to
|
|
14
|
+
* restore the eager behaviour deliberately.
|
|
15
|
+
*/
|
|
16
|
+
preload?: "none" | "metadata" | "auto";
|
|
4
17
|
/** Audio source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
5
18
|
src: string;
|
|
6
19
|
/** Optional label shown above the player (e.g. the file name). */
|
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
interface AudioViewerProps {
|
|
4
|
+
/**
|
|
5
|
+
* How much to fetch before playback is requested.
|
|
6
|
+
*
|
|
7
|
+
* Defaults to `"metadata"` — duration and the scrubber, nothing more. With no
|
|
8
|
+
* attribute the browser decides, and Chrome decides `"auto"` for audio, which
|
|
9
|
+
* means simply RENDERING the component downloads the whole file. Measured on
|
|
10
|
+
* the Fancy showcase: one audio tile on the package grid transferred 995 KB
|
|
11
|
+
* before anyone pressed play.
|
|
12
|
+
*
|
|
13
|
+
* Pass `"none"` for a thumbnail that should cost nothing, or `"auto"` to
|
|
14
|
+
* restore the eager behaviour deliberately.
|
|
15
|
+
*/
|
|
16
|
+
preload?: "none" | "metadata" | "auto";
|
|
4
17
|
/** Audio source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
5
18
|
src: string;
|
|
6
19
|
/** Optional label shown above the player (e.g. the file name). */
|
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
interface VideoViewerProps {
|
|
4
|
+
/**
|
|
5
|
+
* How much to fetch before playback is requested.
|
|
6
|
+
*
|
|
7
|
+
* Defaults to `"metadata"` — duration and the scrubber, nothing more. With no
|
|
8
|
+
* attribute the browser decides, and Chrome decides `"auto"` for audio, which
|
|
9
|
+
* means simply RENDERING the component downloads the whole file. Measured on
|
|
10
|
+
* the Fancy showcase: one audio tile on the package grid transferred 995 KB
|
|
11
|
+
* before anyone pressed play.
|
|
12
|
+
*
|
|
13
|
+
* Pass `"none"` for a thumbnail that should cost nothing, or `"auto"` to
|
|
14
|
+
* restore the eager behaviour deliberately.
|
|
15
|
+
*/
|
|
16
|
+
preload?: "none" | "metadata" | "auto";
|
|
4
17
|
/** Video source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
5
18
|
src: string;
|
|
6
19
|
/** Poster image shown before playback. */
|
|
@@ -1,6 +1,19 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
interface VideoViewerProps {
|
|
4
|
+
/**
|
|
5
|
+
* How much to fetch before playback is requested.
|
|
6
|
+
*
|
|
7
|
+
* Defaults to `"metadata"` — duration and the scrubber, nothing more. With no
|
|
8
|
+
* attribute the browser decides, and Chrome decides `"auto"` for audio, which
|
|
9
|
+
* means simply RENDERING the component downloads the whole file. Measured on
|
|
10
|
+
* the Fancy showcase: one audio tile on the package grid transferred 995 KB
|
|
11
|
+
* before anyone pressed play.
|
|
12
|
+
*
|
|
13
|
+
* Pass `"none"` for a thumbnail that should cost nothing, or `"auto"` to
|
|
14
|
+
* restore the eager behaviour deliberately.
|
|
15
|
+
*/
|
|
16
|
+
preload?: "none" | "metadata" | "auto";
|
|
4
17
|
/** Video source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
5
18
|
src: string;
|
|
6
19
|
/** Poster image shown before playback. */
|
package/dist/audio-viewer.cjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk3MHVFEIP_cjs = require('./chunk-3MHVFEIP.cjs');
|
|
4
4
|
require('./chunk-3Z6ALUWP.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "AudioViewer", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunk3MHVFEIP_cjs.AudioViewer; }
|
|
11
11
|
});
|
|
12
12
|
//# sourceMappingURL=audio-viewer.cjs.map
|
|
13
13
|
//# sourceMappingURL=audio-viewer.cjs.map
|
package/dist/audio-viewer.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { A as AudioViewerProps } from './AudioViewer.types-
|
|
2
|
+
import { A as AudioViewerProps } from './AudioViewer.types-CyhmQVQd.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* A standalone audio viewer — a themed card wrapping the native audio player,
|
package/dist/audio-viewer.d.ts
CHANGED
package/dist/audio-viewer.js
CHANGED
|
@@ -11,6 +11,7 @@ var AudioViewer = react.forwardRef(
|
|
|
11
11
|
controls = true,
|
|
12
12
|
autoPlay = false,
|
|
13
13
|
loop = false,
|
|
14
|
+
preload = "metadata",
|
|
14
15
|
onError,
|
|
15
16
|
className,
|
|
16
17
|
style
|
|
@@ -32,6 +33,7 @@ var AudioViewer = react.forwardRef(
|
|
|
32
33
|
"audio",
|
|
33
34
|
{
|
|
34
35
|
src,
|
|
36
|
+
preload,
|
|
35
37
|
controls,
|
|
36
38
|
autoPlay,
|
|
37
39
|
loop,
|
|
@@ -50,5 +52,5 @@ var AudioViewer = react.forwardRef(
|
|
|
50
52
|
AudioViewer.displayName = "AudioViewer";
|
|
51
53
|
|
|
52
54
|
exports.AudioViewer = AudioViewer;
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
54
|
-
//# sourceMappingURL=chunk-
|
|
55
|
+
//# sourceMappingURL=chunk-3MHVFEIP.cjs.map
|
|
56
|
+
//# sourceMappingURL=chunk-3MHVFEIP.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":["forwardRef","useState","jsxs","cn","jsx"],"mappings":";;;;;;AAYO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA,GAAU,UAAA;AAAA,IACV,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA;AAAA,UACT,0GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EAA2C,kCAE1D,CAAA,mBAEAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,OAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-3MHVFEIP.cjs","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n (\n {\n src,\n title,\n controls = true,\n autoPlay = false,\n loop = false,\n preload = \"metadata\",\n onError,\n className,\n style,\n },\n ref,\n ) => {\n const [errored, setErrored] = useState(false);\n\n return (\n <div\n ref={ref}\n data-react-fancy-audio-viewer=\"\"\n className={cn(\n \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n className,\n )}\n style={style}\n >\n {title && (\n <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n {title}\n </div>\n )}\n {errored ? (\n <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n Couldn't load audio.\n </div>\n ) : (\n <audio\n src={src}\n preload={preload}\n controls={controls}\n autoPlay={autoPlay}\n loop={loop}\n onError={() => {\n setErrored(true);\n onError?.();\n }}\n className=\"w-full\"\n />\n )}\n </div>\n );\n },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}
|
|
@@ -9,6 +9,7 @@ var AudioViewer = forwardRef(
|
|
|
9
9
|
controls = true,
|
|
10
10
|
autoPlay = false,
|
|
11
11
|
loop = false,
|
|
12
|
+
preload = "metadata",
|
|
12
13
|
onError,
|
|
13
14
|
className,
|
|
14
15
|
style
|
|
@@ -30,6 +31,7 @@ var AudioViewer = forwardRef(
|
|
|
30
31
|
"audio",
|
|
31
32
|
{
|
|
32
33
|
src,
|
|
34
|
+
preload,
|
|
33
35
|
controls,
|
|
34
36
|
autoPlay,
|
|
35
37
|
loop,
|
|
@@ -48,5 +50,5 @@ var AudioViewer = forwardRef(
|
|
|
48
50
|
AudioViewer.displayName = "AudioViewer";
|
|
49
51
|
|
|
50
52
|
export { AudioViewer };
|
|
51
|
-
//# sourceMappingURL=chunk-
|
|
52
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-74ZN5CNE.js.map
|
|
54
|
+
//# sourceMappingURL=chunk-74ZN5CNE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":[],"mappings":";;;;AAYO,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA,GAAU,UAAA;AAAA,IACV,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAW,EAAA;AAAA,UACT,0GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EAA2C,kCAE1D,CAAA,mBAEA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,OAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-74ZN5CNE.js","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n (\n {\n src,\n title,\n controls = true,\n autoPlay = false,\n loop = false,\n preload = \"metadata\",\n onError,\n className,\n style,\n },\n ref,\n ) => {\n const [errored, setErrored] = useState(false);\n\n return (\n <div\n ref={ref}\n data-react-fancy-audio-viewer=\"\"\n className={cn(\n \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n className,\n )}\n style={style}\n >\n {title && (\n <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n {title}\n </div>\n )}\n {errored ? (\n <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n Couldn't load audio.\n </div>\n ) : (\n <audio\n src={src}\n preload={preload}\n controls={controls}\n autoPlay={autoPlay}\n loop={loop}\n onError={() => {\n setErrored(true);\n onError?.();\n }}\n className=\"w-full\"\n />\n )}\n </div>\n );\n },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkI462NM2A_cjs = require('./chunk-I462NM2A.cjs');
|
|
4
4
|
var chunkJHEM6IGT_cjs = require('./chunk-JHEM6IGT.cjs');
|
|
5
5
|
var chunkAC7M7JDO_cjs = require('./chunk-AC7M7JDO.cjs');
|
|
6
|
-
var
|
|
6
|
+
var chunk3MHVFEIP_cjs = require('./chunk-3MHVFEIP.cjs');
|
|
7
7
|
var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -176,7 +176,7 @@ var MediaViewer = react.forwardRef(
|
|
|
176
176
|
);
|
|
177
177
|
case "video":
|
|
178
178
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
179
|
-
|
|
179
|
+
chunkI462NM2A_cjs.VideoViewer,
|
|
180
180
|
{
|
|
181
181
|
ref,
|
|
182
182
|
src,
|
|
@@ -188,7 +188,7 @@ var MediaViewer = react.forwardRef(
|
|
|
188
188
|
);
|
|
189
189
|
case "audio":
|
|
190
190
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
191
|
-
|
|
191
|
+
chunk3MHVFEIP_cjs.AudioViewer,
|
|
192
192
|
{
|
|
193
193
|
ref,
|
|
194
194
|
src,
|
|
@@ -229,5 +229,5 @@ MediaViewer.displayName = "MediaViewer";
|
|
|
229
229
|
|
|
230
230
|
exports.MediaViewer = MediaViewer;
|
|
231
231
|
exports.resolveMediaType = resolveMediaType;
|
|
232
|
-
//# sourceMappingURL=chunk-
|
|
233
|
-
//# sourceMappingURL=chunk-
|
|
232
|
+
//# sourceMappingURL=chunk-BWTFK2GV.cjs.map
|
|
233
|
+
//# sourceMappingURL=chunk-BWTFK2GV.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/media-type.ts","../src/components/MediaViewer/MediaFallback.tsx","../src/components/MediaViewer/MediaViewer.tsx"],"names":["jsxs","cn","jsx","forwardRef","ImageViewer","VideoViewer","AudioViewer","PdfViewer"],"mappings":"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","file":"chunk-KE7KXY5C.cjs","sourcesContent":["/**\n * Resolve what kind of media a source is, from its MIME type (preferred) or its\n * URL — a file extension, or the type embedded in a `data:` URI.\n *\n * Shared by `<MediaViewer>` to pick the right per-type viewer, and exported so\n * downstream packages (e.g. fancy-code's file viewer) can make the same\n * text-vs-media decision without re-deriving the table.\n */\n\nexport type MediaKind = \"image\" | \"video\" | \"audio\" | \"pdf\" | \"unknown\";\n\nexport interface ResolveMediaTypeInput {\n /** MIME type — preferred when known (e.g. `\"image/png\"`, `\"video/mp4\"`). */\n mime?: string | null;\n /**\n * Source URL — used to sniff the kind from a file extension, or from the type\n * embedded in a `data:` URI, when no `mime` is given. `http(s):` / `data:` /\n * `blob:` are all accepted (a bare `blob:` URL carries no type, so pass\n * `mime` alongside it).\n */\n src?: string | null;\n}\n\nconst IMAGE_EXTS = new Set([\n \"png\", \"jpg\", \"jpeg\", \"jfif\", \"pjpeg\", \"gif\", \"webp\", \"avif\", \"bmp\", \"ico\",\n \"cur\", \"svg\", \"svgz\", \"apng\", \"tif\", \"tiff\", \"heic\", \"heif\",\n]);\nconst VIDEO_EXTS = new Set([\n \"mp4\", \"m4v\", \"webm\", \"ogv\", \"ogm\", \"mov\", \"mkv\", \"avi\", \"wmv\", \"flv\", \"3gp\",\n \"3g2\", \"mpg\", \"mpeg\",\n]);\nconst AUDIO_EXTS = new Set([\n \"mp3\", \"wav\", \"wave\", \"ogg\", \"oga\", \"m4a\", \"m4b\", \"aac\", \"flac\", \"opus\",\n \"weba\", \"mid\", \"midi\", \"aiff\", \"aif\",\n]);\n\n/** Map a (possibly parameterized) MIME type to a media kind. */\nfunction mimeToKind(mime: string): MediaKind {\n // Strip any parameters (`; charset=…`) and normalize.\n const m = mime.toLowerCase().split(\";\")[0].trim();\n if (!m) return \"unknown\";\n if (m === \"application/pdf\" || m === \"application/x-pdf\") return \"pdf\";\n if (m.startsWith(\"image/\")) return \"image\";\n if (m.startsWith(\"video/\")) return \"video\";\n if (m.startsWith(\"audio/\")) return \"audio\";\n // `application/ogg` is audio in practice; treat it as such.\n if (m === \"application/ogg\") return \"audio\";\n return \"unknown\";\n}\n\n/** Map a bare file extension (no leading dot) to a media kind. */\nfunction extToKind(ext: string): MediaKind {\n const e = ext.toLowerCase();\n if (e === \"pdf\") return \"pdf\";\n if (IMAGE_EXTS.has(e)) return \"image\";\n if (VIDEO_EXTS.has(e)) return \"video\";\n if (AUDIO_EXTS.has(e)) return \"audio\";\n return \"unknown\";\n}\n\n/** Pull the file extension out of a URL, ignoring its query/hash. */\nfunction extFromSrc(src: string): string | null {\n const clean = src.split(/[?#]/, 1)[0];\n const lastSeg = clean.split(\"/\").pop() ?? \"\";\n const dot = lastSeg.lastIndexOf(\".\");\n if (dot <= 0 || dot === lastSeg.length - 1) return null;\n return lastSeg.slice(dot + 1);\n}\n\n/** Extract the MIME type embedded in a `data:` URI, if present. */\nfunction mimeFromDataUri(src: string): string | null {\n if (!/^data:/i.test(src)) return null;\n const header = src.slice(5).split(\",\", 1)[0]; // text after `data:`, before the comma\n const mt = header.split(\";\")[0].trim();\n return mt || null;\n}\n\n/**\n * Resolve a {@link MediaKind} from a MIME type and/or source URL. MIME wins\n * when it's conclusive; otherwise the `src` is sniffed (a `data:` URI's\n * embedded type first, then the file extension). Returns `\"unknown\"` when\n * nothing matches — callers treat that as \"not previewable media\" (e.g. text).\n */\nexport function resolveMediaType({ mime, src }: ResolveMediaTypeInput): MediaKind {\n if (mime) {\n const k = mimeToKind(mime);\n if (k !== \"unknown\") return k;\n }\n if (src) {\n const dataMime = mimeFromDataUri(src);\n if (dataMime) {\n const k = mimeToKind(dataMime);\n if (k !== \"unknown\") return k;\n }\n const ext = extFromSrc(src);\n if (ext) return extToKind(ext);\n }\n return \"unknown\";\n}\n","import { cn } from \"../../utils/cn\";\n\ninterface MediaFallbackProps {\n src: string;\n mime?: string;\n label?: string;\n className?: string;\n}\n\n/** Filename guess from a URL, ignoring query/hash and `data:`/`blob:` URLs. */\nfunction basename(src: string): string | null {\n if (/^(data|blob):/i.test(src)) return null;\n const seg = src.split(/[?#]/, 1)[0].split(\"/\").pop();\n return seg ? decodeURIComponent(seg) : null;\n}\n\n/**\n * Shown by `<MediaViewer>` when a source isn't a previewable media type — a\n * small themed card naming the file and offering a download.\n */\nexport function MediaFallback({ src, mime, label, className }: MediaFallbackProps) {\n const name = label || basename(src);\n return (\n <div\n data-react-fancy-media-fallback=\"\"\n className={cn(\n \"flex flex-col items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white p-6 text-center dark:border-zinc-700 dark:bg-zinc-900\",\n className,\n )}\n >\n <span className=\"text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n No preview available\n </span>\n {(name || mime) && (\n <span className=\"max-w-full truncate text-xs text-zinc-500 dark:text-zinc-400\">\n {name}\n {name && mime ? \" · \" : \"\"}\n {mime}\n </span>\n )}\n <a\n href={src}\n download={name ?? undefined}\n className=\"text-xs font-medium text-blue-600 hover:underline dark:text-blue-400\"\n >\n Download\n </a>\n </div>\n );\n}\n","import { forwardRef } from \"react\";\nimport { resolveMediaType } from \"../../utils/media-type\";\nimport { ImageViewer } from \"../ImageViewer\";\nimport { VideoViewer } from \"../VideoViewer\";\nimport { AudioViewer } from \"../AudioViewer\";\nimport { PdfViewer } from \"../PdfViewer\";\nimport { MediaFallback } from \"./MediaFallback\";\nimport type { MediaViewerProps } from \"./MediaViewer.types\";\n\n/**\n * Renders the right viewer for a media file, picked from its `mime` (preferred)\n * or `src` — image, video, audio, or PDF — and a download fallback for anything\n * else. SVG renders through `<ImageViewer>`. The single entry point for showing\n * a file from a tree/workspace when you don't know its type ahead of time.\n *\n * ```tsx\n * <MediaViewer src={url} mime=\"image/png\" alt=\"logo.png\" style={{ height: 320 }} />\n * ```\n */\nexport const MediaViewer = forwardRef<HTMLDivElement, MediaViewerProps>(\n (\n {\n src,\n mime,\n alt,\n kind,\n imageProps,\n videoProps,\n audioProps,\n pdfProps,\n fallback,\n onError,\n className,\n style,\n },\n ref,\n ) => {\n const resolved = kind ?? resolveMediaType({ mime, src });\n\n switch (resolved) {\n case \"image\":\n return (\n <ImageViewer\n ref={ref}\n src={src}\n alt={alt ?? \"\"}\n onError={onError}\n className={className}\n style={style}\n {...imageProps}\n />\n );\n case \"video\":\n return (\n <VideoViewer\n ref={ref}\n src={src}\n onError={onError}\n className={className}\n style={style}\n {...videoProps}\n />\n );\n case \"audio\":\n return (\n <AudioViewer\n ref={ref}\n src={src}\n title={alt}\n onError={onError}\n className={className}\n style={style}\n {...audioProps}\n />\n );\n case \"pdf\":\n return (\n <PdfViewer\n ref={ref}\n src={src}\n title={alt}\n className={className}\n style={style}\n {...pdfProps}\n />\n );\n default:\n return (\n <div\n ref={ref}\n data-react-fancy-media-viewer=\"\"\n className={className}\n style={style}\n >\n {fallback ?? <MediaFallback src={src} mime={mime} label={alt} />}\n </div>\n );\n }\n },\n);\n\nMediaViewer.displayName = \"MediaViewer\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/media-type.ts","../src/components/MediaViewer/MediaFallback.tsx","../src/components/MediaViewer/MediaViewer.tsx"],"names":["jsxs","cn","jsx","forwardRef","ImageViewer","VideoViewer","AudioViewer","PdfViewer"],"mappings":"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","file":"chunk-BWTFK2GV.cjs","sourcesContent":["/**\n * Resolve what kind of media a source is, from its MIME type (preferred) or its\n * URL — a file extension, or the type embedded in a `data:` URI.\n *\n * Shared by `<MediaViewer>` to pick the right per-type viewer, and exported so\n * downstream packages (e.g. fancy-code's file viewer) can make the same\n * text-vs-media decision without re-deriving the table.\n */\n\nexport type MediaKind = \"image\" | \"video\" | \"audio\" | \"pdf\" | \"unknown\";\n\nexport interface ResolveMediaTypeInput {\n /** MIME type — preferred when known (e.g. `\"image/png\"`, `\"video/mp4\"`). */\n mime?: string | null;\n /**\n * Source URL — used to sniff the kind from a file extension, or from the type\n * embedded in a `data:` URI, when no `mime` is given. `http(s):` / `data:` /\n * `blob:` are all accepted (a bare `blob:` URL carries no type, so pass\n * `mime` alongside it).\n */\n src?: string | null;\n}\n\nconst IMAGE_EXTS = new Set([\n \"png\", \"jpg\", \"jpeg\", \"jfif\", \"pjpeg\", \"gif\", \"webp\", \"avif\", \"bmp\", \"ico\",\n \"cur\", \"svg\", \"svgz\", \"apng\", \"tif\", \"tiff\", \"heic\", \"heif\",\n]);\nconst VIDEO_EXTS = new Set([\n \"mp4\", \"m4v\", \"webm\", \"ogv\", \"ogm\", \"mov\", \"mkv\", \"avi\", \"wmv\", \"flv\", \"3gp\",\n \"3g2\", \"mpg\", \"mpeg\",\n]);\nconst AUDIO_EXTS = new Set([\n \"mp3\", \"wav\", \"wave\", \"ogg\", \"oga\", \"m4a\", \"m4b\", \"aac\", \"flac\", \"opus\",\n \"weba\", \"mid\", \"midi\", \"aiff\", \"aif\",\n]);\n\n/** Map a (possibly parameterized) MIME type to a media kind. */\nfunction mimeToKind(mime: string): MediaKind {\n // Strip any parameters (`; charset=…`) and normalize.\n const m = mime.toLowerCase().split(\";\")[0].trim();\n if (!m) return \"unknown\";\n if (m === \"application/pdf\" || m === \"application/x-pdf\") return \"pdf\";\n if (m.startsWith(\"image/\")) return \"image\";\n if (m.startsWith(\"video/\")) return \"video\";\n if (m.startsWith(\"audio/\")) return \"audio\";\n // `application/ogg` is audio in practice; treat it as such.\n if (m === \"application/ogg\") return \"audio\";\n return \"unknown\";\n}\n\n/** Map a bare file extension (no leading dot) to a media kind. */\nfunction extToKind(ext: string): MediaKind {\n const e = ext.toLowerCase();\n if (e === \"pdf\") return \"pdf\";\n if (IMAGE_EXTS.has(e)) return \"image\";\n if (VIDEO_EXTS.has(e)) return \"video\";\n if (AUDIO_EXTS.has(e)) return \"audio\";\n return \"unknown\";\n}\n\n/** Pull the file extension out of a URL, ignoring its query/hash. */\nfunction extFromSrc(src: string): string | null {\n const clean = src.split(/[?#]/, 1)[0];\n const lastSeg = clean.split(\"/\").pop() ?? \"\";\n const dot = lastSeg.lastIndexOf(\".\");\n if (dot <= 0 || dot === lastSeg.length - 1) return null;\n return lastSeg.slice(dot + 1);\n}\n\n/** Extract the MIME type embedded in a `data:` URI, if present. */\nfunction mimeFromDataUri(src: string): string | null {\n if (!/^data:/i.test(src)) return null;\n const header = src.slice(5).split(\",\", 1)[0]; // text after `data:`, before the comma\n const mt = header.split(\";\")[0].trim();\n return mt || null;\n}\n\n/**\n * Resolve a {@link MediaKind} from a MIME type and/or source URL. MIME wins\n * when it's conclusive; otherwise the `src` is sniffed (a `data:` URI's\n * embedded type first, then the file extension). Returns `\"unknown\"` when\n * nothing matches — callers treat that as \"not previewable media\" (e.g. text).\n */\nexport function resolveMediaType({ mime, src }: ResolveMediaTypeInput): MediaKind {\n if (mime) {\n const k = mimeToKind(mime);\n if (k !== \"unknown\") return k;\n }\n if (src) {\n const dataMime = mimeFromDataUri(src);\n if (dataMime) {\n const k = mimeToKind(dataMime);\n if (k !== \"unknown\") return k;\n }\n const ext = extFromSrc(src);\n if (ext) return extToKind(ext);\n }\n return \"unknown\";\n}\n","import { cn } from \"../../utils/cn\";\n\ninterface MediaFallbackProps {\n src: string;\n mime?: string;\n label?: string;\n className?: string;\n}\n\n/** Filename guess from a URL, ignoring query/hash and `data:`/`blob:` URLs. */\nfunction basename(src: string): string | null {\n if (/^(data|blob):/i.test(src)) return null;\n const seg = src.split(/[?#]/, 1)[0].split(\"/\").pop();\n return seg ? decodeURIComponent(seg) : null;\n}\n\n/**\n * Shown by `<MediaViewer>` when a source isn't a previewable media type — a\n * small themed card naming the file and offering a download.\n */\nexport function MediaFallback({ src, mime, label, className }: MediaFallbackProps) {\n const name = label || basename(src);\n return (\n <div\n data-react-fancy-media-fallback=\"\"\n className={cn(\n \"flex flex-col items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white p-6 text-center dark:border-zinc-700 dark:bg-zinc-900\",\n className,\n )}\n >\n <span className=\"text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n No preview available\n </span>\n {(name || mime) && (\n <span className=\"max-w-full truncate text-xs text-zinc-500 dark:text-zinc-400\">\n {name}\n {name && mime ? \" · \" : \"\"}\n {mime}\n </span>\n )}\n <a\n href={src}\n download={name ?? undefined}\n className=\"text-xs font-medium text-blue-600 hover:underline dark:text-blue-400\"\n >\n Download\n </a>\n </div>\n );\n}\n","import { forwardRef } from \"react\";\nimport { resolveMediaType } from \"../../utils/media-type\";\nimport { ImageViewer } from \"../ImageViewer\";\nimport { VideoViewer } from \"../VideoViewer\";\nimport { AudioViewer } from \"../AudioViewer\";\nimport { PdfViewer } from \"../PdfViewer\";\nimport { MediaFallback } from \"./MediaFallback\";\nimport type { MediaViewerProps } from \"./MediaViewer.types\";\n\n/**\n * Renders the right viewer for a media file, picked from its `mime` (preferred)\n * or `src` — image, video, audio, or PDF — and a download fallback for anything\n * else. SVG renders through `<ImageViewer>`. The single entry point for showing\n * a file from a tree/workspace when you don't know its type ahead of time.\n *\n * ```tsx\n * <MediaViewer src={url} mime=\"image/png\" alt=\"logo.png\" style={{ height: 320 }} />\n * ```\n */\nexport const MediaViewer = forwardRef<HTMLDivElement, MediaViewerProps>(\n (\n {\n src,\n mime,\n alt,\n kind,\n imageProps,\n videoProps,\n audioProps,\n pdfProps,\n fallback,\n onError,\n className,\n style,\n },\n ref,\n ) => {\n const resolved = kind ?? resolveMediaType({ mime, src });\n\n switch (resolved) {\n case \"image\":\n return (\n <ImageViewer\n ref={ref}\n src={src}\n alt={alt ?? \"\"}\n onError={onError}\n className={className}\n style={style}\n {...imageProps}\n />\n );\n case \"video\":\n return (\n <VideoViewer\n ref={ref}\n src={src}\n onError={onError}\n className={className}\n style={style}\n {...videoProps}\n />\n );\n case \"audio\":\n return (\n <AudioViewer\n ref={ref}\n src={src}\n title={alt}\n onError={onError}\n className={className}\n style={style}\n {...audioProps}\n />\n );\n case \"pdf\":\n return (\n <PdfViewer\n ref={ref}\n src={src}\n title={alt}\n className={className}\n style={style}\n {...pdfProps}\n />\n );\n default:\n return (\n <div\n ref={ref}\n data-react-fancy-media-viewer=\"\"\n className={className}\n style={style}\n >\n {fallback ?? <MediaFallback src={src} mime={mime} label={alt} />}\n </div>\n );\n }\n },\n);\n\nMediaViewer.displayName = \"MediaViewer\";\n"]}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { useId as useId$1, useRef, useState, useCallback, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
// src/hooks/use-id.ts
|
|
4
|
+
function useId(prefix) {
|
|
5
|
+
const id = useId$1();
|
|
6
|
+
return prefix ? `${prefix}-${id}` : id;
|
|
7
|
+
}
|
|
8
|
+
function useNodeRegistry() {
|
|
9
|
+
const rectsRef = useRef(/* @__PURE__ */ new Map());
|
|
10
|
+
const [version, setVersion] = useState(0);
|
|
11
|
+
const registerNode = useCallback((id, rect) => {
|
|
12
|
+
rectsRef.current.set(id, rect);
|
|
13
|
+
setVersion((v) => v + 1);
|
|
14
|
+
}, []);
|
|
15
|
+
const unregisterNode = useCallback((id) => {
|
|
16
|
+
rectsRef.current.delete(id);
|
|
17
|
+
setVersion((v) => v + 1);
|
|
18
|
+
}, []);
|
|
19
|
+
return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// src/theme.ts
|
|
23
|
+
var THEME_STORAGE_KEY = "fancy-ui.theme";
|
|
24
|
+
var DARK_QUERY = "(prefers-color-scheme: dark)";
|
|
25
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
26
|
+
var storageKey = THEME_STORAGE_KEY;
|
|
27
|
+
var stopWatchingSystem = null;
|
|
28
|
+
function canUseDom() {
|
|
29
|
+
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
30
|
+
}
|
|
31
|
+
function getThemePreference() {
|
|
32
|
+
if (!canUseDom()) return "system";
|
|
33
|
+
try {
|
|
34
|
+
const saved = window.localStorage.getItem(storageKey);
|
|
35
|
+
return saved === "light" || saved === "dark" ? saved : "system";
|
|
36
|
+
} catch {
|
|
37
|
+
return "system";
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
function systemTheme() {
|
|
41
|
+
if (!canUseDom() || typeof window.matchMedia !== "function") return "light";
|
|
42
|
+
return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
|
|
43
|
+
}
|
|
44
|
+
function resolveTheme(preference = getThemePreference()) {
|
|
45
|
+
return preference === "system" ? systemTheme() : preference;
|
|
46
|
+
}
|
|
47
|
+
function applyToDocument(resolved) {
|
|
48
|
+
if (!canUseDom()) return;
|
|
49
|
+
const root = document.documentElement;
|
|
50
|
+
root.classList.toggle("dark", resolved === "dark");
|
|
51
|
+
root.setAttribute("data-theme", resolved);
|
|
52
|
+
}
|
|
53
|
+
function publish() {
|
|
54
|
+
const preference = getThemePreference();
|
|
55
|
+
const resolved = resolveTheme(preference);
|
|
56
|
+
applyToDocument(resolved);
|
|
57
|
+
listeners.forEach((listener) => listener(resolved, preference));
|
|
58
|
+
}
|
|
59
|
+
function setThemePreference(preference) {
|
|
60
|
+
if (canUseDom()) {
|
|
61
|
+
try {
|
|
62
|
+
if (preference === "system") {
|
|
63
|
+
window.localStorage.removeItem(storageKey);
|
|
64
|
+
} else {
|
|
65
|
+
window.localStorage.setItem(storageKey, preference);
|
|
66
|
+
}
|
|
67
|
+
} catch {
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
publish();
|
|
71
|
+
}
|
|
72
|
+
function subscribeTheme(listener) {
|
|
73
|
+
listeners.add(listener);
|
|
74
|
+
return () => {
|
|
75
|
+
listeners.delete(listener);
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
function initTheme(options = {}) {
|
|
79
|
+
if (options.storageKey) storageKey = options.storageKey;
|
|
80
|
+
if (!canUseDom()) return () => {
|
|
81
|
+
};
|
|
82
|
+
applyToDocument(resolveTheme());
|
|
83
|
+
if (!stopWatchingSystem && typeof window.matchMedia === "function") {
|
|
84
|
+
const media = window.matchMedia(DARK_QUERY);
|
|
85
|
+
const onSystemChange = () => {
|
|
86
|
+
if (getThemePreference() === "system") publish();
|
|
87
|
+
};
|
|
88
|
+
if (typeof media.addEventListener === "function") {
|
|
89
|
+
media.addEventListener("change", onSystemChange);
|
|
90
|
+
stopWatchingSystem = () => media.removeEventListener("change", onSystemChange);
|
|
91
|
+
} else {
|
|
92
|
+
media.addListener(onSystemChange);
|
|
93
|
+
stopWatchingSystem = () => media.removeListener(onSystemChange);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
return () => {
|
|
97
|
+
stopWatchingSystem?.();
|
|
98
|
+
stopWatchingSystem = null;
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
function useTheme() {
|
|
102
|
+
const [state, setState] = useState({
|
|
103
|
+
preference: "system",
|
|
104
|
+
resolved: "light"
|
|
105
|
+
});
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
const sync = () => {
|
|
108
|
+
setState({ preference: getThemePreference(), resolved: resolveTheme() });
|
|
109
|
+
};
|
|
110
|
+
sync();
|
|
111
|
+
return subscribeTheme(sync);
|
|
112
|
+
}, []);
|
|
113
|
+
const setPreference = useCallback((preference) => {
|
|
114
|
+
setThemePreference(preference);
|
|
115
|
+
}, []);
|
|
116
|
+
return { ...state, setPreference };
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export { THEME_STORAGE_KEY, getThemePreference, initTheme, resolveTheme, setThemePreference, subscribeTheme, useId, useNodeRegistry, useTheme };
|
|
120
|
+
//# sourceMappingURL=chunk-FWCREAIT.js.map
|
|
121
|
+
//# sourceMappingURL=chunk-FWCREAIT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-id.ts","../src/hooks/use-node-registry.ts","../src/theme.ts","../src/hooks/use-theme.ts"],"names":["useReactId","useState","useCallback"],"mappings":"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","file":"chunk-FWCREAIT.js","sourcesContent":["import { useId as useReactId } from \"react\";\n\nexport function useId(prefix?: string): string {\n const id = useReactId();\n return prefix ? `${prefix}-${id}` : id;\n}\n","import { useCallback, useRef, useState } from \"react\";\n\nexport interface NodeRect {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\ninterface UseNodeRegistryReturn {\n registerNode: (id: string, rect: NodeRect) => void;\n unregisterNode: (id: string) => void;\n nodeRects: Map<string, NodeRect>;\n version: number;\n}\n\nexport function useNodeRegistry(): UseNodeRegistryReturn {\n const rectsRef = useRef(new Map<string, NodeRect>());\n const [version, setVersion] = useState(0);\n\n const registerNode = useCallback((id: string, rect: NodeRect) => {\n rectsRef.current.set(id, rect);\n setVersion((v) => v + 1);\n }, []);\n\n const unregisterNode = useCallback((id: string) => {\n rectsRef.current.delete(id);\n setVersion((v) => v + 1);\n }, []);\n\n return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };\n}\n","/**\n * Light / dark / **system** theming.\n *\n * `styles.css` in this package defines the dark contract — it redefines the\n * whole `--color-secondary-*` scale under `:where(.dark)` so that \"900\" always\n * means strongest foreground and \"50\" always means faintest surface. This module\n * is the other half of that contract: the thing that decides when `.dark` is on.\n *\n * It lives here rather than in each app because every consumer was hand-rolling\n * it, and every hand-rolled copy had the same two holes:\n *\n * - **No live listener.** The OS preference was read once at boot, so changing\n * the system theme with the page open did nothing. That is a default, not a\n * \"system\" mode.\n * - **No way back.** Choosing light or dark wrote to storage forever, so\n * \"follow my system\" was unreachable after a single click.\n *\n * Both are fixed by treating **\"system\" as the absence of a stored choice**\n * rather than as a third stored value.\n *\n * Every export is safe to call during SSR, where it is a no-op that resolves to\n * `\"light\"`. Pair it with `useTheme`, which deliberately renders `system/light`\n * on the server and syncs in an effect — this project has paid for hydration\n * mismatches caused by reading the real theme during render.\n */\n\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\nexport type ResolvedTheme = \"light\" | \"dark\";\n\n/**\n * Deliberately the key the showcase already used, so adopting this module keeps\n * a returning visitor's saved choice instead of silently resetting it.\n */\nexport const THEME_STORAGE_KEY = \"fancy-ui.theme\";\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\ntype ThemeListener = (resolved: ResolvedTheme, preference: ThemePreference) => void;\n\nconst listeners = new Set<ThemeListener>();\nlet storageKey = THEME_STORAGE_KEY;\nlet stopWatchingSystem: (() => void) | null = null;\n\nfunction canUseDom(): boolean {\n return typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\n/** The stored choice, or `\"system\"` when there isn't one. */\nexport function getThemePreference(): ThemePreference {\n if (!canUseDom()) return \"system\";\n try {\n const saved = window.localStorage.getItem(storageKey);\n return saved === \"light\" || saved === \"dark\" ? saved : \"system\";\n } catch {\n // Private browsing and blocked storage both throw here. A theme is not\n // worth taking the page down over.\n return \"system\";\n }\n}\n\nfunction systemTheme(): ResolvedTheme {\n if (!canUseDom() || typeof window.matchMedia !== \"function\") return \"light\";\n return window.matchMedia(DARK_QUERY).matches ? \"dark\" : \"light\";\n}\n\n/** What is actually on screen, as opposed to what the user asked for. */\nexport function resolveTheme(preference: ThemePreference = getThemePreference()): ResolvedTheme {\n return preference === \"system\" ? systemTheme() : preference;\n}\n\nfunction applyToDocument(resolved: ResolvedTheme): void {\n if (!canUseDom()) return;\n const root = document.documentElement;\n // The class is what this package's CSS keys off; the attribute is for\n // consumers whose own styles key off `[data-theme]`.\n root.classList.toggle(\"dark\", resolved === \"dark\");\n root.setAttribute(\"data-theme\", resolved);\n}\n\nfunction publish(): void {\n const preference = getThemePreference();\n const resolved = resolveTheme(preference);\n applyToDocument(resolved);\n listeners.forEach((listener) => listener(resolved, preference));\n}\n\n/**\n * Choose a theme. `\"system\"` REMOVES the stored value rather than storing the\n * string — an absent choice is what lets the OS keep speaking for the user.\n */\nexport function setThemePreference(preference: ThemePreference): void {\n if (canUseDom()) {\n try {\n if (preference === \"system\") {\n window.localStorage.removeItem(storageKey);\n } else {\n window.localStorage.setItem(storageKey, preference);\n }\n } catch {\n // As above: still apply it for this page even if it cannot persist.\n }\n }\n publish();\n}\n\n/** Observe theme changes. Returns an unsubscribe. */\nexport function subscribeTheme(listener: ThemeListener): () => void {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n}\n\n/**\n * Apply the current theme and start following the OS. Call once, as early as\n * possible — before first paint if you want to avoid a flash of the wrong\n * theme. Returns a disposer; calling it again is harmless.\n */\nexport function initTheme(options: { storageKey?: string } = {}): () => void {\n if (options.storageKey) storageKey = options.storageKey;\n if (!canUseDom()) return () => {};\n\n applyToDocument(resolveTheme());\n\n if (!stopWatchingSystem && typeof window.matchMedia === \"function\") {\n const media = window.matchMedia(DARK_QUERY);\n const onSystemChange = (): void => {\n // Only \"system\" follows the OS. An explicit choice has to survive\n // the user switching their OS theme, or it isn't a choice.\n if (getThemePreference() === \"system\") publish();\n };\n\n if (typeof media.addEventListener === \"function\") {\n media.addEventListener(\"change\", onSystemChange);\n stopWatchingSystem = () => media.removeEventListener(\"change\", onSystemChange);\n } else {\n // Safari < 14 and friends.\n media.addListener(onSystemChange);\n stopWatchingSystem = () => media.removeListener(onSystemChange);\n }\n }\n\n return () => {\n stopWatchingSystem?.();\n stopWatchingSystem = null;\n };\n}\n","import { useCallback, useEffect, useState } from \"react\";\nimport {\n getThemePreference,\n resolveTheme,\n setThemePreference,\n subscribeTheme,\n type ResolvedTheme,\n type ThemePreference,\n} from \"../theme\";\n\nexport type UseThemeResult = {\n /** What the user asked for, including `\"system\"`. */\n preference: ThemePreference;\n /** What is actually on screen. */\n resolved: ResolvedTheme;\n setPreference: (preference: ThemePreference) => void;\n};\n\n/**\n * Read and set the theme from a component, re-rendering when it changes —\n * including when the OS theme changes underneath a `\"system\"` preference.\n *\n * The initial state is deliberately `system` / `light` rather than the real\n * theme: the server has neither storage nor an OS preference, so reading the\n * truth during render is exactly the hydration mismatch this project has\n * already chased down more than once. The effect syncs immediately on mount.\n */\nexport function useTheme(): UseThemeResult {\n const [state, setState] = useState<{ preference: ThemePreference; resolved: ResolvedTheme }>({\n preference: \"system\",\n resolved: \"light\",\n });\n\n useEffect(() => {\n const sync = (): void => {\n setState({ preference: getThemePreference(), resolved: resolveTheme() });\n };\n sync();\n return subscribeTheme(sync);\n }, []);\n\n const setPreference = useCallback((preference: ThemePreference): void => {\n setThemePreference(preference);\n }, []);\n\n return { ...state, setPreference };\n}\n"]}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
// src/hooks/use-id.ts
|
|
6
|
+
function useId(prefix) {
|
|
7
|
+
const id = react.useId();
|
|
8
|
+
return prefix ? `${prefix}-${id}` : id;
|
|
9
|
+
}
|
|
10
|
+
function useNodeRegistry() {
|
|
11
|
+
const rectsRef = react.useRef(/* @__PURE__ */ new Map());
|
|
12
|
+
const [version, setVersion] = react.useState(0);
|
|
13
|
+
const registerNode = react.useCallback((id, rect) => {
|
|
14
|
+
rectsRef.current.set(id, rect);
|
|
15
|
+
setVersion((v) => v + 1);
|
|
16
|
+
}, []);
|
|
17
|
+
const unregisterNode = react.useCallback((id) => {
|
|
18
|
+
rectsRef.current.delete(id);
|
|
19
|
+
setVersion((v) => v + 1);
|
|
20
|
+
}, []);
|
|
21
|
+
return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// src/theme.ts
|
|
25
|
+
var THEME_STORAGE_KEY = "fancy-ui.theme";
|
|
26
|
+
var DARK_QUERY = "(prefers-color-scheme: dark)";
|
|
27
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
28
|
+
var storageKey = THEME_STORAGE_KEY;
|
|
29
|
+
var stopWatchingSystem = null;
|
|
30
|
+
function canUseDom() {
|
|
31
|
+
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
32
|
+
}
|
|
33
|
+
function getThemePreference() {
|
|
34
|
+
if (!canUseDom()) return "system";
|
|
35
|
+
try {
|
|
36
|
+
const saved = window.localStorage.getItem(storageKey);
|
|
37
|
+
return saved === "light" || saved === "dark" ? saved : "system";
|
|
38
|
+
} catch {
|
|
39
|
+
return "system";
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
function systemTheme() {
|
|
43
|
+
if (!canUseDom() || typeof window.matchMedia !== "function") return "light";
|
|
44
|
+
return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
|
|
45
|
+
}
|
|
46
|
+
function resolveTheme(preference = getThemePreference()) {
|
|
47
|
+
return preference === "system" ? systemTheme() : preference;
|
|
48
|
+
}
|
|
49
|
+
function applyToDocument(resolved) {
|
|
50
|
+
if (!canUseDom()) return;
|
|
51
|
+
const root = document.documentElement;
|
|
52
|
+
root.classList.toggle("dark", resolved === "dark");
|
|
53
|
+
root.setAttribute("data-theme", resolved);
|
|
54
|
+
}
|
|
55
|
+
function publish() {
|
|
56
|
+
const preference = getThemePreference();
|
|
57
|
+
const resolved = resolveTheme(preference);
|
|
58
|
+
applyToDocument(resolved);
|
|
59
|
+
listeners.forEach((listener) => listener(resolved, preference));
|
|
60
|
+
}
|
|
61
|
+
function setThemePreference(preference) {
|
|
62
|
+
if (canUseDom()) {
|
|
63
|
+
try {
|
|
64
|
+
if (preference === "system") {
|
|
65
|
+
window.localStorage.removeItem(storageKey);
|
|
66
|
+
} else {
|
|
67
|
+
window.localStorage.setItem(storageKey, preference);
|
|
68
|
+
}
|
|
69
|
+
} catch {
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
publish();
|
|
73
|
+
}
|
|
74
|
+
function subscribeTheme(listener) {
|
|
75
|
+
listeners.add(listener);
|
|
76
|
+
return () => {
|
|
77
|
+
listeners.delete(listener);
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
function initTheme(options = {}) {
|
|
81
|
+
if (options.storageKey) storageKey = options.storageKey;
|
|
82
|
+
if (!canUseDom()) return () => {
|
|
83
|
+
};
|
|
84
|
+
applyToDocument(resolveTheme());
|
|
85
|
+
if (!stopWatchingSystem && typeof window.matchMedia === "function") {
|
|
86
|
+
const media = window.matchMedia(DARK_QUERY);
|
|
87
|
+
const onSystemChange = () => {
|
|
88
|
+
if (getThemePreference() === "system") publish();
|
|
89
|
+
};
|
|
90
|
+
if (typeof media.addEventListener === "function") {
|
|
91
|
+
media.addEventListener("change", onSystemChange);
|
|
92
|
+
stopWatchingSystem = () => media.removeEventListener("change", onSystemChange);
|
|
93
|
+
} else {
|
|
94
|
+
media.addListener(onSystemChange);
|
|
95
|
+
stopWatchingSystem = () => media.removeListener(onSystemChange);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return () => {
|
|
99
|
+
stopWatchingSystem?.();
|
|
100
|
+
stopWatchingSystem = null;
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function useTheme() {
|
|
104
|
+
const [state, setState] = react.useState({
|
|
105
|
+
preference: "system",
|
|
106
|
+
resolved: "light"
|
|
107
|
+
});
|
|
108
|
+
react.useEffect(() => {
|
|
109
|
+
const sync = () => {
|
|
110
|
+
setState({ preference: getThemePreference(), resolved: resolveTheme() });
|
|
111
|
+
};
|
|
112
|
+
sync();
|
|
113
|
+
return subscribeTheme(sync);
|
|
114
|
+
}, []);
|
|
115
|
+
const setPreference = react.useCallback((preference) => {
|
|
116
|
+
setThemePreference(preference);
|
|
117
|
+
}, []);
|
|
118
|
+
return { ...state, setPreference };
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
exports.THEME_STORAGE_KEY = THEME_STORAGE_KEY;
|
|
122
|
+
exports.getThemePreference = getThemePreference;
|
|
123
|
+
exports.initTheme = initTheme;
|
|
124
|
+
exports.resolveTheme = resolveTheme;
|
|
125
|
+
exports.setThemePreference = setThemePreference;
|
|
126
|
+
exports.subscribeTheme = subscribeTheme;
|
|
127
|
+
exports.useId = useId;
|
|
128
|
+
exports.useNodeRegistry = useNodeRegistry;
|
|
129
|
+
exports.useTheme = useTheme;
|
|
130
|
+
//# sourceMappingURL=chunk-HPNIEYSJ.cjs.map
|
|
131
|
+
//# sourceMappingURL=chunk-HPNIEYSJ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-id.ts","../src/hooks/use-node-registry.ts","../src/theme.ts","../src/hooks/use-theme.ts"],"names":["useReactId","useRef","useState","useCallback","useEffect"],"mappings":"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","file":"chunk-HPNIEYSJ.cjs","sourcesContent":["import { useId as useReactId } from \"react\";\n\nexport function useId(prefix?: string): string {\n const id = useReactId();\n return prefix ? `${prefix}-${id}` : id;\n}\n","import { useCallback, useRef, useState } from \"react\";\n\nexport interface NodeRect {\n x: number;\n y: number;\n width: number;\n height: number;\n}\n\ninterface UseNodeRegistryReturn {\n registerNode: (id: string, rect: NodeRect) => void;\n unregisterNode: (id: string) => void;\n nodeRects: Map<string, NodeRect>;\n version: number;\n}\n\nexport function useNodeRegistry(): UseNodeRegistryReturn {\n const rectsRef = useRef(new Map<string, NodeRect>());\n const [version, setVersion] = useState(0);\n\n const registerNode = useCallback((id: string, rect: NodeRect) => {\n rectsRef.current.set(id, rect);\n setVersion((v) => v + 1);\n }, []);\n\n const unregisterNode = useCallback((id: string) => {\n rectsRef.current.delete(id);\n setVersion((v) => v + 1);\n }, []);\n\n return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };\n}\n","/**\n * Light / dark / **system** theming.\n *\n * `styles.css` in this package defines the dark contract — it redefines the\n * whole `--color-secondary-*` scale under `:where(.dark)` so that \"900\" always\n * means strongest foreground and \"50\" always means faintest surface. This module\n * is the other half of that contract: the thing that decides when `.dark` is on.\n *\n * It lives here rather than in each app because every consumer was hand-rolling\n * it, and every hand-rolled copy had the same two holes:\n *\n * - **No live listener.** The OS preference was read once at boot, so changing\n * the system theme with the page open did nothing. That is a default, not a\n * \"system\" mode.\n * - **No way back.** Choosing light or dark wrote to storage forever, so\n * \"follow my system\" was unreachable after a single click.\n *\n * Both are fixed by treating **\"system\" as the absence of a stored choice**\n * rather than as a third stored value.\n *\n * Every export is safe to call during SSR, where it is a no-op that resolves to\n * `\"light\"`. Pair it with `useTheme`, which deliberately renders `system/light`\n * on the server and syncs in an effect — this project has paid for hydration\n * mismatches caused by reading the real theme during render.\n */\n\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\nexport type ResolvedTheme = \"light\" | \"dark\";\n\n/**\n * Deliberately the key the showcase already used, so adopting this module keeps\n * a returning visitor's saved choice instead of silently resetting it.\n */\nexport const THEME_STORAGE_KEY = \"fancy-ui.theme\";\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\ntype ThemeListener = (resolved: ResolvedTheme, preference: ThemePreference) => void;\n\nconst listeners = new Set<ThemeListener>();\nlet storageKey = THEME_STORAGE_KEY;\nlet stopWatchingSystem: (() => void) | null = null;\n\nfunction canUseDom(): boolean {\n return typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\n/** The stored choice, or `\"system\"` when there isn't one. */\nexport function getThemePreference(): ThemePreference {\n if (!canUseDom()) return \"system\";\n try {\n const saved = window.localStorage.getItem(storageKey);\n return saved === \"light\" || saved === \"dark\" ? saved : \"system\";\n } catch {\n // Private browsing and blocked storage both throw here. A theme is not\n // worth taking the page down over.\n return \"system\";\n }\n}\n\nfunction systemTheme(): ResolvedTheme {\n if (!canUseDom() || typeof window.matchMedia !== \"function\") return \"light\";\n return window.matchMedia(DARK_QUERY).matches ? \"dark\" : \"light\";\n}\n\n/** What is actually on screen, as opposed to what the user asked for. */\nexport function resolveTheme(preference: ThemePreference = getThemePreference()): ResolvedTheme {\n return preference === \"system\" ? systemTheme() : preference;\n}\n\nfunction applyToDocument(resolved: ResolvedTheme): void {\n if (!canUseDom()) return;\n const root = document.documentElement;\n // The class is what this package's CSS keys off; the attribute is for\n // consumers whose own styles key off `[data-theme]`.\n root.classList.toggle(\"dark\", resolved === \"dark\");\n root.setAttribute(\"data-theme\", resolved);\n}\n\nfunction publish(): void {\n const preference = getThemePreference();\n const resolved = resolveTheme(preference);\n applyToDocument(resolved);\n listeners.forEach((listener) => listener(resolved, preference));\n}\n\n/**\n * Choose a theme. `\"system\"` REMOVES the stored value rather than storing the\n * string — an absent choice is what lets the OS keep speaking for the user.\n */\nexport function setThemePreference(preference: ThemePreference): void {\n if (canUseDom()) {\n try {\n if (preference === \"system\") {\n window.localStorage.removeItem(storageKey);\n } else {\n window.localStorage.setItem(storageKey, preference);\n }\n } catch {\n // As above: still apply it for this page even if it cannot persist.\n }\n }\n publish();\n}\n\n/** Observe theme changes. Returns an unsubscribe. */\nexport function subscribeTheme(listener: ThemeListener): () => void {\n listeners.add(listener);\n return () => {\n listeners.delete(listener);\n };\n}\n\n/**\n * Apply the current theme and start following the OS. Call once, as early as\n * possible — before first paint if you want to avoid a flash of the wrong\n * theme. Returns a disposer; calling it again is harmless.\n */\nexport function initTheme(options: { storageKey?: string } = {}): () => void {\n if (options.storageKey) storageKey = options.storageKey;\n if (!canUseDom()) return () => {};\n\n applyToDocument(resolveTheme());\n\n if (!stopWatchingSystem && typeof window.matchMedia === \"function\") {\n const media = window.matchMedia(DARK_QUERY);\n const onSystemChange = (): void => {\n // Only \"system\" follows the OS. An explicit choice has to survive\n // the user switching their OS theme, or it isn't a choice.\n if (getThemePreference() === \"system\") publish();\n };\n\n if (typeof media.addEventListener === \"function\") {\n media.addEventListener(\"change\", onSystemChange);\n stopWatchingSystem = () => media.removeEventListener(\"change\", onSystemChange);\n } else {\n // Safari < 14 and friends.\n media.addListener(onSystemChange);\n stopWatchingSystem = () => media.removeListener(onSystemChange);\n }\n }\n\n return () => {\n stopWatchingSystem?.();\n stopWatchingSystem = null;\n };\n}\n","import { useCallback, useEffect, useState } from \"react\";\nimport {\n getThemePreference,\n resolveTheme,\n setThemePreference,\n subscribeTheme,\n type ResolvedTheme,\n type ThemePreference,\n} from \"../theme\";\n\nexport type UseThemeResult = {\n /** What the user asked for, including `\"system\"`. */\n preference: ThemePreference;\n /** What is actually on screen. */\n resolved: ResolvedTheme;\n setPreference: (preference: ThemePreference) => void;\n};\n\n/**\n * Read and set the theme from a component, re-rendering when it changes —\n * including when the OS theme changes underneath a `\"system\"` preference.\n *\n * The initial state is deliberately `system` / `light` rather than the real\n * theme: the server has neither storage nor an OS preference, so reading the\n * truth during render is exactly the hydration mismatch this project has\n * already chased down more than once. The effect syncs immediately on mount.\n */\nexport function useTheme(): UseThemeResult {\n const [state, setState] = useState<{ preference: ThemePreference; resolved: ResolvedTheme }>({\n preference: \"system\",\n resolved: \"light\",\n });\n\n useEffect(() => {\n const sync = (): void => {\n setState({ preference: getThemePreference(), resolved: resolveTheme() });\n };\n sync();\n return subscribeTheme(sync);\n }, []);\n\n const setPreference = useCallback((preference: ThemePreference): void => {\n setThemePreference(preference);\n }, []);\n\n return { ...state, setPreference };\n}\n"]}
|
|
@@ -11,6 +11,7 @@ var VideoViewer = react.forwardRef(
|
|
|
11
11
|
controls = true,
|
|
12
12
|
autoPlay = false,
|
|
13
13
|
loop = false,
|
|
14
|
+
preload = "metadata",
|
|
14
15
|
muted = false,
|
|
15
16
|
fit = "contain",
|
|
16
17
|
onError,
|
|
@@ -35,6 +36,7 @@ var VideoViewer = react.forwardRef(
|
|
|
35
36
|
"video",
|
|
36
37
|
{
|
|
37
38
|
src,
|
|
39
|
+
preload,
|
|
38
40
|
poster,
|
|
39
41
|
controls,
|
|
40
42
|
autoPlay,
|
|
@@ -58,5 +60,5 @@ var VideoViewer = react.forwardRef(
|
|
|
58
60
|
VideoViewer.displayName = "VideoViewer";
|
|
59
61
|
|
|
60
62
|
exports.VideoViewer = VideoViewer;
|
|
61
|
-
//# sourceMappingURL=chunk-
|
|
62
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-I462NM2A.cjs.map
|
|
64
|
+
//# sourceMappingURL=chunk-I462NM2A.cjs.map
|