### Install SvelteAdmin from GitHub

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Use these commands to install the latest development version directly from the GitHub repository.

```bash
pnpm add "@orbitale/svelte-admin@git://github.com/Orbitale/SvelteAdmin.git"

npm install --save "@orbitale/svelte-admin@git://github.com/Orbitale/SvelteAdmin.git"
```

--------------------------------

### Install SvelteAdmin via package manager

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Use these commands to add the SvelteAdmin package to your project dependencies.

```bash
pnpm add "@orbitale/svelte-admin"

npm install --save "@orbitale/svelte-admin"
```

--------------------------------

### Define CRUD Operations and Dashboard Configuration

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Set up a complete dashboard configuration including theme, admin settings, side menu, and CRUD definitions. This example defines a 'books' CRUD with list, view, new, edit, and delete operations.

```typescript
// src/lib/Dashboard.ts - Complete dashboard setup
import { DashboardDefinition, UrlAction, CrudDefinition, TextField, List, View, New, Edit, Delete, CallbackStateProvider, CallbackStateProcessor } from '@orbitale/svelte-admin';
import { carbon } from '@orbitale/svelte-admin/themes/svelte';
import Home from 'carbon-icons-svelte/lib/Home.svelte';
import Book from 'carbon-icons-svelte/lib/Book.svelte';
import Pen from 'carbon-icons-svelte/lib/Pen.svelte';

type Book = { id: string; title: string };

const bookCrud = new CrudDefinition<Book>({
    name: 'books',
    label: { singular: 'Book', plural: 'Books' },
    operations: [
        new List([new TextField('title', 'Title')], [
            new UrlAction('Edit', '/admin/books/edit', Pen)
        ]),
        new View([new TextField('title', 'Title')]),
        new New([new TextField('title', 'Title')]),
        new Edit([new TextField('title', 'Title')]),
        new Delete([new TextField('title', 'Title')], new UrlAction('List', '/admin/books/list'))
    ],
    stateProvider: new CallbackStateProvider(async (op, params) => null),
    stateProcessor: new CallbackStateProcessor((data, op, params) => Promise.resolve())
});

export const dashboard = new DashboardDefinition({
    theme: carbon,
    adminConfig: {
        defaultLocale: 'en',
        rootUrl: '/admin',
        head: { brandName: 'My App', appName: 'Admin' }
    },
    sideMenu: [
        new UrlAction('Home', '/', Home),
        new UrlAction('Books', '/admin/books/list', Book)
    ],
    cruds: [bookCrud]
});
```

--------------------------------

### SvelteKit Admin Route Component (Concise)

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

A minimal Svelte component for a dynamic admin route, suitable for quick setup. It imports necessary SvelteKit modules and the getRequestParams function to handle route and query parameters, rendering the dashboard component reactively.

```html
<script lang="ts">
	import { page } from '$app/stores';
	import { browser } from '$app/environment';
	import { getRequestParams } from '@orbitale/svelte-admin';

	import { dashboard } from '$lib/Dashboard';

	$: crud = $page.params.crud;
	$: operation = $page.params.operation;
	$: requestParameters = getRequestParams($page, browser);
</script>

{#key $page}
<svelte:component
	this="{dashboard.theme.dashboard}"
	{dashboard}
	{crud}
	{operation}
	{requestParameters}
/>
{/key}
```

--------------------------------

### Configure CrudEntity Field for Relationships

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use CrudEntityField to link to other CRUD entities. Requires specifying the related crud_name and operations for listing and getting entities.

```typescript
const authorField = new CrudEntityField('author_id', 'Author', {
    crud_name: 'authors',  // Reference to another CRUD
    list_provider_operation: {
        name: 'entity_list',
        label_field: 'name',
        value_field: 'id'
    },
    get_provider_operation: {
        name: 'entity_view',
        entity_field: 'name'
    }
});
```

--------------------------------

### Render Dashboard with Dynamic Routing

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Create a SvelteKit route to capture CRUD and operation parameters for displaying the appropriate view. Use the `{#key}` block to re-render when page parameters change.

