view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/carousel/carousel_component.rb.tt

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module UI
+  class CarouselComponent < ApplicationComponent
+    # Scrollable carousel with prev/next controls and optional dot indicators.
+    #
+    # Usage:
+    #   ui :carousel do |c|
+    #     c.with_slide { image_tag "slide1.jpg" }
+    #     c.with_slide { image_tag "slide2.jpg" }
+    #   end
+
+    TRACK_CLS   = "flex"
+    SLIDE_CLS   = "min-w-full shrink-0"
+
+    BTN_BASE    = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-9 items-center justify-center " \
+                  "rounded-full bg-background/80 backdrop-blur border border-border shadow-sm " \
+                  "transition hover:bg-background disabled:opacity-40 " \
+                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none"
+    BTN_PREV    = "left-2"
+    BTN_NEXT    = "right-2"
+
+    DOTS_CLS    = "mt-3 flex justify-center gap-1.5"
+    DOT_CLS     = "size-2 rounded-full bg-muted-foreground/40 transition " \
+                  "data-[active=true]:bg-primary data-[active=true]:w-4"
+
+    CHEVRON_L   = "m15 18-6-6 6-6"
+    CHEVRON_R   = "m9 18 6-6-6-6"
+
+    renders_many :slides
+
+    # loop:        wrap around at the ends (default: true)
+    # indicators:  show dot indicators (default: true)
+    # autoplay:    interval in ms, 0 to disable (default: 0)
+    def initialize(loop: true, indicators: true, autoplay: 0, **html_attrs)
+      @loop        = loop
+      @indicators  = indicators
+      @autoplay    = autoplay.to_i
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("relative overflow-hidden", @extra_class),
+        data: {
+          controller: "carousel",
+          carousel_loop_value: @loop,
+          carousel_autoplay_value: @autoplay
+        },
+        **@html_attrs) do
+        concat track
+        concat prev_btn
+        concat next_btn
+        concat dots if @indicators && slides.size > 1
+      end
+    end
+
+    private
+
+    def track
+      content_tag(:div, class: TRACK_CLS, data: { carousel_target: "track" }) do
+        safe_join(slides.map { |s| content_tag(:div, s, class: SLIDE_CLS) })
+      end
+    end
+
+    def prev_btn
+      content_tag(:button, type: "button",
+        class: cn(BTN_BASE, BTN_PREV),
+        "aria-label": "Previous slide",
+        data: { action: "click->carousel#prev" }) { chevron(CHEVRON_L) }
+    end
+
+    def next_btn
+      content_tag(:button, type: "button",
+        class: cn(BTN_BASE, BTN_NEXT),
+        "aria-label": "Next slide",
+        data: { action: "click->carousel#next" }) { chevron(CHEVRON_R) }
+    end
+
+    def dots
+      content_tag(:div, class: DOTS_CLS, data: { carousel_target: "dots" }) do
+        safe_join(slides.each_with_index.map { |_, i|
+          content_tag(:button, nil,
+            type: "button",
+            class: DOT_CLS,
+            "aria-label": "Go to slide #{i + 1}",
+            "data-active": i.zero?.to_s,
+            data: { action: "click->carousel#goTo", carousel_index_param: i })
+        })
+      end
+    end
+
+    def chevron(path)
+      content_tag(:svg,
+        content_tag(:path, nil, d: path, "stroke-linecap": "round", "stroke-linejoin": "round"),
+        xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        class: "size-4", "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/carousel/carousel_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "dots"]
+  static values = { loop: { type: Boolean, default: true }, autoplay: { type: Number, default: 0 } }
+
+  connect() {
+    this._index = 0
+    this._count = this.trackTarget.children.length
+    if (this.autoplayValue > 0) {
+      this._timer = setInterval(() => this.next(), this.autoplayValue)
+    }
+  }
+
+  disconnect() {
+    clearInterval(this._timer)
+  }
+
+  next() {
+    this._go(this._index + 1)
+  }
+
+  prev() {
+    this._go(this._index - 1)
+  }
+
+  goTo({ params: { index } }) {
+    this._go(index)
+  }
+
+  _go(index) {
+    if (this.loopValue) {
+      index = ((index % this._count) + this._count) % this._count
+    } else {
+      index = Math.max(0, Math.min(index, this._count - 1))
+    }
+    this._index = index
+    this.trackTarget.style.transform = `translateX(-${index * 100}%)`
+    this._updateDots()
+  }
+
+  _updateDots() {
+    if (!this.hasDotsTarget) return
+    Array.from(this.dotsTarget.children).forEach((dot, i) => {
+      dot.dataset.active = String(i === this._index)
+    })
+  }
+}

