phlex_kit 0.2.0

data/app/components/phlex_kit/alert_dialog/alert_dialog_footer.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Footer of a PhlexKit::AlertDialog (Cancel + the destructive submit). See alert_dialog.rb.
+  class AlertDialogFooter < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-alert-dialog-footer" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/alert_dialog/alert_dialog_header.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Header region of a PhlexKit::AlertDialog (Title + Description). See alert_dialog.rb.
+  class AlertDialogHeader < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-alert-dialog-header" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/alert_dialog/alert_dialog_title.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Title of a PhlexKit::AlertDialog. See alert_dialog.rb.
+  class AlertDialogTitle < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      h2(**mix({ class: "pk-alert-dialog-title" }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/alert_dialog/alert_dialog_trigger.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Opens a PhlexKit::AlertDialog (wrap a PhlexKit::Button). See alert_dialog.rb.
+  class AlertDialogTrigger < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({ class: "pk-alert-dialog-trigger", data: { action: "click->phlex-kit--alert-dialog#open" } }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/aspect_ratio/aspect_ratio.css

@@ -0,0 +1,12 @@
+/* Co-located with aspect_ratio.rb — UI::AspectRatio. ruby_ui's padding-bottom
+   ratio box; the inner layer fills it and an <img> child covers it. Vanilla CSS;
+   theme tokens come from the global stylesheet. */
+.pk-aspect-ratio { position: relative; width: 100%; }
+.pk-aspect-ratio-inner { position: absolute; inset: 0; }
+.pk-aspect-ratio-inner > img {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}

data/app/components/phlex_kit/aspect_ratio/aspect_ratio.rb

@@ -0,0 +1,27 @@
+module PhlexKit
+  # Constrains content (typically an <img>) to a fixed aspect ratio, ported from
+  # ruby_ui's RubyUI::AspectRatio. `aspect_ratio:` is a "w/h" string (e.g. "16/9",
+  # "1/1"); the classic padding-bottom box keeps the ratio. Tailwind → vanilla
+  # `.pk-aspect-ratio*` (aspect_ratio.css).
+  class AspectRatio < BaseComponent
+    def initialize(aspect_ratio: "16/9", **attrs)
+      unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")
+        raise ArgumentError, %(aspect_ratio must be a "w/h" string (e.g. "16/9"))
+      end
+      @aspect_ratio = aspect_ratio
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(class: "pk-aspect-ratio", style: "padding-bottom: #{padding_bottom}%") do
+        div(**mix({ class: "pk-aspect-ratio-inner" }, @attrs), &block)
+      end
+    end
+
+    private
+
+    def padding_bottom
+      @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+    end
+  end
+end

data/app/components/phlex_kit/attachment/attachment.css

@@ -0,0 +1,62 @@
+/* Co-located with attachment.rb — UI::Attachment, shadcn parity: bordered
+   file chip (icon/preview tile, name + meta, trailing actions). */
+.pk-attachment {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  max-width: 100%;
+  border: 1px solid var(--pk-border);
+  border-radius: calc(var(--pk-radius) + 4px);
+  background: var(--pk-surface);
+  padding: .5rem;
+  font-size: .875rem;
+}
+.pk-attachment-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface-2);
+  color: var(--pk-muted);
+  overflow: hidden;
+}
+.pk-attachment-media svg { width: 1rem; height: 1rem; }
+.pk-attachment-media img { width: 100%; height: 100%; object-fit: cover; }
+.pk-attachment-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: .125rem;
+}
+.pk-attachment-title {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pk-attachment-description { color: var(--pk-muted); font-size: .75rem; }
+.pk-attachment-actions { display: flex; align-items: center; gap: .25rem; flex: none; }
+.pk-attachment-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--pk-radius) - 4px);
+  background: transparent;
+  color: var(--pk-muted);
+  cursor: pointer;
+  transition: background-color .15s ease, color .15s ease;
+}
+.pk-attachment-action:hover { background: var(--pk-accent); color: var(--pk-text); }
+.pk-attachment-action:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pk-ring) 50%, transparent);
+}
+.pk-attachment-action svg { width: .875rem; height: .875rem; }

data/app/components/phlex_kit/attachment/attachment.rb

