frappe-ui 1.0.0-beta.1 → 1.0.0-beta.2

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,
+  "imports": {
+    "#components/*": "./src/components/*",
+    "#molecules/*": "./src/molecules/*",
+    "#composables/*": "./src/composables/*",
+    "#utils/*": "./src/utils/*"
+  },
   "scripts": {
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",

package/src/molecules/editor/components/ImageViewerModal.vue

@@ -71,12 +71,12 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, toRef, watch } from 'vue'
-import { useTouchHandler } from '@composables/useTouchHandler'
-import { useImageNavigation } from '@composables/useImageNavigation'
-import { useZoomPan } from '@composables/useZoomPan'
-import { useControlsAutoHide } from '@molecules/editor/composables/useControlsAutoHide'
-import { useFullscreen } from '@molecules/editor/composables/useFullscreen'
-import { useElementSize } from '@molecules/editor/composables/useElementSize'
+import { useTouchHandler } from '#composables/useTouchHandler'
+import { useImageNavigation } from '#composables/useImageNavigation'
+import { useZoomPan } from '#composables/useZoomPan'
+import { useControlsAutoHide } from '#molecules/editor/composables/useControlsAutoHide'
+import { useFullscreen } from '#molecules/editor/composables/useFullscreen'
+import { useElementSize } from '#molecules/editor/composables/useElementSize'
 import ImageViewerControlsBar from './image-viewer/ImageViewerControlsBar.vue'
 import { downloadImage } from './image-viewer/imageViewerDownload'
 import { createImageViewerKeydown } from './image-viewer/imageViewerKeymap'

