@krizaka/ui 2.8.0 → 2.10.0

package/dist/goal-gauge.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { S as StoryVariant } from './story-variant-CLn4H5Nt.js';
+
+type GoalGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name. */
+    label: string;
+    /** The number of steps of the goal (2–24). */
+    segments: number;
+    /**
+     * The steps reached (lit), from 0 to `segments`.
+     * @default segments
+     */
+    value?: number;
+    /** The value in words (“6 of 10”, “€420 raised”); default `value / segments`. */
+    valueText?: string;
+    /**
+     * How the scene plays it: `fill` lights the reached steps one by one; `drain` empties the spent ones (a countdown of
+     * what is left: tickets, lives, problems still standing).
+     * @default "fill"
+     */
+    mode?: "fill" | "drain";
+    /**
+     * Shows the label and the value above the segments.
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * `default`: rounded segments. `arcade`: the boss gauge — a skewed frame, gradient cells, a centred mono label.
+     * @default "default"
+     */
+    variant?: StoryVariant;
+    /** A brand scope (`orochia` → `.brand-orochia`). */
+    brand?: string;
+};
+/** A goal in steps: `role="meter"`, the reached steps lit, the value in words beside the label. */
+declare function GoalGauge({ label, segments, value, valueText, mode, showLabel, variant, brand, className, style, ...props }: GoalGaugeProps): React.JSX.Element;
+
+export { GoalGauge, type GoalGaugeProps };

package/dist/goal-gauge.js

