velvetkit 0.1.0.beta

data/registry/app/components/ui/breadcrumb/item_slot.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::ItemSlot < UI::Base
+  def initialize(href:, text:, avatar_src: nil, current: false, **html_attrs)
+    @href = href
+    @text = text
+    @avatar_src = avatar_src
+    @is_current = current
+    @html_attrs = html_attrs
+  end
+
+  def set_context(index, total, size)
+    @index = index
+    @total = total
+    @size = size
+  end
+
+  def effective_current?
+    @is_current || (@index == @total - 1)
+  end
+
+  def size_text_class
+    UI::Breadcrumb::SIZES[@size]
+  end
+
+  def link_classes
+    cn(
+      size_text_class,
+      effective_current? ? "text-foreground font-normal justify-start rounded" : "text-muted-foreground font-normal justify-start rounded"
+    )
+  end
+
+  def link_options
+    opts = @html_attrs.dup
+    opts[:aria] = { current: "page" } if effective_current?
+    opts[:data] = { breadcrumb_text: @text, breadcrumb_href: @href, breadcrumb_avatar: @avatar_src }.compact
+    opts
+  end
+
+  def data_attrs
+    attrs = { breadcrumb_text: @text, breadcrumb_href: @href, breadcrumb_avatar: @avatar_src }.compact
+    attrs[:last] = "true" if effective_current?
+    attrs
+  end
+
+  attr_reader :href, :text, :avatar_src
+end

data/registry/app/components/ui/breadcrumb/list.html.erb

@@ -0,0 +1 @@
+<%= tag.ol class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/breadcrumb/list.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::List < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5", @user_class)
+  end
+end

data/registry/app/components/ui/breadcrumb/separator.html.erb

@@ -0,0 +1 @@
+<%= tag.li role: "presentation" do %><%= tag.span class: classes, aria: { hidden: true } do %>/<% end %><% end %>

data/registry/app/components/ui/breadcrumb/separator.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::Separator < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("text-muted-foreground/70", @user_class)
+  end
+end

data/registry/app/components/ui/breadcrumb.html.erb

@@ -0,0 +1,30 @@
+<%= tag.nav aria: { label: t("ui.breadcrumb.label", default: "Breadcrumb") }, class: classes, **@html_attrs do %>
+  <ol class="flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5">
+    <% visible = visible_items %>
+    <% hidden = hidden_items %>
+    <% prefix = visible[0...-1] %>
+    <% current = visible.last %>
+    <%# START: ellipsis before visible items %>
+    <% if hidden.any? && @collapse_at == :start %>
+      <%= render(UI::Breadcrumb::AutoEllipsis.new(items: hidden, size: @size)) %>
+      <li role="presentation"><%= tag.span class: separator_classes, aria: { hidden: true } do %>/<% end %></li>
+    <% end %>
+    <%# Prefix items with separators %>
+    <% prefix.each do |item| %>
+      <%= item %>
+      <li role="presentation"><%= tag.span class: separator_classes, aria: { hidden: true } do %>/<% end %></li>
+    <% end %>
+    <%# MIDDLE / END: ellipsis before current page %>
+    <% if hidden.any? && %i[middle end].include?(@collapse_at) %>
+      <%= render(UI::Breadcrumb::AutoEllipsis.new(items: hidden, size: @size)) %>
+      <li role="presentation"><%= tag.span class: separator_classes, aria: { hidden: true } do %>/<% end %></li>
+    <% end %>
+    <%# Current page (always last, never truncated) %>
+    <%= current %>
+    <%# Legacy explicit ellipsis support (deprecated) %>
+    <% if ellipsis? && !has_items? %>
+      <%= ellipsis %>
+    <% end %>
+    <%= content %>
+  </ol>
+<% end %>

