@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/components/ToolButton.js

@@ -1,89 +1 @@
-"use strict";
-
-import { StyleSheet, Text, TouchableOpacity } from "react-native";
-import { buoyColors, gameUIColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The shared action button for dev-tool surfaces. Fills the gap where every
- * tool hand-styled its own TouchableOpacity for "Clear", "Apply", "Reset".
- */
-export function ToolButton({
-  label,
-  onPress,
-  variant = "primary",
-  size = "medium",
-  disabled = false,
-  icon,
-  style,
-  testID,
-  accessibilityLabel
-}) {
-  const palette = VARIANTS[variant];
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    accessibilityRole: "button",
-    accessibilityLabel: accessibilityLabel ?? label,
-    testID: testID,
-    onPress: onPress,
-    disabled: disabled,
-    style: [styles.base, size === "small" ? styles.small : styles.medium, {
-      backgroundColor: palette.background,
-      borderColor: palette.border,
-      borderWidth: variant === "ghost" ? 0 : 1
-    }, disabled && styles.disabled, style],
-    children: [icon, /*#__PURE__*/_jsx(Text, {
-      style: [styles.label, size === "small" && styles.labelSmall, {
-        color: palette.text
-      }],
-      children: label
-    })]
-  });
-}
-const VARIANTS = {
-  primary: {
-    background: buoyColors.primary + "22",
-    border: buoyColors.primary + "66",
-    text: buoyColors.primary
-  },
-  danger: {
-    background: gameUIColors.error + "15",
-    border: gameUIColors.error + "60",
-    text: gameUIColors.error
-  },
-  warning: {
-    background: gameUIColors.warning + "15",
-    border: gameUIColors.warning + "60",
-    text: gameUIColors.warning
-  },
-  ghost: {
-    background: "transparent",
-    border: "transparent",
-    text: buoyColors.textSecondary
-  }
-};
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    borderRadius: 8
-  },
-  medium: {
-    paddingVertical: 8,
-    paddingHorizontal: 14
-  },
-  small: {
-    paddingVertical: 5,
-    paddingHorizontal: 10
-  },
-  disabled: {
-    opacity: 0.4
-  },
-  label: {
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  labelSmall: {
-    fontSize: 11
-  }
-});
+"use strict";import{StyleSheet as g,Text as p,TouchableOpacity as u}from"react-native";import{buoyColors as t,gameUIColors as r}from"../gameUI/constants/gameUIColors.js";import{jsx as y,jsxs as x}from"react/jsx-runtime";export function ToolButton({label:a,onPress:s,variant:l="primary",size:n="medium",disabled:i=false,icon:d,style:c,testID:b,accessibilityLabel:m}){const o=f[l];return x(u,{accessibilityRole:"button",accessibilityLabel:m??a,testID:b,onPress:s,disabled:i,style:[e.base,n==="small"?e.small:e.medium,{backgroundColor:o.background,borderColor:o.border,borderWidth:l==="ghost"?0:1},i&&e.disabled,c],children:[d,y(p,{style:[e.label,n==="small"&&e.labelSmall,{color:o.text}],children:a})]})}const f={primary:{background:t.primary+"22",border:t.primary+"66",text:t.primary},danger:{background:r.error+"15",border:r.error+"60",text:r.error},warning:{background:r.warning+"15",border:r.warning+"60",text:r.warning},ghost:{background:"transparent",border:"transparent",text:t.textSecondary}};const e=g.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,borderRadius:8},medium:{paddingVertical:8,paddingHorizontal:14},small:{paddingVertical:5,paddingHorizontal:10},disabled:{opacity:.4},label:{fontSize:12,fontWeight:"600"},labelSmall:{fontSize:11}});

package/lib/module/ui/components/ToolEmptyState.js

