@backmatter/studio 0.0.16 → 0.0.17

package/src/fields/choose-field-input.ts

@@ -0,0 +1,64 @@
+// packages/studio/src/fields/choose-field-input.ts
+import type { SchemaField } from "../api";
+import { resolveFieldInput, type StudioDefinition } from "../define-studio";
+
+export type FieldInputKind =
+  | "custom"
+  | "select"
+  | "color"
+  | "slider"
+  | "relation"
+  | "object"
+  | "array"
+  | "media"
+  | "boolean"
+  | "number"
+  | "blocks"
+  | "text";
+
+export function chooseFieldInput(
+  definition: StudioDefinition,
+  field: SchemaField,
+  models: Array<{ type: string; external?: boolean }>,
+): FieldInputKind {
+  if (resolveFieldInput(definition, field)) {
+    return "custom";
+  }
+
+  if (field.kind === "text") {
+    if (field.options && field.options.length > 0) {
+      return "select";
+    }
+    if (field.input === "color") {
+      return "color";
+    }
+  }
+
+  if (field.kind === "number") {
+    if (typeof field.min === "number" && typeof field.max === "number") {
+      return "slider";
+    }
+  }
+
+  if (field.kind === "relation") {
+    const target = models.find((m) => m.type === field.relationTo);
+    if (target && !target.external) {
+      return "relation";
+    }
+    return "text";
+  }
+
+  if (field.kind === "object") {
+    return "object";
+  }
+  if (field.kind === "array") {
+    return "array";
+  }
+
+  if (field.kind === "media") return "media";
+  if (field.kind === "boolean") return "boolean";
+  if (field.kind === "number") return "number";
+  if (field.kind === "blocks") return "blocks";
+
+  return "text";
+}

package/src/fields/load-relation-documents.ts

@@ -0,0 +1,35 @@
+// packages/studio/src/fields/load-relation-documents.ts
+type DocListRow = { type: string; slug: string; status: string };
+type DocEntry = { slug: string; frontmatter: Record<string, unknown> };
+
+export async function loadRelationDocuments(
+  types: string[],
+  list: () => Promise<DocListRow[]>,
+  read: (type: string, slug: string) => Promise<{ frontmatter: Record<string, unknown> }>,
+): Promise<Record<string, DocEntry[]>> {
+  const wanted = new Set(types);
+  const grouped: Record<string, DocEntry[]> = Object.fromEntries(types.map((type) => [type, []]));
+  let rows: DocListRow[];
+  try {
+    rows = await list();
+  } catch {
+    return grouped;
+  }
+
+  const selected = rows.filter((row) => wanted.has(row.type) && row.status !== "deleted");
+  const loaded = await Promise.all(
+    selected.map(async (row) => {
+      try {
+        const { frontmatter } = await read(row.type, row.slug);
+        return { type: row.type, entry: { slug: row.slug, frontmatter } satisfies DocEntry };
+      } catch {
+        return null;
+      }
+    }),
+  );
+  for (const item of loaded) {
+    if (!item) continue;
+    grouped[item.type]!.push(item.entry);
+  }
+  return grouped;
+}

package/src/fields/omit-field.ts

@@ -0,0 +1,12 @@
+// packages/studio/src/fields/omit-field.ts
+export function omitField(
+  record: Record<string, unknown>,
+  name: string,
+  next: unknown,
+): Record<string, unknown> {
+  if (next === undefined) {
+    const { [name]: _removed, ...rest } = record;
+    return rest;
+  }
+  return { ...record, [name]: next };
+}

package/src/fields/relation-targets.ts

@@ -0,0 +1,44 @@
+// packages/studio/src/fields/relation-targets.ts
+import type { SchemaField } from "../api";
+import { resolveObjectFields } from "./resolve-object-fields";
+
+type ModelRef = { type: string; external?: boolean };
+type ObjectDef = { name: string; fields: Record<string, SchemaField> };
+
+function collectFromFields(
+  fields: Record<string, SchemaField>,
+  models: ModelRef[],
+  objects: ObjectDef[],
+  visiting: Set<string>,
+  targets: Set<string>,
+): void {
+  for (const field of Object.values(fields)) {
+    if (field.kind === "relation" && field.relationTo) {
+      const target = models.find((model) => model.type === field.relationTo);
+      if (target && !target.external) {
+        targets.add(field.relationTo);
+      }
+    }
+
+    const nested = resolveObjectFields(field, objects);
+    if (!nested) continue;
+
+    let nextVisiting = visiting;
+    if (field.object && (field.kind === "object" || field.kind === "array")) {
+      if (visiting.has(field.object)) continue;
+      nextVisiting = new Set(visiting).add(field.object);
+    }
+
+    collectFromFields(nested, models, objects, nextVisiting, targets);
+  }
+}
+
+export function relationTargets(
+  fields: Record<string, SchemaField>,
+  models: ModelRef[],
+  objects: ObjectDef[],
+): string[] {
+  const targets = new Set<string>();
+  collectFromFields(fields, models, objects, new Set<string>(), targets);
+  return [...targets].sort();
+}

package/src/fields/resolve-object-fields.ts

@@ -0,0 +1,21 @@
+// packages/studio/src/fields/resolve-object-fields.ts
+import type { SchemaField } from "../api";
+
+export function resolveObjectFields(
+  field: SchemaField,
+  objects: Array<{ name: string; fields: Record<string, SchemaField> }>,
+): Record<string, SchemaField> | null {
+  if (field.fields) {
+    return field.fields;
+  }
+  if (field.object) {
+    const entry = objects.find((object) => object.name === field.object);
+    return entry?.fields ?? null;
+  }
+  return null;
+}
+
+export function nestedStartsCollapsed(ancestorObjectNames: string[], objectName: string | undefined): boolean {
+  if (!objectName) return false;
+  return ancestorObjectNames.includes(objectName);
+}

