@jjlmoya/utils-home 1.16.0 → 1.23.0

package/src/tool/tariffComparator/i18n/nl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'energietarief-vergelijker';
 const title = 'Energietarief Vergelijker: Vast vs. Variabel';
@@ -77,12 +78,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Veelgestelde Vragen',
   faq: faqData,
-  bibliographyTitle: 'Referenties',
-  bibliography: [
-    { name: 'ACM ConsuWijzer', url: 'https://www.consuwijzer.nl' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/pl.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'porownanie-taryf-pradu';
 const title = 'Porównywarka Taryf Prądu: Rynek Wolny vs Regulowany';
@@ -21,7 +22,7 @@ const faqData = [
   {
     question: 'Co to jest moc umowna?',
     answer:
-      'To maksymalna ilość energii (kW), jaką możesz pobierać jednocześnie. W domach standard to 12.5–16 kW.',
+      'To maksymalna ilość energii (kW), jaką możesz pobierać jednocześnie. W domach standard to 12.5-16 kW.',
   },
 ];
 
@@ -77,12 +78,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Często Zadawane Pytania',
   faq: faqData,
-  bibliographyTitle: 'Bibliografia',
-  bibliography: [
-    { name: 'URE — Urząd Regulacji Energetyki', url: 'https://www.ure.gov.pl' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/pt.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'comparador-tarifas-eletricidade';
 const title = 'Comparador de Tarifas de Eletricidade: Mercado Livre vs Regulado';
@@ -77,12 +78,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Perguntas Frequentes',
   faq: faqData,
-  bibliographyTitle: 'Bibliografia',
-  bibliography: [
-    { name: 'ERSE — Simulador de Preços', url: 'https://www.erse.pt' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/ru.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'sravnenie-tarifov-elektrichestva';
 const title = 'Сравнение тарифов ЖКХ: Свободный vs Регулируемый';
@@ -59,12 +60,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Часто задаваемые вопросы',
   faq: faqData,
-  bibliographyTitle: 'Библиография',
-  bibliography: [
-    { name: 'Федеральная антимонопольная служба — Тарифы', url: 'https://fas.gov.ru' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/sv.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'jamfor-deltra-priser';
 const title = 'Jämför Elavtal: Rörligt vs Fast Pris';
@@ -64,12 +65,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Vanliga Frågor',
   faq: faqData,
-  bibliographyTitle: 'Referenser',
-  bibliography: [
-    { name: 'Energimarknadsinspektionen', url: 'https://www.ei.se' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/tr.ts

@@ -1,6 +1,7 @@
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
 
 const slug = 'elektrik-tarifesi-karsilastirma';
 const title = 'Elektrik Tarifesi Karşılaştırıcı: Sabit vs Değişken';
@@ -77,12 +78,8 @@ export const content: ToolLocaleContent<TariffComparatorUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Sıkça Sorulan Sorular',
   faq: faqData,
-  bibliographyTitle: 'Kaynakça',
-  bibliography: [
-    { name: 'EPDK — Enerji Piyasası Düzenleme Kurumu', url: 'https://www.epdk.gov.tr' },
-  ],
+  bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/tariffComparator/i18n/zh.ts

@@ -1,133 +1,130 @@
-import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
-import type { ToolLocaleContent } from '../../../types';
-import type { TariffComparatorUI } from '../ui';
-
-const slug = 'electricity-tariff-comparator';
-const title = '电费套餐对比：自由市场 vs 监管市场';
-const description =
-  '了解哪种电费套餐最适合您。根据您的实际用电量对比自由市场套餐与监管市场套餐。';
-
-const faqData = [
-  {
-    question: '固定价格和动态价格哪个更好？',
-    answer:
-      '固定价格提供可预测性。动态价格（如监管市场）在发电量充沛时可能极低，但存在波动风险。本计算器可帮您做出选择。',
-  },
-  {
-    question: '如何获取我的年用电量？',
-    answer:
-      '您可以在最新的电费账单中找到“年用电量”(kWh) 这一数值。',
-  },
-  {
-    question: '什么是合同功率？',
-    answer:
-      '指您可以同时使用的最大电力负荷 (kW)。',
-  },
-];
-
-const howToData = [
-  {
-    name: '查看账单',
-    text: '查找年用电量 (kWh) 和合同功率 (kW)。',
-  },
-  {
-    name: '调整数值',
-    text: '根据您的实际数据调节滑块。',
-  },
-  {
-    name: '对比结果',
-    text: '查看两种模式下的预估年支出差异。',
-  },
-];
-
-const faqSchema: WithContext<FAQPage> = {
-  '@context': 'https://schema.org',
-  '@type': 'FAQPage',
-  mainEntity: faqData.map((item) => ({
-    '@type': 'Question',
-    name: item.question,
-    acceptedAnswer: { '@type': 'Answer', text: item.answer },
-  })),
-};
-
-const howToSchema: WithContext<HowTo> = {
-  '@context': 'https://schema.org',
-  '@type': 'HowTo',
-  name: title,
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { TariffComparatorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'electricity-tariff-comparator';
+const title = '电费套餐对比：自由市场 vs 监管市场';
+const description =
+  '了解哪种电费套餐最适合您。根据您的实际用电量对比自由市场套餐与监管市场套餐。';
+
+const faqData = [
+  {
+    question: '固定价格和动态价格哪个更好？',
+    answer:
+      '固定价格提供可预测性。动态价格（如监管市场）在发电量充沛时可能极低，但存在波动风险。本计算器可帮您做出选择。',
+  },
+  {
+    question: '如何获取我的年用电量？',
+    answer:
+      '您可以在最新的电费账单中找到"年用电量"(kWh) 这一数值。',
+  },
+  {
+    question: '什么是合同功率？',
+    answer:
+      '指您可以同时使用的最大电力负荷 (kW)。',
+  },
+];
+
+const howToData = [
+  {
+    name: '查看账单',
+    text: '查找年用电量 (kWh) 和合同功率 (kW)。',
+  },
+  {
+    name: '调整数值',
+    text: '根据您的实际数据调节滑块。',
+  },
+  {
+    name: '对比结果',
+    text: '查看两种模式下的预估年支出差异。',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
+  inLanguage: 'zh',
+};
+
+export const content: ToolLocaleContent<TariffComparatorUI> = {
+  slug,
+  title,
   description,
-  step: howToData.map((step) => ({
-    '@type': 'HowToStep',
-    name: step.name,
-    text: step.text,
-  })),
-};
-
-const appSchema: WithContext<SoftwareApplication> = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
-  name: title,
-  description,
-  applicationCategory: 'UtilityApplication',
-  operatingSystem: 'All',
-  offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
-  inLanguage: 'zh',
-};
-
-export const content: ToolLocaleContent<TariffComparatorUI> = {
-  slug,
-  title,
-  description,
-  faqTitle: '常见问题',
-  faq: faqData,
-  bibliographyTitle: '参考资料',
-  bibliography: [
-    { name: '能源监管部门官方指南', url: 'https://www.nea.gov.cn' },
-  ],
-  howTo: howToData,
-  schemas: [faqSchema, howToSchema, appSchema],
-  seo: [
-    {
-      type: 'title',
-      text: '节省您的电力开支',
-      level: 2,
-    },
-    {
-      type: 'paragraph',
-      html: '选择合适的套餐每年可节省数百元。利用我们的对比工具做出决定。',
-    },
-    {
-      type: 'summary',
-      title: '省钱策略',
-      items: [
-        '定期对比市场上的新套餐。',
-        '合理设定合同功率，避免不必要的月租费。',
-        '尽量将大功率用电安排在低谷时段。',
-      ],
-    },
-  ],
-  ui: {
-    labelConsumption: '年用电量',
-    unitKwhYear: 'kWh/年',
-    labelPower: '合同功率',
-    unitKw: 'kW',
-    labelMarket: '监管市场 (动态)',
-    labelFree: '自由市场 (固定)',
-    labelAnnualEst: '预估年支出',
-    labelPowerTerm: '功率费 (固定)',
-    labelEnergyTerm: '电费 (变量)',
-    labelDashboard: '能源面板',
-    labelMaxPower: '峰值功率',
-    labelMaxPowerEst: '预估峰值',
-    labelCo2: '碳足迹',
-    labelCo2Est: '预估年排放量',
-    labelSimulator: '方案模拟器',
-    labelSolar: '太阳能自用',
-    labelSolarDesc: '模拟安装电池板后的节省（默认减少 30% 用电）',
-    labelShift: '低谷时段转移',
-    labelShiftDesc: '转移至低谷时段的比例：',
-    badgeBetter: '更佳性价比',
-    badgeWorseYear: '年',
-    currencySign: '¥',
-    monthLabels: '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',
-  },
-};
+  faq: faqData,
+  bibliography,
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '节省您的电力开支',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '选择合适的套餐每年可节省数百元。利用我们的对比工具做出决定。',
+    },
+    {
+      type: 'summary',
+      title: '省钱策略',
+      items: [
+        '定期对比市场上的新套餐。',
+        '合理设定合同功率，避免不必要的月租费。',
+        '尽量将大功率用电安排在低谷时段。',
+      ],
+    },
+  ],
+  ui: {
+    labelConsumption: '年用电量',
+    unitKwhYear: 'kWh/年',
+    labelPower: '合同功率',
+    unitKw: 'kW',
+    labelMarket: '监管市场 (动态)',
+    labelFree: '自由市场 (固定)',
+    labelAnnualEst: '预估年支出',
+    labelPowerTerm: '功率费 (固定)',
+    labelEnergyTerm: '电费 (变量)',
+    labelDashboard: '能源面板',
+    labelMaxPower: '峰值功率',
+    labelMaxPowerEst: '预估峰值',
+    labelCo2: '碳足迹',
+    labelCo2Est: '预估年排放量',
+    labelSimulator: '方案模拟器',
+    labelSolar: '太阳能自用',
+    labelSolarDesc: '模拟安装电池板后的节省（默认减少 30% 用电）',
+    labelShift: '低谷时段转移',
+    labelShiftDesc: '转移至低谷时段的比例：',
+    badgeBetter: '更佳性价比',
+    badgeWorseYear: '年',
+    currencySign: '¥',
+    monthLabels: '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',
+  },
+};

package/src/tool/tariffComparator/seo.astro

@@ -11,4 +11,5 @@ const { locale = 'es' } = Astro.props;
 const content = await tariffComparator.i18n[locale]?.();
 if (!content) return null;
 ---
-<SEORenderer content={{ locale: locale as string, sections: content.seo }} />
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/wifiRangeSimulator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { wifiRangeSimulator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await wifiRangeSimulator.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/wifiRangeSimulator/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'Cisco: Wi-Fi RF Principles and Signal Attenuation (2023)',
+    url: 'https://learningnetwork.cisco.com/s/article/wi-fi-7-rf-planning-principles-and-deployment-best-practices',
+  },
+  {
+    name: 'University of Kansas: Building Material Impact on Wi-Fi Signal (2022)',
+    url: 'https://www.researchgate.net/publication/380627539_Experimental_Assessment_of_the_Effects_of_Building_Materials_on_Wi-Fi_Signal_24_GHz_and_5_GHz',
+  },
+  {
+    name: 'IEEE 802.11 Wireless Standard: Physical Layer Specifications (2021)',
+    url: 'https://standards.ieee.org/ieee/802.11ax/7180/',
+  },
+];

package/src/tool/wifiRangeSimulator/component.astro

@@ -0,0 +1,170 @@
+---
+import type { WifiRangeSimulatorUI } from './ui';
+import type { Point } from './logic';
+import { calculateSignalFromSketch, getVerdictColor } from './logic';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const wUI = ui as WifiRangeSimulatorUI;
+
+const circumference = 2 * Math.PI * 70;
+const initialRouter: Point = { x: 150, y: 250 };
+const initialDevice: Point = { x: 400, y: 250 };
+const initialResult = calculateSignalFromSketch(initialRouter, initialDevice, [], []);
+---
+
+<div class="sketch-wrapper">
+  <div class="sketch-card">
+    <div class="sketch-toolbar" id="sketch-toolbar">
+      <div class="sketch-tool-group">
+        <button class="sketch-tool active" data-tool="select" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>
+          <span>{wUI.labelMove}</span>
+        </button>
+      </div>
+      <div class="sketch-tool-sep" />
+      <div class="sketch-tool-group">
+        <span class="sketch-tool-section-label">{wUI.labelWalls}</span>
+        <button class="sketch-tool" data-tool="drywall" type="button"><span class="sketch-tool-swatch" style="background:#e7e5e4" /><span>{wUI.labelDrywall}</span></button>
+        <button class="sketch-tool" data-tool="brick" type="button"><span class="sketch-tool-swatch" style="background:#a16207" /><span>{wUI.labelBrick}</span></button>
+        <button class="sketch-tool" data-tool="concrete" type="button"><span class="sketch-tool-swatch" style="background:#57534e" /><span>{wUI.labelConcrete}</span></button>
+        <button class="sketch-tool" data-tool="stoneWall" type="button"><span class="sketch-tool-swatch" style="background:#44403c" /><span>{wUI.labelStone}</span></button>
+      </div>
+      <div class="sketch-tool-sep" />
+      <div class="sketch-tool-group">
+        <span class="sketch-tool-section-label">{wUI.labelObjects}</span>
+        <button class="sketch-tool" data-tool="woodDoor" type="button"><span class="sketch-tool-swatch" style="background:#92400e" /><span>{wUI.labelWood}</span></button>
+        <button class="sketch-tool" data-tool="metalDoor" type="button"><span class="sketch-tool-swatch" style="background:#334155" /><span>{wUI.labelMetal}</span></button>
+        <button class="sketch-tool" data-tool="window" type="button"><span class="sketch-tool-swatch" style="background:#bfdbfe" /><span>{wUI.labelWindow}</span></button>
+        <button class="sketch-tool" data-tool="fridge" type="button"><span class="sketch-tool-swatch" style="background:#94a3b8" /><span>{wUI.labelFridge}</span></button>
+        <button class="sketch-tool" data-tool="aquarium" type="button"><span class="sketch-tool-swatch" style="background:#0ea5e9" /><span>{wUI.labelFish}</span></button>
+        <button class="sketch-tool" data-tool="microwave" type="button"><span class="sketch-tool-swatch" style="background:#475569" /><span>{wUI.labelMicro}</span></button>
+        <button class="sketch-tool" data-tool="mirror" type="button"><span class="sketch-tool-swatch" style="background:#c0c0c0" /><span>{wUI.labelMirror}</span></button>
+        <button class="sketch-tool" data-tool="furniture" type="button"><span class="sketch-tool-swatch" style="background:#78350f" /><span>{wUI.labelFurn}</span></button>
+      </div>
+      <div class="sketch-tool-sep" />
+      <div class="sketch-tool-group">
+        <span class="sketch-tool-section-label">{wUI.labelActions}</span>
+        <button class="sketch-tool" data-tool="undo" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>
+          <span>{wUI.labelUndo}</span>
+        </button>
+        <button class="sketch-tool" data-tool="addDevice" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="14" rx="2"/><line x1="12" y1="8" x2="12" y2="14"/><line x1="9" y1="11" x2="15" y2="11"/></svg>
+          <span>{wUI.labelAddDevice}</span>
+        </button>
+        <button class="sketch-tool sketch-tool-danger" data-tool="clearWalls" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+          <span>{wUI.labelClearWalls}</span>
+        </button>
+        <button class="sketch-tool sketch-tool-danger" data-tool="clearObjects" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+          <span>{wUI.labelClearObjects}</span>
+        </button>
+        <button class="sketch-tool sketch-tool-danger" data-tool="clear" type="button">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+          <span>{wUI.labelClearAll}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="sketch-body">
+      <div class="sketch-canvas-wrap" id="sketch-canvas-wrap">
+        <div class="sketch-world" id="sketch-world">
+          <svg class="sketch-svg" id="sketch-svg" viewBox="0 0 800 500" width="800" height="500">
+            <defs>
+              <pattern id="sketch-grid" width="20" height="20" patternUnits="userSpaceOnUse">
+                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="var(--sketch-grid-color)" stroke-width="0.5" />
+              </pattern>
+            </defs>
+            <rect width="800" height="500" fill="url(#sketch-grid)" />
+            <g id="sketch-walls-layer" />
+            <g id="sketch-objs-layer" />
+            <g id="sketch-rays-layer" style="pointer-events:none" />
+            <g id="sketch-router-group" transform={`translate(${initialRouter.x}, ${initialRouter.y})`} style="cursor:grab">
+              <circle id="sketch-router-glow" cx="0" cy="0" r="28" fill="none" stroke={getVerdictColor(initialResult.verdict)} stroke-width="2" opacity="0.3" />
+              <rect x="-16" y="-16" width="32" height="32" rx="8" fill="var(--bg-surface)" stroke="var(--border-color)" stroke-width="1" />
+              <svg x="-10" y="-10" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={getVerdictColor(initialResult.verdict)} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20h.01" /><path d="M2 8.82a15 15 0 0 1 20 0" /><path d="M5 12.859a10 10 0 0 1 14 0" /><path d="M8.5 16.429a5 5 0 0 1 7 0" />
+              </svg>
+              <text x="0" y="28" text-anchor="middle" fill="var(--text-muted)" font-size="8" font-weight="700">{wUI.labelRouter}</text>
+            </g>
+            <line id="sketch-draw-line" x1="0" y1="0" x2="0" y2="0" stroke="#0ea5e9" stroke-width="3" stroke-dasharray="6 4" opacity="0" pointer-events="none" />
+          </svg>
+        </div>
+        <div class="sketch-zoom-controls">
+          <button class="sketch-zoom-btn" data-tool="zoomIn" type="button" title={wUI.labelZoomIn}>+</button>
+          <button class="sketch-zoom-btn" data-tool="zoomOut" type="button" title={wUI.labelZoomOut}>−</button>
+        </div>
+        <div class="sketch-scale-bar" id="sketch-scale-bar">
+          <div class="sketch-scale-track" id="sketch-scale-track">
+            <div class="sketch-scale-segment dark" />
+            <div class="sketch-scale-segment light" />
+            <div class="sketch-scale-segment dark" />
+            <div class="sketch-scale-segment light" />
+            <div class="sketch-scale-segment dark" />
+          </div>
+          <div class="sketch-scale-labels">
+            <span class="sketch-scale-label">0</span>
+            <span class="sketch-scale-label end">{wUI.labelScaleMeters}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="sketch-panel">
+        <div class="sketch-avg-label">{wUI.labelAverageSignal}</div>
+        <div class="sketch-ring" id="sketch-ring">
+          <svg viewBox="0 0 160 160" width="120" height="120">
+            <circle class="sketch-ring-bg" cx="80" cy="80" r="70" />
+            <circle
+              class="sketch-ring-fill"
+              id="sketch-ring-fill"
+              cx="80"
+              cy="80"
+              r="70"
+              stroke-dasharray={circumference}
+              stroke-dashoffset={circumference - (circumference * initialResult.strengthPercent) / 100}
+              stroke={getVerdictColor(initialResult.verdict)}
+            />
+          </svg>
+          <div class="sketch-ring-inner">
+            <div class="sketch-ring-pct" id="sketch-ring-pct" style={`color:${getVerdictColor(initialResult.verdict)}`}>{initialResult.strengthPercent}%</div>
+            <div class="sketch-ring-label">{wUI.labelSignalStrength}</div>
+          </div>
+        </div>
+        <div class="sketch-range"><span class="sketch-range-val" id="sketch-range-val">{initialResult.effectiveRange} {wUI.labelMeters}</span></div>
+        <div class="sketch-streams">
+          <span class="sketch-streams-title">{wUI.labelStreamingVerdict}</span>
+          {[
+            { key: '4kStreaming', label: wUI.label4kStreaming },
+            { key: 'onlineGaming', label: wUI.labelOnlineGaming },
+            { key: 'videoCalls', label: wUI.labelVideoCalls },
+            { key: 'basicBrowsing', label: wUI.labelBasicBrowsing },
+          ].map((item) => (
+            <div class="sketch-stream-row">
+              <span class="sketch-stream-name">{item.label}</span>
+              <span class="sketch-stream-badge" id={`sketch-badge-${item.key}`}>{initialResult.streamingVerdict[item.key]}</span>
+            </div>
+          ))}
+        </div>
+        <div class="sketch-device-panel" id="sketch-device-panel" />
+        <div class="sketch-tip-area" id="sketch-tip-area" />
+      </div>
+    </div>
+
+    <div class="sketch-hint" id="sketch-hint">{wUI.hintText}</div>
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__wifiUI = ui;
+</script>
+
+<script>
+  import { initSketch } from './sketch';
+  document.addEventListener('astro:page-load', initSketch);
+  initSketch();
+</script>