@colixsystems/widget-sdk 0.152.0 → 0.153.0

package/README.md

@@ -72,7 +72,17 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.152.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.153.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.153.0 (contract 1.118.0 — unchanged)
+
+**`./host` publishes the local-clock DATETIME conversion `<DateTimePicker>` uses (sc-8448).** The Studio's Data Manager sliced the stored UTC string and saved the input's value without a zone, so it showed and wrote UTC labelled as local. It now reads the same conversion the picker does, so a stored instant shows the same wall clock in the Studio and in the Player.
+
+- **`isoToDateTimeLocalInput(value)`** — a stored instant as `<input type="datetime-local">`'s `YYYY-MM-DDTHH:mm` on the viewer's clock. A bare `YYYY-MM-DD` is local midnight.
+- **`dateTimeLocalInputToIso(raw)`** — the inverse: a local `YYYY-MM-DDTHH:mm` as a full UTC ISO instant.
+- **`formatDateTimeLabel(value, mode)`** — the picker's trigger label (`YYYY-MM-DD HH:mm` local for `"datetime"`).
+
+Behaviour: a bare date given to a `mode="datetime"` picker now shows local midnight instead of UTC midnight (which read as the previous evening west of Greenwich), and a year before 1000 is zero-padded so typing a year no longer clears the web input. Otherwise additive.
 
 ### What's new in 0.152.0 (contract 1.118.0 — unchanged)
 

package/dist/datetimepicker-format.js

@@ -15,12 +15,33 @@ export function parseToDate(value) {
   return new Date();
 }
 
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+
+// A stored DATETIME instant → `<input type="datetime-local">`'s
+// `YYYY-MM-DDTHH:mm` on the viewer's local clock. A bare calendar date is
+// local midnight, not UTC midnight, so it never slips a day west of Greenwich.
+export function isoToDateTimeLocalInput(value) {
+  if (value == null || value === "") return "";
+  if (typeof value === "string" && DATE_ONLY.test(value)) return `${value}T00:00`;
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${formatToIso(d, "date")}T${formatToIso(d, "time")}`;
+}
+
+// The inverse: a naive local `YYYY-MM-DDTHH:mm` → a full UTC ISO instant.
+export function dateTimeLocalInputToIso(raw) {
+  if (raw == null || raw === "") return "";
+  const d = new Date(raw);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toISOString();
+}
+
 export function formatToIso(date, mode) {
   if (!(date instanceof Date) || Number.isNaN(date.getTime())) return null;
   if (mode === "date") {
     // Local-date ISO (yyyy-mm-dd) — calendar dates are timezone-free so a
     // "May 28" picked in Stockholm doesn't read as "May 27" in NYC.
-    const y = date.getFullYear();
+    const y = String(date.getFullYear()).padStart(4, "0");
     const m = String(date.getMonth() + 1).padStart(2, "0");
     const d = String(date.getDate()).padStart(2, "0");
     return `${y}-${m}-${d}`;
@@ -46,10 +67,8 @@ export function formatDisplayLabel(value, mode) {
   }
   if (effectiveMode === "date") return String(value).slice(0, 10);
   if (effectiveMode === "time") return String(value).slice(0, 5);
-  // datetime — render the stored UTC ISO in the user's local clock.
-  const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return String(value);
-  return `${formatToIso(d, "date")} ${formatToIso(d, "time")}`;
+  const local = isoToDateTimeLocalInput(value);
+  return local ? local.replace("T", " ") : String(value);
 }
 
 // Perceived-luminance test for a hex colour (`#rgb` or `#rrggbb`). The web

package/dist/datetimepicker.js

@@ -26,7 +26,11 @@
 
 import React from "react";
 import { useHostTheme } from "./hooks.js";
-import { isDarkColor } from "./datetimepicker-format.js";
+import {
+  isDarkColor,
+  isoToDateTimeLocalInput,
+  dateTimeLocalInputToIso,
+} from "./datetimepicker-format.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 
 const MODE_TO_INPUT_TYPE = {
@@ -51,15 +55,7 @@ function _isoToInputValue(value, mode) {
   if (mode === "time") {
     return String(value).slice(0, 5);
   }
-  // datetime-local
-  const d = new Date(value);
-  if (Number.isNaN(d.getTime())) return "";
-  const y = d.getFullYear();
-  const m = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  const hh = String(d.getHours()).padStart(2, "0");
-  const mm = String(d.getMinutes()).padStart(2, "0");
-  return `${y}-${m}-${day}T${hh}:${mm}`;
+  return isoToDateTimeLocalInput(value);
 }
 
 // Translate the input's typed string back to the ISO format the wire wants.
@@ -69,9 +65,7 @@ function _isoToInputValue(value, mode) {
 function _inputValueToIso(raw, mode) {
   if (raw == null || raw === "") return "";
   if (mode === "date" || mode === "time") return raw;
-  const d = new Date(raw);
-  if (Number.isNaN(d.getTime())) return "";
-  return d.toISOString();
+  return dateTimeLocalInputToIso(raw);
 }
 
 export function DateTimePicker({

package/dist/host.d.ts

@@ -452,3 +452,22 @@ export function resolveGradientTokenStops(
   gradient: unknown,
   theme: unknown,
 ): unknown;
+
+/**
+ * sc-8448 — a stored DATETIME instant as `<input type="datetime-local">`'s
+ * `YYYY-MM-DDTHH:mm` on the viewer's local clock. A bare `YYYY-MM-DD` is local
+ * midnight. Empty or unparseable input returns `""`.
+ */
+export function isoToDateTimeLocalInput(value: unknown): string;
+
+/** sc-8448 — a local `YYYY-MM-DDTHH:mm` as a full UTC ISO instant, or `""`. */
+export function dateTimeLocalInputToIso(raw: unknown): string;
+
+/**
+ * sc-8448 — the `<DateTimePicker>` trigger label: for `"datetime"` the stored
+ * instant as `YYYY-MM-DD HH:mm` local time, falling back to the raw string.
+ */
+export function formatDateTimeLabel(
+  value: unknown,
+  mode: "date" | "time" | "datetime",
+): string;

package/dist/host.js

@@ -124,3 +124,10 @@ export {
   normaliseThemeGradient,
   normaliseLoginDesign,
 } from "./theme-background.js";
+
+// sc-8448: one DATETIME local-clock conversion for the picker and the Studio.
+export {
+  isoToDateTimeLocalInput,
+  dateTimeLocalInputToIso,
+  formatDisplayLabel as formatDateTimeLabel,
+} from "./datetimepicker-format.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.152.0",
+  "version": "0.153.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",