update ui

Cargo.toml

@@ -8,6 +8,7 @@ members = [
   "libs/validate",
   "libs/project",
   "libs/evaluator",
+  "libs/tidy",
   "libs/paperclip-loader",
   "libs/workspace",
   "libs/infer",

TODO.md

@@ -1,40 +1,49 @@
 #### FOCUS
 
-- focus on editing
-
-  - ensure that paths are absolute
-  - can move components to to other files
-    - references are updated
-    - update refs OF expression moved
-
-- everything should be editable in the UI
-  - should be able to edit variant triggers
-  - should be able to add scripts
-  - prohibit things from being deleted if references to them
+- layers
+  - select slots
+  - ensure that all inserts are created
+  - proper UI for inserts
 
 #### Immediate
 
-- designer stops working after lint error
+- post edit clean up
+
+  - prune unused imports
+  - add inserts of elements
 
-- editing
+- layers panel
 
-  - circular dependencies
-  - ability to move tokens to other files
-  - ability to move mixins to other files
-  - ability to move components to other files
-  - ability to move triggers to other files
-  - ensure that
-    - all instances of each expression is updated
+  - ability to drop assets to the canvas
 
-- linting
+- canvas
+  - topbar should not move when panels hide / show
+- AI
 
-  - ensure that no magic colors are present
-  - ensure that no magic measurements are present
+  - CLI tool for interacting with code
+  - compare before committing
 
-- layers panel
+- Online editor
 
-  - ability to drop files into file navigator
+  - WASM bridge
 
 - file navigator
 
-- styles
+  - ability to drop files to file navigator
+  - display assets
+
+- resource panel
+
+  - display components
+  - display assets (svg, png)
+  - ability to drop assets to canvas
+
+- styles panel
+
+- properties panel
+
+  - text input should be text area
+
+- compiler
+  - compile style mixins as css selectors
+  - compile style vars

gpts/current/bridge.md

@@ -0,0 +1,8 @@
+/\*
+
+Instructions + behavior to bridge GPT with a library
+that can interact with it.
+
+\*/
+
+You will also be interacting with another system that can only take JSON. It will give you instructions, and you should only

gpts/current/examples.md

@@ -0,0 +1,74 @@
+I'm going to give you some example instructions and what you might produce as a result of these instructions
+
+User: "build a card component with a title slot. Give the card a grey background and some padding"
+
+System:
+
+```
+component Card {
+  render div {
+    style {
+        background: grey
+        padding: 14px
+    }
+
+    render h1 {
+      slot title
+    }
+
+    slot content
+  }
+}
+```
+
+User: "Create a card element with a class attribute called "card"
+
+System:
+
+```
+div (class: "card") {
+
+}
+```
+
+User: "Create a button component with an onClick handler"
+
+System:
+
+```
+component Button {
+    render button(onClick: onClick) {
+        slot children
+    }
+}
+```
+
+User: "Create a header with a text node 'hello world'!"
+
+System:
+
+```
+h1 {
+    text "Hello world"
+}
+```
+
+User: "Create a responsive card component"
+
+System:
+
+```
+component Card {
+    variant mobile trigger {
+        "@media screen and (max-width: 480px")"
+    }
+    render div {
+        style {
+            font-size: 14px
+        }
+        style variant mobile {
+            font-size: 24px
+        }
+    }
+}
+```