@declarion/react 0.87.0 → 0.89.0

package/dist-lib/components/pages/profile/Preferences.impl.js

@@ -1,26 +1,25 @@
-import { textWithNodes as e } from "../../../lib/language.js";
+import { usePreferencesStore as e } from "../../../stores/preferences.js";
 import { Icon as t } from "../../primitives/Icons.js";
 import { Btn as n } from "../../primitives/Btn.js";
 import { Kbd as r } from "../../primitives/Kbd.js";
 import { useText as i } from "../../../hooks/useText.js";
 import { SectionCard as a } from "../../primitives/SectionCard.js";
 import { BoolToggle as o } from "../../primitives/BoolToggle.js";
-import { BRANDING_PARAM_CODE as s } from "../../../lib/branding.js";
-import { useBranding as c } from "../../../hooks/useBranding.js";
-import { usePreferencesStore as l } from "../../../stores/preferences.js";
-import { cn as u } from "../../../lib/utils.js";
-import { PageHeader as d } from "../../chrome/PageHeader.js";
-import { FieldRow as f, FieldsGrid as p } from "../../detail-layout/FieldRow.js";
-import { PageShell as m } from "../../chrome/PageShell.js";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useUiPreferences as s } from "../../../hooks/useUiPreferences.js";
+import { shortcutLabel as c } from "../../../lib/shortcut.js";
+import { cn as l } from "../../../lib/utils.js";
+import { PageHeader as u } from "../../chrome/PageHeader.js";
+import { FieldRow as d, FieldsGrid as f } from "../../detail-layout/FieldRow.js";
+import { PageShell as p } from "../../chrome/PageShell.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/pages/profile/Preferences.impl.tsx
-var _ = [
+var g = [
 	"violet",
 	"blue",
 	"teal",
 	"amber",
 	"rose"
-], v = [
+], _ = [
 	[
 		"compact",
 		"profile.preferences.density.compact",
@@ -36,26 +35,26 @@ var _ = [
 		"profile.preferences.density.cozy",
 		"Cozy"
 	]
-], y = "px", b = [
+], v = "px", y = [
 	[
 		"profile.preferences.shortcut.command_palette",
 		"Command palette",
-		"⌘ K"
+		c("K")
 	],
 	[
 		"profile.preferences.shortcut.assistant",
 		"Toggle AI assistant",
-		"⌘ /"
+		c("/")
 	],
 	[
 		"profile.preferences.shortcut.sidebar",
 		"Collapse sidebar",
-		"⌘ B"
+		c("B")
 	],
 	[
 		"profile.preferences.shortcut.close_tab",
 		"Close current tab",
-		"⌘ W"
+		c("W")
 	],
 	[
 		"profile.preferences.shortcut.search",
@@ -68,98 +67,102 @@ var _ = [
 		"Esc"
 	]
 ];
-function x() {
-	let x = l((e) => e.colorScheme), C = l((e) => e.accent), w = l((e) => e.density), T = l((e) => e.radius), E = l((e) => e.zebra), D = l((e) => e.set), O = l((e) => e.resetToDefaults), { branding: k } = c(), A = i();
-	return /* @__PURE__ */ g(m, {
-		header: /* @__PURE__ */ h(d, {
-			title: A("profile.preferences", "Preferences"),
-			actions: /* @__PURE__ */ h(n, {
-				icon: /* @__PURE__ */ h(t.refresh, { size: 13 }),
-				onClick: () => O(k?.preferences),
-				children: A("profile.preferences.reset", "Reset to defaults")
+function b() {
+	let c = e((e) => e.colorScheme), b = e((e) => e.accent), S = e((e) => e.density), C = e((e) => e.radius), w = e((e) => e.zebra), T = e((e) => e.set), E = s(), D = i(), O = () => {
+		E.saveCurrent();
+	}, k = (e, t) => {
+		E.set(e, t);
+	};
+	return /* @__PURE__ */ h(p, {
+		header: /* @__PURE__ */ m(u, {
+			title: D("profile.preferences", "Preferences"),
+			actions: /* @__PURE__ */ m(n, {
+				icon: /* @__PURE__ */ m(t.refresh, { size: 13 }),
+				onClick: () => {
+					E.reset();
+				},
+				children: D("profile.preferences.reset", "Reset to defaults")
 			})
 		}),
-		children: [/* @__PURE__ */ h(a, {
-			title: A("profile.preferences.appearance", "Appearance"),
-			icon: /* @__PURE__ */ h(t.moon, { size: 14 }),
-			footer: e(A("profile.preferences.subtitle", "These settings apply for this session; a reload returns to your workspace defaults, which admins set through the {parameter} parameter."), { parameter: /* @__PURE__ */ h("span", {
-				className: "mono",
-				children: s
-			}) }),
-			children: /* @__PURE__ */ g(p, { children: [
-				/* @__PURE__ */ h(f, {
-					label: A("profile.preferences.theme", "Theme"),
-					children: /* @__PURE__ */ h(S, { children: [["light", A("profile.preferences.theme.light", "Light")], ["dark", A("profile.preferences.theme.dark", "Dark")]].map(([e, t]) => /* @__PURE__ */ h(n, {
-						kind: x === e ? "primary" : "default",
-						"aria-pressed": x === e,
-						onClick: () => D("colorScheme", e),
+		children: [/* @__PURE__ */ m(a, {
+			title: D("profile.preferences.appearance", "Appearance"),
+			icon: /* @__PURE__ */ m(t.moon, { size: 14 }),
+			children: /* @__PURE__ */ h(f, { children: [
+				/* @__PURE__ */ m(d, {
+					label: D("profile.preferences.theme", "Theme"),
+					children: /* @__PURE__ */ m(x, { children: [["light", D("profile.preferences.theme.light", "Light")], ["dark", D("profile.preferences.theme.dark", "Dark")]].map(([e, t]) => /* @__PURE__ */ m(n, {
+						kind: c === e ? "primary" : "default",
+						"aria-pressed": c === e,
+						onClick: () => k("colorScheme", e),
 						children: t
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(f, {
-					label: A("profile.preferences.accent", "Accent color"),
-					hint: A("profile.preferences.accent_hint", "Your personal accent across the app"),
-					children: /* @__PURE__ */ h(S, { children: _.map((e) => /* @__PURE__ */ h("button", {
+				/* @__PURE__ */ m(d, {
+					label: D("profile.preferences.accent", "Accent color"),
+					hint: D("profile.preferences.accent_hint", "Your personal accent across the app"),
+					children: /* @__PURE__ */ m(x, { children: g.map((e) => /* @__PURE__ */ m("button", {
 						type: "button",
 						"data-accent": e,
-						"data-color-scheme": x,
-						onClick: () => D("accent", e),
-						"aria-label": A(`profile.preferences.accent.${e}`, `Accent ${e}`),
-						"aria-pressed": C === e,
+						"data-color-scheme": c,
+						onClick: () => k("accent", e),
+						"aria-label": D(`profile.preferences.accent.${e}`, `Accent ${e}`),
+						"aria-pressed": b === e,
 						style: { background: "var(--accent)" },
-						className: u("size-6 cursor-pointer rounded-md border-2", C === e ? "border-foreground" : "border-transparent")
+						className: l("size-6 cursor-pointer rounded-md border-2", b === e ? "border-foreground" : "border-transparent")
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(f, {
-					label: A("profile.preferences.density", "Density"),
-					hint: A("profile.preferences.density_hint", "Compact saves space; cozy is easier on the eyes"),
-					children: /* @__PURE__ */ h(S, { children: v.map(([e, t, r]) => /* @__PURE__ */ h(n, {
-						kind: w === e ? "primary" : "default",
-						"aria-pressed": w === e,
-						onClick: () => D("density", e),
-						children: A(t, r)
+				/* @__PURE__ */ m(d, {
+					label: D("profile.preferences.density", "Density"),
+					hint: D("profile.preferences.density_hint", "Compact saves space; cozy is easier on the eyes"),
+					children: /* @__PURE__ */ m(x, { children: _.map(([e, t, r]) => /* @__PURE__ */ m(n, {
+						kind: S === e ? "primary" : "default",
+						"aria-pressed": S === e,
+						onClick: () => k("density", e),
+						children: D(t, r)
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(f, {
-					label: A("profile.preferences.radius", "Border radius"),
-					children: /* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h("input", {
+				/* @__PURE__ */ m(d, {
+					label: D("profile.preferences.radius", "Border radius"),
+					children: /* @__PURE__ */ h(x, { children: [/* @__PURE__ */ m("input", {
 						type: "range",
 						min: 0,
 						max: 14,
-						value: T,
-						onChange: (e) => D("radius", Number(e.target.value)),
+						value: C,
+						onChange: (e) => T("radius", Number(e.target.value)),
+						onPointerUp: O,
+						onKeyUp: O,
 						className: "w-44"
-					}), /* @__PURE__ */ g("span", {
+					}), /* @__PURE__ */ h("span", {
 						className: "mono num text-xs text-muted-foreground",
-						children: [T, y]
+						children: [C, v]
 					})] })
 				}),
-				/* @__PURE__ */ h(f, {
-					label: A("profile.preferences.zebra", "Zebra rows"),
+				/* @__PURE__ */ m(d, {
+					label: D("profile.preferences.zebra", "Zebra rows"),
 					labelId: "preferences-zebra",
-					hint: A("profile.preferences.zebra_hint", "Alternating row backgrounds on tables"),
-					children: /* @__PURE__ */ h(o, {
-						value: E,
+					hint: D("profile.preferences.zebra_hint", "Alternating row backgrounds on tables"),
+					children: /* @__PURE__ */ m(o, {
+						value: w,
 						ariaLabelledby: "preferences-zebra",
-						onChange: (e) => D("zebra", e)
+						onChange: (e) => k("zebra", e)
 					})
 				})
 			] })
-		}), /* @__PURE__ */ h(a, {
-			title: A("profile.preferences.keyboard", "Keyboard"),
-			icon: /* @__PURE__ */ h(t.command, { size: 14 }),
-			children: /* @__PURE__ */ h(p, { children: b.map(([e, t, n]) => /* @__PURE__ */ h(f, {
-				label: A(e, t),
-				children: /* @__PURE__ */ h(r, { children: n })
+		}), /* @__PURE__ */ m(a, {
+			title: D("profile.preferences.keyboard", "Keyboard"),
+			icon: /* @__PURE__ */ m(t.command, { size: 14 }),
+			children: /* @__PURE__ */ m(f, { children: y.map(([e, t, n]) => /* @__PURE__ */ m(d, {
+				label: D(e, t),
+				children: /* @__PURE__ */ m(r, { children: n })
 			}, e)) })
 		})]
 	});
 }
-function S({ children: e }) {
-	return /* @__PURE__ */ h("div", {
+function x({ children: e }) {
+	return /* @__PURE__ */ m("div", {
 		className: "flex flex-wrap items-center gap-1.5",
 		children: e
 	});
 }
 //#endregion
-export { x as Preferences };
+export { b as Preferences };