@joewinke/jatui 0.1.0

package/src/lib/types/messaging.ts

@@ -0,0 +1,459 @@
+// Messaging System Types
+// Generic types for messaging UI components — no framework or backend dependencies
+
+// ─── Core Message Types ───────────────────────────────────────────────
+
+export interface Message {
+	id: string
+	content: string
+	senderId: string
+	senderName: string
+	senderAvatar?: string
+	createdAt: string
+	editedAt?: string
+	isRead?: boolean
+	readByCount?: number
+	isPinned?: boolean
+	pinnedAt?: string
+	pinnedBy?: string
+	pinnedByName?: string
+	parentMessageId?: string
+	recipientId?: string
+	thread_reply_count?: number
+	thread_last_reply_at?: string
+	thread_last_sender?: {
+		id: string
+		full_name: string
+		avatar_url?: string
+	}
+	quotedMessageId?: string
+	quotedMessage?: QuotedMessage
+	attachments?: MessageAttachment[]
+}
+
+export interface QuotedMessage {
+	id: string
+	content: string
+	senderId: string
+	senderName: string
+	senderAvatar?: string
+	createdAt: string
+}
+
+export interface MessageAttachment {
+	id: string
+	file_name: string
+	file_type: string
+	file_size: number
+	storage_path: string
+	width?: number
+	height?: number
+	duration?: number
+	thumbnail_path?: string
+	uploaded_by: string
+	created_at: string
+}
+
+export interface PendingAttachment {
+	id: string
+	file: File
+	preview?: string
+	uploading: boolean
+	progress: number
+	error?: string
+	storagePath?: string
+	width?: number
+	height?: number
+}
+
+// ─── Channel Types ────────────────────────────────────────────────────
+
+export interface Channel {
+	id: string
+	name: string
+	description?: string
+	type: 'public' | 'private' | 'direct'
+	isActive: boolean
+	memberRole: 'admin' | 'moderator' | 'member'
+	joinedAt: string
+	createdAt: string
+	unreadCount?: number
+	emoji?: string
+}
+
+export interface ChannelMember {
+	id: string
+	userId: string
+	fullName: string
+	avatarUrl?: string | null
+	role: 'admin' | 'moderator' | 'member'
+	userRole?: string
+}
+
+// ─── Direct Message Types ─────────────────────────────────────────────
+
+export interface DirectConversation {
+	id: string
+	name: string
+	avatar?: string
+	lastMessageAt: string
+	unreadCount?: number
+	isOnline?: boolean
+}
+
+export interface OrgMember {
+	id: string
+	full_name: string
+	avatar_url?: string
+	role: string
+	active?: boolean
+}
+
+// ─── Emoji Types ──────────────────────────────────────────────────────
+
+export type EmojiCategory =
+	| 'search'
+	| 'frequently_used'
+	| 'smileys_people'
+	| 'animals_nature'
+	| 'food_drink'
+	| 'travel_places'
+	| 'activities'
+	| 'objects'
+	| 'symbols'
+	| 'flags'
+	| 'custom'
+
+export type SkinTone =
+	| 'default'
+	| 'light'
+	| 'medium-light'
+	| 'medium'
+	| 'medium-dark'
+	| 'dark'
+
+export interface StandardEmoji {
+	unicode: string
+	name: string
+	shortcode: string
+	category: EmojiCategory
+	keywords: string[]
+	skinTones?: string[]
+}
+
+export interface CustomEmoji {
+	id: string
+	organizationId: string
+	name: string
+	displayName: string
+	description?: string
+	fileName: string
+	fileSize: number
+	contentType: 'image/png' | 'image/gif'
+	storagePath: string
+	isAnimated: boolean
+	isActive: boolean
+	usageCount: number
+	uploadedBy: string
+	createdAt: string
+	updatedAt: string
+}
+
+export interface EmojiReaction {
+	id: string
+	messageId: string
+	userId: string
+	emojiUnicode?: string
+	customEmojiId?: string
+	skinTone?: SkinTone
+	createdAt: string
+}
+
+export interface ReactionSummary {
+	emojiUnicode?: string
+	customEmojiId?: string
+	customEmojiName?: string
+	customEmojiStoragePath?: string
+	customEmojiIsAnimated?: boolean
+	reactionCount: number
+	userReacted: boolean
+	recentUsers: Array<{ id: string; name: string }>
+}
+
+export interface EmojiSelection {
+	type: 'standard' | 'custom'
+	unicode?: string
+	customEmojiId?: string
+	name: string
+	shortcode: string
+	skinTone?: SkinTone
+}
+
+export interface EmojiPreferences {
+	skinTone: SkinTone
+	frequentlyUsed: string[]
+	lastUsedAt?: string
+	customEmojiFavorites?: string[]
+}
+
+export interface EmojiCategoryInfo {
+	id: EmojiCategory
+	name: string
+	icon: string
+	description: string
+}
+
+export interface SkinToneInfo {
+	id: SkinTone
+	name: string
+	unicode: string
+	preview: string
+}
+
+// ─── Mention Types ────────────────────────────────────────────────────
+
+export interface MentionItem {
+	type: string
+	id: string
+	name: string
+	secondary: string
+	url: string
+}
+
+// ─── Notification Types ───────────────────────────────────────────────
+
+export interface NotificationChannels {
+	email: boolean
+	sms: boolean
+}
+
+export interface NotificationEvents {
+	[key: string]: boolean
+}
+
+export interface NotificationTiming {
+	[key: string]: string | number
+}
+
+export interface NotificationPreferences {
+	channels: NotificationChannels
+	events: NotificationEvents
+	timing: NotificationTiming
+}
+
+// ─── Presence Types ───────────────────────────────────────────────────
+
+export interface PresenceState {
+	[userId: string]: {
+		status: string
+		technicianStatus?: string
+		lastSeen?: string
+	}
+}
+
+// ─── Callback Interfaces ──────────────────────────────────────────────
+// These define the data-layer contracts that consuming apps must implement.
+
+export interface MessageCallbacks {
+	loadMessages: (params: {
+		channelId?: string
+		dmUserId?: string
+		before?: string
+		limit?: number
+	}) => Promise<Message[]>
+	sendMessage: (params: {
+		content: string
+		channelId?: string
+		dmUserId?: string
+		parentMessageId?: string
+		quotedMessageId?: string
+		attachments?: PendingAttachment[]
+		priority?: string
+	}) => Promise<Message>
+	editMessage: (messageId: string, content: string) => Promise<Message>
+	deleteMessage: (messageId: string) => Promise<void>
+	pinMessage: (messageId: string, channelId: string) => Promise<void>
+	unpinMessage: (messageId: string, channelId: string) => Promise<void>
+	markAsRead: (messageIds: string[]) => Promise<void>
+}
+
+export interface ReactionCallbacks {
+	loadReactions: (messageId: string) => Promise<ReactionSummary[]>
+	addReaction: (
+		messageId: string,
+		emoji: { unicode?: string; customEmojiId?: string; skinTone?: SkinTone }
+	) => Promise<void>
+	removeReaction: (
+		messageId: string,
+		emoji: { unicode?: string; customEmojiId?: string }
+	) => Promise<void>
+}
+
+export interface AttachmentCallbacks {
+	getSignedUrl: (storagePath: string) => Promise<string>
+	getThumbnailUrl: (thumbnailPath: string) => Promise<string | null>
+	uploadFile: (
+		file: File,
+		organizationId: string
+	) => Promise<{ path: string; error?: string }>
+	deleteAttachment: (attachmentId: string) => Promise<void>
+}
+
+export interface MentionCallbacks {
+	searchMentions: (query: string) => Promise<MentionItem[]>
+}
+
+export interface EmojiCallbacks {
+	loadCustomEmojis: () => Promise<CustomEmoji[]>
+	loadPreferences: () => Promise<EmojiPreferences>
+	savePreferences: (prefs: Partial<EmojiPreferences>) => Promise<void>
+}
+
+export interface ChannelCallbacks {
+	createChannel: (params: {
+		name: string
+		description?: string
+		type: 'public' | 'private'
+		emoji?: string
+		memberIds?: string[]
+	}) => Promise<Channel>
+	updateChannel: (
+		channelId: string,
+		params: Partial<Pick<Channel, 'name' | 'description' | 'emoji'>>
+	) => Promise<Channel>
+	deleteChannel: (channelId: string) => Promise<void>
+	leaveChannel: (channelId: string) => Promise<void>
+	getMembers: (channelId: string) => Promise<ChannelMember[]>
+	addMember: (channelId: string, userId: string) => Promise<void>
+	removeMember: (channelId: string, userId: string) => Promise<void>
+	updateMemberRole: (
+		channelId: string,
+		userId: string,
+		role: 'admin' | 'moderator' | 'member'
+	) => Promise<void>
+}
+
+export interface ThreadCallbacks {
+	loadReplies: (parentMessageId: string) => Promise<Message[]>
+	sendReply: (
+		parentMessageId: string,
+		content: string,
+		attachments?: PendingAttachment[]
+	) => Promise<Message>
+}
+
+export interface NotificationCallbacks {
+	loadSettings: (params: {
+		type: 'global' | 'channel'
+		channelId?: string
+	}) => Promise<NotificationPreferences>
+	saveSettings: (
+		params: {
+			type: 'global' | 'channel'
+			channelId?: string
+		},
+		settings: NotificationPreferences
+	) => Promise<void>
+}
+
+// ─── Emoji Data Constants ─────────────────────────────────────────────
+
+export const EMOJI_CATEGORIES: EmojiCategoryInfo[] = [
+	{ id: 'search', name: 'Search', icon: '🔍', description: 'Search results' },
+	{
+		id: 'frequently_used',
+		name: 'Frequently Used',
+		icon: '🕐',
+		description: 'Your most used emojis'
+	},
+	{
+		id: 'smileys_people',
+		name: 'Smileys & People',
+		icon: '😀',
+		description: 'Faces, people, and emotions'
+	},
+	{
+		id: 'animals_nature',
+		name: 'Animals & Nature',
+		icon: '🐻',
+		description: 'Animals, plants, and nature'
+	},
+	{
+		id: 'food_drink',
+		name: 'Food & Drink',
+		icon: '🍎',
+		description: 'Food, drinks, and meals'
+	},
+	{
+		id: 'travel_places',
+		name: 'Travel & Places',
+		icon: '🏠',
+		description: 'Places, transport, and travel'
+	},
+	{
+		id: 'activities',
+		name: 'Activities',
+		icon: '⚽',
+		description: 'Sports, games, and activities'
+	},
+	{ id: 'objects', name: 'Objects', icon: '🔨', description: 'Tools, objects, and items' },
+	{
+		id: 'symbols',
+		name: 'Symbols',
+		icon: '❤️',
+		description: 'Symbols, signs, and icons'
+	},
+	{
+		id: 'flags',
+		name: 'Flags',
+		icon: '🏳️',
+		description: 'Country and regional flags'
+	},
+	{
+		id: 'custom',
+		name: 'Custom',
+		icon: '🎨',
+		description: 'Organization custom emojis'
+	}
+]
+
+export const SKIN_TONES: SkinToneInfo[] = [
+	{ id: 'default', name: 'Default', unicode: '', preview: '👋' },
+	{ id: 'light', name: 'Light', unicode: '🏻', preview: '👋🏻' },
+	{ id: 'medium-light', name: 'Medium Light', unicode: '🏼', preview: '👋🏼' },
+	{ id: 'medium', name: 'Medium', unicode: '🏽', preview: '👋🏽' },
+	{ id: 'medium-dark', name: 'Medium Dark', unicode: '🏾', preview: '👋🏾' },
+	{ id: 'dark', name: 'Dark', unicode: '🏿', preview: '👋🏿' }
+]
+
+// Default quick-reaction emojis (used when no user preferences available)
+export const DEFAULT_QUICK_REACTIONS: StandardEmoji[] = [
+	{
+		unicode: '👍',
+		name: 'Thumbs Up',
+		shortcode: 'thumbsup',
+		category: 'smileys_people',
+		keywords: ['like', 'approve', 'yes']
+	},
+	{
+		unicode: '❤️',
+		name: 'Red Heart',
+		shortcode: 'heart',
+		category: 'symbols',
+		keywords: ['love', 'heart']
+	},
+	{
+		unicode: '😂',
+		name: 'Face with Tears of Joy',
+		shortcode: 'joy',
+		category: 'smileys_people',
+		keywords: ['laugh', 'lol', 'funny']
+	},
+	{
+		unicode: '🎉',
+		name: 'Party Popper',
+		shortcode: 'tada',
+		category: 'activities',
+		keywords: ['party', 'celebrate']
+	}
+]

