@dxos/react-ui-form 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/dist/types/src/components/Form/factory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,UAAU,EAAE,SAAS,UAAU,GAAG,MAAM,KAAG,cAAc,GAAG,SAgBnG,CAAC"}

package/dist/types/src/components/deprecated/Form.d.ts

@@ -1,15 +0,0 @@
-import { type Schema } from 'effect';
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type Projection } from '@dxos/schema';
-export type DeprecatedFormProps<T extends {} = {}> = ThemedClassName<{
-    projection: Projection;
-    object: T;
-    schema?: Schema.Schema<T>;
-    readonly?: boolean;
-}>;
-/**
- * Schema-based object form.
- */
-export declare const DeprecatedForm: <T extends {} = {}>({ classNames, projection, object, schema, readonly, }: DeprecatedFormProps<T>) => React.JSX.Element;
-//# sourceMappingURL=Form.d.ts.map

package/dist/types/src/components/deprecated/Form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,MAAM,EAAmB,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAsD,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE1G,OAAO,EAAE,KAAK,UAAU,EAAgC,MAAM,cAAc,CAAC;AAE7E,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,eAAe,CAAC;IACnE,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,CAAC,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,uDAM/C,mBAAmB,CAAC,CAAC,CAAC,sBA0DxB,CAAC"}

package/dist/types/src/components/deprecated/Form.stories.d.ts

@@ -1,13 +0,0 @@
-import '@dxos-theme';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { type TestType } from '@dxos/schema/testing';
-import { type DeprecatedFormProps } from './Form';
-declare const DefaultStory: (props: DeprecatedFormProps) => React.JSX.Element;
-declare const meta: Meta<typeof DefaultStory>;
-export default meta;
-type Story = StoryObj<DeprecatedFormProps<TestType>>;
-export declare const Default: Story;
-export declare const Empty: Story;
-export declare const Readonly: Story;
-//# sourceMappingURL=Form.stories.d.ts.map

package/dist/types/src/components/deprecated/Form.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAc,KAAK,QAAQ,EAAsB,MAAM,sBAAsB,CAAC;AAMrF,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAElE,QAAA,MAAM,YAAY,GAAI,OAAO,mBAAmB,sBAM/C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAQnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAErD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC"}

package/dist/types/src/components/deprecated/FormInput.d.ts

@@ -1,16 +0,0 @@
-import { type JSX, type PropsWithChildren } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-/**
- * @deprecated
- */
-export declare const DeprecatedFormContainer: ({ children, classNames }: ThemedClassName<PropsWithChildren>) => JSX.Element;
-export type DeprecatedFormInputProps = {
-    label: string;
-    description?: JSX.Element;
-    secondary?: JSX.Element;
-};
-/**
- * @deprecated
- */
-export declare const DeprecatedFormInput: ({ label, description, secondary, children, }: PropsWithChildren<DeprecatedFormInputProps>) => JSX.Element;
-//# sourceMappingURL=FormInput.d.ts.map

package/dist/types/src/components/deprecated/FormInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/FormInput.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,GAAG,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAG7D;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,0BAA0B,eAAe,CAAC,iBAAiB,CAAC,gBAQnG,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,8CAKjC,iBAAiB,CAAC,wBAAwB,CAAC,gBAkC7C,CAAC"}

package/dist/types/src/components/deprecated/index.d.ts

@@ -1,2 +0,0 @@
-export * from './FormInput';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/deprecated/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}

package/dist/types/src/hooks/useForm.d.ts