@@ -1,149 +1 @@
-"use strict";
-
-/**
- * The one "nothing here" panel, for every tool that shows a list.
- *
- * WHY THIS EXISTS
- *
- * Every capture tool — network, events, highlight-updates, storage, zustand,
- * redux, jotai, console — renders the same panel with the same four causes and
- * different nouns. Written out per tool, that produced four copies of the same
- * layout (each of which had to be re-inset by hand the first time a sentence
- * was longer than "No events yet"), and four independent guesses at the
- * PRECEDENCE between those causes. The guesses disagreed, and the disagreements
- * were bugs:
- *
- *   - A search that matched nothing showed "Enable tracking to start
- *     capturing" — pointing at a toggle that was already on.
- *   - Turning every source chip off showed "Events will appear here as they
- *     occur" — inviting you to go generate events that were already in the
- *     store, behind your own filter.
- *   - Typing into a search box while the store was empty produced no
- *     acknowledgement of the query at all, which reads as a dead search box.
- *
- * So the precedence lives here, once, and each tool supplies only what is
- * genuinely its own: the noun, and what "switched on but waiting" looks like
- * for it (network fishes, events listens, the highlighter stares).
- *
- * SPLIT IN TWO ON PURPOSE
- *
- * `resolveListEmptyState` is a pure function returning `{ otto, title,
- * message }`, and `ToolEmptyState` renders that object. Tools with a cause
- * nobody else has — storage's "no issues found" (which is a PASS, not a
- * failure), zustand's unregistered store — resolve the common cases and
- * substitute their own, or skip the resolver and hand the shell a literal.
- * Adding a mascot to every tool at once is then one edit in this file, which is
- * also what makes the Flutter and Swift ports one component to mirror instead
- * of eight.
- */
-
-import { StyleSheet, Text, View } from "react-native";
-import { Otto } from "../otto/index.js";
-import { night } from "../night/nightTheme.js";
-
-/** What a "nothing here" panel says. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The panel itself: Otto, a heading, a sentence. Nothing else — this only ever
- * renders where the alternative is a blank body, so it has no actions and no
- * decoration to compete with the list it stands in for.
- */
-export function ToolEmptyState({
-  otto,
-  title,
-  message,
-  testID,
-  style
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(Otto, {
-      state: otto,
-      pixelSize: 2
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.title,
-      testID: testID ? `${testID}-title` : undefined,
-      numberOfLines: 2,
-      children: title
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.message,
-      testID: testID ? `${testID}-text` : undefined,
-      children: message
-    })]
-  });
-}
-/**
- * Which "nothing here" this is, in the order the facts answer the question.
- *
- * A typed query first (see `search`), then the user's filters, then the
- * capture switch, then the honest "nothing yet".
- */
-export function resolveListEmptyState(facts) {
-  const {
-    subject,
-    verb = "captured",
-    search,
-    total = 0,
-    capturing,
-    waiting,
-    paused,
-    blocked
-  } = facts;
-  const term = (search ?? "").trim();
-  if (term) {
-    return {
-      otto: "sad",
-      // The query goes in the HEADING because checking what you typed is the
-      // first thing you do; the body names whichever blocker is in the way.
-      title: `No results for “${term}”`,
-      message: blocked ?? (total > 0 ? `None of the ${total} ${verb} ${subject} match. Clear the search to see them.` : capturing === false ? `Nothing is ${verb} to search — capture is off. Turn it on to start.` : `Nothing has been ${verb} yet, so there is nothing to match.`)
-    };
-  }
-  if (blocked) {
-    return {
-      otto: "filtering",
-      title: "Filtered Out",
-      message: blocked
-    };
-  }
-  if (total > 0) {
-    return {
-      otto: "filtering",
-      title: "Filtered Out",
-      message: `${total} ${verb} ${subject} ${total === 1 ? "is" : "are"} hidden by the active filters.`
-    };
-  }
-  if (capturing === false) {
-    return {
-      otto: paused?.otto ?? "paused",
-      title: paused?.title ?? "Not capturing",
-      message: paused?.message ?? "Capture is off. Turn it on to start."
-    };
-  }
-  return waiting;
-}
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    paddingVertical: 40,
-    // The generated sentences are full sentences. Every tool that hand-rolled
-    // this panel shipped without an inset and had it run to both edges of the
-    // sheet the first time the copy grew past a few words.
-    paddingHorizontal: 24
-  },
-  title: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6,
-    textAlign: "center"
-  },
-  message: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 17
-  }
-});
+"use strict";import{StyleSheet as h,Text as m,View as d}from"react-native";import{Otto as p}from"../otto/index.js";import{night as g}from"../night/nightTheme.js";import{jsx as a,jsxs as x}from"react/jsx-runtime";export function ToolEmptyState({otto:o,title:r,message:i,testID:t,style:e}){return x(d,{style:[l.container,e],testID:t,children:[a(p,{state:o,pixelSize:2}),a(m,{style:l.title,testID:t?`${t}-title`:void 0,numberOfLines:2,children:r}),a(m,{style:l.message,testID:t?`${t}-text`:void 0,children:i})]})}export function resolveListEmptyState(o){const{subject:r,verb:i="captured",search:t,total:e=0,capturing:c,waiting:u,paused:n,blocked:s}=o;const f=(t??"").trim();if(f){return{otto:"sad",title:`No results for \u201C${f}\u201D`,message:s??(e>0?`None of the ${e} ${i} ${r} match. Clear the search to see them.`:c===false?`Nothing is ${i} to search \u2014 capture is off. Turn it on to start.`:`Nothing has been ${i} yet, so there is nothing to match.`)}}if(s){return{otto:"filtering",title:"Filtered Out",message:s}}if(e>0){return{otto:"filtering",title:"Filtered Out",message:`${e} ${i} ${r} ${e===1?"is":"are"} hidden by the active filters.`}}if(c===false){return{otto:n?.otto??"paused",title:n?.title??"Not capturing",message:n?.message??"Capture is off. Turn it on to start."}}return u}const l=h.create({container:{alignItems:"center",paddingVertical:40,paddingHorizontal:24},title:{color:g.color.text,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6,textAlign:"center"},message:{color:g.color.textTertiary,fontSize:12,textAlign:"center",lineHeight:17}});

