@jxsuite/studio 3.0.0 → 4.1.0

package/src/settings/preferences-dialog.ts

@@ -38,7 +38,15 @@ import { createManagedConnect } from "../ui/ai-managed-connect";
 import { activeRegistry } from "../commands/active-registry";
 import { shortcutReference, SCOPE_LABELS } from "../commands/reference";
 import { chordFromEvent } from "../commands/keymap";
-import { listAccounts, notifyCredentialsChanged, revokeAccount } from "./preferences-accounts";
+import {
+  ensureCfConnection,
+  listAccounts,
+  notifyCredentialsChanged,
+  platformBrokersCf,
+  refreshCfConnection,
+  resetCfConnectionCache,
+  revokeAccount,
+} from "./preferences-accounts";
 import { applyKeybindingOverrides, rebindCommand, resetKeybinding } from "./preferences-keymap";
 import { overlayRegion } from "../ui/regions";
 
@@ -48,47 +56,24 @@ import type { ShortcutRow } from "../commands/reference";
 import type { RebindResult } from "./preferences-keymap";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
 
-/** One section of the sheet. The `id` is what `app.preferences { section }` accepts. */
-export interface PreferencesSection {
-  id: string;
-  title: string;
-  /** The one-line answer to "what is in here", shown under the heading. */
-  blurb: string;
-}
-
-/**
- * The sections, in sheet order.
- *
- * §9.3 lists six for the finished surface (Editor behaviour and Updates/About are the other two).
- * Four are built; a section is added here when it has something to configure, never before — an
- * empty pane is the "declared but unbuilt" state the rail already refuses to render.
+/*
+ * The sections moved to `./preferences-sections`, a leaf with no imports, so the rail's gear menu
+ * can enumerate `app.preferences`'s own `section` argument without pulling this module's graph
+ * (ai-models, github-auth, cf-settings, the settings kernel) into the rail. Re-exported here so
+ * every existing import site is unchanged.
  */
-export const PREFERENCES_SECTIONS: readonly PreferencesSection[] = [
-  { id: "appearance", title: "Appearance", blurb: "How the Studio chrome looks." },
-  {
-    id: "assistant",
-    title: "Assistant",
-    blurb: "The AI provider the assistant talks to. Stored on this machine.",
-  },
-  {
-    id: "accounts",
-    title: "Accounts",
-    blurb: "Every credential Studio holds, and how to make it forget one.",
-  },
-  {
-    id: "keyboard",
-    title: "Keyboard",
-    blurb: "Generated from the command registry — the app's own record of every chord.",
-  },
-];
-
-/** The section the sheet opens on when none is named. */
-export const DEFAULT_PREFERENCES_SECTION = PREFERENCES_SECTIONS[0]!.id;
-
-/** Whether a string names a section. */
-export function isPreferencesSection(id: unknown): boolean {
-  return PREFERENCES_SECTIONS.some((section) => section.id === id);
-}
+import {
+  DEFAULT_PREFERENCES_SECTION,
+  isPreferencesSection,
+  PREFERENCES_SECTIONS,
+} from "./preferences-sections";
+
+export {
+  DEFAULT_PREFERENCES_SECTION,
+  isPreferencesSection,
+  PREFERENCES_SECTIONS,
+} from "./preferences-sections";
+export type { PreferencesSection } from "./preferences-sections";
 
 // ─── Open state ───────────────────────────────────────────────────────────────
 
@@ -120,6 +105,19 @@ function credentialsChanged(): void {
   repaint();
 }
 
