@backmatter/studio 0.0.16 → 0.0.18

package/src/fields/LinkFieldInput.tsx

@@ -0,0 +1,315 @@
+// packages/studio/src/fields/LinkFieldInput.tsx
+import { useRef, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import {
+  documentLabel,
+  internalSuffixError,
+  joinInternalLink,
+  linkSide,
+  matchesWhere,
+  routeFor,
+  splitInternalLink,
+} from "@backmatter/core";
+import type { SchemaField } from "../api";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Input, Select } from "../ui/Input";
+
+type ModelRef = {
+  type: string;
+  external?: boolean;
+  route?: string | false;
+  indexSlug?: string;
+  fields?: Record<string, SchemaField>;
+};
+type RelationDocument = { slug: string; frontmatter: Record<string, unknown> };
+type RelationDocumentLists = Record<string, RelationDocument[]>;
+
+function routableTypes(field: SchemaField, models: ModelRef[]): ModelRef[] {
+  if (field.models && field.models.length > 0) {
+    return field.models
+      .map((type) => models.find((model) => model.type === type))
+      .filter((model): model is ModelRef => Boolean(model && !model.external && model.route !== false));
+  }
+  return models.filter((model) => !model.external && model.route !== false);
+}
+
+function suffixPresent(value: string): { query: boolean; anchor: boolean } {
+  const hashIndex = value.indexOf("#");
+  const preHash = hashIndex === -1 ? value : value.slice(0, hashIndex);
+  return { query: preHash.includes("?"), anchor: hashIndex !== -1 };
+}
+
+function internalSuffixState(value: string): {
+  parts: ReturnType<typeof splitInternalLink>;
+  showSuffix: boolean;
+  selectValue: string;
+} {
+  const parts = splitInternalLink(value);
+  const side = linkSide(value);
+  if (side !== "internal") {
+    return { parts, showSuffix: false, selectValue: value };
+  }
+  const present = suffixPresent(value);
+  const suffixErr = internalSuffixError(
+    { query: parts.query, anchor: parts.anchor },
+    present,
+  );
+  if (suffixErr !== null) {
+    return { parts, showSuffix: false, selectValue: value };
+  }
+  return { parts, showSuffix: true, selectValue: parts.path };
+}
+
+function buildRouteOptions(
+  field: SchemaField,
+  models: ModelRef[],
+  documentLists: RelationDocumentLists | undefined,
+): Array<{ value: string; label: string }> {
+  if (!documentLists) return [];
+  const options: Array<{ value: string; label: string }> = [];
+  for (const model of routableTypes(field, models)) {
+    const docs = documentLists[model.type] ?? [];
+    for (const doc of docs) {
+      if (!matchesWhere({ slug: doc.slug, frontmatter: doc.frontmatter }, field.where)) {
+        continue;
+      }
+      const route = routeFor(model, doc.slug);
+      if (route === "") continue;
+      const label = documentLabel(doc.frontmatter, model);
+      options.push({
+        value: route,
+        label: label ? `${label} ${route}` : route,
+      });
+    }
+  }
+  options.sort((a, b) => a.label.localeCompare(b.label));
+  return options;
+}
+
+function SideToggle({
+  internalPressed,
+  readOnly,
+  onPick,
+}: {
+  internalPressed: boolean;
+  readOnly?: boolean;
+  onPick: (side: "internal" | "external") => void;
+}) {
+  return (
+    <div {...stylex.props(styles.sideRow)}>
+      <button
+        type="button"
+        aria-pressed={internalPressed}
+        disabled={readOnly}
+        {...stylex.props(styles.sideButton, internalPressed && styles.sideButtonPressed)}
+        onClick={() => {
+          if (readOnly || internalPressed) return;
+          onPick("internal");
+        }}
+      >
+        Internal
+      </button>
+      <button
+        type="button"
+        aria-pressed={!internalPressed}
+        disabled={readOnly}
+        {...stylex.props(styles.sideButton, !internalPressed && styles.sideButtonPressed)}
+        onClick={() => {
+          if (readOnly || !internalPressed) return;
+          onPick("external");
+        }}
+      >
+        External
+      </button>
+    </div>
+  );
+}
+
+export function LinkFieldInput({
+  name,
+  field,
+  value,
+  models,
+  documentLists,
+  readOnly,
+  onChange,
+}: {
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  models: ModelRef[];
+  documentLists?: RelationDocumentLists;
+  readOnly?: boolean;
+  onChange: (value: unknown) => void;
+}) {
+  const raw = value == null || value === "" ? "" : String(value);
+  const sideToggle = field.to === undefined;
+  const lastEmittedRawRef = useRef<string | null>(null);
+  const emitChange = (next: unknown) => {
+    lastEmittedRawRef.current = next == null || next === "" ? "" : String(next);
+    onChange(next);
+  };
+  const [editorSide, setEditorSide] = useState<"internal" | "external">(() =>
+    linkSide(raw) === "external" ? "external" : "internal",
+  );
+  const [pendingClearOf, setPendingClearOf] = useState<string | null>(null);
+  const [lastSyncedRaw, setLastSyncedRaw] = useState(raw);
+  if (raw !== lastSyncedRaw) {
+    setLastSyncedRaw(raw);
+    if (raw !== lastEmittedRawRef.current) {
+      lastEmittedRawRef.current = null;
+      if (raw !== "") {
+        setEditorSide(linkSide(raw) === "external" ? "external" : "internal");
+      }
+    }
+    if (pendingClearOf !== null && raw !== pendingClearOf) {
+      setPendingClearOf(null);
+    }
+  }
+
+  if (field.to === "external") {
+    return (
+      <Input
+        value={raw}
+        readOnly={readOnly}
+        onChange={(event) => {
+          if (readOnly) return;
+          const next = event.target.value;
+          emitChange(next === "" ? undefined : next);
+        }}
+      />
+    );
+  }
+
+  const forceInternal = field.to === "internal";
+  const internalUi = forceInternal || editorSide !== "external";
+  const staleInternalOnExternalSide =
+    editorSide === "external" && raw !== "" && raw === pendingClearOf;
+  const externalInputValue = staleInternalOnExternalSide ? "" : raw;
+
+  if (!internalUi) {
+    return (
+      <div {...stylex.props(styles.stack)}>
+        {sideToggle ? (
+          <SideToggle
+            internalPressed={false}
+            readOnly={readOnly}
+            onPick={(picked) => {
+              if (readOnly) return;
+              setEditorSide(picked);
+              if (raw !== "") {
+                setPendingClearOf(raw);
+                emitChange(undefined);
+              }
+            }}
+          />
+        ) : null}
+        <Input
+          value={externalInputValue}
+          readOnly={readOnly}
+          onChange={(event) => {
+            if (readOnly) return;
+            const next = event.target.value;
+            emitChange(next === "" ? undefined : next);
+          }}
+        />
+      </div>
+    );
+  }
+
+  const { parts, showSuffix, selectValue } = raw === "" ? {
+    parts: { path: "", query: "", anchor: "" },
+    showSuffix: false,
+    selectValue: "",
+  } : internalSuffixState(raw);
+
+  const options = buildRouteOptions(field, models, documentLists);
+  if (selectValue && !options.some((option) => option.value === selectValue)) {
+    options.unshift({ value: selectValue, label: selectValue });
+  }
+
+  const internalPressed = editorSide !== "external";
+
+  return (
+    <div {...stylex.props(styles.stack)}>
+      {sideToggle ? (
+        <SideToggle
+          internalPressed={internalPressed}
+          readOnly={readOnly}
+          onPick={(picked) => {
+            if (readOnly) return;
+            setEditorSide(picked);
+            if (raw !== "") {
+              setPendingClearOf(raw);
+              emitChange(undefined);
+            }
+          }}
+        />
+      ) : null}
+      <Select
+        name={name}
+        chip
+        searchable
+        clearable={!field.required}
+        placeholder="Select a value"
+        options={options}
+        value={selectValue || null}
+        disabled={readOnly}
+        onValueChange={(next) => {
+          if (readOnly) return;
+          if (next == null) {
+            emitChange(undefined);
+            return;
+          }
+          emitChange(joinInternalLink(next, showSuffix ? parts.query : "", showSuffix ? parts.anchor : ""));
+        }}
+      />
+      <Input
+        aria-label="Query"
+        value={showSuffix ? parts.query : ""}
+        readOnly={readOnly || !showSuffix}
+        onChange={(event) => {
+          if (readOnly || !showSuffix) return;
+          emitChange(joinInternalLink(parts.path, event.target.value, parts.anchor));
+        }}
+      />
+      <Input
+        aria-label="Anchor"
+        value={showSuffix ? parts.anchor : ""}
+        readOnly={readOnly || !showSuffix}
+        onChange={(event) => {
+          if (readOnly || !showSuffix) return;
+          emitChange(joinInternalLink(parts.path, parts.query, event.target.value));
+        }}
+      />
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  stack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  sideRow: {
+    display: "flex",
+    gap: space.xs,
+  },
+  sideButton: {
+    paddingInline: space.md,
+    paddingBlock: space.xs,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgInput,
+    color: colors.text,
+    fontSize: type.sm,
+    cursor: "pointer",
+  },
+  sideButtonPressed: {
+    borderColor: colors.text,
+    fontWeight: 600,
+  },
+});

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

