Update ReadMe 20230619

Author: rayliverified

README.md

@@ -1,79 +1,104 @@
-## Codelessly API
+# Codelessly API
 
-This package provides a set of APIs for creating "Nodes" in Codelessly,
-a design-to-code tool that helps users import designs from Figma and convert
-them into working apps and websites. With these APIs, you can programmatically
-create your own nodes.
+> Flutter's layouts and widgets represented as models and JSON data. 
 
-## Features
+This package is used by the Codelessly Editor and CloudUI SDK to render Flutter Widgets. These APIs enable developers to interact with and manipulate user interfaces in a structured manner. It can be used to define components, layouts, interactions, and styles, among other things, programmatically.
 
-This package contains tools to extend the default Codelessly api to create custom
-`BaseNode`s only. If you wish to create and register your nodes, along with their
-respective transformers to convert your custom `BaseNode`s into Flutter widgets
-you will need to use the `codelessly_sdk` package.
+This is a lower-level package for constructing an abstract, universal data representation of UI. If you're looking for the developer SDK, use the [Codelessly Cloud UI SDK](https://pub.dev/packages/codelessly_sdk). 
 
-This package is built with pure Dart, not relying on Flutter.
-It is meant specifically for defining `BaseNode`s and nothing else, as it does not
-contain any tools for converting Nodes into Flutter widgets or for interacting
-with the Codelessly editor. It is intended to be used in conjunction with
-the `codelessly_sdk` package for those purposes.
+## About
 
-In light of that, and to enable complete serialization of all nodes, this package
-contains a custom set of base classes that mirror Flutter's own models. Some of those
-include `Vec`, `RectC`, `SizeC`, `AlignC`, as well as most properties you would find
-in a given Flutter widget.
+> User Interfaces (UI) as data.
 
-Classes that mirror Flutter tend to be suffixed with a `C` for `Codelessly` or `Model` to
-differentiate them from their Flutter counterparts like `AlignmentModel`
+This lower-level package establishes a foundation for an abstract, universally interpretable data representation of UI. The API is language-agnostic, written in pure Dart with no Flutter dependencies. 
+
+This universal approach allows for broad, diverse applications across different programming languages.  The result is a library that supports the construction of complex UI structures, regardless of the programming language or development environment.
+
+For example, we've translated this library to Javascript and Typescript and created a prototype SDK for building native web UIs. We were able to deploy the same UI to Flutter and HTML simultaneously.
+
+Our goal is to continuously build a set of fundamental UI constructs that can express UI in HTML, SwiftUI, Android Compose, and eventually AI.
 
-## Usage
+## Quick Start
 
-Here is a minimal example of how to use this package to create a custom `BaseNode`:
+This package contains tools to create custom `BaseNodes`. To convert a custom `BaseNode` into UI, see the language specific Flutter implementation in the [Codelessly Cloud UI SDK](https://pub.dev/packages/codelessly_sdk) package.
 
-Please read the code inside `BaseNode` to better understand what each property does, and
-refer to one of the many nodes under `codelessly_api/lib/api/nodes` for additional
-examples.
+This is how you can create a custom `BaseNode`:
 
 ```dart
 import 'package:codelessly_api/codelessly_api.dart';
 import 'package:json_annotation/json_annotation.dart';
 
-part 'my_cool_node.g.dart';
+part 'custom_node.g.dart';
 
-/// At it's core, this is the most basic example of how to create a complete
-/// [BaseNode].
 @JsonSerializable()
-class MyCoolNode extends BaseNode {
+class CustomNode extends BaseNode {
   @override
-  final String type = 'my_cool_node';
+  final String type = 'custom_node';
 
   MyCoolNode({
     required super.id,
     required super.name,
     required super.basicBoxLocal,
   });
 
-  factory MyCoolNode.fromJson(Map json) => _$MyCoolNodeFromJson(json);
+  factory CustomNode.fromJson(Map json) => _$CustomNodeFromJson(json);
 
   @override
-  Map toJson() => _$MyCoolNodeToJson(this);
+  Map toJson() => _$CustomNodeToJson(this);
 }
 ```
 
-Make sure to register your node with the `NodeJsonConverter` so that it can be
-properly deserialized from json. The NodeJsonConverter will deserialize any
-registered nodes into their proper types.
+All nodes must extend `BaseNode`. Please refer to the documentation inside `BaseNode` for more information. 
+
+Then, register your node with the `NodeJsonConverter` so that it can be properly deserialized from json. The NodeJsonConverter will deserialize any registered nodes into their proper types.
 
 ```
-NodeJsonConverter.registerNode('my_cool_node', MyCoolNode.fromJson);
+NodeJsonConverter.registerNode('custom_node', CustomNode.fromJson);
 ```
 
-## Additional information
+For more examples, see [`codelessly_api/lib/api/nodes`](https://github.com/Codelessly/CodelesslyAPI/tree/main/lib/src/api/nodes)
+
+## Key Concepts
+
+### Base Classes
+
+The base classes provided by the CodelesslyAPI include `Vec`, `RectC`, `SizeC`, `AlignC`, and others. They mirror Flutter's own models and offer functionalities that represent essential building blocks for Flutter widgets. 
+
+These classes encapsulate key properties and behaviors needed for vector representations (`Vec`), rectangular shapes (`RectC`), sizes (`SizeC`), and alignment specifications (`AlignC`). Each class is equipped with serialization and deserialization capabilities, allowing them to be conveniently converted to and from JSON format. These classes collectively provide a foundation for defining and manipulating UI elements in Flutter applications.
+
+Classes that mirror Flutter tend to be suffixed with a `C` for `Codelessly` or `Model` to
+differentiate them from their Flutter counterparts like `RectC`.
+
+- **Vec**: This class represents a two-dimensional vector with x and y coordinates.
+- **RectC**: This class represents a rectangle with a top-left position and a size. The position is represented as a `Vec` object, while the size is represented as a `SizeC` object.
+
+### Components
+
+Components represent the building blocks of the user interface. They can be anything from a single button to a complex form or even an entire webpage.
+
+- `ComponentModel`: A single component that holds properties of the component (`type`), its unique identifier (`id`), and actions associated with it (`action`).
+
+### Actions
+
+Actions define what should happen when a user interacts with a component in a certain way (for example, clicking a button or submitting a form).
+
+- `ActionModel`: Holds information about an action to perform on a user interaction. It defines the type of the action (`type`), which can be things like navigating to a page, opening a link, submitting a form, etc.
+
+### Paint
+
+The `PaintModel` is used to define styles that can be applied to components. It can represent a solid color, gradient, or image texture.
+
+- `PaintModel`: Defines the style properties such as the type of paint (`type`), its visibility (`visible`), and its opacity (`opacity`), among others. Depending on the type of paint, it might have properties like color (`color`), gradient transform (`gradientTransform`), gradient stops (`gradientStops`), or image transform (`imageTransform`).
+
+## Contributing
+
+Contributions are welcome! Please open an issue to start a discussion.
+
+## Acknowledgments
+
+Special thanks to the Flutter community for providing the inspiration and foundation for this project.
 
-If you have any questions or run into any issues, you can file a support ticket through the Codelessly website or
-contact the Codelessly team directly. We welcome contributions to this package and encourage you to submit any issues or
-pull requests through the
-GitHub repository.
+## Contact Us
 
-You can contact us on our [Website](https://codelessly.com/) or join us on
+You can contact us on our [website](https://codelessly.com/) or join us on
 our [Discord Server](https://discord.gg/Bzaz7zmY6q).