@@ -0,0 +1,53 @@
+import {
+  brandClass,
+  cn,
+  storyVariantClass
+} from "./chunk-VCAAHCHL.js";
+
+// src/goal-gauge/goal-gauge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel = true, variant, brand, className, style, ...props }) {
+  const total = Math.max(1, Math.round(segments));
+  const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
+  const words = valueText ?? `${lit} / ${total}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": total,
+      "aria-valuenow": lit,
+      "aria-valuetext": words,
+      "data-mode": mode,
+      className: cn("kzs-gauge", storyVariantClass(variant), brandClass(brand), className),
+      style: { "--kzs-segments": total, ...style },
+      ...props,
+      children: [
+        showLabel && /* @__PURE__ */ jsxs("div", { className: "kzs-gauge-head", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "kzs-gauge-label", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "kzs-gauge-value", children: words })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "kzs-gauge-cells", "aria-hidden": true, children: Array.from({ length: total }, (_, i) => {
+          const on = i < lit;
+          const animate = mode === "fill" ? on : !on;
+          const order = mode === "fill" ? i : i - lit;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "kzs-gauge-cell",
+              "data-lit": on ? "" : void 0,
+              "data-animate": animate ? "" : void 0,
+              style: animate ? { "--i": order } : void 0
+            },
+            i
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  GoalGauge
+};
+//# sourceMappingURL=goal-gauge.js.map

package/dist/goal-gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/goal-gauge/goal-gauge.tsx"],"sourcesContent":["// Server-safe. A goal counted in steps (story.css): 6 of 10 backers, 3 of 5 dares done, 8 problems out of the way. A\n// `meter` with its value in words; in a `Scene` of a `ScrollStage` the segments light (or drain) one by one, once.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type GoalGaugeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /** What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name. */\n  label: string;\n  /** The number of steps of the goal (2–24). */\n  segments: number;\n  /**\n   * The steps reached (lit), from 0 to `segments`.\n   * @default segments\n   */\n  value?: number;\n  /** The value in words (“6 of 10”, “€420 raised”); default `value / segments`. */\n  valueText?: string;\n  /**\n   * How the scene plays it: `fill` lights the reached steps one by one; `drain` empties the spent ones (a countdown of\n   * what is left: tickets, lives, problems still standing).\n   * @default \"fill\"\n   */\n  mode?: \"fill\" | \"drain\";\n  /**\n   * Shows the label and the value above the segments.\n   * @default true\n   */\n  showLabel?: boolean;\n  /**\n   * `default`: rounded segments. `arcade`: the boss gauge — a skewed frame, gradient cells, a centred mono label.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** A goal in steps: `role=\"meter\"`, the reached steps lit, the value in words beside the label. */\nexport function GoalGauge({ label, segments, value, valueText, mode = \"fill\", showLabel = true, variant, brand, className, style, ...props }: GoalGaugeProps) {\n  const total = Math.max(1, Math.round(segments));\n  const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));\n  const words = valueText ?? `${lit} / ${total}`;\n  return (\n    <div\n      role=\"meter\"\n      aria-label={label}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={lit}\n      aria-valuetext={words}\n      data-mode={mode}\n      className={cn(\"kzs-gauge\", storyVariantClass(variant), brandClass(brand), className)}\n      style={{ \"--kzs-segments\": total, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {showLabel && (\n        <div className=\"kzs-gauge-head\" aria-hidden>\n          <span className=\"kzs-gauge-label\">{label}</span>\n          <span className=\"kzs-gauge-value\">{words}</span>\n        </div>\n      )}\n      <div className=\"kzs-gauge-cells\" aria-hidden>\n        {Array.from({ length: total }, (_, i) => {\n          const on = i < lit;\n          const animate = mode === \"fill\" ? on : !on;\n          const order = mode === \"fill\" ? i : i - lit;\n          return (\n            <span\n              key={i}\n              className=\"kzs-gauge-cell\"\n              data-lit={on ? \"\" : undefined}\n              data-animate={animate ? \"\" : undefined}\n              style={animate ? ({ \"--i\": order } as React.CSSProperties) : undefined}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AA0DQ,SACE,KADF;AAlBD,SAAS,UAAU,EAAE,OAAO,UAAU,OAAO,WAAW,OAAO,QAAQ,YAAY,MAAM,SAAS,OAAO,WAAW,OAAO,GAAG,MAAM,GAAmB;AAC5J,QAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC;AAC9C,QAAM,MAAM,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,SAAS,KAAK,CAAC,CAAC;AACnE,QAAM,QAAQ,aAAa,GAAG,GAAG,MAAM,KAAK;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB;AAAA,MAChB,aAAW;AAAA,MACX,WAAW,GAAG,aAAa,kBAAkB,OAAO,GAAG,WAAW,KAAK,GAAG,SAAS;AAAA,MACnF,OAAO,EAAE,kBAAkB,OAAO,GAAG,MAAM;AAAA,MAC1C,GAAG;AAAA,MAEH;AAAA,qBACC,qBAAC,SAAI,WAAU,kBAAiB,eAAW,MACzC;AAAA,8BAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,UACzC,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,WAC3C;AAAA,QAEF,oBAAC,SAAI,WAAU,mBAAkB,eAAW,MACzC,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAAM;AACvC,gBAAM,KAAK,IAAI;AACf,gBAAM,UAAU,SAAS,SAAS,KAAK,CAAC;AACxC,gBAAM,QAAQ,SAAS,SAAS,IAAI,IAAI;AACxC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,YAAU,KAAK,KAAK;AAAA,cACpB,gBAAc,UAAU,KAAK;AAAA,cAC7B,OAAO,UAAW,EAAE,OAAO,MAAM,IAA4B;AAAA;AAAA,YAJxD;AAAA,UAKP;AAAA,QAEJ,CAAC,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/how-it-works-page.d.ts

@@ -0,0 +1,48 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface HowStep {
+    /** A stable key (the step's anchor). */
+    id: string;
+    /** What happens, in a few words. */
+    title: React.ReactNode;
+    /** How, in two or three sentences. */
+    text: React.ReactNode;
+    /** Beside the words: a code block, a schema, a screen. */
+    visual?: React.ReactNode;
+}
+type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** The way back to the product. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Beside the hero: the page's bird or an illustration. */
+    aside?: React.ReactNode;
+    /** The steps' accessible name (`The steps`). */
+    stepsLabel: string;
+    /** The steps, in order. */
+    steps: readonly HowStep[];
+    /** After the steps: architecture, guarantees, a module map. */
+    children?: React.ReactNode;
+    /** The closing call. */
+    closing?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        actions: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */
+declare function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps): React.JSX.Element;
+
+export { HowItWorksPage, type HowItWorksPageProps, type HowStep };

