view_primitives 0.1.3 → 0.2.0

data/lib/generators/view_primitives/add/templates/tooltip/tooltip_component.rb.tt

@@ -2,10 +2,9 @@
 
 module UI
   class TooltipComponent < ApplicationComponent
-    BUBBLE_BASE = "absolute z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance " \
-                  "bg-foreground text-background " \
-                  "opacity-0 group-hover:opacity-100 pointer-events-none whitespace-nowrap " \
-                  "transition-opacity duration-200"
+    BUBBLE_BASE = "pointer-events-none absolute z-50 w-fit rounded-md bg-foreground px-3 py-1.5 " \
+                  "text-xs text-balance whitespace-nowrap text-background opacity-0 " \
+                  "transition-opacity duration-200 group-hover:opacity-100"
 
     POSITIONS = {
       top:    "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -23,7 +22,8 @@ module UI
 
     def call
       content_tag(:span,
-        class: cn("relative inline-flex group", @extra_class),
+        class: cn("group relative inline-flex", @extra_class),
+        data: { slot: "tooltip" },
         **@html_attrs) do
         concat content
         concat tooltip_bubble
@@ -36,7 +36,8 @@ module UI
       content_tag(:span,
         @text,
         class: cn(BUBBLE_BASE, POSITIONS.fetch(@side, POSITIONS[:top])),
-        role: "tooltip")
+        role: "tooltip",
+        data: { slot: "tooltip-content" })
     end
   end
 end

data/lib/generators/view_primitives/add/templates/video/video_component.rb.tt

@@ -2,7 +2,7 @@
 
 module UI
   class VideoComponent < ApplicationComponent
-    BASE = "max-w-full"
+    BASE = "h-auto w-full max-w-full rounded-md"
 
     # Add <source> elements via v.with_source(src:, type:)
     renders_many :sources, "UI::VideoComponent::SourceComponent"

data/lib/generators/view_primitives/add/templates/wysiwyg/wysiwyg_component.rb.tt

@@ -30,7 +30,10 @@ module UI
 
     ADAPTERS = %w[trix quill].freeze
 
-    WRAPPER_CLS = "rounded-md border border-input bg-background shadow-xs"
+    WRAPPER_CLS = "rounded-md border border-input bg-transparent shadow-xs dark:bg-input/30"
+    TRIX_CLS    = "trix-content min-h-[200px] px-3 py-2 text-sm outline-none " \
+                  "selection:bg-primary selection:text-primary-foreground " \
+                  "#{UI::Styles::FOCUS_RING}"
 
     def initialize(name:, adapter: :trix, value: nil, placeholder: nil,
                    toolbar: true, height: 200, **html_attrs)
@@ -46,7 +49,10 @@ module UI
     end
 
     def call
-      content_tag(:div, class: cn(WRAPPER_CLS, @extra_class)) do
+      content_tag(:div,
+        class: cn(WRAPPER_CLS, @extra_class),
+        data: { slot: "wysiwyg" },
+        **@html_attrs) do
         @adapter == "quill" ? quill_markup : trix_markup
       end
     end
@@ -59,7 +65,7 @@ module UI
         tag.send(:"trix-editor",
           input: @input_id,
           placeholder: @placeholder,
-          class: "trix-content min-h-[200px] px-3 py-2 text-sm focus:outline-none")
+          class: TRIX_CLS)
       ])
     end
 

