react-native-gtkx 0.1.0-alpha.4 → 0.2.0-alpha.2

package/dist/animated/value.js

@@ -9,6 +9,12 @@ import { createInterpolator } from "./interpolate";
 const numeric = (value) => typeof value === "number" ? value : parseFloat(value);
 export class AnimatedValue {
     _value;
+    // RN splits a value into an animated part and a static offset: a drag sets
+    // the offset to where the last gesture ended, so dx/dy can keep starting
+    // from zero. Everything observable is the SUM; the animation runner only
+    // ever drives `_value`, so an untouched offset (0) leaves behaviour
+    // byte-identical to before it existed.
+    _offset = 0;
     _startingValue;
     _listeners = new Map();
     _nextListenerId = 1;
@@ -23,6 +29,23 @@ export class AnimatedValue {
         this._animation?.stop();
         this.__updateValue(value);
     }
+    /** Sets the static part. The animated part is left where it is. */
+    setOffset(offset) {
+        this._offset = offset;
+        this.__notify();
+    }
+    /** Folds the offset into the value, leaving the sum unchanged. */
+    flattenOffset() {
+        this._value += this._offset;
+        this._offset = 0;
+        this.__notify();
+    }
+    /** The mirror of flattenOffset: moves the value into the offset. */
+    extractOffset() {
+        this._offset += this._value;
+        this._value = 0;
+        this.__notify();
+    }
     addListener(listener) {
         const id = String(this._nextListenerId++);
         this._listeners.set(id, listener);
@@ -39,7 +62,7 @@ export class AnimatedValue {
     // { finished: false }.
     stopAnimation(callback) {
         this._animation?.stop();
-        callback?.(this._value);
+        callback?.(this.__getValue());
     }
     // Stops any running animation, then snaps back to the construction-time
     // value. Unlike RN we do notify listeners about the snap-back: the direct
@@ -53,11 +76,16 @@ export class AnimatedValue {
         return new AnimatedInterpolation(this, config);
     }
     __getValue() {
-        return this._value;
+        return this._value + this._offset;
     }
     /** @internal Called by the animation runner on every frame. */
     __updateValue(value) {
         this._value = value;
+        this.__notify();
+    }
+    /** @internal Publishes the current sum to every listener. */
+    __notify() {
+        const value = this.__getValue();
         for (const listener of [...this._listeners.values()]) {
             listener({ value });
         }

package/dist/animated/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","sourceRoot":"","sources":["../../src/animated/value.ts"],"names":[],"mappings":"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","sourcesContent":["// Animated.Value and the read-only interpolation node. Values are observable\n// numbers; the animation runner (value-animation.ts) drives them frame by\n// frame through the __-prefixed internal hooks. Interpolation nodes subscribe\n// to their parent lazily (only while they have listeners themselves) and can\n// be interpolated again, cascading from the parent's numeric value.\n\nimport { createInterpolator } from \"./interpolate\"\nimport type {\n  InterpolationConfig,\n  InterpolationListener,\n  ValueListener,\n} from \"./types\"\n\n// Internal handle a running animation registers on its value; the value calls\n// stop() to preempt it when a newer animation (or setValue) takes over — the\n// preempted animation ends with { finished: false }, matching RN.\nexport type AnimationHandle = { stop(): void }\n\n// Minimal parent protocol shared by AnimatedValue and AnimatedInterpolation,\n// enabling cascaded interpolate() chains over either kind of node.\ntype InterpolationParent = {\n  __getValue(): number | string\n  addListener(listener: InterpolationListener): string\n  removeListener(id: string): void\n}\n\n// Cascading from a string-producing parent (\"45deg\") interpolates over its\n// numeric part.\nconst numeric = (value: number | string): number =>\n  typeof value === \"number\" ? value : parseFloat(value)\n\nexport class AnimatedValue {\n  private _value: number\n  private readonly _startingValue: number\n  private readonly _listeners = new Map<string, ValueListener>()\n  private _nextListenerId = 1\n  private _animation: AnimationHandle | null = null\n\n  constructor(value: number) {\n    this._value = value\n    this._startingValue = value\n  }\n\n  // Stops the running animation (its callback gets { finished: false }, as in\n  // RN) and jumps to the new value.\n  setValue(value: number): void {\n    this._animation?.stop()\n    this.__updateValue(value)\n  }\n\n  addListener(listener: ValueListener): string {\n    const id = String(this._nextListenerId++)\n    this._listeners.set(id, listener)\n    return id\n  }\n\n  removeListener(id: string): void {\n    this._listeners.delete(id)\n  }\n\n  removeAllListeners(): void {\n    this._listeners.clear()\n  }\n\n  // Stops the running animation where it stands and reports the current value\n  // to the callback. The stopped animation's own callback gets\n  // { finished: false }.\n  stopAnimation(callback?: (value: number) => void): void {\n    this._animation?.stop()\n    callback?.(this._value)\n  }\n\n  // Stops any running animation, then snaps back to the construction-time\n  // value. Unlike RN we do notify listeners about the snap-back: the direct\n  // GTK path renders from listener events, so a silent reset would leave\n  // widgets stale until the next animation frame.\n  resetAnimation(callback?: (value: number) => void): void {\n    this.stopAnimation(callback)\n    this.__updateValue(this._startingValue)\n  }\n\n  interpolate(config: InterpolationConfig): AnimatedInterpolation {\n    return new AnimatedInterpolation(this, config)\n  }\n\n  __getValue(): number {\n    return this._value\n  }\n\n  /** @internal Called by the animation runner on every frame. */\n  __updateValue(value: number): void {\n    this._value = value\n    for (const listener of [...this._listeners.values()]) {\n      listener({ value })\n    }\n  }\n\n  /** @internal Registers a running animation, preempting the previous one. */\n  __startAnimation(handle: AnimationHandle): void {\n    const previous = this._animation\n    this._animation = handle\n    if (previous && previous !== handle) {\n      previous.stop()\n    }\n  }\n\n  /** @internal */\n  __endAnimation(handle: AnimationHandle): void {\n    if (this._animation === handle) {\n      this._animation = null\n    }\n  }\n}\n\nexport class AnimatedInterpolation {\n  private readonly _parent: InterpolationParent\n  private readonly _interpolator: (input: number) => number | string\n  private readonly _listeners = new Map<string, InterpolationListener>()\n  private _nextListenerId = 1\n  private _parentSubscription: string | null = null\n\n  constructor(parent: InterpolationParent, config: InterpolationConfig) {\n    this._parent = parent\n    this._interpolator = createInterpolator(config)\n  }\n\n  __getValue(): number | string {\n    return this._interpolator(numeric(this._parent.__getValue()))\n  }\n\n  addListener(listener: InterpolationListener): string {\n    const id = String(this._nextListenerId++)\n    this._listeners.set(id, listener)\n    if (this._parentSubscription === null) {\n      // Lazy upstream subscription (same leak policy as the API emitters):\n      // attach with the first listener, detach with the last one.\n      this._parentSubscription = this._parent.addListener(({ value }) => {\n        const output = this._interpolator(numeric(value))\n        for (const entry of [...this._listeners.values()]) {\n          entry({ value: output })\n        }\n      })\n    }\n    return id\n  }\n\n  removeListener(id: string): void {\n    if (!this._listeners.delete(id)) {\n      return\n    }\n    if (this._listeners.size === 0) {\n      this._detachFromParent()\n    }\n  }\n\n  removeAllListeners(): void {\n    this._listeners.clear()\n    this._detachFromParent()\n  }\n\n  interpolate(config: InterpolationConfig): AnimatedInterpolation {\n    return new AnimatedInterpolation(this, config)\n  }\n\n  private _detachFromParent(): void {\n    if (this._parentSubscription !== null) {\n      this._parent.removeListener(this._parentSubscription)\n      this._parentSubscription = null\n    }\n  }\n}\n"]}
+{"version":3,"file":"value.js","sourceRoot":"","sources":["../../src/animated/value.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,0EAA0E;AAC1E,8EAA8E;AAC9E,6EAA6E;AAC7E,oEAAoE;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAoBlD,2EAA2E;AAC3E,gBAAgB;AAChB,MAAM,OAAO,GAAG,CAAC,KAAsB,EAAU,EAAE,CACjD,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;AAEvD,MAAM,OAAO,aAAa;IAChB,MAAM,CAAQ;IACtB,2EAA2E;IAC3E,yEAAyE;IACzE,yEAAyE;IACzE,oEAAoE;IACpE,uCAAuC;IAC/B,OAAO,GAAG,CAAC,CAAA;IACF,cAAc,CAAQ;IACtB,UAAU,GAAG,IAAI,GAAG,EAAyB,CAAA;IACtD,eAAe,GAAG,CAAC,CAAA;IACnB,UAAU,GAA2B,IAAI,CAAA;IAEjD,YAAY,KAAa;QACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;IAC7B,CAAC;IAED,4EAA4E;IAC5E,kCAAkC;IAClC,QAAQ,CAAC,KAAa;QACpB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAA;QACvB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC3B,CAAC;IAED,mEAAmE;IACnE,SAAS,CAAC,MAAc;QACtB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QACrB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,kEAAkE;IAClE,aAAa;QACX,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAA;QAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,oEAAoE;IACpE,aAAa;QACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;QACf,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,WAAW,CAAC,QAAuB;QACjC,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAA;QACzC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;QACjC,OAAO,EAAE,CAAA;IACX,CAAC;IAED,cAAc,CAAC,EAAU;QACvB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;IAC5B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;IACzB,CAAC;IAED,4EAA4E;IAC5E,6DAA6D;IAC7D,uBAAuB;IACvB,aAAa,CAAC,QAAkC;QAC9C,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAA;QACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAA;IAC/B,CAAC;IAED,wEAAwE;IACxE,0EAA0E;IAC1E,uEAAuE;IACvE,gDAAgD;IAChD,cAAc,CAAC,QAAkC;QAC/C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACzC,CAAC;IAED,WAAW,CAAC,MAA2B;QACrC,OAAO,IAAI,qBAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAChD,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAA;IACnC,CAAC;IAED,+DAA+D;IAC/D,aAAa,CAAC,KAAa;QACzB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,6DAA6D;IACrD,QAAQ;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAC/B,KAAK,MAAM,QAAQ,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC;YACrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QACrB,CAAC;IACH,CAAC;IAED,4EAA4E;IAC5E,gBAAgB,CAAC,MAAuB;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAA;QAChC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;QACxB,IAAI,QAAQ,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;YACpC,QAAQ,CAAC,IAAI,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,cAAc,CAAC,MAAuB;QACpC,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;QACxB,CAAC;IACH,CAAC;CACF;AAED,MAAM,OAAO,qBAAqB;IACf,OAAO,CAAqB;IAC5B,aAAa,CAAoC;IACjD,UAAU,GAAG,IAAI,GAAG,EAAiC,CAAA;IAC9D,eAAe,GAAG,CAAC,CAAA;IACnB,mBAAmB,GAAkB,IAAI,CAAA;IAEjD,YAAY,MAA2B,EAAE,MAA2B;QAClE,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QACrB,IAAI,CAAC,aAAa,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACjD,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;IAC/D,CAAC;IAED,WAAW,CAAC,QAA+B;QACzC,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAA;QACzC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAA;QACjC,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE,CAAC;YACtC,qEAAqE;YACrE,4DAA4D;YAC5D,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;gBAChE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;gBACjD,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC;oBAClD,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;gBAC1B,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,EAAE,CAAA;IACX,CAAC;IAED,cAAc,CAAC,EAAU;QACvB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;YAChC,OAAM;QACR,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IAED,WAAW,CAAC,MAA2B;QACrC,OAAO,IAAI,qBAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAChD,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;YACrD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAA;QACjC,CAAC;IACH,CAAC;CACF","sourcesContent":["// Animated.Value and the read-only interpolation node. Values are observable\n// numbers; the animation runner (value-animation.ts) drives them frame by\n// frame through the __-prefixed internal hooks. Interpolation nodes subscribe\n// to their parent lazily (only while they have listeners themselves) and can\n// be interpolated again, cascading from the parent's numeric value.\n\nimport { createInterpolator } from \"./interpolate\"\nimport type {\n  InterpolationConfig,\n  InterpolationListener,\n  ValueListener,\n} from \"./types\"\n\n// Internal handle a running animation registers on its value; the value calls\n// stop() to preempt it when a newer animation (or setValue) takes over — the\n// preempted animation ends with { finished: false }, matching RN.\nexport type AnimationHandle = { stop(): void }\n\n// Minimal parent protocol shared by AnimatedValue and AnimatedInterpolation,\n// enabling cascaded interpolate() chains over either kind of node.\ntype InterpolationParent = {\n  __getValue(): number | string\n  addListener(listener: InterpolationListener): string\n  removeListener(id: string): void\n}\n\n// Cascading from a string-producing parent (\"45deg\") interpolates over its\n// numeric part.\nconst numeric = (value: number | string): number =>\n  typeof value === \"number\" ? value : parseFloat(value)\n\nexport class AnimatedValue {\n  private _value: number\n  // RN splits a value into an animated part and a static offset: a drag sets\n  // the offset to where the last gesture ended, so dx/dy can keep starting\n  // from zero. Everything observable is the SUM; the animation runner only\n  // ever drives `_value`, so an untouched offset (0) leaves behaviour\n  // byte-identical to before it existed.\n  private _offset = 0\n  private readonly _startingValue: number\n  private readonly _listeners = new Map<string, ValueListener>()\n  private _nextListenerId = 1\n  private _animation: AnimationHandle | null = null\n\n  constructor(value: number) {\n    this._value = value\n    this._startingValue = value\n  }\n\n  // Stops the running animation (its callback gets { finished: false }, as in\n  // RN) and jumps to the new value.\n  setValue(value: number): void {\n    this._animation?.stop()\n    this.__updateValue(value)\n  }\n\n  /** Sets the static part. The animated part is left where it is. */\n  setOffset(offset: number): void {\n    this._offset = offset\n    this.__notify()\n  }\n\n  /** Folds the offset into the value, leaving the sum unchanged. */\n  flattenOffset(): void {\n    this._value += this._offset\n    this._offset = 0\n    this.__notify()\n  }\n\n  /** The mirror of flattenOffset: moves the value into the offset. */\n  extractOffset(): void {\n    this._offset += this._value\n    this._value = 0\n    this.__notify()\n  }\n\n  addListener(listener: ValueListener): string {\n    const id = String(this._nextListenerId++)\n    this._listeners.set(id, listener)\n    return id\n  }\n\n  removeListener(id: string): void {\n    this._listeners.delete(id)\n  }\n\n  removeAllListeners(): void {\n    this._listeners.clear()\n  }\n\n  // Stops the running animation where it stands and reports the current value\n  // to the callback. The stopped animation's own callback gets\n  // { finished: false }.\n  stopAnimation(callback?: (value: number) => void): void {\n    this._animation?.stop()\n    callback?.(this.__getValue())\n  }\n\n  // Stops any running animation, then snaps back to the construction-time\n  // value. Unlike RN we do notify listeners about the snap-back: the direct\n  // GTK path renders from listener events, so a silent reset would leave\n  // widgets stale until the next animation frame.\n  resetAnimation(callback?: (value: number) => void): void {\n    this.stopAnimation(callback)\n    this.__updateValue(this._startingValue)\n  }\n\n  interpolate(config: InterpolationConfig): AnimatedInterpolation {\n    return new AnimatedInterpolation(this, config)\n  }\n\n  __getValue(): number {\n    return this._value + this._offset\n  }\n\n  /** @internal Called by the animation runner on every frame. */\n  __updateValue(value: number): void {\n    this._value = value\n    this.__notify()\n  }\n\n  /** @internal Publishes the current sum to every listener. */\n  private __notify(): void {\n    const value = this.__getValue()\n    for (const listener of [...this._listeners.values()]) {\n      listener({ value })\n    }\n  }\n\n  /** @internal Registers a running animation, preempting the previous one. */\n  __startAnimation(handle: AnimationHandle): void {\n    const previous = this._animation\n    this._animation = handle\n    if (previous && previous !== handle) {\n      previous.stop()\n    }\n  }\n\n  /** @internal */\n  __endAnimation(handle: AnimationHandle): void {\n    if (this._animation === handle) {\n      this._animation = null\n    }\n  }\n}\n\nexport class AnimatedInterpolation {\n  private readonly _parent: InterpolationParent\n  private readonly _interpolator: (input: number) => number | string\n  private readonly _listeners = new Map<string, InterpolationListener>()\n  private _nextListenerId = 1\n  private _parentSubscription: string | null = null\n\n  constructor(parent: InterpolationParent, config: InterpolationConfig) {\n    this._parent = parent\n    this._interpolator = createInterpolator(config)\n  }\n\n  __getValue(): number | string {\n    return this._interpolator(numeric(this._parent.__getValue()))\n  }\n\n  addListener(listener: InterpolationListener): string {\n    const id = String(this._nextListenerId++)\n    this._listeners.set(id, listener)\n    if (this._parentSubscription === null) {\n      // Lazy upstream subscription (same leak policy as the API emitters):\n      // attach with the first listener, detach with the last one.\n      this._parentSubscription = this._parent.addListener(({ value }) => {\n        const output = this._interpolator(numeric(value))\n        for (const entry of [...this._listeners.values()]) {\n          entry({ value: output })\n        }\n      })\n    }\n    return id\n  }\n\n  removeListener(id: string): void {\n    if (!this._listeners.delete(id)) {\n      return\n    }\n    if (this._listeners.size === 0) {\n      this._detachFromParent()\n    }\n  }\n\n  removeAllListeners(): void {\n    this._listeners.clear()\n    this._detachFromParent()\n  }\n\n  interpolate(config: InterpolationConfig): AnimatedInterpolation {\n    return new AnimatedInterpolation(this, config)\n  }\n\n  private _detachFromParent(): void {\n    if (this._parentSubscription !== null) {\n      this._parent.removeListener(this._parentSubscription)\n      this._parentSubscription = null\n    }\n  }\n}\n"]}

package/dist/common/content.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import { type IntrinsicRootProps, type NestedRootProps } from "../components/root";
+/**
+ * React Native content that FILLS its slot.
+ *
+ * Use it for the body of a page, a split-view pane, a dialog — anywhere the
+ * widget hands out a rectangle and the RN tree should lay out inside it.
+ *
+ * ```tsx
+ * <NavigationStackPage tag="home" title="Home">
+ *   <SlotContent>
+ *     <View style={{ flex: 1 }}>…</View>
+ *   </SlotContent>
+ * </NavigationStackPage>
+ * ```
+ */
+export declare const SlotContent: ({ children }: NestedRootProps) => React.JSX.Element;
+export type SlotContentProps = NestedRootProps;
+/**
+ * React Native content SIZED BY ITSELF.
+ *
+ * The content's own Yoga size becomes the slot size, which is what a
+ * HeaderBar slot, a toolbar button area or a list row needs — the widget asks
+ * "how big are you?" and the RN tree answers.
+ *
+ * ```tsx
+ * <AdwHeaderBar
+ *   start={<IntrinsicContent><SearchField /></IntrinsicContent>}
+ * />
+ * ```
+ */
+export declare const IntrinsicContent: ({ children }: IntrinsicRootProps) => React.JSX.Element;
+export type IntrinsicContentProps = IntrinsicRootProps;
+/**
+ * A HeaderBar slot's React Native content.
+ *
+ * {@link IntrinsicContent} on its own is not enough for a header slot: a
+ * Yoga root defaults to React Native's `column` direction, so two buttons
+ * handed to `headerLeft` stack vertically and push the HeaderBar to twice
+ * its height — with the window controls left stranded on the lower row.
+ * A GTK header slot is horizontal by definition (`gtk_header_bar_pack_start`
+ * appends along one axis), and react-navigation's `headerLeft`/`headerRight`
+ * mean a horizontal cluster on every other platform too, so the row is the
+ * correct default rather than a workaround.
+ *
+ * The 6px gap matches AdwHeaderBar's own spacing between packed children,
+ * so a slot built from RN content sits flush with buttons packed natively
+ * beside it.
+ */
+export declare const HeaderSlotContent: ({ children }: {
+    children?: ReactNode;
+}) => React.JSX.Element;
+/**
+ * A slot whose children are GTK WIDGETS, not React Native content.
+ *
+ * Clears the enclosing layout root so the widgets from `react-native-gtkx/gtk`
+ * and `/adw` render bare — the same thing they already do outside any React
+ * Native tree. Without this, a widget under an ancestor root is a Yoga LEAF:
+ * it is measured for its own natural size and its own widget children never
+ * reach it, which shows up as a container that renders its first child and
+ * silently drops the rest.
+ *
+ * Use it wherever GTK chrome should own the layout — a page body that is a
+ * `GtkScrolledWindow` around a `.boxed-list`, say. React Native content
+ * nested further down opts back in with {@link SlotContent}.
+ */
+export declare const WidgetContent: ({ children }: {
+    children?: ReactNode;
+}) => React.JSX.Element;

package/dist/common/content.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// View and StyleSheet come from this package's own modules, never from the
+// bare public specifier: this package IS that module on the linux platform,
+// so importing it here would alias back to itself and Metro would try to
+// bundle it (tests/unit/metro-preset.test.ts pins that down).
+import { HostNodeContext } from "../components/host-node";
+import { IntrinsicRoot, NestedRoot, } from "../components/root";
+import { View } from "../components/view";
+import { StyleSheet } from "../style/index";
+/**
+ * React Native content that FILLS its slot.
+ *
+ * Use it for the body of a page, a split-view pane, a dialog — anywhere the
+ * widget hands out a rectangle and the RN tree should lay out inside it.
+ *
+ * ```tsx
+ * <NavigationStackPage tag="home" title="Home">
+ *   <SlotContent>
+ *     <View style={{ flex: 1 }}>…</View>
+ *   </SlotContent>
+ * </NavigationStackPage>
+ * ```
+ */
+export const SlotContent = NestedRoot;
+/**
+ * React Native content SIZED BY ITSELF.
+ *
+ * The content's own Yoga size becomes the slot size, which is what a
+ * HeaderBar slot, a toolbar button area or a list row needs — the widget asks
+ * "how big are you?" and the RN tree answers.
+ *
+ * ```tsx
+ * <AdwHeaderBar
+ *   start={<IntrinsicContent><SearchField /></IntrinsicContent>}
+ * />
+ * ```
+ */
+export const IntrinsicContent = IntrinsicRoot;
+/**
+ * A HeaderBar slot's React Native content.
+ *
+ * {@link IntrinsicContent} on its own is not enough for a header slot: a
+ * Yoga root defaults to React Native's `column` direction, so two buttons
+ * handed to `headerLeft` stack vertically and push the HeaderBar to twice
+ * its height — with the window controls left stranded on the lower row.
+ * A GTK header slot is horizontal by definition (`gtk_header_bar_pack_start`
+ * appends along one axis), and react-navigation's `headerLeft`/`headerRight`
+ * mean a horizontal cluster on every other platform too, so the row is the
+ * correct default rather than a workaround.
+ *
+ * The 6px gap matches AdwHeaderBar's own spacing between packed children,
+ * so a slot built from RN content sits flush with buttons packed natively
+ * beside it.
+ */
+export const HeaderSlotContent = ({ children }) => (_jsx(IntrinsicContent, { children: _jsx(View, { style: headerSlotStyles.row, children: children }) }));
+const headerSlotStyles = StyleSheet.create({
+    // alignSelf keeps the row HUGGING its buttons. A Yoga root stretches its
+    // children across its own width by default, which a HeaderBar reads back
+    // as "this slot wants all of it" — the centred title then sits off centre
+    // and packed buttons drift apart. A header slot is content-sized on every
+    // platform; this is what says so.
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        alignSelf: "center",
+        gap: 6,
+    },
+});
+/**
+ * A slot whose children are GTK WIDGETS, not React Native content.
+ *
+ * Clears the enclosing layout root so the widgets from `react-native-gtkx/gtk`
+ * and `/adw` render bare — the same thing they already do outside any React
+ * Native tree. Without this, a widget under an ancestor root is a Yoga LEAF:
+ * it is measured for its own natural size and its own widget children never
+ * reach it, which shows up as a container that renders its first child and
+ * silently drops the rest.
+ *
+ * Use it wherever GTK chrome should own the layout — a page body that is a
+ * `GtkScrolledWindow` around a `.boxed-list`, say. React Native content
+ * nested further down opts back in with {@link SlotContent}.
+ */
+export const WidgetContent = ({ children }) => (_jsx(HostNodeContext.Provider, { value: null, children: children }));
+//# sourceMappingURL=content.js.map

package/dist/common/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../src/common/content.tsx"],"names":[],"mappings":";AAQA,2EAA2E;AAC3E,4EAA4E;AAC5E,yEAAyE;AACzE,8DAA8D;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EACL,aAAa,EACb,UAAU,GAGX,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAA;AAGrC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAA;AAG7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAA4B,EAAE,EAAE,CAAC,CAC3E,KAAC,gBAAgB,cACf,KAAC,IAAI,IAAC,KAAK,EAAE,gBAAgB,CAAC,GAAG,YAAG,QAAQ,GAAQ,GACnC,CACpB,CAAA;AAED,MAAM,gBAAgB,GAAG,UAAU,CAAC,MAAM,CAAC;IACzC,yEAAyE;IACzE,yEAAyE;IACzE,0EAA0E;IAC1E,0EAA0E;IAC1E,kCAAkC;IAClC,GAAG,EAAE;QACH,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;QACnB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAA;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAA4B,EAAE,EAAE,CAAC,CACvE,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAAG,QAAQ,GAA4B,CAC7E,CAAA","sourcesContent":["// Putting React Native content into a GTK widget slot.\n//\n// The Adwaita primitives in this subpath are widget bindings: their children\n// are widgets. React Native content is a different thing — it needs a layout\n// root that runs Yoga and reports a size. These two components are that\n// bridge, and they are what makes \"GTK chrome around RN content\" work\n// anywhere, not just inside our navigators.\nimport type { ReactNode } from \"react\"\n// View and StyleSheet come from this package's own modules, never from the\n// bare public specifier: this package IS that module on the linux platform,\n// so importing it here would alias back to itself and Metro would try to\n// bundle it (tests/unit/metro-preset.test.ts pins that down).\nimport { HostNodeContext } from \"../components/host-node\"\nimport {\n  IntrinsicRoot,\n  NestedRoot,\n  type IntrinsicRootProps,\n  type NestedRootProps,\n} from \"../components/root\"\nimport { View } from \"../components/view\"\nimport { StyleSheet } from \"../style/index\"\n\n/**\n * React Native content that FILLS its slot.\n *\n * Use it for the body of a page, a split-view pane, a dialog — anywhere the\n * widget hands out a rectangle and the RN tree should lay out inside it.\n *\n * ```tsx\n * <NavigationStackPage tag=\"home\" title=\"Home\">\n *   <SlotContent>\n *     <View style={{ flex: 1 }}>…</View>\n *   </SlotContent>\n * </NavigationStackPage>\n * ```\n */\nexport const SlotContent = NestedRoot\nexport type SlotContentProps = NestedRootProps\n\n/**\n * React Native content SIZED BY ITSELF.\n *\n * The content's own Yoga size becomes the slot size, which is what a\n * HeaderBar slot, a toolbar button area or a list row needs — the widget asks\n * \"how big are you?\" and the RN tree answers.\n *\n * ```tsx\n * <AdwHeaderBar\n *   start={<IntrinsicContent><SearchField /></IntrinsicContent>}\n * />\n * ```\n */\nexport const IntrinsicContent = IntrinsicRoot\nexport type IntrinsicContentProps = IntrinsicRootProps\n\n/**\n * A HeaderBar slot's React Native content.\n *\n * {@link IntrinsicContent} on its own is not enough for a header slot: a\n * Yoga root defaults to React Native's `column` direction, so two buttons\n * handed to `headerLeft` stack vertically and push the HeaderBar to twice\n * its height — with the window controls left stranded on the lower row.\n * A GTK header slot is horizontal by definition (`gtk_header_bar_pack_start`\n * appends along one axis), and react-navigation's `headerLeft`/`headerRight`\n * mean a horizontal cluster on every other platform too, so the row is the\n * correct default rather than a workaround.\n *\n * The 6px gap matches AdwHeaderBar's own spacing between packed children,\n * so a slot built from RN content sits flush with buttons packed natively\n * beside it.\n */\nexport const HeaderSlotContent = ({ children }: { children?: ReactNode }) => (\n  <IntrinsicContent>\n    <View style={headerSlotStyles.row}>{children}</View>\n  </IntrinsicContent>\n)\n\nconst headerSlotStyles = StyleSheet.create({\n  // alignSelf keeps the row HUGGING its buttons. A Yoga root stretches its\n  // children across its own width by default, which a HeaderBar reads back\n  // as \"this slot wants all of it\" — the centred title then sits off centre\n  // and packed buttons drift apart. A header slot is content-sized on every\n  // platform; this is what says so.\n  row: {\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    alignSelf: \"center\",\n    gap: 6,\n  },\n})\n\n/**\n * A slot whose children are GTK WIDGETS, not React Native content.\n *\n * Clears the enclosing layout root so the widgets from `react-native-gtkx/gtk`\n * and `/adw` render bare — the same thing they already do outside any React\n * Native tree. Without this, a widget under an ancestor root is a Yoga LEAF:\n * it is measured for its own natural size and its own widget children never\n * reach it, which shows up as a container that renders its first child and\n * silently drops the rest.\n *\n * Use it wherever GTK chrome should own the layout — a page body that is a\n * `GtkScrolledWindow` around a `.boxed-list`, say. React Native content\n * nested further down opts back in with {@link SlotContent}.\n */\nexport const WidgetContent = ({ children }: { children?: ReactNode }) => (\n  <HostNodeContext.Provider value={null}>{children}</HostNodeContext.Provider>\n)\n"]}

package/dist/common/icon.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { StyleProp } from "../contracts";
+export type IconProps = {
+    /** Icon-theme name, e.g. `"starred-symbolic"`. Symbolic icons take their
+     *  colour from the surrounding label colour. */
+    name: string;
+    /** Square size in RN units. Defaults to 16, the size Adwaita uses for icons
+     *  inside list rows and flat buttons. */
+    size?: number;
+    /** React Native style. Sizing here wins over `size`. */
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * ```tsx
+ * <Icon name="starred-symbolic" size={16} />
+ * ```
+ *
+ * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick
+ * the nearest theme size and paint at that, so a 16-unit box could hold a
+ * 24px icon scaled down.
+ */
+export declare const Icon: ({ name, size, style, testID, }: IconProps) => ReactNode;

package/dist/common/icon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GtkImage } from "../gtkx/bridge/index";
+import { Widget } from "./widget";
+/**
+ * ```tsx
+ * <Icon name="starred-symbolic" size={16} />
+ * ```
+ *
+ * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick
+ * the nearest theme size and paint at that, so a 16-unit box could hold a
+ * 24px icon scaled down.
+ */
+export const Icon = ({ name, size = 16, style, testID, }) => (_jsx(Widget, { testID: testID, style: [{ width: size, height: size }, style], children: _jsx(GtkImage, { iconName: name, pixelSize: size }) }));
+//# sourceMappingURL=icon.js.map

package/dist/common/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/common/icon.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,KAAK,EACL,MAAM,GACI,EAAa,EAAE,CAAC,CAC1B,KAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,YAE7C,KAAC,QAAQ,IACP,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,IAAI,GACf,GACK,CACV,CAAA","sourcesContent":["// A named icon from the desktop icon theme, in React Native layout.\n//\n// WHY this is not `Image`. RN's `Image` takes a file path or a URI, because on\n// iOS and Android an icon is an asset the app ships. On the Linux desktop an\n// icon is a NAME resolved against the current icon theme at paint time —\n// `user-trash-symbolic` recolours itself with the label colour, follows the\n// user's theme, and has no file the app could point at. There is nothing in\n// RN's `Image` contract that can express that, and pretending a name is a URI\n// would break `onError`, `resizeMode` and the loading states along with it.\n//\n// So this is the same shape RN apps already reach for on every platform —\n// react-native-vector-icons' `<Icon name size color />` — with the desktop\n// icon theme behind it instead of a bundled font.\nimport type { ReactNode } from \"react\"\nimport type { StyleProp } from \"../contracts\"\nimport { GtkImage } from \"../gtkx/bridge/index\"\nimport { Widget } from \"./widget\"\n\nexport type IconProps = {\n  /** Icon-theme name, e.g. `\"starred-symbolic\"`. Symbolic icons take their\n   *  colour from the surrounding label colour. */\n  name: string\n  /** Square size in RN units. Defaults to 16, the size Adwaita uses for icons\n   *  inside list rows and flat buttons. */\n  size?: number\n  /** React Native style. Sizing here wins over `size`. */\n  style?: StyleProp\n  testID?: string\n}\n\n/**\n * ```tsx\n * <Icon name=\"starred-symbolic\" size={16} />\n * ```\n *\n * Sized through `pixel-size` as well as through Yoga: GTK would otherwise pick\n * the nearest theme size and paint at that, so a 16-unit box could hold a\n * 24px icon scaled down.\n */\nexport const Icon = ({\n  name,\n  size = 16,\n  style,\n  testID,\n}: IconProps): ReactNode => (\n  <Widget\n    testID={testID}\n    style={[{ width: size, height: size }, style]}\n  >\n    <GtkImage\n      iconName={name}\n      pixelSize={size}\n    />\n  </Widget>\n)\n"]}

package/dist/common/index.d.ts

@@ -0,0 +1,5 @@
+export { NavigationStack, NavigationStackPage, type NavigationStackPageProps, type NavigationStackProps, } from "./navigation-stack";
+export { HeaderSlotContent, IntrinsicContent, SlotContent, WidgetContent, type IntrinsicContentProps, type SlotContentProps, } from "./content";
+export { useWidgetLayout, Widget, wrapReactNative, type ReactNativeLayoutProps, type UseWidgetLayoutOptions, type WidgetProps, } from "./widget";
+export { Icon, type IconProps } from "./icon";
+export { List, ListRow, ListSeparator, rowPosition, type ListProps, type ListRowPosition, type ListRowProps, } from "./list";

package/dist/common/index.js

@@ -0,0 +1,21 @@
+// react-native-gtkx/common — the parts of the platform layer we wrote.
+//
+// The other two subpaths are widget bindings: react-native-gtkx/gtk and
+// react-native-gtkx/adw re-export what gtkx generates, name for name. This
+// one holds what has no upstream counterpart, which is why nothing here
+// carries a `Gtk` or `Adw` prefix.
+//
+// Two jobs live here. Getting React Native content INTO a GTK slot
+// (SlotContent, IntrinsicContent), and getting a GTK widget INTO React
+// Native layout (Widget, wrapReactNative, useWidgetLayout). Plus
+// NavigationStack, which is a declarative component over an imperative
+// widget rather than a binding of one — a different contract from
+// Adw.NavigationView, which is why it has its own name and lives apart.
+//
+// Nothing here imports react-navigation.
+export { NavigationStack, NavigationStackPage, } from "./navigation-stack";
+export { HeaderSlotContent, IntrinsicContent, SlotContent, WidgetContent, } from "./content";
+export { useWidgetLayout, Widget, wrapReactNative, } from "./widget";
+export { Icon } from "./icon";
+export { List, ListRow, ListSeparator, rowPosition, } from "./list";
+//# sourceMappingURL=index.js.map

package/dist/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,wEAAwE;AACxE,mCAAmC;AACnC,EAAE;AACF,mEAAmE;AACnE,uEAAuE;AACvE,iEAAiE;AACjE,uEAAuE;AACvE,kEAAkE;AAClE,wEAAwE;AACxE,EAAE;AACF,yCAAyC;AAEzC,OAAO,EACL,eAAe,EACf,mBAAmB,GAGpB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,aAAa,GAGd,MAAM,WAAW,CAAA;AAElB,OAAO,EACL,eAAe,EACf,MAAM,EACN,eAAe,GAIhB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAE7C,OAAO,EACL,IAAI,EACJ,OAAO,EACP,aAAa,EACb,WAAW,GAIZ,MAAM,QAAQ,CAAA","sourcesContent":["// react-native-gtkx/common — the parts of the platform layer we wrote.\n//\n// The other two subpaths are widget bindings: react-native-gtkx/gtk and\n// react-native-gtkx/adw re-export what gtkx generates, name for name. This\n// one holds what has no upstream counterpart, which is why nothing here\n// carries a `Gtk` or `Adw` prefix.\n//\n// Two jobs live here. Getting React Native content INTO a GTK slot\n// (SlotContent, IntrinsicContent), and getting a GTK widget INTO React\n// Native layout (Widget, wrapReactNative, useWidgetLayout). Plus\n// NavigationStack, which is a declarative component over an imperative\n// widget rather than a binding of one — a different contract from\n// Adw.NavigationView, which is why it has its own name and lives apart.\n//\n// Nothing here imports react-navigation.\n\nexport {\n  NavigationStack,\n  NavigationStackPage,\n  type NavigationStackPageProps,\n  type NavigationStackProps,\n} from \"./navigation-stack\"\n\nexport {\n  HeaderSlotContent,\n  IntrinsicContent,\n  SlotContent,\n  WidgetContent,\n  type IntrinsicContentProps,\n  type SlotContentProps,\n} from \"./content\"\n\nexport {\n  useWidgetLayout,\n  Widget,\n  wrapReactNative,\n  type ReactNativeLayoutProps,\n  type UseWidgetLayoutOptions,\n  type WidgetProps,\n} from \"./widget\"\n\nexport { Icon, type IconProps } from \"./icon\"\n\nexport {\n  List,\n  ListRow,\n  ListSeparator,\n  rowPosition,\n  type ListProps,\n  type ListRowPosition,\n  type ListRowProps,\n} from \"./list\"\n"]}

package/dist/common/list.d.ts

@@ -0,0 +1,82 @@
+import { type ReactNode } from "react";
+import type { StyleProp } from "../contracts";
+/**
+ * Where a row sits in its list, which is what decides its corner radii and
+ * whether it draws a separator under itself.
+ *
+ * RN has no `:first-child`, so this is explicit. From a `FlatList` it is
+ * `rowPosition(index, data.length)`; from a static list it is the same
+ * expression over the array.
+ */
+export type ListRowPosition = "first" | "middle" | "last" | "only";
+/** The usual derivation, so no call site has to get the one-row case wrong. */
+export declare const rowPosition: (index: number, count: number) => ListRowPosition;
+export type ListProps = {
+    children?: ReactNode;
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it
+ * directly, or a `FlatList` whose `renderItem` returns them.
+ *
+ * ```tsx
+ * <List>
+ *   {tasks.map((task, index) => (
+ *     <ListRow
+ *       key={task.id}
+ *       title={task.title}
+ *       position={rowPosition(index, tasks.length)}
+ *       onPress={() => open(task)}
+ *     />
+ *   ))}
+ * </List>
+ * ```
+ */
+export declare const List: ({ children, style, testID }: ListProps) => ReactNode;
+export type ListRowProps = {
+    /** Primary line. A string renders with the row's own typography; a node is
+     *  rendered as given, for a title that needs its own styling. */
+    title?: ReactNode;
+    /** Second, dimmed line. Omitted rows are single-line, as `AdwActionRow`'s
+     *  are. */
+    subtitle?: ReactNode;
+    /** Leading content — a checkbox, an icon, a colour swatch. */
+    prefix?: ReactNode;
+    /** Trailing content — buttons, a value, a chevron. */
+    suffix?: ReactNode;
+    /** Makes the row activatable: it gains the hover and press tints and calls
+     *  this. Without it the row is inert, like a non-`activatable`
+     *  `AdwActionRow`. */
+    onPress?: () => void;
+    /** Position in the list, for the corner radii and the separator. Defaults
+     *  to `"middle"`, which is right for a row that is neither. */
+    position?: ListRowPosition;
+    /** Draw the hairline under this row. Default true for every position except
+     *  the last — set it false when the list supplies its own separators (a
+     *  `FlatList`'s `ItemSeparatorComponent`, say). */
+    separator?: boolean;
+    style?: StyleProp;
+    testID?: string;
+};
+/**
+ * One row of a {@link List} — `AdwActionRow`'s layout and states, built from
+ * `Pressable`, `View` and `Text`.
+ *
+ * Hover and press come from `Pressable`'s state callback, so they cost what
+ * they cost anywhere else in this platform: the hover path swaps a CSS class
+ * on the widget without a React render (see components/pressable.tsx).
+ *
+ * **Not yet:** keyboard navigation between rows and a focus ring.
+ * `GtkListBox` implements those as widget behaviour and RN has no focus model
+ * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`
+ * with no `focused`. The ring itself is now drawable (`outlineWidth` and
+ * friends), so what is missing is the state, not the paint.
+ */
+export declare const ListRow: ({ title, subtitle, prefix, suffix, onPress, position, separator, style, testID, }: ListRowProps) => ReactNode;
+/**
+ * The hairline between two rows, for lists that draw their own separators —
+ * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means
+ * the rows themselves stay position-agnostic apart from their corners.
+ */
+export declare const ListSeparator: () => ReactNode;

package/dist/common/list.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useColorScheme } from "../apis/index";
+import { Pressable } from "../components/pressable";
+import { Text } from "../components/text";
+import { View } from "../components/view";
+import { PlatformColor, StyleSheet } from "../style/index";
+/** The usual derivation, so no call site has to get the one-row case wrong. */
+export const rowPosition = (index, count) => {
+    const first = index === 0;
+    const last = index === count - 1;
+    if (first && last) {
+        return "only";
+    }
+    return first ? "first" : last ? "last" : "middle";
+};
+// libadwaita 1.9, /org/gnome/Adwaita/styles/gtk.css:
+//   list.boxed-list { background-color: var(--card-bg-color); border-radius: 12px;
+//                     box-shadow: 0 0 0 1px RGB(0 0 6/3%),
+//                                 0 1px 3px 1px RGB(0 0 6/7%),
+//                                 0 2px 6px 2px RGB(0 0 6/3%); }
+const RADIUS = 12;
+const styles = StyleSheet.create({
+    list: {
+        backgroundColor: PlatformColor("card-bg-color"),
+        borderRadius: RADIUS,
+        // The frame is a shadow, not a border, and that distinction is load
+        // bearing: a border would consume the box and inset every row by a pixel,
+        // and no border draws the two soft drops underneath.
+        boxShadow: [
+            {
+                offsetX: 0,
+                offsetY: 0,
+                spreadDistance: 1,
+                color: "rgba(0, 0, 6, 0.03)",
+            },
+            {
+                offsetX: 0,
+                offsetY: 1,
+                blurRadius: 3,
+                spreadDistance: 1,
+                color: "rgba(0, 0, 6, 0.07)",
+            },
+            {
+                offsetX: 0,
+                offsetY: 2,
+                blurRadius: 6,
+                spreadDistance: 2,
+                color: "rgba(0, 0, 6, 0.03)",
+            },
+        ],
+    },
+    // `list > row { padding: 2px }` plus
+    // `row > box.header { margin: 0 12px; border-spacing: 6px; min-height: 50px }`
+    // — 2 + 50 + 2 + the 1px separator is the 55px row pitch measured off the
+    // widget's own screenshot.
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: 54,
+        paddingVertical: 2,
+        paddingHorizontal: 14,
+        gap: 6,
+    },
+    separatorUnder: {
+        borderBottomWidth: 1,
+        borderBottomColor: PlatformColor("card-shade-color"),
+    },
+    firstRow: { borderTopLeftRadius: RADIUS, borderTopRightRadius: RADIUS },
+    lastRow: {
+        borderBottomLeftRadius: RADIUS,
+        borderBottomRightRadius: RADIUS,
+    },
+    // `row > box.header > box.title { margin: 6px 0; border-spacing: 3px }`
+    titleBox: { flex: 1, marginVertical: 6, gap: 3 },
+    // The theme font is `Adwaita Sans 11`, i.e. 11pt = 14.67px, and Adwaita sets
+    // the subtitle to `font-size: smaller` — Pango's one-step-down, 1/1.2. RN's
+    // fontSize is numeric only (there is no `smaller`, no em, no inherited
+    // percentage), so the computed value is what an app can write. Documented
+    // in docs/api.md rather than hidden here.
+    title: { fontSize: 14.7 },
+    // `row label.subtitle { opacity: var(--dim-opacity) }`, 55% in the light
+    // Adwaita palette.
+    subtitle: { fontSize: 12.2, opacity: 0.55 },
+    separator: {
+        height: 1,
+        backgroundColor: PlatformColor("card-shade-color"),
+    },
+});
+// Adwaita tints the hover and press states with a fraction of the FOREGROUND
+// colour (`color-mix(in srgb, currentColor 4%, transparent)`), so one literal
+// cannot serve both themes and CSS colour functions are not part of RN's
+// colour contract. Two literals plus the scheme is what an RN app writes on
+// every platform, and it is what this does.
+const TINTS = {
+    light: { hover: "rgba(0, 0, 0, 0.04)", press: "rgba(0, 0, 0, 0.08)" },
+    dark: {
+        hover: "rgba(255, 255, 255, 0.04)",
+        press: "rgba(255, 255, 255, 0.08)",
+    },
+};
+/**
+ * The `.boxed-list` frame: a rounded, shadowed card. Put `ListRow`s in it
+ * directly, or a `FlatList` whose `renderItem` returns them.
+ *
+ * ```tsx
+ * <List>
+ *   {tasks.map((task, index) => (
+ *     <ListRow
+ *       key={task.id}
+ *       title={task.title}
+ *       position={rowPosition(index, tasks.length)}
+ *       onPress={() => open(task)}
+ *     />
+ *   ))}
+ * </List>
+ * ```
+ */
+export const List = ({ children, style, testID }) => (_jsx(View, { testID: testID, style: [styles.list, style], children: children }));
+/**
+ * One row of a {@link List} — `AdwActionRow`'s layout and states, built from
+ * `Pressable`, `View` and `Text`.
+ *
+ * Hover and press come from `Pressable`'s state callback, so they cost what
+ * they cost anywhere else in this platform: the hover path swaps a CSS class
+ * on the widget without a React render (see components/pressable.tsx).
+ *
+ * **Not yet:** keyboard navigation between rows and a focus ring.
+ * `GtkListBox` implements those as widget behaviour and RN has no focus model
+ * for `View` to hang them on — `Pressable`'s state is `{pressed, hovered}`
+ * with no `focused`. The ring itself is now drawable (`outlineWidth` and
+ * friends), so what is missing is the state, not the paint.
+ */
+export const ListRow = ({ title, subtitle, prefix, suffix, onPress, position = "middle", separator, style, testID, }) => {
+    const scheme = useColorScheme() === "dark" ? "dark" : "light";
+    const tints = TINTS[scheme];
+    const isFirst = position === "first" || position === "only";
+    const isLast = position === "last" || position === "only";
+    const drawSeparator = separator ?? !isLast;
+    const body = (_jsxs(_Fragment, { children: [prefix, _jsxs(View, { style: styles.titleBox, children: [typeof title === "string" ? (_jsx(Text, { style: styles.title, children: title })) : (title), typeof subtitle === "string" ? (_jsx(Text, { style: styles.subtitle, children: subtitle })) : (subtitle)] }), suffix] }));
+    const base = [
+        styles.row,
+        isFirst && styles.firstRow,
+        isLast && styles.lastRow,
+        drawSeparator && styles.separatorUnder,
+        style,
+    ];
+    if (!onPress) {
+        return (_jsx(View, { testID: testID, style: base, children: body }));
+    }
+    return (_jsx(Pressable, { testID: testID, onPress: onPress, 
+        // The tint goes on the ROW, which is why the corner radii above have to
+        // be on the row too: a hovered first row must round its own top corners
+        // or the highlight paints square over the card's rounded ones.
+        style: ({ hovered, pressed }) => [
+            ...base,
+            hovered && { backgroundColor: tints.hover },
+            pressed && { backgroundColor: tints.press },
+        ], children: body }));
+};
+/**
+ * The hairline between two rows, for lists that draw their own separators —
+ * a `FlatList`'s `ItemSeparatorComponent` is exactly this, and using it means
+ * the rows themselves stay position-agnostic apart from their corners.
+ */
+export const ListSeparator = () => _jsx(View, { style: styles.separator });
+//# sourceMappingURL=list.js.map