@namiml/cli 3.4.11-dev.202609230009 → 3.4.11-dev.202609231629

package/dist/render/action-map.js

@@ -0,0 +1,101 @@
+import { NamiPaywallAction } from "@namiml/sdk-core";
+/**
+ * The one mapping from a component's `onTap.function` to the paywall action the
+ * SDK reports — the CLI's copy of what the web SDK does.
+ *
+ * The strings below are redeclared from `sdk/web/src/components/utils/eventConst.ts`
+ * (`NAMI_CLOSE_PAYWALL = "namiClosePaywall"` and friends); the CLI must not
+ * import from `sdk/web`, so that file is the source and this is the copy.
+ *
+ * The mapping itself is `handleAction` in `sdk/web/src/components/utils/actionTap.ts`.
+ * It initialises `action = UNKNOWN`, runs one switch, and emits on
+ * `PAYWALL_ACTION_EVENT` **only when the switch moved `action` off `UNKNOWN`**.
+ * So the table here is not "every function web handles" — it is every function
+ * that leaves web with an action to emit:
+ *
+ * | onTap.function            | NamiPaywallAction       |
+ * |---------------------------|-------------------------|
+ * | namiClosePaywall          | CLOSE_PAYWALL           |
+ * | namiRestorePurchases      | RESTORE_PURCHASES       |
+ * | namiSignIn                | SIGN_IN                 |
+ * | namiBuySKU                | BUY_SKU (with a SKU)    |
+ * | namiSelectSKU             | SELECT_SKU (with a SKU) |
+ * | namiPurchaseSelectedSKU   | PURCHASE_SELECTED_SKU (with a SKU) |
+ * | namiNavigateToScreen      | PAGE_CHANGE             |
+ * | setState                  | TOGGLE_CHANGE           |
+ *
+ * Everything else deliberately emits nothing: `namiDeeplink` reports through
+ * `NamiPaywallManager.registerDeeplinkActionHandler` instead, the four video
+ * functions go to web's VideoService (which emits its own video events),
+ * `namiReloadProducts` reloads store products, `""` is web's `UNSUPPORTED`, and
+ * an unrecognised function falls through web's `default:` branch untouched.
+ */
+/** `onTap.function` values, from `sdk/web/src/components/utils/eventConst.ts`. */
+const NAMI_CLOSE_PAYWALL = "namiClosePaywall";
+const NAMI_RESTORE_PURCHASES = "namiRestorePurchases";
+const NAMI_SIGN_IN = "namiSignIn";
+const NAMI_BUY_SKU = "namiBuySKU";
+const SET_STATE = "setState";
+const NAMI_SELECT_SKU = "namiSelectSKU";
+const NAMI_PURCHASE_SELECTED_SKU = "namiPurchaseSelectedSKU";
+const NAMI_DEEP_LINK = "namiDeeplink";
+const NAMI_NAVIGATE_TO_SCREEN = "namiNavigateToScreen";
+const NAMI_RELOAD_PRODUCTS = "namiReloadProducts";
+const UNSUPPORTED = "";
+const NAMI_PLAY_VIDEO = "namiPlayVideo";
+const NAMI_PAUSE_VIDEO = "namiPauseVideo";
+const NAMI_MUTE_VIDEO = "namiMuteVideo";
+const NAMI_UNMUTE_VIDEO = "namiUnmuteVideo";
+/** The actions web guards behind `if (sku)`. */
+const SKU_ACTIONS = {
+    [NAMI_BUY_SKU]: NamiPaywallAction.BUY_SKU,
+    [NAMI_SELECT_SKU]: NamiPaywallAction.SELECT_SKU,
+    [NAMI_PURCHASE_SELECTED_SKU]: NamiPaywallAction.PURCHASE_SELECTED_SKU,
+};
+/** The actions web emits unconditionally. */
+const PLAIN_ACTIONS = {
+    [NAMI_CLOSE_PAYWALL]: NamiPaywallAction.CLOSE_PAYWALL,
+    [NAMI_RESTORE_PURCHASES]: NamiPaywallAction.RESTORE_PURCHASES,
+    [NAMI_SIGN_IN]: NamiPaywallAction.SIGN_IN,
+    [SET_STATE]: NamiPaywallAction.TOGGLE_CHANGE,
+};
+/** null when this onTap emits no paywall action event — see the table in the header comment. */
+export function actionForOnTap(onTap) {
+    const fn = onTap?.function;
+    if (fn === undefined)
+        return null;
+    const withSku = SKU_ACTIONS[fn];
+    if (withSku)
+        return { action: withSku, requiresSku: true };
+    if (fn === NAMI_NAVIGATE_TO_SCREEN) {
+        const screen = onTap?.parameters?.screen;
+        return {
+            action: NamiPaywallAction.PAGE_CHANGE,
+            // Web sets `componentChange = { name: onTap.parameters.screen }`.
+            ...(screen === undefined ? {} : { componentChange: { name: screen } }),
+            requiresSku: false,
+        };
+    }
+    const plain = PLAIN_ACTIONS[fn];
+    return plain ? { action: plain, requiresSku: false } : null;
+}
+/** Why a press produced no event, for the "pressed, no event" note in the UI. */
+export function noEventReason(fn) {
+    switch (fn) {
+        case NAMI_DEEP_LINK:
+            return "namiDeeplink reports through NamiPaywallManager.registerDeeplinkActionHandler, not the paywall action event — watch for a deeplink row instead.";
+        case NAMI_RELOAD_PRODUCTS:
+            return "namiReloadProducts re-fetches store products; the SDK sends no paywall action for it.";
+        case NAMI_PLAY_VIDEO:
+        case NAMI_PAUSE_VIDEO:
+        case NAMI_MUTE_VIDEO:
+        case NAMI_UNMUTE_VIDEO:
+            return `${fn} is handled by the platform's video service, which reports its own video events; the CLI has no video to play.`;
+        case UNSUPPORTED:
+            return "This control carries no action — the paywall marked it unsupported, so nothing is sent.";
+        default:
+            return actionForOnTap({ function: fn })
+                ? undefined
+                : `${fn} is not one of the actions the SDK maps to a paywall event, so pressing it sends nothing.`;
+    }
+}

