refactor: drop clock option compatibility

apps/docs/docs/widgets/clock/index.mdx

@@ -24,9 +24,10 @@ comparable card. The primary clock includes a segmented 24-hour rail with a curr
 time, six-hour ticks, and a legend for night, dawn, day, and dusk. These phases are based on local clock time and are not
 astronomical sunrise or sunset calculations. Secondary cards stop after their localized date and timezone offsets.
 
-The compact widget remains a single numeric clock. The 12/24-hour and seconds switches apply unless a custom Day.js
-time format overrides them. The date-format selector shows common presets with live examples, while the custom date
-format preserves support for any compatible Day.js tokens. Secondary cities always include a short localized date and a
+The compact widget remains a single numeric clock. The time-format selector shows common Day.js presets with live
+examples and applies to the primary clock. Choosing a format with seconds enables second-level updates; 12-hour and
+24-hour display are selected through those same formats. The date-format selector likewise
+shows live Day.js examples and their tokens. Secondary cities always include a short localized date and a
 Yesterday, Today, or Tomorrow label relative to the primary timezone. UTC and relative offsets follow current timezone
 rules, including daylight-saving changes.
 

apps/docs/docs/widgets/clock/index.ts

@@ -20,18 +20,6 @@ export const clockWidget: WidgetDefinition = {
         values: { type: "string" },
         defaultValue: "-",
       },
