@elyracode/stack-tall 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @elyracode/stack-tall
+
+Elyra stack profile for **TALL** (Tailwind CSS, Alpine.js, Laravel, Livewire 4, Flux UI).
+
+## Install
+
+```
+elyra install npm:@elyracode/stack-tall
+```
+
+## What's included
+
+- **Skills**: Deep TALL stack knowledge (Livewire 4 lifecycle, attributes, hydration rules, Alpine patterns, Flux UI components, file structure conventions, common gotchas)
+- **Commands**: `/tall:info` -- show stack profile status
+
+## Stack Detection
+
+Elyra automatically detects TALL stack projects and suggests this package.

package/extensions/index.ts

@@ -0,0 +1,13 @@
+import type { ExtensionAPI } from "@elyracode/coding-agent";
+
+export default function (elyra: ExtensionAPI) {
+    // The TALL skill is auto-loaded from the skills/ directory.
+    // This extension adds stack-aware commands.
+
+    elyra.registerCommand("tall:info", {
+        description: "Show detected TALL stack information",
+        handler: async (ctx) => {
+            ctx.ui.notify("info", "TALL stack profile loaded. Skills: tall-stack. Use /skill:tall-stack for full reference.");
+        },
+    });
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@elyracode/stack-tall",
+  "version": "0.3.0",
+    "description": "Elyra stack profile for TALL (Tailwind, Alpine.js, Laravel, Livewire 4, Flux UI)",
+  "type": "module",
+  "keywords": ["elyra-package", "tall", "laravel", "livewire", "tailwind", "alpine", "flux-ui"],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/stack-tall"
+  },
+  "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/tall-stack/SKILL.md

