@stackable-labs/cli-app-extension 1.86.1 → 1.88.0

package/dist/index.js

@@ -567,18 +567,30 @@ var SettingsPrompt = ({ defaultDir, onSubmit, onBack }) => {
 };
 
 // src/lib/manifest-diff.ts
-var diffManifestValues = (localValues, registryValues) => {
-  const localSet = new Set(localValues ?? []);
-  const registrySet = new Set(registryValues);
-  const all = /* @__PURE__ */ new Set([...localSet, ...registrySet]);
-  return [...all].map((value) => {
-    const inLocal = localSet.has(value);
-    const inRegistry = registrySet.has(value);
-    if (!inLocal) {
-      return { value, status: "removed", enabled: false };
-    }
-    return inRegistry ? { value, status: "unchanged", enabled: true } : { value, status: "new", enabled: false };
-  });
+var diffItems = (previous, next, getKey) => {
+  const prevMap = new Map(previous.map((item) => [getKey(item), item]));
+  const nextMap = new Map(next.map((item) => [getKey(item), item]));
+  const allKeys = /* @__PURE__ */ new Set([...prevMap.keys(), ...nextMap.keys()]);
+  const items = [];
+  for (const key of allKeys) {
+    const before = prevMap.get(key);
+    const after = nextMap.get(key);
+    if (before && after) {
+      const changed = JSON.stringify(before) !== JSON.stringify(after);
+      items.push({
+        key,
+        status: changed ? "changed" : "unchanged",
+        enabled: true,
+        before,
+        after
+      });
+    } else if (after) {
+      items.push({ key, status: "new", enabled: false, after });
+    } else {
+      items.push({ key, status: "removed", enabled: false, before });
+    }
+  }
+  return items;
 };
 var statusLabel = (status) => {
   switch (status) {
@@ -586,6 +598,8 @@ var statusLabel = (status) => {
       return "(+ added)";
     case "removed":
       return "(- removed)";
+    case "changed":
+      return "(~ changed)";
     case "unchanged":
       return void 0;
   }
@@ -596,6 +610,8 @@ var statusColor = (status) => {
       return "green";
     case "removed":
       return "red";
+    case "changed":
+      return "yellow";
     case "unchanged":
       return void 0;
   }
@@ -606,27 +622,35 @@ var ManifestReviewPrompt = ({
   onSubmit,
   onBack
 }) => {
-  const [permItems, setPermItems] = useState(() => diffManifestValues(localManifest?.permissions, registryManifest.permissions));
-  const [domainItems, setDomainItems] = useState(() => diffManifestValues(localManifest?.allowedDomains, registryManifest.allowedDomains));
+  const [permItems, setPermItems] = useState(() => diffItems(registryManifest.permissions, localManifest?.permissions ?? [], (v) => v));
+  const [domainItems, setDomainItems] = useState(() => diffItems(registryManifest.allowedDomains, localManifest?.allowedDomains ?? [], (v) => v));
+  const [schemaItems, setSchemaItems] = useState(() => diffItems(registryManifest.settingsSchema ?? [], localManifest?.settingsSchema ?? [], (f) => f.identifier));
   const [cursor, setCursor] = useState(0);
-  const totalItems = permItems.length + domainItems.length;
-  const cursorInPerms = cursor < permItems.length;
-  const cursorInDomains = cursor >= permItems.length;
+  const domainSectionStart = permItems.length;
+  const schemaSectionStart = domainSectionStart + domainItems.length;
+  const totalItems = permItems.length + domainItems.length + schemaItems.length;
+  const cursorInPerms = cursor < domainSectionStart;
+  const cursorInDomains = cursor >= domainSectionStart && cursor < schemaSectionStart;
+  const cursorInSchema = cursor >= schemaSectionStart;
   const toggle = (index) => {
-    if (index < permItems.length) {
+    if (index < domainSectionStart) {
       setPermItems((prev) => prev.map((item, i) => i === index ? { ...item, enabled: !item.enabled } : item));
-    } else {
-      const domainIndex = index - permItems.length;
+    } else if (index < schemaSectionStart) {
+      const domainIndex = index - domainSectionStart;
       setDomainItems((prev) => prev.map((item, i) => i === domainIndex ? { ...item, enabled: !item.enabled } : item));
+    } else {
+      const schemaIndex = index - schemaSectionStart;
+      setSchemaItems((prev) => prev.map((item, i) => i === schemaIndex ? { ...item, enabled: !item.enabled } : item));
     }
   };
   const handleSubmit = () => {
+    const enabledSchema = schemaItems.filter((i) => i.enabled);
     onSubmit({
-      permissions: permItems.filter((i) => i.enabled).map((i) => i.value),
-      allowedDomains: domainItems.filter((i) => i.enabled).map((i) => i.value)
+      permissions: permItems.filter((i) => i.enabled).map((i) => i.key),
+      allowedDomains: domainItems.filter((i) => i.enabled).map((i) => i.key),
+      settingsSchema: enabledSchema.map((i) => i.after ?? i.before)
     });
   };
-  const domainSectionStart = permItems.length;
   useInput((input, key) => {
     if (key.downArrow) {
       setCursor((c) => Math.min(c + 1, totalItems - 1));
@@ -641,12 +665,18 @@ var ManifestReviewPrompt = ({
         if (c < domainSectionStart && domainItems.length > 0) {
           return domainSectionStart;
         }
+        if (c < schemaSectionStart && schemaItems.length > 0) {
+          return schemaSectionStart;
+        }
         return c;
       });
       return;
     }
     if (key.tab && key.shift) {
       setCursor((c) => {
+        if (c >= schemaSectionStart && domainItems.length > 0) {
+          return domainSectionStart;
+        }
         if (c >= domainSectionStart) {
           return 0;
         }
@@ -667,9 +697,40 @@ var ManifestReviewPrompt = ({
     return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
       /* @__PURE__ */ jsx(Text, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
       /* @__PURE__ */ jsx(Text, { color: item.enabled ? "green" : "gray", children: item.enabled ? "\u25C9" : "\u25CB" }),
-      /* @__PURE__ */ jsx(Text, { bold: isCursor, children: item.value }),
+      /* @__PURE__ */ jsx(Text, { bold: isCursor, children: item.key }),
       statusLabel(item.status) && /* @__PURE__ */ jsx(Text, { color: statusColor(item.status), dimColor: true, children: statusLabel(item.status) })
-    ] }, item.value);
+    ] }, item.key);
+  };
+  const renderSchemaItem = (item, index) => {
+    const globalIndex = schemaSectionStart + index;
+    const isCursor = globalIndex === cursor;
+    const field = item.after ?? item.before;
+    const detail = field ? `${field.type}${field.secret ? ", secret" : ""}` : "";
+    let changeDetail;
+    if (item.status === "changed" && item.before && item.after) {
+      const parts = [];
+      if (item.before.type !== item.after.type) {
+        parts.push(`type ${item.before.type} \u2192 ${item.after.type}`);
+      }
+      if (item.before.secret !== item.after.secret) {
+        parts.push(`secret ${!!item.before.secret} \u2192 ${!!item.after.secret}`);
+      }
+      if (item.before.label !== item.after.label) {
+        parts.push(`label "${item.before.label}" \u2192 "${item.after.label}"`);
+      }
+      if (JSON.stringify(item.before.options) !== JSON.stringify(item.after.options)) {
+        parts.push("options changed");
+      }
+      changeDetail = parts.length > 0 ? parts.join(", ") : "properties changed";
+    }
+    return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+      /* @__PURE__ */ jsx(Text, { color: isCursor ? "cyan" : void 0, children: isCursor ? "\u276F" : " " }),
+      /* @__PURE__ */ jsx(Text, { color: item.enabled ? "green" : "gray", children: item.enabled ? "\u25C9" : "\u25CB" }),
+      /* @__PURE__ */ jsx(Text, { bold: isCursor, children: item.key }),
+      detail && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `(${detail})` }),
+      statusLabel(item.status) && /* @__PURE__ */ jsx(Text, { color: statusColor(item.status), dimColor: true, children: statusLabel(item.status) }),
+      changeDetail && /* @__PURE__ */ jsx(Text, { color: "yellow", dimColor: true, children: changeDetail })
+    ] }, item.key);
   };
   return /* @__PURE__ */ jsx(
     StepShell,
@@ -689,9 +750,16 @@ var ManifestReviewPrompt = ({
         /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
           /* @__PURE__ */ jsx(Text, { dimColor: !cursorInDomains, bold: cursorInDomains, children: "Allowed Domains".padEnd(14) }),
           /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [
-            domainItems.length > 0 ? domainItems.map((item, i) => renderItem(item, i + permItems.length)) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  (none)" }),
+            domainItems.length > 0 ? domainItems.map((item, i) => renderItem(item, i + domainSectionStart)) : /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  (none)" }),
             cursorInDomains && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  (space to toggle)" })
           ] })
+        ] }),
+        schemaItems.length > 0 && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx(Text, { dimColor: !cursorInSchema, bold: cursorInSchema, children: "Instance Configuration".padEnd(14) }),
+          /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [
+            schemaItems.map((item, i) => renderSchemaItem(item, i)),
+            cursorInSchema && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  (space to toggle)" })
+          ] })
         ] })
       ] })
     }
