@cccsaurora/clue-ui 1.3.0-dev.403 → 1.3.0-dev.404

package/components/actions/formats/index.js

@@ -3,7 +3,7 @@ import { Stack } from "@mui/material";
 import { J as JSONViewer } from "../../../index-DUEubgWN.js";
 import Markdown from "../../display/markdown/index.js";
 import ErrorBoundary from "../../ErrorBoundary.js";
-import { u as usePluginStore, c as clueUIPluginStore } from "../../../store-DMdRx9g0.js";
+import { u as usePluginStore, c as clueUIPluginStore } from "../../../store-B9sjQbcS.js";
 import { useTranslation } from "react-i18next";
 const Result = ({
   pluginName,

package/components/display/graph/index.js

@@ -216,7 +216,8 @@ const Graph = ({ graph, sx = {} }) => {
               "& .path": {
                 transition: theme.transitions.create(["opacity"], {
                   duration: theme.transitions.duration.short
-                })
+                }),
+                transform: "translateY(-10px)"
               },
               "& .node": {
                 cursor: "pointer",

package/components/fetchers/FetcherResultView.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack } from "@mui/material";
 import { J as JSONViewer } from "../../index-DUEubgWN.js";
 import Markdown from "../display/markdown/index.js";
-import { u as usePluginStore, c as clueUIPluginStore } from "../../store-DMdRx9g0.js";
+import { u as usePluginStore, c as clueUIPluginStore } from "../../store-B9sjQbcS.js";
 import { useTranslation } from "react-i18next";
 import ErrorBoundary from "../ErrorBoundary.js";
 const FetcherResultView = ({

package/en/translation.json

@@ -116,6 +116,13 @@
   "route.login.button.oauth.keycloak": "Keycloak",
   "route.plugin": "Plugin",
   "route.plugin.active": "Active",
+  "route.plugins": "UI Plugins",
+  "route.plugins.description": "Test out Clue UI Plugins",
+  "route.plugins.format": "Plugin supported format",
+  "route.plugins.input": "Enter some input to render with the Plugin",
+  "route.plugins.plugin": "Plugin Name",
+  "route.plugins.submit": "Show Plugin",
+  "route.plugins.validation.select.plugin": "Select a plugin name",
   "selected": "selected",
   "sources": "Sources",
   "sources.select.all": "Select All Sources",

package/fr/translation.json

@@ -116,6 +116,13 @@
   "route.login.button.oauth.keycloak": "Keycloak",
   "route.plugin": "Plugin",
   "route.plugin.active": "Actif",
+  "route.plugins": "Plugins d'IU",
+  "route.plugins.description": "Test out Clue UI Plugins",
+  "route.plugins.format": "Plugin supported format",
+  "route.plugins.input": "Enter some input to render with the Plugin",
+  "route.plugins.plugin": "Plugin Name",
+  "route.plugins.submit": "Show Plugin",
+  "route.plugins.validation.select.plugin": "Select a plugin name",
   "selected": "sélectionné(s)",
   "sources": "Sources",
   "sources.select.all": "Sélectionner toutes les sources",

package/hooks/ClueUIPluginContext.d.ts

@@ -1,4 +1,5 @@
 import { ClueUIPluginDefinition } from "../main";
+import { ClueUIPluginStore } from "../plugins/store";
 import { FC, PropsWithChildren } from 'react';
 
 export type ClueUIPluginProviderProps = {
@@ -17,5 +18,9 @@ export type ClueUIPluginProviderProps = {
      */
     excludeBuiltInPlugins?: boolean;
 };
+export type ClueUIPluginContextType = {
+    clueUIPluginStore: ClueUIPluginStore;
+};
+export declare const ClueUIPluginContext: import('react').Context<ClueUIPluginContextType>;
 declare const ClueUIPluginProvider: FC<PropsWithChildren<ClueUIPluginProviderProps>>;
 export { ClueUIPluginProvider as ClueUIPluginProvider };

package/hooks/ClueUIPluginContext.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import ClueUIPluginsRegistry from "../plugins/registry.js";
-import { c as clueUIPluginStore, P as PluginProvider } from "../store-DMdRx9g0.js";
-import { useState, useEffect } from "react";
+import { c as clueUIPluginStore, P as PluginProvider } from "../store-B9sjQbcS.js";
+import { createContext, useState, useEffect } from "react";
+const ClueUIPluginContext = createContext(null);
 const ClueUIPluginProvider = ({
   plugins,
   excludePlugins,
@@ -50,8 +51,9 @@ const ClueUIPluginProvider = ({
     });
     return () => abortController.abort();
   }, [excludeBuiltInPlugins, excludePlugins, plugins]);
-  return /* @__PURE__ */ jsx(PluginProvider, { pluginStore, children });
+  return /* @__PURE__ */ jsx(ClueUIPluginContext.Provider, { value: { clueUIPluginStore }, children: /* @__PURE__ */ jsx(PluginProvider, { pluginStore, children }) });
 };
 export {
+  ClueUIPluginContext,
   ClueUIPluginProvider
 };

package/hooks/useClueUIPlugins.d.ts

@@ -0,0 +1,4 @@
+import { ClueUIPluginContextType } from './ClueUIPluginContext';
+
+declare const useClueUIPlugins: () => ClueUIPluginContextType;
+export default useClueUIPlugins;

package/hooks/useClueUIPlugins.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ClueUIPluginContext } from "./ClueUIPluginContext.js";
+const useClueUIPlugins = () => {
+  const context = useContext(ClueUIPluginContext);
+  if (!context) {
+    throw new Error("useClueUIPlugins must be used within a ClueUIPluginProvider");
+  }
+  return context;
+};
+export {
+  useClueUIPlugins as default
+};

package/package.json

@@ -67,7 +67,7 @@
   },
   "type": "module",
   "types": "main.d.ts",
-  "version": "1.3.0-dev.403",
+  "version": "1.3.0-dev.404",
   "exports": {
     ".": "./main.js",
     "./index.css": "./index.css",
@@ -120,6 +120,7 @@
     "./plugins/graph/*": "./plugins/graph/*.js",
     "./plugins/graph": "./plugins/graph/index.js",
     "./plugins/file/*": "./plugins/file/*.js",
-    "./plugins/file": "./plugins/file/index.js"
+    "./plugins/file": "./plugins/file/index.js",
+    "./plugins/graph/example/*": "./plugins/graph/example/*.js"
   }
 }

