dsh-offwork 0.0.0-stage → 1.0.1

package/client.js

@@ -0,0 +1,1392 @@
+// Generated by tools/build.mjs; edit client.source.js, clock.js or ui-utils.js.
+// Authored Client entry. Run node tools/build.mjs to inline the tested pure modules.
+window.__ModuleLoader__.load({
+  id: 'dsh-offwork',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+    // Pure calculation. Weekdays belong to the shift's START date, not the clock date.
+// Keep helpers inside calculate: the client build embeds this exact function.
+function calculate(settings, timestamp = Date.now()) {
+  const now = Number(timestamp);
+  if (!Number.isFinite(now)) throw new RangeError('Invalid timestamp');
+  const DAY = 86400000;
+  const formatter = new Intl.DateTimeFormat('en-CA', {
+    timeZone: settings.timezone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hourCycle: 'h23',
+  });
+  const civil = (time) => {
+    const p = Object.fromEntries(formatter.formatToParts(time).map((p) => [p.type, p.value]));
+    return Date.UTC(+p.year, +p.month - 1, +p.day, +p.hour, +p.minute, +p.second);
+  };
+  // Convert a timezone-local civil time to an absolute instant. At DST overlaps use
+  // the earlier occurrence; at gaps move forward by the gap (Temporal-compatible).
+  const instant = (local) => {
+    const offsets = [
+      ...new Set([-DAY, 0, DAY].map((delta) => civil(local + delta) - (local + delta))),
+    ];
+    const candidates = offsets.map((offset) => local - offset);
+    const exact = candidates.filter((time) => civil(time) === local);
+    if (exact.length) return Math.min(...exact);
+    const after = candidates.filter((time) => civil(time) >= local);
+    return Math.min(...(after.length ? after : candidates));
+  };
+  const minute = (text) => {
+    if (typeof text !== 'string' || !/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(text)) {
+      throw new RangeError('Shift times must be HH:mm');
+    }
+    const [h, m] = text.split(':').map(Number);
+    return h * 60 + m;
+  };
+  const start = minute(settings.start),
+    end = minute(settings.end);
+  if (start === end) throw new RangeError('Shift must not be empty');
+  const overnight = end < start;
+  const duration = (end - start + 1440) % 1440;
+  let breakOffset = 0,
+    breakDuration = 0;
+  if (settings.breakStart != null || settings.breakEnd != null) {
+    const bs = minute(settings.breakStart),
+      be = minute(settings.breakEnd);
+    if (bs !== be) {
+      breakOffset = (bs - start + 1440) % 1440;
+      breakDuration = (be - bs + 1440) % 1440;
+      if (breakOffset + breakDuration > duration || breakDuration >= duration) {
+        throw new RangeError('Break must be inside the shift and leave paid work');
+      }
+    }
+  }
+  const localNow = civil(now);
+  const today = Math.floor(localNow / DAY) * DAY;
+  const minuteNow = (localNow - today) / 60000;
+  const workday = (day) => settings.weekdays.includes(new Date(day).getUTCDay());
+  let shiftDay = today;
+  if (overnight && minuteNow < start) {
+    // Retain yesterday's finished work shift until the next shift starts. If
+    // yesterday was off, a working today is 'before' (e.g. Monday daytime).
+    if (minuteNow < end || workday(today - DAY)) shiftDay -= DAY;
+  }
+  const isWorkday = workday(shiftDay);
+  const shiftStart = instant(shiftDay + start * 60000);
+  const shiftEnd = instant(shiftDay + (start + duration) * 60000);
+  const breakStart = breakDuration ? instant(shiftDay + (start + breakOffset) * 60000) : null;
+  const breakEnd = breakDuration
+    ? instant(shiftDay + (start + breakOffset + breakDuration) * 60000)
+    : null;
+  const breakMs = breakDuration ? breakEnd - breakStart : 0;
+  const totalMs = shiftEnd - shiftStart - breakMs;
+  if (totalMs <= 0 || breakMs < 0) throw new RangeError('Shift has no paid duration');
+  const clampedNow = Math.max(shiftStart, Math.min(now, shiftEnd));
+  const elapsedMs = isWorkday
+    ? Math.max(
+        0,
+        Math.min(
+          totalMs,
+          clampedNow -
+            shiftStart -
+            (breakDuration ? Math.max(0, Math.min(clampedNow, breakEnd) - breakStart) : 0),
+        ),
+      )
+    : 0;
+  const status = !isWorkday
+    ? 'rest'
+    : now < shiftStart
+      ? 'before'
+      : now >= shiftEnd
+        ? 'done'
+        : breakDuration && now >= breakStart && now < breakEnd
+          ? 'lunch'
+          : 'working';
+  // Decimal inputs become exact rational numbers before truncation. Never use
+  // floor((salary / days * progress) * 100): binary rounding loses whole cents.
+  const rational = (number) => {
+    if (typeof number !== 'number' || !Number.isFinite(number) || number < 0)
+      throw new RangeError('Invalid salary');
+    const [mantissa, exponent = '0'] = String(number).toLowerCase().split('e');
+    const [integer, fraction = ''] = mantissa.split('.');
+    const scale = fraction.length - Number(exponent);
+    return scale >= 0
+      ? [BigInt(integer + fraction), 10n ** BigInt(scale)]
+      : [BigInt(integer + fraction) * 10n ** BigInt(-scale), 1n];
+  };
+  const payMode = settings.payMode === 'daily' ? 'daily' : 'monthly';
+  let [numerator, denominator] = rational(
+    payMode === 'daily' ? settings.dailySalary : settings.monthlySalary,
+  );
+  if (payMode === 'monthly') {
+    const [daysN, daysD] = rational(settings.workdaysPerMonth);
+    if (daysN === 0n) throw new RangeError('Workdays per month must be positive');
+    numerator *= daysD;
+    denominator *= daysN;
+  }
+  const dailyCents = Number((numerator * 100n) / denominator);
+  const earnedCents = Math.min(
+    dailyCents,
+    Number((numerator * 100n * BigInt(Math.floor(elapsedMs))) / (denominator * BigInt(totalMs))),
+  );
+  const hourlyCents = Number((numerator * 100n * 3600000n) / (denominator * BigInt(totalMs)));
+  const dateString = (day) => new Date(day).toISOString().slice(0, 10);
+  return {
+    status,
+    remaining: isWorkday ? Math.max(0, Math.ceil((shiftEnd - now) / 1000)) : 0,
+    startRemaining: status === 'before' ? Math.max(0, Math.ceil((shiftStart - now) / 1000)) : 0,
+    progress: elapsedMs / totalMs,
+    earned: earnedCents / 100,
+    daily: dailyCents / 100,
+    hourly: hourlyCents / 100,
+    date: dateString(today),
+    shiftDate: dateString(shiftDay),
+    earnedCents,
+    dailyCents,
+    payMode,
+    isWorkday,
+    overnight,
+    shiftStart,
+    shiftEnd,
+    breakStart,
+    breakEnd,
+    elapsed: elapsedMs / 1000,
+    total: totalMs / 1000,
+  };
+}
+
+// Small pure helpers shared by the browser artifact and its tests.
+function formatDuration(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return '--:--:--';
+  const n = Math.ceil(seconds);
+  return [Math.floor(n / 3600), Math.floor((n % 3600) / 60), n % 60]
+    .map((part) => String(part).padStart(2, '0'))
+    .join(':');
+}
+
+function clampPosition(position, viewport, size) {
+  const width = Math.max(0, viewport.width),
+    height = Math.max(0, viewport.height);
+  const edge = Math.min(12, width / 2, height / 2);
+  const maxX = Math.max(edge, width - size.width - edge);
+  const maxY = Math.max(edge, height - size.height - edge);
+  return {
+    x: Math.max(edge, Math.min(Number.isFinite(position?.x) ? position.x : maxX, maxX)),
+    y: Math.max(edge, Math.min(Number.isFinite(position?.y) ? position.y : 88, maxY)),
+  };
+}
+
+function clampOpacity(value, fallback = 0.82) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return fallback;
+  return Math.min(1, Math.max(0.3, number));
+}
+
+function normalizeView(value) {
+  return {
+    mini: value?.mini !== false,
+    masked: value?.masked !== false,
+    opacity: clampOpacity(value?.opacity),
+    position:
+      Number.isFinite(value?.position?.x) && Number.isFinite(value?.position?.y)
+        ? { x: value.position.x, y: value.position.y }
+        : null,
+  };
+}
+
+function decodeCommand(rpc) {
+  if (!rpc || rpc.ok !== true) throw new Error(rpc?.error?.message || 'RPC unavailable');
+  const result = rpc.value?.result;
+  if (!result || typeof result.text !== 'string') throw new Error('Command unavailable');
+  let data;
+  try {
+    data = JSON.parse(result.text);
+  } catch {
+    throw new Error('Invalid command response');
+  }
+  if (result.kind !== 'success' || data?.ok !== true)
+    throw new Error(data?.error || 'Request failed');
+  if (!data.settings || typeof data.settings !== 'object') throw new Error('Missing settings');
+  return data;
+}
+
+function changedSettings(original, draft) {
+  return Object.fromEntries(
+    Object.entries(draft).filter(
+      ([key, value]) => JSON.stringify(value) !== JSON.stringify(original[key]),
+    ),
+  );
+}
+
+    const messages = {
+      zh: {
+        title: '下班计时器',
+        working: '距离下班',
+        before: '距离开工',
+        lunch: '午休中',
+        done: '本班已完成',
+        rest: '今天休息',
+        earned: '本班已赚 · 税前',
+        daily: '日薪',
+        hourly: '有效时薪',
+        progress: '计薪进度',
+        settings: '设置',
+        collapse: '收起为小条',
+        expand: '展开',
+        hide: '隐藏工资',
+        show: '显示工资',
+        save: '保存',
+        cancel: '取消',
+        monthlySalary: '税前月薪（元）',
+        dailySalary: '税前日薪（元）',
+        workdaysPerMonth: '月计薪天数',
+        start: '上班时间',
+        end: '下班时间',
+        breakStart: '休息开始',
+        breakEnd: '休息结束',
+        timezone: '时区',
+        weekdays: '班次开始日',
+        payMode: '计薪方式',
+        monthly: '月薪',
+        dailyMode: '日薪',
+        loading: '正在读取设置…',
+        retry: '重新读取',
+        noSession: '请先打开或创建一个会话。',
+        error: '操作失败，请重试。',
+        saved: '设置已保存',
+        days: '日一二三四五六',
+        privacy: '配置保存在 Harness 所在机器；读写结果进入所选会话记录。',
+        drag: '按住可拖动；方向键微调，Home 复位',
+        setup: '先设好你的作息',
+        setupHint: '示例数值不是你的收入，保存后才开始计时。',
+        breakEnabled: '扣除无薪休息',
+        noBreak: '不扣休息',
+        nextDay: '次日',
+        preview: '折算',
+        salaryGroup: '薪资',
+        scheduleGroup: '作息',
+        appearanceGroup: '外观',
+        advanced: '高级设置',
+        sessionHint: '仅用于记录配置读写操作，不是账本，不影响工资计算。',
+        session: '操作记录会话',
+        masked: '工资已隐藏',
+        reset: '复位位置',
+        synced: '已读取最新配置',
+        refresh: '读取最新配置',
+        busy: '保存中…',
+        storage: '浏览器禁止本地存储；位置与透明度本次有效。',
+        shiftDate: '班次',
+        opacity: '背景透明度',
+        opacityHint: '只影响背景，不影响文字。',
+      },
+      en: {
+        title: 'Offwork Clock',
+        working: 'Until clock-out',
+        before: 'Until work starts',
+        lunch: 'On break',
+        done: 'Shift complete',
+        rest: 'Day off',
+        earned: 'Earned this shift · gross',
+        daily: 'Shift pay',
+        hourly: 'Paid-hour rate',
+        progress: 'Paid progress',
+        settings: 'Settings',
+        collapse: 'Minimize to strip',
+        expand: 'Expand',
+        hide: 'Hide salary',
+        show: 'Show salary',
+        save: 'Save',
+        cancel: 'Cancel',
+        monthlySalary: 'Monthly gross (CNY)',
+        dailySalary: 'Daily gross (CNY)',
+        workdaysPerMonth: 'Paid days / month',
+        start: 'Shift starts',
+        end: 'Shift ends',
+        breakStart: 'Break starts',
+        breakEnd: 'Break ends',
+        timezone: 'Time zone',
+        weekdays: 'Shift starting days',
+        payMode: 'Pay basis',
+        monthly: 'Monthly',
+        dailyMode: 'Daily',
+        loading: 'Loading settings…',
+        retry: 'Reload',
+        noSession: 'Open or create a session first.',
+        error: 'Operation failed. Please retry.',
+        saved: 'Settings saved',
+        days: 'SMTWTFS',
+        privacy: 'Settings are saved on the Harness host; results enter the selected session log.',
+        drag: 'Drag to move; arrow keys to adjust; Home resets',
+        setup: 'Set up your schedule',
+        setupHint: 'These are example values, not your income. Save to start.',
+        breakEnabled: 'Deduct unpaid break',
+        noBreak: 'no break',
+        nextDay: 'next day',
+        preview: 'Preview',
+        salaryGroup: 'Salary',
+        scheduleGroup: 'Schedule',
+        appearanceGroup: 'Appearance',
+        advanced: 'Advanced',
+        sessionHint:
+          'Logs configuration operations only; not a ledger and does not affect pay calculations.',
+        session: 'Action log session',
+        masked: 'Salary hidden',
+        reset: 'Reset position',
+        synced: 'Latest settings loaded',
+        refresh: 'Reload latest settings',
+        busy: 'Saving…',
+        storage: 'Local storage is blocked; position and opacity last only for this visit.',
+        shiftDate: 'Shift',
+        opacity: 'Surface opacity',
+        opacityHint: 'Affects the background only.',
+      },
+    };
+    const STYLE = `
+.owc-v2{--owc-accent:color-mix(in srgb,var(--dsw-alias-brand-primary) 65%,#2563eb);pointer-events:auto;position:fixed;top:96px;right:24px;z-index:40;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px;color:var(--dsw-alias-label-primary);font:13px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none}
+.owc-v2:active{cursor:grabbing}
+.owc-v2.owc-compact{touch-action:none;border-radius:18px}
+.owc-v2:not(.owc-compact){width:296px}
+.owc-v2 :is(button,input,select,label,a){cursor:pointer;user-select:auto;-webkit-user-select:auto}
+.owc-v2 :is(input,select){user-select:text;-webkit-user-select:text}
+.owc-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--owc-alpha,.82);background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 97%,var(--owc-accent));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 18%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--dsw-alias-bg-base) 70%,transparent),0 8px 20px color-mix(in srgb,var(--dsw-alias-label-primary) 7%,transparent),0 14px 34px color-mix(in srgb,var(--owc-accent) 5%,transparent);transition:opacity .18s ease}
+.owc-content{position:relative;border-radius:inherit;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
+.owc-v2 button{appearance:none;-webkit-appearance:none;border:0;margin:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px;min-height:28px;border-radius:10px;transition:background .15s ease,color .15s ease}
+.owc-v2 button:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 7%,transparent)}
+.owc-v2 button:focus-visible,.owc-v2 :is(input,select):focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
+.owc-v2 button:disabled{opacity:.45;cursor:not-allowed;background:transparent}
+.owc-icon{color:var(--dsw-alias-label-secondary);min-width:28px}
+.owc-text{font-size:11px;color:var(--dsw-alias-label-secondary);padding:4px 6px;min-height:24px;white-space:nowrap}
+.owc-text:hover{color:var(--dsw-alias-label-primary)}
+.owc-pill{display:flex;flex-direction:column;gap:8px;padding:12px 10px 9px 14px;min-width:168px}
+.owc-pill-top>svg{color:var(--owc-accent);flex:none}
+.owc-pill-top>.owc-icon{color:var(--dsw-alias-label-secondary)}
+.owc-pill-top{display:flex;align-items:center;gap:7px;min-width:0}
+.owc-grip{display:flex;align-items:baseline;gap:7px;touch-action:none;min-width:0}
+.owc-pill-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 12%,transparent)}
+.owc-pill-actions{display:flex;align-items:center;gap:2px}
+.owc-pill-status{font-size:10px;color:var(--dsw-alias-label-secondary);white-space:nowrap;letter-spacing:.02em}
+.owc-pill-time{font-size:24px;font-weight:500;letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.25}
+.owc-pill-money{font-size:13px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:46px}
+.owc-dot{width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-state-idle-primary);flex:none}
+.owc-v2[data-status=working] .owc-dot{background:var(--dsw-alias-state-success-primary)}
+.owc-v2[data-status=lunch] .owc-dot{background:var(--dsw-alias-state-warn-primary)}
+.owc-v2[data-status=done] .owc-dot{background:var(--dsw-alias-brand-primary)}
+.owc-v2[data-status=before] .owc-dot,.owc-v2[data-status=rest] .owc-dot{opacity:.6}
+.owc-head{display:flex;align-items:center;gap:4px;padding:12px 12px 10px 18px;margin-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 12%,transparent)}
+.owc-title{flex:1;min-width:0;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--dsw-alias-label-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.owc-main{padding:4px 17px 12px}
+.owc-status{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dsw-alias-label-secondary);margin-bottom:1px}
+.owc-time{font-size:34px;font-weight:350;line-height:1.28;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
+.owc-progress{height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--dsw-alias-label-primary) 9%,transparent);margin:10px 0 16px}
+.owc-progress>div{height:100%;border-radius:3px;background:var(--owc-accent);transition:width .6s linear}
+.owc-earn-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.owc-money{font-size:26px;font-weight:400;letter-spacing:-.6px;font-variant-numeric:tabular-nums;margin-top:1px}
+.owc-muted{font-size:10.5px;color:var(--dsw-alias-label-secondary)}
+.owc-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--dsw-alias-label-primary) 8%,transparent)}
+.owc-stats>div{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--dsw-alias-label-secondary) 5%,transparent);border:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 8%,transparent)}
+.owc-stats span{display:block;font-size:10px;color:var(--dsw-alias-label-secondary)}
+.owc-stats strong{display:block;margin-top:1px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
+.owc-meta{margin-top:12px}
+.owc-meta span{display:block;font-size:10.5px;line-height:1.7;color:var(--dsw-alias-label-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.owc-row-actions{display:flex;gap:4px;margin-top:8px;margin-left:-6px}
+.owc-form{padding:2px 17px 15px}
+.owc-v2.owc-editing{width:340px}
+.owc-setting-group{min-width:0;margin:0 0 16px;padding:12px 12px 2px;border:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 15%,transparent);border-radius:14px;background:color-mix(in srgb,var(--dsw-alias-bg-base) 24%,transparent)}
+.owc-setting-group legend{padding:0 6px;font-size:12px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.owc-form :is(input[type=time],input[type=number],select){min-height:36px;border-radius:10px}
+.owc-advanced{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--dsw-alias-label-secondary) 5%,transparent)}
+.owc-advanced summary{cursor:pointer;font-size:12px;font-weight:500}
+.owc-advanced[open] summary{margin-bottom:10px}
+.owc-grip:focus-visible,.owc-advanced summary:focus-visible{outline:2px solid var(--owc-accent);outline-offset:3px}
+.owc-field{display:block;margin-bottom:10px}
+.owc-field>span{display:block;font-size:10.5px;color:var(--dsw-alias-label-secondary);margin-bottom:4px}
+.owc-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.owc-v2 :is(input[type=text],input[type=time],input[type=number],select){width:100%;box-sizing:border-box;font:inherit;font-size:12px;padding:6px 8px;border-radius:9px;border:1px solid color-mix(in srgb,var(--dsw-alias-label-primary) 13%,transparent);background:color-mix(in srgb,var(--dsw-alias-bg-base) 55%,transparent);color:inherit;min-height:30px}
+.owc-v2 select option{background:var(--dsw-alias-bg-overlay);color:var(--dsw-alias-label-primary)}
+.owc-seg{display:flex;gap:3px;padding:3px;border-radius:11px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 6%,transparent)}
+.owc-seg button{flex:1;font-size:11.5px;min-height:26px;border-radius:8px}
+.owc-seg button[aria-pressed=true]{background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 92%,var(--dsw-alias-bg-base));box-shadow:0 1px 3px color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent)}
+.owc-days{display:flex;gap:3px}
+.owc-days button{flex:1;min-height:26px;font-size:11px;border-radius:8px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent)}
+.owc-days button[aria-pressed=true]{background:color-mix(in srgb,var(--owc-accent) 12%,transparent);color:var(--owc-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--owc-accent) 22%,transparent)}
+.owc-check{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:11.5px;margin:0 0 10px}
+.owc-check input{appearance:auto;-webkit-appearance:auto;width:auto;accent-color:var(--dsw-alias-brand-primary)}
+.owc-private{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:30px;padding:4px 6px 4px 10px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--dsw-alias-label-primary) 16%,transparent);font-size:12px;color:var(--dsw-alias-label-secondary)}
+.owc-preview{font-size:11px;color:var(--dsw-alias-label-secondary);padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent);margin:0 0 10px;font-variant-numeric:tabular-nums}
+.owc-hint{font-size:10.5px;line-height:1.6;color:var(--dsw-alias-label-secondary);margin:0 0 10px}
+.owc-range{width:100%;accent-color:var(--dsw-alias-brand-primary);margin:1px 0 2px}
+.owc-save{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:12px}
+.owc-v2 button.owc-primary{background:var(--owc-accent);color:#fff;padding:0 16px;min-height:36px;font-size:12px;font-weight:600;border-radius:12px}
+.owc-v2 button.owc-primary:hover{background:color-mix(in srgb,var(--owc-accent) 88%,#000)}
+.owc-v2 button.owc-primary:disabled{opacity:.5;color:#fff;background:var(--owc-accent)}
+.owc-error,.owc-note{padding:0 17px 9px;margin:0;font-size:10.5px;line-height:1.6}
+.owc-error{color:var(--dsw-alias-state-error-primary)}
+.owc-note{color:var(--dsw-alias-label-secondary)}
+@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.owc-glass{opacity:1}}
+@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.owc-glass{opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none}}
+@media(prefers-reduced-motion:reduce){.owc-v2 button,.owc-glass,.owc-progress>div{transition:none}}
+@media(max-width:420px){.owc-pill{min-width:136px;padding:8px 8px 7px 12px}.owc-pill-status{display:none}.owc-pill-time{font-size:22px}.owc-main,.owc-form{padding-left:14px;padding-right:14px}.owc-time{font-size:31px}}
+`;
+    const ICONS = {
+      eye: [
+        ['path', { d: 'M1.7 8S4.3 3.9 8 3.9 14.3 8 14.3 8 11.7 12.1 8 12.1 1.7 8 1.7 8Z' }],
+        ['circle', { cx: 8, cy: 8, r: 2.05 }],
+      ],
+      eyeOff: [
+        ['path', { d: 'M1.7 8S4.3 3.9 8 3.9 14.3 8 14.3 8 11.7 12.1 8 12.1 1.7 8 1.7 8Z' }],
+        ['circle', { cx: 8, cy: 8, r: 2.05 }],
+        ['path', { d: 'M3 3l10 10' }],
+      ],
+      sliders: [
+        ['path', { d: 'M2.2 4.6h3.4M9.2 4.6h4.6M2.2 11.4h5.4M11.4 11.4h2.4' }],
+        ['circle', { cx: 7.3, cy: 4.6, r: 1.55 }],
+        ['circle', { cx: 9.4, cy: 11.4, r: 1.55 }],
+      ],
+      alarm: [
+        ['circle', { cx: 8, cy: 9, r: 4.5 }],
+        ['path', { d: 'M8 6.5V9l1.7 1M2 4l2-2M12 2l2 2M5 13l-1 2M11 13l1 2' }],
+      ],
+      chevronUp: [['path', { d: 'M3.7 9.8L8 5.5l4.3 4.3' }]],
+      chevronDown: [['path', { d: 'M3.7 6.2L8 10.5l4.3-4.3' }]],
+      close: [['path', { d: 'M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' }]],
+      refresh: [
+        ['path', { d: 'M13.1 8a5.1 5.1 0 1 1-1.5-3.6' }],
+        ['path', { d: 'M13.1 3v3.2H9.9' }],
+      ],
+    };
+    const iconSvg = (name, size = 15) =>
+      h(
+        'svg',
+        {
+          width: size,
+          height: size,
+          viewBox: '0 0 16 16',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: 1.55,
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          'aria-hidden': 'true',
+          focusable: 'false',
+        },
+        ICONS[name].map(([tag, attrs], index) => h(tag, { key: index, ...attrs })),
+      );
+
+    return {
+      inject: ['slots', 'locale', 'remote', 'remote.commands'],
+      apply(ctx) {
+        for (const [lang, dict] of Object.entries(messages))
+          ctx.effect(() => ctx.locale.register('offwork-clock', lang, dict));
+        const viewKey = 'dsh.offwork-clock.view.v4';
+        const legacyKey = 'dsh.offwork-clock.view.v3';
+
+        function Clock(props) {
+          const locale = React.useSyncExternalStore(
+            (fn) => ctx.locale.subscribe(fn),
+            () => ctx.locale.getSnapshot(),
+          );
+          const t = ctx.locale.bind('offwork-clock');
+          const sessions = props.useSessions((s) => s);
+          const sessionIds = Array.isArray(sessions?.ids) ? sessions.ids : [];
+          const [sessionChoice, setSessionChoice] = React.useState('');
+          const sessionId = sessionIds.includes(sessionChoice) ? sessionChoice : sessionIds[0];
+          const [data, setData] = React.useState(null);
+          const [draft, setDraft] = React.useState(null);
+          const [editing, setEditing] = React.useState(false);
+          const [busy, setBusy] = React.useState(false);
+          const [error, setError] = React.useState('');
+          const [notice, setNotice] = React.useState('');
+          const [storageError, setStorageError] = React.useState(false);
+          const [now, setNow] = React.useState(Date.now());
+          const [view, setView] = React.useState(normalizeView(null));
+          const [ready, setReady] = React.useState(false);
+          const box = React.useRef(null);
+          const dragState = React.useRef(null);
+          const lastPosition = React.useRef(null);
+          const generation = React.useRef(0);
+          const requestBusy = React.useRef(false);
+          const focusReturn = React.useRef(null);
+
+          const settings = data?.settings;
+          const workingDraft = draft || settings;
+          const state = settings ? safeCalculate(settings) : null;
+          const preview = workingDraft ? safeCalculate(workingDraft) : null;
+          const safeState = state && !state.error ? state : null;
+          const collapsed = !!safeState && !editing && view.mini && !error && !state?.error;
+          const seconds = safeState
+            ? safeState.status === 'before'
+              ? safeState.startRemaining
+              : safeState.remaining
+            : NaN;
+          const duration = formatDuration(seconds);
+          const formatMoney = React.useMemo(
+            () =>
+              new Intl.NumberFormat(locale.active, {
+                style: 'currency',
+                currency: 'CNY',
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              }),
+            [locale.active],
+          );
+          const money = (value) => (view.masked ? '••••' : formatMoney.format(value));
+          const moneyText = safeState ? money(safeState.earned) : '—';
+          const cardStyle = Object.assign(
+            { '--owc-alpha': String(view.opacity) },
+            view.position ? { left: view.position.x, top: view.position.y, right: 'auto' } : {},
+          );
+
+          function safeCalculate(value) {
+            try {
+              return calculate(value, now);
+            } catch (e) {
+              return { error: e instanceof Error ? e.message : t('error') };
+            }
+          }
+          function errorText(e) {
+            return e instanceof Error ? e.message : t('error');
+          }
+          function setPreference(patch) {
+            setView((current) => ({ ...current, ...patch }));
+          }
+
+          const clamp = React.useCallback(
+            (position) =>
+              clampPosition(
+                position,
+                { width: window.innerWidth, height: window.innerHeight },
+                {
+                  width: box.current?.offsetWidth || 300,
+                  height: box.current?.offsetHeight || 200,
+                },
+              ),
+            [],
+          );
+
+          React.useEffect(() => {
+            try {
+              const saved = localStorage.getItem(viewKey);
+              const legacy = !saved ? JSON.parse(localStorage.getItem(legacyKey) || 'null') : null;
+              setView(
+                normalizeView(
+                  saved
+                    ? JSON.parse(saved)
+                    : { position: legacy?.position ?? null, masked: legacy?.masked ?? true },
+                ),
+              );
+            } catch {
+              setStorageError(true);
+            }
+            setReady(true);
+            const sync = (e) => {
+              if (e.key !== viewKey) return;
+              try {
+                setView(normalizeView(JSON.parse(e.newValue || 'null')));
+              } catch {}
+            };
+            window.addEventListener('storage', sync);
+            return () => window.removeEventListener('storage', sync);
+          }, []);
+
+          React.useEffect(() => {
+            if (!ready) return;
+            try {
+              localStorage.setItem(viewKey, JSON.stringify(normalizeView(view)));
+            } catch {
+              setStorageError(true);
+            }
+          }, [ready, view]);
+
+          React.useEffect(() => {
+            if (sessionId) reload();
+            else setError(t('noSession'));
+            return () => {
+              generation.current++;
+            };
+          }, [sessionId]);
+
+          React.useEffect(() => {
+            let timer;
+            const tick = () => {
+              setNow(Date.now());
+              timer = setTimeout(tick, 1000 - (Date.now() % 1000));
+            };
+            const visibility = () => {
+              clearTimeout(timer);
+              setNow(Date.now());
+              if (!document.hidden) tick();
+            };
+            if (!document.hidden) tick();
+            document.addEventListener('visibilitychange', visibility);
+            return () => {
+              clearTimeout(timer);
+              document.removeEventListener('visibilitychange', visibility);
+            };
+          }, []);
+
+          React.useEffect(() => {
+            const resize = () =>
+              setView((current) =>
+                current.position ? { ...current, position: clamp(current.position) } : current,
+              );
+            const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(resize) : null;
+            if (box.current) ro?.observe(box.current);
+            window.addEventListener('resize', resize);
+            return () => {
+              ro?.disconnect();
+              window.removeEventListener('resize', resize);
+            };
+          }, [clamp]);
+
+          React.useEffect(() => {
+            if (!editing) {
+              focusReturn.current?.focus?.();
+              return;
+            }
+            box.current?.querySelector('form input,form select')?.focus?.();
+          }, [editing]);
+
+          React.useEffect(
+            () => () => {
+              generation.current++;
+              dragState.current = null;
+            },
+            [],
+          );
+
+          async function request(action, patch) {
+            if (!sessionId) throw new Error(t('noSession'));
+            const rpc = await ctx.remote.commands.execute(
+              sessionId,
+              '/offwork-clock ' + action + (patch ? ' ' + JSON.stringify(patch) : ''),
+              [],
+            );
+            return decodeCommand(rpc);
+          }
+
+          async function reload(explicit = false) {
+            if (requestBusy.current) return;
+            const token = ++generation.current;
+            setBusy(true);
+            setError('');
+            try {
+              const next = await request('get');
+              if (token !== generation.current) return;
+              setData(next);
+              if (!next.configured) {
+                setDraft({ ...next.settings });
+                setEditing(true);
+              }
+              if (explicit) setNotice(t('synced'));
+            } catch (e) {
+              if (token === generation.current) setError(errorText(e));
+            } finally {
+              if (token === generation.current) setBusy(false);
+            }
+          }
+
+          async function save(event) {
+            event.preventDefault();
+            if (requestBusy.current) return;
+            requestBusy.current = true;
+            setBusy(true);
+            setError('');
+            const token = ++generation.current;
+            try {
+              const next = await request('set', changedSettings(settings, draft));
+              if (token === generation.current) {
+                setData(next);
+                setEditing(false);
+                setDraft(null);
+                setNotice(t('saved'));
+              }
+            } catch (e) {
+              if (token === generation.current) setError(errorText(e));
+            } finally {
+              requestBusy.current = false;
+              if (token === generation.current) setBusy(false);
+            }
+          }
+
+          function commitPosition(position) {
+            const next = clamp(position);
+            setPreference({ position: next });
+            lastPosition.current = next;
+          }
+          function dragDown(e) {
+            if (e.button !== 0) return;
+            if (
+              e.target.closest?.('button,input,select,label,a,textarea,summary,[contenteditable]')
+            )
+              return;
+            const rect = box.current.getBoundingClientRect();
+            dragState.current = {
+              dx: e.clientX - rect.left,
+              dy: e.clientY - rect.top,
+              x0: e.clientX,
+              y0: e.clientY,
+              moved: false,
+            };
+            try {
+              e.currentTarget.setPointerCapture?.(e.pointerId);
+            } catch {}
+          }
+          function dragMove(e) {
+            const d = dragState.current;
+            if (!d) return;
+            if (!d.moved && Math.abs(e.clientX - d.x0) + Math.abs(e.clientY - d.y0) < 4) return;
+            d.moved = true;
+            const next = clamp({ x: e.clientX - d.dx, y: e.clientY - d.dy });
+            lastPosition.current = next;
+            if (box.current) {
+              box.current.style.left = next.x + 'px';
+              box.current.style.top = next.y + 'px';
+              box.current.style.right = 'auto';
+            }
+          }
+          function dragEnd(e) {
+            const d = dragState.current;
+            if (!d) return;
+            dragState.current = null;
+            if (d.moved && lastPosition.current) commitPosition(lastPosition.current);
+            try {
+              if (e.currentTarget.hasPointerCapture?.(e.pointerId))
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            } catch {}
+          }
+          function gripKeys(e) {
+            if (e.key === 'Home') {
+              e.preventDefault();
+              setPreference({ position: null });
+              return;
+            }
+            if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return;
+            e.preventDefault();
+            const rect = box.current.getBoundingClientRect();
+            commitPosition({
+              x: rect.left + (e.key === 'ArrowRight' ? 10 : e.key === 'ArrowLeft' ? -10 : 0),
+              y: rect.top + (e.key === 'ArrowDown' ? 10 : e.key === 'ArrowUp' ? -10 : 0),
+            });
+          }
+
+          function openEditor(e) {
+            focusReturn.current = e.currentTarget;
+            setDraft({ ...settings });
+            setEditing(true);
+            setError('');
+            setNotice('');
+          }
+          function closeEditor() {
+            if (!data?.configured) return;
+            setEditing(false);
+            setDraft(null);
+            setError('');
+          }
+          function update(key, value) {
+            setDraft((current) => ({ ...current, [key]: value }));
+          }
+          function toggleBreak(e) {
+            const point = (text) => +text.slice(0, 2) * 60 + +text.slice(3);
+            const label = (minutes) =>
+              String(Math.floor(minutes / 60)).padStart(2, '0') +
+              ':' +
+              String(minutes % 60).padStart(2, '0');
+            setDraft((current) => {
+              if (!e.target.checked)
+                return { ...current, breakStart: current.start, breakEnd: current.start };
+              const start = point(current.start);
+              const span = (point(current.end) - start + 1440) % 1440;
+              return {
+                ...current,
+                breakStart: current.start,
+                breakEnd: label((start + Math.max(1, Math.min(60, Math.floor(span / 2)))) % 1440),
+              };
+            });
+          }
+
+          const label = (text, control) =>
+            h('label', { className: 'owc-field' }, h('span', null, text), control);
+          const numberInput = (key) =>
+            h('input', {
+              name: key,
+              type: 'number',
+              step: 'any',
+              min: key === 'workdaysPerMonth' ? '0.01' : '0',
+              value: workingDraft?.[key] ?? '',
+              disabled: busy,
+              onChange: (e) => update(key, e.target.value === '' ? '' : e.target.valueAsNumber),
+            });
+          const timeInput = (key) =>
+            h('input', {
+              name: key,
+              type: 'time',
+              required: true,
+              value: workingDraft?.[key] ?? '',
+              disabled: busy,
+              onChange: (e) => update(key, e.target.value),
+            });
+          const sessionSelect = () =>
+            h(
+              'select',
+              {
+                value: sessionId || '',
+                disabled: busy,
+                onChange: (e) => setSessionChoice(e.target.value),
+              },
+              sessionIds.length
+                ? sessionIds.map((id) =>
+                    h(
+                      'option',
+                      { key: id, value: id },
+                      sessions?.byId?.[id]?.title || String(id).slice(0, 12),
+                    ),
+                  )
+                : h('option', { value: '' }, t('noSession')),
+            );
+          const salaryToggle = () =>
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'owc-text',
+                'aria-pressed': view.masked,
+                title: t(view.masked ? 'show' : 'hide'),
+                onClick: () => setPreference({ masked: !view.masked }),
+              },
+              iconSvg(view.masked ? 'eyeOff' : 'eye', 13),
+              t(view.masked ? 'show' : 'hide'),
+            );
+
+          const strip = () =>
+            h(
+              'div',
+              { className: 'owc-pill' },
+              h(
+                'div',
+                { className: 'owc-pill-top' },
+                iconSvg('alarm', 16),
+                h(
+                  'span',
+                  { className: 'owc-grip', tabIndex: 0, title: t('drag'), onKeyDown: gripKeys },
+                  safeState.status !== 'done' &&
+                    h('span', { className: 'owc-pill-status' }, t(safeState.status)),
+                  h('span', { className: 'owc-pill-time' }, duration),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    style: { marginLeft: 'auto' },
+                    title: t('expand'),
+                    'aria-label': t('expand'),
+                    onClick: () => setPreference({ mini: false }),
+                  },
+                  iconSvg('chevronUp', 14),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-pill-bottom' },
+                h(
+                  'span',
+                  {
+                    className: 'owc-pill-money',
+                    'aria-label': view.masked ? t('masked') : moneyText,
+                  },
+                  moneyText,
+                ),
+                h(
+                  'div',
+                  { className: 'owc-pill-actions' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      title: t(view.masked ? 'show' : 'hide'),
+                      'aria-label': t(view.masked ? 'show' : 'hide'),
+                      onClick: () => setPreference({ masked: !view.masked }),
+                    },
+                    iconSvg(view.masked ? 'eyeOff' : 'eye', 14),
+                  ),
+                ),
+              ),
+            );
+
+          const panelHead = () =>
+            h(
+              'div',
+              { className: 'owc-head' },
+              h(
+                'span',
+                {
+                  className: 'owc-title',
+                  tabIndex: 0,
+                  title: t('drag'),
+                  onKeyDown: gripKeys,
+                },
+                editing ? t(data?.configured ? 'settings' : 'setup') : t('title'),
+              ),
+              editing
+                ? data?.configured &&
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-icon',
+                        title: t('cancel'),
+                        'aria-label': t('cancel'),
+                        onClick: closeEditor,
+                        disabled: busy,
+                      },
+                      iconSvg('close'),
+                    )
+                : h(
+                    React.Fragment,
+                    null,
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-icon',
+                        title: t('settings'),
+                        'aria-label': t('settings'),
+                        onClick: openEditor,
+                        disabled: busy,
+                      },
+                      iconSvg('sliders'),
+                    ),
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-icon',
+                        title: t('collapse'),
+                        'aria-label': t('collapse'),
+                        onClick: () => setPreference({ mini: true }),
+                      },
+                      iconSvg('chevronDown'),
+                    ),
+                  ),
+            );
+
+          const panelBody = () => {
+            if (!safeState)
+              return h(
+                'div',
+                { className: 'owc-main' },
+                h(
+                  'div',
+                  { className: 'owc-status' },
+                  h('span', { className: 'owc-dot' }),
+                  t('loading'),
+                ),
+                !sessionId && h('p', { className: 'owc-hint' }, t('noSession')),
+                h(
+                  'div',
+                  { className: 'owc-row-actions' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-text',
+                      onClick: () => reload(true),
+                      disabled: busy || !sessionId,
+                    },
+                    iconSvg('refresh', 12),
+                    t('retry'),
+                  ),
+                ),
+              );
+            const status = safeState.status === 'done' ? '' : t(safeState.status);
+            return h(
+              'div',
+              { className: 'owc-main' },
+              status &&
+                h('div', { className: 'owc-status' }, h('span', { className: 'owc-dot' }), status),
+              h('div', { className: 'owc-time', 'aria-label': status + ' ' + duration }, duration),
+              h(
+                'div',
+                {
+                  className: 'owc-progress',
+                  role: 'progressbar',
+                  'aria-label': t('progress'),
+                  'aria-valuenow': Math.floor(safeState.progress * 100),
+                  'aria-valuemin': 0,
+                  'aria-valuemax': 100,
+                },
+                h('div', { style: { width: safeState.progress * 100 + '%' } }),
+              ),
+              h(
+                'div',
+                { className: 'owc-earn-row' },
+                h('span', { className: 'owc-muted' }, t('earned')),
+                salaryToggle(),
+              ),
+              h(
+                'div',
+                { className: 'owc-money', 'aria-label': view.masked ? t('masked') : moneyText },
+                moneyText,
+              ),
+              h(
+                'div',
+                { className: 'owc-stats' },
+                h(
+                  'div',
+                  null,
+                  h('span', null, t('daily')),
+                  h('strong', null, money(safeState.daily)),
+                ),
+                h(
+                  'div',
+                  null,
+                  h('span', null, t('hourly')),
+                  h('strong', null, money(safeState.hourly)),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-meta' },
+                h(
+                  'span',
+                  null,
+                  settings.start +
+                    ' — ' +
+                    settings.end +
+                    (settings.end < settings.start ? ' +1' : '') +
+                    ' · ' +
+                    (settings.breakStart === settings.breakEnd
+                      ? t('noBreak')
+                      : settings.breakStart + '–' + settings.breakEnd),
+                ),
+                h(
+                  'span',
+                  null,
+                  t('shiftDate') + ' ' + safeState.shiftDate + ' · ' + settings.timezone,
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-row-actions' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-text',
+                    onClick: () => reload(true),
+                    disabled: busy,
+                  },
+                  iconSvg('refresh', 12),
+                  t('refresh'),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-text',
+                    onClick: () => setPreference({ position: null }),
+                  },
+                  t('reset'),
+                ),
+              ),
+            );
+          };
+
+          const editor = () => {
+            if (!workingDraft) return null;
+            const payDaily = workingDraft.payMode === 'daily';
+            const salaryKey = payDaily ? 'dailySalary' : 'monthlySalary';
+            const salaryControl = view.masked
+              ? h(
+                  'div',
+                  { className: 'owc-private' },
+                  h('span', null, '••••'),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-text',
+                      'aria-label': t('show'),
+                      onClick: () => setPreference({ masked: false }),
+                    },
+                    t('show'),
+                  ),
+                )
+              : numberInput(salaryKey);
+            const breakOn = workingDraft.breakStart !== workingDraft.breakEnd;
+            const commonZones = [
+              'Asia/Shanghai',
+              'Asia/Hong_Kong',
+              'Asia/Taipei',
+              'Asia/Singapore',
+              'Asia/Tokyo',
+              'Asia/Seoul',
+              'Asia/Kolkata',
+              'Europe/London',
+              'Europe/Paris',
+              'America/New_York',
+              'America/Los_Angeles',
+              'Australia/Sydney',
+              'UTC',
+            ];
+            let allZones = [];
+            try {
+              allZones = Intl.supportedValuesOf('timeZone');
+            } catch {}
+            const zones = [
+              ...new Set([workingDraft.timezone, ...commonZones, ...allZones].filter(Boolean)),
+            ];
+            return h(
+              'form',
+              {
+                className: 'owc-form',
+                onSubmit: save,
+                onKeyDown: (e) => {
+                  if (e.key === 'Escape') {
+                    e.preventDefault();
+                    closeEditor();
+                  }
+                },
+              },
+              !data?.configured && h('p', { className: 'owc-hint' }, t('setupHint')),
+              h(
+                'fieldset',
+                { className: 'owc-setting-group' },
+                h('legend', null, t('salaryGroup')),
+                label(
+                  t('payMode'),
+                  h(
+                    'div',
+                    { className: 'owc-seg' },
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        disabled: busy,
+                        'aria-pressed': !payDaily,
+                        'aria-label': t('monthly'),
+                        onClick: () => update('payMode', 'monthly'),
+                      },
+                      t('monthly'),
+                    ),
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        disabled: busy,
+                        'aria-pressed': payDaily,
+                        'aria-label': t('dailyMode'),
+                        onClick: () => update('payMode', 'daily'),
+                      },
+                      t('dailyMode'),
+                    ),
+                  ),
+                ),
+                h(
+                  'div',
+                  { className: 'owc-row2' },
+                  label(t(salaryKey), salaryControl),
+                  !payDaily && label(t('workdaysPerMonth'), numberInput('workdaysPerMonth')),
+                ),
+              ),
+              h(
+                'fieldset',
+                { className: 'owc-setting-group' },
+                h('legend', null, t('scheduleGroup')),
+                h(
+                  'div',
+                  { className: 'owc-row2' },
+                  label(t('start'), timeInput('start')),
+                  label(t('end'), timeInput('end')),
+                ),
+                workingDraft.end < workingDraft.start &&
+                  h('p', { className: 'owc-hint' }, t('end') + ' · ' + t('nextDay')),
+                h(
+                  'label',
+                  { className: 'owc-check' },
+                  h('input', {
+                    type: 'checkbox',
+                    checked: breakOn,
+                    disabled: busy,
+                    onChange: toggleBreak,
+                  }),
+                  t('breakEnabled'),
+                ),
+                breakOn &&
+                  h(
+                    'div',
+                    { className: 'owc-row2' },
+                    label(t('breakStart'), timeInput('breakStart')),
+                    label(t('breakEnd'), timeInput('breakEnd')),
+                  ),
+                label(
+                  t('weekdays'),
+                  h(
+                    'div',
+                    { className: 'owc-days' },
+                    [0, 1, 2, 3, 4, 5, 6].map((day) =>
+                      h(
+                        'button',
+                        {
+                          key: day,
+                          type: 'button',
+                          disabled: busy,
+                          'aria-pressed': workingDraft.weekdays.includes(day),
+                          'aria-label': t('weekdays') + ' ' + t('days')[day],
+                          onClick: () =>
+                            update(
+                              'weekdays',
+                              workingDraft.weekdays.includes(day)
+                                ? workingDraft.weekdays.filter((d) => d !== day)
+                                : [...workingDraft.weekdays, day].sort((a, b) => a - b),
+                            ),
+                        },
+                        t('days')[day],
+                      ),
+                    ),
+                  ),
+                ),
+                label(
+                  t('timezone'),
+                  h(
+                    'select',
+                    {
+                      name: 'timezone',
+                      value: workingDraft.timezone ?? '',
+                      disabled: busy,
+                      onChange: (e) => update('timezone', e.target.value),
+                    },
+                    zones.map((zone) => h('option', { key: zone, value: zone }, zone)),
+                  ),
+                ),
+              ),
+              h(
+                'fieldset',
+                { className: 'owc-setting-group' },
+                h('legend', null, t('appearanceGroup')),
+                label(
+                  t('opacity'),
+                  h(
+                    React.Fragment,
+                    null,
+                    h('input', {
+                      className: 'owc-range',
+                      type: 'range',
+                      min: '30',
+                      max: '100',
+                      step: '1',
+                      value: String(Math.round(view.opacity * 100)),
+                      disabled: busy,
+                      'aria-label': t('opacity'),
+                      onChange: (e) => setPreference({ opacity: e.target.valueAsNumber / 100 }),
+                    }),
+                    h(
+                      'span',
+                      { className: 'owc-hint', style: { margin: 0 } },
+                      Math.round(view.opacity * 100) + '% · ' + t('opacityHint'),
+                    ),
+                  ),
+                ),
+              ),
+              preview &&
+                !preview.error &&
+                h(
+                  'div',
+                  { className: 'owc-preview' },
+                  t('preview') +
+                    ' · ' +
+                    t('daily') +
+                    ' ' +
+                    money(preview.daily) +
+                    ' · ' +
+                    t('hourly') +
+                    ' ' +
+                    money(preview.hourly),
+                ),
+              preview?.error &&
+                h(
+                  'p',
+                  { className: 'owc-error', role: 'alert', style: { padding: 0 } },
+                  preview.error,
+                ),
+              h(
+                'details',
+                { className: 'owc-advanced' },
+                h('summary', null, t('advanced')),
+                h('p', { className: 'owc-hint' }, t('sessionHint')),
+                label(t('session'), sessionSelect()),
+              ),
+              h('p', { className: 'owc-hint' }, t('privacy')),
+              h(
+                'div',
+                { className: 'owc-save' },
+                data?.configured &&
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-text', onClick: closeEditor, disabled: busy },
+                    t('cancel'),
+                  ),
+                h(
+                  'button',
+                  { type: 'submit', className: 'owc-primary', disabled: busy || !!preview?.error },
+                  t(busy ? 'busy' : 'save'),
+                ),
+              ),
+            );
+          };
+
+          const notices = () =>
+            h(
+              React.Fragment,
+              null,
+              error && h('p', { className: 'owc-error', role: 'alert' }, error),
+              state?.error && h('p', { className: 'owc-error', role: 'alert' }, state.error),
+              notice && h('p', { className: 'owc-note', role: 'status' }, notice),
+              storageError && h('p', { className: 'owc-note' }, t('storage')),
+            );
+
+          return h(
+            'section',
+            {
+              ref: box,
+              className:
+                'owc-v2' + (collapsed ? ' owc-compact' : '') + (editing ? ' owc-editing' : ''),
+              'aria-label': t('title'),
+              'data-version': '1.0.1',
+              'data-status': safeState?.status || 'setup',
+              style: cardStyle,
+              onPointerDown: dragDown,
+              onPointerMove: dragMove,
+              onPointerUp: dragEnd,
+              onPointerCancel: dragEnd,
+              onLostPointerCapture: dragEnd,
+            },
+            h('style', null, STYLE),
+            h('div', { className: 'owc-glass', 'aria-hidden': 'true' }),
+            h(
+              'div',
+              { className: 'owc-content' },
+              collapsed
+                ? strip()
+                : h(React.Fragment, null, panelHead(), editing ? editor() : panelBody(), notices()),
+            ),
+          );
+        }
+
+        ctx.slots.inject('shell.overlay', () =>
+          ctx.slots.register(
+            {
+              name: 'shell.overlay',
+              id: 'offwork-clock',
+              order: 900,
+              label: () => ctx.locale.bind('offwork-clock')('title'),
+            },
+            Clock,
+          ),
+        );
+      },
+    };
+  },
+});