@krizaka/ui 3.18.2 → 3.20.0

package/dist/avatar/defaults.js

@@ -53,8 +53,13 @@ var resolveTone = (a) => a.tone === void 0 ? defaultAvatarToneOf(a.seed) : clamp
 function defaultAvatarFile(kind, tone, size) {
   return size === "svg" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;
 }
+function trimTrailingSlashes(value) {
+  let end = value.length;
+  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;
+  return value.slice(0, end);
+}
 function defaultAvatarUrl(avatar, { size = 256, base = DEFAULT_AVATAR_BASE } = {}) {
-  return `${base.replace(/\/+$/, "")}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? "person", resolveTone(avatar), size)}`;
+  return `${trimTrailingSlashes(base)}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? "person", resolveTone(avatar), size)}`;
 }
 function defaultAvatarSvg(avatar) {
   const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));

package/dist/avatar/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/default-avatar.ts"],"sourcesContent":["// The default profile pictures of the Krizaka family: what a product shows when a person has no photo.\n// They are generated from this file (tools/export-brand.mjs renders them to SVG and WebP and uploads them to Bunny,\n// `people/defaults/v1/<brand>/…`), so the pictures and the URLs that name them cannot drift apart.\n\nexport type DefaultAvatarBrand = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */\nexport type DefaultAvatarKind = \"person\" | \"plain\";\nexport type DefaultAvatarSize = 256 | 512;\n\nexport const DEFAULT_AVATAR_BRANDS: readonly DefaultAvatarBrand[] = [\"krizaka\", \"orazaka\", \"orochia\", \"yasakia\", \"yororis\", \"yomizaka\", \"kachizaka\", \"akinaza\"];\nexport const DEFAULT_AVATAR_KINDS: readonly DefaultAvatarKind[] = [\"person\", \"plain\"];\nexport const DEFAULT_AVATAR_SIZES: readonly DefaultAvatarSize[] = [256, 512];\n/** How many tones each brand has: a person always gets the same one from their seed, so a list is not one colour. */\nexport const DEFAULT_AVATAR_TONES = 6;\n\n/** Where the set lives. `v1` is the set's version: a changed picture is a new version folder, never an overwrite. */\nexport const DEFAULT_AVATAR_BASE = \"https://krizaka-assets.b-cdn.net/people/defaults/v1\";\n\nexport interface DefaultAvatar {\n  /** The brand of the product showing the avatar: its gradient, its hues. */\n  brand: DefaultAvatarBrand;\n  /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */\n  seed?: string | number;\n  /** Force a tone, 1 to 6, instead of deriving it from `seed`. */\n  tone?: number;\n  /**\n   * `person` (default): a silhouette. `plain`: the gradient alone.\n   * @default \"person\"\n   */\n  kind?: DefaultAvatarKind;\n}\n\n/** The mark gradient of each brand (BRAND.md, `$extensions[\"com.krizaka\"].mark`) as [hue, saturation %, lightness %] and the hue spread of its tones. */\nconst BRANDS: Record<DefaultAvatarBrand, { from: [number, number, number]; to: [number, number, number]; spread: number }> = {\n  krizaka: { from: [217, 92, 53], to: [217, 92, 68], spread: 14 },\n  orazaka: { from: [26, 90.5, 37.1], to: [26, 92, 45], spread: 7 },\n  orochia: { from: [262.1, 83.3, 57.8], to: [328.6, 85.5, 70.2], spread: 12 },\n  yasakia: { from: [156, 92, 32], to: [178, 90, 32], spread: 12 },\n  yororis: { from: [34, 46, 44], to: [104, 28, 42], spread: 10 },\n  yomizaka: { from: [232, 50, 55], to: [248, 50, 58], spread: 10 },\n  kachizaka: { from: [226, 80, 56], to: [44, 92, 33], spread: 10 },\n  akinaza: { from: [140, 48, 34], to: [22, 60, 46], spread: 10 },\n};\n\n/** White on top of a stop must stay visible: a stop is darkened until the contrast reaches this (WCAG 1.4.11, non-text). */\nconst MIN_CONTRAST = 3.2;\nconst OFFSETS = [0, -1, 1, -2, 2, 3] as const;\n\nfunction hslToHex([h, s, l]: [number, number, number]): string {\n  const sat = s / 100;\n  const light = l / 100;\n  const k = (n: number) => (n + (((h % 360) + 360) % 360) / 30) % 12;\n  const a = sat * Math.min(light, 1 - light);\n  const channel = (n: number) => Math.round(255 * (light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));\n  return `#${[0, 8, 4].map((n) => channel(n).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nconst channelLuminance = (v: number) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);\nconst whiteContrast = (hex: string) => {\n  const [r, g, b] = [1, 3, 5].map((i) => channelLuminance(Number.parseInt(hex.slice(i, i + 2), 16) / 255));\n  return 1.05 / (0.2126 * r! + 0.7152 * g! + 0.0722 * b! + 0.05);\n};\n/** The stop, darkened one point of lightness at a time until white reads on it. */\nfunction readable([h, s, l]: [number, number, number]): string {\n  let hex = hslToHex([h, s, l]);\n  for (let light = l; whiteContrast(hex) < MIN_CONTRAST && light > 10; light -= 1) hex = hslToHex([h, s, light]);\n  return hex;\n}\n\n/** The two stops (hex) of tone `tone` (1 to 6) of a brand. */\nexport function defaultAvatarTone(brand: DefaultAvatarBrand, tone: number): readonly [string, string] {\n  const b = BRANDS[brand];\n  const o = OFFSETS[(clampTone(tone) - 1) % OFFSETS.length] * b.spread;\n  return [readable([b.from[0] + o, b.from[1], b.from[2]]), readable([b.to[0] + o, b.to[1], b.to[2]])];\n}\n\nconst clampTone = (tone: number) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));\n\n/** 1 to 6 from a seed (FNV-1a): stable across renders, devices and products. */\nexport function defaultAvatarToneOf(seed: string | number | undefined): number {\n  if (seed === undefined) return 1;\n  let h = 0x811c9dc5;\n  for (const ch of String(seed)) {\n    h ^= ch.codePointAt(0) ?? 0;\n    h = Math.imul(h, 0x01000193) >>> 0;\n  }\n  return (h % DEFAULT_AVATAR_TONES) + 1;\n}\n\nconst resolveTone = (a: DefaultAvatar) => (a.tone === undefined ? defaultAvatarToneOf(a.seed) : clampTone(a.tone));\n\n/** The file name of a picture in the set: `person-3` + 256 → `person-3-256.webp`; `svg` has no size. */\nexport function defaultAvatarFile(kind: DefaultAvatarKind, tone: number, size: DefaultAvatarSize | \"svg\"): string {\n  return size === \"svg\" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;\n}\n\n/**\n * The URL of a default avatar: `defaultAvatarUrl({ brand: \"orochia\", seed: user.id })`.\n * @param size 256 for lists, 512 for a profile; `\"svg\"` for the vector.\n * @param base Another host or version of the set (a self-hosted copy); the default is the Krizaka CDN.\n */\nexport function defaultAvatarUrl(avatar: DefaultAvatar, { size = 256, base = DEFAULT_AVATAR_BASE }: { size?: DefaultAvatarSize | \"svg\"; base?: string } = {}): string {\n  return `${base.replace(/\\/+$/, \"\")}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? \"person\", resolveTone(avatar), size)}`;\n}\n\n/** The SVG source of a default avatar, 512 × 512 and square (the Avatar clips it round). */\nexport function defaultAvatarSvg(avatar: DefaultAvatar): string {\n  const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));\n  const person =\n    (avatar.kind ?? \"person\") === \"person\"\n      ? `<circle cx=\"256\" cy=\"200\" r=\"86\" fill=\"#fff\" fill-opacity=\".92\"/><path d=\"M84 512c0-108 78-182 172-182s172 74 172 182z\" fill=\"#fff\" fill-opacity=\".92\"/>`\n      : \"\";\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/></linearGradient><radialGradient id=\"l\" cx=\".28\" cy=\".18\" r=\".85\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient></defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"/><rect width=\"512\" height=\"512\" fill=\"url(#l)\"/>${person}</svg>`;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/avatar/default-avatar.ts"],"sourcesContent":["// The default profile pictures of the Krizaka family: what a product shows when a person has no photo.\n// They are generated from this file (tools/export-brand.mjs renders them to SVG and WebP and uploads them to Bunny,\n// `people/defaults/v1/<brand>/…`), so the pictures and the URLs that name them cannot drift apart.\n\nexport type DefaultAvatarBrand = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */\nexport type DefaultAvatarKind = \"person\" | \"plain\";\nexport type DefaultAvatarSize = 256 | 512;\n\nexport const DEFAULT_AVATAR_BRANDS: readonly DefaultAvatarBrand[] = [\"krizaka\", \"orazaka\", \"orochia\", \"yasakia\", \"yororis\", \"yomizaka\", \"kachizaka\", \"akinaza\"];\nexport const DEFAULT_AVATAR_KINDS: readonly DefaultAvatarKind[] = [\"person\", \"plain\"];\nexport const DEFAULT_AVATAR_SIZES: readonly DefaultAvatarSize[] = [256, 512];\n/** How many tones each brand has: a person always gets the same one from their seed, so a list is not one colour. */\nexport const DEFAULT_AVATAR_TONES = 6;\n\n/** Where the set lives. `v1` is the set's version: a changed picture is a new version folder, never an overwrite. */\nexport const DEFAULT_AVATAR_BASE = \"https://krizaka-assets.b-cdn.net/people/defaults/v1\";\n\nexport interface DefaultAvatar {\n  /** The brand of the product showing the avatar: its gradient, its hues. */\n  brand: DefaultAvatarBrand;\n  /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */\n  seed?: string | number;\n  /** Force a tone, 1 to 6, instead of deriving it from `seed`. */\n  tone?: number;\n  /**\n   * `person` (default): a silhouette. `plain`: the gradient alone.\n   * @default \"person\"\n   */\n  kind?: DefaultAvatarKind;\n}\n\n/** The mark gradient of each brand (BRAND.md, `$extensions[\"com.krizaka\"].mark`) as [hue, saturation %, lightness %] and the hue spread of its tones. */\nconst BRANDS: Record<DefaultAvatarBrand, { from: [number, number, number]; to: [number, number, number]; spread: number }> = {\n  krizaka: { from: [217, 92, 53], to: [217, 92, 68], spread: 14 },\n  orazaka: { from: [26, 90.5, 37.1], to: [26, 92, 45], spread: 7 },\n  orochia: { from: [262.1, 83.3, 57.8], to: [328.6, 85.5, 70.2], spread: 12 },\n  yasakia: { from: [156, 92, 32], to: [178, 90, 32], spread: 12 },\n  yororis: { from: [34, 46, 44], to: [104, 28, 42], spread: 10 },\n  yomizaka: { from: [232, 50, 55], to: [248, 50, 58], spread: 10 },\n  kachizaka: { from: [226, 80, 56], to: [44, 92, 33], spread: 10 },\n  akinaza: { from: [140, 48, 34], to: [22, 60, 46], spread: 10 },\n};\n\n/** White on top of a stop must stay visible: a stop is darkened until the contrast reaches this (WCAG 1.4.11, non-text). */\nconst MIN_CONTRAST = 3.2;\nconst OFFSETS = [0, -1, 1, -2, 2, 3] as const;\n\nfunction hslToHex([h, s, l]: [number, number, number]): string {\n  const sat = s / 100;\n  const light = l / 100;\n  const k = (n: number) => (n + (((h % 360) + 360) % 360) / 30) % 12;\n  const a = sat * Math.min(light, 1 - light);\n  const channel = (n: number) => Math.round(255 * (light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));\n  return `#${[0, 8, 4].map((n) => channel(n).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nconst channelLuminance = (v: number) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);\nconst whiteContrast = (hex: string) => {\n  const [r, g, b] = [1, 3, 5].map((i) => channelLuminance(Number.parseInt(hex.slice(i, i + 2), 16) / 255));\n  return 1.05 / (0.2126 * r! + 0.7152 * g! + 0.0722 * b! + 0.05);\n};\n/** The stop, darkened one point of lightness at a time until white reads on it. */\nfunction readable([h, s, l]: [number, number, number]): string {\n  let hex = hslToHex([h, s, l]);\n  for (let light = l; whiteContrast(hex) < MIN_CONTRAST && light > 10; light -= 1) hex = hslToHex([h, s, light]);\n  return hex;\n}\n\n/** The two stops (hex) of tone `tone` (1 to 6) of a brand. */\nexport function defaultAvatarTone(brand: DefaultAvatarBrand, tone: number): readonly [string, string] {\n  const b = BRANDS[brand];\n  const o = OFFSETS[(clampTone(tone) - 1) % OFFSETS.length] * b.spread;\n  return [readable([b.from[0] + o, b.from[1], b.from[2]]), readable([b.to[0] + o, b.to[1], b.to[2]])];\n}\n\nconst clampTone = (tone: number) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));\n\n/** 1 to 6 from a seed (FNV-1a): stable across renders, devices and products. */\nexport function defaultAvatarToneOf(seed: string | number | undefined): number {\n  if (seed === undefined) return 1;\n  let h = 0x811c9dc5;\n  for (const ch of String(seed)) {\n    h ^= ch.codePointAt(0) ?? 0;\n    h = Math.imul(h, 0x01000193) >>> 0;\n  }\n  return (h % DEFAULT_AVATAR_TONES) + 1;\n}\n\nconst resolveTone = (a: DefaultAvatar) => (a.tone === undefined ? defaultAvatarToneOf(a.seed) : clampTone(a.tone));\n\n/** The file name of a picture in the set: `person-3` + 256 → `person-3-256.webp`; `svg` has no size. */\nexport function defaultAvatarFile(kind: DefaultAvatarKind, tone: number, size: DefaultAvatarSize | \"svg\"): string {\n  return size === \"svg\" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;\n}\n\n/** Linear on purpose: a `/\\/+$/` regex backtracks quadratically on a long run of slashes. */\nfunction trimTrailingSlashes(value: string): string {\n  let end = value.length;\n  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;\n  return value.slice(0, end);\n}\n\n/**\n * The URL of a default avatar: `defaultAvatarUrl({ brand: \"orochia\", seed: user.id })`.\n * @param size 256 for lists, 512 for a profile; `\"svg\"` for the vector.\n * @param base Another host or version of the set (a self-hosted copy); the default is the Krizaka CDN.\n */\nexport function defaultAvatarUrl(avatar: DefaultAvatar, { size = 256, base = DEFAULT_AVATAR_BASE }: { size?: DefaultAvatarSize | \"svg\"; base?: string } = {}): string {\n  return `${trimTrailingSlashes(base)}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? \"person\", resolveTone(avatar), size)}`;\n}\n\n/** The SVG source of a default avatar, 512 × 512 and square (the Avatar clips it round). */\nexport function defaultAvatarSvg(avatar: DefaultAvatar): string {\n  const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));\n  const person =\n    (avatar.kind ?? \"person\") === \"person\"\n      ? `<circle cx=\"256\" cy=\"200\" r=\"86\" fill=\"#fff\" fill-opacity=\".92\"/><path d=\"M84 512c0-108 78-182 172-182s172 74 172 182z\" fill=\"#fff\" fill-opacity=\".92\"/>`\n      : \"\";\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/></linearGradient><radialGradient id=\"l\" cx=\".28\" cy=\".18\" r=\".85\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient></defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"/><rect width=\"512\" height=\"512\" fill=\"url(#l)\"/>${person}</svg>`;\n}\n"],"mappings":"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","names":[]}