+/**
+ * Showing a section is a chance to find out it is stale.
+ *
+ * Only Accounts has anything to re-read: the brokered Cloudflare connection lives on the server, so
+ * a grant that lapsed while Preferences was closed — or while the author was in Keyboard — would
+ * otherwise be reported from a cache taken before it did.
+ */
+function sectionShown(): void {
+  if (_section === "accounts" && platformBrokersCf()) {
+    void refreshCfConnection().then(repaint);
+  }
+}
+
 /** The shared credentials form — draft state lives inside the form's closure. */
 const credsForm = createAiCredentialsForm({
   intro: html`
@@ -167,7 +165,52 @@ function assistantTpl(): TemplateResult {
   return html`<div class="prefs-assistant">${managedConnect.render()} ${credsForm.render()}</div>`;
 }
 
+/**
+ * The buttons on one row.
+ *
+ * A record that declares `actions` decides its own verbs; everything else keeps the original rule —
+ * a connected credential offers Disconnect and a disconnected one offers nothing. The async ones
+ * repaint when they settle, because a hosted Reconnect is a round trip through a Cloudflare popup
+ * and the row must not still be reading "expired" when it comes back.
+ */
+function accountActionsTpl(account: ReturnType<typeof listAccounts>[number]) {
+  if (account.actions) {
+    return account.actions.map(
+      (action) => html`
+        <sp-button
+          size="s"
+          data-action=${action.id}
+          variant=${action.variant ?? nothing}
+          treatment=${action.variant === "negative" ? "outline" : nothing}
+          @click=${() => {
+            void Promise.resolve(action.run()).finally(repaint);
+          }}
+        >
+          ${action.label}
+        </sp-button>
+      `,
+    );
+  }
+  return account.connected
+    ? html`
+        <sp-button
+          size="s"
+          variant="negative"
+          treatment="outline"
+          @click=${() => {
+            revokeAccount(account.id);
+            repaint();
+          }}
+        >
+          Disconnect
+        </sp-button>
+      `
+    : nothing;
+}
+
 function accountsTpl(): TemplateResult {
+  // First paint asks the broker what it holds; the answer arrives as a credentials-changed repaint.
+  ensureCfConnection();
   return html`
     <div class="prefs-accounts">
       ${listAccounts().map(
@@ -177,23 +220,7 @@ function accountsTpl(): TemplateResult {
               <span class="prefs-account-label">${account.label}</span>
               <span class="prefs-account-detail">${account.detail}</span>
             </div>
-            ${
-              account.connected
-                ? html`
-                    <sp-button
-                      size="s"
-                      variant="negative"
-                      treatment="outline"
-                      @click=${() => {
-                        revokeAccount(account.id);
-                        repaint();
-                      }}
-                    >
-                      Disconnect
-                    </sp-button>
-                  `
-                : nothing
-            }
+            <div class="prefs-account-actions">${accountActionsTpl(account)}</div>
           </div>
         `,
       )}
@@ -472,15 +499,21 @@ function sectionBodyTpl(): TemplateResult {
  * @param section One of {@link PREFERENCES_SECTIONS}' ids. An unknown id falls back to Appearance.
  */
 export function openPreferences(section?: string): Promise<null> {
+  /* Opening is a fresh look, so nothing may be reported from the last one: a brokered Cloudflare
+     grant can lapse between visits, and a row that repaints the previous answer first is stating
+     something it has no reason to believe. */
+  resetCfConnectionCache();
   _section = section !== undefined && isPreferencesSection(section) ? section : _section;
   if (_close) {
     repaint();
+    sectionShown();
     return Promise.resolve(null);
   }
   _section =
     section !== undefined && isPreferencesSection(section) ? section : DEFAULT_PREFERENCES_SECTION;
   credsForm.startEdit();
   resetKeyboardState();
+  sectionShown();
   return showDialog<null>(
     (done) => {
       let wrapperEl: HTMLElement | null = null;
@@ -523,6 +556,7 @@ export function openPreferences(section?: string): Promise<null> {
                         // First chord pressed on the author's NEXT visit.
                         resetKeyboardState();
                         repaint();
+                        sectionShown();
                       }}
                     >
                       ${candidate.title}
@@ -588,7 +622,7 @@ export function preferencesCommands(): AnyCommand[] {
       id: "app.preferences",
       level: "application",
       keybinding: "mod+,",
-      menus: ["commandbar/overflow", "palette"],
+      menus: ["commandbar/overflow", "settings/menu", "palette"],
       group: "7_settings",
       run: (_ctx, args) => {
         const section = (args as { section?: unknown } | undefined)?.section;

package/src/settings/preferences-sections.ts

@@ -0,0 +1,57 @@
+/**
+ * The Preferences sections — the values `app.preferences { section }` accepts.
+ *
+ * A LEAF: it imports nothing, and that is the whole reason it is a file. `preferences-dialog.ts`
+ * reaches `ui/layers`, `ui/ai-credentials-form`, `ui/ai-managed-connect`, `preferences-accounts` (→
+ * github-auth, cf-settings, ai-settings, ai-models) and `preferences-keymap` (→
+ * services/settings/kernel) — a graph so wide that `tests/preferences-dialog.test.ts` mocks
+ * `ai-models` merely to import the module at all. The rail's gear menu needs four labels from it
+ * and nothing else, so it takes the labels rather than the graph.
+ *
+ * Same split, and the same stated reason, as `settings/section-registry.ts`: what is contributed to
+ * is not the surface that renders it, and keeping the two apart is what lets either be replaced.
+ *
+ * `preferences-dialog.ts` re-exports every symbol here, so no existing import site moved.
+ */
+
+/** One section of the sheet. The `id` is what `app.preferences { section }` accepts. */
+export interface PreferencesSection {
+  id: string;
+  title: string;
+  /** The one-line answer to "what is in here", shown under the heading. */
+  blurb: string;
+}
+
+/**
+ * The sections, in sheet order.
+ *
+ * §9.3 lists six for the finished surface (Editor behaviour and Updates/About are the other two).
+ * Four are built; a section is added here when it has something to configure, never before — an
+ * empty pane is the "declared but unbuilt" state the rail already refuses to render.
+ */
+export const PREFERENCES_SECTIONS: readonly PreferencesSection[] = [
+  { id: "appearance", title: "Appearance", blurb: "How the Studio chrome looks." },
+  {
+    id: "assistant",
+    title: "Assistant",
+    blurb: "The AI provider the assistant talks to. Stored on this machine.",
+  },
+  {
+    id: "accounts",
+    title: "Accounts",
+    blurb: "Every credential Studio holds, and how to make it forget one.",
+  },
+  {
+    id: "keyboard",
+    title: "Keyboard",
+    blurb: "Generated from the command registry — the app's own record of every chord.",
+  },
+];
+
+/** The section the sheet opens on when none is named. */
+export const DEFAULT_PREFERENCES_SECTION = PREFERENCES_SECTIONS[0]!.id;
+
+/** Whether a string names a section. */
+export function isPreferencesSection(id: unknown): boolean {
+  return PREFERENCES_SECTIONS.some((section) => section.id === id);
+}

package/src/settings/settings-document.ts

@@ -52,6 +52,8 @@ import { renderGeneralSettings } from "./general-settings";
 import { renderHeadEditor } from "./head-editor";
 import { renderLocalesSection } from "./locales-section";
 import { selectContributedEntry } from "./contributed-section";
+// The NAME and the wire value, kept apart by that module on purpose — see its docstring.
+import { PROJECT_STYLES_TITLE, PROJECT_STYLES_VIEW } from "../style/project-styles";
 import type { Tab } from "../tabs/tab";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
 
@@ -192,28 +194,37 @@ export function settingsDocumentOpen(): boolean {
  *
  * @returns {Tab | null} The tab, or null when no project is open
  */
-export function showSettingsDocument(): Tab | null {
+export function showSettingsDocument(mode: string = SETTINGS_MODE): Tab | null {
   const state = requireProjectState();
   if (!state) {
     return null;
   }
   const existing = workspace.tabs.get(PROJECT_CONFIG_PATH);
   if (existing) {
-    for (const mode of SETTINGS_TAB_MODES) {
-      if (!existing.capabilities.modes.includes(mode)) {
-        existing.capabilities.modes.unshift(mode);
+    for (const candidate of SETTINGS_TAB_MODES) {
+      if (!existing.capabilities.modes.includes(candidate)) {
+        existing.capabilities.modes.unshift(candidate);
       }
     }
-    existing.session.ui.canvasMode = SETTINGS_MODE;
+    existing.session.ui.canvasMode = mode;
     existing.session.ui.preview = false;
     return revealTab(existing as unknown as Tab);
   }
-  return openTab({
+  const tab = openTab({
     capabilities: { modes: [...SETTINGS_TAB_MODES] },
     document: (state.projectConfig ?? {}) as unknown as Record<string, unknown>,
     documentPath: PROJECT_CONFIG_PATH,
     id: PROJECT_CONFIG_PATH,
   });
+  /* The mode is written here rather than left to the capability list, because `createTab` seeds
+     `session.ui.canvasMode` from `resolvedModes.find(m => m !== "preview")` (`tabs/tab.ts`) — i.e.
+     from `SETTINGS_TAB_MODES[0]`, which is `settings`. A second door over the same document has to
+     SAY which editor it is, or `styles.open` from a cold workspace opens the settings form. The
+     capability list stays in its declared order for the same reason it always had one: the tab's
+     Editor control offers the modes in that order. */
+  tab.session.ui.canvasMode = mode;
+  tab.session.ui.preview = false;
+  return tab;
 }
 
 /**
@@ -328,10 +339,17 @@ export function settingsCommands(): AnyCommand[] {
       // ⌘⇧, — the other half of §5.3's `⌘, / ⌘⇧,` pair. `app.preferences` shipped with its chord
       // And this one did not, so the two halves of "settings" were a keystroke and a palette search.
       keybinding: "mod+shift+,",
-      menus: ["commandbar/overflow", "palette"],
+      menus: ["commandbar/overflow", "settings/menu", "palette"],
       group: "7_settings",
       requires: "an open project",
-      when: (ctx) => ctx.project.open,
+      /* `enablement`, not `when`: with no project open this row is DRAWN, greyed, carrying the
+         sentence above — §12.3's rule that a control which cannot act explains itself rather than
+         vanishing, and the reason the palette greys unavailable commands instead of hiding them.
+         It used to be `when`, so the rail's Settings menu held one row on the welcome screen and
+         said nothing about the other two; "why can't I" had no answer anywhere. The gate itself is
+         unchanged — `enabledWith` still refuses, so `registry.run` and the assistant's tool still
+         throw `CommandUnavailableError` exactly as before. */
+      enablement: (ctx) => ctx.project.open,
       aiTool: {
         description:
           "Open the project's Settings, optionally on a named section (overview, contexts, head, " +
@@ -370,7 +388,45 @@ export function settingsCommands(): AnyCommand[] {
         }
         notifySettingsDocument();
       },
-      title: "Open Settings",
+      title: "Open Project Settings",
+    },
+    /*
+     * The SECOND door over the same document. `project.json` has three editors — the settings form,
+     * Project Styles and the raw source — and until now only one of them had a name: Project Styles
+     * was reached by the pane's Editor control (which can only re-mode a tab that is ALREADY open)
+     * and by a hand-written `canvasMode` assignment inside Overview. `canvas.setMode` cannot stand
+     * in for this: it is level `document` and requires an open one, so from a cold workspace there
+     * is nothing to re-mode.
+     *
+     * It is a peer of `settings.open` and declares the same gate, byte for byte (§12.4: two verbs
+     * over one document declare ONE availability rule). `styles.*` is the project-level plural of
+     * the selection-level `style.*` verbs in `panels/style-panel.ts`; the ids are one letter apart
+     * and the levels are the reason.
+     */
+    {
+      category: "Project",
+      id: "styles.open",
+      level: "project",
+      menus: ["settings/menu", "palette"],
+      /* A distinct ordinal inside the settings family, so the gear reads Settings → Styles.
+         §12.3's lever is `group`, never a per-menu sort; `styles.open` is not in the ⬢ menu, so
+         nothing else sees this string. */
+      group: "7_settings_styles",
+      requires: "an open project",
+      // §12.4: two verbs over ONE document declare ONE availability rule, byte-identical.
+      enablement: (ctx) => ctx.project.open,
+      aiTool: {
+        description:
+          "Open the project's configuration document in its Project Styles editor — the design " +
+          "tokens and the default element styles that apply across every page.",
+        name: "open_project_styles",
+      },
+      run: () => {
+        showSettingsDocument(PROJECT_STYLES_VIEW);
+      },
+      // Named, never spelled from the wire value: `stylebook` is shared with `dist/iframe-entry.js`
+      // And may never be renamed, so nothing a reader sees is derived from it (`style/project-styles`).
+      title: `Open ${PROJECT_STYLES_TITLE}`,
     },
   ];
 }

package/src/studio.ts

@@ -94,7 +94,8 @@ import { mountJumpBar } from "./panels/jump-bar";
 import { cellForPane } from "./panels/pane-grid";
 import { notify } from "./services/notify";
 import { beginActivity } from "./panels/activity-panel";
-import { exportFile, parseSourceForPath, saveFile, serializeDocument } from "./files/file-ops";
+import { exportFile, parseSourceForPath, saveFile } from "./files/file-ops";
+import { serializeDocument } from "./files/serialize-document";
 import {
   formatForPath,
   loadFormats,
@@ -113,6 +114,7 @@ import {
   registerFileTreeDnD,
   reloadCleanTab,
 } from "./files/files";
+import { resetIgnoreCache } from "./files/gitignore";
 import { startFsSync } from "./files/fs-events";
 import { invalidateParamValues } from "./page-params";
 import {
@@ -128,7 +130,13 @@ import { invalidateLibrary } from "./browse/library-pane";
 import { invalidateMediaCache } from "./ui/media-picker";
 import { setMediaChangedHandler } from "./files/media-upload";
 import { applyFileDrop } from "./editor/file-drop-action";
-import { assistantCommands, isAssistantStreaming, seedAssistantMessages } from "./panels/ai-panel";
+import {
+  assistantCommands,
+  isAssistantStreaming,
+  isAssistantWaiting,
+  revealImportHandoff,
+  seedAssistantMessages,
+} from "./panels/ai-panel";
 import { seedPublishConnected } from "./publish/publish-panel";
 
 import { getPlatform, hasPlatform, registerPlatform } from "./platform";
@@ -180,6 +188,8 @@ import * as frontmatterPanelMod from "./panels/frontmatter-panel";
 import * as rightPanelMod from "./panels/right-panel";
 import * as chatPanelMod from "./panels/chat-panel";
 import { setProjectAdopter } from "./services/project-adoption";
+import { setImportHandoff } from "./services/import-seed";
+import { watchConnection } from "./services/connection";
 import { tabBufferUnsaved } from "./services/monaco-buffer";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
@@ -228,6 +238,7 @@ import { registerPreferencesCommands } from "./settings/preferences-dialog";
 import { registerAboutCommands } from "./about/about-modal";
 import { registerCollabCommands } from "./collab/collab-commands";
 import { registerLibraryCommands } from "./browse/library-commands";
+import { registerFileFormatCommands } from "./format/convert-file";
 import { registerPublishCommands } from "./publish/publish-commands";
 import { registerGridViewCommands } from "./grid/grid-panel";
 import { registerRedirectsCommands } from "./grid/redirects-grid";
@@ -799,6 +810,11 @@ frontmatterPanelMod.mount();
 // The assistant's create_project tool adopts freshly scaffolded projects through the same
 // Flow as the recent-projects list.
 setProjectAdopter(openRecentProject);
+setImportHandoff(revealImportHandoff);
+
+/* A launcher whose backend can go away says so. Installs nothing on a platform that cannot lose
+   one — see services/connection.ts for why only the chromium shell can. */
+watchConnection();
 
 leftPanelMod.mount({
   cloneRepository: () => cloneRepository({ openRecentProject }),
@@ -971,6 +987,7 @@ if (_projectParam) {
             }
           }
 
+          resetIgnoreCache();
           setProjectState({
             dirs: new Map(),
             expanded: new Set(),
@@ -1000,15 +1017,18 @@ if (_projectParam) {
             "public",
             "styles",
           ]);
-          const dirEntries = await platform.listDirectory(".");
-          requireProjectState().dirs.set(".", dirEntries);
+          /* Through `loadDirectory`, not `platform.listDirectory`: this is the second copy of the
+             conventional-dir walk (the first is `openProject` in files/files.ts), and the loader is
+             what reads the `.gitignore` chain governing each directory. Listing around it left the
+             `?project=` boot as the one door into a project whose tree knew no ignore rules. */
+          await loadDirectory(".");
+          const dirEntries = requireProjectState().dirs.get(".") ?? [];
           const foundDirs = [];
           for (const e of dirEntries) {
             if (e.type === "directory" && conventionalDirs.has(e.name)) {
               foundDirs.push(e.name);
               requireProjectState().expanded.add(e.path || e.name);
-              const sub = await platform.listDirectory(e.path || e.name);
-              requireProjectState().dirs.set(e.path || e.name, sub);
+              await loadDirectory(e.path || e.name);
             }
           }
           requireProjectState().projectDirs = foundDirs;
@@ -1297,6 +1317,7 @@ async function openRecentProject(root: string) {
     const config = JSON.parse(content) as ProjectConfig;
 
     closeAllTabs();
+    resetIgnoreCache();
 
     setProjectState({
       ...projectState,
@@ -1402,6 +1423,7 @@ const commandRegistry = createCommandRegistry({
     // The probe `live-context.ts` declared optional and nobody ever passed, so `ctx.ai.streaming`
     // Read false forever. `assistant.stop` is gated on it.
     aiStreaming: isAssistantStreaming,
+    aiWaiting: isAssistantWaiting,
     canvasMode: getCanvasMode,
     isCaretActive,
     isModalOpen,
@@ -1416,6 +1438,10 @@ registerStudioCommands(
     // Hands the URL to the launcher's preview-navigate handler — the OS browser — where a bare
     // `window.open` would open a webview with no address bar. The browser build falls back to a
     // New tab either way.
+    // `View: Open in Browser` renders the working tree; `Build Site` runs the compiler. Two
+    // Verbs, because "what does this page look like?" and "does my site build?" are two questions
+    // And only one of them is worth waiting for a bundler and an image pipeline.
+    buildSite: () => toolbarPanel.runBuildSite(),
     openInBrowser: () => toolbarPanel.runOpenInBrowser(),
     openProject,
     // Wrapped rather than passed by reference: `saveFile` takes an optional tab and reports
@@ -1483,6 +1509,7 @@ registerGridCommands(commandRegistry);
 registerSettingsCommands(commandRegistry);
 registerPreferencesCommands(commandRegistry);
 registerLibraryCommands(commandRegistry);
+registerFileFormatCommands(commandRegistry);
 registerContentCommands(commandRegistry);
 /* The four translation verbs: open a sibling translation, create the missing one, show the
    Languages panel, declare a language. `i18n.switchLocale` is deliberately not among them — it sets

package/src/tabs/transact.ts

@@ -1135,6 +1135,46 @@ export function mutateUpdateMediaNestedStyle(
   recordPatch({ op: "set-style", path });
 }
 
+/**
+ * Drop every level of `stylePath` a deletion has just left empty, DEEPEST FIRST.
+ *
+ * Emptying the leaf usually empties its parent with it — `["table", "th"]` losing its last
+ * declaration leaves `table` holding nothing — and an empty object still serialises, so it reaches
+ * the file, the diff, and every equality check the collab layer makes. Every other style writer in
+ * this module is careful about that; these two were not.
+ *
+ * The walk this replaces went top-down and stopped at the first empty level it found, which is the
+ * one order that cannot work: on the way down the shallow levels are still non-empty _because_ the
+ * leaf it is looking for is inside them, so it deleted the leaf and returned with every ancestor
+ * left behind. Writing then deleting `["table", "th"]` on a node with no style at all produced `{
+ * table: {} }` — a style the author never wrote, on a node that should have had none, because
+ * `ensureNestedStyle` creates the intermediates on the way in.
+ *
+ * @param {JxStyle} root - The object `stylePath[0]` is a key of: a node's `style`, or a media
+ *   block.
+ * @param {string[]} stylePath
+ */
+function pruneEmptyStylePath(root: JxStyle, stylePath: string[]) {
+  // Each entry holds the segment at its own index; an absent (or scalar) one ends the descent.
+  const owners: JxStyle[] = [root];
+  for (const seg of stylePath) {
+    const next = getNestedStyle(owners.at(-1), seg);
+    if (!next) {
+      break;
+    }
+    owners.push(next);
+  }
+  for (let i = owners.length - 2; i >= 0; i--) {
+    const owner = owners[i]!;
+    const seg = stylePath[i]!;
+    const block = getNestedStyle(owner, seg);
+    // Re-read rather than reuse `owners[i + 1]`: the level below may have gone this same loop.
+    if (block && Object.keys(block).length === 0) {
+      delete owner[seg];
+    }
+  }
+}
+
 /**
  * Update a style property at a nested style path (e.g., ["table", "th"]). Creates intermediate
  * objects as needed.
@@ -1163,16 +1203,7 @@ export function mutateUpdateNestedStylePath(
   }
   if (value === undefined || value === "") {
     delete obj[prop];
-    // Clean up empty parent objects
-    let cur: JxStyle | undefined = node.style;
-    for (let i = 0; i < stylePath.length && cur; i++) {
-      const child = getNestedStyle(cur, stylePath[i]!);
-      if (child && Object.keys(child).length === 0) {
-        delete cur[stylePath[i]!];
-        break;
-      }
-      cur = child;
-    }
+    pruneEmptyStylePath(node.style, stylePath);
   } else {
     obj[prop] = value;
   }
@@ -1214,15 +1245,7 @@ export function mutateUpdateMediaNestedStylePath(
   }
   if (value === undefined || value === "") {
     delete obj[prop];
-    let cur: JxStyle | undefined = media;
-    for (let i = 0; i < stylePath.length && cur; i++) {
-      const child = getNestedStyle(cur, stylePath[i]!);
-      if (child && Object.keys(child).length === 0) {
-        delete cur[stylePath[i]!];
-        break;
-      }
-      cur = child;
-    }
+    pruneEmptyStylePath(media, stylePath);
     if (Object.keys(media).length === 0) {
       delete node.style[key];
     }