package/lib/module/ui/components/ToolFooter.js

@@ -1,197 +1 @@
-"use strict";
-
-/**
- * ToolFooter — the night glass bar pinned to the bottom of a tool: dark
- * backing over the star field, a hairline on top, safe-area padding when
- * docked as a sheet, rounded corners when floating.
- *
- * `EventStepperFooter` draws this bar for the Previous/Next case; the
- * images and react-query tools each re-drew it for their action bars with
- * a comment saying "matches EventStepperFooter". This is that bar as a
- * container, plus `FooterButton` — the mono uppercase plate button those
- * action bars are made of — and the caption/message lines above the row.
- */
-
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { night } from "../night/nightTheme.js";
-import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ToolFooter({
-  children,
-  safeArea = true,
-  paddingBottom = 12,
-  floating = false,
-  absolute = false,
-  gap = 8,
-  style,
-  testID
-}) {
-  const insets = useSafeAreaInsets();
-  const bottom = typeof safeArea === "number" ? safeArea + insets.bottom : safeArea ? paddingBottom + insets.bottom : paddingBottom;
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.footer, floating && styles.footerFloating, absolute && styles.footerAbsolute, {
-      paddingBottom: bottom,
-      gap
-    }, style],
-    testID: testID,
-    children: children
-  });
-}
-
-/** A row of footer buttons. */
-export function FooterRow({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.row, style],
-    children: children
-  });
-}
-
-/** Tracking caption above a row ("MASS ACTIONS — every image on screen"). */
-export function FooterCaption({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.caption, style],
-    numberOfLines: 1,
-    children: children
-  });
-}
-
-/** Mono feedback line ("Restored 3 images"). */
-export function FooterMessage({
-  children,
-  tone = "info",
-  style
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.message, tone === "muted" && styles.messageMuted, style],
-    numberOfLines: 1,
-    children: children
-  });
-}
-export function FooterButton({
-  label,
-  onPress,
-  accent = false,
-  active = false,
-  disabled = false,
-  icon,
-  flex = true,
-  size = "sm",
-  testID,
-  accessibilityLabel,
-  style
-}) {
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    onPress: onPress,
-    disabled: disabled,
-    activeOpacity: 0.7,
-    accessibilityRole: "button",
-    accessibilityLabel: accessibilityLabel ?? label,
-    accessibilityState: {
-      disabled,
-      selected: active
-    },
-    testID: testID,
-    style: [styles.button, flex ? styles.buttonFlex : styles.buttonFixed, size === "md" && styles.buttonMd, active && styles.buttonActive, disabled && styles.disabled, style],
-    children: [icon, /*#__PURE__*/_jsx(Text, {
-      style: [styles.buttonText, size === "md" && styles.buttonTextMd, accent && !disabled && styles.buttonTextAccent, active && styles.buttonTextActive, disabled && styles.buttonTextDisabled],
-      children: label
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  footer: {
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    // Dark glass over the star field — the same bar EventStepperFooter draws.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderTopWidth: 1,
-    borderTopColor: night.color.border
-  },
-  footerFloating: {
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  footerAbsolute: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  caption: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.8
-  },
-  message: {
-    color: night.color.info,
-    fontSize: 10,
-    fontFamily: monoFont
-  },
-  messageMuted: {
-    color: night.color.textTertiary,
-    fontFamily: undefined
-  },
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    // No horizontal padding: six of these share one row on a phone, and the
-    // mono uppercase label needs every point it can get before it wraps.
-    paddingHorizontal: 0,
-    borderRadius: 6,
-    backgroundColor: night.color.button,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: night.color.border
-  },
-  buttonFlex: {
-    flex: 1
-  },
-  buttonFixed: {
-    paddingHorizontal: 10
-  },
-  buttonMd: {
-    paddingVertical: 8
-  },
-  buttonActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  buttonText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    textTransform: "uppercase"
-  },
-  buttonTextMd: {
-    fontSize: 11,
-    color: night.color.text
-  },
-  buttonTextAccent: {
-    color: night.color.warning
-  },
-  buttonTextActive: {
-    color: night.color.accent
-  },
-  buttonTextDisabled: {
-    color: night.color.textTertiary
-  },
-  disabled: {
-    opacity: 0.4
-  }
-});
+"use strict";import{StyleSheet as m,Text as f,TouchableOpacity as y,View as x}from"react-native";import{night as o}from"../night/nightTheme.js";import{useSafeAreaInsets as T}from"../../hooks/useSafeAreaInsets";import{monoFont as p}from"../fonts.js";import{jsx as l,jsxs as h}from"react/jsx-runtime";export function ToolFooter({children:r,safeArea:e=true,paddingBottom:i=12,floating:c=false,absolute:n=false,gap:u=8,style:d,testID:s}){const a=T();const b=typeof e==="number"?e+a.bottom:e?i+a.bottom:i;return l(x,{style:[t.footer,c&&t.footerFloating,n&&t.footerAbsolute,{paddingBottom:b,gap:u},d],testID:s,children:r})}export function FooterRow({children:r,style:e}){return l(x,{style:[t.row,e],children:r})}export function FooterCaption({children:r,style:e}){return l(f,{style:[t.caption,e],numberOfLines:1,children:r})}export function FooterMessage({children:r,tone:e="info",style:i}){return l(f,{style:[t.message,e==="muted"&&t.messageMuted,i],numberOfLines:1,children:r})}export function FooterButton({label:r,onPress:e,accent:i=false,active:c=false,disabled:n=false,icon:u,flex:d=true,size:s="sm",testID:a,accessibilityLabel:b,style:g}){return h(y,{onPress:e,disabled:n,activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:b??r,accessibilityState:{disabled:n,selected:c},testID:a,style:[t.button,d?t.buttonFlex:t.buttonFixed,s==="md"&&t.buttonMd,c&&t.buttonActive,n&&t.disabled,g],children:[u,l(f,{style:[t.buttonText,s==="md"&&t.buttonTextMd,i&&!n&&t.buttonTextAccent,c&&t.buttonTextActive,n&&t.buttonTextDisabled],children:r})]})}const t=m.create({footer:{paddingHorizontal:12,paddingTop:10,backgroundColor:"rgba(5, 5, 5, 0.92)",borderTopWidth:1,borderTopColor:o.color.border},footerFloating:{borderBottomLeftRadius:14,borderBottomRightRadius:14},footerAbsolute:{position:"absolute",left:0,right:0,bottom:0},row:{flexDirection:"row",alignItems:"center",gap:6},caption:{color:o.color.textTertiary,fontSize:9,fontWeight:"700",letterSpacing:.8},message:{color:o.color.info,fontSize:10,fontFamily:p},messageMuted:{color:o.color.textTertiary,fontFamily:void 0},button:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:8,paddingHorizontal:0,borderRadius:6,backgroundColor:o.color.button,borderWidth:m.hairlineWidth,borderColor:o.color.border},buttonFlex:{flex:1},buttonFixed:{paddingHorizontal:10},buttonMd:{paddingVertical:8},buttonActive:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong},buttonText:{fontSize:10,fontWeight:"600",color:o.color.textSecondary,fontFamily:p,textTransform:"uppercase"},buttonTextMd:{fontSize:11,color:o.color.text},buttonTextAccent:{color:o.color.warning},buttonTextActive:{color:o.color.accent},buttonTextDisabled:{color:o.color.textTertiary},disabled:{opacity:.4}});

