@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/dataViewer/treeActions.js

@@ -1,162 +1 @@
-"use strict";
-
-/**
- * What you can do to the node a data explorer has selected — as data, not UI.
- *
- * Two surfaces render this list and they look nothing alike: the dashboard's
- * footer bar is a row of small chips beside a cursor, the phone's full-screen
- * editor is a grid of thumb-sized tiles. Deriving both from one function is the
- * point — "can this item move up" is a property of the DOCUMENT, and having two
- * components each answer it from their own reading of `root` is how the two
- * surfaces quietly start disagreeing about what's legal.
- *
- * So this module answers it once and hands back a list. The renderers decide
- * what a disabled action looks like and which icon it wears; they never decide
- * whether it applies.
- */
-
-import { getAtPath, isEditableContainer, isRebuildableObject, suggestedNewValue } from "./jsonOps.js";
-
-/** The node a data explorer currently has selected. */
-
-/** The node's type, as a badge shows it. */
-export function typeLabel(value) {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  if (isRebuildableObject(value)) return "object";
-  return typeof value;
-}
-
-/** `a › b › 2` — reads as a location, which a bare index like `2` does not. */
-export function breadcrumb(path) {
-  return path.length === 0 ? "root" : path.join(" › ");
-}
-
-/**
- * Index the list by id, for renderers that lay the six out in their own order.
- *
- * The bar and the dock genuinely disagree here — the bar puts the two move
- * arrows together in the middle because they're icon-only and read as a pair,
- * the dock follows the mockup's reading order. Neither ordering belongs in the
- * capability list, so both look up what they need.
- */
-export function treeActionMap(actions) {
-  const map = {};
-  for (const action of actions) map[action.id] = action;
-  return map;
-}
-
-/** A key that doesn't collide, for "add" on an object. */
-function newKeyFor(container) {
-  if (!("newKey" in container)) return "newKey";
-  let n = 2;
-  while (`newKey ${n}` in container) n++;
-  return `newKey ${n}`;
-}
-
-/**
- * The six things a selection can do, ALWAYS in this order and always all six.
- *
- * Returning the inapplicable ones as `enabled: false` rather than omitting them
- * is deliberate and is why this returns a fixed-length list: a renderer that
- * drops entries reflows every time the selection moves, so stepping from item 1
- * to item 0 would slide the remaining controls sideways under a finger already
- * on its way down. Stable position also means the same action is always in the
- * same place, which is most of what makes a grid of six learnable.
- */
-export function treeActionsFor(root, selection, options = {}) {
-  const path = selection?.path ?? [];
-  const value = selection?.value;
-  const has = selection != null;
-  const isRoot = path.length === 0;
-  const removeLocked = options.rootEntriesLocked === true && path.length === 1;
-  const parent = has && !isRoot ? getAtPath(root, path.slice(0, -1)) : undefined;
-  const parentIsArray = Array.isArray(parent);
-  const index = parentIsArray ? Number(path[path.length - 1]) : -1;
-  const isArray = Array.isArray(value);
-  const isObject = isRebuildableObject(value);
-  const isContainer = isEditableContainer(value);
-  const canEditValue = has && (options.containersEditable === true || !isContainer);
-
-  // One "+" slot whose meaning follows the container type, rather than two
-  // mutually-exclusive buttons of which one is always dead.
-  const addedKey = isObject ? newKeyFor(value) : "";
-  const add = isObject ? {
-    id: "add",
-    label: "Add key",
-    enabled: true,
-    op: {
-      kind: "addKey",
-      path,
-      key: addedKey,
-      value: suggestedNewValue(value)
-    },
-    selectAfter: [...path, addedKey]
-  } : {
-    id: "add",
-    label: "Append",
-    enabled: isArray,
-    op: isArray ? {
-      kind: "append",
-      path,
-      value: suggestedNewValue(value)
-    } : null,
-    selectAfter: isArray ? [...path, String(value.length)] : undefined
-  };
-  return [
-  // A boolean has exactly two states, so there is nothing to ask and nothing
-  // to type — an editor for it would be a screen whose only job is to offer
-  // the value you didn't pick. It flips in place instead.
-  typeof value === "boolean" ? {
-    id: "editValue",
-    label: "Toggle",
-    enabled: true,
-    op: {
-      kind: "replace",
-      path,
-      value: !value
-    }
-  } : {
-    id: "editValue",
-    label: "Edit value",
-    enabled: canEditValue,
-    op: null
-  }, add, {
-    // `duplicate` handles object keys too (it mints a "<key> copy" in place),
-    // so this applies to any entry that has a parent.
-    id: "duplicate",
-    label: "Duplicate",
-    enabled: has && !isRoot,
-    op: has && !isRoot ? {
-      kind: "duplicate",
-      path
-    } : null
-  }, {
-    id: "moveUp",
-    label: "Move up",
-    enabled: has && parentIsArray && index > 0,
-    op: has && parentIsArray && index > 0 ? {
-      kind: "move",
-      path,
-      toIndex: index - 1
-    } : null
-  }, {
-    id: "moveDown",
-    label: "Move down",
-    enabled: has && parentIsArray && index > -1 && index < parent.length - 1,
-    op: has && parentIsArray && index > -1 && index < parent.length - 1 ? {
-      kind: "move",
-      path,
-      toIndex: index + 1
-    } : null
-  }, {
-    id: "remove",
-    label: "Remove",
-    danger: true,
-    enabled: has && !isRoot && !removeLocked,
-    op: has && !isRoot && !removeLocked ? {
-      kind: "remove",
-      path
-    } : null
-  }];
-}
+"use strict";import{getAtPath as v,isEditableContainer as h,isRebuildableObject as y,suggestedNewValue as f}from"./jsonOps.js";export function typeLabel(e){if(e===null)return"null";if(Array.isArray(e))return"array";if(y(e))return"object";return typeof e}export function breadcrumb(e){return e.length===0?"root":e.join(" \u203A ")}export function treeActionMap(e){const t={};for(const a of e)t[a.id]=a;return t}function k(e){if(!("newKey"in e))return"newKey";let t=2;while(`newKey ${t}`in e)t++;return`newKey ${t}`}export function treeActionsFor(e,t,a={}){const n=t?.path??[];const l=t?.value;const r=t!=null;const d=n.length===0;const s=a.rootEntriesLocked===true&&n.length===1;const u=r&&!d?v(e,n.slice(0,-1)):void 0;const i=Array.isArray(u);const o=i?Number(n[n.length-1]):-1;const c=Array.isArray(l);const p=y(l);const A=h(l);const g=r&&(a.containersEditable===true||!A);const b=p?k(l):"";const m=p?{id:"add",label:"Add key",enabled:true,op:{kind:"addKey",path:n,key:b,value:f(l)},selectAfter:[...n,b]}:{id:"add",label:"Append",enabled:c,op:c?{kind:"append",path:n,value:f(l)}:null,selectAfter:c?[...n,String(l.length)]:void 0};return[typeof l==="boolean"?{id:"editValue",label:"Toggle",enabled:true,op:{kind:"replace",path:n,value:!l}}:{id:"editValue",label:"Edit value",enabled:g,op:null},m,{id:"duplicate",label:"Duplicate",enabled:r&&!d,op:r&&!d?{kind:"duplicate",path:n}:null},{id:"moveUp",label:"Move up",enabled:r&&i&&o>0,op:r&&i&&o>0?{kind:"move",path:n,toIndex:o-1}:null},{id:"moveDown",label:"Move down",enabled:r&&i&&o>-1&&o<u.length-1,op:r&&i&&o>-1&&o<u.length-1?{kind:"move",path:n,toIndex:o+1}:null},{id:"remove",label:"Remove",danger:true,enabled:r&&!d&&!s,op:r&&!d&&!s?{kind:"remove",path:n}:null}]}

