@agimon-ai/po-native-components 0.0.0-alpha.3 → 0.0.0-alpha.31

package/LICENSE

@@ -1,22 +1,149 @@
-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.
+License text copyright © 2017 MariaDB Corporation Ab, All Rights Reserved.
+"Business Source License" is a trademark of MariaDB Corporation Ab.
+
+Parameters
+
+Licensor:             Agimon Pty Ltd
+Licensed Work:        Po, the software in the Po source repository and the
+                      packages released from it, in each version released by
+                      the Licensor.
+                      The Licensed Work is (c) 2026 Agimon Pty Ltd.
+                      Material identified as third-party in the "Third-party
+                      components" section at the end of this file or in a
+                      NOTICE file, and any package or directory whose own
+                      license file grants a different license, is not part of
+                      the Licensed Work and remains under its own license.
+Additional Use Grant: You may make production use of the Licensed Work if
+  your use is Eligible Use. "Eligible Use" is production use that falls
+  within at least one of the following:
+
+  (a) Personal Use. Use by an individual for their own personal purposes,
+      and not on behalf of, or for the benefit of, an employer, client, or
+      other Organization. Use by an individual in the course of employment
+      or engagement by an Organization is use by that Organization.
+
+  (b) Small Organization Use. Use by or on behalf of an Organization whose
+      Annual Revenue is less than USD 1,000,000.
+
+  (c) Non-profit, Education and Research Use. Use, regardless of Annual
+      Revenue, by (i) an Organization registered or recognized as a
+      non-profit or charitable organization under the laws of its
+      jurisdiction, for its non-profit purposes; (ii) an accredited school,
+      college, or university, for teaching, learning, or academic research;
+      or (iii) a publicly funded research institution, for its research.
+
+  (d) Service Provider Use. Use by a consultant, contractor, agency, or other
+      service provider, regardless of its own Annual Revenue, solely to
+      build, deploy, host, operate, or support the Licensed Work for a client
+      whose own use would be Eligible Use under (a), (b), or (c). A service
+      provider's use for its own purposes is Eligible Use only if the service
+      provider itself qualifies under (b) or (c).
+
+
+  Hosted services. Offering the Licensed Work to third parties as a hosted
+  or managed service whose primary value is the Licensed Work is Eligible
+  Use only if each such third party's own use would be Eligible Use.
+
+  Definitions. "Organization" means any company, partnership, sole
+  proprietorship, trust, association, government body, or other entity, and
+  includes an individual acting in a business or professional capacity.
+  "Affiliate" means any entity that directly or indirectly controls, is
+  controlled by, or is under common control with an Organization, where
+  "control" means ownership of more than 50% of the voting interests of an
+  entity or the power to direct its management and policies by contract or
+  otherwise. "Annual Revenue" means the total gross revenue of an
+  Organization and all of its Affiliates combined, from all sources and
+  whether or not related to the Licensed Work, for its most recently
+  completed fiscal year, or, if it has not completed a fiscal year, for the
+  twelve months before the use (or since its formation, if shorter),
+  converted into US dollars at the average exchange rate for that period.
+  Proceeds of equity or debt financing are not revenue.
+
+  Threshold. If an Organization stops qualifying under (b), its existing
+  production use remains Eligible Use for 90 days after it stops
+  qualifying, after which it must obtain a commercial license or stop
+  production use. Use that was Eligible Use when it occurred never requires
+  a commercial license after the fact.
+Change Date:          Four years from the date a version of the Licensed Work
+                      is first publicly released by the Licensor.
+Change License:       Apache License, Version 2.0
+
+For information about alternative licensing arrangements for the Licensed
+Work, please visit: https://agimon.ai/licensing
+
+Notice
+
+The Business Source License (this document, or the "License") is not an Open
+Source license. However, the Licensed Work will eventually be made available
+under an Open Source License, as stated in this License.
+
+-----------------------------------------------------------------------------
+
+Business Source License 1.1
+
+Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, above, permitting limited
+production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly
+available distribution of a specific version of the Licensed Work under this
+License, whichever comes first, the Licensor hereby grants you rights under
+the terms of the Change License, and the rights granted in the paragraph
+above terminate.
+
+If your use of the Licensed Work does not comply with the requirements
+currently in effect as described in this License, you must purchase a
+commercial license from the Licensor, its affiliated entities, or authorized
+resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works
+of the Licensed Work, are subject to this License. This License applies
+separately for each version of the Licensed Work and the Change Date may vary
+for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy
+of the Licensed Work. If you receive the Licensed Work in original or
+modified form from a third party, the terms and conditions set forth in this
+License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically
+terminate your rights under this License for the current and all other
+versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of
+Licensor or its affiliates (provided that you may use a trademark or logo of
+Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
+AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
+EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
+TITLE.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark “Business Source License”,
+as long as you comply with the Covenants of Licensor below.
+
+Covenants of Licensor
+
+In consideration of the right to use this License’s text and the “Business
+Source License” name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version,
+   or a license that is compatible with GPL Version 2.0 or a later version,
+   where “compatible” means that software provided under the Change License can
+   be included in a program with software provided under GPL Version 2.0 or a
+   later version. Licensor may specify additional Change Licenses without
+   limitation.
+
+2. To either: (a) specify an additional grant of rights to use that does not
+   impose any additional restriction on the right granted in this License, as
+   the Additional Use Grant; or (b) insert the text “None”.
+
+3. To specify a Change Date.
+
+4. Not to modify this License in any other way.

package/dist/components/AgentAvatar.d.mts

@@ -0,0 +1,14 @@
+//#region src/components/AgentAvatar.d.ts
+/** How an agent is doing, as the avatar's corner dot shows it. */
+export type AgentState = 'running' | 'waiting' | 'done' | 'failed';
+/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */
+export declare function agentInitials(name: string): string;
+/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */
+export declare function AgentAvatar({ name, seed, state, size }: {
+  name: string;
+  seed?: string;
+  state?: AgentState;
+  size?: 'sm' | 'md';
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=AgentAvatar.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAvatar.d.mts","names":[],"sources":["../../src/components/AgentAvatar.tsx"],"mappings":";;YAQY;;wBAGI,cAAc;;wBA6Bd,cACd,MACA,MACA,OACA;EAEA;EACA;EACA,QAAQ;EACR;oBACD,IAAA"}

package/dist/components/AgentAvatar.mjs

@@ -0,0 +1,87 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { Dot } from "./Dot.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/AgentAvatar.tsx
+/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */
+function agentInitials(name) {
+	return name.split(/[-_.\s]+/u).filter(Boolean).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+}
+const TINTS = [
+	"green",
+	"teal",
+	"blue",
+	"cyan",
+	"yellow",
+	"violet"
+];
+function tintFor(seed) {
+	let hash = 0;
+	for (const char of seed) hash = (hash * 31 + char.charCodeAt(0)) % 997;
+	return TINTS[hash % TINTS.length] ?? "green";
+}
+const RING = 2;
+const STATE_DOT = {
+	running: "green",
+	waiting: "yellow",
+	done: "neutral",
+	failed: "red"
+};
+/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */
+function AgentAvatar({ name, seed = name, state, size = "md" }) {
+	return /* @__PURE__ */ jsxs(View, {
+		accessible: true,
+		accessibilityRole: "image",
+		accessibilityLabel: state ? `${name}, ${state}` : name,
+		testID: "agent-avatar",
+		style: styles.frame,
+		children: [/* @__PURE__ */ jsx(View, {
+			style: styles.face(tintFor(seed), size === "sm" ? 24 : 32),
+			children: /* @__PURE__ */ jsx(Text, {
+				style: styles.initials,
+				children: agentInitials(name)
+			})
+		}), state ? /* @__PURE__ */ jsx(Dot, {
+			tone: STATE_DOT[state],
+			size: "md",
+			pulse: state === "running",
+			style: styles.dot
+		}) : null]
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	frame: { flexShrink: 0 },
+	face: (tint, side) => ({
+		width: side,
+		height: side,
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: theme.borderRadius.full,
+		backgroundColor: theme.colors[`tint-${tint}`],
+		uni__dependencies: [0]
+	}),
+	initials: {
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	},
+	dot: {
+		position: "absolute",
+		right: -4,
+		bottom: -4,
+		width: theme.spacing(2) + 4,
+		height: theme.spacing(2) + 4,
+		borderWidth: RING,
+		borderColor: theme.colors.panel,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { AgentAvatar, agentInitials };
+//# sourceMappingURL=AgentAvatar.mjs.map

package/dist/components/AgentAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAvatar.mjs","names":["DotTone","StyleSheet","fontOf","Dot","AgentState","agentInitials","name","split","filter","Boolean","slice","map","part","charAt","toUpperCase","join","TINTS","const","Tint","tintFor","seed","hash","char","charCodeAt","length","RING","STATE_DOT","Readonly","Record","running","waiting","done","failed","AgentAvatar","state","size","styles","frame","face","initials","dot","create","theme","flexShrink","tint","side","width","height","alignItems","justifyContent","borderRadius","full","backgroundColor","colors","uni__dependencies","fontFamily","sans","fontSize","sm","lineHeight","color","hi","position","right","bottom","spacing","borderWidth","borderColor","panel"],"sources":["../../src/components/AgentAvatar.tsx"],"sourcesContent":["import type { DotTone } from '@agimon-ai/po-web-components/nativeTheme';\nimport { Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { Dot } from './Dot';\n\n/** How an agent is doing, as the avatar's corner dot shows it. */\nexport type AgentState = 'running' | 'waiting' | 'done' | 'failed';\n\n/** One letter for a first name, two for a hyphenated agent name (`po-developer` is PD). */\nexport function agentInitials(name: string): string {\n  return name\n    .split(/[-_.\\s]+/u)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((part) => part.charAt(0).toUpperCase())\n    .join('');\n}\n\n// ponytail: mirrors po-web-components AgentAvatar's tint hash; keep the two in step so a seed reads the same tint.\nconst TINTS = ['green', 'teal', 'blue', 'cyan', 'yellow', 'violet'] as const;\ntype Tint = (typeof TINTS)[number];\n\nfunction tintFor(seed: string): Tint {\n  let hash = 0;\n  for (const char of seed) hash = (hash * 31 + char.charCodeAt(0)) % 997;\n  return TINTS[hash % TINTS.length] ?? 'green';\n}\n\nconst RING = 2;\n\nconst STATE_DOT: Readonly<Record<AgentState, DotTone>> = {\n  running: 'green',\n  waiting: 'yellow',\n  done: 'neutral',\n  failed: 'red',\n};\n\n/** An agent's face: its initials on a tint fixed by `seed`, with its state as a corner dot. */\nexport function AgentAvatar({\n  name,\n  seed = name,\n  state,\n  size = 'md',\n}: {\n  name: string;\n  seed?: string;\n  state?: AgentState;\n  size?: 'sm' | 'md';\n}) {\n  return (\n    <View\n      accessible\n      accessibilityRole=\"image\"\n      accessibilityLabel={state ? `${name}, ${state}` : name}\n      testID=\"agent-avatar\"\n      style={styles.frame}\n    >\n      <View style={styles.face(tintFor(seed), size === 'sm' ? 24 : 32)}>\n        <Text style={styles.initials}>{agentInitials(name)}</Text>\n      </View>\n      {state ? <Dot tone={STATE_DOT[state]} size=\"md\" pulse={state === 'running'} style={styles.dot} /> : null}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  frame: { flexShrink: 0 },\n  // `size-6` and `size-8`.\n  face: (tint: Tint, side: number) => ({\n    width: side,\n    height: side,\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n    backgroundColor: theme.colors[`tint-${tint}`],\n  }),\n  initials: {\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n    color: theme.colors.hi,\n  },\n  // `-right-0.5 -bottom-0.5 ring-2 ring-po-panel`: a ring sits outside the dot, a border inside, so the box grows by it.\n  dot: {\n    position: 'absolute',\n    right: -2 - RING,\n    bottom: -2 - RING,\n    width: theme.spacing(2) + 2 * RING,\n    height: theme.spacing(2) + 2 * RING,\n    borderWidth: RING,\n    borderColor: theme.colors.panel,\n  },\n}));\n"],"mappings":";;;;;;;;;AAWA,SAAgBK,cAAcC,MAAsB;CAClD,OAAOA,KACJC,MAAM,WAAW,CAAC,CAClBC,OAAOC,OAAO,CAAC,CACfC,MAAM,GAAG,CAAC,CAAC,CACXC,KAAKC,SAASA,KAAKC,OAAO,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAC3CC,KAAK,EAAE;AACZ;AAGA,MAAMC,QAAQ;CAAC;CAAS;CAAQ;CAAQ;CAAQ;CAAU;AAAQ;AAGlE,SAASG,QAAQC,MAAoB;CACnC,IAAIC,OAAO;CACX,KAAK,MAAMC,QAAQF,MAAMC,QAAQA,OAAO,KAAKC,KAAKC,WAAW,CAAC,KAAK;CACnE,OAAOP,MAAMK,OAAOL,MAAMQ,WAAW;AACvC;AAEA,MAAMC,OAAO;AAEb,MAAMC,YAAmD;CACvDG,SAAS;CACTC,SAAS;CACTC,MAAM;CACNC,QAAQ;AACV;;AAGA,SAAgBC,YAAY,EAC1B3B,MACAc,OAAOd,MACP4B,OACAC,OAAO,QAMN;CACD,OACE,qBAAC,MAAD;EACE;EACA,mBAAkB;EAClB,oBAAoBD,QAAQ,GAAG5B,KAAI,IAAK4B,UAAU5B;EAClD,QAAO;EACP,OAAO8B,OAAOC;YALhB,CAOE,oBAAC,MAAD;GAAM,OAAOD,OAAOE,KAAKnB,QAAQC,IAAI,GAAGe,SAAS,OAAO,KAAK,EAAE;aAC7D,oBAAC,MAAD;IAAM,OAAOC,OAAOG;cAAWlC,cAAcC,IAAI;GAAQ;EACrD,IACL4B,QAAQ,oBAAC,KAAD;GAAK,MAAMR,UAAUQ;GAAQ,MAAK;GAAK,OAAOA,UAAU;GAAW,OAAOE,OAAOI;EAAI,KAAM,IAChG;;AAEV;AAEA,MAAMJ,SAASnC,WAAWwC,QAAQC,WAAW;CAC3CL,OAAO,EAAEM,YAAY,EAAE;CAEvBL,OAAOM,MAAYC,UAAkB;EACnCC,OAAOD;EACPE,QAAQF;EACRG,YAAY;EACZC,gBAAgB;EAChBC,cAAcR,MAAMQ,aAAaC;EACjCC,iBAAiBV,MAAMW,OAAO,QAAQT;EAAOU,mBAAA,CAAA,CAAA;CAC/C;CACAf,UAAU;EACRgB,YAAYrD,OAAOwC,MAAMa,WAAWC,IAAI;EACxCC,UAAUf,MAAMe,SAASC;EACzBC,YAAYjB,MAAMiB,WAAWD;EAC7BE,OAAOlB,MAAMW,OAAOQ;EAAEP,mBAAA,CAAA,CAAA;CACxB;CAEAd,KAAK;EACHsB,UAAU;EACVC,OAAO;EACPC,QAAQ;EACRlB,OAAOJ,MAAMuB,QAAQ,CAAC,IAAI;EAC1BlB,QAAQL,MAAMuB,QAAQ,CAAC,IAAI;EAC3BC,aAAazC;EACb0C,aAAazB,MAAMW,OAAOe;EAAKd,mBAAA,CAAA,CAAA;CACjC;AACF,EAAE"}

package/dist/components/Badge.d.mts

@@ -1,5 +1,5 @@
-import { ChipTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ChipTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { ReactNode } from "react";
 //#region src/components/Badge.d.ts
 export type BadgeTone = ChipTone;

package/dist/components/Badge.mjs

@@ -2,12 +2,12 @@ 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 { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Badge.tsx
-/** `border-doom-<accent>/40`. */
+/** `border-po-<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 }) {

package/dist/components/Badge.mjs.map

@@ -1 +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"}
+{"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-po-<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.mjs

@@ -3,8 +3,8 @@ 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 { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
 
@@ -14,7 +14,7 @@ const MIN_TAP_TARGET = 44;
 const DISABLED_OPACITY = .4;
 const PRESSED_FILL_OPACITY = .85;
 const RIPPLE_ALPHA_PERCENT = 20;
-/** `hover:border-doom-green/50`. */
+/** `hover:border-po-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 = {

package/dist/components/Button.mjs.map

@@ -1 +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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"}
+{"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-po-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.map

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

package/dist/components/CodeBlock.mjs

@@ -1,30 +1,13 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { Button } from "./Button.mjs";
-import { CheckIcon, CopyIcon } from "../icons/icons.mjs";
+import { CopyButton } from "./CopyButton.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
-import { useEffect, useState } from "react";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
-import { setStringAsync } from "expo-clipboard";
 
 //#region src/components/CodeBlock.tsx
-/** How long the control stays acknowledged before returning to its icon. */
-const FEEDBACK_MS = 1500;
-const LABELS = {
-	idle: "copy",
-	copied: "copied",
-	failed: "copying failed"
-};
 function CodeBlock({ text, language }) {
-	const [state, setState] = useState("idle");
-	useEffect(() => {
-		if (state === "idle") return void 0;
-		const timer = setTimeout(() => setState("idle"), FEEDBACK_MS);
-		return () => clearTimeout(timer);
-	}, [state]);
-	const label = LABELS[state];
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.block,
 		accessibilityLabel: language === void 0 ? void 0 : `${language} code`,
@@ -37,21 +20,9 @@ function CodeBlock({ text, language }) {
 				style: styles.code,
 				children: text
 			})
-		}), /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "icon",
-			accessibilityLabel: label,
-			onPress: () => {
-				setStringAsync(text).then((saved) => setState(saved ? "copied" : "failed"), () => setState("failed"));
-			},
-			style: styles.copy,
-			children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {
-				size: 12,
-				color: "green"
-			}) : /* @__PURE__ */ jsx(CopyIcon, {
-				size: 12,
-				color: "faint"
-			})
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			text,
+			style: styles.copy
 		})]
 	});
 }

package/dist/components/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":["setStringAsync","useEffect","useState","StyleSheet","CheckIcon","CopyIcon","fontOf","Button","FEEDBACK_MS","CopyState","LABELS","Readonly","Record","idle","copied","failed","CodeBlockProps","text","language","CodeBlock","state","setState","undefined","timer","setTimeout","clearTimeout","label","styles","block","scroll","code","then","saved","copy","create","theme","borderRadius","DEFAULT","borderWidth","borderColor","colors","border","backgroundColor","deep","uni__dependencies","padding","spacing","paddingRight","color","fontFamily","mono","fontSize","sm","lineHeight","lineHeightRelaxed","position","top","right"],"sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import { setStringAsync } from 'expo-clipboard';\nimport { useEffect, useState } from 'react';\nimport { ScrollView, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { CheckIcon, CopyIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { Button } from './Button';\n\n/*\n * A fenced code block: the source in selectable mono type that scrolls\n * sideways rather than wrapping, and a copy button that says when it worked.\n *\n * ponytail: no syntax colouring and no mermaid diagrams yet; a mermaid fence\n * shows its source, which is still the whole content.\n */\n\n/** How long the control stays acknowledged before returning to its icon. */\nconst FEEDBACK_MS = 1500;\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\nconst LABELS: Readonly<Record<CopyState, string>> = {\n  idle: 'copy',\n  copied: 'copied',\n  failed: 'copying failed',\n};\n\nexport interface CodeBlockProps {\n  /** The block's source, without the fence lines. */\n  text: string;\n  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */\n  language?: string;\n}\n\nexport function CodeBlock({ text, language }: CodeBlockProps) {\n  const [state, setState] = useState<CopyState>('idle');\n\n  useEffect(() => {\n    if (state === 'idle') return undefined;\n    const timer = setTimeout(() => setState('idle'), FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  const label = LABELS[state];\n  return (\n    <View style={styles.block} accessibilityLabel={language === undefined ? undefined : `${language} code`}>\n      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>\n        <Text selectable style={styles.code}>\n          {text}\n        </Text>\n      </ScrollView>\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        accessibilityLabel={label}\n        onPress={() => {\n          setStringAsync(text).then(\n            (saved) => setState(saved ? 'copied' : 'failed'),\n            () => setState('failed'),\n          );\n        }}\n        style={styles.copy}\n      >\n        {state === 'copied' ? <CheckIcon size={12} color=\"green\" /> : <CopyIcon size={12} color=\"faint\" />}\n      </Button>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  block: {\n    borderRadius: theme.borderRadius.DEFAULT,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.deep,\n  },\n  // The right padding keeps the first line clear of the copy button.\n  scroll: { padding: theme.spacing(2.5), paddingRight: theme.spacing(9) },\n  code: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  copy: { position: 'absolute', top: theme.spacing(1.5), right: theme.spacing(1.5) },\n}));\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMQ,cAAc;AAIpB,MAAME,SAA8C;CAClDG,MAAM;CACNC,QAAQ;CACRC,QAAQ;AACV;AASA,SAAgBI,UAAU,EAAEF,MAAMC,YAA4B;CAC5D,MAAM,CAACE,OAAOC,YAAYnB,SAAoB,MAAM;CAEpDD,gBAAgB;EACd,IAAImB,UAAU,QAAQ,OAAOE;EAC7B,MAAMC,QAAQC,iBAAiBH,SAAS,MAAM,GAAGb,WAAW;EAC5D,aAAaiB,aAAaF,KAAK;CACjC,GAAG,CAACH,KAAK,CAAC;CAEV,MAAMM,QAAQhB,OAAOU;CACrB,OACE,qBAAC,MAAD;EAAM,OAAOO,OAAOC;EAAO,oBAAoBV,aAAaI,SAAYA,SAAY,GAAGJ,SAAQ;YAA/F,CACE,oBAAC,YAAD;GAAY;GAAW,gCAAgC;GAAO,uBAAuBS,OAAOE;aAC1F,oBAAC,MAAD;IAAM;IAAW,OAAOF,OAAOG;cAC5Bb;GACG;EACI,IACZ,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,oBAAoBS;GACpB,eAAe;IACb1B,eAAeiB,IAAI,CAAC,CAACc,MAClBC,UAAUX,SAASW,QAAQ,WAAW,QAAQ,SACzCX,SAAS,QAAQ,CACzB;GACF;GACA,OAAOM,OAAOM;aAEbb,UAAU,WAAW,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAM;GAAO,KAAM,oBAAC,UAAD;IAAU,MAAM;IAAI,OAAM;GAAO;EACzF,EACJ;;AAEV;AAEA,MAAMO,SAASxB,WAAW+B,QAAQC,WAAW;CAC3CP,OAAO;EACLQ,cAAcD,MAAMC,aAAaC;EACjCC,aAAa;EACbC,aAAaJ,MAAMK,OAAOC;EAC1BC,iBAAiBP,MAAMK,OAAOG;EAAIC,mBAAA,CAAA,CAAA;CACpC;CAEAf,QAAQ;EAAEgB,SAASV,MAAMW,QAAQ,GAAG;EAAGC,cAAcZ,MAAMW,QAAQ,CAAC;EAACF,mBAAA,CAAA,CAAA;CAAC;CACtEd,MAAM;EACJkB,OAAOb,MAAMK,OAAOvB;EACpBgC,YAAY3C,OAAO6B,MAAMc,WAAWC,IAAI;EACxCC,UAAUhB,MAAMgB,SAASC;EACzBC,YAAYlB,MAAMmB,kBAAkBF;EAAER,mBAAA,CAAA,CAAA;CACxC;CACAX,MAAM;EAAEsB,UAAU;EAAYC,KAAKrB,MAAMW,QAAQ,GAAG;EAAGW,OAAOtB,MAAMW,QAAQ,GAAG;EAACF,mBAAA,CAAA,CAAA;CAAC;AACnF,EAAE"}
+{"version":3,"file":"CodeBlock.mjs","names":["StyleSheet","fontOf","CopyButton","CodeBlockProps","text","language","CodeBlock","styles","block","undefined","scroll","code","copy","create","theme","borderRadius","DEFAULT","borderWidth","borderColor","colors","border","backgroundColor","deep","uni__dependencies","padding","spacing","paddingRight","color","fontFamily","mono","fontSize","sm","lineHeight","lineHeightRelaxed","position","top","right"],"sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import { ScrollView, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { CopyButton } from './CopyButton';\n\n/*\n * A fenced code block: the source in selectable mono type that scrolls\n * sideways rather than wrapping, and a copy button that says when it worked.\n *\n * ponytail: no syntax colouring and no mermaid diagrams yet; a mermaid fence\n * shows its source, which is still the whole content.\n */\n\nexport interface CodeBlockProps {\n  /** The block's source, without the fence lines. */\n  text: string;\n  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */\n  language?: string;\n}\n\nexport function CodeBlock({ text, language }: CodeBlockProps) {\n  return (\n    <View style={styles.block} accessibilityLabel={language === undefined ? undefined : `${language} code`}>\n      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>\n        <Text selectable style={styles.code}>\n          {text}\n        </Text>\n      </ScrollView>\n      <CopyButton text={text} style={styles.copy} />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  block: {\n    borderRadius: theme.borderRadius.DEFAULT,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.deep,\n  },\n  // The right padding keeps the first line clear of the copy button.\n  scroll: { padding: theme.spacing(2.5), paddingRight: theme.spacing(9) },\n  code: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  copy: { position: 'absolute', top: theme.spacing(1.5), right: theme.spacing(1.5) },\n}));\n"],"mappings":";;;;;;;;;AAqBA,SAAgBM,UAAU,EAAEF,MAAMC,YAA4B;CAC5D,OACE,qBAAC,MAAD;EAAM,OAAOE,OAAOC;EAAO,oBAAoBH,aAAaI,SAAYA,SAAY,GAAGJ,SAAQ;YAA/F,CACE,oBAAC,YAAD;GAAY;GAAW,gCAAgC;GAAO,uBAAuBE,OAAOG;aAC1F,oBAAC,MAAD;IAAM;IAAW,OAAOH,OAAOI;cAC5BP;GACG;EACI,IACZ,oBAAC,YAAD;GAAkBA;GAAM,OAAOG,OAAOK;EAAK,EACvC;;AAEV;AAEA,MAAML,SAASP,WAAWa,QAAQC,WAAW;CAC3CN,OAAO;EACLO,cAAcD,MAAMC,aAAaC;EACjCC,aAAa;EACbC,aAAaJ,MAAMK,OAAOC;EAC1BC,iBAAiBP,MAAMK,OAAOG;EAAIC,mBAAA,CAAA,CAAA;CACpC;CAEAb,QAAQ;EAAEc,SAASV,MAAMW,QAAQ,GAAG;EAAGC,cAAcZ,MAAMW,QAAQ,CAAC;EAACF,mBAAA,CAAA,CAAA;CAAC;CACtEZ,MAAM;EACJgB,OAAOb,MAAMK,OAAOf;EACpBwB,YAAY3B,OAAOa,MAAMc,WAAWC,IAAI;EACxCC,UAAUhB,MAAMgB,SAASC;EACzBC,YAAYlB,MAAMmB,kBAAkBF;EAAER,mBAAA,CAAA,CAAA;CACxC;CACAX,MAAM;EAAEsB,UAAU;EAAYC,KAAKrB,MAAMW,QAAQ,GAAG;EAAGW,OAAOtB,MAAMW,QAAQ,GAAG;EAACF,mBAAA,CAAA,CAAA;CAAC;AACnF,EAAE"}

package/dist/components/CopyButton.d.mts

@@ -0,0 +1,13 @@
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/CopyButton.d.ts
+export interface CopyButtonProps {
+  /** The text the press puts on the clipboard. */
+  text: string;
+  /** What is copied, announced before the state, such as `path`. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** A quiet icon button that copies text and says, briefly, whether it worked. */
+export declare function CopyButton({ text, label, style }: CopyButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CopyButton.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.mts","names":[],"sources":["../../src/components/CopyButton.tsx"],"mappings":";;iBAkBiB;;EAEf;;EAEA;EACA,QAAQ,UAAU;;;wBAIJ,aAAa,MAAM,OAAO,SAAS,kCAAe,IAAA"}

package/dist/components/CopyButton.mjs

@@ -0,0 +1,43 @@
+import { Button } from "./Button.mjs";
+import { CheckIcon, CopyIcon } from "../icons/icons.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { setStringAsync } from "expo-clipboard";
+
+//#region src/components/CopyButton.tsx
+/** How long the control stays acknowledged before returning to its icon. */
+const FEEDBACK_MS = 1500;
+const LABELS = {
+	idle: "copy",
+	copied: "copied",
+	failed: "copying failed"
+};
+/** A quiet icon button that copies text and says, briefly, whether it worked. */
+function CopyButton({ text, label, style }) {
+	const [state, setState] = useState("idle");
+	useEffect(() => {
+		if (state === "idle") return void 0;
+		const timer = setTimeout(() => setState("idle"), FEEDBACK_MS);
+		return () => clearTimeout(timer);
+	}, [state]);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		accessibilityLabel: label === void 0 ? LABELS[state] : `${LABELS[state]} ${label}`,
+		onPress: () => {
+			setStringAsync(text).then((saved) => setState(saved ? "copied" : "failed"), () => setState("failed"));
+		},
+		style,
+		children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {
+			size: 12,
+			color: "green"
+		}) : /* @__PURE__ */ jsx(CopyIcon, {
+			size: 12,
+			color: "faint"
+		})
+	});
+}
+
+//#endregion
+export { CopyButton };
+//# sourceMappingURL=CopyButton.mjs.map

package/dist/components/CopyButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.mjs","names":["setStringAsync","useEffect","useState","StyleProp","ViewStyle","CheckIcon","CopyIcon","Button","FEEDBACK_MS","CopyState","LABELS","Readonly","Record","idle","copied","failed","CopyButtonProps","text","label","style","CopyButton","state","setState","undefined","timer","setTimeout","clearTimeout","then","saved"],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { setStringAsync } from 'expo-clipboard';\nimport { useEffect, useState } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { CheckIcon, CopyIcon } from '../icons/icons';\nimport { Button } from './Button';\n\n/** How long the control stays acknowledged before returning to its icon. */\nconst FEEDBACK_MS = 1500;\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\nconst LABELS: Readonly<Record<CopyState, string>> = {\n  idle: 'copy',\n  copied: 'copied',\n  failed: 'copying failed',\n};\n\nexport interface CopyButtonProps {\n  /** The text the press puts on the clipboard. */\n  text: string;\n  /** What is copied, announced before the state, such as `path`. */\n  label?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** A quiet icon button that copies text and says, briefly, whether it worked. */\nexport function CopyButton({ text, label, style }: CopyButtonProps) {\n  const [state, setState] = useState<CopyState>('idle');\n\n  useEffect(() => {\n    if (state === 'idle') return undefined;\n    const timer = setTimeout(() => setState('idle'), FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      accessibilityLabel={label === undefined ? LABELS[state] : `${LABELS[state]} ${label}`}\n      onPress={() => {\n        setStringAsync(text).then(\n          (saved) => setState(saved ? 'copied' : 'failed'),\n          () => setState('failed'),\n        );\n      }}\n      style={style}\n    >\n      {state === 'copied' ? <CheckIcon size={12} color=\"green\" /> : <CopyIcon size={12} color=\"faint\" />}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAMQ,cAAc;AAIpB,MAAME,SAA8C;CAClDG,MAAM;CACNC,QAAQ;CACRC,QAAQ;AACV;;AAWA,SAAgBK,WAAW,EAAEH,MAAMC,OAAOC,SAA0B;CAClE,MAAM,CAACE,OAAOC,YAAYpB,SAAoB,MAAM;CAEpDD,gBAAgB;EACd,IAAIoB,UAAU,QAAQ,OAAOE;EAC7B,MAAMC,QAAQC,iBAAiBH,SAAS,MAAM,GAAGd,WAAW;EAC5D,aAAakB,aAAaF,KAAK;CACjC,GAAG,CAACH,KAAK,CAAC;CAEV,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,oBAAoBH,UAAUK,SAAYb,OAAOW,SAAS,GAAGX,OAAOW,OAAM,GAAIH;EAC9E,eAAe;GACblB,eAAeiB,IAAI,CAAC,CAACU,MAClBC,UAAUN,SAASM,QAAQ,WAAW,QAAQ,SACzCN,SAAS,QAAQ,CACzB;EACF;EACOH;YAENE,UAAU,WAAW,oBAAC,WAAD;GAAW,MAAM;GAAI,OAAM;EAAO,KAAM,oBAAC,UAAD;GAAU,MAAM;GAAI,OAAM;EAAO;CACzF;AAEZ"}