data/lib/generators/view_primitives/component_copier.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require_relative "components"
+
+module ViewPrimitives
+  module Generators
+    module ComponentCopier
+      def self.included(base)
+        base.no_tasks do
+          define_method(:template) do |source, *args, **options, &blk|
+            destination = args.first || options[:to]
+            return unless destination.nil? || confirm_overwrite(destination)
+
+            super(source, *args, **options, &blk)
+          end
+
+          define_method(:copy_file) do |source, *args, **options|
+            destination = args.first || options[:to]
+            return unless destination.nil? || confirm_overwrite(destination)
+
+            super(source, *args, **options)
+          end
+        end
+      end
+
+      private
+
+      def copy_component(name)
+        dir = File.join(Components::TEMPLATE_ROOT, name)
+        unless File.directory?(dir)
+          say "  Missing templates for #{name}", :red
+          return false
+        end
+
+        with_source_root(Components::TEMPLATE_ROOT) do
+          Dir.each_child(dir).sort.each { |file| copy_template_file(name, file) }
+        end
+        copy_extra_stimulus(name)
+        true
+      end
+
+      def copy_template_file(component, file)
+        relative = File.join(component, file)
+
+        case file
+        when /\.rb\.tt\z/
+          template relative, "app/components/ui/#{file.delete_suffix(".tt")}"
+        when /\.html\.erb\z/
+          copy_file relative, "app/components/ui/#{file}"
+        when /_controller\.js\z/
+          copy_js_controller("#{component}/#{file}", file.delete_suffix("_controller.js"))
+        end
+      end
+
+      def copy_extra_stimulus(name)
+        config = Components::EXTRA_STIMULUS[name]
+        return unless config
+
+        with_source_root(Components::TEMPLATE_ROOT) do
+          copy_js_controller(config[:source], config[:name])
+        end
+      end
+
+      def copy_js_controller(relative_source, stimulus_name)
+        return if stimulus_name.empty?
+
+        dir = js_controllers_dir
+        unless dir
+          say "  Could not detect a JS controllers directory.", :yellow
+          say "  Copy #{relative_source} manually and register Stimulus `#{stimulus_name}`.", :cyan
+          return
+        end
+
+        dest = "#{dir}/#{stimulus_name}_controller.js"
+        copy_file relative_source, dest
+        say "  Stimulus `#{stimulus_name}` → #{dest}", :green
+      end
+
+      def with_source_root(path)
+        already_present = source_paths.include?(path)
+        source_paths.unshift(path) unless already_present
+        yield
+      ensure
+        source_paths.delete(path) unless already_present
+      end
+
+      def confirm_overwrite(destination)
+        return true unless File.exist?(File.join(destination_root, destination))
+        return true if options[:force]
+
+        say "  #{destination} already exists.", :yellow
+        yes?("  Overwrite? [y/N] ")
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/components.rb

@@ -7,9 +7,13 @@ module ViewPrimitives
 
       # Stimulus controllers not colocated with the component template directory.
       EXTRA_STIMULUS = {
-        "alert_dialog" => {source: "dialog/dialog_controller.js", name: "dialog"}
+        "alert_dialog" => {source: "dialog/dialog_controller.js", name: "dialog"},
+        "sheet" => {source: "dialog/dialog_controller.js", name: "dialog"},
+        "drawer" => {source: "dialog/dialog_controller.js", name: "dialog"}
       }.freeze
 
+      OPTIONAL_THEMES = %w[rose].freeze
+
       # Post-install instructions for components that require external dependencies.
       SETUP_NOTES = {
         "chart" => <<~TEXT,
@@ -47,7 +51,9 @@ module ViewPrimitives
       }.freeze
 
       def self.supported
-        @supported ||= Dir.children(TEMPLATE_ROOT).sort.freeze
+        @supported ||= Dir.children(TEMPLATE_ROOT)
+          .select { |e| File.directory?(File.join(TEMPLATE_ROOT, e)) }
+          .sort.freeze
       end
 
       def self.primary_path(component)
@@ -57,6 +63,14 @@ module ViewPrimitives
       def self.installed?(component, root)
         File.exist?(File.join(root, primary_path(component)))
       end
+
+      def self.installed(root)
+        supported.select { |name| installed?(name, root) }
+      end
+
+      def self.optional_theme_imports
+        OPTIONAL_THEMES
+      end
     end
   end
 end

data/lib/generators/view_primitives/install/install_generator.rb

@@ -9,6 +9,9 @@ module ViewPrimitives
 
       source_root File.expand_path("templates", __dir__)
 
+      class_option :force, type: :boolean, default: false,
+        desc: "Overwrite existing ApplicationComponent and CSS files"
+
       def verify_ui_inflection
         return if "ui/button_component".camelize == "UI::ButtonComponent"
 
@@ -19,16 +22,23 @@ module ViewPrimitives
 
       def create_application_component
         target = "app/components/application_component.rb"
+        exists = File.exist?(File.join(destination_root, target))
 
-        if File.exist?(File.join(destination_root, target))
-          say "  ApplicationComponent already exists. Add `include ViewPrimitives::ClassHelper` manually.", :yellow
+        if exists && !options[:force]
+          say "  ApplicationComponent already exists. Add `include ViewPrimitives::ClassHelper` and " \
+              "`extract_html_attrs` manually, or re-run with --force.", :yellow
         else
           template "application_component.rb.tt", target
         end
       end
 
-      def create_css_variables
+      def create_ui_styles
+        template "styles.rb.tt", "app/components/ui/styles.rb"
+      end
+
+      def create_css_bundle
         copy_file "view_primitives.css", css_dest_path
