@x33025/sveltely 0.1.9 → 0.1.11

package/dist/components/Library/Floating/Floating.svelte

@@ -303,7 +303,7 @@
 		}
 	}
 
-	function handleOutsideClick(event: MouseEvent) {
+	function handleOutsidePointerDown(event: PointerEvent) {
 		if (!open) return;
 		if (isEventInFloatingTree(event)) return;
 		closePanel();
@@ -316,6 +316,7 @@
 
 	function handlePointerMove(event: MouseEvent) {
 		if (!closeOnPointerLeave) return;
+		if (!parentFloatingId) return;
 		if (!open || !triggerEl || !panelEl) return;
 		if (isEventInFloatingTree(event)) return;
 		if (hasOpenChild(floatingId)) return;
@@ -323,10 +324,10 @@
 		const pointer = { x: event.clientX, y: event.clientY };
 		const triggerRect = triggerEl.getBoundingClientRect();
 		const floatingRect = panelEl.getBoundingClientRect();
-		const safePolygon = getSafePolygon(triggerRect, floatingRect, resolvedAnchor);
 
 		if (isInsideRect(triggerRect, pointer.x, pointer.y)) return;
 		if (isInsideRect(floatingRect, pointer.x, pointer.y)) return;
+		const safePolygon = getSafePolygon(triggerRect, floatingRect, resolvedAnchor);
 		if (pointInPolygon(pointer, safePolygon)) return;
 
 		closePanel();
@@ -343,9 +344,11 @@
 			if (event.type === 'scroll' && isEventInFloatingTree(event)) return;
 			closePanel();
 		};
+		window.addEventListener('pointerdown', handleOutsidePointerDown, true);
 		window.addEventListener('scroll', handleWindowChange, true);
 		window.addEventListener('resize', handleWindowChange);
 		return () => {
+			window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
 			window.removeEventListener('scroll', handleWindowChange, true);
 			window.removeEventListener('resize', handleWindowChange);
 		};
@@ -356,7 +359,8 @@
 			'--sveltely-floating-inset: var(--sveltely-inset);',
 			`top: ${panelCoords.top}px;`,
 			`left: ${panelCoords.left}px;`,
-			`transform: ${panelTransform};`
+			`transform: ${panelTransform};`,
+			'box-shadow: var(--sveltely-shadow);'
 		];
 		if (computedPanelRadius) {
 			declarations.push(`border-radius: ${computedPanelRadius};`);
@@ -368,11 +372,7 @@
 	});
 </script>
 
-<svelte:window
-	onclick={handleOutsideClick}
-	onkeydown={handleEscape}
-	onmousemove={handlePointerMove}
-/>
+<svelte:window onkeydown={handleEscape} onmousemove={handlePointerMove} />
 
 <div
 	bind:this={rootEl}

package/dist/components/Library/Grid/index.d.ts

@@ -1 +1,2 @@
 export { default } from './Grid.svelte';
+export { default as GridItem } from './GridItem.svelte';

package/dist/components/Library/Grid/index.js

@@ -1 +1,2 @@
 export { default } from './Grid.svelte';
+export { default as GridItem } from './GridItem.svelte';

package/dist/components/Library/Sheet/Sheet.svelte

@@ -106,6 +106,7 @@
 	.sheet {
 		border-radius: var(--sveltely-border-radius);
 		background: var(--sveltely-background-color);
+		box-shadow: var(--sveltely-shadow);
 		padding: calc(var(--sveltely-padding-y) * 1.33) calc(var(--sveltely-padding-x) * 1.33);
 	}
 