-      {
-        name: "24-hour format",
-        description: "Use 24-hour format instead of 12-hour format when no custom time format is set.",
-        values: { type: "boolean" },
-        defaultValue: "yes",
-      },
-      {
-        name: "Display seconds",
-        description: "Show seconds when no custom time format is set.",
-        values: { type: "boolean" },
-        defaultValue: "no",
-      },
       {
         name: "Use fixed timezone",
         description: "Select custom timezone to display instead of the client timezone.",
@@ -57,16 +45,11 @@ export const clockWidget: WidgetDefinition = {
         defaultValue: "dddd, MMMM D",
       },
       {
-        name: "Custom time format",
-        description: "Use Day.js tokens to override the 12/24-hour and seconds options.",
-        values: "A Day.js format such as HH:mm:ss or h:mm A",
-        defaultValue: "-",
-      },
-      {
-        name: "Custom date format",
-        description: "Use Day.js tokens to override the selected date format.",
-        values: "A Day.js format such as YYYY-MM-DD",
-        defaultValue: "-",
+        name: "Time format",
+        description:
+          "Choose a common Day.js time format with a live example. The format controls 12/24-hour display and seconds.",
+        values: "HH:mm, HH:mm:ss, h:mm A, or h:mm:ss A",
+        defaultValue: "HH:mm",
       },
       {
         name: "Show weather",

packages/translation/src/lang/en.json

@@ -3153,9 +3153,6 @@
           "label": "24-hour format",
           "description": "Use 24-hour format instead of 12-hour format"
         },
-        "showSeconds": {
-          "label": "Display seconds"
-        },
         "useCustomTimezone": {
           "label": "Use a fixed timezone"
         },
@@ -3171,12 +3168,8 @@
           "description": "Choose a Day.js preset. Each option shows a live example and its format tokens."
         },
         "customTimeFormat": {
-          "label": "Custom time format",
-          "description": "Use Day.js tokens to override the 12/24-hour and seconds options."
-        },
-        "customDateFormat": {
-          "label": "Custom date format",
-          "description": "Use Day.js tokens to override the selected date format."
+          "label": "Time format",
+          "description": "Choose a Day.js preset. The selected format controls 12/24-hour display and whether the clock updates every second."
         },
         "showWeather": {
           "label": "Show weather",

packages/widgets/src/clock/advanced-view.tsx

@@ -222,13 +222,11 @@ const ClockTime = ({
   if (!entry.zonedTime) return null;
   let formattedTime = formatLocalizedTime(now, locale, {
     hour12: clockTimeFormatUses12Hours(options.customTimeFormat, options.is24HourFormat),
-    includeSeconds: clockTimeFormatShowsSeconds(options.customTimeFormat, options.showSeconds),
+    includeSeconds: clockTimeFormatShowsSeconds(options.customTimeFormat),
     timeZone: entry.timeZone,
   });
   if (primary) {
-    formattedTime = entry.zonedTime.format(
-      resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat, options.showSeconds),
-    );
+    formattedTime = entry.zonedTime.format(resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat));
   }
   const accessibleDate = formatLocalizedDate(now, locale, {
     dateStyle: "medium",

packages/widgets/src/clock/component.tsx

@@ -15,7 +15,7 @@ dayjs.extend(advancedFormat);
 
 export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) {
   const isAdvanced = displayMode === "advanced";
-  const showSeconds = clockTimeFormatShowsSeconds(options.customTimeFormat, options.showSeconds);
+  const showSeconds = clockTimeFormatShowsSeconds(options.customTimeFormat);
   const time = useCurrentTime({ showSeconds });
   const requestedTimeZone = options.useCustomTimezone ? options.timezone : getResolvedLocalTimeZone();
   const primaryTimeZoneInvalid = !isTimeZoneSupported(requestedTimeZone);
@@ -37,12 +37,7 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
     return <Center h="100%">--:--</Center>;
   }
 
-  const resolvedTimeFormat = resolveClockTimeFormat(
-    options.customTimeFormat,
-    options.is24HourFormat,
-    options.showSeconds,
-  );
-  const resolvedDateFormat = options.customDateFormat || options.dateFormat;
+  const resolvedTimeFormat = resolveClockTimeFormat(options.customTimeFormat, options.is24HourFormat);
   const minimumAxis = Math.min(width, height * 1.5);
   let sizing: "xs" | "sm" | "md" = "md";
   if (minimumAxis < 128) sizing = "xs";
@@ -76,7 +71,7 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
         </Title>
         {options.showDate && (
           <Text className="clock-date-text" size={sizing} lineClamp={1}>
-            {zonedTime?.format(resolvedDateFormat)}
+            {zonedTime?.format(options.dateFormat)}
           </Text>
         )}
       </Stack>

packages/widgets/src/clock/format.ts

@@ -1,9 +1,9 @@
 export const automaticTimeFormat = "automatic";
 
-export const resolveClockTimeFormat = (format: string, legacyIs24HourFormat: boolean, showSeconds = false) => {
+export const resolveClockTimeFormat = (format: string, legacyIs24HourFormat: boolean) => {
   if (format && format !== automaticTimeFormat) return format;
-  if (legacyIs24HourFormat) return showSeconds ? "HH:mm:ss" : "HH:mm";
-  return showSeconds ? "hh:mm:ss A" : "hh:mm A";
+  if (legacyIs24HourFormat) return "HH:mm";
+  return "hh:mm A";
 };
 
 export const clockTimeFormatUses12Hours = (format: string, legacyIs24HourFormat: boolean) => {
@@ -12,8 +12,8 @@ export const clockTimeFormatUses12Hours = (format: string, legacyIs24HourFormat:
   return /h{1,2}/.test(formatWithoutLiterals);
 };
 
-export const clockTimeFormatShowsSeconds = (format: string, showSeconds = false) => {
-  if (!format || format === automaticTimeFormat) return showSeconds;
+export const clockTimeFormatShowsSeconds = (format: string) => {
+  if (!format || format === automaticTimeFormat) return false;
   const formatWithoutLiterals = format.replace(/\[[^\]]*\]/g, "");
   return /s{1,2}/.test(formatWithoutLiterals);
 };

packages/widgets/src/clock/index.ts

@@ -46,9 +46,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
           defaultValue: true,
           withDescription: true,
         }),
-        showSeconds: factory.switch({
-          defaultValue: false,
-        }),
         useCustomTimezone: factory.switch({ defaultValue: false }),
         timezone: factory.select({
           options: timeZoneOptions,
@@ -76,12 +73,14 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
           defaultValue: "dddd, MMMM D",
           withDescription: true,
         }),
-        customTimeFormat: factory.text({
-          defaultValue: "",
-          withDescription: true,
-        }),
-        customDateFormat: factory.text({
-          defaultValue: "",
+        customTimeFormat: factory.select({
+          options: [
+            { value: "HH:mm", label: `${dayjs().format("HH:mm")} · HH:mm` },
+            { value: "HH:mm:ss", label: `${dayjs().format("HH:mm:ss")} · HH:mm:ss` },
+            { value: "h:mm A", label: `${dayjs().format("h:mm A")} · h:mm A` },
+            { value: "h:mm:ss A", label: `${dayjs().format("h:mm:ss A")} · h:mm:ss A` },
+          ],
+          defaultValue: "HH:mm",
           withDescription: true,
         }),
         showWeather: factory.switch({
@@ -111,6 +110,9 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         }),
       }),
       {
+        is24HourFormat: {
+          shouldHide: () => true,
+        },
         customTitle: {
           shouldHide: (options) => !options.customTitleToggle,
         },
@@ -120,9 +122,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
         dateFormat: {
           shouldHide: (options) => !options.showDate,
         },
-        customDateFormat: {
-          shouldHide: (options) => !options.showDate,
-        },
         weatherLocation: {
           shouldHide: (options) => !options.showWeather,
         },