@krizaka/ui 3.29.0 → 3.31.0

package/dist/confirm-button.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Button
-} from "./chunk-CHOJUCVE.js";
+} from "./chunk-SJS6RJIT.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
 import {

package/dist/continue-prompt.js

@@ -42,7 +42,7 @@ function defineRecipe(config) {
 
 // src/button/recipe.ts
 var buttonRecipe = defineRecipe({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
   variants: {
     variant: {
       primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
@@ -56,9 +56,9 @@ var buttonRecipe = defineRecipe({
       danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
     },
     size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
-    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
-    // focus ring and the hover follow the cut, unlike a clip-path.
-    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
+    // One clean shape (krizaka-ui#393): an 8 px radius (`--kz-radius-sm`, the radius of a field — a button beside an
+    // input lines up with it), the pill on demand. `cut` (the retired chamfer) is a deprecated alias of `rounded`.
+    shape: { rounded: "rounded-sm", pill: "rounded-full", cut: "rounded-sm" }
   },
   defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
 });
@@ -67,6 +67,12 @@ var buttonRecipe = defineRecipe({
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonVariants = tv(buttonRecipe);
 var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
+var warnedCut = false;
+function warnCut() {
+  if (warnedCut || typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  warnedCut = true;
+  console.warn('@krizaka/ui/button: shape="cut" is deprecated (krizaka-ui#393) and now draws the default rounded shape. Remove the prop.');
+}
 function Button({
   asChild,
   loading,
@@ -74,8 +80,8 @@ function Button({
   status,
   announce,
   indicator = true,
-  shimmer,
-  magnetic,
+  shimmer: _shimmer,
+  magnetic: _magnetic,
   variant,
   size,
   shape,
@@ -85,6 +91,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot.Root : "button";
+  if (shape === "cut") warnCut();
   const known = loading && typeof progress === "number" && Number.isFinite(progress);
   const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
   const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
@@ -97,14 +104,13 @@ function Button({
       "data-loading": loading ? "" : void 0,
       "data-variant": variant ?? "secondary",
       "data-kz-status": status ?? void 0,
-      "data-kz-magnetic": magnetic ? "" : void 0,
       disabled: asChild ? void 0 : disabled || loading,
       "aria-disabled": asChild && (disabled || loading) ? true : void 0,
       className: buttonVariants({
         variant,
         size,
         shape,
-        className: cn(known && "relative isolate overflow-hidden", shimmer && "kz-sheen", className)
+        className: cn(known && "relative isolate overflow-hidden", className)
       }),
       ...props,
       children: asChild ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [

package/dist/continue-prompt.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button/button.tsx","../src/spinner/glyph.tsx","../src/recipes/define.ts","../src/button/recipe.ts","../src/continue-prompt/continue-prompt.tsx"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","import type { TV } from \"tailwind-variants\";\n\n/** What a recipe is made of: the `tv()` options — `base`, `slots`, `variants`, `defaultVariants`, `compoundVariants`. */\nexport type RecipeConfig = Parameters<TV>[0];\n\n/**\n * A recipe is data: the variants of a component (a `variant`, a `size`, a `tone`…) as classes of the Krizaka tokens.\n * `defineRecipe` only keeps the literal types, so `tv(recipe)` is typed exactly as `tv({ … })` would be (the web side) and\n * `nativeRecipe(recipe)` reads the same classes into styles on the theme's roles (the native side, `./native`).\n *\n * Sizes are a variant dimension (`size: { sm: \"h-8 px-3 text-xs\" }`); states are the prefixes (`hover:`, `disabled:`,\n * `data-[state=on]:`). Write colours as roles (`bg-accent`, `text-fg-secondary`, `border-border-default`, `ring-accent/40`),\n * spacing as Tailwind units (`h-10`, `px-4`), type as `text-sm` / `text-[11px]` / `font-semibold`.\n */\nexport function defineRecipe<const C extends RecipeConfig>(config: C): C {\n  return config;\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n","// Server-safe. The last call of a page or a flow (story.css): a short question, a figure that counts (days, seats,\n// seconds), what to say before leaving, and the one action that continues — “Keep your studio? · 3 days left”.\nimport type * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type ContinuePromptProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The question (“Keep your studio?”, arcade “Continue?”). */\n  title: React.ReactNode;\n  /** What counts, beside the question: a figure, or a live `Countdown` for a real deadline. Decorative: say it in words too. */\n  count?: React.ReactNode;\n  /**\n   * A count that ticks down once when its scene plays (`{ from: 9, to: 7 }`), then waits; still under reduced motion.\n   * Use `count` for anything else.\n   */\n  countdown?: { readonly from: number; readonly to: number };\n  /** Inside the screen, under the question: a heading, a line, links — the closing call itself. */\n  children?: React.ReactNode;\n  /** The action's words. */\n  actionLabel: React.ReactNode;\n  /** Runs the action (a client handler). Without `href`, the action is a `button`. */\n  onAction?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Makes the action a link. */\n  href?: string;\n  /** A key-cap before the action's words (“Enter”, arcade “1P Start”). Decorative. */\n  actionKey?: React.ReactNode;\n  /** The action's glyph after its words; default an arrow. Decorative. */\n  actionIcon?: React.ReactNode;\n  /** A small line at the top of the card (where it comes from). */\n  caption?: React.ReactNode;\n  /** In the deck, in the accent: the call (“Last places”, arcade “Insert coin”). */\n  highlight?: React.ReactNode;\n  /** Beside the highlight: how (“One click, no card”). */\n  hint?: React.ReactNode;\n  /** A status with a green dot (“All features on”, “Credit 01”). */\n  status?: React.ReactNode;\n  /**\n   * `default`: a calm card. `arcade`: the cabinet — screws, a dark CRT that switches on, a coin deck.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`krizaka` → `.brand-krizaka`). */\n  brand?: string;\n};\n\nconst Arrow = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M5 12h14M13 6l6 6-6 6\" />\n  </svg>\n);\n\n/** One countdown's keyframes, named by its range: the digit steps from `from` to `to`, once. */\nfunction countdownCss(from: number, to: number) {\n  const steps = Math.max(1, Math.abs(from - to));\n  const frames = Array.from({ length: steps + 1 }, (_, i) => {\n    const n = from > to ? from - i : from + i;\n    return `${Math.round((i / steps) * 100)}% { content: \"${n}\"; }`;\n  }).join(\" \");\n  return `@keyframes kzs-count-${from}-${to} { ${frames} }\n@media (prefers-reduced-motion: no-preference) {\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"] { color: transparent; }\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"]::after { content: \"${to}\"; animation: kzs-count-${from}-${to} ${steps}s steps(1) 1s both; }\n}`;\n}\n\n/** A last call: a question, what counts, the closing words, the one action that continues — a `button`, or a link. */\nexport function ContinuePrompt({\n  title,\n  count,\n  countdown,\n  children,\n  actionLabel,\n  onAction,\n  href,\n  actionKey,\n  actionIcon,\n  caption,\n  highlight,\n  hint,\n  status,\n  variant,\n  brand,\n  className,\n  ...props\n}: ContinuePromptProps) {\n  const arcade = variant === \"arcade\";\n  const inner = (\n    <>\n      {actionKey && (\n        <span className=\"kzs-prompt-key\" aria-hidden>\n          {actionKey}\n        </span>\n      )}\n      {actionLabel}\n      <span className=\"kzs-prompt-icon\" aria-hidden>\n        {actionIcon ?? <Arrow />}\n      </span>\n    </>\n  );\n  const button = { variant: arcade ? (\"secondary\" as const) : (\"primary\" as const), size: \"md\" as const, shape: arcade ? (\"cut\" as const) : undefined, className: \"kzs-prompt-action\" };\n  return (\n    <div data-kzs-scene=\"\" className={cn(\"kzs-prompt\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {countdown && <style>{countdownCss(countdown.from, countdown.to)}</style>}\n      {(caption || arcade) && (\n        <div className=\"kzs-prompt-top\">\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n          {caption && <span>{caption}</span>}\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n        </div>\n      )}\n      <div className={cn(\"kzs-prompt-screen\", arcade && \"theme-dark\", brandClass(brand))}>\n        <span className=\"kzs-texture\" aria-hidden />\n        <span className=\"kzs-scan kzs-loop\" aria-hidden />\n        <span className=\"kzs-prompt-glass\" aria-hidden />\n        <div className=\"kzs-prompt-content\">\n          <div className=\"kzs-prompt-head\">\n            <span className=\"kzs-prompt-title\">{title}</span>\n            {countdown ? (\n              <span className=\"kzs-prompt-count\" data-from={countdown.from} data-to={countdown.to} aria-hidden>\n                {countdown.from}\n              </span>\n            ) : (\n              count !== undefined && (\n                <span className=\"kzs-prompt-count\" aria-hidden>\n                  {count}\n                </span>\n              )\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n      <div className=\"kzs-prompt-deck\">\n        {(highlight || hint || status) && (\n          <div className=\"kzs-prompt-coin\">\n            {highlight && <span className=\"kzs-prompt-highlight\">{highlight}</span>}\n            {hint && <span className=\"kzs-prompt-hint\">{hint}</span>}\n            {status && (\n              <span className=\"kzs-prompt-status\">\n                <span className=\"kzs-prompt-led\" aria-hidden />\n                {status}\n              </span>\n            )}\n          </div>\n        )}\n        {href ? (\n          <Button asChild {...button}>\n            <a href={href}>{inner}</a>\n          </Button>\n        ) : (\n          <Button type=\"button\" onClick={onAction} {...button}>\n            {inner}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","Fragment","jsx","jsxs"]}
+{"version":3,"sources":["../src/button/button.tsx","../src/spinner/glyph.tsx","../src/recipes/define.ts","../src/button/recipe.ts","../src/continue-prompt/continue-prompt.tsx"],"sourcesContent":["// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * `rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\n     * retired) — it draws `rounded` and warns in development; it will be removed in 4.0.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0. */\n    shimmer?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0. */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nlet warnedCut = false;\n/** `shape=\"cut\"` (the chamfer) is retired: one warning per page in development, never in production. */\nfunction warnCut() {\n  if (warnedCut || typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n  warnedCut = true;\n  console.warn('@krizaka/ui/button: shape=\"cut\" is deprecated (krizaka-ui#393) and now draws the default rounded shape. Remove the prop.');\n}\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer: _shimmer,\n  magnetic: _magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  if (shape === \"cut\") warnCut();\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n","// The Krizaka loader glyph, server-safe: a hexagon (the marks' shape) traced by a segment of light around a node that\n// breathes; determinate, it fills to its value; done, the trace closes and a check (or a cross) draws itself. Animated by\n// motion.css (`kz-loader-*`); still under prefers-reduced-motion — a segment at rest and the node lit, never blank.\nimport type * as React from \"react\";\n\n/** The hexagon, pointy top, radius 9 around (12, 12). */\nconst HEX = \"M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z\";\n\n/** What the glyph shows: a wait (with an optional value), or how it ended. */\nexport type LoaderGlyphState = \"loading\" | \"success\" | \"error\";\n\nexport interface LoaderGlyphProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** loading · success · error. */\n  state?: LoaderGlyphState;\n  /** Between 0 and 1: a determinate wait, the trace grows to it. Absent: indeterminate. */\n  value?: number | null;\n}\n\n/** The glyph alone (decorative): the Spinner, the Loader and the Button's `loading` draw it. */\nexport function LoaderGlyph({ state = \"loading\", value, ...props }: LoaderGlyphProps) {\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const fill = state !== \"loading\" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden data-state={state} data-progress={fill === null ? undefined : fill} {...props}>\n      <path d={HEX} stroke=\"currentColor\" strokeOpacity=\"0.22\" strokeWidth=\"2.2\" strokeLinejoin=\"round\" />\n      <path\n        d={HEX}\n        pathLength={100}\n        stroke=\"currentColor\"\n        strokeWidth=\"2.2\"\n        strokeLinejoin=\"round\"\n        strokeLinecap=\"round\"\n        className=\"kz-loader-trace\"\n        strokeDasharray={fill === null ? undefined : `${fill} ${100 - fill}`}\n      />\n      {state === \"loading\" && <circle cx=\"12\" cy=\"12\" r=\"2.6\" fill=\"currentColor\" className=\"kz-loader-node\" />}\n      {state === \"success\" && <path d=\"M8.3 12.3l2.6 2.6 4.9-5.3\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"kz-loader-mark\" />}\n      {state === \"error\" && <path d=\"M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2\" pathLength={20} stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" className=\"kz-loader-mark\" />}\n    </svg>\n  );\n}\n","import type { TV } from \"tailwind-variants\";\n\n/** What a recipe is made of: the `tv()` options — `base`, `slots`, `variants`, `defaultVariants`, `compoundVariants`. */\nexport type RecipeConfig = Parameters<TV>[0];\n\n/**\n * A recipe is data: the variants of a component (a `variant`, a `size`, a `tone`…) as classes of the Krizaka tokens.\n * `defineRecipe` only keeps the literal types, so `tv(recipe)` is typed exactly as `tv({ … })` would be (the web side) and\n * `nativeRecipe(recipe)` reads the same classes into styles on the theme's roles (the native side, `./native`).\n *\n * Sizes are a variant dimension (`size: { sm: \"h-8 px-3 text-xs\" }`); states are the prefixes (`hover:`, `disabled:`,\n * `data-[state=on]:`). Write colours as roles (`bg-accent`, `text-fg-secondary`, `border-border-default`, `ring-accent/40`),\n * spacing as Tailwind units (`h-10`, `px-4`), type as `text-sm` / `text-[11px]` / `font-semibold`.\n */\nexport function defineRecipe<const C extends RecipeConfig>(config: C): C {\n  return config;\n}\n","// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition duration-150 \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // One clean shape (krizaka-ui#393): an 8 px radius (`--kz-radius-sm`, the radius of a field — a button beside an\n    // input lines up with it), the pill on demand. `cut` (the retired chamfer) is a deprecated alias of `rounded`.\n    shape: { rounded: \"rounded-sm\", pill: \"rounded-full\", cut: \"rounded-sm\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n","// Server-safe. The last call of a page or a flow (story.css): a short question, a figure that counts (days, seats,\n// seconds), what to say before leaving, and the one action that continues — “Keep your studio? · 3 days left”.\nimport type * as React from \"react\";\n\nimport { Button } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type ContinuePromptProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** The question (“Keep your studio?”, arcade “Continue?”). */\n  title: React.ReactNode;\n  /** What counts, beside the question: a figure, or a live `Countdown` for a real deadline. Decorative: say it in words too. */\n  count?: React.ReactNode;\n  /**\n   * A count that ticks down once when its scene plays (`{ from: 9, to: 7 }`), then waits; still under reduced motion.\n   * Use `count` for anything else.\n   */\n  countdown?: { readonly from: number; readonly to: number };\n  /** Inside the screen, under the question: a heading, a line, links — the closing call itself. */\n  children?: React.ReactNode;\n  /** The action's words. */\n  actionLabel: React.ReactNode;\n  /** Runs the action (a client handler). Without `href`, the action is a `button`. */\n  onAction?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Makes the action a link. */\n  href?: string;\n  /** A key-cap before the action's words (“Enter”, arcade “1P Start”). Decorative. */\n  actionKey?: React.ReactNode;\n  /** The action's glyph after its words; default an arrow. Decorative. */\n  actionIcon?: React.ReactNode;\n  /** A small line at the top of the card (where it comes from). */\n  caption?: React.ReactNode;\n  /** In the deck, in the accent: the call (“Last places”, arcade “Insert coin”). */\n  highlight?: React.ReactNode;\n  /** Beside the highlight: how (“One click, no card”). */\n  hint?: React.ReactNode;\n  /** A status with a green dot (“All features on”, “Credit 01”). */\n  status?: React.ReactNode;\n  /**\n   * `default`: a calm card. `arcade`: the cabinet — screws, a dark CRT that switches on, a coin deck.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`krizaka` → `.brand-krizaka`). */\n  brand?: string;\n};\n\nconst Arrow = () => (\n  <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M5 12h14M13 6l6 6-6 6\" />\n  </svg>\n);\n\n/** One countdown's keyframes, named by its range: the digit steps from `from` to `to`, once. */\nfunction countdownCss(from: number, to: number) {\n  const steps = Math.max(1, Math.abs(from - to));\n  const frames = Array.from({ length: steps + 1 }, (_, i) => {\n    const n = from > to ? from - i : from + i;\n    return `${Math.round((i / steps) * 100)}% { content: \"${n}\"; }`;\n  }).join(\" \");\n  return `@keyframes kzs-count-${from}-${to} { ${frames} }\n@media (prefers-reduced-motion: no-preference) {\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"] { color: transparent; }\n  [data-in] .kzs-prompt-count[data-from=\"${from}\"][data-to=\"${to}\"]::after { content: \"${to}\"; animation: kzs-count-${from}-${to} ${steps}s steps(1) 1s both; }\n}`;\n}\n\n/** A last call: a question, what counts, the closing words, the one action that continues — a `button`, or a link. */\nexport function ContinuePrompt({\n  title,\n  count,\n  countdown,\n  children,\n  actionLabel,\n  onAction,\n  href,\n  actionKey,\n  actionIcon,\n  caption,\n  highlight,\n  hint,\n  status,\n  variant,\n  brand,\n  className,\n  ...props\n}: ContinuePromptProps) {\n  const arcade = variant === \"arcade\";\n  const inner = (\n    <>\n      {actionKey && (\n        <span className=\"kzs-prompt-key\" aria-hidden>\n          {actionKey}\n        </span>\n      )}\n      {actionLabel}\n      <span className=\"kzs-prompt-icon\" aria-hidden>\n        {actionIcon ?? <Arrow />}\n      </span>\n    </>\n  );\n  const button = { variant: arcade ? (\"secondary\" as const) : (\"primary\" as const), size: \"md\" as const, shape: arcade ? (\"cut\" as const) : undefined, className: \"kzs-prompt-action\" };\n  return (\n    <div data-kzs-scene=\"\" className={cn(\"kzs-prompt\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {countdown && <style>{countdownCss(countdown.from, countdown.to)}</style>}\n      {(caption || arcade) && (\n        <div className=\"kzs-prompt-top\">\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n          {caption && <span>{caption}</span>}\n          <span className=\"kzs-prompt-screw\" aria-hidden />\n        </div>\n      )}\n      <div className={cn(\"kzs-prompt-screen\", arcade && \"theme-dark\", brandClass(brand))}>\n        <span className=\"kzs-texture\" aria-hidden />\n        <span className=\"kzs-scan kzs-loop\" aria-hidden />\n        <span className=\"kzs-prompt-glass\" aria-hidden />\n        <div className=\"kzs-prompt-content\">\n          <div className=\"kzs-prompt-head\">\n            <span className=\"kzs-prompt-title\">{title}</span>\n            {countdown ? (\n              <span className=\"kzs-prompt-count\" data-from={countdown.from} data-to={countdown.to} aria-hidden>\n                {countdown.from}\n              </span>\n            ) : (\n              count !== undefined && (\n                <span className=\"kzs-prompt-count\" aria-hidden>\n                  {count}\n                </span>\n              )\n            )}\n          </div>\n          {children}\n        </div>\n      </div>\n      <div className=\"kzs-prompt-deck\">\n        {(highlight || hint || status) && (\n          <div className=\"kzs-prompt-coin\">\n            {highlight && <span className=\"kzs-prompt-highlight\">{highlight}</span>}\n            {hint && <span className=\"kzs-prompt-hint\">{hint}</span>}\n            {status && (\n              <span className=\"kzs-prompt-status\">\n                <span className=\"kzs-prompt-led\" aria-hidden />\n                {status}\n              </span>\n            )}\n          </div>\n        )}\n        {href ? (\n          <Button asChild {...button}>\n            <a href={href}>{inner}</a>\n          </Button>\n        ) : (\n          <Button type=\"button\" onClick={onAction} {...button}>\n            {inner}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","Fragment","jsx","jsxs"]}

package/dist/data-table.js

@@ -9,10 +9,10 @@ import {
   dataTableCsv,
   dataTableLabels,
   useDataTable
-} from "./chunk-LYOPPBMC.js";
+} from "./chunk-KIBICUZK.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
-import "./chunk-DZU6RMYD.js";
+import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
 import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";

package/dist/dialog.js

@@ -10,10 +10,10 @@ import {
   Sheet,
   dialog,
   useReturnFocus
-} from "./chunk-HBZPJ3EP.js";
+} from "./chunk-NJFCSVPT.js";
 import {
   Button
-} from "./chunk-CHOJUCVE.js";
+} from "./chunk-SJS6RJIT.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-WEVYKZIF.js";
 import "./chunk-NSLXEDIS.js";

package/dist/engine-flow.d.ts

@@ -90,8 +90,31 @@ type EngineFlowProps = Omit<React.ComponentProps<"figure">, "children"> & {
     /** Photon speed, in units per second (the stage is 100 units wide).
      * @default 16 */
     speed?: number;
+    /** How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.
+     * @default "normal" */
+    density?: FlowDensity;
+    /** When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the
+     * conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they
+     * are always paused, and still under reduced motion.
+     * @default "always" */
+    trigger?: FlowTrigger;
+    /** The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any
+     * CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).
+     * @default "linear" */
+    easing?: FlowEasing;
+    /** Milliseconds between one conduit's photons and the next's: 0 sends them all together.
+     * @default 300 */
+    stagger?: number;
+    /** The engine's mark swells slowly (a loop, still under reduced motion).
+     * @default true */
+    breathe?: boolean;
 };
+type FlowDensity = "sparse" | "normal" | "dense";
+type FlowTrigger = "always" | "hover" | "active";
+type FlowEasing = "linear" | "ease-in-out" | (string & {});
+/** How many photons a conduit of this length carries (evenly spaced, so the gap is `length / count`). */
+declare function photonCount(length: number, density?: FlowDensity): number;
 /** An engine at the hub and the apps it serves, with what travels between them. */
-declare function EngineFlow({ label, hub, nodes, layout, compactLayout, particles, conduit, hint, defaultActive, speed, className, ...props }: EngineFlowProps): React.JSX.Element;
+declare function EngineFlow({ label, hub, nodes, layout, compactLayout, particles, conduit, hint, defaultActive, speed, density, trigger, easing, stagger, breathe, className, ...props }: EngineFlowProps): React.JSX.Element;
 
-export { EngineFlow, type EngineFlowHub, type EngineFlowNode, type EngineFlowProps, FLOW_HEIGHT, type FlowConduit, type FlowGeometry, type FlowLayout, type FlowPoint, flowGeometry, flowPositions };
+export { EngineFlow, type EngineFlowHub, type EngineFlowNode, type EngineFlowProps, FLOW_HEIGHT, type FlowConduit, type FlowDensity, type FlowEasing, type FlowGeometry, type FlowLayout, type FlowPoint, type FlowTrigger, flowGeometry, flowPositions, photonCount };

package/dist/engine-flow.js

@@ -83,6 +83,12 @@ function flowGeometry(layout, count, conduit = "bezier") {
 
 // src/engine-flow/engine-flow.tsx
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function photonCount(length, density = "normal") {
+  const base = Math.round(length / 16);
+  if (density === "sparse") return Math.min(2, Math.max(1, Math.round(base / 2)));
+  if (density === "dense") return Math.min(8, Math.max(4, base * 2));
+  return Math.min(4, Math.max(2, base));
+}
 function Stage({
   layout,
   variant,
@@ -91,6 +97,10 @@ function Stage({
   conduit,
   particles,
   speed,
+  density,
+  easing,
+  stagger,
+  breathe,
   active,
   onActive,
   detailId
@@ -101,11 +111,14 @@ function Stage({
     /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${g.width} ${g.height}`, "aria-hidden": "true", focusable: "false", children: nodes.map((node, i) => {
       const flow = node.flow ?? "in";
       const length = g.lengths[i] ?? 0;
-      const gap = length / Math.min(4, Math.max(2, Math.round(length / 16)));
+      const gap = length / photonCount(length, density);
+      const period = gap / speed;
       const timing = (dir) => ({
         "--kz-flow-gap": gap.toFixed(3),
-        animationDuration: `${(gap / speed).toFixed(2)}s`,
-        animationDelay: `${(-((i * 0.37 + (dir === "out" ? 0.5 : 0)) % 1) * (gap / speed)).toFixed(2)}s`
+        animationDuration: `${period.toFixed(2)}s`,
+        // Each conduit starts `stagger` ms after the previous (a negative delay: already under way); the way back is half a period behind.
+        animationDelay: `${(-((i * stagger / 1e3 + (dir === "out" ? period / 2 : 0)) % period)).toFixed(2)}s`,
+        ...easing !== "linear" ? { animationTimingFunction: easing } : {}
       });
       const lanes = node.planned || particles === "none" ? [] : flow === "both" ? ["in", "out"] : [flow];
       return /* @__PURE__ */ jsxs(
@@ -127,7 +140,7 @@ function Stage({
       );
     }) }),
     /* @__PURE__ */ jsxs("div", { className: cn("kz-flow-hub", hub.className), style: { left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }, children: [
-      hub.mark ? /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-mark", children: hub.mark }) : null,
+      hub.mark ? /* @__PURE__ */ jsx("span", { className: cn("kz-flow-hub-mark", breathe && "kz-loop"), children: hub.mark }) : null,
       /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-label", children: hub.label }),
       hub.caption ? /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-caption", children: hub.caption }) : null
     ] }),
@@ -166,6 +179,11 @@ function EngineFlow({
   hint,
   defaultActive,
   speed = 16,
+  density = "normal",
+  trigger = "always",
+  easing = "linear",
+  stagger = 300,
+  breathe = true,
   className,
   ...props
 }) {
@@ -173,7 +191,7 @@ function EngineFlow({
   const detailId = `${React.useId()}-detail`;
   const chosen = nodes.find((n) => n.id === active);
   const compact = compactLayout && compactLayout !== layout ? compactLayout : void 0;
-  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), active, onActive: setActive, detailId };
+  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), density, easing, stagger: Math.max(0, stagger), breathe, active, onActive: setActive, detailId };
   return /* @__PURE__ */ jsxs(
     "figure",
     {
@@ -181,6 +199,8 @@ function EngineFlow({
       className: cn("kz-flow", className),
       "data-motion-scope": "",
       "data-active": chosen ? "" : void 0,
+      "data-trigger": trigger === "always" ? void 0 : trigger,
+      "data-density": density === "normal" ? void 0 : density,
       "data-compact": compact ? "" : void 0,
       ...props,
       children: [
@@ -209,6 +229,7 @@ export {
   EngineFlow,
   FLOW_HEIGHT,
   flowGeometry,
-  flowPositions
+  flowPositions,
+  photonCount
 };
 //# sourceMappingURL=engine-flow.js.map

package/dist/engine-flow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/engine-flow/engine-flow.tsx","../src/engine-flow/geometry.ts"],"sourcesContent":["// Client (the node a visitor points at or focuses). An engine at the hub and the apps it serves around it: one conduit\n// per app, and photons that travel it — towards the hub (`in`: requests), back (`out`: results) or both — in the app's\n// brand colour going in and the hub's coming back. A planned app is drawn dim, its conduit dashed and still.\n//\n// Motion is the Krizaka signature's (motion.css): CSS animations of `stroke-dashoffset`, no animation frame, no canvas;\n// paused off screen (`data-motion-scope` → MotionObserver's `data-offscreen`), held while the page settles (`kz-loop`),\n// a still frame under reduced motion (the photons rest along their conduit). The stage keeps its aspect ratio and the\n// detail line its height: no layout shift.\n//\n// Accessible: the drawing is hidden from assistive technology; every node is a real button named by its label, and the\n// detail line (polite live region) says the chosen node's description with its link. Pair it with a text version (a\n// list) in the page: the figure is a picture of it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type FlowConduit, flowGeometry, type FlowLayout } from \"./geometry\";\n\nexport interface EngineFlowNode {\n  /** A stable id (`orochia`). */\n  id: string;\n  /** Its name, the button's accessible name (\"Orochia\"). */\n  label: string;\n  /** Its mark (a `ProductLogo`), decorative. */\n  mark?: React.ReactNode;\n  /** One line: what it uses the engine for — shown when the node is pointed at or focused. */\n  description?: React.ReactNode;\n  /** Where it lives (its site). */\n  href?: string;\n  /** The link's words (\"Visit dev.orochia.com\"); defaults to the label. */\n  linkLabel?: React.ReactNode;\n  /** Opens the link in a new tab. */\n  external?: boolean;\n  /** What travels: `in` towards the hub, `out` back from it, `both`.\n   * @default \"in\" */\n  flow?: \"in\" | \"out\" | \"both\";\n  /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */\n  planned?: boolean;\n  /** A word beside the name in the detail line (\"planned\"), passed translated. */\n  status?: React.ReactNode;\n  /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */\n  className?: string;\n}\n\nexport interface EngineFlowHub {\n  /** The engine's name (\"Orazaka\"). */\n  label: string;\n  /** Its mark, decorative. */\n  mark?: React.ReactNode;\n  /** A line under the name (\"the engine\"). */\n  caption?: React.ReactNode;\n  /** Its brand scope; the photons coming back take its accent. */\n  className?: string;\n}\n\nexport type EngineFlowProps = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  /** What the figure shows (\"Orazaka and the products it powers\"), passed translated. */\n  label: string;\n  /** The engine, at the hub. */\n  hub: EngineFlowHub;\n  /** The apps around it. */\n  nodes: readonly EngineFlowNode[];\n  /** How the nodes sit around the hub.\n   * @default \"radial\" */\n  layout?: FlowLayout;\n  /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.\n   * @default \"top-to-bottom\" */\n  compactLayout?: FlowLayout | false;\n  /** `photons` travel the conduits; `none` draws them still.\n   * @default \"photons\" */\n  particles?: \"photons\" | \"none\";\n  /** The conduits' shape.\n   * @default \"bezier\" */\n  conduit?: FlowConduit;\n  /** The detail line before a node is chosen (\"Point at a product\"). */\n  hint?: React.ReactNode;\n  /** The node shown in the detail line at first. */\n  defaultActive?: string;\n  /** Photon speed, in units per second (the stage is 100 units wide).\n   * @default 16 */\n  speed?: number;\n};\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  active,\n  onActive,\n  detailId,\n}: {\n  layout: FlowLayout;\n  variant: \"wide\" | \"compact\";\n  nodes: readonly EngineFlowNode[];\n  hub: EngineFlowHub;\n  conduit: FlowConduit;\n  particles: \"photons\" | \"none\";\n  speed: number;\n  active: string | undefined;\n  onActive: (id: string) => void;\n  detailId: string;\n}) {\n  const g = flowGeometry(layout, nodes.length, conduit);\n  const pct = (v: number, of: number) => `${((v / of) * 100).toFixed(3)}%`;\n  return (\n    <div className=\"kz-flow-stage\" data-variant={variant} data-layout={layout} style={{ aspectRatio: `${g.width} / ${g.height}` }}>\n      <svg viewBox={`0 0 ${g.width} ${g.height}`} aria-hidden=\"true\" focusable=\"false\">\n        {nodes.map((node, i) => {\n          const flow = node.flow ?? \"in\";\n          const length = g.lengths[i] ?? 0;\n          // Two to four photons per conduit, evenly spaced; the same speed on every conduit.\n          const gap = length / Math.min(4, Math.max(2, Math.round(length / 16)));\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${(gap / speed).toFixed(2)}s`,\n              animationDelay: `${(-((i * 0.37 + (dir === \"out\" ? 0.5 : 0)) % 1) * (gap / speed)).toFixed(2)}s`,\n            }) as React.CSSProperties;\n          const lanes = node.planned || particles === \"none\" ? [] : flow === \"both\" ? ([\"in\", \"out\"] as const) : [flow];\n          return (\n            <g\n              key={node.id}\n              className={cn(\"kz-flow-link\", node.className)}\n              data-flow={flow}\n              data-planned={node.planned ? \"\" : undefined}\n              data-active={active === node.id ? \"\" : undefined}\n            >\n              <path className=\"kz-flow-wire\" d={g.paths[i]} />\n              {lanes.map((dir) => (\n                <React.Fragment key={dir}>\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} data-halo=\"\" d={g.paths[i]} style={timing(dir)} />\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} d={g.paths[i]} style={timing(dir)} />\n                </React.Fragment>\n              ))}\n            </g>\n          );\n        })}\n      </svg>\n      <div className={cn(\"kz-flow-hub\", hub.className)} style={{ left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }}>\n        {hub.mark ? <span className=\"kz-flow-hub-mark\">{hub.mark}</span> : null}\n        <span className=\"kz-flow-hub-label\">{hub.label}</span>\n        {hub.caption ? <span className=\"kz-flow-hub-caption\">{hub.caption}</span> : null}\n      </div>\n      <ul className=\"kz-flow-nodes\">\n        {nodes.map((node, i) => {\n          const p = g.nodes[i]!;\n          const on = active === node.id;\n          return (\n            <li key={node.id} style={{ left: pct(p.x, g.width), top: pct(p.y, g.height) }}>\n              <button\n                type=\"button\"\n                className={cn(\"kz-flow-node\", node.className)}\n                data-active={on ? \"\" : undefined}\n                data-planned={node.planned ? \"\" : undefined}\n                aria-pressed={on}\n                aria-controls={detailId}\n                onPointerEnter={() => onActive(node.id)}\n                onFocus={() => onActive(node.id)}\n                onClick={() => onActive(node.id)}\n              >\n                {node.mark ? (\n                  <span className=\"kz-flow-node-mark\" aria-hidden=\"true\">\n                    {node.mark}\n                  </span>\n                ) : null}\n                <span className=\"kz-flow-node-label\">{node.label}</span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\n/** An engine at the hub and the apps it serves, with what travels between them. */\nexport function EngineFlow({\n  label,\n  hub,\n  nodes,\n  layout = \"radial\",\n  compactLayout = \"top-to-bottom\",\n  particles = \"photons\",\n  conduit = \"bezier\",\n  hint,\n  defaultActive,\n  speed = 16,\n  className,\n  ...props\n}: EngineFlowProps) {\n  const [active, setActive] = React.useState<string | undefined>(defaultActive);\n  const detailId = `${React.useId()}-detail`;\n  const chosen = nodes.find((n) => n.id === active);\n  const compact = compactLayout && compactLayout !== layout ? compactLayout : undefined;\n  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), active, onActive: setActive, detailId };\n  return (\n    <figure\n      aria-label={label}\n      className={cn(\"kz-flow\", className)}\n      data-motion-scope=\"\"\n      data-active={chosen ? \"\" : undefined}\n      data-compact={compact ? \"\" : undefined}\n      {...props}\n    >\n      <Stage layout={layout} variant=\"wide\" {...stage} />\n      {compact ? <Stage layout={compact} variant=\"compact\" {...stage} /> : null}\n      <figcaption id={detailId} className={cn(\"kz-flow-detail\", chosen?.className)} aria-live=\"polite\">\n        {chosen ? (\n          <>\n            <strong>{chosen.label}</strong>\n            {chosen.status ? <span className=\"kz-flow-status\">{chosen.status}</span> : null}\n            {chosen.description ? <span> {chosen.description}</span> : null}\n            {chosen.href ? (\n              <>\n                {\" \"}\n                <a href={chosen.href} {...(chosen.external ? { target: \"_blank\", rel: \"noopener\" } : {})}>\n                  {chosen.linkLabel ?? chosen.label}\n                  <span aria-hidden=\"true\"> →</span>\n                </a>\n              </>\n            ) : null}\n          </>\n        ) : (\n          hint\n        )}\n      </figcaption>\n    </figure>\n  );\n}\n","// Server-safe, pure. The geometry of EngineFlow: where the hub and the nodes sit in a box 100 units wide, and the\n// conduit from each node to the hub (an SVG path drawn node → hub, and its length, so photons travel at one speed on\n// every conduit). No DOM: the same numbers on the server and in the browser.\n\n/** How the nodes are placed around the hub. */\nexport type FlowLayout = \"radial\" | \"top-to-bottom\" | \"left-to-right\";\n/** The shape of a conduit: an S-shaped cubic Bézier, or a straight line. */\nexport type FlowConduit = \"bezier\" | \"straight\";\n\nexport interface FlowPoint {\n  x: number;\n  y: number;\n}\n\nexport interface FlowGeometry {\n  /** The box: 100 units wide, `height` units high (the stage keeps this aspect ratio, so nothing is distorted). */\n  width: number;\n  height: number;\n  hub: FlowPoint;\n  nodes: FlowPoint[];\n  /** One path per node, from the node to the hub. */\n  paths: string[];\n  /** The length of each path, in units. */\n  lengths: number[];\n}\n\n/** The box height per layout (the width is always 100). */\nexport const FLOW_HEIGHT: Record<FlowLayout, number> = { radial: 60, \"top-to-bottom\": 92, \"left-to-right\": 56 };\n\nconst r2 = (n: number) => Math.round(n * 100) / 100;\nconst pt = (p: FlowPoint) => `${r2(p.x)} ${r2(p.y)}`;\n\nfunction cubicLength(a: FlowPoint, b: FlowPoint, c: FlowPoint, d: FlowPoint): number {\n  let length = 0;\n  let prev = a;\n  for (let i = 1; i <= 32; i++) {\n    const t = i / 32;\n    const u = 1 - t;\n    const p = {\n      x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,\n      y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y,\n    };\n    length += Math.hypot(p.x - prev.x, p.y - prev.y);\n    prev = p;\n  }\n  return length;\n}\n\n/** The positions of `count` nodes around the hub. */\nexport function flowPositions(layout: FlowLayout, count: number): { hub: FlowPoint; nodes: FlowPoint[] } {\n  const height = FLOW_HEIGHT[layout];\n  const n = Math.max(0, count);\n  if (layout === \"top-to-bottom\") {\n    return { hub: { x: 50, y: 72 }, nodes: Array.from({ length: n }, (_, i) => ({ x: ((i + 0.5) * 100) / n, y: 13 })) };\n  }\n  if (layout === \"left-to-right\") {\n    return { hub: { x: 80, y: height / 2 }, nodes: Array.from({ length: n }, (_, i) => ({ x: 12, y: ((i + 0.5) * height) / n })) };\n  }\n  // Radial: on an ellipse around the centre; an even count puts two nodes level with the hub (more room for labels).\n  const hub = { x: 50, y: height / 2 };\n  const start = n % 2 === 0 ? -90 + 180 / Math.max(n, 1) : -90;\n  return {\n    hub,\n    nodes: Array.from({ length: n }, (_, i) => {\n      const a = ((start + (360 / n) * i) * Math.PI) / 180;\n      return { x: hub.x + 37 * Math.cos(a), y: hub.y + 20 * Math.sin(a) };\n    }),\n  };\n}\n\n/** The whole geometry of a flow: positions, conduits (node → hub) and their lengths. */\nexport function flowGeometry(layout: FlowLayout, count: number, conduit: FlowConduit = \"bezier\"): FlowGeometry {\n  const { hub, nodes } = flowPositions(layout, count);\n  const paths: string[] = [];\n  const lengths: number[] = [];\n  for (const p of nodes) {\n    // Each conduit lands on its own point of the hub (a fan), so the lines stay apart where they meet.\n    const end =\n      layout === \"top-to-bottom\"\n        ? { x: hub.x + (p.x - hub.x) * 0.18, y: hub.y }\n        : layout === \"left-to-right\"\n          ? { x: hub.x, y: hub.y + (p.y - hub.y) * 0.18 }\n          : hub;\n    if (conduit === \"straight\") {\n      paths.push(`M${pt(p)} L${pt(end)}`);\n      lengths.push(Math.hypot(end.x - p.x, end.y - p.y));\n      continue;\n    }\n    let c1: FlowPoint;\n    let c2: FlowPoint;\n    if (layout === \"top-to-bottom\") {\n      const mid = (p.y + end.y) / 2;\n      c1 = { x: p.x, y: mid };\n      c2 = { x: end.x, y: mid };\n    } else if (layout === \"left-to-right\") {\n      const mid = (p.x + end.x) / 2;\n      c1 = { x: mid, y: p.y };\n      c2 = { x: mid, y: end.y };\n    } else {\n      // An S: leave the node bending one way, reach the hub bending the other.\n      const dx = end.x - p.x;\n      const dy = end.y - p.y;\n      const len = Math.hypot(dx, dy) || 1;\n      const k = 0.14 * len;\n      const nx = -dy / len;\n      const ny = dx / len;\n      c1 = { x: p.x + dx * 0.35 + nx * k, y: p.y + dy * 0.35 + ny * k };\n      c2 = { x: p.x + dx * 0.65 - nx * k, y: p.y + dy * 0.65 - ny * k };\n    }\n    paths.push(`M${pt(p)} C${pt(c1)} ${pt(c2)} ${pt(end)}`);\n    lengths.push(cubicLength(p, c1, c2, end));\n  }\n  return { width: 100, height: FLOW_HEIGHT[layout], hub, nodes, paths, lengths };\n}\n"],"mappings":"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","names":["Fragment"]}
+{"version":3,"sources":["../src/engine-flow/engine-flow.tsx","../src/engine-flow/geometry.ts"],"sourcesContent":["// Client (the node a visitor points at or focuses). An engine at the hub and the apps it serves around it: one conduit\n// per app, and photons that travel it — towards the hub (`in`: requests), back (`out`: results) or both — in the app's\n// brand colour going in and the hub's coming back. A planned app is drawn dim, its conduit dashed and still.\n//\n// Motion is the Krizaka signature's (motion.css): CSS animations of `stroke-dashoffset`, no animation frame, no canvas;\n// paused off screen (`data-motion-scope` → MotionObserver's `data-offscreen`), held while the page settles (`kz-loop`),\n// a still frame under reduced motion (the photons rest along their conduit). The stage keeps its aspect ratio and the\n// detail line its height: no layout shift.\n//\n// Accessible: the drawing is hidden from assistive technology; every node is a real button named by its label, and the\n// detail line (polite live region) says the chosen node's description with its link. Pair it with a text version (a\n// list) in the page: the figure is a picture of it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type FlowConduit, flowGeometry, type FlowLayout } from \"./geometry\";\n\nexport interface EngineFlowNode {\n  /** A stable id (`orochia`). */\n  id: string;\n  /** Its name, the button's accessible name (\"Orochia\"). */\n  label: string;\n  /** Its mark (a `ProductLogo`), decorative. */\n  mark?: React.ReactNode;\n  /** One line: what it uses the engine for — shown when the node is pointed at or focused. */\n  description?: React.ReactNode;\n  /** Where it lives (its site). */\n  href?: string;\n  /** The link's words (\"Visit dev.orochia.com\"); defaults to the label. */\n  linkLabel?: React.ReactNode;\n  /** Opens the link in a new tab. */\n  external?: boolean;\n  /** What travels: `in` towards the hub, `out` back from it, `both`.\n   * @default \"in\" */\n  flow?: \"in\" | \"out\" | \"both\";\n  /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */\n  planned?: boolean;\n  /** A word beside the name in the detail line (\"planned\"), passed translated. */\n  status?: React.ReactNode;\n  /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */\n  className?: string;\n}\n\nexport interface EngineFlowHub {\n  /** The engine's name (\"Orazaka\"). */\n  label: string;\n  /** Its mark, decorative. */\n  mark?: React.ReactNode;\n  /** A line under the name (\"the engine\"). */\n  caption?: React.ReactNode;\n  /** Its brand scope; the photons coming back take its accent. */\n  className?: string;\n}\n\nexport type EngineFlowProps = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  /** What the figure shows (\"Orazaka and the products it powers\"), passed translated. */\n  label: string;\n  /** The engine, at the hub. */\n  hub: EngineFlowHub;\n  /** The apps around it. */\n  nodes: readonly EngineFlowNode[];\n  /** How the nodes sit around the hub.\n   * @default \"radial\" */\n  layout?: FlowLayout;\n  /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.\n   * @default \"top-to-bottom\" */\n  compactLayout?: FlowLayout | false;\n  /** `photons` travel the conduits; `none` draws them still.\n   * @default \"photons\" */\n  particles?: \"photons\" | \"none\";\n  /** The conduits' shape.\n   * @default \"bezier\" */\n  conduit?: FlowConduit;\n  /** The detail line before a node is chosen (\"Point at a product\"). */\n  hint?: React.ReactNode;\n  /** The node shown in the detail line at first. */\n  defaultActive?: string;\n  /** Photon speed, in units per second (the stage is 100 units wide).\n   * @default 16 */\n  speed?: number;\n  /** How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.\n   * @default \"normal\" */\n  density?: FlowDensity;\n  /** When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the\n   * conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they\n   * are always paused, and still under reduced motion.\n   * @default \"always\" */\n  trigger?: FlowTrigger;\n  /** The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any\n   * CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).\n   * @default \"linear\" */\n  easing?: FlowEasing;\n  /** Milliseconds between one conduit's photons and the next's: 0 sends them all together.\n   * @default 300 */\n  stagger?: number;\n  /** The engine's mark swells slowly (a loop, still under reduced motion).\n   * @default true */\n  breathe?: boolean;\n};\n\nexport type FlowDensity = \"sparse\" | \"normal\" | \"dense\";\nexport type FlowTrigger = \"always\" | \"hover\" | \"active\";\nexport type FlowEasing = \"linear\" | \"ease-in-out\" | (string & {});\n\n/** How many photons a conduit of this length carries (evenly spaced, so the gap is `length / count`). */\nexport function photonCount(length: number, density: FlowDensity = \"normal\"): number {\n  const base = Math.round(length / 16);\n  if (density === \"sparse\") return Math.min(2, Math.max(1, Math.round(base / 2)));\n  if (density === \"dense\") return Math.min(8, Math.max(4, base * 2));\n  return Math.min(4, Math.max(2, base));\n}\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  density,\n  easing,\n  stagger,\n  breathe,\n  active,\n  onActive,\n  detailId,\n}: {\n  layout: FlowLayout;\n  variant: \"wide\" | \"compact\";\n  nodes: readonly EngineFlowNode[];\n  hub: EngineFlowHub;\n  conduit: FlowConduit;\n  particles: \"photons\" | \"none\";\n  speed: number;\n  density: FlowDensity;\n  easing: FlowEasing;\n  stagger: number;\n  breathe: boolean;\n  active: string | undefined;\n  onActive: (id: string) => void;\n  detailId: string;\n}) {\n  const g = flowGeometry(layout, nodes.length, conduit);\n  const pct = (v: number, of: number) => `${((v / of) * 100).toFixed(3)}%`;\n  return (\n    <div className=\"kz-flow-stage\" data-variant={variant} data-layout={layout} style={{ aspectRatio: `${g.width} / ${g.height}` }}>\n      <svg viewBox={`0 0 ${g.width} ${g.height}`} aria-hidden=\"true\" focusable=\"false\">\n        {nodes.map((node, i) => {\n          const flow = node.flow ?? \"in\";\n          const length = g.lengths[i] ?? 0;\n          // Photons per conduit (`density`), evenly spaced; the same speed on every conduit.\n          const gap = length / photonCount(length, density);\n          const period = gap / speed;\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${period.toFixed(2)}s`,\n              // Each conduit starts `stagger` ms after the previous (a negative delay: already under way); the way back is half a period behind.\n              animationDelay: `${(-(((i * stagger) / 1000 + (dir === \"out\" ? period / 2 : 0)) % period)).toFixed(2)}s`,\n              ...(easing !== \"linear\" ? { animationTimingFunction: easing } : {}),\n            }) as React.CSSProperties;\n          const lanes = node.planned || particles === \"none\" ? [] : flow === \"both\" ? ([\"in\", \"out\"] as const) : [flow];\n          return (\n            <g\n              key={node.id}\n              className={cn(\"kz-flow-link\", node.className)}\n              data-flow={flow}\n              data-planned={node.planned ? \"\" : undefined}\n              data-active={active === node.id ? \"\" : undefined}\n            >\n              <path className=\"kz-flow-wire\" d={g.paths[i]} />\n              {lanes.map((dir) => (\n                <React.Fragment key={dir}>\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} data-halo=\"\" d={g.paths[i]} style={timing(dir)} />\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} d={g.paths[i]} style={timing(dir)} />\n                </React.Fragment>\n              ))}\n            </g>\n          );\n        })}\n      </svg>\n      <div className={cn(\"kz-flow-hub\", hub.className)} style={{ left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }}>\n        {hub.mark ? <span className={cn(\"kz-flow-hub-mark\", breathe && \"kz-loop\")}>{hub.mark}</span> : null}\n        <span className=\"kz-flow-hub-label\">{hub.label}</span>\n        {hub.caption ? <span className=\"kz-flow-hub-caption\">{hub.caption}</span> : null}\n      </div>\n      <ul className=\"kz-flow-nodes\">\n        {nodes.map((node, i) => {\n          const p = g.nodes[i]!;\n          const on = active === node.id;\n          return (\n            <li key={node.id} style={{ left: pct(p.x, g.width), top: pct(p.y, g.height) }}>\n              <button\n                type=\"button\"\n                className={cn(\"kz-flow-node\", node.className)}\n                data-active={on ? \"\" : undefined}\n                data-planned={node.planned ? \"\" : undefined}\n                aria-pressed={on}\n                aria-controls={detailId}\n                onPointerEnter={() => onActive(node.id)}\n                onFocus={() => onActive(node.id)}\n                onClick={() => onActive(node.id)}\n              >\n                {node.mark ? (\n                  <span className=\"kz-flow-node-mark\" aria-hidden=\"true\">\n                    {node.mark}\n                  </span>\n                ) : null}\n                <span className=\"kz-flow-node-label\">{node.label}</span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\n/** An engine at the hub and the apps it serves, with what travels between them. */\nexport function EngineFlow({\n  label,\n  hub,\n  nodes,\n  layout = \"radial\",\n  compactLayout = \"top-to-bottom\",\n  particles = \"photons\",\n  conduit = \"bezier\",\n  hint,\n  defaultActive,\n  speed = 16,\n  density = \"normal\",\n  trigger = \"always\",\n  easing = \"linear\",\n  stagger = 300,\n  breathe = true,\n  className,\n  ...props\n}: EngineFlowProps) {\n  const [active, setActive] = React.useState<string | undefined>(defaultActive);\n  const detailId = `${React.useId()}-detail`;\n  const chosen = nodes.find((n) => n.id === active);\n  const compact = compactLayout && compactLayout !== layout ? compactLayout : undefined;\n  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), density, easing, stagger: Math.max(0, stagger), breathe, active, onActive: setActive, detailId };\n  return (\n    <figure\n      aria-label={label}\n      className={cn(\"kz-flow\", className)}\n      data-motion-scope=\"\"\n      data-active={chosen ? \"\" : undefined}\n      data-trigger={trigger === \"always\" ? undefined : trigger}\n      data-density={density === \"normal\" ? undefined : density}\n      data-compact={compact ? \"\" : undefined}\n      {...props}\n    >\n      <Stage layout={layout} variant=\"wide\" {...stage} />\n      {compact ? <Stage layout={compact} variant=\"compact\" {...stage} /> : null}\n      <figcaption id={detailId} className={cn(\"kz-flow-detail\", chosen?.className)} aria-live=\"polite\">\n        {chosen ? (\n          <>\n            <strong>{chosen.label}</strong>\n            {chosen.status ? <span className=\"kz-flow-status\">{chosen.status}</span> : null}\n            {chosen.description ? <span> {chosen.description}</span> : null}\n            {chosen.href ? (\n              <>\n                {\" \"}\n                <a href={chosen.href} {...(chosen.external ? { target: \"_blank\", rel: \"noopener\" } : {})}>\n                  {chosen.linkLabel ?? chosen.label}\n                  <span aria-hidden=\"true\"> →</span>\n                </a>\n              </>\n            ) : null}\n          </>\n        ) : (\n          hint\n        )}\n      </figcaption>\n    </figure>\n  );\n}\n","// Server-safe, pure. The geometry of EngineFlow: where the hub and the nodes sit in a box 100 units wide, and the\n// conduit from each node to the hub (an SVG path drawn node → hub, and its length, so photons travel at one speed on\n// every conduit). No DOM: the same numbers on the server and in the browser.\n\n/** How the nodes are placed around the hub. */\nexport type FlowLayout = \"radial\" | \"top-to-bottom\" | \"left-to-right\";\n/** The shape of a conduit: an S-shaped cubic Bézier, or a straight line. */\nexport type FlowConduit = \"bezier\" | \"straight\";\n\nexport interface FlowPoint {\n  x: number;\n  y: number;\n}\n\nexport interface FlowGeometry {\n  /** The box: 100 units wide, `height` units high (the stage keeps this aspect ratio, so nothing is distorted). */\n  width: number;\n  height: number;\n  hub: FlowPoint;\n  nodes: FlowPoint[];\n  /** One path per node, from the node to the hub. */\n  paths: string[];\n  /** The length of each path, in units. */\n  lengths: number[];\n}\n\n/** The box height per layout (the width is always 100). */\nexport const FLOW_HEIGHT: Record<FlowLayout, number> = { radial: 60, \"top-to-bottom\": 92, \"left-to-right\": 56 };\n\nconst r2 = (n: number) => Math.round(n * 100) / 100;\nconst pt = (p: FlowPoint) => `${r2(p.x)} ${r2(p.y)}`;\n\nfunction cubicLength(a: FlowPoint, b: FlowPoint, c: FlowPoint, d: FlowPoint): number {\n  let length = 0;\n  let prev = a;\n  for (let i = 1; i <= 32; i++) {\n    const t = i / 32;\n    const u = 1 - t;\n    const p = {\n      x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,\n      y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y,\n    };\n    length += Math.hypot(p.x - prev.x, p.y - prev.y);\n    prev = p;\n  }\n  return length;\n}\n\n/** The positions of `count` nodes around the hub. */\nexport function flowPositions(layout: FlowLayout, count: number): { hub: FlowPoint; nodes: FlowPoint[] } {\n  const height = FLOW_HEIGHT[layout];\n  const n = Math.max(0, count);\n  if (layout === \"top-to-bottom\") {\n    return { hub: { x: 50, y: 72 }, nodes: Array.from({ length: n }, (_, i) => ({ x: ((i + 0.5) * 100) / n, y: 13 })) };\n  }\n  if (layout === \"left-to-right\") {\n    return { hub: { x: 80, y: height / 2 }, nodes: Array.from({ length: n }, (_, i) => ({ x: 12, y: ((i + 0.5) * height) / n })) };\n  }\n  // Radial: on an ellipse around the centre; an even count puts two nodes level with the hub (more room for labels).\n  const hub = { x: 50, y: height / 2 };\n  const start = n % 2 === 0 ? -90 + 180 / Math.max(n, 1) : -90;\n  return {\n    hub,\n    nodes: Array.from({ length: n }, (_, i) => {\n      const a = ((start + (360 / n) * i) * Math.PI) / 180;\n      return { x: hub.x + 37 * Math.cos(a), y: hub.y + 20 * Math.sin(a) };\n    }),\n  };\n}\n\n/** The whole geometry of a flow: positions, conduits (node → hub) and their lengths. */\nexport function flowGeometry(layout: FlowLayout, count: number, conduit: FlowConduit = \"bezier\"): FlowGeometry {\n  const { hub, nodes } = flowPositions(layout, count);\n  const paths: string[] = [];\n  const lengths: number[] = [];\n  for (const p of nodes) {\n    // Each conduit lands on its own point of the hub (a fan), so the lines stay apart where they meet.\n    const end =\n      layout === \"top-to-bottom\"\n        ? { x: hub.x + (p.x - hub.x) * 0.18, y: hub.y }\n        : layout === \"left-to-right\"\n          ? { x: hub.x, y: hub.y + (p.y - hub.y) * 0.18 }\n          : hub;\n    if (conduit === \"straight\") {\n      paths.push(`M${pt(p)} L${pt(end)}`);\n      lengths.push(Math.hypot(end.x - p.x, end.y - p.y));\n      continue;\n    }\n    let c1: FlowPoint;\n    let c2: FlowPoint;\n    if (layout === \"top-to-bottom\") {\n      const mid = (p.y + end.y) / 2;\n      c1 = { x: p.x, y: mid };\n      c2 = { x: end.x, y: mid };\n    } else if (layout === \"left-to-right\") {\n      const mid = (p.x + end.x) / 2;\n      c1 = { x: mid, y: p.y };\n      c2 = { x: mid, y: end.y };\n    } else {\n      // An S: leave the node bending one way, reach the hub bending the other.\n      const dx = end.x - p.x;\n      const dy = end.y - p.y;\n      const len = Math.hypot(dx, dy) || 1;\n      const k = 0.14 * len;\n      const nx = -dy / len;\n      const ny = dx / len;\n      c1 = { x: p.x + dx * 0.35 + nx * k, y: p.y + dy * 0.35 + ny * k };\n      c2 = { x: p.x + dx * 0.65 - nx * k, y: p.y + dy * 0.65 - ny * k };\n    }\n    paths.push(`M${pt(p)} C${pt(c1)} ${pt(c2)} ${pt(end)}`);\n    lengths.push(cubicLength(p, c1, c2, end));\n  }\n  return { width: 100, height: FLOW_HEIGHT[layout], hub, nodes, paths, lengths };\n}\n"],"mappings":"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","names":["Fragment"]}

package/dist/force-update-screen.js

@@ -1,7 +1,7 @@
 import "./chunk-TDG7ED2W.js";
 import {
   Button
-} from "./chunk-6ZYRUOTA.js";
+} from "./chunk-UV4HBVH7.js";
 import "./chunk-43PTCDTL.js";
 import "./chunk-2VNYHG4E.js";
 import "./chunk-W675RFOA.js";
@@ -27,7 +27,7 @@ function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, on
     message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message }),
     versionLabel && /* @__PURE__ */ jsx("p", { className: s.version(), children: versionLabel }),
     /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
-      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, autoFocus: true, onClick: onUpdate, children: updateLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", autoFocus: true, onClick: onUpdate, children: updateLabel }),
       retryLabel && onRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onRetry, children: retryLabel })
     ] })
   ] });

