@meetreeve/ui 0.15.0 → 0.16.0

package/dist/tokens/index.d.mts

@@ -25,6 +25,17 @@ declare const BREAKPOINTS: {
     /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
     readonly md: 768;
 };
+/**
+ * StageRail spacing (DEV-13855). Mirrored as `--mf-stage-*` in tokens.css; the
+ * rail reads them with these values as `var()` fallbacks, so it lays out the
+ * same whether or not the consumer imports the sheet.
+ */
+declare const STAGE_RAIL: {
+    /** Minimum width of the gap column between two slots, px. */
+    readonly gap: 24;
+    /** Height of the ruler row above the slots, px. */
+    readonly rulerHeight: 24;
+};
 type MinSizeToken = keyof typeof MIN_SIZES;
 type Breakpoint = keyof typeof BREAKPOINTS;
 /**
@@ -42,4 +53,4 @@ declare const TOUCH_TARGET_STYLE: {
     readonly minHeight: 44;
 };
 
-export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, TOUCH_TARGET_STYLE };
+export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, STAGE_RAIL, TOUCH_TARGET_STYLE };

package/dist/tokens/index.d.ts

@@ -25,6 +25,17 @@ declare const BREAKPOINTS: {
     /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
     readonly md: 768;
 };
+/**
+ * StageRail spacing (DEV-13855). Mirrored as `--mf-stage-*` in tokens.css; the
+ * rail reads them with these values as `var()` fallbacks, so it lays out the
+ * same whether or not the consumer imports the sheet.
+ */
+declare const STAGE_RAIL: {
+    /** Minimum width of the gap column between two slots, px. */
+    readonly gap: 24;
+    /** Height of the ruler row above the slots, px. */
+    readonly rulerHeight: 24;
+};
 type MinSizeToken = keyof typeof MIN_SIZES;
 type Breakpoint = keyof typeof BREAKPOINTS;
 /**
@@ -42,4 +53,4 @@ declare const TOUCH_TARGET_STYLE: {
     readonly minHeight: 44;
 };
 
-export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, TOUCH_TARGET_STYLE };
+export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, STAGE_RAIL, TOUCH_TARGET_STYLE };

package/dist/tokens/index.js

@@ -22,6 +22,7 @@ var tokens_exports = {};
 __export(tokens_exports, {
   BREAKPOINTS: () => BREAKPOINTS,
   MIN_SIZES: () => MIN_SIZES,
+  STAGE_RAIL: () => STAGE_RAIL,
   TOUCH_TARGET_STYLE: () => TOUCH_TARGET_STYLE
 });
 module.exports = __toCommonJS(tokens_exports);
@@ -43,6 +44,12 @@ var BREAKPOINTS = {
   /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
   md: 768
 };
+var STAGE_RAIL = {
+  /** Minimum width of the gap column between two slots, px. */
+  gap: 24,
+  /** Height of the ruler row above the slots, px. */
+  rulerHeight: 24
+};
 var TOUCH_TARGET_STYLE = {
   minWidth: MIN_SIZES.touchTarget,
   minHeight: MIN_SIZES.touchTarget
@@ -51,5 +58,6 @@ var TOUCH_TARGET_STYLE = {
 0 && (module.exports = {
   BREAKPOINTS,
   MIN_SIZES,
+  STAGE_RAIL,
   TOUCH_TARGET_STYLE
 });

package/dist/tokens/index.mjs

@@ -17,6 +17,12 @@ var BREAKPOINTS = {
   /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
   md: 768
 };
+var STAGE_RAIL = {
+  /** Minimum width of the gap column between two slots, px. */
+  gap: 24,
+  /** Height of the ruler row above the slots, px. */
+  rulerHeight: 24
+};
 var TOUCH_TARGET_STYLE = {
   minWidth: MIN_SIZES.touchTarget,
   minHeight: MIN_SIZES.touchTarget
@@ -24,5 +30,6 @@ var TOUCH_TARGET_STYLE = {
 export {
   BREAKPOINTS,
   MIN_SIZES,
+  STAGE_RAIL,
   TOUCH_TARGET_STYLE
 };

package/dist/tokens.css

@@ -4,7 +4,7 @@
  * Import once, after `@import "tailwindcss";`, in your global stylesheet:
  *   @import "@meetreeve/ui/tokens.css";
  *
- * Values mirror MIN_SIZES / BREAKPOINTS in ./tokens.ts. The `--breakpoint-*`
+ * Values mirror MIN_SIZES / STAGE_RAIL / BREAKPOINTS in ./tokens.ts. The `--breakpoint-*`
  * entries reaffirm Tailwind's own sm/md defaults so the JS and CSS agree.
  *
  * `@theme static` (not plain `@theme`): Tailwind v4 tree-shakes theme variables
@@ -19,6 +19,10 @@
   --mf-min-control: 44px;
   --mf-wordmark-max-width: 180px;
 
+  /* StageRail spacing (DEV-13855) — mirrors STAGE_RAIL in ./tokens.ts. */
+  --mf-stage-gap: 24px;
+  --mf-stage-ruler-height: 24px;
+
   /* Breakpoints aligned to Tailwind defaults. */
   --breakpoint-sm: 640px;
   --breakpoint-md: 768px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.15.0",
-  "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
+  "version": "0.16.0",
+  "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, AppSidebar's viewport-driven auto-collapse ladder, and the StageRail flow-of-cards primitives.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -27,6 +27,11 @@
       "import": "./dist/console/index.mjs",
       "require": "./dist/console/index.js"
     },
+    "./stage-rail": {
+      "types": "./dist/stage-rail/index.d.ts",
+      "import": "./dist/stage-rail/index.mjs",
+      "require": "./dist/stage-rail/index.js"
+    },
     "./tokens.css": "./dist/tokens.css"
   },
   "files": [