@ecsplico/editor 3.1.0 → 3.2.0

package/dist/features/block-ui/react/BlockUi.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockUi.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockUi.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { DragHandle, type DragHandleProps } from '@tiptap/extension-drag-handle-react'\nimport type { Node } from '@tiptap/pm/model'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { type BlockTarget, editorEntryOf } from '../../../core'\nimport { isChromeNode } from '../../../core/schema'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from '../handle-geometry'\nimport { BlockActionsOverlay } from './BlockActionsOverlay'\nimport { BlockHandles } from './BlockHandles'\n\n/**\n * Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the\n * hover actions (`BlockActionsOverlay`) at the editor's right edge, both targeting the same block. The actions are those\n * the surface registered for `editor` (features' block actions, then the host's). A block with a kind icon (a composite)\n * gets no handle: its icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent\n * handles on every eligible block (`BlockHandles`). Mounted by the block-ui feature beside the editor.\n */\nexport function BlockUi({ editor }: { editor: Editor }) {\n  // Hover actions target the drag handle's block. The plugin drops its target when the pointer leaves the editor (also\n  // onto the overlay, which sits outside it) and on keydown; a short grace keeps the overlay while the pointer moves\n  // onto it, and typing hides it at once.\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const [hoverTarget, setHoverTarget] = useState<BlockTarget | null>(null)\n  const [targetHasKindIcon, setTargetHasKindIcon] = useState(false)\n  const { settings } = useEditorSettings()\n  // Read while rendering: the surface registers its entry after its overlays have mounted, and the overlay renders\n  // again once a block is hovered.\n  const actions = editorEntryOf(editor)?.blockActions ?? []\n\n  // Everything the plugin callbacks and the targeting rules below read while the pointer moves: not render state.\n  const track = useRef({\n    overlayHovered: false,\n    clearTimer: undefined as number | undefined,\n    pointer: null as { x: number, y: number } | null,\n    dom: null as HTMLElement | null,\n    node: null as Node | null,\n    gutterShift: 0,\n  }).current\n  // The handle's content; its parent is the handle element the plugin positions (`handleWidth`).\n  const handleContent = useRef<HTMLSpanElement>(null)\n  const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0\n\n  const scheduleHoverClear = useCallback(() => {\n    clearTimeout(track.clearTimer)\n    track.clearTimer = window.setTimeout(() => {\n      if (!track.overlayHovered) setHoverTarget(null)\n    }, 200)\n  }, [track])\n\n  // The overlay is positioned inside the element that holds the editor content (`relative`); Tiptap's content component\n  // has moved the editor DOM into it by the time this effect runs.\n  useEffect(() => {\n    if (editor.isDestroyed) return\n    const dom = editor.view.dom\n    setHost(dom.isConnected ? dom.parentElement : null)\n    // Like the drag-handle plugin: a key pressed in the focused editor hides the actions.\n    const onKeydown = () => {\n      clearTimeout(track.clearTimer)\n      setHoverTarget(null)\n    }\n    // Pointer position for the targeting rules below. The plugin evaluates them in a frame callback after the\n    // mousemove, so this is the position they see.\n    const onMousemove = (event: MouseEvent) => {\n      track.pointer = { x: event.clientX, y: event.clientY }\n    }\n    dom.addEventListener('keydown', onKeydown)\n    dom.addEventListener('mousemove', onMousemove)\n    return () => {\n      clearTimeout(track.clearTimer)\n      dom.removeEventListener('keydown', onKeydown)\n      dom.removeEventListener('mousemove', onMousemove)\n      setHost(null)\n    }\n  }, [editor, track])\n\n  const onOverlayHover = useCallback((hovered: boolean) => {\n    track.overlayHovered = hovered\n    if (!hovered) scheduleHoverClear()\n  }, [track, scheduleHoverClear])\n\n  // The drag-handle plugin hides the handle on dragend but keeps its current target. A dropped\n  // nested node is the same node object, so hovering it again would not re-show the handle.\n  // The plugin's `hideDragHandle` meta clears the target.\n  const resetDragHandle = useCallback(() => {\n    if (editor.isDestroyed) return\n    editor.view.dispatch(editor.state.tr.setMeta('hideDragHandle', true).setMeta('addToHistory', false))\n  }, [editor])\n\n  // The plugin puts the handle's right edge on the target block's left edge (`gutterShiftOf`: list items move further\n  // left). The hover handle is hidden where the block has a handle of its own: the kind icon of a composite, or, with\n  // `blocks.dragHandle: 'always'`, the permanent handles. Hiding keeps its layout, which the targeting rules below measure.\n  const alwaysHandles = settings.blocks.dragHandle === 'always'\n  const hoverHandleHidden = alwaysHandles || targetHasKindIcon\n  const trackDragTarget = useCallback(({ node, pos }: { node: Node | null, pos: number }) => {\n    if (node) {\n      clearTimeout(track.clearTimer)\n      setHoverTarget({ node, pos })\n    }\n    else {\n      scheduleHoverClear()\n    }\n    const dom = node ? editor.view.nodeDOM(pos) : null\n    track.dom = dom instanceof HTMLElement ? dom : null\n    track.node = track.dom ? node : null\n    track.gutterShift = track.dom && track.node ? gutterShiftOf(track.node, track.dom) : 0\n    setTargetHasKindIcon(track.dom ? hasKindIcon(track.dom) : false)\n  }, [editor, track, scheduleHoverClear])\n\n  // The plugin re-registers when its configuration changes: both objects below are made once and read `track`.\n  const dragHandlePosition = useMemo<DragHandleProps['computePositionConfig']>(() => ({\n    // The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text\n    // line: `firstLineCenterShift` moves the handle's centre to that line's centre.\n    middleware: [\n      { name: 'gutterShift', fn: ({ x, y }) => ({ x: x - track.gutterShift, y }) },\n      {\n        name: 'firstLineCenter',\n        fn: ({ x, y, elements, rects }) => ({\n          x,\n          y: track.dom ? y + firstLineCenterShift(track.dom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y,\n        }),\n      },\n    ],\n  }), [track])\n\n  // Targeting among nested blocks. `compositeChrome`: hovering a composite's title, description or tags row targets the\n  // composite itself (a deduction of 1000, the base score, excludes a node). `reachTarget`: see `pointerReachesTarget`.\n  // `ownGutter`: a nested block is targeted only from its handle column rightwards; further left its ancestors are, so\n  // on any row the gutter is partitioned by the handle columns of the blocks nested there. The plugin's edge detection\n  // is off: its left strip is this partition, its top strip would hand the handle to the parent on the block's first\n  // line, where the handle sits.\n  const dragHandleNested = useMemo<DragHandleProps['nested']>(() => {\n    // Left of a block, ProseMirror resolves the pointer to the position before the block, so the plugin only considers\n    // the block's ancestors there: the target's own handle column would hand the handle to its parent before the pointer\n    // reaches it. This keeps the target while the pointer is between its handle and its box, over its whole height\n    // including the gaps to its neighbours, and in those gaps themselves (which resolve to the parent as well). The rule\n    // then excludes every candidate, and the plugin keeps its target when the detection yields none. Inside the target's\n    // own box the rule is off, so its descendants are still targeted.\n    const pointerReachesTarget = (): boolean => {\n      const { pointer, node, dom } = track\n      if (!pointer || !node || !dom?.isConnected) return false\n      const rect = dom.getBoundingClientRect()\n      const { x, y } = pointer\n      if (x < handleLeftOf(node, dom, handleWidth()) || x >= rect.right) return false\n      if (y < (laidOutSibling(dom, 'previous')?.bottom ?? rect.top)) return false\n      if (y >= (laidOutSibling(dom, 'next')?.top ?? rect.bottom)) return false\n      return x < rect.left || y < rect.top || y >= rect.bottom\n    }\n    return {\n      edgeDetection: 'none',\n      rules: [\n        { id: 'compositeChrome', evaluate: ({ node }) => isChromeNode(node) ? 1000 : 0 },\n        { id: 'reachTarget', evaluate: () => pointerReachesTarget() ? 1000 : 0 },\n        {\n          id: 'ownGutter',\n          evaluate: ({ node, pos, depth, view }) => {\n            const { pointer } = track\n            if (depth < 2 || !pointer) return 0\n            const dom = view.nodeDOM(pos)\n            return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handleWidth()) ? 1000 : 0\n          },\n        },\n      ],\n    }\n  }, [track])\n\n  return (\n    <>\n      {host && createPortal(\n        <>\n          <BlockActionsOverlay editor={editor} target={hoverTarget} host={host} actions={actions} onHover={onOverlayHover} />\n          {alwaysHandles && <BlockHandles editor={editor} host={host} />}\n        </>,\n        host,\n      )}\n      <DragHandle\n        editor={editor}\n        onElementDragEnd={resetDragHandle}\n        onNodeChange={trackDragTarget}\n        computePositionConfig={dragHandlePosition}\n        nested={dragHandleNested}\n        className={cn(\n          'flex size-6 cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground data-[dragging=true]:cursor-grabbing',\n          hoverHandleHidden && 'invisible! pointer-events-none!',\n        )}\n      >\n        <span ref={handleContent} className=\"contents\">\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </span>\n      </DragHandle>\n    </>\n  )\n}\n\n// Nearest sibling with a layout box (a composite's hidden description/tags rows have none).\nfunction laidOutSibling(dom: Element, side: 'previous' | 'next'): DOMRect | null {\n  for (let element = dom[`${side}ElementSibling`]; element; element = element[`${side}ElementSibling`]) {\n    const rect = element.getBoundingClientRect()\n    if (rect.height > 0) return rect\n  }\n  return null\n}\n"],"mappings":"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"}
+{"version":3,"file":"BlockUi.js","names":[],"sources":["../../../../src/features/block-ui/react/BlockUi.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { DragHandle, type DragHandleProps } from '@tiptap/extension-drag-handle-react'\nimport type { Node } from '@tiptap/pm/model'\nimport { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { type BlockTarget, editorEntryOf } from '../../../core'\nimport { isChromeNode } from '../../../core/schema'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { cn } from '../../../react/ui/utils'\nimport { firstLineCenterShift, gutterShiftOf, handleLeftOf, hasKindIcon } from '../handle-geometry'\nimport { actionSurfacesOf, sameBlock, selectedBlockOf } from '../block-actions'\nimport { BlockActionsOverlay } from './BlockActionsOverlay'\nimport { BlockHandles } from './BlockHandles'\n\n/**\n * Block UI of an editor: the drag handle on the left of the hovered block (hidden while the editor is read-only) and the\n * block actions (`BlockActionsOverlay`) at the editor's right edge. The actions are those the surface registered for\n * `editor` (features' block actions, then the host's), shown per `BlockUiOptions.actions`: on a hover bar for the block\n * the drag handle targets, on a persistent toolbar for the block holding the selection, both, or neither. When both\n * would show a bar on the same block, only the toolbar does. A block with a kind icon (a composite) gets no handle: its\n * icon drags it. With `blocks.dragHandle: 'always'` the hover handle is replaced by permanent handles on every eligible\n * block (`BlockHandles`). Mounted by the block-ui feature beside the editor.\n */\nexport function BlockUi({ editor }: { editor: Editor }) {\n  // Hover actions target the drag handle's block. The plugin drops its target when the pointer leaves the editor (also\n  // onto the overlay, which sits outside it) and on keydown; a short grace keeps the overlay while the pointer moves\n  // onto it, and typing hides it at once.\n  const [host, setHost] = useState<HTMLElement | null>(null)\n  const [hoverTarget, setHoverTarget] = useState<BlockTarget | null>(null)\n  const [targetHasKindIcon, setTargetHasKindIcon] = useState(false)\n  const { settings } = useEditorSettings()\n  // Read while rendering: the surface registers its entry after its overlays have mounted, and the overlay renders\n  // again once a block is hovered.\n  const actions = editorEntryOf(editor)?.blockActions ?? []\n  const surfaces = actionSurfacesOf(editor)\n\n  // The toolbar follows the selection: render on each transaction, but only while that surface exists (the options are\n  // read when the transaction happens, the entry being registered after this component mounted).\n  const [, rerender] = useReducer((count: number) => count + 1, 0)\n  useEffect(() => {\n    const onTransaction = () => { if (actionSurfacesOf(editor).toolbar) rerender() }\n    editor.on('transaction', onTransaction)\n    return () => { editor.off('transaction', onTransaction) }\n  }, [editor])\n  const selectedTarget = surfaces.toolbar ? selectedBlockOf(editor) : null\n  // One bar per block: the toolbar wins where the hover bar would sit on the same block.\n  const hoverBarTarget = hoverTarget && selectedTarget && sameBlock(editor, hoverTarget, selectedTarget) ? null : hoverTarget\n\n  // Everything the plugin callbacks and the targeting rules below read while the pointer moves: not render state.\n  const track = useRef({\n    overlayHovered: false,\n    clearTimer: undefined as number | undefined,\n    pointer: null as { x: number, y: number } | null,\n    dom: null as HTMLElement | null,\n    node: null as Node | null,\n    gutterShift: 0,\n  }).current\n  // The handle's content; its parent is the handle element the plugin positions (`handleWidth`).\n  const handleContent = useRef<HTMLSpanElement>(null)\n  const handleWidth = () => handleContent.current?.parentElement?.offsetWidth ?? 0\n\n  const scheduleHoverClear = useCallback(() => {\n    clearTimeout(track.clearTimer)\n    track.clearTimer = window.setTimeout(() => {\n      if (!track.overlayHovered) setHoverTarget(null)\n    }, 200)\n  }, [track])\n\n  // The overlay is positioned inside the element that holds the editor content (`relative`); Tiptap's content component\n  // has moved the editor DOM into it by the time this effect runs.\n  useEffect(() => {\n    if (editor.isDestroyed) return\n    const dom = editor.view.dom\n    setHost(dom.isConnected ? dom.parentElement : null)\n    // Like the drag-handle plugin: a key pressed in the focused editor hides the actions.\n    const onKeydown = () => {\n      clearTimeout(track.clearTimer)\n      setHoverTarget(null)\n    }\n    // Pointer position for the targeting rules below. The plugin evaluates them in a frame callback after the\n    // mousemove, so this is the position they see.\n    const onMousemove = (event: MouseEvent) => {\n      track.pointer = { x: event.clientX, y: event.clientY }\n    }\n    dom.addEventListener('keydown', onKeydown)\n    dom.addEventListener('mousemove', onMousemove)\n    return () => {\n      clearTimeout(track.clearTimer)\n      dom.removeEventListener('keydown', onKeydown)\n      dom.removeEventListener('mousemove', onMousemove)\n      setHost(null)\n    }\n  }, [editor, track])\n\n  const onOverlayHover = useCallback((hovered: boolean) => {\n    track.overlayHovered = hovered\n    if (!hovered) scheduleHoverClear()\n  }, [track, scheduleHoverClear])\n\n  // The drag-handle plugin hides the handle on dragend but keeps its current target. A dropped\n  // nested node is the same node object, so hovering it again would not re-show the handle.\n  // The plugin's `hideDragHandle` meta clears the target.\n  const resetDragHandle = useCallback(() => {\n    if (editor.isDestroyed) return\n    editor.view.dispatch(editor.state.tr.setMeta('hideDragHandle', true).setMeta('addToHistory', false))\n  }, [editor])\n\n  // The plugin puts the handle's right edge on the target block's left edge (`gutterShiftOf`: list items move further\n  // left). The hover handle is hidden where the block has a handle of its own: the kind icon of a composite, or, with\n  // `blocks.dragHandle: 'always'`, the permanent handles. Hiding keeps its layout, which the targeting rules below measure.\n  const alwaysHandles = settings.blocks.dragHandle === 'always'\n  const hoverHandleHidden = alwaysHandles || targetHasKindIcon\n  const trackDragTarget = useCallback(({ node, pos }: { node: Node | null, pos: number }) => {\n    if (node) {\n      clearTimeout(track.clearTimer)\n      setHoverTarget({ node, pos })\n    }\n    else {\n      scheduleHoverClear()\n    }\n    const dom = node ? editor.view.nodeDOM(pos) : null\n    track.dom = dom instanceof HTMLElement ? dom : null\n    track.node = track.dom ? node : null\n    track.gutterShift = track.dom && track.node ? gutterShiftOf(track.node, track.dom) : 0\n    setTargetHasKindIcon(track.dom ? hasKindIcon(track.dom) : false)\n  }, [editor, track, scheduleHoverClear])\n\n  // The plugin re-registers when its configuration changes: both objects below are made once and read `track`.\n  const dragHandlePosition = useMemo<DragHandleProps['computePositionConfig']>(() => ({\n    // The plugin aligns the handle's top with the block's top, which sits above the middle of the block's first text\n    // line: `firstLineCenterShift` moves the handle's centre to that line's centre.\n    middleware: [\n      { name: 'gutterShift', fn: ({ x, y }) => ({ x: x - track.gutterShift, y }) },\n      {\n        name: 'firstLineCenter',\n        fn: ({ x, y, elements, rects }) => ({\n          x,\n          y: track.dom ? y + firstLineCenterShift(track.dom, elements.reference.getBoundingClientRect().top, rects.floating.height) : y,\n        }),\n      },\n    ],\n  }), [track])\n\n  // Targeting among nested blocks. `compositeChrome`: hovering a composite's title, description or tags row targets the\n  // composite itself (a deduction of 1000, the base score, excludes a node). `reachTarget`: see `pointerReachesTarget`.\n  // `ownGutter`: a nested block is targeted only from its handle column rightwards; further left its ancestors are, so\n  // on any row the gutter is partitioned by the handle columns of the blocks nested there. The plugin's edge detection\n  // is off: its left strip is this partition, its top strip would hand the handle to the parent on the block's first\n  // line, where the handle sits.\n  const dragHandleNested = useMemo<DragHandleProps['nested']>(() => {\n    // Left of a block, ProseMirror resolves the pointer to the position before the block, so the plugin only considers\n    // the block's ancestors there: the target's own handle column would hand the handle to its parent before the pointer\n    // reaches it. This keeps the target while the pointer is between its handle and its box, over its whole height\n    // including the gaps to its neighbours, and in those gaps themselves (which resolve to the parent as well). The rule\n    // then excludes every candidate, and the plugin keeps its target when the detection yields none. Inside the target's\n    // own box the rule is off, so its descendants are still targeted.\n    const pointerReachesTarget = (): boolean => {\n      const { pointer, node, dom } = track\n      if (!pointer || !node || !dom?.isConnected) return false\n      const rect = dom.getBoundingClientRect()\n      const { x, y } = pointer\n      if (x < handleLeftOf(node, dom, handleWidth()) || x >= rect.right) return false\n      if (y < (laidOutSibling(dom, 'previous')?.bottom ?? rect.top)) return false\n      if (y >= (laidOutSibling(dom, 'next')?.top ?? rect.bottom)) return false\n      return x < rect.left || y < rect.top || y >= rect.bottom\n    }\n    return {\n      edgeDetection: 'none',\n      rules: [\n        { id: 'compositeChrome', evaluate: ({ node }) => isChromeNode(node) ? 1000 : 0 },\n        { id: 'reachTarget', evaluate: () => pointerReachesTarget() ? 1000 : 0 },\n        {\n          id: 'ownGutter',\n          evaluate: ({ node, pos, depth, view }) => {\n            const { pointer } = track\n            if (depth < 2 || !pointer) return 0\n            const dom = view.nodeDOM(pos)\n            return dom instanceof HTMLElement && pointer.x < handleLeftOf(node, dom, handleWidth()) ? 1000 : 0\n          },\n        },\n      ],\n    }\n  }, [track])\n\n  return (\n    <>\n      {host && createPortal(\n        <>\n          {surfaces.hover && (\n            <BlockActionsOverlay editor={editor} target={hoverBarTarget} host={host} actions={actions} surface=\"hover\" onHover={onOverlayHover} />\n          )}\n          {surfaces.toolbar && (\n            <BlockActionsOverlay editor={editor} target={selectedTarget} host={host} actions={actions} surface=\"toolbar\" persistent />\n          )}\n          {alwaysHandles && <BlockHandles editor={editor} host={host} />}\n        </>,\n        host,\n      )}\n      <DragHandle\n        editor={editor}\n        onElementDragEnd={resetDragHandle}\n        onNodeChange={trackDragTarget}\n        computePositionConfig={dragHandlePosition}\n        nested={dragHandleNested}\n        className={cn(\n          'flex size-6 cursor-grab items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground data-[dragging=true]:cursor-grabbing',\n          hoverHandleHidden && 'invisible! pointer-events-none!',\n        )}\n      >\n        <span ref={handleContent} className=\"contents\">\n          <Icon name=\"i-lucide-grip-vertical\" />\n        </span>\n      </DragHandle>\n    </>\n  )\n}\n\n// Nearest sibling with a layout box (a composite's hidden description/tags rows have none).\nfunction laidOutSibling(dom: Element, side: 'previous' | 'next'): DOMRect | null {\n  for (let element = dom[`${side}ElementSibling`]; element; element = element[`${side}ElementSibling`]) {\n    const rect = element.getBoundingClientRect()\n    if (rect.height > 0) return rect\n  }\n  return null\n}\n"],"mappings":"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"}

package/dist/features/block-ui/react.d.ts

@@ -1,11 +1,13 @@
+import { BlockUiOptions } from "../../core/extension-points.js";
+import "../../core/index.js";
 import { ReactFeature } from "../../react/EditorSurface.js";
 import "../../react/index.js";
 import { BlockActionsOverlay } from "./react/BlockActionsOverlay.js";
 import { BlockHandles } from "./react/BlockHandles.js";
 import { BlockUi } from "./react/BlockUi.js";
 //#region src/features/block-ui/react.d.ts
-/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and hover actions with shadcn menus. */
-export declare function blockUiFeature(): ReactFeature;
+/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`) with shadcn menus. */
+export declare function blockUiFeature(options?: BlockUiOptions): ReactFeature;
 //#endregion
 export { BlockActionsOverlay, BlockHandles, BlockUi };
 //# sourceMappingURL=react.d.ts.map

package/dist/features/block-ui/react.js

@@ -3,9 +3,9 @@ import { BlockActionsOverlay } from "./react/BlockActionsOverlay.js";
 import { BlockHandles } from "./react/BlockHandles.js";
 import { BlockUi } from "./react/BlockUi.js";
 //#region src/features/block-ui/react.ts
-/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and hover actions with shadcn menus. */
-function blockUiFeature() {
-	return blockUiFeatureCore({ overlay: BlockUi });
+/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`) with shadcn menus. */
+function blockUiFeature(options) {
+	return blockUiFeatureCore({ overlay: BlockUi }, options);
 }
 //#endregion
 export { BlockActionsOverlay, BlockHandles, BlockUi, blockUiFeature };