package/lib/module/dataViewer/useTreeDraft.js

@@ -1,121 +1 @@
-"use strict";
-
-/**
- * A local draft of a tree value, edited in place and written ONCE.
- *
- * Applying each tree op straight to the owning document was the obvious first
- * cut and it behaves badly for two compounding reasons:
- *
- * 1. **Every op is a round trip.** The write lands, the owner emits an event,
- *    a snapshot comes back, and the browser re-reads everything — so a six-tap
- *    reorder is six writes and six full refreshes. The tree rebuilds under the
- *    user mid-gesture.
- * 2. **The highlight and the value fall out of step.** Selection is local and
- *    moves instantly; the value it points at only catches up when the round
- *    trip completes, so for a beat the highlight sits on the old contents.
- *
- * Optimistic updates — the React Query pattern of rendering the expected result
- * and reconciling later — fix (2) but not (1): they still write per change.
- * Buffering fixes both, and it's what every editor that owns a document does
- * (a form's dirty state, an IDE's unsaved buffer, JSON Editor's in-memory doc
- * with an explicit save).
- *
- * The trade is that the buffer can go stale if the owner writes the same
- * document while you're editing. That's the same last-write-wins a text editor
- * has, and `isDirty` at least makes it visible that you're holding unsaved
- * changes.
- *
- * Grew up as the Storage tool's key editor; hoisted here so the Zustand store
- * editor is the same editor rather than a drifting copy. The save contract
- * takes the VALUE — a storage host stringifies it, a zustand host diffs it
- * into a merge partial.
- */
-
-import { useCallback, useState } from "react";
-import { applyJsonOp, selectionPathAfterOp } from "./jsonOps.js";
-/**
- * @param liveValue  the value as its owner currently holds it (already parsed)
- * @param save       persists the draft VALUE; rejecting keeps edit mode open
- */
-export function useTreeDraft(liveValue, save) {
-  const [draft, setDraft] = useState(undefined);
-  const [isEditing, setIsEditing] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState(null);
-  const [selectPath, setSelectPath] = useState();
-  /**
-   * The value as it was when editing began. Compared against for dirtiness
-   * rather than against `liveValue`, which can move underneath us if the owner
-   * writes the same document — that would otherwise flip a clean draft to
-   * dirty.
-   */
-  const [baseline, setBaseline] = useState("");
-  const value = isEditing && draft !== undefined ? draft : liveValue;
-  const isDirty = isEditing && JSON.stringify(draft) !== baseline;
-  const begin = useCallback(() => {
-    setDraft(liveValue);
-    setBaseline(JSON.stringify(liveValue));
-    setSelectPath(undefined);
-    setError(null);
-    setIsEditing(true);
-  }, [liveValue]);
-  const apply = useCallback(op => {
-    // Purely local — this is the whole point. No write, so no event, no
-    // snapshot, no refresh, and the tree re-renders from state synchronously.
-    setDraft(prev => applyJsonOp(prev, op));
-    const next = selectionPathAfterOp(op);
-    if (next !== undefined) setSelectPath(next);
-  }, []);
-  const selectAt = useCallback(path => {
-    setSelectPath(path);
-  }, []);
-
-  /** Leave edit mode entirely. Only correct on the way out (after a write). */
-  const reset = useCallback(() => {
-    setIsEditing(false);
-    setDraft(undefined);
-    setSelectPath(undefined);
-    setError(null);
-  }, []);
-
-  /** Re-seed the draft from what's stored, staying in edit mode. */
-  const discard = useCallback(() => {
-    setDraft(liveValue);
-    setBaseline(JSON.stringify(liveValue));
-    setSelectPath(undefined);
-    setError(null);
-    setIsEditing(true);
-  }, [liveValue]);
-  const commit = useCallback(async () => {
-    if (!isDirty || !save) {
-      reset();
-      return true;
-    }
-    setIsSaving(true);
-    setError(null);
-    try {
-      await save(draft);
-      reset();
-      return true;
-    } catch (e) {
-      // Stay in edit mode so the work isn't lost to a failed write.
-      setError(e instanceof Error ? e.message : String(e));
-      return false;
-    } finally {
-      setIsSaving(false);
-    }
-  }, [draft, isDirty, reset, save]);
-  return {
-    isEditing,
-    value,
-    isDirty,
-    isSaving,
-    error,
-    selectPath,
-    begin,
-    apply,
-    selectAt,
-    commit,
-    discard
-  };
-}
+"use strict";import{useCallback as e,useState as s}from"react";import{applyJsonOp as A,selectionPathAfterOp as I}from"./jsonOps.js";export function useTreeDraft(n,f){const[r,o]=s(void 0);const[a,u]=s(false);const[S,g]=s(false);const[m,i]=s(null);const[O,c]=s();const[h,y]=s("");const E=a&&r!==void 0?r:n;const d=a&&JSON.stringify(r)!==h;const J=e(()=>{o(n);y(JSON.stringify(n));c(void 0);i(null);u(true)},[n]);const b=e(t=>{o(x=>A(x,t));const p=I(t);if(p!==void 0)c(p)},[]);const D=e(t=>{c(t)},[]);const l=e(()=>{u(false);o(void 0);c(void 0);i(null)},[]);const N=e(()=>{o(n);y(JSON.stringify(n));c(void 0);i(null);u(true)},[n]);const P=e(async()=>{if(!d||!f){l();return true}g(true);i(null);try{await f(r);l();return true}catch(t){i(t instanceof Error?t.message:String(t));return false}finally{g(false)}},[r,d,l,f]);return{isEditing:a,value:E,isDirty:d,isSaving:S,error:m,selectPath:O,begin:J,apply:b,selectAt:D,commit:P,discard:N}}

