@fibery/ui-kit 4.1.0 → 4.2.0

package/src/comment.tsx

@@ -89,9 +89,9 @@ export const actionsClassName = css`
   right: 0;
   z-index: 1;
   padding: ${space.s2 + 1}px;
-  background-color: ${themeVars.actionMenuBg};
+  background-color: ${themeVars.colorBgFloatingPanel};
   border-radius: ${border.radius8}px;
-  box-shadow: ${themeVars.entityCardShadow};
+  box-shadow: ${themeVars.shadowFloatingPanel};
   gap: ${space.s2}px;
 
   .${defaultCommentStyle}:hover & {

package/src/count-badge.tsx

@@ -7,6 +7,7 @@ import {fontWeight, space, themeVars} from "./design-system";
 type Props = {
   className?: string;
   count: number;
+  limit?: number;
 };
 
 const countStyle = css`
@@ -34,17 +35,8 @@ const warningStyle = css`
   color: ${themeVars.textColor};
 `;
 
-const countBadgeLimitOverride = Number.parseInt(
-  new URLSearchParams(window.location.search).get("count-badge-limit") ?? ""
-);
-const COUNT_BADGE_LIMIT = Number.isInteger(countBadgeLimitOverride) ? countBadgeLimitOverride : 99;
-
-export function CountBadge({className, count}: Props) {
-  return (
-    <span className={cx(countStyle, countBadgeStyle, className)}>
-      {count <= COUNT_BADGE_LIMIT ? count : `${COUNT_BADGE_LIMIT}+`}
-    </span>
-  );
+export function CountBadge({className, count, limit = 99}: Props) {
+  return <span className={cx(countStyle, countBadgeStyle, className)}>{count <= limit ? count : `${limit}+`}</span>;
 }
 
 export function CountBadgeWithNoLimits({count, warning}: {count: number | string; warning?: boolean}) {

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]],
@@ -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/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 {

package/src/icons/ast/gauge.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/gauge.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const Gauge: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 18 18","fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M9 1.8c1.461 0 2.82.437 3.955 1.185l-1.45.727A5.85 5.85 0 1 0 14.5 7.004l.864-1.372A7.2 7.2 0 1 1 9 1.8Zm1.457 8.252A1.795 1.795 0 0 1 9 10.8a1.8 1.8 0 0 1-.847-3.39L13.95 4.5l-3.493 5.552ZM9 8.1a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Z","fill":"#635E57"},"children":[]}],"metadata":""}]},"name":"gauge"};
+
+export default Gauge;

package/src/icons/ast/index.tsx

@@ -1,6 +1,6 @@
 /**
  * This file was automatically generated. Do not edit manually.
- * 
+ *
  * @see import("../../../scripts/generate-icons.mjs")
  */
 
@@ -121,6 +121,7 @@ export {default as Pin} from "./pin";
 export {default as PinFilled} from "./pin-filled";
 export {default as Photo} from "./photo";
 export {default as People} from "./people";
+export {default as PeopleEdit} from "./people-edit";
 export {default as PeopleCheck} from "./people-check";
 export {default as Pencil} from "./pencil";
 export {default as PanelAdd} from "./panel-add";
@@ -209,6 +210,7 @@ export {default as GlobeSimple} from "./globe-simple";
 export {default as Gitlab} from "./gitlab";
 export {default as Github} from "./github";
 export {default as Gift} from "./gift";
+export {default as Gauge} from "./gauge";
 export {default as FullscreenModeOn} from "./fullscreen-mode-on";
 export {default as FullscreenModeOnIcon} from "./fullscreen-mode-on-icon";
 export {default as FullscreenModeOffIcon} from "./fullscreen-mode-off-icon";

package/src/icons/ast/people-edit.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/people-edit.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const PeopleEdit: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.44 9.791a1.75 1.75 0 0 1 2.475 0l.585.586a1.75 1.75 0 0 1 0 2.475l-3.16 3.16a.753.753 0 0 1-.326.192L11.218 17a.751.751 0 0 1-.927-.927l.796-2.796.033-.09a.751.751 0 0 1 .159-.235l3.16-3.161Zm-6.682.933a.715.715 0 0 1 .75.726c0 .414-.337.747-.75.777-.87.065-1.7.247-2.391.575-.87.412-1.5 1.043-1.768 1.977-.105.367-.115.922-.081 1.45.008.126.123.271.338.271h3.9a.75.75 0 0 1 0 1.5h-3.9c-.915 0-1.77-.671-1.835-1.673-.036-.556-.045-1.33.136-1.96.41-1.432 1.392-2.362 2.566-2.92.931-.442 1.993-.657 3.035-.723Zm8.096.128a.25.25 0 0 0-.354 0l-3.023 3.022-.374 1.313 1.313-.373 3.024-3.023a.25.25 0 0 0 0-.354l-.586-.585ZM8.505 2a3.65 3.65 0 1 1 0 7.301 3.65 3.65 0 0 1 0-7.301Zm0 1.5a2.15 2.15 0 1 0 .002 4.3 2.15 2.15 0 0 0-.002-4.3Z"},"children":[]}],"metadata":""}]},"name":"people-edit"};
+
+export default PeopleEdit;