@krizaka/ui 3.49.0 → 3.50.0

package/dist/motion.d.ts

@@ -6,13 +6,19 @@ import { ReactNode } from 'react';
 declare const PAGE_TRANSITION_CLASS = "kz-page";
 interface PageTransitionProps {
     children: ReactNode;
+    /**
+     * The page's identity — the router's pathname. Given, only a change of page animates (the old page exits, the new one
+     * enters); an update on the same page (a dialog opened through the address, a filter, a search parameter) does not
+     * cross-fade the whole page. Without it, every transition under the boundary animates (the former behaviour).
+     */
+    routeKey?: string;
 }
 /**
  * Wrap the page content (the root layout's `children`) once: a navigation then cross-fades and rises over the
  * `--kz-motion-*` tokens, through the platform's View Transitions. Where the runtime has no `ViewTransition` it renders
  * its children untouched; under `prefers-reduced-motion` motion.css makes the change instant. The DOM always updates.
  */
-declare function PageTransition({ children }: PageTransitionProps): React.JSX.Element;
+declare function PageTransition({ children, routeKey }: PageTransitionProps): React.JSX.Element;
 
 /**
  * Page transitions on the platform: `document.startViewTransition` with a cross-fade fallback and an instant change

package/dist/motion.js

@@ -14,9 +14,10 @@ function runtimeViewTransition() {
   return RUNTIME_KEYS.map((key) => runtime[key]).find(Boolean);
 }
 var ViewTransition = runtimeViewTransition();
-function PageTransition({ children }) {
+function PageTransition({ children, routeKey }) {
   if (!ViewTransition) return /* @__PURE__ */ jsx(Fragment, { children });
-  return /* @__PURE__ */ jsx(ViewTransition, { default: PAGE_TRANSITION_CLASS, children });
+  if (routeKey === void 0) return /* @__PURE__ */ jsx(ViewTransition, { default: PAGE_TRANSITION_CLASS, children });
+  return /* @__PURE__ */ jsx(ViewTransition, { default: "none", enter: PAGE_TRANSITION_CLASS, exit: PAGE_TRANSITION_CLASS, children }, routeKey);
 }
 
 // src/motion/view-transition.ts

