@cloudvoyant/helical-react 0.19.0 → 0.20.0-rc.202611012026.09e963c

package/dist/index.cjs

@@ -675,7 +675,7 @@ function useIsMobile() {
   return isMobile && isMobileSet;
 }
 function Provider({
-  defaultOpen = true,
+  defaultOpen = false,
   open: openProp,
   onOpenChange: setOpenProp,
   className,
@@ -685,6 +685,8 @@ function Provider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React2.useState(false);
+  const isControlled = openProp !== void 0;
+  const usesMobileSheetState = isMobile && !isControlled;
   const [_open, _setOpen] = React2.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React2.useCallback(
@@ -702,8 +704,8 @@ function Provider({
     [setOpenProp, open]
   );
   const toggleSidebar = React2.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
+    return usesMobileSheetState ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [usesMobileSheetState, setOpen, setOpenMobile]);
   React2.useEffect(() => {
     if (openProp !== void 0) return;
     if (typeof document === "undefined") return;
@@ -731,9 +733,10 @@ function Provider({
       isMobile,
       openMobile,
       setOpenMobile,
-      toggleSidebar
+      toggleSidebar,
+      isControlled
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, isControlled]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Row,
@@ -763,7 +766,7 @@ function Root({
   children,
   ...props
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, open, setOpen, openMobile, setOpenMobile, isControlled } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Col,
@@ -777,27 +780,40 @@ function Root({
     );
   }
   if (isMobile) {
+    const isBottomWidgetSheet = side === "right";
+    const mobileSheetOpen = isControlled ? open : openMobile;
+    const setMobileSheetOpen = isControlled ? setOpen : setOpenMobile;
+    const bottomSheetSnapProps = isBottomWidgetSheet ? {
+      snapPoints: import_helical_ui25.SIDEBAR_WIDGET_SNAP_POINTS,
+      defaultSnapPoint: import_helical_ui25.SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+      snapToSequentialPoints: true
+    } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       import_drawer.DrawerRoot,
       {
-        open: openMobile,
-        onOpenChange: (details) => setOpenMobile(details.open),
+        open: mobileSheetOpen,
+        onOpenChange: (details) => setMobileSheetOpen(details.open),
+        swipeDirection: side === "left" ? "start" : "down",
+        modal: !isBottomWidgetSheet,
+        ...bottomSheetSnapProps,
+        preventDragOnScroll: false,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerBackdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          !isBottomWidgetSheet && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerBackdrop, { className: import_helical_ui25.sidebarStyles.mobileBackdropClass }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerPositioner, { className: import_helical_ui25.sidebarStyles.mobilePositionerClass, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             import_drawer.DrawerContent,
             {
               "data-sidebar": "sidebar",
               "data-slot": "sidebar",
               "data-mobile": "true",
-              className: (0, import_helical_ui25.cn)("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
+              className: (0, import_helical_ui25.cn)(import_helical_ui25.sidebarStyles.mobileContentClass, className),
               style: { "--sidebar-width": import_helical_ui25.SIDEBAR_WIDTH_MOBILE },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerTitle, { className: "sr-only", children: "Sidebar" }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerCloseTrigger, { className: "hidden" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Col, { className: "h-full w-full", children })
+                isBottomWidgetSheet && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerGrabber, { className: import_helical_ui25.sidebarStyles.mobileGrabberClass, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_drawer.DrawerGrabberIndicator, { className: import_helical_ui25.sidebarStyles.mobileGrabberIndicatorClass }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Col, { className: "h-full w-full", children }) })
               ]
             }
           ) })
@@ -3902,8 +3918,23 @@ function BubbleMenu({ editor }) {
 
 // src/editor/SlashMenu.tsx
 var import_react23 = require("react");
-var LucideIcons = __toESM(require("lucide-react"), 1);
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
+var SLASH_MENU_ICONS = {
+  Heading1: import_lucide_react6.Heading1,
+  Heading2: import_lucide_react6.Heading2,
+  Heading3: import_lucide_react6.Heading3,
+  Heading4: import_lucide_react6.Heading4,
+  Quote: import_lucide_react6.Quote,
+  MessageSquareWarning: import_lucide_react6.MessageSquareWarning,
+  List: import_lucide_react6.List,
+  ListOrdered: import_lucide_react6.ListOrdered,
+  ListTodo: import_lucide_react6.ListTodo,
+  Minus: import_lucide_react6.Minus,
+  Code: import_lucide_react6.Code,
+  Image: import_lucide_react6.Image,
+  Bookmark: import_lucide_react6.Bookmark
+};
 var SlashMenu = (0, import_react23.forwardRef)(function SlashMenu2({ items, command }, ref) {
   const [index, setIndex] = (0, import_react23.useState)(0);
   const itemRefs = (0, import_react23.useRef)([]);
@@ -3948,7 +3979,7 @@ var SlashMenu = (0, import_react23.forwardRef)(function SlashMenu2({ items, comm
       },
       loopFocus: false,
       children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ListboxContent, { "data-slash-menu-scroll": true, children: items.map((item, i) => {
-        const Icon = LucideIcons[item.icon];
+        const Icon = SLASH_MENU_ICONS[item.icon];
         return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           ListboxItem,
           {
@@ -4019,11 +4050,11 @@ var MentionList = (0, import_react24.forwardRef)(function MentionList2({ items,
 
 // src/editor/ImageInput.tsx
 var import_react25 = require("react");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 
 // src/editor/ImageFileUpload.tsx
 var import_file_upload = require("@ark-ui/react/file-upload");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 function ImageFileUpload({ file, onFileChange, disabled = false }) {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
@@ -4036,11 +4067,11 @@ function ImageFileUpload({ file, onFileChange, disabled = false }) {
       onFileChange: (details) => onFileChange(details.acceptedFiles[0] ?? null),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_file_upload.FileUploadDropzone, { className: "flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/30 px-4 py-5 text-center transition-colors data-[dragging]:border-primary data-[dragging]:bg-primary/5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react6.ImagePlus, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react7.ImagePlus, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-sm font-medium", children: "Drop an image here" }),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-xs text-muted-foreground", children: "or" }),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_file_upload.FileUploadTrigger, { className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm hover:bg-accent", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react6.Upload, { className: "size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react7.Upload, { className: "size-4", "aria-hidden": "true" }),
             "Choose image"
           ] })
         ] }),
@@ -4060,7 +4091,7 @@ function ImageFileUpload({ file, onFileChange, disabled = false }) {
                 {
                   className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
                   "aria-label": "Remove image",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react6.Trash2, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react7.Trash2, { className: "size-4" })
                 }
               )
             ]
@@ -4140,7 +4171,7 @@ function ImageInput({ editor, position, onClose, onUpload }) {
               onClick: onClose,
               className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
               "aria-label": "Close image dialog",
-              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react7.X, { className: "size-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react8.X, { className: "size-4" })
             }
           )
         ] }),
@@ -4301,7 +4332,7 @@ function BookmarkInput({ editor, position, onClose, fetchLinkPreview }) {
 
 // src/editor/YouTubeInput.tsx
 var import_react27 = require("react");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 function isYouTubeUrl(value) {
   try {
@@ -4337,7 +4368,7 @@ function YouTubeInput({ editor, position, onClose }) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react8.Play, { className: "size-5 fill-current text-red-600", "aria-hidden": "true", "data-youtube-logo": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react9.Play, { className: "size-5 fill-current text-red-600", "aria-hidden": "true", "data-youtube-logo": true }),
             "Embed YouTube video"
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -4347,7 +4378,7 @@ function YouTubeInput({ editor, position, onClose }) {
               onClick: onClose,
               "aria-label": "Close YouTube input",
               className: "rounded p-1 hover:bg-accent",
-              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react8.X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react9.X, { className: "h-4 w-4" })
             }
           )
         ] }),

package/dist/index.js

@@ -531,7 +531,7 @@ function useIsMobile() {
   return isMobile && isMobileSet;
 }
 function Provider({
-  defaultOpen = true,
+  defaultOpen = false,
   open: openProp,
   onOpenChange: setOpenProp,
   className,
@@ -541,6 +541,8 @@ function Provider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React2.useState(false);
+  const isControlled = openProp !== void 0;
+  const usesMobileSheetState = isMobile && !isControlled;
   const [_open, _setOpen] = React2.useState(defaultOpen);
   const open = openProp ?? _open;
   const setOpen = React2.useCallback(
@@ -558,8 +560,8 @@ function Provider({
     [setOpenProp, open]
   );
   const toggleSidebar = React2.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [isMobile, setOpen, setOpenMobile]);
+    return usesMobileSheetState ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [usesMobileSheetState, setOpen, setOpenMobile]);
   React2.useEffect(() => {
     if (openProp !== void 0) return;
     if (typeof document === "undefined") return;
@@ -587,9 +589,10 @@ function Provider({
       isMobile,
       openMobile,
       setOpenMobile,
-      toggleSidebar
+      toggleSidebar,
+      isControlled
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, isControlled]
   );
   return /* @__PURE__ */ jsx24(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx24(
     Row,
@@ -615,9 +618,17 @@ import {
   DrawerContent,
   DrawerTitle,
   DrawerDescription,
-  DrawerCloseTrigger
+  DrawerCloseTrigger,
+  DrawerGrabber,
+  DrawerGrabberIndicator
 } from "@ark-ui/react/drawer";
-import { SIDEBAR_WIDTH_MOBILE, sidebarStyles as sidebarStyles2, cn as cn25 } from "@cloudvoyant/helical-ui";
+import {
+  SIDEBAR_WIDTH_MOBILE,
+  SIDEBAR_WIDGET_SNAP_POINTS,
+  SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+  sidebarStyles as sidebarStyles2,
+  cn as cn25
+} from "@cloudvoyant/helical-ui";
 import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
 function Root({
   side = "left",
@@ -627,7 +638,7 @@ function Root({
   children,
   ...props
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, open, setOpen, openMobile, setOpenMobile, isControlled } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx25(
       Col,
@@ -641,27 +652,40 @@ function Root({
     );
   }
   if (isMobile) {
+    const isBottomWidgetSheet = side === "right";
+    const mobileSheetOpen = isControlled ? open : openMobile;
+    const setMobileSheetOpen = isControlled ? setOpen : setOpenMobile;
+    const bottomSheetSnapProps = isBottomWidgetSheet ? {
+      snapPoints: SIDEBAR_WIDGET_SNAP_POINTS,
+      defaultSnapPoint: SIDEBAR_WIDGET_DEFAULT_SNAP_POINT,
+      snapToSequentialPoints: true
+    } : {};
     return /* @__PURE__ */ jsxs5(
       DrawerRoot,
       {
-        open: openMobile,
-        onOpenChange: (details) => setOpenMobile(details.open),
+        open: mobileSheetOpen,
+        onOpenChange: (details) => setMobileSheetOpen(details.open),
+        swipeDirection: side === "left" ? "start" : "down",
+        modal: !isBottomWidgetSheet,
+        ...bottomSheetSnapProps,
+        preventDragOnScroll: false,
         ...props,
         children: [
-          /* @__PURE__ */ jsx25(DrawerBackdrop, {}),
-          /* @__PURE__ */ jsx25(DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ jsxs5(
+          !isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerBackdrop, { className: sidebarStyles2.mobileBackdropClass }),
+          /* @__PURE__ */ jsx25(DrawerPositioner, { className: sidebarStyles2.mobilePositionerClass, children: /* @__PURE__ */ jsxs5(
             DrawerContent,
             {
               "data-sidebar": "sidebar",
               "data-slot": "sidebar",
               "data-mobile": "true",
-              className: cn25("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
+              className: cn25(sidebarStyles2.mobileContentClass, className),
               style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
               children: [
                 /* @__PURE__ */ jsx25(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
                 /* @__PURE__ */ jsx25(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
                 /* @__PURE__ */ jsx25(DrawerCloseTrigger, { className: "hidden" }),
-                /* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children })
+                isBottomWidgetSheet && /* @__PURE__ */ jsx25(DrawerGrabber, { className: sidebarStyles2.mobileGrabberClass, children: /* @__PURE__ */ jsx25(DrawerGrabberIndicator, { className: sidebarStyles2.mobileGrabberIndicatorClass }) }),
+                /* @__PURE__ */ jsx25("div", { "data-no-drag": true, className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsx25(Col, { className: "h-full w-full", children }) })
               ]
             }
           ) })
@@ -4124,8 +4148,37 @@ function BubbleMenu({ editor }) {
 
 // src/editor/SlashMenu.tsx
 import { forwardRef, useEffect as useEffect11, useImperativeHandle, useRef as useRef4, useState as useState12 } from "react";
-import * as LucideIcons from "lucide-react";
+import {
+  Bookmark,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Image,
+  List,
+  ListOrdered,
+  ListTodo,
+  MessageSquareWarning,
+  Minus,
+  Quote
+} from "lucide-react";
 import { jsx as jsx82, jsxs as jsxs36 } from "react/jsx-runtime";
+var SLASH_MENU_ICONS = {
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Quote,
+  MessageSquareWarning,
+  List,
+  ListOrdered,
+  ListTodo,
+  Minus,
+  Code,
+  Image,
+  Bookmark
+};
 var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
   const [index, setIndex] = useState12(0);
   const itemRefs = useRef4([]);
@@ -4170,7 +4223,7 @@ var SlashMenu = forwardRef(function SlashMenu2({ items, command }, ref) {
       },
       loopFocus: false,
       children: /* @__PURE__ */ jsx82(ListboxContent, { "data-slash-menu-scroll": true, children: items.map((item, i) => {
-        const Icon = LucideIcons[item.icon];
+        const Icon = SLASH_MENU_ICONS[item.icon];
         return /* @__PURE__ */ jsx82(
           ListboxItem,
           {

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@cloudvoyant/helical-react",
-  "version": "0.19.0",
+  "version": "0.20.0-rc.202611012026.09e963c",
   "description": "helical-ui React UI components",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +47,7 @@
     "@tiptap/react": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
     "lucide-react": "^1.32.0",
-    "@cloudvoyant/helical-ui": "0.19.0"
+    "@cloudvoyant/helical-ui": "0.20.0-rc.202611012026.09e963c"
   },
   "devDependencies": {
     "@types/katex": "^0.16.8",