package/dist/components/Library/TextEditor/TextEditor.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { textEditorStyle, type TextEditorProps } from '../../../style/text-editor';
+
+	type Props = {
+		value?: string;
+		rows?: number;
+		placeholder?: string;
+		spellcheck?: boolean;
+		autosize?: boolean;
+		className?: string;
+		onInput?: (event: Event) => void;
+		onKeyDown?: (event: KeyboardEvent) => void;
+		shouldFocus?: boolean;
+		focusPosition?: number | null;
+		onFocused?: () => void;
+	} & TextEditorProps;
+
+	let {
+		value = '',
+		rows = 1,
+		placeholder,
+		spellcheck,
+		autosize = false,
+		className = '',
+		onInput,
+		onKeyDown,
+		shouldFocus = false,
+		focusPosition = null,
+		onFocused,
+		textAlign
+	}: Props = $props();
+
+	let textarea: HTMLTextAreaElement | undefined;
+	const rootStyle = $derived(textEditorStyle({ textAlign }, 'text-editor'));
+
+	const resize = () => {
+		if (!autosize || !textarea) return;
+		textarea.style.height = 'auto';
+		textarea.style.height = `${textarea.scrollHeight}px`;
+	};
+
+	$effect(() => {
+		value;
+		resize();
+	});
+
+	$effect(() => {
+		if (!shouldFocus || !textarea) return;
+		requestAnimationFrame(() => {
+			if (!textarea) return;
+			textarea.focus();
+			const position = focusPosition ?? textarea.value.length;
+			textarea.setSelectionRange(position, position);
+			onFocused?.();
+		});
+	});
+</script>
+
+<textarea
+	bind:this={textarea}
+	{value}
+	{rows}
+	{placeholder}
+	{spellcheck}
+	style={rootStyle}
+	oninput={(event) => {
+		resize();
+		onInput?.(event);
+	}}
+	onkeydown={(event) => onKeyDown?.(event)}
+	class={`text-editor ${className}`}
+></textarea>
+
+<style>
+	.text-editor {
+		width: 100%;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		outline: none;
+		overflow: hidden;
+		padding: 0;
+		resize: none;
+		text-align: var(--text-editor-text-align, start);
+	}
+
+	.text-editor:where([rows='1']) {
+		min-height: 1lh;
+	}
+</style>

package/dist/components/Library/TextEditor/TextEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type TextEditorProps } from '../../../style/text-editor';
+type Props = {
+    value?: string;
+    rows?: number;
+    placeholder?: string;
+    spellcheck?: boolean;
+    autosize?: boolean;
+    className?: string;
+    onInput?: (event: Event) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    shouldFocus?: boolean;
+    focusPosition?: number | null;
+    onFocused?: () => void;
+} & TextEditorProps;
+declare const TextEditor: import("svelte").Component<Props, {}, "">;
+type TextEditor = ReturnType<typeof TextEditor>;
+export default TextEditor;

package/dist/components/Library/TextEditor/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TextEditor.svelte';

package/dist/components/Library/TextEditor/index.js

@@ -0,0 +1 @@
+export { default } from './TextEditor.svelte';

package/dist/components/Local/ComponentGrid.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
 	import Grid from '../Library/Grid';