package/dist/how-it-works-page.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/how-it-works-page/how-it-works-page.tsx
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside }),
+    /* @__PURE__ */ jsx(Section, { "aria-label": stepsLabel, children: /* @__PURE__ */ jsx("ol", { className: "kz-tpl-timeline", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { id: step.id, className: "kz-tpl-step", "data-reveal": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "kz-tpl-step-n", "aria-hidden": true, children: i + 1 }),
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-step-text", children: [
+        /* @__PURE__ */ jsx("h2", { children: step.title }),
+        /* @__PURE__ */ jsx("p", { children: step.text })
+      ] }),
+      step.visual && /* @__PURE__ */ jsx("div", { className: "kz-tpl-step-visual", children: step.visual })
+    ] }, step.id)) }) }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "how-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "how-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  HowItWorksPage
+};
+//# sourceMappingURL=how-it-works-page.js.map

package/dist/how-it-works-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/how-it-works-page/how-it-works-page.tsx"],"sourcesContent":["// Server-safe. How a product works, told in steps (blocks.css `.kz-tpl-timeline`): the hero, then a numbered line\n// down the page — each step its words beside its visual (a command, a schema, a screen), the sides alternating on a\n// wide screen, one column on a phone — then what is under the hood and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface HowStep {\n  /** A stable key (the step's anchor). */\n  id: string;\n  /** What happens, in a few words. */\n  title: React.ReactNode;\n  /** How, in two or three sentences. */\n  text: React.ReactNode;\n  /** Beside the words: a code block, a schema, a screen. */\n  visual?: React.ReactNode;\n}\n\nexport type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back to the product. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: the page's bird or an illustration. */\n  aside?: React.ReactNode;\n  /** The steps' accessible name (`The steps`). */\n  stepsLabel: string;\n  /** The steps, in order. */\n  steps: readonly HowStep[];\n  /** After the steps: architecture, guarantees, a module map. */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */\nexport function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} />\n      <Section aria-label={stepsLabel}>\n        <ol className=\"kz-tpl-timeline\">\n          {steps.map((step, i) => (\n            <li key={step.id} id={step.id} className=\"kz-tpl-step\" data-reveal=\"\">\n              <span className=\"kz-tpl-step-n\" aria-hidden>\n                {i + 1}\n              </span>\n              <div className=\"kz-tpl-step-text\">\n                <h2>{step.title}</h2>\n                <p>{step.text}</p>\n              </div>\n              {step.visual && <div className=\"kz-tpl-step-visual\">{step.visual}</div>}\n            </li>\n          ))}\n        </ol>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"how-closing\">\n          <CtaPanel id=\"how-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA6CnB,cAQQ,YARR;AAHC,SAAS,eAAe,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,OAAO,YAAY,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAwB;AACnK,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc;AAAA,IAChG,oBAAC,WAAQ,cAAY,YACnB,8BAAC,QAAG,WAAU,mBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAiB,IAAI,KAAK,IAAI,WAAU,eAAc,eAAY,IACjE;AAAA,0BAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,cAAI,GACP;AAAA,MACA,qBAAC,SAAI,WAAU,oBACb;AAAA,4BAAC,QAAI,eAAK,OAAM;AAAA,QAChB,oBAAC,OAAG,eAAK,MAAK;AAAA,SAChB;AAAA,MACC,KAAK,UAAU,oBAAC,SAAI,WAAU,sBAAsB,eAAK,QAAO;AAAA,SAR1D,KAAK,EASd,CACD,GACH,GACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,eACpC,8BAAC,YAAS,IAAG,eAAc,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MACxE,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -34,18 +34,28 @@ declare function OrazakaLogo({ size, animated, title, className }: MarkProps): R
  */
 declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 /** 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;
 
 /**
- * The Yazakia mark: a "Y" drawn as two people who lean in and meet — two arms ending in round heads, joined at a
- * core that breathes, one stem below — in the Yazakia gradient (emerald → turquoise, the brand's mark gradient of
- * @krizaka/tokens, the same in dark and light). The pair, two nodes on the dashed orbit, turns slowly around it — the
- * family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.
+ * The Yazakia mark: two voices — two solid speech bubbles that overlap, the left a shade deeper — in the Yazakia
+ * gradient (emerald → turquoise, the brand's mark gradient of @krizaka/tokens, the same in dark and light). Where they
+ * overlap, what the two share, is the bright core: a lens lit from above that breathes. The pair, two nodes on the
+ * dashed orbit, turns slowly around it — the family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it
+ * crops to the emblem.
  */
 declare function YazakiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, cx };
