ruby_ui_admin 0.1.0

data/app/components/ruby_ui_admin/views/action_trigger.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    # An action button that opens an inline modal with the action form. Without JS the
+    # button is a plain link to the action page (Views::Action), so it always works.
+    class ActionTrigger < Phlex::HTML
+      include RubyUIAdmin::UI
+      include RailsHelpers
+      include PathHelpers
+
+      # `bulk: true` renders a submit button tied (via the HTML `form` attribute) to the
+      # bulk-selection form `form_id`, so without JS it submits the checked rows to the
+      # action page. With JS the checked ids are injected into the modal form instead.
+      # `part:` controls what is rendered — `:both` (default), `:trigger` (just the button/link)
+      # or `:dialog` (just the modal). When triggers live inside the actions Combobox, the dialogs
+      # are rendered separately (outside the popover) so closing it doesn't hide the open modal.
+      # `as_menu_item: true` styles the trigger to fill a Combobox item row.
+      def initialize(resource:, action:, record_ids: [], bulk: false, form_id: nil, part: :both, as_menu_item: false)
+        @resource = resource
+        @action = action
+        @record_ids = record_ids
+        @bulk = bulk
+        @form_id = form_id
+        @part = part
+        @as_menu_item = as_menu_item
+      end
+
+      def view_template
+        render_trigger unless @part == :dialog
+        render_dialog unless @part == :trigger
+      end
+
+      private
+
+      def render_trigger
+        if @bulk
+          button(
+            type: "submit",
+            form: @form_id,
+            formaction: page_path,
+            formmethod: "get",
+            data: trigger_data,
+            class: trigger_classes
+          ) { @action.name }
+        else
+          a(href: action_path, data: trigger_data, class: trigger_classes) { @action.name }
+        end
+      end
+
+      # Data attributes for the trigger. The `rua--dialog#open` Stimulus action opens the lazy
+      # modal (passing the dialog id / bulk flag as action params). Inside the actions Combobox
+      # the item is also a combobox `input` target (so the search box filters it) and closes the
+      # popover on click — both actions chain on `click`.
+      def trigger_data
+        actions = ["click->rua--dialog#open"]
+        data = {rua__dialog_id_param: dialog_id}
+        # String "true" (not boolean) so Phlex renders `...-bulk-param="true"` and Stimulus
+        # type-casts the action param back to boolean `true` (a boolean would render an empty
+        # attribute, which Stimulus reads as the string "").
+        data[:rua__dialog_bulk_param] = "true" if @bulk
+        if @as_menu_item
+          data[:ruby_ui__combobox_target] = "input"
+          actions << "click->ruby-ui--combobox#closePopover"
+        end
+        data[:action] = actions.join(" ")
+        data
+      end
+
+      # Inside the actions Combobox the trigger fills the item row (the surrounding ComboboxItem
+      # supplies the hover/padding). Standalone it is a normal outline button.
+      def trigger_classes
+        if @as_menu_item
+          "block w-full whitespace-nowrap text-left text-sm"
+        else
+          "inline-flex items-center h-9 px-4 rounded-md border border-input bg-background text-sm font-medium shadow-sm hover:bg-accent"
+        end
+      end
+
+      def action_key
+        @action.class.action_key
+      end
+
+      def dialog_id
+        "rua-action-#{action_key}-#{@bulk ? "bulk" : (@record_ids.first || "all")}"
+      end
+
+      def page_path
+        ruby_ui_admin.resource_action_path(resource_name: @resource.route_key, action_id: action_key)
+      end
+
+      def action_path
+        ids = Array(@record_ids).map { |id| "record_ids[]=#{id}" }
+        ids.any? ? "#{page_path}?#{ids.join("&")}" : page_path
+      end
+
+      def frame_id
+        "#{dialog_id}-frame"
+      end
+
+      # Fragment URL the modal's `<turbo-frame>` loads (so the action's `fields` are only
+      # evaluated when the modal opens). For non-bulk it's a static `src` the frame loads
+      # lazily on open; for bulk the live selection isn't known server-side, so the controller
+      # builds the `src` from this base + the checked ids when the modal opens.
+      def frame_src_base
+        return "#{page_path}?fragment=1&frame_id=#{frame_id}" if @bulk
+
+        sep = action_path.include?("?") ? "&" : "?"
+        "#{action_path}#{sep}fragment=1&frame_id=#{frame_id}"
+      end
+
+      # The form is loaded lazily inside a `<turbo-frame>` when the modal opens: non-bulk frames
+      # have a `src` + `loading="lazy"` (Turbo loads them when the dialog becomes visible); bulk
+      # frames get their `src` set by `rua--dialog#open` from the live selection. Without JS the
+      # trigger is a link/submit to the full action page, so it still works.
+      def render_dialog
+        div(data: {rua_dialog: dialog_id}, hidden: true, class: "fixed inset-0 z-50 flex items-center justify-center p-4") do
+          div(data: {action: "click->rua--dialog#close"}, class: "absolute inset-0 bg-black/50")
+
+          div(class: "relative z-10 w-full max-w-lg rounded-xl border border-border bg-background shadow-lg") do
+            div(class: "flex items-center justify-between p-6 pb-2") do
+              h2(class: "text-lg font-semibold") { @action.name }
+              button(type: "button", data: {action: "click->rua--dialog#close"}, class: "text-muted-foreground hover:text-foreground") { "✕" }
+            end
+            div(class: "p-6 pt-2") do
+              render_dialog_frame
+            end
+          end
+        end
+      end
+
+      def render_dialog_frame
+        attrs = {id: frame_id}
+        if @bulk
+          # No static src — the controller sets it from the checked rows on open.
+          attrs[:data] = {rua_frame_base: frame_src_base}
+        else
+          attrs[:src] = frame_src_base
+          attrs[:loading] = "lazy"
+        end
+
+        tag(:turbo_frame, **attrs) do
+          p(class: "text-sm text-muted-foreground") { "…" }
+        end
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/views/actions_menu.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    # Shared by Index and Show: collapses a set of action triggers into RubyUI's Combobox
+    # (searchable popover) so the actions never wrap/sprawl across the header.
+    module ActionsMenu
+      # Each action is a Combobox item (clickable, opens its modal and closes the popover). The
+      # modals are rendered after the combobox (outside the popover) so closing it doesn't hide
+      # an open modal. `bulk:` ties triggers to the bulk-selection form (`form_id`); `record_ids:`
+      # scopes them to specific records (the single-record show view).
+      def render_actions_menu(actions, bulk: false, form_id: nil, record_ids: [])
+        render RubyUI::Combobox.new do
+          render RubyUI::ComboboxTrigger.new(placeholder: rua_t("index.actions"))
+          render RubyUI::ComboboxPopover.new do
+            render RubyUI::ComboboxSearchInput.new(placeholder: rua_t("index.search"))
+            render RubyUI::ComboboxList.new do
+              render(RubyUI::ComboboxEmptyState.new) { rua_t("index.no_results") }
+              actions.each do |action|
+                render RubyUI::ComboboxItem.new do
+                  render RubyUIAdmin::Views::ActionTrigger.new(resource: @resource, action: action, record_ids: record_ids, bulk: bulk, form_id: form_id, part: :trigger, as_menu_item: true)
+                end
+              end
+            end
+          end
+        end
+
+        actions.each do |action|
+          render RubyUIAdmin::Views::ActionTrigger.new(resource: @resource, action: action, record_ids: record_ids, bulk: bulk, form_id: form_id, part: :dialog)
+        end
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/views/base.rb