@@ -1,67 +0,0 @@
-import { type Schema } from 'effect';
-import { type BaseObject } from '@dxos/echo-schema';
-import { type JsonPath, type SimpleType } from '@dxos/effect';
-import { type ValidationError } from '@dxos/schema';
-import { type MaybePromise } from '@dxos/util';
-/**
- * Return type from `useForm` hook.
- */
-export type FormHandler<T extends BaseObject> = {
-    values: Partial<T>;
-    errors: Record<JsonPath, string>;
-    touched: Record<JsonPath, boolean>;
-    changed: Record<JsonPath, boolean>;
-    canSave: boolean;
-    formIsValid: boolean;
-    handleSave: () => void;
-    getStatus: (path: string | (string | number)[]) => {
-        status?: 'error';
-        error?: string;
-    };
-    getValue: <V>(path: (string | number)[]) => V | undefined;
-    onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
-    onTouched: (path: (string | number)[]) => void;
-};
-/**
- * Hook options.
- */
-export interface FormOptions<T extends BaseObject> {
-    /**
-     * Effect schema (Type literal).
-     */
-    schema: Schema.Schema<T, any>;
-    /**
-     * Initial values (which may not pass validation).
-     */
-    initialValues: Partial<T>;
-    /**
-     * Callback for value changes. Note: This is called even when values are invalid.
-     * Sometimes the parent component may want to know about changes even if the form is
-     * in an invalid state.
-     */
-    onValuesChanged?: (values: Partial<T>) => void;
-    /**
-     * Custom validation function that runs only after schema validation passes.
-     * Use this for complex validation logic that can't be expressed in the schema.
-     * @returns Array of validation errors, or undefined if validation passes
-     */
-    onValidate?: (values: T) => ValidationError[] | undefined;
-    /**
-     * Called when the form is valid.
-     */
-    onValid?: (values: T, meta: {
-        changed: FormHandler<T>['changed'];
-    }) => void;
-    /**
-     * Called when the form is submitted and passes validation.
-     */
-    onSave?: (values: T, meta: {
-        changed: FormHandler<T>['changed'];
-    }) => MaybePromise<void>;
-}
-/**
- * Creates a hook for managing form state, including values, validation, and submission.
- * Deeply integrated with `@dxos/schema` for schema-based validation.
- */
-export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave, }: FormOptions<T>) => FormHandler<T>;
-//# sourceMappingURL=useForm.d.ts.map

package/dist/types/src/hooks/useForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,MAAM,EAAa,MAAM,QAAQ,CAAC;AAGhD,OAAO,EAAE,KAAK,UAAU,EAAsB,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAA4C,MAAM,cAAc,CAAC;AAGxG,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAGrB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxF,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClF,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,EAAE,0EAO3C,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAoLhC,CAAC"}

package/dist/types/src/hooks/useQueryRefOptions.d.ts

@@ -1,23 +0,0 @@
-import { type TypeAnnotation } from '@dxos/echo-schema';
-import { type DXN } from '@dxos/keys';
-import { type TagPickerItemData } from '@dxos/react-ui-tag-picker';
-import { type MaybePromise } from '@dxos/util';
-export type RefOption = {
-    dxn: DXN;
-    label?: string;
-};
-export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
-type UseQueryRefOptionsProps = {
-    refTypeInfo: TypeAnnotation | undefined;
-    onQueryRefOptions?: QueryRefOptions;
-};
-/**
- * Hook to query reference options based on type information.
- * Used internally within forms to fetch and format reference options for reference fields.
- */
-export declare const useQueryRefOptions: ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
-    options: TagPickerItemData[];
-    loading: boolean;
-};
-export {};
-//# sourceMappingURL=useQueryRefOptions.d.ts.map

package/dist/types/src/hooks/useQueryRefOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useQueryRefOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useQueryRefOptions.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC;AAElF,KAAK,uBAAuB,GAAG;IAAE,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,oCAAoC,uBAAuB;;;CA+B7F,CAAC"}

package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts

@@ -1,8 +0,0 @@
-import { type Space } from '@dxos/react-client/echo';
-import { type QueryRefOptions } from './useQueryRefOptions';
-type UseRefQueryLookupProps = {
-    space?: Space;
-};
-export declare const useRefQueryLookupHandler: ({ space }: UseRefQueryLookupProps) => QueryRefOptions;
-export {};
-//# sourceMappingURL=useRefQueryLookupHandler.d.ts.map

