@rimelight/ui 0.0.44 → 0.0.46

package/dist/icons--RzV1RTU.d.mts

@@ -0,0 +1,72 @@
+//#region src/icons.raw.d.ts
+declare const svg: (inner: string) => string;
+declare const ICONS: {
+  readonly alertTriangle: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/>`;
+  readonly alignLeft: `<line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/>`;
+  readonly arrowLeft: `<path d="M19 12H5M12 19l-7-7 7-7"/>`;
+  readonly arrowRight: `<path d="M5 12h14M12 5l7 7-7 7"/>`;
+  readonly bell: `<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/>`;
+  readonly check: `<path d="M20 6 9 17l-5-5"/>`;
+  readonly chevronDown: `<path d="m6 9 6 6 6-6"/>`;
+  readonly chevronLeft: `<path d="m15 18-6-6 6-6"/>`;
+  readonly chevronRight: `<path d="m9 18 6-6-6-6"/>`;
+  readonly chevronsUpDown: `<path d="m7 15 5 5 5-5M7 9l5-5 5 5"/>`;
+  readonly circleCheck: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`;
+  readonly circleX: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/>`;
+  readonly close: `<path d="M18 6 6 18M6 6l12 12"/>`;
+  readonly copy: `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`;
+  readonly download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>`;
+  readonly externalLink: `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>`;
+  readonly fileQuestion: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01"/>`;
+  readonly gripHorizontal: `<circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/>`;
+  readonly gripVertical: `<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>`;
+  readonly hardDrive: `<rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01M10 18h.01M2 14L5 3h14l3 11"/>`;
+  readonly image: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`;
+  readonly imageUpscale: `<path d="M16 3H3v13h13V3z"/><path d="M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1"/>`;
+  readonly info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>`;
+  readonly layers: `<path d="m12 3-10 5L12 13l10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>`;
+  readonly list: `<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>`;
+  readonly loaderCircle: `<path d="M21 12a9 9 0 1 1-6.219-8.56"/>`;
+  readonly moon: `<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>`;
+  readonly panelLeft: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/>`;
+  readonly play: `<polygon points="6 3 20 12 6 21 6 3"/>`;
+  readonly quote: `<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z"/>`;
+  readonly search: `<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>`;
+  readonly share: `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>`;
+  readonly sun: `<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>`;
+  readonly uploadCloud: `<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3"/>`;
+  readonly user: `<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`;
+  readonly star: `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`;
+  readonly lock: `<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`;
+  readonly eye: `<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/>`;
+  readonly eyeOff: `<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22"/><line x1="2" x2="22" y1="2" y2="22"/>`;
+  readonly arrowUp: `<path d="M12 19V5M5 12l7-7 7 7"/>`;
+  readonly arrowDown: `<path d="M12 5v14M19 12l-7 7-7-7"/>`;
+  readonly edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`;
+  readonly link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`;
+  readonly plus: `<path d="M5 12h14M12 5v14"/>`;
+  readonly trash: `<path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`;
+  readonly fileText: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8M16 13H8M16 17H8"/>`;
+  readonly settings: `<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`;
+  readonly type: `<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>`;
+  readonly code: `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`;
+  readonly film: `<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4"/>`;
+  readonly messageSquare: `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`;
+  readonly bookOpen: `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`;
+  readonly panelRight: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/>`;
+  readonly pin: `<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>`;
+  readonly ellipsisVertical: `<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>`;
+  readonly arrowUpFromLine: `<path d="m18 9-6-6-6 6"/><path d="M12 3v14"/><path d="M5 21h14"/>`;
+  readonly arrowDownToLine: `<path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M5 21h14"/>`;
+};
+//#endregion
+//#region src/icons.d.ts
+declare const getSvgIcon: (k: string) => string;
+declare const DEFAULT_ICONS: Record<keyof typeof ICONS, string>;
+type RimelightIcons = Partial<Record<keyof typeof ICONS | (string & {}), string>>;
+declare const resolveIcon: (name?: string, custom?: string) => {
+  isClass: boolean;
+  content: string;
+};
+//#endregion
+export { ICONS as a, resolveIcon as i, RimelightIcons as n, svg as o, getSvgIcon as r, DEFAULT_ICONS as t };

package/dist/icons.d.mts

@@ -0,0 +1,2 @@
+import { a as ICONS, i as resolveIcon, n as RimelightIcons, o as svg, r as getSvgIcon, t as DEFAULT_ICONS } from "./icons--RzV1RTU.mjs";
+export { DEFAULT_ICONS, ICONS, RimelightIcons, getSvgIcon, resolveIcon, svg };

package/dist/icons.mjs

@@ -0,0 +1,32 @@
+import { n as getIconSvg, r as svg, t as ICONS } from "./icons.raw-CjAuL2Sc.mjs";
+import uiConfig from "virtual:rimelight/ui";
+//#region src/icons.ts
+const getSvgIcon = (k) => getIconSvg(k) ?? "";
+const DEFAULT_ICONS = Object.fromEntries(Object.keys(ICONS).map((k) => [k, getSvgIcon(k)]));
+const EMPTY_ICON = {
+	isClass: false,
+	content: ""
+};
+const cache = /* @__PURE__ */ new Map();
+const resolveIcon = (name = "", custom) => {
+	if (!name) return EMPTY_ICON;
+	const raw = custom || uiConfig?.icons?.[name] || name;
+	let res = cache.get(raw);
+	if (!res) {
+		const content = getIconSvg(raw);
+		res = content !== void 0 ? {
+			isClass: false,
+			content
+		} : raw.startsWith("i-") || raw.includes(":") ? {
+			isClass: true,
+			content: raw
+		} : {
+			isClass: false,
+			content: raw.startsWith("<svg") ? raw : raw.startsWith("<") ? svg(raw) : ""
+		};
+		cache.set(raw, res);
+	}
+	return res;
+};
+//#endregion
+export { DEFAULT_ICONS, ICONS, getSvgIcon, resolveIcon, svg };

package/dist/icons.raw-CjAuL2Sc.mjs

