pixelize-native-library 1.0.6 → 1.2.0

package/lib/typescript/modules/pin-input/PinInput.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of React and of any `TextInput`/`Pressable` import, so the WCAG + behaviour tests import it
  * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type PinInputSize = "sm" | "md" | "lg";
 /** A validity state, not a brand tone — same reasoning as `InputStatus`. */
 export type PinInputStatus = "default" | "error";
@@ -98,22 +98,35 @@ export interface PinInputAccessibilityInput {
     readonly accessibilityLabel: string;
     readonly value: string;
     readonly disabled?: boolean | undefined;
-    /** When true, `accessibilityValue.text` is masked to `•` per digit — never the raw value — the a11y mirror of the visual dot masking. */
+    /** When true, the announced value is masked to `•` per digit — never the raw value — the a11y mirror of the visual dot masking. */
     readonly secureTextEntry?: boolean | undefined;
+    readonly status?: PinInputStatus | undefined;
+    /** The validity message, shown below the row and appended to the accessible name in the error state. */
+    readonly errorText?: string | undefined;
 }
 export interface PinInputAccessibilityProps {
+    /** The caller's required name, with `errorText` appended in the error state (same rule as `FormField`). */
     readonly accessibilityLabel: string;
     /**
      * Announces the digits entered so far — this is the one real field, not N mystery boxes. When
      * `secureTextEntry` is set, masked to one `•` per digit so a screen reader never speaks the raw
      * code aloud, matching what a native masked field announces.
+     *
+     * Emitted in BOTH forms deliberately, unlike every other control here. The host is a `TextInput`,
+     * and the two platforms read opposite halves: `react-native-web` picks only the flat
+     * `aria-valuetext` and drops `accessibilityValue`, while RN's `TextInput.js` destructures only the
+     * five `aria-*` STATE aliases — it never reads `aria-value*` at all (unlike `View`/`Pressable`),
+     * so the flat prop is spread onto a native view that ignores it. Flat-only would be silent on
+     * native; object-only is silent on web.
      */
     readonly accessibilityValue: {
         readonly text: string;
     };
-    readonly accessibilityState: {
-        readonly disabled: boolean;
-    };
+    readonly "aria-valuetext": string;
+    readonly "aria-disabled": boolean;
+    readonly "aria-invalid": boolean;
+    /** The validity message to render below the row — the visible half of WCAG 3.3.1 / 1.4.1. */
+    readonly message: string | undefined;
     /** The `TextInput` `editable` prop — false while disabled, so the field blocks input. */
     readonly editable: boolean;
 }