package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRefQueryLookupHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefQueryLookupHandler.ts"],"names":[],"mappings":"AAOA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,KAAK,sBAAsB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEhD,eAAO,MAAM,wBAAwB,GAAI,WAAW,sBAAsB,KAAG,eAwB5E,CAAC"}

package/dist/types/src/util/schema.d.ts

@@ -1,3 +0,0 @@
-import { SchemaAST } from 'effect';
-export declare const findArrayElementType: (ast: SchemaAST.AST) => SchemaAST.AST | undefined;
-//# sourceMappingURL=schema.d.ts.map

package/dist/types/src/util/schema.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/util/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAInC,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,CAAC,GAAG,8BAKtD,CAAC"}

package/src/components/ControlSection/ControlSection.stories.tsx

@@ -1,42 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { StackItem } from '@dxos/react-ui-stack';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../../translations';
-
-import { ControlPage, ControlSection, type ControlSectionProps } from './ControlSection';
-
-const meta: Meta<ControlSectionProps> = {
-  title: 'ui/react-ui-form/ControlSection',
-  component: ControlSection,
-  render: (args) => (
-    <StackItem.Content classNames='w-[40rem]'>
-      <ControlPage>
-        <ControlSection {...args} />
-      </ControlPage>
-    </StackItem.Content>
-  ),
-  decorators: [withLayout({ fullscreen: true, classNames: 'justify-center' }), withTheme],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ControlSectionProps>;
-
-export const Default: Story = {
-  args: {
-    title: 'Control Section',
-    description: 'This is a control section',
-  },
-};

package/src/components/ControlSection/ControlSection.tsx

@@ -1,139 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-
-import {
-  Button,
-  type ButtonProps,
-  Input,
-  type Label,
-  type ThemedClassName,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translationKey } from '../../translations';
-
-export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-
-export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
-  return (
-    <div role='none' className={mx('pli-cardSpacingInline', classNames)} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export type ControlSectionProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
-  return (
-    <>
-      <ControlSectionHeading title={title} description={description} />
-      {children}
-    </>
-  );
-};
-
-export const ControlSectionHeading = ({ title, description }: Omit<ControlSectionProps, 'children'>) => {
-  const { t } = useTranslation(translationKey);
-  return (
-    <>
-      <h2 className='pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd'>{toLocalizedString(title, t)}</h2>
-      {description && (
-        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
-          {toLocalizedString(description, t)}
-        </p>
-      )}
-    </>
-  );
-};
-
-export const ControlGroupButton = ({ classNames, ...props }: ButtonProps) => {
-  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
-};
-
-export type ControlGroupProps = ThemedClassName<PropsWithChildren<{}>>;
-
-export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
-  <div
-    role='none'
-    className={mx('group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd', classNames)}
-  >
-    {children}
-  </div>
-);
-
-export const ControlFrame = ({ children }: ControlGroupProps) => (
-  <div
-    role='none'
-    className='p-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md'
-  >
-    {children}
-  </div>
-);
-
-export type ControlItemProps = PropsWithChildren<{
-  title: Label;
-  description?: Label;
-}>;
-
-export const controlItemClasses =
-  'pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0';
-
-const controlItemTitleClasses = 'text-lg font-normal';
-const controlItemDescriptionClasses = 'text-base mlb-trimSm md:mbe-0 text-description';
-
-export const ControlItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div className={controlItemClasses}>
-      <div role='none'>
-        <h3 className={controlItemTitleClasses}>{toLocalizedString(title, t)}</h3>
-        {description && <p className={controlItemDescriptionClasses}>{toLocalizedString(description, t)}</p>}
-      </div>
-      {children}
-    </div>
-  );
-};
-
-export const ControlItemInput = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <Input.Root>
-      <div className={controlItemClasses}>
-        <div role='none'>
-          <Input.Label classNames={controlItemTitleClasses}>{toLocalizedString(title, t)}</Input.Label>
-          {description && (
-            <Input.DescriptionAndValidation>
-              <Input.Description classNames={controlItemDescriptionClasses}>
-                {toLocalizedString(description, t)}
-              </Input.Description>
-            </Input.DescriptionAndValidation>
-          )}
-        </div>
-        {children}
-      </div>
-    </Input.Root>
-  );
-};
-
-export const ControlFrameItem = ({ title, description, children }: ControlItemProps) => {
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <div role='group' className='min-is-0'>
-      <h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
-      {description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
-      {children}
-    </div>
-  );
-};

