@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/blocks/profile/use-profile-card.ts

@@ -56,7 +56,9 @@ export interface ProfileCardBinding {
  * `profileCardId` outlives its component, so a fold set from elsewhere
  * (`useProfileCardActions(id).collapse()`) survives a route change.
  */
-export function useProfileCard(options: UseProfileCardOptions): ProfileCardBinding {
+export function useProfileCard(
+  options: UseProfileCardOptions
+): ProfileCardBinding {
   const {
     variant: variantProp,
     defaultVariant = "expanded",
@@ -84,24 +86,32 @@ export function useProfileCard(options: UseProfileCardOptions): ProfileCardBindi
   const setMenuOpen = useSetAtom(setProfileCardMenuOpenAtom(profileCardId))
   const select = useSetAtom(selectProfileCardActionAtom(profileCardId))
 
+  // Reads BEFORE the write effects, and the writes in passive effects: jotai
+  // (v3) subscribes `useAtomValue` in its own `useEffect` with no
+  // post-subscription recheck, so a write from a `useLayoutEffect` (or from
+  // any effect declared before the reads) lands before the subscription
+  // exists and the card never re-renders with the seeded state.
+  const variant = useAtomValue(profileCardVariantAtom(profileCardId))
+  const menuOpen = useAtomValue(profileCardMenuOpenAtom(profileCardId))
+  const busy = useAtomValue(profileCardBusyAtom(profileCardId))
+
   // Seed the uncontrolled fold once per mount, before the projection — the
-  // `default*` options describe the mount, not every render. Layout effects
-  // so children read settled values in the same commit; primitive deps, so
-  // no loop guard is needed.
+  // `default*` options describe the mount, not every render. Primitive deps,
+  // so no loop guard is needed.
   const [seed] = React.useState(() => ({
     variant: variantProp ?? defaultVariant,
     open: openProp ?? options.defaultOpen ?? false,
   }))
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (!controlsVariant) seedVariant(seed.variant)
     if (!controlsMenuOpen) setMenuOpen(seed.open)
     // Mount-time seed only.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     project(config, variantProp, openProp)
   }, [project, config, variantProp, openProp])
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     publishHandlers(handlers)
   }, [publishHandlers, handlers])
 
@@ -110,10 +120,6 @@ export function useProfileCard(options: UseProfileCardOptions): ProfileCardBindi
     return () => removeProfileCardInstance(profileCardId)
   }, [options.profileCardId, profileCardId])
 
