poetry-ui 0.0.2

data/app/components/poetry/ui/context_menu/component.rb

@@ -0,0 +1,358 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # ContextMenu family: the right-click/long-press menu.
+    module ContextMenu
+      # Shared vocabularies, declared once at module level so the root
+      # Component and the nested menu-level classes read the same lists.
+      DIRS = %i[ltr rtl].freeze
+      # The closed vocabulary for the side axis.
+      SIDES = %i[top right bottom left].freeze
+
+      # The shared menus-family kernel wearing this family identity -
+      # SLOT_BUILDERS (reopened at the bottom, once the classes exist) keeps
+      # the registry recursion on the family classes.
+      #
+      # @api private
+      module ItemSlots
+        extend ActiveSupport::Concern
+        include Poetry::Ui::Menus::ItemSlots
+      end
+
+      # A context menu: the same menu anatomy as DropdownMenu, opened by
+      # right-click or long-press on a SURFACE instead of a button. The
+      # surface is NOT a widget - no role, no aria-haspopup, not in the
+      # tab order (unless focusable_surface: opts in) - and with no JS
+      # the browser-native context menu appears untouched. The menu
+      # anchors at the pointer position; side: picks which side of the
+      # pointer it opens toward (default right), and collisions can
+      # still flip it.
+      #
+      # @example Right-click surface with actions
+      #   render Poetry::Ui::ContextMenu::Component.new do |menu|
+      #     menu.with_trigger(tag: :div) { "Right-click this card" }
+      #     menu.with_item { "Rename" }
+      #     menu.with_item(variant: :destructive) { "Delete" }
+      #   end
+      class Component < Poetry::Core::Component
+        include ItemSlots
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "NEVER make a context menu the only path to an action - it is an invisible affordance; every " \
+          "item needs a visible equivalent (a '...' DropdownMenu button, a toolbar, a detail page).",
+          "Choose ContextMenu only for right-click-on-an-object semantics; a visible button opening a " \
+          "menu is DropdownMenu.",
+          "Do not add aria-haspopup or a role to the trigger surface; do not make it focusable except " \
+          "via focusable_surface: true.",
+          "side: picks which side of the pointer the menu opens toward (top/right/bottom/left, default " \
+          ":right); align and offsets are not API - collisions still flip the side.",
+          "Wrap the whole logical object (row/card) as the trigger surface, not a fragment.",
+          "Destructive items use variant: :destructive AND still confirm irreversible actions via a dialog.",
+          "shortcut: is a visual hint only - it does NOT bind the key.",
+          "Do not nest a ContextMenu trigger surface inside another ContextMenu trigger surface."
+        ].freeze
+
+        renders_one :trigger,
+                    doc: "The right-click/long-press SURFACE: wraps arbitrary content (a card, a row, a region); " \
+                         "polymorphic tag: (default :span, set tag: :div to wrap block content). NOT a button: no " \
+                         "role, no aria-haspopup, no tabindex by default. The inline -webkit-touch-callout " \
+                         "suppresses the iOS callout so long-press can run (iOS never fires contextmenu; the timer " \
+                         "is the only touch path there).",
+                    renders: lambda { |**options, &block|
+                      tag_name = options.delete(:tag) || :span
+                      attrs = {
+                        "id" => trigger_id, "data-slot" => "context-menu-trigger",
+                        "aria-controls" => content_id,
+                        "style" => ["-webkit-touch-callout: none", options.delete(:style)].compact.join("; ")
+                      }.merge(stimulus_attributes_for(:trigger))
+                      # The surface state: bare data-popup-open while open, NO
+                      # attribute while closed (absence IS the state).
+                      attrs["data-popup-open"] = "" if open
+                      attrs["data-disabled"] = "" if disabled
+                      if focusable_surface
+                        attrs["tabindex"] = "0"
+                        attrs["aria-keyshortcuts"] = "Shift+F10"
+                      end
+                      content_tag(tag_name, Poetry::Core::HTML::Attributes.merged(attrs, options)) { capture(&block) }
+                    }
+
+        use_stimulus do
+          on :root do
+            controller :context_menu do
+              register
+              value :long_press_delay
+              value :disabled
+            end
+            controller :menu do
+              register
+              value :open
+              value :modal
+              value :loop
+            end
+            controller :popper do
+              register
+              # side: is the one placement knob; align start / side_offset
+              # 2 stay fixed; collisions still flip the side.
+              value :side
+              value :align, :start
+              value :side_offset, 2
+              value :avoid_collisions, true
+            end
+          end
+          # The surface's wiring: contextmenu + the long-press pointer set;
+          # popper's anchor target is the FALLBACK rect for positionless
+          # opens (the stored virtual anchor point wins).
+          on :trigger do
+            controller :context_menu do
+              action :open, on: :contextmenu
+              action :press_start, on: :pointerdown
+              action :press_cancel, on: %i[pointermove pointerup pointercancel]
+            end
+            controller(:popper) { target :anchor }
+          end
+          on :content do
+            controller(:popper) { target :content }
+          end
+          on :item do
+            controller(:menu) { action :activate, on: :click }
+          end
+          on :sub_trigger do
+            controller :menu do
+              action :sub_enter, on: :pointerenter
+              action :sub_leave, on: :pointerleave
+              action :open_sub, on: :click
+            end
+            controller(:popper) { target :anchor }
+          end
+        end
+
+        option :open, :boolean, default: false,
+                                doc: "Server-renders the menu open (rare - context menus normally open from the " \
+                                     "gesture)."
+        option :modal, :boolean, default: true, doc: "Traps focus in the open menu; false keeps the page interactive."
+        option :loop, :boolean, default: false, doc: "Wraps arrow-key movement past either end of the menu."
+        option :long_press_delay, :integer, default: 700, doc: "Touch long-press duration in ms before the menu opens."
+        option :disabled, :boolean, default: false, doc: "Inerts the surface - no gesture opens the menu."
+        option :label, :string, doc: "The menu's accessible name (localized fallback when omitted)."
+        option :focusable_surface, :boolean, default: false,
+                                             doc: "Puts the surface in the tab order and advertises Shift+F10."
+        option :dir, :symbol, doc: "Writing-direction override (ltr/rtl) stamped on the root."
+        option :side, :symbol, default: :right,
+                               doc: "Which side of the pointer the menu opens toward; collisions may still flip it."
+
+        validates :dir, inclusion: { in: DIRS }, allow_nil: true
+        validates :side, inclusion: { in: SIDES }
+
+        part "context-menu", "Root wrapper hosting the context-menu + menu + popper controllers " \
+                             "around the surface and content"
+        part "context-menu-trigger", "The right-click/long-press SURFACE wrapping the logical object " \
+                                     "- not a widget: no role, no aria-haspopup",
+             states: {
+               "data-popup-open" => "the menu is open (absence is the closed state - no aria-expanded " \
+                                    "on a role-less surface)",
+               "data-disabled" => "the surface is inert (disabled: true)"
+             }
+        part "context-menu-content", "The role=menu popup panel - anchored at the pointer via popper's " \
+                                     "virtual-anchor mode; open state and animation ride here",
+             states: {
+               "data-open" => "menu is open (presence flips the pair at runtime)",
+               "data-closed" => "menu is closed or animating out (the server-rendered state)",
+               "data-side" => { condition: "the placement side (the side: option, default right; popper " \
+                                           "re-writes it after collision flips)",
+                                values: %w[top right bottom left] },
+               "data-align" => { condition: "the alignment (forced start initially; popper re-resolves it)",
+                                 values: %w[start center end] }
+             },
+             vars: {
+               "--transform-origin" => "popper's anchor-facing animation origin",
+               "--available-width" => "popper: viewport space left for the panel (post-flip)",
+               "--available-height" => "popper: viewport space left for the panel (post-flip)",
+               "--anchor-width" => "popper: the anchor rect's measured width",
+               "--anchor-height" => "popper: the anchor rect's measured height"
+             }
+        part "context-menu-group", "role=group semantic grouping between separators"
+        part "context-menu-label", "Non-interactive heading for a run of items",
+             states: {
+               "data-inset" => "indented to align with checkbox/radio item text (inset: true)"
+             }
+        part "context-menu-item", "One role=menuitem action row",
+             states: {
+               "data-variant" => "default or destructive (the danger treatment)",
+               "data-inset" => "indented to align with checkbox/radio item text (inset: true)",
+               "data-disabled" => "item is disabled (always written together with aria-disabled)"
+             }
+        part "context-menu-checkbox-item", "A role=menuitemcheckbox toggle row",
+             states: {
+               "data-checked" => "checked (the controller re-writes the pair with aria-checked on " \
+                                 "activation)",
+               "data-unchecked" => "unchecked",
+               "data-disabled" => "item is disabled (always written together with aria-disabled)",
+               "data-close-on-select" => "per-item override of the menu's close-on-select default " \
+                                         "(\"false\" keeps the menu open)"
+             }
+        part "context-menu-radio-group", "role=group scoping one single-select value",
+             states: {
+               "data-value" => "the selected radio value (the controller re-writes it on change)"
+             }
+        part "context-menu-radio-item", "A role=menuitemradio row inside a radio group",
+             states: {
+               "data-checked" => "the selected radio (the controller re-writes the pair with aria-checked)",
+               "data-unchecked" => "not selected",
+               "data-value" => "the radio's value",
+               "data-disabled" => "item is disabled (always written together with aria-disabled)"
+             }
+        part "context-menu-checkbox-item-indicator",
+             "The check glyph inside checkbox items (aria-hidden; the item carries the checked state)"
+        part "context-menu-radio-item-indicator",
+             "The circle glyph inside radio items (aria-hidden; the item carries the checked state)"
+        part "context-menu-separator", "role=separator rule between groups"
+        part "context-menu-shortcut", "The trailing keybinding HINT - aria-hidden, never binds the key"
+        part "context-menu-sub", "A submenu scope - hosts its own popper around the sub trigger/" \
+                                 "content pair"
+        part "context-menu-sub-trigger", "The role=menuitem row opening its submenu",
+             states: {
+               "data-popup-open" => "its submenu is open (written with aria-expanded; absence is the " \
+                                    "closed state)",
+               "data-inset" => "indented to align with checkbox/radio item text (inset: true)"
+             }
+        part "context-menu-sub-content", "The nested role=menu panel - its own popper content on the " \
+                                         "same presence machinery",
+             states: {
+               "data-open" => "submenu is open (presence flips the pair at runtime)",
+               "data-closed" => "submenu is closed (the server-rendered state)",
+               "data-side" => { condition: "the placement side (right/left by direction; popper resolves " \
+                                           "it at runtime)",
+                                values: %w[top right bottom left] },
+               "data-align" => { condition: "the alignment against the sub-trigger (popper resolves it " \
+                                            "at runtime)",
+                                 values: %w[start center end] }
+             },
+             vars: {
+               "--transform-origin" => "popper's anchor-facing animation origin",
+               "--available-width" => "popper: viewport space left for the panel (post-flip)",
+               "--available-height" => "popper: viewport space left for the panel (post-flip)",
+               "--anchor-width" => "popper: the sub-trigger's measured width",
+               "--anchor-height" => "popper: the sub-trigger's measured height"
+             }
+
+        # Enforces the required surface and at least one item.
+        # @api private
+        def before_render
+          raise ArgumentError, "ContextMenu requires with_trigger (the right-click surface)" unless trigger?
+          raise ArgumentError, "ContextMenu requires at least one item" unless items?
+        end
+
+        # The surface's id.
+        # @api private
+        def trigger_id
+          "#{instance_id}-trigger"
+        end
+
+        # The menu panel's id - the surface's aria-controls target.
+        # @api private
+        def content_id
+          "#{instance_id}-content"
+        end
+
+        # Attributes for the root wrapper.
+        # @api private
+        def root_attributes
+          root = { "data-slot" => "context-menu" }
+          root["dir"] = dir.to_s if dir
+          html_attributes.merge_if_not_set(
+            root.merge(stimulus_attributes_for(:root)).merge(component_data_attributes)
+          )
+        end
+
+        # Attributes for the role=menu panel.
+        # @api private
+        def content_attributes
+          attrs = {
+            "id" => content_id, "role" => "menu", "aria-orientation" => "vertical",
+            # No aria-labelledby to the trigger (it is not a widget - the
+            # delta): the menu's name is label: -> the i18n fallback.
+            "aria-label" => label.presence || t("poetry.context_menu.menu_label_fallback"),
+            "tabindex" => "-1",
+            "data-slot" => "context-menu-content", (open ? "data-open" : "data-closed") => "",
+            # The initial placement (side: option; re-resolved live by popper).
+            "data-side" => side.to_s, "data-align" => "start",
+            "class" => css(:content)
+          }.merge(stimulus_attributes_for(:content))
+          attrs["hidden"] = true unless open
+          attrs
+        end
+
+        private
+
+        def menu_dir
+          dir
+        end
+
+        # Server-stable unique id pair (aria-controls is the controller's
+        # portal-safe trigger->content seam).
+        def instance_id
+          @instance_id ||= poetry_instance_id("poetry-context-menu")
+        end
+
+        private :trigger_id, :content_id, :root_attributes, :content_attributes
+      end
+
+      # role=group semantic grouping between separators - the shared kernel
+      # anatomy wearing this family identity.
+      #
+      # @api private
+      class Group < Poetry::Ui::Menus::Group
+        include ItemSlots
+      end
+
+      # role=group scoping the single-select value for its radio items -
+      # the shared kernel anatomy wearing this family identity.
+      #
+      # @api private
+      class RadioGroup < Poetry::Ui::Menus::RadioGroup
+      end
+
+      # A submenu scope (recursive item union on its own popper) - the
+      # shared kernel anatomy wearing this family identity.
+      #
+      # @api private
+      class Sub < Poetry::Ui::Menus::Sub
+        include ItemSlots
+      end
+
+      # The builder classes behind lambda-wrapped slot types: a
+      # lambda hides its return class from introspection, so the owner
+      # declares it and the registry walker recurses into the builder's own
+      # call surface (with_sub yields a Sub with its own items).
+      # REQUIRED_SLOTS states the same facts the before_render
+      # raises enforce, so static checks can flag omissions without
+      # rendering.
+      module ItemSlots
+        # Nested-slot recursion map for the registry projection.
+        SLOT_BUILDERS = { sub: Sub, group: Group, radio_group: RadioGroup }.freeze
+      end
+
+      class Component
+        # The required slots, stated statically for static checks.
+        REQUIRED_SLOTS = { trigger: "the right-click surface", item: "at least one item" }.freeze
+      end
+
+      class Group
+        # The required slots, stated statically for static checks.
+        REQUIRED_SLOTS = { item: "at least one item" }.freeze
+      end
+
+      class RadioGroup
+        # The required slots, stated statically for static checks.
+        REQUIRED_SLOTS = { radio_item: "at least one radio item" }.freeze
+      end
+
+      class Sub
+        # The required slots, stated statically for static checks.
+        REQUIRED_SLOTS = { trigger: "the sub-menu item", item: "at least one item" }.freeze
+      end
+    end
+  end
+end