+        directory "view_primitives", "#{css_dest_dir}/view_primitives"
       end
 
       def inject_css_import

data/lib/generators/view_primitives/install/templates/application_component.rb.tt

@@ -2,4 +2,11 @@
 
 class ApplicationComponent < ViewComponent::Base
   include ViewPrimitives::ClassHelper
+
+  private
+
+  def extract_html_attrs(**html_attrs)
+    @extra_class = html_attrs.delete(:class)
+    @html_attrs = html_attrs
+  end
 end

data/lib/generators/view_primitives/install/templates/styles.rb.tt

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # Shared CSS primitive class names (see view_primitives/utilities.css).
+  # Update via: rails g view_primitives:update --skip-components
+  module Styles
+    FOCUS_RING = "vp-focus-ring"
+    PEER_FOCUS_RING = "vp-peer-focus-ring"
+    BORDER = "vp-border"
+    INPUT = "vp-input"
+    TEXTAREA = "vp-textarea"
+    SELECT = "vp-select"
+    OVERLAY = "vp-overlay"
+    POPOVER_PANEL = "vp-popover-panel"
+    MENU_ITEM = "vp-menu-item"
+    MENU_SEPARATOR = "block -mx-1 my-1 h-px shrink-0 border-0 bg-border"
+    # Form-adjacent surfaces (calendar, picker popovers)
+    FIELD_PANEL = "rounded-md border border-input bg-background shadow-xs"
+    # Date/time picker trigger button shell (add width via class:)
+    PICKER_TRIGGER = "inline-flex h-9 shrink-0 cursor-pointer items-center justify-start gap-2 " \
+                     "rounded-md border border-input bg-background px-4 py-2 text-left text-sm font-normal shadow-xs " \
+                     "transition-all outline-none hover:bg-accent hover:text-accent-foreground " \
+                     "#{FOCUS_RING} dark:bg-input/30 dark:hover:bg-input/50 " \
+                     "aria-expanded:border-ring has-[>svg]:px-3"
+  end
+end

data/lib/generators/view_primitives/install/templates/view_primitives/themes/default.css

@@ -0,0 +1,79 @@
+/* Default light and dark theme values. Override per-theme in themes/*.css. */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.97 0.01 17);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --surface: oklch(0.98 0 0);
+  --surface-foreground: var(--foreground);
+  --selection: oklch(0.205 0 0);
+  --selection-foreground: oklch(1 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.58 0.22 27);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.439 0 0);
+  --surface: oklch(0.2 0 0);
+  --surface-foreground: oklch(0.708 0 0);
+  --selection: oklch(0.922 0 0);
+  --selection-foreground: oklch(0.205 0 0);
+}

data/lib/generators/view_primitives/install/templates/view_primitives/themes/rose.css

@@ -0,0 +1,57 @@
+/* Rose theme — apply with data-theme="rose" on html or a layout wrapper. */
+[data-theme="rose"] {
+  --radius: 0.75rem;
+  --background: oklch(0.99 0.01 350);
+  --foreground: oklch(0.25 0.04 350);
+  --card: oklch(1 0.005 350);
+  --card-foreground: oklch(0.25 0.04 350);
+  --popover: oklch(1 0.005 350);
+  --popover-foreground: oklch(0.25 0.04 350);
+  --primary: oklch(0.55 0.2 350);
+  --primary-foreground: oklch(0.99 0.01 350);
+  --secondary: oklch(0.96 0.02 350);
+  --secondary-foreground: oklch(0.35 0.06 350);
+  --muted: oklch(0.96 0.02 350);
+  --muted-foreground: oklch(0.5 0.05 350);
+  --accent: oklch(0.94 0.03 350);
+  --accent-foreground: oklch(0.35 0.06 350);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.97 0.01 17);
+  --border: oklch(0.9 0.03 350);
+  --input: oklch(0.9 0.03 350);
+  --ring: oklch(0.55 0.2 350);
+  --chart-1: oklch(0.65 0.22 350);
+  --chart-2: oklch(0.6 0.18 10);
+  --chart-3: oklch(0.55 0.15 320);
+  --chart-4: oklch(0.7 0.12 280);
+  --chart-5: oklch(0.5 0.1 200);
+  --sidebar: oklch(0.98 0.015 350);
+  --sidebar-foreground: oklch(0.25 0.04 350);
+  --sidebar-primary: oklch(0.55 0.2 350);
+  --sidebar-primary-foreground: oklch(0.99 0.01 350);
+  --sidebar-accent: oklch(0.94 0.03 350);
+  --sidebar-accent-foreground: oklch(0.35 0.06 350);
+  --sidebar-border: oklch(0.9 0.03 350);
+  --sidebar-ring: oklch(0.55 0.2 350);
+}
+
+[data-theme="rose"].dark,
+.dark [data-theme="rose"] {
+  --background: oklch(0.18 0.03 350);
+  --foreground: oklch(0.97 0.01 350);
+  --card: oklch(0.22 0.04 350);
+  --card-foreground: oklch(0.97 0.01 350);
+  --popover: oklch(0.22 0.04 350);
+  --popover-foreground: oklch(0.97 0.01 350);
+  --primary: oklch(0.72 0.18 350);
+  --primary-foreground: oklch(0.2 0.04 350);
+  --secondary: oklch(0.28 0.04 350);
+  --secondary-foreground: oklch(0.97 0.01 350);
+  --muted: oklch(0.28 0.04 350);
+  --muted-foreground: oklch(0.7 0.05 350);
+  --accent: oklch(0.32 0.05 350);
+  --accent-foreground: oklch(0.97 0.01 350);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.72 0.18 350);
+}

