@devslab/site-kit 0.12.0 → 0.12.2

package/README.ko.md

@@ -17,6 +17,10 @@ claim leaf가 검증된 사실 레지스트리를 참조하도록 강제한다.
 기존 environment-only 출력은 유지되며, 선택적 `policies`로 검색 인덱싱,
 인용 crawler, 모델 학습 crawler를 각각 제어할 수 있다.
 
+## 하이드레이션
+
+`MarketingShell`은 아무것도 렌더하기 전에 `header`·`footer`를 한 번(메모) 읽는다. `header={{ … }}`는 게터로 컴파일되므로 셸이 prop마다 다시 읽으면 리터럴 안에서 즉시 만들어진 JSX(`actions` 앵커, 로고)가 읽을 때마다 다시 만들어져 하이드레이션 키를 소모하고 — 서버와 브라우저의 횟수가 다르다 — 클라이언트는 헤더를 템플릿에서 다시 만든다. 셸 밖에서 `SiteHeader`·`SiteFooter`를 직접 마운트하는 제품은 같은 방식으로 자기 props를 한 번만 읽어야 한다. 국기 스프라이트는 이유가 무엇이든 클라이언트에 빈 채로 도착하면 본문을 로드한다.
+
 ## 브랜드 아이콘
 
 모든 제품의 아이콘 파일은 `@devslab/linq-brand`(`dist/<product>/`)에서 온다. `brandIconLinks()`는 그중 어떤 파일을 페이지 head가 어떤 순서로 링크하는지 정하는 유일한 자리다.

package/README.md

@@ -17,6 +17,10 @@ still references the verified-fact registry. `buildRobots` keeps its legacy
 environment-only output, while an optional `policies` object can independently
 control search indexing, citation crawlers, and model-training crawlers.
 
+## Hydration
+
+`MarketingShell` reads `header` and `footer` once (a memo) before it renders anything. `header={{ … }}` compiles to a getter; if the shell re-read it per prop, any JSX built eagerly inside the literal (an `actions` anchor, a logo) would be built again on each read and consume hydration keys — a different number of times on the server than in the browser — and the client would rebuild the header from templates. A product that mounts `SiteHeader` or `SiteFooter` directly, outside the shell, has to read its own props once the same way. The flag sprite loads its bodies whenever it reaches the client empty, whatever the reason.
+
 ## Brand icons
 
 Every product's icon files come from `@devslab/linq-brand` (`dist/<product>/`); `brandIconLinks()` is the one place that says which of them a page head links, and in what order:

package/dist/layouts.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonTone } from "@devslab/dds-solid";
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import { type SiteFooterProps, type SiteHeaderProps } from "./chrome";
 import type { SiteMessages } from "./types";
 export interface MarketingShellProps {

package/dist/layouts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.d.ts","sourceRoot":"","sources":["../src/solid/layouts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EAA0B,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAC9F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB;oGACgG;IAChG,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAGxD;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAElD;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CACpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAIpD;AAED,MAAM,WAAW,mBAAmB;IAAG,QAAQ,EAAE,YAAY,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AACzG,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAExD;AAED,MAAM,WAAW,gBAAgB;IAAG,QAAQ,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AAC3H,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAElD"}
+{"version":3,"file":"layouts.d.ts","sourceRoot":"","sources":["../src/solid/layouts.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAA0B,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAC9F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB;oGACgG;IAChG,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAcxD;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAElD;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CACpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAapD;AAED,MAAM,WAAW,mBAAmB;IAAG,QAAQ,EAAE,YAAY,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AACzG,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAExD;AAED,MAAM,WAAW,gBAAgB;IAAG,QAAQ,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AAC3H,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAElD"}

package/dist/locale-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locale-menu.d.ts","sourceRoot":"","sources":["../src/solid/locale-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEvE,OAAO,EAAkB,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG3F,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACnC;AA2JD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAEhD"}
+{"version":3,"file":"locale-menu.d.ts","sourceRoot":"","sources":["../src/solid/locale-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEzD,OAAO,EAAkB,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG3F,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CACnC;AAiKD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAEhD"}

package/dist/solid.js

@@ -1,5 +1,5 @@
 import { className as e, createComponent as t, delegateEvents as n, effect as r, getNextElement as i, getNextMarker as a, insert as o, memo as s, mergeProps as c, runHydrationEvents as l, setAttribute as u, setProperty as d, spread as f, template as p, use as m } from "solid-js/web";
-import { For as h, Show as g, createSignal as _, createUniqueId as v, onMount as y, sharedConfig as b } from "solid-js";
+import { For as h, Show as g, createMemo as _, createSignal as v, createUniqueId as y, onMount as b } from "solid-js";
 import { Button as x, Field as S, Icon as C, IconButton as w } from "@devslab/dds-solid";
 //#region src/core/locales.mjs
 var T = Object.freeze([
@@ -235,7 +235,7 @@ function U(e) {
 	})() : (() => {
 		var t = i(L);
 		return m((t) => {
-			b.context || ne().then((n) => {
+			t.childElementCount > 0 || ne().then((n) => {
 				t.innerHTML = H(e.countries, n, e.uid);
 			});
 		}, t), t;
@@ -280,26 +280,26 @@ function G(e) {
 	})();
 }
 function K(e) {
-	let n, s, c = v(), d = () => B(e), f = () => [...new Set(d().LOCALES.map((e) => I(e.code, d())))], p = () => d().LOCALES.find((t) => t.code === e.state.locale), g = () => {
+	let n, s, c = y(), d = () => B(e), f = () => [...new Set(d().LOCALES.map((e) => I(e.code, d())))], p = () => d().LOCALES.find((t) => t.code === e.state.locale), g = () => {
 		n && (n.open = !1);
 	}, _ = (e) => {
 		e.key !== "Escape" || !n?.open || (e.preventDefault(), g(), s?.focus());
-	}, y = () => {
+	}, v = () => {
 		let t = p()?.nativeName;
 		return t ? `${e.messages.localeLabel}: ${t}` : e.messages.localeLabel;
 	};
 	return (() => {
-		var p = i(ie), v = p.firstChild, b = v.firstChild, [x, S] = a(b.nextSibling), C = x.nextSibling, [w, T] = a(C.nextSibling), E = v.nextSibling;
+		var p = i(ie), y = p.firstChild, b = y.firstChild, [x, S] = a(b.nextSibling), C = x.nextSibling, [w, T] = a(C.nextSibling), E = y.nextSibling;
 		p.$$keydown = _;
 		var D = n;
 		typeof D == "function" ? m(D, p) : n = p;
 		var O = s;
-		return typeof O == "function" ? m(O, v) : s = v, o(v, t(U, {
+		return typeof O == "function" ? m(O, y) : s = y, o(y, t(U, {
 			get countries() {
 				return f();
 			},
 			uid: c
-		}), x, S), o(v, t(W, {
+		}), x, S), o(y, t(W, {
 			get locale() {
 				return e.state.locale;
 			},
@@ -337,8 +337,8 @@ function K(e) {
 				}), l(), s;
 			})()
 		})), r((t) => {
-			var n = y(), r = e.messages.localeLabel;
-			return n !== t.e && u(v, "aria-label", t.e = n), r !== t.t && u(v, "title", t.t = r), t;
+			var n = v(), r = e.messages.localeLabel;
+			return n !== t.e && u(y, "aria-label", t.e = n), r !== t.t && u(y, "title", t.t = r), t;
 		}, {
 			e: void 0,
 			t: void 0
@@ -357,13 +357,13 @@ function Y(e) {
 		"system",
 		"light",
 		"dark"
-	], [r, i] = _(e.defaultValue ?? "system"), [a, o] = _("light"), s = () => a() === "dark" ? "light" : "dark", c = () => s() === "dark" ? e.messages.themeDark : e.messages.themeLight, l = (e) => {
+	], [r, i] = v(e.defaultValue ?? "system"), [a, o] = v("light"), s = () => a() === "dark" ? "light" : "dark", c = () => s() === "dark" ? e.messages.themeDark : e.messages.themeLight, l = (e) => {
 		let t = e === "system" ? matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
 		o(t), document.documentElement.dataset.theme = t, document.documentElement.dataset.themePreference = e;
 	}, u = (t) => {
 		e.value === void 0 && i(t), e.onValueChange?.(t), l(t), localStorage.setItem(e.storageKey ?? "site-theme", t);
 	};
-	return y(() => {
+	return b(() => {
 		let t = localStorage.getItem(e.storageKey ?? "site-theme");
 		e.value === void 0 && t && n.includes(t) && i(t), l(e.value ?? t ?? r());
 	}), t(w, {
@@ -391,7 +391,7 @@ function Y(e) {
 	});
 }
 function X(e) {
-	let [n, l] = _(!1);
+	let [n, l] = v(!1);
 	return (() => {
 		var d = i(se), f = d.firstChild, p = f.nextSibling, m = p.firstChild, g = m.firstChild, [_, v] = a(g.nextSibling), y = _.nextSibling, [b, S] = a(y.nextSibling), C = m.nextSibling, [w, T] = a(C.nextSibling), E = w.nextSibling, D = E.firstChild, O = E.nextSibling, k = O.firstChild, [A, j] = a(k.nextSibling), ee = A.nextSibling, [M, N] = a(ee.nextSibling), P = M.nextSibling, [F, I] = a(P.nextSibling);
 		return o(f, () => e.messages.skipToContent), o(m, () => e.brand.logo, _, v), o(m, () => e.brand.name, b, S), o(p, t(x, {
@@ -543,10 +543,10 @@ n(["keydown", "click"]);
 //#region src/solid/layouts.tsx
 var he = /*#__PURE__*/ p("<div class=site-shell><!$><!/><main id=main-content tabindex=-1></main><!$><!/>"), ge = /*#__PURE__*/ p("<article class=site-legal><header><h1></h1><p><!$><!/>: <time></time></p></header><!$><!/>"), _e = /*#__PURE__*/ p("<section><strong></strong><!$><!/><!$><!/>"), ve = /*#__PURE__*/ p("<div>"), ye = /*#__PURE__*/ p("<main class=\"site-main site-centered-layout\"><h1></h1><p></p><!$><!/><a class=\"dds-btn dds-btn--primary\">"), be = /*#__PURE__*/ p("<main class=\"site-main site-centered-layout\"><h1></h1><p></p><!$><!/><!$><!/><!$><!/>"), xe = /*#__PURE__*/ p("<code>");
 function Se(n) {
-	let s = () => n.mainWidth === "bleed" ? "site-main site-main--bleed" : "site-main";
+	let s = () => n.mainWidth === "bleed" ? "site-main site-main--bleed" : "site-main", l = _(() => n.header), u = _(() => n.footer);
 	return (() => {
-		var l = i(he), u = l.firstChild, [d, f] = a(u.nextSibling), p = d.nextSibling, m = p.nextSibling, [h, g] = a(m.nextSibling);
-		return o(l, t(X, c(() => n.header)), d, f), o(p, () => n.children), o(l, t(Z, c(() => n.footer)), h, g), r(() => e(p, s())), l;
+		var d = i(he), f = d.firstChild, [p, m] = a(f.nextSibling), h = p.nextSibling, g = h.nextSibling, [_, v] = a(g.nextSibling);
+		return o(d, t(X, c(l)), p, m), o(h, () => n.children), o(d, t(Z, c(u)), _, v), r(() => e(h, s())), d;
 	})();
 }
 function Ce(e) {
@@ -556,15 +556,16 @@ function Ce(e) {
 	})();
 }
 function we(n) {
+	let c = _(() => n.children);
 	return (() => {
-		var c = i(_e), l = c.firstChild, d = l.nextSibling, [f, p] = a(d.nextSibling), m = f.nextSibling, [h, g] = a(m.nextSibling);
-		return o(l, () => n.title), o(c, (() => {
-			var e = s(() => !!n.children);
+		var l = i(_e), d = l.firstChild, f = d.nextSibling, [p, m] = a(f.nextSibling), h = p.nextSibling, [g, _] = a(h.nextSibling);
+		return o(d, () => n.title), o(l, (() => {
+			var e = s(() => !!c());
 			return () => e() && (() => {
 				var e = i(ve);
-				return o(e, () => n.children), e;
+				return o(e, c), e;
 			})();
-		})(), f, p), o(c, (() => {
+		})(), p, m), o(l, (() => {
 			var e = s(() => !!n.action);
 			return () => e() && t(x, {
 				get tone() {
@@ -577,14 +578,14 @@ function we(n) {
 					return n.action.label;
 				}
 			});
-		})(), h, g), r((t) => {
+		})(), g, _), r((t) => {
 			var r = `site-status site-status--${n.tone}`, i = n.tone === "danger" ? "alert" : "status", a = n.tone === "danger" ? "assertive" : "polite";
-			return r !== t.e && e(c, t.e = r), i !== t.t && u(c, "role", t.t = i), a !== t.a && u(c, "aria-live", t.a = a), t;
+			return r !== t.e && e(l, t.e = r), i !== t.t && u(l, "role", t.t = i), a !== t.a && u(l, "aria-live", t.a = a), t;
 		}, {
 			e: void 0,
 			t: void 0,
 			a: void 0
-		}), c;
+		}), l;
 	})();
 }
 function Te(e) {
@@ -617,7 +618,7 @@ function Ee(e) {
 //#region src/solid/request-access.tsx
 var De = /*#__PURE__*/ p("<form><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><div aria-live=polite aria-atomic=true>"), Q = /*#__PURE__*/ p("<input>"), Oe = /*#__PURE__*/ p("<textarea>");
 function ke(n) {
-	let [u, d] = _("idle"), p = async (e) => {
+	let [u, d] = v("idle"), p = async (e) => {
 		if (e.preventDefault(), u() !== "submitting") {
 			d("submitting");
 			try {