package/dist/render/composite.js

@@ -0,0 +1,161 @@
+/** Nodes one composite may carry; the rest are counted into `truncated`. */
+export const COMPOSITE_MAX_NODES = 200;
+/** Page keys in the order a page reads, paired with the section they become. */
+const SECTIONS = [
+    { name: "header", key: "header" },
+    { name: "content", key: "contentContainer" },
+    { name: "footer", key: "footer" },
+    { name: "background", key: "backgroundContainer" },
+];
+/** Child arrays, in the order the SDKs render them. */
+const CHILD_LIST_KEYS = [
+    "components",
+    "productFeaturedComponents",
+    "productBaseComponents",
+    "pausedComponents",
+    "playingComponents",
+    "mutedComponents",
+    "volumeComponents",
+];
+/** Single-child slots. */
+const CHILD_NODE_KEYS = ["collapseHeader", "groupHeaderTemplate"];
+/**
+ * Walk one page of a paywall template into a flat, depth-tagged outline.
+ *
+ * The walk follows the TV full-page announcement contract documented on
+ * `TPages.screenreaderText`: source order throughout, containers recurse,
+ * `text` / `text-list` carry their strings. It differs in two ways, because a
+ * pane has to show structure rather than speak it: media components render a
+ * placeholder naming the media instead of being skipped, and a `hidden: true`
+ * node (and its subtree) is emitted flagged rather than dropped, so the pane
+ * can dim it. A hidden node is never focusable.
+ *
+ * This is a structural outline, not a layout engine — no positions, sizes or
+ * colours are computed.
+ */
+export function compositeForPage(paywall, pageName) {
+    const page = pagesOf(paywall).find((candidate) => candidate.name === pageName);
+    if (!page)
+        return { pageName, sections: [], truncated: 0 };
+    const walked = SECTIONS.map(({ name, key }) => {
+        const nodes = [];
+        for (const root of rootsOf(page[key]))
+            walk(root, 0, false, nodes);
+        return { name, nodes };
+    });
+    const sections = [];
+    let remaining = COMPOSITE_MAX_NODES;
+    let truncated = 0;
+    for (const section of walked) {
+        const kept = section.nodes.slice(0, Math.max(remaining, 0));
+        truncated += section.nodes.length - kept.length;
+        remaining -= kept.length;
+        if (kept.length > 0)
+            sections.push({ name: section.name, nodes: kept });
+    }
+    return { pageName: typeof page.name === "string" ? page.name : pageName, sections, truncated };
+}
+/** The page the live state says is showing, falling back to template.initialState.currentPage. */
+export function currentPageName(paywall, state) {
+    const live = text(state?.currentPage);
+    if (live)
+        return live;
+    const initial = text(paywall?.template?.initialState?.currentPage);
+    if (initial)
+        return initial;
+    return text(pagesOf(paywall)[0]?.name) ?? "";
+}
+function walk(node, depth, inheritedHidden, out) {
+    const hidden = inheritedHidden || node.hidden === true;
+    const onTap = userAction(node.onTap);
+    const entry = { depth, kind: text(node.component) ?? "unknown" };
+    const content = labelFor(node, onTap !== undefined);
+    if (content)
+        entry.content = content;
+    if (onTap && !hidden)
+        entry.onTap = onTap;
+    const id = text(node.id);
+    if (id)
+        entry.id = id;
+    const testId = text(node.testId);
+    if (testId)
+        entry.testId = testId;
+    if (hidden)
+        entry.hidden = true;
+    out.push(entry);
+    for (const key of CHILD_LIST_KEYS) {
+        for (const child of rootsOf(node[key]))
+            walk(child, depth + 1, hidden, out);
+    }
+    for (const key of CHILD_NODE_KEYS) {
+        const child = node[key];
+        if (isNode(child))
+            walk(child, depth + 1, hidden, out);
+    }
+}
+/** A focusable node is labelled by its screenreaderText when it has one. */
+function labelFor(node, focusable) {
+    if (focusable) {
+        const spoken = text(node.screenreaderText);
+        if (spoken)
+            return spoken;
+    }
+    return contentFor(node);
+}
+function contentFor(node) {
+    switch (text(node.component)) {
+        case "text-list":
+            return lines(node.texts);
+        case "image":
+        case "svgImage":
+            return `[image: ${mediaName(node)}]`;
+        case "videoUrl":
+            return `[video: ${mediaName(node)}]`;
+        case "symbol":
+            return `[icon: ${text(node.name) ?? "symbol"}]`;
+        case "productContainer":
+        case "flexProductContainer":
+            return `[products: ${text(node.subsetGroup) ?? text(node.products) ?? "all"}]`;
+        default:
+            return text(node.text);
+    }
+}
+/** The media's own name: its alt text, else the last segment of its url. */
+function mediaName(node) {
+    const alt = text(node.alt);
+    if (alt)
+        return alt;
+    const url = text(node.url);
+    if (!url)
+        return "media";
+    const path = url.split(/[?#]/)[0];
+    const last = path.split("/").filter(Boolean).pop();
+    return last ?? url;
+}
+function lines(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const items = value.map(text).filter((item) => item !== undefined);
+    return items.length > 0 ? items.join(" · ") : undefined;
+}
+function userAction(value) {
+    if (!isNode(value))
+        return undefined;
+    return typeof value.function === "string" ? value : undefined;
+}
+function pagesOf(paywall) {
+    const pages = paywall?.template?.pages;
+    return Array.isArray(pages) ? pages.filter(isNode) : [];
+}
+/** A section's roots: an array of components, a single container, or nothing. */
+function rootsOf(value) {
+    if (Array.isArray(value))
+        return value.filter(isNode);
+    return isNode(value) ? [value] : [];
+}
+function isNode(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function text(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : undefined;
+}

package/dist/screens/EventsPane.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { palette } from "../theme.js";
+/**
+ * The known `NamiPaywallEvent` fields, in the order the pane shows them.
+ * Copied from `sdk/core/src/types/externals/paywall.ts` — the whole point of
+ * the expanded view is that a field the SDK did **not** send is still visible,
+ * so this list has to be the SDK's, not whatever happened to arrive.
+ */
+export const PAYWALL_EVENT_KEYS = [
+    "sku",
+    "campaignId",
+    "campaignName",
+    "campaignType",
+    "campaignLabel",
+    "campaignUrl",
+    "paywallId",
+    "paywallName",
+    "componentChange",
+    "segmentId",
+    "externalSegmentId",
+    "deeplinkUrl",
+    "purchaseError",
+    "purchases",
+    "timeSpentOnPaywall",
+    "videoMetaData",
+    "purchaseChannel",
+];
+/** A handoff carries these three; a flow event has no schema at all. */
+export const HANDOFF_KEYS = ["tag", "data", "outcome"];
+/** Stands in for a field the SDK did not send. */
+const ABSENT = "—";
+const SOURCE_COLOR = {
+    paywall: palette.secondaryBlue,
+    flow: palette.aqua,
+    handoff: palette.primaryBlue,
+};
+const pad2 = (n) => String(n).padStart(2, "0");
+/** `hh:mm:ss` in the developer's own zone — they are watching this live. */
+function formatTime(at) {
+    const d = new Date(at);
+    if (Number.isNaN(d.getTime()))
+        return "--:--:--";
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+/** `null` means "the SDK did not send this", which the caller renders as a dash. */
+function formatValue(value) {
+    if (value === undefined || value === null)
+        return null;
+    if (typeof value === "string")
+        return value === "" ? '""' : value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function clip(text, max) {
+    if (max <= 1 || text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}…`;
+}
+/** Read a nested string-ish field, e.g. an object's `name` or `id`. */
+function nameOf(value) {
+    if (typeof value === "string")
+        return value;
+    if (value && typeof value === "object") {
+        const record = value;
+        for (const key of ["skuId", "name", "id", "displayName"]) {
+            const inner = record[key];
+            if (typeof inner === "string" && inner !== "")
+                return inner;
+        }
+    }
+    return null;
+}
+/**
+ * The one field worth putting on a collapsed row. Never guesses at a schema for
+ * a flow event: it just shows that event's first author-defined key.
+ */
+export function salientField(event) {
+    const { payload } = event;
+    if (event.source === "paywall") {
+        for (const key of ["sku", "purchaseError", "deeplinkUrl", "componentChange", "paywallName", "campaignName"]) {
+            const value = nameOf(payload[key]) ?? formatValue(payload[key]);
+            if (value)
+                return value;
+        }
+        return null;
+    }
+    if (event.source === "handoff") {
+        return formatValue(payload.tag);
+    }
+    const [firstKey] = Object.keys(payload);
+    if (firstKey === undefined)
+        return null;
+    const value = formatValue(payload[firstKey]);
+    return value === null ? firstKey : `${firstKey}=${value}`;
+}
+/** The known keys for a source, then anything extra the payload carried. */
+function fieldsFor(event) {
+    const known = event.source === "paywall" ? PAYWALL_EVENT_KEYS : event.source === "handoff" ? HANDOFF_KEYS : [];
+    const extras = Object.keys(event.payload).filter((key) => !known.includes(key));
+    return [...known, ...extras].map((key) => [key, formatValue(event.payload[key])]);
+}
+function EventRow({ event, selected, width }) {
+    const head = `${formatTime(event.at)} · ${event.source} · ${event.name}`;
+    // "simulated" is part of the head: it must never be the thing that gets dropped.
+    const mark = event.simulated ? " · simulated" : "";
+    const salient = salientField(event);
+    const room = width - 2 - head.length - mark.length;
+    // A narrow row drops the salient column rather than clipping the name into ambiguity.
+    const tail = salient !== null && room >= salient.length + 3 ? ` · ${salient}` : "";
+    return (_jsxs(Text, { children: [_jsx(Text, { color: palette.aqua, children: selected ? "›" : " " }), " ", _jsx(Text, { dimColor: true, children: formatTime(event.at) }), " · ", _jsx(Text, { color: SOURCE_COLOR[event.source], children: event.source }), " · ", _jsx(Text, { bold: selected, children: event.name }), event.simulated && _jsx(Text, { color: palette.coral, children: " \u00B7 simulated" }), tail && _jsx(Text, { dimColor: true, children: tail })] }));
+}
+function ExpandedEvent({ event, width }) {
+    const fields = fieldsFor(event);
+    const labelWidth = fields.reduce((longest, [key]) => Math.max(longest, key.length), 0);
+    const valueWidth = Math.max(12, width - labelWidth - 4);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: palette.aqua, children: event.name }), _jsxs(Text, { dimColor: true, children: [" \u00B7 seq ", event.seq, " \u00B7 ", formatTime(event.at), " \u00B7 ", event.source] })] }), event.simulated && (_jsx(Text, { color: palette.coral, children: "simulated \u00B7 the CLI's purchase adapter produced this, not a real store" })), fields.length === 0 ? (_jsx(Text, { dimColor: true, children: "this event carried no fields" })) : (fields.map(([key, value]) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: key.padEnd(labelWidth) }), " ", value === null ? _jsx(Text, { dimColor: true, children: ABSENT }) : _jsx(Text, { children: clip(value, valueWidth) })] }, key))))] }));
+}
+/**
+ * What the SDK just sent, as it sent it.
+ *
+ * Pure: it renders the props it is handed and nothing else. A field the SDK
+ * omitted still gets a row with a dash, because "did my paywall send this?" is
+ * the question this pane exists to answer, and an omitted row cannot answer it.
+ */
+export function EventsPane({ events, selectedSeq, paused, expanded, width }) {
+    const selected = selectedSeq === null ? undefined : events.find((event) => event.seq === selectedSeq);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Events" }), " ", _jsx(Text, { bold: true, children: events.length }), paused && _jsx(Text, { color: palette.coral, children: " \u00B7 paused" })] }), events.length === 0 ? (_jsx(Text, { dimColor: true, children: "No events yet \u2014 interact with the placement and what it sends shows up here." })) : (events.map((event) => (_jsx(EventRow, { event: event, selected: event.seq === selectedSeq, width: width }, event.seq)))), expanded && selected && _jsx(ExpandedEvent, { event: selected, width: width })] }));
+}

package/dist/screens/LaunchScreen.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { palette } from "../theme.js";
+import { EventsPane } from "./EventsPane.js";
+/**
+ * A launched placement: the page outline on one side, what the SDK reported on
+ * the other.
+ *
+ * Pure presentation plus input — it renders the props it is handed and turns
+ * keys into callbacks. The subscriptions, the bus and the focus index live in
+ * `src/placements/launch.ts` and `Shell`, so this file can be rendered from a
+ * test with nothing configured.
+ */
+/** At or above this many columns the two panes sit side by side; below it they stack. */
+export const SIDE_BY_SIDE_MIN_WIDTH = 100;
+/** Columns between the two panes when they sit side by side. */
+const GUTTER = 2;
+/**
+ * What the arrows move between: a node the paywall gave an action to, that is
+ * actually on screen. The walker already drops `onTap` from a hidden subtree;
+ * the `hidden` check here means a change there can never make an invisible
+ * control pressable.
+ */
+export function focusableNodes(composite) {
+    return composite.sections.flatMap((section) => section.nodes).filter((node) => node.onTap && !node.hidden);
+}
+function clip(text, max) {
+    if (max <= 1 || text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}…`;
+}
+/** One outline row: `kind content → action`, indented by depth. */
+function nodeLine(node) {
+    const parts = [node.kind];
+    if (node.content)
+        parts.push(node.content);
+    if (node.onTap)
+        parts.push(`→ ${node.onTap.function}`);
+    // A word, never colour alone — the dim is a second signal, not the only one.
+    if (node.hidden)
+        parts.push("· hidden");
+    return `${"  ".repeat(node.depth)}${parts.join(" ")}`;
+}
+function CompositePane({ composite, placement, focused, width, deviceName }) {
+    const empty = composite.sections.length === 0;
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Page" }), " ", _jsx(Text, { children: composite.pageName || "—" })] }), empty && placement.kind === "flow" && (_jsx(Text, { dimColor: true, children: "A flow has no one page to outline \u2014 its screens and steps report as flow events in the pane." })), empty && placement.kind !== "flow" && composite.unresolved && (_jsxs(Text, { dimColor: true, children: ["No paywall for this placement on ", deviceName ? `a ${deviceName}` : "the configured device", " \u2014 it is probably authored for another form factor. Switch device (d on the home screen, or --device) and launch again."] })), empty && placement.kind !== "flow" && !composite.unresolved && (_jsx(Text, { dimColor: true, children: "Nothing to outline on this page \u2014 the paywall resolved but served no components." })), composite.sections.map((section) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: section.name }), section.nodes.map((node, index) => {
+                        const isFocused = node === focused;
+                        return (_jsxs(Text, { dimColor: node.hidden, children: [_jsx(Text, { color: palette.aqua, children: isFocused ? "›" : " " }), " ", _jsx(Text, { bold: isFocused, children: clip(nodeLine(node), Math.max(width - 2, 1)) })] }, `${section.name}-${index}`));
+                    })] }, section.name))), composite.truncated > 0 && _jsxs(Text, { dimColor: true, children: ["+", composite.truncated, " more"] })] }));
+}
+export function LaunchScreen({ placement, composite, events, width, paused, expanded, selectedSeq, focusIndex, onPress, onMove, onTogglePause, onClear, onToggleExpand, onBack, notice, deviceName }) {
+    const focusable = focusableNodes(composite);
+    const focused = focusable[focusIndex];
+    useInput((input, key) => {
+        if (key.upArrow || key.leftArrow)
+            return onMove(-1);
+        if (key.downArrow || key.rightArrow)
+            return onMove(1);
+        if (key.return)
+            return void (focused && onPress(focused));
+        if (input === "p")
+            return onTogglePause();
+        if (input === "c")
+            return onClear();
+        if (input === "x")
+            return onToggleExpand();
+        if (input === "q" || key.escape)
+            return onBack();
+    });
+    const sideBySide = width >= SIDE_BY_SIDE_MIN_WIDTH;
+    const paneWidth = sideBySide ? Math.floor(width / 2) - 1 : width;
+    const eventsWidth = sideBySide ? width - paneWidth - GUTTER : width;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: placement.label }), " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", placement.kind, "]"] }), placement.campaignName && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", placement.campaignName] })] }), _jsxs(Box, { flexDirection: sideBySide ? "row" : "column", marginTop: 1, children: [_jsx(CompositePane, { composite: composite, placement: placement, focused: focused, width: paneWidth, deviceName: deviceName }), _jsx(Box, { flexDirection: "column", marginLeft: sideBySide ? GUTTER : 0, marginTop: sideBySide ? 0 : 1, children: _jsx(EventsPane, { events: events, selectedSeq: selectedSeq ?? null, paused: paused, expanded: expanded, width: eventsWidth }) })] }), notice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.coral, children: notice }) })), _jsx(Text, { dimColor: true, children: "\u2191\u2193 move \u00B7 enter press \u00B7 p pause \u00B7 c clear \u00B7 x expand \u00B7 q back" })] }));
+}

