@64mb/freelens-power 1.2.2 → 1.4.0

package/out/renderer/preferences/preferences.js

@@ -17,6 +17,32 @@ var styles = `
   #freelens-power-settings > .hint,
   #freelens-power-settings + hr { display: none; }
   .freelens-power-preferences { display: grid; gap: 24px; max-width: 760px; }
+  .freelens-power-preferences .power-preferences-section-links {
+    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: 8px;
+  }
+  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link {
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    width: 100%; min-width: 0; min-height: 32px; padding: 4px 2px;
+    border: 0; border-radius: 4px; background: transparent; box-shadow: none;
+    color: var(--textColorSecondary); text-transform: none; white-space: nowrap; cursor: pointer;
+  }
+  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link:hover {
+    color: var(--primary); background: transparent; box-shadow: none;
+  }
+  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link::before {
+    content: none;
+  }
+  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link:focus-visible {
+    color: var(--primary); background: transparent; box-shadow: none;
+    outline: 2px solid var(--primary); outline-offset: 2px;
+  }
+  @media (max-width: 600px) {
+    .freelens-power-preferences .power-preferences-section-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  }
+  @media (max-width: 360px) {
+    .freelens-power-preferences .power-preferences-section-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  .freelens-power-preferences section[id] { scroll-margin-top: 16px; }
   .freelens-power-preferences section {
     padding: 24px; border: 1px solid var(--borderFaintColor);
     border-radius: 12px; background: var(--contentColor);
@@ -51,6 +77,38 @@ var styles = `
     .freelens-power-preferences .power-settings-row { flex-wrap: wrap; }
   }
 `;
+var sectionLinks = [
+	{
+		id: "safety",
+		title: "Safety",
+		icon: "lock_outline"
+	},
+	{
+		id: "appearance",
+		title: "Appearance",
+		icon: "palette"
+	},
+	{
+		id: "monitoring",
+		title: "Monitoring",
+		icon: "show_chart"
+	},
+	{
+		id: "shell",
+		title: "Node shell",
+		icon: "vpn_key"
+	},
+	{
+		id: "ai",
+		title: "AI",
+		icon: "chat_bubble_outline"
+	},
+	{
+		id: "dashboard",
+		title: "Dashboard",
+		icon: "dashboard"
+	}
+];
 var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 	className: "freelens-power-preferences",
 	children: [
@@ -60,7 +118,37 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			"aria-label": "Freelens Power",
 			children: /* @__PURE__ */ require_jsx_runtime.jsx(require_power_preferences.PowerPreferencesToggle, {})
 		}),
+		/* @__PURE__ */ require_jsx_runtime.jsx("nav", {
+			className: "power-preferences-section-links",
+			"aria-label": "Settings sections",
+			children: sectionLinks.map(({ id, title, icon }) => /* @__PURE__ */ require_jsx_runtime.jsxs(require_extensions.Renderer.Component.Button, {
+				className: "power-settings-section-link",
+				title: `Jump to ${title} settings`,
+				onClick: (event) => {
+					event.preventDefault();
+					const section = document.getElementById(`freelens-power-${id}-section`);
+					requestAnimationFrame(() => {
+						if (!section?.isConnected) return;
+						section.focus({ preventScroll: true });
+						section.scrollIntoView({
+							block: "start",
+							behavior: "instant"
+						});
+					});
+				},
+				children: [
+					/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Icon, {
+						material: icon,
+						size: 16
+					}),
+					" ",
+					title
+				]
+			}, id))
+		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-safety-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-safety-title",
 			children: [/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
 				id: "freelens-power-safety-title",
@@ -71,6 +159,8 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			}), /* @__PURE__ */ require_jsx_runtime.jsx(require_read_only_preferences.ReadOnlyPreferences, {})]
 		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-appearance-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-appearance-title",
 			children: [
 				/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
@@ -104,6 +194,8 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			]
 		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-monitoring-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-monitoring-title",
 			children: [/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
 				id: "freelens-power-monitoring-title",
@@ -114,6 +206,8 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			}), /* @__PURE__ */ require_jsx_runtime.jsx(require_monitoring_preferences.MonitoringPreferences, {})]
 		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-shell-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-shell-title",
 			children: [/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
 				id: "freelens-power-shell-title",
@@ -124,6 +218,8 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			}), /* @__PURE__ */ require_jsx_runtime.jsx(require_node_shell_preferences.NodeShellPreferences, {})]
 		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-ai-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-ai-title",
 			children: [/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
 				id: "freelens-power-ai-title",
@@ -134,6 +230,8 @@ var PowerPreferences = () => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 			}), /* @__PURE__ */ require_jsx_runtime.jsx(require_ai_preferences.AiPreferences, {})]
 		}),
 		/* @__PURE__ */ require_jsx_runtime.jsxs("section", {
+			id: "freelens-power-dashboard-section",
+			tabIndex: -1,
 			"aria-labelledby": "freelens-power-dashboard-title",
 			children: [/* @__PURE__ */ require_jsx_runtime.jsxs("h3", {
 				id: "freelens-power-dashboard-title",

package/out/renderer/preferences/preferences.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences.js","names":[],"sources":["../../../src/renderer/preferences/preferences.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { EXTENSION_ID } from \"../../common/extension-info\";\nimport { AiPreferences } from \"./ai-preferences\";\nimport { AppearancePreferences } from \"./appearance-preferences\";\nimport { DashboardPreferences } from \"./dashboard-preferences\";\nimport { MonitoringPreferences } from \"./monitoring-preferences\";\nimport { NodeShellPreferences } from \"./node-shell-preferences\";\nimport { PowerPreferencesToggle } from \"./power-preferences\";\nimport { ReadOnlyPreferences } from \"./read-only-preferences\";\nimport { SettingsExport } from \"./settings-export\";\n\nconst styles = `\n  .power-preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n  .power-preferences-header-actions { display: inline-flex; margin-left: auto; flex-shrink: 0; }\n  #freelens-power-settings > .SubTitle,\n  #freelens-power-settings > .hint,\n  #freelens-power-settings + hr { display: none; }\n  .freelens-power-preferences { display: grid; gap: 24px; max-width: 760px; }\n  .freelens-power-preferences section {\n    padding: 24px; border: 1px solid var(--borderFaintColor);\n    border-radius: 12px; background: var(--contentColor);\n  }\n  .freelens-power-preferences button, .freelens-power-preferences .Button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }\n  :root .freelens-power-preferences button.power-settings-icon-action,\n  :root .power-preferences-header-actions button.power-settings-icon-action {\n    display: inline-flex; align-items: center; justify-content: center;\n    width: 32px; height: 32px; min-width: 32px; padding: 0; flex-shrink: 0;\n    border: 0; border-radius: 6px; background: transparent; color: var(--textColorSecondary); cursor: pointer;\n    transition: color 160ms ease, background-color 160ms ease;\n  }\n  :root .freelens-power-preferences button.power-settings-icon-action:not(:disabled):hover,\n  :root .power-preferences-header-actions button.power-settings-icon-action:not(:disabled):hover {\n    color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);\n  }\n  :root .freelens-power-preferences button.power-settings-icon-action:focus-visible,\n  :root .power-preferences-header-actions button.power-settings-icon-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }\n  :root .freelens-power-preferences button.power-settings-icon-action:disabled,\n  :root .power-preferences-header-actions button.power-settings-icon-action:disabled { opacity: 0.4; cursor: default; }\n  .freelens-power-preferences h3 {\n    display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 16px; font-weight: 600; color: var(--textColorAccent);\n  }\n  .freelens-power-preferences label[data-testid=\"switch\"] {\n    display: flex; width: 100%; align-items: center; justify-content: space-between;\n  }\n  .freelens-power-preferences .power-settings-hint {\n    margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--textColorSecondary);\n  }\n  @media (max-width: 760px) {\n    .freelens-power-preferences section { padding: 18px; }\n    .freelens-power-preferences .power-settings-row { flex-wrap: wrap; }\n  }\n`;\n\nexport const PowerPreferences = () => (\n  <div className=\"freelens-power-preferences\">\n    <style>{styles}</style>\n    <SettingsExport />\n    <section aria-label=\"Freelens Power\">\n      <PowerPreferencesToggle />\n    </section>\n    <section aria-labelledby=\"freelens-power-safety-title\">\n      <h3 id=\"freelens-power-safety-title\">\n        <Renderer.Component.Icon material=\"lock_outline\" size={20} /> Read-only mode\n      </h3>\n      <ReadOnlyPreferences />\n    </section>\n    <section aria-labelledby=\"freelens-power-appearance-title\">\n      <h3 id=\"freelens-power-appearance-title\">\n        <Renderer.Component.Icon material=\"palette\" size={20} /> Appearance\n      </h3>\n      <AppearancePreferences />\n      <div style={{ display: \"flex\", justifyContent: \"flex-end\", marginTop: 20 }}>\n        <Renderer.Component.Button\n          style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6 }}\n          onClick={() => Renderer.Navigation.navigate(`/extension/${EXTENSION_ID}/cluster-icons`)}\n          title=\"Create matching icons for your saved clusters\"\n        >\n          <Renderer.Component.Icon material=\"palette\" size={16} /> Cluster icons\n        </Renderer.Component.Button>\n      </div>\n    </section>\n    <section aria-labelledby=\"freelens-power-monitoring-title\">\n      <h3 id=\"freelens-power-monitoring-title\">\n        <Renderer.Component.Icon material=\"show_chart\" size={20} /> Monitoring\n      </h3>\n      <MonitoringPreferences />\n    </section>\n    <section aria-labelledby=\"freelens-power-shell-title\">\n      <h3 id=\"freelens-power-shell-title\">\n        <Renderer.Component.Icon material=\"vpn_key\" size={20} /> Secure Node Shell\n      </h3>\n      <NodeShellPreferences />\n    </section>\n    <section aria-labelledby=\"freelens-power-ai-title\">\n      <h3 id=\"freelens-power-ai-title\">\n        <Renderer.Component.Icon material=\"chat_bubble_outline\" size={20} /> AI assistant\n      </h3>\n      <AiPreferences />\n    </section>\n    <section aria-labelledby=\"freelens-power-dashboard-title\">\n      <h3 id=\"freelens-power-dashboard-title\">\n        <Renderer.Component.Icon material=\"dashboard\" size={20} /> Dashboard\n      </h3>\n      <DashboardPreferences />\n    </section>\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Cf,IAAa,yBACX,oCAAA,KAAC,OAAD;CAAK,WAAU;WAAf;EACE,oCAAA,IAAC,SAAD,EAAA,UAAQ,OAAc,CAAA;EACtB,oCAAA,IAAC,wBAAA,gBAAD,CAAiB,CAAA;EACjB,oCAAA,IAAC,WAAD;GAAS,cAAW;aAClB,oCAAA,IAAC,0BAAA,wBAAD,CAAyB,CAAA;EAClB,CAAA;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB,CACE,oCAAA,KAAC,MAAD;IAAI,IAAG;cAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;KAAyB,UAAS;KAAe,MAAM;IAAK,CAAA,GAAC,iBAC3D;OACJ,oCAAA,IAAC,8BAAA,qBAAD,CAAsB,CAAA,CACf;;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB;IACE,oCAAA,KAAC,MAAD;KAAI,IAAG;eAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;MAAyB,UAAS;MAAU,MAAM;KAAK,CAAA,GAAC,aACtD;;IACJ,oCAAA,IAAC,+BAAA,uBAAD,CAAwB,CAAA;IACxB,oCAAA,IAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,gBAAgB;MAAY,WAAW;KAAG;eACvE,oCAAA,KAAC,mBAAA,SAAS,UAAU,QAApB;MACE,OAAO;OAAE,SAAS;OAAe,YAAY;OAAU,KAAK;MAAE;MAC9D,eAAe,mBAAA,SAAS,WAAW,SAAS,cAAc,uBAAA,aAAa,eAAe;MACtF,OAAM;gBAHR,CAKE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;OAAyB,UAAS;OAAU,MAAM;MAAK,CAAA,GAAC,gBAC/B;;IACxB,CAAA;GACE;;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB,CACE,oCAAA,KAAC,MAAD;IAAI,IAAG;cAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;KAAyB,UAAS;KAAa,MAAM;IAAK,CAAA,GAAC,aACzD;OACJ,oCAAA,IAAC,+BAAA,uBAAD,CAAwB,CAAA,CACjB;;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB,CACE,oCAAA,KAAC,MAAD;IAAI,IAAG;cAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;KAAyB,UAAS;KAAU,MAAM;IAAK,CAAA,GAAC,oBACtD;OACJ,oCAAA,IAAC,+BAAA,sBAAD,CAAuB,CAAA,CAChB;;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB,CACE,oCAAA,KAAC,MAAD;IAAI,IAAG;cAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;KAAyB,UAAS;KAAsB,MAAM;IAAK,CAAA,GAAC,eAClE;OACJ,oCAAA,IAAC,uBAAA,eAAD,CAAgB,CAAA,CACT;;EACT,oCAAA,KAAC,WAAD;GAAS,mBAAgB;aAAzB,CACE,oCAAA,KAAC,MAAD;IAAI,IAAG;cAAP,CACE,oCAAA,IAAC,mBAAA,SAAS,UAAU,MAApB;KAAyB,UAAS;KAAY,MAAM;IAAK,CAAA,GAAC,YACxD;OACJ,oCAAA,IAAC,8BAAA,sBAAD,CAAuB,CAAA,CAChB;;CACN"}
+{"version":3,"file":"preferences.js","names":[],"sources":["../../../src/renderer/preferences/preferences.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { EXTENSION_ID } from \"../../common/extension-info\";\nimport { AiPreferences } from \"./ai-preferences\";\nimport { AppearancePreferences } from \"./appearance-preferences\";\nimport { DashboardPreferences } from \"./dashboard-preferences\";\nimport { MonitoringPreferences } from \"./monitoring-preferences\";\nimport { NodeShellPreferences } from \"./node-shell-preferences\";\nimport { PowerPreferencesToggle } from \"./power-preferences\";\nimport { ReadOnlyPreferences } from \"./read-only-preferences\";\nimport { SettingsExport } from \"./settings-export\";\n\nconst styles = `\n  .power-preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n  .power-preferences-header-actions { display: inline-flex; margin-left: auto; flex-shrink: 0; }\n  #freelens-power-settings > .SubTitle,\n  #freelens-power-settings > .hint,\n  #freelens-power-settings + hr { display: none; }\n  .freelens-power-preferences { display: grid; gap: 24px; max-width: 760px; }\n  .freelens-power-preferences .power-preferences-section-links {\n    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; gap: 8px;\n  }\n  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link {\n    display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n    width: 100%; min-width: 0; min-height: 32px; padding: 4px 2px;\n    border: 0; border-radius: 4px; background: transparent; box-shadow: none;\n    color: var(--textColorSecondary); text-transform: none; white-space: nowrap; cursor: pointer;\n  }\n  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link:hover {\n    color: var(--primary); background: transparent; box-shadow: none;\n  }\n  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link::before {\n    content: none;\n  }\n  :root .freelens-power-preferences .power-preferences-section-links button.power-settings-section-link:focus-visible {\n    color: var(--primary); background: transparent; box-shadow: none;\n    outline: 2px solid var(--primary); outline-offset: 2px;\n  }\n  @media (max-width: 600px) {\n    .freelens-power-preferences .power-preferences-section-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n  }\n  @media (max-width: 360px) {\n    .freelens-power-preferences .power-preferences-section-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  }\n  .freelens-power-preferences section[id] { scroll-margin-top: 16px; }\n  .freelens-power-preferences section {\n    padding: 24px; border: 1px solid var(--borderFaintColor);\n    border-radius: 12px; background: var(--contentColor);\n  }\n  .freelens-power-preferences button, .freelens-power-preferences .Button { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }\n  :root .freelens-power-preferences button.power-settings-icon-action,\n  :root .power-preferences-header-actions button.power-settings-icon-action {\n    display: inline-flex; align-items: center; justify-content: center;\n    width: 32px; height: 32px; min-width: 32px; padding: 0; flex-shrink: 0;\n    border: 0; border-radius: 6px; background: transparent; color: var(--textColorSecondary); cursor: pointer;\n    transition: color 160ms ease, background-color 160ms ease;\n  }\n  :root .freelens-power-preferences button.power-settings-icon-action:not(:disabled):hover,\n  :root .power-preferences-header-actions button.power-settings-icon-action:not(:disabled):hover {\n    color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);\n  }\n  :root .freelens-power-preferences button.power-settings-icon-action:focus-visible,\n  :root .power-preferences-header-actions button.power-settings-icon-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }\n  :root .freelens-power-preferences button.power-settings-icon-action:disabled,\n  :root .power-preferences-header-actions button.power-settings-icon-action:disabled { opacity: 0.4; cursor: default; }\n  .freelens-power-preferences h3 {\n    display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 16px; font-weight: 600; color: var(--textColorAccent);\n  }\n  .freelens-power-preferences label[data-testid=\"switch\"] {\n    display: flex; width: 100%; align-items: center; justify-content: space-between;\n  }\n  .freelens-power-preferences .power-settings-hint {\n    margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--textColorSecondary);\n  }\n  @media (max-width: 760px) {\n    .freelens-power-preferences section { padding: 18px; }\n    .freelens-power-preferences .power-settings-row { flex-wrap: wrap; }\n  }\n`;\n\nconst sectionLinks = [\n  { id: \"safety\", title: \"Safety\", icon: \"lock_outline\" },\n  { id: \"appearance\", title: \"Appearance\", icon: \"palette\" },\n  { id: \"monitoring\", title: \"Monitoring\", icon: \"show_chart\" },\n  { id: \"shell\", title: \"Node shell\", icon: \"vpn_key\" },\n  { id: \"ai\", title: \"AI\", icon: \"chat_bubble_outline\" },\n  { id: \"dashboard\", title: \"Dashboard\", icon: \"dashboard\" },\n];\n\nexport const PowerPreferences = () => (\n  <div className=\"freelens-power-preferences\">\n    <style>{styles}</style>\n    <SettingsExport />\n    <section aria-label=\"Freelens Power\">\n      <PowerPreferencesToggle />\n    </section>\n    <nav className=\"power-preferences-section-links\" aria-label=\"Settings sections\">\n      {sectionLinks.map(({ id, title, icon }) => (\n        <Renderer.Component.Button\n          key={id}\n          className=\"power-settings-section-link\"\n          title={`Jump to ${title} settings`}\n          onClick={(event) => {\n            event.preventDefault();\n            const section = document.getElementById(`freelens-power-${id}-section`);\n            requestAnimationFrame(() => {\n              if (!section?.isConnected) return;\n              section.focus({ preventScroll: true });\n              section.scrollIntoView({ block: \"start\", behavior: \"instant\" });\n            });\n          }}\n        >\n          <Renderer.Component.Icon material={icon} size={16} /> {title}\n        </Renderer.Component.Button>\n      ))}\n    </nav>\n    <section id=\"freelens-power-safety-section\" tabIndex={-1} aria-labelledby=\"freelens-power-safety-title\">\n      <h3 id=\"freelens-power-safety-title\">\n        <Renderer.Component.Icon material=\"lock_outline\" size={20} /> Read-only mode\n      </h3>\n      <ReadOnlyPreferences />\n    </section>\n    <section id=\"freelens-power-appearance-section\" tabIndex={-1} aria-labelledby=\"freelens-power-appearance-title\">\n      <h3 id=\"freelens-power-appearance-title\">\n        <Renderer.Component.Icon material=\"palette\" size={20} /> Appearance\n      </h3>\n      <AppearancePreferences />\n      <div style={{ display: \"flex\", justifyContent: \"flex-end\", marginTop: 20 }}>\n        <Renderer.Component.Button\n          style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6 }}\n          onClick={() => Renderer.Navigation.navigate(`/extension/${EXTENSION_ID}/cluster-icons`)}\n          title=\"Create matching icons for your saved clusters\"\n        >\n          <Renderer.Component.Icon material=\"palette\" size={16} /> Cluster icons\n        </Renderer.Component.Button>\n      </div>\n    </section>\n    <section id=\"freelens-power-monitoring-section\" tabIndex={-1} aria-labelledby=\"freelens-power-monitoring-title\">\n      <h3 id=\"freelens-power-monitoring-title\">\n        <Renderer.Component.Icon material=\"show_chart\" size={20} /> Monitoring\n      </h3>\n      <MonitoringPreferences />\n    </section>\n    <section id=\"freelens-power-shell-section\" tabIndex={-1} aria-labelledby=\"freelens-power-shell-title\">\n      <h3 id=\"freelens-power-shell-title\">\n        <Renderer.Component.Icon material=\"vpn_key\" size={20} /> Secure Node Shell\n      </h3>\n      <NodeShellPreferences />\n    </section>\n    <section id=\"freelens-power-ai-section\" tabIndex={-1} aria-labelledby=\"freelens-power-ai-title\">\n      <h3 id=\"freelens-power-ai-title\">\n        <Renderer.Component.Icon material=\"chat_bubble_outline\" size={20} /> AI assistant\n      </h3>\n      <AiPreferences />\n    </section>\n    <section id=\"freelens-power-dashboard-section\" tabIndex={-1} aria-labelledby=\"freelens-power-dashboard-title\">\n      <h3 id=\"freelens-power-dashboard-title\">\n        <Renderer.Component.Icon material=\"dashboard\" size={20} /> Dashboard\n      </h3>\n      <DashboardPreferences />\n    </section>\n  </div>\n);\n"],"mappings":"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"}

