@medway-ui/native 1.9.2 → 1.10.0

package/src/editor/index.ts

@@ -1,5 +1,9 @@
-export { default as NoteEditor } from "./NoteEditor";
-export type { NoteEditorHandle } from "./NoteEditor";
+export { default as NoteEditor } from "@/editor/NoteEditor";
+export type {
+  NoteEditorHandle,
+  NoteEditorProps,
+  NoteEditorValue,
+} from "@/editor/NoteEditor";
 export type { EditorDocument } from "@medway-ui/notes-core";
 export type { WebViewMessageEvent } from "react-native-webview";
 
@@ -7,5 +11,5 @@ export {
   EDITOR_PROTOCOL_VERSION,
   EDITOR_RECEIVE_HANDLER,
   isEditorMessage,
-} from "./protocol";
-export type { EditorToNativeMessage, NativeToEditorMessage } from "./protocol";
+} from "@/editor/protocol";
+export type { EditorToNativeMessage, NativeToEditorMessage } from "@/editor/protocol";

package/src/editor/protocol.ts

@@ -27,7 +27,7 @@ import type {
  * talk to a bundle that reports a different version, which turns a stale
  * `editorHtml.generated.ts` into a clear error instead of silent breakage.
  */
-export const EDITOR_PROTOCOL_VERSION = 3;
+export const EDITOR_PROTOCOL_VERSION = 4;
 
 /** Name of the global the WebView bundle installs to receive native messages. */
 export const EDITOR_RECEIVE_HANDLER = '__medwayNoteEditorReceive';
@@ -41,8 +41,7 @@ export type NativeToEditorMessage =
    * `doc` accepts HTML as well as JSON; parse (`generateJSON`) and whitelist
    * (`normalizeDocument`) happen bundle-side, the only side with a DOM.
    *
-   * `focusPosition` defaults to `"end"`. `imageDeleteGraceMs` seeds the bundle's
-   * image-removal bookkeeping; read once, not reactive.
+   * `focusPosition` defaults to `"end"`.
    */
   | {
       type: 'setContent';
@@ -50,7 +49,6 @@ export type NativeToEditorMessage =
       focus: boolean;
       focusPosition?: 'start' | 'end';
       reset?: boolean;
-      imageDeleteGraceMs?: number;
       /**
        * Read only on the `reset` path. Set here instead of creating editable
        * and following up with `setEditable`, which would let a read-only note
@@ -75,8 +73,8 @@ export type NativeToEditorMessage =
   | { type: 'blur' }
   /**
    * Inserts an image node at the current selection, once the host's
-   * `onImageUpload` resolved with a `src`. The bundle also starts tracking that
-   * `src` as "uploaded this session" — see `imageRemoved` below.
+   * `onImageUpload` resolved with a `src`. A `src` that `sanitizeImageSrc`
+   * rejects is answered with `error` and not inserted.
    */
   | { type: 'insertImage'; src: string; alt?: string | null };
 
@@ -106,11 +104,6 @@ export type EditorToNativeMessage =
    * the inverse of the title's own Enter handler.
    */
   | { type: 'backspaceAtDocStart' }
-  /**
-   * A `src` that `insertImage` added this session left the document and stayed
-   * out past the grace period (`imageDeleteGraceMs`).
-   */
-  | { type: 'imageRemoved'; src: string }
   | { type: 'error'; message: string };
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -153,7 +146,6 @@ const EDITOR_MESSAGE_VALIDATORS: Record<
   resize: (message) => isFiniteNumber(message.height),
   linkPress: (message) => isString(message.href),
   backspaceAtDocStart: () => true,
-  imageRemoved: (message) => isString(message.src),
   error: (message) => isString(message.message),
 };
 

package/src/hooks/useThemeColor.ts

@@ -246,6 +246,7 @@ const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
   'state-focus': 'gray-70',
   'state-active': 'primary-16',
   'state-error': 'red-16',
+  'state-success': 'green-16',
 
   // Surface
   'surface-elevated': 'white',
@@ -451,21 +452,31 @@ const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
   'gradient-prev-blur-3': 'prev',
   'gradient-prev-bg-1': 'prev-lighten-6',
   'gradient-prev-bg-2': 'gray-10',
-  'gradient-r1-blur-1': 'secondary',
-  'gradient-r1-blur-2': 'primary-lighten-3',
+  'gradient-r1-blur-1': 'secondary-lighten-1',
+  'gradient-r1-blur-2': 'cm',
   'gradient-r1-blur-3': 'primary-lighten-5',
-  'gradient-r1-bg-1': 'primary',
-  'gradient-r1-bg-2': 'primary-lighten-1',
-  'gradient-rplus-blur-1': 'primary-lighten-1',
+  'gradient-r1-bg-1': 'primary-lighten-2',
+  'gradient-r1-bg-2': 'primary-lighten-6',
+  'gradient-rplus-blur-1': 'prev',
   'gradient-rplus-blur-2': 'primary-lighten-3',
   'gradient-rplus-blur-3': 'primary-lighten-5',
-  'gradient-rplus-bg-1': 'primary-lighten-1',
-  'gradient-rplus-bg-2': 'primary',
-  'gradient-pt-blur-1': 'secondary',
-  'gradient-pt-blur-2': 'secondary-darken-2',
-  'gradient-pt-blur-3': 'secondary-darken-4',
+  'gradient-rplus-bg-1': 'primary-lighten-4',
+  'gradient-rplus-bg-2': 'prev-lighten-3',
+  'gradient-pt-blur-1': 'cir',
+  'gradient-pt-blur-2': 'secondary-darken-1',
+  'gradient-pt-blur-3': 'secondary-darken-2',
   'gradient-pt-bg-1': 'gray-600',
-  'gradient-pt-bg-2': 'gray-450',
+  'gradient-pt-bg-2': 'gray-300',
+  'gradient-default-blur-1': 'gray-10',
+  'gradient-default-blur-2': 'secondary-lighten-5',
+  'gradient-default-blur-3': 'primary-lighten-6',
+  'gradient-default-bg-1': 'gray-150',
+  'gradient-default-bg-2': 'gray-50',
+  'gradient-neutral-blur-1': 'white',
+  'gradient-neutral-blur-2': 'gray-70',
+  'gradient-neutral-blur-3': 'gray-150',
+  'gradient-neutral-bg-1': 'gray-50',
+  'gradient-neutral-bg-2': 'gray-30',
 
   // Gold
   'gold-foreground': 'gold-darken-4',
@@ -507,11 +518,12 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'state-focus': 'gray-700',
   'state-active': 'white-16',
   'state-error': 'red-16',
+  'state-success': 'green-16',
 
   // Surface
   'surface-elevated': 'gray-800',
   'surface-card': 'gray-850',
-  'surface-navigation': 'gray-850',
+  'surface-navigation': 'gray-900',
   'surface-section': 'gray-850',
   'surface-page': 'gray-950',
   'surface-disable': 'black-8',
@@ -717,20 +729,30 @@ const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
   'gradient-prev-bg-1': 'prev-darken-2',
   'gradient-prev-bg-2': 'prev-darken-4',
   'gradient-r1-blur-1': 'secondary',
-  'gradient-r1-blur-2': 'primary-lighten-1',
+  'gradient-r1-blur-2': 'primary-lighten-2',
   'gradient-r1-blur-3': 'primary-lighten-2',
   'gradient-r1-bg-1': 'primary',
-  'gradient-r1-bg-2': 'primary-darken-2',
-  'gradient-rplus-blur-1': 'primary-lighten-5',
+  'gradient-r1-bg-2': 'primary-darken-1',
+  'gradient-rplus-blur-1': 'prev-darken-1',
   'gradient-rplus-blur-2': 'primary-lighten-3',
   'gradient-rplus-blur-3': 'primary-lighten-1',
   'gradient-rplus-bg-1': 'primary',
-  'gradient-rplus-bg-2': 'primary-darken-2',
-  'gradient-pt-blur-1': 'secondary',
-  'gradient-pt-blur-2': 'secondary-darken-1',
-  'gradient-pt-blur-3': 'secondary-darken-3',
+  'gradient-rplus-bg-2': 'prev-darken-6',
+  'gradient-pt-blur-1': 'cir-darken-1',
+  'gradient-pt-blur-2': 'secondary-darken-2',
+  'gradient-pt-blur-3': 'secondary-darken-4',
   'gradient-pt-bg-1': 'gray-800',
   'gradient-pt-bg-2': 'gray-900',
+  'gradient-default-blur-1': 'primary-lighten-1',
+  'gradient-default-blur-2': 'secondary-lighten-2',
+  'gradient-default-blur-3': 'primary-lighten-3',
+  'gradient-default-bg-1': 'gray-850',
+  'gradient-default-bg-2': 'gray-900',
+  'gradient-neutral-blur-1': 'gray-900',
+  'gradient-neutral-blur-2': 'gray-850',
+  'gradient-neutral-blur-3': 'gray-800',
+  'gradient-neutral-bg-1': 'gray-850',
+  'gradient-neutral-bg-2': 'gray-950',
 
   // Gold
   'gold-foreground': 'gold-lighten-1',

package/src/index.ts

@@ -109,7 +109,7 @@ export type {
 
 // FeedNotice
 export { FeedNotice } from "@/components/FeedNotice";
-export type { FeedNoticeProps } from "@/components/FeedNotice";
+export type { FeedNoticeProps, FeedNoticeSecondaryMessage } from "@/components/FeedNotice";
 
 // InvitePopover
 export {

package/src/lib/backdrop.ts

@@ -0,0 +1,16 @@
+import { type ViewStyle } from "react-native";
+
+import { useThemeColor } from "@/hooks/useThemeColor";
+
+const BACKGROUND_CLASS = /(?:^|\s)!?bg-/;
+
+// Inline because `bg-backdrop` only exists with a recent @medway-ui/core; a `bg-*` passed in the className keeps winning.
+function useBackdropStyle(className?: string): ViewStyle | undefined {
+  const backgroundColor = useThemeColor("backdrop");
+
+  if (className && BACKGROUND_CLASS.test(className)) return undefined;
+
+  return { backgroundColor };
+}
+
+export { useBackdropStyle };

package/src/lib/overlay-host.tsx

@@ -7,9 +7,9 @@ import React, {
   useState,
   type ReactNode,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View } from 'react-native';
 
-type HostOrigin = { x: number; y: number };
+type HostOrigin = { x: number; y: number; height: number };
 
 type OverlayHostContextValue = {
   mount: (id: string, node: ReactNode) => void;
@@ -52,11 +52,11 @@ function OverlayHostProvider({ children }: { children: ReactNode }) {
   const measureHostOrigin = useCallback((callback: (origin: HostOrigin) => void) => {
     const node = hostRef.current;
     if (!node) {
-      callback({ x: 0, y: 0 });
+      callback({ x: 0, y: 0, height: Dimensions.get('window').height });
       return;
     }
-    node.measureInWindow((x, y) => {
-      callback({ x, y });
+    node.measureInWindow((x, y, _width, height) => {
+      callback({ x, y, height });
     });
   }, []);