plutonium 0.34.1 → 0.35.0

data/.claude/skills/{portal → plutonium-portal}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: portal
+name: plutonium-portal
 description: Plutonium portals - web interfaces with authentication, entity scoping, and routes
 ---
 
@@ -244,35 +244,37 @@ end
 
 ## Controller Hierarchy
 
+### Resource Controllers
+
+Portal resource controllers inherit from the feature package's controller:
+
 ```
-::PlutoniumController (app-wide base)
-    ↓
-::ResourceController (resource handling)
-    ↓
-DashboardPortal::ResourceController (portal base)
+::PostsController (feature package controller)
     ↓
-DashboardPortal::PostsController (resource-specific)
+DashboardPortal::PostsController (portal-specific)
 ```
 
-### Portal Controllers
+Controllers are auto-created if not defined. When accessing `DashboardPortal::PostsController`:
+
+1. If file exists, use it
+2. Otherwise, dynamically create inheriting from `::PostsController`
+3. Include `DashboardPortal::Concerns::Controller`
+
+### Non-Resource Controllers
+
+For portal pages not tied to a resource (dashboard, settings, etc.), inherit from `PlutoniumController`:
 
 ```ruby
-# packages/dashboard_portal/app/controllers/dashboard_portal/resource_controller.rb
+# packages/dashboard_portal/app/controllers/dashboard_portal/dashboard_controller.rb
 module DashboardPortal
-  class ResourceController < ::ResourceController
-    include DashboardPortal::Concerns::Controller
+  class DashboardController < PlutoniumController
+    def index
+      # Dashboard home page
+    end
   end
 end
 ```
 
-### Dynamic Controllers
-
-Controllers are auto-created if not defined. When accessing `DashboardPortal::PostsController`:
-
-1. If file exists, use it
-2. Otherwise, dynamically create inheriting from `::PostsController`
-3. Include `DashboardPortal::Concerns::Controller`
-
 ## Portal-Specific Overrides
 
 ### Override Definition
@@ -307,13 +309,13 @@ end
 
 ```ruby
 # packages/dashboard_portal/app/controllers/dashboard_portal/posts_controller.rb
-module DashboardPortal
-  class PostsController < ResourceController
-    private
+class DashboardPortal::PostsController < ::PostsController
+  include DashboardPortal::Concerns::Controller
 
-    def preferred_action_after_submit
-      "index"
-    end
+  private
+
+  def preferred_action_after_submit
+    "index"
   end
 end
 ```
@@ -392,9 +394,9 @@ Each portal can:
 
 ## Related Skills
 
-- `package` - Package overview (features vs portals)
-- `rodauth` - Authentication setup and configuration
-- `connect-resource` - Connecting resources to portals
-- `policy` - Portal-specific policies
-- `definition` - Portal-specific definitions
-- `controller` - Portal-specific controllers
+- `plutonium-package` - Package overview (features vs portals)
+- `plutonium-rodauth` - Authentication setup and configuration
+- `plutonium-connect-resource` - Connecting resources to portals
+- `plutonium-policy` - Portal-specific policies
+- `plutonium-definition` - Portal-specific definitions
+- `plutonium-controller` - Portal-specific controllers

data/.claude/skills/{resource → plutonium-resource}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: resource
+name: plutonium-resource
 description: Overview of Plutonium resources - what they are and how the pieces fit together
 ---
 
@@ -49,7 +49,7 @@ This generates:
 - `app/controllers/posts_controller.rb` - Controller (empty, inherits CRUD)
 - Migration file
 
-See `create-resource` skill for full generator options.
+See `plutonium-create-resource` skill for full generator options.
 
 ### From Existing Models
 
@@ -99,7 +99,7 @@ This:
 - Creates portal-specific controller
 - Creates portal-specific policy with attribute permissions
 
-See `connect-resource` skill for details.
+See `plutonium-connect-resource` skill for details.
 
 ## Layer Responsibilities
 
@@ -122,14 +122,14 @@ The model handles:
 - Business logic scopes
 - Callbacks
 
