@rokkit/ui 1.3.3 → 1.3.5

package/dist/components/index.js

@@ -0,0 +1,63 @@
+// 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 CodeBlock } from './CodeBlock.svelte';
+export { default as CodeGroup } from './CodeGroup.svelte';
+export { default as Frame } from './Frame.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 LockMode } from './LockMode.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 ItemSwitch } from './ItemSwitch.svelte';
+export { default as ItemToggle } from './ItemToggle.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 CommandPalette } from './CommandPalette.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 TreeTable } from './TreeTable.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';
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { default as ChatTimeline } from './ChatTimeline.svelte';
+export { default as ChatComposer } from './ChatComposer.svelte';
+export { default as ChatHistory } from './ChatHistory.svelte';
+export { default as ChatShell } from './ChatShell.svelte';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette, ChatMessage, ChatTimeline, ChatComposer, ChatHistory, ChatShell } from './components/index.js';
+export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, ItemSwitch, ItemToggle, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette, ChatMessage, ChatTimeline, ChatComposer, ChatHistory, ChatShell } from './components/index.js';
 export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
 export type { MarkdownPlugin } from './markdown-plugin.js';
 export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+// Components
+export { Button, ButtonGroup, Code, CodeBlock, CodeGroup, Frame, Menu, Dropdown, Select, MultiSelect, Toolbar, ToolbarGroup, Tabs, Toggle, Swatch, List, Tree, LazyTree, LockMode, FloatingAction, FloatingNavigation, PaletteManager, Tilt, Shine, BreadCrumbs, Card, ProgressBar, Carousel, Pill, Rating, Connector, ItemContent, ItemSwitch, ItemToggle, Stepper, Switch, Table, TreeTable, SearchFilter, Range, Timeline, Reveal, Grid, UploadTarget, UploadFileStatus, UploadProgress, StatusList, Message, AlertList, Divider, Stack, Badge, Avatar, Tooltip, NavContent, ResponsiveGrid, CommandPalette, ChatMessage, ChatTimeline, ChatComposer, ChatHistory, ChatShell } from './components/index.js';
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
+// Utilities
+export { highlightCode, preloadHighlighter, getSupportedLanguages } from './utils/shiki.js';
+export * from './utils/palette.js';
+// Types
+export * from './types/index.js';

package/dist/markdown-plugin.js

@@ -0,0 +1 @@
+export {};

package/dist/types/alert-list.js

@@ -0,0 +1,7 @@
+/**
+ * AlertList Component Types
+ *
+ * Renders a portalled toast stack at a screen-edge position, reading from
+ * the shared `alerts` state.
+ */
+export {};

package/dist/types/avatar.js

@@ -0,0 +1,4 @@
+/**
+ * Avatar Component Types
+ */
+export {};

package/dist/types/badge.js

@@ -0,0 +1,4 @@
+/**
+ * Badge Component Types
+ */
+export {};

package/dist/types/breadcrumbs.js

@@ -0,0 +1,4 @@
+/**
+ * BreadCrumbs Component Types
+ */
+export {};

package/dist/types/button.js

@@ -0,0 +1,7 @@
+/**
+ * Button Component Types
+ *
+ * Provides types for the Button and ButtonGroup components.
+ * Supports variants, styles, sizes, loading state, link buttons, and custom content.
+ */
+export {};

package/dist/types/card.js

@@ -0,0 +1,4 @@
+/**
+ * Card Component Types
+ */
+export {};

package/dist/types/carousel.js

@@ -0,0 +1,4 @@
+/**
+ * Carousel Component Types
+ */
+export {};

package/dist/types/chat.js

@@ -0,0 +1 @@
+export {};

package/dist/types/code.js

@@ -0,0 +1,12 @@
+/**
+ * Code component types — Code, CodeBlock, CodeGroup
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+/**
+ * Default state icons — uses semantic names from @rokkit/core
+ * that get resolved to actual icon classes via UnoCSS shortcuts.
+ */
+export const defaultCodeStateIcons = {
+    copy: DEFAULT_STATE_ICONS.action.copy,
+    copysuccess: DEFAULT_STATE_ICONS.action.copysuccess
+};

package/dist/types/connector.js

@@ -0,0 +1,8 @@
+/**
+ * Connector Component Types
+ *
+ * The `Connector` component renders tree-line connectors used by hierarchical
+ * visualizations (Tree, lists with indent guides). The underlying connector
+ * type values are defined in `./tree.ts` and re-exported here for ergonomics.
+ */
+export {};

package/dist/types/divider.js

@@ -0,0 +1,4 @@
+/**
+ * Divider Component Types
+ */
+export {};

package/dist/types/floating-action.js

