@buoy-gg/time-machine 7.0.22 → 7.0.23

package/lib/commonjs/ui/primitives.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisclosureChevron = DisclosureChevron;
+exports.Footnote = Footnote;
+exports.Group = Group;
+exports.PillLabel = PillLabel;
+exports.SectionLabel = SectionLabel;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _tmTheme = require("./tmTheme");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Grouped-inset list primitives — the building blocks of the Time Machine
+ * surface (see ./tmTheme for the tokens and the promotion plan).
+ *
+ * The shape they compose to:
+ *
+ *   SectionLabel      SOURCES                 ← outside the card, uppercase
+ *   Group             ┌──────────────────┐
+ *     <row>           │ All sources …  6 ›│    ← rows are plain children;
+ *     <row>           ├──────────────────┤      Group draws the hairlines
+ *                     └──────────────────┘
+ *   Footnote          Route is captured with… ← explains the group above
+ *
+ * Rows are whatever a screen needs — Group only owns the card, the clipping
+ * and the separators, so a row never has to know its position in the list.
+ */
+
+/** Uppercase section label that sits above a Group. */
+function SectionLabel({
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: styles.sectionLabel,
+    children: children
+  });
+}
+
+/**
+ * Explanatory line under a Group ("Swipe a restore point to delete it").
+ * `centered` matches the iOS convention for a footnote under a lone button.
+ */
+function Footnote({
+  children,
+  centered,
+  tone = "secondary"
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.footnote, centered ? styles.footnoteCentered : null, tone === "warning" ? styles.footnoteWarning : null],
+    children: children
+  });
+}
+
+/**
+ * A rounded grouped card. Draws a hairline between consecutive children and
+ * clips them, so a row can paint edge-to-edge (swipe actions, press washes)
+ * without punching through the corners.
+ */
+function Group({
+  children,
+  style
+}) {
+  const rows = _react.Children.toArray(children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.group, style],
+    children: rows.map((row, index) =>
+    /*#__PURE__*/
+    // Children.toArray assigns stable synthetic keys ('.$id' for keyed
+    // children), so a row keeps its identity as the list changes.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.separator
+      }) : null, row]
+    }, row.key ?? index))
+  });
+}
+
+/**
+ * Trailing disclosure chevron for a row that opens or expands.
+ *
+ * A real glyph, not two rotated hairlines: at this size the hand-built
+ * version's strokes never met at the vertex, so it read as a broken arrow.
+ */
+function DisclosureChevron() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+    size: 16,
+    color: _tmTheme.tm.color.labelTertiary
+  });
+}
+
+/**
+ * Pill button. Parameterized by color rather than by variant flags so a
+ * screen can name its own (`CapturePill`, `RestorePill`) in one line.
+ */
+function PillLabel({
+  label,
+  color,
+  background
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.pill, {
+      backgroundColor: background
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.pillText, {
+        color
+      }],
+      children: label
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  sectionLabel: {
+    color: _tmTheme.tm.color.labelSecondary,
+    fontSize: _tmTheme.tm.font.footnote,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    paddingHorizontal: _tmTheme.tm.gutter + _tmTheme.tm.textInset,
+    paddingTop: 22,
+    paddingBottom: 7
+  },
+  footnote: {
+    color: _tmTheme.tm.color.labelSecondary,
+    fontSize: _tmTheme.tm.font.footnote,
+    lineHeight: _tmTheme.tm.font.footnote * 1.35,
+    paddingHorizontal: _tmTheme.tm.gutter + _tmTheme.tm.textInset,
+    paddingTop: 7
+  },
+  footnoteCentered: {
+    textAlign: "center"
+  },
+  footnoteWarning: {
+    color: _tmTheme.tm.color.warning
+  },
+  group: {
+    marginHorizontal: _tmTheme.tm.gutter,
+    backgroundColor: _tmTheme.tm.color.group,
+    borderRadius: _tmTheme.tm.radius.group,
+    overflow: "hidden"
+  },
+  separator: {
+    height: _reactNative.StyleSheet.hairlineWidth,
+    marginLeft: _tmTheme.tm.separatorInset,
+    backgroundColor: _tmTheme.tm.color.separator
+  },
+  pill: {
+    height: 32,
+    paddingHorizontal: 15,
+    borderRadius: _tmTheme.tm.radius.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pillText: {
+    fontSize: _tmTheme.tm.font.control,
+    fontWeight: "600",
+    letterSpacing: _tmTheme.tm.tracking.control
+  }
+});
+//# sourceMappingURL=primitives.js.map

package/lib/commonjs/ui/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_sharedUi","_tmTheme","_jsxRuntime","SectionLabel","children","jsx","Text","style","styles","sectionLabel","Footnote","centered","tone","footnote","footnoteCentered","footnoteWarning","Group","rows","Children","toArray","View","group","map","row","index","jsxs","separator","key","DisclosureChevron","ChevronRight","size","color","tm","labelTertiary","PillLabel","label","background","pill","backgroundColor","pillText","StyleSheet","create","labelSecondary","fontSize","font","fontWeight","textTransform","letterSpacing","paddingHorizontal","gutter","textInset","paddingTop","paddingBottom","lineHeight","textAlign","warning","marginHorizontal","borderRadius","radius","overflow","height","hairlineWidth","marginLeft","separatorInset","alignItems","justifyContent","control","tracking"],"sourceRoot":"../../../src","sources":["ui/primitives.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/tmTheme.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tm = exports.TM_MONO = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * Time Machine design tokens — the "modern" surface language.
+ *
+ * A grouped-inset list system (iOS Settings shape): one dark sheet, rounded
+ * grouped cards holding hairline-separated rows, uppercase section labels
+ * outside the cards, and explanatory footnotes under them.
+ *
+ * COLOR COMES FROM `buoyColors` — the shared dev-tools palette — not from a
+ * private set. The mockup this layout came from used the Apple system colors;
+ * those are mapped onto Buoy's equivalents here (system green → Buoy teal,
+ * and so on) so the tool reads as part of the same product as every other
+ * one. Change a value in gameUIColors.ts and it lands here.
+ *
+ * Only shape, spacing and type live as literals below — those ARE the design
+ * language and have no palette equivalent.
+ *
+ * SCOPE: this is Time Machine's pilot of the new look. If it lands, promote
+ * this file (and ./primitives) into @buoy-gg/shared-ui and let the other
+ * tools import it — nothing in here is Time-Machine-specific.
+ *
+ * Note: like every StyleSheet in the repo, these values are read once at
+ * module load, so the desktop dashboard's in-place re-tint needs a reload to
+ * reach them.
+ */
+
+/** Hex opacity suffixes, so tinted fills stay tied to the palette color. */
+const A18 = "2E";
+const A30 = "4D";
+const tm = exports.tm = {
+  color: {
+    /** Sheet background behind the grouped cards. */
+    sheet: _sharedUi.buoyColors.base,
+    /** A grouped card. */
+    group: _sharedUi.buoyColors.card,
+    /** Row press / hover wash on top of a group. */
+    rowPressed: _sharedUi.buoyColors.hover,
+    /** Hairline between rows, inset from the left like iOS. */
+    separator: _sharedUi.buoyColors.border,
+    /** Neutral control fill (icon discs, chips, round buttons). */
+    fill: _sharedUi.buoyColors.input,
+    fillStrong: _sharedUi.buoyColors.borderStrong,
+    label: _sharedUi.buoyColors.text,
+    labelSecondary: _sharedUi.buoyColors.textSecondary,
+    labelTertiary: _sharedUi.buoyColors.textMuted,
+    /** Primary action + "this is healthy" (Buoy teal). */
+    accent: _sharedUi.buoyColors.primary,
+    accentSoft: `${_sharedUi.buoyColors.primary}${A18}`,
+    accentSoftStrong: `${_sharedUi.buoyColors.primary}${A30}`,
+    /** Text/icons ON an accent fill — the palette's teal wants dark ink. */
+    onAccent: "#0A0A0A",
+    warning: _sharedUi.buoyColors.warning,
+    warningSoft: `${_sharedUi.buoyColors.warning}${A18}`,
+    danger: _sharedUi.buoyColors.error,
+    dangerSoft: `${_sharedUi.buoyColors.error}${A18}`,
+    /** Text/icons ON a danger fill. */
+    onDanger: "#FFFFFF",
+    info: _sharedUi.buoyColors.info
+  },
+  radius: {
+    /** Grouped card + the capture field that visually matches one. */
+    group: 14,
+    /** Fully rounded pills and status circles. */
+    pill: 99
+  },
+  /** Horizontal inset of the grouped cards from the sheet edge. */
+  gutter: 14,
+  /** Extra inset for labels/footnotes, measured from the card edge. */
+  textInset: 16,
+  /** Left inset of a row separator, measured from the card edge. */
+  separatorInset: 16,
+  font: {
+    /** Row titles and primary values. */
+    row: 17,
+    /** Buttons and pill labels. */
+    control: 15,
+    /** Section labels, row captions, footnotes. */
+    footnote: 13,
+    /** Route paths and other monospace detail. */
+    mono: 12
+  },
+  /** iOS tracks display text slightly tighter than the default. */
+  tracking: {
+    row: -0.43,
+    control: -0.2
+  },
+  /** Standard grouped-row height before content forces it taller. */
+  rowMinHeight: 52
+};
+
+/**
+ * Monospace family. RN native resolves a single family name only (no CSS
+ * stack), and "monospace" is the one token both platforms honor — it is what
+ * the rest of the design system uses.
+ */
+const TM_MONO = exports.TM_MONO = "monospace";
+//# sourceMappingURL=tmTheme.js.map