data/registry/app/components/ui/breadcrumb.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb < UI::Base
+  SEPARATOR_COLOR = "text-muted-foreground/70".freeze
+  SIZES = { sm: "text-xs", md: "text-sm" }.freeze
+  COLLAPSE_POSITIONS = %i[start middle end].freeze
+
+  renders_many :items, ->(href:, text:, avatar_src: nil, current: false, **opts) {
+    UI::Breadcrumb::ItemSlot.new(href: href, text: text, avatar_src: avatar_src, current: current, **opts)
+  }
+  # Deprecated: explicit ellipsis slot will be replaced by auto-ellipsis
+  renders_one :ellipsis, UI::Breadcrumb::Ellipsis
+
+  def initialize(size: :sm, separator_icon: :slash, max_items: nil, collapse_at: :middle, class: nil, **html_attrs)
+    @size = size
+    @separator_icon = separator_icon
+    @max_items = max_items
+    @collapse_at = collapse_at
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def before_render
+    items.each_with_index do |item, idx|
+      item.set_context(idx, items.length, @size)
+    end
+  end
+
+  def classes
+    cn(SIZES[@size], @user_class)
+  end
+
+  def separator_classes
+    cn(
+      SEPARATOR_COLOR,
+      @size == :md ? "text-sm" : "text-xs"
+    )
+  end
+
+  def auto_collapse?
+    @max_items && items.length > @max_items
+  end
+
+  # The last item (current page) is always preserved.
+  # Remaining budget = max_items - 1 is distributed across the prefix.
+  def visible_items
+    return items unless auto_collapse?
+
+    current = [ items.last ]
+    budget = @max_items - 1
+    prefix = items[0...-1]
+
+    case @collapse_at
+    when :start
+      prefix.last([ budget, 0 ].max) + current
+    when :end
+      prefix.first([ budget, 0 ].max) + current
+    when :middle
+      head_count = [ (budget / 2.0).ceil, prefix.length ].min
+      tail_count = [ budget - head_count, prefix.length - head_count ].min
+      tail_count = [ tail_count, 0 ].max
+      prefix.first(head_count) + prefix.last(tail_count) + current
+    else
+      items
+    end
+  end
+
+  def hidden_items
+    return [] unless auto_collapse?
+
+    visible_set = visible_items.to_set
+    items.reject { |item| visible_set.include?(item) }
+  end
+
+  def show_separator_after?(idx, collection = items)
+    return false if idx == collection.length - 1
+    true
+  end
+
+  def has_items?
+    items.any?
+  end
+end

data/registry/app/components/ui/button.html.erb

@@ -0,0 +1 @@
+<%= tag.button type: @type, class: classes, disabled: effective_disabled?, aria: { busy: @loading }, **@html_attrs do %><% if @loading %><span class="sr-only"><%= t("ui.button.loading", default: "Loading, please wait") %></span><%= render(loader_icon) %><% elsif leading_icon? %><%= leading_icon %><% end %><%= content %><% if trailing_icon? && !@loading %><%= trailing_icon %><% end %><% end %>

data/registry/app/components/ui/button.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+class UI::Button < UI::Base
+  ICON_SIZE_FOR_BUTTON_SIZE = {
+    sm:      :xs,
+    default: :sm,
+    lg:      :default,
+    icon:    :sm,
+    icon_sm: :xs
+  }.freeze
+
+  # The disabled-state utilities below carry Tailwind v4 `!` (important) so
+  # they beat the legacy unlayered UI CSS — unlayered rules otherwise
+  # outrank any layered Tailwind utility regardless of specificity.
+  variants(
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap " \
+          "rounded-md text-sm font-medium " \
+          "#{UI::Base::FOCUS_RING} " \
+          "disabled:pointer-events-none " \
+          "disabled:bg-muted! disabled:text-muted-foreground!",
+    variants: {
+      variant: {
+        default:     "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus:ring-destructive",
+        outline:     "border border-input bg-background hover:bg-accent hover:text-accent-foreground " \
+                     "disabled:border-input!",
+        secondary:   "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:       "hover:bg-accent hover:text-accent-foreground disabled:bg-transparent!",
+        link:        "text-primary underline-offset-4 hover:underline " \
+                     "disabled:bg-transparent! disabled:no-underline!"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm:      "h-8 rounded-md px-3 text-xs",
+        lg:      "h-10 rounded-md px-8",
+        icon:    "h-9 w-9",
+        icon_sm: "h-7 w-7"
+      }
+    },
+    defaults: { variant: :default, size: :default }
+  )
+
+  renders_one :leading_icon, ->(name:, size: nil, **opts) {
+    UI::Icon.new(name: name, size: size || ICON_SIZE_FOR_BUTTON_SIZE.fetch(@size, :default), **opts)
+  }
+
+  renders_one :trailing_icon, ->(name:, size: nil, **opts) {
+    UI::Icon.new(name: name, size: size || ICON_SIZE_FOR_BUTTON_SIZE.fetch(@size, :default), **opts)
+  }
+
+  def initialize(variant: :default, size: :default, type: :button,
+                 full_width: false, loading: false, disabled: false,
+                 as_child: false, class: nil, **html_attrs)
+    @variant = variant
+    @size = size
+    @type = type
+    @full_width = full_width
+    @loading = loading
+    @disabled = disabled
+    @as_child = as_child
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def effective_disabled?
+    @disabled || @loading
+  end
+
+  def classes
+    cn(
+      variant_classes(variant: @variant, size: @size),
+      "disabled:cursor-not-allowed",
+      { "w-full" => @full_width },
+      @user_class
+    )
+  end
+
+  def loader_icon
+    UI::Spinner.new(size: ICON_SIZE_FOR_BUTTON_SIZE.fetch(@size, :default))
+  end
+end