data/app/components/poetry/ui/context_menu/preview.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module ContextMenu
+      # The ContextMenu preview matrix: the ported context-menu-demo port
+      # (items + shortcuts, a submenu, checkbox items, a radio group) on a
+      # right-click surface, plus inset/disabled items, the disabled
+      # surface (native menu returns), RTL, the focusable-surface keyboard
+      # mode, and the server-rendered open state. Long-press/pointer
+      # anchoring is runtime behavior - the browser pass drives it.
+      class Preview < Poetry::Core::Preview::Base
+        SURFACE_CLASSES = "flex h-[150px] w-[300px] items-center justify-center rounded-md " \
+                          "border border-dashed text-sm select-none"
+
+        # The context-menu-demo port: right-click the dashed surface.
+        def default
+          render_component do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "Right-click here" }
+            menu.with_item(inset: true, shortcut: "⌘[") { "Back" }
+            menu.with_item(inset: true, disabled: true, shortcut: "⌘]") { "Forward" }
+            menu.with_item(inset: true, shortcut: "⌘R") { "Reload" }
+            menu.with_sub do |sub|
+              sub.with_trigger(inset: true) { "More Tools" }
+              sub.with_item(shortcut: "⇧⌘S") { "Save Page As..." }
+              sub.with_item { "Create Shortcut..." }
+              sub.with_item { "Name Window..." }
+              sub.with_separator
+              sub.with_item { "Developer Tools" }
+            end
+            menu.with_separator
+            menu.with_checkbox_item(checked: true, close_on_select: false, shortcut: "⌘⇧B") { "Show Bookmarks Bar" }
+            menu.with_checkbox_item(checked: false, close_on_select: false) { "Show Full URLs" }
+            menu.with_separator
+            menu.with_radio_group(value: "pedro") do |group|
+              group.with_radio_item(value: "pedro") { "Pedro Duarte" }
+              group.with_radio_item(value: "colm") { "Colm Tuite" }
+            end
+          end
+        end
+
+        # A destructive tail + a named menu (label: -> aria-label).
+        def destructive
+          render_component(label: "File actions") do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "quarterly-report.pdf" }
+            menu.with_item { "Open" }
+            menu.with_item { "Rename" }
+            menu.with_separator
+            menu.with_item(variant: :destructive, shortcut: "⌘⌫") { "Delete" }
+          end
+        end
+
+        # disabled: true stands the handlers down - right-click here shows
+        # the BROWSER-NATIVE context menu (never a dead surface).
+        def disabled_surface
+          render_component(disabled: true) do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "Native menu here (disabled)" }
+            menu.with_item { "Unreachable" }
+          end
+        end
+
+        # focusable_surface: true opts the surface into the tab order with
+        # the aria-keyshortcuts hint - Shift+F10 / the Menu key open it.
+        def focusable_surface
+          render_component(focusable_surface: true, label: "Row actions") do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "Focusable row (Shift+F10)" }
+            menu.with_item { "Rename" }
+            menu.with_item { "Duplicate" }
+          end
+        end
+
+        # The submenu side flips under RTL.
+        def rtl
+          render_component(dir: :rtl) do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "انقر بزر الماوس الأيمن" }
+            menu.with_item { "فتح" }
+            menu.with_sub do |sub|
+              sub.with_trigger { "المزيد" }
+              sub.with_item { "استيراد" }
+            end
+          end
+        end
+
+        # A grouped run - the role=group wrapper between separators.
+        def grouped
+          render_component do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "Surface" }
+            menu.with_group do |group|
+              group.with_item { "Cut" }
+              group.with_item { "Copy" }
+            end
+            menu.with_separator
+            menu.with_checkbox_item(checked: true, disabled: true) { "Locked toggle" }
+          end
+        end
+
+        # Server-rendered open state (controllable-state: the attributes
+        # are the store; positionless open anchors to the trigger rect).
+        def open
+          render_component(open: true) do |menu|
+            menu.with_trigger(tag: :div, class: SURFACE_CLASSES) { "Surface" }
+            menu.with_label { "Row" }
+            menu.with_item { "Rename" }
+            menu.with_separator
+            menu.with_item(variant: :destructive) { "Delete" }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/context_menu/style.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module ContextMenu
+      # Re-expressed through the cn-* theme layer. The family deltas
+      # vs DropdownMenu now read off the theme rules (context-menu label
+      # adds text-foreground, the sub-trigger omits gap-2, the sub chevron
+      # is a bare ml-auto); the trigger SURFACE still ships no classes.
+      class Style < Poetry::Core::Style
+        element :content, "cn-context-menu-content cn-menu-translucent z-50 max-h-(--available-height) " \
+                          "origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none"
+
+        # group/context-menu-item: bare marker, no CSS - the vega theme's
+        # shortcut re-color (group-focus/context-menu-item) keys on it.
+        element :item, "cn-context-menu-item group/context-menu-item relative flex cursor-default " \
+                       "items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+                       "data-disabled:opacity-50 data-disabled:pointer-events-none"
+
+        element :checkbox_item, "cn-context-menu-checkbox-item relative flex cursor-default items-center " \
+                                "outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 " \
+                                "data-disabled:opacity-50 data-disabled:pointer-events-none"
+
+        element :radio_item, "cn-context-menu-radio-item relative flex cursor-default items-center outline-hidden " \
+                             "select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 data-disabled:opacity-50 " \
+                             "data-disabled:pointer-events-none"
+
+        element :label, "cn-context-menu-label"
+
+        element :separator, "cn-context-menu-separator"
+
+        element :shortcut, "cn-context-menu-shortcut"
+
+        element :sub_trigger, "cn-context-menu-sub-trigger flex cursor-default items-center " \
+                              "outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
+
+        element :sub_content, "cn-context-menu-sub-content z-50 " \
+                              "origin-(--transform-origin) overflow-hidden"
+
+        # Source-exact wrapper span (anonymous in the ported source; poetry names
+        # it context-menu-item-indicator - the self-identification rule).
+        element :item_indicator, "cn-context-menu-item-indicator pointer-events-none absolute " \
+                                 "flex items-center justify-center"
+
+        # POETRY ADDITION (family convention): the indicator stays in the
+        # DOM; the parent item's data-checked/data-unchecked pair drives
+        # visibility.
+        element :item_indicator_state, "[[data-unchecked]>&]:hidden"
+
+        # The source's inline lucide icon classes, named per part. DELTA:
+        # the context sub chevron is a bare ml-auto (the item's [&_svg]
+        # rules provide size-4).
+        element :indicator_check, "size-4"
+        element :indicator_circle, "size-2 fill-current"
+        element :sub_indicator, "ml-auto"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/data_table/component.html.erb

