frappe-ui 1.0.0-beta.76 → 1.0.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.77",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/components/KeyboardShortcut/KeyboardShortcut.md

@@ -37,11 +37,11 @@ and Alt as icons, `bg` mode draws them as text.
 
 ## Styling hooks
 
-The root carries `data-slot="keyboard-shortcut"`, and `data-bg="true"` when `bg`
-is set. Each key carries `data-slot="key"` with a `data-key-type` of `cmd`,
-`ctrl`, `shift`, `alt` or `key`. The `+` separators carry
-`data-slot="separator"`, and alternative combos sit in `data-slot="alt-combos"`
-inside the root. Style through those instead of a class prop (P10):
+The root carries `data-slot="keyboard-shortcut"`, and `data-bg` when `bg` is
+set. Each key carries `data-slot="key"` with a `data-key-type` of `cmd`, `ctrl`,
+`shift`, `alt` or `key`. The `+` separators carry `data-slot="separator"`, and
+alternative combos sit in `data-slot="alt-combos"` inside the root. Style
+through those instead of a class prop (P10):
 
 ```css
 [data-slot='keyboard-shortcut'][data-bg] [data-slot='key'] {

package/src/components/Sidebar/Sidebar.api.md

@@ -26,6 +26,13 @@
     type: 'string',
     default: '"3rem"'
   },
+  {
+    name: 'ariaLabel',
+    description: 'Accessible name of the `<nav>` landmark. Default: `\'Main\'`. Give a second\nsidebar on the same page its own name, and translate it in a localised\napp — the library ships no translation layer.',
+    required: false,
+    type: 'string',
+    default: '"Main"'
+  },
   {
     name: 'collapsed',
     description: 'v-model. Whether the sidebar is collapsed. Left unset, it collapses automatically below the `sm` breakpoint.',
@@ -66,7 +73,7 @@
   },
   {
     name: 'icon',
-    description: 'Leading icon: a CSS class (e.g. `lucide-box`), plain text, or a component.\nIgnored when the `#prefix` slot is used.',
+    description: 'Leading icon: a `lucide-*` class, an emoji, or a component. Any other\nstring renders nothing and warns in dev — put initials in the `#prefix`\nslot instead. Ignored when the `#prefix` slot is used.',
     required: false,
     type: 'string | Component'
   },

package/src/components/Sidebar/Sidebar.md

@@ -12,6 +12,18 @@ There are no layout slots and no built-in scrolling in composition mode. Put a
 header as a direct child, wrap the middle list in your own `overflow-y-auto`
 container, and push a footer down with `mt-auto`.
 
+## Accessibility
+
+`Sidebar` renders the `<nav>` landmark, named `Main` through `aria-label`. Set
+`ariaLabel` to rename it — do that when a page holds a second sidebar, and to
+translate the name in a localised app. It is the only landmark the family
+emits: keep your own wrappers inside the slot as plain `div`s, or the page
+reports two navigations where it has one.
+
+`SidebarSection` gives its body `role="group"`, named by the section's `<h3>`
+whenever `label` is set, collapsible or not. A collapsible section's trigger
+keeps `aria-expanded` and `aria-controls` on the body.
+
 ## Collapse
 
 `Sidebar` owns collapse. Bind `v-model:collapsed` to control it, or leave it
@@ -29,8 +41,10 @@ A single row. It renders a container with a navigable main area and a **sibling*
 trailing zone, so an options menu in `#suffix` isn't nested inside the link
 (which anchors and buttons disallow).
 
-- `#prefix` — a leading icon or avatar (falls back to the `icon` prop: a lucide
-  class, text, or a component).
+- `#prefix` — a leading icon or avatar (falls back to the `icon` prop: a
+  `lucide-*` class, an emoji, or a component — the same values `Icon` takes).
+  Any other string renders nothing and warns in dev, so put initials or a text
+  glyph in `#prefix`.
 - default slot — the label region (falls back to the `label` prop). Put inline
   adornments like a lock icon here next to the text.
 - `#suffix` — the trailing zone: an unread count, an options `…` menu, etc.
@@ -41,6 +55,13 @@ Set `route` to render a router link or `href` for a native same-tab anchor;
 `route` against the current route. A click invokes `onClick` (bound from
 `@click`) in every case.
 
