dsh-niuma 0.1.0 → 0.2.0

package/lib/client.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react = __toESM(require("react"), 1);
 
 // src/holidays.mjs
-var DEFAULT_HOLIDAYS = Object.freeze([
+var OFFICIAL_HOLIDAYS_2026 = Object.freeze([
   // 元旦：1月1日（周四）至3日（周六）
   "2026-01-01",
   "2026-01-02",
@@ -80,7 +80,7 @@ var DEFAULT_HOLIDAYS = Object.freeze([
   "2026-10-06",
   "2026-10-07"
 ]);
-var DEFAULT_EXTRA_WORKDAYS = Object.freeze([
+var OFFICIAL_EXTRA_WORKDAYS_2026 = Object.freeze([
   "2026-01-04",
   // 元旦调休：周日上班
   "2026-02-14",
@@ -94,11 +94,88 @@ var DEFAULT_EXTRA_WORKDAYS = Object.freeze([
   "2026-10-10"
   // 国庆调休：周六上班
 ]);
+var HOLIDAY_BLOCKS = Object.freeze([
+  { id: "newYear", year: 2026, from: "2026-01-01", to: "2026-01-03", days: 3, estimated: false },
+  { id: "spring", year: 2026, from: "2026-02-15", to: "2026-02-23", days: 9, estimated: false },
+  { id: "qingming", year: 2026, from: "2026-04-04", to: "2026-04-06", days: 3, estimated: false },
+  { id: "labour", year: 2026, from: "2026-05-01", to: "2026-05-05", days: 5, estimated: false },
+  { id: "dragon", year: 2026, from: "2026-06-19", to: "2026-06-21", days: 3, estimated: false },
+  { id: "midAutumn", year: 2026, from: "2026-09-25", to: "2026-09-27", days: 3, estimated: false },
+  { id: "national", year: 2026, from: "2026-10-01", to: "2026-10-07", days: 7, estimated: false }
+]);
 var HOLIDAY_SOURCE = Object.freeze({
   year: 2026,
+  estimated: false,
   title: "\u56FD\u52A1\u9662\u529E\u516C\u5385\u5173\u4E8E2026\u5E74\u90E8\u5206\u8282\u5047\u65E5\u5B89\u6392\u7684\u901A\u77E5\uFF08\u56FD\u529E\u53D1\u660E\u7535\u30142025\u30157\u53F7\uFF09",
   url: "https://www.gov.cn/zhengce/content/202511/content_7047090.htm"
 });
+var ESTIMATED_HOLIDAYS_2027 = Object.freeze([
+  "2027-01-01",
+  "2027-01-02",
+  "2027-01-03",
+  "2027-02-05",
+  "2027-02-06",
+  "2027-02-07",
+  "2027-02-08",
+  "2027-02-09",
+  "2027-02-10",
+  "2027-02-11",
+  "2027-02-12",
+  "2027-02-13",
+  "2027-04-03",
+  "2027-04-04",
+  "2027-04-05",
+  "2027-05-01",
+  "2027-05-02",
+  "2027-05-03",
+  "2027-05-04",
+  "2027-05-05",
+  "2027-06-09",
+  "2027-09-15",
+  "2027-10-01",
+  "2027-10-02",
+  "2027-10-03",
+  "2027-10-04",
+  "2027-10-05",
+  "2027-10-06",
+  "2027-10-07"
+]);
+var ESTIMATED_EXTRA_WORKDAYS_2027 = Object.freeze([
+  "2027-01-31",
+  // 春节调休：周日上班（预估）
+  "2027-02-14",
+  // 春节调休：周日上班（预估）
+  "2027-05-08",
+  // 劳动节调休：周六上班（预估）
+  "2027-09-26",
+  // 国庆调休：周日上班（预估）
+  "2027-10-09"
+  // 国庆调休：周六上班（预估）
+]);
+var HOLIDAY_BLOCKS_2027_ESTIMATED = Object.freeze([
+  { id: "newYear", year: 2027, from: "2027-01-01", to: "2027-01-03", days: 3, estimated: true },
+  { id: "spring", year: 2027, from: "2027-02-05", to: "2027-02-13", days: 9, estimated: true },
+  { id: "qingming", year: 2027, from: "2027-04-03", to: "2027-04-05", days: 3, estimated: true },
+  { id: "labour", year: 2027, from: "2027-05-01", to: "2027-05-05", days: 5, estimated: true },
+  { id: "dragon", year: 2027, from: "2027-06-09", to: "2027-06-09", days: 1, estimated: true },
+  { id: "midAutumn", year: 2027, from: "2027-09-15", to: "2027-09-15", days: 1, estimated: true },
+  { id: "national", year: 2027, from: "2027-10-01", to: "2027-10-07", days: 7, estimated: true }
+]);
+var HOLIDAY_ESTIMATE_2027 = Object.freeze({
+  year: 2027,
+  estimated: true,
+  announced: false,
+  title: "2027 \u5E74\u653E\u5047\u5B89\u6392\uFF08\u9884\u4F30\uFF0C\u5B98\u65B9\u5C1A\u672A\u516C\u5E03\uFF09",
+  note: "\u5B98\u65B9\u901A\u77E5\u901A\u5E38\u5728\u524D\u4E00\u5E74 11 \u6708\u521D\u53D1\u5E03\uFF1B\u4EE5\u4E0B\u4E3A\u6309 2024 \u5E74\u4FEE\u8BA2\u7684\u300A\u5168\u56FD\u5E74\u8282\u53CA\u7EAA\u5FF5\u65E5\u653E\u5047\u529E\u6CD5\u300B\u4E0E\u5F80\u5E74\u60EF\u4F8B\u63A8\u7B97\uFF0C\u4EC5\u4F9B\u53C2\u8003\uFF0C\u8BF7\u4EE5\u56FD\u52A1\u9662\u901A\u77E5\u4E3A\u51C6\u3002",
+  basis: [
+    "\u6625\u8282\u81EA\u9664\u5915\u8D77\u653E\u5047\u8C03\u4F11\uFF0C\u4E00\u822C\u8FDE\u4F11 8\u20139 \u5929",
+    "\u56FD\u5E86 7 \u5929\u3001\u52B3\u52A8\u8282 5 \u5929",
+    "\u5143\u65E6 / \u6E05\u660E / \u7AEF\u5348 / \u4E2D\u79CB\u5404 1 \u5929\u6CD5\u5B9A\u5047\uFF0C\u9047\u5468\u672B\u987A\u8FDE"
+  ],
+  url: "https://www.gov.cn/zhengce/xxgk/"
+});
+var DEFAULT_HOLIDAYS = Object.freeze([...OFFICIAL_HOLIDAYS_2026, ...ESTIMATED_HOLIDAYS_2027]);
+var DEFAULT_EXTRA_WORKDAYS = Object.freeze([...OFFICIAL_EXTRA_WORKDAYS_2026, ...ESTIMATED_EXTRA_WORKDAYS_2027]);
 
 // src/core.mjs
 var DEFAULTS = Object.freeze({
@@ -359,6 +436,68 @@ function formatDuration(seconds) {
   if (minutes > 0) return `${minutes}\u5206 ${rest}\u79D2`;
   return `${rest}\u79D2`;
 }
+function holidayDaysInMonth(year, monthIndex, config) {
+  const prefix = `${year}-${String(monthIndex + 1).padStart(2, "0")}-`;
+  return (config.holidays ?? DEFAULTS.holidays).filter((key) => key.startsWith(prefix)).length;
+}
+function monthSummary(config, year, monthIndex) {
+  const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+  const workdays = workdaysInMonth(year, monthIndex, config);
+  const holidayDays = holidayDaysInMonth(year, monthIndex, config);
+  const monthlySalary = Number(config.monthlySalary) || 0;
+  const paidMinutes = paidMinutesPerDay(config);
+  const paidHours = paidMinutes / 60;
+  const dailyWage = workdays > 0 ? monthlySalary / workdays : 0;
+  const hourlyWage = paidHours > 0 ? dailyWage / paidHours : 0;
+  return {
+    year,
+    monthIndex,
+    month: monthIndex + 1,
+    daysInMonth,
+    workdays,
+    holidayDays,
+    restDays: daysInMonth - workdays,
+    monthlySalary,
+    paidMinutes,
+    paidHours,
+    dailyWage,
+    hourlyWage,
+    minuteWage: hourlyWage / 60,
+    secondWage: hourlyWage / 3600
+  };
+}
+function yearSummary(config, year) {
+  const months = Array.from({ length: 12 }, (_, monthIndex) => monthSummary(config, year, monthIndex));
+  const totalWorkdays = months.reduce((sum, item) => sum + item.workdays, 0);
+  const totalHolidayDays = months.reduce((sum, item) => sum + item.holidayDays, 0);
+  const monthlySalary = Number(config.monthlySalary) || 0;
+  const annualIncome = monthlySalary * 12;
+  const paidMinutes = paidMinutesPerDay(config);
+  const paidHours = paidMinutes / 60;
+  const averageDailyWage = totalWorkdays > 0 ? annualIncome / totalWorkdays : 0;
+  const averageHourlyWage = paidHours > 0 ? averageDailyWage / paidHours : 0;
+  const maxHolidayMonth = months.reduce((best, item) => {
+    if (item.holidayDays !== best.holidayDays) return item.holidayDays > best.holidayDays ? item : best;
+    if (item.workdays !== best.workdays) return item.workdays < best.workdays ? item : best;
+    return item.month < best.month ? item : best;
+  }, months[0]);
+  return {
+    year,
+    months,
+    totalWorkdays,
+    totalHolidayDays,
+    paidMinutes,
+    paidHours,
+    monthlySalary,
+    annualIncome,
+    averageMonthlyWage: monthlySalary,
+    averageDailyWage,
+    averageHourlyWage,
+    averageMinuteWage: averageHourlyWage / 60,
+    averageSecondWage: averageHourlyWage / 3600,
+    maxHolidayMonth
+  };
+}
 
 // src/client/index.js
 var PKG_NAME = true ? "dsh-niuma" : "dsh-niuma";
@@ -388,6 +527,15 @@ var CARD = {
   boxSizing: "border-box"
 };
 var NUM = { fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" };
+var 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)"
+};
+var GOLD_TINT = "#E7B84D";
 var STATUS_META = {
   rest: { key: "statusRest", color: C.label3 },
   before: { key: "statusBefore", color: C.warn },
@@ -423,7 +571,6 @@ var zh = {
   "paidHoursPerDay": "\u65E5\u6709\u6548\u5DE5\u65F6",
   "todayTarget": "\u4ECA\u65E5\u76EE\u6807",
   "monthEarned": "\u672C\u6708\u5DF2\u8D5A",
-  "holidaySource": "\u8282\u5047\u65E5\u6765\u6E90",
   "holidaySourceLink": "\u56FD\u52A1\u9662\u529E\u516C\u5385 2026 \u5E74\u8282\u5047\u65E5\u5B89\u6392",
   "configLoading": "\u6B63\u5728\u8BFB\u53D6\u8BBE\u7F6E\u2026",
   "configFailed": "\u8BBE\u7F6E\u8BFB\u53D6\u5931\u8D25\uFF0C\u4F7F\u7528\u9ED8\u8BA4\u503C",
@@ -437,14 +584,53 @@ var zh = {
   "lunchStartField": "\u5348\u4F11\u5F00\u59CB",
   "lunchEndField": "\u5348\u4F11\u7ED3\u675F",
   "lunchPaidField": "\u5348\u4F11\u7B97\u5DE5\u65F6",
-  "holidaysField": "\u8282\u5047\u65E5\uFF08\u4E00\u884C\u4E00\u4E2A YYYY-MM-DD\uFF09",
-  "extraWorkdaysField": "\u8C03\u4F11\u4E0A\u73ED\u65E5\uFF08\u4E00\u884C\u4E00\u4E2A YYYY-MM-DD\uFF09",
+  "holidaysCardTitle": "\u8282\u5047\u65E5\u5B89\u6392",
+  "holidays2026Label": "2026 \u5E74\uFF08\u5B98\u65B9\uFF09",
+  "holidays2027Label": "2027 \u5E74\uFF08\u9884\u4F30\uFF09",
+  "holidayEstimateTag": "\u9884\u4F30",
+  "holidayEstimateNote": "\u5B98\u65B9\u5C1A\u672A\u516C\u5E03\uFF0C\u4EE5\u4E0A\u4E3A\u6309\u89C4\u5219\u4E0E\u60EF\u4F8B\u63A8\u7B97\uFF0C\u4EC5\u4F9B\u53C2\u8003\uFF0C\u4EE5\u56FD\u52A1\u9662\u901A\u77E5\u4E3A\u51C6\u3002",
+  "holidayEstimateShort": "2027 \u4E3A\u9884\u4F30\u503C",
+  "settingsDataNote": "\u8282\u5047\u65E5\u4E0E\u8C03\u4F11\u6570\u636E\u89C1\u4E0A\u65B9\u300C\u8282\u5047\u65E5\u5B89\u6392\u300D\u5361\u7247\uFF082027 \u5E74\u4E3A\u9884\u4F30\u503C\uFF0C\u4E0D\u53EF\u5728\u672C\u9875\u7F16\u8F91\uFF09\u3002",
+  "holidaysCardSub": "\u6CD5\u5B9A\u5047\u65E5 {days} \u5929 \xB7 \u8C03\u4F11\u4E0A\u73ED {extra} \u5929",
+  "holidaysDaysShort": "{days} \u5929",
+  "holidaysExtraNote": "\u8C03\u4F11\u4E0A\u73ED\u65E5 {extra} \u5929\uFF08\u5468\u672B\u8865\u73ED\uFF0C\u6309\u5DE5\u4F5C\u65E5\u8BA1\uFF09",
+  "holidayNewYear": "\u5143\u65E6",
+  "holidaySpring": "\u6625\u8282",
+  "holidayQingming": "\u6E05\u660E",
+  "holidayLabour": "\u52B3\u52A8\u8282",
+  "holidayDragon": "\u7AEF\u5348",
+  "holidayMidAutumn": "\u4E2D\u79CB",
+  "holidayNational": "\u56FD\u5E86",
   "save": "\u4FDD\u5B58",
   "saving": "\u4FDD\u5B58\u4E2D\u2026",
   "saved": "\u5DF2\u4FDD\u5B58",
   "saveFailed": "\u4FDD\u5B58\u5931\u8D25\uFF1A",
   "dayUnit": "\u5929",
-  "hourUnit": "\u5C0F\u65F6"
+  "hourUnit": "\u5C0F\u65F6",
+  "viewLabel": "\u67E5\u770B",
+  "viewCurrent": "\u672C\u6708",
+  "viewYear": "\u5168\u5E74\u5E73\u5747",
+  "monthUnit": "\u6708",
+  "holidayShort": "\u5047",
+  "currentHint": "\u6309\u6BCF\u6708 {days} \u4E2A\u5DE5\u4F5C\u65E5\u3001\u6BCF\u5929 {hours} \u5C0F\u65F6\u8BA1",
+  "monthHint": "{year} \u5E74 {month} \u6708 \xB7 \u5DE5\u4F5C\u65E5 {workdays} \u5929 \xB7 \u6CD5\u5B9A\u5047\u65E5 {holidays} \u5929",
+  "yearHint": "{year} \u5168\u5E74 \xB7 {workdays} \u4E2A\u5DE5\u4F5C\u65E5 \xB7 \u6309\u5E74\u6536\u5165\u6298\u7B97",
+  "viewOnlyHint": "\u4EC5\u6362\u7B97\uFF0C\u4E0D\u5F71\u54CD\u4ECA\u65E5\u8BA1\u6570\u5668",
+  "yearWorkdays": "\u5168\u5E74\u5DE5\u4F5C\u65E5",
+  "yearIncome": "\u5168\u5E74\u6536\u5165",
+  "averageDaily": "\u5E73\u5747\u65E5\u85AA",
+  "averageHourly": "\u5E73\u5747\u65F6\u85AA",
+  "averageMinute": "\u5E73\u5747\u5206\u85AA",
+  "averageSecond": "\u5E73\u5747\u79D2\u85AA",
+  "monthWorkdaysCard": "\u5DE5\u4F5C\u65E5",
+  "maxHolidayBadge": "\u5168\u5E74\u5047\u65E5\u6700\u591A",
+  "maxHolidayNote": "\u5168\u5E74\u5047\u65E5\u6700\u591A\uFF1A{month} \u6708\uFF08\u6CD5\u5B9A\u5047\u65E5 {days} \u5929\uFF09",
+  "maxHolidayThis": "\u5168\u5E74\u5047\u65E5\u6700\u591A\u7684\u6708\u4EFD\uFF08\u6CD5\u5B9A\u5047\u65E5 {days} \u5929\uFF09",
+  "sectionRates": "\u5DE5\u8D44\u6362\u7B97",
+  "sectionRatesHint": "\u6309\u6BCF\u6708 {days} \u4E2A\u5DE5\u4F5C\u65E5\u3001\u6BCF\u5929 {hours} \u5C0F\u65F6\u8BA1",
+  "sectionDetail": "\u4ECA\u65E5\u53E3\u5F84\u660E\u7EC6",
+  "restHint": "\u4ECA\u5929\u4F11\u606F\uFF0C\u597D\u597D\u8EBA\u5E73",
+  "liveNow": "\u5B9E\u65F6"
 };
 var en = {
   "nav": "Niuma",
@@ -474,7 +660,6 @@ var 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\u2026",
   "configFailed": "Failed to load settings, using defaults",
@@ -488,24 +673,60 @@ var 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 \u2014 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 \xB7 {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\u2026",
   "saved": "Saved",
   "saveFailed": "Save failed: ",
   "dayUnit": "d",
-  "hourUnit": "h"
+  "hourUnit": "h",
+  "viewLabel": "View",
+  "viewCurrent": "This month",
+  "viewYear": "Year average",
+  "monthUnit": "M",
+  "holidayShort": "hol.",
+  "currentHint": "{days} workdays / month \xB7 {hours} h / day",
+  "monthHint": "{year}-{month} \xB7 {workdays} workdays \xB7 {holidays} statutory holidays",
+  "yearHint": "{year} \xB7 {workdays} workdays \xB7 averaged over the year",
+  "viewOnlyHint": "Conversion only \u2014 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 \xB7 {hours} h / day",
+  "sectionDetail": "Today's basis",
+  "restHint": "Day off \u2014 enjoy it",
+  "liveNow": "LIVE"
 };
 var fallbackTranslate = (key) => zh[key] != null ? zh[key] : key;
-var money = (value, digits = 2) => `\xA5${formatMoney(value, digits)}`;
+var money = (value, digits = 2) => `${formatMoney(value, digits)} \u5143`;
 function trimNumber(value, digits = 2) {
   const fixed = Number(value || 0).toFixed(digits);
   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 {
     monthlySalary: String(config.monthlySalary == null ? "" : config.monthlySalary),
@@ -514,9 +735,7 @@ function formFromConfig(config) {
     lunchEnabled: config.lunchEnabled !== false,
     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")
+    lunchPaid: config.lunchPaid === true
   };
 }
 function patchFromForm(form) {
@@ -528,9 +747,7 @@ function patchFromForm(form) {
     lunchEnabled: Boolean(form.lunchEnabled),
     lunchStart: String(form.lunchStart || "").trim(),
     lunchEnd: String(form.lunchEnd || "").trim(),
-    lunchPaid: Boolean(form.lunchPaid),
-    holidays: splitDateLines(form.holidaysText),
-    extraWorkdays: splitDateLines(form.extraWorkdaysText)
+    lunchPaid: Boolean(form.lunchPaid)
   };
 }
 function useRemoteConfig() {
@@ -600,49 +817,110 @@ function NiumaIcon(props) {
     import_react.default.createElement("path", { key: "c", d: "M4 8h.01M12 8h.01" })
   ]);
 }
+var 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 import_react.default.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 import_react.default.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"
     }
   }, [
     import_react.default.createElement("i", {
       key: "dot",
+      className: live ? "niuma-live-dot" : void 0,
       style: { width: 6, height: 6, borderRadius: "50%", background: meta.color, display: "inline-block" }
     }),
     t(meta.key)
   ]);
 }
+function SectionTitle(props) {
+  return import_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "baseline",
+      justifyContent: "space-between",
+      gap: 8,
+      flexWrap: "wrap",
+      margin: "2px 1px -1px"
+    }
+  }, [
+    import_react.default.createElement("span", {
+      key: "t",
+      style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: ".2px" }
+    }, props.title),
+    props.hint ? import_react.default.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 import_react.default.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 import_react.default.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
+    }
+  }, [
     import_react.default.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"
       }
+    }),
+    import_react.default.createElement("div", {
+      key: "head",
+      style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }
     }, [
-      import_react.default.createElement("span", { key: "a" }, t("earnedToday")),
+      import_react.default.createElement("span", {
+        key: "a",
+        style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: C.label2 }
+      }, [
+        live ? import_react.default.createElement("i", {
+          key: "dot",
+          className: "niuma-live-dot",
+          style: { width: 7, height: 7, borderRadius: "50%", background: C.ok, display: "inline-block" }
+        }) : null,
+        t("earnedToday")
+      ]),
       import_react.default.createElement(
         "span",
         { key: "b", style: { fontSize: 11, color: C.label3, ...NUM } },
@@ -651,65 +929,61 @@ function HeroCard(props) {
     ]),
     import_react.default.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" }
     }, [
-      import_react.default.createElement("span", {
-        key: "cur",
-        style: { fontSize: 22, fontWeight: 700, color: C.label2, ...NUM }
-      }, "\xA5"),
       import_react.default.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))
+      }, formatMoney(snap.todayEarned, 4)),
+      import_react.default.createElement("span", {
+        key: "unit",
+        style: { fontSize: 18, fontWeight: 700, color: C.label2, ...NUM }
+      }, "\u5143")
     ]),
     import_react.default.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) => import_react.default.createElement("div", {
-    key,
-    style: { ...CARD, flex: "1 1 130px", minWidth: 118, padding: "8px 10px" }
-  }, [
-    import_react.default.createElement("div", { key: "l", style: { fontSize: 11, color: C.label3 } }, label),
-    import_react.default.createElement("div", {
-      key: "v",
-      style: { fontSize: 14, fontWeight: 650, color: C.label, marginTop: 2, ...NUM }
-    }, Number(seconds) > 0 ? formatDuration(seconds) : "\u2014")
-  ]);
-  return import_react.default.createElement("div", { style: CARD }, [
-    import_react.default.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" }
     }, [
-      import_react.default.createElement("span", { key: "l", style: { fontSize: 12, color: C.label2 } }, t("todayProgress")),
       import_react.default.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)}`),
+      import_react.default.createElement(
+        "span",
+        { key: "target", style: { fontSize: 11, color: C.label3, ...NUM } },
+        rest ? t("restHint") : `${t("todayTarget")} ${money(snap.todayTarget, 2)}`
+      )
+    ]),
+    import_react.default.createElement("div", {
+      key: "progTop",
+      style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8, marginTop: 13, flexWrap: "wrap" }
+    }, [
+      import_react.default.createElement("span", { key: "l", style: { fontSize: 11.5, color: C.label3 } }, t("todayProgress")),
+      import_react.default.createElement("span", { key: "p", style: { fontSize: 12.5, fontWeight: 700, color: C.brand, ...NUM } }, percentText)
     ]),
     import_react.default.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" }
     }, [
       import_react.default.createElement("div", {
         key: "fill",
@@ -717,31 +991,60 @@ function ProgressCard(props) {
           width: `${(progress * 100).toFixed(2)}%`,
           height: "100%",
           borderRadius: 999,
-          background: C.brand,
-          transition: "width .4s linear"
+          background: `linear-gradient(90deg, ${C.brand} 0%, color-mix(in srgb, ${C.brand} 55%, ${C.ok}) 100%)`,
+          transition: "width .35s linear"
         }
       })
     ]),
     import_react.default.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 }
     }, [
       import_react.default.createElement("span", { key: "a" }, t("progressOfTarget")),
       import_react.default.createElement(
         "span",
-        { key: "b", style: { ...NUM } },
+        { key: "b", style: { color: C.label2, fontWeight: 600, ...NUM } },
         `${money(snap.todayEarned, 2)} / ${money(snap.todayTarget, 2)}`
       )
-    ]),
-    import_react.default.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) => import_react.default.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"
+    }
+  }, [
+    import_react.default.createElement("span", {
+      key: "l",
+      style: { fontSize: 11, color: accent ? C.label2 : C.label3, whiteSpace: "nowrap" }
+    }, label),
+    import_react.default.createElement("span", {
+      key: "v",
+      style: { fontSize: 13.5, fontWeight: 700, color: C.label, ...NUM }
+    }, value)
+  ]);
+  return import_react.default.createElement("div", {
+    style: { display: "flex", flexWrap: "wrap", gap: 9 }
+  }, [
+    chip("start", t("toStart"), Number(snap.secondsToStart) > 0 ? formatDuration(snap.secondsToStart) : "\u2014"),
+    chip("end", t("toEnd"), Number(snap.secondsToEnd) > 0 ? formatDuration(snap.secondsToEnd) : "\u2014"),
+    chip("month", t("monthEarned"), money(snap.monthEarned, 2), true)
+  ]);
+}
 var RATE_CARDS = [
   { key: "secondWage", label: "secondWage", digits: 4 },
   { key: "minuteWage", label: "minuteWage", digits: 4 },
@@ -751,27 +1054,78 @@ var RATE_CARDS = [
   { key: "monthlyWage", label: "monthlyWage", digits: 2 }
 ];
 function RatesGrid(props) {
-  const t = props.t;
-  const rates = props.rates;
+  const cards = Array.isArray(props.cards) ? props.cards : [];
   return import_react.default.createElement("div", {
     style: { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 8 }
-  }, RATE_CARDS.map((spec, index) => import_react.default.createElement("div", {
-    key: spec.key,
-    "data-stat": `stat-${index}`,
-    style: { ...CARD, padding: "9px 10px" }
+  }, cards.map((card, index) => {
+    const accent = card.accent === true;
+    return import_react.default.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})`
+        } : {}
+      }
+    }, [
+      import_react.default.createElement("div", {
+        key: "l",
+        style: { fontSize: 11, color: accent ? C.label2 : C.label3, fontWeight: accent ? 600 : 400 }
+      }, card.label),
+      import_react.default.createElement("div", {
+        key: "v",
+        style: {
+          fontSize: 15.5,
+          fontWeight: 700,
+          letterSpacing: "-.2px",
+          color: accent ? C.label : C.label,
+          marginTop: 2,
+          ...NUM
+        }
+      }, card.value)
+    ]);
+  }));
+}
+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 import_react.default.createElement("select", {
+    value: props.value,
+    "aria-label": t("viewLabel"),
+    onChange: (event) => props.onChange(event.target.value),
+    style
   }, [
-    import_react.default.createElement("div", { key: "l", style: { fontSize: 11, color: C.label3 } }, t(spec.label)),
-    import_react.default.createElement("div", {
-      key: "v",
-      style: { fontSize: 15, fontWeight: 650, color: C.label, marginTop: 2, ...NUM }
-    }, money(rates[spec.key], spec.digits))
-  ])));
+    import_react.default.createElement("option", { key: "current", value: "current" }, t("viewCurrent")),
+    ...months.map((month) => import_react.default.createElement("option", {
+      key: `m${month.month}`,
+      value: `m${month.month}`
+    }, `${month.month}${t("monthUnit")} \xB7 ${month.workdays}${t("dayUnit")} \xB7 ${t("holidayShort")}${month.holidayDays}`)),
+    import_react.default.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")}` },
@@ -780,36 +1134,165 @@ function DetailsFooter(props) {
     { key: "month", label: t("monthEarned"), value: money(snap.monthEarned, 2) }
   ];
   return import_react.default.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
