@timbal-ai/timbal-react 1.1.0 → 1.2.0

package/dist/{chunk-TK2AGIME.esm.js → chunk-XDIY2WSL.esm.js}

@@ -15,14 +15,14 @@ import {
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-YXZ22OJN.esm.js";
+} from "./chunk-UY7AKWJL.esm.js";
 import {
   Checkbox,
   Skeleton
-} from "./chunk-JEAUF54A.esm.js";
+} from "./chunk-FEYZUVBM.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-P3KDAYX6.esm.js";
+} from "./chunk-NAMKO2MU.esm.js";
 import {
   Button,
   Dialog,
@@ -35,7 +35,7 @@ import {
   TimbalV2Button,
   cn,
   controlClass
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-BMXFXLVV.esm.js";
 
 // src/design/ui-vocabulary.ts
 var SEMANTIC_COLOR_TOKENS = [
@@ -198,8 +198,8 @@ var HOUSE_RULES = [
   },
   {
     id: "no-data-gradient",
-    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
-    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground) and built-in chart/avatar fills \u2014 never on a data card shell, stat tile, or table row background.",
+    why: `Gradient stat cards are the canonical 'AI dashboard' look; SVG bar/pie fills and AvatarFallback variant="secondary" (Action button chrome) are kit-owned exceptions.`
   },
   {
     id: "compose-from-blocks",
@@ -312,8 +312,9 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`FilterBar\` | Horizontal filter row \u2014 bottom-aligns controls. Mix \`SearchInput\` with labeled \`FilterField\` + \`Select\` (or \`Field\` + \`Select\`); labels sit above, control baselines match. |
 | \`FilterField\` | Optional label wrapper for a filter control inside \`FilterBar\` (severity, status, \u2026). Omit \`label\` for search-only fields. |
 | \`SearchInput\` | Filter field with consistent app styling. |
-| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
-| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
+| \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only) with **no axis ticks** \u2014 hover tooltips show category + value. Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
 | \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
@@ -326,7 +327,7 @@ Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipConten
 
 | Component | Use for |
 |-----------|---------|
-| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\` (\`monotone\`\\|\`linear\`\\|\`step\`), \`dots\`, \`gridLines\`, \`tooltipIndicator\` (\`dot\`\\|\`line\`\\|\`dashed\`), \`layout\` (\`flush\`), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
+| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Bar fills use theme gradients automatically. Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\`, \`dots\`, \`gridLines\`, \`tooltipIndicator\`, \`layout\` (\`flush\` \u2014 hides axes by default; category + values on hover tooltip), \`showXAxis\` / \`showYAxis\` to opt back in, \`clipTicks\` (truncates long axis labels when axes are on), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
 | \`PieChart\` | Pie / donut: \`data\`, \`nameKey\`, \`dataKey\`, \`innerRadius\` (>0 = donut), \`centerValue\`/\`centerLabel\` (donut hole KPI), \`showLabels\`, \`colors\`. |
 | \`RadialChart\` | Concentric progress rings: \`data\`, \`nameKey\`, \`dataKey\`, \`maxValue\`, \`centerValue\`/\`centerLabel\`. Good for gauges / share-of-target. |
 | \`RadarChart\` | Spider chart (\u22653 axes): \`data\`, \`nameKey\`, \`series\`, \`maxValue\`. Compare a few metrics across entities. |
@@ -1325,8 +1326,8 @@ var metricCardShellClass = cn(
 );
 var metricCardHeaderClass = "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
 var metricTilesRowClass = "grid w-full min-w-0";
-var metricChartRegionClass = "relative min-h-0 w-full border-t border-border/40 pt-2";
-var metricChartPlotRegionClass = "relative min-h-0 w-full border-t border-border/40 px-0 pt-5 pb-3";
+var metricChartRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2";
+var metricChartPlotRegionClass = "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3";
 var metricCellDividerClass = "border-r border-border/40";
 var MetricCardHeader = ({
   title,
@@ -1516,7 +1517,7 @@ var appShellTopbarRowClass = cn(
   "flex w-full items-center justify-between gap-2"
 );
 var appShellTopbarStickyClass = cn(
-  "sticky top-0 z-20 shrink-0 bg-background pb-2",
+  "shrink-0 bg-background pb-2",
   appShellInsetTopClass
 );
 var appPageHeaderClass = cn(
@@ -3285,10 +3286,11 @@ function DataTable({
                 className: cn(
                   bodyCellClass,
                   cellPad,
+                  col.truncate && "max-w-0",
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ jsx43("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))