@viglet/viglet-design-system 2026.3.2 → 2026.3.3

package/dist/lib/axios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axios.d.ts","sourceRoot":"","sources":["../../src/lib/axios.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAqFvD,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,iBAAsB,QA0FrE;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"axios.d.ts","sourceRoot":"","sources":["../../src/lib/axios.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAwHxE,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,iBAAsB,QA0FrE;AAED,eAAe,KAAK,CAAC"}

package/dist/lib/export-xlsx.d.ts

@@ -1,5 +1,11 @@
+/**
+ * Write `data` to an .xlsx download, one column per entry in `headers`.
+ *
+ * @param sheetName Names the sheet. Defaults to `filename`, cleaned of the
+ *   characters Excel refuses and cut to the 31 it allows.
+ */
 export declare function exportToXlsx<T extends Record<string, unknown>>(data: T[], headers: {
     key: string;
     label: string;
-}[], filename: string): void;
+}[], filename: string, sheetName?: string): void;
 //# sourceMappingURL=export-xlsx.d.ts.map

package/dist/lib/export-xlsx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"export-xlsx.d.ts","sourceRoot":"","sources":["../../src/lib/export-xlsx.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,IAAI,EAAE,CAAC,EAAE,EACT,OAAO,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACzC,QAAQ,EAAE,MAAM,QAiCjB"}
+{"version":3,"file":"export-xlsx.d.ts","sourceRoot":"","sources":["../../src/lib/export-xlsx.ts"],"names":[],"mappings":"AAyBA;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,IAAI,EAAE,CAAC,EAAE,EACT,OAAO,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EACzC,QAAQ,EAAE,MAAM,EAChB,SAAS,CAAC,EAAE,MAAM,QAyBnB"}

package/dist/lib/react-markers.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+/**
+ * The `displayName` of a child element's component, or `undefined` when the
+ * child is a host tag.
+ *
+ * Several components in this package take configuration as marker children —
+ * `GridListNewButton`, `SubPageHeaderAction` — that render nothing and exist to
+ * be recognised by name. `child.type` is `string | JSXElementConstructor`, and
+ * only the second has a `displayName`, which is why reading it directly needs
+ * the narrowing this does once instead of a cast at every call site.
+ *
+ * Internal: not re-exported from `lib/index.ts`, because a marker protocol is a
+ * detail of the components that use it rather than something a product composes
+ * against.
+ */
+export declare function markerName(child: ReactElement): string | undefined;
+//# sourceMappingURL=react-markers.d.ts.map

package/dist/lib/react-markers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-markers.d.ts","sourceRoot":"","sources":["../../src/lib/react-markers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,GAAG,SAAS,CAIlE"}

package/dist/lib/utils.d.ts

