version: 0.1.0

docs/docs/apps.md

@@ -42,7 +42,7 @@ To add your custom application to the operating system and make it launchable, s
 ```tsx title="App.tsx"
 import { SomeApp } from "./SomeApp";
 
-const applications = setupApps(
+const applications = setupApps([
   {
     appId: "some-app",
     appName: "Some App",
@@ -52,8 +52,8 @@ const applications = setupApps(
   {
     appId: "some-other-app",
     /* ... */
-  }
-);
+  },
+]);
 
 const useAppLauncher = createUseAppLauncher(applications);
 
@@ -137,7 +137,7 @@ Gives you direct access to the internal zustand window store, allowing you to in
 You may overwrite existing applications by giving your own applications matching appIds.
 
 ```tsx
-const applications = setupApps(
+const applications = setupApps([
   {
     appId: "code",
     component: CustomCodeComponent,
@@ -147,6 +147,6 @@ const applications = setupApps(
     appId: "explorer",
     component: CustomExplorerComponent,
     defaultWindowSettings: {},
-  }
-);
+  },
+]);
 ```

docs/docs/community.md

@@ -1,9 +1,19 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Community
 
 If you have make and publish applications for use with Radix OS, make sure to reach out through Github so that we can feature your applications here.
 
 To submit your own application, click the edit link below.
+
+# Contributing
+
+Contributions are always welcome, whether it's documentation, feature requests or code.
+
+To contribute to code, you should first [submit an issue](https://github.com/imp-dance/radix-os/issues/new) (and then optionally create a pull request).
+
+## Workflow for local development
+
+After pulling the repository, run `pnpm install` and `pnpm dev` in the root directory. The dev server will import the code directly from the `packages/radix-os` folder so you can edit the package files and have hot reloading for the demo app.

docs/docs/components.md

@@ -0,0 +1,52 @@
+---
+sidebar_position: 5
+---
+
+# Components
+
+Radix OS exports some helper components for use in the operating system.
+
+## `SaveAsDialog`
+
+A dialog that lets a user choose a path and filename.
+
+```typescript
+type SaveAsDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onPathCreate: (path: string) => Promise<void>;
+};
+```
+
+![Preview](./save-as-dialog.jpg)
+
+## `OpenFileDialog`
+
+A dialog that lets a user open a file
+
+```typescript
+type SaveAsDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onFileOpened: (file: FsFile, path: string) => void;
+  /** Determine if given file should be disabled */
+  fileDisabled?: (file: FsFile) => boolean;
+};
+```
+
+![Preview](./open-file-dialog.jpg)
+
+## `Explorer`
+
+The raw underlying version of the Explorer application, without the application window. Used internally in `OpenFileDialog` and `SaveAsDialog`.
+
+```tsx
+type ExplorerProps = {
+  initialPath?: string;
+  windowId?: symbol;
+  onPathChange?: (path: string) => void;
+  disableFiles?: boolean;
+  fileDisabled?: (file: FsFile) => boolean;
+  onRequestOpenFile?: (file: FsFile, path: string) => void;
+};
+```

docs/docs/customization.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Customization

docs/docs/desktop.md

@@ -12,16 +12,23 @@ You can also launch applications by using the command palette, opened with the k
 
 ## Application shortcuts
 
-You can add apps to the desktop by configuring them to be added in `setupApps`:
+You can add apps to the desktop by configuring them to be added in `setupApps`. You can also configure which of the default apps appear in the desktop by passing a second argument.
 
 ```tsx
-const applications = setupApps({
-  appId: "some-app",
-  appName: "Some App",
-  component: SomeApp,
-  addToDesktop: true,
-  defaultWindowSettings: {},
-});
+const applications = setupApps(
+  [
+    {
+      appId: "some-app",
+      appName: "Some App",
+      component: SomeApp,
+      addToDesktop: true,
+      defaultWindowSettings: {},
+    },
+  ],
+  {
+    defaultAppsOnDesktop: ["explorer", "code"],
+  }
+);
 ```
 
 ## Custom shortcuts
@@ -30,11 +37,12 @@ You can also create desktop items that execute any code you want. You add these
 
 ```tsx
 const applications = setupApps();
+
 const desktopItems = setupDesktopItems({
-  icon: <ReaderIcon />,
-  label: "News",
+  icon: <QuestionMarkCircledIcon />,
+  label: "Boop",
   onClick: () => {
-    /* ... */
+    alert("boop");
   },
 });
 

docs/docs/faq.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # FAQ

docs/docs/fs.md

@@ -7,15 +7,19 @@ sidebar_position: 2
 Radix OS comes with a preconfigured client-side file system that can be imported and passed directly:
 
 ```tsx
-import { fsZustandIntegration, RadixOS } from "radix-os";
+import { createZustandFsIntegration, RadixOS } from "radix-os";
+
+const fs = createZustandFsIntegration();
 
 createRoot(...).render(
     <StrictMode>
-        <RadixOS fs={fsZustandIntegration} />
+        <RadixOS fs={fs} />
     </StrictMode>
 );
 ```
 
