@net-advantage/jo-ui-logo 1.1.7 → 1.2.0

package/README.md

@@ -2,22 +2,22 @@
 
 JourneyOf wordmark. `journey` uses Inter. The accent `of..` uses Caveat. A dotted curve sits under the word.
 
-The logo follows a strict MVVM split. The model owns defaults and the font address. The view-model projects presentation values and requests the font faces. The view only renders the view-model.
+The logo follows a strict MVVM split. The model owns defaults. The view-model projects presentation values. The view only renders the view-model. Inter and Caveat are self-hosted by `@net-advantage/jo-ui-theme`.
 
 ## MVVM
 
 ```mermaid
 flowchart LR
   Props["LogoProps"] --> ViewModel["useLogoViewModel"]
-  Model["logo.model.ts<br/>defaults and font address"] --> ViewModel
+  Model["logo.model.ts<br/>defaults and class name"] --> ViewModel
   ViewModel --> View["Logo.tsx"]
 ```
 
 | Layer | File | Responsibility |
 | --- | --- | --- |
 | Contract | [logo.types.ts](src/logo.types.ts) | Props and view-model |
-| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, class name, and font address |
-| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families; request font faces |
+| Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, and class name |
+| View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families |
 | View | [Logo.tsx](src/Logo.tsx) | Render the wordmark and dotted curve |
 
 ## Models
@@ -26,7 +26,6 @@ flowchart LR
 flowchart TD
   Defaults["LOGO_DEFAULTS"] --> ViewModel["LogoViewModel"]
   Props["LogoProps"] --> ViewModel
-  Font["LOGO_FONT_HREF"] --> Link["font stylesheet link"]
   ViewModel --> Word["journey"]
   ViewModel --> Accent["of.."]
   ViewModel --> Curve["dotted curve"]
@@ -35,7 +34,7 @@ flowchart TD
 - `primaryColor` colors `journey` and the curve's end dot. It defaults to `#14224a`.
 - `accentColor` colors `of..` and the curve. It defaults to `#6495ed`.
 - `curveWidth` defaults to `80`. `curveHeight` defaults to `10`.
-- The font request lives in the view-model. The model only names the address.
+- Font families stay `Inter` and `Caveat`. Load them with `import '@net-advantage/jo-ui-theme/style.css'`. The logo does not request Google Fonts.
 
 ## Structure
 
@@ -43,11 +42,13 @@ flowchart TD
 
 ## Fonts
 
-The module requests Inter and Caveat from Google Fonts as soon as it loads. It adds one `preconnect` to `fonts.gstatic.com` and one stylesheet link marked `data-jo-ui-logo-fonts`. A second import does not add another link.
+Inter (including weight 800) and Caveat 600 ship in `@net-advantage/jo-ui-theme`. Import that stylesheet once:
 
-Do not request these faces with a CSS `@import` inside `logo.css`. A component stylesheet is often injected after other rules, and the browser then ignores the import. That is why the accent face could look wrong until another screen loaded the font first.
+```ts
+import '@net-advantage/jo-ui-theme/style.css';
+```
 