@@ -0,0 +1,16 @@
+module PhlexKit
+  # File chip, ported from shadcn/ui's Attachment (an AI-chat-era addition, not
+  # in ruby_ui): a bordered row of AttachmentMedia (icon or image preview) +
+  # AttachmentContent(AttachmentTitle + AttachmentDescription) +
+  # AttachmentActions(AttachmentAction — e.g. a remove ×).
+  # `.pk-attachment*` (attachment.css).
+  class Attachment < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-attachment" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/attachment/attachment_action.rb

@@ -0,0 +1,24 @@
+module PhlexKit
+  # Small ghost icon button in an Attachment (remove/download). Give it an
+  # aria-label; block content is the icon (defaults to ×). See attachment.rb.
+  class AttachmentAction < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      button(**mix({ type: :button, class: "pk-attachment-action" }, @attrs)) do
+        if block
+          yield
+        else
+          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none",
+              stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round",
+              "stroke-linejoin": "round", "aria-hidden": "true") do |s|
+            s.path(d: "M18 6 6 18")
+            s.path(d: "m6 6 12 12")
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/attachment/attachment_actions.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See attachment.rb.
+  class AttachmentActions < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-attachment-actions" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/attachment/attachment_content.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See attachment.rb.
+  class AttachmentContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-attachment-content" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/attachment/attachment_description.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See attachment.rb.
+  class AttachmentDescription < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-attachment-description" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/attachment/attachment_media.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  # Square preview tile of an Attachment — a file-type icon or an <img>.
+  # See attachment.rb.
+  class AttachmentMedia < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-attachment-media" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/attachment/attachment_title.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # See attachment.rb.
+  class AttachmentTitle < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-attachment-title" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/avatar/avatar.css

@@ -0,0 +1,35 @@
+/* Co-located with avatar.rb — UI::Avatar (+ Image / Fallback). ruby_ui's Tailwind
+   → vanilla CSS on the palette tokens. The controller toggles `.hidden` between
+   image and fallback. Theme tokens come from the global stylesheet. */
+.pk-avatar {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 999px;
+  height: 2rem;
+  width: 2rem;
+  font-size: .875rem;
+}
+.pk-avatar.xs { height: 1rem; width: 1rem; font-size: .5rem; }
+.pk-avatar.sm { height: 1.5rem; width: 1.5rem; font-size: .75rem; }
+.pk-avatar.lg { height: 2.5rem; width: 2.5rem; font-size: 1rem; }
+.pk-avatar.xl { height: 5rem; width: 5rem; font-size: 1.875rem; }
+
+.pk-avatar-image { aspect-ratio: 1 / 1; height: 100%; width: 100%; object-fit: cover; }
+.pk-avatar-fallback {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--pk-surface-2);
+  font-weight: 500;
+}
+.pk-avatar-image.hidden, .pk-avatar-fallback.hidden { display: none; }
+
+/* Overlapping row (shadcn's -space-x-2 grouped avatars). */
+.pk-avatar-group { display: flex; }
+.pk-avatar-group .pk-avatar { box-shadow: 0 0 0 2px var(--pk-bg); }
+.pk-avatar-group .pk-avatar:not(:first-child) { margin-left: -.5rem; }

data/app/components/phlex_kit/avatar/avatar.rb

@@ -0,0 +1,25 @@
+module PhlexKit
+  # Avatar, ported from ruby_ui's RubyUI::Avatar — a round image with a fallback
+  # (initials). Keeps ruby_ui's `phlex-kit--avatar` Stimulus controller (shows the
+  # image once it loads, else the fallback). Compose AvatarImage + AvatarFallback;
+  # fallback-only is fine (the controller no-ops without an image). `SIZES.fetch`
+  # fails loud. Tailwind → vanilla `.pk-avatar*` (avatar.css).
+  class Avatar < BaseComponent
+    SIZES = { xs: "xs", sm: "sm", md: nil, lg: "lg", xl: "xl" }.freeze
+
+    def initialize(size: :md, **attrs)
+      @size = size.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: classes, data: { controller: "phlex-kit--avatar" } }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-avatar", SIZES.fetch(@size) ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/avatar/avatar_fallback.rb