-	import GridItem from '../Library/GridItem';
+	import { GridItem } from '../Library/Grid';
 	import HeroCard from './HeroCard.svelte';
 
 	type DemoEntry = {

package/dist/index.d.ts

@@ -16,11 +16,12 @@ export type { ScrollAxisValue } from './style/scroll';
 export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
 export type { TextAlignmentValue, TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
+export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
 export { default as Checkbox } from './components/Library/Checkbox';
 export { default as GlowEffect } from './components/Library/GlowEffect';
 export { default as Grid } from './components/Library/Grid';
-export { default as GridItem } from './components/Library/GridItem';
+export { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
@@ -41,6 +42,7 @@ export { default as Sheet } from './components/Library/Sheet';
 export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';

package/dist/index.js

@@ -8,11 +8,12 @@ export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';
 export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
+export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
 export { default as Checkbox } from './components/Library/Checkbox';
 export { default as GlowEffect } from './components/Library/GlowEffect';
 export { default as Grid } from './components/Library/Grid';
-export { default as GridItem } from './components/Library/GridItem';
+export { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
@@ -32,6 +33,7 @@ export { default as Sheet } from './components/Library/Sheet';
 export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';
 export { default as ChipInput } from './components/Library/ChipInput';

package/dist/style/index.css

@@ -20,6 +20,7 @@
 		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
 		--sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
 		--sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
+		--sveltely-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
 		--sveltely-border-radius-nested: clamp(
 			0px,
 			calc(var(--sveltely-border-radius) - var(--sveltely-nested-inset)),

package/dist/style/layout.d.ts

@@ -39,9 +39,9 @@ export type LayoutProps = {
     align?: LayoutAlignment;
     justify?: LayoutJustification;
 };
-export declare const extractLayoutProps: <T extends Record<PropertyKey, unknown>>(props: T) => {
+export declare const extractLayoutProps: <T extends Record<string, unknown>>(props: T) => {
     layoutProps: Partial<LayoutProps>;
-    restProps: Record<PropertyKey, unknown>;
+    restProps: Record<string, unknown>;
 };
 export declare const layoutStyle: (styles?: LayoutProps) => string;
 export {};

package/dist/style/layout.js

@@ -69,9 +69,8 @@ const justifyValues = {
 export const extractLayoutProps = (props) => {
     const layoutProps = {};
     const restProps = {};
-    for (const key of Reflect.ownKeys(props)) {
-        const value = props[key];
-        if (typeof key === 'string' && LAYOUT_PROP_KEYS.has(key)) {
+    for (const [key, value] of Object.entries(props)) {
+        if (LAYOUT_PROP_KEYS.has(key)) {
             layoutProps[key] = value;
             continue;
         }

package/dist/style/loader.d.ts

@@ -2,8 +2,8 @@ import type { LoaderOptions } from '../actions/loader';
 export type LoaderProps = {
     loader?: LoaderOptions;
 };
-export declare const extractLoaderProps: <T extends Record<PropertyKey, unknown>>(props: T) => {
+export declare const extractLoaderProps: <T extends Record<string, unknown>>(props: T) => {
     loaderProps: LoaderProps;
-    restProps: Record<PropertyKey, unknown>;
+    restProps: Record<string, unknown>;
 };
 export declare const resolveLoaderOptions: (props?: LoaderProps) => LoaderOptions;

package/dist/style/loader.js

@@ -2,9 +2,8 @@ const LOADER_PROP_KEYS = new Set(['loader']);
 export const extractLoaderProps = (props) => {
     const loaderProps = {};
     const restProps = {};
-    for (const key of Reflect.ownKeys(props)) {
-        const value = props[key];
-        if (typeof key === 'string' && LOADER_PROP_KEYS.has(key)) {
+    for (const [key, value] of Object.entries(props)) {
+        if (LOADER_PROP_KEYS.has(key)) {
             loaderProps[key] = value;
             continue;
         }

package/dist/style/surface.d.ts

@@ -10,8 +10,8 @@ export type StyleProps = {
     color?: string;
 };
 export type SurfaceStyles = StyleProps;
-export declare const extractStyleProps: <T extends Record<PropertyKey, unknown>>(props: T) => {
+export declare const extractStyleProps: <T extends Record<string, unknown>>(props: T) => {
     styleProps: Partial<StyleProps>;
-    restProps: Record<PropertyKey, unknown>;
+    restProps: Record<string, unknown>;
 };
 export declare const surfaceStyle: (styles?: SurfaceStyles, prefix?: string) => string;

package/dist/style/surface.js

@@ -19,9 +19,8 @@ const pushVar = (declarations, name, value) => {
 export const extractStyleProps = (props) => {
     const styleProps = {};
     const restProps = {};
-    for (const key of Reflect.ownKeys(props)) {
-        const value = props[key];
-        if (typeof key === 'string' && STYLE_PROP_KEYS.has(key)) {
+    for (const [key, value] of Object.entries(props)) {
+        if (STYLE_PROP_KEYS.has(key)) {
             styleProps[key] = value;
             continue;
         }