@agent-native/toolkit 0.207.1 → 0.207.2-nightly-20261013011333

package/src/app/blocks/RegistryBlockDataProvider.spec.tsx

@@ -97,4 +97,71 @@ describe("RegistryBlockDataProvider", () => {
       "Portable UI, Core registry",
     );
   });
+
+  it("contains a registered block renderer failure to its block", () => {
+    const registry = new BlockRegistry();
+    registry.register(
+      defineBlock({
+        type: "note",
+        schema: z.object({ body: z.string() }),
+        mdx: {
+          tag: "Note",
+          toAttrs: (data) => ({ body: data.body }),
+          fromAttrs: (attrs) => ({ body: attrs.string("body") ?? "" }),
+        },
+        Read: () => {
+          throw new Error("renderer failed");
+        },
+        placement: ["block"],
+        label: "Note",
+        description: "A note.",
+      }),
+    );
+
+    const block: TestBlock = {
+      id: "note-2",
+      type: "note",
+      data: { body: "unreadable" },
+    };
+    const value: RegistryBlockDataValue<TestBlock> = {
+      editable: false,
+      getBlock: (id) => (id === block.id ? block : undefined),
+      onBlockDataChange: vi.fn(),
+    };
+    const logError = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    function Probe() {
+      const data = useRegistryBlockData<TestBlock>();
+      return (
+        data?.renderRegisteredBlock?.(block, {
+          blockType: "note",
+          editable: false,
+          selected: false,
+          shellHovered: false,
+          panelOpen: false,
+          setPanelOpen: vi.fn(),
+          onChange: vi.fn(),
+        })?.body ?? null
+      );
+    }
+
+    try {
+      act(() => {
+        root.render(
+          <BlockRegistryProvider registry={registry} ctx={{}}>
+            <RegistryBlockDataProvider value={value} interactive>
+              <Probe />
+            </RegistryBlockDataProvider>
+          </BlockRegistryProvider>,
+        );
+      });
+
+      const fallback = container.querySelector("[data-block-render-error]");
+      expect(fallback).not.toBeNull();
+      expect(fallback?.textContent).not.toContain("renderer failed");
+      expect(fallback?.hasAttribute("data-plan-interactive")).toBe(true);
+    } finally {
+      logError.mockRestore();
+    }
+  });
 });

package/src/app/blocks/RegistryBlockDataProvider.tsx

@@ -5,8 +5,13 @@ import {
   type RegistryBlockSideMapBlock,
 } from "@agent-native/toolkit/editor/RegistryBlockContext";
 import { IconPencil } from "@tabler/icons-react";
+import { Suspense } from "react";
 import { useCallback, useMemo, type ReactNode } from "react";
 
+import {
+  BlockRenderErrorBoundary,
+  BlockRenderSuspenseFallback,
+} from "./BlockRenderErrorBoundary.js";
 import { blockEditSurface } from "./BlockView.js";
 import { useOptionalBlockRegistry } from "./provider.js";
 import { SchemaBlockEditor } from "./SchemaBlockEditor.js";
