@krizaka/ui 3.29.0 → 3.31.0

package/dist/media-gallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/media-gallery/media-gallery.tsx"],"sourcesContent":["// Client (the reader's motion preference). A shop's photos and loops in tiles: the first is the featured one, loops play\n// muted while their tile is on screen (a still under reduced motion), a caption rides the foot of a tile.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const mediaGallery = tv({\n  slots: {\n    root: \"m-0 grid list-none grid-cols-2 gap-2 p-0 sm:gap-3 md:grid-cols-4\",\n    tile:\n      \"group relative isolate m-0 aspect-[3/4] overflow-hidden rounded-xl border border-border-default bg-media data-[shape=wide]:aspect-[4/3] \" +\n      // The featured tile takes two columns; from md up it has no ratio of its own and stretches to the height of the row its neighbours set.\n      \"data-[featured]:col-span-2 data-[featured]:aspect-[4/3] md:data-[featured]:aspect-auto\",\n    media: \"absolute inset-0 h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    caption: \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-scrim-strong to-transparent p-3 pt-8 text-xs font-semibold text-fg-on-media\",\n  },\n});\nconst s = mediaGallery();\n\nexport type GalleryMedia = {\n  /** A stable id. */\n  id: string;\n  /** The still: a photo, or the poster of a loop. */\n  src: string;\n  /** What it shows, in words. */\n  alt: string;\n  /** A muted loop: WebM first, MP4 for Safari. */\n  video?: { webm?: string; mp4?: string };\n  /** One line over the foot of the tile. */\n  caption?: string;\n  /** `wide` for a landscape source (4:3 tile); the default tile is a 3:4 portrait. */\n  shape?: \"portrait\" | \"wide\";\n};\n\nexport type MediaGalleryProps = Omit<React.ComponentProps<\"ul\">, \"children\"> & {\n  /** The photos and loops, the featured one first. */\n  items: readonly GalleryMedia[];\n  /** The gallery's accessible name, passed translated. */\n  label: string;\n};\n\nfunction Tile({ item, featured }: { item: GalleryMedia; featured: boolean }) {\n  const ref = React.useRef<HTMLLIElement>(null);\n  const [play, setPlay] = React.useState(false);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!item.video || !node || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const io = new IntersectionObserver(([entry]) => setPlay(Boolean(entry?.isIntersecting)), { rootMargin: \"120px\" });\n    io.observe(node);\n    return () => io.disconnect();\n  }, [item.video]);\n  return (\n    <li ref={ref} className={s.tile()} data-featured={featured ? \"\" : undefined} data-shape={item.shape ?? \"portrait\"}>\n      <figure className=\"m-0 h-full w-full\">\n        <img src={item.src} alt={item.alt} loading=\"lazy\" decoding=\"async\" className={s.media()} />\n        {play && item.video && (\n          <video className={s.media()} poster={item.src} autoPlay muted loop playsInline preload=\"none\" aria-hidden tabIndex={-1}>\n            {item.video.webm && <source src={item.video.webm} type=\"video/webm\" />}\n            {item.video.mp4 && <source src={item.video.mp4} type=\"video/mp4\" />}\n          </video>\n        )}\n        {item.caption && <figcaption className={s.caption()}>{item.caption}</figcaption>}\n      </figure>\n    </li>\n  );\n}\n\n/** Photos and loops in tiles, the first featured; loops play while seen. */\nexport function MediaGallery({ items, label, className, ...props }: MediaGalleryProps) {\n  return (\n    <ul aria-label={label} className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <Tile key={item.id} item={item} featured={i === 0 && items.length > 2} />\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,SAAS,UAAU;AAkDX,cAEE,YAFF;AAhDD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AAwBvB,SAAS,KAAK,EAAE,MAAM,SAAS,GAA8C;AAC3E,QAAM,MAAY,aAAsB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,KAAK;AAC5C,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAK,SAAS,CAAC,QAAQ,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAC3F,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM,QAAQ,QAAQ,OAAO,cAAc,CAAC,GAAG,EAAE,YAAY,QAAQ,CAAC;AACjH,OAAG,QAAQ,IAAI;AACf,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,KAAK,CAAC;AACf,SACE,oBAAC,QAAG,KAAU,WAAW,EAAE,KAAK,GAAG,iBAAe,WAAW,KAAK,QAAW,cAAY,KAAK,SAAS,YACrG,+BAAC,YAAO,WAAU,qBAChB;AAAA,wBAAC,SAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,SAAQ,QAAO,UAAS,SAAQ,WAAW,EAAE,MAAM,GAAG;AAAA,IACxF,QAAQ,KAAK,SACZ,qBAAC,WAAM,WAAW,EAAE,MAAM,GAAG,QAAQ,KAAK,KAAK,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,SAAQ,QAAO,eAAW,MAAC,UAAU,IACjH;AAAA,WAAK,MAAM,QAAQ,oBAAC,YAAO,KAAK,KAAK,MAAM,MAAM,MAAK,cAAa;AAAA,MACnE,KAAK,MAAM,OAAO,oBAAC,YAAO,KAAK,KAAK,MAAM,KAAK,MAAK,aAAY;AAAA,OACnE;AAAA,IAED,KAAK,WAAW,oBAAC,gBAAW,WAAW,EAAE,QAAQ,GAAI,eAAK,SAAQ;AAAA,KACrE,GACF;AAEJ;AAGO,SAAS,aAAa,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAsB;AACrF,SACE,oBAAC,QAAG,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC1D,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QAAmB,MAAY,UAAU,MAAM,KAAK,MAAM,SAAS,KAAzD,KAAK,EAAuD,CACxE,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/media-gallery/media-gallery.tsx"],"sourcesContent":["// Client (the reader's motion preference). A shop's photos and loops in tiles: the first is the featured one, loops play\n// muted while their tile is on screen (a still under reduced motion), a caption rides the foot of a tile.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const mediaGallery = tv({\n  slots: {\n    root: \"m-0 grid list-none grid-cols-2 gap-2 p-0 sm:gap-3 md:grid-cols-4\",\n    tile:\n      \"group relative isolate m-0 aspect-[3/4] overflow-hidden rounded-xl border border-border-default bg-media data-[shape=wide]:aspect-[4/3] \" +\n      // The featured tile takes two columns; from md up it has no ratio of its own and stretches to the height of the row its neighbours set.\n      \"data-[featured]:col-span-2 data-[featured]:aspect-[4/3] md:data-[featured]:aspect-auto\",\n    media: \"absolute inset-0 h-full w-full object-cover\",\n    caption: \"pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-scrim-strong to-transparent p-3 pt-8 text-xs font-semibold text-fg-on-media\",\n  },\n});\nconst s = mediaGallery();\n\nexport type GalleryMedia = {\n  /** A stable id. */\n  id: string;\n  /** The still: a photo, or the poster of a loop. */\n  src: string;\n  /** What it shows, in words. */\n  alt: string;\n  /** A muted loop: WebM first, MP4 for Safari. */\n  video?: { webm?: string; mp4?: string };\n  /** One line over the foot of the tile. */\n  caption?: string;\n  /** `wide` for a landscape source (4:3 tile); the default tile is a 3:4 portrait. */\n  shape?: \"portrait\" | \"wide\";\n};\n\nexport type MediaGalleryProps = Omit<React.ComponentProps<\"ul\">, \"children\"> & {\n  /** The photos and loops, the featured one first. */\n  items: readonly GalleryMedia[];\n  /** The gallery's accessible name, passed translated. */\n  label: string;\n};\n\nfunction Tile({ item, featured }: { item: GalleryMedia; featured: boolean }) {\n  const ref = React.useRef<HTMLLIElement>(null);\n  const [play, setPlay] = React.useState(false);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!item.video || !node || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const io = new IntersectionObserver(([entry]) => setPlay(Boolean(entry?.isIntersecting)), { rootMargin: \"120px\" });\n    io.observe(node);\n    return () => io.disconnect();\n  }, [item.video]);\n  return (\n    <li ref={ref} className={s.tile()} data-featured={featured ? \"\" : undefined} data-shape={item.shape ?? \"portrait\"}>\n      <figure className=\"m-0 h-full w-full\">\n        <img src={item.src} alt={item.alt} loading=\"lazy\" decoding=\"async\" className={s.media()} />\n        {play && item.video && (\n          <video className={s.media()} poster={item.src} autoPlay muted loop playsInline preload=\"none\" aria-hidden tabIndex={-1}>\n            {item.video.webm && <source src={item.video.webm} type=\"video/webm\" />}\n            {item.video.mp4 && <source src={item.video.mp4} type=\"video/mp4\" />}\n          </video>\n        )}\n        {item.caption && <figcaption className={s.caption()}>{item.caption}</figcaption>}\n      </figure>\n    </li>\n  );\n}\n\n/** Photos and loops in tiles, the first featured; loops play while seen. */\nexport function MediaGallery({ items, label, className, ...props }: MediaGalleryProps) {\n  return (\n    <ul aria-label={label} className={s.root({ className })} {...props}>\n      {items.map((item, i) => (\n        <Tile key={item.id} item={item} featured={i === 0 && items.length > 2} />\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,SAAS,UAAU;AAkDX,cAEE,YAFF;AAhDD,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAGF,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AAwBvB,SAAS,KAAK,EAAE,MAAM,SAAS,GAA8C;AAC3E,QAAM,MAAY,aAAsB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAU,eAAS,KAAK;AAC5C,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAK,SAAS,CAAC,QAAQ,OAAO,WAAW,kCAAkC,EAAE,QAAS;AAC3F,UAAM,KAAK,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM,QAAQ,QAAQ,OAAO,cAAc,CAAC,GAAG,EAAE,YAAY,QAAQ,CAAC;AACjH,OAAG,QAAQ,IAAI;AACf,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,KAAK,CAAC;AACf,SACE,oBAAC,QAAG,KAAU,WAAW,EAAE,KAAK,GAAG,iBAAe,WAAW,KAAK,QAAW,cAAY,KAAK,SAAS,YACrG,+BAAC,YAAO,WAAU,qBAChB;AAAA,wBAAC,SAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,SAAQ,QAAO,UAAS,SAAQ,WAAW,EAAE,MAAM,GAAG;AAAA,IACxF,QAAQ,KAAK,SACZ,qBAAC,WAAM,WAAW,EAAE,MAAM,GAAG,QAAQ,KAAK,KAAK,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,SAAQ,QAAO,eAAW,MAAC,UAAU,IACjH;AAAA,WAAK,MAAM,QAAQ,oBAAC,YAAO,KAAK,KAAK,MAAM,MAAM,MAAK,cAAa;AAAA,MACnE,KAAK,MAAM,OAAO,oBAAC,YAAO,KAAK,KAAK,MAAM,KAAK,MAAK,aAAY;AAAA,OACnE;AAAA,IAED,KAAK,WAAW,oBAAC,gBAAW,WAAW,EAAE,QAAQ,GAAI,eAAK,SAAQ;AAAA,KACrE,GACF;AAEJ;AAGO,SAAS,aAAa,EAAE,OAAO,OAAO,WAAW,GAAG,MAAM,GAAsB;AACrF,SACE,oBAAC,QAAG,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC1D,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QAAmB,MAAY,UAAU,MAAM,KAAK,MAAM,SAAS,KAAzD,KAAK,EAAuD,CACxE,GACH;AAEJ;","names":[]}

