@rokkit/ui 1.3.3 → 1.3.5

package/dist/utils/shiki.js

@@ -0,0 +1,118 @@
+/**
+ * Shiki syntax highlighting utility
+ */
+import { createHighlighter } from 'shiki';
+let highlighter = null;
+let isInitializing = false;
+let initPromise = null;
+// Supported languages for the application
+const SUPPORTED_LANGUAGES = [
+    'svelte',
+    'javascript',
+    'typescript',
+    'css',
+    'html',
+    'json',
+    'bash',
+    'shell',
+    'markdown',
+    'yaml',
+    'sql'
+];
+// Available themes
+const THEMES = ['github-light', 'github-dark'];
+/**
+ * Initialize Shiki highlighter (singleton)
+ */
+function initializeHighlighter() {
+    if (highlighter)
+        return Promise.resolve(highlighter);
+    if (isInitializing && initPromise) {
+        return initPromise;
+    }
+    isInitializing = true;
+    initPromise = createHighlighter({
+        themes: THEMES,
+        langs: SUPPORTED_LANGUAGES
+    })
+        .then((hl) => {
+        highlighter = hl;
+        isInitializing = false;
+        return hl;
+    })
+        .catch((error) => {
+        /* v8 ignore next 3 -- createHighlighter failure not reachable in test env (singleton already initialized) */
+        isInitializing = false;
+        initPromise = null;
+        throw error;
+    });
+    return initPromise;
+}
+/**
+ * Highlight code using Shiki
+ *
+ * @param code - The code to highlight
+ * @param options - Highlighting options
+ * @returns The highlighted code as HTML
+ */
+function resolveTheme(themeOption) {
+    if (themeOption === 'light')
+        return 'github-light';
+    if (themeOption === 'dark' || !themeOption)
+        return 'github-dark';
+    return themeOption;
+}
+/**
+ * Map fence languages (used by @rokkit/blocks plugins) to a Shiki-known
+ * grammar. The fence is *semantic* (the renderer routes by language name),
+ * but the body is plain JSON — highlight it as such instead of falling
+ * back to unstyled text.
+ */
+const LANGUAGE_ALIASES = {
+    plot: 'json',
+    table: 'json',
+    form: 'json',
+    list: 'json',
+    stepper: 'json',
+    sparkline: 'json',
+    chart: 'json'
+};
+function resolveLang(input) {
+    if (!input)
+        return 'text';
+    return (LANGUAGE_ALIASES[input] ?? input);
+}
+function isValidCode(code) {
+    return Boolean(code) && typeof code === 'string';
+}
+export async function highlightCode(code, options = {}) {
+    if (!isValidCode(code))
+        throw new Error('Invalid code provided for highlighting');
+    const hl = await initializeHighlighter();
+    const lang = resolveLang(options.lang);
+    const theme = resolveTheme(options.theme);
+    const loadedLangs = hl.getLoadedLanguages();
+    const effectiveLang = loadedLangs.includes(lang) ? lang : 'text';
+    return hl
+        .codeToHtml(code, { lang: effectiveLang, theme })
+        .replace(/(<pre[^>]+) style="[^"]*"/, '$1');
+}
+/**
+ * Preload the syntax highlighter for faster initial rendering
+ * Errors are silently ignored since preloading is optional
+ */
+export async function preloadHighlighter() {
+    try {
+        await initializeHighlighter();
+        /* v8 ignore next 3 -- preload catch body unreachable in tests (singleton already initialized) */
+    }
+    catch {
+        // Preload failures are non-critical - highlighting will still work on demand
+    }
+}
+/**
+ * Get list of supported languages
+ */
+export function getSupportedLanguages() {
+    return SUPPORTED_LANGUAGES;
+}

package/package.json

@@ -1,39 +1,38 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jerrythomas/rokkit.git"
   },
   "type": "module",
