@polymorphism-tech/morph-spec 8.28.0 → 8.31.0

package/src/dashboard/app/components/DetailPanel.jsx

@@ -1,11 +1,11 @@
-export default function DetailPanel({ open, title, onClose, children }) {
-  return (
-    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
-      <div className="flex items-center justify-between p-4 border-b border-gray-700">
-        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
-        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
-      </div>
-      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
-    </div>
-  );
-}
+export default function DetailPanel({ open, title, onClose, children }) {
+  return (
+    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
+      <div className="flex items-center justify-between p-4 border-b border-gray-700">
+        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
+      </div>
+      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
+    </div>
+  );
+}

package/src/dashboard/app/components/FlowGraph.jsx

@@ -1,17 +1,17 @@
-import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
-
-export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
-  return (
-    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
-      <ReactFlow
-        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
-        fitView={fitView} proOptions={{ hideAttribution: true }}
-        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
-      >
-        <Background color="#1e293b" gap={20} />
-        <Controls position="bottom-right" />
-        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
-      </ReactFlow>
-    </div>
-  );
-}
+import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
+
+export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
+  return (
+    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
+      <ReactFlow
+        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
+        fitView={fitView} proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls position="bottom-right" />
+        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
+      </ReactFlow>
+    </div>
+  );
+}

package/src/dashboard/app/components/SearchFilter.jsx

@@ -1,22 +1,22 @@
-import { useState } from 'react';
-
-export default function SearchFilter({ placeholder = 'Search...', filters = [], onSearchChange, onFilterChange }) {
-  const [search, setSearch] = useState('');
-  function handleSearchChange(e) {
-    setSearch(e.target.value);
-    onSearchChange?.(e.target.value);
-  }
-  return (
-    <div className="flex items-center gap-3 p-3 bg-gray-900 border-b border-gray-800">
-      <input type="text" value={search} onChange={handleSearchChange} placeholder={placeholder}
-        className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-1.5 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500" />
-      {filters.map(({ name, label, options, value }) => (
-        <select key={name} value={value} onChange={(e) => onFilterChange?.(name, e.target.value)}
-          className="bg-gray-800 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
-          <option value="">{label}: All</option>
-          {options.map((opt) => (<option key={opt} value={opt}>{opt}</option>))}
-        </select>
-      ))}
-    </div>
-  );
-}
+import { useState } from 'react';
+
+export default function SearchFilter({ placeholder = 'Search...', filters = [], onSearchChange, onFilterChange }) {
+  const [search, setSearch] = useState('');
+  function handleSearchChange(e) {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  }
+  return (
+    <div className="flex items-center gap-3 p-3 bg-gray-900 border-b border-gray-800">
+      <input type="text" value={search} onChange={handleSearchChange} placeholder={placeholder}
+        className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-1.5 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500" />
+      {filters.map(({ name, label, options, value }) => (
+        <select key={name} value={value} onChange={(e) => onFilterChange?.(name, e.target.value)}
+          className="bg-gray-800 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
+          <option value="">{label}: All</option>
+          {options.map((opt) => (<option key={opt} value={opt}>{opt}</option>))}
+        </select>
+      ))}
+    </div>
+  );
+}

package/src/dashboard/app/hooks/useDetailPanel.js

@@ -1,15 +1,15 @@
-import { useState, useCallback } from 'react';
-
-export function useDetailPanel() {
-  const [panel, setPanel] = useState({ open: false, title: '', content: null });
-
-  const openPanel = useCallback((title, content) => {
-    setPanel({ open: true, title, content });
-  }, []);
-
-  const closePanel = useCallback(() => {
-    setPanel((prev) => ({ ...prev, open: false }));
-  }, []);
-
-  return { panel, openPanel, closePanel };
-}
+import { useState, useCallback } from 'react';
+
+export function useDetailPanel() {
+  const [panel, setPanel] = useState({ open: false, title: '', content: null });
+
+  const openPanel = useCallback((title, content) => {
+    setPanel({ open: true, title, content });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanel((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  return { panel, openPanel, closePanel };
+}

package/src/dashboard/app/main.jsx

@@ -1,13 +1,13 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
-import './styles/index.css';
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>
-);
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);