@@ -0,0 +1,67 @@
+//#region src/icons.raw.ts
+const svg = (inner) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="100%" height="100%">${inner}</svg>`;
+const getIconSvg = (name) => {
+	if (!Object.prototype.hasOwnProperty.call(ICONS, name)) return void 0;
+	return svg(ICONS[name]);
+};
+const ICONS = {
+	alertTriangle: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/>`,
+	alignLeft: `<line x1="21" x2="3" y1="6" y2="6"/><line x1="15" x2="3" y1="12" y2="12"/><line x1="17" x2="3" y1="18" y2="18"/>`,
+	arrowLeft: `<path d="M19 12H5M12 19l-7-7 7-7"/>`,
+	arrowRight: `<path d="M5 12h14M12 5l7 7-7 7"/>`,
+	bell: `<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/>`,
+	check: `<path d="M20 6 9 17l-5-5"/>`,
+	chevronDown: `<path d="m6 9 6 6 6-6"/>`,
+	chevronLeft: `<path d="m15 18-6-6 6-6"/>`,
+	chevronRight: `<path d="m9 18 6-6-6-6"/>`,
+	chevronsUpDown: `<path d="m7 15 5 5 5-5M7 9l5-5 5 5"/>`,
+	circleCheck: `<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`,
+	circleX: `<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/>`,
+	close: `<path d="M18 6 6 18M6 6l12 12"/>`,
+	copy: `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`,
+	download: `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>`,
+	externalLink: `<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/>`,
+	fileQuestion: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4M9.1 11.8a3 3 0 0 1 5.8 1c0 .9-.6 1.4-1.1 1.8-.4.3-.8.7-.8 1.4M12 19h.01"/>`,
+	gripHorizontal: `<circle cx="12" cy="9" r="1"/><circle cx="19" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="12" cy="15" r="1"/><circle cx="19" cy="15" r="1"/><circle cx="5" cy="15" r="1"/>`,
+	gripVertical: `<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>`,
+	hardDrive: `<rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01M10 18h.01M2 14L5 3h14l3 11"/>`,
+	image: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`,
+	imageUpscale: `<path d="M16 3H3v13h13V3z"/><path d="M21 21v-4a2 2 0 0 0-2-2h-3M21 11V9M21 5a2 2 0 0 0-2-2h-1"/>`,
+	info: `<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>`,
+	layers: `<path d="m12 3-10 5L12 13l10-5-10-5Z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>`,
+	list: `<line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/>`,
+	loaderCircle: `<path d="M21 12a9 9 0 1 1-6.219-8.56"/>`,
+	moon: `<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>`,
+	panelLeft: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M9 3v18"/>`,
+	play: `<polygon points="6 3 20 12 6 21 6 3"/>`,
+	quote: `<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Zm11 0c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-3 6-3 6Z"/>`,
+	search: `<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>`,
+	share: `<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98M15.41 6.51l-6.82 3.98"/>`,
+	sun: `<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>`,
+	uploadCloud: `<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242M12 12v9M9 15l3-3 3 3"/>`,
+	user: `<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+	star: `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+	lock: `<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+	eye: `<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0z"/><circle cx="12" cy="12" r="3"/>`,
+	eyeOff: `<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499A10.75 10.75 0 0 1 2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.225-4.22"/><line x1="2" x2="22" y1="2" y2="22"/>`,
+	arrowUp: `<path d="M12 19V5M5 12l7-7 7 7"/>`,
+	arrowDown: `<path d="M12 5v14M19 12l-7 7-7-7"/>`,
+	edit: `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+	link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
+	plus: `<path d="M5 12h14M12 5v14"/>`,
+	trash: `<path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
+	fileText: `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8M16 13H8M16 17H8"/>`,
+	settings: `<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`,
+	type: `<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/>`,
+	code: `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+	film: `<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18M17 3v18M3 7h4M17 7h4M3 12h18M3 17h4M17 17h4"/>`,
+	messageSquare: `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>`,
+	bookOpen: `<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>`,
+	panelRight: `<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="M15 3v18"/>`,
+	pin: `<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>`,
+	ellipsisVertical: `<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>`,
+	arrowUpFromLine: `<path d="m18 9-6-6-6 6"/><path d="M12 3v14"/><path d="M5 21h14"/>`,
+	arrowDownToLine: `<path d="M12 17V3"/><path d="m6 11 6 6 6-6"/><path d="M5 21h14"/>`
+};
+//#endregion
+export { getIconSvg as n, svg as r, ICONS as t };

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import { c as UIConfig } from "./types-DqAgCNcm.mjs";
+//#region src/index.d.ts
+interface RimelightUIPlugin {
+  name: string;
+  enforce?: "pre" | "post";
+  resolveId?: (id: string) => string | null | undefined;
+  load?: (id: string) => string | null | undefined;
+  [key: string]: any;
+}
+type RimelightUIPlugins = (RimelightUIPlugin | RimelightUIPlugin[])[];
+declare const ui: ({ unocss, ...cfg }?: UIConfig) => RimelightUIPlugins;
+//#endregion
+export { RimelightUIPlugin, RimelightUIPlugins, ui };

package/dist/index.mjs

@@ -0,0 +1,26 @@
+import rimelightUiPreset from "./preset.mjs";
+import UnoCSS from "@unocss/vite";
+//#region src/index.ts
+const ID = "virtual:rimelight/ui";
+const ui = ({ unocss = {}, ...cfg } = {}) => [...UnoCSS({
+	...unocss,
+	presets: [rimelightUiPreset(cfg), ...unocss.presets || []],
+	content: {
+		...unocss.content,
+		pipeline: unocss.content?.pipeline !== false && {
+			...unocss.content?.pipeline,
+			include: [
+				/\.(vue|svelte|[jt]sx?|mdx?|astro|html)($|\?)/,
+				/[\\/](@rimelight\/(ui|cms)|packages\/(ui|cms))[\\/]/,
+				...[unocss.content?.pipeline?.include].flat().filter((v) => Boolean(v))
+			]
+		}
+	}
+}), {
+	name: "rimelight/ui",
+	enforce: "pre",
+	resolveId: (id) => id === ID ? `\0${ID}` : null,
+	load: (id) => id === `\0${ID}` ? `import "virtual:uno.css";\nexport default ${JSON.stringify(cfg)};` : null
+}];
+//#endregion
+export { ui };

package/dist/preset.d.mts