package/lib/module/dataViewer/useTreeEditor.js

@@ -1,101 +1 @@
-"use strict";
-
-/**
- * Everything editing a tree document involves, minus how it looks.
- *
- * The phone and the dashboard run the same editor: one buffered draft, one
- * write on save, a selection the structural actions operate on, a modal for
- * typing a value, and a guard so closing can't silently drop unsaved work.
- * What differs is presentation — thumb-sized tiles under a full screen versus
- * chips docked in a panel — which is a rendering concern and nothing more.
- *
- * Keeping the rules here means the surfaces (and the tools — storage keys and
- * zustand stores run this same hook) can't drift on the things that would
- * actually hurt: whether a boolean opens an editor, whether a failed write
- * closes the editor anyway, what "dirty" means.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { getAtPath } from "./jsonOps.js";
-import { useTreeDraft } from "./useTreeDraft.js";
-export function useTreeEditor({
-  value,
-  save,
-  onClose,
-  confirmDiscard
-}) {
-  const draft = useTreeDraft(value, save);
-  const [selection, setSelection] = useState(null);
-  const [valuePath, setValuePath] = useState(null);
-  const {
-    begin
-  } = draft;
-  useEffect(() => {
-    begin();
-    // Seed the draft ONCE, when the editor opens. `begin` closes over the live
-    // value, whose identity changes every time the list refreshes underneath
-    // us (a parsed JSON string is a new object each pass), so re-running would
-    // reset the draft mid-edit and discard the user's work.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /**
-   * "Change this node". For a boolean that's a flip rather than a modal — the
-   * same rule `treeActionsFor` applies to the action controls, so the gesture
-   * and the button can't mean different things.
-   */
-  const openValueEditor = useCallback(path => {
-    const current = getAtPath(draft.value, path);
-    if (typeof current === "boolean") {
-      draft.apply({
-        kind: "replace",
-        path,
-        value: !current
-      });
-      return;
-    }
-    setValuePath(path);
-  }, [draft]);
-  const applyValue = useCallback(next => {
-    draft.apply({
-      kind: "replace",
-      path: valuePath ?? [],
-      value: next
-    });
-    setValuePath(null);
-  }, [draft, valuePath]);
-
-  // Only leave once the write actually landed — `commit` resolves false and
-  // keeps the draft on screen when the owner refuses it, and closing anyway
-  // would throw the work away while showing an error nobody ever sees.
-  const saveAndClose = useCallback(() => {
-    void draft.commit().then(saved => saved && onClose());
-  }, [draft, onClose]);
-  const requestClose = useCallback(() => {
-    if (!draft.isDirty) {
-      onClose();
-      return;
-    }
-    // The draft is the only copy of this work, so closing over it silently is
-    // the one way this editor can lose something the user can't get back.
-    confirmDiscard({
-      save: saveAndClose,
-      discard: () => {
-        draft.discard();
-        onClose();
-      }
-    });
-  }, [confirmDiscard, draft, onClose, saveAndClose]);
-  return {
-    draft,
-    selection,
-    setSelection,
-    valuePath,
-    openValueEditor,
-    closeValueEditor: () => setValuePath(null),
-    applyValue,
-    openRawEditor: () => setValuePath([]),
-    requestClose,
-    saveAndClose
-  };
-}
+"use strict";import{useCallback as l,useEffect as V,useState as c}from"react";import{getAtPath as b}from"./jsonOps.js";import{useTreeDraft as h}from"./useTreeDraft.js";export function useTreeEditor({value:i,save:p,onClose:r,confirmDiscard:u}){const e=h(i,p);const[d,f]=c(null);const[n,a]=c(null);const{begin:m}=e;V(()=>{m()},[]);const v=l(t=>{const s=b(e.value,t);if(typeof s==="boolean"){e.apply({kind:"replace",path:t,value:!s});return}a(t)},[e]);const y=l(t=>{e.apply({kind:"replace",path:n??[],value:t});a(null)},[e,n]);const o=l(()=>{void e.commit().then(t=>t&&r())},[e,r]);const E=l(()=>{if(!e.isDirty){r();return}u({save:o,discard:()=>{e.discard();r()}})},[u,e,r,o]);return{draft:e,selection:d,setSelection:f,valuePath:n,openValueEditor:v,closeValueEditor:()=>a(null),applyValue:y,openRawEditor:()=>a([]),requestClose:E,saveAndClose:o}}

