dsh-niuma 0.1.1 → 0.2.0

package/src/client/index.js

@@ -5,9 +5,16 @@ import {
   earnedToday,
   formatDuration,
   formatMoney,
+  monthSummary,
   normalizeConfig,
+  yearSummary,
 } from '../core.mjs';
-import { HOLIDAY_SOURCE } from '../holidays.mjs';
+import {
+  HOLIDAY_BLOCKS,
+  HOLIDAY_BLOCKS_2027_ESTIMATED,
+  HOLIDAY_ESTIMATE_2027,
+  HOLIDAY_SOURCE,
+} from '../holidays.mjs';
 
 /**
  * dsh-niuma 浏览器半侧：DSH 侧栏「牛马」入口 + 中栏工资实时计数器面板。
@@ -58,6 +65,17 @@ const CARD = {
 /** 数字：等宽数位 + 不换行（每秒跳动时宽度不抖）。 */
 const NUM = { fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' };
 
+/** 金色金额：渐变金属质感 + 单色回退（不支持 background-clip:text 时显示金色）。 */
+const GOLD = {
+  color: '#D9A441',
+  backgroundImage: 'linear-gradient(180deg, #FFE9A8 0%, #F2C14E 40%, #D79A2B 72%, #B87A16 100%)',
+  WebkitBackgroundClip: 'text',
+  backgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  textShadow: '0 1px 0 rgba(0,0,0,.05)',
+};
+const GOLD_TINT = '#E7B84D';
+
 /** 状态徽标配色：颜色与语义一致，深浅色都靠主题变量。 */
 const STATUS_META = {
   rest: { key: 'statusRest', color: C.label3 },
@@ -98,7 +116,6 @@ const zh = {
   'paidHoursPerDay': '日有效工时',
   'todayTarget': '今日目标',
   'monthEarned': '本月已赚',
-  'holidaySource': '节假日来源',
   'holidaySourceLink': '国务院办公厅 2026 年节假日安排',
   'configLoading': '正在读取设置…',
   'configFailed': '设置读取失败，使用默认值',
@@ -112,14 +129,54 @@ const zh = {
   'lunchStartField': '午休开始',
   'lunchEndField': '午休结束',
   'lunchPaidField': '午休算工时',
-  'holidaysField': '节假日（一行一个 YYYY-MM-DD）',
-  'extraWorkdaysField': '调休上班日（一行一个 YYYY-MM-DD）',
+  'holidaysCardTitle': '节假日安排',
+  'holidays2026Label': '2026 年（官方）',
+  'holidays2027Label': '2027 年（预估）',
+  'holidayEstimateTag': '预估',
+  'holidayEstimateNote': '官方尚未公布，以上为按规则与惯例推算，仅供参考，以国务院通知为准。',
+  'holidayEstimateShort': '2027 为预估值',
+  'settingsDataNote': '节假日与调休数据见上方「节假日安排」卡片（2027 年为预估值，不可在本页编辑）。',
+
+  'holidaysCardSub': '法定假日 {days} 天 · 调休上班 {extra} 天',
+  'holidaysDaysShort': '{days} 天',
+  'holidaysExtraNote': '调休上班日 {extra} 天（周末补班，按工作日计）',
+  'holidayNewYear': '元旦',
+  'holidaySpring': '春节',
+  'holidayQingming': '清明',
+  'holidayLabour': '劳动节',
+  'holidayDragon': '端午',
+  'holidayMidAutumn': '中秋',
+  'holidayNational': '国庆',
   'save': '保存',
   'saving': '保存中…',
   'saved': '已保存',
   'saveFailed': '保存失败：',
   'dayUnit': '天',
   'hourUnit': '小时',
+  'viewLabel': '查看',
+  'viewCurrent': '本月',
+  'viewYear': '全年平均',
+  'monthUnit': '月',
+  'holidayShort': '假',
+  'currentHint': '按每月 {days} 个工作日、每天 {hours} 小时计',
+  'monthHint': '{year} 年 {month} 月 · 工作日 {workdays} 天 · 法定假日 {holidays} 天',
+  'yearHint': '{year} 全年 · {workdays} 个工作日 · 按年收入折算',
+  'viewOnlyHint': '仅换算，不影响今日计数器',
+  'yearWorkdays': '全年工作日',
+  'yearIncome': '全年收入',
+  'averageDaily': '平均日薪',
+  'averageHourly': '平均时薪',
+  'averageMinute': '平均分薪',
+  'averageSecond': '平均秒薪',
+  'monthWorkdaysCard': '工作日',
+  'maxHolidayBadge': '全年假日最多',
+  'maxHolidayNote': '全年假日最多：{month} 月（法定假日 {days} 天）',
+  'maxHolidayThis': '全年假日最多的月份（法定假日 {days} 天）',
+  'sectionRates': '工资换算',
+  'sectionRatesHint': '按每月 {days} 个工作日、每天 {hours} 小时计',
+  'sectionDetail': '今日口径明细',
+  'restHint': '今天休息，好好躺平',
+  'liveNow': '实时',
 };
 
 const en = {
@@ -150,7 +207,6 @@ const en = {
   'paidHoursPerDay': 'Paid hours / day',
   'todayTarget': "Today's target",
   'monthEarned': 'Earned this month',
-  'holidaySource': 'Holiday data',
   'holidaySourceLink': 'State Council 2026 holiday schedule',
   'configLoading': 'Loading settings…',
   'configFailed': 'Failed to load settings, using defaults',
@@ -164,14 +220,54 @@ const en = {
   'lunchStartField': 'Lunch start',
   'lunchEndField': 'Lunch end',
   'lunchPaidField': 'Lunch is paid',
-  'holidaysField': 'Holidays (one YYYY-MM-DD per line)',
-  'extraWorkdaysField': 'Make-up workdays (one YYYY-MM-DD per line)',
+  'holidaysCardTitle': 'Holiday calendar',
+  'holidays2026Label': '2026 (official)',
+  'holidays2027Label': '2027 (estimated)',
+  'holidayEstimateTag': 'estimate',
+  'holidayEstimateNote': 'Not announced officially yet — estimated from the rules and past practice, for reference only.',
+  'holidayEstimateShort': '2027 is estimated',
+  'settingsDataNote': 'Holiday data lives in the calendar card above (2027 values are estimates and not editable here).',
+
+  'holidaysCardSub': '{days} statutory days · {extra} make-up workdays',
+  'holidaysDaysShort': '{days} d',
+  'holidaysExtraNote': '{extra} make-up workdays (weekend shifts, counted as workdays)',
+  'holidayNewYear': "New Year's Day",
+  'holidaySpring': 'Spring Festival',
+  'holidayQingming': 'Qingming',
+  'holidayLabour': 'Labour Day',
+  'holidayDragon': 'Dragon Boat',
+  'holidayMidAutumn': 'Mid-Autumn',
+  'holidayNational': 'National Day',
   'save': 'Save',
   'saving': 'Saving…',
   'saved': 'Saved',
   'saveFailed': 'Save failed: ',
   'dayUnit': 'd',
   'hourUnit': 'h',
+  'viewLabel': 'View',
+  'viewCurrent': 'This month',
+  'viewYear': 'Year average',
+  'monthUnit': 'M',
+  'holidayShort': 'hol.',
+  'currentHint': '{days} workdays / month · {hours} h / day',
+  'monthHint': '{year}-{month} · {workdays} workdays · {holidays} statutory holidays',
+  'yearHint': '{year} · {workdays} workdays · averaged over the year',
+  'viewOnlyHint': 'Conversion only — today\'s ticker is unaffected',
+  'yearWorkdays': 'Workdays / year',
+  'yearIncome': 'Annual income',
+  'averageDaily': 'Avg per day',
+  'averageHourly': 'Avg per hour',
+  'averageMinute': 'Avg per minute',
+  'averageSecond': 'Avg per second',
+  'monthWorkdaysCard': 'Workdays',
+  'maxHolidayBadge': 'Most holidays',
+  'maxHolidayNote': 'Most holidays: month {month} ({days} statutory days)',
+  'maxHolidayThis': 'The month with the most holidays ({days} statutory days)',
+  'sectionRates': 'Pay rates',
+  'sectionRatesHint': '{days} workdays / month · {hours} h / day',
+  'sectionDetail': "Today's basis",
+  'restHint': 'Day off — enjoy it',
+  'liveNow': 'LIVE',
 };
 
 /** 组件在没有 locale 注入 t 时（测试 / 兜底）直接读中文表，绝不白屏。 */
@@ -180,7 +276,7 @@ const fallbackTranslate = (key) => (zh[key] != null ? zh[key] : key);
 /* ------------------------------------------------------------------ *
  * 格式化小工具
  * ------------------------------------------------------------------ */
-const money = (value, digits = 2) => `¥${formatMoney(value, digits)}`;
+const money = (value, digits = 2) => `${formatMoney(value, digits)} 元`;
 
 /** 8.00 -> '8'，8.50 -> '8.5'（工时展示用） */
 function trimNumber(value, digits = 2) {
@@ -188,13 +284,6 @@ function trimNumber(value, digits = 2) {
   return fixed.replace(/\.?0+$/, '') || '0';
 }
 
-function splitDateLines(text) {
-  return String(text == null ? '' : text)
-    .split(/\r?\n/)
-    .map((line) => line.trim())
-    .filter((line) => line.length > 0);
-}
-
 /** 配置 -> 设置表单草稿（所有输入框都是字符串 / 布尔，编辑中不打断计时）。 */
 function formFromConfig(config) {
   return {
@@ -205,8 +294,6 @@ function formFromConfig(config) {
     lunchStart: String(config.lunchStart == null ? '' : config.lunchStart),
     lunchEnd: String(config.lunchEnd == null ? '' : config.lunchEnd),
     lunchPaid: config.lunchPaid === true,
-    holidaysText: (config.holidays || []).join('\n'),
-    extraWorkdaysText: (config.extraWorkdays || []).join('\n'),
   };
 }
 
@@ -221,8 +308,6 @@ function patchFromForm(form) {
     lunchStart: String(form.lunchStart || '').trim(),
     lunchEnd: String(form.lunchEnd || '').trim(),
     lunchPaid: Boolean(form.lunchPaid),
-    holidays: splitDateLines(form.holidaysText),
-    extraWorkdays: splitDateLines(form.extraWorkdaysText),
   };
 }
 
@@ -309,137 +394,218 @@ function NiumaIcon(props) {
   ]);
 }
 
+/** 全局小样式：只放动效 keyframes（内联 style 写不了 keyframes）。组件内联样式仍是主体。 */
+const PANEL_CSS = `
+@keyframes niumaPulse { 0%,100% { opacity: .95; transform: scale(1); } 50% { opacity: .3; transform: scale(.68); } }
+@media (prefers-reduced-motion: reduce) { .niuma-live-dot { animation: none !important; } }
+`;
+
+function StyleTag() {
+  return React.createElement('style', null, PANEL_CSS);
+}
+
 /** 状态徽标：休息日 / 未上班 / 搬砖中 / 午休中 / 已下班。 */
 function StatusBadge(props) {
   const t = props.t;
   const meta = STATUS_META[props.status] || STATUS_META.rest;
+  const live = props.status === 'working';
   return React.createElement('span', {
     style: {
       display: 'inline-flex',
       alignItems: 'center',
       gap: 6,
-      padding: '3px 10px',
+      padding: '4px 11px 4px 9px',
       borderRadius: 999,
       fontSize: 12,
       fontWeight: 600,
       lineHeight: 1.5,
       color: meta.color,
-      border: `1px solid ${meta.color}`,
-      background: C.layer1,
+      border: `1px solid color-mix(in srgb, ${meta.color} 42%, transparent)`,
+      background: `color-mix(in srgb, ${meta.color} 12%, transparent)`,
       whiteSpace: 'nowrap',
     },
   }, [
     React.createElement('i', {
       key: 'dot',
+      className: live ? 'niuma-live-dot' : undefined,
       style: { width: 6, height: 6, borderRadius: '50%', background: meta.color, display: 'inline-block' },
     }),
     t(meta.key),
   ]);
 }
 
-/** 今日已赚：超大数字，每秒跳动。 */
+/** 小节标题：左标题 + 右口径提示（同一行，窄屏自动换行）。 */
+function SectionTitle(props) {
+  return React.createElement('div', {
+    style: {
+      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
+      gap: 8, flexWrap: 'wrap', margin: '2px 1px -1px',
+    },
+  }, [
+    React.createElement('span', {
+      key: 't',
+      style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: '.2px' },
+    }, props.title),
+    props.hint
+      ? React.createElement('span', { key: 'h', style: { fontSize: 10.5, color: C.label3, ...NUM } }, props.hint)
+      : null,
+  ]);
+}
+
+/** 今日已赚主卡：渐变底 + 超大金额 + 进度条（视觉焦点只有这一处）。 */
 function HeroCard(props) {
   const t = props.t;
   const snap = props.snap;
-  return React.createElement('div', { style: { ...CARD, padding: '13px 15px 12px' } }, [
+  const rates = snap.rates;
+  const progress = Math.max(0, Math.min(1, Number(snap.todayProgress) || 0));
+  const percentText = `${(progress * 100).toFixed(1)}%`;
+  const live = snap.status === 'working';
+  const rest = snap.status === 'rest';
+  const heroBackground = 'linear-gradient(135deg, '
+    + 'color-mix(in srgb, ' + C.brand + ' 17%, ' + C.layer1 + ') 0%, '
+    + C.layer1 + ' 58%, ' + C.layer1 + ' 100%)';
+  return React.createElement('div', {
+    style: {
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: 18,
+      padding: '16px 18px 14px',
+      border: `1px solid color-mix(in srgb, ${GOLD_TINT} 34%, ${C.border1})`,
+      background: heroBackground,
+      boxShadow: '0 12px 30px rgba(0,0,0,.10)',
+      boxSizing: 'border-box',
+      minWidth: 0,
+    },
+  }, [
     React.createElement('div', {
-      key: 'head',
+      key: 'glow',
+      'aria-hidden': 'true',
       style: {
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        gap: 8, flexWrap: 'wrap', fontSize: 12, color: C.label2,
+        position: 'absolute', right: -52, top: -72, width: 188, height: 188, borderRadius: '50%',
+        background: `radial-gradient(circle, color-mix(in srgb, ${GOLD_TINT} 30%, transparent) 0%, transparent 68%)`,
+        pointerEvents: 'none',
       },
+    }),
+    React.createElement('div', {
+      key: 'head',
+      style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' },
     }, [
-      React.createElement('span', { key: 'a' }, t('earnedToday')),
+      React.createElement('span', {
+        key: 'a',
+        style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, color: C.label2 },
+      }, [
+        live
+          ? React.createElement('i', {
+            key: 'dot',
+            className: 'niuma-live-dot',
+            style: { width: 7, height: 7, borderRadius: '50%', background: C.ok, display: 'inline-block' },
+          })
+          : null,
+        t('earnedToday'),
+      ]),
       React.createElement('span', { key: 'b', style: { fontSize: 11, color: C.label3, ...NUM } },
         `${t('todayOn')} ${snap.dateKey}`),
     ]),
     React.createElement('div', {
       key: 'amt',
-      style: { display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 1, flexWrap: 'wrap' },
+      style: { display: 'flex', alignItems: 'baseline', gap: 7, marginTop: 4, flexWrap: 'wrap' },
     }, [
-      React.createElement('span', {
-        key: 'cur',
-        style: { fontSize: 22, fontWeight: 700, color: C.label2, ...NUM },
-      }, '¥'),
       React.createElement('span', {
         key: 'val',
         style: {
-          fontSize: 40, lineHeight: 1.15, fontWeight: 760, letterSpacing: '-.5px',
-          color: C.ok, ...NUM,
+          fontSize: 46, lineHeight: 1.12, fontWeight: 800, letterSpacing: '-1.2px',
+          ...GOLD,
+          ...NUM,
+          ...(rest ? { opacity: 0.62 } : {}),
         },
       }, formatMoney(snap.todayEarned, 4)),
+      React.createElement('span', {
+        key: 'unit',
+        style: { fontSize: 18, fontWeight: 700, color: C.label2, ...NUM },
+      }, '元'),
     ]),
     React.createElement('div', {
-      key: 'sub',
-      style: { fontSize: 11, color: C.label3, marginTop: 2, ...NUM },
-    }, `${t('perSecond')} ${money(snap.rates.secondWage, 4)}`),
-  ]);
-}
-
-/** 今日进度条 + 距上班 / 距下班倒计时。 */
-function ProgressCard(props) {
-  const t = props.t;
-  const snap = props.snap;
-  const progress = Math.max(0, Math.min(1, Number(snap.todayProgress) || 0));
-  const percentText = `${(progress * 100).toFixed(1)}%`;
-  const countdownChip = (key, label, seconds) => React.createElement('div', {
-    key,
-    style: { ...CARD, flex: '1 1 130px', minWidth: 118, padding: '8px 10px' },
-  }, [
-    React.createElement('div', { key: 'l', style: { fontSize: 11, color: C.label3 } }, label),
-    React.createElement('div', {
-      key: 'v',
-      style: { fontSize: 14, fontWeight: 650, color: C.label, marginTop: 2, ...NUM },
-    }, Number(seconds) > 0 ? formatDuration(seconds) : '—'),
-  ]);
-  return React.createElement('div', { style: CARD }, [
-    React.createElement('div', {
-      key: 'top',
-      style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' },
+      key: 'chips',
+      style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginTop: 5, flexWrap: 'wrap' },
     }, [
-      React.createElement('span', { key: 'l', style: { fontSize: 12, color: C.label2 } }, t('todayProgress')),
       React.createElement('span', {
-        key: 'p',
-        style: { fontSize: 13, fontWeight: 650, color: C.brand, ...NUM },
-      }, percentText),
+        key: 'per',
+        style: {
+          display: 'inline-flex', alignItems: 'center', gap: 4,
+          fontSize: 11.5, fontWeight: 600, color: C.label2,
+          background: `color-mix(in srgb, ${C.brand} 11%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${C.brand} 22%, transparent)`,
+          borderRadius: 999, padding: '2px 9px', ...NUM,
+        },
+      }, `${t('perSecond')} +${money(rates.secondWage, 4)}`),
+      React.createElement('span', { key: 'target', style: { fontSize: 11, color: C.label3, ...NUM } },
+        rest ? t('restHint') : `${t('todayTarget')} ${money(snap.todayTarget, 2)}`),
+    ]),
+    React.createElement('div', {
+      key: 'progTop',
+      style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, marginTop: 13, flexWrap: 'wrap' },
+    }, [
+      React.createElement('span', { key: 'l', style: { fontSize: 11.5, color: C.label3 } }, t('todayProgress')),
+      React.createElement('span', { key: 'p', style: { fontSize: 12.5, fontWeight: 700, color: C.brand, ...NUM } }, percentText),
     ]),
     React.createElement('div', {
       key: 'bar',
-      style: {
-        marginTop: 6, height: 8, borderRadius: 999, background: C.layer2,
-        overflow: 'hidden',
-      },
+      style: { marginTop: 5, height: 9, borderRadius: 999, background: `color-mix(in srgb, ${C.label} 9%, transparent)`, overflow: 'hidden' },
     }, [
       React.createElement('div', {
         key: 'fill',
         style: {
-          width: `${(progress * 100).toFixed(2)}%`,
-          height: '100%',
-          borderRadius: 999,
-          background: C.brand,
-          transition: 'width .4s linear',
+          width: `${(progress * 100).toFixed(2)}%`, height: '100%', borderRadius: 999,
+          background: `linear-gradient(90deg, ${C.brand} 0%, color-mix(in srgb, ${C.brand} 55%, ${C.ok}) 100%)`,
+          transition: 'width .35s linear',
         },
       }),
     ]),
     React.createElement('div', {
-      key: 'nums',
-      style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, marginTop: 5, flexWrap: 'wrap', fontSize: 11, color: C.label3 },
+      key: 'progNum',
+      style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, marginTop: 5, flexWrap: 'wrap', fontSize: 10.5, color: C.label3 },
     }, [
       React.createElement('span', { key: 'a' }, t('progressOfTarget')),
-      React.createElement('span', { key: 'b', style: { ...NUM } },
+      React.createElement('span', { key: 'b', style: { color: C.label2, fontWeight: 600, ...NUM } },
         `${money(snap.todayEarned, 2)} / ${money(snap.todayTarget, 2)}`),
     ]),
-    React.createElement('div', {
-      key: 'cd',
-      style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 },
-    }, [
-      countdownChip('start', t('toStart'), snap.secondsToStart),
-      countdownChip('end', t('toEnd'), snap.secondsToEnd),
-    ]),
   ]);
 }
 
