@64mb/freelens-power 1.0.3 → 1.2.0

package/out/renderer/cluster-icon-colors.js

@@ -0,0 +1,188 @@
+const require_appearance_preferences_store = require("./src/common/store/appearance-preferences-store.js");
+const require__global_external_react = require("./_virtual/_global-external_react.js");
+const require_jsx_runtime = require("./_virtual/_global-external_react/jsx-runtime.js");
+//#region src/renderer/cluster-icon-colors.tsx
+var MATCHING_ICON_COLORS = [
+	{
+		name: "Lavender",
+		color: "#b49aff"
+	},
+	{
+		name: "Sky",
+		color: "#64c9ff"
+	},
+	{
+		name: "Mint",
+		color: "#6bdbb1"
+	},
+	{
+		name: "Amber",
+		color: "#f2bd55"
+	},
+	{
+		name: "Coral",
+		color: "#ef7070"
+	},
+	{
+		name: "Rose",
+		color: "#e59cce"
+	},
+	{
+		name: "Slate",
+		color: "#9da7c2"
+	},
+	{
+		name: "Cyan",
+		color: "#78dce8"
+	}
+];
+var materialColors = [
+	["Red", "#f44336"],
+	["Pink", "#e91e63"],
+	["Purple", "#9c27b0"],
+	["Deep purple", "#673ab7"],
+	["Indigo", "#3f51b5"],
+	["Blue", "#2196f3"],
+	["Light blue", "#03a9f4"],
+	["Cyan", "#00bcd4"],
+	["Teal", "#009688"],
+	["Green", "#4caf50"],
+	["Light green", "#8bc34a"],
+	["Lime", "#cddc39"],
+	["Yellow", "#ffeb3b"],
+	["Amber", "#ffc107"],
+	["Orange", "#ff9800"],
+	["Deep orange", "#ff5722"],
+	["Brown", "#795548"],
+	["Grey", "#9e9e9e"],
+	["Blue grey", "#607d8b"]
+].map(([name, color]) => ({
+	name,
+	color
+}));
+var materialHexes = new Set(materialColors.map(({ color }) => color));
+var groups = [
+	{
+		name: "Power",
+		colors: MATCHING_ICON_COLORS
+	},
+	{
+		name: "Freelens",
+		colors: require_appearance_preferences_store.ACCENT_COLOR_OPTIONS.filter(({ color }) => !materialHexes.has(color.toLowerCase())).map(({ label, color }) => ({
+			name: label,
+			color
+		}))
+	},
+	{
+		name: "Material",
+		colors: materialColors
+	}
+];
+var styles = `
+.power-icon-palette { position: relative; }
+.power-icon-palette button { font: inherit; cursor: pointer; }
+.power-icon-palette button:disabled { cursor: default; opacity: .5; }
+.power-icon-palette button:focus-visible, .power-icon-palette input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+.power-icon-palette-trigger { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border: 1px solid var(--borderFaintColor); border-radius: 7px; background: var(--contentColor); color: var(--textColorSecondary); }
+.power-icon-palette-trigger code { font: 11px var(--font-monospace,monospace); }
+.power-icon-palette-well { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgb(255 255 255 / 15%); }
+.power-icon-palette-panel { position: absolute; z-index: 4; right: 0; top: calc(100% + 7px); box-sizing: border-box; width: 280px; max-width: calc(100vw - 72px); padding: 14px; border: 1px solid var(--borderFaintColor); border-radius: 11px; background: var(--mainBackground); color: var(--textColorPrimary); box-shadow: 0 12px 36px rgb(0 0 0 / 35%); display: grid; gap: 14px; }
+.power-icon-palette-heading { font-size: 11px; color: var(--textColorSecondary); margin-bottom: 8px; }
+.power-icon-palette-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; }
+.power-icon-palette-swatch { width: 100%; max-width: 23px; height: auto; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 6px; }
+.power-icon-palette-swatch[aria-pressed=true] { outline: 2px solid var(--textColorPrimary); outline-offset: 2px; }
+`;
+function IconColorPicker({ label, value, onChange, disabled = false, onOpenChange }) {
+	const [open, setOpen] = require__global_external_react.useState(false);
+	const root = require__global_external_react.useRef(null);
+	const trigger = require__global_external_react.useRef(null);
+	const notify = require__global_external_react.useRef(onOpenChange);
+	notify.current = onOpenChange;
+	const changeOpen = (next) => {
+		notify.current?.(next);
+		setOpen(next);
+	};
+	require__global_external_react.useEffect(() => {
+		if (!open) return;
+		root.current?.querySelector(".power-icon-palette-swatch")?.focus();
+		const outside = (event) => {
+			if (event.target instanceof Node && !root.current?.contains(event.target)) changeOpen(false);
+		};
+		const escape = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			changeOpen(false);
+			trigger.current?.focus();
+		};
+		document.addEventListener("pointerdown", outside, true);
+		document.addEventListener("keydown", escape, true);
+		return () => {
+			document.removeEventListener("pointerdown", outside, true);
+			document.removeEventListener("keydown", escape, true);
+		};
+	}, [open]);
+	require__global_external_react.useEffect(() => () => notify.current?.(false), []);
+	require__global_external_react.useEffect(() => {
+		if (disabled) changeOpen(false);
+	}, [disabled]);
+	const choose = (hex) => {
+		if (disabled || !/^#[\da-f]{6}$/i.test(hex)) return;
+		onChange(hex.toLowerCase());
+		changeOpen(false);
+		trigger.current?.focus();
+	};
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+		className: "power-icon-palette",
+		ref: root,
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: styles }),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("button", {
+				ref: trigger,
+				type: "button",
+				className: "power-icon-palette-trigger",
+				"aria-label": label,
+				"aria-expanded": open,
+				disabled,
+				onClick: () => changeOpen(!open),
+				children: [/* @__PURE__ */ require_jsx_runtime.jsx("code", { children: value }), /* @__PURE__ */ require_jsx_runtime.jsx("span", {
+					className: "power-icon-palette-well",
+					style: { backgroundColor: value },
+					"aria-hidden": "true"
+				})]
+			}),
+			open && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-palette-panel",
+				role: "group",
+				"aria-label": `${label} palette`,
+				onBlur: (event) => {
+					if (event.relatedTarget instanceof Node && !root.current?.contains(event.relatedTarget)) changeOpen(false);
+				},
+				children: groups.map((group) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					role: "group",
+					"aria-label": group.name,
+					children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+						className: "power-icon-palette-heading",
+						children: group.name
+					}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+						className: "power-icon-palette-grid",
+						children: group.colors.map((color) => /* @__PURE__ */ require_jsx_runtime.jsx("button", {
+							type: "button",
+							className: "power-icon-palette-swatch",
+							style: { backgroundColor: color.color },
+							title: `${color.name} ${color.color}`,
+							"aria-label": `${group.name} ${color.name} ${color.color}`,
+							"aria-pressed": value.toLowerCase() === color.color,
+							onClick: () => choose(color.color)
+						}, color.name))
+					})]
+				}, group.name))
+			})
+		]
+	});
+}
+//#endregion
+exports.IconColorPicker = IconColorPicker;
+exports.MATCHING_ICON_COLORS = MATCHING_ICON_COLORS;
+
+//# sourceMappingURL=cluster-icon-colors.js.map

