pika-ux 1.0.0-beta.9 → 1.0.1

package/dist/cli/template-files/pnpm-workspace.yaml

@@ -1,8 +1,8 @@
 catalog:
   '@iconify-json/ci': ^1.2.2
-  '@iconify-json/lucide': ^1.2.44
+  '@iconify-json/lucide': ^1.2.68
   '@internationalized/date': ^3.8.1
-  '@lucide/svelte': ^0.482.0
+  '@lucide/svelte': ^0.544.0
   '@sveltejs/vite-plugin-svelte': ^6.2.0
   '@tailwindcss/typography': ^0.5.16
   '@tailwindcss/vite': ^4.1.13
@@ -17,5 +17,5 @@ catalog:
   tailwindcss: ^4.1.11
   tw-animate-css: ^1.4.0
   typescript: ^5.9.2
-  unplugin-icons: ^22.3.0
+  unplugin-icons: ^22.4.1
   vite: ^7.1.7

package/dist/cli/template-files/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import './app.css';
-    import Counter from './lib/Counter.svelte';
+    import Counter from './lib/counter.svelte';
 </script>
 
 <main class="flex flex-col items-center justify-center h-screen">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.1",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",
@@ -29,14 +29,21 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.13",
     "@tsconfig/svelte": "^5.0.5",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.1.7",
     "@types/fs-extra": "^11.0.4",
     "@types/indefinite": "^2.3.4",
     "@types/inquirer": "^9.0.8",
     "@types/node": "^22.15.17",
     "@types/semver": "^7.7.0",
     "bits-ui": "^1.8.0",
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
     "eslint": "^9.26.0",
+    "layerchart": "^2.0.0-next.42",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.1",
     "tailwindcss": "^4.1.11",

package/src/App.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
     import './app.css';
     import Navigation from './lib/docsite/Navigation.svelte';
-
-    // Page components
-    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
-    import Icons from './lib/docsite/pages/Icons.svelte';
     import Colors from './lib/docsite/pages/Colors.svelte';
     import Components from './lib/docsite/pages/Components.svelte';
     import Button from './lib/docsite/pages/components/Button.svelte';
+    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
+    import Icons from './lib/docsite/pages/Icons.svelte';
 
     // Simple routing state
     let currentPage = $state('getting-started');

package/src/icons/lucide/index.d.ts

@@ -1256,6 +1256,13 @@ declare module '$icons/lucide/bird' {
   export default component;
 }
 
+declare module '$icons/lucide/birdhouse' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/bitcoin' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -5029,6 +5036,13 @@ declare module '$icons/lucide/gamepad-2' {
   export default component;
 }
 
+declare module '$icons/lucide/gamepad-directional' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/gauge' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -7038,6 +7052,13 @@ declare module '$icons/lucide/monitor-check' {
   export default component;
 }
 
+declare module '$icons/lucide/monitor-cloud' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/monitor-cog' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';
@@ -7129,6 +7150,13 @@ declare module '$icons/lucide/moon-star' {
   export default component;
 }
 
+declare module '$icons/lucide/motorbike' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}
+
 declare module '$icons/lucide/mountain' {
   import type { Component } from 'svelte';
   import type { SvelteHTMLElements } from 'svelte/elements';

package/src/pika/confirm-dialog/confirm-dialog.svelte

@@ -37,7 +37,7 @@
         }
     }}
 >
-    <Dialog.Content>
+    <Dialog.Content class="max-w-xl max-h-[80vh] overflow-hidden flex flex-col">
         <Dialog.Title>{title ?? 'Confirm'}</Dialog.Title>
         {confirmQuestion}
         <Dialog.Footer>

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

@@ -2,7 +2,11 @@
     type TData = unknown;
 </script>
 
+<!-- @component
+PikaTablePagination - Pagination controls for PikaTable
+-->
 <script lang="ts" generics="TData">
