@backmatter/studio 0.0.15 → 0.0.17

package/src/pages/BlocksList.tsx

@@ -5,11 +5,12 @@ import { DragDropProvider } from "@dnd-kit/react";
 import { isSortable, useSortable } from "@dnd-kit/react/sortable";
 import { Menu } from "@base-ui/react/menu";
 import * as stylex from "@stylexjs/stylex";
-import type { BlockSnapshot } from "../api";
-import { resolveFieldInput, useBlockConfig, useStudioDefinition } from "../define-studio";
+import type { BlockSnapshot, SchemaField } from "../api";
+import { useBlockConfig } from "../define-studio";
+import { FieldControl } from "../fields/FieldControl";
+import { omitField } from "../fields/omit-field";
 import { Button } from "../ui/Button";
 import { Field } from "../ui/Field";
-import { Input } from "../ui/Input";
 import { Text } from "../ui/Text";
 import { cx, popup, popupClassName } from "../ui/popup";
 import { colors, radius, space } from "../styles/tokens.stylex";
@@ -37,10 +38,17 @@ function sortTransition() {
     : SORT_TRANSITION;
 }
 
-function fieldLabel(name: string) {
+function fieldLabel(name: string, field: SchemaField) {
+  if ("label" in field && typeof field.label === "string" && field.label) return field.label;
   return name.charAt(0).toUpperCase() + name.slice(1);
 }
 
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
+
 function GripIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden>
@@ -58,6 +66,9 @@ function BlockItem({
   block,
   index,
   catalog,
+  models,
+  objects,
+  documentLists,
   open,
   readOnly,
   onToggle,
@@ -67,6 +78,9 @@ function BlockItem({
   block: BlockInstance;
   index: number;
   catalog: BlockSnapshot[];
+  models: ModelRef[];
+  objects: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documentLists?: RelationDocumentLists;
   open: boolean;
   readOnly?: boolean;
   onToggle: () => void;
@@ -83,8 +97,7 @@ function BlockItem({
     transition: sortTransition(),
   });
   const def = catalog.find((b) => b.name === block.type);
-  const fields = Object.keys(def?.fields ?? {});
-  const studio = useStudioDefinition();
+  const fieldEntries = Object.entries(def?.fields ?? {});
   const config = useBlockConfig(block.type);
   const Preview = config?.preview;
 
@@ -140,41 +153,27 @@ function BlockItem({
               <Preview type={block.type} props={block.props} />
             </div>
           ) : null}
-          {fields.length === 0 ? (
+          {fieldEntries.length === 0 ? (
             <Text tone="muted" size="sm">
               {def
                 ? "This block has no fields."
                 : `Unknown block type "${block.type}".`}
             </Text>
           ) : (
-            fields.map((name) => {
-              const field = def?.fields[name];
-              const CustomInput = resolveFieldInput(studio, field);
-              return (
-                <Field key={name} label={fieldLabel(name)}>
-                  {CustomInput && field ? (
-                    <CustomInput
-                      name={name}
-                      field={field}
-                      value={block.props[name]}
-                      readOnly={readOnly}
-                      onChange={(next) => onUpdateProps({ ...block.props, [name]: next })}
-                    />
-                  ) : (
-                    <Input
-                      value={String(block.props[name] ?? "")}
-                      readOnly={readOnly}
-                      onChange={(e) =>
-                        onUpdateProps({
-                          ...block.props,
-                          [name]: e.target.value,
-                        })
-                      }
-                    />
-                  )}
-                </Field>
-              );
-            })
+            fieldEntries.map(([name, field]) => (
+              <Field key={name} label={fieldLabel(name, field)}>
+                <FieldControl
+                  name={name}
+                  field={field}
+                  value={block.props[name]}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
+                  readOnly={readOnly}
+                  onChange={(next) => onUpdateProps(omitField(block.props, name, next))}
+                />
+              </Field>
+            ))
           )}
         </div>
       ) : null}
@@ -185,12 +184,18 @@ function BlockItem({
 export function BlocksList({
   blocks,
   catalog,
+  models,
+  objects = [],
+  documentLists,
   readOnly,
   focusBlock,
   onChange,
 }: {
   blocks: BlockInstance[];
   catalog: BlockSnapshot[];
+  models: ModelRef[];
+  objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documentLists?: RelationDocumentLists;
   readOnly?: boolean;
   focusBlock?: { id: string; nonce: number } | null;
   onChange: (next: BlockInstance[]) => void;
@@ -241,6 +246,9 @@ export function BlocksList({
                 block={block}
                 index={index}
                 catalog={catalog}
+                models={models}
+                objects={objects}
+                documentLists={documentLists}
                 open={openId === block.id}
                 readOnly={readOnly}
                 onToggle={() => setOpenId(openId === block.id ? null : block.id)}

package/src/pages/BodyProse.tsx

@@ -2,7 +2,7 @@
 import { useId, useRef, useState, type KeyboardEvent } from "react";
 import { Menu } from "@base-ui/react/menu";
 import * as stylex from "@stylexjs/stylex";
-import type { BlockSnapshot } from "../api";
+import type { BlockSnapshot, SchemaField } from "../api";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
 import { Textarea } from "../ui/Input";
@@ -15,15 +15,27 @@ type BodyView = "rendered" | "source";
 
 const hover = "@media (hover: hover)";
 
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
+
 export function BodyField({
   value,
   catalog = [],
+  models,
+  objects = [],
+  documentLists,
   readOnly,
   onChange,
   onSelect,
 }: {
   value: string;
   catalog?: BlockSnapshot[];
+  models: ModelRef[];
+  objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documentLists?: RelationDocumentLists;
   readOnly?: boolean;
   onChange: (value: string) => void;
   onSelect: (selection: { start: number; end: number } | null) => void;
@@ -153,6 +165,9 @@ export function BodyField({
           ref={rendered}
           value={value}
           catalog={catalog}
+          models={models}
+          objects={objects}
+          documentLists={documentLists}
           readOnly={readOnly}
           labelledBy={labelId}
           onChange={onChange}

package/src/pages/CodeSessionFiles.tsx

@@ -0,0 +1,221 @@
+// packages/studio/src/pages/CodeSessionFiles.tsx
+import { useMemo } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { Text } from "../ui/Text";
+import { fileTree, type FileNode, type WorkspaceFile } from "./code-session-files";
+
+export type FilesView = {
+  /** Checkout paths, or null while they load. */
+  list: string[] | null;
+  error: string | null;
+  selected: string | null;
+  opened: WorkspaceFile | "loading" | null;
+  onSelect: (path: string) => void;
+};
+
+export function CodeSessionFiles({ list, error, selected, opened, onSelect }: FilesView) {
+  const tree = useMemo(() => fileTree(list ?? []), [list]);
+
+  return (
+    <div {...stylex.props(styles.shell)} aria-label="Session files">
+      <nav {...stylex.props(styles.tree)} aria-label="Checkout">
+        {error ? (
+          <p {...stylex.props(styles.note, styles.error)}>{error}</p>
+        ) : list === null ? (
+          <p {...stylex.props(styles.note)}>Reading the checkout…</p>
+        ) : list.length === 0 ? (
+          <p {...stylex.props(styles.note)}>The checkout is empty.</p>
+        ) : (
+          <TreeLevel nodes={tree} depth={0} selected={selected} onSelect={onSelect} />
+        )}
+      </nav>
+      <section {...stylex.props(styles.viewer)} aria-label="File">
+        {selected ? (
+          <>
+            <header {...stylex.props(styles.viewerHeader)}>
+              <span {...stylex.props(styles.path)}>{selected}</span>
+            </header>
+            <FileBody opened={opened} />
+          </>
+        ) : (
+          <div {...stylex.props(styles.empty)}>
+            <Text size="sm" tone="muted">
+              Pick a file to read it as the host has it now.
+            </Text>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function TreeLevel({
+  nodes,
+  depth,
+  selected,
+  onSelect,
+}: {
+  nodes: FileNode[];
+  depth: number;
+  selected: string | null;
+  onSelect: (path: string) => void;
+}) {
+  const indent = { paddingLeft: `${8 + depth * 12}px` };
+  return (
+    <ul {...stylex.props(styles.level)}>
+      {nodes.map((node) =>
+        node.kind === "dir" ? (
+          <li key={node.path}>
+            <details open={selected?.startsWith(`${node.path}/`) ?? false}>
+              <summary {...stylex.props(styles.row, styles.dir)} style={indent}>
+                {node.name}
+              </summary>
+              <TreeLevel
+                nodes={node.children}
+                depth={depth + 1}
+                selected={selected}
+                onSelect={onSelect}
+              />
+            </details>
+          </li>
+        ) : (
+          <li key={node.path}>
+            <button
+              type="button"
+              aria-current={selected === node.path ? "true" : undefined}
+              onClick={() => onSelect(node.path)}
+              {...stylex.props(styles.row, styles.file, selected === node.path && styles.fileActive)}
+              style={indent}
+            >
+              {node.name}
+            </button>
+          </li>
+        ),
+      )}
+    </ul>
+  );
+}
+
+function FileBody({ opened }: { opened: WorkspaceFile | "loading" | null }) {
+  if (opened === "loading" || opened === null) {
+    return <p {...stylex.props(styles.note)}>{opened === "loading" ? "Opening…" : ""}</p>;
+  }
+  if ("binary" in opened) {
+    return <p {...stylex.props(styles.note)}>Binary file, {formatSize(opened.size)}.</p>;
+  }
+  if ("tooLarge" in opened) {
+    return <p {...stylex.props(styles.note)}>Too large to show here ({formatSize(opened.size)}).</p>;
+  }
+  return <pre {...stylex.props(styles.code)}>{opened.content}</pre>;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  shell: {
+    display: "flex",
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+  },
+  tree: {
+    width: "260px",
+    flexShrink: 0,
+    overflow: "auto",
+    paddingBlock: space.sm,
+    borderRightWidth: 1,
+    borderRightStyle: "solid",
+    borderRightColor: colors.border,
+    backgroundColor: colors.bgSurface,
+  },
+  level: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+  },
+  row: {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    paddingBlock: "3px",
+    paddingRight: space.sm,
+    font: "inherit",
+    fontSize: type.xs,
+    lineHeight: 1.5,
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    cursor: "pointer",
+    borderWidth: 0,
+    color: colors.text,
+    backgroundColor: {
+      default: "transparent",
+      [hover]: { default: null, ":hover": colors.bgHover },
+    },
+  },
+  dir: {
+    fontWeight: 500,
+  },
+  file: {
+    color: colors.textMuted,
+  },
+  fileActive: {
+    color: colors.text,
+    backgroundColor: colors.bgActive,
+  },
+  viewer: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    minWidth: 0,
+    minHeight: 0,
+    backgroundColor: colors.bgApp,
+  },
+  viewerHeader: {
+    paddingBlock: space.sm,
+    paddingInline: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+  },
+  path: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  code: {
+    flex: 1,
+    margin: 0,
+    overflow: "auto",
+    padding: space.lg,
+    fontFamily: type.mono,
+    fontSize: "12px",
+    lineHeight: 1.6,
+    tabSize: 2,
+    color: colors.text,
+  },
+  empty: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  note: {
+    margin: 0,
+    paddingBlock: space.sm,
+    paddingInline: space.lg,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  error: {
+    color: colors.danger,
+  },
+});