package/out/renderer/cluster-icon-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster-icon-colors.js","names":[],"sources":["../../src/renderer/cluster-icon-colors.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { ACCENT_COLOR_OPTIONS } from \"../common/store/appearance-preferences-store\";\n\nexport const MATCHING_ICON_COLORS = [\n  { name: \"Lavender\", color: \"#b49aff\" },\n  { name: \"Sky\", color: \"#64c9ff\" },\n  { name: \"Mint\", color: \"#6bdbb1\" },\n  { name: \"Amber\", color: \"#f2bd55\" },\n  { name: \"Coral\", color: \"#ef7070\" },\n  { name: \"Rose\", color: \"#e59cce\" },\n  { name: \"Slate\", color: \"#9da7c2\" },\n  { name: \"Cyan\", color: \"#78dce8\" },\n];\n\n// material design 2014 primary palette, shade [500]: https://m1.material.io/style/color.html\nconst materialColors = [\n  [\"Red\", \"#f44336\"],\n  [\"Pink\", \"#e91e63\"],\n  [\"Purple\", \"#9c27b0\"],\n  [\"Deep purple\", \"#673ab7\"],\n  [\"Indigo\", \"#3f51b5\"],\n  [\"Blue\", \"#2196f3\"],\n  [\"Light blue\", \"#03a9f4\"],\n  [\"Cyan\", \"#00bcd4\"],\n  [\"Teal\", \"#009688\"],\n  [\"Green\", \"#4caf50\"],\n  [\"Light green\", \"#8bc34a\"],\n  [\"Lime\", \"#cddc39\"],\n  [\"Yellow\", \"#ffeb3b\"],\n  [\"Amber\", \"#ffc107\"],\n  [\"Orange\", \"#ff9800\"],\n  [\"Deep orange\", \"#ff5722\"],\n  [\"Brown\", \"#795548\"],\n  [\"Grey\", \"#9e9e9e\"],\n  [\"Blue grey\", \"#607d8b\"],\n].map(([name, color]) => ({ name, color }));\n\nconst materialHexes = new Set(materialColors.map(({ color }) => color));\n\nconst groups = [\n  { name: \"Power\", colors: MATCHING_ICON_COLORS },\n  {\n    name: \"Freelens\",\n    colors: ACCENT_COLOR_OPTIONS.filter(({ color }) => !materialHexes.has(color.toLowerCase())).map(\n      ({ label, color }) => ({\n        name: label,\n        color,\n      }),\n    ),\n  },\n  { name: \"Material\", colors: materialColors },\n];\n\nconst styles = `\n.power-icon-palette { position: relative; }\n.power-icon-palette button { font: inherit; cursor: pointer; }\n.power-icon-palette button:disabled { cursor: default; opacity: .5; }\n.power-icon-palette button:focus-visible, .power-icon-palette input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }\n.power-icon-palette-trigger { display: flex; align-items: center; gap: 9px; padding: 5px 7px; border: 1px solid var(--borderFaintColor); border-radius: 7px; background: var(--contentColor); color: var(--textColorSecondary); }\n.power-icon-palette-trigger code { font: 11px var(--font-monospace,monospace); }\n.power-icon-palette-well { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgb(255 255 255 / 15%); }\n.power-icon-palette-panel { position: absolute; z-index: 4; right: 0; top: calc(100% + 7px); box-sizing: border-box; width: 280px; max-width: calc(100vw - 72px); padding: 14px; border: 1px solid var(--borderFaintColor); border-radius: 11px; background: var(--mainBackground); color: var(--textColorPrimary); box-shadow: 0 12px 36px rgb(0 0 0 / 35%); display: grid; gap: 14px; }\n.power-icon-palette-heading { font-size: 11px; color: var(--textColorSecondary); margin-bottom: 8px; }\n.power-icon-palette-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; }\n.power-icon-palette-swatch { width: 100%; max-width: 23px; height: auto; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid rgb(255 255 255 / 18%); border-radius: 6px; }\n.power-icon-palette-swatch[aria-pressed=true] { outline: 2px solid var(--textColorPrimary); outline-offset: 2px; }\n`;\n\nexport function IconColorPicker({\n  label,\n  value,\n  onChange,\n  disabled = false,\n  onOpenChange,\n}: {\n  label: string;\n  value: string;\n  onChange: (hex: string) => void;\n  disabled?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const notify = useRef(onOpenChange);\n  notify.current = onOpenChange;\n  const changeOpen = (next: boolean) => {\n    notify.current?.(next);\n    setOpen(next);\n  };\n  useEffect(() => {\n    if (!open) return;\n    root.current?.querySelector<HTMLButtonElement>(\".power-icon-palette-swatch\")?.focus();\n    const outside = (event: PointerEvent) => {\n      if (event.target instanceof Node && !root.current?.contains(event.target)) changeOpen(false);\n    };\n    const escape = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      changeOpen(false);\n      trigger.current?.focus();\n    };\n    document.addEventListener(\"pointerdown\", outside, true);\n    document.addEventListener(\"keydown\", escape, true);\n    return () => {\n      document.removeEventListener(\"pointerdown\", outside, true);\n      document.removeEventListener(\"keydown\", escape, true);\n    };\n  }, [open]);\n  useEffect(() => () => notify.current?.(false), []);\n  useEffect(() => {\n    if (disabled) changeOpen(false);\n  }, [disabled]);\n  const choose = (hex: string) => {\n    if (disabled || !/^#[\\da-f]{6}$/i.test(hex)) return;\n    onChange(hex.toLowerCase());\n    changeOpen(false);\n    trigger.current?.focus();\n  };\n  return (\n    <div className=\"power-icon-palette\" ref={root}>\n      <style>{styles}</style>\n      <button\n        ref={trigger}\n        type=\"button\"\n        className=\"power-icon-palette-trigger\"\n        aria-label={label}\n        aria-expanded={open}\n        disabled={disabled}\n        onClick={() => changeOpen(!open)}\n      >\n        <code>{value}</code>\n        <span className=\"power-icon-palette-well\" style={{ backgroundColor: value }} aria-hidden=\"true\" />\n      </button>\n      {open && (\n        <div\n          className=\"power-icon-palette-panel\"\n          role=\"group\"\n          aria-label={`${label} palette`}\n          onBlur={(event) => {\n            if (event.relatedTarget instanceof Node && !root.current?.contains(event.relatedTarget)) changeOpen(false);\n          }}\n        >\n          {groups.map((group) => (\n            <div key={group.name} role=\"group\" aria-label={group.name}>\n              <div className=\"power-icon-palette-heading\">{group.name}</div>\n              <div className=\"power-icon-palette-grid\">\n                {group.colors.map((color) => (\n                  <button\n                    type=\"button\"\n                    key={color.name}\n                    className=\"power-icon-palette-swatch\"\n                    style={{ backgroundColor: color.color }}\n                    title={`${color.name} ${color.color}`}\n                    aria-label={`${group.name} ${color.name} ${color.color}`}\n                    aria-pressed={value.toLowerCase() === color.color}\n                    onClick={() => choose(color.color)}\n                  />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/out/renderer/cluster-icons.js

