@feugene/granularity 0.47.0 → 0.49.0

package/README.md

@@ -91,10 +91,10 @@ from its own chunk, so a granular import already brings everything it needs.
 <!-- entry-sizes:generated:start lang=en -->
 | What you import | gzip | of the barrel |
 | --- | ---: | ---: |
-| the whole package from the root | 601.8 kB | 100 % |
+| the whole package from the root | 619.8 kB | 100 % |
 | the lightest component — `GrButtonGroup` | 1.8 kB | < 1 % |
-| the median component — `GrChip` | 15.4 kB | 3 % |
-| the 5 heaviest together | 177.4 kB | 29 % |
+| the median component — `GrNavbar` | 15.4 kB | 2 % |
+| the 5 heaviest together | 178.4 kB | 29 % |
 
 These numbers **do not add up**: shared code is counted again in every row but paid for once, which is why
 the set is shown as a union rather than a sum. They are an upper bound — the gzip of everything a subpath

package/dist/chunks/{config-2vrOFn2f.js → config-AKpLyIGD.js}

@@ -1,6 +1,6 @@
 import { n as splitClassTokens } from "./classTokens-8v2XC74x.js";
-import { a as chipIconSizeClassBySize, c as chipRootClass, i as chipIconClass, l as chipSelectedClass, n as chipCloseClass, o as chipInteractiveClass, r as chipDisabledClass, s as chipLabelClass, t as chipCloseButtonClass, u as chipSizeClassBySize } from "./grChipStyles-DcDyxAL0.js";
-import { t as grBadgeSafelist } from "./safelist-x8USecK8.js";
+import { a as chipIconSizeClassBySize, c as chipRootClass, i as chipIconClass, l as chipSelectedClass, n as chipCloseClass, o as chipInteractiveClass, r as chipDisabledClass, s as chipLabelClass, t as chipCloseButtonClass, u as chipSizeClassBySize } from "./grChipStyles-CA9Wj1_E.js";
+import { t as grBadgeSafelist } from "./safelist-CSfynUC1.js";
 import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
 //#region src/components/GrChip/safelist.ts
 /**

package/dist/chunks/{config-2vrOFn2f.js.map → config-AKpLyIGD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"config-2vrOFn2f.js","names":[],"sources":["../../src/components/GrChip/safelist.ts","../../src/components/GrChip/config.ts"],"sourcesContent":["import { grBadgeSafelist } from '../GrBadge/safelist'\nimport { splitClassTokens } from '../shared/classTokens'\n\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipDisabledClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipInteractiveClass,\n  chipLabelClass,\n  chipRootClass,\n  chipSelectedClass,\n  chipSizeClassBySize,\n} from './grChipStyles'\n\n/**\n * Тона и радиусы приходят из `grBadgeStyles.ts`, поэтому их safelist берётся\n * ссылкой, а не копией: копия разошлась бы с оригиналом молча. Ребро\n * `GrChip → GrBadge` объявлено в `config.ts` — без него пресет не подмешает\n * стили бейджа при гранулярной селекции, и чип придёт бесцветным.\n */\nexport const grChipSafelist = [...new Set([\n  ...grBadgeSafelist,\n  ...Object.values(chipSizeClassBySize).flatMap(splitClassTokens),\n  ...Object.values(chipIconSizeClassBySize).flatMap(splitClassTokens),\n  ...splitClassTokens(chipRootClass),\n  ...splitClassTokens(chipLabelClass),\n  ...splitClassTokens(chipInteractiveClass),\n  ...splitClassTokens(chipDisabledClass),\n  ...splitClassTokens(chipSelectedClass),\n  ...splitClassTokens(chipCloseClass),\n  ...splitClassTokens(chipCloseButtonClass),\n  ...splitClassTokens(chipIconClass),\n  'h-full',\n  'w-full',\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grChipSafelist } from './safelist'\n\nexport const grChipConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrChip',\n  // `GrBadge` — импорт его класс-мап и safelist; `GrIcon` не рендерится,\n  // крестик — прямой `~icons`-компонент, поэтому его в зависимостях нет.\n  dependencies: ['GrBadge'],\n  safelist: grChipSafelist,\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,iBAAiB,CAAC,mBAAG,IAAI,IAAI;CACxC,GAAG;CACH,GAAG,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAC9D,GAAG,OAAO,OAAO,uBAAuB,CAAC,CAAC,QAAQ,gBAAgB;CAClE,GAAG,iBAAiB,aAAa;CACjC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,aAAa;CACjC;CACA;AACF,CAAC,CAAC;;;AChCF,IAAa,eAAe,wBAAwB,YAAY,KAAK;CACnE,MAAM;CAGN,cAAc,CAAC,SAAS;CACxB,UAAU;AACZ,CAAC"}
+{"version":3,"file":"config-AKpLyIGD.js","names":[],"sources":["../../src/components/GrChip/safelist.ts","../../src/components/GrChip/config.ts"],"sourcesContent":["import { grBadgeSafelist } from '../GrBadge/safelist'\nimport { splitClassTokens } from '../shared/classTokens'\n\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipDisabledClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipInteractiveClass,\n  chipLabelClass,\n  chipRootClass,\n  chipSelectedClass,\n  chipSizeClassBySize,\n} from './grChipStyles'\n\n/**\n * Тона и радиусы приходят из `grBadgeStyles.ts`, поэтому их safelist берётся\n * ссылкой, а не копией: копия разошлась бы с оригиналом молча. Ребро\n * `GrChip → GrBadge` объявлено в `config.ts` — без него пресет не подмешает\n * стили бейджа при гранулярной селекции, и чип придёт бесцветным.\n */\nexport const grChipSafelist = [...new Set([\n  ...grBadgeSafelist,\n  ...Object.values(chipSizeClassBySize).flatMap(splitClassTokens),\n  ...Object.values(chipIconSizeClassBySize).flatMap(splitClassTokens),\n  ...splitClassTokens(chipRootClass),\n  ...splitClassTokens(chipLabelClass),\n  ...splitClassTokens(chipInteractiveClass),\n  ...splitClassTokens(chipDisabledClass),\n  ...splitClassTokens(chipSelectedClass),\n  ...splitClassTokens(chipCloseClass),\n  ...splitClassTokens(chipCloseButtonClass),\n  ...splitClassTokens(chipIconClass),\n  'h-full',\n  'w-full',\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grChipSafelist } from './safelist'\n\nexport const grChipConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrChip',\n  // `GrBadge` — импорт его класс-мап и safelist; `GrIcon` не рендерится,\n  // крестик — прямой `~icons`-компонент, поэтому его в зависимостях нет.\n  dependencies: ['GrBadge'],\n  safelist: grChipSafelist,\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,iBAAiB,CAAC,mBAAG,IAAI,IAAI;CACxC,GAAG;CACH,GAAG,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAC9D,GAAG,OAAO,OAAO,uBAAuB,CAAC,CAAC,QAAQ,gBAAgB;CAClE,GAAG,iBAAiB,aAAa;CACjC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,aAAa;CACjC;CACA;AACF,CAAC,CAAC;;;AChCF,IAAa,eAAe,wBAAwB,YAAY,KAAK;CACnE,MAAM;CAGN,cAAc,CAAC,SAAS;CACxB,UAAU;AACZ,CAAC"}

package/dist/chunks/config-BBtBQE3s.js

@@ -0,0 +1,108 @@
+import { n as splitClassTokens } from "./classTokens-8v2XC74x.js";
+import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
+//#region src/components/GrOtpInput/grOtpInputStyles.ts
+/**
+* `w-fit` тут не украшение. Гридовый или флексовый родитель **блокифицирует**
+* `inline-flex`, и ряд растягивался на всю колонку: сами ячейки оставались на
+* месте, а невидимое поле поверх них ловило клики далеко справа от кода.
+*/
+var rootBaseClass = "relative inline-flex w-fit items-center";
+var rootGaps = {
+	xs: "gap-1",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2"
+};
+/**
+* Настоящее поле лежит **поверх** ряда ячеек и невидимо: текст, каретка и
+* подсветка выделения прозрачны, всё видимое рисуют ячейки.
+*
+* Оно остаётся полноценным `<input>`, и потому даром достаются вставка,
+* автозаполнение кода из SMS, отмена, выделение и вся каретка со стрелками —
+* см. `docs/components/GrOtpInput.md`.
+*
+* `z-index` не нужен: поле позиционировано, ячейки — нет, а позиционированный
+* элемент и так красится поверх статичных соседей. Литерал слоя тут был бы
+* лишней записью в шкале `docs/z-index.md`.
+*/
+var fieldClass = "absolute inset-0 w-full cursor-text bg-transparent text-transparent [caret-color:transparent] outline-none selection:bg-transparent disabled:cursor-not-allowed";
+var cellBaseClass = "relative inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-control)] border [font-variant-numeric:tabular-nums] transition-colors duration-[var(--gr-duration-fast)]";
+/**
+* Сторона ячейки повторяет высоту `GrInput` на той же ступени: код стоит в
+* форме рядом с полями, и ряд обязан садиться с ними в одну линию.
+*
+* Через хук, а не классом-числом: квадратная ячейка — решение оформления, и
+* макет вправе сделать её шире.
+*/
+var cellSizes = {
+	xs: "h-[var(--gr-otp-input-cell-size,1.75rem)] w-[var(--gr-otp-input-cell-size,1.75rem)] text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
+	sm: "h-[var(--gr-otp-input-cell-size,2rem)] w-[var(--gr-otp-input-cell-size,2rem)] text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
+	md: "h-[var(--gr-otp-input-cell-size,2.5rem)] w-[var(--gr-otp-input-cell-size,2.5rem)] text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]",
+	lg: "h-[var(--gr-otp-input-cell-size,2.75rem)] w-[var(--gr-otp-input-cell-size,2.75rem)] text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]"
+};
+var cellIdleClass = "border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+/** Активная ячейка — та, в которой стоит каретка, и только пока поле в фокусе. */
+var cellActiveClass = "border-[var(--gr-otp-input-active-brd,var(--gr-primary))] ring-2 ring-[var(--gr-ring)]";
+/**
+* Вердикт валидации красится своей ролью, а не декоративным `danger`: тема
+* вправе развести подсветку по решению разработчика и ошибку формы.
+*/
+var cellInvalidClass = "border-[var(--gr-invalid-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]";
+var cellInvalidActiveClass = "ring-2 ring-[var(--gr-invalid-ring)]";
+/**
+* Недоступность гасится фоном, а не `opacity`: прозрачность разбавляет
+* выверенные на AA токены текста и роняет контраст кода.
+*/
+var cellDisabledClass = "border-[var(--gr-disabled-brd)] bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]";
+var placeholderClass = "text-[var(--gr-muted-fg)]";
+/**
+* Каретка рисуется своей, потому что настоящая скрыта вместе с текстом.
+* Мигание — CSS-анимация, значит подчиняется глобальному клампу движения
+* пакета (`docs/motion.md`), а не собственному таймеру.
+*/
+var caretClass = "pointer-events-none absolute h-[1em] w-px bg-[var(--gr-otp-input-caret,var(--gr-primary))]";
+var separatorClass = "select-none px-0.5 text-[var(--gr-muted-fg)]";
+function grOtpInputRootClass(size) {
+	return [rootBaseClass, rootGaps[size]].join(" ");
+}
+function grOtpInputCellClass(options) {
+	const tokens = [cellBaseClass, cellSizes[options.size]];
+	if (options.disabled) tokens.push(cellDisabledClass);
+	else if (options.invalid) tokens.push(cellInvalidClass, options.active ? cellInvalidActiveClass : "");
+	else tokens.push(cellIdleClass, options.active ? cellActiveClass : "");
+	return tokens.filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/components/GrOtpInput/safelist.ts
+var grOtpInputClassTokens = {
+	root: [...splitClassTokens(rootBaseClass), ...Object.values(rootGaps).flatMap(splitClassTokens)],
+	field: splitClassTokens(fieldClass),
+	cell: [
+		...splitClassTokens(cellBaseClass),
+		...Object.values(cellSizes).flatMap(splitClassTokens),
+		...splitClassTokens(cellIdleClass),
+		...splitClassTokens(cellActiveClass),
+		...splitClassTokens(cellInvalidClass),
+		...splitClassTokens(cellInvalidActiveClass),
+		...splitClassTokens(cellDisabledClass)
+	],
+	decoration: [
+		...splitClassTokens(placeholderClass),
+		...splitClassTokens(caretClass),
+		...splitClassTokens(separatorClass)
+	]
+};
+var grOtpInputSafelist = [.../* @__PURE__ */ new Set([
+	...grOtpInputClassTokens.root,
+	...grOtpInputClassTokens.field,
+	...grOtpInputClassTokens.cell,
+	...grOtpInputClassTokens.decoration
+])];
+//#endregion
+//#region src/components/GrOtpInput/config.ts
+var grOtpInputConfig = defineGranularComponent(import.meta.url, {
+	name: "GrOtpInput",
+	safelist: grOtpInputSafelist
+});
+//#endregion
+export { grOtpInputCellClass as a, separatorClass as c, fieldClass as i, grOtpInputSafelist as n, grOtpInputRootClass as o, caretClass as r, placeholderClass as s, grOtpInputConfig as t };

package/dist/chunks/config-BBtBQE3s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-BBtBQE3s.js","names":[],"sources":["../../src/components/GrOtpInput/grOtpInputStyles.ts","../../src/components/GrOtpInput/safelist.ts","../../src/components/GrOtpInput/config.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrOtpInputSize = GrComponentSize\n\n/**\n * `w-fit` тут не украшение. Гридовый или флексовый родитель **блокифицирует**\n * `inline-flex`, и ряд растягивался на всю колонку: сами ячейки оставались на\n * месте, а невидимое поле поверх них ловило клики далеко справа от кода.\n */\nexport const rootBaseClass = 'relative inline-flex w-fit items-center'\n\nexport const rootGaps: Record<GrOtpInputSize, string> = {\n  xs: 'gap-1',\n  sm: 'gap-1.5',\n  md: 'gap-2',\n  lg: 'gap-2',\n}\n\n/**\n * Настоящее поле лежит **поверх** ряда ячеек и невидимо: текст, каретка и\n * подсветка выделения прозрачны, всё видимое рисуют ячейки.\n *\n * Оно остаётся полноценным `<input>`, и потому даром достаются вставка,\n * автозаполнение кода из SMS, отмена, выделение и вся каретка со стрелками —\n * см. `docs/components/GrOtpInput.md`.\n *\n * `z-index` не нужен: поле позиционировано, ячейки — нет, а позиционированный\n * элемент и так красится поверх статичных соседей. Литерал слоя тут был бы\n * лишней записью в шкале `docs/z-index.md`.\n */\nexport const fieldClass = 'absolute inset-0 w-full cursor-text bg-transparent text-transparent [caret-color:transparent] outline-none selection:bg-transparent disabled:cursor-not-allowed'\n\nexport const cellBaseClass = 'relative inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-control)] border [font-variant-numeric:tabular-nums] transition-colors duration-[var(--gr-duration-fast)]'\n\n/**\n * Сторона ячейки повторяет высоту `GrInput` на той же ступени: код стоит в\n * форме рядом с полями, и ряд обязан садиться с ними в одну линию.\n *\n * Через хук, а не классом-числом: квадратная ячейка — решение оформления, и\n * макет вправе сделать её шире.\n */\nexport const cellSizes: Record<GrOtpInputSize, string> = {\n  xs: 'h-[var(--gr-otp-input-cell-size,1.75rem)] w-[var(--gr-otp-input-cell-size,1.75rem)] text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n  sm: 'h-[var(--gr-otp-input-cell-size,2rem)] w-[var(--gr-otp-input-cell-size,2rem)] text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n  md: 'h-[var(--gr-otp-input-cell-size,2.5rem)] w-[var(--gr-otp-input-cell-size,2.5rem)] text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]',\n  lg: 'h-[var(--gr-otp-input-cell-size,2.75rem)] w-[var(--gr-otp-input-cell-size,2.75rem)] text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]',\n}\n\nexport const cellIdleClass = 'border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]'\n\n/** Активная ячейка — та, в которой стоит каретка, и только пока поле в фокусе. */\nexport const cellActiveClass = 'border-[var(--gr-otp-input-active-brd,var(--gr-primary))] ring-2 ring-[var(--gr-ring)]'\n\n/**\n * Вердикт валидации красится своей ролью, а не декоративным `danger`: тема\n * вправе развести подсветку по решению разработчика и ошибку формы.\n */\nexport const cellInvalidClass = 'border-[var(--gr-invalid-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)]'\n\nexport const cellInvalidActiveClass = 'ring-2 ring-[var(--gr-invalid-ring)]'\n\n/**\n * Недоступность гасится фоном, а не `opacity`: прозрачность разбавляет\n * выверенные на AA токены текста и роняет контраст кода.\n */\nexport const cellDisabledClass = 'border-[var(--gr-disabled-brd)] bg-[var(--gr-disabled-bg)] text-[var(--gr-disabled-fg)]'\n\nexport const placeholderClass = 'text-[var(--gr-muted-fg)]'\n\n/**\n * Каретка рисуется своей, потому что настоящая скрыта вместе с текстом.\n * Мигание — CSS-анимация, значит подчиняется глобальному клампу движения\n * пакета (`docs/motion.md`), а не собственному таймеру.\n */\nexport const caretClass = 'pointer-events-none absolute h-[1em] w-px bg-[var(--gr-otp-input-caret,var(--gr-primary))]'\n\nexport const separatorClass = 'select-none px-0.5 text-[var(--gr-muted-fg)]'\n\nexport function grOtpInputRootClass(size: GrOtpInputSize): string {\n  return [rootBaseClass, rootGaps[size]].join(' ')\n}\n\ntype GrOtpInputCellClassOptions = {\n  size: GrOtpInputSize\n  active: boolean\n  invalid: boolean\n  disabled: boolean\n}\n\nexport function grOtpInputCellClass(options: GrOtpInputCellClassOptions): string {\n  const tokens = [cellBaseClass, cellSizes[options.size]]\n\n  if (options.disabled)\n    tokens.push(cellDisabledClass)\n  else if (options.invalid)\n    tokens.push(cellInvalidClass, options.active ? cellInvalidActiveClass : '')\n  else\n    tokens.push(cellIdleClass, options.active ? cellActiveClass : '')\n\n  return tokens.filter(Boolean).join(' ')\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  caretClass,\n  cellActiveClass,\n  cellBaseClass,\n  cellDisabledClass,\n  cellIdleClass,\n  cellInvalidActiveClass,\n  cellInvalidClass,\n  cellSizes,\n  fieldClass,\n  placeholderClass,\n  rootBaseClass,\n  rootGaps,\n  separatorClass,\n} from './grOtpInputStyles'\n\nexport const grOtpInputClassTokens = {\n  root: [...splitClassTokens(rootBaseClass), ...Object.values(rootGaps).flatMap(splitClassTokens)],\n  field: splitClassTokens(fieldClass),\n  cell: [\n    ...splitClassTokens(cellBaseClass),\n    ...Object.values(cellSizes).flatMap(splitClassTokens),\n    ...splitClassTokens(cellIdleClass),\n    ...splitClassTokens(cellActiveClass),\n    ...splitClassTokens(cellInvalidClass),\n    ...splitClassTokens(cellInvalidActiveClass),\n    ...splitClassTokens(cellDisabledClass),\n  ],\n  decoration: [\n    ...splitClassTokens(placeholderClass),\n    ...splitClassTokens(caretClass),\n    ...splitClassTokens(separatorClass),\n  ],\n} as const\n\nexport const grOtpInputSafelist = [...new Set([\n  ...grOtpInputClassTokens.root,\n  ...grOtpInputClassTokens.field,\n  ...grOtpInputClassTokens.cell,\n  ...grOtpInputClassTokens.decoration,\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grOtpInputSafelist } from './safelist'\n\nexport const grOtpInputConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrOtpInput',\n  safelist: grOtpInputSafelist,\n})\n"],"mappings":";;;;;;;;AASA,IAAa,gBAAgB;AAE7B,IAAa,WAA2C;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;AAcA,IAAa,aAAa;AAE1B,IAAa,gBAAgB;;;;;;;;AAS7B,IAAa,YAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,gBAAgB;;AAG7B,IAAa,kBAAkB;;;;;AAM/B,IAAa,mBAAmB;AAEhC,IAAa,yBAAyB;;;;;AAMtC,IAAa,oBAAoB;AAEjC,IAAa,mBAAmB;;;;;;AAOhC,IAAa,aAAa;AAE1B,IAAa,iBAAiB;AAE9B,SAAgB,oBAAoB,MAA8B;CAChE,OAAO,CAAC,eAAe,SAAS,KAAK,CAAC,CAAC,KAAK,GAAG;AACjD;AASA,SAAgB,oBAAoB,SAA6C;CAC/E,MAAM,SAAS,CAAC,eAAe,UAAU,QAAQ,KAAK;CAEtD,IAAI,QAAQ,UACV,OAAO,KAAK,iBAAiB;MAC1B,IAAI,QAAQ,SACf,OAAO,KAAK,kBAAkB,QAAQ,SAAS,yBAAyB,EAAE;MAE1E,OAAO,KAAK,eAAe,QAAQ,SAAS,kBAAkB,EAAE;CAElE,OAAO,OAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACxC;;;ACnFA,IAAa,wBAAwB;CACnC,MAAM,CAAC,GAAG,iBAAiB,aAAa,GAAG,GAAG,OAAO,OAAO,QAAQ,CAAC,CAAC,QAAQ,gBAAgB,CAAC;CAC/F,OAAO,iBAAiB,UAAU;CAClC,MAAM;EACJ,GAAG,iBAAiB,aAAa;EACjC,GAAG,OAAO,OAAO,SAAS,CAAC,CAAC,QAAQ,gBAAgB;EACpD,GAAG,iBAAiB,aAAa;EACjC,GAAG,iBAAiB,eAAe;EACnC,GAAG,iBAAiB,gBAAgB;EACpC,GAAG,iBAAiB,sBAAsB;EAC1C,GAAG,iBAAiB,iBAAiB;CACvC;CACA,YAAY;EACV,GAAG,iBAAiB,gBAAgB;EACpC,GAAG,iBAAiB,UAAU;EAC9B,GAAG,iBAAiB,cAAc;CACpC;AACF;AAEA,IAAa,qBAAqB,CAAC,mBAAG,IAAI,IAAI;CAC5C,GAAG,sBAAsB;CACzB,GAAG,sBAAsB;CACzB,GAAG,sBAAsB;CACzB,GAAG,sBAAsB;AAC3B,CAAC,CAAC;;;ACrCF,IAAa,mBAAmB,wBAAwB,YAAY,KAAK;CACvE,MAAM;CACN,UAAU;AACZ,CAAC"}

package/dist/chunks/{config-DeyT9dJl.js → config-Bs1HwUcx.js}

@@ -117,6 +117,34 @@ var sortIconSizes = {
 	md: "sm",
 	lg: "md"
 };
+/**
+* Второй ярус строки: подробности под ней.
+*
+* Фон мягче строки набора, а не ярче: подробности обязаны читаться как
+* вложенное в строку, а не как следующая строка. Акцентная полоса слева
+* связывает деталь с её строкой, когда между ними уже прокрутили.
+*/
+var detailRowClass = "bg-[var(--gr-datatable-detail-bg,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]";
+var detailCellClass = "border-t border-[var(--gr-brd)] border-l-2 border-l-[var(--gr-datatable-detail-accent,var(--gr-primary))]";
+/** Содержимое липнет к левому краю: иначе при горизонтальной прокрутке его не видно. */
+var detailContentClass = "sticky left-0";
+var detailPaddings = {
+	xs: "px-2 py-2",
+	sm: "px-3 py-2.5",
+	md: "px-4 py-3",
+	lg: "px-5 py-4"
+};
+/** Колонка кнопки раскрытия — той же ширины, что колонка выбора: шапка не должна съезжать. */
+var expandColumnWidths = selectColumnWidths;
+var expandButtonClass = "inline-flex items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+/**
+* Поворот шеврона. Своего `motion-reduce:` здесь нет намеренно: движение пакет
+* гасит одним глобальным блоком в `base.css`, а под `presetMini` этот вариант
+* вдобавок не генерирует CSS вовсе (`docs/motion.md`).
+*/
+var expandIconClass = "h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]";
+var expandIconOpenClass = "rotate-90";
+var detailErrorClass = "flex flex-wrap items-center gap-2 text-[var(--gr-invalid-text)]";
 //#endregion
 //#region src/components/GrDataTable/safelist.ts
 var grDataTableSafelist = [.../* @__PURE__ */ new Set([
@@ -139,7 +167,16 @@ var grDataTableSafelist = [.../* @__PURE__ */ new Set([
 	...splitClassTokens(columnPinnedLeftEdgeClass),
 	...splitClassTokens(columnPinnedRightEdgeClass),
 	...splitClassTokens(rowSelectedClass),
-	...splitClassTokens(summaryRowClass)
+	...splitClassTokens(summaryRowClass),
+	...splitClassTokens(detailRowClass),
+	...splitClassTokens(detailCellClass),
+	...splitClassTokens(detailContentClass),
+	...splitClassTokens(detailErrorClass),
+	...Object.values(detailPaddings).flatMap(splitClassTokens),
+	...splitClassTokens(expandButtonClass),
+	...splitClassTokens(expandIconClass),
+	...splitClassTokens(expandIconOpenClass),
+	...splitClassTokens("h-5 w-5 h-6 w-6")
 ])];
 //#endregion
 //#region src/components/GrDataTable/config.ts
@@ -148,9 +185,15 @@ var grDataTableConfig = defineGranularComponent(import.meta.url, {
 	dependencies: [
 		"GrTable",
 		"GrIcon",
-		"GrCheckbox"
+		"GrCheckbox",
+		"GrButton",
+		"GrSkeleton"
 	],
-	safelist: grDataTableSafelist
+	safelist: grDataTableSafelist,
+	tokenDefinitionsRef: { light: {
+		url: "./themes/light.css",
+		selector: ":root"
+	} }
 });
 //#endregion
-export { sortIconSizes as C, selectColumnWidths as S, summaryRowClass as T, headerTextSizes as _, columnDropAfterClass as a, rowSelectedClass as b, columnHandleClass as c, columnPinnedRightEdgeClass as d, columnResizerClass as f, headerGaps as g, columnResizerLineClass as h, columnDraggingClass as i, columnPinnedClass as l, columnResizerLineActiveClass as m, grDataTableSafelist as n, columnDropBeforeClass as o, columnResizerHoverClass as p, cellPaddings as r, columnHandleActiveClass as s, grDataTableConfig as t, columnPinnedLeftEdgeClass as u, placeholderPaddings as v, spinnerSizes as w, selectCheckboxSizes as x, rowHeightEstimates as y };
+export { selectCheckboxSizes as A, expandIconClass as C, placeholderPaddings as D, headerTextSizes as E, sortIconSizes as M, spinnerSizes as N, rowHeightEstimates as O, summaryRowClass as P, expandColumnWidths as S, headerGaps as T, detailContentClass as _, columnDropAfterClass as a, detailRowClass as b, columnHandleClass as c, columnPinnedRightEdgeClass as d, columnResizerClass as f, detailCellClass as g, columnResizerLineClass as h, columnDraggingClass as i, selectColumnWidths as j, rowSelectedClass as k, columnPinnedClass as l, columnResizerLineActiveClass as m, grDataTableSafelist as n, columnDropBeforeClass as o, columnResizerHoverClass as p, cellPaddings as r, columnHandleActiveClass as s, grDataTableConfig as t, columnPinnedLeftEdgeClass as u, detailErrorClass as v, expandIconOpenClass as w, expandButtonClass as x, detailPaddings as y };

package/dist/chunks/{config-DeyT9dJl.js.map → config-Bs1HwUcx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"config-DeyT9dJl.js","names":[],"sources":["../../src/components/GrDataTable/grDataTableStyles.ts","../../src/components/GrDataTable/safelist.ts","../../src/components/GrDataTable/config.ts"],"sourcesContent":["import type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles'\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrDataTableSize = GrComponentSize\n\n/** Паддинг ячейки — и в шапке, и в теле: колонки обязаны совпадать по сетке. */\nexport const cellPaddings: Record<GrDataTableSize, string> = {\n  xs: 'px-2 py-1.5',\n  sm: 'px-3 py-2',\n  md: 'px-4 py-3',\n  lg: 'px-5 py-4',\n}\n\n/**\n * Оценка высоты строки по размеру: два вертикальных отступа ячейки плюс строка\n * текста и рамка. Виртуализация уточняет её замером — точное число здесь знать\n * неоткуда, содержимое ячейки задаёт потребитель.\n */\nexport const rowHeightEstimates: Record<GrDataTableSize, number> = {\n  xs: 33,\n  sm: 41,\n  md: 49,\n  lg: 57,\n}\n\n/** Заглушки loading/empty: по горизонтали как ячейка, по вертикали просторнее. */\nexport const placeholderPaddings: Record<GrDataTableSize, string> = {\n  xs: 'px-2 py-3',\n  sm: 'px-3 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-5 py-8',\n}\n\n/**\n * Ручка перестановки колонки. Появляется по наведению на заголовок и по\n * фокусу: постоянная сетка ручек в шапке из десяти колонок читается как рябь,\n * а не как управление.\n */\nexport const columnHandleClass = 'inline-flex shrink-0 cursor-grab items-center text-[var(--gr-datatable-drag-handle,var(--gr-muted-fg))] opacity-0 [touch-action:none] transition-opacity duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)] group-hover:opacity-100'\n\nexport const columnHandleActiveClass = 'opacity-100'\n\n/** Переносимая колонка гасится, чтобы было видно, что она «поднята». */\nexport const columnDraggingClass = 'bg-[var(--gr-muted)]'\n\n/**\n * Место вставки — полоса по краю ячейки заголовка. Псевдоэлемент, а не свой\n * узел: `<th>` не терпит посторонних детей в раскладке таблицы.\n */\nexport const columnDropBeforeClass = 'before:absolute before:inset-y-0 before:left-0 before:w-[var(--gr-datatable-drag-indicator-width,2px)] before:bg-[var(--gr-datatable-drag-indicator,var(--gr-primary))] before:content-empty'\n\nexport const columnDropAfterClass = 'after:absolute after:inset-y-0 after:right-0 after:w-[var(--gr-datatable-drag-indicator-width,2px)] after:bg-[var(--gr-datatable-drag-indicator,var(--gr-primary))] after:content-empty'\n\n/**\n * Подсветка выбранной строки. Живёт здесь, потому что закреплённой ячейке её\n * приходится повторять: у ячейки свой непрозрачный фон, и подсветка строки\n * сквозь него не видна.\n */\nexport const rowSelectedClass = 'bg-[color-mix(in_srgb,var(--gr-primary)_8%,transparent)]'\n\n/**\n * Итоговая строка. Отбивка та же, что между строками тела, плюс вес: итог —\n * вывод из набора, а не ещё одна его запись, и читатель должен видеть это до\n * того, как разберёт цифры. Тон оставлен потребителю: «возвраты» и «прибыль» —\n * разные сообщения, и выбирать за него компонент не должен.\n */\nexport const summaryRowClass = 'border-t border-[var(--gr-brd)] font-600'\n\n/**\n * Ручка ширины — полоса у правого края заголовка. Видима она узкой линией, а\n * ловится широкой зоной: попасть в двухпиксельную границу мышью тяжело.\n */\nexport const columnResizerClass = 'absolute inset-y-0 right-0 z-[1] flex w-3 translate-x-1/2 cursor-col-resize items-stretch justify-center [touch-action:none] focus:outline-none'\n\nexport const columnResizerLineClass = 'w-[var(--gr-datatable-resizer-width,2px)] bg-transparent transition-colors duration-[var(--gr-duration-fast)]'\n\n/** Полоса подсвечивается только когда её ведут или на неё встал фокус. */\nexport const columnResizerLineActiveClass = 'bg-[var(--gr-datatable-resizer,var(--gr-primary))]'\n\nexport const columnResizerHoverClass = 'hover:bg-[var(--gr-datatable-resizer,var(--gr-primary))] focus-visible:bg-[var(--gr-datatable-resizer,var(--gr-primary))]'\n\n/**\n * Закреплённая колонка липнет к краю прокрутки. Фон обязателен: без него\n * уезжающие под неё ячейки просвечивают насквозь.\n */\nexport const columnPinnedClass = 'sticky z-[2] bg-[var(--gr-card)]'\n\n/** Граница группы закреплённых колонок — тень, а не рамка: рамка сдвигает сетку. */\nexport const columnPinnedLeftEdgeClass = 'shadow-[var(--gr-datatable-pinned-shadow,4px_0_6px_-4px_rgba(0,0,0,0.25))]'\n\nexport const columnPinnedRightEdgeClass = 'shadow-[var(--gr-datatable-pinned-shadow-end,-4px_0_6px_-4px_rgba(0,0,0,0.25))]'\n\n/** Подпись колонки набирается мельче тела таблицы — она не данные, а навигация. */\nexport const headerTextSizes: Record<GrDataTableSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-3xs)] leading-[var(--gr-control-leading-3xs)]',\n  sm: 'text-[length:var(--gr-control-text-2xs)] leading-[var(--gr-control-leading-2xs)]',\n  md: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)]',\n  lg: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n}\n\n/**\n * Размер `GrCheckbox` в колонке выбора. Здесь не классы, а ступень шкалы:\n * коробку рисует сам чекбокс — он же держит `indeterminate`, disabled без\n * `opacity` и фокус-кольцо.\n */\nexport const selectCheckboxSizes: Record<GrDataTableSize, GrCheckboxSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/** Ширина колонки выбора: коробка чекбокса плюс горизонтальный паддинг ячейки. */\nexport const selectColumnWidths: Record<GrDataTableSize, string> = {\n  xs: 'w-7',\n  sm: 'w-8',\n  md: 'w-10',\n  lg: 'w-12',\n}\n\n/** Зазор между подписью колонки и стрелкой сортировки. */\nexport const headerGaps: Record<GrDataTableSize, string> = {\n  xs: 'gap-1',\n  sm: 'gap-1.5',\n  md: 'gap-2',\n  lg: 'gap-2',\n}\n\n/** Спиннер в строке загрузки — тем же кеглем, что иконка сортировки рядом. */\nexport const spinnerSizes: Record<GrDataTableSize, string> = {\n  xs: 'h-3 w-3',\n  sm: 'h-3.5 w-3.5',\n  md: 'h-4 w-4',\n  lg: 'h-5 w-5',\n}\n\n/** Стрелка сортировки берёт размер из шкалы `GrIcon` (`xs…lg` → `14…20px`). */\nexport const sortIconSizes: Record<GrDataTableSize, GrComponentSize> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  cellPaddings,\n  columnDraggingClass,\n  columnDropAfterClass,\n  columnDropBeforeClass,\n  columnHandleActiveClass,\n  columnHandleClass,\n  columnPinnedClass,\n  columnPinnedLeftEdgeClass,\n  columnPinnedRightEdgeClass,\n  columnResizerClass,\n  columnResizerHoverClass,\n  columnResizerLineActiveClass,\n  columnResizerLineClass,\n  headerGaps,\n  headerTextSizes,\n  placeholderPaddings,\n  rowSelectedClass,\n  selectColumnWidths,\n  spinnerSizes,\n  summaryRowClass,\n} from './grDataTableStyles'\n\nexport const grDataTableSafelist = [...new Set([\n  ...Object.values(cellPaddings).flatMap(splitClassTokens),\n  ...Object.values(placeholderPaddings).flatMap(splitClassTokens),\n  ...Object.values(headerTextSizes).flatMap(splitClassTokens),\n  ...Object.values(selectColumnWidths).flatMap(splitClassTokens),\n  ...Object.values(headerGaps).flatMap(splitClassTokens),\n  ...Object.values(spinnerSizes).flatMap(splitClassTokens),\n  ...splitClassTokens(columnHandleClass),\n  ...splitClassTokens(columnHandleActiveClass),\n  ...splitClassTokens(columnDraggingClass),\n  ...splitClassTokens(columnDropBeforeClass),\n  ...splitClassTokens(columnDropAfterClass),\n  ...splitClassTokens(columnResizerClass),\n  ...splitClassTokens(columnResizerLineClass),\n  ...splitClassTokens(columnResizerLineActiveClass),\n  ...splitClassTokens(columnResizerHoverClass),\n  ...splitClassTokens(columnPinnedClass),\n  ...splitClassTokens(columnPinnedLeftEdgeClass),\n  ...splitClassTokens(columnPinnedRightEdgeClass),\n  ...splitClassTokens(rowSelectedClass),\n  ...splitClassTokens(summaryRowClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grDataTableSafelist } from './safelist'\n\nexport const grDataTableConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDataTable',\n  dependencies: ['GrTable', 'GrIcon', 'GrCheckbox'],\n  safelist: grDataTableSafelist,\n})\n"],"mappings":";;;;AAMA,IAAa,eAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,qBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,sBAAuD;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,oBAAoB;AAEjC,IAAa,0BAA0B;;AAGvC,IAAa,sBAAsB;;;;;AAMnC,IAAa,wBAAwB;AAErC,IAAa,uBAAuB;;;;;;AAOpC,IAAa,mBAAmB;;;;;;;AAQhC,IAAa,kBAAkB;;;;;AAM/B,IAAa,qBAAqB;AAElC,IAAa,yBAAyB;;AAGtC,IAAa,+BAA+B;AAE5C,IAAa,0BAA0B;;;;;AAMvC,IAAa,oBAAoB;;AAGjC,IAAa,4BAA4B;AAEzC,IAAa,6BAA6B;;AAG1C,IAAa,kBAAmD;CAC9D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,sBAA+D;CAC1E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,qBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,aAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,eAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,gBAA0D;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;ACtHA,IAAa,sBAAsB,CAAC,mBAAG,IAAI,IAAI;CAC7C,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAC9D,GAAG,OAAO,OAAO,eAAe,CAAC,CAAC,QAAQ,gBAAgB;CAC1D,GAAG,OAAO,OAAO,kBAAkB,CAAC,CAAC,QAAQ,gBAAgB;CAC7D,GAAG,OAAO,OAAO,UAAU,CAAC,CAAC,QAAQ,gBAAgB;CACrD,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,mBAAmB;CACvC,GAAG,iBAAiB,qBAAqB;CACzC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,kBAAkB;CACtC,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,4BAA4B;CAChD,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,yBAAyB;CAC7C,GAAG,iBAAiB,0BAA0B;CAC9C,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,iBAAiB,eAAe;AACrC,CAAC,CAAC;;;ACzCF,IAAa,oBAAoB,wBAAwB,YAAY,KAAK;CACxE,MAAM;CACN,cAAc;EAAC;EAAW;EAAU;CAAY;CAChD,UAAU;AACZ,CAAC"}
+{"version":3,"file":"config-Bs1HwUcx.js","names":[],"sources":["../../src/components/GrDataTable/grDataTableStyles.ts","../../src/components/GrDataTable/safelist.ts","../../src/components/GrDataTable/config.ts"],"sourcesContent":["import type { GrCheckboxSize } from '../GrCheckbox/grCheckboxStyles'\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrDataTableSize = GrComponentSize\n\n/** Паддинг ячейки — и в шапке, и в теле: колонки обязаны совпадать по сетке. */\nexport const cellPaddings: Record<GrDataTableSize, string> = {\n  xs: 'px-2 py-1.5',\n  sm: 'px-3 py-2',\n  md: 'px-4 py-3',\n  lg: 'px-5 py-4',\n}\n\n/**\n * Оценка высоты строки по размеру: два вертикальных отступа ячейки плюс строка\n * текста и рамка. Виртуализация уточняет её замером — точное число здесь знать\n * неоткуда, содержимое ячейки задаёт потребитель.\n */\nexport const rowHeightEstimates: Record<GrDataTableSize, number> = {\n  xs: 33,\n  sm: 41,\n  md: 49,\n  lg: 57,\n}\n\n/** Заглушки loading/empty: по горизонтали как ячейка, по вертикали просторнее. */\nexport const placeholderPaddings: Record<GrDataTableSize, string> = {\n  xs: 'px-2 py-3',\n  sm: 'px-3 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-5 py-8',\n}\n\n/**\n * Ручка перестановки колонки. Появляется по наведению на заголовок и по\n * фокусу: постоянная сетка ручек в шапке из десяти колонок читается как рябь,\n * а не как управление.\n */\nexport const columnHandleClass = 'inline-flex shrink-0 cursor-grab items-center text-[var(--gr-datatable-drag-handle,var(--gr-muted-fg))] opacity-0 [touch-action:none] transition-opacity duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)] group-hover:opacity-100'\n\nexport const columnHandleActiveClass = 'opacity-100'\n\n/** Переносимая колонка гасится, чтобы было видно, что она «поднята». */\nexport const columnDraggingClass = 'bg-[var(--gr-muted)]'\n\n/**\n * Место вставки — полоса по краю ячейки заголовка. Псевдоэлемент, а не свой\n * узел: `<th>` не терпит посторонних детей в раскладке таблицы.\n */\nexport const columnDropBeforeClass = 'before:absolute before:inset-y-0 before:left-0 before:w-[var(--gr-datatable-drag-indicator-width,2px)] before:bg-[var(--gr-datatable-drag-indicator,var(--gr-primary))] before:content-empty'\n\nexport const columnDropAfterClass = 'after:absolute after:inset-y-0 after:right-0 after:w-[var(--gr-datatable-drag-indicator-width,2px)] after:bg-[var(--gr-datatable-drag-indicator,var(--gr-primary))] after:content-empty'\n\n/**\n * Подсветка выбранной строки. Живёт здесь, потому что закреплённой ячейке её\n * приходится повторять: у ячейки свой непрозрачный фон, и подсветка строки\n * сквозь него не видна.\n */\nexport const rowSelectedClass = 'bg-[color-mix(in_srgb,var(--gr-primary)_8%,transparent)]'\n\n/**\n * Итоговая строка. Отбивка та же, что между строками тела, плюс вес: итог —\n * вывод из набора, а не ещё одна его запись, и читатель должен видеть это до\n * того, как разберёт цифры. Тон оставлен потребителю: «возвраты» и «прибыль» —\n * разные сообщения, и выбирать за него компонент не должен.\n */\nexport const summaryRowClass = 'border-t border-[var(--gr-brd)] font-600'\n\n/**\n * Ручка ширины — полоса у правого края заголовка. Видима она узкой линией, а\n * ловится широкой зоной: попасть в двухпиксельную границу мышью тяжело.\n */\nexport const columnResizerClass = 'absolute inset-y-0 right-0 z-[1] flex w-3 translate-x-1/2 cursor-col-resize items-stretch justify-center [touch-action:none] focus:outline-none'\n\nexport const columnResizerLineClass = 'w-[var(--gr-datatable-resizer-width,2px)] bg-transparent transition-colors duration-[var(--gr-duration-fast)]'\n\n/** Полоса подсвечивается только когда её ведут или на неё встал фокус. */\nexport const columnResizerLineActiveClass = 'bg-[var(--gr-datatable-resizer,var(--gr-primary))]'\n\nexport const columnResizerHoverClass = 'hover:bg-[var(--gr-datatable-resizer,var(--gr-primary))] focus-visible:bg-[var(--gr-datatable-resizer,var(--gr-primary))]'\n\n/**\n * Закреплённая колонка липнет к краю прокрутки. Фон обязателен: без него\n * уезжающие под неё ячейки просвечивают насквозь.\n */\nexport const columnPinnedClass = 'sticky z-[2] bg-[var(--gr-card)]'\n\n/** Граница группы закреплённых колонок — тень, а не рамка: рамка сдвигает сетку. */\nexport const columnPinnedLeftEdgeClass = 'shadow-[var(--gr-datatable-pinned-shadow,4px_0_6px_-4px_rgba(0,0,0,0.25))]'\n\nexport const columnPinnedRightEdgeClass = 'shadow-[var(--gr-datatable-pinned-shadow-end,-4px_0_6px_-4px_rgba(0,0,0,0.25))]'\n\n/** Подпись колонки набирается мельче тела таблицы — она не данные, а навигация. */\nexport const headerTextSizes: Record<GrDataTableSize, string> = {\n  xs: 'text-[length:var(--gr-control-text-3xs)] leading-[var(--gr-control-leading-3xs)]',\n  sm: 'text-[length:var(--gr-control-text-2xs)] leading-[var(--gr-control-leading-2xs)]',\n  md: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)]',\n  lg: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n}\n\n/**\n * Размер `GrCheckbox` в колонке выбора. Здесь не классы, а ступень шкалы:\n * коробку рисует сам чекбокс — он же держит `indeterminate`, disabled без\n * `opacity` и фокус-кольцо.\n */\nexport const selectCheckboxSizes: Record<GrDataTableSize, GrCheckboxSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n}\n\n/** Ширина колонки выбора: коробка чекбокса плюс горизонтальный паддинг ячейки. */\nexport const selectColumnWidths: Record<GrDataTableSize, string> = {\n  xs: 'w-7',\n  sm: 'w-8',\n  md: 'w-10',\n  lg: 'w-12',\n}\n\n/** Зазор между подписью колонки и стрелкой сортировки. */\nexport const headerGaps: Record<GrDataTableSize, string> = {\n  xs: 'gap-1',\n  sm: 'gap-1.5',\n  md: 'gap-2',\n  lg: 'gap-2',\n}\n\n/** Спиннер в строке загрузки — тем же кеглем, что иконка сортировки рядом. */\nexport const spinnerSizes: Record<GrDataTableSize, string> = {\n  xs: 'h-3 w-3',\n  sm: 'h-3.5 w-3.5',\n  md: 'h-4 w-4',\n  lg: 'h-5 w-5',\n}\n\n/** Стрелка сортировки берёт размер из шкалы `GrIcon` (`xs…lg` → `14…20px`). */\nexport const sortIconSizes: Record<GrDataTableSize, GrComponentSize> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n}\n\n/**\n * Второй ярус строки: подробности под ней.\n *\n * Фон мягче строки набора, а не ярче: подробности обязаны читаться как\n * вложенное в строку, а не как следующая строка. Акцентная полоса слева\n * связывает деталь с её строкой, когда между ними уже прокрутили.\n */\nexport const detailRowClass = 'bg-[var(--gr-datatable-detail-bg,color-mix(in_srgb,var(--gr-muted)_45%,transparent))]'\n\nexport const detailCellClass = 'border-t border-[var(--gr-brd)] border-l-2 border-l-[var(--gr-datatable-detail-accent,var(--gr-primary))]'\n\n/** Содержимое липнет к левому краю: иначе при горизонтальной прокрутке его не видно. */\nexport const detailContentClass = 'sticky left-0'\n\nexport const detailPaddings: Record<GrDataTableSize, string> = {\n  xs: 'px-2 py-2',\n  sm: 'px-3 py-2.5',\n  md: 'px-4 py-3',\n  lg: 'px-5 py-4',\n}\n\n/** Колонка кнопки раскрытия — той же ширины, что колонка выбора: шапка не должна съезжать. */\nexport const expandColumnWidths = selectColumnWidths\n\nexport const expandButtonClass = 'inline-flex items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\n/**\n * Поворот шеврона. Своего `motion-reduce:` здесь нет намеренно: движение пакет\n * гасит одним глобальным блоком в `base.css`, а под `presetMini` этот вариант\n * вдобавок не генерирует CSS вовсе (`docs/motion.md`).\n */\nexport const expandIconClass = 'h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]'\n\nexport const expandIconOpenClass = 'rotate-90'\n\nexport const detailErrorClass = 'flex flex-wrap items-center gap-2 text-[var(--gr-invalid-text)]'\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  cellPaddings,\n  columnDraggingClass,\n  detailCellClass,\n  detailContentClass,\n  detailErrorClass,\n  detailPaddings,\n  detailRowClass,\n  expandButtonClass,\n  expandIconClass,\n  expandIconOpenClass,\n  columnDropAfterClass,\n  columnDropBeforeClass,\n  columnHandleActiveClass,\n  columnHandleClass,\n  columnPinnedClass,\n  columnPinnedLeftEdgeClass,\n  columnPinnedRightEdgeClass,\n  columnResizerClass,\n  columnResizerHoverClass,\n  columnResizerLineActiveClass,\n  columnResizerLineClass,\n  headerGaps,\n  headerTextSizes,\n  placeholderPaddings,\n  rowSelectedClass,\n  selectColumnWidths,\n  spinnerSizes,\n  summaryRowClass,\n} from './grDataTableStyles'\n\nexport const grDataTableSafelist = [...new Set([\n  ...Object.values(cellPaddings).flatMap(splitClassTokens),\n  ...Object.values(placeholderPaddings).flatMap(splitClassTokens),\n  ...Object.values(headerTextSizes).flatMap(splitClassTokens),\n  ...Object.values(selectColumnWidths).flatMap(splitClassTokens),\n  ...Object.values(headerGaps).flatMap(splitClassTokens),\n  ...Object.values(spinnerSizes).flatMap(splitClassTokens),\n  ...splitClassTokens(columnHandleClass),\n  ...splitClassTokens(columnHandleActiveClass),\n  ...splitClassTokens(columnDraggingClass),\n  ...splitClassTokens(columnDropBeforeClass),\n  ...splitClassTokens(columnDropAfterClass),\n  ...splitClassTokens(columnResizerClass),\n  ...splitClassTokens(columnResizerLineClass),\n  ...splitClassTokens(columnResizerLineActiveClass),\n  ...splitClassTokens(columnResizerHoverClass),\n  ...splitClassTokens(columnPinnedClass),\n  ...splitClassTokens(columnPinnedLeftEdgeClass),\n  ...splitClassTokens(columnPinnedRightEdgeClass),\n  ...splitClassTokens(rowSelectedClass),\n  ...splitClassTokens(summaryRowClass),\n  // Второй ярус строки: классы приходят из `.ts`-хелпера, а такие литералы\n  // пресет не видит.\n  ...splitClassTokens(detailRowClass),\n  ...splitClassTokens(detailCellClass),\n  ...splitClassTokens(detailContentClass),\n  ...splitClassTokens(detailErrorClass),\n  ...Object.values(detailPaddings).flatMap(splitClassTokens),\n  ...splitClassTokens(expandButtonClass),\n  ...splitClassTokens(expandIconClass),\n  ...splitClassTokens(expandIconOpenClass),\n  ...splitClassTokens('h-5 w-5 h-6 w-6'),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grDataTableSafelist } from './safelist'\n\nexport const grDataTableConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrDataTable',\n  dependencies: ['GrTable', 'GrIcon', 'GrCheckbox', 'GrButton', 'GrSkeleton'],\n  safelist: grDataTableSafelist,\n  // Только светлая: обе роли ссылаются на токены, которые сами меняются с темой.\n  tokenDefinitionsRef: {\n    light: { url: './themes/light.css', selector: ':root' },\n  },\n})\n"],"mappings":";;;;AAMA,IAAa,eAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,qBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,sBAAuD;CAClE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,oBAAoB;AAEjC,IAAa,0BAA0B;;AAGvC,IAAa,sBAAsB;;;;;AAMnC,IAAa,wBAAwB;AAErC,IAAa,uBAAuB;;;;;;AAOpC,IAAa,mBAAmB;;;;;;;AAQhC,IAAa,kBAAkB;;;;;AAM/B,IAAa,qBAAqB;AAElC,IAAa,yBAAyB;;AAGtC,IAAa,+BAA+B;AAE5C,IAAa,0BAA0B;;;;;AAMvC,IAAa,oBAAoB;;AAGjC,IAAa,4BAA4B;AAEzC,IAAa,6BAA6B;;AAG1C,IAAa,kBAAmD;CAC9D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;AAOA,IAAa,sBAA+D;CAC1E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,qBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,aAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,eAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,gBAA0D;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;AASA,IAAa,iBAAiB;AAE9B,IAAa,kBAAkB;;AAG/B,IAAa,qBAAqB;AAElC,IAAa,iBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;AAGA,IAAa,qBAAqB;AAElC,IAAa,oBAAoB;;;;;;AAOjC,IAAa,kBAAkB;AAE/B,IAAa,sBAAsB;AAEnC,IAAa,mBAAmB;;;ACnJhC,IAAa,sBAAsB,CAAC,mBAAG,IAAI,IAAI;CAC7C,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,OAAO,OAAO,mBAAmB,CAAC,CAAC,QAAQ,gBAAgB;CAC9D,GAAG,OAAO,OAAO,eAAe,CAAC,CAAC,QAAQ,gBAAgB;CAC1D,GAAG,OAAO,OAAO,kBAAkB,CAAC,CAAC,QAAQ,gBAAgB;CAC7D,GAAG,OAAO,OAAO,UAAU,CAAC,CAAC,QAAQ,gBAAgB;CACrD,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,mBAAmB;CACvC,GAAG,iBAAiB,qBAAqB;CACzC,GAAG,iBAAiB,oBAAoB;CACxC,GAAG,iBAAiB,kBAAkB;CACtC,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,4BAA4B;CAChD,GAAG,iBAAiB,uBAAuB;CAC3C,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,yBAAyB;CAC7C,GAAG,iBAAiB,0BAA0B;CAC9C,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,iBAAiB,eAAe;CAGnC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,eAAe;CACnC,GAAG,iBAAiB,kBAAkB;CACtC,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,OAAO,OAAO,cAAc,CAAC,CAAC,QAAQ,gBAAgB;CACzD,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,eAAe;CACnC,GAAG,iBAAiB,mBAAmB;CACvC,GAAG,iBAAiB,iBAAiB;AACvC,CAAC,CAAC;;;AC5DF,IAAa,oBAAoB,wBAAwB,YAAY,KAAK;CACxE,MAAM;CACN,cAAc;EAAC;EAAW;EAAU;EAAc;EAAY;CAAY;CAC1E,UAAU;CAEV,qBAAqB,EACnB,OAAO;EAAE,KAAK;EAAsB,UAAU;CAAQ,EACxD;AACF,CAAC"}

package/dist/chunks/{config-B3J0alyY.js → config-CzeZg2LO.js}

@@ -5,7 +5,43 @@ var shapes = {
 	circle: "rounded-[var(--gr-radius-full)]",
 	square: "rounded-[var(--gr-avatar-square-radius,10px)]"
 };
-var rootBaseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden border border-[var(--gr-brd)] bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] font-700";
+var rootBaseClass = "relative inline-flex shrink-0 items-center justify-center overflow-hidden border border-[var(--gr-brd)] font-700";
+/** Цвет по умолчанию. Отделён от базы, иначе он спорил бы с автоцветом порядком правил. */
+var rootNeutralClass = "bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]";
+/**
+* Палитра автоцвета: подложка и инициалы одним классом на слот.
+*
+* Цвета сюда не попадают — только имена слотов. Что стоит за слотом, решает
+* тема (`--gr-avatar-N-bg`/`-fg` ссылаются на пары `-light`/`-text` тонов), и
+* приложение вправе переопределить любой, не трогая компонент.
+*
+* Классы статические: UnoCSS сканирует литералы, и собранный в рантайме
+* `bg-[var(--gr-avatar-${n}-bg)]` в CSS не превратился бы.
+*/
+var avatarToneClasses = [
+	"bg-[var(--gr-avatar-1-bg)] text-[var(--gr-avatar-1-fg)]",
+	"bg-[var(--gr-avatar-2-bg)] text-[var(--gr-avatar-2-fg)]",
+	"bg-[var(--gr-avatar-3-bg)] text-[var(--gr-avatar-3-fg)]",
+	"bg-[var(--gr-avatar-4-bg)] text-[var(--gr-avatar-4-fg)]",
+	"bg-[var(--gr-avatar-5-bg)] text-[var(--gr-avatar-5-fg)]",
+	"bg-[var(--gr-avatar-6-bg)] text-[var(--gr-avatar-6-fg)]"
+];
+/**
+* Слот палитры по имени: тот же человек — тот же цвет.
+*
+* Стабильность здесь и есть смысл функции: цвет не должен меняться ни между
+* сессиями, ни между сервером и клиентом, иначе аватар мигает на гидрации, а
+* узнаваемость — то, ради чего автоцвет и заводят, — теряется. Отсюда обычный
+* детерминированный перебор кодов, а не хеш из окружения.
+*
+* `>>> 0` обязателен: без него сумма уходит в отрицательные на длинных именах,
+* и остаток от деления даёт отрицательный индекс.
+*/
+function avatarToneIndex(name) {
+	let hash = 0;
+	for (const char of name.trim()) hash = hash * 31 + (char.codePointAt(0) ?? 0) >>> 0;
+	return hash % avatarToneClasses.length;
+}
 /** Индикатор статуса: кольцо цветом фона отделяет точку от самого аватара. */
 var statusDotClass = "absolute bottom-0 right-0 block h-1/4 w-1/4 min-h-2 min-w-2 rounded-[var(--gr-radius-full)] ring-2 ring-[var(--gr-bg)]";
 var statusToneClass = {
@@ -58,7 +94,12 @@ function initialsFrom(name) {
 //#region src/components/GrAvatar/safelist.ts
 var grAvatarClassTokens = {
 	shapes: Object.values(shapes).flatMap(splitClassTokens),
-	root: [...splitClassTokens(rootBaseClass), ...splitClassTokens(rootStatusClass)],
+	root: [
+		...splitClassTokens(rootBaseClass),
+		...splitClassTokens(rootNeutralClass),
+		...splitClassTokens(rootStatusClass),
+		...avatarToneClasses.flatMap(splitClassTokens)
+	],
 	media: [...splitClassTokens(mediaClass), ...splitClassTokens(mediaClipClass)],
 	status: [...splitClassTokens(statusDotClass), ...Object.values(statusToneClass).flatMap(splitClassTokens)],
 	group: [
@@ -79,7 +120,11 @@ var grAvatarSafelist = [.../* @__PURE__ */ new Set([
 var grAvatarConfig = defineGranularComponent(import.meta.url, {
 	name: "GrAvatar",
 	dependencies: ["GrSkeleton"],
-	safelist: grAvatarSafelist
+	safelist: grAvatarSafelist,
+	tokenDefinitionsRef: { light: {
+		url: "./themes/light.css",
+		selector: ":root"
+	} }
 });
 //#endregion
-export { groupBaseClass as a, initialsFrom as c, rootBaseClass as d, rootStatusClass as f, grAvatarClass as i, mediaClass as l, statusToneClass as m, grAvatarSafelist as n, groupItemClass as o, statusDotClass as p, avatarFontSizePx as r, groupOverflowClass as s, grAvatarConfig as t, mediaClipClass as u };
+export { statusToneClass as _, avatarToneIndex as a, groupItemClass as c, mediaClass as d, mediaClipClass as f, statusDotClass as g, rootStatusClass as h, avatarToneClasses as i, groupOverflowClass as l, rootNeutralClass as m, grAvatarSafelist as n, grAvatarClass as o, rootBaseClass as p, avatarFontSizePx as r, groupBaseClass as s, grAvatarConfig as t, initialsFrom as u };

package/dist/chunks/config-CzeZg2LO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-CzeZg2LO.js","names":[],"sources":["../../src/components/GrAvatar/grAvatarStyles.ts","../../src/components/GrAvatar/safelist.ts","../../src/components/GrAvatar/config.ts"],"sourcesContent":["export type GrAvatarShape = 'circle' | 'square'\n\n/** Статус участника. Точка декоративна — смысл несёт скрытая подпись. */\nexport const GR_AVATAR_STATUSES = ['online', 'offline', 'busy', 'away'] as const\nexport type GrAvatarStatus = typeof GR_AVATAR_STATUSES[number]\n\nexport const shapes: Record<GrAvatarShape, string> = {\n  circle: 'rounded-[var(--gr-radius-full)]',\n  square: 'rounded-[var(--gr-avatar-square-radius,10px)]',\n}\n\nexport const rootBaseClass = 'relative inline-flex shrink-0 items-center justify-center overflow-hidden border border-[var(--gr-brd)] font-700'\n\n/** Цвет по умолчанию. Отделён от базы, иначе он спорил бы с автоцветом порядком правил. */\nexport const rootNeutralClass = 'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)]'\n\n/**\n * Палитра автоцвета: подложка и инициалы одним классом на слот.\n *\n * Цвета сюда не попадают — только имена слотов. Что стоит за слотом, решает\n * тема (`--gr-avatar-N-bg`/`-fg` ссылаются на пары `-light`/`-text` тонов), и\n * приложение вправе переопределить любой, не трогая компонент.\n *\n * Классы статические: UnoCSS сканирует литералы, и собранный в рантайме\n * `bg-[var(--gr-avatar-${n}-bg)]` в CSS не превратился бы.\n */\nexport const avatarToneClasses: string[] = [\n  'bg-[var(--gr-avatar-1-bg)] text-[var(--gr-avatar-1-fg)]',\n  'bg-[var(--gr-avatar-2-bg)] text-[var(--gr-avatar-2-fg)]',\n  'bg-[var(--gr-avatar-3-bg)] text-[var(--gr-avatar-3-fg)]',\n  'bg-[var(--gr-avatar-4-bg)] text-[var(--gr-avatar-4-fg)]',\n  'bg-[var(--gr-avatar-5-bg)] text-[var(--gr-avatar-5-fg)]',\n  'bg-[var(--gr-avatar-6-bg)] text-[var(--gr-avatar-6-fg)]',\n]\n\n/**\n * Слот палитры по имени: тот же человек — тот же цвет.\n *\n * Стабильность здесь и есть смысл функции: цвет не должен меняться ни между\n * сессиями, ни между сервером и клиентом, иначе аватар мигает на гидрации, а\n * узнаваемость — то, ради чего автоцвет и заводят, — теряется. Отсюда обычный\n * детерминированный перебор кодов, а не хеш из окружения.\n *\n * `>>> 0` обязателен: без него сумма уходит в отрицательные на длинных именах,\n * и остаток от деления даёт отрицательный индекс.\n */\nexport function avatarToneIndex(name: string): number {\n  let hash = 0\n  for (const char of name.trim())\n    hash = (hash * 31 + (char.codePointAt(0) ?? 0)) >>> 0\n\n  return hash % avatarToneClasses.length\n}\n\n/** Индикатор статуса: кольцо цветом фона отделяет точку от самого аватара. */\nexport const statusDotClass = 'absolute bottom-0 right-0 block h-1/4 w-1/4 min-h-2 min-w-2 rounded-[var(--gr-radius-full)] ring-2 ring-[var(--gr-bg)]'\n\nexport const statusToneClass: Record<GrAvatarStatus, string> = {\n  online: 'bg-[var(--gr-success)]',\n  offline: 'bg-[var(--gr-muted-fg)]',\n  busy: 'bg-[var(--gr-danger)]',\n  away: 'bg-[var(--gr-warning)]',\n}\n\n/**\n * Статус рисуется поверх картинки, поэтому у корня со статусом не может быть\n * `overflow-hidden` — точка обрезалась бы кругом. Скругление вместо этого\n * держит внутренняя обёртка изображения.\n */\nexport const rootStatusClass = 'overflow-visible'\n\n/**\n * Обёртка растянута на весь аватар, поэтому корневой `justify-center`\n * центрирует её саму, а не содержимое: центрирование обязано быть здесь.\n */\nexport const mediaClass = 'flex h-full w-full items-center justify-center'\n\n/**\n * Со статусом корень уходит в `overflow-visible`, чтобы не срезать точку, и\n * резать по форме становится некому — тогда это берёт на себя обёртка.\n */\nexport const mediaClipClass = 'overflow-hidden'\n\n/**\n * Размер бывает произвольным числом пикселей, поэтому кегль считается, а не\n * берётся картой по ступеням. Пол в 10px: у аватара 24px пропорциональные 8px\n * не читаются.\n */\nexport function avatarFontSizePx(sizePx: number): number {\n  return Math.max(10, Math.round(sizePx / 3))\n}\n\nexport const groupBaseClass = 'inline-flex items-center'\n\n/** Перекрытие соседей: кольцо цветом фона отделяет аватары друг от друга. */\nexport const groupItemClass = '-ml-2 first:ml-0 ring-2 ring-[var(--gr-bg)]'\n\nexport const groupOverflowClass = 'inline-flex items-center justify-center bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] font-700'\n\nexport function grAvatarClass(shape: GrAvatarShape): string {\n  return [shapes[shape]].join(' ')\n}\n\n/**\n * Инициалы из имени: первые буквы двух первых слов. Вынесено чистой функцией —\n * тестируется без монтирования.\n */\nexport function initialsFrom(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  if (words.length === 0)\n    return ''\n\n  return words\n    .slice(0, 2)\n    .map(word => [...word][0]?.toUpperCase() ?? '')\n    .join('')\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  avatarToneClasses,\n  groupBaseClass,\n  groupItemClass,\n  groupOverflowClass,\n  mediaClass,\n  mediaClipClass,\n  rootBaseClass,\n  rootNeutralClass,\n  rootStatusClass,\n  shapes,\n  statusDotClass,\n  statusToneClass,\n} from './grAvatarStyles'\n\nexport const grAvatarClassTokens = {\n  shapes: Object.values(shapes).flatMap(splitClassTokens),\n  root: [\n    ...splitClassTokens(rootBaseClass),\n    ...splitClassTokens(rootNeutralClass),\n    ...splitClassTokens(rootStatusClass),\n    // Палитра автоцвета живёт в `.ts`-хелпере: её литералы пресет не видит.\n    ...avatarToneClasses.flatMap(splitClassTokens),\n  ],\n  media: [...splitClassTokens(mediaClass), ...splitClassTokens(mediaClipClass)],\n  status: [\n    ...splitClassTokens(statusDotClass),\n    ...Object.values(statusToneClass).flatMap(splitClassTokens),\n  ],\n  group: [\n    ...splitClassTokens(groupBaseClass),\n    ...splitClassTokens(groupItemClass),\n    ...splitClassTokens(groupOverflowClass),\n  ],\n} as const\n\nexport const grAvatarSafelist = [...new Set([\n  ...grAvatarClassTokens.shapes,\n  ...grAvatarClassTokens.root,\n  ...grAvatarClassTokens.media,\n  ...grAvatarClassTokens.status,\n  ...grAvatarClassTokens.group,\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grAvatarSafelist } from './safelist'\n\nexport const grAvatarConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrAvatar',\n  dependencies: ['GrSkeleton'],\n  safelist: grAvatarSafelist,\n  // Только светлая: слоты палитры ссылаются на `-light`/`-text`, а те\n  // переключаются вместе с темой сами — см. комментарий в самом файле.\n  tokenDefinitionsRef: {\n    light: { url: './themes/light.css', selector: ':root' },\n  },\n})\n"],"mappings":";;;AAMA,IAAa,SAAwC;CACnD,QAAQ;CACR,QAAQ;AACV;AAEA,IAAa,gBAAgB;;AAG7B,IAAa,mBAAmB;;;;;;;;;;;AAYhC,IAAa,oBAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAgB,MAAsB;CACpD,IAAI,OAAO;CACX,KAAK,MAAM,QAAQ,KAAK,KAAK,GAC3B,OAAQ,OAAO,MAAM,KAAK,YAAY,CAAC,KAAK,OAAQ;CAEtD,OAAO,OAAO,kBAAkB;AAClC;;AAGA,IAAa,iBAAiB;AAE9B,IAAa,kBAAkD;CAC7D,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;AACR;;;;;;AAOA,IAAa,kBAAkB;;;;;AAM/B,IAAa,aAAa;;;;;AAM1B,IAAa,iBAAiB;;;;;;AAO9B,SAAgB,iBAAiB,QAAwB;CACvD,OAAO,KAAK,IAAI,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC;AAC5C;AAEA,IAAa,iBAAiB;;AAG9B,IAAa,iBAAiB;AAE9B,IAAa,qBAAqB;AAElC,SAAgB,cAAc,OAA8B;CAC1D,OAAO,CAAC,OAAO,MAAM,CAAC,CAAC,KAAK,GAAG;AACjC;;;;;AAMA,SAAgB,aAAa,MAAsB;CACjD,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GACnB,OAAO;CAET,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAI,SAAQ,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK,EAAE,CAAC,CAC9C,KAAK,EAAE;AACZ;;;ACpGA,IAAa,sBAAsB;CACjC,QAAQ,OAAO,OAAO,MAAM,CAAC,CAAC,QAAQ,gBAAgB;CACtD,MAAM;EACJ,GAAG,iBAAiB,aAAa;EACjC,GAAG,iBAAiB,gBAAgB;EACpC,GAAG,iBAAiB,eAAe;EAEnC,GAAG,kBAAkB,QAAQ,gBAAgB;CAC/C;CACA,OAAO,CAAC,GAAG,iBAAiB,UAAU,GAAG,GAAG,iBAAiB,cAAc,CAAC;CAC5E,QAAQ,CACN,GAAG,iBAAiB,cAAc,GAClC,GAAG,OAAO,OAAO,eAAe,CAAC,CAAC,QAAQ,gBAAgB,CAC5D;CACA,OAAO;EACL,GAAG,iBAAiB,cAAc;EAClC,GAAG,iBAAiB,cAAc;EAClC,GAAG,iBAAiB,kBAAkB;CACxC;AACF;AAEA,IAAa,mBAAmB,CAAC,mBAAG,IAAI,IAAI;CAC1C,GAAG,oBAAoB;CACvB,GAAG,oBAAoB;CACvB,GAAG,oBAAoB;CACvB,GAAG,oBAAoB;CACvB,GAAG,oBAAoB;AACzB,CAAC,CAAC;;;ACvCF,IAAa,iBAAiB,wBAAwB,YAAY,KAAK;CACrE,MAAM;CACN,cAAc,CAAC,YAAY;CAC3B,UAAU;CAGV,qBAAqB,EACnB,OAAO;EAAE,KAAK;EAAsB,UAAU;CAAQ,EACxD;AACF,CAAC"}

package/dist/chunks/{config-DCq4JySZ.js → config-D3HOuHDe.js}

@@ -1,5 +1,5 @@
 import { n as splitClassTokens } from "./classTokens-8v2XC74x.js";
-import { a as tableSizes, i as stripedClass, n as hoverableClass, r as loadingRowCellClass, t as emptyCellClass } from "./grTableStyles-uuMPSOBR.js";
+import { a as tableSizes, i as stripedClass, n as hoverableClass, r as loadingRowCellClass, t as emptyCellClass } from "./grTableStyles-DkQPMfx9.js";
 import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
 //#region src/components/GrTable/safelist.ts
 var grTableSafelist = [.../* @__PURE__ */ new Set([

package/dist/chunks/{config-DCq4JySZ.js.map → config-D3HOuHDe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"config-DCq4JySZ.js","names":[],"sources":["../../src/components/GrTable/safelist.ts","../../src/components/GrTable/config.ts"],"sourcesContent":["import { splitClassTokens } from '../shared/classTokens'\nimport {\n  emptyCellClass,\n  hoverableClass,\n  loadingRowCellClass,\n  stripedClass,\n  tableSizes,\n} from './grTableStyles'\n\nexport const grTableSafelist = [...new Set([\n  ...Object.values(tableSizes).flatMap(splitClassTokens),\n  ...splitClassTokens(stripedClass),\n  ...splitClassTokens(hoverableClass),\n  ...splitClassTokens(emptyCellClass),\n  ...splitClassTokens(loadingRowCellClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grTableSafelist } from './safelist'\n\nexport const grTableConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrTable',\n  dependencies: ['GrSkeleton'],\n  safelist: grTableSafelist,\n})\n"],"mappings":";;;;AASA,IAAa,kBAAkB,CAAC,mBAAG,IAAI,IAAI;CACzC,GAAG,OAAO,OAAO,UAAU,CAAC,CAAC,QAAQ,gBAAgB;CACrD,GAAG,iBAAiB,YAAY;CAChC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,mBAAmB;AACzC,CAAC,CAAC;;;ACXF,IAAa,gBAAgB,wBAAwB,YAAY,KAAK;CACpE,MAAM;CACN,cAAc,CAAC,YAAY;CAC3B,UAAU;AACZ,CAAC"}
+{"version":3,"file":"config-D3HOuHDe.js","names":[],"sources":["../../src/components/GrTable/safelist.ts","../../src/components/GrTable/config.ts"],"sourcesContent":["import { splitClassTokens } from '../shared/classTokens'\nimport {\n  emptyCellClass,\n  hoverableClass,\n  loadingRowCellClass,\n  stripedClass,\n  tableSizes,\n} from './grTableStyles'\n\nexport const grTableSafelist = [...new Set([\n  ...Object.values(tableSizes).flatMap(splitClassTokens),\n  ...splitClassTokens(stripedClass),\n  ...splitClassTokens(hoverableClass),\n  ...splitClassTokens(emptyCellClass),\n  ...splitClassTokens(loadingRowCellClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grTableSafelist } from './safelist'\n\nexport const grTableConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrTable',\n  dependencies: ['GrSkeleton'],\n  safelist: grTableSafelist,\n})\n"],"mappings":";;;;AASA,IAAa,kBAAkB,CAAC,mBAAG,IAAI,IAAI;CACzC,GAAG,OAAO,OAAO,UAAU,CAAC,CAAC,QAAQ,gBAAgB;CACrD,GAAG,iBAAiB,YAAY;CAChC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,mBAAmB;AACzC,CAAC,CAAC;;;ACXF,IAAa,gBAAgB,wBAAwB,YAAY,KAAK;CACpE,MAAM;CACN,cAAc,CAAC,YAAY;CAC3B,UAAU;AACZ,CAAC"}

package/dist/chunks/{config-BscVxZR3.js → config-DF1ezU6y.js}

@@ -1,4 +1,4 @@
-import { t as grBadgeSafelist } from "./safelist-x8USecK8.js";
+import { t as grBadgeSafelist } from "./safelist-CSfynUC1.js";
 import { defineGranularComponent } from "@feugene/unocss-preset-granular/contract";
 //#region src/components/GrBadge/config.ts
 var grBadgeConfig = defineGranularComponent(import.meta.url, {

package/dist/chunks/{config-BscVxZR3.js.map → config-DF1ezU6y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"config-BscVxZR3.js","names":[],"sources":["../../src/components/GrBadge/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grBadgeSafelist } from './safelist'\n\nexport const grBadgeConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrBadge',\n  safelist: grBadgeSafelist,\n  tokenDefinitionsRef: {\n    light: { url: './themes/light.css', selector: ':root' },\n    dark: { url: './themes/dark.css', as: '.dark, [data-theme=\"dark\"]' },\n  },\n})\n"],"mappings":";;;AAIA,IAAa,gBAAgB,wBAAwB,YAAY,KAAK;CACpE,MAAM;CACN,UAAU;CACV,qBAAqB;EACnB,OAAO;GAAE,KAAK;GAAsB,UAAU;EAAQ;EACtD,MAAM;GAAE,KAAK;GAAqB,IAAI;EAA6B;CACrE;AACF,CAAC"}
+{"version":3,"file":"config-DF1ezU6y.js","names":[],"sources":["../../src/components/GrBadge/config.ts"],"sourcesContent":["import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grBadgeSafelist } from './safelist'\n\nexport const grBadgeConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrBadge',\n  safelist: grBadgeSafelist,\n  tokenDefinitionsRef: {\n    light: { url: './themes/light.css', selector: ':root' },\n    dark: { url: './themes/dark.css', as: '.dark, [data-theme=\"dark\"]' },\n  },\n})\n"],"mappings":";;;AAIA,IAAa,gBAAgB,wBAAwB,YAAY,KAAK;CACpE,MAAM;CACN,UAAU;CACV,qBAAqB;EACnB,OAAO;GAAE,KAAK;GAAsB,UAAU;EAAQ;EACtD,MAAM;GAAE,KAAK;GAAqB,IAAI;EAA6B;CACrE;AACF,CAAC"}