dsh-offwork 0.0.0-stage → 1.0.0

package/client.source.js

@@ -0,0 +1,534 @@
+// 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_MODULES */
+    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:'配置存本机；读写结果进入所选会话记录。',
+        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 stay local; 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', 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, onClick: () => update('payMode', 'monthly') }, t('monthly')),
+              h('button', { type: 'button', disabled: busy, 'aria-pressed': payDaily, 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: '5',
+                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.0', '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));
+      },
+    };
+  },
+});