@meetreeve/ui 0.6.2 → 0.6.3

package/dist/lockup/index.d.mts

@@ -0,0 +1,68 @@
+/**
+ * Brand lockup metric rules (DEV-5139) — the single source of truth for how a
+ * lettermark relates to its wordmark. Grounded in standard identity-system
+ * practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
+ * proportions are locked as ratios, and the pieces share one baseline.
+ *
+ * Rules v1:
+ *  1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
+ *     baseline. Flex `items-baseline` in the lockup; never `items-center`
+ *     for text marks (center-aligning boxes ≠ aligning baselines — measured
+ *     3px baseline float on cadasense, DEV-5139).
+ *  2. Cap-height parity + optical overshoot — the mark's cap height is
+ *     MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
+ *     (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
+ *     small; 1.08 restores perceived equality (measured 0.93 before).
+ *  3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
+ *  4. Clearspace — ≥1 cap height of empty space around the whole lockup
+ *     (the header's own padding satisfies this; consumers embedding the
+ *     lockup elsewhere own the rule).
+ *  5. Standalone glyph fill — on a square canvas (favicon, avatar), the
+ *     letter's cap height is ~60–70% of the canvas edge; ghost-tile below
+ *     20px (DEV-4539).
+ *  6. Ratios are locked — scale the lockup uniformly; never resize one
+ *     element of it. These constants are that lock.
+ *
+ * The generated-asset pipeline (reeve-services brand_identity
+ * svg_templates) mirrors these values — see DEV-5140. Change them together.
+ */
+/** Rule 2 — mark cap height ÷ wordmark cap height. */
+declare const MARK_CAP_RATIO = 1.08;
+/**
+ * Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
+ * asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
+ * svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
+ * The live-DOM lockup previously ran both at semibold (600) — Matt's
+ * measured "too thin" on cadasense. Numeric constants are the spec; the
+ * *_CLASS twins are the Tailwind application. The generated-asset pipeline
+ * mirrors the numeric values — see DEV-5140. Change them together.
+ */
+declare const MARK_WEIGHT = 900;
+declare const MARK_WEIGHT_CLASS = "font-black";
+declare const WORDMARK_WEIGHT = 800;
+declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
+/**
+ * Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
+ * `text-base` (16px) — family scale; text-sm (14px) measured visibly under
+ * the MindFortress navbar mark — so the monogram letter renders at
+ * 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
+ * move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
+ * equal cap height; the ratio rides the font-size.
+ */
+declare const WORDMARK_TEXT_LG = "text-base";
+declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
+ * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
+ * per-surface.
+ */
+declare const LOCKUP_GAP = "gap-2";
+/**
+ * Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
+ * centered as a whole by whatever wraps it (e.g. a touch target).
+ */
+declare const LOCKUP_ROW = "flex items-baseline";
+/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
+declare const GLYPH_CANVAS_FILL = 0.65;
+
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };

package/dist/lockup/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Brand lockup metric rules (DEV-5139) — the single source of truth for how a
+ * lettermark relates to its wordmark. Grounded in standard identity-system
+ * practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
+ * proportions are locked as ratios, and the pieces share one baseline.
+ *
+ * Rules v1:
+ *  1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
+ *     baseline. Flex `items-baseline` in the lockup; never `items-center`
+ *     for text marks (center-aligning boxes ≠ aligning baselines — measured
+ *     3px baseline float on cadasense, DEV-5139).
+ *  2. Cap-height parity + optical overshoot — the mark's cap height is
+ *     MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
+ *     (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
+ *     small; 1.08 restores perceived equality (measured 0.93 before).
+ *  3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
+ *  4. Clearspace — ≥1 cap height of empty space around the whole lockup
+ *     (the header's own padding satisfies this; consumers embedding the
+ *     lockup elsewhere own the rule).
+ *  5. Standalone glyph fill — on a square canvas (favicon, avatar), the
+ *     letter's cap height is ~60–70% of the canvas edge; ghost-tile below
+ *     20px (DEV-4539).
+ *  6. Ratios are locked — scale the lockup uniformly; never resize one
+ *     element of it. These constants are that lock.
+ *
+ * The generated-asset pipeline (reeve-services brand_identity
+ * svg_templates) mirrors these values — see DEV-5140. Change them together.
+ */
+/** Rule 2 — mark cap height ÷ wordmark cap height. */
+declare const MARK_CAP_RATIO = 1.08;
+/**
+ * Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
+ * asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
+ * svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
+ * The live-DOM lockup previously ran both at semibold (600) — Matt's
+ * measured "too thin" on cadasense. Numeric constants are the spec; the
+ * *_CLASS twins are the Tailwind application. The generated-asset pipeline
+ * mirrors the numeric values — see DEV-5140. Change them together.
+ */
+declare const MARK_WEIGHT = 900;
+declare const MARK_WEIGHT_CLASS = "font-black";
+declare const WORDMARK_WEIGHT = 800;
+declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
+/**
+ * Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
+ * `text-base` (16px) — family scale; text-sm (14px) measured visibly under
+ * the MindFortress navbar mark — so the monogram letter renders at
+ * 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
+ * move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
+ * equal cap height; the ratio rides the font-size.
+ */
+declare const WORDMARK_TEXT_LG = "text-base";
+declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
+ * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
+ * per-surface.
+ */
+declare const LOCKUP_GAP = "gap-2";
+/**
+ * Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
+ * centered as a whole by whatever wraps it (e.g. a touch target).
+ */
+declare const LOCKUP_ROW = "flex items-baseline";
+/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
+declare const GLYPH_CANVAS_FILL = 0.65;
+
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };

package/dist/lockup/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/lockup.ts
+var lockup_exports = {};
+__export(lockup_exports, {
+  GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
+  LOCKUP_GAP: () => LOCKUP_GAP,
+  LOCKUP_ROW: () => LOCKUP_ROW,
+  MARK_CAP_RATIO: () => MARK_CAP_RATIO,
+  MARK_WEIGHT: () => MARK_WEIGHT,
+  MARK_WEIGHT_CLASS: () => MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG: () => MONOGRAM_TEXT_LG,
+  WORDMARK_TEXT_LG: () => WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT: () => WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS: () => WORDMARK_WEIGHT_CLASS
+});
+module.exports = __toCommonJS(lockup_exports);
+var MARK_CAP_RATIO = 1.08;
+var MARK_WEIGHT = 900;
+var MARK_WEIGHT_CLASS = "font-black";
+var WORDMARK_WEIGHT = 800;
+var WORDMARK_WEIGHT_CLASS = "font-extrabold";
+var WORDMARK_TEXT_LG = "text-base";
+var MONOGRAM_TEXT_LG = "text-[17px]";
+var LOCKUP_GAP = "gap-2";
+var LOCKUP_ROW = "flex items-baseline";
+var GLYPH_CANVAS_FILL = 0.65;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GLYPH_CANVAS_FILL,
+  LOCKUP_GAP,
+  LOCKUP_ROW,
+  MARK_CAP_RATIO,
+  MARK_WEIGHT,
+  MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG,
+  WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS
+});

package/dist/lockup/index.mjs

@@ -0,0 +1,23 @@
+// src/lib/lockup.ts
+var MARK_CAP_RATIO = 1.08;
+var MARK_WEIGHT = 900;
+var MARK_WEIGHT_CLASS = "font-black";
+var WORDMARK_WEIGHT = 800;
+var WORDMARK_WEIGHT_CLASS = "font-extrabold";
+var WORDMARK_TEXT_LG = "text-base";
+var MONOGRAM_TEXT_LG = "text-[17px]";
+var LOCKUP_GAP = "gap-2";
+var LOCKUP_ROW = "flex items-baseline";
+var GLYPH_CANVAS_FILL = 0.65;
+export {
+  GLYPH_CANVAS_FILL,
+  LOCKUP_GAP,
+  LOCKUP_ROW,
+  MARK_CAP_RATIO,
+  MARK_WEIGHT,
+  MARK_WEIGHT_CLASS,
+  MONOGRAM_TEXT_LG,
+  WORDMARK_TEXT_LG,
+  WORDMARK_WEIGHT,
+  WORDMARK_WEIGHT_CLASS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "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.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
@@ -17,6 +17,11 @@
       "import": "./dist/tokens/index.mjs",
       "require": "./dist/tokens/index.js"
     },
+    "./lockup": {
+      "types": "./dist/lockup/index.d.ts",
+      "import": "./dist/lockup/index.mjs",
+      "require": "./dist/lockup/index.js"
+    },
     "./tokens.css": "./dist/tokens.css"
   },
   "files": [