@krizaka/ui 2.0.0 → 2.2.0
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/README.md +12 -6
- package/dist/index.d.ts +2 -1
- package/dist/index.js +52 -10
- package/dist/index.js.map +1 -1
- package/dist/mascots.d.ts +40 -0
- package/dist/mascots.js +253 -0
- package/dist/mascots.js.map +1 -0
- package/dist/native.d.ts +40 -1
- package/dist/native.js +373 -233
- package/dist/native.js.map +1 -1
- package/dist/theme.d.ts +18 -8
- package/dist/theme.js +7 -4
- package/dist/theme.js.map +1 -1
- package/package.json +14 -4
- package/registry/alert.json +1 -1
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/button.json +1 -1
- package/registry/card.json +1 -1
- package/registry/checkbox.json +1 -1
- package/registry/chip.json +1 -1
- package/registry/command.json +1 -1
- package/registry/confirm-button.json +1 -1
- package/registry/countdown.json +1 -1
- package/registry/dialog.json +1 -1
- package/registry/dropdown-menu.json +1 -1
- package/registry/empty-state.json +1 -1
- package/registry/examples/mascots/empty-state.d.ts +4 -0
- package/registry/examples/mascots/empty-state.js +24 -0
- package/registry/examples/mascots/empty-state.tsx +18 -0
- package/registry/examples/mascots/flock.d.ts +4 -0
- package/registry/examples/mascots/flock.js +14 -0
- package/registry/examples/mascots/flock.tsx +15 -0
- package/registry/examples/mascots/long-task.d.ts +4 -0
- package/registry/examples/mascots/long-task.js +18 -0
- package/registry/examples/mascots/long-task.tsx +15 -0
- package/registry/examples/mascots/moods.d.ts +4 -0
- package/registry/examples/mascots/moods.js +14 -0
- package/registry/examples/mascots/moods.tsx +15 -0
- package/registry/examples/mascots/native/default.d.ts +4 -0
- package/registry/examples/mascots/native/default.dark.png +0 -0
- package/registry/examples/mascots/native/default.js +25 -0
- package/registry/examples/mascots/native/default.light.png +0 -0
- package/registry/examples/mascots/native/default.tsx +22 -0
- package/registry/examples/mascots/own-tone.d.ts +4 -0
- package/registry/examples/mascots/own-tone.js +11 -0
- package/registry/examples/mascots/own-tone.tsx +12 -0
- package/registry/field.json +1 -1
- package/registry/index.json +17 -1
- package/registry/kbd.json +1 -1
- package/registry/mascots.json +314 -0
- package/registry/page-header.json +1 -1
- package/registry/popover.json +1 -1
- package/registry/progress.json +1 -1
- package/registry/radio-group.json +1 -1
- package/registry/section-backdrop.json +1 -1
- package/registry/separator.json +1 -1
- package/registry/skeleton.json +1 -1
- package/registry/slider.json +1 -1
- package/registry/slot.json +1 -1
- package/registry/spinner.json +1 -1
- package/registry/stat.json +1 -1
- package/registry/switch.json +1 -1
- package/registry/tabs.json +1 -1
- package/registry/theme.json +23 -8
- package/registry/toast.json +1 -1
- package/registry/tooltip.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
<
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/krizaka/.github/main/profile/assets/krizaka-dark.svg">
|
|
5
|
+
<img src="https://raw.githubusercontent.com/krizaka/.github/main/profile/assets/krizaka-light.svg" alt="Krizaka" width="96">
|
|
6
|
+
</picture>
|
|
4
7
|
|
|
5
8
|
# @krizaka/ui
|
|
6
9
|
|
|
@@ -9,7 +12,7 @@ The primitives (button, badge, avatar, field, theme, countdown…) on the semant
|
|
|
9
12
|
of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
|
|
10
13
|
and open.
|
|
11
14
|
|
|
12
|
-
[](https://www.npmjs.com/package/@krizaka/ui)
|
|
13
16
|
[](https://github.com/krizaka/krizaka-ui/actions/workflows/ci.yml)
|
|
14
17
|
[](LICENSE)
|
|
15
18
|
|
|
@@ -151,19 +154,22 @@ light or a product's — is a set of tokens.
|
|
|
151
154
|
| `@krizaka/ui/confirm-button` | `ConfirmButton` (two presses: `confirmLabel`, `onConfirm`, `timeoutMs` 4000, `label` for an icon, `armedContent`; the `Button` variants), `confirmArmed` | client |
|
|
152
155
|
| `@krizaka/ui/progress` | `Progress` (`variant` bar·ring, `size` sm·md·lg, `value`/`max`, indeterminate without a value, `label`, `valueText`, a ring's centre as children) | server |
|
|
153
156
|
| `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
|
|
157
|
+
| `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
|
|
154
158
|
| `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
|
|
155
159
|
| `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, the marks — see [React Native](#react-native) | native |
|
|
156
160
|
| `@krizaka/ui/motion.css`, `@krizaka/ui/tailwind.css` | the motion signature; the `@source` of the primitives' classes | CSS |
|
|
157
161
|
| `@krizaka/ui/registry/<name>`, `@krizaka/ui/registry/examples/<name>/<example>` | the registry (JSON) and the examples — see [Registry](#registry--the-code-drives-the-documentation) | data · client |
|
|
158
162
|
|
|
159
163
|
The theme is one mechanism for every product: dark by default, `html.light` for light, `html.theme-<name>` for a named
|
|
160
|
-
theme, persisted as `kz-theme` (and `kz-theme-name`).
|
|
164
|
+
theme, persisted as `kz-theme` (and `kz-theme-name`). Before the visitor chooses, the mode is `defaultMode`
|
|
165
|
+
(`"system"` unless the product says otherwise): pass the **same** value to `ThemeScript` and `ThemeProvider` — the script
|
|
166
|
+
applies it before the first paint (no flash), the provider reports it. A persisted choice always wins.
|
|
161
167
|
|
|
162
168
|
```tsx
|
|
163
|
-
// app/layout.tsx
|
|
169
|
+
// app/layout.tsx — a dark-first product (krizaka.com); omit defaultMode to follow the system
|
|
164
170
|
<html lang={locale} suppressHydrationWarning>
|
|
165
|
-
<head><ThemeScript /></head>
|
|
166
|
-
<body><ThemeProvider>{children}</ThemeProvider></body>
|
|
171
|
+
<head><ThemeScript defaultMode="dark" /></head>
|
|
172
|
+
<body><ThemeProvider defaultMode="dark">{children}</ThemeProvider></body>
|
|
167
173
|
</html>
|
|
168
174
|
|
|
169
175
|
<ThemeToggle label={(mode) => t(`theme.${mode}`)} />
|
package/dist/index.d.ts
CHANGED
|
@@ -21,7 +21,8 @@ interface MarkProps {
|
|
|
21
21
|
declare function KrizakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
|
-
* The Orazaka mark: three solid hexagonal shards in the Orazaka orange
|
|
24
|
+
* The Orazaka mark: three solid hexagonal shards in the Orazaka orange (the brand's mark
|
|
25
|
+
* gradient of @krizaka/tokens, deep orange → orange, hue 26 — the same in dark and light) orbiting slowly around a core that breathes —
|
|
25
26
|
* the family's grammar (dashed orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.
|
|
26
27
|
*/
|
|
27
28
|
declare function OrazakaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,44 @@ function cx(...parts) {
|
|
|
5
5
|
return parts.filter(Boolean).join(" ");
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
// ../tokens/dist/native.js
|
|
9
|
+
var marks = /* @__PURE__ */ Object.freeze({
|
|
10
|
+
"krizaka": [
|
|
11
|
+
[
|
|
12
|
+
"0%",
|
|
13
|
+
"#196df5"
|
|
14
|
+
],
|
|
15
|
+
[
|
|
16
|
+
"100%",
|
|
17
|
+
"#629cf8"
|
|
18
|
+
]
|
|
19
|
+
],
|
|
20
|
+
"orazaka": [
|
|
21
|
+
[
|
|
22
|
+
"0%",
|
|
23
|
+
"#b45309"
|
|
24
|
+
],
|
|
25
|
+
[
|
|
26
|
+
"100%",
|
|
27
|
+
"#dc6509"
|
|
28
|
+
]
|
|
29
|
+
],
|
|
30
|
+
"orochia": [
|
|
31
|
+
[
|
|
32
|
+
"0%",
|
|
33
|
+
"#7c3aed"
|
|
34
|
+
],
|
|
35
|
+
[
|
|
36
|
+
"55%",
|
|
37
|
+
"#d946ef"
|
|
38
|
+
],
|
|
39
|
+
[
|
|
40
|
+
"100%",
|
|
41
|
+
"#f472b6"
|
|
42
|
+
]
|
|
43
|
+
]
|
|
44
|
+
});
|
|
45
|
+
|
|
8
46
|
// src/marks/krizaka-geometry.ts
|
|
9
47
|
var KRIZAKA = {
|
|
10
48
|
viewBox: "0 0 400 400",
|
|
@@ -14,7 +52,7 @@ var KRIZAKA = {
|
|
|
14
52
|
shield: "M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5",
|
|
15
53
|
stroke: 22,
|
|
16
54
|
ink: { x1: 70, y1: 290, x2: 290, y2: 70 },
|
|
17
|
-
blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops:
|
|
55
|
+
blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },
|
|
18
56
|
/** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */
|
|
19
57
|
node: { cx: 259.7, cy: 134, r: 19, inner: 6 },
|
|
20
58
|
core: { cx: 180, cy: 180, r: 24, inner: 8 },
|
|
@@ -32,6 +70,7 @@ function useIds(prefix, keys) {
|
|
|
32
70
|
return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`]));
|
|
33
71
|
}
|
|
34
72
|
var a11y = (title) => title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
|
|
73
|
+
var withAlpha = (hex, opacity) => `${hex}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
|
|
35
74
|
|
|
36
75
|
// src/marks/KrizakaLogo.tsx
|
|
37
76
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -79,6 +118,7 @@ function KrizakaLogo({ size = 32, animated = true, title, className }) {
|
|
|
79
118
|
}
|
|
80
119
|
|
|
81
120
|
// src/marks/orazaka-geometry.ts
|
|
121
|
+
var orange = marks.orazaka[marks.orazaka.length - 1][1];
|
|
82
122
|
var ORAZAKA = {
|
|
83
123
|
viewBox: "0 0 400 400",
|
|
84
124
|
croppedViewBox: "76 76 248 248",
|
|
@@ -93,10 +133,12 @@ var ORAZAKA = {
|
|
|
93
133
|
"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
|
|
94
134
|
],
|
|
95
135
|
shardStroke: 5.7,
|
|
96
|
-
|
|
136
|
+
gradient: { x1: 90, y1: 310, x2: 310, y2: 90, stops: marks.orazaka },
|
|
97
137
|
core: { r: 21, inner: 7.6 },
|
|
98
|
-
highlight: "#
|
|
99
|
-
glow: { color:
|
|
138
|
+
highlight: "#fff7ed",
|
|
139
|
+
glow: { color: orange, opacity: 0.16 },
|
|
140
|
+
/** The core's breathing shadow (web), in the mark's orange. */
|
|
141
|
+
pulse: { color: orange, low: 0.3, high: 0.6 },
|
|
100
142
|
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
|
101
143
|
ring: { r: 134, width: 1 }
|
|
102
144
|
};
|
|
@@ -108,18 +150,18 @@ var CSS2 = `
|
|
|
108
150
|
.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }
|
|
109
151
|
@keyframes ozm-orbit { to { transform: rotate(360deg); } }
|
|
110
152
|
@keyframes ozm-core {
|
|
111
|
-
0%, 100% { filter: drop-shadow(0 0 6px
|
|
112
|
-
50% { filter: drop-shadow(0 0 14px
|
|
153
|
+
0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(ORAZAKA.pulse.color, ORAZAKA.pulse.low)}); opacity: .9; }
|
|
154
|
+
50% { filter: drop-shadow(0 0 14px ${withAlpha(ORAZAKA.pulse.color, ORAZAKA.pulse.high)}); opacity: 1; }
|
|
113
155
|
}
|
|
114
156
|
@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }
|
|
115
157
|
`;
|
|
116
158
|
function OrazakaLogo({ size = 32, animated = true, title, className }) {
|
|
117
|
-
const id = useIds("ozm", ["
|
|
118
|
-
const fill = `url(#${id.
|
|
159
|
+
const id = useIds("ozm", ["gradient", "glow"]);
|
|
160
|
+
const fill = `url(#${id.gradient})`;
|
|
119
161
|
return /* @__PURE__ */ jsxs2("svg", { width: size, height: size, viewBox: size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
|
|
120
162
|
/* @__PURE__ */ jsx2("style", { children: CSS2 }),
|
|
121
163
|
/* @__PURE__ */ jsxs2("defs", { children: [
|
|
122
|
-
/* @__PURE__ */ jsx2("linearGradient", { id: id.
|
|
164
|
+
/* @__PURE__ */ jsx2("linearGradient", { id: id.gradient, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.gradient.x1, y1: ORAZAKA.gradient.y1, x2: ORAZAKA.gradient.x2, y2: ORAZAKA.gradient.y2, children: ORAZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx2("stop", { offset, stopColor: color }, offset)) }),
|
|
123
165
|
/* @__PURE__ */ jsxs2("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
|
|
124
166
|
/* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
|
|
125
167
|
/* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: "0" })
|
|
@@ -141,7 +183,7 @@ var OROCHIA = {
|
|
|
141
183
|
viewBox: "0 0 400 400",
|
|
142
184
|
croppedViewBox: "86 82 228 228",
|
|
143
185
|
offset: 20,
|
|
144
|
-
body: { x1: 70, y1: 290, x2: 290, y2: 70, stops:
|
|
186
|
+
body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: marks.orochia },
|
|
145
187
|
flameGradient: { stops: [["0%", "#a855f7"], ["100%", "#f9a8d4"]] },
|
|
146
188
|
glow: { color: "#d946ef", opacity: 0.18 },
|
|
147
189
|
orbit: { r: 160, dash: "8 8", width: 1.5 },
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/cx.ts","../src/marks/krizaka-geometry.ts","../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../src/marks/orazaka-geometry.ts","../src/marks/OrazakaLogo.tsx","../src/marks/orochia-geometry.ts","../src/marks/OrochiaLogo.tsx","../src/marks/ProductLogo.tsx","../src/motion/MotionObserver.tsx","../src/motion/RotatingWord.tsx"],"sourcesContent":["/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(\" \");\n}\n","/**\n * The Krizaka mark's geometry — the one description drawn by the web mark (KrizakaLogo) and the native one\n * (KrizakaMark). Built on the Orochia mark's grammar (docs: packages/tokens/BRAND.md, \"Marks\"): a 360×360 artwork at\n * (20, 20) in a 400×400 view box, one bold stroke (22) drawn as an open figure, an end that breaks out as a node, a\n * core, a dashed orbit and a ring; below 48 px the view box crops to the emblem.\n *\n * Krizaka is the parent: the hexagonal shield is **ink** (the host's text roles), the node and the core carry the\n * Krizaka blue (the accent of @krizaka/tokens, krizaka brand: hsl(217 92% 53%) → its text tint hsl(217 92% 68%)).\n */\nexport const KRIZAKA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"86 82 228 228\",\n offset: 20,\n /** The shield: a 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: [[\"0%\", \"#196df5\"], [\"100%\", \"#629cf8\"]] },\n /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */\n node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n core: { cx: 180, cy: 180, r: 24, inner: 8 },\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 { useId } from \"react\";\n\nexport interface MarkProps {\n /** Width and height in pixels. */\n size?: number;\n /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */\n animated?: boolean;\n /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n title?: string;\n className?: string;\n}\n\n/** A neutral stroke: the host's `--kz-*` token when it has one, else the text colour at a low opacity. */\nexport const neutral = (token: string, percent: number) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;\n\n/** Ids unique per instance, so several marks on a page never share a gradient. */\nexport function useIds<K extends string>(prefix: string, keys: readonly K[]): Record<K, string> {\n const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`])) as Record<K, string>;\n}\n\nexport const a11y = (title?: string) => (title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const });\n","import { KRIZAKA as G } from \"./krizaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 200px 200px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { transform-box: fill-box; transform-origin: center; animation: kzm-pulse 3.2s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n 0%, 100% { filter: drop-shadow(0 0 6px hsla(217, 92%, 53%, .25)); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px hsla(217, 92%, 53%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/**\n * The Krizaka mark: an ink hexagonal shield, open at one vertex where a blue node breaks out, around a blue core —\n * the parent of the family (Orochia's coiled serpent, Orazaka's shards). The orbit turns, the node and the core\n * breathe. The shield reads the host's text roles, so it is ink in both themes. Below 48 px it crops to the emblem.\n */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"kzm\", [\"ink\", \"blue\", \"glow\"] as const);\n const m = (cls: string) => (animated ? cls : undefined);\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 <style>{CSS}</style>\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 /* cropped: the halo would show its square */}\n <circle className={m(\"kzm-spin\")} 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 <g transform={`translate(${G.offset} ${G.offset})`}>\n <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <g className={m(\"kzm-pulse\")}>\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 </g>\n <g className={m(\"kzm-pulse\")}>\n <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={`url(#${id.blue})`} />\n <circle cx={G.core.cx} cy={G.core.cy} r={G.core.inner} fill={G.highlight} />\n </g>\n </g>\n </svg>\n );\n}\n","/**\n * The Orazaka mark's geometry — drawn by the web mark (OrazakaLogo) and the native one (OrazakaMark). The same\n * grammar as Orochia and Krizaka (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold\n * emblem in the brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem keeps the original idea — three hexagonal shards orbiting a core — drawn as solid shards (the weight of\n * Orochia's body) in the logo's own orange: #b45309 → #f59e0b, the stops the Orazaka brand theme is built from.\n */\nexport const ORAZAKA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"76 76 248 248\",\n center: 200,\n /**\n * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned\n * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.\n */\n shards: [\n \"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z\",\n \"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z\",\n \"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z\",\n ],\n shardStroke: 5.7,\n amber: { x1: 90, y1: 310, x2: 310, y2: 90, stops: [[\"0%\", \"#b45309\"], [\"100%\", \"#f59e0b\"]] },\n core: { r: 21, inner: 7.6 },\n highlight: \"#fffbeb\",\n glow: { color: \"#f59e0b\", opacity: 0.16 },\n orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n ring: { r: 134, width: 1 },\n} as const;\n","import { ORAZAKA as G } from \"./orazaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-origin: 200px 200px; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n 0%, 100% { filter: drop-shadow(0 0 6px hsla(38, 92%, 50%, .3)); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px hsla(38, 92%, 50%, .6)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/**\n * The Orazaka mark: three solid hexagonal shards in the Orazaka orange orbiting slowly around a core that breathes —\n * the family's grammar (dashed orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function OrazakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"ozm\", [\"amber\", \"glow\"] as const);\n const fill = `url(#${id.amber})`;\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 <style>{CSS}</style>\n <defs>\n <linearGradient id={id.amber} gradientUnits=\"userSpaceOnUse\" x1={G.amber.x1} y1={G.amber.y1} x2={G.amber.x2} y2={G.amber.y2}>\n {G.amber.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={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n <g className={animated ? \"ozm-orbit\" : undefined}>\n {G.shards.map((d) => (\n <path key={d} d={d} fill={fill} stroke={fill} strokeWidth={G.shardStroke} strokeLinejoin=\"round\" />\n ))}\n </g>\n <g className={animated ? \"ozm-core\" : undefined}>\n <circle cx={G.center} cy={G.center} r={G.core.r} fill={fill} />\n <circle cx={G.center} cy={G.center} r={G.core.inner} fill={G.highlight} />\n </g>\n </svg>\n );\n}\n","/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent.\n */\nexport const OROCHIA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"86 82 228 228\",\n offset: 20,\n body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [[\"0%\", \"#7c3aed\"], [\"55%\", \"#d946ef\"], [\"100%\", \"#f472b6\"]] },\n flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n glow: { color: \"#d946ef\", opacity: 0.18 },\n orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n ring: { r: 134, width: 1 },\n arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n flame: {\n translate: [127, 120] as const,\n scale: 4.4,\n d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n },\n} as const;\n","import { OROCHIA as G } from \"./orochia-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }\n.orom-slither { animation: orom-slither 2.4s linear infinite; }\n.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }\n@keyframes orom-spin { to { transform: rotate(360deg); } }\n@keyframes orom-slither { to { stroke-dashoffset: -64; } }\n@keyframes orom-pulse {\n 0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }\n`;\n\n/**\n * The Orochia mark: the serpent (Orochi) coiled into an \"O\" around the flame it guards. The orbit turns, scales slide\n * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.\n */\nexport function OrochiaLogo({ size = 36, animated = true, title, className }: MarkProps) {\n const id = useIds(\"orom\", [\"body\", \"flame\", \"glow\"] as const);\n const m = (cls: string) => (animated ? cls : undefined);\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 <style>{CSS}</style>\n <defs>\n <linearGradient id={id.body} gradientUnits=\"userSpaceOnUse\" x1={G.body.x1} y1={G.body.y1} x2={G.body.x2} y2={G.body.y2}>\n {G.body.stops.map(([offset, color]) => (\n <stop key={offset} offset={offset} stopColor={color} />\n ))}\n </linearGradient>\n <linearGradient id={id.flame} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n {G.flameGradient.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 <g transform={`translate(${G.offset} ${G.offset})`}>\n <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.glow})`} />\n <circle className={m(\"orom-spin\")} cx=\"180\" cy=\"180\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n <circle cx=\"180\" cy=\"180\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n <path d={G.arc} stroke={`url(#${id.body})`} strokeWidth=\"22\" strokeLinecap=\"round\" />\n <path className={m(\"orom-slither\")} d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} />\n <path d={G.neck} stroke={`url(#${id.body})`} strokeWidth=\"14\" strokeLinecap=\"round\" />\n <path d={G.tail} stroke={`url(#${id.body})`} strokeWidth=\"6\" strokeLinecap=\"round\" />\n <ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} transform={`rotate(${G.head.rotate} ${G.head.cx} ${G.head.cy})`} fill={`url(#${id.body})`} />\n <path d={G.tongue.d} stroke={G.tongue.color} strokeWidth=\"3\" strokeLinecap=\"round\" />\n <circle className={m(\"orom-pulse\")} cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n <path className={m(\"orom-pulse\")} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} d={G.flame.d} fill={`url(#${id.flame})`} />\n </g>\n </svg>\n );\n}\n","import { KrizakaLogo } from \"./KrizakaLogo\";\nimport { OrazakaLogo } from \"./OrazakaLogo\";\nimport { OrochiaLogo } from \"./OrochiaLogo\";\nimport type { MarkProps } from \"./shared\";\n\nexport type BrandId = \"krizaka\" | \"orazaka\" | \"orochia\";\n\n/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */\nexport function ProductLogo({ id, ...props }: MarkProps & { id: BrandId }) {\n if (id === \"krizaka\") return <KrizakaLogo {...props} />;\n if (id === \"orazaka\") return <OrazakaLogo {...props} />;\n return <OrochiaLogo {...props} />;\n}\n","import { useEffect } from \"react\";\n\n/**\n * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including\n * elements added later, so client-side navigation needs nothing more — and feeds the pointer position to\n * `.kz-spotlight` cards (`--spot-x`, `--spot-y`). One IntersectionObserver, one MutationObserver, one listener.\n * Under prefers-reduced-motion everything is revealed at once.\n */\nexport function MotionObserver(): null {\n useEffect(() => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n const revealAll = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]\").forEach((el) => el.classList.add(\"kz-in\"));\n revealAll(document);\n const mo = new MutationObserver(() => revealAll(document));\n mo.observe(document.body, { childList: true, subtree: true });\n return () => mo.disconnect();\n }\n const io = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n entry.target.classList.add(\"kz-in\");\n io.unobserve(entry.target);\n }\n },\n { rootMargin: \"0px 0px -8% 0px\", threshold: 0.12 },\n );\n const watch = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]:not(.kz-in)\").forEach((el) => io.observe(el));\n watch(document);\n const mo = new MutationObserver((records) => {\n for (const r of records) r.addedNodes.forEach((n) => n instanceof Element && (n.matches(\"[data-reveal]\") ? io.observe(n) : watch(n)));\n });\n mo.observe(document.body, { childList: true, subtree: true });\n return () => {\n io.disconnect();\n mo.disconnect();\n };\n }, []);\n\n useEffect(() => {\n const move = (e: PointerEvent) => {\n const card = (e.target as Element | null)?.closest?.(\".kz-spotlight\") as HTMLElement | null;\n if (!card) return;\n const box = card.getBoundingClientRect();\n card.style.setProperty(\"--spot-x\", `${e.clientX - box.left}px`);\n card.style.setProperty(\"--spot-y\", `${e.clientY - box.top}px`);\n };\n document.addEventListener(\"pointermove\", move, { passive: true });\n return () => document.removeEventListener(\"pointermove\", move);\n }, []);\n\n return null;\n}\n","import { useEffect, useState } from \"react\";\n\nimport { cx } from \"../cx\";\n\n/**\n * A word that rolls through alternatives — the Krizaka headline signature. The server render and the first client\n * render show the first word; under prefers-reduced-motion it stays put. Decorative (`aria-hidden`): give the\n * heading a stable accessible label.\n */\nexport function RotatingWord({ words, interval = 2600, className }: { words: readonly string[]; interval?: number; className?: string }) {\n const [i, setI] = useState(0);\n useEffect(() => {\n if (words.length < 2 || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const timer = setInterval(() => setI((k) => (k + 1) % words.length), interval);\n return () => clearInterval(timer);\n }, [words.length, interval]);\n return (\n <span aria-hidden className=\"kz-rotating\">\n <span key={i} className={cx(\"kz-word\", className)}>\n {words[i]}\n </span>\n </span>\n );\n}\n"],"mappings":"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","names":["jsx","jsxs","CSS","jsx","jsxs","CSS","jsx","mo","useEffect","jsx","useEffect"]}
|
|
1
|
+
{"version":3,"sources":["../src/cx.ts","../../tokens/dist/native.js","../src/marks/krizaka-geometry.ts","../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../src/marks/orazaka-geometry.ts","../src/marks/OrazakaLogo.tsx","../src/marks/orochia-geometry.ts","../src/marks/OrochiaLogo.tsx","../src/marks/ProductLogo.tsx","../src/motion/MotionObserver.tsx","../src/motion/RotatingWord.tsx"],"sourcesContent":["/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(\" \");\n}\n","// @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.\n\n/** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */\nexport const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({\n \"surface0\": \"#0c0c0e\",\n \"surface1\": \"#161618\",\n \"surface2\": \"#1f1f23\",\n \"surface3\": \"#2a2a2d\",\n \"media\": \"#1b1b1d\",\n \"borderSubtle\": \"rgba(255,255,255,0.06)\",\n \"borderDefault\": \"rgba(255,255,255,0.1)\",\n \"borderStrong\": \"rgba(255,255,255,0.16)\",\n \"textPrimary\": \"#f5f5f5\",\n \"textSecondary\": \"#a0a0a7\",\n \"textMuted\": \"#73737d\",\n \"textOnMedia\": \"#ffffff\",\n \"accent\": \"#196df5\",\n \"accentHover\": \"#0e5bd8\",\n \"accentSoft\": \"rgba(25,109,245,0.1)\",\n \"accentText\": \"#629cf8\",\n \"accent2\": \"#196df5\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#196df5\",\n \"brandGradientFrom\": \"#0e1525\",\n \"brandGradientVia\": \"#0e0f16\",\n \"brandGradientTo\": \"#0c0c0e\",\n \"success\": \"#10b77f\",\n \"successText\": \"#36d399\",\n \"warning\": \"#f59f0a\",\n \"warningText\": \"#f6a823\",\n \"danger\": \"#ef4343\",\n \"dangerText\": \"#f87272\",\n \"info\": \"#196df5\",\n \"infoText\": \"#629cf8\",\n \"scrim\": \"rgba(0,0,0,0.6)\",\n \"scrimStrong\": \"rgba(0,0,0,0.8)\",\n \"overlay\": \"rgba(0,0,0,0.7)\"\n}), light: /* @__PURE__ */ Object.freeze({\n \"surface0\": \"#fafafa\",\n \"surface1\": \"#ffffff\",\n \"surface2\": \"#f1f1f3\",\n \"surface3\": \"#e4e4e7\",\n \"media\": \"#e9e9ec\",\n \"borderSubtle\": \"rgba(0,0,0,0.06)\",\n \"borderDefault\": \"rgba(0,0,0,0.1)\",\n \"borderStrong\": \"rgba(0,0,0,0.16)\",\n \"textPrimary\": \"#18181b\",\n \"textSecondary\": \"#64646d\",\n \"textMuted\": \"#808089\",\n \"textOnMedia\": \"#ffffff\",\n \"accent\": \"#0a64f5\",\n \"accentHover\": \"#0d55c9\",\n \"accentSoft\": \"rgba(10,100,245,0.08)\",\n \"accentText\": \"#0954ce\",\n \"accent2\": \"#0a64f5\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#0a64f5\",\n \"brandGradientFrom\": \"#dcebfe\",\n \"brandGradientVia\": \"#f3f6fc\",\n \"brandGradientTo\": \"#fafafa\",\n \"success\": \"#10b77f\",\n \"successText\": \"#0a714e\",\n \"warning\": \"#f59f0a\",\n \"warningText\": \"#955104\",\n \"danger\": \"#ef4343\",\n \"dangerText\": \"#af1d1d\",\n \"info\": \"#0a64f5\",\n \"infoText\": \"#0954ce\",\n \"scrim\": \"rgba(0,0,0,0.6)\",\n \"scrimStrong\": \"rgba(0,0,0,0.8)\",\n \"overlay\": \"rgba(0,0,0,0.7)\"\n}) });\n\n/** Corner radii, in dp. */\nexport const radius = /* @__PURE__ */ Object.freeze({\n \"sm\": 8,\n \"md\": 12,\n \"lg\": 16,\n \"xl\": 20,\n \"full\": 9999\n});\n\n/** Font families: the first family of each web stack (React Native takes a single name). */\nexport const typography = /* @__PURE__ */ Object.freeze({\n \"sans\": \"Inter\",\n \"display\": \"Inter\",\n \"mono\": \"JetBrains Mono\"\n});\n\n/** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */\nexport const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]) });\n\n/** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */\nexport const brands = /* @__PURE__ */ Object.freeze({\n \"krizaka\": {\n \"dark\": {\n \"accent\": \"#196df5\",\n \"accentHover\": \"#0e5bd8\",\n \"accentSoft\": \"rgba(25,109,245,0.1)\",\n \"accentText\": \"#629cf8\",\n \"accent2\": \"#196df5\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#196df5\",\n \"info\": \"#196df5\",\n \"infoText\": \"#629cf8\",\n \"brandGradientFrom\": \"#0e1525\",\n \"brandGradientVia\": \"#0e0f16\",\n \"brandGradientTo\": \"#0c0c0e\"\n },\n \"light\": {\n \"accent\": \"#0a64f5\",\n \"accentHover\": \"#0d55c9\",\n \"accentSoft\": \"rgba(10,100,245,0.08)\",\n \"accentText\": \"#0954ce\",\n \"accent2\": \"#0a64f5\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#0a64f5\",\n \"info\": \"#0a64f5\",\n \"infoText\": \"#0954ce\",\n \"brandGradientFrom\": \"#dcebfe\",\n \"brandGradientVia\": \"#f3f6fc\",\n \"brandGradientTo\": \"#fafafa\"\n }\n },\n \"orazaka\": {\n \"dark\": {\n \"accent\": \"#f67e23\",\n \"accentHover\": \"#f79245\",\n \"accentSoft\": \"rgba(246,126,35,0.12)\",\n \"accentText\": \"#f78c3b\",\n \"accent2\": \"#f59e0b\",\n \"onAccent\": \"#0c0c0e\",\n \"ring\": \"#f67e23\",\n \"info\": \"#3b83f7\",\n \"infoText\": \"#629cf8\",\n \"brandGradientFrom\": \"#28170b\",\n \"brandGradientVia\": \"#17130c\",\n \"brandGradientTo\": \"#0c0c0e\"\n },\n \"light\": {\n \"accent\": \"#b45309\",\n \"accentHover\": \"#964608\",\n \"accentSoft\": \"rgba(180,83,9,0.08)\",\n \"accentText\": \"#9b4808\",\n \"accent2\": \"#a45904\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#b45309\",\n \"info\": \"#0a64f5\",\n \"infoText\": \"#0954ce\",\n \"brandGradientFrom\": \"#ffebd6\",\n \"brandGradientVia\": \"#fdf7ed\",\n \"brandGradientTo\": \"#fafafa\"\n }\n },\n \"orochia\": {\n \"dark\": {\n \"accent\": \"#7c3aed\",\n \"accentHover\": \"#6d28d9\",\n \"accentSoft\": \"rgba(139,92,246,0.12)\",\n \"accentText\": \"#a78bfa\",\n \"accent2\": \"#db2777\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#a78bfa\",\n \"info\": \"#7c3aed\",\n \"infoText\": \"#a78bfa\",\n \"brandGradientFrom\": \"#1a0e2a\",\n \"brandGradientVia\": \"#1c0d17\",\n \"brandGradientTo\": \"#0c0c0e\"\n },\n \"light\": {\n \"accent\": \"#7c3aed\",\n \"accentHover\": \"#6d28d9\",\n \"accentSoft\": \"rgba(124,58,237,0.08)\",\n \"accentText\": \"#6d28d9\",\n \"accent2\": \"#db2777\",\n \"onAccent\": \"#ffffff\",\n \"ring\": \"#7c3aed\",\n \"info\": \"#7c3aed\",\n \"infoText\": \"#6d28d9\",\n \"brandGradientFrom\": \"#efe7fe\",\n \"brandGradientVia\": \"#fdedf5\",\n \"brandGradientTo\": \"#fafafa\"\n }\n }\n});\n/** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */\nexport const marks = /* @__PURE__ */ Object.freeze({\n \"krizaka\": [\n [\n \"0%\",\n \"#196df5\"\n ],\n [\n \"100%\",\n \"#629cf8\"\n ]\n ],\n \"orazaka\": [\n [\n \"0%\",\n \"#b45309\"\n ],\n [\n \"100%\",\n \"#dc6509\"\n ]\n ],\n \"orochia\": [\n [\n \"0%\",\n \"#7c3aed\"\n ],\n [\n \"55%\",\n \"#d946ef\"\n ],\n [\n \"100%\",\n \"#f472b6\"\n ]\n ]\n});\n","import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Krizaka mark's geometry — the one description drawn by the web mark (KrizakaLogo) and the native one\n * (KrizakaMark). Built on the Orochia mark's grammar (docs: packages/tokens/BRAND.md, \"Marks\"): a 360×360 artwork at\n * (20, 20) in a 400×400 view box, one bold stroke (22) drawn as an open figure, an end that breaks out as a node, a\n * core, a dashed orbit and a ring; below 48 px the view box crops to the emblem.\n *\n * Krizaka is the parent: the hexagonal shield is **ink** (the host's text roles), the node and the core carry the\n * Krizaka blue (`marks.krizaka` of @krizaka/tokens: the brand's accent hsl(217 92% 53%) → its text tint hsl(217 92% 68%)).\n */\nexport const KRIZAKA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"86 82 228 228\",\n offset: 20,\n /** The shield: a 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 node (the serpent's head in Orochia's grammar). */\n node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n core: { cx: 180, cy: 180, r: 24, inner: 8 },\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 { useId } from \"react\";\n\nexport interface MarkProps {\n /** Width and height in pixels. */\n size?: number;\n /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */\n animated?: boolean;\n /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n title?: string;\n className?: string;\n}\n\n/** A neutral stroke: the host's `--kz-*` token when it has one, else the text colour at a low opacity. */\nexport const neutral = (token: string, percent: number) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;\n\n/** Ids unique per instance, so several marks on a page never share a gradient. */\nexport function useIds<K extends string>(prefix: string, keys: readonly K[]): Record<K, string> {\n const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`])) as Record<K, string>;\n}\n\nexport const a11y = (title?: string) => (title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const });\n\n/** `#rrggbb` + an opacity → `#rrggbbaa` (a brand colour in a CSS shadow). */\nexport const withAlpha = (hex: string, opacity: number) => `${hex}${Math.round(opacity * 255).toString(16).padStart(2, \"0\")}`;\n","import { KRIZAKA as G } from \"./krizaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 200px 200px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { transform-box: fill-box; transform-origin: center; animation: kzm-pulse 3.2s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n 0%, 100% { filter: drop-shadow(0 0 6px hsla(217, 92%, 53%, .25)); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px hsla(217, 92%, 53%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/**\n * The Krizaka mark: an ink hexagonal shield, open at one vertex where a blue node breaks out, around a blue core —\n * the parent of the family (Orochia's coiled serpent, Orazaka's shards). The orbit turns, the node and the core\n * breathe. The shield reads the host's text roles, so it is ink in both themes. Below 48 px it crops to the emblem.\n */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"kzm\", [\"ink\", \"blue\", \"glow\"] as const);\n const m = (cls: string) => (animated ? cls : undefined);\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 <style>{CSS}</style>\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 /* cropped: the halo would show its square */}\n <circle className={m(\"kzm-spin\")} 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 <g transform={`translate(${G.offset} ${G.offset})`}>\n <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <g className={m(\"kzm-pulse\")}>\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 </g>\n <g className={m(\"kzm-pulse\")}>\n <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={`url(#${id.blue})`} />\n <circle cx={G.core.cx} cy={G.core.cy} r={G.core.inner} fill={G.highlight} />\n </g>\n </g>\n </svg>\n );\n}\n","import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Orazaka mark's geometry — drawn by the web mark (OrazakaLogo) and the native one (OrazakaMark). The same\n * grammar as Orochia and Krizaka (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold\n * emblem in the brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem keeps the original idea — three hexagonal shards orbiting a core — drawn as solid shards (the weight of\n * Orochia's body) in the Orazaka orange: the brand's mark gradient (`marks.orazaka` of @krizaka/tokens, the same source\n * as the accent), deep orange → orange on the accent's hue 26 — never the amber of --kz-warning (hue 38). Every stop\n * reads ≥ 3:1 on the page surfaces of both themes (tested in @krizaka/tokens), so one mark serves dark and light.\n */\n/** The bright end of the gradient: the halo and the core's glow. */\nconst orange = marks.orazaka[marks.orazaka.length - 1]![1];\n\nexport const ORAZAKA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"76 76 248 248\",\n center: 200,\n /**\n * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned\n * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.\n */\n shards: [\n \"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z\",\n \"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z\",\n \"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z\",\n ],\n shardStroke: 5.7,\n gradient: { x1: 90, y1: 310, x2: 310, y2: 90, stops: marks.orazaka },\n core: { r: 21, inner: 7.6 },\n highlight: \"#fff7ed\",\n glow: { color: orange, opacity: 0.16 },\n /** The core's breathing shadow (web), in the mark's orange. */\n pulse: { color: orange, low: 0.3, high: 0.6 },\n orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n ring: { r: 134, width: 1 },\n} as const;\n","import { ORAZAKA as G } from \"./orazaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds, withAlpha } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-origin: 200px 200px; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n 0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(G.pulse.color, G.pulse.low)}); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px ${withAlpha(G.pulse.color, G.pulse.high)}); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/**\n * The Orazaka mark: three solid hexagonal shards in the Orazaka orange (the brand's mark\n * gradient of @krizaka/tokens, deep orange → orange, hue 26 — the same in dark and light) orbiting slowly around a core that breathes —\n * the family's grammar (dashed orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function OrazakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"ozm\", [\"gradient\", \"glow\"] as const);\n const fill = `url(#${id.gradient})`;\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 <style>{CSS}</style>\n <defs>\n <linearGradient id={id.gradient} gradientUnits=\"userSpaceOnUse\" x1={G.gradient.x1} y1={G.gradient.y1} x2={G.gradient.x2} y2={G.gradient.y2}>\n {G.gradient.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={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n <g className={animated ? \"ozm-orbit\" : undefined}>\n {G.shards.map((d) => (\n <path key={d} d={d} fill={fill} stroke={fill} strokeWidth={G.shardStroke} strokeLinejoin=\"round\" />\n ))}\n </g>\n <g className={animated ? \"ozm-core\" : undefined}>\n <circle cx={G.center} cy={G.center} r={G.core.r} fill={fill} />\n <circle cx={G.center} cy={G.center} r={G.core.inner} fill={G.highlight} />\n </g>\n </svg>\n );\n}\n","import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent. The body's gradient is the\n * brand's mark gradient (`marks.orochia` of @krizaka/tokens).\n */\nexport const OROCHIA = {\n viewBox: \"0 0 400 400\",\n croppedViewBox: \"86 82 228 228\",\n offset: 20,\n body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: marks.orochia },\n flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n glow: { color: \"#d946ef\", opacity: 0.18 },\n orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n ring: { r: 134, width: 1 },\n arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n flame: {\n translate: [127, 120] as const,\n scale: 4.4,\n d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n },\n} as const;\n","import { OROCHIA as G } from \"./orochia-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }\n.orom-slither { animation: orom-slither 2.4s linear infinite; }\n.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }\n@keyframes orom-spin { to { transform: rotate(360deg); } }\n@keyframes orom-slither { to { stroke-dashoffset: -64; } }\n@keyframes orom-pulse {\n 0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }\n 50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }\n`;\n\n/**\n * The Orochia mark: the serpent (Orochi) coiled into an \"O\" around the flame it guards. The orbit turns, scales slide\n * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.\n */\nexport function OrochiaLogo({ size = 36, animated = true, title, className }: MarkProps) {\n const id = useIds(\"orom\", [\"body\", \"flame\", \"glow\"] as const);\n const m = (cls: string) => (animated ? cls : undefined);\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 <style>{CSS}</style>\n <defs>\n <linearGradient id={id.body} gradientUnits=\"userSpaceOnUse\" x1={G.body.x1} y1={G.body.y1} x2={G.body.x2} y2={G.body.y2}>\n {G.body.stops.map(([offset, color]) => (\n <stop key={offset} offset={offset} stopColor={color} />\n ))}\n </linearGradient>\n <linearGradient id={id.flame} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n {G.flameGradient.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 <g transform={`translate(${G.offset} ${G.offset})`}>\n <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.glow})`} />\n <circle className={m(\"orom-spin\")} cx=\"180\" cy=\"180\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n <circle cx=\"180\" cy=\"180\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n <path d={G.arc} stroke={`url(#${id.body})`} strokeWidth=\"22\" strokeLinecap=\"round\" />\n <path className={m(\"orom-slither\")} d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} />\n <path d={G.neck} stroke={`url(#${id.body})`} strokeWidth=\"14\" strokeLinecap=\"round\" />\n <path d={G.tail} stroke={`url(#${id.body})`} strokeWidth=\"6\" strokeLinecap=\"round\" />\n <ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} transform={`rotate(${G.head.rotate} ${G.head.cx} ${G.head.cy})`} fill={`url(#${id.body})`} />\n <path d={G.tongue.d} stroke={G.tongue.color} strokeWidth=\"3\" strokeLinecap=\"round\" />\n <circle className={m(\"orom-pulse\")} cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n <path className={m(\"orom-pulse\")} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} d={G.flame.d} fill={`url(#${id.flame})`} />\n </g>\n </svg>\n );\n}\n","import { KrizakaLogo } from \"./KrizakaLogo\";\nimport { OrazakaLogo } from \"./OrazakaLogo\";\nimport { OrochiaLogo } from \"./OrochiaLogo\";\nimport type { MarkProps } from \"./shared\";\n\nexport type BrandId = \"krizaka\" | \"orazaka\" | \"orochia\";\n\n/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */\nexport function ProductLogo({ id, ...props }: MarkProps & { id: BrandId }) {\n if (id === \"krizaka\") return <KrizakaLogo {...props} />;\n if (id === \"orazaka\") return <OrazakaLogo {...props} />;\n return <OrochiaLogo {...props} />;\n}\n","import { useEffect } from \"react\";\n\n/**\n * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including\n * elements added later, so client-side navigation needs nothing more — and feeds the pointer position to\n * `.kz-spotlight` cards (`--spot-x`, `--spot-y`). One IntersectionObserver, one MutationObserver, one listener.\n * Under prefers-reduced-motion everything is revealed at once.\n */\nexport function MotionObserver(): null {\n useEffect(() => {\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n const revealAll = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]\").forEach((el) => el.classList.add(\"kz-in\"));\n revealAll(document);\n const mo = new MutationObserver(() => revealAll(document));\n mo.observe(document.body, { childList: true, subtree: true });\n return () => mo.disconnect();\n }\n const io = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n entry.target.classList.add(\"kz-in\");\n io.unobserve(entry.target);\n }\n },\n { rootMargin: \"0px 0px -8% 0px\", threshold: 0.12 },\n );\n const watch = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]:not(.kz-in)\").forEach((el) => io.observe(el));\n watch(document);\n const mo = new MutationObserver((records) => {\n for (const r of records) r.addedNodes.forEach((n) => n instanceof Element && (n.matches(\"[data-reveal]\") ? io.observe(n) : watch(n)));\n });\n mo.observe(document.body, { childList: true, subtree: true });\n return () => {\n io.disconnect();\n mo.disconnect();\n };\n }, []);\n\n useEffect(() => {\n const move = (e: PointerEvent) => {\n const card = (e.target as Element | null)?.closest?.(\".kz-spotlight\") as HTMLElement | null;\n if (!card) return;\n const box = card.getBoundingClientRect();\n card.style.setProperty(\"--spot-x\", `${e.clientX - box.left}px`);\n card.style.setProperty(\"--spot-y\", `${e.clientY - box.top}px`);\n };\n document.addEventListener(\"pointermove\", move, { passive: true });\n return () => document.removeEventListener(\"pointermove\", move);\n }, []);\n\n return null;\n}\n","import { useEffect, useState } from \"react\";\n\nimport { cx } from \"../cx\";\n\n/**\n * A word that rolls through alternatives — the Krizaka headline signature. The server render and the first client\n * render show the first word; under prefers-reduced-motion it stays put. Decorative (`aria-hidden`): give the\n * heading a stable accessible label.\n */\nexport function RotatingWord({ words, interval = 2600, className }: { words: readonly string[]; interval?: number; className?: string }) {\n const [i, setI] = useState(0);\n useEffect(() => {\n if (words.length < 2 || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const timer = setInterval(() => setI((k) => (k + 1) % words.length), interval);\n return () => clearInterval(timer);\n }, [words.length, interval]);\n return (\n <span aria-hidden className=\"kz-rotating\">\n <span key={i} className={cx(\"kz-word\", className)}>\n {words[i]}\n </span>\n </span>\n );\n}\n"],"mappings":";;;AACO,SAAS,MAAM,OAAyD;AAC7E,SAAO,MAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AACvC;;;ACuLO,IAAM,QAAwB,uBAAO,OAAO;AAAA,EACjD,WAAW;AAAA,IACT;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF,CAAC;;;AClNM,IAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,QAAQ;AAAA;AAAA,EAER,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAK,EAAE,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG;AAAA,EACxC,MAAM,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,OAAO,MAAM,QAAQ;AAAA;AAAA,EAEhE,MAAM,EAAE,IAAI,OAAO,IAAI,KAAK,GAAG,IAAI,OAAO,EAAE;AAAA,EAC5C,MAAM,EAAE,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,OAAO,EAAE;AAAA,EAC1C,WAAW;AAAA,EACX,MAAM,EAAE,OAAO,WAAW,SAAS,KAAK;AAAA,EACxC,OAAO,EAAE,GAAG,KAAK,MAAM,OAAO,OAAO,IAAI;AAAA,EACzC,MAAM,EAAE,GAAG,KAAK,OAAO,EAAE;AAC3B;;;AC3BA,SAAS,aAAa;AAaf,IAAM,UAAU,CAAC,OAAe,YAAoB,OAAO,KAAK,qCAAqC,OAAO;AAG5G,SAAS,OAAyB,QAAgB,MAAuC;AAC9F,QAAM,MAAM,MAAM,EAAE,QAAQ,mBAAmB,EAAE;AACjD,SAAO,OAAO,YAAY,KAAK,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;AACzE;AAEO,IAAM,OAAO,CAAC,UAAoB,QAAQ,EAAE,MAAM,OAAgB,cAAc,MAAM,IAAI,EAAE,eAAe,KAAc;AAGzH,IAAM,YAAY,CAAC,KAAa,YAAoB,GAAG,GAAG,GAAG,KAAK,MAAM,UAAU,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;;;ACArH,cAEE,YAFF;AArBN,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBL,SAAS,YAAY,EAAE,OAAO,IAAI,WAAW,MAAM,OAAO,UAAU,GAAc;AACvF,QAAM,KAAK,OAAO,OAAO,CAAC,OAAO,QAAQ,MAAM,CAAU;AACzD,QAAM,IAAI,CAAC,QAAiB,WAAW,MAAM;AAC7C,SACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK,QAAE,iBAAiB,QAAE,SAAS,MAAK,QAAO,OAAM,8BAA6B,WAAuB,GAAG,KAAK,KAAK,GACpK;AAAA,wBAAC,WAAO,eAAI;AAAA,IACZ,qBAAC,UACC;AAAA,2BAAC,oBAAe,IAAI,GAAG,KAAK,eAAc,kBAAiB,IAAI,QAAE,IAAI,IAAI,IAAI,QAAE,IAAI,IAAI,IAAI,QAAE,IAAI,IAAI,IAAI,QAAE,IAAI,IAC7G;AAAA,4BAAC,UAAK,QAAO,MAAK,WAAW,QAAQ,uBAAuB,EAAE,GAAG;AAAA,QACjE,oBAAC,UAAK,QAAO,QAAO,WAAW,QAAQ,qBAAqB,EAAE,GAAG;AAAA,SACnE;AAAA,MACA,oBAAC,oBAAe,IAAI,GAAG,MAAM,eAAc,kBAAiB,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IACjH,kBAAE,KAAK,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MAC/B,oBAAC,UAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH;AAAA,MACA,qBAAC,oBAAe,IAAI,GAAG,MAAM,IAAG,OAAM,IAAG,OAAM,GAAE,OAC/C;AAAA,4BAAC,UAAK,QAAO,MAAK,WAAW,QAAE,KAAK,OAAO,aAAa,QAAE,KAAK,SAAS;AAAA,QACxE,oBAAC,UAAK,QAAO,QAAO,WAAW,QAAE,KAAK,OAAO,aAAY,KAAI;AAAA,SAC/D;AAAA,OACF;AAAA,IACC,QAAQ,KAAK,oBAAC,YAAO,IAAG,OAAM,IAAG,OAAM,GAAE,OAAM,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAK;AAAA,IAC/E,oBAAC,YAAO,WAAW,EAAE,UAAU,GAAG,IAAG,OAAM,IAAG,OAAM,GAAG,QAAE,MAAM,GAAG,QAAQ,QAAQ,sBAAsB,EAAE,GAAG,aAAa,QAAE,MAAM,OAAO,iBAAiB,QAAE,MAAM,MAAM,SAAQ,MAAK;AAAA,IACrL,oBAAC,YAAO,IAAG,OAAM,IAAG,OAAM,GAAG,QAAE,KAAK,GAAG,QAAQ,QAAQ,uBAAuB,EAAE,GAAG,aAAa,QAAE,KAAK,OAAO,SAAQ,OAAM;AAAA,IAC5H,qBAAC,OAAE,WAAW,aAAa,QAAE,MAAM,IAAI,QAAE,MAAM,KAC7C;AAAA,0BAAC,UAAK,GAAG,QAAE,QAAQ,QAAQ,QAAQ,GAAG,GAAG,KAAK,aAAa,QAAE,QAAQ,eAAc,SAAQ,gBAAe,SAAQ;AAAA,MAClH,qBAAC,OAAE,WAAW,EAAE,WAAW,GACzB;AAAA,4BAAC,YAAO,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,GAAG,QAAE,KAAK,GAAG,MAAM,QAAQ,GAAG,IAAI,KAAK;AAAA,QAC7E,oBAAC,YAAO,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,GAAG,QAAE,KAAK,OAAO,MAAM,QAAE,WAAW;AAAA,SAC5E;AAAA,MACA,qBAAC,OAAE,WAAW,EAAE,WAAW,GACzB;AAAA,4BAAC,YAAO,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,GAAG,QAAE,KAAK,GAAG,MAAM,QAAQ,GAAG,IAAI,KAAK;AAAA,QAC7E,oBAAC,YAAO,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,GAAG,QAAE,KAAK,OAAO,MAAM,QAAE,WAAW;AAAA,SAC5E;AAAA,OACF;AAAA,KACF;AAEJ;;;AC3CA,IAAM,SAAS,MAAM,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAG,CAAC;AAElD,IAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa;AAAA,EACb,UAAU,EAAE,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,OAAO,MAAM,QAAQ;AAAA,EACnE,MAAM,EAAE,GAAG,IAAI,OAAO,IAAI;AAAA,EAC1B,WAAW;AAAA,EACX,MAAM,EAAE,OAAO,QAAQ,SAAS,KAAK;AAAA;AAAA,EAErC,OAAO,EAAE,OAAO,QAAQ,KAAK,KAAK,MAAM,IAAI;AAAA,EAC5C,OAAO,EAAE,GAAG,KAAK,MAAM,OAAO,OAAO,IAAI;AAAA,EACzC,MAAM,EAAE,GAAG,KAAK,OAAO,EAAE;AAC3B;;;ACbM,gBAAAA,MAOE,QAAAC,aAPF;AArBN,IAAMC,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA,2CAK+B,UAAU,QAAE,MAAM,OAAO,QAAE,MAAM,GAAG,CAAC;AAAA,uCACzC,UAAU,QAAE,MAAM,OAAO,QAAE,MAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAUtE,SAAS,YAAY,EAAE,OAAO,IAAI,WAAW,MAAM,OAAO,UAAU,GAAc;AACvF,QAAM,KAAK,OAAO,OAAO,CAAC,YAAY,MAAM,CAAU;AACtD,QAAM,OAAO,QAAQ,GAAG,QAAQ;AAChC,SACE,gBAAAD,MAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK,QAAE,iBAAiB,QAAE,SAAS,MAAK,QAAO,OAAM,8BAA6B,WAAuB,GAAG,KAAK,KAAK,GACpK;AAAA,oBAAAD,KAAC,WAAO,UAAAE,MAAI;AAAA,IACZ,gBAAAD,MAAC,UACC;AAAA,sBAAAD,KAAC,oBAAe,IAAI,GAAG,UAAU,eAAc,kBAAiB,IAAI,QAAE,SAAS,IAAI,IAAI,QAAE,SAAS,IAAI,IAAI,QAAE,SAAS,IAAI,IAAI,QAAE,SAAS,IACrI,kBAAE,SAAS,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MACnC,gBAAAA,KAAC,UAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH;AAAA,MACA,gBAAAC,MAAC,oBAAe,IAAI,GAAG,MAAM,IAAG,OAAM,IAAG,OAAM,GAAE,OAC/C;AAAA,wBAAAD,KAAC,UAAK,QAAO,MAAK,WAAW,QAAE,KAAK,OAAO,aAAa,QAAE,KAAK,SAAS;AAAA,QACxE,gBAAAA,KAAC,UAAK,QAAO,QAAO,WAAW,QAAE,KAAK,OAAO,aAAY,KAAI;AAAA,SAC/D;AAAA,OACF;AAAA,IACC,QAAQ,KAAK,gBAAAA,KAAC,YAAO,IAAI,QAAE,QAAQ,IAAI,QAAE,QAAQ,GAAE,OAAM,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAK;AAAA,IACzF,gBAAAA,KAAC,YAAO,IAAI,QAAE,QAAQ,IAAI,QAAE,QAAQ,GAAG,QAAE,MAAM,GAAG,QAAQ,QAAQ,sBAAsB,EAAE,GAAG,aAAa,QAAE,MAAM,OAAO,iBAAiB,QAAE,MAAM,MAAM,SAAQ,MAAK;AAAA,IACrK,gBAAAA,KAAC,YAAO,IAAI,QAAE,QAAQ,IAAI,QAAE,QAAQ,GAAG,QAAE,KAAK,GAAG,QAAQ,QAAQ,uBAAuB,EAAE,GAAG,aAAa,QAAE,KAAK,OAAO,SAAQ,OAAM;AAAA,IACtI,gBAAAA,KAAC,OAAE,WAAW,WAAW,cAAc,QACpC,kBAAE,OAAO,IAAI,CAAC,MACb,gBAAAA,KAAC,UAAa,GAAM,MAAY,QAAQ,MAAM,aAAa,QAAE,aAAa,gBAAe,WAA9E,CAAsF,CAClG,GACH;AAAA,IACA,gBAAAC,MAAC,OAAE,WAAW,WAAW,aAAa,QACpC;AAAA,sBAAAD,KAAC,YAAO,IAAI,QAAE,QAAQ,IAAI,QAAE,QAAQ,GAAG,QAAE,KAAK,GAAG,MAAY;AAAA,MAC7D,gBAAAA,KAAC,YAAO,IAAI,QAAE,QAAQ,IAAI,QAAE,QAAQ,GAAG,QAAE,KAAK,OAAO,MAAM,QAAE,WAAW;AAAA,OAC1E;AAAA,KACF;AAEJ;;;AC1CO,IAAM,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,MAAM,EAAE,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,OAAO,MAAM,QAAQ;AAAA,EAC/D,eAAe,EAAE,OAAO,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,SAAS,CAAC,EAAE;AAAA,EACjE,MAAM,EAAE,OAAO,WAAW,SAAS,KAAK;AAAA,EACxC,OAAO,EAAE,GAAG,KAAK,MAAM,OAAO,OAAO,IAAI;AAAA,EACzC,MAAM,EAAE,GAAG,KAAK,OAAO,EAAE;AAAA,EACzB,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,EAAE,OAAO,WAAW,SAAS,MAAM,OAAO,GAAG,MAAM,OAAO;AAAA,EAClE,MAAM,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,IAAI,IAAI,IAAI,QAAQ,IAAI;AAAA,EAC1D,QAAQ,EAAE,GAAG,mEAAmE,OAAO,UAAU;AAAA,EACjG,KAAK,EAAE,IAAI,OAAO,IAAI,OAAO,GAAG,KAAK,OAAO,UAAU;AAAA,EACtD,OAAO;AAAA,IACL,WAAW,CAAC,KAAK,GAAG;AAAA,IACpB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AACF;;;ACJM,gBAAAG,MAYE,QAAAC,aAZF;AAtBN,IAAMC,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBL,SAAS,YAAY,EAAE,OAAO,IAAI,WAAW,MAAM,OAAO,UAAU,GAAc;AACvF,QAAM,KAAK,OAAO,QAAQ,CAAC,QAAQ,SAAS,MAAM,CAAU;AAC5D,QAAM,IAAI,CAAC,QAAiB,WAAW,MAAM;AAC7C,SACE,gBAAAD,MAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK,QAAE,iBAAiB,QAAE,SAAS,MAAK,QAAO,OAAM,8BAA6B,WAAuB,GAAG,KAAK,KAAK,GACpK;AAAA,oBAAAD,KAAC,WAAO,UAAAE,MAAI;AAAA,IACZ,gBAAAD,MAAC,UACC;AAAA,sBAAAD,KAAC,oBAAe,IAAI,GAAG,MAAM,eAAc,kBAAiB,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IACjH,kBAAE,KAAK,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MAC/B,gBAAAA,KAAC,UAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH;AAAA,MACA,gBAAAA,KAAC,oBAAe,IAAI,GAAG,OAAO,IAAG,OAAM,IAAG,QAAO,IAAG,OAAM,IAAG,MAC1D,kBAAE,cAAc,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,MACxC,gBAAAA,KAAC,UAAkB,QAAgB,WAAW,SAAnC,MAA0C,CACtD,GACH;AAAA,MACA,gBAAAC,MAAC,oBAAe,IAAI,GAAG,MAAM,IAAG,OAAM,IAAG,OAAM,GAAE,OAC/C;AAAA,wBAAAD,KAAC,UAAK,QAAO,MAAK,WAAW,QAAE,KAAK,OAAO,aAAa,QAAE,KAAK,SAAS;AAAA,QACxE,gBAAAA,KAAC,UAAK,QAAO,QAAO,WAAW,QAAE,KAAK,OAAO,aAAY,KAAI;AAAA,SAC/D;AAAA,OACF;AAAA,IACA,gBAAAC,MAAC,OAAE,WAAW,aAAa,QAAE,MAAM,IAAI,QAAE,MAAM,KAC7C;AAAA,sBAAAD,KAAC,YAAO,IAAG,OAAM,IAAG,OAAM,GAAE,OAAM,MAAM,QAAQ,GAAG,IAAI,KAAK;AAAA,MAC5D,gBAAAA,KAAC,YAAO,WAAW,EAAE,WAAW,GAAG,IAAG,OAAM,IAAG,OAAM,GAAG,QAAE,MAAM,GAAG,QAAQ,QAAQ,sBAAsB,EAAE,GAAG,aAAa,QAAE,MAAM,OAAO,iBAAiB,QAAE,MAAM,MAAM,SAAQ,MAAK;AAAA,MACtL,gBAAAA,KAAC,YAAO,IAAG,OAAM,IAAG,OAAM,GAAG,QAAE,KAAK,GAAG,QAAQ,QAAQ,uBAAuB,EAAE,GAAG,aAAa,QAAE,KAAK,OAAO,SAAQ,OAAM;AAAA,MAC5H,gBAAAA,KAAC,UAAK,GAAG,QAAE,KAAK,QAAQ,QAAQ,GAAG,IAAI,KAAK,aAAY,MAAK,eAAc,SAAQ;AAAA,MACnF,gBAAAA,KAAC,UAAK,WAAW,EAAE,cAAc,GAAG,GAAG,QAAE,KAAK,QAAQ,QAAE,OAAO,OAAO,eAAe,QAAE,OAAO,SAAS,aAAa,QAAE,OAAO,OAAO,eAAc,SAAQ,iBAAiB,QAAE,OAAO,MAAM;AAAA,MAC1L,gBAAAA,KAAC,UAAK,GAAG,QAAE,MAAM,QAAQ,QAAQ,GAAG,IAAI,KAAK,aAAY,MAAK,eAAc,SAAQ;AAAA,MACpF,gBAAAA,KAAC,UAAK,GAAG,QAAE,MAAM,QAAQ,QAAQ,GAAG,IAAI,KAAK,aAAY,KAAI,eAAc,SAAQ;AAAA,MACnF,gBAAAA,KAAC,aAAQ,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,IAAI,QAAE,KAAK,IAAI,WAAW,UAAU,QAAE,KAAK,MAAM,IAAI,QAAE,KAAK,EAAE,IAAI,QAAE,KAAK,EAAE,KAAK,MAAM,QAAQ,GAAG,IAAI,KAAK;AAAA,MAChK,gBAAAA,KAAC,UAAK,GAAG,QAAE,OAAO,GAAG,QAAQ,QAAE,OAAO,OAAO,aAAY,KAAI,eAAc,SAAQ;AAAA,MACnF,gBAAAA,KAAC,YAAO,WAAW,EAAE,YAAY,GAAG,IAAI,QAAE,IAAI,IAAI,IAAI,QAAE,IAAI,IAAI,GAAG,QAAE,IAAI,GAAG,MAAM,QAAE,IAAI,OAAO;AAAA,MAC/F,gBAAAA,KAAC,UAAK,WAAW,EAAE,YAAY,GAAG,WAAW,aAAa,QAAE,MAAM,UAAU,CAAC,CAAC,IAAI,QAAE,MAAM,UAAU,CAAC,CAAC,WAAW,QAAE,MAAM,KAAK,KAAK,GAAG,QAAE,MAAM,GAAG,MAAM,QAAQ,GAAG,KAAK,KAAK;AAAA,OAC9K;AAAA,KACF;AAEJ;;;AChD+B,gBAAAG,YAAA;AADxB,SAAS,YAAY,EAAE,IAAI,GAAG,MAAM,GAAgC;AACzE,MAAI,OAAO,UAAW,QAAO,gBAAAA,KAAC,eAAa,GAAG,OAAO;AACrD,MAAI,OAAO,UAAW,QAAO,gBAAAA,KAAC,eAAa,GAAG,OAAO;AACrD,SAAO,gBAAAA,KAAC,eAAa,GAAG,OAAO;AACjC;;;ACZA,SAAS,iBAAiB;AAQnB,SAAS,iBAAuB;AACrC,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,kCAAkC,EAAE,SAAS;AACjE,YAAM,YAAY,CAAC,SAAqB,KAAK,iBAAiB,eAAe,EAAE,QAAQ,CAAC,OAAO,GAAG,UAAU,IAAI,OAAO,CAAC;AACxH,gBAAU,QAAQ;AAClB,YAAMC,MAAK,IAAI,iBAAiB,MAAM,UAAU,QAAQ,CAAC;AACzD,MAAAA,IAAG,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAC5D,aAAO,MAAMA,IAAG,WAAW;AAAA,IAC7B;AACA,UAAM,KAAK,IAAI;AAAA,MACb,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,cAAI,CAAC,MAAM,eAAgB;AAC3B,gBAAM,OAAO,UAAU,IAAI,OAAO;AAClC,aAAG,UAAU,MAAM,MAAM;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,EAAE,YAAY,mBAAmB,WAAW,KAAK;AAAA,IACnD;AACA,UAAM,QAAQ,CAAC,SAAqB,KAAK,iBAAiB,2BAA2B,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC;AACrH,UAAM,QAAQ;AACd,UAAM,KAAK,IAAI,iBAAiB,CAAC,YAAY;AAC3C,iBAAW,KAAK,QAAS,GAAE,WAAW,QAAQ,CAAC,MAAM,aAAa,YAAY,EAAE,QAAQ,eAAe,IAAI,GAAG,QAAQ,CAAC,IAAI,MAAM,CAAC,EAAE;AAAA,IACtI,CAAC;AACD,OAAG,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAC5D,WAAO,MAAM;AACX,SAAG,WAAW;AACd,SAAG,WAAW;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,CAAC,MAAoB;AAChC,YAAM,OAAQ,EAAE,QAA2B,UAAU,eAAe;AACpE,UAAI,CAAC,KAAM;AACX,YAAM,MAAM,KAAK,sBAAsB;AACvC,WAAK,MAAM,YAAY,YAAY,GAAG,EAAE,UAAU,IAAI,IAAI,IAAI;AAC9D,WAAK,MAAM,YAAY,YAAY,GAAG,EAAE,UAAU,IAAI,GAAG,IAAI;AAAA,IAC/D;AACA,aAAS,iBAAiB,eAAe,MAAM,EAAE,SAAS,KAAK,CAAC;AAChE,WAAO,MAAM,SAAS,oBAAoB,eAAe,IAAI;AAAA,EAC/D,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;;;ACpDA,SAAS,aAAAC,YAAW,gBAAgB;AAkB9B,gBAAAC,YAAA;AATC,SAAS,aAAa,EAAE,OAAO,WAAW,MAAM,UAAU,GAAwE;AACvI,QAAM,CAAC,GAAG,IAAI,IAAI,SAAS,CAAC;AAC5B,EAAAC,WAAU,MAAM;AACd,QAAI,MAAM,SAAS,KAAK,OAAO,WAAW,kCAAkC,EAAE,QAAS;AACvF,UAAM,QAAQ,YAAY,MAAM,KAAK,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,GAAG,QAAQ;AAC7E,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,MAAM,QAAQ,QAAQ,CAAC;AAC3B,SACE,gBAAAD,KAAC,UAAK,eAAW,MAAC,WAAU,eAC1B,0BAAAA,KAAC,UAAa,WAAW,GAAG,WAAW,SAAS,GAC7C,gBAAM,CAAC,KADC,CAEX,GACF;AAEJ;","names":["jsx","jsxs","CSS","jsx","jsxs","CSS","jsx","mo","useEffect","jsx","useEffect"]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
|
|
5
|
+
* (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
|
|
6
|
+
* the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), redrawn on one 120 × 120
|
|
7
|
+
* grid so that any bird can wear any mood.
|
|
8
|
+
*
|
|
9
|
+
* Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
|
|
10
|
+
* `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
|
|
11
|
+
* each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
|
|
12
|
+
* and highlights are black and white at a low opacity over the role, so they hold in both themes.
|
|
13
|
+
*/
|
|
14
|
+
declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon"];
|
|
15
|
+
type MascotBird = (typeof MASCOT_BIRDS)[number];
|
|
16
|
+
declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
|
|
17
|
+
type MascotMood = (typeof MASCOT_MOODS)[number];
|
|
18
|
+
type MascotTone = "brand" | "own";
|
|
19
|
+
|
|
20
|
+
type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
|
|
21
|
+
/** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications). */
|
|
22
|
+
bird?: MascotBird;
|
|
23
|
+
/** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */
|
|
24
|
+
mood?: MascotMood;
|
|
25
|
+
/** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */
|
|
26
|
+
tone?: MascotTone;
|
|
27
|
+
/** Width and height in pixels. */
|
|
28
|
+
size?: number;
|
|
29
|
+
/** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */
|
|
30
|
+
animated?: boolean;
|
|
31
|
+
/** An accessible name (the bird becomes an image); without it the mascot is decorative. */
|
|
32
|
+
title?: string;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* One of the five Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,
|
|
36
|
+
* a success, an empty list, an error. Drawn in the host's brand colours by default (`tone="own"` for the story's).
|
|
37
|
+
*/
|
|
38
|
+
declare function Mascot({ bird, mood, tone, size, animated, title, className, ...props }: MascotProps): React.JSX.Element;
|
|
39
|
+
|
|
40
|
+
export { MASCOT_BIRDS, MASCOT_MOODS, Mascot, type MascotBird, type MascotMood, type MascotProps, type MascotTone };
|