@rebasepro/admin 0.2.1 → 0.2.4

package/src/components/RebaseShell.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import {
     useRebaseRegistry
 } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
 
 import { RebaseAuthGate } from "./RebaseAuthGate";
 import { RebaseNavigation } from "./RebaseNavigation";
@@ -51,19 +52,21 @@ export function RebaseShell(props: RebaseShellProps) {
     return (
         <RebaseAuthGate>
             <RebaseNavigation>
-                <RebaseRouteDefs
-                    layout={
-                        <RebaseLayout
-                            title={title}
-                            appBar={appBar}
-                            drawer={drawer}
-                            autoOpenDrawer={autoOpenDrawer}
-                            devViews={devViews}
-                        />
-                    }
-                >
-                    {children}
-                </RebaseRouteDefs>
+                <ErrorBoundary fullPage>
+                    <RebaseRouteDefs
+                        layout={
+                            <RebaseLayout
+                                title={title}
+                                appBar={appBar}
+                                drawer={drawer}
+                                autoOpenDrawer={autoOpenDrawer}
+                                devViews={devViews}
+                            />
+                        }
+                    >
+                        {children}
+                    </RebaseRouteDefs>
+                </ErrorBoundary>
             </RebaseNavigation>
         </RebaseAuthGate>
     );

package/src/components/SearchIconsView.tsx

@@ -10,18 +10,11 @@ import {
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
-import { iconsSearch, iconSynonyms } from "@rebasepro/core";
+import { iconsSearch } from "@rebasepro/core";
 import { useTranslation } from "@rebasepro/core";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (iconSynonyms && process.env.NODE_ENV !== "production") {
-    Object.keys(iconSynonyms).forEach((icon: string) => {
-        if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
-        }
-    });
-}
 
 function toPascalCase(str: string): string {
     return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');

package/src/components/SelectableTable/SelectableTable.tsx

@@ -243,11 +243,11 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                 ref={ref}>
 
                 <VirtualTable
-                    data={data}
+                    data={data as any}
                     columns={columns}
                     // @ts-ignore
                     cellRenderer={cellRenderer}
-                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? (onRowClick as any) : undefined)}
                     onEndReached={loadNextPage}
                     onResetPagination={resetPagination}
                     error={dataLoadingError}
@@ -262,8 +262,8 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     initialScroll={initialScroll}
                     onScroll={onScroll}
                     checkFilterCombination={checkFilterCombination}
