@flamingo-stack/openframe-frontend-core 0.0.723 → 0.0.724

package/dist/components/features/model-token-rates.d.ts

@@ -0,0 +1,179 @@
+import { type ReactNode } from 'react';
+import { type ModelTokenRate, type TokenPrice } from '../../utils/model-token-rates';
+/**
+ * The per-model AI token exchange rates, in the two places they are shown:
+ *
+ * - `ModelTokenRates` (+ `ModelTokenRatesPopover`): a small table behind a
+ *   question mark, for the product's cards that count in tokens.
+ * - `ModelTokenExchange`: the whole idea as three steps with a figure each
+ *   (buy OpenFrame tokens, use a frontier model, its tokens are charged at an
+ *   exchange rate). For a page (the website's pricing page).
+ *
+ * Both state a rate with the same functions (`utils/model-token-rates`,
+ * server-safe), so a rate reads the same wherever it is stated. Neither
+ * fetches: a host reads the rates its own way and hands them in, with `status`
+ * saying where that read stands. Each holds ONE size loading, loaded, failed or
+ * empty.
+ *
+ * A rate is the number of OpenFrame tokens ONE token of the model charges to
+ * the balance.
+ */
+/** Where the host's read of the rates stands. */
+export type ModelTokenRatesStatus = 'loading' | 'error' | 'ready';
+/** The wording of both views, stated once. */
+export declare const MODEL_TOKEN_RATES_COPY: {
+    readonly trigger: "Per-model token rates";
+    readonly unit: "OpenFrame tokens used per model token";
+    readonly model: "Model";
+    readonly input: "Input";
+    readonly output: "Output";
+    /** The exchange: three steps, each with its own figure. */
+    readonly exchange: {
+        readonly buy: {
+            readonly title: "You buy OpenFrame tokens";
+            /** Under the price: "buys 1M OpenFrame tokens" */
+            readonly words: (tokens: string) => string;
+            /** Under the tokens, where no price is known. */
+            readonly unit: "OpenFrame tokens";
+            /** The amount, where no price is known: "1M OpenFrame tokens" */
+            readonly tokens: (tokens: string) => string;
+            /** The slider's label. */
+            readonly amount: "How many tokens";
+            /** Over the one-tap amounts. */
+            readonly presets: "Included in your plan";
+            /** A one-tap amount: "10M every month" */
+            readonly preset: (tokens: string, label: string) => string;
+        };
+        readonly use: {
+            readonly title: "You use a frontier AI model";
+            readonly model: "Model";
+            readonly search: "Search models";
+            readonly noMatch: "No model matches";
+        };
+        readonly charge: {
+            readonly title: "Its tokens are charged at an exchange rate";
+            /** Over the two rates: the unit, said once. */
+            readonly unit: "OpenFrame tokens charged";
+            readonly input: "per token read";
+            readonly output: "per token written";
+            /** Over the answer: "So $10.00 on Claude Opus 5.5 buys" */
+            readonly so: (balance: string, model: string) => string;
+            /** Beside the answer's number: "750K tokens read" */
+            readonly read: "tokens read";
+            /** Under it: "or 150K tokens written" */
+            readonly orWritten: (output: string) => string;
+        };
+    };
+    readonly autoTopUp: {
+        readonly on: "Auto Top Up Enabled";
+        readonly off: "Auto Top Up Disabled";
+    };
+    readonly unavailable: {
+        readonly title: "Rates unavailable";
+        readonly body: "We couldn't load the per-model token rates. They're a reference only: your plan and its price are unaffected.";
+    };
+    readonly empty: "No token rates are in effect right now.";
+};
+export interface ModelTokenRatesProps {
+    /** The rates, once read. */
+    rates?: readonly ModelTokenRate[];
+    /** Where the read stands. Default `ready`. */
+    status?: ModelTokenRatesStatus;
+    /**
+     * Whether the balance these rates draw on refills itself: the panel's first
+     * line on a billing page. Left out where there is no balance to have that state.
+     */
+    autoTopUpEnabled?: boolean;
+    className?: string;
+}
+/**
+ * The table in its frame, at ONE height in every state. The frame and the auto
+ * top-up line stay put while the rates load or fail to: that line is a fact
+ * about the subscription, not about the rates.
+ */
+export declare function ModelTokenRates({ rates, status, autoTopUpEnabled, className }: ModelTokenRatesProps): import("react").JSX.Element;
+/**
+ * The question-mark button that opens the rates, for every card that counts in
+ * tokens. One trigger, so two cards cannot open two different panels. The panel
+ * is rendered only while open, so a host that reads the rates lazily (`children`)
+ * reads them on open.
+ */
+export declare function ModelTokenRatesPopover({ children, triggerClassName, ...panel }: ModelTokenRatesProps & {
+    /** The panel, when the host renders it itself (a lazy read behind its own boundaries). Default: `ModelTokenRates` with these props. */
+    children?: ReactNode;
+    triggerClassName?: string;
+}): import("react").JSX.Element;
+/** Why the rates are missing, in the box the rates would fill. Shown on a deliberate click or in a page's reserved space, so it never renders empty. */
+export declare function ModelTokenRatesUnavailable({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** The table's loading footprint: the provider tabs, the header and rows of the boxes the loaded rows use. */
+export declare function ModelTokenRatesSkeleton(): import("react").JSX.Element;
+export interface ModelTokenExchangeProps {
+    /** The model whose rate is shown: the one picked, once the host has read it. */
+    rate?: ModelTokenRate | null;
+    /** Where the host's read of that model stands. Default `ready`. */
+    status?: ModelTokenRatesStatus;
+    /** The providers to choose between (their keys), in the host's order. */
+    providers?: readonly string[];
+    /** The provider chosen, and the host's handler for a change (it searches that provider's models). */
+    provider?: string | null;
+    onProviderChange?: (providerType: string) => void;
+    /**
+     * The picker's options: what the HOST's search answered for `query` within
+     * `provider`. The picker never filters them itself: searching is the host's
+     * server's job.
+     */
+    models?: readonly ModelTokenRate[];
+    /** What is typed in the picker, and the host's handler for it (it searches). */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    /** The host's search is in flight. */
+    searching?: boolean;
+    /** A model was picked: its `modelName`. */
+    onPick?: (modelName: string) => void;
+    /** What OpenFrame tokens cost. Given: step 1 states the price of the amount chosen. Not given: the tokens alone. */
+    tokenPrice?: TokenPrice | null;
+    /** The amount step 1 opens on, in OpenFrame tokens. Default: the amount `tokenPrice` is quoted for, else one million. */
+    defaultAmount?: number;
+    /** The slider's bounds and step, in OpenFrame tokens. Default one to fifty million, a million at a time. */
+    amountRange?: {
+        min: number;
+        max: number;
+        step: number;
+    };
+    /** Amounts offered as one-tap choices under the slider (what a plan includes): the tokens and what to call them. */
+    presets?: readonly {
+        tokens: number;
+        label: string;
+    }[];
+    className?: string;
+}
+/** The amount step 1 opens on when the host names none, and the slider's default bounds. */
+export declare const MODEL_TOKEN_EXCHANGE_BALANCE = 1000000;
+export declare const MODEL_TOKEN_EXCHANGE_RANGE: {
+    readonly min: 1000000;
+    readonly max: 50000000;
+    readonly step: 1000000;
+};
+/**
+ * How AI tokens are paid for, as three steps read left to right, each with its
+ * own figure, so the whole idea is on screen at once:
+ *
+ *   1. You buy OpenFrame tokens      "$10.00 buys 1M OpenFrame tokens"
+ *   2. You use a frontier AI model   provider buttons, then the model
+ *   3. Its tokens are charged at an exchange rate
+ *                                    "1.33× per token it reads, 6.67× per token it
+ *                                     writes", then what the step 1 balance buys
+ *
+ * Step 2 is where the visitor acts: the lib's `PushButtonSelector` picks the
+ * provider and the lib's `Autocomplete` (the provider's mark on every option)
+ * finds a model of it. The picker SEARCHES ON THE SERVER: the host hands in
+ * `models` (what its search answered for `query` within `provider`) and the
+ * picker shows exactly those, never a filter of its own.
+ *
+ * One size in every state: each figure and its words are the same boxes loading
+ * (bars of their own line height), loaded, failed and empty.
+ */
+export declare function ModelTokenExchange({ rate, status, providers, provider, onProviderChange, models, query, onQueryChange, searching, onPick, tokenPrice, defaultAmount, amountRange, presets, className, }: ModelTokenExchangeProps): import("react").JSX.Element;
+//# sourceMappingURL=model-token-rates.d.ts.map

package/dist/components/features/model-token-rates.d.ts.map

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