data/lib/generators/view_primitives/add/templates/chart/chart_component.rb.tt

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module UI
+  class ChartComponent < ApplicationComponent
+    # Chart wrapper — renders a <canvas> wired to chart_controller.js.
+    # chart_controller.js is an adapter for Chart.js; the library itself is
+    # NOT bundled — add it to your importmap before use:
+    #
+    #   # config/importmap.rb
+    #   pin "chart.js", to: "https://esm.sh/chart.js@4"
+    #
+    # Usage:
+    #   ui :chart, type: :bar, labels: ["Jan", "Feb", "Mar"],
+    #     datasets: [
+    #       { label: "Revenue", data: [100, 200, 150] },
+    #       { label: "Costs",   data: [80,  140, 110], background_color: "#ef4444" }
+    #     ]
+    #
+    # Options:
+    #   type:     :bar | :line | :pie | :doughnut | :radar | :polarArea (default: :bar)
+    #   labels:   array of x-axis labels
+    #   datasets: array of dataset hashes; snake_case keys are camelized for Chart.js
+    #             (e.g. background_color: → backgroundColor:)
+    #   options:  hash merged into Chart.js `options` (e.g. { responsive: false })
+
+    TYPES = %w[bar line pie doughnut radar polarArea].freeze
+
+    WRAPPER_CLS = "relative"
+
+    def initialize(type: :bar, labels: [], datasets: [], options: {}, **html_attrs)
+      @type = TYPES.include?(type.to_s) ? type.to_s : "bar"
+      @labels = labels
+      @datasets = datasets
+      @chart_options = options
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn(WRAPPER_CLS, @extra_class)) do
+        tag.canvas(
+          data: {
+            controller: "chart",
+            chart_type_value: @type,
+            chart_config_value: config_json
+          },
+          **@html_attrs
+        )
+      end
+    end
+
+    private
+
+    def config_json
+      ds = @datasets.map { |d| camelize_keys(d).compact }
+      {labels: @labels, datasets: ds, options: @chart_options}.to_json
+    end
+
+    def camelize_keys(hash)
+      hash.transform_keys { |k| k.to_s.camelize(:lower) }
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/chart/chart_controller.js

@@ -0,0 +1,29 @@
+// Requires Chart.js — add to your importmap before use:
+//   pin "chart.js", to: "https://esm.sh/chart.js@4"
+import { Controller } from "@hotwired/stimulus"
+import { Chart, registerables } from "chart.js"
+
+Chart.register(...registerables)
+
+export default class extends Controller {
+  static values = {
+    type: { type: String, default: "bar" },
+    config: { type: String, default: "{}" }
+  }
+
+  #chart = null
+
+  connect() {
+    const { labels, datasets, options = {} } = JSON.parse(this.configValue)
+    this.#chart = new Chart(this.element, {
+      type: this.typeValue,
+      data: { labels, datasets },
+      options: { responsive: true, maintainAspectRatio: true, ...options }
+    })
+  }
+
+  disconnect() {
+    this.#chart?.destroy()
+    this.#chart = null
+  }
+}

