@lostgradient/cinder 0.3.0 → 0.4.0

package/src/components/date-range-field/date-range-field.svelte

@@ -10,12 +10,13 @@
    * @useWhen Filtering a list or dashboard by a start and end date (e.g. created between, updated between).
    * @useWhen Offering common presets (last 7 days, last 24 hours) alongside a manual date range.
    * @avoidWhen A single date is sufficient — use a plain date input instead.
-   * @avoidWhen Date-time precision (hours/minutes/timezone) is required — this v1 is date-only.
+   * @avoidWhen Timezone conversion or a standalone time-of-day value is required — use time-field for the latter.
    * @related input, form-field, chip, segmented-control
    */
   export type {
     DateRangeDatePreset,
     DateRangeFieldProps,
+    DateRangeGranularity,
     DateRangeValue,
   } from './date-range-field.types.ts';
 </script>
@@ -24,6 +25,7 @@
   import type {
     DateRangeDatePreset,
     DateRangeFieldProps,
+    DateRangeGranularity,
     DateRangeValue,
   } from './date-range-field.types.ts';
   import { classNames } from '../../utilities/class-names.ts';
@@ -38,8 +40,9 @@
     id,
     value = $bindable<DateRangeValue>({ start: undefined, end: undefined }),
     label,
-    startLabel = 'Start date',
-    endLabel = 'End date',
+    startLabel,
+    endLabel,
+    granularity = 'day',
     presets,
     hidePresets = false,
     description,
@@ -60,7 +63,10 @@
       label: 'Today',
       resolve: () => {
         const now = new Date();
-        return { start: toISODate(now), end: toISODate(now) };
+        return {
+          start: formatDateRangePresetValue(startOfDay(now), granularity),
+          end: formatDateRangePresetEndValue(now, granularity),
+        };
       },
     },
     {
@@ -73,7 +79,10 @@
         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),
+        };
       },
     },
     {
@@ -83,12 +92,20 @@
         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(presets ?? defaultPresets);
+  let selectedPresetSnapshot = $state.raw<{
+    id: string;
+    preset: DateRangeDatePreset;
+    value: DateRangeValue;
+  } | null>(null);
 
   // ──────────────────────────────────────────────────────────────────────────
   // Accessible IDs
@@ -106,9 +123,20 @@
   // Active preset tracking: which preset (if any) matches the current controlled value.
   // ──────────────────────────────────────────────────────────────────────────
   const activePresetId = $derived.by(() => {
+    const normalizedValue = normalizeDateRangeValue(value, granularity);
+    const snapshot = selectedPresetSnapshot;
+    if (snapshot && dateRangeValuesMatch(snapshot.value, normalizedValue)) {
+      const selectedPreset = resolvedPresets.find((preset) => {
+        return preset.id === snapshot.id && preset === snapshot.preset;
+      });
+      if (selectedPreset) {
+        return snapshot.id;
+      }
+    }
+
     const match = 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, normalizedValue);
     });
     return match?.id;
   });
@@ -123,26 +151,170 @@
     return `${year}-${month}-${day}`;
   }
 