```svelte
<!-- src/routes/admin/[crud]/[operation]/+page.svelte -->
<script lang="ts">
    import { page } from '$app/stores';
    import { browser } from '$app/environment';
    import { getRequestParams } from '@orbitale/svelte-admin';

    // Import your dashboard configuration
    import { dashboard } from '$lib/Dashboard';

    // Extract route parameters reactively
    $: crud = $page.params.crud;           // e.g., 'books'
    $: operation = $page.params.operation; // e.g., 'list', 'edit', 'view'

    // Get request parameters from URL (includes query string params like ?id=123)
    $: requestParameters = getRequestParams($page, browser);
</script>

<!-- Re-render when page changes using {#key} block -->
{#key $page}
    <svelte:component
        this={dashboard.theme.dashboard}
        {dashboard}
        {crud}
        {operation}
        {requestParameters}
    />
{/key}
```

--------------------------------

### Configure Columns for Layout

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use Columns to organize fields into a responsive grid layout. Define column names, labels, sizes, offsets, and the fields within each column.

```typescript
const columnsField = new Columns('layout', 'Details', [
    {
        name: 'left',
        label: 'Basic Info',
        size: 8,
        fields: [titleField, descriptionField]
    },
    {
        name: 'right',
        label: 'Metadata',
        size: 4,
        offset: 0,
        fields: [priceField, publishedAtField]
    }
]);
```

--------------------------------

### Implement Custom Persistence with CallbackStateProcessor

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use CallbackStateProcessor to define custom logic for create, update, and delete operations. Requires importing necessary types and defining simulated API functions.

```typescript
import {
    CallbackStateProcessor,
    type RequestParameters
} from '@orbitale/svelte-admin';

type Book = { id: string; title: string; description: string; publishedAt: string };

// Simulated API
const booksApi = {
    create: (book: Book) => fetch('/api/books', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(book)
    }),
    update: (id: string, book: Book) => fetch(`/api/books/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(book)
    }),
    delete: (id: string) => fetch(`/api/books/${id}`, { method: 'DELETE' })
};

export const bookStateProcessor = new CallbackStateProcessor<Book>(
    function(data, operation, requestParameters: RequestParameters = {}) {
        const entity = data as Book;

        // Handle DELETE operation
        if (operation.name === 'delete') {
            const id = (requestParameters.id || '').toString();
            return booksApi.delete(id).then(() => {});
        }

        // Handle EDIT operation
        if (operation.name === 'edit') {
            const id = (requestParameters.id || '').toString();
            entity.id = id;
            return booksApi.update(id, entity).then(() => {});
        }

        // Handle NEW operation
        if (operation.name === 'new') {
            entity.id = crypto.randomUUID();
            return booksApi.create(entity).then(() => {});
        }

        console.error(`Unsupported operation: ${operation.name}`);
        return Promise.resolve();
    }
);
```

--------------------------------

### Configure List Operation Filters

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Set up different filter types for string, boolean, numeric, date range, and existence checks in a List operation. Ensure necessary filter components are imported.

```typescript
import {
    TextFilter,
    BooleanFilter,
    NumericFilter,
    DateRangeFilter,
    ExistsFilter,
    List,
    TextField
} from '@orbitale/svelte-admin';

const fields = [
    new TextField('title', 'Title'),
    new TextField('status', 'Status')
];

const listOperation = new List(
    fields,
    [], // Item actions
    {
        filters: [
            // Text filter for string searching
            new TextFilter('title', 'Title contains'),
            new TextFilter('description', 'Description contains'),

            // Boolean filter for true/false values
            new BooleanFilter('published', 'Is Published'),

            // Numeric filter for number ranges
            new NumericFilter('price', 'Price'),

            // Date range filter for date periods
            new DateRangeFilter('createdAt', 'Created between'),
            new DateRangeFilter('publishedAt', 'Published between'),

            // Exists filter for checking null/non-null values
            new ExistsFilter('deletedAt', 'Is Deleted')
        ],
        pagination: { enabled: true, itemsPerPage: 25 }
    }
);
```

--------------------------------

### Configure URL Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use UrlField for URL input. Supports placeholder and openInNewTab options.

```typescript
const websiteField = new UrlField('website', 'Website', {
    placeholder: 'https://example.com',
    openInNewTab: true
});
```

--------------------------------

### Implement a custom CallbackStateProvider

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Define a data provider by implementing the CallbackStateProvider class with custom logic for list, view, edit, and entity operations.

```typescript
import {
    CallbackStateProvider,
    PaginatedResults,
    type RequestParameters
} from '@orbitale/svelte-admin';