package/dist/features/block-ui/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../../../src/features/block-ui/react.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { ComponentType } from 'react'\nimport type { ReactFeature } from '../../react'\nimport { blockUiFeatureCore } from './feature'\nimport { BlockUi } from './react/BlockUi'\n\nexport { BlockActionsOverlay } from './react/BlockActionsOverlay'\nexport { BlockHandles } from './react/BlockHandles'\nexport { BlockUi } from './react/BlockUi'\n\n/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and hover actions with shadcn menus. */\nexport function blockUiFeature(): ReactFeature {\n  return blockUiFeatureCore<ComponentType<{ editor: Editor }>>({ overlay: BlockUi })\n}\n"],"mappings":";;;;;;AAWA,SAAgB,iBAA+B;CAC7C,OAAO,mBAAsD,EAAE,SAAS,QAAQ,CAAC;AACnF"}
+{"version":3,"file":"react.js","names":[],"sources":["../../../src/features/block-ui/react.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport type { ComponentType } from 'react'\nimport type { BlockUiOptions } from '../../core'\nimport type { ReactFeature } from '../../react'\nimport { blockUiFeatureCore } from './feature'\nimport { BlockUi } from './react/BlockUi'\n\nexport { BlockActionsOverlay } from './react/BlockActionsOverlay'\nexport { BlockHandles } from './react/BlockHandles'\nexport { BlockUi } from './react/BlockUi'\n\n/** The React block-ui feature: the drag handle (`@tiptap/extension-drag-handle-react`), permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`) with shadcn menus. */\nexport function blockUiFeature(options?: BlockUiOptions): ReactFeature {\n  return blockUiFeatureCore<ComponentType<{ editor: Editor }>>({ overlay: BlockUi }, options)\n}\n"],"mappings":";;;;;;AAYA,SAAgB,eAAe,SAAwC;CACrE,OAAO,mBAAsD,EAAE,SAAS,QAAQ,GAAG,OAAO;AAC5F"}