package/dist/force-update-screen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,OAAM,OAAM,SAAO,MAAC,WAAS,MAAC,SAAS,UACxE,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAS,MAAC,SAAS,UACpD,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/genui.js

@@ -4,13 +4,13 @@ import {
   CardRoot,
   CardTitle,
   Skeleton
-} from "./chunk-MQPC3P4T.js";
+} from "./chunk-2DGLWTPS.js";
 import {
   DataTable
-} from "./chunk-LYOPPBMC.js";
+} from "./chunk-KIBICUZK.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
-import "./chunk-DZU6RMYD.js";
+import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
 import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";

package/dist/glow-card.d.ts

@@ -2,19 +2,20 @@ import * as React from 'react';
 
 type GlowCardProps = React.ComponentProps<"div"> & {
     /**
-     * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.
+     * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is
+     * deprecated since 3.31 (krizaka-ui#393) and draws nothing.
      * @default "both"
      */
     glow?: "border" | "spotlight" | "both";
     /** Renders your element (a link, an article) with the card's look and behaviour. */
     asChild?: boolean;
     /**
-     * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.
+     * A featured card: the ring is fuller at rest. It never turns.
      * @default false
      */
     alive?: boolean;
 };
-/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */
-declare function GlowCard({ glow, asChild, alive, className, onPointerMove, ...props }: GlowCardProps): React.JSX.Element;
+/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */
+declare function GlowCard({ glow, asChild, alive, className, ...props }: GlowCardProps): React.JSX.Element;
 
 export { GlowCard, type GlowCardProps };

