@alfakit/react 0.1.1 → 0.1.6

package/src/components/fields/image-editor-dialog.tsx

@@ -4,7 +4,7 @@ import type {
   ImageEditorData,
   ImageEditorDragMode,
 } from '@alfakit/core'
-import { ImageEditor, loadEditorImage } from '@alfakit/core'
+import { ImageEditor, imageEditorOptionsKey, loadEditorImage } from '@alfakit/core'
 import {
   FlipHorizontal2Icon,
   FlipVertical2Icon,
@@ -63,9 +63,14 @@ export function ImageEditorDialog({
   const [saving, setSaving] = useState(false)
   const hintId = useId()
 
+  // Restart only for another image or other settings: the schema object itself is new on
+  // every render of a template item (a new builder block), which kept restarting the load.
+  const optionsKey = imageEditorOptionsKey(options)
+
   useEffect(() => {
     if (!request) return
 
+    const options = JSON.parse(optionsKey) as FileUploadImageEditorSchema
     let cancelled = false
 
     loadEditorImage(request.file)
@@ -97,7 +102,7 @@ export function ImageEditorDialog({
         return null
       })
     }
-  }, [request, options])
+  }, [request, optionsKey])
 
   const finish = (file: File | null) => {
     request?.resolve(file)

package/src/components/fields/item-actions.tsx

@@ -12,6 +12,7 @@ import {
   ItemMoveTracker,
   addActionJustify,
   itemActionContext,
+  itemActionIcon,
   resolveItemAction,
   withItemActionState,
 } from '@alfakit/core'
@@ -154,19 +155,41 @@ export function useRunItemAction(context: ActionContext) {
   }
 }
 
