@krizaka/ui 1.2.0 → 1.3.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.
Files changed (8) hide show
  1. package/README.md +15 -0
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.js +5 -7
  4. package/dist/index.js.map +1 -1
  5. package/dist/native.js +3 -3
  6. package/dist/native.js.map +1 -1
  7. package/package.json +10 -4
  8. package/tailwind.css +3 -0
package/README.md CHANGED
@@ -84,6 +84,21 @@ With Tailwind CSS v4, give every transition the same easing:
84
84
  }
85
85
  ```
86
86
 
87
+ ## With Tailwind CSS v4
88
+
89
+ The components are styled with the [`@krizaka/tailwind`](https://www.npmjs.com/package/@krizaka/tailwind) utilities.
90
+ Import the preset, then `@krizaka/ui/tailwind.css`: it points Tailwind at the package (`@source "./dist"`), so the
91
+ classes the components use are generated in your stylesheet.
92
+
93
+ ```css
94
+ @import "tailwindcss";
95
+ @import "@krizaka/tailwind";
96
+ @import "@krizaka/ui/tailwind.css";
97
+ ```
98
+
99
+ Every component, in dark and light and under each product identity:
100
+ [krizaka.github.io/krizaka-ui/latest](https://krizaka.github.io/krizaka-ui/latest/).
101
+
87
102
  ## Develop
88
103
 
89
104
  This package lives in the [`krizaka-ui`](https://github.com/krizaka/krizaka-ui) monorepo (pnpm + Turborepo), in
package/dist/index.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import * as react from 'react';
2
2
 
3
+ /** Joins class names, skipping the falsy ones. */
4
+ declare function cx(...parts: Array<string | false | null | undefined>): string;
5
+
3
6
  interface MarkProps {
4
7
  /** Width and height in pixels. */
5
8
  size?: number;
@@ -47,7 +50,4 @@ declare function RotatingWord({ words, interval, className }: {
47
50
  className?: string;
48
51
  }): react.JSX.Element;
49
52
 
50
- /** Joins class names, skipping the falsy ones. */
51
- declare function cx(...parts: Array<string | false | null | undefined>): string;
52
-
53
53
  export { type BrandId, KrizakaLogo, type MarkProps, MotionObserver, OrazakaLogo, OrochiaLogo, ProductLogo, RotatingWord, cx };
package/dist/index.js CHANGED
@@ -1,5 +1,10 @@
1
1
  "use client";
2
2
 
3
+ // src/cx.ts
4
+ function cx(...parts) {
5
+ return parts.filter(Boolean).join(" ");
6
+ }
7
+
3
8
  // src/marks/shared.ts
4
9
  import { useId } from "react";
5
10
  var neutral = (token, percent) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;
@@ -229,13 +234,6 @@ function MotionObserver() {
229
234
 
230
235
  // src/motion/RotatingWord.tsx
231
236
  import { useEffect as useEffect2, useState } from "react";
232
-
233
- // src/cx.ts
234
- function cx(...parts) {
235
- return parts.filter(Boolean).join(" ");
236
- }
237
-
238
- // src/motion/RotatingWord.tsx
239
237
  import { jsx as jsx5 } from "react/jsx-runtime";
240
238
  function RotatingWord({ words, interval = 2600, className }) {
241
239
  const [i, setI] = useState(0);
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../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","../src/cx.ts"],"sourcesContent":["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 { a11y, neutral, useIds, type MarkProps } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 180px 180px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { animation: kzm-pulse 4s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n 0%, 100% { filter: drop-shadow(0 0 8px hsla(217, 92%, 60%, .2)) drop-shadow(0 0 24px hsla(217, 92%, 60%, .06)); }\n 50% { filter: drop-shadow(0 0 12px hsla(217, 92%, 60%, .35)) drop-shadow(0 0 36px hsla(217, 92%, 60%, .12)); }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"kzm\", [\"blue\", \"steel\", \"core\", \"ambient\"] as const);\n const accent = \"var(--kz-accent, hsl(217, 92%, 60%))\";\n const m = (cls: string) => (animated ? cls : undefined);\n const pulse = (x: number, y: number) => ({ className: m(\"kzm-pulse\"), style: { transformOrigin: `${x}px ${y}px` } });\n return (\n <svg width={size} height={size} viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n <style>{CSS}</style>\n <defs>\n <linearGradient id={id.blue} x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stopColor={accent} />\n <stop offset=\"100%\" stopColor=\"#60A5FA\" />\n </linearGradient>\n <linearGradient id={id.steel} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 64)} />\n <stop offset=\"100%\" stopColor={neutral(\"--kz-text-muted\", 38)} />\n </linearGradient>\n <radialGradient id={id.core} cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stopColor=\"#60A5FA\" stopOpacity=\"1\" />\n <stop offset=\"35%\" stopColor={accent} stopOpacity=\"0.7\" />\n <stop offset=\"65%\" stopColor={accent} stopOpacity=\"0.02\" />\n <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n </radialGradient>\n <radialGradient id={id.ambient} cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stopColor={accent} stopOpacity=\"0.08\" />\n <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n </radialGradient>\n </defs>\n <g transform=\"translate(20, 20)\">\n <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.ambient})`} />\n <circle cx=\"180\" cy=\"180\" r=\"160\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"8 8\" opacity=\"0.6\" className={m(\"kzm-spin\")} />\n <circle cx=\"180\" cy=\"180\" r=\"130\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.35\" />\n <circle cx=\"180\" cy=\"180\" r=\"100\" stroke={neutral(\"--kz-border-subtle\", 6)} strokeWidth=\"1\" strokeDasharray=\"3 6\" opacity=\"0.3\" />\n <line x1=\"180\" y1=\"20\" x2=\"180\" y2=\"80\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <line x1=\"320\" y1=\"100\" x2=\"260\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <line x1=\"40\" y1=\"100\" x2=\"100\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <circle cx=\"180\" cy=\"180\" r=\"55\" fill={`url(#${id.core})`} {...pulse(180, 180)} />\n <path d=\"M180,80 L255,120 L255,200 L180,240 L105,200 L105,120 Z\" stroke={`url(#${id.blue})`} strokeWidth=\"3\" strokeLinejoin=\"round\" opacity=\"0.9\" />\n <path d=\"M180,105 L235,133 L235,187 L180,215 L125,187 L125,133 Z\" stroke={`url(#${id.steel})`} strokeWidth=\"2\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n <path d=\"M255,120 L290,85 L310,100\" stroke={`url(#${id.blue})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M105,120 L70,85 L50,100\" stroke={`url(#${id.steel})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M180,240 L180,280 L200,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n <path d=\"M180,280 L160,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" opacity=\"0.5\" />\n <line x1=\"180\" y1=\"130\" x2=\"180\" y2=\"195\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n <line x1=\"145\" y1=\"160\" x2=\"215\" y2=\"160\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n {[[180, 130], [180, 195], [145, 160], [215, 160]].map(([x, y]) => (\n <circle key={`${x}-${y}`} cx={x} cy={y} r=\"3\" fill=\"#60A5FA\" opacity=\"0.5\" {...pulse(x, y)} />\n ))}\n <circle cx=\"180\" cy=\"160\" r=\"18\" fill=\"#1E40AF\" {...pulse(180, 160)} />\n <circle cx=\"180\" cy=\"160\" r=\"12\" fill=\"#3B82F6\" {...pulse(180, 160)} />\n <circle cx=\"180\" cy=\"160\" r=\"5\" fill=\"#BFDBFE\" {...pulse(180, 160)} />\n <circle cx=\"310\" cy=\"50\" r=\"2.5\" fill=\"#60A5FA\" opacity=\"0.6\" />\n <circle cx=\"50\" cy=\"260\" r=\"2\" fill={neutral(\"--kz-border-strong\", 16)} opacity=\"0.4\" />\n </g>\n </svg>\n );\n}\n","import { a11y, neutral, useIds, type MarkProps } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-box: view-box; transform-origin: 0 0; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 2.5s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n 0%, 100% { transform: scale(1); opacity: .9; filter: drop-shadow(0 0 3px #f59e0b); }\n 50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */\nexport function OrazakaLogo({ size = 28, animated = true, title, className }: MarkProps) {\n const id = useIds(\"ozm\", [\"amber\"] as const);\n return (\n <svg width={size} height={size} viewBox=\"-66 -66 132 132\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n <style>{CSS}</style>\n <defs>\n <linearGradient id={id.amber} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#f59e0b\" />\n <stop offset=\"100%\" stopColor=\"#b45309\" />\n </linearGradient>\n </defs>\n <circle r=\"62\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"6 6\" opacity=\"0.5\" />\n <circle r=\"48\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.3\" />\n <g className={animated ? \"ozm-orbit\" : undefined}>\n <path d=\"M -24 -41.5 L 0 -55.4 L 24 -41.5 L 24 -24 L 14 -18.2 L 14 -35.7 L 0 -43.8 L -14 -35.7 L -14 -18.2\" stroke={neutral(\"--kz-text-muted\", 45)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M -48 0 L -38 17.3 L -14 31.2 L 0 23.1 L -10 17.3 L -24 9.2 L -24 -9.2\" stroke={neutral(\"--kz-text-secondary\", 70)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M 48 0 L 38 17.3 L 14 31.2 L 0 23.1 L 10 17.3 L 24 9.2 L 24 -9.2\" stroke={`url(#${id.amber})`} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </g>\n <circle r=\"10\" fill={`url(#${id.amber})`} className={animated ? \"ozm-core\" : undefined} />\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 { a11y, neutral, useIds, type MarkProps } from \"./shared\";\nimport { OROCHIA as G } from \"./orochia-geometry\";\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\";\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","/** 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"],"mappings":"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","names":["jsx","jsxs","CSS","jsx","jsxs","CSS","jsx","mo","useEffect","jsx","useEffect"]}
1
+ {"version":3,"sources":["../src/cx.ts","../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../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","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 { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 180px 180px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { animation: kzm-pulse 4s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n 0%, 100% { filter: drop-shadow(0 0 8px hsla(217, 92%, 60%, .2)) drop-shadow(0 0 24px hsla(217, 92%, 60%, .06)); }\n 50% { filter: drop-shadow(0 0 12px hsla(217, 92%, 60%, .35)) drop-shadow(0 0 36px hsla(217, 92%, 60%, .12)); }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n const id = useIds(\"kzm\", [\"blue\", \"steel\", \"core\", \"ambient\"] as const);\n const accent = \"var(--kz-accent, hsl(217, 92%, 60%))\";\n const m = (cls: string) => (animated ? cls : undefined);\n const pulse = (x: number, y: number) => ({ className: m(\"kzm-pulse\"), style: { transformOrigin: `${x}px ${y}px` } });\n return (\n <svg width={size} height={size} viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n <style>{CSS}</style>\n <defs>\n <linearGradient id={id.blue} x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stopColor={accent} />\n <stop offset=\"100%\" stopColor=\"#60A5FA\" />\n </linearGradient>\n <linearGradient id={id.steel} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 64)} />\n <stop offset=\"100%\" stopColor={neutral(\"--kz-text-muted\", 38)} />\n </linearGradient>\n <radialGradient id={id.core} cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stopColor=\"#60A5FA\" stopOpacity=\"1\" />\n <stop offset=\"35%\" stopColor={accent} stopOpacity=\"0.7\" />\n <stop offset=\"65%\" stopColor={accent} stopOpacity=\"0.02\" />\n <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n </radialGradient>\n <radialGradient id={id.ambient} cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stopColor={accent} stopOpacity=\"0.08\" />\n <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n </radialGradient>\n </defs>\n <g transform=\"translate(20, 20)\">\n <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.ambient})`} />\n <circle cx=\"180\" cy=\"180\" r=\"160\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"8 8\" opacity=\"0.6\" className={m(\"kzm-spin\")} />\n <circle cx=\"180\" cy=\"180\" r=\"130\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.35\" />\n <circle cx=\"180\" cy=\"180\" r=\"100\" stroke={neutral(\"--kz-border-subtle\", 6)} strokeWidth=\"1\" strokeDasharray=\"3 6\" opacity=\"0.3\" />\n <line x1=\"180\" y1=\"20\" x2=\"180\" y2=\"80\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <line x1=\"320\" y1=\"100\" x2=\"260\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <line x1=\"40\" y1=\"100\" x2=\"100\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n <circle cx=\"180\" cy=\"180\" r=\"55\" fill={`url(#${id.core})`} {...pulse(180, 180)} />\n <path d=\"M180,80 L255,120 L255,200 L180,240 L105,200 L105,120 Z\" stroke={`url(#${id.blue})`} strokeWidth=\"3\" strokeLinejoin=\"round\" opacity=\"0.9\" />\n <path d=\"M180,105 L235,133 L235,187 L180,215 L125,187 L125,133 Z\" stroke={`url(#${id.steel})`} strokeWidth=\"2\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n <path d=\"M255,120 L290,85 L310,100\" stroke={`url(#${id.blue})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M105,120 L70,85 L50,100\" stroke={`url(#${id.steel})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M180,240 L180,280 L200,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n <path d=\"M180,280 L160,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" opacity=\"0.5\" />\n <line x1=\"180\" y1=\"130\" x2=\"180\" y2=\"195\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n <line x1=\"145\" y1=\"160\" x2=\"215\" y2=\"160\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n {[[180, 130], [180, 195], [145, 160], [215, 160]].map(([x, y]) => (\n <circle key={`${x}-${y}`} cx={x} cy={y} r=\"3\" fill=\"#60A5FA\" opacity=\"0.5\" {...pulse(x, y)} />\n ))}\n <circle cx=\"180\" cy=\"160\" r=\"18\" fill=\"#1E40AF\" {...pulse(180, 160)} />\n <circle cx=\"180\" cy=\"160\" r=\"12\" fill=\"#3B82F6\" {...pulse(180, 160)} />\n <circle cx=\"180\" cy=\"160\" r=\"5\" fill=\"#BFDBFE\" {...pulse(180, 160)} />\n <circle cx=\"310\" cy=\"50\" r=\"2.5\" fill=\"#60A5FA\" opacity=\"0.6\" />\n <circle cx=\"50\" cy=\"260\" r=\"2\" fill={neutral(\"--kz-border-strong\", 16)} opacity=\"0.4\" />\n </g>\n </svg>\n );\n}\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-box: view-box; transform-origin: 0 0; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 2.5s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n 0%, 100% { transform: scale(1); opacity: .9; filter: drop-shadow(0 0 3px #f59e0b); }\n 50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */\nexport function OrazakaLogo({ size = 28, animated = true, title, className }: MarkProps) {\n const id = useIds(\"ozm\", [\"amber\"] as const);\n return (\n <svg width={size} height={size} viewBox=\"-66 -66 132 132\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n <style>{CSS}</style>\n <defs>\n <linearGradient id={id.amber} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"#f59e0b\" />\n <stop offset=\"100%\" stopColor=\"#b45309\" />\n </linearGradient>\n </defs>\n <circle r=\"62\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"6 6\" opacity=\"0.5\" />\n <circle r=\"48\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.3\" />\n <g className={animated ? \"ozm-orbit\" : undefined}>\n <path d=\"M -24 -41.5 L 0 -55.4 L 24 -41.5 L 24 -24 L 14 -18.2 L 14 -35.7 L 0 -43.8 L -14 -35.7 L -14 -18.2\" stroke={neutral(\"--kz-text-muted\", 45)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M -48 0 L -38 17.3 L -14 31.2 L 0 23.1 L -10 17.3 L -24 9.2 L -24 -9.2\" stroke={neutral(\"--kz-text-secondary\", 70)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n <path d=\"M 48 0 L 38 17.3 L 14 31.2 L 0 23.1 L 10 17.3 L 24 9.2 L 24 -9.2\" stroke={`url(#${id.amber})`} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </g>\n <circle r=\"10\" fill={`url(#${id.amber})`} className={animated ? \"ozm-core\" : undefined} />\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"]}
package/dist/native.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/native/OrochiaMark.tsx
2
- import { useEffect, useRef } from "react";
2
+ import { useEffect, useState } from "react";
3
3
  import { AccessibilityInfo, Animated, Easing, View } from "react-native";
4
4
  import Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
5
5
 
@@ -31,8 +31,8 @@ var OROCHIA = {
31
31
  import { jsx, jsxs } from "react/jsx-runtime";
32
32
  var CENTER = OROCHIA.offset + 180;
33
33
  function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,255,255,0.35)" }) {
34
- const spin = useRef(new Animated.Value(0)).current;
35
- const pulse = useRef(new Animated.Value(0)).current;
34
+ const [spin] = useState(() => new Animated.Value(0));
35
+ const [pulse] = useState(() => new Animated.Value(0));
36
36
  useEffect(() => {
37
37
  if (!animated) return;
38
38
  let loops = [];
package/dist/native.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/native/OrochiaMark.tsx","../src/marks/orochia-geometry.ts"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { AccessibilityInfo, Animated, Easing, View } from \"react-native\";\nimport Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from \"react-native-svg\";\nimport { OROCHIA as G } from \"../marks/orochia-geometry\";\n\nexport interface NativeMarkProps {\n /** Width and height in points. */\n size?: number;\n /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */\n animated?: boolean;\n /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n title?: string;\n /** The neutral strokes (orbit, ring): the host's border colour. */\n neutral?: string;\n}\n\nconst CENTER = G.offset + 180;\n\n/**\n * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with\n * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame\n * breathe, the serpent stays still.\n */\nexport function OrochiaMark({ size = 48, animated = true, title, neutral = \"rgba(255,255,255,0.35)\" }: NativeMarkProps) {\n const spin = useRef(new Animated.Value(0)).current;\n const pulse = useRef(new Animated.Value(0)).current;\n useEffect(() => {\n if (!animated) return;\n let loops: Animated.CompositeAnimation[] = [];\n let cancelled = false;\n void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {\n if (reduce || cancelled) return;\n loops = [\n Animated.loop(Animated.timing(spin, { toValue: 1, duration: 30_000, easing: Easing.linear, useNativeDriver: true })),\n Animated.loop(\n Animated.sequence([\n Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n ]),\n ),\n ];\n loops.forEach((l) => l.start());\n });\n return () => {\n cancelled = true;\n loops.forEach((l) => l.stop());\n };\n }, [animated, spin, pulse]);\n\n const viewBox = size < 48 ? G.croppedViewBox : G.viewBox;\n const layer = { position: \"absolute\" as const, width: size, height: size };\n const a11y = title ? { accessible: true, accessibilityRole: \"image\" as const, accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: \"no-hide-descendants\" as const };\n const bodyGradient = (\n <LinearGradient id=\"body\" gradientUnits=\"userSpaceOnUse\" x1={G.body.x1 + G.offset} y1={G.body.y1 + G.offset} x2={G.body.x2 + G.offset} y2={G.body.y2 + G.offset}>\n {G.body.stops.map(([offset, color]) => (\n <Stop key={offset} offset={offset} stopColor={color} />\n ))}\n </LinearGradient>\n );\n\n return (\n <View style={{ width: size, height: size }} {...a11y}>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>\n <RadialGradient 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 <Circle cx={CENTER} cy={CENTER} r={170} fill=\"url(#glow)\" />\n <Circle cx={CENTER} cy={CENTER} r={G.ring.r} stroke={neutral} strokeWidth={G.ring.width} opacity={0.35} fill=\"none\" />\n </Svg>\n <Animated.View style={[layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: [\"0deg\", \"360deg\"] }) }] }]}>\n <Svg viewBox={viewBox} style={layer}>\n <Circle cx={CENTER} cy={CENTER} r={G.orbit.r} stroke={neutral} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity={0.6} fill=\"none\" />\n </Svg>\n </Animated.View>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>{bodyGradient}</Defs>\n <Group transform={`translate(${G.offset} ${G.offset})`}>\n <Path d={G.arc} stroke=\"url(#body)\" strokeWidth={22} strokeLinecap=\"round\" fill=\"none\" />\n <Path d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} fill=\"none\" />\n <Path d={G.neck} stroke=\"url(#body)\" strokeWidth={14} strokeLinecap=\"round\" fill=\"none\" />\n <Path d={G.tail} stroke=\"url(#body)\" strokeWidth={6} strokeLinecap=\"round\" fill=\"none\" />\n <Ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} rotation={G.head.rotate} origin={`${G.head.cx}, ${G.head.cy}`} fill=\"url(#body)\" />\n <Path d={G.tongue.d} stroke={G.tongue.color} strokeWidth={3} strokeLinecap=\"round\" fill=\"none\" />\n </Group>\n </Svg>\n <Animated.View style={[layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }]}>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>\n <LinearGradient 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 </Defs>\n <Group transform={`translate(${G.offset} ${G.offset})`}>\n <Circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n <Path d={G.flame.d} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} fill=\"url(#flame)\" />\n </Group>\n </Svg>\n </Animated.View>\n </View>\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"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/native/OrochiaMark.tsx","../src/marks/orochia-geometry.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { AccessibilityInfo, Animated, Easing, View } from \"react-native\";\nimport Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from \"react-native-svg\";\n\nimport { OROCHIA as G } from \"../marks/orochia-geometry\";\n\nexport interface NativeMarkProps {\n /** Width and height in points. */\n size?: number;\n /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */\n animated?: boolean;\n /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n title?: string;\n /** The neutral strokes (orbit, ring): the host's border colour. */\n neutral?: string;\n}\n\nconst CENTER = G.offset + 180;\n\n/**\n * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with\n * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame\n * breathe, the serpent stays still.\n */\nexport function OrochiaMark({ size = 48, animated = true, title, neutral = \"rgba(255,255,255,0.35)\" }: NativeMarkProps) {\n const [spin] = useState(() => new Animated.Value(0));\n const [pulse] = useState(() => new Animated.Value(0));\n useEffect(() => {\n if (!animated) return;\n let loops: Animated.CompositeAnimation[] = [];\n let cancelled = false;\n void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {\n if (reduce || cancelled) return;\n loops = [\n Animated.loop(Animated.timing(spin, { toValue: 1, duration: 30_000, easing: Easing.linear, useNativeDriver: true })),\n Animated.loop(\n Animated.sequence([\n Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),\n ]),\n ),\n ];\n loops.forEach((l) => l.start());\n });\n return () => {\n cancelled = true;\n loops.forEach((l) => l.stop());\n };\n }, [animated, spin, pulse]);\n\n const viewBox = size < 48 ? G.croppedViewBox : G.viewBox;\n const layer = { position: \"absolute\" as const, width: size, height: size };\n const a11y = title ? { accessible: true, accessibilityRole: \"image\" as const, accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: \"no-hide-descendants\" as const };\n const bodyGradient = (\n <LinearGradient id=\"body\" gradientUnits=\"userSpaceOnUse\" x1={G.body.x1 + G.offset} y1={G.body.y1 + G.offset} x2={G.body.x2 + G.offset} y2={G.body.y2 + G.offset}>\n {G.body.stops.map(([offset, color]) => (\n <Stop key={offset} offset={offset} stopColor={color} />\n ))}\n </LinearGradient>\n );\n\n return (\n <View style={{ width: size, height: size }} {...a11y}>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>\n <RadialGradient 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 <Circle cx={CENTER} cy={CENTER} r={170} fill=\"url(#glow)\" />\n <Circle cx={CENTER} cy={CENTER} r={G.ring.r} stroke={neutral} strokeWidth={G.ring.width} opacity={0.35} fill=\"none\" />\n </Svg>\n <Animated.View style={[layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: [\"0deg\", \"360deg\"] }) }] }]}>\n <Svg viewBox={viewBox} style={layer}>\n <Circle cx={CENTER} cy={CENTER} r={G.orbit.r} stroke={neutral} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity={0.6} fill=\"none\" />\n </Svg>\n </Animated.View>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>{bodyGradient}</Defs>\n <Group transform={`translate(${G.offset} ${G.offset})`}>\n <Path d={G.arc} stroke=\"url(#body)\" strokeWidth={22} strokeLinecap=\"round\" fill=\"none\" />\n <Path d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} fill=\"none\" />\n <Path d={G.neck} stroke=\"url(#body)\" strokeWidth={14} strokeLinecap=\"round\" fill=\"none\" />\n <Path d={G.tail} stroke=\"url(#body)\" strokeWidth={6} strokeLinecap=\"round\" fill=\"none\" />\n <Ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} rotation={G.head.rotate} origin={`${G.head.cx}, ${G.head.cy}`} fill=\"url(#body)\" />\n <Path d={G.tongue.d} stroke={G.tongue.color} strokeWidth={3} strokeLinecap=\"round\" fill=\"none\" />\n </Group>\n </Svg>\n <Animated.View style={[layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }]}>\n <Svg viewBox={viewBox} style={layer}>\n <Defs>\n <LinearGradient 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 </Defs>\n <Group transform={`translate(${G.offset} ${G.offset})`}>\n <Circle cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n <Path d={G.flame.d} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} fill=\"url(#flame)\" />\n </Group>\n </Svg>\n </Animated.View>\n </View>\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"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krizaka/ui",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "The Krizaka brand layer shared by every product: the animated marks (Krizaka, Orazaka, Orochia) and the Krizaka motion signature, in CSS and React.",
5
5
  "keywords": [
6
6
  "krizaka",
@@ -32,6 +32,7 @@
32
32
  "import": "./dist/index.js"
33
33
  },
34
34
  "./motion.css": "./dist/motion.css",
35
+ "./tailwind.css": "./tailwind.css",
35
36
  "./package.json": "./package.json",
36
37
  "./native": {
37
38
  "types": "./dist/native.d.ts",
@@ -40,6 +41,7 @@
40
41
  },
41
42
  "files": [
42
43
  "dist",
44
+ "tailwind.css",
43
45
  "README.md",
44
46
  "LICENSE"
45
47
  ],
@@ -55,11 +57,13 @@
55
57
  "devDependencies": {
56
58
  "@arethetypeswrong/cli": "^0.18.5",
57
59
  "@size-limit/preset-small-lib": "^14.2.0",
60
+ "@storybook/react-vite": "10.6.1",
58
61
  "@testing-library/dom": "^10.4.0",
59
62
  "@testing-library/react": "^16.3.0",
60
63
  "@types/node": "^22.15.0",
61
64
  "@types/react": "^19.2.0",
62
65
  "@types/react-dom": "^19.2.0",
66
+ "eslint": "^9.39.0",
63
67
  "happy-dom": "^20.0.0",
64
68
  "publint": "^0.3.25",
65
69
  "react": "^19.2.0",
@@ -67,9 +71,11 @@
67
71
  "react-native": "^0.86.3",
68
72
  "react-native-svg": "^15.15.4",
69
73
  "size-limit": "^14.2.0",
74
+ "storybook": "10.6.1",
70
75
  "tsup": "^8.5.1",
71
76
  "typescript": "^5.9.0",
72
- "vitest": "^4.1.11"
77
+ "vitest": "^4.1.11",
78
+ "@krizaka/config": "0.1.0"
73
79
  },
74
80
  "engines": {
75
81
  "node": ">=20"
@@ -104,10 +110,10 @@
104
110
  ],
105
111
  "scripts": {
106
112
  "build": "tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css')\"",
107
- "lint": "tsc --noEmit --noUnusedParameters --noFallthroughCasesInSwitch --noImplicitReturns",
113
+ "lint": "eslint . --max-warnings 0 && tsc --noEmit --noUnusedParameters --noFallthroughCasesInSwitch --noImplicitReturns",
108
114
  "typecheck": "tsc --noEmit",
109
115
  "test": "vitest run",
110
116
  "size": "size-limit",
111
- "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./motion.css"
117
+ "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./motion.css ./tailwind.css"
112
118
  }
113
119
  }
package/tailwind.css ADDED
@@ -0,0 +1,3 @@
1
+ /* @krizaka/ui/tailwind.css — imported by the app after the preset (@import "@krizaka/tailwind"):
2
+ Tailwind generates the classes the primitives use, read from the built package. */
3
+ @source "./dist";