@@ -2078,6 +2146,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
   const [localManifest, setLocalManifest] = useState(null);
   const [confirmedPermissions, setConfirmedPermissions] = useState([]);
   const [confirmedAllowedDomains, setConfirmedAllowedDomains] = useState([]);
+  const [confirmedSettingsSchema, setConfirmedSettingsSchema] = useState([]);
   const [userEditedAllowedDomains, setUserEditedAllowedDomains] = useState([]);
   const [outputDir, setOutputDir] = useState("");
   const [studioProject, setStudioProject] = useState(null);
@@ -2315,7 +2384,8 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
             version: resolvedVersion,
             targets,
             permissions: confirmedPermissions,
-            allowedDomains: confirmedAllowedDomains
+            allowedDomains: confirmedAllowedDomains,
+            ...confirmedSettingsSchema.length > 0 && { settingsSchema: confirmedSettingsSchema }
           },
           bundleUrl: bundleUrl || void 0,
           enabled
@@ -2565,6 +2635,7 @@ var App = ({ command, token, userId, orgId, initialName, initialExtensionId, opt
           onSubmit: (result) => {
             setConfirmedPermissions(result.permissions);
             setConfirmedAllowedDomains(result.allowedDomains);
+            setConfirmedSettingsSchema(result.settingsSchema);
             goForward();
           },
           onBack: goBack
@@ -3121,7 +3192,7 @@ var isValidManifest = (data) => {
     return false;
   }
   const m = data;
-  return typeof m.name === "string" && m.name.length > 0 && typeof m.version === "string" && Array.isArray(m.targets) && Array.isArray(m.permissions) && Array.isArray(m.allowedDomains);
+  return typeof m.name === "string" && m.name.length > 0 && typeof m.version === "string" && Array.isArray(m.targets) && Array.isArray(m.permissions) && Array.isArray(m.allowedDomains) && (m.settingsSchema === void 0 || Array.isArray(m.settingsSchema));
 };
 var isExtensionProject = (dir) => {
   const manifestPath = join(dir, "packages/extension/public/manifest.json");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.86.1",
+  "version": "1.88.0",
   "type": "module",
   "private": false,
   "bin": {