@fileverse-dev/ddoc 4.8.16 → 5.0.0-unstable-styles-1

package/README.md

@@ -27,17 +27,23 @@ This repository contains:
 
 ## Usage
 
-### Prequisites
+### Prerequisites
 
-To use dDocs, ensure your project is set up with Tailwind CSS and have a Tailwind configuration file.
+Your app runs Tailwind CSS 3.4 and owns the `@tailwind base/components/utilities` entry. The package ships only editor CSS; preflight, utilities, the `@fileverse/ui` styles, and the KaTeX stylesheet come from your build.
 
 ### Install & import
 
-Add the following imports :
-
 ```javascript
 import { DdocEditor } from '@fileverse-dev/ddoc';
-import '@fileverse-dev/ddoc/styles'; // in App.jsx/App.tsx
+```
+
+Load stylesheets in this order (Vite emits CSS in import order; in Next put the first two in the root layout and the last two in the editor route):
+
+```javascript
+import './globals.css';                 // your tailwind entry
+import '@fileverse/ui/styles/base';     // tokens and base rules
+import 'katex/dist/katex.min.css';      // math; fonts are served as files
+import '@fileverse-dev/ddoc/styles';    // editor CSS
 ```
 
 ### Peer Dependencies
@@ -53,7 +59,7 @@ npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @fileverse/ui @fi
 | `@dnd-kit/core`      | `>=6.3.1`   |
 | `@dnd-kit/sortable`  | `>=10.0.0`  |
 | `@dnd-kit/utilities` | `>=3.2.2`   |
-| `@fileverse/ui`      | `>=5.0.0`   |
+| `@fileverse/ui`      | `5.4.0`     |
 | `@fileverse/crypto`  | `>=0.0.21`  |
 | `viem`               | `>=2.13.8`  |
 | `framer-motion`      | `>=11.2.10` |
@@ -63,9 +69,27 @@ These are externalized from the bundle to avoid duplication when your app alread
 
 ### Update Tailwind Config
 
-In your tailwind config, add this line to content array :
+```javascript
+module.exports = {
+  presets: [require('@fileverse-dev/ddoc/tailwind')],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@fileverse-dev/ddoc/dist/index.es.js',
+    './node_modules/@fileverse/ui/dist/index.es.js',
+  ],
+};
+```
+
+The preset composes `@fileverse/ui/tailwind` (class-based dark mode, animate plugin, design-system classes) and adds the `mobile: 960px` screen the editor uses.
+
+### Migrating from 4.x
+
+5.0 stops shipping preflight, Tailwind utilities, the ui stylesheet, the KaTeX stylesheet, and the `html`, `body`, and `*` resets. To upgrade:
 
-`@fileverse-dev/ddoc/dist/index.es.js`
+1. Add the preset and the two `content` entries above.
+2. Import `@fileverse/ui/styles/base` and `katex/dist/katex.min.css` yourself, in the order above.
+3. If your shell relied on `html, body { overflow: hidden }` or `body { user-select: none }` from the package, add them to your own global stylesheet.
+4. Remove any workaround that re-declared `mobile:` classes; the preset generates them.
 
 You should now be set to use dDocs!
 

package/dist/headless-editor-utils.es.js

