storyloco 1.0.2 → 1.1.0

package/README.md

@@ -9,6 +9,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **🎬 Mux Video** - Upload, manage, and configure videos with Mux integration
 - **📝 Heading** - Simple heading editor with level selection (H1-H6)
 - **🎨 Theme** - Color theme selector with visual previews
+- **🔗 Link** - Link editor with support for internal, external, email, and asset links
 
 ### Shared Components
 
@@ -33,15 +34,16 @@ bun add storyloco
 // Import specific plugin types
 import type { Video } from 'storyloco/mux'
 import type { Heading } from 'storyloco/heading'
+import type { Link } from 'storyloco/link'
 
 // Or import everything
-import type { Video, Heading } from 'storyloco'
+import type { Video, Heading, Link } from 'storyloco'
 ```
 
 ### Use Shared Components
 
 ```typescript
-import { Input, Label, Switch, Skeleton } from 'storyloco/shared'
+import { Input, Label, Switch, Skeleton, Select, Separator } from 'storyloco/shared'
 import { cn } from 'storyloco/shared/utils'
 ```
 
@@ -74,6 +76,7 @@ storyloco/
 │   ├── mux/          # Video upload & management plugin
 │   ├── heading/      # Heading editor plugin
 │   ├── theme/        # Theme selector plugin
+│   ├── link/         # Link editor plugin
 │   └── shared/       # UI component library
 ├── src/
 │   └── index.ts      # Type exports
@@ -126,6 +129,8 @@ The shared package provides a comprehensive set of UI components:
 - `Input` - Text input with proper styling
 - `Label` - Accessible form labels
 - `Switch` - Toggle switch component
+- `Select` - Select component
+- `Separator` - Separator component
 
 ### Display Components
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "storyloco",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
 	"keywords": [
 		"storyblok",

package/packages/heading/src/app.svelte

@@ -10,22 +10,22 @@
 	let content: Heading = $state({ text: '', level: 1 })
 
 	onMount(() => {
-		createFieldPlugin({
+		createFieldPlugin<Heading>({
 			enablePortalModal: true,
 			validateContent: (content) => {
 				if (typeof content !== 'object' || content === null) {
-					return { content: { text: '', level: 1 } as Heading }
+					return { content: { text: '', level: 1 } }
 				}
 
 				const validated = content as Heading
+
 				// ensure level is one of the allowed values
 				if (![1, 2, 3, 4, 5, 6].includes(validated.level)) {
 					validated.level = 1
 				}
+
 				// ensure text is a string
-				if (typeof validated.text !== 'string') {
-					validated.text = ''
-				}
+				if (typeof validated.text !== 'string') validated.text = ''
 
 				return { content: validated }
 			},
@@ -46,7 +46,7 @@
 	<fieldset class="flex gap-2">
 		<Input class="flex-1" bind:value={content.text} oninput={update} />
 		<select
-			class="rounded outline-none focus-visible:border-ring border-input bg-white border dark:bg-input/30"
+			class="rounded outline-none focus-visible:border-ring border-input bg-white border dark:bg-input/30 min-h-11.5"
 			bind:value={() => content.level, (v) => (content.level = Number(v) as Heading['level'])}
 			onchange={update}
 		>

package/packages/mux/src/app.svelte

@@ -22,9 +22,7 @@
 
 	type MuxAsset = Mux.Video.Assets.Asset
 	type Plugin = FieldPluginResponse<Video | null>
-</script>
 
-<script lang="ts">
 	let content: Video | null = $state(null)
 	let plugin: Plugin | null = $state(null)
 	let assets: Array<MuxAsset> | null = $state(null)
@@ -40,18 +38,8 @@
 	})
 
 	onMount(() => {
-		createFieldPlugin({
+		createFieldPlugin<Video>({
 			enablePortalModal: true,
-			validateContent: (c) => {
-				if (typeof c !== 'object' || c === null) {
-					return { content: null }
-				}
-
-				// Update local state
-				content = c as Video
-
-				return { content: c }
-			},
 			onUpdateState: (state) => {
 				plugin = state as Plugin
 			},
@@ -184,7 +172,7 @@
 
 	function date(date: string): string {
 		const d = new Date(Number(date) * 1000)
-		return format_elapse(d) || format_date('{MMM} {d}, {YYYY}', d)
+		return format_elapse(d) || format_date('{MMM} {D}, {YYYY}', d)
 	}
 
 	const is_modal_open = $derived.by(() => plugin?.type === 'loaded' && plugin.data.isModalOpen)
@@ -488,7 +476,7 @@
 					<div class="grid gap-2">
 						<Label for="preload">Preload</Label>
 						<select
-							class="bg-background border rounded min-h-10 outline-none focus-visible:border-ring transition-colors w-full"
+							class="bg-background border rounded min-h-11.5 outline-none focus-visible:border-ring transition-colors w-full"
 							bind:value={content.preload}
 							onchange={(event) => {
 								if (!event.target || !(event.target instanceof HTMLSelectElement)) return

package/packages/shared/dist/components/ui/input/input.svelte

@@ -24,7 +24,7 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-11.5 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			classname
@@ -39,7 +39,7 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'border-input bg-white selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input bg-white selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-11.5 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring',
 			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 			classname

package/packages/shared/dist/components/ui/select/index.d.ts

@@ -0,0 +1,11 @@
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, };

package/packages/shared/dist/components/ui/select/index.js

@@ -0,0 +1,14 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+const Root = SelectPrimitive.Root;
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, 
+//
+Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, };

package/packages/shared/dist/components/ui/select/select-content.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/packages/shared/dist/components/ui/select/select-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+};
+declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/packages/shared/dist/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>

package/packages/shared/dist/components/ui/select/select-group-heading.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const SelectGroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
+export default SelectGroupHeading;

package/packages/shared/dist/components/ui/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />

package/packages/shared/dist/components/ui/select/select-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectGroup: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+type SelectGroup = ReturnType<typeof SelectGroup>;
+export default SelectGroup;

package/packages/shared/dist/components/ui/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/packages/shared/dist/components/ui/select/select-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectItem: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/packages/shared/dist/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/packages/shared/dist/components/ui/select/select-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {};
+declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectLabel = ReturnType<typeof SelectLabel>;
+export default SelectLabel;

package/packages/shared/dist/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/packages/shared/dist/components/ui/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
+export default SelectScrollDownButton;

package/packages/shared/dist/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/packages/shared/dist/components/ui/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
+export default SelectScrollUpButton;

package/packages/shared/dist/components/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui'
+	import { Separator } from '../separator/index.js'
+	import { cn } from '../../../utils.js'
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props()
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/select/select-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;

package/packages/shared/dist/components/ui/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui'
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
+	import { cn, type WithoutChild } from '../../../utils.js'
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: 'sm' | 'default'
+	} = $props()
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-11.5 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

package/packages/shared/dist/components/ui/select/select-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+};
+declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

package/packages/shared/dist/components/ui/separator/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./separator.svelte";
+export { Root, Root as Separator, };

package/packages/shared/dist/components/ui/separator/index.js

@@ -0,0 +1,4 @@
+import Root from "./separator.svelte";
+export { Root, 
+//
+Root as Separator, };

package/packages/shared/dist/components/ui/separator/separator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui'
+	import { cn } from '../../../utils.js'
+
+	let { ref = $bindable(null), class: classname, ...rest }: SeparatorPrimitive.RootProps = $props()
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator"
+	class={cn(
+		'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+		classname
+	)}
+	{...rest}
+/>

package/packages/shared/dist/components/ui/separator/separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/packages/shared/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Input } from './components/ui/input/index.js';
 export { Label } from './components/ui/label/index.js';
+export * as Select from './components/ui/select/index.js';
+export { Separator } from './components/ui/separator/index.js';
 export { Skeleton } from './components/ui/skeleton/index.js';
 export { Switch } from './components/ui/switch/index.js';
 export { setup } from './setup.js';

package/packages/shared/dist/index.js

@@ -1,6 +1,8 @@
 // UI Components
 export { Input } from './components/ui/input/index.js';
 export { Label } from './components/ui/label/index.js';
+export * as Select from './components/ui/select/index.js';
+export { Separator } from './components/ui/separator/index.js';
 export { Skeleton } from './components/ui/skeleton/index.js';
 export { Switch } from './components/ui/switch/index.js';
 // Global

package/packages/shared/dist/utils.js

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { format_date, format_elapse } from 'kitto';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/packages/theme/src/app.svelte

@@ -17,16 +17,9 @@
 	let content: string | undefined = $state()
 
 	onMount(() => {
-		createFieldPlugin({
+		createFieldPlugin<string>({
 			enablePortalModal: true,
-			validateContent: (content) => {
-				if (content === null || typeof content !== 'string') {
-					return { content: undefined }
-				}
-
-				return { content }
-			},
-			async onUpdateState(state) {
+			onUpdateState(state) {
 				plugin = state as Plugin
 			},
 		})

package/src/index.ts

@@ -1,4 +1,5 @@
 // Re-export types from all packages
 export type { Video } from '../packages/mux/types'
 export type { Heading } from '../packages/heading/types'
+export type { Link, AssetLink, ExternalLink, EmailLink, StoryLink, Rel, Target } from '../packages/link/types'
 // Add more exports as you create more packages