@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/rich-text-editor.js

@@ -1,4 +1,31 @@
-// src/components/ui/rich-text-editor.tsx
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-JVLUBAPB.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from "./chunk-3T65TLJX.js";
+import {
+  Input
+} from "./chunk-MEKCCOP5.js";
+import "./chunk-3ACQVT7A.js";
+import {
+  Button
+} from "./chunk-B4H6RNDH.js";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/rich-text-editor.tsx
 import { Color } from "@tiptap/extension-color";
 import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
@@ -26,358 +53,7 @@ import {
   Undo2
 } from "lucide-react";
 import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/dropdown-menu.tsx
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { cva as cva2 } from "class-variance-authority";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function DropdownMenu({
-  children,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(SizeProvider, { size, children: /* @__PURE__ */ jsx3(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, children }) });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-var dropdownMenuContentVariants = cva2(
-  "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-  {
-    variants: {
-      size: {
-        sm: "rounded-lg p-1",
-        md: "rounded-xl p-1.5",
-        lg: "rounded-[18px] p-2"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var dropdownMenuItemVariants = cva2(
-  "group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
-        md: "gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
-        lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var dropdownMenuLabelVariants = cva2(
-  "font-medium text-fg-secondary data-inset:pl-8",
-  {
-    variants: {
-      size: {
-        sm: "px-3 py-1 text-gdt-xs",
-        md: "px-3 py-1 text-gdt-xs",
-        lg: "px-4 py-1.5 text-gdt-sm"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize();
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
-    MenuPrimitive.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx3(
-        MenuPrimitive.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          "data-size": resolvedSize,
-          className: cn(
-            dropdownMenuContentVariants({ size: resolvedSize }),
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuRadioGroup({ ...props }) {
-  return /* @__PURE__ */ jsx3(
-    MenuPrimitive.RadioGroup,
-    {
-      "data-slot": "dropdown-menu-radio-group",
-      ...props
-    }
-  );
-}
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}) {
-  const resolvedSize = useComponentSize();
-  return /* @__PURE__ */ jsxs2(
-    MenuPrimitive.RadioItem,
-    {
-      "data-slot": "dropdown-menu-radio-item",
-      "data-inset": inset,
-      "data-size": resolvedSize,
-      className: cn(
-        dropdownMenuItemVariants({ size: resolvedSize }),
-        "pr-10 data-inset:pl-8",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
-            "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx3(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, {}) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/input.tsx
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cva as cva3 } from "class-variance-authority";
-
-// src/components/ui/input-size-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
-var InputSizeContext = createContext2(
-  void 0
-);
-function useInputComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext2(InputSizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/input.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var inputVariants = cva3(
-  "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-        md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-        lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-        xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function Input({ className, size, type, ...props }) {
-  const resolvedSize = useInputComponentSize(size);
-  return /* @__PURE__ */ jsx5(
-    InputPrimitive,
-    {
-      type,
-      "data-slot": "input",
-      "data-size": resolvedSize,
-      className: cn(inputVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs3(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx6(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx6(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-// src/components/ui/rich-text-editor.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var SIZES = {
   sm: {
     width: "max-w-[420px]",
@@ -414,13 +90,13 @@ var SIZES = {
   }
 };
 var TEXT_COLORS = [
-  { label: "Default", value: "" },
-  { label: "Forest", value: "#2f5a2c" },
-  { label: "Brass", value: "#b8861a" },
-  { label: "Clay", value: "#b2542b" },
-  { label: "Moss", value: "#4e4d29" },
-  { label: "Stone", value: "#5c5648" },
-  { label: "Ink", value: "#1f1c18" }
+  { label: "Default", value: "", swatch: "" },
+  { label: "Forest", value: "#2f5a2c", swatch: "var(--color-forest-500)" },
+  { label: "Brass", value: "#b8861a", swatch: "var(--color-brass-400)" },
+  { label: "Clay", value: "#b2542b", swatch: "var(--color-clay-500)" },
+  { label: "Moss", value: "#4e4d29", swatch: "var(--color-moss-500)" },
+  { label: "Stone", value: "#5c5648", swatch: "var(--color-stone-600)" },
+  { label: "Ink", value: "#1f1c18", swatch: "var(--color-stone-900)" }
 ];
 var BLOCK_OPTIONS = [
   { value: "paragraph", label: "Normal" },
@@ -448,7 +124,7 @@ function ToolbarButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -464,7 +140,7 @@ function ToolbarButton({
   );
 }
 function ToolbarDivider({ tokens }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "aria-hidden": "true",
@@ -479,28 +155,39 @@ function BlockControl({
   onChange
 }) {
   const current = BLOCK_OPTIONS.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
         disabled,
-        onMouseDown: (event) => event.preventDefault(),
         className: cn(
           toolbarControlClass(tokens),
           "w-auto justify-between gap-1 px-2"
         ),
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: current?.label ?? "Normal" }),
-          /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5 opacity-70" })
+          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: current?.label ?? "Normal" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-70" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-40", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-40", children: /* @__PURE__ */ jsx(
       DropdownMenuRadioGroup,
       {
         value,
         onValueChange: (next) => onChange(next),
-        children: BLOCK_OPTIONS.map((option) => /* @__PURE__ */ jsx7(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value))
+        children: BLOCK_OPTIONS.map((option) => (
+          // closeOnClick: radio items keep the menu open by default, which
+          // leaves the popup backdrop blocking the toolbar after a pick.
+          /* @__PURE__ */ jsx(
+            DropdownMenuRadioItem,
+            {
+              value: option.value,
+              closeOnClick: true,
+              children: option.label
+            },
+            option.value
+          )
+        ))
       }
     ) })
   ] });
@@ -513,8 +200,8 @@ function ColorControl({
 }) {
   const [open, setOpen] = React.useState(false);
   const active = value !== "";
-  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
         disabled,
@@ -522,9 +209,9 @@ function ColorControl({
         title: "Text colour",
         onMouseDown: (event) => event.preventDefault(),
         className: toolbarControlClass(tokens, false),
-        children: /* @__PURE__ */ jsxs4("span", { className: "relative inline-flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx7(Baseline, { className: active ? "text-fg-brand" : void 0 }),
-          /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(Baseline, { className: active ? "text-fg-brand" : void 0 }),
+          /* @__PURE__ */ jsx(
             "span",
             {
               "aria-hidden": "true",
@@ -535,16 +222,16 @@ function ColorControl({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx(
       PopoverContent,
       {
         showArrow: false,
         align: "start",
         sideOffset: 8,
         className: "w-auto py-3",
-        children: /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-2 px-4", children: TEXT_COLORS.map((color) => {
+        children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2 px-4", children: TEXT_COLORS.map((color) => {
           const isSelected = color.value === value;
-          return /* @__PURE__ */ jsx7(
+          return /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -560,14 +247,17 @@ function ColorControl({
                 "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus",
                 isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"
               ),
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
                     "flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold",
                     color.value === "" && "text-fg-secondary"
                   ),
-                  style: color.value ? { backgroundColor: color.value, color: "#fff" } : void 0,
+                  style: color.value ? {
+                    backgroundColor: color.swatch,
+                    color: "var(--color-stone-0, #fff)"
+                  } : void 0,
                   children: "A"
                 }
               )
@@ -600,8 +290,8 @@ function LinkControl({
     else onRemove();
     setOpen(false);
   }
-  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
         disabled,
@@ -610,11 +300,11 @@ function LinkControl({
         "aria-pressed": active,
         onMouseDown: (event) => event.preventDefault(),
         className: toolbarControlClass(tokens, active),
-        children: /* @__PURE__ */ jsx7(Link2, {})
+        children: /* @__PURE__ */ jsx(Link2, {})
       }
     ),
-    /* @__PURE__ */ jsx7(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs4("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx(
         Input,
         {
           autoFocus: true,
@@ -625,8 +315,8 @@ function LinkControl({
           onChange: (event) => setHref(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(
           Button,
           {
             type: "button",
@@ -640,11 +330,56 @@ function LinkControl({
             children: "Remove"
           }
         ),
-        /* @__PURE__ */ jsx7(Button, { type: "submit", size: "sm", children: "Apply" })
+        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: "Apply" })
       ] })
     ] }) })
   ] });
 }
+function ImageControl({
+  tokens,
+  disabled,
+  onInsert
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [src, setSrc] = React.useState("");
+  function handleOpenChange(next) {
+    if (next) setSrc("");
+    setOpen(next);
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    const trimmed = src.trim();
+    if (trimmed) onInsert(trimmed);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        disabled,
+        "aria-label": "Insert image",
+        title: "Insert image",
+        onMouseDown: (event) => event.preventDefault(),
+        className: toolbarControlClass(tokens, false),
+        children: /* @__PURE__ */ jsx(ImageIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          size: "sm",
+          type: "url",
+          placeholder: "https://example.com/image.jpg",
+          value: src,
+          onChange: (event) => setSrc(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !src.trim(), children: "Insert" }) })
+    ] }) })
+  ] });
+}
 var ALIGN_OPTIONS = [
   { value: "left", label: "Left", Icon: AlignLeft },
   { value: "center", label: "Center", Icon: AlignCenter },
@@ -659,28 +394,35 @@ function AlignControl({
 }) {
   const current = ALIGN_OPTIONS.find((option) => option.value === value);
   const Icon = current?.Icon ?? AlignLeft;
-  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
       DropdownMenuTrigger,
       {
         disabled,
         "aria-label": "Text alignment",
         title: "Text alignment",
-        onMouseDown: (event) => event.preventDefault(),
         className: toolbarControlClass(tokens, value !== "left"),
-        children: /* @__PURE__ */ jsx7(Icon, {})
+        children: /* @__PURE__ */ jsx(Icon, {})
       }
     ),
-    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-36", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-36", children: /* @__PURE__ */ jsx(
       DropdownMenuRadioGroup,
       {
         value,
         onValueChange: (next) => onChange(next),
         children: ALIGN_OPTIONS.map(
-          ({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs4(DropdownMenuRadioItem, { value: optionValue, children: [
-            /* @__PURE__ */ jsx7(OptionIcon, {}),
-            label
-          ] }, optionValue)
+          ({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs(
+            DropdownMenuRadioItem,
+            {
+              value: optionValue,
+              closeOnClick: true,
+              children: [
+                /* @__PURE__ */ jsx(OptionIcon, {}),
+                label
+              ]
+            },
+            optionValue
+          )
         )
       }
     ) })
@@ -798,11 +540,10 @@ function RichTextEditor({
   function removeLink() {
     editor?.chain().focus().extendMarkRange("link").unsetLink().run();
   }
-  function insertImage() {
-    const url = window.prompt("Image URL");
-    if (url) editor?.chain().focus().setImage({ src: url }).run();
+  function insertImage(src) {
+    editor?.chain().focus().setImage({ src }).run();
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "rich-text-editor",
@@ -815,7 +556,7 @@ function RichTextEditor({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             role: "toolbar",
@@ -827,7 +568,7 @@ function RichTextEditor({
               tokens.toolbarGap
             ),
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 BlockControl,
                 {
                   tokens,
@@ -836,7 +577,7 @@ function RichTextEditor({
                   onChange: setBlock
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -844,10 +585,10 @@ function RichTextEditor({
                   active: s.isBold,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleBold().run(),
-                  children: /* @__PURE__ */ jsx7(Bold, {})
+                  children: /* @__PURE__ */ jsx(Bold, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -855,10 +596,10 @@ function RichTextEditor({
                   active: s.isItalic,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleItalic().run(),
-                  children: /* @__PURE__ */ jsx7(Italic, {})
+                  children: /* @__PURE__ */ jsx(Italic, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -866,10 +607,10 @@ function RichTextEditor({
                   active: s.isUnderline,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleUnderline().run(),
-                  children: /* @__PURE__ */ jsx7(Underline, {})
+                  children: /* @__PURE__ */ jsx(Underline, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ColorControl,
                 {
                   tokens,
@@ -878,8 +619,8 @@ function RichTextEditor({
                   onChange: setColor
                 }
               ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -887,10 +628,10 @@ function RichTextEditor({
                   active: s.isOrderedList,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-                  children: /* @__PURE__ */ jsx7(ListOrdered, {})
+                  children: /* @__PURE__ */ jsx(ListOrdered, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -898,10 +639,10 @@ function RichTextEditor({
                   active: s.isBulletList,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleBulletList().run(),
-                  children: /* @__PURE__ */ jsx7(List, {})
+                  children: /* @__PURE__ */ jsx(List, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 AlignControl,
                 {
                   tokens,
@@ -910,8 +651,8 @@ function RichTextEditor({
                   onChange: setAlign
                 }
               ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx(
                 LinkControl,
                 {
                   tokens,
@@ -922,7 +663,7 @@ function RichTextEditor({
                   onRemove: removeLink
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -930,10 +671,10 @@ function RichTextEditor({
                   active: s.isBlockquote,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-                  children: /* @__PURE__ */ jsx7(Quote, {})
+                  children: /* @__PURE__ */ jsx(Quote, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
@@ -941,45 +682,43 @@ function RichTextEditor({
                   active: s.isCodeBlock,
                   disabled,
                   onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
-                  children: /* @__PURE__ */ jsx7(Code2, {})
+                  children: /* @__PURE__ */ jsx(Code2, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
+              /* @__PURE__ */ jsx(
+                ImageControl,
                 {
                   tokens,
-                  label: "Insert image",
                   disabled,
-                  onClick: insertImage,
-                  children: /* @__PURE__ */ jsx7(ImageIcon, {})
+                  onInsert: insertImage
                 }
               ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
                   label: "Undo",
                   disabled: disabled || !s.canUndo,
                   onClick: () => editor?.chain().focus().undo().run(),
-                  children: /* @__PURE__ */ jsx7(Undo2, {})
+                  children: /* @__PURE__ */ jsx(Undo2, {})
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   tokens,
                   label: "Redo",
                   disabled: disabled || !s.canRedo,
                   onClick: () => editor?.chain().focus().redo().run(),
-                  children: /* @__PURE__ */ jsx7(Redo2, {})
+                  children: /* @__PURE__ */ jsx(Redo2, {})
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx7("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
+        /* @__PURE__ */ jsx(
           EditorContent,
           {
             editor,