pixelize-native-library 1.0.7 → 1.2.0

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

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

@@ -0,0 +1,139 @@
+/**
+ * RichTextEditor's style + behaviour resolution — the same split every sibling module holds to:
+ *  - STRUCTURE lives in the `createThemedVariants` resolvers below — static per (brand, mode).
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveRichTextEditorColors`,
+ *    `resolveRichTextEditorHtmlStyle`), never a raw ramp, never a hardcoded hex.
+ *  - The toolbar/mention behaviour (`RICH_TEXT_EDITOR_TOOLBAR_ITEMS`, `resolveRichTextEditorActiveActions`,
+ *    `filterMentionCandidates`) is pure, so it is unit-tested without mounting the native editor.
+ *
+ * `resolveRichTextEditorHtmlStyle` is the one resolver that talks to `react-native-enriched-html`'s
+ * own `HtmlStyle` shape (types-only import — no runtime dependency on the package from this file).
+ * The mention pill (`mention`) reuses `accent.subtle`/`accent.text`, the one tint pair the role table
+ * already guarantees at 4.5:1 for every brand × mode (see `org-switcher/OrgSwitcher.variants.ts` for
+ * the same reasoning) rather than inventing a new pairing that would need its own contrast proof.
+ *
+ * Free of React and of any native import, so the WCAG + behaviour tests import it directly (mocking
+ * only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { HtmlStyle, OnChangeStateEvent } from "react-native-enriched-html";
+import type { IconName } from "../../core/icon";
+import type { RoleColors, Theme } from "../../theme/hooks";
+export interface MentionUser {
+    readonly id: string | number;
+    readonly label: string;
+    readonly profileUrl?: string;
+}
+/** An uploaded image ready to insert. `width`/`height` are the DISPLAY size in dp: the native editor
+ *  reads an `<img>`'s dimensions once at parse time and never re-measures, so a 0 renders 0×0. */
+export interface RichTextEditorImage {
+    readonly uri: string;
+    readonly width: number;
+    readonly height: number;
+}
+/** Every toolbar action this module renders a button for. `image`/`mention` are triggers, not
+ *  toggles — neither has an entry in `resolveRichTextEditorActiveActions`' output. */
+export type RichTextEditorToolbarAction = "bold" | "italic" | "underline" | "strikethrough" | "inlineCode" | "h1" | "h2" | "h3" | "blockQuote" | "codeBlock" | "unorderedList" | "orderedList" | "checkboxList" | "link" | "image" | "mention";
+export interface RichTextEditorToolbarItem {
+    readonly action: RichTextEditorToolbarAction;
+    readonly icon: IconName;
+    /** The button's accessible name — icon-only `Button` requires one. */
+    readonly label: string;
+    /** Whether this button holds an on/off state (so it announces one from first render, before any
+     *  `onChangeState` has arrived). True for exactly the actions
+     *  `resolveRichTextEditorActiveActions` reports on; the two triggers must not announce
+     *  "not pressed" as if they toggled something. */
+    readonly toggle: boolean;
+}
+/** Order is the rendered order, left to right in the toolbar's horizontal scroller. */
+export declare const RICH_TEXT_EDITOR_TOOLBAR_ITEMS: readonly RichTextEditorToolbarItem[];
+/**
+ * Maps the native editor's per-keystroke `onChangeState` payload onto the closed action set — this
+ * is what drives toolbar toggle highlighting (active = `variant="solid"`, inactive = `"outline"`).
+ * `image`/`mention` are intentionally absent: both open a picker rather than toggling a style.
+ */
+export declare function resolveRichTextEditorActiveActions(state: OnChangeStateEvent): Partial<Record<RichTextEditorToolbarAction, boolean>>;
+export interface RichTextEditorAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly accessibilityLabel?: string | undefined;
+    /** `Platform.OS === "web"` at the call site — an input rather than a `Platform` import, so this
+     *  file stays pure and both platforms' output is asserted in one plain jest run. */
+    readonly web: boolean;
+}
+export interface RichTextEditorAccessibilityProps {
+    /** The accessible name for the EDITOR FIELD. RN has no `htmlFor`-equivalent link to a sibling
+     *  label `Text`, so the visible label's content is copied onto the field — the same fallback
+     *  `resolveInputAccessibility` makes, and an explicit `accessibilityLabel` always wins. */
+    readonly accessibilityLabel: string | undefined;
+    /** For the VISIBLE label `Text`, not the field: `true` hides it from assistive tech once the
+     *  field carries the same name, so it isn't announced twice. Never `false` — `undefined` is what
+     *  leaves a node exposed. */
+    readonly "aria-hidden": true | undefined;
+}
+/**
+ * Derives the editor's accessible-name surface purely.
+ *
+ * The visible label stays EXPOSED on web: `react-native-enriched-html`'s web build renders a TipTap
+ * `EditorContent` and forwards no accessibility prop to the contenteditable at all (it sets only
+ * `enterkeyhint`), so the field never gets the name there. Hiding the label too would leave a web
+ * screen-reader user with nothing — see MODULE.md's "Known gaps".
+ */
+export declare function resolveRichTextEditorAccessibility(input: RichTextEditorAccessibilityInput): RichTextEditorAccessibilityProps;
+/** Web caps the mention dropdown at 8 rows (`mentionSuggestion.ts`) — matched here for parity. */
+export declare const MENTION_CANDIDATE_LIMIT = 8;
+/** Case-insensitive substring match on `label`, capped to `limit`. Empty `query` (just-opened
+ *  dropdown) returns the first `limit` candidates, same as web's `items()` with an empty query. */
+export declare function filterMentionCandidates(users: readonly MentionUser[], query: string, limit?: number): MentionUser[];
+export interface RichTextEditorColors {
+    readonly toolbarBackground: string;
+    readonly toolbarDivider: string;
+    readonly cardBackground: string;
+    readonly cardBorder: string;
+    readonly cardBorderFocus: string;
+    readonly text: string;
+    readonly placeholder: string;
+    readonly cursor: string;
+    readonly selection: string;
+    readonly mentionDropdownBackground: string;
+    readonly mentionDropdownBorder: string;
+    readonly mentionRowBackground: string;
+    readonly mentionRowPressed: string;
+    readonly mentionRowText: string;
+}
+/** The card owns the boundary: Android's `SimpleViewManager` declares no `border*` prop, so a border
+ *  on the native view's own style is silently dropped there. */
+export declare function resolveRichTextEditorColors(colors: RoleColors): RichTextEditorColors;
+/**
+ * The slice of `Theme` this resolver actually reads — deliberately NOT the full `Theme` (which also
+ * carries `palette`, `elevation`, `fontStyleForWeight`, …, none of which a pure test can construct
+ * without mounting `PixelizeProvider`). Every field here is a plain token module import, so
+ * `RichTextEditor.test.ts` builds a real fixture and measures real contrast, the same rigor
+ * `Avatar.test.ts`/`OrgSwitcher.test.ts` apply — without needing a rendered theme to do it.
+ */
+export type RichTextEditorHtmlStyleTheme = Pick<Theme, "colors" | "fontSizes" | "space" | "fontWeights" | "radii" | "borderWidths">;
+/**
+ * Themes the HTML content `react-native-enriched-html` renders inside the editor. Every colour is a
+ * role lookup — never a hex the native lib is handed directly:
+ *  - `code`/`mention` share `accent.subtle` + `accent.text`, the tint pair already proven ≥ 4.5:1 for
+ *    every brand × mode (see the header comment) — the mention pill is the one place this rigor
+ *    matters most, since it is the only "chip" the rendered content shows.
+ *  - `codeblock` uses `bg.sunken` + `fg.default`, the identical pair `Avatar`'s neutral fill already
+ *    measures ≥ 4.5:1 for every brand × mode (`resolveAvatarColors`) — reused rather than re-proven.
+ *  - `blockquote`'s bar is `border.interactive` (≥ 3:1, the same non-text-UI floor every interactive
+ *    outline in this library holds to), its text `fg.muted` (≥ 4.5:1 against every surface it sits on
+ *    — see `roleColors`' `fg.muted` derivation).
+ */
+export declare function resolveRichTextEditorHtmlStyle(theme: RichTextEditorHtmlStyleTheme): HtmlStyle;
+export declare const richTextEditorLayout: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** No `overflow: "hidden"` — the mention dropdown overflows the field by design. */
+export declare const richTextEditorCardStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const richTextEditorToolbarStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Applied to the `EnrichedTextInput`'s own `style` prop — `EnrichedInputStyle` is a RESTRICTED
+ *  subset of `TextStyle` (no `flexDirection`/`alignItems`/etc.), so this stays to the keys that
+ *  subset actually allows: padding, `minHeight`, `color`. Border, radius and fill deliberately
+ *  belong to the card instead (see `resolveRichTextEditorColors`). */
+export declare const richTextEditorFieldStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Positioned "below the toolbar": the wrapping field container is the `relative` anchor, so `top: 0`
+ *  here lands the dropdown right under the toolbar, overlaying the editor field beneath it. */
+export declare const richTextEditorMentionDropdownStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const richTextEditorMentionRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=RichTextEditor.variants.d.ts.map

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

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/rich-text-editor`. Value exports and type exports are
+ * split for `verbatimModuleSyntax`.
+ */
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorHandle, RichTextEditorProps } from "./RichTextEditor";
+export type { MentionUser, RichTextEditorImage, RichTextEditorToolbarAction, } from "./RichTextEditor.variants";
+export { RICH_TEXT_EDITOR_TOOLBAR_ITEMS } from "./RichTextEditor.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/screen/Screen.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Screen — a screen shell composing SafeArea, optional KeyboardAvoidingView, optional pull-to-refresh,
+ * and async-state slots that swap in `LoadingState` / consumer-provided empty/error content instead of
+ * `children`. Replaces the per-app `SafeAreaView` + `KeyboardAvoidingView` + `RefreshControl` wiring
+ * that tickets/mobile and crm-mobile each re-declared.
+ *
+ * Requires `react-native-safe-area-context` — Screen's whole purpose is safe-area handling; consumers
+ * using this module are expected to install that optional peer (see MODULE.md).
+ *
+ * No `accessibilityRole` of its own: like `Card`, this is a layout shell — children and composed
+ * state blocks carry their own semantics.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { ScreenEdge, ScreenState } from "./Screen.variants";
+export interface ScreenProps {
+    children?: ReactNode;
+    edges?: readonly ScreenEdge[];
+    padded?: boolean;
+    keyboardAvoiding?: boolean;
+    keyboardVerticalOffset?: number;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    state?: ScreenState;
+    /** Shown when `state="loading"`. Defaults to `<LoadingState />`. */
+    loading?: ReactNode;
+    /** Shown when `state="empty"`. Compose `EmptyState` here. */
+    empty?: ReactNode;
+    /** Shown when `state="error"`. Compose `ErrorState` here. */
+    error?: ReactNode;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Screen: import("react").NamedExoticComponent<ScreenProps>;
+//# sourceMappingURL=Screen.d.ts.map

package/lib/typescript/modules/screen/Screen.variants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Screen's style resolution — same split as `Card.variants` / `EmptyState.variants`:
+ *  - STRUCTURE (flex root, padded inset, centred state slots) lives in the themed resolvers below.
+ *  - COLOUR is resolved from the theme's ROLE colours by `resolveScreenColors`, never a raw ramp.
+ *
+ * Free of React and lucide, so the behaviour tests import this directly (mocking only
+ * `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
+ */
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type ScreenEdge = "top" | "right" | "bottom" | "left";
+export type ScreenState = "idle" | "loading" | "empty" | "error";
+export declare const SCREEN_DEFAULT_EDGES: readonly ScreenEdge[];
+export interface ScreenColors {
+    readonly background: string;
+}
+export declare function resolveScreenColors(colors: RoleColors): ScreenColors;
+export declare const screenRootStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenPaddedStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenStateSlotStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const screenScrollContentStructure: import("../../core/style").VariantResolver<import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Screen.variants.d.ts.map

