@usefragments/ui 1.3.2 → 1.4.0

package/dist/data-table.js

@@ -5,18 +5,40 @@ import { createElement } from "react";
 import styles from "./components/DataTable/DataTable.module.scss.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { SortAscIcon, SortDescIcon, SortIcon, ExpandIcon } from "./components/DataTable/DataTable.icons.js";
-import { useArrowKeyRowNav, DataTableSkeletonRows } from "./components/DataTable/DataTable.support.js";
+import { DataTableSkeletonRows, useArrowKeyRowNav } from "./components/DataTable/DataTable.support.js";
 let _reactTable = null;
-let _reactTableLoaded = false;
+let _reactTableLoadPromise = null;
 let _reactTableFailed = false;
 function loadReactTable() {
-  if (_reactTableLoaded) return;
-  _reactTableLoaded = true;
-  try {
-    _reactTable = require("@tanstack/react-table");
-  } catch {
-    _reactTableFailed = true;
+  if (!_reactTableLoadPromise) {
+    _reactTableLoadPromise = (async () => {
+      try {
+        _reactTable = await import("@tanstack/react-table");
+      } catch {
+        _reactTableFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Rendering a static table without sorting, selection, or expansion. Install it with: npm install @tanstack/react-table"
+          );
+        }
+      }
+    })();
   }
