poetry-ui 0.0.2

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

@@ -0,0 +1,164 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Combobox
+      # The Combobox preview matrix: the ported combobox-demo composition
+      # (framework picker), placeholder vs valued, grouped options, the
+      # server-rendered open state, disabled trigger/options, the
+      # filter:false server mode, RTL, and the width knob.
+      class Preview < Poetry::Core::Preview::Base
+        FRAMEWORKS = [%w[next.js Next.js], %w[sveltekit SvelteKit], %w[nuxt.js Nuxt.js],
+                      %w[remix Remix], %w[astro Astro]].freeze
+
+        # The combobox-demo port: click (or type on) the trigger to open a
+        # typing session; the filter narrows, Enter commits to the hidden
+        # native select, Esc/Tab leave the value untouched.
+        def default
+          render_component(name: "framework", placeholder: "Select framework...",
+                           search_placeholder: "Search framework...", "aria-label": "Framework") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # The server-rendered value: display label + native option selected
+        # + the aria-selected/data-selected twin + the visible check indicator,
+        # all in one pass.
+        def valued
+          render_component(name: "framework", value: "sveltekit", placeholder: "Select framework...",
+                           search_placeholder: "Search framework...", "aria-label": "Framework") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # show_clear (the source's showClear): the trigger-side deselection X
+        # swaps in over the chevrons while a value is committed - the
+        # golden pins the swap (X visible, chevron box kept but invisible).
+        def clear
+          render_component(name: "framework", value: "next.js", show_clear: true,
+                           placeholder: "Select framework...", search_placeholder: "Search framework...",
+                           "aria-label": "Framework") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # Groups keep Command's heading anatomy; the filter hides a group
+        # when all its options hide.
+        def grouped
+          render_component(name: "stack", placeholder: "Select a tool...",
+                           search_placeholder: "Search tools...", "aria-label": "Tool") do |combobox|
+            combobox.with_group(heading: "Frameworks") do |group|
+              group.with_item(value: "rails") { "Ruby on Rails" }
+              group.with_item(value: "hanami") { "Hanami" }
+            end
+            combobox.with_separator
+            combobox.with_group(heading: "Test runners") do |group|
+              group.with_item(value: "minitest") { "Minitest" }
+              group.with_item(value: "rspec") { "RSpec" }
+            end
+          end
+        end
+
+        # Server-rendered open state (controllable-state: the attributes
+        # are the store; the controller reconciles on connect). Type a
+        # non-matching query ("zzz") for the zero-match state: every option
+        # hides, the empty part shows, the popup STAYS OPEN.
+        def open
+          render_component(name: "framework", open: true, value: "remix",
+                           placeholder: "Select framework...", search_placeholder: "Search framework...",
+                           "aria-label": "Framework") do |combobox|
+            combobox.with_empty { "No framework found." }
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # Disables the trigger AND the native select together.
+        def disabled
+          render_component(name: "framework", disabled: true, placeholder: "Select framework...",
+                           "aria-label": "Framework") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # Disabled options: skipped by arrows and the filter re-seat;
+        # commit is unreachable (the engine's collection filter).
+        def disabled_options
+          render_component(name: "plan", placeholder: "Select a plan...",
+                           "aria-label": "Plan") do |combobox|
+            combobox.with_item(value: "hobby") { "Hobby" }
+            combobox.with_item(value: "pro") { "Pro" }
+            combobox.with_item(value: "enterprise", disabled: true) { "Enterprise (contact sales)" }
+          end
+        end
+
+        # filter: false - the SERVER-DRIVEN mode: typing never hides
+        # options client-side; the host re-renders the list (the Turbo
+        # frame ?q= recipe) and the frame response must render the twin
+        # native <option> for every committable item (the recipe's one
+        # hard rule).
+        def server_mode
+          render_component(name: "author_id", filter: false, placeholder: "Search authors...",
+                           search_placeholder: "Type to search...", "aria-label": "Author") do |combobox|
+            combobox.with_item(value: "1") { "Ada Lovelace" }
+            combobox.with_item(value: "2") { "Grace Hopper" }
+            combobox.with_item(value: "3") { "Annie Easley" }
+          end
+        end
+
+        # dir=rtl: the indicator's ms-auto keeps the check on the reading-
+        # order end (the logical-property fix over the demo's ml-auto);
+        # popper alignment flips via the direction helper.
+        def rtl
+          render_component(name: "language", dir: :rtl, value: "ar", "aria-label": "اللغة") do |combobox|
+            combobox.with_item(value: "ar") { "العربية" }
+            combobox.with_item(value: "he") { "עברית" }
+          end
+        end
+
+        # The width knob: one utility on the trigger; the popup ALWAYS
+        # tracks it via the anchor-width binding.
+        def wide
+          render_component(name: "timezone", width: "w-80", placeholder: "Select a timezone...",
+                           search_placeholder: "Search timezones...", "aria-label": "Timezone") do |combobox|
+            combobox.with_item(value: "est") { "Eastern Standard Time (EST)" }
+            combobox.with_item(value: "cet") { "Central European Time (CET)" }
+            combobox.with_item(value: "jst") { "Japan Standard Time (JST)" }
+          end
+        end
+
+        # ## Multiple
+
+        # multiple: true - the chips FIELD replaces the trigger (the source's
+        # input-inside layout): value: takes an array, one chip per
+        # committed value in value order, the filter input rides inline,
+        # selection TOGGLES with the popup staying open, and the native
+        # <select multiple> posts frameworks[].
+        def multiple
+          render_component(name: "frameworks", multiple: true, value: %w[sveltekit remix],
+                           placeholder: "Select frameworks...", "aria-label": "Frameworks") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # Empty selection: no toolbar role, data-placeholder on the frame,
+        # the placeholder text riding the inline input.
+        def multiple_empty
+          render_component(name: "frameworks", multiple: true,
+                           placeholder: "Select frameworks...", "aria-label": "Frameworks") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+
+        # Disabled: the frame dims (data-disabled), chips carry
+        # data-disabled (focus is blocked entirely), the input and native
+        # select disable together.
+        def multiple_disabled
+          render_component(name: "frameworks", multiple: true, disabled: true, value: %w[astro],
+                           placeholder: "Select frameworks...", "aria-label": "Frameworks") do |combobox|
+            FRAMEWORKS.each { |value, label| combobox.with_item(value: value) { label } }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Combobox
+      # Re-expressed through the cn-* theme layer. The embedded
+      # Command parts still reuse Command::Style verbatim; the popup's
+      # list and label are the combobox's own hooks. The input fills its
+      # well (h-full, mechanics) rather than carrying the classic demo's
+      # h-9 - every theme's well sizes it. The themed demo width still
+      # loses to the width: knob (caller utilities beat the base layer).
+      class Style < Poetry::Core::Style
+        # The demo trigger IS Button's reference shape with the demo deltas
+        # (justify-between, font-normal, the w-50 demo width) - all riding
+        # .cn-combobox-trigger now.
+        element :trigger, "cn-combobox-trigger inline-flex shrink-0 items-center justify-between " \
+                          "whitespace-nowrap transition-all outline-none " \
+                          "disabled:pointer-events-none disabled:opacity-50 " \
+                          "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+
+        # The value DISPLAY truncates inside the fixed-width trigger.
+        element :value, "truncate"
+        # The width option's default - lives in the dictionary so the
+        # safelist ships it and verify_compiled gates it (a bare Ruby
+        # default string compiles in no host).
+        element :default_width, "w-50"
+
+        # The leading group (with_trigger only): a custom icon is a PREFIX
+        # to the value, not a third justify-between child - grouped, the
+        # chevrons stay the row's other end. min-w-0 keeps the value's
+        # truncate working inside the flex group.
+        element :trigger_leading, "flex min-w-0 items-center gap-2"
+
+        # The popup: Popover's chrome retuned per the demo (p-0 - the
+        # Command brings its own padding); the anchor-width binding stays
+        # inline (popper measures the anchor and sets the generic var).
+        # The column chain (flex-col + the popper's available-height cap,
+        # the source's structural pair) lets the LIST shrink under
+        # whatever cap the popup ends up with - the theme's design cap or
+        # the viewport - instead of every theme subtracting the embedded
+        # command's own padding; the list's themed max-height holds the
+        # design height.
+        element :content, "cn-combobox-content cn-menu-translucent z-50 flex w-(--anchor-width) " \
+                          "max-h-(--available-height) origin-(--transform-origin) flex-col outline-hidden " \
+                          "data-[chips=true]:min-w-(--anchor-width) group/combobox-content " \
+                          "max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] relative"
+
+        # THE listbox, the popup's scroll owner: the source's combobox
+        # list, where the option inset rides the LIST and groups stay
+        # unpadded - an ungrouped option sits exactly where a grouped one
+        # does, and the first row clears the search field in every theme.
+        # (Command's list leaves the inset to its groups, the palette
+        # convention; a combobox's options are usually ungrouped.)
+        element :list, "cn-combobox-list overflow-x-hidden overflow-y-auto overscroll-contain"
+
+        # A group: role=group around a label and its options. No hook and
+        # no utilities ON PURPOSE - neither source styles the combobox
+        # group (the label and the list carry the geometry); themes reach
+        # it as [data-slot=command-group] inside the popup.
+        element :group, ""
+
+        # The group's label (the heading part): the source's combobox
+        # label rule, themed per style.
+        element :label, "cn-combobox-label"
+
+        # The filter input fills its well: h-full is mechanics (the well's
+        # height is the theme's - h-9 in default, the h-7/h-8 pill in the
+        # ports), so the input keeps covering the whole field for pointer
+        # focus without carrying a theme value. In default this lands where
+        # the classic demo's h-9 retune did; the ports' source sizes the
+        # input by its group the same way.
+        element :input_fill, "h-full"
+
+        # The source's option fills its list row (Command's item leaves width
+        # to the palette; the combobox row is the source's w-full).
+        element :item_fill, "w-full"
+
+        # POETRY ADDITION (Command's precedent): the label wrapper is
+        # layout-transparent - it mirrors the item's own row (preflight
+        # blockifies svg, so a bare span would stack an icon above its text).
+        element :item_text, "flex min-w-0 items-center gap-2"
+
+        # The committed-value check: TRAILING ms-auto per the demo (not
+        # Select's absolute right-2 gutter) - the family RTL fix.
+        element :item_indicator, "cn-combobox-item-indicator ms-auto flex items-center justify-center"
+
+        # POETRY ADDITION (Select's precedent): server-rendered always; the
+        # parent item's bare data-selected drives visibility.
+        element :item_indicator_state, "[:not([data-selected])>&]:hidden"
+
+        # The form bubble: visually hidden but PAINTED (sr-only clips,
+        # never display:none - autofill heuristics skip unpainted controls).
+        element :native, "sr-only"
+
+        # The chips FIELD frame (multiple: - replaces the trigger): the
+        # flex-wrap mechanism stays inline; the input-frame chrome (border,
+        # ring, paddings, min-height, the chips-present padding tighten)
+        # rides themes/*.css. The disabled plumbing mirrors the trigger's.
+        element :chips, "cn-combobox-chips flex flex-wrap items-center " \
+                        "data-disabled:pointer-events-none data-disabled:opacity-50"
+
+        # One chip: real-focus surface (:focus-visible ring is theme-side).
+        element :chip, "cn-combobox-chip flex shrink-0 items-center outline-none " \
+                       "has-disabled:cursor-not-allowed has-disabled:opacity-50 " \
+                       "has-disabled:pointer-events-none"
+
+        # ChipRemove: the ghost icon-button mechanism; the dim/hover/size
+        # treatment is theme-side.
+        element :chip_remove, "cn-combobox-chip-remove inline-flex shrink-0 items-center " \
+                              "justify-center outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
+
+        # The inline filter input: bare (the FRAME is the visual field) -
+        # min-width and placeholder color are theme-side.
+        element :chip_input, "cn-combobox-chip-input flex-1 bg-transparent outline-none min-w-16"
+
+        # The show_clear: positioning wrapper - shrink-wraps the trigger so
+        # the absolute X seats against the TRIGGER's edge, not the
+        # full-width root (the root is a block; end-2 against it lands at
+        # the page edge). Rendered ONLY when show_clear - every other
+        # instance keeps its wrapper-free markup.
+        element :clear_anchor, "relative inline-flex"
+
+        # The show_clear: X: a trigger SIBLING
+        # (button-in-button is invalid) absolutely seated over the chevron
+        # slot (px-3 gutter + size-4 icon -> a size-6 hitbox at end-2
+        # centers on it). Structural-only chrome, like the chevron itself.
+        element :clear, "absolute end-2 top-1/2 flex size-6 -translate-y-1/2 items-center " \
+                        "justify-center rounded-sm opacity-50 outline-none transition-opacity " \
+                        "hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-[3px] " \
+                        "focus-visible:ring-ring/50 disabled:pointer-events-none"
+        element :clear_icon, "size-4"
+
+        # The chevron half of the clear swap: while the sibling X is
+        # showable (not [hidden]), the chevron goes INVISIBLE - visibility,
+        # never display, so it keeps its flex box and the value text never
+        # slides under the absolute X (the item_indicator_state pattern).
+        element :trigger_icon_swap,
+                "[[data-slot=combobox-trigger]:has(+[data-slot=combobox-clear]:not([hidden]))_&]:invisible"
+
+        # The source's inline lucide icon classes, named per part. The
+        # double chevron is the combobox tell (Select wears chevron-down).
+        element :trigger_icon, "size-4 opacity-50"
+        element :indicator_check, "size-4"
+        element :chip_remove_icon, "size-3"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%# The item union renders FIRST (into a capture) so the shared ItemSet
+    has assigned every server-stable option id - and decided the initial
+    highlight - before the input derives aria-activedescendant from it
+    (the Select capture pattern, activedescendant-flavored). %>
+<% list_body = capture do %>
+  <% items.each do |item| %><%= item %><% end %>
+<% end %>
+<%= content_tag(:div, **root_attributes.to_attributes) do %>
+  <div data-slot="command-input-wrapper" class="<%= css(:input_wrapper) %>">
+    <span data-slot="command-search-icon"><%= render(Poetry::Ui::Icon::Component.new(name: :search, class: css(:search_icon))) %></span>
+    <%= tag.input(**Poetry::Core::HTML::Attributes.new(input_attributes).to_attributes) %>
+    <%= input_trailing_html %>
+  </div>
+  <%= content_tag(:div, **Poetry::Core::HTML::Attributes.new(list_attributes).to_attributes) do %>
+    <%= empty_part %>
+    <%= loading_part %>
+    <%= list_body %>
+  <% end %>
+  <%= status_part %>
+<% end %>