@gentleduck/registry-ui 0.2.4 → 0.2.6

package/.turbo/turbo-check-types.log

@@ -0,0 +1 @@
+$ tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck

package/.turbo/turbo-test.log

@@ -0,0 +1,23 @@
+$ bun test
+bun test v1.3.5 (1e86cebd)
+
+::group::src/chart/__test__/chart.test.tsx:
+(pass) registry-ui chart > ChartContainer server render does not emit invalid size warnings [47.00ms]
+
+::endgroup::
+
+::group::src/button/__test__/button.test.tsx:
+(pass) registry-ui button > buttonVariants returns the shared base styles and defaults
+(pass) registry-ui button > buttonVariants applies explicit variant and size overrides [1.00ms]
+(pass) registry-ui button > button exports keep stable display names
+(pass) registry-ui button > Button renders loading state as a busy disabled native button [9.00ms]
+(pass) registry-ui button > Button preserves explicit disabled state even when loading is false
+(pass) registry-ui button > Button collapses into icon-only mode and hides secondary content [4.00ms]
+(pass) registry-ui button > AnimationIcon renders left and right placements around children [1.00ms]
+
+::endgroup::
+
+ 8 pass
+ 0 fail
+ 25 expect() calls
+Ran 8 tests across 2 files. [742.00ms]

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @gentleduck/registry-ui
 
+## 0.2.6
+
+### Patch Changes
+
+- 2b6e8d0: Resolve all biome lint warnings, improve type safety, and add test coverage across the monorepo.
+- Updated dependencies [2b6e8d0]
+  - @gentleduck/primitives@0.2.5
+  - @gentleduck/variants@0.1.20
+  - @gentleduck/hooks@0.1.12
+  - @gentleduck/motion@0.1.17
+  - @gentleduck/libs@0.1.15
+  - @gentleduck/vim@0.1.16
+
+## 0.2.5
+
+### Patch Changes
+
+- fix(search): disable primitive's built-in filter when using custom lunr search
+
+  The command menu had two competing filtering systems: lunr-based search and the primitive's
+  substring filter. The primitive's filter was hiding items via `el.hidden = true` even when
+  lunr correctly found them, causing search results to not appear. Added `shouldFilter` prop
+  to the Command primitive to allow disabling the built-in filter.
+
+- Updated dependencies
+  - @gentleduck/primitives@0.2.4
+
 ## 0.2.4
 
 ### Patch Changes

package/package.json

@@ -52,8 +52,9 @@
     "access": "public"
   },
   "scripts": {
-    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck"
+    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck",
+    "test": "bun test"
   },
   "type": "module",
-  "version": "0.2.4"
+  "version": "0.2.6"
 }

package/src/_old/_table/index.ts

@@ -1,5 +1,14 @@
+/**
+ * @deprecated These table components are deprecated and no longer maintained.
+ * Use the components from `@duck-ui/registry-ui/table` instead.
+ * This module will be removed in a future release.
+ */
 export * from './table'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.constants'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.hook'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.lib'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.types'

package/src/_old/_table/table.tsx

@@ -206,7 +206,7 @@
 //   DuckTableSearchInputProps
 // >(({ trigger, label, badge, keys }, ref) => {
 //   const {
-//     children: badgeChildren = '⌃+⇧+F',
+//     children: badgeChildren = 'Ctrl+Shift+F',
 //     className: badgeClassName,
 //     ...badgeProps
 //   } = badge ?? {}
@@ -415,7 +415,7 @@
 //           children: 'View',
 //           command: {
 //             key: 'ctrl+shift+v',
-//             label: '⌃+⇧+V',
+//             label: 'Ctrl+Shift+V',
 //           },
 //           icon: {
 //             children: MixerHorizontalIcon as LucideIcon,
@@ -527,7 +527,7 @@
 //         //     }),
 //         // command: {
 //         //     key: 'ctrl+shift+down',
-//         //     label: '⌃+⇧+↓',
+//         //     label: 'Ctrl+Shift+Down',
 //         //     action: () =>
 //         //         setPaginationState({
 //         //             ...paginationState,
@@ -546,7 +546,7 @@
 //         // onClick: () => setPaginationState({ ...paginationState, activePage: 0 }),
 //         // command: {
 //         //     key: 'ctrl+shift+left',
-//         //     label: '⌃+⇧+←',
+//         //     label: 'Ctrl+Shift+Left',
 //         //     action: () => setPaginationState({ ...paginationState, activePage: 0 }),
 //         // },
 //         label: {
