lostcoords-ui 0.4.1

data/app/helpers/lostcoords/ui/form_helper.rb

@@ -0,0 +1,93 @@
+module Lostcoords::Ui
+  module FormHelper
+    SEGMENTED_BASE =
+      "inline-flex items-center gap-1 rounded-2xl bg-paper-2 p-1"
+
+    SEGMENTED_TAB_BASE =
+      "inline-flex items-center justify-center gap-1.5 whitespace-nowrap " \
+      "min-h-11 rounded-xl border-0 bg-transparent " \
+      "px-4 py-2 font-body text-sm font-medium cursor-pointer no-underline " \
+      "text-ink-2 hover:text-ink " \
+      "aria-selected:bg-paper aria-selected:text-ink " \
+      "aria-pressed:bg-paper aria-pressed:text-ink " \
+      "aria-[current]:not-aria-[current=false]:bg-paper aria-[current]:not-aria-[current=false]:text-ink " \
+      "transition-[background-color,color,box-shadow,transform] duration-[150ms] ease-out " \
+      "active:scale-[0.96] disabled:opacity-40 disabled:pointer-events-none " \
+      "[&_svg]:size-[1.1em] [&_svg]:shrink-0"
+
+    SEGMENTED_TAB_ACTIVE = "bg-paper text-ink hover:text-ink"
+
+    INPUT_BASE =
+      "w-full max-w-full min-w-0 " \
+      "px-3 " \
+      "font-body text-base bg-(--field-bg,var(--paper-2)) text-ink placeholder:text-ink-3 " \
+      "border border-transparent rounded-2xl outline-none " \
+      "transition-[border-color,box-shadow] duration-150 ease-out " \
+      "focus:shadow-(--focus-halo) " \
+      "aria-invalid:border-berry aria-invalid:shadow-[0_0_0_3px_color-mix(in_oklab,var(--berry)_16%,transparent)]"
+
+    FIELD_BASE = "ui-field grid min-w-0 gap-2 has-aria-invalid:[&>label]:text-berry"
+
+    FIELD_LABEL_BASE =
+      "block font-body text-sm font-semibold text-ink-3 " \
+      "transition-colors duration-[120ms] ease-out"
+
+    FORM_ACTIONS_BASE = "flex flex-wrap items-center justify-end gap-2"
+
+    # The toast's surface (shared/_toast), set in the flow: the tone lives in the icon, not the fill.
+    FORM_ALERT_BASE =
+      "flex items-start gap-2 mb-4 py-3 px-4 rounded-2xl bg-(--glass-hud-solid) text-(--glass-hud-ink) text-sm font-semibold " \
+      "motion-safe:animate-alert-in"
+
+    FORM_ALERT_ICONS = {
+      error: [ "exclamation-circle", "text-berry" ],
+      notice: [ "check-circle", "text-leaf" ]
+    }.freeze
+
+    def lc_segmented_class(extra: nil)
+      lc_tw(SEGMENTED_BASE, extra)
+    end
+
+    def lc_segmented_tab_class(active: false, extra: nil)
+      lc_tw(SEGMENTED_TAB_BASE, (SEGMENTED_TAB_ACTIVE if active), extra)
+    end
+
+    def lc_input_class(size: :base, extra: nil)
+      lc_tw(INPUT_BASE, TailwindHelper::CONTROL_SIZES.fetch(size.to_sym, TailwindHelper::CONTROL_SIZES[:base]), extra)
+    end
+
+    def lc_dropdown_trigger_class(size: :base, extra: nil)
+      lc_button_class(variant: :secondary, size: size, block: true,
+        extra: lc_tw("justify-start text-start ps-5 pe-4 gap-3 [&_.caret]:ms-auto [&_.caret]:shrink-0", extra))
+    end
+
+    def lc_select_class(size: :base, extra: nil)
+      lc_tw(lc_input_class(size: size), "select-control rounded-full ps-5 pe-11 cursor-pointer hover:bg-paper-3", extra)
+    end
+
+    def lc_textarea_class(extra: nil)
+      lc_tw(INPUT_BASE, "min-h-28 py-2.5 resize-y", extra)
+    end
+
+    def lc_field_class(extra: nil)
+      lc_tw(FIELD_BASE, extra)
+    end
+
+    def lc_field_label_class(extra: nil)
+      lc_tw(FIELD_LABEL_BASE, extra)
+    end
+
+    def lc_form_actions_class(extra: nil)
+      lc_tw(FORM_ACTIONS_BASE, extra)
+    end
+
+    def lc_form_alert_class(extra: nil)
+      lc_tw(FORM_ALERT_BASE, extra)
+    end
+
+    def lc_form_alert_icon(tone: :error)
+      name, color = FORM_ALERT_ICONS.fetch(tone.to_sym, FORM_ALERT_ICONS[:error])
+      lc_icon name, variant: :mini, options: { class: lc_tw("size-5 shrink-0", color), "aria-hidden": "true" }
+    end
+  end
+end

