plutonium 0.33.1 → 0.34.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '09404b41e07186fad2cd1b8cac7d13dcf24365020bd421fbe1f2991a9368ac73'
-  data.tar.gz: dfc8ca35be7e90674dd76b0a2bef5f3815adb01c36dd0bc287fe29707710f576
+  metadata.gz: 38de4c2a97493b6e03b185ab05f6c6990df33ad210d89612ce98ef392e6c0ae1
+  data.tar.gz: 1de78573407b4032d3f41fc249765028b24d8204f79d68816c4571ac55edf314
 SHA512:
-  metadata.gz: 5732daa2516ac0120f244649d78a62a5824dc7ec976783cfc0b806b27a424372021935b099602f36348dd72a0825c994e579dbbccaae08f4e8241861bee3816c
-  data.tar.gz: 95a474cc9f548b10c929ce170de2fc9e39886fe5f579620aa5748a2d62927c663ba270689d87345b9c75df1dd43f440ceebc61b0f840bd1d1e80d4fdb27083bb
+  metadata.gz: e5f97caf77d2dce2a6c8f3ac2735974a244b1387ab015ecf73ff27210bc7eb74a8c05971145f628c99cb481e55383ee8f62f42a41ac2f372597e9b3e43e4a1c5
+  data.tar.gz: 104fd85f23d698fdbbc6bbda701a5a22912516877761471028c93050260853f0a96461d0d80f609b0142f01155b6b5928b4403d654579baeaa9119b08258e1c8

data/# Plutonium: The pre-alpha demo.md

@@ -43,8 +43,10 @@
   ```ruby
   # packages/dashboard_app/lib/engine.rb
 
-  scope_to_entity User, strategy:  :current_user
-  # add directives above.
+  config.after_initialize do
+    scope_to_entity User, strategy: :current_user
+    # add directives above.
+  end
   ```
 
 - Demonstrate queries

data/.claude/skills/assets/SKILL.md