data/lib/generators/view_primitives/add/templates/chat_bubble/chat_bubble_component.rb.tt

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module UI
+  class ChatBubbleComponent < ApplicationComponent
+    # sent: true  → right-aligned, primary-colored bubble
+    # sent: false → left-aligned, muted bubble (default)
+
+    BUBBLE_BASE = "max-w-[80%] rounded-2xl px-4 py-2 text-sm leading-relaxed"
+    BUBBLE_SENT = "bg-primary text-primary-foreground rounded-br-none"
+    BUBBLE_RECV = "bg-muted text-foreground rounded-bl-none"
+
+    TIMESTAMP_BASE = "mt-1 text-xs text-muted-foreground"
+
+    # sent:      true for outgoing messages, false for incoming (default)
+    # timestamp: optional time string rendered below the bubble
+    # avatar:    optional URL for a small avatar image (incoming only)
+    def initialize(sent: false, timestamp: nil, avatar: nil, **html_attrs)
+      @sent      = sent
+      @timestamp = timestamp
+      @avatar    = avatar
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      wrapper_cls = cn("flex items-end gap-2", @sent ? "flex-row-reverse" : "flex-row", @extra_class)
+
+      content_tag(:div, class: wrapper_cls, **@html_attrs) do
+        concat avatar_img if @avatar && !@sent
+        concat bubble_block
+      end
+    end
+
+    private
+
+    def avatar_img
+      content_tag(:img, nil,
+        src: @avatar,
+        alt: "",
+        class: "size-7 rounded-full object-cover shrink-0",
+        "aria-hidden": "true")
+    end
+
+    def bubble_block
+      content_tag(:div, class: cn("flex flex-col", @sent ? "items-end" : "items-start")) do
+        concat content_tag(:div, content,
+          class: cn(BUBBLE_BASE, @sent ? BUBBLE_SENT : BUBBLE_RECV))
+        concat content_tag(:p, @timestamp,
+          class: TIMESTAMP_BASE) if @timestamp
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/checkbox/checkbox_component.rb.tt

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module UI
+  class CheckboxComponent < ApplicationComponent
+    BASE = "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none " \
+           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "disabled:cursor-not-allowed disabled:opacity-50 " \
+           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+           "checked:border-primary checked:bg-primary checked:text-primary-foreground " \
+           "dark:bg-input/30 dark:checked:bg-primary"
+
+    def initialize(label: nil, checked: false, **html_attrs)
+      @label = label
+      @checked = checked
+      @id = html_attrs[:id] || html_attrs[:name]&.gsub(/\W/, "_")
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      if @label
+        content_tag(:div, class: "flex items-center gap-2") do
+          concat checkbox_input
+          concat label_tag
+        end
+      else
+        checkbox_input
+      end
+    end
+
+    private
+
+    def checkbox_input
+      attrs = @html_attrs.merge(
+        type: "checkbox",
+        class: cn(BASE, @extra_class)
+      )
+      attrs[:checked] = true if @checked
+      attrs[:id] = @id if @id
+      content_tag(:input, nil, **attrs)
+    end
+
+    def label_tag
+      content_tag(:label,
+        @label,
+        for: @id,
+        class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/collapsible/collapsible_component.rb.tt

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UI
+  class CollapsibleComponent < ApplicationComponent
+    # CSS-only collapse via native <details>/<summary>.
+    # trigger slot: content for the summary row (button, icon, label, etc.)
+    # open:         render pre-expanded (default: false)
+
+    SUMMARY_CLS = "flex cursor-pointer list-none items-center justify-between gap-2 " \
+                  "[&::-webkit-details-marker]:hidden"
+    CONTENT_CLS = "mt-2"
+
+    renders_one :trigger
+
+    def initialize(open: false, **html_attrs)
+      @open = open
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = { class: cn(@extra_class), **@html_attrs }
+      attrs[:open] = true if @open
+
+      content_tag(:details, **attrs) do
+        concat content_tag(:summary, trigger, class: SUMMARY_CLS)
+        concat content_tag(:div, content, class: CONTENT_CLS)
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/combobox/combobox_component.rb.tt

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module UI
+  class ComboboxComponent < ApplicationComponent
+    INPUT  = "flex h-9 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs " \
+             "placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+    PANEL  = "absolute z-50 top-full left-0 mt-1 w-full overflow-hidden rounded-md border " \
+             "bg-popover text-popover-foreground shadow-md"
+    LIST   = "max-h-[200px] overflow-y-auto p-1"
+    OPTION = "relative flex w-full cursor-pointer select-none items-center rounded-sm " \
+             "px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+    EMPTY  = "py-4 text-center text-sm text-muted-foreground"
+
+    def initialize(name:, options: [], value: nil, placeholder: "Select...", **html_attrs)
+      @name        = name
+      @options     = options
+      @value       = value&.to_s
+      @placeholder = placeholder
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("relative", @extra_class),
+        data: {
+          controller: "combobox",
+          action: "click@document->combobox#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat hidden_input
+        concat text_input
+        concat dropdown
+      end
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: @value, data: { combobox_target: "hidden" })
+    end
+
+    def text_input
+      selected_label = @options.find { |o| o[:value].to_s == @value }&.dig(:label)
+      tag.input(
+        type: "text",
+        placeholder: @placeholder,
+        value: selected_label,
+        autocomplete: "off",
+        class: INPUT,
+        data: {
+          combobox_target: "input",
+          action: "focus->combobox#open input->combobox#filter"
+        }
+      )
+    end
+
+    def dropdown
+      content_tag(:div,
+        data: { combobox_target: "panel" },
+        hidden: true,
+        class: PANEL) do
+        concat content_tag(:div, class: LIST) {
+          concat options_list
+          concat content_tag(:div, "No results.",
+            class: EMPTY,
+            data: { combobox_target: "empty" },
+            hidden: true)
+        }
+      end
+    end
+
+    def options_list
+      safe_join(@options.map { |opt|
+        content_tag(:button, opt[:label],
+          type: "button",
+          class: OPTION,
+          data: {
+            combobox_target: "option",
+            combobox_value: opt[:value],
+            combobox_label: opt[:label],
+            action: "click->combobox#select"
+          })
+      })
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/combobox/combobox_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "hidden", "panel", "option", "empty"]
+
+  open() {
+    this.panelTarget.hidden = false
+    this.filter()
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    const selected = this.optionTargets.find(o => o.dataset.comboboxValue === this.hiddenTarget.value)
+    this.inputTarget.value = selected ? selected.dataset.comboboxLabel : ""
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase()
+    let visible = 0
+    this.optionTargets.forEach(option => {
+      const match = option.dataset.comboboxLabel.toLowerCase().includes(query)
+      option.hidden = !match
+      if (match) visible++
+    })
+    this.emptyTarget.hidden = visible > 0
+  }
+
+  select(event) {
+    const { comboboxValue, comboboxLabel } = event.currentTarget.dataset
+    this.hiddenTarget.value = comboboxValue
+    this.inputTarget.value = comboboxLabel
+    this.panelTarget.hidden = true
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
+}

