@oxyhq/bloom 0.19.1 → 0.21.0

package/lib/module/connection-dots/ConnectionDotsBase.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { atoms as a, tokens } from "../styles/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shared layout + accessibility chrome for {@link ConnectionDots}:
+ *
+ *   leftSlot · (animated ellipsis dots) · rightSlot
+ *
+ * The dots themselves are supplied by the platform fork (`ConnectionDots.tsx`
+ * native / `ConnectionDots.web.tsx` web) because the shimmer animation impl
+ * differs (Reanimated vs CSS). This base owns the row layout, the slot wrappers,
+ * and the single accessibility label that stands in for the decorative dots.
+ */
+export function ConnectionDotsBase({
+  left,
+  right,
+  dots,
+  accessibilityLabel = 'Connecting',
+  className,
+  style
+}) {
+  const rowStyle = [a.flex_row, a.align_center, a.justify_center, {
+    gap: tokens.space.md
+  }, style];
+  return /*#__PURE__*/_jsxs(View, {
+    ...(className ? {
+      className
+    } : {}),
+    style: rowStyle,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [a.align_center, a.justify_center],
+      children: left
+    }), /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel,
+      "aria-label": accessibilityLabel,
+      style: [a.flex_row, a.align_center, {
+        gap: tokens.space.xs
+      }],
+      children: dots
+    }), /*#__PURE__*/_jsx(View, {
+      style: [a.align_center, a.justify_center],
+      children: right
+    })]
+  });
+}
+//# sourceMappingURL=ConnectionDotsBase.js.map

package/lib/module/connection-dots/ConnectionDotsBase.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","atoms","a","tokens","jsx","_jsx","jsxs","_jsxs","ConnectionDotsBase","left","right","dots","accessibilityLabel","className","style","rowStyle","flex_row","align_center","justify_center","gap","space","md","children","accessibilityRole","xs"],"sourceRoot":"../../../src","sources":["connection-dots/ConnectionDotsBase.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,KAAK,IAAIC,CAAC,EAAEC,MAAM,QAAQ,oBAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,kBAAkB,GAAG,YAAY;EACjCC,SAAS;EACTC;AACuB,CAAC,EAAE;EAC1B,MAAMC,QAA8B,GAAG,CACrCb,CAAC,CAACc,QAAQ,EACVd,CAAC,CAACe,YAAY,EACdf,CAAC,CAACgB,cAAc,EAChB;IAAEC,GAAG,EAAEhB,MAAM,CAACiB,KAAK,CAACC;EAAG,CAAC,EACxBP,KAAK,CACN;EAED,oBACEP,KAAA,CAACP,IAAI;IAAA,IACEa,SAAS,GAAI;MAAEA;IAAU,CAAC,GAA8B,CAAC,CAAC;IAC/DC,KAAK,EAAEC,QAAS;IAAAO,QAAA,gBAChBjB,IAAA,CAACL,IAAI;MAACc,KAAK,EAAE,CAACZ,CAAC,CAACe,YAAY,EAAEf,CAAC,CAACgB,cAAc,CAAE;MAAAI,QAAA,EAAEb;IAAI,CAAO,CAAC,eAK9DJ,IAAA,CAACL,IAAI;MACHuB,iBAAiB,EAAC,OAAO;MACzBX,kBAAkB,EAAEA,kBAAmB;MACvC,cAAYA,kBAAmB;MAC/BE,KAAK,EAAE,CAACZ,CAAC,CAACc,QAAQ,EAAEd,CAAC,CAACe,YAAY,EAAE;QAAEE,GAAG,EAAEhB,MAAM,CAACiB,KAAK,CAACI;MAAG,CAAC,CAAE;MAAAF,QAAA,EAC7DX;IAAI,CACD,CAAC,eAEPN,IAAA,CAACL,IAAI;MAACc,KAAK,EAAE,CAACZ,CAAC,CAACe,YAAY,EAAEf,CAAC,CAACgB,cAAc,CAAE;MAAAI,QAAA,EAAEZ;IAAK,CAAO,CAAC;EAAA,CAC3D,CAAC;AAEX","ignoreList":[]}

package/lib/module/connection-dots/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ConnectionDots } from './ConnectionDots';
+//# sourceMappingURL=index.js.map

package/lib/module/connection-dots/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ConnectionDots"],"sourceRoot":"../../../src","sources":["connection-dots/index.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,kBAAkB","ignoreList":[]}

