@rangka/client 0.1.0 → 0.1.2

package/src/widgets/components/TableWidget.tsx

@@ -1,366 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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);
-  }
-}