@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/date-range-field/index.js

@@ -76,11 +76,11 @@ var root_1 = $.from_html(`<p class="cinder-date-range-field__legend"> </p>`);
 var root_3 = $.from_html(`<button type="button" class="cinder-date-range-field__preset-btn"> </button>`);
 var root_2 = $.from_html(`<div class="cinder-date-range-field__presets" role="group" aria-label="Date range presets"></div>`);
 var root_4 = $.from_html(`<p class="cinder-date-range-field__description"> </p>`);
-var root = $.from_html(`<div><!> <!> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <input type="date" class="cinder-date-range-field__date-input"/></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <input type="date" class="cinder-date-range-field__date-input"/></div></div> <!> <p class="cinder-date-range-field__error" aria-live="polite"> </p></div>`);
+var root = $.from_html(`<div><!> <!> <div class="cinder-date-range-field__inputs"><div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <input class="cinder-date-range-field__date-input"/></div> <span class="cinder-date-range-field__separator" aria-hidden="true">–</span> <div class="cinder-date-range-field__input-group"><label class="cinder-date-range-field__input-label"> </label> <input class="cinder-date-range-field__date-input"/></div></div> <!> <p class="cinder-date-range-field__error" aria-live="polite"> </p></div>`);
 function Date_range_field($$anchor, $$props) {
   const generatedId = $.props_id();
   $.push($$props, true);
-  let value = $.prop($$props, "value", 31, () => $.proxy({ start: undefined, end: undefined })), startLabel = $.prop($$props, "startLabel", 3, "Start date"), endLabel = $.prop($$props, "endLabel", 3, "End date"), hidePresets = $.prop($$props, "hidePresets", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
+  let value = $.prop($$props, "value", 31, () => $.proxy({ start: undefined, end: undefined })), granularity = $.prop($$props, "granularity", 3, "day"), hidePresets = $.prop($$props, "hidePresets", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -89,6 +89,7 @@ function Date_range_field($$anchor, $$props) {
     "label",
     "startLabel",
     "endLabel",
+    "granularity",
     "presets",
     "hidePresets",
     "description",
@@ -104,7 +105,10 @@ function Date_range_field($$anchor, $$props) {
       label: "Today",
       resolve: () => {
         const now = new Date;
-        return { start: toISODate(now), end: toISODate(now) };
+        return {
+          start: formatDateRangePresetValue(startOfDay(now), granularity()),
+          end: formatDateRangePresetEndValue(now, granularity())
+        };
       }
     },
     {
@@ -114,7 +118,10 @@ function Date_range_field($$anchor, $$props) {
         const now = new Date;
         const yesterday = new Date(now);
         yesterday.setDate(now.getDate() - 1);
-        return { start: toISODate(yesterday), end: toISODate(now) };
+        return {
+          start: formatDateRangePresetValue(startOfDay(yesterday), granularity()),
+          end: formatDateRangePresetEndValue(now, granularity())
+        };
       }
     },
     {
@@ -124,11 +131,15 @@ function Date_range_field($$anchor, $$props) {
         const now = new Date;
         const sixDaysAgo = new Date(now);
         sixDaysAgo.setDate(now.getDate() - 6);
-        return { start: toISODate(sixDaysAgo), end: toISODate(now) };
+        return {
+          start: formatDateRangePresetValue(startOfDay(sixDaysAgo), granularity()),
+          end: formatDateRangePresetEndValue(now, granularity())
+        };
       }
     }
   ];
   const resolvedPresets = $.derived(() => $$props.presets ?? defaultPresets);
+  let selectedPresetSnapshot = $.state(null);
   const rootId = $.derived(() => $$props.id ?? generatedId);
   const startId = $.derived(() => `${$.get(rootId)}-start`);
   const endId = $.derived(() => `${$.get(rootId)}-end`);
@@ -137,9 +148,19 @@ function Date_range_field($$anchor, $$props) {
   const errId = $.derived(() => errorId($.get(rootId), !!$$props.error));
   const describedBy = $.derived(() => composeDescribedBy($.get(descriptionId), $.get(errId), $$props["aria-describedby"]));
   const activePresetId = $.derived(() => {
+    const normalizedValue2 = normalizeDateRangeValue(value(), granularity());
+    const snapshot = $.get(selectedPresetSnapshot);
+    if (snapshot && dateRangeValuesMatch(snapshot.value, normalizedValue2)) {
+      const selectedPreset = $.get(resolvedPresets).find((preset) => {
+        return preset.id === snapshot.id && preset === snapshot.preset;
+      });
+      if (selectedPreset) {
+        return snapshot.id;
+      }
+    }
     const match = $.get(resolvedPresets).find((preset) => {
-      const resolved = preset.resolve();
-      return resolved.start === value().start && resolved.end === value().end;
+      const resolved = normalizeDateRangeValue(preset.resolve(), granularity());
+      return dateRangeValuesMatch(resolved, normalizedValue2);
     });
     return match?.id;
   });
@@ -149,22 +170,140 @@ function Date_range_field($$anchor, $$props) {
     const day = String(d.getDate()).padStart(2, "0");
     return `${year}-${month}-${day}`;
   }
+  function startOfDay(date) {
+    const next = new Date(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+  }
+  function toISODateTime(date, nextGranularity) {
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    if (nextGranularity === "hour")
+      return `${toISODate(date)}T${hours}:00`;
+    const base = `${toISODate(date)}T${hours}:${minutes}`;
+    if (nextGranularity === "second") {
+      return `${base}:${String(date.getSeconds()).padStart(2, "0")}`;
+    }
+    return base;
+  }
+  function formatDateRangePresetValue(date, nextGranularity) {
+    return nextGranularity === "day" ? toISODate(date) : toISODateTime(date, nextGranularity);
+  }
+  function endOfActiveHour(date) {
+    const next = new Date(date);
+    if (next.getMinutes() > 0 || next.getSeconds() > 0 || next.getMilliseconds() > 0) {
+      next.setHours(Math.min(next.getHours() + 1, 23), 0, 0, 0);
+    }
+    return next;
+  }
+  function formatDateRangePresetEndValue(date, nextGranularity) {
+    return formatDateRangePresetValue(nextGranularity === "hour" ? endOfActiveHour(date) : date, nextGranularity);
+  }
+  function dateRangeValuesMatch(left, right) {
+    return left.start === right.start && left.end === right.end;
+  }
+  function inputTypeFor(nextGranularity) {
+    return nextGranularity === "day" ? "date" : "datetime-local";
+  }
+  function inputStepFor(nextGranularity) {
+    if (nextGranularity === "hour")
+      return 3600;
+    if (nextGranularity === "minute")
+      return 60;
+    if (nextGranularity === "second")
+      return 1;
+    return;
+  }
+  function isLeapYear(year) {
+    return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  }
+  function daysInMonth(year, month) {
+    if (month === 2)
+      return isLeapYear(year) ? 29 : 28;
+    if ([4, 6, 9, 11].includes(month))
+      return 30;
+    return 31;
+  }
+  function isValidDatePart(datePart) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(datePart);
+    if (!match)
+      return false;
+    const [, rawYear, rawMonth, rawDay] = match;
+    const year = Number(rawYear);
+    const month = Number(rawMonth);
+    const day = Number(rawDay);
+    return month >= 1 && month <= 12 && day >= 1 && day <= daysInMonth(year, month);
+  }
+  function isValidTimePart(timePart) {
+    const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(timePart);
+    if (!match)
+      return false;
+    const [, rawHour, rawMinute, rawSecond = "00"] = match;
+    const hour = Number(rawHour);
+    const minute = Number(rawMinute);
+    const second = Number(rawSecond);
+    return hour <= 23 && minute <= 59 && second <= 59;
+  }
+  function normalizeInputValue(nextValue, nextGranularity) {
+    if (!nextValue)
+      return;
+    const datePart = nextValue.slice(0, 10);
+    if (!isValidDatePart(datePart))
+      return;
+    if (nextGranularity === "day")
+      return datePart;
+    const timePart = nextValue.length === 10 ? "00:00" : nextValue[10] === "T" ? nextValue.slice(11) : undefined;
+    if (!timePart)
+      return;
+    if (!isValidTimePart(timePart))
+      return;
+    const [rawHour = "00", rawMinute = "00", rawSecond = "00"] = timePart.split(":");
+    const hour = rawHour.padStart(2, "0").slice(0, 2);
+    const minute = rawMinute.padStart(2, "0").slice(0, 2);
+    const second = rawSecond.padStart(2, "0").slice(0, 2);
+    if (nextGranularity === "hour")
+      return `${datePart}T${hour}:00`;
+    if (nextGranularity === "minute")
+      return `${datePart}T${hour}:${minute}`;
+    return `${datePart}T${hour}:${minute}:${second}`;
+  }
+  function normalizeDateRangeValue(nextValue, nextGranularity) {
+    return {
+      start: nextValue.start ? normalizeInputValue(nextValue.start, nextGranularity) : undefined,
+      end: nextValue.end ? normalizeInputValue(nextValue.end, nextGranularity) : undefined
+    };
+  }
+  const inputType = $.derived(() => inputTypeFor(granularity()));
+  const inputStep = $.derived(() => inputStepFor(granularity()));
+  const normalizedValue = $.derived(() => normalizeDateRangeValue(value(), granularity()));
+  $.user_effect(() => {
+    if (dateRangeValuesMatch(value(), $.get(normalizedValue)))
+      return;
+    value($.get(normalizedValue));
+  });
+  const defaultStartLabel = $.derived(() => granularity() === "day" ? "Start date" : "Start date and time");
+  const defaultEndLabel = $.derived(() => granularity() === "day" ? "End date" : "End date and time");
+  const resolvedStartLabel = $.derived(() => $$props.startLabel ?? $.get(defaultStartLabel));
+  const resolvedEndLabel = $.derived(() => $$props.endLabel ?? $.get(defaultEndLabel));
   function handlePresetClick(preset) {
     if (disabled())
       return;
-    const next = preset.resolve();
+    const next = normalizeDateRangeValue(preset.resolve(), granularity());
+    $.set(selectedPresetSnapshot, { id: preset.id, preset, value: next });
     value(next);
     $$props.onchange?.(next);
   }
   function handleStartChange(event) {
     const target = event.target;
-    const next = { start: target.value || undefined, end: value().end };
+    const next = normalizeDateRangeValue({ start: target.value, end: value().end }, granularity());
+    $.set(selectedPresetSnapshot, null);
     value(next);
     $$props.onchange?.(next);
   }
   function handleEndChange(event) {
     const target = event.target;
-    const next = { start: value().start, end: target.value || undefined };
+    const next = normalizeDateRangeValue({ start: value().start, end: target.value }, granularity());
+    $.set(selectedPresetSnapshot, null);
     value(next);
     $$props.onchange?.(next);
   }
@@ -260,19 +399,23 @@ function Date_range_field($$anchor, $$props) {
   $.template_effect(() => {
     $.set_attribute(label_1, "for", $.get(startId));
     $.set_attribute(label_1, "data-disabled", disabled() || undefined);
-    $.set_text(text_2, startLabel());
+    $.set_text(text_2, $.get(resolvedStartLabel));
     $.set_attribute(input, "id", $.get(startId));
-    $.set_value(input, value().start ?? "");
-    $.set_attribute(input, "max", value().end ?? undefined);
+    $.set_attribute(input, "type", $.get(inputType));
+    $.set_value(input, $.get(normalizedValue).start ?? "");
+    $.set_attribute(input, "max", $.get(normalizedValue).end ?? undefined);
+    $.set_attribute(input, "step", $.get(inputStep));
     input.disabled = disabled();
     $.set_attribute(input, "aria-invalid", $.get(invalid));
     $.set_attribute(input, "aria-describedby", $.get(describedBy));
     $.set_attribute(label_2, "for", $.get(endId));
     $.set_attribute(label_2, "data-disabled", disabled() || undefined);
-    $.set_text(text_3, endLabel());
+    $.set_text(text_3, $.get(resolvedEndLabel));
     $.set_attribute(input_1, "id", $.get(endId));
-    $.set_value(input_1, value().end ?? "");
-    $.set_attribute(input_1, "min", value().start ?? undefined);
+    $.set_attribute(input_1, "type", $.get(inputType));
+    $.set_value(input_1, $.get(normalizedValue).end ?? "");
+    $.set_attribute(input_1, "min", $.get(normalizedValue).start ?? undefined);
+    $.set_attribute(input_1, "step", $.get(inputStep));
     input_1.disabled = disabled();
     $.set_attribute(input_1, "aria-invalid", $.get(invalid));
     $.set_attribute(input_1, "aria-describedby", $.get(describedBy));
@@ -294,4 +437,4 @@ export {
   Date_range_field as DateRangeField
 };
 
-//# debugId=88DD7DAF359CDAFC64756E2164756E21
+//# debugId=2488D141317FBC4C64756E2164756E21

package/dist/components/diff-viewer/diff-front-matter.svelte.d.ts

@@ -2,14 +2,14 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 import type { LineDiff, WordChange } from '@lostgradient/cinder/markdown/diff/line-diff';
 import type { BadgeVariant } from '../badge/badge.types.ts';
-export type ViewMode = 'unified' | 'final' | 'original';
+import type { DiffViewerMode } from './diff-viewer.types.ts';
 export type DiffFrontMatterProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Unique id for the front matter section */
     id?: string;
     /** Line diffs for front matter content */
     diffs: LineDiff[];
     /** Current view mode */
-    viewMode: ViewMode;
+    viewMode: DiffViewerMode;
     /** Whether the section is expanded (bindable) */
     expanded?: boolean;
     /** Badge label to show (e.g., "Changed") */

package/dist/components/diff-viewer/diff-line.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { LineDiff, WordChange } from '@lostgradient/cinder/markdown/diff/line-diff';
-export type ViewMode = 'unified' | 'final' | 'original';
+import type { DiffViewerMode } from './diff-viewer.types.ts';
 export type DiffLineProps = {
     /** The line diff data */
     diff: LineDiff;
     /** Current view mode */
-    viewMode: ViewMode;
+    viewMode: DiffViewerMode;
     /** Whether this line is selected */
     selected?: boolean;
     /** Called when user clicks this line (for navigation) */

package/dist/components/diff-viewer/diff-toolbar.svelte.d.ts

@@ -2,10 +2,10 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 import type { LineDiffStats } from '@lostgradient/cinder/markdown/diff/line-diff';
 import type { DiffState } from './diff-controller.svelte';
-export type ViewMode = 'unified' | 'final' | 'original';
+import type { DiffViewerMode } from './diff-viewer.types.ts';
 export type DiffToolbarProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** Current view mode (bindable) */
-    viewMode?: ViewMode;
+    viewMode?: DiffViewerMode;
     /** Diff statistics */
     stats: LineDiffStats;
     /** Number of navigable changes */

package/dist/components/diff-viewer/diff-viewer.svelte.d.ts

@@ -12,7 +12,7 @@
  * @avoidWhen Diffing non-Markdown source code where syntax-aware highlighting matters more than prose-aware rendering.
  * @related diff-statistics, code-block
  */
-export type { DiffToolbarContext, DiffViewerProps, ViewMode } from './diff-viewer.types.ts';
+export type { DiffToolbarContext, DiffViewerMode, DiffViewerProps } from './diff-viewer.types.ts';
 import type { DiffHunk } from '@lostgradient/cinder/markdown/diff/line-diff';
 import type { DiffViewerProps } from './diff-viewer.types.ts';
 declare const DiffViewer: import("svelte").Component<DiffViewerProps, {

package/dist/components/diff-viewer/diff-viewer.types.d.ts

@@ -1,13 +1,13 @@
 import type { DiffHunk, LineDiffStats } from '@lostgradient/cinder/markdown/diff/line-diff';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export type ViewMode = 'unified' | 'final' | 'original';
+export type DiffViewerMode = 'unified' | 'final' | 'original';
 /** Context passed to toolbar snippets for custom rendering */
 export interface DiffToolbarContext {
     hunks: DiffHunk[];
     stats: LineDiffStats;
     hasChanges: boolean;
-    viewMode: ViewMode;
+    viewMode: DiffViewerMode;
 }
 export type DiffViewerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
     /** The original/baseline text */
@@ -36,7 +36,7 @@ export type DiffViewerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
      * Bindable: reactive access to current view mode.
      * Parent components can bind to control or observe the view mode.
      */
-    viewMode?: ViewMode;
+    viewMode?: DiffViewerMode;
     /**
      * Additional toolbar actions rendered in the toolbar-right section.
      * Use this to inject custom buttons (e.g., export actions) without

package/dist/components/diff-viewer/index.d.ts

@@ -1,4 +1,4 @@
 import DiffViewer from './diff-viewer.svelte';
 export default DiffViewer;
-export type { DiffToolbarContext, DiffViewerProps, ViewMode } from './diff-viewer.types.ts';
+export type { DiffToolbarContext, DiffViewerMode, DiffViewerProps } from './diff-viewer.types.ts';
 export { DiffViewer };