package/dist/avatar.js

@@ -60,8 +60,13 @@ var resolveTone = (a) => a.tone === void 0 ? defaultAvatarToneOf(a.seed) : clamp
 function defaultAvatarFile(kind, tone, size) {
   return size === "svg" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;
 }
+function trimTrailingSlashes(value) {
+  let end = value.length;
+  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;
+  return value.slice(0, end);
+}
 function defaultAvatarUrl(avatar2, { size = 256, base = DEFAULT_AVATAR_BASE } = {}) {
-  return `${base.replace(/\/+$/, "")}/${avatar2.brand}/${defaultAvatarFile(avatar2.kind ?? "person", resolveTone(avatar2), size)}`;
+  return `${trimTrailingSlashes(base)}/${avatar2.brand}/${defaultAvatarFile(avatar2.kind ?? "person", resolveTone(avatar2), size)}`;
 }
 function defaultAvatarSvg(avatar2) {
   const [from, to] = defaultAvatarTone(avatar2.brand, resolveTone(avatar2));

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/avatar/avatar.tsx","../src/avatar/default-avatar.ts"],"sourcesContent":["// Client: Radix tracks the image's loading state and shows the fallback until it has loaded (or when it fails).\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"./default-avatar\";\n\nconst avatar = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary\",\n    group: \"flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"h-5 w-5 text-[9px]\" },\n      sm: { root: \"h-8 w-8 text-xs\" },\n      md: { root: \"h-10 w-10 text-sm\" },\n      lg: { root: \"h-14 w-14 text-base\" },\n      xl: { root: \"h-20 w-20 text-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type AvatarSize = NonNullable<VariantProps<typeof avatar>[\"size\"]>;\n\nexport type AvatarProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */\n  alt?: string;\n  /** Shown while the image loads, when it fails or when there is none: initials, an icon. */\n  fallback?: React.ReactNode;\n  /** The picture to show instead when `src` is missing or fails to load (an image URL). The `fallback` still covers its own loading. */\n  fallbackSrc?: string;\n  /**\n   * The Krizaka default picture when the person has no photo (or it fails): their brand's gradient and a silhouette,\n   * one of six tones from `seed` — `defaultAvatar={{ brand: \"orochia\", seed: user.id }}`. `fallbackSrc` wins over it.\n   */\n  defaultAvatar?: DefaultAvatar;\n  /**\n   * xs · sm · md · lg · xl.\n   * @default \"md\"\n   */\n  size?: AvatarSize;\n};\n\nexport function AvatarRoot({ src, alt = \"\", fallback, fallbackSrc, defaultAvatar, size, className, ...props }: AvatarProps) {\n  const s = avatar({ size });\n  const [failed, setFailed] = React.useState<string | null>(null);\n  // 512 px for the big sizes, 256 for the others: sharp on a 2x screen either way.\n  const backup = fallbackSrc ?? (defaultAvatar ? defaultAvatarUrl(defaultAvatar, { size: size === \"xl\" || size === \"lg\" ? 512 : 256 }) : undefined);\n  const shown = src && failed !== src ? src : backup;\n  return (\n    <AvatarPrimitive.Root data-size={size ?? \"md\"} className={s.root({ className })} {...props}>\n      {shown && (\n        <AvatarPrimitive.Image\n          src={shown}\n          alt={alt}\n          className={s.image()}\n          onLoadingStatusChange={(status) => {\n            if (status === \"error\" && shown === src) setFailed(src);\n          }}\n        />\n      )}\n      <AvatarPrimitive.Fallback delayMs={shown ? 300 : 0} className={s.fallback()}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n}\n\nexport type AvatarGroupProps = React.ComponentProps<\"div\"> & {\n  /** How many avatars are shown; the rest becomes a `+n` avatar. */\n  max?: number;\n  /** The size of the `+n` avatar (match the avatars of the group). */\n  size?: AvatarSize;\n};\n\n/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */\nexport function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const shown = max === undefined ? items : items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <div className={avatar().group({ className })} {...props}>\n      {shown}\n      {rest > 0 && <AvatarRoot size={size} fallback={`+${rest}`} />}\n    </div>\n  );\n}\n\n/** `Avatar` (an image with a fallback) and `Avatar.Group`. */\nexport const Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });\n","// The default profile pictures of the Krizaka family: what a product shows when a person has no photo.\n// They are generated from this file (tools/export-brand.mjs renders them to SVG and WebP and uploads them to Bunny,\n// `people/defaults/v1/<brand>/…`), so the pictures and the URLs that name them cannot drift apart.\n\nexport type DefaultAvatarBrand = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */\nexport type DefaultAvatarKind = \"person\" | \"plain\";\nexport type DefaultAvatarSize = 256 | 512;\n\nexport const DEFAULT_AVATAR_BRANDS: readonly DefaultAvatarBrand[] = [\"krizaka\", \"orazaka\", \"orochia\", \"yasakia\", \"yororis\", \"yomizaka\", \"kachizaka\", \"akinaza\"];\nexport const DEFAULT_AVATAR_KINDS: readonly DefaultAvatarKind[] = [\"person\", \"plain\"];\nexport const DEFAULT_AVATAR_SIZES: readonly DefaultAvatarSize[] = [256, 512];\n/** How many tones each brand has: a person always gets the same one from their seed, so a list is not one colour. */\nexport const DEFAULT_AVATAR_TONES = 6;\n\n/** Where the set lives. `v1` is the set's version: a changed picture is a new version folder, never an overwrite. */\nexport const DEFAULT_AVATAR_BASE = \"https://krizaka-assets.b-cdn.net/people/defaults/v1\";\n\nexport interface DefaultAvatar {\n  /** The brand of the product showing the avatar: its gradient, its hues. */\n  brand: DefaultAvatarBrand;\n  /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */\n  seed?: string | number;\n  /** Force a tone, 1 to 6, instead of deriving it from `seed`. */\n  tone?: number;\n  /**\n   * `person` (default): a silhouette. `plain`: the gradient alone.\n   * @default \"person\"\n   */\n  kind?: DefaultAvatarKind;\n}\n\n/** The mark gradient of each brand (BRAND.md, `$extensions[\"com.krizaka\"].mark`) as [hue, saturation %, lightness %] and the hue spread of its tones. */\nconst BRANDS: Record<DefaultAvatarBrand, { from: [number, number, number]; to: [number, number, number]; spread: number }> = {\n  krizaka: { from: [217, 92, 53], to: [217, 92, 68], spread: 14 },\n  orazaka: { from: [26, 90.5, 37.1], to: [26, 92, 45], spread: 7 },\n  orochia: { from: [262.1, 83.3, 57.8], to: [328.6, 85.5, 70.2], spread: 12 },\n  yasakia: { from: [156, 92, 32], to: [178, 90, 32], spread: 12 },\n  yororis: { from: [34, 46, 44], to: [104, 28, 42], spread: 10 },\n  yomizaka: { from: [232, 50, 55], to: [248, 50, 58], spread: 10 },\n  kachizaka: { from: [226, 80, 56], to: [44, 92, 33], spread: 10 },\n  akinaza: { from: [140, 48, 34], to: [22, 60, 46], spread: 10 },\n};\n\n/** White on top of a stop must stay visible: a stop is darkened until the contrast reaches this (WCAG 1.4.11, non-text). */\nconst MIN_CONTRAST = 3.2;\nconst OFFSETS = [0, -1, 1, -2, 2, 3] as const;\n\nfunction hslToHex([h, s, l]: [number, number, number]): string {\n  const sat = s / 100;\n  const light = l / 100;\n  const k = (n: number) => (n + (((h % 360) + 360) % 360) / 30) % 12;\n  const a = sat * Math.min(light, 1 - light);\n  const channel = (n: number) => Math.round(255 * (light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));\n  return `#${[0, 8, 4].map((n) => channel(n).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nconst channelLuminance = (v: number) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);\nconst whiteContrast = (hex: string) => {\n  const [r, g, b] = [1, 3, 5].map((i) => channelLuminance(Number.parseInt(hex.slice(i, i + 2), 16) / 255));\n  return 1.05 / (0.2126 * r! + 0.7152 * g! + 0.0722 * b! + 0.05);\n};\n/** The stop, darkened one point of lightness at a time until white reads on it. */\nfunction readable([h, s, l]: [number, number, number]): string {\n  let hex = hslToHex([h, s, l]);\n  for (let light = l; whiteContrast(hex) < MIN_CONTRAST && light > 10; light -= 1) hex = hslToHex([h, s, light]);\n  return hex;\n}\n\n/** The two stops (hex) of tone `tone` (1 to 6) of a brand. */\nexport function defaultAvatarTone(brand: DefaultAvatarBrand, tone: number): readonly [string, string] {\n  const b = BRANDS[brand];\n  const o = OFFSETS[(clampTone(tone) - 1) % OFFSETS.length] * b.spread;\n  return [readable([b.from[0] + o, b.from[1], b.from[2]]), readable([b.to[0] + o, b.to[1], b.to[2]])];\n}\n\nconst clampTone = (tone: number) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));\n\n/** 1 to 6 from a seed (FNV-1a): stable across renders, devices and products. */\nexport function defaultAvatarToneOf(seed: string | number | undefined): number {\n  if (seed === undefined) return 1;\n  let h = 0x811c9dc5;\n  for (const ch of String(seed)) {\n    h ^= ch.codePointAt(0) ?? 0;\n    h = Math.imul(h, 0x01000193) >>> 0;\n  }\n  return (h % DEFAULT_AVATAR_TONES) + 1;\n}\n\nconst resolveTone = (a: DefaultAvatar) => (a.tone === undefined ? defaultAvatarToneOf(a.seed) : clampTone(a.tone));\n\n/** The file name of a picture in the set: `person-3` + 256 → `person-3-256.webp`; `svg` has no size. */\nexport function defaultAvatarFile(kind: DefaultAvatarKind, tone: number, size: DefaultAvatarSize | \"svg\"): string {\n  return size === \"svg\" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;\n}\n\n/**\n * The URL of a default avatar: `defaultAvatarUrl({ brand: \"orochia\", seed: user.id })`.\n * @param size 256 for lists, 512 for a profile; `\"svg\"` for the vector.\n * @param base Another host or version of the set (a self-hosted copy); the default is the Krizaka CDN.\n */\nexport function defaultAvatarUrl(avatar: DefaultAvatar, { size = 256, base = DEFAULT_AVATAR_BASE }: { size?: DefaultAvatarSize | \"svg\"; base?: string } = {}): string {\n  return `${base.replace(/\\/+$/, \"\")}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? \"person\", resolveTone(avatar), size)}`;\n}\n\n/** The SVG source of a default avatar, 512 × 512 and square (the Avatar clips it round). */\nexport function defaultAvatarSvg(avatar: DefaultAvatar): string {\n  const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));\n  const person =\n    (avatar.kind ?? \"person\") === \"person\"\n      ? `<circle cx=\"256\" cy=\"200\" r=\"86\" fill=\"#fff\" fill-opacity=\".92\"/><path d=\"M84 512c0-108 78-182 172-182s172 74 172 182z\" fill=\"#fff\" fill-opacity=\".92\"/>`\n      : \"\";\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/></linearGradient><radialGradient id=\"l\" cx=\".28\" cy=\".18\" r=\".85\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient></defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"/><rect width=\"512\" height=\"512\" fill=\"url(#l)\"/>${person}</svg>`;\n}\n"],"mappings":"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","names":["avatar"]}
+{"version":3,"sources":["../src/avatar/avatar.tsx","../src/avatar/default-avatar.ts"],"sourcesContent":["// Client: Radix tracks the image's loading state and shows the fallback until it has loaded (or when it fails).\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"./default-avatar\";\n\nconst avatar = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary\",\n    group: \"flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"h-5 w-5 text-[9px]\" },\n      sm: { root: \"h-8 w-8 text-xs\" },\n      md: { root: \"h-10 w-10 text-sm\" },\n      lg: { root: \"h-14 w-14 text-base\" },\n      xl: { root: \"h-20 w-20 text-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type AvatarSize = NonNullable<VariantProps<typeof avatar>[\"size\"]>;\n\nexport type AvatarProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */\n  alt?: string;\n  /** Shown while the image loads, when it fails or when there is none: initials, an icon. */\n  fallback?: React.ReactNode;\n  /** The picture to show instead when `src` is missing or fails to load (an image URL). The `fallback` still covers its own loading. */\n  fallbackSrc?: string;\n  /**\n   * The Krizaka default picture when the person has no photo (or it fails): their brand's gradient and a silhouette,\n   * one of six tones from `seed` — `defaultAvatar={{ brand: \"orochia\", seed: user.id }}`. `fallbackSrc` wins over it.\n   */\n  defaultAvatar?: DefaultAvatar;\n  /**\n   * xs · sm · md · lg · xl.\n   * @default \"md\"\n   */\n  size?: AvatarSize;\n};\n\nexport function AvatarRoot({ src, alt = \"\", fallback, fallbackSrc, defaultAvatar, size, className, ...props }: AvatarProps) {\n  const s = avatar({ size });\n  const [failed, setFailed] = React.useState<string | null>(null);\n  // 512 px for the big sizes, 256 for the others: sharp on a 2x screen either way.\n  const backup = fallbackSrc ?? (defaultAvatar ? defaultAvatarUrl(defaultAvatar, { size: size === \"xl\" || size === \"lg\" ? 512 : 256 }) : undefined);\n  const shown = src && failed !== src ? src : backup;\n  return (\n    <AvatarPrimitive.Root data-size={size ?? \"md\"} className={s.root({ className })} {...props}>\n      {shown && (\n        <AvatarPrimitive.Image\n          src={shown}\n          alt={alt}\n          className={s.image()}\n          onLoadingStatusChange={(status) => {\n            if (status === \"error\" && shown === src) setFailed(src);\n          }}\n        />\n      )}\n      <AvatarPrimitive.Fallback delayMs={shown ? 300 : 0} className={s.fallback()}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n}\n\nexport type AvatarGroupProps = React.ComponentProps<\"div\"> & {\n  /** How many avatars are shown; the rest becomes a `+n` avatar. */\n  max?: number;\n  /** The size of the `+n` avatar (match the avatars of the group). */\n  size?: AvatarSize;\n};\n\n/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */\nexport function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const shown = max === undefined ? items : items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <div className={avatar().group({ className })} {...props}>\n      {shown}\n      {rest > 0 && <AvatarRoot size={size} fallback={`+${rest}`} />}\n    </div>\n  );\n}\n\n/** `Avatar` (an image with a fallback) and `Avatar.Group`. */\nexport const Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });\n","// The default profile pictures of the Krizaka family: what a product shows when a person has no photo.\n// They are generated from this file (tools/export-brand.mjs renders them to SVG and WebP and uploads them to Bunny,\n// `people/defaults/v1/<brand>/…`), so the pictures and the URLs that name them cannot drift apart.\n\nexport type DefaultAvatarBrand = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n/** `person`: a neutral silhouette. `plain`: the brand's gradient alone, ready for initials. */\nexport type DefaultAvatarKind = \"person\" | \"plain\";\nexport type DefaultAvatarSize = 256 | 512;\n\nexport const DEFAULT_AVATAR_BRANDS: readonly DefaultAvatarBrand[] = [\"krizaka\", \"orazaka\", \"orochia\", \"yasakia\", \"yororis\", \"yomizaka\", \"kachizaka\", \"akinaza\"];\nexport const DEFAULT_AVATAR_KINDS: readonly DefaultAvatarKind[] = [\"person\", \"plain\"];\nexport const DEFAULT_AVATAR_SIZES: readonly DefaultAvatarSize[] = [256, 512];\n/** How many tones each brand has: a person always gets the same one from their seed, so a list is not one colour. */\nexport const DEFAULT_AVATAR_TONES = 6;\n\n/** Where the set lives. `v1` is the set's version: a changed picture is a new version folder, never an overwrite. */\nexport const DEFAULT_AVATAR_BASE = \"https://krizaka-assets.b-cdn.net/people/defaults/v1\";\n\nexport interface DefaultAvatar {\n  /** The brand of the product showing the avatar: its gradient, its hues. */\n  brand: DefaultAvatarBrand;\n  /** Any stable text or number of the person (their id): the same seed gives the same tone everywhere. */\n  seed?: string | number;\n  /** Force a tone, 1 to 6, instead of deriving it from `seed`. */\n  tone?: number;\n  /**\n   * `person` (default): a silhouette. `plain`: the gradient alone.\n   * @default \"person\"\n   */\n  kind?: DefaultAvatarKind;\n}\n\n/** The mark gradient of each brand (BRAND.md, `$extensions[\"com.krizaka\"].mark`) as [hue, saturation %, lightness %] and the hue spread of its tones. */\nconst BRANDS: Record<DefaultAvatarBrand, { from: [number, number, number]; to: [number, number, number]; spread: number }> = {\n  krizaka: { from: [217, 92, 53], to: [217, 92, 68], spread: 14 },\n  orazaka: { from: [26, 90.5, 37.1], to: [26, 92, 45], spread: 7 },\n  orochia: { from: [262.1, 83.3, 57.8], to: [328.6, 85.5, 70.2], spread: 12 },\n  yasakia: { from: [156, 92, 32], to: [178, 90, 32], spread: 12 },\n  yororis: { from: [34, 46, 44], to: [104, 28, 42], spread: 10 },\n  yomizaka: { from: [232, 50, 55], to: [248, 50, 58], spread: 10 },\n  kachizaka: { from: [226, 80, 56], to: [44, 92, 33], spread: 10 },\n  akinaza: { from: [140, 48, 34], to: [22, 60, 46], spread: 10 },\n};\n\n/** White on top of a stop must stay visible: a stop is darkened until the contrast reaches this (WCAG 1.4.11, non-text). */\nconst MIN_CONTRAST = 3.2;\nconst OFFSETS = [0, -1, 1, -2, 2, 3] as const;\n\nfunction hslToHex([h, s, l]: [number, number, number]): string {\n  const sat = s / 100;\n  const light = l / 100;\n  const k = (n: number) => (n + (((h % 360) + 360) % 360) / 30) % 12;\n  const a = sat * Math.min(light, 1 - light);\n  const channel = (n: number) => Math.round(255 * (light - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)))));\n  return `#${[0, 8, 4].map((n) => channel(n).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nconst channelLuminance = (v: number) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);\nconst whiteContrast = (hex: string) => {\n  const [r, g, b] = [1, 3, 5].map((i) => channelLuminance(Number.parseInt(hex.slice(i, i + 2), 16) / 255));\n  return 1.05 / (0.2126 * r! + 0.7152 * g! + 0.0722 * b! + 0.05);\n};\n/** The stop, darkened one point of lightness at a time until white reads on it. */\nfunction readable([h, s, l]: [number, number, number]): string {\n  let hex = hslToHex([h, s, l]);\n  for (let light = l; whiteContrast(hex) < MIN_CONTRAST && light > 10; light -= 1) hex = hslToHex([h, s, light]);\n  return hex;\n}\n\n/** The two stops (hex) of tone `tone` (1 to 6) of a brand. */\nexport function defaultAvatarTone(brand: DefaultAvatarBrand, tone: number): readonly [string, string] {\n  const b = BRANDS[brand];\n  const o = OFFSETS[(clampTone(tone) - 1) % OFFSETS.length] * b.spread;\n  return [readable([b.from[0] + o, b.from[1], b.from[2]]), readable([b.to[0] + o, b.to[1], b.to[2]])];\n}\n\nconst clampTone = (tone: number) => Math.min(DEFAULT_AVATAR_TONES, Math.max(1, Math.round(tone)));\n\n/** 1 to 6 from a seed (FNV-1a): stable across renders, devices and products. */\nexport function defaultAvatarToneOf(seed: string | number | undefined): number {\n  if (seed === undefined) return 1;\n  let h = 0x811c9dc5;\n  for (const ch of String(seed)) {\n    h ^= ch.codePointAt(0) ?? 0;\n    h = Math.imul(h, 0x01000193) >>> 0;\n  }\n  return (h % DEFAULT_AVATAR_TONES) + 1;\n}\n\nconst resolveTone = (a: DefaultAvatar) => (a.tone === undefined ? defaultAvatarToneOf(a.seed) : clampTone(a.tone));\n\n/** The file name of a picture in the set: `person-3` + 256 → `person-3-256.webp`; `svg` has no size. */\nexport function defaultAvatarFile(kind: DefaultAvatarKind, tone: number, size: DefaultAvatarSize | \"svg\"): string {\n  return size === \"svg\" ? `${kind}-${tone}.svg` : `${kind}-${tone}-${size}.webp`;\n}\n\n/** Linear on purpose: a `/\\/+$/` regex backtracks quadratically on a long run of slashes. */\nfunction trimTrailingSlashes(value: string): string {\n  let end = value.length;\n  while (end > 0 && value.charCodeAt(end - 1) === 47) end--;\n  return value.slice(0, end);\n}\n\n/**\n * The URL of a default avatar: `defaultAvatarUrl({ brand: \"orochia\", seed: user.id })`.\n * @param size 256 for lists, 512 for a profile; `\"svg\"` for the vector.\n * @param base Another host or version of the set (a self-hosted copy); the default is the Krizaka CDN.\n */\nexport function defaultAvatarUrl(avatar: DefaultAvatar, { size = 256, base = DEFAULT_AVATAR_BASE }: { size?: DefaultAvatarSize | \"svg\"; base?: string } = {}): string {\n  return `${trimTrailingSlashes(base)}/${avatar.brand}/${defaultAvatarFile(avatar.kind ?? \"person\", resolveTone(avatar), size)}`;\n}\n\n/** The SVG source of a default avatar, 512 × 512 and square (the Avatar clips it round). */\nexport function defaultAvatarSvg(avatar: DefaultAvatar): string {\n  const [from, to] = defaultAvatarTone(avatar.brand, resolveTone(avatar));\n  const person =\n    (avatar.kind ?? \"person\") === \"person\"\n      ? `<circle cx=\"256\" cy=\"200\" r=\"86\" fill=\"#fff\" fill-opacity=\".92\"/><path d=\"M84 512c0-108 78-182 172-182s172 74 172 182z\" fill=\"#fff\" fill-opacity=\".92\"/>`\n      : \"\";\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width=\"512\" height=\"512\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"${from}\"/><stop offset=\"1\" stop-color=\"${to}\"/></linearGradient><radialGradient id=\"l\" cx=\".28\" cy=\".18\" r=\".85\"><stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".24\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></radialGradient></defs><rect width=\"512\" height=\"512\" fill=\"url(#g)\"/><rect width=\"512\" height=\"512\" fill=\"url(#l)\"/>${person}</svg>`;\n}\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAA6B;;;ACM/B,IAAM,wBAAuD,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,YAAY,aAAa,SAAS;AACvJ,IAAM,uBAAqD,CAAC,UAAU,OAAO;AAC7E,IAAM,uBAAqD,CAAC,KAAK,GAAG;AAEpE,IAAM,uBAAuB;AAG7B,IAAM,sBAAsB;AAiBnC,IAAM,SAAuH;AAAA,EAC3H,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,QAAQ,GAAG;AAAA,EAC9D,SAAS,EAAE,MAAM,CAAC,IAAI,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,QAAQ,EAAE;AAAA,EAC/D,SAAS,EAAE,MAAM,CAAC,OAAO,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,MAAM,IAAI,GAAG,QAAQ,GAAG;AAAA,EAC1E,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,QAAQ,GAAG;AAAA,EAC9D,SAAS,EAAE,MAAM,CAAC,IAAI,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,QAAQ,GAAG;AAAA,EAC7D,UAAU,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,GAAG,QAAQ,GAAG;AAAA,EAC/D,WAAW,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,QAAQ,GAAG;AAAA,EAC/D,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,GAAG,QAAQ,GAAG;AAC/D;AAGA,IAAM,eAAe;AACrB,IAAM,UAAU,CAAC,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC;AAEnC,SAAS,SAAS,CAAC,GAAG,GAAG,CAAC,GAAqC;AAC7D,QAAM,MAAM,IAAI;AAChB,QAAM,QAAQ,IAAI;AAClB,QAAM,IAAI,CAAC,OAAe,KAAO,IAAI,MAAO,OAAO,MAAO,MAAM;AAChE,QAAM,IAAI,MAAM,KAAK,IAAI,OAAO,IAAI,KAAK;AACzC,QAAM,UAAU,CAAC,MAAc,KAAK,MAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC,IAAI,GAAG,KAAK,IAAI,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;AACrH,SAAO,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACpF;AAEA,IAAM,mBAAmB,CAAC,MAAe,KAAK,UAAU,IAAI,UAAU,IAAI,SAAS,UAAU;AAC7F,IAAM,gBAAgB,CAAC,QAAgB;AACrC,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,iBAAiB,OAAO,SAAS,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,GAAG,CAAC;AACvG,SAAO,QAAQ,SAAS,IAAK,SAAS,IAAK,SAAS,IAAK;AAC3D;AAEA,SAAS,SAAS,CAAC,GAAG,GAAG,CAAC,GAAqC;AAC7D,MAAI,MAAM,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;AAC5B,WAAS,QAAQ,GAAG,cAAc,GAAG,IAAI,gBAAgB,QAAQ,IAAI,SAAS,EAAG,OAAM,SAAS,CAAC,GAAG,GAAG,KAAK,CAAC;AAC7G,SAAO;AACT;AAGO,SAAS,kBAAkB,OAA2B,MAAyC;AACpG,QAAM,IAAI,OAAO,KAAK;AACtB,QAAM,IAAI,SAAS,UAAU,IAAI,IAAI,KAAK,QAAQ,MAAM,IAAI,EAAE;AAC9D,SAAO,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;AACpG;AAEA,IAAM,YAAY,CAAC,SAAiB,KAAK,IAAI,sBAAsB,KAAK,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC;AAGzF,SAAS,oBAAoB,MAA2C;AAC7E,MAAI,SAAS,OAAW,QAAO;AAC/B,MAAI,IAAI;AACR,aAAW,MAAM,OAAO,IAAI,GAAG;AAC7B,SAAK,GAAG,YAAY,CAAC,KAAK;AAC1B,QAAI,KAAK,KAAK,GAAG,QAAU,MAAM;AAAA,EACnC;AACA,SAAQ,IAAI,uBAAwB;AACtC;AAEA,IAAM,cAAc,CAAC,MAAsB,EAAE,SAAS,SAAY,oBAAoB,EAAE,IAAI,IAAI,UAAU,EAAE,IAAI;AAGzG,SAAS,kBAAkB,MAAyB,MAAc,MAAyC;AAChH,SAAO,SAAS,QAAQ,GAAG,IAAI,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI;AACzE;AAGA,SAAS,oBAAoB,OAAuB;AAClD,MAAI,MAAM,MAAM;AAChB,SAAO,MAAM,KAAK,MAAM,WAAW,MAAM,CAAC,MAAM,GAAI;AACpD,SAAO,MAAM,MAAM,GAAG,GAAG;AAC3B;AAOO,SAAS,iBAAiBA,SAAuB,EAAE,OAAO,KAAK,OAAO,oBAAoB,IAAyD,CAAC,GAAW;AACpK,SAAO,GAAG,oBAAoB,IAAI,CAAC,IAAIA,QAAO,KAAK,IAAI,kBAAkBA,QAAO,QAAQ,UAAU,YAAYA,OAAM,GAAG,IAAI,CAAC;AAC9H;AAGO,SAAS,iBAAiBA,SAA+B;AAC9D,QAAM,CAAC,MAAM,EAAE,IAAI,kBAAkBA,QAAO,OAAO,YAAYA,OAAM,CAAC;AACtE,QAAM,UACHA,QAAO,QAAQ,cAAc,WAC1B,6JACA;AACN,SAAO,gLAAgL,IAAI,mCAAmC,EAAE,0SAA0S,MAAM;AAClhB;;;ADhEI,SAEI,KAFJ;AAjDJ,IAAM,SAAS,GAAG;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,qBAAqB;AAAA,MACjC,IAAI,EAAE,MAAM,kBAAkB;AAAA,MAC9B,IAAI,EAAE,MAAM,oBAAoB;AAAA,MAChC,IAAI,EAAE,MAAM,sBAAsB;AAAA,MAClC,IAAI,EAAE,MAAM,oBAAoB;AAAA,IAClC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAyBM,SAAS,WAAW,EAAE,KAAK,MAAM,IAAI,UAAU,aAAa,eAAe,MAAM,WAAW,GAAG,MAAM,GAAgB;AAC1H,QAAM,IAAI,OAAO,EAAE,KAAK,CAAC;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAwB,IAAI;AAE9D,QAAM,SAAS,gBAAgB,gBAAgB,iBAAiB,eAAe,EAAE,MAAM,SAAS,QAAQ,SAAS,OAAO,MAAM,IAAI,CAAC,IAAI;AACvI,QAAM,QAAQ,OAAO,WAAW,MAAM,MAAM;AAC5C,SACE,qBAAC,gBAAgB,MAAhB,EAAqB,aAAW,QAAQ,MAAM,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,aACC;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW,EAAE,MAAM;AAAA,QACnB,uBAAuB,CAAC,WAAW;AACjC,cAAI,WAAW,WAAW,UAAU,IAAK,WAAU,GAAG;AAAA,QACxD;AAAA;AAAA,IACF;AAAA,IAEF,oBAAC,gBAAgB,UAAhB,EAAyB,SAAS,QAAQ,MAAM,GAAG,WAAW,EAAE,SAAS,GACvE,oBACH;AAAA,KACF;AAEJ;AAUO,SAAS,YAAY,EAAE,KAAK,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1F,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,QAAM,QAAQ,QAAQ,SAAY,QAAQ,MAAM,MAAM,GAAG,GAAG;AAC5D,QAAM,OAAO,MAAM,SAAS,MAAM;AAClC,SACE,qBAAC,SAAI,WAAW,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAChD;AAAA;AAAA,IACA,OAAO,KAAK,oBAAC,cAAW,MAAY,UAAU,IAAI,IAAI,IAAI;AAAA,KAC7D;AAEJ;AAGO,IAAM,SAAS,OAAO,OAAO,YAAY,EAAE,OAAO,YAAY,CAAC;","names":["avatar"]}

package/dist/blocks.css

@@ -177,6 +177,17 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-cards[data-align="start"] { align-items: start; }
 .kz-cards-cell { display: grid; min-width: 0; }
 
+/* A foundation (CardGrid `foundation`): one wide card, a hairline stem, and a frame around the cards that stand on it. */
+.kz-foundation { --kz-rail: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 50%, var(--kz-border-default)); display: grid; }
+.kz-foundation-base { position: relative; display: grid; min-width: 0; }
+.kz-foundation-base::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--kz-rail); }
+.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: 24px; }
+.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
+.kz-foundation[data-position="end"] .kz-foundation-base { order: 2; }
+.kz-foundation[data-position="end"] .kz-foundation-group { order: 1; margin-top: 0; margin-bottom: 28px; }
+.kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
+@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: 20px; } }
+
 /* The shared surface of the cards: a rail of the hue along the top, the light that follows the pointer (PointerLight
    writes --kz-pointer-x/y), a lift and a lit border under the pointer or the focus. */
 .kz-block-card {

package/dist/card-grid.d.ts

@@ -35,8 +35,21 @@ type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
     light?: boolean;
     /** `ul` when the cards are a list (each cell an `li`). */
     as?: "div" | "ul" | "ol";
+    /**
+     * A foundation: one wide card that the cards of the grid stand on (an engine, a platform, a shared service). It spans
+     * the full width beside the grid, and a hairline joins it to a frame around the cards — "everything inside runs on it".
+     * The frame takes the hue of `className` (a `data-hue` or a brand class on the grid sets it for the whole block).
+     */
+    foundation?: React.ReactNode;
+    /**
+     * Where the foundation sits: above the cards, or under them.
+     * @default "start"
+     */
+    foundationPosition?: "start" | "end";
+    /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */
+    foundationLabel?: React.ReactNode;
 };
 /** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */
-declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, className, style, ...props }: CardGridProps): React.JSX.Element;
+declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, foundation, foundationPosition, foundationLabel, className, style, ...props }: CardGridProps): React.JSX.Element;
 
 export { CardGrid, type CardGridProps };

package/dist/card-grid.js

@@ -9,20 +9,35 @@ import {
 
 // src/card-grid/card-grid.tsx
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var STEP_MS = 70;
-function CardGrid({ children, min = 300, fit = "fill", align = "stretch", reveal = true, columns = 3, light = true, as: Tag = "div", className, style, ...props }) {
+function CardGrid({
+  children,
+  min = 300,
+  fit = "fill",
+  align = "stretch",
+  reveal = true,
+  columns = 3,
+  light = true,
+  as: Tag = "div",
+  foundation,
+  foundationPosition = "start",
+  foundationLabel,
+  className,
+  style,
+  ...props
+}) {
   const ref = React.useRef(null);
   usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);
   const Cell = Tag === "div" ? "div" : "li";
-  return /* @__PURE__ */ jsx(
+  const grid = /* @__PURE__ */ jsx(
     Tag,
     {
-      ref,
-      className: cn("kz-cards", className),
+      ref: foundation ? void 0 : ref,
+      className: cn("kz-cards", !foundation && className),
       "data-fit": fit === "fit" ? "" : void 0,
       "data-align": align === "start" ? "start" : void 0,
-      style: { "--kz-cards-min": `${min}px`, ...style },
+      style: { "--kz-cards-min": `${min}px`, ...foundation ? null : style },
       ...props,
       children: React.Children.toArray(children).map((child, i) => {
         const step = Math.min(i % Math.max(columns, 1), 5);
@@ -39,6 +54,14 @@ function CardGrid({ children, min = 300, fit = "fill", align = "stretch", reveal
       })
     }
   );
+  if (!foundation) return grid;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("kz-foundation", className), "data-position": foundationPosition, style, children: [
+    /* @__PURE__ */ jsx("div", { className: "kz-foundation-base", "data-reveal": reveal ? "" : void 0, children: foundation }),
+    /* @__PURE__ */ jsxs("div", { className: "kz-foundation-group", children: [
+      foundationLabel && /* @__PURE__ */ jsx("span", { className: "kz-foundation-label", children: foundationLabel }),
+      grid
+    ] })
+  ] });
 }
 var NO_REF = { current: null };
 export {

package/dist/card-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/card-grid/card-grid.tsx"],"sourcesContent":["// Client (the pointer's light). A responsive grid of cards (blocks.css): one column on a phone, the cells of a row\n// share their height, each card rises once as it enters the viewport — staggered by column — and the pointer carries a\n// light over the card it is on.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { POINTER_LIGHT_TARGET, usePointerLight } from \"../pointer-light/pointer-light\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The cards: one cell each. */\n  children: React.ReactNode;\n  /**\n   * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n   * @default 300\n   */\n  min?: number;\n  /**\n   * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n   * @default \"fill\"\n   */\n  fit?: \"fill\" | \"fit\";\n  /**\n   * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n   * @default \"stretch\"\n   */\n  align?: \"stretch\" | \"start\";\n  /**\n   * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n   * @default true\n   */\n  reveal?: boolean;\n  /**\n   * The columns the stagger counts (the delay restarts on every row).\n   * @default 3\n   */\n  columns?: number;\n  /**\n   * The light that follows the pointer over the cards (`[data-kz-light]`).\n   * @default true\n   */\n  light?: boolean;\n  /** `ul` when the cards are a list (each cell an `li`). */\n  as?: \"div\" | \"ul\" | \"ol\";\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */\nexport function CardGrid({ children, min = 300, fit = \"fill\", align = \"stretch\", reveal = true, columns = 3, light = true, as: Tag = \"div\", className, style, ...props }: CardGridProps) {\n  const ref = React.useRef<HTMLElement>(null);\n  usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);\n  const Cell = Tag === \"div\" ? \"div\" : \"li\";\n  return (\n    <Tag\n      ref={ref as React.Ref<never>}\n      className={cn(\"kz-cards\", className)}\n      data-fit={fit === \"fit\" ? \"\" : undefined}\n      data-align={align === \"start\" ? \"start\" : undefined}\n      style={{ \"--kz-cards-min\": `${min}px`, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, i) => {\n        const step = Math.min(i % Math.max(columns, 1), 5);\n        return (\n          <Cell\n            key={React.isValidElement(child) && child.key != null ? child.key : i}\n            className=\"kz-cards-cell\"\n            data-reveal={reveal ? \"\" : undefined}\n            style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n          >\n            {child}\n          </Cell>\n        );\n      })}\n    </Tag>\n  );\n}\n\nconst NO_REF: React.RefObject<HTMLElement | null> = { current: null };\n"],"mappings":";;;;;;;;;;AAGA,YAAY,WAAW;AA6Db;AAxDV,IAAM,UAAU;AAwCT,SAAS,SAAS,EAAE,UAAU,MAAM,KAAK,MAAM,QAAQ,QAAQ,WAAW,SAAS,MAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,MAAM,OAAO,WAAW,OAAO,GAAG,MAAM,GAAkB;AACvL,QAAM,MAAY,aAAoB,IAAI;AAC1C,kBAAgB,QAAQ,MAAM,QAAQ,oBAAoB;AAC1D,QAAM,OAAO,QAAQ,QAAQ,QAAQ;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,YAAU,QAAQ,QAAQ,KAAK;AAAA,MAC/B,cAAY,UAAU,UAAU,UAAU;AAAA,MAC1C,OAAO,EAAE,kBAAkB,GAAG,GAAG,MAAM,GAAG,MAAM;AAAA,MAC/C,GAAG;AAAA,MAEH,UAAM,eAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,MAAM;AAClD,cAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,SAAS,KAAK;AAAA,YAC3B,OAAO,UAAU,OAAQ,EAAE,cAAc,GAAG,OAAO,OAAO,KAAK,IAA4B;AAAA,YAE1F;AAAA;AAAA,UALU,qBAAe,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM;AAAA,QAMtE;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,SAA8C,EAAE,SAAS,KAAK;","names":[]}
+{"version":3,"sources":["../src/card-grid/card-grid.tsx"],"sourcesContent":["// Client (the pointer's light). A responsive grid of cards (blocks.css): one column on a phone, the cells of a row\n// share their height, each card rises once as it enters the viewport — staggered by column — and the pointer carries a\n// light over the card it is on.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { POINTER_LIGHT_TARGET, usePointerLight } from \"../pointer-light/pointer-light\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The cards: one cell each. */\n  children: React.ReactNode;\n  /**\n   * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n   * @default 300\n   */\n  min?: number;\n  /**\n   * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n   * @default \"fill\"\n   */\n  fit?: \"fill\" | \"fit\";\n  /**\n   * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n   * @default \"stretch\"\n   */\n  align?: \"stretch\" | \"start\";\n  /**\n   * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n   * @default true\n   */\n  reveal?: boolean;\n  /**\n   * The columns the stagger counts (the delay restarts on every row).\n   * @default 3\n   */\n  columns?: number;\n  /**\n   * The light that follows the pointer over the cards (`[data-kz-light]`).\n   * @default true\n   */\n  light?: boolean;\n  /** `ul` when the cards are a list (each cell an `li`). */\n  as?: \"div\" | \"ul\" | \"ol\";\n  /**\n   * A foundation: one wide card that the cards of the grid stand on (an engine, a platform, a shared service). It spans\n   * the full width beside the grid, and a hairline joins it to a frame around the cards — \"everything inside runs on it\".\n   * The frame takes the hue of `className` (a `data-hue` or a brand class on the grid sets it for the whole block).\n   */\n  foundation?: React.ReactNode;\n  /**\n   * Where the foundation sits: above the cards, or under them.\n   * @default \"start\"\n   */\n  foundationPosition?: \"start\" | \"end\";\n  /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */\n  foundationLabel?: React.ReactNode;\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */\nexport function CardGrid({\n  children,\n  min = 300,\n  fit = \"fill\",\n  align = \"stretch\",\n  reveal = true,\n  columns = 3,\n  light = true,\n  as: Tag = \"div\",\n  foundation,\n  foundationPosition = \"start\",\n  foundationLabel,\n  className,\n  style,\n  ...props\n}: CardGridProps) {\n  const ref = React.useRef<HTMLElement>(null);\n  usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);\n  const Cell = Tag === \"div\" ? \"div\" : \"li\";\n  const grid = (\n    <Tag\n      ref={foundation ? undefined : (ref as React.Ref<never>)}\n      className={cn(\"kz-cards\", !foundation && className)}\n      data-fit={fit === \"fit\" ? \"\" : undefined}\n      data-align={align === \"start\" ? \"start\" : undefined}\n      style={{ \"--kz-cards-min\": `${min}px`, ...(foundation ? null : style) } as React.CSSProperties}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, i) => {\n        const step = Math.min(i % Math.max(columns, 1), 5);\n        return (\n          <Cell\n            key={React.isValidElement(child) && child.key != null ? child.key : i}\n            className=\"kz-cards-cell\"\n            data-reveal={reveal ? \"\" : undefined}\n            style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n          >\n            {child}\n          </Cell>\n        );\n      })}\n    </Tag>\n  );\n  if (!foundation) return grid;\n  return (\n    <div ref={ref as React.Ref<HTMLDivElement>} className={cn(\"kz-foundation\", className)} data-position={foundationPosition} style={style}>\n      <div className=\"kz-foundation-base\" data-reveal={reveal ? \"\" : undefined}>\n        {foundation}\n      </div>\n      <div className=\"kz-foundation-group\">\n        {foundationLabel && <span className=\"kz-foundation-label\">{foundationLabel}</span>}\n        {grid}\n      </div>\n    </div>\n  );\n}\n\nconst NO_REF: React.RefObject<HTMLElement | null> = { current: null };\n"],"mappings":";;;;;;;;;;AAGA,YAAY,WAAW;AAyFb,cAkBJ,YAlBI;AApFV,IAAM,UAAU;AAqDT,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,IAAI,MAAM;AAAA,EACV;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,MAAY,aAAoB,IAAI;AAC1C,kBAAgB,QAAQ,MAAM,QAAQ,oBAAoB;AAC1D,QAAM,OAAO,QAAQ,QAAQ,QAAQ;AACrC,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,aAAa,SAAa;AAAA,MAC/B,WAAW,GAAG,YAAY,CAAC,cAAc,SAAS;AAAA,MAClD,YAAU,QAAQ,QAAQ,KAAK;AAAA,MAC/B,cAAY,UAAU,UAAU,UAAU;AAAA,MAC1C,OAAO,EAAE,kBAAkB,GAAG,GAAG,MAAM,GAAI,aAAa,OAAO,MAAO;AAAA,MACrE,GAAG;AAAA,MAEH,UAAM,eAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,MAAM;AAClD,cAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,CAAC;AACjD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,SAAS,KAAK;AAAA,YAC3B,OAAO,UAAU,OAAQ,EAAE,cAAc,GAAG,OAAO,OAAO,KAAK,IAA4B;AAAA,YAE1F;AAAA;AAAA,UALU,qBAAe,KAAK,KAAK,MAAM,OAAO,OAAO,MAAM,MAAM;AAAA,QAMtE;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEF,MAAI,CAAC,WAAY,QAAO;AACxB,SACE,qBAAC,SAAI,KAAuC,WAAW,GAAG,iBAAiB,SAAS,GAAG,iBAAe,oBAAoB,OACxH;AAAA,wBAAC,SAAI,WAAU,sBAAqB,eAAa,SAAS,KAAK,QAC5D,sBACH;AAAA,IACA,qBAAC,SAAI,WAAU,uBACZ;AAAA,yBAAmB,oBAAC,UAAK,WAAU,uBAAuB,2BAAgB;AAAA,MAC1E;AAAA,OACH;AAAA,KACF;AAEJ;AAEA,IAAM,SAA8C,EAAE,SAAS,KAAK;","names":[]}

package/dist/chat.d.ts

@@ -14,8 +14,14 @@ declare const chat: tailwind_variants.TVReturnType<{
             typing?: tailwind_variants.ClassValue;
             dot?: tailwind_variants.ClassValue;
             composer?: tailwind_variants.ClassValue;
+            pillRoot?: tailwind_variants.ClassValue;
+            pillLeading?: tailwind_variants.ClassValue;
+            pillStatus?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            pill?: tailwind_variants.ClassValue;
+            pillInput?: tailwind_variants.ClassValue;
+            pillSend?: tailwind_variants.ClassValue;
         };
     };
 } | {
@@ -31,8 +37,14 @@ declare const chat: tailwind_variants.TVReturnType<{
             typing?: tailwind_variants.ClassValue;
             dot?: tailwind_variants.ClassValue;
             composer?: tailwind_variants.ClassValue;
+            pillRoot?: tailwind_variants.ClassValue;
+            pillLeading?: tailwind_variants.ClassValue;
+            pillStatus?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            pill?: tailwind_variants.ClassValue;
+            pillInput?: tailwind_variants.ClassValue;
+            pillSend?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -46,6 +58,12 @@ declare const chat: tailwind_variants.TVReturnType<{
     composer: string;
     input: string;
     send: string;
+    pillRoot: string;
+    pill: string;
+    pillLeading: string;
+    pillInput: string;
+    pillSend: string;
+    pillStatus: string;
     item: string;
     count: string;
 }, undefined, {
@@ -61,8 +79,14 @@ declare const chat: tailwind_variants.TVReturnType<{
             typing?: tailwind_variants.ClassValue;
             dot?: tailwind_variants.ClassValue;
             composer?: tailwind_variants.ClassValue;
+            pillRoot?: tailwind_variants.ClassValue;
+            pillLeading?: tailwind_variants.ClassValue;
+            pillStatus?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            pill?: tailwind_variants.ClassValue;
+            pillInput?: tailwind_variants.ClassValue;
+            pillSend?: tailwind_variants.ClassValue;
         };
     };
 } | {}, {
@@ -76,6 +100,12 @@ declare const chat: tailwind_variants.TVReturnType<{
     composer: string;
     input: string;
     send: string;
+    pillRoot: string;
+    pill: string;
+    pillLeading: string;
+    pillInput: string;
+    pillSend: string;
+    pillStatus: string;
     item: string;
     count: string;
 }, tailwind_variants.TVReturnTypeLike<unknown, {
@@ -89,6 +119,12 @@ declare const chat: tailwind_variants.TVReturnType<{
     composer: string;
     input: string;
     send: string;
+    pillRoot: string;
+    pill: string;
+    pillLeading: string;
+    pillInput: string;
+    pillSend: string;
+    pillStatus: string;
     item: string;
     count: string;
 }>>;
@@ -144,17 +180,29 @@ type MessageComposerProps = {
     placeholder: string;
     /** The send button's name (“Send”). */
     sendLabel: string;
-    /** Before the input: an attach button. */
+    /** Before the input: an attach button (`bar`), or the mode/model chip and attach, inside the field (`pill`). */
     leading?: React.ReactNode;
     /** Cannot write: the reason in its place. */
     disabledReason?: string;
     /** The longest message. Default 4000. */
     maxLength?: number;
+    /** `bar`: a docked bar with a square-ish field. `pill`: one rounded field holding `leading`, the text and a round send button — no inner border. Default `bar`. */
+    variant?: "bar" | "pill";
+    /** `pill`: the quiet line under the field (privacy, cost estimate). Its row is always reserved, so a changing line never moves the field. Read politely. */
+    status?: React.ReactNode;
+    /** An answer is on its way: the send is held (and `aria-busy` is set) while the field stays where it is, size included. */
+    busy?: boolean;
+    /** Overrides “the draft has text” — e.g. an attachment alone can be sent. A busy composer never sends. */
+    canSend?: boolean;
+    /** Attributes (`data-testid`, `autoFocus`, `id`…) forwarded to the textarea. */
+    inputProps?: Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "onChange" | "placeholder" | "maxLength" | "className" | "rows">;
+    /** Attributes forwarded to the send button. */
+    sendProps?: Omit<React.ComponentPropsWithoutRef<"button">, "type" | "disabled" | "className" | "aria-label">;
     /** Classes merged on the root. */
     className?: string;
 };
-/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. */
-declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength, className }: MessageComposerProps): React.JSX.Element;
+/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. The `pill` variant is the one-field look of the Krizaka chat card. */
+declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength, variant, status, busy, canSend, inputProps, sendProps, className, }: MessageComposerProps): React.JSX.Element;
 type ConversationItemProps = {
     /** The other person's name. */
     name: string;

package/dist/chat.js

@@ -2,7 +2,7 @@
 import "./chunk-NPF3OHE2.js";
 import {
   Avatar
-} from "./chunk-YIBKJ36L.js";
+} from "./chunk-KB7OLYIJ.js";
 
 // src/chat/chat.tsx
 import { tv } from "tailwind-variants";