package/lib/module/connection-dots/index.web.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ConnectionDots } from "./ConnectionDots.web.js";
+//# sourceMappingURL=index.web.js.map

package/lib/module/connection-dots/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ConnectionDots"],"sourceRoot":"../../../src","sources":["connection-dots/index.web.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,yBAAsB","ignoreList":[]}

package/lib/module/connection-dots/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/connection-dots/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["connection-dots/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/content-panel/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+/**
+ * Native variant of `ContentPanel` — the framed app-content surface.
+ *
+ * `ContentPanel` is the rounded, bordered panel that holds an app's routed
+ * content. On WEB it adds two sticky overlays (a gutter "bleed-mask" box-shadow
+ * ring and a continuous rounded border frame) so feed content that bleeds into
+ * the rounded corners / lateral gutters is masked while a single seamless border
+ * is drawn around the panel — see `index.web.tsx`.
+ *
+ * On NATIVE none of that applies: there is no document scroll, no sticky
+ * positioning, and no bleed to mask, so the panel is simply a rounded, bordered
+ * surface wrapping its content. The `framed` and `showStickyFrame` props are
+ * accepted for cross-platform API parity but are intentionally no-ops here
+ * (mirroring the no-op native fork of `../scroll`).
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below must
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` (and the
+ * native `src/**`) picks them up.
+ */
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+/**
+ * Width (in px) of the WEB sticky gutter-mask box-shadow ring. Exported for
+ * cross-platform API parity (it has no effect on native).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) of the framed panel chrome. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+const ContentPanelComponent = ({
+  children,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle
+}) => {
+  const surfaceClass = ['flex-1', 'rounded-radius-28', 'overflow-hidden border border-border', surfaceClassName ?? 'bg-card'].join(' ');
+  const contentClass = ['flex-1', contentClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx(View, {
+    className: surfaceClass,
+    style: surfaceStyle,
+    children: /*#__PURE__*/_jsx(View, {
+      className: contentClass,
+      style: contentStyle,
+      children: children
+    })
+  });
+};
+export const ContentPanel = /*#__PURE__*/memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.js.map

package/lib/module/content-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","jsx","_jsx","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","surfaceClassName","surfaceStyle","contentClassName","contentStyle","surfaceClass","join","contentClass","filter","Boolean","className","style","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;;AAEnE;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAIA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;AAsBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,YAAY,GAAG,CACnB,QAAQ,EACR,mBAAmB,EACnB,sCAAsC,EACtCJ,gBAAgB,IAAI,SAAS,CAC9B,CAACK,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,YAAY,GAAG,CAAC,QAAQ,EAAEJ,gBAAgB,CAAC,CAACK,MAAM,CAACC,OAAO,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;EAE3E,oBACEX,IAAA,CAACF,IAAI;IACIiB,SAAS,EAAEL,YAAY;IAC9BM,KAAK,EAAET,YAAa;IAAAF,QAAA,eAEpBL,IAAA,CAACF,IAAI;MACIiB,SAAS,EAAEH,YAAY;MAC9BI,KAAK,EAAEP,YAAa;MAAAJ,QAAA,EAEnBA;IAAQ,CACL;EAAC,CACH,CAAC;AAEX,CAAC;AAED,OAAO,MAAMY,YAAY,gBAAGpB,IAAI,CAACO,qBAAqB,CAAC;AACvDa,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/content-panel/index.web.js