package/src/molecules/editor/components/MediaNodeView.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, watch, toRaw } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import LoadingIndicator from '@components/LoadingIndicator.vue'
-import Button from '@components/Button/Button.vue'
-import { ErrorMessage } from '@components/ErrorMessage'
-import { getLocalFile } from '@molecules/editor/extensions/shared/media-upload-state'
-import { useNodeViewEditable } from '@molecules/editor/composables/useNodeViewEditable'
-import { useNodeViewResize } from '@molecules/editor/composables/useNodeViewResize'
+import LoadingIndicator from '#components/LoadingIndicator.vue'
+import Button from '#components/Button/Button.vue'
+import { ErrorMessage } from '#components/ErrorMessage'
+import { getLocalFile } from '#molecules/editor/extensions/shared/media-upload-state'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
+import { useNodeViewResize } from '#molecules/editor/composables/useNodeViewResize'
 import MediaToolbar from './MediaToolbar.vue'
 import {
   wrapperClasses,

package/src/molecules/editor/components/MediaToolbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import type { Node } from '@tiptap/pm/model'
-import Tooltip from '@components/Tooltip/Tooltip.vue'
+import Tooltip from '#components/Tooltip/Tooltip.vue'
 import { alignIcon, type MediaAlign } from './media-node-view-utils'
 
 const props = defineProps<{

package/src/molecules/editor/components/font-color/ColorSwatchGrid.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import Tooltip from '@components/Tooltip/Tooltip.vue'
+import Tooltip from '#components/Tooltip/Tooltip.vue'
 import type { ColorSwatch } from './swatches'
 
 defineProps<{

package/src/molecules/editor/components/font-color/fontColorController.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
 import type { Editor } from '@tiptap/core'
-import { useFloatingPopup } from '@molecules/editor/composables/useFloatingPopup'
-import { useNamedColorState } from '@molecules/editor/composables/useNamedColorState'
+import { useFloatingPopup } from '#molecules/editor/composables/useFloatingPopup'
+import { useNamedColorState } from '#molecules/editor/composables/useNamedColorState'
 import ColorSwatchGrid from './ColorSwatchGrid.vue'
 import { highlightSwatches, textSwatches } from './swatches'
 

package/src/molecules/editor/components/font-color/swatches.ts

@@ -12,7 +12,7 @@
 import {
   PALETTE_COLORS,
   type PaletteColor,
-} from '@molecules/editor/extensions/shared/color-palette'
+} from '#molecules/editor/extensions/shared/color-palette'
 
 export interface ColorSwatch {
   /** Lowercase palette value stored on the mark, e.g. `'blue'`. `null` = Default. */

package/src/molecules/editor/components/image-viewer/ImageViewerControlsBar.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script setup lang="ts">
-import Tooltip from '@components/Tooltip/Tooltip.vue'
+import Tooltip from '#components/Tooltip/Tooltip.vue'
 
 defineProps<{
   visible: boolean

package/src/molecules/editor/components/media-node-view-controller.ts

@@ -10,7 +10,7 @@
  * logic — hence the `*-controller.ts` suffix per CONVENTIONS §3.2.
  */
 import type { Editor } from '@tiptap/core'
-import { safeGetPos } from '@molecules/editor/extensions/shared/node-view'
+import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 import type { MediaAlign } from './media-node-view-utils'
 
 type GetPos = () => number | undefined

package/src/molecules/editor/composables/useNamedColorState.ts

@@ -1,6 +1,6 @@
 import type { Editor } from '@tiptap/core'
 import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
-import { PALETTE_NAMES } from '@molecules/editor/extensions/shared/color-palette'
+import { PALETTE_NAMES } from '#molecules/editor/extensions/shared/color-palette'
 
 export interface NamedColorState {
   /** The active named text color, or `null` when none / mixed / unset. */

package/src/molecules/editor/composables/useNodeViewResize.ts

@@ -17,7 +17,7 @@
  */
 import { ref, onUnmounted, type Ref } from 'vue'
 import type { Editor } from '@tiptap/core'
-import { safeGetPos } from '@molecules/editor/extensions/shared/node-view'
+import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 
 export interface ResizeArgs {
   /** The element being resized (image / video / iframe). May be null pre-mount. */

package/src/molecules/editor/composables/useSuggestionList.ts

@@ -1,11 +1,11 @@
 import { ref, watch, type Ref } from 'vue'
-import type { SuggestionListExpose } from '@molecules/editor/extensions/shared/suggestion-types'
+import type { SuggestionListExpose } from '#molecules/editor/extensions/shared/suggestion-types'
 
 /**
  * Selection + keyboard state machine shared by `SuggestionList.vue`.
  *
  * Canonical import path:
- *   `@molecules/editor/composables/useSuggestionList`
+ *   `#molecules/editor/composables/useSuggestionList`
  *
  * Owns the empty-list guard: ArrowUp/ArrowDown short-circuit when there are no
  * items, so the wrap-around index math never evaluates `% 0` (which would yield

package/src/molecules/editor/composables/useTocActiveHeading.ts

@@ -7,7 +7,7 @@ import {
   type Ref,
 } from 'vue'
 import type { Editor } from '@tiptap/core'
-import type { HeadingInfo } from '@molecules/editor/extensions/shared/heading-scope'
+import type { HeadingInfo } from '#molecules/editor/extensions/shared/heading-scope'
 
 const ACTIVE_TOP_THRESHOLD = -50
 const ACTIVE_BOTTOM_THRESHOLD = 100

package/src/molecules/editor/composables/useTocAnchors.ts

@@ -13,11 +13,11 @@ import {
   getActiveTabId,
   getActiveTabRange,
   type HeadingInfo,
-} from '@molecules/editor/extensions/shared/heading-scope'
+} from '#molecules/editor/extensions/shared/heading-scope'
 import {
   foldHeadings,
   type HeadingTreeNode,
-} from '@molecules/editor/extensions/shared/heading-tree-utils'
+} from '#molecules/editor/extensions/shared/heading-tree-utils'
 
 export type TocAnchorTree = HeadingTreeNode<HeadingInfo>[]
 

package/src/molecules/editor/extensions/code-block/CodeBlockComponent.vue

@@ -27,8 +27,8 @@
 import { computed, toRaw } from 'vue'
 import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 import { createLowlight } from 'lowlight'
-import { useNodeViewEditable } from '@molecules/editor/composables/useNodeViewEditable'
-import { listEditorLanguages } from '@molecules/editor/extensions/shared/lowlight-languages'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
+import { listEditorLanguages } from '#molecules/editor/extensions/shared/lowlight-languages'
 import './CodeBlockComponent.css'
 
 type Lowlight = ReturnType<typeof createLowlight>

package/src/molecules/editor/extensions/code-block/code-block.ts

@@ -3,7 +3,7 @@ import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import Code from '@tiptap/extension-code'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import { markInputRule } from '@tiptap/core'
-import { toggleCodeOnBacktick } from '@molecules/editor/extensions/shared/toggle-code-shortcut'
+import { toggleCodeOnBacktick } from '#molecules/editor/extensions/shared/toggle-code-shortcut'
 import {
   INDENT,
   getCodeBlockCtx,

package/src/molecules/editor/extensions/content-paste/content-paste-extension.ts

@@ -21,9 +21,9 @@ import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Slice } from '@tiptap/pm/model'
 import type { EditorView } from '@tiptap/pm/view'
-import type { UploadedFile } from '@utils/useFileUpload'
-import { imageEngine } from '@molecules/editor/extensions/image/image-engine'
-import { resolveUploadOptions } from '@molecules/editor/extensions/shared/media-upload-engine'
+import type { UploadedFile } from '#utils/useFileUpload'
+import { imageEngine } from '#molecules/editor/extensions/image/image-engine'
+import { resolveUploadOptions } from '#molecules/editor/extensions/shared/media-upload-engine'
 import { absolutizeMediaSrcs } from './media-src-utils'
 import { htmlContainsImage } from './paste-html-utils'
 import { tryMarkdownSlice } from './paste-markdown-utils'

package/src/molecules/editor/extensions/content-paste/paste-image-controller.test.ts

@@ -24,7 +24,7 @@ vi.mock('./paste-html-utils', () => ({
     { node: { type: { name: 'image' } }, pos: 5, src: DATA_SRC },
   ]),
 }))
-vi.mock('@molecules/editor/extensions/shared/media-upload-engine', () => ({
+vi.mock('#molecules/editor/extensions/shared/media-upload-engine', () => ({
   dataUrlOrBlobToFile: vi.fn(
     async () => new File(['x'], 'p.png', { type: 'image/png' }),
   ),

package/src/molecules/editor/extensions/content-paste/paste-image-controller.ts

@@ -34,7 +34,7 @@ import {
   dataUrlOrBlobToFile,
   type MediaUploadEngine,
   type MediaUploadOptions,
-} from '@molecules/editor/extensions/shared/media-upload-engine'
+} from '#molecules/editor/extensions/shared/media-upload-engine'
 import { collectImageNodes, parseHtmlToSlice } from './paste-html-utils'
 
 /**

package/src/molecules/editor/extensions/content-paste/paste-markdown-utils.ts

@@ -1,12 +1,12 @@
 /**
  * Markdown-from-plaintext paste helper.
  *
- * Wraps `@utils/markdown` so the extension can stay declarative: detect whether
+ * Wraps `#utils/markdown` so the extension can stay declarative: detect whether
  * a pasted plaintext string looks like markdown and, if so, render it to a
  * ProseMirror {@link Slice}. Returns `null` when the text is not markdown.
  */
 import type { Schema, Slice } from '@tiptap/pm/model'
-import { detectMarkdown, markdownToHTML } from '@utils/markdown'
+import { detectMarkdown, markdownToHTML } from '#utils/markdown'
 import { parseHtmlToSlice } from './paste-html-utils'
 
 /**

package/src/molecules/editor/extensions/emoji/EmojiList.vue

@@ -17,8 +17,8 @@
 import { ref, type PropType } from 'vue'
 import SuggestionList from '../suggestion/SuggestionList.vue'
 import type { Editor, Range } from '@tiptap/core'
-import type { SuggestionListExpose } from '@molecules/editor/extensions/shared/suggestion-types'
-import { forwardKeyDown } from '@molecules/editor/composables/useSuggestionList'
+import type { SuggestionListExpose } from '#molecules/editor/extensions/shared/suggestion-types'
+import { forwardKeyDown } from '#molecules/editor/composables/useSuggestionList'
 import type { EmojiItem } from './emoji-extension'
 
 const props = defineProps({

package/src/molecules/editor/extensions/emoji/emoji-extension.ts

@@ -3,7 +3,7 @@ import {
   type BaseSuggestionItem,
   createSuggestionExtension,
 } from '../suggestion/createSuggestionExtension'
-import { filterByQuery } from '@molecules/editor/extensions/shared/suggestion-helpers'
+import { filterByQuery } from '#molecules/editor/extensions/shared/suggestion-helpers'
 import EmojiList from './EmojiList.vue'
 import _EMOJIS from './emojis.json'
 

package/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue

@@ -45,9 +45,9 @@
 <script setup lang="ts">
 import { computed, onMounted, nextTick, useTemplateRef } from 'vue'
 import type { Editor } from '@tiptap/core'
-import Dialog from '@components/Dialog/Dialog.vue'
-import Button from '@components/Button/Button.vue'
-import Textarea from '@components/Textarea/Textarea.vue'
+import Dialog from '#components/Dialog/Dialog.vue'
+import Button from '#components/Button/Button.vue'
+import Textarea from '#components/Textarea/Textarea.vue'
 import { useIframeDialog } from './useIframeDialog'
 
 const props = defineProps<{

package/src/molecules/editor/extensions/iframe/IframeNodeView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, toRaw } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import { useNodeViewEditable } from '@molecules/editor/composables/useNodeViewEditable'
-import { useNodeViewResize } from '@molecules/editor/composables/useNodeViewResize'
-import { safeGetPos } from '@molecules/editor/extensions/shared/node-view'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
+import { useNodeViewResize } from '#molecules/editor/composables/useNodeViewResize'
+import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 import { IFRAME_SANDBOX } from './iframe-allowlist'
 import type { IframeAlign } from './iframe-commands'
 

package/src/molecules/editor/extensions/iframe/iframe-allowlist.ts

@@ -11,7 +11,7 @@
 import {
   isSafeUrl,
   matchesHostname,
-} from '@molecules/editor/extensions/shared/url-safety'
+} from '#molecules/editor/extensions/shared/url-safety'
 
 /**
  * Hostnames (and their embed sub-hosts) we permit as iframe sources.

package/src/molecules/editor/extensions/iframe/iframe-embed-utils.ts

@@ -12,7 +12,7 @@
  *
  * Everything is side-effect-free and unit-testable.
  */
-import { matchesHostname } from '@molecules/editor/extensions/shared/url-safety'
+import { matchesHostname } from '#molecules/editor/extensions/shared/url-safety'
 
 const EDITOR_PADDING = 40
 

package/src/molecules/editor/extensions/iframe/iframe-paste-handler.ts

@@ -9,7 +9,7 @@
  */
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import type { EditorView } from '@tiptap/pm/view'
-import { dispatchIfAlive } from '@molecules/editor/extensions/shared/node-view'
+import { dispatchIfAlive } from '#molecules/editor/extensions/shared/node-view'
 import { validateIframeUrl } from './iframe-allowlist'
 import {
   processEmbedUrl,

package/src/molecules/editor/extensions/image/image-engine.ts

@@ -7,9 +7,9 @@
  * so the node view can show a loading placeholder. All upload/queue/find/
  * dimension logic lives in the shared engine — this file only supplies config.
  */
-import { createMediaUploadEngine } from '@molecules/editor/extensions/shared/media-upload-engine'
-import { probeImageDimensions } from '@molecules/editor/extensions/shared/media-dimensions'
-import type { MediaUploadConfig } from '@molecules/editor/extensions/shared/media-upload-engine'
+import { createMediaUploadEngine } from '#molecules/editor/extensions/shared/media-upload-engine'
+import { probeImageDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
+import type { MediaUploadConfig } from '#molecules/editor/extensions/shared/media-upload-engine'
 
 export const imageUploadConfig: MediaUploadConfig = {
   nodeName: 'image',

package/src/molecules/editor/extensions/image/image-extension.ts

@@ -5,7 +5,7 @@
  *
  * Everything imperative (staging files, placeholder insertion, dimension probe,
  * write-back, drop/paste, async-safe dispatch) lives in
- * `@molecules/editor/extensions/shared/*` and is shared with video. This file is
+ * `#molecules/editor/extensions/shared/*` and is shared with video. This file is
  * the TipTap shell only.
  */
 import {
@@ -15,15 +15,15 @@ import {
 } from '@tiptap/core'
 import type { Editor } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
-import type { UploadedFile } from '@utils/useFileUpload'
-import MediaNodeView from '@molecules/editor/components/MediaNodeView.vue'
-import { createMediaPlugin } from '@molecules/editor/extensions/shared/media-plugin'
-import { pickFiles } from '@molecules/editor/extensions/shared/file-picker'
-import { openImageGroupUploadDialog } from '@molecules/editor/extensions/image-group/imageGroupDialogController'
+import type { UploadedFile } from '#utils/useFileUpload'
+import MediaNodeView from '#molecules/editor/components/MediaNodeView.vue'
+import { createMediaPlugin } from '#molecules/editor/extensions/shared/media-plugin'
+import { pickFiles } from '#molecules/editor/extensions/shared/file-picker'
+import { openImageGroupUploadDialog } from '#molecules/editor/extensions/image-group/imageGroupDialogController'
 import {
   resolveUploadOptions as resolveUploadOptionsBase,
   type MediaUploadOptions,
-} from '@molecules/editor/extensions/shared/media-upload-engine'
+} from '#molecules/editor/extensions/shared/media-upload-engine'
 import { imageEngine, imageUploadConfig } from './image-engine'
 
 export interface ImageExtensionOptions {

package/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue

@@ -67,7 +67,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
-import { useObjectUrl } from '@molecules/editor/composables/useObjectUrl'
+import { useObjectUrl } from '#molecules/editor/composables/useObjectUrl'
 import { isImageSupported } from './image-group-utils'
 import type { ImageItem } from './useImageGroupDialog'
 

package/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue

@@ -84,10 +84,10 @@ import { computed, ref, toRaw } from 'vue'
 import { NodeViewWrapper, type Editor } from '@tiptap/vue-3'
 import type { NodeViewProps } from '@tiptap/vue-3'
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import Button from '@components/Button/Button.vue'
-import Select from '@components/Select/Select.vue'
-import ImageViewerModal from '@molecules/editor/components/ImageViewerModal.vue'
-import { useNodeViewEditable } from '@molecules/editor/composables/useNodeViewEditable'
+import Button from '#components/Button/Button.vue'
+import Select from '#components/Select/Select.vue'
+import ImageViewerModal from '#molecules/editor/components/ImageViewerModal.vue'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
 import ImageGroupUploadDialog from './ImageGroupUploadDialog.vue'
 import { clampColumns, columnSelectOptions } from './image-group-utils'
 import {
@@ -95,7 +95,7 @@ import {
   replaceImageGroup,
   setImageGroupColumns,
 } from './image-group-commands'
-import type { ExistingImage } from '@molecules/editor/extensions/shared/upload-types'
+import type { ExistingImage } from '#molecules/editor/extensions/shared/upload-types'
 
 const props = defineProps<NodeViewProps & { editor: Editor }>()
 

package/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue

@@ -132,11 +132,11 @@
 
 <script setup lang="ts">
 import { computed, useTemplateRef, watch } from 'vue'
-import Dialog from '@components/Dialog/Dialog.vue'
-import Button from '@components/Button/Button.vue'
-import Select from '@components/Select/Select.vue'
+import Dialog from '#components/Dialog/Dialog.vue'
+import Button from '#components/Button/Button.vue'
+import Select from '#components/Select/Select.vue'
 import type { Editor } from '@tiptap/core'
-import { useScopedFileDrop } from '@molecules/editor/composables/useScopedFileDrop'
+import { useScopedFileDrop } from '#molecules/editor/composables/useScopedFileDrop'
 import {
   clampColumns,
   columnSelectOptions,
@@ -145,7 +145,7 @@ import {
 import { useImageGroupDialog } from './useImageGroupDialog'
 import { useStrayDropGuard } from './useStrayDropGuard'
 import ImageGroupGrid from './ImageGroupGrid.vue'
-import type { ExistingImage } from '@molecules/editor/extensions/shared/upload-types'
+import type { ExistingImage } from '#molecules/editor/extensions/shared/upload-types'
 
 const props = withDefaults(
   defineProps<{

package/src/molecules/editor/extensions/image-group/image-group-commands.ts

@@ -9,9 +9,9 @@
 import type { CommandProps, RawCommands } from '@tiptap/core'
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import type { Editor } from '@tiptap/core'
-import { safeGetPos } from '@molecules/editor/extensions/shared/node-view'
+import { safeGetPos } from '#molecules/editor/extensions/shared/node-view'
 import { clampColumns } from './image-group-utils'
-import type { ExistingImage } from '@molecules/editor/extensions/shared/upload-types'
+import type { ExistingImage } from '#molecules/editor/extensions/shared/upload-types'
 
 const IMAGE_GROUP = 'imageGroup'
 

package/src/molecules/editor/extensions/image-group/image-group-extension.ts

@@ -3,7 +3,7 @@ import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageGroupNodeView from './ImageGroupNodeView.vue'
 import { buildImageGroupCommands } from './image-group-commands'
 import { clampColumns, DEFAULT_COLUMNS } from './image-group-utils'
-import type { UploadedFile } from '@utils/useFileUpload'
+import type { UploadedFile } from '#utils/useFileUpload'
 
 export interface ImageGroupOptions {
   /**

package/src/molecules/editor/extensions/image-group/image-group-utils.ts

@@ -5,7 +5,7 @@
  * commands and the extension schema all share these so the column set, the
  * deterministic ids and the preview-support check stay in exactly one place.
  */
-import type { ExistingImage } from '@molecules/editor/extensions/shared/upload-types'
+import type { ExistingImage } from '#molecules/editor/extensions/shared/upload-types'
 
 /** Columns a user may pick in the grid. The single source for the Select + clamps. */
 export const ALLOWED_COLUMNS = [2, 3, 4] as const

package/src/molecules/editor/extensions/image-group/useImageGroupDialog.ts

@@ -3,12 +3,12 @@ import type { Editor } from '@tiptap/core'
 import {
   resolveUploadOptions,
   uploadFilesParallel,
-} from '@molecules/editor/extensions/shared/media-upload-engine'
+} from '#molecules/editor/extensions/shared/media-upload-engine'
 import type {
   ExistingImage,
   MediaUploadOptions,
   UploadResult,
-} from '@molecules/editor/extensions/shared/upload-types'
+} from '#molecules/editor/extensions/shared/upload-types'
 import {
   existingItemId,
   fileItemId,

package/src/molecules/editor/extensions/link/LinkEditorPopup.vue

@@ -63,9 +63,9 @@
 
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef, nextTick } from 'vue'
-import Button from '@components/Button/Button.vue'
-import TextInput from '@components/TextInput/TextInput.vue'
-import { isSafeUrl } from '@molecules/editor/extensions/shared/url-safety'
+import Button from '#components/Button/Button.vue'
+import TextInput from '#components/TextInput/TextInput.vue'
+import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
 
 const props = defineProps<{
   href: string

package/src/molecules/editor/extensions/link/link-commands.ts

@@ -1,8 +1,8 @@
 import { type Editor, getMarkRange } from '@tiptap/core'
 import type { MarkType } from '@tiptap/pm/model'
-import { mapStoredRange } from '@molecules/editor/extensions/shared/node-view'
+import { mapStoredRange } from '#molecules/editor/extensions/shared/node-view'
 import { openLinkPopup } from './link-popup-controller'
-import type { VirtualReference } from '@molecules/editor/composables/useFloatingPopup'
+import type { VirtualReference } from '#molecules/editor/composables/useFloatingPopup'
 
 /**
  * A TipTap command factory: `() => ({ editor }) => boolean`.

package/src/molecules/editor/extensions/link/link-paste-plugin.ts

@@ -1,7 +1,7 @@
 import type { Editor } from '@tiptap/core'
 import type { MarkType } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
-import { isSafeUrl } from '@molecules/editor/extensions/shared/url-safety'
+import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
 
 /**
  * Options for {@link linkPastePlugin}.

package/src/molecules/editor/extensions/link/link-popup-controller.ts

@@ -1,7 +1,7 @@
 import {
   useFloatingPopup,
   type VirtualReference,
-} from '@molecules/editor/composables/useFloatingPopup'
+} from '#molecules/editor/composables/useFloatingPopup'
 import LinkEditorPopup from './LinkEditorPopup.vue'
 
 /**

package/src/molecules/editor/extensions/mention/mention-extension.ts

@@ -18,7 +18,7 @@ import {
   insertSuggestionNode,
   filterByQuery,
   getSuggestionOptions,
-} from '@molecules/editor/extensions/shared/suggestion-helpers'
+} from '#molecules/editor/extensions/shared/suggestion-helpers'
 import './style.css'
 
 export interface MentionSuggestionItem extends BaseSuggestionItem {

package/src/molecules/editor/extensions/shared/media-node-ops.ts

@@ -11,12 +11,12 @@ import type { EditorView } from '@tiptap/pm/view'
 import {
   dispatchIfAlive,
   findNodeByUploadId,
-} from '@molecules/editor/extensions/shared/node-view'
-import type { MediaDimensions } from '@molecules/editor/extensions/shared/media-dimensions'
+} from '#molecules/editor/extensions/shared/node-view'
+import type { MediaDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 import type {
   InsertMode,
   UploadedFile,
-} from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-upload-types'
 
 /** Optional intrinsic dimensions (null when the probe failed). */
 export interface OptionalDimensions {

package/src/molecules/editor/extensions/shared/media-plugin.ts

@@ -12,13 +12,13 @@ import { Plugin, Selection } from '@tiptap/pm/state'
 import type { Transaction, EditorState } from '@tiptap/pm/state'
 import type { EditorView } from '@tiptap/pm/view'
 import type { Editor } from '@tiptap/core'
-import { dispatchIfAlive } from '@molecules/editor/extensions/shared/node-view'
-import { resolveUploadOptions } from '@molecules/editor/extensions/shared/media-upload-engine'
+import { dispatchIfAlive } from '#molecules/editor/extensions/shared/node-view'
+import { resolveUploadOptions } from '#molecules/editor/extensions/shared/media-upload-engine'
 import type {
   MediaUploadConfig,
   MediaUploadEngine,
   MediaUploadOptions,
-} from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-upload-types'
 
 /** Bridge to read the live extension `editor`/`options` at event time. */
 export interface MediaPluginHost {

package/src/molecules/editor/extensions/shared/media-upload-engine.test.ts

@@ -14,21 +14,21 @@
  */
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
-vi.mock('@utils/file-to-base64', () => ({
+vi.mock('#utils/file-to-base64', () => ({
   default: vi.fn(async () => 'data:image/png;base64,AAAA'),
 }))
-vi.mock('@molecules/editor/extensions/shared/url-safety', () => ({
+vi.mock('#molecules/editor/extensions/shared/url-safety', () => ({
   isSafeUrl: () => true,
 }))
-vi.mock('@molecules/editor/extensions/shared/upload-id', () => ({
+vi.mock('#molecules/editor/extensions/shared/upload-id', () => ({
   createUploadId: () => 'uid-1',
 }))
-vi.mock('@molecules/editor/extensions/shared/media-upload-state', () => ({
+vi.mock('#molecules/editor/extensions/shared/media-upload-state', () => ({
   setLocalFile: vi.fn(),
   getLocalFile: vi.fn(() => ({ file: new File(['x'], 'x.png') })),
   deleteLocalFile: vi.fn(),
 }))
-vi.mock('@molecules/editor/extensions/shared/media-node-ops', () => ({
+vi.mock('#molecules/editor/extensions/shared/media-node-ops', () => ({
   insertPlaceholder: vi.fn(),
   applyUploadSuccess: vi.fn(),
   applyUploadError: vi.fn(),
@@ -36,15 +36,15 @@ vi.mock('@molecules/editor/extensions/shared/media-node-ops', () => ({
   findNodeBySource: vi.fn(() => 0),
 }))
 
-import { createMediaUploadEngine } from '@molecules/editor/extensions/shared/media-upload-engine'
-import fileToBase64 from '@utils/file-to-base64'
-import { setLocalFile } from '@molecules/editor/extensions/shared/media-upload-state'
+import { createMediaUploadEngine } from '#molecules/editor/extensions/shared/media-upload-engine'
+import fileToBase64 from '#utils/file-to-base64'
+import { setLocalFile } from '#molecules/editor/extensions/shared/media-upload-state'
 import {
   insertPlaceholder,
   applyUploadSuccess,
   applyUploadError,
-} from '@molecules/editor/extensions/shared/media-node-ops'
-import type { MediaUploadConfig } from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-node-ops'
+import type { MediaUploadConfig } from '#molecules/editor/extensions/shared/media-upload-types'
 
 /** A throwaway stand-in for an EditorView (only identity matters to the test). */
 function makeView(): { isDestroyed: boolean; state: unknown } {

package/src/molecules/editor/extensions/shared/media-upload-engine.ts

@@ -19,15 +19,15 @@
  * and the ProseMirror plugin in `media-plugin.ts` to keep this file ≤300 lines.
  */
 import type { Editor } from '@tiptap/core'
-import fileToBase64 from '@utils/file-to-base64'
-import { isSafeUrl } from '@molecules/editor/extensions/shared/url-safety'
-import { findNodeByUploadId } from '@molecules/editor/extensions/shared/node-view'
+import fileToBase64 from '#utils/file-to-base64'
+import { isSafeUrl } from '#molecules/editor/extensions/shared/url-safety'
+import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
 import {
   deleteLocalFile,
   getLocalFile,
   setLocalFile,
-} from '@molecules/editor/extensions/shared/media-upload-state'
-import { createUploadId } from '@molecules/editor/extensions/shared/upload-id'
+} from '#molecules/editor/extensions/shared/media-upload-state'
+import { createUploadId } from '#molecules/editor/extensions/shared/upload-id'
 import {
   applyUploadError,
   applyUploadSuccess,
@@ -35,7 +35,7 @@ import {
   findNodeBySource,
   insertPlaceholder,
   type OptionalDimensions,
-} from '@molecules/editor/extensions/shared/media-node-ops'
+} from '#molecules/editor/extensions/shared/media-node-ops'
 import type {
   InsertMode,
   MediaUploadConfig,
@@ -43,7 +43,7 @@ import type {
   MediaUploadOptions,
   UploadedFile,
   UploadResult,
-} from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-upload-types'
 
 export type {
   MediaUploadConfig,
@@ -51,7 +51,7 @@ export type {
   MediaUploadOptions,
   UploadedFile,
   UploadResult,
-} from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-upload-types'
 
 /**
  * Resolve the effective upload options. A directly-configured `uploadFunction`

package/src/molecules/editor/extensions/shared/media-upload-types.ts

@@ -3,12 +3,12 @@
  *
  * Split out of `media-upload-engine.ts` to keep that module ≤300 lines. The
  * engine re-exports every public type from here, so the canonical import path
- * for consumers remains `@molecules/editor/extensions/shared/media-upload-engine`
+ * for consumers remains `#molecules/editor/extensions/shared/media-upload-engine`
  * (per the conventions import map §2).
  */
 import type { Editor } from '@tiptap/core'
-import type { UploadedFile as FrappeUploadedFile } from '@utils/useFileUpload'
-import type { MediaDimensions } from '@molecules/editor/extensions/shared/media-dimensions'
+import type { UploadedFile as FrappeUploadedFile } from '#utils/useFileUpload'
+import type { MediaDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 
 /** Result of a successful upload. Must carry a `file_url`. */
 export interface UploadedFile extends Partial<FrappeUploadedFile> {

package/src/molecules/editor/extensions/shared/suggestion-helpers.ts

@@ -5,7 +5,7 @@ import type { Editor, Range } from '@tiptap/core'
  * the single case-insensitive filter, and a typed options lookup.
  *
  * Canonical import path:
- *   `@molecules/editor/extensions/shared/suggestion-helpers`
+ *   `#molecules/editor/extensions/shared/suggestion-helpers`
  */
 
 /**

package/src/molecules/editor/extensions/shared/suggestion-renderer.ts

@@ -23,7 +23,7 @@ export interface SuggestionFloatingOptions {
  * `createSuggestionExtension().render()`.
  *
  * Canonical import path:
- *   `@molecules/editor/extensions/shared/suggestion-renderer`
+ *   `#molecules/editor/extensions/shared/suggestion-renderer`
  *
  * Owns four correctness fixes over the original inline implementation:
  *   1. Escape -> `return false` so the suggestion plugin itself runs `onExit`

package/src/molecules/editor/extensions/shared/suggestion-types.ts

@@ -7,7 +7,7 @@
  * other.
  *
  * Canonical import path:
- *   `@molecules/editor/extensions/shared/suggestion-types`
+ *   `#molecules/editor/extensions/shared/suggestion-types`
  */
 
 /**

package/src/molecules/editor/extensions/shared/upload-types.ts

@@ -13,7 +13,7 @@ export type {
   MediaUploadOptions,
   UploadResult,
   UploadedFile,
-} from '@molecules/editor/extensions/shared/media-upload-types'
+} from '#molecules/editor/extensions/shared/media-upload-types'
 
 /**
  * An image already present in the document (or a freshly-uploaded one rendered

package/src/molecules/editor/extensions/slash-commands/SlashCommandsList.vue

@@ -19,8 +19,8 @@
 import { ref, type PropType } from 'vue'
 import SuggestionList from '../suggestion/SuggestionList.vue'
 import type { Editor, Range } from '@tiptap/core'
-import type { SuggestionListExpose } from '@molecules/editor/extensions/shared/suggestion-types'
-import { forwardKeyDown } from '@molecules/editor/composables/useSuggestionList'
+import type { SuggestionListExpose } from '#molecules/editor/extensions/shared/suggestion-types'
+import { forwardKeyDown } from '#molecules/editor/composables/useSuggestionList'
 import type { CommandItem } from './slash-commands-extension'
 
 const props = defineProps({

package/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts

@@ -8,8 +8,8 @@ import {
   commandMeta,
   headingMeta,
   type EditorCommandMeta,
-} from '@molecules/editor/commands'
-import { filterByQuery } from '@molecules/editor/extensions/shared/suggestion-helpers'
+} from '#molecules/editor/commands'
+import { filterByQuery } from '#molecules/editor/extensions/shared/suggestion-helpers'
 import SlashCommandsList from './SlashCommandsList.vue'
 
 export const SlashCommandSuggestionKey = new PluginKey('slashCommandSuggestion')

package/src/molecules/editor/extensions/suggestion/SuggestionList.vue

@@ -36,8 +36,8 @@ import {
   type PropType,
   type ComponentPublicInstance,
 } from 'vue'
-import type { BaseSuggestionItem } from '@molecules/editor/extensions/shared/suggestion-types'
-import { useSuggestionList } from '@molecules/editor/composables/useSuggestionList'
+import type { BaseSuggestionItem } from '#molecules/editor/extensions/shared/suggestion-types'
+import { useSuggestionList } from '#molecules/editor/composables/useSuggestionList'
 import SuggestionListItem from './SuggestionListItem.vue'
 
 const props = defineProps({

package/src/molecules/editor/extensions/suggestion/SuggestionListItem.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { computed, type PropType } from 'vue'
-import type { BaseSuggestionItem } from '@molecules/editor/extensions/shared/suggestion-types'
+import type { BaseSuggestionItem } from '#molecules/editor/extensions/shared/suggestion-types'
 
 const props = defineProps({
   item: {

package/src/molecules/editor/extensions/suggestion/createSuggestionExtension.ts

@@ -2,11 +2,11 @@ import { Extension, type Editor, type Range } from '@tiptap/core'
 import Suggestion, { type SuggestionOptions } from '@tiptap/suggestion'
 import type { PluginKey } from '@tiptap/pm/state'
 import type { Component as VueComponent } from 'vue'
-import type { BaseSuggestionItem } from '@molecules/editor/extensions/shared/suggestion-types'
+import type { BaseSuggestionItem } from '#molecules/editor/extensions/shared/suggestion-types'
 import {
   createSuggestionRenderer,
   type SuggestionFloatingOptions,
-} from '@molecules/editor/extensions/shared/suggestion-renderer'
+} from '#molecules/editor/extensions/shared/suggestion-renderer'
 
 // Re-export for back-compat: several extensions still import the base item type
 // from this module path. The canonical home is `suggestion-types`.

package/src/molecules/editor/extensions/suggestion/index.ts

@@ -3,4 +3,4 @@ export {
   type BaseSuggestionItem,
   type CreateSuggestionExtensionOptions,
 } from './createSuggestionExtension'
-export type { SuggestionListExpose } from '@molecules/editor/extensions/shared/suggestion-types'
+export type { SuggestionListExpose } from '#molecules/editor/extensions/shared/suggestion-types'

package/src/molecules/editor/extensions/tag/tag-extension.ts

@@ -17,7 +17,7 @@ import {
   insertSuggestionNode,
   filterByQuery,
   getSuggestionOptions,
-} from '@molecules/editor/extensions/shared/suggestion-helpers'
+} from '#molecules/editor/extensions/shared/suggestion-helpers'
 import { toValue, type MaybeRefOrGetter } from 'vue'
 
 type TagOption = TagSuggestionItem & { id?: string }

package/src/molecules/editor/extensions/toc-node/TocItem.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HeadingTreeNode } from '@molecules/editor/extensions/shared/heading-tree-utils'
-import type { EnrichedAnchor } from '@molecules/editor/composables/useTocActiveHeading'
+import type { HeadingTreeNode } from '#molecules/editor/extensions/shared/heading-tree-utils'
+import type { EnrichedAnchor } from '#molecules/editor/composables/useTocActiveHeading'
 
 const props = defineProps<{
   node: HeadingTreeNode<EnrichedAnchor>

package/src/molecules/editor/extensions/toc-node/TocNodeView.vue

@@ -31,19 +31,19 @@
 <script setup lang="ts">
 import { computed, toRaw } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
-import { useNodeViewEditable } from '@molecules/editor/composables/useNodeViewEditable'
+import { useNodeViewEditable } from '#molecules/editor/composables/useNodeViewEditable'
 import {
   safeGetPos,
   getExtensionHTMLAttributes,
   dispatchIfAlive,
-} from '@molecules/editor/extensions/shared/node-view'
-import { foldHeadings } from '@molecules/editor/extensions/shared/heading-tree-utils'
-import { useScrollContainer } from '@molecules/editor/composables/useScrollContainer'
-import { useTocAnchors } from '@molecules/editor/composables/useTocAnchors'
+} from '#molecules/editor/extensions/shared/node-view'
+import { foldHeadings } from '#molecules/editor/extensions/shared/heading-tree-utils'
+import { useScrollContainer } from '#molecules/editor/composables/useScrollContainer'
+import { useTocAnchors } from '#molecules/editor/composables/useTocAnchors'
 import {
   useTocActiveHeading,
   type EnrichedAnchor,
-} from '@molecules/editor/composables/useTocActiveHeading'
+} from '#molecules/editor/composables/useTocActiveHeading'
 import { scrollToHeading } from './toc-scroll-controller'
 import TocItem from './TocItem.vue'
 

package/src/molecules/editor/extensions/toc-node/toc-render.ts

@@ -10,12 +10,12 @@ import type { DOMOutputSpec } from '@tiptap/pm/model'
 import {
   collectHeadings,
   getActiveTabRange,
-} from '@molecules/editor/extensions/shared/heading-scope'
+} from '#molecules/editor/extensions/shared/heading-scope'
 import {
   foldHeadings,
   headingsToRenderSpec,
   type TocRenderNode,
-} from '@molecules/editor/extensions/shared/heading-tree-utils'
+} from '#molecules/editor/extensions/shared/heading-tree-utils'
 
 const OL_STYLE = 'list-style-type: decimal; margin: 0.5em 0; padding-left: 1.5em'
 const NESTED_OL_STYLE = 'list-style-type: decimal; padding-left: 1.5em'

package/src/molecules/editor/extensions/toc-node/toc-scroll-controller.ts

@@ -8,7 +8,7 @@
  */
 import type { Editor } from '@tiptap/core'
 import { TextSelection } from '@tiptap/pm/state'
-import type { HeadingInfo } from '@molecules/editor/extensions/shared/heading-scope'
+import type { HeadingInfo } from '#molecules/editor/extensions/shared/heading-scope'
 
 const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6'
 const SCROLL_OFFSET = 20

package/src/molecules/editor/extensions/video/video-config.ts

@@ -13,8 +13,8 @@
 import {
   createMediaUploadEngine,
   type MediaUploadConfig,
-} from '@molecules/editor/extensions/shared/media-upload-engine'
-import { probeVideoDimensions } from '@molecules/editor/extensions/shared/media-dimensions'
+} from '#molecules/editor/extensions/shared/media-upload-engine'
+import { probeVideoDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 
 /** The per-node config for the video upload pipeline. */
 export const videoConfig: MediaUploadConfig = {

package/src/molecules/editor/extensions/video/video-extension.ts

@@ -19,15 +19,15 @@ import {
   mergeAttributes,
 } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
-import MediaNodeView from '@molecules/editor/components/MediaNodeView.vue'
-import type { UploadedFile } from '@utils/useFileUpload'
+import MediaNodeView from '#molecules/editor/components/MediaNodeView.vue'
+import type { UploadedFile } from '#utils/useFileUpload'
 import {
   resolveUploadOptions,
   type MediaUploadOptions,
-} from '@molecules/editor/extensions/shared/media-upload-engine'
-import { createMediaPlugin } from '@molecules/editor/extensions/shared/media-plugin'
-import { findNodeByUploadId } from '@molecules/editor/extensions/shared/node-view'
-import { pickFiles } from '@molecules/editor/extensions/shared/file-picker'
+} from '#molecules/editor/extensions/shared/media-upload-engine'
+import { createMediaPlugin } from '#molecules/editor/extensions/shared/media-plugin'
+import { findNodeByUploadId } from '#molecules/editor/extensions/shared/node-view'
+import { pickFiles } from '#molecules/editor/extensions/shared/file-picker'
 import { videoConfig, videoEngine } from './video-config'
 
 export interface VideoExtensionOptions {

package/tailwind/preset.js

@@ -3,6 +3,10 @@ import forms from '@tailwindcss/forms'
 import typography from '@tailwindcss/typography'
 import lucideIconsPlugin from './lucideIconsPlugin.js'
 
+// NOTE: Tailwind v3 does NOT merge `content` from presets into the resolved
+// config (it reads only the top-level config's content.files). So consuming
+// apps must list frappe-ui's source globs in their own tailwind.config
+// `content` — declaring them here would be silently ignored.
 /** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ['selector', '[data-theme="dark"]'],