package/plugins/ClueUIPlugin.d.ts

@@ -9,9 +9,11 @@ export type RenderResultProps = {
     [additionalProps: string]: any;
 };
 export interface RenderFetcherResultProps extends RenderResultProps {
+    pluginId?: string;
     result: FetcherResult;
 }
 export interface RenderActionResultProps extends RenderResultProps {
+    pluginId?: string;
     result: WithActionData<ActionResult>;
 }
 declare abstract class ClueUIPlugin implements IPlugin {
@@ -35,6 +37,8 @@ declare abstract class ClueUIPlugin implements IPlugin {
     actionResult?(_props: RenderActionResultProps): ReactNode;
     fetcherResult?(_props: RenderFetcherResultProps): ReactNode;
     localization(_i18n: I18N): void;
-    documentation(md: string): string;
+    exampleInput(): string | undefined;
+    editorLanguage(): string | undefined;
+    documentation(): string | undefined;
 }
 export default ClueUIPlugin;

package/plugins/ClueUIPlugin.js

@@ -180,6 +180,13 @@ const translationEN = {
   "route.login.button.oauth.keycloak": "Keycloak",
   "route.plugin": "Plugin",
   "route.plugin.active": "Active",
+  "route.plugins": "UI Plugins",
+  "route.plugins.description": "Test out Clue UI Plugins",
+  "route.plugins.format": "Plugin supported format",
+  "route.plugins.input": "Enter some input to render with the Plugin",
+  "route.plugins.plugin": "Plugin Name",
+  "route.plugins.submit": "Show Plugin",
+  "route.plugins.validation.select.plugin": "Select a plugin name",
   selected: selected$1,
   sources: sources$1,
   "sources.select.all": "Select All Sources",
@@ -329,6 +336,13 @@ const translationFR = {
   "route.login.button.oauth.keycloak": "Keycloak",
   "route.plugin": "Plugin",
   "route.plugin.active": "Actif",
+  "route.plugins": "Plugins d'IU",
+  "route.plugins.description": "Test out Clue UI Plugins",
+  "route.plugins.format": "Plugin supported format",
+  "route.plugins.input": "Enter some input to render with the Plugin",
+  "route.plugins.plugin": "Plugin Name",
+  "route.plugins.submit": "Show Plugin",
+  "route.plugins.validation.select.plugin": "Select a plugin name",
   selected,
   sources,
   "sources.select.all": "Sélectionner toutes les sources",
@@ -372,7 +386,16 @@ i18n.use(LanguageDetector).use(initReactI18next).init({
   },
   resources
 });
-const INTERNAL_FUNCTIONS = ["constructor", "getPluginName", "getDependencies", "init", "activate", "deactivate"];
+const INTERNAL_FUNCTIONS = [
+  "constructor",
+  "getPluginFormat",
+  "getPluginActionIds",
+  "getPluginFetcherIds",
+  "getDependencies",
+  "init",
+  "activate",
+  "deactivate"
+];
 class ClueUIPlugin {
   constructor() {
     __publicField(this, "actionIds");
@@ -433,8 +456,14 @@ class ClueUIPlugin {
   }
   localization(_i18n) {
   }
-  documentation(md) {
-    return md;
+  exampleInput() {
+    return void 0;
+  }
+  editorLanguage() {
+    return void 0;
+  }
+  documentation() {
+    return void 0;
   }
 }
 export {

package/plugins/graph/example/tree.json.d.ts

@@ -0,0 +1,91 @@
+declare const _default: {
+  "id": "tree",
+  "metadata": {
+    "type": "nested"
+  },
+  "data": [
+    [{ "id": "Chaos", "edges": ["Gaea"] }],
+    [
+      { "id": "Gaea", "edges": ["Chaos"] },
+      { "id": "Uranus", "edges": ["Gaea"] }
+    ],
+    [
+      { "id": "Oceanus", "edges": ["Gaea", "Uranus"], "icons": ["bug"] },
+      { "id": "Thethys", "edges": ["Gaea", "Uranus"] },
+      { "id": "Pontus", "edges": ["Dionne"] },
+      { "id": "Rhea", "edges": ["Gaea", "Uranus"] },
+      { "id": "Cronus", "edges": ["Gaea", "Uranus"] },
+      { "id": "Coeus", "edges": ["Gaea", "Uranus"] },
+      { "id": "Phoebe", "edges": ["Gaea", "Uranus"] },
+      { "id": "Crius", "edges": ["Gaea", "Uranus"] },
+      { "id": "Hyperion", "edges": ["Gaea", "Uranus"] },
+      { "id": "Iapetus", "edges": ["Gaea", "Uranus"] },
+      { "id": "Thea", "edges": ["Gaea", "Uranus"] },
+      { "id": "Themis", "edges": ["Gaea", "Uranus"] },
+      { "id": "Mnemosyne", "edges": ["Gaea", "Uranus"] }
+    ],
+    [
+      { "id": "Doris", "edges": ["Oceanus", "Thethys"] },
+      { "id": "Neures", "edges": ["Pontus", "Gaea"] },
+      { "id": "Dionne" },
+      { "id": "Demeter", "edges": ["Rhea", "Cronus"] },
+      { "id": "Hades", "edges": ["Rhea", "Cronus"] },
+      { "id": "Hera", "edges": ["Rhea", "Cronus"] },
+      { "id": "Alcmene" },
+      { "id": "Zeus", "edges": ["Rhea", "Cronus"] },
+      { "id": "Eris" },
+      { "id": "Leto", "edges": ["Coeus", "Phoebe"] },
+      { "id": "Amphitrite" },
+      { "id": "Medusa" },
+      { "id": "Poseidon", "edges": ["Rhea", "Cronus"] },
+      { "id": "Hestia", "edges": ["Rhea", "Cronus"] }
+    ],
+    [
+      { "id": "Thetis", "edges": ["Zeus", "Doris", "Neures"] },
+      { "id": "Peleus" },
+      { "id": "Anchises" },
+      { "id": "Adonis" },
+      { "id": "Aphrodite", "edges": ["Zeus", "Dionne"] },
+      { "id": "Persephone", "edges": ["Zeus", "Demeter"] },
+      { "id": "Ares", "edges": ["Zeus", "Hera"] },
+      { "id": "Hephaestus", "edges": ["Zeus", "Hera"] },
+      { "id": "Hebe", "edges": ["Zeus", "Hera", "Hestia"] },
+      { "id": "Hercules", "edges": ["Zeus", "Alcmene"] },
+      { "id": "Megara" },
+      { "id": "Deianira" },
+      { "id": "Eileithya", "edges": ["Zeus", "Hera"] },
+      { "id": "Ate", "edges": ["Zeus", "Eris"] },
+      { "id": "Leda" },
+      { "id": "Athena", "edges": ["Zeus"] },
+      { "id": "Apollo", "edges": ["Zeus", "Leto"] },
+      { "id": "Artemis", "edges": ["Zeus", "Leto"] },
+      { "id": "Triton", "edges": ["Poseidon", "Amphitrite"] },
+      { "id": "Pegasus", "edges": ["Poseidon", "Medusa"] },
+      { "id": "Orion", "edges": ["Poseidon"] },
+      { "id": "Polyphemus", "edges": ["Poseidon"] }
+    ],
+    [
+      { "id": "Deidamia" },
+      { "id": "Achilles", "edges": ["Peleus", "Thetis"] },
+      { "id": "Creusa" },
+      { "id": "Aeneas", "edges": ["Anchises", "Aphrodite"] },
+      { "id": "Lavinia", "edges": ["Lavinia(2)"] },
+      { "id": "Lavinia(2)", "edges": ["Lavinia"] },
+      { "id": "Eros", "edges": ["Hephaestus", "Aphrodite"] },
+      { "id": "Helen", "edges": ["Leda", "Zeus"] },
+      { "id": "Menelaus", "edges": ["Lavinia"] },
+      { "id": "Polydueces", "edges": ["Leda", "Zeus"] }
+    ],
+    [
+      { "id": "Andromache" },
+      { "id": "Neoptolemus", "edges": ["Deidamia", "Achilles"] },
+      { "id": "Aeneas(2)", "edges": ["Creusa", "Aeneas"] },
+      { "id": "Pompilius", "edges": ["Creusa", "Aeneas"] },
+      { "id": "Iulus", "edges": ["Lavinia", "Aeneas"] },
+      { "id": "Hermione", "edges": ["Helen", "Menelaus"] }
+    ]
+  ]
+}
+;
+
+export default _default;

package/plugins/graph/index.d.ts

@@ -13,5 +13,8 @@ declare class GraphPlugin extends ClueUIPlugin {
     fetcherResult({ result }: {
         result: FetcherResult;
     }): import("react/jsx-runtime").JSX.Element;
+    editorLanguage(): string;
+    exampleInput(): string;
+    documentation(): string;
 }
 export default GraphPlugin;

package/plugins/graph/index.js

@@ -4,6 +4,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { jsx } from "react/jsx-runtime";
 import Graph from "../../components/display/graph/index.js";
 import ClueUIPlugin from "../ClueUIPlugin.js";
+import { validateJsonData } from "../utils.js";
+const id = "tree";
+const metadata = { "type": "nested" };
+const data = [[{ "id": "Chaos", "edges": ["Gaea"] }], [{ "id": "Gaea", "edges": ["Chaos"] }, { "id": "Uranus", "edges": ["Gaea"] }], [{ "id": "Oceanus", "edges": ["Gaea", "Uranus"], "icons": ["bug"] }, { "id": "Thethys", "edges": ["Gaea", "Uranus"] }, { "id": "Pontus", "edges": ["Dionne"] }, { "id": "Rhea", "edges": ["Gaea", "Uranus"] }, { "id": "Cronus", "edges": ["Gaea", "Uranus"] }, { "id": "Coeus", "edges": ["Gaea", "Uranus"] }, { "id": "Phoebe", "edges": ["Gaea", "Uranus"] }, { "id": "Crius", "edges": ["Gaea", "Uranus"] }, { "id": "Hyperion", "edges": ["Gaea", "Uranus"] }, { "id": "Iapetus", "edges": ["Gaea", "Uranus"] }, { "id": "Thea", "edges": ["Gaea", "Uranus"] }, { "id": "Themis", "edges": ["Gaea", "Uranus"] }, { "id": "Mnemosyne", "edges": ["Gaea", "Uranus"] }], [{ "id": "Doris", "edges": ["Oceanus", "Thethys"] }, { "id": "Neures", "edges": ["Pontus", "Gaea"] }, { "id": "Dionne" }, { "id": "Demeter", "edges": ["Rhea", "Cronus"] }, { "id": "Hades", "edges": ["Rhea", "Cronus"] }, { "id": "Hera", "edges": ["Rhea", "Cronus"] }, { "id": "Alcmene" }, { "id": "Zeus", "edges": ["Rhea", "Cronus"] }, { "id": "Eris" }, { "id": "Leto", "edges": ["Coeus", "Phoebe"] }, { "id": "Amphitrite" }, { "id": "Medusa" }, { "id": "Poseidon", "edges": ["Rhea", "Cronus"] }, { "id": "Hestia", "edges": ["Rhea", "Cronus"] }], [{ "id": "Thetis", "edges": ["Zeus", "Doris", "Neures"] }, { "id": "Peleus" }, { "id": "Anchises" }, { "id": "Adonis" }, { "id": "Aphrodite", "edges": ["Zeus", "Dionne"] }, { "id": "Persephone", "edges": ["Zeus", "Demeter"] }, { "id": "Ares", "edges": ["Zeus", "Hera"] }, { "id": "Hephaestus", "edges": ["Zeus", "Hera"] }, { "id": "Hebe", "edges": ["Zeus", "Hera", "Hestia"] }, { "id": "Hercules", "edges": ["Zeus", "Alcmene"] }, { "id": "Megara" }, { "id": "Deianira" }, { "id": "Eileithya", "edges": ["Zeus", "Hera"] }, { "id": "Ate", "edges": ["Zeus", "Eris"] }, { "id": "Leda" }, { "id": "Athena", "edges": ["Zeus"] }, { "id": "Apollo", "edges": ["Zeus", "Leto"] }, { "id": "Artemis", "edges": ["Zeus", "Leto"] }, { "id": "Triton", "edges": ["Poseidon", "Amphitrite"] }, { "id": "Pegasus", "edges": ["Poseidon", "Medusa"] }, { "id": "Orion", "edges": ["Poseidon"] }, { "id": "Polyphemus", "edges": ["Poseidon"] }], [{ "id": "Deidamia" }, { "id": "Achilles", "edges": ["Peleus", "Thetis"] }, { "id": "Creusa" }, { "id": "Aeneas", "edges": ["Anchises", "Aphrodite"] }, { "id": "Lavinia", "edges": ["Lavinia(2)"] }, { "id": "Lavinia(2)", "edges": ["Lavinia"] }, { "id": "Eros", "edges": ["Hephaestus", "Aphrodite"] }, { "id": "Helen", "edges": ["Leda", "Zeus"] }, { "id": "Menelaus", "edges": ["Lavinia"] }, { "id": "Polydueces", "edges": ["Leda", "Zeus"] }], [{ "id": "Andromache" }, { "id": "Neoptolemus", "edges": ["Deidamia", "Achilles"] }, { "id": "Aeneas(2)", "edges": ["Creusa", "Aeneas"] }, { "id": "Pompilius", "edges": ["Creusa", "Aeneas"] }, { "id": "Iulus", "edges": ["Lavinia", "Aeneas"] }, { "id": "Hermione", "edges": ["Helen", "Menelaus"] }]];
+const tree_example = {
+  id,
+  metadata,
+  data
+};
 class GraphPlugin extends ClueUIPlugin {
   constructor() {
     super(...arguments);
@@ -14,10 +23,21 @@ class GraphPlugin extends ClueUIPlugin {
     __publicField(this, "description", "Renders an interactive tree visualization.");
   }
   actionResult({ result }) {
-    return /* @__PURE__ */ jsx(Graph, { graph: result.output, sx: { minHeight: "600px" } });
+    const json = validateJsonData(result.output);
+    return /* @__PURE__ */ jsx(Graph, { graph: json, sx: { minHeight: "600px" } });
   }
   fetcherResult({ result }) {
-    return /* @__PURE__ */ jsx(Graph, { graph: result.data, sx: { minHeight: "600px" } });
+    const json = validateJsonData(result.data);
+    return /* @__PURE__ */ jsx(Graph, { graph: json, sx: { minHeight: "600px" } });
+  }
+  editorLanguage() {
+    return "json";
+  }
+  exampleInput() {
+    return JSON.stringify(tree_example, null, 2);
+  }
+  documentation() {
+    return `This plugin renders an interactive tree visualization. It can be used by specifying "graph" as the format in the plugin configuration.`;
   }
 }
 export {

package/plugins/image/index.d.ts

@@ -8,5 +8,8 @@ declare class ImagePlugin extends ClueUIPlugin {
     description: string;
     actionResult(props: RenderActionResultProps): import("react/jsx-runtime").JSX.Element;
     fetcherResult(props: RenderFetcherResultProps): import("react/jsx-runtime").JSX.Element;
+    editorLanguage(): string;
+    exampleInput(): string;
+    documentation(): string;
 }
 export default ImagePlugin;

package/plugins/image/index.js

@@ -3,6 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx } from "react/jsx-runtime";
 import ClueUIPlugin from "../ClueUIPlugin.js";
+import { validateJsonData } from "../utils.js";
 class ImagePlugin extends ClueUIPlugin {
   constructor() {
     super(...arguments);
@@ -13,12 +14,31 @@ class ImagePlugin extends ClueUIPlugin {
     __publicField(this, "description", "Renders images.");
   }
   actionResult(props) {
-    const { result, fetcherId: _fetcherId, ...additionalProps } = props;
-    return /* @__PURE__ */ jsx("img", { src: result.output.image, alt: result.output.alt, ...additionalProps });
+    const { result, pluginId, ...additionalProps } = props;
+    const json = validateJsonData(result.output);
+    if (typeof json.image !== "string" || json.image.length === 0) {
+      throw new Error('ImagePlugin expects a JSON object with a non-empty "image" string property.');
+    }
+    const { image, alt } = json;
+    return /* @__PURE__ */ jsx("img", { src: image, alt: alt ?? "", ...additionalProps });
   }
   fetcherResult(props) {
-    const { result, fetcherId: _fetcherId, ...additionalProps } = props;
-    return /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, ...additionalProps });
+    const { result, fetcherId, ...additionalProps } = props;
+    const json = validateJsonData(result.data);
+    if (typeof json.image !== "string" || json.image.length === 0) {
+      throw new Error('ImagePlugin expects a JSON object with a non-empty "image" string property.');
+    }
+    const { image, alt } = json;
+    return /* @__PURE__ */ jsx("img", { src: image, alt: alt ?? "", ...additionalProps });
+  }
+  editorLanguage() {
+    return "json";
+  }
+  exampleInput() {
+    return JSON.stringify({ image: "/svg/dark/clue-icon2.svg", alt: "Clue Logo" }, null, 2);
+  }
+  documentation() {
+    return `This plugin renders images. It can be used by specifying "image" as the format in the plugin configuration. The input should be a json object with an "image" property that is the URL of the image, and an optional "alt" property for the alt text of the image.`;
   }
 }
 export {

package/plugins/json/index.d.ts

@@ -13,5 +13,8 @@ declare class JsonPlugin extends ClueUIPlugin {
     fetcherResult({ result }: {
         result: FetcherResult;
     }): import("react/jsx-runtime").JSX.Element;
+    editorLanguage(): string;
+    exampleInput(): string;
+    documentation(): string;
 }
 export default JsonPlugin;

package/plugins/json/index.js

@@ -4,6 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { jsx } from "react/jsx-runtime";
 import { J as JSONViewer } from "../../index-DUEubgWN.js";
 import ClueUIPlugin from "../ClueUIPlugin.js";
+import { validateJsonData } from "../utils.js";
 class JsonPlugin extends ClueUIPlugin {
   constructor() {
     super(...arguments);
@@ -14,10 +15,21 @@ class JsonPlugin extends ClueUIPlugin {
     __publicField(this, "description", "Renders JSON with the default renderer or the overridden json component defined in the clue component provider.");
   }
   actionResult({ result }) {
-    return /* @__PURE__ */ jsx(JSONViewer, { data: result.output, collapse: true, forceCompact: true });
+    const json = validateJsonData(result.output);
+    return /* @__PURE__ */ jsx(JSONViewer, { data: json, collapse: true, forceCompact: true });
   }
   fetcherResult({ result }) {
-    return /* @__PURE__ */ jsx(JSONViewer, { data: result.data });
+    const json = validateJsonData(result.data);
+    return /* @__PURE__ */ jsx(JSONViewer, { data: json, collapse: true, forceCompact: true });
+  }
+  editorLanguage() {
+    return "json";
+  }
+  exampleInput() {
+    return '{ "key": "value" }';
+  }
+  documentation() {
+    return `This plugin renders JSON. It can be used by specifying "json" as the format in the plugin configuration. The input should be a JSON object or a stringified JSON.`;
   }
 }
 export {

package/plugins/markdown/index.d.ts

@@ -13,5 +13,8 @@ declare class MarkdownPlugin extends ClueUIPlugin {
     fetcherResult({ result }: {
         result: FetcherResult;
     }): import("react/jsx-runtime").JSX.Element;
+    editorLanguage(): string;
+    exampleInput(): string;
+    documentation(): string;
 }
 export default MarkdownPlugin;

package/plugins/markdown/index.js

@@ -19,6 +19,17 @@ class MarkdownPlugin extends ClueUIPlugin {
   fetcherResult({ result }) {
     return /* @__PURE__ */ jsx(Markdown, { md: result.data });
   }
+  editorLanguage() {
+    return "markdown";
+  }
+  exampleInput() {
+    return `# Markdown Plugin
+This is an example of the Markdown plugin.
+You can use **Markdown** syntax to format your text.`;
+  }
+  documentation() {
+    return `This plugin renders Markdown. It can be used by specifying "markdown" as the format in the plugin configuration. The input should be a string in Markdown format.`;
+  }
 }
 export {
   MarkdownPlugin as default

package/plugins/store.d.ts

@@ -34,6 +34,7 @@ export declare class ClueUIPluginStore {
      */
     getPlugins(format?: string, resultType?: 'action' | 'fetcher', actionId?: string, fetcherId?: string): string[];
     getPlugin(format: string, resultType: 'action' | 'fetcher', actionId?: string, fetcherId?: string): string | undefined;
+    getAvailableFormats(pluginName?: string): string[];
     get pluginStore(): import('react-pluggable').PluginStore;
 }
 declare const clueUIPluginStore: ClueUIPluginStore;

package/plugins/store.js

@@ -1,4 +1,4 @@
-import { C, c } from "../store-DMdRx9g0.js";
+import { C, c } from "../store-B9sjQbcS.js";
 import "../uniq-CahZPAwp.js";
 export {
   C as ClueUIPluginStore,

package/plugins/utils.d.ts

@@ -0,0 +1 @@
+export declare const validateJsonData: (data: unknown) => object;

package/plugins/utils.js

@@ -0,0 +1,20 @@
+const validateJsonData = (data) => {
+  let json = data;
+  if (typeof json === "string") {
+    try {
+      json = JSON.parse(json);
+    } catch (err) {
+      throw new Error(`Failed to parse JSON string: ${String(err)}`, {
+        cause: err instanceof Error ? err : void 0
+      });
+    }
+  }
+  if (json === null || typeof json !== "object") {
+    const receivedType = json === null ? "null" : typeof json;
+    throw new Error(`Input must be a JSON object or a JSON object encoded as a string. Got: ${receivedType}`);
+  }
+  return json;
+};
+export {
+  validateJsonData
+};

package/{store-DMdRx9g0.js → store-B9sjQbcS.js}

@@ -2143,6 +2143,13 @@ class ClueUIPluginStore {
     const availablePlugins = this.getPlugins(format, resultType, actionId, fetcherId);
     return availablePlugins.length > 0 ? availablePlugins[0] : void 0;
   }
+  getAvailableFormats(pluginName) {
+    const formats = Object.keys(this.pluginsByFormat);
+    if (pluginName) {
+      return formats.filter((format) => this.pluginsByFormat[format].includes(pluginName));
+    }
+    return formats;
+  }
   get pluginStore() {
     return this._pluginStore;
   }