From 9226becb2aed1f4c9c141e5f7fad4521cca2d77a Mon Sep 17 00:00:00 2001
From: Maciej Pyrc <maciekpyrc@gmail.com>
Date: Thu, 1 Oct 2026 13:45:09 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20button=20group?=
 =?UTF-8?q?,=20empty,=20input=20group,=20item,=20kbd,=20native=20select=20?=
 =?UTF-8?q?and=20spinner=20primitives,=20size=20the=20select=20trigger=20l?=
 =?UTF-8?q?ike=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/admin/src/components/ui/button-group.tsx |  81 +++++++++
 apps/admin/src/components/ui/empty.tsx        |  86 ++++++++++
 apps/admin/src/components/ui/input-group.tsx  | 156 +++++++++++++++++
 apps/admin/src/components/ui/item.tsx         | 158 ++++++++++++++++++
 apps/admin/src/components/ui/kbd.tsx          |  24 +++
 .../admin/src/components/ui/native-select.tsx |  92 ++++++++++
 apps/admin/src/components/ui/select.tsx       |  26 ++-
 apps/admin/src/components/ui/spinner.tsx      |  10 ++
 .../src/components/ui/button-group.tsx        |  81 +++++++++
 apps/extension/src/components/ui/empty.tsx    |  86 ++++++++++
 .../src/components/ui/input-group.tsx         | 156 +++++++++++++++++
 apps/extension/src/components/ui/item.tsx     | 158 ++++++++++++++++++
 apps/extension/src/components/ui/kbd.tsx      |  24 +++
 .../src/components/ui/native-select.tsx       |  92 ++++++++++
 apps/extension/src/components/ui/select.tsx   |  26 ++-
 apps/extension/src/components/ui/spinner.tsx  |  10 ++
 .../src/components/ui/button-group.tsx        |  81 +++++++++
 apps/frontend/src/components/ui/empty.tsx     |  86 ++++++++++
 .../src/components/ui/input-group.tsx         | 156 +++++++++++++++++
 apps/frontend/src/components/ui/item.tsx      | 158 ++++++++++++++++++
 apps/frontend/src/components/ui/kbd.tsx       |  24 +++
 .../src/components/ui/native-select.tsx       |  92 ++++++++++
 apps/frontend/src/components/ui/select.tsx    |  26 ++-
 apps/frontend/src/components/ui/spinner.tsx   |  10 ++
 24 files changed, 1887 insertions(+), 12 deletions(-)
 create mode 100644 apps/admin/src/components/ui/button-group.tsx
 create mode 100644 apps/admin/src/components/ui/empty.tsx
 create mode 100644 apps/admin/src/components/ui/input-group.tsx
 create mode 100644 apps/admin/src/components/ui/item.tsx
 create mode 100644 apps/admin/src/components/ui/kbd.tsx
 create mode 100644 apps/admin/src/components/ui/native-select.tsx
 create mode 100644 apps/admin/src/components/ui/spinner.tsx
 create mode 100644 apps/extension/src/components/ui/button-group.tsx
 create mode 100644 apps/extension/src/components/ui/empty.tsx
 create mode 100644 apps/extension/src/components/ui/input-group.tsx
 create mode 100644 apps/extension/src/components/ui/item.tsx
 create mode 100644 apps/extension/src/components/ui/kbd.tsx
 create mode 100644 apps/extension/src/components/ui/native-select.tsx
 create mode 100644 apps/extension/src/components/ui/spinner.tsx
 create mode 100644 apps/frontend/src/components/ui/button-group.tsx
 create mode 100644 apps/frontend/src/components/ui/empty.tsx
 create mode 100644 apps/frontend/src/components/ui/input-group.tsx
 create mode 100644 apps/frontend/src/components/ui/item.tsx
 create mode 100644 apps/frontend/src/components/ui/kbd.tsx
 create mode 100644 apps/frontend/src/components/ui/native-select.tsx
 create mode 100644 apps/frontend/src/components/ui/spinner.tsx