+You can optionally pass an object with `initialTree`, or `onAction` (to listen to actions) to `createZustandFsIntegration`.
+
 ## Create custom integration
 
 You can also create your own custom file system integration.

packages/radix-os/README.md

@@ -26,13 +26,14 @@ npm i radix-os
 
 ```tsx title="lib/radix-os.ts"
 import {
-  fsZustandIntegration,
   setupApps,
-  createUseAppLauncher
+  createUseAppLauncher,
+  createZustandFsIntegration
 } from "radix-os;
 
-export const applications = setupApps();
 export const useAppLauncher = createUseAppLauncher(applications);
+export const applications = setupApps();
+export const fs = createZustandFsIntegration();
 ```
 
 ```tsx title="App.tsx"
@@ -41,9 +42,9 @@ import {
   RadixOS,
   fsZustandIntegration
 } from "radix-os;
-import { applications } from "./lib/radix-os";
+import { applications, fs } from "./lib/radix-os";
 
 export default function App(){
-  return <RadixOS fs={fsZustandIntegration} applications={applications} />
+  return <RadixOS fs={fs} applications={applications} />
 }
 ```

packages/radix-os/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radix-os",
-  "version": "0.0.22",
+  "version": "0.1.0",
   "description": "A simulated operating system built with React and Radix UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

packages/radix-os/src/components/AppLauncher/AppLauncher.tsx

@@ -64,7 +64,6 @@ export function AppLauncher(props: {
           ref={ref}
           value={value}
           onChange={(e) => setValue(e.target.value)}
-          color="indigo"
           onKeyDown={(e) => {
             if (e.key === "Escape") {
               close();
@@ -94,9 +93,10 @@ export function AppLauncher(props: {
         />
         {matchingApps.map((app, i) => (
           <Button
-            color={i === selectedIndex ? "indigo" : "gray"}
+            color={i === selectedIndex ? undefined : "gray"}
             variant="soft"
             style={{ textAlign: "left" }}
+            onFocus={close}
             onClick={() => {
               launch(app.appId);
               close();

packages/radix-os/src/components/Desktop/Desktop.tsx

@@ -269,6 +269,8 @@ function Application(props: {
     top: draggable.isDragging
       ? mousePosition?.y ?? props.position.y
       : props.position.y,
+    transform: draggable.isDragging ? `scale(0.9)` : undefined,
+    transition: "transform 0.15s ease-out",
   } as CSSProperties;
 
   useEffect(() => {

packages/radix-os/src/components/MultiTaskBar/MultiTaskBar.tsx

@@ -56,7 +56,7 @@ export function MultiTaskBar() {
                         <Button
                           color={
                             activeWindow?.id === win.id
-                              ? "indigo"
+                              ? undefined
                               : "gray"
                           }
                           variant={

packages/radix-os/src/components/OpenFileDialog/OpenFileDialog.tsx

@@ -0,0 +1,78 @@
+import { Button, Card, Dialog, Flex } from "@radix-ui/themes";
+import { useState } from "react";
+import { useFileSystemQuery } from "../../api/fs/fs-api";
+import { findNodeByPath } from "../../services/fs/tree-helpers";
+import { FsFile } from "../../stores/fs";
+import { Explorer } from "../apps/Explorer/Explorer";
+
+export function OpenFileDialog(props: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onFileOpened: (file: FsFile, path: string) => void;
+  fileDisabled?: (file: FsFile) => boolean;
+}) {
+  const [selectedFile, setSelectedFile] = useState<null | {
+    file: FsFile;
+    path: string;
+  }>(null);
+  const fsQuery = useFileSystemQuery("");
+  const root = fsQuery?.data ?? null;
+  const [path, setPath] = useState("");
+
+  const node = root ? findNodeByPath(path, root) : null;
+
+  const isValid = selectedFile !== null;
+  return (
+    <Dialog.Root open={props.open} onOpenChange={props.setOpen}>
+      <Dialog.Content size="2">
+        <Dialog.Title size="3">Open file</Dialog.Title>
+        <Dialog.Description color="gray" size="1">
+          Select file to open
+        </Dialog.Description>
+        <Card
+          style={{
+            background: "var(--gray-1)",
+            minHeight: 250,
+            display: "grid",
+            gridTemplateRows: "1fr min-content",
+            gridTemplateColumns: "1fr",
+            border: "1px solid var(--gray-3)",
+          }}
+          size="1"
+          my="3"
+        >
+          <Explorer
+            initialPath={path}
+            onPathChange={setPath}
+            fileDisabled={props.fileDisabled}
+            onRequestOpenFile={(file, path) => {
+              setSelectedFile({ file, path });
+            }}
+          />
+        </Card>
+        <Flex gap="3" mt="4" justify="end">
+          <Dialog.Close>
+            <Button variant="soft" color="gray">
+              Cancel
+            </Button>
+          </Dialog.Close>
+          <Dialog.Close>
+            <Button
+              variant="solid"
+              color="green"
+              onClick={() => {
+                if (selectedFile) {
+                  const { file, path } = selectedFile;
+                  props.onFileOpened(file, path);
+                }
+              }}
+              disabled={!isValid}
+            >
+              Open file
+            </Button>
+          </Dialog.Close>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}