@tom2012/dsh-pomodoro-overlay 0.0.0-stage → 0.1.1

package/src/styles.js

@@ -0,0 +1,230 @@
+export const CSS = String.raw`
+.dpo-overlay {
+  position: fixed;
+  z-index: 1;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  pointer-events: none;
+  container-type: inline-size;
+  container-name: dpo;
+  color: var(--dsw-alias-label-primary);
+  font-family: inherit;
+}
+.dpo-overlay[hidden] { display: none !important; }
+.dpo-number {
+  font-family: var(--ds-font-family-code, ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace);
+  font-size: 120px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums lining-nums;
+  letter-spacing: -0.065em;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  transform: translateX(-0.0325em);
+  transition: color 160ms ease-out, opacity 160ms ease-out;
+}
+.dpo-button {
+  box-sizing: border-box;
+  min-width: 44px;
+  min-height: 44px;
+  border: 0;
+  border-radius: 8px;
+  padding: 0 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  cursor: pointer;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+.dpo-button:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+.dpo-button:active:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-interactive-bg-hover));
+}
+.dpo-button:focus-visible,
+.dpo-input:focus-visible,
+.dpo-color-input:focus-visible,
+.dpo-range:focus-visible {
+  outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+.dpo-button:disabled,
+.dpo-input:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.dpo-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.dpo-settings {
+  box-sizing: border-box;
+  max-width: 680px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  line-height: 22px;
+}
+.dpo-settings h2,
+.dpo-settings h3,
+.dpo-settings p { margin: 0; }
+.dpo-settings h2 { font-size: 18px; line-height: 28px; font-weight: 550; }
+.dpo-settings h3 { font-size: 14px; line-height: 22px; font-weight: 500; }
+.dpo-description { color: var(--dsw-alias-label-secondary); }
+.dpo-hint { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.dpo-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.dpo-phase-card {
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border: 1px solid var(--dsw-alias-settings-card-stroke, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-xl, 16px);
+  padding: 16px;
+  background: var(--dsw-alias-settings-card-fill, var(--dsw-alias-bg-base));
+}
+.dpo-phase-card > legend {
+  padding: 0 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.dpo-field {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
+  align-items: center;
+  gap: 16px;
+}
+.dpo-field-copy { display: flex; flex-direction: column; gap: 2px; }
+.dpo-field-copy label { color: var(--dsw-alias-label-primary); font-weight: 500; }
+.dpo-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-md, 8px);
+  padding: 8px 12px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+}
+.dpo-font-control { min-width: 0; }
+.dpo-color-control {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.dpo-color-input {
+  box-sizing: border-box;
+  width: 52px;
+  height: 44px;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-md, 8px);
+  padding: 4px;
+  background: var(--dsw-alias-bg-base);
+  cursor: pointer;
+}
+.dpo-color-value {
+  color: var(--dsw-alias-label-secondary);
+  font-family: var(--ds-font-family-code, ui-monospace, monospace);
+  font-size: 12px;
+}
+.dpo-range-control {
+  min-height: 44px;
+  display: grid;
+  grid-template-columns: minmax(80px, 1fr) 48px;
+  align-items: center;
+  gap: 12px;
+}
+.dpo-range {
+  width: 100%;
+  min-height: 44px;
+  margin: 0;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: pointer;
+}
+.dpo-output {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-secondary);
+}
+.dpo-preview {
+  min-height: 88px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  overflow: hidden;
+  border: 1px dashed var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-lg, 12px);
+  background: var(--dsw-alias-bg-base);
+}
+.dpo-preview-number {
+  color: var(--dpo-preview-color);
+  opacity: var(--dpo-preview-opacity);
+  font-family: var(--dpo-preview-font, var(--ds-font-family-code, ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace));
+  font-size: 42px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums lining-nums;
+  line-height: 1;
+  letter-spacing: -0.065em;
+  user-select: none;
+}
+.dpo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.dpo-settings .dpo-button { border: 1px solid var(--dsw-alias-border-l3); }
+.dpo-settings .dpo-primary {
+  border-color: transparent;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary-inverted, #fff);
+}
+.dpo-settings .dpo-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 88%, var(--dsw-alias-label-primary));
+  color: var(--dsw-alias-label-primary-inverted, #fff);
+}
+.dpo-error { color: var(--dsw-alias-state-error-primary); font-size: 13px; line-height: 20px; }
+.dpo-success { color: var(--dsw-alias-state-success-primary); font-size: 13px; line-height: 20px; }
+.dpo-warning { color: var(--dsw-alias-state-warn-label); font-size: 13px; line-height: 20px; }
+.dpo-current {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+}
+
+@media (max-width: 520px) {
+  .dpo-field { grid-template-columns: 1fr; gap: 8px; }
+  .dpo-actions .dpo-button { flex: 1 1 120px; }
+}
+@media (pointer: coarse) {
+  .dpo-button, .dpo-input, .dpo-range { min-height: 48px; }
+  .dpo-color-input { height: 48px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dpo-number, .dpo-button { transition: none; }
+}
+`