diff --git a/apps/admin/src/components/ui/button-group.tsx b/apps/admin/src/components/ui/button-group.tsx
new file mode 100644
index 0000000..03b3380
--- /dev/null
+++ b/apps/admin/src/components/ui/button-group.tsx
@@ -0,0 +1,81 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+/**
+ * The template's default SelectTrigger is h-10 to match Input, while the default Button
+ * is h-9. Inside a group they must share a height, so default-size triggers are pulled
+ * down to the button height here.
+ */
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>[data-slot=select-trigger][data-size=default]]:h-9 has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn("bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
diff --git a/apps/admin/src/components/ui/empty.tsx b/apps/admin/src/components/ui/empty.tsx
new file mode 100644
index 0000000..0a8b73c
--- /dev/null
+++ b/apps/admin/src/components/ui/empty.tsx
@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="empty-title" className={cn("text-lg font-medium tracking-tight", className)} {...props} />;
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className)}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
diff --git a/apps/admin/src/components/ui/input-group.tsx b/apps/admin/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..51b5f47
--- /dev/null
+++ b/apps/admin/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+/**
+ * Ported from shadcn. The template's Input wraps its `<input>` in a div, so the
+ * selectors below target descendant inputs (`[&_input]`) instead of direct children,
+ * and InputGroupInput styles the control through `inputClassName`.
+ */
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-10 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&_input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&_input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&_input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&_input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  // The addon behaves like a label: clicking it moves focus into the control. Keyboard
+  // users reach the control directly with Tab, so a key handler here would add nothing.
+  return (
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, inputClassName, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn("min-w-0 flex-1", className)}
+      inputClassName={cn(
+        "h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        inputClassName,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
diff --git a/apps/admin/src/components/ui/item.tsx b/apps/admin/src/components/ui/item.tsx
new file mode 100644
index 0000000..b382a8a
--- /dev/null
+++ b/apps/admin/src/components/ui/item.tsx
@@ -0,0 +1,158 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props} />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0", className)} {...props} />;
+}
+
+const itemVariants = cva(
+  "group/item focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors [a]:hover:bg-accent/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};
diff --git a/apps/admin/src/components/ui/kbd.tsx b/apps/admin/src/components/ui/kbd.tsx
new file mode 100644
index 0000000..3076797
--- /dev/null
+++ b/apps/admin/src/components/ui/kbd.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
+  return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };
diff --git a/apps/admin/src/components/ui/native-select.tsx b/apps/admin/src/components/ui/native-select.tsx
new file mode 100644
index 0000000..f184f36
--- /dev/null
+++ b/apps/admin/src/components/ui/native-select.tsx
@@ -0,0 +1,92 @@
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Styled `<select>` for the cases where a native picker beats a Radix popover: short
+ * option lists, mobile browsers, dense tables. The browser arrow is removed with
+ * `appearance-none` and replaced by a chevron that sits in the same spot as the
+ * Select trigger's, so both components look identical side by side.
+ *
+ * Sizes mirror Input and SelectTrigger: xs h-6, sm h-8, default h-10, lg h-12. A native
+ * select centers its text on its own, so vertical padding stays small; `py-2` on a short
+ * control clips the glyphs.
+ */
+const nativeSelectSizes = {
+  xs: {
+    select: "h-6 py-0 pl-1.5 pr-7 text-xs",
+    icon: "right-1.5 size-3.5",
+  },
+  sm: {
+    select: "h-8 py-0 pl-3 pr-9",
+    icon: "right-3 size-4",
+  },
+  default: {
+    select: "h-10 py-1 pl-4 pr-10",
+    icon: "right-4 size-4",
+  },
+  lg: {
+    select: "h-12 py-2 pl-6 pr-12",
+    icon: "right-6 size-4",
+  },
+} as const;
+
+type NativeSelectSize = keyof typeof nativeSelectSizes;
+
+function NativeSelect({
+  className,
+  wrapperClassName,
+  size = "default",
+  ...props
+}: Omit<React.ComponentProps<"select">, "size"> & {
+  size?: NativeSelectSize;
+  wrapperClassName?: string;
+}) {
+  return (
+    <div
+      data-slot="native-select-wrapper"
+      data-size={size}
+      className={cn("group/native-select relative w-full has-[select:disabled]:opacity-50", wrapperClassName)}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className={cn(
+          "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 w-full min-w-0 appearance-none rounded-md border bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          nativeSelectSizes[size].select,
+          className,
+        )}
+        {...props}
+      />
+      <ChevronDownIcon
+        data-slot="native-select-icon"
+        aria-hidden="true"
+        className={cn(
+          "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none",
+          nativeSelectSizes[size].icon,
+        )}
+      />
+    </div>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option data-slot="native-select-option" className={cn("bg-[Canvas] text-[CanvasText]", className)} {...props} />
+  );
+}
+
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, nativeSelectSizes, type NativeSelectSize };
diff --git a/apps/admin/src/components/ui/select.tsx b/apps/admin/src/components/ui/select.tsx
index 3f3cc81..dfc5fe8 100644
--- a/apps/admin/src/components/ui/select.tsx
+++ b/apps/admin/src/components/ui/select.tsx
@@ -4,6 +4,21 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Trigger sizes mirror the Input scale (xs h-6, sm h-8, default h-10, lg h-12) so a
+ * Select next to an Input in a form shares its height and horizontal padding. The
+ * chevron sits inside that padding, which keeps it the same distance from the border
+ * as the value text is from the left edge.
+ */
+const selectTriggerSizes = {
+  xs: "h-6 gap-1 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+  sm: "h-8 gap-2 px-3",
+  default: "h-10 gap-2 px-4",
+  lg: "h-12 gap-2 px-6",
+} as const;
+
+type SelectTriggerSize = keyof typeof selectTriggerSizes;
+
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
@@ -22,21 +37,22 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
+  size?: SelectTriggerSize;
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit min-w-0 items-center justify-between rounded-md border bg-transparent py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        selectTriggerSizes[size],
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -97,7 +113,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
       )}
       {...props}
     >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