data/lib/generators/view_primitives/add/templates/command/command_component.rb.tt

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module UI
+  class CommandComponent < ApplicationComponent
+    renders_one :trigger
+
+    OVERLAY = "fixed inset-0 z-50 bg-black/80"
+    DIALOG  = "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] " \
+              "overflow-hidden rounded-lg border bg-background shadow-lg"
+    SEARCH  = "flex h-10 w-full items-center gap-2 border-b px-3"
+    LIST    = "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto"
+    EMPTY   = "py-6 text-center text-sm text-muted-foreground"
+
+    # Wrap each group of items in a div with this class.
+    GROUP_WRAPPER = "overflow-hidden p-1 text-foreground"
+    # Apply to the heading element (p/span) inside a group wrapper.
+    GROUP         = "px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    # Apply to each actionable item button/link.
+    ITEM          = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm " \
+                    "px-2 py-1.5 text-sm outline-none " \
+                    "hover:bg-accent hover:text-accent-foreground " \
+                    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+                    "[&_svg:not([class*='text-'])]:text-muted-foreground"
+    # Place inside an ITEM as the last child to show a keyboard shortcut on the right.
+    SHORTCUT      = "ml-auto text-xs tracking-widest text-muted-foreground"
+    # Horizontal rule between groups (use a plain <hr> tag).
+    SEPARATOR     = "-mx-1 h-px bg-border"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, data: { controller: "command" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->command#open" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div, data: { command_target: "panel" }, hidden: true) do
+        concat content_tag(:div, nil,
+          class: OVERLAY,
+          data: { action: "click->command#close" },
+          "aria-hidden": "true")
+        concat content_tag(:div,
+          class: cn(DIALOG, @extra_class),
+          role: "dialog",
+          "aria-modal": "true",
+          data: { action: "keydown.escape@window->command#close" }) {
+          concat search_bar
+          concat content_tag(:div, class: LIST, data: { command_target: "list" }) {
+            concat content
+          }
+          concat content_tag(:div, "No results found.",
+            class: EMPTY,
+            data: { command_target: "empty" },
+            hidden: true)
+        }
+      end
+    end
+
+    def search_bar
+      content_tag(:div, class: SEARCH) do
+        concat search_icon
+        concat tag.input(
+          type: "text",
+          placeholder: "Type a command or search...",
+          class: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+          data: {
+            command_target: "input",
+            action: "input->command#filter"
+          }
+        )
+      end
+    end
+
+    def search_icon
+      raw('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>')
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/command/command_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel", "input", "list", "empty"]
+
+  connect() {
+    this._onKeydown = this._onKeydown.bind(this)
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  _onKeydown(event) {
+    if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      this.panelTarget.hidden ? this.open() : this.close()
+    }
+  }
+
+  open() {
+    this.panelTarget.hidden = false
+    document.body.style.overflow = "hidden"
+    this.inputTarget.value = ""
+    this.inputTarget.focus()
+    this.filter()
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    document.body.style.overflow = ""
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase().trim()
+    const items = this.listTarget.querySelectorAll("[data-command-value]")
+    items.forEach(item => {
+      item.hidden = query.length > 0 && !item.dataset.commandValue.toLowerCase().includes(query)
+    })
+
+    this.listTarget.querySelectorAll("[data-command-group]").forEach(group => {
+      const hasVisible = Array.from(group.querySelectorAll("[data-command-value]")).some(i => !i.hidden)
+      group.hidden = !hasVisible
+    })
+
+    const totalVisible = Array.from(items).filter(i => !i.hidden).length
+    this.emptyTarget.hidden = totalVisible > 0
+  }
+}

data/lib/generators/view_primitives/add/templates/context_menu/context_menu_component.rb.tt

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module UI
+  class ContextMenuComponent < ApplicationComponent
+    renders_one :menu
+
+    PANEL     = "fixed z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " \
+               "text-popover-foreground shadow-md"
+    ITEM      = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm " \
+                "px-2 py-1.5 text-sm outline-none " \
+                "hover:bg-accent hover:text-accent-foreground " \
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 " \
+                "[&_svg:not([class*='text-'])]:text-muted-foreground"
+    SEPARATOR = "-mx-1 my-1 h-px bg-border"
+    LABEL_CLS = "px-2 py-1.5 text-sm font-medium text-foreground"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("select-none", @extra_class),
+        data: {
+          controller: "context-menu",
+          action: "contextmenu->context-menu#show click@document->context-menu#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat content
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div,
+        data: { "context-menu-target": "panel" },
+        hidden: true,
+        class: PANEL,
+        style: "top: 0; left: 0") do
+        concat menu
+      end
+    end
+  end
+end