tyrell-components 1.0.0-RC12 → 1.0.0-RC14

package/lib/utils/calendar-utils.js

@@ -1,89 +1,31 @@
-/**
- * Calendar Utilities
- *
- * Pure TypeScript utilities for calendar month generation and localization.
- * Ported from ClojureScript ty/date/core.cljs
- *
- * Key Features:
- * - 42-day calendar grid generation (6 weeks × 7 days)
- * - Monday-first week ordering
- * - Rich day context with metadata
- * - Localized weekday names
- * - No external dependencies (native Date API only)
- *
- * Note on Timestamps:
- * - `value`: UTC timestamp at midnight UTC (timezone-independent, use for storage/server)
- * - `localValue`: Local timestamp at midnight local time (use for display/local calculations)
- * - `year/month/dayInMonth`: Calendar date components (user's mental model)
- *
- * Example for October 13, 2025:
- * - value = Date.UTC(2025, 9, 13) = consistent worldwide
- * - localValue = new Date(2025, 9, 13).getTime() = varies by timezone
- * - Both represent the same calendar date, different moments in time
- */
-// ============================================================================
-// Validation Functions
-// ============================================================================
-/**
- * Validate month value (1-12)
- */
 function validateMonth(month) {
     if (!Number.isInteger(month) || month < 1 || month > 12) {
         throw new RangeError(`Invalid month: ${month}. Must be an integer between 1 and 12.`);
     }
 }
-/**
- * Validate year value (reasonable range)
- */
 function validateYear(year) {
     if (!Number.isInteger(year) || year < 1 || year > 9999) {
         throw new RangeError(`Invalid year: ${year}. Must be an integer between 1 and 9999.`);
     }
 }
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Check if two dates are on the same day (ignoring time)
- * Works in local timezone
- */
 function isSameDay(date1, date2) {
     return date1.getFullYear() === date2.getFullYear()
         && date1.getMonth() === date2.getMonth()
         && date1.getDate() === date2.getDate();
 }
-/**
- * Create a date at midnight local time
- * This ensures consistent behavior across the application
- */
 function createMidnightDate(year, month, day) {
     return new Date(year, month - 1, day, 0, 0, 0, 0);
 }
-/**
- * Get today's date at midnight local time
- * Used for consistent "today" detection
- */
 function getTodayMidnight() {
     const now = new Date();
     return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
 }
