@krizaka/ui 3.25.0 → 3.27.0

package/dist/index.js

@@ -18,63 +18,59 @@ import {
   YomizakaLogo,
   YororisLogo,
   a11y,
-  neutral
-} from "./chunk-4DH2HW3D.js";
+  neutral,
+  useIds
+} from "./chunk-TFJDIOFK.js";
 
 // src/marks/wu-sama-geometry.ts
-var round = (n) => Math.round(n * 10) / 10;
-var center = 200;
-var radius = 150;
-var u = radius * Math.sqrt(3) / 2;
-var gap = 10;
-var hexagon = [
-  [center, center - radius],
-  [round(center + u), center - radius / 2],
-  [round(center + u), center + radius / 2],
-  [center, center + radius],
-  [round(center - u), center + radius / 2],
-  [round(center - u), center - radius / 2]
-];
-var [T, UR, LR, B, LL, UL] = hexagon;
-var onEdge = (a, b, x) => [x, round(a[1] + (x - a[0]) / (b[0] - a[0]) * (b[1] - a[1]))];
-var pt = ([x, y]) => `${x},${y}`;
-var left = [onEdge(T, UL, center - gap), UL, LL, onEdge(B, LL, center - gap)];
-var right = [onEdge(T, UR, center + gap), UR, LR, onEdge(B, LR, center + gap)];
-var wPoints = [
-  [round(center - 0.63 * u), round(center - 0.4 * radius)],
-  [round(center - 0.37 * u), round(center + 0.55 * radius)],
-  [center, round(center - 0.03 * radius)],
-  [round(center + 0.37 * u), round(center + 0.55 * radius)],
-  [round(center + 0.63 * u), round(center - 0.4 * radius)]
-];
-var peak = wPoints[2];
+import { marks } from "@krizaka/tokens/native";
 var WU_SAMA = {
   viewBox: "0 0 400 400",
-  croppedViewBox: "34 34 332 332",
-  center,
-  radius,
-  gap,
-  hexagon,
-  /** The two halves of the hexagon (open at the top and bottom vertices), stroked in ink. */
-  shell: { left: `M${left.map(pt).join(" L")}`, right: `M${right.map(pt).join(" L")}`, stroke: 22 },
-  /** The W, stroked in gold. */
-  w: `M${wPoints.map(pt).join(" L")}`,
-  wStroke: 26,
-  /** The node: the family's lit node, a small diamond at the W's middle summit, in ink. */
-  node: `M${center},${round(peak[1] - 24)} L${center + 18},${peak[1]} L${center},${round(peak[1] + 24)} L${center - 18},${peak[1]}Z`,
-  /** One mid-tone amber, hsl(40 94% 37%): 3.3:1 on white and 5.8:1 on the dark surface. */
-  gold: "hsl(40 94% 37%)"
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  /** The shield: the Krizaka pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */
+  shield: "M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5",
+  stroke: 22,
+  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },
+  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },
+  /** The vertex where the shield opens: a lit node in Krizaka blue. */
+  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },
+  /** The W: five straight legs in Krizaka blue. */
+  w: "M132,142 L154,216 L180,166 L206,216 L228,142",
+  wStroke: 18,
+  highlight: "#dbeafe",
+  glow: { color: "#196df5", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
 };
 
 // src/marks/WuSamaMark.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function WuSamaMark({ size = 32, title, className }) {