-**Skills:** `model`, `model-features`
+**Skills:** `plutonium-model`, `plutonium-model-features`
 
 ### Definition (UI Layer)
 
 ```ruby
 class PostDefinition < ResourceDefinition
   # Override auto-detected field types
-  input :content, as: :rich_text
+  input :content, as: :markdown
 
   # Add filters and scopes
   filter :published, with: Plutonium::Query::Filters::Boolean
@@ -147,7 +147,7 @@ The definition handles:
 - Search, filters, scopes, sorting
 - Actions (interactive operations)
 
-**Skills:** `definition`, `definition-fields`, `definition-actions`, `definition-query`
+**Skills:** `plutonium-definition`, `plutonium-definition-fields`, `plutonium-definition-actions`, `plutonium-definition-query`
 
 ### Policy (Authorization Layer)
 
@@ -188,7 +188,7 @@ The policy handles:
 - Resource scoping (what records user can see)
 - Attribute permissions (read/write access per field)
 
-**Skill:** `policy`
+**Skill:** `plutonium-policy`
 
 ### Controller (Request Layer)
 
@@ -216,7 +216,7 @@ The controller handles:
 - Custom parameter processing
 - Non-standard authorization flows
 
-**Skill:** `controller`
+**Skill:** `plutonium-controller`
 
 ## Auto-Detection
 
@@ -260,22 +260,22 @@ end
 
 ## Related Skills
 
-- `model` - Model structure and organization
-- `model-features` - has_cents, associations, scopes, routes
-- `definition` - Definition overview and structure
-- `definition-fields` - Fields, inputs, displays, columns
-- `definition-actions` - Actions and interactions
-- `interaction` - Writing interaction classes
-- `definition-query` - Search, filters, scopes, sorting
-- `policy` - Authorization and permissions
-- `controller` - Controller customization
-- `views` - Custom pages, displays, tables using Phlex
-- `forms` - Custom form templates and field builders
-- `assets` - TailwindCSS and component theming
-- `package` - Feature and portal packages
-- `portal` - Portal configuration and entity scoping
-- `nested-resources` - Parent/child routes and scoping
-- `installation` - Setting up Plutonium
-- `rodauth` - Authentication setup
-- `create-resource` - Scaffold generator details
-- `connect-resource` - Portal connection details
+- `plutonium-model` - Model structure and organization
+- `plutonium-model-features` - has_cents, associations, scopes, routes
+- `plutonium-definition` - Definition overview and structure
+- `plutonium-definition-fields` - Fields, inputs, displays, columns
+- `plutonium-definition-actions` - Actions and interactions
+- `plutonium-interaction` - Writing interaction classes
+- `plutonium-definition-query` - Search, filters, scopes, sorting
+- `plutonium-policy` - Authorization and permissions
+- `plutonium-controller` - Controller customization
+- `plutonium-views` - Custom pages, displays, tables using Phlex
+- `plutonium-forms` - Custom form templates and field builders
+- `plutonium-assets` - TailwindCSS and component theming
+- `plutonium-package` - Feature and portal packages
+- `plutonium-portal` - Portal configuration and entity scoping
+- `plutonium-nested-resources` - Parent/child routes and scoping
+- `plutonium-installation` - Setting up Plutonium
+- `plutonium-rodauth` - Authentication setup
+- `plutonium-create-resource` - Scaffold generator details
+- `plutonium-connect-resource` - Portal connection details

data/.claude/skills/{rodauth → plutonium-rodauth}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: rodauth
+name: plutonium-rodauth
 description: Plutonium Rodauth integration - authentication setup, account types, and configuration
 ---
 
@@ -165,7 +165,7 @@ Including `Plutonium::Auth::Rodauth(:name)` adds:
 |--------|-------------|
 | `current_user` | The authenticated account |
 | `logout_url` | URL to logout |
-| `rodauth` | Access to Rodauth instance |
+| `plutonium-rodauth` | Access to Rodauth instance |
 
 ## Generated Files
 
@@ -447,6 +447,6 @@ User.create!(
 
 ## Related Skills
 
-- `installation` - Initial Plutonium setup
-- `portal` - Portal configuration
-- `policy` - Authorization after authentication
+- `plutonium-installation` - Initial Plutonium setup
+- `plutonium-portal` - Portal configuration
+- `plutonium-policy` - Authorization after authentication

data/.claude/skills/plutonium-theming/SKILL.md

@@ -0,0 +1,424 @@
+---
+name: plutonium-theming
+description: Plutonium design token system - CSS custom properties, component classes, and consistent styling patterns
+---
+
+# Plutonium Design Token System
+
+Plutonium uses a comprehensive CSS design token system for consistent, themeable UI components. This system provides CSS custom properties and reusable component classes that automatically support light and dark modes.
+
+## CSS Design Tokens
+
+Design tokens are defined in `src/css/tokens.css` and provide the foundation for all UI styling.
+
+### Surface & Background Colors
+
+```css
+/* Light mode */
+--pu-body: #f8fafc;              /* Page background */
+--pu-surface: #ffffff;            /* Main surface (cards, panels) */
+--pu-surface-alt: #f1f5f9;        /* Alternate surface (headers) */
+--pu-surface-raised: #ffffff;     /* Elevated elements */
+--pu-surface-overlay: rgba(255, 255, 255, 0.95);
+
+/* Dark mode (.dark class) */
+--pu-body: #0f172a;
+--pu-surface: #1e293b;
+--pu-surface-alt: #0f172a;
+--pu-surface-raised: #334155;
+--pu-surface-overlay: rgba(30, 41, 59, 0.95);
+```
+
+### Text Colors
+
+```css
+/* Light mode */
+--pu-text: #0f172a;               /* Primary text */
+--pu-text-muted: #64748b;         /* Secondary text */
+--pu-text-subtle: #94a3b8;        /* Tertiary/disabled text */
+
+/* Dark mode */
+--pu-text: #f8fafc;
+--pu-text-muted: #94a3b8;
+--pu-text-subtle: #64748b;
+```
+
+### Border Colors
+
+```css
+/* Light mode */
+--pu-border: #e2e8f0;             /* Standard borders */
+--pu-border-muted: #f1f5f9;       /* Subtle borders */
+--pu-border-strong: #cbd5e1;      /* Emphasized borders */
+
+/* Dark mode */
+--pu-border: #334155;
+--pu-border-muted: #1e293b;
+--pu-border-strong: #475569;
+```
+
+### Form Tokens
+
+```css
+--pu-input-bg: #ffffff;           /* Input background */
+--pu-input-border: #e2e8f0;       /* Input border */
+--pu-input-focus-ring: theme(colors.primary.500);
+--pu-input-placeholder: #94a3b8;  /* Placeholder text */
+```
+
+### Card Tokens
+
+```css
+--pu-card-bg: #ffffff;
+--pu-card-border: #e2e8f0;
+```
+
+### Shadow System
+
+```css
+--pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05);
+--pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 6px -1px rgb(0 0 0 / 0.06);
+--pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 10px 15px -3px rgb(0 0 0 / 0.08);
+```
+
+### Border Radius
+
+```css
+--pu-radius-sm: 0.375rem;         /* 6px */
+--pu-radius-md: 0.5rem;           /* 8px */
+--pu-radius-lg: 0.75rem;          /* 12px */
+--pu-radius-xl: 1rem;             /* 16px */
+--pu-radius-full: 9999px;         /* Fully rounded */
+```
+
+### Spacing
+
+```css
+--pu-space-xs: 0.25rem;           /* 4px */
+--pu-space-sm: 0.5rem;            /* 8px */
+--pu-space-md: 1rem;              /* 16px */
+--pu-space-lg: 1.5rem;            /* 24px */
+--pu-space-xl: 2rem;              /* 32px */
+```
+
+### Transitions
+
+```css
+--pu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+--pu-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+--pu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+```
+
+## Component Classes
+
+Component classes are defined in `src/css/components.css` and provide ready-to-use styled components.
+
+### Buttons
+
+Base class with size variants:
+
+```css
+.pu-btn        /* Base button styles */
+.pu-btn-md     /* Medium size (default) */
+.pu-btn-sm     /* Small size */
+.pu-btn-xs     /* Extra small size */
+```
+
+Solid variants (with hover lift animation):
+
+```css
+.pu-btn-primary    /* Primary action */
+.pu-btn-secondary  /* Secondary action */
+.pu-btn-danger     /* Destructive action */
+.pu-btn-success    /* Success action */
+.pu-btn-warning    /* Warning action */
+.pu-btn-info       /* Informational action */
+.pu-btn-accent     /* Accent action */
+```
+
+Other variants:
+
+```css
+.pu-btn-ghost      /* Minimal, text-like */
+.pu-btn-outline    /* Bordered, transparent background */
+```
+
+Soft variants (tinted backgrounds for secondary contexts):
+
+```css
+.pu-btn-soft-primary
+.pu-btn-soft-danger
+.pu-btn-soft-success
+.pu-btn-soft-warning
+.pu-btn-soft-info
+.pu-btn-soft-secondary
+.pu-btn-soft-accent
+```
+
+Usage:
+
+```erb
+<%= form.submit "Save", class: "pu-btn pu-btn-md pu-btn-primary" %>
+<%= form.submit "Delete", class: "pu-btn pu-btn-md pu-btn-danger" %>
+<%= form.submit "Disable", class: "pu-btn pu-btn-md pu-btn-warning" %>
+```
+
+### Form Inputs
+
+```css
+.pu-input          /* Base input styles */
+.pu-input-invalid  /* Error state */
+.pu-input-valid    /* Valid state */
+```
+
+Usage:
+
+```erb
+<%= form.text_field :name, class: "pu-input #{errors? ? 'pu-input-invalid' : ''}" %>
+```
+
+### Labels & Text
+
+```css
+.pu-label          /* Form labels */
+.pu-label-required /* Adds red asterisk after label */
+.pu-hint           /* Helper text below inputs */
+.pu-error          /* Error messages */
+```
+
+Usage:
+
+```erb
+<%= form.label :email, class: "pu-label" %>
+<span class="pu-error">Email is required</span>
+```
+
+### Checkboxes
+
+```css
+.pu-checkbox       /* Styled checkbox/radio */
+```
+
+Usage:
+
+```erb
+<%= form.check_box :remember_me, class: "pu-checkbox" %>
+```
+
+### Cards
+
+```css
+.pu-card           /* Card container with border, shadow, radius */
+.pu-card-body      /* Card content padding */
+```
+
+### Panels
+
+```css
+.pu-panel-header      /* Panel header with background */
+.pu-panel-title       /* Panel title text */
+.pu-panel-description /* Panel description text */
+```
+
+### Tables
+
+```css
+.pu-table-wrapper     /* Scrollable container with card styling */
+.pu-table             /* Base table styles */
+.pu-table-header      /* Header row */
+.pu-table-header-cell /* Header cell */
+.pu-table-body-row    /* Body row with hover */
+.pu-table-body-row-selected /* Selected row */
+.pu-table-body-cell   /* Body cell */
+.pu-selection-cell    /* Checkbox column */
+```
+
+### Toolbar
+
+```css
+.pu-toolbar        /* Toolbar container with gradient */
+.pu-toolbar-text   /* Toolbar text */
+.pu-toolbar-actions /* Toolbar action buttons */
+```
+
+### Empty State
+
+```css
+.pu-empty-state             /* Centered container */
+.pu-empty-state-icon        /* Icon styling */
+.pu-empty-state-title       /* Title text */
+.pu-empty-state-description /* Description text */
+```
+
+## Ruby Component Classes
+
+The `Plutonium::UI::ComponentClasses` module provides Ruby constants for consistent class usage.
+
+Location: `lib/plutonium/ui/component_classes.rb`
+
+### Button Classes
+
+```ruby
+ComponentClasses::Button::BASE          # "pu-btn"
+ComponentClasses::Button::SIZE_DEFAULT  # "pu-btn-md"
+ComponentClasses::Button::SIZE_SM       # "pu-btn-sm"
+ComponentClasses::Button::SIZE_XS       # "pu-btn-xs"
+
+ComponentClasses::Button::VARIANTS[:primary]   # "pu-btn-primary"
+ComponentClasses::Button::VARIANTS[:danger]    # "pu-btn-danger"
+ComponentClasses::Button::SOFT_VARIANTS[:primary] # "pu-btn-soft-primary"
+
+# Helper method
+ComponentClasses::Button.classes(variant: :primary, size: :default, soft: false)
+# => "pu-btn pu-btn-md pu-btn-primary"
+```
+
+### Form Classes
+
+```ruby
+ComponentClasses::Form::INPUT         # "pu-input"
+ComponentClasses::Form::INPUT_INVALID # "pu-input pu-input-invalid"
+ComponentClasses::Form::INPUT_VALID   # "pu-input pu-input-valid"
+ComponentClasses::Form::LABEL         # "pu-label"
+ComponentClasses::Form::HINT          # "pu-hint"
+ComponentClasses::Form::ERROR         # "pu-error"
+ComponentClasses::Form::BUTTON        # "pu-btn pu-btn-md pu-btn-primary"
+```
+
+### Table Classes
+
+```ruby
+ComponentClasses::Table::WRAPPER          # "pu-table-wrapper"
+ComponentClasses::Table::BASE             # "pu-table"
+ComponentClasses::Table::HEADER           # "pu-table-header"
+ComponentClasses::Table::HEADER_CELL      # "pu-table-header-cell"
+ComponentClasses::Table::BODY_ROW         # "pu-table-body-row"
+ComponentClasses::Table::BODY_ROW_SELECTED # "pu-table-body-row-selected"
+ComponentClasses::Table::BODY_CELL        # "pu-table-body-cell"
+ComponentClasses::Table::CHECKBOX         # "pu-checkbox"
+```
+
+### Card Classes
+
+```ruby
+ComponentClasses::Card::BASE        # "pu-card"
+ComponentClasses::Card::BODY        # "pu-card-body"
+ComponentClasses::Card::HEADER      # "pu-panel-header"
+ComponentClasses::Card::TITLE       # "pu-panel-title"
+ComponentClasses::Card::DESCRIPTION # "pu-panel-description"
+```
+
+## Using Tokens in Templates
+
+### ERB Templates
+
+```erb
+<%# Text colors %>
+<h1 class="text-[var(--pu-text)]">Title</h1>
+<p class="text-[var(--pu-text-muted)]">Description</p>
+
+<%# Surfaces %>
+<div class="bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-lg)]">
+  Content
+</div>
+
+<%# With shadows %>
+<div class="bg-[var(--pu-card-bg)]" style="box-shadow: var(--pu-shadow-md)">
+  Card content
+</div>
+
+<%# Form fields %>
+<%= form.label :name, class: "pu-label" %>
+<%= form.text_field :name, class: "pu-input" %>
+<span class="pu-error">Error message</span>
+
+<%# Buttons %>
+<%= form.submit "Save", class: "w-full pu-btn pu-btn-md pu-btn-primary" %>
+```
+
+### Phlex Components
+
+```ruby
+class MyComponent < Plutonium::UI::Component::Base
+  def view_template
+    div(class: "bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-lg)]",
+        style: "box-shadow: var(--pu-shadow-md)") {
+      h2(class: "text-lg font-semibold text-[var(--pu-text)]") { "Title" }
+      p(class: "text-[var(--pu-text-muted)]") { "Description" }
+    }
+  end
+end
+```
+
+## Link Styling Patterns
+
+Plutonium uses consistent link styling patterns:
+
+```erb
+<%# Primary links %>
+<%= link_to "Link", path, class: "font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" %>
+
+<%# Muted links %>
+<%= link_to "Link", path, class: "text-[var(--pu-text-muted)] hover:text-primary-600 transition-colors" %>
+```
+
+## Dark Mode
+
+All tokens automatically switch values when the `.dark` class is present on `<html>`:
+
+```html
+<!-- Light mode -->
+<html>
+  <body class="bg-[var(--pu-body)]">...</body>
+</html>
+
+<!-- Dark mode -->
+<html class="dark">
+  <body class="bg-[var(--pu-body)]">...</body>
+</html>
+```
+
+No additional classes needed - tokens handle the switch automatically.
+
+## Customizing Tokens
+
+Override tokens in your application CSS:
+
+```css
+/* app/assets/stylesheets/application.tailwind.css */
+@import "gem:plutonium/src/css/plutonium.css";
+@import "tailwindcss";
+
+:root {
+  /* Override light mode tokens */
+  --pu-surface: #fafafa;
+  --pu-border: #d1d5db;
+}
+
+.dark {
+  /* Override dark mode tokens */
+  --pu-surface: #111827;
+  --pu-border: #374151;
+}
+```
+
+## Migration from Hardcoded Classes
+
+When updating views to use the design token system:
+
+| Old Pattern | New Pattern |
+|-------------|-------------|
+| `text-gray-900 dark:text-white` | `text-[var(--pu-text)]` |
+| `text-gray-500 dark:text-gray-400` | `text-[var(--pu-text-muted)]` |
+| `bg-gray-50 dark:bg-gray-700` | `bg-[var(--pu-surface)]` |
+| `border-gray-300 dark:border-gray-600` | `border-[var(--pu-border)]` |
+| `bg-gray-50 border ... (long input class)` | `pu-input` |
+| `block mb-2 text-sm font-semibold ...` | `pu-label` |
+| `text-red-600 dark:text-red-400` | `pu-error` |
+| `(long button class)` | `pu-btn pu-btn-md pu-btn-primary` |
+
+## Related Skills
+
+- `plutonium-assets` - TailwindCSS configuration and asset setup
+- `plutonium-forms` - Form component customization
+- `plutonium-views` - View and layout customization

data/.claude/skills/{views → plutonium-views}/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: views
+name: plutonium-views
 description: Customizing Plutonium views - pages, forms, displays, tables, and layouts using Phlex
 ---
 
@@ -555,9 +555,9 @@ end
 
 ## Related Skills
 
-- `forms` - Custom form templates and field builders
-- `assets` - TailwindCSS and component theming
-- `definition-fields` - Field/input/display configuration
-- `definition-actions` - Action buttons and interactions
-- `controller` - Presentation hooks (`present_parent?`, etc.)
-- `portal` - Portal-specific customization
+- `plutonium-forms` - Custom form templates and field builders
+- `plutonium-assets` - TailwindCSS and component theming
+- `plutonium-definition-fields` - Field/input/display configuration
+- `plutonium-definition-actions` - Action buttons and interactions
+- `plutonium-controller` - Presentation hooks (`present_parent?`, etc.)
+- `plutonium-portal` - Portal-specific customization