package/dist/motion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/motion/PageTransition.tsx","../src/motion/view-transition.ts"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport * as React from \"react\";\n\n/** The `view-transition-class` the page change carries (styled in motion.css, « PAGE TRANSITIONS »). */\nexport const PAGE_TRANSITION_CLASS = \"kz-page\";\n\ntype ViewTransitionComponent = ComponentType<{ children?: ReactNode; default?: string }>;\n\n/** Next.js ships React canary, where it is `ViewTransition`; earlier canaries called it `unstable_ViewTransition`. */\nconst RUNTIME_KEYS = [\"ViewTransition\", \"unstable_ViewTransition\"] as const;\n\n// Read through a variable key: a plain React build has neither export, and a static `React.ViewTransition` would make\n// the bundler warn about a missing export.\nfunction runtimeViewTransition(): ViewTransitionComponent | undefined {\n  const runtime = React as unknown as Record<string, ViewTransitionComponent | undefined>;\n  return RUNTIME_KEYS.map((key) => runtime[key]).find(Boolean);\n}\n\nconst ViewTransition = runtimeViewTransition();\n\nexport interface PageTransitionProps {\n  children: ReactNode;\n}\n\n/**\n * Wrap the page content (the root layout's `children`) once: a navigation then cross-fades and rises over the\n * `--kz-motion-*` tokens, through the platform's View Transitions. Where the runtime has no `ViewTransition` it renders\n * its children untouched; under `prefers-reduced-motion` motion.css makes the change instant. The DOM always updates.\n */\nexport function PageTransition({ children }: PageTransitionProps) {\n  if (!ViewTransition) return <>{children}</>;\n  return <ViewTransition default={PAGE_TRANSITION_CLASS}>{children}</ViewTransition>;\n}\n","/**\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":";;;;;;;AACA,YAAY,WAAW;AA6BO;AA1BvB,IAAM,wBAAwB;AAKrC,IAAM,eAAe,CAAC,kBAAkB,yBAAyB;AAIjE,SAAS,wBAA6D;AACpE,QAAM,UAAU;AAChB,SAAO,aAAa,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC,EAAE,KAAK,OAAO;AAC7D;AAEA,IAAM,iBAAiB,sBAAsB;AAWtC,SAAS,eAAe,EAAE,SAAS,GAAwB;AAChE,MAAI,CAAC,eAAgB,QAAO,gCAAG,UAAS;AACxC,SAAO,oBAAC,kBAAe,SAAS,uBAAwB,UAAS;AACnE;;;ACHA,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":[]}
+{"version":3,"sources":["../src/motion/PageTransition.tsx","../src/motion/view-transition.ts"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport * as React from \"react\";\n\n/** The `view-transition-class` the page change carries (styled in motion.css, « PAGE TRANSITIONS »). */\nexport const PAGE_TRANSITION_CLASS = \"kz-page\";\n\ntype ViewTransitionComponent = ComponentType<{ children?: ReactNode; default?: string; enter?: string; exit?: string }>;\n\n/** Next.js ships React canary, where it is `ViewTransition`; earlier canaries called it `unstable_ViewTransition`. */\nconst RUNTIME_KEYS = [\"ViewTransition\", \"unstable_ViewTransition\"] as const;\n\n// Read through a variable key: a plain React build has neither export, and a static `React.ViewTransition` would make\n// the bundler warn about a missing export.\nfunction runtimeViewTransition(): ViewTransitionComponent | undefined {\n  const runtime = React as unknown as Record<string, ViewTransitionComponent | undefined>;\n  return RUNTIME_KEYS.map((key) => runtime[key]).find(Boolean);\n}\n\nconst ViewTransition = runtimeViewTransition();\n\nexport interface PageTransitionProps {\n  children: ReactNode;\n  /**\n   * The page's identity — the router's pathname. Given, only a change of page animates (the old page exits, the new one\n   * enters); an update on the same page (a dialog opened through the address, a filter, a search parameter) does not\n   * cross-fade the whole page. Without it, every transition under the boundary animates (the former behaviour).\n   */\n  routeKey?: string;\n}\n\n/**\n * Wrap the page content (the root layout's `children`) once: a navigation then cross-fades and rises over the\n * `--kz-motion-*` tokens, through the platform's View Transitions. Where the runtime has no `ViewTransition` it renders\n * its children untouched; under `prefers-reduced-motion` motion.css makes the change instant. The DOM always updates.\n */\nexport function PageTransition({ children, routeKey }: PageTransitionProps) {\n  if (!ViewTransition) return <>{children}</>;\n  if (routeKey === undefined) return <ViewTransition default={PAGE_TRANSITION_CLASS}>{children}</ViewTransition>;\n  // A new key is a new boundary: React runs `exit` on the old one and `enter` on the new; updates inside run `default`.\n  return (\n    <ViewTransition key={routeKey} default=\"none\" enter={PAGE_TRANSITION_CLASS} exit={PAGE_TRANSITION_CLASS}>\n      {children}\n    </ViewTransition>\n  );\n}\n","/**\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":";;;;;;;AACA,YAAY,WAAW;AAmCO;AAhCvB,IAAM,wBAAwB;AAKrC,IAAM,eAAe,CAAC,kBAAkB,yBAAyB;AAIjE,SAAS,wBAA6D;AACpE,QAAM,UAAU;AAChB,SAAO,aAAa,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC,EAAE,KAAK,OAAO;AAC7D;AAEA,IAAM,iBAAiB,sBAAsB;AAiBtC,SAAS,eAAe,EAAE,UAAU,SAAS,GAAwB;AAC1E,MAAI,CAAC,eAAgB,QAAO,gCAAG,UAAS;AACxC,MAAI,aAAa,OAAW,QAAO,oBAAC,kBAAe,SAAS,uBAAwB,UAAS;AAE7F,SACE,oBAAC,kBAA8B,SAAQ,QAAO,OAAO,uBAAuB,MAAM,uBAC/E,YADkB,QAErB;AAEJ;;;ACfA,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":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -769,7 +769,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.49.0",
+    "@krizaka/tailwind": ">=3.50.0",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -2599,9 +2599,9 @@
     "radix-ui": "^1.7.0",
     "sonner": "^2.0.8",
     "tailwind-variants": "^3.3.1",
-    "@krizaka/tokens": "^3.49.0",
+    "@krizaka/intl": "^0.2.1",
     "@krizaka/pacer": "^0.1.0",
-    "@krizaka/intl": "^0.2.1"
+    "@krizaka/tokens": "^3.50.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",

package/registry/elephant.json

@@ -141,7 +141,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.49.0"
+    "@krizaka/tokens@^3.50.0"
   ],
   "registryDependencies": [],
   "demo": {

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.49.0",
+  "version": "3.50.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -2264,7 +2264,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.49.0"
+        "@krizaka/tokens@^3.50.0"
       ],
       "registryDependencies": []
     },
@@ -3291,7 +3291,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.49.0",
+        "@krizaka/tokens@^3.50.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -3730,7 +3730,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.49.0",
+        "@krizaka/tokens@^3.50.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4395,7 +4395,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.49.0",
+        "@krizaka/tokens@^3.50.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4768,7 +4768,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.49.0",
+        "@krizaka/tokens@^3.50.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/map.json

@@ -1074,7 +1074,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.49.0",
+    "@krizaka/tokens@^3.50.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/nav-bar.json

@@ -664,7 +664,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.49.0",
+    "@krizaka/tokens@^3.50.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/rail-nav.json

@@ -342,7 +342,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.49.0",
+    "@krizaka/tokens@^3.50.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/site-footer.json

@@ -343,7 +343,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.49.0",
+    "@krizaka/tokens@^3.50.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],