package/lib/module/env/EnvironmentIndicator.js

@@ -1,125 +1 @@
-"use strict";
-
-import { Pressable, Text, View } from "react-native";
-import { FlaskConical, TestTube2, Bug, Zap, ChevronDown } from "../icons/index.js";
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { normalizeEnvironment } from "../types/types.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getEnvironmentConfig(environment) {
-  const normalized = normalizeEnvironment(environment);
-  switch (normalized) {
-    case "local":
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info,
-        icon: FlaskConical,
-        isLocal: true
-      };
-    case "dev":
-      return {
-        label: "DEV",
-        backgroundColor: gameUIColors.warning,
-        icon: FlaskConical,
-        isLocal: false
-      };
-    case "qa":
-      return {
-        label: "QA",
-        backgroundColor: gameUIColors.optional,
-        icon: Bug,
-        isLocal: false
-      };
-    case "staging":
-      return {
-        label: "STAGING",
-        backgroundColor: gameUIColors.success,
-        icon: Zap,
-        isLocal: false
-      };
-    case "prod":
-      return {
-        label: "PROD",
-        backgroundColor: gameUIColors.error,
-        icon: TestTube2,
-        isLocal: false
-      };
-    default:
-      return {
-        label: "LOCAL",
-        backgroundColor: gameUIColors.info,
-        icon: FlaskConical,
-        isLocal: true
-      };
-  }
-}
-export function EnvironmentIndicator({
-  environment,
-  onLayout,
-  interactive = false,
-  onPress
-}) {
-  const envConfig = getEnvironmentConfig(environment);
-  const content = /*#__PURE__*/_jsxs(View, {
-    onLayout: onLayout,
-    style: {
-      flexDirection: "row",
-      alignItems: "center",
-      paddingVertical: 6,
-      paddingLeft: 8,
-      paddingRight: interactive ? 4 : 8,
-      flexShrink: 0
-    },
-    children: [/*#__PURE__*/_jsx(View, {
-      style: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: envConfig.backgroundColor,
-        marginRight: 6,
-        shadowColor: envConfig.backgroundColor,
-        shadowOffset: {
-          width: 0,
-          height: 0
-        },
-        shadowOpacity: 0.6,
-        shadowRadius: 4,
-        elevation: 2
-      }
-    }), /*#__PURE__*/_jsx(Text, {
-      style: {
-        fontSize: 11,
-        fontWeight: "600",
-        // No fontFamily on purpose: the platform UI font (SF Pro / Roboto)
-        // is what this badge is meant to look like, and it is what the DOM
-        // twin in EnvironmentIndicator.web.tsx has always rendered. This
-        // used to name "Poppins-SemiBold" — a family no app, package or
-        // example in the repo has ever loaded, so it resolved nowhere:
-        // silently the system font on device, and the browser's default
-        // SERIF under react-native-web (the docs demo).
-        color: gameUIColors.primaryLight,
-        letterSpacing: 0.5
-      },
-      children: envConfig.label
-    }), interactive && /*#__PURE__*/_jsx(ChevronDown, {
-      size: 12,
-      color: gameUIColors.muted,
-      style: {
-        marginLeft: 2
-      }
-    })]
-  });
-  if (interactive && onPress) {
-    return /*#__PURE__*/_jsx(Pressable, {
-      onPress: onPress,
-      style: ({
-        pressed
-      }) => ({
-        opacity: pressed ? 0.7 : 1
-      }),
-      accessibilityRole: "button",
-      accessibilityLabel: `Current environment: ${envConfig.label}. Tap to switch environment.`,
-      children: content
-    });
-  }
-  return content;
-}
+"use strict";import{Pressable as u,Text as g,View as c}from"react-native";import{FlaskConical as t,TestTube2 as f,Bug as b,Zap as m,ChevronDown as h}from"../icons/index.js";import{gameUIColors as o}from"../ui/gameUI/constants/gameUIColors.js";import{normalizeEnvironment as C}from"../types/types.js";import{jsx as r,jsxs as p}from"react/jsx-runtime";function L(n){const i=C(n);switch(i){case"local":return{label:"LOCAL",backgroundColor:o.info,icon:t,isLocal:true};case"dev":return{label:"DEV",backgroundColor:o.warning,icon:t,isLocal:false};case"qa":return{label:"QA",backgroundColor:o.optional,icon:b,isLocal:false};case"staging":return{label:"STAGING",backgroundColor:o.success,icon:m,isLocal:false};case"prod":return{label:"PROD",backgroundColor:o.error,icon:f,isLocal:false};default:return{label:"LOCAL",backgroundColor:o.info,icon:t,isLocal:true}}}export function EnvironmentIndicator({environment:n,onLayout:i,interactive:a=false,onPress:l}){const e=L(n);const s=p(c,{onLayout:i,style:{flexDirection:"row",alignItems:"center",paddingVertical:6,paddingLeft:8,paddingRight:a?4:8,flexShrink:0},children:[r(c,{style:{width:8,height:8,borderRadius:4,backgroundColor:e.backgroundColor,marginRight:6,shadowColor:e.backgroundColor,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:4,elevation:2}}),r(g,{style:{fontSize:11,fontWeight:"600",color:o.primaryLight,letterSpacing:.5},children:e.label}),a&&r(h,{size:12,color:o.muted,style:{marginLeft:2}})]});if(a&&l){return r(u,{onPress:l,style:({pressed:d})=>({opacity:d?.7:1}),accessibilityRole:"button",accessibilityLabel:`Current environment: ${e.label}. Tap to switch environment.`,children:s})}return s}

