@rokkit/ui 1.0.0-next.127 → 1.0.0-next.128

package/src/types/toggle.ts

@@ -2,44 +2,11 @@
  * Toggle Component Types
  *
  * Provides types for the data-driven Toggle component.
- * Field mapping and data access is handled by ItemProxy.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
  */
 
-// =============================================================================
-// Field Mapping Types
-// =============================================================================
-
-/**
- * Field mapping configuration for toggle data.
- * Maps custom data field names to the component's expected properties.
- */
-export interface ToggleFields {
-	/** Field for display text - default: 'text' */
-	text?: string
-
-	/** Field for the value to emit on select - default: 'value' */
-	value?: string
-
-	/** Field for icon class name - default: 'icon' */
-	icon?: string
-
-	/** Field for disabled state - default: 'disabled' */
-	disabled?: string
-
-	/** Field for tooltip/description text - default: 'description' */
-	description?: string
-}
-
-/**
- * Default field mapping values
- */
-export const defaultToggleFields: Required<ToggleFields> = {
-	text: 'text',
-	value: 'value',
-	icon: 'icon',
-	disabled: 'disabled',
-	description: 'description'
-}
+import type { Snippet } from 'svelte'
+import type { ProxyItem } from '@rokkit/states'
 
 // =============================================================================
 // Toggle Item Types
@@ -55,22 +22,11 @@ export type ToggleItem = Record<string, unknown>
 // =============================================================================
 
 /**
- * Handlers passed to custom item snippets
+ * Snippet for rendering a toggle option.
+ * The component renders the button wrapper; the snippet renders inner content.
+ * Receives the ProxyItem and whether this item is currently selected.
  */
-export interface ToggleItemHandlers {
-	/** Call to trigger item selection */
-	onclick: () => void
-	/** Forward keyboard events for accessibility */
-	onkeydown: (event: KeyboardEvent) => void
-}
-
-/**
- * Snippet type for rendering toggle items.
- * Fourth parameter is whether the item is currently selected.
- */
-export type ToggleItemSnippet = import('svelte').Snippet<
-	[ToggleItem, ToggleFields, ToggleItemHandlers, boolean]
->
+export type ToggleItemSnippet = Snippet<[ProxyItem, boolean]>
 
 // =============================================================================
 // Component Props Types
