@nadicodeai/ui 8.1.0 → 8.2.0

package/dist/components/heatmap/calendar-heatmap.js

@@ -0,0 +1,449 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { differenceInCalendarDays, eachDayOfInterval, format, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks, } from "date-fns";
+import { createContext, Fragment, use, useMemo } from "react";
+import { cn } from "../../lib/utils.js";
+// Non-normalized: 1 empty + (levels-1) colored steps. Normalized: levels colored steps, no empty.
+const colorStepCount = (levels, isNormalized) => Math.max(1, isNormalized ? levels : levels - 1);
+const getLevelFill = (level, levels, isNormalized, measured, highlighted = false, colors) => {
+    const emptyColor = colors?.empty ?? "var(--color-secondary)";
+    const scaleColor = colors?.scale ?? "var(--color-chart-1)";
+    if (!measured)
+        return colors?.unavailable ?? "transparent";
+    if (level === 0)
+        return emptyColor;
+    const steps = colorStepCount(levels, isNormalized);
+    const opacity = steps === 1 ? 100 : Math.round(20 + ((level - 1) * 80) / (steps - 1));
+    const finalOpacity = highlighted ? Math.round(opacity * 0.6) : opacity;
+    return `color-mix(in oklch, ${scaleColor} ${finalOpacity}%, transparent)`;
+};
+const calculateLevel = (value, minValue, maxValue, levels, isNormalized) => {
+    const steps = colorStepCount(levels, isNormalized);
+    if (!Number.isFinite(value))
+        return isNormalized ? 1 : 0;
+    if (isNormalized) {
+        if (maxValue <= minValue)
+            return 1;
+        const percentage = (value - minValue) / (maxValue - minValue);
+        return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+    }
+    if (value <= 0 || maxValue <= 0)
+        return 0;
+    const percentage = value / maxValue;
+    return Math.max(1, Math.min(steps, Math.ceil(percentage * steps)));
+};
+const generateMonthLabels = (locale) => {
+    return Array.from({ length: 12 }, (_, i) => {
+        const date = new Date(2000, i, 1);
+        if (locale)
+            return format(date, "LLL", { locale });
+        return date.toLocaleString("en-US", { month: "short" });
+    });
+};
+const generateWeekdayLabels = (locale) => {
+    return Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(2000, 0, 2 + i);
+        if (locale)
+            return format(date, "EEE", { locale });
+        return date.toLocaleString("en-US", { weekday: "short" });
+    });
+};
+const EMPTY_STYLE = {};
+const LABEL_MARGIN = 8;
+const CalendarHeatmapContext = createContext(null);
+const useCalendarHeatmap = () => {
+    const context = use(CalendarHeatmapContext);
+    if (!context) {
+        throw new Error("CalendarHeatmap components must be used within a CalendarHeatmap");
+    }
+    return context;
+};
+const fillHoles = (activities) => {
+    if (activities.length === 0) {
+        return [];
+    }
+    const sortedActivities = [...activities].sort((a, b) => a.date.localeCompare(b.date));
+    const calendar = new Map(activities.map((a) => [a.date, a]));
+    const firstActivity = sortedActivities[0];
+    const lastActivity = sortedActivities.at(-1);
+    if (!lastActivity) {
+        return [];
+    }
+    return eachDayOfInterval({
+        start: parseISO(firstActivity.date),
+        end: parseISO(lastActivity.date),
+    }).map((day) => {
+        const date = formatISO(day, { representation: "date" });
+        if (calendar.has(date)) {
+            return calendar.get(date);
+        }
+        return {
+            date,
+            value: null,
+            level: 0,
+            measured: false,
+        };
+    });
+};
+const groupByYearAndMonth = (activities, weekStart = 0, hasEmptyColumn = false) => {
+    if (activities.length === 0) {
+        return [];
+    }
+    const normalizedActivities = fillHoles(activities);
+    const activitiesByYearMonth = new Map();
+    for (const activity of normalizedActivities) {
+        const date = parseISO(activity.date);
+        const year = getYear(date);
+        const month = getMonth(date);
+        const key = `${year}-${String(month).padStart(2, "0")}`;
+        if (!activitiesByYearMonth.has(key)) {
+            activitiesByYearMonth.set(key, []);
+        }
+        activitiesByYearMonth.get(key)?.push(activity);
+    }
+    const sortedKeys = Array.from(activitiesByYearMonth.keys()).sort();
+    if (sortedKeys.length === 0) {
+        return [];
+    }
+    const firstKey = sortedKeys[0];
+    const [firstYearStr, firstMonthStr] = firstKey.split("-");
+    const startYear = parseInt(firstYearStr, 10);
+    const startMonth = parseInt(firstMonthStr, 10);
+    const yearRows = [];
+    let currentYear = startYear;
+    let currentMonth = startMonth;
+    while (true) {
+        const rowWeeks = [];
+        let hasData = false;
+        for (let monthOffset = 0; monthOffset < 12; monthOffset++) {
+            const monthIndex = (currentMonth + monthOffset) % 12;
+            const yearOffset = Math.floor((currentMonth + monthOffset) / 12);
+            const year = currentYear + yearOffset;
+            const key = `${year}-${String(monthIndex).padStart(2, "0")}`;
+            const monthActivities = activitiesByYearMonth.get(key) || [];
+            if (monthActivities.length > 0) {
+                hasData = true;
+                const firstActivity = monthActivities[0];
+                const firstDate = parseISO(firstActivity.date);
+                const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+                const paddedActivities = [
+                    ...new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(undefined),
+                    ...monthActivities,
+                ];
+                const numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+                const monthWeeks = new Array(numberOfWeeks)
+                    .fill(undefined)
+                    .map((_, weekIndex) => paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7));
+                if (hasEmptyColumn && rowWeeks.length > 0) {
+                    rowWeeks.push(new Array(7).fill(undefined));
+                }
+                rowWeeks.push(...monthWeeks);
+            }
+        }
+        if (!hasData) {
+            break;
+        }
+        yearRows.push({
+            year: currentYear,
+            startMonth: currentMonth,
+            weeks: rowWeeks,
+        });
+        currentYear++;
+        currentMonth = startMonth;
+        const hasNextYearData = sortedKeys.some((key) => {
+            const [yearStr] = key.split("-");
+            return parseInt(yearStr, 10) >= currentYear;
+        });
+        if (!hasNextYearData) {
+            break;
+        }
+    }
+    return yearRows;
+};
+const groupContinuous = (activities, weekStart = 0, singleRow = false) => {
+    if (activities.length === 0)
+        return [];
+    const normalizedActivities = fillHoles(activities);
+    const first = normalizedActivities[0];
+    const firstDate = parseISO(first.date);
+    const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+    const leadingPad = differenceInCalendarDays(firstDate, firstCalendarDate);
+    const padded = [
+        ...new Array(leadingPad).fill(undefined),
+        ...normalizedActivities,
+    ];
+    const numberOfWeeks = Math.ceil(padded.length / 7);
+    const allWeeks = new Array(numberOfWeeks)
+        .fill(undefined)
+        .map((_, i) => padded.slice(i * 7, i * 7 + 7));
+    if (singleRow) {
+        return [
+            {
+                year: getYear(firstDate),
+                startMonth: getMonth(firstDate),
+                weeks: allWeeks,
+            },
+        ];
+    }
+    const yearMap = new Map();
+    for (const week of allWeeks) {
+        const firstActivity = week.find((a) => a !== undefined);
+        const year = firstActivity ? getYear(parseISO(firstActivity.date)) : undefined;
+        if (year !== undefined) {
+            if (!yearMap.has(year))
+                yearMap.set(year, []);
+            yearMap.get(year)?.push(week);
+        }
+    }
+    return Array.from(yearMap.entries())
+        .sort(([a], [b]) => a - b)
+        .map(([year, weeks]) => ({
+        year,
+        startMonth: 0,
+        weeks,
+    }));
+};
+const getMonthLabels = (weeks, monthNames = generateMonthLabels()) => {
+    return weeks
+        .reduce((labels, week, weekIndex) => {
+        const firstActivity = week.find((activity) => activity !== undefined);
+        if (!firstActivity) {
+            return labels;
+        }
+        const month = monthNames[getMonth(parseISO(firstActivity.date))];
+        if (!month) {
+            const monthName = new Date(firstActivity.date).toLocaleString("en-US", {
+                month: "short",
+            });
+            throw new Error(`Unexpected error: undefined month label for ${monthName}.`);
+        }
+        const prevLabel = labels.at(-1);
+        if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) {
+            labels.push({ weekIndex, label: month });
+        }
+        return labels;
+    }, [])
+        .filter(({ weekIndex }, index, labels) => {
+        const minWeeks = 3;
+        if (index === 0) {
+            return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;
+        }
+        if (index === labels.length - 1) {
+            return weeks.slice(weekIndex).length >= minWeeks;
+        }
+        return true;
+    });
+};
+/**
+ * Calendar Heatmap
+ *
+ * A GitHub-style contribution calendar showing daily activity over months and years.
+ * Each cell represents one day, arranged in weeks (rows) and months (columns).
+ *
+ * @example
+ * ```tsx
+ * <CalendarHeatmap data={data} weekStart={1} continuousMonths>
+ *   <CalendarHeatmapBody>
+ *     {({ activity, dayIndex, weekIndex }) => (
+ *       <CalendarHeatmapBlock
+ *         activity={activity}
+ *         dayIndex={dayIndex}
+ *         weekIndex={weekIndex}
+ *       />
+ *     )}
+ *   </CalendarHeatmapBody>
+ *   <CalendarHeatmapFooter>
+ *     <CalendarHeatmapStat />
+ *     <CalendarHeatmapLegend />
+ *   </CalendarHeatmapFooter>
+ * </CalendarHeatmap>
+ * ```
+ *
+ * @param data - Array of activities with date (YYYY-MM-DD) and value
+ * @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+ * @param continuousMonths - Display months continuously vs. grouped by year. Default: true
+ * @param singleRow - Keep a continuous range in one row across year boundaries. Default: false
+ * @param hasEmptyColumn - Add empty column between months. Default: false
+ * @param blockAspectRatio - Width/height ratio of blocks. Default: 1
+ * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
+ * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values). When false (default), treats 0 as empty and scales from 0 to max.
+ */
+export const CalendarHeatmap = ({ data, weekStart = 0, continuousMonths = true, singleRow = false, hasEmptyColumn = false, blockSize = 12, blockMargin = 4, blockRadius = 2, blockAspectRatio = 1, levels: levelsProp = 5, isNormalized = false, colors, locale, labels: labelsProp, fontSize = 14, emptyState, totalCount: totalCountProp, style = EMPTY_STYLE, className, children, ...props }) => {
+    const levels = Math.max(1, levelsProp);
+    const dataWithLevels = useMemo(() => {
+        if (data.length === 0)
+            return [];
+        const measuredValues = data.flatMap((activity) => typeof activity.value === "number" && Number.isFinite(activity.value) ? [activity.value] : []);
+        const maxCount = measuredValues.reduce((max, value) => Math.max(max, value), 1);
+        const minCount = isNormalized
+            ? measuredValues.reduce((min, value) => Math.min(min, value), Infinity)
+            : 0;
+        return data.map((activity) => {
+            const value = activity.value;
+            const measured = typeof value === "number" && Number.isFinite(value);
+            return {
+                ...activity,
+                measured,
+                level: measured ? calculateLevel(value, minCount, maxCount, levels, isNormalized) : 0,
+            };
+        });
+    }, [data, levels, isNormalized]);
+    const yearRows = useMemo(() => continuousMonths
+        ? groupContinuous(dataWithLevels, weekStart, singleRow)
+        : groupByYearAndMonth(dataWithLevels, weekStart, hasEmptyColumn), [dataWithLevels, weekStart, hasEmptyColumn, continuousMonths, singleRow]);
+    const weeks = useMemo(() => yearRows.flatMap((r) => r.weeks), [yearRows]);
+    const labels = useMemo(() => ({
+        months: generateMonthLabels(locale),
+        weekdays: generateWeekdayLabels(locale),
+        cellLabel: "{{date}}: {{value}} contributions",
+        unavailable: "No data",
+        heatmapLabel: "Contribution heatmap for {{year}}",
+        legendLabel: "Activity intensity legend",
+        legendLevelLabel: "{{level}} contributions",
+        ...labelsProp,
+    }), [locale, labelsProp]);
+    const labelHeight = fontSize + LABEL_MARGIN;
+    const year = data.length > 0 ? getYear(parseISO(data[0].date)) : new Date().getFullYear();
+    const totalCount = typeof totalCountProp === "number"
+        ? totalCountProp
+        : dataWithLevels.reduce((sum, activity) => sum + (activity.value ?? 0), 0);
+    const blockWidth = blockSize * blockAspectRatio;
+    const width = weeks.length * (blockWidth + blockMargin) - blockMargin;
+    const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
+    const contextValue = useMemo(() => ({
+        data: dataWithLevels,
+        weeks,
+        yearRows,
+        blockMargin,
+        blockRadius,
+        blockSize,
+        blockAspectRatio,
+        blockWidth,
+        fontSize,
+        labels,
+        labelHeight,
+        levels,
+        isNormalized,
+        totalCount,
+        weekStart,
+        year,
+        width,
+        height,
+        hasEmptyColumn,
+        continuousMonths,
+        locale,
+        colors,
+    }), [
+        dataWithLevels,
+        weeks,
+        yearRows,
+        blockMargin,
+        blockRadius,
+        blockSize,
+        blockAspectRatio,
+        blockWidth,
+        fontSize,
+        labels,
+        labelHeight,
+        levels,
+        isNormalized,
+        totalCount,
+        weekStart,
+        year,
+        width,
+        height,
+        hasEmptyColumn,
+        continuousMonths,
+        locale,
+        colors,
+    ]);
+    if (data.length === 0) {
+        return emptyState ? emptyState : null;
+    }
+    return (_jsx(CalendarHeatmapContext, { value: contextValue, children: _jsx("div", { "data-slot": "calendar-heatmap", className: cn("flex w-max max-w-full flex-col gap-2 p-4", className), style: { fontSize, ...style }, ...props, children: children }) }));
+};
+export const CalendarHeatmapBlock = ({ ref, activity, dayIndex, weekIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+    const { blockSize, blockWidth, blockMargin, blockRadius, labelHeight, labels, levels, isNormalized, colors, } = useCalendarHeatmap();
+    const level = Math.max(0, Math.min(colorStepCount(levels, isNormalized), activity.level));
+    const cellLabel = labels.cellLabel ?? "{{date}}: {{value}} contributions";
+    const ariaLabel = typeof cellLabel === "function"
+        ? cellLabel(activity)
+        : cellLabel
+            .replace("{{date}}", activity.date)
+            .replace("{{value}}", activity.measured ? String(activity.value) : (labels.unavailable ?? "No data"));
+    return (_jsx("rect", { ref: ref, "data-slot": "calendar-heatmap-block", role: onCellClick ? "button" : "img", tabIndex: onCellClick ? 0 : -1, "aria-label": ariaLabel, className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:nc-focus-outline focus-visible:outline-ring", className), "data-value": activity.value ?? undefined, "data-measured": activity.measured, "data-date": activity.date, "data-level": level, "data-highlighted": highlighted || undefined, height: blockSize, rx: blockRadius, ry: blockRadius, width: blockWidth, x: (blockWidth + blockMargin) * weekIndex, y: labelHeight + (blockSize + blockMargin) * dayIndex, style: {
+            fill: getLevelFill(level, levels, isNormalized, activity.measured, highlighted, colors),
+            ...styleProp,
+        }, onClick: (event) => {
+            onCellClick?.(activity);
+            onClick?.(event);
+        }, onKeyDown: (event) => {
+            if (onCellClick && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                onCellClick(activity);
+            }
+            onKeyDown?.(event);
+        }, onMouseEnter: (event) => {
+            onCellHover?.(activity);
+            onMouseEnter?.(event);
+        }, onMouseLeave: (event) => {
+            onCellHover?.(null);
+            onMouseLeave?.(event);
+        }, ...props, children: _jsx("title", { children: ariaLabel }) }));
+};
+CalendarHeatmapBlock.displayName = "CalendarHeatmapBlock";
+export const CalendarHeatmapBody = ({ hideMonthLabels = false, hideWeekdayLabels = false, hideYearLabels = false, className, labelClassName, yearClassName, children, renderYearFooter, ...props }) => {
+    const { yearRows, blockSize, blockWidth, blockMargin, labels, labelHeight, fontSize, weekStart, data, } = useCalendarHeatmap();
+    const weekdayLabelWidth = hideWeekdayLabels ? 0 : 40;
+    const strokePadding = 3;
+    const rowData = useMemo(() => {
+        return yearRows.map((yearRow) => {
+            const width = yearRow.weeks.length * (blockWidth + blockMargin) - blockMargin;
+            const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin;
+            const monthLabels = getMonthLabels(yearRow.weeks, labels.months);
+            const yearTotalCount = data
+                .filter((activity) => getYear(parseISO(activity.date)) === yearRow.year)
+                .reduce((sum, activity) => sum + (activity.value ?? 0), 0);
+            return {
+                yearRow,
+                width,
+                height,
+                monthLabels,
+                yearTotalCount,
+            };
+        });
+    }, [yearRows, blockSize, blockWidth, blockMargin, labelHeight, labels.months, data]);
+    const maxWidth = Math.max(...rowData.map((r) => r.width));
+    const totalWidth = weekdayLabelWidth + maxWidth + strokePadding * 2;
+    return (_jsx("div", { "data-slot": "calendar-heatmap-body", className: cn("flex max-w-full flex-col gap-6 overflow-x-auto overflow-y-hidden py-4", className), ...props, children: rowData.map(({ yearRow, height, monthLabels, yearTotalCount }) => (_jsxs("div", { children: [!hideYearLabels && (_jsx("div", { className: cn("mb-2 text-muted-foreground", yearClassName), children: yearRow.year })), _jsx("svg", { role: "img", "aria-label": (labels.heatmapLabel ?? "Contribution heatmap for {{year}}").replace("{{year}}", String(yearRow.year)), className: "block overflow-visible rounded-sm focus-visible:nc-focus-outline focus-visible:outline-ring", height: height + strokePadding * 2, viewBox: `0 0 ${totalWidth} ${height + strokePadding * 2}`, width: totalWidth, children: _jsxs("g", { transform: `translate(0, ${strokePadding})`, children: [!hideMonthLabels && (_jsx("g", { className: cn("fill-current font-mono", labelClassName), children: monthLabels.map(({ label, weekIndex }) => (_jsx("text", { dominantBaseline: "hanging", x: weekdayLabelWidth + strokePadding + (blockWidth + blockMargin) * weekIndex, style: { fontSize: `${fontSize * 0.75}px` }, children: label }, `${yearRow.year}-${weekIndex}`))) })), !hideWeekdayLabels && (_jsx("g", { className: cn("fill-current font-mono text-xs", labelClassName), children: labels.weekdays?.map((label, dayIndex) => {
+                                    const adjustedIndex = (dayIndex + weekStart) % 7;
+                                    const adjustedLabel = labels.weekdays?.[adjustedIndex] || label;
+                                    return (_jsx("text", { x: 0, y: labelHeight + (blockSize + blockMargin) * dayIndex + blockSize / 2, dominantBaseline: "middle", textAnchor: "start", style: { fontSize: `${fontSize * 0.75}px` }, children: adjustedLabel }, `weekday-${yearRow.year}-${label}`));
+                                }) })), _jsx("g", { transform: `translate(${weekdayLabelWidth + strokePadding}, 0)`, children: yearRow.weeks.map((week, weekIndex) => week.map((activity, dayIndex) => {
+                                    if (!activity) {
+                                        return null;
+                                    }
+                                    return (_jsx(Fragment, { children: children({ activity, dayIndex, weekIndex }) }, `${yearRow.year}-${activity.date}`));
+                                })) })] }) }), renderYearFooter?.({
+                    year: yearRow.year,
+                    totalCount: yearTotalCount,
+                })] }, `year-row-${yearRow.year}`))) }));
+};
+export const CalendarHeatmapFooter = ({ className, ...props }) => (_jsx("div", { "data-slot": "calendar-heatmap-footer", className: cn("flex flex-wrap gap-1 whitespace-nowrap sm:gap-x-4", className), ...props }));
+export const CalendarHeatmapStat = ({ compute, label, className, children, ...props }) => {
+    const { data, totalCount, year, labels } = useCalendarHeatmap();
+    const value = compute ? compute(data) : totalCount;
+    if (children) {
+        return _jsx(_Fragment, { children: children({ value, data, year }) });
+    }
+    const template = label ?? labels.stat ?? "{{value}} contributions in {{year}}";
+    return (_jsx("div", { "data-slot": "calendar-heatmap-stat", className: cn("text-muted-foreground tabular-nums", className), ...props, children: template.replace("{{value}}", String(value)).replace("{{year}}", String(year)) }));
+};
+export const CalendarHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
+    const { levels, isNormalized, blockSize, blockWidth, blockRadius, colors, labels } = useCalendarHeatmap();
+    const lessLabel = labelsProp?.less ?? "Less";
+    const moreLabel = labelsProp?.more ?? "More";
+    const legendLevels = Array.from({ length: levels }, (_, i) => (isNormalized ? i + 1 : i));
+    return (_jsxs("fieldset", { "data-slot": "calendar-heatmap-legend", "aria-label": labels.legendLabel ?? "Activity intensity legend", className: cn("ml-auto flex items-center gap-1 text-muted-foreground", className), ...props, children: [_jsx("span", { className: "mr-1 font-medium text-xs", children: lessLabel }), legendLevels.map((level) => children ? (_jsx(Fragment, { children: children({ level }) }, `legend-level-${level}`)) : (_jsx("svg", { role: "img", "aria-label": (labels.legendLevelLabel ?? "{{level}} contributions").replace("{{level}}", String(level)), height: blockSize, width: blockWidth, children: _jsx("rect", { "data-level": level, height: blockSize, rx: blockRadius, ry: blockRadius, width: blockWidth, style: {
+                        fill: getLevelFill(level, levels, isNormalized, true, false, colors),
+                    } }) }, `legend-level-${level}`))), _jsx("span", { className: "ml-1 font-medium text-xs", children: moreLabel })] }));
+};