data/registry/app/components/ui/button_to.html.erb

@@ -0,0 +1 @@
+<%= button_to @path, **button_options do %><% if @loading %><span class="sr-only"><%= t("ui.button.loading", default: "Loading, please wait") %></span><%= render(loader_icon) %><% elsif leading_icon? %><%= leading_icon %><% end %><%= content %><% if trailing_icon? && !@loading %><%= trailing_icon %><% end %><% end %>

data/registry/app/components/ui/button_to.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# UI::ButtonTo — a UI::Button rendered inside a real form via Rails' `button_to`.
+#
+# Use when the action is a non-GET request (sign-in with a provider, destroy,
+# any state change) rather than navigation. Inherits UI::Button's variants,
+# sizes and icon slots so the two stay visually identical.
+#
+# Velvet::ButtonTo inherited Button's icon/loading slots but its template never
+# rendered them; this one does.
+#
+# Usage:
+#   <%= render(UI::ButtonTo.new(sign_out_path, method: :delete, variant: :outline)) do %>
+#     Sign out
+#   <% end %>
+class UI::ButtonTo < UI::Button
+  def initialize(path, form_class: nil, **args)
+    @path       = path
+    @form_class = form_class
+    super(**args)
+  end
+
+  # `button_to` splits its options: everything here decorates the <button>,
+  # while form-level concerns (method, params, form_class) stay on the form.
+  def button_options
+    opts = @html_attrs.dup
+    opts[:class]      = classes
+    opts[:disabled]   = true if effective_disabled?
+    opts[:form_class] = @form_class if @form_class
+    opts[:"aria-busy"] = "true" if @loading
+    opts
+  end
+end

data/registry/app/components/ui/card/content.html.erb

@@ -0,0 +1 @@
+<%= tag.div class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/card/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Card::Content < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("p-6 pt-0 first:pt-6", @user_class)
+  end
+end

data/registry/app/components/ui/card/description.html.erb

@@ -0,0 +1 @@
+<%= tag.p class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/card/description.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Card::Description < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("text-sm text-muted-foreground", @user_class)
+  end
+end

data/registry/app/components/ui/card/footer.html.erb

@@ -0,0 +1 @@
+<%= tag.div class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/card/footer.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Card::Footer < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex items-center p-6 pt-0", @user_class)
+  end
+end

data/registry/app/components/ui/card/header.html.erb

@@ -0,0 +1 @@
+<%= tag.div class: classes, **@html_attrs do %><% if title? %><%= title %><% end %><% if description? %><%= description %><% end %><%= content %><% end %>

data/registry/app/components/ui/card/header.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class UI::Card::Header < UI::Base
+  renders_one :title, UI::Card::Title
+  renders_one :description, UI::Card::Description
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex flex-col gap-1.5 p-6", @user_class)
+  end
+end

data/registry/app/components/ui/card/title.html.erb

@@ -0,0 +1 @@
+<%= tag.h3 class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/card/title.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Card::Title < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("text-lg font-semibold leading-none tracking-tight", @user_class)
+  end
+end

data/registry/app/components/ui/card.html.erb

@@ -0,0 +1 @@
+<%= tag.div class: classes, **@html_attrs do %><%= header if header? %><%= card_content if card_content? %><%= footer if footer? %><%= content %><% end %>

data/registry/app/components/ui/card.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class UI::Card < UI::Base
+  renders_one :header, UI::Card::Header
+  renders_one :card_content, UI::Card::Content
+  renders_one :footer, UI::Card::Footer
+
+  alias_method :with_content, :with_card_content
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("rounded-xl border bg-card text-card-foreground shadow", @user_class)
+  end
+end