@@ -19,6 +19,12 @@ var chat = tv({
     composer: "flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2",
     input: "max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-default bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     send: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]",
+    pillRoot: "flex w-full flex-col gap-2",
+    pill: "flex items-end gap-1.5 rounded-[1.75rem] border border-border-default bg-surface-1 py-1.5 pl-2 pr-1.5 transition-colors focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
+    pillLeading: "flex min-h-9 shrink-0 items-center gap-1 self-end",
+    pillInput: "max-h-32 min-h-9 min-w-0 flex-1 resize-none border-0 bg-transparent px-1.5 py-[7px] text-sm leading-snug text-fg placeholder:text-fg-muted focus:outline-hidden focus-visible:outline-hidden",
+    pillSend: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent shadow-sm transition-colors hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1 disabled:cursor-not-allowed disabled:bg-surface-3 disabled:text-fg-muted disabled:shadow-none [&>svg]:h-4 [&>svg]:w-4",
+    pillStatus: "m-0 flex min-h-5 items-center gap-1.5 px-3 text-xs text-fg-secondary [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:shrink-0",
     item: "flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
     count: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-extrabold text-on-accent"
   }
@@ -60,42 +66,68 @@ function TypingIndicator({ label, showLabel, className }) {
     /* @__PURE__ */ jsx("span", { className: showLabel ? "text-xs text-fg-secondary" : "sr-only", children: label })
   ] });
 }
