livemark 0.25.0 → 0.27.0

package/source/components/Toc.tsx

@@ -1,6 +1,9 @@
-import { ChevronDown } from "lucide-react"
-import { useEffect, useRef, useState, type ReactNode } from "react"
+import { ChevronUp } from "lucide-react"
+import { useEffect, useRef, useState, type MouseEvent, type ReactNode } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../elements/tabs.tsx"
 import type { TocItem } from "../models/toc.ts"
+import { ChoiceList, type Choice } from "./ChoiceList.tsx"
+import { SheetPanel } from "./SheetPanel.tsx"
 
 export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   const activeId = useActiveHeading(props.items)
@@ -10,7 +13,12 @@ export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   return (
     <aside className="hidden xl:block w-56 shrink-0">
       <div className="sticky top-20 max-h-[calc(100vh-5rem)] overflow-auto [scrollbar-width:none]">
-        {props.children}
+        {props.children && (
+          <div className="mb-6">
+            <p className="text-sm font-medium mb-3">Actions</p>
+            {props.children}
+          </div>
+        )}
         {props.items.length > 0 && (
           <nav>
             <p className="text-sm font-medium mb-3">Contents</p>
@@ -34,74 +42,87 @@ export function Toc(props: { items: TocItem[]; children?: ReactNode }) {
   )
 }
 
-/** Mobile-only sticky secondary bar showing the active heading and an
- * overlay dropdown with the Contents + page Actions. */
-export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
+const SHEET_ACTIONS =
+  "[&_[data-slot=page-toolbar]]:-mx-2 [&_[data-slot=page-toolbar]]:gap-0.5 [&_[data-slot=page-action]]:h-10 [&_[data-slot=page-action]]:gap-2.5 [&_[data-slot=page-action]]:rounded-control [&_[data-slot=page-action]]:px-2 [&_[data-slot=page-action]]:text-base [&_[data-slot=page-action]]:text-foreground [&_[data-slot=page-action]:hover]:bg-muted [&_[data-slot=page-action]_svg]:size-[18px]"
+
+/** Mobile-only sticky secondary bar showing the active heading; it opens a
+ * bottom sheet with the Contents and page Actions as two tabs. */
+export function MobileToc(props: {
+  items: TocItem[]
+  title?: string
+  children?: ReactNode
+}) {
   const activeId = useActiveHeading(props.items)
   const [open, setOpen] = useState(false)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const onPointerDown = (event: MouseEvent) => {
-      if (!wrapperRef.current?.contains(event.target as Node)) setOpen(false)
-    }
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false)
-    }
-    document.addEventListener("mousedown", onPointerDown)
-    document.addEventListener("keydown", onKey)
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown)
-      document.removeEventListener("keydown", onKey)
-    }
-  }, [open])
+  const [tab, setTab] = useState(props.items.length > 0 ? "contents" : "actions")
+  const pendingUrl = useRef<string | null>(null)
 
   if (props.items.length === 0 && !props.children) return null
 
   const active = props.items.find(item => item.url.slice(1) === activeId)
   const title = active?.title ?? props.items[0]?.title ?? "Contents"
+  const choices: Choice[] = props.items.map(item => ({
+    id: item.url.slice(1),
+    label: item.title,
+    href: item.url,
+    depth: Math.max(0, item.depth - 2),
+  }))
+
+  // The sheet locks page scroll until it has closed, which swallows a native hash
+  // jump made from inside it; navigate once the close has finished.
+  const handleSelect = (choice: Choice, event: MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    pendingUrl.current = choice.href ?? null
+    setOpen(false)
+  }
+
+  const handleOpenChangeComplete = (isOpen: boolean) => {
+    const url = pendingUrl.current
+    if (isOpen || !url) return
+    pendingUrl.current = null
+    history.pushState(null, "", url)
+    document.getElementById(url.slice(1))?.scrollIntoView()
+  }
+
+  const contents = (
+    <ChoiceList choices={choices} selectedId={activeId} onSelect={handleSelect} />
+  )
 
   return (
-    <div ref={wrapperRef} className="xl:hidden sticky top-16 z-20 border-b bg-background">
+    <div className="xl:hidden sticky top-16 z-20 border-b bg-background">
       <button
         type="button"
-        onClick={() => setOpen(v => !v)}
-        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
         className="flex w-full items-center gap-3 px-4 py-3 text-sm text-muted-foreground"
       >
         <ScrollProgressRing />
         <span className="truncate flex-1 text-left">{title}</span>
-        <ChevronDown
-          className={`size-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
-        />
+        <ChevronUp className="size-4 shrink-0" />
       </button>
-      {open && (
-        <div className="absolute top-full left-0 right-0 mt-px max-h-[calc(100vh-8rem)] overflow-auto border-b bg-background shadow-md animate-in slide-in-from-top-2 fade-in-0 duration-200">
-          <div className="space-y-4 px-4 pt-4 pb-4">
-            {props.children}
-            {props.items.length > 0 && (
-              <nav>
-                <p className="mb-2 text-sm font-medium">Contents</p>
-                <ul className="border-l border-border text-sm">
-                  {props.items.map(item => (
-                    <li key={item.url}>
-                      <a
-                        href={item.url}
-                        data-active={activeId === item.url.slice(1) || undefined}
-                        onClick={() => setOpen(false)}
-                        className={`-ms-px block border-l border-transparent py-1.5 text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:font-medium data-[active]:text-primary ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
-                      >
-                        {item.title}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            )}
-          </div>
-        </div>
-      )}
+      <SheetPanel
+        open={open}
+        onOpenChange={setOpen}
+        onOpenChangeComplete={handleOpenChangeComplete}
+        title={props.title ?? "On this page"}
+      >
+        {props.children && props.items.length > 0 ? (
+          <Tabs value={tab} onValueChange={value => setTab(String(value))}>
+            <TabsList className="mb-2 w-full">
+              <TabsTrigger value="contents">Contents</TabsTrigger>
+              <TabsTrigger value="actions">Actions</TabsTrigger>
+            </TabsList>
+            <TabsContent value="contents">{contents}</TabsContent>
+            <TabsContent value="actions" className={SHEET_ACTIONS}>
+              {props.children}
+            </TabsContent>
+          </Tabs>
+        ) : props.children ? (
+          <div className={SHEET_ACTIONS}>{props.children}</div>
+        ) : (
+          contents
+        )}
+      </SheetPanel>
     </div>
   )
 }

