@backmatter/studio 0.0.16 → 0.0.18

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}