@fluid-app/fluid-cli-theme-dev 0.1.2 → 0.1.4

package/src/commands/dev.ts

@@ -3,12 +3,12 @@ import { requireToken, createApiClient } from "../api.js";
 import { getPluginState, setPluginState } from "../plugin-state.js";
 import { ThemeRoot } from "../theme/root.js";
 import { startDevServer } from "../theme/dev-server/index.js";
+import { themes, type components } from "@fluid-app/themes-api-client";
 
-interface ApplicationTheme {
-  id: number;
-  name: string;
-  company: string;
-  editor_url?: string;
+type ApplicationTheme = components["schemas"]["ApplicationTheme"];
+
+interface CompanyMe {
+  data: { company: { subdomain?: string; name?: string } };
 }
 
 async function ensureDevTheme(
@@ -16,9 +16,7 @@ async function ensureDevTheme(
   identifier?: string,
 ): Promise<ApplicationTheme> {
   if (identifier) {
-    const body = await api.get<{ application_themes: ApplicationTheme[] }>(
-      "/api/application_themes",
-    );
+    const body = await themes.listApplicationThemes(api);
     const found =
       (body.application_themes ?? []).find(
         (t) => String(t.id) === identifier,
@@ -37,9 +35,7 @@ async function ensureDevTheme(
   const { devThemeId } = getPluginState();
   if (devThemeId) {
     try {
-      const body = await api.get<{ application_theme: ApplicationTheme }>(
-        `/api/application_themes/${devThemeId}`,
-      );
+      const body = await themes.getApplicationTheme(api, devThemeId);
       if (body.application_theme) {
         console.log(`Using existing dev theme #${devThemeId}`);
         return body.application_theme;
@@ -58,11 +54,9 @@ async function ensureDevTheme(
       50,
     );
 
-  const body = await api.post<{ application_theme: ApplicationTheme }>(
-    "/api/application_themes",
-    { application_theme: { name, role: "development" } },
-  );
-
+  const body = await themes.createApplicationTheme(api, {
+    application_theme: { name, status: "development" },
+  });
   const theme = body.application_theme;
   setPluginState({ devThemeId: theme.id, devThemeName: theme.name });
   console.log(`Created dev theme: ${theme.name} (#${theme.id})`);
@@ -100,8 +94,28 @@ export function createDevCommand(): Command {
           process.exit(1);
         }
 
+        const port = Number(opts.port);
+        if (!Number.isInteger(port) || port < 1 || port > 65535) {
+          console.error(
+            `Invalid port: '${opts.port}'. Must be an integer between 1 and 65535.`,
+          );
+          process.exit(1);
+        }
+
         const reloadMode = opts.liveReload === "off" ? "off" : "full-page";
         const api = createApiClient();
+
+        const companyRes = await api.get<CompanyMe>(
+          "/api/company/v1/companies/me",
+        );
+        const company = companyRes.data?.company?.subdomain;
+        if (!company) {
+          console.error(
+            "Could not determine company subdomain. Make sure your token is valid.",
+          );
+          process.exit(1);
+        }
+
         const theme = await ensureDevTheme(api, opts.theme);
 
         let stop: (() => void) | undefined;
@@ -113,21 +127,13 @@ export function createDevCommand(): Command {
         process.on("SIGINT", cleanup);
         process.on("SIGTERM", cleanup);
 
-        const port = Number(opts.port);
-        if (!Number.isInteger(port) || port < 1 || port > 65535) {
-          console.error(
-            `Invalid port: '${opts.port}'. Must be an integer between 1 and 65535.`,
-          );
-          process.exit(1);
-        }
-
         stop = await startDevServer(
           api,
           {
             id: theme.id,
             name: theme.name,
-            company: theme.company,
-            editorUrl: theme.editor_url,
+            company,
+            editorUrl: theme.editor_url ?? undefined,
           },
           themeRoot,
           { host: opts.host, port, reloadMode },

package/src/commands/navigate.ts

@@ -2,6 +2,7 @@ import { Command } from "commander";
 import prompts from "prompts";
 import { requireToken, createApiClient } from "../api.js";
 import { getPluginState } from "../plugin-state.js";
+import { themes } from "@fluid-app/themes-api-client";
 
 const STATIC_ROUTES = [
   { label: "Home", path: "/home" },
@@ -123,12 +124,11 @@ export function createNavigateCommand(): Command {
         path = dest;
       } else {
         const api = createApiClient();
-        const body = await api.get<{
-          available_themeables: Array<{ slug: string; title?: string }>;
-        }>(`/api/application_themes/${themeId}/available_themeables`, {
-          themeable: dest.resourceType,
-          per_page: 50,
-        });
+        const body = await themes.getApplicationThemeAvailableThemeables(
+          api,
+          themeId,
+          { themeable: dest.resourceType, per_page: 50 },
+        );
         const resources = body.available_themeables ?? [];
 
         if (!resources.length) {
@@ -141,7 +141,7 @@ export function createNavigateCommand(): Command {
               name: "slug",
               message: `Select a ${dest.label.toLowerCase()}`,
               choices: resources.map((r) => ({
-                title: r.title ?? r.slug,
+                title: r.title ?? r.slug ?? "Untitled",
                 value: r.slug,
               })),
             },

package/src/commands/pull.ts

@@ -4,29 +4,25 @@ import prompts from "prompts";
 import { requireToken, createApiClient } from "../api.js";
 import { ThemeRoot } from "../theme/root.js";
 import { Syncer } from "../theme/syncer.js";
+import { themes, type components } from "@fluid-app/themes-api-client";
 
-interface ApplicationTheme {
-  id: number;
-  name: string;
-}
+type ApplicationTheme = components["schemas"]["ApplicationTheme"];
 
 async function selectOrFindTheme(
   api: ReturnType<typeof createApiClient>,
   identifier?: string,
 ): Promise<ApplicationTheme> {
-  const body = await api.get<{ application_themes: ApplicationTheme[] }>(
-    "/api/application_themes",
-  );
-  const themes = body.application_themes ?? [];
-  if (!themes.length) {
+  const body = await themes.listApplicationThemes(api);
+  const themeList = body.application_themes ?? [];
+  if (!themeList.length) {
     console.error("No themes found.");
     process.exit(1);
   }
 
   if (identifier) {
     const found =
-      themes.find((t) => String(t.id) === identifier) ??
-      themes.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
+      themeList.find((t) => String(t.id) === identifier) ??
+      themeList.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
     if (!found) {
       console.error(`No theme found with identifier: ${identifier}`);
       process.exit(1);
@@ -39,7 +35,7 @@ async function selectOrFindTheme(
       type: "select",
       name: "id",
       message: "Select a theme to pull",
-      choices: themes.map((t) => ({
+      choices: themeList.map((t) => ({
         title: `${t.name} (#${t.id})`,
         value: t.id,
       })),
@@ -50,7 +46,7 @@ async function selectOrFindTheme(
     console.error("No theme selected.");
     process.exit(1);
   }
-  return themes.find((t) => t.id === id)!;
+  return themeList.find((t) => t.id === id)!;
 }
 
 export function createPullCommand(): Command {

package/src/commands/push.ts

@@ -4,21 +4,16 @@ import prompts from "prompts";
 import { requireToken, createApiClient } from "../api.js";
 import { ThemeRoot } from "../theme/root.js";
 import { Syncer } from "../theme/syncer.js";
+import { themes, type components } from "@fluid-app/themes-api-client";
 
-interface ApplicationTheme {
-  id: number;
-  name: string;
-  company: string;
-}
+type ApplicationTheme = components["schemas"]["ApplicationTheme"];
 
 async function selectTheme(
   api: ReturnType<typeof createApiClient>,
 ): Promise<ApplicationTheme> {
-  const body = await api.get<{ application_themes: ApplicationTheme[] }>(
-    "/api/application_themes",
-  );
-  const themes = body.application_themes ?? [];
-  if (!themes.length) {
+  const body = await themes.listApplicationThemes(api);
+  const themeList = body.application_themes ?? [];
+  if (!themeList.length) {
     console.error("No themes found.");
     process.exit(1);
   }
@@ -27,7 +22,7 @@ async function selectTheme(
       type: "select",
       name: "id",
       message: "Select a theme to push to",
-      choices: themes.map((t) => ({
+      choices: themeList.map((t) => ({
         title: `${t.name} (#${t.id})`,
         value: t.id,
       })),
@@ -38,20 +33,18 @@ async function selectTheme(
     console.error("No theme selected.");
     process.exit(1);
   }
-  return themes.find((t) => t.id === id)!;
+  return themeList.find((t) => t.id === id)!;
 }
 
 async function findTheme(
   api: ReturnType<typeof createApiClient>,
   identifier: string,
 ): Promise<ApplicationTheme> {
-  const body = await api.get<{ application_themes: ApplicationTheme[] }>(
-    "/api/application_themes",
-  );
-  const themes = body.application_themes ?? [];
+  const body = await themes.listApplicationThemes(api);
+  const themeList = body.application_themes ?? [];
   const found =
-    themes.find((t) => String(t.id) === identifier) ??
-    themes.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
+    themeList.find((t) => String(t.id) === identifier) ??
+    themeList.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
   if (!found) {
     console.error(`No theme found with identifier: ${identifier}`);
     process.exit(1);
@@ -110,7 +103,7 @@ export function createPushCommand(): Command {
         if (opts.publish) {
           const pubSpinner = ora("Publishing theme…").start();
           try {
-            await api.post(`/api/application_themes/${theme.id}/publish`);
+            await themes.publishApplicationTheme(api, theme.id);
             pubSpinner.succeed("Theme published.");
           } catch (e) {
             pubSpinner.fail(`Publish failed: ${e}`);

package/src/theme/root.ts

@@ -1,5 +1,5 @@
 import { readdirSync, statSync } from "node:fs";
-import { join, resolve } from "node:path";
+import { isAbsolute, join, resolve } from "node:path";
 import { ThemeFile } from "./file.js";
 import { FluidIgnore } from "./fluid-ignore.js";
 
@@ -32,7 +32,10 @@ export class ThemeRoot {
 
   file(pathOrFile: string | ThemeFile): ThemeFile {
     if (pathOrFile instanceof ThemeFile) return pathOrFile;
-    return new ThemeFile(join(this.root, pathOrFile), this.root);
+    const abs = isAbsolute(pathOrFile)
+      ? pathOrFile
+      : join(this.root, pathOrFile);
+    return new ThemeFile(abs, this.root);
   }
 
   private glob(dir: string): ThemeFile[] {

package/src/theme/syncer.ts

@@ -2,14 +2,9 @@ import { sep } from "node:path";
 import type { ApiClient } from "../api.js";
 import type { ThemeFile } from "./file.js";
 import type { ThemeRoot } from "./root.js";
+import { themes, type components } from "@fluid-app/themes-api-client";
 
-export interface RemoteResource {
-  key: string;
-  checksum: string;
-  content?: string;
-  url?: string;
-  resource_type: string;
-}
+type RemoteResource = components["schemas"]["ApplicationThemeResource"];
 
 export interface SyncResult {
   uploaded: number;
@@ -30,15 +25,13 @@ export class Syncer {
   // ─── Checksum Management ──────────────────────────────────────────────────
 
   async fetchChecksums(): Promise<void> {
-    const body = await this.api.get<{
-      application_theme_resources: RemoteResource[];
-    }>(`/api/application_themes/${this.themeId}/resources`);
+    const body = await themes.listThemeResources(this.api, this.themeId);
     this.updateChecksums(body.application_theme_resources ?? []);
   }
 
   private updateChecksums(resources: RemoteResource[]): void {
     for (const r of resources) {
-      if (r.key) this.checksums.set(r.key, r.checksum);
+      if (r.key && r.checksum) this.checksums.set(r.key, r.checksum);
     }
     for (const key of this.checksums.keys()) {
       if (this.checksums.has(`${key}.liquid`)) this.checksums.delete(key);
@@ -56,23 +49,19 @@ export class Syncer {
   // ─── Upload ───────────────────────────────────────────────────────────────
 
   async uploadFile(file: ThemeFile): Promise<void> {
-    const path = `/api/application_themes/${this.themeId}/resources`;
     if (file.isText) {
-      await this.api.put(path, {
+      await themes.updateThemeResource(this.api, this.themeId, {
         application_theme_resource: {
           key: file.relativePath,
           content: file.read(),
         },
       });
     } else {
-      await this.uploadBinaryFile(file, path);
+      await this.uploadBinaryFile(file);
     }
   }
 
-  private async uploadBinaryFile(
-    file: ThemeFile,
-    resourcePath: string,
-  ): Promise<void> {
+  private async uploadBinaryFile(file: ThemeFile): Promise<void> {
     // Step 1: Create DAM placeholder
     const placeholderBody = await this.api.post<{
       asset: { id: number; canonical_path: string };
@@ -147,7 +136,7 @@ export class Syncer {
     }>("/api/dam/assets/backfill_imagekit", backfillPayload);
 
     // Step 5: Associate with theme resource
-    await this.api.put(resourcePath, {
+    await themes.updateThemeResource(this.api, this.themeId, {
       application_theme_resource: {
         key: file.relativePath,
         dam_asset: {
@@ -181,8 +170,8 @@ export class Syncer {
   // ─── Delete ───────────────────────────────────────────────────────────────
 
   async deleteRemoteFile(relativePath: string): Promise<void> {
-    await this.api.delete(`/api/application_themes/${this.themeId}/resources`, {
-      body: { application_theme_resource: { key: relativePath } },
+    await themes.deleteThemeResource(this.api, this.themeId, {
+      application_theme_resource: { key: relativePath },
     });
     this.checksums.delete(relativePath);
   }
@@ -190,11 +179,10 @@ export class Syncer {
   // ─── Download ─────────────────────────────────────────────────────────────
 
   async downloadAll(): Promise<RemoteResource[]> {
-    const body = await this.api.get<{
-      application_theme_resources: RemoteResource[];
-    }>(`/api/application_themes/${this.themeId}/resources`);
-    this.updateChecksums(body.application_theme_resources ?? []);
-    return body.application_theme_resources ?? [];
+    const body = await themes.listThemeResources(this.api, this.themeId);
+    const resources = body.application_theme_resources ?? [];
+    this.updateChecksums(resources);
+    return resources;
   }
 
   async downloadBinaryAsset(url: string): Promise<Buffer> {
@@ -280,8 +268,15 @@ export class Syncer {
         if (resource.resource_type === "FileResource" && resource.url) {
           const buf = await this.downloadBinaryAsset(resource.url);
           file.write(buf);
-        } else if (resource.content !== undefined) {
-          file.write(resource.content);
+        } else if (
+          resource.content !== undefined &&
+          resource.content !== null
+        ) {
+          const content =
+            typeof resource.content === "string"
+              ? resource.content
+              : JSON.stringify(resource.content);
+          file.write(content);
         }
         result.downloaded++;
       } catch (e) {