-The first paint may still use the fallback face until the font files arrive. `display=swap` replaces it with Caveat when the face is ready.
+The faces use `font-display: swap` and are licensed under the SIL Open Font License. The logo package does not add a Google Fonts `<link>` or CSS `@import`.
 
 ## Props
 

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=`https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap`,r={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function i(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function a(e){return e===void 0?null:{width:e}}function o(){if(typeof document>`u`||document.querySelector(`link[data-jo-ui-logo-fonts]`))return;let e=document.createElement(`link`);e.rel=`preconnect`,e.href=`https://fonts.gstatic.com`,e.crossOrigin=`anonymous`,document.head.appendChild(e);let t=document.createElement(`link`);t.rel=`stylesheet`,t.href=n,t.dataset.joUiLogoFonts=`true`,document.head.appendChild(t)}function s(e){let{className:n,primaryColor:s=r.primaryColor,accentColor:c=r.accentColor,width:l,curveWidth:u=r.curveWidth,curveHeight:d=r.curveHeight,rootProps:f}=e;return(0,t.useEffect)(()=>{o()},[]),(0,t.useMemo)(()=>({className:i(n),primaryColor:s,accentColor:c,curveWidth:u,curveHeight:d,widthStyle:a(l),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:f}),[c,n,d,u,s,f,l])}var c=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),l=e(((e,t)=>{t.exports=c()}))();function u(e){let t=s(e);return(0,l.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,l.jsxs)(`p`,{children:[(0,l.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,l.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,l.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,l.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,l.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,l.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}exports.Logo=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function r(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function i(e){return e===void 0?null:{width:e}}function a(e){let{className:a,primaryColor:o=n.primaryColor,accentColor:s=n.accentColor,width:c,curveWidth:l=n.curveWidth,curveHeight:u=n.curveHeight,rootProps:d}=e;return(0,t.useMemo)(()=>({className:r(a),primaryColor:o,accentColor:s,curveWidth:l,curveHeight:u,widthStyle:i(c),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:d}),[s,a,u,l,o,d,c])}var o=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),s=e(((e,t)=>{t.exports=o()}))();function c(e){let t=a(e);return(0,s.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,s.jsxs)(`p`,{children:[(0,s.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,s.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,s.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,s.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,s.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,s.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}exports.Logo=c;

package/dist/index.js

@@ -1,54 +1,45 @@
 import "./jo-ui-logo.css";
-import { useEffect as e, useMemo as t } from "react";
+import { useMemo as e } from "react";
 //#region \0rolldown/runtime.js
-var n = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), r = "https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap", i = {
+var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = {
 	primaryColor: "#14224a",
 	accentColor: "#6495ed",
 	curveWidth: 80,
 	curveHeight: 10
 };
-function a(e) {
+function r(e) {
 	return ["jo-ui-logo", e ?? ""].filter(Boolean).join(" ");
 }
-function o(e) {
+function i(e) {
 	return e === void 0 ? null : { width: e };
 }
 //#endregion
 //#region src/logo.view-model.ts
-function s() {
-	if (typeof document > "u" || document.querySelector("link[data-jo-ui-logo-fonts]")) return;
-	let e = document.createElement("link");
-	e.rel = "preconnect", e.href = "https://fonts.gstatic.com", e.crossOrigin = "anonymous", document.head.appendChild(e);
-	let t = document.createElement("link");
-	t.rel = "stylesheet", t.href = r, t.dataset.joUiLogoFonts = "true", document.head.appendChild(t);
-}
-function c(n) {
-	let { className: r, primaryColor: c = i.primaryColor, accentColor: l = i.accentColor, width: u, curveWidth: d = i.curveWidth, curveHeight: f = i.curveHeight, rootProps: p } = n;
-	return e(() => {
-		s();
-	}, []), t(() => ({
-		className: a(r),
-		primaryColor: c,
-		accentColor: l,
-		curveWidth: d,
-		curveHeight: f,
-		widthStyle: o(u),
+function a(t) {
+	let { className: a, primaryColor: o = n.primaryColor, accentColor: s = n.accentColor, width: c, curveWidth: l = n.curveWidth, curveHeight: u = n.curveHeight, rootProps: d } = t;
+	return e(() => ({
+		className: r(a),
+		primaryColor: o,
+		accentColor: s,
+		curveWidth: l,
+		curveHeight: u,
+		widthStyle: i(c),
 		mainFontFamily: "Inter, 'Segoe UI', system-ui, sans-serif",
 		accentFontFamily: "'Caveat', cursive",
-		rootProps: p
+		rootProps: d
 	}), [
+		s,
+		a,
+		u,
 		l,
-		r,
-		f,
+		o,
 		d,
-		c,
-		p,
-		u
+		c
 	]);
 }
 //#endregion
 //#region ../../node_modules/.pnpm/react@19.3.0/node_modules/react/cjs/react-jsx-runtime.production.js
-var l = /* @__PURE__ */ n(((e) => {
+var o = /* @__PURE__ */ t(((e) => {
 	var t = Symbol.for("react.transitional.element");
 	function n(e, n, r) {
 		var i = null;
@@ -63,17 +54,17 @@ var l = /* @__PURE__ */ n(((e) => {
 		};
 	}
 	e.jsx = n, e.jsxs = n;
-})), u = (/* @__PURE__ */ n(((e, t) => {
-	t.exports = l();
+})), s = (/* @__PURE__ */ t(((e, t) => {
+	t.exports = o();
 })))();
-function d(e) {
-	let t = c(e);
-	return /* @__PURE__ */ (0, u.jsxs)("div", {
+function c(e) {
+	let t = a(e);
+	return /* @__PURE__ */ (0, s.jsxs)("div", {
 		...t.rootProps,
 		className: t.className,
 		style: t.widthStyle ?? void 0,
 		"aria-label": "JourneyOf",
-		children: [/* @__PURE__ */ (0, u.jsxs)("p", { children: [/* @__PURE__ */ (0, u.jsx)("span", {
+		children: [/* @__PURE__ */ (0, s.jsxs)("p", { children: [/* @__PURE__ */ (0, s.jsx)("span", {
 			style: {
 				fontFamily: t.mainFontFamily,
 				fontWeight: 800,
@@ -81,7 +72,7 @@ function d(e) {
 				color: t.primaryColor
 			},
 			children: "journey"
-		}), /* @__PURE__ */ (0, u.jsx)("span", {
+		}), /* @__PURE__ */ (0, s.jsx)("span", {
 			style: {
 				fontFamily: t.accentFontFamily,
 				fontWeight: 600,
@@ -89,14 +80,14 @@ function d(e) {
 				color: t.accentColor
 			},
 			children: "of.."
-		})] }), /* @__PURE__ */ (0, u.jsxs)("svg", {
+		})] }), /* @__PURE__ */ (0, s.jsxs)("svg", {
 			width: t.curveWidth,
 			height: t.curveHeight,
 			viewBox: "0 0 100 15",
 			"aria-hidden": "true",
 			focusable: "false",
 			children: [
-				/* @__PURE__ */ (0, u.jsx)("path", {
+				/* @__PURE__ */ (0, s.jsx)("path", {
 					d: "M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3",
 					fill: "none",
 					stroke: t.accentColor,
@@ -105,13 +96,13 @@ function d(e) {
 					strokeDasharray: "0.2 6",
 					opacity: "0.9"
 				}),
-				/* @__PURE__ */ (0, u.jsx)("circle", {
+				/* @__PURE__ */ (0, s.jsx)("circle", {
 					cx: "2",
 					cy: "4",
 					r: "2.2",
 					fill: t.accentColor
 				}),
-				/* @__PURE__ */ (0, u.jsx)("circle", {
+				/* @__PURE__ */ (0, s.jsx)("circle", {
 					cx: "90",
 					cy: "3",
 					r: "2.2",
@@ -122,4 +113,4 @@ function d(e) {
 	});
 }
 //#endregion
-export { d as Logo };
+export { c as Logo };

package/dist/logo.model.d.ts

@@ -1,4 +1,3 @@
-export declare const LOGO_FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@800&family=Caveat:wght@600&display=swap";
 export declare const LOGO_DEFAULTS: {
     readonly primaryColor: "#14224a";
     readonly accentColor: "#6495ed";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net-advantage/jo-ui-logo",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",