@@ -0,0 +1,69 @@
+// 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"
+  | "link"
+  | "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 === "link") {
+    return "link";
+  }
+
+  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/link-targets.ts

@@ -0,0 +1,60 @@
+// packages/studio/src/fields/link-targets.ts
+import type { SchemaField } from "../api";
+import { resolveObjectFields } from "./resolve-object-fields";
+
+type ModelRef = { type: string; external?: boolean; route?: string | false };
+type ObjectDef = { name: string; fields: Record<string, SchemaField> };
+
+function modelTypeLoadable(type: string, models: ModelRef[]): boolean {
+  const model = models.find((item) => item.type === type);
+  return Boolean(model && !model.external && model.route !== false);
+}
+
+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 === "link") {
+      if (field.to === "external") {
+        // external-only links do not load documents
+      } else if (field.models && field.models.length > 0) {
+        for (const type of field.models) {
+          if (modelTypeLoadable(type, models)) {
+            targets.add(type);
+          }
+        }
+      } else {
+        for (const model of models) {
+          if (!model.external && model.route !== false) {
+            targets.add(model.type);
+          }
+        }
+      }
+    }
+
+    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 linkDocumentTypes(
+  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/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/host-path.ts

@@ -0,0 +1,13 @@
+// packages/studio/src/host-path.ts
+
+/** A typed or pasted address, as a path on the host. */
+export function hostPath(input: string): string {
+  const trimmed = input.trim();
+  if (!trimmed) return "/";
+  try {
+    const url = new URL(trimmed);
+    return `${url.pathname}${url.search}${url.hash}` || "/";
+  } catch {
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  }
+}