package/src/pages/BlockSettingsDialog.tsx

@@ -3,30 +3,32 @@ import { useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import * as stylex from "@stylexjs/stylex";
 import type { SchemaField } from "../api";
-import { useFieldInput } from "../define-studio";
+import { FieldControl } from "../fields/FieldControl";
+import { omitField } from "../fields/omit-field";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
 import { Field } from "../ui/Field";
-import { Input, Textarea } from "../ui/Input";
 import { cx, isTransitioning } from "../ui/popup";
-import { MediaFieldInput } from "./MediaFieldInput";
+
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
 
 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);
 }
 
-function compositeText(value: unknown): string {
-  if (value == null || value === "") return "";
-  if (typeof value === "string") return value;
-  return JSON.stringify(value, null, 2);
-}
-
 export function BlockSettingsDialog({
   name,
   title,
   fields,
   value,
+  models,
+  objects = [],
+  documentLists,
   readOnly,
   onOpenChange,
   onSave,
@@ -36,32 +38,19 @@ export function BlockSettingsDialog({
   title?: string;
   fields: Record<string, SchemaField>;
   value: Record<string, unknown>;
+  models: ModelRef[];
+  objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documentLists?: RelationDocumentLists;
   readOnly?: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (props: Record<string, unknown>) => void;
   onRemove: () => void;
 }) {
   const [draft, setDraft] = useState(value);
-  const [error, setError] = useState<string | null>(null);
   const names = Object.keys(fields);
 
   function save() {
-    const next = { ...draft };
-    for (const [fieldName, field] of Object.entries(fields)) {
-      if (field.kind !== "object" && field.kind !== "array") continue;
-      const raw = next[fieldName];
-      if (typeof raw !== "string" || raw.trim() === "") {
-        next[fieldName] = raw === "" ? "" : raw;
-        continue;
-      }
-      try {
-        next[fieldName] = JSON.parse(raw);
-      } catch {
-        setError(`${fieldLabel(fieldName, field)} needs valid JSON.`);
-        return;
-      }
-    }
-    onSave(next);
+    onSave(draft);
   }
 
   return (
@@ -100,17 +89,18 @@ export function BlockSettingsDialog({
                       name={fieldName}
                       field={field}
                       value={draft[fieldName]}
+                      models={models}
+                      objects={objects}
+                      documentLists={documentLists}
                       readOnly={readOnly}
                       onChange={(next) => {
-                        setError(null);
-                        setDraft((current) => ({ ...current, [fieldName]: next }));
+                        setDraft((current) => omitField(current, fieldName, next));
                       }}
                     />
                   </Field>
                 );
               })
             )}
-            {error ? <p {...stylex.props(styles.error)}>{error}</p> : null}
             <div {...stylex.props(styles.actions)}>
               {readOnly ? null : (
                 <Button variant="danger" onClick={onRemove}>
@@ -137,82 +127,6 @@ export function BlockSettingsDialog({
   );
 }
 
-function FieldControl({
-  name,
-  field,
-  value,
-  readOnly,
-  onChange,
-}: {
-  name: string;
-  field: SchemaField;
-  value: unknown;
-  readOnly?: boolean;
-  onChange: (value: unknown) => void;
-}) {
-  const CustomInput = useFieldInput(field);
-  if (CustomInput) {
-    return (
-      <CustomInput name={name} field={field} value={value} readOnly={readOnly} onChange={onChange} />
-    );
-  }
-  if (field.kind === "media") {
-    return <MediaFieldInput name={name} value={value} readOnly={readOnly} onChange={onChange} />;
-  }
-  if (field.kind === "boolean") {
-    return (
-      <input
-        type="checkbox"
-        checked={value === true}
-        disabled={readOnly}
-        onChange={(event) => onChange(event.target.checked)}
-        {...stylex.props(styles.check)}
-      />
-    );
-  }
-  if (field.kind === "number") {
-    return (
-      <Input
-        type="number"
-        value={value == null || value === "" ? "" : String(value)}
-        readOnly={readOnly}
-        onChange={(event) => {
-          const raw = event.target.value;
-          onChange(raw === "" ? "" : Number(raw));
-        }}
-      />
-    );
-  }
-  if ("multiline" in field && field.multiline) {
-    return (
-      <Textarea
-        rows={4}
-        value={value == null ? "" : String(value)}
-        readOnly={readOnly}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    );
-  }
-  if (field.kind === "object" || field.kind === "array") {
-    return (
-      <Textarea
-        rows={4}
-        value={compositeText(value)}
-        readOnly={readOnly}
-        spellCheck={false}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    );
-  }
-  return (
-    <Input
-      value={value == null ? "" : String(value)}
-      readOnly={readOnly}
-      onChange={(event) => onChange(event.target.value)}
-    />
-  );
-}
-
 const styles = stylex.create({
   backdrop: {
     position: "fixed",
@@ -282,16 +196,6 @@ const styles = stylex.create({
     color: colors.textMuted,
     fontSize: type.sm,
   },
-  error: {
-    margin: 0,
-    color: colors.danger,
-    fontSize: type.sm,
-  },
-  check: {
-    width: 16,
-    height: 16,
-    margin: 0,
-  },
   actions: {
     display: "flex",
     alignItems: "center",

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}