@makolabs/ripple 0.4.1-0 → 0.5.0

package/dist/forms/DateRange.svelte

@@ -245,9 +245,9 @@
 			{id}
 			type="button"
 			class={cn(
-				'flex w-full items-center justify-between rounded-md border border-default-300 bg-white px-3 py-2 text-sm shadow-sm',
+				'border-default-300 flex w-full items-center justify-between rounded-md border bg-white px-3 py-2 text-sm shadow-sm',
 				disabled
-					? 'cursor-not-allowed bg-default-100 text-default-400'
+					? 'bg-default-100 text-default-400 cursor-not-allowed'
 					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-default-400 focus:ring-2'
 			)}
 			onclick={toggleDatepicker}
@@ -262,7 +262,7 @@
 						? `${formatDate(startDate)} - Select end date`
 						: placeholder}
 			</span>
-			<svg class="h-5 w-5 text-default-400" viewBox="0 0 20 20" fill="currentColor">
+			<svg class="text-default-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
 				<path
 					fill-rule="evenodd"
 					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -274,7 +274,7 @@
 		{#if startDate || endDate}
 			<button
 				type="button"
-				class="absolute top-1/2 right-10 -translate-y-1/2 text-default-400 hover:text-default-500"
+				class="text-default-400 hover:text-default-500 absolute top-1/2 right-10 -translate-y-1/2"
 				onclick={clearDates}
 				aria-label="Clear dates"
 			>
@@ -298,7 +298,7 @@
 					<button
 						type="button"
 						aria-label="Previous month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={prevMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -311,7 +311,7 @@
 					</button>
 					<button
 						type="button"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700 hover:bg-default-100"
+						class="text-default-700 hover:bg-default-100 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
 						onclick={showMonths}
 					>
 						{getMonthName(viewDate.getMonth())}
@@ -320,7 +320,7 @@
 					<button
 						type="button"
 						aria-label="Next month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={nextMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -335,7 +335,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
 					>
@@ -350,7 +350,7 @@
 					<button
 						type="button"
 						aria-label="Current year"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
+						class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
 						onclick={showYears}
 					>
 						{viewDate.getFullYear()}
@@ -358,7 +358,7 @@
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
 					>
@@ -374,7 +374,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
 					>
@@ -389,14 +389,14 @@
 					<button
 						type="button"
 						aria-label="Current year range"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
+						class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
 					>
 						{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}
 					</button>
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
+						class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
 					>
@@ -412,7 +412,7 @@
 			</div>
 
 			{#if viewMode === 'days'}
-				<div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-default-500">
+				<div class="text-default-500 mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium">
 					<div>Su</div>
 					<div>Mo</div>
 					<div>Tu</div>
@@ -427,7 +427,7 @@
 							type="button"
 							class={cn(
 								'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
-								isDisabled ? 'cursor-not-allowed text-default-300' : 'hover:bg-default-100',
+								isDisabled ? 'text-default-300 cursor-not-allowed' : 'hover:bg-default-100',
 								isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
 								isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
 								!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
@@ -479,7 +479,9 @@
 			{/if}
 
 			{#if startDate || endDate}
-				<div class="mt-4 flex justify-between border-t border-default-200 pt-3 text-xs text-default-500">
+				<div
+					class="border-default-200 text-default-500 mt-4 flex justify-between border-t pt-3 text-xs"
+				>
 					<div>
 						{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
 					</div>

package/dist/forms/NumberInput.svelte

@@ -79,7 +79,7 @@
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
+		<label for={name} class="text-default-700 block text-sm font-medium">{label}</label>
 	{/if}
 	<div class={containerClass} bind:this={containerRef}>
 		<svg

package/dist/forms/RadioInputs.svelte

@@ -48,7 +48,7 @@
 					{required}
 					aria-describedby={errors.length ? `${name}-errors` : undefined}
 				/>
-				<label for={`${name}-${option.value}`} class="text-sm text-default-700">
+				<label for={`${name}-${option.value}`} class="text-default-700 text-sm">
 					{option.label}
 				</label>
 			</div>

package/dist/forms/RadioPill.svelte

@@ -17,7 +17,7 @@
 		if (onchange) onchange(optionValue);
 	}
 
-	let pillDivRef: HTMLDivElement;	
+	let pillDivRef: HTMLDivElement;
 	const hasError = $derived(errors && errors.length > 0);
 
 	$effect(() => {

package/dist/forms/Tags.svelte

@@ -130,7 +130,7 @@
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
+		<label for={name} class="text-default-700 block text-sm font-medium">{label}</label>
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
 		{#each value as tag}
@@ -144,7 +144,7 @@
 			{name}
 			id={name}
 			{placeholder}
-			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-default-400', {
+			class={cn('placeholder:text-default-400 min-w-[120px] flex-1 bg-transparent outline-none', {
 				'text-sm': size === Size.SM,
 				'text-base': size === Size.BASE,
 				'text-lg': size === Size.LG

package/dist/helper/date.d.ts

@@ -5,3 +5,4 @@ export declare const DATE_FORMAT: {
 };
 export declare function formatDateTime(time: Date | string, format?: string): string;
 export declare function getRelativeTime(time: Date | string): string;
+export declare function formatTime(time: string | number | Date): string;

package/dist/helper/date.js

@@ -13,3 +13,9 @@ export function getRelativeTime(time) {
     const date = dayjs(time);
     return date.fromNow();
 }
+export function formatTime(time) {
+    return new Date(time).toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export type MakeModalProps = {
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
     position?: 'top' | 'center' | 'bottom';
+    size?: VariantSizes;
     class?: string;
     backdropclass?: string;
     contentclass?: string;
@@ -384,6 +385,7 @@ export { default as Navbar } from './layout/navbar/Navbar.svelte';
 export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
 export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
+export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
 export { dropdownMenu } from './elements/dropdown/dropdown.js';
 export { badge } from './elements/badge/badge.js';
 export { buttonVariants } from './button/button.js';
@@ -392,6 +394,7 @@ export { drawer } from './drawer/drawer.js';
 export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 export { metricCard } from './layout/card/metric-card.js';
+export { activityList } from './layout/activity-list/activity-list.js';
 export type ChartColorKey = keyof typeof ChartColor;
 export type ChartColorValue = (typeof ChartColor)[ChartColorKey];
 export type ChartColors = {
@@ -593,6 +596,10 @@ export interface UploadedFile {
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 export { default as Toaster } from './sonner/sonner.svelte';
+export { default as AIChatInterface } from './ai/AIChatInterface.svelte';
+export { default as MermaidRenderer } from './ai/MermaidRenderer.svelte';
+export { default as CodeRenderer } from './ai/CodeRenderer.svelte';
+export * from './ai/content-detector.js';
 export interface FormProps<T extends Record<string, unknown>> {
     form: SuperForm<any>;
     class?: string;
@@ -613,7 +620,6 @@ export type InputProps = {
     disabled?: boolean;
     class?: string;
     size?: VariantSizes;
-    color?: VariantColors;
     id?: string;
     errors?: string[];
 } & DOMAttributes<HTMLInputElement>;
@@ -827,9 +833,67 @@ export type CompactFiltersProps = {
     expandedClass?: ClassValue;
     FilterIcon?: Component;
 };
+export type ActivityItemBadge = {
+    text: string;
+    class: string;
+};
+export type ActivityItemAction = {
+    label: string;
+    onClick?: () => void;
+};
+export type ActivityItem = {
+    title: string;
+    subtitle?: string;
+    badges?: ActivityItemBadge[];
+    actions?: ActivityItemAction[];
+};
+export type ActivityListProps = {
+    title?: string;
+    items?: ActivityItem[];
+    color?: VariantColors;
+    class?: ClassValue;
+    headerClass?: ClassValue;
+    titleClass?: ClassValue;
+    contentClass?: ClassValue;
+    itemClass?: ClassValue;
+    onItemClick?: (item: ActivityItem, index: number) => void;
+    children?: Snippet;
+};
 export { CompactFilters } from './filters/index.js';
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
+export * from './adapters/ai/index.js';
+export type ChatMessageType = 'chat' | 'action' | 'thinking';
+export type StreamingCallback = (response: ChatResponse) => void;
+export interface ChatAction {
+    type: string;
+    data: any;
+    metadata?: Record<string, any>;
+}
+export interface ChatMessage {
+    id: string;
+    type: ChatMessageType;
+    content: string;
+    timestamp: Date;
+    action?: ChatAction;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface ChatResponse {
+    type: ChatMessageType;
+    content: string;
+    action?: ChatAction;
+    messageId?: string;
+    isStreaming?: boolean;
+    isStreamEnd?: boolean;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface QuickAction {
+    label: string;
+    prompt: string;
+    icon?: Component;
+}
 export interface FileBrowserProps {
     adapter: StorageAdapter;
     startPath?: string;

package/dist/index.js

@@ -42,6 +42,8 @@ export { default as Navbar } from './layout/navbar/Navbar.svelte';
 export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
 export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
+// Elements - ActivityList
+export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
 // Component Variant Utilities
 export { dropdownMenu } from './elements/dropdown/dropdown.js';
 export { badge } from './elements/badge/badge.js';
@@ -51,11 +53,18 @@ export { drawer } from './drawer/drawer.js';
 export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 export { metricCard } from './layout/card/metric-card.js';
+export { activityList } from './layout/activity-list/activity-list.js';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 // Toaster: Should be registered in +layout.svelte
 export { default as Toaster } from './sonner/sonner.svelte';
+// AI Components
+export { default as AIChatInterface } from './ai/AIChatInterface.svelte';
+export { default as MermaidRenderer } from './ai/MermaidRenderer.svelte';
+export { default as CodeRenderer } from './ai/CodeRenderer.svelte';
+// AI Content Detection Utilities
+export * from './ai/content-detector.js';
 // Form Component Exports
 export { default as Form } from './forms/Form.svelte';
 export { default as Input } from './forms/Input.svelte';
@@ -75,3 +84,5 @@ export { CompactFilters } from './filters/index.js';
 // File Browser and Storage Adapters
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
+// AI Adapters
+export * from './adapters/ai/index.js';

package/dist/layout/activity-list/ActivityList.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { activityList } from './activity-list.js';
+	import type { ActivityListProps } from '../../index.js';
+	import { Color } from '../../variants.js';
+
+	let {
+		title,
+		items = [],
+		color = Color.DEFAULT,
+		class: className = '',
+		headerClass = '',
+		titleClass = '',
+		contentClass = '',
+		itemClass = '',
+		onItemClick,
+		children
+	}: ActivityListProps = $props();
+
+	const {
+		base,
+		header,
+		title: titleSlot,
+		content,
+		item,
+		itemContent,
+		itemMain,
+		itemHeader,
+		itemTitle,
+		itemSubtitle,
+		itemActions
+	} = $derived(activityList({ color }));
+
+	const baseClass = $derived(cn(base(), className));
+	const headerClasses = $derived(cn(header(), headerClass));
+	const titleClasses = $derived(cn(titleSlot(), titleClass));
+	const contentClasses = $derived(cn(content(), contentClass));
+</script>
+
+<div class={baseClass}>
+	{#if title}
+		<div class={headerClasses}>
+			<h2 class={titleClasses}>{title}</h2>
+		</div>
+	{/if}
+	
+	<div class={contentClasses}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{#each items as activityItem, index}
+				<div class={cn(item(), itemClass)} role="button" tabindex="0">
+					<div class={itemContent()}>
+						<div class={itemMain()}>
+							<div class={itemHeader()}>
+								<button
+									class={itemTitle()}
+									onclick={() => onItemClick?.(activityItem, index)}
+								>
+									{activityItem.title}
+								</button>
+								{#if activityItem.badges}
+									{#each activityItem.badges as badge}
+										<span class="ml-3 inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}">
+											{badge.text}
+										</span>
+									{/each}
+								{/if}
+							</div>
+							{#if activityItem.subtitle}
+								<div class={itemSubtitle()}>
+									{activityItem.subtitle}
+								</div>
+							{/if}
+						</div>
+						{#if activityItem.actions}
+							<div class={itemActions()}>
+								{#each activityItem.actions as action}
+									<button
+										class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+										onclick={() => action.onClick?.()}
+									>
+										{action.label}
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+

package/dist/layout/activity-list/ActivityList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ActivityListProps } from '../../index.js';
+declare const ActivityList: import("svelte").Component<ActivityListProps, {}, "">;
+type ActivityList = ReturnType<typeof ActivityList>;
+export default ActivityList;

package/dist/layout/activity-list/activity-list.d.ts

@@ -0,0 +1,152 @@
+import { Color } from '../../variants.js';
+export declare const activityList: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    content: string;
+    item: string;
+    itemContent: string;
+    itemMain: string;
+    itemHeader: string;
+    itemTitle: string;
+    itemSubtitle: string;
+    itemActions: string;
+}, undefined, {
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    content: string;
+    item: string;
+    itemContent: string;
+    itemMain: string;
+    itemHeader: string;
+    itemTitle: string;
+    itemSubtitle: string;
+    itemActions: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    content: string;
+    item: string;
+    itemContent: string;
+    itemMain: string;
+    itemHeader: string;
+    itemTitle: string;
+    itemSubtitle: string;
+    itemActions: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/layout/activity-list/activity-list.js

@@ -0,0 +1,59 @@
+import { tv } from 'tailwind-variants';
+import { Color } from '../../variants.js';
+export const activityList = tv({
+    slots: {
+        base: 'rounded-lg bg-white shadow-sm',
+        header: 'border-b border-gray-200 px-6 py-4',
+        title: 'text-lg font-medium text-gray-900',
+        content: 'divide-y divide-gray-200',
+        item: 'px-6 py-4 hover:bg-gray-50 transition-colors',
+        itemContent: 'flex items-center justify-between',
+        itemMain: 'flex-1',
+        itemHeader: 'flex items-center',
+        itemTitle: 'text-sm font-medium text-gray-900 hover:text-blue-600 focus:outline-none focus:text-blue-600 cursor-pointer',
+        itemSubtitle: 'mt-1 text-xs text-gray-500',
+        itemActions: 'flex items-center space-x-2'
+    },
+    variants: {
+        color: {
+            [Color.DEFAULT]: {
+                base: 'bg-white border-gray-200',
+                header: 'border-gray-200',
+                title: 'text-gray-900'
+            },
+            [Color.PRIMARY]: {
+                base: 'bg-primary-50 border-primary-200',
+                header: 'border-primary-200',
+                title: 'text-primary-900'
+            },
+            [Color.SECONDARY]: {
+                base: 'bg-secondary-50 border-secondary-200',
+                header: 'border-secondary-200',
+                title: 'text-secondary-900'
+            },
+            [Color.INFO]: {
+                base: 'bg-info-50 border-info-200',
+                header: 'border-info-200',
+                title: 'text-info-900'
+            },
+            [Color.SUCCESS]: {
+                base: 'bg-success-50 border-success-200',
+                header: 'border-success-200',
+                title: 'text-success-900'
+            },
+            [Color.WARNING]: {
+                base: 'bg-warning-50 border-warning-200',
+                header: 'border-warning-200',
+                title: 'text-warning-900'
+            },
+            [Color.DANGER]: {
+                base: 'bg-danger-50 border-danger-200',
+                header: 'border-danger-200',
+                title: 'text-danger-900'
+            }
+        }
+    },
+    defaultVariants: {
+        color: Color.DEFAULT
+    }
+});

package/dist/layout/card/Card.svelte

@@ -14,11 +14,7 @@
 		bodyclass: bodyClass = ''
 	}: CardProps = $props();
 
-	const {
-		base,
-		title: titleSlot,
-		body: bodySlot
-	} = $derived(card({ color }));
+	const { base, title: titleSlot, body: bodySlot } = $derived(card({ color }));
 
 	const baseClass = $derived(cn(base(), className));
 	const titleClasses = $derived(cn(titleSlot(), titleClass));