@@ -0,0 +1,2 @@
+import { l as PALETTES, u as rimelightUiPreset } from "./types-DqAgCNcm.mjs";
+export { PALETTES, rimelightUiPreset as default };

package/dist/preset.mjs

@@ -0,0 +1,215 @@
+import { n as getIconSvg } from "./icons.raw-CjAuL2Sc.mjs";
+import { presetIcons, presetTypography, presetWind4 } from "unocss";
+//#region src/preset.ts
+const PALETTES = {
+	neutral: [0, 0],
+	primary: [.21, 260],
+	secondary: [.18, 70],
+	info: [.24, 260],
+	success: [.2, 150],
+	warning: [.17, 86],
+	error: [.24, 25],
+	commentary: [.29, 322],
+	ideation: [.28, 293],
+	source: [.13, 215]
+};
+const SHADE_ENTRIES = Object.entries({
+	"50": [
+		.985,
+		.1,
+		.145,
+		.2
+	],
+	"100": [
+		.965,
+		.25,
+		.2,
+		.35
+	],
+	"200": [
+		.925,
+		.45,
+		.28,
+		.55
+	],
+	"300": [
+		.85,
+		.7,
+		.35,
+		.75
+	],
+	"400": [
+		.72,
+		.9,
+		.44,
+		.9
+	],
+	"500": [
+		.55,
+		1,
+		.53,
+		1
+	],
+	"600": [
+		.44,
+		.9,
+		.61,
+		.85
+	],
+	"700": [
+		.35,
+		.75,
+		.69,
+		.7
+	],
+	"800": [
+		.27,
+		.6,
+		.77,
+		.55
+	],
+	"900": [
+		.2,
+		.45,
+		.86,
+		.4
+	],
+	"950": [
+		.145,
+		.3,
+		.93,
+		.25
+	]
+});
+const INTENTS = {
+	default: {
+		text: "700",
+		bg: "50",
+		border: "200",
+		ring: "300"
+	},
+	muted: {
+		text: "600",
+		bg: "100",
+		border: "200",
+		ring: "300"
+	},
+	elevated: {
+		text: "800",
+		bg: "100",
+		border: "200",
+		ring: "400"
+	},
+	accented: {
+		text: "900",
+		bg: "200",
+		border: "300",
+		ring: "500"
+	},
+	dimmed: {
+		text: "500",
+		bg: "50",
+		border: "300",
+		ring: "400"
+	},
+	toned: {
+		text: "800",
+		bg: "700",
+		border: "600",
+		ring: "900"
+	},
+	highlighted: {
+		text: "950",
+		bg: "200",
+		border: "800",
+		ring: "950"
+	},
+	inverted: {
+		text: "50",
+		bg: "950",
+		border: "800",
+		ring: "700"
+	}
+};
+const createThemeShades = (name) => ({
+	DEFAULT: `var(--rl-${name}-500)`,
+	...Object.fromEntries(SHADE_ENTRIES.map(([s]) => [s, `var(--rl-${name}-${s})`]))
+});
+const createOklchShadeGetter = ([c, h]) => {
+	const oklch = (l, factor) => `oklch(${l} ${(factor * c).toFixed(3)} ${h})`;
+	return (_, [l1, c1, l2, c2]) => [oklch(l1, c1), oklch(l2, c2)];
+};
+const createCustomShadeGetter = (val) => {
+	const isSplit = "light" in val || "dark" in val;
+	const light = (isSplit ? val.light : val) ?? {};
+	const dark = (isSplit ? val.dark : light) ?? light;
+	const fallback = light["500"] ?? Object.values(light)[0] ?? "oklch(0.55 0.15 0)";
+	return (s) => [light[s] ?? fallback, dark[s] ?? fallback];
+};
+function resolveTokens(custom = {}) {
+	const themeColors = {};
+	const tokenVarLines = [];
+	for (const [name, val] of Object.entries({
+		...PALETTES,
+		...custom
+	})) {
+		themeColors[name] = createThemeShades(name);
+		const getShade = Array.isArray(val) ? createOklchShadeGetter(val) : createCustomShadeGetter(val);
+		for (const [s, coords] of SHADE_ENTRIES) {
+			const [light, dark] = getShade(s, coords);
+			tokenVarLines.push(`--rl-${name}-${s}: light-dark(${light}, ${dark});`);
+		}
+	}
+	return {
+		themeColors,
+		tokenVarLines
+	};
+}
+function rimelightUiPreset({ colors, icons, presets = {} } = {}) {
+	const { themeColors, tokenVarLines } = resolveTokens(colors);
+	return {
+		name: "rimelight-ui",
+		outputToCssLayers: true,
+		safelist: [...Object.keys(themeColors).map((c) => `rl-color-${c}`), ...Object.values(icons ?? {}).filter((v) => typeof v === "string" && v.startsWith("i-"))],
+		presets: [
+			presets.wind !== false && presetWind4(),
+			presets.typography !== false && presetTypography(),
+			presets.icons !== false && presetIcons({ collections: { rl: getIconSvg } }),
+			{
+				name: "rimelight-theme",
+				theme: {
+					spacing: { md: "1rem" },
+					colors: themeColors
+				}
+			}
+		].filter(Boolean),
+		shortcuts: [[/^(text|bg|ring|border)-([a-z]+)(?:\/(\d+))?$/, ([, p, n, o]) => {
+			const s = INTENTS[n]?.[p];
+			if (!s) return;
+			const base = `${p}-neutral-${s}${o ? `/${o}` : ""}`;
+			return p === "bg" && n === "inverted" ? `${base} text-neutral-50` : base;
+		}]],
+		rules: [[/^rl-color-([\w-]+)$/, ([, c]) => {
+			const v500 = `var(--rl-${c}-500)`;
+			const v600 = `var(--rl-${c}-600)`;
+			return {
+				"--rl-bg": v500,
+				"--rl-ring": v500,
+				"--rl-border": v500,
+				"--rl-bg-hover": v600,
+				"--rl-text": v600
+			};
+		}]],
+		preflights: [{ getCSS: () => `:root {
+  color-scheme: light dark;
+  --rl-header-height: 4rem;
+  --rl-container: 90rem;
+  ${tokenVarLines.join("\n  ")}
+}
+[data-theme="dark"] { color-scheme: dark; }
+[data-theme="light"] { color-scheme: light; }
+body { background-color: var(--rl-neutral-50); color: var(--rl-neutral-950); }` }]
+	};
+}
+//#endregion
+export { PALETTES, rimelightUiPreset as default };