package/dist/features/block-ui/vue.d.ts

@@ -1,9 +1,11 @@
+import { BlockUiOptions } from "../../core/extension-points.js";
+import "../../core/index.js";
 import { VueFeature } from "../../vue/index.js";
 import _default from "./components/BlockActionsOverlay.vue.js";
 import _default$1 from "./components/BlockUi.vue.js";
 //#region src/features/block-ui/vue.d.ts
-/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and hover actions. */
-export declare function blockUiFeature(): VueFeature;
+/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`). */
+export declare function blockUiFeature(options?: BlockUiOptions): VueFeature;
 //#endregion
 export { _default as BlockActionsOverlay, _default$1 as BlockUi };
 //# sourceMappingURL=vue.d.ts.map

package/dist/features/block-ui/vue.js

@@ -2,9 +2,9 @@ import { blockUiFeatureCore } from "./feature.js";
 import _sfc_main from "./components/BlockActionsOverlay.js";
 import _sfc_main$1 from "./components/BlockUi.js";
 //#region src/features/block-ui/vue.ts
-/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and hover actions. */
-function blockUiFeature() {
-	return blockUiFeatureCore({ overlay: _sfc_main$1 });
+/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`). */
+function blockUiFeature(options) {
+	return blockUiFeatureCore({ overlay: _sfc_main$1 }, options);
 }
 //#endregion
 export { _sfc_main as BlockActionsOverlay, _sfc_main$1 as BlockUi, blockUiFeature };

