Basic GUI design

src/SUMMARY.md

@@ -8,7 +8,7 @@
         - [Actor System]()
         - [Security Features](development/design/security.md)
         - [Microkernel](development/design/kernel.md)
-        - [GUI]()
+        - [GUI](development/design/gui.md)
         - [Filesystem](development/design/filesystem.md)
     - [Configuring a Build Environment](development/environment.md)
     - [Development Workflow](development/workflow.md)

src/development/design/gui.md

@@ -1 +1,38 @@
 # GUI
+Eventually, programs will be able to use the `photon` library to have access to a graphics API.
+This will initialize various [actors](/development/design/actor.md) to represent parts of the UI.
+
+## Drawing
+When a **GUI** element wants to update, it first sends a [message](/development/design/actor.md#messages) to the `kernel`.
+The `kernel` then calculates the overlaying of each window, writes each window to it's own buffer, then updates the screen buffer with ones that have changed, which is then drawn to the screen.
+This ensures that only necessary parts are re-rendered, and the rendering can be done asynchronously/threaded.
+
+The `photon` library will not only provide a high-level API for applications to use, but also lower-level drawing methods for the `kernel` to use.
+These may include line, rectangle, triangle, and circle drawing methods, as well as being able to render text.
+
+### Flow
+```mermaid
+flowchart LR
+    app(Application) --> kern(Kernel)
+    kern --> buf([Buffer])
+    kern --> app
+    buf --> dis((Display))
+```
+
+## Styling
+Styling of GUI elements is done via a global configuration.
+The `kernel` parses this information, and uses it to actually style the widgets provided to it.
+
+Widgets created by the program/library contain no styling data - only information such as text, size, callbacks, etc.
+The `kernel` does all the display work.
+
+## Design
+```mermaid
+erDiagram
+    WINDOW ||--|{ SECTION: holds
+    WINDOW ||--|| TITLE: has
+    SECTION ||--|| TITLE: has
+    SECTION ||--o{ SECTION: holds 
+    SECTION ||--o{ CANVAS: holds
+    SECTION ||--o{ TEXTBOX: holds
+```