@@ -561,7 +561,7 @@
 //         // onClick: () => setPaginationState({ ...paginationState, activePage: resultArrays.length - 1 }),
 //         // command: {
 //         //     key: 'ctrl+shift+right',
-//         //     label: '⌃+⇧+->',
+//         //     label: 'Ctrl+Shift+Right',
 //         //     action: () => setPaginationState({ ...paginationState, activePage: resultArrays.length - 1 }),
 //         // },
 //         label: {
@@ -575,7 +575,7 @@
 //       right={{
 //         command: {
 //           key: 'ctrl+shift+up',
-//           label: '⌃+⇧+↑',
+//           label: 'Ctrl+Shift+Up',
 //           // action: () =>
 //           //     setPaginationState({
 //           //         ...paginationState,
@@ -677,7 +677,7 @@
 //                     className: 'w-[4.5rem] h-[32px] gap-0',
 //                     command: {
 //                       key: 'ctrl+shift+c',
-//                       label: '⌃+⇧+C',
+//                       label: 'Ctrl+Shift+C',
 //                     },
 //                     label: {
 //                       children: 'Rows per page',

package/src/_old/_upload/index.ts

@@ -1,9 +1,22 @@
+/**
+ * @deprecated These upload components are deprecated and no longer maintained.
+ * Use the components from `@duck-ui/registry-ui/upload` instead.
+ * This module will be removed in a future release.
+ */
 export * from './upload'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.assets'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.constants'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.dto'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.lib'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.types'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-advanced'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-advanced-chunks'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-sonner'

package/src/_old/_upload/upload-sonner.tsx

@@ -34,7 +34,7 @@
 //         </p>
 //         <div className="flex items-center gap-2">
 //           {remainingTime && (
-//             <p className="text-foreground-light text-sm font-mono">{`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) && remainingTime !== 0 ? `${formatTime(remainingTime)} remaining – ` : ''}`}</p>
+//             <p className="text-foreground-light text-sm font-mono">{`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) && remainingTime !== 0 ? `${formatTime(remainingTime)} remaining -` : ''}`}</p>
 //           )}
 //           <p className="text-foreground-light text-sm font-mono">{`${progress}%`}</p>
 //         </div>

package/src/audio/audio-visualizer.tsx

@@ -337,7 +337,19 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
       setLoading,
       width,
     })
-  }, [blob])
+  }, [
+    blob,
+    barWidth,
+    currentColors.backgroundColor,
+    currentColors.barColor,
+    currentColors.barPlayedColor,
+    gap,
+    height,
+    minBarHeight,
+    process_audio,
+    setLoading,
+    width,
+  ])
 
   React.useEffect(() => {
     if (!canvasRef.current) return
@@ -359,7 +371,19 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
       gap,
       minBarHeight,
     })
