cnd-core

A fully-typed, tree-shakable TypeScript implementation of Cope and Drag.
Supports multiple languages (e.g. Alloy, Forge, DOT, Racket),
with pluggable evaluators and layouts for extensibility.

🚀 New: Combined Input Component

The Combined Input Component provides a simplified API that eliminates the need to write complex synchronization logic between REPL, layout interface, and visualization components.

``javascript
// Simple setup - just one function call!
CndCore.mountCombinedInput('my-container', {
cndSpec: 'nodes:\n - { id: node, type: atom }',
dataInstance: myPyretDataInstance,
pyretEvaluator: window.__internalRepl,
projections: {}
});
`

This replaces the complex setup shown in the Pyret REPL demo with a single, easy-to-use component.

---

Features

`bash
npm install cnd-core
`

- View on npm

---

CDN

You can use the browser bundle directly from a CDN:

- jsDelivr:
https://cdn.jsdelivr.net/npm/cnd-core/dist/browser/cnd-core-complete.global.js
- unpkg:
https://unpkg.com/cnd-core/dist/browser/cnd-core-complete.global.js

Example usage:
`html


`

---

Usage

$3

`typescript
// Import the main API and types
import { AlloyDataInstance, ForgeEvaluator, LayoutInstance, parseAlloyXML, parseLayoutSpec } from 'cnd-core';

// Or import only what you need for tree-shaking
import { RacketGDataInstance } from 'cnd-core/racket';
import { SimpleGraphQueryEvaluator } from 'cnd-core/evaluators';
`

---

$3

`typescript
import { AlloyDataInstance, ForgeEvaluator, LayoutInstance, parseAlloyXML, parseLayoutSpec } from 'cnd-core';

// Parse Alloy XML
const alloyDatum = parseAlloyXML(alloyXmlString);
const dataInstance = new AlloyDataInstance(alloyDatum.instances[0]);

// Create evaluator
const evaluator = new ForgeEvaluator();
evaluator.initialize({ sourceData: alloyXmlString });

// Parse CnD Layout Spec
const layoutSpec = parseLayoutSpec(layoutSpecString);

// Create layout instance and generate layout
const layoutInstance = new LayoutInstance(layoutSpec, evaluator, 0, true);
const { layout } = layoutInstance.generateLayout(dataInstance, {});

// Use layout with your renderer or custom element
`

---

$3

`typescript
import { RacketGDataInstance, SimpleGraphQueryEvaluator, LayoutInstance, parseLayoutSpec } from 'cnd-core';

// Parse Racket JSON
const datum = JSON.parse(racketJsonString);
const dataInstance = new RacketGDataInstance(datum);

// Create evaluator
const evaluator = new SimpleGraphQueryEvaluator();
evaluator.initialize({ dataInstance });

// Parse layout spec
const layoutSpec = parseLayoutSpec(layoutSpecString);

// Create layout instance and generate layout
const layoutInstance = new LayoutInstance(layoutSpec, evaluator, 0, true);
const { layout } = layoutInstance.generateLayout(dataInstance, {});
`

---

$3

`html


`

---

$3

The Combined Input Component provides a single, easy-to-use interface that combines REPL, layout interface, and graph visualization with automatic synchronization.

#### Basic Usage

`javascript
// Load the component bundle



// Simple setup
CndCore.mountCombinedInput('my-container', {
cndSpec: 'nodes:\n - { id: node, type: atom }',
dataInstance: myPyretDataInstance,
pyretEvaluator: window.__internalRepl,
projections: {}
});
`

#### Advanced Configuration

`javascript
CndCore.mountCombinedInput('container-id', {
// Initial data and evaluator
cndSpec: 'nodes:\n - { id: Person, type: atom, color: "#FF6B35" }',
dataInstance: new CndCore.PyretDataInstance(myData),
pyretEvaluator: window.__internalRepl,
projections: { people: 'Person' },

// Layout and behavior
height: '800px',
showLayoutInterface: true,
autoApplyLayout: true,

// Event callbacks
onInstanceChange: (instance) => console.log('Data updated:', instance),
onSpecChange: (spec) => console.log('Layout updated:', spec),
onLayoutApplied: (layout) => console.log('Layout applied:', layout)
});
`

#### Alternative Usage Patterns

`javascript
// Create a div and append to document
const div = CndCore.createCombinedInputSetup(
'nodes:\n - { id: node, type: atom }',
dataInstance,
pyretREPLInternal,
projections
);
document.body.appendChild(div);

// Direct setup function
CndCore.setupCombinedInput(
'container-id',
'nodes:\n - { id: node, type: atom }',
dataInstance,
pyretREPLInternal,
projections
);
`

#### What You Get

- Pyret REPL Interface: Command-line style data entry and manipulation
- CnD Layout Interface: Visual constraint specification with No-Code and Code views
- Graph Visualization: Real-time webcola-cnd-graph rendering
- Automatic Synchronization: All components stay in sync without manual event handling
- Layout Management: Automatic layout application with staleness indicators

---

Quick Start: Visualizing Graphs with CnD Core (No React Required)

This guide shows how to use CnD Core in a plain HTML page to visualize Alloy or DOT graphs with a CND layout, using the CDN bundle and the custom element.

$3

`html





`

$3

`html

`

$3

- Alloy XML: Paste or load your Alloy XML instance as a string.
- DOT: Paste or load your DOT graph as a string.
- CND Layout Spec: Write your layout in YAML (as a string).

$3

`html

`

#### For DOT graphs, use:
`html

`

---

$3

`html












`

---

You do not need React or any build tools.
Just include the scripts, use the custom element, and run the pipeline in plain JavaScript.

For more advanced usage, see the demo HTML files in the repo.

---

License

MIT

---

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

---

TODO:

- remove SPECIFIC edges?
- Pyret re-ify needs some work?