+/**
+ * The Yororis mark, "the hold": a "Y" whose arms are two filled leaves — open hands — rising from one stem and cupping
+ * a warm core that breathes: held, given room, listened to. Leaves in the Yororis gradient (sand → sage, the brand's
+ * mark gradient of @krizaka/tokens, the same in dark and light), a vein of light along each, the core in a warm sand
+ * light; the moment, one node on the dashed orbit, comes round slowly. The family's grammar (orbit, ring, bold emblem,
+ * bright core) with the slowest breath of the family. Below 48 px it crops to the emblem.
+ */
+declare function YororisLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
+
+export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, YororisLogo, cx };

package/dist/index.js

@@ -52,6 +52,16 @@ var marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#089b96"
     ]
+  ],
+  "yororis": [
+    [
+      "0%",
+      "#a4773d"
+    ],
+    [
+      "100%",
+      "#5d894d"
+    ]
   ]
 });
 
@@ -263,21 +273,18 @@ var YAZAKIA = {
   viewBox: "0 0 400 400",
   croppedViewBox: "80 80 240 240",
   center: 200,
-  /** The two arms, from each head to the core, mirrored around x = 200. */
-  arms: ["M128 126 C130 178 168 206 200 214", "M272 126 C270 178 232 206 200 214"],
-  /** The stem, from the core down. */
-  stem: "M200 214 L200 280",
-  /** The width of the arms and the stem: the weight of Orochia's body. */
-  stroke: 36,
-  /** The two heads, at the ends of the arms. */
-  heads: [
-    { cx: 128, cy: 124, r: 28 },
-    { cx: 272, cy: 124, r: 28 }
+  /** The two voices, left then right: each a bubble (cut around the lens) and its tail. */
+  voices: [
+    { body: "M191.9 109 A80 80 0 1 0 191.9 259 A87 87 0 0 1 191.9 109 Z", tail: "M98 230 Q104 268 88 294 Q122 288 144 262 L130 200 Z" },
+    { body: "M208.1 109 A80 80 0 1 1 208.1 259 A87 87 0 0 0 208.1 109 Z", tail: "M302 230 Q296 268 312 294 Q278 288 256 262 L270 200 Z" }
   ],
+  /** The left voice, a shade deeper: the depth between the two. */
+  shade: { color: "#000", opacity: 0.22 },
+  /** Where the bubbles overlap: the core, lit from above. */
+  lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
   gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
-  /** Where the arms meet: the core that breathes. */
-  core: { cx: 200, cy: 214, r: 24, inner: 8.5 },
-  highlight: "#f0fdfa",
+  /** The light on the lens: bright at the top, fading down. */
+  highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
   /** The pair: two nodes on the orbit, opposite each other, that turn with it. */
   pair: { r: 8, at: [[40, 200], [360, 200]] },
   glow: { color: turquoise, opacity: 0.16 },
@@ -300,12 +307,16 @@ var CSS4 = `
 @media (prefers-reduced-motion: reduce) { .yzm-orbit, .yzm-core { animation: none; } }
 `;
 function YazakiaLogo({ size = 32, animated = true, title, className }) {
-  const id = useIds("yzm", ["gradient", "glow"]);
+  const id = useIds("yzm", ["gradient", "light", "glow"]);
   const fill = `url(#${id.gradient})`;
   return /* @__PURE__ */ jsxs4("svg", { width: size, height: size, viewBox: size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
     /* @__PURE__ */ jsx4("style", { children: CSS4 }),
     /* @__PURE__ */ jsxs4("defs", { children: [
       /* @__PURE__ */ jsx4("linearGradient", { id: id.gradient, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx4("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs4("linearGradient", { id: id.light, gradientUnits: "userSpaceOnUse", x1: "0", y1: YAZAKIA.lens.y1, x2: "0", y2: YAZAKIA.lens.y2, children: [
+        /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
+        /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
+      ] }),
       /* @__PURE__ */ jsxs4("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
         /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
         /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: "0" })
@@ -317,23 +328,102 @@ function YazakiaLogo({ size = 32, animated = true, title, className }) {
       /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: ".6" }),
       YAZAKIA.pair.at.map(([cx2, cy]) => /* @__PURE__ */ jsx4("circle", { cx: cx2, cy, r: YAZAKIA.pair.r, fill }, cx2))
     ] }),
-    YAZAKIA.arms.map((d) => /* @__PURE__ */ jsx4("path", { d, stroke: fill, strokeWidth: YAZAKIA.stroke, strokeLinecap: "round" }, d)),
-    /* @__PURE__ */ jsx4("path", { d: YAZAKIA.stem, stroke: fill, strokeWidth: YAZAKIA.stroke, strokeLinecap: "round" }),
-    YAZAKIA.heads.map((h) => /* @__PURE__ */ jsx4("circle", { cx: h.cx, cy: h.cy, r: h.r, fill }, h.cx)),
+    YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs4("g", { children: [
+      /* @__PURE__ */ jsx4("path", { d: v.body, fill }),
+      /* @__PURE__ */ jsx4("path", { d: v.tail, fill }),
+      i === 0 ? /* @__PURE__ */ jsx4("path", { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
+    ] }, v.body)),
     /* @__PURE__ */ jsxs4("g", { className: animated ? "yzm-core" : void 0, children: [
-      /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.core.cx, cy: YAZAKIA.core.cy, r: YAZAKIA.core.r, fill }),
-      /* @__PURE__ */ jsx4("circle", { cx: YAZAKIA.core.cx, cy: YAZAKIA.core.cy, r: YAZAKIA.core.inner, fill: YAZAKIA.highlight })
+      /* @__PURE__ */ jsx4("path", { d: YAZAKIA.lens.d, fill }),
+      /* @__PURE__ */ jsx4("path", { d: YAZAKIA.lens.d, fill: `url(#${id.light})` })
+    ] })
+  ] });
+}
+
+// src/marks/yororis-geometry.ts
+var sand = marks.yororis[0][1];
+var sage = marks.yororis[marks.yororis.length - 1][1];
+var YORORIS = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "80 80 240 240",
+  center: 200,
+  /** The two leaves — open hands, mirrored around x = 200 — filled, rising from the stem. */
+  leaves: [
+    "M200 262 C142 256 104 206 110 122 C138 130 154 152 160 180 C168 218 182 238 204 246 Z",
+    "M200 262 C258 256 296 206 290 122 C262 130 246 152 240 180 C232 218 218 238 196 246 Z"
+  ],
+  /** A vein of light along each leaf (dashed, it drifts slowly when animated). */
+  veins: "M122 142 C128 196 156 232 192 248 M278 142 C272 196 244 232 208 248",
+  vein: { color: "#fbf6ea", opacity: 0.45, width: 3, dash: "2 14" },
+  /** The stem, from the junction down. */
+  stem: "M200 244 L200 312",
+  stroke: 30,
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yororis },
+  /** The core's warm light: from the mark's sand (below) to a light sand (above). */
+  coreGradient: { stops: [["0%", sand], ["100%", "#e6c993"]] },
+  /** The core, held in the hollow of the leaves (not on the junction): the one who is listened to. It breathes. */
+  core: { cx: 200, cy: 184, r: 32, inner: 11 },
+  highlight: "#fbf6ea",
+  /** The moment: one node on the orbit, that turns with it. */
+  moment: { r: 9, at: [200, 40] },
+  glow: { color: sage, opacity: 0.18 },
+  /** The core's breathing shadow (web), in the core's warm sand. */
+  pulse: { color: sand, low: 0.3, high: 0.6 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/marks/YororisLogo.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var CSS5 = `
+.yrm-orbit { transform-origin: 200px 200px; animation: yrm-orbit 36s linear infinite; }
+.yrm-vein { animation: yrm-vein 4.8s linear infinite; }
+.yrm-core { transform-box: fill-box; transform-origin: center; animation: yrm-core 4.2s ease-in-out infinite; }
+@keyframes yrm-orbit { to { transform: rotate(360deg); } }
+@keyframes yrm-vein { to { stroke-dashoffset: 64; } }
+@keyframes yrm-core {
+  0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(YORORIS.pulse.color, YORORIS.pulse.low)}); opacity: .9; }
+  50% { filter: drop-shadow(0 0 16px ${withAlpha(YORORIS.pulse.color, YORORIS.pulse.high)}); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) { .yrm-orbit, .yrm-vein, .yrm-core { animation: none; } }
+`;
+function YororisLogo({ size = 32, animated = true, title, className }) {
+  const id = useIds("yrm", ["gradient", "core", "glow"]);
+  const fill = `url(#${id.gradient})`;
+  return /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+    /* @__PURE__ */ jsx5("style", { children: CSS5 }),
+    /* @__PURE__ */ jsxs5("defs", { children: [
+      /* @__PURE__ */ jsx5("linearGradient", { id: id.gradient, gradientUnits: "userSpaceOnUse", x1: YORORIS.gradient.x1, y1: YORORIS.gradient.y1, x2: YORORIS.gradient.x2, y2: YORORIS.gradient.y2, children: YORORIS.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsx5("linearGradient", { id: id.core, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx5("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs5("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx5("stop", { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
+        /* @__PURE__ */ jsx5("stop", { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: "0" })
+      ] })
+    ] }),
+    size >= 48 ? /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: "190", fill: `url(#${id.glow})` }) : null,
+    /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: YORORIS.ring.width, opacity: ".35" }),
+    /* @__PURE__ */ jsxs5("g", { className: animated ? "yrm-orbit" : void 0, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: ".6" }),
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
+    ] }),
+    /* @__PURE__ */ jsx5("path", { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round" }),
+    YORORIS.leaves.map((d) => /* @__PURE__ */ jsx5("path", { d, fill }, d)),
+    /* @__PURE__ */ jsx5("path", { className: animated ? "yrm-vein" : void 0, d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash }),
+    /* @__PURE__ */ jsxs5("g", { className: animated ? "yrm-core" : void 0, children: [
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id.core})` }),
+      /* @__PURE__ */ jsx5("circle", { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
     ] })
   ] });
 }
 
 // src/marks/ProductLogo.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function ProductLogo({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx5(KrizakaLogo, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx5(OrazakaLogo, { ...props });
-  if (id === "yazakia") return /* @__PURE__ */ jsx5(YazakiaLogo, { ...props });
-  return /* @__PURE__ */ jsx5(OrochiaLogo, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx6(KrizakaLogo, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx6(OrazakaLogo, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx6(YazakiaLogo, { ...props });
+  if (id === "yororis") return /* @__PURE__ */ jsx6(YororisLogo, { ...props });
+  return /* @__PURE__ */ jsx6(OrochiaLogo, { ...props });
 }
 export {
   KrizakaLogo,
@@ -343,6 +433,7 @@ export {
   ProductLogo,
   RotatingWord,
   YazakiaLogo,
+  YororisLogo,
   cx
 };
 //# sourceMappingURL=index.js.map