@@ -0,0 +1,304 @@
+const require_extensions = require("./_virtual/_global-external_@freelensapp/extensions.js");
+const require__global_external_react = require("./_virtual/_global-external_react.js");
+const require_jsx_runtime = require("./_virtual/_global-external_react/jsx-runtime.js");
+const require_cluster_icon_ipc = require("./src/common/cluster-icon-ipc.js");
+const require_cluster_icons = require("./src/common/cluster-icons.js");
+const require_cluster_icon_colors = require("./cluster-icon-colors.js");
+const require_settings_modal = require("./preferences/settings-modal.js");
+let electron = require("electron");
+//#region src/renderer/cluster-icons.tsx
+var styles = `
+.ClusterManager main.power-icon-studio, .power-icon-studio { display: block; position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; overflow: auto; padding: 32px; box-sizing: border-box; background: var(--mainBackground); color: var(--textColorPrimary); }
+.power-icon-studio > .power-icon-content { max-width: 1000px; margin: 0 auto; }
+.power-icon-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
+.power-icon-header h1 { font-size: 24px; font-weight: 600; margin: 0 0 8px; color: var(--textColorAccent); }
+.power-icon-header p { margin: 0; color: var(--textColorSecondary); }
+.power-icon-search { width: 240px; }
+.power-icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
+.power-icon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding: 20px 14px 16px; min-width: 0; border: 1px solid var(--borderFaintColor); border-radius: 14px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
+.power-icon-card:hover { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 4%,var(--contentColor)); transform: translateY(-2px); }
+.power-icon-card:focus-visible, .power-icon-glyph:focus-visible, .power-icon-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+.power-icon-card > img, .power-icon-card .power-icon-current-avatar { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }
+.power-icon-card-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.power-icon-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--borderFaintColor); border-radius: 14px; color: var(--textColorSecondary); }
+.power-icon-editor { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 24px; }
+.power-icon-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 12px; border: 1px solid var(--borderFaintColor); border-radius: 12px; background: var(--contentColor); }
+.power-icon-preview-main { width: 96px; height: 96px; }
+.power-icon-preview-sizes { display: flex; align-items: center; gap: 14px; }
+.power-icon-preview-caption { font-size: 11px; color: var(--textColorSecondary); }
+.power-icon-fields { display: grid; gap: 16px; }
+.power-icon-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
+.power-icon-field input[type=text] { width: 100px; padding: 8px 10px; border: 1px solid var(--borderFaintColor); border-radius: 6px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; }
+.power-icon-field input:focus-visible { outline: 1px solid var(--primary); }
+.power-icon-section-label { color: var(--textColorSecondary); font-size: 12px; margin-bottom: 10px; }
+.power-icon-glyphs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
+.power-icon-glyph { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px; border: 1px solid var(--borderFaintColor); border-radius: 8px; background: var(--contentColor); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
+.power-icon-glyph:hover, .power-icon-glyph[aria-pressed=true] { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--contentColor)); }
+.power-icon-glyph img { width: 38px; height: 38px; }
+.power-icon-swatches { display: flex; align-items: center; gap: 8px; }
+.power-icon-swatch { width: 22px; height: 22px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
+.power-icon-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--mainBackground),0 0 0 3px var(--primary); }
+.power-icon-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--borderFaintColor); }
+.power-icon-footer-actions { display: flex; gap: 8px; margin-left: auto; }
+.power-icon-error { color: var(--colorError); font-size: 12px; line-height: 1.5; }
+@media (max-width: 900px) { .power-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
+@media (max-width: 700px) { .power-icon-header { align-items: stretch; flex-direction: column; } .power-icon-search { width: 100%; } .power-icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .ClusterManager main.power-icon-studio, .power-icon-studio { padding: 20px; } }
+@media (max-width: 480px) { .power-icon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .power-icon-editor { grid-template-columns: 1fr; } .power-icon-preview { flex-direction: row; padding: 16px; } .power-icon-preview-main { width: 72px; height: 72px; } }
+@media (prefers-reduced-motion: reduce) { .power-icon-card { transition: none; transform: none; } }
+`;
+function IconEditor({ entry, onClose, onSaved }) {
+	const [design, setDesign] = require__global_external_react.useState(() => entry.design ?? require_cluster_icons.defaultClusterIconDesign(entry.name));
+	const [busy, setBusy] = require__global_external_react.useState(false);
+	const [error, setError] = require__global_external_react.useState("");
+	const paletteOpen = require__global_external_react.useRef(false);
+	const onPaletteOpenChange = require__global_external_react.useCallback((open) => {
+		paletteOpen.current = open;
+	}, []);
+	const update = (key, value) => setDesign((previous) => ({
+		...previous,
+		[key]: value
+	}));
+	const save = async () => {
+		setBusy(true);
+		setError("");
+		try {
+			onSaved(await electron.ipcRenderer.invoke(require_cluster_icon_ipc.CLUSTER_ICONS_CHANNEL, {
+				operation: "apply",
+				id: entry.id,
+				design
+			}));
+		} catch {
+			setError("Unable to save this cluster icon. Try again.");
+		} finally {
+			setBusy(false);
+		}
+	};
+	let validDesign;
+	try {
+		validDesign = require_cluster_icons.normalizeClusterIconDesign(design);
+	} catch {
+		validDesign = void 0;
+	}
+	const previewDesign = validDesign ?? require_cluster_icons.defaultClusterIconDesign(entry.name);
+	const preview = require_cluster_icons.clusterIconDataUrl(previewDesign);
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(require_settings_modal.SettingsModal, {
+		id: "power-cluster-icon-editor",
+		title: entry.name,
+		onClose: () => {
+			if (!busy && !paletteOpen.current) onClose();
+		},
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: styles }),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				className: "power-icon-editor",
+				children: [/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-preview",
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsx("img", {
+							className: "power-icon-preview-main",
+							src: preview,
+							alt: "Cluster icon preview"
+						}),
+						/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-preview-sizes",
+							children: /* @__PURE__ */ require_jsx_runtime.jsx("img", {
+								src: preview,
+								width: 36,
+								height: 36,
+								alt: ""
+							})
+						}),
+						/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							className: "power-icon-preview-caption",
+							children: "Sidebar preview"
+						})
+					]
+				}), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-fields",
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsxs("label", {
+							className: "power-icon-field",
+							htmlFor: "power-icon-label",
+							children: ["Label", /* @__PURE__ */ require_jsx_runtime.jsx("input", {
+								id: "power-icon-label",
+								type: "text",
+								value: design.label,
+								onChange: (event) => update("label", Array.from(event.target.value).slice(0, 3).join("")),
+								disabled: busy,
+								autoFocus: true
+							})]
+						}),
+						[
+							["outlineColor", "Outline"],
+							["labelColor", "Label color"],
+							["iconColor", "Icon color"]
+						].map(([key, label]) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+							className: "power-icon-field",
+							children: [/* @__PURE__ */ require_jsx_runtime.jsx("span", { children: label }), /* @__PURE__ */ require_jsx_runtime.jsx(require_cluster_icon_colors.IconColorPicker, {
+								label,
+								value: design[key],
+								onChange: (color) => update(key, color),
+								disabled: busy,
+								onOpenChange: onPaletteOpenChange
+							})]
+						}, key)),
+						/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-section-label",
+							children: "Matching outline & label"
+						}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-swatches",
+							children: require_cluster_icon_colors.MATCHING_ICON_COLORS.map(({ name, color }) => /* @__PURE__ */ require_jsx_runtime.jsx("button", {
+								type: "button",
+								className: "power-icon-swatch",
+								style: { background: color },
+								title: `${name} · ${color}`,
+								"aria-label": `Use ${color} for outline and label`,
+								"aria-pressed": design.outlineColor === color && design.labelColor === color,
+								disabled: busy,
+								onClick: () => setDesign((previous) => ({
+									...previous,
+									outlineColor: color,
+									labelColor: color
+								}))
+							}, color))
+						})] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-section-label",
+				children: "Choose an icon"
+			}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-glyphs",
+				children: require_cluster_icons.GLYPHS.map((glyph) => /* @__PURE__ */ require_jsx_runtime.jsx("button", {
+					type: "button",
+					className: "power-icon-glyph",
+					title: glyph.label,
+					"aria-label": glyph.label,
+					"aria-pressed": design.glyph === glyph.id,
+					disabled: busy,
+					onClick: () => update("glyph", glyph.id),
+					children: /* @__PURE__ */ require_jsx_runtime.jsx("img", {
+						src: require_cluster_icons.clusterIconDataUrl({
+							...previewDesign,
+							glyph: glyph.id
+						}),
+						alt: ""
+					})
+				}, glyph.id))
+			})] }),
+			!validDesign && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "alert",
+				className: "power-icon-error",
+				children: "Use up to three visible characters for the label."
+			}),
+			error && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "alert",
+				className: "power-icon-error",
+				children: error
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-footer",
+				children: /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-footer-actions",
+					children: [/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+						label: "Cancel",
+						disabled: busy,
+						onClick: onClose
+					}), /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+						primary: true,
+						label: busy ? "Applying…" : "Apply",
+						disabled: busy || !validDesign,
+						onClick: () => void save()
+					})]
+				})
+			})
+		]
+	});
+}
+function ClusterIconsPage() {
+	const [entries, setEntries] = require__global_external_react.useState([]);
+	const [loading, setLoading] = require__global_external_react.useState(true);
+	const [error, setError] = require__global_external_react.useState("");
+	const [query, setQuery] = require__global_external_react.useState("");
+	const [editing, setEditing] = require__global_external_react.useState();
+	const load = () => {
+		setLoading(true);
+		setError("");
+		return electron.ipcRenderer.invoke(require_cluster_icon_ipc.CLUSTER_ICONS_CHANNEL, { operation: "list" }).then(setEntries).catch(() => setError("Unable to load saved clusters. Try again.")).finally(() => setLoading(false));
+	};
+	require__global_external_react.useEffect(() => {
+		load();
+	}, []);
+	const visible = entries.filter((entry) => entry.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("main", {
+		className: "power-icon-studio",
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: styles }), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+			className: "power-icon-content",
+			children: [
+				/* @__PURE__ */ require_jsx_runtime.jsxs("header", {
+					className: "power-icon-header",
+					children: [/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("h1", { children: "Cluster icons" }), /* @__PURE__ */ require_jsx_runtime.jsx("p", { children: "A shared style. A distinct identity for every cluster." })] }), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+						className: "power-icon-search",
+						children: /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Input, {
+							value: query,
+							onChange: setQuery,
+							placeholder: "Find a cluster…",
+							"aria-label": "Find a cluster"
+						})
+					})]
+				}),
+				error ? /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-empty",
+					role: "alert",
+					children: [
+						error,
+						" ",
+						/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+							label: "Retry",
+							onClick: () => void load()
+						})
+					]
+				}) : loading ? /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-empty",
+					role: "status",
+					children: "Loading clusters…"
+				}) : visible.length === 0 ? /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-empty",
+					children: entries.length ? "No matching clusters" : "Your saved clusters will appear here"
+				}) : /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-grid",
+					children: visible.map((entry) => /* @__PURE__ */ require_jsx_runtime.jsxs("button", {
+						type: "button",
+						className: "power-icon-card",
+						title: `Edit icon for ${entry.name}`,
+						onClick: () => setEditing(entry),
+						children: [/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Avatar, {
+							title: entry.name,
+							size: 64,
+							src: entry.icon?.startsWith("data:image/") ? entry.icon : void 0,
+							background: entry.icon && !entry.icon.startsWith("data:") ? entry.icon : void 0,
+							colorHash: `${entry.name}-${require_extensions.Renderer.Catalog.catalogEntities.getById(entry.id)?.metadata.source ?? ""}`,
+							className: "power-icon-current-avatar"
+						}), /* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							className: "power-icon-card-name",
+							children: entry.name
+						})]
+					}, entry.id))
+				}),
+				editing && /* @__PURE__ */ require_jsx_runtime.jsx(IconEditor, {
+					entry: editing,
+					onClose: () => setEditing(void 0),
+					onSaved: (next) => {
+						setEntries(next);
+						setEditing(void 0);
+					}
+				}, editing.id)
+			]
+		})]
+	});
+}
+//#endregion
+exports.ClusterIconsPage = ClusterIconsPage;
+
+//# sourceMappingURL=cluster-icons.js.map

