@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/translation-manager/translation-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-manager.js","names":[],"sources":["../../../src/components/translation-manager/translation-manager.tsx"],"sourcesContent":["import type {\n  TranslationCellRef,\n  TranslationFilter,\n  TranslationLocaleSchema,\n  TranslationManagerEnvironment,\n  TranslationManagerSchema,\n  TranslationRowSchema,\n} from '@alfakit/core'\nimport { TranslationManagerController, clientErrorNotification } from '@alfakit/core'\nimport {\n  CheckIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  CopyIcon,\n  HistoryIcon,\n  LanguagesIcon,\n  SearchIcon,\n  SparklesIcon,\n  TriangleAlertIcon,\n  XIcon,\n} from 'lucide-react'\nimport { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'\nimport { useActionRunner, useDirection, useFormatter, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Card, CardContent, CardHeader } from '../ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Input } from '../ui/input'\nimport { Textarea } from '../ui/textarea'\n\nconst SELECT =\n  'border-input focus-visible:border-ring focus-visible:ring-ring/50 h-9 min-w-0 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]'\n\nconst cellKey = (ref: TranslationCellRef) => `${ref.row}\\u0000${ref.locale}`\n\n/**\n * The translation editor of alfasix/alfakit-translation-manager: keys by locale with search,\n * filters, inline editing (plural forms, right-to-left inputs), keyboard navigation, AI\n * suggestion review and history. Everything is computed and saved by the server.\n */\nexport function TranslationManager({ component }: { component?: TranslationManagerSchema }) {\n  return component ? (\n    <TranslationManagerView key={component.actionComponent} schema={component} />\n  ) : null\n}\n\nfunction TranslationManagerView({ schema }: { schema: TranslationManagerSchema }) {\n  const runner = useActionRunner()\n  const page = usePageActionContext()\n  const t = useT()\n  const direction = useDirection()\n  const formatter = useFormatter()\n  const labelId = useId()\n  const hintId = useId()\n  const environment = (): TranslationManagerEnvironment => ({\n    runner,\n    token: page.token,\n    t,\n    notify: (notifications) => notifications.forEach((notification) => showToast(notification)),\n    error: (message) => showToast(clientErrorNotification('translation-manager', message)),\n  })\n  const [controller] = useState(() => new TranslationManagerController(schema, environment()))\n\n  useEffect(() => {\n    controller.setEnvironment(environment())\n  })\n\n  const first = useRef(true)\n\n  useEffect(() => {\n    if (first.current) {\n      first.current = false\n\n      return\n    }\n\n    controller.setSchema(schema)\n  }, [controller, schema])\n\n  useEffect(() => () => controller.dispose(), [controller])\n\n  const state = useStore(controller.store)\n  const cells = useRef(new Map<string, HTMLElement>())\n  const editor = useRef<HTMLTextAreaElement | null>(null)\n  const locales = controller.visibleLocales()\n  const active =\n    state.active && state.rows.some((row) => row.id === state.active?.row)\n      ? state.active\n      : state.rows[0] && locales[0]\n        ? { row: state.rows[0].id, locale: locales[0].code }\n        : null\n\n  const focusCell = (ref: TranslationCellRef | undefined) => {\n    if (!ref) return\n    controller.focus(ref)\n    requestAnimationFrame(() => cells.current.get(cellKey(ref))?.focus())\n  }\n\n  useEffect(() => {\n    if (state.editing) {\n      requestAnimationFrame(() => editor.current?.focus())\n    }\n  }, [state.editing])\n\n  const onCellKeyDown = (ref: TranslationCellRef) => (event: KeyboardEvent<HTMLElement>) => {\n    if (event.target !== event.currentTarget) return\n\n    const result = controller.handleCellKey(ref, event, direction)\n\n    if (result.handled) {\n      event.preventDefault()\n      if (!controller.state.editing) focusCell(result.focus)\n    }\n  }\n\n  const onEditorKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (\n      event.key === 'Escape' ||\n      (event.key === 'Enter' && !event.shiftKey) ||\n      event.key === 'Tab'\n    ) {\n      event.preventDefault()\n      void controller\n        .handleEditorKey({\n          key: event.key,\n          shiftKey: event.shiftKey,\n          isComposing: event.nativeEvent.isComposing,\n        })\n        .then((result) => focusCell(result.focus))\n    }\n  }\n\n  const range = controller.range()\n  const suggestionLocales = controller.suggestionLocales()\n  const activeRow = active ? controller.row(active.row) : undefined\n  const activeLocale = active ? controller.locale(active.locale) : undefined\n\n  return (\n    <Card className=\"gap-4 py-4\" data-slot=\"translation-manager\">\n      <CardHeader className=\"flex flex-col gap-4 px-5\">\n        <span id={labelId} className=\"sr-only\">\n          {t('translation-manager.label', {}, 'Translations')}\n        </span>\n        <ul\n          className=\"grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6\"\n          data-slot=\"translation-progress\"\n        >\n          {schema.locales.map((locale) => {\n            const progress = state.progress[locale.code]\n            const percent = progress ? progress.percent : 0\n\n            return (\n              <li\n                key={locale.code}\n                className=\"flex min-w-0 flex-col gap-1 rounded-md border px-3 py-2\"\n              >\n                <div className=\"flex items-center justify-between gap-2 text-sm\">\n                  <span className=\"truncate font-medium\" lang={locale.code}>\n                    {locale.label}\n                  </span>\n                  <span className=\"text-muted-foreground font-mono text-xs\">{locale.code}</span>\n                </div>\n                <div\n                  role=\"progressbar\"\n                  aria-valuemin={0}\n                  aria-valuemax={100}\n                  aria-valuenow={Math.round(percent * 100)}\n                  aria-label={t(\n                    'translation-manager.progress_label',\n                    {\n                      locale: locale.label,\n                      translated: progress?.translated ?? 0,\n                      total: progress?.total ?? 0,\n                    },\n                    ':locale: :translated of :total translated',\n                  )}\n                  className=\"bg-muted h-1.5 overflow-hidden rounded-full\"\n                >\n                  <div\n                    className=\"bg-primary h-full rounded-full transition-[width]\"\n                    style={{ width: `${percent * 100}%` }}\n                  />\n                </div>\n                <span className=\"text-muted-foreground text-xs\">\n                  {t(\n                    'translation-manager.progress',\n                    { percent: formatter.percent(percent) },\n                    ':percent translated',\n                  )}\n                </span>\n              </li>\n            )\n          })}\n        </ul>\n        <div className=\"flex flex-wrap items-center gap-2\" data-slot=\"translation-toolbar\">\n          <div className=\"relative min-w-48 flex-1\">\n            <SearchIcon\n              className=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              type=\"search\"\n              value={state.search}\n              onChange={(event) => controller.setSearch(event.target.value)}\n              placeholder={t('translation-manager.search', {}, 'Search keys and texts…')}\n              aria-label={t('translation-manager.search_label', {}, 'Search translations')}\n              className=\"ps-8\"\n            />\n          </div>\n          <label className=\"flex items-center gap-2 text-sm\">\n            <span className=\"sr-only\">{t('translation-manager.filter_label', {}, 'Show')}</span>\n            <select\n              className={SELECT}\n              value={state.filter}\n              onChange={(event) => controller.setFilter(event.target.value as TranslationFilter)}\n            >\n              {schema.filters.map((filter) => (\n                <option key={filter} value={filter}>\n                  {t(`translation-manager.filters.${filter}`, {}, filter)}\n                </option>\n              ))}\n            </select>\n          </label>\n          <label className=\"flex items-center gap-2 text-sm\">\n            <span className=\"sr-only\">{t('translation-manager.group_label', {}, 'Group')}</span>\n            <select\n              className={SELECT}\n              value={state.group}\n              onChange={(event) => controller.setGroup(event.target.value)}\n            >\n              <option value=\"\">{t('translation-manager.all_groups', {}, 'All groups')}</option>\n              {schema.groups.map((group) => (\n                <option key={group.value} value={group.value}>\n                  {group.label}\n                </option>\n              ))}\n            </select>\n          </label>\n          <DropdownMenu dir={direction}>\n            <DropdownMenuTrigger asChild>\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"h-9\">\n                <LanguagesIcon aria-hidden=\"true\" />\n                {t('translation-manager.locales_label', {}, 'Languages')}\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {schema.locales.map((locale) => (\n                <DropdownMenuCheckboxItem\n                  key={locale.code}\n                  checked={state.visibleLocales.includes(locale.code)}\n                  onCheckedChange={(checked) =>\n                    controller.toggleLocale(locale.code, checked === true)\n                  }\n                  onSelect={(event) => event.preventDefault()}\n                >\n                  {locale.label}{' '}\n                  <span className=\"text-muted-foreground ms-auto font-mono text-xs\">\n                    {locale.code}\n                  </span>\n                </DropdownMenuCheckboxItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        {suggestionLocales.length > 0 && (\n          <div\n            className=\"bg-muted/50 flex flex-col gap-2 rounded-md border px-3 py-2 text-sm\"\n            data-slot=\"translation-suggestions\"\n          >\n            {suggestionLocales.map((code) => (\n              <div key={code} className=\"flex flex-wrap items-center gap-2\">\n                <SparklesIcon className=\"text-primary size-4\" aria-hidden=\"true\" />\n                <span className=\"flex-1 font-medium\">\n                  {t('translation-manager.suggestion', {}, 'AI suggestion')} ·{' '}\n                  {controller.locale(code)?.label}\n                </span>\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  variant=\"outline\"\n                  onClick={() => void controller.decideAll(code, 'reject')}\n                >\n                  {t('translation-manager.reject_all', {}, 'Reject all')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  onClick={() => void controller.decideAll(code, 'accept')}\n                >\n                  {t('translation-manager.accept_all', {}, 'Accept all without warnings')}\n                </Button>\n              </div>\n            ))}\n          </div>\n        )}\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4 px-5\">\n        <p id={hintId} className=\"text-muted-foreground text-xs\">\n          {t(\n            'translation-manager.keyboard',\n            {},\n            'Arrow keys move between texts. Enter edits and saves, Shift + Enter adds a line break, Escape cancels.',\n          )}\n        </p>\n        {state.rows.length === 0 ? (\n          <p className=\"text-muted-foreground py-10 text-center text-sm\">\n            {t('translation-manager.empty', {}, 'No translations match your search.')}\n          </p>\n        ) : (\n          <div className=\"overflow-x-auto rounded-md border\" data-slot=\"translation-grid-scroll\">\n            <table\n              role=\"grid\"\n              aria-labelledby={labelId}\n              aria-describedby={hintId}\n              aria-busy={state.loading || undefined}\n              aria-rowcount={state.total + 1}\n              className={cn('w-full border-collapse text-sm', state.loading && 'opacity-60')}\n              data-slot=\"translation-grid\"\n            >\n              <thead className=\"bg-muted/50\">\n                <tr>\n                  <th\n                    scope=\"col\"\n                    className=\"bg-muted sticky start-0 z-10 min-w-56 border-b px-3 py-2 text-start font-medium\"\n                  >\n                    {t('translation-manager.key', {}, 'Key')}\n                  </th>\n                  {locales.map((locale) => (\n                    <th\n                      key={locale.code}\n                      scope=\"col\"\n                      className=\"min-w-64 border-s border-b px-3 py-2 text-start font-medium\"\n                    >\n                      <span className=\"flex items-center gap-2\">\n                        <span lang={locale.code}>{locale.label}</span>\n                        <span className=\"text-muted-foreground font-mono text-xs\">\n                          {locale.code}\n                        </span>\n                        {locale.base && (\n                          <Badge variant=\"secondary\">\n                            {t('translation-manager.base', {}, 'Base')}\n                          </Badge>\n                        )}\n                        {!locale.editable && (\n                          <Badge variant=\"outline\">\n                            {t('translation-manager.read_only', {}, 'Read only')}\n                          </Badge>\n                        )}\n                      </span>\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {state.rows.map((row) => (\n                  <tr key={row.id} className=\"border-b last:border-b-0\" data-slot=\"translation-row\">\n                    <th\n                      scope=\"row\"\n                      className=\"bg-card sticky start-0 z-10 px-3 py-2 text-start align-top font-normal\"\n                    >\n                      <KeyCell row={row} />\n                    </th>\n                    {locales.map((locale) => {\n                      const ref = { row: row.id, locale: locale.code }\n                      const cell = row.cells[locale.code]\n                      const isActive = active?.row === row.id && active.locale === locale.code\n                      const isEditing =\n                        state.editing?.row === row.id && state.editing.locale === locale.code\n\n                      return (\n                        <td\n                          key={locale.code}\n                          ref={(element) => {\n                            if (element) cells.current.set(cellKey(ref), element)\n                            else cells.current.delete(cellKey(ref))\n                          }}\n                          role=\"gridcell\"\n                          tabIndex={isActive && !isEditing ? 0 : -1}\n                          aria-selected={isActive}\n                          aria-readonly={!controller.isEditable(ref) || undefined}\n                          aria-label={\n                            isEditing\n                              ? undefined\n                              : t(\n                                  'translation-manager.edit',\n                                  { key: row.key, locale: locale.label },\n                                  'Edit :key in :locale',\n                                )\n                          }\n                          data-slot=\"translation-cell\"\n                          data-missing={cell?.value ? undefined : ''}\n                          data-changed={cell?.changed ? '' : undefined}\n                          data-active={isActive ? '' : undefined}\n                          onFocus={(event) =>\n                            event.target === event.currentTarget && controller.focus(ref)\n                          }\n                          onClick={() => {\n                            if (!isEditing) {\n                              controller.focus(ref)\n                              if (isActive) controller.startEdit(ref)\n                            }\n                          }}\n                          onDoubleClick={() => controller.startEdit(ref)}\n                          onKeyDown={onCellKeyDown(ref)}\n                          className={cn(\n                            'hover:bg-accent/40 border-s px-3 py-2 align-top outline-none',\n                            isActive && 'ring-ring/50 ring-2 ring-inset',\n                            controller.isEditable(ref) && 'cursor-text',\n                          )}\n                        >\n                          {isEditing ? (\n                            <CellEditor\n                              row={row}\n                              locale={locale}\n                              draft={state.draft}\n                              forms={state.draftForms}\n                              labels={cell?.formLabels}\n                              saving={state.saving}\n                              error={state.error}\n                              editorRef={editor}\n                              onDraft={(value) => controller.setDraft(value)}\n                              onForm={(index, value) => controller.setDraftForm(index, value)}\n                              onKeyDown={onEditorKeyDown}\n                              onSave={() =>\n                                void controller.save().then((saved) => saved && focusCell(ref))\n                              }\n                              onCancel={() => {\n                                controller.cancelEdit()\n                                focusCell(ref)\n                              }}\n                              onCopyBase={() => controller.copyBase()}\n                            />\n                          ) : (\n                            <CellValue locale={locale} cell={cell} />\n                          )}\n                        </td>\n                      )\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n        <div\n          className=\"flex flex-wrap items-center justify-between gap-2 text-sm\"\n          data-slot=\"translation-pagination\"\n        >\n          <span className=\"text-muted-foreground\">\n            {t(\n              'translation-manager.pagination',\n              { ...range, total: formatter.number(state.total) },\n              ':from–:to of :total',\n            )}\n          </span>\n          <div className=\"flex items-center gap-1\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon-sm\"\n              aria-label={t('translation-manager.previous', {}, 'Previous page')}\n              disabled={state.page <= 1 || state.loading}\n              onClick={() => controller.goToPage(state.page - 1)}\n            >\n              <ChevronLeftIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n            </Button>\n            <span className=\"px-2 tabular-nums\">\n              {t(\n                'translation-manager.page',\n                { page: state.page, pages: state.lastPage },\n                'Page :page of :pages',\n              )}\n            </span>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon-sm\"\n              aria-label={t('translation-manager.next', {}, 'Next page')}\n              disabled={state.page >= state.lastPage || state.loading}\n              onClick={() => controller.goToPage(state.page + 1)}\n            >\n              <ChevronRightIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n        {activeRow && activeLocale ? (\n          <section\n            className=\"flex flex-col gap-3 rounded-md border p-4 text-sm\"\n            data-slot=\"translation-details\"\n            aria-label={t('translation-manager.details', {}, 'Details')}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-2\">\n              <code className=\"font-mono text-xs break-all\">{activeRow.key}</code>\n              <span className=\"text-muted-foreground\">· {activeLocale.label}</span>\n            </div>\n            {activeRow.placeholders && activeRow.placeholders.length > 0 && (\n              <div className=\"flex flex-wrap items-center gap-1\">\n                <span className=\"text-muted-foreground me-1\">\n                  {t('translation-manager.placeholders', {}, 'Placeholders')}\n                </span>\n                {activeRow.placeholders.map((placeholder) => (\n                  <Badge key={placeholder} variant=\"outline\" className=\"font-mono\">\n                    {placeholder}\n                  </Badge>\n                ))}\n              </div>\n            )}\n            {activeRow.files && activeRow.files.length > 0 && (\n              <p className=\"text-muted-foreground\">\n                {t('translation-manager.used_in', {}, 'Used in')}:{' '}\n                <span className=\"font-mono text-xs\">{activeRow.files.join(', ')}</span>\n              </p>\n            )}\n            {activeRow.cells[activeLocale.code]?.warnings?.map((warning) => (\n              <p key={warning} className=\"text-destructive flex items-start gap-2\">\n                <TriangleAlertIcon className=\"mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                {warning}\n              </p>\n            ))}\n            {activeRow.cells[activeLocale.code]?.suggestion && (\n              <div\n                className=\"bg-muted/50 flex flex-col gap-2 rounded-md p-3\"\n                data-slot=\"translation-suggestion\"\n              >\n                <span className=\"flex items-center gap-2 font-medium\">\n                  <SparklesIcon className=\"text-primary size-4\" aria-hidden=\"true\" />\n                  {t('translation-manager.suggestion', {}, 'AI suggestion')}\n                </span>\n                <p\n                  className=\"whitespace-pre-wrap\"\n                  dir={activeLocale.direction}\n                  lang={activeLocale.code}\n                >\n                  {activeRow.cells[activeLocale.code]?.suggestion?.value}\n                </p>\n                {activeRow.cells[activeLocale.code]?.suggestion?.warnings?.map((warning) => (\n                  <p key={warning} className=\"text-destructive text-xs\">\n                    {warning}\n                  </p>\n                ))}\n                {activeLocale.editable && (\n                  <div className=\"flex gap-2\">\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      onClick={() =>\n                        void controller.decide(\n                          { row: activeRow.id, locale: activeLocale.code },\n                          'accept',\n                        )\n                      }\n                    >\n                      <CheckIcon aria-hidden=\"true\" />\n                      {t('translation-manager.accept', {}, 'Accept')}\n                    </Button>\n                    <Button\n                      type=\"button\"\n                      size=\"sm\"\n                      variant=\"outline\"\n                      onClick={() =>\n                        void controller.decide(\n                          { row: activeRow.id, locale: activeLocale.code },\n                          'reject',\n                        )\n                      }\n                    >\n                      <XIcon aria-hidden=\"true\" />\n                      {t('translation-manager.reject', {}, 'Reject')}\n                    </Button>\n                  </div>\n                )}\n              </div>\n            )}\n            {state.history?.row === activeRow.id && state.history.locale === activeLocale.code ? (\n              <div className=\"flex flex-col gap-2\" data-slot=\"translation-history\">\n                <span className=\"font-medium\">\n                  {t('translation-manager.history', {}, 'History')}\n                </span>\n                {state.history.entries?.length === 0 && (\n                  <p className=\"text-muted-foreground\">\n                    {t('translation-manager.history_empty', {}, 'No changes yet.')}\n                  </p>\n                )}\n                <ol className=\"flex flex-col gap-2\">\n                  {state.history.entries?.map((entry) => (\n                    <li key={entry.id} className=\"border-s-2 ps-3\">\n                      <span className=\"text-muted-foreground text-xs\">\n                        {t(`translation-manager.sources.${entry.source}`, {}, entry.source)}\n                        {entry.user\n                          ? ` · ${t('translation-manager.by', { name: entry.user }, 'by :name')}`\n                          : ''}\n                        {entry.at ? ` · ${formatter.relative(entry.at)}` : ''}\n                      </span>\n                      <p\n                        className=\"whitespace-pre-wrap\"\n                        dir={activeLocale.direction}\n                        lang={activeLocale.code}\n                      >\n                        {entry.new ?? (\n                          <em className=\"text-muted-foreground\">\n                            {t('translation-manager.empty_value', {}, 'Empty')}\n                          </em>\n                        )}\n                      </p>\n                    </li>\n                  ))}\n                </ol>\n              </div>\n            ) : (\n              <div>\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  onClick={() =>\n                    void controller.loadHistory({ row: activeRow.id, locale: activeLocale.code })\n                  }\n                >\n                  <HistoryIcon aria-hidden=\"true\" />\n                  {t('translation-manager.show_history', {}, 'Show history')}\n                </Button>\n              </div>\n            )}\n          </section>\n        ) : null}\n        <div className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {state.announcement}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction KeyCell({ row }: { row: TranslationRowSchema }) {\n  const t = useT()\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <code className=\"font-mono text-xs break-all\">{row.key}</code>\n      <div className=\"flex flex-wrap gap-1\">\n        <span className=\"text-muted-foreground text-xs\">{row.groupLabel}</span>\n        {row.undefined && (\n          <Badge variant=\"destructive\">\n            {t('translation-manager.undefined', {}, 'Not defined')}\n          </Badge>\n        )}\n        {row.unused && (\n          <Badge variant=\"outline\">{t('translation-manager.unused', {}, 'Unused')}</Badge>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction CellValue({\n  locale,\n  cell,\n}: {\n  locale: TranslationLocaleSchema\n  cell: TranslationManagerSchema['rows'][number]['cells'][string] | undefined\n}) {\n  const t = useT()\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      {cell?.value ? (\n        <span\n          className=\"line-clamp-4 whitespace-pre-wrap\"\n          dir={locale.direction}\n          lang={locale.code}\n        >\n          {cell.value}\n        </span>\n      ) : (\n        <span className=\"text-muted-foreground italic\">\n          {t('translation-manager.missing', {}, 'Missing')}\n        </span>\n      )}\n      {(cell?.changed || cell?.warnings || cell?.suggestion) && (\n        <span className=\"flex flex-wrap gap-1\">\n          {cell.changed && (\n            <Badge variant=\"secondary\">\n              {t('translation-manager.changed', {}, 'Changed in the panel')}\n            </Badge>\n          )}\n          {cell.warnings && (\n            <Badge variant=\"destructive\" title={cell.warnings.join('\\n')}>\n              <TriangleAlertIcon aria-hidden=\"true\" />\n              {t('translation-manager.warnings', {}, 'Warnings')}\n            </Badge>\n          )}\n          {cell.suggestion && (\n            <Badge variant=\"outline\">\n              <SparklesIcon aria-hidden=\"true\" />\n              {t('translation-manager.suggestion', {}, 'AI suggestion')}\n            </Badge>\n          )}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction CellEditor({\n  row,\n  locale,\n  draft,\n  forms,\n  labels,\n  saving,\n  error,\n  editorRef,\n  onDraft,\n  onForm,\n  onKeyDown,\n  onSave,\n  onCancel,\n  onCopyBase,\n}: {\n  row: TranslationRowSchema\n  locale: TranslationLocaleSchema\n  draft: string\n  forms: string[] | null\n  labels: string[] | undefined\n  saving: boolean\n  error: string | null\n  editorRef: { current: HTMLTextAreaElement | null }\n  onDraft: (value: string) => void\n  onForm: (index: number, value: string) => void\n  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void\n  onSave: () => void\n  onCancel: () => void\n  onCopyBase: () => void\n}) {\n  const t = useT()\n  const errorId = useId()\n  const label = t(\n    'translation-manager.edit',\n    { key: row.key, locale: locale.label },\n    'Edit :key in :locale',\n  )\n\n  return (\n    <div\n      className=\"flex flex-col gap-2\"\n      data-slot=\"translation-editor\"\n      onClick={(event) => event.stopPropagation()}\n    >\n      {forms ? (\n        forms.map((form, index) => (\n          <label key={index} className=\"flex flex-col gap-1\">\n            <span className=\"text-muted-foreground text-xs\">\n              {t(\n                'translation-manager.plural_form',\n                { numbers: labels?.[index] ?? String(index + 1) },\n                'For :numbers',\n              )}\n            </span>\n            <Textarea\n              ref={index === 0 ? editorRef : undefined}\n              value={form}\n              rows={1}\n              dir={locale.direction}\n              lang={locale.code}\n              aria-label={`${label} (${labels?.[index] ?? index + 1})`}\n              aria-invalid={error ? true : undefined}\n              aria-describedby={error ? errorId : undefined}\n              className=\"min-h-9\"\n              onChange={(event) => onForm(index, event.target.value)}\n              onKeyDown={onKeyDown}\n            />\n          </label>\n        ))\n      ) : (\n        <Textarea\n          ref={editorRef}\n          value={draft}\n          rows={Math.min(8, Math.max(2, draft.split('\\n').length))}\n          dir={locale.direction}\n          lang={locale.code}\n          aria-label={label}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={error ? errorId : undefined}\n          onChange={(event) => onDraft(event.target.value)}\n          onKeyDown={onKeyDown}\n        />\n      )}\n      {error && (\n        <p id={errorId} className=\"text-destructive text-xs\">\n          {error}\n        </p>\n      )}\n      <div className=\"flex flex-wrap items-center gap-1\">\n        <Button type=\"button\" size=\"sm\" disabled={saving} onClick={onSave}>\n          {saving\n            ? t('translation-manager.saving', {}, 'Saving…')\n            : t('translation-manager.save', {}, 'Save')}\n        </Button>\n        <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={saving} onClick={onCancel}>\n          {t('translation-manager.cancel', {}, 'Cancel')}\n        </Button>\n        {!locale.base && (\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"ms-auto\"\n            disabled={saving}\n            onClick={onCopyBase}\n          >\n            <CopyIcon aria-hidden=\"true\" />\n            {t('translation-manager.copy_base', {}, 'Copy the base text')}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/tree/index.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from "./tree-lazy.js";
+export { Tree };

package/dist/components/tree/index.js

@@ -0,0 +1,2 @@
+import { Tree } from "./tree-lazy.js";
+export { Tree };

package/dist/components/tree/tree-lazy.d.ts

@@ -0,0 +1,10 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { TreeSchema, TreeWidgetSchema } from "@alfakit/core";
+//#region src/components/tree/tree-lazy.d.ts
+/** The tree; its code loads the first time a tree is shown. */
+export declare const Tree: LazyComponent<{
+  component?: TreeSchema;
+  widget?: TreeWidgetSchema;
+}>;
+//#endregion
+//# sourceMappingURL=tree-lazy.d.ts.map

package/dist/components/tree/tree-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/tree/tree-lazy.tsx"],"mappings":";;;;qBA0Ba,MAAwDA;EAArB,YAAA;EAAqB,SAAA"}

package/dist/components/tree/tree-lazy.js

@@ -0,0 +1,24 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tree/tree-lazy.tsx
+function TreeSkeleton({ component, widget }) {
+	const count = Math.min(6, Math.max(1, (component ?? widget?.tree)?.nodes.length ?? 3));
+	return /* @__PURE__ */ jsx(Card, {
+		className: "gap-4 py-4",
+		"aria-busy": "true",
+		"data-slot": "tree-widget",
+		children: /* @__PURE__ */ jsx(CardContent, {
+			className: "flex flex-col gap-2 px-5",
+			"aria-hidden": "true",
+			children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-9" }, index))
+		})
+	});
+}
+/** The tree; its code loads the first time a tree is shown. */
+const Tree = lazyComponent(() => import("./tree.js").then((module) => module.Tree), (props) => /* @__PURE__ */ jsx(TreeSkeleton, { ...props }));
+//#endregion
+export { Tree };
+
+//# sourceMappingURL=tree-lazy.js.map

package/dist/components/tree/tree-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-lazy.js","names":[],"sources":["../../../src/components/tree/tree-lazy.tsx"],"sourcesContent":["import type { TreeSchema, TreeWidgetSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card, CardContent } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\n\nfunction TreeSkeleton({\n  component,\n  widget,\n}: {\n  component?: TreeSchema\n  widget?: TreeWidgetSchema\n}) {\n  const count = Math.min(6, Math.max(1, (component ?? widget?.tree)?.nodes.length ?? 3))\n\n  return (\n    <Card className=\"gap-4 py-4\" aria-busy=\"true\" data-slot=\"tree-widget\">\n      <CardContent className=\"flex flex-col gap-2 px-5\" aria-hidden=\"true\">\n        {Array.from({ length: count }, (_, index) => (\n          <Skeleton key={index} className=\"h-9\" />\n        ))}\n      </CardContent>\n    </Card>\n  )\n}\n\n/** The tree; its code loads the first time a tree is shown. */\nexport const Tree = lazyComponent<{ component?: TreeSchema; widget?: TreeWidgetSchema }>(\n  () => import('./tree').then((module) => module.Tree),\n  (props) => <TreeSkeleton {...props} />,\n)\n"],"mappings":";;;;;AAKA,SAAS,aAAa,EACpB,WACA,UAIC;CACD,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,aAAa,QAAQ,KAAA,EAAO,MAAM,UAAU,CAAC,CAAC;CAErF,OACE,oBAAC,MAAD;EAAM,WAAU;EAAa,aAAU;EAAO,aAAU;EACtD,UAAA,oBAAC,aAAD;GAAa,WAAU;GAA2B,eAAY;GAC3D,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,UAAD,EAAsB,WAAU,MAAO,GAAxB,KAAwB,CACxC;EACU,CAAA;CACT,CAAA;AAEV;;AAGA,MAAa,OAAO,oBACZ,OAAO,YAAS,CAAC,MAAM,WAAW,OAAO,IAAI,IAClD,UAAU,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA,CACvC"}

package/dist/components/tree/tree.js

@@ -0,0 +1,291 @@
+import { useActionRunner, useDirection, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { ActionList } from "../actions/action-list.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { TreeController, clientErrorNotification, visibleTreeRows } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, GripVerticalIcon, ListIndentDecreaseIcon, ListIndentIncreaseIcon } from "lucide-react";
+//#region src/components/tree/tree.tsx
+const DRAG_TYPE = "application/x-alfakit-tree-node";
+/**
+* The tree of a `TreePage` (schema component `tree`) or a `TreeWidget` (alfasix/alfakit-tree).
+* Nodes are rearranged with native drag and drop, the move buttons or Alt + arrow keys,
+* and the new structure is saved in one request.
+*/
+function Tree({ component, widget }) {
+	const tree = component ?? widget?.tree;
+	return tree ? /* @__PURE__ */ jsx(TreeView, { tree }, tree.actionComponent) : null;
+}
+function TreeView({ tree }) {
+	const runner = useActionRunner();
+	const page = usePageActionContext();
+	const t = useT();
+	const direction = useDirection();
+	const labelId = useId();
+	const environment = () => ({
+		runner,
+		token: page.token,
+		t,
+		notify: (notifications) => notifications.forEach((notification) => showToast(notification)),
+		error: (message) => showToast(clientErrorNotification("tree", message))
+	});
+	const [controller] = useState(() => new TreeController(tree, environment()));
+	useEffect(() => {
+		controller.setEnvironment(environment());
+	});
+	const first = useRef(true);
+	useEffect(() => {
+		if (first.current) {
+			first.current = false;
+			return;
+		}
+		controller.setTree(tree);
+	}, [controller, tree]);
+	const state = useStore(controller.store);
+	const rows = visibleTreeRows(state.nodes, state.expanded);
+	const [focused, setFocused] = useState(null);
+	const [drop, setDrop] = useState(null);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const current = focused !== null && rows.some((row) => row.node.key === focused) ? focused : rows[0]?.node.key ?? null;
+	const focus = (key) => {
+		if (!key) return;
+		setFocused(key);
+		requestAnimationFrame(() => items.current.get(key)?.focus());
+	};
+	const onKeyDown = (row) => (event) => {
+		if (event.target !== event.currentTarget) return;
+		const result = controller.handleKey(row.node.key, event, direction);
+		if (result.handled) {
+			event.preventDefault();
+			focus(result.focus);
+		}
+	};
+	const position = (event) => {
+		const box = event.currentTarget.getBoundingClientRect();
+		const offset = box.height > 0 ? (event.clientY - box.top) / box.height : .5;
+		return offset < .25 ? "before" : offset > .75 ? "after" : "inside";
+	};
+	const hasParents = state.nodes.some((node) => node.children.length > 0);
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "gap-4 py-4",
+		"data-slot": "tree-widget",
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "px-5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [tree.heading ? /* @__PURE__ */ jsx(CardTitle, {
+					id: labelId,
+					className: "text-base",
+					children: tree.heading
+				}) : /* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "sr-only",
+					children: t("tree.label", {}, "Tree")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ms-auto flex flex-wrap items-center gap-1",
+					children: [hasParents && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: () => controller.expandAll(),
+						children: [/* @__PURE__ */ jsx(ChevronsUpDownIcon, { "aria-hidden": "true" }), t("tree.expand_all", {}, "Expand all")]
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: () => controller.collapseAll(),
+						children: [/* @__PURE__ */ jsx(ChevronsDownUpIcon, { "aria-hidden": "true" }), t("tree.collapse_all", {}, "Collapse all")]
+					})] }), state.dirty && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						disabled: state.saving,
+						onClick: () => controller.reset(),
+						children: t("tree.discard", {}, "Discard changes")
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						disabled: state.saving,
+						onClick: () => void controller.save(),
+						children: state.saving ? t("tree.saving", {}, "Saving…") : t("tree.save", {}, "Save order")
+					})] })]
+				})]
+			}), state.dirty && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: t("tree.unsaved", {}, "You have unsaved changes to the order.")
+			})]
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "px-5",
+			children: [rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground py-6 text-center text-sm",
+				children: t("tree.empty", {}, "No records yet")
+			}) : /* @__PURE__ */ jsx("ul", {
+				role: "tree",
+				"aria-labelledby": labelId,
+				className: "flex flex-col gap-1",
+				"data-slot": "tree",
+				children: rows.map((row) => {
+					const { node } = row;
+					const title = node.title;
+					return /* @__PURE__ */ jsxs("li", {
+						ref: (element) => {
+							if (element) items.current.set(node.key, element);
+							else items.current.delete(node.key);
+						},
+						role: "treeitem",
+						"aria-level": row.level,
+						"aria-setsize": row.siblings,
+						"aria-posinset": row.index + 1,
+						"aria-expanded": row.hasChildren ? row.expanded : void 0,
+						"aria-selected": current === node.key,
+						"aria-label": title,
+						tabIndex: current === node.key ? 0 : -1,
+						"data-slot": "tree-item",
+						"data-key": node.key,
+						"data-drop": drop?.key === node.key ? drop.position : void 0,
+						"data-dragging": state.dragging === node.key ? "" : void 0,
+						draggable: tree.reorderable,
+						onFocus: (event) => event.target === event.currentTarget && setFocused(node.key),
+						onKeyDown: onKeyDown(row),
+						onDragStart: (event) => {
+							event.dataTransfer.effectAllowed = "move";
+							event.dataTransfer.setData(DRAG_TYPE, node.key);
+							controller.startDrag(node.key);
+						},
+						onDragEnd: () => {
+							controller.endDrag();
+							setDrop(null);
+						},
+						onDragOver: (event) => {
+							const dragging = controller.state.dragging;
+							if (!dragging) return;
+							const at = position(event);
+							if (controller.canDrop(dragging, node.key, at)) {
+								event.preventDefault();
+								event.dataTransfer.dropEffect = "move";
+								setDrop({
+									key: node.key,
+									position: at
+								});
+							} else if (drop?.key === node.key) setDrop(null);
+						},
+						onDragLeave: (event) => {
+							if (!event.currentTarget.contains(event.relatedTarget) && drop?.key === node.key) setDrop(null);
+						},
+						onDrop: (event) => {
+							event.preventDefault();
+							const dragging = controller.state.dragging;
+							if (dragging) controller.drop(dragging, node.key, position(event));
+							controller.endDrag();
+							setDrop(null);
+						},
+						className: cn("hover:bg-accent/50 focus-visible:ring-ring/50 flex items-center gap-2 rounded-md border px-2 py-1.5 outline-none focus-visible:ring-[3px]", state.dragging === node.key && "opacity-50"),
+						style: { marginInlineStart: `${(row.level - 1) * 1.5}rem` },
+						children: [
+							tree.reorderable && /* @__PURE__ */ jsx(GripVerticalIcon, {
+								className: "text-muted-foreground size-4 shrink-0 cursor-grab",
+								"aria-hidden": "true"
+							}),
+							row.hasChildren ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon-xs",
+								tabIndex: -1,
+								"aria-label": row.expanded ? t("tree.collapse", { title }, "Collapse :title") : t("tree.expand", { title }, "Expand :title"),
+								onClick: () => controller.toggle(node.key),
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+									className: cn("transition-transform rtl:rotate-180", row.expanded && "rotate-90 rtl:rotate-90"),
+									"aria-hidden": "true"
+								})
+							}) : /* @__PURE__ */ jsx("span", {
+								className: "size-6 shrink-0",
+								"aria-hidden": "true"
+							}),
+							node.icon && /* @__PURE__ */ jsx(Icon, {
+								name: node.icon,
+								className: "text-muted-foreground size-4 shrink-0"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1 truncate text-sm font-medium",
+								children: title
+							}),
+							tree.reorderable && /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-center",
+								"data-slot": "tree-move-buttons",
+								children: [
+									/* @__PURE__ */ jsx(MoveButton, {
+										label: t("tree.move_up", { title }, "Move :title up"),
+										disabled: !controller.canMove(node.key, "up"),
+										onClick: () => controller.move(node.key, "up"),
+										children: /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true" })
+									}),
+									/* @__PURE__ */ jsx(MoveButton, {
+										label: t("tree.move_down", { title }, "Move :title down"),
+										disabled: !controller.canMove(node.key, "down"),
+										onClick: () => controller.move(node.key, "down"),
+										children: /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-hidden": "true" })
+									}),
+									/* @__PURE__ */ jsx(MoveButton, {
+										label: t("tree.outdent", { title }, "Move :title out of its parent"),
+										disabled: !controller.canMove(node.key, "outdent"),
+										onClick: () => controller.move(node.key, "outdent"),
+										children: /* @__PURE__ */ jsx(ListIndentDecreaseIcon, {
+											className: "rtl:rotate-180",
+											"aria-hidden": "true"
+										})
+									}),
+									/* @__PURE__ */ jsx(MoveButton, {
+										label: t("tree.indent", { title }, "Move :title into the item above"),
+										disabled: !controller.canMove(node.key, "indent"),
+										onClick: () => controller.move(node.key, "indent"),
+										children: /* @__PURE__ */ jsx(ListIndentIncreaseIcon, {
+											className: "rtl:rotate-180",
+											"aria-hidden": "true"
+										})
+									})
+								]
+							}),
+							node.actions && node.actions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+								actions: node.actions,
+								context: {
+									token: page.token,
+									component: tree.actionComponent,
+									record: node.key
+								},
+								size: "xs",
+								className: "shrink-0 gap-1"
+							})
+						]
+					}, node.key);
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: state.announcement
+			})]
+		})]
+	});
+}
+function MoveButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-xs",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children
+	});
+}
+//#endregion
+export { Tree };
+
+//# sourceMappingURL=tree.js.map

