@agimon-ai/po-native-components 0.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Vuong Ngo
+Copyright (c) 2026 pulseaiclub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# @agimon-ai/po-native-components
+
+The React Native component library for Po's native client and its native plugins. It gives native
+code the web library's look and API (`@agimon-ai/po-web-components`) built on native parts: the
+platform activity indicator, Pressable with an Android ripple and 44pt tap targets, SF Symbols on
+iOS and Material icons elsewhere, and a small haptics policy.
+
+## Use
+
+Mount `PoNativeProvider` once at the app root, inside `SafeAreaProvider`. It supplies the gesture
+handler root and the bottom sheet host that sheets, dialogs and menus need. Register Po's native
+themes with Unistyles (`NATIVE_THEMES` from `@agimon-ai/po-web-components/nativeTheme`) before this
+package is imported.
+
+```tsx
+import { Button, PoNativeProvider } from '@agimon-ai/po-native-components';
+
+<PoNativeProvider>
+  <Button variant="primary" onPress={save}>
+    Save
+  </Button>
+</PoNativeProvider>;
+```
+
+Plugins reach this package only through the native host module list. Its API is part of that host
+contract, so it only ever grows: props and exports are added, never removed or renamed.
+
+## Catalogue
+
+| Export                                                            | Web counterpart                           | Native behaviour                                                                                                                                 |
+| ----------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Button`                                                          | Button (9 variants, 7 sizes)              | Pressed state for hover, Android ripple, hitSlop to 44pt, light haptic on primary, danger and success                                            |
+| `Label`, `Input`, `Textarea`                                      | Label, Input, Textarea                    | Placeholder in `faint`, jade cursor, autocorrect off, focus edge at 60% green                                                                    |
+| `Spinner`                                                         | Spinner                                   | `ActivityIndicator` in a theme token; a labelled spinner is a live progress indicator                                                            |
+| `Badge`, `StatusBadge`, `STATUS_EDGE`, `Dot`                      | Same                                      | Accent edges at 40% alpha; `Dot` pulses with RN `Animated`                                                                                       |
+| `EmptyState`, `SectionLabel`, `Panel`, `PanelHeader`, `PanelBody` | Same                                      | Headings carry the header role                                                                                                                   |
+| `List`, `ListRow`                                                 | None (the web uses card buttons)          | FlashList; hairline separators, iOS disclosure chevron, selected rows on a green tint, `startAtBottom` for a chat list                           |
+| `Sheet` and its parts                                             | Sheet (`side` and `width` dropped)        | `BottomSheetModal`: drag handle, sized to content, drag down, backdrop tap or Android back closes; fields inside switch to the sheet's own input |
+| `Dialog` and its parts                                            | Dialog (`width`, footer `plain` or `bar`) | RN `Modal` with an `Animated` pop; centred card; Android back and a backdrop tap close it                                                        |
+| `DropdownMenu` and its parts                                      | DropdownMenu (no submenus yet)            | An action list in a bottom sheet; selection haptic; destructive items in red                                                                     |
+| `Tabs` and its parts, `TabBadge`                                  | Tabs                                      | Horizontal `ScrollView`; tab roles; active tab on a green tint; selection haptic                                                                 |
+| `SegmentedControl`                                                | Select (task status)                      | segmented-control through `withUnistyles`; native on iOS, the library's fallback elsewhere                                                       |
+| `CodeBlock`                                                       | CodeBlock (`text`, `language`)            | Horizontal scroll, selectable mono text, expo-clipboard copy; no colouring or mermaid yet                                                        |
+| `Markdown`                                                        | Markdown (`text`, `onFileLink`)           | The package's own parser; links open with `Linking`; no tables, images or blockquotes yet                                                        |
+| `MessageItem` and its parts, `toolTone`, `STATUS_LABEL`           | MessageItem                               | The header is one Pressable that expands the item; edge from `STATUS_EDGE`; outcome as a `StatusBadge`                                           |
+| Icons (`CheckIcon` ... `CloseIcon`, 14)                           | icons.ts, same names                      | SF Symbols on iOS, MaterialIcons on Android and web                                                                                              |
+| `PoNativeProvider`                                                | None                                      | `GestureHandlerRootView` and `BottomSheetModalProvider`                                                                                          |
+| `fontOf`, `impactLight`, `selectionTick`                          | None                                      | Per-platform font family; the haptics policy                                                                                                     |
+
+`asChild` has no native equivalent and is dropped. Colours always come from the Unistyles theme;
+alpha mixes are computed in render because Unistyles hands stylesheets CSS variables on web.
+
+## Build
+
+`tsdown` emits ESM only (`exports['.']` is `{types, default}`), unbundled, with every bare import
+external, so each native library resolves from the app's single copy. The Unistyles Babel rewrite
+runs at build time through `unistylesBabel` from `@agimon-ai/po-build/tsdown`.
+
+## Stories
+
+Each component has a colocated `*.stories.tsx` titled `Native/Components/<Name>`, rendered from the
+repository root:
+
+```sh
+pnpm exec style-system get-ui-component -c 'Native/Components/Button' -a packages/core/po-native-components -s Playground
+```
+
+`src/unistyles.ts` registers the themes for story renders only and is never exported. Story renders
+run on react-native-web, so they cannot show SF Symbols, haptics or native ripples; check those on
+a device. The SegmentedControl story does not render: style-system's bundler cannot parse the Flow
+source segmented-control ships for its non-iOS fallback.

package/dist/components/Badge.d.mts

@@ -0,0 +1,17 @@
+import { ChipTone } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/Badge.d.ts
+export type BadgeTone = ChipTone;
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface BadgeProps extends Omit<ViewProps, 'children' | 'style'> {
+  tone?: BadgeTone;
+  /** The same rungs Button names, so a chip can sit beside a button of any size. */
+  size?: BadgeSize;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** An outlined chip in one of the accent tones. */
+export declare function Badge({ tone, size, children, style, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Badge.d.mts.map

package/dist/components/Badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.mts","names":[],"sources":["../../src/components/Badge.tsx"],"mappings":";;;;YASY,YAAY;YACZ;iBAKK,mBAAmB,KAAK;EACvC,OAAO;;EAEP,OAAO;EACP,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,QAAQ,MAAkB,MAAa,UAAU,UAAU,SAAS,6BAAU,IAAA"}

package/dist/components/Badge.mjs

@@ -0,0 +1,106 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { CHIP_INK } from "../lib/tone.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Badge.tsx
+/** `border-doom-<accent>/40`. */
+const EDGE_ALPHA_PERCENT = 40;
+/** An outlined chip in one of the accent tones. */
+function Badge({ tone = "neutral", size = "sm", children, style, ...props }) {
+	const { theme } = useUnistyles();
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({
+			tone,
+			size
+		});
+		const edge = tone === "neutral" ? void 0 : { borderColor: withAlpha(theme.colors[CHIP_INK[tone]], EDGE_ALPHA_PERCENT) };
+		return /* @__PURE__ */ jsx(View, {
+			style: [
+				styles.badge,
+				edge,
+				style
+			],
+			...props,
+			children: wrapText(children, styles.label)
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => {
+	const ink = (tone) => ({ color: theme.colors[CHIP_INK[tone]] });
+	return {
+		badge: {
+			flexDirection: "row",
+			alignItems: "center",
+			alignSelf: "flex-start",
+			gap: theme.spacing(1.5),
+			borderRadius: theme.borderRadius.DEFAULT,
+			borderWidth: 1,
+			borderColor: theme.colors.border,
+			variants: { size: {
+				xs: {
+					paddingHorizontal: theme.spacing(1.5),
+					paddingVertical: 1
+				},
+				sm: {
+					paddingHorizontal: theme.spacing(2),
+					paddingVertical: theme.spacing(.5)
+				},
+				md: {
+					paddingHorizontal: theme.spacing(2.5),
+					paddingVertical: theme.spacing(1)
+				},
+				lg: {
+					paddingHorizontal: theme.spacing(3),
+					paddingVertical: theme.spacing(1.5)
+				}
+			} },
+			uni__dependencies: [0, 4]
+		},
+		label: {
+			fontFamily: fontOf(theme.fontFamily.sans),
+			variants: {
+				tone: {
+					neutral: ink("neutral"),
+					blue: ink("blue"),
+					green: ink("green"),
+					yellow: ink("yellow"),
+					red: ink("red"),
+					magenta: ink("magenta"),
+					violet: ink("violet"),
+					cyan: ink("cyan"),
+					orange: ink("orange"),
+					teal: ink("teal")
+				},
+				size: {
+					xs: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm,
+						fontWeight: theme.fontWeight.semibold
+					},
+					sm: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm
+					},
+					md: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm
+					},
+					lg: {
+						fontSize: theme.fontSize.base,
+						lineHeight: theme.lineHeight.base
+					}
+				}
+			},
+			uni__dependencies: [0, 4]
+		}
+	};
+});
+
+//#endregion
+export { Badge };
+//# sourceMappingURL=Badge.mjs.map

package/dist/components/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":["ChipTone","withAlpha","ReactNode","StyleProp","ViewProps","ViewStyle","StyleSheet","useUnistyles","fontOf","CHIP_INK","wrapText","BadgeTone","BadgeSize","EDGE_ALPHA_PERCENT","BadgeProps","Omit","tone","size","children","style","Badge","props","theme","_styles","styles","useVariants","edge","undefined","borderColor","colors","badge","label","create","ink","color","flexDirection","alignItems","alignSelf","gap","spacing","borderRadius","DEFAULT","borderWidth","border","variants","xs","paddingHorizontal","paddingVertical","sm","md","lg","uni__dependencies","fontFamily","sans","neutral","blue","green","yellow","red","magenta","violet","cyan","orange","teal","fontSize","lineHeight","fontWeight","semibold","base"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import { type ChipTone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { CHIP_INK } from '../lib/tone';\nimport { wrapText } from '../lib/wrapText';\n\nexport type BadgeTone = ChipTone;\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `border-doom-<accent>/40`. */\nconst EDGE_ALPHA_PERCENT = 40;\n\nexport interface BadgeProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: BadgeTone;\n  /** The same rungs Button names, so a chip can sit beside a button of any size. */\n  size?: BadgeSize;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** An outlined chip in one of the accent tones. */\nexport function Badge({ tone = 'neutral', size = 'sm', children, style, ...props }: BadgeProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n  // the stylesheet CSS variables, which withAlpha cannot read.\n  const edge =\n    tone === 'neutral' ? undefined : { borderColor: withAlpha(theme.colors[CHIP_INK[tone]], EDGE_ALPHA_PERCENT) };\n  return (\n    <View style={[styles.badge, edge, style]} {...props}>\n      {wrapText(children, styles.label)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => {\n  const ink = (tone: ChipTone) => ({ color: theme.colors[CHIP_INK[tone]] });\n  return {\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      gap: theme.spacing(1.5),\n      borderRadius: theme.borderRadius.DEFAULT,\n      borderWidth: 1,\n      borderColor: theme.colors.border,\n      variants: {\n        size: {\n          xs: { paddingHorizontal: theme.spacing(1.5), paddingVertical: 1 },\n          sm: { paddingHorizontal: theme.spacing(2), paddingVertical: theme.spacing(0.5) },\n          md: { paddingHorizontal: theme.spacing(2.5), paddingVertical: theme.spacing(1) },\n          lg: { paddingHorizontal: theme.spacing(3), paddingVertical: theme.spacing(1.5) },\n        },\n      },\n    },\n    label: {\n      fontFamily: fontOf(theme.fontFamily.sans),\n      variants: {\n        tone: {\n          neutral: ink('neutral'),\n          blue: ink('blue'),\n          green: ink('green'),\n          yellow: ink('yellow'),\n          red: ink('red'),\n          magenta: ink('magenta'),\n          violet: ink('violet'),\n          cyan: ink('cyan'),\n          orange: ink('orange'),\n          teal: ink('teal'),\n        },\n        size: {\n          xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm, fontWeight: theme.fontWeight.semibold },\n          sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          md: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        },\n      },\n    },\n  };\n});\n"],"mappings":";;;;;;;;;;AAaA,MAAMa,qBAAqB;;AAW3B,SAAgBO,MAAM,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,UAAUC,OAAO,GAAGE,SAAqB;CAC9F,MAAM,EAAEC,UAAUf,aAAa;CAAE,MAAAgB,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAET;GAAMC;EAAK,CAAC;EAGjC,MAAMS,OACJV,SAAS,YAAYW,SAAY,EAAEC,aAAa3B,UAAUqB,MAAMO,OAAOpB,SAASO,QAAQH,kBAAkB,EAAE;EAC9G,OACE,oBAAC,MAAD;GAAM,OAAO;IAACW,OAAOM;IAAOJ;IAAMP;GAAK;GAAG,GAAIE;aAC3CX,SAASQ,UAAUM,OAAOO,KAAK;EAC5B;CACN;AACJ;AAEA,MAAMP,SAASlB,WAAW0B,QAAQV,UAAU;CAC1C,MAAMW,OAAOjB,UAAoB,EAAEkB,OAAOZ,MAAMO,OAAOpB,SAASO,OAAO;CACvE,OAAO;EACLc,OAAO;GACLK,eAAe;GACfC,YAAY;GACZC,WAAW;GACXC,KAAKhB,MAAMiB,QAAQ,GAAG;GACtBC,cAAclB,MAAMkB,aAAaC;GACjCC,aAAa;GACbd,aAAaN,MAAMO,OAAOc;GAC1BC,UAAU,EACR3B,MAAM;IACJ4B,IAAI;KAAEC,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiB;IAAE;IAChEC,IAAI;KAAEF,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,EAAG;IAAE;IAC/EU,IAAI;KAAEH,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,CAAC;IAAE;IAC/EW,IAAI;KAAEJ,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,GAAG;IAAE;GACjF,EACF;GAACY,mBAAA,CAAA,GAAA,CAAA;EACH;EACApB,OAAO;GACLqB,YAAY5C,OAAOc,MAAM8B,WAAWC,IAAI;GACxCT,UAAU;IACR5B,MAAM;KACJsC,SAASrB,IAAI,SAAS;KACtBsB,MAAMtB,IAAI,MAAM;KAChBuB,OAAOvB,IAAI,OAAO;KAClBwB,QAAQxB,IAAI,QAAQ;KACpByB,KAAKzB,IAAI,KAAK;KACd0B,SAAS1B,IAAI,SAAS;KACtB2B,QAAQ3B,IAAI,QAAQ;KACpB4B,MAAM5B,IAAI,MAAM;KAChB6B,QAAQ7B,IAAI,QAAQ;KACpB8B,MAAM9B,IAAI,MAAM;IAClB;IACAhB,MAAM;KACJ4B,IAAI;MAAEmB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;MAAIkB,YAAY5C,MAAM4C,WAAWC;KAAS;KAC1GnB,IAAI;MAAEgB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEC,IAAI;MAAEe,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEE,IAAI;MAAEc,UAAU1C,MAAM0C,SAASI;MAAMH,YAAY3C,MAAM2C,WAAWG;KAAK;IACzE;GACF;GAACjB,mBAAA,CAAA,GAAA,CAAA;EACH;CACF;AACF,CAAC"}

package/dist/components/Button.d.mts

@@ -0,0 +1,20 @@
+import { PressableProps, StyleProp, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/Button.d.ts
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'danger' | 'danger-outline' | 'success' | 'link';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-md' | 'card';
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Work is in flight: the button shows a spinner and stops accepting presses. */
+  loading?: boolean;
+  /** What the spinner announces while loading; omit it and the wait is silent. */
+  loadingLabel?: string;
+  /** A bare string is drawn as the label; elements (an icon, a card's lines) render as given. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** The one button: every variant is a theme token, a press dims or lifts it, and committing presses buzz once. */
+export declare function Button({ variant, size, loading, loadingLabel, disabled, onPress, children, style, hitSlop, accessibilityState, ...props }: ButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Button.d.mts.map

package/dist/components/Button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;YAWY;YAUA;iBAqCK,oBAAoB,KAAK;EACxC,UAAU;EACV,OAAO;;EAEP;;EAEA;;EAEA,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,SACd,SACA,MACA,SACA,cACA,UACA,SACA,UACA,OACA,SACA,uBACG,SACF,8BAAW,IAAA"}

package/dist/components/Button.mjs

@@ -0,0 +1,278 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { IconColorContext } from "../icons/IconColorContext.mjs";
+import { impactLight } from "../lib/haptics.mjs";
+import { Spinner } from "./Spinner.mjs";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+
+//#region src/components/Button.tsx
+/** Apple's and Google's minimum tap target; a smaller visual box makes up the rest with hitSlop. */
+const MIN_TAP_TARGET = 44;
+const DISABLED_OPACITY = .4;
+const PRESSED_FILL_OPACITY = .85;
+const RIPPLE_ALPHA_PERCENT = 20;
+/** `hover:border-doom-green/50`. */
+const PRESSED_EDGE_ALPHA_PERCENT = 50;
+/** The visual height of each size, from which hitSlop pads the tap target to 44pt. */
+const SIZE_HEIGHT = {
+	xs: 24,
+	sm: 28,
+	md: 32,
+	lg: 36,
+	icon: 24,
+	"icon-md": 32,
+	card: MIN_TAP_TARGET
+};
+/** The label ink of each variant, and the ink it lifts to while pressed (the web hover). */
+const INK = {
+	primary: {
+		rest: "on-selected",
+		pressed: "on-selected"
+	},
+	secondary: {
+		rest: "magenta",
+		pressed: "magenta"
+	},
+	outline: {
+		rest: "dim",
+		pressed: "hi"
+	},
+	ghost: {
+		rest: "dim",
+		pressed: "hi"
+	},
+	subtle: {
+		rest: "dim",
+		pressed: "hi"
+	},
+	danger: {
+		rest: "rail",
+		pressed: "rail"
+	},
+	"danger-outline": {
+		rest: "red",
+		pressed: "red"
+	},
+	success: {
+		rest: "rail",
+		pressed: "rail"
+	},
+	link: {
+		rest: "blue",
+		pressed: "blue"
+	}
+};
+/** Presses that commit something get a light impact; the rest stay quiet. */
+const HAPTIC_VARIANTS = /* @__PURE__ */ new Set([
+	"primary",
+	"danger",
+	"success"
+]);
+/** The one button: every variant is a theme token, a press dims or lifts it, and committing presses buzz once. */
+function Button({ variant = "outline", size = "md", loading = false, loadingLabel, disabled, onPress, children, style, hitSlop, accessibilityState, ...props }) {
+	const { theme } = useUnistyles();
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({
+			variant,
+			size
+		});
+		const inactive = (disabled ?? false) || loading;
+		const slop = Math.max(0, (MIN_TAP_TARGET - SIZE_HEIGHT[size]) / 2);
+		const ink = INK[variant];
+		return /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: variant === "link" ? "link" : "button",
+			accessibilityState: {
+				...accessibilityState,
+				disabled: inactive,
+				busy: loading
+			},
+			accessibilityValue: loading && loadingLabel !== void 0 ? { text: loadingLabel } : void 0,
+			disabled: inactive,
+			hitSlop: hitSlop ?? slop,
+			android_ripple: {
+				color: withAlpha(theme.colors[ink.pressed], RIPPLE_ALPHA_PERCENT),
+				borderless: false
+			},
+			onPress: (event) => {
+				if (HAPTIC_VARIANTS.has(variant)) impactLight();
+				onPress?.(event);
+			},
+			style: ({ pressed }) => [
+				styles.button,
+				pressed && styles.pressed,
+				pressed && variant === "outline" && { borderColor: withAlpha(theme.colors.green, PRESSED_EDGE_ALPHA_PERCENT) },
+				inactive && styles.disabled,
+				style
+			],
+			...props,
+			children: ({ pressed }) => {
+				const token = pressed ? ink.pressed : ink.rest;
+				return /* @__PURE__ */ jsxs(IconColorContext.Provider, {
+					value: token,
+					children: [loading ? /* @__PURE__ */ jsx(Spinner, { color: token }) : null, wrapText(children, [
+						styles.label,
+						pressed && styles.labelPressed,
+						{ color: theme.colors[token] }
+					])]
+				});
+			}
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => ({
+	button: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: theme.spacing(1.5),
+		borderRadius: theme.borderRadius.md,
+		borderWidth: 1,
+		borderColor: "transparent",
+		overflow: "hidden",
+		variants: {
+			variant: {
+				primary: { backgroundColor: theme.colors.selected },
+				secondary: {
+					borderColor: theme.colors["edge-magenta"],
+					backgroundColor: theme.colors["tint-magenta"]
+				},
+				outline: { borderColor: theme.colors.border },
+				ghost: {},
+				subtle: { backgroundColor: theme.colors.panel },
+				danger: { backgroundColor: theme.colors.red },
+				"danger-outline": {
+					borderColor: theme.colors["edge-red"],
+					backgroundColor: theme.colors["tint-red"]
+				},
+				success: { backgroundColor: theme.colors.green },
+				link: {}
+			},
+			size: {
+				xs: {
+					height: SIZE_HEIGHT.xs,
+					paddingHorizontal: theme.spacing(1.5),
+					borderRadius: theme.borderRadius.DEFAULT
+				},
+				sm: {
+					height: SIZE_HEIGHT.sm,
+					paddingHorizontal: theme.spacing(2.5)
+				},
+				md: {
+					height: SIZE_HEIGHT.md,
+					paddingHorizontal: theme.spacing(3)
+				},
+				lg: {
+					height: SIZE_HEIGHT.lg,
+					paddingHorizontal: theme.spacing(3.5)
+				},
+				icon: {
+					width: SIZE_HEIGHT.icon,
+					height: SIZE_HEIGHT.icon,
+					padding: 0,
+					borderRadius: theme.borderRadius.DEFAULT
+				},
+				"icon-md": {
+					width: SIZE_HEIGHT["icon-md"],
+					height: SIZE_HEIGHT["icon-md"],
+					padding: 0
+				},
+				card: {
+					alignSelf: "stretch",
+					flexDirection: "column",
+					alignItems: "stretch",
+					justifyContent: "flex-start",
+					gap: theme.spacing(1),
+					minHeight: SIZE_HEIGHT.card,
+					paddingHorizontal: 11,
+					paddingVertical: theme.spacing(2.5)
+				}
+			}
+		},
+		uni__dependencies: [0, 4]
+	},
+	pressed: {
+		variants: { variant: {
+			primary: { opacity: PRESSED_FILL_OPACITY },
+			secondary: { opacity: PRESSED_FILL_OPACITY },
+			outline: {},
+			ghost: { backgroundColor: theme.colors.panel },
+			subtle: { backgroundColor: theme.colors.deep },
+			danger: { opacity: PRESSED_FILL_OPACITY },
+			"danger-outline": { opacity: PRESSED_FILL_OPACITY },
+			success: { opacity: PRESSED_FILL_OPACITY },
+			link: {}
+		} },
+		uni__dependencies: [0, 4]
+	},
+	disabled: { opacity: DISABLED_OPACITY },
+	label: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontWeight: theme.fontWeight.medium,
+		variants: {
+			variant: {
+				primary: { fontWeight: theme.fontWeight.semibold },
+				secondary: { fontWeight: theme.fontWeight.semibold },
+				outline: {},
+				ghost: {},
+				subtle: {},
+				danger: { fontWeight: theme.fontWeight.semibold },
+				"danger-outline": { fontWeight: theme.fontWeight.semibold },
+				success: { fontWeight: theme.fontWeight.semibold },
+				link: {}
+			},
+			size: {
+				xs: {
+					fontSize: theme.fontSize.sm,
+					lineHeight: theme.lineHeight.sm
+				},
+				sm: {
+					fontSize: theme.fontSize.sm,
+					lineHeight: theme.lineHeight.sm
+				},
+				md: {
+					fontSize: theme.fontSize.base,
+					lineHeight: theme.lineHeight.base
+				},
+				lg: {
+					fontSize: theme.fontSize.base,
+					lineHeight: theme.lineHeight.base
+				},
+				icon: {
+					fontSize: theme.fontSize.base,
+					lineHeight: theme.lineHeight.base
+				},
+				"icon-md": {
+					fontSize: theme.fontSize.base,
+					lineHeight: theme.lineHeight.base
+				},
+				card: {
+					fontSize: theme.fontSize.base,
+					lineHeight: theme.lineHeight.base
+				}
+			}
+		},
+		uni__dependencies: [0, 4]
+	},
+	labelPressed: {
+		variants: { variant: {
+			primary: {},
+			secondary: {},
+			outline: {},
+			ghost: {},
+			subtle: {},
+			danger: {},
+			"danger-outline": {},
+			success: {},
+			link: { textDecorationLine: "underline" }
+		} },
+		uni__dependencies: [4]
+	}
+}));
+
+//#endregion
+export { Button };
+//# sourceMappingURL=Button.mjs.map

package/dist/components/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","names":["NativeColorToken","withAlpha","ReactNode","PressableProps","StyleProp","ViewStyle","StyleSheet","useUnistyles","IconColorContext","fontOf","impactLight","wrapText","Spinner","ButtonVariant","ButtonSize","MIN_TAP_TARGET","DISABLED_OPACITY","PRESSED_FILL_OPACITY","RIPPLE_ALPHA_PERCENT","PRESSED_EDGE_ALPHA_PERCENT","SIZE_HEIGHT","Readonly","Record","xs","sm","md","lg","icon","card","INK","rest","pressed","primary","secondary","outline","ghost","subtle","danger","success","link","HAPTIC_VARIANTS","ReadonlySet","Set","ButtonProps","Omit","variant","size","loading","loadingLabel","children","style","Button","disabled","onPress","hitSlop","accessibilityState","props","theme","_styles","styles","useVariants","inactive","slop","Math","max","ink","busy","undefined","text","color","colors","borderless","event","has","button","borderColor","green","token","label","labelPressed","create","flexDirection","alignItems","justifyContent","gap","spacing","borderRadius","borderWidth","overflow","variants","backgroundColor","selected","border","panel","red","height","paddingHorizontal","DEFAULT","width","padding","alignSelf","minHeight","paddingVertical","uni__dependencies","opacity","deep","fontFamily","sans","fontWeight","medium","semibold","fontSize","lineHeight","base","textDecorationLine"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import { type NativeColorToken, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { IconColorContext } from '../icons/IconColorContext';\nimport { fontOf } from '../lib/fonts';\nimport { impactLight } from '../lib/haptics';\nimport { wrapText } from '../lib/wrapText';\nimport { Spinner } from './Spinner';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'subtle'\n  | 'danger'\n  | 'danger-outline'\n  | 'success'\n  | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-md' | 'card';\n\n/** Apple's and Google's minimum tap target; a smaller visual box makes up the rest with hitSlop. */\nconst MIN_TAP_TARGET = 44;\nconst DISABLED_OPACITY = 0.4;\nconst PRESSED_FILL_OPACITY = 0.85;\nconst RIPPLE_ALPHA_PERCENT = 20;\n/** `hover:border-doom-green/50`. */\nconst PRESSED_EDGE_ALPHA_PERCENT = 50;\n\n/** The visual height of each size, from which hitSlop pads the tap target to 44pt. */\nconst SIZE_HEIGHT: Readonly<Record<ButtonSize, number>> = {\n  xs: 24,\n  sm: 28,\n  md: 32,\n  lg: 36,\n  icon: 24,\n  'icon-md': 32,\n  card: MIN_TAP_TARGET,\n};\n\n/** The label ink of each variant, and the ink it lifts to while pressed (the web hover). */\nconst INK: Readonly<Record<ButtonVariant, { rest: NativeColorToken; pressed: NativeColorToken }>> = {\n  primary: { rest: 'on-selected', pressed: 'on-selected' },\n  secondary: { rest: 'magenta', pressed: 'magenta' },\n  outline: { rest: 'dim', pressed: 'hi' },\n  ghost: { rest: 'dim', pressed: 'hi' },\n  subtle: { rest: 'dim', pressed: 'hi' },\n  danger: { rest: 'rail', pressed: 'rail' },\n  'danger-outline': { rest: 'red', pressed: 'red' },\n  success: { rest: 'rail', pressed: 'rail' },\n  link: { rest: 'blue', pressed: 'blue' },\n};\n\n/** Presses that commit something get a light impact; the rest stay quiet. */\nconst HAPTIC_VARIANTS: ReadonlySet<ButtonVariant> = new Set(['primary', 'danger', 'success']);\n\nexport interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Work is in flight: the button shows a spinner and stops accepting presses. */\n  loading?: boolean;\n  /** What the spinner announces while loading; omit it and the wait is silent. */\n  loadingLabel?: string;\n  /** A bare string is drawn as the label; elements (an icon, a card's lines) render as given. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The one button: every variant is a theme token, a press dims or lifts it, and committing presses buzz once. */\nexport function Button({\n  variant = 'outline',\n  size = 'md',\n  loading = false,\n  loadingLabel,\n  disabled,\n  onPress,\n  children,\n  style,\n  hitSlop,\n  accessibilityState,\n  ...props\n}: ButtonProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ variant, size });\n  const inactive = (disabled ?? false) || loading;\n  const slop = Math.max(0, (MIN_TAP_TARGET - SIZE_HEIGHT[size]) / 2);\n  const ink = INK[variant];\n  return (\n    <Pressable\n      accessibilityRole={variant === 'link' ? 'link' : 'button'}\n      accessibilityState={{ ...accessibilityState, disabled: inactive, busy: loading }}\n      accessibilityValue={loading && loadingLabel !== undefined ? { text: loadingLabel } : undefined}\n      disabled={inactive}\n      hitSlop={hitSlop ?? slop}\n      android_ripple={{ color: withAlpha(theme.colors[ink.pressed], RIPPLE_ALPHA_PERCENT), borderless: false }}\n      onPress={(event) => {\n        if (HAPTIC_VARIANTS.has(variant)) impactLight();\n        onPress?.(event);\n      }}\n      style={({ pressed }) => [\n        styles.button,\n        pressed && styles.pressed,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        pressed && variant === 'outline' && { borderColor: withAlpha(theme.colors.green, PRESSED_EDGE_ALPHA_PERCENT) },\n        inactive && styles.disabled,\n        style,\n      ]}\n      {...props}\n    >\n      {({ pressed }) => {\n        const token = pressed ? ink.pressed : ink.rest;\n        return (\n          <IconColorContext.Provider value={token}>\n            {loading ? <Spinner color={token} /> : null}\n            {wrapText(children, [styles.label, pressed && styles.labelPressed, { color: theme.colors[token] }])}\n          </IconColorContext.Provider>\n        );\n      }}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  button: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1.5),\n    borderRadius: theme.borderRadius.md,\n    borderWidth: 1,\n    borderColor: 'transparent',\n    overflow: 'hidden',\n    variants: {\n      variant: {\n        primary: { backgroundColor: theme.colors.selected },\n        secondary: { borderColor: theme.colors['edge-magenta'], backgroundColor: theme.colors['tint-magenta'] },\n        outline: { borderColor: theme.colors.border },\n        ghost: {},\n        subtle: { backgroundColor: theme.colors.panel },\n        danger: { backgroundColor: theme.colors.red },\n        'danger-outline': { borderColor: theme.colors['edge-red'], backgroundColor: theme.colors['tint-red'] },\n        success: { backgroundColor: theme.colors.green },\n        link: {},\n      },\n      size: {\n        xs: { height: SIZE_HEIGHT.xs, paddingHorizontal: theme.spacing(1.5), borderRadius: theme.borderRadius.DEFAULT },\n        sm: { height: SIZE_HEIGHT.sm, paddingHorizontal: theme.spacing(2.5) },\n        md: { height: SIZE_HEIGHT.md, paddingHorizontal: theme.spacing(3) },\n        lg: { height: SIZE_HEIGHT.lg, paddingHorizontal: theme.spacing(3.5) },\n        icon: {\n          width: SIZE_HEIGHT.icon,\n          height: SIZE_HEIGHT.icon,\n          padding: 0,\n          borderRadius: theme.borderRadius.DEFAULT,\n        },\n        'icon-md': { width: SIZE_HEIGHT['icon-md'], height: SIZE_HEIGHT['icon-md'], padding: 0 },\n        card: {\n          alignSelf: 'stretch',\n          flexDirection: 'column',\n          alignItems: 'stretch',\n          justifyContent: 'flex-start',\n          gap: theme.spacing(1),\n          minHeight: SIZE_HEIGHT.card,\n          paddingHorizontal: 11,\n          paddingVertical: theme.spacing(2.5),\n        },\n      },\n    },\n  },\n  pressed: {\n    variants: {\n      variant: {\n        primary: { opacity: PRESSED_FILL_OPACITY },\n        secondary: { opacity: PRESSED_FILL_OPACITY },\n        outline: {},\n        ghost: { backgroundColor: theme.colors.panel },\n        subtle: { backgroundColor: theme.colors.deep },\n        danger: { opacity: PRESSED_FILL_OPACITY },\n        'danger-outline': { opacity: PRESSED_FILL_OPACITY },\n        success: { opacity: PRESSED_FILL_OPACITY },\n        link: {},\n      },\n    },\n  },\n  disabled: { opacity: DISABLED_OPACITY },\n  label: {\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontWeight: theme.fontWeight.medium,\n    variants: {\n      variant: {\n        primary: { fontWeight: theme.fontWeight.semibold },\n        secondary: { fontWeight: theme.fontWeight.semibold },\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: { fontWeight: theme.fontWeight.semibold },\n        'danger-outline': { fontWeight: theme.fontWeight.semibold },\n        success: { fontWeight: theme.fontWeight.semibold },\n        link: {},\n      },\n      size: {\n        xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        md: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        icon: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        'icon-md': { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        card: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n      },\n    },\n  },\n  labelPressed: {\n    variants: {\n      variant: {\n        primary: {},\n        secondary: {},\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: {},\n        'danger-outline': {},\n        success: {},\n        link: { textDecorationLine: 'underline' },\n      },\n    },\n  },\n}));\n"],"mappings":"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"}

package/dist/components/CodeBlock.d.mts

@@ -0,0 +1,10 @@
+//#region src/components/CodeBlock.d.ts
+export interface CodeBlockProps {
+  /** The block's source, without the fence lines. */
+  text: string;
+  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */
+  language?: string;
+}
+export declare function CodeBlock({ text, language }: CodeBlockProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CodeBlock.d.mts.map

package/dist/components/CodeBlock.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.d.mts","names":[],"sources":["../../src/components/CodeBlock.tsx"],"mappings":";iBA4BiB;;EAEf;;EAEA;;wBAGc,YAAY,MAAM,YAAY,iCAAc,IAAA"}