package/out/renderer/cluster-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster-icons.js","names":[],"sources":["../../src/renderer/cluster-icons.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { ipcRenderer } from \"electron\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { CLUSTER_ICONS_CHANNEL, type ClusterIconEntry } from \"../common/cluster-icon-ipc\";\nimport {\n  type ClusterIconDesign,\n  clusterIconDataUrl,\n  defaultClusterIconDesign,\n  GLYPHS,\n  normalizeClusterIconDesign,\n} from \"../common/cluster-icons\";\nimport { IconColorPicker, MATCHING_ICON_COLORS } from \"./cluster-icon-colors\";\nimport { SettingsModal } from \"./preferences/settings-modal\";\n\nconst styles = `\n.ClusterManager main.power-icon-studio, .power-icon-studio { display: block; position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; overflow: auto; padding: 32px; box-sizing: border-box; background: var(--mainBackground); color: var(--textColorPrimary); }\n.power-icon-studio > .power-icon-content { max-width: 1000px; margin: 0 auto; }\n.power-icon-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }\n.power-icon-header h1 { font-size: 24px; font-weight: 600; margin: 0 0 8px; color: var(--textColorAccent); }\n.power-icon-header p { margin: 0; color: var(--textColorSecondary); }\n.power-icon-search { width: 240px; }\n.power-icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }\n.power-icon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding: 20px 14px 16px; min-width: 0; border: 1px solid var(--borderFaintColor); border-radius: 14px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }\n.power-icon-card:hover { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 4%,var(--contentColor)); transform: translateY(-2px); }\n.power-icon-card:focus-visible, .power-icon-glyph:focus-visible, .power-icon-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }\n.power-icon-card > img, .power-icon-card .power-icon-current-avatar { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }\n.power-icon-card-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n.power-icon-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--borderFaintColor); border-radius: 14px; color: var(--textColorSecondary); }\n.power-icon-editor { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 24px; }\n.power-icon-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 12px; border: 1px solid var(--borderFaintColor); border-radius: 12px; background: var(--contentColor); }\n.power-icon-preview-main { width: 96px; height: 96px; }\n.power-icon-preview-sizes { display: flex; align-items: center; gap: 14px; }\n.power-icon-preview-caption { font-size: 11px; color: var(--textColorSecondary); }\n.power-icon-fields { display: grid; gap: 16px; }\n.power-icon-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }\n.power-icon-field input[type=text] { width: 100px; padding: 8px 10px; border: 1px solid var(--borderFaintColor); border-radius: 6px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; }\n.power-icon-field input:focus-visible { outline: 1px solid var(--primary); }\n.power-icon-section-label { color: var(--textColorSecondary); font-size: 12px; margin-bottom: 10px; }\n.power-icon-glyphs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }\n.power-icon-glyph { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px; border: 1px solid var(--borderFaintColor); border-radius: 8px; background: var(--contentColor); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }\n.power-icon-glyph:hover, .power-icon-glyph[aria-pressed=true] { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--contentColor)); }\n.power-icon-glyph img { width: 38px; height: 38px; }\n.power-icon-swatches { display: flex; align-items: center; gap: 8px; }\n.power-icon-swatch { width: 22px; height: 22px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }\n.power-icon-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--mainBackground),0 0 0 3px var(--primary); }\n.power-icon-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--borderFaintColor); }\n.power-icon-footer-actions { display: flex; gap: 8px; margin-left: auto; }\n.power-icon-error { color: var(--colorError); font-size: 12px; line-height: 1.5; }\n@media (max-width: 900px) { .power-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }\n@media (max-width: 700px) { .power-icon-header { align-items: stretch; flex-direction: column; } .power-icon-search { width: 100%; } .power-icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .ClusterManager main.power-icon-studio, .power-icon-studio { padding: 20px; } }\n@media (max-width: 480px) { .power-icon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .power-icon-editor { grid-template-columns: 1fr; } .power-icon-preview { flex-direction: row; padding: 16px; } .power-icon-preview-main { width: 72px; height: 72px; } }\n@media (prefers-reduced-motion: reduce) { .power-icon-card { transition: none; transform: none; } }\n`;\n\nfunction IconEditor({\n  entry,\n  onClose,\n  onSaved,\n}: {\n  entry: ClusterIconEntry;\n  onClose: () => void;\n  onSaved: (entries: ClusterIconEntry[]) => void;\n}) {\n  const [design, setDesign] = useState<ClusterIconDesign>(() => entry.design ?? defaultClusterIconDesign(entry.name));\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState(\"\");\n  const paletteOpen = useRef(false);\n  const onPaletteOpenChange = useCallback((open: boolean) => {\n    paletteOpen.current = open;\n  }, []);\n  const update = (key: keyof ClusterIconDesign, value: string) =>\n    setDesign((previous) => ({ ...previous, [key]: value }));\n  const save = async () => {\n    setBusy(true);\n    setError(\"\");\n    try {\n      const entries = await ipcRenderer.invoke(CLUSTER_ICONS_CHANNEL, {\n        operation: \"apply\",\n        id: entry.id,\n        design,\n      });\n      onSaved(entries);\n    } catch {\n      setError(\"Unable to save this cluster icon. Try again.\");\n    } finally {\n      setBusy(false);\n    }\n  };\n  let validDesign: ClusterIconDesign | undefined;\n  try {\n    validDesign = normalizeClusterIconDesign(design);\n  } catch {\n    validDesign = undefined;\n  }\n  const previewDesign = validDesign ?? defaultClusterIconDesign(entry.name);\n  const preview = clusterIconDataUrl(previewDesign);\n  return (\n    <SettingsModal\n      id=\"power-cluster-icon-editor\"\n      title={entry.name}\n      onClose={() => {\n        if (!busy && !paletteOpen.current) onClose();\n      }}\n    >\n      <style>{styles}</style>\n      <div className=\"power-icon-editor\">\n        <div className=\"power-icon-preview\">\n          <img className=\"power-icon-preview-main\" src={preview} alt=\"Cluster icon preview\" />\n          <div className=\"power-icon-preview-sizes\">\n            <img src={preview} width={36} height={36} alt=\"\" />\n          </div>\n          <span className=\"power-icon-preview-caption\">Sidebar preview</span>\n        </div>\n        <div className=\"power-icon-fields\">\n          <label className=\"power-icon-field\" htmlFor=\"power-icon-label\">\n            Label\n            <input\n              id=\"power-icon-label\"\n              type=\"text\"\n              value={design.label}\n              onChange={(event) => update(\"label\", Array.from(event.target.value).slice(0, 3).join(\"\"))}\n              disabled={busy}\n              autoFocus\n            />\n          </label>\n          {(\n            [\n              [\"outlineColor\", \"Outline\"],\n              [\"labelColor\", \"Label color\"],\n              [\"iconColor\", \"Icon color\"],\n            ] as const\n          ).map(([key, label]) => (\n            <div className=\"power-icon-field\" key={key}>\n              <span>{label}</span>\n              <IconColorPicker\n                label={label}\n                value={design[key]}\n                onChange={(color) => update(key, color)}\n                disabled={busy}\n                onOpenChange={onPaletteOpenChange}\n              />\n            </div>\n          ))}\n          <div>\n            <div className=\"power-icon-section-label\">Matching outline & label</div>\n            <div className=\"power-icon-swatches\">\n              {MATCHING_ICON_COLORS.map(({ name, color }) => (\n                <button\n                  key={color}\n                  type=\"button\"\n                  className=\"power-icon-swatch\"\n                  style={{ background: color }}\n                  title={`${name} · ${color}`}\n                  aria-label={`Use ${color} for outline and label`}\n                  aria-pressed={design.outlineColor === color && design.labelColor === color}\n                  disabled={busy}\n                  onClick={() => setDesign((previous) => ({ ...previous, outlineColor: color, labelColor: color }))}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"power-icon-section-label\">Choose an icon</div>\n        <div className=\"power-icon-glyphs\">\n          {GLYPHS.map((glyph) => (\n            <button\n              type=\"button\"\n              key={glyph.id}\n              className=\"power-icon-glyph\"\n              title={glyph.label}\n              aria-label={glyph.label}\n              aria-pressed={design.glyph === glyph.id}\n              disabled={busy}\n              onClick={() => update(\"glyph\", glyph.id)}\n            >\n              <img src={clusterIconDataUrl({ ...previewDesign, glyph: glyph.id })} alt=\"\" />\n            </button>\n          ))}\n        </div>\n      </div>\n      {!validDesign && (\n        <div role=\"alert\" className=\"power-icon-error\">\n          Use up to three visible characters for the label.\n        </div>\n      )}\n      {error && (\n        <div role=\"alert\" className=\"power-icon-error\">\n          {error}\n        </div>\n      )}\n      <div className=\"power-icon-footer\">\n        <div className=\"power-icon-footer-actions\">\n          <Renderer.Component.Button label=\"Cancel\" disabled={busy} onClick={onClose} />\n          <Renderer.Component.Button\n            primary\n            label={busy ? \"Applying…\" : \"Apply\"}\n            disabled={busy || !validDesign}\n            onClick={() => void save()}\n          />\n        </div>\n      </div>\n    </SettingsModal>\n  );\n}\n\nexport function ClusterIconsPage() {\n  const [entries, setEntries] = useState<ClusterIconEntry[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(\"\");\n  const [query, setQuery] = useState(\"\");\n  const [editing, setEditing] = useState<ClusterIconEntry>();\n  const load = () => {\n    setLoading(true);\n    setError(\"\");\n    return ipcRenderer\n      .invoke(CLUSTER_ICONS_CHANNEL, { operation: \"list\" })\n      .then(setEntries)\n      .catch(() => setError(\"Unable to load saved clusters. Try again.\"))\n      .finally(() => setLoading(false));\n  };\n  useEffect(() => {\n    void load();\n  }, []);\n  const visible = entries.filter((entry) => entry.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));\n  return (\n    <main className=\"power-icon-studio\">\n      <style>{styles}</style>\n      <div className=\"power-icon-content\">\n        <header className=\"power-icon-header\">\n          <div>\n            <h1>Cluster icons</h1>\n            <p>A shared style. A distinct identity for every cluster.</p>\n          </div>\n          <div className=\"power-icon-search\">\n            <Renderer.Component.Input\n              value={query}\n              onChange={setQuery}\n              placeholder=\"Find a cluster…\"\n              aria-label=\"Find a cluster\"\n            />\n          </div>\n        </header>\n        {error ? (\n          <div className=\"power-icon-empty\" role=\"alert\">\n            {error} <Renderer.Component.Button label=\"Retry\" onClick={() => void load()} />\n          </div>\n        ) : loading ? (\n          <div className=\"power-icon-empty\" role=\"status\">\n            Loading clusters…\n          </div>\n        ) : visible.length === 0 ? (\n          <div className=\"power-icon-empty\">\n            {entries.length ? \"No matching clusters\" : \"Your saved clusters will appear here\"}\n          </div>\n        ) : (\n          <div className=\"power-icon-grid\">\n            {visible.map((entry) => (\n              <button\n                type=\"button\"\n                key={entry.id}\n                className=\"power-icon-card\"\n                title={`Edit icon for ${entry.name}`}\n                onClick={() => setEditing(entry)}\n              >\n                <Renderer.Component.Avatar\n                  title={entry.name}\n                  size={64}\n                  src={entry.icon?.startsWith(\"data:image/\") ? entry.icon : undefined}\n                  background={entry.icon && !entry.icon.startsWith(\"data:\") ? entry.icon : undefined}\n                  colorHash={`${entry.name}-${Renderer.Catalog.catalogEntities.getById(entry.id)?.metadata.source ?? \"\"}`}\n                  className=\"power-icon-current-avatar\"\n                />\n                <span className=\"power-icon-card-name\">{entry.name}</span>\n              </button>\n            ))}\n          </div>\n        )}\n        {editing && (\n          <IconEditor\n            key={editing.id}\n            entry={editing}\n            onClose={() => setEditing(undefined)}\n            onSaved={(next) => {\n              setEntries(next);\n              setEditing(undefined);\n            }}\n          />\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":"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"}

