@omnitend/dashboard-for-laravel 0.34.0 → 0.36.0

package/dist/charts.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"charts.umd.cjs","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/useThemedChart.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.\n// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours\n// are dark AA \"emphasis\" shades (too muted for series), and status colours\n// shouldn't impersonate \"series 2\". Fallbacks mirror the shipped theme so\n// charts still render without the CSS (SSR / tests / a consumer who didn't\n// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test\n// that parses the Sass source (charts.test.ts), which is why this is exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#2563eb\"], // blue\n    [\"--dx-chart-2\", \"#65a30d\"], // lime\n    [\"--dx-chart-3\", \"#7c3aed\"], // violet\n    [\"--dx-chart-4\", \"#0d9488\"], // teal\n    [\"--dx-chart-5\", \"#ea580c\"], // orange\n    [\"--dx-chart-6\", \"#0891b2\"], // cyan\n    [\"--dx-chart-7\", \"#d97706\"], // amber\n    [\"--dx-chart-8\", \"#db2777\"], // pink\n];\n\n/** Resolve the themed categorical palette from the document root. */\nexport function getPalette(): string[] {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return PALETTE_VARS.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(document.documentElement);\n    return PALETTE_VARS.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string): string {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return fallback;\n    }\n    const value = getComputedStyle(document.documentElement)\n        .getPropertyValue(name)\n        .trim();\n    return value || fallback;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n    } = args;\n\n    const gridColor = withAlpha(themeColor(\"--bs-border-color\", \"#dee2e6\"), 0.6);\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\");\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed\n * stroke + translucent fill. Doughnut/pie: one colour per slice.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n): any[] {\n    const palette = getPalette();\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = color;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.15);\n            }\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","import { computed, type ComputedRef } from \"vue\";\nimport type { ChartData, ChartDataset, ChartOptions } from \"chart.js\";\nimport {\n    baseOptions,\n    applyPalette,\n    mergeOptions,\n    type ChartValueFormat,\n} from \"./chartTheme\";\n\n/**\n * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).\n * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they\n * render and the palette kind — everything else (theming, option-merge,\n * legend-default) is identical, and lived duplicated in both SFCs (#135).\n */\nexport interface ThemedChartProps<TType extends \"bar\" | \"line\"> {\n    /** X-axis category labels. */\n    labels: string[];\n    /** Chart.js datasets. Colours are themed when a dataset omits them. */\n    datasets: ChartDataset<TType>[];\n    /** Chart.js options; deep-merged over the themed defaults. */\n    options?: ChartOptions<TType>;\n    /** Format value-axis ticks and tooltips. */\n    valueFormat?: ChartValueFormat;\n    /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n    currencySymbol?: string;\n    /** Locale for number formatting. */\n    locale?: string;\n    /** Show the legend (default: only when there is more than one dataset). */\n    showLegend?: boolean;\n}\n\n/**\n * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the\n * data-viz palette to un-coloured datasets and deep-merges the consumer's\n * `options` over the dashboard-friendly defaults. Pass the reactive `props`\n * object (property access stays reactive inside the computeds).\n */\nexport function useThemedChart<TType extends \"bar\" | \"line\">(\n    type: TType,\n    props: ThemedChartProps<TType>,\n): {\n    chartData: ComputedRef<ChartData<TType>>;\n    mergedOptions: ComputedRef<ChartOptions<TType>>;\n} {\n    const chartData = computed(\n        () =>\n            ({\n                labels: props.labels,\n                datasets: applyPalette(props.datasets, type, props.labels.length),\n            }) as ChartData<TType>,\n    );\n\n    const mergedOptions = computed(\n        () =>\n            mergeOptions(\n                baseOptions({\n                    valueFormat: props.valueFormat,\n                    currencySymbol: props.currencySymbol,\n                    locale: props.locale,\n                    showLegend: props.showLegend ?? props.datasets.length > 1,\n                    hasValueAxis: true,\n                }),\n                props.options ?? {},\n            ) as ChartOptions<TType>,\n    );\n\n    return { chartData, mergedOptions };\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { Bar } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"bar\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst { chartData, mergedOptions } = useThemedChart(\"bar\", props);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { Line } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"line\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst { chartData, mergedOptions } = useThemedChart(\"line\", props);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => ({\n  labels: props.labels,\n  datasets: applyPalette(resolvedDatasets.value, \"doughnut\", props.labels.length),\n}));\n\nconst mergedOptions = computed(() =>\n  mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n    }),\n    props.options ?? {},\n  ),\n);\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","getPalette","fallback","styles","name","themeColor","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","single","dataset","index","next","_","i","useThemedChart","type","props","chartData","computed","mergedOptions","__props","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}
+{"version":3,"file":"charts.umd.cjs","sources":["../resources/js/components/charts/chartTheme.ts","../resources/js/components/charts/useThemedChart.ts","../resources/js/components/charts/DXBarChart.vue","../resources/js/components/charts/DXLineChart.vue","../resources/js/components/charts/DXDoughnutChart.vue"],"sourcesContent":["/**\n * Shared theming for the DX*Chart wrappers: the dedicated categorical chart\n * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /\n * legend clutter, responsive, formatted ticks), and a one-time Chart.js\n * registration. chart.js / vue-chartjs are OPTIONAL peer deps.\n */\nimport { Chart, registerables } from \"chart.js\";\nimport { getCurrentScope, onScopeDispose, ref, type Ref } from \"vue\";\n\nexport type ChartValueFormat = \"number\" | \"currency\" | \"percent\";\n\nconst isPlainObject = (value: unknown): value is Record<string, any> =>\n    !!value && typeof value === \"object\" && !Array.isArray(value);\n\n/** Deep-merge consumer `options` over the themed defaults (arrays replace). */\nexport function mergeOptions(\n    base: Record<string, any>,\n    override: Record<string, any>,\n): Record<string, any> {\n    const result: Record<string, any> = { ...base };\n    for (const [key, value] of Object.entries(override)) {\n        if (isPlainObject(value) && isPlainObject(result[key])) {\n            result[key] = mergeOptions(result[key], value);\n        } else {\n            result[key] = value;\n        }\n    }\n    return result;\n}\n\nlet registered = false;\n\n/**\n * Register Chart.js (idempotent). Uses the full `registerables` set so every\n * controller / scale / element / plugin (incl. Legend, Tooltip, Filler) is\n * available — chart.js is an external peer dep, so this adds no bundle weight.\n */\nexport function registerCharts(): void {\n    if (registered) return;\n    Chart.register(...registerables);\n    registered = true;\n}\n\n// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight\n// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.\n// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours\n// are dark AA \"emphasis\" shades (too muted for series), and status colours\n// shouldn't impersonate \"series 2\". Fallbacks mirror the shipped theme so\n// charts still render without the CSS (SSR / tests / a consumer who didn't\n// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test\n// that parses the Sass source (charts.test.ts), which is why this is exported.\nexport const PALETTE_VARS: Array<[string, string]> = [\n    [\"--dx-chart-1\", \"#2563eb\"], // blue\n    [\"--dx-chart-2\", \"#65a30d\"], // lime\n    [\"--dx-chart-3\", \"#7c3aed\"], // violet\n    [\"--dx-chart-4\", \"#0d9488\"], // teal\n    [\"--dx-chart-5\", \"#ea580c\"], // orange\n    [\"--dx-chart-6\", \"#0891b2\"], // cyan\n    [\"--dx-chart-7\", \"#d97706\"], // amber\n    [\"--dx-chart-8\", \"#db2777\"], // pink\n];\n\n/**\n * The element whose computed style the theme variables are read from.\n *\n * Bootstrap 5.3 allows `data-bs-theme` on ANY container, not just `<html>` — a\n * dark card on a light page is a supported pattern. Reading the variables off\n * `document.documentElement` therefore gives a *nested* scope the wrong palette\n * (#161), so every resolver takes the chart's own container and only falls back\n * to the root when it has none (SSR, a caller outside a component).\n */\nfunction themeScope(scope?: Element | null): Element | null {\n    if (typeof document === \"undefined\" || typeof getComputedStyle === \"undefined\") {\n        return null;\n    }\n    if (scope !== undefined && scope !== null) return scope;\n    return document.documentElement;\n}\n\n/**\n * Resolve the themed categorical palette.\n *\n * @param scope The chart's container element; its computed style decides which\n *   `data-bs-theme` scope applies. Omit (or pass null) to read the document\n *   root — the pre-#161 behaviour, kept so the exported signature stays\n *   backward compatible.\n */\nexport function getPalette(scope?: Element | null): string[] {\n    const host = themeScope(scope);\n    if (host === null) {\n        return PALETTE_VARS.map(([, fallback]) => fallback);\n    }\n    const styles = getComputedStyle(host);\n    return PALETTE_VARS.map(([name, fallback]) => {\n        const value = styles.getPropertyValue(name).trim();\n        return value || fallback;\n    });\n}\n\n/** Read a single theme colour (e.g. the body text colour) with a fallback. */\nfunction themeColor(name: string, fallback: string, scope?: Element | null): string {\n    const host = themeScope(scope);\n    if (host === null) {\n        return fallback;\n    }\n    const value = getComputedStyle(host).getPropertyValue(name).trim();\n    return value || fallback;\n}\n\n// ---------------------------------------------------------------------------\n// Colour-mode reactivity (#161)\n//\n// The palette lives in CSS variables, which Vue cannot track: a computed that\n// calls getPalette() depends only on the props it also reads, so flipping\n// `data-bs-theme` repaints the page but leaves every MOUNTED chart on the old\n// palette until a prop changes or it remounts. One shared MutationObserver\n// bumps a version ref that the chart computeds read, which re-resolves the\n// variables. `subtree: true` because the attribute can sit on any container,\n// and `attributeFilter` keeps the observer from firing on unrelated mutations.\n// ---------------------------------------------------------------------------\n\nconst colorModeVersion = ref(0);\nlet colorModeObserver: MutationObserver | null = null;\nlet colorModeWatchers = 0;\n\n/**\n * A version ref that increments whenever a `data-bs-theme` attribute changes\n * anywhere in the document. Read it inside a computed that resolves theme\n * variables to make that computed re-run on a colour-mode switch.\n *\n * The observer is started on first use and disconnected when the last consumer's\n * effect scope is disposed, so nothing leaks after the charts unmount. Called\n * outside an effect scope (or without a DOM) it is a no-op returning a static\n * ref — there would be no teardown hook to disconnect the observer.\n */\nexport function useColorModeVersion(): Ref<number> {\n    if (\n        typeof document === \"undefined\" ||\n        typeof MutationObserver === \"undefined\" ||\n        getCurrentScope() === undefined\n    ) {\n        return colorModeVersion;\n    }\n\n    colorModeWatchers += 1;\n    if (colorModeObserver === null) {\n        colorModeObserver = new MutationObserver(() => {\n            colorModeVersion.value += 1;\n        });\n        colorModeObserver.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"data-bs-theme\"],\n            subtree: true,\n        });\n    }\n\n    onScopeDispose(() => {\n        colorModeWatchers -= 1;\n        if (colorModeWatchers === 0 && colorModeObserver !== null) {\n            colorModeObserver.disconnect();\n            colorModeObserver = null;\n        }\n    });\n\n    return colorModeVersion;\n}\n\n/** Add an alpha channel to a hex or rgb() colour (best-effort). */\nexport function withAlpha(color: string, alpha: number): string {\n    const hex = color.replace(/^#/, \"\");\n    if (/^[0-9a-f]{6}$/i.test(hex)) {\n        const r = parseInt(hex.slice(0, 2), 16);\n        const g = parseInt(hex.slice(2, 4), 16);\n        const b = parseInt(hex.slice(4, 6), 16);\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    const rgbMatch = color.match(/^rgba?\\(([^)]+)\\)$/);\n    if (rgbMatch) {\n        const [r, g, b] = rgbMatch[1].split(\",\").map((n) => n.trim());\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n    }\n    return color;\n}\n\n/** Format a numeric value per the chart's value format (for tick/tooltips). */\nexport function formatValue(\n    value: number,\n    format: ChartValueFormat | undefined,\n    currencySymbol: string,\n    locale?: string,\n): string {\n    const num = new Intl.NumberFormat(locale, {\n        maximumFractionDigits: 2,\n    }).format(value);\n    if (format === \"currency\") return `${currencySymbol}${num}`;\n    if (format === \"percent\") return `${num}%`;\n    return num;\n}\n\nexport interface BaseOptionArgs {\n    valueFormat?: ChartValueFormat;\n    currencySymbol?: string;\n    locale?: string;\n    /** Show the legend (default: false for a single dataset, true for many). */\n    showLegend?: boolean;\n    /** Whether the chart has value axes (bar/line) vs none (doughnut). */\n    hasValueAxis?: boolean;\n    /** The chart's container element — decides which `data-bs-theme` scope the\n     *  grid/tick colours resolve against (#161). Defaults to the document root. */\n    scope?: Element | null;\n}\n\n/** Dashboard default Chart.js options merged under any consumer `options`. */\nexport function baseOptions(args: BaseOptionArgs): Record<string, any> {\n    const {\n        valueFormat,\n        currencySymbol = \"£\",\n        locale,\n        showLegend = false,\n        hasValueAxis = true,\n        scope,\n    } = args;\n\n    const gridColor = withAlpha(\n        themeColor(\"--bs-border-color\", \"#dee2e6\", scope),\n        0.6,\n    );\n    const tickColor = themeColor(\"--bs-secondary-color\", \"#6c757d\", scope);\n\n    const options: Record<string, any> = {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n            legend: { display: showLegend, labels: { color: tickColor } },\n            tooltip: {\n                callbacks: {\n                    label: (ctx: any) => {\n                        const raw = ctx.parsed?.y ?? ctx.parsed ?? ctx.raw;\n                        const value = typeof raw === \"number\" ? raw : Number(raw);\n                        const formatted = Number.isFinite(value)\n                            ? formatValue(value, valueFormat, currencySymbol, locale)\n                            : String(raw);\n                        const label = ctx.dataset?.label ?? ctx.label ?? \"\";\n                        return label ? `${label}: ${formatted}` : formatted;\n                    },\n                },\n            },\n        },\n    };\n\n    if (hasValueAxis) {\n        options.scales = {\n            x: {\n                grid: { display: false },\n                border: { color: gridColor },\n                ticks: { color: tickColor },\n            },\n            y: {\n                beginAtZero: true,\n                grid: { color: gridColor, drawBorder: false },\n                border: { display: false },\n                ticks: {\n                    color: tickColor,\n                    callback: (value: number | string) =>\n                        formatValue(Number(value), valueFormat, currencySymbol, locale),\n                },\n            },\n        };\n    }\n\n    return options;\n}\n\n/**\n * Apply the themed palette to any dataset that doesn't set its own colours.\n * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed\n * stroke + translucent fill. Doughnut/pie: one colour per slice.\n *\n * `scope` is the chart's container element; the palette is resolved from its\n * computed style so a nested `data-bs-theme` container themes correctly (#161).\n * Omit it to resolve against the document root.\n */\nexport function applyPalette(\n    datasets: any[],\n    kind: \"bar\" | \"line\" | \"doughnut\",\n    labelsCount: number,\n    scope?: Element | null,\n): any[] {\n    const palette = getPalette(scope);\n    const single = datasets.length === 1;\n\n    return datasets.map((dataset, index) => {\n        const next = { ...dataset };\n        const color = palette[index % palette.length];\n\n        if (kind === \"doughnut\") {\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = Array.from(\n                    { length: labelsCount },\n                    (_, i) => palette[i % palette.length],\n                );\n            }\n            return next;\n        }\n\n        if (kind === \"line\") {\n            if (next.borderColor === undefined) next.borderColor = color;\n            if (next.backgroundColor === undefined) {\n                next.backgroundColor = withAlpha(color, 0.15);\n            }\n            if (next.tension === undefined) next.tension = 0.3;\n            if (next.fill === undefined) next.fill = true;\n            if (next.pointRadius === undefined) next.pointRadius = 2;\n            return next;\n        }\n\n        // bar\n        if (next.backgroundColor === undefined) {\n            next.backgroundColor =\n                single && labelsCount > 1\n                    ? Array.from({ length: labelsCount }, () => color)\n                    : color;\n        }\n        if (next.borderRadius === undefined) next.borderRadius = 4;\n        return next;\n    });\n}\n","import { computed, type ComputedRef, type Ref } from \"vue\";\nimport type { ChartData, ChartDataset, ChartOptions } from \"chart.js\";\nimport {\n    baseOptions,\n    applyPalette,\n    mergeOptions,\n    useColorModeVersion,\n    type ChartValueFormat,\n} from \"./chartTheme\";\n\n/**\n * Shared props for the value-axis chart wrappers (`DXBarChart`, `DXLineChart`).\n * `DXBarChart` and `DXLineChart` differ ONLY in the chart.js component they\n * render and the palette kind — everything else (theming, option-merge,\n * legend-default) is identical, and lived duplicated in both SFCs (#135).\n */\nexport interface ThemedChartProps<TType extends \"bar\" | \"line\"> {\n    /** X-axis category labels. */\n    labels: string[];\n    /** Chart.js datasets. Colours are themed when a dataset omits them. */\n    datasets: ChartDataset<TType>[];\n    /** Chart.js options; deep-merged over the themed defaults. */\n    options?: ChartOptions<TType>;\n    /** Format value-axis ticks and tooltips. */\n    valueFormat?: ChartValueFormat;\n    /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n    currencySymbol?: string;\n    /** Locale for number formatting. */\n    locale?: string;\n    /** Show the legend (default: only when there is more than one dataset). */\n    showLegend?: boolean;\n}\n\n/**\n * The themed-chart body shared by `DXBarChart` and `DXLineChart`: applies the\n * data-viz palette to un-coloured datasets and deep-merges the consumer's\n * `options` over the dashboard-friendly defaults. Pass the reactive `props`\n * object (property access stays reactive inside the computeds).\n *\n * `host` is the chart's own container element (a template ref). It is BOTH the\n * `data-bs-theme` scope the palette resolves against and — being a ref read\n * inside the computeds — the trigger that re-themes once it is populated on\n * mount, since the first render happens before a template ref exists (#161).\n */\nexport function useThemedChart<TType extends \"bar\" | \"line\">(\n    type: TType,\n    props: ThemedChartProps<TType>,\n    host: Ref<HTMLElement | null>,\n): {\n    chartData: ComputedRef<ChartData<TType>>;\n    mergedOptions: ComputedRef<ChartOptions<TType>>;\n} {\n    // Bumped by a MutationObserver on every `data-bs-theme` change; read below\n    // so the CSS-variable palette — invisible to Vue's reactivity — is\n    // re-resolved when the colour mode flips under a mounted chart.\n    const colorModeVersion = useColorModeVersion();\n\n    const chartData = computed(() => {\n        void colorModeVersion.value;\n        return {\n            labels: props.labels,\n            datasets: applyPalette(\n                props.datasets,\n                type,\n                props.labels.length,\n                host.value,\n            ),\n        } as ChartData<TType>;\n    });\n\n    const mergedOptions = computed(() => {\n        void colorModeVersion.value;\n        return mergeOptions(\n            baseOptions({\n                valueFormat: props.valueFormat,\n                currencySymbol: props.currencySymbol,\n                locale: props.locale,\n                showLegend: props.showLegend ?? props.datasets.length > 1,\n                hasValueAxis: true,\n                scope: host.value,\n            }),\n            props.options ?? {},\n        ) as ChartOptions<TType>;\n    });\n\n    return { chartData, mergedOptions };\n}\n","<!--\n  @component\n  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,\n  formatted value ticks, responsive, legend hidden for a single series). Pass\n  `labels` + `datasets`; `options` deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Bar :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Bar } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"bar\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"bar\", props, host);\n</script>\n","<!--\n  @component\n  A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the\n  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)\n  and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Line :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Line } from \"vue-chartjs\";\nimport { registerCharts } from \"./chartTheme\";\nimport { useThemedChart, type ThemedChartProps } from \"./useThemedChart\";\n\nregisterCharts();\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? datasets.length > 1` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<ThemedChartProps<\"line\">>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card (#161).\nconst host = ref<HTMLElement | null>(null);\n\nconst { chartData, mergedOptions } = useThemedChart(\"line\", props, host);\n</script>\n","<!--\n  @component\n  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one\n  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass\n  `labels` + either `data` (a number array) or full `datasets`; `options`\n  deep-merges over the defaults.\n\n  Requires the optional peer deps `chart.js` and `vue-chartjs`.\n-->\n<template>\n  <div ref=\"host\" class=\"dx-chart\">\n    <Doughnut :data=\"chartData\" :options=\"mergedOptions\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport { Doughnut } from \"vue-chartjs\";\nimport {\n  registerCharts,\n  baseOptions,\n  applyPalette,\n  mergeOptions,\n  useColorModeVersion,\n  type ChartValueFormat,\n} from \"./chartTheme\";\n\nregisterCharts();\n\ninterface Props {\n  /** Slice labels. */\n  labels: string[];\n  /** Convenience: a single number array (one value per label). */\n  data?: number[];\n  /** Full Chart.js datasets (alternative to `data`). */\n  datasets?: any[];\n  /** Chart.js options; deep-merged over the themed defaults. */\n  options?: Record<string, any>;\n  /** Format tooltip values. */\n  valueFormat?: ChartValueFormat;\n  /** Currency symbol for valueFormat: \"currency\" (default \"£\"). */\n  currencySymbol?: string;\n  /** Locale for number formatting. */\n  locale?: string;\n  /** Show the legend (default: true — slices need identifying). */\n  showLegend?: boolean;\n}\n\n// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the\n// `?? true` default can actually fire when it isn't passed.\nconst props = withDefaults(defineProps<Props>(), {\n  currencySymbol: \"£\",\n  showLegend: undefined,\n});\n\n// The container is the `data-bs-theme` scope the palette resolves against, so a\n// chart inside a dark card on a light page themes from the card. Reading the ref\n// inside the computeds also re-themes on mount, when the first (pre-ref) render\n// had to fall back to the document root (#161). DXDoughnutChart doesn't share\n// `useThemedChart` (its data shape differs), so the wiring is repeated here.\nconst host = ref<HTMLElement | null>(null);\n\n// Bumped by a MutationObserver on every `data-bs-theme` change; read below so\n// the CSS-variable palette — invisible to Vue's reactivity — is re-resolved\n// when the colour mode flips under a mounted chart.\nconst colorModeVersion = useColorModeVersion();\n\nconst resolvedDatasets = computed(() =>\n  props.datasets ?? [{ data: props.data ?? [] }],\n);\n\nconst chartData = computed(() => {\n  void colorModeVersion.value;\n  return {\n    labels: props.labels,\n    datasets: applyPalette(\n      resolvedDatasets.value,\n      \"doughnut\",\n      props.labels.length,\n      host.value,\n    ),\n  };\n});\n\nconst mergedOptions = computed(() => {\n  void colorModeVersion.value;\n  return mergeOptions(\n    baseOptions({\n      valueFormat: props.valueFormat,\n      currencySymbol: props.currencySymbol,\n      locale: props.locale,\n      showLegend: props.showLegend ?? true,\n      hasValueAxis: false,\n      scope: host.value,\n    }),\n    props.options ?? {},\n  );\n});\n</script>\n"],"names":["isPlainObject","value","mergeOptions","base","override","result","key","registered","registerCharts","Chart","registerables","PALETTE_VARS","themeScope","scope","getPalette","host","fallback","styles","name","themeColor","colorModeVersion","ref","colorModeObserver","colorModeWatchers","useColorModeVersion","getCurrentScope","onScopeDispose","withAlpha","color","alpha","hex","r","g","b","rgbMatch","n","formatValue","format","currencySymbol","locale","num","baseOptions","args","valueFormat","showLegend","hasValueAxis","gridColor","tickColor","options","ctx","raw","_a","formatted","label","_b","applyPalette","datasets","kind","labelsCount","palette","single","dataset","index","next","_","i","useThemedChart","type","props","chartData","computed","mergedOptions","__props","_createElementBlock","_createVNode","_unref","Bar","Line","resolvedDatasets","Doughnut"],"mappings":"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"}

package/dist/components/charts/chartTheme.d.ts

@@ -1,3 +1,4 @@
+import { type Ref } from "vue";
 export type ChartValueFormat = "number" | "currency" | "percent";
 /** Deep-merge consumer `options` over the themed defaults (arrays replace). */
 export declare function mergeOptions(base: Record<string, any>, override: Record<string, any>): Record<string, any>;
@@ -8,8 +9,26 @@ export declare function mergeOptions(base: Record<string, any>, override: Record
  */
 export declare function registerCharts(): void;
 export declare const PALETTE_VARS: Array<[string, string]>;
-/** Resolve the themed categorical palette from the document root. */
-export declare function getPalette(): string[];
+/**
+ * Resolve the themed categorical palette.
+ *
+ * @param scope The chart's container element; its computed style decides which
+ *   `data-bs-theme` scope applies. Omit (or pass null) to read the document
+ *   root — the pre-#161 behaviour, kept so the exported signature stays
+ *   backward compatible.
+ */
+export declare function getPalette(scope?: Element | null): string[];
+/**
+ * A version ref that increments whenever a `data-bs-theme` attribute changes
+ * anywhere in the document. Read it inside a computed that resolves theme
+ * variables to make that computed re-run on a colour-mode switch.
+ *
+ * The observer is started on first use and disconnected when the last consumer's
+ * effect scope is disposed, so nothing leaks after the charts unmount. Called
+ * outside an effect scope (or without a DOM) it is a no-op returning a static
+ * ref — there would be no teardown hook to disconnect the observer.
+ */
+export declare function useColorModeVersion(): Ref<number>;
 /** Add an alpha channel to a hex or rgb() colour (best-effort). */
 export declare function withAlpha(color: string, alpha: number): string;
 /** Format a numeric value per the chart's value format (for tick/tooltips). */
@@ -22,6 +41,9 @@ export interface BaseOptionArgs {
     showLegend?: boolean;
     /** Whether the chart has value axes (bar/line) vs none (doughnut). */
     hasValueAxis?: boolean;
+    /** The chart's container element — decides which `data-bs-theme` scope the
+     *  grid/tick colours resolve against (#161). Defaults to the document root. */
+    scope?: Element | null;
 }
 /** Dashboard default Chart.js options merged under any consumer `options`. */
 export declare function baseOptions(args: BaseOptionArgs): Record<string, any>;
@@ -29,5 +51,9 @@ export declare function baseOptions(args: BaseOptionArgs): Record<string, any>;
  * Apply the themed palette to any dataset that doesn't set its own colours.
  * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed
  * stroke + translucent fill. Doughnut/pie: one colour per slice.
+ *
+ * `scope` is the chart's container element; the palette is resolved from its
+ * computed style so a nested `data-bs-theme` container themes correctly (#161).
+ * Omit it to resolve against the document root.
  */
-export declare function applyPalette(datasets: any[], kind: "bar" | "line" | "doughnut", labelsCount: number): any[];
+export declare function applyPalette(datasets: any[], kind: "bar" | "line" | "doughnut", labelsCount: number, scope?: Element | null): any[];

package/dist/components/charts/useThemedChart.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef } from "vue";
+import { type ComputedRef, type Ref } from "vue";
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { type ChartValueFormat } from "./chartTheme";
 /**
@@ -28,8 +28,13 @@ export interface ThemedChartProps<TType extends "bar" | "line"> {
  * data-viz palette to un-coloured datasets and deep-merges the consumer's
  * `options` over the dashboard-friendly defaults. Pass the reactive `props`
  * object (property access stays reactive inside the computeds).
+ *
+ * `host` is the chart's own container element (a template ref). It is BOTH the
+ * `data-bs-theme` scope the palette resolves against and — being a ref read
+ * inside the computeds — the trigger that re-themes once it is populated on
+ * mount, since the first render happens before a template ref exists (#161).
  */
-export declare function useThemedChart<TType extends "bar" | "line">(type: TType, props: ThemedChartProps<TType>): {
+export declare function useThemedChart<TType extends "bar" | "line">(type: TType, props: ThemedChartProps<TType>, host: Ref<HTMLElement | null>): {
     chartData: ComputedRef<ChartData<TType>>;
     mergedOptions: ComputedRef<ChartOptions<TType>>;
 };

package/dist/components/extended/DXForm.vue.d.ts

@@ -44,12 +44,33 @@ interface Props {
      */
     cardTabs?: boolean;
     /**
-     * Form-wide field layout: "vertical" (default, label above input) or
-     * "horizontal" (label left, input right). Overridable per-field via
-     * `field.layout`. A field with `span: true` always renders full-width,
-     * regardless of layout.
+     * Form-wide field layout:
+     *
+     * - `"vertical"` (default) — label above input, always.
+     * - `"horizontal"` — label left, input right, always.
+     * - `"auto"` — horizontal when the form's **own container** is at least
+     *   `layoutThreshold` px wide, vertical below that. Container-driven, not
+     *   viewport-driven: a page narrowed by the dashboard sidebar, or a form
+     *   inside a modal, stacks even though the window is wide (which no
+     *   Bootstrap media query can see).
+     *
+     * Overridable per-field via `field.layout`. A field with `span: true`
+     * always renders full-width, regardless of layout.
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" | "horizontal" | "auto";
+    /**
+     * Container width (px) at or above which `layout: "auto"` goes horizontal.
+     * Ignored for the explicit `"vertical"`/`"horizontal"` layouts.
+     *
+     * Default 640, measured rather than guessed: with the default 3-column
+     * label the label's text area is `containerWidth / 4 - 18` px, so 640 gives
+     * it 142px — enough for a ~20-character label ("Unit price (ex VAT)"
+     * measures 128px at the theme's label font) to stay on one line, with the
+     * control column still 474px. Below ~584px that label starts wrapping,
+     * which is the cramped-label symptom this exists to avoid. Raise it if your
+     * labels run longer, or lower `labelCols` instead.
+     */
+    layoutThreshold?: number;
     /**
      * Label column width for horizontal layout (mirrors BFormGroup's
      * `labelCols`/`labelCols*` props). Overridable per-field via
@@ -73,13 +94,14 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     onSubmit?: (() => any) | undefined;
     "onUpdate:activeTab"?: ((value: number) => any) | undefined;
 }>, {
-    layout: "vertical" | "horizontal";
+    layout: "vertical" | "horizontal" | "auto";
     card: boolean;
     submitText: string;
     submitLoadingText: string;
     showSubmit: boolean;
     autoErrorTab: boolean;
     cardTabs: boolean;
+    layoutThreshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/extended/DXTable.vue.d.ts

@@ -67,6 +67,21 @@ export interface TableField {
     filter?: FilterType;
     filterOptions?: FilterOption[];
     filterPlaceholder?: string;
+    /**
+     * For a `select` filter on a **client-side** table: derive the dropdown's
+     * options from the distinct values present in the loaded rows. Defaults to
+     * `true` — with no `filterOptions` and no server `filterValues` the
+     * alternative is an empty dropdown, which can only ever be a bug.
+     *
+     * Set `false` to opt out (e.g. a column whose raw values are opaque ids you
+     * would rather label yourself via `filterOptions`).
+     *
+     * Explicit `filterOptions` and server-supplied `filterValues` still WIN, in
+     * that order. Provider/API and Inertia modes ignore this flag: they only
+     * ever hold one page of rows, so there is no complete value set to derive
+     * from (see `getFieldFilterOptions`).
+     */
+    deriveFilterOptions?: boolean;
     /**
      * Fixed width for this column, applied via a `<colgroup>` `<col>`. A number
      * is treated as pixels (`200` → `200px`); a string is used verbatim
@@ -233,6 +248,18 @@ export interface Props<TItem = any> {
      * borderless variant — the same header, filter row, table and pagination
      * rendered directly on the page background (no card border/shadow), for
      * data-heavy admin index pages that read as busy inside a card.
+     *
+     * The table renders FLUSH to the card border (rows and stripes reach the
+     * edge) while the header and pagination stay padded. Only the table region
+     * is rounded to follow the card's corners — the card itself does not clip
+     * (#166), so a `position: absolute` popover you render into `#header` or
+     * any other slot is free to overhang the card.
+     *
+     * The one place content is still clipped is INSIDE the table: Bootstrap's
+     * `.table-responsive` is a horizontal scroll container, so an overlay in a
+     * `cell(<key>)` slot is bounded by it. Teleport it (bvn's own menus already
+     * do — `DDropdown` teleports to `<body>`, the column-filter menus are
+     * `fixed`), or pass `:responsive="false"`.
      */
     card?: boolean;
     /**
@@ -253,8 +280,13 @@ export interface Props<TItem = any> {
      * **"horizontal"** to match the Omni Tend form convention (a raw modal form
      * previously fell back to DXForm's vertical default, which looked out of
      * place next to horizontal page forms). Pass `"vertical"` to opt out.
+     *
+     * `"auto"` hands the decision to `DXForm`'s container-width observer, which
+     * measures the FORM rather than the window — so a modal narrowed by its own
+     * breakpoint stacks to vertical even on a wide viewport, where a media query
+     * would still report "plenty of room". See `useContainerWidth`.
      */
-    editLayout?: 'vertical' | 'horizontal';
+    editLayout?: 'vertical' | 'horizontal' | 'auto';
     /**
      * Label column width for the edit modal's horizontal layout, forwarded to
      * `DXForm`'s `labelCols` (a single width or a per-breakpoint object). Only
@@ -390,6 +422,11 @@ declare const _default: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_
     }>): void;
     attrs: any;
     slots: {
+        [x: `head-end(${string})`]: ((props: {
+            field: TableField;
+            label: string;
+        }) => any) | undefined;
+    } & {
         [x: string]: ((props: any) => any) | undefined;
     } & {
         [x: string]: ((props: any) => any) | undefined;

package/dist/components/extended/DXTableEditorModal.vue.d.ts

@@ -27,8 +27,13 @@ interface Props {
     pendingAction: 'save' | 'delete' | null;
     /** Delete endpoint — gates the Delete button. */
     deleteUrl?: string;
-    /** Field layout forwarded to the modal's DXForm (defaults handled upstream). */
-    layout?: 'vertical' | 'horizontal';
+    /**
+     * Field layout forwarded to the modal's DXForm (defaults handled upstream).
+     * Includes `"auto"`, which lets the form stack to vertical when the MODAL is
+     * narrow even though the viewport is wide — the container-query case a
+     * viewport media query cannot see.
+     */
+    layout?: 'vertical' | 'horizontal' | 'auto';
     /** Label column width forwarded to DXForm (horizontal layout). */
     labelCols?: LabelCols;
     /** Wrap the modal form in a card (opt-in — off by default). */

package/dist/components/extended/DXTablePagination.vue.d.ts

@@ -18,6 +18,25 @@ interface Props {
     pluralItemName: string;
     /** Whether a column filter is active — gates the "Filtered from N" note. */
     hasActiveFilters: boolean;
+    /**
+     * Upper bound (px) on the pager ROW width at which the number window may
+     * collapse to the compact "current / last" status (#162). At or above it
+     * the full windowed pager always renders, whatever the page count.
+     *
+     * Default **576** — Bootstrap's `sm` breakpoint, i.e. the width the rest of
+     * the design system already treats as phone-sized. Its job is to GUARANTEE
+     * that a desktop-width table is never quietly downgraded: a 45-page window
+     * that doesn't quite fit at 800px should wrap (today's behaviour), not lose
+     * its numbers.
+     *
+     * Below it, compact engages only when the full pager genuinely would not
+     * fit on one line (see `fullPagerWidth`) — so a three-page pager still
+     * shows `1 2 3` on a phone, where "2 / 3" would be strictly worse.
+     *
+     * Measured on the ROW, not the viewport, so a table squeezed by a sidebar
+     * or inside a modal collapses even though the window is wide.
+     */
+    compactThreshold?: number;
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "page-change": (page: number) => any;
@@ -25,5 +44,7 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onPage-change"?: ((page: number) => any) | undefined;
     "onPer-page-change"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    compactThreshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/composables/useContainerWidth.d.ts

@@ -0,0 +1,96 @@
+/**
+ * useContainerWidth — container-query-style responsiveness for Vue components.
+ *
+ * Bootstrap's breakpoints are **media** queries: they only ever see the WINDOW.
+ * A dashboard page is narrowed by the persistent sidebar (and a form inside a
+ * modal is narrower still), so a component can have very little room while the
+ * viewport is wide — and no media query ever fires. This composable closes that
+ * gap by observing an element's **own rendered width** with a `ResizeObserver`
+ * and exposing it reactively, so the template can pick a layout from the space
+ * it actually has.
+ *
+ * ```ts
+ * const { containerRef, width, isBelow, isNarrowerThan } = useContainerWidth({
+ *   threshold: 640,
+ * });
+ * // <div ref="containerRef"> … </div>
+ * ```
+ *
+ * One observer can drive several independent decisions — `isBelow` uses the
+ * configured `threshold`, and `isNarrowerThan(n)` answers for any other width:
+ *
+ * ```ts
+ * const stacked = computed(() => isNarrowerThan(576));
+ * const hideDetailColumn = computed(() => isNarrowerThan(900));
+ * ```
+ */
+import { type Ref } from "vue";
+/**
+ * What to observe: a template ref, or a getter (so the element can be resolved
+ * lazily / conditionally — e.g. `() => enabled ? el.value : null` to observe
+ * nothing at all).
+ */
+export type ContainerWidthTarget = Ref<HTMLElement | null | undefined> | (() => HTMLElement | null | undefined);
+export interface UseContainerWidthOptions {
+    /**
+     * Width (px) that `isBelow` compares against. Omit if you only need
+     * `width` / `isNarrowerThan`. Pass a getter (`() => props.threshold`) when
+     * it can change at runtime — `isBelow` re-evaluates when it does.
+     */
+    threshold?: number | (() => number | undefined);
+    /**
+     * Hysteresis band (px) applied to `isBelow` only, to stop a layout flipping
+     * back and forth at the boundary. Once `isBelow` is true it stays true
+     * until the width reaches `threshold + hysteresis`.
+     *
+     * Defaults to `0` so `isBelow` means exactly `width < threshold` unless you
+     * ask for otherwise. Opt in whenever the layout you drive from it can
+     * change the observed width — the classic loop is: narrow layout is taller
+     * → an ancestor with `overflow:auto` gains a vertical scrollbar → the
+     * container loses ~15-17px → it crosses back over the threshold → repeat.
+     * A band wider than a scrollbar (24px is comfortable) breaks that cycle.
+     * (`isNarrowerThan` is deliberately raw — it holds no per-width state.)
+     */
+    hysteresis?: number;
+    /**
+     * Width assumed before the first measurement, and permanently where there
+     * is no `ResizeObserver` (SSR, or a very old browser).
+     *
+     * Defaults to `0` — i.e. "assume the narrowest until proven otherwise", so
+     * an unmeasured render picks the STACKED layout. That is the mobile-first
+     * choice and the safe one: a stacked layout is legible at every width,
+     * whereas a wide layout guessed wrongly truncates content. It also means
+     * the server-rendered markup matches the first client render.
+     */
+    initialWidth?: number;
+    /**
+     * Which box to report. `content-box` (default) is the space actually
+     * available to children — what a layout decision usually wants.
+     * `border-box` matches `getBoundingClientRect().width`.
+     */
+    box?: "content-box" | "border-box";
+    /**
+     * Extra debounce (ms) before publishing a new width. Defaults to `0`:
+     * `ResizeObserver` already batches to one delivery per frame, and the
+     * callback reads the size the observer *hands* it (no forced layout), so
+     * there is nothing to thrash. Set it only for genuinely expensive
+     * downstream work — a timer adds a frame of visible lag.
+     */
+    debounce?: number;
+}
+export interface UseContainerWidthReturn {
+    /** Bind to the element you want measured (`<div ref="containerRef">`). */
+    containerRef: Ref<HTMLElement | null>;
+    /** The observed width in px. `initialWidth` until first measured. */
+    width: Readonly<Ref<number>>;
+    /** False until a real measurement has landed (always false without a `ResizeObserver`). */
+    hasMeasured: Readonly<Ref<boolean>>;
+    /** `width < threshold`, with `hysteresis` applied. False when no `threshold` was given. */
+    isBelow: Readonly<Ref<boolean>>;
+    /** Raw `width < px`, for driving other decisions off the same observer. */
+    isNarrowerThan: (px: number) => boolean;
+    /** Disconnect early. Called automatically when the owning scope is disposed. */
+    stop: () => void;
+}
+export declare function useContainerWidth(options?: UseContainerWidthOptions): UseContainerWidthReturn;
+export declare function useContainerWidth(target: ContainerWidthTarget, options?: UseContainerWidthOptions): UseContainerWidthReturn;