@@ -155,4 +171,6 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerSizes,
+  type SelectTriggerSize,
 };
diff --git a/apps/admin/src/components/ui/spinner.tsx b/apps/admin/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..2c6ff6d
--- /dev/null
+++ b/apps/admin/src/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { Loader2Icon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />;
+}
+
+export { Spinner };
diff --git a/apps/extension/src/components/ui/button-group.tsx b/apps/extension/src/components/ui/button-group.tsx
new file mode 100644
index 0000000..03b3380
--- /dev/null
+++ b/apps/extension/src/components/ui/button-group.tsx
@@ -0,0 +1,81 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+/**
+ * The template's default SelectTrigger is h-10 to match Input, while the default Button
+ * is h-9. Inside a group they must share a height, so default-size triggers are pulled
+ * down to the button height here.
+ */
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>[data-slot=select-trigger][data-size=default]]:h-9 has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn("bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
diff --git a/apps/extension/src/components/ui/empty.tsx b/apps/extension/src/components/ui/empty.tsx
new file mode 100644
index 0000000..0a8b73c
--- /dev/null
+++ b/apps/extension/src/components/ui/empty.tsx
@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="empty-title" className={cn("text-lg font-medium tracking-tight", className)} {...props} />;
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className)}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
diff --git a/apps/extension/src/components/ui/input-group.tsx b/apps/extension/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..51b5f47
--- /dev/null
+++ b/apps/extension/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+/**
+ * Ported from shadcn. The template's Input wraps its `<input>` in a div, so the
+ * selectors below target descendant inputs (`[&_input]`) instead of direct children,
+ * and InputGroupInput styles the control through `inputClassName`.
+ */
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-10 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&_input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&_input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&_input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&_input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  // The addon behaves like a label: clicking it moves focus into the control. Keyboard
+  // users reach the control directly with Tab, so a key handler here would add nothing.
+  return (
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, inputClassName, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn("min-w-0 flex-1", className)}
+      inputClassName={cn(
+        "h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        inputClassName,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
diff --git a/apps/extension/src/components/ui/item.tsx b/apps/extension/src/components/ui/item.tsx
new file mode 100644
index 0000000..b382a8a
--- /dev/null
+++ b/apps/extension/src/components/ui/item.tsx
@@ -0,0 +1,158 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props} />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0", className)} {...props} />;
+}
+
+const itemVariants = cva(
+  "group/item focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors [a]:hover:bg-accent/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};
diff --git a/apps/extension/src/components/ui/kbd.tsx b/apps/extension/src/components/ui/kbd.tsx
new file mode 100644
index 0000000..3076797
--- /dev/null
+++ b/apps/extension/src/components/ui/kbd.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
+  return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };
diff --git a/apps/extension/src/components/ui/native-select.tsx b/apps/extension/src/components/ui/native-select.tsx
new file mode 100644
index 0000000..f184f36
--- /dev/null
+++ b/apps/extension/src/components/ui/native-select.tsx
@@ -0,0 +1,92 @@
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Styled `<select>` for the cases where a native picker beats a Radix popover: short
+ * option lists, mobile browsers, dense tables. The browser arrow is removed with
+ * `appearance-none` and replaced by a chevron that sits in the same spot as the
+ * Select trigger's, so both components look identical side by side.
+ *
+ * Sizes mirror Input and SelectTrigger: xs h-6, sm h-8, default h-10, lg h-12. A native
+ * select centers its text on its own, so vertical padding stays small; `py-2` on a short
+ * control clips the glyphs.
+ */
+const nativeSelectSizes = {
+  xs: {
+    select: "h-6 py-0 pl-1.5 pr-7 text-xs",
+    icon: "right-1.5 size-3.5",
+  },
+  sm: {
+    select: "h-8 py-0 pl-3 pr-9",
+    icon: "right-3 size-4",
+  },
+  default: {
+    select: "h-10 py-1 pl-4 pr-10",
+    icon: "right-4 size-4",
+  },
+  lg: {
+    select: "h-12 py-2 pl-6 pr-12",
+    icon: "right-6 size-4",
+  },
+} as const;
+
+type NativeSelectSize = keyof typeof nativeSelectSizes;
+
+function NativeSelect({
+  className,
+  wrapperClassName,
+  size = "default",
+  ...props
+}: Omit<React.ComponentProps<"select">, "size"> & {
+  size?: NativeSelectSize;
+  wrapperClassName?: string;
+}) {
+  return (
+    <div
+      data-slot="native-select-wrapper"
+      data-size={size}
+      className={cn("group/native-select relative w-full has-[select:disabled]:opacity-50", wrapperClassName)}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className={cn(
+          "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 w-full min-w-0 appearance-none rounded-md border bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          nativeSelectSizes[size].select,
+          className,
+        )}
+        {...props}
+      />
+      <ChevronDownIcon
+        data-slot="native-select-icon"
+        aria-hidden="true"
+        className={cn(
+          "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none",
+          nativeSelectSizes[size].icon,
+        )}
+      />
+    </div>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option data-slot="native-select-option" className={cn("bg-[Canvas] text-[CanvasText]", className)} {...props} />
+  );
+}
+
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, nativeSelectSizes, type NativeSelectSize };
diff --git a/apps/extension/src/components/ui/select.tsx b/apps/extension/src/components/ui/select.tsx
index 3f3cc81..dfc5fe8 100644
--- a/apps/extension/src/components/ui/select.tsx
+++ b/apps/extension/src/components/ui/select.tsx
@@ -4,6 +4,21 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Trigger sizes mirror the Input scale (xs h-6, sm h-8, default h-10, lg h-12) so a
+ * Select next to an Input in a form shares its height and horizontal padding. The
+ * chevron sits inside that padding, which keeps it the same distance from the border
+ * as the value text is from the left edge.
+ */
+const selectTriggerSizes = {
+  xs: "h-6 gap-1 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+  sm: "h-8 gap-2 px-3",
+  default: "h-10 gap-2 px-4",
+  lg: "h-12 gap-2 px-6",
+} as const;
+
+type SelectTriggerSize = keyof typeof selectTriggerSizes;
+
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
@@ -22,21 +37,22 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
+  size?: SelectTriggerSize;
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit min-w-0 items-center justify-between rounded-md border bg-transparent py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        selectTriggerSizes[size],
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -97,7 +113,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
       )}
       {...props}
     >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