@@ -0,0 +1,13 @@
+module PhlexKit
+  # The fallback shown when a PhlexKit::Avatar has no image (or it fails to load) —
+  # typically the user's initials. See avatar.rb.
+  class AvatarFallback < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: "pk-avatar-fallback", data: { phlex_kit__avatar_target: "fallback" } }, @attrs), &block)
+    end
+  end
+end

data/app/components/phlex_kit/avatar/avatar_group.rb

@@ -0,0 +1,7 @@
+module PhlexKit
+  # Overlapping row of Avatars (shadcn's grouped avatars). See avatar.rb.
+  class AvatarGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-avatar-group" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/avatar/avatar_image.rb

@@ -0,0 +1,24 @@
+module PhlexKit
+  # The image inside a PhlexKit::Avatar. NOT lazy-loaded on purpose (the controller
+  # hides a not-yet-loaded image so the fallback shows; a lazy image that never
+  # paints would never fire `load`). See avatar.rb.
+  class AvatarImage < BaseComponent
+    def initialize(src:, alt: "", **attrs)
+      @src = src
+      @alt = alt
+      @attrs = attrs
+    end
+
+    def view_template
+      img(**mix({
+        src: @src,
+        alt: @alt,
+        class: "pk-avatar-image",
+        data: {
+          phlex_kit__avatar_target: "image",
+          action: "load->phlex-kit--avatar#showImage error->phlex-kit--avatar#showFallback"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/badge/badge.css

@@ -0,0 +1,50 @@
+/* Co-located with badge.rb — UI::Badge. ruby_ui's Tailwind replaced with vanilla
+   CSS on the palette tokens, at variant/size parity. Geometry from ruby_ui
+   (inline-flex, rounded-md, ring-1 ring-inset → 1px border, bg tint, px-2 py-1
+   text-xs). Theme tokens come from the global stylesheet. */
+.pk-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: calc(var(--pk-radius) - 2px);
+  padding: .25rem .5rem;
+  font-size: .75rem;
+  font-weight: 500;
+  line-height: 1;
+  border: 1px solid transparent;
+}
+
+/* Sizes (md is the base above). */
+.pk-badge.sm { padding: .125rem .375rem; font-size: .7rem; }
+.pk-badge.lg { padding: .25rem .75rem; font-size: .875rem; }
+
+/* Variants — colored text over a faint tint of the same hue + matching ring. */
+.pk-badge.primary {
+  color: var(--pk-brand);
+  background: color-mix(in oklab, var(--pk-brand) 8%, transparent);
+  border-color: color-mix(in oklab, var(--pk-brand) 25%, transparent);
+}
+.pk-badge.secondary {
+  color: var(--pk-muted);
+  background: color-mix(in oklab, var(--pk-muted) 12%, transparent);
+  border-color: color-mix(in oklab, var(--pk-muted) 25%, transparent);
+}
+.pk-badge.outline {
+  color: var(--pk-text);
+  background: transparent;
+  border-color: var(--pk-border);
+}
+.pk-badge.destructive {
+  color: var(--pk-red);
+  background: color-mix(in oklab, var(--pk-red) 10%, transparent);
+  border-color: color-mix(in oklab, var(--pk-red) 25%, transparent);
+}
+.pk-badge.success {
+  color: var(--pk-green);
+  background: color-mix(in oklab, var(--pk-green) 10%, transparent);
+  border-color: color-mix(in oklab, var(--pk-green) 25%, transparent);
+}
+.pk-badge.warning {
+  color: var(--pk-amber);
+  background: color-mix(in oklab, var(--pk-amber) 10%, transparent);
+  border-color: color-mix(in oklab, var(--pk-amber) 25%, transparent);
+}

data/app/components/phlex_kit/badge/badge.rb

@@ -0,0 +1,39 @@
+module PhlexKit
+  # Pill/label badge, ported from ruby_ui's RubyUI::Badge to variant/size parity.
+  # Same kit shape as PhlexKit::Button — a `variant:`/`size:` selector plus attrs/block
+  # passed through to the <span>. ruby_ui's semantic variants are ported; its long
+  # raw-colour palette (red/blue/teal/…) is omitted as unused. Tailwind → vanilla
+  # `.pk-badge` CSS (badge.css). `VARIANTS.fetch` fails loud.
+  class Badge < BaseComponent
+    VARIANTS = {
+      primary: "primary",
+      secondary: "secondary",
+      outline: "outline",
+      destructive: "destructive",
+      success: "success",
+      warning: "warning"
+    }.freeze
+
+    SIZES = {
+      sm: "sm",
+      md: nil,
+      lg: "lg"
+    }.freeze
+
+    def initialize(variant: :primary, size: :md, **attrs)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      span(**mix({ class: classes }, @attrs), &block)
+    end
+
+    private
+
+    def classes
+      [ "pk-badge", VARIANTS.fetch(@variant), SIZES.fetch(@size) ].compact.join(" ")
+    end
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb.css

@@ -0,0 +1,18 @@
+/* Co-located with breadcrumb.rb. Theme tokens from the global stylesheet. */
+.pk-breadcrumb-list {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: .375rem; word-break: break-word;
+  font-size: .875rem; color: var(--pk-muted);
+}
+.pk-breadcrumb-item { display: inline-flex; align-items: center; gap: .375rem; }
+.pk-breadcrumb-link { color: inherit; text-decoration: none; transition: color .15s ease; }
+.pk-breadcrumb-link:hover { color: var(--pk-text); }
+.pk-breadcrumb-page { font-weight: 400; color: var(--pk-text); }
+.pk-breadcrumb-separator { display: inline-flex; }
+.pk-breadcrumb-separator > svg { width: .875rem; height: .875rem; }
+.pk-breadcrumb-ellipsis { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; }
+.pk-breadcrumb-ellipsis > svg { width: 1rem; height: 1rem; }
+.pk-sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}

data/app/components/phlex_kit/breadcrumb/breadcrumb.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  # Navigational hierarchy trail. Ported from ruby_ui's RubyUI::Breadcrumb. Compose
+  # Breadcrumb > BreadcrumbList > BreadcrumbItem (+ Link/Page/Separator/Ellipsis).
+  class Breadcrumb < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = nav(**mix({ class: "pk-breadcrumb", aria: { label: "breadcrumb" } }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_ellipsis.rb

@@ -0,0 +1,15 @@
+module PhlexKit
+  class BreadcrumbEllipsis < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template
+      span(**mix({ class: "pk-breadcrumb-ellipsis", role: "presentation", aria: { hidden: true } }, @attrs)) do
+        svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round") do |s|
+          s.circle(cx: "12", cy: "12", r: "1")
+          s.circle(cx: "19", cy: "12", r: "1")
+          s.circle(cx: "5", cy: "12", r: "1")
+        end
+        span(class: "pk-sr-only") { "More" }
+      end
+    end
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_item.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class BreadcrumbItem < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = li(**mix({ class: "pk-breadcrumb-item" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_link.rb

@@ -0,0 +1,9 @@
+module PhlexKit
+  class BreadcrumbLink < BaseComponent
+    def initialize(href: "#", **attrs)
+      @href = href
+      @attrs = attrs
+    end
+    def view_template(&) = a(**mix({ href: @href, class: "pk-breadcrumb-link" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_list.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class BreadcrumbList < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = ol(**mix({ class: "pk-breadcrumb-list" }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_page.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class BreadcrumbPage < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      span(**mix({ class: "pk-breadcrumb-page", role: "link", aria: { disabled: true, current: "page" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/breadcrumb/breadcrumb_separator.rb

@@ -0,0 +1,10 @@
+module PhlexKit
+  class BreadcrumbSeparator < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&block)
+      li(**mix({ class: "pk-breadcrumb-separator", role: "presentation", aria: { hidden: true } }, @attrs)) do
+        if block then yield else svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round") { |s| s.path(d: "m9 18 6-6-6-6") } end
+      end
+    end
+  end
+end

data/app/components/phlex_kit/bubble/bubble.css

@@ -0,0 +1,32 @@
+/* Co-located with bubble.rb. Theme tokens from the global stylesheet. The variant
+   colours the child [data-slot=bubble-content]. */
+.pk-bubble {
+  position: relative; display: flex; width: fit-content; min-width: 0;
+  flex-direction: column; gap: .25rem; max-width: 80%;
+}
+.pk-bubble[data-align="end"] { align-self: flex-end; }
+.pk-bubble-content {
+  width: fit-content; max-width: 100%; min-width: 0; overflow: hidden;
+  overflow-wrap: break-word; border: 1px solid transparent; border-radius: 1.5rem;
+  padding: .625rem .75rem; font-size: .875rem; line-height: 1.625;
+}
+.pk-bubble[data-align="end"] > .pk-bubble-content { align-self: flex-end; }
+/* variants */
+.pk-bubble[data-variant="default"]     > .pk-bubble-content { background: var(--pk-brand); color: var(--pk-brand-ink); }
+.pk-bubble[data-variant="secondary"]   > .pk-bubble-content { background: var(--pk-surface-2); color: var(--pk-text); }
+.pk-bubble[data-variant="muted"]       > .pk-bubble-content { background: var(--pk-surface-2); color: var(--pk-text); }
+.pk-bubble[data-variant="tinted"]      > .pk-bubble-content { background: color-mix(in oklab, var(--pk-brand) 18%, transparent); color: var(--pk-text); }
+.pk-bubble[data-variant="outline"]     > .pk-bubble-content { background: var(--pk-bg); border-color: var(--pk-border); color: var(--pk-text); }
+.pk-bubble[data-variant="ghost"]       > .pk-bubble-content { background: transparent; border-radius: 0; padding: 0; }
+.pk-bubble[data-variant="destructive"] > .pk-bubble-content { background: color-mix(in oklab, var(--pk-red) 12%, transparent); color: var(--pk-red); }
+.pk-bubble-group { display: flex; min-width: 0; flex-direction: column; gap: .5rem; }
+.pk-bubble-reactions {
+  position: absolute; z-index: 10; display: flex; width: fit-content;
+  align-items: center; justify-content: center; border-radius: 9999px;
+  box-shadow: 0 0 0 3px var(--pk-surface); background: var(--pk-surface-2);
+  flex: none; gap: .25rem; padding: .125rem .375rem; font-size: .875rem;
+}
+.pk-bubble-reactions[data-side="bottom"] { bottom: 0; transform: translateY(75%); }
+.pk-bubble-reactions[data-side="top"] { top: 0; transform: translateY(-75%); }
+.pk-bubble-reactions[data-align="end"] { right: .75rem; }
+.pk-bubble-reactions[data-align="start"] { left: .75rem; }

data/app/components/phlex_kit/bubble/bubble.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  # Chat message bubble. Ported from ruby_ui's RubyUI::Bubble. The variant colours
+  # the child BubbleContent via a data-slot selector; align: :end flips it to the
+  # trailing edge. Compose Bubble > BubbleContent (+ BubbleReactions).
+  class Bubble < BaseComponent
+    VARIANTS = %i[default secondary muted tinted outline ghost destructive].freeze
+    def initialize(variant: :default, align: :start, **attrs)
+      @variant = variant.to_sym
+      raise KeyError, "unknown Bubble variant #{@variant}" unless VARIANTS.include?(@variant)
+      @align = align.to_sym
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-bubble", data: { slot: "bubble", variant: @variant, align: @align } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/bubble/bubble_content.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  class BubbleContent < BaseComponent
+    def initialize(as: :div, **attrs)
+      @as = as
+      @attrs = attrs
+    end
+    def view_template(&)
+      send(@as, **mix({ class: "pk-bubble-content", data: { slot: "bubble-content" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/bubble/bubble_group.rb

@@ -0,0 +1,6 @@
+module PhlexKit
+  class BubbleGroup < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&) = div(**mix({ class: "pk-bubble-group", data: { slot: "bubble-group" } }, @attrs), &)
+  end
+end

data/app/components/phlex_kit/bubble/bubble_reactions.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  class BubbleReactions < BaseComponent
+    def initialize(side: :bottom, align: :end, **attrs)
+      @side = side.to_sym
+      @align = align.to_sym
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: "pk-bubble-reactions", data: { slot: "bubble-reactions", side: @side, align: @align } }, @attrs), &)
+    end
+  end
+end