-/** 六宫格：秒 / 分 / 时 / 日 / 周 / 月工资。 */
+/** 倒计时两张小卡：距上班 / 距下班。 */
+function CountdownRow(props) {
+  const t = props.t;
+  const snap = props.snap;
+  const chip = (key, label, value, accent) => React.createElement('div', {
+    key,
+    style: {
+      flex: '1 1 120px', minWidth: 116,
+      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8,
+      padding: '9px 12px', borderRadius: 12,
+      background: accent ? `color-mix(in srgb, ${GOLD_TINT} 9%, ${C.layer1})` : C.layer1,
+      border: `1px solid ${accent ? `color-mix(in srgb, ${GOLD_TINT} 38%, ${C.border1})` : C.border1}`,
+      boxSizing: 'border-box',
+    },
+  }, [
+    React.createElement('span', {
+      key: 'l',
+      style: { fontSize: 11, color: accent ? C.label2 : C.label3, whiteSpace: 'nowrap' },
+    }, label),
+    React.createElement('span', {
+      key: 'v',
+      style: { fontSize: 13.5, fontWeight: 700, color: C.label, ...NUM },
+    }, value),
+  ]);
+  return React.createElement('div', {
+    style: { display: 'flex', flexWrap: 'wrap', gap: 9 },
+  }, [
+    chip('start', t('toStart'), Number(snap.secondsToStart) > 0 ? formatDuration(snap.secondsToStart) : '—'),
+    chip('end', t('toEnd'), Number(snap.secondsToEnd) > 0 ? formatDuration(snap.secondsToEnd) : '—'),
+    chip('month', t('monthEarned'), money(snap.monthEarned, 2), true),
+  ]);
+}
+
+/** 六宫格：秒 / 分 / 时 / 日 / 周 / 月工资；第一张「秒工资」用品牌色强调。 */
 const RATE_CARDS = [
   { key: 'secondWage', label: 'secondWage', digits: 4 },
   { key: 'minuteWage', label: 'minuteWage', digits: 4 },
@@ -449,30 +615,80 @@ const RATE_CARDS = [
   { key: 'monthlyWage', label: 'monthlyWage', digits: 2 },
 ];
 
+/** 工资换算网格：由调用方给出 {key,label,value,accent} 卡片（本月 / 指定月 / 全年平均三种视角）。 */
 function RatesGrid(props) {
-  const t = props.t;
-  const rates = props.rates;
+  const cards = Array.isArray(props.cards) ? props.cards : [];
   return React.createElement('div', {
     style: { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8 },
-  }, RATE_CARDS.map((spec, index) => React.createElement('div', {
-    key: spec.key,
-    'data-stat': `stat-${index}`,
-    style: { ...CARD, padding: '9px 10px' },
+  }, cards.map((card, index) => {
+    const accent = card.accent === true;
+    return React.createElement('div', {
+      key: card.key,
+      'data-stat': `stat-${index}`,
+      style: {
+        ...CARD,
+        padding: '10px 11px',
+        borderRadius: 12,
+        ...(accent ? {
+          border: `1px solid color-mix(in srgb, ${GOLD_TINT} 46%, ${C.border1})`,
+          background: `color-mix(in srgb, ${GOLD_TINT} 9%, ${C.layer1})`,
+        } : {}),
+      },
+    }, [
+      React.createElement('div', {
+        key: 'l',
+        style: { fontSize: 11, color: accent ? C.label2 : C.label3, fontWeight: accent ? 600 : 400 },
+      }, card.label),
+      React.createElement('div', {
+        key: 'v',
+        style: {
+          fontSize: 15.5, fontWeight: 700, letterSpacing: '-.2px',
+          color: accent ? C.label : C.label, marginTop: 2, ...NUM,
+        },
+      }, card.value),
+    ]);
+  }));
+}
+
+/** 月份 / 全年视角选择器（原生 select，深浅色都用主题变量）。 */
+function PeriodSelect(props) {
+  const t = props.t;
+  const year = props.year;
+  const months = props.months;
+  const style = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    border: `1px solid ${C.border}`,
+    background: C.layer2,
+    color: C.label,
+    borderRadius: 8,
+    padding: '4px 9px',
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: 'pointer',
+    outline: 'none',
+    maxWidth: 220,
+  };
+  return React.createElement('select', {
+    value: props.value,
+    'aria-label': t('viewLabel'),
+    onChange: (event) => props.onChange(event.target.value),
+    style,
   }, [
-    React.createElement('div', { key: 'l', style: { fontSize: 11, color: C.label3 } }, t(spec.label)),
-    React.createElement('div', {
-      key: 'v',
-      style: { fontSize: 15, fontWeight: 650, color: C.label, marginTop: 2, ...NUM },
-    }, money(rates[spec.key], spec.digits)),
-  ])));
+    React.createElement('option', { key: 'current', value: 'current' }, t('viewCurrent')),
+    ...months.map((month) => React.createElement('option', {
+      key: `m${month.month}`,
+      value: `m${month.month}`,
+    }, `${month.month}${t('monthUnit')} · ${month.workdays}${t('dayUnit')} · ${t('holidayShort')}${month.holidayDays}`)),
+    React.createElement('option', { key: 'year', value: 'year' }, `${year} ${t('viewYear')}`),
+  ]);
 }
 