@@ -0,0 +1,309 @@
+---
+name: tall-stack
+description: Deep knowledge about the TALL stack - Tailwind CSS, Alpine.js, Laravel, Livewire 4, and Flux UI. Use when working on TALL stack projects, Livewire components, Blade views, Alpine interactivity, or Flux UI components.
+---
+
+# TALL Stack Reference
+
+## Architecture
+
+The TALL stack connects:
+- **Laravel** as the backend framework (routing, controllers, models, migrations, Eloquent)
+- **Livewire 4** for reactive server-rendered components (replaces traditional AJAX)
+- **Alpine.js** for lightweight client-side interactivity (toggles, dropdowns, transitions)
+- **Tailwind CSS** for utility-first styling
+- **Flux UI** for pre-built, accessible Livewire/Alpine components
+
+### When to use Livewire vs Alpine
+
+- **Livewire**: Server state, database operations, form validation, real-time updates, anything needing PHP
+- **Alpine**: Client-only UI state (dropdowns, modals, tabs, animations), no server round-trip needed
+- **Both together**: Alpine handles instant UI feedback, Livewire handles persistence
+
+## Livewire 4
+
+### Component Structure
+
+```php
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Livewire\Attributes\Validate;
+use Livewire\Attributes\Locked;
+use Livewire\Attributes\Url;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\On;
+
+class EditProfile extends Component
+{
+    #[Validate('required|string|max:255')]
+    public string $name = '';
+
+    #[Validate('required|email')]
+    public string $email = '';
+
+    #[Locked]
+    public int $userId;
+
+    #[Url]
+    public string $tab = 'general';
+
+    #[Computed]
+    public function user(): User
+    {
+        return User::find($this->userId);
+    }
+
+    public function save(): void
+    {
+        $this->validate();
+        $this->user->update([
+            'name' => $this->name,
+            'email' => $this->email,
+        ]);
+        $this->dispatch('profile-updated');
+    }
+
+    public function render()
+    {
+        return view('livewire.edit-profile');
+    }
+}
+```
+
+### Key Livewire 4 Attributes
+
+| Attribute | Purpose |
+|-----------|---------|
+| `#[Validate('rules')]` | Inline validation rules on properties |
+| `#[Locked]` | Property cannot be modified from the frontend (security) |
+| `#[Url]` | Syncs property with URL query string |
+| `#[Computed]` | Cached computed property (auto-memoized per request) |
+| `#[On('event-name')]` | Listen for dispatched events |
+| `#[Layout('layouts.app')]` | Set the layout for full-page components |
+| `#[Title('Page Title')]` | Set the page title |
+| `#[Lazy]` | Lazy-load the component (placeholder until visible) |
+| `#[Isolate]` | Prevent this component from re-rendering when sibling components update |
+
+### Livewire 4 Lifecycle
+
+1. `mount()` -- Called once when component is first instantiated
+2. `hydrate()` -- Called on every subsequent request (after deserialization)
+3. `boot()` -- Called on every request (before mount on first, before hydrate on subsequent)
+4. `updating{Property}()` / `updated{Property}()` -- Before/after property changes
+5. `render()` -- Returns the Blade view
+6. `dehydrate()` -- Called before serialization for the response
+
+### Common Patterns
+
+**Form handling:**
+```php
+use Livewire\Attributes\Validate;
+
+#[Validate('required|string|max:255')]
+public string $title = '';
+
+public function save(): void
+{
+    $this->validate();
+    Post::create(['title' => $this->title]);
+    $this->reset('title');
+    $this->dispatch('post-created');
+}
+```
+
+**File uploads:**
+```php
+use Livewire\WithFileUploads;
+
+class UploadPhoto extends Component
+{
+    use WithFileUploads;
+
+    #[Validate('image|max:1024')]
+    public $photo;
+
+    public function save(): void
+    {
+        $this->validate();
+        $this->photo->store('photos');
+    }
+}
+```
+
+**Pagination:**
+```php
+use Livewire\WithPagination;
+
+class UserList extends Component
+{
+    use WithPagination;
+
+    public function render()
+    {
+        return view('livewire.user-list', [
+            'users' => User::paginate(10),
+        ]);
+    }
+}
+```
+
+**Real-time with events:**
+```php
+// Dispatching
+$this->dispatch('post-created', id: $post->id);
+
+// Listening
+#[On('post-created')]
+public function handlePostCreated(int $id): void
+{
+    // React to the event
+}
+```
+
+### Hydration Rules (Critical)
+
+- Only `public` properties are sent to the frontend and back
+- Use `#[Locked]` for IDs and sensitive data that should not be tampered with
+- Eloquent models as properties: Livewire re-fetches by ID on each request
+- Collections, arrays, and simple types are serialized/deserialized directly
+- If a property cannot be serialized, use `#[Computed]` instead
+
+## Alpine.js Patterns
+
+### Basic Interactivity
+```html
+<div x-data="{ open: false }">
+    <button @click="open = !open">Toggle</button>
+    <div x-show="open" x-transition>
+        Content
+    </div>
+</div>
+```
+
+### With Livewire (@entangle)
+```html
+<div x-data="{ tab: @entangle('tab') }">
+    <button @click="tab = 'general'" :class="{ 'active': tab === 'general' }">
+        General
+    </button>
+    <button @click="tab = 'security'" :class="{ 'active': tab === 'security' }">
+        Security
+    </button>
+</div>
+```
+
+Note: `@entangle` syncs Alpine state with Livewire server state. Use `@entangle('property').live` for real-time sync without waiting for Livewire requests.
+
+### Alpine Stores (shared state)
+```html
+<script>
+    Alpine.store('sidebar', { open: true });
+</script>
+
+<div x-data @click="$store.sidebar.open = !$store.sidebar.open">
+    Toggle Sidebar
+</div>
+```
+
+## Flux UI
+
+Flux UI provides pre-built, accessible components for TALL stack projects.
+
+### Common Components
+```blade
+{{-- Button --}}
+<flux:button>Save Changes</flux:button>
+<flux:button variant="primary">Submit</flux:button>
+<flux:button variant="danger" wire:click="delete">Delete</flux:button>
+
+{{-- Input --}}
+<flux:input wire:model="name" label="Full Name" />
+<flux:input wire:model="email" label="Email" type="email" />
+
+{{-- Select --}}
+<flux:select wire:model="role" label="Role">
+    <flux:option value="admin">Admin</flux:option>
+    <flux:option value="user">User</flux:option>
+</flux:select>
+
+{{-- Modal --}}
+<flux:modal name="confirm-delete">
+    <flux:heading>Delete Item?</flux:heading>
+    <flux:text>This action cannot be undone.</flux:text>
+    <flux:button variant="danger" wire:click="delete">Confirm</flux:button>
+</flux:modal>
+
+<flux:button @click="$flux.modal('confirm-delete').show()">Delete</flux:button>
+
+{{-- Table --}}
+<flux:table>
+    <flux:columns>
+        <flux:column>Name</flux:column>
+        <flux:column>Email</flux:column>
+        <flux:column>Actions</flux:column>
+    </flux:columns>
+    <flux:rows>
+        @foreach($users as $user)
+            <flux:row :key="$user->id">
+                <flux:cell>{{ $user->name }}</flux:cell>
+                <flux:cell>{{ $user->email }}</flux:cell>
+                <flux:cell>
+                    <flux:button size="sm" wire:click="edit({{ $user->id }})">Edit</flux:button>
+                </flux:cell>
+            </flux:row>
+        @endforeach
+    </flux:rows>
+</flux:table>
+
+{{-- Card --}}
+<flux:card>
+    <flux:heading>Dashboard</flux:heading>
+    <flux:text>Welcome back.</flux:text>
+</flux:card>
+
+{{-- Tabs --}}
+<flux:tabs wire:model="tab">
+    <flux:tab name="general">General</flux:tab>
+    <flux:tab name="security">Security</flux:tab>
+</flux:tabs>
+```
+
+### Flux UI Guidelines
+- Always use Flux components when available instead of raw HTML + Tailwind
+- Flux components integrate directly with Livewire via `wire:model` and `wire:click`
+- Use Flux modals with the `$flux.modal()` API for programmatic control
+- Flux handles accessibility (ARIA attributes, keyboard navigation) automatically
+
+## File Structure Conventions
+
+```
+app/
+  Livewire/           # Livewire components (PHP classes)
+    Users/
+      UserTable.php
+      EditUser.php
+  Models/             # Eloquent models
+resources/
+  views/
+    livewire/         # Blade views for Livewire components
+      users/
+        user-table.blade.php
+        edit-user.blade.php
+    components/       # Blade components (non-Livewire)
+    layouts/
+      app.blade.php
+routes/
+  web.php             # Routes (Livewire full-page components use Route::get)
+```
+
+## Common Gotchas
+
+1. **wire:model vs wire:model.live**: Default `wire:model` only syncs on form submit. Use `.live` for real-time sync, `.blur` for sync on blur.
+2. **Alpine + Livewire timing**: Alpine runs client-side instantly; Livewire needs a server round-trip. Use `wire:loading` for feedback.
+3. **Computed properties**: Always use `#[Computed]` for expensive queries. They're memoized per-request.
+4. **Security**: Always use `#[Locked]` on IDs and values that should not be tampered with from the browser.
+5. **Nested components**: Child Livewire components re-render independently. Use events (`dispatch`/`#[On]`) to communicate.
+6. **Flux UI + dark mode**: Flux respects Tailwind's `dark:` prefix. Ensure your layout has the dark mode class toggling.