@elyracode/stack-silt 0.9.10

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## [0.9.10] - 2026-06-19
+
+### Added
+- Initial release: SILT stack profile (Svelte 5, Inertia.js, Laravel, Tailwind CSS). Ships a deep `silt-stack` skill (Svelte 5 runes, the `@inertiajs/svelte` adapter, Laravel/Inertia controller and form patterns, TypeScript type sync, and common gotchas) and a `/silt:info` command.

package/README.md

@@ -0,0 +1,22 @@
+# @elyracode/stack-silt
+
+Elyra stack profile for **SILT** (Svelte 5, Inertia.js, Laravel, Tailwind CSS).
+
+## Install
+
+```
+elyra install npm:@elyracode/stack-silt
+```
+
+## What's included
+
+- **Skills**: Deep SILT stack knowledge (Inertia.js protocol, Svelte 5 runes — `$props`/`$state`/`$derived`/`$effect`, `@inertiajs/svelte` adapter, Laravel controller patterns, `useForm`, TypeScript type sync, partial reloads, file structure conventions, common gotchas)
+- **Commands**: `/silt:info` -- show stack profile status
+
+## Notes
+
+This profile targets **Svelte 5** (runes) with Inertia's `@inertiajs/svelte` adapter — plain Svelte driven by Laravel routing, not SvelteKit.
+
+## Stack Detection
+
+Elyra automatically detects SILT stack projects and suggests this package.

package/extensions/index.ts

@@ -0,0 +1,10 @@
+import type { ExtensionAPI } from "@elyracode/coding-agent";
+
+export default function (elyra: ExtensionAPI) {
+	elyra.registerCommand("silt:info", {
+		description: "Show detected SILT stack information",
+		handler: async (ctx) => {
+			ctx.ui.notify("info", "SILT stack profile loaded. Skills: silt-stack. Use /skill:silt-stack for full reference.");
+		},
+	});
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@elyracode/stack-silt",
+  "version": "0.9.10",
+  "description": "Elyra stack profile for SILT (Svelte 5, Inertia.js, Laravel, Tailwind CSS)",
+  "type": "module",
+  "keywords": [
+    "elyra-package",
+    "silt",
+    "svelte",
+    "inertia",
+    "laravel",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/stack-silt"
+  },
+  "elyra": {
+    "skills": [
+      "./skills"
+    ],
+    "extensions": [
+      "./extensions/index.ts"
+    ]
+  },
+  "peerDependencies": {
+    "@elyracode/coding-agent": "*",
+    "typebox": "*"
+  },
+  "scripts": {
+    "clean": "echo 'nothing to clean'",
+    "build": "echo 'nothing to build'",
+    "check": "echo 'nothing to check'"
+  }
+}

package/skills/silt-stack/SKILL.md