@@ -0,0 +1,94 @@
+"use strict";
+
+/**
+ * Web variant of `ContentPanel` — the framed app-content surface.
+ *
+ * On the web, app content scrolls the DOCUMENT, and a multi-column shell keeps
+ * the routed content in a rounded, bordered center panel. Two problems follow
+ * from letting feed content bleed to the rounded panel edge, both solved here
+ * with sticky, full-viewport-height overlays inside the panel surface:
+ *
+ *  1. BLEED-MASK overlay (`z-30`): a `box-shadow` ring in the GUTTER color
+ *     (Bloom `background` token) drawn OVER content that bleeds into the thin
+ *     lateral gutter / rounded corners. `clip-path: inset(-12px)` keeps that
+ *     ring off the side columns. It sits below opaque chrome (headers/banners),
+ *     so it only masks the content's bleed, never the chrome. No border.
+ *     (`clip-path` MUST be the arbitrary class — RN-web drops it from `style`.)
+ *
+ *  2. BORDER-FRAME overlay (`z-[120]`): a single 1px rounded `border-border`
+ *     outline with a transparent interior, ABOVE all content. Being one element
+ *     above everything, it draws ONE continuous rounded border around all four
+ *     sides — no seams, no double lines, no per-chrome borders.
+ *
+ * Both overlays are `position: sticky; top: 8px` with a negative
+ * `margin-bottom` so they occupy zero layout height (they overlay the scrolled
+ * content rather than displacing it). They render BEFORE the content wrapper so
+ * z-index — not DOM order — decides layering.
+ *
+ * When `framed` is false (narrow screens) the panel is full-bleed: a single
+ * flat surface, no rounding, no overlays.
+ *
+ * Native bundlers use `./index.tsx` (a plain rounded surface); web bundlers
+ * select this file via the `"browser"` export condition in `package.json`.
+ *
+ * Styling is NativeWind-className-first; the literal class strings below MUST
+ * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28`
+ * parts).
+ */
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from "../theme/use-theme.js";
+
+/** Width (in px) of the sticky gutter-mask box-shadow ring. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const GUTTER_MASK_SPREAD = 40;
+/** Top sticky inset (px) the framed panel chrome pins to. */
+export const PANEL_TOP_INSET = 8;
+/** Bottom sticky inset (px) of the framed panel chrome. */
+export const PANEL_BOTTOM_INSET = 8;
+const ContentPanelComponent = ({
+  children,
+  framed,
+  surfaceClassName,
+  surfaceStyle,
+  contentClassName,
+  contentStyle,
+  showStickyFrame
+}) => {
+  const {
+    colors
+  } = useTheme();
+  if (!framed) {
+    // Full-bleed: a single flat surface. No rounding, no sticky overlays.
+    const fullBleedClass = ['flex-1', surfaceClassName ?? 'bg-card', contentClassName].filter(Boolean).join(' ');
+    return /*#__PURE__*/_jsx(View, {
+      className: fullBleedClass,
+      style: [surfaceStyle, contentStyle],
+      children: children
+    });
+  }
+  const surfaceClass = ['flex-1', 'rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ');
+  const contentClass = ['flex-1', 'rounded-radius-28 web:overflow-x-clip', contentClassName].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs(View, {
+    className: surfaceClass,
+    style: surfaceStyle,
+    children: [/*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      className: 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+      style: {
+        boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${colors.background}`
+      }
+    }), showStickyFrame !== false && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      className: 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]'
+    }), /*#__PURE__*/_jsx(View, {
+      className: contentClass,
+      style: contentStyle,
+      children: children
+    })]
+  });
+};
+export const ContentPanel = /*#__PURE__*/memo(ContentPanelComponent);
+ContentPanel.displayName = 'ContentPanel';
+//# sourceMappingURL=index.web.js.map

package/lib/module/content-panel/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","View","useTheme","jsx","_jsx","jsxs","_jsxs","GUTTER_MASK_SPREAD","PANEL_TOP_INSET","PANEL_BOTTOM_INSET","ContentPanelComponent","children","framed","surfaceClassName","surfaceStyle","contentClassName","contentStyle","showStickyFrame","colors","fullBleedClass","filter","Boolean","join","className","style","surfaceClass","contentClass","pointerEvents","boxShadow","background","ContentPanel","displayName"],"sourceRoot":"../../../src","sources":["content-panel/index.web.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,IAAI,QAAwC,cAAc;AAEnE,SAASC,QAAQ,QAAQ,uBAAoB;;AAE7C;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC;AACA,OAAO,MAAMC,eAAe,GAAG,CAAC;AAChC;AACA,OAAO,MAAMC,kBAAkB,GAAG,CAAC;AAgBnC,MAAMC,qBAAkD,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,MAAM;EACNC,gBAAgB;EAChBC,YAAY;EACZC,gBAAgB;EAChBC,YAAY;EACZC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAO,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAE7B,IAAI,CAACU,MAAM,EAAE;IACX;IACA,MAAMO,cAAc,GAAG,CACrB,QAAQ,EACRN,gBAAgB,IAAI,SAAS,EAC7BE,gBAAgB,CACjB,CACEK,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;IACZ,oBACElB,IAAA,CAACH,IAAI;MACIsB,SAAS,EAAEJ,cAAc;MAChCK,KAAK,EAAE,CAACV,YAAY,EAAEE,YAAY,CAAE;MAAAL,QAAA,EAEnCA;IAAQ,CACL,CAAC;EAEX;EAEA,MAAMc,YAAY,GAAG,CAAC,QAAQ,EAAE,mBAAmB,EAAEZ,gBAAgB,IAAI,SAAS,CAAC,CAACS,IAAI,CAAC,GAAG,CAAC;EAC7F,MAAMI,YAAY,GAAG,CAAC,QAAQ,EAAE,uCAAuC,EAAEX,gBAAgB,CAAC,CACvFK,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;EAEZ,oBACEhB,KAAA,CAACL,IAAI;IACIsB,SAAS,EAAEE,YAAY;IAC9BD,KAAK,EAAEV,YAAa;IAAAH,QAAA,gBAGpBP,IAAA,CAACH,IAAI;MACH0B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP,8IAA8I;MAElJC,KAAK,EAAE;QAAEI,SAAS,EAAE,SAASrB,kBAAkB,MAAMW,MAAM,CAACW,UAAU;MAAG;IAAE,CAC5E,CAAC,EAEDZ,eAAe,KAAK,KAAK,iBACxBb,IAAA,CAACH,IAAI;MACH0B,aAAa,EAAC,MAAM;MAElBJ,SAAS,EACP;IAAyI,CAE9I,CACF,eAEDnB,IAAA,CAACH,IAAI;MACIsB,SAAS,EAAEG,YAAY;MAC9BF,KAAK,EAAER,YAAa;MAAAL,QAAA,EAEnBA;IAAQ,CACL,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAED,OAAO,MAAMmB,YAAY,gBAAG9B,IAAI,CAACU,qBAAqB,CAAC;AACvDoB,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/design-tokens/color-roles.js

@@ -0,0 +1,108 @@
+"use strict";
+
+/**
+ * Semantic color-role vocabulary for the Oxy Unified Design Language.
+ *
+ * Every role is an ALIAS onto one of Bloom's existing canonical theme tokens
+ * (`--background`, `--surface`, `--primary`, …) — the SINGLE source of resolved
+ * color values produced by `getResolvedTokens` and written to the document root
+ * (web) / `rootVariables` (native) by `BloomThemeProvider`. No color VALUE is
+ * invented here: a role's value is the `var(--canonical)` reference, so it stays
+ * driven by the active light/dark mode and color preset automatically.
+ *
+ * The maps are consumed by the Bloom Tailwind preset (`tailwind-preset.ts`),
+ * which slots them into `theme.extend.{backgroundColor,textColor,borderColor}`.
+ * Because the values are `var(--x)` strings, the SAME class names resolve on
+ * Tailwind (web) and NativeWind (native): web reads the CSS custom property from
+ * `document.documentElement`; native reads it from react-native-css's
+ * `rootVariables` family — both populated by Bloom from one pipeline.
+ *
+ * Web CSS-var contract (see Bloom AGENTS.md): base `--x` tokens already resolve
+ * to a FULL `rgb(...)` color at runtime, so the role values reference them with
+ * `var(--x)` directly — NEVER `hsl(var(--x))`.
+ *
+ * ADDITIVE: these are NEW utility names (`bg-fill`, `text-text-tertiary`,
+ * `border-border-image`, …). They do not touch the existing app-defined color
+ * utilities (`bg-background`, `text-muted-foreground`, …), which keep working.
+ */
+
+/** A `var(--canonical-token)` reference string. */
+
+const ref = token => `var(--${token})`;
+
+/**
+ * Surface / fill roles → background-color utilities (`bg-<role>`).
+ *
+ * | role              | utility            | canonical token   | rationale                                   |
+ * | ----------------- | ------------------ | ----------------- | ------------------------------------------- |
+ * | bg                | bg-bg              | --background      | the page background                          |
+ * | fill              | bg-fill            | --card            | default raised surface (cards/sheets)        |
+ * | fill-secondary    | bg-fill-secondary  | --muted           | muted/secondary fill                         |
+ * | fill-hover        | bg-fill-hover      | --accent          | hover state of a secondary fill              |
+ * | fill-brand        | bg-fill-brand      | --primary         | brand-colored fill                           |
+ * | fill-brand-hover  | bg-fill-brand-hover| --ring            | hover of brand fill (ring == primary hue)    |
+ * | fill-inverse      | bg-fill-inverse    | --foreground      | inverse (high-contrast) fill                 |
+ * | fill-inverse-hover| bg-fill-inverse-hov| --muted-foreground| hover of inverse fill                        |
+ * | fill-placeholder  | bg-fill-placeholder| --muted           | disabled/placeholder surface                 |
+ */
+export const FILL_ROLES = {
+  bg: ref('background'),
+  fill: ref('card'),
+  'fill-secondary': ref('muted'),
+  'fill-hover': ref('accent'),
+  'fill-brand': ref('primary'),
+  'fill-brand-hover': ref('ring'),
+  'fill-inverse': ref('foreground'),
+  'fill-inverse-hover': ref('muted-foreground'),
+  'fill-placeholder': ref('muted')
+};
+
+/**
+ * Text roles → text-color utilities (`text-<role>`).
+ *
+ * Tailwind prefixes text-color utilities with `text-`, so a role literally
+ * named `text` becomes the utility `text-text`, `text-secondary` → the utility
+ * `text-text-secondary`, etc. (matches the namespaced spec).
+ *
+ * | role             | utility               | canonical token       | rationale                          |
+ * | ---------------- | --------------------- | --------------------- | ---------------------------------- |
+ * | text             | text-text             | --foreground          | primary text                        |
+ * | text-secondary   | text-text-secondary   | --muted-foreground    | secondary text                      |
+ * | text-tertiary    | text-text-tertiary    | --muted-foreground    | tertiary/least-emphasis text        |
+ * | text-inverse     | text-text-inverse     | --primary-foreground  | text on a brand fill                |
+ * | text-fixed-light | text-text-fixed-light | --primary-foreground  | always-light text (on brand)        |
+ * | text-placeholder | text-text-placeholder | --muted-foreground    | placeholder/input hint              |
+ */
+export const TEXT_ROLES = {
+  text: ref('foreground'),
+  'text-secondary': ref('muted-foreground'),
+  'text-tertiary': ref('muted-foreground'),
+  'text-inverse': ref('primary-foreground'),
+  'text-fixed-light': ref('primary-foreground'),
+  'text-placeholder': ref('muted-foreground')
+};
+
+/**
+ * Border roles → border-color utilities (`border-<role>`).
+ *
+ * | role               | utility                 | canonical token | rationale                                  |
+ * | ------------------ | ----------------------- | --------------- | ------------------------------------------ |
+ * | border             | border-border           | --border        | default border                              |
+ * | border-image       | border-border-image     | --border        | hairline border color (0.5px width helper)  |
+ * | border-secondary   | border-border-secondary | --input         | secondary/softer border                     |
+ * | border-input       | border-border-input     | --input         | input field border                          |
+ * | border-input-active| border-border-input-active | --ring       | focused input border (== primary)           |
+ *
+ * NOTE: the hairline 0.5px WIDTH for `border-image` is shipped as a separate
+ * `borderWidth` scale entry (`border-hairline`) in the preset; the color role
+ * above only provides the matching color. Consumers compose them:
+ * `border-hairline border-border-image`.
+ */
+export const BORDER_ROLES = {
+  border: ref('border'),
+  'border-image': ref('border'),
+  'border-secondary': ref('input'),
+  'border-input': ref('input'),
+  'border-input-active': ref('ring')
+};
+//# sourceMappingURL=color-roles.js.map