package/lib/module/ui/components/ValueTypeBadge.js

@@ -1,143 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { CheckCircle, XCircle } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { night } from "../night/nightTheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ValueTypeBadge({
-  type,
-  value,
-  size = "small",
-  showIcon = false
-}) {
-  const isSmall = size === "small";
-
-  // Special handling for booleans
-  if (type === "boolean" && value !== undefined) {
-    const isTrue = value === true;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.badge, isTrue ? styles.trueBadge : styles.falseBadge, isSmall && styles.smallBadge],
-      children: [showIcon && (isTrue ? /*#__PURE__*/_jsx(CheckCircle, {
-        size: 10,
-        color: buoyColors.success
-      }) : /*#__PURE__*/_jsx(XCircle, {
-        size: 10,
-        color: buoyColors.error
-      })), /*#__PURE__*/_jsx(Text, {
-        style: [styles.badgeText, isTrue ? styles.trueText : styles.falseText, isSmall && styles.smallText],
-        children: isTrue ? "TRUE" : "FALSE"
-      })]
-    });
-  }
-
-  // Handling for other types - use unified teal for primitive types
-  const getTypeStyle = () => {
-    switch (type) {
-      case "string":
-      case "number":
-        return styles.primaryBadge;
-      case "null":
-      case "undefined":
-        return styles.mutedBadge;
-      case "object":
-      case "array":
-        return styles.secondaryBadge;
-      default:
-        return styles.defaultBadge;
-    }
-  };
-  const getTypeText = () => {
-    switch (type) {
-      case "string":
-        return "STRING";
-      case "number":
-        return "NUMBER";
-      case "null":
-        return "NULL";
-      case "undefined":
-        return "UNDEFINED";
-      case "object":
-        return "OBJECT";
-      case "array":
-        return "ARRAY";
-      default:
-        return type.toUpperCase();
-    }
-  };
-  const getTypeColor = () => {
-    switch (type) {
-      case "string":
-      case "number":
-        return buoyColors.primary;
-      case "null":
-      case "undefined":
-        return night.color.textTertiary;
-      case "object":
-      case "array":
-        return night.color.textSecondary;
-      default:
-        return night.color.textTertiary;
-    }
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.badge, getTypeStyle(), isSmall && styles.smallBadge],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.typeText, {
-        color: getTypeColor()
-      }, isSmall && styles.smallText],
-      children: getTypeText()
-    })
-  });
-}
-const styles = StyleSheet.create({
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  smallBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  smallText: {
-    fontSize: 9
-  },
-  typeText: {
-    fontSize: 10,
-    fontWeight: "600",
-    letterSpacing: 0.5
-  },
-  trueBadge: {
-    backgroundColor: buoyColors.success + "1A"
-  },
-  falseBadge: {
-    backgroundColor: buoyColors.error + "1A"
-  },
-  trueText: {
-    color: buoyColors.success
-  },
-  falseText: {
-    color: buoyColors.error
-  },
-  primaryBadge: {
-    backgroundColor: buoyColors.primary + "1A"
-  },
-  secondaryBadge: {
-    backgroundColor: night.color.textSecondary + "1A"
-  },
-  mutedBadge: {
-    backgroundColor: night.color.textTertiary + "1A"
-  },
-  defaultBadge: {
-    backgroundColor: night.color.textTertiary + "1A"
-  }
-});
+"use strict";import{View as c,Text as d,StyleSheet as x}from"react-native";import{CheckCircle as y,XCircle as T}from"../../icons/index.js";import{buoyColors as r}from"../gameUI/constants/gameUIColors.js";import{night as t}from"../night/nightTheme.js";import{jsx as o,jsxs as p}from"react/jsx-runtime";export function ValueTypeBadge({type:a,value:n,size:i="small",showIcon:u=false}){const s=i==="small";if(a==="boolean"&&n!==void 0){const l=n===true;return p(c,{style:[e.badge,l?e.trueBadge:e.falseBadge,s&&e.smallBadge],children:[u&&(l?o(y,{size:10,color:r.success}):o(T,{size:10,color:r.error})),o(d,{style:[e.badgeText,l?e.trueText:e.falseText,s&&e.smallText],children:l?"TRUE":"FALSE"})]})}const g=()=>{switch(a){case"string":case"number":return e.primaryBadge;case"null":case"undefined":return e.mutedBadge;case"object":case"array":return e.secondaryBadge;default:return e.defaultBadge}};const m=()=>{switch(a){case"string":return"STRING";case"number":return"NUMBER";case"null":return"NULL";case"undefined":return"UNDEFINED";case"object":return"OBJECT";case"array":return"ARRAY";default:return a.toUpperCase()}};const f=()=>{switch(a){case"string":case"number":return r.primary;case"null":case"undefined":return t.color.textTertiary;case"object":case"array":return t.color.textSecondary;default:return t.color.textTertiary}};return o(c,{style:[e.badge,g(),s&&e.smallBadge],children:o(d,{style:[e.typeText,{color:f()},s&&e.smallText],children:m()})})}const e=x.create({badge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,flexDirection:"row",alignItems:"center",gap:4},smallBadge:{paddingHorizontal:6,paddingVertical:2},badgeText:{fontSize:10,fontWeight:"700",letterSpacing:.5},smallText:{fontSize:9},typeText:{fontSize:10,fontWeight:"600",letterSpacing:.5},trueBadge:{backgroundColor:r.success+"1A"},falseBadge:{backgroundColor:r.error+"1A"},trueText:{color:r.success},falseText:{color:r.error},primaryBadge:{backgroundColor:r.primary+"1A"},secondaryBadge:{backgroundColor:t.color.textSecondary+"1A"},mutedBadge:{backgroundColor:t.color.textTertiary+"1A"},defaultBadge:{backgroundColor:t.color.textTertiary+"1A"}});