-  const ink = neutral("--kz-text-primary", 92);
+  const id = useIds("wsm", ["ink", "blue", "glow"]);
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: size < 48 ? WU_SAMA.croppedViewBox : WU_SAMA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
-    /* @__PURE__ */ jsx("path", { d: WU_SAMA.shell.left, stroke: ink, strokeWidth: WU_SAMA.shell.stroke, strokeLinejoin: "miter", strokeLinecap: "butt" }),
-    /* @__PURE__ */ jsx("path", { d: WU_SAMA.shell.right, stroke: ink, strokeWidth: WU_SAMA.shell.stroke, strokeLinejoin: "miter", strokeLinecap: "butt" }),
-    /* @__PURE__ */ jsx("path", { d: WU_SAMA.w, stroke: WU_SAMA.gold, strokeWidth: WU_SAMA.wStroke, strokeLinejoin: "miter", strokeMiterlimit: 4, strokeLinecap: "butt" }),
-    /* @__PURE__ */ jsx("path", { d: WU_SAMA.node, fill: ink })
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("linearGradient", { id: id.ink, gradientUnits: "userSpaceOnUse", x1: WU_SAMA.ink.x1, y1: WU_SAMA.ink.y1, x2: WU_SAMA.ink.x2, y2: WU_SAMA.ink.y2, children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: neutral("--kz-text-secondary", 60) }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: neutral("--kz-text-primary", 92) })
+      ] }),
+      /* @__PURE__ */ jsx("linearGradient", { id: id.blue, gradientUnits: "userSpaceOnUse", x1: WU_SAMA.blue.x1, y1: WU_SAMA.blue.y1, x2: WU_SAMA.blue.x2, y2: WU_SAMA.blue.y2, children: WU_SAMA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: WU_SAMA.glow.color, stopOpacity: WU_SAMA.glow.opacity }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: WU_SAMA.glow.color, stopOpacity: "0" })
+      ] })
+    ] }),
+    size >= 48 ? /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: "190", fill: `url(#${id.glow})` }) : null,
+    size >= 48 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: WU_SAMA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: WU_SAMA.orbit.width, strokeDasharray: WU_SAMA.orbit.dash, opacity: ".6" }),
+      /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: WU_SAMA.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: WU_SAMA.ring.width, opacity: ".35" })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${WU_SAMA.offset} ${WU_SAMA.offset})`, children: [
+      /* @__PURE__ */ jsx("path", { d: WU_SAMA.shield, stroke: `url(#${id.ink})`, strokeWidth: WU_SAMA.stroke, strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("circle", { cx: WU_SAMA.node.cx, cy: WU_SAMA.node.cy, r: WU_SAMA.node.r, fill: `url(#${id.blue})` }),
+      /* @__PURE__ */ jsx("circle", { cx: WU_SAMA.node.cx, cy: WU_SAMA.node.cy, r: WU_SAMA.node.inner, fill: WU_SAMA.highlight }),
+      /* @__PURE__ */ jsx("path", { d: WU_SAMA.w, stroke: `url(#${id.blue})`, strokeWidth: WU_SAMA.wStroke, strokeLinecap: "round", strokeLinejoin: "round" })
+    ] })
   ] });
 }
 export {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marks/wu-sama-geometry.ts","../src/marks/WuSamaMark.tsx"],"sourcesContent":["/**\n * The Wu-sama mark's geometry — the founder's byline mark. **Original mark, inspired by, not derived from**: it is the\n * Krizaka hexagon (a pointy-top regular hexagon in the 400×400 frame of the family), split at its top and bottom\n * vertices into two halves like the Krizaka shield that opens at one vertex, around a W of five straight legs whose\n * points are measured on that hexagon (`u`, its half-width, and `radius`) — see `wu-sama-geometry` tests. It is not\n * the Wu-Tang Clan's mark: no bat-wing silhouette, no curve, no black-and-yellow composition. The gold is one fixed\n * mid-tone amber (≥ 3:1 on the page surfaces of both themes), a hip-hop nod and not that clan's yellow.\n */\nconst round = (n: number) => Math.round(n * 10) / 10;\nconst center = 200;\nconst radius = 150;\n/** Half the hexagon's width. */\nconst u = (radius * Math.sqrt(3)) / 2;\nconst gap = 10;\n\n/** T, UR, LR, B, LL, UL. */\nconst hexagon = [\n  [center, center - radius],\n  [round(center + u), center - radius / 2],\n  [round(center + u), center + radius / 2],\n  [center, center + radius],\n  [round(center - u), center + radius / 2],\n  [round(center - u), center - radius / 2],\n] as const;\nconst [T, UR, LR, B, LL, UL] = hexagon;\n\n/** The point of the edge a→b whose x is `x`. */\nconst onEdge = (a: readonly [number, number], b: readonly [number, number], x: number) => [x, round(a[1] + ((x - a[0]) / (b[0] - a[0])) * (b[1] - a[1]))] as const;\nconst pt = ([x, y]: readonly [number, number]) => `${x},${y}`;\n\nconst left = [onEdge(T, UL, center - gap), UL, LL, onEdge(B, LL, center - gap)] as const;\nconst right = [onEdge(T, UR, center + gap), UR, LR, onEdge(B, LR, center + gap)] as const;\n\n/** The W: tips and valleys at fixed fractions of the hexagon's half-width and radius; the middle summit on the axis. */\nconst wPoints = [\n  [round(center - 0.63 * u), round(center - 0.4 * radius)],\n  [round(center - 0.37 * u), round(center + 0.55 * radius)],\n  [center, round(center - 0.03 * radius)],\n  [round(center + 0.37 * u), round(center + 0.55 * radius)],\n  [round(center + 0.63 * u), round(center - 0.4 * radius)],\n] as const;\nconst peak = wPoints[2];\n\nexport const WU_SAMA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"34 34 332 332\",\n  center,\n  radius,\n  gap,\n  hexagon,\n  /** The two halves of the hexagon (open at the top and bottom vertices), stroked in ink. */\n  shell: { left: `M${left.map(pt).join(\" L\")}`, right: `M${right.map(pt).join(\" L\")}`, stroke: 22 },\n  /** The W, stroked in gold. */\n  w: `M${wPoints.map(pt).join(\" L\")}`,\n  wStroke: 26,\n  /** The node: the family's lit node, a small diamond at the W's middle summit, in ink. */\n  node: `M${center},${round(peak[1] - 24)} L${center + 18},${peak[1]} L${center},${round(peak[1] + 24)} L${center - 18},${peak[1]}Z`,\n  /** One mid-tone amber, hsl(40 94% 37%): 3.3:1 on white and 5.8:1 on the dark surface. */\n  gold: \"hsl(40 94% 37%)\",\n} as const;\n","import { a11y, type MarkProps, neutral } from \"./shared\";\nimport { WU_SAMA as G } from \"./wu-sama-geometry\";\n\n/**\n * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps\n * `KrizakaLogo`). Oussama's nickname is Wu-sama: a W of five straight legs in gold inside the Krizaka hexagon, split\n * at its top and bottom vertices, a small lit node at the middle summit. Still: no orbit, no pulse. The hexagon and the\n * node read the host's text role, so they are ink in both themes; the gold is one mid-tone amber that reads on both.\n *\n * **Original mark, inspired by, not derived from**: it nods to the culture its name comes from but is built from the\n * Krizaka hexagon's own measures (see `wu-sama-geometry.ts` and its tests), never from the Wu-Tang Clan's registered\n * logo — no bat-wing W, no curve, no yellow-on-black copy. Below 48 px it crops to the emblem.\n */\nexport function WuSamaMark({ size = 32, title, className }: Omit<MarkProps, \"animated\"> & { animated?: boolean }) {\n  const ink = neutral(\"--kz-text-primary\", 92);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <path d={G.shell.left} stroke={ink} strokeWidth={G.shell.stroke} strokeLinejoin=\"miter\" strokeLinecap=\"butt\" />\n      <path d={G.shell.right} stroke={ink} strokeWidth={G.shell.stroke} strokeLinejoin=\"miter\" strokeLinecap=\"butt\" />\n      <path d={G.w} stroke={G.gold} strokeWidth={G.wStroke} strokeLinejoin=\"miter\" strokeMiterlimit={4} strokeLinecap=\"butt\" />\n      <path d={G.node} fill={ink} />\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/marks/wu-sama-geometry.ts","../src/marks/WuSamaMark.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Wu-sama mark's geometry — the founder's byline mark.\n * It shares the Krizaka shield contour (pointy-top hexagonal shield with open vertex and lit node)\n * and brand colors, holding a W of five straight legs in Krizaka blue at its center.\n */\nexport const WU_SAMA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  /** The shield: the Krizaka pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */\n  shield: \"M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5\",\n  stroke: 22,\n  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },\n  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },\n  /** The vertex where the shield opens: a lit node in Krizaka blue. */\n  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n  /** The W: five straight legs in Krizaka blue. */\n  w: \"M132,142 L154,216 L180,166 L206,216 L228,142\",\n  wStroke: 18,\n  highlight: \"#dbeafe\",\n  glow: { color: \"#196df5\", opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\nimport { WU_SAMA as G } from \"./wu-sama-geometry\";\n\n/**\n * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps `KrizakaLogo`).\n * Oussama's nickname is Wu-sama: it shares Krizaka's hexagonal shield contour and color palette (ink shield, open\n * vertex with lit blue node), with the W rendered in Krizaka blue at the center. Below 48 px it crops to the emblem.\n */\nexport function WuSamaMark({ size = 32, title, className }: Omit<MarkProps, \"animated\"> & { animated?: boolean }) {\n  const id = useIds(\"wsm\", [\"ink\", \"blue\", \"glow\"] as const);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <defs>\n        <linearGradient id={id.ink} gradientUnits=\"userSpaceOnUse\" x1={G.ink.x1} y1={G.ink.y1} x2={G.ink.x2} y2={G.ink.y2}>\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 60)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-primary\", 92)} />\n        </linearGradient>\n        <linearGradient id={id.blue} gradientUnits=\"userSpaceOnUse\" x1={G.blue.x1} y1={G.blue.y1} x2={G.blue.x2} y2={G.blue.y2}>\n          {G.blue.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx=\"200\" cy=\"200\" r=\"190\" fill={`url(#${id.glow})`} /> : null}\n      {size >= 48 ? (\n        <>\n          <circle cx=\"200\" cy=\"200\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n          <circle cx=\"200\" cy=\"200\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        </>\n      ) : null}\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.r} fill={`url(#${id.blue})`} />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.inner} fill={G.highlight} />\n        <path d={G.w} stroke={`url(#${id.blue})`} strokeWidth={G.wStroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </g>\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/language-switch/server.d.ts

@@ -0,0 +1,17 @@
+/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */
+interface Language {
+    code: string;
+    name: string;
+    href: string;
+}
+/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */
+declare const languageNames: Readonly<Record<string, string>>;
+/**
+ * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is
+ * one of `locales`; an address without a language prefix gets one. Query and hash are kept.
+ */
+declare function languageHref(path: string, to: string, locales?: readonly string[]): string;
+/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */
+declare function languagesFor(path: string, locales?: readonly string[]): Language[];
+
+export { type Language, languageHref, languageNames, languagesFor };

package/dist/language-switch/server.js

@@ -0,0 +1,26 @@
+// src/language-switch/href.ts
+var languageNames = {
+  en: "English",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  de: "Deutsch",
+  it: "Italiano",
+  pt: "Portugu\xEAs"
+};
+function languageHref(path, to, locales = ["en", "fr"]) {
+  const splitIndex = path.search(/[?#]/);
+  const pathname = splitIndex === -1 ? path : path.slice(0, splitIndex);
+  const rest = splitIndex === -1 ? "" : path.slice(splitIndex);
+  const segments = (pathname || "/").split("/").filter(Boolean);
+  if (segments[0] && locales.includes(segments[0])) segments.shift();
+  return `/${[to, ...segments].join("/")}${rest}`;
+}
+function languagesFor(path, locales = ["en", "fr"]) {
+  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));
+}
+export {
+  languageHref,
+  languageNames,
+  languagesFor
+};
+//# sourceMappingURL=server.js.map

package/dist/language-switch/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/language-switch/href.ts"],"sourcesContent":["/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */\nexport interface Language {\n  code: string;\n  name: string;\n  href: string;\n}\n\n/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */\nexport const languageNames: Readonly<Record<string, string>> = {\n  en: \"English\",\n  fr: \"Français\",\n  es: \"Español\",\n  de: \"Deutsch\",\n  it: \"Italiano\",\n  pt: \"Português\",\n};\n\n/**\n * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is\n * one of `locales`; an address without a language prefix gets one. Query and hash are kept.\n */\nexport function languageHref(path: string, to: string, locales: readonly string[] = [\"en\", \"fr\"]): string {\n  const splitIndex = path.search(/[?#]/);\n  const pathname = splitIndex === -1 ? path : path.slice(0, splitIndex);\n  const rest = splitIndex === -1 ? \"\" : path.slice(splitIndex);\n  const segments = (pathname || \"/\").split(\"/\").filter(Boolean);\n  if (segments[0] && locales.includes(segments[0])) segments.shift();\n  return `/${[to, ...segments].join(\"/\")}${rest}`;\n}\n\n/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */\nexport function languagesFor(path: string, locales: readonly string[] = [\"en\", \"fr\"]): Language[] {\n  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));\n}\n"],"mappings":";AAQO,IAAM,gBAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,aAAa,MAAc,IAAY,UAA6B,CAAC,MAAM,IAAI,GAAW;AACxG,QAAM,aAAa,KAAK,OAAO,MAAM;AACrC,QAAM,WAAW,eAAe,KAAK,OAAO,KAAK,MAAM,GAAG,UAAU;AACpE,QAAM,OAAO,eAAe,KAAK,KAAK,KAAK,MAAM,UAAU;AAC3D,QAAM,YAAY,YAAY,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC5D,MAAI,SAAS,CAAC,KAAK,QAAQ,SAAS,SAAS,CAAC,CAAC,EAAG,UAAS,MAAM;AACjE,SAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,GAAG,IAAI;AAC/C;AAGO,SAAS,aAAa,MAAc,UAA6B,CAAC,MAAM,IAAI,GAAe;AAChG,SAAO,QAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,MAAM,cAAc,IAAI,KAAK,KAAK,YAAY,GAAG,MAAM,aAAa,MAAM,MAAM,OAAO,EAAE,EAAE;AACnI;","names":[]}

