@peteai/presentation-editor 0.0.8 → 0.0.10

package/dist/components/editor/types.d.ts

@@ -1,8 +1,8 @@
 import { type JSONContent } from '@tiptap/core';
-import type { HTMLAttributes } from 'svelte/elements';
+type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type ActiveSidebarTab = 'text' | 'uploads';
 type Colored = 'background' | 'text' | 'border';
-export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color`;
+export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color` | 'transition';
 export type Fonts = {
     [key: string]: {
         type: string;
@@ -63,6 +63,32 @@ export type Gradient = {
     colors: string[];
 };
 export type BackgroundImage = Pick<ImageLayer, 'opacity' | 'scale' | 'image' | 'imageRotate' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
+interface BasePageTransition {
+    type: string;
+    duration: number;
+}
+export type PageTransitionDirection = 'left' | 'right' | 'up' | 'down';
+export type PageTransitionFlow = 'in' | 'out';
+export interface DirectionPageTransition extends BasePageTransition {
+    direction: PageTransitionDirection;
+}
+interface FadePageTransition extends BasePageTransition {
+    type: 'fade';
+}
+interface SlidePageTransition extends DirectionPageTransition {
+    type: 'slide';
+}
+export interface CircleWipePageTransition extends BasePageTransition {
+    type: 'circleWipe';
+    flow: PageTransitionFlow;
+}
+interface LineWipePageTransition extends DirectionPageTransition {
+    type: 'lineWipe';
+}
+interface StackPageTransition extends DirectionPageTransition {
+    type: 'stack';
+}
+export type PageTransition = FadePageTransition | SlidePageTransition | CircleWipePageTransition | LineWipePageTransition | StackPageTransition;
 export type Page = {
     id: string;
     backgroundColor: string | null;
@@ -71,7 +97,9 @@ export type Page = {
     layers: Layer[];
     sortOrder: number;
     locked: boolean;
+    transition: PageTransition | null;
 };
+export type PageInput = OptionalKeys<Page, "transition">;
 export type ActiveAction = {
     id: string;
     type: string;
@@ -267,15 +295,21 @@ interface BaseOptions {
 }
 interface MultipleModeOption extends BaseOptions {
     mode?: 'multiple';
-    pages?: Page[];
+    pages?: PageInput[];
 }
 interface SingleModeOption extends BaseOptions {
     mode: 'single';
-    page?: Page;
+    page?: PageInput;
 }
 export type EditorOptions = MultipleModeOption | SingleModeOption;
-export interface PageOptions extends HTMLAttributes<HTMLDivElement> {
-    page: Page;
+export interface DesignOptions {
+    pages: PageInput[];
+    thumbScale?: number;
+    fonts?: Fonts;
+    loadFont?: (family: string) => Promise<void>;
+}
+export interface PageOptions {
+    page: PageInput;
     thumbScale?: number;
     fonts?: Fonts;
     loadFont?: (family: string) => Promise<void>;

package/dist/components/editor/utils.d.ts

@@ -1,9 +1,9 @@
-import type { Gradient, Page } from './types.js';
+import type { Gradient, PageInput, Page } from './types.js';
 export declare const arraysEqual: (a: unknown[], b: unknown[]) => boolean;
 export declare const checkImage: (url: string) => Promise<HTMLImageElement>;
 export declare function gradientToString(gradient: Gradient): string;
 export declare function stringToGradient(value: string): Gradient;
-export declare const getPages: () => Page[];
+export declare const getPages: () => PageInput[];
 export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlign, uppercase, bold, italic, }: {
     text: string;
     fontSize?: number;

package/dist/components/editor/utils.js

@@ -426,6 +426,26 @@ const generateBackgroundColor = () => {
         return randomHexColor();
     }
 };
+const generateTransition = () => {
+    const duration = Math.floor(Math.random() * 1000) + 1000;
+    const transitions = [
+        { type: 'fade', duration },
+        { type: 'slide', duration, direction: 'left' },
+        { type: 'circleWipe', duration, flow: 'in' },
+        { type: 'lineWipe', duration, direction: 'left' },
+        { type: 'stack', duration, direction: 'down' },
+    ];
+    const transition = transitions[Math.floor(Math.random() * transitions.length)];
+    if ('direction' in transition) {
+        const directions = ['left', 'right', 'up', 'down'];
+        transition.direction = directions[Math.floor(Math.random() * directions.length)];
+    }
+    if ('flow' in transition) {
+        const flows = ['in', 'out'];
+        transition.flow = flows[Math.floor(Math.random() * flows.length)];
+    }
+    return transition;
+};
 export const cognitionPageToJson = (page) => {
     let sortOrder = 1;
     const layers = [];
@@ -474,5 +494,6 @@ export const cognitionPageToJson = (page) => {
         backgroundLocked: false,
         locked: false,
         layers,
+        transition: generateTransition(),
     };
 };

package/dist/components/ui/button/button.svelte

@@ -23,6 +23,7 @@
 				lg: 'h-11 rounded-md px-8',
 				icon: 'h-10 w-10',
 				'icon-xs': 'h-8 w-8',
+				vague: '',
 			},
 			active: {
 				true: '',
@@ -32,7 +33,7 @@
 			{
 				active: true,
 				variant: 'outline',
-				class: 'border-2 border-primary',
+				class: 'border-primary',
 			},
 			{
 				active: true,

package/dist/components/ui/button/button.svelte.d.ts

@@ -18,6 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;
@@ -39,6 +40,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;
@@ -60,6 +62,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
         'icon-xs': string;
+        vague: string;
     };
     active: {
         true: string;

package/dist/components/ui/color-picker/color-picker-alpha-grid.svelte

@@ -21,7 +21,8 @@
 <style>
 	.alpha-grid {
 		background-color: hsl(var(--background));
-		background-image: linear-gradient(
+		background-image:
+			linear-gradient(
 				-45deg,
 				hsl(var(--foreground)) 25%,
 				transparent 25%,

package/dist/components/ui/color-picker/color-picker.svelte

@@ -237,7 +237,7 @@
 				style:background="linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))"
 			>
 				<div
-					class="border-primary relative m-0 -translate-x-1/2 -translate-y-1/2 rounded-full p-0"
+					class="relative m-0 -translate-x-1/2 -translate-y-1/2 rounded-full border-primary p-0"
 					style:width="16px"
 					style:height="16px"
 					style:border="2px solid #fffb"
@@ -275,7 +275,7 @@
 				></span>
 				<Slider.Thumb
 					index={0}
-					class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+					class="border-border-input hover:border-dark-40 block size-2 cursor-pointer rounded-full border bg-background shadow transition-colors focus-visible:outline-none active:scale-150 dark:bg-foreground dark:shadow-card"
 				/>
 			{/snippet}
 		</Slider.Root>
@@ -294,7 +294,7 @@
 				{#snippet children()}
 					<AlphaGrid
 						size={8}
-						class="shadow-inner-1 relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full"
+						class="relative -mx-1 h-3 w-full grow cursor-pointer overflow-hidden rounded-full shadow-inner-1"
 					>
 						<div
 							class="h-full w-full rounded-full"
@@ -303,7 +303,7 @@
 					</AlphaGrid>
 					<Slider.Thumb
 						index={0}
-						class="border-border-input bg-background hover:border-dark-40 dark:bg-foreground dark:shadow-card block size-2 cursor-pointer rounded-full border shadow transition-colors focus-visible:outline-none active:scale-150"
+						class="border-border-input hover:border-dark-40 block size-2 cursor-pointer rounded-full border bg-background shadow transition-colors focus-visible:outline-none active:scale-150 dark:bg-foreground dark:shadow-card"
 					/>
 				{/snippet}
 			</Slider.Root>
@@ -327,9 +327,9 @@
 					</AlphaGrid>
 				</div>
 			</div>
-			<div class="text-muted-foreground pointer-events-none absolute left-10 text-sm">#</div>
+			<div class="pointer-events-none absolute left-10 text-sm text-muted-foreground">#</div>
 			<Input
-				class={cn('pl-12', invalidHex && 'ring-destructive ring-1')}
+				class={cn('pl-12', invalidHex && 'ring-1 ring-destructive')}
 				value={hexValue.slice(0, 7).replace('#', '')}
 				oninput={onHexInput}
 				onchange={onHexChange}

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-content.svelte

@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		portalProps,
+		preventScroll = false,
 		class: className,
 		...restProps
 	}: ContextMenuPrimitive.ContentProps & {
@@ -15,8 +16,9 @@
 <ContextMenuPrimitive.Portal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		bind:ref
+		{preventScroll}
 		class={cn(
-			'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
+			'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 			className,
 		)}
 		{...restProps}

package/dist/components/ui/context-menu/context-menu-group-heading.svelte

@@ -14,6 +14,6 @@
 
 <ContextMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-item.svelte

@@ -15,7 +15,7 @@
 <ContextMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <ContextMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-separator.svelte

@@ -11,6 +11,6 @@
 
 <ContextMenuPrimitive.Separator
 	bind:ref
-	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-shortcut.svelte

@@ -14,7 +14,7 @@
 <kbd
 	bind:this={ref}
 	class={cn(
-		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		'ml-auto rounded-sm bg-muted px-2 py-1 font-sans text-xs tracking-widest text-muted-foreground',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-content.svelte

@@ -12,7 +12,7 @@
 <ContextMenuPrimitive.SubContent
 	bind:ref
 	class={cn(
-		'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-none',
+		'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground data-[disabled]:opacity-50',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dialog/dialog-content.svelte

@@ -7,6 +7,7 @@
 
 	let {
 		ref = $bindable(null),
+		preventScroll = false,
 		class: className,
 		portalProps,
 		children,
@@ -21,15 +22,16 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		{preventScroll}
 		class={cn(
-			'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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+			'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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
 			className,
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		preventScroll = false,
 		class: className,
 		...restProps
 	}: DropdownMenuPrimitive.ContentProps = $props();
@@ -13,6 +14,7 @@
 <DropdownMenuPrimitive.Content
 	bind:ref
 	{sideOffset}
+	{preventScroll}
 	class={cn(
 		'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 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none',
 		className,

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -14,7 +14,7 @@
 <kbd
 	bind:this={ref}
 	class={cn(
-		'bg-muted text-muted-foreground ml-auto rounded-sm px-2 py-1 font-sans text-xs tracking-widest',
+		'ml-auto rounded-sm bg-muted px-2 py-1 font-sans text-xs tracking-widest text-muted-foreground',
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[state=open]:bg-accent data-[highlighted]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className,
 	)}

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

@@ -14,7 +14,7 @@
 <input
 	bind:this={ref}
 	class={cn(
-		'border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 		className,
 	)}
 	bind:value

package/dist/components/ui/slider/slider.svelte

@@ -28,16 +28,16 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{#snippet children({ thumbs })}
 		<span
 			data-orientation={orientation}
-			class="bg-secondary relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
+			class="relative grow overflow-hidden rounded-full bg-secondary data-[orientation='horizontal']:h-2 data-[orientation='vertical']:h-full data-[orientation='horizontal']:w-full data-[orientation='vertical']:w-2"
 		>
 			<SliderPrimitive.Range
-				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+				class="absolute bg-primary data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
 			/>
 		</span>
 		{#each thumbs as thumb (thumb)}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

package/dist/components/ui/tabs/index.d.ts

@@ -1,6 +1,6 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 declare const Root: import("svelte").Component<TabsPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger, };

package/dist/components/ui/tabs/index.js

@@ -1,7 +1,7 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
+import { Tabs as TabsPrimitive } from 'bits-ui';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
 const Root = TabsPrimitive.Root;
 export { Root, Content, List, Trigger, 
 //

package/dist/components/ui/tabs/tabs-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,8 @@
 <TabsPrimitive.Content
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
+		'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

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

package/dist/components/ui/tabs/tabs-list.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
-		className
+		'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-list.svelte.d.ts

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

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,8 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-		className
+		'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+		className,
 	)}
 	{...restProps}
 />

package/dist/components/ui/tabs/tabs-trigger.svelte.d.ts

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

package/dist/transitions/circleWipe.d.ts

@@ -0,0 +1,10 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface CircleWipeParams {
+    duration?: number;
+    easing?: (t: number) => number;
+    x?: string;
+    y?: string;
+    maxRadius?: number;
+    direction?: 'in' | 'out';
+}
+export declare function circleWipe(_node: HTMLElement, { duration, easing, x, y, maxRadius, direction, }?: CircleWipeParams): TransitionConfig;

package/dist/transitions/circleWipe.js

@@ -0,0 +1,16 @@
+export function circleWipe(_node, { duration = 600, easing = (t) => t, x = '50%', y = '50%', maxRadius = 100, direction = 'in', } = {}) {
+    return {
+        duration,
+        easing,
+        css: (t, u) => {
+            const r = (direction === 'in' ? u : t) * maxRadius;
+            const innerColor = direction === 'in' ? 'rgba(0,0,0,1)' : 'rgba(0,0,0,0)';
+            const outerColor = direction === 'in' ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,1)';
+            const mask = `radial-gradient(circle at ${x} ${y}, ${outerColor} ${r}%, ${innerColor} ${r}%)`;
+            return `
+        mask: ${mask};
+        -webkit-mask: ${mask};
+      `;
+        },
+    };
+}

package/dist/transitions/lineWipe.d.ts

@@ -0,0 +1,9 @@
+import type { TransitionConfig } from 'svelte/transition';
+export interface LineWipeParams {
+    duration?: number;
+    easing?: (t: number) => number;
+    x?: string;
+    y?: string;
+    direction?: 'left' | 'right' | 'up' | 'down';
+}
+export declare function lineWipe(_node: HTMLElement, { duration, easing, direction }?: LineWipeParams): TransitionConfig;

package/dist/transitions/lineWipe.js

@@ -0,0 +1,17 @@
+export function lineWipe(_node, { duration = 600, easing = (t) => t, direction = 'left' } = {}) {
+    return {
+        duration,
+        easing,
+        css: (t) => {
+            const offset = t * 100;
+            const angle = { left: 270, up: 0, right: 90, down: 180 }[direction];
+            const startColor = 'rgba(0,0,0,1)';
+            const endColor = 'rgba(0,0,0,0)';
+            const mask = `linear-gradient(${angle}deg, ${startColor} ${offset}%, ${endColor} ${offset}%)`;
+            return `
+        mask: ${mask};
+        -webkit-mask: ${mask};
+      `;
+        },
+    };
+}