frontend/scripts/04_monaco_workspace.sh

#!/usr/bin/env bash
set -euo pipefail

mkdir -p components/editor

cat > components/editor/ProductionCodeEditor.jsx <<'EOC'
"use client";

import Editor from "@monaco-editor/react";

export default function ProductionCodeEditor({
  language = "typescript",
  value = "",
  onChange
}) {
  return (
    <Editor
      height="100%"
      defaultLanguage={language}
      value={value}
      theme="vs-dark"
      onChange={onChange}
      options={{
        automaticLayout: true,
        minimap: { enabled: true },
        fontSize: 14,
        smoothScrolling: true,
        cursorBlinking: "smooth",
        scrollBeyondLastLine: false,
        wordWrap: "on",
        tabSize: 2
      }}
    />
  );
}
EOC

cat > components/editor/EditorToolbar.jsx <<'EOC'
"use client";

export default function EditorToolbar() {
  return (
    <div className="flex h-12 items-center justify-between border-b border-slate-800 bg-slate-950 px-4">
      <div className="font-semibold text-sky-400">
        Dolor3V Studio
      </div>

      <div className="flex gap-2">
        <button className="rounded bg-sky-600 px-3 py-1 text-white">
          Save
        </button>

        <button className="rounded bg-emerald-600 px-3 py-1 text-white">
          Run
        </button>

        <button className="rounded bg-purple-600 px-3 py-1 text-white">
          Build
        </button>
      </div>
    </div>
  );
}
EOC

cat > components/editor/index.js <<'EOC'
export { default as ProductionCodeEditor } from "./ProductionCodeEditor";
export { default as EditorToolbar } from "./EditorToolbar";
EOC

echo "[1/5] Installing Monaco..."
npm install @monaco-editor/react monaco-editor

echo "[2/5] Verifying..."
test -f components/editor/ProductionCodeEditor.jsx
test -f components/editor/EditorToolbar.jsx
test -f components/editor/index.js

echo "[3/5] Complete."
echo "Production Monaco workspace installed."