package/dist/features/block-ui/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","names":["BlockUi"],"sources":["../../../src/features/block-ui/vue.ts"],"sourcesContent":["import type { Component } from 'vue'\nimport type { VueFeature } from '../../vue'\nimport BlockUi from './components/BlockUi.vue'\nimport { blockUiFeatureCore } from './feature'\n\nexport { default as BlockActionsOverlay } from './components/BlockActionsOverlay.vue'\nexport { default as BlockUi } from './components/BlockUi.vue'\n\n/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and hover actions. */\nexport function blockUiFeature(): VueFeature {\n  return blockUiFeatureCore<Component>({ overlay: BlockUi })\n}\n"],"mappings":";;;;;AASA,SAAgB,iBAA6B;CAC3C,OAAO,mBAA8B,EAAE,SAASA,YAAQ,CAAC;AAC3D"}
+{"version":3,"file":"vue.js","names":["BlockUi"],"sources":["../../../src/features/block-ui/vue.ts"],"sourcesContent":["import type { Component } from 'vue'\nimport type { BlockUiOptions } from '../../core'\nimport type { VueFeature } from '../../vue'\nimport BlockUi from './components/BlockUi.vue'\nimport { blockUiFeatureCore } from './feature'\n\nexport { default as BlockActionsOverlay } from './components/BlockActionsOverlay.vue'\nexport { default as BlockUi } from './components/BlockUi.vue'\n\n/** The Vue block-ui feature: the Nuxt UI drag handle, permanent handles and the block actions (hover bar and/or selected-block toolbar, per `options.actions`). */\nexport function blockUiFeature(options?: BlockUiOptions): VueFeature {\n  return blockUiFeatureCore<Component>({ overlay: BlockUi }, options)\n}\n"],"mappings":";;;;;AAUA,SAAgB,eAAe,SAAsC;CACnE,OAAO,mBAA8B,EAAE,SAASA,YAAQ,GAAG,OAAO;AACpE"}

package/dist/features/composites/baskets.d.ts

@@ -0,0 +1,27 @@
+import { Translate } from "../../i18n/index.js";
+import { Node } from "@tiptap/pm/model";
+//#region src/features/composites/baskets.d.ts
+/** A colour basket a Baustein can be put into; the host app defines the set (`compositeFeature({ baskets })`). */
+export interface Basket {
+  id: string;
+  label: string;
+  /** CSS colour; the chrome dot and the row stripe use it. */
+  color: string;
+}
+/** Ids of the built-in baskets. */
+export declare const BASKET_IDS: readonly ["red", "orange", "yellow", "green", "blue"];
+/** The built-in baskets in the language of `t`; their colours are the `--sk-basket-<id>` CSS variables, which hosts override. Memoized per translator. */
+export declare function defaultBaskets(t: Translate): readonly Basket[];
+/** What carries a composite's meta: the node itself or a row read from it (`CompositeRow`). */
+type MetaSource = Node | {
+  meta: Record<string, unknown>;
+};
+/** Id of the basket `source` (a composite node or its row) is in, or null. */
+export declare function basketOf(source: MetaSource): string | null;
+/** Whether the title of `source` (a composite node or its row) is hidden. */
+export declare function titleHiddenOf(source: MetaSource): boolean;
+/** The basket with id `id` among `baskets`; `undefined` for no id or an id the set does not offer. */
+export declare function basketById(baskets: readonly Basket[], id: string | null | undefined): Basket | undefined;
+//#endregion
+export {};
+//# sourceMappingURL=baskets.d.ts.map