+  function startOfDay(date: Date): Date {
+    const next = new Date(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+  }
+
+  function toISODateTime(date: Date, nextGranularity: DateRangeGranularity): string {
+    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: Date, nextGranularity: DateRangeGranularity): string {
+    return nextGranularity === 'day' ? toISODate(date) : toISODateTime(date, nextGranularity);
+  }
+
+  function endOfActiveHour(date: Date): 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: Date,
+    nextGranularity: DateRangeGranularity,
+  ): string {
+    return formatDateRangePresetValue(
+      nextGranularity === 'hour' ? endOfActiveHour(date) : date,
+      nextGranularity,
+    );
+  }
+
+  function dateRangeValuesMatch(left: DateRangeValue, right: DateRangeValue): boolean {
+    return left.start === right.start && left.end === right.end;
+  }
+
+  function inputTypeFor(nextGranularity: DateRangeGranularity): 'date' | 'datetime-local' {
+    return nextGranularity === 'day' ? 'date' : 'datetime-local';
+  }
+
+  function inputStepFor(nextGranularity: DateRangeGranularity): number | undefined {
+    if (nextGranularity === 'hour') return 3600;
+    if (nextGranularity === 'minute') return 60;
+    if (nextGranularity === 'second') return 1;
+    return undefined;
+  }
+
+  function isLeapYear(year: number): boolean {
+    return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  }
+
+  function daysInMonth(year: number, month: number): number {
+    if (month === 2) return isLeapYear(year) ? 29 : 28;
+    if ([4, 6, 9, 11].includes(month)) return 30;
+    return 31;
+  }
+
+  function isValidDatePart(datePart: string): boolean {
+    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: string): boolean {
+    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: string,
+    nextGranularity: DateRangeGranularity,
+  ): string | undefined {
+    if (!nextValue) return undefined;
+    const datePart = nextValue.slice(0, 10);
+    if (!isValidDatePart(datePart)) return undefined;
+    if (nextGranularity === 'day') return datePart;
+    const timePart =
+      nextValue.length === 10 ? '00:00' : nextValue[10] === 'T' ? nextValue.slice(11) : undefined;
+    if (!timePart) return undefined;
+    if (!isValidTimePart(timePart)) return undefined;
+    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: DateRangeValue,
+    nextGranularity: DateRangeGranularity,
+  ): DateRangeValue {
+    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));
+
+  $effect(() => {
+    if (dateRangeValuesMatch(value, normalizedValue)) return;
+    value = 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(startLabel ?? defaultStartLabel);
+  const resolvedEndLabel = $derived(endLabel ?? defaultEndLabel);
+
   // ──────────────────────────────────────────────────────────────────────────
   // Event handlers
   // ──────────────────────────────────────────────────────────────────────────
   function handlePresetClick(preset: DateRangeDatePreset) {
     if (disabled) return;
-    const next = preset.resolve();
+    const next = normalizeDateRangeValue(preset.resolve(), granularity);
+    selectedPresetSnapshot = { id: preset.id, preset, value: next };
     value = next;
     onchange?.(next);
   }
 
   function handleStartChange(event: Event) {
     const target = event.target as HTMLInputElement;
-    const next: DateRangeValue = { start: target.value || undefined, end: value.end };
+    const next = normalizeDateRangeValue(
+      {
+        start: target.value,
+        end: value.end,
+      },
+      granularity,
+    );
+    selectedPresetSnapshot = null;
     value = next;
     onchange?.(next);
   }
 
   function handleEndChange(event: Event) {
     const target = event.target as HTMLInputElement;
-    const next: DateRangeValue = { start: value.start, end: target.value || undefined };
+    const next = normalizeDateRangeValue(
+      {
+        start: value.start,
+        end: target.value,
+      },
+      granularity,
+    );
+    selectedPresetSnapshot = null;
     value = next;
     onchange?.(next);
   }
@@ -191,14 +363,15 @@
         class="cinder-date-range-field__input-label"
         data-disabled={disabled || undefined}
       >
-        {startLabel}
+        {resolvedStartLabel}
       </label>
       <input
         id={startId}
-        type="date"
+        type={inputType}
         class="cinder-date-range-field__date-input"
-        value={value.start ?? ''}
-        max={value.end ?? undefined}
+        value={normalizedValue.start ?? ''}
+        max={normalizedValue.end ?? undefined}
+        step={inputStep}
         {disabled}
         aria-invalid={invalid}
         aria-describedby={describedBy}
@@ -214,14 +387,15 @@
         class="cinder-date-range-field__input-label"
         data-disabled={disabled || undefined}
       >
-        {endLabel}
+        {resolvedEndLabel}
       </label>
       <input
         id={endId}
-        type="date"
+        type={inputType}
         class="cinder-date-range-field__date-input"
-        value={value.end ?? ''}
-        min={value.start ?? undefined}
+        value={normalizedValue.end ?? ''}
+        min={normalizedValue.start ?? undefined}
+        step={inputStep}
         {disabled}
         aria-invalid={invalid}
         aria-describedby={describedBy}

package/src/components/date-range-field/date-range-field.types.ts

@@ -1,16 +1,18 @@
 import type { HTMLAttributes } from 'svelte/elements';
 
 /**
- * A date-only range value expressed as ISO-8601 date strings (YYYY-MM-DD).
+ * A date or date-time range value expressed as ISO-8601 local strings.
  * Both `start` and `end` are optional so the consumer can represent partial input.
  */
 export type DateRangeValue = {
-  /** Start of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+  /** Start of the range as an ISO-8601 local string, or undefined when not set. */
   start: string | undefined;
-  /** End of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+  /** End of the range as an ISO-8601 local string, or undefined when not set. */
   end: string | undefined;
 };
 
+export type DateRangeGranularity = 'day' | 'hour' | 'minute' | 'second';
+
 /**
  * A preset time-window option that the consumer can offer to the user.
  */
@@ -26,11 +28,13 @@ export type DateRangeDatePreset = {
 /**
  * Props for the DateRangeField component.
  *
- * v1 scope (date-only):
- * - Accepts and emits ISO-8601 date strings (YYYY-MM-DD) for start and end.
- * - Does not support date-time (hours/minutes/seconds/timezone). That adds
- *   timezone + time-picker complexity that doubles the surface area; it is
- *   tracked as a follow-up.
+ * Scope:
+ * - Accepts and emits ISO-8601 local strings for start and end.
+ * - `granularity="day"` uses native date inputs and emits `YYYY-MM-DD`.
+ * - `granularity="hour" | "minute" | "second"` uses native datetime-local
+ *   inputs and emits `YYYY-MM-DDTHH:mm` or `YYYY-MM-DDTHH:mm:ss`.
+ * - Timezone conversion is caller-owned; browser `datetime-local` values are
+ *   local wall-clock values by design.
  * - Sets the native inputs' min/max so the browser picker hints valid bounds
  *   (end's min = start, start's max = end), but does NOT block out-of-order
  *   entry. Validation feedback is the consumer's responsibility via `error`.
@@ -50,10 +54,12 @@ export type DateRangeFieldProps = Omit<
   value?: DateRangeValue;
   /** Visible legend rendered above the start/end inputs. */
   label?: string;
-  /** Accessible label for the start date input. Defaults to "Start date". */
+  /** Accessible label for the start input. Defaults to "Start date" for day granularity and "Start date and time" for datetime granularities. */
   startLabel?: string;
-  /** Accessible label for the end date input. Defaults to "End date". */
+  /** Accessible label for the end input. Defaults to "End date" for day granularity and "End date and time" for datetime granularities. */
   endLabel?: string;
+  /** Date-time precision. Defaults to day precision. */
+  granularity?: DateRangeGranularity;
   /**
    * Consumer-defined preset options shown above the date inputs.
    * Each preset has a label and a resolve() function that returns a DateRangeValue.

package/src/components/date-range-field/index.ts

@@ -5,6 +5,7 @@ export default DateRangeField;
 export type {
   DateRangeDatePreset,
   DateRangeFieldProps,
+  DateRangeGranularity,
   DateRangeValue,
 } from './date-range-field.types.ts';
 export { DateRangeField };

package/src/components/diff-viewer/diff-front-matter.svelte

@@ -4,7 +4,7 @@
   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 */
@@ -12,7 +12,7 @@
     /** 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/src/components/diff-viewer/diff-line.svelte

@@ -2,13 +2,13 @@
   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) */
@@ -51,6 +51,23 @@
    * Same lines are not selectable.
    */
   const isInteractive = $derived(diff.type !== 'same' && onselect !== undefined);
+  const accessibleLineLabel = $derived.by(() => {
+    const text =
+      diff.type === 'modified'
+        ? viewMode === 'original'
+          ? diff.oldText
+          : viewMode === 'final'
+            ? diff.newText
+            : `${diff.oldText} changed to ${diff.newText}`
+        : diff.text;
+    const typeLabel =
+      diff.type === 'added'
+        ? 'Added line'
+        : diff.type === 'removed'
+          ? 'Removed line'
+          : 'Modified line';
+    return `${typeLabel}: ${text || 'blank line'}`;
+  });
 </script>
 
 {#if isVisible}
@@ -66,6 +83,7 @@
       <button
         class={classNames('diff-line diff-line-added', className)}
         data-selected={selected}
+        aria-label={accessibleLineLabel}
         onclick={onselect}
         type="button"
       >
@@ -89,6 +107,7 @@
           className,
         )}
         data-selected={selected}
+        aria-label={accessibleLineLabel}
         onclick={onselect}
         type="button"
       >
@@ -135,6 +154,7 @@
       <button
         class={classNames('diff-line', lineClass, className)}
         data-selected={selected}
+        aria-label={accessibleLineLabel}
         onclick={onselect}
         type="button"
       >
@@ -224,8 +244,8 @@
   }
 
   .diff-line[data-selected='true'] {
-    outline: 2px solid var(--cinder-accent);
-    outline-offset: -2px;
+    outline: var(--cinder-ring-width) solid var(--cinder-accent);
+    outline-offset: calc(var(--cinder-ring-width) * -1);
     background: color-mix(in oklch, var(--cinder-accent), transparent 90%);
     z-index: 1;
   }
@@ -303,21 +323,25 @@
   }
 
   .word-removed {
-    background: var(--cinder-color-danger-border);
+    background: var(--cinder-color-danger-bg);
+    color: var(--cinder-color-danger-fg);
     text-decoration: line-through;
     border-radius: 2px;
-    padding: 0 1px;
+    padding: 0 2px;
+    box-shadow: inset 0 0 0 1px var(--cinder-color-danger-border);
   }
 
   /* DEP-47: underline provides non-color indicator for a11y */
   .word-added {
-    background: var(--cinder-color-success-border);
+    background: var(--cinder-color-success-bg);
+    color: var(--cinder-color-success-fg);
     text-decoration: underline;
     text-decoration-color: var(--cinder-success);
     text-decoration-thickness: 2px;
     text-underline-offset: 2px;
     border-radius: 2px;
-    padding: 0 1px;
+    padding: 0 2px;
+    box-shadow: inset 0 0 0 1px var(--cinder-color-success-border);
   }
 
   /* Modified in final view (highlight subtly) */