package/dist/language-switch.d.ts

@@ -0,0 +1,120 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */
+interface Language {
+    code: string;
+    name: string;
+    href: string;
+}
+/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */
+declare const languageNames: Readonly<Record<string, string>>;
+/**
+ * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is
+ * one of `locales`; an address without a language prefix gets one. Query and hash are kept.
+ */
+declare function languageHref(path: string, to: string, locales?: readonly string[]): string;
+/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */
+declare function languagesFor(path: string, locales?: readonly string[]): Language[];
+
+declare const languageSwitch: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            heading?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            glyph?: tailwind_variants.ClassValue;
+            panel?: tailwind_variants.ClassValue;
+            check?: tailwind_variants.ClassValue;
+            inline?: tailwind_variants.ClassValue;
+            trigger?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            inlineLink?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    trigger: string;
+    glyph: string;
+    panel: string;
+    heading: string;
+    item: string;
+    check: string;
+    inline: string;
+    inlineLink: string;
+}>>;
+type LanguageSwitchProps = {
+    /** The control's accessible name (“Language”, “Langue”) — passed translated. */
+    label: string;
+    /** The code of the page's language (`fr`). */
+    current: string;
+    /** The languages offered, each with its name in its own language and the address of the same page (`languagesFor`). */
+    languages: readonly Language[];
+    /**
+     * `menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).
+     * @default "menu"
+     */
+    variant?: "menu" | "inline";
+    /** Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise. */
+    linkAs?: React.ElementType;
+    /** Opens the menu at first render (a story, a screenshot). */
+    defaultOpen?: boolean;
+    /** Classes of the control. */
+    className?: string;
+};
+/**
+ * The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code
+ * (`FR`) — that opens a menu of the languages named in their own language (Français · English), each a link with
+ * `hreflang` to the same page. It shows the language you are in, never the “other” one. `variant="inline"` lays the
+ * languages in a row for a phone's panel or a settings page.
+ */
+declare function LanguageSwitch({ label, current, languages, variant, linkAs, defaultOpen, className }: LanguageSwitchProps): React.JSX.Element;
+
+export { type Language, LanguageSwitch, type LanguageSwitchProps, languageHref, languageNames, languageSwitch, languagesFor };