-  }, [data, width, height, currentTime, duration, animationProgress, theme])
+  }, [
+    data,
+    width,
+    currentTime,
+    duration,
+    animationProgress,
+    barWidth,
+    currentColors.backgroundColor,
+    currentColors.barColor,
+    currentColors.barPlayedColor,
+    gap,
+    minBarHeight,
+  ])
 
   return (
     <canvas

package/src/audio/audio.types.ts

@@ -6,8 +6,7 @@ export interface RecordingParams {
 
 export interface StopRecordingHandlerParam {
   setRecording: React.Dispatch<React.SetStateAction<boolean>>
-  // @ts-ignore
-  intervalRef: React.RefObject<NodeJS.Timeout | null>
+  intervalRef: React.RefObject<ReturnType<typeof setInterval> | null>
   mediaRecorderRef: React.RefObject<MediaRecorder | null>
   durationRef: React.RefObject<number>
 }

package/src/button/__test__/button.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { AnimationIcon, Button } from '../button'
+import { buttonVariants } from '../button.constants'
+
+describe('registry-ui button', () => {
+  test('buttonVariants returns the shared base styles and defaults', () => {
+    const classes = buttonVariants()
+
+    expect(classes).toContain('inline-flex')
+    expect(classes).toContain('bg-primary')
+    expect(classes).toContain('h-9')
+  })
+
+  test('buttonVariants applies explicit variant and size overrides', () => {
+    const classes = buttonVariants({ size: 'sm', variant: 'ghost' })
+
+    expect(classes).toContain('h-8')
+    expect(classes).toContain('hover:bg-accent')
+  })
+
+  test('button exports keep stable display names', () => {
+    expect(Button).toBeDefined()
+    expect(Button.displayName).toBe('Button')
+    expect(AnimationIcon.displayName).toBe('AnimationIcon')
+  })
+
+  test('Button renders loading state as a busy disabled native button', () => {
+    const html = renderToStaticMarkup(<Button loading>Save</Button>)
+
+    expect(html).toContain('type="button"')
+    expect(html).toContain('aria-busy="true"')
+    expect(html).toContain('disabled=""')
+    expect(html).toContain('animate-spin')
+    expect(html).toContain('Save')
+  })
+
+  test('Button preserves explicit disabled state even when loading is false', () => {
+    const html = renderToStaticMarkup(
+      <Button disabled loading={false}>
+        Save
+      </Button>,
+    )
+
+    expect(html).toContain('disabled=""')
+    expect(html).not.toContain('aria-busy="true"')
+  })
+
+  test('Button collapses into icon-only mode and hides secondary content', () => {
+    const html = renderToStaticMarkup(
+      <Button icon={<span data-icon="left">L</span>} isCollapsed secondIcon={<span data-icon="right">R</span>}>
+        Save
+      </Button>,
+    )
+
+    expect(html).toContain('data-icon="left"')
+    expect(html).toContain('size-9')
+    expect(html).not.toContain('Save')
+    expect(html).not.toContain('data-icon="right"')
+  })
+
+  test('AnimationIcon renders left and right placements around children', () => {
+    const leftHtml = renderToStaticMarkup(
+      <AnimationIcon animationIcon={{ icon: <span data-icon="left">L</span>, iconPlacement: 'left' }}>
+        Label
+      </AnimationIcon>,
+    )
+    const rightHtml = renderToStaticMarkup(
+      <AnimationIcon animationIcon={{ icon: <span data-icon="right">R</span>, iconPlacement: 'right' }}>
+        Label
+      </AnimationIcon>,
+    )
+
+    expect(leftHtml).toContain('data-icon="left"')
+    expect(leftHtml.indexOf('data-icon="left"')).toBeLessThan(leftHtml.indexOf('Label'))
+    expect(rightHtml).toContain('data-icon="right"')
+    expect(rightHtml.indexOf('Label')).toBeLessThan(rightHtml.indexOf('data-icon="right"'))
+  })
+})

package/src/button/button.tsx

@@ -42,7 +42,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             variant,
           }),
         )}
-        disabled={loading ?? disabled}
+        disabled={Boolean(loading) || disabled}
         ref={ref}
         type={type}>
         {loading ? <Loader aria-hidden="true" className="animate-spin" /> : icon}

package/src/button-group/button-group.tsx

@@ -12,6 +12,7 @@ const ButtonGroup = React.forwardRef<
 >(({ className, orientation = 'horizontal', dir, ...props }, ref) => {
   const direction = useDirection(dir as Direction)
   return (
+    // biome-ignore lint/a11y/useSemanticElements: group role is semantically correct for button groups
     <div
       className={cn(buttonGroupVariants({ orientation }), className)}
       data-orientation={orientation}

package/src/carousel/carousel.tsx

@@ -100,6 +100,7 @@ const Carousel = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLDivEleme
           scrollNext,
           scrollPrev,
         }}>
+        {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: carousel is a custom widget needing roledescription */}
         <section
           aria-roledescription="carousel"
           className={cn('relative', className)}

package/src/chart/__test__/chart.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Bar, BarChart, XAxis } from 'recharts'
+import { ChartContainer } from '../chart'
+
+const data = [{ name: 'alpha', value: 12 }]
+
+describe('registry-ui chart', () => {
+  test('ChartContainer server render does not emit invalid size warnings', () => {
+    const originalWarn = console.warn
+    const warnings: string[] = []
+
+    console.warn = (...args: unknown[]) => {
+      warnings.push(args.map((value) => String(value)).join(' '))
+    }
+
+    try {
+      const html = renderToStaticMarkup(
+        <ChartContainer
+          config={{
+            value: {
+              color: 'hsl(var(--chart-1))',
+              label: 'Value',
+            },
+          }}>
+          <BarChart accessibilityLayer data={data}>
+            <XAxis dataKey="name" hide />
+            <Bar dataKey="value" fill="var(--color-value)" radius={8} />
+          </BarChart>
+        </ChartContainer>,
+      )
+
+      expect(html).toContain('data-slot="chart-container"')
+      expect(warnings.some((message) => message.includes('The width(') && message.includes('height('))).toBe(false)
+    } finally {
+      console.warn = originalWarn
+    }
+  })
+})

