@industry-theme/principal-view-panels 0.1.0 → 0.1.2

package/dist/panels/ConfigLibraryBrowserPanel.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 /**
  * ConfigLibraryBrowserPanel displays available .canvas configurations
- * and component library items from the .vgc/ folder.
+ * and component library items from the .principal-views/ folder.
  */
 declare const meta: {
     title: string;
@@ -32,7 +32,7 @@ export declare const WithConfigsAndLibrary: Story;
  */
 export declare const ConfigsOnly: Story;
 /**
- * Empty state - no .vgc folder
+ * Empty state - no .principal-views folder
  */
 export declare const EmptyState: Story;
 /**

package/dist/panels/principal-view/ConfigLoader.d.ts

@@ -10,7 +10,7 @@ export interface ConfigFile {
     source: 'folder' | 'standalone';
 }
 /**
- * Utility for loading and parsing .canvas configuration files from .vgc/ folder
+ * Utility for loading and parsing .canvas configuration files from .principal-views/ folder
  */
 export declare class ConfigLoader {
     /**
@@ -22,7 +22,7 @@ export declare class ConfigLoader {
      */
     static parseLibrary(content: string): ComponentLibrary;
     /**
-     * Find the library.yaml file in the .vgc/ folder
+     * Find the library.yaml file in the .principal-views/ folder
      * Returns the relative path if found, null otherwise
      */
     static findLibraryPath(files: Array<{
@@ -31,7 +31,7 @@ export declare class ConfigLoader {
         name?: string;
     }>): string | null;
     /**
-     * Find all .canvas files in the .vgc/ folder
+     * Find all .canvas files in the .principal-views/ folder
      * Returns array of config files with metadata
      */
     static findConfigs(files: Array<{

package/dist/panels/principal-view/EmptyStateContent.d.ts

@@ -5,7 +5,7 @@ interface EmptyStateContentProps {
 }
 /**
  * Empty state component for Principal View Graph Panel
- * Displays when no .vgc/ folder with configuration files is found in the project
+ * Displays when no .principal-views/ folder with configuration files is found in the project
  */
 export declare const EmptyStateContent: React.FC<EmptyStateContentProps>;
 export {};

package/dist/panels.bundle.js

@@ -8892,19 +8892,19 @@ class ConfigurationLoader {
     this.fsAdapter = fsAdapter;
   }
   /**
-   * Check if the .vgc/ configuration directory exists
+   * Check if the .principal-views/ configuration directory exists
    *
    * @param baseDir - Base directory to search from
-   * @returns True if .vgc/ directory exists
+   * @returns True if .principal-views/ directory exists
    */
   hasConfigDirectory(baseDir) {
     const configPath = this.fsAdapter.join(baseDir, ConfigurationLoader.CONFIG_DIR);
     return this.fsAdapter.exists(configPath) && this.fsAdapter.isDirectory(configPath);
   }
   /**
-   * List all available configuration names in .vgc/ folder
+   * List all available configuration names in .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Array of configuration names (without extensions)
    */
   listConfigurations(baseDir) {
@@ -8919,7 +8919,7 @@ class ConfigurationLoader {
    * Load a specific configuration by name
    *
    * @param name - Configuration name (without extension)
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Configuration file or null if not found/invalid
    */
   loadByName(name, baseDir) {
@@ -8949,9 +8949,9 @@ class ConfigurationLoader {
     return null;
   }
   /**
-   * Load all configurations from .vgc/ folder
+   * Load all configurations from .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Result containing all loaded configs and any errors
    */
   loadAll(baseDir) {
@@ -8961,8 +8961,8 @@ class ConfigurationLoader {
     };
     if (!this.hasConfigDirectory(baseDir)) {
       result.errors.push({
-        file: ".vgc",
-        error: "Configuration directory .vgc/ not found"
+        file: ".principal-views",
+        error: "Configuration directory .principal-views/ not found"
       });
       return result;
     }
@@ -9004,25 +9004,25 @@ class ConfigurationLoader {
    * Get the configuration directory path
    *
    * @param baseDir - Base directory
-   * @returns Full path to .vgc/ directory
+   * @returns Full path to .principal-views/ directory
    */
   getConfigDirectoryPath(baseDir) {
     return this.fsAdapter.join(baseDir, ConfigurationLoader.CONFIG_DIR);
   }
 }
-ConfigurationLoader.CONFIG_DIR = ".vgc";
+ConfigurationLoader.CONFIG_DIR = ".principal-views";
 const DEFAULT_LIBRARY_FILES = ["library.yaml", "library.yml", "library.json"];
-const CONFIG_DIR = ".vgc";
+const CONFIG_DIR = ".principal-views";
 class LibraryLoader {
   constructor(fsAdapter) {
     this.fsAdapter = fsAdapter;
   }
   /**
-   * Load the component library from the .vgc/ folder
+   * Load the component library from the .principal-views/ folder
    *
    * Searches for library.yaml, library.yml, or library.json (in that order).
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Library load result
    */
   load(baseDir) {
@@ -9030,7 +9030,7 @@ class LibraryLoader {
     if (!this.fsAdapter.exists(configPath) || !this.fsAdapter.isDirectory(configPath)) {
       return {
         success: false,
-        error: "Configuration directory .vgc/ not found",
+        error: "Configuration directory .principal-views/ not found",
         path: configPath
       };
     }
@@ -9080,9 +9080,9 @@ class LibraryLoader {
     }
   }
   /**
-   * Check if a library file exists in the .vgc/ folder
+   * Check if a library file exists in the .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns True if a library file exists
    */
   hasLibrary(baseDir) {
@@ -9679,14 +9679,11 @@ function createRulesEngine(rules) {
   return engine;
 }
 const CONFIG_FILE_NAMES = [
-  ".vgcrc.json",
-  ".vgcrc.yaml",
-  ".vgcrc.yml",
-  "vgc.config.json",
-  "vgc.config.yaml",
-  "vgc.config.yml"
-];
-const DEFAULT_INCLUDE_PATTERNS = [".vgc/**/*.yaml", ".vgc/**/*.yml", ".vgc/**/*.json"];
+  ".privurc.yaml",
+  ".privurc.yml",
+  ".privurc.json"
+];
+const DEFAULT_INCLUDE_PATTERNS = [".principal-views/**/*.yaml", ".principal-views/**/*.yml", ".principal-views/**/*.json"];
 const DEFAULT_EXCLUDE_PATTERNS = ["**/node_modules/**", "**/*.test.*"];
 const VALID_SEVERITIES = [
   "off",
@@ -45056,7 +45053,7 @@ function requireCustomNode() {
   const react_1 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const CustomNode$1 = ({ data, selected }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2;
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false } = nodeProps;
     if (!typeDefinition) {
@@ -45064,14 +45061,15 @@ function requireCustomNode() {
     }
     const nodeDataColor = nodeData.color;
     const baseColor = nodeDataColor || typeDefinition.color || "#888";
-    const stateColor = state && ((_b = (_a = typeDefinition.states) == null ? void 0 : _a[state]) == null ? void 0 : _b.color);
+    const nodeDataStates = nodeData.states;
+    const stateColor = state && (((_a = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _a.color) || ((_c = (_b = typeDefinition.states) == null ? void 0 : _b[state]) == null ? void 0 : _c.color));
     const fillColor = stateColor || baseColor;
     const nodeDataStroke = nodeData.stroke;
     const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
     const color = fillColor;
-    const labelField = (_c = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _c[0];
+    const labelField = (_d = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _d[0];
     const displayLabel = labelField && nodeData[labelField] ? String(nodeData[labelField]) : nodeProps.label;
-    const icon = nodeData.icon || state && ((_e2 = (_d = typeDefinition.states) == null ? void 0 : _d[state]) == null ? void 0 : _e2.icon) || typeDefinition.icon;
+    const icon = nodeData.icon || state && (((_e2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _e2.icon) || ((_g = (_f = typeDefinition.states) == null ? void 0 : _f[state]) == null ? void 0 : _g.icon)) || typeDefinition.icon;
     const getAnimationClass = () => {
       switch (animationType) {
         case "pulse":
@@ -45155,8 +45153,8 @@ function requireCustomNode() {
       position: "relative",
       clipPath: hexagonClipPath,
       backgroundColor: hasViolations ? "#D0021B" : strokeColor,
-      width: ((_f = typeDefinition.size) == null ? void 0 : _f.width) || 120,
-      height: ((_g = typeDefinition.size) == null ? void 0 : _g.height) || 120,
+      width: ((_h = typeDefinition.size) == null ? void 0 : _h.width) || 120,
+      height: ((_i = typeDefinition.size) == null ? void 0 : _i.height) || 120,
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
       transition: "all 0.2s ease"
     } : {};
@@ -45221,7 +45219,7 @@ function requireCustomNode() {
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_i = (_h = typeDefinition.states) == null ? void 0 : _h[state]) == null ? void 0 : _i.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_j = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _j.label) || ((_l = (_k = typeDefinition.states) == null ? void 0 : _k[state]) == null ? void 0 : _l.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
@@ -45232,7 +45230,7 @@ function requireCustomNode() {
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_k = (_j = typeDefinition.states) == null ? void 0 : _j[state]) == null ? void 0 : _k.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
@@ -45358,7 +45356,8 @@ function requireCustomEdge() {
     if (!typeDefinition) {
       return null;
     }
-    const color = hasViolations ? "#D0021B" : typeDefinition.color || "#888";
+    const edgeColor = edgeData == null ? void 0 : edgeData.color;
+    const color = hasViolations ? "#D0021B" : edgeColor || typeDefinition.color || "#888";
     const width = typeDefinition.width || 2;
     const [edgePath, labelX, labelY] = (0, react_2.getBezierPath)({
       sourceX,
@@ -45552,18 +45551,20 @@ function requireGraphConverter() {
   }
   function convertToXYFlowEdges(edges, configuration, violations = []) {
     return edges.map((edge) => {
+      var _a;
       const typeDefinition = configuration.edgeTypes[edge.type];
       if (!typeDefinition) {
         console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
       }
       const hasViolations = violations.some((v) => {
-        var _a;
-        return ((_a = v.context) == null ? void 0 : _a.edgeId) === edge.id;
+        var _a2;
+        return ((_a2 = v.context) == null ? void 0 : _a2.edgeId) === edge.id;
       });
       const edgeWithHandles = edge;
+      const edgeColor = (_a = edge.data) == null ? void 0 : _a.color;
       const markerEnd = (typeDefinition == null ? void 0 : typeDefinition.directed) !== false ? {
         type: react_1.MarkerType.ArrowClosed,
-        color: (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
+        color: edgeColor || (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
         width: 20,
         height: 20
       } : void 0;
@@ -46051,7 +46052,7 @@ function requireGraphRenderer() {
           onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
         }
       }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
-      const nodes = editable ? localNodes : propNodes;
+      const nodes = localNodes;
       const edges = editable ? localEdges : propEdges;
       const checkHasChanges = (0, react_1.useCallback)((state) => {
         return state.positionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
@@ -46323,6 +46324,7 @@ function requireGraphRenderer() {
           const nodeId = stateEvent.nodeId;
           const newState = stateEvent.newState;
           if (nodeId && newState) {
+            setLocalNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, state: newState } : node));
             const stateToAnimation = {
               processing: "pulse",
               completed: "flash",
@@ -46347,8 +46349,8 @@ function requireGraphRenderer() {
                   });
                 }, duration);
               }
-              onEventProcessed == null ? void 0 : onEventProcessed(latestEvent);
             }
+            onEventProcessed == null ? void 0 : onEventProcessed(latestEvent);
           }
         }
         if (latestEvent.category === "node" && latestEvent.operation === "create") {
@@ -47386,11 +47388,11 @@ class ConfigLoader {
     }
   }
   /**
-   * Find the library.yaml file in the .vgc/ folder
+   * Find the library.yaml file in the .principal-views/ folder
    * Returns the relative path if found, null otherwise
    */
   static findLibraryPath(files) {
-    const VGC_FOLDER = ".vgc";
+    const VGC_FOLDER = ".principal-views";
     for (const file of files) {
       const filePath = file.relativePath || file.path || "";
       const fileName = file.name || "";
@@ -47401,12 +47403,12 @@ class ConfigLoader {
     return null;
   }
   /**
-   * Find all .canvas files in the .vgc/ folder
+   * Find all .canvas files in the .principal-views/ folder
    * Returns array of config files with metadata
    */
   static findConfigs(files) {
     const configs = [];
-    const VGC_FOLDER = ".vgc";
+    const VGC_FOLDER = ".principal-views";
     for (const file of files) {
       const filePath = file.relativePath || file.path || "";
       const fileName = file.name || "";
@@ -51185,7 +51187,7 @@ const EmptyStateContent = ({ theme }) => {
                 /* @__PURE__ */ jsx("div", { style: {
                   fontSize: theme.fontSizes[0],
                   color: theme.colors.textSecondary
-                }, children: "Learn how to create .vgc/ configurations with path-based validation" })
+                }, children: "Learn how to create .principal-views/ configurations with path-based validation" })
               ] }),
               /* @__PURE__ */ jsx(ExternalLink, { size: 16, color: theme.colors.textMuted, style: { flexShrink: 0 } })
             ]
@@ -51250,7 +51252,7 @@ const EmptyStateContent = ({ theme }) => {
           borderRadius: theme.radii[0],
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0]
-        }, children: ".vgc/" }),
+        }, children: ".principal-views/" }),
         " folder with YAML configuration files to your project root, the panel will automatically visualize your configurations."
       ] })
     ] })
@@ -52168,7 +52170,7 @@ const ConfigLibraryBrowserPanel = ({
       });
       const vgcFiles = fileTreeData2.allFiles.filter((f) => {
         const path = f.relativePath || f.path || "";
-        return path.startsWith(".vgc/");
+        return path.startsWith(".principal-views/");
       });
       for (const file of vgcFiles) {
         const relativePath = file.relativePath || file.path || "";
@@ -52207,7 +52209,7 @@ const ConfigLibraryBrowserPanel = ({
           canvasConfigs.push({
             id: name,
             name,
-            path: `.vgc/${name}.yaml`,
+            path: `.principal-views/${name}.yaml`,
             displayName
           });
         }
@@ -52271,7 +52273,7 @@ const ConfigLibraryBrowserPanel = ({
   }, []);
   const hasConfigs = state.configs.length > 0;
   const cliCommand = hasConfigs ? "npx @principal-ai/principal-view-cli --help" : "npx @principal-ai/principal-view-cli init";
-  const cliCommandDescription = hasConfigs ? "View all available CLI commands and options." : "This creates a .vgc/ folder with a starter canvas file.";
+  const cliCommandDescription = hasConfigs ? "View all available CLI commands and options." : "This creates a .principal-views/ folder with a starter canvas file.";
   const handleCopyCommand = useCallback(() => {
     navigator.clipboard.writeText(cliCommand).then(() => {
       setCopied(true);
@@ -52891,7 +52893,7 @@ const ConfigLibraryBrowserPanel = ({
       }, children: [
         /* @__PURE__ */ jsx(Library, { size: 32, style: { marginBottom: theme.space[2], opacity: 0.5 } }),
         /* @__PURE__ */ jsx("div", { children: "No component library found" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: theme.fontSizes[0], marginTop: theme.space[1] }, children: "Add library.yaml to the .vgc/ folder" })
+        /* @__PURE__ */ jsx("div", { style: { fontSize: theme.fontSizes[0], marginTop: theme.space[1] }, children: "Add library.yaml to the .principal-views/ folder" })
       ] })
     ] }),
     showSetupInfo && /* @__PURE__ */ jsxs("div", { style: {