package/dist/resolver.d.mts

@@ -0,0 +1,6 @@
+import { n as ClassValue, s as ThemeConfig } from "./types-DqAgCNcm.mjs";
+//#region src/resolver.d.ts
+declare function cx(...args: ClassValue[]): string;
+declare function defineTheme<const S extends string>(name: string, themeConfig: ThemeConfig<S>): (props?: any) => Record<S, string>;
+//#endregion
+export { cx, defineTheme };

package/dist/resolver.mjs

@@ -0,0 +1,116 @@
+import uiConfig from "virtual:rimelight/ui";
+//#region src/resolver.ts
+function cx(...args) {
+	let str = "";
+	for (let i = 0; i < args.length; i++) {
+		const val = args[i];
+		if (!val) continue;
+		if (typeof val === "string" || typeof val === "number") str += (str ? " " : "") + val;
+		else if (Array.isArray(val)) {
+			if (val.length) {
+				const inner = cx(...val);
+				if (inner) str += (str ? " " : "") + inner;
+			}
+		} else if (typeof val === "object") {
+			for (const k in val) if (val[k]) str += (str ? " " : "") + k;
+		}
+	}
+	return str;
+}
+function defineTheme(name, themeConfig) {
+	const custom = uiConfig?.components?.themes?.[name];
+	const slots = custom?.slots ?? themeConfig.slots ?? ["root"];
+	const rootSlot = slots.includes("root") ? "root" : slots[0] || "root";
+	if (uiConfig?.unstyled) return (props = {}) => {
+		const res = {};
+		const hasClass = props.class || props.className;
+		for (let i = 0; i < slots.length; i++) {
+			const slot = slots[i];
+			const base = slot === rootSlot && hasClass ? cx(props.class, props.className) : "";
+			const fn = props.ui?.[slot];
+			res[slot] = typeof fn === "function" ? fn(base) : cx(base, fn);
+		}
+		return res;
+	};
+	const autoColor = (custom?.variants ?? themeConfig.variants)?.color === "auto";
+	const defaultVariants = {
+		...themeConfig.defaultVariants,
+		...custom?.defaultVariants
+	};
+	const compiledCV = [...themeConfig.compoundVariants ?? [], ...custom?.compoundVariants ?? []].map((cv) => {
+		const { classNames, class: cls, ...rest } = cv;
+		const matchers = [];
+		for (const k in rest) matchers.push({
+			key: k,
+			exp: rest[k]
+		});
+		return {
+			matchers,
+			cls: classNames || cls
+		};
+	});
+	const baseMap = {};
+	for (let i = 0; i < slots.length; i++) {
+		const s = slots[i];
+		baseMap[s] = cx(themeConfig.base?.[s], custom?.base?.[s]);
+	}
+	const variants = { ...themeConfig.variants };
+	if (custom?.variants) for (const k in custom.variants) variants[k] = {
+		...variants[k],
+		...custom.variants[k]
+	};
+	const variantKeys = Object.keys(variants).filter((k) => !(k === "color" && autoColor));
+	return (props = {}) => {
+		const res = {};
+		for (let i = 0; i < slots.length; i++) res[slots[i]] = baseMap[slots[i]] || "";
+		const values = {
+			...defaultVariants,
+			...props
+		};
+		const color = autoColor ? props.color ?? defaultVariants.color : void 0;
+		for (let k = 0; k < variantKeys.length; k++) {
+			const key = variantKeys[k];
+			const selected = values[key];
+			if (selected != null && variants[key]?.[selected]) {
+				const layer = variants[key][selected];
+				for (let i = 0; i < slots.length; i++) {
+					const s = slots[i];
+					const l = layer[s];
+					if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l);
+				}
+			}
+		}
+		if (compiledCV.length) for (let c = 0; c < compiledCV.length; c++) {
+			const { matchers, cls } = compiledCV[c];
+			if (!cls) continue;
+			let match = true;
+			for (let m = 0; m < matchers.length; m++) {
+				const { key, exp } = matchers[m];
+				const actual = values[key];
+				if (Array.isArray(exp) ? !exp.includes(actual) : actual !== exp) {
+					match = false;
+					break;
+				}
+			}
+			if (match) for (let i = 0; i < slots.length; i++) {
+				const s = slots[i];
+				const l = cls[s];
+				if (l) res[s] = res[s] ? `${res[s]} ${cx(l)}` : cx(l);
+			}
+		}
+		for (let i = 0; i < slots.length; i++) {
+			const slot = slots[i];
+			let slotClass = res[slot];
+			if (slot === rootSlot) {
+				if (color) slotClass = slotClass ? `${slotClass} rl-color-${color}` : `rl-color-${color}`;
+				const extra = cx(props.class, props.className);
+				if (extra) slotClass = slotClass ? `${slotClass} ${extra}` : extra;
+			}
+			const override = props.ui?.[slot];
+			res[slot] = typeof override === "function" ? override(slotClass) : cx(slotClass, override);
+		}
+		return res;
+	};
+}
+//#endregion
+export { cx, defineTheme };

package/dist/shortcuts.d.mts

@@ -0,0 +1,29 @@
+import { Atom } from "./stores.mjs";
+//#region src/shortcuts.d.ts
+type Handler = (e: KeyboardEvent) => void;
+interface ShortcutConfig {
+  handler: Handler;
+  usingInput?: boolean | string | undefined;
+  label?: string | undefined;
+  description?: string | undefined;
+  category?: string | undefined;
+  order?: number | undefined;
+}
+type ShortcutsConfig = Record<string, ShortcutConfig | Handler | false | null | undefined>;
+interface ShortcutsOptions {
+  chainDelay?: number | undefined;
+}
+interface RegisteredShortcut {
+  id: string;
+  keys: string[];
+  label?: string | undefined;
+  description?: string | undefined;
+  category?: string | undefined;
+  order?: number | undefined;
+}
+declare const normalizeModifier: (m: string) => string;
+declare const formatShortcutKeys: (k: string) => string[];
+declare const activeShortcutsStore: Atom<RegisteredShortcut[]>;
+declare function defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): () => void;
+//#endregion
+export { Handler, RegisteredShortcut, ShortcutConfig, ShortcutsConfig, ShortcutsOptions, activeShortcutsStore, defineShortcuts, formatShortcutKeys, normalizeModifier };