@@ -0,0 +1,12 @@
+/**
+ * Default field mappings
+ */
+export const defaultFloatingActionFields = {
+    text: 'text',
+    value: 'value',
+    icon: 'icon',
+    label: 'label',
+    disabled: 'disabled'
+};
+// Re-export getSnippet for convenience
+export { getSnippet } from './menu.js';

package/dist/types/floating-navigation.js

@@ -0,0 +1 @@
+export {};

package/dist/types/frame.js

@@ -0,0 +1,8 @@
+/**
+ * Frame Component Types
+ *
+ * Generic header / body / footer container primitive — used by CodeBlock,
+ * PlotPlugin and other "card-shaped UI block" surfaces. For an interactive
+ * card (link / button) prefer `<Card/>`.
+ */
+export {};

package/dist/types/index.js

@@ -0,0 +1,93 @@
+// Button Types
+export * from './button.js';
+// Code Types
+export * from './code.js';
+// Menu Types
+export * from './menu.js';
+// Select Types
+export * from './select.js';
+// Toolbar Types
+export * from './toolbar.js';
+// Tabs Types
+export * from './tabs.js';
+// Toggle Types
+export * from './toggle.js';
+// Switch Types
+export * from './switch.js';
+// List Types
+export * from './list.js';
+// LockMode Types
+export * from './lock-mode.js';
+// Tree Types
+export * from './tree.js';
+// Floating Action Types
+export * from './floating-action.js';
+// Palette Types
+export * from './palette.js';
+// Table Types
+export * from './table.js';
+export * from './tree-table.js';
+// SearchFilter Types
+export * from './search-filter.js';
+// Range Types
+export * from './range.js';
+// Timeline Types
+export * from './timeline.js';
+// FloatingNavigation Types
+export * from './floating-navigation.js';
+// Upload Types
+export * from './upload-target.js';
+export * from './upload-file-status.js';
+export * from './upload-progress.js';
+// Tooltip Types
+export * from './tooltip.js';
+// ItemContent Types
+export * from './item-content.js';
+// ItemSwitch Types
+export * from './item-switch.js';
+// ItemToggle Types
+export * from './item-toggle.js';
+// StatusList Types
+export * from './status-list.js';
+// AlertList Types
+export * from './alert-list.js';
+// Avatar Types
+export * from './avatar.js';
+// Badge Types
+export * from './badge.js';
+// BreadCrumbs Types
+export * from './breadcrumbs.js';
+// Card Types
+export * from './card.js';
+// Carousel Types
+export * from './carousel.js';
+// Connector Types
+export * from './connector.js';
+// Divider Types
+export * from './divider.js';
+// Frame Types
+export * from './frame.js';
+// Message Types
+export * from './message.js';
+// NavContent Types
+export * from './nav-content.js';
+// Pill Types
+export * from './pill.js';
+// ProgressBar Types
+export * from './progress-bar.js';
+// Rating Types
+export * from './rating.js';
+// ResponsiveGrid Types
+export * from './responsive-grid.js';
+// Reveal Types
+export * from './reveal.js';
+// Shine Types
+export * from './shine.js';
+// Stack Types
+export * from './stack.js';
+// Stepper Types
+export * from './stepper.js';
+// Tilt Types
+export * from './tilt.js';
+// Chat Types
+export * from './chat.js';

package/dist/types/item-content.js

@@ -0,0 +1,8 @@
+/**
+ * ItemContent Component Types
+ *
+ * Default inner content for List / Menu / Tree / Toolbar items.
+ * Renders avatar/icon, label + subtext, optional badge and shortcut from a
+ * ProxyItem wrapper that exposes field access and reactive state.
+ */
+export {};

package/dist/types/item-switch.js

@@ -0,0 +1,10 @@
+/**
+ * ItemSwitch Component Types
+ *
+ * Renders a switch-shaped visual inside a data-driven item snippet
+ * (List / Menu / Tree). The whole row is the interactive target — clicking it
+ * toggles the underlying data through the parent's onselect flow. ItemSwitch
+ * itself renders inert markup (spans + attributes), so it never introduces a
+ * nested interactive element inside the item's `<button>` wrapper.
+ */
+export {};

package/dist/types/item-toggle.js

@@ -0,0 +1,12 @@
+/**
+ * ItemToggle Component Types
+ *
+ * Renders a compact toggle-group visual inside a data-driven item snippet.
+ * Options come from the item's data (via `optionsField`). Each option is a
+ * span with `role="radio"` and its own click handler — Navigator defers to
+ * these nested interactives via its isNestedInteractive guard.
+ *
+ * Consumers wire state via `onchange`. ItemToggle does not mutate the item
+ * data directly.
+ */
+export {};

package/dist/types/list.js

