@dodlhuat/basix 1.3.1 → 1.3.3

package/js/bottom-sheet.d.ts

@@ -1,3 +1,4 @@
+/** Options for configuring a BottomSheet instance. */
 interface BottomSheetOptions {
     content: string;
     header?: string;
@@ -6,6 +7,7 @@ interface BottomSheetOptions {
     snapHeight?: 'auto' | 'half' | 'full';
     onClose?: () => void;
 }
+/** Slide-up sheet that attaches to the bottom of the viewport. */
 declare class BottomSheet {
     private readonly content;
     private readonly header?;
@@ -22,7 +24,7 @@ declare class BottomSheet {
     private isDragging;
     constructor(options: BottomSheetOptions);
     show(): void;
-    hide(): void;
+    hide: () => void;
     snapTo(height: 'auto' | 'half' | 'full'): void;
     private handleEscape;
     private handleBackdropClick;

package/js/bottom-sheet.js

@@ -1,26 +1,26 @@
 import { sanitizeHtml } from './utils.js';
+/** Slide-up sheet that attaches to the bottom of the viewport. */
 class BottomSheet {
+    content;
+    header;
+    footer;
+    closeable;
+    snapHeight;
+    onClose;
+    wrapper = null;
+    sheet = null;
+    handle = null;
+    body = null;
+    dragStartY = 0;
+    currentDragY = 0;
+    isDragging = false;
     constructor(options) {
-        this.wrapper = null;
-        this.sheet = null;
-        this.handle = null;
-        this.body = null;
-        // Touch drag state
-        this.dragStartY = 0;
-        this.currentDragY = 0;
-        this.isDragging = false;
         this.content = options.content;
         this.header = options.header;
         this.footer = options.footer;
         this.closeable = options.closeable ?? true;
         this.snapHeight = options.snapHeight ?? 'auto';
         this.onClose = options.onClose;
-        this.hide = this.hide.bind(this);
-        this.handleEscape = this.handleEscape.bind(this);
-        this.handleBackdropClick = this.handleBackdropClick.bind(this);
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
     }
     show() {
         this.hide();
@@ -53,7 +53,7 @@ class BottomSheet {
             wrapper.classList.add('is-visible');
         });
     }
-    hide() {
+    hide = () => {
         if (!this.wrapper)
             return;
         const backdrop = this.wrapper.querySelector('.bottom-sheet-backdrop');
@@ -75,7 +75,7 @@ class BottomSheet {
             wrapper.remove();
             this.onClose?.();
         }, 420);
-    }
+    };
     snapTo(height) {
         if (!this.sheet)
             return;
@@ -85,24 +85,24 @@ class BottomSheet {
             this.sheet.classList.add(`snap-${height}`);
         }
     }
-    handleEscape(e) {
+    handleEscape = (e) => {
         if (e.key === 'Escape')
             this.hide();
-    }
-    handleBackdropClick(e) {
+    };
+    handleBackdropClick = (e) => {
         if (e.target?.classList.contains('bottom-sheet-backdrop')) {
             this.hide();
         }
-    }
-    handleTouchStart(e) {
+    };
+    handleTouchStart = (e) => {
         this.dragStartY = e.touches[0].clientY;
         this.currentDragY = 0;
         this.isDragging = true;
         if (this.sheet) {
             this.sheet.style.transition = 'none';
         }
-    }
-    handleTouchMove(e) {
+    };
+    handleTouchMove = (e) => {
         if (!this.isDragging || !this.sheet)
             return;
         const deltaY = e.touches[0].clientY - this.dragStartY;
@@ -118,8 +118,8 @@ class BottomSheet {
         const translateX = isDesktop ? '-50%' : '0';
         this.sheet.style.transform = `translateX(${translateX}) translateY(${this.currentDragY}px)`;
         e.preventDefault();
-    }
-    handleTouchEnd() {
+    };
+    handleTouchEnd = () => {
         if (!this.isDragging || !this.sheet)
             return;
         this.isDragging = false;
@@ -128,11 +128,10 @@ class BottomSheet {
             this.hide();
         }
         else {
-            // Spring back
             this.sheet.style.transition = '';
             this.sheet.style.transform = '';
         }
-    }
+    };
     updateScrollMask() {
         if (!this.body)
             return;

package/js/calendar.d.ts

@@ -1,3 +1,4 @@
+/** Represents a single calendar event with a start/end date. */
 export interface CalendarEvent {
     id: string;
     title: string;
@@ -7,6 +8,7 @@ export interface CalendarEvent {
     className?: string;
 }
 export type CalendarView = 'month' | 'week' | 'agenda';
+/** Localisation strings and week-start configuration for the Calendar. */
 export interface CalendarLocale {
     monthNames: string[];
     dayNamesShort: string[];
@@ -19,6 +21,7 @@ export interface CalendarLocale {
     allDay: string;
     noEvents: string;
 }
+/** Configuration options for the Calendar component. */
 export interface CalendarOptions {
     container: HTMLElement | string;
     events?: CalendarEvent[];
@@ -31,6 +34,7 @@ export interface CalendarOptions {
     className?: string;
     iconBasePath?: string;
 }
+/** Layout descriptor for a multi-day event spanning columns in a week row. */
 interface SpanLayout {
     event: CalendarEvent;
     colStart: number;
@@ -39,6 +43,7 @@ interface SpanLayout {
     continuesBefore: boolean;
     continuesAfter: boolean;
 }
+/** Layout descriptor for a timed event positioned in a day column. */
 interface TimedEventLayout {
     event: CalendarEvent;
     top: number;
@@ -68,6 +73,7 @@ export declare const CalendarLogic: {
     computeTimedLayout(events: CalendarEvent[], day: Date): TimedEventLayout[];
     nowLinePct(): number;
 };
+/** Produces HTML strings for each Calendar view (month, week, agenda). */
 export declare class CalendarRenderer {
     private locale;
     constructor(locale: CalendarLocale);
@@ -80,6 +86,7 @@ export declare class CalendarRenderer {
     renderWeekView(date: Date, events: CalendarEvent[], firstDayOfWeek: number, showNowLine?: boolean): string;
     renderAgendaView(year: number, month: number, events: CalendarEvent[]): string;
 }
+/** Main Calendar controller — manages state, rendering, and event delegation. */
 export declare class Calendar {
     private container;
     private options;

package/js/calendar.js

@@ -1,9 +1,3 @@
-// ============================================================
-// calendar.ts — Basix Calendar Component
-// ============================================================
-// -----------------------------------------------------------
-// Date Logic
-// -----------------------------------------------------------
 export const CalendarLogic = {
     getMonthGrid(year, month, firstDayOfWeek) {
         const firstOfMonth = new Date(year, month, 1);
@@ -146,7 +140,6 @@ export const CalendarLogic = {
                 return diff;
             return (b.end.getTime() - b.start.getTime()) - (a.end.getTime() - a.start.getTime());
         });
-        // Greedy sub-column assignment
         const colEnds = [];
         const assigns = [];
         for (const event of sorted) {
@@ -160,7 +153,6 @@ export const CalendarLogic = {
             assigns.push({ event, col });
         }
         return assigns.map(({ event, col }) => {
-            // cols = highest sub-column among events that overlap this one + 1
             const cols = assigns
                 .filter(a => a.event.start < event.end && a.event.end > event.start)
                 .reduce((max, a) => Math.max(max, a.col), 0) + 1;
@@ -173,9 +165,6 @@ export const CalendarLogic = {
         return (now.getHours() * 60 + now.getMinutes()) / 1440 * 100;
     },
 };
-// -----------------------------------------------------------
-// Default Locale
-// -----------------------------------------------------------
 const DEFAULT_LOCALE = {
     monthNames: [
         'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
@@ -191,10 +180,9 @@ const DEFAULT_LOCALE = {
     allDay: 'Ganztägig',
     noEvents: 'Keine Termine',
 };
-// -----------------------------------------------------------
-// Renderer
-// -----------------------------------------------------------
+/** Produces HTML strings for each Calendar view (month, week, agenda). */
 export class CalendarRenderer {
+    locale;
     constructor(locale) {
         this.locale = locale;
     }
@@ -288,7 +276,6 @@ export class CalendarRenderer {
             const dow = this.locale.dayNamesShort[(d.getDay() + 7) % 7];
             return `<div class="${cls}">${dow}<span>${d.getDate()}</span></div>`;
         }).join('');
-        // All-day row: span layout for all allDay events (both single-day and multi-day)
         const allDayEvents = events.filter(e => e.allDay);
         const allDayLayouts = CalendarLogic.computeSpanLayout(days, allDayEvents);
         const allDayLanes = allDayLayouts.length > 0 ? Math.max(...allDayLayouts.map(l => l.lane)) + 1 : 0;
@@ -349,7 +336,6 @@ export class CalendarRenderer {
         for (let d = 1; d <= daysInMonth; d++) {
             const day = new Date(year, month, d);
             const dayEvents = CalendarLogic.getEventsForDay(events, day);
-            // Multi-day events show only once (first occurrence in this month)
             const filtered = dayEvents.filter(e => {
                 if (!CalendarLogic.isMultiDay(e))
                     return true;
@@ -394,18 +380,17 @@ export class CalendarRenderer {
         return `<div class="cal__agenda">${html}</div>`;
     }
 }
-// -----------------------------------------------------------
-// Calendar — main controller
-// -----------------------------------------------------------
+/** Main Calendar controller — manages state, rendering, and event delegation. */
 export class Calendar {
+    container;
+    options;
+    locale;
+    renderer;
+    currentDate;
+    currentView;
+    events = [];
+    nowLineTimer = null;
     constructor(options) {
-        this.events = [];
-        this.nowLineTimer = null;
-        // ----------------------------------------------------------
-        // Event delegation
-        // ----------------------------------------------------------
-        this.boundHandleClick = (e) => this.handleClick(e);
-        this.boundHandleKeydown = (e) => this.handleKeydown(e);
         if (typeof options.container === 'string') {
             const el = document.querySelector(options.container);
             if (!el)
@@ -435,9 +420,6 @@ export class Calendar {
         this.render();
         this.attachEvents();
     }
-    // ----------------------------------------------------------
-    // Public API
-    // ----------------------------------------------------------
     setView(view) {
         this.currentView = view;
         this.render();
@@ -490,9 +472,6 @@ export class Calendar {
         this.container.innerHTML = '';
         this.container.removeAttribute('data-cal');
     }
-    // ----------------------------------------------------------
-    // Rendering
-    // ----------------------------------------------------------
     getTitle() {
         const { monthNames } = this.locale;
         const y = this.currentDate.getFullYear();
@@ -571,7 +550,7 @@ export class Calendar {
             const line = this.container.querySelector('.cal__now-line');
             if (line)
                 line.style.top = `${CalendarLogic.nowLinePct().toFixed(3)}%`;
-        }, 60000);
+        }, 60_000);
     }
     clearNowLineTimer() {
         if (this.nowLineTimer !== null) {
@@ -579,6 +558,8 @@ export class Calendar {
             this.nowLineTimer = null;
         }
     }
+    boundHandleClick = (e) => this.handleClick(e);
+    boundHandleKeydown = (e) => this.handleKeydown(e);
     attachEvents() {
         this.container.addEventListener('click', this.boundHandleClick);
         this.container.addEventListener('keydown', this.boundHandleKeydown);

package/js/carousel.d.ts

@@ -1,8 +1,10 @@
+/** Options for configuring a Carousel instance. */
 interface CarouselOptions {
     loop?: boolean;
     autoPlay?: boolean;
     autoPlayInterval?: number;
 }
+/** Slide-based carousel with optional autoplay, loop, dot navigation, and touch support. */
 declare class Carousel {
     private root;
     private options;

package/js/carousel.js

@@ -1,7 +1,18 @@
+/** Slide-based carousel with optional autoplay, loop, dot navigation, and touch support. */
 class Carousel {
+    root;
+    options;
+    track;
+    slides;
+    slideWidth;
+    currentIndex;
+    prevButton;
+    nextButton;
+    dotsNav;
+    dots;
+    autoPlayTimer = null;
+    abortController = new AbortController();
     constructor(elementOrSelector, options = {}) {
-        this.autoPlayTimer = null;
-        this.abortController = new AbortController();
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -60,7 +71,6 @@ class Carousel {
             this.dots.push(dot);
         });
         this.root.appendChild(this.dotsNav);
-        // Make focusable for keyboard nav
         this.root.setAttribute('tabindex', '0');
     }
     bindEvents() {
@@ -78,14 +88,12 @@ class Carousel {
             this.slideWidth = this.slides[0].getBoundingClientRect().width;
             this.moveToSlide(this.currentIndex, false);
         }, sig);
-        // Keyboard navigation
         this.root.addEventListener('keydown', (e) => {
             if (e.key === 'ArrowLeft')
                 this.moveToPrevSlide();
             if (e.key === 'ArrowRight')
                 this.moveToNextSlide();
         }, sig);
-        // Pause autoplay on hover / focus
         if (this.options.autoPlay) {
             this.root.addEventListener('mouseenter', () => this.pauseAutoPlay(), sig);
             this.root.addEventListener('mouseleave', () => this.resumeAutoPlay(), sig);

package/js/chart.d.ts

@@ -1,14 +1,17 @@
 export type ChartType = 'line' | 'area' | 'column' | 'bar' | 'pie';
 export type ChartCurve = 'smooth' | 'linear' | 'step';
+/** A single labelled data value within a chart series. */
 export interface ChartDataPoint {
     label: string;
     value: number;
 }
+/** A named data series with optional per-series colour override. */
 export interface ChartSeries {
     name: string;
     data: ChartDataPoint[];
     color?: string;
 }
+/** Configuration options for a Chart instance. */
 export interface ChartOptions {
     type: ChartType;
     series: ChartSeries[];
@@ -27,6 +30,7 @@ export interface ChartOptions {
     yMax?: number;
     onPointClick?: (series: ChartSeries, point: ChartDataPoint, index: number) => void;
 }
+/** SVG-based chart component supporting line, area, column, bar, and pie types. */
 declare class Chart {
     private container;
     private opts;

package/js/chart.js

@@ -7,13 +7,16 @@ const FALLBACK_COLORS = [
     '#8B5CF6', '#06B6D4', '#F97316', '#EC4899',
 ];
 const SVG_NS = 'http://www.w3.org/2000/svg';
-// ─── Chart ──────────────────────────────────────────────────────────────────
+/** SVG-based chart component supporting line, area, column, bar, and pie types. */
 class Chart {
+    container;
+    opts;
+    tooltip;
+    colors = [];
+    abortController = new AbortController();
+    resizeTimer = null;
+    resizeObserver = null;
     constructor(selector, options) {
-        this.colors = [];
-        this.abortController = new AbortController();
-        this.resizeTimer = null;
-        this.resizeObserver = null;
         const el = typeof selector === 'string'
             ? document.querySelector(selector)
             : selector;
@@ -37,7 +40,6 @@ class Chart {
         this.render();
         this.attachResizeObserver();
     }
-    // ── Render ──────────────────────────────────────────────────────────────
     render() {
         this.abortController.abort();
         this.abortController = new AbortController();
@@ -72,7 +74,6 @@ class Chart {
             this.container.appendChild(this.buildLegend());
         }
     }
-    // ── Line / Area ──────────────────────────────────────────────────────────
     renderLineOrArea(canvas, isArea) {
         const { series, height, showGrid, animate, yMin } = this.opts;
         if (!series.length || !series[0].data.length)
@@ -119,7 +120,6 @@ class Chart {
                 });
             }
             svg.appendChild(linePath);
-            // Data point markers
             s.data.forEach((d, i) => {
                 const g = this.svgEl('g', {
                     class: 'chart-point-group',
@@ -145,7 +145,6 @@ class Chart {
             });
         });
     }
-    // ── Column ───────────────────────────────────────────────────────────────
     renderColumn(canvas) {
         const { series, height, showGrid, animate, yMin } = this.opts;
         if (!series.length || !series[0].data.length)
@@ -190,7 +189,6 @@ class Chart {
             });
         });
     }
-    // ── Bar (horizontal) ─────────────────────────────────────────────────────
     renderBar(canvas) {
         const { series, height, animate } = this.opts;
         if (!series.length || !series[0].data.length)
@@ -206,7 +204,6 @@ class Chart {
         const numPts = labels.length;
         const numSeries = series.length;
         const svg = this.createSVG(canvas, svgW, svgH);
-        // Vertical grid lines
         const numTicks = 5;
         for (let t = 0; t <= numTicks; t++) {
             const x = m.left + (t / numTicks) * w;
@@ -223,7 +220,6 @@ class Chart {
             label.textContent = this.fmt(xMax * t / numTicks);
             svg.appendChild(label);
         }
-        // Category labels on Y axis
         const groupH = h / numPts;
         labels.forEach((label, i) => {
             const y = m.top + i * groupH + groupH / 2;
@@ -235,7 +231,6 @@ class Chart {
             text.textContent = label;
             svg.appendChild(text);
         });
-        // Bars
         const innerPad = groupH * 0.18;
         const barH = Math.max(2, (groupH - innerPad) / numSeries - 2);
         series.forEach((s, si) => {
@@ -259,7 +254,6 @@ class Chart {
             });
         });
     }
-    // ── Pie ──────────────────────────────────────────────────────────────────
     renderPie(canvas) {
         const { series, height, animate, showLegend } = this.opts;
         const s = series[0];
@@ -273,7 +267,7 @@ class Chart {
         const r = Math.min(svgW, svgH) / 2 - Math.max(m.top, m.left) - 8;
         const total = s.data.reduce((sum, d) => sum + d.value, 0);
         const svg = this.createSVG(canvas, svgW, svgH);
-        let startAngle = -90; // start at 12 o'clock
+        let startAngle = -90;
         s.data.forEach((d, i) => {
             const color = this.colors[i % this.colors.length];
             const sweep = (d.value / total) * 360;
@@ -290,7 +284,6 @@ class Chart {
                 const delay = i * 70;
                 path.style.animationDelay = `${delay}ms`;
             }
-            // Hover: nudge slice outward
             const { x: dx, y: dy } = this.polar(0, 0, 8, midAngle);
             path.addEventListener('mouseenter', (e) => {
                 path.style.transform = `translate(${dx}px, ${dy}px)`;
@@ -310,7 +303,6 @@ class Chart {
             this.container.appendChild(this.buildPieLegend(s, total));
         }
     }
-    // ── Axis helpers ─────────────────────────────────────────────────────────
     renderHGrid(svg, m, w, h, yMin, yMax) {
         const numTicks = 5;
         for (let i = 0; i <= numTicks; i++) {
@@ -355,7 +347,6 @@ class Chart {
             svg.appendChild(text);
         }
     }
-    // ── Geometry helpers ─────────────────────────────────────────────────────
     buildPath(pts) {
         switch (this.opts.curve) {
             case 'linear': return this.linearPath(pts);
@@ -410,7 +401,6 @@ class Chart {
         const rad = deg * Math.PI / 180;
         return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
     }
-    // ── Legend builders ──────────────────────────────────────────────────────
     buildHeader() {
         const el = this.div('chart-header');
         if (this.opts.title) {
@@ -454,7 +444,6 @@ class Chart {
         });
         return el;
     }
-    // ── Tooltip ──────────────────────────────────────────────────────────────
     showTooltip(e, html) {
         this.tooltip.innerHTML = html;
         this.tooltip.classList.add('is-visible');
@@ -466,7 +455,6 @@ class Chart {
         const vh = window.innerHeight;
         let x = e.clientX + 14;
         let y = e.clientY - 36;
-        // Keep inside viewport
         if (x + 200 > vw)
             x = e.clientX - 14 - tt.offsetWidth;
         if (y < 0)
@@ -479,7 +467,6 @@ class Chart {
     hideTooltip() {
         this.tooltip.classList.remove('is-visible');
     }
-    // ── Event wiring ─────────────────────────────────────────────────────────
     onPoint(g, s, d, i) {
         const sig = { signal: this.abortController.signal };
         g.addEventListener('mouseenter', (e) => {
@@ -499,7 +486,6 @@ class Chart {
         rect.addEventListener('mouseleave', () => this.hideTooltip(), sig);
         rect.addEventListener('click', () => this.opts.onPointClick(s, d, i), sig);
     }
-    // ── Color resolution ─────────────────────────────────────────────────────
     resolveColors() {
         const style = getComputedStyle(this.container);
         this.colors = (this.opts.type === 'pie' ? this.opts.series[0]?.data ?? [] : this.opts.series)
@@ -507,7 +493,6 @@ class Chart {
             const css = style.getPropertyValue(`--chart-color-${i + 1}`).trim();
             return css || FALLBACK_COLORS[i % FALLBACK_COLORS.length];
         });
-        // Allow per-series color override (not pie)
         if (this.opts.type !== 'pie') {
             this.opts.series.forEach((s, i) => {
                 if (s.color)
@@ -515,7 +500,6 @@ class Chart {
             });
         }
     }
-    // ── DOM & SVG helpers ────────────────────────────────────────────────────
     div(className) {
         const el = document.createElement('div');
         el.className = className;
@@ -537,13 +521,12 @@ class Chart {
         return el;
     }
     fmt(v) {
-        if (v >= 1000000)
-            return `${(v / 1000000).toFixed(1)}M`;
-        if (v >= 1000)
-            return `${(v / 1000).toFixed(1)}K`;
+        if (v >= 1_000_000)
+            return `${(v / 1_000_000).toFixed(1)}M`;
+        if (v >= 1_000)
+            return `${(v / 1_000).toFixed(1)}K`;
         return v % 1 === 0 ? String(Math.round(v)) : v.toFixed(1);
     }
-    // ── Resize ───────────────────────────────────────────────────────────────
     attachResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
             if (this.resizeTimer)
@@ -552,7 +535,6 @@ class Chart {
         });
         this.resizeObserver.observe(this.container);
     }
-    // ── Public API ───────────────────────────────────────────────────────────
     update(series) {
         this.opts.series = series;
         this.render();

package/js/code-viewer.d.ts

@@ -1,4 +1,5 @@
 type SupportedLanguage = 'javascript' | 'js' | 'html' | 'css';
+/** Renders syntax-highlighted code inside a container element. */
 declare class CodeViewer {
     private container;
     private code;

package/js/code-viewer.js

@@ -1,4 +1,8 @@
+/** Renders syntax-highlighted code inside a container element. */
 class CodeViewer {
+    container;
+    code;
+    language;
     constructor(elementOrSelector, code, language = 'javascript') {
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)

package/js/context-menu.d.ts

@@ -1,3 +1,4 @@
+/** Definition for a single context menu item including optional submenu. */
 interface ContextMenuItemDef {
     label: string;
     icon?: string;
@@ -10,13 +11,19 @@ interface ContextMenuItemDef {
 type ContextMenuInput = ContextMenuItemDef | 'separator' | {
     group: string;
 };
+interface ContextMenuOptions {
+    /** Path to the SVG sprite file, e.g. `'svg-icons/icons.svg'`. Required to render icons. */
+    spritePath?: string;
+}
+/** Right-click context menu with keyboard navigation and nested submenu support. */
 declare class ContextMenu {
     private items;
     private targets;
     private menuEl;
     private currentTarget;
     private abortController;
-    constructor(selectorOrElement: string | HTMLElement | HTMLElement[], items: ContextMenuInput[]);
+    private spritePath;
+    constructor(selectorOrElement: string | HTMLElement | HTMLElement[], items: ContextMenuInput[], options?: ContextMenuOptions);
     private init;
     private open;
     private close;
@@ -28,4 +35,4 @@ declare class ContextMenu {
     private activateFocused;
     destroy(): void;
 }
-export { ContextMenu, type ContextMenuInput, type ContextMenuItemDef };
+export { ContextMenu, type ContextMenuInput, type ContextMenuItemDef, type ContextMenuOptions };