@rokkit/core 1.0.0-next.34 → 1.0.0-next.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.34",
+  "version": "1.0.0-next.36",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -15,16 +15,17 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/svelte": "^4.0.3",
-    "@vitest/coverage-c8": "^0.32.3",
-    "@vitest/coverage-istanbul": "^0.32.3",
-    "@vitest/ui": "~0.32.3",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vitest/coverage-istanbul": "^0.33.0",
+    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/ui": "~0.33.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.1",
+    "svelte": "^4.0.5",
     "typescript": "^5.1.6",
     "validators": "latest",
-    "vite": "^4.3.9",
-    "vitest": "~0.32.3",
-    "shared-config": "1.0.0-next.34"
+    "vite": "^4.4.4",
+    "vitest": "~0.33.0",
+    "shared-config": "1.0.0-next.36"
   },
   "files": [
     "src/**/*.js",
@@ -35,8 +36,6 @@
   "exports": {
     "./src": "./src",
     "./package.json": "./package.json",
-    "./stores": "./src/stores/index.js",
-    "./actions": "./src/actions/index.js",
     "./constants": "./src/constants.js",
     ".": {
       "types": "./dist/index.d.ts",
@@ -44,9 +43,8 @@
     }
   },
   "dependencies": {
-    "@rokkit/molecules": "1.0.0-next.33",
-    "ramda": "^0.29.0",
-    "rokkit": "1.0.0-next.33"
+    "date-fns": "^2.30.0",
+    "ramda": "^0.29.0"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/calendar.js

@@ -0,0 +1,43 @@
+import {
+	getDay,
+	getMonth,
+	getYear,
+	getDaysInMonth,
+	format,
+	isWeekend
+} from 'date-fns'
+
+export const weekdays = [
+	'Sunday',
+	'Monday',
+	'Tuesday',
+	'Wednesday',
+	'Thursday',
+	'Friday',
+	'Saturday'
+]
+
+export function getCalendarDays(value, holidays = [], fixed = false) {
+	const month = getMonth(value)
+	const year = getYear(value)
+	const offset = getDay(new Date(year, month, 1)) + 1
+
+	holidays = holidays.map((x) => format(new Date(x), 'yyyy-MMM-dd'))
+	let days = Array.from({ length: getDaysInMonth(value) }, (_, i) => ({
+		day: i + 1,
+		offset: i == 0 ? offset : 0,
+		date: new Date(year, month, i + 1)
+	})).map((x) => ({
+		...x,
+		text: format(x.date, 'yyyy-MMM-dd'),
+		weekend: isWeekend(x.date),
+		holiday: holidays.includes(format(x.date, 'yyyy-MMM-dd'))
+	}))
+
+	if (fixed && days[0].offset > 4) {
+		const n = 5 * 7 - days[0].offset
+		days = [...days.slice(n + 1), ...days.slice(0, n + 1)]
+	}
+
+	return days
+}

package/src/connector.js

@@ -0,0 +1,12 @@
+export function getLineTypes(
+	hasChildren = false,
+	parentTypes = [],
+	position = 'child'
+) {
+	let types = parentTypes.slice(0, -1).map((type) => {
+		return type === 'child' ? 'sibling' : type === 'last' ? 'empty' : type
+	})
+	if (parentTypes.length > 0) types.push(position)
+	types.push(hasChildren ? 'icon' : 'empty')
+	return types
+}

package/src/constants.js

@@ -0,0 +1,88 @@
+/**
+ * @type {import('./types).FieldMapping} Fields
+ */
+export const defaultFields = {
+	id: 'id',
+	url: 'url',
+	text: 'text',
+	children: 'children',
+	icon: 'icon',
+	image: 'image',
+	component: 'component',
+	summary: 'summary',
+	notes: 'notes',
+	props: 'props',
+	target: 'target',
+	state: 'state',
+	isOpen: '_open',
+	isDeleted: '_deleted',
+	level: 'level',
+	parent: 'parent'
+}
+
+export const defaultIcons = [
+	'accordion-opened',
+	'accordion-closed',
+	'action-remove',
+	'action-add',
+	'action-clear',
+	'action-search',
+	'action-close',
+	'action-close-filled',
+	'node-opened',
+	'node-closed',
+	'selector-opened',
+	'selector-closed',
+	'checkbox-checked',
+	'checkbox-unchecked',
+	'checkbox-unknown',
+	'rating-filled',
+	'rating-empty',
+	'radio-off',
+	'radio-on',
+	'mode-dark',
+	'mode-light',
+	'navigate-left',
+	'navigate-right',
+	'navigate-up',
+	'navigate-down',
+	'state-error',
+	'state-warning',
+	'state-success',
+	'state-info',
+	'state-unknown',
+	'validity-failed',
+	'validity-warning',
+	'validity-passed',
+	'validity-unknown'
+]
+
+export const defaultOptions = {
+	id: 'id',
+	label: 'label',
+	value: 'value',
+	checked: 'checked'
+}
+
+export const defaultKeyMap = {
+	ArrowRight: 'open',
+	ArrowLeft: 'close',
+	ArrowDown: 'down',
+	ArrowUp: 'up',
+	Enter: 'select',
+	Escape: 'deselect'
+}
+
+export function stateIconsFromNames(icons) {
+	return icons
+		.map((k) => [...k.split('-')])
+		.reduce(
+			(acc, parts) => ({
+				...acc,
+				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
+			}),
+			{}
+		)
+}
+
+export const defaultStateIcons = stateIconsFromNames(defaultIcons)

package/src/index.js

@@ -1,30 +1,8 @@
-// export * from './constants'
-// export * from './items'
-// export * from './lib'
-
-// export { default as Icon } from './Icon.svelte'
-// export { default as Switch } from './Switch.svelte'
-// export { default as Tree } from './Tree.svelte'
-// export { default as Accordion } from './Accordion.svelte'
-// export { default as List } from './List.svelte'
-export { default as Searchable } from './Searchable.svelte'
-export { default as Scrollable } from './Scrollable.svelte'
-// export { default as NestedList } from './NestedList.svelte'
-// export { default as Tabs } from './Tabs.svelte'
-// export { default as BreadCrumbs } from './BreadCrumbs.svelte'
-export { default as NestedPaginator } from './NestedPaginator.svelte'
-
-// export { default as Alerts } from './Alerts.svelte'
-// export { default as Slider } from './Slider.svelte'
-// export { default as DropDown } from './DropDown.svelte'
-// export { default as DropSearch } from './DropSearch.svelte'
-export { default as SpinList } from './SpinList.svelte'
-
-export { default as Sidebar } from './Sidebar.svelte'
-export { default as SplitPane } from './SplitPane.svelte'
-export { default as Splitter } from './Splitter.svelte'
-export { default as SplitView } from './SplitView.svelte'
-export { default as Overlay } from './Overlay.svelte'
-
-export { default as PageNavigator } from './PageNavigator.svelte'
-export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'
+import './types'
+export * from './constants'
+export * from './nested'
+export * from './mapping'
+export * from './connector'
+export * from './ticks'
+export * from './calendar'
+export * from './utils'

package/src/mapping.js

@@ -0,0 +1,36 @@
+import { defaultFields } from './constants'
+
+/**
+ * Get the component to be used to render the item.
+ * If the component is null or undefined, it will return the default component.
+ *
+ * @param {object|string} value
+ * @param {import('./types.js').FieldMapping} fields
+ * @param {import('./types.js').ComponentMap} using
+ */
+export function getComponent(value, fields, using) {
+	return fields.component && typeof value == 'object'
+		? using[value[fields.component]] ?? using.default
+		: using.default
+}
+
+/**
+ * Get the icon for the item. If the icon is an object, it will use the state to determine which icon to use.
+ *
+ * @param {object|string} value
+ * @param {import('./types.js').FieldMapping} fields
+ */
+export function getIcon(value, fields = defaultFields) {
+	if (fields.icon === undefined || typeof (value ?? '') !== 'object')
+		return null
+
+	return typeof value[fields.icon] == 'object'
+		? value[fields.icon][value[fields.state]]
+		: value[fields.icon]
+}
+
+export function getId(node, fields = defaultFields) {
+	return typeof node === 'object' && node !== null
+		? node[fields.id] ?? node[fields.text]
+		: node
+}

package/src/nested.js

@@ -0,0 +1,45 @@
+import { omit } from 'ramda'
+import { defaultFields } from './constants'
+
+export function flattenNestedList(items, fields = defaultFields, level = 0) {
+	fields = { ...defaultFields, ...fields }
+	let data = []
+	items.map((item) => {
+		const children = item[fields.children] ?? []
+		data = [
+			...data,
+			{
+				...omit([fields.children], item),
+				[fields.level]: level,
+				[fields.parent]: children.length > 0
+			},
+			...flattenNestedList(children, fields, level + 1)
+		]
+	})
+	return data
+}
+
+/**
+ * Converts a path slug to a value in the menu
+ *
+ * @param {string} slug
+ * @returns {any}
+ */
+export function findValueFromPath(slug, data, fields) {
+	fields = { ...defaultFields, ...fields }
+	const keys = slug.split('/')
+	let items = data
+	let value = null
+	keys.map((key, index) => {
+		const match = items.find((item) => item[fields.key] === key)
+		if (match) {
+			if (index < keys.length - 1) {
+				match[fields.isOpen] = true
+				items = match[fields.children]
+			} else {
+				value = match
+			}
+		}
+	})
+	return value
+}

package/src/ticks.js

@@ -0,0 +1,16 @@
+export function generateTicks(
+	lowerBound,
+	upperBound,
+	minorTickStep,
+	majorTickStep = 1
+) {
+	minorTickStep = minorTickStep ? minorTickStep : upperBound - lowerBound
+	const length = 1 + Math.ceil((upperBound - lowerBound) / minorTickStep)
+	const ticks = Array.from({ length }, (_, i) => ({
+		value: i == length - 1 ? upperBound : lowerBound + minorTickStep * i,
+		major: i == 0 || i == length - 1 || i % majorTickStep == 0
+	}))
+	//.map(({ value, show }) => ({ value, label: show ? value : '', major }))
+
+	return ticks
+}

package/src/types.js

@@ -0,0 +1,24 @@
+/**
+ * Structure to map custom fields for rendering. This is used to identofy the attributes for various purposes.
+ *
+ * @typedef FieldMapping
+ * @property {string} [id='id']              Unique id for the item
+ * @property {string} [text='text']          the text to render
+ * @property {string} [url='url']            a URL
+ * @property {string} [icon='icon']          icon to render
+ * @property {string} [image='image']        the image to render
+ * @property {string} [children='children']  children of the item
+ * @property {string} [summary='summary']
+ * @property {string} [notes='notes']
+ * @property {string} [props='props']
+ * @property {string} [isOpen='_open']       item is open or closed
+ * @property {string} [level='level']        level of item
+ * @property {string} [parent='parent']      item is a parent
+ * @property {string} [isDeleted='_deleted'] item is deleted
+ * @property {FieldMapping} [fields]         Field mapping to be used on children in the next level
+ */
+
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */

package/src/utils.js

@@ -0,0 +1,3 @@
+export function id() {
+	return Math.random().toString(36).substr(2, 9)
+}

package/src/EditableTabs.svelte

@@ -1,31 +0,0 @@
-<script>
-	import TabItems from './TabItems.svelte'
-	import TabItem from './TabItem.svelte'
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let title = null
-	export let allowAdd = false
-	export let allowClose = false
-	export let value = items[0]
-
-	function addTab() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-</script>
-
-<tab-view class="flex flex-col w-full flex-grow {className}">
-	<tabs class="w-full flex flex-shrink-0 flex-row cursor-pointer select-none">
-		{#if title}
-			<p>{title}</p>
-		{/if}
-		<TabItems {items} {fields} {allowClose} bind:value on:close />
-		{#if allowAdd}
-			<TabItem label="+" on:click={addTab} />
-		{/if}
-	</tabs>
-	<content class="flex flex-grow flex-col"><slot /></content>
-</tab-view>

package/src/ListActions.svelte

@@ -1,35 +0,0 @@
-<script>
-	// import Icon from '../layout/Icon.svelte'
-	import { createEventDispatcher } from 'svelte'
-	import { defaultStateIcons } from 'rokkit/utils'
-
-	const dispatch = createEventDispatcher()
-
-	export let search
-	export let searchable = true
-	export let editable = false
-
-	const actionIcons = defaultStateIcons.action
-</script>
-
-<toolbar class="w-full flex flex-row items-center">
-	{#if searchable}
-		<search class="flex flex-grow flex-row">
-			<icon class={actionIcons.search} />
-			<input
-				type="search"
-				bind:value={search}
-				class="rounded-r-full px-3 leading-loose"
-				placeholder="search"
-			/>
-		</search>
-	{/if}
-	{#if editable}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.clear} on:click={() => dispatch('clear')} />
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.remove} on:click={() => dispatch('remove')} />
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<icon class={actionIcons.add} on:click={() => dispatch('add')} />
-	{/if}
-</toolbar>

package/src/NestedPaginator.svelte

@@ -1,64 +0,0 @@
-<script>
-	import { defaultFields, flattenNestedList } from 'rokkit/utils'
-	import { Item, BreadCrumbs } from '@rokkit/molecules'
-	// import { flattenNestedList } from './lib/nested'
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-	export let items
-	export let value
-	export let fields
-	export let using
-
-	let trail
-	let flatList
-
-	function handleNav(event) {
-		let current = flatList.findIndex((item) => item === value)
-		let index = current
-		if (event === 'previous') {
-			while (index > 0 && !flatList[index][fields.key]) {
-				index = index - 1
-			}
-		} else {
-			while (index < flatList.length - 1 && !flatList[index][fields.key]) {
-				index = index + 1
-			}
-		}
-		if (flatList[index][fields.key]) {
-			value = flatList[index]
-			trail = findTrail(flatList, value)
-			dispatch('change', { item: value, trail })
-		}
-	}
-	function findTrail(items, value) {
-		let trail = []
-		let index = items.findIndex((item) => item === value)
-		if (index === -1) return trail
-
-		let level = items[index][fields.level]
-		while (level > 0) {
-			trail.unshift(items[index])
-			index = items.findIndex(
-				(item, i) => i < index && item[fields.level] === level - 1
-			)
-			level = items[index][fields.level]
-		}
-		return trail
-	}
-
-	$: flatList = flattenNestedList(items, fields)
-	$: fields = { ...defaultFields, ...(fields ?? {}) }
-	$: using = { default: Item, ...(using ?? {}) }
-</script>
-
-<pages>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon
-		class="arrow-left cursor-pointer"
-		on:click={() => handleNav('previous')}
-	/>
-	<BreadCrumbs items={trail} {fields} {using} />
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<icon class="arrow-right cursor-pointer" on:click={() => handleNav('next')} />
-</pages>

package/src/Overlay.svelte

@@ -1,4 +0,0 @@
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<overlay class="absolute left-0 top-0 h-screen w-screen" on:click>
-	<slot />
-</overlay>

package/src/PageNavigator.svelte

@@ -1,94 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields, defaultStateIcons } from 'rokkit/utils'
-	import { Icon } from 'rokkit/atoms'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-
-	export let items = []
-	export let value = items[0]
-	export let fields = {}
-	export let numbers = false
-
-	const navigate = defaultStateIcons.navigate
-
-	let previous
-	let next
-
-	function updateOnChange(value, items) {
-		let index = items.findIndex((x) => x == value)
-		if (index == -1) value = items[0]
-		// } else {
-		previous = index > 0 ? items[index - 1] : null
-		next = index < items.length - 1 ? items[index + 1] : null
-		// }
-	}
-
-	function handleClick(item) {
-		if (item) {
-			value = item
-			dispatch('select', value)
-		}
-	}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: updateOnChange(value, items)
-
-	// $: value = items.findIndex((x) => x == value) ? value : items[0]
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<nav-pages class="grid grid-cols-3 select-none {className}" tabindex="0">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span
-		class="flex cursor-pointer items-center"
-		on:click={() => handleClick(previous)}
-		tabIndex={previous ? 0 : -1}
-	>
-		{#if previous}
-			<Icon name={navigate.left} />
-			<p>
-				{#if previous[fields.text]}
-					{previous[fields.text]}
-				{/if}
-			</p>
-		{/if}
-	</span>
-	<span class="flex items-center justify-center">
-		<block class="flex items-center">
-			{#each items as item, index}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<pg
-					class:numbers
-					class:dot={!numbers}
-					class:is-selected={value == item}
-					on:click={() => handleClick(item)}
-					tabindex="0"
-					class="cursor-pointer"
-				>
-					{#if numbers}
-						{index + 1}
-					{/if}
-				</pg>
-			{/each}
-		</block>
-	</span>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span
-		class="flex cursor-pointer items-center justify-end"
-		on:click={() => handleClick(next)}
-		tabIndex={next ? 0 : -1}
-	>
-		{#if next}
-			<p class="text-right">
-				{#if next[fields.text]}
-					{next[fields.text]}
-				{/if}
-			</p>
-			<Icon name={navigate.right} />
-		{/if}
-	</span>
-</nav-pages>

package/src/ResponsiveGrid.svelte

@@ -1,72 +0,0 @@
-<script>
-	import { swipeable, navigable } from 'rokkit/actions'
-	import { fly, fade } from 'svelte/transition'
-	import { cubicInOut } from 'svelte/easing'
-
-	let className = 'three-col'
-	export { className as class }
-	export let items
-	export let small = true
-	export let duration = 400
-	export let easing = cubicInOut
-	export let value
-
-	let previous = -1
-	let activeIndex = 0
-	let direction = 1
-	let width
-
-	function handleNext() {
-		if (activeIndex < items.length - 1) value = items[activeIndex + 1]
-	}
-
-	function handlePrevious() {
-		if (activeIndex > 0) value = items[activeIndex - 1]
-	}
-
-	function activeIndexFromPage(value) {
-		const index = items.findIndex((item) => item === value)
-		return index > -1 ? index : 0
-	}
-
-	$: activeIndex = activeIndexFromPage(value)
-	$: {
-		direction = Math.sign(activeIndex - previous)
-		previous = activeIndex
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<container
-	use:swipeable={{ enabled: small }}
-	on:swipeLeft={handleNext}
-	on:swipeRight={handlePrevious}
-	use:navigable={{ enabled: small }}
-	on:previous={handlePrevious}
-	on:next={handleNext}
-	tabindex={0}
-	class="overflow-hidden {className}"
-	bind:clientWidth={width}
->
-	{#each items as item, index}
-		{@const segmentClass = 'col-' + (index + 1)}
-		{@const props = item.props ?? {}}
-		{#if small && index === activeIndex}
-			<segment
-				class="absolute w-full h-full {segmentClass}"
-				out:fade={{
-					x: -1 * direction * width,
-					duration,
-					easing
-				}}
-				in:fly={{ x: direction * width, duration, easing }}
-			>
-				<svelte:component this={item.component} {...props} />
-			</segment>
-		{:else if !small}
-			<segment class={segmentClass}>
-				<svelte:component this={item.component} {...props} />
-			</segment>
-		{/if}
-	{/each}
-</container>

package/src/Scrollable.svelte

@@ -1,8 +0,0 @@
-<script>
-	let className = ''
-	export { className as class }
-</script>
-
-<scroll class="flex flex-col h-full overflow-scroll {className}">
-	<slot />
-</scroll>

package/src/Searchable.svelte

@@ -1,19 +0,0 @@
-<script>
-	import Scrollable from './Scrollable.svelte'
-
-	export let search = ''
-</script>
-
-<div class="searchable h-full w-full flex flex-col overflow-hidden">
-	<div class="quick-search flex flex-shrink-0 flex-grow flex-col px-4 py-2">
-		<input
-			type="search"
-			bind:value={search}
-			class="rounded-full px-3 leading-loose"
-			placeholder="search"
-		/>
-	</div>
-	<Scrollable>
-		<slot />
-	</Scrollable>
-</div>

package/src/Sidebar.svelte

@@ -1,5 +0,0 @@
-<aside class="sidebar flex flex-col">
-	<slot name="header" />
-	<slot />
-	<slot name="footer" />
-</aside>

package/src/SpinList.svelte

@@ -1,48 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from 'rokkit/utils'
-	import { Item } from '@rokkit/molecules'
-	import { navigable } from 'rokkit/actions'
-	// import { getComponent } from './list'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value
-	let index = -1
-
-	function moveNext() {
-		index = index < items.length - 1 ? index + 1 : 0
-		dispatch('select', items[index])
-	}
-	function moveBack() {
-		index = index > 0 ? index - 1 : items.length - 1
-		dispatch('select', items[index])
-	}
-
-	$: using = { default: Item, ...using }
-	$: fields = { ...defaultFields, ...fields }
-	$: value = index >= 0 ? items[index] : null
-	// $: component = getComponent(value, fields)
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<spin-list class="flex flex-row w-full {className}" tabindex={0}>
-	<input
-		type="text"
-		class="flex flex-grow"
-		bind:value
-		readonly
-		use:navigable
-		on:next={moveNext}
-		on:previous={moveBack}
-	/>
-	<!-- <svelte:component this={component} bind:value={value} {fields} on:change /> -->
-	<square class="right-0 h-full position-absolute">
-		<icon class="i-carbon-chevron-sort" />
-	</square>
-</spin-list>

package/src/SplitPane.svelte

@@ -1,109 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { pannable } from 'rokkit/actions'
-
-	const dispatch = createEventDispatcher()
-
-	export let vertical = false
-	export let limits = [50, 30]
-	export let pos = 70
-	export let styles = ['', '']
-
-	let refs = {}
-
-	function clamp(min, max, value) {
-		return min > value ? min : max < value ? max : value
-	}
-
-	function handlePanMove(event) {
-		const { top, bottom, left, right } = refs.wrapper.getBoundingClientRect()
-		const extents = horizontal ? [left, right] : [top, bottom]
-		let px = clamp(
-			extents[0],
-			extents[1],
-			horizontal ? event.detail.x : event.detail.y
-		)
-		pos = clamp(
-			limits[0],
-			100 - limits[1],
-			(100 * (px - extents[0])) / (extents[1] - extents[0])
-		)
-		dispatch('change', { pos })
-	}
-
-	$: horizontal = !vertical
-	$: side = horizontal ? 'left' : 'top'
-	$: dimension = horizontal ? 'width' : 'height'
-	$: direction = vertical ? 'vertical' : 'horizontal'
-</script>
-
-<div class="wrapper {direction}" bind:this={refs.wrapper}>
-	<div class={styles[0]} style="{dimension}: {pos}%;">
-		<slot name="a" />
-	</div>
-	<div class={styles[1]} style="{dimension}: {100 - pos}%;">
-		<slot name="b" />
-	</div>
-	<span
-		class="wall"
-		use:pannable
-		on:panmove={handlePanMove}
-		style="{side}: calc({pos}% - 8px)"
-	/>
-</div>
-
-<style>
-	.wrapper {
-		position: relative;
-		display: flex;
-		height: 100%;
-		width: 100%;
-	}
-	.wrapper div {
-		flex: 1 1 auto;
-		height: 100%;
-	}
-
-	.horizontal {
-		flex-direction: row;
-	}
-	.vertical {
-		flex-direction: column;
-	}
-	.wall {
-		position: absolute;
-		z-index: 10;
-	}
-	.wall::after {
-		content: '';
-		position: absolute;
-		background-color: var(--bg-800);
-	}
-	.wall:hover {
-		cursor: ew-resize;
-	}
-	.horizontal .wall {
-		padding: 0 8px;
-		width: 0;
-		height: 100%;
-		cursor: ew-resize;
-	}
-	.horizontal .wall::after {
-		left: 8px;
-		top: 0;
-		width: 1px;
-		height: 100%;
-	}
-	.vertical .wall {
-		padding: 8px 0;
-		width: 100%;
-		height: 0;
-		cursor: ns-resize;
-	}
-	.vertical .wall::after {
-		top: 8px;
-		left: 0;
-		width: 100%;
-		height: 1px;
-	}
-</style>

package/src/SplitView.svelte

@@ -1,44 +0,0 @@
-<script>
-	import Splitter from './Splitter.svelte'
-
-	export let vertical = false
-	export let min = 30
-	export let max = 70
-	export let pos = 30
-
-	$: sizes = [pos, 100 - pos]
-
-	$: direction = { direction: vertical ? 'flex-col' : 'flex-row' }
-	$: sizeA = {
-		width: vertical ? 100 : sizes[0],
-		height: vertical ? sizes[0] : 100
-	}
-	$: sizeB = {
-		width: vertical ? 100 : sizes[1],
-		height: vertical ? sizes[1] : 100
-	}
-
-	function onSplitterChange(e) {
-		pos = e.detail.pos - e.detail.offset
-	}
-</script>
-
-<div class="relative h-full w-full flex" style:--direction={direction}>
-	<section style:--sizeA={sizeA} class="flex flex-shrink flex-grow select-none">
-		<slot name="a" />
-	</section>
-	<section style:--sizeB={sizeB} class="flex flex-shrink flex-grow select-none">
-		<slot name="b" />
-	</section>
-	<Splitter {vertical} {min} {max} {pos} on:change={onSplitterChange} />
-</div>
-
-<style>
-	div {
-		flex-direction: var(--direction);
-	}
-	section {
-		width: calc(var(--width) * 1%);
-		height: calc(var(--height) * 1%);
-	}
-</style>

package/src/Splitter.svelte

@@ -1,95 +0,0 @@
-<script>
-	// ensure that parent has position: relative.
-	// on reaching limit remove mouse events.
-	import { createEventDispatcher } from 'svelte'
-	import { pannable } from 'rokkit/actions'
-
-	const dispatch = createEventDispatcher()
-
-	export let vertical = false
-	export let index
-	export let min = 0
-	export let max = 100
-	export let pos = 50
-	export let offset = 0
-
-	let wall
-
-	function clamp(min, max, value) {
-		return min > value ? min : max < value ? max : value
-	}
-
-	function fixLimits() {
-		if (min > max) [min, max] = [max, min]
-		max = clamp(0, 100, max)
-		min = clamp(0, 100, min)
-		pos = clamp(min, max, pos)
-	}
-
-	function handlePanMove(event) {
-		const { top, bottom, left, right } =
-			wall.parentElement.getBoundingClientRect()
-		const extents = horizontal ? [left, right] : [top, bottom]
-		let px = clamp(
-			extents[0],
-			extents[1],
-			horizontal ? event.detail.x : event.detail.y
-		)
-
-		pos = clamp(min, max, (100 * (px - extents[0])) / (extents[1] - extents[0]))
-
-		dispatch('change', { pos, index, offset })
-	}
-	$: fixLimits()
-	$: horizontal = !vertical
-	$: side = horizontal ? 'left' : 'top'
-</script>
-
-<span
-	bind:this={wall}
-	class="wall"
-	class:vertical
-	class:horizontal
-	use:pannable
-	on:panmove={handlePanMove}
-	style="{side}: calc({pos}% - 8px)"
-/>
-
-<style>
-	.wall {
-		position: absolute;
-		z-index: 10;
-	}
-	.wall::after {
-		content: '';
-		position: absolute;
-		background-color: #000;
-	}
-	.wall:hover {
-		cursor: ew-resize;
-	}
-	.horizontal.wall {
-		padding: 0 8px;
-		width: 0;
-		height: 100%;
-		cursor: ew-resize;
-	}
-	.horizontal.wall::after {
-		left: 8px;
-		top: 0;
-		width: 1px;
-		height: 100%;
-	}
-	.vertical.wall {
-		padding: 8px 0;
-		width: 100%;
-		height: 0;
-		cursor: ns-resize;
-	}
-	.vertical.wall::after {
-		top: 8px;
-		left: 0;
-		width: 100%;
-		height: 1px;
-	}
-</style>

package/src/TabItem.svelte

@@ -1,30 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let index = 0
-	export let icons
-	export let selected = false
-	export let removable = false
-
-	$: component = value[fields.component]
-		? using[value[fields.component]] || using.default
-		: using.default
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<tab
-	class="flex flex-row items-center"
-	role="option"
-	aria-selected={selected}
-	data-path={index}
->
-	<svelte:component this={component} {value} {fields} />
-	{#if removable}
-		<icon class={icons.close} on:click={() => dispatch('remove')} />
-	{/if}
-</tab>

package/src/TabItems.svelte

@@ -1,34 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from 'rokkit/utils'
-	import TabItem from './TabItem.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	export let items = []
-	export let fields = {}
-	export let allowClose = false
-	export let value = items[0]
-
-	function activate(item) {
-		value = item
-		dispatch('switch', item)
-	}
-	function closeTab(index) {
-		items[index].isClosed = true
-	}
-	$: fields = { ...defaultFields, ...fields }
-	$: filtered = items.filter((item) => !item.isClosed)
-</script>
-
-{#each filtered as item, index}
-	{@const label = item[fields.text]}
-	<TabItem
-		icon={item[fields.icon]}
-		{label}
-		{allowClose}
-		active={value == item}
-		on:click={() => activate(item)}
-		on:close={() => closeTab(index)}
-	/>
-{/each}