@clypra/ui 1.0.0

package/.releaserc.json

@@ -0,0 +1,16 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@clypra/ui",
+  "version": "1.0.0",
+  "description": "Shared UI components for all Clypra Studio Labs",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./components/*": "./dist/components/*/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@clypra/runtime": "^1.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "tsup": "^8.3.5"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AIEraDev/clypra-studio.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/AIEraDev/clypra-studio/tree/main/packages/ui#readme",
+  "bugs": {
+    "url": "https://github.com/AIEraDev/clypra-studio/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/GraphInspector/GraphInspector.tsx

@@ -0,0 +1,91 @@
+/**
+ * GraphInspector Component
+ *
+ * Visualizes the media processing graph structure.
+ * Shows nodes, edges, capabilities, and dependencies.
+ */
+
+import React from "react";
+import type { MediaProcessingGraph, GraphNode } from "@clypra/runtime/graph";
+
+export interface GraphInspectorProps {
+  graph: MediaProcessingGraph;
+  selectedNodeId?: string;
+  onNodeSelect?: (nodeId: string) => void;
+}
+
+export const GraphInspector: React.FC<GraphInspectorProps> = ({ graph, selectedNodeId, onNodeSelect }) => {
+  return (
+    <div className="graph-inspector" style={{ padding: "16px", fontFamily: "monospace" }}>
+      <div style={{ marginBottom: "16px", fontWeight: "bold", fontSize: "14px" }}>Graph Inspector</div>
+
+      <div style={{ marginBottom: "12px" }}>
+        <div style={{ fontSize: "12px", color: "#666" }}>Graph ID: {graph.id}</div>
+        <div style={{ fontSize: "12px", color: "#666" }}>
+          Nodes: {graph.nodes.length} | Edges: {graph.edges.length}
+        </div>
+      </div>
+
+      <div style={{ marginBottom: "16px" }}>
+        <div style={{ fontSize: "13px", fontWeight: "600", marginBottom: "8px" }}>Nodes</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+          {graph.nodes.map((node) => (
+            <NodeItem key={node.id} node={node} selected={node.id === selectedNodeId} onClick={() => onNodeSelect?.(node.id)} />
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <div style={{ fontSize: "13px", fontWeight: "600", marginBottom: "8px" }}>Edges</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+          {graph.edges.map((edge, idx) => (
+            <div
+              key={idx}
+              style={{
+                fontSize: "11px",
+                color: "#555",
+                padding: "4px 8px",
+                backgroundColor: "#f8f8f8",
+                borderRadius: "4px",
+              }}
+            >
+              {edge.fromNodeId}.{edge.fromPinId} → {edge.toNodeId}.{edge.toPinId}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface NodeItemProps {
+  node: GraphNode;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const NodeItem: React.FC<NodeItemProps> = ({ node, selected, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        padding: "8px",
+        backgroundColor: selected ? "#e3f2fd" : "#fafafa",
+        border: selected ? "1px solid #2196f3" : "1px solid #e0e0e0",
+        borderRadius: "4px",
+        cursor: "pointer",
+        fontSize: "12px",
+      }}
+    >
+      <div style={{ fontWeight: "600", marginBottom: "4px" }}>
+        {node.id} <span style={{ color: "#666", fontWeight: "normal" }}>({node.type})</span>
+      </div>
+      <div style={{ fontSize: "11px", color: "#777" }}>
+        Inputs: {Object.keys(node.inputs).length} | Outputs: {Object.keys(node.outputs).length}
+      </div>
+      {node.capabilities.temporal && <div style={{ fontSize: "10px", color: "#f57c00", marginTop: "4px" }}>⏱ Temporal</div>}
+      {node.capabilities.stateful && <div style={{ fontSize: "10px", color: "#7b1fa2", marginTop: "2px" }}>💾 Stateful</div>}
+      {node.requirements.multipass && <div style={{ fontSize: "10px", color: "#d32f2f", marginTop: "2px" }}>🔄 Multi-pass</div>}
+    </div>
+  );
+};

package/src/components/GraphInspector/index.ts

@@ -0,0 +1,2 @@
+export { GraphInspector } from "./GraphInspector";
+export type { GraphInspectorProps } from "./GraphInspector";

package/src/components/PassInspector/PassInspector.tsx

@@ -0,0 +1,128 @@
+/**
+ * PassInspector Component
+ *
+ * Shows render passes from the frame graph.
+ * Displays execution order, shaders, uniforms, and textures.
+ */
+
+import React from "react";
+import type { FrameGraph, RenderPass } from "@clypra/runtime/planner";
+
+export interface PassInspectorProps {
+  frameGraph: FrameGraph;
+  selectedPassId?: string;
+  onPassSelect?: (passId: string) => void;
+}
+
+export const PassInspector: React.FC<PassInspectorProps> = ({ frameGraph, selectedPassId, onPassSelect }) => {
+  return (
+    <div className="pass-inspector" style={{ padding: "16px", fontFamily: "monospace" }}>
+      <div style={{ marginBottom: "16px", fontWeight: "bold", fontSize: "14px" }}>Pass Inspector</div>
+
+      <div style={{ marginBottom: "12px" }}>
+        <div style={{ fontSize: "12px", color: "#666" }}>
+          Frame: {frameGraph.frameNumber} | Time: {frameGraph.timelineTimeMs.toFixed(2)}ms
+        </div>
+        <div style={{ fontSize: "12px", color: "#666" }}>Total Passes: {frameGraph.passes.length}</div>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+        {frameGraph.passes.map((pass, index) => (
+          <PassCard key={pass.id} pass={pass} index={index} selected={pass.id === selectedPassId} onClick={() => onPassSelect?.(pass.id)} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface PassCardProps {
+  pass: RenderPass;
+  index: number;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const PassCard: React.FC<PassCardProps> = ({ pass, index, selected, onClick }) => {
+  const uniformCount = Object.keys(pass.uniforms).length;
+  const inputCount = pass.inputs.length;
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        padding: "12px",
+        backgroundColor: selected ? "#e8f5e9" : "#fafafa",
+        border: selected ? "2px solid #4caf50" : "1px solid #e0e0e0",
+        borderRadius: "6px",
+        cursor: "pointer",
+        fontSize: "12px",
+      }}
+    >
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", marginBottom: "8px" }}>
+        <div
+          style={{
+            width: "24px",
+            height: "24px",
+            borderRadius: "50%",
+            backgroundColor: "#2196f3",
+            color: "white",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "11px",
+            fontWeight: "bold",
+            marginRight: "8px",
+          }}
+        >
+          {index + 1}
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontWeight: "600" }}>{pass.name || pass.id}</div>
+          <div style={{ fontSize: "10px", color: "#666" }}>Shader: {pass.shaderId}</div>
+        </div>
+      </div>
+
+      {/* Resources */}
+      <div style={{ marginBottom: "8px", paddingLeft: "32px" }}>
+        <div style={{ fontSize: "11px", color: "#555" }}>
+          <span style={{ fontWeight: "500" }}>Inputs:</span> {inputCount > 0 ? pass.inputs.join(", ") : "none"}
+        </div>
+        <div style={{ fontSize: "11px", color: "#555" }}>
+          <span style={{ fontWeight: "500" }}>Output:</span> {pass.output}
+        </div>
+      </div>
+
+      {/* Uniforms */}
+      {uniformCount > 0 && (
+        <div style={{ paddingLeft: "32px", fontSize: "10px", color: "#777" }}>
+          <div style={{ fontWeight: "500", marginBottom: "4px" }}>Uniforms ({uniformCount}):</div>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
+            {Object.entries(pass.uniforms)
+              .slice(0, 5)
+              .map(([key, value]) => (
+                <div
+                  key={key}
+                  style={{
+                    padding: "2px 6px",
+                    backgroundColor: "#fff",
+                    border: "1px solid #ddd",
+                    borderRadius: "3px",
+                  }}
+                >
+                  {key}: {JSON.stringify(value)}
+                </div>
+              ))}
+            {uniformCount > 5 && <div style={{ padding: "2px 6px", color: "#999" }}>+{uniformCount - 5} more</div>}
+          </div>
+        </div>
+      )}
+
+      {/* Flags */}
+      <div style={{ paddingLeft: "32px", marginTop: "8px", fontSize: "10px" }}>
+        {pass.clearBeforeRender && <span style={{ padding: "2px 6px", backgroundColor: "#fff3e0", color: "#e65100", borderRadius: "3px", marginRight: "4px" }}>Clear</span>}
+        {pass.blendMode && <span style={{ padding: "2px 6px", backgroundColor: "#f3e5f5", color: "#6a1b9a", borderRadius: "3px" }}>Blend: {pass.blendMode}</span>}
+      </div>
+    </div>
+  );
+};

package/src/components/PassInspector/index.ts

@@ -0,0 +1,2 @@
+export { PassInspector } from "./PassInspector";
+export type { PassInspectorProps } from "./PassInspector";

package/src/components/PerformanceMonitor/PerformanceMonitor.tsx

@@ -0,0 +1,129 @@
+/**
+ * PerformanceMonitor Component
+ *
+ * Shows real-time performance metrics: GPU/CPU time, FPS, pass breakdown.
+ */
+
+import React from "react";
+
+export interface PerformanceMetrics {
+  gpuTime: number; // ms
+  cpuTime: number; // ms
+  passCount: number;
+  fps: number;
+  memoryUsage: number; // bytes
+  passTimes?: Array<{ passId: string; time: number }>;
+}
+
+export interface PerformanceMonitorProps {
+  metrics: PerformanceMetrics;
+  targetFps?: number;
+}
+
+export const PerformanceMonitor: React.FC<PerformanceMonitorProps> = ({ metrics, targetFps = 60 }) => {
+  const targetFrameTime = 1000 / targetFps;
+  const totalTime = metrics.gpuTime + metrics.cpuTime;
+  const isOverBudget = totalTime > targetFrameTime;
+
+  return (
+    <div className="performance-monitor" style={{ padding: "16px", fontFamily: "monospace" }}>
+      <div style={{ marginBottom: "16px", fontWeight: "bold", fontSize: "14px" }}>Performance Monitor</div>
+
+      {/* FPS Display */}
+      <div
+        style={{
+          marginBottom: "16px",
+          padding: "16px",
+          backgroundColor: isOverBudget ? "#ffebee" : "#e8f5e9",
+          borderRadius: "8px",
+          textAlign: "center",
+        }}
+      >
+        <div style={{ fontSize: "32px", fontWeight: "bold", color: isOverBudget ? "#c62828" : "#2e7d32" }}>{metrics.fps.toFixed(1)} FPS</div>
+        <div style={{ fontSize: "12px", color: "#666", marginTop: "4px" }}>
+          Target: {targetFps} FPS ({targetFrameTime.toFixed(2)}ms)
+        </div>
+      </div>
+
+      {/* Timing Breakdown */}
+      <div style={{ marginBottom: "16px" }}>
+        <div style={{ fontSize: "13px", fontWeight: "600", marginBottom: "8px" }}>Frame Time: {totalTime.toFixed(2)}ms</div>
+
+        <MetricBar label="GPU" value={metrics.gpuTime} max={targetFrameTime} color="#2196f3" />
+        <MetricBar label="CPU" value={metrics.cpuTime} max={targetFrameTime} color="#ff9800" />
+      </div>
+
+      {/* Pass Count */}
+      <div style={{ marginBottom: "16px", fontSize: "12px" }}>
+        <div style={{ marginBottom: "4px" }}>
+          <span style={{ fontWeight: "600" }}>Render Passes:</span> {metrics.passCount}
+        </div>
+        <div>
+          <span style={{ fontWeight: "600" }}>Memory Usage:</span> {formatBytes(metrics.memoryUsage)}
+        </div>
+      </div>
+
+      {/* Pass Time Breakdown */}
+      {metrics.passTimes && metrics.passTimes.length > 0 && (
+        <div>
+          <div style={{ fontSize: "13px", fontWeight: "600", marginBottom: "8px" }}>Pass Breakdown</div>
+          <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+            {metrics.passTimes.map((pass, index) => (
+              <div
+                key={pass.passId}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  fontSize: "11px",
+                  padding: "4px 8px",
+                  backgroundColor: "#f5f5f5",
+                  borderRadius: "4px",
+                }}
+              >
+                <div style={{ width: "20px", fontWeight: "600", color: "#666" }}>{index + 1}</div>
+                <div style={{ flex: 1, marginRight: "8px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{pass.passId}</div>
+                <div style={{ fontWeight: "600", color: "#1976d2" }}>{pass.time.toFixed(2)}ms</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface MetricBarProps {
+  label: string;
+  value: number;
+  max: number;
+  color: string;
+}
+
+const MetricBar: React.FC<MetricBarProps> = ({ label, value, max, color }) => {
+  const percentage = Math.min((value / max) * 100, 100);
+
+  return (
+    <div style={{ marginBottom: "12px" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "11px", marginBottom: "4px" }}>
+        <span style={{ fontWeight: "600" }}>{label}</span>
+        <span>{value.toFixed(2)}ms</span>
+      </div>
+      <div style={{ width: "100%", height: "8px", backgroundColor: "#e0e0e0", borderRadius: "4px", overflow: "hidden" }}>
+        <div
+          style={{
+            width: `${percentage}%`,
+            height: "100%",
+            backgroundColor: color,
+            transition: "width 0.3s ease",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}

package/src/components/PerformanceMonitor/index.ts

@@ -0,0 +1,2 @@
+export { PerformanceMonitor } from "./PerformanceMonitor";
+export type { PerformanceMonitorProps, PerformanceMetrics } from "./PerformanceMonitor";