package/dist/features/composites/baskets.js

@@ -0,0 +1,46 @@
+import { createTranslator } from "../../i18n/index.js";
+import { BASKET_KEY, TITLE_HIDDEN_KEY } from "./meta-keys.js";
+//#region src/features/composites/baskets.ts
+/** Ids of the built-in baskets. */
+const BASKET_IDS = [
+	"red",
+	"orange",
+	"yellow",
+	"green",
+	"blue"
+];
+/** The built-in baskets in the language of `t`; their colours are the `--sk-basket-<id>` CSS variables, which hosts override. Memoized per translator. */
+function defaultBaskets(t) {
+	let baskets = DEFAULT_BASKETS.get(t);
+	if (!baskets) DEFAULT_BASKETS.set(t, baskets = BASKET_IDS.map((id) => ({
+		id,
+		label: t(`composites.basket.${id}`),
+		color: `var(--sk-basket-${id})`
+	})));
+	return baskets;
+}
+const DEFAULT_BASKETS = /* @__PURE__ */ new WeakMap();
+/** The built-in baskets in the default language, for server-side and context-free code (`Composite`'s default option, an editor without a context). */
+const fallbackBaskets = () => defaultBaskets(DEFAULT_TRANSLATE);
+const DEFAULT_TRANSLATE = createTranslator();
+function metaOf(source) {
+	const meta = "attrs" in source ? source.attrs.meta : source.meta;
+	return meta && typeof meta === "object" ? meta : {};
+}
+/** Id of the basket `source` (a composite node or its row) is in, or null. */
+function basketOf(source) {
+	const basket = metaOf(source)[BASKET_KEY];
+	return typeof basket === "string" && basket ? basket : null;
+}
+/** Whether the title of `source` (a composite node or its row) is hidden. */
+function titleHiddenOf(source) {
+	return metaOf(source)[TITLE_HIDDEN_KEY] === true;
+}
+/** The basket with id `id` among `baskets`; `undefined` for no id or an id the set does not offer. */
+function basketById(baskets, id) {
+	return id ? baskets.find((basket) => basket.id === id) : void 0;
+}
+//#endregion
+export { BASKET_IDS, basketById, basketOf, defaultBaskets, fallbackBaskets, titleHiddenOf };
+
+//# sourceMappingURL=baskets.js.map

package/dist/features/composites/baskets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baskets.js","names":[],"sources":["../../../src/features/composites/baskets.ts"],"sourcesContent":["// Vue-free and server-importable: the colour baskets a Baustein can be put into, and how a node carries its basket and its hidden title.\nimport type { Node as PMNode } from '@tiptap/pm/model'\nimport { createTranslator, type Translate } from '../../i18n'\nimport { BASKET_KEY, TITLE_HIDDEN_KEY } from './meta-keys'\n\n/** A colour basket a Baustein can be put into; the host app defines the set (`compositeFeature({ baskets })`). */\nexport interface Basket {\n  id: string\n  label: string\n  /** CSS colour; the chrome dot and the row stripe use it. */\n  color: string\n}\n\n/** Ids of the built-in baskets. */\nexport const BASKET_IDS = ['red', 'orange', 'yellow', 'green', 'blue'] as const\n\n/** The built-in baskets in the language of `t`; their colours are the `--sk-basket-<id>` CSS variables, which hosts override. Memoized per translator. */\nexport function defaultBaskets(t: Translate): readonly Basket[] {\n  let baskets = DEFAULT_BASKETS.get(t)\n  if (!baskets) DEFAULT_BASKETS.set(t, baskets = BASKET_IDS.map(id => ({ id, label: t(`composites.basket.${id}`), color: `var(--sk-basket-${id})` })))\n  return baskets\n}\n\nconst DEFAULT_BASKETS = new WeakMap<Translate, readonly Basket[]>()\n\n/** The built-in baskets in the default language, for server-side and context-free code (`Composite`'s default option, an editor without a context). */\nexport const fallbackBaskets = (): readonly Basket[] => defaultBaskets(DEFAULT_TRANSLATE)\n\nconst DEFAULT_TRANSLATE = createTranslator()\n\n/** What carries a composite's meta: the node itself or a row read from it (`CompositeRow`). */\ntype MetaSource = PMNode | { meta: Record<string, unknown> }\n\nfunction metaOf(source: MetaSource): Record<string, unknown> {\n  const meta: unknown = 'attrs' in source ? source.attrs.meta : source.meta\n  return meta && typeof meta === 'object' ? meta as Record<string, unknown> : {}\n}\n\n/** Id of the basket `source` (a composite node or its row) is in, or null. */\nexport function basketOf(source: MetaSource): string | null {\n  const basket = metaOf(source)[BASKET_KEY]\n  return typeof basket === 'string' && basket ? basket : null\n}\n\n/** Whether the title of `source` (a composite node or its row) is hidden. */\nexport function titleHiddenOf(source: MetaSource): boolean {\n  return metaOf(source)[TITLE_HIDDEN_KEY] === true\n}\n\n/** The basket with id `id` among `baskets`; `undefined` for no id or an id the set does not offer. */\nexport function basketById(baskets: readonly Basket[], id: string | null | undefined): Basket | undefined {\n  return id ? baskets.find(basket => basket.id === id) : undefined\n}\n"],"mappings":";;;;AAcA,MAAa,aAAa;CAAC;CAAO;CAAU;CAAU;CAAS;AAAM;;AAGrE,SAAgB,eAAe,GAAiC;CAC9D,IAAI,UAAU,gBAAgB,IAAI,CAAC;CACnC,IAAI,CAAC,SAAS,gBAAgB,IAAI,GAAG,UAAU,WAAW,KAAI,QAAO;EAAE;EAAI,OAAO,EAAE,qBAAqB,IAAI;EAAG,OAAO,mBAAmB,GAAG;CAAG,EAAE,CAAC;CACnJ,OAAO;AACT;AAEA,MAAM,kCAAkB,IAAI,QAAsC;;AAGlE,MAAa,wBAA2C,eAAe,iBAAiB;AAExF,MAAM,oBAAoB,iBAAiB;AAK3C,SAAS,OAAO,QAA6C;CAC3D,MAAM,OAAgB,WAAW,SAAS,OAAO,MAAM,OAAO,OAAO;CACrE,OAAO,QAAQ,OAAO,SAAS,WAAW,OAAkC,CAAC;AAC/E;;AAGA,SAAgB,SAAS,QAAmC;CAC1D,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC;CAC9B,OAAO,OAAO,WAAW,YAAY,SAAS,SAAS;AACzD;;AAGA,SAAgB,cAAc,QAA6B;CACzD,OAAO,OAAO,MAAM,CAAC,CAAC,sBAAsB;AAC9C;;AAGA,SAAgB,WAAW,SAA4B,IAAmD;CACxG,OAAO,KAAK,QAAQ,MAAK,WAAU,OAAO,OAAO,EAAE,IAAI,KAAA;AACzD"}

