@esheet/builder 0.0.1

package/README.md

@@ -0,0 +1,119 @@
+# @esheet/builder
+
+Drag-and-drop questionnaire builder for eSheet. Provides a full editing UI for creating and modifying form schemas.
+
+## Features
+
+- ✅ Visual form builder with drag & drop (custom pointer-based engine)
+- ✅ 19 built-in field types via `@esheet/fields`
+- ✅ Section nesting with drag-into-section support
+- ✅ Field editors (question text, options, matrix rows/columns, conditional logic)
+- ✅ Code view with Monaco editor (JSON/YAML toggle)
+- ✅ Live preview mode
+- ✅ Import/Export (JSON + YAML)
+- ✅ Custom field type registration
+- ✅ Dark mode support
+- ✅ Mobile responsive (bottom drawer for panels)
+- ✅ Self-contained CSS (injected at runtime, no external stylesheet needed)
+
+## Installation
+
+```bash
+npm install @esheet/builder @esheet/fields @esheet/core
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { EsheetBuilder } from '@esheet/builder';
+import type { FormDefinition } from '@esheet/core';
+
+function App() {
+  const handleChange = (definition: FormDefinition) => {
+    console.log('Form updated:', definition);
+  };
+
+  return <EsheetBuilder onChange={handleChange} />;
+}
+```
+
+### With Initial Schema
+
+```tsx
+import { EsheetBuilder } from '@esheet/builder';
+
+const initialForm: FormDefinition = {
+  schemaType: 'mieforms-v1.0',
+  title: 'Patient Intake',
+  fields: [
+    { id: 'name', fieldType: 'text', question: 'Full Name', required: true },
+    { id: 'dob', fieldType: 'date', question: 'Date of Birth' },
+  ],
+};
+
+<EsheetBuilder initialDefinition={initialForm} onChange={handleChange} />;
+```
+
+### Dark Mode
+
+```tsx
+<div className="dark">
+  <EsheetBuilder onChange={handleChange} />
+</div>
+```
+
+Add the `dark` class to the builder's root or any ancestor — the builder scopes all dark styles via `.ms-builder-root.dark`.
+
+## API
+
+### `<EsheetBuilder>`
+
+**Props:**
+
+| Prop                | Type                            | Description                     |
+| ------------------- | ------------------------------- | ------------------------------- |
+| `initialDefinition` | `FormDefinition`                | Pre-load a form schema          |
+| `onChange`          | `(def: FormDefinition) => void` | Callback on any form change     |
+| `className`         | `string`                        | Additional CSS classes for root |
+
+## Custom Field Types
+
+```tsx
+import { EsheetBuilder } from '@esheet/builder';
+import { registerCustomFieldTypes } from '@esheet/fields';
+import { registerFieldType } from '@esheet/core';
+
+// Register the metadata
+registerFieldType({
+  type: 'nps',
+  label: 'NPS Score',
+  category: 'scale',
+  defaultProps: { question: 'How likely are you to recommend us?' },
+});
+
+// Register the component
+registerCustomFieldTypes({
+  nps: {
+    component: NpsField,
+    meta: {
+      /* ... */
+    },
+  },
+});
+
+<EsheetBuilder onChange={handleChange} />;
+```
+
+## CSS Architecture
+
+The builder uses Tailwind CSS v4 with `ms:` prefix. CSS is compiled via `@tailwindcss/cli` and embedded into the JS bundle at build time — consumers never need to import a stylesheet. A scoped reset on `.ms-builder-root` prevents style leakage in either direction.
+
+## Building
+
+Run `nx build @esheet/builder` to build the library.
+
+## Running unit tests
+
+Run `nx test @esheet/builder` to execute the unit tests via [Vitest](https://vitest.dev/).

package/dist/index.d.ts

@@ -0,0 +1,141 @@
+import { BuilderMode } from '@esheet/core';
+import { createUIStore } from '@esheet/core';
+import { default as default_2 } from 'react';
+import { EditTab } from '@esheet/core';
+import { FieldComponentProps } from '@esheet/core';
+import { FormDefinition } from '@esheet/core';
+import { FormStore } from '@esheet/core';
+import { FormStoreContext } from '@esheet/fields';
+import { getFieldComponent } from '@esheet/fields';
+import { getRegisteredComponentKeys } from '@esheet/fields';
+import { JSX } from 'react/jsx-runtime';
+import { registerCustomFieldTypes } from '@esheet/fields';
+import { resetComponentRegistry } from '@esheet/fields';
+import { UIContext } from '@esheet/fields';
+import { UIState } from '@esheet/core';
+import { UIStore } from '@esheet/core';
+import { useFormStore } from '@esheet/fields';
+import { useUI } from '@esheet/fields';
+
+/**
+ * BuilderHeader — top bar with Build/Code/Preview mode toggle and Import/Export actions.
+ */
+export declare function BuilderHeader({ form, ui }: BuilderHeaderProps): JSX.Element;
+
+export declare interface BuilderHeaderProps {
+    form: FormStore;
+    ui: UIStore;
+}
+
+export { BuilderMode }
+
+/**
+ * CodeView — Monaco-based JSON/YAML editor for the form definition.
+ *
+ * Serialize on mount, live-validate on edit, auto-save on unmount.
+ */
+export declare function CodeView({ form, ui }: CodeViewProps): JSX.Element;
+
+export declare interface CodeViewProps {
+    form: FormStore;
+    ui: UIStore;
+}
+
+export { createUIStore }
+
+export { EditTab }
+
+export declare function EsheetBuilder({ definition, onChange, dragEnabled, className, children, }: EsheetBuilderProps): JSX.Element;
+
+export declare interface EsheetBuilderProps {
+    /** Initial form definition to load. */
+    definition?: FormDefinition;
+    /** Callback fired when the form definition changes. */
+    onChange?: (definition: FormDefinition) => void;
+    /** Whether drag-and-drop reordering is enabled (default: true). Disable for better performance on slow devices. */
+    dragEnabled?: boolean;
+    /** Additional CSS class name. */
+    className?: string;
+    /** Optional content rendered below the header (e.g. custom status/debug panels). */
+    children?: default_2.ReactNode;
+}
+
+export { FieldComponentProps }
+
+/**
+ * FieldWrapper - Extensibility API for custom field components.
+ *
+ * Wraps a field with collapsible header, selection highlighting, edit/delete buttons, and drag handles.
+ * Exposes field data and tools to the render function, allowing users to create
+ * custom field types while getting all the built-in editor functionality.
+ *
+ * @example
+ * ```tsx
+ * <FieldWrapper fieldId={id} form={form} ui={ui}>
+ *   {({ field, onUpdate, onRemove }) => (
+ *     <div>
+ *       <input
+ *         value={field.question}
+ *         onChange={(e) => onUpdate({ question: e.target.value })}
+ *       />
+ *     </div>
+ *   )}
+ * </FieldWrapper>
+ * ```
+ */
+export declare function FieldWrapper({ fieldId, form, ui, dragHandleRef, isSelectedOverride, onSelectOverride, selectedVariant, forceExpandVersion, children, }: FieldWrapperProps): JSX.Element | null;
+
+export declare interface FieldWrapperProps {
+    /** The field ID */
+    fieldId: string;
+    /** The form store */
+    form: FormStore;
+    /** The UI store */
+    ui: UIStore;
+    /** Ref attached to the drag-handle element. */
+    dragHandleRef?: default_2.RefObject<HTMLDivElement | null>;
+    /** Optional override for selection state (used by nested section child interaction). */
+    isSelectedOverride?: boolean;
+    /** Optional override for click selection behavior. */
+    onSelectOverride?: (e: default_2.MouseEvent) => void;
+    /** Optional selected styling variant. */
+    selectedVariant?: 'default' | 'nested';
+    /** Optional signal used to force expand a field wrapper (used for section drop UX). */
+    forceExpandVersion?: number;
+    /** Render function that receives field data and tools */
+    children: (props: FieldWrapperRenderProps) => default_2.ReactNode;
+}
+
+/**
+ * Props exposed to the render function for custom field components.
+ * Identical to `FieldComponentProps` from core — kept as a named alias for
+ * backward-compatibility with existing builder consumers.
+ */
+export declare type FieldWrapperRenderProps = FieldComponentProps;
+
+export { FormStoreContext }
+
+export { getFieldComponent }
+
+export { getRegisteredComponentKeys }
+
+export declare const InstanceIdContext: default_2.Context<string>;
+
+export { registerCustomFieldTypes }
+
+export { resetComponentRegistry }
+
+export { UIContext }
+
+export { UIState }
+
+export { UIStore }
+
+export { useFormStore }
+
+/** Hook to access the per-instance ID for unique DOM element IDs. */
+export declare function useInstanceId(): string;
+
+export { useUI }
+
+export { }