package/out/renderer/resource-relationships.css.js

@@ -0,0 +1,7 @@
+//#region src/renderer/resource-relationships.css.ts
+var resourceRelationshipsStyles = `
+.power-relationships{height:100%;overflow:auto;box-sizing:border-box;min-width:0;padding:24px;max-width:1550px;margin:auto;color:var(--textColorPrimary)}.power-relationships h2{margin:0}.power-relationships .page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}.power-relationships .intro{color:var(--textColorSecondary);max-width:900px;line-height:1.6}.power-relationships .controls{display:flex;gap:24px;align-items:end;flex-wrap:wrap;margin:24px 0}.power-relationships .control{min-width:200px;flex:1;max-width:340px}.power-relationships .control>span{display:block;font-size:12px;margin-bottom:8px;color:var(--textColorSecondary)}.power-relationships button{min-height:32px;cursor:pointer}.power-relationships .refresh{background:transparent;border:1px solid var(--borderColor);border-radius:5px;padding:5px 10px;color:var(--textColorPrimary);display:flex;align-items:center;gap:8px}.power-relationships .notice{padding:14px 16px;background:var(--contentColor);border:1px solid var(--borderColor);border-radius:7px;margin:16px 0;line-height:1.6}.power-relationships .warning{color:var(--colorWarning)}.power-relationships .healthy{color:var(--colorOk)}.power-relationships .neutral{color:var(--textColorSecondary)}.power-relationships .graph-scroll{min-width:0;max-width:100%;overflow:auto;margin-top:24px}.power-relationships .graph{min-width:1000px;display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));column-gap:64px;row-gap:16px;position:relative;padding:6px 2px 56px}.power-relationships .graph.hide-upstreams{min-width:740px;grid-template-columns:repeat(3,minmax(180px,1fr))}.power-relationships .graph-option{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:32px;padding:5px 10px;border:1px solid var(--borderColor);border-radius:5px;background:transparent;color:var(--textColorPrimary);font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}.power-relationships .graph-option[aria-pressed="true"]{background:color-mix(in srgb,var(--primary) 14%,var(--contentColor));border-color:var(--primary);color:var(--primary)}.power-relationships .graph-option:hover,.power-relationships .refresh:hover{background:color-mix(in srgb,var(--primary) 10%,var(--contentColor))}.power-relationships .graph-option:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.power-relationships .column{position:relative;min-width:0;display:grid;grid-row:1/-1;grid-template-rows:subgrid}.power-relationships .column>h3{font-size:13px;margin:0;color:var(--textColorSecondary);font-weight:500}.power-relationships .card{background:var(--contentColor);border:1px solid var(--borderColor);border-radius:8px;padding:14px;margin:0;position:relative;z-index:1;overflow-wrap:anywhere}.power-relationships .card-kind{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--textColorSecondary);margin-bottom:6px}.power-relationships .resource-name{font-size:14px;font-weight:600;color:var(--textColorPrimary);text-align:left;background:transparent;border:0;padding:0;max-width:100%}.power-relationships .resource-name:hover{color:var(--primary)}.power-relationships .card p{font-size:12px;line-height:1.5;margin:6px 0 0}.power-relationships .relation-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--textColorSecondary);margin-bottom:6px}.power-relationships .resource-connections{position:absolute;inset:0;overflow:visible;pointer-events:none;color:var(--textColorSecondary)}.power-relationships .connection{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;opacity:.55;transition:opacity .15s,stroke .15s,stroke-width .15s}.power-relationships .connection.highlighted{opacity:1;stroke:var(--primary);stroke-width:2.5}.power-relationships .connection.dimmed{opacity:.12}.power-relationships .scope{max-width:68ch;margin-top:8px;color:var(--textColorSecondary);font-size:12px;line-height:1.6}.power-relationships .scope>span{display:block;margin-top:3px}.power-relationships details{margin-top:16px}.power-relationships summary{cursor:pointer;min-height:32px}.power-relationships .edge-list{columns:2;line-height:1.7;font-size:12px;list-style:none;padding:0}.power-relationships .empty{padding:28px;border:1px dashed var(--borderColor);border-radius:8px;color:var(--textColorSecondary);text-align:center}.power-relationships .relationship-summary{padding:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}.power-relationships .ports{margin-left:auto;justify-content:flex-end;display:flex;gap:12px;flex-wrap:wrap;font-size:12px}.power-relationships .ports span{padding:4px 8px;border-radius:4px;background:var(--contentColor);border:1px solid var(--borderColor)}@media(max-width:900px){.power-relationships{padding:16px}.power-relationships .controls{gap:16px}.power-relationships .edge-list{columns:1}}`;
+//#endregion
+exports.resourceRelationshipsStyles = resourceRelationshipsStyles;
+
+//# sourceMappingURL=resource-relationships.css.js.map