@@ -0,0 +1,301 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    # Full-page layout/chrome for every admin screen. Subclasses implement `content`.
+    class Base < Phlex::HTML
+      include RubyUIAdmin::UI
+      include RailsHelpers
+      include PathHelpers
+      include Translation
+
+      def view_template
+        doctype
+        # `overflow-y: auto` keeps the admin scrollable even when the host's global CSS locks page
+        # scroll (e.g. `html, body { overflow: hidden }` for a fixed-viewport app shell) — the admin
+        # renders its own document, so it can't rely on the host layout's own scroll override.
+        html(lang: "en", style: "overflow-y: auto") do
+          head do
+            meta(charset: "utf-8")
+            meta(name: "viewport", content: "width=device-width, initial-scale=1")
+            title { page_title }
+            render_head_assets
+          end
+          # Turbo Drive is on (self-hosted, see render_head_assets) for SPA-style navigation — no
+          # full-page reloads. `rua--confirm` manages the shared delete-confirmation AlertDialog.
+          body(class: "min-h-screen bg-background text-foreground antialiased", data: {controller: "rua--confirm"}) do
+            render RubyUI::SidebarWrapper.new do
+              render_sidebar
+              render RubyUI::SidebarInset.new do
+                render_topbar
+                main(class: "flex-1 min-w-0 p-6 lg:p-8") do
+                  # `rua--dialog` manages the lazy action modals rendered anywhere in the page body.
+                  div(data: {controller: "rua--dialog"}, class: "w-full max-w-7xl mx-auto") { content }
+                end
+              end
+            end
+            render_toaster
+            render_confirm_dialog
+          end
+        end
+      end
+
+      # Overridden by subclasses.
+      def content; end
+
+      # Whether the current user is allowed to perform `rule` on `record`.
+      def authorized_to?(rule, record, policy_class: nil)
+        RubyUIAdmin::Services::AuthorizationService
+          .new(RubyUIAdmin::Current.user, record, policy_class: policy_class)
+          .allowed?(rule)
+      end
+
+      private
+
+      def page_title
+        RubyUIAdmin.configuration.app_name
+      end
+
+      def navigation_resources
+        RubyUIAdmin.resource_manager.navigation_resources
+      end
+
+      # Top bar inside the inset: holds the sidebar trigger (toggles the desktop icon-rail
+      # collapse and opens the mobile drawer). Kept minimal — no app-name/user chrome.
+      def render_topbar
+        header(class: "sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4") do
+          render RubyUI::SidebarTrigger.new(class: "-ml-1")
+        end
+      end
+
+      # The RubyUI Sidebar: fixed/expanded by default, collapses to an icon rail on user
+      # action (persisted via cookie), and becomes a drawer on mobile (<768px).
+      def render_sidebar
+        render RubyUI::Sidebar.new(collapsible: :icon, open: sidebar_open?) do
+          render RubyUI::SidebarHeader.new do
+            div(class: "flex items-center gap-2 px-2 py-1.5 font-semibold") do
+              render RubyUIAdmin::UI::Icon.new(:layout_dashboard, class: "size-5 shrink-0")
+              span(class: "truncate group-data-[collapsible=icon]:hidden") { RubyUIAdmin.configuration.app_name }
+            end
+          end
+
+          render RubyUI::SidebarContent.new do
+            if (menu = main_menu_items)
+              render_menu(menu)
+            else
+              render_auto_menu
+            end
+          end
+
+          render_sidebar_footer
+
+          render RubyUI::SidebarRail.new
+        end
+      end
+
+      # Bottom of the sidebar: current user label + a sign-out item. Rendered only when
+      # `config.sign_out_path_name` is set (resolved via the host's `main_app` routes).
+      def render_sidebar_footer
+        path_name = RubyUIAdmin.configuration.sign_out_path_name
+        return if path_name.blank?
+
+        render RubyUI::SidebarFooter.new do
+          render RubyUI::SidebarMenu.new do
+            if (label = current_user_label)
+              render RubyUI::SidebarMenuItem.new do
+                div(class: "flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground truncate group-data-[collapsible=icon]:hidden") { plain label }
+              end
+            end
+
+            render RubyUI::SidebarMenuItem.new do
+              render_sign_out_button(path_name)
+            end
+          end
+        end
+      end
+
+      def render_sign_out_button(path_name)
+        action = main_app.public_send(path_name)
+        method = (RubyUIAdmin.configuration.sign_out_method || :delete).to_s
+
+        form(action: action, method: "post", class: "w-full") do
+          input(type: "hidden", name: "_method", value: method)
+          input(type: "hidden", name: "authenticity_token", value: form_authenticity_token)
+          render RubyUI::SidebarMenuButton.new(as: :button, type: "submit", title: rua_t("nav.sign_out")) do
+            render RubyUIAdmin::UI::Icon.new(:log_out, class: "size-4 shrink-0")
+            span(class: "truncate") { rua_t("nav.sign_out") }
+          end
+        end
+      end
+
+      # Best-effort label for the signed-in user (email → name → to_s).
+      def current_user_label
+        u = RubyUIAdmin::Current.user
+        return nil unless u
+
+        (u.respond_to?(:email) && u.email.presence) ||
+          (u.respond_to?(:name) && u.name.presence) ||
+          u.to_s
+      end
+
+      # Reads the persisted collapse state (set client-side by the sidebar controller) so
+      # the server renders the same state and there's no flash on navigation.
+      def sidebar_open?
+        request.cookies["sidebar_state"] != "false"
+      rescue
+        true
+      end
+
+      # The curated menu tree, or nil when no `config.main_menu` is set (auto navigation).
+      def main_menu_items
+        block = RubyUIAdmin.configuration.main_menu
+        return nil unless block
+
+        RubyUIAdmin::Menu::Builder.build(&block)
+      end
+
+      # Curated menu: top-level leaves go into one group; each section becomes a group.
+      def render_menu(items)
+        leaves, sections = items.partition { |item| item.type != :section }
+        render_leaf_group(leaves) if leaves.any?
+        sections.each { |section| render_menu_section(section) }
+      end
+
+      def render_menu_section(section)
+        render RubyUI::SidebarGroup.new do
+          if section.label.present?
+            render RubyUI::SidebarGroupLabel.new do
+              render_menu_icon(section.icon)
+              plain section.label.to_s
+            end
+          end
+          leaves = section.items.reject { |item| item.type == :section }
+          render RubyUI::SidebarMenu.new do
+            leaves.each { |item| render_menu_leaf(item) }
+          end
+        end
+        # Nested sections (rare) render as their own sibling groups.
+        section.items.select { |item| item.type == :section }.each { |nested| render_menu_section(nested) }
+      end
+
+      # Auto navigation (no curated menu): a dashboards group (if any) + a resources group.
+      def render_auto_menu
+        dashboards = RubyUIAdmin.dashboard_manager.dashboards
+        render_leaf_group(dashboards.map { |d| RubyUIAdmin::Menu::DashboardItem.new(dashboard: d) }) if dashboards.any?
+        render_leaf_group(navigation_resources.map { |rc| RubyUIAdmin::Menu::ResourceItem.new(resource: rc) })
+      end
+
+      def render_leaf_group(leaves)
+        render RubyUI::SidebarGroup.new do
+          render RubyUI::SidebarMenu.new do
+            leaves.each { |item| render_menu_leaf(item) }
+          end
+        end
+      end
+
+      def render_menu_leaf(item)
+        href, label, icon = menu_leaf_attrs(item)
+        return if href.nil?
+
+        # Resource items stay active across the whole resource (index/show/new/edit/actions),
+        # so the index path is treated as a prefix. Dashboards/links match the exact path only.
+        active = current_path?(href, prefix: item.type == :resource)
+
+        render RubyUI::SidebarMenuItem.new do
+          render RubyUI::SidebarMenuButton.new(as: :a, href: href, title: label.to_s, active: active) do
+            render RubyUIAdmin::UI::Icon.new(icon, class: "size-4 shrink-0")
+            span(class: "truncate") { plain label.to_s }
+          end
+        end
+      end
+
+      # Returns [href, label, icon] for a leaf menu item, or nil href if unresolvable.
+      def menu_leaf_attrs(item)
+        case item.type
+        when :resource
+          [resource_index_path(item.resource), item.label || item.resource.navigation_label, :circle]
+        when :dashboard
+          [ruby_ui_admin.dashboard_path(dashboard_id: item.dashboard.id), item.label || item.dashboard.title, :layout_dashboard]
+        when :link
+          [item.path, item.label, :link]
+        end
+      end
+
+      # Exact path match, or (when `prefix:`) any path nested under it — so a resource's nav
+      # entry stays active on its show/new/edit/action pages, not just the index.
+      def current_path?(href, prefix: false)
+        path = href.to_s.split("?").first
+        return false if path.nil? || path.empty?
+        return true if request.path == path
+
+        prefix && request.path.start_with?("#{path}/")
+      rescue
+        false
+      end
+
+      # Renders a menu section icon. A raw SVG/HTML string is rendered as-is; named icons
+      # (e.g. "heroicons/outline/table-cells") need a host-provided SVG and are skipped.
+      def render_menu_icon(icon)
+        return if icon.nil? || icon.to_s.strip.empty?
+
+        raw(safe(icon.to_s)) if icon.to_s.include?("<svg")
+      end
+
+      # Flash messages render through RubyUI's Toast component (Stimulus-driven). A
+      # `<noscript>` fallback keeps them visible (as badges) when JS is off.
+      def render_toaster
+        messages = flash.to_hash
+
+        render RubyUIAdmin::UI::ToastRegion.new(
+          flash: messages,
+          position: :bottom_right,
+          close_button: true,
+          duration: 5000
+        )
+
+        return if messages.empty?
+
+        noscript do
+          div(class: "fixed top-4 right-4 z-[100] flex flex-col gap-2") do
+            messages.each do |type, message|
+              next if message.blank?
+
+              variant = %w[alert error].include?(type.to_s) ? :destructive : :success
+              render RubyUI::Badge.new(variant: variant) { message.to_s }
+            end
+          end
+        end
+      end
+
+      # Shared confirmation AlertDialog, driven by the `rua--confirm` Stimulus controller (on
+      # <body>). A trigger (e.g. delete) opens it via `click->rua--confirm#request`. Without JS the
+      # trigger's form submits directly (the action still works); with JS, this dialog confirms first.
+      def render_confirm_dialog
+        div(data: {rua__confirm_target: "dialog"}, hidden: true, class: "fixed inset-0 z-50 flex items-center justify-center p-4") do
+          div(data: {action: "click->rua--confirm#cancel"}, class: "absolute inset-0 bg-black/50")
+          div(role: "alertdialog", "aria-modal": "true", class: "relative z-10 w-full max-w-md rounded-xl border border-border bg-background shadow-lg p-6") do
+            h2(data: {rua__confirm_target: "title"}, class: "text-lg font-semibold") { rua_t("confirm.title") }
+            p(data: {rua__confirm_target: "message"}, class: "text-sm text-muted-foreground mt-2") { rua_t("confirm.message") }
+            div(class: "flex items-center justify-end gap-3 mt-6") do
+              render(RubyUI::Button.new(type: :button, variant: :outline, data: {action: "click->rua--confirm#cancel"})) { rua_t("confirm.cancel") }
+              render(RubyUI::Button.new(type: :button, variant: :destructive, data: {action: "click->rua--confirm#confirm"})) { rua_t("confirm.confirm") }
+            end
+          end
+        end
+      end
+
+      # The admin renders the host's RubyUI components, so the host owns the head assets — its
+      # Tailwind build (CSS, incl. the RubyUI design tokens) and its bundler/importmap (JS that
+      # registers the RubyUI Stimulus controllers and ours). The host supplies them via
+      # `config.head_assets` (a proc evaluated in the Rails view context). When unset, no assets
+      # are emitted (the page still renders; it just won't be styled/enhanced).
+      def render_head_assets
+        head_assets = RubyUIAdmin.configuration.head_assets
+        return unless head_assets
+
+        markup = view_context.instance_exec(&head_assets)
+        raw(safe(markup.to_s)) if markup
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/views/card_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    # Renders a single dashboard card, dispatching on the card type.
+    class CardComponent < Phlex::HTML
+      include RubyUIAdmin::UI
+
+      def initialize(card:)
+        @card = card
+      end
+
+      def view_template
+        render RubyUI::Card.new(class: span_class) do
+          render RubyUI::CardHeader.new do
+            render RubyUI::CardTitle.new(class: "text-sm font-medium text-muted-foreground") { @card.label }
+          end
+          render RubyUI::CardContent.new do
+            render_body
+          end
+        end
+      end
+
+      private
+
+      def span_class
+        width = @card.width.to_i
+        width > 1 ? "md:col-span-#{width}" : ""
+      end
+
+      def render_body
+        case @card.type
+        when :metric then render_metric
+        when :chart then render_chart
+        when :partial then raw(safe(@card.body.to_s))
+        else plain(@card.query.to_s)
+        end
+      end
+
+      def render_metric
+        div(class: "text-3xl font-semibold tracking-tight") do
+          plain [@card.prefix, @card.value, @card.suffix].compact.join
+        end
+      end
+
+      def render_chart
+        data = @card.data
+        return plain("—") if data.empty?
+
+        max = data.values.map(&:to_f).max
+        max = 1.0 if max.zero?
+
+        div(class: "space-y-2") do
+          data.each do |label, value|
+            div(class: "space-y-1") do
+              div(class: "flex justify-between text-xs text-muted-foreground") do
+                span { label.to_s }
+                span { value.to_s }
+              end
+              div(class: "h-2 rounded bg-muted") do
+                div(class: "h-2 rounded bg-primary", style: "width: #{(value.to_f / max * 100).round(1)}%")
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/views/dashboard.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    class Dashboard < Base
+      def initialize(dashboard:)
+        @dashboard = dashboard
+      end
+
+      def page_title
+        "#{@dashboard.class.title} · #{RubyUIAdmin.configuration.app_name}"
+      end
+
+      def content
+        div(class: "mb-6") do
+          h1(class: "text-2xl font-semibold tracking-tight") { @dashboard.class.title }
+          if (description = @dashboard.class.description)
+            p(class: "text-sm text-muted-foreground mt-1") { description }
+          end
+        end
+
+        cards = @dashboard.get_cards
+        if cards.empty?
+          p(class: "text-muted-foreground") { "No cards defined yet." }
+        else
+          div(class: grid_class) do
+            cards.each { |card| render RubyUIAdmin::Views::CardComponent.new(card: card) }
+          end
+        end
+      end
+
+      private
+
+      def grid_class
+        columns = @dashboard.class.grid_columns.to_i.clamp(1, 4)
+        "grid gap-4 md:grid-cols-#{columns}"
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/views/docs.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module Views
+    # Standalone, self-contained page for the dev-only docs browser. Deliberately does NOT use the
+    # admin layout or the host's RubyUI/Tailwind assets — it ships its own minimal CSS so it renders
+    # correctly even in a freshly-installed host where the admin's styling isn't wired up yet.
+    class Docs < Phlex::HTML
+      def initialize(body_html:, title:, nav_groups:, current_slug:)
+        @body_html = body_html
+        @title = title
+        @nav_groups = nav_groups
+        @current_slug = current_slug
+      end
+
+      def view_template
+        doctype
+        html(lang: "en") do
+          head do
+            meta(charset: "utf-8")
+            meta(name: "viewport", content: "width=device-width, initial-scale=1")
+            title { "#{@title} · RubyUI Admin docs" }
+            style { raw(safe(STYLES)) }
+          end
+          body do
+            div(class: "rua-docs") do
+              render_sidebar
+              main(class: "rua-docs-main") do
+                article(class: "rua-prose") { raw(safe(@body_html)) }
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      def render_sidebar
+        nav(class: "rua-docs-nav") do
+          div(class: "rua-docs-brand") { "RubyUI Admin · Docs" }
+          @nav_groups.each do |group|
+            div(class: "rua-docs-group") do
+              h3 { group[:label] } if group[:label]
+              ul do
+                group[:items].each do |item|
+                  li do
+                    a(href: item[:href], class: item[:slug] == @current_slug ? "active" : nil) { item[:title] }
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+
+      STYLES = <<~CSS
+        *, *::before, *::after { box-sizing: border-box; }
+        body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2328; background: #fff; }
+        .rua-docs { display: flex; min-height: 100vh; align-items: stretch; }
+        .rua-docs-nav { flex: 0 0 17rem; border-right: 1px solid #e5e7eb; background: #f9fafb; padding: 1.25rem 1rem; overflow-y: auto; position: sticky; top: 0; height: 100vh; }
+        .rua-docs-brand { font-weight: 600; font-size: .9rem; margin-bottom: 1rem; color: #111827; }
+        .rua-docs-group { margin-bottom: 1rem; }
+        .rua-docs-group h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: .75rem 0 .35rem; }
+        .rua-docs-nav ul { list-style: none; margin: 0; padding: 0; }
+        .rua-docs-nav li { margin: 0; }
+        .rua-docs-nav a { display: block; padding: .25rem .5rem; border-radius: .375rem; color: #374151; text-decoration: none; font-size: .85rem; }
+        .rua-docs-nav a:hover { background: #eef2ff; color: #1d4ed8; }
+        .rua-docs-nav a.active { background: #e0e7ff; color: #1d4ed8; font-weight: 600; }
+        .rua-docs-main { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; padding: 2rem 2.5rem 4rem; }
+        .rua-prose { width: 100%; max-width: 48rem; line-height: 1.65; }
+        .rua-prose h1, .rua-prose h2, .rua-prose h3, .rua-prose h4 { line-height: 1.25; font-weight: 600; margin-top: 1.75em; margin-bottom: .6em; }
+        .rua-prose h1 { font-size: 1.9rem; margin-top: 0; }
+        .rua-prose h2 { font-size: 1.45rem; padding-bottom: .3em; border-bottom: 1px solid #e5e7eb; }
+        .rua-prose h3 { font-size: 1.2rem; }
+        .rua-prose p, .rua-prose ul, .rua-prose ol, .rua-prose blockquote, .rua-prose table { margin: 0 0 1em; }
+        .rua-prose a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
+        .rua-prose ul, .rua-prose ol { padding-left: 1.5em; }
+        .rua-prose li { margin: .25em 0; }
+        .rua-prose code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .875em; background: #f3f4f6; padding: .15em .35em; border-radius: .3em; }
+        .rua-prose pre { background: #f6f8fa; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1rem; overflow-x: auto; }
+        .rua-prose pre code { background: none; padding: 0; font-size: .85rem; }
+        .rua-prose blockquote { border-left: 3px solid #d1d5db; padding: .1em 1em; color: #4b5563; background: #f9fafb; border-radius: 0 .375rem .375rem 0; }
+        .rua-prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: .9rem; }
+        .rua-prose th, .rua-prose td { border: 1px solid #e5e7eb; padding: .5em .75em; text-align: left; }
+        .rua-prose th { background: #f9fafb; font-weight: 600; }
+        .rua-prose img { max-width: 100%; }
+        .rua-prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2em 0; }
+      CSS
+    end
+  end
+end