@getrheo/rheo-skill 2.2.0 → 2.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @getrheo/rheo-skill
 
-Current release: **`2.1.0`** on npm. Public source: [getrheo/rheo-skill](https://github.com/getrheo/rheo-skill) (mirrored from this private monorepo via `pnpm extract:oss-repos`).
+Current release: **`2.3.0`** on npm (`PLATFORM_SDK_VERSION` in `scripts/publish-package-registry.mjs`). Public source: [getrheo/rheo-skill](https://github.com/getrheo/rheo-skill) (mirrored from this private monorepo via `pnpm extract:oss-repos`).
 
 Source and build tooling for the **`rheo`** agent skill — a single, self-contained
 skill with two sub-skills:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrheo/rheo-skill",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "description": "Rheo agent skill — SDK install guidance and flow manifest import tooling.",
   "main": "./src/index.ts",
@@ -9,8 +9,8 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@getrheo/contracts": "2.2.0",
-    "@getrheo/flow-runtime": "2.2.0",
+    "@getrheo/contracts": "2.3.0",
+    "@getrheo/flow-runtime": "2.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

package/rheo/SKILL.md

@@ -3,7 +3,7 @@ name: rheo
 description: Work with Rheo, the headless onboarding/paywall flow engine for mobile apps. Use when a user wants to install or wire the Rheo SDK (React Native, Expo, or SwiftUI), follow Rheo SDK best practices, configure integrations (RevenueCat, AppsFlyer), wire auth/permissions/terminal callbacks, OR import/migrate an existing mobile flow into a compliant Rheo FlowManifest and validate it. Routes to the `rheo-best-practices` and `rheo-flow-import` sub-skills.
 compatibility: Requires Node.js 20+. rheo-flow-import scripts are fully self-contained (no install step). Internet access fetches the latest Manifest Agent Profile; a bundled fallback works offline.
 metadata:
-  rheo-version: "2.2.0"
+  rheo-version: "2.3.0"
   manifest-schema-version: "7"
 ---
 

package/rheo/rheo-flow-import/references/capabilities.md

@@ -26,6 +26,7 @@ Every layer `kind` accepted by the manifest:
 - `multiple_choice`
 - `text_input`
 - `scale_input`
+- `wheel_picker`
 - `oauth_provider`
 - `oauth_login`
 - `email_password_auth`
@@ -95,7 +96,7 @@ Valid `permissionKey` values for `request_os_permission`:
 
 ## Inputs and auth
 
-- `text_input` types: `plain`, `email`, `phone`, `url`, `multiline`.
+- `text_input` types: `plain`, `email`, `phone`, `url`, `number`, `multiline`.
 - `text_input` classification: `safe`, `sensitive`.
 - `oauth_login` preset providers: `github`, `google`, `apple`.
 - `email_password_auth` modes: `sign_in`, `sign_up` (sign_up requires email + password + confirm fields).

package/rheo/rheo-flow-import/references/flow-spec.md

@@ -62,7 +62,7 @@ the scaffold expands into a real layer. `id` is always optional. `style` and
 { "kind": "text", "text": "Welcome to Rheo", "style": { "color": "#FFFFFF" } }
 { "kind": "text", "text": { "default": "Hi", "translations": { "es": "Hola" } } }
 { "kind": "image", "mediaAssetId": "00000000-0000-0000-0000-000000000101", "alt": "Hero" }
-{ "kind": "icon", "iconName": "sparkles-outline" }            // family defaults to ionicons
+{ "kind": "icon", "iconName": "sparkles-outline" }            // family defaults to ionicons; size defaults to 24×24
 { "kind": "lottie", "mediaAssetId": "…", "loop": true, "autoPlay": true }
 { "kind": "video", "mediaAssetId": "…", "autoPlay": false }    // needs a play_media button
 ```
@@ -96,18 +96,21 @@ Action shorthands: `"none"`, `"continue"`, `"skip"`, `"end_flow"`,
 ### Stacks (layout)
 
 ```jsonc
-{ "kind": "stack", "direction": "vertical", "align": "center", "gap": 12,
+{ "kind": "stack", "direction": "vertical", "align": "center", "distribution": "center", "gap": 12,
   "style": { "padding": { "t": 24, "r": 16, "b": 24, "l": 16 } },
   "children": [ { "kind": "text", "text": "Centered hero copy" } ] }
 ```
 
+Use `distribution` for main-axis packing (`start` \| `center` \| `end` \| `between` \| `around`). Legacy flow-spec `justify` is accepted by the scaffold and rewritten to `distribution`, but prefer writing `distribution` directly.
+
 Card chrome (border/shadow/background/radius) goes on a wrapping stack's `style`.
 
 ### Choices
 
 You provide `options`; the scaffold builds the option `stack` children,
 `optionBindings`, and `branching`. `optionId` defaults to a slug of the label.
-Map unselected chrome to `style` and selected chrome to `selectedStyle` per option.
+Map unselected chrome to `style` and selected chrome to `selectedStyle` per option
+(bake padding/radius/background/border into `style` — do not omit default chrome).
 
 ```jsonc
 {
@@ -136,11 +139,13 @@ option, set `branching: { "enabled": true, "conditions": [{ "choiceId": "male",
   "inputType": "plain", "required": true, "classification": "safe" }
 { "kind": "scale_input", "fieldKey": "fitness_level", "min": 1, "max": 5, "step": 1,
   "minLabel": "Beginner", "maxLabel": "Pro" }
+{ "kind": "wheel_picker", "fieldKey": "birth_year", "mode": "date", "datePart": "year",
+  "minYear": 1950, "maxYear": 2010, "defaultValue": "1990" }
 { "kind": "checkbox", "fieldKey": "accept_terms", "blocking": true }
 ```
 
 Use **at most one** input layer per screen, and add a `continue` button on
-screens with `text_input`, `multiple_choice`, or `scale_input`.
+screens with `text_input`, `multiple_choice`, `scale_input`, or `wheel_picker`.
 
 ### Auth
 

package/rheo/rheo-flow-import/references/import-workflow.md

@@ -68,7 +68,7 @@ If the user has not named an entry point, stop after question 1 and wait for an
    - Bundle every slide image; every asset referenced in the carousel must appear in `rheo-import.assets.json`.
    - Do not collapse multi-slide routes into one static screen with a single image.
 11. Map layout, alignment, borders, and shadows:
-   - Parent vertical stacks that center content need `align: "center"` (and `justify: "center"` when appropriate).
+   - Parent vertical stacks that center content need `align: "center"` (and `distribution: "center"` when appropriate).
    - Hero images belong inside centered stacks, not as lone siblings in an unaligned vertical stack.
    - Card rows (rating, testimonials, why-it-works cards) use wrapping stacks with `style.background`, `style.radius`, `style.padding`, `style.border`, and `style.shadow` from source.
 12. Map custom fonts from audit findings ([font-import.md](font-import.md)):

package/rheo/rheo-flow-import/references/manifest-agent-profile-fallback.md

@@ -43,7 +43,7 @@ Before zipping, read [layer-schema-pitfalls.md](layer-schema-pitfalls.md) and ru
 
 ## Layer Kinds
 
-Use only: `stack`, `text`, `image`, `lottie`, `video`, `icon`, `button`, `back_button`, `progress`, `loader`, `counter`, `single_choice`, `multiple_choice`, `text_input`, `scale_input`, `oauth_provider`, `oauth_login`, `email_password_auth`, `email_password_field`, `email_password_submit`, `carousel`, `hyperlink`, `checkbox`.
+Use only: `stack`, `text`, `image`, `lottie`, `video`, `icon`, `button`, `back_button`, `progress`, `loader`, `counter`, `single_choice`, `multiple_choice`, `text_input`, `scale_input`, `wheel_picker`, `oauth_provider`, `oauth_login`, `email_password_auth`, `email_password_field`, `email_password_submit`, `carousel`, `hyperlink`, `checkbox`.
 
 ## Rules
 
@@ -58,10 +58,14 @@ Use only: `stack`, `text`, `image`, `lottie`, `video`, `icon`, `button`, `back_b
 - In-screen pagers → `kind: "carousel"` with one slide per page; swipe-only; bundle every slide asset. See carousel-import.md in references.
 - Center images with parent stack `align: "center"`; map card borders/shadows to wrapping stacks.
 - Custom fonts: bundle files in `rheo-import.fonts.json` only (never `rheo-import.assets.json`), `manifest.theme.fontFamily`. See `font-import.md`.
-- Choice options: each option stack uses `style` (default) and `selectedStyle` (selected).
+- Choice options: each option stack bakes default chrome into `style` and selected overrides into `selectedStyle` (optional `selectedStyleBreakpoints`).
+- Stack packing: `distribution` — never `justify`. Width fill parent is `"full"` — never width `"fill"`.
+- `text_input.fieldStyle` is typography only; chrome on outer `style`.
+- `wheel_picker`: scroll wheel / date parts; `itemStyle` / `selectedItemStyle` typography only; branch later via `dec_*` with string predicates.
+- Icons default to 24×24 unless source specifies another size.
 - Publish gates: explicit `style.color` on all text (including button labels), Continue on manual-submit screens, valid entry/completion path. Run `scripts/audit-publish-manifest.mjs` before finishing.
 - Black-and-white fallback is acceptable only when the audit finds no style/token evidence and the user confirms no theme source.
-- Use at most one input layer kind per screen.
+- Use at most one input layer kind per screen (`single_choice`, `multiple_choice`, `text_input`, `scale_input`, `wheel_picker`).
 - Non-reserved `sdk.*` decision keys must be listed in `sdkAttributeKeys`.
 - RevenueCat paywalls are external surface nodes and always need `fallback`.
 - Emit complete graph edges for imported flows.

package/rheo/rheo-flow-import/references/manifest-rules.md

@@ -23,7 +23,7 @@ See [layer-schema-pitfalls.md](layer-schema-pitfalls.md) for common id mistakes
 
 ## Layer Kinds
 
-Allowed kinds: `stack`, `text`, `image`, `lottie`, `video`, `icon`, `button`, `back_button`, `progress`, `loader`, `counter`, `single_choice`, `multiple_choice`, `text_input`, `scale_input`, `oauth_provider`, `oauth_login`, `email_password_auth`, `email_password_field`, `email_password_submit`, `carousel`, `hyperlink`, `checkbox`.
+Allowed kinds: `stack`, `text`, `image`, `lottie`, `video`, `icon`, `button`, `back_button`, `progress`, `loader`, `counter`, `single_choice`, `multiple_choice`, `text_input`, `scale_input`, `wheel_picker`, `oauth_provider`, `oauth_login`, `email_password_auth`, `email_password_field`, `email_password_submit`, `carousel`, `hyperlink`, `checkbox`.
 
 ## Regions
 
@@ -62,21 +62,29 @@ Map clear brand values into `manifest.theme` and layer styles. Set `style.color`
 ## Layout
 
 - Center images: parent stack `align: "center"`.
+- Main-axis packing: stack / button `distribution` (not `justify`).
 - Card chrome: wrapping stacks with `border`, `shadow`, `background`, `radius`, `padding`.
+- Do not invent image `radius` unless the source has rounded corners.
 
 ## Explicit Sizing
 
-Set `style.width` and `style.height` on every layer — do not omit them. `width` accepts `"full"`, `"auto"`, a fraction (`"1/2"`, `"1/3"`, `"2/3"`, `"1/4"`, `"3/4"`), or a pixel number; `height` accepts `"fill"`, `"auto"`, or a pixel number. Use these per-kind defaults unless the design requires otherwise:
+Set `style.width` and `style.height` on every layer — do not omit them. `width` accepts `"full"` (**never** `"fill"` on width), `"auto"`, a fraction (`"1/2"`, `"1/3"`, `"2/3"`, `"1/4"`, `"3/4"`), or a pixel number; `height` accepts `"fill"`, `"auto"`, or a pixel number. Optional clamps: `minWidth` / `maxWidth` / `minHeight` / `maxHeight`. Use these per-kind defaults unless the design requires otherwise:
 
 | Layer kinds | `width` | `height` |
 |-------------|---------|----------|
-| `stack`, `text_input`, `scale_input`, `oauth_login`, `email_password_auth`, `email_password_field`, `progress`, `loader` | `"full"` | `"fill"` |
+| `stack`, `text_input`, `scale_input`, `wheel_picker`, `oauth_login`, `email_password_auth`, `email_password_field`, `progress`, `loader` | `"full"` | `"fill"` |
 | `button`, `back_button`, `oauth_provider`, `email_password_submit`, `checkbox`, `single_choice`, `multiple_choice` | `"full"` | `"auto"` |
-| `text`, `counter`, `icon`, `hyperlink` | `"auto"` | `"auto"` |
+| `text`, `counter`, `hyperlink` | `"auto"` | `"auto"` |
+| `icon` | `24` | `24` |
 | `image`, `lottie`, `video` | `"full"` | number (e.g. `160`) |
 | `carousel` | — (no outer `style` sizing) | — |
 
-Dashboard import backfills these defaults automatically, but emitting them explicitly produces higher-fidelity first drafts.
+Stack packing uses **`distribution`** (`start` \| `center` \| `end` \| `between` \| `around`). Never emit legacy `justify`.
+
+`text_input.fieldStyle` is typography only; outer chrome stays on `style` / `styleBreakpoints`.
+`wheel_picker.itemStyle` / `selectedItemStyle` are row typography only; outer chrome stays on `style` / `styleBreakpoints`.
+
+Dashboard import backfills sizing defaults automatically, but emitting them explicitly produces higher-fidelity first drafts.
 
 ## Container Layers (Required `children`)
 
@@ -159,9 +167,10 @@ Full template: [layer-schema-pitfalls.md](layer-schema-pitfalls.md#single_choice
 
 ## Inputs
 
-- Use at most one input layer kind per screen.
+- Use at most one input layer kind per screen (`single_choice`, `multiple_choice`, `text_input`, `scale_input`, `wheel_picker`).
 - Use stable snake_case `fieldKey` values.
 - Mark text input classification as `safe` or `sensitive`.
+- `wheel_picker` captures a string (options or date part); no layer branching — use `dec_*` with string predicates.
 
 ## Decisions
 
@@ -194,4 +203,4 @@ When source screens use i18n ([localization-import.md](localization-import.md)):
 - Avoid orphaned screens unless intentionally parked for later editing.
 - Run `scripts/audit-publish-manifest.mjs` before finishing — it enforces dashboard **Publish** rules (see [publish-gates.md](publish-gates.md)).
 - Every `text` and `icon` layer needs explicit `style.color` (including nested button label text).
-- Screens with `text_input`, `multiple_choice`, or `scale_input` need a `continue` button.
+- Screens with `text_input`, `multiple_choice`, `scale_input`, or `wheel_picker` need a `continue` button.

package/rheo/rheo-flow-import/references/publish-gates.md

@@ -26,7 +26,7 @@ These mirror `apps/web/src/features/builder/validateFlow.ts` and API `preflightP
 | **Choice input shape** | `single_choice` / `multiple_choice` missing `optionBindings` or `branching`, using `"options"` instead of `children`, or `fieldKey` not snake_case. |
 | **Container `children`** | `back_button`, `button`, or `hyperlink` emitted without a `children` array (or with label text on the parent instead of nested `text` children). Crashes import on Indie plans during motion strip; fails Zod validation. |
 | **Text/icon `style.color`** | Body text or **button label** (nested text child) left without `style.color` — native does not inherit CSS colors. |
-| **Continue button** | `text_input`, `multiple_choice`, or `scale_input` without a `button` with `action.kind: "continue"`. |
+| **Continue button** | `text_input`, `multiple_choice`, `scale_input`, or `wheel_picker` without a `button` with `action.kind: "continue"`. |
 | **One input per screen** | Multiple inputs, or OAuth/email-password combined with inputs. |
 | **fieldKey** | Missing or non–snake_case on input layers. |
 | **Graph targets** | `go_to_step`, choice `goTo`, loader/lottie/video `onComplete` (screen mode), permission outcomes, and fallbacks point at missing `scr_*` / `dec_*` / `surf_*` ids. |

package/rheo/rheo-flow-import/references/react-native-source-patterns.md

@@ -38,7 +38,7 @@ Ask the user to confirm the entry file if it is not obvious; do not guess.
 | `react-native-video` / `expo-video` | `video` |
 | `<Pressable>`/`<TouchableOpacity>` acting as CTA | `button` (label = nested `text` child) |
 | Header back chevron / close (`<HeaderBackButton>`, a back `Pressable` in a top bar) | `back_button` in `regions.header`, `icon.family: "ionicons"`, no `action` |
-| `<View style={{ flexDirection, alignItems, gap }}>` | `stack` (`direction`, `align`, `justify`, `gap`) |
+| `<View style={{ flexDirection, alignItems, gap }}>` | `stack` (`direction`, `align`, `distribution`, `gap`) |
 | Vector icons (`react-native-vector-icons`, `@expo/vector-icons` Ionicons) | `icon` (`family: "ionicons"`) |
 | External `Linking.openURL(...)` / `<A href>` | `hyperlink` |
 | Progress bar / step dots tied to step index | `progress` (header) |
@@ -55,6 +55,7 @@ Hero images that render through wrapper components (`<Illustration>`, `<Logo>`,
 - `<TextInput>` collecting a value → `text_input` with a snake_case `fieldKey`;
   mark password/email/PII as `classification: "sensitive"`.
 - Sliders / rating rows → `scale_input`. Consent toggles → `checkbox`.
+- Native scroll wheels / `Picker` / year-month-day selectors → `wheel_picker` (not `single_choice`).
 - Screens with a manual-submit input need a `continue` button.
 
 ## Theme, colors, gradients, fonts

package/rheo/rheo-flow-import/references/swiftui-source-patterns.md

@@ -36,7 +36,7 @@ Ask the user to confirm the entry view/coordinator if it is not obvious.
 | `VideoPlayer` / `AVPlayer` | `video` |
 | `Button { … } label: { … }` acting as CTA | `button` (label = nested `text` child) |
 | Toolbar back/close (`.toolbar { ToolbarItem(placement: .navigationBarLeading) }`, a chevron `Button`) | `back_button` in `regions.header`, `icon.family: "ionicons"`, no `action` |
-| `VStack`/`HStack`/`ZStack` with `spacing`, `alignment` | `stack` (`direction`, `align`, `justify`, `gap`) |
+| `VStack`/`HStack`/`ZStack` with `spacing`, `alignment` | `stack` (`direction`, `align`, `distribution`, `gap`) |
 | SF Symbol `Image(systemName:)` | `icon` — **remap to a valid `ionicons` name** (SF Symbols are not allowed on `icon`) |
 | `Link(destination:)` / `openURL` | `hyperlink` |
 | `ProgressView(value:)` / step dots | `progress` (header) |
@@ -53,6 +53,7 @@ real asset — follow the struct to its `Image("…")` to find the asset name.
 - `TextField`/`SecureField` → `text_input` with a snake_case `fieldKey`
   (`SecureField` / email / PII → `classification: "sensitive"`).
 - `Slider` / star rating → `scale_input`. `Toggle` consent → `checkbox`.
+- `Picker` / `WheelPicker` / date-part wheels → `wheel_picker` (not `single_choice`).
 - Manual-submit input screens need a `continue` button.
 
 ## Theme, colors, gradients, fonts