@jxsuite/studio 6.1.0 → 6.1.2

package/src/format/format-host.ts

@@ -9,8 +9,15 @@
 
 import { setProjectSchemasForMonaco } from "../services/monaco-lazy";
 import { getPlatform } from "../platform";
-import type { ExtensionCatalogEntry, ExtensionsInfo } from "../types";
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type {
+  ExtensionCatalogEntry,
+  ExtensionsInfo,
+  FormatActionRequest,
+  ProjectSchemasResponse,
+  StudioPlatform,
+} from "../types";
+import { isString } from "@jxsuite/schema/guards";
+import type { JxDocumentValue, JxMutableNode } from "@jxsuite/schema/types";
 
 export interface StudioFormatHints {
   icon?: string;
@@ -25,6 +32,10 @@ export interface StudioFormatHints {
     inline?: string[];
     void?: string[];
     textOnly?: string[];
+    /**
+     * Per-parent child rules. The registry arrives over the wire unvalidated, so a rule may be a
+     * JSON `null`, which every reader treats as a tag the format leaves undeclared.
+     */
     nesting?: Record<
       string,
       {
@@ -32,10 +43,9 @@ export interface StudioFormatHints {
         inline?: boolean;
         directive?: boolean;
         only?: string[];
-      }
+      } | null
     >;
   };
-  [key: string]: unknown;
 }
 
 export interface StudioFormat {
@@ -57,10 +67,11 @@ export function loadFormats(): Promise<StudioFormat[]> {
   if (!_loaded) {
     _loaded = (async () => {
       try {
-        const platform = getPlatform() as {
-          listFormats?: () => Promise<StudioFormat[]>;
-        };
-        _formats = (await platform.listFormats?.()) ?? [];
+        const platform = getPlatform();
+        /* SAFETY: every backend's formats route serializes its format registry as the records this
+           Module declares (`StudioFormat`); the PAL types the payload `unknown[]` only because this
+           Module, not `types.ts`, owns that shape. */
+        _formats = ((await platform.listFormats?.()) as StudioFormat[] | undefined) ?? [];
       } catch {
         _formats = [];
       }
@@ -100,9 +111,7 @@ export function loadExtensions(): Promise<ExtensionsInfo[]> {
   if (!_extensionsLoaded) {
     _extensionsLoaded = (async () => {
       try {
-        const platform = getPlatform() as {
-          listExtensions?: () => Promise<ExtensionsInfo[]>;
-        };
+        const platform = getPlatform();
         _extensions = (await platform.listExtensions?.()) ?? [];
       } catch {
         _extensions = [];
@@ -144,9 +153,7 @@ export function loadExtensionCatalog(): Promise<ExtensionCatalogEntry[]> {
   if (!_catalogLoaded) {
     _catalogLoaded = (async () => {
       try {
-        const platform = getPlatform() as {
-          listExtensionCatalog?: () => Promise<ExtensionCatalogEntry[]>;
-        };
+        const platform = getPlatform();
         _catalog = (await platform.listExtensionCatalog?.()) ?? [];
       } catch {
         _catalog = [];
@@ -180,10 +187,10 @@ export function setExtensionCatalog(catalog: ExtensionCatalogEntry[]) {
  * @param {object} platform - The studio platform (only `fetchProjectSchemas` is consulted)
  * @returns {Promise<void>} Resolves once both consumers have been updated
  */
-async function shareProjectSchemas(platform: {
-  fetchProjectSchemas?: () => Promise<{ project?: unknown; document?: unknown }>;
-}): Promise<void> {
-  let schemas: { project?: unknown; document?: unknown } | null = null;
+async function shareProjectSchemas(
+  platform: Pick<StudioPlatform, "fetchProjectSchemas">,
+): Promise<void> {
+  let schemas: ProjectSchemasResponse | null = null;
   try {
     schemas = (await platform.fetchProjectSchemas?.()) ?? null;
   } catch {
@@ -208,9 +215,7 @@ async function shareProjectSchemas(platform: {
  *
  * @param {object} platform - The studio platform (only `fetchProjectSchemas` is consulted here)
  */
-export function refreshExtensionUi(platform: {
-  fetchProjectSchemas?: () => Promise<{ project?: unknown; document?: unknown }>;
-}): void {
+export function refreshExtensionUi(platform: Pick<StudioPlatform, "fetchProjectSchemas">): void {
   void shareProjectSchemas(platform);
   // `installed` and `bundled` are per-project facts, so an install or a project switch can move
   // Them even when the shipped half has not changed.
@@ -284,10 +289,20 @@ export function defaultContentFormat(): StudioFormat | undefined {
   return _formats.find((f) => f.capabilities.serialize && f.documentKinds.includes("content"));
 }
 
-async function formatAction(payload: Record<string, unknown>): Promise<unknown> {
-  const platform = getPlatform() as {
-    formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
-  };
+/** The options a format capability is invoked with. */
+export interface FormatActionOptions {
+  /** `"roundtrip"` asks the format to preserve what it can of the source's own spelling. */
+  mode?: string;
+  /** Whether the serializer writes a frontmatter block. */
+  frontmatter?: boolean;
+}
+
+/**
+ * Send one request to the format route (POST /__studio/format, or the desktop RPC of the same
+ * name). A serialize request carries the caller's document through unchanged.
+ */
+async function formatAction(payload: FormatActionRequest): Promise<JxMutableNode | string> {
+  const platform = getPlatform();
   if (!platform.formatAction) {
     throw new Error("Platform does not support format actions");
   }
@@ -298,8 +313,11 @@ async function formatAction(payload: Record<string, unknown>): Promise<unknown>
 export async function formatParse(
   name: string,
   source: string,
-  options?: Record<string, unknown>,
+  options?: FormatActionOptions,
 ): Promise<JxMutableNode> {
+  /* SAFETY: a format class's `parse` capability returns the Jx document it built from the source —
+     The contract every format class implements (specs/extensions.md) — and nothing here inspects
+     It before `splitFormatDocument` reads its keys. */
   return (await formatAction({
     action: "parse",
     format: name,
@@ -308,12 +326,19 @@ export async function formatParse(
   })) as JxMutableNode;
 }
 
-/** Serialize a Jx document to source text via the named format's serialize capability. */
+/**
+ * Serialize a Jx document to source text via the named format's serialize capability.
+ *
+ * `doc` is relayed to the format class verbatim: the document merged with its frontmatter, whose
+ * open keys are whatever the format's own parser produced.
+ */
 export async function formatSerialize(
   name: string,
-  doc: Record<string, unknown>,
-  options?: Record<string, unknown>,
+  doc: JxMutableNode,
+  options?: FormatActionOptions,
 ): Promise<string> {
+  /* SAFETY: a format class's `serialize` capability returns the source text it wrote — the contract
+     Every format class implements (specs/extensions.md) — so the answer is a string. */
   return (await formatAction({
     action: "serialize",
     doc,
@@ -322,42 +347,47 @@ export async function formatSerialize(
   })) as string;
 }
 
+/** A document's frontmatter: the open keys of a Jx node, as a format's parser left them. */
+export type FormatFrontmatter = Record<string, JxDocumentValue | undefined>;
+
+/** What {@link splitFormatDocument} makes of a parsed format document. */
+export interface SplitFormatDocument {
+  document: JxMutableNode;
+  frontmatter: FormatFrontmatter;
+  mode: "component" | "content";
+}
+
 /**
  * Split a parsed format document into { document, frontmatter, mode } per the format's
  * `$studio.documentMode` hints. Component documents (e.g. a frontmatter `tagName` with a hyphen)
  * keep their full shape; content documents separate frontmatter metadata from the body children.
  */
-export function splitFormatDocument(format: StudioFormat | undefined, doc: JxMutableNode) {
+export function splitFormatDocument(
+  format: StudioFormat | undefined,
+  doc: JxMutableNode,
+): SplitFormatDocument {
   const hints = format?.studio?.documentMode;
   const componentWhen = hints?.componentWhen;
   if (componentWhen?.frontmatterKey) {
     const value = doc[componentWhen.frontmatterKey];
     const pattern = componentWhen.matches ? new RegExp(componentWhen.matches) : /./;
-    if (typeof value === "string" && pattern.test(value)) {
-      return {
-        document: doc,
-        frontmatter: {} as Record<string, unknown>,
-        mode: "component",
-      };
+    if (isString(value) && pattern.test(value)) {
+      return { document: doc, frontmatter: {}, mode: "component" };
     }
   }
   if (hints?.default === "component") {
-    return {
-      document: doc,
-      frontmatter: {} as Record<string, unknown>,
-      mode: "component",
-    };
+    return { document: doc, frontmatter: {}, mode: "component" };
   }
 
   // Content document — children form the root-level body; other keys are frontmatter
-  const children = (doc.children as unknown[]) ?? [];
-  if (children.length === 0) {
+  const children = doc.children ?? [];
+  if (Array.isArray(children) && children.length === 0) {
     children.push({ children: [], tagName: "p" });
   }
 
   const documentKeys = new Set(["state", "imports"]);
-  const contentDoc: Record<string, unknown> = { children };
-  const frontmatter: Record<string, unknown> = {};
+  const contentDoc: JxMutableNode = { children };
+  const frontmatter: FormatFrontmatter = {};
   for (const [key, value] of Object.entries(doc)) {
     if (key === "children") {
       continue;
@@ -369,9 +399,5 @@ export function splitFormatDocument(format: StudioFormat | undefined, doc: JxMut
     }
   }
 
-  return {
-    document: contentDoc as JxMutableNode,
-    frontmatter,
-    mode: "content",
-  };
+  return { document: contentDoc, frontmatter, mode: "content" };
 }

package/src/github/github-auth-status.ts

@@ -18,6 +18,14 @@
 
 const STORAGE_KEY = "jx_github_token";
 
+/**
+ * The GitHub OAuth app every Jx sign-in authorizes against: the browser's device flow in
+ * `github-auth.ts`, and the desktop launcher's RFC 8252 loopback redirect
+ * (`packages/desktop/src/github-signin.ts`). Here, in the module with no UI dependency, because the
+ * launcher's main process imports it too.
+ */
+export const GITHUB_OAUTH_CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
+
 /**
  * The desktop launcher's RFC 8252 sign-in, when this build is running inside one.
  *
@@ -30,13 +38,29 @@ export interface NativeGithubAuth {
   status: () => Promise<{ stored: boolean }>;
 }
 
-export function nativeAuth(): NativeGithubAuth | null {
+/**
+ * Whether the registered platform object carries a launcher's `githubAuth` member.
+ *
+ * Presence is the whole test, as it always was: the member is written only by a launcher's adapter
+ * (`packages/desktop/src/platform.ts`), which installs a {@link NativeGithubAuth}, and a browser
+ * build has no member at all.
+ */
+function carriesNativeAuth(platform: unknown): platform is { githubAuth: NativeGithubAuth } {
   return (
-    (globalThis as unknown as { __jxPlatform?: { githubAuth?: NativeGithubAuth } }).__jxPlatform
-      ?.githubAuth ?? null
+    typeof platform === "object" &&
+    platform !== null &&
+    "githubAuth" in platform &&
+    platform.githubAuth != null
   );
 }
 
+export function nativeAuth(): NativeGithubAuth | null {
+  // `globalThis` as a plain object: its declared type knows nothing of the launcher's slot.
+  const host: object = globalThis;
+  const platform = "__jxPlatform" in host ? host.__jxPlatform : undefined;
+  return carriesNativeAuth(platform) ? platform.githubAuth : null;
+}
+
 /**
  * The token the desktop store handed us this session.
  *

package/src/github/github-auth.ts

@@ -59,8 +59,14 @@ import { errorMessage } from "@jxsuite/schema/parse";
 import { notify } from "../services/notify";
 import { layerHost } from "../ui/layers";
 import { openGithubAuthSurface } from "../surfaces/github-auth";
-import type { GithubAuthSurfaceHandle } from "../surfaces/github-auth";
-import { getGithubToken, nativeAuth, setNativeToken, STORAGE_KEY } from "./github-auth-status";
+import {
+  getGithubToken,
+  GITHUB_OAUTH_CLIENT_ID,
+  nativeAuth,
+  setNativeToken,
+  STORAGE_KEY,
+} from "./github-auth-status";
+import type { DialogLayerHandle } from "../ui/surface";
 
 // Every other caller in Studio still reaches these through this module.
 export {
@@ -71,8 +77,6 @@ export {
   hydrateGithubToken,
 } from "./github-auth-status";
 
-const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
-
 /** One key for the whole sign-in, so a second attempt REPLACES the first report. */
 const NOTIFY_KEY = "github.auth";
 
@@ -108,10 +112,10 @@ interface TokenResponse {
 }
 
 /** The request never completed — a Problem, with the one sentence that covers both causes. */
-function reportUnreachable(error: unknown): void {
+function reportUnreachable(cause: unknown): void {
   notify.error("Could not reach GitHub to sign in.", {
     action: RETRY,
-    detail: `${UNREACHABLE_DETAIL}\n\n${errorMessage(error)}`,
+    detail: `${UNREACHABLE_DETAIL}\n\n${errorMessage(cause)}`,
     key: NOTIFY_KEY,
     source: SOURCE,
   });
@@ -132,7 +136,7 @@ async function requestDeviceCode(): Promise<DeviceCodeResponse | null> {
   let codeRes: Response;
   try {
     codeRes = await fetch("https://github.com/login/device/code", {
-      body: JSON.stringify({ client_id: CLIENT_ID, scope: "repo" }),
+      body: JSON.stringify({ client_id: GITHUB_OAUTH_CLIENT_ID, scope: "repo" }),
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -151,6 +155,9 @@ async function requestDeviceCode(): Promise<DeviceCodeResponse | null> {
     );
     return null;
   }
+  /* SAFETY: a 2xx from GitHub's device-code endpoint (checked just above) is the JSON object
+     RFC 8628 §3.2 defines — `device_code`, `user_code`, `verification_uri` and an optional
+     `interval` — which is exactly what `DeviceCodeResponse` declares. */
   return (await codeRes.json()) as DeviceCodeResponse;
 }
 
@@ -247,7 +254,7 @@ export async function authenticateGithub() {
       try {
         const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
           body: JSON.stringify({
-            client_id: CLIENT_ID,
+            client_id: GITHUB_OAUTH_CLIENT_ID,
             device_code,
             grant_type: "urn:ietf:params:oauth:grant-type:device_code",
           }),
@@ -257,6 +264,9 @@ export async function authenticateGithub() {
           },
           method: "POST",
         });
+        /* SAFETY: GitHub's token endpoint answers every poll with a JSON object carrying either an
+           `access_token` (RFC 6749 §5.1) or an `error` code (RFC 8628 §3.5); `TokenResponse` makes
+           Both optional, and every branch below reads them as possibly absent. */
         const tokenData = (await tokenRes.json()) as TokenResponse;
         failures = 0;
 
@@ -303,7 +313,7 @@ export async function authenticateGithub() {
      * the surface existed would find a binding that is not initialised yet — which a zero-second
      * device interval makes reachable rather than theoretical.
      */
-    const handle: GithubAuthSurfaceHandle = openGithubAuthSurface({
+    const handle: DialogLayerHandle = openGithubAuthSurface({
       layer: layerHost("dialog"),
       onCancel: () => {
         takeDown();

package/src/github/github-publish.ts

@@ -31,7 +31,8 @@ import { authenticateGithub } from "./github-auth";
 import { beginActivity } from "../panels/activity-panel";
 import { getPlatform } from "../platform";
 import { notify } from "../services/notify";
-import type { GithubPublishSurfaceHandle, RepoOptions } from "../surfaces/github-publish";
+import type { RepoOptions } from "../surfaces/github-publish";
+import type { DialogLayerHandle } from "../ui/surface";
 
 interface GithubErrorResponse {
   errors?: { message?: string }[];
@@ -77,7 +78,7 @@ function askForRepoOptions(projectName: string): Promise<RepoOptions | null> {
       answered = true;
       resolve(value);
     };
-    const handle: GithubPublishSurfaceHandle = openGithubPublishSurface({
+    const handle: DialogLayerHandle = openGithubPublishSurface({
       layer: layerHost("dialog"),
       name: projectName,
       onCancel: () => {
@@ -125,25 +126,24 @@ export async function createGithubRepository({ projectName }: { projectName: str
   });
 
   activity.step(REPO_STEPS[0]);
-  const createRes = await fetch("https://api.github.com/user/repos", {
-    body: JSON.stringify({
-      auto_init: false,
-      description: repoOpts.description,
-      name: repoOpts.name,
-      private: repoOpts.isPrivate,
-    }),
-    headers: {
-      Accept: "application/vnd.github+json",
-      Authorization: `Bearer ${token}`,
-      "Content-Type": "application/json",
-    },
-    method: "POST",
-  }).catch((error: unknown) => {
+  let createRes: Response;
+  try {
+    createRes = await fetch("https://api.github.com/user/repos", {
+      body: JSON.stringify({
+        auto_init: false,
+        description: repoOpts.description,
+        name: repoOpts.name,
+        private: repoOpts.isPrivate,
+      }),
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+  } catch (error) {
     activity.log(errorMessage(error));
-    return null;
-  });
-
-  if (!createRes) {
     activity.fail("Could not reach GitHub to create the repository.", {
       action: "git.createGithubRepository",
     });
@@ -151,6 +151,8 @@ export async function createGithubRepository({ projectName }: { projectName: str
   }
 
   if (!createRes.ok) {
+    /* SAFETY: GitHub's REST API answers a failed request with a JSON body carrying `message` and,
+       For a validation failure, an `errors` array; both are optional here and read with fallbacks. */
     const err = (await createRes.json()) as GithubErrorResponse;
     activity.log(err.errors?.[0]?.message || err.message || `GitHub answered ${createRes.status}.`);
     activity.fail("Could not create the GitHub repository.", {
@@ -159,6 +161,8 @@ export async function createGithubRepository({ projectName }: { projectName: str
     return false;
   }
 
+  /* SAFETY: `createRes.ok` was checked above, and a successful `POST /user/repos` answers with the
+     Full repository object, of which `clone_url` and `html_url` are required members. */
   const repo = (await createRes.json()) as GithubRepoResponse;
   activity.log(`Created ${repo.html_url}`);
   const platform = getPlatform();

package/src/grid/cell-editors.ts

@@ -58,15 +58,18 @@ import { live } from "lit-html/directives/live.js";
 import { cellToText, coerceCellInput } from "./schema-columns";
 import type { GridCellValue, GridColumn } from "./grid-source";
 
-/** The subset of Tabulator's CellComponent the editors/formatters touch. */
+/**
+ * The subset of Tabulator's CellComponent the editors/formatters touch. A cell's value is a
+ * {@link GridCellValue}: the grid's row data is the grid source's rows, which hold nothing else.
+ */
 export interface CellLike {
-  getValue: () => unknown;
+  getValue: () => GridCellValue;
 }
 
 export type CellEditorFn = (
   cell: CellLike,
   onRendered: (fn: () => void) => void,
-  success: (value: unknown) => void,
+  success: (value: GridCellValue) => void,
   cancel: () => void,
 ) => HTMLElement;
 
@@ -75,6 +78,17 @@ export type CellFormatterFn = (cell: CellLike) => HTMLElement;
 /** Detached-host factory — grid-view owns the one sanctioned document.createElement. */
 export type HostFactory = (className: string) => HTMLElement;
 
+/**
+ * The `<input>` a listener in this file is bound on.
+ *
+ * Every input listener here sits on the `<input>` its own template renders, and an input has no
+ * children, so a keydown, change or blur it hears was dispatched at the input itself.
+ */
+function inputOf(e: Event): HTMLInputElement {
+  // SAFETY: the listener is bound on an `<input>` (above), and a void element is its events' target.
+  return e.target as HTMLInputElement;
+}
+
 /** Commit/cancel wiring shared by every text-ish editor. */
 function inputEditor(makeHost: HostFactory, column: GridColumn, inputType: string): CellEditorFn {
   return (cell, onRendered, success, cancel) => {
@@ -94,8 +108,8 @@ function inputEditor(makeHost: HostFactory, column: GridColumn, inputType: strin
     };
     const initial =
       column.kind === "date"
-        ? cellToText(cell.getValue() as GridCellValue).slice(0, 10)
-        : cellToText(cell.getValue() as GridCellValue);
+        ? cellToText(cell.getValue()).slice(0, 10)
+        : cellToText(cell.getValue());
     render(
       html`<input
         class="jx-grid-input"
@@ -103,12 +117,12 @@ function inputEditor(makeHost: HostFactory, column: GridColumn, inputType: strin
         .value=${live(initial)}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === "Enter") {
-            commit((e.target as HTMLInputElement).value);
+            commit(inputOf(e).value);
           } else if (e.key === "Escape") {
             abort();
           }
         }}
-        @blur=${(e: Event) => commit((e.target as HTMLInputElement).value)}
+        @blur=${(e: Event) => commit(inputOf(e).value)}
       />`,
       host,
     );
@@ -133,7 +147,7 @@ function checkboxEditor(makeHost: HostFactory): CellEditorFn {
         @change=${(e: Event) => {
           if (!done) {
             done = true;
-            success((e.target as HTMLInputElement).checked);
+            success(inputOf(e).checked);
           }
         }}
         @keydown=${(e: KeyboardEvent) => {
@@ -142,13 +156,13 @@ function checkboxEditor(makeHost: HostFactory): CellEditorFn {
             cancel();
           } else if (e.key === "Enter" && !done) {
             done = true;
-            success((e.target as HTMLInputElement).checked);
+            success(inputOf(e).checked);
           }
         }}
         @blur=${(e: Event) => {
           if (!done) {
             done = true;
-            success((e.target as HTMLInputElement).checked);
+            success(inputOf(e).checked);
           }
         }}
       />`,
@@ -160,19 +174,19 @@ function checkboxEditor(makeHost: HostFactory): CellEditorFn {
 }
 
 function selectEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
-  const options = Array.isArray(column.schema?.enum)
-    ? (column.schema.enum as unknown[]).map(String)
-    : [];
+  const options = Array.isArray(column.schema?.enum) ? column.schema.enum.map(String) : [];
   return (cell, onRendered, success, cancel) => {
     const host = makeHost("jx-grid-editor");
     let done = false;
-    const current = cellToText(cell.getValue() as GridCellValue);
+    const current = cellToText(cell.getValue());
     render(
       html`<select
         class="jx-grid-select"
         @change=${(e: Event) => {
           if (!done) {
             done = true;
+            // SAFETY: this listener is bound on the `<select>` rendered here, and `change` is
+            // Dispatched at the select itself, never at one of its options.
             const { value } = e.target as HTMLSelectElement;
             success(value === "" ? null : value);
           }
@@ -235,26 +249,27 @@ function pillEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
       render(
         html`<span class="jx-grid-pills">
           ${chips.map(
-            (chip, i) => html`<span class="jx-grid-chip"
-              >${chip}<button
-                class="jx-grid-chip-x"
-                title="Remove"
-                @mousedown=${(e: Event) => e.preventDefault()}
-                @click=${() => {
-                  chips.splice(i, 1);
-                  doRender();
-                  inputEl()?.focus();
-                }}
-              >
-                ×
-              </button></span
-            >`,
+            (chip, i) =>
+              html`<span class="jx-grid-chip"
+                >${chip}<button
+                  class="jx-grid-chip-x"
+                  title="Remove"
+                  @mousedown=${(e: Event) => e.preventDefault()}
+                  @click=${() => {
+                    chips.splice(i, 1);
+                    doRender();
+                    inputEl()?.focus();
+                  }}
+                >
+                  ×
+                </button></span
+              >`,
           )}
           <input
             class="jx-grid-pill-input"
             placeholder=${chips.length === 0 ? "add…" : ""}
             @keydown=${(e: KeyboardEvent) => {
-              const input = e.target as HTMLInputElement;
+              const input = inputOf(e);
               if (e.key === "Enter" || e.key === ",") {
                 e.preventDefault();
                 if (addFromInput(input)) {
@@ -272,7 +287,7 @@ function pillEditor(makeHost: HostFactory, column: GridColumn): CellEditorFn {
               }
             }}
             @blur=${(e: Event) => {
-              addFromInput(e.target as HTMLInputElement);
+              addFromInput(inputOf(e));
               finish([...chips]);
             }}
           />
@@ -317,7 +332,7 @@ export function editorForColumn(
 /** Formatter factory — plain-text projection rendered as a real element (innerHTML-safe). */
 export function formatterForColumn(column: GridColumn, makeHost: HostFactory): CellFormatterFn {
   return (cell) => {
-    const value = cell.getValue() as GridCellValue;
+    const value = cell.getValue();
     const host = makeHost(`jx-grid-cell-content jx-grid-kind-${column.kind}`);
     if (column.kind === "boolean") {
       render(html`${value === true ? "✓" : ""}`, host);

package/src/grid/cell-popovers.ts

@@ -12,6 +12,7 @@
  * through the panel's island seam (specs/studio-ui-guidelines.md §9.4) — the box is drawn by one
  * document and filled by another, and nothing in this file renders anything.
  */
+import { isString } from "@jxsuite/schema/guards";
 import { openGridCellSurface } from "../surfaces/grid-cell";
 import { mountMediaPicker } from "../ui/media-picker";
 import { listCollectionEntryIds } from "./sources/content-source";
@@ -25,8 +26,9 @@ export function hasPopoverEditor(column: GridColumn): boolean {
 
 /** Target content-type name of a relationship column (`#/content/<name>` on the schema). */
 export function referenceTargetType(column: GridColumn): string | null {
-  const ref = (column.schema as { $ref?: string } | undefined)?.$ref;
-  if (typeof ref !== "string" || !ref.startsWith("#/content/")) {
+  // The schema is the project's own JSON, so `$ref` is checked rather than trusted to be a string.
+  const ref = column.schema?.$ref;
+  if (!isString(ref) || !ref.startsWith("#/content/")) {
     return null;
   }
   return ref.slice("#/content/".length);
@@ -47,7 +49,7 @@ export interface CellPopoverArgs {
  * The clamp is the panel's own width and a floor for its height, because a cell near the right edge
  * of a wide grid is exactly where a relationship column tends to be.
  */
-function placement(anchor: CellPopoverArgs["anchor"]): { x: number; y: number } {
+function placement(anchor: CellPopoverArgs["anchor"]) {
   return {
     x: Math.max(4, Math.min(anchor.left, window.innerWidth - 340)),
     y: Math.max(4, Math.min(anchor.bottom + 2, window.innerHeight - 200)),