kang-components 0.9.5 → 0.9.7

package/dist/animated-height.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+export interface AnimatedHeightProps {
+    children: ReactNode;
+}
+/**
+ * Wraps children in a container that smoothly animates height changes.
+ * Uses ResizeObserver to detect content size changes and react-spring
+ * to animate the container height. First measurement is immediate
+ * (no animation); subsequent changes animate with SPRING_RESPONSIVE.
+ *
+ * Domain-free layout primitive — lives in kang so every app animates
+ * expand/collapse with the same physics. Falls back to `auto` height where
+ * ResizeObserver is unavailable.
+ */
+export declare const AnimatedHeight: ({ children }: AnimatedHeightProps) => ReactElement;
+//# sourceMappingURL=animated-height.d.ts.map

package/dist/animated-height.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height.d.ts","sourceRoot":"","sources":["../src/animated-height.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI7E,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,KAAG,YAoClE,CAAC"}

package/dist/animated-height.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { SPRING_RESPONSIVE } from './spring.js';
+/**
+ * Wraps children in a container that smoothly animates height changes.
+ * Uses ResizeObserver to detect content size changes and react-spring
+ * to animate the container height. First measurement is immediate
+ * (no animation); subsequent changes animate with SPRING_RESPONSIVE.
+ *
+ * Domain-free layout primitive — lives in kang so every app animates
+ * expand/collapse with the same physics. Falls back to `auto` height where
+ * ResizeObserver is unavailable.
+ */
+export const AnimatedHeight = ({ children }) => {
+    const contentRef = useRef(null);
+    const initializedRef = useRef(false);
+    const [isReady, setIsReady] = useState(false);
+    const [spring, api] = useSpring(() => ({ height: 0 }));
+    useEffect(() => {
+        const el = contentRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const newHeight = entry.contentRect.height;
+            if (!initializedRef.current) {
+                initializedRef.current = true;
+                api.set({ height: newHeight });
+                setIsReady(true);
+                return;
+            }
+            api.start({ height: newHeight, config: SPRING_RESPONSIVE });
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [api]);
+    return (_jsx(animated.div, { style: { overflow: 'hidden', height: isReady ? spring.height : 'auto' }, children: _jsx("div", { ref: contentRef, children: children }) }));
+};
+//# sourceMappingURL=animated-height.js.map

package/dist/animated-height.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-height.js","sourceRoot":"","sources":["../src/animated-height.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAuB,EAAgB,EAAE;IACjF,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,EAAE,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAEzD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK;gBAAE,OAAO;YACnB,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;YAE3C,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;gBAC7B,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC9B,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;gBAC/B,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,OAAO;YACR,CAAC;YAED,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACN,KAAC,QAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,YACpF,cAAK,GAAG,EAAE,UAAU,YAClB,QAAQ,GACJ,GACQ,CACf,CAAC;AACH,CAAC,CAAC"}

package/dist/confetti.d.ts

@@ -0,0 +1,29 @@
+export interface ConfettiProps {
+    /** When true, the burst plays once on mount. */
+    active: boolean;
+    /** Optional text tokens (characters / phonics) sprinkled among the shapes. */
+    tokens?: string[];
+    /** Total number of pieces. */
+    count?: number;
+    /** Approximate lifetime of the burst in ms. */
+    durationMs?: number;
+}
+/**
+ * Lightweight, dependency-free celebratory confetti. Pieces are GPU-animated
+ * via a single CSS keyframe; per-piece motion is randomized through inline CSS
+ * custom properties (in pixels). Mix in text tokens to rain played
+ * characters/phonics.
+ *
+ * Rendered through a portal to <body> as a viewport-fixed overlay so it lives
+ * outside any fixed/overflow/contain subtree — that nesting was freezing the
+ * fall mid-viewport on iOS Safari.
+ *
+ * The burst is computed ONCE when it starts (active false→true) and frozen for
+ * its lifetime. Incidental re-renders must not re-roll the pieces: callers may
+ * derive `tokens` from objects whose identity churns (e.g. GunJS emits).
+ * Recomputing mid-fall would change each piece's animation target
+ * (--start/--dx/--dist/duration) while the keyframe is in flight, which
+ * stalls/jumps the pieces mid-viewport on iOS.
+ */
+export declare function Confetti({ active, tokens, count, durationMs }: ConfettiProps): import("react").ReactPortal | null;
+//# sourceMappingURL=confetti.d.ts.map

package/dist/confetti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confetti.d.ts","sourceRoot":"","sources":["../src/confetti.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,aAAa;IAC7B,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;IAChB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAqDD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAU,EAAE,UAAiB,EAAE,EAAE,aAAa,sCA0DxF"}

package/dist/confetti.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { tilePalette } from './tile-palette.js';
+import { ConfettiLayer, ConfettiPiece } from './confetti.styles.js';
+/** Airy pastel fills for the shape pieces — the shared word-tile palette. */
+const SHAPE_COLORS = tilePalette.map((color) => color.bg);
+/** Saturated tones for text pieces so glyphs stay legible on light surfaces. */
+const TEXT_COLORS = [
+    '#1976D2', '#388E3C', '#8E24AA', '#F4511E',
+    '#0097A7', '#F9A825', '#5E35B1', '#039BE5',
+];
+/**
+ * Build one immutable burst of pieces. Travel is computed in PIXELS from the
+ * current viewport (never vh/vw, which iOS recomputes when its address bar
+ * collapses). Called once when a burst starts; the result is frozen for the
+ * lifetime of that burst (see the component below).
+ */
+function buildPieces(tokens, count, durationMs) {
+    const toks = tokens?.filter(Boolean) ?? [];
+    const vh = typeof window !== 'undefined' ? window.innerHeight : 800;
+    const vw = typeof window !== 'undefined' ? window.innerWidth : 400;
+    return Array.from({ length: count }, (_, i) => {
+        // Roughly 55% text pieces when tokens are available.
+        const useText = toks.length > 0 && i % 9 < 5;
+        const text = useText ? toks[i % toks.length] : null;
+        return {
+            key: i,
+            text,
+            color: useText
+                ? TEXT_COLORS[i % TEXT_COLORS.length]
+                : SHAPE_COLORS[i % SHAPE_COLORS.length],
+            startX: 50 + (Math.random() * 44 - 22), // start near center, spread out
+            start: -vh * 0.12, // above the viewport
+            drift: (Math.random() * 2 - 1) * vw * 0.5, // px left/right
+            dist: vh * (0.95 + Math.random() * 0.35), // px — comfortably past the bottom
+            rot: (Math.random() * 6 - 3) * 360, // deg
+            delay: Math.random() * 260, // ms
+            dur: durationMs * (0.7 + Math.random() * 0.5),
+            size: 7 + Math.random() * 8,
+            round: Math.random() > 0.6,
+        };
+    });
+}
+/**
+ * Lightweight, dependency-free celebratory confetti. Pieces are GPU-animated
+ * via a single CSS keyframe; per-piece motion is randomized through inline CSS
+ * custom properties (in pixels). Mix in text tokens to rain played
+ * characters/phonics.
+ *
+ * Rendered through a portal to <body> as a viewport-fixed overlay so it lives
+ * outside any fixed/overflow/contain subtree — that nesting was freezing the
+ * fall mid-viewport on iOS Safari.
+ *
+ * The burst is computed ONCE when it starts (active false→true) and frozen for
+ * its lifetime. Incidental re-renders must not re-roll the pieces: callers may
+ * derive `tokens` from objects whose identity churns (e.g. GunJS emits).
+ * Recomputing mid-fall would change each piece's animation target
+ * (--start/--dx/--dist/duration) while the keyframe is in flight, which
+ * stalls/jumps the pieces mid-viewport on iOS.
+ */
+export function Confetti({ active, tokens, count = 64, durationMs = 2600 }) {
+    const [pieces, setPieces] = useState([]);
+    const [visible, setVisible] = useState(false);
+    // Latest tokens, read only at burst start so token-identity churn during a
+    // burst never reaches buildPieces.
+    const tokensRef = useRef(tokens);
+    tokensRef.current = tokens;
+    useEffect(() => {
+        if (!active) {
+            setVisible(false);
+            return;
+        }
+        setPieces(buildPieces(tokensRef.current, count, durationMs));
+        setVisible(true);
+        const longest = durationMs * 1.2 + 300;
+        const t = setTimeout(() => setVisible(false), longest);
+        return () => clearTimeout(t);
+    }, [active, count, durationMs]);
+    if (!visible || typeof document === 'undefined')
+        return null;
+    const layer = (_jsx(ConfettiLayer, { "aria-hidden": "true", children: pieces.map((p) => {
+            const base = {
+                left: `${p.startX}%`,
+                animationDelay: `${p.delay}ms`,
+                animationDuration: `${p.dur}ms`,
+                ['--start']: `${p.start}px`,
+                ['--dx']: `${p.drift}px`,
+                ['--dist']: `${p.dist}px`,
+                ['--rot']: `${p.rot}deg`,
+            };
+            const visual = p.text
+                ? {
+                    color: p.color,
+                    fontSize: `${p.size + 8}px`,
+                    fontWeight: 800,
+                    lineHeight: 1,
+                }
+                : {
+                    background: p.color,
+                    width: `${p.size}px`,
+                    height: `${p.size * 1.4}px`,
+                    borderRadius: p.round ? '50%' : '2px',
+                };
+            return (_jsx(ConfettiPiece, { style: { ...base, ...visual }, children: p.text }, p.key));
+        }) }));
+    return createPortal(layer, document.body);
+}
+//# sourceMappingURL=confetti.js.map

package/dist/confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confetti.js","sourceRoot":"","sources":["../src/confetti.tsx"],"names":[],"mappings":"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"}

package/dist/confetti.styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Viewport-fixed overlay. Rendered via a portal to <body> so it sits OUTSIDE
+ * any `position: fixed` + `overflow: hidden` + `contain: layout` subtree — that
+ * nesting is what froze the piece animations mid-fall on iOS (compositing
+ * desync inside a fixed/clipped ancestor during scroll/toolbar settle). At the
+ * document root the pieces composite against the viewport and animate to
+ * completion.
+ */
+export declare const ConfettiLayer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ConfettiPiece: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+//# sourceMappingURL=confetti.styles.d.ts.map

package/dist/confetti.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confetti.styles.d.ts","sourceRoot":"","sources":["../src/confetti.styles.ts"],"names":[],"mappings":"AA6BA;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,uVAMzB,CAAC;AAEF,eAAO,MAAM,aAAa,2VAkBzB,CAAC"}

package/dist/confetti.styles.js

@@ -0,0 +1,62 @@
+// Named import (not the default) so styled-components resolves consistently
+// when this file is consumed as a published node_modules ESM module.
+import { styled, keyframes } from 'styled-components';
+/**
+ * Falls from just above the top, drifting sideways and rotating, then fades.
+ * Per-piece motion comes from CSS custom properties set inline, all in PIXELS
+ * (computed once at burst time) — NOT viewport units. iOS Safari recomputes
+ * `vh`/`vw` when its address bar collapses, which desynced/stalled the
+ * animation mid-fall; fixed pixel targets avoid that entirely.
+ *   --start  starting Y (negative px, above viewport)
+ *   --dx     horizontal drift (px)
+ *   --dist   fall distance (px, comfortably past the bottom edge)
+ *   --rot    rotation (deg)
+ */
+const fall = keyframes `
+	0% {
+		transform: translate3d(0, var(--start, -120px), 0) rotateZ(0deg);
+		opacity: 0;
+	}
+	8% {
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(var(--dx, 0), var(--dist, 900px), 0) rotateZ(var(--rot, 360deg));
+		opacity: 0;
+	}
+`;
+/**
+ * Viewport-fixed overlay. Rendered via a portal to <body> so it sits OUTSIDE
+ * any `position: fixed` + `overflow: hidden` + `contain: layout` subtree — that
+ * nesting is what froze the piece animations mid-fall on iOS (compositing
+ * desync inside a fixed/clipped ancestor during scroll/toolbar settle). At the
+ * document root the pieces composite against the viewport and animate to
+ * completion.
+ */
+export const ConfettiLayer = styled.div `
+	position: fixed;
+	inset: 0;
+	overflow: hidden;
+	pointer-events: none;
+	z-index: 2147483000;
+`;
+export const ConfettiPiece = styled.span `
+	position: absolute;
+	top: 0;
+	display: block;
+	white-space: nowrap;
+	user-select: none;
+	will-change: transform, opacity;
+	animation-name: ${fall};
+	animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
+	/* 'both' applies the 0% keyframe during the start delay, so each piece waits
+	   above the viewport (opacity 0) instead of sitting visibly at the top. */
+	animation-fill-mode: both;
+	animation-iteration-count: 1;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+		display: none;
+	}
+`;
+//# sourceMappingURL=confetti.styles.js.map

package/dist/confetti.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confetti.styles.js","sourceRoot":"","sources":["../src/confetti.styles.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,qEAAqE;AACrE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAG,SAAS,CAAA;;;;;;;;;;;;CAYrB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;mBAOrB,IAAI;;;;;;;;;;;CAWtB,CAAC"}

package/dist/index.d.ts

@@ -23,6 +23,10 @@ export { default as ToggleSwitch } from './toggle-switch.js';
 export type { ToggleSwitchProps } from './toggle-switch.js';
 export { ConfirmDialog } from './confirm-dialog.js';
 export type { ConfirmDialogProps } from './confirm-dialog.js';
+export { Confetti } from './confetti.js';
+export type { ConfettiProps } from './confetti.js';
+export { AnimatedHeight } from './animated-height.js';
+export type { AnimatedHeightProps } from './animated-height.js';
 export { BottomSheet } from './bottom-sheet.js';
 export type { BottomSheetProps } from './bottom-sheet.js';
 export { SearchField } from './search-field.js';
@@ -33,6 +37,8 @@ export { buildTheme, theme, hexToRgb } from './theme.js';
 export type { ThemeType } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';
 export type { ModeColorPalette } from './palettes.js';
+export { tilePalette, tileColorIndex, tileColorForKey } from './tile-palette.js';
+export type { TileColor } from './tile-palette.js';
 export type { DynamicLanguage, CharacterPreference, StaticLanguage, } from './language.js';
 export { ListItem, UnorderedListItemContainer } from './list-item.js';
 export type { ListItemProps, ListItemIconName, ListItemActionName, } from './list-item.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -12,10 +12,13 @@ export { default as BannerButton } from './banner-button.js';
 export { Badge } from './badge.js';
 export { default as ToggleSwitch } from './toggle-switch.js';
 export { ConfirmDialog } from './confirm-dialog.js';
+export { Confetti } from './confetti.js';
+export { AnimatedHeight } from './animated-height.js';
 export { BottomSheet } from './bottom-sheet.js';
 export { SearchField } from './search-field.js';
 export { SearchBar } from './search-bar.js';
 export { buildTheme, theme, hexToRgb } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';
+export { tilePalette, tileColorIndex, tileColorForKey } from './tile-palette.js';
 export { ListItem, UnorderedListItemContainer } from './list-item.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASjF,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/tile-palette.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Word-tile palette — the airy pastel fills used behind tappable word tiles,
+ * flashcards, browse-grid cells and celebratory confetti.
+ *
+ * These eight pastels are **mode-independent**: they read on both light and
+ * dark surfaces and always pair with near-black text, so they live here as a
+ * standalone constant rather than inside `ModeColorPalette` (which is per-mode).
+ *
+ * This is the single source of truth. It was previously copy-pasted across six
+ * xunzi surfaces; consumers should import `tilePalette` / `tileColorForKey`
+ * instead of redeclaring the hex values or the hashing logic. An app that needs
+ * a different look should compose an explicit override, not fork the palette.
+ */
+/** A tile fill paired with the text color that stays legible on it. */
+export interface TileColor {
+    bg: string;
+    text: string;
+}
+/** The eight airy pastels, in stable order (index is part of the contract). */
+export declare const tilePalette: readonly TileColor[];
+/**
+ * Deterministic index into {@link tilePalette} for an arbitrary key — the same
+ * key always maps to the same color, so a given word keeps its tile color
+ * everywhere it appears. Preserves the historical
+ * `(hash + charCodeAt) * 31` algorithm the xunzi copies used.
+ */
+export declare function tileColorIndex(key: string): number;
+/** Deterministic tile color for a key (see {@link tileColorIndex}). */
+export declare function tileColorForKey(key: string): TileColor;
+//# sourceMappingURL=tile-palette.d.ts.map

package/dist/tile-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-palette.d.ts","sourceRoot":"","sources":["../src/tile-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,uEAAuE;AACvE,MAAM,WAAW,SAAS;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACb;AAED,+EAA+E;AAC/E,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAS3C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAMlD;AAED,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAEtD"}

package/dist/tile-palette.js

@@ -0,0 +1,42 @@
+/**
+ * Word-tile palette — the airy pastel fills used behind tappable word tiles,
+ * flashcards, browse-grid cells and celebratory confetti.
+ *
+ * These eight pastels are **mode-independent**: they read on both light and
+ * dark surfaces and always pair with near-black text, so they live here as a
+ * standalone constant rather than inside `ModeColorPalette` (which is per-mode).
+ *
+ * This is the single source of truth. It was previously copy-pasted across six
+ * xunzi surfaces; consumers should import `tilePalette` / `tileColorForKey`
+ * instead of redeclaring the hex values or the hashing logic. An app that needs
+ * a different look should compose an explicit override, not fork the palette.
+ */
+/** The eight airy pastels, in stable order (index is part of the contract). */
+export const tilePalette = [
+    { bg: '#90CAF9', text: '#1A1A1A' }, // Soft blue
+    { bg: '#A5D6A7', text: '#1A1A1A' }, // Mint
+    { bg: '#CE93D8', text: '#1A1A1A' }, // Lavender
+    { bg: '#FFAB91', text: '#1A1A1A' }, // Peach
+    { bg: '#80DEEA', text: '#1A1A1A' }, // Light teal
+    { bg: '#FFF59D', text: '#1A1A1A' }, // Butter
+    { bg: '#B39DDB', text: '#1A1A1A' }, // Wisteria
+    { bg: '#81D4FA', text: '#1A1A1A' }, // Sky
+];
+/**
+ * Deterministic index into {@link tilePalette} for an arbitrary key — the same
+ * key always maps to the same color, so a given word keeps its tile color
+ * everywhere it appears. Preserves the historical
+ * `(hash + charCodeAt) * 31` algorithm the xunzi copies used.
+ */
+export function tileColorIndex(key) {
+    let hash = 0;
+    for (let i = 0; i < key.length; i++) {
+        hash = (hash + key.charCodeAt(i)) * 31;
+    }
+    return Math.abs(hash) % tilePalette.length;
+}
+/** Deterministic tile color for a key (see {@link tileColorIndex}). */
+export function tileColorForKey(key) {
+    return tilePalette[tileColorIndex(key)];
+}
+//# sourceMappingURL=tile-palette.js.map

package/dist/tile-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-palette.js","sourceRoot":"","sources":["../src/tile-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAQH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,WAAW,GAAyB;IAChD,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,YAAY;IAChD,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,OAAO;IAC3C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW;IAC/C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,QAAQ;IAC5C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,aAAa;IACjD,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,SAAS;IAC7C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW;IAC/C,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,MAAM;CAC1C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,GAAW;IACzC,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,IAAI,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACxC,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC;AAC5C,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,eAAe,CAAC,GAAW;IAC1C,OAAO,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACzC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kang-components",
-	"version": "0.9.5",
+	"version": "0.9.7",
 	"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
 	"type": "module",
 	"license": "MIT",