@meetreeve/ui 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/lockup/index.d.mts +68 -0
- package/dist/lockup/index.d.ts +68 -0
- package/dist/lockup/index.js +57 -0
- package/dist/lockup/index.mjs +23 -0
- package/package.json +6 -1
package/dist/index.d.mts
CHANGED
|
@@ -120,11 +120,13 @@ interface ResponsiveHeaderProps {
|
|
|
120
120
|
/** Secondary nav links — inline on desktop, in the menu on mobile. */
|
|
121
121
|
nav?: HeaderNavItem[];
|
|
122
122
|
/**
|
|
123
|
-
*
|
|
124
|
-
*
|
|
125
|
-
* to
|
|
123
|
+
* Destination for the brand lockup. The glyph + wordmark are a single
|
|
124
|
+
* clickable link — clicking the logo/wordmark always goes home (DEV-5340),
|
|
125
|
+
* so this DEFAULTS to "/". Pass a different href to point elsewhere, or
|
|
126
|
+
* `null` for the rare surface where the lockup must not navigate (renders
|
|
127
|
+
* a plain, non-link div).
|
|
126
128
|
*/
|
|
127
|
-
brandHref?: string;
|
|
129
|
+
brandHref?: string | null;
|
|
128
130
|
/**
|
|
129
131
|
* Link renderer for the brand lockup and `nav` href items. Defaults to a bare
|
|
130
132
|
* `"a"` so the package stays framework-agnostic; consumers pass their router's
|
package/dist/index.d.ts
CHANGED
|
@@ -120,11 +120,13 @@ interface ResponsiveHeaderProps {
|
|
|
120
120
|
/** Secondary nav links — inline on desktop, in the menu on mobile. */
|
|
121
121
|
nav?: HeaderNavItem[];
|
|
122
122
|
/**
|
|
123
|
-
*
|
|
124
|
-
*
|
|
125
|
-
* to
|
|
123
|
+
* Destination for the brand lockup. The glyph + wordmark are a single
|
|
124
|
+
* clickable link — clicking the logo/wordmark always goes home (DEV-5340),
|
|
125
|
+
* so this DEFAULTS to "/". Pass a different href to point elsewhere, or
|
|
126
|
+
* `null` for the rare surface where the lockup must not navigate (renders
|
|
127
|
+
* a plain, non-link div).
|
|
126
128
|
*/
|
|
127
|
-
brandHref?: string;
|
|
129
|
+
brandHref?: string | null;
|
|
128
130
|
/**
|
|
129
131
|
* Link renderer for the brand lockup and `nav` href items. Defaults to a bare
|
|
130
132
|
* `"a"` so the package stays framework-agnostic; consumers pass their router's
|
package/dist/index.js
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Brand lockup metric rules (DEV-5139) — the single source of truth for how a
|
|
3
|
+
* lettermark relates to its wordmark. Grounded in standard identity-system
|
|
4
|
+
* practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
|
|
5
|
+
* proportions are locked as ratios, and the pieces share one baseline.
|
|
6
|
+
*
|
|
7
|
+
* Rules v1:
|
|
8
|
+
* 1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
|
|
9
|
+
* baseline. Flex `items-baseline` in the lockup; never `items-center`
|
|
10
|
+
* for text marks (center-aligning boxes ≠ aligning baselines — measured
|
|
11
|
+
* 3px baseline float on cadasense, DEV-5139).
|
|
12
|
+
* 2. Cap-height parity + optical overshoot — the mark's cap height is
|
|
13
|
+
* MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
|
|
14
|
+
* (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
|
|
15
|
+
* small; 1.08 restores perceived equality (measured 0.93 before).
|
|
16
|
+
* 3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
|
|
17
|
+
* 4. Clearspace — ≥1 cap height of empty space around the whole lockup
|
|
18
|
+
* (the header's own padding satisfies this; consumers embedding the
|
|
19
|
+
* lockup elsewhere own the rule).
|
|
20
|
+
* 5. Standalone glyph fill — on a square canvas (favicon, avatar), the
|
|
21
|
+
* letter's cap height is ~60–70% of the canvas edge; ghost-tile below
|
|
22
|
+
* 20px (DEV-4539).
|
|
23
|
+
* 6. Ratios are locked — scale the lockup uniformly; never resize one
|
|
24
|
+
* element of it. These constants are that lock.
|
|
25
|
+
*
|
|
26
|
+
* The generated-asset pipeline (reeve-services brand_identity
|
|
27
|
+
* svg_templates) mirrors these values — see DEV-5140. Change them together.
|
|
28
|
+
*/
|
|
29
|
+
/** Rule 2 — mark cap height ÷ wordmark cap height. */
|
|
30
|
+
declare const MARK_CAP_RATIO = 1.08;
|
|
31
|
+
/**
|
|
32
|
+
* Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
|
|
33
|
+
* asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
|
|
34
|
+
* svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
|
|
35
|
+
* The live-DOM lockup previously ran both at semibold (600) — Matt's
|
|
36
|
+
* measured "too thin" on cadasense. Numeric constants are the spec; the
|
|
37
|
+
* *_CLASS twins are the Tailwind application. The generated-asset pipeline
|
|
38
|
+
* mirrors the numeric values — see DEV-5140. Change them together.
|
|
39
|
+
*/
|
|
40
|
+
declare const MARK_WEIGHT = 900;
|
|
41
|
+
declare const MARK_WEIGHT_CLASS = "font-black";
|
|
42
|
+
declare const WORDMARK_WEIGHT = 800;
|
|
43
|
+
declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
|
|
44
|
+
/**
|
|
45
|
+
* Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
|
|
46
|
+
* `text-base` (16px) — family scale; text-sm (14px) measured visibly under
|
|
47
|
+
* the MindFortress navbar mark — so the monogram letter renders at
|
|
48
|
+
* 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
|
|
49
|
+
* move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
|
|
50
|
+
* equal cap height; the ratio rides the font-size.
|
|
51
|
+
*/
|
|
52
|
+
declare const WORDMARK_TEXT_LG = "text-base";
|
|
53
|
+
declare const MONOGRAM_TEXT_LG = "text-[17px]";
|
|
54
|
+
/**
|
|
55
|
+
* Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
|
|
56
|
+
* text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
|
|
57
|
+
* per-surface.
|
|
58
|
+
*/
|
|
59
|
+
declare const LOCKUP_GAP = "gap-2";
|
|
60
|
+
/**
|
|
61
|
+
* Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
|
|
62
|
+
* centered as a whole by whatever wraps it (e.g. a touch target).
|
|
63
|
+
*/
|
|
64
|
+
declare const LOCKUP_ROW = "flex items-baseline";
|
|
65
|
+
/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
|
|
66
|
+
declare const GLYPH_CANVAS_FILL = 0.65;
|
|
67
|
+
|
|
68
|
+
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 };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Brand lockup metric rules (DEV-5139) — the single source of truth for how a
|
|
3
|
+
* lettermark relates to its wordmark. Grounded in standard identity-system
|
|
4
|
+
* practice: the measurement unit for a lockup is the WORDMARK'S CAP HEIGHT,
|
|
5
|
+
* proportions are locked as ratios, and the pieces share one baseline.
|
|
6
|
+
*
|
|
7
|
+
* Rules v1:
|
|
8
|
+
* 1. Baseline lock — mark, accent dot, and wordmark sit on ONE shared
|
|
9
|
+
* baseline. Flex `items-baseline` in the lockup; never `items-center`
|
|
10
|
+
* for text marks (center-aligning boxes ≠ aligning baselines — measured
|
|
11
|
+
* 3px baseline float on cadasense, DEV-5139).
|
|
12
|
+
* 2. Cap-height parity + optical overshoot — the mark's cap height is
|
|
13
|
+
* MARK_CAP_RATIO × the wordmark's cap height. A lone round glyph
|
|
14
|
+
* (C/G/O/Q/S) optically undershoots flat caps, so exact parity reads
|
|
15
|
+
* small; 1.08 restores perceived equality (measured 0.93 before).
|
|
16
|
+
* 3. Lockup gap — mark→wordmark gap is 0.5–0.8× the wordmark cap height.
|
|
17
|
+
* 4. Clearspace — ≥1 cap height of empty space around the whole lockup
|
|
18
|
+
* (the header's own padding satisfies this; consumers embedding the
|
|
19
|
+
* lockup elsewhere own the rule).
|
|
20
|
+
* 5. Standalone glyph fill — on a square canvas (favicon, avatar), the
|
|
21
|
+
* letter's cap height is ~60–70% of the canvas edge; ghost-tile below
|
|
22
|
+
* 20px (DEV-4539).
|
|
23
|
+
* 6. Ratios are locked — scale the lockup uniformly; never resize one
|
|
24
|
+
* element of it. These constants are that lock.
|
|
25
|
+
*
|
|
26
|
+
* The generated-asset pipeline (reeve-services brand_identity
|
|
27
|
+
* svg_templates) mirrors these values — see DEV-5140. Change them together.
|
|
28
|
+
*/
|
|
29
|
+
/** Rule 2 — mark cap height ÷ wordmark cap height. */
|
|
30
|
+
declare const MARK_CAP_RATIO = 1.08;
|
|
31
|
+
/**
|
|
32
|
+
* Rule 7 (DEV-5340) — family construction weights, pixel-matched to the
|
|
33
|
+
* asset family (reeve-mark.svg, MindFortress "M." v2, reeve-services
|
|
34
|
+
* svg_templates): the mark is Black (900), the wordmark ExtraBold (800).
|
|
35
|
+
* The live-DOM lockup previously ran both at semibold (600) — Matt's
|
|
36
|
+
* measured "too thin" on cadasense. Numeric constants are the spec; the
|
|
37
|
+
* *_CLASS twins are the Tailwind application. The generated-asset pipeline
|
|
38
|
+
* mirrors the numeric values — see DEV-5140. Change them together.
|
|
39
|
+
*/
|
|
40
|
+
declare const MARK_WEIGHT = 900;
|
|
41
|
+
declare const MARK_WEIGHT_CLASS = "font-black";
|
|
42
|
+
declare const WORDMARK_WEIGHT = 800;
|
|
43
|
+
declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
|
|
44
|
+
/**
|
|
45
|
+
* Rule 2 + rule 6, applied (DEV-5340 scale-up): the header wordmark runs
|
|
46
|
+
* `text-base` (16px) — family scale; text-sm (14px) measured visibly under
|
|
47
|
+
* the MindFortress navbar mark — so the monogram letter renders at
|
|
48
|
+
* 16 × MARK_CAP_RATIO ≈ 17.3 → 17px. Same font family, and weight does not
|
|
49
|
+
* move cap height (900 vs 800 differ only in stroke), so equal font-size ⇒
|
|
50
|
+
* equal cap height; the ratio rides the font-size.
|
|
51
|
+
*/
|
|
52
|
+
declare const WORDMARK_TEXT_LG = "text-base";
|
|
53
|
+
declare const MONOGRAM_TEXT_LG = "text-[17px]";
|
|
54
|
+
/**
|
|
55
|
+
* Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
|
|
56
|
+
* text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
|
|
57
|
+
* per-surface.
|
|
58
|
+
*/
|
|
59
|
+
declare const LOCKUP_GAP = "gap-2";
|
|
60
|
+
/**
|
|
61
|
+
* Rule 1, applied: the lockup is one locked unit — baseline-aligned inside,
|
|
62
|
+
* centered as a whole by whatever wraps it (e.g. a touch target).
|
|
63
|
+
*/
|
|
64
|
+
declare const LOCKUP_ROW = "flex items-baseline";
|
|
65
|
+
/** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
|
|
66
|
+
declare const GLYPH_CANVAS_FILL = 0.65;
|
|
67
|
+
|
|
68
|
+
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 };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/lib/lockup.ts
|
|
21
|
+
var lockup_exports = {};
|
|
22
|
+
__export(lockup_exports, {
|
|
23
|
+
GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
|
|
24
|
+
LOCKUP_GAP: () => LOCKUP_GAP,
|
|
25
|
+
LOCKUP_ROW: () => LOCKUP_ROW,
|
|
26
|
+
MARK_CAP_RATIO: () => MARK_CAP_RATIO,
|
|
27
|
+
MARK_WEIGHT: () => MARK_WEIGHT,
|
|
28
|
+
MARK_WEIGHT_CLASS: () => MARK_WEIGHT_CLASS,
|
|
29
|
+
MONOGRAM_TEXT_LG: () => MONOGRAM_TEXT_LG,
|
|
30
|
+
WORDMARK_TEXT_LG: () => WORDMARK_TEXT_LG,
|
|
31
|
+
WORDMARK_WEIGHT: () => WORDMARK_WEIGHT,
|
|
32
|
+
WORDMARK_WEIGHT_CLASS: () => WORDMARK_WEIGHT_CLASS
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(lockup_exports);
|
|
35
|
+
var MARK_CAP_RATIO = 1.08;
|
|
36
|
+
var MARK_WEIGHT = 900;
|
|
37
|
+
var MARK_WEIGHT_CLASS = "font-black";
|
|
38
|
+
var WORDMARK_WEIGHT = 800;
|
|
39
|
+
var WORDMARK_WEIGHT_CLASS = "font-extrabold";
|
|
40
|
+
var WORDMARK_TEXT_LG = "text-base";
|
|
41
|
+
var MONOGRAM_TEXT_LG = "text-[17px]";
|
|
42
|
+
var LOCKUP_GAP = "gap-2";
|
|
43
|
+
var LOCKUP_ROW = "flex items-baseline";
|
|
44
|
+
var GLYPH_CANVAS_FILL = 0.65;
|
|
45
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
46
|
+
0 && (module.exports = {
|
|
47
|
+
GLYPH_CANVAS_FILL,
|
|
48
|
+
LOCKUP_GAP,
|
|
49
|
+
LOCKUP_ROW,
|
|
50
|
+
MARK_CAP_RATIO,
|
|
51
|
+
MARK_WEIGHT,
|
|
52
|
+
MARK_WEIGHT_CLASS,
|
|
53
|
+
MONOGRAM_TEXT_LG,
|
|
54
|
+
WORDMARK_TEXT_LG,
|
|
55
|
+
WORDMARK_WEIGHT,
|
|
56
|
+
WORDMARK_WEIGHT_CLASS
|
|
57
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// src/lib/lockup.ts
|
|
2
|
+
var MARK_CAP_RATIO = 1.08;
|
|
3
|
+
var MARK_WEIGHT = 900;
|
|
4
|
+
var MARK_WEIGHT_CLASS = "font-black";
|
|
5
|
+
var WORDMARK_WEIGHT = 800;
|
|
6
|
+
var WORDMARK_WEIGHT_CLASS = "font-extrabold";
|
|
7
|
+
var WORDMARK_TEXT_LG = "text-base";
|
|
8
|
+
var MONOGRAM_TEXT_LG = "text-[17px]";
|
|
9
|
+
var LOCKUP_GAP = "gap-2";
|
|
10
|
+
var LOCKUP_ROW = "flex items-baseline";
|
|
11
|
+
var GLYPH_CANVAS_FILL = 0.65;
|
|
12
|
+
export {
|
|
13
|
+
GLYPH_CANVAS_FILL,
|
|
14
|
+
LOCKUP_GAP,
|
|
15
|
+
LOCKUP_ROW,
|
|
16
|
+
MARK_CAP_RATIO,
|
|
17
|
+
MARK_WEIGHT,
|
|
18
|
+
MARK_WEIGHT_CLASS,
|
|
19
|
+
MONOGRAM_TEXT_LG,
|
|
20
|
+
WORDMARK_TEXT_LG,
|
|
21
|
+
WORDMARK_WEIGHT,
|
|
22
|
+
WORDMARK_WEIGHT_CLASS
|
|
23
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meetreeve/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"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.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
"import": "./dist/tokens/index.mjs",
|
|
18
18
|
"require": "./dist/tokens/index.js"
|
|
19
19
|
},
|
|
20
|
+
"./lockup": {
|
|
21
|
+
"types": "./dist/lockup/index.d.ts",
|
|
22
|
+
"import": "./dist/lockup/index.mjs",
|
|
23
|
+
"require": "./dist/lockup/index.js"
|
|
24
|
+
},
|
|
20
25
|
"./tokens.css": "./dist/tokens.css"
|
|
21
26
|
},
|
|
22
27
|
"files": [
|