@krizaka/ui 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
+<div align="center">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<img src="https://raw.githubusercontent.com/krizaka/.github/main/profile/assets/krizaka.svg" alt="Krizaka" width="72">
+
+# @krizaka/ui
+
+**The Krizaka brand layer, shared by every product.**
+The animated marks of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter,
+reveal, roll, shine and open.
+
+[![npm](https://img.shields.io/npm/v/@krizaka/ui?color=3b82f6&label=npm)](https://www.npmjs.com/package/@krizaka/ui)
+[![CI](https://github.com/krizaka/krizaka-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/krizaka/krizaka-ui/actions/workflows/ci.yml)
+[![License](https://img.shields.io/badge/license-Apache--2.0-blue)](LICENSE)
+
+</div>
+
+## Install
+
+```bash
+npm install @krizaka/ui
+```
+
+React 18 or 19. No framework, no CSS library required: the marks carry their own styles, the motion is one CSS file.
+
+
+## React Native
+
+The marks have one geometry; `@krizaka/ui/native` draws it with `react-native-svg` for the apps
+([orochia-mobile](https://github.com/krizaka/orochia-mobile)). The orbit turns and the flame breathes on the native
+driver, and stay still when the system asks to reduce motion. `react-dom`, `react-native` and `react-native-svg` are
+optional peers: a web app never installs the native ones, a native app never installs `react-dom`.
+
+```tsx
+import { OrochiaMark } from "@krizaka/ui/native";
+
+<OrochiaMark size={72} title="Orochia" neutral={theme.border} />
+```
+
+## The marks
+
+```tsx
+import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo } from "@krizaka/ui";
+
+<OrochiaLogo size={36} />                       // decorative (aria-hidden)
+<KrizakaLogo size={48} title="Krizaka" />       // an image with an accessible name
+<ProductLogo id="orazaka" animated={false} />   // by id, still
+```
+
+Neutral strokes follow the host's `--kz-*` tokens when they exist (`--kz-border-strong`, `--kz-text-muted`…) and the
+text colour otherwise, so a mark reads on dark and light surfaces alike. Every instance has its own gradient ids.
+Motion stops with `animated={false}` and always under `prefers-reduced-motion`.
+
+## The motion signature
+
+```tsx
+import "@krizaka/ui/motion.css";
+import { MotionObserver, RotatingWord } from "@krizaka/ui";
+
+// once, at the root of the app
+<MotionObserver />
+
+<h1>Creators you <RotatingWord words={["love", "follow", "support"]} /></h1>
+<section data-reveal style={{ "--kz-delay": "120ms" }}>…</section>
+<a className="kz-sheen">Get started</a>
+```
+
+| Class / attribute | What it does |
+| :--- | :--- |
+| `--kz-ease` | The one easing: `cubic-bezier(0.16, 1, 0.3, 1)` |
+| `kz-page` | A page entering (put it on a route wrapper) |
+| `data-reveal` (+ `--kz-delay`) | Rises into place when it enters the viewport (`MotionObserver`) |
+| `RotatingWord` / `kz-word` | A word that rolls through alternatives |
+| `kz-sheen` | A light sweeping across a primary action on hover |
+| `kz-spotlight` | A soft bloom following the pointer across a card |
+| `kz-lift` | A card rising under the pointer |
+| `kz-gradient-text`, `kz-marquee` | Drifting gradient text, endless bands |
+| `kz-overlay`, `kz-dialog`, `kz-pop`, `kz-fade` | Backdrops, dialogs (from the bottom on phones), menus, views swapped in place |
+
+With Tailwind CSS v4, give every transition the same easing:
+
+```css
+@theme inline {
+  --default-transition-timing-function: var(--kz-ease);
+}
+```
+
+## Develop
+
+```bash
+npm install
+npm run check      # type-check, tests, build
+```
+
+Releases: a `v*` tag publishes to npm from CI with provenance.
+
+## Used by
+
+[krizaka.com](https://github.com/krizaka/krizaka-com) ·
+[Orochia](https://github.com/krizaka/orochia) (through [`@krizaka/orochia-design-system`](https://github.com/krizaka/orochia-design-system)) ·
+[Orazaka](https://github.com/krizaka/orazaka)
+
+---
+
+Apache-2.0 · Part of [Krizaka](https://www.krizaka.com) — open source, closed to compromise.

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+
+interface MarkProps {
+    /** Width and height in pixels. */
+    size?: number;
+    /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */
+    animated?: boolean;
+    /** An accessible name (the mark becomes an image); without it the mark is decorative. */
+    title?: string;
+    className?: string;
+}
+
+/** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */
+declare function KrizakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+
+/** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */
+declare function OrazakaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+
+/**
+ * The Orochia mark: the serpent (Orochi) coiled into an "O" around the flame it guards. The orbit turns, scales slide
+ * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.
+ */
+declare function OrochiaLogo({ size, animated, title, className }: MarkProps): react.JSX.Element;
+
+type BrandId = "krizaka" | "orazaka" | "orochia";
+/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
+declare function ProductLogo({ id, ...props }: MarkProps & {
+    id: BrandId;
+}): react.JSX.Element;
+
+/**
+ * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including
+ * elements added later, so client-side navigation needs nothing more — and feeds the pointer position to
+ * `.kz-spotlight` cards (`--spot-x`, `--spot-y`). One IntersectionObserver, one MutationObserver, one listener.
+ * Under prefers-reduced-motion everything is revealed at once.
+ */
+declare function MotionObserver(): null;
+
+/**
+ * A word that rolls through alternatives — the Krizaka headline signature. The server render and the first client
+ * render show the first word; under prefers-reduced-motion it stays put. Decorative (`aria-hidden`): give the
+ * heading a stable accessible label.
+ */
+declare function RotatingWord({ words, interval, className }: {
+    words: readonly string[];
+    interval?: number;
+    className?: string;
+}): react.JSX.Element;
+
+/** Joins class names, skipping the falsy ones. */
+declare function cx(...parts: Array<string | false | null | undefined>): string;
+
+export { type BrandId, KrizakaLogo, type MarkProps, MotionObserver, OrazakaLogo, OrochiaLogo, ProductLogo, RotatingWord, cx };

package/dist/index.js

@@ -0,0 +1,258 @@
+"use client";
+
+// src/marks/shared.ts
+import { useId } from "react";
+var neutral = (token, percent) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;
+function useIds(prefix, keys) {
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`]));
+}
+var a11y = (title) => title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+
+// src/marks/KrizakaLogo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CSS = `
+.kzm-spin { transform-origin: 180px 180px; animation: kzm-spin 30s linear infinite; }
+.kzm-pulse { animation: kzm-pulse 4s ease-in-out infinite; }
+@keyframes kzm-spin { to { transform: rotate(360deg); } }
+@keyframes kzm-pulse {
+  0%, 100% { filter: drop-shadow(0 0 8px hsla(217, 92%, 60%, .2)) drop-shadow(0 0 24px hsla(217, 92%, 60%, .06)); }
+  50% { filter: drop-shadow(0 0 12px hsla(217, 92%, 60%, .35)) drop-shadow(0 0 36px hsla(217, 92%, 60%, .12)); }
+}
+@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }
+`;
+function KrizakaLogo({ size = 32, animated = true, title, className }) {
+  const id = useIds("kzm", ["blue", "steel", "core", "ambient"]);
+  const accent = "var(--kz-accent, hsl(217, 92%, 60%))";
+  const m = (cls) => animated ? cls : void 0;
+  const pulse = (x, y) => ({ className: m("kzm-pulse"), style: { transformOrigin: `${x}px ${y}px` } });
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 400 400", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx("style", { children: CSS }),
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("linearGradient", { id: id.blue, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: accent }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#60A5FA" })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: id.steel, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: neutral("--kz-text-secondary", 64) }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: neutral("--kz-text-muted", 38) })
+      ] }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: id.core, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#60A5FA", stopOpacity: "1" }),
+        /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: accent, stopOpacity: "0.7" }),
+        /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: accent, stopOpacity: "0.02" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" })
+      ] }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: id.ambient, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.08" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("g", { transform: "translate(20, 20)", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "170", fill: `url(#${id.ambient})` }),
+      /* @__PURE__ */ jsx("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") }),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "130", stroke: neutral("--kz-border-default", 10), strokeWidth: "1", opacity: "0.35" }),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "100", stroke: neutral("--kz-border-subtle", 6), strokeWidth: "1", strokeDasharray: "3 6", opacity: "0.3" }),
+      /* @__PURE__ */ jsx("line", { x1: "180", y1: "20", x2: "180", y2: "80", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
+      /* @__PURE__ */ jsx("line", { x1: "320", y1: "100", x2: "260", y2: "140", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
+      /* @__PURE__ */ jsx("line", { x1: "40", y1: "100", x2: "100", y2: "140", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "55", fill: `url(#${id.core})`, ...pulse(180, 180) }),
+      /* @__PURE__ */ jsx("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" }),
+      /* @__PURE__ */ jsx("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" }),
+      /* @__PURE__ */ jsx("path", { d: "M255,120 L290,85 L310,100", stroke: `url(#${id.blue})`, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M105,120 L70,85 L50,100", stroke: `url(#${id.steel})`, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M180,240 L180,280 L200,295", stroke: `url(#${id.steel})`, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M180,280 L160,295", stroke: `url(#${id.steel})`, strokeWidth: "3", strokeLinecap: "round", opacity: "0.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "180", y1: "130", x2: "180", y2: "195", stroke: "#60A5FA", strokeWidth: "1.5", opacity: "0.3" }),
+      /* @__PURE__ */ jsx("line", { x1: "145", y1: "160", x2: "215", y2: "160", stroke: "#60A5FA", strokeWidth: "1.5", opacity: "0.3" }),
+      [[180, 130], [180, 195], [145, 160], [215, 160]].map(([x, y]) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "3", fill: "#60A5FA", opacity: "0.5", ...pulse(x, y) }, `${x}-${y}`)),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "18", fill: "#1E40AF", ...pulse(180, 160) }),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "12", fill: "#3B82F6", ...pulse(180, 160) }),
+      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "5", fill: "#BFDBFE", ...pulse(180, 160) }),
+      /* @__PURE__ */ jsx("circle", { cx: "310", cy: "50", r: "2.5", fill: "#60A5FA", opacity: "0.6" }),
+      /* @__PURE__ */ jsx("circle", { cx: "50", cy: "260", r: "2", fill: neutral("--kz-border-strong", 16), opacity: "0.4" })
+    ] })
+  ] });
+}
+
+// src/marks/OrazakaLogo.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CSS2 = `
+.ozm-orbit { transform-box: view-box; transform-origin: 0 0; animation: ozm-orbit 35s linear infinite; }
+.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 2.5s ease-in-out infinite; }
+@keyframes ozm-orbit { to { transform: rotate(360deg); } }
+@keyframes ozm-core {
+  0%, 100% { transform: scale(1); opacity: .9; filter: drop-shadow(0 0 3px #f59e0b); }
+  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }
+}
+@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }
+`;
+function OrazakaLogo({ size = 28, animated = true, title, className }) {
+  const id = useIds("ozm", ["amber"]);
+  return /* @__PURE__ */ jsxs2("svg", { width: size, height: size, viewBox: "-66 -66 132 132", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx2("style", { children: CSS2 }),
+    /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: id.amber, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+      /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "#f59e0b" }),
+      /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: "#b45309" })
+    ] }) }),
+    /* @__PURE__ */ jsx2("circle", { r: "62", stroke: neutral("--kz-border-strong", 16), strokeWidth: "1.5", strokeDasharray: "6 6", opacity: "0.5" }),
+    /* @__PURE__ */ jsx2("circle", { r: "48", stroke: neutral("--kz-border-default", 10), strokeWidth: "1", opacity: "0.3" }),
+    /* @__PURE__ */ jsxs2("g", { className: animated ? "ozm-orbit" : void 0, children: [
+      /* @__PURE__ */ jsx2("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" }),
+      /* @__PURE__ */ jsx2("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" }),
+      /* @__PURE__ */ jsx2("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" })
+    ] }),
+    /* @__PURE__ */ jsx2("circle", { r: "10", fill: `url(#${id.amber})`, className: animated ? "ozm-core" : void 0 })
+  ] });
+}
+
+// src/marks/orochia-geometry.ts
+var OROCHIA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [["0%", "#7c3aed"], ["55%", "#d946ef"], ["100%", "#f472b6"]] },
+  flameGradient: { stops: [["0%", "#a855f7"], ["100%", "#f9a8d4"]] },
+  glow: { color: "#d946ef", opacity: 0.18 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 },
+  arc: "M259.8,142.8 A88,88 0 1 1 142.8,100.2",
+  neck: "M142.8,100.2 A88,88 0 0 1 187.7,92.3",
+  tail: "M187.7,92.3 A88,88 0 0 1 221.3,102.3",
+  scales: { color: "#fdf4ff", opacity: 0.45, width: 3, dash: "2 14" },
+  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },
+  tongue: { d: "M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3", color: "#f472b6" },
+  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: "#fdf4ff" },
+  flame: {
+    translate: [127, 120],
+    scale: 4.4,
+    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"
+  }
+};
+
+// src/marks/OrochiaLogo.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CSS3 = `
+.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }
+.orom-slither { animation: orom-slither 2.4s linear infinite; }
+.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }
+@keyframes orom-spin { to { transform: rotate(360deg); } }
+@keyframes orom-slither { to { stroke-dashoffset: -64; } }
+@keyframes orom-pulse {
+  0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }
+  50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }
+`;
+function OrochiaLogo({ size = 36, animated = true, title, className }) {
+  const id = useIds("orom", ["body", "flame", "glow"]);
+  const m = (cls) => animated ? cls : void 0;
+  return /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx3("style", { children: CSS3 }),
+    /* @__PURE__ */ jsxs3("defs", { children: [
+      /* @__PURE__ */ jsx3("linearGradient", { id: id.body, gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1, y1: OROCHIA.body.y1, x2: OROCHIA.body.x2, y2: OROCHIA.body.y2, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx3("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsx3("linearGradient", { id: id.flame, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx3("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs3("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx3("stop", { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx3("stop", { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: "0" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: "180", cy: "180", r: "170", fill: `url(#${id.glow})` }),
+      /* @__PURE__ */ jsx3("circle", { className: m("orom-spin"), cx: "180", cy: "180", r: OROCHIA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: ".6" }),
+      /* @__PURE__ */ jsx3("circle", { cx: "180", cy: "180", r: OROCHIA.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: OROCHIA.ring.width, opacity: ".35" }),
+      /* @__PURE__ */ jsx3("path", { d: OROCHIA.arc, stroke: `url(#${id.body})`, strokeWidth: "22", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("path", { className: m("orom-slither"), d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash }),
+      /* @__PURE__ */ jsx3("path", { d: OROCHIA.neck, stroke: `url(#${id.body})`, strokeWidth: "14", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("path", { d: OROCHIA.tail, stroke: `url(#${id.body})`, strokeWidth: "6", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("ellipse", { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, transform: `rotate(${OROCHIA.head.rotate} ${OROCHIA.head.cx} ${OROCHIA.head.cy})`, fill: `url(#${id.body})` }),
+      /* @__PURE__ */ jsx3("path", { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: "3", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("circle", { className: m("orom-pulse"), cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+      /* @__PURE__ */ jsx3("path", { className: m("orom-pulse"), transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, d: OROCHIA.flame.d, fill: `url(#${id.flame})` })
+    ] })
+  ] });
+}
+
+// src/marks/ProductLogo.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ProductLogo({ id, ...props }) {
+  if (id === "krizaka") return /* @__PURE__ */ jsx4(KrizakaLogo, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx4(OrazakaLogo, { ...props });
+  return /* @__PURE__ */ jsx4(OrochiaLogo, { ...props });
+}
+
+// src/motion/MotionObserver.tsx
+import { useEffect } from "react";
+function MotionObserver() {
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      const revealAll = (root) => root.querySelectorAll("[data-reveal]").forEach((el) => el.classList.add("kz-in"));
+      revealAll(document);
+      const mo2 = new MutationObserver(() => revealAll(document));
+      mo2.observe(document.body, { childList: true, subtree: true });
+      return () => mo2.disconnect();
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          entry.target.classList.add("kz-in");
+          io.unobserve(entry.target);
+        }
+      },
+      { rootMargin: "0px 0px -8% 0px", threshold: 0.12 }
+    );
+    const watch = (root) => root.querySelectorAll("[data-reveal]:not(.kz-in)").forEach((el) => io.observe(el));
+    watch(document);
+    const mo = new MutationObserver((records) => {
+      for (const r of records) r.addedNodes.forEach((n) => n instanceof Element && (n.matches("[data-reveal]") ? io.observe(n) : watch(n)));
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      io.disconnect();
+      mo.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    const move = (e) => {
+      const card = e.target?.closest?.(".kz-spotlight");
+      if (!card) return;
+      const box = card.getBoundingClientRect();
+      card.style.setProperty("--spot-x", `${e.clientX - box.left}px`);
+      card.style.setProperty("--spot-y", `${e.clientY - box.top}px`);
+    };
+    document.addEventListener("pointermove", move, { passive: true });
+    return () => document.removeEventListener("pointermove", move);
+  }, []);
+  return null;
+}
+
+// src/motion/RotatingWord.tsx
+import { useEffect as useEffect2, useState } from "react";
+
+// src/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/motion/RotatingWord.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function RotatingWord({ words, interval = 2600, className }) {
+  const [i, setI] = useState(0);
+  useEffect2(() => {
+    if (words.length < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const timer = setInterval(() => setI((k) => (k + 1) % words.length), interval);
+    return () => clearInterval(timer);
+  }, [words.length, interval]);
+  return /* @__PURE__ */ jsx5("span", { "aria-hidden": true, className: "kz-rotating", children: /* @__PURE__ */ jsx5("span", { className: cx("kz-word", className), children: words[i] }, i) });
+}
+export {
+  KrizakaLogo,
+  MotionObserver,
+  OrazakaLogo,
+  OrochiaLogo,
+  ProductLogo,
+  RotatingWord,
+  cx
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/motion.css

@@ -0,0 +1,157 @@
+/* @krizaka/ui — the Krizaka motion signature.
+   One easing (--kz-ease); pages that enter; sections that rise into view ([data-reveal] + MotionObserver); words
+   that roll (RotatingWord); a sheen across primary actions; a spotlight that follows the pointer; cards that lift;
+   bands that slide; and one vocabulary for what opens over the page (overlay, dialog, pop, fade).
+   Plain CSS, no framework: import "@krizaka/ui/motion.css" once. Everything stops under prefers-reduced-motion.
+   Tailwind v4: `--default-transition-timing-function: var(--kz-ease)` in @theme gives every transition the easing. */
+
+:root {
+  --kz-ease: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Page entrance (app/template.tsx re-mounts on every navigation). */
+.kz-page {
+  /* backwards, not both: a filled transform animation would anchor every position:fixed descendant to the page. */
+  animation: kz-page-in 0.5s var(--kz-ease) backwards;
+}
+@keyframes kz-page-in {
+  from { opacity: 0; transform: translateY(10px); }
+}
+
+/* Reveal on scroll: [data-reveal] rises into place when it enters the viewport (MotionObserver adds .kz-in). */
+[data-reveal] {
+  opacity: 0;
+  transform: translateY(22px);
+  filter: blur(4px);
+  transition: opacity 0.8s var(--kz-ease), transform 0.8s var(--kz-ease), filter 0.8s var(--kz-ease);
+  transition-delay: var(--kz-delay, 0ms);
+}
+[data-reveal].kz-in {
+  opacity: 1;
+  transform: none;
+  filter: none;
+}
+
+/* A word that rolls in (RotatingWord). */
+.kz-word {
+  display: inline-block;
+  animation: kz-word-in 0.6s var(--kz-ease) both;
+}
+@keyframes kz-word-in {
+  from { opacity: 0; transform: translateY(70%); filter: blur(6px); }
+}
+
+/* RotatingWord: the alternatives share one grid cell, the current one rolls in. */
+.kz-rotating {
+  display: inline-grid;
+  overflow: hidden;
+  padding-bottom: 0.08em;
+  vertical-align: bottom;
+}
+.kz-rotating > .kz-word {
+  grid-area: 1 / 1;
+  white-space: nowrap;
+}
+
+/* Sheen across a primary action on hover. */
+.kz-sheen {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+.kz-sheen::after {
+  content: "";
+  position: absolute;
+  inset: -20% auto -20% 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .kz-sheen:hover::after {
+    animation: kz-sheen-sweep 760ms var(--kz-ease);
+  }
+}
+@keyframes kz-sheen-sweep {
+  0% { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
+  18% { opacity: 1; }
+  100% { opacity: 0; transform: translateX(360%) skewX(-18deg); }
+}
+
+/* Spotlight: a soft accent bloom follows the pointer across a card (MotionObserver writes --spot-x/--spot-y). */
+.kz-spotlight {
+  position: relative;
+}
+.kz-spotlight::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(168, 85, 247, 0.16), transparent 45%);
+  opacity: 0;
+  transition: opacity 0.35s var(--kz-ease);
+  pointer-events: none;
+  z-index: 0;
+}
+.kz-spotlight:hover::before {
+  opacity: 1;
+}
+
+/* Lift: cards rise a little under the pointer. */
+.kz-lift {
+  transition: transform 0.35s var(--kz-ease), box-shadow 0.35s var(--kz-ease), border-color 0.35s var(--kz-ease);
+}
+@media (hover: hover) {
+  .kz-lift:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 18px 40px -18px rgba(124, 58, 237, 0.45);
+  }
+}
+
+/* Gradient text that slowly drifts. */
+.kz-gradient-text {
+  background-size: 200% auto;
+  animation: kz-gradient-drift 8s ease-in-out infinite;
+}
+@keyframes kz-gradient-drift {
+  50% { background-position: 100% center; }
+}
+
+/* Marquee (logos, feature words): two copies side by side, sliding forever. */
+.kz-marquee {
+  display: flex;
+  width: max-content;
+  animation: kz-marquee var(--kz-marquee-duration, 40s) linear infinite;
+}
+@keyframes kz-marquee {
+  to { transform: translateX(-50%); }
+}
+
+/* Entrances of what opens over the page — one vocabulary for every overlay, dialog, menu and swapped view.
+   Opacity and transform only, `backwards` fill: nothing stays transformed once in place. */
+.kz-overlay { animation: kz-fade-in 0.22s var(--kz-ease) backwards; }   /* the dimmed backdrop */
+.kz-dialog { animation: kz-dialog-in 0.42s var(--kz-ease) backwards; }  /* a dialog: rises from the bottom on phones */
+.kz-pop { animation: kz-pop-in 0.22s var(--kz-ease) backwards; transform-origin: top right; } /* menus, popovers */
+.kz-fade { animation: kz-fade-in 0.35s var(--kz-ease) backwards; }      /* a view swapped in place (tabs, filters) */
+@keyframes kz-fade-in {
+  from { opacity: 0; }
+}
+@keyframes kz-dialog-in {
+  from { opacity: 0; transform: translateY(32px); }
+}
+@media (min-width: 640px) {
+  @keyframes kz-dialog-in {
+    from { opacity: 0; transform: translateY(12px) scale(0.97); }
+  }
+}
+@keyframes kz-pop-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade { animation: none !important; }
+  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
+  .kz-sheen::after { display: none; }
+  .kz-lift, .kz-lift:hover { transform: none; transition: none; }
+}

package/dist/native.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface NativeMarkProps {
+    /** Width and height in points. */
+    size?: number;
+    /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */
+    animated?: boolean;
+    /** An accessible name (the mark becomes an image); without it the mark is decorative. */
+    title?: string;
+    /** The neutral strokes (orbit, ring): the host's border colour. */
+    neutral?: string;
+}
+/**
+ * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with
+ * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame
+ * breathe, the serpent stays still.
+ */
+declare function OrochiaMark({ size, animated, title, neutral }: NativeMarkProps): React.JSX.Element;
+
+export { type NativeMarkProps, OrochiaMark };

package/dist/native.js

@@ -0,0 +1,95 @@
+// src/native/OrochiaMark.tsx
+import { useEffect, useRef } from "react";
+import { AccessibilityInfo, Animated, Easing, View } from "react-native";
+import Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
+
+// src/marks/orochia-geometry.ts
+var OROCHIA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [["0%", "#7c3aed"], ["55%", "#d946ef"], ["100%", "#f472b6"]] },
+  flameGradient: { stops: [["0%", "#a855f7"], ["100%", "#f9a8d4"]] },
+  glow: { color: "#d946ef", opacity: 0.18 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 },
+  arc: "M259.8,142.8 A88,88 0 1 1 142.8,100.2",
+  neck: "M142.8,100.2 A88,88 0 0 1 187.7,92.3",
+  tail: "M187.7,92.3 A88,88 0 0 1 221.3,102.3",
+  scales: { color: "#fdf4ff", opacity: 0.45, width: 3, dash: "2 14" },
+  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },
+  tongue: { d: "M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3", color: "#f472b6" },
+  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: "#fdf4ff" },
+  flame: {
+    translate: [127, 120],
+    scale: 4.4,
+    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"
+  }
+};
+
+// src/native/OrochiaMark.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CENTER = OROCHIA.offset + 180;
+function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,255,255,0.35)" }) {
+  const spin = useRef(new Animated.Value(0)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!animated) return;
+    let loops = [];
+    let cancelled = false;
+    void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+      if (reduce || cancelled) return;
+      loops = [
+        Animated.loop(Animated.timing(spin, { toValue: 1, duration: 3e4, easing: Easing.linear, useNativeDriver: true })),
+        Animated.loop(
+          Animated.sequence([
+            Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+            Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+          ])
+        )
+      ];
+      loops.forEach((l) => l.start());
+    });
+    return () => {
+      cancelled = true;
+      loops.forEach((l) => l.stop());
+    };
+  }, [animated, spin, pulse]);
+  const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
+  const layer = { position: "absolute", width: size, height: size };
+  const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
+  const bodyGradient = /* @__PURE__ */ jsx(LinearGradient, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx(Stop, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx(Stop, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx(Stop, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+    ] }),
+    /* @__PURE__ */ jsx(Animated.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx(Defs, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Animated.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(LinearGradient, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx(Stop, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx(Circle, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx(Path, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  OrochiaMark
+};
+//# sourceMappingURL=native.js.map

package/dist/native.js.map

@@ -0,0 +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":[]}

package/package.json

@@ -1,6 +1,92 @@
 {
   "name": "@krizaka/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "The Krizaka brand layer shared by every product: the animated marks (Krizaka, Orazaka, Orochia) and the Krizaka motion signature, in CSS and React.",
+  "keywords": [
+    "krizaka",
+    "orazaka",
+    "orochia",
+    "react",
+    "logo",
+    "motion",
+    "animation",
+    "design-system",
+    "brand"
+  ],
+  "homepage": "https://github.com/krizaka/krizaka-ui#readme",
+  "bugs": "https://github.com/krizaka/krizaka-ui/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/krizaka/krizaka-ui.git"
+  },
+  "license": "Apache-2.0",
+  "author": "Krizaka (https://www.krizaka.com)",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./motion.css": "./dist/motion.css",
+    "./package.json": "./package.json",
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css')\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "check": "npm run typecheck && npm test && npm run build",
+    "prepublishOnly": "npm run check"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-native": ">=0.76",
+    "react-native-svg": ">=15"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "happy-dom": "^20.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native": "^0.86.3",
+    "react-native-svg": "^15.15.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "vitest": "^4.1.11"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  }
+}