package/dist/language-switch.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  LanguageSwitch,
+  languageSwitch
+} from "./chunk-3S4GHSPZ.js";
+
+// src/language-switch/href.ts
+var languageNames = {
+  en: "English",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  de: "Deutsch",
+  it: "Italiano",
+  pt: "Portugu\xEAs"
+};
+function languageHref(path, to, locales = ["en", "fr"]) {
+  const splitIndex = path.search(/[?#]/);
+  const pathname = splitIndex === -1 ? path : path.slice(0, splitIndex);
+  const rest = splitIndex === -1 ? "" : path.slice(splitIndex);
+  const segments = (pathname || "/").split("/").filter(Boolean);
+  if (segments[0] && locales.includes(segments[0])) segments.shift();
+  return `/${[to, ...segments].join("/")}${rest}`;
+}
+function languagesFor(path, locales = ["en", "fr"]) {
+  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));
+}
+export {
+  LanguageSwitch,
+  languageHref,
+  languageNames,
+  languageSwitch,
+  languagesFor
+};
+//# sourceMappingURL=language-switch.js.map

package/dist/language-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/language-switch/href.ts"],"sourcesContent":["/** A language the site speaks: its code (`fr`), its name in its own language (`Français`) and the address of the page in it. */\nexport interface Language {\n  code: string;\n  name: string;\n  href: string;\n}\n\n/** The languages of the family, each named in its own language — the switch never shows “French” to a French reader. */\nexport const languageNames: Readonly<Record<string, string>> = {\n  en: \"English\",\n  fr: \"Français\",\n  es: \"Español\",\n  de: \"Deutsch\",\n  it: \"Italiano\",\n  pt: \"Português\",\n};\n\n/**\n * The same page in another language: `/fr/baux?x=1#a` → `/en/baux?x=1#a`. The first segment is the language when it is\n * one of `locales`; an address without a language prefix gets one. Query and hash are kept.\n */\nexport function languageHref(path: string, to: string, locales: readonly string[] = [\"en\", \"fr\"]): string {\n  const splitIndex = path.search(/[?#]/);\n  const pathname = splitIndex === -1 ? path : path.slice(0, splitIndex);\n  const rest = splitIndex === -1 ? \"\" : path.slice(splitIndex);\n  const segments = (pathname || \"/\").split(\"/\").filter(Boolean);\n  if (segments[0] && locales.includes(segments[0])) segments.shift();\n  return `/${[to, ...segments].join(\"/\")}${rest}`;\n}\n\n/** The `languages` of a switch for the page at `path`, in the order of `locales`, each named in its own language. */\nexport function languagesFor(path: string, locales: readonly string[] = [\"en\", \"fr\"]): Language[] {\n  return locales.map((code) => ({ code, name: languageNames[code] ?? code.toUpperCase(), href: languageHref(path, code, locales) }));\n}\n"],"mappings":";;;;;;;AAQO,IAAM,gBAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,aAAa,MAAc,IAAY,UAA6B,CAAC,MAAM,IAAI,GAAW;AACxG,QAAM,aAAa,KAAK,OAAO,MAAM;AACrC,QAAM,WAAW,eAAe,KAAK,OAAO,KAAK,MAAM,GAAG,UAAU;AACpE,QAAM,OAAO,eAAe,KAAK,KAAK,KAAK,MAAM,UAAU;AAC3D,QAAM,YAAY,YAAY,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC5D,MAAI,SAAS,CAAC,KAAK,QAAQ,SAAS,SAAS,CAAC,CAAC,EAAG,UAAS,MAAM;AACjE,SAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,GAAG,IAAI;AAC/C;AAGO,SAAS,aAAa,MAAc,UAA6B,CAAC,MAAM,IAAI,GAAe;AAChG,SAAO,QAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,MAAM,cAAc,IAAI,KAAK,KAAK,YAAY,GAAG,MAAM,aAAa,MAAM,MAAM,OAAO,EAAE,EAAE;AACnI;","names":[]}

