@alfakit/core 0.1.13 → 0.2.2

package/dist/utils/container-breakpoints.js

@@ -58,6 +58,68 @@ function containerColumnSpanClasses(span) {
 		return value ? CONTAINER_COL_SPAN[breakpoint]?.[String(value)] : void 0;
 	}).filter(Boolean).join(" ");
 }
+/**
+* `contentGrid()` breakpoints, read against the width of the table rather than the
+* viewport: the table sits beside the panel sidebar (and a cluster's sub-navigation), so a
+* viewport breakpoint says little about the room the cards have. Each viewport key maps to
+* the largest container size at or below that viewport minus 24rem (a 16rem sidebar plus
+* the page's gutters): `md` 48rem → `@sm` 24rem, `xl` 80rem → `@4xl` 56rem.
+*/
+const CONTENT_GRID_FROM = {
+	default: null,
+	sm: "@3xs",
+	md: "@sm",
+	lg: "@xl",
+	xl: "@4xl",
+	"2xl": "@6xl"
+};
+/**
+* The smallest container size that keeps `n` cards at least 15rem wide, with the grid's
+* `p-4` and `gap-4`: 16rem per column plus 1rem. Five or more columns need `@7xl` (80rem).
+*/
+const CONTENT_GRID_MIN = {
+	1: null,
+	2: "@xl",
+	3: "@4xl",
+	4: "@6xl"
+};
+const CONTENT_GRID_KEYS = [
+	"default",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+function widerBreakpoint(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	return CONTAINER_BREAKPOINTS.indexOf(a) >= CONTAINER_BREAKPOINTS.indexOf(b) ? a : b;
+}
+/**
+* Classes for a table's `contentGrid()`: one column, then `@…:grid-cols-N` container-query
+* classes relative to the `@container` around the card grid. A column count applies from
+* the wider of its key's size (`CONTENT_GRID_FROM`) and the size that fits that many cards
+* (`CONTENT_GRID_MIN`), so cards get fewer columns instead of getting narrow. Container
+* keys (`'@lg' => 2`) are used as given; when two keys land on the same size, the later
+* (wider) key wins.
+*/
+function contentGridClasses(grid) {
+	const classes = /* @__PURE__ */ new Map();
+	for (const key of CONTENT_GRID_KEYS) {
+		const value = grid?.[key];
+		if (!value) continue;
+		const count = Math.min(Math.max(Math.trunc(value), 1), 12);
+		const at = widerBreakpoint(CONTENT_GRID_FROM[key] ?? null, CONTENT_GRID_MIN[count] ?? "@7xl");
+		const cls = at ? CONTAINER_GRID_COLS[at]?.[String(count)] : void 0;
+		if (at && cls) classes.set(at, cls);
+	}
+	for (const breakpoint of CONTAINER_BREAKPOINTS) {
+		const cls = CONTAINER_GRID_COLS[breakpoint]?.[String(grid?.[breakpoint] ?? "")];
+		if (cls) classes.set(breakpoint, cls);
+	}
+	return ["grid-cols-1", ...CONTAINER_BREAKPOINTS.map((breakpoint) => classes.get(breakpoint)).filter(Boolean)].join(" ");
+}
 const FLEX_ROW = {
 	default: "flex-row",
 	sm: "sm:flex-row",
@@ -120,6 +182,6 @@ function flexItemClasses(component) {
 	return component.grow === false ? "min-w-0 shrink-0" : "min-w-0 flex-1";
 }
 //#endregion
-export { CONTAINER_BREAKPOINTS, containerColumnSpanClasses, containerGridColumnsClasses, flexItemClasses, flexLayoutClasses, hasContainerBreakpoints };
+export { CONTAINER_BREAKPOINTS, containerColumnSpanClasses, containerGridColumnsClasses, contentGridClasses, flexItemClasses, flexLayoutClasses, hasContainerBreakpoints };
 
 //# sourceMappingURL=container-breakpoints.js.map

package/dist/utils/container-breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-breakpoints.js","names":[],"sources":["../../src/utils/container-breakpoints.ts"],"sourcesContent":["import type { Breakpoints, ColumnSpanValue, ContainerBreakpoint } from '../schema/common'\n\n/**\n * Container-query variants of the grid classes: a `columns` map with `@md`-style keys\n * follows the width of the surrounding `@container` instead of the viewport. Classes are\n * spelled out in full so Tailwind's scanner (and `@source inline`) can see them.\n */\nexport const CONTAINER_BREAKPOINTS: readonly ContainerBreakpoint[] = [\n  '@3xs',\n  '@2xs',\n  '@xs',\n  '@sm',\n  '@md',\n  '@lg',\n  '@xl',\n  '@2xl',\n  '@3xl',\n  '@4xl',\n  '@5xl',\n  '@6xl',\n  '@7xl',\n]\n\nconst SPANS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const\n\nfunction table(prefix: string, values: readonly (number | string)[]): Record<string, string> {\n  return Object.fromEntries(values.map((value) => [String(value), `${prefix}${value}`]))\n}\n\nconst CONTAINER_GRID_COLS: Record<string, Record<string, string>> = Object.fromEntries(\n  CONTAINER_BREAKPOINTS.map((breakpoint) => [breakpoint, table(`${breakpoint}:grid-cols-`, SPANS)]),\n)\n\nconst CONTAINER_COL_SPAN: Record<string, Record<string, string>> = Object.fromEntries(\n  CONTAINER_BREAKPOINTS.map((breakpoint) => [\n    breakpoint,\n    table(`${breakpoint}:col-span-`, [...SPANS, 'full']),\n  ]),\n)\n\n/** Whether a responsive map uses container sizes (`@md`) and so needs an `@container` parent. */\nexport function hasContainerBreakpoints(map: Breakpoints<unknown> | undefined | null): boolean {\n  return !!map && Object.keys(map).some((key) => key.startsWith('@'))\n}\n\n/** `@md:grid-cols-3`-style classes for the container keys of a `columns` map. */\nexport function containerGridColumnsClasses(columns: Breakpoints | undefined): string {\n  if (!columns) return ''\n\n  return CONTAINER_BREAKPOINTS.map((breakpoint) => {\n    const value = columns[breakpoint]\n\n    return value ? CONTAINER_GRID_COLS[breakpoint]?.[String(value)] : undefined\n  })\n    .filter(Boolean)\n    .join(' ')\n}\n\n/** `@md:col-span-2`-style classes for the container keys of a `columnSpan` map. */\nexport function containerColumnSpanClasses(span: Breakpoints<ColumnSpanValue> | undefined): string {\n  if (!span) return ''\n\n  return CONTAINER_BREAKPOINTS.map((breakpoint) => {\n    const value = span[breakpoint]\n\n    return value ? CONTAINER_COL_SPAN[breakpoint]?.[String(value)] : undefined\n  })\n    .filter(Boolean)\n    .join(' ')\n}\n\nconst FLEX_ROW: Record<string, string> = {\n  default: 'flex-row',\n  sm: 'sm:flex-row',\n  md: 'md:flex-row',\n  lg: 'lg:flex-row',\n  xl: 'xl:flex-row',\n  '2xl': '2xl:flex-row',\n}\n\n/** `Flex::alignment()`: main-axis alignment (logical, so `start` follows the direction). */\nconst FLEX_JUSTIFY: Record<string, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  justify: 'justify-between',\n}\n\nconst FLEX_ALIGN: Record<string, Record<string, string>> = {\n  start: {\n    default: 'items-start',\n    sm: 'sm:items-start',\n    md: 'md:items-start',\n    lg: 'lg:items-start',\n    xl: 'xl:items-start',\n    '2xl': '2xl:items-start',\n  },\n  center: {\n    default: 'items-center',\n    sm: 'sm:items-center',\n    md: 'md:items-center',\n    lg: 'lg:items-center',\n    xl: 'xl:items-center',\n    '2xl': '2xl:items-center',\n  },\n  end: {\n    default: 'items-end',\n    sm: 'sm:items-end',\n    md: 'md:items-end',\n    lg: 'lg:items-end',\n    xl: 'xl:items-end',\n    '2xl': '2xl:items-end',\n  },\n}\n\n/**\n * Classes for a `Flex` schema component: stacked, then a row (and the vertical alignment)\n * from its `from` breakpoint. Force-generated with `@source inline(...)` in each renderer.\n */\nexport function flexLayoutClasses(flex: {\n  from?: string | null\n  verticalAlignment?: string | null\n  alignment?: string | null\n}): string {\n  const from = flex.from ?? 'default'\n  const align = flex.verticalAlignment ? FLEX_ALIGN[flex.verticalAlignment]?.[from] : undefined\n  const justify = flex.alignment ? FLEX_JUSTIFY[flex.alignment] : undefined\n\n  return ['flex flex-col gap-6', FLEX_ROW[from] ?? 'flex-row', align, justify]\n    .filter(Boolean)\n    .join(' ')\n}\n\n/** Width behaviour of a child inside a `Flex`: share the row, or keep its natural width. */\nexport function flexItemClasses(component: { grow?: boolean }): string {\n  return component.grow === false ? 'min-w-0 shrink-0' : 'min-w-0 flex-1'\n}\n"],"mappings":";;;;;;AAOA,MAAa,wBAAwD;CACnE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAQ;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;AAAE;AAEpD,SAAS,MAAM,QAAgB,QAA8D;CAC3F,OAAO,OAAO,YAAY,OAAO,KAAK,UAAU,CAAC,OAAO,KAAK,GAAG,GAAG,SAAS,OAAO,CAAC,CAAC;AACvF;AAEA,MAAM,sBAA8D,OAAO,YACzE,sBAAsB,KAAK,eAAe,CAAC,YAAY,MAAM,GAAG,WAAW,cAAc,KAAK,CAAC,CAAC,CAClG;AAEA,MAAM,qBAA6D,OAAO,YACxE,sBAAsB,KAAK,eAAe,CACxC,YACA,MAAM,GAAG,WAAW,aAAa,CAAC,GAAG,OAAO,MAAM,CAAC,CACrD,CAAC,CACH;;AAGA,SAAgB,wBAAwB,KAAuD;CAC7F,OAAO,CAAC,CAAC,OAAO,OAAO,KAAK,GAAG,CAAC,CAAC,MAAM,QAAQ,IAAI,WAAW,GAAG,CAAC;AACpE;;AAGA,SAAgB,4BAA4B,SAA0C;CACpF,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,sBAAsB,KAAK,eAAe;EAC/C,MAAM,QAAQ,QAAQ;EAEtB,OAAO,QAAQ,oBAAoB,WAAW,GAAG,OAAO,KAAK,KAAK,KAAA;CACpE,CAAC,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;AAGA,SAAgB,2BAA2B,MAAwD;CACjG,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO,sBAAsB,KAAK,eAAe;EAC/C,MAAM,QAAQ,KAAK;EAEnB,OAAO,QAAQ,mBAAmB,WAAW,GAAG,OAAO,KAAK,KAAK,KAAA;CACnE,CAAC,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,MAAM,WAAmC;CACvC,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;;AAGA,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,SAAS;AACX;AAEA,MAAM,aAAqD;CACzD,OAAO;EACL,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;CACA,QAAQ;EACN,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;CACA,KAAK;EACH,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;AACF;;;;;AAMA,SAAgB,kBAAkB,MAIvB;CACT,MAAM,OAAO,KAAK,QAAQ;CAC1B,MAAM,QAAQ,KAAK,oBAAoB,WAAW,KAAK,kBAAkB,GAAG,QAAQ,KAAA;CACpF,MAAM,UAAU,KAAK,YAAY,aAAa,KAAK,aAAa,KAAA;CAEhE,OAAO;EAAC;EAAuB,SAAS,SAAS;EAAY;EAAO;CAAO,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;AAGA,SAAgB,gBAAgB,WAAuC;CACrE,OAAO,UAAU,SAAS,QAAQ,qBAAqB;AACzD"}
+{"version":3,"file":"container-breakpoints.js","names":[],"sources":["../../src/utils/container-breakpoints.ts"],"sourcesContent":["import type { Breakpoints, ColumnSpanValue, ContainerBreakpoint } from '../schema/common'\n\n/**\n * Container-query variants of the grid classes: a `columns` map with `@md`-style keys\n * follows the width of the surrounding `@container` instead of the viewport. Classes are\n * spelled out in full so Tailwind's scanner (and `@source inline`) can see them.\n */\nexport const CONTAINER_BREAKPOINTS: readonly ContainerBreakpoint[] = [\n  '@3xs',\n  '@2xs',\n  '@xs',\n  '@sm',\n  '@md',\n  '@lg',\n  '@xl',\n  '@2xl',\n  '@3xl',\n  '@4xl',\n  '@5xl',\n  '@6xl',\n  '@7xl',\n]\n\nconst SPANS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const\n\nfunction table(prefix: string, values: readonly (number | string)[]): Record<string, string> {\n  return Object.fromEntries(values.map((value) => [String(value), `${prefix}${value}`]))\n}\n\nconst CONTAINER_GRID_COLS: Record<string, Record<string, string>> = Object.fromEntries(\n  CONTAINER_BREAKPOINTS.map((breakpoint) => [breakpoint, table(`${breakpoint}:grid-cols-`, SPANS)]),\n)\n\nconst CONTAINER_COL_SPAN: Record<string, Record<string, string>> = Object.fromEntries(\n  CONTAINER_BREAKPOINTS.map((breakpoint) => [\n    breakpoint,\n    table(`${breakpoint}:col-span-`, [...SPANS, 'full']),\n  ]),\n)\n\n/** Whether a responsive map uses container sizes (`@md`) and so needs an `@container` parent. */\nexport function hasContainerBreakpoints(map: Breakpoints<unknown> | undefined | null): boolean {\n  return !!map && Object.keys(map).some((key) => key.startsWith('@'))\n}\n\n/** `@md:grid-cols-3`-style classes for the container keys of a `columns` map. */\nexport function containerGridColumnsClasses(columns: Breakpoints | undefined): string {\n  if (!columns) return ''\n\n  return CONTAINER_BREAKPOINTS.map((breakpoint) => {\n    const value = columns[breakpoint]\n\n    return value ? CONTAINER_GRID_COLS[breakpoint]?.[String(value)] : undefined\n  })\n    .filter(Boolean)\n    .join(' ')\n}\n\n/** `@md:col-span-2`-style classes for the container keys of a `columnSpan` map. */\nexport function containerColumnSpanClasses(span: Breakpoints<ColumnSpanValue> | undefined): string {\n  if (!span) return ''\n\n  return CONTAINER_BREAKPOINTS.map((breakpoint) => {\n    const value = span[breakpoint]\n\n    return value ? CONTAINER_COL_SPAN[breakpoint]?.[String(value)] : undefined\n  })\n    .filter(Boolean)\n    .join(' ')\n}\n\n/**\n * `contentGrid()` breakpoints, read against the width of the table rather than the\n * viewport: the table sits beside the panel sidebar (and a cluster's sub-navigation), so a\n * viewport breakpoint says little about the room the cards have. Each viewport key maps to\n * the largest container size at or below that viewport minus 24rem (a 16rem sidebar plus\n * the page's gutters): `md` 48rem → `@sm` 24rem, `xl` 80rem → `@4xl` 56rem.\n */\nconst CONTENT_GRID_FROM: Record<string, ContainerBreakpoint | null> = {\n  default: null,\n  sm: '@3xs',\n  md: '@sm',\n  lg: '@xl',\n  xl: '@4xl',\n  '2xl': '@6xl',\n}\n\n/**\n * The smallest container size that keeps `n` cards at least 15rem wide, with the grid's\n * `p-4` and `gap-4`: 16rem per column plus 1rem. Five or more columns need `@7xl` (80rem).\n */\nconst CONTENT_GRID_MIN: Record<number, ContainerBreakpoint | null> = {\n  1: null,\n  2: '@xl', // 33rem → 36rem\n  3: '@4xl', // 49rem → 56rem\n  4: '@6xl', // 65rem → 72rem\n}\n\nconst CONTENT_GRID_KEYS = ['default', 'sm', 'md', 'lg', 'xl', '2xl'] as const\n\nfunction widerBreakpoint(\n  a: ContainerBreakpoint | null,\n  b: ContainerBreakpoint | null,\n): ContainerBreakpoint | null {\n  if (!a) return b\n  if (!b) return a\n\n  return CONTAINER_BREAKPOINTS.indexOf(a) >= CONTAINER_BREAKPOINTS.indexOf(b) ? a : b\n}\n\n/**\n * Classes for a table's `contentGrid()`: one column, then `@…:grid-cols-N` container-query\n * classes relative to the `@container` around the card grid. A column count applies from\n * the wider of its key's size (`CONTENT_GRID_FROM`) and the size that fits that many cards\n * (`CONTENT_GRID_MIN`), so cards get fewer columns instead of getting narrow. Container\n * keys (`'@lg' => 2`) are used as given; when two keys land on the same size, the later\n * (wider) key wins.\n */\nexport function contentGridClasses(grid: Breakpoints | undefined | null): string {\n  const classes = new Map<ContainerBreakpoint, string>()\n\n  for (const key of CONTENT_GRID_KEYS) {\n    const value = grid?.[key]\n\n    if (!value) continue\n\n    const count = Math.min(Math.max(Math.trunc(value), 1), 12)\n    const at = widerBreakpoint(CONTENT_GRID_FROM[key] ?? null, CONTENT_GRID_MIN[count] ?? '@7xl')\n    const cls = at ? CONTAINER_GRID_COLS[at]?.[String(count)] : undefined\n\n    if (at && cls) classes.set(at, cls)\n  }\n\n  for (const breakpoint of CONTAINER_BREAKPOINTS) {\n    const cls = CONTAINER_GRID_COLS[breakpoint]?.[String(grid?.[breakpoint] ?? '')]\n\n    if (cls) classes.set(breakpoint, cls)\n  }\n\n  return [\n    'grid-cols-1',\n    ...CONTAINER_BREAKPOINTS.map((breakpoint) => classes.get(breakpoint)).filter(Boolean),\n  ].join(' ')\n}\n\nconst FLEX_ROW: Record<string, string> = {\n  default: 'flex-row',\n  sm: 'sm:flex-row',\n  md: 'md:flex-row',\n  lg: 'lg:flex-row',\n  xl: 'xl:flex-row',\n  '2xl': '2xl:flex-row',\n}\n\n/** `Flex::alignment()`: main-axis alignment (logical, so `start` follows the direction). */\nconst FLEX_JUSTIFY: Record<string, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  justify: 'justify-between',\n}\n\nconst FLEX_ALIGN: Record<string, Record<string, string>> = {\n  start: {\n    default: 'items-start',\n    sm: 'sm:items-start',\n    md: 'md:items-start',\n    lg: 'lg:items-start',\n    xl: 'xl:items-start',\n    '2xl': '2xl:items-start',\n  },\n  center: {\n    default: 'items-center',\n    sm: 'sm:items-center',\n    md: 'md:items-center',\n    lg: 'lg:items-center',\n    xl: 'xl:items-center',\n    '2xl': '2xl:items-center',\n  },\n  end: {\n    default: 'items-end',\n    sm: 'sm:items-end',\n    md: 'md:items-end',\n    lg: 'lg:items-end',\n    xl: 'xl:items-end',\n    '2xl': '2xl:items-end',\n  },\n}\n\n/**\n * Classes for a `Flex` schema component: stacked, then a row (and the vertical alignment)\n * from its `from` breakpoint. Force-generated with `@source inline(...)` in each renderer.\n */\nexport function flexLayoutClasses(flex: {\n  from?: string | null\n  verticalAlignment?: string | null\n  alignment?: string | null\n}): string {\n  const from = flex.from ?? 'default'\n  const align = flex.verticalAlignment ? FLEX_ALIGN[flex.verticalAlignment]?.[from] : undefined\n  const justify = flex.alignment ? FLEX_JUSTIFY[flex.alignment] : undefined\n\n  return ['flex flex-col gap-6', FLEX_ROW[from] ?? 'flex-row', align, justify]\n    .filter(Boolean)\n    .join(' ')\n}\n\n/** Width behaviour of a child inside a `Flex`: share the row, or keep its natural width. */\nexport function flexItemClasses(component: { grow?: boolean }): string {\n  return component.grow === false ? 'min-w-0 shrink-0' : 'min-w-0 flex-1'\n}\n"],"mappings":";;;;;;AAOA,MAAa,wBAAwD;CACnE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,QAAQ;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;AAAE;AAEpD,SAAS,MAAM,QAAgB,QAA8D;CAC3F,OAAO,OAAO,YAAY,OAAO,KAAK,UAAU,CAAC,OAAO,KAAK,GAAG,GAAG,SAAS,OAAO,CAAC,CAAC;AACvF;AAEA,MAAM,sBAA8D,OAAO,YACzE,sBAAsB,KAAK,eAAe,CAAC,YAAY,MAAM,GAAG,WAAW,cAAc,KAAK,CAAC,CAAC,CAClG;AAEA,MAAM,qBAA6D,OAAO,YACxE,sBAAsB,KAAK,eAAe,CACxC,YACA,MAAM,GAAG,WAAW,aAAa,CAAC,GAAG,OAAO,MAAM,CAAC,CACrD,CAAC,CACH;;AAGA,SAAgB,wBAAwB,KAAuD;CAC7F,OAAO,CAAC,CAAC,OAAO,OAAO,KAAK,GAAG,CAAC,CAAC,MAAM,QAAQ,IAAI,WAAW,GAAG,CAAC;AACpE;;AAGA,SAAgB,4BAA4B,SAA0C;CACpF,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,sBAAsB,KAAK,eAAe;EAC/C,MAAM,QAAQ,QAAQ;EAEtB,OAAO,QAAQ,oBAAoB,WAAW,GAAG,OAAO,KAAK,KAAK,KAAA;CACpE,CAAC,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;AAGA,SAAgB,2BAA2B,MAAwD;CACjG,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO,sBAAsB,KAAK,eAAe;EAC/C,MAAM,QAAQ,KAAK;EAEnB,OAAO,QAAQ,mBAAmB,WAAW,GAAG,OAAO,KAAK,KAAK,KAAA;CACnE,CAAC,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;;;;;;;AASA,MAAM,oBAAgE;CACpE,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;;;;;AAMA,MAAM,mBAA+D;CACnE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;AAEA,MAAM,oBAAoB;CAAC;CAAW;CAAM;CAAM;CAAM;CAAM;AAAK;AAEnE,SAAS,gBACP,GACA,GAC4B;CAC5B,IAAI,CAAC,GAAG,OAAO;CACf,IAAI,CAAC,GAAG,OAAO;CAEf,OAAO,sBAAsB,QAAQ,CAAC,KAAK,sBAAsB,QAAQ,CAAC,IAAI,IAAI;AACpF;;;;;;;;;AAUA,SAAgB,mBAAmB,MAA8C;CAC/E,MAAM,0BAAU,IAAI,IAAiC;CAErD,KAAK,MAAM,OAAO,mBAAmB;EACnC,MAAM,QAAQ,OAAO;EAErB,IAAI,CAAC,OAAO;EAEZ,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE;EACzD,MAAM,KAAK,gBAAgB,kBAAkB,QAAQ,MAAM,iBAAiB,UAAU,MAAM;EAC5F,MAAM,MAAM,KAAK,oBAAoB,GAAG,GAAG,OAAO,KAAK,KAAK,KAAA;EAE5D,IAAI,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;CACpC;CAEA,KAAK,MAAM,cAAc,uBAAuB;EAC9C,MAAM,MAAM,oBAAoB,WAAW,GAAG,OAAO,OAAO,eAAe,EAAE;EAE7E,IAAI,KAAK,QAAQ,IAAI,YAAY,GAAG;CACtC;CAEA,OAAO,CACL,eACA,GAAG,sBAAsB,KAAK,eAAe,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,OAAO,OAAO,CACtF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,MAAM,WAAmC;CACvC,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;;AAGA,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,SAAS;AACX;AAEA,MAAM,aAAqD;CACzD,OAAO;EACL,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;CACA,QAAQ;EACN,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;CACA,KAAK;EACH,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT;AACF;;;;;AAMA,SAAgB,kBAAkB,MAIvB;CACT,MAAM,OAAO,KAAK,QAAQ;CAC1B,MAAM,QAAQ,KAAK,oBAAoB,WAAW,KAAK,kBAAkB,GAAG,QAAQ,KAAA;CACpF,MAAM,UAAU,KAAK,YAAY,aAAa,KAAK,aAAa,KAAA;CAEhE,OAAO;EAAC;EAAuB,SAAS,SAAS;EAAY;EAAO;CAAO,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;AAGA,SAAgB,gBAAgB,WAAuC;CACrE,OAAO,UAAU,SAAS,QAAQ,qBAAqB;AACzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfakit/core",
-  "version": "0.1.13",
+  "version": "0.2.2",
   "description": "Framework-agnostic schema types and state management for Alfakit, the Laravel admin panel builder by Alfa Six.",
   "license": "MIT",
   "author": "Alfa Six (https://alfasixbh.com)",

package/themes.css

@@ -1015,3 +1015,95 @@
   box-shadow: none;
   outline: none;
 }
+
+/* ------------------------------------------------------------------ CMS site design */
+
+/*
+ * Public CMS pages (alfasix/alfakit-cms). **Site design** sets the theme variables on the
+ * document root; these rules apply its fonts and each block's **Style** section
+ * (`data-cms-background`, `data-cms-spacing`, `data-cms-visibility` on
+ * `data-slot="cms-block"`). The page keeps copies of its colours so a coloured block can
+ * swap them for its content.
+ */
+[data-slot='cms-page'] {
+  --cms-primary: var(--primary);
+  --cms-on-primary: var(--primary-foreground);
+  --cms-secondary: var(--secondary);
+  --cms-on-secondary: var(--secondary-foreground);
+  font-family: var(--cms-font-body);
+}
+
+/* In-page links (`#pricing`) stop below the sticky site header. */
+[data-slot='cms-page'] [data-slot='cms-block'][id] {
+  scroll-margin-top: 5rem;
+}
+
+[data-slot='cms-page'] :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--cms-font-heading, var(--cms-font-body));
+}
+
+[data-slot='cms-block'][data-cms-background] {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+[data-slot='cms-block'][data-cms-background='muted'] {
+  --background: var(--muted);
+}
+
+[data-slot='cms-block'][data-cms-background='primary'],
+[data-slot='cms-block'][data-cms-background='secondary'],
+[data-slot='cms-block'][data-cms-background='dark'] {
+  --muted: color-mix(in oklab, var(--foreground) 10%, var(--background));
+  --muted-foreground: color-mix(in oklab, var(--foreground) 80%, var(--background));
+  --border: color-mix(in oklab, var(--foreground) 22%, var(--background));
+  --card: color-mix(in oklab, var(--foreground) 7%, var(--background));
+  --card-foreground: var(--foreground);
+}
+
+[data-slot='cms-block'][data-cms-background='primary'] {
+  --background: var(--cms-primary);
+  --foreground: var(--cms-on-primary);
+  --primary: var(--cms-on-primary);
+  --primary-foreground: var(--cms-primary);
+}
+
+[data-slot='cms-block'][data-cms-background='secondary'] {
+  --background: var(--cms-secondary);
+  --foreground: var(--cms-on-secondary);
+}
+
+[data-slot='cms-block'][data-cms-background='dark'] {
+  --background: oklch(0.205 0 0);
+  --foreground: oklch(0.985 0 0);
+}
+
+[data-slot='cms-block'][data-cms-spacing='none'] > * {
+  padding-block: 0;
+}
+
+[data-slot='cms-block'][data-cms-spacing='small'] > * {
+  padding-block: 1.5rem;
+}
+
+[data-slot='cms-block'][data-cms-spacing='large'] > * {
+  padding-block: 6rem;
+}
+
+@media (min-width: 640px) {
+  [data-slot='cms-block'][data-cms-spacing='large'] > * {
+    padding-block: 8rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  [data-slot='cms-block'][data-cms-visibility='desktop'] {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  [data-slot='cms-block'][data-cms-visibility='mobile'] {
+    display: none;
+  }
+}