type Book = { id: string; title: string; description: string; publishedAt: string };

// Simulated API or data storage
const booksApi = {
    getAll: () => fetch('/api/books').then(r => r.json()),
    getById: (id: string) => fetch(`/api/books/${id}`).then(r => r.json()),
    search: (filters: Record<string, unknown>) =>
        fetch('/api/books/search', {
            method: 'POST',
            body: JSON.stringify(filters)
        }).then(r => r.json())
};

export const bookStateProvider = new CallbackStateProvider<Book>(
    async function(operation, requestParameters: RequestParameters = {}) {
        console.log('Provider called:', operation.name, requestParameters);

        // Handle LIST operation with pagination and filters
        if (operation.name === 'list') {
            const page = parseInt((requestParameters.page || '1').toString());
            const itemsPerPage = 10;
            const filters = requestParameters.filters || {};

            // Fetch all books (in real app, send pagination to API)
            let books: Book[] = await booksApi.getAll();

            // Apply filters
            if (filters.title) {
                books = books.filter(b =>
                    b.title.toLowerCase().includes(filters.title.toString().toLowerCase())
                );
            }
            if (filters.publishedAt) {
                const [startDate, endDate] = filters.publishedAt as [string?, string?];
                if (startDate) {
                    books = books.filter(b => new Date(b.publishedAt) >= new Date(startDate));
                }
                if (endDate) {
                    books = books.filter(b => new Date(b.publishedAt) <= new Date(endDate));
                }
            }

            // Apply sorting
            if (requestParameters.sort) {
                Object.entries(requestParameters.sort).forEach(([field, order]) => {
                    books.sort((a, b) => {
                        const multiplier = order === 'ASC' ? 1 : -1;
                        return multiplier * String(a[field as keyof Book])
                            .localeCompare(String(b[field as keyof Book]));
                    });
                });
            }

            // Paginate results
            const paginatedBooks = books.slice(
                itemsPerPage * (page - 1),
                itemsPerPage * page
            );

            // Return paginated results
            return new PaginatedResults(
                page,
                Math.ceil(books.length / itemsPerPage),
                books.length,
                paginatedBooks
            );
        }

        // Handle VIEW and EDIT operations - fetch single entity
        if (operation.name === 'view' || operation.name === 'edit') {
            const id = (requestParameters.id || '').toString();
            return await booksApi.getById(id);
        }

        // Handle entity_view for CrudEntityField references
        if (operation.name === 'entity_view') {
            const id = (requestParameters.field_value || '').toString();
            return await booksApi.getById(id);
        }

        // Handle entity_list for CrudEntityField dropdowns
        if (operation.name === 'entity_list') {
            return await booksApi.getAll();
        }

        // NEW operation doesn't need initial data
        return null;
    }
);
```

--------------------------------

### Define a Dashboard configuration

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Create a DashboardDefinition object to configure the admin panel metadata, side menu, and CRUD resources.

```typescript
// src/lib/Dashboard.ts

// Some fancy icons for a neat UI:
import Book from 'carbon-icons-svelte/lib/Book.svelte';
import Home from 'carbon-icons-svelte/lib/Home.svelte';

// SvelteAdmin classes:
import { DashboardDefinition, UrlAction } from '@orbitale/svelte-admin';

// See later:
import booksCrud from './booksCrud';