package/dist/features/composites/components/CompositeBasketMenu.js

@@ -0,0 +1,97 @@
+import { basketOf } from "../baskets.js";
+import { compositeBasketsOf } from "../nodes.js";
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { compositeOfRow } from "../rows.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, withCtx } from "vue";
+//#region src/features/composites/components/CompositeBasketMenu.vue
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-checked", "onClick"];
+const _hoisted_3 = { class: "truncate" };
+const _hoisted_4 = ["aria-checked"];
+const _hoisted_5 = { class: "truncate" };
+/**
+* Basket choice of a Baustein: the default slot (a button) opens a list of the editor's baskets (a dot in the basket's
+* colour and its label) and „Kein Korb“. The menu is a popover, not a dropdown menu: a dropdown item cannot show a dot in
+* an arbitrary CSS colour.
+*/
+const option = "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-[var(--sk-fg)] transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]";
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CompositeBasketMenu",
+	props: {
+		editor: {},
+		row: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { Icon: UIcon, Popover: UPopover } = useUiKit();
+		const { t } = useEditorI18n();
+		const open = shallowRef(false);
+		function choose(basket) {
+			open.value = false;
+			const found = compositeOfRow(props.editor.state.doc, props.row);
+			if (found) props.editor.commands.setCompositeBasket(basket, found.pos);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UPopover), {
+				open: open.value,
+				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+				content: {
+					side: "bottom",
+					align: "start",
+					sideOffset: 4,
+					onCloseAutoFocus: (event) => event.preventDefault()
+				},
+				ui: { content: "w-40 p-1" }
+			}, {
+				content: withCtx(() => [createElementVNode("div", {
+					role: "menu",
+					"aria-label": unref(t)("composites.basket.label")
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(compositeBasketsOf)(__props.editor), (basket) => {
+					return openBlock(), createElementBlock("button", {
+						key: basket.id,
+						type: "button",
+						role: "menuitemradio",
+						"aria-checked": unref(basketOf)(props.row) === basket.id,
+						class: normalizeClass(option),
+						onClick: ($event) => choose(basket.id)
+					}, [
+						createElementVNode("span", {
+							class: "size-2.5 shrink-0 rounded-full",
+							style: normalizeStyle({ backgroundColor: basket.color })
+						}, null, 4),
+						createElementVNode("span", _hoisted_3, toDisplayString(basket.label), 1),
+						unref(basketOf)(props.row) === basket.id ? (openBlock(), createBlock(unref(UIcon), {
+							key: 0,
+							name: "i-lucide-check",
+							class: "ml-auto size-3.5 shrink-0"
+						})) : createCommentVNode("v-if", true)
+					], 8, _hoisted_2);
+				}), 128)), createElementVNode("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": unref(basketOf)(props.row) === null,
+					class: normalizeClass(option),
+					onClick: _cache[0] || (_cache[0] = ($event) => choose(null))
+				}, [
+					createVNode(unref(UIcon), {
+						name: "i-lucide-circle-dashed",
+						class: "size-3 shrink-0 text-[var(--sk-muted)]"
+					}),
+					createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("composites.basket.none")), 1),
+					unref(basketOf)(props.row) === null ? (openBlock(), createBlock(unref(UIcon), {
+						key: 0,
+						name: "i-lucide-check",
+						class: "ml-auto size-3.5 shrink-0"
+					})) : createCommentVNode("v-if", true)
+				], 8, _hoisted_4)], 8, _hoisted_1)]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["open", "content"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CompositeBasketMenu.js.map

package/dist/features/composites/components/CompositeBasketMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeBasketMenu.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle","_toDisplayString","_createCommentVNode","_createVNode","_renderSlot"],"sources":["../../../../src/features/composites/components/CompositeBasketMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/core'\nimport { shallowRef } from 'vue'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { basketOf } from '../baskets'\nimport { compositeBasketsOf } from '../nodes'\nimport { compositeOfRow, type CompositeRow } from '../rows'\n\n/**\n * Basket choice of a Baustein: the default slot (a button) opens a list of the editor's baskets (a dot in the basket's\n * colour and its label) and „Kein Korb“. The menu is a popover, not a dropdown menu: a dropdown item cannot show a dot in\n * an arbitrary CSS colour.\n */\nconst props = defineProps<{ editor: Editor, row: CompositeRow }>()\n\nconst { Icon: UIcon, Popover: UPopover } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst open = shallowRef(false)\n\n\nfunction choose(basket: string | null) {\n  open.value = false\n  const found = compositeOfRow(props.editor.state.doc, props.row)\n  if (found) props.editor.commands.setCompositeBasket(basket, found.pos)\n}\n\nconst option = 'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-[var(--sk-fg)] transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]'\n</script>\n\n<template>\n  <UPopover\n    v-model:open=\"open\"\n    :content=\"{ side: 'bottom', align: 'start', sideOffset: 4, onCloseAutoFocus: (event: Event) => event.preventDefault() }\"\n    :ui=\"{ content: 'w-40 p-1' }\"\n  >\n    <slot />\n    <template #content>\n      <div role=\"menu\" :aria-label=\"t('composites.basket.label')\">\n        <button\n          v-for=\"basket in compositeBasketsOf(editor)\"\n          :key=\"basket.id\"\n          type=\"button\"\n          role=\"menuitemradio\"\n          :aria-checked=\"basketOf(props.row) === basket.id\"\n          :class=\"option\"\n          @click=\"choose(basket.id)\"\n        >\n          <span class=\"size-2.5 shrink-0 rounded-full\" :style=\"{ backgroundColor: basket.color }\" />\n          <span class=\"truncate\">{{ basket.label }}</span>\n          <UIcon v-if=\"basketOf(props.row) === basket.id\" name=\"i-lucide-check\" class=\"ml-auto size-3.5 shrink-0\" />\n        </button>\n        <button type=\"button\" role=\"menuitemradio\" :aria-checked=\"basketOf(props.row) === null\" :class=\"option\" @click=\"choose(null)\">\n          <UIcon name=\"i-lucide-circle-dashed\" class=\"size-3 shrink-0 text-[var(--sk-muted)]\" />\n          <span class=\"truncate\">{{ t('composites.basket.none') }}</span>\n          <UIcon v-if=\"basketOf(props.row) === null\" name=\"i-lucide-check\" class=\"ml-auto size-3.5 shrink-0\" />\n        </button>\n      </div>\n    </template>\n  </UPopover>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,SAAS;;;;;;;;EAdf,MAAM,QAAQ;EAEd,MAAM,EAAE,MAAM,OAAO,SAAS,aAAa,SAAS;EACpD,MAAM,EAAE,MAAM,cAAc;EAE5B,MAAM,OAAO,WAAW,KAAK;EAG7B,SAAS,OAAO,QAAuB;GACrC,KAAK,QAAQ;GACb,MAAM,QAAQ,eAAe,MAAM,OAAO,MAAM,KAAK,MAAM,GAAG;GAC9D,IAAI,OAAO,MAAM,OAAO,SAAS,mBAAmB,QAAQ,MAAM,GAAG;EACvE;;GAME,OAAAA,UAAA,GAAAC,YA4BWC,MAAA,QAAA,GAAA;IA3BD,MAAM,KAAA;IAAA,iBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAI,QAAA;IACjB,SAAO;KAAA,MAAA;KAAA,OAAA;KAAA,YAAA;KAAA,mBAAsE,UAAiB,MAAM,eAAc;IAAA;IAClH,IAAI,EAAA,SAAA,WAAA;;IAGM,SAAOC,cAoBV,CAnBNC,mBAmBM,OAAA;KAnBD,MAAK;KAAQ,cAAYF,MAAA,CAAA,CAAC,CAAA,yBAAA;IAC7B,GAAA,EAAAF,UAAA,IAAA,GAAAK,mBAYSC,UAAA,MAAAC,WAXUL,MAAA,kBAAA,CAAkB,CAAC,QAAA,MAAM,IAAnC,WAAM;KADf,OAAAF,UAAA,GAAAK,mBAYS,UAAA;MAVN,KAAK,OAAO;MACb,MAAK;MACL,MAAK;MACJ,gBAAcH,MAAA,QAAA,CAAQ,CAAC,MAAM,GAAG,MAAM,OAAO;MAC7C,OAAKM,eAAE,MAAM;MACb,UAAK,WAAE,OAAO,OAAO,EAAE;;MAExBJ,mBAA0F,QAAA;OAApF,OAAM;OAAkC,OAAKK,eAAA,EAAA,iBAAqB,OAAO,MAAK,CAAA;;MACpFL,mBAAgD,QAAhD,YAAgDM,gBAAtB,OAAO,KAAK,GAAA,CAAA;MACzBR,MAAA,QAAA,CAAQ,CAAC,MAAM,GAAG,MAAM,OAAO,MAA5CF,UAAA,GAAAC,YAA0GC,MAAA,KAAA,GAAA;;OAA1D,MAAK;OAAiB,OAAM;;;IAE9E,CAAA,GAAA,GAAA,IAAAE,mBAIS,UAAA;KAJD,MAAK;KAAS,MAAK;KAAiB,gBAAcF,MAAA,QAAA,CAAQ,CAAC,MAAM,GAAG,MAAA;KAAa,OAAKM,eAAE,MAAM;KAAG,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM,IAAA;;KACpHI,YAAsFV,MAAA,KAAA,GAAA;MAA/E,MAAK;MAAyB,OAAM;;KAC3CE,mBAA+D,QAA/D,YAA+DM,gBAArCR,MAAA,CAAA,CAAC,CAAA,wBAAA,CAAA,GAAA,CAAA;KACdA,MAAA,QAAA,CAAQ,CAAC,MAAM,GAAG,MAAA,QAA/BF,UAAA,GAAAC,YAAqGC,MAAA,KAAA,GAAA;;MAA1D,MAAK;MAAiB,OAAM;;;IAnB7E,SAAAC,cAAQ,CAARU,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/features/composites/components/CompositeChrome.js

@@ -1,4 +1,6 @@
 import { startBlockDrag } from "../../../core/block-drag.js";
+import { basketById, basketOf, titleHiddenOf } from "../baskets.js";
+import { compositeBasketsOf } from "../nodes.js";
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorSettings } from "../../../vue/settings.js";
 import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