-  "svelte": "./src/index.ts",
+  "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./src/index.ts",
-      "default": "./src/index.ts"
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts",
-      "default": "./src/types/index.ts"
+      "default": "./dist/types/index.js"
     },
     "./utils/palette": {
       "types": "./dist/utils/palette.d.ts",
-      "default": "./src/utils/palette.ts"
+      "default": "./dist/utils/palette.js"
     },
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
-    "dist/**/*.d.ts",
+    "dist",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "prepublishOnly": "cp ../../LICENSE . && bun run build",
-    "postpublish": "rm -f LICENSE",
+    "prepublishOnly": "cp ../../LICENSE . && bun run build && node ../../config/pack-repoint.mjs",
+    "postpublish": "node ../../config/pack-repoint.mjs --restore && rm -f LICENSE",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "build": "svelte-package -i src -o dist"
   },
@@ -45,10 +44,10 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.3.3",
-    "@rokkit/data": "1.3.3",
-    "@rokkit/states": "1.3.3",
-    "@rokkit/actions": "1.3.3",
+    "@rokkit/core": "1.3.5",
+    "@rokkit/data": "1.3.5",
+    "@rokkit/states": "1.3.5",
+    "@rokkit/actions": "1.3.5",
     "marked": "^15.0.0",
     "dompurify": "^3.0.0"
   },

package/src/components/index.ts

@@ -1,63 +0,0 @@
-// 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/src/index.ts

@@ -1,73 +0,0 @@
-// 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,
-	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'
-
-// 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

@@ -1,12 +0,0 @@
-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/alert-list.ts

