@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/module/ui/night/nightTheme.js

@@ -0,0 +1,116 @@
+"use strict";
+
+/**
+ * "Night" design tokens — the Everlights surface language, ported.
+ *
+ * A near-black, smooth, borderless-feeling system built to sit ON TOP of the
+ * shared ToolBackground star field: one `#050505` sheet the field shows
+ * through, `#0C0C0C` cards with hairline `#1A1A1C` borders, `#161618` rows
+ * inside them, uppercase section labels OUTSIDE the cards, and a single green
+ * accent that takes dark ink.
+ *
+ * Values are lifted 1:1 from the Everlights app's `constants/theme.ts`
+ * (`Palette` + `DarkColors`) and its modal tokens — that app is the design
+ * reference, so when in doubt match it, don't invent.
+ *
+ * THE ACCENT IS ONE SEAM: everything green reads `night.color.accent*`. The
+ * family is Buoy's brand green (`buoyColors.primary`, #20C997 — kept as
+ * literals so this module stays import-free); swapping it is a seven-line
+ * change here and nowhere else. `onAccent` stays black — this green wants
+ * dark ink.
+ *
+ * SCOPE: piloted on the dial menu's settings modal (JsModal `variant="night"`
+ * + DevToolsSettingsModal). If it sticks, convert the other tools to it.
+ */
+
+export const night = {
+  color: {
+    /** The sheet itself — also the inset track of a segmented control. */
+    bg: "#050505",
+    /** A card. */
+    surface: "#0C0C0C",
+    /** A row or control inside a card. */
+    surfaceElevated: "#161618",
+    /** Hairline card border. */
+    border: "#1A1A1C",
+    /** Hairline between rows inside a card. */
+    separator: "rgba(255, 255, 255, 0.08)",
+    /** Neutral fills, lightest → strongest. */
+    fill: "rgba(255, 255, 255, 0.06)",
+    fillSecondary: "rgba(255, 255, 255, 0.08)",
+    fillTertiary: "rgba(255, 255, 255, 0.12)",
+    /** Chip resting fill — dark glass, readable over the star field. */
+    buttonSurface: "rgba(8, 10, 14, 0.85)",
+    /** Secondary/destructive button plate. */
+    button: "#1C1C1C",
+    buttonPressed: "#2C2C2E",
+    text: "#ECEDEE",
+    textSecondary: "#9BA1A6",
+    textTertiary: "#636366",
+    /** Drag handles, input placeholders. */
+    placeholder: "rgba(255, 255, 255, 0.30)",
+    /** The one accent (Buoy brand green). See the header note — one seam. */
+    accent: "#20C997",
+    accentPressed: "#1BAB80",
+    accentSoft: "rgba(32, 201, 151, 0.12)",
+    accentFill: "rgba(32, 201, 151, 0.18)",
+    accentBorder: "rgba(32, 201, 151, 0.20)",
+    accentBorderStrong: "rgba(32, 201, 151, 0.35)",
+    /** Ink on a filled accent surface — the accent takes DARK ink. */
+    onAccent: "#000000",
+    danger: "#FF3B30",
+    dangerSoft: "rgba(255, 59, 48, 0.10)",
+    warning: "#FF8329",
+    warningSoft: "rgba(255, 131, 41, 0.12)",
+    info: "#1E6DFF",
+    infoSoft: "rgba(30, 109, 255, 0.12)",
+    /** Switch thumb at rest (Everlights moon gray). */
+    knob: "#D4D8DC"
+  },
+  radius: {
+    /** Sheets and dialogs. */
+    sheet: 16,
+    /** Cards. */
+    card: 14,
+    /** Inputs and code blocks. */
+    input: 12,
+    /** Rows and inner controls; also the segmented-control track. */
+    row: 10,
+    /** Segment thumb inside a radius-10 track. */
+    segment: 8,
+    /** Small badges. */
+    badge: 6,
+    /** Zone-style chips. */
+    chip: 20,
+    /** Fully rounded pills (buttons use height/2 instead). */
+    pill: 999
+  },
+  /** Screen/sheet horizontal margin. */
+  gutter: 16,
+  /** Section labels sit 4pt in from the card edge. */
+  labelInset: 4,
+  /** Vertical rhythm between labeled card groups. */
+  groupGap: 24,
+  /** Card interior padding. */
+  cardPad: 14,
+  /** Row padding inside an edge-to-edge card. */
+  rowPadH: 16,
+  rowPadV: 14,
+  font: {
+    /** Sheet/modal titles. */
+    title: 17,
+    /** Row labels and values. */
+    row: 15,
+    /** Body copy, chip labels. */
+    body: 14,
+    /** Segmented-control labels, captions, footnotes. */
+    caption: 13,
+    /** Uppercase section labels. */
+    label: 12,
+    /** Uppercase micro labels (START/END style). */
+    micro: 11
+  }
+};
+
+/** Section labels track wide open, Everlights-style. */
+export const NIGHT_LABEL_TRACKING = 0.8;

