panelui-native 0.7.0 → 0.12.0

package/lib/typescript/src/components/line-chart/index.d.ts

@@ -0,0 +1,247 @@
+/**
+ * LineChart — a time series, drawn and animated on the UI thread.
+ *
+ * The chart is composed rather than configured: the grid, each series, the
+ * axis and the crosshair are separate children, so a chart that wants no grid
+ * simply does not have one. A single component with twenty booleans is how
+ * charts end up unreadable at the call site.
+ *
+ * ```tsx
+ * <LineChart data={visits} xDataKey="date">
+ *   <LineChart.Grid />
+ *   <LineChart.Area dataKey="visits" />
+ *   <LineChart.Line dataKey="visits" />
+ *   <LineChart.XAxis />
+ *   <LineChart.Tooltip />
+ * </LineChart>
+ * ```
+ *
+ * Internally there are two layers, and the parts sort themselves into the
+ * right one: the geometry is SVG, and anything with text or a gesture on it is
+ * a React Native view laid over the top. That split is not a detail — SVG text
+ * ignores the platform's text scaling and the theme's font, and a gesture
+ * handler cannot be attached to an SVG node at all.
+ *
+ * Three things animate, each for a different reason:
+ *
+ * - **The reveal.** On mount the plot is uncovered left to right by an animated
+ *   clip rectangle. Everything inside shares that clip, so the line, its fill
+ *   and its markers arrive together rather than as three separate effects.
+ * - **The y-domain.** When the data changes the *scale* is tweened rather than
+ *   the path swapped, so a series that grows is redrawn against a moving axis
+ *   instead of jumping to a new shape. The reveal does not replay — it happened
+ *   once, and repeating it on every refresh turns a data update into an
+ *   animation.
+ * - **The crosshair.** A drag resolves the nearest index on the UI thread and
+ *   moves the line and the dots from there. Only the index crosses back into
+ *   JS, and only when it changes, so a drag costs a handful of re-renders
+ *   rather than one per frame.
+ *
+ * Colours come from the `--color-chart-*` tokens, so a chart follows the active
+ * theme and is put on brand by overriding those five in the app's own
+ * global.css. Nothing here hardcodes a hex.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+/**
+ * Which layer a part belongs to. Read off the component itself, so composition
+ * stays a flat list of children instead of two nested slots the caller has to
+ * remember the order of.
+ */
+type Layer = 'svg' | 'overlay';
+export type LineChartStatus = 'loading' | 'ready';
+export type LineChartCurve = 'monotone' | 'linear';
+export type LineChartDatum = Record<string, string | number | null | undefined>;
+/**
+ * The point under the crosshair, for something rendered *inside* the chart.
+ *
+ * A readout usually belongs in the card's header, which is outside this
+ * provider — use `onActiveIndexChange` for that. A hook cannot reach up out of
+ * the subtree it is called in, and pretending otherwise is how a component
+ * ends up with a context that has to wrap half the screen.
+ */
+export declare function useLineChart(): {
+    activeIndex: number;
+    activePoint: LineChartDatum | null;
+    xDataKey: string;
+};
+export interface LineChartProps extends ViewProps {
+    className?: string;
+    /** The rows. Each one is a point along the x-axis. */
+    data: LineChartDatum[];
+    /** Key holding the x label. Used by the axis and the crosshair readout. */
+    xDataKey?: string;
+    /**
+     * `loading` draws a flat skeleton with a sweep running along it, and morphs
+     * into the real series when it turns `ready`. One component throughout,
+     * rather than a spinner swapped for a chart — swapping loses the transition.
+     */
+    status?: LineChartStatus;
+    /** Width ÷ height. `2` is the wide card shape; `1.6` suits a narrow column. */
+    aspectRatio?: number;
+    /** Milliseconds for the reveal on mount. */
+    animationDuration?: number;
+    /** Milliseconds for the y-axis to settle after the data changes. */
+    domainDuration?: number;
+    /** Fix the y-axis instead of deriving it from the data. */
+    yDomain?: [number, number];
+    /** `monotone` never overshoots between points; `linear` joins them straight. */
+    curve?: LineChartCurve;
+    /**
+     * The point under the crosshair as it moves, and `-1`/`null` when the finger
+     * lifts. This is how a readout in the card's header gets its value — that
+     * header is outside the chart, so it cannot use `useLineChart`.
+     *
+     * Fires when the index changes, not per frame.
+     */
+    onActiveIndexChange?: (index: number, datum: LineChartDatum | null) => void;
+    /**
+     * Drop the axis padding so the line reaches the edges — for a sparkline with
+     * no grid, axis or crosshair, where the shape is the whole point.
+     */
+    compact?: boolean;
+    children?: ReactNode;
+}
+/** Imperative handle: re-run the reveal on demand, for a "replay" control. */
+export interface LineChartHandle {
+    replay: () => void;
+}
+export interface LineChartGridProps {
+    /** Horizontal rules across the plot. */
+    rows?: number;
+    color?: string;
+    /** Dash pattern, e.g. `"4,6"`. Omit for a solid rule. */
+    dashArray?: string;
+    opacity?: number;
+}
+/** Horizontal reference lines. Drawn under everything, outside the reveal clip. */
+declare function LineChartGrid({ rows, color, dashArray, opacity }: LineChartGridProps): import("react").JSX.Element;
+declare namespace LineChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartLineProps {
+    /** Key holding this series' y values. */
+    dataKey: string;
+    /**
+     * Stroke colour. Defaults to the `--color-chart-*` token at `colorIndex`, so
+     * a series follows the theme without the call site naming a colour.
+     */
+    color?: string;
+    /** Which `--color-chart-*` token to take when `color` is not given. */
+    colorIndex?: 1 | 2 | 3 | 4 | 5;
+    strokeWidth?: number;
+    /** Dash pattern, e.g. `"6,4"` — for a projection or a secondary series. */
+    dashArray?: string;
+    /** A dot at every point. Best kept for short series. */
+    showMarkers?: boolean;
+}
+/** One series. */
+declare function LineChartLine({ dataKey, color, colorIndex, strokeWidth, dashArray, showMarkers, }: LineChartLineProps): import("react").JSX.Element;
+declare namespace LineChartLine {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartAreaProps {
+    dataKey: string;
+    color?: string;
+    colorIndex?: 1 | 2 | 3 | 4 | 5;
+    /** Opacity at the line. Fades to nothing at the baseline. */
+    opacity?: number;
+}
+/**
+ * The fill under a series. A separate child from the line, because a chart with
+ * two series usually wants the fill on only one of them — two translucent
+ * fills over each other make a third colour that means nothing.
+ */
+declare function LineChartArea({ dataKey, color, colorIndex, opacity }: LineChartAreaProps): import("react").JSX.Element;
+declare namespace LineChartArea {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartSkeletonProps {
+    /** Milliseconds for one pass of the sweep. */
+    duration?: number;
+    color?: string;
+}
+/**
+ * The loading state: a flat rule where the series will be, with a highlight
+ * travelling along it. Drawn inside the same SVG rather than as an overlay, so
+ * arriving data is one tree changing rather than one view replacing another —
+ * which is what lets the flat line become the series instead of cutting to it.
+ */
+declare function LineChartSkeleton({ duration, color }: LineChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace LineChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartXAxisProps {
+    /** How many labels to show. The rest are dropped, evenly. */
+    ticks?: number;
+    /** Turn a row into its label. Defaults to the value at `xDataKey`. */
+    format?: (datum: LineChartDatum, index: number) => string;
+    className?: string;
+}
+/**
+ * The x labels. Real text rather than SVG text, so they follow the theme's font
+ * and the platform's text scaling — SVG text does neither.
+ */
+declare function LineChartXAxis({ ticks, format, className }: LineChartXAxisProps): import("react").JSX.Element;
+declare namespace LineChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartTooltipProps {
+    color?: string;
+    /**
+     * Float a small label at the crosshair showing the x-value and each series'
+     * value at that point — the minimal readout a drag wants. On by default.
+     */
+    showLabel?: boolean;
+    /** Format one series' value for the label. Defaults to a compact number. */
+    formatValue?: (value: number, key: string) => string;
+    /** Format the label's heading from the row. Defaults to the value at xDataKey. */
+    formatX?: (datum: LineChartDatum) => string;
+}
+/**
+ * The crosshair, the gesture that drives it, and the label that rides it.
+ *
+ * They live in the view layer: a gesture handler cannot be attached to an SVG
+ * node, and once the gesture is a view the crosshair may as well be one too —
+ * a 1px view moved by `translateX` costs less than re-rendering an SVG line.
+ * The label follows on the UI thread the same way; only its *text* crosses back
+ * into JS, and only when the active index changes.
+ *
+ * The hit area is the whole plot. A crosshair you have to land on the line to
+ * summon is a crosshair nobody finds.
+ */
+declare function LineChartTooltip({ color, showLabel, formatValue, formatX }: LineChartTooltipProps): import("react").JSX.Element | null;
+declare namespace LineChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LineChartLegendProps extends ViewProps {
+    className?: string;
+    /** Label per series key. A key with no label falls back to the key itself. */
+    labels?: Record<string, string>;
+}
+/**
+ * A swatch and a name per registered series. Sits in the top-left of the plot
+ * by default — move it with `className`.
+ */
+declare function LineChartLegend({ className, labels, ...props }: LineChartLegendProps): import("react").JSX.Element;
+declare namespace LineChartLegend {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<LineChartHandle>> & {
+    Grid: typeof LineChartGrid;
+    Area: typeof LineChartArea;
+    Line: typeof LineChartLine;
+    Skeleton: typeof LineChartSkeleton;
+    XAxis: typeof LineChartXAxis;
+    Tooltip: typeof LineChartTooltip;
+    Legend: typeof LineChartLegend;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/line-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/line-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/marker/index.d.ts

@@ -0,0 +1,137 @@
+/**
+ * Marker — an inline note in a conversation.
+ *
+ * Transcripts are not only messages. Between the turns sit things the
+ * conversation did rather than said: a tool that ran, a file that was read, a
+ * model that changed, the point where yesterday ended. Those are not messages
+ * and should not look like one — a bubble implies a speaker, and none of these
+ * have one. A marker is the quieter row that carries them: small, muted, and
+ * aligned to the transcript rather than to a side of it.
+ *
+ * ```tsx
+ * <Marker>
+ *   <Marker.Icon><CheckIcon /></Marker.Icon>
+ *   <Marker.Content>Explored 4 files</Marker.Content>
+ * </Marker>
+ * ```
+ *
+ * `shimmer` on the content is for the row that is still happening — the sweep
+ * runs through the glyphs while a step is in flight, and is dropped the moment
+ * it finishes.
+ */
+import { type ReactNode } from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
+import { type TextProps } from '../../primitives/text.js';
+type MarkerVariant = 'default' | 'border' | 'separator';
+declare const markerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** The plain row: an icon and a line of muted text. */
+        default: {};
+        /** Same row, closed by a hairline — for a step that ends a section. */
+        border: {
+            root: string;
+        };
+        /**
+         * A centred label with a rule running out to each edge. The rules are
+         * `Separator`s rather than borders so they follow the same token and
+         * thickness as every other rule in the app.
+         */
+        separator: {
+            root: string;
+            content: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, {
+    variant: {
+        /** The plain row: an icon and a line of muted text. */
+        default: {};
+        /** Same row, closed by a hairline — for a step that ends a section. */
+        border: {
+            root: string;
+        };
+        /**
+         * A centred label with a rule running out to each edge. The rules are
+         * `Separator`s rather than borders so they follow the same token and
+         * thickness as every other rule in the app.
+         */
+        separator: {
+            root: string;
+            content: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        /** The plain row: an icon and a line of muted text. */
+        default: {};
+        /** Same row, closed by a hairline — for a step that ends a section. */
+        border: {
+            root: string;
+        };
+        /**
+         * A centred label with a rule running out to each edge. The rules are
+         * `Separator`s rather than borders so they follow the same token and
+         * thickness as every other rule in the app.
+         */
+        separator: {
+            root: string;
+            content: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface MarkerProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<VariantProps<typeof markerVariants>, 'disabled'> {
+    className?: string;
+    disabled?: boolean;
+    /**
+     * `default` is the inline status row. `border` closes it with a hairline.
+     * `separator` centres the content between two rules — the "Yesterday"
+     * divider shape.
+     */
+    variant?: MarkerVariant;
+    children?: ReactNode;
+}
+export interface MarkerIconProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface MarkerContentProps extends TextProps {
+    className?: string;
+    /**
+     * Sweep a highlight through the text, for a step that is still running.
+     * Drop it when the step finishes — a marker that shimmers forever reads as
+     * a stuck one.
+     */
+    shimmer?: boolean;
+    children?: ReactNode;
+}
+export declare const Marker: import("react").ForwardRefExoticComponent<MarkerProps & import("react").RefAttributes<View>> & {
+    Icon: import("react").ForwardRefExoticComponent<MarkerIconProps & import("react").RefAttributes<View>>;
+    Content: import("react").ForwardRefExoticComponent<MarkerContentProps & import("react").RefAttributes<RNText>>;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/marker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/marker/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wCAAqC,CAAC;AACrG,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAK7D,KAAK,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;AAExD,QAAA,MAAM,cAAc;;QAOd,uDAAuD;;QAEvD,uEAAuE;;;;QAEvE;;;;WAIG;;;;;;;;;;;;;;;;QARH,uDAAuD;;QAEvD,uEAAuE;;;;QAEvE;;;;WAIG;;;;;;;;;;;;;;;;QARH,uDAAuD;;QAEvD,uEAAuE;;;;QAEvE;;;;WAIG;;;;;;;;;;;;;;2CAUP,CAAC;AAKH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,UAAU,CAAC,EAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmDD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6BD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsBD,eAAO,MAAM,MAAM;;;CAGjB,CAAC"}

package/lib/typescript/src/components/message/index.d.ts

@@ -21,7 +21,7 @@
  * ```
  */
 import { type ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View, type GestureResponderEvent, type ViewProps } from 'react-native';
 import { type VariantProps } from 'tailwind-variants';
 import { type TextProps } from '../../primitives/text.js';
 declare const messageVariants: import("tailwind-variants").TVReturnType<{
@@ -123,6 +123,13 @@ export interface MessageProps extends ViewProps, VariantProps<typeof messageVari
      * this for you.
      */
     stacked?: boolean;
+    /**
+     * Fires on a long press anywhere on the turn — the gesture a chat uses to
+     * surface per-message actions (copy, reply, react). Open a menu from it; the
+     * component only exposes the press. When set, the whole row gains press
+     * feedback. A plain tap should still do nothing, so there is no `onPress`.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
     children?: ReactNode;
 }
 export interface MessageGroupProps extends ViewProps {

package/lib/typescript/src/components/message/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAG7D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoCnB,CAAC;AAEH,KAAK,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;AAoB7B,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmBD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+BD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqBD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwBD,eAAO,MAAM,OAAO;;;;;;;;;CASlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAChF,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AAG7D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAoCnB,CAAC;AAEH,KAAK,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;AAoB7B,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmCD,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+BD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAqBD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwBD,eAAO,MAAM,OAAO;;;;;;;;;CASlB,CAAC"}

package/lib/typescript/src/components/message-scroller/index.d.ts

@@ -0,0 +1,150 @@
+/**
+ * MessageScroller — the scroll behaviour a chat transcript needs.
+ *
+ * A transcript is the one list where the interesting end is the bottom, the
+ * content grows while you are reading it, and history is added to the top. A
+ * plain scroll view gets all three wrong: it opens at the top, it stays put
+ * while a reply streams in below the fold, and it jumps a screen when older
+ * messages load. This owns those three behaviours so a screen does not have to
+ * rebuild them.
+ *
+ * ```tsx
+ * <MessageScroller autoScroll className="flex-1">
+ *   <MessageScroller.Viewport>
+ *     <MessageScroller.Content>
+ *       {messages.map((m) => (
+ *         <MessageScroller.Item key={m.id} messageId={m.id} scrollAnchor={m.role === 'user'}>
+ *           <Message>…</Message>
+ *         </MessageScroller.Item>
+ *       ))}
+ *     </MessageScroller.Content>
+ *   </MessageScroller.Viewport>
+ *   <MessageScroller.Button />
+ * </MessageScroller>
+ * ```
+ *
+ * The rule behind every part of it: **the reader's position is theirs**. New
+ * content follows the bottom only while they are already at the bottom, and
+ * scrolling away hands control back to them until they ask for it again.
+ * Content added above them never moves what they are looking at.
+ *
+ * Needs a bounded height — from `flex-1` in a column, or an explicit one.
+ * Given an unbounded parent it grows to fit its content and never scrolls.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type AnimatedScrollViewProps } from 'react-native-reanimated';
+export type MessageScrollerPosition = 'start' | 'end' | 'last-anchor';
+/** Scroll commands, for a control that lives outside the viewport. */
+export declare function useMessageScroller(): {
+    scrollToEnd: (animated?: boolean) => void;
+    scrollToStart: (animated?: boolean) => void;
+    scrollToMessage: (id: string, animated?: boolean) => void;
+};
+/**
+ * Where the reader is: the turn they are inside, and whether they are at the
+ * live edge. Both settle after a scroll rather than updating per frame — this
+ * is for a header that names the current turn, not for anything animated.
+ */
+export declare function useMessageScrollerVisibility(): {
+    currentAnchorId: string | null;
+    atEnd: boolean;
+};
+export interface MessageScrollerProps extends ViewProps {
+    className?: string;
+    /**
+     * Follow new content down as it arrives — but only while the reader is
+     * already at the bottom. Scrolling up disengages it until they come back or
+     * press the button.
+     */
+    autoScroll?: boolean;
+    /**
+     * Keep the reader on the same message when older ones are added above. Without
+     * it, loading history throws them a screen backwards.
+     */
+    preserveScrollOnPrepend?: boolean;
+    /**
+     * Where a freshly mounted transcript opens. `last-anchor` is the one to want
+     * for a saved thread: it lands on the last turn that started something,
+     * rather than at the very bottom of whatever the reply happened to be.
+     */
+    defaultScrollPosition?: MessageScrollerPosition;
+    children?: ReactNode;
+}
+declare function MessageScrollerRoot({ className, autoScroll, preserveScrollOnPrepend, defaultScrollPosition, children, ...props }: MessageScrollerProps): import("react").JSX.Element;
+declare namespace MessageScrollerRoot {
+    var displayName: string;
+}
+/**
+ * The four scroll events are owned by the component and taken off the props
+ * type rather than merged with a consumer's. They are not decoration on top of
+ * a scroll view — they *are* the behaviour, and a call site that quietly
+ * replaced one would look like a bug in the scrolling.
+ */
+export interface MessageScrollerViewportProps extends Omit<AnimatedScrollViewProps, 'onScroll' | 'onScrollEndDrag' | 'onMomentumScrollEnd' | 'onContentSizeChange'> {
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * The scrollable itself. Owns the three behaviours, because all three are
+ * reactions to scroll and content-size events and this is where they arrive.
+ */
+declare function MessageScrollerViewport({ className, children, ...props }: MessageScrollerViewportProps): import("react").JSX.Element;
+declare namespace MessageScrollerViewport {
+    var displayName: string;
+}
+export interface MessageScrollerContentProps extends ViewProps {
+    className?: string;
+    children?: ReactNode;
+}
+/** The transcript column. Announces additions rather than the whole list. */
+declare function MessageScrollerContent({ className, children, ...props }: MessageScrollerContentProps): import("react").JSX.Element;
+declare namespace MessageScrollerContent {
+    var displayName: string;
+}
+export interface MessageScrollerItemProps extends ViewProps {
+    className?: string;
+    /** Stable id for this turn. `scrollToMessage` takes the same value. */
+    messageId: string;
+    /**
+     * Marks this row as the start of a turn. `defaultScrollPosition="last-anchor"`
+     * opens on the last one, and it is what a saved thread should land on — the
+     * question, not the tail of the answer to it.
+     */
+    scrollAnchor?: boolean;
+    children?: ReactNode;
+}
+/**
+ * One row of the transcript. It exists to be measured: without a boundary per
+ * turn there is nothing to scroll *to*, and nothing to measure the prepend
+ * shift against.
+ */
+declare function MessageScrollerItem({ className, messageId, scrollAnchor, children, ...props }: MessageScrollerItemProps): import("react").JSX.Element;
+declare namespace MessageScrollerItem {
+    var displayName: string;
+}
+export interface MessageScrollerButtonProps extends ViewProps {
+    className?: string;
+    /** `end` jumps to the newest message, `start` to the beginning of the thread. */
+    target?: 'start' | 'end';
+    accessibilityLabel?: string;
+    children?: ReactNode;
+}
+/**
+ * The way back to the live edge, shown only when there is one to go back to.
+ *
+ * Its visibility is driven from the same shared value the scroll handler
+ * writes, so it fades on the UI thread while the transcript is still moving.
+ */
+declare function MessageScrollerButton({ className, target, accessibilityLabel, children, ...props }: MessageScrollerButtonProps): import("react").JSX.Element;
+declare namespace MessageScrollerButton {
+    var displayName: string;
+}
+export declare const MessageScroller: typeof MessageScrollerRoot & {
+    Viewport: typeof MessageScrollerViewport;
+    Content: typeof MessageScrollerContent;
+    Item: typeof MessageScrollerItem;
+    Button: typeof MessageScrollerButton;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/message-scroller/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message-scroller/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAiB,EAQf,KAAK,uBAAuB,EAC7B,MAAM,yBAAyB,CAAC;AAejC,MAAM,MAAM,uBAAuB,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAmCtE,sEAAsE;AACtE,wBAAgB,kBAAkB;6BAlBP,OAAO,KAAK,IAAI;+BACd,OAAO,KAAK,IAAI;0BACrB,MAAM,aAAa,OAAO,KAAK,IAAI;EAmB1D;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B;;;EAG3C;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,uBAAuB,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,UAAkB,EAClB,uBAA8B,EAC9B,qBAA6B,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,+BA2FtB;kBAlGQ,mBAAmB;;;AAqG5B;;;;;GAKG;AACH,MAAM,WAAW,4BACf,SAAQ,IAAI,CACV,uBAAuB,EACvB,UAAU,GAAG,iBAAiB,GAAG,qBAAqB,GAAG,qBAAqB,CAC/E;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,4BAA4B,+BAgJ9B;kBApJQ,uBAAuB;;;AAuKhC,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,6EAA6E;AAC7E,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,+BAY7B;kBAhBQ,sBAAsB;;;AAmB/B,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,SAAS,EACT,YAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAe1B;kBArBQ,mBAAmB;;;AAwB5B,MAAM,WAAW,0BAA2B,SAAQ,SAAS;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,MAAc,EACd,kBAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,0BAA0B,+BAkD5B;kBAxDQ,qBAAqB;;;AA2D9B,eAAO,MAAM,eAAe;;;;;CAK1B,CAAC"}