package/dist/shortcuts.mjs

@@ -0,0 +1,119 @@
+import { atom } from "./stores.mjs";
+//#region src/shortcuts.ts
+const isMac = typeof navigator !== "undefined" && /Mac|iP/.test(navigator.userAgent);
+const KEYS = {
+	ctrl: "Ctrl",
+	meta: isMac ? "⌘" : "Ctrl",
+	alt: isMac ? "⌥" : "Alt",
+	shift: isMac ? "⇧" : "Shift",
+	enter: "↵",
+	delete: "⌦",
+	backspace: "⌫",
+	escape: "Esc",
+	tab: "⇥",
+	space: "Space",
+	arrowup: "↑",
+	arrowdown: "↓",
+	arrowleft: "←",
+	arrowright: "→"
+};
+const MODS = {
+	cmd: "meta",
+	command: "meta",
+	control: "ctrl",
+	opt: "alt",
+	option: "alt"
+};
+const normalizeModifier = (m) => MODS[m.toLowerCase()] || m.toLowerCase();
+const formatShortcutKeys = (k) => k.split(/[_-]/).map((p) => {
+	const norm = normalizeModifier(p);
+	return KEYS[norm] ?? (p ? p[0].toUpperCase() + p.slice(1) : "");
+});
+const activeShortcutsStore = atom([]);
+const isUsingInput = (el) => {
+	const target = el?.shadowRoot?.activeElement || el;
+	return target && (/INPUT|TEXTAREA|SELECT/.test(target.tagName) || target.isContentEditable) ? target.getAttribute("name") || true : false;
+};
+const isEnabled = (s, input) => s.usingInput === true || (s.usingInput ? input === s.usingInput : !input);
+const normalizeCombo = (combo) => {
+	const parts = combo.toLowerCase().split("_");
+	let meta = "";
+	let ctrl = "";
+	let alt = "";
+	let shift = "";
+	for (let i = 0; i < parts.length - 1; i++) {
+		const m = MODS[parts[i]] || parts[i];
+		if (m === "meta") meta = "meta_";
+		else if (m === "ctrl") ctrl = "ctrl_";
+		else if (m === "alt") alt = "alt_";
+		else if (m === "shift") shift = "shift_";
+	}
+	return `${meta}${ctrl}${alt}${shift}${parts[parts.length - 1] || ""}`;
+};
+function defineShortcuts(config, options = {}) {
+	if (typeof window === "undefined") return () => {};
+	const map = /* @__PURE__ */ new Map();
+	const reg = [];
+	for (const [k, cfg] of Object.entries(config)) {
+		if (!cfg) continue;
+		const obj = typeof cfg === "object" ? cfg : null;
+		const handler = obj ? obj.handler : cfg;
+		if (typeof handler !== "function") continue;
+		const key = k.includes("-") && k !== "-" && !k.includes("_") ? k.toLowerCase() : normalizeCombo(k);
+		map.set(key, {
+			handler,
+			usingInput: obj?.usingInput
+		});
+		if (obj?.label || obj?.description) reg.push({
+			id: `${obj.category || "system"}-${k}`,
+			keys: formatShortcutKeys(k),
+			category: obj.category || "system",
+			label: obj.label,
+			description: obj.description,
+			order: obj.order
+		});
+	}
+	const ids = new Set(reg.map((i) => i.id));
+	if (ids.size) activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)).concat(reg));
+	const buffer = [];
+	let timer;
+	const onKeyDown = (e) => {
+		if (!e.key || e.isComposing) return;
+		const key = e.key === " " ? "space" : e.key.toLowerCase();
+		const codeKey = e.code ? e.code.replace(/^Key/, "").replace(/^Digit/, "").toLowerCase() : "";
+		const input = isUsingInput(typeof document !== "undefined" ? document.activeElement : null);
+		buffer.push(key);
+		if (buffer.length > 2) buffer.shift();
+		clearTimeout(timer);
+		if (buffer.length === 2) {
+			const chainedMatch = map.get(buffer.join("-"));
+			if (chainedMatch && isEnabled(chainedMatch, input)) {
+				e.preventDefault();
+				chainedMatch.handler(e);
+				buffer.length = 0;
+				return;
+			}
+		}
+		const keysToCheck = Array.from(new Set([key, codeKey].filter(Boolean)));
+		for (const k of keysToCheck) {
+			const sig = `${e.metaKey ? "meta_" : ""}${e.ctrlKey ? "ctrl_" : ""}${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}`;
+			const primarySig = !isMac && e.ctrlKey && !e.metaKey ? `meta_${e.altKey ? "alt_" : ""}${e.shiftKey ? "shift_" : ""}${k}` : sig;
+			const match = map.get(sig) || map.get(primarySig) || map.get(k);
+			if (match && isEnabled(match, input)) {
+				e.preventDefault();
+				match.handler(e);
+				buffer.length = 0;
+				return;
+			}
+		}
+		timer = setTimeout(() => void (buffer.length = 0), options.chainDelay ?? 800);
+	};
+	window.addEventListener("keydown", onKeyDown);
+	return () => {
+		window.removeEventListener("keydown", onKeyDown);
+		clearTimeout(timer);
+		if (ids.size) activeShortcutsStore.set(activeShortcutsStore.get().filter((i) => !ids.has(i.id)));
+	};
+}
+//#endregion
+export { activeShortcutsStore, defineShortcuts, formatShortcutKeys, normalizeModifier };

package/dist/stores.d.mts

@@ -0,0 +1,9 @@
+//#region src/stores.d.ts
+interface Atom<T> {
+  get: () => T;
+  set: (next: T) => void;
+  subscribe: (fn: (val: T) => void) => () => void;
+}
+declare function atom<T>(initial: T): Atom<T>;
+//#endregion
+export { Atom, atom };

package/dist/stores.mjs