package/lib/module/ui/night/primitives.js

@@ -0,0 +1,485 @@
+"use strict";
+
+/**
+ * Night primitives — the building blocks of the Everlights-style surface
+ * (see ./nightTheme for the tokens and where the look comes from).
+ *
+ * The shape they compose to:
+ *
+ *   NightSectionLabel   STORAGE                ← outside the card, uppercase
+ *   NightCard           ┌──────────────────┐
+ *     NightRows         │ row              │   ← hairline-separated children
+ *                       │ ────────────     │
+ *                       │ row              │
+ *                       └──────────────────┘
+ *   NightFootnote       Settings persist through…
+ *
+ * Controls: NightSwitch (the Everlights 56×32 toggle), NightChip (zone-style
+ * pill), NightButton (primary = filled accent w/ dark ink, everything else on
+ * the #1C1C1C plate), NightSegmented (the All/Day control with the accent
+ * underline), NightBadge (small status caps).
+ */
+import { Children, useEffect, useRef } from "react";
+import { Animated, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { night, NIGHT_LABEL_TRACKING } from "./nightTheme.js";
+
+/** Uppercase section label that sits ABOVE a NightCard. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function NightSectionLabel({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.sectionLabel, style],
+    children: children
+  });
+}
+
+/** Explanatory line under a NightCard (or above a CTA, `centered`). */
+export function NightFootnote({
+  children,
+  centered,
+  tone = "tertiary",
+  style
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.footnote, tone === "secondary" ? styles.footnoteSecondary : null, tone === "warning" ? styles.footnoteWarning : null, tone === "danger" ? styles.footnoteDanger : null, centered ? styles.footnoteCentered : null, style],
+    children: children
+  });
+}
+
+/** A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14. */
+export function NightCard({
+  children,
+  padded,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.card, padded ? styles.cardPadded : null, style],
+    children: children
+  });
+}
+
+/** Hairline separator between rows, inset from the left like iOS. */
+export function NightSeparator({
+  inset = night.rowPadH
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.separator, {
+      marginLeft: inset
+    }]
+  });
+}
+
+/**
+ * Interleaves a hairline between consecutive children so rows never track
+ * their own position. Meant to live inside an unpadded NightCard.
+ */
+export function NightRows({
+  children,
+  inset = night.rowPadH
+}) {
+  const rows = Children.toArray(children);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: rows.map((row, index) =>
+    /*#__PURE__*/
+    // Children.toArray assigns stable synthetic keys for keyed children.
+    _jsxs(View, {
+      children: [index > 0 ? /*#__PURE__*/_jsx(NightSeparator, {
+        inset: inset
+      }) : null, row]
+    }, row.key ?? index))
+  });
+}
+
+// Everlights toggle geometry, verbatim.
+const TRACK_W = 56;
+const TRACK_H = 32;
+const THUMB = 22;
+const TRACK_PAD = 5;
+const TRAVEL = TRACK_W - THUMB - TRACK_PAD * 2;
+
+/**
+ * The Everlights 56×32 switch. The thumb slides on the native driver; the
+ * colors snap with the state change, which reads fine at this size.
+ */
+export function NightSwitch({
+  value,
+  onValueChange,
+  disabled
+}) {
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: value ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [value, progress]);
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    activeOpacity: 0.8,
+    disabled: disabled,
+    onPress: () => onValueChange(!value),
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: value,
+      disabled
+    },
+    hitSlop: {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
+    },
+    style: [styles.switchTrack, value ? styles.switchTrackOn : null, disabled ? styles.switchDisabled : null],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.switchThumb, value ? styles.switchThumbOn : null, {
+        transform: [{
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, TRAVEL]
+          })
+        }]
+      }]
+    })
+  });
+}
+
+/**
+ * Zone-style pill chip. The fill never changes — selection is signaled by the
+ * border and label color only, exactly like the Everlights zone row.
+ */
+export function NightChip({
+  label,
+  selected,
+  onPress,
+  disabled,
+  icon
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    activeOpacity: 0.7,
+    disabled: disabled || !onPress,
+    onPress: onPress,
+    style: [styles.chip, selected ? styles.chipSelected : null, disabled ? styles.chipDisabled : null],
+    children: [icon, /*#__PURE__*/_jsx(Text, {
+      style: [styles.chipText, selected ? styles.chipTextSelected : null],
+      children: label
+    })]
+  });
+}
+/**
+ * Everlights button. `primary` fills with the accent and takes DARK ink;
+ * every other variant sits on the `#1C1C1C` plate and differs only in label
+ * color. `lg` is the fully-rounded 50pt CTA.
+ */
+export function NightButton({
+  label,
+  onPress,
+  variant = "secondary",
+  size = "lg",
+  icon,
+  disabled,
+  fullWidth = true
+}) {
+  const labelColor = variant === "primary" ? night.color.onAccent : variant === "tertiary" ? night.color.text : variant === "destructive" ? night.color.danger : night.color.accent;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    activeOpacity: 0.7,
+    disabled: disabled,
+    onPress: onPress,
+    style: [styles.button, size === "md" ? styles.buttonMd : styles.buttonLg, variant === "primary" ? styles.buttonPrimary : variant === "ghost" ? styles.buttonGhost : styles.buttonPlate, fullWidth ? styles.buttonFullWidth : null, disabled ? styles.buttonDisabled : null],
+    children: [icon, /*#__PURE__*/_jsx(Text, {
+      style: [size === "md" ? styles.buttonTextMd : styles.buttonTextLg, {
+        color: labelColor
+      }],
+      children: label
+    })]
+  });
+}
+/**
+ * Segmented control: `#050505` track, `#161618` thumb, and the accent
+ * underline glow beneath the active label (the Everlights All/Day tabs).
+ *
+ * THE shared tab control for night-theme tool headers — the dial settings
+ * and the network tool both mount this one. `size="sm"` is the compact
+ * variant for in-tool headers where the full-height control reads too tall.
+ */
+export function NightSegmented({
+  tabs,
+  activeKey,
+  onChange,
+  size = "md"
+}) {
+  const small = size === "sm";
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.segmentTrack,
+    children: tabs.map(tab => {
+      const active = tab.key === activeKey;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        activeOpacity: 0.7,
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: tab.label,
+        onPress: () => onChange(tab.key),
+        style: [styles.segment, small ? styles.segmentSm : null, active ? styles.segmentActive : null],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
+          children: tab.label
+        }), active ? /*#__PURE__*/_jsx(View, {
+          style: [styles.segmentUnderline, small ? styles.segmentUnderlineSm : null]
+        }) : null]
+      }, tab.key);
+    })
+  });
+}
+/** Small uppercase status cap ("FILE SYSTEM", "CONNECTED"). */
+export function NightBadge({
+  label,
+  tone = "neutral"
+}) {
+  const fill = tone === "accent" ? styles.badgeAccent : tone === "warning" ? styles.badgeWarning : tone === "danger" ? styles.badgeDanger : tone === "info" ? styles.badgeInfo : styles.badgeNeutral;
+  const ink = tone === "accent" ? styles.badgeTextAccent : tone === "warning" ? styles.badgeTextWarning : tone === "danger" ? styles.badgeTextDanger : tone === "info" ? styles.badgeTextInfo : styles.badgeTextNeutral;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, fill],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, ink],
+      children: label
+    })
+  });
+}
+const styles = StyleSheet.create({
+  sectionLabel: {
+    color: night.color.textSecondary,
+    fontSize: night.font.label,
+    fontWeight: "600",
+    letterSpacing: NIGHT_LABEL_TRACKING,
+    textTransform: "uppercase",
+    marginBottom: 8,
+    marginLeft: night.labelInset
+  },
+  footnote: {
+    color: night.color.textTertiary,
+    fontSize: night.font.caption,
+    fontWeight: "500",
+    lineHeight: night.font.caption * 1.4,
+    marginTop: 8,
+    marginLeft: night.labelInset
+  },
+  footnoteSecondary: {
+    color: night.color.textSecondary
+  },
+  footnoteWarning: {
+    color: night.color.warning
+  },
+  footnoteDanger: {
+    color: night.color.danger
+  },
+  footnoteCentered: {
+    textAlign: "center",
+    marginLeft: 0
+  },
+  card: {
+    backgroundColor: night.color.surface,
+    borderRadius: night.radius.card,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    overflow: "hidden"
+  },
+  cardPadded: {
+    padding: night.cardPad,
+    gap: 10
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: night.color.separator
+  },
+  switchTrack: {
+    width: TRACK_W,
+    height: TRACK_H,
+    borderRadius: TRACK_H / 2,
+    borderWidth: 1,
+    borderColor: night.color.fillTertiary,
+    backgroundColor: night.color.surfaceElevated,
+    paddingHorizontal: TRACK_PAD,
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  switchTrackOn: {
+    backgroundColor: night.color.accentFill,
+    borderColor: night.color.accentBorderStrong
+  },
+  switchDisabled: {
+    opacity: 0.4
+  },
+  switchThumb: {
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    backgroundColor: night.color.knob
+  },
+  switchThumbOn: {
+    backgroundColor: night.color.accent
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: night.radius.chip,
+    borderWidth: 1.5,
+    backgroundColor: night.color.buttonSurface,
+    borderColor: night.color.fillTertiary
+  },
+  chipSelected: {
+    borderColor: night.color.accentBorderStrong
+  },
+  chipDisabled: {
+    opacity: 0.4
+  },
+  chipText: {
+    fontSize: night.font.body,
+    fontWeight: "500",
+    color: night.color.textSecondary
+  },
+  chipTextSelected: {
+    color: night.color.accent
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  buttonMd: {
+    height: 34,
+    paddingHorizontal: 16,
+    borderRadius: 17
+  },
+  buttonLg: {
+    height: 50,
+    paddingHorizontal: 20,
+    borderRadius: 25
+  },
+  buttonPrimary: {
+    backgroundColor: night.color.accent
+  },
+  buttonPlate: {
+    backgroundColor: night.color.button
+  },
+  buttonGhost: {
+    backgroundColor: "transparent"
+  },
+  buttonFullWidth: {
+    alignSelf: "stretch"
+  },
+  buttonDisabled: {
+    opacity: 0.4
+  },
+  buttonTextMd: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  buttonTextLg: {
+    fontSize: 17,
+    fontWeight: "600"
+  },
+  segmentTrack: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: night.color.bg,
+    borderRadius: night.radius.row,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 3
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: night.radius.segment
+  },
+  segmentActive: {
+    backgroundColor: night.color.surfaceElevated
+  },
+  segmentText: {
+    fontSize: night.font.caption,
+    fontWeight: "500",
+    color: night.color.textSecondary
+  },
+  segmentTextActive: {
+    fontWeight: "600",
+    color: night.color.text
+  },
+  segmentUnderline: {
+    position: "absolute",
+    bottom: 2,
+    width: 24,
+    height: 2.5,
+    borderRadius: 1.25,
+    backgroundColor: night.color.accent,
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
+  },
+  segmentSm: {
+    paddingVertical: 5
+  },
+  segmentTextSm: {
+    fontSize: 12
+  },
+  segmentUnderlineSm: {
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: night.radius.badge,
+    alignSelf: "flex-start"
+  },
+  badgeText: {
+    fontSize: night.font.micro,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  badgeAccent: {
+    backgroundColor: night.color.accentSoft
+  },
+  badgeTextAccent: {
+    color: night.color.accent
+  },
+  badgeWarning: {
+    backgroundColor: night.color.warningSoft
+  },
+  badgeTextWarning: {
+    color: night.color.warning
+  },
+  badgeDanger: {
+    backgroundColor: night.color.dangerSoft
+  },
+  badgeTextDanger: {
+    color: night.color.danger
+  },
+  badgeInfo: {
+    backgroundColor: night.color.infoSoft
+  },
+  badgeTextInfo: {
+    color: night.color.info
+  },
+  badgeNeutral: {
+    backgroundColor: night.color.fillSecondary
+  },
+  badgeTextNeutral: {
+    color: night.color.textSecondary
+  }
+});

package/lib/typescript/commonjs/JsModal.d.ts

@@ -12,6 +12,15 @@
 import { ReactNode } from "react";
 import { Animated, ViewStyle } from "react-native";
 export type ModalMode = "bottomSheet" | "floating";
+/**
+ * Chrome variant. "night" (the default since the suite-wide theme move) is
+ * the Everlights-style sheet (see ui/night): near-black `#050505` surfaces at
+ * radius 16, a hairline accent border, a neutral drag handle instead of the
+ * teal bar, a transparent header, and the ToolBackground hoisted to the sheet
+ * root so the star field runs through the header instead of stopping under
+ * it. "default" is the legacy card-grey chrome, kept as an escape hatch.
+ */
+export type ModalVariant = "default" | "night";
 interface HeaderConfig {
     title?: string;
     subtitle?: string;
@@ -79,6 +88,15 @@ interface JsModalProps {
     zIndex?: number;
     /** If true, children are rendered directly without ScrollView wrapper (use when children have their own FlatList/ScrollView) */
     disableScrollWrapper?: boolean;
+    /**
+     * Render the shared `ToolBackground` (the persisted preset — Live Sky by
+     * default) behind the modal body. On by default; pass false for tools that
+     * don't want a backdrop, or that mount their own (the network tool does, so
+     * its inline desktop panel — which never goes through JsModal — matches).
+     */
+    background?: boolean;
+    /** Chrome variant — see {@link ModalVariant}. */
+    variant?: ModalVariant;
 }
 export declare const JsModal: import("react").NamedExoticComponent<JsModalProps>;
 export {};

package/lib/typescript/commonjs/JsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsModal.d.ts","sourceRoot":"","sources":["../../../src/JsModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAUL,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAML,QAAQ,EAGR,SAAS,EAEV,MAAM,cAAc,CAAC;AA8FtB,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEnD,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kBAAkB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxD;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC;;;+BAG2B;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uBAAuB,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAErD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0EAA0E;IAC1E,sBAAsB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gIAAgI;IAChI,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAioDD,eAAO,MAAM,OAAO,oDAAyB,CAAC"}
+{"version":3,"file":"JsModal.d.ts","sourceRoot":"","sources":["../../../src/JsModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAUL,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,EAML,QAAQ,EAGR,SAAS,EAEV,MAAM,cAAc,CAAC;AA+GtB,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kBAAkB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxD;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC;;;+BAG2B;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uBAAuB,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAErD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0EAA0E;IAC1E,sBAAsB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gIAAgI;IAChI,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AA8wDD,eAAO,MAAM,OAAO,oDAAyB,CAAC"}

package/lib/typescript/commonjs/JsModal.web.d.ts

@@ -132,6 +132,19 @@ export interface JsModalProps {
     zIndex?: number;
     /** If true, children render directly without the scroll wrapper */
     disableScrollWrapper?: boolean;
+    /**
+     * Render the shared `ToolBackground` behind the modal body (native parity:
+     * first child of the clipping content box). On by default; pass false for
+     * tools that don't want a backdrop or mount their own.
+     */
+    background?: boolean;
+    /**
+     * Chrome variant (native parity). "night" = the Everlights-style sheet:
+     * near-black `#050505` surfaces at radius 16, a hairline accent border, a
+     * neutral drag handle, a transparent header, and the ToolBackground hoisted
+     * to the sheet root so the star field runs through the header.
+     */
+    variant?: "default" | "night";
 }
 export declare const JsModal: import("react").NamedExoticComponent<JsModalProps>;
 export {};

package/lib/typescript/commonjs/JsModal.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsModal.web.d.ts","sourceRoot":"","sources":["../../../src/JsModal.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,OAAO,EASL,KAAK,aAAa,EAGlB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAmHf,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEnD,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,YAAY;IAEpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4EAA4E;AAC5E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kBAAkB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxD;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iEAAiE;IACjE,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uBAAuB,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0EAA0E;IAC1E,sBAAsB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AA88CD,eAAO,MAAM,OAAO,oDAAyB,CAAC"}
+{"version":3,"file":"JsModal.web.d.ts","sourceRoot":"","sources":["../../../src/JsModal.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,OAAO,EASL,KAAK,aAAa,EAGlB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAyHf,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEnD,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,UAAU,YAAY;IAEpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,4EAA4E;AAC5E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,kBAAkB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACxD;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iEAAiE;IACjE,WAAW,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uBAAuB,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,0EAA0E;IAC1E,sBAAsB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AAqgDD,eAAO,MAAM,OAAO,oDAAyB,CAAC"}

package/lib/typescript/commonjs/dataViewer/VirtualizedDataExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedDataExplorer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/VirtualizedDataExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAOL,EAAE,EACF,YAAY,EACb,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkoC7D,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,YAAY,GAAG,IAAI,CAAC;IAC3E;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAqUpE,CAAC"}
+{"version":3,"file":"VirtualizedDataExplorer.d.ts","sourceRoot":"","sources":["../../../../src/dataViewer/VirtualizedDataExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAOL,EAAE,EACF,YAAY,EACb,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA2oC7D,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,YAAY,GAAG,IAAI,CAAC;IAC3E;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAqUpE,CAAC"}

package/lib/typescript/commonjs/dataViewer/diffThemes.d.ts

@@ -48,7 +48,9 @@ export interface DiffTheme {
 export declare const gitClassicTheme: DiffTheme;
 /**
  * Dev Tools Default Theme
- * Clean dark theme matching Buoy website brand colors
+ * The night theme (ui/night) — near-black surfaces, hairline borders. Diff
+ * DATA colors (added green / removed red / modified purple) are semantic and
+ * deliberately unchanged.
  */
 export declare const devToolsDefaultTheme: DiffTheme;
 /**