package/dist/components/model-identity.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export type ModelIdentityProps = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+    label?: ReactNode;
+    model: string;
+    markSize?: number;
+};
+export declare function ModelIdentity({ label, model, markSize, ...props }: ModelIdentityProps): import("react").JSX.Element;
+//# sourceMappingURL=model-identity.d.ts.map

package/dist/components/model-identity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-identity.d.ts","sourceRoot":"","sources":["../../src/components/model-identity.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAcrF"}

package/dist/components/model-identity.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModelMark } from "./model-mark.js";
+export function ModelIdentity({ label, model, markSize, ...props }) {
+    const separator = model.indexOf("/");
+    const author = separator === -1 ? "" : model.slice(0, separator);
+    const name = typeof label === "string" ? label : separator === -1 ? model : model.slice(separator + 1);
+    return (_jsx(ModelMark, { author: author, name: name, ...(markSize === undefined ? {} : { size: markSize }), ...props }));
+}

package/dist/components/object-workspace.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+export type ObjectFact = {
+    label: string;
+    value: ReactNode;
+    icon?: ReactNode;
+};
+export type ObjectIdentitySupportFacts = {
+    facts: readonly ObjectFact[];
+    label: string;
+};
+export declare function ObjectIdentity({ visual, title, description, metadata, action, editAction, layout, support, }: {
+    visual: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    metadata?: ReactNode;
+    action?: ReactNode;
+    editAction?: ReactNode;
+    layout?: "inline" | "stacked";
+    support?: ObjectIdentitySupportFacts;
+}): import("react").JSX.Element;
+export declare function ObjectOverview({ primary, supporting, }: {
+    primary: ReactNode;
+    supporting: ReactNode;
+}): import("react").JSX.Element;
+export declare function ObjectSection({ title, description, action, icon, children, }: {
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ObjectFacts({ facts, density, }: {
+    facts: readonly ObjectFact[];
+    density?: "compact" | "default";
+}): import("react").JSX.Element;
+//# sourceMappingURL=object-workspace.d.ts.map

package/dist/components/object-workspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-workspace.d.ts","sourceRoot":"","sources":["../../src/components/object-workspace.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE/E,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAiB,EACjB,OAAO,GACR,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,0BAA0B,CAAC;CACtC,+BAwCA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,GACX,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;CACvB,+BAUA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAoBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAmB,GACpB,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,+BA6BA"}

package/dist/components/object-workspace.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "./card.js";
+import { ObjectIdentitySupport } from "../internal/object-identity-support.js";
+export function ObjectIdentity({ visual, title, description, metadata, action, editAction, layout = "inline", support, }) {
+    return (_jsxs(Card, { className: layout === "inline"
+            ? "min-w-0 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,1.25fr)] lg:items-center"
+            : "min-w-0", render: _jsx("header", { "data-slot": "object-identity" }), size: "sm", children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex min-w-0 items-center gap-4", children: [_jsx("div", { className: "shrink-0", children: visual }), _jsxs("div", { className: "grid min-w-0 gap-1.5", children: [_jsx(CardTitle, { children: _jsx("h2", { className: "wrap-anywhere", children: title }) }), description ? _jsx(CardDescription, { children: description }) : null, metadata ? (_jsx("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: metadata })) : null] })] }), editAction ? _jsx(CardAction, { children: editAction }) : null] }), support || action ? (_jsxs(CardContent, { className: "flex min-w-0 flex-wrap items-start gap-4", children: [support ? (_jsx(ObjectIdentitySupport, { label: support.label, children: _jsx(ObjectFacts, { density: "compact", facts: support.facts }) })) : null, action ? _jsx("div", { className: "min-w-0 flex-1 basis-full", children: action }) : null] })) : null] }));
+}
+export function ObjectOverview({ primary, supporting, }) {
+    return (_jsxs("div", { "data-slot": "object-overview", className: "grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]", children: [_jsx("div", { className: "grid min-w-0 gap-6", children: primary }), _jsx("div", { className: "grid min-w-0 gap-6", children: supporting })] }));
+}
+export function ObjectSection({ title, description, action, icon, children, }) {
+    return (_jsxs(Card, { "data-slot": "object-section", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsxs("h3", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground [&_svg]:size-4", children: icon })) : null, title] }) }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(CardContent, { children: children })] }));
+}
+export function ObjectFacts({ facts, density = "default", }) {
+    return (_jsx("dl", { "data-density": density, "data-slot": "object-facts", className: density === "compact"
+            ? "grid min-w-0 grid-cols-2 gap-x-6 gap-y-2"
+            : "grid min-w-0 gap-x-6 gap-y-5 sm:grid-cols-2", children: facts.map((fact) => (_jsxs("div", { className: density === "compact" ? "grid min-w-0 gap-0.5" : "grid min-w-0 gap-1.5", children: [_jsxs("dt", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [fact.icon ? (_jsx("span", { "aria-hidden": "true", className: "[&_svg]:size-3.5", children: fact.icon })) : null, fact.label] }), _jsx("dd", { className: "text-sm wrap-anywhere", children: fact.value })] }, fact.label))) }));
+}

package/dist/components/progress.d.ts

@@ -12,8 +12,9 @@ declare const progressIndicatorVariants: (props?: ({
     tone?: "default" | "warning" | "critical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>["tone"]>;
-declare function Progress({ className, children, value, min, max, tone, ...props }: ProgressPrimitive.Root.Props & {
+declare function Progress({ className, children, value, min, max, tone, indicatorColor, ...props }: ProgressPrimitive.Root.Props & {
     tone?: ProgressTone;
+    indicatorColor?: string;
 }): import("react").JSX.Element;
 declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react").JSX.Element;
 declare function ProgressIndicator({ className, style, ...props }: ProgressPrimitive.Indicator.Props): import("react").JSX.Element;

package/dist/components/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE;;;;;;;GAOG;AAEH,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAYxF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAA;CAAE,+BAwBxD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BA6B3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE;;;;;;;GAOG;AAEH,QAAA,MAAM,yBAAyB;;8EAc9B,CAAC;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAiBxF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAgB,EAChB,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,YAAY,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,+BAwBjF;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAW5E;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,SAAS,CAAC,KAAK,+BAkC3F;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,KAAK,+BAQ5E;AAED,OAAO,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,yBAAyB,GAC1B,CAAC;AACF,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/progress.js

@@ -30,26 +30,27 @@ const ProgressStateContext = createContext({
     tone: "default",
     overCap: false,
 });
-function Progress({ className, children, value, min = 0, max = 100, tone = "default", ...props }) {
+function Progress({ className, children, value, min = 0, max = 100, tone = "default", indicatorColor, ...props }) {
     const measured = typeof value === "number" && Number.isFinite(value);
     const scale = measured && max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
     const overCap = measured && value > max;
-    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressStateContext.Provider, { value: { scale, tone, overCap }, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
+    return (_jsx(ProgressPrimitive.Root, { value: value, min: min, max: max, "data-slot": "progress", "data-tone": tone, "data-over-cap": overCap || undefined, className: cn("flex flex-wrap gap-3", className), ...props, children: _jsxs(ProgressStateContext.Provider, { value: { scale, tone, overCap, indicatorColor }, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }) }));
 }
 function ProgressTrack({ className, ...props }) {
     return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), "data-slot": "progress-track", ...props }));
 }
 function ProgressIndicator({ className, style, ...props }) {
-    const { scale, tone, overCap } = useContext(ProgressStateContext);
+    const { scale, tone, overCap, indicatorColor } = useContext(ProgressStateContext);
     const indicatorStyle = (state) => {
         const resolvedStyle = typeof style === "function" ? style(state) : style;
         return {
             width: "100%",
             "--progress-scale": scale,
+            ...(indicatorColor ? { "--progress-indicator-color": indicatorColor } : {}),
             ...resolvedStyle,
         };
     };
-    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", "data-over-cap": overCap || undefined, className: cn(progressIndicatorVariants({ tone }), 
+    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", "data-over-cap": overCap || undefined, className: cn(progressIndicatorVariants({ tone }), indicatorColor && "bg-(--progress-indicator-color)", 
         // After the variant, so the merge keeps this one paint: an allowance
         // spent reads the same whatever tone the product chose for approaching
         // it.

package/dist/components/settings-facts.d.ts

@@ -23,6 +23,7 @@ export type SettingsFactsSectionProps = Omit<ComponentPropsWithoutRef<"section">
     headingId: string;
     title: string;
     surface?: CardSurface;
+    factLayout?: "cells" | "plain";
     /**
      * The card's density. `sm` is the settings sidebar's compact card; a caller
      * that sits beside full-size cards passes the default so its title and
@@ -30,5 +31,5 @@ export type SettingsFactsSectionProps = Omit<ComponentPropsWithoutRef<"section">
      */
     size?: ComponentPropsWithoutRef<typeof Card>["size"];
 };
-export declare function SettingsFactsSection({ action, description, facts, footer, missingValueLabel, headingId, title, surface, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
+export declare function SettingsFactsSection({ action, description, facts, footer, missingValueLabel, headingId, title, surface, factLayout, size, ...props }: SettingsFactsSectionProps): import("react").JSX.Element;
 //# sourceMappingURL=settings-facts.d.ts.map

package/dist/components/settings-facts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjE,OAAO,EACL,IAAI,EAOJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,wBAAwB,CAAC,SAAS,CAAC,EACnC,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,WAAW,EACX,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,yBAAyB,+BA8C3B"}
+{"version":3,"file":"settings-facts.d.ts","sourceRoot":"","sources":["../../src/components/settings-facts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjE,OAAO,EACL,IAAI,EAOJ,KAAK,WAAW,EACjB,MAAM,QAAQ,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,wBAAwB,CAAC,SAAS,CAAC,EACnC,UAAU,GAAG,WAAW,CACzB,GAAG;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,WAAW,EACX,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,UAAoB,EACpB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,yBAAyB,+BAiE3B"}

package/dist/components/settings-facts.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Separator } from "./separator.js";
 import { cn } from "../lib/utils.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./card.js";
-export function SettingsFactsSection({ action, description, facts, footer, missingValueLabel, headingId, title, surface = "resting", size = "sm", ...props }) {
-    return (_jsxs(Card, { render: _jsx("section", {}), ...props, "aria-labelledby": headingId, surface: surface, size: size, className: "min-w-0", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx("h2", { id: headingId, tabIndex: -1, children: title }) }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(Separator, {}), _jsx(CardContent, { children: _jsx("dl", { className: "grid min-w-0 grid-cols-1 gap-3 nc-type-body-sm sm:grid-cols-2", children: facts.map((fact) => (_jsxs(Card, { className: cn("min-w-0 gap-1 px-(--card-spacing)", fact.block && "col-span-full"), size: "sm", surface: "outlined", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: cn("min-w-0 wrap-anywhere", fact.block && "whitespace-pre-wrap", (fact.value == null || fact.value === "") && "text-muted-foreground"), children: fact.value == null || fact.value === "" ? missingValueLabel : fact.value })] }, fact.label))) }) }), footer ? _jsx(CardFooter, { className: "flex-wrap gap-3", children: footer }) : null] }));
+export function SettingsFactsSection({ action, description, facts, footer, missingValueLabel, headingId, title, surface = "resting", factLayout = "cells", size = "sm", ...props }) {
+    return (_jsxs(Card, { render: _jsx("section", {}), ...props, "aria-labelledby": headingId, surface: surface, size: size, className: "min-w-0", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: _jsx("h2", { id: headingId, tabIndex: -1, children: title }) }), description ? _jsx(CardDescription, { children: description }) : null, action ? _jsx(CardAction, { children: action }) : null] }), _jsx(Separator, {}), _jsx(CardContent, { children: _jsx("dl", { className: cn("grid min-w-0 grid-cols-1 nc-type-body-sm sm:grid-cols-2", factLayout === "plain" ? "gap-x-8 gap-y-5" : "gap-3"), children: facts.map((fact) => {
+                        const content = (_jsxs(_Fragment, { children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: cn("min-w-0 wrap-anywhere", fact.block && "whitespace-pre-wrap", (fact.value == null || fact.value === "") && "text-muted-foreground"), children: fact.value == null || fact.value === "" ? missingValueLabel : fact.value })] }));
+                        return factLayout === "plain" ? (_jsx("div", { className: cn("flex min-w-0 flex-col gap-1", fact.block && "col-span-full"), children: content }, fact.label)) : (_jsx(Card, { className: cn("min-w-0 gap-1 px-(--card-spacing)", fact.block && "col-span-full"), size: "sm", surface: "outlined", children: content }, fact.label));
+                    }) }) }), footer ? _jsx(CardFooter, { className: "flex-wrap gap-3", children: footer }) : null] }));
 }