package/out/renderer/resource-relationships.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-relationships.css.js","names":[],"sources":["../../src/renderer/resource-relationships.css.ts"],"sourcesContent":["export const resourceRelationshipsStyles = `\n.power-relationships{height:100%;overflow:auto;box-sizing:border-box;min-width:0;padding:24px;max-width:1550px;margin:auto;color:var(--textColorPrimary)}.power-relationships h2{margin:0}.power-relationships .page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}.power-relationships .intro{color:var(--textColorSecondary);max-width:900px;line-height:1.6}.power-relationships .controls{display:flex;gap:24px;align-items:end;flex-wrap:wrap;margin:24px 0}.power-relationships .control{min-width:200px;flex:1;max-width:340px}.power-relationships .control>span{display:block;font-size:12px;margin-bottom:8px;color:var(--textColorSecondary)}.power-relationships button{min-height:32px;cursor:pointer}.power-relationships .refresh{background:transparent;border:1px solid var(--borderColor);border-radius:5px;padding:5px 10px;color:var(--textColorPrimary);display:flex;align-items:center;gap:8px}.power-relationships .notice{padding:14px 16px;background:var(--contentColor);border:1px solid var(--borderColor);border-radius:7px;margin:16px 0;line-height:1.6}.power-relationships .warning{color:var(--colorWarning)}.power-relationships .healthy{color:var(--colorOk)}.power-relationships .neutral{color:var(--textColorSecondary)}.power-relationships .graph-scroll{min-width:0;max-width:100%;overflow:auto;margin-top:24px}.power-relationships .graph{min-width:1000px;display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));column-gap:64px;row-gap:16px;position:relative;padding:6px 2px 56px}.power-relationships .graph.hide-upstreams{min-width:740px;grid-template-columns:repeat(3,minmax(180px,1fr))}.power-relationships .graph-option{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:32px;padding:5px 10px;border:1px solid var(--borderColor);border-radius:5px;background:transparent;color:var(--textColorPrimary);font:inherit;cursor:pointer;transition:background-color .15s,border-color .15s}.power-relationships .graph-option[aria-pressed=\"true\"]{background:color-mix(in srgb,var(--primary) 14%,var(--contentColor));border-color:var(--primary);color:var(--primary)}.power-relationships .graph-option:hover,.power-relationships .refresh:hover{background:color-mix(in srgb,var(--primary) 10%,var(--contentColor))}.power-relationships .graph-option:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.power-relationships .column{position:relative;min-width:0;display:grid;grid-row:1/-1;grid-template-rows:subgrid}.power-relationships .column>h3{font-size:13px;margin:0;color:var(--textColorSecondary);font-weight:500}.power-relationships .card{background:var(--contentColor);border:1px solid var(--borderColor);border-radius:8px;padding:14px;margin:0;position:relative;z-index:1;overflow-wrap:anywhere}.power-relationships .card-kind{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--textColorSecondary);margin-bottom:6px}.power-relationships .resource-name{font-size:14px;font-weight:600;color:var(--textColorPrimary);text-align:left;background:transparent;border:0;padding:0;max-width:100%}.power-relationships .resource-name:hover{color:var(--primary)}.power-relationships .card p{font-size:12px;line-height:1.5;margin:6px 0 0}.power-relationships .relation-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--textColorSecondary);margin-bottom:6px}.power-relationships .resource-connections{position:absolute;inset:0;overflow:visible;pointer-events:none;color:var(--textColorSecondary)}.power-relationships .connection{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;opacity:.55;transition:opacity .15s,stroke .15s,stroke-width .15s}.power-relationships .connection.highlighted{opacity:1;stroke:var(--primary);stroke-width:2.5}.power-relationships .connection.dimmed{opacity:.12}.power-relationships .scope{max-width:68ch;margin-top:8px;color:var(--textColorSecondary);font-size:12px;line-height:1.6}.power-relationships .scope>span{display:block;margin-top:3px}.power-relationships details{margin-top:16px}.power-relationships summary{cursor:pointer;min-height:32px}.power-relationships .edge-list{columns:2;line-height:1.7;font-size:12px;list-style:none;padding:0}.power-relationships .empty{padding:28px;border:1px dashed var(--borderColor);border-radius:8px;color:var(--textColorSecondary);text-align:center}.power-relationships .relationship-summary{padding:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}.power-relationships .ports{margin-left:auto;justify-content:flex-end;display:flex;gap:12px;flex-wrap:wrap;font-size:12px}.power-relationships .ports span{padding:4px 8px;border-radius:4px;background:var(--contentColor);border:1px solid var(--borderColor)}@media(max-width:900px){.power-relationships{padding:16px}.power-relationships .controls{gap:16px}.power-relationships .edge-list{columns:1}}`;\n"],"mappings":";AAAA,IAAa,8BAA8B"}