Workspace Docs

docs/get-started/quickstart.md

@@ -0,0 +1,87 @@
+
+# Quickstart
+
+## Start With a Prompt (4 mins)
+
+Dreamflow's AI-powered app generation allows you to create complete, functional applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
+
+Ready to create your app? Simply:
+
+1. Open Dreamflow and click the textbox that says "Start with a prompt..."
+2. Enter your app description and wait for the Agent to generate your complete app.
+3. Review and customize the generated project in the [workspace](#)
+
+
+The Agent will create all the necessary screens, components, and functionality based on your description, giving you a fully functional app that you can further customize and deploy.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/5Lbea4PqYYhwyNItSuND?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+Here are some prompts that we've used recently while chatting with the agent.
+
+**A habit tracker**
+
+**Prompt**
+
+    Build the main screen for a habit tracking app. Prepopulate with common habits, and then show the tasks for today on this main screen. Make the app look modern and whimsical.
+
+
+**Duration / Cost**: 161 seconds / 2.51 credits
+
+**Next steps**
+    - Let the user enter their own habits
+    - Give the user reminders for their habits, even when the app is not running.
+    - Allow the user to share their habit progress with others (through the share sheet of the mobile OS)
+
+
+**Asteroids game**
+
+**Prompt**
+
+Replace the main screen with an implementation of the classic game of Asteroids. Make this look and work the same as the original arcade game. Make sure that it has keyboard controls, mouse controls, and touch controls. Store the high-score locally.
+
+**Duration / Cost** : 183 seconds / 2.30 credits
+
+**Next steps**
+    - Give the game a start screen (with instructions)
+    - Give the game an end screen (with a leaderboard)
+    - Store a leaderboard of highscores on a server
+
+
+
+**Chat app**
+
+**Prompt**
+
+Build a small chat app (store the data locally for now) where users can chat with their friends. Make the app look modern and familiar, but also give it some unique twists.
+
+**Duration / Cost** : 313 seconds /  4.42 credits
+
+**Next steps**
+    - Make the chats clustered when folks are close to each other
+    - Store the chat data in a cloud database
+    - Show a notification when a message arrives when the app is not active

docs/get-started/welcome.md

@@ -0,0 +1,40 @@
+
+
+# Welcome
+
+Dreamflow is ... 
+
+
+## Create Account
+
+
+create an account...
+
+
+## Build First Project 
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/5Lbea4PqYYhwyNItSuND?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>

docs/workspace/agent-panel.md

@@ -0,0 +1,8 @@
+---
+slug: /workspace/agent-panel
+title: Agent Panel 
+# description: 
+# tags: 
+sidebar_position: 5
+# keywords: 
+---

docs/workspace/content-panel.md

@@ -0,0 +1,8 @@
+---
+slug: /workspace/content-panel
+title: Content Panel 
+# description: 
+# tags: 
+sidebar_position: 3
+# keywords: 
+---

docs/workspace/keyboard-shortcuts.md

@@ -0,0 +1,8 @@
+---
+slug: /workspace/keyboard-shortcuts
+title: Keyboard Shortcuts 
+# description: 
+# tags: 
+sidebar_position: 6
+# keywords: 
+---

docs/workspace/modules-panel/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Modules Panel",
+    "position": 1
+  }

docs/workspace/modules-panel/theme.md

@@ -0,0 +1,10 @@
+---
+slug: /workspace/theme
+title: Theme 
+# description: 
+# tags: 
+sidebar_position: 2
+# keywords: 
+---
+
+# Theme

docs/workspace/modules-panel/widget-panel.md

@@ -0,0 +1,10 @@
+---
+slug: /workspace/widget-panel
+title: Widget Panel 
+# description: 
+# tags: 
+sidebar_position: 1
+# keywords: 
+---
+
+# Widget Tree

docs/workspace/properties-panel.md

@@ -0,0 +1,54 @@
+---
+slug: /workspace/properties-panel
+title: Properties Panel 
+# description: 
+# tags: 
+sidebar_position: 4
+# keywords: 
+---
+
+# Properties Panel 
+
+Properties Panel is..
+
+
+
+## Modifiers
+
+
+Modifiers refer to wrapper widgets that can be added around existing Flutter widgets to modify their behavior, appearance, or layout. Think of them as "decorators" or "containers" that wrap around your base widgets. They are Flutter widgets that wrap around other widgets to modify their:
+- **Layout behavior** (positioning, sizing, constraints)
+- **Visual appearance** (colors, borders, shadows, opacity)
+- **Interactive behavior** (gestures, focus, accessibility)
+- **Animation properties** (transitions, transformations)
+
+
+### Common Modifier Types
+
+**Layout Modifiers**
+- **Spacing**: Add padding, margins, or gaps
+- **Positioning**: Control alignment, expansion, or positioning
+- **Constraints**: Modify size constraints and boundaries
+- **Flexibility**: Control how widgets grow and shrink
+
+**Visual Modifiers**
+- **Styling**: Apply colors, borders, and backgrounds
+- **Effects**: Add shadows, opacity, or transformations
+- **Clipping**: Control how content is displayed
+- **Decoration**: Apply complex visual treatments
+
+**Behavioral Modifiers**
+- **Interaction**: Add gesture detection and touch handling
+- **Focus**: Manage keyboard navigation and focus states
+- **Accessibility**: Improve screen reader support
+- **Semantics**: Add meaning for assistive technologies
+
+**Animation Modifiers**
+- **Transitions**: Smooth changes between states
+- **Transformations**: Rotate, scale, or translate widgets
+- **Timing**: Control animation duration and curves
+- **State Changes**: Animate opacity, size, or position
+
+### Adding a Modifier
+
+

docs/workspace/workspace.md

@@ -0,0 +1,10 @@
+---
+slug: /workspace
+title: Workspace 
+# description: 
+# tags: 
+sidebar_position: 0
+# keywords: 
+---
+
+# Workspace

sidebars.ts

@@ -3,8 +3,35 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 
 const sidebars: SidebarsConfig = {
     docsSidebar: [
-        { type: 'autogenerated', dirName: '.' }
+        {
+            type: 'doc',
+            id: 'index',
+            label: 'Index',
+        },
+        {
+            type: 'category',
+            label: 'Getting Started',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'get-started'
+                }
+            ],
+        },
+        {
+            type: 'category',
+            label: 'Workspace',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'workspace'
+                }
+            ],
+        }
     ]
+
 };
 
 export default sidebars;

src/css/custom.css

@@ -40,9 +40,12 @@
 
 /* Direct body text styling that will override Docusaurus */
 body {
-  color: #d7d7d7 !important; 
+  color: var(--ifm-text-secondary-color) !important;
+  font-size: 14px !important; /* Set body text size */
 }
 
+
+
 /* Light mode body text */
 [data-theme='light'] body {
   color: #333333 !important; /* Dark text for light mode */
@@ -103,11 +106,21 @@ html[data-theme='dark'] {
 }
 
 h1 {
-  font-size: 2.5rem !important; /* Adjust this value as needed */
+  font-size: 2.2rem !important; /* Adjust this value as needed */
   font-weight: 700;
   line-height: 1.2;
 }
 
+h2 {
+  font-size: 1.8rem !important; /* Adjust this value as needed */
+}
+
+h3 {
+  font-size: 1.4rem !important; /* Adjust this value as needed */
+}
+
+
+
 [data-theme='dark'] {
   --primary-text: var(--white);
   --ifm-color-primary: #7e71f4; /* Primary brand color */