-                    createFilterField={filterable ? createFilterField : undefined}
-                    rowClassName={useCallback((entity: Entity<M>) => {
+                    createFilterField={filterable ? (createFilterField as any) : undefined}
+                    rowClassName={useCallback((entity: any) => {
                         return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
@@ -287,16 +287,13 @@ function createFilterField({
     column,
     hidden,
     setHidden
-}: FilterFormFieldProps<{
-    resolvedProperty: Property,
-    disabled: boolean,
-}>): React.ReactNode {
+}: FilterFormFieldProps<any>): React.ReactNode {
 
     if (!column.custom) {
         return null;
     }
 
-    const { resolvedProperty } = column.custom;
+    const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
 
     const isArray = resolvedProperty?.type === "array";
     const ofVal = isArray && resolvedProperty ? resolvedProperty.of : undefined;
@@ -316,7 +313,7 @@ function createFilterField({
             hidden={hidden}
             setHidden={setHidden}/>;
     } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue}
+        return <RelationFilterField value={filterValue as any}
             setValue={setFilterValue}
             name={id as string}
             relation={baseProperty.relation}
@@ -350,7 +347,7 @@ function createFilterField({
     }
 
     return (
-        <div>{`Currently the filter field ${resolvedProperty.type} is not supported`}</div>
+        <div>{`Currently the filter field ${resolvedProperty?.type} is not supported`}</div>
     );
 }
 

package/src/components/SelectableTable/SelectionStore.ts

@@ -43,7 +43,7 @@ export type SelectionStore = ReturnType<typeof createSelectionStore>;
  * `selected` boolean actually changes (not on every store update).
  */
 export function useCellSelected(
-    store: SelectionStore,
+    store: { getSnapshot: () => SelectedCellProps<any> | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from "@rebasepro/core";
 
 interface BooleanFieldProps {
     name: string,
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
     title?: string;
 }
 
@@ -37,7 +37,7 @@ export function BooleanFilterField({
         <div className="w-full">
             <BooleanSwitchWithLabel
                 size={"medium"}
-                value={valueSetToTrue}
+                value={valueSetToTrue as boolean | null}
                 allowIndeterminate={true}
                 onValueChange={(v: boolean | null) => updateFilter(v === null ? undefined : v)}
                 label={!valueSet

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -6,8 +6,8 @@ import { useCustomizationController } from "@rebasepro/core";
 interface DateTimeFilterFieldProps {
     name: string,
     mode?: "date" | "date_time",
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
     isArray?: boolean;
     title?: string;
     timezone?: string;
@@ -46,7 +46,7 @@ export function DateTimeFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
-    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue as Date | null | undefined);
 
     const isNullOperation = operation === "is-null";
 

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -11,8 +11,8 @@ import { useCollectionRegistryController } from "../../../index";
 
 interface ReferenceFilterFieldProps {
     name: string,
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
-    setValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
+    setValue: (filterValue?: [VirtualTableWhereFilterOp, unknown]) => void;
     isArray?: boolean;
     path?: string;
     title?: string;
@@ -60,7 +60,7 @@ export function ReferenceFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue as EntityReference | EntityReference[] | undefined | null);
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
@@ -104,11 +104,11 @@ export function ReferenceFilterField({
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
 
-    const onSingleEntitySelected = (entity: Entity<any>) => {
+    const onSingleEntitySelected = (entity: Entity<Record<string, unknown>>) => {
         updateFilter(operation, getReferenceFrom(entity));
     };
 
-    const onMultipleEntitiesSelected = (entities: Entity<any>[]) => {
+    const onMultipleEntitiesSelected = (entities: Entity<Record<string, unknown>>[]) => {
         updateFilter(operation, entities.map(e => getReferenceFrom(e)));
     };
 

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from "@rebasepro/core";
 interface StringNumberFilterFieldProps {
     name: string,
     type: "string" | "number";
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
     isArray?: boolean;
     enumValues?: EnumValueConfig[];
     title?: string;
@@ -57,7 +57,7 @@ export function StringNumberFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue as string | number | string[] | number[] | null | undefined);
 
     const isNullOperation = operation === "is-null";
 

package/src/components/SideEntityProvider.tsx

@@ -1,3 +1,4 @@
+import type { SideEntityController } from "@rebasepro/types";
 import React from "react";
 import { useBuildSideEntityController } from "../hooks/useBuildSideEntityController";
 import { useBuildSideDialogsController } from "../hooks/useBuildSideDialogsController";
@@ -68,7 +69,7 @@ export function SideEntityProvider({ children }: { children: React.ReactNode })
  * Internal component that auto-registers side entity and breadcrumbs
  * into the Studio bridge. Must be a child of BreadcrumbsProvider.
  */
-function BridgeAutoRegistrar({ sideEntityController }: { sideEntityController: any }) {
+function BridgeAutoRegistrar({ sideEntityController }: { sideEntityController: SideEntityController }) {
     const breadcrumbs = useBreadcrumbsController();
     useBridgeRegistration("sideEntityController", sideEntityController);
     useBridgeRegistration("breadcrumbs", breadcrumbs);

package/src/components/admin/RolesView.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState } from "react";
 import { useCollectionRegistryController } from "../../index";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { useSnackbarController, useTranslation, useInternalUserManagementController } from "@rebasepro/core";
 import { getDataSourceCapabilities, Role, SecurityRule, UserManagementDelegate } from "@rebasepro/types";
 import { useBreadcrumbsController } from "../../index";
 import {
@@ -38,7 +38,12 @@ import { ConfirmationDialog } from "@rebasepro/core";
 // ============================================
 // RolesView Component
 // ============================================
-export function RolesView({ userManagement }: { userManagement: UserManagementDelegate }) {
+export function RolesView({ userManagement: userManagementProp }: { userManagement?: UserManagementDelegate }) {
+    const userManagementContext = useInternalUserManagementController();
+    const userManagement = userManagementProp ?? userManagementContext;
+    if (!userManagement) {
+        return null;
+    }
     const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation, rolesError } = userManagement;
     const snackbarController = useSnackbarController();
     const { t } = useTranslation();

package/src/components/admin/UsersView.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { User } from "@rebasepro/types";
-import { useSnackbarController, useAuthController, useTranslation } from "@rebasepro/core";
+import { useSnackbarController, useAuthController, useTranslation, useInternalUserManagementController } from "@rebasepro/core";
 import { useBreadcrumbsController } from "../../index";
 import {
     Alert,
@@ -50,9 +50,14 @@ const PAGE_SIZE = 25;
 // ============================================
 // UsersView Component
 // ============================================
-export function UsersView({ userManagement }: {
-    userManagement: UserManagementDelegate;
+export function UsersView({ userManagement: userManagementProp }: {
+    userManagement?: UserManagementDelegate;
 }) {
+    const userManagementContext = useInternalUserManagementController();
+    const userManagement = userManagementProp ?? userManagementContext;
+    if (!userManagement) {
+        return null;
+    }
     const { roles, saveUser, createUser, deleteUser, resetPassword, loading: delegateLoading, bootstrapAdmin, usersError } = userManagement;
     const snackbarController = useSnackbarController();
     const { user: loggedInUser } = useAuthController();
@@ -212,8 +217,8 @@ message: error instanceof Error ? error.message : "Failed to load users" });
 
     const totalPages = Math.max(1, Math.ceil(displayTotal / PAGE_SIZE));
 
-    // Check if any admin exists
-    const hasAdmin = allUsers.some(u => u.roles?.includes("admin"));
+    // Check if any admin exists (use dedicated flag from delegate, or fallback to array scan)
+    const hasAdmin = userManagement.hasAdminUsers ?? allUsers.some(u => u.roles?.includes("admin"));
 
     const handleBootstrap = async () => {
         if (!bootstrapAdmin) return;
@@ -394,9 +399,10 @@ roles: ["w-16", "w-16"] }
                                             </Tooltip>
                                         )}
                                         {deleteUser && (
-                                            <Tooltip asChild title={t("delete_this_user")}>
+                                            <Tooltip asChild title={loggedInUser?.uid === user.uid ? (t("cannot_delete_own_account") || "Cannot delete your own account") : t("delete_this_user")}>
                                                 <IconButton
                                                     size="small"
+                                                    disabled={loggedInUser?.uid === user.uid}
                                                     onClick={(e) => {
                                                         e.stopPropagation();
                                                         setUserToDelete(user);

package/src/components/app/Drawer.tsx

@@ -13,6 +13,7 @@ export function Drawer({
                            title,
                            logo,
                            logoDestination,
+                           footerActions,
                            className,
                            style
                        }: {
@@ -20,10 +21,17 @@ export function Drawer({
     title?: React.ReactNode,
     logo?: string,
     logoDestination?: string,
+    /**
+     * Custom content for the drawer footer actions area (language, theme, user menu).
+     * - `undefined` — renders the default `DrawerFooterActions`.
+     * - `null` — renders nothing (hides the footer actions).
+     * - `ReactNode` — renders the provided custom content.
+     */
+    footerActions?: React.ReactNode | null,
     className?: string,
     style?: React.CSSProperties
 }) {
-    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} className={className} style={style}/>;
+    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} footerActions={footerActions} className={className} style={style}/>;
     return <>{usedChildren}</>;
 }
 

package/src/components/app/Scaffold.tsx

@@ -74,7 +74,11 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+        const setOnHoverFalse = useCallback(() => {
+            // Don't collapse the drawer while a popover/dropdown is open
+            if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            setOnHover(false);
+        }, []);
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);

package/src/data_export/export/export.ts

@@ -8,7 +8,7 @@ interface Header {
 
 export interface DownloadEntitiesExportParams<M extends Record<string, unknown>> {
     data: Entity<M>[];
-    additionalData: Record<string, any>[] | undefined;
+    additionalData: Record<string, unknown>[] | undefined;
     properties: Properties;
     propertiesOrder: string[] | undefined;
     name: string;
@@ -52,14 +52,14 @@ export function downloadEntitiesExport<M extends Record<string, unknown>>({
     }
 }
 
-export function getEntityCSVExportableData(data: Entity<any>[],
-    additionalData: Record<string, any>[] | undefined,
+export function getEntityCSVExportableData(data: Entity<Record<string, unknown>>[],
+    additionalData: Record<string, unknown>[] | undefined,
     properties: Properties,
     headers: Header[],
     dateExportType: "timestamp" | "string"
 ) {
 
-    const mergedData: any[] = data.map(e => ({
+    const mergedData: Record<string, unknown>[] = data.map(e => ({
         id: e.id,
         ...processValuesForExport(e.values, properties, "csv", dateExportType)
     }));
@@ -76,13 +76,13 @@ export function getEntityCSVExportableData(data: Entity<any>[],
     });
 }
 
-export function getEntityJsonExportableData(data: Entity<any>[],
-    additionalData: Record<string, any>[] | undefined,
+export function getEntityJsonExportableData(data: Entity<Record<string, unknown>>[],
+    additionalData: Record<string, unknown>[] | undefined,
     properties: Properties,
     dateExportType: "timestamp" | "string"
 ) {
 
-    const mergedData: any[] = data.map(e => ({
+    const mergedData: Record<string, unknown>[] = data.map(e => ({
         id: e.id,
         ...processValuesForExport(e.values, properties, "json", dateExportType)
     }));
@@ -154,15 +154,15 @@ function getHeaders(property: Property, propertyKey: string, prefix = ""): Heade
     }
 }
 
-function processValueForExport(inputValue: any,
+function processValueForExport(inputValue: unknown,
     property: Property,
     exportType: "csv" | "json",
     dateExportType: "timestamp" | "string"
-): any {
+): unknown {
 
-    let value;
+    let value: unknown;
     if (property.type === "map" && property.properties) {
-        value = processValuesForExport(inputValue, property.properties as Properties, exportType, dateExportType);
+        value = processValuesForExport(inputValue as Record<string, unknown>, property.properties as Properties, exportType, dateExportType);
     } else if (property.type === "array") {
         if (property.of && Array.isArray(inputValue)) {
             if (Array.isArray(property.of)) {
@@ -178,7 +178,7 @@ function processValueForExport(inputValue: any,
         } else {
             value = inputValue;
         }
-    } else if (property.type === "reference" && inputValue && inputValue.isEntityReference && inputValue.isEntityReference()) {
+    } else if (property.type === "reference" && inputValue && typeof inputValue === "object" && "isEntityReference" in inputValue && typeof (inputValue as EntityReference).isEntityReference === "function" && (inputValue as EntityReference).isEntityReference()) {
         const ref = inputValue ? inputValue as EntityReference : undefined;
         value = ref ? ref.fullPath : null;
     } else if (property.type === "date" && inputValue instanceof Date) {
@@ -191,11 +191,11 @@ function processValueForExport(inputValue: any,
 }
 
 function processValuesForExport<M extends Record<string, unknown>>
-    (inputValues: Record<keyof M, any>,
+    (inputValues: Record<string, unknown>,
         properties: Properties,
         exportType: "csv" | "json",
         dateExportType: "timestamp" | "string"
-    ): Record<keyof M, any> {
+    ): Record<string, unknown> {
     const updatedValues = Object.entries(properties)
         .map(([key, property]) => {
             const inputValue = inputValues && (inputValues)[key];
@@ -204,14 +204,14 @@ function processValuesForExport<M extends Record<string, unknown>>
             return ({ [key]: updatedValue });
         })
         .reduce((a, b) => ({ ...a,
-...b }), {}) as Record<keyof M, any>;
+...b }), {}) as Record<string, unknown>;
     return { ...inputValues,
 ...updatedValues };
 }
 
-function entryToCSVRow(entry: any[]) {
+function entryToCSVRow(entry: unknown[]) {
     return entry
-        .map((v: any) => {
+        .map((v: unknown) => {
             if (v === null || v === undefined) return "";
             if (Array.isArray(v))
                 return "\"" + JSON.stringify(v).replaceAll("\"", "\"\"") + "\"";

package/src/data_import/components/DataNewPropertiesMapping.tsx

@@ -143,7 +143,7 @@ export function DataNewPropertiesMapping({
                                             defaultValue={getIn(importConfig.defaultValues, key)}
                                             onValueChange={(value) => {
                                                 const newValues = setIn(importConfig.defaultValues, key, value);
-                                                importConfig.setDefaultValues(newValues);
+                                                importConfig.setDefaultValues(newValues as Record<string, any>);
                                             }}/>
                                     </TableCell>
                                 </TableRow>;

package/src/editor/components/editor-bubble.tsx

@@ -1,17 +1,32 @@
 import { forwardRef, type ReactNode, useEffect, useRef, useState } from "react";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement } from "@floating-ui/dom";
+import {
+    autoUpdate,
+    computePosition,
+    flip,
+    offset,
+    shift,
+    type VirtualElement,
+    type Placement
+} from "@floating-ui/dom";
 import { NodeSelection } from "prosemirror-state";
 
 export interface EditorBubbleProps {
     children: ReactNode;
-    options?: any;
+    options?: { placement?: Placement; offset?: number };
     className?: string;
 }
 
 export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
-    ({ children, options, className }, ref) => {
-        const { view, state } = useProseMirrorContext();
+    ({
+         children,
+         options,
+         className
+     }, ref) => {
+        const {
+            view,
+            state
+        } = useProseMirrorContext();
         const menuRef = useRef<HTMLDivElement>(null);
         const [show, setShow] = useState(false);
 
@@ -43,7 +58,10 @@ export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
         useEffect(() => {
             if (!show || !view || !state || !menuRef.current) return;
 
-            const { from, to } = state.selection;
+            const {
+                from,
+                to
+            } = state.selection;
 
             // Fallback for end selection coords
             let start = view.coordsAtPos(from);
@@ -83,7 +101,10 @@ export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
                     placement: options?.placement || "top",
                     middleware: [offset(options?.offset || 8), flip(), shift()],
                     strategy: "fixed"
-                }).then(({ x, y }) => {
+                }).then(({
+                             x,
+                             y
+                         }) => {
                     if (menuRef.current) {
                         Object.assign(menuRef.current.style, {
                             left: `${x}px`,
@@ -102,9 +123,11 @@ export const EditorBubble = forwardRef<HTMLDivElement, EditorBubbleProps>(
             <div
                 ref={menuRef}
                 className={className}
-                style={{ position: "fixed",
-zIndex: 9999,
-visibility: "hidden" }}
+                style={{
+                    position: "fixed",
+                    zIndex: 9999,
+                    visibility: "hidden"
+                }}
                 onMouseDown={(e) => {
                     e.preventDefault(); // Don't lose focus inside ProseMirror
                 }}

package/src/editor/components/image-bubble.tsx

@@ -1,18 +1,24 @@
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement, type Placement } from "@floating-ui/dom";
 import { NodeSelection } from "prosemirror-state";
 import { TextField, defaultBorderMixin, Typography, cls } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 
 export interface ImageBubbleProps {
-    options?: any;
+    options?: { placement?: Placement; offset?: number };
     className?: string;
 }
 
 export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
-    ({ options, className }, ref) => {
-        const { view, state } = useProseMirrorContext();
+    ({
+         options,
+         className
+     }, ref) => {
+        const {
+            view,
+            state
+        } = useProseMirrorContext();
         const { t } = useTranslation();
         const menuRef = useRef<HTMLDivElement>(null);
         const [show, setShow] = useState(false);
@@ -23,8 +29,10 @@ export const ImageBubble = forwardRef<HTMLDivElement, ImageBubbleProps>(
         useEffect(() => {
             if (!view) return;
             const handleContextMenu = (e: MouseEvent) => {
-                const posInfo = view.posAtCoords({ left: e.clientX,
-top: e.clientY });
+                const posInfo = view.posAtCoords({
+                    left: e.clientX,
+                    top: e.clientY
+                });
                 if (posInfo && posInfo.inside >= 0) {
                     const node = view.state.doc.nodeAt(posInfo.inside);
                     if (node && node.type.name === "image") {
@@ -56,7 +64,10 @@ top: e.clientY });
         useEffect(() => {
             if (!show || !view || !state || !menuRef.current) return;
 
-            const { from, to } = state.selection;
+            const {
+                from,
+                to
+            } = state.selection;
             let start = view.coordsAtPos(from);
             let end = view.coordsAtPos(to);
 
@@ -92,7 +103,10 @@ top: e.clientY });
                     placement: options?.placement || "bottom",
                     middleware: [offset(options?.offset || 8), flip(), shift()],
                     strategy: "fixed"
-                }).then(({ x, y }) => {
+                }).then(({
+                             x,
+                             y
+                         }) => {
                     if (menuRef.current) {
                         Object.assign(menuRef.current.style, {
                             left: `${x}px`,
@@ -126,9 +140,11 @@ top: e.clientY });
         return (
             <div
                 ref={menuRef}
-                style={{ visibility: "hidden",
-position: "fixed",
-zIndex: 50 }}
+                style={{
+                    visibility: "hidden",
+                    position: "fixed",
+                    zIndex: 50
+                }}
                 className={cls("flex flex-col gap-1.5 p-2 w-56 max-w-[90vw] rounded-lg border bg-white dark:bg-surface-800 shadow-lg", defaultBorderMixin, className)}
                 onMouseDown={(e) => {
                     // Prevent mousedown from stealing focus from inputs

package/src/editor/components/index.ts

@@ -6,9 +6,9 @@ export { TableBubble } from "./table-bubble";
 
 export type JSONContent = {
     type?: string;
-    attrs?: Record<string, any>;
+    attrs?: Record<string, unknown>;
     content?: JSONContent[];
-    marks?: { type: string; attrs?: Record<string, any> }[];
+    marks?: { type: string; attrs?: Record<string, unknown> }[];
     text?: string;
-    [key: string]: any;
+    [key: string]: unknown;
 };