React App Shell: port os-chrome

typescript/packages/common-charm/src/index.ts

@@ -1 +1,11 @@
-export { runPersistent, type Charm, addCharms, removeCharm, storage, syncCharm, charms } from "./charm.js";
+export {
+  runPersistent,
+  type Charm,
+  addCharms,
+  removeCharm,
+  storage,
+  syncCharm,
+  charms,
+} from "./charm.js";
+export { syncRecipe, saveRecipe } from "./syncRecipe.js";
+export { buildRecipe, tsToExports } from "./localBuild.js";

typescript/packages/common-charm/src/syncRecipe.ts

@@ -0,0 +1,83 @@
+import {
+  addRecipe,
+  getRecipe,
+  getRecipeParents,
+  getRecipeSrc,
+  getRecipeSpec,
+  getRecipeName,
+} from "@commontools/runner";
+import { buildRecipe } from "./localBuild.js";
+
+export const BLOBBY_SERVER_URL =
+  typeof window !== "undefined"
+    ? window.location.protocol + "//" + window.location.host + "/api/storage/blobby"
+    : "//api/storage/blobby";
+
+const recipesKnownToStorage = new Set<string>();
+
+export async function syncRecipe(id: string) {
+  if (getRecipe(id)) {
+    if (recipesKnownToStorage.has(id)) return;
+    const src = getRecipeSrc(id);
+    const spec = getRecipeSpec(id);
+    const parents = getRecipeParents(id);
+    if (src) saveRecipe(id, src, spec, parents);
+    return;
+  }
+
+  const response = await fetch(`${BLOBBY_SERVER_URL}/spell-${id}`);
+  let src: string;
+  let spec: string;
+  let parents: string[];
+  try {
+    const resp = await response.json();
+    src = resp.src;
+    spec = resp.spec;
+    parents = resp.parents || [];
+  } catch (e) {
+    src = await response.text();
+    spec = "";
+    parents = [];
+  }
+
+  const { recipe, errors } = await buildRecipe(src);
+  if (errors) throw new Error(errors);
+
+  const recipeId = addRecipe(recipe!, src, spec, parents);
+  if (id !== recipeId) {
+    throw new Error(`Recipe ID mismatch: ${id} !== ${recipeId}`);
+  }
+  recipesKnownToStorage.add(recipeId);
+}
+
+export async function saveRecipe(
+  id: string,
+  src: string,
+  spec?: string,
+  parents?: string[],
+  spellbookTitle?: string,
+  spellbookTags?: string[],
+) {
+  // If the recipe is already known to storage, we don't need to save it again,
+  // unless the user is trying to attach a spellbook title or tags.
+  if (recipesKnownToStorage.has(id) && !spellbookTitle) return;
+  recipesKnownToStorage.add(id);
+
+  console.log("Saving recipe", id);
+  const response = await fetch(`${BLOBBY_SERVER_URL}/spell-${id}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      src,
+      recipe: JSON.parse(JSON.stringify(getRecipe(id))),
+      spec,
+      parents,
+      recipeName: getRecipeName(id),
+      spellbookTitle,
+      spellbookTags,
+    }),
+  });
+  return response.ok;
+}

typescript/packages/common-os-ui/src/components/os-tab-bar.ts

@@ -115,7 +115,7 @@ export class OsTabBar extends LitElement {
     return html`
       <div class="tab-container">
         <div class="reserved-space"></div>
-        ${this.items.map(
+        ${this.items?.map(
           (item) => html`
             <div class="tab-item">
               <button

typescript/packages/jumble/package.json

@@ -25,6 +25,7 @@
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/view": "^6.36.2",
     "@commontools/ui": "workspace:*",
+    "@commontools/os-ui": "workspace:*",
     "@commontools/builder": "workspace:*",
     "@commontools/runner": "workspace:*",
     "@commontools/html": "workspace:*",

typescript/packages/jumble/src/components/CharmRunner.tsx

@@ -121,10 +121,10 @@ export function CharmRunner({
   }, [argument, charmImport]);
 
   return (
-    <div className={className}>
+    <>
       {isLoading && <div>Loading...</div>}
       {error && <div>Error loading charm</div>}
-      <div ref={containerRef}></div>
-    </div>
+      <div className={className} ref={containerRef}></div>
+    </>
   );
 }

typescript/packages/jumble/src/components/Sidebar.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { WebComponent } from "./WebComponent";
+import { getRecipe } from "@commontools/runner";
+import { useCell } from "@/hooks/use-charm";
+import { sidebar } from "@/views/state";
+
+interface SidebarProps {
+  homeRef: any;
+  linkedCharms: any[];
+  workingSpec: string;
+  focusedCharm: any;
+  handlePublish: () => void;
+  recipeId: string;
+}
+
+const Sidebar: React.FC<
+  SidebarProps & {
+    query: any;
+    onQueryChanged: (value: string) => void;
+    schema: any;
+    copyRecipeLink: () => void;
+    argument: any;
+    data: any;
+    onDataChanged: (value: string) => void;
+    onSpecChanged: (value: string) => void;
+  }
+> = ({
+  homeRef,
+  linkedCharms,
+  workingSpec,
+  focusedCharm,
+  handlePublish,
+  recipeId,
+  query,
+  onQueryChanged,
+  schema,
+  copyRecipeLink,
+  argument,
+  data,
+  onDataChanged,
+  onSpecChanged,
+}) => {
+  const [sidebarTab, setSidebarTab] = useCell(sidebar);
+
+  const handleSidebarTabChange = (newTab: string) => {
+    setSidebarTab(newTab);
+  };
+
+  const tabs = [
+    { id: "home", icon: "home", label: "Home" },
+    { id: "prompt", icon: "message", label: "Prompt" },
+    { id: "links", icon: "sync_alt", label: "Links" },
+    { id: "query", icon: "query_stats", label: "Query" },
+    { id: "data", icon: "database", label: "Data" },
+    { id: "schema", icon: "schema", label: "Schema" },
+    { id: "source", icon: "code", label: "Source" },
+    { id: "recipe-json", icon: "data_object", label: "JSON" },
+  ];
+
+  const panels = {
+    home: (
+      <div>
+        <div>Pinned</div>
+        <div ref={homeRef}></div>
+      </div>
+    ),
+    links: (
+      <div>
+        <div>Linked Charms</div>
+        <div>
+          {linkedCharms.map((charm) => (
+            <common-charm-link charm={charm} />
+          ))}
+        </div>
+      </div>
+    ),
+    query: (
+      <div>
+        <div>Query</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(query, null, 2)}
+            onDocChange={onQueryChanged}
+          />
+        </div>
+      </div>
+    ),
+    schema: (
+      <div>
+        <div>Schema</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(schema, null, 2)}
+          />
+        </div>
+      </div>
+    ),
+    source: (
+      <div>
+        <div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              border: "1px solid pink",
+              padding: "10px",
+            }}
+          >
+            <a
+              href={`/recipe/spell-${recipeId}`}
+              target="_blank"
+              onClick={copyRecipeLink}
+              style={{ float: "right" }}
+              className="close-button"
+            >
+              🔗 Share
+            </a>
+            <button onClick={handlePublish} className="close-button">
+              🪄 Publish to Spellbook Jr
+            </button>
+          </div>
+        </div>
+        <div style={{ margin: "10px" }}></div>
+        <div>
+          <common-spell-editor recipeId={recipeId} data={argument} />
+        </div>
+      </div>
+    ),
+    "recipe-json": (
+      <div>
+        <div>Recipe JSON</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(getRecipe(recipeId), null, 2)}
+          />
+        </div>
+      </div>
+    ),
+    data: (
+      <div>
+        <div>
+          Data
+          <span
+            id="log-button"
+            onClick={() => console.log(JSON.stringify(focusedCharm?.getAsQueryResult()))}
+            className="close-button"
+          >
+            log
+          </span>
+        </div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(data, null, 2)}
+            onDocChange={onDataChanged}
+          />
+        </div>
+      </div>
+    ),
+    prompt: (
+      <div>
+        <div>
+          Spec
+          <a
+            href={`/recipe/${recipeId}`}
+            target="_blank"
+            onClick={copyRecipeLink}
+            style={{ float: "right" }}
+            className="close-button"
+          >
+            🔗 Share
+          </a>
+        </div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="text/markdown"
+            source={workingSpec}
+            onDocChange={onSpecChanged}
+          />
+        </div>
+      </div>
+    ),
+  };
+
+  return (
+    <div>
+      <os-sidebar-close-button></os-sidebar-close-button>
+      {panels[sidebarTab as keyof typeof panels]}
+      <WebComponent
+        as="os-tab-bar"
+        items={tabs}
+        selected={sidebarTab}
+        onTabChange={(e: CustomEvent) => handleSidebarTabChange(e.detail.selected)}
+      />
+    </div>
+  );
+};
+
+export default Sidebar;

typescript/packages/jumble/src/components/WebComponent.tsx

@@ -0,0 +1,13 @@
+import { useWebComponent } from "@/hooks/use-web-component";
+import React from "react";
+
+export function WebComponent<P extends Record<string, any>>({
+  as: Element,
+  children,
+  ...props
+}: { as: string; children?: React.ReactNode } & P) {
+  const ref = React.useRef<HTMLElement>(null);
+  useWebComponent(ref, props);
+
+  return React.createElement(Element, { ref, ...props }, children);
+}

typescript/packages/jumble/src/hooks/use-charm.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { DocImpl, effect } from "@commontools/runner";
+
+export function useCell<T>(cell: DocImpl<T>): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(cell.get());
+
+  useEffect(() => {
+    // Set up effect to update state when cell changes
+    const cleanup = effect(cell, (newValue) => {
+      setValue(newValue);
+    });
+
+    // Clean up effect when component unmounts or cell changes
+    return cleanup;
+  }, [cell]);
+
+  // Return tuple of current value and setter function
+  return [
+    value,
+    (newValue: T) => {
+      cell.asCell().set(newValue);
+    },
+  ];
+}