@x33025/sveltely 0.1.23 → 0.1.25

package/dist/components/Library/ArticleEditor/Blocks/Table.svelte

@@ -1,7 +1,19 @@
 <script lang="ts">
 	import { Plus, Trash2 } from '@lucide/svelte';
+	import Grid from '../../Grid';
+	import HStack from '../../HStack';
+	import Spacer from '../../Spacer';
+	import SveltelyTable from '../../Table';
+	import { Column as TableColumn } from '../../Table';
+	import VStack from '../../VStack';
 	import type { BlockDraft } from '../types.js';
 
+	type EditorTableRow = {
+		id: string;
+		rowIndex: number;
+		cells: string[];
+	};
+
 	let { block, onUpdateHeader, onUpdateCell, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow } =
 		$props<{
 			block: BlockDraft;
@@ -17,6 +29,14 @@
 		Math.max((block.columns ?? []).length, block.rows?.[0]?.length ?? 0, 1)
 	);
 	const rowCount = $derived(Math.max((block.rows ?? []).length, 1));
+	const columnIndexes = $derived(Array.from({ length: columnCount }, (_, index) => index));
+	const tableRows = $derived<EditorTableRow[]>(
+		Array.from({ length: rowCount }, (_, rowIndex) => ({
+			id: `${block.id}-${rowIndex}`,
+			rowIndex,
+			cells: block.rows?.[rowIndex] ?? []
+		}))
+	);
 
 	const columnHasContent = (columnIndex: number) =>
 		Boolean(block.columns?.[columnIndex]?.trim()) ||
@@ -48,227 +68,168 @@
 	};
 </script>
 