@@ -0,0 +1,390 @@
+---
+name: silt-stack
+description: Deep knowledge about the SILT stack - Svelte 5, Inertia.js, Laravel, and Tailwind CSS. Use when working on SILT stack projects, Inertia pages, Svelte 5 components with runes, Laravel controllers with Inertia responses, or TypeScript type sync between backend and frontend.
+---
+
+# SILT Stack Reference
+
+## Architecture
+
+The SILT stack connects:
+- **Laravel** as the backend (routing, controllers, Eloquent, middleware, validation)
+- **Inertia.js** as the glue layer (replaces traditional API + SPA routing)
+- **Svelte 5** with runes (`$props`, `$state`, `$derived`, `$effect`) for the frontend
+- **Tailwind CSS** for utility-first styling
+
+### How Inertia Works
+
+Inertia is NOT an API. It's a protocol:
+1. First request: Server returns a full HTML page with the Svelte app + initial page data as JSON
+2. Subsequent navigation: Inertia intercepts links, makes XHR requests, server returns only JSON props
+3. Svelte swaps the page component without a full page reload
+
+The server always controls routing. There is no client-side router (no SvelteKit routing, no `svelte-routing`).
+
+## Laravel Side
+
+### Controller Pattern
+```php
+use Inertia\Inertia;
+use Inertia\Response;
+
+class UserController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('Users/Index', [
+            'users' => User::query()
+                ->select('id', 'name', 'email')
+                ->paginate(10),
+            'filters' => request()->only(['search', 'role']),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('Users/Create');
+    }
+
+    public function store(StoreUserRequest $request)
+    {
+        User::create($request->validated());
+        return redirect()->route('users.index')
+            ->with('success', 'User created.');
+    }
+
+    public function edit(User $user): Response
+    {
+        return Inertia::render('Users/Edit', [
+            'user' => $user->only('id', 'name', 'email', 'role'),
+        ]);
+    }
+
+    public function update(UpdateUserRequest $request, User $user)
+    {
+        $user->update($request->validated());
+        return redirect()->route('users.index')
+            ->with('success', 'User updated.');
+    }
+
+    public function destroy(User $user)
+    {
+        $user->delete();
+        return redirect()->route('users.index')
+            ->with('success', 'User deleted.');
+    }
+}
+```
+
+### Shared Data (available on every page)
+```php
+// app/Http/Middleware/HandleInertiaRequests.php
+public function share(Request $request): array
+{
+    return [
+        ...parent::share($request),
+        'auth' => [
+            'user' => $request->user()?->only('id', 'name', 'email', 'role'),
+        ],
+        'flash' => [
+            'success' => fn () => $request->session()->get('success'),
+            'error' => fn () => $request->session()->get('error'),
+        ],
+    ];
+}
+```
+
+### Lazy Props (only loaded when needed)
+```php
+return Inertia::render('Users/Show', [
+    'user' => $user,
+    'activity' => Inertia::lazy(fn () => $user->activity()->latest()->get()),
+]);
+```
+
+### Partial Reloads
+```php
+// Only reload specific props
+return Inertia::render('Dashboard', [
+    'stats' => fn () => Stats::calculate(),
+    'notifications' => fn () => auth()->user()->unreadNotifications,
+]);
+```
+
+## Svelte 5 Side
+
+The Inertia adapter is `@inertiajs/svelte`. Page components receive their props directly — read them with the `$props()` rune.
+
+### Page Component Pattern
+```svelte
+<script lang="ts">
+import { Link, router } from '@inertiajs/svelte'
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.svelte'
+
+interface User {
+    id: number
+    name: string
+    email: string
+    role: string
+}
+
+interface Props {
+    users: {
+        data: User[]
+        links: Array<{ url: string | null; label: string; active: boolean }>
+        current_page: number
+        last_page: number
+    }
+    filters: {
+        search?: string
+        role?: string
+    }
+}
+
+let { users, filters }: Props = $props()
+
+function destroy(id: number) {
+    if (confirm('Are you sure?')) {
+        router.delete(route('users.destroy', id))
+    }
+}
+</script>
+
+<svelte:head><title>Users</title></svelte:head>
+
+<AuthenticatedLayout>
+    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Users</h1>
+            <Link href={route('users.create')} class="btn btn-primary">Add User</Link>
+        </div>
+
+        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-900">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                    {#each users.data as user (user.id)}
+                        <tr>
+                            <td class="px-6 py-4 whitespace-nowrap">{user.name}</td>
+                            <td class="px-6 py-4 whitespace-nowrap">{user.email}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right">
+                                <Link href={route('users.edit', user.id)} class="text-blue-600 hover:text-blue-900">Edit</Link>
+                                <button onclick={() => destroy(user.id)} class="ml-4 text-red-600 hover:text-red-900">Delete</button>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</AuthenticatedLayout>
+```
+
+### Runes (Svelte 5 reactivity)
+```svelte
+<script lang="ts">
+// Props (replaces `export let`)
+let { count = 0, label }: { count?: number; label: string } = $props()
+
+// Local reactive state (replaces top-level `let`)
+let quantity = $state(1)
+
+// Derived values (replaces `$:`)
+let total = $derived(quantity * count)
+
+// Side effects (replaces `$: { ... }` blocks)
+$effect(() => {
+    console.log('quantity changed to', quantity)
+})
+
+// Two-way bindable prop (replaces `export let` + bind)
+let { value = $bindable('') }: { value?: string } = $props()
+</script>
+```
+
+### Form Handling with useForm
+`useForm` from the Svelte adapter returns a store. Access fields with the `$` prefix and `bind:value`.
+```svelte
+<script lang="ts">
+import { useForm } from '@inertiajs/svelte'
+
+const form = useForm({
+    name: '',
+    email: '',
+    role: 'user',
+})
+
+function submit() {
+    $form.post(route('users.store'), {
+        onSuccess: () => $form.reset(),
+    })
+}
+</script>
+
+<form onsubmit={(e) => { e.preventDefault(); submit() }} class="space-y-4">
+    <div>
+        <label class="block text-sm font-medium text-gray-700">Name</label>
+        <input bind:value={$form.name} type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
+        {#if $form.errors.name}<p class="mt-1 text-sm text-red-600">{$form.errors.name}</p>{/if}
+    </div>
+    <div>
+        <label class="block text-sm font-medium text-gray-700">Email</label>
+        <input bind:value={$form.email} type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" />
+        {#if $form.errors.email}<p class="mt-1 text-sm text-red-600">{$form.errors.email}</p>{/if}
+    </div>
+    <button type="submit" disabled={$form.processing} class="btn btn-primary">
+        {$form.processing ? 'Saving...' : 'Save'}
+    </button>
+</form>
+```
+
+### Accessing Shared Page Data
+```svelte
+<script lang="ts">
+import { page } from '@inertiajs/svelte'
+// `page` is a store: read with $page
+</script>
+
+<p>Logged in as {$page.props.auth.user.name}</p>
+{#if $page.props.flash.success}
+    <div class="alert">{$page.props.flash.success}</div>
+{/if}
+```
+
+### TypeScript Type Definitions
+```typescript
+// resources/js/types/index.d.ts
+export interface User {
+    id: number
+    name: string
+    email: string
+    email_verified_at?: string
+    role: 'admin' | 'user'
+}
+
+export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
+    auth: {
+        user: User
+    }
+    flash: {
+        success?: string
+        error?: string
+    }
+}
+```
+
+### Inertia Router Methods
+```typescript
+import { router } from '@inertiajs/svelte'
+
+// Navigate
+router.visit('/users')
+router.get('/users')
+router.post('/users', data)
+router.put('/users/1', data)
+router.patch('/users/1', data)
+router.delete('/users/1')
+
+// With options
+router.post('/users', data, {
+    preserveScroll: true,
+    preserveState: true,
+    only: ['users'],          // Partial reload
+    onSuccess: () => {},
+    onError: (errors) => {},
+    onFinish: () => {},
+})
+
+// Reload current page props
+router.reload({ only: ['notifications'] })
+```
+
+### Links
+Use the `<Link>` component, or the `inertia` action on a plain anchor:
+```svelte
+<script>
+import { Link, inertia } from '@inertiajs/svelte'
+</script>
+
+<Link href={route('users.index')}>Users</Link>
+<a use:inertia href={route('users.create')}>New User</a>
+```
+
+## File Structure Conventions
+
+```
+app/
+  Http/
+    Controllers/      # Controllers return Inertia::render()
+    Middleware/
+      HandleInertiaRequests.php  # Shared data
+    Requests/         # Form validation
+  Models/
+resources/
+  js/
+    Pages/            # Inertia page components (maps to Inertia::render paths)
+      Users/
+        Index.svelte
+        Create.svelte
+        Edit.svelte
+      Dashboard.svelte
+    Components/       # Reusable Svelte components
+    Layouts/          # Layout components
+      AuthenticatedLayout.svelte
+      GuestLayout.svelte
+    lib/              # Shared helpers, stores, composables
+    types/            # TypeScript type definitions
+      index.d.ts
+    app.ts            # Svelte app bootstrap + Inertia setup
+routes/
+  web.php             # All routes (Inertia handles them server-side)
+```
+
+### App Bootstrap (app.ts)
+```typescript
+import { createInertiaApp } from '@inertiajs/svelte'
+import { mount } from 'svelte'
+
+createInertiaApp({
+    resolve: (name) => {
+        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+        return pages[`./Pages/${name}.svelte`]
+    },
+    setup({ el, App, props }) {
+        mount(App, { target: el, props })
+    },
+})
+```
+
+## Type Sync Pattern (Backend to Frontend)
+
+When changing data sent from Laravel to Svelte, update both sides:
+
+1. **Laravel controller** -- change what's passed to `Inertia::render()`
+2. **TypeScript types** -- update the interface in `resources/js/types/`
+3. **Svelte component** -- update the `$props()` type to match
+
+Example: Adding a `phone` field to User:
+1. Migration: `$table->string('phone')->nullable()`
+2. Controller: add `'phone'` to the select/only list
+3. TypeScript: add `phone?: string` to `User` interface
+4. Svelte: add the input field bound to the prop
+
+## Common Gotchas
+
+1. **No client-side router**: Inertia replaces routing. Use `<Link>`/`use:inertia` and `router` from `@inertiajs/svelte`. This is plain Svelte, NOT SvelteKit — there is no `+page.svelte`, no `load` functions, no file-based routing.
+2. **Runes, not Svelte 4 syntax**: Use `$props()` not `export let`, `$state()` not bare `let` for reactive state, `$derived()` not `$:`, `onclick` not `on:click`. Svelte 5 is the target.
+3. **Stores need the `$` prefix**: `page`, and the result of `useForm`, are stores. Read them as `$page`, `$form`. Forgetting the `$` is the most common SILT bug.
+4. **Validation errors**: Laravel validation errors are available via `$form.errors` or `$page.props.errors`. No manual error handling needed.
+5. **Flash messages**: Use Laravel's `->with('success', 'msg')` on redirects. Access via shared data in `HandleInertiaRequests.php`, read as `$page.props.flash.success`.
+6. **File uploads**: Use `$form.post()` with File values. Inertia handles multipart automatically.
+7. **SSR**: Inertia supports SSR with `@inertiajs/svelte`. Configure in `vite.config.ts` with the `laravel-vite-plugin`, and use `render` from the adapter in `ssr.ts`.
+8. **Ziggy routes**: Use `route('name')` via the Ziggy package. Never hardcode URLs.
+9. **Partial reloads**: Wrap expensive props in closures `fn () =>` in the controller. Request them with `router.reload({ only: ['prop'] })`.
+10. **Mounting**: Svelte 5 uses `mount()` from `svelte`, not `new App()`. The Inertia setup in `app.ts` reflects this.