package/lib/commonjs/ui/tmTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_sharedUi","require","A18","A30","tm","exports","color","sheet","buoyColors","base","group","card","rowPressed","hover","separator","border","fill","input","fillStrong","borderStrong","label","text","labelSecondary","textSecondary","labelTertiary","textMuted","accent","primary","accentSoft","accentSoftStrong","onAccent","warning","warningSoft","danger","error","dangerSoft","onDanger","info","radius","pill","gutter","textInset","separatorInset","font","row","control","footnote","mono","tracking","rowMinHeight","TM_MONO"],"sourceRoot":"../../../src","sources":["ui/tmTheme.ts"],"mappings":";;;;;;AAwBA,IAAAA,SAAA,GAAAC,OAAA;AAxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA,MAAMC,GAAG,GAAG,IAAI;AAChB,MAAMC,GAAG,GAAG,IAAI;AAET,MAAMC,EAAE,GAAAC,OAAA,CAAAD,EAAA,GAAG;EAChBE,KAAK,EAAE;IACL;IACAC,KAAK,EAAEC,oBAAU,CAACC,IAAI;IACtB;IACAC,KAAK,EAAEF,oBAAU,CAACG,IAAI;IACtB;IACAC,UAAU,EAAEJ,oBAAU,CAACK,KAAK;IAC5B;IACAC,SAAS,EAAEN,oBAAU,CAACO,MAAM;IAC5B;IACAC,IAAI,EAAER,oBAAU,CAACS,KAAK;IACtBC,UAAU,EAAEV,oBAAU,CAACW,YAAY;IAEnCC,KAAK,EAAEZ,oBAAU,CAACa,IAAI;IACtBC,cAAc,EAAEd,oBAAU,CAACe,aAAa;IACxCC,aAAa,EAAEhB,oBAAU,CAACiB,SAAS;IAEnC;IACAC,MAAM,EAAElB,oBAAU,CAACmB,OAAO;IAC1BC,UAAU,EAAE,GAAGpB,oBAAU,CAACmB,OAAO,GAAGzB,GAAG,EAAE;IACzC2B,gBAAgB,EAAE,GAAGrB,oBAAU,CAACmB,OAAO,GAAGxB,GAAG,EAAE;IAC/C;IACA2B,QAAQ,EAAE,SAAS;IAEnBC,OAAO,EAAEvB,oBAAU,CAACuB,OAAO;IAC3BC,WAAW,EAAE,GAAGxB,oBAAU,CAACuB,OAAO,GAAG7B,GAAG,EAAE;IAE1C+B,MAAM,EAAEzB,oBAAU,CAAC0B,KAAK;IACxBC,UAAU,EAAE,GAAG3B,oBAAU,CAAC0B,KAAK,GAAGhC,GAAG,EAAE;IACvC;IACAkC,QAAQ,EAAE,SAAS;IAEnBC,IAAI,EAAE7B,oBAAU,CAAC6B;EACnB,CAAC;EAEDC,MAAM,EAAE;IACN;IACA5B,KAAK,EAAE,EAAE;IACT;IACA6B,IAAI,EAAE;EACR,CAAC;EAED;EACAC,MAAM,EAAE,EAAE;EACV;EACAC,SAAS,EAAE,EAAE;EACb;EACAC,cAAc,EAAE,EAAE;EAElBC,IAAI,EAAE;IACJ;IACAC,GAAG,EAAE,EAAE;IACP;IACAC,OAAO,EAAE,EAAE;IACX;IACAC,QAAQ,EAAE,EAAE;IACZ;IACAC,IAAI,EAAE;EACR,CAAC;EAED;EACAC,QAAQ,EAAE;IACRJ,GAAG,EAAE,CAAC,IAAI;IACVC,OAAO,EAAE,CAAC;EACZ,CAAC;EAED;EACAI,YAAY,EAAE;AAChB,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAA7C,OAAA,CAAA6C,OAAA,GAAG,WAAW","ignoreList":[]}