@@ -0,0 +1,19 @@
+//#region src/stores.ts
+function atom(initial) {
+	let val = initial;
+	const subs = /* @__PURE__ */ new Set();
+	return {
+		get: () => val,
+		set: (next) => {
+			val = next;
+			subs.forEach((fn) => fn(val));
+		},
+		subscribe: (fn) => {
+			subs.add(fn);
+			fn(val);
+			return () => subs.delete(fn);
+		}
+	};
+}
+//#endregion
+export { atom };

package/dist/types-DqAgCNcm.d.mts

@@ -0,0 +1,86 @@
+import { n as RimelightIcons } from "./icons--RzV1RTU.mjs";
+import { Preset, UserConfig } from "unocss";
+//#region src/preset.d.ts
+declare const PALETTES: {
+  readonly neutral: readonly [0, 0];
+  readonly primary: readonly [0.21, 260];
+  readonly secondary: readonly [0.18, 70];
+  readonly info: readonly [0.24, 260];
+  readonly success: readonly [0.2, 150];
+  readonly warning: readonly [0.17, 86];
+  readonly error: readonly [0.24, 25];
+  readonly commentary: readonly [0.29, 322];
+  readonly ideation: readonly [0.28, 293];
+  readonly source: readonly [0.13, 215];
+};
+declare function rimelightUiPreset({ colors, icons, presets }?: UIConfig): Preset;
+//#endregion
+//#region src/types.d.ts
+type Theme = "light" | "dark";
+type BuiltinThemeColor = keyof typeof PALETTES;
+type ThemeColor = BuiltinThemeColor | (string & {});
+type ClassValue = string | number | boolean | undefined | null | {
+  [key: string]: any;
+} | ClassValue[];
+interface ThemeConfig<S extends string = string> {
+  slots?: readonly S[] | S[];
+  base?: Partial<Record<S, ClassValue>>;
+  variants?: Record<string, any>;
+  compoundVariants?: Array<Record<string, any> & {
+    classNames?: Partial<Record<S, ClassValue>>;
+    class?: Partial<Record<S, ClassValue>>;
+  }>;
+  defaultVariants?: Record<string, any>;
+}
+type ColorModeInput = [chroma: number, hue: number] | readonly [chroma: number, hue: number] | Record<string, string> | {
+  light?: Record<string, string>;
+  dark?: Record<string, string>;
+};
+interface PresetOptions {
+  /**
+   * Custom colors.
+   */
+  colors?: Record<string, ColorModeInput>;
+  /**
+   * Global icon overrides mapping icon names to class names (e.g. `i-lucide-x`) or raw SVG strings.
+   */
+  icons?: RimelightIcons;
+  /**
+   * Configure which built-in UnoCSS presets are enabled/disabled.
+   */
+  presets?: {
+    wind?: boolean;
+    typography?: boolean;
+    icons?: boolean;
+  };
+}
+interface UIConfig extends PresetOptions {
+  /**
+   * Whether to strip default theme classes from all components.
+   */
+  unstyled?: boolean;
+  /**
+   * Configuration for keyboard shortcuts.
+   */
+  shortcuts?: {
+    categories?: Record<string, {
+      label: string;
+    }>;
+  };
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<string, string | Record<string, string | undefined>>;
+  /**
+   * Global component configuration overrides.
+   */
+  components?: {
+    themes?: Record<string, ThemeConfig<string>>;
+  };
+  /**
+   * Custom UnoCSS configuration overrides.
+   */
+  unocss?: UserConfig;
+}
+//#endregion
+export { Theme as a, UIConfig as c, PresetOptions as i, PALETTES as l, ClassValue as n, ThemeColor as o, ColorModeInput as r, ThemeConfig as s, BuiltinThemeColor as t, rimelightUiPreset as u };

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import { a as Theme, c as UIConfig, i as PresetOptions, n as ClassValue, o as ThemeColor, r as ColorModeInput, s as ThemeConfig, t as BuiltinThemeColor } from "./types-DqAgCNcm.mjs";
+export { BuiltinThemeColor, ClassValue, ColorModeInput, PresetOptions, Theme, ThemeColor, ThemeConfig, UIConfig };

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "private": false,
   "description": "Rimelight Entertainment's UI Package",
   "homepage": "https://rimelight.com/docs",
@@ -16,30 +16,58 @@
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
   },
   "files": [
+    "dist",
     "src"
   ],
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.mts",
+      "import": "./dist/preset.mjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.mts",
+      "import": "./dist/resolver.mjs"
+    },
+    "./shortcuts": {
+      "types": "./dist/shortcuts.d.mts",
+      "import": "./dist/shortcuts.mjs"
+    },
+    "./stores": {
+      "types": "./dist/stores.d.mts",
+      "import": "./dist/stores.mjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/types.mjs"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.mts",
+      "import": "./dist/icons.mjs"
+    },
     "./*": "./src/*"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@unocss/vite": "66.8.1",
-    "unocss": "66.8.1"
+    "@unocss/vite": "66.10.0",
+    "unocss": "66.10.0"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.10",
     "@astrojs/solid-js": "7.0.2",
     "@astrojs/ts-plugin": "1.10.11",
     "@astrojs/vue": "7.0.2",
-    "@rimelight/config": "0.0.3",
-    "astro": "7.2.7",
+    "@rimelight/config": "0.0.4",
+    "astro": "7.3.1",
     "solid-js": "1.9.15",
     "typescript": "6.0.3",
-    "vue": "3.5.41"
+    "vue": "3.5.42"
   },
   "peerDependencies": {
     "@astrojs/solid-js": ">=7.0.1",
@@ -66,6 +94,7 @@
     "node": ">=26.7.0"
   },
   "scripts": {
+    "build": "vp pack",
     "astro": "astro",
     "check": "vp check --fix && astro check"
   }

package/src/components/button/RLSButton.tsx