@@ -9,9 +11,10 @@ import { rowStatus } from "../meta-display.js";
 import { useStoreRef } from "../../../vue/store-ref.js";
 import { useCompositeAnchors } from "../use-composite-anchors.js";
 import { useCompositeRows } from "../use-composite-rows.js";
-import _sfc_main$1 from "./CompositeDetails.js";
-import _sfc_main$2 from "./CompositeStatusMenu.js";
-import _sfc_main$3 from "./CompositeTagsEditor.js";
+import _sfc_main$1 from "./CompositeBasketMenu.js";
+import _sfc_main$2 from "./CompositeDetails.js";
+import _sfc_main$3 from "./CompositeStatusMenu.js";
+import _sfc_main$4 from "./CompositeTagsEditor.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, shallowRef, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
 //#region src/features/composites/components/CompositeChrome.vue
 const _hoisted_1 = { class: "absolute left-0 top-0 h-0 w-0" };
@@ -22,17 +25,24 @@ const _hoisted_2 = [
 	"onDragstart"
 ];
 const _hoisted_3 = ["onMouseenter"];
-const _hoisted_4 = [
+const _hoisted_4 = ["aria-label", "title"];
+const _hoisted_5 = [
+	"aria-label",
+	"title",
+	"onClick"
+];
+const _hoisted_6 = ["title"];
+const _hoisted_7 = [
 	"aria-expanded",
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_5 = ["aria-label"];
-const _hoisted_6 = { class: "truncate" };
-const _hoisted_7 = ["aria-label", "onClick"];
-const _hoisted_8 = ["aria-label", "title"];
-const _hoisted_9 = { class: "w-64 p-3" };
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = { class: "truncate" };
+const _hoisted_10 = ["aria-label", "onClick"];
+const _hoisted_11 = ["aria-label", "title"];
+const _hoisted_12 = { class: "w-64 p-3" };
 /**
 * Chrome of every composite, laid over the editor (mounted by the composites feature): on the title line the status
 * chip and one chip per tag (with a `+` chip to add tags), and on the front the kind icon. The icon is a button that
@@ -102,7 +112,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		/** Chips start right after the title's last character and run on to the editor's right edge. */
 		const expanded = useStoreRef(() => props.editor.storage.composite.expanded);
+		const revealedTitles = useStoreRef(() => props.editor.storage.composite.revealedTitles);
 		const placed = computed(() => {
+			const baskets = compositeBasketsOf(props.editor);
 			let hiddenUntil = -1;
 			return rows.value.flatMap((row) => {
 				if (row.pos < hiddenUntil) return [];
@@ -111,19 +123,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (!open) hiddenUntil = row.end;
 				const anchor = anchors.value.get(row.key);
 				if (!anchor) return [];
-				const left = anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
+				const titleHidden = titleHiddenOf(row);
+				const inStrip = titleHidden && !(row.id && revealedTitles.value.has(row.id)) && anchor.toggleSize > 0;
+				const left = inStrip ? anchor.toggleLeft + anchor.toggleSize + 6 : anchor.lineEnd + (anchor.titleEmpty ? 116 : 12);
 				return [{
 					row,
 					anchor,
 					left,
-					top: anchor.lastCenter - ROW_HEIGHT / 2,
+					top: (inStrip ? anchor.toggleTop + anchor.toggleSize / 2 : anchor.lastCenter) - ROW_HEIGHT / 2,
 					width: Math.max((frame.value?.right ?? anchor.right) - left, 120),
 					status: rowStatus(row, t),
 					derived: derived && {
 						stale: derived.stale,
 						open,
 						toggleable: !!row.id
-					}
+					},
+					basket: basketById(baskets, basketOf(row)) ?? null,
+					titleHidden
 				}];
 			});
 		});
@@ -133,6 +149,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function removeTag(row, tag) {
 			setCompositeTags(props.editor, row, row.tags.filter((candidate) => candidate !== tag));
 		}
+		function toggleTitleHidden(row) {
+			const found = compositeOfRow(props.editor.state.doc, row);
+			if (found) props.editor.commands.setCompositeTitleHidden(!titleHiddenOf(row), found.pos);
+		}
 		const chipButton = `${chip} transition-colors duration-150 hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--sk-primary)]`;
 		/** Scale and fade in from the icon (`transform-origin` is Reka's), a bit longer than Nuxt UI's default; `composites.css` defines the keyframes and the reduced-motion override. */
 		const detailsPopoverUi = { content: "composite-popover data-[state=open]:animate-[composite-pop-in_160ms_var(--ease-out)] data-[state=closed]:animate-[composite-pop-out_120ms_var(--ease-out)]" };
@@ -150,7 +170,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					},
 					ui: detailsPopoverUi
 				}, {
-					content: withCtx(() => [createVNode(_sfc_main$1, {
+					content: withCtx(() => [createVNode(_sfc_main$2, {
 						editor: __props.editor,
 						row: item.row,
 						editable: editable.value
@@ -184,7 +204,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						class: "size-3.5"
 					}, null, 8, ["name"]))], 46, _hoisted_2)]),
 					_: 2
-				}, 1024)) : createCommentVNode("v-if", true), item.status || item.derived || item.row.tagsVisible && (item.row.tags.length || editable.value) ? (openBlock(), createElementBlock("div", {
+				}, 1024)) : createCommentVNode("v-if", true), editable.value || item.basket || item.status || item.derived || item.row.tagsVisible && item.row.tags.length ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: "absolute z-10 flex items-center gap-px overflow-hidden rounded-md bg-[var(--sk-bg)]",
 					style: normalizeStyle({
@@ -196,7 +216,43 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					onMouseenter: ($event) => chipsHoveredKey.value = item.row.key,
 					onMouseleave: _cache[1] || (_cache[1] = ($event) => chipsHoveredKey.value = null)
 				}, [
-					item.derived ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					editable.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(_sfc_main$1, {
+						editor: __props.editor,
+						row: item.row
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass(chipButton),
+							"aria-label": unref(t)("composites.basket.label"),
+							title: item.basket ? `${unref(t)("composites.basket.label")}: ${item.basket.label}` : unref(t)("composites.basket.label")
+						}, [item.basket ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: "size-2.5 rounded-full",
+							style: normalizeStyle({ backgroundColor: item.basket.color })
+						}, null, 4)) : (openBlock(), createBlock(unref(UIcon), {
+							key: 1,
+							name: "i-lucide-circle-dashed",
+							class: "size-3.5"
+						}))], 8, _hoisted_4)]),
+						_: 2
+					}, 1032, ["editor", "row"]), createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(chipButton),
+						"aria-label": unref(t)(item.titleHidden ? "composites.titleHidden.show" : "composites.titleHidden.hide"),
+						title: unref(t)(item.titleHidden ? "composites.titleHidden.show" : "composites.titleHidden.hide"),
+						onClick: ($event) => toggleTitleHidden(item.row)
+					}, [createVNode(unref(UIcon), {
+						name: item.titleHidden ? "i-lucide-eye" : "i-lucide-eye-off",
+						class: "size-3.5"
+					}, null, 8, ["name"])], 8, _hoisted_5)], 64)) : item.basket ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(chip),
+						title: item.basket.label
+					}, [createElementVNode("span", {
+						class: "size-2.5 rounded-full",
+						style: normalizeStyle({ backgroundColor: item.basket.color })
+					}, null, 4)], 8, _hoisted_6)) : createCommentVNode("v-if", true),
+					item.derived ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
 						item.derived.toggleable ? (openBlock(), createElementBlock("button", {
 							key: 0,
 							type: "button",
@@ -208,7 +264,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: item.derived.open ? "i-lucide-chevron-down" : "i-lucide-chevron-right",
 							class: "size-3.5"
-						}, null, 8, ["name"])], 8, _hoisted_4)) : createCommentVNode("v-if", true),
+						}, null, 8, ["name"])], 8, _hoisted_7)) : createCommentVNode("v-if", true),
 						createElementVNode("span", { class: normalizeClass(chip) }, [createVNode(unref(UIcon), {
 							name: "i-lucide-git-branch",
 							class: "size-3.5"
@@ -221,7 +277,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							class: "size-3.5"
 						}), createTextVNode(toDisplayString(unref(t)("composites.derivation.stale")), 1)], 2)) : createCommentVNode("v-if", true)
 					], 64)) : createCommentVNode("v-if", true),