-/** 明细脚注：月薪 / 当月工作日 / 日有效工时 / 今日目标 / 本月已赚 + 节假日来源。 */
+/** 口径明细：月薪 / 工作日 / 日工时 / 今日目标 / 本月已赚（节假日来源统一放在节假日卡片）。 */
 function DetailsFooter(props) {
   const t = props.t;
   const snap = props.snap;
   const rates = snap.rates;
-  const source = props.holidaySource || HOLIDAY_SOURCE;
   const items = [
     { key: 'salary', label: t('monthlySalaryLabel'), value: money(rates.monthlySalary, 2) },
     { key: 'workdays', label: t('workdaysThisMonth'), value: `${rates.monthlyWorkdays}${t('dayUnit')}` },
@@ -481,36 +697,149 @@ function DetailsFooter(props) {
     { key: 'month', label: t('monthEarned'), value: money(snap.monthEarned, 2) },
   ];
   return React.createElement('div', {
-    style: { ...CARD, padding: '9px 12px', fontSize: 11, color: C.label3, lineHeight: 1.7 },
+    style: {
+      background: C.layer1, border: `1px solid ${C.border1}`, borderRadius: 12,
+      padding: '10px 12px', fontSize: 11, color: C.label3, lineHeight: 1.6,
+    },
   }, [
     React.createElement('div', {
       key: 'items',
-      style: { display: 'flex', flexWrap: 'wrap', gap: '2px 14px' },
-    }, items.map((item) => React.createElement('span', {
+      style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))', gap: '7px 12px' },
+    }, items.map((item) => React.createElement('div', {
       key: item.key,
-      style: { display: 'inline-flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' },
+      style: { minWidth: 0 },
     }, [
-      React.createElement('span', { key: 'l' }, `${item.label}`),
-      React.createElement('span', {
+      React.createElement('div', { key: 'l', style: { fontSize: 10.5, color: C.label3 } }, item.label),
+      React.createElement('div', {
         key: 'v',
-        style: { color: C.label2, fontWeight: 600, ...NUM },
+        style: { fontSize: 13, fontWeight: 650, color: C.label2, ...NUM },
       }, item.value),
     ]))),
+  ]);
+}
+
+/** 节假日卡片：2026 官方 / 2027 预估两段，七段假日区段 + 调休上班日统计。 */
+const HOLIDAY_LABEL_KEYS = {
+  newYear: 'holidayNewYear',
+  spring: 'holidaySpring',
+  qingming: 'holidayQingming',
+  labour: 'holidayLabour',
+  dragon: 'holidayDragon',
+  midAutumn: 'holidayMidAutumn',
+  national: 'holidayNational',
+};
+
+function HolidaysCard(props) {
+  const t = props.t;
+  const source = props.holidaySource || HOLIDAY_SOURCE;
+  const extra = Array.isArray(props.extraWorkdays) ? props.extraWorkdays : [];
+  const countYear = (year) => extra.filter((key) => String(key).startsWith(`${year}-`)).length;
+  const shortDate = (key) => key.slice(5).replace('-', '/');
+  const sections = [
+    {
+      key: 'official',
+      label: t('holidays2026Label'),
+      blocks: HOLIDAY_BLOCKS,
+      estimated: false,
+      extraCount: countYear(2026),
+      tag: null,
+    },
+    {
+      key: 'estimate',
+      label: t('holidays2027Label'),
+      blocks: HOLIDAY_BLOCKS_2027_ESTIMATED,
+      estimated: true,
+      extraCount: countYear(2027),
+      tag: t('holidayEstimateTag'),
+    },
+  ];
+  const sumDays = (blocks) => blocks.reduce((sum, block) => sum + block.days, 0);
+  const renderSection = (section) => React.createElement('div', { key: section.key, style: { marginTop: section.key === 'official' ? 8 : 12 } }, [
+    React.createElement('div', {
+      key: 'head',
+      style: { display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: 8 },
+    }, [
+      React.createElement('span', { key: 'l', style: { fontSize: 11.5, fontWeight: 700, color: C.label2 } }, section.label),
+      section.tag
+        ? React.createElement('span', {
+          key: 'tag',
+          style: {
+            fontSize: 9.5, fontWeight: 700, color: C.label2,
+            border: `1px dashed color-mix(in srgb, ${GOLD_TINT} 60%, transparent)`,
+            borderRadius: 999, padding: '0 6px', lineHeight: 1.6,
+          },
+        }, section.tag)
+        : null,
+      React.createElement('span', { key: 's', style: { marginLeft: 'auto', fontSize: 10, color: C.label3, ...NUM } },
+        t('holidaysCardSub').replace('{days}', String(sumDays(section.blocks))).replace('{extra}', String(section.extraCount))),
+    ]),
+    React.createElement('div', {
+      key: 'grid',
+      style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(118px, 1fr))', gap: 7, marginTop: 6 },
+    }, section.blocks.map((block) => React.createElement('div', {
+      key: block.id,
+      style: {
+        border: section.estimated
+          ? `1px dashed color-mix(in srgb, ${GOLD_TINT} 40%, ${C.border1})`
+          : `1px solid ${C.border1}`,
+        borderRadius: 9,
+        padding: '6px 8px',
+        background: `color-mix(in srgb, ${GOLD_TINT} ${section.estimated ? 3 : 6}%, transparent)`,
+      },
+    }, [
+      React.createElement('div', {
+        key: 'row',
+        style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 6 },
+      }, [
+        React.createElement('span', { key: 'n', style: { fontSize: 11.5, fontWeight: 650, color: C.label } },
+          t(HOLIDAY_LABEL_KEYS[block.id])),
+        React.createElement('span', {
+          key: 'd',
+          style: {
+            fontSize: 10, fontWeight: 700, color: C.label2,
+            background: `color-mix(in srgb, ${GOLD_TINT} 16%, transparent)`,
+            borderRadius: 999, padding: '0 6px', ...NUM,
+          },
+        }, t('holidaysDaysShort').replace('{days}', String(block.days))),
+      ]),
+      React.createElement('div', { key: 'r', style: { fontSize: 10, color: C.label3, marginTop: 2, ...NUM } },
+        `${shortDate(block.from)} – ${shortDate(block.to)}`),
+    ]))),
+    section.estimated
+      ? React.createElement('div', {
+        key: 'est-note',
+        style: { marginTop: 6, fontSize: 10.5, color: C.label3, lineHeight: 1.5 },
+      }, `⚠ ${t('holidayEstimateNote')}`)
+      : null,
+  ]);
+  return React.createElement('div', {
+    style: {
+      background: C.layer1,
+      border: `1px solid ${C.border1}`,
+      borderRadius: 12,
+      padding: '10px 12px',
+    },
+  }, [
     React.createElement('div', {
-      key: 'src',
-      style: { display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', gap: 4, marginTop: 2 },
+      key: 'title',
+      style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' },
     }, [
-      React.createElement('span', { key: 'l' }, `${t('holidaySource')}：`),
+      React.createElement('span', { key: 't', style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: '.2px' } },
+        t('holidaysCardTitle')),
       React.createElement('a', {
         key: 'a',
         href: source.url,
         target: '_blank',
         rel: 'noreferrer',
         title: source.title,
-        style: { color: C.brand, textDecoration: 'underline' },
-      }, `${source.year} · ${t('holidaySourceLink')} ↗`),
-      React.createElement('span', { key: 'n', style: { color: C.label3 } }, `（${source.title}）`),
+        style: { fontSize: 10.5, color: C.brand, textDecoration: 'none', fontWeight: 600 },
+      }, `${source.year} ${t('holidaySourceLink')} ↗`),
     ]),
+    sections.map(renderSection),
+    React.createElement('div', {
+      key: 'foot',
+      style: { marginTop: 8, fontSize: 10.5, color: C.label3 },
+    }, t('holidaysExtraNote').replace('{extra}', String(extra.length))),
   ]);
 }
 