@@ -155,4 +171,6 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerSizes,
+  type SelectTriggerSize,
 };
diff --git a/apps/extension/src/components/ui/spinner.tsx b/apps/extension/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..2c6ff6d
--- /dev/null
+++ b/apps/extension/src/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { Loader2Icon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />;
+}
+
+export { Spinner };
diff --git a/apps/frontend/src/components/ui/button-group.tsx b/apps/frontend/src/components/ui/button-group.tsx
new file mode 100644
index 0000000..03b3380
--- /dev/null
+++ b/apps/frontend/src/components/ui/button-group.tsx
@@ -0,0 +1,81 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+/**
+ * The template's default SelectTrigger is h-10 to match Input, while the default Button
+ * is h-9. Inside a group they must share a height, so default-size triggers are pulled
+ * down to the button height here.
+ */
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>[data-slot=select-trigger][data-size=default]]:h-9 has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn("bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto", className)}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
diff --git a/apps/frontend/src/components/ui/empty.tsx b/apps/frontend/src/components/ui/empty.tsx
new file mode 100644
index 0000000..0a8b73c
--- /dev/null
+++ b/apps/frontend/src/components/ui/empty.tsx
@@ -0,0 +1,86 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="empty-title" className={cn("text-lg font-medium tracking-tight", className)} {...props} />;
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className)}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
diff --git a/apps/frontend/src/components/ui/input-group.tsx b/apps/frontend/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..51b5f47
--- /dev/null
+++ b/apps/frontend/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+/**
+ * Ported from shadcn. The template's Input wraps its `<input>` in a div, so the
+ * selectors below target descendant inputs (`[&_input]`) instead of direct children,
+ * and InputGroupInput styles the control through `inputClassName`.
+ */
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-10 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&_input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&_input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&_input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&_input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  // The addon behaves like a label: clicking it moves focus into the control. Keyboard
+  // users reach the control directly with Tab, so a key handler here would add nothing.
+  return (
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+});
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, inputClassName, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn("min-w-0 flex-1", className)}
+      inputClassName={cn(
+        "h-full rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        inputClassName,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
diff --git a/apps/frontend/src/components/ui/item.tsx b/apps/frontend/src/components/ui/item.tsx
new file mode 100644
index 0000000..b382a8a
--- /dev/null
+++ b/apps/frontend/src/components/ui/item.tsx
@@ -0,0 +1,158 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props} />
+  );
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0", className)} {...props} />;
+}
+
+const itemVariants = cva(
+  "group/item focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors [a]:hover:bg-accent/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};
diff --git a/apps/frontend/src/components/ui/kbd.tsx b/apps/frontend/src/components/ui/kbd.tsx
new file mode 100644
index 0000000..3076797
--- /dev/null
+++ b/apps/frontend/src/components/ui/kbd.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
+  return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };
diff --git a/apps/frontend/src/components/ui/native-select.tsx b/apps/frontend/src/components/ui/native-select.tsx
new file mode 100644
index 0000000..f184f36
--- /dev/null
+++ b/apps/frontend/src/components/ui/native-select.tsx
@@ -0,0 +1,92 @@
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Styled `<select>` for the cases where a native picker beats a Radix popover: short
+ * option lists, mobile browsers, dense tables. The browser arrow is removed with
+ * `appearance-none` and replaced by a chevron that sits in the same spot as the
+ * Select trigger's, so both components look identical side by side.
+ *
+ * Sizes mirror Input and SelectTrigger: xs h-6, sm h-8, default h-10, lg h-12. A native
+ * select centers its text on its own, so vertical padding stays small; `py-2` on a short
+ * control clips the glyphs.
+ */
+const nativeSelectSizes = {
+  xs: {
+    select: "h-6 py-0 pl-1.5 pr-7 text-xs",
+    icon: "right-1.5 size-3.5",
+  },
+  sm: {
+    select: "h-8 py-0 pl-3 pr-9",
+    icon: "right-3 size-4",
+  },
+  default: {
+    select: "h-10 py-1 pl-4 pr-10",
+    icon: "right-4 size-4",
+  },
+  lg: {
+    select: "h-12 py-2 pl-6 pr-12",
+    icon: "right-6 size-4",
+  },
+} as const;
+
+type NativeSelectSize = keyof typeof nativeSelectSizes;
+
+function NativeSelect({
+  className,
+  wrapperClassName,
+  size = "default",
+  ...props
+}: Omit<React.ComponentProps<"select">, "size"> & {
+  size?: NativeSelectSize;
+  wrapperClassName?: string;
+}) {
+  return (
+    <div
+      data-slot="native-select-wrapper"
+      data-size={size}
+      className={cn("group/native-select relative w-full has-[select:disabled]:opacity-50", wrapperClassName)}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className={cn(
+          "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 w-full min-w-0 appearance-none rounded-md border bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          nativeSelectSizes[size].select,
+          className,
+        )}
+        {...props}
+      />
+      <ChevronDownIcon
+        data-slot="native-select-icon"
+        aria-hidden="true"
+        className={cn(
+          "text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none",
+          nativeSelectSizes[size].icon,
+        )}
+      />
+    </div>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option data-slot="native-select-option" className={cn("bg-[Canvas] text-[CanvasText]", className)} {...props} />
+  );
+}
+
+function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, nativeSelectSizes, type NativeSelectSize };
diff --git a/apps/frontend/src/components/ui/select.tsx b/apps/frontend/src/components/ui/select.tsx
index 3f3cc81..dfc5fe8 100644
--- a/apps/frontend/src/components/ui/select.tsx
+++ b/apps/frontend/src/components/ui/select.tsx
@@ -4,6 +4,21 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Trigger sizes mirror the Input scale (xs h-6, sm h-8, default h-10, lg h-12) so a
+ * Select next to an Input in a form shares its height and horizontal padding. The
+ * chevron sits inside that padding, which keeps it the same distance from the border
+ * as the value text is from the left edge.
+ */
+const selectTriggerSizes = {
+  xs: "h-6 gap-1 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+  sm: "h-8 gap-2 px-3",
+  default: "h-10 gap-2 px-4",
+  lg: "h-12 gap-2 px-6",
+} as const;
+
+type SelectTriggerSize = keyof typeof selectTriggerSizes;
+
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
@@ -22,21 +37,22 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
+  size?: SelectTriggerSize;
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit min-w-0 items-center justify-between rounded-md border bg-transparent py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        selectTriggerSizes[size],
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-4 shrink-0 opacity-50" aria-hidden="true" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -97,7 +113,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
       )}
       {...props}
     >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="size-4" />
         </SelectPrimitive.ItemIndicator>
