open-index/open-npm huggingface dataset:
npm package: @opncanvas/engine
Description: Pure updater functions for immutable schema mutations - the core of the opncanvasdesign engine
Latest version: 0.1.0

# @opncanvas/engine

The core of the design system - pure updater functions for immutable schema mutations. Framework-agnostic and easily testable.

## Installation

```bash
npm install @opncanvas/engine @opncanvas/schema
```

## Philosophy

The engine uses pure functions that return new schema objects instead of mutating existing ones. This makes it:
- **Predictable**: Same input always produces same output
- **Testable**: No side effects to mock
- **Framework-agnostic**: Works with React, Vue, Svelte, or vanilla JS
- **Performance-friendly**: Immutable updates enable efficient change detection

## Usage

### With React

```typescript
import { useState } from 'react'
import { FormSchema } from '@opncanvas/schema'
import { updateNodeProperty, addNode } from '@opncanvas/engine'

function Editor() {
  const [schema, setSchema] = useState<FormSchema>(initialSchema)

  // Update a single property
  const handleLabelChange = (nodeId: string, newLabel: string) => {
    setSchema(updateNodeProperty(nodeId, 'label', newLabel))
  }

  // Add a new node
  const handleAddButton = () => {
    const newButton = {
      id: `button_${Date.now()}`,
      type: 'button' as const,
      action: 'submit' as const,
      label: 'New Button'
    }
    setSchema(addNode(newButton))
  }

  return <div>...</div>
}
```

### With Vanilla JS

```typescript
import { updateNodeProperty } from '@opncanvas/engine'

let schema = { /* ... */ }

// Apply update
schema = updateNodeProperty('button_1', 'label', 'Click Me')(schema)
```

## API

### Core Functions

- `updateNodeProperty(nodeId, property, value)` - Update a single property
- `updateNodeProperties(nodeId, updates)` - Update multiple properties at once
- `addNode(node, index?)` - Add a new node
- `removeNode(nodeId)` - Remove a node
- `reorderNodes(startIndex, endIndex)` - Reorder nodes (for drag & drop)
- `duplicateNode(nodeId)` - Duplicate a node
- `findNodeById(schema, nodeId)` - Find a node by ID

### Legacy Functions

These are provided for backward compatibility:
- `createLabelUpdater(nodeId, newLabel)`
- `createTextUpdater(nodeId, newText)`
- `createPlaceholderUpdater(nodeId, newPlaceholder)`
- `createButtonPropertyUpdater(nodeId, propertyName, value)`
- `createTextPropertyUpdater(nodeId, propertyName, value)`
- `createInputPropertyUpdater(nodeId, propertyName, value)`
- `createBackgroundPropertyUpdater(nodeId, propertyName, value)`

## Examples

### Updating Multiple Properties

```typescript
import { updateNodeProperties } from '@opncanvas/engine'

setSchema(updateNodeProperties('button_1', {
  label: 'Submit',
  color: '#000000',
  font_size: 16
}))
```

### Drag and Drop

```typescript
import { reorderNodes } from '@opncanvas/engine'

const handleDragEnd = (result) => {
  if (!result.destination) return
  
  setSchema(reorderNodes(
    result.source.index,
    result.destination.index
  ))
}
```

## License

Apache 2.0
npm package: @opncanvas/react-renderer
Description: React components for rendering design schemas (display only, no editing)
Author: Edge Foundry, Inc.
Latest version: 0.1.0

# @opncanvas/react-renderer

React components for rendering design schemas. Display-only components without editing functionality.

## Installation

```bash
npm install @opncanvas/react-renderer @opncanvas/schema react react-dom
```

## Usage

```tsx
import { RenderedButton, RenderedText, RenderedInput } from '@opncanvas/react-renderer'
import { FormButton } from '@opncanvas/schema'

function App() {
  const buttonNode: FormButton = {
    id: 'btn_1',
    type: 'button',
    action: 'submit',
    label: 'Click Me',
    color: '#000',
    font_color: '#fff'
  }

  return (
    <RenderedButton
      node={buttonNode}
      onBlockClick={(node) => console.log('Clicked:', node.id)}
    />
  )
}
```

## Components

### RenderedButton

Renders a button node.

```tsx
<RenderedButton
  node={buttonNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
  onAction={(node) => console.log('Double clicked')}
/>
```

### RenderedText

Renders text nodes (header, subtext, legal).

```tsx
<RenderedText
  node={textNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>
```

### RenderedInput

Renders input nodes (email, phone).

```tsx
<RenderedInput
  node={inputNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>
```

### RenderedImage

Renders image nodes.

```tsx
<RenderedImage
  node={imageNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
/>
```

### RenderedBackground

Renders a background container.

```tsx
<RenderedBackground
  node={backgroundNode}
  isSelected={false}
  onBlockClick={(node) => console.log('Selected')}
>
  {/* Child elements */}
</RenderedBackground>
```

## Props

All components accept these common props:

- `node` - The node data from your schema
- `isSelected` (optional) - Whether the element is selected
- `onBlockClick` (optional) - Callback when element is clicked
- `onAction` (optional) - Callback when element is double-clicked (buttons only)

## Styling

Components use inline styles based on node properties. You can add CSS classes for additional styling:

```css
.rendered-btn {
  /* Base button styles */
}

.selected {
  outline: 2px solid blue;
}

.form-container {
  /* Container styles */
}
```

## License

Apache 2.0
npm package: @opncanvas/schema
Description: Pure TypeScript types and interfaces for opncanvas design schema
Author: Edge Foundry, Inc.
Latest version: 0.1.0

# @designkit/schema

Pure TypeScript types and interfaces for design schema. No dependencies, no logic - just types.

## Installation

```bash
npm install @designkit/schema
```

## Usage

```typescript
import { FormSchema, FormNode, FormButton, FormText } from '@designkit/schema'

const mySchema: FormSchema = {
  id: 'form_1',
  type: 'form',
  children: [
    {
      id: 'button_1',
      type: 'button',
      action: 'submit',
      label: 'Submit'
    }
  ]
}
```

## Exports

- `FormSchema` - Root schema type
- `FormNode` - Union of all node types
- `FormButton` - Button node type
- `FormText` - Text node types (header, subtext, legal)
- `FormInput` - Input node type
- `FormBackground` - Background node type
- `FormImage` - Image node type
- `SchemaDocument` - Legacy schema type
- `Block` - Legacy block type

## License

MIT