@nxgt/material 2.13.0 → 2.14.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 +49 -0
- package/README.md +18 -5
- package/dist/{blockDiagram-BEXU5L5S-CQaNV8rX.js → blockDiagram-BEXU5L5S-Cn9cG3vt.js} +1 -1
- package/dist/{chunk-3FUC2YCW-DmtO_Y9L.js → chunk-3FUC2YCW-XrT5pZo5.js} +1 -1
- package/dist/{chunk-7M6MHVWA-BQ0cJz5u.js → chunk-7M6MHVWA-Uf-8NCRF.js} +1 -1
- package/dist/{chunk-GNY47TPC-DiVMvIit.js → chunk-GNY47TPC-CGgBmY0O.js} +4 -4
- package/dist/{chunk-NETBCI7D-B5Av2fJk.js → chunk-NETBCI7D-g-jPsM9q.js} +1 -1
- package/dist/{chunk-Z7XXMR3K-D4uKosJW.js → chunk-Z7XXMR3K-BzO1efzA.js} +1 -1
- package/dist/{classDiagram-v2-NBCMYWYE-BYktffst.js → classDiagram-v2-NBCMYWYE-7WgpfVcn.js} +2 -2
- package/dist/components/components.css +13 -2
- package/dist/components/ui/feedback/spinner/spinner.css +28 -0
- package/dist/components/ui/fields/otp-field/input-otp.css +48 -0
- package/dist/components/ui/media/pdf-viewer/pdf-viewer.css +24 -0
- package/dist/components/ui/overlays/drawer/vaul-drawer.css +199 -0
- package/dist/components/ui/overlays/drawer/vaul-keyframes.css +95 -0
- package/dist/{components-C-y3kTRm.js → components-qTUjhFuo.js} +116137 -127138
- package/dist/components.js +6 -6
- package/dist/{dagre-6A5THRUB-BvQAvoOX.js → dagre-6A5THRUB-BOuRxJdA.js} +3 -3
- package/dist/{diagram-22UHCM2B-BYd0lEdS.js → diagram-22UHCM2B-CF0vLJbn.js} +2 -2
- package/dist/{diagram-3UASUU5V-B3ndNq2p.js → diagram-3UASUU5V-RLo-MTfV.js} +1 -1
- package/dist/{elk-276RUBZZ-BxXn1nvc.js → elk-276RUBZZ-Dr2yBM7k.js} +3 -3
- package/dist/{erDiagram-OPXOYQCR-DjYy4h_r.js → erDiagram-OPXOYQCR-l7kPZ4FO.js} +2 -2
- package/dist/{field-blur-V8o79CDN.js → field-blur-BKGVq9_k.js} +865 -870
- package/dist/{flowDiagram-KWPJA3E3-BD7xvcMh.js → flowDiagram-KWPJA3E3-BQEK3XTl.js} +3 -3
- package/dist/fonts/katex/KaTeX_AMS-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Caligraphic-Bold.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Caligraphic-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Fraktur-Bold.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Fraktur-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Main-Bold.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Main-BoldItalic.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Main-Italic.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Main-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Math-BoldItalic.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Math-Italic.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_SansSerif-Bold.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_SansSerif-Italic.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_SansSerif-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Script-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Size1-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Size2-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Size3-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Size4-Regular.woff2 +0 -0
- package/dist/fonts/katex/KaTeX_Typewriter-Regular.woff2 +0 -0
- package/dist/{ganttDiagram-FUAMR5RP-BAuk7X6i.js → ganttDiagram-FUAMR5RP-WYm8XV7U.js} +1 -1
- package/dist/hooks.js +25 -25
- package/dist/{journeyDiagram-ZHPQQLJL-h2S56BMC.js → journeyDiagram-ZHPQQLJL-p90NnenY.js} +1 -1
- package/dist/lib/components/ui/fields/attributes/attribute-form/consts.d.ts +5 -1
- package/dist/lib/components/ui/fields/attributes/attribute-form/types.d.ts +2 -2
- package/dist/lib/components/ui/fields/opening-hours/consts.d.ts +12 -1
- package/dist/lib/components/ui/media/image-cropper/image-crop-aspects.d.ts +6 -0
- package/dist/lib/components/ui/media/image-cropper/use-frame-size.d.ts +4 -0
- package/dist/lib/components/ui/primitives/index.d.ts +1 -0
- package/dist/lib/components/ui/primitives/nonce-provider/index.d.ts +1 -0
- package/dist/lib/components/ui/primitives/nonce-provider/nonce-provider.d.ts +20 -0
- package/dist/lib/components/ui/widgets/rich-text-editor/extensions/extensions.d.ts +2 -2
- package/dist/lib/components/ui/widgets/rich-text-editor/use-rich-text-editor.d.ts +17 -0
- package/dist/lib/hooks/index.d.ts +1 -0
- package/dist/lib/hooks/use-csp-nonce.d.ts +16 -0
- package/dist/lib/lib/index.d.ts +1 -0
- package/dist/lib/vite/index.d.ts +3 -2
- package/dist/lib.js +30 -29
- package/dist/main.js +16 -16
- package/dist/map.js +1 -1
- package/dist/material.css +25 -1
- package/dist/{mermaid.core-BWF4Tq7X.js → mermaid.core-CW8DO1T1.js} +21 -21
- package/dist/{mindmap-definition-NLK3R4M7-Q-4J7KMu.js → mindmap-definition-NLK3R4M7-DJcCg9PL.js} +2 -2
- package/dist/{pieDiagram-5QR66LMP-BIxQ164y.js → pieDiagram-5QR66LMP-b_dHXzkV.js} +1 -1
- package/dist/{quadrantDiagram-O4NWA36T-BlI0otnv.js → quadrantDiagram-O4NWA36T-BSqAcBs7.js} +1 -1
- package/dist/{requirementDiagram-PLB6GJNP-CuVPUh0S.js → requirementDiagram-PLB6GJNP-BcxkmIFp.js} +2 -2
- package/dist/{sankeyDiagram-IPEJSGJF-Cke5i_9w.js → sankeyDiagram-IPEJSGJF-aD5r_n1q.js} +1 -1
- package/dist/{stateDiagram-v2-GCMORJYK-CT53U-pL.js → stateDiagram-v2-GCMORJYK-Ct9ylaoP.js} +2 -2
- package/dist/{swimlanes-2SLR337P-BwEtm09G.js → swimlanes-2SLR337P-BwCqwEoR.js} +3 -3
- package/dist/{swimlanesDiagram-TC7HE7FX-36JXV6X2.js → swimlanesDiagram-TC7HE7FX-WxBGUt0w.js} +3 -3
- package/dist/{timeline-definition-EJHVYXUP-BeX-S1oM.js → timeline-definition-EJHVYXUP-5Q8GU13Q.js} +1 -1
- package/dist/{use-heading-spy--7KHY3lw.js → use-heading-spy-wlOv87q3.js} +63 -57
- package/dist/{usecaseDiagram-POWQR4AR-Dfd0rXLr.js → usecaseDiagram-POWQR4AR-CzGOd4ic.js} +2 -2
- package/dist/vite.js +2 -2
- package/dist/{xychartDiagram-PMCCYNJV-D0UPPflL.js → xychartDiagram-PMCCYNJV-Bh_1zZoW.js} +1 -1
- package/docs/README.md +1 -0
- package/docs/components/data-display.md +5 -0
- package/docs/components/form-fields.md +14 -0
- package/docs/components/primitives.md +31 -0
- package/docs/getting-started.md +5 -1
- package/docs/guides/csp.md +408 -0
- package/docs/guides/helpers.md +2 -0
- package/docs/guides/theming.md +27 -0
- package/docs/roadmap.md +17 -1
- package/docs/troubleshooting.md +139 -0
- package/lib/components/components.css +13 -2
- package/lib/components/ui/feedback/spinner/spinner.css +28 -0
- package/lib/components/ui/fields/otp-field/input-otp.css +48 -0
- package/lib/components/ui/media/pdf-viewer/pdf-viewer.css +24 -0
- package/lib/components/ui/overlays/drawer/vaul-drawer.css +199 -0
- package/lib/components/ui/overlays/drawer/vaul-keyframes.css +95 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,54 @@
|
|
|
1
1
|
# @nxgt/material
|
|
2
2
|
|
|
3
|
+
## 2.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#479](https://github.com/softistx/nxgt-material/pull/479) [`6850b50`](https://github.com/softistx/nxgt-material/commit/6850b50d3832b401e32ea25aa356dde9b5684193) Thanks [@SteveGT96](https://github.com/SteveGT96)! - KaTeX's fonts (`Markdown` maths) ship as files: the compiled stylesheet `dist/material.css` no longer inlines its 60 fonts as `data:` URIs, and goes from 1.76 MB to 0.32 MB (about 1 MB to 46 KB gzipped). Its `@font-face` rules point at the 20 `woff2` files in `dist/fonts/katex/`, beside it, through a relative `url()`, so a strict `font-src 'self'` allows them and a browser downloads a font only when a formula draws from it. KaTeX's layout CSS stays in the stylesheet.
|
|
8
|
+
|
|
9
|
+
**Migration:** nothing to import. A bundler that processes the compiled stylesheet (`@import "@nxgt/material"`) emits the fonts as files (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section). An app that serves `dist/material.css` itself must serve `dist/fonts/` beside it, at the same relative path; without it, math renders in the system fonts (`\mathbb`, large delimiters and roots look wrong), the rest of the page is unaffected. The Tailwind route (`styles.css`) is unchanged.
|
|
10
|
+
|
|
11
|
+
- [#474](https://github.com/softistx/nxgt-material/pull/474) [`f4185a4`](https://github.com/softistx/nxgt-material/commit/f4185a49a03100e107092927eedf59893b5bd73a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `NonceProvider` gives the page's Content Security Policy nonce to every component below it. Render it once at the root, on the server and on the client, with the request's nonce: `<NonceProvider nonce={nonce}>` (the same value as `renderToPipeableStream(app, { nonce })`; on the client, `getCspNonce()`). A nested `NonceProvider` without a `nonce` inherits the outer one's.
|
|
12
|
+
|
|
13
|
+
- `ScrollArea` and `Select` pass it to the `<style>` Radix renders, and `RichTextEditor` sets tiptap's `injectNonce` from it (an `injectNonce` you pass still wins).
|
|
14
|
+
- The modals' scroll lock (Radix, through `react-style-singleton`) now reads the nonce `NonceProvider` keeps: the bundled `get-nonce` is replaced by `@nxgt/material-core/csp-nonce`, which also finds the nonce in the page (`<meta name="csp-nonce">`, a `<script nonce>`) without a provider. **Migration:** search for `__webpack_nonce__ = ` in your client entry, written for the scroll lock as the CSP guide of 2.9.0 advised, and remove it, wrapping the app in `NonceProvider` instead; a page without one needs nothing when the server writes the nonce into it.
|
|
15
|
+
- `useCspNonce()` (`@nxgt/material/hooks`) returns the provider's nonce for a `<style>` of your own; `undefined` outside one, on the server and the client alike, so hydration matches.
|
|
16
|
+
- `getCspNonce()` and `setCspNonce()` are re-exported from `@nxgt/material-core/csp-nonce` by `@nxgt/material/lib` and the main entry. `setCspNonce` does nothing on a server.
|
|
17
|
+
|
|
18
|
+
`NonceProvider` keeps the nonce for the code outside React (`setCspNonce`) in an insertion effect, never during render, so one request's nonce never reaches another's. The CSP guide has a `NonceProvider` section.
|
|
19
|
+
|
|
20
|
+
- [#478](https://github.com/softistx/nxgt-material/pull/478) [`525ca57`](https://github.com/softistx/nxgt-material/commit/525ca577bb5e186a84a900088ec286bcca6c8b94) Thanks [@SteveGT96](https://github.com/SteveGT96)! - No component of the library injects a `<style>` without a nonce any more, so a strict Content Security Policy (`style-src-elem 'self' 'nonce-…'`, no `'unsafe-inline'`) runs `Toaster`, `Drawer`, `InputOTP` and `ImageCropper` without a violation report.
|
|
21
|
+
|
|
22
|
+
- sonner (`Toaster`), vaul (`Drawer`) and input-otp (`InputOTP`) used to add their CSS as a `<style>` element at runtime. That CSS is now in the library's stylesheet (`styles.css` and `dist/material.css`), and the bundled copies of those packages no longer inject it.
|
|
23
|
+
- `ImageCropper` passes react-easy-crop's `disableAutomaticStylesInjection`; its CSS was already in the stylesheet.
|
|
24
|
+
- `Spinner` (variant `4`) and `PdfReader` no longer render a `<style>` element: their keyframes, search highlights and night mode are in the stylesheet (`spinner.css`, `pdf-viewer.css`).
|
|
25
|
+
|
|
26
|
+
**Migration:** none for an app that imports the stylesheet, as the README asks (`@import "@nxgt/material/styles.css"` in a Tailwind app, or `@nxgt/material`'s `dist/material.css`): the toast and drawer styles now come from that file. An app that imports only the JavaScript, with neither stylesheet, rendered toasts and drawers styled by the injected CSS and now renders them unstyled: import the stylesheet. A route served `'unsafe-inline'` in `style-src-elem` only for `Toaster`, `Drawer`, `InputOTP` or `ImageCropper` (as the CSP guide advised) can drop it and keep the nonce; mermaid diagrams still need it (see the guide's known gaps).
|
|
27
|
+
|
|
28
|
+
**Cascade:** sonner's and vaul's CSS now sits where your app `@import`s our stylesheet, not at the end of `<head>`, so an app rule on `[data-sonner-*]` or `[data-vaul-*]` with equal specificity now wins over ours. vaul's global keyframe names (`fadeIn`, `fadeOut`, `slideFromBottom`, …) can also be overridden by a keyframes rule of your own with the same name: search your CSS for `@keyframes (fadeIn|fadeOut|slide(From|To)(Bottom|Top|Left|Right))` and rename yours.
|
|
29
|
+
|
|
30
|
+
- [#480](https://github.com/softistx/nxgt-material/pull/480) [`634a58e`](https://github.com/softistx/nxgt-material/commit/634a58e3353ebe340e87b0f21858396aa4354654) Thanks [@SteveGT96](https://github.com/SteveGT96)! - zod is no longer bundled, and the library builds no zod schema while it loads, so a page under a strict Content Security Policy (a `script-src` without `'unsafe-eval'`) can stop zod's `new Function` probe with one `z.config({ jitless: true })`.
|
|
31
|
+
|
|
32
|
+
- `zod` stays a dependency (`^4.4.3`), imported at runtime: the library now uses the zod your app resolves, one copy when your range overlaps.
|
|
33
|
+
- New `openingHoursSchema()`: the zod schema of one `OpeningHour`, built on the first call and the same schema after. `AttributeForm` builds its schema when it first renders, not at import.
|
|
34
|
+
- `OpeningHoursSchema` is **deprecated** (removed in 3.0). It still works: it is built on its first use and behaves as `openingHoursSchema()`'s schema (`.parse`, `.safeParse`, `.shape`, `.extend`, `instanceof z.ZodObject`), but it is not the same object (`===`), and a `.meta()` or `registry.add()` on it is not seen through the factory's schema.
|
|
35
|
+
|
|
36
|
+
**Migration:**
|
|
37
|
+
|
|
38
|
+
1. Install zod in the app if it is not there yet (`bun add zod`): a strict package manager (pnpm) does not let the app import a package it does not list. Keep it inside `^4.4.3`.
|
|
39
|
+
2. Search for `OpeningHoursSchema` and replace it with `openingHoursSchema()` (a call), for example `z.array(openingHoursSchema())`.
|
|
40
|
+
3. Under a strict CSP, call `z.config({ jitless: true })` in a module the client entry imports first, before the first schema is built; the `EvalError` / `'unsafe-eval'` report from zod then stops. Build your own schemas inside functions when their module may load before that one. `docs/guides/csp.md`, "zod and `'unsafe-eval'`".
|
|
41
|
+
|
|
42
|
+
### Patch Changes
|
|
43
|
+
|
|
44
|
+
- [#467](https://github.com/softistx/nxgt-material/pull/467) [`f621c1e`](https://github.com/softistx/nxgt-material/commit/f621c1e0c75974cd6d1c22728719d47c1acd9a24) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A Content Security Policy guide (`docs/guides/csp.md`): the directives to send, the components that still inject a `<style>`, the zod and KaTeX settings, a self-hosted font, the per-request nonce; troubleshooting entries for the reports a strict policy sends, and a roadmap line.
|
|
45
|
+
|
|
46
|
+
- [#481](https://github.com/softistx/nxgt-material/pull/481) [`6facbb0`](https://github.com/softistx/nxgt-material/commit/6facbb0d05b67b4235f1451369e5b85d9c59fc54) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The CSP guide shows how to self-host Inter under a strict `font-src` (`@fontsource-variable/inter`, the `--font-sans` token, the fallback stack, `cspAssetsInlineLimit`, now also exported by `@nxgt/material/vite`), the theming guide has a Fonts section, and troubleshooting has an entry for a font refused from Google Fonts. The guide's last section, now "Status", states the CSP work is complete.
|
|
47
|
+
|
|
48
|
+
- [#479](https://github.com/softistx/nxgt-material/pull/479) [`e10c717`](https://github.com/softistx/nxgt-material/commit/e10c717bb6e3b74f444a2551b72314ddcd6c864c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@import "@nxgt/material"` (and `@nxgt/material-vue`) in CSS now resolves to the stylesheet under Vite and esbuild: the `style` condition comes before `import` in the `.` export, because those tools always add `import` when they resolve a CSS `@import`.
|
|
49
|
+
- Updated dependencies [[`3a2889d`](https://github.com/softistx/nxgt-material/commit/3a2889d71f1bfc9039ef43db916f3be3bf287ccd), [`634a58e`](https://github.com/softistx/nxgt-material/commit/634a58e3353ebe340e87b0f21858396aa4354654)]:
|
|
50
|
+
- @nxgt/material-core@0.9.0
|
|
51
|
+
|
|
3
52
|
## 2.13.0
|
|
4
53
|
|
|
5
54
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -64,6 +64,12 @@ bun add react react-dom react-hook-form react-redux @reduxjs/toolkit @tanstack/r
|
|
|
64
64
|
| `@tanstack/react-table` `^9` | `DataTable` |
|
|
65
65
|
| `react-use` `^17` | `useTheme`, `useIsMobile`, `ScrollProgress` (`useScroll` / `useWindowScroll`), other hooks |
|
|
66
66
|
|
|
67
|
+
**zod** (`^4.4.3`) is a dependency, imported at runtime, not bundled: the
|
|
68
|
+
library uses the zod your app resolves. With a strict package manager (pnpm),
|
|
69
|
+
add it to the app (`bun add zod`) when your own code imports it. Under a
|
|
70
|
+
strict Content Security Policy, call `z.config({ jitless: true })` first:
|
|
71
|
+
[zod and `'unsafe-eval'`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/csp.md#zod-and-unsafe-eval).
|
|
72
|
+
|
|
67
73
|
**Optional peers**, installed only by the app that imports the entry needing
|
|
68
74
|
them: `@react-pdf/renderer` `^4.9` and `react-pdf-tailwind` `^3` for
|
|
69
75
|
`@nxgt/material/print`; `leaflet`, `react-leaflet`, `@react-leaflet/core`,
|
|
@@ -88,6 +94,8 @@ In the app's root stylesheet, in this order:
|
|
|
88
94
|
@source "../node_modules/@nxgt/material/";
|
|
89
95
|
```
|
|
90
96
|
|
|
97
|
+
Toaster, Drawer and InputOTP take their CSS from this stylesheet: without it they render unstyled.
|
|
98
|
+
|
|
91
99
|
`styles.css` is the **source** `@theme` layer (colours, `--radius`, `dark`,
|
|
92
100
|
fonts), so it runs through *your* Tailwind build. The `@source` line is
|
|
93
101
|
required, and nothing warns you when it is missing. Tailwind v4 does not scan
|
|
@@ -103,7 +111,9 @@ tokens from this entry file to autocomplete them in your components.
|
|
|
103
111
|
|
|
104
112
|
In a Tailwind app, do not also import the compiled `style` condition on
|
|
105
113
|
`@nxgt/material` (`dist/material.css`). Take the tokens and let the app
|
|
106
|
-
generate the utilities. The compiled file is for apps without Tailwind.
|
|
114
|
+
generate the utilities. The compiled file is for apps without Tailwind. It
|
|
115
|
+
loads KaTeX's fonts (`Markdown` maths) as files from `dist/fonts/katex/`,
|
|
116
|
+
beside it, which `font-src 'self'` allows (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section); no extra import is needed.
|
|
107
117
|
|
|
108
118
|
### Icons
|
|
109
119
|
|
|
@@ -130,12 +140,12 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
|
|
|
130
140
|
| `@nxgt/material/components` | UI components and `*FormField` wrappers ([Components](#components)) |
|
|
131
141
|
| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders); `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md)) |
|
|
132
142
|
| `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md)) |
|
|
133
|
-
| `@nxgt/material/vite` | build-time helpers for consumers: `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md)) |
|
|
143
|
+
| `@nxgt/material/vite` | build-time helpers for consumers: `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/csp.md#katex-fonts)) |
|
|
134
144
|
| `@nxgt/material/next` | `withNxgtPrint(nextConfig)`: the `next.config.ts` a Next.js route handler that imports `/print` needs, `output: 'standalone'` included. Node only, no dependency on `next` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
|
|
135
|
-
| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialhooks)) |
|
|
145
|
+
| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialhooks)) |
|
|
136
146
|
| `@nxgt/material/dnd` | `@dnd-kit` primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialdnd)) |
|
|
137
147
|
| `@nxgt/material/i18n` | `I18nProvider`, `mergeResources`, `createTranslator` ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/i18n.md)) |
|
|
138
|
-
| `@nxgt/material/lib` | `cn`, `clientOnly`, date, number and storage utilities, `useSliceReducer` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmateriallib)) |
|
|
148
|
+
| `@nxgt/material/lib` | `cn`, `clientOnly`, date, number and storage utilities, `useSliceReducer`, `getCspNonce` / `setCspNonce` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmateriallib)) |
|
|
139
149
|
| `@nxgt/material/models` | `Status<T>` |
|
|
140
150
|
| `@nxgt/material/types` | shared function types (`PromiseOr`, `FunctionOr`, …) |
|
|
141
151
|
| `@nxgt/material/styles.css` | source Tailwind v4 tokens. **This** is the file the app imports |
|
|
@@ -251,6 +261,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
|
|
|
251
261
|
| [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
|
|
252
262
|
| [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md) | using `@nxgt/material/map` — browser-only, optional leaflet peers, `map.css` |
|
|
253
263
|
| [SSR](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/ssr.md) | rendering on a server: what the barrels guarantee, and `import()` + `clientOnly` for browser-only code |
|
|
264
|
+
| [Content Security Policy](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/csp.md) | serving a strict CSP: the directives, `NonceProvider` and the per-request nonce, the components that still inject a `<style>`, the zod and KaTeX settings, a self-hosted font |
|
|
254
265
|
| [Helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md) | the non-component subpaths: `/lib`, `/hooks`, `/i18n`, `/models`, `/types`, `/dnd` |
|
|
255
266
|
|
|
256
267
|
**Upgrading to 2.x**: print moved to `@nxgt/material/print` in 2.0.0, and
|
|
@@ -294,6 +305,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
|
|
|
294
305
|
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
|
|
295
306
|
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`ToggleGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#togglegroup), `ToggleGroupItem`, `ToggleGroupSeparator` | Single or multiple toggle group sharing variant and size. | `ToggleGroup`, `ToggleGroupItem` |
|
|
296
307
|
| — | [`Activity`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#activity) | React `<Activity>` switched by a boolean `visible`. | `Activity` |
|
|
308
|
+
| — | [`NonceProvider`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#nonceprovider) | Gives the page's CSP nonce to every component below; `useCspNonce()` reads it ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/csp.md#nonceprovider)). | `NonceProvider` |
|
|
297
309
|
|
|
298
310
|
### Buttons & actions
|
|
299
311
|
|
|
@@ -340,7 +352,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
|
|
|
340
352
|
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-attributes.webp" width="120" alt="AttributesField"> | [`AttributesField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#attributes), `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm` · `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` | Editor for typed custom attributes (string, number, date, select, rich text…). | `AttributesField`, `AttributesList`, `AttributeDialog`, `AttributeForm`, `AttributeValuesForm`, `AttributesFormField`, `AttributeValuesFormFieldSet`, `AttributeValueFormField` |
|
|
341
353
|
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-contacts.webp" width="120" alt="Contacts"> | [`Contacts`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#contacts), `ContactDialog`, `ContactItem` (deprecated) · `ContactsFormField` | Typed contact list (phone, email, URL…) with an add / edit dialog. | `Contacts`, `ContactItem`, `ContactDialog`, `ContactsFormField` |
|
|
342
354
|
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-postaladdress.webp" width="120" alt="PostalAddress"> | [`PostalAddress`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#postaladdress), `PostalAddressDialog` · `PostalAddressFormField` | Address card with an edit dialog. | `PostalAddress`, `PostalAddressDialog`, `PostalAddressFormField` |
|
|
343
|
-
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-openinghours.webp" width="120" alt="OpeningHours"> | [`OpeningHours`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#openinghours), `OpeningHoursDialog`, `OpeningHoursItem` (deprecated) · `OpeningHoursFormField` | Weekly opening hours with an add / edit dialog. | `OpeningHours`, `OpeningHoursDialog`, `OpeningHoursItem`, `OpeningHoursFormField` |
|
|
355
|
+
| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-openinghours.webp" width="120" alt="OpeningHours"> | [`OpeningHours`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#openinghours), `OpeningHoursDialog`, `OpeningHoursItem` (deprecated) · `OpeningHoursFormField` | Weekly opening hours with an add / edit dialog. | `OpeningHours`, `OpeningHoursDialog`, `OpeningHoursItem`, `OpeningHoursFormField`, `openingHoursSchema()` (`OpeningHoursSchema` deprecated) |
|
|
344
356
|
|
|
345
357
|
### Date & time
|
|
346
358
|
|
|
@@ -516,6 +528,7 @@ The ones that cost the most time. Every error message, with its fix, is in
|
|
|
516
528
|
| Symptom | Fix |
|
|
517
529
|
| --- | --- |
|
|
518
530
|
| Components render unstyled, no console error | `@source "../node_modules/@nxgt/material/";` in your stylesheet |
|
|
531
|
+
| Toast or drawer unstyled | import `@nxgt/material/styles.css` (or `dist/material.css`) |
|
|
519
532
|
| `<Icon>` is blank | serve `public/assets/icons/sprites/<style>.svg` |
|
|
520
533
|
| `window is not defined` at server boot | load `@nxgt/material/map` through `import()` + `clientOnly` ([maps](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md#browser-only)) |
|
|
521
534
|
| `Cannot find package '@nxgt/material-core'` at server boot | add `@nxgt/material-core` wherever `@nxgt/material` is in `ssr.noExternal` or `--external` ([troubleshooting](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/troubleshooting.md#cannot-find-package-nxgtmaterial-core)) |
|
|
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
|
12
12
|
import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
13
13
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
14
14
|
import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
15
|
-
import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-
|
|
15
|
+
import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-BzO1efzA.js";
|
|
16
16
|
//#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
|
|
17
17
|
function ve(e) {
|
|
18
18
|
return Array.isArray(e);
|
|
@@ -5,7 +5,7 @@ import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
|
5
5
|
import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
|
|
6
6
|
import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
|
|
7
7
|
import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
8
|
-
import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-
|
|
8
|
+
import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-BzO1efzA.js";
|
|
9
9
|
import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
10
10
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
|
|
11
11
|
function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {
|
|
@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
|
|
|
9
9
|
import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
|
|
10
10
|
import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
11
11
|
import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
12
|
-
import { r as w, t as T } from "./chunk-GNY47TPC-
|
|
12
|
+
import { r as w, t as T } from "./chunk-GNY47TPC-CGgBmY0O.js";
|
|
13
13
|
import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
14
14
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
|
|
15
15
|
var ie = "flowchart-", ae = class {
|
|
@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
|
|
|
5
5
|
import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
|
|
6
6
|
import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
|
|
7
7
|
import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
8
|
-
import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-
|
|
8
|
+
import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-BzO1efzA.js";
|
|
9
9
|
import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
10
10
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
|
|
11
11
|
var p = {
|
|
@@ -30,7 +30,7 @@ var p = {
|
|
|
30
30
|
], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
|
|
31
31
|
for (let t of e) h[t.name] = t;
|
|
32
32
|
}, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
|
|
33
|
-
let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-
|
|
33
|
+
let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-Dr2yBM7k.js"), "loader");
|
|
34
34
|
return [{
|
|
35
35
|
name: "elk",
|
|
36
36
|
loader: e,
|
|
@@ -45,11 +45,11 @@ var p = {
|
|
|
45
45
|
g([
|
|
46
46
|
{
|
|
47
47
|
name: "dagre",
|
|
48
|
-
loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-
|
|
48
|
+
loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-BOuRxJdA.js"), "loader")
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
name: "swimlane",
|
|
52
|
-
loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-
|
|
52
|
+
loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-BwCqwEoR.js"), "loader")
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
name: "cose-bilkent",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
2
|
-
import { o as t } from "./chunk-Z7XXMR3K-
|
|
2
|
+
import { o as t } from "./chunk-Z7XXMR3K-BzO1efzA.js";
|
|
3
3
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
|
|
4
4
|
var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
|
|
5
5
|
function s(e) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { st as e } from "./components-
|
|
1
|
+
import { st as e } from "./components-qTUjhFuo.js";
|
|
2
2
|
import { n as t, t as n } from "./src-CsLQInsN.js";
|
|
3
3
|
import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
|
|
4
4
|
import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";
|
|
@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
|
|
|
9
9
|
import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
10
10
|
import "./chunk-7INBJB4K-k-I67NSP.js";
|
|
11
11
|
import "./chunk-5DYCD2WN-Cd1zazNp.js";
|
|
12
|
-
import "./chunk-Z7XXMR3K-
|
|
12
|
+
import "./chunk-Z7XXMR3K-BzO1efzA.js";
|
|
13
13
|
import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
|
|
14
14
|
import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
|
|
15
15
|
import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
|
|
16
16
|
import "./chunk-UA2S7LBM-ChuksCDg.js";
|
|
17
|
-
import { r as T, t as E } from "./chunk-GNY47TPC-
|
|
17
|
+
import { r as T, t as E } from "./chunk-GNY47TPC-CGgBmY0O.js";
|
|
18
18
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
|
|
19
19
|
var D = (function() {
|
|
20
20
|
var e = /* @__PURE__ */ i(function(e, t, n, r) {
|
|
@@ -3,10 +3,21 @@
|
|
|
3
3
|
* styles.css and never dist/material.css, gets it too: only
|
|
4
4
|
* dist/material.css collected a component's own CSS import.
|
|
5
5
|
*
|
|
6
|
-
* PdfReader: react-pdf's text layer (selection, search highlights)
|
|
7
|
-
* pdf.js's annotation layer (links, notes, form widgets)
|
|
6
|
+
* PdfReader: react-pdf's text layer (selection, search highlights),
|
|
7
|
+
* pdf.js's annotation layer (links, notes, form widgets), and our highlights
|
|
8
|
+
* and night mode. */
|
|
8
9
|
@import "react-pdf/dist/Page/TextLayer.css";
|
|
9
10
|
@import "react-pdf/dist/Page/AnnotationLayer.css";
|
|
11
|
+
@import "./ui/media/pdf-viewer/pdf-viewer.css";
|
|
12
|
+
/* What sonner (Toaster), vaul (Drawer) and input-otp (InputOTP) would inject
|
|
13
|
+
* as `<style>` elements at runtime: the build strips those injections
|
|
14
|
+
* (build/strip-style-injection.ts), so a strict CSP needs no 'unsafe-inline'.
|
|
15
|
+
* Spinner's variant 4 keyframes, for the same reason. */
|
|
16
|
+
@import "sonner/dist/styles.css";
|
|
17
|
+
@import "./ui/overlays/drawer/vaul-drawer.css";
|
|
18
|
+
@import "./ui/overlays/drawer/vaul-keyframes.css";
|
|
19
|
+
@import "./ui/fields/otp-field/input-otp.css";
|
|
20
|
+
@import "./ui/feedback/spinner/spinner.css";
|
|
10
21
|
/* KaTeX (Markdown), highlight.js (RichTextEditor code blocks),
|
|
11
22
|
* react-easy-crop (ImageCropper), the code theme (CodeBlock), and the few
|
|
12
23
|
* components styled by a stylesheet of their own rather than by classes. */
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@keyframes spin {
|
|
2
|
+
to {
|
|
3
|
+
transform: rotate(360deg);
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@keyframes spin2 {
|
|
8
|
+
0% {
|
|
9
|
+
stroke-dasharray: 1, 800;
|
|
10
|
+
stroke-dashoffset: 0;
|
|
11
|
+
}
|
|
12
|
+
50% {
|
|
13
|
+
stroke-dasharray: 400, 400;
|
|
14
|
+
stroke-dashoffset: -200px;
|
|
15
|
+
}
|
|
16
|
+
100% {
|
|
17
|
+
stroke-dasharray: 800, 1;
|
|
18
|
+
stroke-dashoffset: -800px;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.spin2 {
|
|
23
|
+
transform-origin: center;
|
|
24
|
+
animation:
|
|
25
|
+
spin2 1.5s ease-in-out infinite,
|
|
26
|
+
spin 2s linear infinite;
|
|
27
|
+
animation-direction: alternate;
|
|
28
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* The rules input-otp (React, 1.4.2) and vue-input-otp (0.4.0) add on mount,
|
|
2
|
+
* through `insertRule` into a `<style id="input-otp-style">`: the hidden
|
|
3
|
+
* input's caret, selection and autofill stay invisible behind the slots.
|
|
4
|
+
* Here so a strict CSP blocks nothing. @nxgt/material strips input-otp's
|
|
5
|
+
* injection at build (build/strip-style-injection.ts); vue-input-otp is
|
|
6
|
+
* external, still injects, and takes the nonce (NonceProvider). The same file
|
|
7
|
+
* in both libraries (scripts/shared-paths.ts). */
|
|
8
|
+
/* biome-ignore-all lint/complexity/noImportantStyles: input-otp's own rules */
|
|
9
|
+
[data-input-otp]::selection {
|
|
10
|
+
background: transparent !important;
|
|
11
|
+
color: transparent !important;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Two rules: a browser that does not know one pseudo-class drops the list. */
|
|
15
|
+
[data-input-otp]:autofill {
|
|
16
|
+
background: transparent !important;
|
|
17
|
+
color: transparent !important;
|
|
18
|
+
border-color: transparent !important;
|
|
19
|
+
opacity: 0 !important;
|
|
20
|
+
box-shadow: none !important;
|
|
21
|
+
-webkit-box-shadow: none !important;
|
|
22
|
+
-webkit-text-fill-color: transparent !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-input-otp]:-webkit-autofill {
|
|
26
|
+
background: transparent !important;
|
|
27
|
+
color: transparent !important;
|
|
28
|
+
border-color: transparent !important;
|
|
29
|
+
opacity: 0 !important;
|
|
30
|
+
box-shadow: none !important;
|
|
31
|
+
-webkit-box-shadow: none !important;
|
|
32
|
+
-webkit-text-fill-color: transparent !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@supports (-webkit-touch-callout: none) {
|
|
36
|
+
[data-input-otp] {
|
|
37
|
+
letter-spacing: -0.6em !important;
|
|
38
|
+
font-weight: 100 !important;
|
|
39
|
+
font-stretch: ultra-condensed;
|
|
40
|
+
font-optical-sizing: none !important;
|
|
41
|
+
left: -1px !important;
|
|
42
|
+
right: 1px !important;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-input-otp] + * {
|
|
47
|
+
pointer-events: all !important;
|
|
48
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* PdfReader's search highlights and night mode. react-pdf's text and
|
|
2
|
+
* annotation layers are imported from react-pdf by components.css. The same
|
|
3
|
+
* rules as @nxgt/material-vue's pdf-viewer.css, which also holds its text
|
|
4
|
+
* layer. */
|
|
5
|
+
|
|
6
|
+
.pdf-highlight {
|
|
7
|
+
background: oklch(0.9 0.18 85);
|
|
8
|
+
color: black;
|
|
9
|
+
border-radius: 2px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.pdf-highlight[data-current] {
|
|
13
|
+
outline: 2px solid var(--color-primary);
|
|
14
|
+
outline-offset: 1px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.dark .pdf-highlight {
|
|
18
|
+
background: oklch(0.75 0.18 85);
|
|
19
|
+
color: black;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.pdf-night-page {
|
|
23
|
+
filter: invert(0.9) hue-rotate(180deg);
|
|
24
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
/*! vaul 1.1.2's stylesheet (MIT, Emil Kowalski), its rules. vaul injects it as a
|
|
2
|
+
* `<style>` at module load; the library build strips that call
|
|
3
|
+
* (build/strip-style-injection.ts, which pins the injected text) and ships
|
|
4
|
+
* it here instead, so a strict CSP needs no 'unsafe-inline'. `vaul/style.css`
|
|
5
|
+
* is not in vaul's `exports`, hence the copy: update it with vaul.
|
|
6
|
+
*
|
|
7
|
+
* Left out: `[data-vaul-handle-hitarea]: { … }` under `(pointer: fine)`, an
|
|
8
|
+
* invalid selector every browser drops.
|
|
9
|
+
*
|
|
10
|
+
* MIT License. Copyright (c) 2023 Emil Kowalski
|
|
11
|
+
*
|
|
12
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
13
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
14
|
+
* in the Software without restriction, including without limitation the rights
|
|
15
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
16
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
17
|
+
* furnished to do so, subject to the following conditions:
|
|
18
|
+
*
|
|
19
|
+
* The above copyright notice and this permission notice shall be included in
|
|
20
|
+
* all copies or substantial portions of the Software.
|
|
21
|
+
*
|
|
22
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
23
|
+
* IMPLIED. See vaul's LICENSE.md for the full text.
|
|
24
|
+
*/
|
|
25
|
+
[data-vaul-drawer] {
|
|
26
|
+
touch-action: none;
|
|
27
|
+
will-change: transform;
|
|
28
|
+
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
29
|
+
animation-duration: 0.5s;
|
|
30
|
+
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] {
|
|
34
|
+
animation-name: slideFromBottom;
|
|
35
|
+
}
|
|
36
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] {
|
|
37
|
+
animation-name: slideToBottom;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"] {
|
|
41
|
+
animation-name: slideFromTop;
|
|
42
|
+
}
|
|
43
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"] {
|
|
44
|
+
animation-name: slideToTop;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"] {
|
|
48
|
+
animation-name: slideFromLeft;
|
|
49
|
+
}
|
|
50
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"] {
|
|
51
|
+
animation-name: slideToLeft;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"] {
|
|
55
|
+
animation-name: slideFromRight;
|
|
56
|
+
}
|
|
57
|
+
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"] {
|
|
58
|
+
animation-name: slideToRight;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="bottom"] {
|
|
62
|
+
transform: translate3d(0, var(--initial-transform, 100%), 0);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="top"] {
|
|
66
|
+
transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="left"] {
|
|
70
|
+
transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="right"] {
|
|
74
|
+
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"] {
|
|
78
|
+
transform: translate3d(0, var(--snap-point-height, 0), 0);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"] {
|
|
82
|
+
transform: translate3d(0, var(--snap-point-height, 0), 0);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"] {
|
|
86
|
+
transform: translate3d(var(--snap-point-height, 0), 0, 0);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"] {
|
|
90
|
+
transform: translate3d(var(--snap-point-height, 0), 0, 0);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[data-vaul-overlay][data-vaul-snap-points="false"] {
|
|
94
|
+
animation-duration: 0.5s;
|
|
95
|
+
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
96
|
+
}
|
|
97
|
+
[data-vaul-overlay][data-vaul-snap-points="false"][data-state="open"] {
|
|
98
|
+
animation-name: fadeIn;
|
|
99
|
+
}
|
|
100
|
+
[data-vaul-overlay][data-state="closed"] {
|
|
101
|
+
animation-name: fadeOut;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[data-vaul-animate="false"] {
|
|
105
|
+
/* biome-ignore lint/complexity/noImportantStyles: vaul's own rule */
|
|
106
|
+
animation: none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[data-vaul-overlay][data-vaul-snap-points="true"] {
|
|
110
|
+
opacity: 0;
|
|
111
|
+
transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
[data-vaul-overlay][data-vaul-snap-points="true"] {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[data-vaul-drawer]:not([data-vaul-custom-container="true"])::after {
|
|
119
|
+
content: "";
|
|
120
|
+
position: absolute;
|
|
121
|
+
background: inherit;
|
|
122
|
+
background-color: inherit;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-vaul-drawer][data-vaul-drawer-direction="top"]::after {
|
|
126
|
+
top: initial;
|
|
127
|
+
bottom: 100%;
|
|
128
|
+
left: 0;
|
|
129
|
+
right: 0;
|
|
130
|
+
height: 200%;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
[data-vaul-drawer][data-vaul-drawer-direction="bottom"]::after {
|
|
134
|
+
top: 100%;
|
|
135
|
+
bottom: initial;
|
|
136
|
+
left: 0;
|
|
137
|
+
right: 0;
|
|
138
|
+
height: 200%;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-vaul-drawer][data-vaul-drawer-direction="left"]::after {
|
|
142
|
+
left: initial;
|
|
143
|
+
right: 100%;
|
|
144
|
+
top: 0;
|
|
145
|
+
bottom: 0;
|
|
146
|
+
width: 200%;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
[data-vaul-drawer][data-vaul-drawer-direction="right"]::after {
|
|
150
|
+
left: 100%;
|
|
151
|
+
right: initial;
|
|
152
|
+
top: 0;
|
|
153
|
+
bottom: 0;
|
|
154
|
+
width: 200%;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-vaul-overlay][data-vaul-snap-points="true"]:not(
|
|
158
|
+
[data-vaul-snap-points-overlay="true"]
|
|
159
|
+
):not([data-state="closed"]) {
|
|
160
|
+
opacity: 0;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
[data-vaul-overlay][data-vaul-snap-points-overlay="true"] {
|
|
164
|
+
opacity: 1;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
[data-vaul-handle] {
|
|
168
|
+
display: block;
|
|
169
|
+
position: relative;
|
|
170
|
+
opacity: 0.7;
|
|
171
|
+
background: #e2e2e4;
|
|
172
|
+
margin-left: auto;
|
|
173
|
+
margin-right: auto;
|
|
174
|
+
height: 5px;
|
|
175
|
+
width: 32px;
|
|
176
|
+
border-radius: 1rem;
|
|
177
|
+
touch-action: pan-y;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
[data-vaul-handle]:active,
|
|
181
|
+
[data-vaul-handle]:hover {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
[data-vaul-handle-hitarea] {
|
|
186
|
+
position: absolute;
|
|
187
|
+
left: 50%;
|
|
188
|
+
top: 50%;
|
|
189
|
+
transform: translate(-50%, -50%);
|
|
190
|
+
width: max(100%, 2.75rem); /* 44px */
|
|
191
|
+
height: max(100%, 2.75rem); /* 44px */
|
|
192
|
+
touch-action: inherit;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media (hover: hover) and (pointer: fine) {
|
|
196
|
+
[data-vaul-drawer] {
|
|
197
|
+
user-select: none;
|
|
198
|
+
}
|
|
199
|
+
}
|