-  const variant = useAtomValue(profileCardVariantAtom(profileCardId))
-  const menuOpen = useAtomValue(profileCardMenuOpenAtom(profileCardId))
-  const busy = useAtomValue(profileCardBusyAtom(profileCardId))
-
   return {
     profileCardId,
     variant,

package/src/components/blocks/scaffold/scaffold-canvas.tsx

@@ -54,7 +54,10 @@ export function ScaffoldCanvas({
     .filter((id): id is string => id !== undefined)
   const idsKey = panelIds.join(" ")
 
-  React.useLayoutEffect(() => {
+  // Passive on purpose: jotai (v3) readers subscribe in their own
+  // `useEffect`, so a layout-effect write at mount would land before any
+  // subscription exists and never notify them.
+  React.useEffect(() => {
     registerPanelIds(panelIds)
     // panelIds is rebuilt each render; idsKey carries its identity.
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/blocks/scaffold/scaffold-root.story.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { ScaffoldCanvas } from "./scaffold-canvas"
+import { ScaffoldInspector } from "./scaffold-inspector"
+import { ScaffoldMain } from "./scaffold-main"
+import { ScaffoldPanel } from "./scaffold-panel"
+import { ScaffoldRoot } from "./scaffold-root"
+
+export const story = defineStory({
+  Component: ScaffoldRoot,
+  args: {
+    initial: {
+      className: "h-[28rem] w-full",
+      inspectorOpen: false,
+      inspectorWidth: 272,
+    },
+    fixed: {
+      children: (
+        <ScaffoldMain>
+          <ScaffoldCanvas>
+            <ScaffoldPanel>
+              <div className="p-6">Corpus workspace</div>
+            </ScaffoldPanel>
+          </ScaffoldCanvas>
+          <ScaffoldInspector name="Passage details">
+            <div className="p-4">Selected passage: a.1, ¶1–¶2</div>
+          </ScaffoldInspector>
+        </ScaffoldMain>
+      ),
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/scaffold/scaffold-root.tsx

@@ -63,23 +63,26 @@ export function ScaffoldRoot({
   const seedInspector = useSetAtom(seedScaffoldInspectorAtom(scaffoldId))
 
   // Seed the uncontrolled inspector once per mount, before the projection —
-  // `defaultInspectorOpen` describes the mount, not every render. Layout
-  // effects so children read settled values in the same commit; primitive
-  // deps, so no loop guard is needed.
+  // `defaultInspectorOpen` describes the mount, not every render. Passive
+  // effects on purpose: jotai (v3) subscribes readers in their own
+  // `useEffect` with no post-subscription recheck, and the children's
+  // subscription effects run before this parent's passive effects — a
+  // `useLayoutEffect` write would land before any subscription exists and
+  // the readers would never re-render with the seeded state.
   const [seed] = React.useState(
     () => inspectorOpenProp ?? defaultInspectorOpen ?? false
   )
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (!controlsInspector) seedInspector(seed)
     // Mount-time seed only.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   // Handlers before the projection — they must be in the store before any
   // action can fire.
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     publishHandlers(handlers)
   }, [publishHandlers, handlers])
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     project(config, inspectorOpenProp)
   }, [project, config, inspectorOpenProp])
 

package/src/components/blocks/scaffold/utils.ts

@@ -72,7 +72,7 @@ export const scaffoldBackgroundClass: ClassNameValue =
 
 /** Card surface shared by a panel's primary area and secondary strip. */
 export const panelSurfaceClass: ClassNameValue =
-  "rounded-2xl bg-slate-100 inset-ring-1 inset-ring-white/60 dark:bg-neutral-900 dark:inset-ring-white/5"
+  "rounded-md bg-slate-100 inset-ring-1 inset-ring-white/60 dark:bg-neutral-900 dark:inset-ring-white/5"
 
 /** Floating icon button hovering over a panel (close, swap). */
 export const floatingButtonClass: ClassNameValue =

package/src/components/blocks/shell/__tests__/shell-fit-atom.test.tsx

@@ -3,7 +3,7 @@ import { act, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { createStore, getDefaultStore } from "jotai"
 
-import { ExegiaProvider } from "@/state"
+import { ExegiaProvider } from "@/lib/state"
 import { ShellLayout } from "../shell-layout"
 import {
   measureShellFitAtom,
@@ -226,8 +226,8 @@ function stubShellWidths() {
       Number.parseFloat(value),
     ])
   )
-  const original = HTMLElement.prototype.getBoundingClientRect
-  HTMLElement.prototype.getBoundingClientRect = function (this: HTMLElement) {
+  const original = Element.prototype.getBoundingClientRect
+  Element.prototype.getBoundingClientRect = function (this: HTMLElement) {
     const isProbe =
       this.style.visibility === "hidden" && this.style.position === "absolute"
     if (!isProbe) return original.call(this)
@@ -235,7 +235,7 @@ function stubShellWidths() {
     return { width: (variable && px[variable]) || 0 } as DOMRect
   }
   return () => {
-    HTMLElement.prototype.getBoundingClientRect = original
+    Element.prototype.getBoundingClientRect = original
   }
 }
 

package/src/components/blocks/shell/__tests__/shell-layout.test.tsx

@@ -39,8 +39,8 @@ function stubShellWidths() {
       Number.parseFloat(value),
     ])
   )
-  const original = HTMLElement.prototype.getBoundingClientRect
-  HTMLElement.prototype.getBoundingClientRect = function (this: HTMLElement) {
+  const original = Element.prototype.getBoundingClientRect
+  Element.prototype.getBoundingClientRect = function (this: HTMLElement) {
     const isProbe =
       this.style.visibility === "hidden" && this.style.position === "absolute"
     if (!isProbe) return original.call(this)
@@ -49,7 +49,7 @@ function stubShellWidths() {
     return { width: (variable && px[variable]) || 0 } as DOMRect
   }
   return () => {
-    HTMLElement.prototype.getBoundingClientRect = original
+    Element.prototype.getBoundingClientRect = original
   }
 }
 

package/src/components/blocks/shell/animated-panel-inset.tsx

@@ -19,7 +19,7 @@ export const AnimatedPanelInset = forwardRef<
         // panel entirely once even that no longer fits.
         "relative flex min-w-(--inset-min-width) flex-1 flex-col bg-neutral-50 dark:bg-neutral-900",
         "outline-offset-0.5 overflow-hidden border-t-3 border-white outline-neutral-100 dark:border-neutral-800 dark:inset-ring-black",
-        "rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950",
+        "rounded-md shadow-md shadow-neutral-200 dark:shadow-neutral-950",
         className
       )}
     />

package/src/components/blocks/shell/shell-layout.story.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { ShellLayout } from "./shell-layout"
+
+export const story = defineStory({
+  Component: ShellLayout,
+  args: {
+    initial: {
+      variant: "web",
+      className: "h-[28rem] w-full",
+      children: "Corpus workspace",
+      header: "Context Fabric",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/shell/shell-layout.tsx

@@ -108,7 +108,7 @@ export function ShellLayout({
           className={cn(
             "bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900",
             "outline-offset-0.5 border-t-3 border-white outline-neutral-100 dark:inset-ring-black",
-            "rounded-lg shadow-md shadow-neutral-200 dark:shadow-neutral-950"
+            "rounded-md shadow-md shadow-neutral-200 dark:shadow-neutral-950"
           )}
           collapsible="offcanvas"
           role="complementary"

package/src/components/blocks/shell/use-shell-fit-state.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { useMemo } from "react"
-import { useAtomValue, useSetAtom } from "jotai"
+import { useAtomValueRawSync, useSetAtom } from "jotai"
 
 import {
   resetShellPanelWidthAtom,
@@ -23,7 +23,7 @@ import type { ShellFitActions, ShellFitInstanceId, ShellFitState } from "./type"
  * field's atom instead: `useAtomValue(shellFitFitsAtom("app-shell"))`.
  */
 export function useShellFitState(shellId: ShellFitInstanceId): ShellFitState {
-  return useAtomValue(shellFitStateAtom(shellId))
+  return useAtomValueRawSync(shellFitStateAtom(shellId))
 }
 
 /**

package/src/components/blocks/shell/use-shell-fit.ts

@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useId, useMemo, useRef, useState } from "react"
-import { useAtomValue, useSetAtom } from "jotai"
+import { useAtomValueRawSync, useSetAtom } from "jotai"
 import { useIsomorphicLayoutEffect } from "motion/react"
 
 import {
@@ -126,7 +126,7 @@ export function useShellFit({
     return () => removeShellFitInstance(shellId)
   }, [shellId, explicitId])
 
-  const state = useAtomValue(shellFitStateAtom(shellId))
+  const state = useAtomValueRawSync(shellFitStateAtom(shellId))
 
   return useMemo<ShellFitController>(
     () => ({ shellId, ...state, resizePanel, resetPanelWidth }),

package/src/components/blocks/shell/use-shell-panels.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useId, useMemo, useState } from "react"
 import type { ReactNode } from "react"
-import { useAtomValue, useSetAtom } from "jotai"
+import { useAtomValueRawSync, useSetAtom } from "jotai"
 
 import {
   removeShellFitInstance,
@@ -68,9 +68,9 @@ export function useShellPanels({
   // Reads false until the shell has measured itself — an unmeasured shell
   // fails open, so nothing out here stands down over a reading that has not
   // happened yet.
-  const fits = useAtomValue(shellFitFitsAtom(shellId))
+  const fits = useAtomValueRawSync(shellFitFitsAtom(shellId))
   const isNarrow = !fits
-  const panelWidth = useAtomValue(shellFitPanelWidthAtom(shellId))
+  const panelWidth = useAtomValueRawSync(shellFitPanelWidthAtom(shellId))
   const resizePanel = useSetAtom(resizeShellPanelAtom(shellId))
 
   // The shell drops the right panel when the viewport cannot hold it, so

package/src/components/composed/action-bar/__tests__/action-bar.test.tsx

@@ -0,0 +1,96 @@
+import { describe, expect, test } from "bun:test";
+import { render } from "@testing-library/react";
+import { BoldIcon } from "lucide-react";
+import ActionBar from "../toolbar";
+import { Action, Separator } from "../action";
+import type { ActionKey, ActionMap } from "../types";
+
+const act = (id: string) => () => (
+  <Action Icon={BoldIcon} action={() => {}} id={id} tooltip={id} />
+);
+
+const bar = (actions: ActionMap<ActionKey>) => {
+  const { container } = render(<ActionBar id="bar" variant="default" actions={actions} />);
+  return {
+    groups: container.querySelectorAll('[data-slot="toolbar-group"]').length,
+    separators: container.querySelectorAll('[data-slot="toolbar-separator"]').length,
+    // TooltipTrigger's data-slot wins over ToolbarButton's in the render
+    // merge, so actions are matched by tag rather than by slot.
+    buttons: container.querySelectorAll("button[data-tooltip]").length,
+    // A group that rendered with no actions inside is the failure this guards.
+    emptyGroups: [
+      ...container.querySelectorAll('[data-slot="toolbar-group"]'),
+    ].filter((g) => g.querySelectorAll("button[data-tooltip]").length === 0).length,
+  };
+};
+
+describe("ActionBar grouping", () => {
+  test("no separator renders flat — no ToolbarGroup is added", () => {
+    const r = bar({ "action-a": act("a"), "action-b": act("b") } as ActionMap<ActionKey>);
+    expect(r.groups).toBe(0);
+    expect(r.separators).toBe(0);
+    expect(r.buttons).toBe(2);
+  });
+
+  test("a separator splits the actions either side of it into two groups", () => {
+    const r = bar({
+      "action-a": act("a"),
+      "separator-1": Separator,
+      "action-b": act("b"),
+    } as ActionMap<ActionKey>);
+    expect(r.groups).toBe(2);
+    expect(r.separators).toBe(1);
+    expect(r.emptyGroups).toBe(0);
+  });
+
+  test("a leading separator does not render an empty group before it", () => {
+    const r = bar({
+      "separator-1": Separator,
+      "action-a": act("a"),
+      "action-b": act("b"),
+    } as ActionMap<ActionKey>);
+    expect(r.groups).toBe(1);
+    expect(r.emptyGroups).toBe(0);
+  });
+
+  test("a trailing separator does not render an empty group after it", () => {
+    const r = bar({
+      "action-a": act("a"),
+      "separator-1": Separator,
+    } as ActionMap<ActionKey>);
+    expect(r.groups).toBe(1);
+    expect(r.emptyGroups).toBe(0);
+  });
+
+  test("back-to-back separators do not render an empty group between them", () => {
+    const r = bar({
+      "action-a": act("a"),
+      "separator-1": Separator,
+      "separator-2": Separator,
+      "action-b": act("b"),
+    } as ActionMap<ActionKey>);
+    expect(r.groups).toBe(2);
+    expect(r.separators).toBe(2);
+    expect(r.emptyGroups).toBe(0);
+  });
+
+  test("groups preserve the map's insertion order", () => {
+    const { container } = render(
+      <ActionBar
+        id="bar"
+        variant="default"
+        actions={
+          {
+            "action-first": act("first"),
+            "separator-1": Separator,
+            "action-second": act("second"),
+          } as ActionMap<ActionKey>
+        }
+      />,
+    );
+    const order = [...container.querySelectorAll("[data-tooltip]")].map((b) =>
+      b.getAttribute("data-tooltip"),
+    );
+    expect(order).toEqual(["first", "second"]);
+  });
+});

package/src/components/composed/action-bar/action.tsx

@@ -0,0 +1,80 @@
+import { ToolbarButton, ToolbarSeparator } from "@/components/ui/toolbar"
+import type { ActionButtonProps } from "./types"
+import { TooltipTrigger } from "@/components/ui/tooltip"
+import { Text } from "@/components/atoms"
+import type { SpanProps } from "@/components/atoms/text"
+import { tooltipHandle } from "./utils"
+import type { ToolbarSeparatorProps } from "@base-ui/react"
+
+function Payload({ children }: SpanProps) {
+  return <Text.Span>{children}</Text.Span>
+}
+
+export function Action({
+  tooltip,
+  action,
+  Icon,
+}: Omit<ActionButtonProps<string>, "children">) {
+  return (
+    <TooltipTrigger
+      handle={tooltipHandle}
+      payload={Payload}
+      // The icon is aria-hidden, so without this the button has no accessible
+      // name at all — `data-tooltip` is not exposed to assistive tech.
+      render={
+        <ToolbarButton
+          aria-label={tooltip}
+          data-tooltip={tooltip}
+          onClick={action}
+        />
+      }
+    >
+      {"emoji" in Icon ? (
+        <span>{Icon.emoji}</span>
+      ) : (
+        <Icon size={18} aria-hidden="true" />
+      )}
+    </TooltipTrigger>
+  )
+}
+
+/**
+ * Group boundary. Pass it under a `separator-*` key in `actions` and the bar
+ * wraps the runs of actions either side of it in their own `ToolbarGroup`.
+ */
+export function Separator(props: ToolbarSeparatorProps) {
+  return <ToolbarSeparator orientation="vertical" {...props} />
+}
+
+/**
+ * An action labelled by an emoji glyph rather than a Lucide icon. The glyph is
+ * `aria-hidden` — `label` is the accessible name, so a screen reader reads
+ * "thumbs up" rather than announcing the character.
+ */
+export function EmojiAction({
+  emoji,
+  label,
+  action,
+}: {
+  emoji: string
+  label: string
+  action: () => void
+}) {
+  return (
+    <TooltipTrigger
+      handle={tooltipHandle}
+      payload={Payload}
+      render={
+        <ToolbarButton
+          aria-label={label}
+          className="size-8 cursor-pointer rounded-full text-base leading-none outline-0! transition-[background-color,scale] duration-150 ease-smooth-out hover:bg-black/6 focus-visible:bg-transparent active:scale-90 motion-reduce:transition-none motion-reduce:active:scale-100 dark:hover:bg-white/10"
+          data-emoji={emoji}
+          data-tooltip={label}
+          onClick={action}
+        />
+      }
+    >
+      <span aria-hidden="true">{emoji}</span>
+    </TooltipTrigger>
+  )
+}

package/src/components/composed/action-bar/emojis.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useMemo } from "react"
+import type * as React from "react"
+import { MoreHorizontal, X } from "lucide-react"
+import { Action, EmojiAction, Separator } from "./action"
+import { motion } from "motion/react"
+import ActionBar from "./toolbar"
+import { BOUNCE_IN_OUT } from "@/lib/ease"
+
+import type { ActionKey, ActionMap, EmojiActionBarProps } from "./types"
+import {
+  EmojiPicker,
+  EmojiPickerContent,
+  EmojiPickerFooter,
+  EmojiPickerSearch,
+} from "@/components/ui/emoji-picker"
+import { isSeparator, QUICK_REACTIONS, useEmojiPicker } from "./utils"
+import { Button } from "@/components/ui/button";
+
+/**
+ * Compact reaction picker: a toolbar of quick emoji, then a "More" action that
+ * swaps the surface for the full frimousse picker. Meant to sit inside a
+ * `PopoverGlass variant="glass"` — swapping the two surfaces resizes the popup,
+ * which is why the popup's viewport padding variable has to be zeroed rather
+ * than only its padding (see `BubbleReactionsButton`).
+ */
+export function EmojiActionBar({
+  onEmojiSelect,
+  reactions = QUICK_REACTIONS,
+  hideMore = false,
+}: EmojiActionBarProps): React.ReactElement {
+  const {
+    actions: quickReactions,
+    isFullPicker,
+    togglePicker,
+    selectEmoji,
+  } = useEmojiPicker({ onEmojiSelect, reactions, hideMore })
+
+  const actions = useMemo(() => {
+    return quickReactions.reduce<ActionMap<ActionKey>>((acc, item) => {
+      // Replace spaces with hyphens and convert to lowercase for the action key
+      const label = item.label.replace(/\s+/g, "-").toLowerCase()
+      const key: ActionKey = `action-${label}` as const
+      // Create the action component, using the more action if the label includes "more"
+      const moreAction = (
+        <Action
+          Icon={MoreHorizontal}
+          action={togglePicker}
+          id={label}
+          tooltip={item.label}
+        />
+      )
+      const action = label.includes("more") ? (
+        moreAction
+      ) : (
+        <EmojiAction
+          emoji={item.emoji}
+          label={item.label}
+          action={() => selectEmoji(item)}
+        />
+      )
+      // Store the action in the acc, using a separator if the key starts with "separator-"
+      acc[key] = () => (isSeparator(key) ? <Separator /> : action)
+      return acc
+    }, {})
+  }, [quickReactions, selectEmoji, togglePicker])
+
+  return (
+    <motion.div className="relative" initial={{ height: "auto" }} exit={{ height: "auto" }} animate={{ height: isFullPicker ? 326 : "auto" }} transition={BOUNCE_IN_OUT}>
+     
+      {isFullPicker ? (
+        <EmojiPicker
+          className="h-full relative"
+          onEmojiSelect={selectEmoji}
+        >
+          <div className="flex items-center">
+               <EmojiPickerSearch />
+            <Button variant="secondary" size="icon-xs" onClick={togglePicker}>
+              <X className="size-3 stroke-3" />
+            </Button>
+          </div>
+       
+          <EmojiPickerContent />
+          <EmojiPickerFooter />
+        </EmojiPicker>
+      ) : (
+        <ActionBar
+          actions={actions}
+          id="emoji-action-bar"
+          variant="default"
+          className="pr-3 pl-1.5"
+        />
+      )}
+    </motion.div>
+  )
+}

package/src/components/composed/action-bar/index.ts

@@ -0,0 +1,24 @@
+import { EmojiActionBar } from "./emojis"
+import { Action, EmojiAction, Separator } from "./action"
+
+import Toolbar from "./toolbar"
+
+export { useActionBar, useEmojiPicker, QUICK_REACTIONS } from "./utils"
+export type {
+  ActionBarProps,
+  ActionBarSegment,
+  ActionButtonProps,
+  EmojiActionBarProps,
+  ActionEntry,
+  ActionItemsByGroup,
+  ActionKey,
+  ActionMap,
+} from "./types"
+
+export const ActionBar = {
+  Emoji: EmojiActionBar,
+  Separator,
+  EmojiAction,
+  Action,
+}
+export default Toolbar

package/src/components/composed/action-bar/toolbar.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import {
+  Toolbar as ToolbarPrimitive,
+  ToolbarGroup,
+} from "@/components/ui/toolbar"
+import { Tooltip, TooltipPopup } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { tooltipHandle, useActionBar } from "./utils"
+import type { ActionBarProps } from "./types"
+
+/**
+ * Toolbar chrome. "default" keeps the bordered card surface; "ghost" and
+ * "glass" drop it so the bar can sit inside a surface that already paints one
+ * — a `PopoverGlass variant="glass"`, for instance.
+ */
+const toolbarVariants = {
+  default: "border-none bg-transparent backdrop-blur-none!",
+  ghost: "border-0 bg-transparent! shadow-none",
+  glass: "border-0 bg-transparent! shadow-sm shadow-black",
+} as const
+
+export default function Toolbar({
+  id,
+  actions,
+  variant = "default",
+  className,
+}: ActionBarProps) {
+  const { segments, entries, hasGroups } = useActionBar({ actions })
+
+  return (
+    <ToolbarPrimitive
+      className={cn(toolbarVariants[variant], className)}
+      data-slot="action-bar"
+      data-variant={variant}
+      id={id}
+    >
+      {hasGroups
+        ? segments.map((segment) =>
+            segment.type === "separator" ? (
+              <segment.Separator key={segment.key} />
+            ) : (
+              <ToolbarGroup key={segment.key}>
+                {segment.items.map(([key, Action]) => (
+                  <Action key={key} />
+                ))}
+              </ToolbarGroup>
+            )
+          )
+        : entries.map(([key, Action]) => <Action key={key} />)}
+      <Tooltip handle={tooltipHandle}>
+        {({ payload: Payload, ...props }) => (
+          <TooltipPopup {...props}>
+            {Payload !== undefined && <Payload />}
+          </TooltipPopup>
+        )}
+      </Tooltip>
+    </ToolbarPrimitive>
+  )
+}