package/dist/glow-card.js

@@ -6,20 +6,14 @@ import {
 // src/glow-card/glow-card.tsx
 import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-function GlowCard({ glow = "both", asChild, alive, className, onPointerMove, ...props }) {
+function GlowCard({ glow = "both", asChild, alive, className, ...props }) {
   const Comp = asChild ? Slot.Root : "div";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-glow": glow,
       "data-alive": alive ? "" : void 0,
-      className: cn("kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6", className),
-      onPointerMove: (e) => {
-        const box = e.currentTarget.getBoundingClientRect();
-        e.currentTarget.style.setProperty("--kz-glow-x", `${e.clientX - box.left}px`);
-        e.currentTarget.style.setProperty("--kz-glow-y", `${e.clientY - box.top}px`);
-        onPointerMove?.(e);
-      },
+      className: cn("kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6", className),
       ...props
     }
   );

package/dist/glow-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/glow-card/glow-card.tsx"],"sourcesContent":["// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;AAwBjB;AAHG,SAAS,SAAS,EAAE,OAAO,QAAQ,SAAS,OAAO,WAAW,eAAe,GAAG,MAAM,GAAkB;AAC7G,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY,QAAQ,KAAK;AAAA,MACzB,WAAW,GAAG,8FAA8F,SAAS;AAAA,MACrH,eAAe,CAAC,MAA0C;AACxD,cAAM,MAAM,EAAE,cAAc,sBAAsB;AAClD,UAAE,cAAc,MAAM,YAAY,eAAe,GAAG,EAAE,UAAU,IAAI,IAAI,IAAI;AAC5E,UAAE,cAAc,MAAM,YAAY,eAAe,GAAG,EAAE,UAAU,IAAI,GAAG,IAAI;AAC3E,wBAAgB,CAAC;AAAA,MACnB;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../src/glow-card/glow-card.tsx"],"sourcesContent":["// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\n   * deprecated since 3.31 (krizaka-ui#393) and draws nothing.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * A featured card: the ring is fuller at rest. It never turns.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;AAyBjB;AAHG,SAAS,SAAS,EAAE,OAAO,QAAQ,SAAS,OAAO,WAAW,GAAG,MAAM,GAAkB;AAC9F,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY,QAAQ,KAAK;AAAA,MACzB,WAAW,GAAG,sFAAsF,SAAS;AAAA,MAC5G,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/image-cropper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Slider
-} from "./chunk-KM6VAKIE.js";
+} from "./chunk-RE5WJ4QP.js";
 import "./chunk-HJFRHYCI.js";
 import "./chunk-NSLXEDIS.js";
 import {