@jxsuite/studio 1.0.0 → 1.1.0

package/src/panels/frontmatter-fields.ts

@@ -0,0 +1,231 @@
+/// <reference lib="dom" />
+/**
+ * Frontmatter-fields.ts — Shared schema-driven frontmatter field collection and renderers.
+ *
+ * Used by both frontmatter editing surfaces: the Document tab (head-panel) and the above-canvas
+ * Properties panel (frontmatter-panel). Fields come from the content-collection schema
+ * (`findContentTypeSchema`) plus any extra keys already present in the frontmatter; each renders as
+ * a typed widget committing through `mutateUpdateFrontmatter`.
+ */
+
+import { html } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { renderFieldRow } from "../ui/field-row";
+import { spNumberField, spTextField } from "../ui/field-input";
+import { renderMediaPicker } from "../ui/media-picker";
+import { activeTab } from "../workspace/workspace";
+import { mutateUpdateFrontmatter, transactDoc } from "../tabs/transact";
+import { findContentTypeSchema } from "../utils/studio-utils";
+
+import type { JsonValue } from "../types";
+import type { Tab } from "../tabs/tab";
+import type { ProjectConfig } from "@jxsuite/schema/types";
+
+export interface FmSchemaEntry {
+  type?: string;
+  enum?: string[];
+  format?: string;
+  properties?: Record<string, unknown>;
+}
+
+export interface FmField {
+  field: string;
+  entry: FmSchemaEntry;
+  value: JsonValue;
+}
+
+export interface FmFieldSet {
+  /** Matched content collection, or null when the doc isn't part of one. */
+  collection: { name: string; schema: unknown } | null;
+  /** Schema-declared fields (schema order) followed by extra frontmatter keys. */
+  fields: FmField[];
+  requiredFields: Set<string>;
+  /** True when the matched collection declares `schema.properties`. */
+  hasSchema: boolean;
+}
+
+/**
+ * Collect the frontmatter fields to display for a tab: schema-declared fields first (in schema
+ * order), then any extra frontmatter keys not in the schema with types inferred from their values.
+ * `$`-prefixed keys and `reserved` keys are skipped.
+ *
+ * @param {Tab} tab
+ * @param {ProjectConfig | null | undefined} projectConfig
+ * @param {Set<string>} reserved — keys managed by dedicated controls elsewhere
+ * @returns {FmFieldSet}
+ */
+export function collectFmFields(
+  tab: Tab,
+  projectConfig: ProjectConfig | null | undefined,
+  reserved: Set<string>,
+): FmFieldSet {
+  const fm = tab.doc.content?.frontmatter || {};
+  const collection = findContentTypeSchema(tab.documentPath, projectConfig);
+  const schema = collection?.schema as
+    | { properties?: Record<string, FmSchemaEntry>; required?: string[] }
+    | undefined;
+  const schemaProps = schema?.properties;
+  const requiredFields = new Set(schema?.required || []);
+
+  const fields: FmField[] = [];
+  if (schemaProps) {
+    for (const [field, fieldSchema] of Object.entries(schemaProps)) {
+      if (reserved.has(field)) {
+        continue;
+      }
+      fields.push({ entry: fieldSchema, field, value: fm[field] as JsonValue });
+    }
+    for (const [field, value] of Object.entries(fm)) {
+      if (schemaProps[field] || field.startsWith("$") || reserved.has(field)) {
+        continue;
+      }
+      fields.push({
+        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+        field,
+        value: value as JsonValue,
+      });
+    }
+  } else {
+    for (const [field, value] of Object.entries(fm)) {
+      if (field.startsWith("$") || reserved.has(field)) {
+        continue;
+      }
+      fields.push({
+        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+        field,
+        value: value as JsonValue,
+      });
+    }
+  }
+
+  return { collection, fields, hasSchema: Boolean(schemaProps), requiredFields };
+}
+
+/**
+ * Render one frontmatter field as a typed widget row. Commits through `transactDoc` +
+ * `mutateUpdateFrontmatter` on the active tab.
+ *
+ * @param {string} field
+ * @param {FmSchemaEntry} entry
+ * @param {JsonValue} value
+ * @param {Set<string>} requiredFields
+ * @returns {import("lit-html").TemplateResult}
+ */
+export function renderFmField(
+  field: string,
+  entry: FmSchemaEntry,
+  value: JsonValue,
+  requiredFields: Set<string>,
+) {
+  const isRequired = requiredFields.has(field);
+  const label = field.replaceAll(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+  const displayLabel = label + (isRequired ? " *" : "");
+  const hasVal = value !== undefined && value !== "" && value !== false;
+  const onClear = () => transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field));
+
+  if (entry.type === "boolean") {
+    return renderFieldRow({
+      hasValue: hasVal,
+      label: displayLabel,
+      onClear,
+      prop: field,
+      widget: html`
+        <sp-checkbox
+          size="s"
+          .checked=${live(Boolean(value))}
+          @change=${(e: Event) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateFrontmatter(
+                t,
+                field,
+                (e.target as HTMLInputElement).checked || undefined,
+              ),
+            )}
+        ></sp-checkbox>
+      `,
+    });
+  }
+
+  if (entry.type === "array") {
+    const display = Array.isArray(value) ? value.join(", ") : (value as string) || "";
+    return renderFieldRow({
+      hasValue: hasVal,
+      label: displayLabel,
+      onClear,
+      prop: field,
+      widget: spTextField(
+        `fm:${field}`,
+        display,
+        (v: string) => {
+          const arr = v
+            ? v
+                .split(",")
+                .map((s: string) => s.trim())
+                .filter(Boolean)
+            : undefined;
+          transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
+        },
+        { placeholder: "comma, separated" },
+      ),
+    });
+  }
+
+  if (Array.isArray(entry.enum)) {
+    return renderFieldRow({
+      hasValue: hasVal,
+      label: displayLabel,
+      onClear,
+      prop: field,
+      widget: html`
+        <sp-picker
+          size="s"
+          .value=${live(value || "")}
+          @change=${(e: Event) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateFrontmatter(t, field, (e.target as HTMLInputElement).value || undefined),
+            )}
+        >
+          ${entry.enum.map((opt: string) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`)}
+        </sp-picker>
+      `,
+    });
+  }
+
+  if (entry.format === "image") {
+    return renderFieldRow({
+      hasValue: hasVal,
+      label: displayLabel,
+      onClear,
+      prop: field,
+      widget: renderMediaPicker(field, value as string, (v: string) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
+      ),
+    });
+  }
+
+  if (entry.type === "number") {
+    return renderFieldRow({
+      hasValue: hasVal,
+      label: displayLabel,
+      onClear,
+      prop: field,
+      widget: spNumberField(value !== undefined ? Number(value) : undefined, (n) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, n)),
+      ),
+    });
+  }
+
+  return renderFieldRow({
+    hasValue: hasVal,
+    label: displayLabel,
+    onClear,
+    prop: field,
+    widget: spTextField(
+      `fm:${field}`,
+      (value as string) || "",
+      (v: string) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
+      { placeholder: entry.format === "date" ? "YYYY-MM-DD" : "" },
+    ),
+  });
+}

package/src/panels/frontmatter-panel.ts

@@ -0,0 +1,132 @@
+/// <reference lib="dom" />
+/**
+ * Frontmatter-panel.ts — Obsidian-style "Properties" panel above the canvas.
+ *
+ * Shown only when the active tab is a content-collection document (matched via
+ * `findContentTypeSchema`) in content mode with the effective canvas mode "edit". The fields sit
+ * inside a single collapsible accordion item so the panel can be dismissed to a slim header bar;
+ * the expanded/collapsed state persists per tab (`tab.session.ui.frontmatterOpen`).
+ *
+ * Unlike the Document-tab section (head-panel), no keys are reserved here — `title` renders as a
+ * regular property, matching Obsidian.
+ */
+
+import { html, nothing, render as litRender } from "lit-html";
+import { frontmatterPanelEl, projectState } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { effect, effectScope } from "../reactivity";
+import { createPanelScheduler } from "./panel-scheduler";
+import { collectFmFields, renderFmField } from "./frontmatter-fields";
+
+import type { PanelScheduler } from "./panel-scheduler";
+
+interface FrontmatterPanelCtx {
+  /** Effective canvas mode (composes the base mode with the preview toggle). */
+  getCanvasMode: () => string;
+}
+
+const NO_RESERVED_KEYS = new Set<string>();
+
+let _ctx: FrontmatterPanelCtx | null = null;
+let _scheduler: PanelScheduler | null = null;
+let _scope: { stop: () => void; run: <T>(fn: () => T) => T | undefined } | null = null;
+
+/**
+ * Mount the frontmatter panel: bind the focus-aware scheduler to the shell host and re-render
+ * reactively on tab/mode/frontmatter changes.
+ *
+ * @param {FrontmatterPanelCtx} ctx
+ */
+export function mount(ctx: FrontmatterPanelCtx) {
+  if (!frontmatterPanelEl) {
+    return;
+  }
+  _ctx = ctx;
+  _scheduler = createPanelScheduler({ render: _doRender, root: frontmatterPanelEl });
+  _scheduler.bindFocus();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (tab) {
+        // Track everything the panel reads: mode/ui flags plus the frontmatter object itself AND
+        // Its entries — field commits mutate keys in place while the source-mode round-trip swaps
+        // The whole object; both must re-fire this effect.
+        void tab.doc.mode;
+        void tab.session.ui.canvasMode;
+        void tab.session.ui.preview;
+        void tab.session.ui.frontmatterOpen;
+        const fm = tab.doc.content?.frontmatter;
+        if (fm) {
+          for (const key of Object.keys(fm)) {
+            void fm[key];
+          }
+        }
+      }
+      render();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _ctx = null;
+  _scheduler?.unbind();
+  _scheduler = null;
+}
+
+/**
+ * Request a render. Coalesced and deferred while a text input in the panel is focused, so
+ * re-renders never clobber a field mid-edit.
+ */
+export function render() {
+  _scheduler?.schedule();
+}
+
+function _doRender() {
+  if (!_ctx || !frontmatterPanelEl) {
+    return;
+  }
+
+  const tab = activeTab.value;
+  const eligible = Boolean(
+    tab && tab.doc.mode === "content" && _ctx.getCanvasMode() === "edit" && tab.documentPath,
+  );
+  const fieldSet = eligible
+    ? collectFmFields(tab!, projectState?.projectConfig, NO_RESERVED_KEYS)
+    : null;
+
+  if (!fieldSet?.collection) {
+    // Lit leaves comment markers, so the host is hidden explicitly rather than relying on :empty.
+    litRender(nothing, frontmatterPanelEl);
+    frontmatterPanelEl.hidden = true;
+    return;
+  }
+
+  const { collection, fields, requiredFields } = fieldSet;
+  const open = tab!.session.ui.frontmatterOpen !== false;
+
+  litRender(
+    html`
+      <sp-accordion size="s">
+        <sp-accordion-item
+          label="Properties · ${collection.name}"
+          ?open=${open}
+          @sp-accordion-item-toggle=${(e: Event) => {
+            const t = activeTab.value;
+            if (t) {
+              t.session.ui.frontmatterOpen = (e.target as HTMLElement & { open: boolean }).open;
+            }
+          }}
+        >
+          <div class="fm-panel-body">
+            ${fields.map((f) => renderFmField(f.field, f.entry, f.value, requiredFields))}
+          </div>
+        </sp-accordion-item>
+      </sp-accordion>
+    `,
+    frontmatterPanelEl,
+  );
+  frontmatterPanelEl.hidden = false;
+}

package/src/panels/git-panel.ts

@@ -471,7 +471,7 @@ export function renderGitPanel(
         .value=${live(S.ui.gitCommitMessage || "")}
         @input=${(e: Event) => updateUi("gitCommitMessage", (e.target as HTMLInputElement).value)}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.ctrlKey && e.key === "Enter") {
+          if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
             e.preventDefault();
             void doCommit();
           }

package/src/panels/head-panel.ts

@@ -7,15 +7,13 @@
  */
 
 import { html, nothing } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import { renderFieldRow } from "../ui/field-row";
-import { spNumberField, spTextArea, spTextField } from "../ui/field-input";
+import { spTextArea, spTextField } from "../ui/field-input";
 import { renderMediaPicker } from "../ui/media-picker";
 import { projectState, renderOnly } from "../store";
-import type { DirEntry, JsonValue } from "../types";
+import type { DirEntry } from "../types";
 import { activeTab } from "../workspace/workspace";
-import { mutateUpdateFrontmatter, transactDoc } from "../tabs/transact";
-import { findContentTypeSchema } from "../utils/studio-utils";
+import { collectFmFields, renderFmField } from "./frontmatter-fields";
 import { isGoogleFontEntry, isGoogleFontPreconnect } from "../utils/google-fonts";
 import { invalidateLayoutCache } from "../site-context";
 import { getPlatform } from "../platform";
@@ -31,13 +29,6 @@ interface MetaField {
   media?: boolean;
 }
 
-interface FmSchemaEntry {
-  type?: string;
-  enum?: string[];
-  format?: string;
-  properties?: Record<string, unknown>;
-}
-
 // ─── Layout picker ──────────────────────────────────────────────────────────
 
 /** @type {{ name: string; path: string }[] | null} */
@@ -564,49 +555,13 @@ function renderFrontmatterSection() {
     return nothing;
   }
 
-  const fm = tab.doc.content?.frontmatter || {};
-  const col = findContentTypeSchema(tab.documentPath, projectState?.projectConfig);
-  const schema = col?.schema as
-    | { properties?: Record<string, FmSchemaEntry>; required?: string[] }
-    | undefined;
-  const schemaProps = schema?.properties;
-  const requiredFields = new Set(schema?.required || []);
-
-  /** @type {{ field: string; entry: FmSchemaEntry; value: JsonValue }[]} */
-  const fields = [];
-  if (schemaProps) {
-    for (const [field, fieldSchema] of Object.entries(
-      /** @type {Record<string, FmSchemaEntry>} */ schemaProps,
-    )) {
-      if (RESERVED_FM_KEYS.has(field)) {
-        continue;
-      }
-      fields.push({ entry: fieldSchema, field, value: fm[field] as JsonValue });
-    }
-    for (const [field, value] of Object.entries(fm)) {
-      if (schemaProps[field] || field.startsWith("$") || RESERVED_FM_KEYS.has(field)) {
-        continue;
-      }
-      fields.push({
-        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        field,
-        value: /** @type {JsonValue} */ value,
-      });
-    }
-  } else {
-    for (const [field, value] of Object.entries(fm)) {
-      if (field.startsWith("$") || RESERVED_FM_KEYS.has(field)) {
-        continue;
-      }
-      fields.push({
-        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        field,
-        value: /** @type {JsonValue} */ value,
-      });
-    }
-  }
+  const { collection, fields, hasSchema, requiredFields } = collectFmFields(
+    tab,
+    projectState?.projectConfig,
+    RESERVED_FM_KEYS,
+  );
 
-  if (fields.length === 0 && !schemaProps) {
+  if (fields.length === 0 && !hasSchema) {
     return nothing;
   }
 
@@ -614,131 +569,12 @@ function renderFrontmatterSection() {
     <div class="imports-section">
       <div class="imports-section-header">
         <span class="imports-section-title"
-          >${col ? `Frontmatter (${col.name})` : "Frontmatter"}</span
+          >${collection ? `Frontmatter (${collection.name})` : "Frontmatter"}</span
         >
       </div>
       <div class="head-section-body">
-        ${fields.map((f) => renderFmField(f.field, f.entry, f.value as JsonValue, requiredFields))}
+        ${fields.map((f) => renderFmField(f.field, f.entry, f.value, requiredFields))}
       </div>
     </div>
   `;
 }