package/dist/nav-bar.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import { NavigationMenu } from 'radix-ui';
 import * as React from 'react';
+import { LanguageSwitchProps } from './language-switch.js';
 import { S as SiteId, F as FamilyLabels } from './sites-CHp_vELn.js';
 
 declare const navBar: tailwind_variants.TVReturnType<{
@@ -181,9 +182,19 @@ type NavBarMenuProps = Omit<React.ComponentProps<typeof NavigationMenu.Item>, "c
      * @default 1
      */
     columns?: 1 | 2;
+    /**
+     * A section with this many links or fewer needs no hidden list: they sit in the bar as plain links (the active one
+     * marked, no dropdown, `label` unused on the desktop). Above it, a dropdown. `0` always makes a dropdown.
+     * @default 3
+     */
+    inlineUpTo?: number;
 };
-/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */
-declare function NavBarMenu({ label, active, columns, children, className, ...props }: NavBarMenuProps): React.JSX.Element;
+/**
+ * A menu of the bar: its trigger, and its links in a panel that opens under the bar. A menu of `inlineUpTo` links or
+ * fewer (3 by default) is not a menu at all: its links stand in the bar, each with its active state — a hidden list of
+ * three is one click more for nothing. The phone's panel groups them as usual (`NavBar.MobileGroup`).
+ */
+declare function NavBarMenu({ label, active, columns, inlineUpTo, children, className, ...props }: NavBarMenuProps): React.JSX.Element;
 type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof NavigationMenu.Link>, "title" | "active"> & {
     /** The link's name — passed translated. */
     title: string;
@@ -252,6 +263,18 @@ type NavBarBadgeProps = React.ComponentProps<"span"> & {
 };
 /** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */
 declare function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps): React.JSX.Element;
