@gntik-ai/blocks 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -2924,8 +2924,13 @@ export declare function selectionState(visibleIds: readonly string[], selected:
 /** Selects all of `ids` when not all are selected; otherwise clears them. Other selections are kept. */
 export declare function toggleAll(ids: readonly string[], selected: ReadonlySet<string>): Set<string>;
 export declare function toggleOne(id: string, selected: ReadonlySet<string>): Set<string>;
-/** Default cell text for a raw value. */
-export declare function formatCell(value: CellValue): ReactNode;
+/** Optional locale and boolean text for default cells. */
+export interface DataTableCellFormatOptions {
+  locale?: string;
+  booleanLabels?: [trueLabel: string, falseLabel: string];
+}
+/** Default cell text for a raw value. Omitting options preserves the legacy output. */
+export declare function formatCell(value: CellValue, options?: DataTableCellFormatOptions): ReactNode;
 /** Groups rows by a field key or by a function returning the group key. */
 export type DataTableGroupBy<T> = Extract<keyof T, string> | ((row: T) => string | number | null | undefined);
 /** One group of rows, in display order. */
@@ -2998,6 +3003,8 @@ export declare function PaginationFooter({ total, page: pageProp, defaultPage, o
 //#region src/tables/DataTable/labels.d.ts
 /** Per-instance table chrome, including the composed PaginationFooter. Caller data stays caller-owned. */
 interface DataTableLabels extends PaginationFooterLabels {
+  booleanTrue: string;
+  booleanFalse: string;
   /** Non-virtual table overflow region; virtualized regions keep the caller caption. */
   scrollRegion: string;
   selectionCount: (count: number) => string;

package/dist/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { Fragment, createElement, useCallback, useEffect, useEffectEvent, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Activity, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, BarChart3, Bookmark, Bot, Boxes, Braces, Building2, CalendarCheck, CalendarDays, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, CircleAlert, CircleCheck, CircleHelp, CircleX, Clock, Cog, Columns3, Copy, CreditCard, Database, Download, ExternalLink, Eye, FileCode, FileText, FolderKanban, FolderPlus, Gauge, GitBranch, Globe, HardDrive, Home, Inbox, Info, KeyRound, Layers, LayoutGrid, List, ListFilter, Lock, LogOut, Mail, MailCheck, MapPin, Minus, Monitor, MousePointerClick, Pencil, Play, PlugZap, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Rows2, Rows3, Search, SearchX, Server, ServerCrash, Settings, ShieldCheck, SlidersHorizontal, Smartphone, Sparkles, Table2, Tablet, Trash2, TriangleAlert, Upload, User, UserMinus, UserPlus, Users, Workflow, Wrench, X, Zap } from "@gntik-ai/icons";
-import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Breadcrumbs, Button, Card, CardAction, CardBody, CardDescription, CardHeader, CardTitle, Checkbox, CheckboxGroup, ClickableCard, CodeBlock, Collapsible, CollapsiblePanel, CollapsibleTrigger, CommandPalette, CommandPaletteTrigger, CopyButton, CursorPagination, DEFAULT_DATE_RANGE_PRESETS, DateRangePicker, DensityProvider, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, IconButton, Input, Link, LiveAnnouncer, Logo, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Meter, MoreMenu, NavList, NotificationsPopover, OtpInput, Pagination, PasswordInput, Progress, Radio, RadioGroup, ResizablePanel, ResizablePanelGroup, ResizeHandle, SecretField, Select, SelectContent, SelectItem, SelectTrigger, SimpleSelect, Skeleton, Slider, Sparkline, Spinner, StatusDot, StatusTag, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Textarea, ThemeCycleButton, ThemeSwitcher, Timestamp, Toggle, ToggleGroup, Token, TokenInput, Toolbar, ToolbarButton, ToolbarEnd, ToolbarInput, ToolbarSeparator, ToolbarStart, UserMenu, WizardLayout, WorkspaceSwitcher, buttonVariants, cn, nextSortDirection, tableVariants, toDate, useAnnounce, useDensity, useHasLiveAnnouncer, useI18n } from "@gntik-ai/ui";
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Breadcrumbs, Button, Card, CardAction, CardBody, CardDescription, CardHeader, CardTitle, Checkbox, CheckboxGroup, ClickableCard, CodeBlock, Collapsible, CollapsiblePanel, CollapsibleTrigger, CommandPalette, CommandPaletteTrigger, CopyButton, CursorPagination, DEFAULT_DATE_RANGE_PRESETS, DateRangePicker, DensityProvider, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, EmptyState, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, IconButton, Input, Link, LiveAnnouncer, Logo, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Meter, MoreMenu, NavList, NotificationsPopover, OtpInput, Pagination, PasswordInput, Progress, Radio, RadioGroup, ResizablePanel, ResizablePanelGroup, ResizeHandle, SecretField, Select, SelectContent, SelectItem, SelectTrigger, SimpleSelect, Skeleton, Slider, Sparkline, Spinner, StatusDot, StatusTag, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Textarea, ThemeCycleButton, ThemeSwitcher, Timestamp, Toggle, ToggleGroup, Token, TokenInput, Toolbar, ToolbarButton, ToolbarEnd, ToolbarInput, ToolbarSeparator, ToolbarStart, UserMenu, WizardLayout, WorkspaceSwitcher, buttonVariants, cn, foldText, matchRanges, nextSortDirection, tableVariants, toDate, useAnnounce, useDensity, useHasLiveAnnouncer, useI18n, useOptionalI18n } from "@gntik-ai/ui";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AreaChart, BarChart, CHART_COLORS, DonutChart, Heatmap, LineChart, chartFmt } from "@gntik-ai/charts";
 import { FLOW_TONES, FlowCanvas, KIND_CHIP, KindGlyph, useFlowState } from "@gntik-ai/flow";
@@ -5130,23 +5130,18 @@ const LEVEL_STYLE = {
 	}
 };
 /** Wraps case-insensitive matches of `query` in <mark>. */