package/src/components/Form/ArrayField.tsx

@@ -1,125 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { SchemaAST, pipe } from 'effect';
-import { capitalize } from 'effect/String';
-import React, { Fragment, useCallback } from 'react';
-
-import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
-import { invariant } from '@dxos/invariant';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
-
-import { translationKey } from '../../translations';
-import { findArrayElementType } from '../../util';
-
-import { type ComponentLookup } from './Form';
-import { FormField } from './FormContent';
-import { type FormInputStateProps, useFormValues } from './FormContext';
-import { type InputComponent, InputHeader } from './Input';
-
-type ArrayFieldProps = {
-  property: SchemaProperty<any>;
-  readonly?: boolean;
-  inputProps: FormInputStateProps;
-  path?: (string | number)[];
-  Custom?: Partial<Record<string, InputComponent>>;
-  lookupComponent?: ComponentLookup;
-};
-
-export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
-  const { t } = useTranslation(translationKey);
-  const { ast, name, type, title } = property;
-  // TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
-  //  It doesn't become live until another field is touched, but that's better than the whole form crashing.
-  const values = (useFormValues(path ?? []) ?? []) as any[];
-  invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
-  const label = title ?? pipe(name, capitalize);
-
-  const elementType = findArrayElementType(ast);
-
-  const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
-    const baseNode = findNode(typeNode, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-
-    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
-  };
-
-  const getDefaultValue = () =>
-    type === 'object' && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-
-  const handleAdd = useCallback(() => {
-    inputProps.onValueChange(type, [...values, getDefaultValue()]);
-  }, [type, elementType, inputProps, values]);
-
-  const handleRemove = useCallback(
-    (index: number) => {
-      const newValues = values.filter((_, i) => i !== index);
-      inputProps.onValueChange(type, newValues);
-    },
-    [type, inputProps, values],
-  );
-
-  if (!elementType) {
-    return null;
-  }
-
-  return readonly && values.length < 1 ? null : (
-    <>
-      <InputHeader readonly label={label} />
-      <div
-        role='none'
-        className={
-          readonly
-            ? 'flex flex-wrap gap-1 mlb-1'
-            : values.length > 0
-              ? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
-              : 'hidden'
-        }
-      >
-        {values.map((_value, index) => {
-          const field = (
-            <FormField
-              property={{
-                ...property,
-                array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
-                ast: elementType,
-              }}
-              path={[...(path ?? []), index]}
-              readonly={readonly}
-              inline
-              Custom={Custom}
-              lookupComponent={lookupComponent}
-            />
-          );
-          return readonly ? (
-            field
-          ) : (
-            <Fragment key={index}>
-              <div role='none'>{field}</div>
-              <IconButton
-                icon='ph--trash--regular'
-                iconOnly
-                label={t('button remove')}
-                onClick={() => handleRemove(index)}
-                classNames='self-center'
-              />
-            </Fragment>
-          );
-        })}
-      </div>
-      {!readonly && (
-        <IconButton
-          classNames='is-full mlb-cardSpacingBlock flex'
-          icon='ph--plus--regular'
-          label={t('add field')}
-          onClick={handleAdd}
-        />
-      )}
-    </>
-  );
-};