@@ -528,7 +857,7 @@ function SettingsSection(props) {
   const inputStyle = {
     width: '100%',
     boxSizing: 'border-box',
-    padding: '5px 8px',
+    padding: '6px 9px',
     borderRadius: 8,
     border: `1px solid ${C.border}`,
     background: C.layer2,
@@ -537,11 +866,11 @@ function SettingsSection(props) {
     fontVariantNumeric: 'tabular-nums',
     outline: 'none',
   };
-  const labelStyle = { fontSize: 11, color: C.label3 };
+  const labelStyle = { fontSize: 10.5, color: C.label3, fontWeight: 500 };
 
   const textField = (field, labelKey, placeholder) => React.createElement('label', {
     key: field,
-    style: { display: 'flex', flexDirection: 'column', gap: 3, flex: '1 1 130px', minWidth: 112 },
+    style: { display: 'flex', flexDirection: 'column', gap: 4, flex: '1 1 130px', minWidth: 112 },
   }, [
     React.createElement('span', { key: 'l', style: labelStyle }, t(labelKey)),
     React.createElement('input', {
@@ -570,38 +899,24 @@ function SettingsSection(props) {
     React.createElement('span', { key: 'l' }, t(labelKey)),
   ]);
 
-  const textareaField = (field, labelKey) => React.createElement('label', {
-    key: field,
-    style: { display: 'flex', flexDirection: 'column', gap: 3, flex: '1 1 220px', minWidth: 200 },
+  return React.createElement('details', {
+    style: { background: C.layer1, border: `1px solid ${C.border1}`, borderRadius: 12, padding: '11px 13px' },
   }, [
-    React.createElement('span', { key: 'l', style: labelStyle }, t(labelKey)),
-    React.createElement('textarea', {
-      key: 'i',
-      rows: 4,
-      value: form[field],
-      spellCheck: false,
-      onChange: (event) => setField(field, event.target.value),
-      style: {
-        ...inputStyle,
-        resize: 'vertical',
-        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-        lineHeight: 1.5,
-      },
-    }),
-  ]);
-
-  return React.createElement('details', { style: { ...CARD, padding: '10px 12px' } }, [
     React.createElement('summary', {
       key: 'sum',
-      style: { cursor: 'pointer', fontSize: 13, fontWeight: 600, color: C.label, userSelect: 'none' },
+      style: { cursor: 'pointer', fontSize: 13, fontWeight: 650, color: C.label, userSelect: 'none' },
     }, t('settings')),
     React.createElement('div', {
       key: 'hint',
-      style: { fontSize: 11, color: C.label3, margin: '4px 0 9px' },
+      style: { fontSize: 10.5, color: C.label3, margin: '5px 0 10px' },
     }, t('settingsHint')),
+    React.createElement('div', {
+      key: 'dataNote',
+      style: { fontSize: 10.5, color: C.label3, margin: '-4px 0 10px', lineHeight: 1.55 },
+    }, t('settingsDataNote')),
     React.createElement('div', {
       key: 'fields',
-      style: { display: 'flex', flexWrap: 'wrap', gap: 8 },
+      style: { display: 'flex', flexWrap: 'wrap', gap: 9 },
     }, [
       textField('monthlySalary', 'salaryField', '10000'),
       textField('workStart', 'workStartField', '09:00'),
@@ -611,16 +926,9 @@ function SettingsSection(props) {
       checkField('lunchEnabled', 'lunchEnabledField'),
       checkField('lunchPaid', 'lunchPaidField'),
     ]),
-    React.createElement('div', {
-      key: 'lists',
-      style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 },
-    }, [
-      textareaField('holidaysText', 'holidaysField'),
-      textareaField('extraWorkdaysText', 'extraWorkdaysField'),
-    ]),
     React.createElement('div', {
       key: 'actions',
-      style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginTop: 10 },
+      style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginTop: 11 },
     }, [
       React.createElement('button', {
         key: 'save',
@@ -628,14 +936,21 @@ function SettingsSection(props) {
         onClick: onSave,
         disabled: save.status === 'saving',
         style: {
-          border: `1px solid ${C.brand}`,
-          color: C.brand,
-          background: 'transparent',
+          // 金色按钮：与主卡金额、节假日强调同一套金色系；深棕字保证任何主题下都有对比度
+          border: `1px solid color-mix(in srgb, ${GOLD_TINT} 72%, rgba(0,0,0,.18))`,
+          color: '#3A2A05',
+          background: save.status === 'saving'
+            ? `color-mix(in srgb, ${GOLD_TINT} 52%, #fff)`
+            : 'linear-gradient(180deg, #F8DC86 0%, #EFC258 52%, #D99D2C 100%)',
           borderRadius: 8,
-          padding: '6px 16px',
+          padding: '7px 20px',
           fontSize: 13,
-          fontWeight: 600,
+          fontWeight: 700,
+          letterSpacing: '.3px',
           cursor: save.status === 'saving' ? 'default' : 'pointer',
+          opacity: save.status === 'saving' ? 0.72 : 1,
+          boxShadow: `0 2px 10px color-mix(in srgb, ${GOLD_TINT} 36%, transparent), inset 0 1px 0 rgba(255,255,255,.45)`,
+          textShadow: '0 1px 0 rgba(255,255,255,.28)',
         },
       }, save.status === 'saving' ? t('saving') : t('save')),
       save.status === 'ok'
@@ -677,6 +992,70 @@ function NiumaPanel(props) {
   const rates = snap && snap.rates ? snap.rates : computeRates(cfg, snap && snap.dateKey);
   const baseForm = React.useMemo(() => formFromConfig(cfg), [cfg]);
 
+  /**
+   * 「工资换算」视角：本月（跟随今日口径）/ 指定月份 / 全年平均。
+   * 只影响换算展示，不影响顶部「今日已赚」计数器（计数器永远按今天算）。
+   */
+  const viewYear = Number(String(snap && snap.dateKey ? snap.dateKey : '').slice(0, 4)) || new Date().getFullYear();
+  const yearEstimated = viewYear === HOLIDAY_ESTIMATE_2027.year;
+  const yearData = React.useMemo(() => yearSummary(cfg, viewYear), [cfg, viewYear]);
+  const [view, setView] = React.useState('current');
+  const selectedMonth = view.startsWith('m') ? yearData.months[Number(view.slice(1)) - 1] : null;
+  const maxHolidayMonth = yearData.maxHolidayMonth;
+  const maxHolidayText = t('maxHolidayNote')
+    .replace('{month}', String(maxHolidayMonth.month))
+    .replace('{days}', String(maxHolidayMonth.holidayDays));
+  let viewCards;
+  let viewHint;
+  let viewNote;
+  if (view === 'year') {
+    // 与「本月」保持同一阅读顺序：秒 → 分 → 时 → 日，再放该视角的汇总项
+    viewCards = [
+      { key: 'avgSecond', label: t('averageSecond'), value: money(yearData.averageSecondWage, 4), accent: true },
+      { key: 'avgMinute', label: t('averageMinute'), value: money(yearData.averageMinuteWage, 4) },
+      { key: 'avgHourly', label: t('averageHourly'), value: money(yearData.averageHourlyWage, 2) },
+      { key: 'avgDaily', label: t('averageDaily'), value: money(yearData.averageDailyWage, 2) },
+      { key: 'yearWorkdays', label: t('yearWorkdays'), value: `${yearData.totalWorkdays}${t('dayUnit')}` },
+      { key: 'yearIncome', label: t('yearIncome'), value: money(yearData.annualIncome, 2) },
+    ];
+    viewHint = `${t('yearHint').replace('{year}', String(viewYear)).replace('{workdays}', String(yearData.totalWorkdays))} · ${t('viewOnlyHint')}`
+      + (yearEstimated ? ` · ${t('holidayEstimateShort')}` : '');
+    viewNote = yearEstimated ? t('holidayEstimateNote') : maxHolidayText;
+  } else if (selectedMonth) {
+    // 与「本月」保持同一阅读顺序：秒 → 分 → 时 → 日 → 月 → 工作日
+    viewCards = [
+      { key: 'secondWage', label: t('secondWage'), value: money(selectedMonth.secondWage, 4), accent: true },
+      { key: 'minuteWage', label: t('minuteWage'), value: money(selectedMonth.minuteWage, 4) },
+      { key: 'hourlyWage', label: t('hourlyWage'), value: money(selectedMonth.hourlyWage, 2) },
+      { key: 'dailyWage', label: t('dailyWage'), value: money(selectedMonth.dailyWage, 2) },
+      { key: 'monthlyWage', label: t('monthlyWage'), value: money(selectedMonth.monthlySalary, 2) },
+      { key: 'monthWorkdays', label: t('monthWorkdaysCard'), value: `${selectedMonth.workdays}${t('dayUnit')}` },
+    ];
+    viewHint = `${t('monthHint')
+      .replace('{year}', String(viewYear))
+      .replace('{month}', String(selectedMonth.month))
+      .replace('{workdays}', String(selectedMonth.workdays))
+      .replace('{holidays}', String(selectedMonth.holidayDays))} · ${t('viewOnlyHint')}`
+      + (yearEstimated ? ` · ${t('holidayEstimateShort')}` : '');
+    viewNote = yearEstimated
+      ? t('holidayEstimateNote')
+      : (selectedMonth.month === maxHolidayMonth.month
+        ? `★ ${t('maxHolidayThis').replace('{days}', String(maxHolidayMonth.holidayDays))}`
+        : maxHolidayText);
+  } else {
+    // 统一阅读顺序：秒 → 分 → 时 → 日 → 周 → 月（所有视角都从「秒」开始、从小到大）
+    viewCards = RATE_CARDS.map((spec) => ({
+      key: spec.key,
+      label: t(spec.label),
+      value: money(rates[spec.key], spec.digits),
+      accent: spec.key === 'secondWage',
+    }));
+    viewHint = t('currentHint')
+      .replace('{days}', String(rates.monthlyWorkdays))
+      .replace('{hours}', trimNumber(rates.paidHours, 2));
+    viewNote = maxHolidayText;
+  }
+
   // 设置表单草稿：null = 还没改过，直接显示当前配置。
   const [draft, setDraft] = React.useState(null);
   const [save, setSave] = React.useState({ status: 'idle', errors: [], message: '' });
@@ -742,30 +1121,60 @@ function NiumaPanel(props) {
 
   return React.createElement('div', {
     style: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 9,
-      minWidth: 0,
-      padding: '2px 1px 18px',
+      // DSH 的 main slot 给的是定高容器：插件必须自己当滚动容器，否则展开设置后底部会被裁掉。
+      // 注意：这里用 block + 内层 flex 的写法 —— 如果根直接 display:flex，子项会在定高容器里
+      // 被 flex-shrink 压扁（展开设置时整张主卡高度被压缩、内容被 overflow 裁掉）。
+      height: '100%',
+      width: '100%',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      overscrollBehavior: 'contain',
+      scrollbarGutter: 'stable',
+      boxSizing: 'border-box',
       fontSize: 13,
       lineHeight: 1.45,
       color: C.label,
       fontFamily: 'inherit',
     },
   }, [
-    // 标题 + 状态徽标
+    React.createElement(StyleTag, { key: 'css' }),
+    React.createElement('div', {
+      key: 'inner',
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 11,
+        width: '100%',
+        maxWidth: 820,
+        margin: '0 auto',
+        padding: '16px 18px 40px',
+        boxSizing: 'border-box',
+        minWidth: 0,
+      },
+    }, [
+    // 品牌头：图标块 + 标题/副标题 + 状态徽标
     React.createElement('div', {
       key: 'head',
-      style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' },
+      style: { display: 'flex', alignItems: 'center', gap: 11, flexWrap: 'wrap' },
     }, [
+      React.createElement('div', {
+        key: 'icon',
+        style: {
+          width: 38, height: 38, borderRadius: 12, flex: '0 0 auto',
+          display: 'grid', placeItems: 'center',
+          color: C.brand,
+          background: `color-mix(in srgb, ${C.brand} 13%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${C.brand} 26%, transparent)`,
+        },
+      }, React.createElement(NiumaIcon, { size: 21 })),
       React.createElement('div', { key: 'tt', style: { marginRight: 'auto', minWidth: 0 } }, [
         React.createElement('div', {
           key: 't',
-          style: { fontSize: 16, fontWeight: 700, color: C.label },
+          style: { fontSize: 17.5, fontWeight: 800, letterSpacing: '-.3px', color: C.label },
         }, t('title')),
         React.createElement('div', {
           key: 's',
-          style: { fontSize: 11, color: C.label3 },
+          style: { fontSize: 11, color: C.label3, marginTop: 1 },
         }, t('subtitle')),
       ]),
       React.createElement(StatusBadge, { key: 'badge', t, status: snap.status }),
@@ -777,8 +1186,9 @@ function NiumaPanel(props) {
         key: 'banner',
         style: {
           display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap',
-          fontSize: 12, color: banner.color, padding: '5px 9px',
-          borderRadius: 8, border: `1px solid ${banner.color}`, background: C.layer1,
+          fontSize: 12, color: banner.color, padding: '6px 10px',
+          borderRadius: 9, border: `1px solid color-mix(in srgb, ${banner.color} 45%, transparent)`,
+          background: `color-mix(in srgb, ${banner.color} 10%, transparent)`,
         },
       }, [
         React.createElement('span', { key: 'txt', style: { flex: '1 1 160px' } }, banner.text),
@@ -797,9 +1207,57 @@ function NiumaPanel(props) {
       : null,
 
     React.createElement(HeroCard, { key: 'hero', t, snap }),
-    React.createElement(ProgressCard, { key: 'progress', t, snap }),
-    React.createElement(RatesGrid, { key: 'rates', t, rates }),
+    React.createElement(CountdownRow, { key: 'countdown', t, snap }),
+    React.createElement('div', {
+      key: 'ratesHead',
+      style: {
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        gap: 8, flexWrap: 'wrap', margin: '2px 1px -1px',
+      },
+    }, [
+      React.createElement('span', {
+        key: 't',
+        style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: '.2px' },
+      }, t('sectionRates')),
+      React.createElement(PeriodSelect, {
+        key: 'period',
+        t,
+        value: view,
+        onChange: setView,
+        year: viewYear,
+        months: yearData.months,
+      }),
+    ]),
+    React.createElement('div', {
+      key: 'ratesHint',
+      style: { fontSize: 10.5, color: C.label3, ...NUM },
+    }, viewHint),
+    React.createElement(RatesGrid, { key: 'rates', cards: viewCards }),
+    viewNote
+      ? React.createElement('div', {
+        key: 'ratesNote',
+        style: { fontSize: 10.5, color: C.label3, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' },
+      }, [
+        React.createElement('span', {
+          key: 'badge',
+          style: {
+            color: C.label2, fontWeight: 600,
+            background: `color-mix(in srgb, ${GOLD_TINT} 14%, transparent)`,
+            border: `1px solid color-mix(in srgb, ${GOLD_TINT} 32%, transparent)`,
+            borderRadius: 999, padding: '1px 8px',
+          },
+        }, t('maxHolidayBadge')),
+        React.createElement('span', { key: 'txt' }, viewNote),
+      ])
+      : null,
+    React.createElement(SectionTitle, { key: 'detailTitle', title: t('sectionDetail') }),
     React.createElement(DetailsFooter, { key: 'footer', t, snap, holidaySource }),
+    React.createElement(HolidaysCard, {
+      key: 'holidays',
+      t,
+      holidaySource,
+      extraWorkdays: cfg.extraWorkdays,
+    }),
     React.createElement(SettingsSection, {
       key: 'settings',
       t,
@@ -809,6 +1267,7 @@ function NiumaPanel(props) {
       save,
       onSave,
     }),
+    ]),
   ]);
 }