-function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4e3, className }) {
+function MessageComposer({
+  value,
+  onValueChange,
+  onSend,
+  placeholder,
+  sendLabel,
+  leading,
+  disabledReason,
+  maxLength = 4e3,
+  variant = "bar",
+  status,
+  busy = false,
+  canSend,
+  inputProps,
+  sendProps,
+  className
+}) {
   const s = chat();
-  const ready = value.trim().length > 0;
-  return /* @__PURE__ */ jsx(
-    "form",
+  const pill = variant === "pill";
+  const ready = !busy && (canSend ?? value.trim().length > 0);
+  const textarea = /* @__PURE__ */ jsx(
+    "textarea",
     {
-      className: s.composer({ className }),
-      onSubmit: (e) => {
-        e.preventDefault();
-        if (ready) onSend();
+      "aria-label": placeholder,
+      placeholder,
+      rows: 1,
+      maxLength,
+      ...inputProps,
+      value,
+      onChange: (e) => onValueChange(e.target.value),
+      onKeyDown: (e) => {
+        inputProps?.onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+          e.preventDefault();
+          if (ready) onSend();
+        }
       },
-      children: disabledReason ? /* @__PURE__ */ jsx("p", { className: "m-0 flex-1 py-2 text-sm text-fg-secondary", children: disabledReason }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        leading,
-        /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            "aria-label": placeholder,
-            placeholder,
-            rows: 1,
-            maxLength,
-            value,
-            onChange: (e) => onValueChange(e.target.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-                e.preventDefault();
-                if (ready) onSend();
-              }
-            },
-            className: s.input(),
-            style: { fieldSizing: "content" }
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "submit", "aria-label": sendLabel, disabled: !ready, className: s.send(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 12l16-8-6 16-2.5-6.5L4 12z" }) }) })
-      ] })
+      className: pill ? s.pillInput() : s.input(),
+      style: { fieldSizing: "content" }
     }
   );
+  const send = /* @__PURE__ */ jsx("button", { type: "submit", "aria-label": sendLabel, ...sendProps, disabled: !ready, className: pill ? s.pillSend() : s.send(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 12l16-8-6 16-2.5-6.5L4 12z" }) }) });
+  const submit = (e) => {
+    e.preventDefault();
+    if (ready) onSend();
+  };
+  if (pill) {
+    return /* @__PURE__ */ jsxs("form", { className: s.pillRoot({ className }), onSubmit: submit, "aria-busy": busy || void 0, children: [
+      disabledReason ? /* @__PURE__ */ jsx("p", { className: "m-0 rounded-[1.75rem] border border-border-default bg-surface-1 px-4 py-2.5 text-sm text-fg-secondary", children: disabledReason }) : /* @__PURE__ */ jsxs("div", { className: s.pill(), children: [
+        leading ? /* @__PURE__ */ jsx("div", { className: s.pillLeading(), children: leading }) : null,
+        textarea,
+        send
+      ] }),
+      /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", className: s.pillStatus(), children: status })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("form", { className: s.composer({ className }), onSubmit: submit, "aria-busy": busy || void 0, children: disabledReason ? /* @__PURE__ */ jsx("p", { className: "m-0 flex-1 py-2 text-sm text-fg-secondary", children: disabledReason }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading,
+    textarea,
+    send
+  ] }) });
 }
 function ConversationItem({ name, avatar, preview, typing, time, unread = 0, unreadLabel, online, onlineLabel, href, onSelect, className }) {
   const s = chat();