-					item.status ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [editable.value ? (openBlock(), createBlock(_sfc_main$2, {
+					item.status ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [editable.value ? (openBlock(), createBlock(_sfc_main$3, {
 						key: 0,
 						editor: __props.editor,
 						row: item.row
@@ -233,7 +289,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: item.status.icon,
 							class: normalizeClass(["size-3.5", item.status.color])
-						}, null, 8, ["name", "class"]), createTextVNode(toDisplayString(item.status.label), 1)], 8, _hoisted_5)]),
+						}, null, 8, ["name", "class"]), createTextVNode(toDisplayString(item.status.label), 1)], 8, _hoisted_8)]),
 						_: 2
 					}, 1032, ["editor", "row"])) : (openBlock(), createElementBlock("span", {
 						key: 1,
@@ -246,7 +302,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						return openBlock(), createElementBlock("span", {
 							key: tag,
 							class: normalizeClass([chip, "group max-w-40 gap-0"])
-						}, [createElementVNode("span", _hoisted_6, "#" + toDisplayString(tag), 1), editable.value ? (openBlock(), createElementBlock("button", {
+						}, [createElementVNode("span", _hoisted_9, "#" + toDisplayString(tag), 1), editable.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
 							type: "button",
 							class: "flex h-4 w-0 shrink-0 items-center justify-center overflow-hidden rounded-sm opacity-0 transition-all duration-150 group-hover:ml-1 group-hover:w-4 group-hover:opacity-100 hover:bg-[var(--sk-bg-elevated)] hover:text-[var(--sk-fg-highlighted)] focus-visible:ml-1 focus-visible:w-4 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[var(--sk-primary)]",
@@ -255,10 +311,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: "i-lucide-x",
 							class: "size-3"
-						})], 8, _hoisted_7)) : createCommentVNode("v-if", true)], 2);
+						})], 8, _hoisted_10)) : createCommentVNode("v-if", true)], 2);
 					}), 128)),
 					editable.value && item.row.tagsVisible ? (openBlock(), createBlock(unref(UPopover), {
-						key: 2,
+						key: 4,
 						content: {
 							side: "bottom",
 							align: "start",
@@ -266,7 +322,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							onCloseAutoFocus: (event) => event.preventDefault()
 						}
 					}, {
-						content: withCtx(() => [createElementVNode("div", _hoisted_9, [createVNode(_sfc_main$3, {
+						content: withCtx(() => [createElementVNode("div", _hoisted_12, [createVNode(_sfc_main$4, {
 							editor: __props.editor,
 							row: item.row
 						}, null, 8, ["editor", "row"])])]),
@@ -278,7 +334,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}, [createVNode(unref(UIcon), {
 							name: "i-lucide-plus",
 							class: "size-3.5"
-						})], 8, _hoisted_8)]),
+						})], 8, _hoisted_11)]),
 						_: 2
 					}, 1032, ["content"])) : createCommentVNode("v-if", true)
 				], 44, _hoisted_3)) : createCommentVNode("v-if", true)], 64);