package/src/chart/chart.tsx

@@ -15,6 +15,7 @@ import type {
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 export const THEMES = { dark: '.dark', light: '' } as const
+const DEFAULT_CHART_INITIAL_DIMENSION = { width: 640, height: 360 } as const
 
 const ChartContext = React.createContext<ChartContextProps | null>(null)
 
@@ -46,7 +47,9 @@ const ChartContainer = ({ id, className, children, config, ref, dir, ...props }:
         dir={direction}
         ref={ref}>
         <ChartStyle config={config} id={chartId} />
-        <RechartsPrimitive.ResponsiveContainer minWidth={0}>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer initialDimension={DEFAULT_CHART_INITIAL_DIMENSION} minWidth={0}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
@@ -61,6 +64,7 @@ const ChartStyle = ({ id, config }: ChartStyleProps) => {
 
   return (
     <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: controlled CSS injection for chart color themes
       dangerouslySetInnerHTML={{
         __html: Object.entries(THEMES)
           .map(

package/src/checkbox/checkbox.tsx

@@ -37,6 +37,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       onCheckedChange?.(next)
     }
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: changeCheckedState is stable and defined in render scope
     React.useEffect(() => {
       if (ref && typeof ref !== 'function' && checked === 'indeterminate' && ref.current) {
         ref.current.indeterminate = true

package/src/collapsible/collapsible.tsx

@@ -44,6 +44,7 @@ const Collapsible = React.forwardRef<
     onOpenChange?.(state)
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: handleOpenChange and triggerRef are stable refs
   React.useEffect(() => {
     if (open) {
       handleOpenChange(open)
@@ -56,7 +57,7 @@ const Collapsible = React.forwardRef<
 
     triggerRef.current?.addEventListener('click', handleClick)
     return () => triggerRef.current?.removeEventListener('click', handleClick)
-  }, [open])
+  }, [open, onOpenChange])
 
   return (
     <CollapsibleContext.Provider

package/src/command/command.tsx

@@ -162,13 +162,19 @@ function CommandShortcut({
   )
 }
 
-function CommandDialog({ children, ...props }: React.ComponentPropsWithRef<typeof Dialog>): React.JSX.Element {
+function CommandDialog({
+  children,
+  shouldFilter,
+  ...props
+}: React.ComponentPropsWithRef<typeof Dialog> & { shouldFilter?: boolean }): React.JSX.Element {
   return (
     <Dialog {...props}>
       <DialogContent className="h-125 max-w-full p-0 lg:w-[700px]">
         <DialogTitle className="sr-only">Command palette</DialogTitle>
         <DialogDescription className="sr-only">Search for commands and navigation items</DialogDescription>
-        <Command className="max-w-full">{children}</Command>
+        <Command className="max-w-full" shouldFilter={shouldFilter}>
+          {children}
+        </Command>
       </DialogContent>
     </Dialog>
   )

package/src/dialog/dialog-responsive.tsx

@@ -53,7 +53,9 @@ function DialogContentResponsive({
   const isDesktop = useMediaQuery('(min-width: 768px)')
 
   if (isDesktop) {
-    return <DialogContent {...(props as any)}>{children}</DialogContent>
+    return (
+      <DialogContent {...(props as React.ComponentPropsWithoutRef<typeof DialogContent>)}>{children}</DialogContent>
+    )
   }
 
   return <DrawerContent {...(props as React.ComponentPropsWithoutRef<typeof DrawerContent>)}>{children}</DrawerContent>

package/src/field/field.tsx

@@ -58,6 +58,7 @@ function Field({
   ...props
 }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
   return (
+    // biome-ignore lint/a11y/useSemanticElements: field group role is semantically correct for form field grouping
     <div
       className={cn(fieldVariants({ orientation }), className)}
       data-orientation={orientation}
@@ -169,6 +170,7 @@ function FieldError({
 
     return (
       <ul className="ms-4 flex list-disc flex-col gap-1">
+        {/* biome-ignore lint/suspicious/noArrayIndexKey: error messages have no stable unique id */}
         {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
       </ul>
     )

package/src/input-group/input-group.tsx

@@ -12,6 +12,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutR
   ({ className, dir, children, ...props }, ref) => {
     const direction = useDirection(dir as Direction)
     return (
+      // biome-ignore lint/a11y/useSemanticElements: group role is semantically correct for input grouping
       <div
         className={cn(
           'group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30',
@@ -66,6 +67,8 @@ const InputGroupAddon = React.forwardRef<
   React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>
 >(({ className, align = 'inline-start', ...props }, ref) => {
   return (
+    // biome-ignore lint/a11y/useSemanticElements: group role is semantically correct for addon grouping
+    // biome-ignore lint/a11y/useKeyWithClickEvents: click handler delegates focus to input, not interactive itself
     <div
       className={cn(inputGroupAddonVariants({ align }), className)}
       data-align={align}

package/src/item/item.tsx

@@ -10,6 +10,7 @@ const ItemGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRe
   ({ className, dir, ...props }, ref) => {
     const direction = useDirection(dir as Direction)
     return (
+      // biome-ignore lint/a11y/useSemanticElements: list role on div is intentional for composed item patterns
       <div
         className={cn('group/item-group flex flex-col', className)}
         dir={direction}

package/src/json-editor/json-editor.tsx

@@ -243,7 +243,7 @@ export function JsonTextareaField<TFieldValues extends FieldValues>(
 
     const oneLine = committedText.replace(/\s+/g, ' ').trim()
     return oneLine.length > 120 ? `${oneLine.slice(0, 117)}...` : oneLine
-  }, [committedText])
+  }, [committedText, t.nullPreview])
 
   const inlineEditor = (
     <div className="space-y-2" data-slot="json-editor-inline">
@@ -335,67 +335,65 @@ export function JsonTextareaField<TFieldValues extends FieldValues>(
       {fieldState.error ? <FieldError errors={[fieldState.error]} /> : null}
 
       {expandMode === 'sheet' ? (
-        <>
-          <Sheet
-            onOpenChange={(nextOpen) => {
-              if (nextOpen) {
-                openSheet()
-                return
-              }
-
-              requestCloseSheet()
-            }}
-            open={sheetOpen}>
-            <SheetContent className="w-full sm:max-w-3xl" dir={dir} side={sheetSide}>
-              <SheetHeader>
-                <SheetTitle>{sheetTitle}</SheetTitle>
-              </SheetHeader>
-
-              <div className="mt-4 space-y-3" data-slot="json-editor-sheet-content">
-                <JsonEditorView
-                  dir={dir}
-                  lang={lang}
-                  lineHeightPx={lineHeightPx}
-                  lineNumbers={lineNumbers}
-                  onChange={(value) => {
-                    setSheetDraft(value)
-                    setSheetDirty(true)
-                  }}
-                  onKeyDown={sheetHotkeys}
-                  onScroll={setSheetScrollTop}
-                  placeholder={placeholder}
-                  readOnly={!isEditable}
-                  rows={24}
-                  scrollTop={sheetScrollTop}
-                  value={sheetDraft}
-                />
-
-                <div className="flex items-center justify-between gap-2" data-slot="json-editor-sheet-actions">
-                  <div className="text-muted-foreground text-xs">{t.sheetStatusHint}</div>
-
-                  <div className="flex items-center gap-2">
-                    <Button
-                      disabled={!isEditable || !canFormatSheet}
-                      onClick={formatSheet}
-                      size="sm"
-                      type="button"
-                      variant="outline">
-                      {t.format}
-                    </Button>
-
-                    <Button onClick={requestCloseSheet} size="sm" type="button" variant="outline">
-                      {t.close}
-                    </Button>
-
-                    <Button disabled={!isEditable} onClick={saveSheet} size="sm" type="button">
-                      {t.save}
-                    </Button>
-                  </div>
+        <Sheet
+          onOpenChange={(nextOpen) => {
+            if (nextOpen) {
+              openSheet()
+              return
+            }
+
+            requestCloseSheet()
+          }}
+          open={sheetOpen}>
+          <SheetContent className="w-full sm:max-w-3xl" dir={dir} side={sheetSide}>
+            <SheetHeader>
+              <SheetTitle>{sheetTitle}</SheetTitle>
+            </SheetHeader>
+
+            <div className="mt-4 space-y-3" data-slot="json-editor-sheet-content">
+              <JsonEditorView
+                dir={dir}
+                lang={lang}
+                lineHeightPx={lineHeightPx}
+                lineNumbers={lineNumbers}
+                onChange={(value) => {
+                  setSheetDraft(value)
+                  setSheetDirty(true)
+                }}
+                onKeyDown={sheetHotkeys}
+                onScroll={setSheetScrollTop}
+                placeholder={placeholder}
+                readOnly={!isEditable}
+                rows={24}
+                scrollTop={sheetScrollTop}
+                value={sheetDraft}
+              />
+
+              <div className="flex items-center justify-between gap-2" data-slot="json-editor-sheet-actions">
+                <div className="text-muted-foreground text-xs">{t.sheetStatusHint}</div>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    disabled={!isEditable || !canFormatSheet}
+                    onClick={formatSheet}
+                    size="sm"
+                    type="button"
+                    variant="outline">
+                    {t.format}
+                  </Button>
+
+                  <Button onClick={requestCloseSheet} size="sm" type="button" variant="outline">
+                    {t.close}
+                  </Button>
+
+                  <Button disabled={!isEditable} onClick={saveSheet} size="sm" type="button">
+                    {t.save}
+                  </Button>
                 </div>
               </div>
-            </SheetContent>
-          </Sheet>
-        </>
+            </div>
+          </SheetContent>
+        </Sheet>
       ) : null}
 
       <Portal>

package/src/label/label.tsx

@@ -10,6 +10,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, htmlF
   const direction = useDirection(dir as Direction)
 
   return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: label is composed with form controls externally via htmlFor
     <label
       className={cn(
         'text-balance font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',

package/src/preview-panel/preview-panel.tsx

@@ -304,8 +304,8 @@ function PreviewPanel({
     if (!el) return
 
     const dist = (e: TouchEvent) => {
-      const a = e.touches[0]!
-      const b = e.touches[1]!
+      const a = e.touches[0] ?? { clientX: 0, clientY: 0 }
+      const b = e.touches[1] ?? { clientX: 0, clientY: 0 }
       return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY)
     }
 

package/src/separator/separator.tsx

@@ -17,7 +17,6 @@ const Separator = React.forwardRef<
       aria-orientation={orientation}
       className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'min-h-full w-px', className)}
       dir={direction}
-      role="separator"
       {...props}
       data-slot="separator"
     />

package/src/sidebar/sidebar.tsx

@@ -61,7 +61,7 @@ function SidebarProvider({
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+  }, [isMobile, setOpen])
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -91,7 +91,7 @@ function SidebarProvider({
       toggleSidebar,
       dir: direction,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, direction],
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar, direction],
   )
 
   return (

package/src/slider/slider.tsx

@@ -46,6 +46,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-orientation={orientation}
           data-slot="slider-thumb"
+          // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional, index is the stable key
           key={index}
           className="relative block size-4 shrink-0 select-none rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:outline-hidden focus-visible:ring-3 active:ring-3 disabled:pointer-events-none disabled:opacity-50"
         />

package/src/sonner/sonner.chunks.tsx

@@ -31,6 +31,7 @@ const SonnerUpload = ({
         )}
       />
       <div className="flex w-full flex-col gap-2">
+        {/* biome-ignore lint/a11y/useSemanticElements: status role on div is intentional for live region announcements */}
         <div className="flex w-full justify-between" role="status">
           <p className="text-foreground text-sm">
             {progress >= 100

package/src/switch/switch.tsx

@@ -46,6 +46,7 @@ const Switch = React.forwardRef<
           onChange?.(e)
           onCheckedChange?.(e.target.checked)
         }}
+        aria-checked={props.checked}
         ref={ref}
         role="switch"
         dir={direction}

package/src/tabs/tabs.tsx

@@ -35,7 +35,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
 
     React.useEffect(() => {
       if (onValueChange) onValueChange(activeItem)
-    }, [activeItem])
+    }, [activeItem, onValueChange])
 
     return (
       <TabsContext.Provider value={{ activeItem, setActiveItem, tabsId }}>
@@ -74,7 +74,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
 
     React.useEffect(() => {
       if (defaultChecked) setActiveItem(value)
-    }, [defaultChecked])
+    }, [defaultChecked, setActiveItem, value])
 
     return (
       <button

package/tsconfig.json

@@ -19,7 +19,17 @@
     ],
     "rootDir": "./"
   },
-  "exclude": ["node_modules", "dist", "./src/_old", "**/*.tsbuildinfo", "tsconfig.tsbuildinfo"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "./src/_old",
+    "**/__test__/**",
+    "**/__test__/**",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.tsbuildinfo",
+    "tsconfig.tsbuildinfo"
+  ],
   "extends": "@gentleduck/typescript-config/base.json",
   "include": ["./**/*.ts", "./**/*.tsx"]
 }