@@ -0,0 +1,36 @@
+/**
+ * List Component Types
+ *
+ * Provides types for the data-driven List component.
+ * Supports navigation links, button items, and grouped items with collapsible sections.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+/**
+ * Default field mapping values
+ */
+export const defaultListFields = {
+    text: 'text',
+    value: 'value',
+    href: 'href',
+    icon: 'icon',
+    description: 'description',
+    label: 'label',
+    disabled: 'disabled',
+    children: 'children',
+    snippet: 'snippet',
+    badge: 'badge',
+    title: 'title'
+};
+/**
+ * Default state icons — uses semantic names from @rokkit/core
+ * that get resolved to actual icon classes via UnoCSS shortcuts.
+ */
+export const defaultListStateIcons = {
+    opened: DEFAULT_STATE_ICONS.accordion.opened,
+    closed: DEFAULT_STATE_ICONS.accordion.closed
+};
+// =============================================================================
+// Helper Functions
+// =============================================================================
+export { getSnippet } from './menu.js';

package/dist/types/lock-mode.js

@@ -0,0 +1 @@
+export {};

package/dist/types/menu.js

@@ -0,0 +1,25 @@
+/**
+ * Menu Component Types
+ *
+ * The new Menu uses the same Wrapper + Navigator stack as List.
+ * Trigger action manages open/close. Dropdown content is identical to List.
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+export const defaultMenuStateIcons = {
+    opened: DEFAULT_STATE_ICONS.selector.opened,
+    closed: DEFAULT_STATE_ICONS.selector.closed
+};
+// =============================================================================
+// Snippet Utilities
+// =============================================================================
+/**
+ * Retrieve a named snippet from a snippets record, with type/null safety.
+ */
+export function getSnippet(snippets, name) {
+    if (name === null)
+        return null;
+    const snippet = snippets[name];
+    if (snippet !== undefined && typeof snippet === 'function')
+        return snippet;
+    return null;
+}

package/dist/types/message.js

@@ -0,0 +1,4 @@
+/**
+ * Message Component Types
+ */
+export {};

package/dist/types/nav-content.js

@@ -0,0 +1,4 @@
+/**
+ * NavContent Component Types
+ */
+export {};

package/dist/types/palette.js

@@ -0,0 +1,54 @@
+/**
+ * Default color roles to display
+ */
+export const defaultRoles = [
+    'primary',
+    'secondary',
+    'accent',
+    'surface',
+    'success',
+    'warning',
+    'danger',
+    'info'
+];
+/**
+ * Default palette presets using Tailwind colors
+ */
+export const defaultPresets = [
+    { name: 'Slate', color: 'slate', preview: '#64748b' },
+    { name: 'Gray', color: 'gray', preview: '#6b7280' },
+    { name: 'Zinc', color: 'zinc', preview: '#71717a' },
+    { name: 'Red', color: 'red', preview: '#ef4444' },
+    { name: 'Orange', color: 'orange', preview: '#f97316' },
+    { name: 'Amber', color: 'amber', preview: '#f59e0b' },
+    { name: 'Yellow', color: 'yellow', preview: '#eab308' },
+    { name: 'Lime', color: 'lime', preview: '#84cc16' },
+    { name: 'Green', color: 'green', preview: '#22c55e' },
+    { name: 'Emerald', color: 'emerald', preview: '#10b981' },
+    { name: 'Teal', color: 'teal', preview: '#14b8a6' },
+    { name: 'Cyan', color: 'cyan', preview: '#06b6d4' },
+    { name: 'Sky', color: 'sky', preview: '#0ea5e9' },
+    { name: 'Blue', color: 'blue', preview: '#3b82f6' },
+    { name: 'Indigo', color: 'indigo', preview: '#6366f1' },
+    { name: 'Violet', color: 'violet', preview: '#8b5cf6' },
+    { name: 'Purple', color: 'purple', preview: '#a855f7' },
+    { name: 'Fuchsia', color: 'fuchsia', preview: '#d946ef' },
+    { name: 'Pink', color: 'pink', preview: '#ec4899' },
+    { name: 'Rose', color: 'rose', preview: '#f43f5e' }
+];
+/**
+ * Default palette configuration
+ */
+export const defaultPaletteConfig = {
+    name: 'Default',
+    mapping: {
+        primary: 'orange',
+        secondary: 'pink',
+        accent: 'sky',
+        surface: 'slate',
+        success: 'green',
+        warning: 'amber',
+        danger: 'red',
+        info: 'cyan'
+    }
+};

package/dist/types/pill.js

@@ -0,0 +1,4 @@
+/**
+ * Pill Component Types
+ */
+export {};

package/dist/types/progress-bar.js

@@ -0,0 +1,4 @@
+/**
+ * ProgressBar Component Types
+ */
+export {};

package/dist/types/range.js

@@ -0,0 +1,7 @@
+/**
+ * Range Component Types
+ *
+ * Custom slider with single or dual-handle modes,
+ * tick marks, drag interaction, and keyboard support.
+ */
+export {};

package/dist/types/rating.js