@@ -0,0 +1,78 @@
+<% surface = capture do %>
+  <%= content_tag(:div, **root_attributes.to_attributes) do %>
+    <% if filter %>
+      <div data-slot="data-table-toolbar" class="<%= css(:toolbar) %>">
+        <form method="get" action="<%= filter_form_action %>" role="search" aria-label="<%= filter_label %>" data-slot="data-table-filter">
+          <% state.filter_params.each do |name, value| %>
+            <input type="hidden" name="<%= name %>" value="<%= value %>">
+          <% end %>
+          <label for="<%= filter_id %>" class="sr-only"><%= filter_label %></label>
+          <%= render Poetry::Ui::Input::Component.new(id: filter_id, name: filter_name,
+                                                      value: state.q, placeholder: filter_placeholder,
+                                                      class: "max-w-sm") %>
+        </form>
+      </div>
+    <% end %>
+    <div class="<%= css(:container) %>">
+      <%= render Poetry::Ui::Table::Component.new(sticky_header: sticky_header, container_class: container_class,
+                                                  scroll_label: scroll_label.presence || caption) do %>
+        <% if caption.present? %>
+          <caption data-slot="table-caption" class="<%= Poetry::Ui::Table::Style.css(:caption, class: css(:caption)) %>"><%= caption %></caption>
+        <% end %>
+        <thead data-slot="table-header" class="<%= Poetry::Ui::Table::Style.css(:header) %>">
+          <tr data-slot="table-row" class="<%= Poetry::Ui::Table::Style.css(:row) %>">
+            <% if selectable? %>
+              <th data-slot="table-head" class="<%= Poetry::Ui::Table::Style.css(:head) %> <%= css(:select_cell) %>">
+                <%= tag.input(**Poetry::Core::HTML::Attributes.new(select_all_attributes).to_attributes) %>
+              </th>
+            <% end %>
+            <% column_defs.each do |column| %>
+              <%= content_tag(:th, head_attributes(column)) do %>
+                <% if column.sortable %>
+                  <%= render Poetry::Ui::Button::Component.new(**sort_link_options(column)) do |button| %>
+                    <% button.with_trailing { render Poetry::Ui::Icon::Component.new(name: sort_icon(column)) } %>
+                    <%= column.label %>
+                  <% end %>
+                <% else %>
+                  <%= column.label %>
+                <% end %>
+              <% end %>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody data-slot="table-body" class="<%= Poetry::Ui::Table::Style.css(:body) %>">
+          <% if rows.any? %>
+            <% rows.each do |row| %>
+              <tr data-slot="table-row" class="<%= Poetry::Ui::Table::Style.css(:row) %>">
+                <% if selectable? %>
+                  <td data-slot="table-cell" class="<%= Poetry::Ui::Table::Style.css(:cell) %> <%= css(:select_cell) %>">
+                    <%= tag.input(**Poetry::Core::HTML::Attributes.new(select_row_attributes(row)).to_attributes) %>
+                  </td>
+                <% end %>
+                <% column_defs.each do |column| %>
+                  <%= content_tag(:td, column.cell.call(row), cell_attributes(column)) %>
+                <% end %>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr data-slot="table-row" class="<%= Poetry::Ui::Table::Style.css(:row) %>">
+              <td data-slot="table-cell" colspan="<%= column_defs.size + (selectable? ? 1 : 0) %>"
+                  class="<%= Poetry::Ui::Table::Style.css(:cell) %> <%= css(:empty) %>"><%= empty_text %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      <% end %>
+    </div>
+    <% if pagination? %>
+      <div data-slot="data-table-footer" class="<%= css(:footer) %>">
+        <%= render Poetry::Ui::Pagination::Component.new(current: state.page, total: total,
+                                                          path: ->(page) { path_for(state.page_params(page)) }) %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
+<% if frame.present? %>
+  <turbo-frame id="<%= frame %>" data-turbo-action="advance"><%= surface %></turbo-frame>
+<% else %>
+  <%= surface %>
+<% end %>