package/source/components/YouTube.tsx

@@ -1,7 +1,7 @@
 /** Renders a responsive YouTube iframe embed */
 export function YouTube(props: { id: string }) {
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border">
+    <div className="not-prose my-4 overflow-hidden rounded-card border">
       <div className="aspect-video">
         <iframe
           className="h-full w-full"

package/source/content/article.ts

@@ -1,7 +1,12 @@
 import { config } from "livemark:virtual"
 import { allArticles } from "content-collections"
 import type { ArticleNode } from "../models/article.ts"
-import { buildArticleTree, flattenArticleTree } from "../helpers/article.ts"
+import {
+  buildArticleTree,
+  compareArticleDate,
+  compareArticleOrder,
+  flattenArticleTree,
+} from "../helpers/article.ts"
 import { matchSection, partitionBySection } from "../helpers/section.ts"
 
 /**
@@ -9,9 +14,7 @@ import { matchSection, partitionBySection } from "../helpers/section.ts"
  * positive values first (ascending), then unordered, then negative values
  * (so `order: -1` lands at the very end, `-2` just before it, and so on).
  */
-export const sortedArticles = [...allArticles].sort(
-  (a, b) => orderKey(a.order) - orderKey(b.order),
-)
+export const sortedArticles = [...allArticles].sort(compareArticleOrder)
 
 /** The article whose path is `/`, if any (rendered in place at the root) */
 export const homeArticle = sortedArticles.find(a => a.path === "/")
@@ -25,12 +28,6 @@ export const flatArticles = flattenArticleTree(articleTree)
 /** The first article in sidebar order, used as the default landing page */
 export const firstArticle = sortedArticles.find(a => a.path === flatArticles[0])
 
-function orderKey(order?: number) {
-  if (order === undefined) return Number.MAX_SAFE_INTEGER / 2
-  if (order < 0) return Number.MAX_SAFE_INTEGER + order
-  return order
-}
-
 const configSections = config.sections
 
 /** Route-bound sections (everything except `custom`). Custom sections
@@ -53,9 +50,7 @@ if (routedSections.length) {
     const section = sectionByPrefix.get(key)
     const sorted =
       section?.type === "blog" || section?.type === "changelog"
-        ? [...bucket].sort(
-            (a, b) => new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
-          )
+        ? [...bucket].sort(compareArticleDate)
         : bucket
     const tree = buildArticleTree(sorted)
     const flat = flattenArticleTree(tree)

package/source/content-collections.ts

@@ -49,6 +49,7 @@ import { transformerIcon } from "./plugins/shiki-icon.ts"
 import { resolveAssetPath } from "./helpers/resolve-asset-path.ts"
 import { resolveIncludes } from "./helpers/resolve-includes.ts"
 import { extractSearchText } from "./helpers/search-text.ts"
+import { stripLeadingH1 } from "./helpers/llms.ts"
 import { extractToc } from "./helpers/toc.ts"
 
 const config = await loadConfig()
@@ -98,10 +99,6 @@ function getLastUpdated(filePath: string) {
   }
 }
 
-function stripLeadingH1(content: string) {
-  return content.replace(/^[ \t]*#\s+[^\n]*\n+/, "")
-}
-
 function extractTitle(content: string, path: string) {
   const match = /^#\s+(.+)$/m.exec(content)
   if (match) return match[1]!
@@ -183,6 +180,10 @@ const articles = defineCollection({
                 light: config.codeThemeLight,
                 dark: config.codeThemeDark,
               },
+              // A fence with no or an unknown lang is otherwise skipped by Shiki and
+              // renders without line padding, theme colours or transformers.
+              defaultLanguage: "text",
+              fallbackLanguage: "text",
               // Darken catppuccin-latte's green (the colour used for strings and
               // some comments) — the theme default #40A02B lands at 3.2:1 on the
               // code-block background, below the WCAG AA 4.5:1 threshold.

package/source/elements/alert-dialog.tsx

@@ -46,7 +46,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-panel bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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",
           className,
         )}
         {...props}

package/source/elements/alert.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "cn"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "grid gap-0.5 rounded-card border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
   {
     variants: {
       variant: {

package/source/elements/badge.tsx

@@ -12,6 +12,10 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
           "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        positive:
+          "bg-positive/10 [a]:hover:bg-positive/20 focus-visible:ring-positive/20 dark:focus-visible:ring-positive/40 text-positive-tint-foreground dark:bg-positive/20",
+        warning:
+          "bg-warning/10 [a]:hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 text-warning-tint-foreground dark:bg-warning/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",

package/source/elements/button-group.tsx

@@ -6,14 +6,14 @@ import { cn } from "cn"
 import { Separator } from "./separator.tsx"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 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",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-control [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-control! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
         vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-control! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
@@ -48,7 +48,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 rounded-control border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className,
         ),
       },

package/source/elements/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "cn"
 
 const buttonVariants = cva(
-  "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:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "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:aria-invalid:border-destructive/50 rounded-control border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
@@ -16,19 +16,23 @@ const buttonVariants = cva(
           "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
         destructive:
           "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        positive:
+          "bg-positive/10 hover:bg-positive/20 focus-visible:ring-positive/20 dark:focus-visible:ring-positive/40 dark:bg-positive/20 text-positive-tint-foreground focus-visible:border-positive/40 dark:hover:bg-positive/30",
+        warning:
+          "bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/20 text-warning-tint-foreground focus-visible:border-warning/40 dark:hover:bg-warning/30",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default:
-          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-control has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-control-xs px-2 text-xs in-data-[slot=button-group]:rounded-control has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-control-sm px-2.5 in-data-[slot=button-group]:rounded-control has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
         lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
         icon: "size-9",
         "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+          "size-6 rounded-control-xs in-data-[slot=button-group]:rounded-control [&_svg:not([class*='size-'])]:size-3",
         "icon-sm":
-          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+          "size-8 rounded-control-sm in-data-[slot=button-group]:rounded-control",
         "icon-lg": "size-10",
       },
     },

package/source/elements/calendar.tsx

@@ -79,7 +79,7 @@ function Calendar({
             : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label,
         ),
-        table: "w-full border-collapse",
+        month_grid: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",

package/source/elements/card.tsx

@@ -11,7 +11,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+        "ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-card py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-card *:[img:last-child]:rounded-b-card group/card flex flex-col",
         className,
       )}
       {...props}
@@ -24,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        "gap-1 rounded-t-card px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
         className,
       )}
       {...props}
@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center",
+        "rounded-b-card px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center",
         className,
       )}
       {...props}

package/source/elements/command.tsx

@@ -17,7 +17,7 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        "flex size-full flex-col overflow-hidden rounded-menu! bg-popover p-1 text-popover-foreground",
         className,
       )}
       {...props}
@@ -50,7 +50,10 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-panel! p-0",
+          className,
+        )}
         showCloseButton={showCloseButton}
       >
         <Command shouldFilter={shouldFilter} loop={loop}>
@@ -71,7 +74,7 @@ function CommandInput({
   const showClear = !!props.value
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-2">
-      <InputGroup className="h-12! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-3!">
+      <InputGroup className="h-12! rounded-control! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-3!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -164,7 +167,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none bg-muted/50 in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-primary/10 data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:**:[svg]:text-foreground",
+        "group/command-item relative flex cursor-pointer items-center gap-2 rounded-menu-item px-2 py-1.5 text-sm outline-hidden select-none bg-muted/50 in-data-[slot=dialog-content]:rounded-menu-item! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-primary/10 data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[selected=true]:**:[svg]:text-foreground",
         className,
       )}
       {...props}

package/source/elements/context-menu.tsx

@@ -46,7 +46,7 @@ function ContextMenuContent({
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
           className={cn(
-            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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",
+            "cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-menu bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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",
             className,
           )}
           {...props}
@@ -95,7 +95,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-menu-item px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className,
       )}
       {...props}
@@ -120,7 +120,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-menu-item px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -158,7 +158,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-menu-item py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -193,7 +193,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-menu-item py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/source/elements/dialog.tsx

@@ -46,7 +46,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-panel p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
           className,
         )}
         {...props}