data/registry/app/components/ui/checkbox.html.erb

@@ -0,0 +1,18 @@
+<% if label.present? %>
+  <%= tag.label for: @id, class: wrapper_classes do %>
+    <%= tag.span class: "relative inline-flex" do %>
+      <% if form_field? %><%= form_check_box %><% else %><%= tag.input(**input_options) %><% end %>
+      <%= tag.span class: overlay_classes do %>
+        <%= render(UI::Icon.new(name: "check", size: icon_size, class: "stroke-[3]", aria: { hidden: true })) %>
+      <% end %>
+    <% end %>
+    <%= tag.span class: label_text_classes do %><%= label %><% if required? %><%= tag.span(" *", class: "text-destructive ml-0.5") %><% end %><% end %>
+  <% end %>
+<% else %>
+  <%= tag.span class: "relative inline-flex" do %>
+    <% if form_field? %><%= form_check_box %><% else %><%= tag.input(**input_options) %><% end %>
+    <%= tag.span class: overlay_classes do %>
+      <%= render(UI::Icon.new(name: "check", size: icon_size, class: "stroke-[3]", aria: { hidden: true })) %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/checkbox.rb

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+class UI::Checkbox < UI::Base
+  ICON_SIZE_FOR_SIZE = { sm: :xs, default: :xs, lg: :sm }.freeze
+
+  variants(
+    base: "peer appearance-none shrink-0 border border-input bg-background " \
+          "transition-all " \
+          "checked:bg-primary checked:border-primary " \
+          "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 " \
+          "ring-offset-background",
+    variants: {
+      size: {
+        sm:      "w-3.5 h-3.5 rounded-[3px]",
+        default: "w-4 h-4 rounded-[4px]",
+        lg:      "w-5 h-5 rounded-[5px]"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(name: nil, value: "1", unchecked_value: "0", checked: false,
+                 label: nil, size: :default,
+                 form: nil, field: nil,
+                 required: false, error: false, disabled: false,
+                 class: nil, **html_attrs)
+    @form            = form
+    @field           = field
+    @name            = name
+    @value           = value
+    @unchecked_value = unchecked_value
+    @checked         = checked
+    @label_text      = label
+    @size       = size
+    @required   = required
+    @error      = error
+    @disabled   = disabled
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || ("ui-cb-#{SecureRandom.hex(4)}" if label?)
+    @html_attrs[:id] = @id if @id
+  end
+
+  def form_field?
+    @form.present? && @field.present?
+  end
+
+  # Same convention as UI::Input: bound to a form object the attribute name
+  # supplies the label text (via human_attribute_name, so i18n applies);
+  # `label:` overrides it and `label: false` opts out.
+  def label?
+    return false if @label_text == false
+
+    @label_text.present? || form_field?
+  end
+
+  def label
+    return nil unless label?
+    return @label_text if @label_text.is_a?(String) && @label_text.present?
+    return nil unless form_field?
+
+    object = @form.object
+    if object.respond_to?(:class) && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(@field)
+    else
+      @field.to_s.humanize
+    end
+  end
+
+  # Rails' check_box also emits the companion hidden field, so an unchecked box
+  # still submits its unchecked value.
+  def form_check_box
+    @form.check_box(@field, form_input_options, @value, @unchecked_value)
+  end
+
+  def form_input_options
+    input_options.except(:type, :name, :value, :checked)
+  end
+  def required?; @required;    end
+  def icon_size; ICON_SIZE_FOR_SIZE.fetch(@size); end
+
+  def input_options
+    opts = @html_attrs.dup
+    opts[:type]    = :checkbox
+    opts[:name]    = @name if @name
+    opts[:value]   = @value
+    opts[:checked] = true if @checked
+    opts[:disabled] = true if @disabled
+    opts[:required] = true if @required
+    opts[:"aria-invalid"] = "true" if @error
+    opts[:class]   = classes
+    # Add accessible name when no visual label is present
+    if !label? && opts[:"aria-label"].blank?
+      opts[:"aria-label"] = accessible_name
+    end
+    opts
+  end
+
+  def accessible_name
+    # Derive accessible name from name attribute or use default
+    return "Checkbox" if @name.blank?
+
+    # Convert "user[terms]" to "User terms"
+    @name.to_s.gsub(/[\[\]_]/, " ").gsub(/\s+/, " ").strip.titleize
+  end
+
+  def classes
+    cn(
+      variant_classes(size: @size),
+      { "border-destructive aria-invalid:focus:ring-destructive" => @error },
+      @user_class
+    )
+  end
+
+  def overlay_classes
+    "pointer-events-none absolute inset-0 flex items-center justify-center " \
+    "text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"
+  end
+
+  def wrapper_classes
+    cn(
+      "inline-flex items-center gap-2 select-none",
+      { "cursor-not-allowed opacity-60" => @disabled }
+    )
+  end
+
+  def label_text_classes
+    cn(
+      "text-sm leading-none",
+      { "text-muted-foreground" => @disabled }
+    )
+  end
+end

data/registry/app/components/ui/data_grid.html.erb

@@ -0,0 +1,2 @@
+<%= tag.div class: classes, style: "height: #{reserved_height}",
+            data: grid_options, **@html_attrs %>

data/registry/app/components/ui/data_grid.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+# UI::DataGrid — a sortable, filterable, server-paged table backed by AG Grid.
+#
+# The grid holds one page at a time and asks the server for the next, sending
+# the sort and filter it wants applied, so paging, sorting and filtering all
+# happen in the database. The server answers GET `url` with `startRow`,
+# `endRow`, `sortModel` and `filterModel` (both JSON) as params, returning
+# `{ "rows": [...], "total": n }`.
+#
+# Columns are declared in Ruby so the headers, their widths and which of them
+# the server will accept a sort or filter for are decided in one place.
+#
+# AG Grid is ~365 KB gzipped, so the Stimulus controller fetches it at connect
+# time: a page without a grid never downloads it.
+#
+# Usage:
+#   <%= render(UI::DataGrid.new(url: customers_path(format: :json)) do |grid|
+#         grid.column(:id, t(".id"), width: 90, type: :number)
+#         grid.column(:name, t(".name"))
+#         grid.column(:owner, t(".owner"), sortable: false, filterable: false)
+#       end) %>
+class UI::DataGrid < UI::Base
+  Column = Struct.new(:field, :header, :width, :type, :sortable, :filterable,
+                      keyword_init: true)
+
+  def initialize(url:, page_size: 15, empty_message: nil, class: nil, **html_attrs)
+    @url = url
+    @page_size = page_size
+    @empty_message = empty_message
+    @columns = []
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  # sortable/filterable default to true, and are turned off for a column the
+  # server has no SQL expression for — a value read through an association,
+  # or one translated for display. Offering the control and then ignoring it
+  # would be worse than not offering it.
+  def column(field, header, width: nil, type: :text, sortable: true, filterable: true)
+    @columns << Column.new(field: field.to_s, header: header, width: width, type: type,
+                           sortable: sortable, filterable: filterable)
+    self
+  end
+
+  def before_render
+    content # declares the columns
+  end
+
+  # Rows navigate on click when the server sends a path with them, so the
+  # cursor has to say so.
+  def classes = cn("[&_.ag-row]:cursor-pointer", @user_class)
+
+  def grid_options
+    {
+      controller: "ui--data-grid",
+      "ui--data-grid-url-value": @url,
+      "ui--data-grid-columns-value": column_specs.to_json,
+      "ui--data-grid-page-size-value": @page_size,
+      "ui--data-grid-empty-message-value": @empty_message || t("ui.data_grid.empty"),
+      # Propshaft digests the filename, so the URL has to come from Ruby.
+      "ui--data-grid-module-url-value": helpers.asset_path("ag_grid.js")
+    }
+  end
+
+  # Reserves the grid's final height before its chunk arrives, so the page does
+  # not jump once it paints.
+  def reserved_height = "#{HEADER_HEIGHT + (ROW_HEIGHT * @page_size) + FOOTER_HEIGHT}px"
+
+  HEADER_HEIGHT = 36
+  ROW_HEIGHT = 36
+  FOOTER_HEIGHT = 52
+
+  private
+
+  def column_specs
+    @columns.map do |column|
+      spec = { field: column.field, headerName: column.header, type: column.type,
+               sortable: column.sortable, filterable: column.filterable }
+      spec[:width] = column.width if column.width
+      spec
+    end
+  end
+end