package/dist/media-grid.js

@@ -6,12 +6,12 @@ import {
 import {
   Card,
   Skeleton
-} from "./chunk-MQPC3P4T.js";
+} from "./chunk-2DGLWTPS.js";
 import "./chunk-JXLDUDTD.js";
 import {
   Button,
   LoaderGlyph
-} from "./chunk-DZU6RMYD.js";
+} from "./chunk-3DHNN5V7.js";
 import "./chunk-D3T54RSL.js";
 import {
   cn

package/dist/motion.css

@@ -67,61 +67,8 @@
   transition-duration: 0.6s;
 }
 
-/* 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%), color-mix(in oklab, var(--kz-accent, #a855f7) 16%, transparent), 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 color-mix(in oklab, var(--kz-accent, #7c3aed) 45%, transparent);
-  }
-}
+/* Retired (krizaka-ui#393): the sheen across a button, the spotlight that followed the pointer and the lift of a card.
+   The classes stay harmless (`.kz-sheen`, `.kz-spotlight`, `.kz-lift` draw nothing) so an old page does not break. */
 
 /* Gradient text that slowly drifts. */
 .kz-gradient-text {
@@ -212,6 +159,17 @@
 .maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; }
 .kz-map-user { position: relative; width: 16px; height: 16px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow: 0 1px 4px var(--kz-scrim); }
 .kz-map-user::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--kz-accent); opacity: 0.35; animation: kz-map-pulse 2s var(--kz-ease) infinite; }
+/* A pin dropped onto its place (`Marker drop={delay}`): falls from above, settles with a small bounce; once. */
+[data-kz-marker] > [data-drop] { animation: kz-map-drop 620ms cubic-bezier(0.34, 1.4, 0.64, 1) backwards; animation-delay: var(--kz-map-drop-delay, 0ms); }
+@keyframes kz-map-drop { from { opacity: 0; translate: 0 -28px; scale: 0.7; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; } }
+/* A heat pulse (`Pulse`): two rings swell and fade, half a beat apart; still rings under reduced motion. */
+.kz-map-pulse { position: relative; width: var(--kz-map-pulse-size, 56px); height: var(--kz-map-pulse-size, 56px); pointer-events: none; }
+.kz-map-pulse::before, .kz-map-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid var(--kz-accent); background: color-mix(in oklab, var(--kz-accent) 22%, transparent); animation: kz-map-heat 2.6s var(--kz-ease) infinite; }
+.kz-map-pulse::after { animation-delay: -1.3s; }
+.kz-map-pulse[data-tone="soft"]::before, .kz-map-pulse[data-tone="soft"]::after { border-width: 1px; background: color-mix(in oklab, var(--kz-accent) 10%, transparent); }
+@keyframes kz-map-heat { from { transform: scale(0.15); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
+/* The courier of a `Route`: an accent dot with a ring, moved along the line by the component. */
+.kz-map-courier { width: 14px; height: 14px; border-radius: 9999px; background: var(--kz-accent); border: 3px solid var(--kz-surface-1); box-shadow: 0 0 0 4px color-mix(in oklab, var(--kz-accent) 30%, transparent), 0 2px 6px var(--kz-scrim); }
 @keyframes kz-map-pulse { from { transform: scale(1); opacity: 0.4; } to { transform: scale(3.2); opacity: 0; } }
 
 /* Section backdrop (SectionBackdrop): the brand's section gradient (--kz-brand-gradient-*), sections that glide from
@@ -230,8 +188,8 @@
 .kz-backdrop-drift {
   inset: -20%;
   background:
-    radial-gradient(38% 32% at 28% 30%, color-mix(in oklab, var(--kz-accent, #196df5) 14%, transparent), transparent 70%),
-    radial-gradient(34% 30% at 76% 22%, color-mix(in oklab, var(--kz-accent-2, #196df5) 10%, transparent), transparent 70%);
+    radial-gradient(38% 32% at 28% 30%, color-mix(in oklab, var(--kz-accent, #3e6f99) 14%, transparent), transparent 70%),
+    radial-gradient(34% 30% at 76% 22%, color-mix(in oklab, var(--kz-accent-2, #3e6f99) 10%, transparent), transparent 70%);
   animation: kz-backdrop-drift 40s ease-in-out infinite alternate;
 }
 @keyframes kz-backdrop-drift {
@@ -244,7 +202,7 @@
   aspect-ratio: 2 / 1;
   transform: translateX(-50%);
   border-radius: 50%;
-  background: radial-gradient(closest-side, color-mix(in oklab, var(--kz-accent, #196df5) 24%, transparent), transparent);
+  background: radial-gradient(closest-side, color-mix(in oklab, var(--kz-accent, #3e6f99) 24%, transparent), transparent);
   filter: blur(28px);
 }
 .kz-backdrop-grid {
@@ -285,8 +243,7 @@ svg[data-kz-icon] [data-node] {
   transition: transform 320ms var(--kz-ease), filter 320ms var(--kz-ease);
 }
 :is(a, button, [data-kz-lights]):is(:hover, :focus-visible) svg[data-kz-icon] [data-node] {
-  transform: scale(1.5);
-  filter: drop-shadow(0 0 3px var(--kz-accent, #196df5));
+  filter: brightness(1.15);
 }
 svg[data-kz-icon="ForwardIcon"],
 svg[data-kz-icon="ExternalIcon"] {
@@ -299,11 +256,6 @@ svg[data-kz-icon="ExternalIcon"] {
   transform: translate(2px, -2px);
 }
 
-/* Magnetic (`data-kz-magnetic`, driven by MotionObserver): the element leans a few pixels toward a fine pointer. */
-[data-kz-magnetic] {
-  translate: var(--kz-mag-x, 0) var(--kz-mag-y, 0);
-  transition: translate 420ms var(--kz-ease);
-}
 
 /* A figure that climbs (NumberTicker): an invisible copy of the final value shares the grid cell and holds the width. */
 .kz-count {
@@ -374,17 +326,8 @@ svg[data-kz-icon="ExternalIcon"] {
   animation-play-state: paused;
 }
 
-/* ─── GlowCard: a bloom that follows the pointer, a ring of the brand gradient that turns ─── */
-@property --kz-glow-angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 135deg;
-}
-.kz-glow {
-  --kz-glow-x: 30%;
-  --kz-glow-y: 0%;
-}
-/* The ring: the brand gradient, cut to the border (mask), faint at rest, bright under the pointer or the focus. */
+/* ─── GlowCard: a still hairline ring of the brand gradient (krizaka-ui#393: no bloom under the pointer, no turning
+   ring). Faint at rest, a step brighter under the pointer or the focus, fuller on a featured (`alive`) card. ─── */
 .kz-glow:is([data-glow="border"], [data-glow="both"])::before {
   content: "";
   position: absolute;
@@ -392,39 +335,19 @@ svg[data-kz-icon="ExternalIcon"] {
   z-index: -1;
   padding: 1px;
   border-radius: inherit;
-  background: conic-gradient(from var(--kz-glow-angle), transparent 0deg, var(--kz-accent) 70deg, var(--kz-accent-2, var(--kz-accent)) 140deg, transparent 210deg, transparent 360deg);
+  background: linear-gradient(135deg, var(--kz-accent), var(--kz-accent-2, var(--kz-accent)) 45%, transparent 75%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
-  opacity: 0.35;
-  transition: opacity 0.4s var(--kz-ease);
+  opacity: 0.3;
+  transition: opacity 150ms var(--kz-ease);
   pointer-events: none;
 }
-.kz-glow[data-alive]::before,
-.kz-glow:is(:hover, :focus-within)::before {
-  animation: kz-glow-turn 6s linear infinite;
-}
-.kz-glow:is(:hover, :focus-within)::before {
-  opacity: 1;
-}
-/* The bloom: under the pointer, inside the card. */
-.kz-glow:is([data-glow="spotlight"], [data-glow="both"])::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: radial-gradient(360px circle at var(--kz-glow-x) var(--kz-glow-y), color-mix(in oklab, var(--kz-accent) 16%, transparent), transparent 60%);
-  opacity: 0;
-  transition: opacity 0.4s var(--kz-ease);
-  pointer-events: none;
-}
-.kz-glow:is(:hover, :focus-within)::after {
-  opacity: 1;
-}
-@keyframes kz-glow-turn {
-  to { --kz-glow-angle: 495deg; }
-}
+.kz-glow { transition: border-color 150ms var(--kz-ease); }
+.kz-glow[data-alive]::before { opacity: 0.7; }
+.kz-glow:is(:hover, :focus-within) { border-color: var(--kz-border-strong); }
+.kz-glow:is(:hover, :focus-within)::before { opacity: 0.6; }
+.kz-glow[data-alive]:is(:hover, :focus-within)::before { opacity: 0.9; }
 
 /* ─── Toasts: a hairline at the bottom counts the time left, and pauses with the toast ─── */
 .kz-toast::after {
@@ -525,7 +448,7 @@ svg[data-kz-icon="ExternalIcon"] {
    Objects built from the Krizaka vocabulary — hexagons, cut corners, the node — extruded in isometric projection and lit
    from inside in the brand accent (a `.brand-<id>` ancestor re-points it). Faces read the surfaces, edges the accent
    text: both themes. Motion: stages that stack once at the entrance, a dome that breathes, light that flows along the
-   links, satellites that float; the pointer lifts an object and shows its label. */
+   links, satellites that float; the pointer brightens an object and shows its label. */
 /* Unlayered CSS beats Tailwind's layers: the kit sets no size, the app's classes do (`w-full max-w-xl`). */
 .kz-iso {
   overflow: visible;
@@ -587,18 +510,18 @@ svg[data-kz-icon="ExternalIcon"] {
 .kz-iso[data-animated="false"] :is(.kz-loop, .kz-iso-rise) { animation: none; }
 /* Entrance: each object rises into place once, in order (--kz-iso-i), when its scene first shows. */
 .kz-iso-rise { animation: kz-iso-rise 0.9s var(--kz-ease) backwards; animation-delay: calc(var(--kz-iso-i, 0) * 110ms + 120ms); }
-/* The pointer (or the focus, in an interactive scene) lifts an object and shows its label. */
+/* The pointer (or the focus, in an interactive scene) outlines an object and shows its label — nothing moves. */
 .kz-iso-item { outline: none; }
-.kz-iso-item > .kz-iso-lift { transition: translate 0.45s var(--kz-ease), filter 0.45s var(--kz-ease); }
-.kz-iso-tip { opacity: 0; transition: opacity 0.3s var(--kz-ease), translate 0.45s var(--kz-ease); pointer-events: none; }
+.kz-iso-item > .kz-iso-lift { transition: filter 150ms var(--kz-ease); }
+.kz-iso-tip { opacity: 0; transition: opacity 150ms var(--kz-ease); pointer-events: none; }
 .kz-iso-leader { stroke: var(--kz-accent-text); stroke-width: 1; }
 .kz-iso-tip rect { fill: var(--kz-surface-1); stroke: var(--kz-border-strong); }
 @media (hover: hover) {
-  .kz-iso-item:hover > .kz-iso-lift { translate: 0 -8px; filter: drop-shadow(0 10px 14px color-mix(in oklab, var(--kz-accent) 35%, transparent)); }
-  .kz-iso-item:hover > .kz-iso-tip { opacity: 1; translate: 0 -8px; }
+  .kz-iso-item:hover > .kz-iso-lift { filter: brightness(1.12); }
+  .kz-iso-item:hover > .kz-iso-tip { opacity: 1; }
 }
-.kz-iso-item:focus-visible > .kz-iso-lift { translate: 0 -8px; filter: drop-shadow(0 0 6px var(--kz-ring, currentColor)); }
-.kz-iso-item:focus-visible > .kz-iso-tip { opacity: 1; translate: 0 -8px; }
+.kz-iso-item:focus-visible > .kz-iso-lift { filter: drop-shadow(0 0 0 2px var(--kz-ring, currentColor)) drop-shadow(0 0 2px var(--kz-ring, currentColor)); }
+.kz-iso-item:focus-visible > .kz-iso-tip { opacity: 1; }
 @keyframes kz-iso-rise { from { opacity: 0; transform: translateY(-34px); } }
 @keyframes kz-iso-flow { to { stroke-dashoffset: -40; } }
 @keyframes kz-iso-travel {
@@ -676,10 +599,20 @@ svg[data-kz-icon="ExternalIcon"] {
 }
 .kz-flow-photon[data-halo] { stroke-width: calc(var(--kz-flow-w) * 9); opacity: 0.22; }
 .kz-flow-photon[data-dir="out"] { stroke: var(--kz-flow-back); animation-name: kz-flow-out; }
+/* `trigger`: `hover` — the photons travel only while the pointer or focus is on the figure (they rest along the conduits);
+   `active` — only on the chosen node's conduit (the others show no photon). Off screen / settling still pause them above. */
+.kz-flow[data-trigger="hover"]:not(:hover, :focus-within) .kz-flow-photon { animation-play-state: paused; }
+.kz-flow[data-trigger="active"] .kz-flow-link:not([data-active]) .kz-flow-photon { opacity: 0; }
+.kz-flow[data-trigger="active"]:not([data-active]) .kz-flow-photon { opacity: 0; }
 .kz-flow[data-active] .kz-flow-link:not([data-active]) { opacity: 0.25; }
 .kz-flow-link[data-active] .kz-flow-wire { opacity: 0.9; }
-@keyframes kz-flow-in { to { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1); } }
-@keyframes kz-flow-out { from { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1); } to { stroke-dashoffset: 0; } }
+/* The gap carries its unit (`* -1px`): a bare number is not interpolable with the length it starts from, and the dot would
+   only flip between two equivalent offsets, i.e. stand still. */
+@keyframes kz-flow-in { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1px); } }
+@keyframes kz-flow-out { from { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1px); } to { stroke-dashoffset: 0px; } }
+/* The engine breathes: a slow swell of its mark (compositor only), in the loop system (held off screen / while settling). */
+.kz-flow-hub-mark.kz-loop { animation: kz-flow-breathe 4.2s ease-in-out infinite alternate; }
+@keyframes kz-flow-breathe { from { scale: 1; } to { scale: 1.06; } }
 
 .kz-flow-nodes { margin: 0; padding: 0; list-style: none; }
 .kz-flow-nodes > li, .kz-flow-hub { position: absolute; translate: -50% -50%; }
@@ -706,15 +639,14 @@ svg[data-kz-icon="ExternalIcon"] {
   border-radius: 999px;
   background: var(--kz-surface-1);
   border: 1px solid color-mix(in oklab, var(--kz-accent) 45%, var(--kz-border-default, transparent));
-  transition: border-color 0.3s var(--kz-ease), box-shadow 0.3s var(--kz-ease), scale 0.3s var(--kz-ease);
+  transition: border-color 150ms var(--kz-ease), box-shadow 150ms var(--kz-ease);
 }
 .kz-flow-node-mark { width: var(--kz-flow-mark); height: var(--kz-flow-mark); }
 .kz-flow-node-mark > svg { width: 62%; height: 62%; }
 .kz-flow-node-label { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
 .kz-flow-node:is(:hover, :focus-visible, [data-active]) .kz-flow-node-mark {
   border-color: var(--kz-accent);
-  box-shadow: 0 0 0 4px var(--kz-accent-soft), 0 0 24px -6px var(--kz-accent);
-  scale: 1.06;
+  box-shadow: 0 0 0 4px var(--kz-accent-soft);
 }
 .kz-flow[data-active] .kz-flow-node:not([data-active]) { opacity: 0.6; }
 .kz-flow-node[data-planned] .kz-flow-node-mark { border-style: dashed; }
@@ -757,19 +689,17 @@ svg[data-kz-icon="ExternalIcon"] {
 
 @media (prefers-reduced-motion: reduce) {
   .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress,
-  .kz-skeleton, .kz-skeleton-shape *, .kz-toast::after, .kz-glow::before,
+  .kz-skeleton, .kz-skeleton-shape *, .kz-toast::after,
   .kz-rotating > *, .kz-loop, .kz-iso-rise, .kz-count-roll, .kz-loader-trace, .kz-loader-node, .kz-loader-mark,
-  [data-kz-status], .kz-replay-caret, .kz-month, .kz-map-user::after, .kz-flow-photon { animation: none !important; }
+  [data-kz-status], .kz-replay-caret, .kz-month, .kz-map-user::after, .kz-flow-photon, [data-kz-marker] > [data-drop], .kz-map-pulse::before, .kz-map-pulse::after { animation: none !important; }
+  .kz-map-pulse::before { opacity: 0.45; transform: scale(0.7); } .kz-map-pulse::after { opacity: 0.2; transform: scale(1); }
   .kz-flow-node-mark, .kz-flow-node, .kz-flow-link { transition: none; }
   /* At rest, the trace stands still where a reader expects it: a third of the hexagon from the top. */
   .kz-loader-trace:not([stroke-dasharray]) { stroke-dashoffset: -8; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
-  .kz-sheen::after { display: none; }
   /* The band stands still and scrolls by hand; its copy goes. */
   .kz-band > .kz-band-viewport { overflow-x: auto; scrollbar-width: thin; }
   .kz-band-copy { display: none !important; }
-  .kz-lift, .kz-lift:hover { transform: none; transition: none; }
-  [data-kz-magnetic] { translate: none; }
   .kz-count-digit > span { transition: none; }
   /* The still frame is a composed picture, not a cut animation: particles rest along their link, labels show. */
   .kz-iso-item > .kz-iso-lift, .kz-iso-tip { transition: none; }

package/dist/motion.d.ts

@@ -19,8 +19,8 @@ interface MotionObserverProps {
  * 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, feeds the pointer to `.kz-spotlight` cards (`--spot-x`, `--spot-y`) and to `[data-kz-magnetic]` elements
- * (`Button magnetic`). Under prefers-reduced-motion everything is revealed at once and nothing follows the pointer.
+ * 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.
  */
 declare function MotionObserver({ settle, pauseOffscreen }?: MotionObserverProps): null;
 

package/dist/motion.js

@@ -2,7 +2,7 @@
 import {
   MotionObserver,
   RotatingWord
-} from "./chunk-HAQWKORZ.js";
+} from "./chunk-4JO5GSSD.js";
 export {
   MotionObserver,
   RotatingWord

package/dist/native/map.js

@@ -66,15 +66,15 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "textSecondary": "#a0a0a7",
   "textMuted": "#92929b",
   "textOnMedia": "#ffffff",
-  "accent": "#196df5",
-  "accentHover": "#0e5bd8",
-  "accentSoft": "rgba(25,109,245,0.1)",
-  "accentText": "#629cf8",
-  "accent2": "#196df5",
+  "accent": "#3e76a8",
+  "accentHover": "#346793",
+  "accentSoft": "rgba(62,118,168,0.12)",
+  "accentText": "#8ebde1",
+  "accent2": "#3e76a8",
   "onAccent": "#ffffff",
-  "ring": "#196df5",
-  "brandGradientFrom": "#0e1525",
-  "brandGradientVia": "#0e0f16",
+  "ring": "#3e76a8",
+  "brandGradientFrom": "#121a21",
+  "brandGradientVia": "#0f1114",
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "successText": "#36d399",
@@ -85,8 +85,8 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "danger": "#ef4343",
   "dangerText": "#f87272",
   "dangerSoft": "rgba(239,67,67,0.14)",
-  "info": "#196df5",
-  "infoText": "#629cf8",
+  "info": "#3e76a8",
+  "infoText": "#8ebde1",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
@@ -110,15 +110,15 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "textSecondary": "#56565d",
   "textMuted": "#64646d",
   "textOnMedia": "#ffffff",
-  "accent": "#0a64f5",
-  "accentHover": "#0d55c9",
-  "accentSoft": "rgba(10,100,245,0.08)",
-  "accentText": "#0954ce",
-  "accent2": "#0a64f5",
+  "accent": "#2a5f8d",
+  "accentHover": "#1f4d75",
+  "accentSoft": "rgba(42,95,141,0.08)",
+  "accentText": "#275782",
+  "accent2": "#2a5f8d",
   "onAccent": "#ffffff",
-  "ring": "#0a64f5",
-  "brandGradientFrom": "#dcebfe",
-  "brandGradientVia": "#f3f6fc",
+  "ring": "#2a5f8d",
+  "brandGradientFrom": "#e7eef4",
+  "brandGradientVia": "#f5f7fa",
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "successText": "#0a714e",
@@ -129,8 +129,8 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "danger": "#ef4343",
   "dangerText": "#af1d1d",
   "dangerSoft": "rgba(239,67,67,0.1)",
-  "info": "#0a64f5",
-  "infoText": "#0954ce",
+  "info": "#2a5f8d",
+  "infoText": "#275782",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
@@ -145,31 +145,31 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
 var brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {
     "dark": {
-      "accent": "#196df5",
-      "accentHover": "#0e5bd8",
-      "accentSoft": "rgba(25,109,245,0.1)",
-      "accentText": "#629cf8",
-      "accent2": "#196df5",
+      "accent": "#3e76a8",
+      "accentHover": "#346793",
+      "accentSoft": "rgba(62,118,168,0.12)",
+      "accentText": "#8ebde1",
+      "accent2": "#3e76a8",
       "onAccent": "#ffffff",
-      "ring": "#196df5",
-      "info": "#196df5",
-      "infoText": "#629cf8",
-      "brandGradientFrom": "#0e1525",
-      "brandGradientVia": "#0e0f16",
+      "ring": "#3e76a8",
+      "info": "#3e76a8",
+      "infoText": "#8ebde1",
+      "brandGradientFrom": "#121a21",
+      "brandGradientVia": "#0f1114",
       "brandGradientTo": "#0c0c0e"
     },
     "light": {
-      "accent": "#0a64f5",
-      "accentHover": "#0d55c9",
-      "accentSoft": "rgba(10,100,245,0.08)",
-      "accentText": "#0954ce",
-      "accent2": "#0a64f5",
+      "accent": "#2a5f8d",
+      "accentHover": "#1f4d75",
+      "accentSoft": "rgba(42,95,141,0.08)",
+      "accentText": "#275782",
+      "accent2": "#2a5f8d",
       "onAccent": "#ffffff",
-      "ring": "#0a64f5",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
-      "brandGradientFrom": "#dcebfe",
-      "brandGradientVia": "#f3f6fc",
+      "ring": "#2a5f8d",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
+      "brandGradientFrom": "#e7eef4",
+      "brandGradientVia": "#f5f7fa",
       "brandGradientTo": "#fafafa"
     }
   },
@@ -182,8 +182,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#f59e0b",
       "onAccent": "#0c0c0e",
       "ring": "#f67e23",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#28170b",
       "brandGradientVia": "#17130c",
       "brandGradientTo": "#0c0c0e"
@@ -196,8 +196,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#a45904",
       "onAccent": "#ffffff",
       "ring": "#b45309",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#ffebd6",
       "brandGradientVia": "#fdf7ed",
       "brandGradientTo": "#fafafa"
@@ -242,8 +242,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#22c378",
       "onAccent": "#0c0c0e",
       "ring": "#24dbc9",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#0a241e",
       "brandGradientVia": "#0c1818",
       "brandGradientTo": "#0c0c0e"
@@ -256,8 +256,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#107546",
       "onAccent": "#ffffff",
       "ring": "#097169",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e1faf1",
       "brandGradientVia": "#e9fbfa",
       "brandGradientTo": "#fafafa"
@@ -272,8 +272,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#c3a579",
       "onAccent": "#0c0c0e",
       "ring": "#98b587",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#1c1812",
       "brandGradientVia": "#11140f",
       "brandGradientTo": "#0c0c0e"
@@ -286,8 +286,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#745834",
       "onAccent": "#ffffff",
       "ring": "#456237",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#f5efe5",
       "brandGradientVia": "#f1f6ee",
       "brandGradientTo": "#fafafa"
@@ -302,8 +302,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#8d9aec",
       "onAccent": "#0c0c0e",
       "ring": "#8888f2",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#121321",
       "brandGradientVia": "#111019",
       "brandGradientTo": "#0c0c0e"
@@ -316,8 +316,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#2d3c9f",
       "onAccent": "#ffffff",
       "ring": "#3c38b2",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#ebecfa",
       "brandGradientVia": "#f0f0fa",
       "brandGradientTo": "#fafafa"
@@ -332,8 +332,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#7695f9",
       "onAccent": "#0c0e17",
       "ring": "#fbcf23",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#101628",
       "brandGradientVia": "#0f111a",
       "brandGradientTo": "#0c0c0e"
@@ -346,8 +346,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#6285f8",
       "onAccent": "#0c0e17",
       "ring": "#1743d3",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e8edfc",
       "brandGradientVia": "#fcf8e8",
       "brandGradientTo": "#fafafa"
@@ -362,8 +362,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#dc946a",
       "onAccent": "#0a0f0c",
       "ring": "#65c374",
-      "info": "#3b83f7",
-      "infoText": "#629cf8",
+      "info": "#5e99c9",
+      "infoText": "#8ebde1",
       "brandGradientFrom": "#111d15",
       "brandGradientVia": "#181410",
       "brandGradientTo": "#0c0c0e"
@@ -376,8 +376,8 @@ var brands = /* @__PURE__ */ Object.freeze({
       "accent2": "#954923",
       "onAccent": "#ffffff",
       "ring": "#21692f",
-      "info": "#0a64f5",
-      "infoText": "#0954ce",
+      "info": "#2a5f8d",
+      "infoText": "#275782",
       "brandGradientFrom": "#e9f7eb",
       "brandGradientVia": "#faf1eb",
       "brandGradientTo": "#fafafa"