-<div class="article-block-table-shell">
-	<div class="article-block-table-scroll">
-		<table class="article-block-table">
-			{#if (block.columns ?? []).length > 0}
-				<thead class="article-block-table-head">
-					<tr>
-						{#each block.columns ?? [] as column, columnIndex}
-							<th class="article-block-table-header">
-								<input
-									class="article-block-table-header-input"
-									value={column}
-									oninput={(event) =>
-										onUpdateHeader(
-											block.id,
-											columnIndex,
-											(event.currentTarget as HTMLInputElement).value
-										)}
-								/>
-								<button
-									type="button"
-									aria-label="Remove column"
-									disabled={columnCount <= 1}
-									class="article-block-table-remove-column"
-									onclick={() => removeColumn(columnIndex)}
-								>
-									<Trash2 size={14} />
-								</button>
-							</th>
-						{/each}
-					</tr>
-				</thead>
-			{/if}
-			<tbody>
-				{#each block.rows ?? [] as row, rowIndex}
-					<tr class="article-block-table-row">
-						{#each row as cell, cellIndex}
-							<td class="article-block-table-cell">
-								<textarea
-									rows="2"
-									class="article-block-table-cell-input"
-									value={cell}
-									oninput={(event) =>
-										onUpdateCell(
-											block.id,
-											rowIndex,
-											cellIndex,
-											(event.currentTarget as HTMLTextAreaElement).value
-										)}
-								></textarea>
-							</td>
-						{/each}
-						<td class="article-block-table-row-control">
+<VStack width="100%" gap={0}>
+	<Grid columns="minmax(0, 1fr) 2.25rem" gap={0}>
+		<SveltelyTable data={tableRows} borderRadius={0} emptyLabel="No rows">
+			{#each columnIndexes as columnIndex (columnIndex)}
+				<TableColumn
+					key={`column-${columnIndex}`}
+					label={block.columns?.[columnIndex] || `Column ${columnIndex + 1}`}
+					minWidth={180}
+				>
+					{#snippet header()}
+						<HStack width="100%" gap={5}>
+							<input
+								class="article-block-table-header-input"
+								value={block.columns?.[columnIndex] ?? ''}
+								aria-label={`Column ${columnIndex + 1} header`}
+								oninput={(event) =>
+									onUpdateHeader(
+										block.id,
+										columnIndex,
+										(event.currentTarget as HTMLInputElement).value
+									)}
+							/>
+							<Spacer />
 							<button
 								type="button"
-								aria-label="Remove row"
-								disabled={rowCount <= 1}
-								class="article-block-table-remove-row"
-								onclick={() => removeRow(rowIndex)}
+								aria-label="Remove column"
+								disabled={columnCount <= 1}
+								class="article-block-table-remove"
+								onclick={() => removeColumn(columnIndex)}
 							>
 								<Trash2 size={14} />
 							</button>
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-	<button
-		type="button"
-		aria-label="Add column"
-		class="article-block-table-add-column"
-		onclick={() => onAddColumn(block.id)}
-	>
-		<Plus size={16} />
-	</button>
-	<button
-		type="button"
-		aria-label="Add row"
-		class="article-block-table-add-row"
-		onclick={() => onAddRow(block.id)}
-	>
-		<Plus size={16} />
-	</button>
-	<div class="article-block-table-corner"></div>
-</div>
+						</HStack>
+					{/snippet}
+
+					{#snippet cell(row: EditorTableRow)}
+						<textarea
+							rows="2"
+							class="article-block-table-cell-input"
+							value={row.cells[columnIndex] ?? ''}
+							aria-label={`Row ${row.rowIndex + 1}, column ${columnIndex + 1}`}
+							oninput={(event) =>
+								onUpdateCell(
+									block.id,
+									row.rowIndex,
+									columnIndex,
+									(event.currentTarget as HTMLTextAreaElement).value
+								)}
+						></textarea>
+					{/snippet}
+				</TableColumn>
+			{/each}
+
+			<TableColumn key="row-actions" label="" width={44} minWidth={44} alignment="center">
+				{#snippet cell(row: EditorTableRow)}
+					<button
+						type="button"
+						aria-label="Remove row"
+						disabled={rowCount <= 1}
+						class="article-block-table-remove"
+						onclick={() => removeRow(row.rowIndex)}
+					>
+						<Trash2 size={14} />
+					</button>
+				{/snippet}
+			</TableColumn>
+		</SveltelyTable>
+
+		<button
+			type="button"
+			aria-label="Add column"
+			class="article-block-table-add article-block-table-add-column"
+			onclick={() => onAddColumn(block.id)}
+		>
+			<Plus size={16} />
+		</button>
+	</Grid>
+
+	<Grid columns="minmax(0, 1fr) 2.25rem" gap={0}>
+		<button
+			type="button"
+			aria-label="Add row"
+			class="article-block-table-add article-block-table-add-row"
+			onclick={() => onAddRow(block.id)}
+		>
+			<Plus size={16} />
+		</button>
+		<div class="article-block-table-corner"></div>
+	</Grid>
+</VStack>
 
 <style>
-	.article-block-table-shell {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) 2.25rem;
-		grid-template-rows: auto 2.25rem;
-	}
-
-	.article-block-table-scroll {
-		overflow-x: auto;
-		border: 1px solid rgba(0, 0, 0, 0.08);
-	}
-
-	.article-block-table {
-		min-width: 100%;
-		border-collapse: collapse;
-		text-align: left;
-		font-size: 0.875rem;
-	}
-
-	.article-block-table-head {
-		background: #fafaf9;
-	}
-
-	.article-block-table-header {
-		position: relative;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-		padding: 0.75rem;
-	}
-
-	.article-block-table-header-input {
+	.article-block-table-header-input,
+	.article-block-table-cell-input {
 		width: 100%;
+		min-width: 0;
 		border: 0;
 		background: transparent;
-		padding-right: 2rem;
-		font-weight: 600;
+		color: inherit;
 		outline: none;
 	}
 
-	.article-block-table-row {
-		border-top: 1px solid rgba(0, 0, 0, 0.08);
-	}
-
-	.article-block-table-cell {
-		padding: 0.75rem;
-		vertical-align: top;
+	.article-block-table-header-input {
+		font-weight: 600;
 	}
 
 	.article-block-table-cell-input {
-		width: 100%;
 		resize: none;
-		border: 0;
-		background: transparent;
-		outline: none;
 	}
 
-	.article-block-table-row-control {
-		width: 2.25rem;
-		padding: 0.5rem 0.25rem;
-		vertical-align: middle;
-	}
-
-	.article-block-table-remove-column,
-	.article-block-table-remove-row,
-	.article-block-table-add-column,
-	.article-block-table-add-row {
-		display: flex;
+	.article-block-table-remove,
+	.article-block-table-add {
+		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		border: 0;
 		background: transparent;
-		color: #a1a1aa;
+		color: var(--sveltely-text-tertiary-color);
 		transition:
 			background-color 150ms,
 			color 150ms,
 			opacity 150ms;
 	}
 
-	.article-block-table-remove-column {
-		position: absolute;
-		top: 50%;
-		right: 0.5rem;
-		width: 1.5rem;
-		height: 1.5rem;
-		transform: translateY(-50%);
-		opacity: 0;
-	}
-
-	.article-block-table-remove-row {
+	.article-block-table-remove {
 		width: 1.75rem;
 		height: 1.75rem;
-		opacity: 0;
+		flex: 0 0 1.75rem;
 	}
 
-	.article-block-table-header:hover .article-block-table-remove-column,
-	.article-block-table-remove-column:focus,
-	.article-block-table-row:hover .article-block-table-remove-row,
-	.article-block-table-remove-row:focus {
-		opacity: 1;
+	.article-block-table-remove:hover,
+	.article-block-table-add:hover {
+		background: var(--sveltely-control-inactive-color);
+		color: var(--sveltely-text-primary-color);
 	}
 
-	.article-block-table-remove-column:hover,
-	.article-block-table-remove-row:hover {
-		background: #fef2f2;
-		color: #dc2626;
-	}
-
-	.article-block-table-remove-column:disabled,
-	.article-block-table-remove-row:disabled {
+	.article-block-table-remove:disabled {
 		pointer-events: none;
-		opacity: 0;
+		opacity: 0.25;
 	}
 
-	.article-block-table-add-column,
-	.article-block-table-add-row {
-		border-color: rgba(0, 0, 0, 0.08);
+	.article-block-table-add {
+		border-color: var(--sveltely-border-color);
 		border-style: solid;
 	}
 
 	.article-block-table-add-column {
+		width: 2.25rem;
 		border-width: 1px 1px 1px 0;
 	}
 
 	.article-block-table-add-row {
+		height: 2.25rem;
+		flex: 1 1 auto;
 		border-width: 0 1px 1px 1px;
 	}
 
-	.article-block-table-add-column:hover,
-	.article-block-table-add-row:hover {
-		background: #f5f5f4;
-		color: #3f3f46;
-	}
-
 	.article-block-table-corner {
-		border-right: 1px solid rgba(0, 0, 0, 0.08);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-		background: rgba(250, 250, 249, 0.5);
+		width: 2.25rem;
+		height: 2.25rem;
+		border-right: 1px solid var(--sveltely-border-color);
+		border-bottom: 1px solid var(--sveltely-border-color);
+		background: color-mix(in oklab, var(--sveltely-background-color) 94%, var(--sveltely-border-color));
 	}
 </style>

package/dist/components/Library/Checkbox/Checkbox.demo.svelte

@@ -8,16 +8,17 @@
 <script lang="ts">
 	import Checkbox from './Checkbox.svelte';
 	import Label from '../Label';
+	import VStack from '../VStack';
 
 	let notificationsEnabled = $state(true);
 	let weeklySummaryEnabled = $state(false);
 </script>
 
-<div class="vstack gap-3">
-	<Label label="Enable notifications" orientation="leading" width="fit">
+<VStack gap={7.5}>
+	<Label label="Enable notifications" orientation="leading">
 		<Checkbox bind:checked={notificationsEnabled} />
 	</Label>
-	<Label label="Send weekly summary" orientation="leading" width="fit">
+	<Label label="Send weekly summary" orientation="leading">
 		<Checkbox bind:checked={weeklySummaryEnabled} />
 	</Label>
-</div>
+</VStack>

package/dist/components/Library/Checkbox/Checkbox.svelte

@@ -11,25 +11,26 @@
 		TooltipProps &
 		Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
 
-	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: Props = $props();
+	let { checked = $bindable(false), tooltip, disabled = false, ...restProps }: Props &
+		Record<string, unknown> = $props();
 
 	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
 	const styleProps = $derived(extractedStyleProps.styleProps);
-	const props = $derived(extractedStyleProps.restProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
 	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'checkbox'));
 </script>
 
-<label
+<span
 	class="checkbox"
 	style={rootStyle}
 	data-disabled={disabled ? 'true' : 'false'}
 	use:tooltipAction={tooltip}
 >
-	<input bind:checked type="checkbox" {disabled} {...props} />
+	<input bind:checked type="checkbox" {disabled} {...forwardedProps} />
 	<span class="checkbox-mark" aria-hidden="true">
 		<CheckIcon class="checkbox-icon" />
 	</span>
-</label>
+</span>
 
 <style>
 	.checkbox {

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

@@ -4,6 +4,7 @@ import type { TooltipProps } from '../../../style/tooltip';
 type Props = {
     checked?: boolean;
 } & StyleProps & TooltipProps & Omit<HTMLInputAttributes, 'type' | 'class' | 'style' | 'checked'>;
-declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/Library/ChipInput/ChipInput.demo.svelte

@@ -6,12 +6,13 @@
 </script>
 
 <script lang="ts">
+	import VStack from '../VStack';
 	import ChipInput from './ChipInput.svelte';
 
 	let tags = $state(['svelte', 'ui', 'search']);
 </script>
 
-<div class="vstack w-full max-w-sm gap-2">
+<VStack width="24rem" gap={5}>
 	<ChipInput bind:tags />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Tags: {tags.join(', ')}</p>
-</div>
+</VStack>

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -8,8 +8,11 @@
 
 <script lang="ts">
 	import { CheckIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
+	import Grid from '../Grid';
+	import HStack from '../HStack';
 	import SearchField from '../SearchField';
 	import ScrollView, { type ScrollGeometry } from '../ScrollView';
+	import VStack from '../VStack';
 	import Dropdown from './index';
 
 	type Website = {
@@ -87,8 +90,8 @@
 	});
 </script>
 
-<div class="grid w-full gap-4 md:grid-cols-2">
-	<div class="vstack gap-2">
+<Grid columns="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))" gap={10}>
+	<VStack gap={5}>
 		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">Default trigger</p>
 		<Dropdown bind:value={status} placeholder="Choose status" selectedLabel={selectedStatusLabel}>
 			<Dropdown.Section label="Publishing">
@@ -106,9 +109,9 @@
 		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
 			Selected: {selectedStatusLabel ?? 'none'}
 		</p>
-	</div>
+	</VStack>
 
-	<div class="vstack gap-2">
+	<VStack gap={5}>
 		<p class="text-sm font-medium text-[var(--sveltely-text-primary-color)]">
 			Custom trigger and rich rows
 		</p>
@@ -120,7 +123,7 @@
 			{#snippet trigger()}
 				<Dropdown.Trigger>
 					{#if selectedWebsite}
-						<span class="hstack min-w-0 items-center gap-2">
+						<HStack gap={5}>
 							<span class="truncate text-[var(--sveltely-text-primary-color)]"
 								>{selectedWebsite.name}</span
 							>
@@ -129,7 +132,7 @@
 									{selectedWebsite.domain}
 								</span>
 							{/if}
-						</span>
+						</HStack>
 					{:else}
 						<span class="text-[var(--sveltely-text-secondary-color)]">Select website</span>
 					{/if}
@@ -152,25 +155,25 @@
 						No websites found.
 					</div>
 				{:else}
-					<div class="h-36">
+					<VStack height={9}>
 						<ScrollView
 							contentStyles={{ paddingX: 0, paddingY: 0 }}
 							borderRadius={5}
 							background="white"
 							onScroll={handleWebsiteScroll}
 						>
-							<div class="vstack gap-1">
+							<VStack gap={2.5}>
 								{#each visibleWebsites as website (website.id)}
 									<Dropdown.Item value={website.id}>
 										{#snippet children({ selected })}
-											<div class="vstack min-w-0 gap-0.5">
+											<VStack gap={1.25}>
 												<span class="truncate">{website.name}</span>
 												{#if website.domain}
 													<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]"
 														>{website.domain}</span
 													>
 												{/if}
-											</div>
+											</VStack>
 											{#if selected}
 												<CheckIcon
 													size={14}
@@ -180,12 +183,14 @@
 										{/snippet}
 									</Dropdown.Item>
 								{/each}
-							</div>
+							</VStack>
 						</ScrollView>
-					</div>
+					</VStack>
 				{/if}
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Actions clicked: {actionCount}</p>
-	</div>
-</div>
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
+			Actions clicked: {actionCount}
+		</p>
+	</VStack>
+</Grid>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { tick, onDestroy } from 'svelte';
 	import type { Snippet } from 'svelte';
-	import { portalContent } from '../../../actions/portal';
+	import { Content as PortalContent } from '../Portal';
 	import { autoAlignForViewport, computePosition, type Anchor } from '../../../utils/positioning';
 	import {
 		hasOpenChild,
@@ -385,9 +385,8 @@
 	{@render trigger({ useTrigger, open, toggle, openPanel, closePanel })}
 
 	{#if open}
-		<div
-			use:portalContent
-			bind:this={panelEl}
+		<PortalContent
+			bind:element={panelEl}
 			class={panelClass}
 			style={resolvedPanelStyle}
 			data-floating
@@ -395,11 +394,11 @@
 			data-floating-parent-id={parentFloatingId ?? ''}
 			role={panelRole}
 			aria-modal={panelAriaModal}
-			tabindex="-1"
+			tabindex={-1}
 		>
 			<div bind:this={contentEl} class={contentClass} style={contentStyle}>
 				{@render children()}
 			</div>
-		</div>
+		</PortalContent>
 	{/if}
 </div>

package/dist/components/Library/Grid/Grid.demo.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+	type Tile = {
+		id: number;
+		title: string;
+		tone: string;
+	};
+
+	export const demo = {
+		name: 'Grid',
+		description: 'Virtualized fixed-size grid powered by the viewport layout engine.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Grid from './index';
+
+	const tones = ['#2563eb', '#16a34a', '#d97706', '#db2777'];
+	const tiles: Tile[] = Array.from({ length: 400 }, (_, index) => ({
+		id: index + 1,
+		title: `Tile ${index + 1}`,
+		tone: tones[index % tones.length]
+	}));
+</script>
+
+{#snippet tile(item: Tile)}
+	<div class="grid-demo-tile" style:--grid-demo-tone={item.tone}>
+		<span>{item.title}</span>
+	</div>
+{/snippet}
+
+<Grid
+	items={tiles}
+	item={tile}
+	columns={4}
+	columnWidth={120}
+	rowHeight={84}
+	columnGap={8}
+	rowGap={8}
+	overscan={96}
+	height="100%"
+/>
+
+<style>
+	.grid-demo-tile {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		border: 1px solid color-mix(in oklab, var(--grid-demo-tone) 24%, transparent);
+		border-radius: var(--sveltely-border-radius-nested);
+		background: color-mix(in oklab, var(--grid-demo-tone) 10%, var(--sveltely-background-color));
+		padding: 0.75rem;
+		color: var(--sveltely-text-primary-color);
+		font-size: 0.85rem;
+		font-weight: 600;
+	}
+</style>

package/dist/components/Library/Grid/Grid.demo.svelte.d.ts

@@ -0,0 +1,25 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import Grid from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Grid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Grid = InstanceType<typeof Grid>;
+export default Grid;