@cosmicdrift/kumiko-headless 0.155.0 → 0.156.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-headless",
-  "version": "0.155.0",
+  "version": "0.156.0",
   "description": "Headless UI logic for Kumiko — Dispatcher contract, Form-Controller, View-Model, Nav-Resolver. Plattform- und React-frei; jeder Renderer (renderer, renderer-web, renderer-native, …) komponiert darauf.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -36,7 +36,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.155.0",
+    "@cosmicdrift/kumiko-framework": "0.156.0",
+    "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
   },
   "publishConfig": {

package/src/apex/index.ts

@@ -253,7 +253,7 @@ function renderHero(s: ApexHeroSection): string {
     s.logo !== undefined
       ? `<img class="hero-pony" src="${escapeHtml(s.logo.src)}" alt="${escapeHtml(s.logo.alt)}"${dim(s.logo)} />`
       : "";
-  const ctas = (s.ctas ?? []).map(renderCta).join("\n            ");
+  const ctasHtml = (s.ctas ?? []).map(renderCta).join("\n            ");
   const meta = s.metaHtml !== undefined ? `<p class="hero-meta">${s.metaHtml}</p>` : "";
   const visual =
     s.screenshot !== undefined
@@ -264,7 +264,7 @@ function renderHero(s: ApexHeroSection): string {
         <div class="hero-copy">
           ${logo}<h1>${escapeHtml(s.title)}</h1>
           <p class="tagline">${escapeHtml(s.tagline)}</p>
-          ${ctas !== "" ? `<div class="hero-cta">${ctas}</div>` : ""}
+          ${ctasHtml !== "" ? `<div class="hero-cta">${ctasHtml}</div>` : ""}
           ${meta}
         </div>
         ${visual}
@@ -273,7 +273,7 @@ function renderHero(s: ApexHeroSection): string {
 }
 
 function renderFeatureGrid(s: ApexFeatureGridSection): string {
-  const cards = s.items
+  const cardsHtml = s.items
     .map(
       (f) => `<article class="feature">
             ${f.icon !== undefined ? `<div class="feature-icon">${svgIcon(f.icon)}</div>` : ""}<h3>${escapeHtml(f.title)}</h3>
@@ -285,7 +285,7 @@ function renderFeatureGrid(s: ApexFeatureGridSection): string {
       <div class="container">
         ${renderSectionHead(s)}
         <div class="feature-grid">
-          ${cards}
+          ${cardsHtml}
         </div>
       </div>
     </section>`;
@@ -298,7 +298,7 @@ function renderPricingCard(t: ApexPricingTier): string {
   const cap =
     t.capLine !== undefined ? [`<li class="price-cap">${escapeHtml(t.capLine)}</li>`] : [];
   const benefits = t.benefits.map((b) => `<li>${escapeHtml(b)}</li>`);
-  const items = [...cap, ...benefits].join("\n            ");
+  const itemsHtml = [...cap, ...benefits].join("\n            ");
   const per = t.priceSuffix !== undefined ? `<span>${escapeHtml(t.priceSuffix)}</span>` : "";
   const tagline =
     t.tagline !== undefined ? `<p class="price-tagline">${escapeHtml(t.tagline)}</p>` : "";
@@ -314,27 +314,27 @@ function renderPricingCard(t: ApexPricingTier): string {
           ${badge}<h3>${escapeHtml(t.name)}</h3>
           ${tagline}<div class="price-amount">${escapeHtml(t.amount)}${per}</div>
           <ul class="price-list">
-            ${items}
+            ${itemsHtml}
           </ul>
           ${cta}
         </article>`;
 }
 
 function renderPricingGrid(s: ApexPricingGridSection): string {
-  const cards = s.tiers.map(renderPricingCard).join("\n          ");
+  const cardsHtml = s.tiers.map(renderPricingCard).join("\n          ");
   const idAttr = s.id !== undefined ? ` id="${escapeHtml(s.id)}"` : "";
   return `<section${idAttr}>
       <div class="container">
         ${renderSectionHead(s)}
         <div class="price-grid">
-          ${cards}
+          ${cardsHtml}
         </div>
       </div>
     </section>`;
 }
 
 function renderInfoGrid(s: ApexInfoGridSection): string {
-  const items = s.items
+  const itemsHtml = s.items
     .map(
       (i) => `<div class="trust-item">
             <h3>${escapeHtml(i.title)}</h3>
@@ -346,7 +346,7 @@ function renderInfoGrid(s: ApexInfoGridSection): string {
       <div class="container">
         ${renderSectionHead(s)}
         <div class="trust-grid">
-          ${items}
+          ${itemsHtml}
         </div>
       </div>
     </section>`;
@@ -384,7 +384,7 @@ function renderSection(s: ApexSection): string {
 }
 
 function renderNavMenu(m: ApexNavMenu): string {
-  const items = m.items
+  const itemsHtml = m.items
     .map(
       (it) =>
         `<a class="nav-menu__item" href="${escapeHtml(it.href)}">${
@@ -398,7 +398,7 @@ function renderNavMenu(m: ApexNavMenu): string {
     m.footer !== undefined
       ? `<div class="nav-menu__sep"></div><a class="nav-menu__more" href="${escapeHtml(m.footer.href)}">${escapeHtml(m.footer.label)}</a>`
       : "";
-  return `<div class="nav-menu"><button type="button" class="nav-menu__trigger" aria-haspopup="true">${escapeHtml(m.label)}<span class="nav-menu__chev">${svgIcon('<path d="m6 9 6 6 6-6"/>')}</span></button><div class="nav-menu__panel">${items}${footer}</div></div>`;
+  return `<div class="nav-menu"><button type="button" class="nav-menu__trigger" aria-haspopup="true">${escapeHtml(m.label)}<span class="nav-menu__chev">${svgIcon('<path d="m6 9 6 6 6-6"/>')}</span></button><div class="nav-menu__panel">${itemsHtml}${footer}</div></div>`;
 }
 
 function renderNavEntry(entry: ApexNavEntry): string {
@@ -413,13 +413,13 @@ function renderNavEntry(entry: ApexNavEntry): string {
 export function renderApexHeader(h: ApexHeader): string {
   const logo =
     h.brand.logoSrc !== undefined ? `<img src="${escapeHtml(h.brand.logoSrc)}" alt="" /> ` : "";
-  const navLinks = (h.navLinks ?? []).map(renderNavEntry).join("\n      ");
-  const actions = (h.actions ?? []).map(renderCta);
+  const navLinksHtml = (h.navLinks ?? []).map(renderNavEntry).join("\n      ");
+  const actionsHtml = (h.actions ?? []).map(renderCta).join("\n      ");
   return `<header>
     <div class="container nav">
       <div class="brand"><a href="${escapeHtml(h.brand.href)}">${logo}${escapeHtml(h.brand.label)}</a></div>
-      ${navLinks !== "" ? `<nav class="nav-links">${navLinks}</nav>` : ""}
-      ${actions.length > 0 ? `<div class="nav-actions">${actions.join("\n      ")}</div>` : ""}
+      ${navLinksHtml !== "" ? `<nav class="nav-links">${navLinksHtml}</nav>` : ""}
+      ${actionsHtml !== "" ? `<div class="nav-actions">${actionsHtml}</div>` : ""}
     </div>
   </header>`;
 }
@@ -527,7 +527,7 @@ export function renderApexPage(page: ApexPage): string {
   const theme = page.theme ?? "light";
   // Brand-CSS ist app-authored (Trust-Boundary siehe Datei-Header), kein Tenant-Input.
   const cssHtml = (brand.fontFaceCss ?? "") + brand.tokensCss + APEX_STRUCTURAL_CSS;
-  const sections = page.sections.map(renderSection).join("\n\n    ");
+  const sectionsHtml = page.sections.map(renderSection).join("\n\n    ");
   return `<!doctype html>
 <html lang="${escapeHtml(head.lang)}">
   <head>
@@ -539,7 +539,7 @@ export function renderApexPage(page: ApexPage): string {
   <body${theme === "dark" ? ` class="apex-dark"` : ""}>
     ${renderApexHeader(page.header)}
 
-    ${sections}
+    ${sectionsHtml}
 
     ${renderFooter(page.footer)}
 

package/src/form/form-controller.ts

@@ -197,7 +197,7 @@ export function createFormController<TValues extends FormValues, TCtx = unknown>
     getSnapshot: snapshotStore.getSnapshot,
     subscribe: snapshotStore.subscribe,
     setField(key, value) {
-      // Skip work when the new value is identical to the current one —
+      // skip: value unchanged, avoid notify/re-render on identical set
       // avoids a notify + re-render for "setField with same value" which
       // happens a lot in controlled inputs on every keystroke of an
       // untouched field.
@@ -206,7 +206,7 @@ export function createFormController<TValues extends FormValues, TCtx = unknown>
       invalidate();
     },
     setValues(partial) {
-      // Detect any effective change before rebuilding — setValues with a
+      // skip: partial matches current values, avoid no-op notify
       // partial that matches current values shouldn't fire listeners.
       let changed = false;
       const v = values as Record<string, unknown>; // @cast-boundary form-values
@@ -217,15 +217,18 @@ export function createFormController<TValues extends FormValues, TCtx = unknown>
           break;
         }
       }
+      // skip: no key in partial actually changed, avoid no-op notify
       if (!changed) return;
       values = { ...values, ...partial };
       invalidate();
     },
     clearErrors(path) {
       if (path === undefined) {
+        // skip: no errors present, avoid no-op notify
         if (Object.keys(errors).length === 0) return;
         errors = Object.freeze({});
       } else {
+        // skip: path has no error entry, avoid no-op notify
         if (!(path in errors)) return;
         const next: Record<string, readonly FieldIssue[]> = { ...errors };
         delete next[path];
@@ -239,8 +242,8 @@ export function createFormController<TValues extends FormValues, TCtx = unknown>
     },
     validate: runValidate,
     reset() {
-      // Cheap no-op when already at baseline and no errors to clear.
       const alreadyClean = !snapshotStore.getSnapshot().isDirty && Object.keys(errors).length === 0;
+      // skip: already at baseline with no errors, no-op reset
       if (alreadyClean) return;
       values = { ...initial };
       errors = Object.freeze({});

package/src/format/index.ts

@@ -1,6 +1,18 @@
 // Pure format utilities — no web or platform dependencies.
 // Shared between renderer-web, renderer-native, and server-side tests.
 
+import { Temporal } from "temporal-polyfill";
+
+function toPlainDate(raw: string): Temporal.PlainDate {
+  try {
+    return Temporal.PlainDate.from(raw);
+  } catch {
+    // "date"-typed field stored as a full instant (day-boundary timestamp) —
+    // take the calendar date in the local zone rather than fail.
+    return Temporal.Instant.from(raw).toZonedDateTimeISO(Temporal.Now.timeZoneId()).toPlainDate();
+  }
+}
+
 function formatDateCell(
   value: unknown,
   type: string,
@@ -12,17 +24,25 @@ function formatDateCell(
 ): string {
   try {
     const raw = typeof value === "string" ? value : String(value);
-    const date = new Date(raw);
-    if (Number.isNaN(date.getTime())) return raw;
     const locale = opts?.locale;
     if (opts?.dateStyle || opts?.timeStyle) {
-      return date.toLocaleString(locale, {
+      if (type === "date") {
+        // ponytail: timeStyle is ignored here on purpose — a PlainDate has no
+        // time component to format, so a timeStyle-only "date" field falls
+        // back to PlainDate's default dateStyle instead of rendering a time.
+        return toPlainDate(raw).toLocaleString(locale, {
+          dateStyle: opts.dateStyle,
+        });
+      }
+      return Temporal.Instant.from(raw).toLocaleString(locale, {
         dateStyle: opts.dateStyle,
         timeStyle: opts.timeStyle,
       });
     }
-    if (type === "date") return date.toLocaleDateString(locale);
-    return date.toLocaleString(locale, {
+    if (type === "date") {
+      return toPlainDate(raw).toLocaleString(locale);
+    }
+    return Temporal.Instant.from(raw).toLocaleString(locale, {
       year: "numeric",
       month: "short",
       day: "numeric",

package/src/store/create-store.ts

@@ -36,6 +36,7 @@ export function createStore<T>(initial: T): WritableStore<T> {
     },
     setState: (next) => {
       const nextValue = typeof next === "function" ? (next as (prev: T) => T)(snapshot) : next;
+      // skip: next value identical to snapshot, avoid notifying listeners
       if (Object.is(nextValue, snapshot)) return;
       snapshot = nextValue;
       for (const listener of listeners) listener();