data/app/helpers/lostcoords/ui/glass_helper.rb

@@ -0,0 +1,25 @@
+module Lostcoords::Ui
+  module GlassHelper
+    # Menus lift further, and on phones go solid: they cover rows that look like their own
+    # options, and some open where nothing blurs (the dock). Dark lifts to paper-3 to clear cards.
+    GLASS_MENU = "[--glass-shadow:var(--glass-rim),var(--shadow-lg)] max-md:[--glass-fill:var(--paper)] dark:max-md:[--glass-fill:var(--paper-3)]"
+
+    GLASS_SHAPES = {
+      bar: "rounded-full border-(--glass-bar-edge)",
+      panel: "rounded-3xl",
+      disc: "rounded-full",
+      menu: "rounded-3xl #{GLASS_MENU}",
+      # A picker is a menu on desktop and a bottom sheet on phones, so its own CSS owns the corners.
+      picker: GLASS_MENU,
+      hud: "rounded-[1.375rem] border-transparent text-(--glass-hud-ink) [--glass-fill:var(--glass-hud-fill)] [--glass-shadow:var(--glass-hud-shadow)] [--glass-solid:var(--glass-hud-solid)]"
+    }.freeze
+
+    GLASS_THICK =
+      "max-md:[--glass-fill:color-mix(in_oklab,var(--paper)_90%,transparent)] " \
+      "dark:max-md:[--glass-fill:color-mix(in_oklab,var(--paper-2)_92%,transparent)]"
+
+    def lc_glass_class(shape: :bar, thick: false, extra: nil)
+      lc_tw("glass", GLASS_SHAPES.fetch(shape.to_sym, GLASS_SHAPES[:bar]), (GLASS_THICK if thick), extra)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/icon_helper.rb

@@ -0,0 +1,15 @@
+module Lostcoords::Ui
+  module IconHelper
+    def lc_icon(name, variant: :outline, options: {}, path_options: {})
+      svg = Icons.fetch(name, variant)
+      path_options.each do |key, value|
+        attribute = key.to_s.dasherize
+        svg.css("path").each { |path| path[attribute] = value.to_s if path.key?(attribute) }
+      end
+      defaults = svg.attribute_nodes.to_h { |attribute| [ attribute.name.to_sym, attribute.value ] }
+      defaults.merge!(xmlns: "http://www.w3.org/2000/svg", class: "lc-icon")
+      options = options.transform_keys { |key| key.to_s.dasherize.to_sym }
+      tag.svg(svg.children.to_xml.html_safe, **lc_attributes(defaults, options))
+    end
+  end
+end

data/app/helpers/lostcoords/ui/layout_helper.rb

@@ -0,0 +1,60 @@
+module Lostcoords::Ui
+  module LayoutHelper
+    LAYOUT_GAPS = {
+      tight: "gap-[var(--ui-space-tight,0.25rem)]",
+      related: "gap-[var(--ui-space-related,0.5rem)]",
+      heading: "gap-[var(--ui-space-heading,0.75rem)]",
+      content: "gap-[var(--ui-space-content,1rem)]",
+      inset: "gap-[var(--ui-space-inset,1.25rem)]",
+      section: "gap-[var(--ui-space-section,2rem)]"
+    }.freeze
+
+    CONTAINER_SIZES = {
+      page: "ui-container-page max-w-[var(--ui-page-max,75rem)]",
+      reading: "max-w-[var(--ui-reading-measure,65ch)]",
+      form: "max-w-[var(--ui-form-max,32rem)]"
+    }.freeze
+
+    def lc_stack_class(gap: :content, extra: nil)
+      gap = lc_option!(:gap, gap, LAYOUT_GAPS.keys)
+      lc_tw("flex min-w-0 flex-col", LAYOUT_GAPS.fetch(gap), extra)
+    end
+
+    def lc_inline_class(gap: :related, extra: nil)
+      gap = lc_option!(:gap, gap, LAYOUT_GAPS.keys)
+      lc_tw("flex min-w-0 flex-wrap items-center", LAYOUT_GAPS.fetch(gap), extra)
+    end
+
+    def lc_container_class(size: :page, extra: nil)
+      size = lc_option!(:size, size, CONTAINER_SIZES.keys)
+      lc_tw("mx-auto min-w-0 w-full", CONTAINER_SIZES.fetch(size), extra)
+    end
+
+    def lc_section_header_class(extra: nil)
+      lc_inline_class(extra: lc_tw("min-h-[var(--ui-section-header-height,2.75rem)] justify-between", extra))
+    end
+
+    def lc_stack(gap: :content, **attributes, &block)
+      tag.div(**lc_attributes({ class: lc_stack_class(gap: gap) }, attributes), &block)
+    end
+
+    def lc_inline(gap: :related, **attributes, &block)
+      tag.div(**lc_attributes({ class: lc_inline_class(gap: gap) }, attributes), &block)
+    end
+
+    def lc_container(size: :page, **attributes, &block)
+      tag.div(**lc_attributes({ class: lc_container_class(size: size) }, attributes), &block)
+    end
+
+    def lc_section(title:, level: 2, actions: nil, **attributes, &block)
+      raise ArgumentError, "title must not be blank" if title.blank?
+
+      tag.section(**lc_attributes({ class: lc_stack_class(gap: :heading) }, attributes)) do
+        heading = lc_heading(title, level: level, size: :section)
+        action_content = actions.respond_to?(:call) ? capture(&actions) : actions
+        header = tag.header(class: lc_section_header_class) { safe_join([ heading, action_content ].compact) }
+        safe_join([ header, lc_stack(&block) ])
+      end
+    end
+  end
+end

