@dxos/react-ui-form 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/Settings/Settings.tsx

@@ -0,0 +1,234 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Input,
+  type Label,
+  ScrollArea,
+  type ThemedClassName,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+
+const SETTINGS_ROOT_NAME = 'Settings.Root';
+const SETTINGS_SECTION_NAME = 'Settings.Section';
+const SETTINGS_SECTION_HEADING_NAME = 'Settings.SectionHeading';
+const SETTINGS_GROUP_NAME = 'Settings.Group';
+const SETTINGS_GROUP_BUTTON_NAME = 'Settings.GroupButton';
+const SETTINGS_CONTAINER_NAME = 'Settings.Container';
+const SETTINGS_FRAME_NAME = 'Settings.Frame';
+const SETTINGS_FRAME_ITEM_NAME = 'Settings.FrameItem';
+const SETTINGS_ITEM_NAME = 'Settings.Item';
+const SETTINGS_ITEM_INPUT_NAME = 'Settings.ItemInput';
+
+const styles = {
+  title: 'pbe-trimMd text-baseText text-lg',
+  description: 'text-base text-description',
+  grid: 'grid grid-cols-1 md:grid-cols-[3fr_2fr] gap-x-trimLg',
+};
+
+//
+// Root
+//
+
+type SettingsRootProps = PropsWithChildren;
+
+const SettingsRoot = ({ children }: SettingsRootProps) => {
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport classNames='p-trimMd'>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+
+//
+// Section
+//
+
+type SettingsSectionProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsSection = ({ title, description, children }: SettingsSectionProps) => {
+  return (
+    <>
+      <SettingsSectionHeading title={title} description={description} />
+      <div className='is-full pbs-trimMd space-y-trimMd'>{children}</div>
+    </>
+  );
+};
+
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+
+//
+// Section Heading
+//
+
+const SettingsSectionHeading = ({ title, description }: Omit<SettingsSectionProps, 'children'>) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      <h2 className='pli-trimMd container-max-width text-xl mbs-trimMd mbe-trimMd'>{toLocalizedString(title, t)}</h2>
+      {description && (
+        <p className='pli-trimMd mlb-trimMd container-max-width text-description'>
+          {toLocalizedString(description, t)}
+        </p>
+      )}
+    </>
+  );
+};
+
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+
+//
+// Group Button
+//
+
+const SettingsGroupButton = ({ classNames, ...props }: ButtonProps) => {
+  return <Button {...props} classNames={['md:col-span-2', classNames]} />;
+};
+
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+
+//
+// Group
+//
+
+type SettingsGroupProps = ThemedClassName<PropsWithChildren>;
+
+const SettingsGroup = ({ children, classNames }: SettingsGroupProps) => (
+  <div role='none' className={mx('group container-max-width space-y-trimMd', classNames)}>
+    {children}
+  </div>
+);
+
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+
+//
+// Frame
+//
+
+const SettingsFrame = ({ children }: SettingsGroupProps) => (
+  <div role='none' className={mx('container-max-width p-trimMd', 'border border-separator rounded-md')}>
+    {children}
+  </div>
+);
+
+SettingsFrame.displayName = SETTINGS_FRAME_NAME;
+
+//
+// Frame Item
+//
+
+const SettingsFrameItem = ({ title, description, children }: SettingsItemProps) => {
+  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>
+  );
+};
+
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+
+//
+// Container
+//
+
+const SettingsContainer = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div
+      role='none'
+      className={mx([
+        'container-max-width',
+        '*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
+        'border border-separator rounded-md',
+        classNames,
+      ])}
+    >
+      {children}
+    </div>
+  );
+};
+
+SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+
+//
+// Item
+//
+
+type SettingsItemProps = PropsWithChildren<{
+  title: Label;
+  description?: Label;
+}>;
+
+const SettingsItem = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <SettingsContainer classNames={styles.grid}>
+      <h3 className={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</h3>
+      <p className={styles.description}>{toLocalizedString(description, t)}</p>
+      <div role='none' className='text-end plb-1'>
+        {children}
+      </div>
+    </SettingsContainer>
+  );
+};
+
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+//
+// Item Input
+//
+
+const SettingsItemInput = ({ title, description = '', children }: SettingsItemProps) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <Input.Root>
+      <SettingsContainer classNames={styles.grid}>
+        <Input.Label classNames={mx(styles.title, 'md:col-span-2')}>{toLocalizedString(title, t)}</Input.Label>
+        <Input.DescriptionAndValidation>
+          <Input.Description classNames={styles.description}>{toLocalizedString(description, t)}</Input.Description>
+        </Input.DescriptionAndValidation>
+        <div role='none' className='text-end plb-1'>
+          {children}
+        </div>
+      </SettingsContainer>
+    </Input.Root>
+  );
+};
+
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+
+//
+// Settings
+//
+
+export const Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput,
+};