+type NavBarLanguageProps = Omit<LanguageSwitchProps, "variant">;
+/**
+ * The language switch, the same on every site: in the bar a globe and the current code (FR) opening a short menu of
+ * the languages by their own names; inside `NavBar.Mobile` the same languages as a row in the preferences.
+ */
+declare function NavBarLanguage(props: NavBarLanguageProps): React.JSX.Element;
+type NavBarMobilePreferencesProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The group's heading (“Preferences”) — passed translated. */
+    label: string;
+};
+/** The last group of the mobile panel: the preferences (theme, `NavBar.Language`), in a row under their heading. */
+declare function NavBarMobilePreferences({ label, className, children, ...props }: NavBarMobilePreferencesProps): React.JSX.Element;
 type NavBarRepoProps = Omit<React.ComponentProps<"a">, "children"> & {
     /** The repository the site is built from. */
     href: string;
@@ -261,7 +284,7 @@ type NavBarRepoProps = Omit<React.ComponentProps<"a">, "children"> & {
 /** The site's repository on GitHub, an icon link of `NavBar.Actions`. */
 declare function NavBarRepo({ label, className, ...props }: NavBarRepoProps): React.JSX.Element;
 /**
- * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Mobile/MobileGroup/MobileLink` — the Krizaka navigation bar,
+ * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Language/Mobile/MobileGroup/MobilePreferences/MobileLink` — the Krizaka navigation bar,
  * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light
  * gliding between its items, accessible menus, a mobile panel.
  */
@@ -276,9 +299,34 @@ declare const NavBar: {
     MenuLink: typeof NavBarMenuLink;
     Actions: typeof NavBarActions;
     Repo: typeof NavBarRepo;
+    Language: typeof NavBarLanguage;
     Mobile: typeof NavBarMobile;
+    MobilePreferences: typeof NavBarMobilePreferences;
     MobileGroup: typeof NavBarMobileGroup;
     MobileLink: typeof NavBarMobileLink;
 };
 
-export { NavBar, NavBarActions, NavBarBadge, type NavBarBadgeProps, NavBarBrand, type NavBarBrandProps, NavBarFamily, type NavBarFamilyProps, NavBarItems, type NavBarItemsProps, NavBarLink, type NavBarLinkProps, NavBarMenu, NavBarMenuLink, type NavBarMenuLinkProps, type NavBarMenuProps, NavBarMobile, NavBarMobileGroup, type NavBarMobileGroupProps, NavBarMobileLink, type NavBarMobileLinkProps, type NavBarMobileProps, NavBarRepo, type NavBarRepoProps, NavBarRoot, type NavBarRootProps, navBar };
+/**
+ * Where a menu panel of the bar sits: its left edge under its trigger's, pushed back inside the page when it would run
+ * past the right edge, never closer to the left edge than the gutter. All values are pixels of the page (a bounding
+ * rect's `left`, a width), the result is the panel's `left` relative to the bar's navigation (`root`). Pure, so a
+ * viewport of 360 px and one of 1280 px are tested without a browser.
+ */
+interface PlacePanel {
+    /** The trigger's left edge. */
+    trigger: number;
+    /** The navigation's left edge (the panel is positioned inside it). */
+    root: number;
+    /** The panel's width. */
+    panel: number;
+    /** The window's width. */
+    window: number;
+    /**
+     * The space kept between the panel and the window's edges.
+     * @default 16
+     */
+    gutter?: number;
+}
+declare function placePanel({ trigger, root, panel, window, gutter }: PlacePanel): number;
+
+export { NavBar, NavBarActions, NavBarBadge, type NavBarBadgeProps, NavBarBrand, type NavBarBrandProps, NavBarFamily, type NavBarFamilyProps, NavBarItems, type NavBarItemsProps, NavBarLanguage, type NavBarLanguageProps, NavBarLink, type NavBarLinkProps, NavBarMenu, NavBarMenuLink, type NavBarMenuLinkProps, type NavBarMenuProps, NavBarMobile, NavBarMobileGroup, type NavBarMobileGroupProps, NavBarMobileLink, type NavBarMobileLinkProps, NavBarMobilePreferences, type NavBarMobilePreferencesProps, type NavBarMobileProps, NavBarRepo, type NavBarRepoProps, NavBarRoot, type NavBarRootProps, type PlacePanel, navBar, placePanel };