+  return _reactTableLoadPromise;
+}
+function useReactTableDeps() {
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => {
+    if (_reactTable || _reactTableFailed) return;
+    let active = true;
+    void loadReactTable().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _reactTable ? "ready" : _reactTableFailed ? "failed" : "pending";
 }
 function getColumnSizeStyle(column) {
   const { size, minSize, maxSize } = column.columnDef;
@@ -31,6 +53,24 @@ function getColumnSizeStyle(column) {
     maxWidth: maxSize ?? resolvedSize
   };
 }
+function computeTableClasses(opts) {
+  const densityClass = opts.density === "condensed" ? styles.densityCondensed : opts.density === "regular" ? styles.densityRegular : opts.density === "relaxed" ? styles.densityRelaxed : void 0;
+  const rootClasses = [
+    styles.table,
+    opts.hasExplicitColumnSizing && styles.fixedLayout,
+    styles[opts.size],
+    densityClass,
+    opts.striped && styles.striped,
+    opts.className
+  ].filter(Boolean).join(" ");
+  const wrapperClasses = [
+    styles.wrapper,
+    opts.bordered && styles.bordered,
+    opts.wrapperClassName,
+    opts.wrapperPropsClassName
+  ].filter(Boolean).join(" ");
+  return { rootClasses, wrapperClasses };
+}
 function isInteractiveTarget(target, currentTarget) {
   if (!(target instanceof Element)) return false;
   const interactiveElement = target.closest(
@@ -40,7 +80,7 @@ function isInteractiveTarget(target, currentTarget) {
     interactiveElement && interactiveElement !== currentTarget && currentTarget.contains(interactiveElement)
   );
 }
-function DataTableRoot({
+function DataTableLive({
   columns: userColumns,
   data,
   getRowId,
@@ -74,12 +114,6 @@ function DataTableRoot({
   "aria-describedby": ariaDescribedBy,
   ...htmlProps
 }) {
-  loadReactTable();
-  if (_reactTableFailed || !_reactTable) {
-    throw new Error(
-      "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Install it with: npm install @tanstack/react-table"
-    );
-  }
   const { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, useReactTable } = _reactTable;
   const tableRef = React.useRef(null);
   useArrowKeyRowNav(tableRef, !!onRowClick);
@@ -151,22 +185,17 @@ function DataTableRoot({
     enableExpanding: hasSubRows
   });
   const isEmpty = !loading && data.length === 0;
-  const densityClass = density === "condensed" ? styles.densityCondensed : density === "regular" ? styles.densityRegular : density === "relaxed" ? styles.densityRelaxed : void 0;
-  const rootClasses = [
-    styles.table,
-    hasExplicitColumnSizing && styles.fixedLayout,
-    styles[size],
-    densityClass,
-    striped && styles.striped,
-    className
-  ].filter(Boolean).join(" ");
   const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
-  const wrapperClasses = [
-    styles.wrapper,
-    bordered && styles.bordered,
+  const { rootClasses, wrapperClasses } = computeTableClasses({
+    size,
+    density,
+    striped,
+    bordered,
+    hasExplicitColumnSizing,
+    className,
     wrapperClassName,
     wrapperPropsClassName
-  ].filter(Boolean).join(" ");
+  });
   if (isEmpty) {
     return /* @__PURE__ */ jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxs(
       "table",
@@ -309,6 +338,135 @@ function DataTableRoot({
     }
   ) });
 }
+function staticColumnSizeStyle(col) {
+  const { size, minSize, maxSize } = col;
+  if (size === void 0 && minSize === void 0 && maxSize === void 0) return void 0;
+  const resolved = size ?? minSize ?? maxSize;
+  return { width: resolved, minWidth: minSize ?? resolved, maxWidth: maxSize ?? resolved };
+}
+function staticCellContent(col, row, index) {
+  const raw = col.accessorFn ? col.accessorFn(row) : col.accessorKey ? row[col.accessorKey] : void 0;
+  if (typeof col.cell === "function") {
+    try {
+      return col.cell({
+        row: { original: row, id: String(index), index, depth: 0 },
+        getValue: () => raw,
+        column: { id: col.id ?? col.accessorKey ?? "" }
+      });
+    } catch {
+    }
+  }
+  return typeof raw === "string" || typeof raw === "number" ? raw : null;
+}
+function DataTableStatic({
+  pending,
+  columns,
+  data,
+  getRowId,
+  emptyMessage = "No data available",
+  emptyState,
+  loading = false,
+  skeletonRows = 6,
+  density,
+  hideHeader = false,
+  size = "md",
+  className,
+  caption,
+  captionHidden = false,
+  striped = false,
+  bordered = false,
+  wrapperClassName,
+  wrapperProps,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  // Interactive props are inert without the peer — accepted but unused.
+  sortable: _sortable,
+  sorting: _sorting,
+  onSortingChange: _onSortingChange,
+  selectable: _selectable,
+  showCheckbox: _showCheckbox,
+  rowSelection: _rowSelection,
+  onRowSelectionChange: _onRowSelectionChange,
+  onRowClick: _onRowClick,
+  getRowProps: _getRowProps,
+  getSubRows: _getSubRows,
+  expanded: _expanded,
+  onExpandedChange: _onExpandedChange,
+  ...htmlProps
+}) {
+  const hasExplicitColumnSizing = columns.some(
+    (column) => column.size !== void 0 || column.minSize !== void 0 || column.maxSize !== void 0
+  );
+  const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
+  const { rootClasses, wrapperClasses } = computeTableClasses({
+    size,
+    density,
+    striped,
+    bordered,
+    hasExplicitColumnSizing,
+    className,
+    wrapperClassName,
+    wrapperPropsClassName
+  });
+  const showSkeleton = pending || loading;
+  const isEmpty = !showSkeleton && data.length === 0;
+  const columnCount = Math.max(columns.length, 1);
+  return /* @__PURE__ */ jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      ...htmlProps,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "aria-busy": showSkeleton || void 0,
+      children: [
+        caption && /* @__PURE__ */ jsx("caption", { className: captionHidden ? styles.captionHidden : styles.caption, children: caption }),
+        !hideHeader && !isEmpty && /* @__PURE__ */ jsx("thead", { className: styles.thead, children: /* @__PURE__ */ jsx("tr", { className: styles.headerRow, children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: styles.th,
+            style: staticColumnSizeStyle(col),
+            scope: "col",
+            "data-align": col.align,
+            children: /* @__PURE__ */ jsx("div", { className: styles.headerContent, children: typeof col.header === "string" ? col.header : col.id ?? col.accessorKey ?? "" })
+          },
+          col.id ?? col.accessorKey ?? colIndex
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: styles.tbody, children: showSkeleton ? /* @__PURE__ */ jsx(
+          DataTableSkeletonRows,
+          {
+            rowCount: skeletonRows,
+            columnCount,
+            rowClassName: styles.row,
+            cellClassName: styles.td,
+            barClassName: styles.skeletonBar
+          }
+        ) : isEmpty ? /* @__PURE__ */ jsx("tr", { className: styles.row, children: /* @__PURE__ */ jsx("td", { className: styles.td, colSpan: columnCount, children: /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptyState ?? /* @__PURE__ */ jsx("span", { className: styles.emptyMessage, children: emptyMessage }) }) }) }) : data.map((row, rowIndex) => {
+          const rowKey = (getRowId == null ? void 0 : getRowId(row)) ?? rowIndex;
+          return /* @__PURE__ */ jsx("tr", { className: styles.row, children: columns.map((col, colIndex) => {
+            const content = staticCellContent(col, row, rowIndex);
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: [styles.td, col.truncate && styles.truncate].filter(Boolean).join(" "),
+                "data-align": col.align,
+                title: typeof content === "string" ? content : void 0,
+                style: staticColumnSizeStyle(col),
+                children: content
+              },
+              col.id ?? col.accessorKey ?? colIndex
+            );
+          }) }, rowKey);
+        }) })
+      ]
+    }
+  ) });
+}
+function DataTableRoot(props) {
+  const deps = useReactTableDeps();
+  if (deps === "ready") return /* @__PURE__ */ jsx(DataTableLive, { ...props });
+  return /* @__PURE__ */ jsx(DataTableStatic, { ...props, pending: deps === "pending" });
+}
 function createColumns(columns) {
   return columns.map((col) => ({
     id: col.key,
@@ -322,7 +480,9 @@ function createColumns(columns) {
 }
 const DataTable = Object.assign(DataTableRoot, {
   Root: DataTableRoot,
-  Columns: createColumns
+  Columns: createColumns,
+  /** Start resolving @tanstack/react-table before first render (optional). */
+  preload: loadReactTable
 });
 export {
   DataTable,

package/dist/datepicker.cjs

@@ -1,5 +1,27 @@
 "use client";
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -120,20 +142,42 @@ let _DayPicker = null;
 let _UI = null;
 let _SelectionState = null;
 let _DayFlag = null;
-let _rdpLoaded = false;
+let _rdpLoadPromise = null;
 let _rdpFailed = false;
 function loadDayPickerDeps() {
-  if (_rdpLoaded) return;
-  _rdpLoaded = true;
-  try {
-    const rdp = require("react-day-picker");
-    _DayPicker = rdp.DayPicker;
-    _UI = rdp.UI;
-    _SelectionState = rdp.SelectionState;
-    _DayFlag = rdp.DayFlag;
-  } catch {
-    _rdpFailed = true;
+  if (!_rdpLoadPromise) {
+    _rdpLoadPromise = (async () => {
+      try {
+        const rdp = await import("react-day-picker");
+        _DayPicker = rdp.DayPicker;
+        _UI = rdp.UI;
+        _SelectionState = rdp.SelectionState;
+        _DayFlag = rdp.DayFlag;
+      } catch {
+        _rdpFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] DatePicker: react-day-picker is not installed. Install it with: npm install react-day-picker"
+          );
+        }
+      }
+    })();
   }
+  return _rdpLoadPromise;
+}
+function useDayPickerDeps() {
+  const [, rerender] = React__namespace.useReducer((n) => n + 1, 0);
+  React__namespace.useEffect(() => {
+    if (_DayPicker || _rdpFailed) return;
+    let active = true;
+    void loadDayPickerDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _DayPicker !== null;
 }
 function getCalendarClassNames() {
   const UI = _UI;
@@ -192,6 +236,9 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
   name
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
+  React__namespace.useEffect(() => {
+    void loadDayPickerDeps();
+  }, []);
   const [internalSelected, setInternalSelected] = React__namespace.useState(selectedProp ?? null);
   const [internalRange, setInternalRange] = React__namespace.useState(
     selectedRangeProp ?? null
@@ -370,8 +417,8 @@ function DatePickerCalendar({
     }),
     []
   );
-  loadDayPickerDeps();
-  if (_rdpFailed || !_DayPicker || !_UI) {
+  const rdpReady = useDayPickerDeps();
+  if (!rdpReady || !_DayPicker || !_UI) {
     return null;
   }
   const DayPicker = _DayPicker;
@@ -446,7 +493,9 @@ const DatePicker = Object.assign(DatePickerRoot, {
   Trigger: DatePickerTrigger,
   Content: DatePickerContent,
   Calendar: DatePickerCalendar,
-  Preset: DatePickerPreset
+  Preset: DatePickerPreset,
+  /** Start resolving react-day-picker before first render (optional). */
+  preload: loadDayPickerDeps
 });
 exports.DatePicker = DatePicker;
 exports.DatePickerCalendar = DatePickerCalendar;

package/dist/datepicker.js

@@ -101,20 +101,42 @@ let _DayPicker = null;
 let _UI = null;
 let _SelectionState = null;
 let _DayFlag = null;
-let _rdpLoaded = false;
+let _rdpLoadPromise = null;
 let _rdpFailed = false;
 function loadDayPickerDeps() {
-  if (_rdpLoaded) return;
-  _rdpLoaded = true;
-  try {
-    const rdp = require("react-day-picker");
-    _DayPicker = rdp.DayPicker;
-    _UI = rdp.UI;
-    _SelectionState = rdp.SelectionState;
-    _DayFlag = rdp.DayFlag;
-  } catch {
-    _rdpFailed = true;
+  if (!_rdpLoadPromise) {
+    _rdpLoadPromise = (async () => {
+      try {
+        const rdp = await import("react-day-picker");
+        _DayPicker = rdp.DayPicker;
+        _UI = rdp.UI;
+        _SelectionState = rdp.SelectionState;
+        _DayFlag = rdp.DayFlag;
+      } catch {
+        _rdpFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] DatePicker: react-day-picker is not installed. Install it with: npm install react-day-picker"
+          );
+        }
+      }
+    })();
   }
+  return _rdpLoadPromise;
+}
+function useDayPickerDeps() {
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => {
+    if (_DayPicker || _rdpFailed) return;
+    let active = true;
+    void loadDayPickerDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return _DayPicker !== null;
 }
 function getCalendarClassNames() {
   const UI = _UI;
@@ -173,6 +195,9 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
   name
 }, ref) {
   const size = useResolvedControlSize(sizeProp);
+  React.useEffect(() => {
+    void loadDayPickerDeps();
+  }, []);
   const [internalSelected, setInternalSelected] = React.useState(selectedProp ?? null);
   const [internalRange, setInternalRange] = React.useState(
     selectedRangeProp ?? null
@@ -351,8 +376,8 @@ function DatePickerCalendar({
     }),
     []
   );
-  loadDayPickerDeps();
-  if (_rdpFailed || !_DayPicker || !_UI) {
+  const rdpReady = useDayPickerDeps();
+  if (!rdpReady || !_DayPicker || !_UI) {
     return null;
   }
   const DayPicker = _DayPicker;
@@ -427,7 +452,9 @@ const DatePicker = Object.assign(DatePickerRoot, {
   Trigger: DatePickerTrigger,
   Content: DatePickerContent,
   Calendar: DatePickerCalendar,
-  Preset: DatePickerPreset
+  Preset: DatePickerPreset,
+  /** Start resolving react-day-picker before first render (optional). */
+  preload: loadDayPickerDeps
 });
 export {
   DatePicker,

package/dist/editor.cjs

@@ -1,5 +1,27 @@
 "use client";
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -27,22 +49,46 @@ let _useEditor = null;
 let _EditorContent = null;
 let _StarterKit = null;
 let _LinkExtension = null;
-let _tiptapLoaded = false;
+let _tiptapLoadPromise = null;
 let _tiptapFailed = false;
 function loadTipTapDeps() {
-  if (_tiptapLoaded) return;
-  _tiptapLoaded = true;
-  try {
-    const tiptapReact = require("@tiptap/react");
-    const starterKit = require("@tiptap/starter-kit");
-    const linkExt = require("@tiptap/extension-link");
-    _useEditor = tiptapReact.useEditor;
-    _EditorContent = tiptapReact.EditorContent;
-    _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
-    _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
-  } catch {
-    _tiptapFailed = true;
+  if (!_tiptapLoadPromise) {
+    _tiptapLoadPromise = (async () => {
+      try {
+        const [tiptapReact, starterKit, linkExt] = await Promise.all([
+          import("@tiptap/react"),
+          import("@tiptap/starter-kit"),
+          import("@tiptap/extension-link")
+        ]);
+        _useEditor = tiptapReact.useEditor;
+        _EditorContent = tiptapReact.EditorContent;
+        _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
+        _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
+      } catch {
+        _tiptapFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link"
+          );
+        }
+      }
+    })();
   }
+  return _tiptapLoadPromise;
+}
+function useTipTapDeps() {
+  const [, rerender] = React__namespace.useReducer((n) => n + 1, 0);
+  React__namespace.useEffect(() => {
+    if (_useEditor && _EditorContent && _StarterKit || _tiptapFailed) return;
+    let active = true;
+    void loadTipTapDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return !_tiptapFailed && !!_useEditor && !!_EditorContent && !!_StarterKit;
 }
 const FORMAT_META = {
   bold: { icon: react.TextB, label: "Bold", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
@@ -185,7 +231,12 @@ function countWords(text) {
   if (!trimmed) return 0;
   return trimmed.split(/\s+/).length;
 }
-function EditorRoot({
+function EditorRoot(props) {
+  const hasTipTap = useTipTapDeps();
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorImpl, { hasTipTap, ...props }, hasTipTap ? "rich" : "markdown");
+}
+function EditorImpl({
+  hasTipTap,
   children,
   value: controlledValue,
   defaultValue = "",
@@ -211,8 +262,6 @@ function EditorRoot({
     onValueChange
   );
   const [saveStatus, setSaveStatus] = React__namespace.useState("idle");
-  loadTipTapDeps();
-  const hasTipTap = !_tiptapFailed && _useEditor && _EditorContent && _StarterKit;
   const mode = hasTipTap ? "rich" : "markdown";
   const tiptapEditor = hasTipTap ? (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -553,6 +602,8 @@ function EditorStatusBar({ showWordCount = true, showCharCount = true, className
   ] });
 }
 const Editor = Object.assign(EditorRoot, {
+  /** Start resolving TipTap before first render (optional). */
+  preload: loadTipTapDeps,
   Toolbar: EditorToolbar,
   ToolbarGroup: EditorToolbarGroup,
   ToolbarButton: EditorToolbarButton,

package/dist/editor.js

@@ -8,22 +8,46 @@ let _useEditor = null;
 let _EditorContent = null;
 let _StarterKit = null;
 let _LinkExtension = null;
-let _tiptapLoaded = false;
+let _tiptapLoadPromise = null;
 let _tiptapFailed = false;
 function loadTipTapDeps() {
-  if (_tiptapLoaded) return;
-  _tiptapLoaded = true;
-  try {
-    const tiptapReact = require("@tiptap/react");
-    const starterKit = require("@tiptap/starter-kit");
-    const linkExt = require("@tiptap/extension-link");
-    _useEditor = tiptapReact.useEditor;
-    _EditorContent = tiptapReact.EditorContent;
-    _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
-    _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
-  } catch {
-    _tiptapFailed = true;
+  if (!_tiptapLoadPromise) {
+    _tiptapLoadPromise = (async () => {
+      try {
+        const [tiptapReact, starterKit, linkExt] = await Promise.all([
+          import("@tiptap/react"),
+          import("@tiptap/starter-kit"),
+          import("@tiptap/extension-link")
+        ]);
+        _useEditor = tiptapReact.useEditor;
+        _EditorContent = tiptapReact.EditorContent;
+        _StarterKit = starterKit.default ?? starterKit.StarterKit ?? starterKit;
+        _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
+      } catch {
+        _tiptapFailed = true;
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            "[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link"
+          );
+        }
+      }
+    })();
   }
+  return _tiptapLoadPromise;
+}
+function useTipTapDeps() {
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  React.useEffect(() => {
+    if (_useEditor && _EditorContent && _StarterKit || _tiptapFailed) return;
+    let active = true;
+    void loadTipTapDeps().then(() => {
+      if (active) rerender();
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return !_tiptapFailed && !!_useEditor && !!_EditorContent && !!_StarterKit;
 }
 const FORMAT_META = {
   bold: { icon: TextB, label: "Bold", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
@@ -166,7 +190,12 @@ function countWords(text) {
   if (!trimmed) return 0;
   return trimmed.split(/\s+/).length;
 }
-function EditorRoot({
+function EditorRoot(props) {
+  const hasTipTap = useTipTapDeps();
+  return /* @__PURE__ */ jsx(EditorImpl, { hasTipTap, ...props }, hasTipTap ? "rich" : "markdown");
+}
+function EditorImpl({
+  hasTipTap,
   children,
   value: controlledValue,
   defaultValue = "",
@@ -192,8 +221,6 @@ function EditorRoot({
     onValueChange
   );
   const [saveStatus, setSaveStatus] = React.useState("idle");
-  loadTipTapDeps();
-  const hasTipTap = !_tiptapFailed && _useEditor && _EditorContent && _StarterKit;
   const mode = hasTipTap ? "rich" : "markdown";
   const tiptapEditor = hasTipTap ? (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -534,6 +561,8 @@ function EditorStatusBar({ showWordCount = true, showCharCount = true, className
   ] });
 }
 const Editor = Object.assign(EditorRoot, {
+  /** Start resolving TipTap before first render (optional). */
+  preload: loadTipTapDeps,
   Toolbar: EditorToolbar,
   ToolbarGroup: EditorToolbarGroup,
   ToolbarButton: EditorToolbarButton,