@@ -0,0 +1,416 @@
+---
+name: assets
+description: Plutonium assets and theming - TailwindCSS configuration, custom styling, and component themes
+---
+
+# Plutonium Assets & Theming
+
+Plutonium uses TailwindCSS 4 for styling with a customizable theme system for components.
+
+## Asset Configuration
+
+Configure assets in the initializer:
+
+```ruby
+# config/initializers/plutonium.rb
+Plutonium.configure do |config|
+  config.load_defaults 1.0
+
+  # Custom assets
+  config.assets.stylesheet = "application"    # Your CSS file
+  config.assets.script = "application"        # Your JS file
+  config.assets.logo = "my_logo.png"          # Logo image
+  config.assets.favicon = "my_favicon.ico"    # Favicon
+end
+```
+
+## Setup Custom Assets
+
+Run the assets generator to set up your own TailwindCSS build:
+
+```bash
+rails generate pu:core:assets
+```
+
+This:
+1. Installs required npm packages (`@radioactive-labs/plutonium`, TailwindCSS plugins)
+2. Creates `tailwind.config.js` that extends Plutonium's config
+3. Imports Plutonium CSS into your `application.tailwind.css`
+4. Registers Plutonium's Stimulus controllers
+5. Updates Plutonium config to use your assets
+
+## TailwindCSS Configuration
+
+### Generated Config
+
+```javascript
+// tailwind.config.js
+const { execSync } = require('child_process');
+const plutoniumGemPath = execSync("bundle show plutonium").toString().trim();
+const plutoniumTailwindConfig = require(`${plutoniumGemPath}/tailwind.options.js`)
+
+module.exports = {
+  darkMode: plutoniumTailwindConfig.darkMode,
+  plugins: [
+    // Add your plugins here
+  ].concat(plutoniumTailwindConfig.plugins),
+  theme: plutoniumTailwindConfig.merge(
+    plutoniumTailwindConfig.theme,
+    {
+      // Your custom theme overrides
+    },
+  ),
+  content: [
+    `${__dirname}/app/**/*.{erb,haml,html,slim,rb}`,
+    `${__dirname}/app/javascript/**/*.js`,
+    `${__dirname}/packages/**/app/**/*.{erb,haml,html,slim,rb}`,
+  ].concat(plutoniumTailwindConfig.content),
+}
+```
+
+### Customizing Colors
+
+Override Plutonium's color palette:
+
+```javascript
+// tailwind.config.js
+theme: plutoniumTailwindConfig.merge(
+  plutoniumTailwindConfig.theme,
+  {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',  // Your brand color
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+        secondary: {
+          // Your secondary palette
+        },
+      },
+    },
+  },
+),
+```
+
+### Default Color Palette
+
+Plutonium includes these semantic colors:
+
+| Color | Usage |
+|-------|-------|
+| `primary` | Primary brand color (turquoise by default) |
+| `secondary` | Secondary color (navy by default) |
+| `success` | Success states (green) |
+| `info` | Informational states (blue) |
+| `warning` | Warning states (amber) |
+| `danger` | Error/danger states (red) |
+| `accent` | Accent highlights (coral pink) |
+
+### Dark Mode
+
+Plutonium uses `selector` strategy for dark mode:
+
+```javascript
+darkMode: "selector"
+```
+
+Toggle dark mode by adding/removing the `dark` class on `<html>`:
+
+```javascript
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
+```
+
+Plutonium includes a color mode selector component that handles this automatically.
+
+## CSS Imports
+
+### Application Stylesheet
+
+```css
+/* app/assets/stylesheets/application.tailwind.css */
+@import "gem:plutonium/src/css/plutonium.css";
+
+@import "tailwindcss";
+@config '../../../tailwind.config.js';
+
+/* Your custom styles */
+```
+
+### What Plutonium CSS Includes
+
+- Core utility classes
+- EasyMDE (markdown editor) styles
+- Slim Select styles
+- International telephone input styles
+- Flatpickr (date picker) styles
+
+## Component Themes
+
+Plutonium components use a theme system based on Phlexi. Each component type has a theme class with named style tokens.
+
+### Form Theme
+
+```ruby
+class PostDefinition < ResourceDefinition
+  class Form < Form
+    class Theme < Plutonium::UI::Form::Theme
+      def self.theme
+        super.merge({
+          # Container
+          base: "bg-white dark:bg-gray-800 shadow-md rounded-lg p-6",
+          fields_wrapper: "grid grid-cols-2 gap-6",
+          actions_wrapper: "flex justify-end mt-6 space-x-2",
+
+          # Labels
+          label: "block mb-2 text-base font-bold",
+          invalid_label: "text-red-700 dark:text-red-500",
+          valid_label: "text-green-700 dark:text-green-500",
+          neutral_label: "text-gray-500 dark:text-gray-400",
+
+          # Inputs
+          input: "w-full p-2 border rounded-md shadow-sm",
+          invalid_input: "bg-red-50 border-red-500 text-red-900",
+          valid_input: "bg-green-50 border-green-500 text-green-900",
+          neutral_input: "border-gray-300 dark:border-gray-600",
+
+          # Hints & Errors
+          hint: "mt-2 text-sm text-gray-500",
+          error: "mt-2 text-sm text-red-600",
+
+          # Buttons
+          button: "px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700",
+        })
+      end
+    end
+  end
+end
+```
+
+### Display Theme
+
+```ruby
+class PostDefinition < ResourceDefinition
+  class Display < Display
+    class Theme < Plutonium::UI::Display::Theme
+      def self.theme
+        super.merge({
+          fields_wrapper: "grid grid-cols-3 gap-8",
+          label: "text-sm font-bold text-gray-500 mb-1",
+          string: "text-lg text-gray-900 dark:text-white",
+          link: "text-primary-600 hover:underline",
+          markdown: "prose dark:prose-invert max-w-none",
+        })
+      end
+    end
+  end
+end
+```
+
+### Table Theme
+
+```ruby
+class PostDefinition < ResourceDefinition
+  class Table < Table
+    class Theme < Plutonium::UI::Table::Theme
+      def self.theme
+        super.merge({
+          wrapper: "overflow-x-auto shadow-md rounded-lg",
+          base: "w-full text-sm text-gray-500",
+          header: "text-xs uppercase bg-gray-100 dark:bg-gray-700",
+          header_cell: "px-6 py-3",
+          body_row: "bg-white border-b dark:bg-gray-800",
+          body_cell: "px-6 py-4",
+        })
+      end
+    end
+  end
+end
+```
+
+### Theme Keys Reference
+
+#### Form Theme Keys
+
+| Key | Description |
+|-----|-------------|
+| `base` | Form container |
+| `fields_wrapper` | Grid wrapper for fields |
+| `actions_wrapper` | Submit button container |
+| `wrapper` | Individual field wrapper |
+| `inner_wrapper` | Inner field wrapper |
+| `label` | Label base styles |
+| `invalid_label` | Label when field invalid |
+| `valid_label` | Label when field valid |
+| `neutral_label` | Label default state |
+| `input` | Input base styles |
+| `invalid_input` | Input when invalid |
+| `valid_input` | Input when valid |
+| `neutral_input` | Input default state |
+| `hint` | Hint text |
+| `error` | Error message |
+| `button` | Submit button |
+| `checkbox` | Checkbox input |
+| `select` | Select dropdown |
+
+#### Display Theme Keys
+
+| Key | Description |
+|-----|-------------|
+| `fields_wrapper` | Grid wrapper |
+| `label` | Field label |
+| `description` | Field description |
+| `string` | String values |
+| `text` | Text values |
+| `link` | URL links |
+| `email` | Email links |
+| `phone` | Phone links |
+| `markdown` | Markdown content |
+| `json` | JSON display |
+
+#### Table Theme Keys
+
+| Key | Description |
+|-----|-------------|
+| `wrapper` | Table container |
+| `base` | Table element |
+| `header` | Header row |
+| `header_cell` | Header cell |
+| `body_row` | Body row |
+| `body_cell` | Body cell |
+| `sort_icon` | Sort indicator |
+
+## Using Tokens in Components
+
+### The `tokens` Helper
+
+Conditionally apply classes:
+
+```ruby
+class MyComponent < Plutonium::UI::Component::Base
+  def initialize(active:)
+    @active = active
+  end
+
+  def view_template
+    div(class: tokens(
+      "base-class",
+      active?: "bg-primary-500 text-white",
+      inactive?: "bg-gray-200 text-gray-700"
+    )) {
+      "Content"
+    }
+  end
+
+  private
+
+  def active? = @active
+  def inactive? = !@active
+end
+```
+
+### The `classes` Helper
+
+Returns a hash suitable for splatting:
+
+```ruby
+div(**classes("p-4", "rounded", active?: "ring-2")) { }
+# => <div class="p-4 rounded ring-2">
+```
+
+### Conditional Tokens with Hash
+
+```ruby
+tokens(
+  "base",
+  condition?: { then: "if-true", else: "if-false" }
+)
+```
+
+## Stimulus Controllers
+
+Plutonium includes Stimulus controllers. Register them in your application:
+
+```javascript
+// app/javascript/controllers/index.js
+import { application } from "./application"
+
+import { registerControllers } from "@radioactive-labs/plutonium"
+registerControllers(application)
+
+// Your custom controllers...
+```
+
+### Available Controllers
+
+- `color-mode` - Dark/light mode toggle
+- `form` - Form handling (pre-submit, etc.)
+- `nested-resource-form-fields` - Nested form management
+- `slim-select` - Enhanced select boxes
+- `flatpickr` - Date/time pickers
+- `easymde` - Markdown editor
+- Various UI controllers
+
+## Custom Stimulus Controllers
+
+Add your own controllers alongside Plutonium's:
+
+```javascript
+// app/javascript/controllers/custom_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    console.log("Custom controller connected")
+  }
+}
+```
+
+Register in your index:
+
+```javascript
+import CustomController from "./custom_controller"
+application.register("custom", CustomController)
+```
+
+## Typography
+
+Plutonium uses Lato font by default. The layout loads it from Google Fonts.
+
+Override in your layout:
+
+```ruby
+class MyLayout < Plutonium::UI::Layout::ResourceLayout
+  def render_fonts
+    # Your custom fonts
+    link(rel: "preconnect", href: "https://fonts.googleapis.com")
+    link(href: "https://fonts.googleapis.com/css2?family=Inter&display=swap", rel: "stylesheet")
+  end
+end
+```
+
+Update Tailwind config:
+
+```javascript
+theme: {
+  fontFamily: {
+    'body': ['Inter', 'sans-serif'],
+    'sans': ['Inter', 'sans-serif'],
+  }
+}
+```
+
+## Related Skills
+
+- `views` - Layout customization
+- `forms` - Form theming
+- `installation` - Initial setup

