pika-ux 1.0.0-beta.0

package/src/pika/list/list.svelte

@@ -0,0 +1,349 @@
+<script lang="ts" generics="T">
+    import Minus from '$icons/lucide/minus';
+    import Plus from '$icons/lucide/plus';
+    import SimpleDropdown from '../../pika/simple-dropdown/simple-dropdown.svelte';
+    import Button from '../../shadcn/button/button.svelte';
+    import * as Command from '../../shadcn/command/index.js';
+    import { Input } from '../../shadcn/input/index.js';
+    import { cn } from '../../shadcn/utils';
+    import { SvelteSet } from 'svelte/reactivity';
+    import Combobox from '../combobox/combobox.svelte';
+    import type { ListMapping } from './list-types';
+
+    interface Props {
+        // Additional CSS classes. Can override default height of h-[250px]
+        classes?: string;
+        items?: T[];
+        mapping: ListMapping<T>;
+        emptyMessage?: string;
+        showValueInListEntries?: boolean;
+        disabled?: boolean;
+        // If true, the user can select items from the list.
+        allowSelection?: boolean;
+        // If true, the user can select multiple items from the list.
+        multiSelect?: boolean;
+        // If you want to detect when items are selected pass this in as a bound variable.  TODO: support initializing selected items from this list passed in.
+        selectedItems?: T[];
+
+        // Originally, the list had a use case where the UX was better when you require the user to first select
+        // an entry in the dropdown and then volitionally click the add button to add it to the list.
+        // However, this is an extra unnecessary step for the user.  So, if you want to add the item to the list
+        // when the user selects an item from the list, set this to true.
+        addOnSelect?: boolean;
+
+        // Allow the user to add and remove items from the list instead of just showing a list of items.
+        // You the developer are responsible for ensuring that the items are unique and that the user cannot add the same item twice.
+        // You implement the logic for adding and removing items from your underlying list.
+        addRemove?: {
+            addItem?: (item: T) => void;
+            // If true, the user can press enter to add an item to the list.  Defaults to false.
+            triggerAddOnEnter?: boolean;
+            removeItem?: (item: T) => void;
+            allowArbitraryValues?: {
+                convertValueToType: (arbitraryValue: string) => T;
+                // The placeholder text for the input field in the popup allowing a user to filter the list or add an arbitrary value.
+                popupInputPlaceholder?: string;
+            };
+            // If provided, an autocomplete combobox that will search as the user types to the server will be provided.
+            // If this is provided then allowArbitraryValues will be ignored.
+            search?: {
+                // The function that will be called when the user types in the search input field, calling the server presumably.
+                onSearchValueChanged: ((value: string) => Promise<void>) | undefined;
+                // The minimum number of characters that the user must type before the search is triggered.  Defaults to 1.
+                minCharactersForSearch?: number | undefined;
+                // If true, the value of the item will be shown in the list entries.  Defaults to false.
+                showValueInListEntries?: boolean;
+                // The placeholder text for the search input field in the popup.
+                popupInputPlaceholder?: string;
+                // Indicates that the search is in progress back to the server.  Defaults to false.
+                loading?: boolean | undefined;
+                // This is the name of the type of data in the dropdown that a user will understand
+                optionTypeName?: string;
+                optionTypeNamePlural?: string;
+
+                // This is the mapping of the returned search options.  If not provided, the mapping of the list will be used.
+                mapping?: ListMapping<T>;
+
+                // Additional CSS classes for the search input field in the popup.
+                widthClasses?: string;
+
+                // The options that will be shown in the search dropdown.  If not provided, the options will be fetched from the server.
+                options: T[] | undefined;
+            };
+            // Allows for pre-defined items that a user may select from to add to the list if not already present,
+            // changing from an input field to a dropdown list with an input field.
+            predefinedOptions?: {
+                items: T[];
+                // This is the name of the type of data in the dropdown that a user will understand
+                optionTypeName?: string;
+                optionTypeNamePlural?: string;
+                // This is the mapping of the predefined options.  If not provided, the mapping of the list will be used.
+                mapping?: ListMapping<T>;
+            };
+            addValueInputPlaceholder?: string;
+        };
+    }
+
+    let {
+        classes = '',
+        items = [],
+        mapping,
+        addRemove,
+        emptyMessage,
+        showValueInListEntries = false,
+        disabled = false,
+        allowSelection = false,
+        multiSelect = false,
+        selectedItems = $bindable<T[]>([]),
+        addOnSelect = false
+    }: Props = $props();
+
+    const getValue = (item: T) => mapping?.value(item) ?? '';
+    const getLabel = (item: T) => mapping?.label(item) ?? '';
+    const getSecondaryLabel = (item: T) => mapping?.secondaryLabel?.(item);
+
+    const predefinedItems = $derived(addRemove?.predefinedOptions?.items || []);
+    const predefinedMapping = $derived.by(() => {
+        const customMapping = addRemove?.predefinedOptions?.mapping;
+        if (customMapping) {
+            return customMapping;
+        }
+        return mapping;
+    });
+    const getPredefinedValue = (item: T) => predefinedMapping?.value(item) ?? '';
+
+    const searchMapping = $derived.by(() => {
+        const customMapping = addRemove?.search?.mapping;
+        if (customMapping) {
+            return customMapping;
+        }
+        return mapping;
+    });
+    const getSearchValue = (item: T) => searchMapping?.value(item) ?? '';
+
+    let selectedValues = $state(new SvelteSet<string>());
+    let addValueInput = $state('');
+    let selectedDropdownItem = $state<T | undefined>(undefined);
+
+    // Auto-enable selection when remove functionality is available
+    const effectiveAllowSelection = $derived(allowSelection || addRemove?.removeItem !== undefined);
+
+    function toggleSelection(value: string) {
+        let changed = false;
+        if (multiSelect) {
+            // Multi-select: toggle the individual item
+            if (selectedValues.has(value)) {
+                selectedValues.delete(value);
+                changed = true;
+            } else {
+                selectedValues.add(value);
+                changed = true;
+            }
+        } else {
+            // Single-select: clear all and select this one, or deselect if already selected
+            if (selectedValues.has(value)) {
+                selectedValues.delete(value);
+                changed = true;
+            } else {
+                selectedValues.clear();
+                selectedValues.add(value);
+                changed = true;
+            }
+        }
+        if (changed) {
+            selectedItems = items.filter((item) => selectedValues.has(getValue(item)));
+        }
+    }
+
+    // Get available predefined options that aren't already in the list
+    const availablePredefinedOptions = $derived.by(() => {
+        if (!predefinedItems.length) return [];
+
+        const currentItemValues = new Set(items.map((item) => getValue(item)));
+        return predefinedItems.filter((item) => !currentItemValues.has(getPredefinedValue(item)));
+    });
+
+    const availableSearchOptions = $derived.by(() => {
+        if (!addRemove?.search?.options) return [];
+        const currentItemValues = new Set(items.map((item) => getValue(item)));
+        return addRemove.search.options.filter((item) => !currentItemValues.has(getSearchValue(item)));
+    });
+
+    function handleAddFromDropdown() {
+        if (selectedDropdownItem && addRemove?.addItem) {
+            addRemove.addItem(selectedDropdownItem);
+            selectedDropdownItem = undefined; // Reset selection after adding
+        }
+    }
+
+    function handleRemoveSelectedItems() {
+        if (addRemove?.removeItem && selectedValues.size > 0) {
+            // Find and remove all selected items from the actual list
+            const selectedItemsToRemove = items.filter((item) => selectedValues.has(getValue(item)));
+            selectedItemsToRemove.forEach((item) => {
+                addRemove.removeItem!(item);
+            });
+            selectedValues.clear(); // Clear selection after removing
+            selectedItems = [];
+        }
+    }
+</script>
+
+{#if mapping}
+    <div class={cn('h-[250px] flex flex-col', classes)}>
+        {#if addRemove}
+            <div class="flex items-center gap-2 mb-2 min-w-0">
+                {#if addRemove.search}
+                    <div class="flex-1 min-w-0">
+                        <Combobox
+                            bind:value={
+                                () => selectedDropdownItem,
+                                (val) => {
+                                    selectedDropdownItem = val;
+                                    handleAddFromDropdown();
+                                }
+                            }
+                            mapping={searchMapping}
+                            options={availableSearchOptions}
+                            onSearchValueChanged={addRemove.search.onSearchValueChanged}
+                            loading={addRemove.search.loading}
+                            optionTypeName="account"
+                            optionTypeNamePlural="accounts"
+                            wrapperClasses="w-full"
+                            popupWidthClasses="w-[300px]"
+                            showValueInListEntries={true}
+                            minCharactersForSearch={1}
+                            {disabled}
+                        />
+                    </div>
+                    <div class="flex items-center flex-shrink-0">
+                        {#if !addOnSelect}
+                            <Button variant="ghost" size="icon" class="w-6 h-7" disabled={disabled || !selectedDropdownItem} onclick={handleAddFromDropdown}>
+                                <Plus />
+                            </Button>
+                        {/if}
+                        <Button variant="ghost" size="icon" class="w-6 h-7" disabled={disabled || selectedValues.size === 0} onclick={handleRemoveSelectedItems}>
+                            <Minus />
+                        </Button>
+                    </div>
+                {:else if addRemove.predefinedOptions && predefinedItems.length > 0 && predefinedMapping}
+                    <div class="flex-1 min-w-0">
+                        <SimpleDropdown
+                            bind:value={
+                                () => selectedDropdownItem,
+                                (val) => {
+                                    selectedDropdownItem = val;
+                                    handleAddFromDropdown();
+                                }
+                            }
+                            mapping={predefinedMapping}
+                            options={availablePredefinedOptions}
+                            optionTypeName={addRemove.predefinedOptions.optionTypeName || 'option'}
+                            optionTypeNamePlural={addRemove.predefinedOptions.optionTypeNamePlural || 'options'}
+                            wrapperClasses="w-full"
+                            inputPlaceholder={addRemove.addValueInputPlaceholder}
+                            searchPlaceholder={addRemove.allowArbitraryValues?.popupInputPlaceholder}
+                            {disabled}
+                            allowArbitraryValues={addRemove.allowArbitraryValues}
+                        />
+                    </div>
+                    <div class="flex items-center flex-shrink-0">
+                        {#if !addOnSelect}
+                            <Button variant="ghost" size="icon" class="w-6 h-7" disabled={disabled || !selectedDropdownItem} onclick={handleAddFromDropdown}>
+                                <Plus />
+                            </Button>
+                        {/if}
+                        <Button variant="ghost" size="icon" class="w-6 h-7" disabled={disabled || selectedValues.size === 0} onclick={handleRemoveSelectedItems}>
+                            <Minus />
+                        </Button>
+                    </div>
+                {:else}
+                    <!-- Fallback to Input when no predefinedOptions or for arbitrary values only -->
+                    <Input
+                        bind:value={addValueInput}
+                        type="text"
+                        placeholder={addRemove.addValueInputPlaceholder}
+                        {disabled}
+                        onkeydown={(e) => {
+                            if (
+                                e.key === 'Enter' &&
+                                (addRemove.triggerAddOnEnter || addOnSelect) &&
+                                addRemove.allowArbitraryValues &&
+                                addRemove.addItem &&
+                                addValueInput.trim().length > 0
+                            ) {
+                                addRemove.addItem(addRemove.allowArbitraryValues.convertValueToType(addValueInput));
+                                addValueInput = ''; // Clear input after adding
+                            }
+                        }}
+                    />
+                    <div class="flex items-center">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            class="w-6 h-7"
+                            disabled={disabled || addValueInput.trim().length === 0}
+                            onclick={() => {
+                                if (addRemove.allowArbitraryValues && addRemove.addItem && addValueInput.trim().length > 0) {
+                                    addRemove.addItem(addRemove.allowArbitraryValues.convertValueToType(addValueInput));
+                                    addValueInput = ''; // Clear input after adding
+                                }
+                            }}><Plus /></Button
+                        >
+                        <Button variant="ghost" size="icon" class="w-6 h-7" disabled={disabled || selectedValues.size === 0} onclick={handleRemoveSelectedItems}><Minus /></Button>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+        <Command.Root class="border rounded-md">
+            <Command.Empty class="text-sm text-muted-foreground p-4">{emptyMessage}</Command.Empty>
+            <Command.List class="max-h-48 overflow-auto">
+                {#each items as item}
+                    <Command.Item
+                        value={getValue(item)}
+                        class={cn(
+                            'flex items-start gap-2 px-2 py-2',
+                            disabled ? 'cursor-not-allowed opacity-50' : effectiveAllowSelection ? 'cursor-pointer' : 'cursor-default',
+                            (getSecondaryLabel(item) || showValueInListEntries) && 'py-2.5 min-h-[3rem]',
+                            effectiveAllowSelection && selectedValues.has(getValue(item))
+                                ? 'bg-accent aria-selected:bg-accent'
+                                : effectiveAllowSelection
+                                  ? 'aria-selected:bg-transparent hover:bg-gray-50'
+                                  : 'aria-selected:bg-transparent'
+                        )}
+                        onSelect={() => !disabled && effectiveAllowSelection && toggleSelection(getValue(item))}
+                    >
+                        <div class="flex-1 min-w-0">
+                            <!-- Primary label -->
+                            <div class="font-medium text-sm leading-tight truncate">
+                                {getLabel(item)}
+                            </div>
+
+                            <!-- Secondary and tertiary info in a row -->
+                            {#if getSecondaryLabel(item) || showValueInListEntries}
+                                <div class="flex items-center gap-2 mt-0.5">
+                                    {#if getSecondaryLabel(item)}
+                                        <span class="text-xs text-muted-foreground truncate flex-shrink-0">
+                                            {getSecondaryLabel(item)}
+                                        </span>
+                                    {/if}
+                                    {#if showValueInListEntries}
+                                        <!-- Separator dot if we have both secondary label and value -->
+                                        {#if getSecondaryLabel(item)}
+                                            <span class="text-xs text-muted-foreground/50">•</span>
+                                        {/if}
+                                        <span class="text-xs text-muted-foreground/70 font-mono truncate">
+                                            {getValue(item)}
+                                        </span>
+                                    {/if}
+                                </div>
+                            {/if}
+                        </div>
+                    </Command.Item>
+                {/each}
+            </Command.List>
+        </Command.Root>
+    </div>
+{:else}
+    <div class="text-sm text-muted-foreground p-4">Error: List component requires a mapping configuration</div>
+{/if}

package/src/pika/markdown-editor/github.scss

@@ -0,0 +1,87 @@
+.carta-theme__github {
+    // Core styles for light theme
+    $background: #ffffff; // White background
+    $background-light: #f6f8fa; // Slightly gray background for toolbar
+    $border: #d0d7de; // GitHub light gray border
+    $accent: #0969da; // GitHub blue accent
+
+    &.carta-editor {
+        background-color: $background;
+        border: 1px solid $border;
+        border-radius: 0.5rem;
+
+        &:focus-within {
+            outline: 3px solid #cde4fe;
+        }
+
+        .carta-wrapper {
+            padding: 1rem;
+            flex-grow: 1;
+            color: #24292f; // GitHub text gray/black
+        }
+
+        .carta-font-code {
+            font-family: 'Fira Code', monospace;
+            caret-color: black;
+            font-size: 0.825rem;
+            color: #24292f;
+        }
+
+        .carta-toolbar {
+            height: 2.5rem;
+            background-color: $background-light;
+
+            border-top-left-radius: 0.5rem;
+            border-top-right-radius: 0.5rem;
+
+            .carta-icon {
+                width: 2rem;
+                height: 2rem;
+
+                &:hover {
+                    color: black;
+                    background-color: #eaeef2;
+                }
+            }
+        }
+
+        .carta-toolbar-left button,
+        .carta-toolbar-right,
+        .carta-filler {
+            border-bottom: 1px solid $border;
+        }
+
+        .carta-toolbar-left {
+            & > * {
+                padding-left: 1rem;
+                padding-right: 1rem;
+                font-size: 0.775rem;
+            }
+
+            button {
+                height: 100%;
+            }
+
+            .carta-active {
+                background-color: $background;
+                color: black;
+
+                border-right: 1px solid $border;
+                border-bottom: 1px solid $background;
+
+                &:not(:first-child) {
+                    border-left: 1px solid $border;
+                }
+            }
+        }
+
+        .carta-toolbar-right {
+            padding-right: 12px;
+        }
+    }
+}
+
+html.light .carta-theme__github .shiki,
+html.light .carta-theme__github .shiki span {
+    color: var(--shiki-light) !important;
+}

package/src/pika/markdown-editor/index.ts

@@ -0,0 +1 @@
+export { default as MarkdownEditor } from './markdown-editor.svelte';

package/src/pika/markdown-editor/markdown-editor.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { code } from '@cartamd/plugin-code';
+    import { Carta, MarkdownEditor } from 'carta-md';
+    import './github.scss';
+
+    interface Props {
+        value: string;
+        placeholder?: string;
+    }
+
+    let initialized = $state(false);
+
+    let { value = $bindable(), placeholder = 'Start writing...' }: Props = $props();
+    let carta: Carta | undefined = $state(undefined);
+
+    $effect(() => {
+        if (!initialized) {
+            carta = new Carta({
+                sanitizer: false,
+                extensions: [code()],
+                rendererDebounce: 100, // Shorter delay to reduce timing issues
+            });
+            initialized = true;
+        }
+    });
+
+    // Add cleanup effect
+    $effect(() => {
+        return () => {
+            // Hack to fix a bug in carta where it tries to render once after unmounting
+            if (carta) {
+                const dummyContainer = document.createElement('div');
+                dummyContainer.style.display = 'none';
+                // This redirects carta's internal renderer to the dummy container
+                // so any pending async operations won't crash on destroyed DOM
+                carta.$setRenderer(dummyContainer);
+            }
+        };
+    });
+</script>
+
+{#if carta}
+    <MarkdownEditor bind:value mode="tabs" theme="github" {carta} {placeholder} />
+{/if}

package/src/pika/permanent-toast/index.ts

@@ -0,0 +1 @@
+export { default as PermanentToast } from './permanent-toast.svelte';

package/src/pika/permanent-toast/permanent-toast.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import CircleAlert from '$icons/lucide/circle-alert';
+    import Info from '$icons/lucide/info';
+    import TriangleAlert from '$icons/lucide/triangle-alert';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        type: 'info' | 'warning' | 'error';
+        children?: Snippet<[]>;
+    }
+
+    const { type, children }: Props = $props();
+
+    const typeConfig = {
+        info: {
+            icon: Info,
+            bgColor: 'bg-blue-50',
+            iconColor: 'text-blue-500',
+            borderColor: 'border-blue-100',
+        },
+        warning: {
+            icon: TriangleAlert,
+            bgColor: 'bg-yellow-50',
+            iconColor: 'text-yellow-500',
+            borderColor: 'border-yellow-100',
+        },
+        error: {
+            icon: CircleAlert,
+            bgColor: 'bg-red-50',
+            iconColor: 'text-red-500',
+            borderColor: 'border-red-100',
+        },
+    } as const;
+
+    const config = typeConfig[type];
+</script>
+
+<div class={`py-2 ${config.bgColor} border-b ${config.borderColor}`}>
+    <div class="ml-4 flex items-center space-x-3">
+        {#if config.icon}
+            <config.icon class="w-5 h-5 {config.iconColor}" />
+        {/if}
+        <div class="text-sm text-gray-700">
+            {@render children?.()}
+        </div>
+    </div>
+</div>

package/src/pika/pika-alert/index.ts

@@ -0,0 +1 @@
+export { default as PikaAlert } from './pika-alert.svelte';

package/src/pika/pika-alert/pika-alert.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import Button from '../../shadcn/button/button.svelte';
+    import * as Dialog from '../../shadcn/dialog';
+    interface Props {
+        title: string;
+        description: string;
+        open: boolean;
+        ok?: {
+            label?: string;
+            onClick: () => void;
+        };
+        cancel?: {
+            showCancel: boolean;
+            label?: string;
+            onClick: () => void;
+        };
+    }
+
+    let { title, description, ok, cancel, open = $bindable() }: Props = $props();
+
+    function handleCancel() {
+        open = false;
+        if (cancel?.onClick) {
+            cancel.onClick();
+        }
+    }
+
+    function handleOk() {
+        open = false;
+        if (ok?.onClick) {
+            ok.onClick();
+        }
+    }
+</script>
+
+<Dialog.Root bind:open>
+    <Dialog.Content>
+        <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+        </Dialog.Header>
+        <div class="pb-2 pt-2 max-w-3xl mx-auto w-full">
+            <div class="flex flex-col gap-6">
+                <p class="text-sm text-muted-foreground">{description}</p>
+            </div>
+        </div>
+        <Dialog.Footer>
+            {#if cancel?.showCancel}
+                <Button variant="outline" onclick={handleCancel}>{cancel?.label ?? 'Cancel'}</Button>
+            {/if}
+            <Button variant="default" onclick={handleOk}>{ok?.label ?? 'OK'}</Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>

package/src/pika/pika-badge/index.ts

@@ -0,0 +1 @@
+export { default as PikaBadge, pikaBadgeVariants, type PikaBadgeVariant } from './pika-badge.svelte';

package/src/pika/pika-badge/pika-badge.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+    import { type VariantProps, tv } from 'tailwind-variants';
+    export const pikaBadgeVariants = tv({
+        base: 'focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow',
+                secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+                destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow',
+                success: 'bg-green-700 text-white hover:bg-green-700 border-transparent shadow',
+                outline: 'text-foreground'
+            }
+        },
+        defaultVariants: {
+            variant: 'default'
+        }
+    });
+
+    export type PikaBadgeVariant = VariantProps<typeof pikaBadgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+    import PopupHelp from '../../pika/popup-help/popup-help.svelte';
+    import { cn } from '../../shadcn/utils.js';
+    import type { WithElementRef } from 'bits-ui';
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        href,
+        class: className,
+        variant = 'default',
+        children,
+        help,
+        helpStyles,
+        ...restProps
+    }: WithElementRef<HTMLAnchorAttributes> & {
+        variant?: PikaBadgeVariant;
+        help?: string;
+        helpStyles?: string;
+    } = $props();
+
+    // Split help text by line feeds to create paragraphs
+    const helpParagraphs = $derived(help ? help.split('\n') : []);
+</script>
+
+<svelte:element this={href ? 'a' : 'span'} bind:this={ref} {href} class={cn(pikaBadgeVariants({ variant }), help ? 'space-x-1' : '', className)} {...restProps}>
+    {@render children?.()}
+
+    {#if help}
+        <div class="ml-2 items-center flex">
+            <PopupHelp popoverClasses={`max-w-[400px] ${helpStyles ? helpStyles : ''}`}>
+                <div class="text-xs space-y-2 text-muted-foreground">
+                    {#each helpParagraphs as paragraph}
+                        <p>{paragraph}</p>
+                    {/each}
+                </div>
+            </PopupHelp>
+        </div>
+    {/if}
+</svelte:element>

package/src/pika/pika-table/index.ts

@@ -0,0 +1,7 @@
+export { default as PikaTableCheckbox } from './pika-table-checkbox.svelte';
+export { default as PikaTableColumnHeader } from './pika-table-column-header.svelte';
+export { default as PikaTableFacetedFilter } from './pika-table-faceted-filter.svelte';
+export { default as PikaTablePagination } from './pika-table-pagination.svelte';
+export { default as PikaTableRowActions } from './pika-table-row-actions.svelte';
+export { default as PikaTableToolbar } from './pika-table-toolbar.svelte';
+export { default as PikaTableViewOptions } from './pika-table-view-options.svelte';

package/src/pika/pika-table/pika-table-cell.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let { children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...restProps}>
+    {@render children?.()}
+</div>