package/lib/module/design-tokens/color-roles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ref","token","FILL_ROLES","bg","fill","TEXT_ROLES","text","BORDER_ROLES","border"],"sourceRoot":"../../../src","sources":["design-tokens/color-roles.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAGA,MAAMA,GAAG,GAAIC,KAAa,IAAe,SAASA,KAAK,GAAG;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAG;EACxBC,EAAE,EAAEH,GAAG,CAAC,YAAY,CAAC;EACrBI,IAAI,EAAEJ,GAAG,CAAC,MAAM,CAAC;EACjB,gBAAgB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC9B,YAAY,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC3B,YAAY,EAAEA,GAAG,CAAC,SAAS,CAAC;EAC5B,kBAAkB,EAAEA,GAAG,CAAC,MAAM,CAAC;EAC/B,cAAc,EAAEA,GAAG,CAAC,YAAY,CAAC;EACjC,oBAAoB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,OAAO;AACjC,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,UAAU,GAAG;EACxBC,IAAI,EAAEN,GAAG,CAAC,YAAY,CAAC;EACvB,gBAAgB,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACzC,eAAe,EAAEA,GAAG,CAAC,kBAAkB,CAAC;EACxC,cAAc,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EACzC,kBAAkB,EAAEA,GAAG,CAAC,oBAAoB,CAAC;EAC7C,kBAAkB,EAAEA,GAAG,CAAC,kBAAkB;AAC5C,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,YAAY,GAAG;EAC1BC,MAAM,EAAER,GAAG,CAAC,QAAQ,CAAC;EACrB,cAAc,EAAEA,GAAG,CAAC,QAAQ,CAAC;EAC7B,kBAAkB,EAAEA,GAAG,CAAC,OAAO,CAAC;EAChC,cAAc,EAAEA,GAAG,CAAC,OAAO,CAAC;EAC5B,qBAAqB,EAAEA,GAAG,CAAC,MAAM;AACnC,CAAU","ignoreList":[]}