+Attributes you write on `SidebarItem` split in two. `class`, `style` and event
+listeners stay on the row container, so a row background or a drag-and-drop
+ring covers the `#suffix` zone and a `@dragover` / `@drop` there still fires.
+Every other attribute (`target`, `rel`, `id`, `title`, `data-*`, `aria-*`)
+lands on the link or the button inside, the element it describes. Your
+`aria-label` replaces the one derived from the label text.
+
 ## SidebarHeader
 
 The app-switcher / workspace-identity row. A fixed 48px region that lines up
@@ -51,6 +72,10 @@ or the title's first letter; `showLogo: false` drops the box entirely for a
 flush-left title. `menuItems` renders inside the trigger's
 dropdown — the same structured-options shape `Dropdown` itself takes.
 
+Without `menuItems` the header is a plain static block: no button, no chevron,
+no hover background, no tab stop. The logo and the title keep the same
+position, so adding a menu later does not move them.
+
 ## SidebarSection
 
 A collapsible group. It owns only the label row and the collapse chrome —

package/src/components/Sidebar/Sidebar.vue

@@ -1,7 +1,12 @@
 <template>
-  <div
+  <!-- A <nav> landmark, so screen-reader users can jump to the app's
+       navigation. It is the only one the sidebar family emits: SidebarSection
+       bodies are `role="group"`, because nested landmarks add noise instead of
+       structure. Keep app-written wrappers inside the slot as plain divs. -->
+  <nav
     data-slot="sidebar"
     :data-state="shouldCollapse ? 'collapsed' : 'expanded'"
+    :aria-label="ariaLabel"
     class="flex h-full flex-shrink-0 flex-col overflow-x-hidden bg-surface-sidebar transition-[width] duration-300 ease-in-out"
     :style="{ width: shouldCollapse ? collapsedWidth : width }"
   >
@@ -9,7 +14,7 @@
          it from SidebarHeader / SidebarSection / SidebarLabel / SidebarItem
          and plain markup. -->
     <slot />
-  </div>
+  </nav>
 </template>
 
 <script setup lang="ts">