@@ -121,6 +134,10 @@ export interface PinInputAccessibilityProps {
  * Derives the accessibility surface once, purely — same shape as `resolveInputAccessibility`, but
  * `accessibilityLabel` is required (never a fallback) because PinInput has no visible text label of
  * its own; the caller must always name the field (e.g. "6-digit verification code").
+ *
+ * `status="error"` used to change the box border and NOTHING else — no message, no programmatic
+ * flag — so the failure was carried by colour alone (WCAG 1.4.1) and never identified (3.3.1). The
+ * error now joins the accessible name and sets `aria-invalid`, exactly as `FormField` does it.
  */
 export declare function resolvePinInputAccessibility(input: PinInputAccessibilityInput): PinInputAccessibilityProps;
 /**

package/lib/typescript/modules/progress-bar/ProgressBar.d.ts

@@ -1,8 +1,12 @@
 /**
- * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) renders a static fill
- * sized to the value; indeterminate (`value` omitted) renders a looping `Animated` sweep across the
- * track, skipped in favour of a static half-filled track when `useReducedMotion()` is true (WCAG
- * 2.3.3 — never a frame frozen mid-sweep).
+ * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) tweens a full-width fill
+ * by `scaleX` off its left edge; indeterminate (`value` omitted) renders a looping sweep across the
+ * track, skipped in favour of a static half-filled track when motion is off (WCAG 2.3.3 — never a
+ * frame frozen mid-sweep).
+ *
+ * The determinate fill is `scaleX`, never an animated `width`: only `opacity` and `transform` run on
+ * the native driver, and a per-frame width would force a layout pass. `transformOrigin: "left"`
+ * anchors the growth so the fill does not expand from its centre.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { ProgressBarSize, ProgressBarTone } from "./ProgressBar.variants";

package/lib/typescript/modules/progress-bar/ProgressBar.variants.d.ts

@@ -14,7 +14,7 @@
  * Everything here is free of React and of any Animated import, so the WCAG + behaviour tests import
  * it directly (mocking only `react-native`'s `StyleSheet`, as `Button.variants` does).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type ProgressBarTone = "accent" | "success" | "warning" | "danger";
 export type ProgressBarSize = "sm" | "md";
 export interface ProgressBarSizeSpec {
@@ -32,13 +32,11 @@ export declare const PROGRESS_BAR_SIZES: {
 };
 /** Fraction of the track's measured width the indeterminate sweep segment covers. */
 export declare const SWEEP_FRACTION = 0.4;
-/** One full indeterminate sweep cycle, ms. */
-export declare const SWEEP_DURATION_MS = 1200;
 /** Fill fraction rendered, static, when the sweep is skipped for reduced motion (WCAG 2.3.3). */
 export declare const REDUCED_MOTION_FILL_FRACTION = 0.5;
 /**
  * Clamps a caller-given value onto the 0–100 scale the track, the fill width, and
- * `accessibilityValue.now` all agree on. `undefined` is preserved — that absence IS the
+ * `aria-valuenow` all agree on. `undefined` is preserved — that absence IS the
  * indeterminate signal, never a value to coerce. A `NaN` (a caller's bad ratio math) clamps to `0`
  * rather than propagating into a `NaN%` width or an invalid `now`.
  */
@@ -66,24 +64,24 @@ export interface ProgressBarAccessibilityInput {
 }
 export interface ProgressBarAccessibilityProps {
     readonly accessibilityRole: "progressbar";
-    readonly accessibilityValue: {
-        readonly min: number;
-        readonly max: number;
-        readonly now: number;
-    } | undefined;
-    readonly accessibilityState: {
-        readonly busy: boolean;
-    };
+    readonly "aria-valuemin": number | undefined;
+    readonly "aria-valuemax": number | undefined;
+    readonly "aria-valuenow": number | undefined;
+    readonly "aria-busy": boolean;
 }
 /**
  * Derives the accessibility surface once, purely, so the determinate/indeterminate contract is
  * testable without a renderer:
- *  - determinate (`value` given) → `accessibilityValue` carries `now`; `busy` is false once the
+ *  - determinate (`value` given) → `aria-valuenow` carries the position; `busy` is false once the
  *    value is known.
- *  - indeterminate (`value` omitted) → NO `accessibilityValue` at all. The absence of `now` is how
+ *  - indeterminate (`value` omitted) → NO value props at all. The absence of `now` is how
  *    assistive tech reports "indeterminate" — inventing a guessed number would misreport actual
- *    progress. `busy: true` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
+ *    progress. `aria-busy` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
  *    convey to a screen reader.
+ *
+ * Flat `aria-*` rather than the `accessibilityState`/`accessibilityValue` objects: RN's `View`
+ * folds the flat props back into those objects, while react-native-web only ever forwards the flat
+ * ones — the object form reaches nothing at all on web.
  */
 export declare function resolveProgressBarAccessibility(input: ProgressBarAccessibilityInput): ProgressBarAccessibilityProps;
 /**

package/lib/typescript/modules/radio-group/RadioGroup.d.ts

@@ -19,6 +19,12 @@ export interface RadioGroupProps {
     onValueChange: (value: string) => void;
     disabled?: boolean;
     size?: RadioGroupSize;
+    /**
+     * Names the group itself. Without it the `radiogroup` container is announced unnamed, so a reader
+     * hears each option's own label with nothing saying what the set of options is FOR (WCAG 1.3.1) —
+     * the rows carry their labels, the container carried none.
+     */
+    accessibilityLabel?: string;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/radio-group/RadioGroup.variants.d.ts

@@ -7,7 +7,7 @@
  *  - `resolveRadioRowAccessibility` derives the per-row a11y surface purely, so the
  *    "selected"/"disabled" contract is unit-testable without rendering React Native.
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type RadioGroupSize = "sm" | "md";
 /** Same floor as Button — Apple HIG minimum and WCAG 2.5.5 (AAA). */
 export declare const MIN_TOUCH_TARGET = 44;
@@ -26,10 +26,17 @@ export interface RadioGroupSizeSpec {
 /**
  * RadioGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `rowMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ *
+ * Both sizes meet the 44dp floor with the RENDERED row, so `slopFor` resolves to 0 and no row's
+ * touch rectangle expands into the `rowGap` a neighbour would also expand into. `sm` used to be a
+ * 36dp row + 4dp slop inside a 4dp gap, so adjacent rows' hit rectangles met exactly and a tap on
+ * the seam was resolved by sibling z-order rather than geometry (WCAG 2.5.8) — the same defect
+ * `ButtonGroup`/`Pagination` fix the same way: meet the floor with the node, never with `hitSlop`.
+ * `sm` stays the denser variant through its smaller ring/dot/font and tighter gaps.
  */
 export declare const RADIO_GROUP_SIZES: {
     readonly sm: {
-        readonly rowMinHeight: 36;
+        readonly rowMinHeight: 44;
         readonly ringSize: 18;
         readonly dotSize: 8;
         readonly fontSize: 14;
@@ -65,21 +72,35 @@ export interface RadioRowAccessibilityInput {
 }
 export interface RadioRowAccessibilityProps {
     readonly accessibilityRole: "radio";
-    readonly accessibilityState: {
-        readonly checked: boolean;
-        readonly disabled: boolean;
-    };
+    readonly "aria-checked": boolean;
+    readonly "aria-disabled": boolean;
     /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
     readonly disabled: boolean;
 }
 /**
  * Derives one row's accessibility surface purely, mirroring `resolveButtonAccessibility`. Reports
- * `accessibilityState.checked` — not `.selected` (that key is for role="tab"/"option"; a radio's
- * checked state is `checked`, same as this repo's Checkbox/Switch) — so the rendered `disabled`
- * prop and the announced `accessibilityState.disabled` always agree, so a screen reader never
- * hears a state the touch handling contradicts.
+ * `aria-checked` — not `aria-selected` (that one is for role="tab"/"option"; a radio's checked state
+ * is `checked`, same as this repo's Checkbox/Switch) — so the rendered `disabled` prop and the
+ * announced `aria-disabled` always agree, so a screen reader never hears a state the touch handling
+ * contradicts.
+ *
+ * FLAT `aria-*` rather than `accessibilityState={{…}}`: react-native-web 0.21 drops the object form
+ * outright, so the web build announced `role="radio"` with no checked state. See
+ * `Checkbox.variants.ts` for the full reasoning — both platforms read the flat form.
  */
 export declare function resolveRadioRowAccessibility(input: RadioRowAccessibilityInput): RadioRowAccessibilityProps;
+export interface RadioGroupKeyInput {
+    readonly key: string;
+    /** The index the group's single tab stop currently sits on. */
+    readonly index: number;
+    readonly count: number;
+}
+/**
+ * The WAI-ARIA radio-group keyboard contract, resolved purely: arrows move one row and WRAP (a radio
+ * group's arrows both move and select, so there is no "past the end" to fall off), Home/End jump to
+ * the ends. Returns `undefined` for any other key — also how the caller knows not to swallow it.
+ */
+export declare function resolveRadioGroupKeyIndex(input: RadioGroupKeyInput): number | undefined;
 /** Gap between rows. Structural, theme-scaled, registered once per (theme, size). */
 export declare const radioGroupStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
@@ -98,7 +119,7 @@ export declare const radioGroupStructure: import("../../core/style").ThemedVaria
 export declare const radioRowStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
         sm: {
-            minHeight: 36;
+            minHeight: 44;
             columnGap: 8;
             paddingHorizontal: 8;
         };

package/lib/typescript/modules/reorder/Reorder.d.ts

@@ -1,30 +1,35 @@
 /**
- * Reorder — a drag-to-reorder list built on plain `PanResponder` + `Animated` (Wave 3: no new
- * dependency). Each row's drag handle is a hand-built three-bar "grip" glyph (no `IconName` in the
- * closed 22-name set represents a drag handle, and that set is never extended for one component) —
- * the `PanResponder` lives on the grip ONLY, not the whole row, so the label text never fights the
- * gesture.
+ * Reorder — a drag-to-reorder list built on ONE shared `Gesture.Pan()` (react-native-gesture-handler)
+ * and five reanimated shared values for the WHOLE list. There is no per-row responder and no per-row
+ * `Animated.Value`: a 500-item list constructs one gesture and five animated nodes, and only the
+ * rows `VirtualList` currently has on screen ever mount.
  *
- * The list is FULLY CONTROLLED: `items`/`onReorder` are the only source of truth. While a drag is
- * live, the component tracks purely EPHEMERAL state — which row grabbed the gesture (`startIndex`)
- * and which slot it is over now (`targetIndex`), both cleared on release — and previews the reorder
- * by shifting the OTHER rows out of the way with `resolveRowShift` (see `Reorder.variants.ts`); the
- * underlying `items` array is never mutated mid-drag, only on release, via `onReorder`. Because the
- * shift preview and the final `moveItem` commit share the exact same splice semantics, the row that
- * was being dragged lands in the same visual slot its shifted neighbours already vacated — no jump.
+ * A row's grip reports the grabbed item by id (`onGrab`); the shared pan then owns the rest of the
+ * drag on the reanimated UI thread — `translationY` follows the finger and `targetIndex` is the
+ * closed-form row it is over (`resolveDragTargetIndex`). Every row's own `useAnimatedStyle` reads
+ * those shared values and animates ONLY `transform` (translateY) and `opacity`; a passive row's
+ * preview offset is `resolveRowShift`, the dragged row's is the raw `translationY`.
  *
- * WCAG 2.5.7 (Dragging Movements) requires a non-dragging way to perform the same function: every
- * row also renders two `Button` icon-only presses ("Move X up" / "Move X down", reusing the shipped
- * `chevron-up`/`chevron-down` names), disabled at the list's own start/end via
- * `resolveReorderMoveState`. This is the REQUIRED accessible path, not optional polish — it is a
- * real `accessibilityRole="button"` each (Button's own contract), fully operable without any touch
- * gesture, and it shares `moveItem` with the drag path so both always agree.
+ * The list stays FULLY CONTROLLED: `items` is never mutated mid-drag. On release the pan hands off
+ * to JS once (`runOnJS`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
+ * Because the preview and the commit share the same splice semantics, the dragged row lands in the
+ * slot its shifted neighbours already vacated — and passive rows snap back to 0 the instant
+ * `activeIndex` goes idle, so no stale offset can outlive the drop.
  *
- * The grip itself carries no accessible action of its own — `PanResponder` gestures are invisible to
- * assistive tech, and exposing it as a fake, non-operable "button" would be misleading — so it is
- * hidden from the accessibility tree (`accessibilityElementsHidden` + `no-hide-descendants`, the same
- * pairing `Timeline`'s decorative connector uses), leaving the up/down `Button`s as the one real
- * accessible affordance for reordering.
+ * WCAG 2.5.7 (Dragging Movements) requires a non-dragging way to do the same thing: every row also
+ * renders two icon-only `Button`s ("Move X up" / "Move X down") sharing the same `moveItem`. The
+ * grip carries no accessible action of its own — a gesture is invisible to assistive tech, and a
+ * fake non-operable "button" would mislead — so it stays hidden from the accessibility tree.
+ *
+ * Those buttons disable at the list's ends, EXCEPT the one currently holding keyboard focus: moving
+ * an item to an end would otherwise disable the very button that was just pressed and drop focus to
+ * nothing (WCAG 2.4.3). See `ReorderRow` for the trade — an inert focused button, never lost focus.
+ *
+ * A row's own accessible name states its position ("<label>, item 2 of 5", WCAG 1.3.1) — order is
+ * this component's entire purpose, and screen position is otherwise the only way to read it. On
+ * commit — from either the drag gesture or a move button — `useAnnounce` speaks the result (WCAG
+ * 4.1.3): the accessible buttons already move the list, but without this the new order was
+ * observable only by sight, which defeated the point of having them.
  */
 import type { LayoutStyle } from "../../core/style";
 export interface ReorderItem {

package/lib/typescript/modules/reorder/Reorder.variants.d.ts

@@ -13,7 +13,7 @@
  * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 /**
  * Fixed row height, in dp. A fixed height — rather than per-row `onLayout` measurement — is what
  * lets the drag math below be a closed-form `dy ÷ rowHeight`, never an async-measured guess (the
@@ -71,6 +71,17 @@ export interface ReorderMoveState {
  * list's own `disabled` prop gates every row regardless of position.
  */
 export declare function resolveReorderMoveState(index: number, count: number, disabled: boolean): ReorderMoveState;
+/**
+ * A row's accessible name. Position in the list is otherwise carried only by where the row sits on
+ * screen (WCAG 1.3.1) — and reordering is the one thing this component exists to do, so a user who
+ * can't see the row's place can't tell whether their move landed.
+ */
+export declare function resolveReorderRowLabel(label: string, index: number, count: number): string;
+/**
+ * Spoken after a committed move (WCAG 4.1.3). The accessible up/down buttons and the drag gesture
+ * share it: both change the same order, and neither moves focus to anything that would report it.
+ */
+export declare function resolveReorderMoveAnnouncement(label: string, toIndex: number, count: number): string;
 /**
  * Pure array move: `fromIndex` → `toIndex` (clamped into range). Used by BOTH the drag gesture and
  * the accessible up/down buttons, so both interaction paths are guaranteed to produce the same
@@ -78,19 +89,21 @@ export declare function resolveReorderMoveState(index: number, count: number, di
  */
 export declare function moveItem<T>(items: readonly T[], fromIndex: number, toIndex: number): T[];
 /**
- * The REAL on-screen distance between two rows' tops: the row's own height plus the `rowGap` the
- * list container applies between rows (the same `theme.space[2]` `reorderListStructure` uses below)
- * — NOT `REORDER_ROW_HEIGHT` alone, which is how tall a row is, not how far apart two rows sit.
+ * The REAL on-screen distance between two rows' tops: the row's own height plus the gap the row
+ * carries below it (the same `theme.space[2]` `reorderRowStructure` applies as `marginBottom`) —
+ * NOT `REORDER_ROW_HEIGHT` alone, which is how tall a row is, not how far apart two rows sit.
  * `resolveDragTargetIndex`/`resolveRowShift` must be given THIS distance (call with
  * `theme.space[2]`, never a hardcoded gap), or the target-row flip fires one `rowGap` early and the
  * preview shift undershoots the vacated slot by `rowGap` per row, compounding on multi-row shifts.
+ * It is also the `itemHeight` `VirtualList` gets, so `getItemLayout` matches the real layout.
  */
 export declare function resolveRowPitch(rowGap: number): number;
 /**
  * The row a drag gesture is over right now, from the accumulated `dy` since the gesture grabbed
  * `startIndex` — a closed-form step count against the REAL row pitch (see `resolveRowPitch`),
  * clamped into the list's bounds. Rounds to the nearest row, so a drag must cross half a row's
- * PITCH to advance a step.
+ * PITCH to advance a step. Marked `"worklet"` so the shared pan gesture can call it on the UI
+ * thread; it stays an ordinary function from JS, so the pure tests below call it directly.
  */
 export declare function resolveDragTargetIndex(startIndex: number, dy: number, rowPitch: number, itemCount: number): number;
 /**
@@ -101,12 +114,15 @@ export declare function resolveDragTargetIndex(startIndex: number, dy: number, r
  * `resolveRowPitch`) — row height alone undershoots by `rowGap` per row. Symmetric with `moveItem`'s
  * splice semantics: on drop, the dragged row's array position becomes `targetIndex` and every
  * shifted row's array position is unchanged — only its on-screen slot moved — so this is exactly the
- * visual preview of what `moveItem` will commit.
+ * visual preview of what `moveItem` will commit. Marked `"worklet"` so each row's
+ * `useAnimatedStyle` can call it on the UI thread; still an ordinary function from JS.
  */
 export declare function resolveRowShift(rowIndex: number, startIndex: number, targetIndex: number, rowPitch: number): number;
-/** The list container: rows are laid out as plain flex children, spaced by `rowGap`. */
-export declare const reorderListStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
-/** The whole row: fixed height (see `REORDER_ROW_HEIGHT`), grip/label/buttons spaced by `columnGap`. */
+/**
+ * The whole row: fixed height (see `REORDER_ROW_HEIGHT`), grip/label/buttons spaced by `columnGap`.
+ * The inter-row gap is the row's own `marginBottom`, not a container `rowGap` — rows are virtualized
+ * cells now, and a container gap never lands between them.
+ */
 export declare const reorderRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** The grip's touch box — no theme dependency (a fixed design constant, same reasoning `BUTTON_SIZES`
  *  documents for its own plain-constant sizing), so this uses the untethered `createVariants`. */

package/lib/typescript/modules/rich-text/RichText.d.ts

@@ -0,0 +1,15 @@
+/**
+ * RichText — read-only safe HTML renderer. Ported from tickets/mobile RichText.tsx.
+ */
+import type { LayoutStyle } from "../../core/style";
+export interface RichTextProps {
+    html: string;
+    numberOfLines?: number;
+    onLinkPress?: (url: string) => void;
+    onImagePress?: (src: string) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const RichText: import("react").NamedExoticComponent<RichTextProps>;
+//# sourceMappingURL=RichText.d.ts.map

package/lib/typescript/modules/rich-text/RichText.variants.d.ts

@@ -0,0 +1,15 @@
+import type { RoleColors } from "../../theme/hooks";
+export interface RichTextColors {
+    readonly text: string;
+    readonly muted: string;
+    readonly link: string;
+    readonly mentionText: string;
+    readonly mentionBg: string;
+    readonly codeBg: string;
+    readonly code: string;
+    readonly quoteBorder: string;
+    readonly border: string;
+    readonly sunken: string;
+}
+export declare function resolveRichTextColors(colors: RoleColors): RichTextColors;
+//# sourceMappingURL=RichText.variants.d.ts.map

package/lib/typescript/modules/rich-text/index.d.ts

@@ -0,0 +1,5 @@
+export { RichText } from "./RichText";
+export type { RichTextProps } from "./RichText";
+export { decodeEntities, isElement, isSafeUrl, parseRichText, stripHtmlToText, textContent, } from "./parseRichText";
+export type { ElementNode, HtmlNode, TextNode } from "./parseRichText";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/rich-text/parseRichText.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Safe HTML parse + sanitize for RichText. Ported from tickets/mobile RichText.tsx.
+ */
+export type TextNode = {
+    type: "text";
+    text: string;
+};
+export type ElementNode = {
+    type: "element";
+    tag: string;
+    attrs: Record<string, string>;
+    children: HtmlNode[];
+};
+export type HtmlNode = TextNode | ElementNode;
+declare const BLOCK_TAGS: Set<string>;
+declare const VOID_TAGS: Set<string>;
+declare const MENTION_HOSTS: Set<string>;
+export declare const SAFE_URL_SCHEME: RegExp;
+export declare function decodeEntities(s: string): string;
+export declare function parseRichText(html: string): HtmlNode[];
+export declare const isElement: (n: HtmlNode) => n is ElementNode;
+export declare const isBlank: (n: HtmlNode) => boolean;
+export declare function textContent(node: HtmlNode): string;
+export declare function stripHtmlToText(html: string): string;
+export declare function isSafeUrl(href: string): boolean;
+export declare function isMention(attrs: Record<string, string>): boolean;
+export declare function mentionLabel(node: ElementNode): string;
+export declare function isChecked(node: ElementNode): boolean;
+export { BLOCK_TAGS, MENTION_HOSTS, VOID_TAGS };
+//# sourceMappingURL=parseRichText.d.ts.map

package/lib/typescript/modules/rich-text-editor/RichTextEditor.d.ts

@@ -0,0 +1,62 @@
+/**
+ * RichTextEditor — a themed wrapper around `react-native-enriched-html`'s native Fabric editor
+ * (`EnrichedTextInput`), with its own toolbar (`Button`), a link-insert dialog (`Modal` + `Input`,
+ * copied from the app's `RichDescriptionEditor` pattern), and an `@`-mention dropdown.
+ *
+ * UNCONTROLLED, by the native library's own design: the editor's HTML is only readable via the
+ * async `getHTML()` ref call (the library's own docs warn `onChangeHtml` is too expensive to drive
+ * live sync). So this component takes `defaultValue` (initial HTML, never re-applied on change) and
+ * exposes a `ref` with `getHTML()`/`focus()`/`blur()`/`setValue()` — the caller reads the final HTML
+ * at its own save/submit point, not from continuous state. `onChangeText` is a cheap plain-text
+ * signal (every keystroke) for dirty-tracking / enabling a Save button — it is NOT the HTML.
+ *
+ * Toolbar toggle highlighting is driven by the native `onChangeState` event (bold/italic/… active
+ * state as the cursor moves) — see `RichTextEditor.variants.ts` → `resolveRichTextEditorActiveActions`.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { MentionUser, RichTextEditorImage } from "./RichTextEditor.variants";
+export interface RichTextEditorHandle {
+    /** Reads the editor's current content as HTML. Async — the native layer parses on demand. */
+    getHTML: () => Promise<string>;
+    focus: () => void;
+    blur: () => void;
+    /** Replaces the entire editor content — for the rare case the parent resets it (e.g. loading a
+     *  template). Not a live sync mechanism; this is UNCONTROLLED between calls. */
+    setValue: (html: string) => void;
+}
+export interface RichTextEditorProps {
+    /** Initial HTML/text. Never re-applied on change — see the module header. */
+    defaultValue?: string;
+    placeholder?: string;
+    /** Rendered above the toolbar. Also becomes the editor field's accessible name unless one is
+     *  passed explicitly. */
+    label?: string;
+    /** Overrides the label→field accessible-name fallback. */
+    accessibilityLabel?: string;
+    /** Minimum editor height, in dp. */
+    minHeight?: number;
+    /** Candidate users for `@` mentions. Empty/omitted disables mentions gracefully (no `@` trigger
+     *  wired, no mention toolbar button rendered). */
+    mentionUsers?: MentionUser[];
+    /** Supplies an image to insert at the caret. Omitted/undefined hides the image toolbar button
+     *  entirely — the same "disables gracefully" contract `mentionUsers` has. The consumer owns
+     *  picking, uploading and any failure message; resolve `null` for a cancel or a failure, and a
+     *  rejection is caught here so the toolbar recovers with nothing inserted. */
+    onRequestImage?: () => Promise<RichTextEditorImage | null>;
+    /** Fires on every keystroke with the plain text — a cheap dirty-signal, not the HTML. */
+    onChangeText?: (text: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    editable?: boolean;
+    /** Off by default: while on, Android's `canScrollVertically` returns it verbatim, so the editor
+     *  claims every drag instead of releasing it to the page `ScrollView`. Enable only with a bounded height. */
+    scrollEnabled?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    containerStyle?: LayoutStyle;
+    /** Normalizes arbitrary incoming HTML (Word/Google Docs/foreign markup) into the native editor's
+     *  canonical tag subset before it's applied. Off by default, matching the native library. */
+    useHtmlNormalizer?: boolean;
+    testID?: string;
+}
+export declare const RichTextEditor: import("react").NamedExoticComponent<RichTextEditorProps & import("react").RefAttributes<RichTextEditorHandle>>;
+//# sourceMappingURL=RichTextEditor.d.ts.map