package/lib/module/design-tokens/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+/**
+ * `@oxyhq/bloom/design-tokens` — the centralized, semantic design-token
+ * vocabulary for the Oxy Unified Design Language.
+ *
+ * Exposes:
+ *   - `bloomTailwindPreset` — the Tailwind/NativeWind preset (web + native) that
+ *     adds the semantic utility classes (`bg-fill`, `text-text-tertiary`,
+ *     `p-space-8`, `rounded-radius-20`, `text-body`, `font-body`, `shadow-s`).
+ *   - `bloomThemeCss` / `bloomThemeBlock` — the Tailwind v4 `@theme` equivalent
+ *     for CSS-configured web apps.
+ *   - The raw token maps (`FILL_ROLES`, `TEXT_ROLES`, `BORDER_ROLES`, `SPACING`,
+ *     `RADIUS`, `TYPOGRAPHY`, `SHADOW_BOX`) for direct programmatic use.
+ *   - `bloomShadowStyle` — platform-correct shadow style object (web box-shadow /
+ *     native elevation) so a consumer writes one call for both platforms.
+ *
+ * Additive and non-breaking: every export here is NEW. It does not change any
+ * existing Bloom token, theme value, or utility class.
+ */
+
+export { bloomTailwindPreset } from "./tailwind-preset.js";
+export { bloomThemeCss, bloomThemeBlock } from "./theme-css.js";
+export { FILL_ROLES, TEXT_ROLES, BORDER_ROLES } from "./color-roles.js";
+export { SPACING, RADIUS, BORDER_WIDTH, TYPOGRAPHY, FONT_FAMILY_VARS } from "./scales.js";
+export { SHADOW_BOX, bloomShadowStyle } from './shadows';
+//# sourceMappingURL=index.js.map

package/lib/module/design-tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["bloomTailwindPreset","bloomThemeCss","bloomThemeBlock","FILL_ROLES","TEXT_ROLES","BORDER_ROLES","SPACING","RADIUS","BORDER_WIDTH","TYPOGRAPHY","FONT_FAMILY_VARS","SHADOW_BOX","bloomShadowStyle"],"sourceRoot":"../../../src","sources":["design-tokens/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,mBAAmB,QAAQ,sBAAmB;AAMvD,SAASC,aAAa,EAAEC,eAAe,QAAQ,gBAAa;AAE5D,SACEC,UAAU,EACVC,UAAU,EACVC,YAAY,QACP,kBAAe;AAGtB,SACEC,OAAO,EACPC,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,gBAAgB,QACX,aAAU;AAGjB,SAASC,UAAU,EAAEC,gBAAgB,QAAQ,WAAW","ignoreList":[]}

package/lib/module/design-tokens/scales.js

