@krizaka/ui 3.41.1 → 3.43.0

package/dist/mascot-quote.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Mascot
-} from "./chunk-M4DBVG43.js";
+} from "./chunk-MHUUNC5W.js";
 import {
   cn
 } from "./chunk-WU4VLSEA.js";

package/dist/mascot-state.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Mascot
-} from "./chunk-EZC54B5C.js";
+} from "./chunk-MIMOTE4W.js";
 
 // src/mascot-state/mascot-state.tsx
 import { tv } from "tailwind-variants";

package/dist/mascots.d.ts

@@ -43,6 +43,8 @@ type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
     flying?: boolean;
     /** Which way it leans in flight, -1 (left) to 1 (right). */
     bank?: number;
+    /** Whether the pigeon holds its parcel (default `true`): a flock hands it over and the bird flies back light. */
+    carrying?: boolean;
     /** A tap or a poke just happened (`life`): a small jump. Set it for a moment, then unset. */
     poked?: boolean;
 };
@@ -50,7 +52,7 @@ type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
  * One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,
  * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone="own"` for the story's).
  */
-declare function Mascot({ bird, mood, tone, size, animated, title, life, phase, look, flying, bank, poked, className, style, ...props }: MascotProps): React.JSX.Element;
+declare function Mascot({ bird, mood, tone, size, animated, title, life, phase, look, flying, bank, poked, carrying, className, style, ...props }: MascotProps): React.JSX.Element;
 
 type PhoenixProps = Omit<React.ComponentProps<"svg">, "children"> & {
     /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */

package/dist/mascots.js

@@ -4,7 +4,7 @@ import {
   MASCOT_LOOKS,
   MASCOT_MOODS,
   Mascot
-} from "./chunk-EZC54B5C.js";
+} from "./chunk-MIMOTE4W.js";
 
 // src/mascots/phoenix.tsx
 import { useId } from "react";

package/dist/motion.css

@@ -711,3 +711,47 @@ svg[data-kz-icon="ExternalIcon"] {
   .kz-iso-item > .kz-iso-lift, .kz-iso-tip { transition: none; }
   [data-kz-arrive], tr:has([data-kz-arrive]), li:has(> [data-kz-arrive]), .kz-grow svg { animation: none !important; }
 }
+
+/* ── COMPONENT TRANSITIONS (docs/direction-2027.md, step b) ─────────────────────────────────────────────────────────
+   Overlays, panels and tabs enter and leave with the platform: @starting-style + allow-discrete for the enter, a
+   keyframe animation for the exit (Radix Presence keeps an element mounted only while it runs an animation). The
+   durations and easings are the --kz-motion-* tokens (defined in @krizaka/tokens; the fallbacks below stand until then).
+   Reduced motion: no animation, no transition — the change is instant. */
+:root {
+  --kz-motion-duration-fast: 150ms;
+  --kz-motion-duration-base: 220ms;
+  --kz-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --kz-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.kz-overlay {
+  transition: opacity var(--kz-motion-duration-base) var(--kz-motion-ease-out), display var(--kz-motion-duration-base), overlay var(--kz-motion-duration-base);
+  transition-behavior: allow-discrete;
+}
+.kz-overlay[data-state="open"] { opacity: 1; }
+@starting-style { .kz-overlay[data-state="open"] { opacity: 0; } }
+.kz-overlay[data-state="closed"] { animation: kz-overlay-out var(--kz-motion-duration-fast) var(--kz-motion-ease-in) both; }
+@keyframes kz-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+
+.kz-dialog,
+.kz-popover {
+  transition: opacity var(--kz-motion-duration-base) var(--kz-motion-ease-out), transform var(--kz-motion-duration-base) var(--kz-motion-ease-out), display var(--kz-motion-duration-base), overlay var(--kz-motion-duration-base);
+  transition-behavior: allow-discrete;
+}
+.kz-dialog[data-state="open"],
+.kz-popover[data-state="open"] { opacity: 1; transform: none; }
+@starting-style {
+  .kz-dialog[data-state="open"],
+  .kz-popover[data-state="open"] { opacity: 0; transform: scale(0.98); }
+}
+.kz-dialog[data-state="closed"] { animation: kz-dialog-out var(--kz-motion-duration-fast) var(--kz-motion-ease-in) both; }
+.kz-popover[data-state="closed"] { animation: kz-popover-out var(--kz-motion-duration-fast) var(--kz-motion-ease-in) both; }
+@keyframes kz-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.98); } }
+@keyframes kz-popover-out { from { opacity: 1; } to { opacity: 0; } }
+
+.kz-tabs-panel { animation: kz-tabs-in var(--kz-motion-duration-base) var(--kz-motion-ease-out) both; }
+@keyframes kz-tabs-in { from { opacity: 0; } to { opacity: 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .kz-overlay, .kz-dialog, .kz-popover, .kz-tabs-panel { animation: none; transition: none; }
+}

package/dist/motion.d.ts

@@ -1,46 +1,53 @@
-import * as React from 'react';
+export { M as MotionObserver, a as MotionObserverProps, R as RotatingWord, b as RotatingWordProps } from './RotatingWord-D9s7FXFD.js';
+import 'react';
 
-interface MotionObserverProps {
-    /**
-     * Hold the loops of the page (`.kz-loop`, the backdrop's drift) still until the page has loaded and settled
-     * (`html[data-motion="settling"]` → `"ready"`, about 1.2 s after `load`): nothing repaints the first screen while it
-     * paints.
-     * @default true
-     */
-    settle?: boolean;
-    /**
-     * Pause every animation of a scope while it is off screen (`data-offscreen` on `.kz-backdrop`, `.kz-iso`,
-     * `[data-motion-scope]` and the page's sections).
-     * @default true
-     */
-    pauseOffscreen?: boolean;
-}
 /**
- * The Krizaka motion conductor. Mount it once at the root of the app; it renders nothing and keeps no animation frame
- * running. It reveals every `[data-reveal]` element once as it enters the viewport (including elements added later:
- * client navigation needs nothing more), pauses what is off screen, lets the first screen settle before its loops
- * start. Nothing follows the pointer (krizaka-ui#393: the spotlight and the magnetic buttons are retired). Under
- * prefers-reduced-motion everything is revealed at once.
+ * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change
+ * under reduced motion. Pure functions over an injected document, so they are testable without a browser.
+ *
+ * The contract (docs/direction-2027.md): the DOM always updates; motion is only the way it gets there.
  */
-declare function MotionObserver({ settle, pauseOffscreen }?: MotionObserverProps): null;
-
-interface RotatingWordProps {
-    /** The alternatives, passed translated; the first one is what the server renders. */
-    words: readonly string[];
-    /**
-     * Milliseconds each word stays.
-     * @default 2600
-     */
-    interval?: number;
-    /** Classes for every word (a colour, gradient text). */
-    className?: string;
+interface ViewTransitionLike {
+    readonly finished: Promise<void>;
+}
+type StartViewTransition = (update: () => void) => ViewTransitionLike;
+interface ViewTransitionEnv {
+    /** The document whose transition runs. Defaults to the global one when the call happens in a browser. */
+    readonly doc?: {
+        startViewTransition?: StartViewTransition;
+        documentElement?: {
+            animate?: (frames: Keyframe[], options: KeyframeAnimationOptions) => unknown;
+        };
+    };
+    /** `prefers-reduced-motion: reduce`. */
+    readonly reduced?: boolean;
+}
+interface CrossFadeOptions {
+    /** Milliseconds of the fallback cross-fade. */
+    readonly duration?: number;
+    readonly easing?: string;
 }
+/** True when the browser can run a native view transition. */
+declare function canViewTransition(doc: ViewTransitionEnv["doc"]): boolean;
+/**
+ * Runs `update` inside a view transition when the platform has one and motion is allowed; otherwise it runs `update`
+ * at once. Resolves when the transition has finished (or straight away when there is none). It never rejects: a
+ * skipped or aborted transition still leaves the DOM in its new state.
+ */
+declare function runViewTransition(update: () => void, env?: ViewTransitionEnv): Promise<void>;
+/**
+ * The fallback for a browser without view transitions: the change is applied, then the root cross-fades from
+ * transparent. Reduced motion means no fade at all. Returns the animation when one was started, otherwise `null`.
+ */
+declare function crossFallback(update: () => void, env?: ViewTransitionEnv, options?: CrossFadeOptions): unknown;
+/** One call for a change of page or step: a view transition where it exists, a cross-fade otherwise, instant under reduced motion. */
+declare function transitionPage(update: () => void, env?: ViewTransitionEnv, options?: CrossFadeOptions): Promise<void>;
 /**
- * A word that rolls through alternatives — the Krizaka headline signature. Every word shares one grid cell from the
- * first paint, so the line keeps the width of the longest one (no layout shift); the current one rolls in. The server
- * render shows the first word; it stays put under prefers-reduced-motion and while the tab is hidden. Decorative
- * (`aria-hidden`): give the heading a stable accessible label.
+ * The `view-transition-name` for a shared element: the element morphs between the two states wherever it lands. The
+ * name must be one CSS identifier and unique on the page while the transition runs.
  */
-declare function RotatingWord({ words, interval, className }: RotatingWordProps): React.JSX.Element;
+declare function sharedElementStyle(name: string): {
+    viewTransitionName: string;
+};
 
-export { MotionObserver, type MotionObserverProps, RotatingWord, type RotatingWordProps };
+export { type CrossFadeOptions, type ViewTransitionEnv, type ViewTransitionLike, canViewTransition, crossFallback, runViewTransition, sharedElementStyle, transitionPage };

package/dist/motion.js

@@ -3,8 +3,49 @@ import {
   MotionObserver,
   RotatingWord
 } from "./chunk-4JO5GSSD.js";
+
+// src/motion/view-transition.ts
+var IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+function canViewTransition(doc) {
+  return typeof doc?.startViewTransition === "function";
+}
+function runViewTransition(update, env = {}) {
+  if (env.reduced || !canViewTransition(env.doc)) {
+    update();
+    return Promise.resolve();
+  }
+  const transition = env.doc.startViewTransition(update);
+  return transition.finished.then(
+    () => void 0,
+    () => void 0
+  );
+}
+function crossFallback(update, env = {}, options = {}) {
+  update();
+  if (env.reduced || canViewTransition(env.doc)) return null;
+  const root = env.doc?.documentElement;
+  if (typeof root?.animate !== "function") return null;
+  return root.animate([{ opacity: 0 }, { opacity: 1 }], {
+    duration: options.duration ?? 200,
+    easing: options.easing ?? "ease-out"
+  });
+}
+function transitionPage(update, env = {}, options = {}) {
+  if (canViewTransition(env.doc) && !env.reduced) return runViewTransition(update, env);
+  crossFallback(update, env, options);
+  return Promise.resolve();
+}
+function sharedElementStyle(name) {
+  if (!IDENT.test(name)) throw new RangeError(`view-transition-name must be one identifier, got "${name}"`);
+  return { viewTransitionName: name };
+}
 export {
   MotionObserver,
-  RotatingWord
+  RotatingWord,
+  canViewTransition,
+  crossFallback,
+  runViewTransition,
+  sharedElementStyle,
+  transitionPage
 };
 //# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/motion/view-transition.ts"],"sourcesContent":["/**\n * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change\n * under reduced motion. Pure functions over an injected document, so they are testable without a browser.\n *\n * The contract (docs/direction-2027.md): the DOM always updates; motion is only the way it gets there.\n */\n\nexport interface ViewTransitionLike {\n  readonly finished: Promise<void>;\n}\n\nexport type StartViewTransition = (update: () => void) => ViewTransitionLike;\n\nexport interface ViewTransitionEnv {\n  /** The document whose transition runs. Defaults to the global one when the call happens in a browser. */\n  readonly doc?: {\n    startViewTransition?: StartViewTransition;\n    documentElement?: { animate?: (frames: Keyframe[], options: KeyframeAnimationOptions) => unknown };\n  };\n  /** `prefers-reduced-motion: reduce`. */\n  readonly reduced?: boolean;\n}\n\nexport interface CrossFadeOptions {\n  /** Milliseconds of the fallback cross-fade. */\n  readonly duration?: number;\n  readonly easing?: string;\n}\n\nconst IDENT = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\n/** True when the browser can run a native view transition. */\nexport function canViewTransition(doc: ViewTransitionEnv[\"doc\"]): boolean {\n  return typeof doc?.startViewTransition === \"function\";\n}\n\n/**\n * Runs `update` inside a view transition when the platform has one and motion is allowed; otherwise it runs `update`\n * at once. Resolves when the transition has finished (or straight away when there is none). It never rejects: a\n * skipped or aborted transition still leaves the DOM in its new state.\n */\nexport function runViewTransition(update: () => void, env: ViewTransitionEnv = {}): Promise<void> {\n  if (env.reduced || !canViewTransition(env.doc)) {\n    update();\n    return Promise.resolve();\n  }\n  const transition = env.doc!.startViewTransition!(update);\n  return transition.finished.then(\n    () => undefined,\n    () => undefined,\n  );\n}\n\n/**\n * The fallback for a browser without view transitions: the change is applied, then the root cross-fades from\n * transparent. Reduced motion means no fade at all. Returns the animation when one was started, otherwise `null`.\n */\nexport function crossFallback(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): unknown {\n  update();\n  if (env.reduced || canViewTransition(env.doc)) return null;\n  const root = env.doc?.documentElement;\n  if (typeof root?.animate !== \"function\") return null;\n  return root.animate([{ opacity: 0 }, { opacity: 1 }], {\n    duration: options.duration ?? 200,\n    easing: options.easing ?? \"ease-out\",\n  });\n}\n\n/** One call for a change of page or step: a view transition where it exists, a cross-fade otherwise, instant under reduced motion. */\nexport function transitionPage(update: () => void, env: ViewTransitionEnv = {}, options: CrossFadeOptions = {}): Promise<void> {\n  if (canViewTransition(env.doc) && !env.reduced) return runViewTransition(update, env);\n  crossFallback(update, env, options);\n  return Promise.resolve();\n}\n\n/**\n * The `view-transition-name` for a shared element: the element morphs between the two states wherever it lands. The\n * name must be one CSS identifier and unique on the page while the transition runs.\n */\nexport function sharedElementStyle(name: string): { viewTransitionName: string } {\n  if (!IDENT.test(name)) throw new RangeError(`view-transition-name must be one identifier, got \"${name}\"`);\n  return { viewTransitionName: name };\n}\n"],"mappings":";;;;;;;AA6BA,IAAM,QAAQ;AAGP,SAAS,kBAAkB,KAAwC;AACxE,SAAO,OAAO,KAAK,wBAAwB;AAC7C;AAOO,SAAS,kBAAkB,QAAoB,MAAyB,CAAC,GAAkB;AAChG,MAAI,IAAI,WAAW,CAAC,kBAAkB,IAAI,GAAG,GAAG;AAC9C,WAAO;AACP,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,QAAM,aAAa,IAAI,IAAK,oBAAqB,MAAM;AACvD,SAAO,WAAW,SAAS;AAAA,IACzB,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAMO,SAAS,cAAc,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAY;AACtH,SAAO;AACP,MAAI,IAAI,WAAW,kBAAkB,IAAI,GAAG,EAAG,QAAO;AACtD,QAAM,OAAO,IAAI,KAAK;AACtB,MAAI,OAAO,MAAM,YAAY,WAAY,QAAO;AAChD,SAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,GAAG;AAAA,IACpD,UAAU,QAAQ,YAAY;AAAA,IAC9B,QAAQ,QAAQ,UAAU;AAAA,EAC5B,CAAC;AACH;AAGO,SAAS,eAAe,QAAoB,MAAyB,CAAC,GAAG,UAA4B,CAAC,GAAkB;AAC7H,MAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,IAAI,QAAS,QAAO,kBAAkB,QAAQ,GAAG;AACpF,gBAAc,QAAQ,KAAK,OAAO;AAClC,SAAO,QAAQ,QAAQ;AACzB;AAMO,SAAS,mBAAmB,MAA8C;AAC/E,MAAI,CAAC,MAAM,KAAK,IAAI,EAAG,OAAM,IAAI,WAAW,qDAAqD,IAAI,GAAG;AACxG,SAAO,EAAE,oBAAoB,KAAK;AACpC;","names":[]}