@@ -1,4 +1,4 @@
-import { c8 as s } from "./use-headless-editor-LqOgnUoI.mjs";
+import { c8 as s } from "./use-headless-editor-C3wFDi0t.mjs";
 const n = (e) => {
   const { getYjsConvertor: t, mergeYjsUpdates: r } = s(e);
   return { getYjsConvertor: t, mergeYjsUpdates: r };

package/dist/{index-BXcU4L-P.mjs → index-CVwMVBPt.mjs}

@@ -1,4 +1,4 @@
-import { c9 as Ql, ca as Zl, cb as eh } from "./use-headless-editor-LqOgnUoI.mjs";
+import { c9 as Ql, ca as Zl, cb as eh } from "./use-headless-editor-C3wFDi0t.mjs";
 let An = [], Xr = [];
 (() => {
   let s = "lc,34,7n,7,7b,19,,,,2,,2,,,20,b,1c,l,g,,2t,7,2,6,2,2,,4,z,,u,r,2j,b,1m,9,9,,o,4,,9,,3,,5,17,3,3b,f,,w,1j,,,,4,8,4,,3,7,a,2,t,,1m,,,,2,4,8,,9,,a,2,q,,2,2,1l,,4,2,4,2,2,3,3,,u,2,3,,b,2,1l,,4,5,,2,4,,k,2,m,6,,,1m,,,2,,4,8,,7,3,a,2,u,,1n,,,,c,,9,,14,,3,,1l,3,5,3,,4,7,2,b,2,t,,1m,,2,,2,,3,,5,2,7,2,b,2,s,2,1l,2,,,2,4,8,,9,,a,2,t,,20,,4,,2,3,,,8,,29,,2,7,c,8,2q,,2,9,b,6,22,2,r,,,,,,1j,e,,5,,2,5,b,,10,9,,2u,4,,6,,2,2,2,p,2,4,3,g,4,d,,2,2,6,,f,,jj,3,qa,3,t,3,t,2,u,2,1s,2,,7,8,,2,b,9,,19,3,3b,2,y,,3a,3,4,2,9,,6,3,63,2,2,,1m,,,7,,,,,2,8,6,a,2,,1c,h,1r,4,1c,7,,,5,,14,9,c,2,w,4,2,2,,3,1k,,,2,3,,,3,1m,8,2,2,48,3,,d,,7,4,,6,,3,2,5i,1m,,5,ek,,5f,x,2da,3,3x,,2o,w,fe,6,2x,2,n9w,4,,a,w,2,28,2,7k,,3,,4,,p,2,5,,47,2,q,i,d,,12,8,p,b,1a,3,1c,,2,4,2,2,13,,1v,6,2,2,2,2,c,,8,,1b,,1f,,,3,2,2,5,2,,,16,2,8,,6m,,2,,4,,fn4,,kh,g,g,g,a6,2,gt,,6a,,45,5,1ae,3,,2,5,4,14,3,4,,4l,2,fx,4,ar,2,49,b,4w,,1i,f,1k,3,1d,4,2,2,1x,3,10,5,,8,1q,,c,2,1g,9,a,4,2,,2n,3,2,,,2,6,,4g,,3,8,l,2,1l,2,,,,,m,,e,7,3,5,5f,8,2,3,,,n,,29,,2,6,,,2,,,2,,2,6j,,2,4,6,2,,2,r,2,2d,8,2,,,2,2y,,,,2,6,,,2t,3,2,4,,5,77,9,,2,6t,,a,2,,,4,,40,4,2,2,4,,w,a,14,6,2,4,8,,9,6,2,3,1a,d,,2,ba,7,,6,,,2a,m,2,7,,2,,2,3e,6,3,,,2,,7,,,20,2,3,,,,9n,2,f0b,5,1n,7,t4,,1r,4,29,,f5k,2,43q,,,3,4,5,8,8,2,7,u,4,44,3,1iz,1j,4,1e,8,,e,,m,5,,f,11s,7,,h,2,7,,2,,5,79,7,c5,4,15s,7,31,7,240,5,gx7k,2o,3k,6o".split(",").map((e) => e ? parseInt(e, 36) : 1);

package/dist/index.es.js

@@ -2,8 +2,8 @@ var xm = Object.defineProperty;
 var bm = (e, t, r) => t in e ? xm(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var ye = (e, t, r) => bm(e, typeof t != "symbol" ? t + "" : t, r);
 import { jsx as d, jsxs as M, Fragment as Bt } from "react/jsx-runtime";
-import { P as io, a as ao, i as dd, p as fd, N as wm, C as vm, E as co, g as Cm, b as Em, u as hd, c as pd, B as Sm, M as Dm, d as rc, e as Am, f as Ni, s as km, h as Tm, j as Nm, k as _m, l as md, w as _i, m as Rm, t as Im, n as Bm, o as jt, q as le, r as On, v as gd, x as lo, y as Zs, z as Ko, A as Om, D as Lm, F as Mm, L as Um, G as yd, H as jo, I as ba, J as dt, S as Fm, K as wa, O as Pm, T as It, Q as Hm, R as zm, U as xd, V as Km, W as jm, X as Ke, Y as bd, Z as $r, _ as Vm, $ as $m, a0 as wd, a1 as oc, a2 as sc, a3 as vd, a4 as qm, a5 as Wm, a6 as Ym, a7 as Gm, a8 as Zm, a9 as Xm, aa as Qm, ab as Cd, ac as Jm, ad as e0, ae as t0, af as Ri, ag as dl, ah as n0, ai as Yt, aj as r0, ak as fl, al as o0, am as s0, an as i0, ao as a0, ap as Er, aq as Ed, ar as ic, as as c0, at as Bo, au as l0, av as Xs, aw as u0, ax as d0, ay as f0, az as h0, aA as p0, aB as Sd, aC as Vo, aD as Dd, aE as Ad, aF as No, aG as kd, aH as hl, aI as pl, aJ as Kt, aK as m0, aL as g0, aM as y0, aN as Td, aO as x0, aP as b0, aQ as w0, aR as v0, aS as C0, aT as E0, aU as S0, aV as D0, aW as A0, aX as k0, aY as T0, aZ as N0, a_ as _0, a$ as R0, b0 as Ii, b1 as Nd, b2 as _d, b3 as Sn, b4 as _s, b5 as _t, b6 as ac, b7 as ml, b8 as Bi, b9 as I0, ba as B0, bb as O0, bc as yn, bd as L0, be as M0, bf as U0, bg as F0, bh as P0, bi as H0, bj as or, bk as z0, bl as Oo, bm as cc, bn as K0, bo as j0, bp as V0, bq as lc, br as $0, bs as q0, bt as Rs, bu as Oi, bv as $o, bw as W0, bx as Y0, by as G0, bz as Z0, bA as X0, bB as Q0, bC as J0, bD as eg, bE as tg, bF as ng, bG as rg, bH as og, bI as sg, bJ as ig, bK as va, bL as Ca, bM as ag, bN as cg, bO as lg, bP as ug, bQ as dg, bR as fg, bS as gl, bT as hg, bU as pg, bV as mg, bW as gg, bX as yg, bY as xg, bZ as bg, b_ as wg, b$ as vg, c0 as Cg, c1 as Eg, c2 as Sg, c3 as Rd, c4 as Dg, c5 as Ag } from "./use-headless-editor-LqOgnUoI.mjs";
-import { c6 as o5, c7 as s5 } from "./use-headless-editor-LqOgnUoI.mjs";
+import { P as io, a as ao, i as dd, p as fd, N as wm, C as vm, E as co, g as Cm, b as Em, u as hd, c as pd, B as Sm, M as Dm, d as rc, e as Am, f as Ni, s as km, h as Tm, j as Nm, k as _m, l as md, w as _i, m as Rm, t as Im, n as Bm, o as jt, q as le, r as On, v as gd, x as lo, y as Zs, z as Ko, A as Om, D as Lm, F as Mm, L as Um, G as yd, H as jo, I as ba, J as dt, S as Fm, K as wa, O as Pm, T as It, Q as Hm, R as zm, U as xd, V as Km, W as jm, X as Ke, Y as bd, Z as $r, _ as Vm, $ as $m, a0 as wd, a1 as oc, a2 as sc, a3 as vd, a4 as qm, a5 as Wm, a6 as Ym, a7 as Gm, a8 as Zm, a9 as Xm, aa as Qm, ab as Cd, ac as Jm, ad as e0, ae as t0, af as Ri, ag as dl, ah as n0, ai as Yt, aj as r0, ak as fl, al as o0, am as s0, an as i0, ao as a0, ap as Er, aq as Ed, ar as ic, as as c0, at as Bo, au as l0, av as Xs, aw as u0, ax as d0, ay as f0, az as h0, aA as p0, aB as Sd, aC as Vo, aD as Dd, aE as Ad, aF as No, aG as kd, aH as hl, aI as pl, aJ as Kt, aK as m0, aL as g0, aM as y0, aN as Td, aO as x0, aP as b0, aQ as w0, aR as v0, aS as C0, aT as E0, aU as S0, aV as D0, aW as A0, aX as k0, aY as T0, aZ as N0, a_ as _0, a$ as R0, b0 as Ii, b1 as Nd, b2 as _d, b3 as Sn, b4 as _s, b5 as _t, b6 as ac, b7 as ml, b8 as Bi, b9 as I0, ba as B0, bb as O0, bc as yn, bd as L0, be as M0, bf as U0, bg as F0, bh as P0, bi as H0, bj as or, bk as z0, bl as Oo, bm as cc, bn as K0, bo as j0, bp as V0, bq as lc, br as $0, bs as q0, bt as Rs, bu as Oi, bv as $o, bw as W0, bx as Y0, by as G0, bz as Z0, bA as X0, bB as Q0, bC as J0, bD as eg, bE as tg, bF as ng, bG as rg, bH as og, bI as sg, bJ as ig, bK as va, bL as Ca, bM as ag, bN as cg, bO as lg, bP as ug, bQ as dg, bR as fg, bS as gl, bT as hg, bU as pg, bV as mg, bW as gg, bX as yg, bY as xg, bZ as bg, b_ as wg, b$ as vg, c0 as Cg, c1 as Eg, c2 as Sg, c3 as Rd, c4 as Dg, c5 as Ag } from "./use-headless-editor-C3wFDi0t.mjs";
+import { c6 as o5, c7 as s5 } from "./use-headless-editor-C3wFDi0t.mjs";
 import * as Tt from "react";
 import Ct, { useRef as ae, useEffect as ue, useState as he, useCallback as ne, useMemo as Ze, forwardRef as Jt, useReducer as Id, useLayoutEffect as Xr, memo as Qs, createElement as Ea, lazy as Bd, Suspense as yl, useImperativeHandle as Od } from "react";
 import { createPortal as Js } from "react-dom";
@@ -6416,7 +6416,7 @@ User prompt: ${l} /no_think` : `${l} /no_think`;
                             disabled: s,
                             children: [
                               /* @__PURE__ */ d(Mo, { className: "max-w-32 bg-transparent border-none", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-1 truncate", children: /* @__PURE__ */ d(Uo, { placeholder: "Select model" }) }) }),
-                              /* @__PURE__ */ d(Fo, { ref: B, children: /* @__PURE__ */ d(Tg, { className: "custom-scrollbar", children: _.map((pe) => /* @__PURE__ */ d(
+                              /* @__PURE__ */ d(Fo, { ref: B, children: /* @__PURE__ */ d(Tg, { className: "ddoc-scrollbar", children: _.map((pe) => /* @__PURE__ */ d(
                                 Po,
                                 {
                                   value: pe.value,
@@ -29855,7 +29855,7 @@ const sS = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], iS = oS("ChevronRi
     ),
     t && /* @__PURE__ */ d("pre", { className: "m-0 px-3 pb-2 text-[11px] leading-relaxed font-mono color-text-secondary whitespace-pre-wrap break-words max-h-40 overflow-auto select-text", children: n })
   ] }) : null;
-}, cS = Bd(() => import("./markdown-source-pane-NAKSRtR5.mjs")), lS = Bd(() => import("./split-view-toolbar-Dj7hev5y.mjs")), uS = ({
+}, cS = Bd(() => import("./markdown-source-pane-BxY2Qs_P.mjs")), lS = Bd(() => import("./split-view-toolbar-Gbnjf427.mjs")), uS = ({
   markdown: e,
   onMarkdownChange: t,
   ipfsImageUploadFn: r,

package/dist/{markdown-source-pane-NAKSRtR5.mjs → markdown-source-pane-BxY2Qs_P.mjs}

@@ -3,7 +3,7 @@ var Wr = (t, e, O) => e in t ? Vr(t, e, { enumerable: !0, configurable: !0, writ
 var gt = (t, e, O) => Wr(t, typeof e != "symbol" ? e + "" : e, O);
 import { jsx as Cr } from "react/jsx-runtime";
 import { useRef as pe, useEffect as St } from "react";
-import { s as y, A as pO, T as dO, a as Gr, S as et, b as Lr, P as fO, E as j, i as QO, c as _, D as le, k as tt, F as Ar, M as Pt, W as Er, R as Ur, d as mO, N as oe, e as V, f as Mr, g as Ot, h as ce, p as $O, j as Y, t as h, l as Ir, I as rt, L as at, m as ye, n as ue, o as Qe, q as gO, r as te, u as SO, v as Br, w as Nr, x as PO, y as kO, z as Dr, B as Fr, C as Kr, G as Oe, H as ZO, J as Jr, K as kt, O as Hr, Q as ea, U as ta, V as Oa, X as ra, Y as aa, Z as ia, _ as sa, $ as na, a0 as la, a1 as oa, a2 as ca } from "./index-BXcU4L-P.mjs";
+import { s as y, A as pO, T as dO, a as Gr, S as et, b as Lr, P as fO, E as j, i as QO, c as _, D as le, k as tt, F as Ar, M as Pt, W as Er, R as Ur, d as mO, N as oe, e as V, f as Mr, g as Ot, h as ce, p as $O, j as Y, t as h, l as Ir, I as rt, L as at, m as ye, n as ue, o as Qe, q as gO, r as te, u as SO, v as Br, w as Nr, x as PO, y as kO, z as Dr, B as Fr, C as Kr, G as Oe, H as ZO, J as Jr, K as kt, O as Hr, Q as ea, U as ta, V as Oa, X as ra, Y as aa, Z as ia, _ as sa, $ as na, a0 as la, a1 as oa, a2 as ca } from "./index-CVwMVBPt.mjs";
 class ua {
   /**
   Create a new completion context. (Mostly useful for testing

package/dist/{split-view-toolbar-Dj7hev5y.mjs → split-view-toolbar-Gbnjf427.mjs}

@@ -1,7 +1,7 @@
 import { jsx as m, jsxs as L } from "react/jsx-runtime";
 import { useRef as D, useState as E, useEffect as A } from "react";
 import { DynamicDropdown as P, Tooltip as O, IconButton as T } from "@fileverse/ui";
-import { a3 as _, a4 as w, c as R } from "./index-BXcU4L-P.mjs";
+import { a3 as _, a4 as w, c as R } from "./index-CVwMVBPt.mjs";
 const p = (e, n, o = n) => {
   const { state: i } = e, l = i.changeByRange((t) => {
     const d = i.sliceDoc(t.from, t.to), r = i.sliceDoc(