package/lib/typescript/modules/screen/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/screen`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers stay internal — a consumer configures a Screen through its
+ * props, never by importing its internals.
+ */
+export { Screen } from "./Screen";
+export type { ScreenProps } from "./Screen";
+export type { ScreenEdge, ScreenState } from "./Screen.variants";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/search-bar/SearchBar.d.ts

@@ -0,0 +1,47 @@
+/**
+ * SearchBar — the affordances every list screen re-implements around a query field: a leading
+ * `search` glyph (swapped for a `Spinner` while `loading`), a trailing clear button with its own
+ * accessible name and its own 44dp target, optional debounced reporting, and an optional "Cancel"
+ * text button.
+ *
+ * It owns its own `TextInput` rather than wrapping this library's `Input`. Reuse was evaluated:
+ * `Input`'s `trailingIcon` is documented decorative-only (it cannot host a separate pressable, which
+ * is exactly what "clearing never fires submit" requires), and `Input` exposes no submit/focus/
+ * autoFocus surface. Widening `Input` for one consumer would push search concerns into every form
+ * field, so — like `ButtonGroup` not importing `Button` — this is a standalone sibling that mirrors
+ * `Input`'s size specs, role tokens, and offset focus ring exactly instead of inventing new ones.
+ *
+ * Nothing here animates (the cancel button is a conditional render, not a transition), so there is
+ * no motion for `useReducedMotion` (WCAG 2.3.3) to gate. The one moving part on screen — the
+ * `loading` spinner — is `Spinner`'s own, which already honours reduced motion internally.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { SearchBarSize } from "./SearchBar.variants";
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    /** Fires on the keyboard's submit/search key. Any pending debounce is flushed first. */
+    onSubmit?: () => void;
+    /** Fires after the clear button (or "Cancel") empties the query. */
+    onClear?: () => void;
+    /** `0` (default) reports every keystroke. Above `0`, `onChangeText` is debounced by this many
+     *  milliseconds while the rendered text stays instant. */
+    debounceMs?: number;
+    /** Reveals a trailing "Cancel" text button once the field is focused. */
+    showCancel?: boolean;
+    cancelLabel?: string;
+    /** Swaps the leading `search` glyph for a `Spinner`. */
+    loading?: boolean;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    size?: SearchBarSize;
+    /** Overrides the placeholder→name fallback, for a placeholder that reads as a prompt rather than
+     *  a name ("Search…" tells a screen-reader user nothing about WHAT is being searched). */
+    accessibilityLabel?: string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
+//# sourceMappingURL=SearchBar.d.ts.map