draftify-react 0.1.4 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +284 -190
  2. package/dist/draftify-react.css +1 -1
  3. package/dist/draftify-react.es.js +8 -4
  4. package/dist/draftify-react.umd.js +12 -12
  5. package/index.d.ts +2 -2
  6. package/package.json +5 -1
package/README.md CHANGED
@@ -1,190 +1,284 @@
1
- # Draftify React ✨
2
-
3
- **A ready-to-use React editor built on top of Draftify**
4
-
5
- `draftify-react` is a **fully styled, production-ready React editor** powered by the `draftify` core engine. It provides an out-of-the-box editing experience while preserving the structured, schema-driven philosophy of Draftify.
6
-
7
- This package focuses purely on **UI and interaction**.
8
- All document logic lives in `draftify`.
9
-
10
- ---
11
-
12
- ## ⚠️ Important Dependency Notice
13
-
14
- `draftify-react` **does not work on its own**.
15
-
16
- It requires the core engine:
17
-
18
- ```bash
19
- npm install draftify
20
- npm install draftify-react
21
- ```
22
-
23
- `draftify-react` consumes and manipulates Draftify documents internally, so both packages must be installed.
24
-
25
- ---
26
-
27
- ## Features
28
-
29
- - ✅ Ready-to-use rich editor
30
- - ✅ Built on top of `draftify`
31
- - ✅ Precompiled CSS (no Tailwind setup required)
32
- - ✅ Tailwind v4 compatible
33
- - ✅ Drag & drop block reordering
34
- - ✅ Document metadata handling
35
- - ✅ Preview & editor modes
36
- - ✅ Clipboard, export & formatting support
37
- - ✅ Zero configuration required to start
38
-
39
- ---
40
-
41
- ## Installation
42
-
43
- ```bash
44
- npm install draftify draftify-react
45
- ```
46
-
47
- ---
48
-
49
- ## Basic Usage
50
-
51
- ```jsx
52
- import DraftifyReact from "draftify-react";
53
- import "draftify-react/styles.css";
54
-
55
- export default function App() {
56
- return (
57
- <div>
58
- <DraftifyReact />
59
- </div>
60
- );
61
- }
62
- ```
63
-
64
- That’s all you need for a working editor.
65
-
66
- ---
67
-
68
- ## Styling (Required)
69
-
70
- `draftify-react` ships with **precompiled CSS**.
71
-
72
- You must import it **once** in your app:
73
-
74
- ```css
75
- @import "draftify-react/styles.css";
76
- ```
77
-
78
- ### Tailwind v4 Users
79
-
80
- If your project uses Tailwind v4, no extra configuration is required.
81
- All Draftify styles are already compiled and scoped.
82
-
83
- ---
84
-
85
- ## Editor Behavior
86
-
87
- The editor supports:
88
-
89
- - Multiple block types
90
- - Inline editing
91
- - Drag & drop ordering
92
- - Preview vs edit mode
93
- - Copy / export helpers
94
- - Metadata prompts (title, description, author)
95
-
96
- All content is internally represented using Draftify’s schema.
97
-
98
- ---
99
-
100
- ## Hooks API
101
-
102
- ### `useDraftifyReact`
103
-
104
- ```ts
105
- import { useDraftifyReact } from "draftify-react";
106
- ```
107
-
108
- This hook powers the editor internally and exposes:
109
-
110
- - Document state
111
- - Block data
112
- - Block creation & modification helpers
113
- - Drag & drop handlers
114
- - UI state helpers
115
-
116
- > Advanced users can build **custom editors or wrappers** using this hook.
117
-
118
- ---
119
-
120
- ## Project Structure
121
-
122
- ```
123
- draftify-react/
124
- ├─ dist/
125
- │ ├─ draftify-react.es.js
126
- │ ├─ draftify-react.umd.js
127
- │ └─ draftify-react.css
128
- │
129
- ├─ index.d.ts
130
- ├─ package.json
131
- └─ README.md
132
- ```
133
-
134
- The distributed package contains only what is required at runtime.
135
-
136
- ---
137
-
138
- ## Exports
139
-
140
- ```ts
141
- import DraftifyReact from "draftify-react";
142
- import { useDraftifyReact } from "draftify-react";
143
- ```
144
-
145
- Styles:
146
-
147
- ```css
148
- @import "draftify-react/styles.css";
149
- ```
150
-
151
- ---
152
-
153
- ## Why This Package Exists
154
-
155
- Draftify was designed with separation of concerns in mind.
156
-
157
- - `draftify` → **logic, schema, validation, export**
158
- - `draftify-react` → **UI, interactions, visuals**
159
-
160
- This allows:
161
-
162
- - Custom editors without UI constraints
163
- - Backend usage of Draftify
164
- - Independent evolution of UI and logic
165
-
166
- ---
167
-
168
- ## When to Use `draftify-react`
169
-
170
- Use this package if you want:
171
-
172
- - A complete editor without building UI
173
- - Fast integration into a React project
174
- - A clean abstraction over Draftify’s internals
175
-
176
- If you want to build your own editor UI, use `draftify` directly.
177
-
178
- ---
179
-
180
- ## Compatibility
181
-
182
- - React ≥ 18
183
- - Tailwind v4 supported
184
- - ESM & UMD builds included
185
-
186
- ---
187
-
188
- ## License
189
-
190
- MIT © 2025 Draftify Team
1
+ [![npm](https://img.shields.io/npm/v/draftify-react)](https://www.npmjs.com/package/draftify-react)
2
+ # Draftify React ✨
3
+
4
+ **A ready-to-use React editor built on top of Draftify**
5
+
6
+ `draftify-react` is a **fully styled, production-ready React editor** powered by the `draftify` core engine. It provides an out-of-the-box editing experience while preserving the structured, schema-driven philosophy of Draftify.
7
+
8
+ This package focuses purely on **UI and interaction**.
9
+ All document logic, schemas, validation, and export utilities live in `draftify`.
10
+
11
+ ---
12
+ ## ⚠️ Important Dependency Notice
13
+
14
+ `draftify-react` **does not work on its own**.
15
+
16
+ It requires the Draftify core engine:
17
+
18
+ ```bash
19
+ npm install draftify
20
+ npm install draftify-react
21
+ ```
22
+
23
+ Both packages must be installed.
24
+ `draftify-react` renders and manipulates **Draftify documents**, but it does not define the document model itself.
25
+
26
+ ---
27
+
28
+ ## Features
29
+
30
+ - ✅ Ready-to-use rich editor
31
+ - ✅ Built on top of `draftify`
32
+ - ✅ Precompiled CSS (no Tailwind setup required)
33
+ - ✅ Tailwind v4 compatible
34
+ - ✅ Drag & drop block reordering
35
+ - ✅ Document metadata handling
36
+ - ✅ Preview & editor modes
37
+ - ✅ Clipboard, export & formatting support
38
+ - ✅ Reader component for rendering documents
39
+ - ✅ Zero configuration required to start
40
+
41
+ ---
42
+
43
+ ## Installation
44
+
45
+ ```bash
46
+ npm install draftify draftify-react
47
+ ```
48
+
49
+ ---
50
+
51
+ ## ❗ Controlled Editor (Very Important)
52
+
53
+ `draftify-react` is a **controlled editor**.
54
+
55
+ This means:
56
+
57
+ - **You own the document state**
58
+ - The editor **does not store blocks internally**
59
+ - You must declare and manage the blocks array yourself
60
+
61
+ This design is intentional. It allows:
62
+
63
+ - Full control over persistence (database, localStorage, APIs)
64
+ - Multiple views of the same document (editor + reader)
65
+ - Easy integration with frameworks and state managers
66
+ - Predictable, debuggable data flow
67
+
68
+ ---
69
+
70
+ ## Minimal Usage (Required Pattern)
71
+
72
+ This is the **correct and complete** way to use `draftify-react`.
73
+
74
+ ```tsx
75
+ import { useState } from "react";
76
+ import type { DraftifyBlock } from "draftify";
77
+ import DraftifyReact, { Reader } from "draftify-react";
78
+ import "draftify-react/styles.css";
79
+
80
+ export default function App() {
81
+ const [blocksData, modifyBlocks] = useState<DraftifyBlock[]>([]);
82
+
83
+ return (
84
+ <>
85
+ <DraftifyReact blocksData={blocksData} modifyBlocks={modifyBlocks} />
86
+
87
+ {/* Render the same document anywhere */}
88
+ <Reader blocksData={blocksData} />
89
+ </>
90
+ );
91
+ }
92
+ ```
93
+
94
+ ### What’s happening here
95
+
96
+ - `blocksData` holds the Draftify document
97
+ - `modifyBlocks` is passed to the editor
98
+ - The editor updates state via `modifyBlocks`
99
+ - `Reader` consumes the **same data** to render content
100
+
101
+ There is **one source of truth** for your document.
102
+
103
+ ---
104
+
105
+ ## TypeScript Users (Recommended)
106
+
107
+ Draftify exposes its schema types via the core package.
108
+
109
+ You should always type your state explicitly:
110
+
111
+ ```ts
112
+ import type { DraftifyBlock } from "draftify";
113
+
114
+ const [blocksData, modifyBlocks] = useState<DraftifyBlock[]>([]);
115
+ ```
116
+
117
+ This ensures:
118
+
119
+ - Full IntelliSense
120
+ - Compile-time validation
121
+ - Safer integration with APIs and storage layers
122
+
123
+ ---
124
+
125
+ ## Styling (Required)
126
+
127
+ `draftify-react` ships with **precompiled CSS**.
128
+
129
+ You must import it **once** in your app:
130
+
131
+ ```css
132
+ @import "draftify-react/styles.css";
133
+ ```
134
+
135
+ or in JavaScript:
136
+
137
+ ```ts
138
+ import "draftify-react/styles.css";
139
+ ```
140
+
141
+ ### Tailwind v4 Users
142
+
143
+ No configuration required.
144
+ All Draftify styles are already compiled and scoped.
145
+
146
+ ---
147
+
148
+ ## Reader Component
149
+
150
+ `draftify-react` exports a `Reader` component for rendering documents without editing.
151
+
152
+ ```tsx
153
+ import { Reader } from "draftify-react";
154
+
155
+ <Reader blocksData={blocksData} />;
156
+ ```
157
+
158
+ Use cases:
159
+
160
+ - Read-only previews
161
+ - Blog posts
162
+ - Exported documents
163
+ - Public-facing content
164
+
165
+ The `Reader` component **never mutates data**.
166
+
167
+ ---
168
+
169
+ ## Hooks API (Advanced)
170
+
171
+ ### `useDraftifyReact`
172
+
173
+ ```ts
174
+ import { useDraftifyReact } from "draftify-react";
175
+ ```
176
+
177
+ This hook powers the editor internally and exposes:
178
+
179
+ - Document state helpers
180
+ - Block creation & modification functions
181
+ - Drag & drop handlers
182
+ - View and animation state
183
+
184
+ This is intended for:
185
+
186
+ - Custom editors
187
+ - Headless integrations
188
+ - Advanced UI wrappers
189
+
190
+ Most users **do not need this hook**.
191
+
192
+ ---
193
+
194
+ ## Collaboration Between Packages
195
+
196
+ Draftify is intentionally split into two layers:
197
+
198
+ ### `draftify`
199
+
200
+ - Schema definitions
201
+ - Block types
202
+ - Validation
203
+ - Normalization
204
+ - Clipboard & export helpers
205
+ - Framework-agnostic logic
206
+
207
+ ### `draftify-react`
208
+
209
+ - React components
210
+ - UI interactions
211
+ - Animations
212
+ - Styling
213
+ - Editor and Reader views
214
+
215
+ Because of this separation:
216
+
217
+ - `draftify` can be used in **any framework**
218
+ - `draftify-react` can evolve independently
219
+ - You can build alternative UIs without rewriting logic
220
+
221
+ ---
222
+
223
+ ## Project Structure
224
+
225
+ ```
226
+ draftify-react/
227
+ ├─ dist/
228
+ │ ├─ draftify-react.es.js
229
+ │ ├─ draftify-react.umd.js
230
+ │ └─ draftify-react.css
231
+ │
232
+ ├─ index.d.ts
233
+ ├─ package.json
234
+ └─ README.md
235
+ ```
236
+
237
+ Only runtime-required files are shipped.
238
+
239
+ ---
240
+
241
+ ## Exports
242
+
243
+ ```ts
244
+ import DraftifyReact from "draftify-react";
245
+ import { Reader, useDraftifyReact } from "draftify-react";
246
+ ```
247
+
248
+ Styles:
249
+
250
+ ```css
251
+ @import "draftify-react/styles.css";
252
+ ```
253
+
254
+ ---
255
+
256
+ ## When to Use `draftify-react`
257
+
258
+ Use this package if you want:
259
+
260
+ - A complete editor UI
261
+ - Fast React integration
262
+ - Full control over document state
263
+ - A clean abstraction over Draftify internals
264
+
265
+ If you want to build your own editor UI or use Draftify outside React, use `draftify` directly.
266
+
267
+ ---
268
+
269
+ ## Compatibility
270
+
271
+ - React ≥ 18
272
+ - TypeScript supported
273
+ - Tailwind v4 supported
274
+ - ESM & UMD builds included
275
+
276
+ ---
277
+
278
+ ## License
279
+
280
+ MIT © 2025 Draftify Team
281
+
282
+ ---
283
+
284
+ Bernard Kuria Mechatronics Engineer • Developer • Creator of E-NEXUS, DigiSign, and Draftify 📍 Nyeri, Kenya 🌐 https://bernard-webfolio.web.app
package/dist/draftify-react.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-400:oklch(79.2% .209 151.711);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-purple-500:oklch(62.7% .265 303.9);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--draftify-theme-color:#3b82f6;--hovered-draftify-theme-color:#1e40af}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.doc-metadata-prompt{z-index:10;--tw-translate-x:calc(calc(1/2*100%)*-1);--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);background-color:var(--color-white);padding:calc(var(--spacing)*5);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;top:50%;left:50%}.draftify-container{height:fit-content;min-height:calc(var(--spacing)*112.5);gap:calc(var(--spacing)*5);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);background-color:var(--color-white);width:100%;padding:calc(var(--spacing)*2);flex-direction:column;display:flex;position:relative}@media (min-width:48rem){.draftify-container{gap:calc(var(--spacing)*2.5);padding:calc(var(--spacing)*5)}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.bottom-0\.5{bottom:calc(var(--spacing)*.5)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.-z-1{z-index:calc(1*-1)}.z-10{z-index:10}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-2\.5{margin-bottom:calc(var(--spacing)*2.5)}.block-container{align-items:center;gap:calc(var(--spacing)*1.25);border-radius:var(--radius-md);padding:calc(var(--spacing)*1.25);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}.output-area{gap:calc(var(--spacing)*2.5);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);padding:calc(var(--spacing)*3);display:grid}@media (min-width:48rem){.output-area{padding:calc(var(--spacing)*5)}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.media{object-fit:cover;width:100%;height:100%}.paragraph{--tw-outline-style:none;outline-style:none;width:100%;height:fit-content}.h-1{height:calc(var(--spacing)*1)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6\.25{height:calc(var(--spacing)*6.25)}.h-15{height:calc(var(--spacing)*15)}.h-30{height:calc(var(--spacing)*30)}.h-32{height:calc(var(--spacing)*32)}.h-50{height:calc(var(--spacing)*50)}.h-68\.75{height:calc(var(--spacing)*68.75)}.h-\[40px\]{height:40px}.h-full{height:100%}.h-px{height:1px}.quote{border-left-style:var(--tw-border-style);width:100%;padding-left:calc(var(--spacing)*2);--tw-outline-style:none;border-left-width:4px;outline-style:none;font-size:18px;font-style:italic}.code{background-color:var(--color-black);width:100%;padding:calc(var(--spacing)*2);font-family:var(--font-mono);white-space:pre-wrap;color:var(--color-white)}.heading{width:100%;font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-outline-style:none;outline-style:none}.link{width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--hovered-draftify-theme-color);--tw-outline-style:none;outline-style:none}.subheading{--tw-font-weight:var(--font-weight-semibold);width:100%;font-size:20px;font-weight:var(--font-weight-semibold);--tw-outline-style:none;outline-style:none}.w-1{width:calc(var(--spacing)*1)}.w-3{width:calc(var(--spacing)*3)}.w-7\.5{width:calc(var(--spacing)*7.5)}.w-15{width:calc(var(--spacing)*15)}.w-25{width:calc(var(--spacing)*25)}.w-30{width:calc(var(--spacing)*30)}.w-32{width:calc(var(--spacing)*32)}.w-40{width:calc(var(--spacing)*40)}.w-\[15px\]{width:15px}.w-\[40px\]{width:40px}.w-full{width:100%}.w-px{width:1px}.editor-area{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);flex:1;padding:2.5px 0}@media (min-width:48rem){.editor-area{padding:calc(var(--spacing)*5)}}.flex-1{flex:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-\[40px\]{--tw-translate-x:calc(40px*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-0\.5{--tw-translate-y:calc(var(--spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[10px\]{--tw-translate-y:10px;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-\[5px\]{gap:5px}.gap-\[10px\]{gap:10px}.gap-y-\[3px\]{row-gap:3px}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[5px\]{border-radius:5px}.rounded-\[10px\]{border-radius:10px}.rounded-\[50\%\]{border-radius:50%}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tl-\[5px\]{border-top-left-radius:5px}.rounded-bl-\[5px\]{border-bottom-left-radius:5px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\(--draftify-theme-color\){border-color:var(--draftify-theme-color)}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-600{border-color:var(--color-gray-600)}.bg-\(--draftify-theme-color\){background-color:var(--draftify-theme-color)}.bg-\(--hovered-draftify-theme-color\){background-color:var(--hovered-draftify-theme-color)}.bg-\[\#232323\]{background-color:#232323}.bg-black{background-color:var(--color-black)}.bg-blue-400{background-color:var(--color-blue-400)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-white{background-color:var(--color-white)}.logo-text{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.logo-text{--tw-gradient-position:to bottom right in oklab}}.logo-text{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:var(--color-blue-800);--tw-gradient-to:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));color:#0000;-webkit-background-clip:text;background-clip:text}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.pb-6\.25{padding-bottom:calc(var(--spacing)*6.25)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-outline-style:none;outline-style:none}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[20px\]{font-size:20px}.leading-2{--tw-leading:calc(var(--spacing)*2);line-height:calc(var(--spacing)*2)}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-\(--draftify-theme-color\){color:var(--draftify-theme-color)}.text-\(--grey-secondary\){color:var(--grey-secondary)}.text-\(--hovered-draftify-theme-color\){color:var(--hovered-draftify-theme-color)}.text-black{color:var(--color-black)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-green-400{color:var(--color-green-400)}.text-white{color:var(--color-white)}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:bg-black:is(:where(.group):hover *){background-color:var(--color-black)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:border-black:hover{border-color:var(--color-black)}.hover\:bg-\(--draftify-theme-color\):hover{background-color:var(--draftify-theme-color)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-gray-400:hover{background-color:var(--color-gray-400)}.hover\:font-semibold:hover{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-white:hover{color:var(--color-white)}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:flex{display:flex}.md\:h-10{height:calc(var(--spacing)*10)}.md\:gap-\[10px\]{gap:10px}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-400:oklch(79.2% .209 151.711);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-purple-500:oklch(62.7% .265 303.9);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-xl:.75rem;--radius-2xl:1rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--draftify-theme-color:#3b82f6;--hovered-draftify-theme-color:#1e40af}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.doc-metadata-prompt{z-index:10;--tw-translate-x:calc(calc(1/2*100%)*-1);--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);background-color:var(--color-white);padding:calc(var(--spacing)*5);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;top:50%;left:50%}.draftify-container{height:fit-content;min-height:calc(var(--spacing)*112.5);gap:calc(var(--spacing)*5);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);background-color:var(--color-white);width:100%;padding:calc(var(--spacing)*2);flex-direction:column;display:flex;position:relative}@media (min-width:48rem){.draftify-container{gap:calc(var(--spacing)*2.5);padding:calc(var(--spacing)*5)}}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.bottom-0\.5{bottom:calc(var(--spacing)*.5)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.-z-1{z-index:calc(1*-1)}.z-10{z-index:10}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-2\.5{margin-bottom:calc(var(--spacing)*2.5)}.block-container{align-items:center;gap:calc(var(--spacing)*1.25);border-radius:var(--radius-md);padding:calc(var(--spacing)*1.25);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}.output-area{gap:calc(var(--spacing)*2.5);border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);padding:calc(var(--spacing)*3);display:grid}@media (min-width:48rem){.output-area{padding:calc(var(--spacing)*5)}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.table{display:table}.media{object-fit:cover;width:100%;height:100%}.paragraph{--tw-outline-style:none;outline-style:none;width:100%;height:fit-content}.h-1{height:calc(var(--spacing)*1)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6\.25{height:calc(var(--spacing)*6.25)}.h-10{height:calc(var(--spacing)*10)}.h-15{height:calc(var(--spacing)*15)}.h-30{height:calc(var(--spacing)*30)}.h-32{height:calc(var(--spacing)*32)}.h-50{height:calc(var(--spacing)*50)}.h-68\.75{height:calc(var(--spacing)*68.75)}.h-full{height:100%}.h-px{height:1px}.quote{border-left-style:var(--tw-border-style);width:100%;padding-left:calc(var(--spacing)*2);--tw-outline-style:none;border-left-width:4px;outline-style:none;font-size:18px;font-style:italic}.code{background-color:var(--color-black);width:100%;padding:calc(var(--spacing)*2);font-family:var(--font-mono);white-space:pre-wrap;color:var(--color-white)}.heading{width:100%;font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-outline-style:none;outline-style:none}.link{width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--hovered-draftify-theme-color);--tw-outline-style:none;outline-style:none}.subheading{--tw-font-weight:var(--font-weight-semibold);width:100%;font-size:20px;font-weight:var(--font-weight-semibold);--tw-outline-style:none;outline-style:none}.w-1{width:calc(var(--spacing)*1)}.w-3{width:calc(var(--spacing)*3)}.w-3\.75{width:calc(var(--spacing)*3.75)}.w-7\.5{width:calc(var(--spacing)*7.5)}.w-15{width:calc(var(--spacing)*15)}.w-25{width:calc(var(--spacing)*25)}.w-30{width:calc(var(--spacing)*30)}.w-32{width:calc(var(--spacing)*32)}.w-40{width:calc(var(--spacing)*40)}.w-\[40px\]{width:40px}.w-full{width:100%}.w-px{width:1px}.editor-area{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--draftify-theme-color);flex:1;padding:2.5px 0}@media (min-width:48rem){.editor-area{padding:calc(var(--spacing)*5)}}.flex-1{flex:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-x-\[40px\]{--tw-translate-x:calc(40px*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-0\.5{--tw-translate-y:calc(var(--spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[10px\]{--tw-translate-y:10px;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.25{gap:calc(var(--spacing)*1.25)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-y-0\.75{row-gap:calc(var(--spacing)*.75)}.self-center{align-self:center}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[5px\]{border-radius:5px}.rounded-\[10px\]{border-radius:10px}.rounded-\[50\%\]{border-radius:50%}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tl-\[5px\]{border-top-left-radius:5px}.rounded-bl-\[5px\]{border-bottom-left-radius:5px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\(--draftify-theme-color\){border-color:var(--draftify-theme-color)}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-600{border-color:var(--color-gray-600)}.bg-\(--draftify-theme-color\){background-color:var(--draftify-theme-color)}.bg-\(--hovered-draftify-theme-color\){background-color:var(--hovered-draftify-theme-color)}.bg-\[\#232323\]{background-color:#232323}.bg-black{background-color:var(--color-black)}.bg-blue-400{background-color:var(--color-blue-400)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-white{background-color:var(--color-white)}.logo-text{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.logo-text{--tw-gradient-position:to bottom right in oklab}}.logo-text{background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:var(--color-blue-800);--tw-gradient-to:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));color:#0000;-webkit-background-clip:text;background-clip:text}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.pb-6\.25{padding-bottom:calc(var(--spacing)*6.25)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-outline-style:none;outline-style:none}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[20px\]{font-size:20px}.leading-2{--tw-leading:calc(var(--spacing)*2);line-height:calc(var(--spacing)*2)}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.text-\(--draftify-theme-color\){color:var(--draftify-theme-color)}.text-\(--grey-secondary\){color:var(--grey-secondary)}.text-\(--hovered-draftify-theme-color\){color:var(--hovered-draftify-theme-color)}.text-black{color:var(--color-black)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-green-400{color:var(--color-green-400)}.text-white{color:var(--color-white)}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:bg-black:is(:where(.group):hover *){background-color:var(--color-black)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:border-black:hover{border-color:var(--color-black)}.hover\:bg-\(--draftify-theme-color\):hover{background-color:var(--draftify-theme-color)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-gray-400:hover{background-color:var(--color-gray-400)}.hover\:font-semibold:hover{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-white:hover{color:var(--color-white)}}@media (min-width:48rem){.md\:absolute{position:absolute}.md\:flex{display:flex}.md\:h-10{height:calc(var(--spacing)*10)}.md\:gap-2\.5{gap:calc(var(--spacing)*2.5)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
package/dist/draftify-react.es.js CHANGED
@@ -10655,10 +10655,10 @@ function Ky({ handleClick: e }) {
10655
10655
  const [t, n] = ne(null), r = (i, a) => {
10656
10656
  n(i), e(a);
10657
10657
  };
10658
- return /* @__PURE__ */ M.jsx("div", { className: "flex flex-wrap gap-[5px] md:gap-[10px] items-center", children: Gy.map((i) => /* @__PURE__ */ M.jsx(an, { text: `${i.type}`, children: /* @__PURE__ */ M.jsxs(
10658
+ return /* @__PURE__ */ M.jsx("div", { className: "flex flex-wrap gap-1.25 md:gap-2.5 items-center", children: Gy.map((i) => /* @__PURE__ */ M.jsx(an, { text: `${i.type}`, children: /* @__PURE__ */ M.jsxs(
10659
10659
  "div",
10660
10660
  {
10661
- className: `flex items-center gap-[10px] h-[40px] p-2 border-2 border-gray-600 cursor-pointer rounded-[10px] text-sm md:text-md ${t === i.id ? "text-(--draftify-theme-color)" : "text-gray-600"}`,
10661
+ className: `flex items-center gap-2.5 h-10 p-2 border-2 border-gray-600 cursor-pointer rounded-[10px] text-sm md:text-md ${t === i.id ? "text-(--draftify-theme-color)" : "text-gray-600"}`,
10662
10662
  onClick: () => i.type !== "table" && r(i.id, i.type),
10663
10663
  children: [
10664
10664
  /* @__PURE__ */ M.jsxs("div", { className: "flex", children: [
@@ -10799,7 +10799,7 @@ function qy({
10799
10799
  ] }) });
10800
10800
  }
10801
10801
  function Qy() {
10802
- return /* @__PURE__ */ M.jsx("div", { className: "group flex flex-col justify-center gap-y-[3px] w-[15px] h-full border border-(--draftify-theme-color) hover:border-black rounded-tl-[5px] rounded-bl-[5px] cursor-move", children: [1, 2, 3].map((e) => /* @__PURE__ */ M.jsx(
10802
+ return /* @__PURE__ */ M.jsx("div", { className: "group flex flex-col justify-center gap-y-0.75 w-3.75 h-full border border-(--draftify-theme-color) hover:border-black rounded-tl-[5px] rounded-bl-[5px] cursor-move", children: [1, 2, 3].map((e) => /* @__PURE__ */ M.jsx(
10803
10803
  "div",
10804
10804
  {
10805
10805
  className: "w-1 h-1 rounded-2.5 bg-(--draftify-theme-color) group-hover:bg-black self-center"
@@ -11361,8 +11361,12 @@ function Sv({ blocksData: e, modifyBlocks: t }) {
11361
11361
  ] });
11362
11362
  }
11363
11363
  export {
11364
+ Xy as DraftifyBlocksReader,
11364
11365
  Sv as DraftifyReact,
11365
- Xy as Reader,
11366
11366
  Sv as default,
11367
+ Vy as dragHandler,
11368
+ bo as dragLeaveHandler,
11369
+ Ly as dropHandler,
11370
+ Oy as onFileChange,
11367
11371
  ev as useDraftifyReact
11368
11372
  };