@rangka/client 0.0.1

package/src/widgets/components/TableWidget.tsx

@@ -0,0 +1,366 @@
+import { useCallback, useMemo } from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
+import type { WidgetNode } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+import { useWidgetContext, WidgetContextProvider } from '../hooks/useWidgetContext.js';
+import { usePageState } from '../hooks/usePageState.js';
+import { useModelQuery } from '../data/useModelQuery.js';
+import { useSurfaceContext } from '../hooks/useSurfaceContext.js';
+import { buildRowContext } from '../context/builder.js';
+import { useModelMeta } from '../../data/useModelMeta.js';
+import { Skeleton } from '../../components/ui/skeleton.js';
+import type { SortEntry } from '../reactivity/variables.js';
+import { TableToolbar } from './table/TableToolbar.js';
+import { TablePagination } from './table/TablePagination.js';
+import { ColumnChildRenderer, CellValue } from './table/CellRenderers.js';
+
+// --- Main Component ---
+
+export function TableWidget({ props, on }: WidgetProps) {
+  const ctx = useWidgetContext();
+  const store = usePageState();
+  const surface = useSurfaceContext();
+
+  // Props
+  const variant =
+    (props.variant as 'card' | 'flat' | undefined) ?? (surface === 'card' ? 'flat' : 'card');
+  const selectable = props.selectable as boolean | undefined;
+  const bordered = props.bordered as boolean | undefined;
+  const striped = props.striped as boolean | undefined;
+  const pageSize = props.pageSize as number | undefined;
+
+  // Data source
+  const model = ctx.model;
+  const columns = ctx.__columns ?? [];
+  const smartMode = Boolean(model && pageSize);
+
+  const source = useModelQuery({
+    model: model || '',
+    pageSize: pageSize ?? 20,
+    enabled: smartMode,
+  });
+
+  const records = smartMode ? source.data : (ctx.records ?? []);
+  const isFetching = smartMode && source.isFetching;
+
+  // Model metadata for search/filter capabilities
+  const { modelMeta } = useModelMeta(model);
+  const hasSearchableFields = useMemo(() => {
+    if (!modelMeta) return false;
+    return modelMeta.fields.some((f) => f.searchable);
+  }, [modelMeta]);
+
+  const filterableColumns = columns.filter((col) => col.props?.filterable && col.bind?.field);
+
+  // Sorting
+  const handleSort = useCallback(
+    (field: string) => {
+      if (!model) return;
+      const current = source.sort?.[0];
+      let newSort: string | undefined;
+
+      if (current?.field === field && current.direction === 'asc') {
+        newSort = `-${field}`;
+      } else if (current?.field === field && current.direction === 'desc') {
+        newSort = undefined;
+      } else {
+        newSort = field;
+      }
+
+      store.set(`$sort.${model}`, newSort ?? null);
+      store.set(`$page.${model}`, 1);
+    },
+    [model, source.sort, store],
+  );
+
+  // Pagination
+  const handlePageChange = useCallback(
+    (newPage: number) => {
+      if (!model) return;
+      store.set(`$page.${model}`, newPage);
+      on.pageChange?.(newPage);
+    },
+    [model, store, on],
+  );
+
+  // Styles
+  const wrapperClasses = [
+    'flex flex-col',
+    variant === 'card'
+      ? 'bg-card text-card-foreground ring-1 ring-foreground/10'
+      : '-mx-(--card-spacing)',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const tableClasses = [
+    'w-full text-sm border-collapse table-fixed',
+    bordered && variant === 'card' ? 'ring-1 ring-border' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div data-widget="table" className={wrapperClasses}>
+      {smartMode && (hasSearchableFields || filterableColumns.length > 0) && (
+        <TableToolbar
+          model={model!}
+          store={store}
+          columns={filterableColumns}
+          hasSearch={hasSearchableFields}
+          hasFilters={filterableColumns.length > 0}
+        />
+      )}
+
+      <div className="overflow-auto">
+        <table className={tableClasses}>
+          <TableHead
+            columns={columns}
+            selectable={selectable}
+            smartMode={smartMode}
+            currentSort={source.sort}
+            onSort={handleSort}
+          />
+          <TableBody
+            columns={columns}
+            records={records}
+            selectable={selectable}
+            striped={striped}
+            isFetching={isFetching}
+            isLoading={source.isLoading}
+            pageSize={pageSize ?? 20}
+            emptyText={(props.emptyText as string) ?? 'No data'}
+            ctx={ctx}
+            onRowClick={on.rowClick}
+            onSelect={on.select}
+          />
+        </table>
+      </div>
+
+      {smartMode && (
+        <TablePagination
+          page={source.page}
+          pageSize={source.pageSize}
+          total={source.total}
+          recordCount={records.length}
+          onPageChange={handlePageChange}
+        />
+      )}
+    </div>
+  );
+}
+
+// --- Table Head ---
+
+interface TableHeadProps {
+  columns: WidgetNode[];
+  selectable: boolean | undefined;
+  smartMode: boolean;
+  currentSort: SortEntry[] | null;
+  onSort: (field: string) => void;
+}
+
+function TableHead({ columns, selectable, smartMode, currentSort, onSort }: TableHeadProps) {
+  return (
+    <thead>
+      <tr className="border-b-2 border-border">
+        {selectable && (
+          <th className="w-10 px-5 py-2 text-center">
+            <input type="checkbox" className="cursor-pointer" aria-label="Select all" />
+          </th>
+        )}
+        {columns.map((col, i) => {
+          const align = (col.props?.align as string) ?? 'left';
+          const width = col.props?.width as string | undefined;
+          const sortable = smartMode && (col.props?.sortable as boolean | undefined);
+          const field = col.bind?.field;
+          const alignClass =
+            align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+          const sortState = sortable && field ? getSortState(currentSort, field) : null;
+
+          return (
+            <th
+              key={col.id ?? i}
+              data-rangka-widget="column"
+              data-rangka-id={col.id ?? undefined}
+              data-rangka-field={field ?? undefined}
+              className={`px-5 py-2 text-xs font-semibold text-muted-foreground ${alignClass} ${sortable ? 'cursor-pointer select-none transition-colors hover:text-foreground' : ''}`}
+              style={width ? { width } : undefined}
+              onClick={sortable && field ? () => onSort(field) : undefined}
+            >
+              <span className="inline-flex items-center gap-1">
+                {String(col.props?.label ?? '')}
+                {sortState === 'asc' && <ChevronUpIcon className="h-3 w-3 text-foreground" />}
+                {sortState === 'desc' && <ChevronDownIcon className="h-3 w-3 text-foreground" />}
+              </span>
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+}
+
+// --- Table Body ---
+
+interface TableBodyProps {
+  columns: WidgetNode[];
+  records: unknown[];
+  selectable: boolean | undefined;
+  striped: boolean | undefined;
+  isFetching: boolean;
+  isLoading: boolean;
+  pageSize: number;
+  emptyText: string;
+  ctx: ReturnType<typeof useWidgetContext>;
+  onRowClick?: (row: unknown) => void;
+  onSelect?: (row: unknown) => void;
+}
+
+function TableBody({
+  columns,
+  records,
+  selectable,
+  striped,
+  isFetching,
+  isLoading,
+  pageSize,
+  emptyText,
+  ctx,
+  onRowClick,
+  onSelect,
+}: TableBodyProps) {
+  const bodyOpacity =
+    isFetching && records.length > 0
+      ? 'opacity-50 transition-opacity duration-150'
+      : 'transition-opacity duration-150';
+
+  if (isLoading) {
+    return (
+      <tbody className={bodyOpacity}>
+        {Array.from({ length: pageSize }, (_, i) => (
+          <tr key={`skeleton-${i}`} className="border-b border-border/50 last:border-b-0">
+            {selectable && (
+              <td className="w-10 px-5 py-2 text-center">
+                <Skeleton className="h-4 w-4 mx-auto" />
+              </td>
+            )}
+            {columns.map((col, colIndex) => (
+              <td key={col.id ?? colIndex} className="px-5 py-2">
+                <Skeleton className="h-4 w-full max-w-[80%]" />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    );
+  }
+
+  if (records.length === 0) {
+    return (
+      <tbody>
+        <tr>
+          <td
+            colSpan={columns.length + (selectable ? 1 : 0)}
+            className="px-5 py-8 text-center text-muted-foreground"
+          >
+            {emptyText}
+          </td>
+        </tr>
+      </tbody>
+    );
+  }
+
+  return (
+    <tbody className={bodyOpacity}>
+      {records.map((row, rowIndex) => {
+        const rowCtx = buildRowContext(row as Record<string, unknown>, rowIndex, ctx);
+        return (
+          <tr
+            key={((row as Record<string, unknown>).id as string) ?? rowIndex}
+            data-rangka-widget="row"
+            data-rangka-id={`row-${rowIndex}`}
+            className={[
+              'border-b border-border/50 last:border-b-0',
+              striped && rowIndex % 2 === 1 ? 'bg-muted/30' : '',
+              onRowClick ? 'cursor-pointer transition-colors hover:bg-muted/50' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            onClick={() => onRowClick?.(row)}
+          >
+            {selectable && (
+              <td className="w-10 px-5 py-2 text-center">
+                <input
+                  type="checkbox"
+                  className="cursor-pointer"
+                  aria-label={`Select row ${rowIndex + 1}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSelect?.(row);
+                  }}
+                />
+              </td>
+            )}
+            {columns.map((col, colIndex) => {
+              const align = (col.props?.align as string) ?? 'left';
+              const alignClass =
+                align === 'center'
+                  ? 'text-center'
+                  : align === 'right'
+                    ? 'text-right tabular-nums'
+                    : 'text-left';
+              return (
+                <td
+                  key={col.id ?? colIndex}
+                  data-rangka-widget="column"
+                  data-rangka-id={col.id ?? undefined}
+                  data-rangka-field={col.bind?.field ?? undefined}
+                  className={`px-5 py-2 ${alignClass}`}
+                >
+                  <WidgetContextProvider value={rowCtx}>
+                    {col.children && col.children.length > 0 ? (
+                      col.children.map((child, ci) => (
+                        <ColumnChildRenderer key={child.id ?? ci} node={child} rowCtx={rowCtx} />
+                      ))
+                    ) : (
+                      <CellValue col={col} row={row as Record<string, unknown>} />
+                    )}
+                  </WidgetContextProvider>
+                </td>
+              );
+            })}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+}
+
+// --- Helpers ---
+
+function getSortState(sort: SortEntry[] | null, field: string): 'asc' | 'desc' | null {
+  if (!sort) return null;
+  const entry = sort.find((s) => s.field === field);
+  return entry?.direction ?? null;
+}
+
+// --- Widget Meta ---
+
+TableWidget.widgetMeta = {
+  name: 'table',
+  label: 'Table',
+  category: 'data' as const,
+  schema: {
+    variant: { type: 'enum' as const, options: ['card', 'flat'], default: 'card' },
+    selectable: { type: 'boolean' as const },
+    bordered: { type: 'boolean' as const },
+    striped: { type: 'boolean' as const },
+    pageSize: { type: 'number' as const },
+    emptyText: { type: 'string' as const },
+  },
+  binding: 'model' as const,
+  triggers: ['rowClick', 'select', 'pageChange'],
+  container: true,
+  accepts: ['column'],
+};

package/src/widgets/components/TextWidget.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { WidgetProps } from '../types.js';
+
+export function TextWidget({ props, bind }: WidgetProps) {
+  const style = props.style as string | undefined;
+  const align = props.align as string | undefined;
+  const value = bind.value ?? props.content ?? '';
+
+  const classMap: Record<string, string> = {
+    heading: 'text-lg font-semibold',
+    body: 'text-sm',
+    caption: 'text-xs text-muted-foreground',
+    bold: 'text-sm font-medium',
+    muted: 'text-sm text-muted-foreground',
+  };
+
+  const alignMap: Record<string, string> = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const classes = [classMap[style ?? 'body'] ?? classMap.body, align ? alignMap[align] : '']
+    .filter(Boolean)
+    .join(' ');
+
+  return <p className={classes}>{String(value)}</p>;
+}
+
+TextWidget.widgetMeta = {
+  name: 'text',
+  label: 'Text',
+  category: 'display' as const,
+  schema: {
+    style: {
+      type: 'enum' as const,
+      options: ['heading', 'body', 'caption', 'bold'],
+      default: 'body',
+    },
+  },
+  binding: 'field' as const,
+  triggers: [],
+  container: false,
+};

package/src/widgets/components/TextareaWidget.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Field, FieldLabel } from '@/components/ui/field';
+import type { WidgetProps } from '../types.js';
+
+export function TextareaWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? '';
+  const rows = (props.rows as number) ?? 4;
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const readOnly = (props.readOnly as boolean) ?? bind.meta?.readOnly ?? false;
+  const error = bind.error;
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Textarea
+        value={(bind.value as string) ?? ''}
+        onChange={(e) => {
+          bind.setValue?.(e.target.value);
+          on.change?.(e.target.value);
+        }}
+        onFocus={() => on.focus?.()}
+        onBlur={() => on.blur?.()}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </Field>
+  );
+}
+
+TextareaWidget.widgetMeta = {
+  name: 'textarea',
+  label: 'Textarea',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    rows: { type: 'number' as const, default: 4 },
+    disabled: { type: 'boolean' as const, default: false },
+    readOnly: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'focus', 'blur'],
+  container: false,
+};

package/src/widgets/components/TreeWidget.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@/components/ui/command';
+import { Button } from '@/components/ui/button';
+import { Field, FieldLabel } from '@/components/ui/field';
+import { cn } from '@/lib/utils';
+import type { WidgetProps } from '../types.js';
+
+export function TreeWidget({ props, bind, on }: WidgetProps) {
+  const label = (props.label as string) ?? bind.meta?.label ?? '';
+  const placeholder = (props.placeholder as string) ?? 'Select parent...';
+  const disabled = (props.disabled as boolean) ?? bind.meta?.readOnly ?? false;
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const options = (bind.meta?.options ?? []) as { label: string; value: string; path?: string }[];
+  const currentValue = bind.value as string | null | undefined;
+  const selectedOption = options.find((o) => o.value === currentValue);
+
+  const handleSelect = (value: string) => {
+    bind.setValue?.(value);
+    on.change?.(value);
+    setOpen(false);
+    setSearch('');
+  };
+
+  const handleClear = () => {
+    bind.setValue?.(null);
+    on.change?.(null);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    on.search?.(value);
+  };
+
+  return (
+    <Field>
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className="w-full justify-between font-normal h-7 text-xs"
+          >
+            {selectedOption ? (
+              <span className="truncate">{selectedOption.path ?? selectedOption.label}</span>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder="Search..."
+              value={search}
+              onValueChange={handleSearchChange}
+            />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {currentValue && (
+                  <CommandItem value="" onSelect={handleClear} className="text-muted-foreground">
+                    Clear selection
+                  </CommandItem>
+                )}
+                {options.map((opt) => (
+                  <CommandItem
+                    key={opt.value}
+                    value={opt.value}
+                    onSelect={() => handleSelect(opt.value)}
+                    className={cn(opt.value === currentValue && 'bg-accent')}
+                  >
+                    <span className="truncate">{opt.path ?? opt.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  );
+}
+
+TreeWidget.widgetMeta = {
+  name: 'tree',
+  label: 'Tree',
+  category: 'input' as const,
+  schema: {
+    label: { type: 'string' as const },
+    placeholder: { type: 'string' as const },
+    disabled: { type: 'boolean' as const, default: false },
+  },
+  binding: 'field' as const,
+  triggers: ['change', 'search'],
+  container: false,
+};

package/src/widgets/components/index.ts

@@ -0,0 +1,30 @@
+export { ButtonWidget } from './ButtonWidget.js';
+export { InputWidget } from './InputWidget.js';
+export { TextWidget } from './TextWidget.js';
+export { BadgeWidget } from './BadgeWidget.js';
+export { IconWidget } from './IconWidget.js';
+export { GroupWidget } from './GroupWidget.js';
+export { SectionWidget } from './SectionWidget.js';
+export { DividerWidget } from './DividerWidget.js';
+export { SpacerWidget } from './SpacerWidget.js';
+export { ImageWidget } from './ImageWidget.js';
+export { SplitWidget } from './SplitWidget.js';
+export { GridWidget } from './GridWidget.js';
+export { DataWidget } from './DataWidget.js';
+export { RepeatWidget } from './RepeatWidget.js';
+export { DrawerWidget } from './DrawerWidget.js';
+export { ModalWidget } from './ModalWidget.js';
+export { TextareaWidget } from './TextareaWidget.js';
+export { DatePickerWidget } from './DatePickerWidget.js';
+export { DatetimeWidget } from './DatetimeWidget.js';
+export { MoneyWidget } from './MoneyWidget.js';
+export { LinkWidget } from './LinkWidget.js';
+export { ManyToManyWidget } from './ManyToManyWidget.js';
+export { DynamicLinkWidget } from './DynamicLinkWidget.js';
+export { AttachmentWidget } from './AttachmentWidget.js';
+export { AttachmentsWidget } from './AttachmentsWidget.js';
+export { SequenceWidget } from './SequenceWidget.js';
+export { ComputedWidget } from './ComputedWidget.js';
+export { CodeWidget } from './CodeWidget.js';
+export { JsonWidget } from './JsonWidget.js';
+export { TreeWidget } from './TreeWidget.js';

package/src/widgets/components/register.ts

@@ -0,0 +1,93 @@
+import { registerWidget } from '../registry.js';
+import { ButtonWidget } from './ButtonWidget.js';
+import { InputWidget } from './InputWidget.js';
+import { SelectWidget } from './SelectWidget.js';
+import { CheckboxWidget } from './CheckboxWidget.js';
+import { TextWidget } from './TextWidget.js';
+import { BadgeWidget } from './BadgeWidget.js';
+import { IconWidget } from './IconWidget.js';
+import { ImageWidget } from './ImageWidget.js';
+import { GroupWidget } from './GroupWidget.js';
+import { SectionWidget } from './SectionWidget.js';
+import { DividerWidget } from './DividerWidget.js';
+import { SpacerWidget } from './SpacerWidget.js';
+import { SplitWidget } from './SplitWidget.js';
+import { GridWidget } from './GridWidget.js';
+import { CardWidget } from './CardWidget.js';
+import { ScrollAreaWidget } from './ScrollAreaWidget.js';
+import { StackWidget } from './StackWidget.js';
+import { TableWidget } from './TableWidget.js';
+import { ColumnWidget } from './ColumnWidget.js';
+import { DataWidget } from './DataWidget.js';
+import { RepeatWidget } from './RepeatWidget.js';
+import { DrawerWidget } from './DrawerWidget.js';
+import { ModalWidget } from './ModalWidget.js';
+import { TextareaWidget } from './TextareaWidget.js';
+import { DatePickerWidget } from './DatePickerWidget.js';
+import { DatetimeWidget } from './DatetimeWidget.js';
+import { MoneyWidget } from './MoneyWidget.js';
+import { LinkWidget } from './LinkWidget.js';
+import { ManyToManyWidget } from './ManyToManyWidget.js';
+import { DynamicLinkWidget } from './DynamicLinkWidget.js';
+import { AttachmentWidget } from './AttachmentWidget.js';
+import { AttachmentsWidget } from './AttachmentsWidget.js';
+import { SequenceWidget } from './SequenceWidget.js';
+import { ComputedWidget } from './ComputedWidget.js';
+import { CodeWidget } from './CodeWidget.js';
+import { JsonWidget } from './JsonWidget.js';
+import { TreeWidget } from './TreeWidget.js';
+import { FormWidget } from '../form/FormWidget.js';
+import type { WidgetDefinitionMeta } from '@rangka/shared';
+import type { WidgetProps } from '../types.js';
+import type { ComponentType } from 'react';
+
+type WidgetWithMeta = ComponentType<WidgetProps> & {
+  widgetMeta: WidgetDefinitionMeta;
+};
+
+const builtInWidgets: WidgetWithMeta[] = [
+  ButtonWidget as unknown as WidgetWithMeta,
+  InputWidget as unknown as WidgetWithMeta,
+  SelectWidget as unknown as WidgetWithMeta,
+  CheckboxWidget as unknown as WidgetWithMeta,
+  TextWidget as unknown as WidgetWithMeta,
+  BadgeWidget as unknown as WidgetWithMeta,
+  IconWidget as unknown as WidgetWithMeta,
+  ImageWidget as unknown as WidgetWithMeta,
+  GroupWidget as unknown as WidgetWithMeta,
+  SectionWidget as unknown as WidgetWithMeta,
+  DividerWidget as unknown as WidgetWithMeta,
+  SpacerWidget as unknown as WidgetWithMeta,
+  SplitWidget as unknown as WidgetWithMeta,
+  GridWidget as unknown as WidgetWithMeta,
+  CardWidget as unknown as WidgetWithMeta,
+  ScrollAreaWidget as unknown as WidgetWithMeta,
+  StackWidget as unknown as WidgetWithMeta,
+  TableWidget as unknown as WidgetWithMeta,
+  ColumnWidget as unknown as WidgetWithMeta,
+  DataWidget as unknown as WidgetWithMeta,
+  RepeatWidget as unknown as WidgetWithMeta,
+  DrawerWidget as unknown as WidgetWithMeta,
+  ModalWidget as unknown as WidgetWithMeta,
+  TextareaWidget as unknown as WidgetWithMeta,
+  DatePickerWidget as unknown as WidgetWithMeta,
+  DatetimeWidget as unknown as WidgetWithMeta,
+  MoneyWidget as unknown as WidgetWithMeta,
+  LinkWidget as unknown as WidgetWithMeta,
+  ManyToManyWidget as unknown as WidgetWithMeta,
+  DynamicLinkWidget as unknown as WidgetWithMeta,
+  AttachmentWidget as unknown as WidgetWithMeta,
+  AttachmentsWidget as unknown as WidgetWithMeta,
+  SequenceWidget as unknown as WidgetWithMeta,
+  ComputedWidget as unknown as WidgetWithMeta,
+  CodeWidget as unknown as WidgetWithMeta,
+  JsonWidget as unknown as WidgetWithMeta,
+  TreeWidget as unknown as WidgetWithMeta,
+  FormWidget as unknown as WidgetWithMeta,
+];
+
+export function registerBuiltInWidgets(): void {
+  for (const widget of builtInWidgets) {
+    registerWidget(widget.widgetMeta, widget);
+  }
+}