+    // @ts-ignore - Props interface is private but this is a Svelte framework limitation
     import ChevronLeft from '$icons/lucide/chevron-left';
     import ChevronRight from '$icons/lucide/chevron-right';
     import ChevronsLeft from '$icons/lucide/chevrons-left';
@@ -15,9 +19,10 @@
     interface Props {
         table: Table<TData>;
         serverSide: ServerSideConfig;
+        showRowsPerPage?: boolean;
     }
 
-    let { table, serverSide }: Props = $props();
+    let { table, serverSide, showRowsPerPage = true }: Props = $props();
 
     // For cursor-based pagination, we can't jump to arbitrary pages
     const isCursorBased = $derived(serverSide?.paginationMode === 'cursor');
@@ -33,30 +38,32 @@
             {table.getFilteredRowModel().rows.length} row(s) selected.
         {/if}
     </div>
-    <div class="flex items-center space-x-6 lg:space-x-8">
-        <div class="flex items-center space-x-2">
-            <p class="text-sm font-medium">Rows per page</p>
-            <Select.Root
-                allowDeselect={false}
-                type="single"
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                    table.setPageSize(Number(value));
-                }}
-            >
-                <Select.Trigger class="h-8 w-[70px]">
-                    {String(table.getState().pagination.pageSize)}
-                </Select.Trigger>
-                <Select.Content side="top">
-                    {#each [10, 20, 50, 100, 500, 1000] as pageSize (pageSize)}
-                        <Select.Item value={`${pageSize}`}>
-                            {pageSize}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-        </div>
-        <div class="flex w-[100px] items-center justify-center text-sm font-medium">
+    <div class="flex items-center space-x-8">
+        {#if showRowsPerPage}
+            <div class="flex items-center space-x-2">
+                <p class="text-sm font-medium">Rows per page</p>
+                <Select.Root
+                    allowDeselect={false}
+                    type="single"
+                    value={`${table.getState().pagination.pageSize}`}
+                    onValueChange={(value) => {
+                        table.setPageSize(Number(value));
+                    }}
+                >
+                    <Select.Trigger class="h-8 w-[70px]">
+                        {String(table.getState().pagination.pageSize)}
+                    </Select.Trigger>
+                    <Select.Content side="top">
+                        {#each [10, 20, 50, 100, 500, 1000] as pageSize (pageSize)}
+                            <Select.Item value={`${pageSize}`}>
+                                {pageSize}
+                            </Select.Item>
+                        {/each}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+        {/if}
+        <div class="flex w-[100px] items-center justify-center text-sm font-medium mr-2">
             {#if table.getPageCount() > 0}
                 Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
             {:else}

package/src/pika/pika-table/pika-table-row-actions.svelte

@@ -45,7 +45,7 @@
         {:else if 'menuItems' in item}
             {@render subMenu(item)}
         {:else}
-            <DropdownMenu.Item onclick={() => item.onclick?.(row, appState)}>
+            <DropdownMenu.Item onclick={() => item.onclick?.(row)}>
                 <div class="flex items-center gap-2">
                     {#if item.icon}
                         <item.icon />

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

@@ -3,8 +3,11 @@
     type TValue = unknown;
 </script>
 
+<!-- @component
+PikaTable - A reusable table component with server-side pagination, sorting, and filtering support
+-->
 <script lang="ts" generics="TData, TValue">
-    import type { AppState } from '$client/app/app.state.svelte';
+    // @ts-ignore - Props interface is private but this is a Svelte framework limitation
     import { createSvelteTable } from '../../shadcn/data-table/data-table.svelte';
     import FlexRender from '../../shadcn/data-table/flex-render.svelte';
     import * as Table from '../../shadcn/table';
@@ -20,10 +23,10 @@
         type RowSelectionState,
         type SortingState
     } from '@tanstack/table-core';
-    import { getContext, type Snippet } from 'svelte';
+    import { type Snippet } from 'svelte';
     import TablePagination from './pika-table-pagination.svelte';
     import TableToolbar from './pika-table-toolbar.svelte';
-    import type { FacetedFilters, GlobalFilterProps, ServerSideConfig, ServerSideTableState } from './types';
+    import type { FacetedFilters, GlobalFilterProps, ServerSideConfig, ServerSideTableState, TableSettingsFacade } from './types';
 
     interface Props {
         columns: ColumnDef<TData, TValue>[];
@@ -48,6 +51,15 @@
 
         // Server-side configuration
         serverSideConfig?: ServerSideConfig;
+
+        // Facade for table settings (required)
+        tableSettings: TableSettingsFacade;
+
+        // Show rows per page selector in pagination
+        showRowsPerPage?: boolean;
+
+        // Where to show pagination controls
+        paginationPlacement?: 'top' | 'bottom' | 'both';
     }
 
     let {
@@ -59,61 +71,64 @@
         toolbarContent,
         beneathToolbarContent,
         tableKey,
-        serverSideConfig = $bindable<ServerSideConfig>()
+        serverSideConfig = $bindable<ServerSideConfig>(),
+        tableSettings,
+        showRowsPerPage = true,
+        paginationPlacement = 'bottom'
     }: Props = $props();
 
-    const appState = getContext<AppState>('appState');
-    const appSettings = appState.settings;
-
     let rowSelection = $state<RowSelectionState>({});
-    let columnVisibility = $derived(appSettings.getTableColumnVisibilityObject(tableKey));
-    //$state<VisibilityState>(appSettings.getTableColumnVisibilityObject(tableKey));
+    let columnVisibility = $derived(tableSettings.getTableColumnVisibilityObject(tableKey));
     let columnFilters = $state<ColumnFiltersState>([]);
     let sorting = $state<SortingState>([]);
     let pageIndex = $state(0);
-    let pageSize = $derived(appSettings.getTableNumRows(tableKey, 10));
+    let pageSize = $derived(tableSettings.getTableNumRows(tableKey, 10));
 
     // === SERVER-SIDE LOGIC ===
 
     let debouncedRequestData: ((tableState: ServerSideTableState) => Promise<void>) | undefined;
 
     // Create debounced function when serverSide config changes
-    // $effect(() => {
-    //     const serverState = serverSideConfig;
-    //     if (serverState) {
-    //         const debounceMs = serverState.debounceMs ?? 300;
-    //         debouncedRequestData = debounce(async (tableState: ServerSideTableState) => {
-    //             try {
-    //                 await serverState.requestData(tableState);
+    $effect(() => {
+        const serverState = serverSideConfig;
+        if (serverState) {
+            const debounceMs = serverState.debounceMs ?? 300;
+            debouncedRequestData = debounce(async (tableState: ServerSideTableState) => {
+                try {
+                    await serverState.requestData(tableState);
 
-    //                 // If using new API, update the tableState
-    //                 if (serverSideConfig) {
-    //                     serverSideConfig.tableState = { ...serverSideConfig.tableState, ...tableState };
-    //                 }
-    //             } catch (error) {
-    //                 serverState.onError?.(error instanceof Error ? error.message : 'Unknown error');
-    //             }
-    //         }, debounceMs);
-    //     } else {
-    //         debouncedRequestData = undefined;
-    //     }
-    // });
+                    // If using new API, update the tableState
+                    if (serverSideConfig) {
+                        serverSideConfig.tableState = { ...serverSideConfig.tableState, ...tableState };
+                    }
+                } catch (error) {
+                    serverState.onError?.(error instanceof Error ? error.message : 'Unknown error');
+                }
+            }, debounceMs);
+        } else {
+            debouncedRequestData = undefined;
+        }
+    });
 
     // Trigger server request when table state changes
-    // function triggerServerRequest() {
-    //     const serverState = serverSideConfig;
-    //     if (!serverState || !debouncedRequestData) return;
+    function triggerServerRequest() {
+        const serverState = serverSideConfig;
+        if (!serverState || !debouncedRequestData) return;
 
-    //     const tableState: ServerSideTableState = {
-    //         pageIndex,
-    //         pageSize,
-    //         sorting,
-    //         columnFilters,
-    //         requestId: crypto.randomUUID(),
-    //     };
+        const tableState: ServerSideTableState = {
+            pageIndex,
+            pageSize,
+            sorting,
+            columnFilters,
+            totalRecords: serverState.tableState?.totalRecords,
+            scrollId: serverState.tableState?.scrollId,
+            hasNextPage: serverState.tableState?.hasNextPage,
+            isLoading: true,
+            requestId: crypto.randomUUID()
+        };
 
-    //     debouncedRequestData(tableState);
-    // }
+        debouncedRequestData(tableState);
+    }
 
     // Utility function for debouncing
     function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
@@ -194,9 +209,9 @@
             }
 
             // Trigger server request for server-side tables
-            // if (serverSideConfig) {
-            //     triggerServerRequest();
-            // }
+            if (serverSideConfig) {
+                triggerServerRequest();
+            }
         },
         onColumnFiltersChange: (updater) => {
             if (typeof updater === 'function') {
@@ -206,13 +221,13 @@
             }
 
             // Trigger server request for server-side tables
-            // if (serverSideConfig) {
-            //     triggerServerRequest();
-            // }
+            if (serverSideConfig) {
+                triggerServerRequest();
+            }
         },
         onColumnVisibilityChange: (updater) => {
             if (typeof updater === 'function') {
-                appSettings.setTableColumnVisibilityFromObject(tableKey, updater(columnVisibility));
+                tableSettings.setTableColumnVisibilityFromObject(tableKey, updater(columnVisibility));
             } else {
                 throw new Error('onColumnVisibilityChange updater must be a function');
                 //columnVisibility = updater;
@@ -222,12 +237,12 @@
             if (typeof updater === 'function') {
                 const val = updater({ pageIndex, pageSize });
                 pageIndex = val.pageIndex;
-                appSettings.setTableNumRows(tableKey, val.pageSize);
+                tableSettings.setTableNumRows(tableKey, val.pageSize);
 
                 // Trigger server request for server-side tables
-                // if (serverSideConfig) {
-                //     triggerServerRequest();
-                // }
+                if (serverSideConfig) {
+                    triggerServerRequest();
+                }
             } else {
                 throw new Error('onPaginationChange updater must be a function');
             }
@@ -237,9 +252,9 @@
                 globalFilterProps.globalFilterValue = value;
 
                 // Trigger server request for server-side tables
-                // if (serverSideConfig) {
-                //     triggerServerRequest();
-                // }
+                if (serverSideConfig) {
+                    triggerServerRequest();
+                }
             }
         },
 
@@ -257,8 +272,15 @@
     });
 </script>
 