@@ -0,0 +1,4 @@
+/**
+ * Rating Component Types
+ */
+export {};

package/dist/types/responsive-grid.js

@@ -0,0 +1,4 @@
+/**
+ * ResponsiveGrid Component Types
+ */
+export {};

package/dist/types/reveal.js

@@ -0,0 +1,4 @@
+/**
+ * Reveal Component Types
+ */
+export {};

package/dist/types/search-filter.js

@@ -0,0 +1,7 @@
+/**
+ * SearchFilter Component Types
+ *
+ * Provides types for the standalone SearchFilter component.
+ * Parses user input into structured filter objects using parseFilters() from @rokkit/data.
+ */
+export {};

package/dist/types/select.js

@@ -0,0 +1,21 @@
+/**
+ * Select Component Types
+ *
+ * Provides types for the data-driven Select and MultiSelect components.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+/**
+ * Default state icons — uses semantic names from @rokkit/core
+ * that get resolved to actual icon classes via UnoCSS shortcuts.
+ */
+export const defaultSelectStateIcons = {
+    opened: DEFAULT_STATE_ICONS.selector.opened,
+    closed: DEFAULT_STATE_ICONS.selector.closed,
+    checked: DEFAULT_STATE_ICONS.checkbox.checked,
+    remove: DEFAULT_STATE_ICONS.action.remove
+};
+// =============================================================================
+// Helper Functions
+// =============================================================================
+export { getSnippet } from './menu.js';

package/dist/types/shine.js

@@ -0,0 +1,7 @@
+/**
+ * Shine Component Types
+ *
+ * Renders an SVG specular-lighting filter that tracks pointer position to
+ * give wrapped content a moving highlight.
+ */
+export {};

package/dist/types/stack.js

@@ -0,0 +1,4 @@
+/**
+ * Stack Component Types
+ */
+export {};

package/dist/types/status-list.js

@@ -0,0 +1,7 @@
+/**
+ * StatusList Component Types
+ *
+ * Renders a vertical list of status rows — each with a label and a status
+ * keyword that maps to a badge icon (e.g. `pass`, `fail`, `warn`).
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';

package/dist/types/stepper.js

@@ -0,0 +1,4 @@
+/**
+ * Stepper Component Types
+ */
+export {};

package/dist/types/switch.js

@@ -0,0 +1,7 @@
+/**
+ * Switch Component Types
+ *
+ * Provides types for the iOS-style Switch component.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+export {};

package/dist/types/table.js

@@ -0,0 +1,23 @@
+/**
+ * Table Component Types
+ *
+ * Provides types for the data-driven Table component.
+ * Supports flat tables with sortable columns, row selection, and keyboard navigation.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states per cell.
+ */
+import { DEFAULT_STATE_ICONS } from '@rokkit/core';
+/**
+ * Default row-level field mapping values.
+ */
+export const defaultTableFields = {
+    value: 'id',
+    disabled: 'disabled'
+};
+/**
+ * Default sort icons from @rokkit/core state icons.
+ */
+export const defaultTableSortIcons = {
+    none: DEFAULT_STATE_ICONS.sort.none,
+    ascending: DEFAULT_STATE_ICONS.sort.ascending,
+    descending: DEFAULT_STATE_ICONS.sort.descending
+};

package/dist/types/tabs.js

@@ -0,0 +1,7 @@
+/**
+ * Tabs Component Types
+ *
+ * Provides types for the data-driven Tabs component.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+export {};

package/dist/types/tilt.js

@@ -0,0 +1,4 @@
+/**
+ * Tilt Component Types
+ */
+export {};

package/dist/types/timeline.js

@@ -0,0 +1,14 @@
+/**
+ * Timeline Component Types
+ *
+ * View-only vertical steps for instructions, changelogs,
+ * or process visualization. No interaction.
+ */
+export const defaultTimelineFields = {
+    label: 'label',
+    icon: 'icon',
+    subtext: 'description'
+};
+export const defaultTimelineIcons = {
+    completed: 'i-lucide:check'
+};

package/dist/types/toggle.js

@@ -0,0 +1,7 @@
+/**
+ * Toggle Component Types
+ *
+ * Provides types for the data-driven Toggle component.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+export {};

package/dist/types/toolbar.js

@@ -0,0 +1,20 @@
+/**
+ * Toolbar Component Types
+ *
+ * Provides types for the data-driven Toolbar component.
+ * Field mapping and data access is handled by ProxyItem from @rokkit/states.
+ */
+/**
+ * Default field mapping values
+ */
+export const defaultToolbarFields = {
+    text: 'text',
+    value: 'value',
+    icon: 'icon',
+    disabled: 'disabled',
+    active: 'active',
+    type: 'type',
+    snippet: 'snippet',
+    label: 'label',
+    shortcut: 'shortcut'
+};