package/src/lib/utils/currency.ts

@@ -0,0 +1,20 @@
+/**
+ * Currency formatting utilities
+ */
+
+/**
+ * Format a number as USD currency string.
+ * Override locale/currency by passing options.
+ */
+export function formatCurrency(
+	amount: number,
+	locale: string = 'en-US',
+	currency: string = 'USD'
+): string {
+	return new Intl.NumberFormat(locale, {
+		style: 'currency',
+		currency,
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(amount);
+}

package/src/lib/utils/daisyuiColors.ts

@@ -0,0 +1,243 @@
+/**
+ * DaisyUI Color Utility System
+ *
+ * Provides utilities for accessing DaisyUI semantic colors in JavaScript/Canvas contexts.
+ * Handles color format conversion and theme change detection for dynamic updates.
+ */
+
+let colorCache = new Map<string, string>()
+let themeObserver: MutationObserver | null = null
+
+/**
+ * Get a DaisyUI semantic color as a hex string usable in Canvas
+ * @param colorName - DaisyUI color name (e.g., "primary", "accent", "base-100")
+ * @returns Hex color string (e.g., "#3b82f6")
+ */
+export function getDaisyUIColor(colorName: string): string {
+  const cacheKey = colorName
+  if (colorCache.has(cacheKey)) {
+    return colorCache.get(cacheKey)!
+  }
+
+  const fallbackColor = getColorFallback(colorName)
+  colorCache.set(cacheKey, fallbackColor)
+  return fallbackColor
+}
+
+function getColorFallback(colorName: string): string {
+  const currentTheme =
+    document.documentElement.getAttribute("data-theme") || "light"
+
+  const luxuryColors: Record<string, string> = {
+    primary: "#d4af37",
+    "primary-content": "#1a1a1a",
+    secondary: "#c0c0c0",
+    "secondary-content": "#1a1a1a",
+    accent: "#ffd700",
+    "accent-content": "#1a1a1a",
+    neutral: "#6b7280",
+    "neutral-content": "#f5f5f5",
+    "base-100": "#1a1a1a",
+    "base-200": "#2d2d2d",
+    "base-300": "#404040",
+    "base-content": "#f5f5f5",
+    success: "#10b981",
+    "success-content": "#1a1a1a",
+    warning: "#f59e0b",
+    "warning-content": "#1a1a1a",
+    error: "#ef4444",
+    "error-content": "#f5f5f5",
+    info: "#3b82f6",
+    "info-content": "#f5f5f5",
+  }
+
+  const nordColors: Record<string, string> = {
+    primary: "#5e81ac",
+    "primary-content": "#eceff4",
+    secondary: "#81a1c1",
+    "secondary-content": "#2e3440",
+    accent: "#88c0d0",
+    "accent-content": "#2e3440",
+    neutral: "#4c566a",
+    "neutral-content": "#eceff4",
+    "base-100": "#2e3440",
+    "base-200": "#3b4252",
+    "base-300": "#434c5e",
+    "base-content": "#eceff4",
+    success: "#a3be8c",
+    "success-content": "#2e3440",
+    warning: "#ebcb8b",
+    "warning-content": "#2e3440",
+    error: "#bf616a",
+    "error-content": "#eceff4",
+    info: "#81a1c1",
+    "info-content": "#2e3440",
+  }
+
+  const darkColors: Record<string, string> = {
+    primary: "#661ae6",
+    "primary-content": "#ffffff",
+    secondary: "#d926a9",
+    "secondary-content": "#ffffff",
+    accent: "#1fb2a6",
+    "accent-content": "#ffffff",
+    neutral: "#2a323c",
+    "neutral-content": "#a6adbb",
+    "base-100": "#1d232a",
+    "base-200": "#191e24",
+    "base-300": "#15191e",
+    "base-content": "#a6adbb",
+    info: "#3abff8",
+    "info-content": "#002b3d",
+    success: "#36d399",
+    "success-content": "#003320",
+    warning: "#fbbd23",
+    "warning-content": "#382800",
+    error: "#f87272",
+    "error-content": "#470000",
+  }
+
+  const defaultColors: Record<string, string> = {
+    primary: "#3b82f6",
+    "primary-content": "#ffffff",
+    secondary: "#6b7280",
+    "secondary-content": "#ffffff",
+    accent: "#f97316",
+    "accent-content": "#ffffff",
+    neutral: "#6b7280",
+    "neutral-content": "#ffffff",
+    "base-100": "#ffffff",
+    "base-200": "#f1f5f9",
+    "base-300": "#e2e8f0",
+    "base-content": "#1f2937",
+    info: "#3b82f6",
+    "info-content": "#ffffff",
+    success: "#10b981",
+    "success-content": "#ffffff",
+    warning: "#f59e0b",
+    "warning-content": "#ffffff",
+    error: "#ef4444",
+    "error-content": "#ffffff",
+  }
+
+  const fallbacks =
+    currentTheme === "luxury"
+      ? luxuryColors
+      : currentTheme === "nord"
+        ? nordColors
+        : currentTheme === "dark"
+          ? darkColors
+          : defaultColors
+  return fallbacks[colorName] || "#6b7280"
+}
+
+/**
+ * Create a lighter version of a color
+ */
+export function lightenColor(hexColor: string, amount: number = 0.2): string {
+  const hex = hexColor.replace("#", "")
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const newR = Math.min(255, Math.floor(r + (255 - r) * amount))
+  const newG = Math.min(255, Math.floor(g + (255 - g) * amount))
+  const newB = Math.min(255, Math.floor(b + (255 - b) * amount))
+
+  return `#${((newR << 16) | (newG << 8) | newB).toString(16).padStart(6, "0")}`
+}
+
+/**
+ * Create a darker version of a color
+ */
+export function darkenColor(hexColor: string, amount: number = 0.2): string {
+  const hex = hexColor.replace("#", "")
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  const newR = Math.max(0, Math.floor(r * (1 - amount)))
+  const newG = Math.max(0, Math.floor(g * (1 - amount)))
+  const newB = Math.max(0, Math.floor(b * (1 - amount)))
+
+  return `#${((newR << 16) | (newG << 8) | newB).toString(16).padStart(6, "0")}`
+}
+
+/**
+ * Setup theme change detection
+ * Clears color cache when theme changes and optionally calls a callback
+ */
+export function watchThemeChanges(onThemeChange?: () => void): () => void {
+  if (themeObserver) {
+    themeObserver.disconnect()
+  }
+
+  themeObserver = new MutationObserver((mutations: MutationRecord[]): void => {
+    let themeChanged = false
+
+    mutations.forEach((mutation: MutationRecord): void => {
+      if (
+        mutation.type === "attributes" &&
+        (mutation.attributeName === "data-theme" ||
+          mutation.attributeName === "class")
+      ) {
+        themeChanged = true
+      }
+    })
+
+    if (themeChanged) {
+      colorCache.clear()
+      if (onThemeChange) {
+        onThemeChange()
+      }
+    }
+  })
+
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "class"],
+  })
+
+  return () => {
+    if (themeObserver) {
+      themeObserver.disconnect()
+      themeObserver = null
+    }
+  }
+}
+
+/**
+ * Check if we're currently in a dark theme
+ */
+export function isDarkTheme(): boolean {
+  const baseContent = getDaisyUIColor("base-content")
+  const base100 = getDaisyUIColor("base-100")
+
+  const contentBrightness = getBrightness(baseContent)
+  const baseBrightness = getBrightness(base100)
+
+  return contentBrightness > baseBrightness
+}
+
+function getBrightness(hexColor: string): number {
+  const hex = hexColor.replace("#", "")
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+
+  return (r * 299 + g * 587 + b * 114) / 1000
+}
+
+/**
+ * Get the current theme name if available
+ */
+export function getCurrentTheme(): string | null {
+  return document.documentElement.getAttribute("data-theme")
+}
+
+/**
+ * Clear the color cache manually
+ */
+export function clearColorCache(): void {
+  colorCache.clear()
+}