@@ -155,4 +171,6 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerSizes,
+  type SelectTriggerSize,
 };
diff --git a/apps/frontend/src/components/ui/spinner.tsx b/apps/frontend/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..2c6ff6d
--- /dev/null
+++ b/apps/frontend/src/components/ui/spinner.tsx
@@ -0,0 +1,10 @@
+import { Loader2Icon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return <Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />;
+}
+
+export { Spinner };

From 654f798e8a1208195faf220b73da4f48ed5746d1 Mon Sep 17 00:00:00 2001
From: Maciej Pyrc <maciekpyrc@gmail.com>
Date: Thu, 1 Oct 2026 13:45:24 +0200
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20tag=20the=20re?=
 =?UTF-8?q?adme=20links=20so=20template=20traffic=20shows=20up=20in=20anal?=
 =?UTF-8?q?ytics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 README.md | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index a1cc89b..27dfdce 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ npx @hype-stack/cli mcp install
 <h2 align="center">Deploy the entire stack with one command</h2>
 
 <p align="center">
-<a href="https://www.hype-stack.dev/docs/cli/deploy">
+<a href="https://www.hype-stack.dev/docs/cli/deploy?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/cli-deploy.png" alt="npx @hype-stack/cli deploy: services provisioned, environment variables set, migrations applied, backend, frontend and admin live" />
 </a>
 </p>
