@rokkit/ui 1.0.0-next.99 → 1.0.2

package/src/components/UploadProgress.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	/**
+	 * UploadProgress — File upload status orchestrator.
+	 *
+	 * Thin composition layer: header + List or Grid layout.
+	 * Default itemContent snippet renders UploadFileStatus for each file.
+	 * Consumer can override with custom itemContent snippet.
+	 *
+	 * Data attributes:
+	 *   data-upload-progress — root container
+	 *   data-upload-view     — current view mode (list, grid)
+	 *   data-upload-header   — header bar
+	 *   data-upload-clear    — clear all button
+	 */
+	import type { ProxyItem } from '@rokkit/states'
+	import type { UploadProgressProps, UploadItem } from '../types/upload-progress.js'
+	import { messages } from '@rokkit/states'
+	import { ITEM_SNIPPET } from '@rokkit/core'
+	import List from './List.svelte'
+	import Grid from './Grid.svelte'
+	import UploadFileStatus from './UploadFileStatus.svelte'
+
+	let {
+		files = [] as UploadItem[],
+		fields: userFields = {} as Record<string, string>,
+		view = 'list' as 'list' | 'grid',
+		cancelWhen = [] as string[],
+		retryWhen = [] as string[],
+		removeWhen = [] as string[],
+		oncancel,
+		onretry,
+		onremove,
+		onclear,
+		labels: userLabels = {} as Record<string, string>,
+		class: className = '',
+		...snippets
+	}: UploadProgressProps & { [key: string]: unknown } = $props()
+
+	// ─── Labels ──────────────────────────────────────────────────────────────
+
+	const labels = $derived({ ...messages.uploadProgress, ...userLabels })
+
+	// ─── Field resolution ────────────────────────────────────────────────────
+	// Pass upload-specific field mappings through to List/Grid so ProxyItem
+	// can resolve them via proxy.get(). BASE_FIELDS handles label/value/icon;
+	// we add status, progress, size, type, error for UploadFileStatus.
+
+	const fieldMap = $derived({
+		...userFields,
+		status: userFields.status ?? 'status',
+		progress: userFields.progress ?? 'progress',
+		size: userFields.size ?? 'size',
+		type: userFields.type ?? 'type',
+		error: userFields.error ?? 'error'
+	})
+
+	// ─── Status summary ──────────────────────────────────────────────────────
+
+	const statusField = $derived(userFields.status ?? 'status')
+
+	const statusSummary = $derived.by(() => {
+		const counts: Record<string, number> = {}
+		for (const file of files) {
+			const s = String(file[statusField] || 'unknown')
+			counts[s] = (counts[s] || 0) + 1
+		}
+		return Object.entries(counts)
+			.map(([s, n]) => `${n} ${labels[s] ?? s}`)
+			.join(', ')
+	})
+
+	// ─── Snippet resolution ──────────────────────────────────────────────────
+
+	let itemSnippet = $derived(snippets[ITEM_SNIPPET] as typeof defaultItemContent | undefined)
+
+	// ─── Action callbacks (unwrap proxy → raw item) ──────────────────────────
+
+	function handleCancel(proxy: ProxyItem) {
+		oncancel?.(proxy.original as UploadItem)
+	}
+
+	function handleRetry(proxy: ProxyItem) {
+		onretry?.(proxy.original as UploadItem)
+	}
+
+	function handleRemove(proxy: ProxyItem) {
+		onremove?.(proxy.original as UploadItem)
+	}
+</script>
+
+{#snippet defaultItemContent(proxy: ProxyItem)}
+	<UploadFileStatus
+		{proxy}
+		{cancelWhen}
+		{retryWhen}
+		{removeWhen}
+		oncancel={handleCancel}
+		onretry={handleRetry}
+		onremove={handleRemove}
+		labels={userLabels}
+	/>
+{/snippet}
+
+<div data-upload-progress data-upload-view={view} class={className || undefined}>
+	<!-- Header -->
+	<div data-upload-header>
+		<span>{files.length} files — {statusSummary}</span>
+		{#if onclear}
+			<button type="button" data-upload-clear onclick={onclear}>{labels.clear}</button>
+		{/if}
+	</div>
+
+	<!-- Layout delegation -->
+	{#if view === 'grid'}
+		<Grid items={files} fields={fieldMap}>
+			{#snippet itemContent(proxy: ProxyItem)}
+				{@render (itemSnippet ?? defaultItemContent)(proxy)}
+			{/snippet}
+		</Grid>
+	{:else}
+		<List items={files} fields={fieldMap}>
+			{#snippet itemContent(proxy: ProxyItem)}
+				{@render (itemSnippet ?? defaultItemContent)(proxy)}
+			{/snippet}
+		</List>
+	{/if}
+</div>

package/src/components/UploadTarget.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	/**
+	 * UploadTarget — Drop zone with file validation.
+	 *
+	 * Accepts drag-and-drop or click-to-browse. Validates files against
+	 * accept (MIME/extension) and maxSize constraints via upload-utils.
+	 *
+	 * Data attributes:
+	 *   data-upload-target  — root container / drop zone
+	 *   data-upload-icon    — upload icon
+	 *   data-upload-button  — browse button
+	 *   data-dragging       — present when files dragged over
+	 *   data-disabled       — when disabled
+	 */
+	import type { UploadTargetProps } from '../types/upload-target.js'
+	import { messages } from '@rokkit/states'
+	import { matchesAccept } from '../utils/upload.js'
+
+	let {
+		accept = '',
+		maxSize = Infinity,
+		multiple = false,
+		disabled = false,
+		size = 'full',
+		labels = {} as Record<string, string>,
+		onfiles,
+		onerror,
+		class: className = '',
+		...snippets
+	}: UploadTargetProps & { [key: string]: unknown } = $props()
+
+	const content = $derived(snippets.content as ((dragging: boolean) => unknown) | undefined)
+
+	const resolvedLabels = $derived({
+		...messages.uploadTarget,
+		...labels
+	})
+
+	let inputRef = $state<HTMLInputElement | null>(null)
+	let dragging = $state(false)
+
+	function validateFile(file: File): 'type' | 'size' | null {
+		if (accept && !matchesAccept(file, accept)) return 'type'
+		if (file.size > maxSize) return 'size'
+		return null
+	}
+
+	function processFile(file: File, valid: File[]) {
+		const reason = validateFile(file)
+		if (reason) onerror?.({ file, reason })
+		else valid.push(file)
+	}
+
+	function handleFiles(fileList: FileList | File[]) {
+		const valid: File[] = []
+		for (const file of Array.from(fileList)) processFile(file, valid)
+		if (valid.length > 0) onfiles?.(valid)
+	}
+
+	function handleInputChange() {
+		if (inputRef?.files) handleFiles(inputRef.files)
+		if (inputRef) inputRef.value = ''
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault()
+		dragging = false
+		if (disabled || !event.dataTransfer?.files.length) return
+		handleFiles(event.dataTransfer.files)
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault()
+		if (!disabled) dragging = true
+	}
+
+	function handleDragLeave() {
+		dragging = false
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			if (!disabled) inputRef?.click()
+		}
+	}
+</script>
+
+<div
+	data-upload-target
+	data-size={size}
+	data-disabled={disabled || undefined}
+	data-dragging={dragging || undefined}
+	role="button"
+	tabindex="0"
+	aria-label={resolvedLabels.dropzone ?? 'File upload drop zone'}
+	aria-disabled={disabled}
+	class={className || undefined}
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+	onclick={() => {
+		if (!disabled) inputRef?.click()
+	}}
+	onkeydown={handleKeydown}
+>
+	{#if content}
+		{@render content(dragging)}
+	{:else}
+		<span data-upload-icon class="i-lucide:upload" aria-hidden="true"></span>
+		{#if size !== 'small'}
+			<p>Drop files here or click to browse</p>
+			<button type="button" data-upload-button {disabled}>Browse</button>
+		{/if}
+	{/if}
+
+	<input
+		bind:this={inputRef}
+		type="file"
+		{accept}
+		{multiple}
+		{disabled}
+		hidden
+		onchange={handleInputChange}
+	/>
+</div>

package/src/components/index.ts

@@ -0,0 +1,50 @@
+// UI Components
+export { default as Button } from './Button.svelte'
+export { default as ButtonGroup } from './ButtonGroup.svelte'
+export { default as Code } from './Code.svelte'
+export { default as Menu } from './Menu.svelte'
+export { default as Dropdown } from './Dropdown.svelte'
+export { default as Select } from './Select.svelte'
+export { default as MultiSelect } from './MultiSelect.svelte'
+export { default as Toolbar } from './Toolbar.svelte'
+export { default as ToolbarGroup } from './ToolbarGroup.svelte'
+export { default as Tabs } from './Tabs.svelte'
+export { default as Toggle } from './Toggle.svelte'
+export { default as Swatch } from './Swatch.svelte'
+export { default as List } from './List.svelte'
+export { default as Tree } from './Tree.svelte'
+export { default as LazyTree } from './LazyTree.svelte'
+export { default as Connector } from './Connector.svelte'
+export { default as ItemContent } from './ItemContent.svelte'
+export { default as FloatingAction } from './FloatingAction.svelte'
+export { default as PaletteManager } from './PaletteManager.svelte'
+export { default as Tilt } from './Tilt.svelte'
+export { default as Shine } from './Shine.svelte'
+export { default as BreadCrumbs } from './BreadCrumbs.svelte'
+export { default as Card } from './Card.svelte'
+export { default as ProgressBar } from './ProgressBar.svelte'
+export { default as Carousel } from './Carousel.svelte'
+export { default as Pill } from './Pill.svelte'
+export { default as Rating } from './Rating.svelte'
+export { default as Stepper } from './Stepper.svelte'
+export { default as Switch } from './Switch.svelte'
+export { default as Table } from './Table.svelte'
+export { default as SearchFilter } from './SearchFilter.svelte'
+export { default as Range } from './Range.svelte'
+export { default as Timeline } from './Timeline.svelte'
+export { default as Reveal } from './Reveal.svelte'
+export { default as Grid } from './Grid.svelte'
+export { default as UploadTarget } from './UploadTarget.svelte'
+export { default as UploadFileStatus } from './UploadFileStatus.svelte'
+export { default as UploadProgress } from './UploadProgress.svelte'
+export { default as FloatingNavigation } from './FloatingNavigation.svelte'
+export { default as StatusList } from './StatusList.svelte'
+export { default as Message } from './Message.svelte'
+export { default as AlertList } from './AlertList.svelte'
+export { default as Divider } from './Divider.svelte'
+export { default as Stack } from './Stack.svelte'
+export { default as Badge } from './Badge.svelte'
+export { default as Avatar } from './Avatar.svelte'
+export { default as Tooltip } from './Tooltip.svelte'
+export { default as NavContent } from './NavContent.svelte'
+export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'

package/src/index.ts

@@ -0,0 +1,61 @@
+// Components
+export {
+	Button,
+	ButtonGroup,
+	Code,
+	Menu,
+	Dropdown,
+	Select,
+	MultiSelect,
+	Toolbar,
+	ToolbarGroup,
+	Tabs,
+	Toggle,
+	Swatch,
+	List,
+	Tree,
+	LazyTree,
+	FloatingAction,
+	FloatingNavigation,
+	PaletteManager,
+	Tilt,
+	Shine,
+	BreadCrumbs,
+	Card,
+	ProgressBar,
+	Carousel,
+	Pill,
+	Rating,
+	Connector,
+	Stepper,
+	Switch,
+	Table,
+	SearchFilter,
+	Range,
+	Timeline,
+	Reveal,
+	Grid,
+	UploadTarget,
+	UploadFileStatus,
+	UploadProgress,
+	StatusList,
+	Message,
+	AlertList,
+	Divider,
+	Stack,
+	Badge,
+	Avatar,
+	Tooltip,
+	NavContent,
+	ResponsiveGrid
+} from './components/index.js'
+
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte'
+export type { MarkdownPlugin } from './markdown-plugin.js'
+
+// Utilities
+export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js'
+export * from './utils/palette.js'
+
+// Types
+export * from './types/index.js'

package/src/markdown-plugin.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte'
+
+/**
+ * A plugin that renders a fenced code block as a Svelte component.
+ * The component receives { code: string } as props.
+ */
+export interface MarkdownPlugin {
+	/** Fenced code block language to match (e.g. 'plot', 'table', 'sparkline') */
+	language: string
+	/** Svelte component to render the block. Receives { code: string } */
+	component: Component<{ code: string }>
+}

package/src/types/button.ts

@@ -0,0 +1,86 @@
+/**
+ * Button Component Types
+ *
+ * Provides types for the Button and ButtonGroup components.
+ * Supports variants, styles, sizes, loading state, link buttons, and custom content.
+ */
+
+import type { Snippet } from 'svelte'
+
+// =============================================================================
+// Variant & Style Types
+// =============================================================================
+
+/** Semantic color variant */
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'danger'
+
+/** Visual style treatment */
+export type ButtonStyle = 'default' | 'outline' | 'ghost' | 'gradient' | 'link'
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps {
+	/** Semantic color variant */
+	variant?: ButtonVariant
+
+	/** Visual style treatment */
+	style?: ButtonStyle
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** HTML button type */
+	type?: 'button' | 'submit' | 'reset'
+
+	/** Button label text */
+	label?: string
+
+	/** Leading icon class */
+	icon?: string
+
+	/** Trailing icon class */
+	iconRight?: string
+
+	/** Navigates as link instead of button */
+	href?: string
+
+	/** Link target (when href is set) */
+	target?: string
+
+	/** Native tooltip shown on hover */
+	title?: string
+
+	/** Disabled state */
+	disabled?: boolean
+
+	/** Loading state — shows spinner, disables interaction */
+	loading?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Click handler */
+	onclick?: (event: MouseEvent) => void
+
+	/** Custom content snippet */
+	children?: Snippet
+}
+
+/**
+ * Props for the ButtonGroup component
+ */
+export interface ButtonGroupProps {
+	/** Size applied to all buttons in the group */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Content snippet (buttons) */
+	children?: Snippet
+}

package/src/types/code.ts

@@ -0,0 +1,46 @@
+/**
+ * Code component types
+ */
+
+import { DEFAULT_STATE_ICONS } from '@rokkit/core'
+
+/** Supported themes for code highlighting */
+export type CodeTheme = 'light' | 'dark'
+
+/**
+ * Icons configuration for code action states.
+ * Keys match the naming convention in @rokkit/core DEFAULT_STATE_ICONS.
+ */
+export interface CodeStateIcons {
+	/** Icon class for copy button */
+	copy?: string
+	/** Icon class for copy success state */
+	copysuccess?: string
+}
+
+/**
+ * Default state icons — uses semantic names from @rokkit/core
+ * that get resolved to actual icon classes via UnoCSS shortcuts.
+ */
+export const defaultCodeStateIcons: CodeStateIcons = {
+	copy: DEFAULT_STATE_ICONS.action.copy,
+	copysuccess: DEFAULT_STATE_ICONS.action.copysuccess
+}
+
+/** Props for the Code component */
+export interface CodeProps {
+	/** The code string to display and highlight */
+	code: string
+	/** Programming language for syntax highlighting */
+	language?: string
+	/** Color theme for the code block */
+	theme?: CodeTheme
+	/** Whether to show line numbers */
+	showLineNumbers?: boolean
+	/** Whether to show the copy button */
+	showCopyButton?: boolean
+	/** Icons for copy action states */
+	icons?: CodeStateIcons
+	/** Additional CSS class */
+	class?: string
+}

package/src/types/floating-action.ts

@@ -0,0 +1,123 @@
+import type { Snippet } from 'svelte'
+
+/**
+ * Field mapping for FloatingAction items
+ */
+export type FloatingActionFields = Record<string, string>
+
+/**
+ * Default field mappings
+ */
+export const defaultFloatingActionFields: Required<
+	Pick<FloatingActionFields, 'text' | 'value' | 'icon' | 'label' | 'disabled'>
+> = {
+	text: 'text',
+	value: 'value',
+	icon: 'icon',
+	label: 'label',
+	disabled: 'disabled'
+}
+
+/**
+ * A single action item
+ */
+export type FloatingActionItem = Record<string, unknown>
+
+/**
+ * Event handlers passed to custom snippets
+ */
+export interface FloatingActionItemHandlers {
+	onclick: () => void
+	onkeydown: (event: KeyboardEvent) => void
+}
+
+/**
+ * Custom snippet for rendering an action item
+ */
+export type FloatingActionItemSnippet = Snippet<
+	[item: FloatingActionItem, fields: FloatingActionFields, handlers: FloatingActionItemHandlers]
+>
+
+/**
+ * Position options for the FAB
+ */
+export type FloatingActionPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+
+/**
+ * Expansion direction for action items
+ */
+export type FloatingActionExpand = 'radial' | 'vertical' | 'horizontal'
+
+/**
+ * Alignment for action items in the menu
+ */
+export type FloatingActionItemAlign = 'start' | 'center' | 'end'
+
+/**
+ * Icons for the FloatingAction trigger button
+ */
+export interface FloatingActionIcons {
+	/** Icon for the main trigger (add action) */
+	add?: string
+	/** Icon shown when menu is open (close action) */
+	close?: string
+}
+
+/**
+ * Props for the FloatingAction component
+ */
+export interface FloatingActionProps {
+	/** Array of action items */
+	items?: FloatingActionItem[]
+
+	/** Field mapping configuration */
+	fields?: FloatingActionFields
+
+	/** Custom icons for the trigger button */
+	icons?: FloatingActionIcons
+
+	/** Accessible label for the trigger */
+	label?: string
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Position on screen */
+	position?: FloatingActionPosition
+
+	/** How items expand when opened */
+	expand?: FloatingActionExpand
+
+	/** Alignment of items in the menu (start/center/end) */
+	itemAlign?: FloatingActionItemAlign
+
+	/** Disable the FAB */
+	disabled?: boolean
+
+	/** Whether the menu is open (bindable) */
+	open?: boolean
+
+	/** Show backdrop overlay when open */
+	backdrop?: boolean
+
+	/** Position relative to nearest positioned ancestor instead of viewport */
+	contained?: boolean
+
+	/** Called when an action is selected */
+	onselect?: (value: unknown, item: FloatingActionItem) => void
+
+	/** Called when menu opens */
+	onopen?: () => void
+
+	/** Called when menu closes */
+	onclose?: () => void
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom snippet for rendering action items */
+	item?: FloatingActionItemSnippet
+}
+
+// Re-export getSnippet for convenience
+export { getSnippet } from './menu.js'