data/app/helpers/lostcoords/ui/menu_helper.rb

@@ -0,0 +1,41 @@
+module Lostcoords::Ui
+  module MenuHelper
+    # FloatingPanel sets [data-open]; the caller picks the display.
+    POPOVER_BASE =
+      "row-menu__popover squircle popover-shell hidden absolute top-[calc(100%+--spacing(1))] end-0 overscroll-contain [&_form]:m-0"
+
+    MENU_POPOVER_BASE =
+      "data-open:flex flex-col gap-0.5 z-nav-popover p-2 " \
+      "min-w-56 max-w-[calc(100vw-clamp(1rem,3vw,1.5rem)*2)] max-h-[min(24rem,70vh)] overflow-y-auto"
+
+    MENU_POPOVER_ALIGN = {
+      start: "start-0 end-auto",
+      end: "",
+      center: "start-1/2 end-auto -translate-x-1/2"
+    }.freeze
+
+    MENU_OPTION_BASE =
+      "row-menu__item press [--press-scale:0.98] group/option grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 w-full " \
+      "min-h-11 px-3 py-2 rounded-xl border-none bg-transparent text-start font-body text-[0.9375rem] font-medium text-ink " \
+      "no-underline cursor-pointer transition-[background-color] duration-120 [--avatar-size:--spacing(7)] " \
+      "hover:bg-paper-2 focus-visible:bg-paper-2 focus-visible:outline-none " \
+      "disabled:text-ink-3 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+
+    MENU_OPTION_TONES = {
+      default: "",
+      danger: "text-danger hover:bg-danger-soft focus-visible:bg-danger-soft"
+    }.freeze
+
+    def lc_popover_class(align: :end, extra: nil)
+      lc_glass_class(shape: :menu, extra: lc_tw(POPOVER_BASE, MENU_POPOVER_ALIGN.fetch(align), extra))
+    end
+
+    def lc_menu_popover_class(align: :end, extra: nil)
+      lc_popover_class(align: align, extra: lc_tw(MENU_POPOVER_BASE, extra))
+    end
+
+    def lc_menu_option_class(tone: :default, extra: nil)
+      lc_tw(MENU_OPTION_BASE, MENU_OPTION_TONES.fetch(tone), extra)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/primitives_helper.rb

