@radioactive-labs/plutonium 0.34.0 → 0.35.0

package/README.md

@@ -1,33 +1,114 @@
-# Plutonium: It's like Rails, but for Rails!
+# Plutonium
 
+[![Gem Version](https://badge.fury.io/rb/plutonium.svg)](https://badge.fury.io/rb/plutonium)
 [![Ruby](https://github.com/radioactive-labs/plutonium-core/actions/workflows/main.yml/badge.svg)](https://github.com/radioactive-labs/plutonium-core/actions/workflows/main.yml)
 
-**Plutonium** is a powerful Rapid Application Development (RAD) toolkit for Rails that picks up where Rails left off, introducing application-level concepts and tooling that transform the way you build applications.
+Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, and AI-ready. Plutonium picks up where Rails left off, adding application-level concepts that make building complex apps faster.
 
-## Overview
+## Quick Start
 
-Plutonium builds upon Rails' conventions and extends them with:
+```bash
+rails new myapp -a propshaft -j esbuild -c tailwind \
+  -m https://radioactive-labs.github.io/plutonium-core/templates/plutonium.rb
+```
 
-- **Authentication & Authorization**: Integrates seamlessly with Rodauth or your existing auth system
-- **Complete CRUD Operations**: Rich fields, forms, tables, and nested resources out of the box
-- **Modular Architecture**: Package system based on Rails engines for better organization
-- **Entity Scoping**: Built-in multi-tenancy support that "just works"
-- **Smart Generators**: Eliminate boilerplate while maintaining flexibility
-- **Modern UI**: Beautiful, responsive interface powered by Tailwind CSS and Hotwire
+Then create your first resource:
 
-## Project Status
+```bash
+cd myapp
+rails g pu:res:scaffold Post title:string body:text --dest=main_app
+rails db:migrate
+bin/dev
+```
 
-> [!WARNING]
-> While Plutonium is actively used in production environments, it's still in early development. APIs may change, and some features are still evolving. We recommend thoroughly testing before deploying to production.
+Visit `http://localhost:3000` - you have a complete CRUD interface.
+
+## What You Get
+
+**Resource-oriented architecture** - Models, policies, definitions, and controllers that work together:
+
+```ruby
+# Policy controls WHO can do WHAT
+class PostPolicy < ResourcePolicy
+  def create? = user.present?
+  def update? = record.author == user || user.admin?
+
+  def permitted_attributes_for_create
+    %i[title body]
+  end
+end
+
+# Definition controls HOW it renders
+class PostDefinition < ResourceDefinition
+  input :body, as: :markdown
+  search { |scope, q| scope.where("title ILIKE ?", "%#{q}%") }
+  scope :published
+  scope :drafts
+end
+```
+
+**Packages for organization** - Split your app into feature packages and portals:
+
+```bash
+rails g pu:pkg:package blogging      # Business logic
+rails g pu:pkg:portal admin          # Web interface
+rails g pu:res:conn Post --dest=admin_portal
+```
+
+**Built-in authentication** via Rodauth:
+
+```bash
+rails g pu:rodauth:install
+rails g pu:rodauth:account user
+```
+
+**Multi-tenancy** with entity scoping:
+
+```ruby
+# In portal engine
+scope_to_entity Organization, strategy: :path
+# Routes become /organizations/:organization_id/posts
+```
+
+**Custom actions** with interactions:
+
+```ruby
+class PublishInteraction < ResourceInteraction
+  attribute :resource
+  attribute :publish_at, :datetime
+
+  def execute
+    resource.update!(published_at: publish_at)
+    succeed(resource).with_message("Published!")
+  rescue ActiveRecord::RecordInvalid => e
+    failed(e.record.errors)
+  end
+end
+```
 
 ## Documentation
 
-Visit our [documentation](https://radioactive-labs.github.io/plutonium-core/) for:
-- Getting started guide
-- Installation instructions
-- Core concepts
-- Tutorials
+Full documentation at **[radioactive-labs.github.io/plutonium-core](https://radioactive-labs.github.io/plutonium-core/)**
+
+- [Installation](https://radioactive-labs.github.io/plutonium-core/getting-started/installation)
+- [Tutorial](https://radioactive-labs.github.io/plutonium-core/getting-started/tutorial/)
+- [Guides](https://radioactive-labs.github.io/plutonium-core/guides/)
+- [Reference](https://radioactive-labs.github.io/plutonium-core/reference/)
+
+## Requirements
+
+- Ruby 3.2+
+- Rails 7.1+ (Rails 8 recommended)
+- Node.js 18+
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
+
+## Status
+
+Plutonium is used in production but still evolving. APIs may change between minor versions. Pin your version in Gemfile.
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+MIT License - see [LICENSE](LICENSE).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.34.0",
-  "description": "Core assets for the Plutonium gem",
+  "version": "0.35.0",
+  "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",
   "files": [

package/src/css/components.css

@@ -0,0 +1,471 @@
+/**
+ * Plutonium Component Classes
+ *
+ * Modern, clean component styles with refined aesthetics.
+ */
+
+/* ===================
+   BUTTONS - Modern, refined
+   =================== */
+
+.pu-btn {
+  @apply inline-flex items-center justify-center gap-2
+         font-semibold
+         transition-all duration-200 ease-out
+         focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+  border-radius: var(--pu-radius-md);
+}
+
+.pu-btn-md {
+  @apply px-5 py-2.5 text-sm;
+}
+
+.pu-btn-sm {
+  @apply px-4 py-2 text-sm;
+}
+
+.pu-btn-xs {
+  @apply px-3 py-1.5 text-xs;
+}
+
+/* Primary - Solid with subtle gradient */
+.pu-btn-primary {
+  @apply bg-primary-600 text-white
+         hover:bg-primary-500
+         active:bg-primary-700
+         focus-visible:ring-primary-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-primary:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+.pu-btn-primary:active {
+  transform: translateY(0);
+  box-shadow: var(--pu-shadow-sm);
+}
+
+/* Secondary */
+.pu-btn-secondary {
+  @apply bg-secondary-600 text-white
+         hover:bg-secondary-500
+         active:bg-secondary-700
+         focus-visible:ring-secondary-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-secondary:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Danger */
+.pu-btn-danger {
+  @apply bg-danger-600 text-white
+         hover:bg-danger-500
+         active:bg-danger-700
+         focus-visible:ring-danger-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-danger:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Success */
+.pu-btn-success {
+  @apply bg-success-600 text-white
+         hover:bg-success-500
+         active:bg-success-700
+         focus-visible:ring-success-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-success:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Warning */
+.pu-btn-warning {
+  @apply bg-warning-600 text-white
+         hover:bg-warning-500
+         active:bg-warning-700
+         focus-visible:ring-warning-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-warning:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Info */
+.pu-btn-info {
+  @apply bg-info-600 text-white
+         hover:bg-info-500
+         active:bg-info-700
+         focus-visible:ring-info-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-info:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Accent */
+.pu-btn-accent {
+  @apply bg-accent-600 text-white
+         hover:bg-accent-500
+         active:bg-accent-700
+         focus-visible:ring-accent-500;
+  box-shadow: var(--pu-shadow-sm), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+}
+.pu-btn-accent:hover {
+  box-shadow: var(--pu-shadow-md), inset 0 1px 0 0 rgb(255 255 255 / 0.1);
+  transform: translateY(-1px);
+}
+
+/* Ghost - Minimal, text-like */
+.pu-btn-ghost {
+  @apply bg-transparent
+         text-slate-600 hover:text-slate-900
+         hover:bg-slate-100
+         active:bg-slate-200
+         focus-visible:ring-slate-500;
+}
+.dark .pu-btn-ghost {
+  @apply text-slate-400 hover:text-slate-100
+         hover:bg-slate-700
+         active:bg-slate-600;
+}
+
+/* Outline - Bordered, transparent background */
+.pu-btn-outline {
+  @apply bg-transparent
+         border border-[var(--pu-border)]
+         text-[var(--pu-text-muted)]
+         hover:text-[var(--pu-text)]
+         hover:bg-[var(--pu-surface-alt)]
+         hover:border-[var(--pu-border-strong)]
+         active:bg-[var(--pu-border-muted)]
+         focus-visible:ring-[var(--pu-border)];
+}
+
+/* Soft variants - Tinted backgrounds */
+.pu-btn-soft-primary {
+  @apply bg-primary-50 text-primary-700
+         hover:bg-primary-100
+         active:bg-primary-200
+         focus-visible:ring-primary-500;
+}
+.dark .pu-btn-soft-primary {
+  @apply bg-primary-950/50 text-primary-300
+         hover:bg-primary-900/60
+         active:bg-primary-900/80;
+}
+
+.pu-btn-soft-danger {
+  @apply bg-danger-50 text-danger-700
+         hover:bg-danger-100
+         active:bg-danger-200
+         focus-visible:ring-danger-500;
+}
+.dark .pu-btn-soft-danger {
+  @apply bg-danger-950/50 text-danger-300
+         hover:bg-danger-900/60
+         active:bg-danger-900/80;
+}
+
+.pu-btn-soft-success {
+  @apply bg-success-50 text-success-700
+         hover:bg-success-100
+         active:bg-success-200
+         focus-visible:ring-success-500;
+}
+.dark .pu-btn-soft-success {
+  @apply bg-success-950/50 text-success-300
+         hover:bg-success-900/60
+         active:bg-success-900/80;
+}
+
+.pu-btn-soft-warning {
+  @apply bg-warning-50 text-warning-700
+         hover:bg-warning-100
+         active:bg-warning-200
+         focus-visible:ring-warning-500;
+}
+.dark .pu-btn-soft-warning {
+  @apply bg-warning-950/50 text-warning-300
+         hover:bg-warning-900/60
+         active:bg-warning-900/80;
+}
+
+.pu-btn-soft-info {
+  @apply bg-info-50 text-info-700
+         hover:bg-info-100
+         active:bg-info-200
+         focus-visible:ring-info-500;
+}
+.dark .pu-btn-soft-info {
+  @apply bg-info-950/50 text-info-300
+         hover:bg-info-900/60
+         active:bg-info-900/80;
+}
+
+.pu-btn-soft-secondary {
+  @apply bg-secondary-50 text-secondary-700
+         hover:bg-secondary-100
+         active:bg-secondary-200
+         focus-visible:ring-secondary-500;
+}
+.dark .pu-btn-soft-secondary {
+  @apply bg-secondary-950/50 text-secondary-300
+         hover:bg-secondary-900/60
+         active:bg-secondary-900/80;
+}
+
+.pu-btn-soft-accent {
+  @apply bg-accent-50 text-accent-700
+         hover:bg-accent-100
+         active:bg-accent-200
+         focus-visible:ring-accent-500;
+}
+.dark .pu-btn-soft-accent {
+  @apply bg-accent-950/50 text-accent-300
+         hover:bg-accent-900/60
+         active:bg-accent-900/80;
+}
+
+/* ===================
+   CARDS - Clean, elevated
+   =================== */
+
+.pu-card {
+  background-color: var(--pu-card-bg);
+  border: 1px solid var(--pu-card-border);
+  border-radius: var(--pu-radius-lg);
+  box-shadow: var(--pu-shadow-sm);
+}
+
+.pu-card-body {
+  padding: var(--pu-space-lg);
+}
+
+/* ===================
+   FORM INPUTS - Clean, modern
+   =================== */
+
+.pu-input {
+  background-color: var(--pu-input-bg);
+  border: 1px solid var(--pu-input-border);
+  border-radius: var(--pu-radius-md);
+  color: var(--pu-text);
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  @apply w-full px-4 py-3
+         text-base
+         focus:outline-none;
+}
+.pu-input-icon-left {
+  @apply pl-10;
+}
+.pu-input::placeholder {
+  color: var(--pu-input-placeholder);
+}
+.pu-input:hover {
+  border-color: var(--pu-border-strong);
+}
+.pu-input:focus {
+  border-color: var(--pu-input-focus-ring);
+  box-shadow: 0 0 0 3px theme(colors.primary.500 / 15%);
+}
+
+.pu-input-invalid {
+  @apply border-danger-500 bg-danger-50/50
+         text-danger-900 placeholder:text-danger-400;
+}
+.pu-input-invalid:focus {
+  box-shadow: 0 0 0 3px theme(colors.danger.500 / 15%);
+}
+.dark .pu-input-invalid {
+  @apply bg-danger-950/20 border-danger-500/70
+         text-danger-200 placeholder:text-danger-400;
+}
+
+.pu-input-valid {
+  @apply border-success-500 bg-success-50/50
+         text-success-900 placeholder:text-success-400;
+}
+.pu-input-valid:focus {
+  box-shadow: 0 0 0 3px theme(colors.success.500 / 15%);
+}
+.dark .pu-input-valid {
+  @apply bg-success-950/20 border-success-500/70
+         text-success-200 placeholder:text-success-400;
+}
+
+.pu-label {
+  color: var(--pu-text);
+  @apply block mb-2 text-base font-semibold;
+}
+
+.pu-label-required::after {
+  content: " *";
+  @apply text-danger-500;
+}
+
+.pu-hint {
+  color: var(--pu-text-muted);
+  @apply mt-2 text-sm;
+}
+
+.pu-error {
+  @apply mt-2 text-sm font-medium text-danger-600;
+}
+.dark .pu-error {
+  @apply text-danger-400;
+}
+
+/* ===================
+   TABLE - Minimal, clean
+   =================== */
+
+.pu-table-wrapper {
+  background-color: var(--pu-card-bg);
+  border: 1px solid var(--pu-card-border);
+  border-radius: var(--pu-radius-lg);
+  box-shadow: var(--pu-shadow-sm);
+  @apply overflow-x-auto;
+}
+
+.pu-table {
+  color: var(--pu-text);
+  @apply w-full text-base text-left;
+}
+
+.pu-table-header {
+  background-color: var(--pu-table-header-bg);
+  color: var(--pu-table-header-text);
+  border-bottom: 1px solid var(--pu-table-border);
+  @apply text-xs font-semibold uppercase tracking-wider;
+}
+
+.pu-table-header-cell {
+  @apply px-6 py-4;
+}
+
+.pu-table-body-row {
+  background-color: var(--pu-table-row-bg);
+  border-bottom: 1px solid var(--pu-table-border);
+  transition: background-color 150ms ease;
+  @apply last:border-b-0;
+}
+.pu-table-body-row:hover {
+  background-color: var(--pu-table-row-hover);
+}
+
+.pu-table-body-row-selected {
+  background-color: var(--pu-table-row-selected);
+}
+
+.pu-table-body-cell {
+  color: var(--pu-text);
+  @apply px-6 py-4;
+}
+
+/* ===================
+   TOOLBAR - Clean, integrated
+   =================== */
+
+.pu-toolbar {
+  background: linear-gradient(to right, theme(colors.primary.50), theme(colors.primary.100/50%));
+  border: 1px solid theme(colors.primary.200);
+  border-radius: var(--pu-radius-lg);
+  @apply items-center gap-4
+         px-5 py-3 mb-4;
+}
+.dark .pu-toolbar {
+  background: linear-gradient(to right, theme(colors.primary.950/40%), theme(colors.primary.900/30%));
+  border-color: theme(colors.primary.800/50%);
+}
+
+.pu-toolbar-text {
+  @apply text-base font-semibold text-primary-700;
+}
+.dark .pu-toolbar-text {
+  @apply text-primary-300;
+}
+
+.pu-toolbar-actions {
+  @apply flex items-center gap-2;
+}
+
+/* ===================
+   CHECKBOX - Modern
+   =================== */
+
+.pu-checkbox {
+  @apply size-5 rounded-md
+         bg-white border-2 border-slate-300
+         accent-primary-600
+         focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0
+         cursor-pointer
+         transition-all duration-150
+         checked:bg-primary-600 checked:border-primary-600
+         indeterminate:bg-primary-600 indeterminate:border-primary-600
+         hover:border-primary-400;
+}
+.dark .pu-checkbox {
+  @apply bg-slate-700 border-slate-500
+         hover:border-primary-400;
+}
+
+/* ===================
+   EMPTY STATE
+   =================== */
+
+.pu-empty-state {
+  @apply flex flex-col items-center justify-center
+         py-16 px-8
+         text-center;
+}
+
+.pu-empty-state-icon {
+  color: var(--pu-text-subtle);
+  @apply w-16 h-16 mb-6;
+}
+
+.pu-empty-state-title {
+  color: var(--pu-text);
+  @apply text-xl font-semibold mb-3;
+}
+
+.pu-empty-state-description {
+  color: var(--pu-text-muted);
+  @apply text-base max-w-md leading-relaxed;
+}
+
+/* ===================
+   PANEL HEADER
+   =================== */
+
+.pu-panel-header {
+  background-color: var(--pu-surface-alt);
+  border-bottom: 1px solid var(--pu-border);
+  @apply px-6 py-5;
+}
+
+.pu-panel-title {
+  color: var(--pu-text);
+  @apply text-xl font-semibold;
+}
+
+.pu-panel-description {
+  color: var(--pu-text-muted);
+  @apply mt-1 text-base;
+}
+
+/* ===================
+   SELECTION CELL
+   =================== */
+
+.pu-selection-cell {
+  @apply w-14 px-6 py-4;
+}

package/src/css/intl_tel_input.css

@@ -43,7 +43,7 @@
 .iti input.iti__tel-input[type=tel],
 .iti input.iti__tel-input[type=text] {
   @apply w-full border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none transition-colors duration-200 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
-  padding: theme(spacing.2);
+  padding: theme(spacing.3) theme(spacing.4);
   padding-left: 52px;
   /* Space for country selector */
 }
@@ -51,7 +51,7 @@
 /* Country container positioning */
 .iti .iti__country-container {
   @apply absolute top-0 bottom-0 left-0 z-10;
-  padding: theme(spacing.2);
+  padding: theme(spacing.3) theme(spacing.2);
   width: 52px;
   /* Fixed width to match input padding */
 }

package/src/css/plutonium.css

@@ -1,3 +1,5 @@
+@import "tokens.css";
+@import "components.css";
 @import "core.css";
 @import "easymde.css";
 @import "slim_select.css";