fix

Author: CasJam

app/frontend/components/design-system/sections/elements/DropdownMenuSection.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import {
   ChevronDown,
-  CircleEllipsis,
+  Ellipsis,
   LogOut,
   Settings,
   Trash2,
@@ -24,7 +24,7 @@ const code = `import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ChevronDown, CircleEllipsis, LogOut, Settings, Trash2, User, Users } from "lucide-react";
+import { ChevronDown, Ellipsis, LogOut, Settings, Trash2, User, Users } from "lucide-react";
 
 {/* Button trigger */}
 <DropdownMenu>
@@ -44,7 +44,7 @@ import { ChevronDown, CircleEllipsis, LogOut, Settings, Trash2, User, Users } fr
 
 {/* Item settings dropdown — the standard pattern for row-level
     "edit / archive / delete" overflow menus. Bare button (no border or
-    background), CircleEllipsis icon at strokeWidth 1.5, ink-muted with
+    background), Ellipsis icon at strokeWidth 1.5, ink-muted with
     hover:ink-body. */}
 <DropdownMenu>
   <DropdownMenuTrigger asChild>
@@ -53,7 +53,7 @@ import { ChevronDown, CircleEllipsis, LogOut, Settings, Trash2, User, Users } fr
       aria-label="Settings"
       className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
     >
-      <CircleEllipsis className="h-4 w-4" strokeWidth={1.5} />
+      <Ellipsis className="h-4 w-4" strokeWidth={1.5} />
     </button>
   </DropdownMenuTrigger>
   <DropdownMenuContent align="end">
@@ -126,7 +126,7 @@ export function DropdownMenuSection() {
                   aria-label="Settings"
                   className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
                 >
-                  <CircleEllipsis className="h-4 w-4" strokeWidth={1.5} />
+                  <Ellipsis className="h-4 w-4" strokeWidth={1.5} />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
@@ -175,7 +175,7 @@ export function DropdownMenuSection() {
             <strong>Item settings dropdown — standard pattern.</strong> For
             row-level "edit / archive / delete" overflow menus on listings or
             single-item views, always use this exact trigger:{" "}
-            <code>CircleEllipsis</code> icon, <code>strokeWidth={1.5}</code>,
+            <code>Ellipsis</code> icon, <code>strokeWidth={1.5}</code>,
             no border or background, <code>text-ink-muted</code> with{" "}
             <code>hover:text-ink-body</code>. Use <code>h-4 w-4</code> on
             listing rows; bump to <code>h-6 w-6</code> when used in a page

app/frontend/components/design-system/sections/elements/ListingsSection.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ChevronRight, CircleEllipsis, Folder } from "lucide-react";
+import { ChevronRight, Ellipsis, Folder } from "lucide-react";
 
 const code = `<ul className="divide-y divide-hairline overflow-hidden rounded-md border border-hairline bg-page">
   {items.map((item) => (
@@ -28,7 +28,7 @@ const code = `<ul className="divide-y divide-hairline overflow-hidden rounded-md
               aria-label="Settings"
               className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
             >
-              <CircleEllipsis className="h-4 w-4" strokeWidth={1.5} />
+              <Ellipsis className="h-4 w-4" strokeWidth={1.5} />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
@@ -57,7 +57,7 @@ function DemoSettingsMenu() {
           aria-label="Settings"
           className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
         >
-          <CircleEllipsis className="h-4 w-4" strokeWidth={1.5} />
+          <Ellipsis className="h-4 w-4" strokeWidth={1.5} />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -129,7 +129,7 @@ export function ListingsSection() {
             items in a collection (the typical case), include our standard
             settings dropdown at the right edge of each row — see{" "}
             <a href="#dropdown-menu">Dropdown menu</a> for the trigger pattern
-            (bare <code>CircleEllipsis</code>, no border).
+            (bare <code>Ellipsis</code>, no border).
           </li>
         </ul>
       }

app/frontend/components/design-system/sections/structure/PageHeadersSection.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Bell, CircleEllipsis, Search } from "lucide-react";
+import { Bell, Ellipsis, Search } from "lucide-react";
 
 const code = `{/* Basic — title row only */}
 <div className="border-b border-hairline pb-6">
@@ -29,7 +29,7 @@ const code = `{/* Basic — title row only */}
 </div>
 
 {/* Single-item view — page title with the standard item settings dropdown
-    in the right slot. The CircleEllipsis trigger uses h-6 w-6 here (larger
+    in the right slot. The Ellipsis trigger uses h-6 w-6 here (larger
     than the h-4 w-4 used in listing rows). */}
 <div className="border-b border-hairline pb-6">
   <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
@@ -44,7 +44,7 @@ const code = `{/* Basic — title row only */}
             aria-label="Settings"
             className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
           >
-            <CircleEllipsis className="h-6 w-6" strokeWidth={1.5} />
+            <Ellipsis className="h-6 w-6" strokeWidth={1.5} />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -173,7 +173,7 @@ export function PageHeadersSection() {
                         aria-label="Settings"
                         className="inline-flex cursor-pointer items-center justify-center text-ink-muted transition-colors hover:text-ink-body focus:outline-none focus-visible:text-ink-body"
                       >
-                        <CircleEllipsis
+                        <Ellipsis
                           className="h-6 w-6"
                           strokeWidth={1.5}
                         />
@@ -246,7 +246,7 @@ export function PageHeadersSection() {
             <strong>Single-item view</strong>: when viewing one item from a
             collection, the right slot should hold our standard settings
             dropdown — see <a href="#dropdown-menu">Dropdown menu</a>. Use{" "}
-            <code>h-6 w-6</code> on the <code>CircleEllipsis</code> here
+            <code>h-6 w-6</code> on the <code>Ellipsis</code> here
             (one size larger than in listing rows) to match the page
             header's heavier visual weight.
           </li>