@@ -75,7 +75,7 @@ const RLSButton: Component<RLSButtonProps> = (allProps) => {
       justify: props.justify,
       block: props.block,
       square: props.square !== undefined ? props.square : !props.label && !props.children,
-      rounded: props.rounded,
+      rounded: props.rounded ?? false,
       leading: isLeading(),
       trailing: isTrailing(),
       loading: props.loading,

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -15,9 +15,6 @@ const classes = dashboardSidebarTheme({
   ...Astro.props,
   collapsed: collapsible && collapsed
 });
-
-const collapsedWidth = "4rem";
-const defaultWidth = "16rem";
 ---
 
 <div
@@ -26,11 +23,10 @@ const defaultWidth = "16rem";
   data-collapsible={collapsible ? "true" : "false"}
   data-collapsed={collapsible && collapsed ? "true" : "false"}
   data-slot="root"
-  class={classes.root}
+  class:list={[classes.root, className]}
   {...rest}
-  style={`width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; min-width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; flex-shrink: 0; --width: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
 >
-  <div data-slot="header" class={classes.header} style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; box-sizing: border-box;">
+  <div data-slot="header" class={classes.header}>
     <slot name="header" />
   </div>
 
@@ -48,15 +44,15 @@ const defaultWidth = "16rem";
 <div
   data-dashboard-sidebar-mobile
   data-slot="content"
-  class={classes.content + " fixed inset-y-0 left-0 z-50 w-64 bg-default shadow-xl border-e border-default transform -translate-x-full transition-transform duration-300"}
+  class:list={[classes.content, "fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] bg-default shadow-2xl border-e border-default transform -translate-x-full transition-transform duration-300 flex flex-col h-full"]}
 >
-  <div data-slot="header" class={classes.header + " " + "sm:px-6"} data-menu>
+  <div data-slot="header" class:list={[classes.header, "sm:px-6 shrink-0"]} data-menu>
     <slot name="header" />
   </div>
-  <div data-slot="body" class={classes.body + " " + "sm:px-6"} data-menu>
+  <div data-slot="body" class:list={[classes.body, "sm:px-6 overflow-y-auto flex-1"]} data-menu>
     <slot />
   </div>
-  <div data-slot="footer" class={classes.footer + " " + "sm:px-6"} data-menu>
+  <div data-slot="footer" class:list={[classes.footer, "sm:px-6 shrink-0"]} data-menu>
     <slot name="footer" />
   </div>
 </div>
@@ -70,20 +66,34 @@ const defaultWidth = "16rem";
     const mobilePanel = document.querySelector<HTMLElement>('[data-dashboard-sidebar-mobile]');
     const overlay = document.querySelector<HTMLElement>('[data-dashboard-sidebar-overlay]');
 
-    const toggleMobile = () => {
+    const openMobile = () => {
+      if (!mobilePanel || !overlay) return;
+      mobilePanel.classList.remove('-translate-x-full');
+      mobilePanel.classList.add('translate-x-0');
+      overlay.classList.remove('hidden');
+    };
+
+    const closeMobile = () => {
       if (!mobilePanel || !overlay) return;
-      const isOpen = mobilePanel.classList.toggle('translate-x-0');
-      mobilePanel.classList.toggle('-translate-x-full', !isOpen);
-      overlay.classList.toggle('hidden', !isOpen);
+      mobilePanel.classList.add('-translate-x-full');
+      mobilePanel.classList.remove('translate-x-0');
+      overlay.classList.add('hidden');
+    };
+
+    const toggleMobile = () => {
+      if (!mobilePanel) return;
+      if (mobilePanel.classList.contains('translate-x-0')) {
+        closeMobile();
+      } else {
+        openMobile();
+      }
     };
 
     const collapseSidebar = (val?: boolean) => {
       if (!collapsible) return;
       const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
-      const w = isCollapsed ? '4rem' : '16rem';
-      sidebar.style.width = w;
-      sidebar.style.minWidth = w;
-      sidebar.style.setProperty('--width', w);
+      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
+      sidebar.setAttribute('data-collapsed', isCollapsed ? 'true' : 'false');
 
       document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
         btn.querySelectorAll('[data-dashboard-collapse-icon]').forEach(el => {
@@ -92,16 +102,32 @@ const defaultWidth = "16rem";
       });
     };
 
-    document.addEventListener('click', (e: MouseEvent) => {
+    const handleClick = (e: MouseEvent) => {
       const target = e.target as Element | null;
-      const toggle = target?.closest<HTMLElement>('[data-dashboard-toggle]');
+      if (!target) return;
+
+      // Toggle buttons (mobile drawer + collapse)
+      const toggle = target.closest<HTMLElement>('[data-dashboard-toggle]');
       if (toggle) {
         const side = toggle.dataset.dashboardToggle;
         if (side === 'mobile') toggleMobile();
         if (side === 'collapse') collapseSidebar();
+        return;
+      }
+
+      // Backdrop overlay click
+      if (target.closest('[data-dashboard-sidebar-overlay]')) {
+        closeMobile();
+        return;
       }
 
-      const navItem = target?.closest<HTMLElement>('[data-dashboard-nav]');
+      // Close the mobile drawer when clicking a navigation link inside it
+      if (target.closest('[data-dashboard-sidebar-mobile] a')) {
+        closeMobile();
+        return;
+      }
+
+      const navItem = target.closest<HTMLElement>('[data-dashboard-nav]');
       if (navItem) {
         const container = navItem.closest('[data-dashboard-nav-container]');
         if (container) {
@@ -113,10 +139,13 @@ const defaultWidth = "16rem";
           navItem.classList.add('bg-muted', 'text-highlighted');
         }
       }
-    });
+    };
 
-    overlay?.addEventListener('click', toggleMobile);
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeMobile();
+    };
 
-    (window as any).dashboardSidebar = { toggleMobile, collapseSidebar };
+    document.addEventListener('click', handleClick);
+    document.addEventListener('keydown', handleKey);
   })();
 </script>

package/src/components/dashboard-sidebar/dashboard-sidebar.theme.ts

@@ -3,12 +3,12 @@ import { defineTheme } from "../../resolver"
 export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
   slots: ["root", "header", "body", "footer", "toggle", "handle", "content", "overlay"],
   base: {
-    root: "group relative flex flex-col h-full min-h-0 min-w-16 w-64 shrink-0 transition-[width] duration-300",
+    root: "group relative hidden lg:flex flex-col h-full min-h-0 shrink-0 transition-[width] duration-300 w-64 min-w-64 max-w-64 data-[collapsed=true]:w-16 data-[collapsed=true]:min-w-16 data-[collapsed=true]:max-w-16 data-[collapsed=true]:overflow-hidden data-[collapsed=false]:w-64 data-[collapsed=false]:min-w-64 data-[collapsed=false]:max-w-64",
     header:
-      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
-    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3",
+      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:items-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
+    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3 group-data-[collapsed=true]:items-center group-data-[collapsed=true]:px-0 group-data-[collapsed=true]:overflow-hidden",
     footer:
-      "shrink-0 flex items-center gap-1.5 px-3 py-3 group-data-[collapsed=true]:px-0 border-t border-default/40",
+      "shrink-0 flex items-center gap-1.5 px-3 py-3 border-t border-default/40 group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:items-center group-data-[collapsed=true]:px-0",
     toggle: "",
     handle: "",
     content: "lg:hidden",
@@ -32,7 +32,7 @@ export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
     },
     collapsed: {
       true: {
-        root: "w-16 w-[var(--collapsed-width,4rem)] overflow-hidden",
+        root: "w-16 min-w-16 max-w-16 overflow-hidden",
         body: "overflow-hidden"
       }
     }

package/src/components/icon/RLSIcon.tsx

@@ -16,7 +16,7 @@ const RLSIcon: Component<IconProps> = (allProps) => {
   return (
     <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>
       {resolved().isClass ? (
-        <span class={`${resolved().content} size-full`} />
+        <span class={`${resolved().content} block size-full`} />
       ) : (
         <span innerHTML={resolved().content} />
       )}

package/src/components/modal/RLAModal.astro

@@ -1,7 +1,7 @@
 ---
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLAIcon from "../icon/RLAIcon.astro"
+import RLAButton from "../button/RLAButton.astro"
 
 
 
@@ -49,15 +49,18 @@ const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
     data-unmount-on-hide={unmountOnHide ? "true" : "false"}
     {...rest}
   >
-    <button
+    <RLAButton
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      square
+      leadingIcon="i-rl-close"
       data-dialog-close={modalId}
       aria-label="Close modal"
-    >
-      <RLAIcon name="i-rl-close" class="size-4" aria-hidden="true" />
-    </button>
+    />
 
     <div class={classes.header} data-slot="header">
       {title && <h3 class={classes.title} data-slot="title">{title}</h3>}

package/src/components/modal/RLSModal.tsx

@@ -10,7 +10,7 @@ import {
 } from "solid-js"
 import type { ModalProps } from "./modal"
 import { modalTheme } from "./modal.theme"
-import RLSIcon from "../icon/RLSIcon"
+import RLSButton from "../button/RLSButton"
 
 export interface RLSModalProps extends ModalProps {
   onClose?: () => void
@@ -41,6 +41,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
 
   const closeOnClickOutside = () => props.closeOnClickOutside !== false
   const closeOnEscape = () => props.closeOnEscape !== false
+  const unmountOnHide = () => props.unmountOnHide !== false
 
   const handleClose = () => {
     props.onClose?.()
@@ -54,8 +55,8 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
         e.preventDefault()
       } else {
         e.preventDefault()
-        handleClose()
       }
+      handleClose()
     }
     const handleClick = (e: MouseEvent) => {
       // Clicking the ::backdrop means e.target IS the dialog element
@@ -91,24 +92,28 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
   })
 
   return (
-    <Show when={props.open || !props.unmountOnHide}>
+    <Show when={props.open || !unmountOnHide()}>
       <dialog
         ref={(el) => (dialogRef = el)}
-        class={`w-full rounded-xl border border-default bg-default p-6 shadow-xl outline-none flex flex-col max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
-          resolvedClasses().content || ""
-        }  ${props.class || ""}`}
+        class={`w-[calc(100%-1.5rem)] sm:w-full rounded-xl border border-default bg-default p-5 sm:p-6 shadow-xl outline-none flex flex-col max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
+          props.open ? "" : "hidden"
+        } ${resolvedClasses().content || ""}  ${props.class || ""}`}
+        data-state={props.open ? "open" : "closed"}
         data-slot="content"
         {...rest}
       >
-        <button
+        <RLSButton
           type="button"
-          class="absolute right-4 top-4 rounded-md p-1 text-muted hover:text-highlighted hover:bg-neutral-100 dark:hover:bg-neutral-800 transition cursor-pointer border-none bg-transparent"
-          data-slot="close-button"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          square
+          leadingIcon="close"
           aria-label="Close modal"
+          data-slot="close-button"
+          class="absolute right-4 top-4 text-muted hover:text-highlighted"
           onClick={handleClose}
-        >
-          <RLSIcon name="close" size="sm" aria-hidden="true" />
-        </button>
+        />
 
         {props.title || props.description || props.titleSlot || props.descriptionSlot ? (
           <div class={resolvedClasses().header || "mb-4"} data-slot="header">

package/src/components/modal/modal.theme.ts

@@ -17,8 +17,9 @@ export const modalTheme = defineTheme("modal", {
     trigger: "",
     backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
     content: [
-      "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
-      "bg-default p-6 shadow-xl transition-all duration-300 outline-none",
+      "fixed left-1/2 top-1/2 z-50 w-[calc(100%-1.5rem)] sm:w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
+      "bg-default p-5 sm:p-6 shadow-xl transition-all duration-300 outline-none",
+      "max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
     ],
@@ -27,8 +28,8 @@ export const modalTheme = defineTheme("modal", {
     description: "text-sm text-muted leading-relaxed",
     footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
     closeButton: [
-      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      "absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100",
+      "focus:outline-none"
     ]
   },
   variants: {

package/src/index.ts

@@ -4,8 +4,18 @@ import type { UIConfig } from "./types"
 
 const ID = "virtual:rimelight/ui"
 
-export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
-  UnoCSS({
+export interface RimelightUIPlugin {
+  name: string
+  enforce?: "pre" | "post"
+  resolveId?: (id: string) => string | null | undefined
+  load?: (id: string) => string | null | undefined
+  [key: string]: any
+}
+
+export type RimelightUIPlugins = (RimelightUIPlugin | RimelightUIPlugin[])[]
+
+export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}): RimelightUIPlugins => [
+  ...(UnoCSS({
     ...unocss,
     presets: [rimelightUiPreset(cfg), ...(unocss.presets || [])],
     content: {
@@ -21,7 +31,7 @@ export const ui = ({ unocss = {}, ...cfg }: UIConfig = {}) => [
         ]
       }
     }
-  }),
+  }) as RimelightUIPlugin[]),
   {
     name: "rimelight/ui",
     enforce: "pre",