package/dist/screens/LoginFlow.js

@@ -56,7 +56,7 @@ export function LoginFlow({ auth, store, host, totpCode, org, onDone, onFail, ex
             return void finish(signedIn, match);
         }
         if (orgs.length === 0)
-            return fail(new AuthError("org_forbidden", "Your account does not belong to any organization yet."));
+            return fail(new AuthError("org_forbidden", `Your account does not belong to any organization yet. Ask an organization admin to invite you, or create one at ${host.baseUrl}.`));
         if (orgs.length === 1)
             return void finish(signedIn, orgs[0]);
         setStep({ kind: "org", signedIn });

package/dist/screens/NewToNami.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { openUrl as openUrlInBrowser } from "../utils/open-url.js";
+const STEPS = [
+    "Create an account in the Control Center",
+    "Create an app",
+    "Add a platform to it (Apple, Google, Amazon, Roku, Web)",
+    "Copy that platform's App Platform ID",
+];
+/**
+ * The explainer for a developer with no Nami account yet: the four steps that
+ * end in an App Platform ID, and the Control Center to do them in. Pure — the
+ * only side effect is the browser handoff the caller injects.
+ */
+export function NewToNami({ host, onContinue, onBack, openUrl = openUrlInBrowser }) {
+    const [opened, setOpened] = useState(null);
+    useInput((input, key) => {
+        if (key.escape)
+            return onBack();
+        if (key.return)
+            return onContinue();
+        if (input.toLowerCase() === "o")
+            setOpened(openUrl(host.baseUrl));
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "New to Nami" }), _jsx(Text, { children: "Four steps in the Control Center and the CLI can connect:" }), STEPS.map((step, i) => (_jsxs(Text, { children: ["  ", i + 1, ". ", step] }, step))), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Control Center: ", host.baseUrl] }) }), opened === true && _jsx(Text, { dimColor: true, children: "Control Center opened." }), opened === false && _jsxs(Text, { children: ["Open ", host.baseUrl, " in your browser."] }), _jsx(Text, { dimColor: true, children: "o open the Control Center \u00B7 Enter continue \u00B7 Esc back" })] }));
+}

package/dist/screens/PickOrg.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { SelectList } from "../components/SelectList.js";
 export function PickOrg({ orgs, currentOrgId, onSelect, onCancel }) {
     if (orgs.length === 0) {
-        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { bold: true, children: "Your account does not belong to any organization yet." }) }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Your account does not belong to any organization yet." }), _jsx(Text, { children: "Ask an organization admin to invite you, or create one in the Control Center." })] }));
     }
     return (_jsx(SelectList, { title: "Choose an organization", items: orgs.map((o) => ({ key: o.id, label: o.name })), initialKey: currentOrgId ?? undefined, onSelect: (key) => { const org = orgs.find((o) => o.id === key); if (org)
             onSelect(org); }, onCancel: onCancel }));

package/dist/screens/PickPlacement.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { SelectList } from "../components/SelectList.js";
+/** Pure picker over what `listPlacements()` found — it never fetches. */
+export function PickPlacement({ placements, onSelect, onCancel }) {
+    if (placements.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "No placements yet." }), _jsx(Text, { children: "Add a campaign in the Control Center, then run nami again." })] }));
+    }
+    return (_jsx(SelectList, { title: "Placements", items: placements.map((p) => ({ key: p.label, label: p.label, badge: p.kind, hint: p.campaignName })), onSelect: (key) => { const placement = placements.find((p) => p.label === key); if (placement)
+            onSelect(placement); }, onCancel: onCancel }));
+}