notra-editor 0.8.0 → 0.8.2

package/dist/components/list-dropdown-menu/list-menu-item.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/list-dropdown-menu/list-menu-item.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useList, type ListType } from './use-list';\nimport { DropdownMenuItem } from '../ui/dropdown-menu';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ListMenuItemProps {\n\teditor: Editor | null;\n\tlistType: ListType;\n}\n\nexport const ListMenuItem = forwardRef<HTMLDivElement, ListMenuItemProps>(\n\t({ editor, listType }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useList({\n\t\t\teditor,\n\t\t\ttype: listType\n\t\t});\n\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]\"\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tonSelect={handleToggle}\n\t\t\t>\n\t\t\t\t<Icon />\n\t\t\t\t<span>{label}</span>\n\t\t\t</DropdownMenuItem>\n\t\t);\n\t}\n);\n\nListMenuItem.displayName = 'ListMenuItem';\n"],"mappings":"AAoBG,SAQC,KARD;AApBH,SAAS,kBAAkB;AAE3B,SAAS,eAA8B;AACvC,SAAS,wBAAwB;AAS1B,MAAM,eAAe;AAAA,EAC3B,CAAC,EAAE,QAAQ,SAAS,GAAG,QAAQ;AAC9B,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA,MAAM;AAAA,IACP,CAAC;AAED,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,UAAU;AAAA,QAEV;AAAA,8BAAC,QAAK;AAAA,UACN,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACd;AAAA,EAEF;AACD;AAEA,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/list-menu-item.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useList, type ListType } from './use-list.js';\nimport { DropdownMenuItem } from '../ui/dropdown-menu.js';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ListMenuItemProps {\n\teditor: Editor | null;\n\tlistType: ListType;\n}\n\nexport const ListMenuItem = forwardRef<HTMLDivElement, ListMenuItemProps>(\n\t({ editor, listType }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useList({\n\t\t\teditor,\n\t\t\ttype: listType\n\t\t});\n\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]\"\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tonSelect={handleToggle}\n\t\t\t>\n\t\t\t\t<Icon />\n\t\t\t\t<span>{label}</span>\n\t\t\t</DropdownMenuItem>\n\t\t);\n\t}\n);\n\nListMenuItem.displayName = 'ListMenuItem';\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,eAA8B;AACvC,SAAS,wBAAwB;AAiB9B,SAQC,KARD;AARI,IAAM,eAAe;AAAA,EAC3B,CAAC,EAAE,QAAQ,SAAS,GAAG,QAAQ;AAC9B,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA,MAAM;AAAA,IACP,CAAC;AAED,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,UAAU;AAAA,QAEV;AAAA,8BAAC,QAAK;AAAA,UACN,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACd;AAAA,EAEF;AACD;AAEA,aAAa,cAAc;","names":[]}

package/dist/components/list-dropdown-menu/use-list.cjs