-/**
- * Create a DayContext from a Date object
- *
- * @param date - The date to create context for (should be at midnight)
- * @param targetYear - The year of the calendar month being displayed
- * @param targetMonth - The month (1-12) of the calendar month being displayed
- * @param selection - Optional selection state from calendar
- * @returns Rich day context with metadata
- */
 function createDayContext(date, targetYear, targetMonth, selection) {
     const year = date.getFullYear();
-    const month = date.getMonth() + 1; // Convert to 1-based
+    const month = date.getMonth() + 1;
     const dayInMonth = date.getDate();
-    const dayOfWeek = date.getDay(); // 0 = Sunday, 6 = Saturday
-    // Check if this day is from a different month
+    const dayOfWeek = date.getDay();
     const isOtherMonth = year !== targetYear || month !== targetMonth;
-    // Determine if previous or next month
     let isPrevMonth = false;
     let isNextMonth = false;
     if (isOtherMonth) {
@@ -94,16 +36,11 @@ function createDayContext(date, targetYear, targetMonth, selection) {
             isNextMonth = true;
         }
     }
-    // Check if today (compare dates at midnight for consistency)
     const todayMidnight = getTodayMidnight();
     const isToday = isSameDay(date, todayMidnight);
-    // Check if this day is selected
     const isSelected = selection?.year === year
         && selection?.month === month
         && selection?.day === dayInMonth;
-    // Calculate both UTC and local timestamps
-    // value: UTC midnight (consistent worldwide for the same date)
-    // localValue: Local midnight (respects user's timezone)
     const utcValue = Date.UTC(year, month - 1, dayInMonth, 0, 0, 0, 0);
     const localValue = date.getTime();
     return {
@@ -123,64 +60,23 @@ function createDayContext(date, targetYear, targetMonth, selection) {
         selectedDay: selection?.day,
     };
 }
-/**
- * Get the Monday at or before a given date
- * (Monday = start of week in ISO 8601)
- *
- * @param date - Any date
- * @returns The Monday of that week at midnight
- */
 function getMondayOfWeek(date) {
-    const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
-    // Calculate days to subtract to get to Monday
-    // Sunday (0) → go back 6 days
-    // Monday (1) → go back 0 days
-    // Tuesday (2) → go back 1 day
-    // ...
+    const dayOfWeek = date.getDay();
     const daysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    // Create new date at Monday midnight
     const monday = new Date(date);
     monday.setDate(date.getDate() - daysToMonday);
-    monday.setHours(0, 0, 0, 0); // Ensure midnight
+    monday.setHours(0, 0, 0, 0);
     return monday;
 }
-/**
- * Get the start date for the calendar grid
- * (The Monday at or before the first day of the month)
- *
- * @param year - Year
- * @param month - Month (1-12)
- * @returns The Monday that starts the calendar grid
- */
 function getMonthGridStart(year, month) {
-    // Get first day of month at midnight (month is 1-based, Date constructor is 0-based)
     const firstDay = createMidnightDate(year, month, 1);
-    // Get the Monday of that week
     return getMondayOfWeek(firstDay);
 }
-/**
- * Add days to a date safely
- * Creates a new date without mutating the original
- *
- * @param date - Starting date
- * @param days - Number of days to add
- * @returns New date with days added
- */
 function addDays(date, days) {
     const result = new Date(date);
     result.setDate(result.getDate() + days);
     return result;
 }
-/**
- * Generate N consecutive days starting from a date
- *
- * @param startDate - Starting date
- * @param count - Number of days to generate
- * @param targetYear - Year of the calendar month
- * @param targetMonth - Month (1-12) of the calendar month
- * @param selection - Optional selection state to include in day contexts
- * @returns Array of day contexts
- */
 function generateDays(startDate, count, targetYear, targetMonth, selection) {
     const days = [];
     for (let i = 0; i < count; i++) {
@@ -189,94 +85,28 @@ function generateDays(startDate, count, targetYear, targetMonth, selection) {
     }
     return days;
 }
-// ============================================================================
-// Main Calendar Functions
-// ============================================================================
-/**
- * Generate a 42-day calendar grid for a given month
- *
- * Returns 6 weeks (42 days) starting from the Monday at or before
- * the first day of the month. This ensures a complete calendar view
- * with days from the previous and next months as needed.
- *
- * @param year - Year (e.g., 2025)
- * @param month - Month (1-12, 1 = January)
- * @param selection - Optional selection state to include in day contexts
- * @returns Array of 42 day contexts with rich metadata
- *
- * @throws {RangeError} If year or month are invalid
- *
- * @example
- * const days = getCalendarMonthDays(2025, 10); // October 2025
- * console.log(days.length); // 42
- * console.log(days[0].dayInMonth); // First day shown (might be from September)
- */
 export function getCalendarMonthDays(year, month, selection) {
-    // Validate inputs
     validateYear(year);
     validateMonth(month);
     const startDate = getMonthGridStart(year, month);
     return generateDays(startDate, 42, year, month, selection);
 }
-/**
- * Get localized weekday names in Monday-first order
- *
- * Note: Intl.DateTimeFormat returns Sunday-first by default,
- * so we reorder to Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
- *
- * @param locale - Locale string (e.g., "en-US", "de-DE", "ja-JP")
- * @param style - Display style: "long" (Monday), "short" (Mon), "narrow" (M)
- * @returns Array of 7 weekday names starting with Monday
- *
- * @example
- * getLocalizedWeekdays("en-US", "short")
- * // Returns: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
- *
- * getLocalizedWeekdays("de-DE", "long")
- * // Returns: ["Montag", "Dienstag", "Mittwoch", ...]
- */
 export function getLocalizedWeekdays(locale, style = 'short') {
     const formatter = new Intl.DateTimeFormat(locale, { weekday: style });
-    // Create a Sunday (base date) - January 7, 2024 is a Sunday
     const sunday = new Date(2024, 0, 7);
-    // Generate Sunday-first array: [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
     const sundayFirst = Array.from({ length: 7 }, (_, i) => {
         const date = addDays(sunday, i);
         return formatter.format(date);
     });
-    // Reorder to Monday-first: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
     const [firstDay, ...rest] = sundayFirst;
     return [...rest, firstDay];
 }
-// ============================================================================
-// Utility Functions (for testing and debugging)
-// ============================================================================
-/**
- * Get month name in specified locale
- *
- * @param month - Month (1-12)
- * @param locale - Locale string
- * @param style - Display style
- * @returns Localized month name
- *
- * @throws {RangeError} If month is invalid
- */
 export function getMonthName(month, locale = 'en-US', style = 'long') {
     validateMonth(month);
     const date = new Date(2024, month - 1, 1);
     const formatter = new Intl.DateTimeFormat(locale, { month: style });
     return formatter.format(date);
 }
-/**
- * Parse an ISO date string (YYYY-MM-DD) into year, month, day components
- *
- * @param isoString - ISO date string (YYYY-MM-DD)
- * @returns Object with year, month (1-12), and day, or null if invalid
- *
- * @example
- * parseISODate("2025-10-13")
- * // Returns: { year: 2025, month: 10, day: 13 }
- */
 export function parseISODate(isoString) {
     const match = isoString.match(/^(\d{4})-(\d{2})-(\d{2})$/);
     if (!match)
@@ -284,18 +114,15 @@ export function parseISODate(isoString) {
     const year = parseInt(match[1], 10);
     const month = parseInt(match[2], 10);
     const day = parseInt(match[3], 10);
-    // Validate ranges
     if (year < 1 || year > 9999)
         return null;
     if (month < 1 || month > 12)
         return null;
     if (day < 1 || day > 31)
         return null;
-    // Check if date is valid (handles Feb 30, etc.)
     const date = new Date(year, month - 1, day);
     if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
         return null;
     }
     return { year, month, day };
 }
-//# sourceMappingURL=calendar-utils.js.map

package/lib/utils/custom-scrollbar.d.ts

@@ -1,23 +1,10 @@
 /**
- * CustomScrollbar - Reusable scrollbar utility
- *
- * Attaches a custom rendered scrollbar (vertical and/or horizontal) to any
- * scrollable element. Uses the overlay approach: native overflow:auto is
- * preserved for scroll physics, native scrollbar is hidden via CSS,
- * and custom track/thumb elements are synced on top.
- *
- * Usage:
- *   const scrollbar = new CustomScrollbar(scrollEl, { vertical: true })
- *   // scrollbar.trackY, scrollbar.thumbY — append these to your DOM
- *   // scrollbar.trackX, scrollbar.thumbX — for horizontal
- *   scrollbar.destroy()  // cleanup
- *
- * CSS classes applied:
- *   .ty-scrollbar-track-y / .ty-scrollbar-track-x
- *   .ty-scrollbar-thumb-y / .ty-scrollbar-thumb-x
- *   .has-overflow — when content overflows
- *   .dragging — during thumb drag
- *   .scrolling — briefly after scroll (auto-hide)
+ * CustomScrollbar - attaches a rendered scrollbar (vertical and/or horizontal)
+ * to any scrollable element. Overlay approach: native overflow:auto is kept for
+ * scroll physics, the native scrollbar is hidden via CSS, and custom track/thumb
+ * elements are synced on top. Append `trackY`/`trackX` to your DOM; `destroy()`
+ * cleans up. Classes: `.ty-scrollbar-{track,thumb}-{y,x}` plus state classes
+ * `.has-overflow`, `.dragging`, `.scrolling` (brief auto-hide after scroll).
  */
 export interface CustomScrollbarOptions {
     vertical?: boolean;
@@ -79,4 +66,3 @@ export declare class CustomScrollbar {
     private _handleTrackYDown;
     private _handleTrackXDown;
 }
-//# sourceMappingURL=custom-scrollbar.d.ts.map

package/lib/utils/custom-scrollbar.js

@@ -1,40 +1,12 @@
-/**
- * CustomScrollbar - Reusable scrollbar utility
- *
- * Attaches a custom rendered scrollbar (vertical and/or horizontal) to any
- * scrollable element. Uses the overlay approach: native overflow:auto is
- * preserved for scroll physics, native scrollbar is hidden via CSS,
- * and custom track/thumb elements are synced on top.
- *
- * Usage:
- *   const scrollbar = new CustomScrollbar(scrollEl, { vertical: true })
- *   // scrollbar.trackY, scrollbar.thumbY — append these to your DOM
- *   // scrollbar.trackX, scrollbar.thumbX — for horizontal
- *   scrollbar.destroy()  // cleanup
- *
- * CSS classes applied:
- *   .ty-scrollbar-track-y / .ty-scrollbar-track-x
- *   .ty-scrollbar-thumb-y / .ty-scrollbar-thumb-x
- *   .has-overflow — when content overflows
- *   .dragging — during thumb drag
- *   .scrolling — briefly after scroll (auto-hide)
- */
-/**
- * Check if custom scrollbar is enabled globally.
- * Default: true (custom scrollbar on).
- * Set data-ty-scrollbar="native" on <html> to opt out.
- */
 export function isCustomScrollbarEnabled() {
     return document.documentElement.getAttribute('data-ty-scrollbar') !== 'native';
 }
 export class CustomScrollbar {
     constructor(scrollEl, options = {}) {
-        // Elements
         this.trackY = null;
         this.thumbY = null;
         this.trackX = null;
         this.thumbX = null;
-        // State
         this._isDragging = false;
         this._dragAxis = 'y';
         this._dragStartPos = 0;
@@ -43,10 +15,9 @@ export class CustomScrollbar {
         this._hideTimeout = null;
         this._resizeObserver = null;
         this._scrollEl = scrollEl;
-        this._vertical = options.vertical !== false; // default true
+        this._vertical = options.vertical !== false;
         this._horizontal = options.horizontal ?? false;
         this._autoHideDelay = options.autoHideDelay ?? 1000;
-        // Bind handlers
         this._onScroll = this._handleScroll.bind(this);
         this._onThumbYDown = this._handleThumbYDown.bind(this);
         this._onThumbXDown = this._handleThumbXDown.bind(this);
@@ -54,7 +25,6 @@ export class CustomScrollbar {
         this._onTrackXDown = this._handleTrackXDown.bind(this);
         this._onDragMove = this._handleDragMove.bind(this);
         this._onDragEnd = this._handleDragEnd.bind(this);
-        // Create elements
         if (this._vertical) {
             this.trackY = this._createTrack('y');
             this.thumbY = this._createThumb('y');
@@ -65,7 +35,6 @@ export class CustomScrollbar {
             this.thumbX = this._createThumb('x');
             this.trackX.appendChild(this.thumbX);
         }
-        // Attach listeners
         this._scrollEl.addEventListener('scroll', this._onScroll, { passive: true });
         if (this.thumbY) {
             this.thumbY.addEventListener('pointerdown', this._onThumbYDown);
@@ -79,13 +48,10 @@ export class CustomScrollbar {
         if (this.trackX) {
             this.trackX.addEventListener('pointerdown', this._onTrackXDown);
         }
-        // ResizeObserver
         this._resizeObserver = new ResizeObserver(() => this.update());
         this._resizeObserver.observe(this._scrollEl);
-        // Initial update
         this.update();
     }
-    // ============ Element Creation ============
     _createTrack(axis) {
         const el = document.createElement('div');
         el.className = `ty-scrollbar-track-${axis}`;
@@ -96,13 +62,10 @@ export class CustomScrollbar {
         el.className = `ty-scrollbar-thumb-${axis}`;
         return el;
     }
-    // ============ Public API ============
-    /** Force update thumb size and position */
     update() {
         this._updateVertical();
         this._updateHorizontal();
     }
-    /** Reset scroll position */
     scrollToTop(smooth = false) {
         this._scrollEl.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
     }
@@ -115,7 +78,6 @@ export class CustomScrollbar {
     scrollToRight(smooth = false) {
         this._scrollEl.scrollTo({ left: this._scrollEl.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
     }
-    /** Cleanup all listeners and observers */
     destroy() {
         this._scrollEl.removeEventListener('scroll', this._onScroll);
         if (this.thumbY) {
@@ -143,7 +105,6 @@ export class CustomScrollbar {
             this._hideTimeout = null;
         }
     }
-    // ============ Scroll Handler ============
     _handleScroll() {
         if (this._rafId !== null)
             return;
@@ -153,7 +114,6 @@ export class CustomScrollbar {
             this._showScrollbars();
         });
     }
-    // ============ Update Logic ============
     _updateVertical() {
         if (!this.trackY || !this.thumbY)
             return;
@@ -208,7 +168,6 @@ export class CustomScrollbar {
         const maxThumbLeft = trackWidth - thumbWidth;
         this.thumbX.style.left = `${scrollRatio * maxThumbLeft}px`;
     }
-    // ============ Auto-hide ============
     _showScrollbars() {
         if (this._isDragging)
             return;
@@ -223,7 +182,6 @@ export class CustomScrollbar {
             this._hideTimeout = null;
         }, this._autoHideDelay);
     }
-    // ============ Thumb Drag ============
     _handleThumbYDown(e) {
         if (e.button !== 0)
             return;
@@ -291,7 +249,6 @@ export class CustomScrollbar {
         thumb.removeEventListener('pointercancel', this._onDragEnd);
         this._showScrollbars();
     }
-    // ============ Track Click ============
     _handleTrackYDown(e) {
         if (e.target === this.thumbY || e.button !== 0)
             return;
@@ -317,4 +274,3 @@ export class CustomScrollbar {
         });
     }
 }
-//# sourceMappingURL=custom-scrollbar.js.map

package/lib/utils/flavor-sheet.d.ts

@@ -29,4 +29,3 @@ export interface CustomFlavorParts {
  * adopted into the shadow root. Returns the sheet to store for the next call.
  */
 export declare function syncCustomFlavorSheet(shadow: ShadowRoot, sheet: CSSStyleSheet | null, flavor: unknown, css: (parts: CustomFlavorParts) => string): CSSStyleSheet | null;
-//# sourceMappingURL=flavor-sheet.d.ts.map

package/lib/utils/flavor-sheet.js

@@ -1,26 +1,4 @@
-/**
- * Custom (non-built-in) flavor support.
- *
- * Built-in flavors get static per-flavor CSS in each component's stylesheet.
- * Any other flavor string is a custom flavor: the component generates the
- * same wiring at runtime, pointed at the user's design tokens
- * (--ty-color-X / --ty-bg-X / --ty-solid-X / ...), and adopts it as a
- * constructed stylesheet.
- *
- * Why an adopted sheet: render() implementations replace shadowRoot.innerHTML
- * (which would destroy an injected <style> element), and inline style on the
- * host would defeat page-level overrides. Adopted sheets survive renders, and
- * outer-document rules on the host still take precedence over :host rules —
- * so `ty-tag[flavor="X"] { --tag-bg: ... }` escape hatches keep working.
- */
 import { FLAVORS } from '../types/common.js';
-/**
- * Keep a shadow root's custom-flavor sheet in sync with the current flavor.
- *
- * Built-in flavors (and anything that isn't a plain identifier, so attribute
- * values can't inject CSS) remove the sheet. Custom flavors get `css(parts)`
- * adopted into the shadow root. Returns the sheet to store for the next call.
- */
 export function syncCustomFlavorSheet(shadow, sheet, flavor, css) {
     const full = String(flavor || '');
     const base = full.replace(/[+-]$/, '');
@@ -37,4 +15,3 @@ export function syncCustomFlavorSheet(shadow, sheet, flavor, css) {
     sheet.replaceSync(css({ flavor: full, base, shade: full.slice(base.length) }));
     return sheet;
 }
-//# sourceMappingURL=flavor-sheet.js.map

package/lib/utils/icon-registry.d.ts

@@ -1,7 +1,6 @@
 /**
  * Icon Registry System
  * Simple icon storage and retrieval with Cache API persistence
- * PORTED FROM: clj/ty/icons.cljs
  */
 /**
  * Read icon directly from cache (for immediate rendering)
@@ -62,4 +61,3 @@ export declare function getCacheInfo(): Promise<{
     available: boolean;
     iconCount?: number;
 }>;
-//# sourceMappingURL=icon-registry.d.ts.map