// The dashboard setup:
export const dashboard = new DashboardDefinition({
	// Some metadata related to your admin panel
	admin: {
		defaultLocale: 'en',
		rootUrl: '/admin',
		head: {
			brandName: '{ Your company/brand name }',
			appName: '{ Your app name }'
		}
	},

	// The main menu on the left side of the page
	sideMenu: [
		new UrlAction('Homepage', '/', Home),
		new UrlAction('Book', '/admin/books/list', Book)
	],

	// Here you set all the Crud configurations of your admin panel
	// For organization purposes, we recommend you to define your Crud configs
	//   in separate typescript files, it makes it easier to read and maintain.
	cruds: [booksCrud]
});
```

--------------------------------

### SvelteKit Admin Route Component (Detailed)

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

This Svelte component defines a dynamic route for an admin dashboard. It uses SvelteKit's page store and environment module to access route parameters and browser environment. The getRequestParams function helps extract URL parameters, and the dashboard component is rendered reactively.

```html
<script lang="ts">
	// src/routes/admin/[crud]/[operation]/+page.svelte

	// This is a custom Svelte store created by SvelteKit,
	//   it points to an instance of a Page object,
	//   which can allow us to gather data from the current page,
	//   such as the window.URL object, or the dynamic parameters of your route.
	// More details about the "page" store there:
	//   https://kit.svelte.dev/docs/modules#$app-stores-page
	import { page } from '$app/stores';

	// Same here as the previous "page" store, but the "browser" var contains
	//   a boolean that is set to "false" during server-side rendering, and to
	//   "true" when the Svelte component is mounted to the DOM.
	import { browser } from '$app/environment';

	// This function helps retrieving the [crud] and [operation] variables from the URL,
	// as well as the potential query string params like "?id=..."
	import { getRequestParams } from '@orbitale/svelte-admin';

	// That's your custom dashboard!
	// The "$lib" alias is configured by SvelteKit,
	//   it always points to your "src/lib/" directory.
	import { dashboard } from '$lib/Dashboard';

	// The "$:") syntax is valid Javascript code that tells Svelte
	//   that the following code is reactive, based on the values it depends on.
	// On this code, reactivity depends on "page" and "browser" variables.
	$: crud = $page.params.crud;
	$: operation = $page.params.operation;
	$: requestParameters = getRequestParams($page, browser);
	// Note: prefixing "page" with "$") makes sure we refer to the store's actual value.
	// If we didn't add this "$") prefix, we would use an object containing a method ".subscribe()", but we can use it to execude code whenever the store data changes. The "$") prefix sort of shortens everything for us automatically.
</script>