-/** Default looks of the built-in actions, for payloads without `itemActions`. */
-export function useItemActionFallbacks(addLabel = ''): Record<ItemActionName, ItemActionFallback> {
+/** Default looks of the built-in actions, for payloads without `itemActions` (icons follow their `alfakit::` aliases). */
+export function useItemActionFallbacks(
+  addLabel = '',
+  kind: 'repeater' | 'builder' = 'repeater',
+): Record<ItemActionName, ItemActionFallback> {
   const t = useT()
 
   return {
     add: { label: addLabel, icon: 'plus', variant: 'outline' },
-    delete: { label: t('form.remove_item', {}, 'Remove'), icon: 'trash-2', color: 'danger' },
-    clone: { label: t('form.clone', {}, 'Clone'), icon: 'copy' },
-    reorder: { label: t('form.reorder_item', {}, 'Reorder'), icon: 'grip-vertical' },
-    moveUp: { label: t('form.move_up', {}, 'Move up'), icon: 'chevron-up' },
-    moveDown: { label: t('form.move_down', {}, 'Move down'), icon: 'chevron-down' },
-    collapse: { label: t('form.collapse_item', {}, 'Collapse'), icon: 'chevron-up' },
-    expand: { label: t('form.expand_item', {}, 'Expand'), icon: 'chevron-down' },
+    delete: {
+      label: t('form.remove_item', {}, 'Remove'),
+      icon: itemActionIcon(kind, 'delete', 'trash-2'),
+      color: 'danger',
+    },
+    clone: { label: t('form.clone', {}, 'Clone'), icon: itemActionIcon(kind, 'clone', 'copy') },
+    reorder: {
+      label: t('form.reorder_item', {}, 'Reorder'),
+      icon: itemActionIcon(kind, 'reorder', 'grip-vertical'),
+    },
+    moveUp: {
+      label: t('form.move_up', {}, 'Move up'),
+      icon: itemActionIcon(kind, 'move-up', 'chevron-up'),
+    },
+    moveDown: {
+      label: t('form.move_down', {}, 'Move down'),
+      icon: itemActionIcon(kind, 'move-down', 'chevron-down'),
+    },
+    collapse: {
+      label: t('form.collapse_item', {}, 'Collapse'),
+      icon: itemActionIcon(kind, 'collapse', 'chevron-up'),
+    },
+    expand: {
+      label: t('form.expand_item', {}, 'Expand'),
+      icon: itemActionIcon(kind, 'expand', 'chevron-down'),
+    },
     collapseAll: {
       label: t('form.collapse_all', {}, 'Collapse all'),
       icon: 'chevrons-down-up',

package/src/components/fields/key-value.tsx

@@ -1,5 +1,6 @@
 import {
   fieldIds,
+  itemActionIcon,
   moveRepeaterItem,
   reorderedItemKeys,
   resolveItemAction,
@@ -51,11 +52,11 @@ export function KeyValueField({ component }: { component: KeyValueSchema }) {
   })
   const deleteAction = resolveItemAction('delete', component, undefined, {
     label: t('form.remove_row', {}, 'Remove row'),
-    icon: 'trash-2',
+    icon: itemActionIcon('key-value', 'delete', 'trash-2'),
   })
   const reorderAction = resolveItemAction('reorder', component, undefined, {
     label: t('form.reorder_item', {}, 'Reorder'),
-    icon: 'grip-vertical',
+    icon: itemActionIcon('key-value', 'reorder', 'grip-vertical'),
   })
 
   const update = (next: Row[]) => setValue(next)

package/src/components/fields/modal-table-select.tsx

@@ -20,7 +20,7 @@ import {
   XIcon,
 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { useChoice, useT } from '../../context'
+import { useChoice, useFormatter, useT } from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
@@ -135,6 +135,7 @@ interface PickerProps {
 
 function ModalTablePicker({ component, initial, onClose, onConfirm }: PickerProps) {
   const t = useT()
+  const format = useFormatter()
   const choice = useChoice()
   const form = useFormStore()
   const multiple = Boolean(component.multiple)
@@ -399,8 +400,12 @@ function ModalTablePicker({ component, initial, onClose, onConfirm }: PickerProp
                 {paging.total !== undefined
                   ? t(
                       'table.showing',
-                      { first: paging.from, last: paging.to, total: paging.total },
-                      `Showing ${paging.from}–${paging.to} of ${paging.total}`,
+                      {
+                        first: format.number(paging.from),
+                        last: format.number(paging.to),
+                        total: format.number(paging.total),
+                      },
+                      'Showing :first–:last of :total',
                     )
                   : `${paging.from}–${paging.to}`}
               </span>

package/src/components/fields/one-time-code-input.tsx

@@ -25,7 +25,6 @@ export function OneTimeCodeInputField({ component }: { component: OneTimeCodeInp
         inputMode="numeric"
         autoComplete="one-time-code"
         pattern="[0-9]*"
-        maxLength={component.length}
         value={value ?? ''}
         onChange={(event) => {
           const code = oneTimeCodeDigits(event.target.value, component.length)
@@ -45,6 +44,7 @@ export function OneTimeCodeInputField({ component }: { component: OneTimeCodeInp
         required={component.required}
         autoFocus={component.autofocus}
         data-slot="one-time-code-input"
+        data-input=""
         {...aria}
         {...extraProps(
           component.extraInputAttributes,

package/src/components/fields/repeater-table.tsx

@@ -7,6 +7,7 @@ import type {
   TableColumnSchema,
 } from '@alfakit/core'
 import { resolveItemAction, tableColumnAlignmentClass, tableColumnCells } from '@alfakit/core'
+import type { CSSProperties } from 'react'
 import { useT } from '../../context'
 import type { VirtualListBinding } from '../../hooks/use-virtual-list'
 import { cn } from '../../lib/utils'
@@ -41,6 +42,16 @@ export interface RepeaterTableProps {
   extraActionsFor?: (index: number) => ActionSchema[] | undefined
 }
 
+/**
+ * A fixed `width()` (`9rem`, `120px`) is also the column's minimum, so the table scrolls
+ * sideways instead of squeezing its fields; percentages stay flexible.
+ */
+function columnWidthStyle(width?: string | null): CSSProperties | undefined {
+  if (!width) return undefined
+
+  return width.trim().endsWith('%') ? { width } : { width, minWidth: width }
+}
+
 /** Header cells shared by the Repeater and RepeatableEntry tables. */
 export function TableColumnHeaders({ columns }: { columns: TableColumnSchema[] }) {
   return (
@@ -49,7 +60,7 @@ export function TableColumnHeaders({ columns }: { columns: TableColumnSchema[] }
         <th
           key={`${column.name ?? 'column'}-${index}`}
           scope="col"
-          style={column.width ? { width: column.width } : undefined}
+          style={columnWidthStyle(column.width)}
           className={cn(
             'text-muted-foreground px-3 py-2 text-xs font-medium',
             tableColumnAlignmentClass(column),

package/src/components/fields/repeater.tsx

@@ -13,7 +13,7 @@ import {
   removeIndexedState,
   removeRepeaterItem,
   reorderedItemKeys,
-  replacePlaceholder,
+  templateForIndex,
   virtualizeOptions,
 } from '@alfakit/core'
 import { useState } from 'react'
@@ -125,8 +125,7 @@ function RepeaterFieldContent({ component }: { component: RepeaterSchema }) {
     )
 
   const schemaFor = (index: number): SchemaComponent[] =>
-    component.items[index]?.schema ??
-    replacePlaceholder(component.template, '__INDEX__', String(index))
+    component.items[index]?.schema ?? templateForIndex(component.template, index)
 
   const canAdd =
     component.addable &&

package/src/components/fields/rich-editor.tsx

@@ -9,6 +9,7 @@ import {
   attachToolbarKeyboard,
   commandLabel,
   detailsNodeConfigs,
+  documentNonce,
   EditorAttachments,
   fieldIds,
   fileAttachmentError,
@@ -403,6 +404,8 @@ function RichEditorInput({
   useEffect(() => () => attachments.destroy(), [attachments])
 
   const editor = useEditor({
+    // TipTap injects its base CSS; with the page's CSP nonce a nonce-based policy allows it.
+    injectNonce: documentNonce(),
     extensions: [
       StarterKit.configure({ link: false }),
       Link.configure(linkExtensionOptions(component.linkProtocols)),

package/src/components/fields/select.tsx

@@ -65,7 +65,9 @@ export function SelectField({ component }: { component: SelectSchema }) {
             className="border-input dark:bg-input/30 focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
           >
             {component.selectablePlaceholder && (
-              <option value="">{component.placeholder ?? ''}</option>
+              <option value="">
+                {component.placeholder ?? t('select_option', {}, 'Select an option')}
+              </option>
             )}
             {component.options.map((option) =>
               isOptionGroup(option) ? (
@@ -103,7 +105,9 @@ export function SelectField({ component }: { component: SelectSchema }) {
               aria-readonly={readOnly || undefined}
               className="w-full"
             >
-              <SelectValue placeholder={component.placeholder ?? ''} />
+              <SelectValue
+                placeholder={component.placeholder ?? t('select_option', {}, 'Select an option')}
+              />
             </SelectTrigger>
             <SelectContent>
               {component.selectablePlaceholder &&
@@ -411,7 +415,7 @@ function ComboboxSelect({
             error && 'border-destructive',
           )}
         >
-          <span className="flex flex-1 flex-wrap items-center gap-1 text-start">
+          <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
             {selected.length === 0 && (
               <span className="text-muted-foreground">
                 {component.placeholder ?? t('select_option', {}, 'Select an option')}

package/src/components/file-manager/file-manager.tsx

@@ -322,7 +322,7 @@ export function FileManagerView({ schema, onChoose, onCancel }: FileManagerViewP
         )}
         <nav
           aria-label={tt('breadcrumb', {}, 'Folder path')}
-          className="min-w-0 flex-1"
+          className="min-w-0 flex-[1_1_12rem]"
           data-slot="file-manager-breadcrumb"
         >
           <ol className="flex min-w-0 flex-wrap items-center gap-1 text-sm">

package/src/components/form/form-block.tsx

@@ -13,6 +13,7 @@ import {
   registerFormSubmitter,
   registerPageForm,
   resolvePartialProps,
+  shouldResyncForm,
   wizardProgressStore,
 } from '@alfakit/core'
 import { router } from '@inertiajs/react'
@@ -93,6 +94,10 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
   const latestBlock = useRef(block)
   const submittedBlock = useRef<FormBlockSchema | null>(null)
   const refillPending = useRef(false)
+  // Another action succeeded and its new block has not arrived yet.
+  const resyncPending = useRef(false)
+  // The block when the latest non-GET visit started, to tell whether its response arrived.
+  const visitBlock = useRef<FormBlockSchema | null>(null)
 
   useEffect(() => {
     latestBlock.current = block
@@ -101,6 +106,12 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       refillPending.current = false
       store.fill(block)
     }
+
+    if (resyncPending.current) {
+      resyncPending.current = false
+
+      if (!store.isDirty) store.fill(block)
+    }
   }, [block, store])
 
   const actions: ActionSchema[] = useMemo(
@@ -117,7 +128,8 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       submitting.current = true
       submittedBlock.current = latestBlock.current
       store.setProcessing(true)
-      runner.execute(action, ctx, store.state.values)
+      // A click that blurred a live field started a refresh: send the state it returns.
+      store.whenSettled(() => runner.execute(action, ctx, store.state.values))
     },
     [runner, store],
   )
@@ -152,11 +164,24 @@ export function FormBlock({ block }: { block: FormBlockSchema }) {
       if (submitting.current && !submitVisit.current && visit.method !== 'get') {
         submitVisit.current = visit.id
       }
+
+      if (visit.method !== 'get') visitBlock.current = latestBlock.current
     })
 
     const offSuccess = router.on('success', (event) => {
       const id = submitVisit.current
 
+      // Another action changed the record: show the server's new form unless it holds edits.
+      if (!id && shouldResyncForm(pageFlash(event.detail.page), store)) {
+        if (latestBlock.current !== visitBlock.current) {
+          store.fill(latestBlock.current)
+        } else {
+          resyncPending.current = true
+        }
+
+        return
+      }
+
       if (!id || (event.detail.visitId ?? id) !== id) return
 
       // A halted action (rate limit, `halt()`) saved nothing: keep what the user typed.

package/src/components/form/form-context.tsx

@@ -1,5 +1,5 @@
 import type { BaseField, FieldAriaAttributes, FormState, FormStore } from '@alfakit/core'
-import { fieldAria } from '@alfakit/core'
+import { fieldAria, fieldDomId, fieldError } from '@alfakit/core'
 import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react'
 import { useStore, useStoreSelector } from '../../hooks/use-store'
 
@@ -60,15 +60,12 @@ export function useField<T = unknown>(field: BaseField): FieldBinding<T> {
     return current as T
   })
 
-  const error = useStoreSelector(store.store, (state) => state.errors[path]?.[0])
+  const error = useStoreSelector(store.store, (state) => fieldError(state.errors, path))
 
   const setValue = useCallback((next: T) => store.setValue(path, next), [store, path])
   const blur = useCallback(() => store.blur(path), [store, path])
 
-  const id = useMemo(
-    () => field.id ?? `alfakit-${path.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
-    [field.id, path],
-  )
+  const id = useMemo(() => field.id ?? fieldDomId(store.idPrefix, path), [field.id, store, path])
 
   const aria = useMemo(
     () =>

package/src/components/kanban/kanban.tsx

@@ -28,7 +28,14 @@ import {
   SearchIcon,
 } from 'lucide-react'
 import { Fragment, useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'
-import { useActionRunner, useDirection, useFormatter, usePanel, useT } from '../../context'
+import {
+  useActionRunner,
+  useChoice,
+  useDirection,
+  useFormatter,
+  usePanel,
+  useT,
+} from '../../context'
 import { useStore } from '../../hooks/use-store'
 import { badgeColorClasses, colorClass, cssColor } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
@@ -424,6 +431,7 @@ function ColumnHeader({
   onCreate: () => void
   t: Translate
 }) {
+  const choice = useChoice()
   const wip = kanbanWipState(column)
   const shown =
     column.wipLimit !== undefined ? column.count : filtered ? column.total : column.count
@@ -436,7 +444,7 @@ function ColumnHeader({
             { shown: column.total, count: column.count },
             ':shown of :count cards',
           )
-        : t('kanban.count', { count: column.count }, ':count cards')
+        : choice('kanban.count', column.count, {}, '{1} :count card|[0,*] :count cards')
   const style = column.color ? { borderTopColor: cssColor(column.color) } : undefined
   const toggleLabel = collapsed
     ? t('kanban.expand', { column: column.label }, 'Expand :column')
@@ -532,7 +540,12 @@ function ColumnHeader({
       )}
       {wip === 'over' && (
         <p className="text-destructive text-xs">
-          {t('kanban.wip_over', { limit: column.wipLimit ?? 0 }, 'Over the limit of :limit cards')}
+          {choice(
+            'kanban.wip_over',
+            column.wipLimit ?? 0,
+            { limit: column.wipLimit ?? 0 },
+            '{1} Over the limit of :limit card|[0,*] Over the limit of :limit cards',
+          )}
         </p>
       )}
       {wip === 'full' && column.wipStrict && (

package/src/components/layout/fused-group.tsx

@@ -25,7 +25,11 @@ export function FusedGroupComponent({ component }: { component: FusedGroupSchema
       {...extraProps(component.extraAttributes, 'flex flex-col gap-1.5')}
     >
       {component.label && (
-        <span id={labelId} className="text-sm leading-none font-medium select-none">
+        <span
+          id={labelId}
+          data-slot="label"
+          className="text-sm leading-none font-medium select-none"
+        >
           {component.label}
         </span>
       )}

package/src/components/layout/section.tsx

@@ -76,11 +76,11 @@ export function SectionComponent({ component }: { component: SectionSchema }) {
         {component.heading &&
           createElement(
             headingTag(component.headingLevel),
-            { className: 'text-base leading-6 font-semibold' },
+            { className: 'text-base leading-6 font-semibold break-words' },
             component.heading,
           )}
         {component.description && (
-          <p className="text-muted-foreground mt-1 text-sm">{component.description}</p>
+          <p className="text-muted-foreground mt-1 text-sm break-words">{component.description}</p>
         )}
       </div>
       {component.headerActions && component.headerActions.length > 0 && (

package/src/components/layout/tabs.tsx

@@ -1,30 +1,51 @@
 import type { TabSchema, TabsSchema } from '@alfakit/core'
-import { readPersisted, schemaGapClass, writePersisted } from '@alfakit/core'
+import {
+  componentHasErrors,
+  readPersisted,
+  schemaGapClass,
+  tabFromQuery,
+  tabQueryValue,
+  tabToReveal,
+  writePersisted,
+} from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
 import { useEffect, useState } from 'react'
+import { useT } from '../../context'
 import { useHydrated } from '../../hooks/use-hydrated'
+import { useStoreSelector } from '../../hooks/use-store'
 import { extraProps } from '../../lib/attributes'
 import { badgeColorClasses, colorClass } from '../../lib/colors'
 import { Icon } from '../../lib/icons'
 import { cn } from '../../lib/utils'
+import { useOptionalFormStore } from '../form/form-context'
 import { SchemaRenderer } from '../schema/schema-renderer'
 import { Badge } from '../ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import { DeferredSchema, useDeferredBadge } from './deferred'
 
+// Used when tabs render outside a form. Module-level so the snapshot stays stable.
+const NO_ERRORS: Record<string, string[]> = {}
+const NO_FORM_STORE = {
+  get: () => ({ errors: NO_ERRORS }),
+  subscribe: () => () => {},
+}
+
+const TAB_INVALID_CLASSES =
+  'text-destructive data-[state=active]:text-destructive dark:text-destructive dark:data-[state=active]:text-destructive'
+
 export function TabsComponent({ component }: { component: TabsSchema }) {
   const tabs = component.schema ?? []
   // The page URL (not `window.location`) so the server renders the same tab as the browser.
   const url = usePage().url
+  // The tab's readable value (`?tab=billing-address`), or its key in links from older versions.
   const fromQuery = component.queryStringKey
-    ? new URL(url, 'http://localhost').searchParams.get(component.queryStringKey)
+    ? tabFromQuery(
+        tabs,
+        new URL(url, 'http://localhost').searchParams.get(component.queryStringKey),
+      )
     : null
   const [initial] = useState<string>(
-    () =>
-      tabs.find((tab) => tab.key === fromQuery)?.key ??
-      tabs[Math.max(0, component.activeTab - 1)]?.key ??
-      tabs[0]?.key ??
-      '',
+    () => fromQuery ?? tabs[Math.max(0, component.activeTab - 1)]?.key ?? tabs[0]?.key ?? '',
   )
 
   const persist = component.persistTab
@@ -36,6 +57,21 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
     hydrated && persist && !fromQuery ? readPersisted(persist.key, persist.storage) : null
   const active = chosen ?? (stored && tabs.some((tab) => tab.key === stored) ? stored : initial)
 
+  // Tabs holding a field with a validation error are marked, and when a submit brings new
+  // errors while the open tab has none, the first tab with an error opens.
+  const t = useT()
+  const store = useOptionalFormStore()
+  const errors = useStoreSelector(store?.store ?? NO_FORM_STORE, (state) => state.errors)
+  const [seenErrors, setSeenErrors] = useState<Record<string, string[]>>({})
+
+  if (seenErrors !== errors) {
+    setSeenErrors(errors)
+
+    const reveal = tabToReveal(tabs, active, seenErrors, errors)
+
+    if (reveal !== null) setChosen(reveal)
+  }
+
   const changeTab = (value: string) => {
     setChosen(value)
 
@@ -45,10 +81,11 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
   useEffect(() => {
     if (!component.queryStringKey || typeof window === 'undefined') return
 
+    const tab = tabs.find((item) => item.key === active)
     const url = new URL(window.location.href)
-    url.searchParams.set(component.queryStringKey, active)
+    url.searchParams.set(component.queryStringKey, tab ? tabQueryValue(tab) : active)
     window.history.replaceState(window.history.state, '', url)
-  }, [active, component.queryStringKey])
+  }, [active, component.queryStringKey, tabs])
 
   return (
     <Tabs
@@ -76,14 +113,32 @@ export function TabsComponent({ component }: { component: TabsSchema }) {
               : 'relative max-w-full overflow-x-auto',
         )}
       >
-        {tabs.map((tab) => (
-          <TabsTrigger key={tab.key} value={tab.key}>
-            {tab.icon && tab.iconPosition !== 'after' && <Icon name={tab.icon} />}
-            {tab.label}
-            {tab.icon && tab.iconPosition === 'after' && <Icon name={tab.icon} />}
-            <TabBadge tab={tab} />
-          </TabsTrigger>
-        ))}
+        {tabs.map((tab) => {
+          const invalid = componentHasErrors(tab, errors)
+
+          return (
+            <TabsTrigger
+              key={tab.key}
+              value={tab.key}
+              data-invalid={invalid || undefined}
+              className={invalid ? TAB_INVALID_CLASSES : undefined}
+            >
+              {tab.icon && tab.iconPosition !== 'after' && <Icon name={tab.icon} />}
+              {tab.label}
+              {tab.icon && tab.iconPosition === 'after' && <Icon name={tab.icon} />}
+              <TabBadge tab={tab} />
+              {invalid && (
+                <>
+                  <span
+                    aria-hidden="true"
+                    className="bg-destructive size-1.5 shrink-0 rounded-full"
+                  />
+                  <span className="sr-only">({t('translatable.has_errors')})</span>
+                </>
+              )}
+            </TabsTrigger>
+          )
+        })}
       </TabsList>
       {tabs.map((tab) => (
         <TabsContent

package/src/components/panel/app-sidebar.tsx

@@ -41,50 +41,14 @@ import {
   SidebarMenuSubItem,
   SidebarRail,
 } from '../ui/sidebar'
+import { Brand } from './brand'
 import { GlobalSearch } from './global-search'
 import { NavLabel } from './nav-label'
 import { Slot } from './slot'
 import { TenantMenu } from './tenant-menu'
 import { UserMenu } from './user-menu'
 
-export function Brand({ className }: { className?: string }) {
-  const panel = usePanel()
-
-  return (
-    <Link
-      href={panel.url ?? '/'}
-      className={cn('flex items-center gap-2 overflow-hidden', className)}
-    >
-      {panel.brandLogo ? (
-        <>
-          <img
-            src={panel.brandLogo}
-            alt={panel.brandName}
-            style={{ height: panel.brandLogoHeight ?? '1.75rem' }}
-            className={cn('max-w-full object-contain', panel.darkModeBrandLogo && 'dark:hidden')}
-          />
-          {panel.darkModeBrandLogo && (
-            <img
-              src={panel.darkModeBrandLogo}
-              alt={panel.brandName}
-              style={{ height: panel.brandLogoHeight ?? '1.75rem' }}
-              className="hidden max-w-full object-contain dark:block"
-            />
-          )}
-        </>
-      ) : (
-        <>
-          <span className="bg-primary text-primary-foreground flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold">
-            {panel.brandName.charAt(0)}
-          </span>
-          <span className="truncate text-sm font-semibold group-data-[collapsible=icon]:hidden">
-            {panel.brandName}
-          </span>
-        </>
-      )}
-    </Link>
-  )
-}
+export { Brand } from './brand'
 
 function NavBadge({ item }: { item: NavigationItemSchema }) {
   const t = useT()