@@ -1,6 +1,28 @@
 import { ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * The language and region of a locale, in either spelling anything writes it.
+ *
+ * `pt_BR` is the Java and POSIX form; `pt-BR` is what BCP 47, `Intl`,
+ * `navigator.language`, i18next and this package's own `i18n.language` produce.
+ * Reading only the first was why `getFlagEmoji("pt-BR")` answered with a globe.
+ *
+ * Kept here rather than in `badge-locale.tsx`, where the other half of this
+ * lived: that file carries the language-to-country and country-override maps and
+ * pulls in React, and neither belongs on the path of a string utility.
+ */
+export declare function parseLocale(locale: string): {
+    language: string;
+    region: string | null;
+};
 export declare const truncateMiddle: (text: string, maxLength?: number) => string;
+/**
+ * The flag for a locale's region, or 🌐 when it names none.
+ *
+ * A locale with no region — `pt` — still answers 🌐 rather than guessing a
+ * country from the language. `BadgeLocale` does make that guess, deliberately,
+ * from a table of its own; this is the strict reading and stays one.
+ */
 export declare const getFlagEmoji: (locale: string) => string;
 export declare const getHashedColor: (str: string) => {
     h: number;

package/dist/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,eAAO,MAAM,cAAc,GACzB,MAAM,MAAM,EACZ,YAAW,MAAW,KACrB,MAaF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,WAS1C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM;;;;;;;;;;;;CAmBzC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAWA;AAED,eAAO,MAAM,cAAc,GACzB,MAAM,MAAM,EACZ,YAAW,MAAW,KACrB,MAkBF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,WAS1C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM;;;;;;;;;;;;CAmBzC,CAAC"}

package/dist/loading-provider-1mgM91iY.cjs

@@ -0,0 +1 @@
+const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./badge-locale-sIsBdP_e.cjs");let n=require("react");n=e.t(n,1);let r=require("react/jsx-runtime"),i=require("@tabler/icons-react"),a=require("react-i18next"),o=require("react-router-dom");var s=({feature:e,name:s,onDelete:c,open:l,setOpen:u,trigger:d,blockedBy:f,title:p,description:m,confirmLabel:h})=>{let g=f&&f.length>0,_=(0,o.useNavigate)(),{t:v}=(0,a.useTranslation)(),[y,b]=(0,n.useState)(``),x=y===s;function S(e){u(e),e||b(``)}return(0,r.jsxs)(t.D,{open:l,onOpenChange:S,children:[d!==null&&(0,r.jsx)(t.I,{asChild:!0,children:d??(0,r.jsx)(t.u,{variant:`ghost`,size:`icon-sm`,children:(0,r.jsx)(i.IconTrash,{className:`size-5!`})})}),(0,r.jsx)(t.k,{className:`sm:max-w-md`,children:g?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.M,{children:[(0,r.jsx)(`div`,{className:`mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 mb-2`,children:(0,r.jsx)(i.IconAlertTriangle,{className:`size-6 text-amber-500`})}),(0,r.jsx)(t.F,{className:`text-center`,children:v(`dialog.cannotDelete`,{feature:e})}),(0,r.jsx)(t.A,{className:`text-center`,children:v(`dialog.inUse`,{name:s})})]}),(0,r.jsxs)(`div`,{className:`space-y-3`,children:[(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:v(`dialog.dependingSites`,{feature:e})}),(0,r.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:f.map(e=>{let n=e.language?t.n(e.language):void 0;return(0,r.jsx)(t.r,{text:e.name,href:e.href,onClick:e=>{u(!1),e&&_(e)},prefix:n?(0,r.jsx)(`img`,{src:`https://flagcdn.com/w40/${n}.png`,alt:e.language,className:`w-4 h-3 object-cover rounded-sm`}):void 0},e.id)})}),(0,r.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:v(`dialog.removeDependencies`,{feature:e})})]}),(0,r.jsx)(t.j,{children:(0,r.jsx)(t.u,{onClick:()=>u(!1),variant:`outline`,className:`w-full`,children:v(`dialog.understood`)})})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(t.M,{children:[(0,r.jsx)(`div`,{className:`mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 ring-1 ring-red-500/20 mb-2`,children:(0,r.jsx)(i.IconTrash,{className:`size-6 text-red-500`})}),(0,r.jsx)(t.F,{className:`text-center`,children:p??v(`dialog.deleteFeature`,{feature:e})}),(0,r.jsx)(t.A,{className:`text-center`,children:m??v(`dialog.permanentDelete`,{name:s})})]}),(0,r.jsxs)(`div`,{className:`space-y-2`,children:[(0,r.jsxs)(`label`,{className:`text-sm text-muted-foreground`,children:[v(`dialog.typeToConfirm`),` `,(0,r.jsx)(`span`,{className:`font-mono font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded`,children:s}),` `,v(`dialog.toConfirm`)]}),(0,r.jsx)(t.l,{value:y,onChange:e=>b(e.target.value),placeholder:s,className:`font-mono text-sm`,autoFocus:!0})]}),(0,r.jsxs)(t.j,{className:`flex-col gap-2 sm:flex-col`,children:[(0,r.jsxs)(t.u,{onClick:c,variant:`destructive`,disabled:!x,className:`w-full`,children:[(0,r.jsx)(i.IconTrash,{className:`size-4`}),h??v(`dialog.deleteFeature`,{feature:e})]}),(0,r.jsx)(t.u,{onClick:()=>S(!1),variant:`ghost`,className:`w-full`,children:v(`common.cancel`)})]})]})})]})};function c({className:e,variant:n,size:i,to:a,onClick:s,children:c}){let l=t.U(t.d({variant:n,size:i,className:e}));return(0,r.jsx)(o.NavLink,{to:a,"data-slot":`gradient-button`,className:l,onClick:e=>{let t=typeof a==`string`?a:a.pathname;t&&globalThis.location.pathname===t&&globalThis.location.reload(),s&&s(e)},children:c})}var l=({icon:e,title:t,description:n,urlNew:i,buttonText:a})=>(0,r.jsx)(`div`,{className:`flex items-center justify-center px-6 py-16`,children:(0,r.jsx)(`div`,{className:`relative w-full max-w-md overflow-hidden rounded-2xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-xl`,children:(0,r.jsxs)(`div`,{className:`relative flex flex-col items-center text-center px-8 py-12 space-y-6`,children:[(0,r.jsxs)(`div`,{className:`relative`,children:[(0,r.jsx)(`div`,{className:`absolute inset-0 rounded-2xl bg-gradient-to-br from-[var(--vg-accent-surface-strong)] to-[var(--vg-accent-surface-strong)] blur-xl animate-pulse`}),(0,r.jsx)(`div`,{className:`relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br vg-accent-solid shadow-lg shadow-[var(--vg-accent-line)] ring-4 ring-[var(--vg-accent-surface)]`,children:(0,r.jsx)(e,{className:`text-white`,size:30})})]}),(0,r.jsxs)(`div`,{className:`space-y-2`,children:[(0,r.jsx)(`h2`,{className:`text-xl font-semibold tracking-tight`,children:t}),(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto`,children:n})]}),i&&(0,r.jsx)(c,{size:`lg`,to:i,children:a})]})})}),u=({checkIsNotUndefined:e,error:n,tryAgainUrl:o,children:s})=>{let{t:c}=(0,a.useTranslation)();return n?(0,r.jsx)(l,{icon:i.IconAlertTriangleFilled,title:c(`common.errorLoading`),description:n,buttonText:c(`common.tryAgain`),urlNew:o}):e===void 0&&!n?(0,r.jsxs)(`div`,{className:`space-y-6 py-8 px-6 animate-pulse`,children:[(0,r.jsx)(t.c,{className:`h-8 w-1/3 rounded-md`}),(0,r.jsx)(`div`,{className:`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`,children:[`skeleton-1`,`skeleton-2`,`skeleton-3`].map(e=>(0,r.jsxs)(`div`,{className:`space-y-3 p-4 border rounded-xl bg-slate-50/50 dark:bg-slate-900/20`,children:[(0,r.jsx)(t.c,{className:`h-5 w-2/3`}),(0,r.jsx)(t.c,{className:`h-12 w-full`}),(0,r.jsx)(t.c,{className:`h-4 w-5/6`})]},e))}),(0,r.jsx)(`div`,{className:`pt-4`,children:(0,r.jsx)(t.c,{className:`h-10 w-32 rounded-lg`})})]}):(0,r.jsx)(r.Fragment,{children:s})};Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/dist/loading-provider-CMnOuvdR.js

@@ -0,0 +1,224 @@
+import { A as e, D as t, F as n, I as r, M as i, U as a, c as o, d as s, j as c, k as l, l as u, n as d, r as f, u as p } from "./badge-locale-BxI9TwkE.js";
+import { useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { IconAlertTriangle as v, IconAlertTriangleFilled as y, IconTrash as b } from "@tabler/icons-react";
+import { useTranslation as x } from "react-i18next";
+import { NavLink as S, useNavigate as C } from "react-router-dom";
+//#region src/components/router/dialog.delete.tsx
+var w = ({ feature: a, name: o, onDelete: s, open: y, setOpen: S, trigger: w, blockedBy: T, title: E, description: D, confirmLabel: O }) => {
+	let k = T && T.length > 0, A = C(), { t: j } = x(), [M, N] = m(""), P = M === o;
+	function F(e) {
+		S(e), e || N("");
+	}
+	return /* @__PURE__ */ _(t, {
+		open: y,
+		onOpenChange: F,
+		children: [w !== null && /* @__PURE__ */ g(r, {
+			asChild: !0,
+			children: w ?? /* @__PURE__ */ g(p, {
+				variant: "ghost",
+				size: "icon-sm",
+				children: /* @__PURE__ */ g(b, { className: "size-5!" })
+			})
+		}), /* @__PURE__ */ g(l, {
+			className: "sm:max-w-md",
+			children: k ? /* @__PURE__ */ _(h, { children: [
+				/* @__PURE__ */ _(i, { children: [
+					/* @__PURE__ */ g("div", {
+						className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/10 ring-1 ring-amber-500/20 mb-2",
+						children: /* @__PURE__ */ g(v, { className: "size-6 text-amber-500" })
+					}),
+					/* @__PURE__ */ g(n, {
+						className: "text-center",
+						children: j("dialog.cannotDelete", { feature: a })
+					}),
+					/* @__PURE__ */ g(e, {
+						className: "text-center",
+						children: j("dialog.inUse", { name: o })
+					})
+				] }),
+				/* @__PURE__ */ _("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ g("p", {
+							className: "text-sm text-muted-foreground",
+							children: j("dialog.dependingSites", { feature: a })
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "flex flex-wrap gap-2",
+							children: T.map((e) => {
+								let t = e.language ? d(e.language) : void 0;
+								return /* @__PURE__ */ g(f, {
+									text: e.name,
+									href: e.href,
+									onClick: (e) => {
+										S(!1), e && A(e);
+									},
+									prefix: t ? /* @__PURE__ */ g("img", {
+										src: `https://flagcdn.com/w40/${t}.png`,
+										alt: e.language,
+										className: "w-4 h-3 object-cover rounded-sm"
+									}) : void 0
+								}, e.id);
+							})
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "text-xs text-muted-foreground",
+							children: j("dialog.removeDependencies", { feature: a })
+						})
+					]
+				}),
+				/* @__PURE__ */ g(c, { children: /* @__PURE__ */ g(p, {
+					onClick: () => S(!1),
+					variant: "outline",
+					className: "w-full",
+					children: j("dialog.understood")
+				}) })
+			] }) : /* @__PURE__ */ _(h, { children: [
+				/* @__PURE__ */ _(i, { children: [
+					/* @__PURE__ */ g("div", {
+						className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 ring-1 ring-red-500/20 mb-2",
+						children: /* @__PURE__ */ g(b, { className: "size-6 text-red-500" })
+					}),
+					/* @__PURE__ */ g(n, {
+						className: "text-center",
+						children: E ?? j("dialog.deleteFeature", { feature: a })
+					}),
+					/* @__PURE__ */ g(e, {
+						className: "text-center",
+						children: D ?? j("dialog.permanentDelete", { name: o })
+					})
+				] }),
+				/* @__PURE__ */ _("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ _("label", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							j("dialog.typeToConfirm"),
+							" ",
+							/* @__PURE__ */ g("span", {
+								className: "font-mono font-semibold text-foreground bg-muted px-1.5 py-0.5 rounded",
+								children: o
+							}),
+							" ",
+							j("dialog.toConfirm")
+						]
+					}), /* @__PURE__ */ g(u, {
+						value: M,
+						onChange: (e) => N(e.target.value),
+						placeholder: o,
+						className: "font-mono text-sm",
+						autoFocus: !0
+					})]
+				}),
+				/* @__PURE__ */ _(c, {
+					className: "flex-col gap-2 sm:flex-col",
+					children: [/* @__PURE__ */ _(p, {
+						onClick: s,
+						variant: "destructive",
+						disabled: !P,
+						className: "w-full",
+						children: [/* @__PURE__ */ g(b, { className: "size-4" }), O ?? j("dialog.deleteFeature", { feature: a })]
+					}), /* @__PURE__ */ g(p, {
+						onClick: () => F(!1),
+						variant: "ghost",
+						className: "w-full",
+						children: j("common.cancel")
+					})]
+				})
+			] })
+		})]
+	});
+};
+//#endregion
+//#region src/components/router/gradient-button-link.tsx
+function T({ className: e, variant: t, size: n, to: r, onClick: i, children: o }) {
+	let c = a(s({
+		variant: t,
+		size: n,
+		className: e
+	}));
+	return /* @__PURE__ */ g(S, {
+		to: r,
+		"data-slot": "gradient-button",
+		className: c,
+		onClick: (e) => {
+			let t = typeof r == "string" ? r : r.pathname;
+			t && globalThis.location.pathname === t && globalThis.location.reload(), i && i(e);
+		},
+		children: o
+	});
+}
+//#endregion
+//#region src/components/router/blank-slate.tsx
+var E = ({ icon: e, title: t, description: n, urlNew: r, buttonText: i }) => /* @__PURE__ */ g("div", {
+	className: "flex items-center justify-center px-6 py-16",
+	children: /* @__PURE__ */ g("div", {
+		className: "relative w-full max-w-md overflow-hidden rounded-2xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-xl",
+		children: /* @__PURE__ */ _("div", {
+			className: "relative flex flex-col items-center text-center px-8 py-12 space-y-6",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ g("div", { className: "absolute inset-0 rounded-2xl bg-gradient-to-br from-[var(--vg-accent-surface-strong)] to-[var(--vg-accent-surface-strong)] blur-xl animate-pulse" }), /* @__PURE__ */ g("div", {
+						className: "relative inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br vg-accent-solid shadow-lg shadow-[var(--vg-accent-line)] ring-4 ring-[var(--vg-accent-surface)]",
+						children: /* @__PURE__ */ g(e, {
+							className: "text-white",
+							size: 30
+						})
+					})]
+				}),
+				/* @__PURE__ */ _("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ g("h2", {
+						className: "text-xl font-semibold tracking-tight",
+						children: t
+					}), /* @__PURE__ */ g("p", {
+						className: "text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto",
+						children: n
+					})]
+				}),
+				r && /* @__PURE__ */ g(T, {
+					size: "lg",
+					to: r,
+					children: i
+				})
+			]
+		})
+	})
+}), D = ({ checkIsNotUndefined: e, error: t, tryAgainUrl: n, children: r }) => {
+	let { t: i } = x();
+	return t ? /* @__PURE__ */ g(E, {
+		icon: y,
+		title: i("common.errorLoading"),
+		description: t,
+		buttonText: i("common.tryAgain"),
+		urlNew: n
+	}) : e === void 0 && !t ? /* @__PURE__ */ _("div", {
+		className: "space-y-6 py-8 px-6 animate-pulse",
+		children: [
+			/* @__PURE__ */ g(o, { className: "h-8 w-1/3 rounded-md" }),
+			/* @__PURE__ */ g("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",
+				children: [
+					"skeleton-1",
+					"skeleton-2",
+					"skeleton-3"
+				].map((e) => /* @__PURE__ */ _("div", {
+					className: "space-y-3 p-4 border rounded-xl bg-slate-50/50 dark:bg-slate-900/20",
+					children: [
+						/* @__PURE__ */ g(o, { className: "h-5 w-2/3" }),
+						/* @__PURE__ */ g(o, { className: "h-12 w-full" }),
+						/* @__PURE__ */ g(o, { className: "h-4 w-5/6" })
+					]
+				}, e))
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "pt-4",
+				children: /* @__PURE__ */ g(o, { className: "h-10 w-32 rounded-lg" })
+			})
+		]
+	}) : /* @__PURE__ */ g(h, { children: r });
+};
+//#endregion
+export { w as i, E as n, T as r, D as t };