@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list-dropdown-menu/use-list.ts
 var use_list_exports = {};
 __export(use_list_exports, {
   getListTriggerIcon: () => getListTriggerIcon,
@@ -25,17 +27,17 @@ __export(use_list_exports, {
 module.exports = __toCommonJS(use_list_exports);
 var import_lucide_react = require("lucide-react");
 var import_react = require("react");
-const listIcons = {
+var listIcons = {
   bulletList: import_lucide_react.List,
   orderedList: import_lucide_react.ListOrdered,
   taskList: import_lucide_react.ListTodo
 };
-const listLabels = {
+var listLabels = {
   bulletList: "Bullet List",
   orderedList: "Ordered List",
   taskList: "Task List"
 };
-const listItemTypes = {
+var listItemTypes = {
   bulletList: "listItem",
   orderedList: "listItem",
   taskList: "taskItem"

package/dist/components/list-dropdown-menu/use-list.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,mBAAiD;AASjD,MAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,mBAAe,0BAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA0B,IAAI;AAElE,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,mBAAiD;AASjD,IAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,IAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,IAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,mBAAe,0BAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA0B,IAAI;AAElE,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}

package/dist/components/list-dropdown-menu/use-list.mjs

@@ -1,16 +1,17 @@
+// src/components/list-dropdown-menu/use-list.ts
 import { List, ListOrdered, ListTodo } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-const listIcons = {
+var listIcons = {
   bulletList: List,
   orderedList: ListOrdered,
   taskList: ListTodo
 };
-const listLabels = {
+var listLabels = {
   bulletList: "Bullet List",
   orderedList: "Ordered List",
   taskList: "Task List"
 };
-const listItemTypes = {
+var listItemTypes = {
   bulletList: "listItem",
   orderedList: "listItem",
   taskList: "taskItem"

package/dist/components/list-dropdown-menu/use-list.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":"AAAA,SAAS,MAAM,aAAa,gBAAgB;AAC5C,SAAS,aAAa,WAAW,gBAAgB;AASjD,MAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAA0B,IAAI;AAElE,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":";AAAA,SAAS,MAAM,aAAa,gBAAgB;AAC5C,SAAS,aAAa,WAAW,gBAAgB;AASjD,IAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,IAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,IAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAA0B,IAAI;AAElE,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}

package/dist/components/mark-button/mark-button.cjs

@@ -17,16 +17,18 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/mark-button/mark-button.tsx
 var mark_button_exports = {};
 __export(mark_button_exports, {
   MarkButton: () => MarkButton
 });
 module.exports = __toCommonJS(mark_button_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_use_mark = require("./use-mark");
-var import_button = require("../ui/button");
-const MarkButton = (0, import_react.forwardRef)(
+var import_use_mark = require("./use-mark.cjs");
+var import_button = require("../ui/button.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MarkButton = (0, import_react.forwardRef)(
   ({ editor, type, onClick, ...buttonProps }, ref) => {
     const { isActive, canToggle, handleToggle, label, Icon } = (0, import_use_mark.useMark)({
       editor,

package/dist/components/mark-button/mark-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark';\nimport { Button } from '../ui/button';\n\nimport type { MarkType } from './use-mark';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDI;AAhDJ,mBAAwC;AAExC,sBAAwB;AACxB,oBAAuB;AAahB,MAAM,iBAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,QAAI,yBAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,kBAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark.js';\nimport { Button } from '../ui/button.js';\n\nimport type { MarkType } from './use-mark.js';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwC;AAExC,sBAAwB;AACxB,oBAAuB;AA6CnB;AAhCG,IAAM,iBAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,QAAI,yBAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,kBAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}

package/dist/components/mark-button/mark-button.mjs

@@ -1,9 +1,11 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+
+// src/components/mark-button/mark-button.tsx
 import { forwardRef, useCallback } from "react";
-import { useMark } from "./use-mark";
-import { Button } from "../ui/button";
-const MarkButton = forwardRef(
+import { useMark } from "./use-mark.mjs";
+import { Button } from "../ui/button.mjs";
+import { jsx } from "react/jsx-runtime";
+var MarkButton = forwardRef(
   ({ editor, type, onClick, ...buttonProps }, ref) => {
     const { isActive, canToggle, handleToggle, label, Icon } = useMark({
       editor,

package/dist/components/mark-button/mark-button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark';\nimport { Button } from '../ui/button';\n\nimport type { MarkType } from './use-mark';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";AAkDI;AAhDJ,SAAS,YAAY,mBAAmB;AAExC,SAAS,eAAe;AACxB,SAAS,cAAc;AAahB,MAAM,aAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,cAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark.js';\nimport { Button } from '../ui/button.js';\n\nimport type { MarkType } from './use-mark.js';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";;;AAEA,SAAS,YAAY,mBAAmB;AAExC,SAAS,eAAe;AACxB,SAAS,cAAc;AA6CnB;AAhCG,IAAM,aAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,cAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}

package/dist/components/mark-button/use-mark.cjs

@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/mark-button/use-mark.ts
 var use_mark_exports = {};
 __export(use_mark_exports, {
   useMark: () => useMark
@@ -23,13 +25,13 @@ __export(use_mark_exports, {
 module.exports = __toCommonJS(use_mark_exports);
 var import_lucide_react = require("lucide-react");
 var import_react = require("react");
-const markLabels = {
+var markLabels = {
   bold: "Bold",
   italic: "Italic",
   strike: "Strikethrough",
   code: "Code"
 };
-const markIcons = {
+var markIcons = {
   bold: import_lucide_react.Bold,
   italic: import_lucide_react.Italic,
   strike: import_lucide_react.Strikethrough,

package/dist/components/mark-button/use-mark.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/mark-button/use-mark.ts"],"sourcesContent":["import { Bold, Code, Italic, Strikethrough } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type MarkType = 'bold' | 'italic' | 'strike' | 'code';\n\nexport interface UseMarkConfig {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nconst markLabels: Record<MarkType, string> = {\n\tbold: 'Bold',\n\titalic: 'Italic',\n\tstrike: 'Strikethrough',\n\tcode: 'Code'\n};\n\nconst markIcons: Record<MarkType, LucideIcon> = {\n\tbold: Bold,\n\titalic: Italic,\n\tstrike: Strikethrough,\n\tcode: Code\n};\n\nexport function useMark({ editor, type }: UseMarkConfig) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(editor.isEditable && editor.can().toggleMark(type));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\treturn editor.chain().focus().toggleMark(type).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: markLabels[type],\n\t\tIcon: markIcons[type]\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAkD;AAClD,mBAAiD;AAYjD,MAAM,aAAuC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEA,MAAM,YAA0C;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEO,SAAS,QAAQ,EAAE,QAAQ,KAAK,GAAkB;AACxD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,OAAO,cAAc,OAAO,IAAI,EAAE,WAAW,IAAI,CAAC;AAAA,IAChE;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,mBAAe,0BAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE,IAAI;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;","names":[]}
+{"version":3,"sources":["../../../src/components/mark-button/use-mark.ts"],"sourcesContent":["import { Bold, Code, Italic, Strikethrough } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type MarkType = 'bold' | 'italic' | 'strike' | 'code';\n\nexport interface UseMarkConfig {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nconst markLabels: Record<MarkType, string> = {\n\tbold: 'Bold',\n\titalic: 'Italic',\n\tstrike: 'Strikethrough',\n\tcode: 'Code'\n};\n\nconst markIcons: Record<MarkType, LucideIcon> = {\n\tbold: Bold,\n\titalic: Italic,\n\tstrike: Strikethrough,\n\tcode: Code\n};\n\nexport function useMark({ editor, type }: UseMarkConfig) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(editor.isEditable && editor.can().toggleMark(type));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\treturn editor.chain().focus().toggleMark(type).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: markLabels[type],\n\t\tIcon: markIcons[type]\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAkD;AAClD,mBAAiD;AAYjD,IAAM,aAAuC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEA,IAAM,YAA0C;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEO,SAAS,QAAQ,EAAE,QAAQ,KAAK,GAAkB;AACxD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,OAAO,cAAc,OAAO,IAAI,EAAE,WAAW,IAAI,CAAC;AAAA,IAChE;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,mBAAe,0BAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE,IAAI;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;","names":[]}

package/dist/components/mark-button/use-mark.mjs

@@ -1,12 +1,13 @@
+// src/components/mark-button/use-mark.ts
 import { Bold, Code, Italic, Strikethrough } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-const markLabels = {
+var markLabels = {
   bold: "Bold",
   italic: "Italic",
   strike: "Strikethrough",
   code: "Code"
 };
-const markIcons = {
+var markIcons = {
   bold: Bold,
   italic: Italic,
   strike: Strikethrough,

package/dist/components/mark-button/use-mark.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/mark-button/use-mark.ts"],"sourcesContent":["import { Bold, Code, Italic, Strikethrough } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type MarkType = 'bold' | 'italic' | 'strike' | 'code';\n\nexport interface UseMarkConfig {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nconst markLabels: Record<MarkType, string> = {\n\tbold: 'Bold',\n\titalic: 'Italic',\n\tstrike: 'Strikethrough',\n\tcode: 'Code'\n};\n\nconst markIcons: Record<MarkType, LucideIcon> = {\n\tbold: Bold,\n\titalic: Italic,\n\tstrike: Strikethrough,\n\tcode: Code\n};\n\nexport function useMark({ editor, type }: UseMarkConfig) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(editor.isEditable && editor.can().toggleMark(type));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\treturn editor.chain().focus().toggleMark(type).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: markLabels[type],\n\t\tIcon: markIcons[type]\n\t};\n}\n"],"mappings":"AAAA,SAAS,MAAM,MAAM,QAAQ,qBAAqB;AAClD,SAAS,aAAa,WAAW,gBAAgB;AAYjD,MAAM,aAAuC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEA,MAAM,YAA0C;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEO,SAAS,QAAQ,EAAE,QAAQ,KAAK,GAAkB;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,OAAO,cAAc,OAAO,IAAI,EAAE,WAAW,IAAI,CAAC;AAAA,IAChE;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE,IAAI;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;","names":[]}
+{"version":3,"sources":["../../../src/components/mark-button/use-mark.ts"],"sourcesContent":["import { Bold, Code, Italic, Strikethrough } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type MarkType = 'bold' | 'italic' | 'strike' | 'code';\n\nexport interface UseMarkConfig {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nconst markLabels: Record<MarkType, string> = {\n\tbold: 'Bold',\n\titalic: 'Italic',\n\tstrike: 'Strikethrough',\n\tcode: 'Code'\n};\n\nconst markIcons: Record<MarkType, LucideIcon> = {\n\tbold: Bold,\n\titalic: Italic,\n\tstrike: Strikethrough,\n\tcode: Code\n};\n\nexport function useMark({ editor, type }: UseMarkConfig) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(editor.isEditable && editor.can().toggleMark(type));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\treturn editor.chain().focus().toggleMark(type).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: markLabels[type],\n\t\tIcon: markIcons[type]\n\t};\n}\n"],"mappings":";AAAA,SAAS,MAAM,MAAM,QAAQ,qBAAqB;AAClD,SAAS,aAAa,WAAW,gBAAgB;AAYjD,IAAM,aAAuC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEA,IAAM,YAA0C;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACP;AAEO,SAAS,QAAQ,EAAE,QAAQ,KAAK,GAAkB;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,OAAO,cAAc,OAAO,IAAI,EAAE,WAAW,IAAI,CAAC;AAAA,IAChE;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,IAAI,EAAE,IAAI;AAAA,EACpD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;","names":[]}

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs

@@ -0,0 +1,151 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/slash-dropdown-menu/slash-dropdown-menu.tsx
+var slash_dropdown_menu_exports = {};
+__export(slash_dropdown_menu_exports, {
+  SlashDropdownMenu: () => SlashDropdownMenu
+});
+module.exports = __toCommonJS(slash_dropdown_menu_exports);
+var import_react = require("react");
+var import_slash_image_popover = require("./slash-image-popover.cjs");
+var import_use_slash_items = require("./use-slash-items.cjs");
+var import_filter_suggestion_items = require("../suggestion-menu/filter-suggestion-items.cjs");
+var import_suggestion_menu = require("../suggestion-menu/suggestion-menu.cjs");
+var import_button = require("../ui/button.cjs");
+var import_separator = require("../ui/separator.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SlashDropdownMenu({ editor }) {
+  const [imageAnchor, setImageAnchor] = (0, import_react.useState)(null);
+  const handleImageRequest = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    const rect = editor.view.coordsAtPos(from);
+    const domRect = new DOMRect(
+      rect.left,
+      rect.top,
+      rect.right - rect.left,
+      rect.bottom - rect.top
+    );
+    setImageAnchor(domRect);
+  }, [editor]);
+  const getItems = (0, import_use_slash_items.useSlashItems)({ onImageRequest: handleImageRequest });
+  const itemsCallback = (0, import_react.useCallback)(
+    ({ query, editor: editor2 }) => (0, import_filter_suggestion_items.filterSuggestionItems)(getItems(editor2), query),
+    [getItems]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_suggestion_menu.SuggestionMenu,
+      {
+        char: "/",
+        decorationClass: "notra-slash-decoration",
+        decorationContent: "Filter...",
+        editor,
+        items: itemsCallback,
+        pluginKey: "slashDropdownMenu",
+        selector: "notra-slash-dropdown-menu",
+        children: ({ items, selectedIndex, onSelect }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          GroupedItemList,
+          {
+            items,
+            selectedIndex,
+            onSelect
+          }
+        )
+      }
+    ),
+    imageAnchor && editor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_slash_image_popover.SlashImagePopover,
+      {
+        anchorRect: imageAnchor,
+        editor,
+        onClose: () => setImageAnchor(null)
+      }
+    )
+  ] });
+}
+function GroupedItemList({
+  items,
+  selectedIndex,
+  onSelect
+}) {
+  const groups = (0, import_react.useMemo)(() => {
+    const result = [];
+    items.forEach((item, index) => {
+      const label = item.group ?? "";
+      const last = result[result.length - 1];
+      if (last && last.label === label) {
+        last.items.push(item);
+        last.offsets.push(index);
+      } else {
+        result.push({ label, items: [item], offsets: [index] });
+      }
+    });
+    return result;
+  }, [items]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "notra-slash-card", children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { className: "nt:my-1", orientation: "horizontal" }),
+    group.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "notra-slash-group-label", children: group.label }),
+    group.items.map((item, itemIndex) => {
+      const absoluteIndex = group.offsets[itemIndex];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SlashItemButton,
+        {
+          isSelected: absoluteIndex === selectedIndex,
+          item,
+          onSelect: () => onSelect(item)
+        },
+        `${item.title}-${absoluteIndex}`
+      );
+    })
+  ] }, `${group.label}-${groupIndex}`)) });
+}
+function SlashItemButton({ item, isSelected, onSelect }) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!isSelected || !ref.current) return;
+    ref.current.scrollIntoView({ block: "nearest" });
+  }, [isSelected]);
+  const Badge = item.badge;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_button.Button,
+    {
+      ref,
+      className: "nt:w-full nt:justify-start nt:gap-2",
+      "data-active-state": isSelected ? "on" : "off",
+      size: "default",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: onSelect,
+      children: [
+        Badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { className: "nt:size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nt:flex-1 nt:text-left", children: item.title })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SlashDropdownMenu
+});
+//# sourceMappingURL=slash-dropdown-menu.cjs.map

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slash-dropdown-menu/slash-dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { SlashImagePopover } from './slash-image-popover.js';\nimport { useSlashItems } from './use-slash-items.js';\nimport { filterSuggestionItems } from '../suggestion-menu/filter-suggestion-items.js';\nimport { SuggestionMenu } from '../suggestion-menu/suggestion-menu.js';\nimport { Button } from '../ui/button.js';\nimport { Separator } from '../ui/separator.js';\n\nimport type { SuggestionItem } from '../suggestion-menu/suggestion-menu-types.js';\nimport type { Editor } from '@tiptap/core';\n\nexport interface SlashDropdownMenuProps {\n\teditor: Editor | null;\n}\n\nexport function SlashDropdownMenu({ editor }: SlashDropdownMenuProps) {\n\tconst [imageAnchor, setImageAnchor] = useState<DOMRect | null>(null);\n\n\tconst handleImageRequest = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\tconst { from } = editor.state.selection;\n\t\tconst rect = editor.view.coordsAtPos(from);\n\t\tconst domRect = new DOMRect(\n\t\t\trect.left,\n\t\t\trect.top,\n\t\t\trect.right - rect.left,\n\t\t\trect.bottom - rect.top\n\t\t);\n\n\t\tsetImageAnchor(domRect);\n\t}, [editor]);\n\n\tconst getItems = useSlashItems({ onImageRequest: handleImageRequest });\n\n\tconst itemsCallback = useCallback(\n\t\t({ query, editor }: { query: string; editor: Editor }) =>\n\t\t\tfilterSuggestionItems(getItems(editor), query),\n\t\t[getItems]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<SuggestionMenu\n\t\t\t\tchar=\"/\"\n\t\t\t\tdecorationClass=\"notra-slash-decoration\"\n\t\t\t\tdecorationContent=\"Filter...\"\n\t\t\t\teditor={editor}\n\t\t\t\titems={itemsCallback}\n\t\t\t\tpluginKey=\"slashDropdownMenu\"\n\t\t\t\tselector=\"notra-slash-dropdown-menu\"\n\t\t\t>\n\t\t\t\t{({ items, selectedIndex, onSelect }) => (\n\t\t\t\t\t<GroupedItemList\n\t\t\t\t\t\titems={items}\n\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SuggestionMenu>\n\t\t\t{imageAnchor && editor && (\n\t\t\t\t<SlashImagePopover\n\t\t\t\t\tanchorRect={imageAnchor}\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tonClose={() => setImageAnchor(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\ninterface GroupedItemListProps {\n\titems: SuggestionItem[];\n\tselectedIndex: number;\n\tonSelect: (item: SuggestionItem) => void;\n}\n\nfunction GroupedItemList({\n\titems,\n\tselectedIndex,\n\tonSelect\n}: GroupedItemListProps) {\n\tconst groups = useMemo(() => {\n\t\tconst result: {\n\t\t\tlabel: string;\n\t\t\titems: SuggestionItem[];\n\t\t\toffsets: number[];\n\t\t}[] = [];\n\n\t\titems.forEach((item, index) => {\n\t\t\tconst label = item.group ?? '';\n\t\t\tconst last = result[result.length - 1];\n\n\t\t\tif (last && last.label === label) {\n\t\t\t\tlast.items.push(item);\n\t\t\t\tlast.offsets.push(index);\n\t\t\t} else {\n\t\t\t\tresult.push({ label, items: [item], offsets: [index] });\n\t\t\t}\n\t\t});\n\n\t\treturn result;\n\t}, [items]);\n\n\tif (items.length === 0) return null;\n\n\treturn (\n\t\t<div className=\"notra-slash-card\">\n\t\t\t{groups.map((group, groupIndex) => (\n\t\t\t\t<div key={`${group.label}-${groupIndex}`}>\n\t\t\t\t\t{groupIndex > 0 && (\n\t\t\t\t\t\t<Separator className=\"nt:my-1\" orientation=\"horizontal\" />\n\t\t\t\t\t)}\n\t\t\t\t\t{group.label && (\n\t\t\t\t\t\t<div className=\"notra-slash-group-label\">{group.label}</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{group.items.map((item, itemIndex) => {\n\t\t\t\t\t\tconst absoluteIndex = group.offsets[itemIndex];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SlashItemButton\n\t\t\t\t\t\t\t\tkey={`${item.title}-${absoluteIndex}`}\n\t\t\t\t\t\t\t\tisSelected={absoluteIndex === selectedIndex}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\tonSelect={() => onSelect(item)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\ninterface SlashItemButtonProps {\n\titem: SuggestionItem;\n\tisSelected: boolean;\n\tonSelect: () => void;\n}\n\nfunction SlashItemButton({ item, isSelected, onSelect }: SlashItemButtonProps) {\n\tconst ref = useRef<HTMLButtonElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!isSelected || !ref.current) return;\n\n\t\tref.current.scrollIntoView({ block: 'nearest' });\n\t}, [isSelected]);\n\n\tconst Badge = item.badge;\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tclassName=\"nt:w-full nt:justify-start nt:gap-2\"\n\t\t\tdata-active-state={isSelected ? 'on' : 'off'}\n\t\t\tsize=\"default\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={onSelect}\n\t\t>\n\t\t\t{Badge && <Badge className=\"nt:size-4\" />}\n\t\t\t<span className=\"nt:flex-1 nt:text-left\">{item.title}</span>\n\t\t</Button>\n\t);\n}\n"],"mappings":"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","names":["editor"]}

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface SlashDropdownMenuProps {
+    editor: Editor | null;
+}
+declare function SlashDropdownMenu({ editor }: SlashDropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { SlashDropdownMenu, type SlashDropdownMenuProps };

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/core';
+
+interface SlashDropdownMenuProps {
+    editor: Editor | null;
+}
+declare function SlashDropdownMenu({ editor }: SlashDropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+export { SlashDropdownMenu, type SlashDropdownMenuProps };

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs

@@ -0,0 +1,127 @@
+"use client";
+
+// src/components/slash-dropdown-menu/slash-dropdown-menu.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SlashImagePopover } from "./slash-image-popover.mjs";
+import { useSlashItems } from "./use-slash-items.mjs";
+import { filterSuggestionItems } from "../suggestion-menu/filter-suggestion-items.mjs";
+import { SuggestionMenu } from "../suggestion-menu/suggestion-menu.mjs";
+import { Button } from "../ui/button.mjs";
+import { Separator } from "../ui/separator.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SlashDropdownMenu({ editor }) {
+  const [imageAnchor, setImageAnchor] = useState(null);
+  const handleImageRequest = useCallback(() => {
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    const rect = editor.view.coordsAtPos(from);
+    const domRect = new DOMRect(
+      rect.left,
+      rect.top,
+      rect.right - rect.left,
+      rect.bottom - rect.top
+    );
+    setImageAnchor(domRect);
+  }, [editor]);
+  const getItems = useSlashItems({ onImageRequest: handleImageRequest });
+  const itemsCallback = useCallback(
+    ({ query, editor: editor2 }) => filterSuggestionItems(getItems(editor2), query),
+    [getItems]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SuggestionMenu,
+      {
+        char: "/",
+        decorationClass: "notra-slash-decoration",
+        decorationContent: "Filter...",
+        editor,
+        items: itemsCallback,
+        pluginKey: "slashDropdownMenu",
+        selector: "notra-slash-dropdown-menu",
+        children: ({ items, selectedIndex, onSelect }) => /* @__PURE__ */ jsx(
+          GroupedItemList,
+          {
+            items,
+            selectedIndex,
+            onSelect
+          }
+        )
+      }
+    ),
+    imageAnchor && editor && /* @__PURE__ */ jsx(
+      SlashImagePopover,
+      {
+        anchorRect: imageAnchor,
+        editor,
+        onClose: () => setImageAnchor(null)
+      }
+    )
+  ] });
+}
+function GroupedItemList({
+  items,
+  selectedIndex,
+  onSelect
+}) {
+  const groups = useMemo(() => {
+    const result = [];
+    items.forEach((item, index) => {
+      const label = item.group ?? "";
+      const last = result[result.length - 1];
+      if (last && last.label === label) {
+        last.items.push(item);
+        last.offsets.push(index);
+      } else {
+        result.push({ label, items: [item], offsets: [index] });
+      }
+    });
+    return result;
+  }, [items]);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "notra-slash-card", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
+    groupIndex > 0 && /* @__PURE__ */ jsx(Separator, { className: "nt:my-1", orientation: "horizontal" }),
+    group.label && /* @__PURE__ */ jsx("div", { className: "notra-slash-group-label", children: group.label }),
+    group.items.map((item, itemIndex) => {
+      const absoluteIndex = group.offsets[itemIndex];
+      return /* @__PURE__ */ jsx(
+        SlashItemButton,
+        {
+          isSelected: absoluteIndex === selectedIndex,
+          item,
+          onSelect: () => onSelect(item)
+        },
+        `${item.title}-${absoluteIndex}`
+      );
+    })
+  ] }, `${group.label}-${groupIndex}`)) });
+}
+function SlashItemButton({ item, isSelected, onSelect }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!isSelected || !ref.current) return;
+    ref.current.scrollIntoView({ block: "nearest" });
+  }, [isSelected]);
+  const Badge = item.badge;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      className: "nt:w-full nt:justify-start nt:gap-2",
+      "data-active-state": isSelected ? "on" : "off",
+      size: "default",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: onSelect,
+      children: [
+        Badge && /* @__PURE__ */ jsx(Badge, { className: "nt:size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "nt:flex-1 nt:text-left", children: item.title })
+      ]
+    }
+  );
+}
+export {
+  SlashDropdownMenu
+};
+//# sourceMappingURL=slash-dropdown-menu.mjs.map