package/src/components/diff-viewer/diff-toolbar.svelte

@@ -4,11 +4,11 @@
   import type { LineDiffStats } from '@lostgradient/cinder/markdown/diff/line-diff';
   import type { DiffState, DiffTier } 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 */
@@ -50,7 +50,7 @@
   import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
 
   let {
-    viewMode = $bindable<ViewMode>('unified'),
+    viewMode = $bindable<DiffViewerMode>('unified'),
     stats,
     changeCount,
     currentChangeIndex,

package/src/components/diff-viewer/diff-viewer.svelte

@@ -13,7 +13,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';
 </script>
 
 <script lang="ts">
@@ -46,7 +46,7 @@
   import DiffFrontMatter from './diff-front-matter.svelte';
   import DiffLine from './diff-line.svelte';
   import DiffToolbar from './diff-toolbar.svelte';
-  import type { DiffToolbarContext, DiffViewerProps, ViewMode } from './diff-viewer.types.ts';
+  import type { DiffToolbarContext, DiffViewerMode, DiffViewerProps } from './diff-viewer.types.ts';
 
   type LocalFrontMatterBlock = {
     hasFrontMatter: boolean;
@@ -99,7 +99,7 @@
     onreverthunk,
     readonly = false,
     hunks: bindableHunks = $bindable<DiffHunk[]>([]),
-    viewMode = $bindable<ViewMode>('unified'),
+    viewMode = $bindable<DiffViewerMode>('unified'),
     toolbarActions,
     toolbar,
     class: className,
@@ -304,7 +304,7 @@
   // Keyboard shortcuts
   // ─────────────────────────────────────────────────────────────────────────────
 
-  const VIEW_MODES: ViewMode[] = ['unified', 'final', 'original'];
+  const VIEW_MODES: DiffViewerMode[] = ['unified', 'final', 'original'];
 
   function handleKeydown(event: KeyboardEvent) {
     const target = event.target as HTMLElement;

package/src/components/diff-viewer/diff-viewer.types.ts

@@ -2,14 +2,14 @@ import type { DiffHunk, LineDiffStats } from '@lostgradient/cinder/markdown/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'> & {
@@ -39,7 +39,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/src/components/diff-viewer/index.ts

@@ -1,5 +1,5 @@
 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 };