package/dist/preset.css

@@ -17,9 +17,8 @@
    `--border`, etc.
    ============================================================= */
 
-/* Fonts referenced by `--font-sans` / `--font-brand` below. */
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/plus-jakarta-sans";
+/* The faces `--font-sans` / `--font-brand` name are `./fonts`, imported
+   separately so a preset consumer carries tokens and not 741KB of woff2. */
 
 @custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
 
@@ -105,6 +104,96 @@
   --vg-sidebar-border: oklch(0.922 0 0);
   --vg-sidebar-ring: oklch(0.708 0 0);
 
+  /* Bento tones — the two gradient stops of the tonal icon chip, which is the
+     most repeated visual in the bento layer: every hero, every form section,
+     every tile. A product re-keys a tone by redefining these two properties,
+     not by forking the component that renders it.
+
+     The values are the OKLCH the layer shipped with, so re-keying is a choice
+     rather than something that happened on the way here. Fixed across light and
+     dark on purpose: the chip carries the colour and the surface stays frosted,
+     so the two never compete. */
+  --vg-bento-tone-blue-from: oklch(54.6% 0.245 262.881);
+  --vg-bento-tone-blue-to: oklch(51.1% 0.262 276.966);
+  --vg-bento-tone-indigo-from: oklch(51.1% 0.262 276.966);
+  --vg-bento-tone-indigo-to: oklch(59.1% 0.293 322.896);
+  --vg-bento-tone-violet-from: oklch(54.1% 0.281 293.009);
+  --vg-bento-tone-violet-to: oklch(55.8% 0.288 302.321);
+  --vg-bento-tone-emerald-from: oklch(59.6% 0.145 163.225);
+  --vg-bento-tone-emerald-to: oklch(60% 0.118 184.704);
+  --vg-bento-tone-amber-from: oklch(76.9% 0.188 70.08);
+  --vg-bento-tone-amber-to: oklch(70.5% 0.213 47.604);
+  --vg-bento-tone-rose-from: oklch(58.6% 0.253 17.585);
+  --vg-bento-tone-rose-to: oklch(59.2% 0.249 0.584);
+  --vg-bento-tone-slate-from: oklch(44.6% 0.043 257.281);
+  --vg-bento-tone-slate-to: oklch(37.2% 0.044 257.287);
+
+  /* Bento status intents — the pills and the destructive menu item. Same reason
+     the tones are tokens: a shared component that names its own colours makes
+     one product look wrong. `-mark` is the dot and the border/background tint;
+     `-text` is the label, with a lighter value on dark where the tinted surface
+     is darker. Values are the OKLCH the layer shipped with. */
+  --vg-bento-on-mark: oklch(69.6% 0.17 162.48);
+  --vg-bento-on-text: oklch(50.8% 0.118 165.612);
+  --vg-bento-on-text-dark: oklch(76.5% 0.177 163.223);
+  --vg-bento-warn-mark: oklch(76.9% 0.188 70.08);
+  --vg-bento-warn-text: oklch(47.3% 0.137 46.201);
+  --vg-bento-warn-text-dark: oklch(82.8% 0.189 84.429);
+  --vg-bento-error-mark: oklch(63.7% 0.237 25.331);
+  --vg-bento-error-text: oklch(50.5% 0.213 27.518);
+  --vg-bento-error-text-dark: oklch(70.4% 0.191 22.216);
+  --vg-bento-danger-mark: oklch(64.5% 0.246 16.439);
+  --vg-bento-danger-text: oklch(51.4% 0.222 16.935);
+  --vg-bento-danger-text-dark: oklch(71.2% 0.194 13.428);
+  --vg-bento-danger-text-dark-hover: oklch(81% 0.117 11.638);
+  /* The pulse glow behind a live indicator. It shipped as a raw indigo inside a
+     keyframe, where the check that reads Tailwind class names could not see it. */
+  --vg-bento-pulse: oklch(58.5% 0.233 277.117);
+
+  /* The brand accent — the tinted icon chip, the ring around it, the accented
+     label, the solid primary fill. It shipped as a literal blue/indigo pair
+     spelled out in every page header, sidebar and empty state, which is why the
+     two products could not differ where they should and had to fork a header to
+     differ at all.
+
+     A product sets --vg-accent-from / -to / -text / -text-dark once, at the
+     root, and every shared component follows. The values here are the blue the
+     console shipped with, so re-keying is a choice rather than something that
+     happened on the way here. */
+  --vg-accent-from: oklch(62.3% 0.214 259.815);
+  --vg-accent-to: oklch(58.5% 0.233 277.117);
+  --vg-accent-text: oklch(54.6% 0.245 262.881);
+  --vg-accent-text-dark: oklch(70.7% 0.165 254.624);
+
+  /* Derived, and already resolved for the current theme — the .dark block below
+     re-points -fg, so a component writes text-[var(--vg-accent-fg)] once and
+     needs no dark: twin. The three surfaces are the tint, the strong tint and
+     the line, in the proportions the chip already uses.
+
+     Set the four source tokens on :root, not on a wrapper. A custom property
+     substitutes its var() references where it is *declared*, so everything
+     below is mixed against the --vg-accent-from declared here. Re-keying a
+     subtree changes what a utility class mixes inline — the chip, the solid
+     fill — and leaves these at the root's value, which looks like a partial
+     re-key and reads as a bug in the component. */
+  --vg-accent-fg: var(--vg-accent-text);
+  --vg-accent-surface: color-mix(in oklab, var(--vg-accent-from) 10%, transparent);
+  --vg-accent-surface-strong: color-mix(in oklab, var(--vg-accent-from) 20%, transparent);
+  --vg-accent-line: color-mix(in oklab, var(--vg-accent-from) 35%, transparent);
+
+  /* The accent as an interactive surface — the primary button, the checked
+     switch. On light the fill sits a step darker than the stops so white text
+     clears contrast; on dark the stops themselves are the fill and the hover
+     darkens instead. That asymmetry is why these are stated per theme rather
+     than mixed at the call site. */
+  --vg-accent-fill-from: color-mix(in oklab, var(--vg-accent-from) 88%, black);
+  --vg-accent-fill-to: color-mix(in oklab, var(--vg-accent-to) 88%, black);
+  --vg-accent-fill-from-hover: color-mix(in oklab, var(--vg-accent-from) 76%, black);
+  --vg-accent-fill-to-hover: color-mix(in oklab, var(--vg-accent-to) 76%, black);
+  --vg-accent-ring: color-mix(in oklab, var(--vg-accent-from) 50%, transparent);
+  --vg-accent-shadow: color-mix(in oklab, var(--vg-accent-from) 25%, transparent);
+  --vg-accent-shadow-hover: color-mix(in oklab, var(--vg-accent-from) 30%, transparent);
+
   /* Brand palette */
   --vg-brand: #c2410c;
   --vg-brand-dark: #9a3412;