data/.claude/skills/connect-resource/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: connect-resource
+description: Connect existing resources to portals for web access
+---
+
+# Connect Resource Skill
+
+Use the `pu:res:conn` generator to connect resources to portals. This is required to expose resources through a portal's web interface.
+
+## Command Syntax
+
+```bash
+rails g pu:res:conn RESOURCE [RESOURCE...] --dest=PORTAL_NAME
+```
+
+**Always specify resources directly** - this avoids interactive prompts. The `--src` option is only needed for interactive mode and can be ignored.
+
+## Usage Patterns
+
+### Main App Resources (not in a package)
+
+```bash
+rails g pu:res:conn PropertyAmenity --dest=admin_portal
+rails g pu:res:conn Post Comment Tag --dest=dashboard_portal
+```
+
+### Namespaced Resources (from a feature package)
+
+Use the full class name:
+
+```bash
+rails g pu:res:conn Blogging::Post --dest=admin_portal
+rails g pu:res:conn Blogging::Post Blogging::Comment --dest=admin_portal
+```
+
+### Multiple Resources at Once
+
+```bash
+rails g pu:res:conn Property PropertyAmenity Unit Tenant --dest=admin_portal
+```
+
+## What Gets Generated
+
+For a resource `Post` connected to `admin_portal`:
+
+```
+packages/admin_portal/
+├── app/
+│   ├── controllers/admin_portal/
+│   │   └── posts_controller.rb      # Portal controller
+│   ├── policies/admin_portal/
+│   │   └── post_policy.rb           # Portal policy (if needed)
+│   └── definitions/admin_portal/
+│       └── post_definition.rb       # Portal definition (if needed)
+└── config/
+    └── routes.rb                    # Updated with register_resource
+```
+
+### Generated Controller
+
+```ruby
+class AdminPortal::PostsController < ::PostsController
+  include AdminPortal::Concerns::Controller
+end
+```
+
+### Generated Policy
+
+```ruby
+class AdminPortal::PostPolicy < ::PostPolicy
+  include AdminPortal::ResourcePolicy
+
+  def permitted_attributes_for_create
+    [:title, :content, :user_id]
+  end
+
+  def permitted_attributes_for_read
+    [:title, :content, :user_id, :created_at, :updated_at]
+  end
+
+  def permitted_associations
+    %i[]
+  end
+end
+```
+
+### Route Registration
+
+```ruby
+# In packages/admin_portal/config/routes.rb
+register_resource ::Post
+```
+
+## Typical Workflow
+
+```bash
+# 1. Create resources (always specify --dest)
+rails g pu:res:scaffold Post user:belongs_to title:string 'content:text?' --dest=main_app
+
+# 2. Run migrations
+rails db:migrate
+
+# 3. Connect resources to portal (always specify --dest)
+rails g pu:res:conn Post --dest=admin_portal
+```
+
+## Important Notes
+
+1. **Always specify resources directly** - avoids prompts, no `--src` needed
+2. **Always use the generator** - never manually connect resources
+3. **Run after migrations** - the generator reads model columns for policy attributes
+4. **Portal-specific customization** - customize the generated policy/definition per-portal