@fibery/ui-kit 4.0.0 → 4.2.0

package/src/date-picker/contexts.ts

@@ -1,7 +1,10 @@
-import noop from "lodash/noop";
-import {createContext} from "react";
+import {noop} from "@fibery/helpers/src/_";
+import {createContext, type Dispatch, type SetStateAction} from "react";
 
-export const StartEndFocusContext = createContext({
+export const StartEndFocusContext = createContext<{
+  focusOnStart: boolean;
+  setFocusOnStart: Dispatch<SetStateAction<boolean>>;
+}>({
   focusOnStart: true,
   setFocusOnStart: noop,
 });

package/src/date-picker/date-range-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
-import omit from "lodash/omit";
 import moment from "moment";
 import {forwardRef, useCallback, useRef} from "react";
 import {focusable} from "tabbable";
@@ -111,7 +110,7 @@ export const DateRangePicker = forwardRef<
           >
             <DateRangePickerPopupContent
               ref={ref}
-              {...omit(props, ["onChange", "value"])}
+              {...props}
               onChange={onDatesChange}
               value={dateValue}
               onKeyDown={onDatePickerKeyDown}

package/src/date-picker/single-date-picker.tsx

@@ -1,6 +1,5 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import omit from "lodash/omit";
 import type {Moment} from "moment";
 import moment from "moment";
 
@@ -191,7 +190,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
         {!allowRelativeDate || activeButton === "exact" ? (
           <SingleDatePickerPopupContent
             ref={ref}
-            {...omit(props, ["onChange", "value"])}
+            {...props}
             onChange={onDateChange}
             value={!isRelativeValue && value ? (value as Moment).toDate() : null}
             onKeyDown={onDatePickerKeyDown}

package/src/day-select/iso-week-day-select.tsx

@@ -1,10 +1,10 @@
-import range from "lodash/range";
 import moment from "moment";
 
 import type {Props} from "./day-select";
 import {DaySelect} from "./day-select";
 
-const isoWeekDays = range(1, 8).map((day) => {
+const isoWeekDays = Array.from({length: 7}, (_, i) => {
+  const day = i + 1;
   return {
     key: String(day),
     title: moment().isoWeekday(day).format("dd").charAt(0),

package/src/design-system/colors.ts

@@ -107,8 +107,9 @@ export function defsFromPalette({
     level2_6: [base[2], baseDark[6]],
 
     // muted bg (code, form fields)
-    level3exotic: [base[3], blackish], // FIXME try blackA[3] | baseDark[3] to make it less exotic
+    level3: [base[3], baseDark[3]],
     level3_1: [base[3], baseDark[1]],
+    level3_2: [base[3], baseDark[2]],
     level3_4: [base[3], baseDark[4]],
     level3_6: [base[3], baseDark[6]],
     level3_7: [base[3], baseDark[7]],
@@ -167,9 +168,9 @@ export function defsFromPalette({
 
   // --- Input borders (stroke shadows) ---
   const inputStrokes = {
-    disabled: [stroke1(alpha(base[6], 0.2)), stroke1(alpha(baseDark[8], 0.2))],
-    default: [stroke1(alpha(base[6], 0.7)), stroke1(alpha(baseDark[8], 0.7))],
-    hover: [stroke1(base[7]), stroke1(baseDark[8])],
+    disabled: [stroke1(alpha(base[6], 0.6)), stroke1(alpha(baseDark[8], 0.3))],
+    default: [stroke1(alpha(base[6], 0.8)), stroke1(alpha(baseDark[8], 0.4))],
+    hover: [stroke1(base[7]), stroke1(baseDark[7])],
     focus: [stroke1(base[8]), stroke1(baseDark[9])],
     error: [stroke1(red[11]), stroke1(red[7])],
     errorHover: [stroke1(alpha(red[11], 0.4)), stroke1(alpha(red[7], 0.4))],
@@ -190,6 +191,15 @@ export function defsFromPalette({
     ],
   } satisfies Defs;
 
+  // --- Floating panel (inbox item hover, rich text format bar, batch actions toolbar) ---
+  const floatingPanel = {
+    bg: raised.level2,
+    shadow: [
+      steps([stroke1(alpha(base[10], 0.15)), elevationSL(alpha(base[11], 0.15))]),
+      steps([stroke1(baseDark[6]), elevationSL(alpha(baseDark[1], 0.5))]),
+    ],
+  } satisfies Defs;
+
   // --- Card/container shadows ---
   const cardShadows = {
     subtle: [
@@ -232,7 +242,8 @@ export function defsFromPalette({
 
   const shadows = {
     // Elevations
-    surfaceElevationS: [elevationS(blackA[3]), elevationS(whiteA[3])],
+    // dark uses a subtle dark shadow (baseDark[1]) like entityBoxShadows — NOT a white glow
+    surfaceElevationS: [elevationS(blackA[3]), elevationS(alpha(baseDark[1], 0.05))],
     surfaceElevationM: [elevationM(blackA[5]), elevationM(whiteA[5])],
     surfaceElevationL: [elevationL(blackA[5]), elevationL(whiteA[5])],
 
@@ -250,16 +261,6 @@ export function defsFromPalette({
     shadowSidebar: [edgeLeft(alpha(base[10], 0.1)), edgeLeft(alpha(baseDark[1], 0.8))],
   } as const;
 
-  // names proposal: forbid color in keys (they all are colors) — restructure it better (separate shadows, borders etc)
-  // inspired by tailwind:
-  // bg-*	Sets the background color of an element
-  // text-*	Sets the text color of an element
-  // border-*	Sets the border color of an element
-  // shadow-*	Sets the color of box shadows
-  // fill-*	Sets the fill color of SVG elements
-  // stroke-*	Sets the stroke color of SVG elements
-  // TODO elevation = raised * shadow
-
   const transparentAlways = same(transparent);
   const whiteColor = same(white);
   const blackColor = same(black);
@@ -349,11 +350,10 @@ export function defsFromPalette({
   const bgTabHover = [alpha(base[11], 0.1), alpha(baseDark[11], 0.1)] as const;
 
   const viewHighlightBg = [accent[3], accentDark[3]] as const;
-  const notificationSelected = [accent[3], accentDark[4]] as const;
-  const bgCellGridDisabledOrHighlighted = [accent[4], accentDark[5]] as const;
-  const notificationSelectedHover = [accent[4], accentDark[6]] as const;
 
-  const fgSelection = [alpha(accent[9], 0.2), alpha(accentDark[9], 0.4)] as const;
+  const notificationSelected = [accent[3], accentDark[2]] as const;
+  const notificationSelectedHover = [accent[4], accentDark[3]] as const;
+  const bgCellGridDisabledOrHighlighted = [accent[4], accentDark[5]] as const;
 
   const warningColor = [alpha(yellow[6], 0.6), alpha(yellowDark[9], 0.4)] as const;
   const bgBtnGhostAccentHover = [alpha(accent[4], 0.8), alpha(accentDark[4], 0.8)] as const;
@@ -363,11 +363,14 @@ export function defsFromPalette({
   const bgBtnSoftNeutralDefault = [base[3], baseDark[3]] as const;
   const bgBtnSoftNeutralHover = [base[7], baseDark[7]] as const;
   const bgBtnSoftDestructiveHover = [red[6], redDark[6]] as const;
+  const bgBtnSoftAccentDefault = [accent[3], accentDark[4]] as const;
+
   const borderFocusRingAccent = same(alpha(accent[9], 0.3));
   const borderFocusRingNeutral = same(alpha(base[9], 0.3));
   const borderFocusRingDestructive = same(alpha(red[9], 0.3));
   const textWhiteboardSelectionLockedOrDisabled = [alpha(base[9], 0.5), alpha(baseDark[9], 0.5)] as const;
 
+  const fgSelection = [alpha(accent[9], 0.2), alpha(accentDark[9], 0.4)] as const;
   const fgSelectedText = same(base[2]);
   const fgSolidActiveText = same(alpha(white, 0.8));
 
@@ -426,15 +429,24 @@ export function defsFromPalette({
     // Accent base
     colorAccent: primary.accent,
 
-    // Rubbish dump
-    /** @deprecated */
+    //to be sorted. these are still in use
     darkenPrimary: same(getDarkenColor(accent[9])),
     whiteColor,
     blackColor,
-    mainBg: surface.level3exotic,
+    mainBg: surface.level3,
     panelBg: surface.level0,
+    panelBorder: [stroke1(alpha(base[8], 0.2)), stroke1(alpha(baseDark[8], 0.2))],
     panelContentBg: surface.level2_1,
-    colorBgRelationContainer: surface.level2_1,
+
+    //Database settings screens
+    dbSettingsSidebarBg: surface.level2,
+    dbSettingsSidebarItemHover: surface.level4,
+    dbSettingsSidebarIconBg: raised.level1,
+    dbSettingsSidebarIconBorder: shadowMenuHeaderAvatar,
+
+    dbSettingsCardBg: surface.level2,
+    dbSettingsCardBorder: [stroke1(alpha(base[6], 0.8)), stroke1(alpha(baseDark[6], 0.6))],
+    colorBgRelationContainer: surface.level1_1,
 
     // AI colors
     colorAI: fg.ai,
@@ -444,10 +456,14 @@ export function defsFromPalette({
     colorBgAIFloatingPanelContent: surface.level1_3,
     colorBgAISidebarContent: surface.level1,
 
+    // Floating panels (hover action toolbars, selection toolbar, rich-text format bar)
+    colorBgFloatingPanel: floatingPanel.bg,
+    shadowFloatingPanel: floatingPanel.shadow,
+
     // Other colors
     pageContentBg: surface.level0elevated,
-    colorBgPopup: raised.level2,
-    menuBg: surface.level3exotic,
+    colorBgPopup: [white, baseDark[3]],
+    menuBg: surface.level3,
     menuTextColor: fgMenuEtc,
     menuItemHoverColor: base5_6,
     menuSelectedTextColor: fgSelectedText,
@@ -482,7 +498,7 @@ export function defsFromPalette({
     shortcutBorderColor: [alpha(base[8], 0.5), alpha(baseDark[10], 0.2)],
 
     // Input
-    inputBgColor: surface.level0elevated,
+    inputBgColor: [white, baseDark[1]],
     inputDisabledBgColor: base6_6_opacity30,
     inputDisabledBorderColor: inputStrokes.disabled,
     inputCopyBgColor: surface.level3_4,
@@ -496,6 +512,7 @@ export function defsFromPalette({
     inputErrorBorderFocusColor: inputStrokes.errorFocus,
     inputErrorBorderFocusShadow: inputStrokes.errorFocusRing,
     inputBorderWarningColor: inputStrokes.warning,
+    //buttons and checkboxes and blockquote (why?)
     buttonPrimaryColor: primary.accent,
     buttonColor: fgAccentText,
     buttonPrimaryTextColor: [base[2], base[6]],
@@ -560,9 +577,9 @@ export function defsFromPalette({
     colorBgListItemGeneral: transparentAlways,
     colorBgListItemGeneralHover: surface.level3_4,
     colorBgListItemGeneralFocus: surface.level4_6,
-    colorBgListItemGeneralSelected: notificationSelected,
-    colorBgListItemGeneralSelectedHover: notificationSelectedHover,
-    colorBgListItemGeneralSelectedFocus: notificationSelectedHover,
+    colorBgListItemGeneralSelected: [accent[5], accentDark[5]],
+    colorBgListItemGeneralSelectedHover: [accent[6], accentDark[6]],
+    colorBgListItemGeneralSelectedFocus: [accent[6], accentDark[6]],
     colorBgListItemGeneralDisabled: transparentAlways,
     colorTextListItemGeneralDisabled: fg.muted,
     colorBgListItemGeneralSelectedDisabled: [accent[5], accentDark[5]],
@@ -570,7 +587,8 @@ export function defsFromPalette({
 
     // Search
     colorSearchSubtitle: fg.muted,
-    colorBgSearchRowHover: bgActionsMenuItemHover,
+    colorBgSearchPanel: [white, baseDark[2]],
+    colorBgSearchRowHover: [base[4], baseDark[3]],
     colorBgSearchRowCreateHover: [accent[4], accentDark[4]],
     opacitySearchItemDone: opacities.drag,
 
@@ -618,7 +636,7 @@ export function defsFromPalette({
     entityCardDoneColor: bgEntityCardDone,
     entityCardShadow: cardShadows.subtle,
     entityCardShadowHover: cardShadows.subtle,
-    colorBgSegmentedControl: [alpha(base[5], 0.8), alpha(baseDark[3], 0.8)],
+    colorBgSegmentedControl: [alpha(base[5], 0.8), alpha(baseDark[2], 0.8)],
     colorBgMenuHeaderAvatar: surface.level0elevated,
     shadowMenuHeaderAvatar: shadowMenuHeaderAvatar,
 
@@ -630,9 +648,9 @@ export function defsFromPalette({
     colorTextMenuItem: [alpha(base[12], 0.9), alpha(baseDark[12], 0.9)],
     colorBgMenuItem: transparentAlways,
     // :hover
-    colorBgMenuItemHover: [base[5], baseDark[2]],
+    colorBgMenuItemHover: [base[5], baseDark[5]],
     // :focus
-    colorBgMenuItemFocus: [base[6], baseDark[5]],
+    colorBgMenuItemFocus: [base[6], baseDark[6]],
     // Selected
     colorBgMenuItemSelected: [alpha(accent[5], 0.8), accentDark[3]],
     // :hover
@@ -700,7 +718,7 @@ export function defsFromPalette({
     filterGroup1Bg: surface.level2_6,
     filterGroup2Bg: surface.level3_7,
     filterGroupBorder: [blackA[3], whiteA[3]],
-    colorBgNotificationHover: surface.level3_4,
+    colorBgNotificationHover: surface.level3_2,
     colorBgNotificationSelected: notificationSelected,
     colorBgNotificationSelectedHover: notificationSelectedHover,
     disabledInversedTextColor: blackA25,
@@ -727,6 +745,9 @@ export function defsFromPalette({
 
     // Views
     viewBg: surface.level1,
+    colorBgViewMetaItem: surface.level0elevated,
+    collectionViewBg: surface.level1_1,
+    collectionViewBorder: inputStrokes.disabled,
     viewSecondaryBg: surface.level2,
     viewHighlightBg: viewHighlightBg,
 
@@ -796,7 +817,7 @@ export function defsFromPalette({
     colorIconButtonOutlineNeutral: fg.neutral,
     colorIconButtonOutlineDestructive: fg.destructive,
     // soft
-    colorBgButtonSoftAccentDefault: notificationSelected,
+    colorBgButtonSoftAccentDefault: bgBtnSoftAccentDefault,
     colorBgButtonSoftAccentHover: bgBtnSoftAccentHover,
     colorBgButtonSoftNeutralDefault: bgBtnSoftNeutralDefault,
     colorBgButtonSoftNeutralHover: bgBtnSoftNeutralHover,
@@ -856,7 +877,10 @@ export function defsFromPalette({
     colorTextEntityAvatarHover: primary.accent,
     colorBgMessageHighlighted: surface.level0elevated,
 
-    // Text editor
+    // Comment/message row hover (subtle lift over panel, stays darker than the floating actions toolbar in dark theme)
+    colorBgCommentHover: surface.level2,
+
+    colorBgCodeEditor: raised.level1,
     colorBgEditorImageZoomed: surface.level3_6,
     colorMermaidPrimaryColor: [base[2], baseDark[8]],
     colorMermaidPrimaryBorderColor: fg.muted,
@@ -885,10 +909,6 @@ export function defsFromPalette({
     colorTextWhiteboardDefault: fgMenuEtc,
     colorTextWhiteboardDisabled: fg.muted,
     // FIXME bug?
-    //  Dark uses baseDark[1] (near-black at 60% opacity) as "accent text" on a dark background.
-    //  This reads as near-invisible dark text on dark bg.
-    //  Compare with colorUnitHeaderWhiteboardDefault (L772) which correctly uses baseDark[12] for dark.
-    //  Likely should be baseDark[12] too.
     colorTextWhiteboardAccent: [alpha(base[12], 0.6), alpha(baseDark[1], 0.6)],
     colorTextWhiteboardInversedDefault: whiteColor,
     instrumentsMenuBg: raised.level2,

package/src/design-system/def.ts

@@ -8,7 +8,7 @@ export function mapDef<T, U>(def: ModeDef<T>, mapper: MapperDef<T, U>): ModeDef<
 export function mapDef<T, U>(def: ModeDef<T> | undefined, mapper: MapperDef<T | undefined, U>): ModeDef<U>;
 export function mapDef<T, U>(def: ModeDef<T> | undefined, mapper: MapperDef<T | undefined, U>): ModeDef<U> {
   if (typeof mapper === "function") {
-    // oxlint-disable-next-line no-param-reassign
+    // eslint-disable-next-line no-param-reassign
     mapper = [mapper, mapper];
   }
   if (def === undefined) {

package/src/dom-utils.ts

@@ -1,15 +1,8 @@
-const fail = (message: string) => {
-  throw new Error(message);
-};
-
-let popupContainerElement: HTMLElement;
-export const getPopupContainerElement = (): HTMLElement => {
-  if (!popupContainerElement) {
-    popupContainerElement =
-      document.getElementById("popup-container") || fail("popup-container was not found in document");
-  }
-  return popupContainerElement;
-};
+// Popups render directly in body, like Radix portals do: later-opened floating
+// elements come later in the DOM and paint above earlier ones, and no host
+// HTML contract is required. Kept as a function so call sites stay unchanged
+// until the custom popover is replaced with a Radix one.
+export const getPopupContainerElement = (): HTMLElement => document.body;
 
 type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
 

package/src/download-file.ts

@@ -0,0 +1,36 @@
+const blobToDataUrl = async (blobUrl: string) => {
+  const result = await fetch(blobUrl);
+  const blob = await result.blob();
+  const dataUrl = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error("Error fetching blob"));
+    reader.onabort = () => reject(new Error("Aborted"));
+  });
+  return dataUrl;
+};
+
+export const downloadFile = async (url: string, fileName?: string) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore - injected by consumer app
+  if (window.__FIBERY_MOBILE_APP_API) {
+    let absoluteUrl = new URL(url, document.baseURI).href;
+    if (absoluteUrl.startsWith("blob:")) {
+      absoluteUrl = await blobToDataUrl(absoluteUrl);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API.downloadFile(absoluteUrl, fileName);
+    return;
+  }
+
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName ?? "";
+  a.style.display = "none";
+
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};

package/src/dropdown-menu/index.tsx

@@ -15,7 +15,6 @@ export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps)
 export const Trigger = forwardRef<
   HTMLButtonElement,
   DropdownMenuPrimitive.DropdownMenuTriggerProps & {triggerEvent?: string}
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
 >(({triggerEvent, className, children, ...otherProps}, ref) => {
   return (
     <DropdownMenuPrimitive.Trigger ref={ref} className={className} {...otherProps}>

package/src/emoji-picker/icon-emoji-picker.tsx

@@ -1,5 +1,5 @@
+import {truthy} from "@fibery/helpers/src/_";
 import {css} from "@linaria/core";
-import compact from "lodash/compact";
 import {useState} from "react";
 
 import {Button} from "../button/button";
@@ -48,7 +48,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   color,
   getHoverColor,
 }) => {
-  const items = compact([
+  const items = [
     onEmojiSelect && {
       key: "emojis" as const,
       label: "Emojis",
@@ -80,7 +80,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
         />
       ),
     },
-  ]);
+  ].filter(truthy);
 
   const firstTab = items[0];
   const [activeTab, setActiveTab] = useState(defaultTab || firstTab?.key);

package/src/file-item/file-menu-items.tsx

@@ -7,9 +7,11 @@ import FileDownload from "../icons/react/file-download";
 import Link from "../icons/react/link";
 import Pencil from "../icons/react/pencil";
 import RicheditorOpenLink from "../icons/react/richeditor-open-link";
+import Share from "../icons/react/share";
 import {useToast} from "../toast/toast-provider";
 import {isPhoneApp} from "../use-is-phone";
 import {addQueryParam} from "./add-query-param";
+import {canShareFile, shareFile} from "./share-file";
 import type {UploadFileWithContent} from "./types";
 
 export function FileMenuItems({
@@ -26,6 +28,7 @@ export function FileMenuItems({
   disabled?: boolean;
 }): ReactNode {
   const toast = useToast();
+  const sharingEnabled = isPhoneApp() && canShareFile();
 
   return (
     <>
@@ -39,19 +42,34 @@ export function FileMenuItems({
       >
         Copy file URL
       </ActionsMenuItem>
-      <a href={file.url} target="_blank" rel="noopener noreferrer">
-        <ActionsMenuItem Icon={RicheditorOpenLink}>
-          {isPhoneApp() ? "Open in browser" : "Open in new tab"}
-        </ActionsMenuItem>
-      </a>
-      {isPhoneApp() ? (
-        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
-          Download
+      {sharingEnabled ? (
+        <ActionsMenuItem
+          Icon={Share}
+          onSelect={() => {
+            shareFile(file.url, file.name, {toast}).catch((error) =>
+              toast.error({title: "Unable to share file", subTitle: error.message})
+            );
+          }}
+        >
+          Share
         </ActionsMenuItem>
       ) : (
-        <a download={file.name} href={addQueryParam(file.url, "attachment", "true")}>
-          <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
-        </a>
+        <>
+          <a href={file.url} target="_blank" rel="noopener noreferrer">
+            <ActionsMenuItem Icon={RicheditorOpenLink}>
+              {isPhoneApp() ? "Open in browser" : "Open in new tab"}
+            </ActionsMenuItem>
+          </a>
+          {isPhoneApp() ? (
+            <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+              Download
+            </ActionsMenuItem>
+          ) : (
+            <a download={file.name} href={addQueryParam(file.url, "attachment", "true")}>
+              <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
+            </a>
+          )}
+        </>
       )}
       {onRenameClick && file.status === "done" ? (
         <>

package/src/file-item/file-preview-actions.tsx

@@ -1,30 +1,71 @@
+import {useCallback} from "react";
+
 import {ActionsMenuItem, ActionsMenuSeparator, AsyncActionsMenuItem} from "../actions-menu";
+import {downloadFile} from "../download-file";
+import {asError} from "../errors";
 import Delete from "../icons/react/delete";
 import FileDownload from "../icons/react/file-download";
 import RicheditorOpenLink from "../icons/react/richeditor-open-link";
+import Share from "../icons/react/share";
+import {useToast} from "../toast/toast-provider";
 import {isPhoneApp} from "../use-is-phone";
 import {addQueryParam} from "./add-query-param";
+import {canShareFile, shareFile} from "./share-file";
 
 export function FilePreviewActions({
   url,
   name,
-  onDownloadClick,
   onDeleteClick,
 }: {
   url: string;
   name: string;
-  onDownloadClick?: () => void;
   onDeleteClick?: () => void | Promise<void>;
 }) {
+  const toast = useToast();
+  const onDownloadClick = useCallback(
+    (e: Event) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+
+      downloadFile(addQueryParam(url, "attachment", "true"), name).catch((error) => {
+        toast.error({title: "Unable to download file", subTitle: asError(error).message});
+      });
+    },
+    [url, name, toast]
+  );
+
   if (isPhoneApp()) {
     return (
       <>
-        <a href={url} target="_blank" rel="noopener noreferrer">
-          <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
-        </a>
-        <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
-          Download
-        </ActionsMenuItem>
+        {canShareFile() ? (
+          <ActionsMenuItem
+            Icon={Share}
+            onSelect={() => {
+              shareFile(url, name, {toast}).catch((error) =>
+                toast.error({title: "Unable to share file", subTitle: asError(error).message})
+              );
+            }}
+          >
+            Share
+          </ActionsMenuItem>
+        ) : (
+          <>
+            <a href={url} target="_blank" rel="noopener noreferrer">
+              <ActionsMenuItem Icon={RicheditorOpenLink}>Open in browser</ActionsMenuItem>
+            </a>
+            <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+              Download
+            </ActionsMenuItem>
+          </>
+        )}
+        {onDeleteClick ? (
+          <>
+            <ActionsMenuSeparator />
+            <AsyncActionsMenuItem Icon={Delete} onSelect={onDeleteClick} dangerous>
+              Delete
+            </AsyncActionsMenuItem>
+          </>
+        ) : null}
       </>
     );
   }
@@ -34,9 +75,9 @@ export function FilePreviewActions({
       <a href={url} target="_blank" rel="noopener noreferrer">
         <ActionsMenuItem Icon={RicheditorOpenLink}>Open in new tab</ActionsMenuItem>
       </a>
-      <a download={name} href={addQueryParam(url, "attachment", "true")}>
-        <ActionsMenuItem Icon={FileDownload}>Download</ActionsMenuItem>
-      </a>
+      <ActionsMenuItem Icon={FileDownload} onSelect={onDownloadClick}>
+        Download
+      </ActionsMenuItem>
       {onDeleteClick ? (
         <>
           <ActionsMenuSeparator />

package/src/file-item/share-file.ts

@@ -0,0 +1,53 @@
+import type {ToastQueue} from "../toast/toast-queue";
+
+const blobToDataUrl = (blob: Blob) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error("Error reading file"));
+    reader.onabort = () => reject(new Error("Aborted"));
+  });
+
+export const canShareFile = (): boolean =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API?.shareFile
+  );
+
+export const shareFile = async (
+  url: string,
+  fileName?: string,
+  opts?: {toast?: ToastQueue; loadingTitle?: string}
+): Promise<void> => {
+  let toastId: string | undefined;
+  const toastTimeoutId = opts?.toast
+    ? setTimeout(() => {
+        toastId = opts.toast?.loading({title: opts.loadingTitle ?? "Preparing file…"});
+      }, 300)
+    : undefined;
+  const hideLoadingToast = () => {
+    clearTimeout(toastTimeoutId);
+    if (toastId) {
+      opts?.toast?.close(toastId);
+    }
+  };
+
+  try {
+    const absoluteUrl = url.startsWith("/") ? `${window.origin}${url}` : url;
+    const response = await fetch(absoluteUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file (${response.status})`);
+    }
+    const dataUrl = await blobToDataUrl(await response.blob());
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    const sharePromise: Promise<void> = window.__FIBERY_MOBILE_APP_API.shareFile(dataUrl, fileName);
+    hideLoadingToast();
+    await sharePromise;
+  } catch (error) {
+    hideLoadingToast();
+    throw error;
+  }
+};

package/src/file-item.tsx

@@ -308,6 +308,8 @@ function FileActionsMenu({
   return (
     <ActionsMenu
       onOpenChange={setIsActionsOpened}
+      supportsMobile
+      mobileTitle={data.name}
       trigger={
         <ActionsButtonCompact
           className={css`
@@ -317,15 +319,13 @@ function FileActionsMenu({
         />
       }
     >
-      {
-        <FileMenuItems
-          file={data}
-          disabled={disabled}
-          onDownloadClick={onDownloadClick}
-          onRemoveClick={onRemoveClick}
-          onRenameClick={onRenameClick}
-        />
-      }
+      <FileMenuItems
+        file={data}
+        disabled={disabled}
+        onDownloadClick={onDownloadClick}
+        onRemoveClick={onRemoveClick}
+        onRenameClick={onRenameClick}
+      />
     </ActionsMenu>
   );
 }

package/src/html-styles.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {css} from "@linaria/core";
 
 import {