@@ -54,7 +54,7 @@ npx @hype-stack/cli deploy
 
 <p align="center">
 Frontend, admin, backend, Postgres, cache and storage, live on <a href="https://railway.app">Railway</a> or <a href="https://fly.io">Fly.io</a>.<br/>
-Mobile builds through EAS. The extension publishes to Chrome, Edge and Firefox. <a href="https://www.hype-stack.dev/docs/cli/deploy">Deploy docs</a>
+Mobile builds through EAS. The extension publishes to Chrome, Edge and Firefox. <a href="https://www.hype-stack.dev/docs/cli/deploy?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">Deploy docs</a>
 </p>
 
 &nbsp;
@@ -122,14 +122,14 @@ npx @hype-stack/cli community   # Scaffold, validate and install packs anyone wr
 npx @hype-stack/cli mcp install # Give your AI editor the same commands as tools
 ```
 
-No lock-in. No runtime dependency. Just code in your repo. Every command is documented in the [CLI docs](https://www.hype-stack.dev/docs/cli).
+No lock-in. No runtime dependency. Just code in your repo. Every command is documented in the [CLI docs](https://www.hype-stack.dev/docs/cli?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme).
 
 &nbsp;
 
 ## Use Feature Packs. Or Build Your Own.
 
 <p align="center">
-<a href="https://www.hype-stack.dev/packs">
+<a href="https://www.hype-stack.dev/packs?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/cli-compose.png" alt="Use feature packs or build your own: npx @hype-stack/cli compose writes 56 files into your repo across backend, frontend and admin" />
 </a>
 </p>
@@ -147,10 +147,10 @@ A pack covers every layer at once: routes, Prisma models, webhook handlers, fron
 | **Cookie Consent** | Banner and preferences. Free |
 
 <p align="center">
-<a href="https://www.hype-stack.dev/packs"><b>Browse packs</b></a> ·
-<a href="https://www.hype-stack.dev/docs/cli/add-pack"><b>Adding a pack</b></a> ·
-<a href="https://www.hype-stack.dev/build-your-own"><b>Write your own pack</b></a> ·
-<a href="https://www.hype-stack.dev/docs/packs-templates/pack-manifest"><b>Manifest reference</b></a>
+<a href="https://www.hype-stack.dev/packs?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Browse packs</b></a> ·
+<a href="https://www.hype-stack.dev/docs/cli/add-pack?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Adding a pack</b></a> ·
+<a href="https://www.hype-stack.dev/build-your-own?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Write your own pack</b></a> ·
+<a href="https://www.hype-stack.dev/docs/packs-templates/pack-manifest?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Manifest reference</b></a>
 </p>
 
 > 🔑 Premium packs need a license. Run `npx @hype-stack/cli login` to install the ones your organization owns. The base template, the Basic layout and the Cookie Consent pack are open source forever.
@@ -168,62 +168,62 @@ npx @hype-stack/cli template open-calendar
 <table>
 <tr>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/better-studio">
+<a href="https://www.hype-stack.dev/templates/better-studio?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/better-studio.jpg" alt="Better Studio" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/better-studio"><b>Better Studio</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/better-studio?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Better Studio</b></a><br/>
 <sub>Auth, billing and an app shell</sub>
 </td>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/open-calendar">
+<a href="https://www.hype-stack.dev/templates/open-calendar?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/open-calendar.jpg" alt="Open Calendar" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/open-calendar"><b>Open Calendar</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/open-calendar?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Open Calendar</b></a><br/>
 <sub>Scheduling and calendar</sub>
 </td>
 </tr>
 <tr>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/aether">
+<a href="https://www.hype-stack.dev/templates/aether?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/aether.jpg" alt="Aether" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/aether"><b>Aether</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/aether?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Aether</b></a><br/>
 <sub>AI agent chat</sub>
 </td>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/vault">
+<a href="https://www.hype-stack.dev/templates/vault?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/vault.jpg" alt="Vault" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/vault"><b>Vault</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/vault?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Vault</b></a><br/>
 <sub>Workflow automation</sub>
 </td>
 </tr>
 <tr>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/mind-map">
+<a href="https://www.hype-stack.dev/templates/mind-map?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/mind-map.jpg" alt="Mind Map" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/mind-map"><b>Mind Map</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/mind-map?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Mind Map</b></a><br/>
 <sub>Collaborative whiteboard</sub>
 </td>
 <td width="50%" align="center">
-<a href="https://www.hype-stack.dev/templates/indie-hacker">
+<a href="https://www.hype-stack.dev/templates/indie-hacker?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/templates/indie-hacker.jpg" alt="Indie Hacker Portfolio" />
 </a>
 <br/>
-<a href="https://www.hype-stack.dev/templates/indie-hacker"><b>Indie Hacker Portfolio</b></a><br/>
+<a href="https://www.hype-stack.dev/templates/indie-hacker?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>Indie Hacker Portfolio</b></a><br/>
 <sub>Portfolio with live revenue and a newsletter</sub>
 </td>
 </tr>
 </table>
 
 <p align="center">
-<a href="https://www.hype-stack.dev/templates"><b>All templates</b></a>
+<a href="https://www.hype-stack.dev/templates?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme"><b>All templates</b></a>
 </p>
 
 &nbsp;
@@ -247,19 +247,19 @@ npx @hype-stack/cli template open-calendar
 ## Built for AI Agents
 
 <p align="center">
-<a href="https://www.hype-stack.dev/mcp">
+<a href="https://www.hype-stack.dev/mcp?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/mcp-server.png" alt="npx @hype-stack/cli mcp install: 11 MCP tools for Cursor, Claude Code, Windsurf and Copilot" />
 </a>
 </p>
 
-The codebase follows a [vertical architecture](https://tkdodo.eu/blog/the-vertical-codebase): each feature owns its routes, UI, data access, types and tests. `create` writes rules for the editor you pick, and the CLI runs as an MCP server so your agent can search the catalog, plan an install, add packs and set up the project. [MCP docs](https://www.hype-stack.dev/docs/cli/mcp)
+The codebase follows a [vertical architecture](https://tkdodo.eu/blog/the-vertical-codebase): each feature owns its routes, UI, data access, types and tests. `create` writes rules for the editor you pick, and the CLI runs as an MCP server so your agent can search the catalog, plan an install, add packs and set up the project. [MCP docs](https://www.hype-stack.dev/docs/cli/mcp?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme)
 
 &nbsp;
 
 ## One Backend, Five Clients
 
 <p align="center">
-<a href="https://www.hype-stack.dev/application">
+<a href="https://www.hype-stack.dev/application?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme">
 <img src="./.github/assets/five-clients.png" alt="Web, desktop, admin, mobile and extension apps sharing one typed Hono backend" />
 </a>
 </p>
@@ -323,7 +323,7 @@ pnpm typecheck        # Full type checking
 pnpm test             # Run all tests (backend: pnpm test:setup first)
 ```
 
-Full setup, environment variables and troubleshooting live in the [docs](https://www.hype-stack.dev/docs).
+Full setup, environment variables and troubleshooting live in the [docs](https://www.hype-stack.dev/docs?utm_source=hype-stack&utm_medium=referral&utm_campaign=readme).
 
 &nbsp;