@@ -21,6 +26,7 @@ const props = withDefaults(defineProps<SidebarProps>(), {
   collapsible: true,
   width: '15rem',
   collapsedWidth: '3rem',
+  ariaLabel: 'Main',
 })
 
 defineSlots<{

package/src/components/Sidebar/SidebarHeader.vue

@@ -4,7 +4,55 @@
        the sidebar gutter (px-2) itself — so consumers drop it straight into
        <Sidebar> without a wrapping padding div. -->
   <div data-slot="sidebar-header" class="flex h-12 shrink-0 items-center px-1">
-    <Dropdown :options="props.menuItems" match-trigger-width>
+    <!-- The logo + title block. Declared once (this renders nothing) and
+         reused by both branches below, so the interactive and the static
+         header cannot drift apart. -->
+    <DefineIdentity>
+      <div
+        v-if="showLogo"
+        class="size-7 shrink-0 rounded-[6px] overflow-hidden"
+      >
+        <slot name="prefix">
+          <img
+            v-if="typeof props.logo === 'string'"
+            :src="props.logo"
+            class="w-full h-full object-cover"
+            alt="Logo"
+          />
+          <div
+            v-else-if="!props.logo"
+            class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
+          >
+            {{ props.title.charAt(0).toUpperCase() }}
+          </div>
+          <component v-else :is="props.logo" class="w-full h-full" />
+        </slot>
+      </div>
+      <div
+        class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
+        :class="
+          isCollapsed
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : showLogo
+              ? 'ml-2 w-auto opacity-100'
+              : 'ml-0 w-auto opacity-100'
+        "
+      >
+        <!-- The size sits on the line itself, not on a span inside a
+           leading-none div: a line box built from a strut at the
+           inherited size and text at another puts the baseline at a
+           different offset in an app whose layout sets a smaller base
+           size, and the header text sat a px lower there. -->
+        <div class="truncate text-base-medium leading-tighter text-ink-gray-8">
+          {{ props.title }}
+        </div>
+        <div class="mt-0.5 truncate text-sm leading-tighter text-ink-gray-6">
+          {{ props.subtitle }}
+        </div>
+      </div>
+    </DefineIdentity>
+
+    <Dropdown v-if="hasMenu" :options="props.menuItems" match-trigger-width>
       <template v-slot="{ open }">
         <button
           class="flex h-10 items-center rounded-4 px-1.5 duration-300 ease-in-out"
@@ -16,52 +64,7 @@
                 : 'w-full hover:bg-surface-gray-3'
           "
         >
-          <div
-            v-if="showLogo"
-            class="size-7 shrink-0 rounded-[6px] overflow-hidden"
-          >
-            <slot name="prefix">
-              <img
-                v-if="typeof props.logo === 'string'"
-                :src="props.logo"
-                class="w-full h-full object-cover"
-                alt="Logo"
-              />
-              <div
-                v-else-if="!props.logo"
-                class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
-              >
-                {{ props.title.charAt(0).toUpperCase() }}
-              </div>
-              <component v-else :is="props.logo" class="w-full h-full" />
-            </slot>
-          </div>
-          <div
-            class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
-            :class="
-              isCollapsed
-                ? 'ml-0 w-0 overflow-hidden opacity-0'
-                : showLogo
-                  ? 'ml-2 w-auto opacity-100'
-                  : 'ml-0 w-auto opacity-100'
-            "
-          >
-            <!-- The size sits on the line itself, not on a span inside a
-                 leading-none div: a line box built from a strut at the
-                 inherited size and text at another puts the baseline at a
-                 different offset in an app whose layout sets a smaller base
-                 size, and the header text sat a px lower there. -->
-            <div
-              class="truncate text-base-medium leading-tighter text-ink-gray-8"
-            >
-              {{ props.title }}
-            </div>
-            <div
-              class="mt-0.5 truncate text-sm leading-tighter text-ink-gray-6"
-            >
-              {{ props.subtitle }}
-            </div>
-          </div>
+          <ReuseIdentity />
           <div
             class="duration-300 ease-in-out"
             :class="
@@ -75,10 +78,24 @@
         </button>
       </template>
     </Dropdown>
+
+    <!--
+      No menu items, nothing to open: a plain div, with the trigger's box but
+      no chevron, no hover background and no tab stop. The identity block keeps
+      the same x/y either way, so adding menu items later does not move it.
+    -->
+    <div
+      v-else
+      class="flex h-10 items-center rounded-4 px-1.5 duration-300 ease-in-out"
+      :class="isCollapsed ? 'w-auto' : 'w-full'"
+    >
+      <ReuseIdentity />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
 import { computed, inject } from 'vue'
 import Dropdown from '../Dropdown/Dropdown.vue'
 import { SidebarHeaderProps, sidebarCollapsedKey } from './types'
@@ -95,9 +112,12 @@ defineSlots<{
   prefix?: () => any
 }>()
 
+const [DefineIdentity, ReuseIdentity] = createReusableTemplate()
+
 const isCollapsed = inject(
   sidebarCollapsedKey,
   computed(() => false),
 )
 const showLogo = computed(() => props.showLogo !== false)
+const hasMenu = computed(() => Boolean(props.menuItems?.length))
 </script>

package/src/components/Sidebar/SidebarItem.vue

@@ -2,6 +2,7 @@
   <div
     data-slot="sidebar-item"
     :data-state="resolvedActive ? 'active' : 'inactive'"
+    v-bind="rootAttrs"
     class="group/sidebar-item flex h-7 items-center rounded-4 transition"
     :class="
       resolvedActive
@@ -16,13 +17,18 @@
       RouterLink component object or the 'a' string is safe; only a raw 'button'
       string collides with the globally-registered <Button>, so that stays a
       literal <button v-else>. The inner content is identical in both branches.
+
+      `controlAttrs` is spread before `linkAttrs` and before the component's own
+      attributes, so a caller cannot overwrite `href` / `to`, `aria-current` or
+      the classes. `aria-label` is the exception: `ariaLabel` returns the
+      caller's value when there is one.
     -->
     <component
       :is="linkComponent"
       v-if="route || href"
-      v-bind="linkAttrs"
+      v-bind="{ ...controlAttrs, ...linkAttrs }"
       :accesskey="accessKey"
-      :aria-label="tooltipText || undefined"
+      :aria-label="ariaLabel"
       :aria-current="resolvedActive ? 'page' : undefined"
       class="flex h-full min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
       @click="handleClick"
@@ -38,7 +44,7 @@
              square and back (the whole row is already the hit target). -->
         <span class="grid shrink-0 place-items-center">
           <slot name="prefix">
-            <SidebarItemIcon :icon="icon" />
+            <Icon :icon="icon" class="size-4 text-ink-gray-6" />
           </slot>
         </span>
       </Tooltip>
@@ -63,8 +69,9 @@
     <button
       v-else
       type="button"
+      v-bind="controlAttrs"
       :accesskey="accessKey"
-      :aria-label="tooltipText || undefined"
+      :aria-label="ariaLabel"
       class="flex h-full text-left min-w-0 flex-1 items-center rounded-4 pl-2 focus-visible:ring-0 focus-visible:focus-ring"
       @click="handleClick"
     >
@@ -79,7 +86,7 @@
              square and back (the whole row is already the hit target). -->
         <span class="grid shrink-0 place-items-center">
           <slot name="prefix">
-            <SidebarItemIcon :icon="icon" />
+            <Icon :icon="icon" class="size-4 text-ink-gray-6" />
           </slot>
         </span>
       </Tooltip>
@@ -127,13 +134,41 @@ import {
   inject,
   onMounted,
   ref,
+  useAttrs,
   useTemplateRef,
 } from 'vue'
 import { RouterLink } from 'vue-router'
+import Icon from '../Icon/Icon.vue'
 import Tooltip from '../Tooltip/Tooltip.vue'
-import SidebarItemIcon from './SidebarItemIcon.vue'
 import { SidebarItemProps, sidebarCollapsedKey } from './types'
 
+// The root <div> is a wrapper, not the control: the link/button and the
+// #suffix zone are siblings inside it. Without this, every fallthrough
+// attribute stopped at the wrapper, so `target`, `rel`, `data-*` and `aria-*`
+// never reached the element they describe.
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+// The split. `class`, `style` and event listeners belong to the whole row, so
+// they stay on the wrapper: a row background or a drag-and-drop ring has to
+// cover the #suffix zone, and so does a listener. Mail and Drive make a folder
+// row a drop target with `@dragover` / `@drop` while the suffix holds the
+// unread count and the options menu. On the inner control those events would
+// miss that strip. Everything else describes the control and goes there.
+// `onClick` is a declared prop, so it is never in `attrs`; it stays bound to
+// the control through `handleClick`.
+const isRootAttr = (key: string) =>
+  key === 'class' || key === 'style' || /^on[A-Z]/.test(key)
+
+const rootAttrs = computed(() =>
+  Object.fromEntries(Object.entries(attrs).filter(([key]) => isRootAttr(key))),
+)
+
+const controlAttrs = computed(() =>
+  Object.fromEntries(Object.entries(attrs).filter(([key]) => !isRootAttr(key))),
+)
+
 // `active` must default to `undefined`, not Vue's implicit boolean `false` —
 // "not passed" and "passed false" are different states here: absence falls
 // through to route inference.
@@ -166,6 +201,15 @@ onMounted(() => {
 })
 const tooltipText = computed(() => props.label || slotLabel.value)
 
+// A caller's `aria-label` wins over the derived one. It is the more specific
+// name, and it is the only way to name a row whose visible text is not its
+// full name (a folder row that also announces its unread count). Every other
+// attribute the component computes is bound after `controlAttrs`, so a caller
+// cannot overwrite it.
+const ariaLabel = computed(
+  () => (attrs['aria-label'] as string) || tooltipText.value || undefined,
+)
+
 // Read the router/route off global properties instead of useRouter()/useRoute()
 // so this component works — without warnings or crashes — when mounted outside a
 // vue-router app (docs, tests, embedded use). vue-router installs $router/$route

package/src/components/Sidebar/SidebarSection.vue

@@ -16,6 +16,7 @@
         <h3> inside it strips the heading from the accessibility tree.
       -->
       <h3
+        :id="headingId"
         class="h-4 text-sm leading-tighter text-ink-gray-5 transition-all duration-300 ease-in-out"
         :class="
           isSidebarCollapsed
@@ -25,7 +26,6 @@
       >
         <button
           v-if="collapsible"
-          :id="triggerId"
           type="button"
           class="flex items-center gap-1 rounded-4 focus-visible:ring-0 focus-visible:focus-ring"
           :aria-expanded="!isSectionCollapsed"
@@ -64,15 +64,20 @@
         resolve to a real element at all times, including the instant
         aria-expanded flips to "false" — an id that only exists while
         expanded breaks the reference exactly when it's read.
+
+        role="group", not a <nav>: Sidebar is already the navigation landmark,
+        and a landmark inside a landmark buys nothing. The group takes its
+        name from the <h3>, so a non-collapsible section is named too.
       -->
-      <nav
+      <div
         v-show="!isSectionCollapsed"
         :id="bodyId"
-        :aria-labelledby="collapsible && label ? triggerId : undefined"
+        role="group"
+        :aria-labelledby="label ? headingId : undefined"
         class="flex flex-col gap-0.5"
       >
         <slot />
-      </nav>
+      </div>
     </transition>
   </div>
 </template>
@@ -109,6 +114,8 @@ defineEmits<{
 /** v-model. Whether the section is collapsed. Bind it to own the state (start a section collapsed, persist the choice); left unbound the section manages it internally, starting expanded. */
 const isSectionCollapsed = defineModel<boolean>('collapsed', { default: false })
 
-const triggerId = useId()
+// The heading carries the id, not the trigger button: a non-collapsible
+// section has no button, and the group still has to be named.
+const headingId = useId()
 const bodyId = useId()
 </script>

package/src/components/Sidebar/types.ts

@@ -28,6 +28,13 @@ export type SidebarProps = {
 
   /** Collapsed width as a CSS length. */
   collapsedWidth?: string
+
+  /**
+   * Accessible name of the `<nav>` landmark. Default: `'Main'`. Give a second
+   * sidebar on the same page its own name, and translate it in a localised
+   * app — the library ships no translation layer.
+   */
+  ariaLabel?: string
 }
 
 export interface SidebarItemProps {
@@ -38,8 +45,9 @@ export interface SidebarItemProps {
   accessKey?: string
 
   /**
-   * Leading icon: a CSS class (e.g. `lucide-box`), plain text, or a component.
-   * Ignored when the `#prefix` slot is used.
+   * Leading icon: a `lucide-*` class, an emoji, or a component. Any other
+   * string renders nothing and warns in dev — put initials in the `#prefix`
+   * slot instead. Ignored when the `#prefix` slot is used.
    */
   icon?: string | Component
 

package/src/components/SidebarRail/SidebarRail.md

@@ -36,4 +36,8 @@ The `badge` count shows as a pill (`badgeStyle="count"`) or a dot
 a dot surfaces the real number in the tooltip. The badge pill teleports to
 `<body>` so an `overflow-hidden` scroll container can't clip it.
 
+Attributes you write on `SidebarRailItem` land on the clickable cell — the
+`<button>` or the link — not on the tooltip wrapper, and a `class` adds to the
+cell's own classes.
+
 <!-- @include: ./SidebarRail.api.md -->

package/src/components/SidebarRail/SidebarRailItem.vue

@@ -10,11 +10,16 @@
       literal v-else because a raw 'button' string can resolve to the globally
       registered <Button> in consumer apps. The inner content is identical in
       both branches.
+
+      $attrs is spread before the component's own attributes, so a caller
+      cannot overwrite data-slot / data-state, which tests and app CSS select
+      on. `class` is exempt: Vue merges class and style whatever the order, so
+      a caller's class adds to `cellClasses` instead of replacing it.
     -->
     <component
       :is="linkComponent"
       v-if="route || href"
-      v-bind="linkAttrs"
+      v-bind="{ ...linkAttrs, ...$attrs }"
       data-slot="sidebar-rail-item"
       :data-variant="variant"
       :data-state="resolvedActive ? 'active' : 'inactive'"
@@ -36,6 +41,7 @@
     <button
       v-else
       type="button"
+      v-bind="$attrs"
       data-slot="sidebar-rail-item"
       :data-variant="variant"
       :data-state="resolvedActive ? 'active' : 'inactive'"
@@ -73,6 +79,11 @@ import Tooltip from '../Tooltip/Tooltip.vue'
 import SidebarRailItemBadge from './SidebarRailItemBadge.vue'
 import type { SidebarRailItemProps } from './types'
 
+// The root is <Tooltip>, which drops what it receives. Without this, every
+// fallthrough attribute a caller writes on <SidebarRailItem> is lost; the two
+// branches below re-bind them onto the real clickable cell instead.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SidebarRailItemProps>(), {
   variant: 'subtle',
   active: undefined,

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

@@ -15,7 +15,7 @@ import {
 import type { MediaDimensions } from '#molecules/editor/extensions/shared/media-dimensions'
 import type {
   InsertMode,
-  UploadedFile,
+  UploadedMedia,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
 /** Optional intrinsic dimensions (null when the probe failed). */
@@ -120,7 +120,7 @@ export function applyUploadSuccess(
   view: EditorView,
   nodeName: string,
   uploadId: string,
-  uploaded: UploadedFile,
+  uploaded: UploadedMedia,
 ): void {
   const pos = findNodeByUploadId(view, nodeName, uploadId)
   if (pos === null) return

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

@@ -48,7 +48,7 @@ import type {
   MediaUploadEngine,
   MediaUploadOptions,
   MediaUploadRequestOptions,
-  UploadedFile,
+  UploadedMedia,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
@@ -58,7 +58,7 @@ export type {
   MediaUploadOptions,
   MediaUploadRequestOptions,
   UploadFunction,
-  UploadedFile,
+  UploadedMedia,
   UploadResult,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
@@ -97,7 +97,7 @@ export async function uploadFile(
   file: File,
   options: MediaUploadOptions,
   requestOptions?: MediaUploadRequestOptions,
-): Promise<UploadedFile> {
+): Promise<UploadedMedia> {
   if (!options.uploadFunction) {
     throw new Error('uploadFunction option is not provided')
   }

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

@@ -46,7 +46,7 @@ declare module '@tiptap/core' {
  * The index signature keeps server fields the editor does not know about, so
  * an upload handler can return the raw File document.
  */
-export interface UploadedFile extends Partial<FrappeUploadedFile> {
+export interface UploadedMedia extends Partial<FrappeUploadedFile> {
   file_url: string
   width?: number | null
   height?: number | null
@@ -72,7 +72,7 @@ export interface MediaUploadRequestOptions {
 export type UploadFunction = (
   file: File,
   options?: MediaUploadRequestOptions,
-) => Promise<UploadedFile>
+) => Promise<UploadedMedia>
 
 /**
  * Effective upload options. Mirrors the legacy extension option shape: the only
@@ -88,7 +88,7 @@ export interface MediaUploadOptions {
 /** Outcome of a no-doc-mutation single-file upload. */
 export interface UploadResult {
   success: boolean
-  file?: UploadedFile
+  file?: UploadedMedia
   error?: Error
 }
 

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

@@ -3,7 +3,7 @@
  * content-paste path stop each declaring their own `UploadResult` /
  * `MediaUploadOptions` interfaces.
  *
- * `UploadResult`, `MediaUploadOptions` and `UploadedFile` are OWNED by the image
+ * `UploadResult`, `MediaUploadOptions` and `UploadedMedia` are OWNED by the image
  * cluster's `media-upload-types.ts` (the engine's canonical type surface); they
  * are re-exported here so consumers have one stable import for the whole upload
  * value-type vocabulary. The only type added here is {@link ExistingImage},
@@ -13,7 +13,7 @@ export type {
   MediaUploadOptions,
   UploadFunction,
   UploadResult,
-  UploadedFile,
+  UploadedMedia,
 } from '#molecules/editor/extensions/shared/media-upload-types'
 
 /**

package/src/molecules/editor/index.ts

@@ -8,7 +8,7 @@ export {
   useEditor,
   type Editor as TiptapEditor,
   type JSONContent,
-  type UploadedFile,
+  type UploadedMedia,
   type UploadFunction,
   type MediaUploadProgress,
 } from './useEditor'

package/src/molecules/editor/useEditor.ts

@@ -43,11 +43,11 @@ export type UseEditorOptions = {
 
 /**
  * The upload result contract, re-exported so `frappe-ui/editor` keeps one
- * `UploadedFile` name. The canonical declaration lives next to the media
+ * `UploadedMedia` name. The canonical declaration lives next to the media
  * upload engine.
  */
 export type {
-  UploadedFile,
+  UploadedMedia,
   UploadFunction,
   MediaUploadProgress,
   MediaUploadRequestOptions,

package/src/utils/useFileUpload.ts

@@ -83,7 +83,7 @@ export interface UploadState {
   result: UploadedFile | null
 }
 
-export interface UploadedFile {
+export type UploadedFile = {
   file_name: string
   file_size: number
   file_url: string

package/src/components/Sidebar/SidebarItemIcon.vue

@@ -1,25 +0,0 @@
-<template>
-  <!-- Icon fallback used when no #prefix slot is supplied: a lucide CSS class,
-       plain text, or a component. -->
-  <span
-    v-if="isLucideClass"
-    class="size-4 text-ink-gray-6"
-    :class="icon as string"
-    aria-hidden="true"
-  />
-  <span v-else-if="typeof icon === 'string'" class="size-4 text-ink-gray-6">
-    {{ icon }}
-  </span>
-  <component v-else-if="icon" :is="icon" class="size-4 text-ink-gray-6" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Component } from 'vue'
-
-const props = defineProps<{ icon?: string | Component }>()
-
-const isLucideClass = computed(
-  () => typeof props.icon === 'string' && props.icon.startsWith('lucide-'),
-)
-</script>