@@ -0,0 +1,152 @@
+module Lostcoords::Ui
+  module PrimitivesHelper
+    BUTTON_STYLES = {
+      primary: :accent,
+      secondary: :secondary,
+      ghost: :ghost,
+      destructive: :danger
+    }.freeze
+
+    def lc_button(content = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+      tag.button(lc_button_content(content, icon, icon_position, &block), **lc_button_attributes(variant, size, { type: "button" }, attributes))
+    end
+
+    def lc_button_link_to(content = nil, url = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+      attributes = lc_button_attributes(variant, size, {}, attributes)
+      raise ArgumentError, "Links cannot be disabled; use lc_button for a disabled control" if attributes[:disabled]
+
+      if block
+        url ||= content
+        content = capture(&block)
+      end
+
+      link_to(lc_button_content(content, icon, icon_position), url, attributes)
+    end
+
+    def lc_button_to(content = nil, url = nil, variant: :primary, size: :base, icon: nil, icon_position: :start, **attributes, &block)
+      if block
+        url ||= content
+        content = capture(&block)
+      end
+
+      button_to(lc_button_content(content, icon, icon_position), url, lc_button_attributes(variant, size, {}, attributes))
+    end
+
+    def lc_icon_button(label, icon:, size: :base, shape: :circle, **attributes)
+      size = lc_option!(:size, size, ButtonHelper::ICON_BUTTON_SIZES.keys)
+      shape = lc_option!(:shape, shape, ButtonHelper::ICON_BUTTON_SHAPES.keys)
+      defaults = { type: "button", class: lc_icon_button_class(size: size, shape: shape), aria: { label: label } }
+      attributes = lc_attributes(defaults, attributes)
+      accessible_label = attributes.fetch(:"aria-label", attributes.dig(:aria, :label))
+      raise ArgumentError, "lc_icon_button requires a nonblank accessible label" if label.blank? || accessible_label.blank?
+
+      tag.button(**attributes) do
+        lc_icon(icon, options: { "aria-hidden": true })
+      end
+    end
+
+    def lc_badge(content = nil, tone: :neutral, **attributes, &block)
+      tone = lc_option!(:tone, tone, BadgeHelper::BADGE_TONES.keys)
+      tag.span(content, **lc_attributes({ class: lc_badge_class(tone: tone) }, attributes), &block)
+    end
+
+    def lc_status_pill(content = nil, tone: :accent, **attributes, &block)
+      tone = lc_option!(:tone, tone, BadgeHelper::STATUS_PILL_TONES.keys)
+      tag.span(content, **lc_attributes({ class: lc_status_pill_class(tone: tone) }, attributes), &block)
+    end
+
+    def lc_eyebrow(content = nil, **attributes, &block)
+      tag.span(content, **lc_attributes({ class: lc_eyebrow_class }, attributes), &block)
+    end
+
+    def lc_icon_badge(icon:, size: :base, **attributes)
+      size = lc_option!(:size, size, BadgeHelper::ICON_BADGE_SIZES.keys)
+      tag.span(**lc_attributes({ class: lc_icon_badge_class(size: size) }, attributes)) do
+        lc_icon(icon, options: { class: "size-[1em]", "aria-hidden": true })
+      end
+    end
+
+    def lc_medallion(icon:, size: :sm, tone: :accent, **attributes)
+      size = lc_option!(:size, size, BadgeHelper::ICON_MEDALLION_SIZES.keys)
+      tone = lc_option!(:tone, tone, BadgeHelper::ICON_MEDALLION_TONES.keys)
+      tag.span(**lc_attributes({ class: lc_icon_medallion_class(size: size, tone: tone) }, attributes)) do
+        lc_icon(icon, options: { class: "size-1/2", "aria-hidden": true })
+      end
+    end
+
+    def lc_avatar(content = nil, src: nil, alt: nil, size: :base, ink: false, linked: false, **attributes, &block)
+      size = lc_option!(:size, size, BadgeHelper::AVATAR_SIZES.keys)
+      defaults = { class: lc_avatar_class(size: size, ink: ink, linked: linked) }
+      if src
+        tag.img(**lc_attributes(defaults.merge(src: src, alt: alt.to_s, class: lc_tw(defaults[:class], "object-cover")), attributes))
+      else
+        tag.span(content, **lc_attributes(defaults, attributes), &block)
+      end
+    end
+
+    def lc_avatar_stack(compact: false, **attributes, &block)
+      tag.span(**lc_attributes({ class: lc_avatar_stack_class(compact: compact) }, attributes)) do
+        tag.span(class: lc_avatar_stack_row_class, &block)
+      end
+    end
+
+    def lc_card(href: nil, interactive: false, dense: false, **attributes, &block)
+      defaults = { class: lc_card_class(interactive: interactive || !href.nil?, dense: dense) }
+      if href.nil?
+        tag.div(**lc_attributes(defaults, attributes), &block)
+      else
+        defaults.merge!(href: href, class: lc_tw(defaults[:class], "block no-underline text-inherit"))
+        tag.a(**lc_attributes(defaults, attributes), &block)
+      end
+    end
+
+    def lc_card_surface(**attributes, &block)
+      tag.div(**lc_attributes({ class: lc_card_surface_class }, attributes), &block)
+    end
+
+    def lc_form_card(padding: :default, **attributes, &block)
+      padding = lc_option!(:padding, padding, CardHelper::FORM_CARD_PADDINGS.keys)
+      tag.div(**lc_attributes({ class: lc_form_card_class(padding: padding) }, attributes), &block)
+    end
+
+    def lc_empty_state(**attributes, &block)
+      tag.div(**lc_attributes({ class: lc_empty_state_class }, attributes), &block)
+    end
+
+    def lc_spinner(size: :base, label: "Loading…", **attributes)
+      size = lc_option!(:size, size, FeedbackHelper::SPINNER_SIZES.keys)
+      defaults = { class: lc_spinner_class(size: size), role: ("status" if label.present?), aria: { hidden: (true if label.blank?) } }
+      tag.span(**lc_attributes(defaults, attributes)) do
+        tag.span(label, class: "sr-only") if label.present?
+      end
+    end
+
+    def lc_skeleton(**attributes)
+      tag.span(**lc_attributes({ class: lc_tw(lc_skeleton_class, "h-4 w-full"), aria: { hidden: true } }, attributes))
+    end
+
+    def lc_form_alert(message, tone: :error, **attributes)
+      tone = lc_option!(:tone, tone, FormHelper::FORM_ALERT_ICONS.keys)
+      defaults = { class: lc_form_alert_class, role: (tone == :error ? "alert" : "status"), data: { tone: tone } }
+      tag.div(**lc_attributes(defaults, attributes)) do
+        safe_join([ lc_form_alert_icon(tone: tone), tag.p(message, class: "m-0 min-w-0 text-pretty [overflow-wrap:anywhere]") ])
+      end
+    end
+
+    private
+      def lc_button_content(content, icon, position, &block)
+        position = lc_option!(:icon_position, position, %i[start end])
+        content = capture(&block) if block
+        return content unless icon
+
+        glyph = lc_icon(icon, options: { "aria-hidden": true, "data-icon": "inline-#{position}" })
+        safe_join(position == :start ? [ glyph, content ] : [ content, glyph ])
+      end
+
+      def lc_button_attributes(variant, size, defaults, attributes)
+        variant = lc_option!(:variant, variant, BUTTON_STYLES.keys)
+        size = lc_option!(:size, size, %i[sm base lg])
+        lc_attributes(defaults.merge(class: lc_button_class(variant: BUTTON_STYLES.fetch(variant), size: size)), attributes)
+      end
+  end
+end

data/app/helpers/lostcoords/ui/reading_helper.rb

@@ -0,0 +1,15 @@
+module Lostcoords::Ui
+  module ReadingHelper
+    PROSE_BASE =
+      "prose ui-prose min-w-0 max-w-(--ui-reading-measure,65ch) " \
+      "text-(length:--ui-reading-size,1rem) leading-(--ui-reading-leading,1.75)"
+
+    def lc_prose_class(extra: nil)
+      lc_tw(PROSE_BASE, extra)
+    end
+
+    def lc_prose(**attributes, &block)
+      tag.div(**lc_attributes({ class: lc_prose_class }, attributes), &block)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/render_attributes_helper.rb

@@ -0,0 +1,46 @@
+module Lostcoords::Ui
+  module RenderAttributesHelper
+    private
+      def lc_attributes(defaults, attributes)
+        defaults = lc_normalize_attributes(defaults)
+        attributes = lc_normalize_attributes(attributes)
+        merged = defaults.merge(attributes)
+        merged[:class] = lc_tw(CGI.unescape_html(class_names(defaults[:class], attributes[:class]))) if defaults.key?(:class) || attributes.key?(:class)
+        %i[data aria].each do |key|
+          next unless defaults[key].is_a?(Hash) && attributes[key].is_a?(Hash)
+
+          merged[key] = defaults[key].merge(attributes[key])
+        end
+        %i[controller action].each do |key|
+          next unless defaults.dig(:data, key)
+
+          merged[:data] ||= {}
+          merged[:data][key] = [ defaults[:data][key], attributes.dig(:data, key) ].join(" ").split.uniq.join(" ")
+        end
+        merged
+      end
+
+      def lc_normalize_attributes(attributes)
+        normalized = attributes.deep_symbolize_keys
+        %i[data aria].each do |prefix|
+          values = normalized[prefix]
+          values = values.transform_keys { |key| key.to_s.tr("-", "_").to_sym } if values.is_a?(Hash)
+          normalized.keys.each do |key|
+            next unless key.to_s.start_with?("#{prefix}-")
+
+            values ||= {}
+            values[key.to_s.delete_prefix("#{prefix}-").tr("-", "_").to_sym] = normalized.delete(key)
+          end
+          normalized[prefix] = values if values
+        end
+        normalized
+      end
+
+      def lc_option!(name, value, allowed)
+        normalized = value.to_sym if value.is_a?(String) || value.is_a?(Symbol)
+        return normalized if allowed.include?(normalized)
+
+        raise ArgumentError, "Invalid #{name}: #{value.inspect}. Expected one of: #{allowed.map(&:inspect).join(', ')}"
+      end
+  end
+end

data/app/helpers/lostcoords/ui/sheet_helper.rb

@@ -0,0 +1,54 @@
+module Lostcoords::Ui
+  module SheetHelper
+    SHEET_ROW_BASE =
+      "grid grid-cols-[1.25rem_minmax(0,1fr)] @md:grid-cols-[8rem_minmax(0,1fr)] items-center " \
+      "gap-x-3 gap-y-2 min-h-14 px-4 py-2.5 bg-paper-2"
+
+    SHEET_ROW_LABEL_BASE =
+      "flex items-center gap-2 font-body text-sm font-semibold text-ink-3 " \
+      "[&_svg]:size-5 @md:[&_svg]:size-4.5 [&_svg]:shrink-0 @max-md:[&>span]:sr-only"
+
+    SHEET_CHIP_BASE = "max-w-full min-w-0 h-11 min-h-11 py-0 px-3.5 gap-2 text-sm bg-paper border-0 aria-pressed:font-semibold aria-[current]:not-aria-[current=false]:font-semibold"
+
+    SHEET_CHIP_ACTIVE = "bg-sky-soft font-semibold"
+
+    SHEET_MEMBER_CHIP = "ps-1.5 [&_.avatar]:shrink-0 [--avatar-size:28px]"
+
+    SHEET_DATETIME_INPUT_BASE =
+      "min-h-9 px-2 rounded-xl border-0 bg-transparent font-body text-base text-ink tabular-nums cursor-pointer " \
+      "outline-none [field-sizing:content] transition-colors hover:bg-paper focus-visible:bg-paper " \
+      "[&::-webkit-calendar-picker-indicator]:hidden"
+
+    SHEET_TEXT_INPUT_BASE =
+      "w-full min-w-0 min-h-9 p-0 border-0 bg-transparent font-body text-base text-ink placeholder:text-ink-3 aria-invalid:placeholder:text-berry/70 outline-none"
+
+    # Makes a <dialog> an iOS sheet on phones (sheet_controller), keeping the dialog's own
+    # controllers. detents: "fit", "medium large" or "large".
+    def lc_sheet_data(data = {}, detents: "fit")
+      data.merge(
+        controller: [ data[:controller], "sheet" ].compact.join(" "),
+        sheet_detents_value: detents
+      )
+    end
+
+    def lc_sheet_row_class(extra: nil)
+      lc_tw(SHEET_ROW_BASE, extra)
+    end
+
+    def lc_sheet_row_label_class(extra: nil)
+      lc_tw(SHEET_ROW_LABEL_BASE, extra)
+    end
+
+    def lc_sheet_chip_class(active: false, member: false, extra: nil)
+      lc_pill_class(size: :sm, active: active, extra: lc_tw(SHEET_CHIP_BASE, (SHEET_CHIP_ACTIVE if active), (SHEET_MEMBER_CHIP if member), extra))
+    end
+
+    def lc_sheet_datetime_input_class(extra: nil)
+      lc_tw(SHEET_DATETIME_INPUT_BASE, extra)
+    end
+
+    def lc_sheet_text_input_class(extra: nil)
+      lc_tw(SHEET_TEXT_INPUT_BASE, extra)
+    end
+  end
+end

data/app/helpers/lostcoords/ui/structures_helper.rb

@@ -0,0 +1,159 @@
+module Lostcoords::Ui
+  module StructuresHelper
+    INPUT_TYPES = %i[text search email password tel url number date time datetime-local month week].freeze
+    SHEET_DETENTS = [ "fit", "medium large", "large" ].freeze
+
+    def lc_input(name: nil, value: nil, type: :text, size: :base, **attributes)
+      type = lc_option!(:type, type, INPUT_TYPES)
+      size = lc_option!(:size, size, TailwindHelper::CONTROL_SIZES.keys)
+      tag.input(**lc_attributes({ type: type, name: name, value: value, class: lc_input_class(size: size) }, attributes))
+    end
+
+    def lc_textarea(content = nil, name: nil, **attributes, &block)
+      tag.textarea(block ? capture(&block) : content, **lc_attributes({ name: name, class: lc_textarea_class }, attributes))
+    end
+
+    def lc_select(options = nil, name: nil, selected: nil, size: :base, **attributes, &block)
+      size = lc_option!(:size, size, TailwindHelper::CONTROL_SIZES.keys)
+      content = block ? capture(&block) : options_for_select(options || [], selected)
+      tag.select(content, **lc_attributes({ name: name, class: lc_select_class(size: size) }, attributes))
+    end
+
+    def lc_field(label:, id:, hint: nil, error: nil, **attributes, &block)
+      lc_label!(label, :label)
+      lc_label!(id, :id)
+      descriptions = [ ("#{id}-hint" if hint.present?), ("#{id}-error" if error.present?) ].compact
+      control = { id: id, aria: { describedby: descriptions.presence&.join(" "), invalid: (true if error.present?) } }
+      tag.div(**lc_attributes({ class: lc_field_class }, attributes)) do
+        safe_join([
+          tag.label(label, for: id, class: lc_field_label_class),
+          (capture(control, &block) if block),
+          (tag.p(hint, id: "#{id}-hint", class: "text-sm text-ink-3") if hint.present?),
+          (tag.p(error, id: "#{id}-error", class: "text-sm text-berry", role: "alert") if error.present?)
+        ].compact)
+      end
+    end
+
+    def lc_form_actions(**attributes, &block)
+      tag.div(**lc_attributes({ class: lc_form_actions_class }, attributes), &block)
+    end
+
+    def lc_segmented(label:, name: nil, value: nil, **attributes, &block)
+      lc_label!(label, :label)
+      defaults = { class: lc_segmented_class, role: "group", aria: { label: label }, data: { controller: "ui-selection", action: "click->ui-selection#select keydown->ui-selection#navigate", ui_selection_value_value: value } }
+      tag.div(**lc_attributes(lc_attributes(defaults, attributes), { role: "group", aria: { label: label } })) do
+        safe_join([ (hidden_field_tag(name, value, data: { ui_selection_target: "input" }) if name), (capture(&block) if block) ].compact)
+      end
+    end
+
+    def lc_segmented_tab(label = nil, value: nil, selected: false, **attributes, &block)
+      value ||= label
+      lc_label!(value, :value)
+      defaults = { class: lc_segmented_tab_class, type: "button", aria: { pressed: selected }, data: { ui_selection_target: "option", value: value } }
+      required = { type: "button", data: { ui_selection_target: "option", value: value } }
+      tag.button(block ? capture(&block) : label, **lc_attributes(lc_attributes(defaults, attributes), required))
+    end
+
+    def lc_pill(label = nil, active: false, ghost: false, size: :base, href: nil, **attributes, &block)
+      size = lc_option!(:size, size, %i[sm base lg])
+      content = block ? capture(&block) : label
+      defaults = { class: lc_pill_class(ghost: ghost, size: size) }
+      if href
+        raise ArgumentError, "Links cannot be disabled; use a pill button instead" if attributes[:disabled] || attributes["disabled"]
+
+        tag.a(content, **lc_attributes(defaults.merge(href: href, aria: { current: ("page" if active) }), attributes))
+      else
+        defaults.merge!(type: "button", aria: { pressed: active }, data: { controller: "ui-toggle", action: "click->ui-toggle#toggle" })
+        tag.button(content, **lc_attributes(defaults, attributes).merge(type: "button"))
+      end
+    end
+
+    def lc_pill_row(**attributes, &block)
+      tag.div(**lc_attributes({ class: lc_pill_row_class }, attributes), &block)
+    end
+
+    def lc_dialog(id:, title:, trigger: "Open dialog", kind: :modal, **attributes, &block)
+      kind = lc_option!(:kind, kind, DialogHelper::DIALOGS.keys)
+      lc_render_dialog(id, title, trigger, { class: lc_dialog_class(kind), data: lc_sheet_data }, attributes, &block)
+    end
+
+    def lc_sheet(id:, title:, trigger: "Open sheet", detents: "fit", **attributes, &block)
+      detents = detents.to_s
+      raise ArgumentError, "detents must be one of #{SHEET_DETENTS.join(', ')}" unless SHEET_DETENTS.include?(detents)
+
+      defaults = { class: lc_dialog_class, data: lc_sheet_data({}, detents: detents) }
+      lc_render_dialog(id, title, trigger, defaults, attributes, &block)
+    end
+
+    def lc_menu(id:, label: "Actions", align: :end, **attributes, &block)
+      align = lc_option!(:align, align, MenuHelper::MENU_POPOVER_ALIGN.keys)
+      lc_render_panel(id, label, nil, "row-menu", "menu", lc_menu_popover_class(align: align), attributes, &block)
+    end
+
+    def lc_popover(id:, label: "Open popover", title: nil, align: :end, **attributes, &block)
+      title = title.presence
+      align = lc_option!(:align, align, MenuHelper::MENU_POPOVER_ALIGN.keys)
+      classes = lc_popover_class(align: align, extra: "data-open:flex flex-col gap-4 p-5 z-nav-popover min-w-64 max-w-[calc(100vw-2rem)]")
+      lc_render_panel(id, label, title, "ui-popover", "dialog", classes, attributes, &block)
+    end
+
+    def lc_menu_option(label = nil, href: nil, tone: :default, **attributes, &block)
+      tone = lc_option!(:tone, tone, MenuHelper::MENU_OPTION_TONES.keys)
+      content = tag.span(block ? capture(&block) : label, class: "col-span-3")
+      defaults = { class: lc_menu_option_class(tone: tone), role: "menuitem", data: { action: "click->row-menu#close" } }
+      if href
+        raise ArgumentError, "Links cannot be disabled; use a menu button instead" if attributes[:disabled] || attributes["disabled"]
+
+        tag.a(content, **lc_attributes(defaults.merge(href: href), attributes))
+      else
+        tag.button(content, **lc_attributes(defaults.merge(type: "button"), attributes))
+      end
+    end
+
+    def lc_toast(message = nil, tone: :notice, timeout: 4000, **attributes, &block)
+      tone = lc_option!(:tone, tone, FormHelper::FORM_ALERT_ICONS.keys)
+      raise ArgumentError, "timeout must be a nonnegative integer" unless timeout.is_a?(Integer) && timeout >= 0
+
+      defaults = { class: lc_glass_class(shape: :hud, extra: "flex items-center gap-2 px-4 py-3 text-sm font-semibold transition-opacity data-leaving:opacity-0"), role: tone == :error ? "alert" : "status", data: { controller: "toast", action: "click->toast#dismiss", toast_timeout_value: timeout } }
+      tag.div(**lc_attributes(defaults, attributes)) do
+        safe_join([ lc_form_alert_icon(tone: tone), tag.span(block ? capture(&block) : message) ])
+      end
+    end
+
+    def lc_disclosure(title:, open: false, **attributes, &block)
+      lc_label!(title, :title)
+      defaults = { class: lc_card_class(extra: "disclosure-animated"), open: open, data: { controller: "disclosure", action: "click->disclosure#toggle" } }
+      render "lostcoords/ui/components/lc_disclosure", title: title, attributes: lc_attributes(defaults, attributes), content: (capture(&block) if block)
+    end
+
+    def lc_emoji_picker(form:, field:, label:, catalog_url:, value: nil, quick: [], recent: [], recent_scope: nil, auto_submit: false, **attributes)
+      lc_label!(label, :label)
+      lc_label!(catalog_url, :catalog_url)
+      render "lostcoords/ui/components/emoji_picker", form: form, field: field, label: label, catalog_url: catalog_url, value: value, quick: quick, recent: recent, recent_scope: recent_scope, auto_submit: auto_submit, attributes: attributes
+    end
+
+    private
+
+    def lc_label!(value, name)
+      raise ArgumentError, "#{name} must not be blank" if value.blank?
+    end
+
+    def lc_render_dialog(id, title, trigger, defaults, attributes, &block)
+      lc_label!(id, :id)
+      lc_label!(title, :title)
+      lc_label!(trigger, :trigger)
+      required = { id: id, aria: { labelledby: "#{id}-title" }, data: (defaults[:data] || {}).merge(modal_target: "dialog") }
+      merged = lc_attributes(lc_attributes(defaults, attributes), required)
+      render "lostcoords/ui/components/lc_dialog", id: id, title: title, trigger: trigger, attributes: merged, content: (capture(&block) if block)
+    end
+
+    def lc_render_panel(id, label, title, controller, role, classes, attributes, &block)
+      lc_label!(id, :id)
+      lc_label!(label, :label)
+      required = { id: id, role: role, aria: { labelledby: "#{id}-#{title ? 'title' : 'trigger'}" }, data: { "#{controller}_target" => "popover" } }
+      required[:tabindex] = -1 if role == "dialog"
+      merged = lc_attributes(lc_attributes({ class: classes }, attributes), required)
+      render "lostcoords/ui/components/ui_floating_panel", id: id, label: label, title: title, controller: controller, role: role, attributes: merged, content: (capture(&block) if block)
+    end
+  end
+end