chesai-ui 0.16.3 → 0.16.4

package/dist/components/charts/bar-chart.d.ts

@@ -10,5 +10,7 @@ export interface BarChartProps extends ChartProps {
     highlightShape?: ShapeType;
     /** Custom overlay icon centered in the badge. Defaults to a checkmark. */
     highlightIcon?: React.ReactNode;
+    /** Show a distinctive baseline reference line at y = 0 */
+    showBaseline?: boolean;
 }
-export declare const BarChart: ({ data, categories, index, variant, shape, colors, height, className, valueFormatter, scrollable, minWidth, highlightKey, highlightColor, highlightShape, highlightIcon, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ data, categories, index, variant, shape, colors, height, className, valueFormatter, scrollable, minWidth, highlightKey, highlightColor, highlightShape, highlightIcon, showBaseline, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/bar-chart.mjs

@@ -1,33 +1,37 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { ResponsiveContainer as E, BarChart as P, CartesianGrid as T, XAxis as D, YAxis as F, Tooltip as M, Bar as O, Cell as R } from "recharts";
-import { ChartTooltip as W } from "./chart-tooltip.mjs";
-import { chartGridConfig as _, chartAxisConfig as y, getColorForIndex as I } from "./chart-utils.mjs";
-import { clsx as X } from "clsx";
-import { motion as Y } from "framer-motion";
-import { SHAPE_PATHS as v } from "../shape/paths.mjs";
-const rr = ({
-  data: l,
-  categories: w,
-  index: k,
-  variant: d = "primary",
-  shape: m = "minimal",
-  colors: A,
-  height: B = 300,
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { ResponsiveContainer as R, BarChart as z, CartesianGrid as M, XAxis as W, YAxis as O, Tooltip as X, ReferenceLine as U, Bar as V, Cell as Y } from "recharts";
+import { ChartTooltip as Z } from "./chart-tooltip.mjs";
+import { chartGridConfig as q, chartAxisConfig as C, getColorForIndex as J, EASE_EXPRESSIVE_DEFAULT_SPATIAL as Q, EASE_EMPHASIZED as K } from "./chart-utils.mjs";
+import { clsx as tt } from "clsx";
+import { motion as rt } from "framer-motion";
+import { SHAPE_PATHS as E } from "../shape/paths.mjs";
+import { useTheme as et } from "../../context/ThemeProvider.mjs";
+const ft = ({
+  data: d,
+  categories: A,
+  index: S,
+  variant: m = "primary",
+  shape: h = "minimal",
+  colors: w,
+  height: k = 300,
   className: H,
-  valueFormatter: $ = (t) => `${t}`,
-  scrollable: h = !1,
-  minWidth: L = 500,
-  highlightKey: o,
-  highlightColor: j = "var(--md-sys-color-tertiary, #4ADE80)",
-  highlightShape: f = "flower",
-  highlightIcon: p
+  valueFormatter: L = (r) => `${r}`,
+  scrollable: f = !1,
+  minWidth: N = 500,
+  highlightKey: i,
+  highlightColor: B = "var(--md-sys-color-tertiary, #4ADE80)",
+  highlightShape: u = "flower",
+  highlightIcon: p,
+  showBaseline: P = !1
 }) => {
-  const t = d === "ghost", u = d === "secondary", G = () => m === "sharp" ? [0, 0, 0, 0] : m === "full" ? [999, 999, 999, 999] : [4, 4, 4, 4], N = (n) => {
-    const { x: e, y: c, width: i, index: a } = n, x = l[a];
-    if (!(o ? !!x[o] : !1) || t) return null;
-    const s = Math.min(i * 0.75, 32), S = e + i / 2 - s / 2, C = c + 6, z = f ? v[f] : v.flower;
-    return /* @__PURE__ */ r(
-      Y.g,
+  const r = m === "ghost", g = m === "secondary", { animationStyle: T } = et(), x = T === "expressive", _ = x ? Q : K, $ = x ? 1e3 : 550, j = () => h === "sharp" ? [0, 0, 0, 0] : h === "full" ? [999, 999, 999, 999] : [4, 4, 4, 4], D = (a) => {
+    const { x: o, y: l, width: n, height: s, value: v, index: c } = a, F = d[c];
+    if (!(i ? !!F[i] : !1) || r || s === 0) return null;
+    const e = Math.min(n * 0.75, 32), G = o + n / 2 - e / 2, y = v < 0 ? l + s - e - 6 : l + 6;
+    if (s < e + 12) return null;
+    const I = u ? E[u] : E.flower;
+    return /* @__PURE__ */ t(
+      rt.g,
       {
         className: "pointer-events-none",
         initial: { opacity: 0, scale: 0.3 },
@@ -38,19 +42,19 @@ const rr = ({
           // Elegant spring-like elastic ease-out
         },
         style: {
-          transformOrigin: `${e + i / 2}px ${C + s / 2}px`
+          transformOrigin: `${o + n / 2}px ${y + e / 2}px`
         },
         children: /* @__PURE__ */ b(
           "svg",
           {
-            x: S,
-            y: C,
-            width: s,
-            height: s,
+            x: G,
+            y,
+            width: e,
+            height: e,
             viewBox: "0 0 380 380",
             children: [
-              /* @__PURE__ */ r("path", { d: z, fill: "rgba(255, 255, 255, 0.6)" }),
-              p ? /* @__PURE__ */ r("g", { transform: "translate(95, 95) scale(0.5)", children: /* @__PURE__ */ r("foreignObject", { width: "380", height: "380", children: p }) }) : /* @__PURE__ */ r(
+              /* @__PURE__ */ t("path", { d: I, fill: "rgba(255, 255, 255, 0.6)" }),
+              p ? /* @__PURE__ */ t("g", { transform: "translate(95, 95) scale(0.5)", children: /* @__PURE__ */ t("foreignObject", { width: "380", height: "380", children: p }) }) : /* @__PURE__ */ t(
                 "path",
                 {
                   d: "M130 195L170 235L250 155",
@@ -66,77 +70,86 @@ const rr = ({
           }
         )
       },
-      `badge-${a}`
+      `badge-${c}`
     );
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: X(
+      className: tt(
         "outline-none [&_.recharts-surface]:outline-none",
-        h && "overflow-x-auto scrollbar-thin",
+        f && "overflow-x-auto scrollbar-thin",
         H
       ),
-      style: { height: B },
-      children: /* @__PURE__ */ r(
+      style: { height: k },
+      children: /* @__PURE__ */ t(
         "div",
         {
           style: {
-            minWidth: h ? L : void 0,
+            minWidth: f ? N : void 0,
             height: "100%"
           },
-          children: /* @__PURE__ */ r(E, { width: "100%", height: "100%", children: /* @__PURE__ */ b(
-            P,
+          children: /* @__PURE__ */ t(R, { width: "100%", height: "100%", children: /* @__PURE__ */ b(
+            z,
             {
-              data: l,
-              margin: t ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: 20, right: 10, bottom: 0, left: 0 },
+              data: d,
+              margin: r ? { top: 0, right: 0, bottom: 0, left: 0 } : { top: 20, right: 10, bottom: 5, left: 0 },
               barGap: 2,
               children: [
-                !t && /* @__PURE__ */ r(T, { ..._, horizontal: !u }),
-                !t && /* @__PURE__ */ r(D, { dataKey: k, ...y }),
-                !t && /* @__PURE__ */ r(
-                  F,
+                !r && /* @__PURE__ */ t(M, { ...q, horizontal: !g }),
+                !r && /* @__PURE__ */ t(W, { dataKey: S, ...C }),
+                !r && /* @__PURE__ */ t(
+                  O,
                   {
-                    ...y,
-                    tickFormatter: $,
-                    hide: u,
+                    ...C,
+                    tickFormatter: L,
+                    hide: g,
                     width: 45
                   }
                 ),
-                !t && /* @__PURE__ */ r(
-                  M,
+                !r && /* @__PURE__ */ t(
+                  X,
                   {
-                    content: /* @__PURE__ */ r(W, {}),
+                    content: /* @__PURE__ */ t(Z, {}),
                     cursor: {
                       fill: "var(--md-sys-color-surface-container-highest)",
                       opacity: 0.25
                     }
                   }
                 ),
-                w.map((n, e) => {
-                  const c = A?.[e] || I(e);
-                  return /* @__PURE__ */ r(
-                    O,
+                P && !r && /* @__PURE__ */ t(
+                  U,
+                  {
+                    y: 0,
+                    stroke: "var(--md-sys-color-outline-variant)",
+                    strokeWidth: 1.5,
+                    className: "opacity-80"
+                  }
+                ),
+                A.map((a, o) => {
+                  const l = w?.[o] || J(o);
+                  return /* @__PURE__ */ t(
+                    V,
                     {
-                      dataKey: n,
-                      radius: G(),
-                      animationDuration: 1500,
-                      animationEasing: "ease-out",
-                      maxBarSize: t ? void 0 : 60,
-                      label: o ? N : void 0,
-                      children: l.map((i, a) => {
-                        const g = (o ? !!i[o] : !1) ? j : c;
-                        return /* @__PURE__ */ r(
-                          R,
+                      dataKey: a,
+                      radius: j(),
+                      animationDuration: $,
+                      animationEasing: _,
+                      maxBarSize: r ? void 0 : 60,
+                      label: i ? D : void 0,
+                      children: d.map((n, s) => {
+                        const c = (i ? !!n[i] : !1) ? B : l;
+                        return /* @__PURE__ */ t(
+                          Y,
                           {
-                            fill: g,
+                            fill: c,
                             className: "transition-colors duration-300"
                           },
-                          `cell-${a}`
+                          `cell-${s}`
                         );
                       })
                     },
-                    n
+                    a
                   );
                 })
               ]
@@ -148,5 +161,5 @@ const rr = ({
   );
 };
 export {
-  rr as BarChart
+  ft as BarChart
 };

package/dist/components/charts/chart-utils.d.ts

@@ -16,3 +16,10 @@ export declare const chartAxisConfig: {
     tickLine: boolean;
     tickMargin: number;
 };
+/**
+ * Generates a cubic-bezier solver function mapping normalized time progress
+ * t [0, 1] to physical visual progress. Highly robust and performs Newton-Raphson approximation.
+ */
+export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+export declare const EASE_EMPHASIZED: (t: number) => number;
+export declare const EASE_EXPRESSIVE_DEFAULT_SPATIAL: (t: number) => number;

package/dist/components/charts/chart-utils.mjs

@@ -1,25 +1,42 @@
-const r = [
+const i = [
   "var(--md-sys-color-primary)",
   "var(--md-sys-color-secondary)",
   "var(--md-sys-color-tertiary)",
   "var(--md-sys-color-error)",
   "var(--md-sys-color-outline)",
   "var(--md-sys-color-inverse-primary)"
-], s = (o) => r[o % r.length], a = {
+], v = (o) => i[o % i.length], d = {
   stroke: "var(--md-sys-color-outline-variant)",
   strokeDasharray: "4 4",
   vertical: !1,
   opacity: 0.4
-}, t = {
+}, f = {
   stroke: "var(--md-sys-color-outline-variant)",
   tick: { fill: "var(--md-sys-color-on-surface-variant)", fontSize: 12 },
   axisLine: !1,
   tickLine: !1,
   tickMargin: 10
 };
+function n(o, c, t, l) {
+  return (s) => {
+    if (s <= 0) return 0;
+    if (s >= 1) return 1;
+    let r = s;
+    for (let a = 0; a < 8; a++) {
+      const y = 3 * r * (1 - r) * (1 - r) * o + 3 * r * r * (1 - r) * t + r * r * r, e = 3 * (1 - r) * (1 - r) * o + 6 * r * (1 - r) * (t - o) + 3 * r * r * (1 - t);
+      if (Math.abs(e) < 1e-6) break;
+      r -= (y - s) / e;
+    }
+    return 3 * r * (1 - r) * (1 - r) * c + 3 * r * r * (1 - r) * l + r * r * r;
+  };
+}
+const u = n(0.2, 0, 0, 1), m = n(0.38, 1.5, 0.22, 1);
 export {
-  r as CHART_COLORS,
-  t as chartAxisConfig,
-  a as chartGridConfig,
-  s as getColorForIndex
+  i as CHART_COLORS,
+  u as EASE_EMPHASIZED,
+  m as EASE_EXPRESSIVE_DEFAULT_SPATIAL,
+  f as chartAxisConfig,
+  d as chartGridConfig,
+  n as cubicBezier,
+  v as getColorForIndex
 };

package/dist/components/charts/heatmap-chart.d.ts

@@ -0,0 +1,25 @@
+export interface HeatmapDataPoint {
+    x: string;
+    y: string;
+    value: number;
+    label?: string;
+}
+export interface HeatmapChartProps {
+    data: HeatmapDataPoint[];
+    /** Explicit sequence of columns along the X-axis */
+    xLabels: string[];
+    /** Explicit sequence of rows along the Y-axis */
+    yLabels: string[];
+    /** Theme palette coloring (maps to container colors) */
+    variant?: "primary" | "secondary" | "tertiary" | "error";
+    /** Cell corner rounding */
+    shape?: "full" | "minimal" | "sharp";
+    height?: number | string;
+    className?: string;
+    /** Custom formatter function for values displayed inside tooltips */
+    valueFormatter?: (value: number) => string;
+    /** Color overrides. If empty, dynamically binds to MD3 color theme variables. */
+    colorScale?: string[];
+    showLabels?: boolean;
+}
+export declare const HeatmapChart: ({ data, xLabels, yLabels, variant, shape, height, className, valueFormatter, showLabels, }: HeatmapChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/playlist-studio/elements.d.ts

@@ -6,13 +6,21 @@ import { PlaylistComponentProps } from './types';
  */
 export declare const PlaylistVideo: React.FC<PlaylistComponentProps>;
 /**
- * Invisible Audio Engine.
- * Supports standard audio formats (mp3, wav, aac) and synchronizes with timeline.
+ * Invisible Programmatic Audio Engine.
+ * Handled via a direct in-memory HTMLAudioElement instance.
+ * Completely eliminates layout-rendering thread blocks, keeping media pipelines open.
  */
 export declare const PlaylistAudio: React.FC<PlaylistComponentProps>;
 export declare const PlaylistImage: React.FC<PlaylistComponentProps>;
+/**
+ * Flexible HTML Element Renderer.
+ * Supports rendering custom tags (whitelisted for safety), custom React children,
+ * or raw HTML safely integrated with transitions and coordinates.
+ */
+export declare const PlaylistHtml: React.FC<PlaylistComponentProps>;
 export declare const defaultPlaylistRegistry: {
     Video: React.FC<PlaylistComponentProps>;
     Audio: React.FC<PlaylistComponentProps>;
     Image: React.FC<PlaylistComponentProps>;
+    Html: React.FC<PlaylistComponentProps>;
 };