package/src/timer-core.js

@@ -0,0 +1,254 @@
+export const FOCUS = 'focus'
+export const BREAK = 'break'
+export const STATE_VERSION = 1
+export const MIN_MINUTES = 1
+export const MAX_MINUTES = 240
+export const MINUTE_MS = 60_000
+
+export const DEFAULT_CONFIG = Object.freeze({
+  focusMinutes: 25,
+  breakMinutes: 5,
+  focusColor: '#9ca3af',
+  breakColor: '#ef4444',
+  focusOpacity: 0.1,
+  breakOpacity: 0.3,
+  fontFamily: '等线',
+})
+
+function numeric(value) {
+  if (typeof value === 'number') return value
+  if (typeof value === 'string' && value.trim() !== '') return Number(value)
+  return Number.NaN
+}
+
+export function isValidMinutes(value) {
+  const parsed = numeric(value)
+  return Number.isInteger(parsed) && parsed >= MIN_MINUTES && parsed <= MAX_MINUTES
+}
+
+export function isValidColor(value) {
+  return typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value)
+}
+
+export function isValidOpacity(value) {
+  const parsed = numeric(value)
+  return Number.isFinite(parsed) && parsed >= 0 && parsed <= 1
+}
+
+export function isValidFontFamily(value) {
+  return typeof value === 'string' && value.length <= 80
+    && /^[\p{L}\p{N}][\p{L}\p{N} _.-]*$/u.test(value)
+}
+
+/** Strict validation for an explicit settings save. */
+export function parseConfig(value) {
+  if (!isValidMinutes(value?.focusMinutes) || !isValidMinutes(value?.breakMinutes)) {
+    throw new RangeError(`Durations must be integers from ${MIN_MINUTES} to ${MAX_MINUTES} minutes`)
+  }
+  const parsed = {
+    focusMinutes: numeric(value.focusMinutes),
+    breakMinutes: numeric(value.breakMinutes),
+    focusColor: value.focusColor === undefined ? DEFAULT_CONFIG.focusColor : value.focusColor,
+    breakColor: value.breakColor === undefined ? DEFAULT_CONFIG.breakColor : value.breakColor,
+    focusOpacity: value.focusOpacity === undefined ? DEFAULT_CONFIG.focusOpacity : value.focusOpacity,
+    breakOpacity: value.breakOpacity === undefined ? DEFAULT_CONFIG.breakOpacity : value.breakOpacity,
+    fontFamily: value.fontFamily === undefined ? DEFAULT_CONFIG.fontFamily : value.fontFamily,
+  }
+  if (!isValidColor(parsed.focusColor) || !isValidColor(parsed.breakColor)) {
+    throw new TypeError('Colors must use six-digit hex format (#rrggbb)')
+  }
+  if (!isValidOpacity(parsed.focusOpacity) || !isValidOpacity(parsed.breakOpacity)) {
+    throw new RangeError('Opacity values must be between 0 and 1')
+  }
+  if (!isValidFontFamily(parsed.fontFamily)) {
+    throw new TypeError('Font family must be a single installed font name')
+  }
+  parsed.focusOpacity = numeric(parsed.focusOpacity)
+  parsed.breakOpacity = numeric(parsed.breakOpacity)
+  return parsed
+}
+
+/** Non-throwing recovery for a browser-stored snapshot. */
+export function sanitizeConfig(value) {
+  return {
+    focusMinutes: isValidMinutes(value?.focusMinutes)
+      ? numeric(value.focusMinutes)
+      : DEFAULT_CONFIG.focusMinutes,
+    breakMinutes: isValidMinutes(value?.breakMinutes)
+      ? numeric(value.breakMinutes)
+      : DEFAULT_CONFIG.breakMinutes,
+    focusColor: isValidColor(value?.focusColor) ? value.focusColor : DEFAULT_CONFIG.focusColor,
+    breakColor: isValidColor(value?.breakColor) ? value.breakColor : DEFAULT_CONFIG.breakColor,
+    focusOpacity: isValidOpacity(value?.focusOpacity)
+      ? numeric(value.focusOpacity)
+      : DEFAULT_CONFIG.focusOpacity,
+    breakOpacity: isValidOpacity(value?.breakOpacity)
+      ? numeric(value.breakOpacity)
+      : DEFAULT_CONFIG.breakOpacity,
+    fontFamily: isValidFontFamily(value?.fontFamily) ? value.fontFamily : DEFAULT_CONFIG.fontFamily,
+  }
+}
+
+export function configFromJSON(text) {
+  if (typeof text !== 'string' || text === '') return { ...DEFAULT_CONFIG }
+  try {
+    return sanitizeConfig(JSON.parse(text))
+  } catch {
+    return { ...DEFAULT_CONFIG }
+  }
+}
+
+export function otherPhase(phase) {
+  if (phase === FOCUS) return BREAK
+  if (phase === BREAK) return FOCUS
+  throw new TypeError(`Unknown Pomodoro phase: ${String(phase)}`)
+}
+
+export function durationForPhase(phase, config) {
+  otherPhase(phase)
+  const valid = parseConfig(config)
+  return (phase === FOCUS ? valid.focusMinutes : valid.breakMinutes) * MINUTE_MS
+}
+
+function assertFinite(value, label) {
+  if (!Number.isFinite(value)) throw new TypeError(`${label} must be finite`)
+}
+
+export function createRunningState(phase, config, now, durationOverride) {
+  otherPhase(phase)
+  assertFinite(now, 'now')
+  const durationMs = durationOverride ?? durationForPhase(phase, config)
+  assertFinite(durationMs, 'durationMs')
+  if (durationMs <= 0) throw new RangeError('durationMs must be positive')
+  return {
+    version: STATE_VERSION,
+    phase,
+    running: true,
+    startedAt: now,
+    endsAt: now + durationMs,
+    durationMs,
+    remainingMs: null,
+    updatedAt: now,
+  }
+}
+
+export function isValidState(value) {
+  if (!value || value.version !== STATE_VERSION) return false
+  if (value.phase !== FOCUS && value.phase !== BREAK) return false
+  if (typeof value.running !== 'boolean') return false
+  if (!Number.isFinite(value.startedAt) || !Number.isFinite(value.updatedAt)) return false
+  if (!Number.isFinite(value.durationMs) || value.durationMs <= 0) return false
+  if (value.running) {
+    return Number.isFinite(value.endsAt)
+      && value.endsAt >= 0
+      && value.endsAt - value.startedAt === value.durationMs
+      && value.remainingMs === null
+  }
+  return value.endsAt === null
+    && Number.isFinite(value.remainingMs)
+    && value.remainingMs >= 0
+    && value.remainingMs <= value.durationMs
+}
+
+export function stateFromJSON(text) {
+  if (typeof text !== 'string' || text === '') return null
+  try {
+    const value = JSON.parse(text)
+    return isValidState(value) ? value : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Advance a running state to the phase that should be active at `now`.
+ * Expired boundaries retain their original timestamps, so reopening after a
+ * long sleep lands on the correct wall-clock phase rather than restarting.
+ */
+export function settleState(state, config, now) {
+  if (!isValidState(state)) throw new TypeError('Invalid Pomodoro state')
+  const valid = parseConfig(config)
+  assertFinite(now, 'now')
+  if (!state.running || now < state.endsAt) return state
+
+  const next = { ...state, updatedAt: now }
+  let transitions = 0
+  const cycleMs = (valid.focusMinutes + valid.breakMinutes) * MINUTE_MS
+
+  while (now >= next.endsAt) {
+    const boundary = next.endsAt
+    next.phase = otherPhase(next.phase)
+    next.startedAt = boundary
+    next.durationMs = (next.phase === FOCUS ? valid.focusMinutes : valid.breakMinutes) * MINUTE_MS
+    next.endsAt = boundary + next.durationMs
+    next.remainingMs = null
+    next.running = true
+    transitions += 1
+
+    // After two transitions both durations come from the current config.
+    // Skip complete cycles arithmetically instead of iterating once per minute.
+    if (transitions >= 2) {
+      const cycles = Math.floor((now - next.startedAt) / cycleMs)
+      if (cycles > 0) {
+        next.startedAt += cycles * cycleMs
+        next.endsAt += cycles * cycleMs
+        transitions += cycles * 2
+      }
+    }
+  }
+
+  return next
+}
+
+export function remainingAt(state, now) {
+  if (!isValidState(state)) throw new TypeError('Invalid Pomodoro state')
+  assertFinite(now, 'now')
+  if (!state.running) return state.remainingMs
+  // A backwards wall-clock adjustment must not show more than a full phase.
+  return Math.min(state.durationMs, Math.max(0, state.endsAt - now))
+}
+
+export function pauseState(state, config, now) {
+  const settled = settleState(state, config, now)
+  if (!settled.running) return settled
+  return {
+    ...settled,
+    running: false,
+    endsAt: null,
+    remainingMs: remainingAt(settled, now),
+    updatedAt: now,
+  }
+}
+
+export function resumeState(state, config, now) {
+  if (!isValidState(state)) throw new TypeError('Invalid Pomodoro state')
+  assertFinite(now, 'now')
+  if (state.running) return state
+  const elapsed = Math.max(0, state.durationMs - state.remainingMs)
+  const resumed = {
+    ...state,
+    running: true,
+    startedAt: now - elapsed,
+    endsAt: now + state.remainingMs,
+    remainingMs: null,
+    updatedAt: now,
+  }
+  return settleState(resumed, config, now)
+}
+
+export function skipState(state, config, now) {
+  if (!isValidState(state)) throw new TypeError('Invalid Pomodoro state')
+  return createRunningState(otherPhase(state.phase), config, now)
+}
+
+export function resetState(config, now) {
+  return createRunningState(FOCUS, config, now)
+}
+
+export function formatRemaining(milliseconds) {
+  assertFinite(milliseconds, 'milliseconds')
+  const totalSeconds = Math.max(0, Math.ceil(milliseconds / 1000))
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}