package/out/renderer/dashboard.js

@@ -51,9 +51,11 @@ var styles = `
   .freelens-power-dashboard button.power-dashboard-expand[aria-pressed="true"] .Icon { color: var(--primary); }
   .freelens-power-dashboard button.power-dashboard-expand[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
   .freelens-power-dashboard button.power-dashboard-expand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
-  .freelens-power-dashboard .power-dashboard-card-s { grid-column: span 1; grid-row: span 1; }
-  .freelens-power-dashboard .power-dashboard-card-m { grid-column: span var(--power-medium-span, 2); grid-row: span 2; }
-  .freelens-power-dashboard .power-dashboard-card-l { grid-column: span var(--power-large-span, 4); grid-row: span 4; }
+  .freelens-power-dashboard .power-dashboard-card-xs { grid-column: span 1; grid-row: span 1; }
+  .freelens-power-dashboard .power-dashboard-card-s { grid-column: span var(--power-small-span, 2); grid-row: span 2; }
+  .freelens-power-dashboard .power-dashboard-card-m { grid-column: span var(--power-medium-span, 4); grid-row: span 2; }
+  .freelens-power-dashboard .power-dashboard-card-l { grid-column: span var(--power-large-span, 4); grid-row: span 3; }
+  .freelens-power-dashboard .power-dashboard-card-xl { grid-column: span var(--power-columns, 4); grid-row: span 3; }
   .freelens-power-dashboard .power-dashboard-card-header {
     display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px;
   }
@@ -234,10 +236,11 @@ var DashboardPage = require__global_external_mobx_react.observer(({ onOpenPrefer
 			frame = 0;
 			const containerStyle = window.getComputedStyle(container);
 			const contentWidth = container.clientWidth - (Number.parseFloat(containerStyle.paddingLeft) || 0) - (Number.parseFloat(containerStyle.paddingRight) || 0);
-			const columns = Math.max(1, Math.min(12, Math.floor((contentWidth + 20) / 260)));
+			const columns = contentWidth >= 1200 ? 6 : contentWidth >= 800 ? 4 : contentWidth >= 520 ? 2 : 1;
 			for (const [property, value] of Object.entries({
 				"--power-columns": columns,
-				"--power-medium-span": Math.min(2, columns),
+				"--power-small-span": Math.min(2, columns),
+				"--power-medium-span": Math.min(4, columns),
 				"--power-large-span": Math.min(4, columns)
 			})) if (container.style.getPropertyValue(property) !== String(value)) container.style.setProperty(property, String(value));
 			const containerBounds = container.getBoundingClientRect();