package/lib/module/env/EnvironmentIndicator.web.js

@@ -1,108 +1 @@
-"use strict";
-
-/**
- * EnvironmentIndicator — Web (React DOM) twin of EnvironmentIndicator.tsx.
- * Same env→color/label map and layout; lucide glyph icons are omitted from
- * the badge on native too (dot + label only), so parity holds.
- */
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { normalizeEnvironment } from "../types/types.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function getEnvironmentConfig(environment) {
-  switch (normalizeEnvironment(String(environment))) {
-    case 'dev':
-      return {
-        label: 'DEV',
-        backgroundColor: gameUIColors.warning
-      };
-    case 'qa':
-      return {
-        label: 'QA',
-        backgroundColor: gameUIColors.optional
-      };
-    case 'staging':
-      return {
-        label: 'STAGING',
-        backgroundColor: gameUIColors.success
-      };
-    case 'prod':
-      return {
-        label: 'PROD',
-        backgroundColor: gameUIColors.error
-      };
-    case 'local':
-    default:
-      return {
-        label: 'LOCAL',
-        backgroundColor: gameUIColors.info
-      };
-  }
-}
-function ChevronDownGlyph({
-  color
-}) {
-  // native: ChevronDown size 12 from shared lucide icons
-  return /*#__PURE__*/_jsx("svg", {
-    width: 12,
-    height: 12,
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx("path", {
-      d: "M6 9l6 6 6-6",
-      fill: "none",
-      stroke: color,
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })
-  });
-}
-export function EnvironmentIndicator({
-  environment,
-  interactive = false,
-  onPress
-}) {
-  const envConfig = getEnvironmentConfig(environment);
-  return /*#__PURE__*/_jsxs("button", {
-    onClick: interactive ? onPress : undefined,
-    "aria-label": `Environment: ${envConfig.label}`,
-    style: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      // native: paddingVertical 6, paddingLeft 8, paddingRight interactive?4:8
-      padding: `6px ${interactive ? 4 : 8}px 6px 8px`,
-      flexShrink: 0,
-      background: 'none',
-      border: 'none',
-      cursor: interactive ? 'pointer' : 'default'
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: envConfig.backgroundColor,
-        marginRight: 6,
-        // native: shadowOpacity 0.6, shadowRadius 4 glow
-        boxShadow: `0 0 4px ${envConfig.backgroundColor}99`
-      }
-    }), /*#__PURE__*/_jsx("span", {
-      style: {
-        fontSize: 11,
-        fontWeight: 600,
-        color: gameUIColors.primaryLight,
-        letterSpacing: 0.5
-      },
-      children: envConfig.label
-    }), interactive && /*#__PURE__*/_jsx("span", {
-      style: {
-        marginLeft: 2,
-        display: 'flex'
-      },
-      children: /*#__PURE__*/_jsx(ChevronDownGlyph, {
-        color: "#7A8599"
-      })
-    })]
-  });
-}
+"use strict";import{gameUIColors as o}from"../ui/gameUI/constants/gameUIColors.js";import{normalizeEnvironment as i}from"../types/types.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";export function getEnvironmentConfig(n){switch(i(String(n))){case"dev":return{label:"DEV",backgroundColor:o.warning};case"qa":return{label:"QA",backgroundColor:o.optional};case"staging":return{label:"STAGING",backgroundColor:o.success};case"prod":return{label:"PROD",backgroundColor:o.error};case"local":default:return{label:"LOCAL",backgroundColor:o.info}}}function s({color:n}){return r("svg",{width:12,height:12,viewBox:"0 0 24 24","aria-hidden":"true",children:r("path",{d:"M6 9l6 6 6-6",fill:"none",stroke:n,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EnvironmentIndicator({environment:n,interactive:e=false,onPress:t}){const l=getEnvironmentConfig(n);return a("button",{onClick:e?t:void 0,"aria-label":`Environment: ${l.label}`,style:{display:"flex",flexDirection:"row",alignItems:"center",padding:`6px ${e?4:8}px 6px 8px`,flexShrink:0,background:"none",border:"none",cursor:e?"pointer":"default"},children:[r("div",{style:{width:8,height:8,borderRadius:4,backgroundColor:l.backgroundColor,marginRight:6,boxShadow:`0 0 4px ${l.backgroundColor}99`}}),r("span",{style:{fontSize:11,fontWeight:600,color:o.primaryLight,letterSpacing:.5},children:l.label}),e&&r("span",{style:{marginLeft:2,display:"flex"},children:r(s,{color:"#7A8599"})})]})}