package/dist/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","names":[],"sources":["../../../src/components/tree/tree.tsx"],"sourcesContent":["import type {\n  TreeDropPosition,\n  TreeEnvironment,\n  TreeRow,\n  TreeSchema,\n  TreeWidgetSchema,\n} from '@alfakit/core'\nimport { TreeController, clientErrorNotification, visibleTreeRows } from '@alfakit/core'\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ChevronRightIcon,\n  ChevronsDownUpIcon,\n  ChevronsUpDownIcon,\n  GripVerticalIcon,\n  ListIndentDecreaseIcon,\n  ListIndentIncreaseIcon,\n} from 'lucide-react'\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type DragEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { useActionRunner, useDirection, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Button } from '../ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '../ui/card'\n\nconst DRAG_TYPE = 'application/x-alfakit-tree-node'\n\n/**\n * The tree of a `TreePage` (schema component `tree`) or a `TreeWidget` (alfasix/alfakit-tree).\n * Nodes are rearranged with native drag and drop, the move buttons or Alt + arrow keys,\n * and the new structure is saved in one request.\n */\nexport function Tree({ component, widget }: { component?: TreeSchema; widget?: TreeWidgetSchema }) {\n  const tree = component ?? widget?.tree\n\n  return tree ? <TreeView key={tree.actionComponent} tree={tree} /> : null\n}\n\nfunction TreeView({ tree }: { tree: TreeSchema }) {\n  const runner = useActionRunner()\n  const page = usePageActionContext()\n  const t = useT()\n  const direction = useDirection()\n  const labelId = useId()\n  const environment = (): TreeEnvironment => ({\n    runner,\n    token: page.token,\n    t,\n    notify: (notifications) => notifications.forEach((notification) => showToast(notification)),\n    error: (message) => showToast(clientErrorNotification('tree', message)),\n  })\n  // One controller per tree (the parent keys this view by its action component).\n  const [controller] = useState(() => new TreeController(tree, environment()))\n\n  useEffect(() => {\n    controller.setEnvironment(environment())\n  })\n\n  const first = useRef(true)\n\n  useEffect(() => {\n    if (first.current) {\n      first.current = false\n\n      return\n    }\n\n    controller.setTree(tree)\n  }, [controller, tree])\n\n  const state = useStore(controller.store)\n  const rows = visibleTreeRows(state.nodes, state.expanded)\n  const [focused, setFocused] = useState<string | null>(null)\n  const [drop, setDrop] = useState<{ key: string; position: TreeDropPosition } | null>(null)\n  const items = useRef(new Map<string, HTMLLIElement>())\n  const current =\n    focused !== null && rows.some((row) => row.node.key === focused)\n      ? focused\n      : (rows[0]?.node.key ?? null)\n\n  const focus = (key: string | undefined) => {\n    if (!key) return\n    setFocused(key)\n    requestAnimationFrame(() => items.current.get(key)?.focus())\n  }\n\n  const onKeyDown = (row: TreeRow) => (event: KeyboardEvent<HTMLLIElement>) => {\n    if (event.target !== event.currentTarget) return\n\n    const result = controller.handleKey(row.node.key, event, direction)\n\n    if (result.handled) {\n      event.preventDefault()\n      focus(result.focus)\n    }\n  }\n\n  const position = (event: DragEvent<HTMLElement>): TreeDropPosition => {\n    const box = event.currentTarget.getBoundingClientRect()\n    const offset = box.height > 0 ? (event.clientY - box.top) / box.height : 0.5\n\n    return offset < 0.25 ? 'before' : offset > 0.75 ? 'after' : 'inside'\n  }\n\n  const hasParents = state.nodes.some((node) => node.children.length > 0)\n\n  return (\n    <Card className=\"gap-4 py-4\" data-slot=\"tree-widget\">\n      <CardHeader className=\"px-5\">\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          {tree.heading ? (\n            <CardTitle id={labelId} className=\"text-base\">\n              {tree.heading}\n            </CardTitle>\n          ) : (\n            <span id={labelId} className=\"sr-only\">\n              {t('tree.label', {}, 'Tree')}\n            </span>\n          )}\n          <div className=\"ms-auto flex flex-wrap items-center gap-1\">\n            {hasParents && (\n              <>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => controller.expandAll()}\n                >\n                  <ChevronsUpDownIcon aria-hidden=\"true\" />\n                  {t('tree.expand_all', {}, 'Expand all')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => controller.collapseAll()}\n                >\n                  <ChevronsDownUpIcon aria-hidden=\"true\" />\n                  {t('tree.collapse_all', {}, 'Collapse all')}\n                </Button>\n              </>\n            )}\n            {state.dirty && (\n              <>\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"sm\"\n                  disabled={state.saving}\n                  onClick={() => controller.reset()}\n                >\n                  {t('tree.discard', {}, 'Discard changes')}\n                </Button>\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  disabled={state.saving}\n                  onClick={() => void controller.save()}\n                >\n                  {state.saving\n                    ? t('tree.saving', {}, 'Saving…')\n                    : t('tree.save', {}, 'Save order')}\n                </Button>\n              </>\n            )}\n          </div>\n        </div>\n        {state.dirty && (\n          <p className=\"text-muted-foreground text-sm\">\n            {t('tree.unsaved', {}, 'You have unsaved changes to the order.')}\n          </p>\n        )}\n      </CardHeader>\n      <CardContent className=\"px-5\">\n        {rows.length === 0 ? (\n          <p className=\"text-muted-foreground py-6 text-center text-sm\">\n            {t('tree.empty', {}, 'No records yet')}\n          </p>\n        ) : (\n          <ul\n            role=\"tree\"\n            aria-labelledby={labelId}\n            className=\"flex flex-col gap-1\"\n            data-slot=\"tree\"\n          >\n            {rows.map((row) => {\n              const { node } = row\n              const title = node.title\n\n              return (\n                <li\n                  key={node.key}\n                  ref={(element) => {\n                    if (element) items.current.set(node.key, element)\n                    else items.current.delete(node.key)\n                  }}\n                  role=\"treeitem\"\n                  aria-level={row.level}\n                  aria-setsize={row.siblings}\n                  aria-posinset={row.index + 1}\n                  aria-expanded={row.hasChildren ? row.expanded : undefined}\n                  aria-selected={current === node.key}\n                  aria-label={title}\n                  tabIndex={current === node.key ? 0 : -1}\n                  data-slot=\"tree-item\"\n                  data-key={node.key}\n                  data-drop={drop?.key === node.key ? drop.position : undefined}\n                  data-dragging={state.dragging === node.key ? '' : undefined}\n                  draggable={tree.reorderable}\n                  onFocus={(event) => event.target === event.currentTarget && setFocused(node.key)}\n                  onKeyDown={onKeyDown(row)}\n                  onDragStart={(event) => {\n                    event.dataTransfer.effectAllowed = 'move'\n                    event.dataTransfer.setData(DRAG_TYPE, node.key)\n                    controller.startDrag(node.key)\n                  }}\n                  onDragEnd={() => {\n                    controller.endDrag()\n                    setDrop(null)\n                  }}\n                  onDragOver={(event) => {\n                    const dragging = controller.state.dragging\n\n                    if (!dragging) return\n\n                    const at = position(event)\n\n                    if (controller.canDrop(dragging, node.key, at)) {\n                      event.preventDefault()\n                      event.dataTransfer.dropEffect = 'move'\n                      setDrop({ key: node.key, position: at })\n                    } else if (drop?.key === node.key) {\n                      setDrop(null)\n                    }\n                  }}\n                  onDragLeave={(event) => {\n                    if (\n                      !event.currentTarget.contains(event.relatedTarget as Node | null) &&\n                      drop?.key === node.key\n                    ) {\n                      setDrop(null)\n                    }\n                  }}\n                  onDrop={(event) => {\n                    event.preventDefault()\n                    const dragging = controller.state.dragging\n\n                    if (dragging) controller.drop(dragging, node.key, position(event))\n                    controller.endDrag()\n                    setDrop(null)\n                  }}\n                  className={cn(\n                    'hover:bg-accent/50 focus-visible:ring-ring/50 flex items-center gap-2 rounded-md border px-2 py-1.5 outline-none focus-visible:ring-[3px]',\n                    state.dragging === node.key && 'opacity-50',\n                  )}\n                  style={{ marginInlineStart: `${(row.level - 1) * 1.5}rem` }}\n                >\n                  {tree.reorderable && (\n                    <GripVerticalIcon\n                      className=\"text-muted-foreground size-4 shrink-0 cursor-grab\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                  {row.hasChildren ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-xs\"\n                      tabIndex={-1}\n                      aria-label={\n                        row.expanded\n                          ? t('tree.collapse', { title }, 'Collapse :title')\n                          : t('tree.expand', { title }, 'Expand :title')\n                      }\n                      onClick={() => controller.toggle(node.key)}\n                    >\n                      <ChevronRightIcon\n                        className={cn(\n                          'transition-transform rtl:rotate-180',\n                          row.expanded && 'rotate-90 rtl:rotate-90',\n                        )}\n                        aria-hidden=\"true\"\n                      />\n                    </Button>\n                  ) : (\n                    <span className=\"size-6 shrink-0\" aria-hidden=\"true\" />\n                  )}\n                  {node.icon && (\n                    <Icon name={node.icon} className=\"text-muted-foreground size-4 shrink-0\" />\n                  )}\n                  <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">{title}</span>\n                  {tree.reorderable && (\n                    <div className=\"flex shrink-0 items-center\" data-slot=\"tree-move-buttons\">\n                      <MoveButton\n                        label={t('tree.move_up', { title }, 'Move :title up')}\n                        disabled={!controller.canMove(node.key, 'up')}\n                        onClick={() => controller.move(node.key, 'up')}\n                      >\n                        <ArrowUpIcon aria-hidden=\"true\" />\n                      </MoveButton>\n                      <MoveButton\n                        label={t('tree.move_down', { title }, 'Move :title down')}\n                        disabled={!controller.canMove(node.key, 'down')}\n                        onClick={() => controller.move(node.key, 'down')}\n                      >\n                        <ArrowDownIcon aria-hidden=\"true\" />\n                      </MoveButton>\n                      <MoveButton\n                        label={t('tree.outdent', { title }, 'Move :title out of its parent')}\n                        disabled={!controller.canMove(node.key, 'outdent')}\n                        onClick={() => controller.move(node.key, 'outdent')}\n                      >\n                        <ListIndentDecreaseIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n                      </MoveButton>\n                      <MoveButton\n                        label={t('tree.indent', { title }, 'Move :title into the item above')}\n                        disabled={!controller.canMove(node.key, 'indent')}\n                        onClick={() => controller.move(node.key, 'indent')}\n                      >\n                        <ListIndentIncreaseIcon className=\"rtl:rotate-180\" aria-hidden=\"true\" />\n                      </MoveButton>\n                    </div>\n                  )}\n                  {node.actions && node.actions.length > 0 && (\n                    <ActionList\n                      actions={node.actions}\n                      context={{\n                        token: page.token,\n                        component: tree.actionComponent,\n                        record: node.key,\n                      }}\n                      size=\"xs\"\n                      className=\"shrink-0 gap-1\"\n                    />\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        )}\n        <div className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {state.announcement}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction MoveButton({\n  label,\n  disabled,\n  onClick,\n  children,\n}: {\n  label: string\n  disabled: boolean\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/alert.d.ts
+declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react").JSX.Element;
+declare function AlertTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function AlertDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Alert, AlertDescription, AlertTitle };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","names":[],"sources":["../../../src/components/ui/alert.tsx"],"mappings":";;;cAIM,gBAAa;;6CAYlB;iBAEQ,QACP,WACA,YACG,SACF,wBAAwB,oBAAoB,iCAAc,IAAA;iBAWpD,aAAa,cAAc,SAAS,wCAAqB,IAAA;iBAUzD,mBAAmB,cAAc,SAAS,wCAAqB,IAAA"}

