panelui-native 0.16.0 → 0.19.0

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

@@ -0,0 +1,310 @@
+/**
+ * Flow — a canvas of nodes joined by edges, that you pan, pinch and rearrange
+ * with a finger.
+ *
+ * ```tsx
+ * <Flow>
+ *   <Flow.Background variant="dots" />
+ *   <Flow.Node id="db" position={{ x: 24, y: 40 }}>
+ *     <Frame>…</Frame>
+ *   </Flow.Node>
+ *   <Flow.Node id="web" position={{ x: 220, y: 200 }}>
+ *     <Frame>…</Frame>
+ *   </Flow.Node>
+ *   <Flow.Edge from="web" to="db" dashed animated />
+ *   <Flow.Controls />
+ * </Flow>
+ * ```
+ *
+ * ## Where the positions live
+ *
+ * Every node's box is kept twice: on the UI thread, where a drag writes it
+ * every frame and the node's own transform reads it, and in React state, where
+ * the edges are rendered from it. A dragged node therefore never lags its own
+ * finger, and the edges attached to it redraw as it moves.
+ *
+ * The tempting design is one copy — everything on the UI thread, edges
+ * animating their own path strings, no renders at all. It does not draw. An
+ * animated SVG path in React Native reliably animates its `d` and nothing
+ * else, and only while nothing else about it is animated; anything more is
+ * dropped with no error, leaving a path that never receives its geometry. So
+ * the edges are ordinary elements and cost a render per drag frame. That is a
+ * real cost and it is the right trade.
+ *
+ * JavaScript is told a drag has finished through `onNodeDragEnd`. Positions
+ * are otherwise yours to leave alone: pass `position` once and the canvas
+ * takes it from there, or keep it in state and pass it back to drive nodes
+ * from outside.
+ *
+ * ## Two gestures, one canvas
+ *
+ * The pane pans and pinches; a node drags; a handle draws a new connection.
+ * They are nested gesture detectors rather than one gesture doing three jobs,
+ * so the innermost thing under the finger wins, which is what a finger expects.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type FlowPoint, type FlowRect, type FlowSide } from './flow-paths.js';
+export type FlowEdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
+export interface FlowViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface FlowNodePosition {
+    x: number;
+    y: number;
+}
+/** What `onConnect` is handed when a connection lands. */
+export interface FlowConnection {
+    /** Node the drag started from. */
+    source: string;
+    /** Handle it started from, when it started from one. */
+    sourceHandle?: string;
+    /** Node it was dropped on. */
+    target: string;
+    /** Handle it was dropped on, when it landed on one. */
+    targetHandle?: string;
+}
+/**
+ * Which layer a part belongs to. Declared on the component as a static so the
+ * root can sort its children without depending on function identity.
+ */
+type FlowSlot = 'background' | 'overlay';
+export interface FlowProps extends Omit<ViewProps, 'children'> {
+    className?: string;
+    /** Where the canvas starts. `zoom` of 1 is one graph point per screen point. */
+    defaultViewport?: FlowViewport;
+    /** Closest the canvas will zoom out. */
+    minZoom?: number;
+    /** Closest it will zoom in. */
+    maxZoom?: number;
+    /** Drag the empty canvas to move it. */
+    panOnDrag?: boolean;
+    /** Pinch to zoom. */
+    zoomOnPinch?: boolean;
+    /**
+     * Frame every node once they have all measured themselves. For a graph whose
+     * positions come from data and are not laid out against a known screen size.
+     */
+    fitViewOnMount?: boolean;
+    /** Padding left around the graph when fitting, in screen points. */
+    fitViewPadding?: number;
+    /** The canvas has moved or zoomed. Fired as it happens, on the JS thread. */
+    onViewportChange?: (viewport: FlowViewport) => void;
+    /** A node was dropped somewhere new. The only time a drag reaches JavaScript. */
+    onNodeDragEnd?: (id: string, position: FlowNodePosition) => void;
+    /**
+     * A connection was drawn between two handles. The canvas never adds the edge
+     * itself — the graph is yours, so what a new connection means is yours too.
+     */
+    onConnect?: (connection: FlowConnection) => void;
+    /** Refuse a connection before `onConnect` sees it. */
+    isValidConnection?: (connection: FlowConnection) => boolean;
+    children?: ReactNode;
+}
+declare function FlowRoot({ className, defaultViewport, minZoom, maxZoom, panOnDrag, zoomOnPinch, fitViewOnMount, fitViewPadding, onViewportChange, onNodeDragEnd, onConnect, isValidConnection, children, ...props }: FlowProps): import("react").JSX.Element;
+export interface FlowBackgroundProps {
+    /** The mark repeated across the canvas. */
+    variant?: 'dots' | 'lines' | 'cross' | 'none';
+    /** Points between marks. */
+    gap?: number;
+    /** How big each mark is drawn. */
+    size?: number;
+    /** Mark colour. Defaults to a muted theme token. */
+    color?: string;
+}
+/**
+ * The grid behind everything. It lives inside the transformed layer, so it
+ * pans and scales with the graph — which is the whole point: a grid that
+ * stayed put would say the canvas was not moving.
+ */
+declare function FlowBackground({ variant, gap, size, color, }: FlowBackgroundProps): import("react").JSX.Element | null;
+declare namespace FlowBackground {
+    var displayName: string;
+    var slot: FlowSlot;
+}
+export interface FlowNodeProps extends Omit<ViewProps, 'children'> {
+    /** Identifies the node to edges and to `onNodeDragEnd`. Must be unique. */
+    id: string;
+    /** Where it starts, in graph coordinates. */
+    position: FlowNodePosition;
+    className?: string;
+    /** Let a finger move it. */
+    draggable?: boolean;
+    /** Draw the selected ring. */
+    selected?: boolean;
+    /** Tapping the node — separate from dragging it. */
+    onPress?: () => void;
+    /** Spoken name. Defaults to the node's id. */
+    accessibilityLabel?: string;
+    children?: ReactNode;
+}
+/**
+ * One box on the canvas. Its own content is whatever you put inside — a Frame
+ * is the usual answer, since a node is a titled card of rows more often than
+ * it is anything else.
+ */
+declare function FlowNode({ id, position, className, draggable, selected, onPress, accessibilityLabel, children, ...props }: FlowNodeProps): import("react").JSX.Element;
+declare namespace FlowNode {
+    var displayName: string;
+}
+export interface FlowHandleProps {
+    /** Names the handle to an edge, as `"nodeId.handleId"`. */
+    id?: string;
+    /** Which face it sits on. */
+    position?: FlowSide;
+    /**
+     * `source` starts connections, `target` receives them, `both` does either.
+     * A drag from a source can only land on a target, and the other way round.
+     */
+    type?: 'source' | 'target' | 'both';
+    /** Where along the face, 0–1. For more than one handle on a side. */
+    offset?: number;
+    className?: string;
+    /** Draw nothing. The handle still anchors edges and still accepts a drop. */
+    hidden?: boolean;
+}
+/**
+ * A port on a node — both the point an edge attaches to and the grip a new
+ * connection is dragged from.
+ *
+ * Its position is worked out from the node's box and the face it names, so it
+ * never has to measure itself. That matters: a handle that measured would be
+ * one frame behind the node it sits on, and the edge would trail its own port.
+ */
+declare function FlowHandle({ id, position, type, offset, className, hidden, }: FlowHandleProps): import("react").JSX.Element | null;
+declare namespace FlowHandle {
+    var displayName: string;
+}
+export interface FlowEdgeProps {
+    /** Source, as `"nodeId"` or `"nodeId.handleId"`. */
+    from: string;
+    /** Target, same shape. */
+    to: string;
+    /** How the edge is routed. */
+    variant?: FlowEdgeVariant;
+    /**
+     * Mark the edge as carrying something — a request, a build, a dependency
+     * that is live rather than declared. Draws it dashed.
+     */
+    animated?: boolean;
+    /** Draw it broken rather than solid. */
+    dashed?: boolean;
+    /**
+     * Stroke colour. Defaults to the muted-foreground token — an edge is content
+     * rather than chrome, and the border token it would otherwise share with the
+     * nodes is, by design, barely there.
+     */
+    color?: string;
+    /** Stroke width in graph points. */
+    width?: number;
+    /** Put an arrowhead on the target end. */
+    arrow?: boolean;
+    /** Override the face it leaves from. Otherwise worked out from the layout. */
+    fromSide?: FlowSide;
+    /** Override the face it arrives at. */
+    toSide?: FlowSide;
+    /** Corner radius for `smoothstep`. */
+    radius?: number;
+    /** How far the edge steps clear of a node before turning. */
+    gap?: number;
+    /** Curve strength for `bezier`. */
+    curvature?: number;
+}
+/**
+ * A line between two nodes. It names them rather than coordinates, and works
+ * out its own geometry from wherever they currently are — including which face
+ * to use, which is why a graph the user rearranges does not need re-specifying.
+ *
+ * It draws nothing where it is written. Every edge in a canvas has to end up
+ * inside one `<Svg>`, under every node — an SVG element rendered among the
+ * nodes is not in an SVG at all and silently draws nothing — so an edge
+ * registers itself and the canvas paints it in the right layer. Which means an
+ * edge can be written wherever it reads best: beside the nodes it joins, inside
+ * a group, inside a `.map`, behind a condition.
+ */
+declare function FlowEdge(props: FlowEdgeProps): null;
+export interface FlowGroupProps extends Omit<ViewProps, 'children'> {
+    /** Identifies the group, the same way a node's id does. */
+    id: string;
+    /** Where the container sits. */
+    position: FlowNodePosition;
+    /** How big the container is. Children are positioned inside it. */
+    size: {
+        width: number;
+        height: number;
+    };
+    /** Caption drawn along the top edge. */
+    label?: string;
+    className?: string;
+    /** Move the group, and everything in it, with a finger. */
+    draggable?: boolean;
+    children?: ReactNode;
+}
+/**
+ * A container other nodes sit in and travel with.
+ *
+ * Dragging it offsets every child in the same worklet that moves the group, so
+ * a group of twenty nodes costs one frame's work rather than twenty.
+ */
+declare function FlowGroup({ id, position, size, label, className, draggable, children, ...props }: FlowGroupProps): import("react").JSX.Element;
+declare namespace FlowGroup {
+    var displayName: string;
+}
+export interface FlowControlsProps {
+    className?: string;
+    /** Show the zoom in and out buttons. */
+    zoom?: boolean;
+    /** Show the fit-to-graph button. */
+    fit?: boolean;
+    /** Show the lock, which freezes panning, zooming and dragging together. */
+    lock?: boolean;
+    /** How much one press of zoom in multiplies the scale by. */
+    step?: number;
+}
+/**
+ * The button stack in the corner. It sits outside the transformed layer, so it
+ * stays put while the canvas moves under it.
+ *
+ * Worth having even where pinch works: on a phone, pinching to a specific
+ * scale is imprecise, and framing the whole graph by hand is worse.
+ */
+declare function FlowControls({ className, zoom: showZoom, fit, lock, step, }: FlowControlsProps): import("react").JSX.Element;
+declare namespace FlowControls {
+    var displayName: string;
+    var slot: FlowSlot;
+}
+export interface FlowMiniMapProps {
+    className?: string;
+    /** Which corner it sits in. */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Box size in screen points. */
+    width?: number;
+    height?: number;
+    /** Colour of a node in the map. Defaults to the muted-foreground token. */
+    nodeColor?: string;
+}
+/**
+ * An overview of the whole graph with the visible region marked on it — for a
+ * canvas bigger than the screen, where panning alone loses you.
+ *
+ * The map's own scale is derived once per frame and shared by every node in it,
+ * so N nodes cost one bounds calculation rather than N.
+ */
+declare function FlowMiniMap({ className, position, width, height, nodeColor, }: FlowMiniMapProps): import("react").JSX.Element;
+declare namespace FlowMiniMap {
+    var displayName: string;
+    var slot: FlowSlot;
+}
+export declare const Flow: typeof FlowRoot & {
+    Background: typeof FlowBackground;
+    Node: typeof FlowNode;
+    Handle: typeof FlowHandle;
+    Edge: typeof FlowEdge;
+    Group: typeof FlowGroup;
+    Controls: typeof FlowControls;
+    MiniMap: typeof FlowMiniMap;
+};
+export type { FlowSide, FlowRect, FlowPoint };
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,64 @@
+/**
+ * Form — binds a `useForm` instance to its fields without threading `form`
+ * through every one of them by hand.
+ *
+ * `Form.Field` is a render prop, not a component that clones its child, for
+ * the same reason `useField` is a hook and not a wrapper: PanelUI's controls
+ * take differently-shaped change props, and only the caller knows which one
+ * a given field needs to wire up.
+ *
+ * `Form`/`Form.Field` trade some type precision for that JSX ergonomics — a
+ * field's `name` isn't checked against `keyof YourValues` here, because a
+ * value's shape can't flow through `useContext` generically. Reach for
+ * `useField(form, name)` directly when a field's name should be checked
+ * against the form's own value type.
+ *
+ * ```tsx
+ * const form = useForm({
+ *   defaultValues: { email: '' },
+ *   onSubmit: async (values) => { ... },
+ * });
+ *
+ * <Form form={form}>
+ *   <Form.Field name="email" validate={(value) => (value ? undefined : 'Required')}>
+ *     {(field) => (
+ *       <Input
+ *         label="Email"
+ *         value={field.value}
+ *         onChangeText={field.onChange}
+ *         onBlur={field.onBlur}
+ *         errorMessage={field.error}
+ *       />
+ *     )}
+ *   </Form.Field>
+ * </Form>
+ * ```
+ */
+import { type ReactNode } from 'react';
+import { useField, type FormFieldRenderProps, type UseFieldOptions } from './use-field.js';
+import { useForm, type FormApi, type FieldErrors, type FieldTouched, type FieldState, type UseFormOptions, type Validator } from './use-form.js';
+export { useForm, useField };
+export type { FormApi, FieldErrors, FieldTouched, FieldState, UseFormOptions, Validator, FormFieldRenderProps, UseFieldOptions, };
+export interface FormProps {
+    form: FormApi<any>;
+    children?: ReactNode;
+}
+declare function FormRoot({ form, children }: FormProps): import("react").JSX.Element;
+declare namespace FormRoot {
+    var displayName: string;
+}
+export interface FormFieldProps {
+    name: string;
+    validate?: (value: any, values: any) => string | undefined | Promise<string | undefined>;
+    /** Runs on blur, and always on submit. `'change'` also validates on every edit. */
+    validateOn?: 'blur' | 'change';
+    children: (field: FormFieldRenderProps<any>) => ReactNode;
+}
+declare function FormField({ name, validate, validateOn, children }: FormFieldProps): import("react").JSX.Element;
+declare namespace FormField {
+    var displayName: string;
+}
+export declare const Form: typeof FormRoot & {
+    Field: typeof FormField;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAa,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,eAAY,CAAC;AAE9I,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;AAC7B,YAAY,EACV,OAAO,EACP,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,oBAAoB,EACpB,eAAe,GAChB,CAAC;AAIF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAE9C;kBAFQ,QAAQ;;;AAKjB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACzF,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC;CAC3D;AAED,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAO1E;kBAPQ,SAAS;;;AAUlB,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/lib/typescript/src/components/form/use-field.d.ts

@@ -0,0 +1,16 @@
+import type { FormApi, Validator } from './use-form.js';
+export interface FormFieldRenderProps<V> {
+    value: V;
+    /** Only set once the field has been touched (blurred, or the form submitted). */
+    error?: string;
+    touched: boolean;
+    onChange: (value: V) => void;
+    onBlur: () => void;
+}
+export interface UseFieldOptions<T extends Record<string, any>, K extends keyof T> {
+    validate?: Validator<T, K>;
+    /** Runs on blur, and always on submit. `'change'` also validates on every edit. */
+    validateOn?: 'blur' | 'change';
+}
+export declare function useField<T extends Record<string, any>, K extends keyof T>(form: FormApi<T>, name: K, { validate, validateOn }?: UseFieldOptions<T, K>): FormFieldRenderProps<T[K]>;
+//# sourceMappingURL=use-field.d.ts.map

package/lib/typescript/src/components/form/use-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/use-field.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAY,CAAC;AAErD,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,EAAE,CAAC,CAAC;IACT,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC;IAC/E,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3B,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAChC;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EACvE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAChB,IAAI,EAAE,CAAC,EACP,EAAE,QAAQ,EAAE,UAAmB,EAAE,GAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAM,GAC5D,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAgC5B"}

package/lib/typescript/src/components/form/use-form.d.ts

@@ -0,0 +1,37 @@
+export type FieldErrors<T> = Partial<Record<keyof T, string>>;
+export type FieldTouched<T> = Partial<Record<keyof T, boolean>>;
+export type Validator<T extends Record<string, any>, K extends keyof T> = (value: T[K], values: T) => string | undefined | Promise<string | undefined>;
+export interface FieldState<V> {
+    value: V;
+    error?: string;
+    touched: boolean;
+}
+export interface UseFormOptions<T extends Record<string, any>> {
+    defaultValues: T;
+    /** Whole-form validation, e.g. a rule that compares two fields. Runs on submit. */
+    validate?: (values: T) => FieldErrors<T> | Promise<FieldErrors<T>>;
+    onSubmit: (values: T) => void | Promise<void>;
+}
+export interface FormApi<T extends Record<string, any>> {
+    values: T;
+    errors: FieldErrors<T>;
+    touched: FieldTouched<T>;
+    isSubmitting: boolean;
+    /** No field currently carries a validation error. Fields validate on blur and
+     * submit, so this does not guarantee an untouched field would pass. */
+    isValid: boolean;
+    /** `values` differs from `defaultValues`, compared as JSON. */
+    isDirty: boolean;
+    setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
+    setFieldTouched: <K extends keyof T>(name: K, touched?: boolean) => void;
+    setFieldError: <K extends keyof T>(name: K, error: string | undefined) => void;
+    getFieldState: <K extends keyof T>(name: K) => FieldState<T[K]>;
+    /** Used by `useField`/`Form.Field` to attach a field's validation rule. */
+    registerValidator: <K extends keyof T>(name: K, validator?: Validator<T, K>) => void;
+    /** Runs `name`'s registered validator (if any) and records the result. */
+    validateField: <K extends keyof T>(name: K) => Promise<boolean>;
+    handleSubmit: () => Promise<void>;
+    reset: (values?: T) => void;
+}
+export declare function useForm<T extends Record<string, any>>({ defaultValues, validate, onSubmit, }: UseFormOptions<T>): FormApi<T>;
+//# sourceMappingURL=use-form.d.ts.map

package/lib/typescript/src/components/form/use-form.d.ts.map

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

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

@@ -21,8 +21,14 @@
  *     <Frame.Action>All agents under 25% token limit</Frame.Action>
  *   </Frame.Header>
  *   <Frame.Panel>
- *     <Frame.Row>…</Frame.Row>
- *     <Frame.Row>…</Frame.Row>
+ *     <Frame.Row>
+ *       <Frame.Media><PackageIcon /></Frame.Media>
+ *       <Frame.Content>
+ *         <Frame.Title>opus-4.6</Frame.Title>
+ *         <Frame.Description>Indexing the repository</Frame.Description>
+ *       </Frame.Content>
+ *       <Frame.Actions><Chip>Running</Chip></Frame.Actions>
+ *     </Frame.Row>
  *   </Frame.Panel>
  * </Frame>
  * ```
@@ -30,6 +36,14 @@
  * The panel draws the hairlines between its own rows. React Native has no
  * `:first-child`, so the alternative is every caller writing
  * `divided={index > 0}` on every row and getting it wrong once.
+ *
+ * A row is three slots, and they exist because of one React Native detail:
+ * Yoga defaults `flexShrink` to `0`, the opposite of the web. A child that is
+ * not told to shrink never does, so a fourth thing in a row pushes the others
+ * past the edge — where the frame's `overflow-hidden` silently cuts them off
+ * rather than wrapping or truncating. `Frame.Media` and `Frame.Actions` hold
+ * their size, `Frame.Content` takes what is left and is allowed to shrink to
+ * nothing, and the row fits at any width without the caller measuring anything.
  */
 import { type ReactNode } from 'react';
 import { View, type PressableProps, type Text as RNText, type ViewProps } from 'react-native';
@@ -51,6 +65,15 @@ export interface FrameHeaderProps extends FrameProps {
 export interface FrameActionProps extends FrameProps {
     children?: ReactNode;
 }
+export interface FrameMediaProps extends FrameProps {
+    children?: ReactNode;
+}
+export interface FrameContentProps extends FrameProps {
+    children?: ReactNode;
+}
+export interface FrameActionsProps extends FrameProps {
+    children?: ReactNode;
+}
 /**
  * Marks the parts that take part in the panel's own divider bookkeeping —
  * a Row draws a line above itself, a Section draws one above its heading.
@@ -76,6 +99,17 @@ export interface FrameRowProps extends Omit<PressableProps, 'children'>, Dividab
     divided?: boolean;
     /** Trailing chevron marking the row as leading somewhere. */
     chevron?: boolean;
+    /**
+     * Let the row run onto a second line instead of holding one. For a cluster
+     * of chips or tags, where the alternative is the last ones being clipped.
+     */
+    wrap?: boolean;
+    /**
+     * Where the row's slots sit against each other. `start` for a row two or
+     * three lines tall, where centring an icon against a tall text column leaves
+     * it floating in the middle.
+     */
+    align?: 'center' | 'start';
     children?: ReactNode;
 }
 export interface FrameSectionProps extends FrameProps, Dividable {
@@ -92,6 +126,9 @@ export declare const Frame: import("react").ForwardRefExoticComponent<FrameRootP
     Panel: import("react").ForwardRefExoticComponent<FramePanelProps & import("react").RefAttributes<View>>;
     Section: import("react").ForwardRefExoticComponent<FrameSectionProps & import("react").RefAttributes<View>>;
     Row: import("react").ForwardRefExoticComponent<FrameRowProps & import("react").RefAttributes<View>>;
+    Media: import("react").ForwardRefExoticComponent<FrameMediaProps & import("react").RefAttributes<View>>;
+    Content: import("react").ForwardRefExoticComponent<FrameContentProps & import("react").RefAttributes<View>>;
+    Actions: import("react").ForwardRefExoticComponent<FrameActionsProps & import("react").RefAttributes<View>>;
 };
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAsD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAEL,IAAI,EACJ,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,MAAM,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AA+B7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AASD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6BD;;;;GAIG;AACH,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkBD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,SAAS;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8CD,MAAM,WAAW,iBAAkB,SAAQ,UAAU,EAAE,SAAS;IAC9D,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkCD,eAAO,MAAM,KAAK;;;;;;;;CAQhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,IAAI,EACJ,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,MAAM,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,0BAAuB,CAAC;AA+B7D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAU/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AASD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmDD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+CD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoBD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiBD;;;;GAIG;AACH,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAkBD,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,SAAS;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmDD,MAAM,WAAW,iBAAkB,SAAQ,UAAU,EAAE,SAAS;IAC9D,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkCD,eAAO,MAAM,KAAK;;;;;;;;;;;CAWhB,CAAC"}