@@ -0,0 +1,164 @@
+"use strict";
+
+/**
+ * Numeric design-token scales for the Oxy Unified Design Language.
+ *
+ * These are platform-agnostic plain numbers / CSS strings consumed by the Bloom
+ * Tailwind preset (`tailwind-preset.ts`). The SAME keys produce the SAME utility
+ * class names on Tailwind (web) and NativeWind (native):
+ *   - spacing  → `p-space-8`, `gap-space-20`, `px-screen-margin`, `m-space-16`
+ *   - radius   → `rounded-radius-20`
+ *   - type     → `font-body` (family/weight) + `text-body` (size/lineHeight)
+ *   - shadow   → `shadow-s`, `shadow-m`
+ *
+ * ADDITIVE: every key is namespaced (`space-*`, `radius-*`, the typography role
+ * names, `shadow-s/m`) and does not collide with Tailwind's built-in numeric
+ * scale (`p-4`, `rounded-lg`, `text-sm`) — those keep working unchanged.
+ */
+
+/* -------------------------------------------------------------------------- */
+/*  Spacing                                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Spacing scale (px). Consumed via every Tailwind spacing utility:
+ * `p-space-8`, `px-space-16`, `gap-space-20`, `m-space-24`, `py-space-12`, …
+ *
+ * `screen-margin` is the standard page gutter (left/right inset). Default 20px —
+ * matches Bloom's existing `space.xl` and the `Dialog` default `contentPadding`.
+ */
+export const SPACING = {
+  'space-2': 2,
+  'space-4': 4,
+  'space-8': 8,
+  'space-12': 12,
+  'space-16': 16,
+  'space-20': 20,
+  'space-24': 24,
+  'space-32': 32,
+  'screen-margin': 20
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Radius                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Corner-radius scale (px). Consumed via `rounded-radius-*`:
+ * `rounded-radius-8`, `rounded-radius-12`, `rounded-radius-20`,
+ * `rounded-radius-28`, `rounded-radius-max` (pill / circle).
+ */
+export const RADIUS = {
+  'radius-8': 8,
+  'radius-12': 12,
+  'radius-20': 20,
+  'radius-28': 28,
+  'radius-max': 9999
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Border width (hairline)                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Border-width helpers. `border-hairline` is the 0.5px hairline that pairs with
+ * the `border-border-image` color role. (Tailwind's default `border` = 1px
+ * stays untouched.)
+ */
+export const BORDER_WIDTH = {
+  hairline: 0.5
+};
+
+/* -------------------------------------------------------------------------- */
+/*  Typography                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * One typography role. `size`/`lineHeight` are px; `weight` is a CSS font-weight
+ * string; `family` selects the Bloom font CSS var (`sans` = body/UI,
+ * `display` = headings/serif).
+ *
+ * The Tailwind preset splits each role into TWO utilities so a consumer can
+ * apply the size/leading and the family/weight independently or together:
+ *   - `text-<role>`  → `fontSize` + `lineHeight`   (via theme.fontSize)
+ *   - `font-<role>`  → `fontFamily` + `fontWeight` (via theme.fontFamily, which
+ *                       maps a key to a [family, { fontWeight }] tuple)
+ */
+
+/**
+ * The coherent Oxy type scale. Sizes climb 11 → 28; line-heights use a ~1.3–1.5
+ * leading for body roles and tighter leading for large titles.
+ *
+ * | role            | size/line | weight | family  | usage                          |
+ * | --------------- | --------- | ------ | ------- | ------------------------------ |
+ * | caption         | 11 / 14   | 400    | sans    | timestamps, meta, fine print   |
+ * | bodySmall       | 13 / 18   | 400    | sans    | secondary body, captions       |
+ * | bodyTitleSmall  | 13 / 18   | 600    | sans    | small emphasized labels        |
+ * | body            | 15 / 22   | 400    | sans    | default body text              |
+ * | subtitle        | 17 / 24   | 500    | sans    | list subtitles, lead-ins       |
+ * | sectionTitle    | 20 / 26   | 600    | sans    | section headers                |
+ * | headerBold      | 28 / 34   | 700    | display | screen / page titles           |
+ * | buttonLarge     | 17 / 22   | 600    | sans    | primary button label           |
+ */
+export const TYPOGRAPHY = {
+  caption: {
+    size: 11,
+    lineHeight: 14,
+    weight: '400',
+    family: 'sans'
+  },
+  bodySmall: {
+    size: 13,
+    lineHeight: 18,
+    weight: '400',
+    family: 'sans'
+  },
+  bodyTitleSmall: {
+    size: 13,
+    lineHeight: 18,
+    weight: '600',
+    family: 'sans'
+  },
+  body: {
+    size: 15,
+    lineHeight: 22,
+    weight: '400',
+    family: 'sans'
+  },
+  subtitle: {
+    size: 17,
+    lineHeight: 24,
+    weight: '500',
+    family: 'sans'
+  },
+  sectionTitle: {
+    size: 20,
+    lineHeight: 26,
+    weight: '600',
+    family: 'sans'
+  },
+  headerBold: {
+    size: 28,
+    lineHeight: 34,
+    weight: '700',
+    family: 'display'
+  },
+  buttonLarge: {
+    size: 17,
+    lineHeight: 22,
+    weight: '600',
+    family: 'sans'
+  }
+};
+/**
+ * Bloom font-family CSS-var stacks, keyed by the `family` field above. Web reads
+ * `var(--bloom-font-*)` (set by `applyFontFaces`); the preset falls back to the
+ * literal stack so utilities still resolve before the vars are injected and on
+ * native (where NativeWind passes the family string straight through).
+ */
+export const FONT_FAMILY_VARS = {
+  sans: 'var(--bloom-font-sans)',
+  display: 'var(--bloom-font-display)',
+  mono: 'var(--bloom-font-mono)'
+};
+//# sourceMappingURL=scales.js.map

package/lib/module/design-tokens/scales.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SPACING","RADIUS","BORDER_WIDTH","hairline","TYPOGRAPHY","caption","size","lineHeight","weight","family","bodySmall","bodyTitleSmall","body","subtitle","sectionTitle","headerBold","buttonLarge","FONT_FAMILY_VARS","sans","display","mono"],"sourceRoot":"../../../src","sources":["design-tokens/scales.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,OAAO,GAAG;EACrB,SAAS,EAAE,CAAC;EACZ,SAAS,EAAE,CAAC;EACZ,SAAS,EAAE,CAAC;EACZ,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,EAAE;EACd,eAAe,EAAE;AACnB,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAG;EACpB,UAAU,EAAE,CAAC;EACb,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACf,WAAW,EAAE,EAAE;EACf,YAAY,EAAE;AAChB,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1BC,QAAQ,EAAE;AACZ,CAAU;;AAEV;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAG;EACxBC,OAAO,EAAE;IAAEC,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACpEC,SAAS,EAAE;IAAEJ,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACtEE,cAAc,EAAE;IAAEL,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EAC3EG,IAAI,EAAE;IAAEN,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACjEI,QAAQ,EAAE;IAAEP,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACrEK,YAAY,EAAE;IAAER,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO,CAAC;EACzEM,UAAU,EAAE;IAAET,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC1EO,WAAW,EAAE;IAAEV,IAAI,EAAE,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,MAAM,EAAE,KAAK;IAAEC,MAAM,EAAE;EAAO;AACzE,CAA6C;AAI7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMQ,gBAAgB,GAAG;EAC9BC,IAAI,EAAE,wBAAwB;EAC9BC,OAAO,EAAE,2BAA2B;EACpCC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}

package/lib/module/design-tokens/shadows.js

@@ -0,0 +1,43 @@
+"use strict";
+
+/**
+ * Elevation / shadow tokens for the Oxy Unified Design Language.
+ *
+ * Two roles: `shadow-s` (subtle raise — cards, chips) and `shadow-m` (overlays —
+ * menus, popovers, dialogs). Consumers write ONE class (`shadow-s` / `shadow-m`)
+ * and Bloom owns the platform split:
+ *   - Web: the Bloom Tailwind preset registers `boxShadow.s` / `boxShadow.m`
+ *     (the `SHADOW_BOX` strings below) → `shadow-s` / `shadow-m` utilities.
+ *   - Native: NativeWind cannot translate a multi-layer web `box-shadow` to RN
+ *     elevation reliably, so apps that need the shadow on a React Native surface
+ *     apply the matching style object from `bloomShadowStyle('s' | 'm')` (this
+ *     module is platform-forked: `.native.ts` returns RN `shadow*`/`elevation`).
+ *
+ * This default file is the WEB / consumer-tsc variant. Metro selects the sibling
+ * `shadows.native.ts` on iOS/Android. Web bundlers and a consumer's `tsc` see
+ * this file (the `box-shadow` CSS string path), matching Bloom's existing
+ * `.native`/`.web` split convention.
+ */
+
+/**
+ * Web `box-shadow` strings. Subtle, brand-neutral elevation that reads on both
+ * light and dark surfaces. Registered by the Tailwind preset as `boxShadow.s/m`.
+ */
+export const SHADOW_BOX = {
+  s: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.10)',
+  m: '0 4px 12px rgb(0 0 0 / 0.08), 0 2px 6px rgb(0 0 0 / 0.12)'
+};
+
+/**
+ * Return the platform-appropriate shadow style for a role.
+ *
+ * On WEB this returns a `{ boxShadow }` style object (so it can also be applied
+ * inline without Tailwind). The `.native.ts` fork returns RN
+ * `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`.
+ */
+export function bloomShadowStyle(role) {
+  return {
+    boxShadow: SHADOW_BOX[role]
+  };
+}
+//# sourceMappingURL=shadows.js.map

package/lib/module/design-tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SHADOW_BOX","s","m","bloomShadowStyle","role","boxShadow"],"sourceRoot":"../../../src","sources":["design-tokens/shadows.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA,OAAO,MAAMA,UAAsC,GAAG;EACpDC,CAAC,EAAE,0DAA0D;EAC7DC,CAAC,EAAE;AACL,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAACC,IAAgB,EAAa;EAC5D,OAAO;IAAEC,SAAS,EAAEL,UAAU,CAACI,IAAI;EAAE,CAAC;AACxC","ignoreList":[]}