@@ -16,9 +21,11 @@ export function RegistryBlockDataProvider<
 >({
   value,
   children,
+  interactive = false,
 }: {
   value: RegistryBlockDataValue<TBlock>;
   children: ReactNode;
+  interactive?: boolean;
 }) {
   const registryValue = useOptionalBlockRegistry();
   const renderRegisteredBlock = useCallback(
@@ -35,37 +42,71 @@ export function RegistryBlockDataProvider<
       const blockData = block.data;
       const Read = spec.Read;
       let body: ReactNode = (
-        <Read
-          data={blockData}
+        <BlockRenderErrorBoundary
           blockId={block.id}
-          title={block.title}
-          summary={block.summary}
-          ctx={registryValue.ctx}
-        />
+          blockType={blockType}
+          resetKey={blockData}
+          interactive={interactive}
+        >
+          <Suspense
+            fallback={
+              <BlockRenderSuspenseFallback
+                blockId={block.id}
+                blockType={blockType}
+              />
+            }
+          >
+            <Read
+              data={blockData}
+              blockId={block.id}
+              title={block.title}
+              summary={block.summary}
+              ctx={registryValue.ctx}
+            />
+          </Suspense>
+        </BlockRenderErrorBoundary>
       );
       let editSurface: ReactNode = null;
       const canEditBlock = options.editable && spec.placement.includes("block");
       if (canEditBlock) {
         const Edit = spec.Edit;
-        const editorNode = Edit ? (
-          <Edit
-            data={blockData}
-            onChange={options.onChange}
-            editable
-            blockId={block.id}
-            title={block.title}
-            summary={block.summary}
-            ctx={registryValue.ctx}
-          />
-        ) : (
-          <SchemaBlockEditor
-            data={blockData}
-            onChange={(nextData) => options.onChange(nextData)}
-            schema={spec.schema}
-            editable
+        const editorNode = (
+          <BlockRenderErrorBoundary
             blockId={block.id}
-            ctx={registryValue.ctx}
-          />
+            blockType={blockType}
+            resetKey={blockData}
+            interactive={interactive}
+          >
+            <Suspense
+              fallback={
+                <BlockRenderSuspenseFallback
+                  blockId={block.id}
+                  blockType={blockType}
+                />
+              }
+            >
+              {Edit ? (
+                <Edit
+                  data={blockData}
+                  onChange={options.onChange}
+                  editable
+                  blockId={block.id}
+                  title={block.title}
+                  summary={block.summary}
+                  ctx={registryValue.ctx}
+                />
+              ) : (
+                <SchemaBlockEditor
+                  data={blockData}
+                  onChange={(nextData) => options.onChange(nextData)}
+                  schema={spec.schema}
+                  editable
+                  blockId={block.id}
+                  ctx={registryValue.ctx}
+                />
+              )}
+            </Suspense>
+          </BlockRenderErrorBoundary>
         );
         const surface = blockEditSurface(spec);
         if (surface === "panel" && registryValue.ctx.renderEditSurface) {

package/src/app/i18n/catalogs/ar-SA.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "هذه الكتلة غير متاحة مؤقتًا.",
+  "block.loading": "جارٍ تحميل هذه الكتلة.",
   "composer.contextUrlLabel": "عنوان URL",
   "composer.contextInvalidUrl": "أدخل عنوان URL صالحًا يبدأ بـ HTTP أو HTTPS.",
   "composer.contextAttach": "إرفاق",

package/src/app/i18n/catalogs/de-DE.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "Dieser Block ist vorübergehend nicht verfügbar.",
+  "block.loading": "Block wird geladen.",
   "composer.contextUrlLabel": "URL-Adresse",
   "composer.contextInvalidUrl": "Gib eine gültige HTTP- oder HTTPS-URL ein.",
   "composer.contextAttach": "Anhängen",

package/src/app/i18n/catalogs/en-US.ts

@@ -1,4 +1,6 @@
 const messages = {
+  "block.renderUnavailable": "This block is temporarily unavailable.",
+  "block.loading": "Loading block.",
   "composer.contextUrlLabel": "URL",
   "composer.contextInvalidUrl": "Enter a valid HTTP or HTTPS URL.",
   "composer.contextAttach": "Attach",

package/src/app/i18n/catalogs/es-ES.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "Este bloque no está disponible temporalmente.",
+  "block.loading": "Cargando bloque.",
   "composer.contextUrlLabel": "Dirección URL",
   "composer.contextInvalidUrl": "Introduce una URL HTTP o HTTPS válida.",
   "composer.contextAttach": "Adjuntar",

package/src/app/i18n/catalogs/fr-FR.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "Ce bloc est temporairement indisponible.",
+  "block.loading": "Chargement du bloc.",
   "composer.contextUrlLabel": "Adresse URL",
   "composer.contextInvalidUrl": "Saisissez une URL HTTP ou HTTPS valide.",
   "composer.contextAttach": "Joindre",

package/src/app/i18n/catalogs/hi-IN.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "यह ब्लॉक अस्थायी रूप से उपलब्ध नहीं है।",
+  "block.loading": "ब्लॉक लोड हो रहा है।",
   "composer.contextUrlLabel": "यूआरएल",
   "composer.contextInvalidUrl": "मान्य HTTP या HTTPS यूआरएल दर्ज करें।",
   "composer.contextAttach": "अटैच करें",

package/src/app/i18n/catalogs/ja-JP.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "このブロックは一時的に利用できません。",
+  "block.loading": "ブロックを読み込み中です。",
   "composer.contextUrlLabel": "URL",
   "composer.contextInvalidUrl":
     "有効な HTTP または HTTPS の URL を入力してください。",

package/src/app/i18n/catalogs/ko-KR.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "이 블록은 일시적으로 사용할 수 없습니다.",
+  "block.loading": "블록을 불러오는 중입니다.",
   "composer.contextUrlLabel": "URL",
   "composer.contextInvalidUrl": "유효한 HTTP 또는 HTTPS URL을 입력하세요.",
   "composer.contextAttach": "첨부",

package/src/app/i18n/catalogs/pt-BR.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "Este bloco está temporariamente indisponível.",
+  "block.loading": "Carregando bloco.",
   "composer.contextUrlLabel": "Endereço URL",
   "composer.contextInvalidUrl": "Insira uma URL HTTP ou HTTPS válida.",
   "composer.contextAttach": "Anexar",

package/src/app/i18n/catalogs/zh-CN.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "此区块暂时不可用。",
+  "block.loading": "正在加载区块。",
   "composer.contextUrlLabel": "网址",
   "composer.contextInvalidUrl": "请输入有效的 HTTP 或 HTTPS 网址。",
   "composer.contextAttach": "附加",

package/src/app/i18n/catalogs/zh-TW.ts

@@ -1,6 +1,8 @@
 import type { ToolkitAgentChatTranslation } from "../types.js";
 
 const messages: ToolkitAgentChatTranslation = {
+  "block.renderUnavailable": "此區塊暫時無法使用。",
+  "block.loading": "正在載入區塊。",
   "composer.contextUrlLabel": "網址",
   "composer.contextInvalidUrl": "請輸入有效的 HTTP 或 HTTPS 網址。",
   "composer.contextAttach": "附加",

package/src/app/org/OrgSwitcher.spec.tsx

@@ -11,8 +11,13 @@ const mocks = vi.hoisted(() => {
     variables: undefined as unknown,
     mutate: vi.fn(),
     reset: vi.fn(),
+    onPersisted: undefined as ((orgId: string | null) => void) | undefined,
   });
-  type MutateOptions = { onSuccess?: () => void; onSettled?: () => void };
+  type MutateOptions = {
+    onError?: () => void;
+    onSuccess?: () => void;
+    onSettled?: () => void;
+  };
   const succeed = (_value: unknown, options?: MutateOptions) => {
     options?.onSuccess?.();
     options?.onSettled?.();
@@ -47,7 +52,12 @@ vi.mock("@agent-native/core/client/org", () => ({
   useCreateOrg: () => mocks.createOrg,
   useJoinByDomain: () => mocks.joinByDomain,
   useOrg: mocks.useOrg,
-  useSwitchOrg: () => mocks.switchOrg,
+  useSwitchOrg: (options?: {
+    onPersisted?: (orgId: string | null) => void;
+  }) => {
+    mocks.switchOrg.onPersisted = options?.onPersisted;
+    return mocks.switchOrg;
+  },
 }));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
@@ -118,6 +128,7 @@ describe("OrgSwitcher (account menu)", () => {
       mutation.mutate.mockReset();
       mutation.mutate.mockImplementation(mocks.succeed);
       mutation.reset.mockReset();
+      mutation.onPersisted = undefined;
     }
     mocks.useSession.mockReturnValue({
       session: { email: "owner@example.com", name: "Session Name" },
@@ -769,6 +780,96 @@ describe("OrgSwitcher (account menu)", () => {
     expect(trigger().getAttribute("aria-expanded")).toBe("false");
   });
 
+  it("closes explicit selections on persistence and leaves reopened menus open", async () => {
+    mocks.useOrg.mockReturnValue({ data: ownerOrg, isLoading: false });
+    let currentOptions: Parameters<typeof mocks.succeed>[1] = undefined;
+    mocks.switchOrg.mutate.mockImplementationOnce((_orgId, options) => {
+      currentOptions = options;
+    });
+
+    render(<OrgSwitcher />);
+    openMenu();
+    await select("Acme");
+
+    expect(trigger().getAttribute("aria-expanded")).toBe("true");
+    act(() => mocks.switchOrg.onPersisted?.("org-1"));
+    expect(trigger().getAttribute("aria-expanded")).toBe("false");
+    expect(currentOptions?.onSuccess).toBeDefined();
+
+    openMenu();
+    act(() => currentOptions?.onSuccess?.());
+    expect(trigger().getAttribute("aria-expanded")).toBe("true");
+
+    let otherOptions: Parameters<typeof mocks.succeed>[1] = undefined;
+    mocks.switchOrg.mutate.mockImplementationOnce((_orgId, options) => {
+      otherOptions = options;
+    });
+    await select("Globex");
+
+    expect(trigger().getAttribute("aria-expanded")).toBe("true");
+    act(() => mocks.switchOrg.onPersisted?.("org-2"));
+    expect(trigger().getAttribute("aria-expanded")).toBe("false");
+    openMenu();
+    act(() => otherOptions?.onSuccess?.());
+    expect(trigger().getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("retries recovery after a failed Personal selection on the same mount", async () => {
+    mocks.useOrg.mockReturnValue({
+      data: { ...ownerOrg, orgId: null, orgName: null, role: null },
+      isLoading: false,
+    });
+    const attempts: Array<Parameters<typeof mocks.succeed>[1]> = [];
+    mocks.switchOrg.mutate.mockImplementation((_orgId, options) => {
+      attempts.push(options);
+    });
+
+    render(<OrgSwitcher />);
+    expect(attempts).toHaveLength(1);
+    openMenu();
+
+    act(() => attempts[0]?.onError?.());
+    act(() => attempts[0]?.onSettled?.());
+    expect(attempts).toHaveLength(1);
+
+    await select("Acme");
+    expect(attempts).toHaveLength(2);
+    act(() => attempts[1]?.onError?.());
+
+    expect(attempts).toHaveLength(3);
+    expect(attempts[2]?.onSuccess).toBeUndefined();
+    expect(attempts[2]?.onSettled).toBeDefined();
+
+    act(() => attempts[2]?.onError?.());
+    act(() => attempts[2]?.onSettled?.());
+    expect(attempts).toHaveLength(3);
+  });
+
+  it("keeps same-target personal recovery separate from explicit selection", async () => {
+    mocks.useOrg.mockReturnValue({
+      data: {
+        ...ownerOrg,
+        orgId: null,
+        orgName: null,
+        role: null,
+      },
+      isLoading: false,
+    });
+    mocks.switchOrg.mutate.mockImplementationOnce(() => {});
+
+    render(<OrgSwitcher />);
+    expect(mocks.switchOrg.mutate).toHaveBeenCalledWith(
+      "org-1",
+      expect.objectContaining({ onError: expect.any(Function) }),
+    );
+    openMenu();
+    await select("Acme");
+
+    expect(mocks.switchOrg.mutate).toHaveBeenCalledTimes(1);
+    act(() => mocks.switchOrg.onPersisted?.("org-1"));
+    expect(trigger().getAttribute("aria-expanded")).toBe("true");
+  });
+
   it("accepts invitations and joins domain matches from the menu", async () => {
     mocks.useOrg.mockReturnValue({
       data: {

package/src/app/org/OrgSwitcher.tsx

@@ -475,7 +475,27 @@ export function OrgSwitcher({
   const { session } = useSession();
   const { enabled: demoModeEnabled } = useDemoModeStatus();
   const t = useT();
-  const switchOrg = useSwitchOrg();
+  const [open, setOpen] = useState(false);
+  const pendingOrgSwitchRef = useRef<
+    | { kind: "explicit"; orgId: string; closedEarly: boolean }
+    | { kind: "personal-recovery"; orgId: string }
+    | null
+  >(null);
+  const switchOrg = useSwitchOrg({
+    onPersisted: (orgId) => {
+      const pendingSwitch = pendingOrgSwitchRef.current;
+      if (
+        orgId === null ||
+        pendingSwitch?.kind !== "explicit" ||
+        pendingSwitch.orgId !== orgId ||
+        pendingSwitch.closedEarly
+      ) {
+        return;
+      }
+      pendingSwitch.closedEarly = true;
+      setOpen(false);
+    },
+  });
   const createOrg = useCreateOrg();
   const acceptInvitation = useAcceptInvitation();
   const joinByDomain = useJoinByDomain();
@@ -487,7 +507,6 @@ export function OrgSwitcher({
     { enabled: !!email },
   );
   const avatarUrl = useAvatarUrl(email);
-  const [open, setOpen] = useState(false);
   const [view, setView] = useState<MenuView>("main");
   const [createOpen, setCreateOpen] = useState(false);
   const [newName, setNewName] = useState("");
@@ -513,22 +532,49 @@ export function OrgSwitcher({
   // Accounts that picked the retired "Personal" choice have `orgId: null`
   // stored while still holding memberships, which strands them outside the
   // org-scoped Builder.io connection and vault credentials. Move them back.
-  // A failed switch retries on the next org fetch, not on the next render:
-  // the mutation's state changes would otherwise re-run this in a tight loop.
+  // Automatic recovery failures wait for the next org fetch to avoid a loop
+  // on mutation state changes. A failed explicit switch from Personal gets one
+  // recovery pass because this effect may have skipped the pending selection.
   const personalRecoveryRef = useRef(false);
+  const [personalRecoveryRetryEpoch, setPersonalRecoveryRetryEpoch] =
+    useState(0);
   const firstMembershipId = org?.orgs?.[0]?.orgId ?? null;
   const switchOrgMutate = switchOrg.mutate;
   useEffect(() => {
-    if (org?.orgId || !firstMembershipId || personalRecoveryRef.current) {
+    if (
+      org?.orgId ||
+      !firstMembershipId ||
+      personalRecoveryRef.current ||
+      pendingOrgSwitchRef.current
+    ) {
       return;
     }
     personalRecoveryRef.current = true;
+    const recovery = {
+      kind: "personal-recovery" as const,
+      orgId: firstMembershipId,
+    };
+    pendingOrgSwitchRef.current = recovery;
     switchOrgMutate(firstMembershipId, {
       onError: () => {
         personalRecoveryRef.current = false;
+        if (pendingOrgSwitchRef.current === recovery) {
+          pendingOrgSwitchRef.current = null;
+        }
+      },
+      onSettled: () => {
+        if (pendingOrgSwitchRef.current === recovery) {
+          pendingOrgSwitchRef.current = null;
+        }
       },
     });
-  }, [org?.orgId, firstMembershipId, switchOrgMutate, dataUpdatedAt]);
+  }, [
+    org?.orgId,
+    firstMembershipId,
+    switchOrgMutate,
+    dataUpdatedAt,
+    personalRecoveryRetryEpoch,
+  ]);
 
   const showView = (next: MenuView) => {
     viewChangedRef.current = true;
@@ -670,8 +716,27 @@ export function OrgSwitcher({
   );
 
   const selectOrg = (orgId: string) => {
-    if (switchOrg.isPending) return;
-    switchOrg.mutate(orgId, { onSuccess: () => setOpen(false) });
+    if (switchOrg.isPending || pendingOrgSwitchRef.current) return;
+    const selectedFromPersonal = org?.orgId == null;
+    const selection = { kind: "explicit" as const, orgId, closedEarly: false };
+    pendingOrgSwitchRef.current = selection;
+    switchOrg.mutate(orgId, {
+      onError: () => {
+        if (pendingOrgSwitchRef.current === selection) {
+          pendingOrgSwitchRef.current = null;
+          if (selectedFromPersonal && !selection.closedEarly) {
+            personalRecoveryRef.current = false;
+            setPersonalRecoveryRetryEpoch((epoch) => epoch + 1);
+          }
+        }
+      },
+      onSuccess: () => {
+        if (pendingOrgSwitchRef.current === selection) {
+          pendingOrgSwitchRef.current = null;
+        }
+        if (!selection.closedEarly) setOpen(false);
+      },
+    });
   };
   const isSwitchingTo = (orgId: string) =>
     switchOrg.isPending && switchOrg.variables === orgId;

package/src/editor/RegistryBlockNode.tsx

@@ -20,6 +20,10 @@ import {
   type MouseEvent as ReactMouseEvent,
 } from "react";
 
+import {
+  BlockRenderErrorFallback,
+  BlockRenderErrorBoundary,
+} from "../app/blocks/BlockRenderErrorBoundary.js";
 import {
   useRegistryBlockData,
   type RegistryBlockDataChangeMeta,
@@ -178,9 +182,12 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
           selectNode(event, true)
         }
       >
-        <RegistryBlockLoadErrorView
+        <BlockRenderErrorFallback
+          blockId={block.id}
+          blockType={blockType}
           message={block.loadError.message}
           rawSource={block.loadError.rawSource}
+          interactive
         />
       </NodeViewWrapper>
     );
@@ -206,8 +213,26 @@ export function RegistryBlockNodeView(props: NodeViewProps) {
     onChange: commitBlockData,
   });
   if (registered) {
-    body = registered.body;
-    editSurface = registered.editSurface ?? null;
+    body = (
+      <BlockRenderErrorBoundary
+        blockId={block.id}
+        blockType={blockType}
+        resetKey={block.data}
+        interactive
+      >
+        {registered.body}
+      </BlockRenderErrorBoundary>
+    );
+    editSurface = registered.editSurface ? (
+      <BlockRenderErrorBoundary
+        blockId={block.id}
+        blockType={blockType}
+        resetKey={block.data}
+        interactive
+      >
+        {registered.editSurface}
+      </BlockRenderErrorBoundary>
+    ) : null;
   } else if (sideMap?.renderLegacyBlock) {
     const selfEdits =
       editable && Boolean(sideMap.legacyBlockSelfEdits?.(blockType));
@@ -281,20 +306,11 @@ export function RegistryBlockLoadErrorView({
   rawSource?: string;
 }) {
   return (
-    <div
-      contentEditable={false}
-      data-plan-interactive
-      className="plan-block-node__load-error space-y-2 rounded-md border border-border px-3 py-2 text-sm"
-    >
-      {rawSource ? (
-        <pre className="overflow-auto whitespace-pre-wrap font-mono text-xs text-foreground">
-          {rawSource}
-        </pre>
-      ) : null}
-      <p role="alert" className="text-muted-foreground">
-        {message}
-      </p>
-    </div>
+    <BlockRenderErrorFallback
+      message={message}
+      rawSource={rawSource}
+      interactive
+    />
   );
 }
 

package/src/ui/slider.tsx

@@ -5,8 +5,10 @@ import { cn } from "../utils.js";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    thumbAriaLabel?: string;
+  }
+>(({ className, thumbAriaLabel, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
@@ -18,7 +20,10 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb
+      aria-label={thumbAriaLabel}
+      className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;