@@ -80,13 +36,13 @@ export type ToggleItemSnippet = import('svelte').Snippet<
  * Props for the Toggle component
  */
 export interface ToggleProps {
-	/** Array of toggle options */
+	/** Array of toggle options (strings, numbers, or objects) */
 	options?: ToggleItem[]
 
-	/** Field mapping configuration */
-	fields?: ToggleFields
+	/** Field mapping — overrides BASE_FIELDS defaults (text → 'label', value → 'value', …) */
+	fields?: Record<string, string>
 
-	/** Currently selected value */
+	/** Currently selected value (bindable) */
 	value?: unknown
 
 	/** Called when selection changes */
@@ -101,9 +57,12 @@ export interface ToggleProps {
 	/** Whether the entire toggle is disabled */
 	disabled?: boolean
 
+	/** Accessible label for the radiogroup. Default: messages.current.toggle.label */
+	label?: string
+
 	/** Additional CSS classes */
 	class?: string
 
-	/** Custom snippet for rendering toggle items */
+	/** Custom snippet for rendering toggle options */
 	item?: ToggleItemSnippet
 }

package/src/types/toolbar.ts

@@ -2,7 +2,7 @@
  * Toolbar Component Types
  *
  * Provides types for the data-driven Toolbar component.
- * Field mapping and data access is handled by ItemProxy.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
  */
 
 // =============================================================================

package/src/types/tree.ts

@@ -3,12 +3,11 @@
  *
  * Provides types for the data-driven Tree component.
  * Supports hierarchical data with expand/collapse, tree lines, and custom icons.
- * Field mapping and data access is handled by ItemProxy.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
  */
 
 import type { Snippet } from 'svelte'
-import type { ItemProxy, ItemFields } from './item-proxy.js'
-import { defaultStateIcons } from '@rokkit/core'
+import { DEFAULT_STATE_ICONS } from '@rokkit/core'
 
 // =============================================================================
 // Field Mapping Types
@@ -16,9 +15,9 @@ import { defaultStateIcons } from '@rokkit/core'
 
 /**
  * Field mapping configuration for tree data.
- * Extends ItemFields with tree-specific fields.
+ * Extends base field mapping with tree-specific fields.
  */
-export interface TreeFields extends ItemFields {
+export interface TreeFields extends Record<string, string> {
 	/** Field for expanded state - default: 'expanded' */
 	expanded?: string
 
@@ -72,7 +71,7 @@ export type ConnectorType = 'child' | 'last' | 'sibling' | 'empty'
 
 /**
  * Icons configuration for tree expand/collapse states.
- * Keys match the naming convention in @rokkit/core defaultStateIcons.
+ * Keys match the naming convention in @rokkit/core DEFAULT_STATE_ICONS.
  */
 export interface TreeStateIcons {
 	/** Icon class for expanded/opened state */
@@ -86,8 +85,8 @@ export interface TreeStateIcons {
  * that get resolved to actual icon classes via UnoCSS shortcuts.
  */
 export const defaultTreeStateIcons: TreeStateIcons = {
-	opened: defaultStateIcons.node.opened,
-	closed: defaultStateIcons.node.closed
+	opened: DEFAULT_STATE_ICONS.node.opened,
+	closed: DEFAULT_STATE_ICONS.node.closed
 }
 
 // =============================================================================
@@ -146,8 +145,8 @@ export interface TreeProps {
 	/** Size variant */
 	size?: 'sm' | 'md' | 'lg'
 
-	/** Whether to show tree lines/connectors */
-	showLines?: boolean
+	/** Tree line connector style — 'none' hides lines, 'solid'|'dashed'|'dotted' set the line style */
+	lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
 
 	/** Enable multiple item selection (Ctrl+click toggle, Shift+click range) */
 	multiselect?: boolean
@@ -248,12 +247,4 @@ export function getLineTypes(
 // Keep old name as alias for backward compatibility
 export const getTreeLineTypes = getLineTypes
 
-/**
- * Get the key for a node (for expanded state tracking)
- */
-export function getNodeKey(proxy: ItemProxy): string {
-	const val = proxy.itemValue
-	return typeof val === 'string' || typeof val === 'number' ? String(val) : proxy.text
-}
-
 export { getSnippet } from './menu.js'

package/src/types/upload-file-status.ts

@@ -0,0 +1,45 @@
+/**
+ * UploadFileStatus Component Types
+ *
+ * Renders a single file's upload status with progress bar, action buttons
+ * (cancel/retry/remove), and file metadata (icon, name, size, status label).
+ * Action button visibility driven by cancelWhen/retryWhen/removeWhen arrays.
+ */
+
+import type { ProxyItem } from '@rokkit/states'
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+/**
+ * Props for the UploadFileStatus component
+ */
+export interface UploadFileStatusProps {
+	/** ProxyItem wrapping the file data */
+	proxy: ProxyItem
+
+	/** Status values that show the cancel button */
+	cancelWhen?: string[]
+
+	/** Status values that show the retry button */
+	retryWhen?: string[]
+
+	/** Status values that show the remove button */
+	removeWhen?: string[]
+
+	/** Called when cancel is clicked */
+	oncancel?: (proxy: ProxyItem) => void
+
+	/** Called when retry is clicked */
+	onretry?: (proxy: ProxyItem) => void
+
+	/** Called when remove is clicked */
+	onremove?: (proxy: ProxyItem) => void
+
+	/** Label overrides merged with messages.current.uploadProgress */
+	labels?: Record<string, string>
+
+	/** Icon class overrides for action buttons (cancel, retry, remove) */
+	icons?: Record<string, string>
+}

package/src/types/upload-progress.ts

@@ -0,0 +1,111 @@
+/**
+ * UploadProgress Component Types
+ *
+ * File upload status orchestrator. Thin composition layer that renders
+ * a header + List or Grid layout. Default itemContent snippet renders
+ * UploadFileStatus for each file. Consumer can override with custom snippet.
+ */
+
+import type { Snippet } from 'svelte'
+import type { ProxyItem } from '@rokkit/states'
+
+// =============================================================================
+// Item Types
+// =============================================================================
+
+/**
+ * Generic upload file item — any object with mapped fields
+ */
+export type UploadItem = Record<string, unknown>
+
+// =============================================================================
+// Field Mapping Types
+// =============================================================================
+
+/**
+ * Field mapping for upload file data.
+ * Maps semantic field names to keys in the data objects.
+ */
+export interface UploadFields {
+	/** Field for display text - default: 'text' */
+	label?: string
+
+	/** Field for unique value - default: 'value' */
+	value?: string
+
+	/** Field for icon class - default: 'icon' */
+	icon?: string
+
+	/** Field for upload status key - default: 'status' */
+	status?: string
+
+	/** Field for progress percentage (0-100) - default: 'progress' */
+	progress?: string
+
+	/** Field for file size in bytes - default: 'size' */
+	size?: string
+
+	/** Field for MIME type - default: 'type' */
+	type?: string
+
+	/** Field for error message - default: 'error' */
+	error?: string
+}
+
+// =============================================================================
+// Snippet Types
+// =============================================================================
+
+/**
+ * Snippet for custom per-file rendering inside List/Grid.
+ * Receives the ProxyItem wrapping the file data.
+ */
+export type UploadItemSnippet = Snippet<[proxy: ProxyItem]>
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+/**
+ * Props for the UploadProgress component
+ */
+export interface UploadProgressProps {
+	/** Array of file data objects */
+	files?: UploadItem[]
+
+	/** Field mapping configuration */
+	fields?: UploadFields
+
+	/** Layout mode */
+	view?: 'list' | 'grid'
+
+	/** Status values that show the cancel button */
+	cancelWhen?: string[]
+
+	/** Status values that show the retry button */
+	retryWhen?: string[]
+
+	/** Status values that show the remove button */
+	removeWhen?: string[]
+
+	/** Called when cancel is clicked (receives raw file object) */
+	oncancel?: (file: UploadItem) => void
+
+	/** Called when retry is clicked (receives raw file object) */
+	onretry?: (file: UploadItem) => void
+
+	/** Called when remove is clicked (receives raw file object) */
+	onremove?: (file: UploadItem) => void
+
+	/** Called when clear all is clicked */
+	onclear?: () => void
+
+	/** Label overrides merged with messages.current.uploadProgress */
+	labels?: Record<string, string>
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom snippet for per-file rendering (overrides default UploadFileStatus) */
+	itemContent?: UploadItemSnippet
+}

package/src/types/upload-target.ts

@@ -0,0 +1,68 @@
+/**
+ * UploadTarget Component Types
+ *
+ * Drop zone with file validation. Accepts drag-and-drop or click-to-browse.
+ * Validates files against accept (MIME/extension) and maxSize constraints.
+ */
+
+import type { Snippet } from 'svelte'
+
+// =============================================================================
+// Item Types
+// =============================================================================
+
+/**
+ * File validation error returned via onerror callback
+ */
+export interface UploadError {
+	/** The file that failed validation */
+	file: File
+	/** Why the file was rejected */
+	reason: 'type' | 'size'
+}
+
+// =============================================================================
+// Snippet Types
+// =============================================================================
+
+/**
+ * Snippet for custom drop zone content.
+ * Receives the current dragging state.
+ */
+export type UploadTargetContentSnippet = Snippet<[dragging: boolean]>
+
+// =============================================================================
+// Component Props
+// =============================================================================
+
+/**
+ * Props for the UploadTarget component
+ */
+export interface UploadTargetProps {
+	/** Accepted file types (MIME types or extensions, comma-separated) */
+	accept?: string
+
+	/** Maximum file size in bytes */
+	maxSize?: number
+
+	/** Allow multiple file selection */
+	multiple?: boolean
+
+	/** Disable the drop zone */
+	disabled?: boolean
+
+	/** Label overrides merged with messages.current.uploadTarget */
+	labels?: Record<string, string>
+
+	/** Called with validated files after drop or browse */
+	onfiles?: (files: File[]) => void
+
+	/** Called for each file that fails validation */
+	onerror?: (err: UploadError) => void
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom content snippet (replaces default drop zone UI) */
+	content?: UploadTargetContentSnippet
+}

package/src/utils/upload.js

@@ -0,0 +1,128 @@
+/**
+ * Upload utility functions — shared helpers for UploadTarget and UploadProgress.
+ * Pure functions with no Svelte dependency.
+ */
+
+const ARCHIVE_TYPES = new Set(['application/zip', 'application/gzip', 'application/x-tar'])
+
+/**
+ * Check if a file matches an accept string (comma-separated MIME types and extensions).
+ * @param {{ type: string, name: string }} file
+ * @param {string | null | undefined} accept - e.g. 'image/*,.pdf,application/json'
+ * @returns {boolean}
+ */
+export function matchesAccept(file, accept) {
+	if (!accept) return true
+
+	const tokens = accept.split(',').map((t) => t.trim()).filter(Boolean)
+	if (tokens.length === 0) return true
+
+	return tokens.some((token) => {
+		if (token.startsWith('.')) {
+			// Extension match (case-insensitive)
+			return file.name.toLowerCase().endsWith(token.toLowerCase())
+		}
+		if (token.endsWith('/*')) {
+			// Wildcard MIME type match (e.g. image/*)
+			const prefix = token.slice(0, -1) // 'image/'
+			return file.type.startsWith(prefix)
+		}
+		// Exact MIME type match
+		return file.type === token
+	})
+}
+
+/**
+ * Validate a file against accept and maxSize constraints.
+ * @param {{ type: string, name: string, size: number }} file
+ * @param {{ accept?: string, maxSize?: number }} constraints
+ * @returns {true | { reason: 'type' | 'size' }}
+ */
+export function validateFile(file, { accept, maxSize } = {}) {
+	if (accept && !matchesAccept(file, accept)) {
+		return { reason: 'type' }
+	}
+	if (maxSize !== undefined && file.size > maxSize) {
+		return { reason: 'size' }
+	}
+	return true
+}
+
+/**
+ * Map a MIME type to an icon class string.
+ * @param {string | null | undefined} mimeType
+ * @returns {string}
+ */
+export function inferIcon(mimeType) {
+	if (!mimeType) return 'i-lucide:file'
+
+	if (mimeType.startsWith('image/')) return 'i-lucide:image'
+	if (mimeType.startsWith('video/')) return 'i-lucide:video'
+	if (mimeType.startsWith('audio/')) return 'i-lucide:music'
+	if (mimeType === 'application/pdf') return 'i-lucide:file-text'
+	if (mimeType.startsWith('text/')) return 'i-lucide:file-text'
+	if (ARCHIVE_TYPES.has(mimeType)) return 'i-lucide:archive'
+
+	return 'i-lucide:file'
+}
+
+/**
+ * Format a byte count as a human-readable size string.
+ * @param {number} bytes
+ * @returns {string}
+ */
+export function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`
+	if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`
+	if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`
+	return `${(bytes / 1024 ** 3).toFixed(1)} GB`
+}
+
+/**
+ * Group a flat file array by path field into a nested tree structure.
+ * Root-level items (empty path) stay ungrouped.
+ * Group nodes use `text` as the label field (ProxyItem compatibility).
+ *
+ * @param {Array<Record<string, any>>} items
+ * @param {string} pathField - field name containing the path (e.g. 'path')
+ * @param {string} childrenField - field name for children arrays (e.g. 'children')
+ * @returns {Array<Record<string, any>>}
+ */
+export function groupByPath(items, pathField, childrenField) {
+	if (!items || items.length === 0) return []
+
+	const root = []
+	/** @type {Map<string, Record<string, any>>} */
+	const folderMap = new Map()
+
+	for (const item of items) {
+		const rawPath = item[pathField] || ''
+		if (!rawPath) {
+			root.push(item)
+			continue
+		}
+
+		// Split path into segments, filtering empty strings from trailing slashes
+		const segments = rawPath.split('/').filter(Boolean)
+		let parent = root
+		let fullPath = ''
+
+		for (let i = 0; i < segments.length; i++) {
+			const segment = segments[i]
+			fullPath = fullPath ? `${fullPath}/${segment}` : segment
+
+			let folder = folderMap.get(fullPath)
+			if (!folder) {
+				folder = { text: segment, [childrenField]: [] }
+				folderMap.set(fullPath, folder)
+				parent.push(folder)
+			}
+
+			parent = folder[childrenField]
+		}
+
+		parent.push(item)
+	}
+
+	return root
+}