-
-function renderFmField(
-  field: string,
-  entry: FmSchemaEntry,
-  value: JsonValue,
-  requiredFields: Set<string>,
-) {
-  const isRequired = requiredFields.has(field);
-  const label = field.replaceAll(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
-  const displayLabel = label + (isRequired ? " *" : "");
-  const hasVal = value !== undefined && value !== "" && value !== false;
-  const onClear = () => transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field));
-
-  if (entry.type === "boolean") {
-    return renderFieldRow({
-      hasValue: hasVal,
-      label: displayLabel,
-      onClear,
-      prop: field,
-      widget: html`
-        <sp-checkbox
-          size="s"
-          .checked=${live(Boolean(value))}
-          @change=${(e: Event) =>
-            transactDoc(activeTab.value, (t) =>
-              mutateUpdateFrontmatter(
-                t,
-                field,
-                (e.target as HTMLInputElement).checked || undefined,
-              ),
-            )}
-        ></sp-checkbox>
-      `,
-    });
-  }
-
-  if (entry.type === "array") {
-    const display = Array.isArray(value) ? value.join(", ") : (value as string) || "";
-    return renderFieldRow({
-      hasValue: hasVal,
-      label: displayLabel,
-      onClear,
-      prop: field,
-      widget: spTextField(
-        `fm:${field}`,
-        display,
-        (v: string) => {
-          const arr = v
-            ? v
-                .split(",")
-                .map((s: string) => s.trim())
-                .filter(Boolean)
-            : undefined;
-          transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
-        },
-        { placeholder: "comma, separated" },
-      ),
-    });
-  }
-
-  if (Array.isArray(entry.enum)) {
-    return renderFieldRow({
-      hasValue: hasVal,
-      label: displayLabel,
-      onClear,
-      prop: field,
-      widget: html`
-        <sp-picker
-          size="s"
-          .value=${live(value || "")}
-          @change=${(e: Event) =>
-            transactDoc(activeTab.value, (t) =>
-              mutateUpdateFrontmatter(t, field, (e.target as HTMLInputElement).value || undefined),
-            )}
-        >
-          ${entry.enum.map((opt: string) => html`<sp-menu-item value=${opt}>${opt}</sp-menu-item>`)}
-        </sp-picker>
-      `,
-    });
-  }
-
-  if (entry.format === "image") {
-    return renderFieldRow({
-      hasValue: hasVal,
-      label: displayLabel,
-      onClear,
-      prop: field,
-      widget: renderMediaPicker(field, value as string, (v: string) =>
-        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
-      ),
-    });
-  }
-
-  if (entry.type === "number") {
-    return renderFieldRow({
-      hasValue: hasVal,
-      label: displayLabel,
-      onClear,
-      prop: field,
-      widget: spNumberField(value !== undefined ? Number(value) : undefined, (n) =>
-        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, n)),
-      ),
-    });
-  }
-
-  return renderFieldRow({
-    hasValue: hasVal,
-    label: displayLabel,
-    onClear,
-    prop: field,
-    widget: spTextField(
-      `fm:${field}`,
-      (value as string) || "",
-      (v: string) =>
-        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
-      { placeholder: entry.format === "date" ? "YYYY-MM-DD" : "" },
-    ),
-  });
-}