livemark 0.7.2 → 0.8.0

package/{build/website → source}/components/Layout.tsx

@@ -17,9 +17,6 @@ import {
 } from "../elements/sidebar.tsx"
 import { BackToTop } from "./BackToTop.tsx"
 import { Banner } from "./Banner.tsx"
-import { BlogSidebar } from "./BlogSidebar.tsx"
-import { ChangelogSidebar } from "./ChangelogSidebar.tsx"
-import { MiniSidebar } from "./MiniSidebar.tsx"
 import { Sidebar } from "./Sidebar.tsx"
 import { SiteTitle } from "./SiteTitle.tsx"
 
@@ -147,20 +144,12 @@ export function Layout(props: {
     </header>
   )
 
-  const SidebarComponent = !props.withSidebar
-    ? MiniSidebar
-    : activeSection?.type === "blog"
-      ? BlogSidebar
-      : activeSection?.type === "changelog"
-        ? ChangelogSidebar
-        : Sidebar
-
   return (
     <SidebarProvider
       key={props.withSidebar ? "sidebar" : "mini"}
       defaultOpen={!!props.withSidebar}
     >
-      <SidebarShell SidebarComponent={SidebarComponent} header={header}>
+      <SidebarShell withSidebar={props.withSidebar} header={header}>
         {props.children}
       </SidebarShell>
     </SidebarProvider>
@@ -168,7 +157,7 @@ export function Layout(props: {
 }
 
 function SidebarShell(props: {
-  SidebarComponent: React.ComponentType
+  withSidebar?: boolean
   header: React.ReactNode
   children?: React.ReactNode
 }) {
@@ -179,7 +168,7 @@ function SidebarShell(props: {
   }
   return (
     <div style={{ display: "contents" }} onClick={onClick}>
-      <props.SidebarComponent />
+      <Sidebar withSidebar={props.withSidebar} />
       <SidebarInset>
         {props.header}
         <main className="flex-1">{props.children}</main>

package/{build/website → source}/components/LinkButton.tsx

@@ -1,5 +1,5 @@
 import { buttonVariants } from "../elements/button.tsx"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 /** Styled link button rendered from ::button leaf directives */
 export function LinkButton(props: {

package/{build/website → source}/components/PageToolbar.tsx

@@ -1,9 +1,22 @@
 import { useState, useCallback } from "react"
-import { Pencil, Copy, Check, ExternalLink } from "lucide-react"
+import { Eye, Pencil, Copy, Check, ExternalLink } from "lucide-react"
 
 /** Toolbar with action buttons displayed for the article content */
-export function PageToolbar(props: { file?: string; content: string }) {
+export function PageToolbar(props: {
+  file?: string
+  sourceUrl?: string
+  sourceAction?: "edit" | "view"
+  content: string
+}) {
   const [copied, setCopied] = useState(false)
+  const sourceHref =
+    props.sourceUrl ??
+    (props.file
+      ? `https://github.com/datisthq/livemark/edit/main/${props.file}`
+      : undefined)
+  const isView = props.sourceAction === "view"
+  const sourceLabel = isView ? "View on GitHub" : "Edit on GitHub"
+  const SourceIcon = isView ? Eye : Pencil
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(props.content)
@@ -26,23 +39,23 @@ export function PageToolbar(props: { file?: string; content: string }) {
     <>
       <div className="mb-6 flex flex-col gap-2 text-sm">
         <p className="text-sm font-medium mb-1">Actions</p>
-        {props.file ? (
+        {sourceHref ? (
           <a
-            href={`https://github.com/datisthq/livemark/edit/main/${props.file}`}
+            href={sourceHref}
             target="_blank"
             rel="noopener noreferrer"
             className={buttonClass}
           >
-            <Pencil className="size-3.5" />
-            Edit on GitHub
+            <SourceIcon className="size-3.5" />
+            {sourceLabel}
           </a>
         ) : (
           <span
             className={`${buttonClass} opacity-50 cursor-not-allowed hover:text-muted-foreground`}
             aria-disabled="true"
           >
-            <Pencil className="size-3.5" />
-            Edit on GitHub
+            <SourceIcon className="size-3.5" />
+            {sourceLabel}
           </span>
         )}
         <button type="button" onClick={handleCopy} className={buttonClass}>

package/{build/website → source}/components/Section.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 import { useInView } from "../hooks/in-view.ts"
 
 export function Section(props: {

package/{build/website → source}/components/SectionHeader.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 export function SectionHeader(props: {
   label?: string

package/{build/website/components/MiniSidebar.tsx → source/components/Sidebar.tsx}

@@ -1,5 +1,6 @@
-import { Link } from "@tanstack/react-router"
+import { Link, useLocation, useMatch } from "@tanstack/react-router"
 import { useHotkey } from "@tanstack/react-hotkeys"
+import { currentSection } from "../content/article.ts"
 import {
   Sidebar as SidebarRoot,
   SidebarContent,
@@ -12,18 +13,26 @@ import {
   useSidebar,
 } from "../elements/sidebar.tsx"
 import { Search } from "./Search.tsx"
+import { SidebarArticles } from "./SidebarArticles.tsx"
 import { SidebarLinks } from "./SidebarLinks.tsx"
+import { SidebarPosts } from "./SidebarPosts.tsx"
+import { SidebarReleases } from "./SidebarReleases.tsx"
 import { SidebarSections } from "./SidebarSections.tsx"
 import { SiteTitle } from "./SiteTitle.tsx"
 import { Theme } from "./Theme.tsx"
 
-/** Minimal sidebar used on pages without an article tree. On desktop the
- * SidebarProvider keeps it off-canvas; on mobile it drives the sheet so
- * users can still reach Sections / Links / Search / Theme. */
-export function MiniSidebar() {
+/** Application sidebar shell: header, body slot picked by section.type, footer */
+export function Sidebar(props: { withSidebar?: boolean }) {
+  const pathname = useLocation({ select: l => l.pathname })
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
   const { toggleSidebar } = useSidebar()
+
   useHotkey("S", toggleSidebar)
 
+  const section = articleRoute
+    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+    : undefined
+
   return (
     <SidebarRoot>
       <SidebarHeader>
@@ -37,6 +46,13 @@ export function MiniSidebar() {
       </SidebarHeader>
       <SidebarContent>
         <SidebarSections />
+        {props.withSidebar && section?.type === "blog" && <SidebarPosts />}
+        {props.withSidebar && section?.type === "changelog" && (
+          <SidebarReleases />
+        )}
+        {props.withSidebar &&
+          section?.type !== "blog" &&
+          section?.type !== "changelog" && <SidebarArticles />}
         <SidebarLinks />
       </SidebarContent>
       <SidebarFooter className="p-4 space-y-2">

package/{build/website/components/Sidebar.tsx → source/components/SidebarArticles.tsx}

@@ -1,47 +1,32 @@
 import { Link, useLocation } from "@tanstack/react-router"
-import { useHotkey } from "@tanstack/react-hotkeys"
 import { ChevronRight, FileText } from "lucide-react"
 import {
   articleGroups,
   currentSection,
   sectionArticleGroups,
 } from "../content/article.ts"
-import { articleIcons } from "../helpers/article-icon.ts"
-import type { ArticleNode } from "../models/article.ts"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "../elements/collapsible.tsx"
 import {
-  Sidebar as SidebarRoot,
-  SidebarContent,
-  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
-  SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-  SidebarRail,
-  useSidebar,
 } from "../elements/sidebar.tsx"
-import { Search } from "./Search.tsx"
-import { SidebarLinks } from "./SidebarLinks.tsx"
-import { SidebarSections } from "./SidebarSections.tsx"
-import { SiteTitle } from "./SiteTitle.tsx"
-import { Theme } from "./Theme.tsx"
+import { articleIcons } from "../helpers/article-icon.ts"
+import type { ArticleNode } from "../models/article.ts"
 
-/** Application sidebar with article navigation, search, and theme toggle */
-export function Sidebar() {
+/** Article-tree body slot for the Sidebar shell */
+export function SidebarArticles() {
   const pathname = useLocation({ select: l => l.pathname })
-  const { toggleSidebar } = useSidebar()
-
-  useHotkey("S", toggleSidebar)
 
   const configSections = import.meta.env.CONFIG.sections
   const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
@@ -51,42 +36,24 @@ export function Sidebar() {
     : articleGroups
 
   return (
-    <SidebarRoot>
-      <SidebarHeader>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" render={<Link to="/" />}>
-              <SiteTitle />
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarSections />
-        {groups.map((group, index) => (
-          <SidebarGroup key={group.name ?? `__unnamed-${index}`}>
-            {group.name && (
-              <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
-                {group.name}
-              </SidebarGroupLabel>
-            )}
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {group.nodes.map(node => (
-                  <NavNode key={node.path} node={node} currentPath={pathname} />
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        ))}
-        <SidebarLinks />
-      </SidebarContent>
-      <SidebarFooter className="p-4 space-y-2">
-        <Search />
-        <Theme />
-      </SidebarFooter>
-      <SidebarRail />
-    </SidebarRoot>
+    <>
+      {groups.map((group, index) => (
+        <SidebarGroup key={group.name ?? `__unnamed-${index}`}>
+          {group.name && (
+            <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+              {group.name}
+            </SidebarGroupLabel>
+          )}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {group.nodes.map(node => (
+                <NavNode key={node.path} node={node} currentPath={pathname} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      ))}
+    </>
   )
 }
 

package/source/components/SidebarPosts.tsx

@@ -0,0 +1,129 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { Clock, List, Rss, Tag } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "../elements/sidebar.tsx"
+
+/** Blog body slot for the Sidebar shell: All Posts / Recent Posts / RSS / Tags */
+export function SidebarPosts() {
+  const pathname = useLocation({ select: l => l.pathname })
+
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
+  const posts = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+  const recentPosts = posts.slice(0, 5)
+
+  const allTags = new Set<string>()
+  for (const post of posts) {
+    for (const tag of post.tags ?? []) {
+      allTags.add(tag)
+    }
+  }
+  const tags = [...allTags].sort()
+
+  const normalized = `/${pathname.replace(/^\/|\/$/g, "")}/`
+  const isIndex = section ? normalized === section.prefix : false
+  const sectionPath = (section?.prefix ?? "/blog/").replace(/^\/|\/$/g, "")
+
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+          Posts
+        </SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                isActive={isIndex}
+                className={isIndex ? "" : "opacity-75"}
+                render={<Link to="/$" params={{ _splat: sectionPath }} />}
+              >
+                <List className="size-4" />
+                <span>All Posts</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton className="opacity-75">
+                <Clock className="size-4" />
+                <span>Recent Posts</span>
+              </SidebarMenuButton>
+              <SidebarMenuSub>
+                {recentPosts.map(post => {
+                  const active = normalized === post.path
+                  return (
+                    <SidebarMenuSubItem key={post.path}>
+                      <SidebarMenuSubButton
+                        isActive={active}
+                        className={active ? "" : "opacity-75"}
+                        render={
+                          <Link
+                            to="/$"
+                            params={{
+                              _splat: post.path.replace(/^\/|\/$/g, ""),
+                            }}
+                          />
+                        }
+                      >
+                        <span>{post.title}</span>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  )
+                })}
+              </SidebarMenuSub>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton className="opacity-75">
+                <Rss className="size-4" />
+                <span>RSS Feed</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+
+      {tags.length > 0 && (
+        <SidebarGroup>
+          <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+            Tags
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {tags.map(tag => {
+                const tagPath = `${sectionPath}/tags/${tag}`
+                const tagActive = normalized === `/${tagPath}/`
+                return (
+                  <SidebarMenuItem key={tag}>
+                    <SidebarMenuButton
+                      isActive={tagActive}
+                      className={tagActive ? "" : "opacity-75"}
+                      render={<Link to="/$" params={{ _splat: tagPath }} />}
+                    >
+                      <Tag className="size-3.5" />
+                      <span>{tag}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      )}
+    </>
+  )
+}

package/source/components/SidebarReleases.tsx

@@ -0,0 +1,85 @@
+import { Link, useLocation } from "@tanstack/react-router"
+import { Clock, List } from "lucide-react"
+import {
+  currentSection,
+  sectionFlatArticles,
+  sortedArticles,
+} from "../content/article.ts"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "../elements/sidebar.tsx"
+
+/** Changelog body slot for the Sidebar shell: All Releases / Recent Releases */
+export function SidebarReleases() {
+  const pathname = useLocation({ select: l => l.pathname })
+
+  const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+  const flat = section ? (sectionFlatArticles.get(section.prefix) ?? []) : []
+  const entries = flat
+    .map(p => sortedArticles.find(a => a.path === p))
+    .filter(a => a !== undefined)
+  const recent = entries.slice(0, 5)
+
+  const normalized = `/${pathname.replace(/^\/|\/$/g, "")}/`
+  const isIndex = section ? normalized === section.prefix : false
+  const sectionPath = (section?.prefix ?? "/changelog/").replace(/^\/|\/$/g, "")
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel className="uppercase font-mono text-xs tracking-widest">
+        Releases
+      </SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              isActive={isIndex}
+              className={isIndex ? "" : "opacity-75"}
+              render={<Link to="/$" params={{ _splat: sectionPath }} />}
+            >
+              <List className="size-4" />
+              <span>All Releases</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <SidebarMenuButton className="opacity-75">
+              <Clock className="size-4" />
+              <span>Recent Releases</span>
+            </SidebarMenuButton>
+            <SidebarMenuSub>
+              {recent.map(entry => {
+                const active = normalized === entry.path
+                return (
+                  <SidebarMenuSubItem key={entry.path}>
+                    <SidebarMenuSubButton
+                      isActive={active}
+                      className={active ? "" : "opacity-75"}
+                      render={
+                        <Link
+                          to="/$"
+                          params={{
+                            _splat: entry.path.replace(/^\/|\/$/g, ""),
+                          }}
+                        />
+                      }
+                    >
+                      <span>{entry.title}</span>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                )
+              })}
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}

package/{build/website → source}/content-collections.ts

@@ -11,8 +11,8 @@ import remarkDirective from "remark-directive"
 import remarkGemoji from "remark-gemoji"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
-import { loadConfig } from "../actions/config/load.ts"
-import { buildChangelog, cacheIncludeGlob } from "../actions/changelog/build.ts"
+import { loadConfig } from "./actions/config/load.ts"
+import { buildChangelog, cacheIncludeGlob } from "./actions/changelog/build.ts"
 import { Article } from "./models/article.ts"
 import { pickDefaultIcon } from "./helpers/article-icon.ts"
 import slugify from "@sindresorhus/slugify"

package/{build/website → source}/elements/accordion.tsx

@@ -1,7 +1,7 @@
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (

package/{build/website → source}/elements/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 import { Button } from "./button.tsx"
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {

package/{build/website → source}/elements/alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 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",

package/{build/website → source}/elements/aspect-ratio.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function AspectRatio({
   ratio,

package/{build/website → source}/elements/avatar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function Avatar({
   className,

package/{build/website → source}/elements/badge.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 const badgeVariants = cva(
   "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",

package/{build/website → source}/elements/breadcrumb.tsx

@@ -1,7 +1,7 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
   return (

package/{build/website → source}/elements/button-group.tsx

@@ -2,7 +2,7 @@ import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 import { Separator } from "./separator.tsx"
 
 const buttonGroupVariants = cva(

package/{build/website → source}/elements/button.tsx

@@ -1,6 +1,6 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 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",

package/{build/website → source}/elements/calendar.tsx

@@ -11,7 +11,7 @@ import {
   ChevronRightIcon,
 } from "lucide-react"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 import { Button, buttonVariants } from "./button.tsx"
 
 function Calendar({

package/{build/website → source}/elements/card.tsx

@@ -1,5 +1,5 @@
 import type * as React from "react"
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function Card({
   className,

package/{build/website → source}/elements/carousel.tsx

@@ -4,7 +4,7 @@ import useEmblaCarousel, {
 } from "embla-carousel-react"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 import { Button } from "./button.tsx"
 
 type CarouselApi = UseEmblaCarouselType[1]

package/{build/website → source}/elements/chart.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 import type { TooltipValueType } from "recharts"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const

package/{build/website → source}/elements/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 import { CheckIcon } from "lucide-react"
 
-import { cn } from "../helpers/style.ts"
+import { cn } from "../utils/style.ts"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (