@fluid-app/fluid-cli-theme-dev 0.1.3 → 0.1.5

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" },
@@ -56,6 +57,12 @@ const RESOURCE_ROUTES = [
     template: "/home/enrollments/%s",
     fallback: "/home/join",
   },
+  {
+    label: "Page",
+    type: "page",
+    template: "/home/pages/%s",
+    fallback: "/home/pages",
+  },
 ] as const;
 
 export function createNavigateCommand(): Command {
@@ -123,12 +130,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 +147,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,20 +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;
-}
+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);
   }
@@ -26,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,
       })),
@@ -37,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);
@@ -65,6 +59,10 @@ export function createPushCommand(): Command {
     .option("-n, --nodelete", "Do not delete remote files missing locally")
     .option("-f, --force", "Skip schema validation")
     .option("-p, --publish", "Publish the theme after pushing")
+    .option(
+      "-u, --unpublished",
+      "Create a new unpublished theme and push to it",
+    )
     .option("--root <path>", "Theme root directory", ".")
     .action(
       async (opts: {
@@ -72,6 +70,7 @@ export function createPushCommand(): Command {
         nodelete?: boolean;
         force?: boolean;
         publish?: boolean;
+        unpublished?: boolean;
         root: string;
       }) => {
         requireToken();
@@ -83,9 +82,33 @@ export function createPushCommand(): Command {
         }
 
         const api = createApiClient();
-        const theme = opts.theme
-          ? await findTheme(api, opts.theme)
-          : await selectTheme(api);
+        let theme: ApplicationTheme;
+
+        if (opts.unpublished) {
+          const { name } = await prompts(
+            {
+              type: "text",
+              name: "name",
+              message: "Name for the new theme",
+            },
+            { onCancel: () => process.exit(130) },
+          );
+          if (!name) {
+            console.error("Theme name is required.");
+            process.exit(1);
+          }
+          const body = await themes.createApplicationTheme(api, {
+            application_theme: { name, status: "draft" },
+          });
+          theme = body.application_theme;
+          console.log(
+            `Created unpublished theme: ${theme.name} (#${theme.id})`,
+          );
+        } else {
+          theme = opts.theme
+            ? await findTheme(api, opts.theme)
+            : await selectTheme(api);
+        }
 
         const syncer = new Syncer(api, theme.id, themeRoot);
         const spinner = ora(`Pushing to ${theme.name} (#${theme.id})…`).start();
@@ -109,7 +132,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/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) {