@@ -1,28 +0,0 @@
-/**
- * AlertList Component Types
- *
- * Renders a portalled toast stack at a screen-edge position, reading from
- * the shared `alerts` state.
- */
-
-/**
- * Screen position for the toast stack.
- */
-export type AlertListPosition =
-	| 'top-right'
-	| 'top-center'
-	| 'top-left'
-	| 'bottom-right'
-	| 'bottom-center'
-	| 'bottom-left'
-
-/**
- * Props for the AlertList component.
- */
-export interface AlertListProps {
-	/** Screen position for the toast stack. */
-	position?: AlertListPosition
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/avatar.ts

@@ -1,41 +0,0 @@
-/**
- * Avatar Component Types
- */
-
-/** Avatar size scale. */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-/** Avatar shape. */
-export type AvatarShape = 'circle' | 'square'
-
-/** Online presence status. */
-export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy'
-
-/**
- * Props for the Avatar component.
- */
-export interface AvatarProps {
-	/** Image source URL. */
-	src?: string
-
-	/** Alt text for the image. */
-	alt?: string
-
-	/** Explicit initials to display as fallback. */
-	initials?: string
-
-	/** Full name — auto-derives initials if `initials` prop not provided. */
-	name?: string
-
-	/** Size variant. */
-	size?: AvatarSize
-
-	/** Online presence status. */
-	status?: AvatarStatus
-
-	/** Shape variant. */
-	shape?: AvatarShape
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/badge.ts

@@ -1,37 +0,0 @@
-/**
- * Badge Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/** Semantic color variant for a badge. */
-export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error'
-
-/**
- * Props for the Badge component.
- *
- * Badge can be used standalone or wrapped around a child via the `children`
- * snippet, in which case it positions itself absolutely over the child.
- */
-export interface BadgeProps {
-	/** Numeric count to display. */
-	count?: number
-
-	/** Maximum count before rendering as `${max}+`. Default `99`. */
-	max?: number
-
-	/** Visual variant. */
-	variant?: BadgeVariant
-
-	/** Render as a small dot without content. */
-	dot?: boolean
-
-	/**
-	 * Content to wrap. When provided, the badge positions absolutely over
-	 * the rendered child.
-	 */
-	children?: Snippet
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/breadcrumbs.ts

@@ -1,43 +0,0 @@
-/**
- * BreadCrumbs Component Types
- */
-
-import type { Snippet } from 'svelte'
-import type { ProxyItem } from '@rokkit/states'
-
-/**
- * Icon overrides for the BreadCrumbs component.
- */
-export interface BreadCrumbsIcons {
-	/** Icon class used for the separator between crumbs. */
-	separator?: string
-}
-
-/**
- * Props for the BreadCrumbs component.
- */
-export interface BreadCrumbsProps {
-	/** Array of breadcrumb items. */
-	items?: unknown[]
-
-	/** Custom field mappings used by the internal `ProxyItem`. */
-	fields?: Record<string, string>
-
-	/** Accessible label for the surrounding `<nav>`. */
-	label?: string
-
-	/** Custom icon overrides. */
-	icons?: BreadCrumbsIcons
-
-	/** Called when a crumb is clicked. */
-	onclick?: (value: unknown, item: unknown) => void
-
-	/**
-	 * Custom snippet for rendering each crumb. Receives the crumb's
-	 * `ProxyItem` and a flag indicating whether it is the last (current) crumb.
-	 */
-	crumb?: Snippet<[ProxyItem, boolean]>
-
-	/** Additional CSS class. */
-	class?: string
-}

package/src/types/button.ts

@@ -1,92 +0,0 @@
-/**
- * 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'
-import type { HTMLButtonAttributes } from 'svelte/elements'
-
-// =============================================================================
-// 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.
- *
- * Extends native `<button>` attributes so consumers can pass `aria-*`,
- * `onclick`, `title`, `name`, `form`, etc. The native `style` and `type`
- * keys are omitted because this component repurposes `style` (visual
- * treatment) and narrows `type` to the valid button types.
- */
-export interface ButtonProps extends Omit<HTMLButtonAttributes, 'style' | 'type'> {
-	/** 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/card.ts

@@ -1,38 +0,0 @@
-/**
- * Card Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/** Semantic color variant for a card. */
-export type CardVariant = 'default' | 'primary' | 'secondary' | 'tertiary'
-
-/**
- * Props for the Card component.
- *
- * When `href` is provided the card renders as an anchor. When `onclick` is
- * provided (and no `href`) it renders as a button. Otherwise it renders as
- * a plain container.
- */
-export interface CardProps {
-	/** Optional href — renders the card as an `<a>` link. */
-	href?: string
-
-	/** Click handler — applies only when no `href` is provided. */
-	onclick?: () => void
-
-	/** Visual variant. */
-	variant?: CardVariant
-
-	/** Additional CSS class. */
-	class?: string
-
-	/** Card header snippet. */
-	header?: Snippet
-
-	/** Card footer snippet. */
-	footer?: Snippet
-
-	/** Card body content. */
-	children?: Snippet
-}

package/src/types/carousel.ts

@@ -1,49 +0,0 @@
-/**
- * Carousel Component Types
- */
-
-import type { Snippet } from 'svelte'
-
-/** Transition effect between carousel slides. */
-export type CarouselTransition = 'slide' | 'fade' | 'none'
-
-/**
- * Props for the Carousel component.
- */
-export interface CarouselProps {
-	/** Number of slides (required when using the `children` snippet). */
-	count?: number
-
-	/** Current slide index (bindable). */
-	current?: number
-
-	/** Auto-advance slides. */
-	autoplay?: boolean
-
-	/** Autoplay interval in milliseconds. Default `5000`. */
-	interval?: number
-
-	/** Wrap around at the ends. Default `true`. */
-	loop?: boolean
-
-	/** Show navigation dots. Default `true`. */
-	showDots?: boolean
-
-	/** Show prev / next arrow buttons. Default `true`. */
-	showArrows?: boolean
-
-	/** Transition effect. Default `'slide'`. */
-	transition?: CarouselTransition
-
-	/** Accessible label overrides for built-in controls. */
-	labels?: Record<string, string>
-
-	/** Additional CSS class. */
-	class?: string
-
-	/** Slide content — receives `(index, current)`. */
-	slide?: Snippet<[number, number]>
-
-	/** Children snippet (alternative to `slide`). */
-	children?: Snippet
-}