data/lib/generators/view_primitives/install/templates/view_primitives/tokens.css

@@ -0,0 +1,46 @@
+/* Design token bridge — maps CSS variables to Tailwind theme keys. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-selection: var(--selection);
+  --color-selection-foreground: var(--selection-foreground);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}

data/lib/generators/view_primitives/install/templates/view_primitives/utilities.css

@@ -0,0 +1,64 @@
+/* Shared component primitives — referenced from UI::Styles in Ruby components. */
+
+@utility vp-focus-ring {
+  @apply outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50;
+}
+
+@utility vp-input {
+  @apply h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs;
+  @apply transition-[color,box-shadow] outline-none;
+  @apply selection:bg-primary selection:text-primary-foreground;
+  @apply file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground;
+  @apply placeholder:text-muted-foreground;
+  @apply vp-focus-ring;
+  @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40;
+  @apply disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
+  @apply md:text-sm dark:bg-input/30;
+}
+
+@utility vp-textarea {
+  @apply field-sizing-content min-h-16 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs;
+  @apply transition-[color,box-shadow] outline-none;
+  @apply selection:bg-primary selection:text-primary-foreground;
+  @apply placeholder:text-muted-foreground;
+  @apply vp-focus-ring;
+  @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40;
+  @apply disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
+  @apply md:text-sm dark:bg-input/30;
+}
+
+@utility vp-overlay {
+  @apply fixed inset-0 z-50 bg-black/50;
+}
+
+@utility vp-border {
+  @apply border border-border;
+}
+
+@utility vp-popover-panel {
+  @apply absolute z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-xs outline-hidden;
+}
+
+@utility vp-select {
+  @apply h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs;
+  @apply transition-[color,box-shadow] outline-none;
+  @apply selection:bg-primary selection:text-primary-foreground;
+  @apply placeholder:text-muted-foreground;
+  @apply vp-focus-ring;
+  @apply aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40;
+  @apply disabled:pointer-events-none disabled:cursor-not-allowed;
+  @apply data-[size=sm]:h-8 data-[size=sm]:py-1;
+  @apply dark:bg-input/30 dark:hover:bg-input/50;
+}
+
+@utility vp-peer-focus-ring {
+  @apply peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50;
+}
+
+@utility vp-menu-item {
+  @apply relative flex cursor-default items-center gap-2 whitespace-nowrap rounded-sm px-2 py-1.5 text-sm outline-hidden select-none;
+  @apply transition-colors;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+  @apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+}

data/lib/generators/view_primitives/install/templates/view_primitives.css

@@ -1,67 +1,7 @@
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+/* ViewPrimitives design system entry point. */
+@import "./view_primitives/tokens.css";
+@import "./view_primitives/utilities.css";
+@import "./view_primitives/themes/default.css";
 
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --radius: 0.625rem;
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-}
+/* Optional themes — install with: rails g view_primitives:theme rose */
+/* @import "./view_primitives/themes/rose.css"; */

data/lib/generators/view_primitives/list/list_generator.rb

@@ -18,7 +18,9 @@ module ViewPrimitives
           say format("%-18s %s", component, status), color
         end
 
-        say "\nInstall: rails g view_primitives:add <name>\n", :cyan
+        say "\nInstall:  rails g view_primitives:add <name>", :cyan
+        say "Update:   rails g view_primitives:update", :cyan
+        say "Themes:   rails g view_primitives:theme rose\n", :cyan
       end
     end
   end