+    }
   }, [
     import_react.default.createElement("div", {
       key: "items",
-      style: { display: "flex", flexWrap: "wrap", gap: "2px 14px" }
-    }, items.map((item) => import_react.default.createElement("span", {
+      style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(118px, 1fr))", gap: "7px 12px" }
+    }, items.map((item) => import_react.default.createElement("div", {
       key: item.key,
-      style: { display: "inline-flex", alignItems: "baseline", gap: 4, whiteSpace: "nowrap" }
+      style: { minWidth: 0 }
     }, [
-      import_react.default.createElement("span", { key: "l" }, `${item.label}`),
-      import_react.default.createElement("span", {
+      import_react.default.createElement("div", { key: "l", style: { fontSize: 10.5, color: C.label3 } }, item.label),
+      import_react.default.createElement("div", {
         key: "v",
-        style: { color: C.label2, fontWeight: 600, ...NUM }
+        style: { fontSize: 13, fontWeight: 650, color: C.label2, ...NUM }
       }, item.value)
+    ])))
+  ]);
+}
+var 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) => import_react.default.createElement("div", { key: section.key, style: { marginTop: section.key === "official" ? 8 : 12 } }, [
+    import_react.default.createElement("div", {
+      key: "head",
+      style: { display: "flex", alignItems: "baseline", flexWrap: "wrap", gap: 8 }
+    }, [
+      import_react.default.createElement("span", { key: "l", style: { fontSize: 11.5, fontWeight: 700, color: C.label2 } }, section.label),
+      section.tag ? import_react.default.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,
+      import_react.default.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))
+      )
+    ]),
+    import_react.default.createElement("div", {
+      key: "grid",
+      style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(118px, 1fr))", gap: 7, marginTop: 6 }
+    }, section.blocks.map((block) => import_react.default.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)`
+      }
+    }, [
+      import_react.default.createElement("div", {
+        key: "row",
+        style: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 6 }
+      }, [
+        import_react.default.createElement(
+          "span",
+          { key: "n", style: { fontSize: 11.5, fontWeight: 650, color: C.label } },
+          t(HOLIDAY_LABEL_KEYS[block.id])
+        ),
+        import_react.default.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)))
+      ]),
+      import_react.default.createElement(
+        "div",
+        { key: "r", style: { fontSize: 10, color: C.label3, marginTop: 2, ...NUM } },
+        `${shortDate(block.from)} \u2013 ${shortDate(block.to)}`
+      )
     ]))),
+    section.estimated ? import_react.default.createElement("div", {
+      key: "est-note",
+      style: { marginTop: 6, fontSize: 10.5, color: C.label3, lineHeight: 1.5 }
+    }, `\u26A0 ${t("holidayEstimateNote")}`) : null
+  ]);
+  return import_react.default.createElement("div", {
+    style: {
+      background: C.layer1,
+      border: `1px solid ${C.border1}`,
+      borderRadius: 12,
+      padding: "10px 12px"
+    }
+  }, [
     import_react.default.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" }
     }, [
-      import_react.default.createElement("span", { key: "l" }, `${t("holidaySource")}\uFF1A`),
+      import_react.default.createElement(
+        "span",
+        { key: "t", style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: ".2px" } },
+        t("holidaysCardTitle")
+      ),
       import_react.default.createElement("a", {
         key: "a",
         href: source.url,
         target: "_blank",
         rel: "noreferrer",
         title: source.title,
-        style: { color: C.brand, textDecoration: "underline" }
-      }, `${source.year} \xB7 ${t("holidaySourceLink")} \u2197`),
-      import_react.default.createElement("span", { key: "n", style: { color: C.label3 } }, `\uFF08${source.title}\uFF09`)
-    ])
+        style: { fontSize: 10.5, color: C.brand, textDecoration: "none", fontWeight: 600 }
+      }, `${source.year} ${t("holidaySourceLink")} \u2197`)
+    ]),
+    sections.map(renderSection),
+    import_react.default.createElement("div", {
+      key: "foot",
+      style: { marginTop: 8, fontSize: 10.5, color: C.label3 }
+    }, t("holidaysExtraNote").replace("{extra}", String(extra.length)))
   ]);
 }
 function SettingsSection(props) {
@@ -822,7 +1305,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,
@@ -831,10 +1314,10 @@ 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) => import_react.default.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 }
   }, [
     import_react.default.createElement("span", { key: "l", style: labelStyle }, t(labelKey)),
     import_react.default.createElement("input", {
@@ -867,37 +1350,24 @@ function SettingsSection(props) {
     }),
     import_react.default.createElement("span", { key: "l" }, t(labelKey))
   ]);
-  const textareaField = (field, labelKey) => import_react.default.createElement("label", {
-    key: field,
-    style: { display: "flex", flexDirection: "column", gap: 3, flex: "1 1 220px", minWidth: 200 }
+  return import_react.default.createElement("details", {
+    style: { background: C.layer1, border: `1px solid ${C.border1}`, borderRadius: 12, padding: "11px 13px" }
   }, [
-    import_react.default.createElement("span", { key: "l", style: labelStyle }, t(labelKey)),
-    import_react.default.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 import_react.default.createElement("details", { style: { ...CARD, padding: "10px 12px" } }, [
     import_react.default.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")),
     import_react.default.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")),
+    import_react.default.createElement("div", {
+      key: "dataNote",
+      style: { fontSize: 10.5, color: C.label3, margin: "-4px 0 10px", lineHeight: 1.55 }
+    }, t("settingsDataNote")),
     import_react.default.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"),
@@ -907,16 +1377,9 @@ function SettingsSection(props) {
       checkField("lunchEnabled", "lunchEnabledField"),
       checkField("lunchPaid", "lunchPaidField")
     ]),
-    import_react.default.createElement("div", {
-      key: "lists",
-      style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }
-    }, [
-      textareaField("holidaysText", "holidaysField"),
-      textareaField("extraWorkdaysText", "extraWorkdaysField")
-    ]),
     import_react.default.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 }
     }, [
       import_react.default.createElement("button", {
         key: "save",
@@ -924,14 +1387,19 @@ 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,
-          cursor: save.status === "saving" ? "default" : "pointer"
+          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" ? import_react.default.createElement("span", { key: "ok", style: { fontSize: 12, color: C.ok } }, save.message || t("saved")) : null,
@@ -959,6 +1427,48 @@ function NiumaPanel(props) {
   const snap = import_react.default.useMemo(() => earnedToday(cfg, now), [cfg, now]);
   const rates = snap && snap.rates ? snap.rates : computeRates(cfg, snap && snap.dateKey);
   const baseForm = import_react.default.useMemo(() => formFromConfig(cfg), [cfg]);
+  const viewYear = Number(String(snap && snap.dateKey ? snap.dateKey : "").slice(0, 4)) || (/* @__PURE__ */ new Date()).getFullYear();
+  const yearEstimated = viewYear === HOLIDAY_ESTIMATE_2027.year;
+  const yearData = import_react.default.useMemo(() => yearSummary(cfg, viewYear), [cfg, viewYear]);
+  const [view, setView] = import_react.default.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))} \xB7 ${t("viewOnlyHint")}` + (yearEstimated ? ` \xB7 ${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))} \xB7 ${t("viewOnlyHint")}` + (yearEstimated ? ` \xB7 ${t("holidayEstimateShort")}` : "");
+    viewNote = yearEstimated ? t("holidayEstimateNote") : selectedMonth.month === maxHolidayMonth.month ? `\u2605 ${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;
+  }
   const [draft, setDraft] = import_react.default.useState(null);
   const [save, setSave] = import_react.default.useState({ status: "idle", errors: [], message: "" });
   const form = draft || baseForm;
@@ -1011,79 +1521,166 @@ function NiumaPanel(props) {
   } : remote.status === "loading" ? { color: C.label3, text: t("configLoading"), retry: false } : null;
   return import_react.default.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"
     }
   }, [
-    // 标题 + 状态徽标
+    import_react.default.createElement(StyleTag, { key: "css" }),
     import_react.default.createElement("div", {
-      key: "head",
-      style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }
-    }, [
-      import_react.default.createElement("div", { key: "tt", style: { marginRight: "auto", minWidth: 0 } }, [
-        import_react.default.createElement("div", {
-          key: "t",
-          style: { fontSize: 16, fontWeight: 700, color: C.label }
-        }, t("title")),
-        import_react.default.createElement("div", {
-          key: "s",
-          style: { fontSize: 11, color: C.label3 }
-        }, t("subtitle"))
-      ]),
-      import_react.default.createElement(StatusBadge, { key: "badge", t, status: snap.status })
-    ]),
-    // 配置读取状态
-    banner ? import_react.default.createElement("div", {
-      key: "banner",
+      key: "inner",
       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
+        flexDirection: "column",
+        gap: 11,
+        width: "100%",
+        maxWidth: 820,
+        margin: "0 auto",
+        padding: "16px 18px 40px",
+        boxSizing: "border-box",
+        minWidth: 0
       }
     }, [
-      import_react.default.createElement("span", { key: "txt", style: { flex: "1 1 160px" } }, banner.text),
-      banner.retry ? import_react.default.createElement("button", {
-        key: "retry",
-        type: "button",
-        onClick: remote.refresh,
+      // 品牌头：图标块 + 标题/副标题 + 状态徽标
+      import_react.default.createElement("div", {
+        key: "head",
+        style: { display: "flex", alignItems: "center", gap: 11, flexWrap: "wrap" }
+      }, [
+        import_react.default.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)`
+          }
+        }, import_react.default.createElement(NiumaIcon, { size: 21 })),
+        import_react.default.createElement("div", { key: "tt", style: { marginRight: "auto", minWidth: 0 } }, [
+          import_react.default.createElement("div", {
+            key: "t",
+            style: { fontSize: 17.5, fontWeight: 800, letterSpacing: "-.3px", color: C.label }
+          }, t("title")),
+          import_react.default.createElement("div", {
+            key: "s",
+            style: { fontSize: 11, color: C.label3, marginTop: 1 }
+          }, t("subtitle"))
+        ]),
+        import_react.default.createElement(StatusBadge, { key: "badge", t, status: snap.status })
+      ]),
+      // 配置读取状态
+      banner ? import_react.default.createElement("div", {
+        key: "banner",
         style: {
-          border: `1px solid ${banner.color}`,
-          color: banner.color,
-          background: "transparent",
-          borderRadius: 6,
-          padding: "2px 10px",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flexWrap: "wrap",
           fontSize: 12,
-          cursor: "pointer"
+          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)`
         }
-      }, t("retry")) : null
-    ]) : null,
-    import_react.default.createElement(HeroCard, { key: "hero", t, snap }),
-    import_react.default.createElement(ProgressCard, { key: "progress", t, snap }),
-    import_react.default.createElement(RatesGrid, { key: "rates", t, rates }),
-    import_react.default.createElement(DetailsFooter, { key: "footer", t, snap, holidaySource }),
-    import_react.default.createElement(SettingsSection, {
-      key: "settings",
-      t,
-      form,
-      setField,
-      setCheck,
-      save,
-      onSave
-    })
+      }, [
+        import_react.default.createElement("span", { key: "txt", style: { flex: "1 1 160px" } }, banner.text),
+        banner.retry ? import_react.default.createElement("button", {
+          key: "retry",
+          type: "button",
+          onClick: remote.refresh,
+          style: {
+            border: `1px solid ${banner.color}`,
+            color: banner.color,
+            background: "transparent",
+            borderRadius: 6,
+            padding: "2px 10px",
+            fontSize: 12,
+            cursor: "pointer"
+          }
+        }, t("retry")) : null
+      ]) : null,
+      import_react.default.createElement(HeroCard, { key: "hero", t, snap }),
+      import_react.default.createElement(CountdownRow, { key: "countdown", t, snap }),
+      import_react.default.createElement("div", {
+        key: "ratesHead",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+          flexWrap: "wrap",
+          margin: "2px 1px -1px"
+        }
+      }, [
+        import_react.default.createElement("span", {
+          key: "t",
+          style: { fontSize: 12.5, fontWeight: 700, color: C.label2, letterSpacing: ".2px" }
+        }, t("sectionRates")),
+        import_react.default.createElement(PeriodSelect, {
+          key: "period",
+          t,
+          value: view,
+          onChange: setView,
+          year: viewYear,
+          months: yearData.months
+        })
+      ]),
+      import_react.default.createElement("div", {
+        key: "ratesHint",
+        style: { fontSize: 10.5, color: C.label3, ...NUM }
+      }, viewHint),
+      import_react.default.createElement(RatesGrid, { key: "rates", cards: viewCards }),
+      viewNote ? import_react.default.createElement("div", {
+        key: "ratesNote",
+        style: { fontSize: 10.5, color: C.label3, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }
+      }, [
+        import_react.default.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")),
+        import_react.default.createElement("span", { key: "txt" }, viewNote)
+      ]) : null,
+      import_react.default.createElement(SectionTitle, { key: "detailTitle", title: t("sectionDetail") }),
+      import_react.default.createElement(DetailsFooter, { key: "footer", t, snap, holidaySource }),
+      import_react.default.createElement(HolidaysCard, {
+        key: "holidays",
+        t,
+        holidaySource,
+        extraWorkdays: cfg.extraWorkdays
+      }),
+      import_react.default.createElement(SettingsSection, {
+        key: "settings",
+        t,
+        form,
+        setField,
+        setCheck,
+        save,
+        onSave
+      })
+    ])
   ]);
 }
 var inject = ["slots", "locale"];