@@ -183,6 +272,17 @@
   --vg-muted-foreground: oklch(0.708 0 0);
   --vg-accent: oklch(0.269 0 0);
   --vg-accent-foreground: oklch(0.985 0 0);
+  /* The brand accent's dark twin. The tint surfaces are color-mix over the same
+     stop and read correctly on either ground, so only the foreground and the
+     interactive fill re-point here. */
+  --vg-accent-fg: var(--vg-accent-text-dark);
+  --vg-accent-fill-from: var(--vg-accent-from);
+  --vg-accent-fill-to: var(--vg-accent-to);
+  --vg-accent-fill-from-hover: color-mix(in oklab, var(--vg-accent-from) 88%, black);
+  --vg-accent-fill-to-hover: color-mix(in oklab, var(--vg-accent-to) 88%, black);
+  --vg-accent-ring: color-mix(in oklab, var(--vg-accent-text-dark) 50%, transparent);
+  --vg-accent-shadow: color-mix(in oklab, var(--vg-accent-from) 20%, transparent);
+  --vg-accent-shadow-hover: color-mix(in oklab, var(--vg-accent-from) 25%, transparent);
   --vg-destructive: oklch(0.704 0.191 22.216);
   --vg-border: oklch(1 0 0 / 10%);
   --vg-input: oklch(1 0 0 / 15%);