-function highlight(text, query) {
-	if (!query) return text;
-	const lower = text.toLowerCase();
-	const q = query.toLowerCase();
+function highlight(text, query, locale) {
 	const parts = [];
 	let from = 0;
-	let at = lower.indexOf(q, from);
-	while (at !== -1) {
-		if (at > from) parts.push(text.slice(from, at));
+	for (const [start, end] of matchRanges(text, query, { locale })) {
+		parts.push(text.slice(from, start));
 		parts.push(/* @__PURE__ */ jsx("mark", {
 			className: "rounded-sm bg-warning/30 text-foreground",
-			children: text.slice(at, at + q.length)
-		}, at));
-		from = at + q.length;
-		at = lower.indexOf(q, from);
+			children: text.slice(start, end)
+		}, start));
+		from = end;
 	}
-	if (from < text.length) parts.push(text.slice(from));
+	parts.push(text.slice(from));
 	return parts;
 }
 function lineText(line) {
@@ -5158,6 +5153,7 @@ function lineText(line) {
 * follow-tail and per-line copy.
 */
 function LogViewer({ lines = logLines, title = "Logs", height = 360, rowHeight = 24, overscan = 8, defaultLevels = LOG_LEVELS, defaultFollow = true, onCopyLine, onSelectLine, selectedLineId, announceLines = true, titleAs: TitleTag = "h3", className }) {
+	const { locale } = useI18n();
 	const titleId = useId();
 	const viewport = useRef(null);
 	const copyTimer = useRef(void 0);
@@ -5176,13 +5172,19 @@ function LogViewer({ lines = logLines, title = "Logs", height = 360, rowHeight =
 		for (const l of lines) c[l.level] += 1;
 		return c;
 	}, [lines]);
+	const foldedLines = useMemo(() => lines.map((line) => ({
+		line,
+		message: foldText(line.message, locale),
+		source: foldText(line.source ?? "", locale)
+	})), [lines, locale]);
 	const visible = useMemo(() => {
-		const q = query.trim().toLowerCase();
-		return lines.filter((l) => levels.includes(l.level) && (!q || l.message.toLowerCase().includes(q) || (l.source ?? "").toLowerCase().includes(q)));
+		const q = foldText(query.trim(), locale);
+		return foldedLines.filter(({ line, message, source }) => levels.includes(line.level) && (!q || message.indexOf(q) !== -1 || source.indexOf(q) !== -1)).map(({ line }) => line);
 	}, [
-		lines,
+		foldedLines,
 		levels,
-		query
+		query,
+		locale
 	]);
 	const total = visible.length * rowHeight;
 	const maxScroll = Math.max(0, total - height);
@@ -5298,13 +5300,13 @@ function LogViewer({ lines = logLines, title = "Logs", height = 360, rowHeight =
 								className: "hidden shrink-0 text-muted-foreground sm:inline",
 								children: [
 									"[",
-									highlight(line.source, query.trim()),
+									highlight(line.source, query, locale),
 									"]"
 								]
 							}),
 							/* @__PURE__ */ jsx("span", {
 								className: "min-w-0 flex-1 truncate text-foreground",
-								children: highlight(line.message, query.trim())
+								children: highlight(line.message, query, locale)
 							}),
 							onSelectLine && /* @__PURE__ */ jsx(IconButton, {
 								size: "sm",
@@ -10072,6 +10074,7 @@ const pageHeaderTabs = [
 //#region src/page-chrome/PageHeader/PageHeader.tsx
 /** Screen header: breadcrumb, title + status, description, meta row, actions and optional tabs. */
 function PageHeader({ as: Root = "header", breadcrumbs = pageHeaderBreadcrumbs, title = "Deployments", titleRef, description = "Every build and release of this project across its environments.", status = "active", statuses, meta = pageHeaderMeta, actions = pageHeaderActions, tabs = pageHeaderTabs, tab, defaultTab, onTabChange, className }) {
+	const { t } = useI18n();
 	const explicitPrimary = actions.findIndex((a) => a.variant === "primary");
 	const primaryIndex = explicitPrimary >= 0 ? explicitPrimary : actions.length - 1;
 	const primary = actions[primaryIndex];
@@ -10150,7 +10153,7 @@ function PageHeader({ as: Root = "header", breadcrumbs = pageHeaderBreadcrumbs,
 				onValueChange: (value) => onTabChange?.(String(value)),
 				className: "mt-5",
 				children: /* @__PURE__ */ jsx(TabsList, {
-					"aria-label": "Page sections",
+					"aria-label": t("pageHeader.sections"),
 					className: "overflow-x-auto",
 					children: tabs.map((t) => /* @__PURE__ */ jsx(TabsTab, {
 						value: t.value,
@@ -10168,7 +10171,7 @@ const meta$45 = {
 	name: "Page header",
 	family: "page-chrome",
 	status: "beta",
-	description: "Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. titleRef targets the h1 for titleRef.current.focus(), adding tabIndex=-1 only when supplied so the title stays outside the Tab order. In a StatusLayout heading slot use as=\"div\" and disable breadcrumb, meta, tabs, actions, status and description fixtures; the slot supplies the page’s only h1.",
+	description: "Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. titleRef targets the h1 for titleRef.current.focus(), adding tabIndex=-1 only when supplied so the title stays outside the Tab order. In a StatusLayout heading slot use as=\"div\" and disable breadcrumb, meta, tabs, actions, status and description fixtures; the slot supplies the page’s only h1. The tablist name follows I18nProvider (en/es); the Spanish preview keeps caller content unchanged.",
 	uses: [
 		"Breadcrumbs",
 		"Button",
@@ -12420,11 +12423,23 @@ function toggleOne(id, selected) {
 	else next.add(id);
 	return next;
 }
-/** Default cell text for a raw value. */
-function formatCell(value) {
+/** Default cell text for a raw value. Omitting options preserves the legacy output. */
+function formatCell(value, options) {
 	if (value == null) return "—";
-	if (value instanceof Date) return value.toLocaleDateString();
-	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (value instanceof Date) {
+		if (!options) return value.toLocaleDateString();
+		if (Number.isNaN(value.getTime())) return "—";
+		return new Intl.DateTimeFormat(options.locale, {
+			year: "numeric",
+			month: "numeric",
+			day: "numeric"
+		}).format(value);
+	}
+	if (typeof value === "boolean") return (options?.booleanLabels ?? ["Yes", "No"])[value ? 0 : 1];
+	if (typeof value === "number" && Number.isFinite(value) && options?.locale !== void 0) {
+		const decimal = new Intl.NumberFormat(options.locale).formatToParts(1.1).find((part) => part.type === "decimal");
+		return String(value).replace(".", decimal?.value ?? ".");
+	}
 	return value;
 }
 /** Group key of a row (`''` when the value is null or undefined). */
@@ -12667,6 +12682,7 @@ function isCellEditable(column, row) {
 //#region src/tables/DataTable/data-table-row.tsx
 function DataTableRow({ labels, row, columns, getRowId, getRowLabel, selectable, selected, singleSelection, onToggleRow, rowActions, layout, onCellEdit, editHintId, ariaRowIndex, style }) {
 	const { t } = useI18n();
+	const locale = useOptionalI18n()?.locale;
 	const id = getRowId(row);
 	const selectionColumn = selectable || singleSelection != null;
 	const isSelected = singleSelection ? singleSelection.selectedId === id : selected.has(id);
@@ -12696,7 +12712,10 @@ function DataTableRow({ labels, row, columns, getRowId, getRowLabel, selectable,
 			}),
 			columns.map((c) => {
 				const cl = layout?.columns.get(c.id);
-				const content = c.cell ? c.cell(row) : formatCell(c.accessor?.(row));
+				const content = c.cell ? c.cell(row) : formatCell(c.accessor?.(row), {
+					locale,
+					booleanLabels: [labels?.booleanTrue ?? t("common.yes"), labels?.booleanFalse ?? t("common.no")]
+				});
 				const editable = onCellEdit && editHintId && isCellEditable(c, row);
 				return /* @__PURE__ */ jsx(TableCell, {
 					align: columnAlign(c),
@@ -13922,6 +13941,16 @@ const meta$16 = {
 	status: "beta",
 	description: "Generic typed table: sortable headers with aria-sort, row selection with select-all and indeterminate by default (selectionMode=\"multiple\"), selectionMode=\"none\" to hide selection, column visibility menu, density toggle, row actions, loading and empty states, client-side sort and pagination, optional row groups (groupBy) with rowgroup header rows, counts, keyboard-accessible collapse buttons and group selection; column resize (pointer drag or a focusable role=\"separator\" handle with arrow keys, min/max widths, controlled columnWidths), column pinning to either edge with sticky cells (column menu or pinnedColumns), row virtualization for large datasets (aria-rowcount/aria-rowindex, works with selection and grouping), inline cell editing (text, number and select editors; Enter/F2 to edit, Enter/Tab to commit, Escape to cancel, onCellEdit can reject with an inline error) and saved views (filters, sort, visible columns, widths, pinning and grouping) with a view switcher to save as, rename, delete and reset. Opt-in selectionMode=\"single\" uses native radios in a labelled fieldset (never paginated or virtualized; paginated defaults to false and paginated=true is a type error). Single mode uses selectedId/onSelectedIdChange or defaultSelectedId; isRowDisabled skips unavailable rows and preserves a checked disabled choice without callbacks. Supply legend, aria-label or aria-labelledby for the group and getRowLabel for each radio (otherwise the first column labels it). selectionName is used verbatim and must be unique per page; omitted names use an instance-unique useId name, and duplicate supplied names or missing group labels warn in development. Tab enters once on the checked enabled row or first enabled row; arrows wrap and skip disabled rows, Space selects, Shift+Tab exits, and all-disabled groups have no tab stop. No select-all, group checkboxes, bulk actions or selection summary appear in single mode. Examples in examples/single-selection.tsx: an uncontrolled non-paginated list with legend=\"Available items\" and a controlled versions table with legend=\"Available versions\", selectedId=\"v2\" and a checked disabled version. Opt-in paginationMode=\"server\" accepts a controlled 1-based page, pageSize and required rowCount (known total), with onPageChange/onPageSizeChange requests. Supplied rows render in order without client sorting or slicing, and headers have no sort affordance. Single selection cannot use server mode. The footer stays visible for empty results, clamps stale pages for display without callbacks, and hides during loading. Page-size changes may also request a page to keep the first visible row on screen. The consumer owns fetching and reconciles stale pages. See examples/server-pagination.tsx for an items/total/page/pageSize envelope consumer that handles both callbacks.",
 	labels: [
+		{
+			key: "booleanTrue",
+			type: "string",
+			state: "Default cell text for a true boolean value"
+		},
+		{
+			key: "booleanFalse",
+			type: "string",
+			state: "Default cell text for a false boolean value"
+		},
 		{
 			key: "scrollRegion",
 			type: "string",