package/src/components/{ControlSection → Settings}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ControlSection';
+export * from './Settings';

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -13,7 +13,7 @@ import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
-import { Employer, Organization, Person, Project } from '@dxos/types';
+import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '../../translations';
 import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
@@ -24,7 +24,7 @@ const types = [
   // TODO(burdon): Get label from annotation.
   { value: Organization.Organization.typename, label: 'Organization' },
   { value: Person.Person.typename, label: 'Person' },
-  { value: Project.Project.typename, label: 'Project' },
+  { value: Pipeline.Pipeline.typename, label: 'Project' },
   { value: Employer.Employer.typename, label: 'Employer' },
 ];
 
@@ -175,7 +175,7 @@ const meta = {
         space.db.add(Tag.make({ label: 'New' }));
       },
     }),
-    withTheme,
+    withTheme(),
   ],
   parameters: {
     layout: 'fullscreen',

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -89,14 +89,10 @@ describe('ViewEditor', () => {
     await Default.run();
     await waitForViewEditor();
 
-    // Click the add property button.
+    // Click the add property button. The new field is auto-expanded by handleAdd.
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
-    // Open the last field.
-    const buttons = screen.getAllByTestId('field.toggle');
-    fireEvent.click(buttons.at(-1)!);
-
     // Fill out the property field.
     const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });

package/src/components/ViewEditor/ViewEditor.tsx

@@ -12,6 +12,7 @@ import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMem
 import { Filter, Format, Obj, Query, QueryAST, type SchemaRegistry } from '@dxos/echo';
 import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
+import { useObject } from '@dxos/react-client/echo';
 import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
@@ -21,7 +22,6 @@ import {
   ProjectionModel,
   VIEW_FIELD_LIMIT,
   type View,
-  createDirectChangeCallback,
   createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
@@ -81,11 +81,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       // Use reactive and mutable version of json schema when schema is mutable.
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
 
-      // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
-      const change =
-        schema instanceof EchoSchema
-          ? createEchoChangeCallback(view, schema)
-          : createDirectChangeCallback(view.projection, jsonSchema);
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
 
       const model = new ProjectionModel({
         registry: atomRegistry,
@@ -98,7 +96,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     }, [atomRegistry, schema, view]);
 
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
-    const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
     const queueTarget = Match.value(view.query.ast).pipe(
       Match.when({ type: 'options' }, ({ options }) => {
@@ -143,13 +140,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [mode, types, tags],
     );
 
-    // TODO(burdon): Check if mutable.
-    const handleAdd = useCallback(() => {
-      invariant(!readonly);
-      const field = projectionModel.createFieldProjection();
-      setExpandedField(field.id);
-    }, [projectionModel, readonly]);
-
     const handleUpdate = useCallback(
       (values: any) => {
         requestAnimationFrame(() => {
@@ -163,13 +153,9 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
     const handleDelete = useCallback(
       (fieldId: string) => {
         invariant(!readonly);
-        if (fieldId === expandedField) {
-          setExpandedField(undefined);
-        }
-
         onDelete?.(fieldId);
       },
-      [expandedField, onDelete, readonly],
+      [onDelete, readonly],
     );
 
     return (
@@ -195,19 +181,6 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
             onDelete={handleDelete}
           />
         </Form.Root>
-
-        {!readonly && !expandedField && (
-          <div role='none' className='mlb-cardSpacingBlock'>
-            <IconButton
-              icon='ph--plus--regular'
-              label={t('add property button label')}
-              onClick={readonly ? undefined : handleAdd}
-              // TODO(burdon): Show field limit in ux (not tooltip).
-              disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
-              classNames='is-full'
-            />
-          </div>
-        )}
       </div>
     );
   },
@@ -220,15 +193,16 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation(translationKey);
 
+  // Subscribe to view changes for reactivity.
+  const [viewSnapshot] = useObject(view);
+
   const projectionModel = useMemo(() => {
     // Use reactive and mutable version of json schema when schema is mutable.
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
 
-    // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
-    const change =
-      schema instanceof EchoSchema
-        ? createEchoChangeCallback(view, schema)
-        : createDirectChangeCallback(view.projection, jsonSchema);
+    // Always use createEchoChangeCallback since the view is ECHO-backed.
+    // Pass schema only when mutable to allow schema mutations.
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : undefined);
 
     const model = new ProjectionModel({
       registry: atomRegistry,
@@ -242,6 +216,12 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
 
   const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
+  const handleAdd = useCallback(() => {
+    invariant(!readonly);
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [projectionModel, readonly]);
+
   const handleToggleField = useCallback(
     (field: FieldType) => {
       setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
@@ -264,15 +244,15 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
   const handleMove = useCallback(
     (fromIndex: number, toIndex: number) => {
       invariant(!readonly);
-      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-      const fields = [...view.projection.fields];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
       Obj.change(view, (v) => {
+        // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+        const fields = [...v.projection.fields];
+        const [moved] = fields.splice(fromIndex, 1);
+        fields.splice(toIndex, 0, moved);
         v.projection.fields = fields;
       });
     },
-    [view.projection.fields, readonly],
+    [view, readonly],
   );
 
   const handleClose = useCallback(() => setExpandedField(undefined), []);
@@ -293,9 +273,13 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
     [projectionModel],
   );
 
+  if (!viewSnapshot) {
+    return null;
+  }
+
   return (
     <List.Root<FieldType>
-      items={view.projection.fields as FieldType[]}
+      items={viewSnapshot.projection.fields as FieldType[]}
       isItem={Schema.is(FieldSchema)}
       getId={(field) => field.id}
       onMove={readonly ? undefined : handleMove}
@@ -332,7 +316,7 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
                         <List.ItemDeleteButton
                           label={t('delete field label')}
                           autoHide={false}
-                          disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
+                          disabled={readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1}
                           onClick={() => handleDelete(field.id)}
                           data-testid='field.delete'
                         />
@@ -362,6 +346,17 @@ const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDe
               );
             })}
           </div>
+          {!readonly && !expandedField && (
+            <div role='none' className='mlb-cardSpacingBlock'>
+              <IconButton
+                icon='ph--plus--regular'
+                label={t('add property button label')}
+                onClick={handleAdd}
+                disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
+                classNames='is-full'
+              />
+            </div>
+          )}
         </>
       )}
     </List.Root>

package/src/components/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';
 export * from './ObjectPicker';
+export * from './Settings';
 export * from './ViewEditor';

package/src/hooks/useFormHandler.ts

@@ -7,6 +7,7 @@ import type * as Schema from 'effect/Schema';
 import type * as SchemaAST from 'effect/SchemaAST';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { type AnyProperties } from '@dxos/echo/internal';
 import {
   type JsonPath,
@@ -20,6 +21,8 @@ import { useDefaultValue } from '@dxos/react-ui';
 import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
+import { setValueEchoAware } from '../util';
+
 export type FormFieldStatus = {
   status?: 'error';
   error?: string;
@@ -267,7 +270,10 @@ export const useFormHandler = <T extends AnyProperties>({
       }
 
       // Update.
-      const newValues = { ...setValue$(values, jsonPath, parsedValue) };
+      // For ECHO objects, mutate in place via Obj.change(); for plain objects, spread to create new reference.
+      const newValues = Obj.isObject(values)
+        ? (setValueEchoAware(values, jsonPath, parsedValue), values)
+        : { ...setValue$(values, jsonPath, parsedValue) };
       setValues(newValues);
 
       // TODO(burdon): Check value has changed from original.

package/src/util/echo.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Obj } from '@dxos/echo';
+import { type JsonPath, setValue as setValuePlain, splitJsonPath } from '@dxos/effect';
+
+/**
+ * Sets a value on an object, using Obj.change() if it's an ECHO object.
+ */
+// TODO(wittjosiah): Consider refactoring Form to not know about ECHO at all.
+//   Instead of directly mutating the values object, Form could work with a plain
+//   object copy and communicate all mutations through callbacks (e.g., onValuesChanged).
+//   The caller would then be responsible for applying changes to ECHO objects via
+//   Obj.change(). This would keep Form agnostic to the underlying data layer and
+//   avoid coupling react-ui-form to @dxos/echo.
+export const setValueEchoAware = <T extends object>(obj: T, path: JsonPath, value: any): T => {
+  if (Obj.isObject(obj)) {
+    Obj.change(obj, (mutableObj) => {
+      Obj.setValue(mutableObj, splitJsonPath(path), value);
+    });
+    return obj;
+  }
+  return setValuePlain(obj, path, value);
+};

package/src/util/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './echo';
 export * from './field';
 export * from './formatting';
 export * from './properties';

package/dist/types/src/components/ControlSection/ControlSection.d.ts

@@ -1,23 +0,0 @@
-import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
-import { type ButtonProps, type Label, type ThemedClassName } from '@dxos/react-ui';
-export type ControlPageParams = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-export declare const ControlPage: ({ children, classNames, ...props }: ControlPageParams) => React.JSX.Element;
-export type ControlSectionProps = PropsWithChildren<{
-    title: Label;
-    description?: Label;
-}>;
-export declare const ControlSection: ({ title, description, children }: ControlSectionProps) => React.JSX.Element;
-export declare const ControlSectionHeading: ({ title, description }: Omit<ControlSectionProps, "children">) => React.JSX.Element;
-export declare const ControlGroupButton: ({ classNames, ...props }: ButtonProps) => React.JSX.Element;
-export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
-export declare const ControlGroup: ({ children, classNames }: ControlGroupProps) => React.JSX.Element;
-export declare const ControlFrame: ({ children }: ControlGroupProps) => React.JSX.Element;
-export declare const controlItemClasses: string;
-export type ControlItemProps = PropsWithChildren<{
-    title: Label;
-    description?: Label;
-}>;
-export declare const ControlItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-export declare const ControlItemInput: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-export declare const ControlFrameItem: ({ title, description, children }: ControlItemProps) => React.JSX.Element;
-//# sourceMappingURL=ControlSection.d.ts.map

package/dist/types/src/components/ControlSection/ControlSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,KAAK,EACV,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjF,eAAO,MAAM,WAAW,GAAI,oCAAoC,iBAAiB,sBAQhF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,GAAI,kCAAkC,mBAAmB,sBAOnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,wBAAwB,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,sBAYlG,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,0BAA0B,WAAW,sBAEvE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEnE,eAAO,MAAM,YAAY,GAAI,0BAA0B,iBAAiB,sBAWvE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,cAAc,iBAAiB,sBAU3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAKH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,kCAAkC,gBAAgB,sBAY7E,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAoBlF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kCAAkC,gBAAgB,sBAUlF,CAAC"}

package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ControlSection.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ControlSection/ControlSection.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

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

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

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

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

@@ -1,38 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { ControlPage, ControlSection } from './ControlSection';
-
-const meta = {
-  title: 'ui/react-ui-form/ControlSection',
-  component: ControlSection,
-  render: (args) => (
-    <ControlPage classNames='is-[40rem]'>
-      <ControlSection {...args} />
-    </ControlPage>
-  ),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof ControlSection>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Control Section',
-    description: 'This is a control section',
-  },
-};