-<div class="space-y-4 {classes ? classes : ''} ">
-    <TableToolbar {table} {globalFilterProps} {facetedFilters} {toolbarContent} {beneathToolbarContent} />
+<div class="{classes ? classes : ''} ">
+    <div class="mb-4">
+        <TableToolbar {table} {globalFilterProps} {facetedFilters} {toolbarContent} {beneathToolbarContent} />
+    </div>
+    {#if paginationPlacement === 'top' || paginationPlacement === 'both'}
+        <div class="mt-2 pb-1">
+            <TablePagination {table} serverSide={serverSideConfig} {showRowsPerPage} />
+        </div>
+    {/if}
     <div class="rounded-md border h-full flex flex-col overflow-y-auto">
         <Table.Root class="h-full">
             <Table.Header>
@@ -291,5 +313,9 @@
             </Table.Body>
         </Table.Root>
     </div>
-    <TablePagination {table} serverSide={serverSideConfig} />
+    {#if paginationPlacement === 'bottom' || paginationPlacement === 'both'}
+        <div class="mt-2">
+            <TablePagination {table} serverSide={serverSideConfig} {showRowsPerPage} />
+        </div>
+    {/if}
 </div>

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

@@ -1,7 +1,17 @@
-import type { AppState } from '$client/app/app.state.svelte';
-import type { Column, ColumnFiltersState, Row, SortingState } from '@tanstack/table-core';
+import type { Column, ColumnFiltersState, Row, SortingState, VisibilityState } from '@tanstack/table-core';
 import type { Component } from 'svelte';
 
+/**
+ * Facade for table settings (column visibility, page size, etc.)
+ * This allows the pika-table component to be used without depending on AppState
+ */
+export interface TableSettingsFacade {
+    getTableColumnVisibilityObject(tableKey: string): VisibilityState;
+    getTableNumRows(tableKey: string, defaultValue: number): number;
+    setTableNumRows(tableKey: string, value: number): void;
+    setTableColumnVisibilityFromObject(tableKey: string, visibility: VisibilityState): void;
+}
+
 export interface FacetedFilterData {
     label: string;
     value: string;
@@ -44,7 +54,7 @@ export interface GlobalFilterProps {
 export interface RowActionMenuItemNode<TData> {
     label: string;
     icon?: Component;
-    onclick?: (row: Row<TData>, appState: AppState) => void;
+    onclick?: (row: Row<TData>) => void;
 }
 
 export interface RowActionMenuItemSubMenu<TData> {

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

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

package/src/pika/pika-toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-gray-200 hover:text-gray-900 data-[state=on]:bg-gray-200 data-[state=on]:text-gray-900 focus-visible:ring-ring inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-white",
+				outline:
+					"border-input shadow-sm hover:bg-gray-200 hover:text-gray-900 border bg-white",
+			},
+			size: {
+				default: "h-9 min-w-9 px-3",
+				sm: "h-8 min-w-8 px-2",
+				lg: "h-10 min-w-10 px-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from '../../shadcn/utils.js';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/src/pika/pika-toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};

package/src/pika/pika-toggle-group/toggle-group-item.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from '../../shadcn/utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		value: string;
+		class?: string;
+		disabled?: boolean;
+		children?: Snippet;
+	};
+
+	let {
+		value,
+		class: className,
+		disabled = false,
+		children
+	}: Props = $props();
+
+	const ctx = getToggleGroupCtx();
+	
+	const isSelected = $derived(() => {
+		const currentValue = ctx.getValue();
+		if (ctx.type === 'single') {
+			return currentValue === value;
+		} else {
+			const arr = Array.isArray(currentValue) ? currentValue : [];
+			return arr.includes(value);
+		}
+	});
+
+	function handleClick() {
+		if (!disabled) {
+			ctx.toggle(value);
+		}
+	}
+
+	// Determine if buttonWidth is a Tailwind class or CSS value
+	const widthClass = ctx.buttonWidth?.match(/^(w-|min-w-|max-w-)/) ? ctx.buttonWidth : undefined;
+	const widthStyle = ctx.buttonWidth && !widthClass ? `width: ${ctx.buttonWidth};` : '';
+</script>
+
+<button
+	type="button"
+	onclick={handleClick}
+	disabled={disabled}
+	class={cn(
+		// Base styles
+		'inline-flex items-center justify-center',
+		'text-sm font-medium',
+		'transition-colors',
+		'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+		'disabled:pointer-events-none disabled:opacity-50',
+		
+		// Size
+		'h-9 px-3',
+		
+		// White background by default
+		'bg-white',
+		
+		// Border for outline variant
+		'border border-input',
+		
+		// Selected state - gray background
+		isSelected() && 'bg-gray-100 text-gray-700',
+
+		// Hover state - use primary color from your theme
+		'hover:text-primary',
+		
+		// No rounded corners, borders between buttons
+		'border-l-0 first:border-l',
+		
+		// Focus
+		'focus:z-10 focus-visible:z-10',
+		
+		// Width
+		widthClass,
+		
+		// Flex
+		'min-w-0 flex-1 shrink-0',
+
+		
+		className
+	)}
+	style={widthStyle}
+>
+	{@render children?.()}
+</button>