<!--
The "key" block makes sure its content is re-rendered whenever its arguments change.
Then, if the "$page" changes, the <svelte:component> component is re-rendered,
which is exactly what we expect when the current web page actually changes!
-->
{#key $page}
<svelte:component
	this="{dashboard.theme.dashboard}"
	{dashboard}
	{crud}
	{operation}
	{requestParameters}
/>
{/key}
```

--------------------------------

### Define a Crud configuration in SvelteAdmin

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Create a CrudDefinition object to manage entity operations, fields, and data handling. This configuration requires importing necessary SvelteAdmin components and defining the fields and operations for the entity.

```typescript
// src/lib/booksCrud.ts

// Again, some icons to pop your admin!
import Pen from 'carbon-icons-svelte/lib/Pen.svelte';
import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';

// SvelteAdmin classes:
import {
	TextField,
	TextareaField,
	UrlAction,
	List,
	Edit,
	Delete,
	CallbackStateProcessor,
	CallbackStateProvider
} from '@orbitale/svelte-admin';

// These are the most common fields you want for your "Book" entity:
const fields = [
	new TextField('title', 'Title', { placeholder: "Enter the book's title" }),
	new TextareaField('description', 'description', {
		placeholder: "Enter the book's descrption",
		help: "Please don't make a summary of the book, remember to not spoil your readers!"
	})
];
// Note: these fields can of course change based on different pages/actions,
//   so feel free to spread this out if you have more complex admins!

// Finally: the actual Crud object!
export const booksCrud = new CrudDefinition(
	// This is a unique name that will serve as identifier for the Crud:
	'books',

	{
		// These labels are used to display titles or operation messages,
		// If you add them to your own translation dictionary, they can be translated too!
		// (see more about translations below)
		label: { singular: 'Book', plural: 'Books' },

		// The "operations" are the actual Crud pages you will use.
		// SvelteAdmin has some generic ones for you, but you can also create your own!
		operations: [
			// Basic data grid listing all your Books.
			// Will display "edit" and "delete" buttons on the right of the list.
			new List(fields, [
				new UrlAction('Edit', '/admin/books/edit', Pen),
				new UrlAction('Delete', '/admin/books/delete', TrashCan)
			]),

			// Straightforward "edit" form, can be accessed via the "edit" link above.
			new Edit(fields, []),

			// Deletion page with confirmation message and buttons,
			// accessed via the "delete" link configured above
			new Delete(fields, new UrlAction('List', '/admin/books/list', null))
		],

		// See below about state processors and providers.
		stateProvider: new CallbackStateProvider(function (operation, requestParameters = {}) {
			console.info('TODO: return actual data, like from an API');

			return Promise.resolve(null);
		}),

		// See below about state processors and providers.
		stateProcessor: new CallbackStateProcessor(function (data, operation, requestParameters = {}) {
			console.info('TODO: process new, edit or delete data based on the current operation');

			return Promise.resolve();
		})
	}
);
```

--------------------------------

### Define List Operation Actions

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Implement various actions including URL-based navigation and JavaScript callbacks for list items and global operations. Import necessary action and icon components.

```typescript
import {
    UrlAction,
    CallbackAction,
    List,
    TextField
} from '@orbitale/svelte-admin';
import Pen from 'carbon-icons-svelte/lib/Pen.svelte';
import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
import Add from 'carbon-icons-svelte/lib/Add.svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';

// URL action with icon
const editAction = new UrlAction('Edit', '/admin/books/edit', Pen);

// URL action with custom HTML attributes
const externalLink = new UrlAction('Docs', 'https://docs.example.com', null, {
    htmlAttributes: {
        rel: 'external',
        target: '_blank'
    }
});

// URL action generates URLs with entity ID automatically
// For item { id: '123' }, generates: /admin/books/view?id=123
const viewAction = new UrlAction('View', '/admin/books/view');

// URL action with custom parameter placeholder
// For item { id: '123' }, generates: /admin/books/123/edit
const editWithParam = new UrlAction('Edit', '/admin/books/:id/edit', Pen);

// Callback action for custom JavaScript logic
const exportAction = new CallbackAction(
    'Export',
    Download,
    (item) => {
        console.log('Exporting item:', item);
        // Custom export logic
    },
    { buttonKind: 'ghost' }
);

// Callback action for batch operations
const deleteSelectedAction = new CallbackAction(
    'Delete Selected',
    TrashCan,
    () => {
        if (confirm('Delete all selected items?')) {
            // Batch delete logic
        }
    },
    { buttonKind: 'danger' }
);

// Using actions in List operation
const listOperation = new List(
    [new TextField('title', 'Title')],
    // Per-item actions (shown on each row)
    [
        new UrlAction('View', '/admin/books/view'),
        new UrlAction('Edit', '/admin/books/edit', Pen),
        new UrlAction('Delete', '/admin/books/delete', TrashCan)
    ],
    {
        // Global actions (shown in toolbar)
        globalActions: [
            new UrlAction('New Book', '/admin/books/new', Add),
            exportAction
        ],
        // Batch actions (for selected items)
        batchActions: [
            deleteSelectedAction
        ]
    }
);
```

--------------------------------

### Configure Custom Dictionaries for i18n

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Provide custom dictionaries to override or extend built-in translations for different locales. Initialize locale programmatically or through the Dashboard definition.

```typescript
import { DashboardDefinition, initLocale, type Dictionaries } from '@orbitale/svelte-admin';
import { carbon } from '@orbitale/svelte-admin/themes/svelte';

// Define custom translations
const customDictionaries: Dictionaries = {
    en: {
        'crud.list.label': 'List',
        'crud.new.label': 'Create New',
        'crud.edit.label': 'Edit',
        'crud.delete.label': 'Delete',
        'crud.view.label': 'View Details',
        'my_app.welcome': 'Welcome to the Admin Panel',
        'my_app.books.empty': 'No books found'
    },
    fr: {
        'crud.list.label': 'Liste',
        'crud.new.label': 'Créer',
        'crud.edit.label': 'Modifier',
        'crud.delete.label': 'Supprimer',
        'crud.view.label': 'Voir les détails',
        'my_app.welcome': 'Bienvenue dans le panneau d\'administration',
        'my_app.books.empty': 'Aucun livre trouvé'
    },
    es: {
        'crud.list.label': 'Lista',
        'crud.new.label': 'Crear',
        'crud.edit.label': 'Editar',
        'crud.delete.label': 'Eliminar',
        'crud.view.label': 'Ver detalles'
    }
};

// Initialize locale programmatically
initLocale('en', customDictionaries);

// Or provide dictionaries through Dashboard
export const dashboard = new DashboardDefinition({
    theme: carbon,
    adminConfig: {
        defaultLocale: 'fr',  // Set default locale
        rootUrl: '/admin',
        head: { brandName: 'Admin', appName: 'Panel' }
    },
    localeDictionaries: customDictionaries,  // Custom translations
    cruds: []
});
```

--------------------------------

### Configure Pagination for List Operations

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Enables paginated data responses for StateProviders in List operations. Configure pagination settings like items per page within the List operation.

```typescript
import {
    PaginatedResults,
    CallbackStateProvider,
    List,
    TextField
} from '@orbitale/svelte-admin';

type Entity = { id: string; name: string };

// Configure pagination in List operation
const listOperation = new List(
    [new TextField('name', 'Name')],
    [],
    {
        pagination: {
            enabled: true,
            itemsPerPage: 25  // Items per page
        }
    }
);

// Return paginated results from StateProvider
const stateProvider = new CallbackStateProvider<Entity>(
    async (operation, params) => {
        if (operation.name === 'list') {
            const page = parseInt((params.page || '1').toString());
            const itemsPerPage = 25;

            // Fetch from API with pagination
            const response = await fetch(
                `/api/entities?page=${page}&limit=${itemsPerPage}`
            );
            const { items, total } = await response.json();

            // Return PaginatedResults object
            return new PaginatedResults<Entity>(
                page,                              // Current page number
                Math.ceil(total / itemsPerPage),   // Total number of pages
                total,                             // Total number of items
                items                              // Items for current page
            );
        }
        return null;
    }
);
```

--------------------------------

### Configure Textarea Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use TextareaField for multi-line text input. Supports placeholder and help text.

```typescript
const descriptionField = new TextareaField('description', 'Description', {
    placeholder: 'Enter description',
    required: false,
    help: 'Provide detailed information'
});
```

--------------------------------

### Configure Svelte Admin Dashboard Definition

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Defines the dashboard structure, including theme, admin configuration, side menu, and top-right menu items. Supports nested submenus and callback actions for menu items.

```typescript
import {
    DashboardDefinition,
    UrlAction,
    CallbackAction,
    Submenu,
    Divider
} from '@orbitale/svelte-admin';
import { carbon } from '@orbitale/svelte-admin/themes/svelte';
import Home from 'carbon-icons-svelte/lib/Home.svelte';
import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
import User from 'carbon-icons-svelte/lib/User.svelte';
import Logout from 'carbon-icons-svelte/lib/Logout.svelte';

export const dashboard = new DashboardDefinition({
    theme: carbon,
    adminConfig: {
        defaultLocale: 'en',
        rootUrl: '/admin',
        head: { brandName: 'Admin', appName: 'Dashboard' }
    },

    // Side menu (left navigation)
    sideMenu: [
        new UrlAction('Home', '/', Home),
        new UrlAction('Users', '/admin/users/list', User),

        // Nested submenu
        new Submenu('Settings', Settings, [
            new UrlAction('General', '/admin/settings/general'),
            new UrlAction('Security', '/admin/settings/security'),
            new UrlAction('Notifications', '/admin/settings/notifications')
        ]),

        // Callback action
        new CallbackAction('Show Alert', null, () => {
            alert('Menu callback executed!');
        })
    ],

    // Top-right menu (user actions)
    topRightMenu: [
        new UrlAction('Profile', '/profile', User),
        new Submenu('Account', null, [
            new UrlAction('Settings', '/settings'),
            new UrlAction('Billing', '/billing'),
            new Divider(),  // Visual separator
            new CallbackAction('Logout', Logout, () => {
                // Logout logic
                window.location.href = '/logout';
            })
        ])
    ],

    cruds: []
});

// Dynamic menu updates via stores
dashboard.stores.sideMenu.update((links) => {
    links.push(new UrlAction('New Link', '/new-page'));
    return [...links];
});
```

--------------------------------

### Configure DashboardDefinition in Svelte Admin

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use DashboardDefinition to set up the theme, admin configuration, navigation menus, and all CRUD definitions for your admin panel. Ensure all necessary CRUD definitions are imported.

```typescript
import { DashboardDefinition, UrlAction, CallbackAction, Submenu } from '@orbitale/svelte-admin';
import { carbon } from '@orbitale/svelte-admin/themes/svelte';
import Home from 'carbon-icons-svelte/lib/Home.svelte';
import Book from 'carbon-icons-svelte/lib/Book.svelte';
import User from 'carbon-icons-svelte/lib/User.svelte';

// Import your CRUD definitions
import { bookCrud } from './BookCrud';
import { authorCrud } from './AuthorCrud';

export const dashboard = new DashboardDefinition({
    // Theme configuration (Carbon Design System included)
    theme: carbon,

    // Admin panel metadata
    adminConfig: {
        defaultLocale: 'en',
        autoCloseSideMenu: false,
        rootUrl: '/admin',
        head: {
            brandName: 'My Company',
            appName: 'Admin Panel'
        }
    },

    // Left sidebar navigation
    sideMenu: [
        new UrlAction('Homepage', '/', Home),
        new UrlAction('Books', '/admin/books/list', Book),
        new UrlAction('Authors', '/admin/authors/list', User),
        new CallbackAction('Alert', null, () => alert('Clicked!ൊന്ന')), // Corrected alert message
        new Submenu('Resources', null, [
            new UrlAction('Submenu Item 1', '#', Book),
            new UrlAction('Submenu Item 2', '#', Book)
        ])
    ],

    // Top-left menu items
    topLeftMenu: [
        new UrlAction('API Docs', '/docs', null, { htmlAttributes: { rel: 'external' } })
    ],

    // Top-right menu items
    topRightMenu: [
        new UrlAction('Profile', '/profile'),
        new Submenu('Settings', null, [
            new UrlAction('Preferences', '/settings/preferences'),
            new UrlAction('Logout', '/logout')
        ])
    ],

    // Custom translations (merged with defaults)
    localeDictionaries: {
        en: { my_custom_key: 'My Translation' },
        fr: { my_custom_key: 'Ma Traduction' }
    },

    // All CRUD definitions
    cruds: [bookCrud, authorCrud]
});

```

--------------------------------

### Display Toast Notifications

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Provides functions for displaying success, error, warning, and info notifications to the user. Can also be used directly with the Toast class for custom configurations.

```typescript
import {
    success,
    error,
    warning,
    info,
    Toast
} from '@orbitale/svelte-admin';

// Simple notification functions
function handleSave() {
    try {
        // Save operation...
        success('Record saved successfully!');
    } catch (e) {
        error('Failed to save record: ' + e.message);
    }
}

function handleWarning() {
    warning('This action cannot be undone');
}

function handleInfo() {
    info('Processing your request...');
}

// Using Toast class directly for more control
function showCustomToast() {
    const toast = new Toast('Custom message\nWith multiple lines', 'success');
    toast.show();
}

// Example in StateProcessor
import { CallbackStateProcessor } from '@orbitale/svelte-admin';

const processor = new CallbackStateProcessor((data, operation, params) => {
    if (operation.name === 'delete') {
        return fetch(`/api/items/${params.id}`, { method: 'DELETE' })
            .then(() => {
                success('Item deleted successfully');
            })
            .catch((err) => {
                error('Failed to delete: ' + err.message);
                throw err;
            });
    }
    return Promise.resolve();
});
```

--------------------------------

### Configure Date Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use DateField for date input. Supports sortable and formFormat options.

```typescript
const publishedAtField = new DateField('publishedAt', 'Publication Date', {
    sortable: true,
    formFormat: 'Y-m-d'  // Date format for forms
});
```

--------------------------------

### Define an entity CRUD configuration

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Configures a CrudDefinition instance with fields, operations, and data handling callbacks for a specific entity type.

```typescript
import {
    CrudDefinition,
    TextField,
    TextareaField,
    DateField,
    NumberField,
    List,
    View,
    New,
    Edit,
    Delete,
    UrlAction,
    TextFilter,
    DateRangeFilter,
    CallbackStateProvider,
    CallbackStateProcessor,
    PaginatedResults,
    type RequestParameters
} from '@orbitale/svelte-admin';
import Pen from 'carbon-icons-svelte/lib/Pen.svelte';
import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
import ViewIcon from 'carbon-icons-svelte/lib/View.svelte';

// Define your entity type
type Book = {
    id: string;
    title: string;
    description: string;
    publishedAt: string;
    price: number;
};

// Define fields for the entity
const fields = [
    new TextField('title', 'Title', { placeholder: 'Enter title', sortable: true }),
    new TextareaField('description', 'Description', {
        placeholder: 'Enter description',
        help: 'Provide a brief summary'
    }),
    new DateField('publishedAt', 'Published At', { sortable: true }),
    new NumberField('price', 'Price', { min: 0, max: 1000 })
];

const IdField = new TextField('id', 'ID');

export const bookCrud = new CrudDefinition<Book>({
    name: 'books',
    label: { singular: 'Book', plural: 'Books' },
    identifierFieldName: 'id',  // Default identifier field
    minStateLoadingTimeMs: 400, // Minimum loading time to prevent UI flickering

    operations: [
        // List operation with actions, pagination, and filters
        new List(
            [IdField, ...fields],
            [
                new UrlAction('View', '/admin/books/view', ViewIcon),
                new UrlAction('Edit', '/admin/books/edit', Pen),
                new UrlAction('Delete', '/admin/books/delete', TrashCan)
            ],
            {
                globalActions: [
                    new UrlAction('New Book', '/admin/books/new', Pen)
                ],
                batchActions: [], // Actions for selected items
                pagination: { enabled: true, itemsPerPage: 10 },
                filters: [
                    new TextFilter('title', 'Title contains'),
                    new TextFilter('description', 'Description contains'),
                    new DateRangeFilter('publishedAt', 'Published between')
                ]
            }
        ),
        new View([IdField, ...fields]),
        new New(fields),
        new Edit(fields),
        new Delete(fields, new UrlAction('Back to List', '/admin/books/list'))
    ],

    // Data fetching
    stateProvider: new CallbackStateProvider<Book>(async (operation, params) => {
        // Implementation shown in StateProvider section
        return null;
    }),

    // Data persistence
    stateProcessor: new CallbackStateProcessor<Book>((data, operation, params) => {
        // Implementation shown in StateProcessor section
        return Promise.resolve();
    })
});
```

--------------------------------

### Configure Array Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use ArrayField for lists of values, defining an inner field type for array elements. Supports help text.

```typescript
const tagsField = new ArrayField('tags', 'Tags',
    new TextField('tag', 'Tag'),  // Inner field type
    { help: 'Add multiple tags' }
);
```

--------------------------------

### Configure Toggle Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use ToggleField for boolean values, providing a switch interface. Supports help text.

```typescript
const publishedField = new ToggleField('published', 'Published', {
    help: 'Toggle to publish'
});
```

--------------------------------

### Configure Number Field with Range

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use NumberField for numerical input. Supports min, max, placeholder, and required options.

```typescript
const priceField = new NumberField('price', 'Price', {
    min: 0,
    max: 10000,
    placeholder: 'Enter price',
    required: true
});
```

--------------------------------

### Configure custom translations

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Provides custom translation dictionaries to the DashboardDefinition to override or extend existing labels.

```typescript
export const dashboard = new DashboardDefinition({
	// ...
	localeDictionaries: {
		en: {
			my_text: 'My Translation'
		}
	}
});
```

--------------------------------

### Configure Email Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use EmailField for email input, with built-in validation. Supports placeholder and required options.

```typescript
const emailField = new EmailField('email', 'Email Address', {
    placeholder: 'user@example.com',
    required: true
});
```

--------------------------------

### Implement StateProcessor interface

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Defines the structure for a state processor class used to handle data operations.

```typescript
export interface StateProcessor<T> {
	process(
		data: StateProcessorInput<T>,
		operation: CrudOperation,
		requestParameters: RequestParameters
	): void;
}
```

--------------------------------

### Configure Text Field with Validation

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use TextField for single-line text input. Supports options like required, disabled, sortable, maxLength, stripTags, and help text.

```typescript
const titleField = new TextField('title', 'Title', {
    placeholder: 'Enter title',
    required: true,
    disabled: false,
    sortable: true,
    maxLength: 100,
    stripTags: true,
    help: 'Maximum 100 characters'
});
```

--------------------------------

### StateProvider Interface Definition

Source: https://github.com/orbitale/svelteadmin/blob/main/README.md

Defines the interface for a StateProvider, which is responsible for fetching data for a specific Crud operation. It takes the operation type and request parameters, returning a Promise that resolves to data.

```typescript
export interface StateProvider<T> {
	provide(action: CrudOperation, requestParameters: RequestParameters): StateProviderResult<T>;
}
```

--------------------------------

### Configure Checkbox Field

Source: https://context7.com/orbitale/svelteadmin/llms.txt

Use CheckboxField for boolean values. Supports required option.

```typescript
const activeField = new CheckboxField('active', 'Is Active', {
    required: false
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.