package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slash-dropdown-menu/slash-dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { SlashImagePopover } from './slash-image-popover.js';\nimport { useSlashItems } from './use-slash-items.js';\nimport { filterSuggestionItems } from '../suggestion-menu/filter-suggestion-items.js';\nimport { SuggestionMenu } from '../suggestion-menu/suggestion-menu.js';\nimport { Button } from '../ui/button.js';\nimport { Separator } from '../ui/separator.js';\n\nimport type { SuggestionItem } from '../suggestion-menu/suggestion-menu-types.js';\nimport type { Editor } from '@tiptap/core';\n\nexport interface SlashDropdownMenuProps {\n\teditor: Editor | null;\n}\n\nexport function SlashDropdownMenu({ editor }: SlashDropdownMenuProps) {\n\tconst [imageAnchor, setImageAnchor] = useState<DOMRect | null>(null);\n\n\tconst handleImageRequest = useCallback(() => {\n\t\tif (!editor) return;\n\n\t\tconst { from } = editor.state.selection;\n\t\tconst rect = editor.view.coordsAtPos(from);\n\t\tconst domRect = new DOMRect(\n\t\t\trect.left,\n\t\t\trect.top,\n\t\t\trect.right - rect.left,\n\t\t\trect.bottom - rect.top\n\t\t);\n\n\t\tsetImageAnchor(domRect);\n\t}, [editor]);\n\n\tconst getItems = useSlashItems({ onImageRequest: handleImageRequest });\n\n\tconst itemsCallback = useCallback(\n\t\t({ query, editor }: { query: string; editor: Editor }) =>\n\t\t\tfilterSuggestionItems(getItems(editor), query),\n\t\t[getItems]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<SuggestionMenu\n\t\t\t\tchar=\"/\"\n\t\t\t\tdecorationClass=\"notra-slash-decoration\"\n\t\t\t\tdecorationContent=\"Filter...\"\n\t\t\t\teditor={editor}\n\t\t\t\titems={itemsCallback}\n\t\t\t\tpluginKey=\"slashDropdownMenu\"\n\t\t\t\tselector=\"notra-slash-dropdown-menu\"\n\t\t\t>\n\t\t\t\t{({ items, selectedIndex, onSelect }) => (\n\t\t\t\t\t<GroupedItemList\n\t\t\t\t\t\titems={items}\n\t\t\t\t\t\tselectedIndex={selectedIndex}\n\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SuggestionMenu>\n\t\t\t{imageAnchor && editor && (\n\t\t\t\t<SlashImagePopover\n\t\t\t\t\tanchorRect={imageAnchor}\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tonClose={() => setImageAnchor(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\ninterface GroupedItemListProps {\n\titems: SuggestionItem[];\n\tselectedIndex: number;\n\tonSelect: (item: SuggestionItem) => void;\n}\n\nfunction GroupedItemList({\n\titems,\n\tselectedIndex,\n\tonSelect\n}: GroupedItemListProps) {\n\tconst groups = useMemo(() => {\n\t\tconst result: {\n\t\t\tlabel: string;\n\t\t\titems: SuggestionItem[];\n\t\t\toffsets: number[];\n\t\t}[] = [];\n\n\t\titems.forEach((item, index) => {\n\t\t\tconst label = item.group ?? '';\n\t\t\tconst last = result[result.length - 1];\n\n\t\t\tif (last && last.label === label) {\n\t\t\t\tlast.items.push(item);\n\t\t\t\tlast.offsets.push(index);\n\t\t\t} else {\n\t\t\t\tresult.push({ label, items: [item], offsets: [index] });\n\t\t\t}\n\t\t});\n\n\t\treturn result;\n\t}, [items]);\n\n\tif (items.length === 0) return null;\n\n\treturn (\n\t\t<div className=\"notra-slash-card\">\n\t\t\t{groups.map((group, groupIndex) => (\n\t\t\t\t<div key={`${group.label}-${groupIndex}`}>\n\t\t\t\t\t{groupIndex > 0 && (\n\t\t\t\t\t\t<Separator className=\"nt:my-1\" orientation=\"horizontal\" />\n\t\t\t\t\t)}\n\t\t\t\t\t{group.label && (\n\t\t\t\t\t\t<div className=\"notra-slash-group-label\">{group.label}</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{group.items.map((item, itemIndex) => {\n\t\t\t\t\t\tconst absoluteIndex = group.offsets[itemIndex];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SlashItemButton\n\t\t\t\t\t\t\t\tkey={`${item.title}-${absoluteIndex}`}\n\t\t\t\t\t\t\t\tisSelected={absoluteIndex === selectedIndex}\n\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\tonSelect={() => onSelect(item)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\ninterface SlashItemButtonProps {\n\titem: SuggestionItem;\n\tisSelected: boolean;\n\tonSelect: () => void;\n}\n\nfunction SlashItemButton({ item, isSelected, onSelect }: SlashItemButtonProps) {\n\tconst ref = useRef<HTMLButtonElement>(null);\n\n\tuseEffect(() => {\n\t\tif (!isSelected || !ref.current) return;\n\n\t\tref.current.scrollIntoView({ block: 'nearest' });\n\t}, [isSelected]);\n\n\tconst Badge = item.badge;\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\tclassName=\"nt:w-full nt:justify-start nt:gap-2\"\n\t\t\tdata-active-state={isSelected ? 'on' : 'off'}\n\t\t\tsize=\"default\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={onSelect}\n\t\t>\n\t\t\t{Badge && <Badge className=\"nt:size-4\" />}\n\t\t\t<span className=\"nt:flex-1 nt:text-left\">{item.title}</span>\n\t\t</Button>\n\t);\n}\n"],"mappings":"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","names":["editor"]}