package/dist/components/ui/alert.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/alert.tsx
+const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: cn(alertVariants({ variant }), className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertDescription, AlertTitle };
+
+//# sourceMappingURL=alert.js.map

package/dist/components/ui/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nconst alertVariants = cva(\n  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-card-foreground',\n        destructive:\n          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertDescription, AlertTitle }\n"],"mappings":";;;;AAIA,MAAM,gBAAgB,IACpB,qOACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,GAAG,SAC0D;CAC7D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAgC;CAClE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/avatar.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import { Avatar } from "radix-ui";
+//#region src/components/ui/avatar.d.ts
+declare function Avatar$1({ className, ...props }: ComponentProps<typeof Avatar.Root>): import("react").JSX.Element;
+declare function AvatarImage({ className, ...props }: ComponentProps<typeof Avatar.Image>): import("react").JSX.Element;
+declare function AvatarFallback({ className, ...props }: ComponentProps<typeof Avatar.Fallback>): import("react").JSX.Element;
+//#endregion
+export { Avatar$1 as Avatar, AvatarFallback, AvatarImage };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/ui/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","names":["Avatar","AvatarPrimitive"],"sources":["../../../src/components/ui/avatar.tsx"],"mappings":";;;iBAISA,WAAS,cAAc,SAAS,sBAAsBC,OAAgB,wBAAK,IAAA;iBAU3E,cAAc,cAAc,SAAS,sBAAsBA,OAAgB,yBAAM,IAAA;iBAUjF,iBAAiB,cAAc,SAAS,sBAAsBA,OAAgB,4BAAS,IAAA"}

package/dist/components/ui/avatar.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "radix-ui";
+//#region src/components/ui/avatar.tsx
+function Avatar$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("bg-muted flex size-full items-center justify-center rounded-full text-xs font-medium", className),
+		...props
+	});
+}
+//#endregion
+export { Avatar$1 as Avatar, AvatarFallback, AvatarImage };
+
+//# sourceMappingURL=avatar.js.map

package/dist/components/ui/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":["Avatar","AvatarPrimitive"],"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from 'radix-ui'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/utils'\n\nfunction Avatar({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'bg-muted flex size-full items-center justify-center rounded-full text-xs font-medium',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Avatar, AvatarFallback, AvatarImage }\n"],"mappings":";;;;AAIA,SAASA,SAAO,EAAE,WAAW,GAAG,SAAsD;CACpF,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuD;CAC1F,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA0D;CAChG,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,wFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}